/* ============================================================
   mobile-qa-1531121.css — Mobile Visual Audit (Task #1531121)
   Date: 2026-05-12
   Audited at: 375px, 768px, 1440px
   Covers: bundles, services/filing, exit-intent, nudge modals,
           cross-sell cards, paywall A/B, upsell success, account
           tier upsell cards, announcement bar.

   Fixes applied here (global overrides / cross-cutting issues):
   1. Horizontal scroll guard for body on mobile
   2. .bn-compare table overflow guard
   3. .bn-hero__trust centering / wrapping fix
   4. .cs-card font-size on body text — 13.5px minimum → 14px on mobile
   5. .sr-nudge-bar safe-area bottom on narrow screens
   6. Announcement bar message text wrapping on 320px
   7. Exit-intent popup: safe-area-inset-bottom padding on modal
   8. Crisp chat / sticky element overlap guard — bottom spacing for
      pages with .bn-sticky visible
   9. Account tier upsell cards (.ugp-card) — full-width CTA on narrow
   10. Post-purchase upsell success: order summary card overflow fix
   ============================================================ */


/* ── 1. Horizontal scroll guard ─────────────────────────────────────────── */
/* Belt-and-suspenders: prevents any new component from causing h-scroll */
@media (max-width: 480px) {
  body {
    overflow-x: hidden;
  }
}


/* ── 2. Compare table scroll on mobile ──────────────────────────────────── */
/* bundles-1528794.css sets overflow-x: auto on the table wrapper,
   but the wrapper itself has no min-width guard */
@media (max-width: 768px) {
  .bn-compare {
    -webkit-overflow-scrolling: touch;
    /* Provide scroll affordance */
    background:
      linear-gradient(to right, var(--bn-bg, #0d0d0d) 30%, transparent),
      linear-gradient(to left, var(--bn-bg, #0d0d0d) 30%, transparent) 100% 0;
    background-size: 40px 100%, 40px 100%;
    background-attachment: local, local;
    background-repeat: no-repeat;
  }
}


/* ── 3. Hero trust row — center + wrap ──────────────────────────────────── */
/* Supplemental to bundles-1528794.css @media (max-width: 768px) rule */
@media (max-width: 420px) {
  .bn-hero__trust {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .bn-hero__trust span {
    font-size: 12px;
  }
}


/* ── 4. Cross-sell card body text — minimum 14px on mobile ─────────────── */
/* cross-sell-1529693.css has .cs-card__desc at 13.5px and .cs-card__value-math
   at 12.5px. On mobile these can be hard to read. Bump to 14px / 13px. */
@media (max-width: 480px) {
  .cs-card__desc {
    font-size: 14px;
  }
  .cs-card__value-math {
    font-size: 13px;
  }
  .cs-mini-card__desc {
    font-size: 13px;
  }
  .cs-inline-strip__sub {
    font-size: 13px;
  }
}


/* ── 5. Announcement bar: message clamp on very narrow screens ──────────── */
/* At 320px (older phones), text with "white-space: nowrap" can overflow.
   Override to allow wrapping with ellipsis fallback. */
@media (max-width: 360px) {
  .sr-anbar-text {
    white-space: normal;
    font-size: 11.5px;
    /* Keep it to ~2 lines max */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: unset;
  }
  /* More space for messages when text wraps */
  #sr-announcement-bar {
    height: auto;
    min-height: var(--anbar-height-mobile, 40px);
    padding: 6px 0;
  }
  /* Update header offset to avoid overlap when bar height changes */
  body.sr-anbar-visible .hn-header {
    top: 52px !important; /* conservative for 2-line bar */
  }
  body.sr-anbar-visible .hn-mobile-menu {
    top: calc(52px + 60px) !important;
  }
}


/* ── 6. Exit-intent popup: safe-area bottom padding ────────────────────── */
/* Supplement exit-intent-conversion-1529298.css and exit-intent-popup.css
   for devices with home indicator (iPhone X+). Both sheets already add
   env(safe-area-inset-bottom) to the body padding, but the drag-handle
   area on bottom-sheet still needs it for the full content area. */
@media (max-width: 600px) {
  /* Bottom sheet padding is already set in exit-intent-conversion-1529298.css
     via: padding-bottom: max(40px, calc(32px + env(safe-area-inset-bottom, 0px)))
     No additional override needed for the popup. */

  /* Fix: the conv overlay z-index (9995) can appear below Crisp chat launcher
     (z=99999). Ensure we keep the dialog accessible. */
  #sr-conv-overlay {
    z-index: 99996 !important;
  }

  /* Fix: exit overlay z-index */
  #sr-exit-overlay {
    z-index: 99995 !important;
  }
}


/* ── 7. Account tier upsell cards — full-width CTA on 375px ─────────────── */
/* upgrade-prompts-1529300.css has .ugp-cta as inline-flex. On 375px the
   button can clip if the text is long. Full-width on xs. */
@media (max-width: 420px) {
  .ugp-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .ugp-cta {
    width: 100%;
    justify-content: center;
  }
}


/* ── 8. Post-purchase upsell success — price row overflow ───────────────── */
/* upsell-1528354.css .us-upsell-card__price-row uses flex with baseline align.
   On 375px a long savings pill can wrap oddly. */
@media (max-width: 480px) {
  .us-upsell-card__price-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .us-upsell-card__price {
    font-size: 22px;
  }
}


/* ── 9. Nudge bar — safe area for home indicator ────────────────────────── */
/* Already added to nudge-1529301.css but ensure it applies to bar content
   so nothing is hidden behind the home indicator pill */
@media (max-width: 480px) {
  .sr-nudge-bar-content {
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }
}


/* ── 10. Books A/B paywall — option cards overflow on 375px ─────────────── */
/* The three-option layout stacks to 1fr on mobile (good), but long price
   strings like "$49.99/mo" can look cramped. Add min text breathing room. */
@media (max-width: 420px) {
  .br-paywall__options--three {
    gap: 12px;
  }
  /* Ensure price text doesn't cause card to stretch */
  .br-paywall__opt-price {
    font-size: clamp(1.5rem, 8vw, 2rem);
  }
}


/* ── 11. Crisp chat z-index and sticky CTA overlap resolution ───────────── */
/* On pages with .bn-sticky (bundle/filing pages on mobile), Crisp chat
   widget (z-index ~99999) can stack on top. The bn-sticky bar (z:200) sits
   below Crisp which is correct. However, Crisp itself sits at bottom-right
   and the sticky bar covers the full width — there is no overlap since Crisp
   is a corner icon. No z-index change needed. But: page content bottom
   padding must account for both the sticky bar (~68px) AND Crisp button
   (~56px + margin). Adding a safe minimum. */
@media (max-width: 768px) {
  /* Extra bottom breathing room on bundle/service pages */
  .bn-page.has-sticky-cta {
    padding-bottom: 80px;
  }
}


/* ── 12. Overall body font-size guard on mobile ─────────────────────────── */
/* Ensure body text never falls below 16px on mobile for readability.
   Affects: cross-sell desc (13.5px), badge text (10px - decorative ok),
   trust row items (12px - small but not body text). */
@media (max-width: 480px) {
  /* Bundle page body text */
  .bn-step__desc,
  .bn-feature__desc,
  .bn-faq__a {
    font-size: 0.9rem; /* 14.4px minimum at 16px root */
    line-height: 1.6;
  }
  /* Combo card meta text */
  .bn-combo-card__meta {
    font-size: 11.5px;
    flex-wrap: wrap;
    gap: 6px;
  }
}


/* ── Reduced motion: respect prefers-reduced-motion ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sr-nudge-modal,
  .sr-nudge-bar,
  .sr-conv-card,
  .sr-exit-card,
  .bn-hero__cta,
  .bn-sticky__btn,
  .cs-card,
  .cs-btn {
    transition: none !important;
    animation: none !important;
  }
}