/* =====================================================================
   F2F "Booking request" modal (#f2f-before-request) — VTH design system.
   Extracted from the inline <style> in resources/views/auth/modals/
   f2f-before-request.blade.php so all id-based CSS lives in one file (no
   inline styles, no duplicate #f2f-before-request rules in
   common_new_theme.css). Linked once from that partial.

   Colours come from the active sector's design palette tokens (defined per
   sector in new_landing_page_design/css/style.css :root); the sector pill
   uses the CLICKED course's own sector colour (ng-style). #fff / neutral
   hairlines and shadow rgba are the only literals. ID + load-after-theme
   order lets these beat the legacy !important rules in common_new_theme.css.
   ===================================================================== */
#f2f-before-request .ng-f2f-error { display: block; }

#f2f-before-request {
  --_accent:       var(--sector-accent, #192AC1);
  --_hover:        var(--sector-hover, #1A2CE8);
  --_focus:        var(--sector-focus, #1D2C92);
  --_light:        var(--sector-light, #4668FF);
  --_secondary:    var(--sector-secondary, #FFB900);
  --_secondary-fg: var(--sector-secondary-fg, #4A3200);
  --_soft:         var(--sector-soft, #EAF3FF);
  --_soft-fg:      var(--sector-soft-fg, #1D2C92);
  --_line:         #E7E7E7;
  --_ink:          #131313;
  --_ink-2:        #2B2B2B;
  --_ink-3:        #5D5D5D;
  --_ring:         0 0 0 4px color-mix(in srgb, var(--sector-accent, #192AC1) 22%, transparent);
  width: min(1020px, 100%) !important;
  max-width: min(1020px, 100%) !important;
  max-height: min(88vh, 860px) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 40px 90px rgba(11,15,41,.34) !important;
}

/* ---------------------------------------------------------------------------
   DERIVE THE ACCENT FAMILY FROM THE ACCENT ITSELF.

   Every sector theme defines only `--sector-accent` (see
   new_landing_page_design/css/style.css :root — childrens_home, for instance, sets
   that one and nothing else). The -hover/-focus/-light/-soft/-soft-fg tokens were
   therefore falling back to the BRAND BLUE literals above, so a sector-coloured CTA
   turned blue on hover and active, the chips and selected route card were blue-soft,
   and the gradient was blue. Deriving them from --_accent keeps the whole popup on
   one colour.

   Layered as a separate @supports block rather than edited into the rule above ON
   PURPOSE: if color-mix is unsupported the literals above still stand, so nothing
   renders colourless. The file already relies on color-mix for --_ring and the route
   borders, so this adds no new requirement where it matters.

   An explicit --sector-* from a theme still wins: it is the first argument of each
   var(), so these only fill the gaps.
   --------------------------------------------------------------------------- */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  #f2f-before-request {
    --_hover:   var(--sector-hover,   color-mix(in srgb, var(--_accent) 86%, #000000));
    --_focus:   var(--sector-focus,   color-mix(in srgb, var(--_accent) 72%, #000000));
    --_light:   var(--sector-light,   color-mix(in srgb, var(--_accent) 62%, #FFFFFF));
    --_soft:    var(--sector-soft,    color-mix(in srgb, var(--_accent) 10%, #FFFFFF));
    --_soft-fg: var(--sector-soft-fg, color-mix(in srgb, var(--_accent) 78%, #000000));
    /* Follows the course's accent too, instead of re-reading --sector-accent. */
    --_ring:    0 0 0 4px color-mix(in srgb, var(--_accent) 22%, transparent);
  }
}

/* ---------------------------------------------------------------------------
   SURFACE-LEVEL OVERRIDE — the popup follows the SECTOR WEBSITE, not the course.

   RULE: the sector BADGE takes the COURSE's sector colour (set on the pill itself);
   EVERYTHING ELSE here — CTA, eyebrows, icons, route cards, chips, gradient, focus
   ring — takes the SECTOR WEBSITE the visitor is on. Off a sector domain both the
   accent and its family fall back to the main brand primary.

   This override is still needed even though each sector theme defines the whole
   --sector-* family in :root, because those literals are the LEGACY palette, not the
   approved one — e.g. childrens_home's --sector-accent is #12828F where the approved
   accent is #0D4B50. f2fRequestController sets --surface-accent from
   window.reskinSiteAccent (reskinAccentColor(), the canonical PHP map) plus this
   attribute. The attribute selector is (1,1,0), which outranks the (1,0,0) rule
   above without !important.

   RATIOS ARE DEFINED HERE, NOT IN JS — one source of truth. They are fitted to the
   relationship the hand-authored themes already use: e.g. teal accent #12828F has
   hover #0A5E65 (~72% toward black) and focus #002D33 (~40%).
   --------------------------------------------------------------------------- */
/* INK ON THE ACCENT IS CHOSEN BY LUMINANCE, not assumed to be white. Measured
   white-on-accent contrast across the nine sector colours: childminder #A1D11C
   1.80:1, early years #FF961A 2.18:1 and leaving care #78AB33 2.74:1 all FAIL even
   the 3:1 large-text floor; foster care #F25926 (3.37) and adult care #0E80C6
   (4.27) are large-text only. Now a course's sector can colour this popup from ANY
   surface, those are reachable everywhere, so f2fRequestController resolves the
   accent and sets --_on-accent to white or near-black, whichever wins. The #fff
   fallback leaves the un-overridden (page-sector) case exactly as it was. */
#f2f-before-request[data-surface-accent] { --_accent: var(--surface-accent); }

@supports (color: color-mix(in srgb, red 50%, blue)) {
  #f2f-before-request[data-surface-accent] {
    --_hover:   color-mix(in srgb, var(--surface-accent) 72%, #000000);
    --_focus:   color-mix(in srgb, var(--surface-accent) 40%, #000000);
    --_light:   color-mix(in srgb, var(--surface-accent) 82%, #FFFFFF);
    --_soft:    color-mix(in srgb, var(--surface-accent) 14%, #FFFFFF);
    --_soft-fg: color-mix(in srgb, var(--surface-accent) 40%, #000000);
    --_ring:    0 0 0 4px color-mix(in srgb, var(--surface-accent) 22%, transparent);
  }
}


#f2f-before-request, #f2f-before-request * { font-family: 'Poppins', sans-serif !important; box-sizing: border-box; }
#f2f-before-request .modal-content { padding: 0 !important; max-height: min(88vh, 860px) !important; overflow: hidden !important; }
#f2f-before-request .f2f-ic { display: block; width: 20px; height: 20px; flex: 0 0 auto; }

#f2f-before-request .f2f-br-grid {
  display: grid; grid-template-columns: 1.08fr .92fr;
  max-height: min(88vh, 860px);
}

/* Close */
#f2f-before-request .f2f-br-x {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--_line); color: var(--_ink-2);
}
#f2f-before-request .f2f-br-x .f2f-ic { width: 17px; height: 17px; }
#f2f-before-request .f2f-br-x:hover { background: #f6f6f6; }

/* Shared bits */
#f2f-before-request .f2f-br-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--_accent);
}

/* LEFT column */
#f2f-before-request .f2f-br-left { padding: 34px 32px; overflow-y: auto; }
#f2f-before-request .f2f-br-h3 {
  margin: 10px 0 16px !important; font-size: 27px; line-height: 35px; font-weight: 600; letter-spacing: -.02em; color: var(--_ink);
}

/* Course summary card */
#f2f-before-request .f2f-br-course {
  display: flex; gap: 14px; padding: 12px; margin: 0 0 22px;
  border: 1px solid var(--_line); border-radius: 16px; background: #F9FAFD;
}
#f2f-before-request .f2f-br-thumb {
  position: relative; flex: 0 0 112px; width: 112px; aspect-ratio: 16/11;
  border-radius: 11px; background: #E8EAF3 center/cover no-repeat;
}
#f2f-before-request .f2f-br-pill {
  position: absolute; top: 6px; left: 6px; max-width: calc(100% - 12px);
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; border-radius: 999px;
  background: var(--_accent); color: var(--_on-accent, #fff); font-size: 10.5px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; overflow: hidden;
}
#f2f-before-request .f2f-br-pill > span { overflow: hidden; text-overflow: ellipsis; }
#f2f-before-request .f2f-br-pill-logo {
  flex: 0 0 17px; width: 17px; height: 17px; border-radius: 50%;
  background: #fff; object-fit: cover; display: block;
}
#f2f-before-request .f2f-br-pill.no-logo { padding-left: 9px; }
#f2f-before-request .f2f-br-course-info { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
#f2f-before-request .f2f-br-course-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--_ink-3);
}
/* Course title clamped to a maximum of two lines */
#f2f-before-request .f2f-br-course-title {
  margin: 3px 0 6px; font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--_ink);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
#f2f-before-request .f2f-br-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#f2f-before-request .f2f-br-chip {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--_soft); color: var(--_soft-fg);
}
#f2f-before-request .f2f-br-chip-country { gap: 5px; padding-left: 5px; }
#f2f-before-request .f2f-br-flag {
  width: 18px; height: 12px; object-fit: cover; border-radius: 2px; display: block; flex: 0 0 18px;
}

/* Routes */
#f2f-before-request .f2f-br-routes { display: flex; flex-direction: column; gap: 10px; }
#f2f-before-request .f2f-br-route {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 14px 15px; border-radius: 16px; border: 1.5px solid var(--_line);
  background: #fff; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
#f2f-before-request .f2f-br-route:hover { border-color: color-mix(in srgb, var(--_accent) 40%, #fff); }
#f2f-before-request .f2f-br-route.is-selected {
  border-color: var(--_accent); background: var(--_soft); box-shadow: 0 6px 20px color-mix(in srgb, var(--_accent) 16%, transparent);
}
#f2f-before-request .f2f-br-route-ico {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: var(--_soft); color: var(--_accent);
}
#f2f-before-request .f2f-br-route.is-selected .f2f-br-route-ico { background: var(--_accent); color: #fff; }
#f2f-before-request .f2f-br-route-ico .f2f-ic { width: 21px; height: 21px; }
#f2f-before-request .f2f-br-route-body { flex: 1; min-width: 0; }
#f2f-before-request .f2f-br-route-title {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 15px; font-weight: 600; line-height: 21px; color: var(--_ink);
}
#f2f-before-request .f2f-br-route-desc { display: block; margin-top: 2px; font-size: 13px; line-height: 19px; color: var(--_ink-2); overflow-wrap: anywhere; }
#f2f-before-request .f2f-br-tag {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: var(--_secondary); color: var(--_secondary-fg);
}
#f2f-before-request .f2f-br-route-end { flex: 0 0 auto; color: var(--_ink-3); display: flex; }
#f2f-before-request .f2f-br-route.is-selected .f2f-br-route-end { color: var(--_accent); }
#f2f-before-request .f2f-br-route-end .f2f-ic { width: 17px; height: 17px; }

/* Primary CTA — inline (auto width), left-aligned, per the Claude Design */
#f2f-before-request .f2f-br-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: auto; height: 48px; margin-top: 22px; padding: 0 24px; border: none; border-radius: 12px;
  background: var(--_accent); color: var(--_on-accent, #fff); font-size: 16px; font-weight: 500; cursor: pointer;
  transition: background .15s;
}
#f2f-before-request .f2f-br-cta:hover { background: var(--_hover); }
#f2f-before-request .f2f-br-cta:active { background: var(--_focus); }
#f2f-before-request .f2f-br-cta .f2f-ic { width: 18px; height: 18px; }

/* RIGHT rail */
#f2f-before-request .f2f-br-rail {
  padding: 34px 30px; overflow-y: auto; border-left: 1px solid var(--_line);
  background: linear-gradient(170deg, var(--_soft) 0%, #F7F8FC 62%);
}
#f2f-before-request .f2f-br-h4 { margin: 10px 0 20px !important; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; color: var(--_ink); }
#f2f-before-request .f2f-br-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
#f2f-before-request .f2f-br-benefit { display: flex; gap: 11px; align-items: flex-start; }
#f2f-before-request .f2f-br-benefit-txt { min-width: 0; }
#f2f-before-request .f2f-br-benefit-ico {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--_accent); box-shadow: 0 1px 3px rgba(16,24,40,.08);
}
#f2f-before-request .f2f-br-benefit-ico .f2f-ic { width: 17px; height: 17px; }
#f2f-before-request .f2f-br-benefit-t { display: block; font-size: 13.5px; line-height: 19px; font-weight: 600; color: var(--_ink); }
#f2f-before-request .f2f-br-benefit-d { display: block; font-size: 12.5px; line-height: 18px; color: var(--_ink-2); overflow-wrap: anywhere; }
#f2f-before-request .f2f-br-rail-foot {
  display: flex; align-items: center; gap: 8px; margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(19,19,19,.08); font-size: 12.5px; font-weight: 500; color: var(--_ink-3);
}
#f2f-before-request .f2f-br-rail-foot .f2f-ic { width: 15px; height: 15px; }

/* Focus visibility on every focusable element */
#f2f-before-request .f2f-br-route:focus-visible,
#f2f-before-request .f2f-br-cta:focus-visible,
#f2f-before-request .f2f-br-x:focus-visible { outline: none; box-shadow: var(--_ring); }

/* =====================================================================
   Responsive
   ===================================================================== */
/* Tablet / small desktop — collapse to one column; the whole dialog scrolls
   as one (not per-column) so nothing gets trapped. */
@media (max-width: 860px) {
  #f2f-before-request {
    width: 94% !important; max-width: 560px !important; max-height: 92vh !important;
  }
  #f2f-before-request .modal-content { max-height: 92vh !important; overflow-y: auto !important; }
  #f2f-before-request .f2f-br-grid { grid-template-columns: 1fr; max-height: none; }
  #f2f-before-request .f2f-br-left { overflow: visible; padding: 30px 22px; }
  #f2f-before-request .f2f-br-rail { overflow: visible; border-left: none; border-top: 1px solid var(--_line); padding: 26px 22px; }
  #f2f-before-request .f2f-br-h3 { font-size: 23px; line-height: 30px; }
}

/* Phones */
@media (max-width: 560px) {
  #f2f-before-request { border-radius: 18px !important; }
  #f2f-before-request .f2f-br-left { padding: 26px 18px; }
  #f2f-before-request .f2f-br-rail { padding: 22px 18px; }
  #f2f-before-request .f2f-br-x { top: 12px; right: 12px; width: 32px; height: 32px; }
  #f2f-before-request .f2f-br-h3 { font-size: 21px; line-height: 28px; margin: 8px 0 14px !important; }
  #f2f-before-request .f2f-br-course { padding: 10px; gap: 12px; }
  #f2f-before-request .f2f-br-thumb { flex-basis: 92px; width: 92px; }
  #f2f-before-request .f2f-br-route { padding: 12px 13px; gap: 11px; border-radius: 14px; }
  #f2f-before-request .f2f-br-route-ico { flex-basis: 38px; width: 38px; height: 38px; border-radius: 11px; }
  #f2f-before-request .f2f-br-route-desc { font-size: 12.5px; }
  #f2f-before-request .f2f-br-cta { height: 46px; font-size: 15px; }
}

/* Very small phones — stack the course thumbnail above its details */
@media (max-width: 380px) {
  #f2f-before-request .f2f-br-course { flex-direction: column; }
  #f2f-before-request .f2f-br-thumb { flex-basis: auto; width: 100%; aspect-ratio: 16/9; }
  #f2f-before-request .f2f-br-course-info { justify-content: flex-start; }
}

/* Short viewports (landscape phones) — keep the dialog scrollable */
@media (max-height: 620px) {
  #f2f-before-request { max-height: 96vh !important; }
  #f2f-before-request .modal-content { max-height: 96vh !important; }
}