/* Brighton Flyway Transport — customer booking flow mobile optimisation — 2026-09-16
   Presentation-only responsive improvements. No pricing, geofence or booking logic changes. */

/* Let every interactive booking child shrink cleanly inside the card. */
#customer-view #booking-card,
#customer-view #booking-card *,
#customer-view #booking-card *::before,
#customer-view #booking-card *::after { box-sizing: border-box; }

#customer-view #booking-card .field,
#customer-view #booking-card .field-grid,
#customer-view #booking-card .journey-points,
#customer-view #booking-card .return-options,
#customer-view #booking-card .booking-quick-summary,
#customer-view #booking-card .vehicle-options,
#customer-view #booking-card .vehicle-choice,
#customer-view #booking-card .booking-addons,
#customer-view #booking-card .booking-addon-card,
#customer-view #booking-card .price-breakdown,
#customer-view #booking-card .checkout-summary,
#customer-view #booking-card .checkout-summary-primary,
#customer-view #booking-card .checkout-detail-grid {
  min-width: 0;
  max-width: 100%;
}

/* A comfortable thumb target without altering desktop density. */
@media (pointer: coarse) {
  #customer-view #booking-card button,
  #customer-view #booking-card select,
  #customer-view #booking-card input:not([type="checkbox"]):not([type="radio"]),
  #customer-view #booking-card textarea {
    min-height: 44px;
  }
}

@media (max-width: 760px) {
  /* Keep the booking card visually dominant on phones and foldables. */
  #customer-view .hero {
    padding-inline: 10px !important;
    gap: 28px !important;
  }

  #customer-view #booking-card {
    border-radius: 16px !important;
    box-shadow: 0 16px 44px rgba(35, 27, 20, .14) !important;
  }

  #customer-view .booking-topline {
    min-height: 44px;
    height: auto !important;
    padding: 10px 14px !important;
    gap: 8px;
    flex-wrap: wrap;
  }

  #customer-view .booking-topline > span {
    line-height: 1.2;
  }

  #customer-view .availability {
    white-space: nowrap;
    margin-left: auto;
  }

  /* Progress is compact, legible and remains one row. */
  #customer-view .steps {
    height: 60px !important;
    padding: 0 12px !important;
    grid-template-columns: auto minmax(12px, 1fr) auto minmax(12px, 1fr) auto !important;
  }

  #customer-view .steps > i { margin: 0 6px !important; }

  #customer-view .step {
    min-width: 0;
    gap: 0 !important;
  }

  #customer-view .step b {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  #customer-view .step em { display: none !important; }

  #customer-view .form-step {
    padding: 18px 14px calc(18px + env(safe-area-inset-bottom)) !important;
  }

  #customer-view .card-heading { margin-bottom: 14px; }
  #customer-view .compact-heading { margin-bottom: 12px; }
  #customer-view .card-heading h2 { font-size: 22px !important; }

  /* Inputs: iOS-safe type size, stronger visual grouping and touch spacing. */
  #customer-view .field { margin-bottom: 12px; }
  #customer-view .field label {
    font-size: 12px !important;
    line-height: 1.3;
    margin-bottom: 6px !important;
  }

  #customer-view .field input,
  #customer-view .field select,
  #customer-view .field textarea,
  #customer-view .address-input-wrap input {
    width: 100%;
    max-width: 100%;
    min-height: 48px !important;
    font-size: 16px !important;
    line-height: 1.2;
    padding-top: 11px;
    padding-bottom: 11px;
  }

  #customer-view .field textarea { min-height: 96px !important; }

  #customer-view .journey-points { gap: 4px; margin-bottom: 12px; }
  #customer-view .journey-point-field { margin-bottom: 8px; }
  #customer-view .journey-point-field input { padding-left: 46px !important; }
  #customer-view .journey-point-field .address-search-icon {
    width: 30px;
    height: 30px;
    left: 9px;
  }

  #customer-view .field-help,
  #customer-view .return-help,
  #customer-view .multi-pickup-note,
  #customer-view .secure-note {
    font-size: 11.5px !important;
    line-height: 1.45;
  }

  #customer-view .address-suggestions {
    max-height: min(42vh, 280px) !important;
    border-radius: 10px;
  }

  #customer-view .address-suggestions button {
    min-height: 52px;
    padding: 10px 12px !important;
  }

  #customer-view .address-suggestions button strong { font-size: 13px !important; }
  #customer-view .address-suggestions button small { font-size: 11.5px !important; }

  /* Keep date/time side-by-side on most phones; collapse only when truly narrow. */
  #customer-view #quote-form > .field-grid,
  #customer-view .return-options .field-grid,
  #customer-view .luggage-grid,
  #customer-view #details-form > .field-grid {
    gap: 10px !important;
  }

  #customer-view #quote-form > .field-grid,
  #customer-view .return-options .field-grid,
  #customer-view .luggage-primary-grid,
  #customer-view .luggage-more-options,
  #customer-view #details-form > .field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #customer-view .luggage-primary-grid > .field:nth-child(3) {
    grid-column: 1 / -1;
  }

  /* Multi-pickup action can wrap without becoming a tiny split row. */
  #customer-view .multi-pickup-actions {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;
  }

  #customer-view .multi-pickup-actions .secondary.compact {
    min-height: 44px;
    flex: 1 1 220px;
    white-space: normal;
    line-height: 1.25;
  }

  #customer-view .extra-pickup-live-summary {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* Return toggle behaves like a single large tap card. */
  #customer-view .return-toggle {
    min-height: 58px;
    padding: 10px 11px !important;
    gap: 10px !important;
  }

  #customer-view .return-toggle-copy strong { font-size: 12.5px !important; }
  #customer-view .return-toggle-copy small { font-size: 10.5px !important; line-height: 1.35; }

  /* Compact journey summary with a reliable edit target. */
  #customer-view .booking-quick-summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 12px !important;
  }

  #customer-view .booking-quick-summary strong,
  #customer-view .booking-quick-summary small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #customer-view .summary-edit,
  #customer-view .back {
    min-height: 42px;
    min-width: 68px;
  }

  /* Passenger/luggage controls: compact 2-column grid with clear labels. */
  #customer-view .luggage-grid .field { margin-bottom: 0; }
  #customer-view .booking-detail-toggle {
    min-height: 54px;
    padding: 10px 12px !important;
    gap: 10px;
  }

  #customer-view .booking-detail-toggle span { min-width: 0; }
  #customer-view .booking-detail-toggle strong { font-size: 12px !important; }
  #customer-view .booking-detail-toggle small { font-size: 10.5px !important; line-height: 1.35; }
  #customer-view .booking-detail-toggle > b { white-space: nowrap; }

  /* Vehicle recommendation and choices are stacked for fast scanning. */
  #customer-view .vehicle-recommendation {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 11px !important;
    padding: 11px !important;
  }

  #customer-view .vehicle-recommendation > b {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: -2px;
  }

  #customer-view .vehicle-rec-media {
    width: 82px !important;
    min-width: 82px !important;
    height: 62px !important;
  }

  #customer-view .vehicle-options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #customer-view .vehicle-choice {
    width: 100% !important;
    min-height: 88px;
    display: grid !important;
    grid-template-columns: 78px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }

  #customer-view .vehicle-choice-media {
    width: 78px !important;
    height: 62px !important;
    min-width: 0 !important;
  }

  #customer-view .vehicle-choice-main { min-width: 0; }
  #customer-view .vehicle-choice-main strong { font-size: 13px !important; }
  #customer-view .vehicle-choice-main small {
    display: block;
    font-size: 10.5px !important;
    line-height: 1.35;
    white-space: normal !important;
  }

  #customer-view .vehicle-choice-price {
    min-width: 58px;
    text-align: right;
    white-space: nowrap;
  }

  #customer-view .vehicle-choice > em {
    grid-column: 2 / -1;
    justify-self: start;
    margin-top: -3px;
  }

  /* Extras become thumb-friendly cards with the control beneath text when needed. */
  #customer-view .booking-addons-prominent {
    margin-top: 14px !important;
    border-radius: 14px !important;
  }

  #customer-view .booking-addons-prominent .booking-addons-heading {
    padding: 13px 12px 11px !important;
  }

  #customer-view .booking-addons-prominent .booking-addons-grid {
    padding: 9px !important;
    gap: 8px !important;
  }

  #customer-view .booking-addons-prominent .booking-addon-card.addon-large-card {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 8px 10px !important;
    padding: 12px !important;
    min-height: 0 !important;
    border-radius: 12px !important;
  }

  #customer-view .booking-addons-prominent .addon-icon-large {
    width: 40px !important;
    height: 40px !important;
  }

  #customer-view .booking-addons-prominent .addon-copy strong { font-size: 13px !important; }
  #customer-view .booking-addons-prominent .addon-copy small { font-size: 10.5px !important; line-height: 1.35; }

  #customer-view .booking-addons-prominent .addon-card-side {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding-top: 9px;
    margin-top: 1px;
    border-top: 1px solid #eee9e4;
  }

  #customer-view .booking-addons-prominent .addon-card-side > b {
    max-width: none !important;
    white-space: normal !important;
    text-align: left !important;
    font-size: 11px !important;
  }

  #customer-view .booking-addons-prominent .addon-stepper {
    grid-template-columns: 44px 44px 44px !important;
    min-width: 132px;
  }

  #customer-view .booking-addons-prominent .addon-stepper button,
  #customer-view .booking-addons-prominent .addon-stepper input {
    height: 44px !important;
    min-height: 44px !important;
  }

  #customer-view .booking-addons-prominent .addon-stepper button { width: 44px !important; font-size: 18px !important; }
  #customer-view .booking-addons-prominent .addon-stepper input { width: 44px !important; font-size: 14px !important; }

  /* Fare remains clearly visible immediately before the continue action. */
  #customer-view .price-breakdown {
    margin-top: 14px;
    border-radius: 12px;
    overflow: hidden;
  }

  #customer-view .price-breakdown > div {
    min-height: 38px;
    padding: 8px 11px !important;
    gap: 12px;
  }

  #customer-view .price-breakdown span { font-size: 10.5px !important; }
  #customer-view .price-breakdown strong { font-size: 12px !important; text-align: right; }
  #customer-view .price-breakdown .price-total { min-height: 50px; }
  #customer-view .price-breakdown .price-total strong { font-size: 22px !important; }

  /* Main CTAs stay large enough for thumbs and account for the home indicator. */
  #customer-view .primary.booking-next,
  #customer-view .payment-button,
  #customer-view #new-booking {
    min-height: 54px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    padding-inline: 15px !important;
    margin-top: 12px;
  }

  #customer-view .primary.booking-next b,
  #customer-view .payment-button b,
  #customer-view #new-booking b {
    width: 32px;
    height: 32px;
  }

  /* Checkout summary: vehicle + fare first, route/details below without truncating crucial info. */
  #customer-view .checkout-summary {
    display: block !important;
    padding: 11px !important;
    min-height: 0 !important;
    border-radius: 13px !important;
  }

  #customer-view .checkout-summary-primary {
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) auto !important;
    align-items: center;
    gap: 10px;
  }

  #customer-view .checkout-vehicle-visual {
    width: 70px !important;
    height: 54px !important;
  }

  #customer-view .checkout-vehicle-copy { min-width: 0; }
  #customer-view .checkout-vehicle-copy strong { white-space: normal !important; }
  #customer-view .checkout-fare { text-align: right; white-space: nowrap; }
  #customer-view .checkout-fare strong { font-size: 23px !important; }

  #customer-view .checkout-route-row {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid rgba(255,255,255,.12);
  }

  #customer-view .checkout-route-row strong {
    display: block;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  #customer-view .checkout-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #customer-view .checkout-detail-item { min-width: 0; }
  #customer-view .checkout-detail-item strong { overflow-wrap: anywhere; }

  /* Consent is a full-width touch card, links remain independently tappable. */
  #customer-view .legal-check {
    padding: 12px !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }

  #customer-view .legal-check .fake-check {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }

  #customer-view .legal-check strong { font-size: 12px !important; }
  #customer-view .legal-check small { font-size: 10.5px !important; line-height: 1.45; }

  #customer-view .payment-method-heading { padding: 12px !important; }
  #customer-view .payment-method-heading strong { font-size: 14px !important; }
  #customer-view .payment-method-heading small { font-size: 10.5px !important; line-height: 1.45; }

  #customer-view .booking-note { align-items: flex-start !important; }
}

@media (max-width: 520px) {
  #customer-view .hero { padding-inline: 8px !important; }
  #customer-view .form-step { padding-inline: 12px !important; }

  /* Modern large iPhones can be 431–440 CSS px wide. The previous 430px
     cutoff left Safari using the two-column date/time layout, whose native
     controls can establish a wider intrinsic width and push the card sideways. */
  #customer-view #quote-form > .field-grid,
  #customer-view .return-options .field-grid,
  #customer-view #details-form > .field-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #customer-view #quote-form > .field-grid > .field,
  #customer-view .return-options .field-grid > .field,
  #customer-view #details-form > .field-grid > .field {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #customer-view input[type="date"],
  #customer-view input[type="time"],
  #customer-view input[type="datetime-local"] {
    display: block !important;
    width: 100% !important;
    inline-size: 100% !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
    max-width: 100% !important;
    max-inline-size: 100% !important;
    overflow: hidden !important;
  }

  #customer-view .luggage-primary-grid,
  #customer-view .luggage-more-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #customer-view .luggage-primary-grid > .field:nth-child(3) { grid-column: 1 / -1; }

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

  #customer-view .vehicle-choice-media { width: 70px !important; height: 58px !important; }
  #customer-view .vehicle-choice-price {
    grid-column: 2;
    justify-self: start;
    text-align: left;
    min-width: 0;
  }
  #customer-view .vehicle-choice > em { grid-column: 2; }

  #customer-view .checkout-detail-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 350px) {
  #customer-view .booking-topline { padding-inline: 10px !important; }
  #customer-view .availability { width: 100%; margin-left: 0; justify-content: flex-start !important; text-align: left !important; }
  #customer-view .steps { padding-inline: 9px !important; }
  #customer-view .steps > i { margin-inline: 3px !important; }
  #customer-view .luggage-primary-grid,
  #customer-view .luggage-more-options,
  #customer-view .checkout-detail-grid { grid-template-columns: 1fr !important; }
  #customer-view .luggage-primary-grid > .field:nth-child(3) { grid-column: auto; }
}

/* Avoid motion-heavy transitions when users request less motion. */
@media (prefers-reduced-motion: reduce) {
  #customer-view #booking-card *,
  #customer-view #booking-card *::before,
  #customer-view #booking-card *::after {
    scroll-behavior: auto !important;
  }
}

/* iPhone Safari native date/time height fix — 2026-09-19
   iOS WebKit can add its own internal date/time control height on top of the
   mobile padding, making these controls noticeably taller than address inputs.
   Keep native pickers, but lock the visible control to the same 48px rhythm. */
@media (max-width: 520px) {
  #customer-view #booking-card input[type="date"],
  #customer-view #booking-card input[type="time"],
  #customer-view #booking-card input[type="datetime-local"] {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    inline-size: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
    line-height: normal !important;
    vertical-align: middle !important;
  }

  #customer-view #booking-card input[type="date"]::-webkit-date-and-time-value,
  #customer-view #booking-card input[type="time"]::-webkit-date-and-time-value,
  #customer-view #booking-card input[type="datetime-local"]::-webkit-date-and-time-value {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important;
    text-align: left !important;
  }
}