/* ============================================================================
   MOBILE SETTLEMENTS QA FIX — Task #1296241
   Fixes for: Settlement Browse, Settlement Detail, Closing Soon, No-Proof pages

   Loads AFTER bugfix-1291325-border-cleanup.css (the last <link> in <head>).
   Inline <style> blocks come after, so this CSS has final say over inline too.

   Issues fixed:
   1. Settlement cards overflowing viewport width at 375px
   2. Text overflow off right edge on cards and hero sections
   3. CTA buttons too small — make 52px+ height, full-width on mobile
   4. Hamburger menu overlay z-index too low on detail pages
   5. Payout amounts cut off in card grid
   6. White-on-white text on settlement detail pages
   7. Horizontal scroll on all four pages
   ============================================================================ */

/* ── 1. GLOBAL HORIZONTAL SCROLL FIX ────────────────────────── */
@media (max-width: 480px) {
  html, body {
    overflow-x: clip !important;
    max-width: 100vw !important;
  }

  /* Everything must respect viewport bounds */
  * {
    box-sizing: border-box;
  }

  main,
  .main-content,
  .page-content,
  .content-wrap {
    overflow-x: hidden !important;
  }
}

/* ── 2. SETTLEMENT CARDS — Card width overflow containment ──── */
@media (max-width: 480px) {
  /* Grid must not overflow viewport */
  .dir-grid,
  .dir-grid-wrap,
  .dir-grid-section,
  .dir-grid-section > .dir-grid-wrap {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* Card wraps must not overflow */
  .dir-card-wrap,
  .sr-card-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Individual cards — full width, constrained */
  .dir-card,
  .settlement-card,
  .sr-card,
  .card-body,
  .dir-card-body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
  }

  /* Settlement detail cards same treatment */
  .sdr-card,
  .sd-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── 3. TEXT OVERFLOW — Prevent words from spilling right ─────── */
@media (max-width: 480px) {
  /* Card titles and company names */
  .dir-card-title,
  .card-title,
  .sr2-title,
  .sr2-company-name,
  .dir-card-company {
    overflow-x: hidden !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }

  /* Settlement detail: title and description */
  .detail-title,
  .sdr-title,
  .settlement-title,
  .detail-description,
  .sdr-description {
    overflow-x: hidden !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }

  /* General text elements */
  h1, h2, h3, h4, h5, h6,
  p, span, div, a, li {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Badges and labels — must not overflow their containers */
  .dir-badge-trending,
  .dir-badge-noproof,
  .dir-badge-urgent,
  .dir-badge-warning,
  .sr2-highvalue-badge,
  .sr2-noproof-badge,
  .sr-quickfile-badge,
  .sr2-category-badge {
    max-width: 100% !important;
    overflow-x: hidden !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
}

/* ── 4. CTA BUTTONS — 52px+ height, full-width on mobile ────── */
@media (max-width: 480px) {
  /* Primary CTA buttons */
  .sr2-file-claim-btn,
  .cta-hover-lift,
  button.sr2-file-claim-btn,
  span.sr2-file-claim-btn,
  .file-claim-btn,
  .dir-card-cta,
  .cs-file-btn {
    display: block !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* Detail page CTA buttons */
  .sdr-cta-btn,
  .detail-cta-btn,
  .settlement-file-btn,
  .sd-cta-btn {
    display: block !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 14px 20px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
  }

  /* Pro upsell buttons */
  .sr2-pro-cta-btn {
    display: block !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 14px 20px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* Small/compact CTAs must also be at least 44px */
  .sr2-pricing-line,
  .sr2-details-toggle {
    min-height: 44px !important;
  }

  /* No-proof page CTA */
  .np-cta-btn,
  .np-file-btn,
  .np-hero .cta-btn {
    display: block !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 14px 20px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* Closing-soon page CTA */
  .cs-cta-btn,
  .cs-file-btn {
    display: block !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 14px 20px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}

/* ── 5. HAMBURGER MENU — Fix overlay z-index on detail pages ──── */
@media (max-width: 768px) {
  /* Mobile nav overlay must be ABOVE ALL settlement detail page elements */
  .nav-mobile-menu,
  .nav-mobile-menu.open,
  .mobile-nav-drawer,
  .mobile-nav-drawer.open,
  [class*='mobile-nav'][class*='menu'],
  #mobileNavPanel {
    z-index: 99999 !important;
  }

  /* Mobile nav backdrop — highest possible below modal */
  .nav-mobile-backdrop,
  .nav-mobile-backdrop.open,
  [class*='mobile-nav'][class*='backdrop'],
  #mobileNavBackdrop {
    z-index: 99998 !important;
  }

  /* Settlement detail: any overlay/modal must be BELOW the nav menu */
  #sr-view-soft-banner,
  #sr-view-firm-backdrop,
  #sr-view-hard-gate,
  .detail-modal-backdrop,
  .sdr-modal {
    z-index: 9000 !important;
  }

  /* Sticky header on detail pages — must not cover nav menu */
  .detail-header-sticky,
  .sdr-header-sticky,
  .settlement-sticky-header {
    z-index: 995 !important;
  }

  /* Close button in nav menu must be accessible */
  .mobile-nav-close,
  .nav-mobile-close,
  [class*='mobile-nav'][class*='close'] {
    min-width: 44px !important;
    min-height: 44px !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ── 6. PAYOUT AMOUNTS — Ensure full amounts visible ────────── */
@media (max-width: 480px) {
  /* Payout amounts must not be truncated */
  .dir-stat-payout,
  .sr2-payout,
  .payout-amount,
  .dir-payout,
  .cs-payout,
  .settlement-payout,
  .sd-payout,
  .sr2-payout-amount,
  .dir-card-payout {
    overflow-x: visible !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }

  /* No-proof page: payout values */
  .np-payout,
  .np-payout-amount,
  .np-payout-display {
    overflow-x: visible !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  /* Card stats row — allow wrapping */
  .dir-card-stats,
  .sr2-card-stats,
  .card-stats-row {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }

  /* Closing-soon cards */
  .cs-card-stats,
  .cs-card-amount,
  .cs-amount-display {
    overflow-x: visible !important;
    white-space: normal !important;
  }
}

/* ── 7. CONTRAST FIXES — White-on-white text ────────────────── */
@media (max-width: 480px) {
  /* Settlement detail: dark hero section with light text */
  .detail-hero,
  .sdr-hero,
  .settlement-hero,
  .sd-hero,
  .detail-hero-section {
    background-color: #111827 !important;
  }

  .detail-hero h1,
  .sdr-hero h1,
  .settlement-hero h1,
  .sd-hero h1,
  .detail-hero .title,
  .sdr-hero .title,
  .detail-hero h2,
  .sdr-hero h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  .detail-hero p,
  .sdr-hero p,
  .detail-hero span,
  .sdr-hero span {
    color: #e5e7eb !important;
    -webkit-text-fill-color: #e5e7eb !important;
  }

  /* Settlement detail stat values */
  .detail-stat-value,
  .sdr-stat-value,
  .detail-payout-value,
  .sdr-payout-value,
  .detail-amount-display {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  /* Settlement detail labels */
  .detail-stat-label,
  .sdr-stat-label {
    color: #9ca3af !important;
    -webkit-text-fill-color: #9ca3af !important;
  }

  /* No-proof page hero text — ensure visible on light background */
  .np-hero h1,
  .np-hero h2 {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
  }

  .np-hero p,
  .np-hero span {
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
  }
}

/* ── 8. CLOSING-SOON PAGE — Dark hero text contrast ──────────── */
@media (max-width: 480px) {
  .csg-hero,
  .cs-hero,
  .closing-soon-hero {
    background-color: #1a0000 !important;
  }

  .csg-headline,
  .cs-hero-headline,
  .cs-hero h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  .csg-subhead,
  .cs-hero-subhead,
  .cs-hero p {
    color: #fca5a5 !important;
    -webkit-text-fill-color: #fca5a5 !important;
  }

  .csg-body,
  .cs-hero-body,
  .cs-hero p {
    color: #d1d5db !important;
    -webkit-text-fill-color: #d1d5db !important;
  }
}

/* ── 9. MOBILE CARD IMAGE CONTAINMENT ─────────────────────── */
@media (max-width: 480px) {
  /* Card hero images must not overflow */
  .dir-card-hero,
  .sr2-card-hero,
  .card-hero-img-wrap,
  .settlement-card-img,
  .dir-card-hero-icon-wrap {
    margin-left: -24px !important;
    margin-right: -24px !important;
    width: calc(100% + 48px) !important;
    max-width: calc(100% + 48px) !important;
    overflow: hidden !important;
    border-radius: 12px 12px 0 0 !important;
  }

  /* SR2 card images */
  .sr2-cat-img-wrap {
    margin-left: -24px !important;
    margin-right: -24px !important;
    width: calc(100% + 48px) !important;
    max-width: calc(100% + 48px) !important;
  }
}

/* ── 10. SETTLEMENT DETAIL PAGE — Mobile card grid fix ─────── */
@media (max-width: 480px) {
  /* Related settlements grid */
  .detail-related-grid,
  .sdr-related-grid,
  .detail-settlements-grid,
  .related-settlements-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    overflow-x: hidden !important;
  }

  /* Detail cards */
  .detail-card,
  .sdr-card,
  .related-settlement-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── 11. NO-PROOF REQUIRED PAGE — Mobile card fix ───────────── */
@media (max-width: 480px) {
  .np-card,
  .np-settlement-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .np-card-grid,
  .np-settlements-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    overflow-x: hidden !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   END Task #1296241 Mobile Settlements QA Fix
   ══════════════════════════════════════════════════════════════════ */