/* ========================================================================== 
   iOS / iPhone native date input width containment · 2026-09-20

   Safari can give <input type="date"> an intrinsic native-control width that
   is wider than a responsive grid cell. width:100% alone is not always enough
   on iPhone, so explicitly constrain both the grid item and the WebKit control.
   This keeps the native date picker while preventing the pickup/return date
   fields from spilling past the right edge of the booking card.
   ========================================================================== */

@media (max-width: 760px) {
  /* The date rows themselves must be allowed to shrink below WebKit's native
     preferred width. Keep the clipping on the field, not the whole card. */
  #customer-view #quote-form > .field-grid,
  #customer-view .return-options > .field-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
  }

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

  #customer-view #date,
  #customer-view #return-date {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    inline-size: 100% !important;
    max-width: 100% !important;
    max-inline-size: 100% !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #customer-view #date::-webkit-date-and-time-value,
  #customer-view #return-date::-webkit-date-and-time-value,
  #customer-view #date::-webkit-datetime-edit,
  #customer-view #return-date::-webkit-datetime-edit {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-align: left !important;
  }
}

/* iPhone/iPad Safari-specific hardening. -webkit-fill-available uses the
   actual containing block rather than the native date control's preferred
   intrinsic width. `appearance:none` changes only the presentation; the input
   remains type=date and continues to use Safari's native date picker. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 760px) {
    #customer-view #date,
    #customer-view #return-date {
      -webkit-appearance: none !important;
      appearance: none !important;
      width: -webkit-fill-available !important;
      inline-size: -webkit-fill-available !important;
      max-width: -webkit-fill-available !important;
      max-inline-size: -webkit-fill-available !important;
      border-radius: 10px !important;
    }
  }
}