/* Booking overlay — modal UI */
.bk-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
  background: transparent; border: none; padding: 0; margin: 0;
  max-width: 100vw; max-height: 100vh; width: 100%; height: 100%;
  opacity: 0; transition: opacity 0.3s ease;
  /* Kill double-tap-to-zoom inside the modal across all browsers
     (iOS Safari, Chrome, Firefox). 'manipulation' keeps pinch-zoom
     and normal taps but removes the 300ms double-tap zoom gesture
     — visitors trying to double-tap a quantity stepper or a date
     cell were accidentally zooming the page instead. We keep the
     viewport meta unlocked elsewhere so the rest of the page stays
     accessible. */
  touch-action: manipulation;
}
.bk-overlay * { touch-action: manipulation; }
.bk-overlay[open] { opacity: 1; }
/* Near-opaque backdrop so the page can't leak through the bit of
   viewport below the sheet on iOS Safari (sheet bottom is pinned to
   the visible viewport top of the bottom toolbar; backdrop fills the
   strip between the sheet and the layout viewport bottom). */
.bk-overlay::backdrop { background: rgba(0,0,0,0.92); }
.bk-overlay + .backdrop { background: rgba(0,0,0,0.92); }
.bk-overlay__backdrop {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.92);
}
.bk-overlay__sheet {
  position: fixed;
  /* Use the dynamic viewport (dvh) for both top and height so the
     sheet tracks iOS Safari's URL-bar collapse. With the old
     bottom:0 anchor, when the URL bar hid the visible viewport
     grew but the sheet stayed pinned to the layout viewport
     bottom — and the page underneath bled through the new strip
     at the bottom. Now top:5dvh + height:95dvh expands together
     with the visible viewport. The vh values are a fallback for
     browsers without dvh support.
     When the on-screen keyboard opens, --booking-kb-inset is the
     keyboard height; subtracting it shrinks the sheet so the
     sticky CTA stays above the keyboard. */
  top: 5vh;
  top: 5dvh;
  height: calc(95vh - var(--booking-kb-inset, 0px));
  height: calc(95dvh - var(--booking-kb-inset, 0px));
  bottom: auto;
  left: 0; right: 0;
  max-width: 520px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  background: var(--dark-2);
  border-radius: 16px 16px 0 0;
  padding: 0;
  transform: translateY(100%);
  transition: transform 0.35s ease;
  overflow: hidden;
}
.bk-overlay[open] .bk-overlay__sheet { transform: translateY(0); }

.bk-overlay__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 24px 0;
  /* Sales steps (1/2/2b) must never scroll — content is sized to fit
     the sheet. Steps 3 and 4 have form inputs; when the mobile keyboard
     opens visualViewport shrinks the sheet and the fields below the
     focused input would get clipped. Both need overflow: auto so the
     visitor can scroll to the field they're typing into. */
  overflow: hidden;
  min-height: 0;
}
#bkStep3,
#bkStep4 {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Payment screen runs hot for vertical space — summary + card fields +
   pay button + wallet need to fit on one viewport without scrolling.
   Tighten the header gap so "Your Booking Summary" sits closer to the
   PAYMENT title. (Back is absolutely positioned at the sheet top, so
   the header itself only has to clear the title.) */
#bkStep4 .bk-overlay__header {
  margin-bottom: 8px;
  padding-bottom: 8px;
}
/* Step 1 vertical rhythm — tighter spacing so the trust card + CTA
   always land above the fold on 100dvh phones. */
/* Accent the rider count inside the step 1 trust card so the number
   carries the eye. Inherits its weight + uppercase from the parent
   <strong>, only the colour changes. */
.bk-overlay__count-accent { color: var(--accent); }

/* ── Overbooked alert (floats over the whole booking sheet) ─────────
   Sibling of .bk-overlay__sheet inside the dialog, so it sits above
   the sheet's transform context and can take up the full viewport.
   Centred card with its own backdrop. Hidden by default via the
   [hidden] attribute. */
.bk-alert {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.bk-alert[hidden] { display: none; }
.bk-alert__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.bk-alert__card {
  position: relative;
  z-index: 1;
  max-width: 440px;
  width: 100%;
  background: var(--dark-2);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 28px 22px 22px;
  text-align: center;
  box-shadow: 0 18px 48px rgba(0,0,0,0.45);
}
.bk-alert__dismiss {
  position: absolute;
  top: 8px; right: 12px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.bk-alert__dismiss:hover { color: var(--white); }
.bk-alert__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--white);
  margin: 0 0 12px;
  line-height: 1.25;
}
.bk-alert__body {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
  margin: 0 0 18px;
}
.bk-alert__body strong { color: var(--white); font-weight: 700; }
.bk-alert__actions {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.bk-alert__btn {
  flex: 1;
  border-radius: 10px;
  padding: 12px 8px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 120ms ease, transform 80ms ease;
  -webkit-tap-highlight-color: transparent;
}
.bk-alert__btn:active { transform: scale(0.98); }
.bk-alert__btn--primary { background: var(--accent); color: var(--dark); }
.bk-alert__btn--primary:hover { background: #d6f750; }
.bk-alert__btn--secondary {
  background: transparent;
  border-color: rgba(255,255,255,0.2);
  color: var(--white);
}
.bk-alert__btn--secondary:hover { background: rgba(255,255,255,0.05); }
.bk-alert__big-group {
  padding: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  text-align: center;
}
.bk-alert__big-group strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 6px;
}
.bk-alert__big-group p {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.4;
}
.bk-alert__contact {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  padding: 6px;
}
.bk-alert__contact:hover { color: var(--accent); }
.bk-alert__contact--email {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  text-decoration: underline;
  margin-top: 2px;
  padding: 4px;
}

/* Step 1 fits inside an 80dvh sheet without scrolling because the
   trust line below absorbs leftover space and the CTA cluster docks
   at the bottom. Order: header -> tagline -> includes -> price ->
   riders/date -> total -> trust -> CTA. Header margin-bottom pulled
   30% (20 -> 14) so the tagline reads closer to the rule. */
#bkStep1 .bk-overlay__header { margin-bottom: 20px; }
#bkStep1 .bk-overlay__ride-desc { margin: 4px 0 8px; font-size: 0.92rem; line-height: 1.4; }
#bkStep1 .bk-overlay__ride-includes { margin: 6px 0 6px; padding: 0; }
#bkStep1 .bk-overlay__include { gap: 6px; }
#bkStep1 .bk-overlay__price-tag { margin: 0 0 6px; font-size: 1.8rem; }
#bkStep1 .bk-overlay__fields--separated { padding-top: 22px; margin-top: 0; }
/* Sticky bottom cluster on step 1. The trust signal is a plain text
   line (no card) so the cluster stays compact and the rider/date
   pickers above don't get clipped on tighter viewports. */
#bkStep1 .bk-overlay__cta-block .bk-overlay__total {
  margin: 6px 0 6px;
  font-size: 0.9rem;
}
#bkStep1 .bk-overlay__cta-block .bk-overlay__total strong { font-size: 1.6rem; }
.bk-overlay__trust-line {
  margin: 0 0 8px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  line-height: 1.3;
}
/* Payment-options preview above the Continue → Payment CTA on step 3.
   Same small uppercase display style as the trust line so the bottom
   of every step has a consistent rhythm. */
.bk-overlay__pay-options {
  margin: 0 0 8px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  line-height: 1.3;
}
/* Hide the "WHAT'S INCLUDED" title text on step 1 to win back space —
   the four icons + labels (Premium e-bike, Helmet, Shuttle, Trail
   briefing) read just fine without the header. */
#bkStep1 .bk-overlay__includes-title { display: none; }
/* Step 1's CTA cluster used to override button padding/font and
   reassurance gap to squeeze into 80dvh. The sheet is now sized
   from visualViewport (much taller) so step 1 can use the same
   default cta-block / button / reassurance rhythm as every other
   step in the sales flow. Consistent across all five screens. */
.bk-overlay__cta-block {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  background: var(--dark-2);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
}
.bk-overlay__cta-block .btn--full {
  width: 100%;
  border-radius: var(--radius);
  padding: 20px;
  font-size: 1.15rem;
}
.bk-overlay__cta-block .bk-overlay__reassurance { margin-top: 8px; }
.bk-overlay__step--hidden { height: 0; overflow: hidden; visibility: hidden; position: absolute; }

/* ── Progress indicator ─────────────────────────────────────────────
   Five dots, one per functional step (Ride / Pickup / Home / Details
   / Pay). The active dot is the accent green; earlier completed dots
   are a faded accent; future dots are white-10. Hidden entirely on
   the confirmation step. */
.bk-overlay__progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 14px top puts the dot row's optical centre at ~y=17, matching the
     close X (top:4 + ~13 half-height = 17). 8px bottom keeps the next
     line from butting up against the dots. */
  padding: 14px 0 8px;
  flex-shrink: 0;
}
.bk-overlay__progress--hidden { display: none; }
.bk-overlay__progress-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  transition: background 180ms ease, transform 180ms ease;
}
.bk-overlay__progress-dot--done { background: rgba(200,241,53,0.5); }
.bk-overlay__progress-dot--active {
  background: var(--accent);
  transform: scale(1.35);
}

/* ── Order recap card (Step 3 + Step 4) ────────────────────────────
   Replaces the static "You're about to book the best day" filler.
   Shows the captured booking data right above the CTA so the visitor
   reviews exactly what they're committing to. */
/* Compact order recap — sized to fit alongside the form (step 3) and
   the card fields (step 4) in 80dvh without scrolling. Rows are 20px
   each, header dropped (step header already says "Almost There" /
   "Payment"), tighter padding. */
/* Air-NZ-flight-summary-style order recap. Centred tour title with a
   price/riders pill underneath, then a two-stop journey timeline
   (pickup at the top, home at the bottom) with a vertical connector
   line between the icons and the ride duration printed alongside. */
.bk-overlay__order-recap {
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  margin-top: 10px;
  font-family: var(--font-body);
  color: rgba(255,255,255,0.9);
  line-height: 1.35;
}
/* Sentence-style recap — filler in white, user picks (em) in accent
   green inline. Each line is a short sentence so they wrap cleanly
   on mobile without the recap getting tall. */
.bk-overlay__recap-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-align: center;
}
.bk-overlay__recap-line {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.01em;
}
.bk-overlay__recap-line + .bk-overlay__recap-line { margin-top: 6px; }
.bk-overlay__recap-pick {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Header: tour title centred, then a 2-up Date/Riders facts row in
   accent green so the visitor's two key choices read at a glance. */
.bk-overlay__journey-head {
  text-align: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255,255,255,0.12);
}
.bk-overlay__journey-head > strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 8px;
}
.bk-overlay__journey-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}
.bk-overlay__journey-fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.bk-overlay__journey-fact > span {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.bk-overlay__journey-fact > strong {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.02em;
  line-height: 1.1;
}
/* Stop row: tight 2-col grid (meta on left, time on right). No icon
   column — keeps the card slim. */
.bk-overlay__journey-stop {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
}
.bk-overlay__journey-stop + .bk-overlay__journey-stop {
  border-top: 1px dashed rgba(255,255,255,0.08);
}
.bk-overlay__journey-meta > span {
  display: block;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 2px;
}
.bk-overlay__journey-meta > strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent);
  line-height: 1.15;
}
.bk-overlay__journey-time > strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.15;
}
/* Step 4 (payment) variant: unboxed — no background, border or padding.
   The payment screen reads as one tight column (summary -> card -> pay)
   instead of a card-within-a-card. The dashed divider above the total
   still separates the commit-to figure. */
.bk-overlay__order-recap--payment {
  margin-top: 2px;
  padding: 4px 0 0;
  background: none;
  border: none;
  border-radius: 0;
}
.bk-overlay__order-recap--payment .bk-overlay__journey-total { margin-top: 10px; padding-top: 10px; }

/* Total row at the bottom of the recap — a strong horizontal divider
   then label / amount on the same row, amount in big accent green so
   the visitor's eye lands on the commit-to figure before they reach
   for their card. */
.bk-overlay__journey-total {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.bk-overlay__journey-total > span {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.bk-overlay__journey-total > strong {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  letter-spacing: 0.01em;
}
.bk-overlay__journey-total > strong > small {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  margin-left: 4px;
  vertical-align: 0.4em;
}

/* Inline validation errors */
.bk-overlay__field--error input,
.bk-overlay__field--error select,
.bk-overlay__field--error textarea,
.bk-overlay__field--error .iti { border-color: #ff4444 !important; }
.bk-overlay__field--error label { color: #ff4444 !important; }
.bk-overlay__error-msg {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: #ff4444;
  margin-top: 4px;
  display: none;
}
.bk-overlay__field--error .bk-overlay__error-msg { display: block; }
.bk-overlay__picker--error { border-color: #ff4444 !important; }
.bk-overlay__picker--error + .bk-overlay__error-msg { display: block; }
.bk-overlay__picker--shake { animation: bk-shake 0.5s ease; }
@keyframes bk-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-8px); }
  30% { transform: translateX(8px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
  90% { transform: translateX(3px); }
}

.bk-overlay__section-label {
  font-family: var(--font-display);
  font-size: 0.85rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--white);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.bk-overlay__section-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 12px 0;
}
.bk-overlay__dropoff-info {
  text-align: center;
  padding: 16px 18px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
}
/* When the dropoff-info card lives inside the sticky CTA cluster
   (steps 2 + 2b — "Shuttle included" / "Drop-offs flexible"),
   tighten its padding so the cluster doesnt eat too much space and
   leave a small breath before the button. */
.bk-overlay__cta-block > .bk-overlay__dropoff-info {
  padding: 10px 14px;
  margin: 0 0 8px;
}
/* When the whole block is itself a link to /transport/, kill the default
   anchor underline + colour inheritance so the strong heading still reads
   white and the "More about transport →" sub-line keeps its accent. */
a.bk-overlay__dropoff-info,
a.bk-overlay__dropoff-info:visited {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: background 120ms ease;
}
a.bk-overlay__dropoff-info:hover {
  background: rgba(200,241,53,0.08);
}
a.bk-overlay__dropoff-info:hover .bk-overlay__transport-link {
  text-decoration: underline;
}
.bk-overlay__dropoff-info strong {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--white);
  display: block;
  margin-bottom: 0;
  line-height: 1.3;
}
/* The transport sub-link inside the dropoff-info block. Lives both
   as a child <span> when the whole block is wrapped in an <a> to
   /transport/, and on its own as a direct <a> elsewhere — same green
   accent pill-style label in either case. Specificity is bumped via
   the chained selector so the .bk-overlay__dropoff-info wrapper can't
   bleed text colour onto it. */
.bk-overlay__dropoff-info .bk-overlay__transport-link,
.bk-overlay__transport-link {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-top: 2px;
  text-decoration: none;
}
.bk-overlay__transport-link:hover,
.bk-overlay__dropoff-info:hover .bk-overlay__transport-link {
  text-decoration: underline;
}
/* Popular badge — small accent pill sitting below the location label.
   The popular button uses flex column so label centres horizontally
   and the badge sits beneath as a discrete pill. */
.bk-overlay__loc-btn--popular {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
/* min-height bumped to 74px on the main .bk-overlay__loc-btn rule
   below — the row carrying the popular badge would otherwise stretch
   taller than the non-popular row and the two rows would look
   uneven. */
.bk-overlay__popular-badge {
  display: inline-flex;
  align-items: center;
  align-self: center;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0d0d0d;
  background: var(--accent);
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.bk-overlay__loc-btn-label {
  display: block;
  line-height: 1.2;
}

/* Return-stop grid mirrors the pickup grid (2×2) so customers don't
   have to mentally reparse the layout between steps. */
.bk-overlay__loc-btn--sm { padding: 14px 12px; font-size: 0.9rem; }
.bk-overlay__loc-btn--tbc {
  background: transparent;
  border-style: dashed;
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
}
.bk-overlay__loc-btn--tbc.selected { border-style: solid; }
.bk-overlay__time-pill--tbc {
  border-style: dashed;
  color: rgba(255,255,255,0.5);
  font-size: 0.8rem;
}

.bk-overlay__loc-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bk-overlay__loc-btn {
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 14px;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--white); cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  text-align: center;
  /* 78px matches the row stretched by the --popular (Mt Rosa) tile;
     without this, non-popular rows would sit at 74 and look short
     next to the popular row. */
  min-height: 78px;
  /* Label is vertically + horizontally centred in the entire button.
     The popular badge floats absolutely at the bottom (see below) and
     doesn't influence layout, so popular and non-popular tiles share
     the exact same label position. */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}
.bk-overlay__loc-btn:hover { background: rgba(255,255,255,0.1); }
.bk-overlay__loc-btn.selected {
  border-color: var(--accent);
  background: rgba(200,241,53,0.1);
  color: var(--accent);
}

.bk-overlay__time-pills {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.bk-overlay__time-pill {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 40px; padding: 12px 22px;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  color: var(--white); cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  white-space: nowrap;
  /* Match the loc-btn rhythm so a step with both pills + tiles reads
     as one visual height. */
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}
.bk-overlay__time-pill:hover { border-color: var(--accent); }
.bk-overlay__time-pill.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--dark);
}
.bk-overlay__time-pill--disabled,
.bk-overlay__time-pill:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: line-through;
}
.bk-overlay__time-pill__sub {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
  color: rgba(255,255,255,0.45);
}
.bk-overlay__time-pill__sub--urgent {
  color: #ff8a3d;
  animation: bk-pulse 1.6s ease-in-out infinite;
}
@keyframes bk-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.bk-overlay__tz-note {
  text-align: center;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  margin-top: 10px;
  font-family: var(--font-body);
}
/* Tighter rhythm inside the time fields on steps 2 + 2b: pull the
   label closer to the time pills and the pills closer to the tz
   note. Default field gap (10px) was too loose. */
#bkFieldTime, #bkFieldReturn { gap: 6px; }
.bk-overlay__no-slots {
  text-align: center;
  margin-top: 12px;
  padding: 12px;
  background: rgba(255,138,61,0.08);
  border: 1px solid rgba(255,138,61,0.25);
  border-radius: 8px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}
.bk-overlay__no-slots a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
}

.bk-overlay__tc {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important; font-weight: 400 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  color: rgba(255,255,255,0.6) !important;
  cursor: pointer; text-align: center !important;
  padding: 12px; margin: 0 -12px;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.bk-overlay__tc input[type="checkbox"] {
  width: 24px; height: 24px; min-width: 24px; flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
  -webkit-appearance: checkbox;
  appearance: checkbox;
}
.bk-overlay__tc a { color: var(--accent); text-decoration: underline; }
.bk-overlay__tc a:hover { color: var(--white); }
#bkFieldTc.bk-overlay__field--error .bk-overlay__tc { color: #ff4444 !important; }
#bkFieldTc.bk-overlay__field--error .bk-overlay__tc input { outline: 2px solid #ff4444; outline-offset: 2px; }

.bk-overlay__step3-summary {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700;
  color: var(--accent);
  text-align: center;
  margin-bottom: 16px;
}
/* Wallet area on step 4: only rendered when Apple/Google Pay is
   available. Wrapped so we can show/hide both the button and the
   "or pay with card" divider as one unit. */
.bk-overlay__wallet-wrap { margin: 14px 0; }
.bk-overlay__wallet-wrap[hidden] { display: none; }
.bk-overlay__wallet-btn { margin: 0 0 6px; }
/* Wallet block now lives inside the sticky CTA cluster, below the card
   BOOK NOW button. Tighten its rhythm so the footer stays compact. */
.bk-overlay__cta-block .bk-overlay__wallet-wrap { margin: 8px 0 0; }
.bk-overlay__cta-block .bk-overlay__or { margin: 8px 0; }
.bk-overlay__cta-block .bk-overlay__wallet-btn { margin: 0; }

/* Static accepted-payments row on step 4 — shown regardless of
   whether Stripe's live wallet button mounted. Inline SVG marks for
   Apple Pay + Google Pay so we don't depend on the system font
   carrying the Apple glyph (Android/Windows wouldn't render it). */
.bk-overlay__accepts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 6px 0 12px;
}
.bk-overlay__accepts-pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 6px 12px;
  line-height: 1;
  white-space: nowrap;
  color: var(--white);
}
.bk-overlay__accepts-pay svg {
  height: 16px;
  width: auto;
  display: block;
}
.bk-overlay__accepts-pay[data-pay="card"] {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.04);
}
.bk-overlay__or {
  text-align: center; margin: 14px 0 8px;
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.45);
  position: relative;
}
.bk-overlay__or::before, .bk-overlay__or::after {
  content: ''; position: absolute; top: 50%;
  width: 38%; height: 1px;
  background: rgba(255,255,255,0.15);
}
.bk-overlay__or::before { left: 0; }
.bk-overlay__or::after { right: 0; }
.bk-overlay__stripe-el {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: 12px 14px;
  transition: border-color 0.2s;
  width: 100%; box-sizing: border-box;
  min-height: 48px;
}
.bk-overlay__stripe-el.StripeElement--focus { border-color: var(--accent); }
.bk-overlay .LinkAutofillPrompt,
.bk-overlay [data-testid="link-autofill"],
.bk-overlay__stripe-el iframe[name*="link"] { display: none !important; height: 0 !important; }
.bk-overlay__stripe-el.StripeElement--invalid { border-color: #ff4444; }
.bk-overlay__card-error {
  font-family: var(--font-body);
  font-size: 0.75rem; color: #ff4444;
  margin-top: 4px; min-height: 0;
}
.bk-overlay__card-error:empty { margin: 0; }
.bk-overlay__secure {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
  margin-top: 6px;
  letter-spacing: 0.04em;
}

/* intl-tel-input dark theme overrides inside modal */
.bk-overlay .iti { width: 100%; }
.bk-overlay .iti__selected-dial-code { color: var(--white); font-size: 14px; }
.bk-overlay .iti__arrow { border-top-color: rgba(255,255,255,0.5); }
/* When the dropdown is reparented inside the dialog (so it can join
   the top-layer), it still needs to sit visually above the sheet —
   fullscreen popup covers the whole dialog area. */
.bk-overlay .iti__dropdown-content {
  background: var(--dark);
  border-color: rgba(255,255,255,0.15);
  z-index: 10;
}
/* Force PNG flag sprite — webp default failed to render on some
   real-device browsers (iPhone Safari) despite supporting it in
   theory. PNG is on the same CDN, ~12kb bigger, universally safe.
   Override BOTH the 1x and 2x CSS variables so the retina media
   query in v25 (min-resolution:2x) also picks up the PNG — without
   this, iOS devices with DPR≥2 hit the @media rule and try to load
   flags@2x.webp anyway. */
.bk-overlay .iti {
  --iti-path-flags-1x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@25/build/img/flags.png");
  --iti-path-flags-2x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@25/build/img/flags@2x.png");
}
.bk-overlay .iti__flag {
  background-image: var(--iti-path-flags-1x) !important;
}
.bk-overlay.iti--fullscreen-popup .iti__dropdown-content,
.bk-overlay .iti--fullscreen-popup .iti__dropdown-content {
  position: fixed;
  inset: 0;
  z-index: 10;
}
.bk-overlay .iti__search-input { background: var(--dark-2); color: var(--white); border-color: rgba(255,255,255,0.15); font-size: 16px; }
/* Cancel button at the top of the fullscreen country picker. Injected
   on open:countrydropdown so iOS users can escape without picking. */
.bk-overlay .bk-iti-close {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: var(--dark-2);
  color: var(--white);
  padding: 14px 16px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  position: sticky;
  top: 0;
  z-index: 2;
}
.bk-overlay .bk-iti-close > span:last-child { font-size: 1.6rem; line-height: 1; color: var(--accent); }
.bk-overlay .bk-iti-close:hover { background: var(--dark-3); }
.bk-overlay .iti__country-list { background: var(--dark); }
.bk-overlay .iti__country:hover, .bk-overlay .iti__country--highlight { background: var(--dark-3); }
.bk-overlay .iti__country-name, .bk-overlay .iti__dial-code { color: var(--white); }
.bk-overlay .iti__selected-country-primary { background: transparent; }

.bk-overlay__timing {
  margin: 12px 0;
  padding: 14px;
  background: rgba(200,241,53,0.08);
  border: 1px solid rgba(200,241,53,0.15);
  border-radius: 10px;
  text-align: center;
}
.bk-overlay__timing-total {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
}
.bk-overlay__timing-sub {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  display: block;
  margin-top: 4px;
}
.bk-overlay__close {
  position: absolute; top: 4px; right: 16px; z-index: 2;
  background: none; border: none; color: rgba(255,255,255,0.4);
  font-size: 1.6rem; cursor: pointer; line-height: 1;
  /* No box around the X — kill iOS Safari blue tap halo and the
     keyboard focus ring. <dialog> auto-focuses the first button on
     open which was lighting up a faint rounded outline. The X icon
     + cursor change is affordance enough. */
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.bk-overlay__close:hover { color: var(--white); }
.bk-overlay__close:focus,
.bk-overlay__close:focus-visible { outline: none; color: var(--white); }
/* 3-col grid keeps the title dead-centre regardless of whether a Back
   link is rendered. Step 1 has no back link and the empty side cells
   keep the title where it always sat; step 2/2b/3 finally have a true
   centre. */
.bk-overlay__header {
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.bk-overlay__back {
  /* Top-left of the sheet. Same optical mid-line as the close X and
     the progress-dot row (y≈17): X is 1.6rem at top:4 (centre ≈17),
     so BACK at 0.85rem (~13.6px tall) goes at top:10 — centre ≈17.
     Kept at label size, not matched to the × glyph's font-size,
     because rendering them at the same font-size makes BACK read
     much larger than the close X (the × glyph fills only ~half of
     its line-box). */
  position: absolute; top: 10px; left: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-display);
  font-size: 0.85rem; font-weight: 600; line-height: 1;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  cursor: pointer; white-space: nowrap;
  transition: color 0.2s;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.bk-overlay__back:hover { color: var(--white); }
.bk-overlay__ride {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--white);
  text-align: center;
  grid-column: 2;
}
/* Step 1's header has no Back button. Collapse the empty side columns
   so the title gets the full row width — at 1.5rem the text fits
   inside the modal's content area on all common phone viewports
   (≥360px). Same font-size + letter-spacing as the other step
   headers (Shuttle pickup, Almost there, Payment) so titles match
   across the flow. */
#bkStep1 .bk-overlay__header { grid-template-columns: 1fr; }
#bkStep1 .bk-overlay__ride {
  grid-column: 1;
  white-space: nowrap;
}
.bk-overlay__ride-product {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--white);
  text-align: center;
  margin-bottom: 4px;
}
.bk-overlay__ride-desc {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: rgba(255,255,255,0.6);
  text-align: center;
  line-height: 1.55;
  margin: 4px auto 12px;
  max-width: 42ch;
}
.bk-overlay__ride-includes-text {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  text-align: center;
  line-height: 1.4;
  margin: 4px 0 8px;
}
.bk-overlay__ride-includes {
  margin: 16px 0 14px;
  padding: 4px 0;
}
.bk-overlay__fields--separated {
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 4px;
}
.bk-overlay__includes-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  text-align: center;
}
.bk-overlay__includes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 6px;
}
.bk-overlay__include {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.bk-overlay__include-icon {
  width: 37px; height: 37px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bk-overlay__include-icon svg { width: 100%; height: 100%; }
.bk-overlay__include-label {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  line-height: 1.15;
}
@media (max-width: 480px) {
  .bk-overlay__includes-grid { gap: 14px 8px; }
}
.bk-overlay__price-tag {
  font-family: var(--font-display);
  font-size: 2.2rem; font-weight: 900;
  color: var(--accent);
  text-align: center;
  margin: 8px 0 24px;
}
.bk-overlay__price-tag small { font-weight: 700; font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.bk-overlay__step2-summary {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700;
  color: var(--accent);
  text-align: center;
  margin-bottom: 16px;
}
.bk-overlay__includes {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin: 10px 0;
}
.bk-overlay__includes-badge {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 3px;
  padding: 5px 10px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
}
.bk-overlay__includes-items {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
}
.bk-overlay__fields {
  display: flex; flex-wrap: wrap; gap: 18px;
  justify-content: center;
}
.bk-overlay__field {
  width: 100%; display: flex; flex-direction: column; gap: 10px;
}
.bk-overlay__field--inline {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
}
.bk-overlay__field--inline label { text-align: center; }
.bk-overlay__fields--row { flex-wrap: nowrap; }
.bk-overlay__field--half { width: calc(50% - 9px) !important; }
.bk-overlay__field label,
.bk-overlay__field--inline label {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--white);
  text-align: center;
  line-height: 1.3;
}
/* Step 3 form keeps the same uppercase display label as other steps;
   only the spacing is tightened so the three fields stack closer. */
#bkForm .bk-overlay__field { gap: 4px; }
#bkForm .bk-overlay__fields { gap: 10px; }
/* Slightly tighter input height in step 3 so the three text fields
   + T&C + CTA all live comfortably above the on-screen keyboard. */
#bkForm .bk-overlay__field input { padding: 10px 12px; }
/* When an input gets focused on mobile, leave room above the sticky
   CTA for it to scroll into view cleanly. */
#bkStep3 { scroll-padding-bottom: 200px; }
/* The CTA block uses `margin-top: auto` to dock at the bottom of its
   flex parent. Steps 1/2/2b put it directly in .bk-overlay__step (a
   flex column) so it docks naturally; Step 3 wraps the form, so the
   form itself has to be the flex column that fills available height —
   otherwise the CTA floats wherever the content ends. */
#bkStep3 { display: flex; flex-direction: column; }
#bkForm {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Body-content rhythm inside every step panel: 24px between major
   blocks (field, fields-row, dropoff-info, popover, total). Direct-
   child selector only — nested fields (e.g. step 3's half-width
   First/Last side-by-side inside .bk-overlay__fields) are spaced by
   the parent's flex `gap`, not by these rules. The header has its
   own 20px margin-bottom; the CTA block sticks to the bottom with
   its own padding — neither is touched. */
.bk-overlay__step > .bk-overlay__field + .bk-overlay__field,
.bk-overlay__step > .bk-overlay__field + .bk-overlay__dropoff-info,
.bk-overlay__step > .bk-overlay__dropoff-info + .bk-overlay__field,
.bk-overlay__step > .bk-overlay__date-popover + .bk-overlay__total,
.bk-overlay__step > .bk-overlay__fields + .bk-overlay__total,
.bk-overlay__step > form > .bk-overlay__fields + .bk-overlay__dropoff-info {
  margin-top: 24px;
}
/* Calendar pops just below the date pill — keep them close together
   so the pill clearly belongs to the calendar that revealed beneath it. */
.bk-overlay__step > .bk-overlay__fields + .bk-overlay__date-popover {
  margin-top: 14px;
}
.bk-overlay__field input,
.bk-overlay__field select,
.bk-overlay__field textarea {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: 12px 14px;
  font-family: var(--font-body); font-size: 16px;
  color: var(--white); transition: border-color 0.2s;
  -webkit-appearance: none;
  width: 100%; box-sizing: border-box;
}
.bk-overlay__field select { height: 48px; }
.bk-overlay__field input:focus,
.bk-overlay__field select:focus,
.bk-overlay__field textarea:focus {
  outline: none; border-color: var(--accent);
}
.bk-overlay__field select option { background: var(--dark); }
.bk-overlay__picker {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 52px;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 40px; padding: 0 16px;
  cursor: pointer; position: relative;
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 700;
  color: var(--white); text-transform: uppercase; letter-spacing: 0.04em;
  transition: border-color 0.2s, background 0.2s;
  box-sizing: border-box;
  white-space: nowrap;
  /* Stops iOS's double-tap-to-zoom on the picker. Tapping rapidly near
     (but not on) the +/- buttons used to zoom the page in instead of
     registering as a missed click. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.bk-overlay__picker:hover { background: rgba(255,255,255,0.12); border-color: var(--accent); }
.bk-overlay__picker svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.bk-overlay__picker span {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 900;
  color: var(--white); pointer-events: none;
}
/* Lock the rider-count column width so 1->4->10 doesn't widen the
   pill (and force the date pill onto the next line on narrow phones).
   1.4em fits "20" in Barlow Condensed 900 with breathing room. */
#bkCount { min-width: 1.4em; text-align: center; }
.bk-overlay__picker-adj {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: none;
  font-size: 1.2rem; font-weight: 700; color: var(--white);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
  /* Prevent iOS double-tap zoom and grey tap-flash on this control. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.bk-overlay__picker-adj:hover { background: rgba(255,255,255,0.25); }
.bk-overlay__picker-adj:active { background: rgba(255,255,255,0.32); }
.bk-overlay__picker input[type="date"] {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font-size: 16px;
}
.bk-overlay__picker input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  cursor: pointer; opacity: 0;
}
/* The date pill is a real <button> rather than a wrapper around a
   hidden <input type="date">, so reset native button chrome and let
   it inherit the picker styling. */
button.bk-overlay__picker--button {
  font: inherit; -webkit-appearance: none; appearance: none;
}

/* Calendar popover — opens below the date pill when clicked. Constrained
   to the modal width with min-width:0 so the inner grid can never push
   the parent wider than the sheet. */
.bk-overlay__date-popover {
  margin: 22px 0 4px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  animation: bk-fade-in 0.15s ease;
}
.bk-overlay__date-popover[hidden] { display: none; }
.bk-overlay__date-popover .bk-cal {
  width: 100%;
  box-sizing: border-box;
}
.bk-overlay__date-popover .bk-cal__grid {
  min-width: 0;
}
@keyframes bk-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* When the calendar is open the marketing block above the pills is
   hidden so the calendar + Continue button fit the viewport without
   scrolling — applies on both mobile and desktop. */
.bk-overlay__step--calendar-open .bk-overlay__header,
.bk-overlay__step--calendar-open .bk-overlay__ride-product,
.bk-overlay__step--calendar-open .bk-overlay__ride-desc,
.bk-overlay__step--calendar-open .bk-overlay__price-tag,
.bk-overlay__step--calendar-open .bk-overlay__ride-includes,
.bk-overlay__step--calendar-open .bk-overlay__ride-includes-text,
.bk-overlay__step--calendar-open .bk-overlay__trust-line,
/* Hide "Riders" / "Date" labels above the pickers while the calendar
   is open. The pickers themselves (rider stepper + date pill) are
   self-explanatory, and dropping the labels reclaims a row of vertical
   space so the calendar pulls up closer to the dots. */
.bk-overlay__step--calendar-open .bk-overlay__field--inline > label,
/* Hide total inside CTA cluster while picking — visitor will see the
   refreshed total once the calendar closes. Riders + date pickers
   stay visible so the visitor can adjust either while watching the
   "X spots left" badges update live. */
.bk-overlay__step--calendar-open .bk-overlay__cta-block .bk-overlay__total {
  display: none;
}
.bk-overlay__total {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700; color: rgba(255,255,255,0.6);
  text-align: center; margin: 20px 0 4px;
}
.bk-overlay__total strong { font-size: 2.2rem; color: var(--accent); }
.bk-overlay__total small { font-size: 0.7rem; color: rgba(255,255,255,0.4); }

/* Phone: trim the marketing block above the pickers so the total +
   Continue button stay above the fold when the modal opens. The
   calendar-open class hides the marketing entirely; this is the
   default-state shrink. */
@media (max-width: 480px) {
  .bk-overlay__ride-product { font-size: 1.25rem; margin-bottom: 2px; }
  .bk-overlay__ride-desc {
    font-size: 0.82rem; line-height: 1.5;
    margin: 2px auto 6px;
  }
  .bk-overlay__price-tag { font-size: 1.7rem; margin: 4px 0; }
  .bk-overlay__price-tag small { font-size: 0.72rem; }
  .bk-overlay__ride-includes-text { font-size: 0.7rem; margin: 2px 0 4px; }
  .bk-overlay__total { margin: 14px 0 4px; font-size: 0.92rem; }
  .bk-overlay__total strong { font-size: 1.85rem; }
  .bk-overlay__step { padding: 14px 18px 0; }
}
.bk-overlay__reassurance {
  font-family: var(--font-display);
  font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.7);
  text-align: center; margin-top: 12px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px;
}
.bk-overlay__reassurance span { white-space: nowrap; }
.bk-overlay__confirm {
  text-align: center;
  padding: 20px 0;
}
.bk-overlay__check {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--accent); color: var(--dark);
  font-size: 2.2rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 0 40px rgba(200,241,53,0.3);
}
.bk-overlay__confirm h3 {
  font-family: var(--font-display);
  font-size: 2.2rem; font-weight: 900;
  text-transform: uppercase; margin-bottom: 4px;
  color: var(--white);
  letter-spacing: 0.02em;
}
.bk-overlay__confirm-sub {
  color: rgba(255,255,255,0.6);
  font-size: 1.15rem;
  margin-bottom: 18px;
}
/* Booking reference card — accent-green block so the code is the
   first thing the rider sees on the success screen. Big monospaced
   ref so it's easy to read aloud over the phone or copy/paste. */
.bk-overlay__ref-card {
  background: var(--accent);
  color: var(--dark);
  border-radius: 14px;
  padding: 14px 18px 16px;
  margin: 0 auto 18px;
  text-align: center;
  box-shadow: 0 0 30px rgba(200,241,53,0.25);
}
.bk-overlay__ref-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(13,13,13,0.65);
  margin-bottom: 4px;
}
.bk-overlay__ref-code {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--dark);
  word-break: break-word;
}
.bk-overlay__order-recap--confirm {
  margin-top: 4px;
  text-align: left;
}
/* Larger type on the success-screen recap only — step 4 keeps its
   tighter sizes. Spacing (padding/margins/grid gap) is unchanged. */
.bk-overlay__order-recap--confirm .bk-overlay__journey-head > strong { font-size: 1.3rem; }
.bk-overlay__order-recap--confirm .bk-overlay__journey-meta > strong { font-size: 1.1rem; }
.bk-overlay__order-recap--confirm .bk-overlay__journey-meta > span { font-size: 0.85rem; }
.bk-overlay__order-recap--confirm .bk-overlay__journey-time > strong { font-size: 1.15rem; }
.bk-overlay__order-recap--confirm .bk-overlay__journey-time > span { font-size: 0.82rem; }
.bk-overlay__order-recap--confirm .bk-overlay__journey-connector > span { font-size: 0.9rem; }
.bk-overlay__order-recap--confirm .bk-overlay__journey-total > span { font-size: 0.92rem; }
.bk-overlay__order-recap--confirm .bk-overlay__journey-total > strong { font-size: 1.9rem; }
.bk-overlay__order-recap--confirm .bk-overlay__journey-total > strong > small { font-size: 0.72rem; }
.bk-overlay__confirm-note {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.6);
  margin: 16px 0 12px;
  text-align: center;
}
.bk-overlay__confirm-note a { color: var(--accent); }

/* Availability state on date controls */
.bk-date--sold-out {
  text-decoration: line-through;
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.bk-date--filling {
  position: relative;
}
.bk-date--filling::after {
  content: attr(data-remaining) ' left';
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--accent);
  white-space: nowrap;
}

/* Booking-lookup page */
.bk-lookup { min-height: 60vh; }
.bk-lookup__hint {
  color: rgba(255,255,255,0.55);
  font-size: 0.9rem;
  margin-bottom: 24px;
}
.bk-lookup__form { display: flex; flex-direction: column; gap: 16px; }
.bk-lookup__form label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-display);
  font-size: 0.9rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--white);
}
.bk-lookup__form input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--white);
}
.bk-lookup__form input:focus { outline: none; border-color: var(--accent); }
.bk-lookup__policy {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  margin-top: 16px;
}
.bk-btn {
  background: var(--accent);
  color: var(--dark);
  border: none;
  border-radius: 8px;
  padding: 14px 20px;
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: opacity 0.2s;
}
.bk-btn:hover { opacity: 0.9; }
.bk-btn--ghost {
  background: transparent;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.2);
  margin-left: 8px;
}
.bk-btn--ghost:hover { border-color: #ff4444; color: #ff4444; }

/* ── Calendar grid (Step 1 date picker) ── */
.bk-overlay__date-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
}
.bk-overlay__date-head label {
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
}
.bk-overlay__date-head .bk-overlay__date-text {
  font-family: var(--font-display); font-size: 0.92rem; font-weight: 700;
  color: var(--accent);
}
.bk-overlay__calendar { width: 100%; }

/* Calendar uses an 8/4 spacing rhythm: 12-16px outer padding, 4-6px
   gaps, 8px cell radius, square cells via aspect-ratio. Tighter on
   phones so the whole calendar fits the modal viewport. */
.bk-cal {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 6px 12px 12px;
  background: rgba(255,255,255,0.02);
}
@media (min-width: 480px) {
  .bk-cal { padding: 10px 18px 18px; }
}
.bk-cal__nav {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: start;
  margin-bottom: 14px;
}
@media (min-width: 480px) {
  .bk-cal__nav { margin-bottom: 18px; }
}
.bk-cal__nav-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: rgba(255,255,255,0.7);
  cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
  font-size: 0.95rem;
  padding: 0;
}
.bk-cal__nav-btn:hover:not(:disabled) {
  border-color: var(--accent); color: var(--accent);
  background: rgba(200,241,53,0.06);
}
.bk-cal__nav-btn:disabled {
  opacity: 0.25; cursor: not-allowed;
}
.bk-cal__nav-btn--next { justify-self: end; }
.bk-cal__titles {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding-top: 0;
}
.bk-cal__title {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--white);
}
.bk-cal__months {
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
.bk-cal__weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; margin-bottom: 6px;
}
@media (min-width: 480px) {
  .bk-cal__weekdays { gap: 5px; margin-bottom: 8px; }
}
.bk-cal__weekdays span {
  text-align: center;
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  padding: 0;
}
.bk-cal__grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
@media (min-width: 480px) {
  .bk-cal__grid { gap: 5px; }
}

/* Sized for "full month grid fits without scrolling". Dropped the
   aspect-ratio 1/1 (which made each cell as tall as it was wide,
   ballooning the 6-row grid past the modal height once we stopped
   trimming past weeks). Min-height stays at 44px to keep the Apple
   HIG tap-target, but cells are now squat-rectangle rather than
   square — saves ~70-90px overall. */
.bk-cal__day {
  position: relative;
  min-height: 44px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--white);
  font-family: var(--font-display);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.bk-cal__day-num {
  font-weight: 800; font-size: 1.05rem; line-height: 1;
}
@media (min-width: 480px) {
  .bk-cal__day { min-height: 48px; }
  .bk-cal__day-num { font-size: 1.2rem; }
}
.bk-cal__day:hover:not(:disabled):not(.bk-cal__day--blank):not(.bk-cal__day--selected) {
  border-color: var(--accent);
  background: rgba(200,241,53,0.15);
  color: var(--accent);
}
.bk-cal__day:active:not(:disabled):not(.bk-cal__day--blank) {
  transform: scale(0.97);
}
.bk-cal__day--blank { cursor: default; pointer-events: none; border: none; }
.bk-cal__day--past {
  color: rgba(255,255,255,0.25); cursor: not-allowed;
}
/* Sold-out and blocked render identically — the customer doesn't care
   why a date isn't bookable, just that it isn't. */
.bk-cal__day--soldout,
.bk-cal__day--blocked {
  color: #ff6b6b;
  background: rgba(255,107,107,0.08);
  border-color: rgba(255,107,107,0.2);
  cursor: not-allowed;
}
.bk-cal__day--soldout .bk-cal__day-num,
.bk-cal__day--blocked .bk-cal__day-num { text-decoration: line-through; }
.bk-cal__day--filling .bk-cal__day-num { color: var(--accent); }

/* Legend — cell-mirroring swatches so customers can read the calendar
   without hovering for tooltips. Sits flush under the grid with no
   divider — design rule of thumb: don't separate things that belong
   together. */
.bk-cal__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 15px;
  margin-top: 0;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.65);
}
@media (min-width: 480px) {
  .bk-cal__legend { gap: 8px 20px; font-size: 1rem; }
}
.bk-cal__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.bk-cal__legend-swatch {
  display: inline-block;
  width: 13px; height: 13px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.2);
  flex-shrink: 0;
}
@media (min-width: 480px) {
  .bk-cal__legend-item { gap: 9px; }
  .bk-cal__legend-swatch { width: 15px; height: 15px; border-radius: 5px; }
}
.bk-cal__legend-swatch--available {
  background: transparent;
  border-color: rgba(255,255,255,0.45);
}
.bk-cal__legend-swatch--filling {
  background: rgba(200,241,53,0.15);
  border-color: var(--accent);
}
.bk-cal__legend-swatch--soldout {
  background: rgba(255,107,107,0.15);
  border-color: #ff6b6b;
  position: relative;
}
.bk-cal__legend-swatch--soldout::after {
  content: '';
  position: absolute;
  left: 2px; right: 2px;
  top: 50%; height: 1px;
  background: #ff6b6b;
}
.bk-cal__legend-swatch--blocked {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.2);
  position: relative;
}
.bk-cal__legend-swatch--blocked::after {
  content: '';
  position: absolute;
  left: 1px; right: 1px;
  top: 50%; height: 1px;
  background: rgba(255,255,255,0.4);
}
.bk-cal__day--selected,
.bk-cal__day--selected:hover {
  background: var(--accent);
  color: var(--dark);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.bk-cal__day--selected .bk-cal__day-num { color: var(--dark); }

/* Status badge ("3 left", "today") sits in the cell flow under the
   number — same vertical position whether or not it renders. */
.bk-cal__day-badge {
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent);
  line-height: 1;
}
.bk-cal__day--selected .bk-cal__day-badge { color: var(--dark); }

/* Desktop: centre the sheet instead of anchoring it to the bottom.
   Lock the sheet to a fixed WIDTH and HEIGHT so the modal stays the
   same size between steps — previously height/width were both auto
   (height fit content; width fit the widest child), so the modal
   grew/shrank when navigating riders -> shuttle -> details -> payment.
   That also dragged the position-absolute Back link with it as the
   sheet's left edge moved. Explicit 520×min(90vh,780px) locks both
   axes; steps with less content scroll internally; the sticky CTA
   cluster anchors to the bottom via the existing flex-column layout. */
@media (min-width: 768px) {
  .bk-overlay { align-items: center; }
  .bk-overlay__sheet {
    position: relative;
    /* Reset all four edge anchors so the flex parent's align-items:
       center + justify-content: center actually centers the sheet.
       The mobile rule above sets top: 5dvh — without resetting it
       here the sheet sits 5dvh below the centre line on desktop. */
    top: auto; bottom: auto; left: auto; right: auto;
    width: 520px;
    height: min(90vh, 780px);
    max-height: 90vh;
    border-radius: 16px;
    transform: translateY(20px);
  }
  .bk-overlay[open] .bk-overlay__sheet { transform: translateY(0); }
}

/* ─── Sales-sequence-wide type bump ────────────────────────────────────
   Single override block applied across every booking step. Lives at the
   end of the file so it wins on source order (including the
   max-width:480px phone overrides above). Spacing — paddings, margins,
   gaps, grid tracks — is untouched; only font-size is changed. */
.bk-overlay__field label,
.bk-overlay__field--inline label { font-size: 1.15rem; }
.bk-overlay__loc-btn { font-size: 1.15rem; }
.bk-overlay__loc-btn--sm { font-size: 1.05rem; }
.bk-overlay__loc-btn--tbc { font-size: 1rem; }
.bk-overlay__time-pill { font-size: 1.15rem; }
.bk-overlay__time-pill--tbc { font-size: 0.95rem; }
.bk-overlay__time-pill__sub { font-size: 0.78rem; }
.bk-overlay__tz-note { font-size: 0.85rem; }
.bk-overlay__picker { font-size: 1rem; }
.bk-overlay__picker span { font-size: 1.3rem; }
.bk-overlay__picker-adj { font-size: 1.4rem; }
.bk-overlay__total { font-size: 1.15rem; }
.bk-overlay__total strong { font-size: 2.5rem; }
.bk-overlay__total small { font-size: 0.85rem; }
.bk-overlay__price-tag { font-size: 2.5rem; }
.bk-overlay__price-tag small { font-size: 0.95rem; }
#bkStep1 .bk-overlay__price-tag { font-size: 2.1rem; }
#bkStep1 .bk-overlay__ride-desc { font-size: 1.05rem; }
#bkStep1 .bk-overlay__cta-block .bk-overlay__total { font-size: 1.05rem; }
#bkStep1 .bk-overlay__cta-block .bk-overlay__total strong { font-size: 1.85rem; }
.bk-overlay__step2-summary,
.bk-overlay__step3-summary { font-size: 1.15rem; }
.bk-overlay__section-label { font-size: 1rem; }
.bk-overlay__dropoff-info strong { font-size: 1.05rem; }
.bk-overlay__dropoff-info .bk-overlay__transport-link,
.bk-overlay__transport-link { font-size: 0.88rem; }
.bk-overlay__includes-badge { font-size: 0.95rem; }
.bk-overlay__includes-items { font-size: 1rem; }
.bk-overlay__include-label { font-size: 0.78rem; }
.bk-overlay__popular-badge { font-size: 0.72rem; }
.bk-overlay__no-slots { font-size: 1rem; }
.bk-overlay__trust-line { font-size: 0.9rem; }
.bk-overlay__pay-options { font-size: 0.85rem; }
.bk-overlay__tc { font-size: 1rem !important; }
/* 20% smaller than the previous 0.95rem — the modal trust line was
   competing with the BOOK CTA right above it. Slimmed only on the
   modal; the homepage hero reassurance stays at its established size. */
.bk-overlay__reassurance { font-size: 0.76rem; }
.bk-overlay__cta-block .btn--full { font-size: 1.3rem; }
.bk-overlay__secure { font-size: 0.88rem; }
.bk-overlay__or { font-size: 0.85rem; }
.bk-overlay__accepts-pay[data-pay="card"] { font-size: 0.75rem; }
.bk-overlay__card-error { font-size: 0.88rem; }
.bk-overlay__error-msg { font-size: 0.88rem; }
.bk-overlay .iti__selected-dial-code { font-size: 16px; }
/* Phone-specific overrides above (in the max-width:480px block) are
   knocked out by source order; restate the small-screen sizes here at
   the bumped tier so layout still feels tight on narrow viewports. */
@media (max-width: 480px) {
  .bk-overlay__ride-product { font-size: 1.45rem; }
  .bk-overlay__ride-desc { font-size: 0.95rem; }
  .bk-overlay__price-tag { font-size: 2rem; }
  .bk-overlay__price-tag small { font-size: 0.85rem; }
  .bk-overlay__ride-includes-text { font-size: 0.85rem; }
  .bk-overlay__total { font-size: 1.05rem; }
  .bk-overlay__total strong { font-size: 2.1rem; }
}