/* ==========================================================================
   BOOKING FORM
   Loaded after css/style.css on the pages carrying the booking form
   (index.html, el/index.html). Derived from the approved light design on
   /booking-test.html.

   SCOPING — why every rule starts with #booking:
   style.css already styles the old form, and the JS binds to four of those
   class names, so they cannot be renamed: .form-card, .form-card-body, .field
   and .vehicle-option. Every other element in the new markup uses a bk- name
   that style.css does not match at all. For those four, #booking gives each
   rule here a specificity of (1,n,m), which beats style.css's class-only
   selectors without a single !important — and confines the whole thing to the
   booking section, so the contact form further down the page is untouched.

   Tokens are named --bk-* because they sit at :root, where a generic name like
   --ink could collide with something added later.

   The .flatpickr / .iti rules are deliberately NOT scoped: the calendar and the
   phone-country dropdown are appended to <body>, outside this section.
   ========================================================================== */

/* ---- section shell (the standalone page had a full-bleed background; here the
   section provides its own) ---- */
#booking {
  background: var(--bk-bg-1);
  color: var(--bk-ink);
  padding: 72px 0;
}

#booking .bk-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

#booking .bk-head {
  text-align: center;
  margin-bottom: 28px;
}

#booking .bk-h {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

#booking .bk-sub {
  color: var(--bk-ink-dim);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto;
}

/* ---- neutralise what style.css puts on the four class names we must keep:
   decorative overlays and a tooltip-style error bubble that the new design
   replaces. Without this they paint on top of it. ---- */
#booking .form-card::after,
#booking .form-card.booking-highlight::after,
#booking .vehicle-option::after,
#booking .vehicle-option > * {
  content: none;
  background: none;
  animation: none;
  opacity: 1;
  position: static;
  z-index: auto;
  mix-blend-mode: normal;
  filter: none;
  box-shadow: none;
  inset: auto;
}

/* style.css renders .field-error as an absolutely positioned bubble with two
   border-triangle arrows; the new design wants a plain inline message. */
#booking .field-error {
  position: static;
  max-width: none;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  white-space: normal;
  pointer-events: auto;
}

#booking .field-error::before,
#booking .field-error::after {
  content: none;
}

#booking .vehicle-option img {
  filter: none;
}

/* ---- leak guard.
   These are properties style.css sets on the four shared class names which the
   design below does not otherwise declare, so they would come through the
   cascade untouched. Found by diffing the two sheets rather than by eye. ---- */

#booking .form-card {
  /* style.css sets overflow:hidden here to clip its rounded corners. That makes
     the card a scroll container, and a sticky descendant then resolves against
     THAT instead of the viewport — which silently kills the summary rail. Same
     trap the standalone page hit; here it arrives from the other stylesheet. */
  overflow: visible;
}

#booking .form-card-body {
  /* style.css paints the form body #f3f3f3 and pads it; the card owns both now. */
  background: transparent;
  padding: 0;
}

#booking .field > label {
  /* style.css adds margin-bottom: 6px, which doubles up with the .field gap. */
  display: block;
  margin: 0;
}

#booking .field input,
#booking .field textarea {
  /* style.css forces min-height: var(--form-field-height) — 54px — onto every
     field. The new fields size from their own padding. */
  min-height: 0;
}

/* Every colour in this sheet resolves through a token, so the whole form can
   be repainted by redefining the block below. The amber accent is deliberately
   identical in both themes — it is the brand and it works on either ground.
   Dark is the default; at the end of the file is the
   homepage palette. */
:root {
  /* ink */
  --bk-ink: #111111;
  --bk-ink-dim: rgba(0, 0, 0, 0.62);
  --bk-ink-faint: rgba(0, 0, 0, 0.42);
  --bk-ink-placeholder: rgba(0, 0, 0, 0.3);
  --bk-ink-strong: #000000;

  /* accent — shared by both themes */
  --bk-amber: #fea710;
  --bk-danger: #d93025;
  --bk-danger-tint: rgba(217, 48, 37, 0.13);
  --bk-danger-tint-strong: rgba(217, 48, 37, 0.16);

  /* grounds */
  --bk-bg-1: #ffffff;
  --bk-surface-top: #ffffff;
  --bk-panel-2: #ffffff;
  --bk-input-bg: #ffffff;
  --bk-input-bg-focus: #fffdf6;
  --bk-media-bg: #e9e9e9;
  --bk-media-img-opacity: 1;

  /* hairlines */
  --bk-line: rgba(0, 0, 0, 0.1);
  --bk-line-strong: rgba(0, 0, 0, 0.16);

  /* surface tints, lightest to strongest */
  --bk-tint-2: rgba(0, 0, 0, 0.02);
  --bk-tint-5: rgba(0, 0, 0, 0.04);
  --bk-tint-6: rgba(0, 0, 0, 0.05);
  --bk-tint-7: rgba(0, 0, 0, 0.06);
  --bk-tint-10: rgba(0, 0, 0, 0.07);
  --bk-tint-13: rgba(0, 0, 0, 0.14);

  /* shadows */
  --bk-shadow-1: rgba(0, 0, 0, 0.13);
  --bk-shadow-2: rgba(0, 0, 0, 0.1);
  --bk-shadow-3: rgba(0, 0, 0, 0.16);
}
/* ---------- the card ---------- */
#booking .form-card.bk-card {
  position: relative;
  background: var(--bk-surface-top);
  border: 1px solid var(--bk-line-strong);
  /* The amber hairline used to be a ::before, which needed overflow:hidden on
     the card to keep it inside the rounded corners. overflow:hidden turns the
     card into a scroll container, and a sticky descendant then resolves against
     THAT rather than the viewport — which is why the summary rail never stuck.
     As a border it follows the radius on its own and the card can stay
     overflow-visible. */
  border-top: 2px solid var(--bk-amber);
  border-radius: 22px;
  box-shadow: 0 24px 60px var(--bk-shadow-1);
}

/* scroll.js adds .booking-highlight when a "Book now" button is pressed. */
#booking .form-card.booking-highlight {
  animation: bk-highlight 1.5s ease;
}

@keyframes bk-highlight {
  0%,
  100% {
    box-shadow: 0 24px 60px var(--bk-shadow-1);
  }
  35% {
    box-shadow: 0 0 0 4px rgba(254, 167, 16, 0.5),
      0 24px 60px var(--bk-shadow-1);
  }
}

#booking .bk-cardhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 30px;
  border-bottom: 1px solid var(--bk-line);
  background: var(--bk-tint-2);
  border-radius: 21px 21px 0 0;
}

#booking .bk-cardhead-title {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

#booking .bk-cardhead-title span {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bk-ink-faint);
  letter-spacing: 0;
  margin-top: 3px;
}

#booking .bk-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#booking .bk-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--bk-ink-dim);
  background: var(--bk-tint-5);
  border: 1px solid var(--bk-line);
  border-radius: 999px;
  padding: 7px 13px;
}

#booking .bk-chip svg {
  width: 14px;
  height: 14px;
  stroke: var(--bk-amber);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- advance-notice notice ---------- */
#booking .bk-notice {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin: 26px 30px 0;
  padding: 15px 17px;
  border-radius: 13px;
  background: rgba(254, 167, 16, 0.09);
  border: 1px solid rgba(254, 167, 16, 0.26);
}

#booking .bk-notice-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bk-amber);
  color: #111;
  font-weight: 900;
  font-size: 0.85rem;
}

#booking .bk-notice-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--bk-ink);
}

#booking .bk-notice-text strong {
  color: var(--bk-ink-strong);
}

/* form.js writes the late-booking message here and toggles .is-visible */
#booking .bk-late {
  display: none;
  margin: 12px 30px 0;
  color: var(--bk-danger);
  font-size: 0.88rem;
  font-weight: 700;
}

#booking .bk-late.is-visible {
  display: block;
}

/* ---------- layout ---------- */
#booking .bk-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 376px;
  gap: 0;
}

#booking .bk-main {
  padding: 26px 30px 32px;
  min-width: 0;
}

/* ---------- numbered sections ---------- */
#booking .bk-section + .bk-section {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px dashed var(--bk-line);
}

#booking .bk-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

#booking .bk-section-num {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 0.86rem;
  font-weight: 900;
  color: var(--bk-amber);
  background: rgba(254, 167, 16, 0.12);
  border: 1px solid rgba(254, 167, 16, 0.32);
}

#booking .bk-section-title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

#booking .bk-section-title span {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--bk-ink-faint);
  margin-top: 2px;
}

/* ---------- fields ---------- */
#booking .bk-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

#booking .bk-row--pair {
  margin-top: 16px;
}

#booking .field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

#booking .bk-field-full {
  grid-column: 1 / -1;
}

#booking .field > label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--bk-ink-dim);
  text-transform: uppercase;
}

#booking .bk-well {
  position: relative;
  display: flex;
  align-items: center;
}

#booking .bk-well > svg {
  position: absolute;
  left: 14px;
  width: 17px;
  height: 17px;
  stroke: var(--bk-ink-faint);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: stroke 0.18s ease;
}

#booking .field input[type="text"],
#booking .field input[type="tel"],
#booking .field input[type="email"],
#booking .field input[type="number"],
#booking .field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.97rem;
  color: var(--bk-ink);
  background: var(--bk-input-bg);
  border: 1px solid var(--bk-line-strong);
  border-radius: 12px;
  padding: 14px 15px 14px 41px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    background-color 0.18s ease;
}

#booking .field textarea {
  padding-left: 15px;
  resize: vertical;
  line-height: 1.55;
}

#booking .field input::placeholder,
#booking .field textarea::placeholder {
  color: var(--bk-ink-placeholder);
}

#booking .field input:focus,
#booking .field textarea:focus {
  outline: none;
  border-color: var(--bk-amber);
  background: var(--bk-input-bg-focus);
  box-shadow: 0 0 0 4px rgba(254, 167, 16, 0.14);
}

#booking .bk-well:focus-within > svg {
  stroke: var(--bk-amber);
}

/* Firefox/Chrome spinners off — the custom stepper replaces them. */
#booking .field input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
  text-align: center;
  padding: 14px 46px;
}

#booking .field input[type="number"]::-webkit-outer-spin-button,
#booking .field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- error states (classes come from form.js) ---------- */
#booking .field input.error,
#booking .field textarea.error {
  border-color: var(--bk-danger);
  box-shadow: 0 0 0 4px var(--bk-danger-tint);
}

#booking .field-error {
  display: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bk-danger);
}

#booking .field-error.is-visible {
  display: block;
}

/* form.js puts .advance-warning on the FORM when the pickup is inside the
   5-hour window, and marks the two picker fields. Mirrors the live sheet. */
#booking .form-card-body.advance-warning #date,
#booking .form-card-body.advance-warning #time {
  border-color: var(--bk-danger);
  box-shadow: 0 0 0 4px var(--bk-danger-tint);
}

/* .error-text goes on the passenger/bag inputs when the count exceeds what the
   chosen vehicle takes, so the number itself reads as wrong. */
#booking .field input.error-text {
  color: var(--bk-danger);
}

/* ---------- number stepper ---------- */
#booking .bk-step-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

#booking .bk-stepper {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 1px solid var(--bk-line-strong);
  background: var(--bk-tint-5);
  color: var(--bk-ink);
  border-radius: 9px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    transform 0.1s ease;
}

#booking .bk-stepper:hover {
  background: rgba(254, 167, 16, 0.17);
  border-color: var(--bk-amber);
}

#booking .bk-stepper:active {
  transform: scale(0.92);
}

#booking .bk-stepper:focus-visible {
  outline: 3px solid var(--bk-amber);
  outline-offset: 2px;
}

#booking .bk-stepper--minus {
  left: 8px;
}

#booking .bk-stepper--plus {
  right: 8px;
}

/* ---------- vehicle picker ---------- */
#booking .bk-vehicles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#booking .bk-veh input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* The vehicle photos are AI-upscaled, and those artifacts get more obvious the
   larger the image is drawn. The source files are 1536x1024; as a full-width
   banner they were drawn ~340px wide, and the smearing still read at that size.

   Drawing them as a small thumbnail instead puts the browser at roughly a 15x
   downscale, where the resampling averages the artifacts away — downscaling is
   by far the most effective thing you can do to hide a bad upscale. The hover
   zoom is gone too: magnifying the image was doing the opposite.

   The card becomes a horizontal row as a result, which also makes the picker
   about half as tall. */
#booking .vehicle-option {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  cursor: pointer;
  border: 1px solid var(--bk-line-strong);
  border-radius: 14px;
  padding: 12px;
  background: var(--bk-input-bg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
}

#booking .vehicle-option:hover {
  border-color: rgba(254, 167, 16, 0.5);
}

#booking .bk-veh-media {
  width: 104px;
  height: 76px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bk-media-bg);
  flex-shrink: 0;
}

#booking .bk-veh-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--bk-media-img-opacity);
}

/* Tick badge, revealed when the radio is checked. */
#booking .vehicle-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bk-amber);
  color: #111;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

#booking .vehicle-check svg {
  width: 13px;
  height: 13px;
  stroke: #111;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#booking .bk-veh-meta {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding-right: 22px;
}

#booking .bk-veh-label {
  font-size: 0.98rem;
  font-weight: 800;
}

#booking .bk-veh-cap,
#booking .bk-veh-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--bk-ink-dim);
}

#booking .bk-veh-cap svg,
#booking .bk-veh-detail svg {
  width: 15px;
  height: 15px;
  stroke: var(--bk-amber);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 15px;
}

#booking .bk-veh input:checked + .vehicle-option {
  border-color: var(--bk-amber);
  box-shadow: 0 0 0 3px rgba(254, 167, 16, 0.2),
    0 18px 34px var(--bk-shadow-2);
}

#booking .bk-veh input:checked + .vehicle-option .vehicle-check {
  opacity: 1;
  transform: scale(1);
}

#booking .bk-veh input:checked + .vehicle-option .bk-veh-media img {
  opacity: 1;
}

#booking .bk-veh input:focus-visible + .vehicle-option {
  outline: 3px solid var(--bk-amber);
  outline-offset: 3px;
}

/* form.js adds .is-error to every .vehicle-option when none is chosen. */
#booking .vehicle-option.is-error {
  border-color: var(--bk-danger);
  box-shadow: 0 0 0 3px var(--bk-danger-tint-strong);
}

#booking .bk-veh-error {
  display: block;
  margin-top: 9px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bk-danger);
}

/* ---------- child seat toggle ---------- */
#booking .bk-field-check {
  flex-direction: row;
  align-items: center;
  gap: 13px;
  background: var(--bk-input-bg);
  border: 1px solid var(--bk-line-strong);
  border-radius: 12px;
  padding: 12px 15px;
}

#booking .bk-field-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 46px;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--bk-tint-13);
  border: 1px solid var(--bk-line-strong);
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

#booking .bk-field-check input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s ease;
}

#booking .bk-field-check input[type="checkbox"]:checked {
  background: var(--bk-amber);
  border-color: var(--bk-amber);
}

#booking .bk-field-check input[type="checkbox"]:checked::after {
  left: 23px;
}

#booking .bk-field-check input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--bk-amber);
  outline-offset: 2px;
}

#booking .bk-field-check label {
  text-transform: none;
  font-size: 0.94rem;
  color: var(--bk-ink);
  cursor: pointer;
  letter-spacing: 0;
}

/* ---------- live summary rail ---------- */
#booking .bk-side {
  border-left: 1px solid var(--bk-line);
  background: var(--bk-tint-2);
  padding: 26px 24px 32px;
  border-radius: 0 0 21px 0;
}

/* Travels with the scroll and stops at the bottom of .bk-side, which stretches
   to the full height of the card — so the rail stays on screen for as long as
   the booking card does, then parks at its end.

   The max-height is a guard: if the viewport is shorter than the rail, sticky
   would pin the top and push the submit button off-screen with no way to reach
   it. This keeps it self-scrollable in that case. overflow on the sticky
   element itself is fine — only overflow on an ANCESTOR breaks sticky. */
#booking .bk-side-sticky {
  position: sticky;
  /* clears the sticky site navbar */
  top: calc(var(--navbar-height, 126px) + 14px);
  max-height: calc(100vh - var(--navbar-height, 126px) - 28px);
  overflow-y: auto;
}

#booking .bk-side-title {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bk-ink-faint);
  margin-bottom: 16px;
}

#booking .bk-trip {
  display: grid;
  gap: 0;
  margin-bottom: 20px;
}

#booking .bk-trip-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 11px 0;
}

#booking .bk-trip-rail {
  position: relative;
  display: grid;
  place-items: center;
  padding-top: 4px;
}

#booking .bk-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--bk-amber);
  background: var(--bk-input-bg);
}

#booking .bk-dot--end {
  background: var(--bk-amber);
}

#booking .bk-trip-row--from .bk-trip-rail::after {
  content: "";
  position: absolute;
  top: 17px;
  bottom: -15px;
  width: 2px;
  background: rgba(254, 167, 16, 0.45);
}

#booking .bk-trip-k {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bk-ink-faint);
}

#booking .bk-trip-v {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  word-break: break-word;
}

#booking .bk-trip-v.is-empty {
  color: var(--bk-ink-faint);
  font-weight: 500;
  font-style: italic;
}

#booking .bk-facts {
  display: grid;
  gap: 9px;
  padding-top: 16px;
  border-top: 1px solid var(--bk-line);
}

#booking .bk-fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.88rem;
}

#booking .bk-fact-k {
  color: var(--bk-ink-dim);
}

#booking .bk-fact-v {
  font-weight: 800;
}

#booking .bk-fact-v.is-empty {
  color: var(--bk-ink-faint);
  font-weight: 500;
}

/* ---------- actions ---------- */
#booking .bk-actions {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--bk-line);
  display: grid;
  /* Explicit track, not the implicit `auto` one: an auto track sizes to
     max-content, so the fixed-width reCAPTCHA iframe (304px) used to stretch
     the column past the rail and drag the full-width button out with it. */
  grid-template-columns: minmax(0, 1fr);
  gap: 15px;
  justify-items: center;
}

#booking .bk-captcha-row {
  display: grid;
  justify-items: center;
  gap: 8px;
}

/* The widget is a fixed-width light iframe; scale it down so it fits the rail
   without clipping. */
#booking .bk-captcha-error {
  display: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bk-danger);
  text-align: center;
}

#booking .bk-captcha-error.is-visible {
  display: block;
}

/* Text-only button: send-emails.js swaps textContent to "Sending..." and back,
   so any child element would be destroyed. The arrow is a pseudo-element for
   exactly that reason. */
#booking .bk-submit {
  position: relative;
  width: 100%;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #111;
  background: var(--bk-amber);
  border: none;
  border-radius: 13px;
  padding: 16px 22px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s ease, filter 0.2s ease;
}

#booking .bk-submit::after {
  content: "\2192";
  margin-left: 9px;
  display: inline-block;
  transition: transform 0.18s ease;
}

#booking .bk-submit:hover:not(:disabled) {
  filter: brightness(1.05);
}

#booking .bk-submit:hover:not(:disabled)::after {
  transform: translateX(4px);
}

#booking .bk-submit:active:not(:disabled) {
  transform: scale(0.985);
}

#booking .bk-submit:focus-visible {
  outline: 3px solid var(--bk-ink-strong);
  outline-offset: 3px;
}

#booking .bk-submit:disabled {
  cursor: progress;
  filter: saturate(0.5) brightness(0.85);
}

#booking .bk-submit:disabled::after {
  content: "";
  margin: 0;
}

#booking .bk-smallprint {
  font-size: 0.78rem;
  color: var(--bk-ink-faint);
  text-align: center;
  line-height: 1.5;
}

#booking .bk-smallprint a {
  color: var(--bk-ink-dim);
}

/* ---------- flatpickr, dark ---------- */
.flatpickr-calendar {
  background: var(--bk-panel-2);
  border: 1px solid var(--bk-line-strong);
  border-radius: 14px;
  box-shadow: 0 26px 60px var(--bk-shadow-3);
  color: var(--bk-ink);
}.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
  border-bottom-color: var(--bk-panel-2);
}.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
  border-top-color: var(--bk-panel-2);
}.flatpickr-months,
.flatpickr-weekdays {
  background: transparent;
}.flatpickr-month,
.flatpickr-current-month,
.flatpickr-weekday {
  color: var(--bk-ink) !important;
  fill: var(--bk-ink) !important;
}.flatpickr-weekday {
  color: var(--bk-ink-faint) !important;
  font-weight: 700;
}.flatpickr-day {
  color: var(--bk-ink);
  border-radius: 9px;
}.flatpickr-day:hover {
  background: var(--bk-tint-10);
  border-color: transparent;
}.flatpickr-day.today {
  border-color: var(--bk-amber);
}.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--bk-amber);
  border-color: var(--bk-amber);
  color: #111;
  font-weight: 800;
}.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--bk-ink-faint);
}.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--bk-amber);
}.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  color: var(--bk-ink);
}.flatpickr-time input:hover,
.flatpickr-time input:focus {
  background: var(--bk-tint-7);
}.numInputWrapper span {
  border-color: var(--bk-line);
}.numInputWrapper span:hover {
  background: rgba(254, 167, 16, 0.2);
}

/* ---------- intl-tel-input, dark.
   The dropdown is appended to <body> (dropdownContainer), so these cannot be
   scoped to the card. ---------- */
.iti {
  width: 100%;
}.iti__country-list,
.iti__dropdown-content {
  background: var(--bk-panel-2);
  border: 1px solid var(--bk-line-strong);
  border-radius: 12px;
  color: var(--bk-ink);
  box-shadow: 0 24px 55px var(--bk-shadow-3);
}.iti__country.iti__highlight,
.iti__country:hover {
  background: rgba(254, 167, 16, 0.18);
}.iti__dial-code {
  color: var(--bk-ink-faint);
}.iti__search-input {
  background: var(--bk-input-bg);
  color: var(--bk-ink);
  border: 0;
  border-bottom: 1px solid var(--bk-line);
}.iti__selected-country:hover,
.iti__selected-flag:hover {
  background: var(--bk-tint-6);
}.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
  background: var(--bk-tint-6);
}

/* The flag sits where our icon would, so drop the icon and reclaim the room. */
#booking .field--phone .bk-well > svg {
  display: none;
}

#booking .field--phone input[type="tel"] {
  padding-left: 52px;
}

/* ---------- responsive ---------- */
/* The summary rail is 376px so the reCAPTCHA fits. Below this the main
   column gets too narrow for two vehicle cards, so the rail drops under
   the form and everything gets the full width back. */
@media (max-width: 1080px) {
  #booking .bk-body {
    grid-template-columns: minmax(0, 1fr);
  }

#booking .bk-side {
    border-left: 0;
    border-top: 1px solid var(--bk-line);
    border-radius: 0 0 21px 21px;
  }

#booking .bk-side-sticky {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* ==========================================================================
   MOBILE
   The rail has already stacked under the form at 1080px; from here down it is
   about thumbs, tap targets and horizontal budget.
   ========================================================================== */

@media (max-width: 760px) {
  #booking {
    padding: 44px 0;
  }

  #booking .bk-inner {
    padding: 0 14px;
  }

  #booking .bk-head {
    margin-bottom: 20px;
  }

  #booking .bk-h {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  #booking .bk-sub {
    font-size: 0.95rem;
  }

  #booking .bk-cardhead {
    padding: 18px 16px;
  }

  #booking .bk-main,
  #booking .bk-side {
    padding-left: 16px;
    padding-right: 16px;
  }

  #booking .bk-main {
    padding-top: 22px;
    padding-bottom: 26px;
  }

  #booking .bk-notice,
  #booking .bk-late {
    margin-left: 16px;
    margin-right: 16px;
  }

  /* iOS Safari zooms the whole page when a focused input is under 16px, and
     never zooms back out. This is the only reason for the exact 16px. */
  #booking .field input,
  #booking .field textarea {
    font-size: 16px;
  }

  /* 30px is below the ~44px comfortable tap target. */
  #booking .bk-stepper {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  #booking .bk-stepper--minus {
    left: 6px;
  }

  #booking .bk-stepper--plus {
    right: 6px;
  }

  #booking .field input[type="number"] {
    padding: 15px 54px;
  }

  #booking .bk-section + .bk-section {
    margin-top: 26px;
    padding-top: 24px;
  }
}

@media (max-width: 620px) {
  #booking .bk-row,
  #booking .bk-vehicles {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Passengers and bags are short enough to stay side by side, which keeps two
     rows off an already long form. */
  #booking .bk-row--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  /* Below this the pair no longer fits either. */
  #booking .bk-row--pair {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The reCAPTCHA iframe is a fixed 304px and would push the page into
     horizontal scroll. Scale it to fit; transform does not change layout, so
     the row clips the leftover box and reclaims the dead height below it. */
  #booking .bk-captcha-row {
    overflow: hidden;
  }

  #booking #bookingRecaptcha {
    transform: scale(0.82);
    transform-origin: 50% 0;
    margin-bottom: -14px;
  }
}


@media (prefers-reduced-motion: reduce) {
  #booking .vehicle-option,
#booking .bk-submit,
#booking .bk-submit::after,
#booking .bk-stepper {
    transition: none;
  }
}

/* A light ground needs one nudge that is not a token: the toggle knob is white
   on white, so it needs its own edge. */
#booking .bk-field-check input[type="checkbox"]::after {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}