/* Booking-only components opt in to the shared UI values in style.css.
   Map layout, vehicle selection, totals and payment states keep their owners. */
.slt-quote .slt-modal__head {
  gap: 12px;
  background: var(--quote-paper);
  border-color: var(--quote-line);
}
.slt-quote :is(#passengerModal, #flightModal, #timeModal) .slt-modal__title {
  color: var(--quote-ink);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.02em;
}
.slt-quote :is(#passengerModal, #flightModal, #timeModal) .slt-modal__dialog {
  border: 1px solid var(--quote-line);
  border-radius: var(--slt-ui-radius-panel, 20px);
  background: var(--slt-ui-surface, #fff);
  box-shadow: var(--slt-ui-shadow-panel, 0 20px 64px #192b3a29);
}
.slt-quote .slt-modal__x {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: var(--slt-ui-radius-control, 8px);
  color: var(--quote-ink);
  border-color: var(--quote-line);
}
.slt-quote .slt-modal__x:hover { background: var(--quote-soft); }
.slt-quote .slt-modal__x:focus-visible {
  outline: 3px solid var(--quote-focus);
  outline-offset: 2px;
}
.slt-quote .slt-modal .slt-qinput {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  font-size: 1rem;
  border-radius: var(--slt-ui-radius-control, 8px);
}
.slt-quote .slt-modal .slt-frow { min-width: 0; }
.slt-quote .slt-modal .slt-check { color: var(--quote-ink); font-weight: 500; }
.slt-quote #passengerModal .slt-captcha {
  background: var(--quote-soft);
  border-color: var(--quote-line);
  border-radius: var(--slt-ui-radius-card, 12px);
}
.slt-quote :is(#passengerModal, #flightModal, #timeModal) .slt-modal__actions .slt-btn {
  min-height: 48px;
  border-radius: var(--slt-ui-radius-control, 8px);
  font-weight: 600;
}
.slt-quote #passengerModal #passengerContinueBtn { font-weight: 600; }

/* A transparent full-viewport native host retains the existing backdrop and
   panel. Its top layer makes the background inert automatically. Do not move
   passengerModal to this layer: reCAPTCHA challenges can live outside it. */
.slt-quote dialog.slt-modal {
  margin: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 12px;
  border: 0;
  color: var(--quote-ink);
  background: transparent;
  overflow: hidden;
}
.slt-quote dialog.slt-modal:not([open]):not([data-fallback-open]) { display: none; }
.slt-quote dialog.slt-modal::backdrop { background: transparent; }
.slt-quote :is(#flightModal, #timeModal) .slt-modal__dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.slt-quote :is(#flightModal, #timeModal) .slt-modal__head { flex: 0 0 auto; }
.slt-quote :is(#flightModal, #timeModal) .slt-modal__body {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 20px;
}
.slt-quote :is(#flightModal, #timeModal) .slt-modal__actions {
  position: sticky;
  bottom: -20px;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px -20px -20px;
  padding: 12px 20px;
  background: var(--slt-ui-surface, #fff);
  border-color: var(--quote-line);
}
.slt-quote :is(#flightModal, #timeModal) .slt-modal__actions .slt-btn { width: 100%; }

/* Respond to component width, including narrow desktop sidebars.
   Existing media-query layouts remain the fallback in older browsers. */
@supports (container-type: inline-size) {
  .slt-quote .slt-modal__body { container: booking-fields / inline-size; }
  .slt-quote .slt-qpanel--left { container: booking-route / inline-size; }
  .slt-quote .slt-vehicles { container: booking-vehicles / inline-size; }
  .slt-quote .slt-modal .slt-fgrid2,
  .slt-quote .slt-qpanel--left .slt-fgrid2 { grid-template-columns: minmax(0, 1fr); }
  @container booking-fields (min-width: 28rem) {
    .slt-quote .slt-modal .slt-fgrid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @container booking-route (min-width: 25rem) {
    .slt-quote .slt-qpanel--left .slt-fgrid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @container booking-vehicles (min-width: 27rem) {
    .slt-quote .slt-veh-panel .slt-vcard__top {
      grid-template-columns: 104px minmax(0, 1fr);
      gap: 12px 16px;
    }
    .slt-quote .slt-veh-panel .slt-vmedia { width: 104px; height: 76px; }
  }
  @container booking-vehicles (max-width: 20rem) {
    .slt-quote .slt-veh-panel .slt-vcard__top {
      grid-template-columns: 54px minmax(0, 1fr);
      gap: 10px;
    }
    .slt-quote .slt-veh-panel .slt-vmedia { width: 54px; height: 48px; }
    .slt-quote .slt-veh-panel .slt-vtitle { font-size: 1rem; }
  }
}

/* Mobile sheets: fixed header, scrolling form and safe-area-aware actions. */
@media (max-width: 575.98px) {
  .slt-quote dialog.slt-modal,
  .slt-quote #passengerModal { align-items: flex-end; padding: 0; }
  .slt-quote :is(#passengerModal, #flightModal, #timeModal) .slt-modal__dialog {
    width: 100%;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
  }
  .slt-quote #passengerModal .slt-modal__dialog {
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
  }
  .slt-quote :is(#flightModal, #timeModal) .slt-modal__head { padding: 14px 16px; }
  .slt-quote :is(#flightModal, #timeModal) .slt-modal__body { padding: 16px; }
  .slt-quote :is(#flightModal, #timeModal) .slt-modal__actions {
    bottom: -16px;
    margin: 16px -16px -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
}
@media (forced-colors: active) {
  .slt-quote .slt-modal__dialog { border: 1px solid CanvasText; }
  .slt-quote .slt-modal__backdrop { background: Canvas; opacity: .7; }
}