/* The first step contains only the six fields shown in the reference. */
.booking-card:not(.is-expanded) .trip-switch,
.booking-card:not(.is-expanded) .spc-route-search,
.booking-card:not(.is-expanded) .booking-price-selectors,
.booking-card:not(.is-expanded) .spc-price-summary,
.booking-card:not(.is-expanded) .contact-field,
.booking-card:not(.is-expanded) .notes-field,
.booking-card:not(.is-expanded) .booking-payment-methods,
.booking-card:not(.is-expanded) .booking-service-field,
.booking-card:not(.is-expanded) .booking-contact-row,
.booking-card:not(.is-expanded) .booking-route-preview,
.booking-card:not(.is-expanded) .booking-expanded-close,
.booking-card:not(.is-expanded) .booking-heading p {
  display: none !important;
}
.booking-card:not(.is-expanded) .field-grid > label:not(:has(input[name="date"], input[name="time"], select[name="passengers"], select[name="vehicle"])) {
  display: none !important;
}
.booking-card:not(.is-expanded) .booking-heading {
  margin-bottom: 18px;
}
.booking-card:not(.is-expanded) .booking-route-fields {
  margin-top: 0;
}
.booking-card:not(.is-expanded) .field-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 13px 15px;
}
.booking-card:not(.is-expanded) .booking-submit {
  margin-top: 18px;
}
.booking-card.is-expanded{overscroll-behavior:contain}
.booking-expanded-scrim{touch-action:none;cursor:default}
.booking-card .booking-route-fields{padding:8px 12px}
.booking-card .booking-route-fields label{gap:3px}
.booking-card .booking-route-fields input{height:30px;font-size:13px}
.booking-card .booking-route-fields .route-line{height:12px}
/* The fare is displayed once, alongside the map. Metadata remains here so
   the cart reads the same VAT-inclusive amount the customer sees. */
.hero .booking-route-preview .booking-route-metrics{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.8fr)}
.hero .booking-route-preview .booking-fare-metric.spc-price-summary{grid-column:auto;margin:0;padding:13px 12px;border:1px solid #d9e6e8;background:#eef8f7;color:#164652}
.hero .booking-route-preview .booking-fare-metric.spc-price-summary strong{font-size:clamp(14px,1.1vw,16px);line-height:1.45;font-variant-numeric:tabular-nums;color:#0d6e80}
.hero .booking-route-preview .booking-vat-note{display:block;color:#536f79;font-size:11px;font-weight:500;line-height:1.5;letter-spacing:0;text-transform:none}
.booking-service-field{margin:15px 0 0}
.hero .booking-card.is-expanded .booking-service-field+.booking-price-selectors{margin-top:16px}
.hero .booking-card.is-expanded .booking-identity-row{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1fr);align-items:stretch}
.hero .booking-card .booking-contact-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px;margin-top:15px}
.booking-card .booking-contact-row>.contact-field{margin:0;min-width:0}
/* Keep controls at the top of their row when validation adds a message. */
.hero .booking-card .booking-contact-row>label,.hero .booking-card .booking-identity-row>label{align-self:start;justify-content:flex-start}
.hero .booking-card .booking-contact-row input,.hero .booking-card .booking-identity-row>label>input,.hero .booking-card .booking-identity-row>label>select,.hero .booking-card .booking-identity-row>label>.sc-control{margin-top:0;height:48px;min-height:48px}
.hero .booking-route-preview>.booking-payment-methods{margin:0;min-width:0}
.booking-identity-row>label{min-width:0}
@media(max-width:479px){
 .hero .booking-card.is-expanded .booking-identity-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .hero .booking-card.is-expanded .booking-identity-row>label:first-child{grid-column:1/-1}
 .hero .booking-card .booking-contact-row{grid-template-columns:minmax(0,1fr)}
 .hero .booking-route-preview .booking-route-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hero .booking-route-preview .booking-fare-metric.spc-price-summary{grid-column:1/-1}
}
/* Leave a visible backdrop on touch screens so an outside tap can close the
   dialog there too. The form itself remains independently scrollable. */
@media(max-width:1023px){
 .hero .booking-card.is-expanded{inset:10px;width:calc(100% - 20px);height:calc(100dvh - 20px);max-height:calc(100dvh - 20px);border-radius:18px}
 .hero .booking-card.is-expanded .booking-expanded-close{top:calc(20px + env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right))}
}