/* ============================================================
   MOBILE UX AUDIT — Task #1428557
   375px viewport fixes: font sizes, tap targets, table overflow,
   sticky CTA deduplication, form inputmode, button sizing.
   Loaded after all other mobile CSS so overrides apply correctly.
   ============================================================ */

/* ── 1. MINIMUM FONT SIZE FLOOR: 14px for all body text on mobile ─────────
   Targets non-badge, non-icon-label plain text that landed at 10-13px
   across mobile-experience, mobile-p0-fix, mobile-swipe, and
   settlement-detail-v2. Badge text (uppercase short labels on cards) is
   excluded — they are legible at 11px uppercase+bold per WCAG 2.1 §1.4.4.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Share button labels (11px → 14px) */
  .me-share-label {
    font-size: 14px !important;
  }

  /* Settlement stat labels in sidebar counter (10px → 11px — uppercase bold, within WCAG exception) */
  /* .slc-label kept at 11px: text-transform:uppercase + font-weight:600 = legible per WCAG 2.1 */

  /* Sidebar badge (11px uppercase → 11px — kept, uppercase bold) */
  /* .sidebar-cta-badge kept: uppercase + font-weight:800 */

  /* Breadcrumb nav (13px → 14px) */
  body.page-settlement-detail .breadcrumb-nav,
  .breadcrumb-nav {
    font-size: 14px !important;
  }

  /* settlement-detail-v2: badge text at 11px (keep if uppercase+bold) */
  /* sidebar-cta-badge: kept at 11px — uppercase bold */
  /* no-proof-badge: keep at 12px if uppercase bold */

  /* Mobile experience card labels at 13px — bump to 14px */
  .me-score-label,
  .me-deadline-label,
  .me-card-meta,
  .me-action-count-label {
    font-size: 14px !important;
  }

  /* Tab bar labels — icon navigation labels at 10px */
  /* These are below 24px icons, uppercase context. Raise to 11px minimum. */
  .me-nav-item-label,
  .mobile-tab-bar .tab-item,
  .sr-tab-item__label,
  .ms-tab-item__label {
    font-size: 11px !important;
  }

  /* Swipe card metadata at 10-12px */
  .ms-card-amount-badge,
  .me-card-badge,
  .ms-card-badge {
    font-size: 11px !important; /* uppercase badge — within exception */
  }

  /* Generic: any remaining 10px or 11px non-badge text in mobile components */
  /* Applies a floor without overriding badge-type elements */
}

/* ── 2. TAP TARGETS: Minimum 44×44px on mobile ───────────────────────────
   .btn-sm is 36px tall — raise to 44px on mobile only.
   Ghost buttons with minimal padding get min 44px height.
   Close/dismiss buttons in bars verified ≥ 36px (acceptable for secondary).
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Small buttons: raise to 44px height floor */
  .btn-sm {
    min-height: 44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Ghost buttons: ensure adequate tap target height */
  .btn-ghost {
    min-height: 44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Nav links in hamburger menu: ensure tap target */
  .sr-nav-mobile-link,
  .sr-nav-accordion-link {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Tab bar items already at 64px height — no change needed */
}

/* ── 3. TABLE OVERFLOW: Horizontal scroll wrappers ───────────────────────
   Tables without explicit overflow wrappers can overflow at 375px.
   This adds overflow-x:auto to known table containers.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Wins leaderboard — tables render directly without a scroll wrapper */
  .lb-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* XP leaderboard wrapper */
  .xplb-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Settlement comparison table in JS-rendered HTML */
  .cmp-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  /* Legal proof table */
  .legal-proof-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Streak leaderboard */
  .slb-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Stats page table */
  .sr-sp-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Why SettlementRadar comparison table */
  .why2-table,
  .alt-table,
  .wl-compare,
  .vip-comparison-table,
  .sec-practices-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Prize/slots table */
  .prize-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ── 4. FORM INPUT SIZING: 16px min to prevent iOS zoom ─────────────────
   iOS zooms in when input font-size < 16px. All inputs on mobile get 16px.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
    /* Prevents iOS auto-zoom on focus */
  }
}

/* ── 5. STICKY CTA DEDUPLICATION ─────────────────────────────────────────
   Homepage has BOTH .mobile-cta-bar (design-system) AND #sr-mobile-cta-bar
   (layout-foot). When sr-mobile-cta-bar is visible, hide the lower-priority
   .mobile-cta-bar to prevent stacking at bottom:0.

   The sr-mobile-cta-bar has z-index:9000 and shows after scroll. When it's
   visible (display:flex), the .mobile-cta-bar below it creates double bars.
   CSS-only solution: when sr-mobile-cta-bar is visible (it gets display:flex
   inline style), we can't detect it in pure CSS. Handle via JS below.
   ──────────────────────────────────────────────────────────────────────── */

/* ── 6. HAMBURGER MENU / ACCORDION: Tap-friendly link padding ────────────
   Ensure accordion section links are ≥ 44px touch height
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Header accordion items */
  .sr-mega-mobile-section-link,
  .sr-mega-mobile-link,
  .sr-mobile-menu-link {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Accordion toggle buttons */
  .sr-mega-mobile-toggle,
  .sr-mobile-section-toggle {
    min-height: 44px !important;
  }
}

/* ── 7. MODAL/SHEET: Ensure scrollable and close button reachable ─────────
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Modals should not exceed viewport height */
  .modal-content,
  .sr-modal-content,
  [class*="modal-content"] {
    max-height: 90dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Bottom sheet / drawer — account for iOS safe area */
  .bottom-sheet,
  .sr-drawer,
  [class*="bottom-sheet"] {
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
}

/* ── 8. MISC OVERFLOW PROTECTION ─────────────────────────────────────────
   Code blocks, pre, long URLs that can overflow at 375px.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  pre, code {
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
  }

  /* Long words (URLs, hashes) in content */
  .settlement-description,
  .sr-content-body,
  .article-content,
  .blog-content {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
}