/* ============================================================
   ITEC 2026 brand-refresh overrides for tennis-generic landing
   Loaded AFTER style.css so these rules win.
   Palette:
     Navy 950  #0A1E38  (dominant background)
     Navy 900  #0B3665   Navy #004282
     Tennis Yellow #FFE433   Green #33A969   Teal #00A1E4
   Only colours, the In/Out headline, the green line and the
   50th-anniversary seal are touched. Layout & RTL are preserved.
   ============================================================ */

:root{
  --navy950:#0A1E38;
  --navy900:#0B3665;
  --navy:#004282;
  --yellow:#FFE433;
  --green:#33A969;
  --teal:#00A1E4;
}

/* page edges + dominant background ------------------------------------ */
body{ background:#0A1E38; }

/* remove the retired "clouds" sky graphic; replace with deep navy */
.main{
  background:#0A1E38 !important;
  background-image:
    radial-gradient(60% 55% at 80% 12%, rgba(0,161,228,.18), transparent 60%),
    linear-gradient(165deg, #0c2a4e 0%, #0a2444 42%, #0A1E38 100%) !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
}
@media (max-width:991px){
  .main{
    background:#0A1E38 !important;
    background-image:
      radial-gradient(70% 30% at 70% 8%, rgba(0,161,228,.18), transparent 60%),
      linear-gradient(180deg, #0c2a4e 0%, #0A1E38 60%) !important;
    background-size:cover !important;
    background-position:center top !important;
  }
}

/* ---- 95₪ variant only (body.with-photo): real kid photo behind the
        hero, darkened with a navy wash so the text stays fully readable ---- */
.with-photo .main{
  background:
    linear-gradient(180deg, rgba(10,30,56,.74) 0%, rgba(10,30,56,.40) 42%, rgba(10,30,56,.26) 100%),
    url("../img/kid.jpg") center 10% / cover no-repeat !important;
}
@media (max-width:991px){
  .with-photo .main{
    background:
      linear-gradient(180deg, rgba(10,30,56,.80) 0%, rgba(10,30,56,.44) 46%, rgba(10,30,56,.30) 100%),
      url("../img/kid-mobile.jpg") 35% top / cover no-repeat !important;
  }
}
/* keep text readable over the now-lighter photo */
.io-out{
  text-shadow:0 2px 14px rgba(0,12,32,.7);
  font-size:clamp(2rem, calc(3.4vh + 2.4vw), 4.4rem);  /* smaller than the big yellow word */
  font-weight:800;
  color:#ffffff;
}
.io-in{ text-shadow:0 3px 20px rgba(0,12,32,.6); }
.b-text{ text-shadow:0 2px 12px rgba(0,12,32,.78); }

/* ---- In / Out headline (replaces "חוויה גדולה במחיר קטן") ---- */
.io-title{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.4vh;
  margin-bottom:4vh;
  line-height:.92;
  font-weight:400;            /* light refresh weight */
}
.io-title .io-k{
  font-family:'Baloo 2','Assistant',sans-serif;
  font-weight:500;
  margin-inline-end:.15em;
}
/* io-in ("×—×™× ×!") is the big yellow punch; io-out ("קורס מתחילים")
   is a smaller white qualifier above it — must not overflow the column. */
.io-in{
  font-family:'SpoilerHE','Assistant',sans-serif;
  font-size:clamp(4.2rem, calc(5vh + 5.4vw), 10.5rem);
  font-weight:900;
}
.io-out{
  font-family:'SpoilerHE','Assistant',sans-serif;
  font-size:clamp(2.4rem, calc(1.8vh + 3.4vw), 5rem);
  font-weight:900;
  color:#ffffff;
  white-space:nowrap;                     /* keep "קורס מתחילים" on one line */
}
.io-out .io-k{ color:#9fb2cf; }
.io-in{
  color:var(--yellow);                    /* Tennis Yellow */
  text-shadow:0 3px 18px rgba(0,15,40,.45);
}
.io-in .io-k{ color:var(--green); }

/* ---- supporting texts: now sit on dark navy → light colours ---- */
.b-text{
  color:#ffffff !important;
  font-weight:500;            /* lighter than the old 900 */
}
.b-subtitle{ color:#ffffff !important; }
.b-subtitle b{ color:#ffffff; }
.b-subtitle b:nth-child(1){ color:var(--yellow); }   /* the "6" */
.b-subtitle b:nth-child(2){ color:var(--yellow); }   /* "××™×ž×•× ×™×" */

/* ---- call-to-action buttons → Tennis Yellow ---- */
.b-form .btn,
.b-form .btn:focus{
  background:var(--yellow) !important;
  border-color:var(--yellow) !important;
  color:#0A1E38 !important;
  font-weight:900;
}
.b-form .btn:hover,
.b-form .btn:active,
.b-form .btn:focus:active{
  background:var(--teal) !important;
  border-color:var(--teal) !important;
  color:#ffffff !important;
}

/* ---- footer: same navy as the top so the page reads as one colour ---- */
.footer{ background:#0A1E38 !important; color:#fff; }
.hr-vert{ background:rgba(255,255,255,.55); }

/* ============================================================
   THE DEAL — the hero offer: 6 ××™×ž×•× ×™× ב-₪160. Make it shout.
   ============================================================ */
.b-subtitle.deal b:nth-child(1){          /* the "6" */
  color:var(--yellow);
  font-size:clamp(4rem, calc(7vh + 4vw), 9rem);
  text-shadow:0 4px 20px rgba(0,15,40,.5);
}
.b-subtitle.deal b:nth-child(2){          /* "××™×ž×•× ×™×" */
  color:#ffffff;
  font-size:clamp(2.2rem, calc(4vh + 2vw), 4rem);
}
.b-subtitle.deal .deal-line{
  display:block;
  color:#ffffff;
  font-weight:500;
  font-size:clamp(1.4rem, calc(2.5vh + 1.5vw), 2.6rem);
  margin-top:.4vh;
}
.b-subtitle.deal .deal-line .deal-num{
  display:inline-block;
  background:var(--yellow);
  color:#0A1E38;
  font-weight:900;
  border-radius:.28em;
  padding:0 .18em;
  font-size:1.45em;
  line-height:1;
  box-shadow:0 6px 20px rgba(255,228,51,.28);
}

/* mobile: centre the offer block (it was pushed to the side) */
@media (max-width:991px){
  .b-subtitle{
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center;
  }
}

/* ---- 50th-anniversary seal, anchored bottom-centre ---- */
.seal-50{
  text-align:center;
  padding:6px 0 2px;
}
.seal-50 img{
  width:clamp(96px, 12vw, 150px);
  height:auto;
  display:inline-block;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));
}
@media (max-width:991px){
  .seal-50{ padding-top:10px; }
}

/* ============================================================
   THANK-YOU page (thanks.html) — same dark navy ground
   ============================================================ */
.thanks .b-block__title{
  color:var(--yellow);          /* "תודה רבה!" in Tennis Yellow */
  font-weight:900;
  text-shadow:0 4px 20px rgba(0,15,40,.5);
}
.thanks .b-block__subtitle{
  color:#ffffff;                /* was navy → invisible on navy */
  font-weight:400;
}
.thanks .b-block__subtitle:before,
.thanks .b-block__subtitle:after{
  background:var(--green);      /* accent rules above/below the line */
}

/* ---- supporting line: a small, tidy sub-headline (not a big block) ---- */
.b-text{
  font-family:'SpoilerHE','Assistant',sans-serif !important;
  font-size:clamp(1.6rem, calc(2vh + 1.9vw), 2.8rem) !important;
  font-weight:700 !important;
  line-height:1.4;
  max-width:34ch;
  margin-top:2.6vh;
}

/* ---- "limited spots" urgency badge (replaces the price/deal block) ---- */
.urgency{
  position:absolute;          /* pulled out of flow → sits on a figure-free
                                 area (court, bottom-right), never over a face */
  bottom:8%;
  right:2%;
  top:auto;
  left:auto;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.15em;
  width:clamp(156px, 14vw, 212px);
  aspect-ratio:1/1;
  border-radius:50%;
  background:var(--navy900);
  border:2px solid var(--yellow);
  box-shadow:0 12px 30px rgba(0,0,0,.42);
  padding:1em;
  transform:rotate(-7deg);
}
.urgency .u-top{
  color:#fff;
  font-weight:500;
  font-size:clamp(1.05rem, calc(.7vh + .8vw), 1.4rem);   /* desktop: larger */
  line-height:1.15;
}
.urgency .u-bot{
  color:var(--yellow);
  font-weight:900;
  font-size:clamp(1.3rem, calc(1vh + .95vw), 1.8rem);    /* desktop: larger */
  line-height:1.1;
}
@media (max-width:991px){
  .urgency{ top:38%; right:1%; bottom:auto; left:auto; width:clamp(104px, 27vw, 134px); transform:rotate(-6deg); }
  /* keep the mobile badge text at its previous (smaller) size */
  .urgency .u-top{ font-size:clamp(.85rem, calc(.5vh + .6vw), 1.05rem); }
  .urgency .u-bot{ font-size:clamp(1rem, calc(.8vh + .75vw), 1.3rem); }
}

/* ---- compact footer: keep the navy block to ~1/4 of the page (was ~1/3).
        Shrinks padding, the gap before the contact row, and the 50-seal —
        the form fields themselves keep their size. ---- */
.footer{ padding:0.7vh 0 !important; }
.footer .pt-3{ padding-top:.35rem !important; }
.footer-inf{ font-size:clamp(16px, calc(1.5vh + .85vw), 1.95rem) !important; }
.seal-50{ padding:0 !important; margin-top:.3vh; }
.seal-50 img{ width:clamp(66px, 6.6vw, 92px) !important; }

/* ---- mobile: smaller form fields + button so the proportions sit better ---- */
@media (max-width:991px){
  .b-form .form-control,
  .b-form .btn{
    height:6.2vh !important;
    max-height:50px !important;
  }
  .b-form .form-control{ font-size:1.12rem !important; }
  .b-form .btn{ font-size:1.5rem !important; line-height:1 !important; padding:.55rem 1rem !important; }
  .b-form .select2-container--default .select2-selection--single{ height:50px !important; }
  .b-form .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:50px !important; }
  .b-form__item{ margin-bottom:2.2vw !important; }
}

/* ---- signature thin green line at the very bottom of the page ---- */
.greenline{
  position:fixed;
  left:0; right:0; bottom:0;
  height:7px;
  background:var(--green);
  z-index:60;
}