/* ==========================================================================
   Booking Hero (Vertical): booking_hero_vertical.php
   Loads AFTER main_booking_hero.css and reuses every widget-internal style
   (custom-select, passengers popup, inputs, spinner). Desktop is a split:
   marketing content (headline + callouts) beside the stacked booking form.
   Mobile deliberately falls back to main_booking_hero's mobile treatment:
   the content block becomes the image banner and the form uses the SHARED
   .booking-form-grid mobile rules (2-col card, floating labels). So the form
   overrides here are scoped to desktop only. Namespaced .booking-hero-v.
   ========================================================================== */

/* Alert modal (the widget JS builds .cf-alert-overlay; its CSS lives inline in
   main_booking_hero.php, so a vertical-only page needs it here too). */
.cf-alert-overlay{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;transition:background .25s ease;pointer-events:none}
.cf-alert-overlay.is-visible{background:rgba(0,0,0,.35);pointer-events:auto}
.cf-alert-box{background:#fff;border-radius:16px;padding:36px 32px 28px;max-width:380px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.04);transform:scale(.85) translateY(10px);opacity:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .25s ease}
.cf-alert-overlay.is-visible .cf-alert-box{transform:scale(1) translateY(0);opacity:1}
.cf-alert-overlay.is-closing{background:rgba(0,0,0,0)}
.cf-alert-overlay.is-closing .cf-alert-box{transform:scale(.9) translateY(6px);opacity:0}
.cf-alert-icon{width:52px;height:52px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px}
.cf-alert-icon.is-success{background:#ecfdf5}
.cf-alert-icon.is-warning{background:#fffbeb}
.cf-alert-icon.is-error{background:#fef2f2}
.cf-alert-icon svg{width:26px;height:26px}
.cf-alert-title{font-size:1.15rem;font-weight:700;color:#1a1a2e;margin:0 0 8px;line-height:1.3}
.cf-alert-text{font-size:.875rem;color:#64748b;margin:0;line-height:1.5}
.cf-alert-btn{display:inline-block;margin-top:22px;padding:10px 40px;background:var(--color-primary,#E8612D);color:#fff;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;font-family:inherit;transition:filter .15s ease,transform .1s ease}
.cf-alert-btn:hover{filter:brightness(.9)}
.cf-alert-btn:active{transform:scale(.97)}

/* ── Section shell (MOBILE-FIRST) ──────────────────────────────────────────
   Mobile mirrors main_booking_hero: full-bleed container, the content block is
   the image banner (bg set inline by the template), the form card sits below. */
.booking-hero-v{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 20% 0%,#233040 0%,#141b24 55%,#0c1119 100%)}
.booking-hero-v .container{position:relative;z-index:2;width:100%;padding-left:0;padding-right:0}
.booking-hero-v__grid{display:block}
.booking-hero-v__content{padding:56px 20px 40px}
.booking-hero-v__form{padding:0}

/* Headline / subtitle. Mobile matches main_booking_hero (22px title,
   font-size-lg subtitle, white over the image banner). Callouts are hidden on
   mobile and appear only in the desktop split. */
.booking-hero-v__title{margin:0;color:#fff;font-size:22px;font-weight:var(--font-weight-bold);line-height:1.25;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.booking-hero-v__subtitle{margin:12px 0 0;color:#fff;font-size:var(--font-size-lg);line-height:1.5;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.booking-hero-v__callouts{list-style:none;margin:22px 0 0;padding:0;display:none;grid-template-columns:1fr;gap:12px}
@media(max-width:575px){.booking-hero-v__content{padding:40px 20px 30px}}
.booking-hero-v__callouts li{display:flex;align-items:center;gap:11px;color:#fff;font-size:1rem;font-weight:500;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.booking-hero-v__callouts svg{width:14px;height:14px;flex-shrink:0;color:#fff;padding:5px;border-radius:50%;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);box-sizing:content-box}
.booking-hero-v .booking-search-btn{font-weight:700}

/* Custom light background -> dark hero text (HeroBackground picks the mode). */
.booking-hero-v--dark-text .booking-hero-v__title,.booking-hero-v--dark-text .booking-hero-v__subtitle{color:var(--color-text-primary);text-shadow:none}
.booking-hero-v--dark-text .booking-hero-v__callouts li{color:var(--color-text-primary);text-shadow:none}
.booking-hero-v--dark-text .booking-hero-v__callouts svg{color:#0a7d4f;background:rgba(10,125,79,.12)}

/* ── Desktop (≥900): the split + the stacked single-column form ──────────────
   20 Oct 2026 (owner, site 107): the title and the subtitle stay on ONE line each (hero hard rule 1), so the text column
   is as wide as the form allows (form 390, gap 56: ~700px at 1200+) and the title is 40px display font (about 34 characters),
   the subtitle 17px (about 80). Callouts one list (the photo subject shows between text and form), each one line. Checked by testkit rig/site-layout.py --only hero. */
@media(min-width:900px){
    .booking-hero-v{display:flex;align-items:center;min-height:clamp(560px,78vh,720px);padding:72px 0}
    .booking-hero-v .container{padding-left:24px;padding-right:24px}
    .booking-hero-v__grid{display:flex;flex-direction:row;align-items:center;gap:56px}
    .booking-hero-v__content{flex:1 1 auto;min-width:0;padding:0}
    .booking-hero-v__form{flex:0 0 390px;padding:0}
    .booking-hero-v--form-left .booking-hero-v__grid{flex-direction:row-reverse}

    .booking-hero-v__title{font-size:clamp(32px,3.1vw,40px);font-weight:600;letter-spacing:-.015em;line-height:1.1;text-shadow:0 2px 24px rgba(0,0,0,.35)}
    .booking-hero-v__subtitle{margin-top:14px;font-size:17px;line-height:1.55;text-shadow:0 1px 12px rgba(0,0,0,.4)}
    .booking-hero-v__callouts{display:grid;margin-top:30px;grid-template-columns:1fr;gap:14px}
    .booking-hero-v__callouts li{font-size:16px;white-space:nowrap}

    /* Stack the shared form into one column (mobile keeps the shared 2-col grid) */
    .booking-hero-v .booking-widget-card--v{width:100%;max-width:none;margin:0;padding:22px;border-radius:18px;box-shadow:0 30px 70px -18px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06);text-align:left}
    .booking-hero-v .booking-form-grid{grid-template-columns:1fr;gap:14px;align-items:stretch}
    .booking-hero-v .location-fields-group{flex-direction:column;gap:14px;align-items:stretch}
    .booking-hero-v .location-fields-group .booking-field{flex:none;width:100%;min-width:100%}
    .booking-hero-v .location-fields-group .swap-locations-btn{display:none}
    .booking-hero-v .location-fields-group .booking-field:first-child::after{display:none}
    .booking-hero-v .location-fields-group .custom-select-trigger{border:1px solid var(--color-border-primary) !important;border-radius:var(--radius-lg) !important;padding-left:36px !important;padding-right:36px !important}
    .booking-hero-v .location-fields-group .custom-select-trigger.active{border-color:var(--color-text-primary) !important}
    .booking-hero-v .location-fields-group .custom-select-arrow{display:block}
    .booking-hero-v .location-fields-group .custom-select-icon{display:block !important;margin:0}
    .booking-hero-v .booking-search-btn{width:100%;height:52px;font-size:var(--font-size-lg)}
    /* the bar keeps the hidden "Return" label for alignment; stacked it is only an empty line above "Add return" */
    .booking-hero-v #returnLabel[style*="visibility:hidden"],.booking-hero-v #returnLabel[style*="visibility: hidden"]{display:none}
}
@media(min-width:900px) and (max-width:1199px){
    .booking-hero-v__grid{gap:36px}
    .booking-hero-v__form{flex-basis:360px}
    .booking-hero-v__callouts{grid-template-columns:1fr}
}

/* Keep the incomplete-notice legible while editing */
.booking-hero-v.is-incomplete .booking-hero-v__grid{filter:blur(1px);opacity:.6}

/* ── Height tall (26 Oct 2026, SectionSchema booking_hero_vertical `height`) ─────
   Desktop: the photo fills the screen under the header (100vh minus the navbar and its 1px border, as
   .booking-hero--tall in main_booking_hero.css); the form card stays centred. Phones keep the banner. */
@media(min-width:900px){.booking-hero-v.booking-hero-v--tall{min-height:clamp(620px,calc(100vh - var(--header-height,64px) - 1px),940px)}}