/* ONLINE-LOOK VARIANT — presentation only.
   Repaints the mainsite form to match /online. Adds NOTHING to the DOM and moves nothing:
   every field, name, id, order, hidden input, script and the submit path are untouched, so
   anything reading the markup sees exactly what it saw before. Purely what the page looks like
   — and therefore what a TrustedForm replay shows.
   Scoped to body.online-look so it can be switched off by removing one class. */

/* form to the right, copy to the left — /online's arrangement */
body.online-look .container > .row { flex-direction: row-reverse; }

/* form card: white, teal top rule, soft shadow */
body.online-look .form-body.p-5.border{
  background:#fff; border:0 !important; border-top:4px solid #0d8a8a !important;
  border-radius:16px; box-shadow:0 4px 24px rgba(0,0,0,.08); padding:26px 28px !important;
}
body.online-look .form-header{
  font-size:19px !important; font-weight:700; color:#0d8a8a; letter-spacing:.01em;
  text-transform:none; background:transparent !important; border:0 !important; padding:0 0 4px !important;
}

/* 1-2-3 stepper drawn above the form — no markup added */
body.online-look #stepForm::before{
  content:"1  Interest        2  Contact        3  Details";
  display:block; text-align:center; font-size:11px; font-weight:600; color:#0d8a8a;
  letter-spacing:.06em; padding:10px 0 16px; margin-bottom:6px;
  border-bottom:1px solid #eef0f2; white-space:pre;
}

/* section headings injected before the fields that start each group */
body.online-look #subject_interest,
body.online-look #firstname,
body.online-look #address_1{ scroll-margin-top:90px; }
body.online-look .col-12.col-xl-8:first-of-type > .my-2::before{
  content:"● What Are You Interested In?"; display:block; font-size:16px; font-weight:700;
  color:#1e3a5a; margin:2px 0 10px;
}
body.online-look #firstname_wrap::before{ content:""; }

/* inputs: /online's rounded, lighter treatment */
body.online-look .form-control, body.online-look .form-select{
  border:1px solid #d1d5db !important; border-radius:8px !important; padding:10px 12px !important;
  font-size:13px !important; background:#fff !important;
}
body.online-look .form-control:focus, body.online-look .form-select:focus{
  border-color:#0d8a8a !important; box-shadow:0 0 0 3px rgba(13,138,138,.12) !important;
}
body.online-look label, body.online-look .form-label{
  font-size:12px !important; font-weight:600 !important; color:#374151 !important; margin-bottom:3px !important;
}

/* submit: full-width teal, /online styling */
body.online-look #stepForm button[type=submit],
body.online-look #stepForm input[type=submit]{
  background:#0d8a8a !important; border:0 !important; color:#fff !important;
  width:100%; border-radius:10px !important; padding:15px !important;
  font-size:15px !important; font-weight:700 !important; letter-spacing:.01em;
}

/* left column reads like /online; Welly hidden on this variant */
body.online-look .content h2{ font-size:30px; font-weight:800; color:#1e3a5a; line-height:1.25; }
body.online-look .content ul{ list-style:none; padding-left:0; }
body.online-look .content ul li{
  font-size:14px; font-weight:500; color:#1e3a5a; margin-bottom:12px;
}
body.online-look .content ul li i{ color:#0d8a8a; margin-right:10px; }
body.online-look #homeVideo, body.online-look #videoPlayBtn{ display:none !important; }
body.online-look .content h3, body.online-look .content h3 + div, body.online-look .content h3 ~ p{ display:none !important; }

/* ─────────────────────────────────────────────────────────────────────────
   PHASE-A /online-look ENHANCEMENT (paired with online-look.js) — click traffic only.
   When online-look.js runs it MOVES the existing mainsite fields into three titled
   sections and inserts a real 1-2-3 progress bar, then stamps the form with
   #stepForm[data-online-enhanced="1"]. The rules below paint those JS-created
   elements to match the /online "Get Matched With Schools" card. Everything stays
   scoped to body.online-look, so a normal page load is unaffected; and if the JS
   never runs (fail-safe), the [data-online-enhanced] selectors simply don't match
   and the older pseudo-element look above still applies. Nothing here alters a
   field, name, value, the consent text or the submit path — presentation only.
   ───────────────────────────────────────────────────────────────────────── */

/* CARD CONSISTENCY: the teal-topped white card is drawn by the COLUMN wrapper
   (#hero-fullscreen .col-lg-6, via the v2-overrides — always applied, JS-independent). We used to
   ALSO draw a card on .form-body, gated by :has([data-online-enhanced]) so it only appeared AFTER
   online-look.js ran => a SECOND (double) border that flickered in/out between refreshes. Zero the
   form-body card so the single column card is the ONLY one, identically on every load. */
body.online-look .form-body{
  background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
}

/* Once JS has restructured the form, retire the CSS-only pseudo stepper + pseudo
   heading defined above so they don't double up with the real progress bar and the
   real section headers. Keyed on the data-flag the JS sets — degrades gracefully. */
body.online-look #stepForm[data-online-enhanced]::before{
  content:none !important; border:0 !important; padding:0 !important; margin:0 !important;
}
body.online-look #stepForm[data-online-enhanced] .col-12.col-xl-8 > .my-2::before{
  content:none !important;
}

/* Real 3-dot progress bar — all three shown active/teal (it is a single-page form). */
body.online-look .online-progress{
  display:flex; justify-content:space-between; position:relative;
  margin:6px 0 22px; padding:0 6px;
}
body.online-look .online-progress::before{
  content:""; position:absolute; top:16px; left:40px; right:40px; height:2px;
  background:#0d8a8a; opacity:.35; z-index:0;
}
body.online-look .online-step{ text-align:center; flex:1; z-index:1; }
body.online-look .online-dot{
  width:32px; height:32px; border-radius:50%; background:#0d8a8a; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600; margin:0 auto 4px;
}
body.online-look .online-label{ font-size:10px; font-weight:600; color:#0d8a8a; }

/* Section shells: teal-dot heading (h2::before) + muted description, /online spacing. */
body.online-look .online-section + .online-section{
  margin-top:26px; padding-top:22px; border-top:1px solid #eef0f2;
}
body.online-look .online-section > h2{
  font-size:17px; font-weight:700; color:#1e3a5a; letter-spacing:.01em;
  margin:0 0 4px; background:transparent; text-transform:none; text-align:left;
}
body.online-look .online-section > h2::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#0d8a8a; margin-right:9px; vertical-align:2px;
}
body.online-look .online-section > .step-desc{
  color:#6b7280; font-size:14px; margin:0 0 14px;
}
/* keep the moved Bootstrap .col-* wrappers tidy inside each section row */
body.online-look .online-section-fields{ margin:0; }

/* ── PROGRESSIVE REVEAL (paired with online-look.js, real browsers only) ──────
   online-look.js adds .reveal-on to the .form-body ONLY for a modern human browser.
   Sections 2 & 3 start .pending (hidden) and reveal as the one above is completed; a
   finished section goes .done (collapses) so only the active one is on screen — the
   /online reveal-on wizard feel, while the form stays single-page (all fields remain
   in the DOM for automated fills + the TF cert). Bots (old UA) never get .reveal-on,
   so for them every section stays visible. Nothing here hides a field from a fill. */
body.online-look .form-body.reveal-on .online-section.pending{ display:none; }
body.online-look .form-body.reveal-on .online-section.done{ display:none; }
body.online-look .form-body.reveal-on .online-section.revealed{ animation:olSecIn .34s ease both; }
body.online-look .form-body.reveal-on .online-section + .online-section{ margin-top:0; padding-top:0; border-top:none; }
body.online-look .form-body.reveal-on .online-dot.pending{ background:#e5e7eb !important; color:#9ca3af !important; }
body.online-look .form-body.reveal-on .online-label.pending{ color:#9ca3af !important; font-weight:500; }
@keyframes olSecIn{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }