/* Brighton Flyway Transport — mobile long-address overflow fix v3 — 2026-09-15
   Root cause: the hero and hero-shell used overflow:hidden. Those elements still
   create programmatically scrollable containers. On some Android/Samsung/foldable
   browsers, focusing a long single-line address can scroll those ancestors sideways
   to keep the caret visible, shifting the whole booking card off-screen.

   overflow:clip keeps the same visual clipping but does NOT create a scroll container. */

html,
body,
#customer-view,
#customer-view .hero-shell,
#customer-view .hero,
#customer-view #booking-card,
#customer-view #booking-card .form-step,
#customer-view #booking-card .journey-points,
#customer-view #booking-card .journey-point-field,
#customer-view #booking-card .address-search-field,
#customer-view #booking-card .autocomplete-field,
#customer-view #booking-card .address-input-wrap,
#customer-view #booking-card .field,
#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%;
}

/* Critical fix: hidden overflow is still scrollable by focus/caret APIs.
   clip prevents that horizontal focus-pan while preserving the existing visuals. */
#customer-view .hero-shell,
#customer-view .hero {
  overflow: clip !important;
}

/* Root elements must never expose a horizontal page scroller either. */
html,
body,
main,
#customer-view {
  overflow-x: clip !important;
  max-width: 100%;
}

/* Long address text may scroll INSIDE the input, but must never contribute a
   wider intrinsic size to the booking card or any of its grid/flex ancestors. */
#customer-view #pickup-location,
#customer-view #destination-location,
#customer-view .pickup-stop-location,
#customer-view #customer-change-address,
#customer-view .address-input-wrap input {
  display: block;
  inline-size: 100% !important;
  width: 100% !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#customer-view #pickup-location:focus,
#customer-view #destination-location:focus,
#customer-view .pickup-stop-location:focus,
#customer-view #customer-change-address:focus {
  text-overflow: clip;
}

/* Suggestions must wrap inside the same column and never establish a wider width. */
#customer-view .address-suggestions {
  inset-inline: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

#customer-view .address-suggestions button,
#customer-view .address-suggestions button strong,
#customer-view .address-suggestions button small,
#customer-view .address-provider,
#customer-view .field-help {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

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

/* Narrow-screen hard guard. Keeps the card fully inside the viewport even on
   foldables that report unusual layout widths while focused. */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1600px) {
  #customer-view .hero {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #customer-view #booking-card {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 690px !important;
    min-width: 0 !important;
    margin-inline: auto !important;
  }
}

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

  #customer-view #booking-card {
    max-width: 100% !important;
  }
}