/* ============================================================
   Mobile compaction for the enrollment page (enrollment.html).

   This is the page Facebook/Instagram ads land on, and that traffic is
   overwhelmingly phones — so it is the one page where mobile friction costs
   real money. Everything else on the site had a mobile pass; this did not.

   Measured before writing (375x812, real CRM data):
     - 27 of 28 form inputs were 15.04px => iOS Safari auto-zooms the page on
       EVERY field tap. The single biggest fix here.
     - Payment step ran 1652px = 2 full screens of scrolling.
     - Course step 1105px, agreement step 878px.
     - City / State / ZIP each took a full-width row.
     - Radios and checkboxes rendered 13x13 (label-wrapped, so tappable, but
       visually tiny and easy to miss).
     - No horizontal overflow — the wizard shell was already sound.

   Desktop unchanged — every rule is inside @media (max-width: 768px).
   ============================================================ */

@media (max-width: 768px) {

  /* --- 1. Stop iOS zooming the page when a field is focused ---------------
     Safari zooms whenever a focused input's font-size is under 16px. That
     jerks the layout sideways mid-form and is a well-known conversion killer.
     16px is the threshold, not a preference. */
  #enrollmentAppForm input[type="text"],
  #enrollmentAppForm input[type="email"],
  #enrollmentAppForm input[type="tel"],
  #enrollmentAppForm input[type="date"],
  #enrollmentAppForm input[type="number"],
  #enrollmentAppForm select,
  #enrollmentAppForm textarea {
    font-size: 16px;
    /* Keep the visual height sane now that the text is bigger. */
    padding: 10px 12px;
    min-height: 44px;
  }

  /* --- 2. Bigger, easier-to-hit choice controls --------------------------
     They were 13x13. The wrapping label already made them tappable, but at
     that size they read as decoration rather than something to press. */
  #enrollmentAppForm input[type="radio"],
  #enrollmentAppForm input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  #enrollmentAppForm .inline-choice,
  #enrollmentAppForm .requirements-ack,
  #enrollmentAppForm #sponsoredToggleLabel {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* --- 3. City / State / ZIP on one row -----------------------------------
     Each was taking a full 297px row, so a 2-character state field burned a
     whole line. ZIP and State are fixed-width by nature; City takes the rest. */
  #enrollmentAppForm .field-row.grid-city {
    display: grid;
    grid-template-columns: 1fr 72px 92px;
    gap: 8px;
    align-items: end;
  }

  #enrollmentAppForm .field-row.grid-city .field-label {
    font-size: 0.78rem;
    white-space: nowrap;
  }

  /* Phone + email can share a row too on wider phones. */
  @media (min-width: 400px) {
    #enrollmentAppForm .field-row.grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
  }

  /* --- 4. Tighten the vertical rhythm ------------------------------------
     Applies across every step; the biggest wins land on Course, Sign and Pay. */
  #enrollmentAppForm .form-section {
    padding: 16px 14px;
    margin-bottom: 14px;
  }

  #enrollmentAppForm .field-row {
    margin-bottom: 12px;
  }

  #enrollmentAppForm .helper-copy {
    font-size: 0.82rem;
    line-height: 1.45;
    margin-bottom: 10px;
  }

  .form-card-lede {
    font-size: 0.86rem;
    line-height: 1.5;
  }

  /* --- 5. Course step: was 1.4 screens ------------------------------------
     Trim the per-course block without losing the dates, which are the thing
     people actually scan for. */
  .course-option {
    padding: 12px;
    gap: 8px;
  }

  .course-option__label strong {
    font-size: 0.95rem;
    line-height: 1.3;
  }

  .course-option__meta {
    font-size: 0.76rem;
  }

  .course-option__upcoming {
    font-size: 0.76rem;
    line-height: 1.4;
  }

  .course-option__price {
    font-size: 0.95rem;
  }

  /* The "Class details" button is secondary on a phone — shrink, don't hide. */
  .course-option__details-toggle {
    font-size: 0.74rem;
    padding: 3px 8px;
  }

  /* --- 6. Payment step: was 1652px, 2 full screens ------------------------
     The step that matters most was the longest scroll. Compact the cards and
     let the mail-in option collapse to its essentials. */
  .submit-options {
    gap: 12px;
  }

  .submit-card {
    padding: 16px 14px;
  }

  .submit-card h3 {
    font-size: 1.02rem;
    margin-bottom: 6px;
  }

  .submit-card p,
  .submit-card__status {
    font-size: 0.83rem;
    line-height: 1.45;
  }

  .payment-brand-row {
    gap: 8px;
    flex-wrap: wrap;
  }

  .payment-brand-note {
    font-size: 0.76rem;
  }

  .pay-choice__opt {
    padding: 10px 12px !important;
  }

  /* The pay button is the whole point of the page — make it unmissable. */
  #btnStripeCheckout {
    width: 100%;
    min-height: 52px;
    font-size: 1rem;
  }

  .submit-card__action .btn-print {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  /* Mail-in address block: keep it readable but stop it eating a third of
     the payment step. */
  .submit-card--manual .addr {
    font-size: 0.86rem;
    line-height: 1.4;
    margin: 8px 0;
  }

  /* --- 7. Agreement step: was 878px --------------------------------------
     The policy text is legally required, but it lives inside <details>, so
     the collapsed state is what most people see — tighten that. */
  .requirements-disclosure summary,
  .requirements-reference summary {
    font-size: 0.86rem;
    padding: 11px 12px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .requirements-lead,
  .agreement-copy {
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .sign-block {
    padding: 12px;
  }

  /* --- 8. Company (multi-student) rows ------------------------------------
     A company adding 8 employees generates a long stack; keep each row tight
     so the count stays comprehensible. */
  .company-student-row {
    padding: 12px;
    margin-top: 10px;
  }

  .company-student-row__title {
    font-size: 0.84rem;
  }

  .company-count-row {
    gap: 8px;
  }

  .company-count-row select {
    min-height: 44px;
    font-size: 16px; /* iOS zoom again */
  }

  /* --- 9. Sponsor block ---------------------------------------------------- */
  .sponsor-fields {
    padding: 12px;
  }

  /* --- 10. Breathing room above the fixed bottom nav ---------------------- */
  .application-section.has-mobile-wizard-nav {
    padding-bottom: 88px;
  }
}