/* ============================================================
   mobile-qa-1559686.css — Mobile QA Sweep #1 (Task #1559686)
   Date: 2026-05-13
   Viewport: 375px (iPhone SE)

   Fixes applied:
   1. Social proof ticker (.spt-wrap) — horizontal overflow containment
   2. Cookie consent "Reject" button visibility on 375px (clipping fixed)
   3. spt-stats 4-column grid → 2x2 grid at 375px for breathing room
   4. Pricing toggle save badge — allow text wrap at 375px
   5. Pricing CTA buttons — font-size reduction for long labels at 375px
   6. Pricing urgency bar — reduced padding/font at 375px
   7. Settlement detail sidebar card — padding reduction at 375px
   8. Pricing trust badges — allow wrap at 375px
   9. Pricing compare table sticky column — narrower at 375px
   10. Homepage email capture row — ensure column stack at 375px
   ============================================================ */


/* ── 1. Social proof ticker — contain overflow at parent level ───────────── */
/* Root cause: .spt-wrap has no overflow-x:hidden, so .spt-stats flex items
   (4 blocks × 40px padding each) extend past 375px viewport width.
   Fix: add overflow-x:hidden to container and constrain stats layout. */
.spt-wrap {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* ── 2. Stats strip: 2x2 layout on 375px ────────────────────────────────── */
/* Diagnosis: at 420px the base stylesheet's display:flex on .spt-stats wins
   the cascade AND .spt-stats has overflow:auto which creates a new scroll
   context defeating .spt-wrap's overflow-x:hidden. Fix with !important on
   critical layout props and constrain each stat to 50% with flex-basis. */
@media (max-width: 420px) {
  .spt-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    padding: 6px 8px !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .spt-stat {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 4px 6px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }

  /* Hide the vertical dividers (::before pseudo) in 2-col layout */
  .spt-stat + .spt-stat::before {
    display: none !important;
  }
}


/* ── 3. Cookie consent: ensure both buttons fully visible on 375px ──────── */
/* cookie-consent-1559663.css already uses flex:1 on buttons at 640px which
   should work. Belt-and-suspenders: ensure no white-space:nowrap causes clip
   and give Crisp widget clearance so it doesn't overlap the right button. */
@media (max-width: 420px) {
  /* Allow text to wrap in "Reject Non-Essential" if needed */
  .sr-cc-btn {
    white-space: normal;
    font-size: 0.8rem;
    padding: 8px 14px;
    min-height: 44px;
  }

  /* Ensure action row fills full width with equal buttons */
  .sr-cc-actions {
    width: 100%;
    gap: 8px;
  }

  /* Crisp widget sits at bottom-right (z:99999). The cookie banner is
     bottom-full-width. On 375px the green Crisp bubble overlaps the right
     button. Shunt the banner up to leave 72px for Crisp. */
  #sr-cookie-consent {
    padding-bottom: 72px;
  }
}


/* ── 4. Pricing toggle save badge — wrap at 375px ────────────────────────── */
/* Root cause: .pr-save-global-badge has white-space:nowrap in pricing-page.css
   line 120. The badge text "Save up to $120/yr on annual" forces one line.
   Combined with the toggle switch and both labels, the row exceeds 375px.
   categories-pricing-10-10-polish-1477245.css adds flex-wrap:wrap to
   .pr-toggle-wrap, so the badge drops to a second line—but it needs to
   shrink so it doesn't look awkward when wrapped. */
@media (max-width: 420px) {
  .pr-save-global-badge {
    white-space: normal !important;
    font-size: 0.65rem !important;
    padding: 0.2rem 0.5rem !important;
    text-align: center;
    /* Center the badge when it wraps to its own line */
    flex-basis: 100%;
    display: block;
    max-width: fit-content;
    margin: 0.3rem auto 0;
  }

  .pr-toggle-wrap {
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
    justify-content: center !important;
  }

  .pr-toggle-label {
    font-size: 0.82rem !important;
  }
}


/* ── 5. Pricing CTA buttons — shrink text for long labels at 375px ───────── */
/* Root cause: CTA text like "Start Autopilot — $39.99/mo billed yearly" is
   ~40 chars. At 375px with card padding 0.9rem, the button width is ~340px.
   At 0.88rem font, that's borderline. Reduce font-size for safety. */
@media (max-width: 375px) {
  .pr-cta {
    font-size: 0.8rem !important;
    padding: 0.7rem 0.8rem !important;
    line-height: 1.35 !important;
  }

  .pr-cta--autopilot {
    font-size: 0.82rem !important;
  }

  /* Annual nudge text — prevent overflow */
  .pr-annual-nudge {
    font-size: 0.62rem !important;
    word-break: break-word;
  }
}


/* ── 6. Pricing urgency bar — tighter fit at 375px ───────────────────────── */
/* Root cause: .pr-urgency-bar has padding 0.7rem 1.1rem and font-size 0.8rem.
   At 375px this works but is tight. Add breathing room. */
@media (max-width: 420px) {
  .pr-urgency-bar {
    padding: 0.55rem 0.8rem !important;
    font-size: 0.75rem !important;
    gap: 0.4rem !important;
    border-radius: 8px !important;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
}


/* ── 7. Settlement detail sidebar card — reduce padding at 375px ─────────── */
/* Root cause: settlement-detail-v2.css line 191 sets .sidebar-card padding
   to 24px. At 375px with 12px container padding, content width is only
   375 - 24 - 48 = 303px which is too tight for card contents.
   Fix: reduce card padding to 16px at 375px. */
@media (max-width: 420px) {
  body.page-settlement-detail .sidebar-card,
  body.page-settlement-detail .sidebar-card.sidebar-cta,
  body.page-settlement-detail #filing-help {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  /* Filing button — full width with reduced padding */
  body.page-settlement-detail .sidebar-btn.sidebar-btn-xl,
  body.page-settlement-detail .sidebar-btn-xl {
    padding: 14px 16px !important;
    font-size: 15px !important;
  }

  /* Detail section headers — reduce padding */
  body.page-settlement-detail .detail-section {
    padding: 14px 12px !important;
  }

  /* Settlement detail inner — tighter margins */
  body.page-settlement-detail .detail-inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.page-settlement-detail .content-with-sidebar {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* ── 8. Pricing trust badges — allow wrap at 375px ───────────────────────── */
/* Root cause: pricing-page.css line 1006 .pr-trust-badge { white-space: nowrap }
   Trust badge text can overflow on 375px if badges are long. */
@media (max-width: 420px) {
  .pr-trust-badge {
    white-space: normal !important;
    font-size: 0.7rem !important;
  }

  .pr-trust-badges {
    gap: 0.5rem 0.75rem !important;
    justify-content: center !important;
  }
}


/* ── 9. Pricing compare table sticky column — narrower at 375px ──────────── */
/* Root cause: pricing-page.css line 701 sets min-width:120px max-width:140px
   for the sticky first column at 768px. At 375px this takes 38% of viewport.
   Fix: shrink the sticky column for better proportions. */
@media (max-width: 420px) {
  .pr-compare-table th:first-child,
  .pr-compare-table td:first-child {
    min-width: 90px !important;
    max-width: 110px !important;
    font-size: 0.7rem !important;
    padding: 8px 6px !important;
  }

  .pr-compare-table th,
  .pr-compare-table td {
    font-size: 0.65rem !important;
    padding: 6px 4px !important;
  }
}


/* ── 10. Homepage email capture — ensure column stack at 375px ────────────── */
/* homepage-components-1452565.css switches to column at mobile breakpoint
   but there's no explicit 375px rule. Belt-and-suspenders. */
@media (max-width: 420px) {
  .hp-email-capture__row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .hp-email-capture__input {
    width: 100% !important;
    min-width: 0 !important;
  }
}