/*
 * VALDIER V3 — Booking Card interior (premium redesign, pending aesthetic approval).
 *
 * Only the inside of the card changes. Its position in the hero, width,
 * outer radius, white surface and shadow stay as exported. The Webflow CSS
 * and the card's inline <style> are untouched: these rules are prefixed with
 * .hero_booking_card #booking-form so they win over the inline #booking-form
 * rules, which load later in the page. Notes: docs/BOOKING-CARD.md.
 */

.hero_booking_card {
  --bk-ink: var(--vs-ink, #171717);
  --bk-text: var(--vs-text, #525252);
  --bk-muted: var(--vs-muted, #6b6b6b);
  --bk-placeholder: var(--vs-placeholder, #767676);
  --bk-surface: var(--vs-fill, #f6f6f6);
  --bk-surface-hover: var(--vs-fill-hover, #f1f1f1);
  --bk-hairline: var(--vs-divider, rgba(0, 0, 0, 0.07));
  --bk-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero_booking_card #booking-form {
  grid-row-gap: 1.125rem;
}

/* ---- Header and service toggle: segmented pill ---------------------------- */

/* Four journey modes: the toggle spans the card under the heading, one row. */
.hero_booking_card .hero_booking_header {
  flex-direction: column;
  align-items: stretch;
  grid-row-gap: 1.25rem;
}

/* Editorial opening: a quiet uppercase eyebrow over a larger, medium-weight heading. */
.hero_booking_card .hero_booking_heading {
  grid-row-gap: 0.5rem;
  min-width: 0;
}

.hero_booking_card .hero_booking_eyebrow {
  margin: 0;
  color: var(--vs-muted, #737373);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero_booking_card .hero_booking_title {
  color: var(--bk-ink);
  font-size: 1.875rem;
  line-height: 2.25rem;
  letter-spacing: -0.025em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* Two lines: the first sentence in the accent's text shade (4.5:1 on white
 * for any preset), the second a neutral a step lighter than ink. One line
 * each on desktop; natural wrap on mobile. */
.hero_booking_card .hero_booking_accent {
  color: var(--v-accent-text, #252525);
}

.hero_booking_card .hero_booking_soft {
  color: var(--v-text, #3d3d3d);
}

.hero_booking_card .hero_booking_line {
  display: block;
}

.hero_booking_card #booking-form .booking_service {
  width: 100%;
}

.hero_booking_card #booking-form .booking_toggle {
  position: relative;
  isolation: isolate;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-column-gap: 0;
  padding: 4px;
  border-radius: 999px;
  background-color: var(--vs-sunken, #f3f3f3);
  box-shadow: inset 0 0 0 1px var(--vs-ring, rgba(0, 0, 0, 0.035));
}

.hero_booking_card #booking-form .booking_toggle-label {
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  color: var(--bk-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.hero_booking_card #booking-form .booking_toggle-option:hover .booking_toggle-label {
  color: var(--bk-ink);
}

.hero_booking_card #booking-form .booking_toggle-input:checked + .booking_toggle-label {
  color: var(--v-accent-fg, #fff);
  background-color: var(--v-accent, #252525);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 6px -2px rgba(0, 0, 0, 0.06);
}

/* Where :has() is available, one white thumb slides between the four options
 * instead of the label background switching. */
@supports selector(:has(*)) {
  .hero_booking_card #booking-form .booking_toggle::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / 4);
    border-radius: 999px;
    background-color: var(--v-accent, #252525);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 6px -2px rgba(0, 0, 0, 0.06);
    transition: transform 0.35s var(--bk-ease);
  }

  .hero_booking_card #booking-form .booking_toggle:has(#booking-service-hourly:checked)::before {
    transform: translateX(100%);
  }

  .hero_booking_card #booking-form .booking_toggle:has(#booking-service-flat:checked)::before {
    transform: translateX(200%);
  }

  .hero_booking_card #booking-form .booking_toggle:has(#booking-service-multi:checked)::before {
    transform: translateX(300%);
  }

  .hero_booking_card #booking-form .booking_toggle-input:checked + .booking_toggle-label {
    background-color: transparent;
    box-shadow: none;
  }
}

/* Flat Rates, Multi-Stop: not bookable yet, the fields fade back. */
.hero_booking_card #booking-form .booking_fields.is-soon {
  opacity: 0.32;
}

.hero_booking_card #booking-form .booking_submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Dividers inside the card: a hairline instead of the dashed pattern. */
.hero_booking_card .divider {
  height: 1px;
  background-color: var(--bk-hairline);
}

.hero_booking_card .divider svg {
  display: none;
}

/* ---- Fields --------------------------------------------------------------- */

.hero_booking_card #booking-form .booking_fields {
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
}

.hero_booking_card #booking-form .booking_field {
  grid-row-gap: 0.125rem;
  padding: 0.4375rem 0.875rem;
  border-radius: 0.875rem;
  background-color: var(--bk-surface);
  box-shadow: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.hero_booking_card #booking-form .booking_field:hover {
  background-color: var(--bk-surface-hover);
  box-shadow: none;
}

/* Same ring as the export's focus state (hsl 0 0% 10%), on a white surface. */
.hero_booking_card #booking-form .booking_field:focus-within {
  background-color: var(--vs-card, #fff);
  box-shadow: 0 0 0 1px var(--vs-ink, hsl(0, 0%, 10%)), 0 0 0 4px var(--vs-halo, rgba(0, 0, 0, 0.05));
}

.hero_booking_card #booking-form .booking_field.is-invalid {
  background-color: var(--vs-card, #fff);
  box-shadow: 0 0 0 1px hsl(4, 70%, 46%);
}

/* Pickup, Drop-off and Duration take a full row each, with a small icon. */
.hero_booking_card #booking-form .booking_field.is-half {
  grid-column: 1 / -1;
}

.hero_booking_card #booking-form .booking_field.has-icon {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  grid-column-gap: 0.75rem;
  align-items: center;
}

.hero_booking_card #booking-form .booking_field.has-icon[hidden] {
  display: none;
}

.hero_booking_card #booking-form .booking_icon {
  grid-row: 1 / span 2;
  display: flex;
  color: var(--bk-ink);
  opacity: 0.7;
}

.hero_booking_card #booking-form .has-icon .booking_label,
.hero_booking_card #booking-form .has-icon .booking_input {
  grid-column: 2;
}

.hero_booking_card #booking-form .booking_label {
  color: var(--bk-muted);
  font-size: 0.65625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1rem;
  text-transform: uppercase;
}

.hero_booking_card #booking-form .booking_input {
  color: var(--bk-ink);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.hero_booking_card #booking-form .booking_input::placeholder {
  color: var(--vs-placeholder, #8a8a8a);
  font-weight: 400;
}

/* ---- Journey Summary: an editorial line, not a card ------------------------- */

.hero_booking_card #booking-form .booking_action {
  grid-row-gap: 1.125rem;
  min-width: 0;
}

.hero_booking_card #booking-form .booking_summary {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  grid-row-gap: 0.25rem;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.hero_booking_card #booking-form .booking_action-row {
  align-items: baseline;
  grid-column-gap: 0.75rem;
}

.hero_booking_card #booking-form .booking_action-title,
.hero_booking_card #booking-form #booking-sum-service {
  font-size: 0.65625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1rem;
  text-transform: uppercase;
}

.hero_booking_card #booking-form .booking_action-title {
  color: var(--bk-muted);
}

.hero_booking_card #booking-form #booking-sum-service {
  color: var(--bk-ink);
}

/* Wraps instead of being cut or widening the card with long addresses. */
.hero_booking_card #booking-form .booking_summary-route {
  color: var(--bk-ink);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.5rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.hero_booking_card #booking-form .booking_summary-meta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  grid-column-gap: 0.5rem;
  margin: 0;
  color: var(--bk-text);
  font-size: 0.8125rem;
  line-height: 1.25rem;
}

.hero_booking_card #booking-form .booking_chip,
.hero_booking_card #booking-form #booking-sum-pass {
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--bk-text);
  font-size: 0.8125rem;
  line-height: 1.25rem;
}

.hero_booking_card #booking-form .booking_summary-sep {
  color: var(--vs-faint, #b3b3b3);
}

.hero_booking_card #booking-form .booking_summary-route.is-empty,
.hero_booking_card #booking-form .booking_chip.is-empty,
.hero_booking_card #booking-form .booking_summary-label.is-empty {
  color: var(--bk-placeholder);
  font-weight: 400;
}

/* ---- Continue: full width, black, slightly lifted ------------------------- */

.hero_booking_card #booking-form .booking_submit {
  width: 100%;
  height: 3.625rem;
  padding: 0 1.5rem;
  border-radius: 0.9375rem;
  background-color: var(--bk-ink);
  color: var(--vs-on-ink, #fff);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.16), 0 14px 28px -14px rgba(23, 23, 23, 0.55);
  transition: background-color 0.2s ease, box-shadow 0.25s var(--bk-ease), transform 0.25s var(--bk-ease);
}

@media (hover: hover) {
  .hero_booking_card #booking-form .booking_submit:hover {
    background-color: var(--vs-ink-hover, #262626);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(23, 23, 23, 0.16), 0 18px 32px -14px rgba(23, 23, 23, 0.6);
  }
}

.hero_booking_card #booking-form .booking_submit:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.2), 0 8px 16px -10px rgba(23, 23, 23, 0.5);
}

.hero_booking_card #booking-form .booking_note {
  margin-top: -0.375rem;
  color: var(--bk-muted);
  font-size: 0.75rem;
  line-height: 1.125rem;
}

/* ---- Responsive -------------------------------------------------------------- */

@media screen and (max-width: 479px) {
  .hero_booking_card .hero_booking_title {
    font-size: 1.625rem;
    line-height: 2rem;
  }

  .hero_booking_card .hero_booking_line {
    display: inline;
  }

  /* Taller to tap; tighter so the four modes stay on one row. */
  .hero_booking_card #booking-form .booking_toggle-label {
    height: 2.25rem;
    padding: 0 0.25rem;
    font-size: 0.75rem;
    letter-spacing: 0;
  }
}

/* Tablet: the card keeps its 500px width, so Date, Time and Passengers stay on one row. */
@media screen and (min-width: 480px) and (max-width: 991px) {
  .hero_booking_card #booking-form .booking_fields {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .hero_booking_card #booking-form .booking_field.is-date {
    grid-column: span 5;
  }

  .hero_booking_card #booking-form .booking_field.is-time {
    grid-column: span 4;
  }

  .hero_booking_card #booking-form .booking_field.is-pass {
    grid-column: span 3;
  }
}

/* Touch widths: 16px text in inputs, or iOS Safari zooms the page on focus. */
@media screen and (max-width: 767px) {
  .hero_booking_card #booking-form .booking_input {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero_booking_card #booking-form .booking_toggle::before,
  .hero_booking_card #booking-form .booking_toggle-label,
  .hero_booking_card #booking-form .booking_field,
  .hero_booking_card #booking-form .booking_submit {
    transition: none;
  }

  .hero_booking_card #booking-form .booking_submit:hover {
    transform: none;
  }
}