/* Native date controls and the passenger stepper must fit their grid tracks. */
.charter-form .field,
.charter-form .field :is(input, select, textarea) { min-width: 0; }
.charter-request-heading,
.charter-form :is(.field, .charter-fieldset, .charter-trip-choice) { scroll-margin-top: calc(var(--header-h) + 20px); }

@media (min-width: 768px) and (max-width: 900px) {
  body[data-page="charter"] .charter-form .charter-flight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .charter-form .charter-flight-grid > .field,
  .charter-form .charter-flight-grid > .field:nth-child(-n+2) { grid-column: auto; }
  .charter-form .charter-flight-grid > .field:nth-child(5),
  .charter-form .charter-flight-grid > .field--wide { grid-column: 1 / -1; }
  .charter-form .charter-passenger-control { max-width: 280px; }
}

/* Phones use a straightforward enquiry form, not the desktop ticket preview. */
@media (max-width: 767px) {
  body[data-page="charter"] .charter-request-section { padding-block: 44px 52px; }
  .charter-request-heading { text-align: left; margin-bottom: 28px; }
  .charter-request-heading h2 { font-size: 32px; margin-block: 14px 16px; }
  .charter-request-heading > p:not(.eyebrow) { font-size: 18px; line-height: 1.6; }
  body[data-page="charter"] .charter-form {
    padding: 28px 0 0;
    border: 0;
    border-top: 1px solid #3b4b55;
    border-radius: 0;
    background: transparent;
    color: #edf4f8;
    box-shadow: none;
    gap: 24px;
  }
  body[data-page="charter"] .charter-route-preview { display: none; }
  body[data-page="charter"] .charter-form .charter-fieldset > legend {
    color: #edf4f8;
    font: 500 20px/1.4 "Urbanist", sans-serif;
    margin-bottom: 22px;
  }
  body[data-page="charter"] .charter-fieldset legend span { color: #b4cbd0; font-size: 12px; }
  body[data-page="charter"] .charter-fieldset + .charter-fieldset { border-color: #3b4b55; padding-top: 28px; }
  body[data-page="charter"] .charter-form .form-grid,
  body[data-page="charter"] .charter-form .charter-flight-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  body[data-page="charter"] .charter-form .field { grid-template-columns: minmax(0, 1fr); }
  .charter-form .charter-flight-grid > .field,
  .charter-form .charter-flight-grid > .field:nth-child(-n+2) { grid-column: 1 / -1; }
  body[data-page="charter"] .charter-trip-choice legend,
  body[data-page="charter"] .charter-form .field label {
    color: #e0e9ee;
    font: 500 15px/1.45 "Urbanist", sans-serif;
    text-transform: none;
    letter-spacing: 0;
  }
  body[data-page="charter"] .charter-trip-choice legend { margin-bottom: 10px; }
  .charter-trip-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0; border: 0; background: transparent; }
  .charter-trip-options span { min-height: 48px; padding: 10px 6px; border: 1px solid #60737e; border-radius: 4px; color: #edf4f8; font: 500 15px/1.4 "Urbanist", sans-serif; }
  .charter-trip-options input:checked + span { background: #edf4f8; color: #13232d; border-color: #edf4f8; }
  .charter-trip-options label:hover span { background: #253741; }
  .charter-trip-options label:hover input:checked + span { background: #edf4f8; }
  .charter-trip-options input:focus-visible + span { outline-color: #b4e4d5; outline-offset: 3px; }
  body[data-page="charter"] .charter-request-section .charter-form .field :is(input, select, textarea) {
    width: 100%;
    max-width: 100%;
    min-height: 54px;
    padding: 13px 14px;
    border: 1px solid #60737e;
    border-radius: 4px;
    background: #13222c;
    color: #edf4f8;
    color-scheme: dark;
    font: 400 17px/1.5 "Urbanist", sans-serif;
    box-shadow: none;
  }
  /* iPhone date/time controls otherwise retain their native intrinsic width. */
  body[data-page="charter"] .charter-request-section .charter-form .field :is(input[type="date"], input[type="time"]) {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    height: 54px;
    overflow: hidden;
  }
  body[data-page="charter"] .charter-request-section .charter-form .field select {
    appearance: none;
    -webkit-appearance: none;
    height: 54px;
    padding-right: 42px;
    background-image: linear-gradient(45deg, transparent 50%, #b0c1cc 50%), linear-gradient(135deg, #b0c1cc 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
  }
  body[data-page="charter"] .charter-form .field option { background: #13222c; color: #edf4f8; }
  body[data-page="charter"] .charter-form .field textarea { min-height: 120px; resize: vertical; }
  body[data-page="charter"] .charter-form .opt,
  body[data-page="charter"] .charter-form .field :is(input, textarea)::placeholder { color: #b0c1cc; letter-spacing: 0; }
  body[data-page="charter"] .charter-form .field :is(input, select, textarea):focus { border-color: #b4e4d5; outline-color: #b4e4d5; background-color: #192e38; }
  body[data-page="charter"] .charter-form .field:focus-within label { color: #edf4f8; }
  body[data-page="charter"] .charter-form input::-webkit-date-and-time-value { min-width: 0; max-width: 100%; text-align: left; }
  .charter-passenger-control { grid-template-columns: 54px minmax(0, 1fr) 54px; gap: 8px; }
  .charter-passenger-control button { min-height: 54px; border-color: #60737e; color: #edf4f8; background: #13222c; }
  .charter-passenger-control button:hover { background: #253741; }
  .charter-passenger-control button:focus-visible { outline-color: #b4e4d5; }
  body[data-page="charter"] .charter-form .check { grid-template-columns: 22px minmax(0, 1fr); gap: 12px; color: #c9d5dc; font-size: 15px; line-height: 1.6; }
  .charter-form .check input { color-scheme: dark; accent-color: #b4e4d5; }
  body[data-page="charter"] .charter-form a { color: #b4e4d5; }
  body[data-page="charter"] .charter-form .form-disclaimer { color: #b8c7d1; border-color: #3b4b55; font-size: 14px; line-height: 1.65; }
  body[data-page="charter"] .charter-form .form-status { color: #f0a69b; font-size: 16px; line-height: 1.6; }
  body[data-page="charter"] .charter-form .form-status.ok { color: #b4e4d5; }
  body[data-page="charter"] .charter-form .form-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; border-color: #3b4b55; }
  body[data-page="charter"] .charter-form .form-foot .btn { width: 100%; min-height: 54px; padding: 14px; border: 1px solid #edf4f8; border-radius: 4px; background: #edf4f8; color: #13232d; font: 500 17px/1.4 "Urbanist", sans-serif; letter-spacing: 0; text-transform: none; }
  body[data-page="charter"] .charter-form .form-foot .btn:hover { background: #dce8e4; }
  body[data-page="charter"] .charter-form .form-foot .small { text-align: center; color: #c9d5dc; font-size: 16px; }
}
@media (max-width: 479px) {
  .charter-trip-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}