/* settlement-detail-fix-1344927.css — Task #1344946 (rewrite of #1344927)
   P0: Settlement detail pages render as full black void at 375px AND 1440px.

   Root cause: Multiple CSS files (premium-v2.css, mobile-settlements-qa-1296241.css,
   design-system-sr-tokens.css) apply dark navy backgrounds to sections, cards, and
   hero areas. The original fix targeted individual class names but missed many elements.

   New approach: Uses .page-settlement-detail body class (added via sync script in
   settlement-detail.ejs) as a scoping selector for COMPREHENSIVE white-background
   enforcement. Targets ALL divs/sections inside settlement detail pages, with
   surgical exemptions for intentional dark elements (overlays, header, footer, CTAs).

   DESIGN RULES:
   - White (#FFFFFF) backgrounds on all standard content
   - Dark text on light backgrounds
   - All text WCAG AA (4.5:1 minimum)
*/

/* ═══════════════════════════════════════════════════════════════════════
   1. BODY-LEVEL OVERRIDE — white bg for settlement detail pages
   ═══════════════════════════════════════════════════════════════════════ */

body.page-settlement-detail {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1f2937 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. COMPREHENSIVE SECTION/DIV OVERRIDE — force white on ALL content
   Exemptions: header, nav, footer, overlays, modal backdrops, CTAs
   ═══════════════════════════════════════════════════════════════════════ */

body.page-settlement-detail section:not(.llg-section):not(.lh-section),
body.page-settlement-detail .detail-hero,
body.page-settlement-detail .detail-inner,
body.page-settlement-detail .detail-section,
body.page-settlement-detail .detail-content,
body.page-settlement-detail .detail-page-content,
body.page-settlement-detail .content-with-sidebar,
body.page-settlement-detail #main-content {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* All divs inside main content — white background (high specificity) */
body.page-settlement-detail #main-content > *:not(.filing-exit-overlay):not(#exitIntentOverlay):not(#sr-exit-overlay):not(#srProUpsellModal):not(#sr-fi-wrap):not(.ac-email-overlay):not(#sr-ep-overlay-old):not(#filingExitOverlay):not(#acEmailCaptureOverlay):not(header):not(footer):not(nav) {
  background-color: #ffffff !important;
}

/* Catch ALL child sections and cards that may have dark backgrounds */
body.page-settlement-detail .detail-hero ~ section,
body.page-settlement-detail .detail-hero ~ div:not(.filing-exit-overlay):not(#exitIntentOverlay):not(#sr-exit-overlay):not(#filingExitOverlay):not(#acEmailCaptureOverlay):not(#srProUpsellModal):not(#sr-fi-wrap):not(.ac-email-overlay):not(#sr-ep-overlay-old):not(#sr-view-hard-gate):not(#sr-view-soft-gate) {
  background-color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. HERO SECTION — white background, dark text (ALL viewports)
   The detail-cat-banner keeps its gradient (intentional hero image).
   Everything else in the hero gets white bg + dark text.
   ═══════════════════════════════════════════════════════════════════════ */

body.page-settlement-detail .detail-hero {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1f2937 !important;
}

body.page-settlement-detail .detail-hero h1,
body.page-settlement-detail .detail-hero h2,
body.page-settlement-detail .detail-hero h3,
body.page-settlement-detail .detail-hero .title {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

body.page-settlement-detail .detail-hero p,
body.page-settlement-detail .detail-hero span:not(.card-category):not(.sr-verified-badge):not([class*="badge"]):not([class*="pill"]):not([class*="fomo"]),
body.page-settlement-detail .detail-hero a:not(.bar-cta):not(.filing-exit-cta):not([class*="cta"]):not([class*="btn"]):not([class*="badge"]) {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   4. DETAIL INNER — content area below banner
   ═══════════════════════════════════════════════════════════════════════ */

body.page-settlement-detail .detail-inner {
  background: #ffffff !important;
  color: #1f2937 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   5. TEXT COLOR OVERRIDES — dark text for readability
   ═══════════════════════════════════════════════════════════════════════ */

/* Headings — darkest */
body.page-settlement-detail h1,
body.page-settlement-detail h2,
body.page-settlement-detail h3,
body.page-settlement-detail h4 {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* Body text — dark gray */
body.page-settlement-detail p,
body.page-settlement-detail li,
body.page-settlement-detail dd {
  color: #374151 !important;
}

/* Labels / muted text */
body.page-settlement-detail dt,
body.page-settlement-detail .detail-stat-label,
body.page-settlement-detail .sdr-stat-label {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
}

/* Stat values — dark and prominent */
body.page-settlement-detail .detail-stat-value,
body.page-settlement-detail .sdr-stat-value,
body.page-settlement-detail .detail-payout-value,
body.page-settlement-detail .sdr-payout-value,
body.page-settlement-detail .detail-amount-display {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   6. QUICK FACTS — light gray background
   ═══════════════════════════════════════════════════════════════════════ */

body.page-settlement-detail .sr-quick-facts {
  background: #f8fafc !important;
  color: #1f2937 !important;
}

body.page-settlement-detail .sr-quick-facts dt {
  color: #6b7280 !important;
}

body.page-settlement-detail .sr-quick-facts dd {
  color: #1f2937 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   7. LIVE SOCIAL PROOF BAR — light yellow background
   ═══════════════════════════════════════════════════════════════════════ */

body.page-settlement-detail .sr-lsp-bar {
  background: #fefce8 !important;
  border-top: 1px solid #fbbf24 !important;
  border-bottom: 1px solid #fbbf24 !important;
  color: #1f2937 !important;
}

body.page-settlement-detail .sr-lsp-bar * {
  color: #1f2937 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   8. FILING HELP SECTION — white background
   ═══════════════════════════════════════════════════════════════════════ */

body.page-settlement-detail .fh-section,
body.page-settlement-detail .fh-wrapper,
body.page-settlement-detail .fh-card,
body.page-settlement-detail .filing-help-section,
body.page-settlement-detail .fh-value-section,
body.page-settlement-detail .fh-faq-section {
  background: #ffffff !important;
  color: #1f2937 !important;
}

body.page-settlement-detail .fh-section h2,
body.page-settlement-detail .fh-section h3,
body.page-settlement-detail .filing-help-section h2,
body.page-settlement-detail .filing-help-section h3 {
  color: #111827 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   9. RELATED SETTLEMENTS / SIDEBAR — white background
   ═══════════════════════════════════════════════════════════════════════ */

body.page-settlement-detail .sd-related-guides,
body.page-settlement-detail .llg-section,
body.page-settlement-detail .lh-section,
body.page-settlement-detail .sidebar-card,
body.page-settlement-detail .detail-sidebar,
body.page-settlement-detail .related-main,
body.page-settlement-detail .testimonials-section,
body.page-settlement-detail .comments-section,
body.page-settlement-detail .howto-guide-link,
body.page-settlement-detail .email-capture-widget,
body.page-settlement-detail .also-eligible-widget,
body.page-settlement-detail .recommended-resources-section {
  background: #ffffff !important;
  color: #1f2937 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   10. PAYOUT ESTIMATOR — light background
   ═══════════════════════════════════════════════════════════════════════ */

body.page-settlement-detail .pcalc-wrap,
body.page-settlement-detail .pcalc-section,
body.page-settlement-detail .pe-section,
body.page-settlement-detail .payout-estimator {
  background: #f8fafc !important;
  color: #1f2937 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   11. INLINE DARK BACKGROUND CATCH-ALL
   Targets elements with inline style dark backgrounds
   ═══════════════════════════════════════════════════════════════════════ */

/* Catch inline dark backgrounds on divs and sections */
body.page-settlement-detail [style*="background:#0f"],
body.page-settlement-detail [style*="background: #0f"],
body.page-settlement-detail [style*="background:#0a"],
body.page-settlement-detail [style*="background: #0a"],
body.page-settlement-detail [style*="background:#0d"],
body.page-settlement-detail [style*="background: #0d"],
body.page-settlement-detail [style*="background:#11"],
body.page-settlement-detail [style*="background: #11"],
body.page-settlement-detail [style*="background:#1a"],
body.page-settlement-detail [style*="background: #1a"],
body.page-settlement-detail [style*="background:#0c"],
body.page-settlement-detail [style*="background: #0c"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1f2937 !important;
}

/* Also catch unquoted inline style backgrounds (malformed HTML) */
body.page-settlement-detail [style*="background:linear-gradient"][style*="#0f1117"],
body.page-settlement-detail [style*="background:linear-gradient"][style*="#1a1f2e"] {
  background: #f0f4ff !important;
  background-color: #f0f4ff !important;
  color: #1f2937 !important;
}

/* Fix white text in elements that were dark-on-dark */
body.page-settlement-detail [style*="color:#fff"],
body.page-settlement-detail [style*="color: #fff"],
body.page-settlement-detail [style*="color:#e2e8f0"],
body.page-settlement-detail [style*="color: #e2e8f0"],
body.page-settlement-detail [style*="color:#9ca3af"],
body.page-settlement-detail [style*="color: #9ca3af"],
body.page-settlement-detail [style*="color:#86efac"],
body.page-settlement-detail [style*="color: #86efac"] {
  color: inherit !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   12. MOBILE-SPECIFIC OVERRIDES (≤480px)
   Neutralize dark backgrounds from mobile-settlements-qa-1296241.css
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  body.page-settlement-detail .detail-hero,
  body.page-settlement-detail .sdr-hero,
  body.page-settlement-detail .settlement-hero,
  body.page-settlement-detail .sd-hero,
  body.page-settlement-detail .detail-hero-section {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }

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

  body.page-settlement-detail .detail-hero p,
  body.page-settlement-detail .sdr-hero p,
  body.page-settlement-detail .detail-hero span:not(.card-category):not(.sr-verified-badge):not([class*="badge"]):not([class*="pill"]),
  body.page-settlement-detail .sdr-hero span {
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
  }

  body.page-settlement-detail .detail-stat-value,
  body.page-settlement-detail .sdr-stat-value,
  body.page-settlement-detail .detail-payout-value,
  body.page-settlement-detail .sdr-payout-value,
  body.page-settlement-detail .detail-amount-display {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
  }

  body.page-settlement-detail .detail-stat-label,
  body.page-settlement-detail .sdr-stat-label {
    color: #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   13. BREADCRUMBS — always readable
   ═══════════════════════════════════════════════════════════════════════ */

body.page-settlement-detail .breadcrumb-nav,
body.page-settlement-detail .breadcrumb-nav a {
  color: #004494 !important;
}

body.page-settlement-detail .breadcrumb-sep {
  color: #6b7280 !important;
}

body.page-settlement-detail .breadcrumb-current {
  color: #4b5563 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   14. BADGES — keep colored backgrounds, ensure readable text
   ═══════════════════════════════════════════════════════════════════════ */

body.page-settlement-detail .card-category {
  color: #004494 !important;
  -webkit-text-fill-color: #004494 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   15. PRO GATE SECTIONS — keep their distinctive styling
   ═══════════════════════════════════════════════════════════════════════ */

body.page-settlement-detail .pro-gate-wrapper {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  color: #1f2937 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   16. QUIZ SECTION — white background
   ═══════════════════════════════════════════════════════════════════════ */

body.page-settlement-detail .quiz-section,
body.page-settlement-detail .quiz-header,
body.page-settlement-detail .quiz-body {
  background: #ffffff !important;
  color: #1f2937 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   17. EXEMPTIONS — intentional dark elements (DO NOT override)
   Overlays, modals, sticky bar, header, footer, CTA buttons
   ═══════════════════════════════════════════════════════════════════════ */

/* Filing exit overlay — keep dark backdrop */
body.page-settlement-detail .filing-exit-overlay,
body.page-settlement-detail #filingExitOverlay,
body.page-settlement-detail .filing-exit-popup,
body.page-settlement-detail #exitIntentOverlay,
body.page-settlement-detail #exitIntentModal,
body.page-settlement-detail #sr-exit-overlay,
body.page-settlement-detail .sr-exit-card,
body.page-settlement-detail #acEmailCaptureOverlay,
body.page-settlement-detail #srProUpsellModal,
body.page-settlement-detail #sr-fi-wrap,
body.page-settlement-detail #sr-ep-overlay-old,
body.page-settlement-detail #sr-view-hard-gate,
body.page-settlement-detail #sr-view-soft-gate {
  background-color: unset !important;
  background: unset !important;
  color: unset !important;
}

/* Sticky urgency bar — keep blue gradient (intentional) */
body.page-settlement-detail #stickyUrgencyBar {
  background-color: unset !important;
  background: unset !important;
  color: unset !important;
}

/* CTA buttons — keep their colors */
body.page-settlement-detail .filing-exit-cta,
body.page-settlement-detail .bar-cta,
body.page-settlement-detail [class*="cta-btn"],
body.page-settlement-detail [class*="submit-btn"],
body.page-settlement-detail .ei-submit-btn,
body.page-settlement-detail .fh-btn,
body.page-settlement-detail .sidebar-btn-xl,
body.page-settlement-detail .detail-cta-main-btn,
body.page-settlement-detail .pe-file-btn,
body.page-settlement-detail .sr-vg-plan-cta {
  background-color: unset !important;
  background: unset !important;
  color: unset !important;
}

/* Header and footer — keep navy */
body.page-settlement-detail > header,
body.page-settlement-detail > nav,
body.page-settlement-detail > footer,
body.page-settlement-detail .sr-header,
body.page-settlement-detail .sr-footer,
body.page-settlement-detail .site-footer,
body.page-settlement-detail footer[role='contentinfo'],
body.page-settlement-detail header[role='banner'],
body.page-settlement-detail #mainNav {
  background-color: unset !important;
  background: unset !important;
  color: unset !important;
}

/* Category banner gradient — intentional hero image area */
body.page-settlement-detail .detail-cat-banner {
  background-color: unset !important;
  background: unset !important;
}

/* FOMO bar ticker — keep its styling */
body.page-settlement-detail #srFomoTicker,
body.page-settlement-detail .fomo-ticker {
  background-color: unset !important;
  background: unset !important;
  color: unset !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   18. FILING EXIT POPUP — ensure price is visible
   Fix for $0 pricing bug: ensure the popup text shows correct price
   ═══════════════════════════════════════════════════════════════════════ */

body.page-settlement-detail .filing-exit-popup {
  background: linear-gradient(135deg, #0A1628 0%, #152235 100%) !important;
  color: #ffffff !important;
}

body.page-settlement-detail .filing-exit-headline {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.page-settlement-detail .filing-exit-body {
  color: rgba(255, 255, 255, 0.85) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}

body.page-settlement-detail .filing-exit-body strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.page-settlement-detail .filing-exit-cta {
  background: linear-gradient(135deg, #d4af37 0%, #f5d76e 50%, #d4af37 100%) !important;
  color: #0f1117 !important;
  -webkit-text-fill-color: #0f1117 !important;
  display: block !important;
  text-align: center !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
}

body.page-settlement-detail .filing-exit-dismiss a {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   19. INLINE CTA CARD (Position 2 after description)
   This card has dark background by design — convert to light card
   ═══════════════════════════════════════════════════════════════════════ */

body.page-settlement-detail [style*="#0f1117"][style*="border:2px solid #d4af37"] {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border-color: #3b82f6 !important;
}

body.page-settlement-detail [style*="#0f1117"][style*="border:2px solid #d4af37"] [style*="color:#ffffff"] {
  color: #111827 !important;
}

body.page-settlement-detail [style*="#0f1117"][style*="border:2px solid #d4af37"] [style*="color:#9ca3af"] {
  color: #6b7280 !important;
}

body.page-settlement-detail [style*="#0f1117"][style*="border:2px solid #d4af37"] [style*="color:#d4af37"] {
  color: #1e40af !important;
}