/* ============================================================
   BALMBARE PARTNERS — Auth Pages Mobile CSS
   Loaded on: index.html, login.html, verify-email.html,
              setup.html, forgot.html, reset-password.html, thanks.html
   Only @media blocks — no base rules.
   ============================================================ */

/* ── 880px: Single column threshold ─────────────────────────── */
@media (max-width: 880px) {
  .page { padding: 20px 16px !important; align-items: flex-start !important; }
  .split { gap: 16px !important; }
  .form-card { border-radius: 16px !important; }
  .benefits { border-radius: 16px !important; }
}

/* ── 600px: Primary mobile ───────────────────────────────────── */
@media (max-width: 600px) {
  .page {
    padding: 14px 12px !important;
    align-items: flex-start !important;
    min-height: 100dvh !important;
  }

  /* Benefits panel sits above form, compact */
  .benefits {
    order: -1 !important;
    border-radius: 12px !important;
    padding: 18px 16px !important;
  }
  .benefits h2 { font-size: 16px !important; margin-bottom: 10px !important; letter-spacing: -0.2px !important; }
  .benefit { margin-bottom: 10px !important; gap: 10px !important; }
  .benefit .icon { width: 36px !important; height: 36px !important; border-radius: 10px !important; flex-shrink: 0 !important; }
  .benefit .body h3 { font-size: 12.5px !important; margin-bottom: 1px !important; }
  .benefit .body p { font-size: 11.5px !important; line-height: 1.4 !important; }
  .panel-cta { display: none !important; }

  /* Form card */
  .form-card { padding: 22px 18px 20px !important; border-radius: 12px !important; }
  .hero-row { display: none !important; }

  /* Brand */
  .brand-name {
    font-size: 20px !important;
    letter-spacing: 2.5px !important;
  }
  .brand-sub { font-size: 12px !important; }
  .brand-head { margin-bottom: 10px !important; }

  /* Page title */
  h1.page-title { font-size: 24px !important; margin: 6px 0 3px !important; letter-spacing: -0.2px !important; }
  .page-tag { font-size: 13px !important; margin: 2px 0 14px !important; }

  /* Two-column row (name fields) → single column */
  .row { grid-template-columns: 1fr !important; gap: 0 !important; }

  /* Fields — 16px font-size prevents iOS zoom on focus */
  .field { margin-bottom: 13px !important; }
  .field label, .field > span { font-size: 11px !important; letter-spacing: 0.4px !important; margin-bottom: 4px !important; display: block !important; }
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="password"],
  .field input[type="tel"],
  .field input[type="number"],
  .field input[type="url"],
  .field textarea,
  .field select {
    padding: 13px 14px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    min-height: 44px !important;
  }
  .field .hint { font-size: 11.5px !important; margin-top: 4px !important; line-height: 1.4 !important; }
  .field-error { font-size: 11.5px !important; margin-top: 3px !important; }

  /* Password toggle */
  .pw-toggle { min-width: 36px !important; min-height: 36px !important; padding: 6px !important; }

  /* Checkbox consent */
  .consent { gap: 10px !important; font-size: 12.5px !important; line-height: 1.45 !important; margin: 6px 0 14px !important; align-items: flex-start !important; }
  .consent input[type="checkbox"] { width: 20px !important; height: 20px !important; flex-shrink: 0 !important; margin-top: 1px !important; }

  /* Submit button — full width, tall touch target */
  button.submit, .btn-submit, input[type="submit"] {
    width: 100% !important;
    padding: 15px 18px !important;
    font-size: 15.5px !important;
    min-height: 48px !important;
    border-radius: 11px !important;
    letter-spacing: 0.4px !important;
  }

  /* Below-form links */
  .cross-link { font-size: 12.5px !important; margin-top: 14px !important; line-height: 1.5 !important; text-align: center !important; }
  .legal { font-size: 10.5px !important; margin-top: 12px !important; line-height: 1.5 !important; text-align: center !important; }

  /* Referral status */
  .referral-status { font-size: 11.5px !important; padding: 6px 10px !important; border-radius: 8px !important; margin-top: 5px !important; }

  /* Error/success banners */
  .error, .success, .notice {
    padding: 10px 12px !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    border-radius: 8px !important;
  }

  /* Code input (verify-email) */
  .code-input, input[name="code"] {
    font-size: 28px !important;
    letter-spacing: 8px !important;
    text-align: center !important;
    padding: 14px !important;
    min-height: 56px !important;
    border-radius: 12px !important;
  }

  /* Setup page — username/code picker */
  .code-preview { font-size: 22px !important; letter-spacing: 2px !important; }

  /* Thanks / confirm card */
  .thanks-card, .confirm-card {
    padding: 28px 20px !important;
    border-radius: 14px !important;
    width: calc(100% - 24px) !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  .thanks-card h1, .confirm-card h1 { font-size: 22px !important; margin-bottom: 10px !important; }
  .thanks-card p, .confirm-card p { font-size: 13.5px !important; line-height: 1.55 !important; }
  .thanks-card a, .thanks-card button,
  .confirm-card a, .confirm-card button {
    min-height: 44px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
  }
}

/* ── 480px: Small phones ─────────────────────────────────────── */
@media (max-width: 480px) {
  .page { padding: 12px 10px !important; }
  .form-card { padding: 20px 16px 18px !important; }
  h1.page-title { font-size: 21px !important; }
  .benefits h2 { font-size: 15px !important; }
  .benefit .body h3 { font-size: 12px !important; }
  .benefit .body p { font-size: 11px !important; }

  .field input[type="text"],
  .field input[type="email"],
  .field input[type="password"],
  .field input[type="tel"],
  .field input[type="number"],
  .field input[type="url"],
  .field textarea,
  .field select {
    padding: 12px 12px !important;
  }

  button.submit, .btn-submit, input[type="submit"] {
    font-size: 15px !important;
    min-height: 46px !important;
  }

  .thanks-card, .confirm-card { padding: 24px 16px !important; }
  .thanks-card h1, .confirm-card h1 { font-size: 20px !important; }
  .thanks-card p, .confirm-card p { font-size: 13px !important; }
}

/* ── 380px: Very small phones (iPhone SE etc.) ───────────────── */
@media (max-width: 380px) {
  .page { padding: 10px 8px !important; }
  .form-card { padding: 18px 14px 16px !important; }
  h1.page-title { font-size: 20px !important; }

  .field input[type="text"],
  .field input[type="email"],
  .field input[type="password"],
  .field input[type="tel"],
  .field input[type="number"],
  .field input[type="url"],
  .field textarea,
  .field select {
    padding: 11px 11px !important;
  }

  button.submit, .btn-submit, input[type="submit"] {
    font-size: 14.5px !important;
    min-height: 44px !important;
  }
}