/* Brighton Flyway Transport — mobile/foldable booking layout guard — 2026-09-15
   Prevents the public booking experience from drifting off-screen on Android,
   foldables, orientation changes and browsers that aggressively auto-size text. */

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
main,
#customer-view,
#customer-view .hero-shell {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Grid/flex children default to min-width:auto. On some mobile browsers that
   lets long booking content establish an intrinsic width wider than the
   viewport. Explicitly allow the booking column and its descendants to shrink. */
#customer-view .hero,
#customer-view .hero > *,
#customer-view .booking-card,
#customer-view .booking-card > *,
#customer-view .form-step,
#customer-view .journey-points,
#customer-view .field,
#customer-view .field-grid,
#customer-view .address-input-wrap,
#customer-view .multi-pickup-wrap,
#customer-view .return-options,
#customer-view .booking-quick-summary,
#customer-view .checkout-summary,
#customer-view .vehicle-grid,
#customer-view .vehicle-card,
#customer-view .vehicle-card > * {
  min-width: 0;
  max-width: 100%;
}

#customer-view .hero {
  width: 100%;
}

#customer-view .booking-card {
  width: 100%;
  justify-self: stretch;
}

#customer-view .booking-topline > span,
#customer-view .step,
#customer-view .return-toggle-copy,
#customer-view .booking-quick-summary > div {
  min-width: 0;
}

#customer-view .field input,
#customer-view .field select,
#customer-view .field textarea,
#customer-view .address-input-wrap input {
  min-width: 0;
  max-width: 100%;
}

/* Vehicle cards sit below the booking form but were still carrying a desktop
   intrinsic width on narrow devices. Keeping them shrinkable removes another
   possible source of horizontal page drift. */
@media (max-width: 640px) {
  #customer-view .vehicle-grid,
  #customer-view .vehicle-card,
  #customer-view .vehicle-card-top,
  #customer-view .vehicle-visual,
  #customer-view .vehicle-copy,
  #customer-view .vehicle-specs,
  #customer-view .vehicle-book-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #customer-view .vehicle-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #customer-view .vehicle-visual img {
    max-width: 100%;
  }
}

/* Android foldables can report a desktop-like layout width while the primary
   pointer remains touch. Keep the homepage hero single-column in that case so
   the booking card never lands in an off-screen second column. */
@media (pointer: coarse) and (max-width: 1600px) {
  #customer-view .hero {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 900px !important;
    gap: 38px !important;
  }

  #customer-view .hero-copy {
    max-width: 760px !important;
  }

  #customer-view .booking-card {
    width: min(100%, 690px) !important;
    max-width: 690px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 760px) {
  #customer-view .hero {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #customer-view .booking-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #customer-view .booking-topline {
    gap: 10px;
  }

  #customer-view .booking-topline > span {
    white-space: normal;
    line-height: 1.25;
  }

  #customer-view .availability {
    justify-content: flex-end;
    text-align: right;
  }
}

@media (max-width: 390px) {
  #customer-view .booking-topline {
    padding-left: 12px;
    padding-right: 12px;
  }

  #customer-view .booking-topline > span:first-child {
    font-size: 11px;
  }

  #customer-view .availability {
    font-size: 11px;
  }

  #customer-view .steps {
    padding-left: 12px;
    padding-right: 12px;
  }

  #customer-view .form-step {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Long-address containment patch — 2026-09-15 v2
   Google Places can return long formatted addresses. Keep their intrinsic text
   width inside the booking column so focusing/typing cannot pan the whole page
   horizontally on Android and foldable browsers. */
#customer-view .address-search-field,
#customer-view .journey-point-field,
#customer-view .autocomplete-field,
#customer-view .address-input-wrap {
  width: 100%;
  min-width: 0 !important;
  max-width: 100% !important;
}

#customer-view .address-input-wrap {
  /* Prevent descendants with long text from contributing a wider intrinsic
     inline size while still allowing the suggestions dropdown to render. */
  contain: inline-size;
}

#customer-view .address-input-wrap input,
#customer-view .pickup-stop-location {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* While editing, the input itself may scroll its text to keep the caret visible.
   That is intentional; the page must remain pinned to the viewport. */
#customer-view .address-input-wrap input:focus,
#customer-view .pickup-stop-location:focus {
  text-overflow: clip;
}

#customer-view .address-suggestions {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

#customer-view .address-suggestions button,
#customer-view .address-suggestions button strong,
#customer-view .address-suggestions button small {
  min-width: 0;
  max-width: 100%;
}

#customer-view .address-suggestions button {
  overflow: hidden;
}

#customer-view .address-suggestions button strong,
#customer-view .address-suggestions button small,
#customer-view .field-help,
#customer-view .address-provider {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Final guard for browser focus-panning: nothing in the public booking form is
   allowed to establish an inline size wider than its card. */
#customer-view #booking-card,
#customer-view #booking-card .form-step,
#customer-view #booking-card .journey-points,
#customer-view #booking-card .field-grid,
#customer-view #booking-card .multi-pickup-list,
#customer-view #booking-card .multi-pickup-row,
#customer-view #booking-card .pickup-stop-main {
  min-inline-size: 0;
  max-inline-size: 100%;
}