/*
 * Task #1450377 — GLOBAL VISUAL PURGE
 * Sitewide design system enforcement: kill ALL dark pills/badges,
 * fix contrast violations, centering, dark section backgrounds.
 *
 * This file owns: Converting every remaining dark-background badge, pill,
 * tag, chip, label, card, and section element to white/light-tint backgrounds
 * across ALL pages (not just homepage).
 *
 * Loaded LAST before armor zone. Uses !important to beat inline styles.
 *
 * MANDATORY COLOR RULES:
 *   Badge/pill bg:   #E8F5E9 (green), #E3F2FD (blue), #FFF3E0 (orange),
 *                    #F3E5F5 (purple), #ECEFF1 (gray)
 *   Badge/pill text: #1B5E20 (green), #0D47A1 (blue), #E65100 (orange),
 *                    #4A148C (purple), #37474F (gray)
 *   Section bg:      #FFFFFF or #F9FAFB — NO dark sections
 *   All text:        WCAG AA 4.5:1 minimum
 */

/* ═══════════════════════════════════════════════════════════
   1. GLOBAL BADGE / PILL / TAG OVERRIDES
   Force ALL badge-style elements to light tint backgrounds.
   These override design-system.css, design-system-sr-tokens.css,
   and supplements-combined.css.
   ═══════════════════════════════════════════════════════════ */

/* ── Accent-filled badge → light green tint ── */
.badge-accent,
.pill-accent,
.pill-emerald,
.pill-primary,
.bg-accent:not(button):not(a):not([type="submit"]) {
  background: #E8F5E9 !important;
  color: #1B5E20 !important;
}

/* ── Navy / dark-filled badge → light gray ── */
.badge-navy,
.badge-dark,
.pill-navy,
.pill-dark,
.bg-navy:not(button):not(a):not([type="submit"]),
.bg-primary:not(button):not(a):not(.btn):not([type="submit"]) {
  background: #ECEFF1 !important;
  color: #37474F !important;
}

/* ── sr-badge-navy from tokens file → light gray ── */
.sr-badge-navy {
  background: #ECEFF1 !important;
  color: #37474F !important;
}

/* ── sr-card-dark and sr-card-navy-glass → white ── */
.sr-card-dark {
  background: #FFFFFF !important;
  color: #1F2A37 !important;
  border: 1px solid #E5E7EB;
}

.sr-card-navy-glass {
  background: #FFFFFF !important;
  color: #1F2A37 !important;
  border: 1px solid #E5E7EB;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── sr-input-dark → normal input ── */
.sr-input-dark {
  background: #FFFFFF !important;
  border-color: #E5E7EB !important;
  color: #1F2A37 !important;
}
.sr-input-dark::placeholder {
  color: #9CA3AF !important;
}

/* ═══════════════════════════════════════════════════════════
   2. INLINE STYLE ATTRIBUTE SELECTORS — DARK BACKGROUNDS
   Catch elements with dark inline background styles.
   Exclude buttons, links, and form elements.
   ═══════════════════════════════════════════════════════════ */

/* Near-black #0A0A0A inline backgrounds on non-interactive elements */
div[style*="background:#0A0A0A"],
div[style*="background: #0A0A0A"],
div[style*="background-color:#0A0A0A"],
div[style*="background-color: #0A0A0A"],
span[style*="background:#0A0A0A"],
span[style*="background: #0A0A0A"],
section[style*="background:#0A0A0A"],
section[style*="background: #0A0A0A"] {
  background: #FFFFFF !important;
  color: #1F2A37 !important;
}

/* Dark navy #0f172a inline backgrounds */
div[style*="background:#0f172a"],
div[style*="background: #0f172a"],
div[style*="background-color:#0f172a"],
div[style*="background-color: #0f172a"],
span[style*="background:#0f172a"],
span[style*="background: #0f172a"],
section[style*="background:#0f172a"],
section[style*="background: #0f172a"],
td[style*="background:#0f172a"],
td[style*="background: #0f172a"] {
  background: #F9FAFB !important;
  color: #1F2A37 !important;
}

/* Dark navy #1e3a5f inline backgrounds — non-button/link */
div[style*="background:#1e3a5f"],
div[style*="background: #1e3a5f"],
span[style*="background:#1e3a5f"],
span[style*="background: #1e3a5f"],
section[style*="background:#1e3a5f"],
section[style*="background: #1e3a5f"] {
  background: #E3F2FD !important;
  color: #0D47A1 !important;
}

/* Dark navy #1a1f2e / #1e293b inline backgrounds */
div[style*="background:#1a1f2e"],
div[style*="background: #1a1f2e"],
div[style*="background:#1e293b"],
div[style*="background: #1e293b"] {
  background: #F9FAFB !important;
  color: #1F2A37 !important;
  border: 1px solid #E5E7EB;
}

/* Dark #0a0f0a inline backgrounds */
div[style*="background:#0a0f0a"],
div[style*="background: #0a0f0a"],
section[style*="background:#0a0f0a"],
section[style*="background: #0a0f0a"] {
  background: #FFFFFF !important;
  color: #1F2A37 !important;
}

/* Dark gradient backgrounds on non-button divs/sections/tds */
div[style*="background:linear-gradient"][style*="#0f1117"],
div[style*="background: linear-gradient"][style*="#0f1117"],
section[style*="background:linear-gradient"][style*="#0f1117"],
section[style*="background: linear-gradient"][style*="#0f1117"],
div[style*="background:linear-gradient"][style*="#0A0F1E"],
div[style*="background: linear-gradient"][style*="#0A0F1E"],
td[style*="background:linear-gradient"][style*="#0f172a"],
td[style*="background: linear-gradient"][style*="#0f172a"],
td[style*="background:linear-gradient"][style*="#065f46"],
td[style*="background: linear-gradient"][style*="#065f46"],
td[style*="background:linear-gradient"][style*="#064e3b"],
td[style*="background: linear-gradient"][style*="#064e3b"] {
  background: #F9FAFB !important;
  color: #1F2A37 !important;
}

/* Catch #080c14 dark email-like backgrounds appearing on web pages */
div[style*="background: #080c14"],
div[style*="background:#080c14"] {
  background: #F9FAFB !important;
  color: #1F2A37 !important;
}

/* Catch #07182e dark backgrounds */
div[style*="background:#07182e"],
div[style*="background: #07182e"] {
  background: #F9FAFB !important;
  color: #1F2A37 !important;
}

/* ═══════════════════════════════════════════════════════════
   3. DARK SECTION BACKGROUNDS → WHITE
   Force all dark section backgrounds to white/near-white.
   ═══════════════════════════════════════════════════════════ */

/* HP Unclaimed section — already in purge file but reinforcing
   because design-system.css still has the dark source */
.hp-unclaimed {
  background: #FFFFFF !important;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
}
.hp-unclaimed::before,
.hp-unclaimed::after {
  display: none !important;
}
.hp-unclaimed__number {
  color: #0A0A0A !important;
  text-shadow: none !important;
}
.hp-unclaimed__label {
  color: #374151 !important;
}
.hp-unclaimed__label strong {
  color: #111827 !important;
}
.hp-unclaimed__pill {
  background: #F3F4F6 !important;
  border: 1px solid #E5E7EB !important;
  color: #374151 !important;
}
.hp-unclaimed__pill-dot {
  opacity: 1 !important;
}
.hp-unclaimed__eyebrow {
  color: #1B5E20 !important;
}
.hp-unclaimed__dot {
  background: #1B5E20 !important;
}

/* ═══════════════════════════════════════════════════════════
   4. PRICING PAGE — Fix dark backgrounds and contrast
   ═══════════════════════════════════════════════════════════ */

/* Pricing card popular/featured badges — light tint */
.hp-pricing-card__badge,
.pricing-badge,
.plan-badge,
.popular-badge,
[class*="pricing"] .badge,
[class*="pricing"] [class*="badge"] {
  background: #E8F5E9 !important;
  color: #1B5E20 !important;
}

/* Pricing CTA buttons with dark green/emerald should keep
   but text must be white */
.hp-pricing-card .btn,
.pricing-card .btn,
[class*="pricing"] .btn-primary,
[class*="pricing"] .btn-accent {
  color: #FFFFFF !important;
}

/* ═══════════════════════════════════════════════════════════
   5. FOR-BUSINESS / FOR-LAW-FIRMS — Fix dark hero sections
   ═══════════════════════════════════════════════════════════ */

/* B2B pages — force white/light backgrounds on sections */
.fb-hero,
.fl-hero,
[class*="b2b-hero"],
[class*="for-business"] section,
[class*="for-law-firms"] section {
  background: #FFFFFF !important;
  color: #1F2A37 !important;
}

/* B2B stat cards that might have dark backgrounds */
.fb-stat-card,
.fl-stat-card,
[class*="b2b"] .stat-card,
[class*="b2b-stat"] {
  background: #FFFFFF !important;
  color: #1F2A37 !important;
  border: 1px solid #E5E7EB;
}

/* B2B navy buttons — keep as intentional dark buttons but fix text */
.fb-btn-navy,
.fl-btn-navy {
  color: #FFFFFF !important;
}

/* ═══════════════════════════════════════════════════════════
   6. SUPPLEMENTS-COMBINED.CSS DARK OVERRIDES
   This file has many dark emerald (#00B37D) backgrounds
   on non-button elements. Override section-level ones.
   ═══════════════════════════════════════════════════════════ */

/* Settlement detail inline login/promo bands */
.sd-login-band,
.sd-promo-band,
[class*="login-prompt"],
[class*="promo-band"] {
  background: #F9FAFB !important;
  color: #1F2A37 !important;
}

/* Games section dark backgrounds */
.game-hero,
.game-header,
[class*="game-room"] > header,
.lobby-hero {
  background: #FFFFFF !important;
  color: #1F2A37 !important;
}

/* ═══════════════════════════════════════════════════════════
   7. CONTRAST ENFORCEMENT — Override dark-bg badge rules
   The contrast section in design-system.css actively sets
   white text on accent/navy badges. We need to override
   because we've changed those backgrounds to light.
   ═══════════════════════════════════════════════════════════ */

/* Override the contrast rules that set white text on badges
   that we've now converted to light backgrounds */
.badge-accent {
  color: #1B5E20 !important;
}

.badge-navy,
.badge-dark {
  color: #37474F !important;
}

.pill-emerald,
.pill-primary,
.pill-accent {
  color: #1B5E20 !important;
}

.pill-navy,
.pill-dark {
  color: #37474F !important;
}

/* ═══════════════════════════════════════════════════════════
   8. GLOBAL SECTION BACKGROUND ENFORCEMENT
   ALL sections on ALL pages: white or near-white only.
   Exceptions: buttons, links, nav, footer accent.
   ═══════════════════════════════════════════════════════════ */

/* Any section with a var(--color-primary) background (= #0A0A0A) */
section[style*="background: var(--color-primary)"],
section[style*="background-color: var(--color-primary)"],
div[style*="background: var(--color-primary)"]:not(button):not(a) {
  background: #FFFFFF !important;
  color: #1F2A37 !important;
}

/* ═══════════════════════════════════════════════════════════
   9. SETTLEMENT CARD BADGES — Ensure all use light tints
   ═══════════════════════════════════════════════════════════ */

/* Settlement card category/status badges */
.sr-card .badge,
.sr-card [class*="badge"],
.settlement-card .badge,
.settlement-card [class*="badge"] {
  background: #E8F5E9 !important;
  color: #1B5E20 !important;
}

/* Preserve specific badge colors for deadline states */
.sr-card .badge-deadline-yellow,
.sr-card .deadline-badge.closing-soon,
.sr-card .deadline-closing,
.settlement-card .badge-deadline-yellow {
  background: #FFF3E0 !important;
  color: #E65100 !important;
  border-color: rgba(230, 81, 0, 0.3) !important;
}

.sr-card .badge-deadline-red,
.sr-card .deadline-badge.urgent,
.sr-card .deadline-urgent,
.settlement-card .badge-deadline-red {
  background: #FEE2E2 !important;
  color: #991B1B !important;
  border-color: rgba(153, 27, 27, 0.3) !important;
}

.sr-card .badge-deadline-green,
.sr-card .deadline-badge.open,
.sr-card .deadline-open,
.settlement-card .badge-deadline-green {
  background: #E8F5E9 !important;
  color: #1B5E20 !important;
  border-color: rgba(27, 94, 32, 0.3) !important;
}

/* CLOSED badge */
.sr-card__closed-badge {
  background: #ECEFF1 !important;
  color: #37474F !important;
}

/* Open badge */
.sr-card__open-badge {
  background: #E8F5E9 !important;
  color: #1B5E20 !important;
}

/* ═══════════════════════════════════════════════════════════
   10. ADMIN BADGE PILLS IN ROUTE JS — Light tint
   Content calendar status badges (green/blue/etc)
   ═══════════════════════════════════════════════════════════ */

/* Status badge pills rendered inline in routes */
span[style*="background:#22c55e"][style*="color:#fff"] {
  background: #E8F5E9 !important;
  color: #1B5E20 !important;
}

span[style*="background:#3b82f6"][style*="color:#fff"] {
  background: #E3F2FD !important;
  color: #0D47A1 !important;
}

span[style*="background:#10b981"][style*="color:#fff"] {
  background: #E8F5E9 !important;
  color: #1B5E20 !important;
}

/* ═══════════════════════════════════════════════════════════
   11. CENTERING FIXES
   Fix misaligned headings, cards, and CTAs across all pages.
   ═══════════════════════════════════════════════════════════ */

/* Hero sections — center content */
.sr-hero__content,
[class*="hero"] .sr-container,
[class*="hero"] .container {
  text-align: center;
}

/* Section headers across all pages */
.section-header,
.sr-section-header,
[class*="section-header"] {
  text-align: center !important;
}

/* Pricing cards grid — center the grid */
.pricing-cards,
.pricing-grid,
[class*="pricing-grid"],
[class*="pricing-cards"] {
  justify-content: center !important;
  align-items: stretch !important;
}

/* Pricing card content — center text */
.pricing-card,
.hp-pricing-card,
[class*="pricing-card"] {
  text-align: center;
}

/* Card grids — even spacing */
.sr-grid-2,
.sr-grid-3,
.sr-grid-4 {
  justify-items: center;
}

/* CTA sections — center */
[class*="cta-section"],
[class*="final-cta"],
.sr-final-cta {
  text-align: center !important;
}

/* Trust badges row — center */
.trust-badges,
[class*="trust-badge"],
.footer-trust-badges {
  justify-content: center !important;
}

/* ═══════════════════════════════════════════════════════════
   12. SOCIAL PROOF CONSISTENCY
   Ensure social proof numbers are consistent across pages.
   ═══════════════════════════════════════════════════════════ */

/* Social proof ticker/counter badges — light backgrounds */
.social-proof-badge,
.social-proof-count,
[class*="social-proof"] .badge,
[class*="social-proof"] .pill {
  background: #F9FAFB !important;
  color: #374151 !important;
}

/* ═══════════════════════════════════════════════════════════
   13. BROWSE / DIRECTORY PAGE FIXES
   Category navigation, filter bars, sidebar badges.
   ═══════════════════════════════════════════════════════════ */

/* Category nav pills */
.dir-cat-nav .cat-pill.active,
.dir-cat-nav .cat-pill[aria-selected="true"] {
  background: #E8F5E9 !important;
  color: #1B5E20 !important;
}

/* Sidebar filter badges */
.browse-sidebar .badge,
.dir-sidebar .badge,
[class*="filter"] .badge {
  background: #ECEFF1 !important;
  color: #37474F !important;
}

/* ═══════════════════════════════════════════════════════════
   14. BLOG / NEWS / ASK PAGES
   ═══════════════════════════════════════════════════════════ */

.blog-tag,
.news-tag,
.article-tag,
[class*="blog"] .tag,
[class*="news"] .tag {
  background: #E3F2FD !important;
  color: #0D47A1 !important;
}

/* ═══════════════════════════════════════════════════════════
   15. TOOLS / CALCULATOR / SCANNER PAGES
   ═══════════════════════════════════════════════════════════ */

/* Tool hero/header dark sections */
.tool-hero,
.scanner-hero,
.calculator-hero,
[class*="tool-hero"],
[class*="scanner-hero"],
[class*="calculator-hero"] {
  background: #FFFFFF !important;
  color: #1F2A37 !important;
}

/* Tool result badges */
.tool-result .badge,
.scanner-result .badge,
[class*="result"] .badge:not(.badge-deadline-red):not(.badge-deadline-yellow):not(.badge-deadline-green) {
  background: #E8F5E9 !important;
  color: #1B5E20 !important;
}

/* ═══════════════════════════════════════════════════════════
   16. MY-MONEY / DASHBOARD DARK ELEMENTS
   ═══════════════════════════════════════════════════════════ */

.money-dashboard-hero,
.dashboard-hero,
[class*="money-dash"] .hero,
[class*="dashboard-header"] {
  background: #FFFFFF !important;
  color: #1F2A37 !important;
}

/* Dashboard stat cards */
.money-stat-card,
[class*="money-stat"],
[class*="dash-stat"] {
  background: #FFFFFF !important;
  color: #1F2A37 !important;
  border: 1px solid #E5E7EB;
}

/* ═══════════════════════════════════════════════════════════
   17. GAMES PAGE — Fix dark backgrounds
   ═══════════════════════════════════════════════════════════ */

/* Games lobby hero */
.games-lobby-hero,
.game-lobby-hero,
[class*="lobby-hero"] {
  background: #FFFFFF !important;
  color: #1F2A37 !important;
}

/* Game room cards */
.game-card,
[class*="game-card"] {
  background: #FFFFFF !important;
  color: #1F2A37 !important;
  border: 1px solid #E5E7EB;
}

/* Game tags — already light in games-lobby but enforcing */
.tag-blue { background: #E3F2FD !important; color: #0D47A1 !important; }
.tag-green { background: #E8F5E9 !important; color: #1B5E20 !important; }
.tag-orange { background: #FFF3E0 !important; color: #E65100 !important; }
.tag-purple { background: #F3E5F5 !important; color: #4A148C !important; }
.tag-gray { background: #ECEFF1 !important; color: #37474F !important; }

/* ═══════════════════════════════════════════════════════════
   18. MOBILE-SPECIFIC FIXES (≤768px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Force white backgrounds on ALL sections on mobile */
  section:not([class*="streak"]):not([class*="leaderboard"]) {
    background: #FFFFFF !important;
  }

  /* Mobile CTA bar at bottom — keep functional but fix contrast */
  #sr-mobile-cta-bar,
  [id*="mobile-cta"] {
    background: #FFFFFF !important;
    border-top: 1px solid #E5E7EB !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08) !important;
  }

  /* Mobile CTA bar buttons should stay green for visibility */
  #sr-mobile-cta-bar a,
  #sr-mobile-cta-bar button {
    color: #FFFFFF !important;
  }

  /* Ensure all badges are visible on mobile */
  .badge, .pill, .tag, .chip {
    font-size: 11px !important;
    min-height: 20px !important;
  }

  /* Center all section headers on mobile */
  .section-header,
  .sr-section-header,
  [class*="section-header"],
  [class*="section-title"] {
    text-align: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   19. DESKTOP-SPECIFIC FIXES (≥1024px)
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  /* Pricing cards — ensure even height and centered content */
  .pricing-card,
  .hp-pricing-card,
  [class*="pricing-card"] {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Hero content centering */
  .sr-hero,
  [class*="hero-section"] {
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════
   20. CATCH-ALL: UNIVERSAL DARK BADGE/PILL OVERRIDE
   Last resort — any element with badge/pill/tag/chip classes
   that still has a dark background gets forced to light.
   ═══════════════════════════════════════════════════════════ */

/* Any remaining dark-backgrounded badges not caught above */
[class*="badge"][style*="background:#0"],
[class*="badge"][style*="background: #0"],
[class*="badge"][style*="background:#1"],
[class*="badge"][style*="background: #1"],
[class*="badge"][style*="background:#2"],
[class*="badge"][style*="background: #2"],
[class*="pill"][style*="background:#0"],
[class*="pill"][style*="background: #0"],
[class*="pill"][style*="background:#1"],
[class*="pill"][style*="background: #1"],
[class*="pill"][style*="background:#2"],
[class*="pill"][style*="background: #2"],
[class*="tag"][style*="background:#0"],
[class*="tag"][style*="background: #0"],
[class*="tag"][style*="background:#1"],
[class*="tag"][style*="background: #1"] {
  background: #ECEFF1 !important;
  color: #37474F !important;
}

/* ═══════════════════════════════════════════════════════════
   21. VARIABLE REWARD ENGINE — Dark modal/section → Light
   ═══════════════════════════════════════════════════════════ */

div[style*="background:#1e3a5f"][style*="color:#fff"] {
  background: #E3F2FD !important;
  color: #0D47A1 !important;
}

/* ═══════════════════════════════════════════════════════════
   22. SETTLEMENT DETAIL PAGE — Dark inline bands
   ═══════════════════════════════════════════════════════════ */

/* Dark background notification/login bands on settlement pages */
.sd-band-dark,
[class*="sd-login"],
[class*="sd-promo"] {
  background: #F9FAFB !important;
  color: #1F2A37 !important;
}

/* ═══════════════════════════════════════════════════════════
   23. EXIT INTENT POPUP — Dark background
   ═══════════════════════════════════════════════════════════ */

.ei-popup,
.ei-popup-inner,
[class*="exit-intent"] .popup-content {
  background: #FFFFFF !important;
  color: #1F2A37 !important;
}

.ei-badge {
  background: #E8F5E9 !important;
  color: #1B5E20 !important;
}

/* ═══════════════════════════════════════════════════════════
   24. ELIGIBLE FOMO / GEO SECTION — Dark backgrounds
   ═══════════════════════════════════════════════════════════ */

.geo-fomo-section,
[class*="geo-fomo"],
#geo-fomo {
  background: #FFFFFF !important;
  color: #1F2A37 !important;
}

/* ═══════════════════════════════════════════════════════════
   25. TABLE HEADER ROWS — Dark backgrounds on data tables
   Tables in guides (Walmart, Amazon, Uber) use dark header rows.
   Convert to light backgrounds with proper contrast.
   ═══════════════════════════════════════════════════════════ */

tr[style*="background:#1e3a8a"],
tr[style*="background: #1e3a8a"] {
  background: #E3F2FD !important;
  color: #0D47A1 !important;
}

tr[style*="background:#0071CE"],
tr[style*="background: #0071CE"] {
  background: #E3F2FD !important;
  color: #0D47A1 !important;
}

tr[style*="background:#FF9900"],
tr[style*="background: #FF9900"] {
  background: #FFF3E0 !important;
  color: #E65100 !important;
}

tr[style*="background:#000000"],
tr[style*="background: #000000"] {
  background: #ECEFF1 !important;
  color: #37474F !important;
}

/* ═══════════════════════════════════════════════════════════
   26. CONTENT CALENDAR ADMIN — Dark code blocks
   ═══════════════════════════════════════════════════════════ */

div[style*="background:#0f172a"][style*="font-family:monospace"],
div[style*="background: #0f172a"][style*="font-family:monospace"] {
  background: #F8FAFC !important;
  color: #1F2A37 !important;
  border: 1px solid #E2E8F0;
}

div[style*="background:#1e293b"] {
  background: #F8FAFC !important;
  color: #1F2A37 !important;
  border: 1px solid #E2E8F0;
}

/* ═══════════════════════════════════════════════════════════
   27. CLAIMS ADMIN MODAL — Dark background
   ═══════════════════════════════════════════════════════════ */

div[style*="background:#1a1f2e"] {
  background: #FFFFFF !important;
  color: #1F2A37 !important;
  border: 1px solid #E2E8F0;
}

/* ═══════════════════════════════════════════════════════════
   28. BOUNTY BOARD PAGE — Dark card backgrounds
   ═══════════════════════════════════════════════════════════ */

.bb-card,
.bounty-card,
[class*="bounty-card"],
[class*="bb-card"] {
  background: #FFFFFF !important;
  color: #1F2A37 !important;
  border: 1px solid #E5E7EB;
}

.bb-card .badge,
.bounty-card .badge,
[class*="bounty"] .badge {
  background: #E8F5E9 !important;
  color: #1B5E20 !important;
}

/* ═══════════════════════════════════════════════════════════
   29. LEADERBOARD / STREAK — Force light if not game context
   ═══════════════════════════════════════════════════════════ */

.xp-leaderboard,
.streak-dashboard,
[class*="leaderboard"]:not(.game-leaderboard),
[class*="streak"]:not(.game-streak) {
  background: #FFFFFF !important;
  color: #1F2A37 !important;
}

.xp-leaderboard .badge,
.streak-dashboard .badge,
[class*="leaderboard"] .badge,
[class*="streak"] .badge {
  background: #E8F5E9 !important;
  color: #1B5E20 !important;
}

/* ═══════════════════════════════════════════════════════════
   30. SMART CTA BAR — Currently uses gradient dark bg
   Convert the mobile CTA bar from dark blue gradient to white.
   ═══════════════════════════════════════════════════════════ */

#sr-mobile-cta-bar[style*="background:linear-gradient"] {
  background: #FFFFFF !important;
  border-top: 1px solid #E5E7EB !important;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08) !important;
}

/* Fix text colors inside the lightened CTA bar */
#sr-mobile-cta-bar span,
#sr-mobile-cta-bar div {
  color: #1F2A37 !important;
}

/* Keep buttons inside CTA bar visible and accessible */
#sr-mobile-cta-bar a[style*="background:rgba(255,255,255"] {
  background: #E8F5E9 !important;
  color: #1B5E20 !important;
}

/* ═══════════════════════════════════════════════════════════
   31. PARTNER DASHBOARD / EMPLOYER PORTAL — Dark sections
   ═══════════════════════════════════════════════════════════ */

/* These are typically in email templates rendered via routes,
   but some may appear in web views too */
.partner-hero,
.employer-hero,
[class*="partner-dash"] .hero {
  background: #FFFFFF !important;
  color: #1F2A37 !important;
}

/* ═══════════════════════════════════════════════════════════
   32. PREMIUM FEATURE HERO SECTIONS — Dark navy gradients
   These pages use <style> blocks with dark gradient heroes.
   Our !important beats their non-!important.
   ═══════════════════════════════════════════════════════════ */

/* Alerts upgrade page hero */
.alerts-hero {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #1F2A37 !important;
}
.alerts-hero::before { display: none !important; }
.alerts-hero h1,
.alerts-hero h2,
.alerts-hero p { color: #1F2A37 !important; }
.alerts-badge {
  background: #E3F2FD !important;
  border-color: rgba(13, 71, 161, 0.3) !important;
  color: #0D47A1 !important;
}

/* Claim monitoring page hero */
.cm-hero {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #1F2A37 !important;
}
.cm-hero::before { display: none !important; }
.cm-hero h1,
.cm-hero h2,
.cm-hero p { color: #1F2A37 !important; }

/* Deadline tracker page hero */
.dt-hero {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #1F2A37 !important;
}
.dt-hero::before { display: none !important; }
.dt-hero h1,
.dt-hero h2,
.dt-hero p { color: #1F2A37 !important; }

/* Settlement report card page hero */
.src-hero {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #1F2A37 !important;
}
.src-hero::before { display: none !important; }
.src-hero h1,
.src-hero h2,
.src-hero p { color: #1F2A37 !important; }

/* ═══════════════════════════════════════════════════════════
   33. SETTLEMENT DETAIL — Filing exit popup & email overlay
   These are modals with dark navy gradient backgrounds.
   ═══════════════════════════════════════════════════════════ */

.filing-exit-popup,
.ac-email-popup {
  background: #FFFFFF !important;
  color: #1F2A37 !important;
  border: 1px solid #E5E7EB;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15) !important;
}
.filing-exit-popup h2,
.filing-exit-popup h3,
.filing-exit-popup p,
.ac-email-popup h2,
.ac-email-popup h3,
.ac-email-popup p {
  color: #1F2A37 !important;
}

/* ═══════════════════════════════════════════════════════════
   34. PRICING PAGE — Fix dark CTA section backgrounds
   ═══════════════════════════════════════════════════════════ */

/* Pricing cards — CTA button backgrounds (keep emerald, fix text to white) */
.hp-pricing-card .btn,
.pricing-plan .btn,
[class*="pricing"] [class*="btn-cta"] {
  color: #FFFFFF !important;
}

/* Pricing section headers */
.pricing-section h1,
.pricing-section h2,
[class*="pricing"] h1,
[class*="pricing"] h2 {
  color: #0A0A0A !important;
}

/* ═══════════════════════════════════════════════════════════
   35. FOR-BUSINESS / FOR-LAW-FIRMS — Specific class overrides
   ═══════════════════════════════════════════════════════════ */

/* for-business hero and cards */
.fb-hero-section,
.fb-hero,
[class*="fb-hero"] {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #1F2A37 !important;
}
.fb-hero h1,
.fb-hero h2,
.fb-hero p,
.fb-hero-section h1,
.fb-hero-section h2,
.fb-hero-section p {
  color: #1F2A37 !important;
}

/* for-law-firms hero */
.fl-hero-section,
.fl-hero,
[class*="fl-hero"] {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #1F2A37 !important;
}
.fl-hero h1,
.fl-hero h2,
.fl-hero p {
  color: #1F2A37 !important;
}

/* ═══════════════════════════════════════════════════════════
   36. SUPPLEMENTARY DARK SECTION — Comparison tier cards
   Some pages have dark tier comparison cards.
   ═══════════════════════════════════════════════════════════ */

.tier-card-dark,
.plan-card-dark,
[class*="tier-card"][class*="dark"],
[class*="plan-card"][class*="dark"],
[class*="plan-card"][class*="featured"] {
  background: #FFFFFF !important;
  color: #1F2A37 !important;
  border: 2px solid #E8F5E9;
}

/* ═══════════════════════════════════════════════════════════
   37. CATCH-ALL: WHITE TEXT ON NOW-LIGHT BACKGROUNDS
   After converting dark backgrounds to light, any child
   elements with white/light text need to be fixed to dark.
   ═══════════════════════════════════════════════════════════ */

/* Fix white text that was intended for dark backgrounds */
.alerts-hero span[style*="color:#90cdf4"],
.alerts-hero span[style*="color: #90cdf4"],
.cm-hero span[style*="color:#90cdf4"],
.dt-hero span[style*="color:#90cdf4"],
.src-hero span[style*="color:#90cdf4"] {
  color: #0D47A1 !important;
}

/* Fix rgba white text inside converted sections */
.alerts-hero [style*="color:rgba(255"],
.alerts-hero [style*="color: rgba(255"],
.cm-hero [style*="color:rgba(255"],
.cm-hero [style*="color: rgba(255"],
.dt-hero [style*="color:rgba(255"],
.dt-hero [style*="color: rgba(255"],
.src-hero [style*="color:rgba(255"],
.src-hero [style*="color: rgba(255"] {
  color: #6B7280 !important;
}

/* Fix white (#fff/#ffffff) text inside converted sections */
.alerts-hero [style*="color:#fff"],
.alerts-hero [style*="color: #fff"],
.alerts-hero [style*="color:#FFF"],
.cm-hero [style*="color:#fff"],
.cm-hero [style*="color: #fff"],
.dt-hero [style*="color:#fff"],
.dt-hero [style*="color: #fff"],
.src-hero [style*="color:#fff"],
.src-hero [style*="color: #fff"] {
  color: #1F2A37 !important;
}

/* ═══════════════════════════════════════════════════════════
   38. ANNUAL PASS PAGE — Dark hero section
   ═══════════════════════════════════════════════════════════ */

.annual-pass-hero,
.ap-hero,
[class*="annual-pass"] .hero,
[class*="ap-hero"] {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #1F2A37 !important;
}

/* ═══════════════════════════════════════════════════════════
   39. AUTOPILOT PAGE — Fix dark sections
   ═══════════════════════════════════════════════════════════ */

.autopilot-hero,
[class*="autopilot"] .hero {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #1F2A37 !important;
}