/**
 * BakiTour Premium Design System
 * Forest + Cream + Orange palette · Fraunces + Inter Tight typography
 *
 * Inspired by editorial luxury patterns (premium, Aman, Soho House) but
 * intentionally distinct — forest green is unclaimed in NYC ground transport.
 *
 * Naming: .bk-* (BakiTour) prefix to avoid collision with legacy theme.
 * Load AFTER Tailwind so utility classes can override.
 */

/* ==========================================================================
   1. Design Tokens
   ========================================================================== */

:root {
  /* ---- Color: Forest (primary dark) ---- */
  --bk-forest:        #1a3a32;
  --bk-forest-hover:  #0f2620;
  --bk-forest-soft:   #2a5347;   /* borders, subtle accents on dark */
  --bk-forest-tint:   #e6ede9;   /* light tinted band */

  /* ---- Color: Cream (primary background) ---- */
  --bk-cream:         #fbf8f2;
  --bk-cream-warm:    #f5efe2;   /* alt section band */
  --bk-cream-deep:    #ede4d0;   /* hover/active subtle */

  /* ---- Color: Sand (warm accent — used VERY sparingly: eyebrows + small emphasis).
          Forest + a single brass/sand accent is the classic luxury pairing. ---- */
  --bk-sand:          #b0894e;   /* legible brass on cream (small uppercase labels) */
  --bk-sand-light:    #e3c187;   /* lighter sand for accents on dark surfaces */
  --bk-sand-soft:     rgba(176,137,78,0.12);  /* faint tint for backgrounds */

  /* ---- Color: Orange (accent — sparingly) ---- */
  --bk-orange:        #f97316;
  --bk-orange-hover:  #ea580c;
  --bk-orange-dark:   #c2410c;
  --bk-orange-light:  #fdba74;   /* hover states, borders */
  --bk-orange-soft:   #fff1e6;   /* badge backgrounds */
  --bk-gold:          #c2a35f;   /* signature hairline/accent gold (matches home-card hover) */

  /* ---- Color: Ink (text) ---- */
  --bk-ink:           #0f1319;
  --bk-ink-secondary: #3a3f4a;
  --bk-ink-muted:     #6b7280;
  --bk-ink-faint:     #9ca3af;

  /* ---- Color: Neutrals ---- */
  --bk-white:         #ffffff;
  --bk-border:        #e8e1d0;        /* cream-toned border */
  --bk-border-strong: #d4cab2;
  --bk-border-dark:   rgba(255,255,255,0.12);

  /* ---- Typography ---- */
  --bk-font-display:  'Fraunces', 'DM Serif Display', Georgia, serif;
  --bk-font-body:     'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Font sizes — modular scale (1.25 ratio anchored at 16px) */
  --bk-text-xs:       0.75rem;     /* 12px */
  --bk-text-sm:       0.875rem;    /* 14px */
  --bk-text-base:     1rem;        /* 16px */
  --bk-text-lg:       1.125rem;    /* 18px */
  --bk-text-xl:       1.25rem;     /* 20px */
  --bk-text-2xl:      1.5rem;      /* 24px */
  --bk-text-3xl:      1.875rem;    /* 30px */
  --bk-text-4xl:      2.5rem;      /* 40px */
  --bk-text-5xl:      3.5rem;      /* 56px */
  --bk-text-6xl:      4.5rem;      /* 72px */
  --bk-text-7xl:      6rem;        /* 96px */

  /* ---- Spacing (4px scale) ---- */
  --bk-space-1:   0.25rem;
  --bk-space-2:   0.5rem;
  --bk-space-3:   0.75rem;
  --bk-space-4:   1rem;
  --bk-space-5:   1.25rem;
  --bk-space-6:   1.5rem;
  --bk-space-8:   2rem;
  --bk-space-10:  2.5rem;
  --bk-space-12:  3rem;
  --bk-space-16:  4rem;
  --bk-space-20:  5rem;
  --bk-space-24:  6rem;
  --bk-space-32:  8rem;

  /* ---- Radius ---- */
  --bk-radius-sm:    6px;
  --bk-radius-md:    10px;
  --bk-radius-lg:    16px;
  --bk-radius-xl:    24px;
  --bk-radius-2xl:   32px;
  --bk-radius-pill:  9999px;

  /* ---- Shadows (warm-tinted) ---- */
  --bk-shadow-sm:   0 1px 2px rgba(26,58,50,0.06);
  --bk-shadow-md:   0 4px 12px rgba(26,58,50,0.08);
  --bk-shadow-lg:   0 12px 32px rgba(26,58,50,0.12);
  --bk-shadow-xl:   0 24px 48px rgba(26,58,50,0.16);
  --bk-shadow-glass: 0 8px 32px rgba(15,19,25,0.32), inset 0 1px 0 rgba(255,255,255,0.12);

  /* ---- Transitions — premium-style ease-in-out for the "smooth crisp" feel ---- */
  /* Snappy transitions - ease-out feels more responsive than ease-in-out */
  --bk-tx-fast:   120ms ease-out;
  --bk-tx-base:   180ms ease-out;
  --bk-tx-slow:   250ms ease-out;
  --bk-tx-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* For larger movements */
  --bk-ease-premium: cubic-bezier(0.2, 0.8, 0.2, 1);  /* gentle settle — the profile-page feel */

  /* ---- Layout ---- */
  --bk-container:    1600px;                   /* Even wider for spacious premium-style layout */
  --bk-container-sm: 960px;
  --bk-header-h:     76px;

  /* ---- Z ---- */
  --bk-z-sticky:  40;
  --bk-z-modal:   60;
  --bk-z-popover: 70;
}


/* ==========================================================================
   2. Base — only applied via .bk-body to avoid colliding with legacy
   ========================================================================== */

/* Page settle-in: a gentle whole-page fade as each page arrives, so navigation
   feels like it eases in rather than snapping on. Opacity only (no transform) so
   the fixed header never jumps; per-element rises stay with the [data-reveal]
   system. Disabled for reduced-motion. Works in every browser. */
/* Fades start at 0.01, not 0: content first painted under an opacity-0 ancestor
   is never reported as an LCP candidate (site had NO_LCP in lab + field). */
@keyframes bk-page-enter {
  from { opacity: 0.01; }
  to   { opacity: 1; }
}
.bk-body,
.bk-auth-body {
  animation: bk-page-enter 0.5s var(--bk-ease-premium, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
}
@media (prefers-reduced-motion: reduce) {
  .bk-body,
  .bk-auth-body { animation: none; }
}

.bk-body {
  margin: 0;
  min-height: 100vh;                       /* sticky footer: pin footer to viewport */
  display: flex;
  flex-direction: column;
  font-family: var(--bk-font-body);
  font-size: var(--bk-text-base);
  font-weight: 400;
  line-height: 1.55;
  color: var(--bk-ink);
  background: var(--bk-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;                 /* anchor jumps glide, don't snap */
}

/* Main grows to fill the gap so the footer never floats mid-page on short content. */
.bk-body > main { flex: 1 0 auto; }

/* Smooth, crisp focus ring — applied across all interactive elements
   in .bk-body. Only visible on keyboard nav (focus-visible). */
.bk-body :focus-visible {
  outline: 2px solid var(--bk-forest);
  outline-offset: 2px;
  /* No border-radius override here — it was forcing every focused element (pill
     buttons, rounded cards) to 4px, making them look square on click. Each element
     keeps its own radius and the outline follows that shape. */
  transition: outline-offset var(--bk-tx-fast);
}

/* Inputs in the booking widget get a subtle accent on focus */
.bk-booking__input:focus { outline: none; }
.bk-booking__field:focus-within {
  background: rgba(255,255,255,0.08);     /* slightly stronger than hover for clarity */
}

.bk-body *, .bk-body *::before, .bk-body *::after {
  box-sizing: border-box;
}

/* Anchor reset — wrapped in :where() so component buttons (.bk-btn--primary etc.)
   can set their own color with single-class specificity and win. */
:where(.bk-body a) {
  color: inherit;
  text-decoration: none;
}

/* Button reset — wrapped in :where() so it has 0 specificity.
   Component classes (.bk-btn--primary, .bk-booking__tab--active, etc.)
   can set their own backgrounds with single-class specificity and win. */
:where(.bk-body button) {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
}

.bk-body img,
.bk-body svg {
  display: block;
  max-width: 100%;
}

/* Heading + paragraph resets are wrapped in :where() so they carry ZERO specificity.
   That keeps them as global defaults while letting any component class (e.g.
   .bk-faq__title, .bk-feature__text) override margins/type with a single class —
   no more fighting the reset with descendant selectors. */
:where(.bk-body h1, .bk-body h2, .bk-body h3, .bk-body h4, .bk-body h5, .bk-body h6) {
  margin: 0;
  font-family: var(--bk-font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: inherit; /* inherit from parent so hero/cta/forest sections get cream automatically */
}

:where(.bk-body p) { margin: 0; }


/* ==========================================================================
   3. Typography utilities
   ========================================================================== */

.bk-display-1 { font-size: var(--bk-text-7xl); line-height: 0.95; letter-spacing: -0.03em; }
.bk-display-2 { font-size: var(--bk-text-6xl); line-height: 1; letter-spacing: -0.025em; }
.bk-h1        { font-size: var(--bk-text-5xl); }
.bk-h2        { font-size: var(--bk-text-4xl); }
.bk-h3        { font-size: var(--bk-text-3xl); }
.bk-h4        { font-size: var(--bk-text-2xl); }
.bk-h5        { font-size: var(--bk-text-xl); }
.bk-h6        { font-size: var(--bk-text-lg); }

.bk-eyebrow {
  display: inline-block;
  font-family: var(--bk-font-body);
  font-size: var(--bk-text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bk-sand);
  margin-bottom: var(--bk-space-4);
}

.bk-eyebrow--muted { color: var(--bk-ink-muted); }
.bk-eyebrow--light { color: var(--bk-sand-light); }

.bk-lede {
  font-family: var(--bk-font-body);
  font-size: var(--bk-text-lg);
  line-height: 1.6;
  color: var(--bk-ink-secondary);
  max-width: 56ch;
}

.bk-text-muted     { color: var(--bk-ink-muted); }
.bk-text-secondary { color: var(--bk-ink-secondary); }
.bk-text-cream     { color: var(--bk-cream); }
.bk-text-white     { color: var(--bk-white); }

@media (max-width: 768px) {
  .bk-display-1 { font-size: 3rem; }
  .bk-display-2 { font-size: 2.5rem; }
  .bk-h1 { font-size: 2.25rem; }
  .bk-h2 { font-size: 1.875rem; }
  .bk-h3 { font-size: 1.5rem; }
}


/* ==========================================================================
   4. Layout primitives
   ========================================================================== */

.bk-container {
  width: 100%;
  max-width: var(--bk-container);
  margin: 0 auto;
  padding-left: var(--bk-space-6);
  padding-right: var(--bk-space-6);
}

.bk-container--sm { max-width: var(--bk-container-sm); }

.bk-section     { padding-top: var(--bk-space-24); padding-bottom: var(--bk-space-24); }
.bk-section--sm { padding-top: var(--bk-space-16); padding-bottom: var(--bk-space-16); }
.bk-section--lg { padding-top: var(--bk-space-32); padding-bottom: var(--bk-space-32); }

.bk-bg-cream      { background: var(--bk-cream); }
.bk-bg-cream-warm { background: var(--bk-cream-warm); }
.bk-bg-forest     { background: var(--bk-forest); color: var(--bk-cream); }
.bk-bg-forest-tint{ background: var(--bk-forest-tint); }
.bk-bg-white      { background: var(--bk-white); }

@media (max-width: 768px) {
  .bk-container     { padding-left: var(--bk-space-4); padding-right: var(--bk-space-4); }
  .bk-section       { padding-top: var(--bk-space-16); padding-bottom: var(--bk-space-16); }
  .bk-section--lg   { padding-top: var(--bk-space-20); padding-bottom: var(--bk-space-20); }
}


/* ==========================================================================
   5. Header
   ========================================================================== */

.bk-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--bk-header-h);
  z-index: var(--bk-z-sticky);
  display: flex;
  align-items: center;
  transition: background-color var(--bk-tx-base), box-shadow var(--bk-tx-base), border-color var(--bk-tx-base);
  border-bottom: 1px solid transparent;
}

.bk-header__inner {
  width: 100%;
  margin: 0;
  padding: 0 var(--bk-space-8);     /* 32px edge padding — premium-style flush */
  display: flex;
  align-items: center;
  gap: var(--bk-space-8);
}

@media (min-width: 1280px) {
  .bk-header__inner { padding: 0 var(--bk-space-10); }   /* 40px on wide screens */
}

/* Push nav+actions cluster to the right, mirroring premium */
.bk-header__nav { margin-left: auto; }

.bk-header__logo {
  font-family: var(--bk-font-display);
  font-size: 2.125rem;          /* 34px — bumped for confident wordmark presence */
  line-height: 1;
  letter-spacing: 0.06em;
  color: inherit;
  display: inline-flex;
  align-items: baseline;
  gap: 0.2em;
  transition: opacity var(--bk-tx-fast);
}

.bk-header__logo:hover { opacity: 0.85; }

.bk-header__logo strong {
  font-weight: 500;
}
.bk-header__logo em {
  font-style: normal;
  color: inherit;
  font-weight: 500;
}

@media (max-width: 600px) {
  .bk-header__logo { font-size: 1.625rem; }   /* 26px on phones */
}

.bk-header__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bk-space-12);          /* ~48px — premium spread */
}

.bk-header__nav-link {
  font-size: 16px;
  font-weight: 500;                 /* matches premium (500, not 600) */
  letter-spacing: 0;
  padding: 4px 18px;                /* shorter + slightly wider — matches premium's slimmer nav pill */
  border-radius: 999px;             /* full pill */
  position: relative;
  transition:
    background-color var(--bk-tx-fast),
    color var(--bk-tx-fast);
}

/* Hover: soft rounded pill, like premium */
.bk-header__nav-link:hover {
  background-color: rgba(255,255,255,0.12);
}

/* Active / pressed: orange brand pill — same full pill as hover */
.bk-header__nav-link:active,
.bk-header__nav-link.is-active,
.bk-header__nav-link[aria-current="page"] {
  background-color: var(--bk-forest);
  color: var(--bk-white) !important;
  border-radius: 999px;
}

.bk-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bk-space-8);           /* wider — matches nav rhythm */
}

.bk-header__actions .bk-header__nav-link {
  font-size: 16px;
  font-weight: 500;
}

/* Header — transparent variant (over hero) */
.bk-header--transparent {
  background: transparent;
  color: var(--bk-cream);
}

.bk-header--transparent .bk-header__nav-link { color: var(--bk-white); }
.bk-header--transparent .bk-header__nav-link:hover {
  background-color: rgba(255,255,255,0.12);    /* soft white pill on dark hero */
  color: var(--bk-white);
}

/* Header — solid variant (after scroll) */
.bk-header--solid {
  background: var(--bk-cream);
  color: var(--bk-ink);
  border-bottom-color: var(--bk-border);
  box-shadow: var(--bk-shadow-sm);
}

.bk-header--solid .bk-header__nav-link { color: var(--bk-ink); }
.bk-header--solid .bk-header__nav-link:hover {
  background-color: rgba(26,58,50,0.08);       /* soft forest pill on cream */
  color: var(--bk-forest);
}

/* ---- Premium center-nav links: a refined underline accent that glides in,
   replacing the faint pill for the main menu (Services / Fleet / About /
   Contact). Graceful, deliberate easing — not snappy. ---- */
.bk-header__nav .bk-header__nav-link {
  border-radius: 0;
  padding: 8px 4px;
  transition: color var(--bk-tx-smooth);
}
.bk-header__nav .bk-header__nav-link::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 1.5px;
  background: var(--bk-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--bk-tx-smooth);
  pointer-events: none;
}
.bk-header__nav .bk-header__nav-link:hover,
.bk-header__nav .bk-header__nav-link[aria-current="page"] {
  background-color: transparent;
}
.bk-header__nav .bk-header__nav-link:hover::after,
.bk-header__nav .bk-header__nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}
.bk-header--solid .bk-header__nav .bk-header__nav-link:hover,
.bk-header--solid .bk-header__nav .bk-header__nav-link[aria-current="page"] {
  background-color: transparent;
  color: var(--bk-forest) !important;
}
.bk-header--transparent .bk-header__nav .bk-header__nav-link:hover,
.bk-header--transparent .bk-header__nav .bk-header__nav-link[aria-current="page"] {
  background-color: transparent;
  color: var(--bk-white) !important;
}

/* ---- Header action links (account name, phone, Sign In): drop the rounded
   pill so they match the menu's restraint — a quiet color shift instead of a
   border, on the same graceful easing. ---- */
.bk-header__actions .bk-header__nav-link { transition: color var(--bk-tx-smooth); }
.bk-header__actions .bk-header__nav-link:hover,
.bk-header--solid .bk-header__actions .bk-header__nav-link:hover,
.bk-header--transparent .bk-header__actions .bk-header__nav-link:hover {
  background-color: transparent;
}
.bk-header--solid .bk-header__actions .bk-header__nav-link:hover { color: var(--bk-forest); }
.bk-header--transparent .bk-header__actions .bk-header__nav-link:hover { color: var(--bk-white); }
.bk-header__account-btn svg { transition: opacity var(--bk-tx-smooth); }
.bk-header__account-btn:hover svg { opacity: 1; }

/* Mobile */
.bk-header__menu-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--bk-radius-pill);
  color: inherit;
}

@media (max-width: 900px) {
  .bk-header__nav { display: none; }
  /* The inner is a flex row; with the nav (which carried margin-left:auto) hidden, nothing
     pushed the actions to the edge, so the menu button sat one gap after the logo. space-between
     puts the logo left and the menu button hard right. (grid-template-columns did nothing here.) */
  .bk-header__inner { justify-content: space-between; }
  .bk-header__menu-toggle { display: inline-flex; }
  /* "Book now" CTA: slightly smaller + nudged right toward the menu button (mobile only). */
  .bk-header__actions .bk-btn--primary { padding: 5px 16px; height: 34px; font-size: 13px; margin-right: -4px; }
}

/* Phone — phone number text hides (still in mobile menu), Book Now stays */
@media (max-width: 600px) {
  .bk-header__inner { padding: 0 var(--bk-space-4); }
  .bk-header__actions > .bk-header__nav-link { display: none; }
  .bk-btn--sm { padding: 6px 14px; height: 38px; font-size: 14px; }   /* mobile: slightly tighter than desktop sm but still readable */
}


/* ==========================================================================
   6. Buttons
   ========================================================================== */

.bk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bk-space-2);
  padding: 8px 20px;                        /* premium-style padding */
  height: 44px;
  font-family: var(--bk-font-body);
  font-size: 16px;                          /* matches premium Sign in */
  font-weight: 500;                         /* lighter — matches premium */
  letter-spacing: 0;
  text-decoration: none;
  border-radius: var(--bk-radius-pill);
  transition: background var(--bk-tx-fast), color var(--bk-tx-fast),
              transform var(--bk-tx-fast), box-shadow var(--bk-tx-fast);
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
}

.bk-btn--lg { height: 48px; padding: 8px 24px; font-size: 16px; }   /* slimmer — same family as widget submit */
.bk-btn--sm { height: 40px; padding: 8px 16px; font-size: 16px; }   /* premium Sign in spec — was tiny 36px/12px */
.bk-btn--full { width: 100%; }

/* Primary: forest green (was orange — switched to match the home-page button) */
.bk-btn--primary {
  background: var(--bk-forest);
  color: var(--bk-cream);
}
.bk-btn--primary:hover {
  background: var(--bk-forest-hover);          /* clean color shift, no jump — premium-style */
}
.bk-btn--primary:active {
  background: var(--bk-forest-hover);
  filter: brightness(0.95);                    /* subtle press feedback without layout shift */
}

/* Secondary: forest */
.bk-btn--forest {
  background: var(--bk-forest);
  color: var(--bk-cream);
}
.bk-btn--forest:hover {
  background: var(--bk-forest-hover);
}

/* Ghost: outlined dark */
.bk-btn--ghost {
  color: var(--bk-ink);
  border-color: var(--bk-border-strong);
  background: transparent;
}
.bk-btn--ghost:hover {
  background: var(--bk-ink);
  color: var(--bk-cream);
  border-color: var(--bk-ink);
}

/* Ghost light: for use on dark/photo backgrounds */
.bk-btn--ghost-light {
  color: var(--bk-cream);
  border-color: rgba(255,255,255,0.45);
  background: transparent;
}
.bk-btn--ghost-light:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--bk-cream);
}

/* Glass: signature treatment for hero CTAs */
.bk-btn--glass {
  background:
    radial-gradient(circle at 80% 200%, rgba(255,255,255,0.18), rgba(255,255,255,0) 80%),
    linear-gradient(rgba(15,19,25,0.32), rgba(15,19,25,0.32));
  color: var(--bk-white);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: var(--bk-shadow-glass);
}
.bk-btn--glass:hover {
  background:
    radial-gradient(circle at 80% 200%, rgba(255,255,255,0.25), rgba(255,255,255,0) 80%),
    linear-gradient(rgba(15,19,25,0.42), rgba(15,19,25,0.42));
}


/* ==========================================================================
   7. Hero
   ========================================================================== */

.bk-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* No justify-content: flex-end - use margin-top:auto on content instead
     so the widget can expand downward when showing results */
  overflow: visible;
  /* AFTER the shorthand (which would reset it): the 18vw-biased hero content
     block extends past the right edge and adds horizontal document scroll.
     Clip x only — y stays visible so the widget can expand downward. */
  overflow-x: clip;
  isolation: isolate;
  color: var(--bk-cream);
}

.bk-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.bk-hero__media img,
.bk-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bk-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Spotlight: darker oval centered on the text area for legibility */
    radial-gradient(ellipse 80% 50% at 50% 75%, rgba(15,19,25,0.55), transparent 70%),
    /* Top-to-bottom dark wash */
    linear-gradient(
      180deg,
      rgba(15,19,25,0.55) 0%,
      rgba(15,19,25,0.25) 30%,
      rgba(15,19,25,0.50) 70%,
      rgba(15,19,25,0.92) 100%
    );
}

.bk-hero__content {
  position: relative;
  /* Account for the 18vw left offset: width 100% + margin-left 18vw overflowed the
     viewport by 18vw on every screen below ~1900px, and .bk-hero clips overflow —
     so the booking widget's submit button was cut off or completely hidden. */
  width: calc(100% - 18vw);
  max-width: var(--bk-container);
  margin: auto auto 3.5vh 18vw; /* Left offset, biased toward center; auto top still allows downward expansion. Bottom was 8vh — lowered 2026-07-06 (user-tuned live) */
  padding: var(--bk-space-12) var(--bk-space-6);
  text-align: center;
}

.bk-body .bk-hero__title,
.bk-hero__title {
  font-size: clamp(2.75rem, 6.5vw, 5rem);   /* slightly bigger ceiling — premium vibe */
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--bk-cream);
  margin: 0 auto var(--bk-space-8);          /* breathing room before tabs */
  max-width: 18ch;
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}

.bk-hero__subtitle {
  font-family: var(--bk-font-body);
  font-size: var(--bk-text-lg);
  color: rgba(255,255,255,0.92);
  margin: 0 auto var(--bk-space-10);
  max-width: 560px;
  text-wrap: pretty;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

@media (max-width: 768px) {
  .bk-hero__subtitle { font-size: 1rem; }
  /* Drop the desktop 18vw left offset on mobile — it pushed the hero content (and the
     booking widget) off the right edge. Full width with normal padding instead. */
  .bk-hero__content  { width: 100%; padding: var(--bk-space-8) var(--bk-space-4); margin-left: 0; margin-right: 0; }
}

/* Phone — keep just the headline like premium: drop the eyebrow + subtitle.
   Hero is content-driven (image fills, headline + booking widget — that's it).
   Compress min-height so the widget sits closer to the header instead of being
   pushed to the bottom of a viewport-tall image area. */
@media (max-width: 540px) {
  .bk-hero {
    min-height: 78vh; /* was 100vh — closer to premium's compact mobile spacing */
  }
  .bk-hero .bk-eyebrow,
  .bk-hero__subtitle {
    display: none;
  }
  .bk-hero__title {
    font-size: 2rem;
    line-height: 1.05;
    margin-bottom: var(--bk-space-5);
  }
  .bk-hero__content {
    padding: calc(var(--bk-header-h) + var(--bk-space-4)) var(--bk-space-4) var(--bk-space-6);
  }
}


/* ==========================================================================
   8. Booking widget — glass treatment
   ========================================================================== */

.bk-booking {
  width: 100%;
  max-width: 1300px;        /* widened a touch from premium's 1180px */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;                   /* spacing handled per-child so the collapsed results
                              panel leaves no gap below the form */
}

/* Expanded state — subtle emphasis when widget is active */
.bk-booking--expanded .bk-booking__form {
  box-shadow:
    0 8px 32px rgba(0,0,0,0.3),
    inset 4px 4px 12px rgba(0,0,0,0.10);
}

/* Tab pill above widget */
.bk-booking__tabs {
  margin-bottom: 24px;      /* tab-to-form spacing (was the flex gap) */
  display: inline-flex;
  padding: 3px;
  background: rgba(15,19,25,0.55);          /* slightly more solid pill backdrop, like premium */
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-radius: var(--bk-radius-pill);
  border: 1px solid rgba(255,255,255,0.14);
}

.bk-booking__tab {
  padding: 9px 24px;                        /* enlarged to match the bigger form */
  font-size: 16px;
  font-weight: 500;                         /* matches button weight */
  color: rgba(255,255,255,0.85);
  border-radius: var(--bk-radius-pill);
  transition: background var(--bk-tx-fast), color var(--bk-tx-fast);
  background: transparent;
  min-width: 124px;                         /* tabs feel substantial like premium's 121px */
  text-align: center;
}

.bk-booking__tab--active {
  background: var(--bk-forest);
  color: var(--bk-white);
  box-shadow: 0 4px 12px rgba(26,58,50,0.35);
}

.bk-booking__tab:not(.bk-booking__tab--active):hover { color: var(--bk-white); }

/* The glass form bar */
.bk-booking__form {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1fr 1fr auto;
  align-items: start;                    /* keep items at top when row height changes */
  gap: 1px;
  padding: 10px;
  background:
    radial-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0) 90%),
    radial-gradient(circle at 80% 200%, rgba(255,255,255,0.22), rgba(255,255,255,0) 80%),
    linear-gradient(rgba(15,19,25,0.45), rgba(15,19,25,0.45));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 0;                                 /* premium uses no border — uses shadows instead */
  border-radius: 8px;
  box-shadow:
    0 2px 8px rgba(6,10,13,0.18),            /* outer drop — softens against backdrop */
    inset 4px 4px 12px rgba(0,0,0,0.10);     /* inner dark — gives depth */
  transition: box-shadow 0.16s ease, padding-bottom 0.16s ease;
}

/* Gradient border effect (premium pattern) */
.bk-booking__form::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid transparent;
  background: linear-gradient(-18deg, rgba(255,255,255,0.8) 20%, rgba(255,255,255,0.4) 30%, rgba(255,255,255,0.05) 40% 60%, rgba(255,255,255,0.4) 70%, rgba(255,255,255,0.8) 90%) border-box;
  -webkit-mask: radial-gradient(black) border-box, linear-gradient(black) padding-box;
  mask: radial-gradient(black) border-box, linear-gradient(black) padding-box;
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  z-index: 1;
}

@supports not (mask-composite: subtract) {
  .bk-booking__form::before {
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
  }
}

.bk-booking__field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 20px;                        /* enlarged — roomier fields */
  border-radius: var(--bk-radius-md);
  border: 1px solid transparent;             /* premium pattern - border on hover */
  transition: background var(--bk-tx-fast), border-color var(--bk-tx-fast);
}

.bk-booking__field:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,0.10);
}

.bk-booking__field:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.15);      /* subtle border on hover */
}

.bk-booking__field:focus-within {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.25);      /* neutral focus — was orange */
}

.bk-booking__label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;        /* premium uses sentence-case "Pickup location" */
  color: rgba(255,255,255,0.85);
  margin-bottom: 2px;
}

.bk-booking__input {
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--bk-white);
  font-family: var(--bk-font-body);
  font-size: var(--bk-text-lg);
  font-weight: 500;
  width: 100%;
  padding: 0;
}

/* Focus on booking inputs — let the parent .bk-booking__field's background tint
   on :focus-within do the work. The 4px offset orange outline was reading as a
   chunky broken box on the dark glass. */
.bk-booking__input:focus,
.bk-booking__input:focus-visible {
  outline: none !important;
}

.bk-booking__input::placeholder { color: rgba(255,255,255,0.5); }

/* Date/time inputs - full clickable area and consistent styling */
.bk-booking__input[type="date"],
.bk-booking__input[type="time"] {
  color-scheme: dark;
  cursor: pointer;
  position: relative;
}

/* Make entire date/time input clickable, not just the icon */
.bk-booking__input[type="date"]::-webkit-calendar-picker-indicator,
.bk-booking__input[type="time"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  background: transparent;
}

/* Same for trip-edit inputs */
.bk-trip-edit__input[type="date"],
.bk-trip-edit__input[type="time"] {
  color-scheme: dark;
  cursor: pointer;
  position: relative;
}

.bk-trip-edit__input[type="date"]::-webkit-calendar-picker-indicator,
.bk-trip-edit__input[type="time"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  background: transparent;
}

/* Custom dropdown - matches Google Places autocomplete design exactly */
/* Hours dropdown — solid dark background for readability */
/* ===== Popular routes — editorial ledger rows =====
   Unpriced hairline rows (2026-07-03 redesign): small-caps origin on the
   eyebrow spec, Fraunces destination at the DEFAULT optical size (no
   'opsz' 144 — that axis is reserved for large display headings; at row
   size it renders spindly), thin arrow. Hover reuses the site's signature
   motif: gold hairline grows to the destination's text width + arrow nudge. */
.bk-routes { display: block; max-width: 900px; margin: 0 auto; border-top: 1px solid var(--bk-border); }

.bk-route {
    display: flex; align-items: center; justify-content: space-between; gap: var(--bk-space-6, 24px);
    padding: var(--bk-space-6, 24px) var(--bk-space-1, 4px);
    border-bottom: 1px solid var(--bk-border);
    text-decoration: none;
}

.bk-route__text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bk-route__from { font-size: var(--bk-text-xs, 12px); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bk-ink-muted); }
.bk-route__to {
    display: inline-block; position: relative; align-self: flex-start;
    font-family: var(--bk-font-display); font-weight: 400;
    font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.2; color: var(--bk-forest);
}
.bk-route__to::after {
    content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1.5px;
    /* #c2a35f = the signature hairline gold from the home feature cards
       (bakitour-home.css). NOT var(--bk-accent): that token only exists inside
       the .bk-feature scope (and is sage, not gold) — unscoped it resolves to
       transparent and the underline animates invisibly. */
    background: #c2a35f;
    transform: scaleX(0); transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bk-route:hover .bk-route__to::after { transform: scaleX(1); }

.bk-route__arrow { font-size: 22px; color: var(--bk-forest); transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.bk-route:hover .bk-route__arrow { transform: translateX(6px); }

/* Split variant (services page, 6 routes): two ledger columns at desktop so the
   band stays compact; collapses back to the single column below 900px. */
.bk-routes--split { max-width: 1040px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px; }
@media (max-width: 900px) { .bk-routes--split { display: block; max-width: 900px; } }

@media (prefers-reduced-motion: reduce) {
    .bk-route__to::after, .bk-route__arrow { transition: none; }
}

/* Mobile: the ledger becomes a horizontal swipe rail (approved prototype) — cells
   with hairline left dividers, next cell peeking, snap scrolling, right-edge fade.
   Applies to every .bk-routes surface (home, /services, airport landing). */
@media (max-width: 760px) {
    .bk-routes,
    .bk-routes--split {
        display: flex;
        max-width: none;
        column-gap: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-top: 1px solid var(--bk-border);
        border-bottom: 1px solid var(--bk-border);
        padding: 18px 0;
        cursor: grab;
        mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent 100%);
    }
    .bk-routes::-webkit-scrollbar { display: none; }
    .bk-routes.is-dragging { cursor: grabbing; scroll-snap-type: none; }
    .bk-routes.is-dragging .bk-route { pointer-events: none; }

    .bk-route {
        flex: 0 0 auto;
        width: min(62vw, 250px);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
        padding: 6px 20px 8px;
        border-bottom: none;
        border-left: 1px solid var(--bk-border);
        scroll-snap-align: start;
    }
    .bk-route:first-child { border-left: none; padding-left: 4px; }
    .bk-route__to { font-size: var(--bk-text-xl, 1.25rem); }
    .bk-route__arrow { font-size: 20px; }
}

/* While a field's dropdown is open, lift the field above its siblings.
   Fields carry will-change (animation perf hint), which makes each one a
   stacking context — without this lift the panel's z-index is TRAPPED inside
   and later sibling fields paint over the open dropdown. */
.bk-booking__field--dropdown-open,
.bk-trip-edit__field--dropdown-open { z-index: 60; }

.bk-custom-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #0f1319;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--bk-radius-md);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  font-family: var(--bk-font-body);
  padding: 6px;
  z-index: 200;
  /* Capped to ~4.5 rows and scrollable: the uncapped list (13 hour options)
     overflowed the hero on the home widget and the tail options were
     unreachable (overflow was hidden). The half-visible row cues the scroll. */
  max-height: 190px;
  overflow-y: auto;
  overflow-x: hidden;
  animation: bk-dropdown-enter 0.15s ease-out;
}

/* Premium scrollbar — matches the time picker; scrolling variants (mobile
   sheet, capped lists) otherwise fall back to the default gray scrollbar. */
.bk-custom-dropdown {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.bk-custom-dropdown::-webkit-scrollbar { width: 6px; }
.bk-custom-dropdown::-webkit-scrollbar-track { background: transparent; }
.bk-custom-dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 3px; }
.bk-custom-dropdown::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); }

.bk-custom-dropdown__item {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--bk-white);
  cursor: pointer;
  transition: background var(--bk-tx-fast);
}

.bk-custom-dropdown__item:hover {
  background: rgba(255,255,255,0.09);
}

.bk-custom-dropdown__item--selected {
  background: var(--bk-forest);
  color: #fff;
  font-weight: 600;
}

/* Keep select styling for fallback/other uses */
select.bk-booking__input,
select.bk-trip-edit__input {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 16px;
  color: #fff;
}
select.bk-booking__input option,
select.bk-trip-edit__input option {
  background: var(--bk-white);
  color: var(--bk-ink);
  padding: 10px 12px;
}

.bk-booking__submit {
  align-self: start;                        /* stay at top when dropdowns expand */
  margin-top: 20px;                         /* align with the taller input fields */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;                             /* enlarged to match the bigger form */
  padding: 0 22px;
  margin-left: 8px;                         /* space from divider */
  margin-right: 6px;
  background: var(--bk-forest);
  color: var(--bk-white);
  font-weight: 500;
  font-size: 16px;
  border-radius: 999px;
  box-shadow: none;
  transition: background var(--bk-tx-fast), transform var(--bk-tx-fast);
  min-width: 136px;
  white-space: nowrap;
}

.bk-booking__submit:hover {
  background: var(--bk-forest-hover);    /* clean shift, no jump — premium-style */
}

/* Field group — wraps field + its dropdown results */
.bk-booking__field-group {
  display: flex;
  flex-direction: column;
}

/* Desktop-only expanded state: reserve dropdown space after first interaction
   so the widget stays open while users move between fields. */
@media (min-width: 541px) {
  .bk-booking--expanded .bk-booking__form {
    padding-bottom: 300px;
  }

  .bk-booking__field-group {
    position: relative;
  }

  .bk-booking__field-results,
  .bk-booking__field-calendar,
  .bk-booking__field-time,
  .bk-custom-dropdown {
    position: absolute !important;
    top: calc(100% - 4px);
    left: 0;
    right: 0;
    z-index: 40;
    margin-top: 0 !important;
  }

  .bk-booking__field-calendar {
    /* Center the 280px panel under the (narrower) date field instead of
       left-aligning it, which skewed it toward the time field. */
    right: auto;
    left: 50%;
    margin-left: -140px;
  }
}

/* Dropdown entrance animation (premium pattern) */
@keyframes bk-dropdown-enter {
  0% {
    transform: translateY(-5px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Inline field results dropdown — expands below the field */
.bk-booking__field-results {
  position: relative;
  background: #0f1319;
  border-radius: 0 0 var(--bk-radius-md) var(--bk-radius-md);
  padding: 6px 6px 8px 6px;
  margin-top: -4px;
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  animation: bk-dropdown-enter 0.15s ease-out;
  /* Custom scrollbar (premium-inspired) */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}

/* Ensure last result item has proper spacing and border-radius visibility */
.bk-booking__field-results .bk-booking__result:last-of-type {
  margin-bottom: 2px;
}

/* Simple border for scrollable dropdowns (gradient border doesn't work with overflow) */
.bk-booking__field-results {
  border: 1px solid rgba(255,255,255,0.12);
  border-top: none;
}

/* Hint placeholder when no results yet */
.bk-booking__result-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
}

.bk-booking__result-hint .bk-booking__result-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.5;
}

.bk-booking__field-results::-webkit-scrollbar {
  width: 6px;
}

.bk-booking__field-results::-webkit-scrollbar-track {
  background: transparent;
}

.bk-booking__field-results::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
}

.bk-booking__field-results::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.35);
}

/* Custom calendar dropdown — expands below the date field */
.bk-booking__field-calendar {
  position: relative;
  background: #0f1319;
  border: 1px solid rgba(255,255,255,0.15);
  border-top: none;
  border-radius: 0 0 var(--bk-radius-md) var(--bk-radius-md);
  padding: 12px;
  margin-top: -4px;
  width: 280px;
  overflow: visible;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}


.bk-calendar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.bk-calendar__title {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
}

/* Circular glass nav buttons (premium style) */
.bk-calendar__nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background:
    radial-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0) 90%),
    linear-gradient(rgba(15,19,25,0.5), rgba(15,19,25,0.5));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  box-shadow: 0 2px 8px rgba(6,10,13,0.12);
}

.bk-calendar__nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.2);
}

.bk-calendar__nav:hover {
  background:
    radial-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0) 90%),
    linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.08));
  transform: scale(1.05);
}

.bk-calendar__nav:active {
  transform: scale(0.95);
}

.bk-calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 6px;
}

.bk-calendar__weekdays span {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  padding: 4px 0;
}

.bk-calendar__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.bk-calendar__day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Hover state with border (premium pattern) */
.bk-calendar__day:hover:not(:disabled):not(.bk-calendar__day--empty):not(.bk-calendar__day--selected) {
  border-color: var(--bk-forest-soft);
  color: #fff;
  background: transparent;
}

.bk-calendar__day--empty {
  cursor: default;
}

.bk-calendar__day--disabled {
  color: rgba(255,255,255,0.25);
  cursor: not-allowed;
}

/* Today indicator — a small dot under the number. Deliberately NOT a ring/circle:
   a circled "today" reads as selected and competes with the real selection. */
.bk-calendar__day--today:not(.bk-calendar__day--selected) {
  color: #fff;
  font-weight: 600;
  position: relative;
}
.bk-calendar__day--today:not(.bk-calendar__day--selected)::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bk-forest-soft);
}

.bk-calendar__day--selected {
  background: var(--bk-forest) !important;
  border-color: var(--bk-forest) !important;
  color: #fff;
  font-weight: 600;
}

/* Custom time dropdown — scrollable list with premium-style scrollbar */
.bk-booking__field-time {
  position: relative;
  background: #0f1319;
  border: 1px solid rgba(255,255,255,0.15);
  border-top: none;
  border-radius: 0 0 var(--bk-radius-md) var(--bk-radius-md);
  padding: 6px;
  margin-top: -4px;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  animation: bk-dropdown-enter 0.15s ease-out;
  /* Custom scrollbar (premium-inspired) */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}


.bk-booking__field-time::-webkit-scrollbar {
  width: 6px;
}

.bk-booking__field-time::-webkit-scrollbar-track {
  background: transparent;
}

.bk-booking__field-time::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
}

.bk-booking__field-time::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.35);
}

.bk-time__option {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin: 2px 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.bk-time__option:hover {
  background-color: rgba(110,110,115,0.4);
}

.bk-time__option--selected {
  background: var(--bk-forest) !important;
  color: #fff;
  font-weight: 500;
}

/* Results panel — expands open like premium (smooth height grow).
   The clip animates max-height 0 -> open, revealing the dark-glass card.
   Panel overlaps form bottom to create seamless single card appearance. */
.bk-booking__results-panel {
  width: 100%;
  margin-top: -8px;                                 /* overlap form bottom -> single card */
  border-radius: 0 0 var(--bk-radius-lg) var(--bk-radius-lg);
}

/* Clipped wrapper carries the dark-glass treatment and the height animation.
   Collapsed to 0 height so nothing shows until results arrive. */
.bk-booking__results-clip {
  max-height: 0;
  overflow: hidden;
  border-radius: inherit;
  transition: max-height 0.32s ease-in-out;
  background:
    radial-gradient(rgba(0,0,0,0.20), rgba(0,0,0,0) 90%),
    linear-gradient(rgba(13,16,21,0.94), rgba(13,16,21,0.94));
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

/* When open: remove bottom radius from form for seamless connection */
.bk-booking:has(.bk-booking__results-panel--open) .bk-booking__form {
  border-radius: 8px 8px 0 0;
}

.bk-booking__results-panel--open .bk-booking__results-clip {
  max-height: 420px;                                /* fits 5 suggestions + header */
  box-shadow:
    0 18px 50px rgba(6,10,13,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}

.bk-booking__results-header {
  padding: 12px 16px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.45);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.bk-booking__results {
  padding: 6px;
}

/* Field wrap for inline autocomplete dropdowns */
.bk-booking__field-wrap {
  position: relative;
}

/* Inline autocomplete results dropdown (positioned below field) */
.bk-booking__field-wrap > .bk-booking__results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  max-height: 280px;
  overflow-y: auto;
  background:
    linear-gradient(rgba(15,19,25,0.95), rgba(15,19,25,0.95));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 0 0 var(--bk-radius-md) var(--bk-radius-md);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  border-top: 0;
}

/* MOBILE ONLY: Self-contained popup dropdown that breaks out of grid context */
@media (max-width: 540px) {
  /* Active field gets visual highlight */
  .bk-booking__field-wrap--active .bk-booking__field {
    background: rgba(255,255,255,0.12) !important;
  }

  /* Mobile dropdown: fixed position full-width popup
     Position is set dynamically by JS via inline style or CSS variable */
  .bk-booking__field-wrap > .bk-booking__results {
    position: fixed;
    top: var(--dropdown-top, 50%);
    left: 12px;
    right: 12px;
    max-height: 45vh;
    overflow-y: auto;
    border-radius: var(--bk-radius-md);
    border: 1px solid rgba(255,255,255,0.18);
    background:
      linear-gradient(rgba(15,19,25,0.97), rgba(15,19,25,0.97));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
      0 20px 60px rgba(0,0,0,0.7),
      0 0 0 1px rgba(255,255,255,0.05);
    z-index: 9999;
  }

  /* Result items slightly larger for touch */
  .bk-booking__field-wrap > .bk-booking__results .bk-booking__result {
    padding: 14px 16px;
    min-height: 52px;
  }
}

/* Home page autocomplete dropdown (positioned via CSS custom properties) */
.bk-booking__dropdown {
  position: fixed !important;
  left: var(--dropdown-left, 16px) !important;
  top: var(--dropdown-top, 200px) !important;
  width: var(--dropdown-width, 320px);
  max-height: var(--dropdown-max-height, 320px);
  z-index: 10000;
  overflow-y: auto;
  background:
    linear-gradient(rgba(15,19,25,0.96), rgba(15,19,25,0.96));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--bk-radius-md);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  padding: 6px;
}

/* Mobile: constrain to viewport edges */
@media (max-width: 540px) {
  .bk-booking__dropdown {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: var(--dropdown-max-height, 45vh);
  }
}

.bk-booking__result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: background var(--bk-tx-fast);
}

.bk-booking__result:hover,
.bk-booking__result--active {
  background: rgba(255,255,255,0.09);
}

.bk-booking__result-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,0.55);     /* muted, like premium (not bright) */
  opacity: 1;
}

.bk-booking__result-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bk-booking__result-main {
  font-size: 14px;
  font-weight: 600;
  color: var(--bk-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bk-booking__result-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .bk-booking__form {
    grid-template-columns: 1fr 1fr;
    padding: 12px;
  }
  .bk-booking__field { border-right: 0 !important; }
  .bk-booking__field:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,0.10) !important;
  }
  .bk-booking__submit {
    grid-column: 1 / -1;
    padding: 14px;
  }
}

@media (max-width: 540px) {
  /* === Booking widget: more solid, less glass on mobile === */
  .bk-booking__form {
    grid-template-columns: 1fr;
    gap: 8px;                                   /* Consistent spacing between all fields */
    padding: 8px;
    /* Solid dark card instead of glass — premium mobile pattern */
    background:
      linear-gradient(rgba(15,19,25,0.82), rgba(15,19,25,0.82));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  }
  .bk-booking__field {
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 8px;
    padding: 12px 16px;
    text-align: left; /* Override hero center alignment */
    background: rgba(255,255,255,0.03);
  }
  .bk-booking__label {
    text-align: left;
    color: rgba(255,255,255,0.95);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.03em;
    text-transform: none; /* premium uses sentence case "Pickup location" */
    margin-bottom: 6px;
  }
  .bk-booking__input {
    text-align: left;
    font-size: 15px;
    color: var(--bk-white);
  }
  .bk-booking__input::placeholder { color: rgba(255,255,255,0.55); }

  /* === Tab pill: more defined, brighter active state === */
  .bk-booking__tabs {
    font-size: 14px;
    background: rgba(15,19,25,0.7);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    padding: 5px;
  }
  .bk-booking__tab {
    padding: 10px 18px;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
  }
  .bk-booking__tab--active {
    color: var(--bk-white);
    box-shadow: 0 4px 14px rgba(26,58,50,0.45);
  }

  /* === Submit button: full-width, prominent solid forest pill === */
  .bk-booking__submit {
    width: auto;
    justify-self: stretch;
    margin: 0 2px;             /* explicit equal inset on both sides */
    padding: 14px;
    min-width: 0;
    background: var(--bk-forest);
    color: var(--bk-white);
    font-weight: 600;
    font-size: 16px;
    height: 48px;
    border-radius: 999px;
    letter-spacing: 0.005em;
    box-shadow: 0 6px 20px rgba(26,58,50,0.35);
  }

  /* === Results panel on mobile === */
  .bk-booking__results-panel {
    margin: 0 8px;
    margin-top: -4px;
    border-radius: 0 0 var(--bk-radius-md) var(--bk-radius-md);
  }
  .bk-booking__results {
    max-height: 200px;
    overflow-y: auto;
  }

  /* === Floating dropdowns on mobile ===
     Use fixed position to break out of parent overflow constraints */
  .bk-booking__field-results,
  .bk-booking__field-calendar,
  .bk-booking__field-time,
  .bk-custom-dropdown {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 12px;
    max-height: 50vh;
    overflow-y: auto;
    z-index: 9999;
    margin-top: 0;
    border-radius: var(--bk-radius-md);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow:
      0 -8px 40px rgba(0,0,0,0.5),
      0 0 0 1px rgba(255,255,255,0.1);
  }

  /* Autocomplete stays attached to the active field on phones AND free-floats over the
     field below instead of pushing it down (no widget expansion). A fixed bottom sheet
     slides over the input once the keyboard shrinks the viewport (hides the typed text);
     relative grows the widget. So: absolute, anchored directly under the field. */
  .bk-booking__form { overflow: visible; }          /* let the floated dropdown escape the form */
  .bk-booking__field-group { position: relative; }  /* positioning anchor for the dropdown */
  .bk-booking__field-results {
    position: absolute;
    top: calc(100% - 4px);
    left: 0;
    right: 0;
    bottom: auto;
    max-height: 220px;
    z-index: 30;
    border-radius: 0 0 var(--bk-radius-md) var(--bk-radius-md);
    box-shadow: 0 12px 32px rgba(0,0,0,0.42);
  }

  /* Calendar: centered horizontally, near bottom */
  .bk-booking__field-calendar {
    width: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    min-width: 290px;
    max-width: calc(100vw - 24px);
  }

  /* Time picker scroll */
  .bk-booking__field-time {
    max-height: 45vh;
  }

  /* Hours dropdown — flows down below its field (mirror of the trip-edit fix).
     The generic bottom-sheet rule above turns this into position:fixed, but the
     widget's backdrop-filter makes the glass panel the containing block, so the
     "sheet" rendered as a detached slab floating UP over the fields. Anchor it
     to the field instead (the field wrapper is position:relative). */
  .bk-booking .bk-custom-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    bottom: auto;
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
  }
}

/* Extra small phones - tighter booking widget */
@media (max-width: 374px) {
  .bk-booking__form {
    padding: 6px;
  }
  .bk-booking__field {
    padding: 10px 12px;
  }
  .bk-booking__label {
    font-size: 11px;
  }
  .bk-booking__input {
    font-size: 14px;
  }
  .bk-booking__tabs {
    font-size: 13px;
    padding: 4px;
  }
  .bk-booking__tab {
    padding: 8px 14px;
  }
  .bk-booking__submit {
    margin: 10px 6px 6px 6px;
    padding: 12px;
    font-size: 15px;
    height: 44px;
  }
}


/* ==========================================================================
   9. Section headers
   ========================================================================== */

.bk-section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--bk-space-12);
}

.bk-section-header--left {
  text-align: left;
  margin-left: 0;
}

.bk-section-header__title {
  font-size: var(--bk-text-5xl);
  margin-bottom: var(--bk-space-4);
}

.bk-section-header__sub {
  font-family: var(--bk-font-body);
  font-size: var(--bk-text-lg);
  color: var(--bk-ink-secondary);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .bk-section-header {
    margin-bottom: var(--bk-space-8);
  }
  .bk-section-header__title { font-size: 2rem; }
  .bk-section-header__sub   { font-size: 1rem; }
}

@media (max-width: 480px) {
  .bk-section-header {
    margin-bottom: var(--bk-space-6);
  }
  .bk-section-header__title { font-size: 1.625rem; line-height: 1.2; }
  .bk-section-header__sub   { font-size: 0.9375rem; }
}

@media (max-width: 374px) {
  .bk-section-header__title { font-size: 1.5rem; }
  .bk-section-header__sub   { font-size: 0.875rem; }
}


/* ==========================================================================
   10. Cards
   ========================================================================== */

.bk-card {
  background: var(--bk-white);
  border-radius: var(--bk-radius-lg);
  overflow: hidden;
  border: 1px solid var(--bk-border);
  transition: transform var(--bk-tx-base), box-shadow var(--bk-tx-base);
}

.bk-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bk-shadow-lg);
}

.bk-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bk-cream-warm);
}

.bk-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--bk-tx-slow);
}

.bk-card:hover .bk-card__media img { transform: scale(1.04); }

.bk-card__body { padding: var(--bk-space-6); }

.bk-card__title {
  font-size: var(--bk-text-2xl);
  margin-bottom: var(--bk-space-2);
}

.bk-card__sub {
  font-family: var(--bk-font-display);
  font-style: italic;
  font-size: var(--bk-text-base);
  color: var(--bk-forest);
  margin-bottom: var(--bk-space-3);
}

.bk-card__text {
  font-size: var(--bk-text-sm);
  color: var(--bk-ink-secondary);
  line-height: 1.6;
  margin-bottom: var(--bk-space-4);
}

.bk-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bk-space-2);
  margin-bottom: var(--bk-space-5);
}

.bk-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bk-forest-tint);
  color: var(--bk-forest);
  border-radius: var(--bk-radius-pill);
  font-size: var(--bk-text-xs);
  font-weight: 500;
}

.bk-tag::before {
  content: "✓";
  font-size: 10px;
}

.bk-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--bk-space-2);
  color: var(--bk-forest);
  font-weight: 600;
  font-size: var(--bk-text-sm);
  transition: gap var(--bk-tx-fast);
}

.bk-card__link:hover { gap: var(--bk-space-3); }

.bk-card__link::after {
  content: "→";
  display: inline-block;
  transition: transform var(--bk-tx-fast);
}


/* ==========================================================================
   11. Feature row (3-up icon grid)
   ========================================================================== */

/* "The Baki Standard" — cream section, white cards with a frosted sage blob
   and a glass icon tile. Plugged in from the final design, wired to our tokens. */
.bk-features {
  --bk-accent: #5f9483; /* sage blob — change to recolor every card */
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.bk-feature,
.bk-feature *,
.bk-feature *::before,
.bk-feature *::after { box-sizing: border-box; }

.bk-feature {
  position: relative;
  border-radius: 22px;
  padding: 48px 34px 42px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #ffffff;
  border: 1px solid rgba(26, 58, 50, 0.07);
  box-shadow: 0 1px 2px rgba(26, 58, 50, 0.05), 0 18px 40px rgba(26, 58, 50, 0.04);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s;
}

.bk-feature:hover {
  transform: translateY(-8px);
  box-shadow: 0 1px 2px rgba(26, 58, 50, 0.05), 0 32px 64px rgba(26, 58, 50, 0.16);
}


/* Full-card sage blob + frosted overlay. */
.bk-feature__blob {
  position: absolute;
  left: 50%;
  top: -26%;
  width: 172%;
  height: 152%;
  margin-left: -86%;
  border-radius: 45%;
  background: var(--bk-accent);
  opacity: .92;
  z-index: 0;
  animation: bk-blob-float 9s ease-in-out infinite;
}

.bk-feature__frost {
  position: absolute;
  inset: 0;
  z-index: 1;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  background: linear-gradient(160deg, rgba(251, 248, 242, .52), rgba(251, 248, 242, .34));
  pointer-events: none;
}

.bk-feature__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Glass icon tile. */
.bk-feature__creative {
  position: relative;
  width: 152px;
  height: 152px;
  margin: 0 auto 32px;
}

.bk-feature__halo {
  position: absolute;
  inset: 10px;
  border-radius: 38px;
  background: radial-gradient(58% 58% at 50% 44%, var(--bk-accent) 0%, rgba(95, 148, 131, 0) 72%);
  opacity: .5;
  filter: blur(5px);
}

.bk-feature__tile-blob {
  position: absolute;
  top: 2px;
  left: 50%;
  margin-left: -40px;
  width: 80px;
  height: 80px;
  border-radius: 28px;
  background: var(--bk-accent);
  animation: bk-tile-float 7s ease-in-out infinite;
}

.bk-feature__tile {
  position: absolute;
  inset: 16px;
  border-radius: 32px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .16));
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 14px 34px rgba(26, 58, 50, .18);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tile hover flip (promoted from bakitour-home.css 2026-07-05 so services/about
   tiles match home): the tile fills forest and its icon goes cream. */
.bk-feature__tile { transition: background 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease; }
.bk-feature:hover .bk-feature__tile { background: var(--bk-forest); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(15, 38, 32, 0.22); }
.bk-feature .bk-feature__tile svg { transition: stroke 0.3s ease; }
.bk-feature:hover .bk-feature__tile svg { stroke: #f3ecdd; }

.bk-feature__tile svg { display: block; }

/* Card text. */
.bk-feature__label {
  font-family: var(--bk-font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #3c6557;
  margin-bottom: 14px;
}

.bk-feature .bk-feature__title {
  margin: 0;
  /* Fraunces display title + gold hairline hover — the card idiom (was home-only
     via bakitour-home.css; promoted 2026-07-05 so about/services cards match). */
  font-family: var(--bk-font-display);
  font-variation-settings: 'opsz' 144;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #15332b;
  position: relative;
  padding-bottom: 4px;
  display: inline-block; /* shrink to text so the underline matches its width */
  transition: color 0.3s ease;
}
.bk-feature:hover .bk-feature__title { color: #0f2620; }
.bk-feature .bk-feature__title::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--bk-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.bk-feature:hover .bk-feature__title::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .bk-feature .bk-feature__title, .bk-feature .bk-feature__title::after { transition: none; }
}

/* `.bk-body p { margin: 0 }` outranks a single class, so scope this to win. */
.bk-feature .bk-feature__text {
  margin: 14px 0 0;
  max-width: 272px;
  font-family: var(--bk-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(21, 51, 43, .66);
}

@keyframes bk-tile-float {
  0%, 100% { transform: translateY(0) rotate(7deg); }
  50% { transform: translateY(-6px) rotate(7deg); }
}

@keyframes bk-blob-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .bk-feature__blob,
  .bk-feature__tile-blob { animation: none; }
}

@media (max-width: 900px) {
  .bk-features { grid-template-columns: 1fr; gap: 20px; max-width: 420px; margin: 0 auto; }
}


/* ==========================================================================
   11b. Home page grids (services, fleet, testimonials)
   ========================================================================== */

.bk-services-grid,
.bk-fleet-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.bk-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* Testimonial card styling */
.bk-testimonials-grid figure {
  background: var(--bk-white);
  padding: 32px;
  border-radius: 16px;
  border: 1px solid var(--bk-border);
  margin: 0;
}

.bk-testimonials-grid blockquote {
  font-family: var(--bk-font-display);
  font-size: 20px;
  line-height: 1.4;
  color: var(--bk-ink);
  margin: 0 0 24px;
}

@media (max-width: 900px) {
  .bk-testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .bk-services-grid,
  .bk-fleet-grid,
  .bk-testimonials-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .bk-testimonials-grid figure {
    padding: 24px 20px;
  }

  .bk-testimonials-grid blockquote {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .bk-services-grid,
  .bk-fleet-grid,
  .bk-testimonials-grid {
    gap: 16px;
  }

  .bk-testimonials-grid figure {
    padding: 20px 16px;
    border-radius: 12px;
  }

  .bk-testimonials-grid blockquote {
    font-size: 16px;
    margin-bottom: 16px;
  }
}

/* Fleet card elements */
.bk-fleet-card__specs {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--bk-ink-secondary);
}

.bk-fleet-card__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--bk-border);
}

.bk-fleet-card__price {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.bk-fleet-card__amount {
  font-family: var(--bk-font-display);
  font-size: 32px;
  color: var(--bk-ink);
}

.bk-fleet-card__unit {
  color: var(--bk-ink-muted);
  font-size: 14px;
}

@media (max-width: 480px) {
  .bk-fleet-card__specs {
    gap: 16px;
    font-size: 13px;
  }
  .bk-fleet-card__amount {
    font-size: 26px;
  }
  .bk-fleet-card__unit {
    font-size: 13px;
  }
}

@media (max-width: 374px) {
  .bk-fleet-card__specs {
    gap: 12px;
    flex-wrap: wrap;
  }
  .bk-fleet-card__amount {
    font-size: 24px;
  }
}


/* ==========================================================================
   12. CTA band
   ========================================================================== */

.bk-cta {
  background: var(--bk-forest);
  color: var(--bk-cream);
  padding: var(--bk-space-16) var(--bk-space-6);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.bk-cta::before {
  content: "";
  position: absolute;
  top: -50%; left: -10%;
  width: 60%; height: 200%;
  background: radial-gradient(circle, rgba(194,163,95,0.10), transparent 60%);
  pointer-events: none;
}

.bk-cta__title {
  font-size: var(--bk-text-5xl);
  line-height: 1.1;
  color: var(--bk-cream);
  margin-bottom: var(--bk-space-5);
  position: relative;
}

.bk-cta__sub {
  font-family: var(--bk-font-body);
  font-size: var(--bk-text-lg);
  line-height: 1.6;
  color: rgba(251,248,242,0.75);
  margin: 0 auto var(--bk-space-10);
  max-width: 540px;
  position: relative;
}

.bk-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bk-space-5);
  flex-wrap: wrap;
  position: relative;
}

@media (max-width: 768px) {
  .bk-cta { padding: var(--bk-space-16) var(--bk-space-4); }
  .bk-cta__title { font-size: 2.25rem; }
}

@media (max-width: 600px) {
  .bk-cta { padding: var(--bk-space-12) var(--bk-space-4); }
  .bk-cta__title { font-size: 1.75rem; line-height: 1.15; }
  .bk-cta__sub { font-size: 0.95rem; }
  .bk-cta__actions { flex-direction: column; align-items: stretch; gap: var(--bk-space-3); }
  .bk-cta__actions .bk-btn { width: 100%; justify-content: center; }
}


/* ==========================================================================
   13. Footer
   ========================================================================== */

.bk-footer {
  background: var(--bk-forest);
  color: rgba(251,248,242,0.7);
  padding-top: var(--bk-space-16);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.bk-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--bk-space-12);
  padding-bottom: var(--bk-space-16);
}

.bk-footer__brand-logo {
  font-family: var(--bk-font-display);
  font-size: 1.75rem;
  letter-spacing: 0.06em;
  color: var(--bk-cream);
  margin-bottom: var(--bk-space-6);
  display: inline-block;
}

.bk-footer__brand-logo em {
  font-style: normal;
  color: inherit;
}

.bk-footer__about {
  font-size: var(--bk-text-lg);
  line-height: 1.7;
  max-width: 320px;
  margin-bottom: var(--bk-space-6);
}

.bk-footer__social {
  display: flex;
  gap: var(--bk-space-3);
  margin-top: var(--bk-space-8);
}

.bk-footer__social a {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--bk-radius-pill);
  color: var(--bk-cream);
  transition: background var(--bk-tx-fast), border-color var(--bk-tx-fast);
}

.bk-footer__social a:hover {
  background: var(--bk-gold);
  border-color: var(--bk-gold);
  color: var(--bk-forest);
}

.bk-footer__social svg { width: 16px; height: 16px; }

.bk-footer__heading {
  font-family: var(--bk-font-body);
  font-size: var(--bk-text-xl);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--bk-cream);
  margin-bottom: var(--bk-space-5);
}

/* The global `.bk-body h4` reset (margin:0) outranks the single-class rule above,
   so re-assert the heading gap with higher specificity. */
.bk-footer .bk-footer__heading { margin-bottom: var(--bk-space-5); }

.bk-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bk-space-3);
}

.bk-footer__list a {
  font-size: var(--bk-text-lg);
  color: rgba(251,248,242,0.7);
  transition: color var(--bk-tx-fast);
}

.bk-footer__list a:hover { color: var(--bk-cream); }

.bk-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--bk-space-3);
  font-size: var(--bk-text-lg);
}

.bk-footer__contact-phone {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--bk-cream);
}

.bk-footer__contact-phone strong {
  font-size: var(--bk-text-lg);
  font-weight: 600;
}

.bk-footer__contact-note {
  font-size: var(--bk-text-base);
  color: rgba(251,248,242,0.55);
}

.bk-footer__contact-link {
  color: rgba(251,248,242,0.7);
  transition: color var(--bk-tx-fast);
}

.bk-footer__contact-link:hover { color: var(--bk-cream); }

.bk-footer__contact-addr {
  font-style: normal;
  color: rgba(251,248,242,0.7);
  line-height: 1.65;
}

.bk-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: var(--bk-space-6) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--bk-text-sm);
  color: rgba(251,248,242,0.5);
}

.bk-footer__bottom-links {
  display: flex;
  gap: var(--bk-space-6);
}

.bk-footer__bottom-links a:hover { color: var(--bk-cream); }

@media (max-width: 900px) {
  .bk-footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--bk-space-10) var(--bk-space-6);
  }
  /* Brand spans the full width above the three link columns. */
  .bk-footer__grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 540px) {
  /* Slim the footer on phones — the full 4-section footer is too tall stacked. */
  .bk-footer { padding-top: var(--bk-space-10); }
  .bk-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--bk-space-6);
    padding-bottom: var(--bk-space-10);
  }
  .bk-footer__about { margin-bottom: var(--bk-space-4); }
  .bk-footer .bk-footer__heading { margin-bottom: var(--bk-space-3); }
  .bk-footer__bottom { flex-direction: column; gap: var(--bk-space-3); text-align: center; }
}


/* ==========================================================================
   14. Animation utilities
   ========================================================================== */

@keyframes bk-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bk-anim-fade-up         { animation: bk-fade-up 0.7s var(--bk-tx-base) both; }
.bk-anim-delay-1         { animation-delay: 0.15s; }
.bk-anim-delay-2         { animation-delay: 0.3s; }
.bk-anim-delay-3         { animation-delay: 0.45s; }

/* ── Scroll-reveal (progressive enhancement) ──────────────────────────────────
   Uses a CSS ANIMATION (not a transition) so it never clobbers an element's own
   `transition` — e.g. the .bk-feature cards' hover lift. JS adds .is-revealed on
   scroll-in, then .is-settled on animationend, which drops the animation so the
   element's natural transform/hover takes over cleanly. Gated on html.js so users
   without JS always see content. */
html.js [data-reveal] { opacity: 0.01; } /* 0.01 not 0: keeps LCP candidates reportable (see bk-page-enter) */
html.js [data-reveal].is-revealed { animation: bk-reveal 0.7s var(--bk-tx-base) both; }
/* Directional variant: slide DOWN into place (e.g. a header settling onto content
   arriving below it). Needs its OWN settle rule: the variant selector (0,4,1)
   out-specifies the generic is-settled teardown (0,3,1), so source order alone
   cannot save the contract. */
html.js [data-reveal].bk-reveal-down.is-revealed { animation: bk-reveal-down 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
html.js [data-reveal].bk-reveal-down.is-settled { animation: none; opacity: 1; }
html.js [data-reveal].is-settled { animation: none; opacity: 1; }
@keyframes bk-reveal-down {
  from { opacity: 0.01; transform: translateY(-30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bk-reveal {
  from { opacity: 0.01; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
/* Cascade the feature-card trio so they reveal one after another, not all at once. */
html.js .bk-features > .bk-feature[data-reveal]:nth-child(2) { animation-delay: 0.1s; }
html.js .bk-features > .bk-feature[data-reveal]:nth-child(3) { animation-delay: 0.2s; }
/* Fleet assembly reveal (user-approved 2026-07-17): the whole carousel (rail +
   gutter arrows) slides in from the right as ONE unit — a single composited layer;
   translating each card separately read as a rough multi-settle on Windows — while
   the cards fade in cascade on top and the section header above (.bk-reveal-down)
   slides down onto them. The transform rides the WRAPPER, never the track: a
   transformed scroll container inflates its own scrollable overflow, and the
   mandatory snap visibly jolts the rail when the sweep settles. */
html.js .bk-fleet-carousel[data-reveal].is-revealed { animation: bk-fleet-in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@keyframes bk-fleet-in {
  from { opacity: 0.01; transform: translateX(56px); }
  to   { opacity: 1; transform: none; }
}
html.js .bk-fleet-carousel[data-reveal] .bk-fleet-carousel__slide { opacity: 0.01; }
html.js .bk-fleet-carousel[data-reveal].is-revealed .bk-fleet-carousel__slide { animation: bk-fleet-card-fade 0.8s ease-out both; }
@keyframes bk-fleet-card-fade {
  from { opacity: 0.01; }
  to   { opacity: 1; }
}
html.js .bk-fleet-carousel[data-reveal].is-revealed .bk-fleet-carousel__slide:nth-child(1) { animation-delay: 0.08s; }
html.js .bk-fleet-carousel[data-reveal].is-revealed .bk-fleet-carousel__slide:nth-child(2) { animation-delay: 0.2s; }
html.js .bk-fleet-carousel[data-reveal].is-revealed .bk-fleet-carousel__slide:nth-child(3) { animation-delay: 0.32s; }
html.js .bk-fleet-carousel[data-reveal].is-revealed .bk-fleet-carousel__slide:nth-child(n+4) { animation-delay: 0.44s; }
/* Settle teardown: the rules above out-specify the generic [data-reveal].is-settled. */
html.js .bk-fleet-carousel[data-reveal].is-settled { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1 !important; animation: none !important; }
  /* Descendants of data-reveal elements aren't covered by the rule above. */
  html.js .bk-fleet-carousel[data-reveal] .bk-fleet-carousel__slide { opacity: 1 !important; animation: none !important; }
}


/* ==========================================================================
   16. Page title (inner-page hero — shorter than home hero)
   ========================================================================== */

.bk-page-title {
  position: relative;
  background: var(--bk-forest);
  color: var(--bk-cream);
  padding: calc(var(--bk-header-h) + var(--bk-space-20)) 0 var(--bk-space-20);
  overflow: hidden;
  isolation: isolate;
}

.bk-page-title__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.bk-page-title__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}

.bk-page-title__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,30,25,0.55), rgba(15,30,25,0.85));
}

.bk-page-title__inner {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--bk-space-6);
}

.bk-page-title__title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: var(--bk-space-4);
  text-wrap: balance;
}

.bk-page-title__sub {
  font-family: var(--bk-font-body);
  font-size: var(--bk-text-lg);
  color: rgba(251,248,242,0.85);
  max-width: 540px;
  margin: 0 auto;
}


/* ==========================================================================
   17. Booking layout — 2-col with sticky reserve rail (premium pattern)
   ========================================================================== */

.bk-booking-page {
  padding-top: 72px;                          /* Match actual header height */
  background: var(--bk-cream);
  min-height: 100vh;
}

.bk-booking-page__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: var(--bk-space-12);
  max-width: var(--bk-container);
  margin: 0 auto;
  padding: var(--bk-space-12) var(--bk-space-6);
  align-items: start;
}

.bk-booking-page__main {
  min-width: 0;
}

.bk-booking-page__rail {
  position: sticky;
  top: calc(var(--bk-header-h) + var(--bk-space-6));
}

@media (max-width: 1024px) {
  .bk-booking-page__inner {
    grid-template-columns: 1fr;
  }
  .bk-booking-page__rail {
    position: static;
  }
}

/* On mobile, header is 52px tall */
@media (max-width: 600px) {
  .bk-booking-page {
    padding-top: 52px !important;
  }
}

/* Vehicle picker cards (booking page) */
.bk-vehicle-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bk-space-4);
  margin-bottom: var(--bk-space-8);
}

.bk-vehicle-pick {
  background: var(--bk-white);
  border: 2px solid var(--bk-border);
  border-radius: 10px;                                 /* Slightly softer edge */
  padding: var(--bk-space-5);                          /* More padding for prominence */
  cursor: pointer;
  transition: border-color var(--bk-tx-fast), background var(--bk-tx-fast);
  position: relative;
  text-align: left;
  font-family: inherit;
}

.bk-vehicle-pick:hover {
  border-color: var(--bk-border-strong);
  background: rgba(255,255,255,0.6);     /* clean state shift, no jump — premium-style */
}

.bk-vehicle-pick--selected {
  border-color: var(--bk-forest);
  background: linear-gradient(180deg, var(--bk-forest-tint) 0%, var(--bk-white) 60%);
}

.bk-vehicle-pick__img {
  aspect-ratio: 3 / 2;                                 /* Taller cards - was 16/10 */
  border-radius: var(--bk-radius-md);
  overflow: hidden;
  background: var(--bk-cream-warm);
  margin-bottom: var(--bk-space-4);                    /* More spacing below image */
}

.bk-vehicle-pick__img img {
  width: 100%; height: 100%; object-fit: cover;
}

.bk-vehicle-pick--mint .bk-vehicle-pick__img { background: linear-gradient(180deg, #e8f0e8, #ffffff); }
.bk-vehicle-pick--peach .bk-vehicle-pick__img { background: linear-gradient(180deg, #fff1e6, #ffffff); }
.bk-vehicle-pick--sky .bk-vehicle-pick__img { background: linear-gradient(180deg, #e8eef8, #ffffff); }

.bk-vehicle-pick__name {
  font-family: var(--bk-font-display);
  font-size: var(--bk-text-2xl);                       /* Larger name - was xl */
  margin-bottom: var(--bk-space-2);
}

.bk-vehicle-pick__meta {
  display: flex;
  gap: var(--bk-space-3);
  font-size: var(--bk-text-sm);                        /* Larger meta text - was xs */
  color: var(--bk-ink-muted);
  margin-bottom: var(--bk-space-3);
}

.bk-vehicle-pick__meta strong {
  color: var(--bk-ink);
  font-weight: 600;
}

.bk-vehicle-pick__price {
  font-family: var(--bk-font-display);
  font-size: var(--bk-text-3xl);                       /* Larger price - was 2xl */
  color: var(--bk-ink);
}

.bk-vehicle-pick__price small {
  font-family: var(--bk-font-body);
  font-size: var(--bk-text-xs);
  color: var(--bk-ink-muted);
  margin-left: 2px;
}

/* Form panel — canonical static surface for forms (used by <x-form-panel>,
   contact + quote forms). */
.bk-form-panel {
  background: var(--bk-white);
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-lg);
  box-shadow: var(--bk-shadow-sm);
  padding: var(--bk-space-8);
}

.bk-form-panel__title {
  font-family: var(--bk-font-display);
  font-size: var(--bk-text-2xl);
  margin-bottom: var(--bk-space-6);
}

.bk-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bk-space-4);
  margin-bottom: var(--bk-space-4);
}

.bk-form-row--full { grid-template-columns: 1fr; }

@media (max-width: 640px) { .bk-form-row { grid-template-columns: 1fr; } }

.bk-form-field { display: flex; flex-direction: column; }

.bk-form-field__label {
  font-size: var(--bk-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bk-ink-muted);
  margin-bottom: var(--bk-space-2);
}

.bk-form-field__input {
  height: 48px;
  padding: 0 var(--bk-space-4);
  background: var(--bk-cream);
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-md);
  font-family: var(--bk-font-body);
  font-size: var(--bk-text-base);
  color: var(--bk-ink);
  transition: border-color var(--bk-tx-fast), background var(--bk-tx-fast);
}

.bk-form-field__input:focus {
  outline: none;
  border-color: var(--bk-forest);
  background: var(--bk-white);
  box-shadow: 0 0 0 3px var(--bk-forest-tint);
}

.bk-form-field__input::placeholder { color: var(--bk-ink-faint); }

/* Make date/time inputs fully clickable */
.bk-form-field__input[type="date"],
.bk-form-field__input[type="time"] {
  cursor: pointer;
  position: relative;
}

.bk-form-field__input[type="date"]::-webkit-calendar-picker-indicator,
.bk-form-field__input[type="time"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  background: transparent;
}

.bk-form-field__textarea {
  min-height: 120px;
  padding: var(--bk-space-3) var(--bk-space-4);
  resize: vertical;
}

/* Service type pill segmented control */
.bk-segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bk-space-2);
  padding: 4px;
  background: var(--bk-cream);
  border-radius: var(--bk-radius-md);
  border: 1px solid var(--bk-border);
}

.bk-segmented__item {
  padding: 10px 12px;
  text-align: center;
  font-size: var(--bk-text-sm);
  font-weight: 500;
  color: var(--bk-ink-secondary);
  border-radius: var(--bk-radius-sm);
  cursor: pointer;
  border: 0;
  background: transparent;
  transition: background var(--bk-tx-fast), color var(--bk-tx-fast);
  font-family: inherit;
}

.bk-segmented__item--active {
  background: var(--bk-white);
  color: var(--bk-forest);
  box-shadow: var(--bk-shadow-sm);
}

/* Reserve rail — vertical container holding TWO separate cards (map + panel) */
.bk-reserve {
  display: flex;
  flex-direction: column;
  gap: var(--bk-space-4);                       /* Compact gap */
  background: transparent;
  border: 0;
  padding: 0;
}

/* Map card (also see .bk-map override in section 32 below for the actual height) */
.bk-reserve__map {
  background: linear-gradient(135deg, #e8ede4 0%, #d4dfd2 100%);
  border: 1px solid var(--bk-border);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bk-ink-muted);
  font-size: var(--bk-text-sm);
}

/* Reserve panel card - matches trip-edit widget exactly */
.bk-reserve__body {
  --bk-accent: #5f9483;
  background: var(--bk-cream);
  border: 1px solid var(--bk-border);
  border-radius: 16px;
  padding: clamp(16px, 1.2vw, 20px);
  box-shadow: 0 1px 2px rgba(26, 58, 50, 0.05), 0 18px 44px rgba(26, 58, 50, 0.12);
}

.bk-reserve__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bk-space-3);
  padding-bottom: clamp(12px, 0.8vh, 16px);
  border-bottom: 1px solid var(--bk-border);
  margin-bottom: clamp(12px, 0.8vh, 16px);
}

.bk-reserve__name {
  font-family: var(--bk-font-display);
  font-size: clamp(15px, 1vw, 18px);
  font-weight: 500;
  color: var(--bk-forest);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.bk-reserve__subtitle {
  font-size: clamp(11px, 0.8vw, 13px);
  color: var(--bk-ink-muted);
  margin-top: 3px;
}

.bk-reserve__price {
  font-family: var(--bk-font-display);
  font-size: clamp(16px, 1.1vw, 19px);
  font-weight: 500;
  color: var(--bk-forest);
  white-space: nowrap;
}

.bk-reserve__option {
  display: flex;
  align-items: center;
  gap: clamp(10px, 0.8vw, 14px);
  padding: clamp(11px, 0.7vw, 14px) clamp(12px, 0.9vw, 16px);
  border: 1px solid var(--bk-border);
  border-radius: 12px;
  margin-bottom: clamp(8px, 0.5vw, 10px);
  cursor: pointer;
  background: transparent;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Hover only affects the UNselected option, so the selected one keeps its sage highlight. */
.bk-reserve__option:not(.bk-reserve__option--selected):hover {
  border-color: var(--bk-border-strong);
  background: rgba(26, 58, 50, 0.04);
  transform: translateY(-1px);
}

.bk-reserve__option--selected {
  border-color: var(--bk-forest);
  background: var(--bk-forest-tint);
  box-shadow: 0 0 0 1px var(--bk-forest);
}

/* Identity selector (guest state): two tappable option buttons; the guest one
   reveals its fields via grid-rows (display:none is banned around reveals here). */
.bk-reserve__identity { display: flex; flex-direction: column; }
/* Mobile-only affordances — desktop shows the full selector instead. */
.bk-reserve__guest-link,
.bk-reserve__guest-cta,
.bk-reserve__or { display: none; }
.bk-reserve__cta-label-mobile { display: none; }
.bk-reserve__option--choice {
  width: 100%;
  text-align: left;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.bk-reserve__guest-fields {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.bk-reserve__guest-fields--open {
  grid-template-rows: 1fr;
  margin-bottom: clamp(8px, 0.5vw, 10px);
}
.bk-reserve__guest-fields > div {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bk-reserve__guest-fields--open > div { padding: 2px; }
.bk-reserve__guest-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--bk-ink, #1a1a1a);
  background: #fff;
  border: 1px solid var(--bk-border);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bk-reserve__guest-input:focus {
  border-color: var(--bk-forest);
  box-shadow: 0 0 0 3px rgba(26, 58, 47, 0.10);
}

/* Icon circle */
.bk-reserve__option-icon {
  width: clamp(34px, 2.2vw, 40px);
  height: clamp(34px, 2.2vw, 40px);
  border-radius: 50%;
  background: var(--bk-forest-tint);
  border: 1px solid var(--bk-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

/* Identity chip: signed-in state shows the customer's initials in the circle. */
.bk-reserve__option-icon--initials {
  font-size: 13px;
  font-weight: 700;
  color: var(--bk-forest);
  letter-spacing: 0.02em;
}

.bk-reserve__option-icon svg {
  width: clamp(16px, 1.1vw, 18px);
  height: clamp(16px, 1.1vw, 18px);
  stroke: var(--bk-forest);
  transition: stroke 0.2s ease;
}

.bk-reserve__option--selected .bk-reserve__option-icon {
  background: var(--bk-forest);
  border-color: var(--bk-forest);
}

.bk-reserve__option--selected .bk-reserve__option-icon svg {
  stroke: var(--bk-white);
}

.bk-reserve__option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bk-reserve__option-text strong {
  font-size: clamp(13px, 0.95vw, 15px);
  font-weight: 600;
  color: var(--bk-forest);
}

.bk-reserve__option-text span {
  font-size: clamp(11px, 0.8vw, 13px);
  color: var(--bk-ink-muted);
}

/* Apply code row */
.bk-reserve__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(10px, 0.8vw, 14px) 0;
  margin-top: clamp(6px, 0.5vw, 10px);
  border-top: 1px solid var(--bk-border);
}

.bk-reserve__apply-offer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bk-forest-soft);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
}

.bk-reserve__apply-offer:hover {
  color: var(--bk-forest);
}

.bk-reserve__apply-offer svg {
  stroke: var(--bk-accent);
}

.bk-reserve__fees {
  font-size: 12px;
  color: var(--bk-ink-muted);
}

/* Reserve button — Matches trip-edit__submit style */
.bk-reserve__cta {
  margin-top: clamp(10px, 1vh, 14px);
  height: clamp(40px, 2.8vw, 46px);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
  border-radius: 999px;
  padding: 0 clamp(18px, 1.4vw, 24px);
  color: var(--bk-white) !important;
  background: var(--bk-forest) !important;
  border: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition: background var(--bk-tx-fast), transform 0.1s ease;
}

.bk-reserve__cta:hover {
  background: var(--bk-forest-hover) !important;
}

.bk-reserve__cta:active {
  transform: scale(0.98);
}

/* Session-expired cue shown directly under the Reserve CTA (pairs with the page toast). */
.bk-reserve__expired {
  margin-top: var(--bk-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--bk-space-2);
  align-items: stretch;
  text-align: center;
  padding: var(--bk-space-3);
  border: 1px solid #e7c3bf;
  background: #fdf3f2;
  border-radius: var(--bk-radius-md);
}
.bk-reserve__expired-text { font-size: var(--bk-text-sm); color: #b42318; font-weight: 500; }
.bk-reserve__expired-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: var(--bk-radius-pill);
  background: var(--bk-forest);
  color: var(--bk-white);
  border: 0;
  font-weight: 600;
  font-size: var(--bk-text-sm);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--bk-tx-fast);
}
.bk-reserve__expired-btn:hover { background: #0f2a21; }


/* ==========================================================================
   18. Services page — numbered service navigator (premium-style)
   ========================================================================== */

.bk-svc-stage {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--bk-space-12);
  align-items: center;
  max-width: var(--bk-container);
  margin: 0 auto;
  padding: 0 var(--bk-space-6);
}

@media (max-width: 1024px) {
  .bk-svc-stage { grid-template-columns: 1fr; gap: var(--bk-space-8); }
}

/* All six detail panels share ONE grid cell, so the tallest one sets the stage
   height at every viewport — the 6s rotation and web-font swaps can never move
   the navigator (this shove was the page's entire measured CLS). The swap is
   opacity + visibility (not display), so hidden panels keep reserving space and
   stay out of the a11y tree / tab order. */
.bk-svc-stage > .bk-svc-detail {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
}
/* Incoming panel: rises and settles on a premium ease, starting just after the
   outgoing one has mostly cleared, so the swap reads as one motion, not a blend. */
.bk-svc-stage > .bk-svc-detail.bk-svc-detail--active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.65s ease 0.18s, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.18s, visibility 0s linear 0.18s;
}
.bk-svc-stage > .bk-svc-nav { grid-column: 2; grid-row: 1; }
@media (max-width: 1024px) {
  .bk-svc-stage > .bk-svc-nav { grid-column: 1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-svc-stage > .bk-svc-detail { transition: none; transform: none; }
}

.bk-svc-detail__title {
  font-family: var(--bk-font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: var(--bk-space-3);
  color: var(--bk-cream);
}

.bk-svc-detail__sub {
  font-family: var(--bk-font-display);
  font-style: italic;
  font-size: var(--bk-text-xl);
  color: rgba(251,248,242,0.7);
  margin-bottom: var(--bk-space-6);
}

.bk-svc-detail__text {
  font-family: var(--bk-font-body);
  font-size: var(--bk-text-base);
  line-height: 1.65;
  color: rgba(251,248,242,0.8);
  margin-bottom: var(--bk-space-6);
  max-width: 56ch;
}

.bk-svc-detail__tags {
  display: flex;
  gap: var(--bk-space-2);
  flex-wrap: wrap;
  margin-bottom: var(--bk-space-4);
}

.bk-svc-tag {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(251,248,242,0.85);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
}

.bk-svc-detail__cta {
  display: flex;
  align-items: center;
  margin-top: var(--bk-space-6);
}

/* Services hero CTA — glass treatment instead of the solid forest button, so it
   matches the translucent hero components it sits on. Scoped to this hero only. */
.bk-hero--svc .bk-btn--primary {
  background: rgba(255,255,255,0.12);
  color: var(--bk-cream);
  border: 1px solid rgba(255,255,255,0.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.bk-hero--svc .bk-btn--primary:hover {
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.45);
}
.bk-hero--svc .bk-btn--primary:active {
  background: rgba(255,255,255,0.16);
  filter: none;
}

.bk-svc-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 1px solid rgba(255,255,255,0.18);
  padding-left: var(--bk-space-6);
}

/* Phone — flip the divider to the top so the nav sits under the detail panel */
@media (max-width: 1024px) {
  .bk-svc-nav {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.18);
    padding-left: 0;
    padding-top: var(--bk-space-5);
    margin-top: var(--bk-space-3);
  }
}

/* Services hero images: stacked and crossfaded via class toggle (a display swap
   cuts the old image instantly and fades the new one in over black — that dark
   flash was what made the rotation feel abrupt). */
.bk-svc-hero-img { opacity: 0; transition: opacity 0.9s ease; }
.bk-svc-hero-img--on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .bk-svc-hero-img { transition: none; }
}

/* Services hero: desktop tall, mobile compact */
.bk-hero--svc { min-height: 92vh; }

/* The base hero content carries the HOME hero's 18vw left bias (headline sits left
   of the booking widget). On the services hero that bias shoves the stage right and
   clips the navigator off-screen at <=1500px viewports — center it here instead. */
.bk-hero--svc .bk-hero__content { margin-left: auto; margin-right: auto; }

@media (max-width: 1024px) {
  /* Tablet — somewhere between desktop and phone */
  .bk-hero--svc { min-height: auto; }
  .bk-hero--svc .bk-hero__content { padding-bottom: var(--bk-space-10); }
}

@media (max-width: 600px) {
  /* Phone — services hero is content-driven, not viewport-tall.
     Tighten everything so the navigator is visible without a long scroll.
     padding-top must clear the fixed 76px header. */
  .bk-hero--svc { min-height: auto; }
  .bk-hero--svc .bk-hero__content {
    padding-top: calc(var(--bk-header-h) + var(--bk-space-4));
    padding-bottom: var(--bk-space-8);
  }

  .bk-svc-detail__title  { font-size: 1.75rem; line-height: 1.05; margin-bottom: var(--bk-space-2); }
  .bk-svc-detail__sub    { font-size: 1rem; margin-bottom: var(--bk-space-3); }
  .bk-svc-detail__text   { font-size: 0.9rem; line-height: 1.55; margin-bottom: var(--bk-space-3); }

  /* Tag pills: smaller padding/font */
  .bk-svc-tag { font-size: 11px; padding: 4px 10px; }

  /* Book CTA row: tighter spacing, smaller button */
  .bk-svc-detail__cta { margin-top: var(--bk-space-3); }
  .bk-hero--svc .bk-btn--lg { height: 40px; padding: 0 var(--bk-space-5); font-size: 13px; }

  /* Navigator: tighter line height, smaller items */
  .bk-svc-nav__heading        { margin-bottom: var(--bk-space-3); font-size: 11px; }
  .bk-svc-nav__item           { padding: var(--bk-space-3) 0; }
  .bk-svc-nav__item-name      { font-size: 0.95rem; }
}

.bk-svc-nav__heading {
  font-size: var(--bk-text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251,248,242,0.5);
  margin-bottom: var(--bk-space-4);
}

.bk-svc-nav__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--bk-space-4);
  padding: var(--bk-space-4) 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: padding var(--bk-tx-fast);
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  width: 100%;
  font-family: inherit;
  text-align: left;
  color: rgba(251,248,242,0.6);
}

.bk-svc-nav__item:hover { padding-left: var(--bk-space-2); color: var(--bk-cream); }

.bk-svc-nav__item--active {
  color: var(--bk-cream);
  border-bottom-color: var(--bk-gold);
}

.bk-svc-nav__item-name {
  font-family: var(--bk-font-display);
  font-size: var(--bk-text-lg);
}

.bk-svc-nav__item-arrow {
  opacity: 0;
  transition: opacity var(--bk-tx-fast), transform var(--bk-tx-fast);
}

.bk-svc-nav__item--active .bk-svc-nav__item-arrow,
.bk-svc-nav__item:hover .bk-svc-nav__item-arrow {
  opacity: 1;
  transform: translateX(2px);
}


/* ==========================================================================
   19. Story / about page  — split with 15+ years badge
   ========================================================================== */

.bk-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bk-space-16);
  align-items: center;
}

@media (max-width: 900px) {
  .bk-story { grid-template-columns: 1fr; gap: var(--bk-space-8); }
}

.bk-story__media {
  position: relative;
  border-radius: var(--bk-radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bk-cream-warm);
}

.bk-story__media img {
  width: 100%; height: 100%; object-fit: cover;
}

.bk-story__badge {
  position: absolute;
  bottom: var(--bk-space-6);
  right: var(--bk-space-6);
  background: var(--bk-forest);
  color: var(--bk-cream);
  padding: var(--bk-space-4) var(--bk-space-6);
  border-radius: var(--bk-radius-lg);
  text-align: center;
  box-shadow: var(--bk-shadow-lg);
}

.bk-story__badge-num {
  font-family: var(--bk-font-display);
  font-size: var(--bk-text-3xl);
  line-height: 1;
}

.bk-story__badge-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 4px;
}

.bk-story__body {
  display: flex;
  flex-direction: column;
  gap: var(--bk-space-5);
}

.bk-story__body p {
  font-size: var(--bk-text-base);
  line-height: 1.7;
  color: var(--bk-ink-secondary);
}


/* ==========================================================================
   20. Contact cards
   ========================================================================== */

.bk-contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bk-space-6);
}

@media (max-width: 768px) {
  .bk-contact-cards { grid-template-columns: 1fr; }
}

.bk-contact-card {
  background: var(--bk-white);
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-lg);
  padding: var(--bk-space-8);
  text-align: center;
  transition: transform var(--bk-tx-base), box-shadow var(--bk-tx-base);
}

.bk-contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bk-shadow-lg);
}

.bk-contact-card__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--bk-space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bk-forest-tint);
  color: var(--bk-forest);
  border-radius: 50%;
}

.bk-contact-card__title {
  font-family: var(--bk-font-display);
  font-size: var(--bk-text-xl);
  margin-bottom: var(--bk-space-2);
}

.bk-contact-card__text {
  font-size: var(--bk-text-sm);
  color: var(--bk-ink-muted);
  margin-bottom: var(--bk-space-3);
}

.bk-contact-card__value {
  font-family: var(--bk-font-display);
  font-size: var(--bk-text-lg);
  color: var(--bk-forest);
  display: inline-block;
}


/* ==========================================================================
   21. Inclusion strip — "Included with every ride"
   ========================================================================== */

.bk-inclusions {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--bk-space-8);
  padding: var(--bk-space-5) var(--bk-space-6);
  background: var(--bk-forest-tint);
  border-radius: var(--bk-radius-lg);
  border: 1px solid var(--bk-border);
}

.bk-inclusions__title {
  font-family: var(--bk-font-display);
  font-size: var(--bk-text-lg);
  line-height: 1.2;
  color: var(--bk-forest);
  margin: 0;
}

.bk-inclusions__note {
  font-family: var(--bk-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bk-forest-soft);
  margin: 3px 0 0;
}

.bk-inclusions__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bk-space-2) var(--bk-space-6);
}

.bk-inclusions__item {
  display: flex;
  align-items: center;
  gap: var(--bk-space-2);
  color: var(--bk-ink-secondary);
  font-size: var(--bk-text-sm);
}

.bk-inclusions__item svg { width: 16px; height: 16px; color: var(--bk-forest); flex-shrink: 0; }

@media (max-width: 820px) {
  .bk-inclusions { grid-template-columns: 1fr; gap: var(--bk-space-5); }
  .bk-inclusions__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .bk-inclusions { padding: var(--bk-space-5); }
  .bk-inclusions__grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   22. Trip-summary bar (replaces nav on /booking results page)
   ========================================================================== */

.bk-trip-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--bk-z-sticky);
  background: var(--bk-cream);
  border-bottom: 1px solid var(--bk-border);
}

.bk-trip-bar > .bk-trip-bar__inner {
  height: 72px;                               /* Taller header - was 56px */
  display: grid;
  align-items: center;
}

.bk-trip-bar__inner {
  width: 100%;
  max-width: var(--bk-container);
  margin: 0 auto;
  padding: 0 var(--bk-space-6);
  display: grid;
  grid-template-columns: 1fr auto 1fr;     /* equal side columns — centers the middle pills */
  align-items: center;
  gap: var(--bk-space-6);
}

/* Logo stays left within its 1fr column, hamburger stays right within its 1fr column */
.bk-trip-bar__logo { justify-self: start; }
.bk-trip-bar__menu { justify-self: end; }

.bk-trip-bar__logo {
  font-family: var(--bk-font-display);
  font-size: 2.25rem;                     /* Larger logo - was 1.875rem (30px), now 36px */
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--bk-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 0.2em;
  transition: opacity var(--bk-tx-fast);
}

.bk-trip-bar__logo:hover { opacity: 0.85; }
.bk-trip-bar__logo em { color: inherit; font-style: normal; font-weight: 500; }

/* Trip pill row — premium uses TWO separate pills (locations / schedule),
   not one container with pills inside. */
.bk-trip-pills {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
  font-size: var(--bk-text-sm);
  max-width: 100%;
}

/* Each pill is its own bordered button */
.bk-trip-pill--group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--bk-white);
  border: 1px solid var(--bk-border);
  cursor: pointer;
  color: var(--bk-ink);
  white-space: nowrap;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: background var(--bk-tx-fast), border-color var(--bk-tx-fast);
}

.bk-trip-pill--group:hover {
  border-color: var(--bk-border-strong);
  background: var(--bk-cream);
}

.bk-trip-pill__icon-wrap {
  display: inline-flex;
  align-items: center;
}

.bk-trip-pill__arrow {
  width: 16px;
  height: 16px;
  color: var(--bk-ink-muted);
  flex-shrink: 0;
}

.bk-trip-pill__icon {
  width: 14px;
  height: 14px;
  color: var(--bk-ink-muted);
  flex-shrink: 0;
}

.bk-trip-pill__sep {
  display: inline-block;
  width: 1px;
  height: 11px;
  background: var(--bk-border);
  align-self: center;
  user-select: none;
}

.bk-trip-pill--placeholder {
  color: var(--bk-ink-muted);
  font-style: italic;
}

.bk-trip-bar__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--bk-radius-pill);
  border: 1px solid var(--bk-border);
  background: var(--bk-white);
  color: var(--bk-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.12s ease-out, border-color 0.12s ease-out, transform 0.1s ease-out;
}

.bk-trip-bar__menu:hover {
  background: var(--bk-cream);
  border-color: var(--bk-border-strong);
}

.bk-trip-bar__menu:active {
  transform: scale(0.95);
}

/* Mobile Edit Trip button — hidden on desktop, visible on mobile */
.bk-trip-bar__edit {
  display: none;                                /* Hidden by default on desktop */
}

@media (max-width: 900px) {
  .bk-trip-bar__inner { grid-template-columns: auto 1fr auto; gap: var(--bk-space-3); padding: 0 var(--bk-space-4); }
  .bk-trip-pills { font-size: 12px; padding: 3px; }
  .bk-trip-pill { padding: 4px 10px; max-width: 130px; }
}

/* Phone — clean minimal header with logo, edit button, and hamburger */
@media (max-width: 600px) {
  .bk-trip-bar > .bk-trip-bar__inner { height: 52px; }
  .bk-trip-bar__inner {
    display: flex;                              /* Use flex instead of grid to avoid hidden item issues */
    align-items: center;
    justify-content: space-between;
    gap: var(--bk-space-3);
    padding: 0 var(--bk-space-4);
  }
  .bk-trip-bar__logo {
    font-size: 1.625rem;
    flex-shrink: 0;                             /* Prevent logo from shrinking */
  }

  /* Edit Trip button - visible on mobile */
  .bk-trip-bar__edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--bk-white);
    border: 1px solid var(--bk-border);
    color: var(--bk-ink);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;                        /* Prevent text wrapping */
    flex-shrink: 0;                             /* Prevent button from shrinking */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 0.12s ease-out, border-color 0.12s ease-out, transform 0.1s ease-out;
    margin-left: auto;
  }
  .bk-trip-bar__edit:hover {
    background: var(--bk-cream);
    border-color: var(--bk-border-strong);
  }
  .bk-trip-bar__edit:active {
    transform: scale(0.97);
  }
  .bk-trip-bar__edit svg {
    width: 14px; height: 14px;
    opacity: 0.7;
  }

  .bk-trip-bar__menu {
    width: 44px; height: 44px;                  /* Larger touch target on mobile */
  }
  .bk-trip-bar__menu svg {
    width: 20px; height: 20px;
  }
  .bk-trip-pills { display: none; }
}

/* ============================================================
   Inline trip-edit dropdown — premium pattern.
   Drops down from header in place of the trip pills.
   ============================================================ */
/* Glass card that drops down from the trip-bar — uses the SAME dark glass treatment
   as the home page booking widget (.bk-booking__form) for design consistency. */
.bk-trip-edit {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: top center;
  width: calc(100% - 32px);
  max-width: 1140px;                          /* matches premium's ~1180px form */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background:
    radial-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0) 90%),
    radial-gradient(circle at 80% 200%, rgba(255,255,255,0.22), rgba(255,255,255,0) 80%),
    linear-gradient(rgba(15,19,25,0.94), rgba(15,19,25,0.94));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-radius: 12px;
  box-shadow:
    0 24px 48px rgba(0,0,0,0.28),
    0 8px 16px rgba(0,0,0,0.16),
    inset 4px 4px 12px rgba(0,0,0,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.10);
  z-index: 9999;
}

/* Smooth "grow from pills" transition — feels like one component expanding */
.bk-trip-edit-enter,
.bk-trip-edit-leave {
  transition:
    opacity 280ms ease-out,
    transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bk-trip-edit-enter-start {
  opacity: 0;
  transform: translateX(-50%) translateY(-6px) scaleY(0.97);
}
.bk-trip-edit-enter-end {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scaleY(1);
}

/* Dim backdrop covering rest of the page so dropdown stands out */
.bk-trip-edit-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,19,25,0.45);
  z-index: 9990;
}

/* Tabs above the card */
.bk-trip-edit__tabs {
  display: inline-flex;
  padding: 3px;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--bk-border);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.bk-trip-edit__tabs .bk-booking__tab { color: var(--bk-ink-secondary, #555); }
.bk-trip-edit__tabs .bk-booking__tab--active {
  background: var(--bk-forest);
  color: var(--bk-white);
}

/* The form bar — sits inside the dark glass card, transparent so glass shows through */
.bk-trip-edit__form {
  display: grid;
  /* address fields ~240px each (premium spec), then date/flight/time tighter, button auto */
  grid-template-columns: 2fr 2fr 1fr 1fr 1fr auto;
  align-items: start;  /* dropdowns expand without pushing other fields */
  gap: 6px;
  width: 100%;
  overflow: visible;
}

/* Field groups inside trip-edit form */
.bk-trip-edit__form .bk-booking__field-group {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

/* Elevate field group when dropdown is active. The :has() clause covers the
   hours dropdown, whose open-state class lives on the inner switcher field —
   without it the sibling Date group paints over the open hours list. */
.bk-trip-edit__form .bk-booking__field-group:focus-within,
.bk-trip-edit__form .bk-booking__field-group.bk-field-active,
.bk-trip-edit__form .bk-booking__field-group:has(.bk-trip-edit__field--dropdown-open) {
  z-index: 100;
}

/* Inline autocomplete dropdown — positioned absolutely below field */
.bk-booking__field-autocomplete {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  padding: 6px;
  max-height: 240px;
  z-index: 10001;
  background: #0f1319;
  border-radius: var(--bk-radius-md);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.10);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}

.bk-booking__field-autocomplete::-webkit-scrollbar { width: 6px; }
.bk-booking__field-autocomplete::-webkit-scrollbar-track { background: transparent; }
.bk-booking__field-autocomplete::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 3px; }
.bk-booking__field-autocomplete::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); }

/* Autocomplete option — matches .bk-time__option styling */
.bk-autocomplete__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  margin: 2px 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.bk-autocomplete__option:hover,
.bk-autocomplete__option--active {
  background-color: rgba(110,110,115,0.4);
}

.bk-autocomplete__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.6;
}

.bk-autocomplete__text {
  flex: 1;
  min-width: 0;
}

.bk-autocomplete__main {
  display: block;
  font-weight: 500;
  color: rgba(255,255,255,0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bk-autocomplete__sub {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* Hide inline autocomplete on mobile - use teleported version instead */
@media (max-width: 600px) {
  .bk-booking__field-autocomplete--desktop {
    display: none !important;
  }
}

/* Dropdowns inside trip-edit use same styling */
.bk-trip-edit__form .bk-booking__field-results {
  position: relative;
  margin-top: -4px;
  padding: 6px;
  background: #0f1319;
  border-radius: 0 0 var(--bk-radius-md) var(--bk-radius-md);
  border: 1px solid rgba(255,255,255,0.10);
  border-top: none;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.10);
  max-height: 280px;
  overflow-y: auto;
}

/* Calendar dropdown in trip-edit — glass style, expands inline */
.bk-trip-edit__form .bk-booking__field-calendar {
  position: relative;
  margin-top: -4px;
  padding: 12px;
  width: 280px;
  /* The date field is far narrower than the panel: center it (the desktop
     media rule anchors it absolute at left:0, which hangs it off to the right). */
  left: 50%;
  right: auto;
  margin-left: -140px;
  background: #0f1319;
  border-radius: 0 0 var(--bk-radius-md) var(--bk-radius-md);
  border: 1px solid rgba(255,255,255,0.10);
  border-top: none;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.10);
  overflow: hidden;
}

/* Time dropdown in trip-edit — glass style, expands inline */
.bk-trip-edit__form .bk-booking__field-time {
  position: relative;
  margin-top: -4px;
  padding: 6px;
  max-height: 240px;
  background: #0f1319;
  border-radius: 0 0 var(--bk-radius-md) var(--bk-radius-md);
  border: 1px solid rgba(255,255,255,0.10);
  border-top: none;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.10);
  overflow-y: auto;
}

/* Hours dropdown in trip-edit matches glass style */
.bk-trip-edit .bk-custom-dropdown {
  background: #0f1319;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.10);
}

.bk-trip-edit__hint {
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,0.72);                /* muted on dark glass */
  text-align: center;
}

/* One field pattern for the whole widget: the clean underline the address fields
   use — no boxes, so every field reads as the same UI element. The border is a
   transparent structural strip; the visible line is an inset ::after (12px each
   side, matching the text padding) so lines read as short per-field indicators. */
.bk-trip-edit__field {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 12px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  transition: background var(--bk-tx-fast);
  overflow: visible;
}
.bk-trip-edit__field:not(.bk-trip-edit__field--switcher)::after,
.bk-trip-edit__field-inner::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -2px;
  height: 2px;
  background: rgba(255,255,255,0.30);
  transition: background var(--bk-tx-base);
}
.bk-trip-edit__field:hover {
  background: rgba(255,255,255,0.04);
}
.bk-trip-edit__field:not(.bk-trip-edit__field--switcher):hover::after,
.bk-trip-edit__field-inner:hover::after {
  background: rgba(255,255,255,0.45);
}
.bk-trip-edit__field:focus-within {
  background: transparent;
}
.bk-trip-edit__field:not(.bk-trip-edit__field--switcher):focus-within::after,
.bk-trip-edit__field-inner:focus-within::after {
  background: var(--bk-forest);
}

/* Switcher field: wrapper for mutually-exclusive fields (dropoff vs hours) */
.bk-trip-edit__field--switcher {
  padding: 0;           /* Inner element handles padding */
  display: flex;        /* Ensure inner fills height */
  flex-direction: column;
  border: none;         /* No border on wrapper - inner handles it */
}
.bk-trip-edit__field-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;              /* Fill parent height */
  padding: 8px 12px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  transition: background var(--bk-tx-fast);
  position: relative;
}
.bk-trip-edit__field-inner:hover {
  background: rgba(255,255,255,0.04);
}
.bk-trip-edit__field-inner:focus-within {
  background: transparent;
}

/* Pickup / drop-off (address) fields → a clean underline instead of a full box border:
   gray at rest, green when focused. Scoped to the text-input fields via :has() so the
   date / time pickers keep their box treatment. Covers both the home hero widget
   (.bk-booking__field) and the /book trip bar (.bk-trip-edit__field / __field-inner). The
   :not(--switcher) avoids double-underlining the drop-off wrapper, whose inner handles it. */
.bk-booking__field:has(input[type="text"]) {
  border-color: transparent;
  border-bottom: 2px solid rgba(255,255,255,0.30);   /* gray underline at rest */
  border-radius: 0;
}
.bk-booking__field:has(input[type="text"]):focus-within {
  background: transparent;                            /* no box tint — the underline does the work */
  border-bottom-color: var(--bk-forest);              /* forest green — matches the CTA button */
}
/* Clear button spacing for inner fields — inputs only: the padding keeps TYPED
   TEXT from sliding under the ×. The hourly switcher shares a field with the
   (hidden) drop-off clear, and this padding on its BUTTON dragged the chevron
   32px out of line with the date/time chevrons. */
.bk-trip-edit__field-inner:has(.bk-trip-edit__clear) input.bk-trip-edit__input {
  padding-right: 32px;
}

/* Home hero widget only: inset the address underline to the text width (not the full cell).
   The pickup and drop-off cells sit ~1px apart, so full-width underlines read as one
   near-continuous broken line. An inset underline gives each field its own clearly
   separated line. Scoped to .bk-booking__field so the /book trip bar keeps its treatment. */
.bk-booking__field:has(input[type="text"]),
.bk-booking__field:has(input[type="text"]):focus-within {
  border-bottom-color: transparent;          /* hide the full-width border; ::after draws it */
}
.bk-booking__field:has(input[type="text"]) {
  position: relative;
}
.bk-booking__field:has(input[type="text"])::after {
  content: "";
  position: absolute;
  left: 20px;                                 /* aligns the line with the input text */
  right: 20px;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.30);      /* gray at rest */
  transition: background var(--bk-tx-base);
}
.bk-booking__field:has(input[type="text"]):focus-within::after {
  background: var(--bk-forest);               /* forest green when focused — matches the CTA */
}

.bk-trip-edit__label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  margin-bottom: 2px;
}

.bk-trip-edit__input {
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--bk-white);
  font-family: var(--bk-font-body);
  font-size: 15px;
  font-weight: 500;
  width: 100%;
  padding: 0;
  text-overflow: ellipsis;        /* clip with … instead of running under the × button */
}

/* When the field has the × clear button, reserve space so text doesn't slide under it.
   The × is 22px wide + 8px right offset = 30px total; pad the input ~32px. */
.bk-trip-edit__field:has(.bk-trip-edit__clear) input.bk-trip-edit__input {
  padding-right: 32px;
}
.bk-trip-edit__input::placeholder { color: rgba(255,255,255,0.55); font-weight: 400; }
.bk-trip-edit__input::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.7); }

/* Override the global focus-visible orange outline — too chunky for these inputs.
   Use the parent .bk-trip-edit__field's background tint as the focus indicator instead. */
.bk-trip-edit__input:focus,
.bk-trip-edit__input:focus-visible {
  outline: none !important;
  box-shadow: none;
}

.bk-trip-edit__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  color: var(--bk-white);
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bk-trip-edit__clear:hover { background: rgba(255,255,255,0.28); }

.bk-trip-edit__submit {
  align-self: start;
  margin-top: 10px;
  height: 38px;
  padding: 0 18px;
  margin-left: 4px;
  margin-right: 4px;
  background: var(--bk-forest);
  color: var(--bk-white);
  font-family: var(--bk-font-body);
  font-weight: 500;
  font-size: 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background var(--bk-tx-fast);
}
.bk-trip-edit__submit:hover { background: var(--bk-forest-hover); }

/* Trip-edit unified results panel — expands below form like premium/home widget */
.bk-trip-edit__results-panel {
  position: relative;
  z-index: 100;
  width: 100%;
  margin-top: -8px;                                 /* overlap form bottom -> single card */
  border-radius: 0 0 var(--bk-radius-lg) var(--bk-radius-lg);
}

/* Clip wrapper with height animation */
.bk-trip-edit__results-clip {
  max-height: 0;
  overflow: hidden;
  border-radius: inherit;
  transition: max-height 0.32s ease-in-out;
  background:
    radial-gradient(rgba(0,0,0,0.20), rgba(0,0,0,0) 90%),
    linear-gradient(rgba(13,16,21,0.94), rgba(13,16,21,0.94));
  backdrop-filter: blur(22px) saturate(140%);
}

/* When open: remove bottom radius from form for seamless connection */
.bk-trip-edit__form--expanded {
  border-radius: 8px 8px 0 0 !important;
}

.bk-trip-edit__results-panel--open .bk-trip-edit__results-clip {
  max-height: 420px;                                /* fits 5 suggestions + header */
  box-shadow:
    0 18px 50px rgba(6,10,13,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}

.bk-trip-edit__results-header {
  padding: 12px 16px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.bk-trip-edit__results {
  padding: 6px;
}

.bk-trip-edit__result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background var(--bk-tx-fast);
}
.bk-trip-edit__result:hover,
.bk-trip-edit__result--active {
  background: rgba(255,255,255,0.08);
}

.bk-trip-edit__result-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,0.45);
}

.bk-trip-edit__result-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bk-trip-edit__result-main {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bk-trip-edit__result-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Helper line below the card — premium shows "Set the schedule…" */
/* (Old white-on-dim hint removed — see .bk-trip-edit__hint above which uses dark text on cream) */

@media (max-width: 900px) {
  .bk-trip-edit__form {
    grid-template-columns: 1fr 1fr;
    width: calc(100% - 32px);
    gap: 8px;
  }
  /* All fields get visible border box at tablet size */
  .bk-trip-edit__field {
    border: 1px solid rgba(255,255,255,0.15);
  }
  .bk-trip-edit__field--switcher {
    border: none;
  }
  .bk-trip-edit__field-inner {
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
  }
  .bk-trip-edit__submit {
    grid-column: 1 / -1;
    margin: 8px 4px 4px;
    width: calc(100% - 8px);
  }
}

/* Mobile trip edit - matches 600px breakpoint for consistency */
@media (max-width: 600px) {
  .bk-trip-edit {
    top: 52px;
    left: 0;
    right: 0;
    transform: none !important;
    width: 100%;
    padding: 12px;
    gap: 10px;
    max-height: calc(100vh - 60px);
    overflow: visible;
    border-radius: 0;
  }
  .bk-trip-edit__tabs {
    gap: var(--bk-space-2);
  }
  .bk-booking__tab {
    font-size: 13px;
    padding: 6px 12px;
  }
  .bk-trip-edit__form {
    grid-template-columns: 1fr;
    gap: 8px;
    overflow: visible;
  }
  .bk-trip-edit__field {
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 12px;
    overflow: visible !important;
  }
  /* Switcher wrapper has no border/padding in mobile; inner handles it */
  .bk-trip-edit__field--switcher {
    padding: 0;
    border: none;
  }
  .bk-trip-edit__field-inner {
    padding: 10px 12px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
  }
  .bk-trip-edit__label {
    font-size: 11px;
  }
  .bk-trip-edit__input {
    font-size: 14px;
  }
  .bk-trip-edit__submit {
    width: 100%;
    margin: 4px 0 0 0;
    height: 44px;
    font-size: 15px;
  }
  .bk-trip-edit__hint {
    font-size: 12px;
    margin-top: 8px;
  }

  /* All field groups get base z-index so they're in same stacking context */
  .bk-trip-edit__form .bk-booking__field-group {
    position: relative;
    z-index: 1;
    overflow: visible !important;
  }

  /* When field has active dropdown, elevate above siblings */
  .bk-trip-edit__form .bk-booking__field-group:focus-within,
  .bk-trip-edit__form .bk-booking__field-group.bk-field-active {
    z-index: 100 !important;
  }

  /* Autocomplete results - fixed at bottom like time picker */
  .bk-trip-edit__form .bk-booking__field-results {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    top: auto !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    --tw-translate-x: 0 !important;
    --tw-translate-y: 0 !important;
    max-height: 50vh;
    overflow-y: auto;
    z-index: 10000;
    border-radius: var(--bk-radius-md);
    background: #0f1319;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow:
      0 -8px 40px rgba(0,0,0,0.28),
      inset 0 0 0 1px rgba(255,255,255,0.10);
  }

  /* Hours dropdown - flows down below field */
  .bk-trip-edit .bk-custom-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    bottom: auto;
    margin-top: 4px;
    transform: none !important;
    -webkit-transform: none !important;
    max-height: 240px;
    z-index: 10001;
    border-radius: var(--bk-radius-md);
    background: #0f1319;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow:
      0 12px 40px rgba(0,0,0,0.28),
      inset 0 0 0 1px rgba(255,255,255,0.10);
  }

  /* Calendar dropdown - flows down below field */
  .bk-trip-edit__form .bk-booking__field-calendar {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    bottom: auto;
    width: auto;
    margin-top: 4px;
    margin-left: 0; /* undo the desktop centering offset */
    transform: none !important;
    -webkit-transform: none !important;
    --tw-translate-x: 0 !important;
    --tw-translate-y: 0 !important;
    z-index: 10000;
    border-radius: var(--bk-radius-md);
    background: #0f1319;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow:
      0 12px 40px rgba(0,0,0,0.28),
      inset 0 0 0 1px rgba(255,255,255,0.10);
  }

  /* Time dropdown - flows down below field */
  .bk-trip-edit__form .bk-booking__field-time {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    bottom: auto;
    margin-top: 4px;
    transform: none !important;
    -webkit-transform: none !important;
    --tw-translate-x: 0 !important;
    --tw-translate-y: 0 !important;
    max-height: 240px;
    z-index: 10000;
    border-radius: var(--bk-radius-md);
    background: #0f1319;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow:
      0 12px 40px rgba(0,0,0,0.28),
      inset 0 0 0 1px rgba(255,255,255,0.10);
  }

  /* Mobile transition - no translateX since we removed it */
  .bk-trip-edit-enter-start {
    opacity: 0;
    /* No transform on mobile - breaks position:fixed on children */
  }
  .bk-trip-edit-enter-end {
    opacity: 1;
    transform: none;
  }

}

/* ============================================================
   Unified Autocomplete Dropdown — teleported to body
   Works on both mobile (bottom sheet) and desktop (dropdown)
   ============================================================ */

/* Unified autocomplete - matches time picker (.bk-booking__field-time) styling */
.bk-unified-autocomplete {
  position: fixed !important;
  left: var(--bk-unified-left, 16px) !important;
  right: var(--bk-unified-right, auto) !important;
  bottom: var(--bk-unified-bottom, auto) !important;
  top: var(--bk-unified-top, 100px) !important;
  width: var(--bk-unified-width, 300px);
  max-height: var(--bk-unified-max-height, 280px);
  z-index: 99999 !important;
  /* Match trip-edit time picker glass styling */
  background: #0f1319;
  border-radius: 0 0 var(--bk-radius-md, 12px) var(--bk-radius-md, 12px);
  border: 1px solid rgba(255,255,255,0.10);
  border-top: none;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.10);
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Custom scrollbar matching time picker */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}

.bk-unified-autocomplete::-webkit-scrollbar {
  width: 6px;
}

.bk-unified-autocomplete::-webkit-scrollbar-track {
  background: transparent;
}

.bk-unified-autocomplete::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
}

.bk-unified-autocomplete::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.35);
}

/* Result items - styled like .bk-time__option */
.bk-unified-autocomplete .bk-booking__result {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  margin: 2px 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.bk-unified-autocomplete .bk-booking__result:hover,
.bk-unified-autocomplete .bk-booking__result--active {
  background-color: rgba(110,110,115,0.4);
}

.bk-unified-autocomplete .bk-booking__result:active {
  background-color: rgba(110,110,115,0.5);
}

.bk-unified-autocomplete .bk-booking__result-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.6;
}

.bk-unified-autocomplete .bk-booking__result-text {
  flex: 1;
  min-width: 0;
}

.bk-unified-autocomplete .bk-booking__result-main {
  display: block;
  font-weight: 500;
  color: rgba(255,255,255,0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bk-unified-autocomplete .bk-booking__result-sub {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* Desktop: hide teleported autocomplete - use inline version instead */
@media (min-width: 601px) {
  .bk-unified-autocomplete {
    display: none !important;
  }
}

/* Mobile: position directly under the active field */
@media (max-width: 600px) {
  .bk-unified-autocomplete {
    left: var(--bk-unified-left, 12px) !important;
    right: var(--bk-unified-right, 12px) !important;
    bottom: var(--bk-unified-bottom, auto) !important;
    top: var(--bk-unified-top, auto) !important;
    width: var(--bk-unified-width, auto);
    transform: none !important;
    max-height: var(--bk-unified-max-height, 50vh);
    border-radius: var(--bk-radius-md, 12px);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow:
      0 -8px 40px rgba(0,0,0,0.28),
      inset 0 0 0 1px rgba(255,255,255,0.10);
  }

  .bk-unified-autocomplete .bk-booking__result {
    padding: 12px 14px;
  }

  .bk-unified-autocomplete .bk-booking__result:active {
    transform: scale(0.98);
  }
}

/* ============================================================
   Site-nav drawer — opened from hamburger
   ============================================================ */
.bk-side-menu {
  position: fixed;
  inset: 0;
  z-index: var(--bk-z-modal, 200);
  background: rgba(15,19,25,0.45);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: flex-end;
}

.bk-side-menu__panel {
  width: 100%;
  max-width: 320px;
  background: var(--bk-cream);
  height: 100%;
  padding: var(--bk-space-6) var(--bk-space-5);
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--bk-space-6));
  display: flex;
  flex-direction: column;
  gap: var(--bk-space-5);
  position: relative;
  box-shadow: -8px 0 32px rgba(0,0,0,0.2);
}

.bk-side-menu__close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 12px;
  width: 44px; height: 44px;                    /* Touch-friendly size */
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--bk-ink);
  transition: background 0.12s ease-out, transform 0.1s ease-out;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.bk-side-menu__close:hover { background: rgba(0,0,0,0.06); }
.bk-side-menu__close:active { transform: scale(0.92); }

.bk-side-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 40px;
}
.bk-side-menu__nav a {
  font-family: var(--bk-font-display);
  font-size: 1.375rem;
  padding: 14px 0;                              /* Larger touch target */
  border-bottom: 1px solid var(--bk-border);
  color: var(--bk-ink);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color 0.12s ease-out;
}
.bk-side-menu__nav a:hover,
.bk-side-menu__nav a:active { color: var(--bk-forest); }

.bk-side-menu__logout {
  margin-top: var(--bk-space-4);
}

.bk-side-menu__logout-btn {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-md);
  background: transparent;
  color: var(--bk-ink-secondary);
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.12s ease-out, border-color 0.12s ease-out;
}
.bk-side-menu__logout-btn:active {
  background: var(--bk-cream-dark, #f0ece3);
}

.bk-side-menu__phone {
  margin-top: auto;
  padding: 16px;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--bk-ink);
  text-align: center;
  background: var(--bk-cream-warm);
  border-radius: var(--bk-radius-md);
  -webkit-tap-highlight-color: transparent;
}

[x-cloak] { display: none !important; }

/* ============================================================
   Google Places Autocomplete dropdown — premium-style:
   clean white card, two-line items (bold name + muted address),
   icon on the left spanning both rows.
   ============================================================ */
.pac-container {
  z-index: 99999 !important;
  min-width: 420px !important;                           /* wider so addresses don't truncate */
  max-width: 520px !important;
  margin-top: 8px;
  background-color: var(--bk-white) !important;
  background-image: none !important;
  border: 1px solid var(--bk-border) !important;
  border-radius: 8px !important;
  box-shadow:
    0 12px 32px rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.06) !important;
  font-family: var(--bk-font-body) !important;
  padding: 4px !important;
  overflow: hidden;
}

/* Each item: 2-col grid — icon on left, content stacked on right */
.pac-item {
  display: grid !important;
  grid-template-columns: 20px 1fr;
  column-gap: 10px;
  row-gap: 0;
  align-items: start;
  padding: 10px 12px !important;
  border: 0 !important;
  border-top: 0 !important;
  border-radius: 6px;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--bk-ink-secondary, #5a6168) !important;    /* default = secondary text */
  cursor: pointer;
  transition: background var(--bk-tx-fast);
}
.pac-item:hover,
.pac-item-selected {
  background: var(--bk-cream) !important;
}

/* Icon column — spans both rows, vertically centered */
.pac-icon,
.pac-icon-marker {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  background-position: center !important;
  margin: 0 !important;
  opacity: 0.55;
}

/* Title row */
.pac-item-query {
  grid-column: 2;
  grid-row: 1;
  display: block;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--bk-ink) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pac-matched {
  font-weight: 600 !important;
  color: inherit !important;
}

/* Subtitle row — every <span> in .pac-item that isn't query/icon goes here */
.pac-item > span:not(.pac-item-query):not(.pac-icon) {
  grid-column: 2;
  grid-row: 2;
  font-size: 12px;
  color: var(--bk-ink-secondary, #6a7077);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Powered by Google" footer — keep, tone down */
.pac-container::after {
  height: 24px !important;
  margin: 4px 8px 0 !important;
  background-position: right center !important;
  opacity: 0.55;
}

/* ============================================================
   Map markers — premium-style: address card + colored time chip
   ============================================================ */
.bk-mapmarker {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  overflow: hidden;
  min-width: 150px;
  max-width: 200px;
  font-family: 'Inter Tight', sans-serif;
}

.bk-mapmarker__address {
  flex: 1;
  padding: 8px 10px;
  min-width: 0;
}

.bk-mapmarker__label {
  font-size: 11px;
  font-weight: 600;
  color: #0f1319;
  line-height: 1.25;
}

.bk-mapmarker__addr {
  font-size: 10px;
  color: #5a6068;
  line-height: 1.3;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}

.bk-mapmarker__time {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 10px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  min-width: 58px;
}

/* Strip Google's default InfoWindow chrome (white box, close button, tail) */
.gm-style-iw,
.gm-style-iw-c,
.gm-style-iw-d {
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  max-width: none !important;
  max-height: none !important;
}
.gm-style-iw-d > div {
  overflow: visible !important;
}
.gm-style-iw-c {
  padding: 0 !important;
}
.gm-style-iw-tc {                            /* the tail/triangle below the bubble */
  display: none !important;
}
.gm-ui-hover-effect {                        /* the X close button */
  display: none !important;
}
.gm-style-iw-chr {                           /* close-button container */
  display: none !important;
  padding: 0 !important;
  height: 0 !important;
}

/* Kill the global :focus-visible orange ring inside Google Maps —
   it was painting an orange box around InfoWindows on page load. */
.gm-style,
.gm-style *,
.gm-style :focus,
.gm-style :focus-visible,
.gm-style-iw,
.gm-style-iw *,
.gm-style-iw-c,
.gm-style-iw-d,
.bk-mapmarker,
.bk-mapmarker * {
  outline: none !important;
  box-shadow: none !important;
}

/* Restore our custom marker's drop shadow that the rule above wiped */
.bk-mapmarker {
  box-shadow: 0 4px 12px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.10) !important;
}


/* ==========================================================================
   23. Booking results page layout (replaces .bk-booking-page from earlier)
   ========================================================================== */

.bk-results {
  padding-top: 0;    /* .bk-booking-page on body handles header offset */
  background: var(--bk-cream);
  min-height: 100vh;
}

.bk-results__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 420px);  /* Viewport-relative rail width */
  column-gap: clamp(24px, 3vw, 48px);
  max-width: 1440px;
  margin: 0 auto;
  padding: 8px clamp(16px, 4vw, 48px) 40px;
  align-items: start;
}

.bk-results__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.bk-results__rail {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 1.5vh;                                 /* Viewport-relative gap */
}

/* Map - pure viewport height, scales with zoom */
.bk-results__rail .bk-map {
  height: 58vh;                               /* Always 58% of viewport */
}

/* Reserve container - viewport-relative height */
.bk-results__rail .bk-reserve {
  /* Natural height, content determines size */
}

@media (max-width: 1024px) {
  .bk-results__inner {
    grid-template-columns: 1fr;
    gap: var(--bk-space-6);
    padding: var(--bk-space-6) var(--bk-space-4) var(--bk-space-12);
  }
  .bk-results__rail { position: static; }
  /* On tablet+phone, map sits on top, but cap its height so it doesn't dominate */
  .bk-map { height: min(380px, 50vh) !important; }
}

/* Phone: tighter vertical rhythm + experience headline scales down +
   give the bottom enough padding so content isn't hidden by the sticky reserve drawer */
@media (max-width: 600px) {
  .bk-results { padding-top: 0; }  /* .bk-booking-page handles header offset */
  .bk-results__inner {
    padding: 0 var(--bk-space-4) calc(var(--bk-space-12) + 110px);
    gap: var(--bk-space-2);
  }
  .bk-results__main { gap: 8px; }
  .bk-experience-heading { font-size: 18px !important; line-height: 24px !important; margin: 0 0 6px 0 !important; }
  .bk-vhero-tagline { font-size: 1rem; line-height: 1.45; margin-bottom: var(--bk-space-8); }
  .bk-divider { margin: var(--bk-space-8) 0; }
  .bk-section-h { font-size: 20px; line-height: 28px; }
  .bk-included { gap: var(--bk-space-6) var(--bk-space-4); }
  .bk-vhero { aspect-ratio: 16 / 10; border-radius: 12px; }
  .bk-vhero img { border-radius: 12px; }
  .bk-luggage-tabs { flex-wrap: wrap; gap: 4px; }
  .bk-luggage-tab { font-size: 12px; padding: 8px 12px; min-height: 40px; }

  /* Vehicle picker becomes horizontally scrollable (premium mobile pattern) */
  .bk-pick-row {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(-1 * var(--bk-space-4));
    margin-right: calc(-1 * var(--bk-space-4));
    padding: 0 var(--bk-space-4);
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    gap: var(--bk-space-3);
  }
  .bk-pick-row::-webkit-scrollbar { display: none; }
  .bk-pick {
    flex: 0 0 194px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    flex-shrink: 0;
    width: 194px;
    min-width: 194px;
    max-width: 194px;
    padding: 5px;
    gap: 5px;
    touch-action: pan-x;
  }
  .bk-pick__media { height: 120px !important; border-radius: 12px; }
  .bk-pick__body { padding: 3px 2px 2px; }
  .bk-pick__head { gap: 3px; margin-bottom: 2px; }
  .bk-pick__name { font-size: 12px; }
  .bk-pick__price { font-size: 12px; }
  .bk-pick__meta { font-size: 11px; gap: 5px; margin-top: 1px; }
  .bk-pick__meta-item svg { width: 14px; height: 14px; }

  /* Mobile badges - smaller and tighter */
  .bk-pick__badge {
    top: 6px;
    left: 6px;
    padding: 3px 7px 3px 5px;
    font-size: 9px;
    gap: 3px;
    border-radius: 4px;
  }
  .bk-pick__badge svg { width: 10px; height: 10px; }

  /* Sticky picker - hide on mobile, use bottom drawer instead */
  .bk-sticky-carousel { display: none !important; }

  /* Explore link - smaller on mobile */
  .bk-explore-link { font-size: 12px; margin-top: var(--bk-space-3); }

  /* Capacity section - tighter on mobile */
  .bk-capacity__tabs { gap: var(--bk-space-4); margin-bottom: var(--bk-space-3); }
  .bk-capacity__tab { font-size: 13px; }
  .bk-capacity__hint { font-size: 12px; margin-bottom: var(--bk-space-3); }

  /* Luggage photo - shorter aspect ratio on mobile */
  .bk-luggage-photo { aspect-ratio: 16 / 9; }
  .bk-luggage-photo__placeholder { padding: 16px; gap: 8px; font-size: 12px; }
  .bk-luggage-photo__placeholder svg { width: 36px; height: 36px; }
  /* Seating diagram - smaller padding */
  .bk-seating-diagram { padding: var(--bk-space-5); border-radius: var(--bk-radius-md); }
  .bk-seating-grid { font-size: 20px; }

  /* Price breakdown - tighter spacing */
  .bk-price-table { font-size: 14px; }
  .bk-price-row { padding: var(--bk-space-3) 0; }

  /* Notes - smaller text */
  .bk-notes-heading { font-size: 14px; margin-bottom: var(--bk-space-2); }
  .bk-note { font-size: 12px; gap: var(--bk-space-2); }
  .bk-note__icon { width: 16px; height: 16px; }

  /* Hide the map entirely on mobile — the reserve drawer + URL still carry the trip data */
  .bk-results__rail .bk-map { display: none; }

  /* The right rail wrapper becomes a fixed bottom drawer instead of inline content.
     Override the desktop's `top: calc(56px + ...)` by explicitly setting top: auto.
     Drawer keeps just the essentials: vehicle name + price + Reserve CTA. */
  .bk-results__rail {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    z-index: 30;
    background: transparent;
    border-top: none;
    box-shadow: none;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    max-height: none;
    overflow: visible;
  }
  .bk-results__rail .bk-reserve {
    display: block;
    gap: 0;
  }
  .bk-results__rail .bk-reserve__body {
    /* Full-width bar flush to screen edges */
    padding: 12px 16px 14px;
    border: 0;
    border-radius: 0;
    box-shadow: 0 -8px 24px rgba(15,19,25,0.12);
  }
  /* Hide map (already done above) + book-for options + apply offer + trust icons in drawer.
     !important needed because the targeted divs use inline `display: flex` which would otherwise win. */
  .bk-results__rail .bk-reserve__option,
  .bk-results__rail .bk-reserve__body > div[style*="margin-top"] {
    display: none !important;
  }
  .bk-results__rail > div[style*="trust"],
  .bk-results__rail > div:not(.bk-reserve) {
    display: none !important;
  }
  .bk-results__rail .bk-reserve__header {
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 0;
  }
  .bk-results__rail .bk-reserve__name { font-size: 14px; line-height: 1.2; }
  .bk-results__rail .bk-reserve__subtitle { display: none; }
  .bk-results__rail .bk-reserve__price { font-size: 18px; line-height: 1; }
  .bk-results__rail .bk-reserve__footer { display: none; }
  .bk-results__rail .bk-reserve__cta {
    height: 44px;
    margin-top: 0;
    font-size: 15px;
    width: 100%;
  }
}

/* Extra small phones (iPhone SE, older Android) - reduce drawer even more */
@media (max-width: 374px) {
  .bk-results__inner {
    padding: var(--bk-space-4) var(--bk-space-3) calc(var(--bk-space-10) + 85px);
    gap: var(--bk-space-4);
  }
  .bk-experience-heading { font-size: 18px !important; line-height: 24px !important; margin: 0 0 6px 0 !important; }
  .bk-vhero-tagline { font-size: 0.9375rem; }
  .bk-section-h { font-size: 18px; line-height: 26px; }
  .bk-pick-row { gap: var(--bk-space-2); }
  .bk-pick {
    flex-basis: 178px;
    padding: 4px;
    gap: 4px;
  }
  .bk-pick__media { height: 108px !important; border-radius: 12px; }
  .bk-pick__body { padding: 2px 1px 1px; }
  .bk-pick__head { gap: 2px; margin-bottom: 1px; }
  .bk-pick__badge {
    top: 4px;
    left: 4px;
    padding: 2px 5px 2px 4px;
    font-size: 8px;
    gap: 2px;
    border-radius: 3px;
  }
  .bk-pick__badge svg { width: 9px; height: 9px; }
  .bk-results__rail .bk-reserve__body {
    padding: 10px 12px 12px;
  }
  .bk-results__rail .bk-reserve__header {
    padding-bottom: 4px;
    margin-bottom: 6px;
  }
  .bk-results__rail .bk-reserve__name { font-size: 12px; }
  .bk-results__rail .bk-reserve__price { font-size: 15px; }
  .bk-results__rail .bk-reserve__cta {
    height: 40px;
    font-size: 14px;
  }
  .bk-luggage-tab { font-size: 11px; padding: 8px 10px; min-height: 38px; }
  .bk-included__item { font-size: 12px; }
  .bk-included__icon { width: 36px; height: 36px; }
  .bk-included__icon svg { width: 16px; height: 16px; }

  /* Extra small adjustments */
  .bk-pick__name { font-size: 12px; }
  .bk-pick__price { font-size: 12px; }
  .bk-pick__meta { gap: 4px; }
  .bk-vhero { aspect-ratio: 16 / 10; border-radius: 10px; }
  .bk-vhero img { border-radius: 10px; }
  .bk-luggage-photo { aspect-ratio: 4 / 3; }
  .bk-price-table { font-size: 13px; }
  .bk-note { font-size: 11px; }
}

/* Short screens (landscape or very compact phones) - minimize drawer */
@media (max-height: 600px) and (max-width: 600px) {
  .bk-results__inner {
    padding-bottom: calc(var(--bk-space-8) + 70px);
  }
  .bk-results__rail .bk-reserve__body {
    padding: 8px 12px 10px;
  }
  .bk-results__rail .bk-reserve__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0;
    margin-bottom: 6px;
  }
  .bk-results__rail .bk-reserve__name { font-size: 12px; }
  .bk-results__rail .bk-reserve__price { font-size: 14px; }
  .bk-results__rail .bk-reserve__cta {
    height: 36px;
    font-size: 13px;
  }
}


/* ==========================================================================
   24. Vehicle picker — premium-style horizontal cards
   ========================================================================== */

.bk-experience-heading {
  font-family: var(--bk-font-display);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.bk-pick-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  padding: 4px 2px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.bk-pick-row::-webkit-scrollbar { display: none; }

/* Vehicle picker carousel */
.bk-pick-carousel { position: relative; }
.bk-pick-carousel__nav {
  position: absolute;
  top: 46%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bk-white);
  border: 1px solid var(--bk-border);
  box-shadow: var(--bk-shadow-md);
  color: var(--bk-forest);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background var(--bk-tx-base), color var(--bk-tx-base), border-color var(--bk-tx-base), opacity var(--bk-tx-base);
}
.bk-pick-carousel__nav:hover { background: var(--bk-forest); color: var(--bk-white); border-color: var(--bk-forest); }
.bk-pick-carousel__nav--prev { left: -26px; }
.bk-pick-carousel__nav--next { right: -26px; }
.bk-pick-carousel__nav:disabled { opacity: 0.3; pointer-events: none; }
.bk-pick-carousel__nav[x-cloak] { display: none !important; }

.bk-pick-dots { display: none !important; }
.bk-pick-dots[x-cloak] { display: none !important; }
@media (max-width: 768px) {
  .bk-pick-carousel__nav { display: none !important; }
  .bk-pick-dots {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: calc(100% + (var(--bk-space-4) * 2));
    max-width: calc(100% + (var(--bk-space-4) * 2));
    min-width: 0;
    box-sizing: border-box;
    gap: clamp(10px, 2.8vw, 16px);
    margin: 12px calc(-1 * var(--bk-space-4)) 0;
    padding: 7px clamp(12px, 4vw, 22px);
    border-radius: 999px;
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(15,19,25,0.08);
    box-shadow: 0 10px 24px rgba(15,19,25,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.34s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.34s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
.bk-pick-dots__track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 2.2vw, 12px);
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
.bk-pick-dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(15,19,25,0.18); cursor: pointer;
  transition: background 0.34s cubic-bezier(0.22, 1, 0.36, 1), transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), width 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.bk-pick-dots__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(245,240,232,0.92) 100%);
  color: var(--bk-forest);
  cursor: pointer;
  transition: background 0.34s cubic-bezier(0.22, 1, 0.36, 1), color 0.34s cubic-bezier(0.22, 1, 0.36, 1), transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow:
    inset 0 0 0 1px rgba(26,58,50,0.10),
    0 6px 14px rgba(15,19,25,0.08);
}
.bk-pick-dots__nav:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(240,233,224,0.98) 100%);
  color: #16332c;
  transform: translateY(-1px);
}
.bk-pick-dots__nav:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.bk-pick-dots__nav[x-cloak] { display: none !important; }
.bk-pick-dot:hover { background: rgba(15,19,25,0.34); }
.bk-pick-dot--active {
  background: linear-gradient(90deg, #1a3a32 0%, #284b42 100%);
  transform: scale(1.02);
  width: 26px;
  border-radius: 999px;
}

.bk-pick {
  flex: 0 0 277px;
  scroll-snap-align: start;
  background: var(--bk-white);
  border: 3px solid transparent;
  border-radius: 16px;
  padding: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.12s ease-out, box-shadow 0.12s ease-out, transform 0.1s ease-out;
  overflow: hidden;
  box-shadow: 0 2px 8px #060a0d1f;
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.bk-pick:hover:not(.bk-pick--selected) {
  border-color: #d1d5db;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.bk-pick:active:not(.bk-pick--selected) {
  transform: scale(0.98);
}

.bk-pick--selected,
.bk-pick--selected:hover {
  border-color: #0f63bd !important;
  box-shadow: 0 2px 8px rgba(15, 99, 189, 0.2) !important;
}

.bk-pick__media {
  height: 283px;                              /* 30% shorter than 404px */
  border-radius: 12px;                        /* softly rounded image, concentric with the 16px card */
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Promote to its own layer so the rounded `overflow:hidden` reliably clips the per-vehicle
     transformed/scaled <img> — without this, WebKit/iOS lets the image's square corners poke
     past the rounded edge, so cards looked clipped by different amounts. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* No colored backdrop — the vehicle image sits on the card's neutral (white) surface. */

.bk-pick__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;                        /* Show full vehicle */
  object-position: center;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}

/* Vehicle card badges - "Most Popular", "Best for Groups" */
.bk-pick__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
}

.bk-pick__badge svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Most Popular - warm orange/gold gradient */
.bk-pick__badge--star {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.92) 0%, rgba(234, 88, 12, 0.92) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
}

.bk-pick__badge--star svg {
  color: #fef3c7;
}

/* Best for Groups - cool teal/emerald gradient */
.bk-pick__badge--users {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.92) 0%, rgba(16, 185, 129, 0.92) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.35);
}

.bk-pick__badge--users svg {
  color: #d1fae5;
}

/* Hover effect handled by JavaScript for dynamic scaling */

.bk-pick__body {
  padding: 8px;
  background: var(--bk-white);
}

/* Stacked head: name on its own line, all-in price + note beneath. The cards are
   narrow (down to ~160px on mobile), so a side-by-side name/price row jumbles. */
.bk-pick__head {
  margin-bottom: 4px;
}

.bk-pick__name {
  display: block;
  font-family: var(--bk-font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  color: #0f1319;
}

.bk-pick__pricing {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 3px;
}

.bk-pick__price {
  font-size: 16px;
  font-weight: 500;
  color: #0f1319;
  white-space: nowrap;
}

.bk-pick__price-note {
  font-size: 11px;
  color: var(--bk-ink-muted);
  white-space: nowrap;
}

.bk-pick__meta {
  display: flex;
  gap: 12px;
  font-size: 14px;
  color: #6e6e73;
}

.bk-pick__meta-item { display: inline-flex; align-items: center; gap: 4px; }
.bk-pick__meta-item svg { width: 20px; height: 20px; color: #0f1319; }

@media (max-width: 768px) {
  .bk-pick-row {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(-1 * var(--bk-space-4));
    margin-right: calc(-1 * var(--bk-space-4));
    padding: 0 var(--bk-space-4);
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    gap: var(--bk-space-3);
  }

  .bk-pick {
    /* Fluid width: scales continuously with the screen (~2 cards + a peek) instead of a
       fixed px that jumps at breakpoints — so the picker fits any device. */
    flex: 0 0 clamp(150px, 46vw, 220px);
    width: clamp(150px, 46vw, 220px);
    min-width: 0;
    max-width: none;
    min-height: 272px;
    padding: 5px;
    gap: 5px;
    touch-action: pan-x;
  }

  .bk-pick__media {
    flex: 1 1 auto;
    min-height: 120px;
    height: auto !important;
    border-radius: 12px;
  }

  .bk-pick__body {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    padding: 3px 2px 2px;
  }
  .bk-pick__head { gap: 3px; margin-bottom: 2px; }
  .bk-pick__name,
  .bk-pick__price { font-size: 12px; }
  .bk-pick__meta { font-size: 11px; gap: 5px; margin-top: 1px; }
  .bk-pick__meta-item svg { width: 14px; height: 14px; }
}

@media (max-width: 374px) {
  .bk-pick-dots {
    width: calc(100% + (var(--bk-space-3) * 2));
    max-width: calc(100% + (var(--bk-space-3) * 2));
    margin-left: calc(-1 * var(--bk-space-3));
    margin-right: calc(-1 * var(--bk-space-3));
  }

  .bk-pick-row {
    margin-left: calc(-1 * var(--bk-space-3));
    margin-right: calc(-1 * var(--bk-space-3));
    padding: 0 var(--bk-space-3);
    gap: var(--bk-space-2);
  }

  .bk-pick {
    /* Width is governed by the fluid clamp() in the ≤768 rule above (≈172px here at 374px,
       scaling down to 150px on the smallest phones) — no fixed override so it stays fluid. */
    min-height: 248px;
    padding: 4px;
    gap: 4px;
  }

  .bk-pick__media {
    flex: 1 1 auto;
    min-height: 108px;
    height: auto !important;
    border-radius: 12px;
  }

  .bk-pick__body {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    padding: 2px 1px 1px;
  }
  .bk-pick__head { gap: 2px; margin-bottom: 1px; }
  .bk-pick__meta { gap: 4px; margin-top: 1px; }

  .bk-pick--selected::after {
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    font-size: 9px;
  }
}

/* Anchor link below the row */
.bk-explore-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--bk-text-xs);
  color: var(--bk-forest);
  font-weight: 500;
  margin-bottom: var(--bk-space-2);
}

.bk-explore-link:hover { color: var(--bk-forest); }


/* ==========================================================================
   25. Sticky vehicle picker (compact bar that appears on scroll)
   ========================================================================== */

/* Sticky quick-switch slider (appears once you scroll past the main cards) */
.bk-sticky-carousel {
  position: sticky;
  top: 72px;
  z-index: 5;
  margin-bottom: var(--bk-space-6);
  /* Visibility (display) is driven by x-show; the enter/leave classes below animate it.
     A display:none↔block class toggle can't transition the leave, which made it only
     animate on scroll-down. */
}
.bk-sticky-tx { transition: opacity var(--bk-tx-base), transform var(--bk-tx-base); }
.bk-sticky-hidden { opacity: 0; transform: translateY(-8px); }
.bk-sticky-shown { opacity: 1; transform: translateY(0); }
.bk-sticky-carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bk-white); border: 1px solid var(--bk-border);
  box-shadow: var(--bk-shadow-md); color: var(--bk-forest);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 6;
  transition: background var(--bk-tx-base), color var(--bk-tx-base), border-color var(--bk-tx-base), opacity var(--bk-tx-base);
}
.bk-sticky-carousel__nav:hover { background: var(--bk-forest); color: var(--bk-white); border-color: var(--bk-forest); }
.bk-sticky-carousel__nav--prev { left: -12px; }
.bk-sticky-carousel__nav--next { right: -12px; }
.bk-sticky-carousel__nav:disabled { opacity: 0; pointer-events: none; }
.bk-sticky-carousel__nav[x-cloak] { display: none !important; }

.bk-sticky-picker {
  display: flex;
  gap: 1px;
  background: var(--bk-border);
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.bk-sticky-picker::-webkit-scrollbar { display: none; }

.bk-sticky-pick {
  flex: 1 0 150px;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 16px;
  background: var(--bk-white);
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background var(--bk-tx-fast), color var(--bk-tx-fast);
}

.bk-sticky-pick:hover { background: var(--bk-cream); }
.bk-sticky-pick--selected { background: var(--bk-forest); }
.bk-sticky-pick--selected .bk-sticky-pick__name { color: var(--bk-cream); }
.bk-sticky-pick--selected .bk-sticky-pick__price { color: #c8c2b4; }

.bk-sticky-pick__name { font-size: 13px; font-weight: 500; color: var(--bk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-sticky-pick__price { font-size: 12px; font-weight: 600; color: var(--bk-ink-muted); white-space: nowrap; }


/* ==========================================================================
   26. Vehicle hero (the big showcase below the picker)
   ========================================================================== */

.bk-vhero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 0;
  aspect-ratio: 16 / 9;
  display: block;
  box-shadow: 0 2px 8px #060a0d1f;
  max-width: 880px;
}

/* Gallery prev/next arrows (overlaid on the vehicle photo) */
.bk-vhero__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); border: 1px solid var(--bk-border);
  box-shadow: var(--bk-shadow-md); color: var(--bk-forest);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3;
  transition: background var(--bk-tx-base), color var(--bk-tx-base), transform var(--bk-tx-base);
}
.bk-vhero__nav:hover { background: var(--bk-forest); color: var(--bk-white); }
.bk-vhero__nav:active { transform: translateY(-50%) scale(0.94); }
.bk-vhero__nav--prev { left: 14px; }
.bk-vhero__nav--next { right: 14px; }
.bk-vhero__nav[x-cloak] { display: none !important; }

.bk-vhero img {
  width: 100%;
  height: 100%;
  object-fit: cover;                          /* Fill frame completely, crop if needed */
  object-position: center;
  border-radius: 16px;                        /* Match frame corners */
}

/* Carousel images - fade transition between slides */
.bk-vhero__img {
  opacity: 0;
  pointer-events: none;
}
.bk-vhero__img--active {
  opacity: 1;
  pointer-events: auto;
}

.bk-vhero__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--bk-space-5) var(--bk-space-6);
  background: linear-gradient(0deg, rgba(15,19,25,0.55), transparent);
  color: var(--bk-cream);
  font-size: var(--bk-text-sm);
  font-weight: 500;
}

.bk-vhero__dots {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.bk-vhero__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
}
.bk-vhero__dot:hover {
  background: rgba(255,255,255,0.7);
  transform: scale(1.2);
}

.bk-vhero__dot--active {
  background: var(--bk-cream);
  width: 18px;
  border-radius: 999px;
}
.bk-vhero__dot--active:hover {
  transform: none;
}

.bk-vhero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  color: var(--bk-ink);
  box-shadow: var(--bk-shadow-sm);
}

.bk-vhero__nav--prev { left: 16px; }
.bk-vhero__nav--next { right: 16px; }

.bk-vhero-tagline {
  text-align: center;
  font-family: var(--bk-font-display);
  font-size: 14px;
  line-height: 1.4;
  color: #6e6e73;
  max-width: 52ch;
  margin: 0 auto;
  font-style: italic;
}


/* ==========================================================================
   27. Section divider (horizontal rule with breathing room)
   ========================================================================== */

.bk-divider {
  border: 0;
  height: 1px;
  background: #eef1f3;
  margin: 0;
}


/* ==========================================================================
   28. "What's included" 6-icon grid (vehicle-specific, 3x2)
   ========================================================================== */

.bk-section-h {
  font-family: var(--bk-font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: 0;
}

.bk-included {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 24px;
}

@media (max-width: 720px) {
  .bk-included { grid-template-columns: 1fr 1fr; }
}

.bk-included__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bk-included__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bk-radius-md);
  background: var(--bk-forest-tint);
  color: var(--bk-forest);
}

.bk-included__icon svg { width: 20px; height: 20px; }

.bk-included__text {
  font-size: 13px;
  color: #0f1319;
  line-height: 1.35;
}


/* ==========================================================================
   29. Capacity section with luggage / seating tabs + sub-tabs
   ========================================================================== */

.bk-capacity__tabs {
  display: inline-flex;
  gap: var(--bk-space-5);
  border-bottom: 1px solid var(--bk-border);
  margin-bottom: var(--bk-space-4);
}

.bk-capacity__tab {
  padding: 12px 4px;
  min-height: 44px;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: var(--bk-text-sm);
  color: var(--bk-ink-muted);
  cursor: pointer;
  position: relative;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition: color 0.12s ease-out;
}

.bk-capacity__tab:active {
  opacity: 0.7;
}

.bk-capacity__tab--active {
  color: var(--bk-ink);
}

.bk-capacity__tab--active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--bk-forest);
}

.bk-capacity__hint {
  font-size: var(--bk-text-xs);
  color: var(--bk-ink-muted);
  line-height: 1.5;
  margin-bottom: var(--bk-space-4);
}

/* ---- Capacity intake: Seating / Luggage steppers (one per row) ---- */
.bk-capacity {
  background: var(--bk-white);
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-lg);
  overflow: hidden;
}

.bk-capacity__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bk-space-4);
  padding: var(--bk-space-5) var(--bk-space-6);
}

.bk-capacity__row + .bk-capacity__row { border-top: 1px solid var(--bk-border); }

.bk-capacity__info { display: flex; align-items: center; gap: var(--bk-space-4); min-width: 0; }

.bk-capacity__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bk-radius-md);
  background: var(--bk-forest-tint);
  color: var(--bk-forest);
}
.bk-capacity__icon svg { width: 22px; height: 22px; }

.bk-capacity__text { display: flex; flex-direction: column; gap: 2px; }
.bk-capacity__name { font-family: var(--bk-font-display); font-size: var(--bk-text-lg); color: var(--bk-ink); line-height: 1.2; }
.bk-capacity__sub { font-size: var(--bk-text-sm); color: var(--bk-ink-muted); }

.bk-stepper { display: inline-flex; align-items: center; gap: var(--bk-space-2); flex-shrink: 0; touch-action: manipulation; }

.bk-stepper__btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--bk-border-strong);
  background: var(--bk-white);
  color: var(--bk-forest);
  cursor: pointer;
  /* Rapid +/- taps were being read as a double-tap-to-zoom on mobile; manipulation disables
     double-tap-zoom (and the 300ms tap delay) for just these controls. The rest keeps tapping crisp. */
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--bk-tx-base), color var(--bk-tx-base), border-color var(--bk-tx-base), opacity var(--bk-tx-base);
}
.bk-stepper__btn svg { width: 18px; height: 18px; }
.bk-stepper__btn:hover:not(:disabled) { background: var(--bk-forest); color: var(--bk-white); border-color: var(--bk-forest); }
.bk-stepper__btn:disabled { opacity: 0.35; cursor: not-allowed; }

.bk-stepper__value {
  min-width: 40px;
  text-align: center;
  font-family: var(--bk-font-display);
  font-size: var(--bk-text-xl);
  color: var(--bk-ink);
  font-variant-numeric: tabular-nums;
  user-select: none;
  -webkit-user-select: none;
}

.bk-capacity__note {
  margin: 0;
  padding: var(--bk-space-4) var(--bk-space-6);
  border-top: 1px solid var(--bk-border);
  background: var(--bk-cream);
  font-size: var(--bk-text-sm);
  color: var(--bk-ink-muted);
  line-height: 1.5;
}

.bk-luggage-tabs {
  display: inline-flex;
  background: var(--bk-cream);
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-md);
  padding: 3px;
  margin-bottom: var(--bk-space-4);
  gap: 2px;
}

.bk-luggage-tab {
  padding: 10px 14px;
  min-height: 44px;
  background: transparent;
  border: 0;
  border-radius: var(--bk-radius-sm);
  font-size: var(--bk-text-sm);
  font-weight: 500;
  color: var(--bk-ink-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease-out, color 0.12s ease-out, transform 0.1s ease-out;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.bk-luggage-tab:active {
  transform: scale(0.97);
}

.bk-luggage-tab--active {
  background: var(--bk-forest);
  color: var(--bk-cream);
}

.bk-luggage-photo {
  background: var(--bk-cream-warm);
  border-radius: var(--bk-radius-md);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  position: relative;
}

/* Stack all images - hidden by default, instant switch via opacity */
.bk-luggage-photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center center;
  opacity: 0;
  transition: opacity 0.15s ease-out;
  pointer-events: none;
  will-change: opacity;                        /* GPU acceleration hint */
  -webkit-backface-visibility: hidden;         /* Prevent flickering on iOS */
  backface-visibility: hidden;
}

.bk-luggage-photo__img--active {
  opacity: 1;
  pointer-events: auto;
}

/* Placeholder mode when image is missing — shows an icon */
.bk-luggage-photo__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--bk-ink-muted);
  font-size: var(--bk-text-sm);
  text-align: center;
  padding: 24px;
}

.bk-luggage-photo__placeholder svg { width: 48px; height: 48px; opacity: 0.4; }

/* Seating diagram */
.bk-seating-diagram {
  background: var(--bk-cream-warm);
  border-radius: var(--bk-radius-lg);
  padding: var(--bk-space-8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bk-seating-grid {
  display: grid;
  gap: 8px;
  font-size: 24px;
  color: var(--bk-forest);
}

/* ==========================================================================
   30. Price breakdown
   ========================================================================== */

.bk-price-table {
  font-size: var(--bk-text-base);
}

.bk-price-row {
  display: flex;
  justify-content: space-between;
  padding: var(--bk-space-4) 0;
  border-bottom: 1px solid var(--bk-border);
}

.bk-price-row:last-child { border-bottom: 0; }

.bk-price-row__label { color: var(--bk-ink-secondary); }
.bk-price-row__value { color: var(--bk-ink); font-variant-numeric: tabular-nums; }


/* ==========================================================================
   31. Disclaimers ("Please note:")
   ========================================================================== */

.bk-notes-heading {
  font-size: var(--bk-text-base);
  font-weight: 600;
  color: var(--bk-ink);
  margin-bottom: var(--bk-space-3);
}

.bk-notes {
  display: flex;
  flex-direction: column;
  gap: var(--bk-space-4);
}

.bk-note {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--bk-space-3);
  align-items: start;
  font-size: var(--bk-text-sm);
  color: var(--bk-ink-secondary);
  line-height: 1.55;
}

.bk-note__icon {
  width: 18px;
  height: 18px;
  color: var(--bk-ink-muted);
  margin-top: 2px;
}


/* ==========================================================================
   32. Live Google Map container (right rail top)
   ========================================================================== */

.bk-map {
  width: 100%;
  height: 58vh;                               /* Pure viewport-relative - scales with zoom */
  background: var(--bk-cream-warm);
  position: relative;
  border: 1px solid #eef1f3;
  border-radius: 12px;
  overflow: hidden;
}

/* Route estimate — premium glass bar pinned to the top of the map (point-to-point only).
   Reads the live Google route already drawn on the map: distance + estimated drive time. */
.bk-map__estimate {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 20px;
  background: rgba(15, 19, 25, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(15, 19, 25, 0.35);
  color: #fff;
  white-space: nowrap;
  max-width: calc(100% - 28px);
}
.bk-map__estimate-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.bk-map__estimate-item > svg {
  width: 18px;
  height: 18px;
  color: var(--bk-sand-light);                /* the warm accent */
  flex-shrink: 0;
}
.bk-map__estimate-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.bk-map__estimate-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.55);
}
.bk-map__estimate-value {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.bk-map__estimate-sep {
  width: 1px;
  align-self: stretch;
  margin: 2px 0;
  background: rgba(255, 255, 255, 0.16);
}
@media (max-width: 1023px) {
  .bk-map__estimate { gap: 14px; padding: 9px 16px; top: 12px; }
  .bk-map__estimate-value { font-size: 13px; }
}

/* Hide Google Maps gesture/scroll overlay messages */
.bk-map .gm-style-mot,
.bk-map .gm-style > div > div[style*="background-color: rgba(0, 0, 0"],
.bk-map .gm-err-message {
  display: none !important;
}

.bk-map__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--bk-ink-muted);
  font-size: var(--bk-text-sm);
  text-align: center;
  padding: 24px;
}

.bk-map__placeholder svg { width: 32px; height: 32px; opacity: 0.5; }

/* Custom map pin labels (rendered inside map via Google Maps) */
.bk-map-pin-label {
  background: var(--bk-ink);
  color: var(--bk-cream);
  padding: 4px 8px;
  border-radius: 4px;
  font-family: var(--bk-font-body);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}


/* ==========================================================================
   33. Performance Optimizations
   ========================================================================== */

/* GPU acceleration for animated elements */
.bk-header,
.bk-modal,
.bk-modal-overlay,
.bk-custom-dropdown,
.bk-card,
.bk-btn,
.bk-booking__submit,
.bk-trip-pill,
[x-show],
[x-transition] {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Below-fold content optimization */
.bk-section:not(:first-of-type) {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* Optimize rendering */
.bk-body {
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================================
   34. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .bk-body *,
  .bk-body *::before,
  .bk-body *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Fill-ins: classes referenced in blades but previously undefined
   (audited 2026-06 — account/rides, contact, services, booking).
   ============================================================ */

/* Buttons — missing modifiers (base .bk-btn already defined) */
.bk-btn--outline {
  background: transparent;
  color: var(--bk-forest);
  border: 1px solid var(--bk-border-strong);
}
.bk-btn--outline:hover { background: var(--bk-cream-dark); border-color: var(--bk-ink-muted); }
.bk-btn--disabled,
.bk-btn:disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; }

/* Small-text utility (class form of the --bk-text-sm token) */
.bk-text-sm { font-size: var(--bk-text-sm); }

/* Inline form-validation message */
.bk-form-error { display: block; margin-top: 6px; color: #dc2626; font-size: var(--bk-text-sm); }

/* Status badges (account "My Rides", etc.) */
.bk-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--bk-radius-pill);
  font-size: var(--bk-text-xs); font-weight: 600; line-height: 1.4;
  text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--bk-cream-dark); color: var(--bk-ink-secondary);
}
.bk-badge--lg { padding: 6px 16px; font-size: var(--bk-text-sm); letter-spacing: 0.02em; }
.bk-badge--success { background: #e6f4ea; color: #1e7a3c; }
.bk-badge--warning { background: #fef3c7; color: #92400e; }
.bk-badge--info    { background: #e0edff; color: #1e40af; }
.bk-badge--error   { background: #fde8e8; color: #b91c1c; }

/* Services detail panel base (children __num/__title/etc. already styled) */
.bk-svc-detail { display: flex; flex-direction: column; gap: var(--bk-space-3); }

/* NOTE: .bk-mapmarker--pickup / --dropoff are intentionally left unstyled.
   The marker is a white card (.bk-mapmarker, background:#fff) with an orange
   time pill — setting a container background here floods the whole card
   (orange for pickup, dark green for dropoff). Do not add a background. */

/* Header phone link emphasis */
.bk-header__phone { font-weight: 600; }

/* Responsive: stack the inline-grid sections on mobile (overrides inline grid) */
@media (max-width: 768px) {
  .bk-routes-grid,
  .bk-stats-grid,
  .bk-contact-form-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   Hero — left-aligned editorial variant + NYC trust row.
   De-risks the centered single-headline + centered-booking-bar pattern.
   ============================================================ */
.bk-hero__content--left { text-align: left; }
.bk-hero__content--left .bk-hero__title,
.bk-hero__content--left .bk-hero__subtitle { margin-left: 0; margin-right: 0; max-width: 22ch; }
.bk-hero__content--left .bk-hero__subtitle { max-width: 600px; }
.bk-hero__content--left .bk-eyebrow { display: inline-block; margin-bottom: var(--bk-space-4); }
.bk-hero__content--left .bk-booking { margin-left: 0; align-items: flex-start; }

.bk-hero__trust {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: var(--bk-space-3) var(--bk-space-6);
  margin: 0 0 var(--bk-space-10); padding: 0;
  color: rgba(255,255,255,0.9); font-size: var(--bk-text-sm);
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.bk-hero__trust li { display: flex; align-items: center; gap: 6px; }
.bk-hero__trust strong { color: var(--bk-sand-light); font-weight: 600; }

@media (max-width: 540px) {
  .bk-hero__trust { display: none; }
}

/* ============================================================
   Footer closing CTA (consolidated from the standalone forest band)
   ============================================================ */
.bk-footer__cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bk-space-8); flex-wrap: wrap;
  padding-bottom: var(--bk-space-12);
  margin-bottom: var(--bk-space-12);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.bk-footer__cta-title {
  font-family: var(--bk-font-display);
  font-size: var(--bk-text-3xl); line-height: 1.1;
  color: var(--bk-cream); margin: 0 0 var(--bk-space-2);
}
.bk-footer__cta-sub { color: rgba(251,248,242,0.7); font-size: var(--bk-text-base); margin: 0; max-width: 520px; }
.bk-footer__cta-actions { display: flex; gap: var(--bk-space-4); flex-wrap: wrap; flex-shrink: 0; }

@media (max-width: 700px) {
  .bk-footer__cta { flex-direction: column; align-items: flex-start; gap: var(--bk-space-5); }
  .bk-footer__cta-actions { width: 100%; }
  .bk-footer__cta-actions .bk-btn { flex: 1; justify-content: center; }
}


/* ==========================================================================
   Form primitives (canonical)
   Used by the Blade components <x-field>, <x-select>, <x-textarea>,
   <x-checkbox>, <x-form-panel>. Single source of truth so pages stop
   reinventing inputs in local <style> blocks.
   ========================================================================== */

.bk-field { margin-bottom: var(--bk-space-5); }
.bk-field--flush { margin-bottom: 0; }

.bk-label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--bk-ink-secondary);
  margin-bottom: 6px;
}
.bk-label__req { color: var(--bk-forest); }

.bk-input,
.bk-select,
.bk-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  font-family: var(--bk-font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--bk-ink);
  background: var(--bk-white);
  border: 1px solid var(--bk-border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.bk-input::placeholder,
.bk-textarea::placeholder { color: var(--bk-ink-faint); }

.bk-input:focus,
.bk-select:focus,
.bk-textarea:focus {
  border-color: var(--bk-forest);
  box-shadow: 0 0 0 3px rgba(26, 58, 50, 0.10);
}

.bk-input:disabled,
.bk-input--readonly {
  background: var(--bk-cream-deep);
  color: var(--bk-ink-muted);
  cursor: not-allowed;
}

.bk-input--error,
.bk-select--error,
.bk-textarea--error { border-color: #b42318; }
.bk-input--error:focus,
.bk-select--error:focus,
.bk-textarea--error:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12); }

.bk-textarea { resize: vertical; min-height: 96px; }

/* Custom chevron — no native OS dropdown arrow */
.bk-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233a3f4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}

.bk-field__hint { display: block; font-size: 12.5px; color: var(--bk-ink-muted); margin-top: 6px; }
.bk-field__error { display: block; font-size: 12.5px; color: #b42318; margin-top: 6px; }

.bk-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--bk-ink);
}
.bk-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--bk-forest);
  flex-shrink: 0;
}

/* <x-field> nested inside the .bk-form-row grid: let the row own vertical
   spacing so fields don't double up margins. */
.bk-form-row > .bk-field { margin-bottom: 0; }


/* ==========================================================================
   Flash / alert (used by the <x-flash> component)
   ========================================================================== */

.bk-flash {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  background: var(--bk-white);
  border: 1px solid var(--bk-border);
  box-shadow: var(--bk-shadow-sm);
  color: var(--bk-ink);
}
.bk-flash__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  color: #fff;
}
.bk-flash--success .bk-flash__icon { background: var(--bk-forest); }
.bk-flash--error .bk-flash__icon { background: #b42318; }
.bk-flash--error { border-color: #e7c3bf; }
.bk-flash--info .bk-flash__icon { background: var(--bk-forest); }
.bk-flash--info { border-color: rgba(26, 58, 50, 0.18); }
.bk-flash__text { flex: 1; }
.bk-flash__text strong { font-weight: 600; }

/* Floating toast presentation */
.bk-flash--toast {
  position: fixed;
  top: calc(var(--bk-header-h) + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2147483000;
  min-width: 260px;
  max-width: calc(100vw - 32px);
  box-shadow: var(--bk-shadow-lg);
  cursor: pointer;
  animation: bkFlashIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.bk-flash--toast.bk-flash--leaving { animation: bkFlashOut 0.4s ease forwards; }
@keyframes bkFlashIn {
  from { opacity: 0; transform: translate(-50%, -18px) scale(0.98); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes bkFlashOut {
  from { opacity: 1; transform: translate(-50%, 0) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -18px) scale(0.98); }
}
@media (prefers-reduced-motion: reduce) {
  .bk-flash--toast { animation: none; }
}

/* ==========================================================================
   Legal content (Privacy, Terms) — readable single-column prose
   ========================================================================== */
.bk-legal {
  max-width: 760px;        /* ~70-character measure for comfortable reading */
  margin: 0 auto;
  color: var(--bk-ink-secondary, #555);
}
.bk-legal__updated {
  font-size: var(--bk-text-xs, 0.8rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bk-ink-muted, #8a857c);
  margin: 0 0 var(--bk-space-6);
}
.bk-legal__intro {
  font-size: var(--bk-text-lg);
  line-height: 1.7;
  color: var(--bk-ink, #1a1a1a);
  margin: 0 0 var(--bk-space-8);
}
.bk-legal h2 {
  font-family: var(--bk-font-display, Fraunces), Georgia, serif;
  font-weight: 400;
  font-size: var(--bk-text-2xl);
  line-height: 1.2;
  color: var(--bk-forest, #1a3a2f);
  margin: var(--bk-space-10) 0 var(--bk-space-4);
}
.bk-legal p {
  font-size: var(--bk-text-base);
  line-height: 1.75;
  margin: 0 0 var(--bk-space-4);
}
.bk-legal ul {
  margin: 0 0 var(--bk-space-4);
  padding-left: var(--bk-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--bk-space-2);
}
.bk-legal li {
  font-size: var(--bk-text-base);
  line-height: 1.7;
}
.bk-legal strong { color: var(--bk-ink, #1a1a1a); font-weight: 600; }
.bk-legal a { color: var(--bk-forest); text-decoration: underline; text-underline-offset: 2px; }
.bk-legal a:hover { color: var(--bk-forest); }
.bk-legal__btn {
  display: inline-flex;
  align-items: center;
  margin: var(--bk-space-2) 0 var(--bk-space-4);
  padding: 10px 20px;
  font-family: inherit;
  font-size: var(--bk-text-sm);
  font-weight: 600;
  color: var(--bk-forest, #1a3a2f);
  background: var(--bk-white, #fff);
  border: 1px solid var(--bk-border-strong, #d3cdc1);
  border-radius: var(--bk-radius-pill, 999px);
  cursor: pointer;
  transition: background var(--bk-tx-fast, .15s), border-color var(--bk-tx-fast, .15s);
}
.bk-legal__btn:hover { background: var(--bk-cream-dark, #f1ede5); border-color: var(--bk-forest, #1a3a2f); }
.bk-legal__contact {
  margin-top: var(--bk-space-4);
  padding: var(--bk-space-5) var(--bk-space-6);
  background: var(--bk-white, #fff);
  border: 1px solid var(--bk-border, #e7e2da);
  border-radius: var(--bk-radius-lg, 12px);
  line-height: 1.9;
  font-size: var(--bk-text-base);
}

/* ============================================================
   Guest identity selector — mobile compact form (sticky reserve bar)
   The mobile rail hides the full option rows by design; the identity
   selector re-appears as two compact pills + reveal fields so guest
   checkout exists on phones (where most paid traffic lands).
   ============================================================ */
@media (max-width: 600px) {
  /* Sticky-bar identity: the option ROWS stay hidden (rail design); the wrapper
     stays in flow only to host the guest fields reveal. */
  .bk-results__rail .bk-reserve__identity {
    display: block !important;
    margin-bottom: 0;
  }
  .bk-results__rail .bk-reserve__identity .bk-reserve__option--choice { display: none !important; }
  .bk-results__rail .bk-reserve__guest-fields--open { margin-bottom: 10px; }
  .bk-results__rail .bk-reserve__guest-input {
    padding: 10px 12px;
    font-size: 16px; /* >=16px prevents iOS zoom-on-focus */
  }

  /* CTA label swap: the bar header already names the vehicle + price. */
  .bk-results__rail .bk-reserve__cta-label-desktop { display: none; }
  .bk-results__rail .bk-reserve__cta-label-mobile { display: inline; }

  /* Guest-open = single-action state: primary + divider step aside. */
  .bk-results__rail .bk-reserve__cta.bk-reserve__cta--guest-open { display: none; }
  .bk-results__rail .bk-reserve__or--hidden { display: none !important; }

  /* OR divider between the two routes */
  .bk-results__rail .bk-reserve__or {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
  }
  .bk-results__rail .bk-reserve__or span { flex: 1; height: 1px; background: rgba(26, 58, 50, 0.16); }
  .bk-results__rail .bk-reserve__or em {
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: rgba(26, 58, 50, 0.55);
  }

  /* Guest CTA: equal-weight parallel path, outlined pattern (solid once active). */
  .bk-results__rail .bk-reserve__guest-cta {
    display: inline-flex;
    height: 44px;
    font-size: 15px;
    width: 100%;
  }

  /* Collapse-back link (only rendered while guest fields are open). */
  .bk-results__rail .bk-reserve__guest-link {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 4px 0 2px;
    background: none;
    border: 0;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--bk-forest);
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
}

/* ============================================================
   Guest reservation modal — centered sheet opened from the
   mobile sticky bar's "Continue as Guest" CTA.
   ============================================================ */
.bk-guest-modal {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bk-guest-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 19, 25, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.bk-guest-modal__card {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 16px;
  padding: 24px 20px 20px;
  box-shadow: 0 24px 64px rgba(15, 19, 25, 0.32);
}
.bk-guest-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--bk-ink-muted, #8a857c);
  cursor: pointer;
}
.bk-guest-modal__close:hover { background: rgba(26, 58, 50, 0.06); color: var(--bk-forest); }
.bk-guest-modal__title {
  font-family: var(--bk-font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--bk-forest);
  margin: 0 0 6px;
}
.bk-guest-modal__sub {
  font-size: 14px;
  color: var(--bk-ink-secondary, #555);
  line-height: 1.5;
  margin: 0 0 16px;
}
.bk-guest-modal__fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.bk-guest-modal__fields .bk-reserve__guest-input { font-size: 16px; } /* no iOS zoom */
.bk-guest-modal__terms,
.bk-reserve__guest-terms {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--bk-ink-muted, #8a857c);
  line-height: 1.5;
}
.bk-guest-modal__terms a,
.bk-reserve__guest-terms a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bk-guest-modal__terms--accept {
  margin-top: 12px;
  text-align: center;
}

.bk-guest-modal__error {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: #b0392f;
  line-height: 1.45;
}
.bk-guest-modal__submit { height: 48px; font-size: 15px; }
.bk-guest-modal__alt {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 4px 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--bk-forest);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}