/* =============================================================================
   BOOKING HERO SECTION — main_booking_hero.css
   All structural / component styles. Image-dependent rules (backgrounds,
   text colours, ::before overlays) are injected inline by the PHP template
   via the .booking-hero--has-image modifier class.
   ============================================================================= */

/* Focus border for every field in the widget: a touch lighter than the near-black
   --color-text-primary the fields used to jump to, which read as harsh. */
:root{--color-field-focus:#343a40}
/* Placeholder grey for the widget's fields. Still clearly a placeholder against
   the #192024 of a real value, but a step darker than the --color-text-muted
   (#8f9ca8) they used to sit at, which was too washed out to read comfortably. */
:root{--color-field-placeholder:#6f7c87}

/* In-page CTAs anchor back to this hero; animate the jump so the move is legible. */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── Hero shell ────────────────────────────────────────────────────────────── */
.booking-hero{position:relative;min-height:450px;display:flex;align-items:center;background:var(--color-bg-gray-light);padding:80px 0 100px}
/* Reviews 6 Box / 3 Box layouts use a slightly shorter hero when it has an image */
@media(min-width:1200px){.booking-hero--reviews.booking-hero--has-image{min-height:420px;padding:70px 0 100px}}
.booking-hero-title{font-size:40px;font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:12px;text-align:left;text-shadow:none;max-width:1200px;margin-left:auto;margin-right:auto}
.booking-hero-subtitle{font-size:var(--font-size-2xl);font-weight:var(--font-weight-normal);color:var(--color-text-primary);margin-bottom:40px;text-align:left;text-shadow:none;max-width:1200px;margin-left:auto;margin-right:auto}
/* Custom background (colour/gradient/pattern): text mode chosen by HeroBackground. */
.booking-hero--light-text .booking-hero-title,.booking-hero--light-text .booking-hero-subtitle{color:var(--color-bg-white);text-shadow:0 2px 8px rgba(0,0,0,0.3)}
.booking-hero--dark-text .booking-hero-title,.booking-hero--dark-text .booking-hero-subtitle{color:var(--color-text-primary);text-shadow:none}

/* ── Incomplete state ──────────────────────────────────────────────────────── */
.booking-hero.is-incomplete .booking-hero-content{filter:blur(6px);user-select:none;pointer-events:none}
.section-incomplete-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10}
.section-incomplete-notice{background:var(--color-bg-white);border:1px solid var(--color-border-secondary);border-radius:var(--radius-lg);padding:16px 24px;text-align:center;box-shadow:0 4px 24px rgba(0,0,0,0.08);max-width:380px}
.section-incomplete-notice p{margin:0;font-size:var(--font-size-xs);color:var(--color-text-secondary);line-height:1.5}
.booking-hero-content{position:relative;z-index:2}

/* ── Booking Widget Card ───────────────────────────────────────────────────── */
.booking-widget-card{background:var(--color-bg-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:24px;max-width:1200px;margin:0 auto}

/* ── Feature Cards ─────────────────────────────────────────────────────────── */
.booking-feature-cards{background:#f2f3f5;padding:36px 0 32px;border-bottom:1px solid var(--color-border-secondary)}
.booking-feature-cards-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.booking-feature-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:0 8px}
.booking-feature-card-icon{width:28px;height:28px;flex-shrink:0;color:var(--color-text-primary)}
.booking-feature-card-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.booking-feature-card-title{font-size:var(--font-size-base);font-weight:var(--font-weight-bold);color:var(--color-text-primary);line-height:1.35;margin:0}
.booking-feature-card-desc{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.65;margin:0}

/* ── Reviews 6 Box: boxed service cards on a white band ────────────────────── */
.booking-feature-cards--6box{background:var(--color-bg-gray);padding:40px 0 44px}
.booking-feature-cards--6box .booking-feature-cards-inner{gap:20px}
@media(min-width:992px){.booking-feature-cards--6box .booking-feature-cards-inner{grid-template-columns:repeat(3,1fr)}}
.booking-feature-cards--6box .booking-feature-card{flex-direction:row;align-items:center;justify-content:space-between;text-align:left;gap:16px;padding:22px 24px;background:var(--color-bg-white);border:1px solid var(--color-border-secondary);border-radius:16px;box-shadow:0 2px 10px rgba(25,32,36,0.05)}
.booking-feature-cards--6box .booking-feature-card-text{flex:1;min-width:0;order:1;display:flex;flex-direction:column;gap:6px}
.booking-feature-cards--6box .booking-feature-card-title{font-size:var(--font-size-lg)}
.booking-feature-cards--6box .booking-feature-card-icon{order:2;width:52px;height:52px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:13px;margin:0;background:var(--color-bg-gray);border-radius:12px;color:var(--color-primary)}
.booking-feature-cards--6box .booking-feature-card-icon svg{width:100%;height:100%}
/* Picked rendered image: larger, no box, sits directly on the card */
.booking-feature-cards--6box .booking-feature-card-icon--img{width:94px;height:94px;padding:0;background:none;border-radius:0}
.booking-feature-cards--6box .booking-feature-card-icon--img img{width:100%;height:100%;object-fit:contain;display:block}

/* ── Reviews 6 Box + 3 pictures: image strip above the cards ───────────────── */
.booking-hero-strip{background:var(--color-bg-gray);padding:32px 0 4px}
.booking-hero-strip-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.booking-hero-strip-item{position:relative;aspect-ratio:3/2;border-radius:16px;overflow:hidden;background:var(--color-bg-white);box-shadow:0 2px 10px rgba(25,32,36,0.05)}
.booking-hero-strip-item img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:991px){.booking-hero-strip-inner{gap:14px}}
/* One image can be hidden on mobile (set in the section editor). Hidden at the
   same point the review badges stack; the remaining two go to 2 columns. */
@media(max-width:767px){
.booking-hero-strip-item--hide-mobile{display:none}
}
@media(max-width:767px) and (min-width:576px){
.booking-hero-strip-inner:has(.booking-hero-strip-item--hide-mobile){grid-template-columns:repeat(2,1fr)}
}
@media(max-width:575px){
.booking-hero-strip{padding:20px 0 4px}
.booking-hero-strip-inner{grid-template-columns:1fr;gap:14px;padding:0 16px}
}

@media(max-width:991px){
.booking-feature-cards-inner{grid-template-columns:repeat(2,1fr);gap:28px 24px}
/* The 3-image layout has exactly 3 cards, so 2-per-row would orphan one.
   Jump straight from 3-up to 1-up instead. */
.booking-feature-cards--3img .booking-feature-cards-inner{grid-template-columns:1fr}
}
@media(max-width:575px){
.booking-feature-cards-inner{grid-template-columns:1fr;gap:0;padding:0 20px}
.booking-feature-cards{padding:8px 0 4px}
.booking-feature-card{flex-direction:row;align-items:flex-start;text-align:left;gap:16px;padding:18px 0;border-bottom:1px solid var(--color-border-light)}
.booking-feature-cards-inner .booking-feature-card:last-child{border-bottom:none}
.booking-feature-card-icon{flex-shrink:0;margin-top:2px}
.booking-feature-card-text{display:flex;flex-direction:column;gap:4px}
.booking-feature-cards--6box{padding:28px 0 32px}
.booking-feature-cards--6box .booking-feature-cards-inner{gap:14px;padding:0 16px}
.booking-feature-cards--6box .booking-feature-card{padding:18px;border-bottom:1px solid var(--color-border-secondary);background:var(--color-bg-white);border-radius:14px;align-items:center}
}

/* ── Booking Form Grid ─────────────────────────────────────────────────────── */
.booking-form-grid{display:grid;grid-template-columns:1.17fr 0.4fr 0.4fr 0.4fr auto;gap:10px;align-items:end}

/* ── Location Fields Group ─────────────────────────────────────────────────── */
.location-fields-group{display:flex;gap:0;position:relative;width:100%;align-items:flex-end;min-width:0}
.location-fields-group .booking-field{flex:1;min-width:0}
.location-fields-group .custom-select-trigger{padding-left:36px}
/* Desktop only in practice: below 992px the stacked-fields block resets both
   paddings to 12px. Every pixel here is text room the placeholder needs before
   it gets cut with an ellipsis, so the pins sit as far out as they can:
   From clears the field edge, To clears the swap button that overlaps its left
   side (28px button centred on the seam = 14px of overlap, + breathing room).
   The right paddings only have to clear that same button (From) and the typing
   spinner at right:12px (To); the dropdown arrow is hidden in this group. */
.location-fields-group .booking-field:first-child .custom-select-trigger{padding-left:11px;padding-right:36px}
.location-fields-group .booking-field:last-child .custom-select-trigger{padding-left:22px;padding-right:28px}
.location-fields-group .custom-select-arrow{display:none}
.location-fields-group .swap-locations-btn{flex-shrink:0;margin:0}

/* From and To read as one joined control on desktop. Both keep a REAL border on
   all four sides; the second field is pulled 1px left so the two inner borders
   land on each other and show as a single shared line.
   Do not go back to dropping the inner border and faking the seam with a bar:
   the border then had to be re-added on focus, so clicking a field animated a
   border from 0 to 1px (visible flicker, and the text shifted with it) while the
   fake bar vanished, and on hover the inner edge could not take the hover colour
   because it was not a border at all. Widths are constant now: only colour moves.
   z-index decides which of the two overlapping borders is drawn on top, so the
   hovered/focused field always owns the shared line. */
@media(min-width:992px){
.location-fields-group .custom-select-trigger{position:relative;z-index:1}
.location-fields-group .custom-select-trigger:hover{z-index:2}
.location-fields-group .custom-select-trigger.active{z-index:3}
.location-fields-group .booking-field:first-child .custom-select-trigger{border-top-right-radius:0;border-bottom-right-radius:0}
.location-fields-group .booking-field:last-child{margin-left:-1px}
.location-fields-group .booking-field:last-child .custom-select-trigger{border-top-left-radius:0;border-bottom-left-radius:0}
/* Smaller pin, desktop only: it buys the placeholder 2px and matches the 15px
   text better. Phone and tablet keep the 16px pin. */
.location-fields-group .custom-select-icon{width:14px;height:14px}
/* The swap button overlaps the right 14px of the From field, so the typing
   spinner's default right:12px puts it half behind the button. Push it clear
   (14px of overlap + 8px of air). It still lands inside the 36px right padding,
   so it never collides with the text either. To needs no override: nothing sits
   over its right edge. Below 992px the button is hidden and 12px is correct. */
.location-fields-group .booking-field:first-child .custom-select-wrapper.is-loading::after{right:22px}
}

@media(max-width:991px){
.location-fields-group{flex-direction:column;gap:12px}
.location-fields-group .booking-field{width:100%;min-width:100%}
.location-fields-group .swap-locations-btn{display:none}
.location-fields-group .booking-field:first-child .custom-select-trigger,.location-fields-group .booking-field:last-child .custom-select-trigger{padding-left:12px;padding-right:12px}
.location-fields-group .custom-select-icon{margin-left:0;margin-right:8px}
}

/* ── Form Field ────────────────────────────────────────────────────────────── */
.booking-field{display:flex;flex-direction:column;gap:6px}
.booking-field-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}
/* Colour-only transitions: animating `all` also animated border-width, which is
   what made a focused field twitch. */
.booking-input{height:var(--button-height);padding:0 12px;font-size:var(--font-size-lg);font-family:var(--font-family);color:var(--color-text-primary);background:var(--color-bg-white);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);transition:border-color 0.2s ease,background-color 0.2s ease;width:100%;cursor:pointer}
.booking-input:hover{border-color:var(--color-border-medium);background:var(--color-bg-gray)}
.booking-input:focus{outline:none;border-color:var(--color-field-focus);background:var(--color-bg-white);box-shadow:none}
.booking-input::placeholder{color:var(--color-field-placeholder)}

/* ── Custom Searchable Select ──────────────────────────────────────────────── */
.custom-select-wrapper{position:relative;width:100%}
.custom-select-trigger{height:var(--button-height);padding:0 32px 0 12px;font-size:var(--font-size-lg);font-family:var(--font-family);color:var(--color-text-primary);background:var(--color-bg-white);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);transition:border-color 0.2s ease,background-color 0.2s ease;width:100%;cursor:pointer;display:flex;align-items:center;gap:8px;user-select:none;overflow:hidden}
.custom-select-trigger:hover{border-color:var(--color-border-medium);background:var(--color-bg-gray)}
.custom-select-trigger.active{border-color:var(--color-field-focus);background:var(--color-bg-white);box-shadow:none;outline:none}
.custom-select-trigger--typed:focus-within{box-shadow:none;outline:none}
.custom-select-trigger.placeholder{color:var(--color-text-muted)}
.custom-select-icon{flex-shrink:0;width:16px;height:16px;color:var(--color-text-primary)}
.location-fields-group .custom-select-trigger .custom-select-icon{display:block !important}
.custom-select-trigger:not(.placeholder) .custom-select-icon{display:none}
.custom-select-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Google-address fields: the trigger IS the text input (typed variant) */
.custom-select-trigger--typed{cursor:text;user-select:auto}
.custom-select-input{flex:1;min-width:0;width:100%;height:100%;padding:0;margin:0;border:none;outline:none;background:transparent;color:var(--color-text-primary);font-size:inherit;font-family:inherit;text-overflow:ellipsis;-webkit-appearance:none;appearance:none}
.custom-select-input::placeholder{color:var(--color-field-placeholder);opacity:1}
/* The typed field carries .placeholder on the TRIGGER until an address is picked,
   but its placeholder look comes from ::placeholder above. So the trigger's muted
   colour must not reach the value being typed: what you type is already the same
   dark as the address you end up selecting, not a lighter "not committed yet" grey.
   -webkit-text-fill-color is set alongside `color` because WebKit lets an
   inherited fill colour win over `color` on form controls. */
.custom-select-trigger--typed.placeholder{color:var(--color-text-primary);-webkit-text-fill-color:var(--color-text-primary)}
.custom-select-trigger--typed.placeholder .custom-select-input,.custom-select-trigger--typed .custom-select-input{color:var(--color-text-primary);-webkit-text-fill-color:var(--color-text-primary)}
.custom-select-trigger--typed .custom-select-input::placeholder{color:var(--color-field-placeholder);-webkit-text-fill-color:var(--color-field-placeholder);opacity:1}
.custom-select-input:focus{outline:none;box-shadow:none}
@media(max-width:768px){.custom-select-input{font-size:16px}}
.custom-select-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--color-text-muted);transition:transform 0.2s ease;pointer-events:none}
.custom-select-trigger.active .custom-select-arrow{transform:translateY(-50%) rotate(180deg)}

/* Dropdown */
.custom-select-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--color-bg-white);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);z-index:1000;display:none;max-height:320px;overflow:hidden;flex-direction:column}
@media(min-width:1200px){.custom-select-dropdown{min-width:400px}}
.custom-select-dropdown.active{display:flex}
.custom-select-search{padding:12px;border-bottom:1px solid var(--color-border-light);flex-shrink:0}
.custom-select-search input{width:100%;height:40px;padding:0 12px;border:1px solid var(--color-border-primary);border-radius:var(--radius-md);font-size:var(--font-size-md);font-family:var(--font-family);color:var(--color-text-primary);transition:all 0.2s ease}
.custom-select-search input:focus{outline:none;border-color:var(--color-field-focus);box-shadow:none}
.custom-select-search input::placeholder{color:var(--color-text-secondary)}
.custom-select-options{overflow-y:auto;flex:1}
/* "powered by Google", pinned under the scrolling results as the dropdown's last
   flex child (flex-shrink:0 keeps it out of the scroll area). Same lockup and
   same rules as the mobile sheet's .bh-sheet-attrib, just sized for a popover.
   Google requires it wherever Places suggestions appear off-map, so the inline
   desktop dropdown needs it exactly as much as the sheet does. */
.custom-select-attrib{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:9px 16px;border-top:1px solid var(--color-bg-gray-light);color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:1}
.custom-select-attrib[hidden]{display:none}
/* The lockup's viewBox is 92 tall but the wordmark only occupies y 0.5-69: the
   rest is empty room reserved for the descender of the two g's. So centering the
   BOX leaves the letters visibly riding high. Nudging down by the difference
   (~11 of 92 units, i.e. ~1.5px at this size) optically centres it against the
   "powered by" text. A transform, not a margin, so the row's height is unchanged. */
.custom-select-attrib svg{height:14px;width:auto;display:block;flex-shrink:0;transform:translateY(1.5px)}
.custom-select-attrib::before{content:attr(data-label)}
.custom-select-option{padding:8px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background-color 0.15s ease;border-bottom:1px solid var(--color-bg-gray-light)}
.custom-select-option:last-child{border-bottom:none}
.custom-select-option:hover,.custom-select-option.is-kbd-active{background:var(--color-bg-hover)}
.custom-select-option:hover .custom-select-option-type,.custom-select-option.selected .custom-select-option-type{color:var(--color-text-primary)}
.custom-select-option.selected{background:var(--color-bg-hover)}
.custom-select-option.hidden{display:none}
.custom-select-option-icon{flex-shrink:0;width:40px;height:40px;color:#596871;background:var(--color-bg-gray-light);border-radius:var(--radius-lg);padding:10px;display:none}
/* Google-suggestion rows carry a type icon (airport/hotel/hospital/star/…); the
   base class hides icons, this reveals them only in the place-autocomplete lane. */
.custom-select-option .custom-select-place-icon{display:block;width:16px;height:16px;padding:0;background:none;border-radius:0;align-self:flex-start;margin-top:5px}
.custom-select-place-icon.is-star{color:#d97706}
.custom-select-option-text{flex:1;font-size:var(--font-size-md);color:var(--color-text-primary);display:flex;flex-direction:column;gap:0}
.custom-select-option-name{font-weight:var(--font-weight-medium);color:var(--color-text-primary)}
.custom-select-option-type{font-size:var(--font-size-sm);color:var(--color-text-secondary)}
.custom-select-no-results{padding:20px;text-align:center;color:var(--color-text-secondary);font-size:var(--font-size-base)}
.custom-select-loading{padding:20px;text-align:center;color:var(--color-text-secondary);font-size:var(--font-size-base)}

/* ── Location Icon Inside Input ────────────────────────────────────────────── */
.booking-field-with-icon{position:relative}
.booking-field-with-icon .booking-input{padding-left:36px}
.booking-input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--color-text-primary);pointer-events:none}

/* ── Swap Button ───────────────────────────────────────────────────────────── */
.swap-locations-btn{width:28px;height:28px;border-radius:50%;background:var(--color-bg-white);border:1px solid var(--color-border-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;flex-shrink:0;z-index:10;align-self:flex-end;margin-bottom:0}
/* bottom:8px keeps the 28px button centred on the 44px field row. */
@media(min-width:992px){.swap-locations-btn{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);box-shadow:var(--shadow-sm)}}
.swap-locations-btn:hover{border-color:var(--color-primary);background:var(--color-bg-white);box-shadow:0 4px 12px rgba(25,32,36,0.15)}
.swap-locations-btn:hover svg{transform:rotate(180deg)}
.swap-locations-btn svg{width:12px;height:12px;color:var(--color-text-primary);transition:transform 0.3s ease}

/* ── Passengers Counter Button ─────────────────────────────────────────────── */
.passengers-counter-btn{height:var(--button-height);padding:0 10px;background:var(--color-bg-white);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all 0.2s ease;min-width:110px;font-size:var(--font-size-base)}
.passengers-counter-btn:hover{border-color:var(--color-border-medium);background:var(--color-bg-gray)}
.passengers-counter-btn.active{border-color:var(--color-text-primary);box-shadow:none}
.passengers-display{display:flex;align-items:center;gap:6px;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}
.passengers-display svg{width:16px;height:16px;color:var(--color-text-primary)}
.chevron-icon{width:16px;height:16px;color:var(--color-text-primary);transition:transform 0.2s ease}
.passengers-counter-btn.active .chevron-icon{transform:rotate(180deg)}

/* ── Passengers Popup ──────────────────────────────────────────────────────── */
.passengers-popup{position:absolute;top:calc(100% + 8px);right:0;background:var(--color-bg-white);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);box-shadow:0 12px 30px rgba(25,32,36,0.16);padding:20px;min-width:300px;z-index:100;display:none}
.passengers-popup.active{display:block}
.passenger-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--color-border-light)}
.passenger-row:last-child{border-bottom:1px solid var(--color-border-light);padding-bottom:12px}
.passenger-info{display:flex;flex-direction:column;gap:2px}
.passenger-type{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}
.passenger-desc{font-size:var(--font-size-sm);color:var(--color-text-muted)}
.passenger-controls{display:flex;align-items:center;gap:12px}
.passenger-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--color-border-primary);background:var(--color-bg-white);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease}
.passenger-btn:hover:not(:disabled){border-color:var(--color-text-primary);background:var(--color-bg-white)}
.passenger-btn:disabled{opacity:0.3;cursor:not-allowed}
.passenger-btn svg{width:14px;height:14px;color:var(--color-text-primary)}
.passenger-count{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);min-width:20px;text-align:center}
.passengers-done-btn{width:100%;height:var(--button-height);margin-top:16px;background:var(--color-bg-white);border:1px solid var(--color-text-primary);border-radius:var(--radius-lg);color:var(--color-text-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all 0.2s ease}
.passengers-done-btn:hover{background:var(--color-bg-gray)}

/* ── Search Button ─────────────────────────────────────────────────────────── */
.booking-search-btn{position:relative;height:var(--button-height);padding:0 28px;background:var(--color-primary-gradient);color:var(--color-bg-white);border:none;border-radius:var(--radius-lg);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all 0.2s ease;white-space:nowrap}
.booking-search-btn:hover{background:var(--color-primary-gradient-hover);box-shadow:0 4px 12px rgba(var(--color-primary-rgb),0.3)}
.booking-search-btn .btn-text{transition:opacity 0.2s ease}
.booking-search-btn.is-loading .btn-text{opacity:0}
.booking-search-btn .btn-spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.2s ease}
.booking-search-btn.is-loading .btn-spinner{opacity:1}
.booking-search-btn .btn-spinner::after{content:'';width:18px;height:18px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:btn-spin 0.6s linear infinite}
@keyframes btn-spin{to{transform:rotate(360deg)}}
.booking-search-btn.is-loading{cursor:not-allowed;pointer-events:none}

/* ── Return Trip ───────────────────────────────────────────────────────────── */
.return-trip-section{display:none;margin-top:16px;padding-top:16px;border-top:1px solid var(--color-border-light)}
.return-trip-section.active{display:block}
.return-trip-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.remove-return-btn{margin-left:8px;font-size:11px;font-weight:var(--font-weight-medium);color:var(--color-theme-accent);cursor:pointer;transition:color 0.2s ease;user-select:none}
.remove-return-btn:hover{color:var(--color-theme-accent)}
.add-return-btn{height:var(--button-height);padding:0 12px;background:var(--color-bg-white);border:1px dashed var(--color-border-medium);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:all 0.2s ease;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-theme-accent)}
.add-return-btn:hover{background:var(--color-bg-gray)}
.add-return-btn svg{width:14px;height:14px;color:var(--color-theme-accent)}
.add-return-btn.hidden{display:none}
.return-date-field{display:none}
.return-date-field.active{display:flex;flex-direction:column;gap:6px}

/* ── Desktop field polish ──────────────────────────────────────────────────────
   Desktop only: the fields sit side by side there, so a point smaller buys back
   the room long addresses need. Tablet and phone keep 16px (below 768px that is
   also what stops iOS zooming the viewport on focus).
   ──────────────────────────────────────────────────────────────────────────── */
@media(min-width:992px){
.booking-input,.custom-select-trigger{font-size:15px}

/* Truncated value tooltip. The full text is stamped on the wrapper as data-tip
   by the JS at hover time (measured then, so it is right whichever code path set
   the value) — the trigger itself is overflow:hidden and would clip a bubble.
   The bubble is ::before and the caret is ::after. ::after is shared with the
   typing spinner, so the caret is gated on :not(.is-loading) and the JS refuses
   to set has-tip on a loading field: the two can never want ::after at once.
   That is also the right behaviour on its own — a tooltip repeating the text you
   are still typing is noise. */
.custom-select-wrapper.has-tip::before{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);z-index:1100;width:max-content;max-width:280px;padding:8px 11px;background:var(--color-text-primary);color:var(--color-bg-white);border-radius:var(--radius-md);font-family:var(--font-family);font-size:12px;font-weight:var(--font-weight-medium);line-height:1.45;text-align:center;white-space:normal;box-shadow:0 6px 18px rgba(25,32,36,0.18);pointer-events:none;animation:bh-tip-in .12s ease-out}
/* 6px tall, sitting 2px above the field: its tip meets the bubble's bottom edge
   at 8px exactly, so the two read as one shape. Same keyframes as the bubble,
   which is why both share the translateX(-50%) transform base. */
.custom-select-wrapper.has-tip:not(.is-loading)::after{content:'';position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);z-index:1101;width:0;height:0;border:6px solid transparent;border-bottom:0;border-top-color:var(--color-text-primary);pointer-events:none;animation:bh-tip-in .12s ease-out}
}
@keyframes bh-tip-in{from{opacity:0;transform:translateX(-50%) translateY(3px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

/* ── Tablet landscape (1200 → 768) ────────────────────────────────────────── */
@media(max-width:1199px){
.booking-form-grid{grid-template-columns:1fr 1fr;gap:12px}
.location-fields-group{grid-column:1/-1}
.booking-search-btn{grid-column:1/-1}
}

@media(max-width:1199px) and (min-width:768px){
.booking-hero .container{padding-left:0 !important;padding-right:0 !important}
.booking-hero{min-height:auto;padding:0;background:var(--color-bg-gray-light);position:relative}
.booking-hero-content{position:relative;z-index:1}
.booking-hero-title{font-size:var(--font-size-5xl);padding:70px 32px 0 32px;margin-bottom:12px;margin-left:0;margin-right:0}
.booking-hero-subtitle{font-size:var(--font-size-xl);padding:0 32px 50px 32px;margin-bottom:0;margin-left:0;margin-right:0}
.booking-widget-card{padding:24px;border-radius:var(--radius-xl) !important;box-shadow:0 3px 16px rgba(25,32,36,0.12);max-width:none;margin:0 24px 36px}
/* Pair Search with Passengers on the last row instead of orphaning it full-width.
   The grid is align-items:end, so the 44px button bottom-aligns with the
   passengers button and the empty label height above it forms the top gap. */
.booking-search-btn{grid-column:auto}
}

/* ── Tablet portrait / large mobile (767 → 576) ───────────────────────────── */
@media(max-width:767px){
.booking-hero .container{padding-left:0 !important;padding-right:0 !important}
.booking-hero{min-height:auto;padding:0;background:var(--color-bg-gray-light);position:relative}
.booking-hero-content{position:relative;z-index:1}
.booking-hero-title{font-size:22px;padding:60px 20px 0 20px;margin-bottom:12px;margin-left:0;margin-right:0}
.booking-hero-subtitle{font-size:var(--font-size-lg);padding:0 20px 40px 20px;margin-bottom:0;margin-left:0;margin-right:0}
.booking-widget-card{padding:24px 15px;border-radius:var(--radius-xl);box-shadow:0 3px 16px rgba(25,32,36,0.12);max-width:none;margin:0 16px 32px}
.booking-form-grid{display:grid !important;grid-template-columns:1fr 1fr;gap:16px}
.location-fields-group,.booking-form-grid>.booking-field:nth-child(4),.booking-search-btn{grid-column:1/-1}
.location-fields-group{display:flex;flex-direction:column;gap:16px}
.location-fields-group .booking-field{width:100%;min-width:100%}
.location-fields-group .swap-locations-btn{display:none}
.location-fields-group .booking-field:first-child .custom-select-trigger,.location-fields-group .booking-field:last-child .custom-select-trigger{padding-left:12px;padding-right:12px}
.location-fields-group .custom-select-icon{margin-left:0;margin-right:8px}
.booking-field-with-icon{position:relative;width:100%}
.booking-input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:1}
.booking-field{width:100%}
.add-return-btn,.passengers-counter-btn{width:100% !important;max-width:100% !important;min-width:0 !important}
#returnLabel{display:none !important}
.booking-field:has(.return-date-field.active) #returnLabel{display:block !important;visibility:visible !important;height:auto;margin-bottom:6px}
.passengers-popup{left:0;right:0;min-width:auto}
.return-trip-grid{grid-template-columns:1fr;gap:16px}
}

@media(min-width:576px) and (max-width:767px){
.booking-form-grid>.booking-field:nth-child(2){display:flex;flex-direction:column;gap:8px}
.booking-form-grid>.booking-field:nth-child(4){display:flex;flex-direction:column;gap:8px}
.booking-field:has(.return-date-field.active){display:flex;flex-direction:column;gap:8px}
.booking-field:has(.return-date-field.active) #returnLabel{margin-bottom:0}
.return-date-field.active{margin-top:0;display:flex;flex-direction:column;gap:0}
}

/* ── Small mobile (< 576) ─────────────────────────────────────────────────── */
@media(max-width:575px){
.booking-hero{min-height:auto;padding:0;background:var(--color-bg-gray-light)}
.booking-hero-title{font-size:22px;padding:40px 20px 0 20px;margin-bottom:8px;margin-left:0;margin-right:0}
.booking-hero-subtitle{font-size:var(--font-size-lg);padding:0 20px 30px 20px;margin-bottom:0;margin-left:0;margin-right:0}
.booking-widget-card{border-radius:0 !important;margin:0 !important;padding:24px 15px;box-shadow:none;border-bottom:1px solid var(--color-border-light);max-width:none}
.booking-form-grid{display:grid !important;grid-template-columns:1fr 1fr;gap:16px}
.location-fields-group,.booking-form-grid>.booking-field:nth-child(4),.booking-search-btn{grid-column:1/-1}
.location-fields-group{gap:16px}
.booking-field{position:relative;padding-top:8px}
.booking-field-label{position:absolute;top:0;left:12px;background:var(--color-bg-white);padding:0 6px;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);z-index:2;line-height:1;border-radius:var(--radius-md)}
.location-fields-group .booking-field-label{position:absolute;top:0;left:12px;background:var(--color-bg-white);padding:0 6px;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);z-index:2;border-radius:var(--radius-md)}
.booking-form-grid>.booking-field:has(#returnLabel){position:relative;padding-top:0}
#returnLabel{display:none !important;position:static}
.booking-field:has(.return-date-field.active){padding-top:8px !important}
.booking-field:has(.return-date-field.active) #returnLabel{display:block !important;position:absolute !important;top:0;left:12px;background:var(--color-bg-white);padding:0 6px;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);z-index:2;line-height:1;visibility:visible !important;height:auto;border-radius:var(--radius-md)}
.booking-field:has(.return-date-field.active) #returnLabel .remove-return-btn{font-size:10px;margin-left:6px}
.booking-field:has(.return-date-field.active) .add-return-btn{display:none}
.return-date-field.active{padding-top:0;margin-top:0}
.return-date-field.active .booking-field-with-icon{margin-top:0}
}

/* =============================================================================
   HERO TRUST STRIP
   Full-width band between the booking hero and the feature cards. Left: the
   operator tagline ("local drivers, not an agency"), editable in the section
   manager and translatable. Right: review badges (Tripadvisor, then Google).
   Its own light band, so one badge style covers all heroes.
   ============================================================================= */
.hero-trust-strip{background:var(--color-bg-gray);border-top:1px solid var(--color-border-secondary);border-bottom:1px solid var(--color-border-secondary)}
.hero-rev-meta{font-size:13px;color:#192024;white-space:nowrap;line-height:1;display:flex;align-items:center}
.hero-trust-inner{max-width:1200px;margin:0 auto;padding:21px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hero-trust-text{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 280px;font-size:14px;font-weight:var(--font-weight-semibold);color:var(--color-text-primary);line-height:1.35}
.hero-trust-icon{width:17px;height:17px;flex-shrink:0;color:#192024}
/* Inline review wordmarks + rating shapes, separated by a divider. No pills. */
.hero-trust-reviews{display:flex;align-items:center;gap:16px;flex-shrink:0}
.hero-rev{display:inline-flex;align-items:center;gap:9px;text-decoration:none;line-height:1}
.hero-rev--google{position:relative;top:2px}
.hero-rev-logo{display:flex;align-items:center}
.hero-rev-logo svg{display:block;width:auto}
.hero-rev-logo--tripadvisor svg{height:16px}
.hero-rev-logo--google svg{height:18px}
.hero-rev-sep{width:1px;height:22px;background:var(--color-border-primary,#d0d5dd);flex-shrink:0}
.hero-rev-dots{display:inline-flex;align-items:center;gap:2px}
.hero-rev-dot{width:16px;height:16px;border-radius:50%;background:#dcdcdc;flex-shrink:0}
.hero-rev-dot.is-full{background:#00852f}
.hero-rev-dot.is-half{background:linear-gradient(90deg,#00852f 50%,#dcdcdc 50%)}
/* Google stars: exact 16px clip-path stars, precise fill to the rating */
.hero-rev-stars{position:relative;display:flex;align-items:center;height:16px}
.hr-stars{display:flex;gap:2px;height:16px}
.hr-stars i{flex:0 0 16px;width:16px;height:16px;background:#dadce0;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.hr-stars--fill{position:absolute;top:0;left:0;overflow:hidden;width:calc(var(--rate,5) / 5 * 100%)}
.hr-stars--fill i{background:#fbbc04}

/* Below the desktop band the review-count meta drops out (space is tight). */
@media(max-width:1199px){
.hero-rev-meta{display:none}
}
@media(max-width:1199px) and (min-width:768px){
.hero-trust-inner{padding:21px 32px}
}
/* Under ~1000px the tagline is hidden; the review badges stay centered. */
@media(max-width:991px){
.hero-trust-text{display:none}
.hero-trust-inner{justify-content:center}
.hero-trust-reviews{flex-wrap:wrap;justify-content:center}
}
/* With the tagline gone and the badges centered on one line, the review count
   has room to return. It hides again once the badges stack (<768px). */
@media(max-width:991px) and (min-width:768px){
.hero-rev-meta{display:flex}
}
/* Under 768px Tripadvisor and Google stack one per line. The inline vertical
   divider is dropped; a border between the rows spans almost the full container
   (24px gutters, matching the image strip below). The strip's own vertical
   padding is removed and each row gets equal top/bottom padding, so each badge
   sits vertically centered against the divider. */
@media(max-width:767px){
.hero-trust-strip{background:var(--color-bg-gray-light);border-top:none;border-bottom:none}
.hero-trust-inner{padding:0 24px}
.hero-trust-reviews{flex-direction:column;align-items:stretch;gap:0;width:100%}
.hero-rev-sep{display:none}
.hero-rev{justify-content:center;padding:16px 0;border-top:none}
/* Flip the order: Google on top, Tripadvisor below. Divider is Tripadvisor's
   top border so the single line sits between the two rows. */
.hero-rev--google{order:0;top:0}
.hero-rev--tripadvisor{order:1;border-top:1px solid var(--color-border-primary)}
.hero-rev-dot{width:14px;height:14px}
}
/* Match the image strip's narrower gutters on small phones. */
@media(max-width:575px){
.hero-trust-inner{padding:0 16px}
}
/* ── Mobile fullscreen location picker (BhSheet) ─────────────────────────────
   Under 768px, tapping From/To hands the field to a fullscreen sheet: input at
   the top, Cancel beside it, results underneath. The sheet does not build its
   own list; it hosts the field's real .custom-select-dropdown node, so the
   rules below strip that node's popover chrome while it lives in here. */
html.bh-sheet-lock,html.bh-sheet-lock body{overflow:hidden;overscroll-behavior:none}
.bh-sheet{position:fixed;inset:0;z-index:9998;background:var(--color-bg-white);display:none;flex-direction:column}
.bh-sheet.is-open{display:flex}
.bh-sheet-bar{flex-shrink:0;padding:6px 16px 14px;padding-top:calc(6px + env(safe-area-inset-top));border-bottom:1px solid var(--color-border-light)}
/* Title row: heading left, close right. The input then owns a full row. */
.bh-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;height:48px}
.bh-sheet-title{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold,600);color:var(--color-text-primary)}
.bh-sheet-close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-right:-8px;padding:0;background:none;border:none;border-radius:50%;color:var(--color-text-primary);cursor:pointer}
.bh-sheet-close svg{width:20px;height:20px}
.bh-sheet-close:active{background:var(--color-bg-gray)}
.bh-sheet-field{display:flex;align-items:center;gap:8px;width:100%;height:48px;padding:0 12px;background:var(--color-bg-white);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);transition:border-color 0.2s ease}
.bh-sheet-field:focus-within{border-color:var(--color-text-primary)}
.bh-sheet-icon{flex-shrink:0;width:16px;height:16px;color:var(--color-text-primary)}
/* 16px keeps iOS from zooming the viewport on focus. */
.bh-sheet-input{flex:1;min-width:0;width:100%;padding:0;margin:0;border:none;outline:none;background:transparent;color:var(--color-text-primary);font-family:var(--font-family);font-size:16px;-webkit-appearance:none;appearance:none}
.bh-sheet-input::placeholder{color:var(--color-field-placeholder);opacity:1}
.bh-sheet-input:focus{outline:none;box-shadow:none}
.bh-sheet-clear{display:none;flex-shrink:0;width:20px;height:20px;padding:0;align-items:center;justify-content:center;background:var(--color-bg-gray);border:none;border-radius:50%;color:var(--color-text-secondary);cursor:pointer}
.bh-sheet-clear svg{width:12px;height:12px}
.bh-sheet.has-text:not(.is-loading) .bh-sheet-clear{display:flex}
/* Spinner: shown from the keystroke until the suggestions land. */
.bh-sheet-spinner{display:none;flex-shrink:0;width:16px;height:16px;border:2px solid var(--color-border-primary);border-top-color:var(--color-text-primary);border-radius:50%;animation:bh-spin .6s linear infinite}
.bh-sheet.is-loading .bh-sheet-spinner{display:block}
@keyframes bh-spin{to{transform:rotate(360deg)}}
/* Same spinner on the inline desktop field, pinned where the arrow sits. */
.custom-select-wrapper.is-loading::after{content:'';position:absolute;right:12px;top:50%;margin-top:-6px;width:13px;height:13px;border:2px solid var(--color-border-primary);border-top-color:var(--color-text-primary);border-radius:50%;animation:bh-spin .6s linear infinite;pointer-events:none}
.bh-sheet-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.bh-sheet-hint{padding:28px 20px;text-align:center;color:var(--color-text-secondary);font-size:var(--font-size-base)}
.bh-sheet-hint[hidden]{display:none}
/* "Use my current location" — pinned at the top of the sheet body for the
   pickup field only. Reverse-geocodes the browser geolocation into the same
   place_id path a typed suggestion uses. */
.bh-sheet-geo{display:flex;align-items:center;gap:12px;width:100%;padding:16px 20px;border:none;border-bottom:1px solid var(--color-bg-gray-light);background:var(--color-bg-white);color:var(--color-primary);font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none}
.bh-sheet-geo[hidden]{display:none}
.bh-sheet-geo:active{background:var(--color-bg-gray-light)}
.bh-sheet-geo svg{flex-shrink:0;width:20px;height:20px}
.bh-sheet-geo-label{flex:1;min-width:0}
.bh-sheet-geo-spinner{display:none;flex-shrink:0;width:16px;height:16px;border:2px solid var(--color-border-primary);border-top-color:var(--color-primary);border-radius:50%;animation:bh-spin .6s linear infinite}
.bh-sheet-geo.is-busy{pointer-events:none}
.bh-sheet-geo.is-busy .bh-sheet-geo-icon{display:none}
.bh-sheet-geo.is-busy .bh-sheet-geo-spinner{display:block}
/* The hosted dropdown becomes plain flow content inside the sheet. */
.bh-sheet .custom-select-dropdown{position:static;display:flex;min-width:0;max-height:none;border:none;border-radius:0;box-shadow:none;overflow:visible}
.bh-sheet .custom-select-search{display:none}
.bh-sheet .custom-select-options{max-height:none;overflow:visible}
.bh-sheet .custom-select-option{padding:14px 20px}
.bh-sheet .custom-select-no-results,.bh-sheet .custom-select-loading{padding:28px 20px}
/* Google Places attribution, required wherever suggestions are shown off-map. */
.bh-sheet-attrib{display:flex;align-items:center;gap:8px;padding:16px 20px;border-top:1px solid var(--color-bg-gray-light);color:var(--color-text-secondary);font-size:var(--font-size-sm)}
.bh-sheet-attrib[hidden]{display:none}
.bh-sheet-attrib svg{height:14px;width:auto;display:block;flex-shrink:0}
.bh-sheet-attrib::before{content:attr(data-label)}