/**
 * Task #1497330 — WCAG AA Contrast + Mobile Spacing Fix (2026-05-11)
 * Owns: Final contrast catches + mobile spacing enforcement for ALL pages.
 * Does NOT own: page-specific layout, animations, component styles.
 *
 * WHY THIS FILE EXISTS:
 * 1. contrast-enforcement-1482800.css was created but never loaded — now fixed
 *    in layout-head.ejs. This file covers remaining gaps BOTH files miss.
 * 2. Mobile spacing at 375px had excessive padding (56px section gaps, 4rem+
 *    section padding) causing massive whitespace gaps on small screens.
 * 3. Some inline styles with color:#fff on elements whose backgrounds were
 *    changed from dark to light are not caught by attribute selectors because
 *    they use CSS variables or class-based backgrounds.
 *
 * LOADS: Before armor zone in layout-head.ejs on ALL pages (homepage + non-homepage).
 */


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 1: MOBILE SPACING — Tighten vertical gaps at ≤480px
   Root cause: --section-padding-mobile: 56px is too generous for 375px.
   Fix: Reduce section padding to 32px, tighten component gaps to 1rem.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* Override CSS variable for mobile section padding */
  :root {
    --section-padding-mobile: 32px !important;
    --sr-section-pad-mobile: 32px !important;
    --section-padding-sm: 32px !important;
  }

  /* All sections: tighter vertical padding */
  html body section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Sections with explicit large padding — cap them */
  html body section[style*="padding:4rem"],
  html body section[style*="padding:5rem"],
  html body section[style*="padding: 4rem"],
  html body section[style*="padding: 5rem"],
  html body section[style*="padding-top:4rem"],
  html body section[style*="padding-top:5rem"],
  html body section[style*="padding-top: 4rem"],
  html body section[style*="padding-top: 5rem"] {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Hero sections: tighter on mobile */
  html body [class*="-hero"],
  html body [class*="__hero"],
  html body .hero {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Section headings: reduce bottom margin */
  html body .section-heading {
    margin-bottom: 0.75rem !important;
  }
  html body .section-subheading {
    margin-bottom: 1rem !important;
  }
  html body .section-label {
    margin-bottom: 0.35rem !important;
  }

  /* Card grids: tighter gap */
  html body [class*="-grid"],
  html body [class*="__grid"] {
    gap: 0.75rem !important;
  }

  /* Content containers: reduce horizontal padding */
  html body [class*="__inner"],
  html body [class*="-inner"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Trust bar — compact on small screens */
  html body .trust-bar {
    padding: 0.625rem 0.75rem !important;
    gap: 0.5rem !important;
    font-size: 0.75rem !important;
  }

  /* Stats row — tighter on mobile */
  html body [class*="-stats"],
  html body [class*="__stats"] {
    gap: 0.75rem !important;
    padding: 1.25rem 0.75rem !important;
  }

  /* Reduce excessive margin between consecutive sections */
  html body main section + section {
    margin-top: 0 !important;
  }

  /* FAQ sections — tighter */
  html body [class*="-faq"],
  html body [class*="__faq"] {
    padding: 1.5rem 1rem !important;
  }

  /* Footer — tighter vertical padding */
  html body footer {
    padding-top: 2rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* CTA sections — compact */
  html body [class*="final-cta"],
  html body [class*="email-capture"],
  html body [class*="-cta-section"] {
    padding: 2rem 1rem !important;
  }

  /* Remove extra margin from h2/h3 in sections */
  html body section h2 {
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
  }
  html body section h3 {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
  }

  /* Tighten paragraph spacing */
  html body section p {
    margin-bottom: 0.75rem !important;
  }

  /* Pricing cards — ensure no excessive gaps */
  html body [class*="pricing"] [class*="cards"],
  html body [class*="pricing"] [class*="grid"] {
    gap: 1rem !important;
  }

  /* How-it-works steps — compact */
  html body [class*="-steps"],
  html body [class*="__steps"] {
    gap: 1.25rem !important;
  }

  /* Prevent overlapping CTAs — ensure only one CTA button takes full width */
  html body [class*="__ctas"],
  html body [class*="-ctas"] {
    flex-direction: column !important;
    gap: 0.625rem !important;
  }
  html body [class*="__ctas"] .btn,
  html body [class*="-ctas"] .btn,
  html body [class*="__ctas"] a[class*="btn"],
  html body [class*="-ctas"] a[class*="btn"] {
    width: 100% !important;
    text-align: center !important;
  }
}

/* 375px specific: extra-tight spacing */
@media (max-width: 375px) {
  html body section {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  html body [class*="-hero"],
  html body [class*="__hero"],
  html body .hero {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  /* Container padding at 375px */
  html body [class*="__inner"],
  html body [class*="-inner"] {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Card padding at 375px */
  html body [class*="-card"]:not([class*="card-"]) {
    padding: 1rem !important;
  }

  html body .trust-bar {
    padding: 0.5rem 0.625rem !important;
    font-size: 0.7rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 2: ADDITIONAL CONTRAST CATCHES — Sitewide
   Catches inline color:#fff on elements with CSS-based white backgrounds,
   and ensures hero/card sections converted from dark→light have dark text.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Global body text baseline: force #1a1a1a on all light backgrounds --- */
html body {
  color: #1a1a1a;
}

/* All headings on light backgrounds */
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6 {
  color: #0A0A0A;
}

/* Paragraphs and list items */
html body p, html body li, html body dd, html body dt {
  color: #1a1a1a;
}

/* --- Catch inline color:white/color:#fff on white-bg sections --- */
/* These selectors target elements with inline white text color that are NOT
   inside a known dark container. The :not() excludes dark backgrounds. */
html body section:not([style*="background:#0"]):not([style*="background: #0"]):not([style*="background:#1"]):not([style*="background: #1"]):not([class*="dark"]):not([class*="navy"]):not(.hp-unclaimed) [style*="color:#fff"]:not([style*="background:#0"]):not([style*="background:#1"]):not([style*="background:#2"]):not([style*="background:#3"]):not([style*="background:#4"]):not([style*="background:#5"]):not([style*="background:#6"]):not([style*="background:#7"]):not([style*="background:#8"]):not([style*="background:#9"]):not([style*="background:#a"]):not([style*="background:#b"]):not([style*="background:#c"]):not([style*="background:linear"]):not([style*="background:var"]):not(a):not(button):not([role="button"]):not([class*="btn"]):not([class*="cta"]):not([class*="badge"]):not([class*="pill"]):not([class*="share"]):not([class*="social"]):not([class*="countdown"]):not([class*="toast"]):not([class*="rank"]):not([class*="avatar"]):not([class*="timer"]):not([class*="score"]):not([class*="fmt"]) {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}

/* Same for color: #fff (with space) */
html body section:not([style*="background:#0"]):not([style*="background: #0"]):not([style*="background:#1"]):not([style*="background: #1"]):not([class*="dark"]):not([class*="navy"]):not(.hp-unclaimed) [style*="color: #fff"]:not([style*="background:#0"]):not([style*="background:#1"]):not([style*="background:#2"]):not([style*="background:#3"]):not([style*="background:#4"]):not([style*="background:#5"]):not([style*="background:#6"]):not([style*="background:#7"]):not([style*="background:#8"]):not([style*="background:#9"]):not([style*="background:#a"]):not([style*="background:#b"]):not([style*="background:#c"]):not([style*="background:linear"]):not([style*="background:var"]):not(a):not(button):not([role="button"]):not([class*="btn"]):not([class*="cta"]):not([class*="badge"]):not([class*="pill"]):not([class*="share"]):not([class*="social"]):not([class*="countdown"]):not([class*="toast"]):not([class*="rank"]):not([class*="avatar"]):not([class*="timer"]):not([class*="score"]):not([class*="fmt"]) {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}

/* Same for color:white */
html body section:not([style*="background:#0"]):not([style*="background: #0"]):not([style*="background:#1"]):not([style*="background: #1"]):not([class*="dark"]):not([class*="navy"]):not(.hp-unclaimed) [style*="color:white"]:not([style*="background:#0"]):not([style*="background:#1"]):not([style*="background:#2"]):not([style*="background:#3"]):not([style*="background:#4"]):not([style*="background:#5"]):not([style*="background:#6"]):not([style*="background:#7"]):not([style*="background:#8"]):not([style*="background:#9"]):not([style*="background:#a"]):not([style*="background:#b"]):not([style*="background:#c"]):not([style*="background:linear"]):not([style*="background:var"]):not(a):not(button):not([role="button"]):not([class*="btn"]):not([class*="cta"]):not([class*="badge"]):not([class*="pill"]):not([class*="share"]):not([class*="social"]):not([class*="countdown"]):not([class*="toast"]):not([class*="rank"]):not([class*="avatar"]):not([class*="timer"]):not([class*="score"]):not([class*="fmt"]) {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}

/* --- Catch color:#ffffff (full hex) --- */
html body section:not([style*="background:#0"]):not([style*="background: #0"]):not([style*="background:#1"]):not([style*="background: #1"]):not([class*="dark"]):not([class*="navy"]):not(.hp-unclaimed) [style*="color:#ffffff"]:not([style*="background:#0"]):not([style*="background:#1"]):not([style*="background:#2"]):not([style*="background:#3"]):not([style*="background:#4"]):not([style*="background:#5"]):not([style*="background:#6"]):not([style*="background:#7"]):not([style*="background:#8"]):not([style*="background:#9"]):not([style*="background:#a"]):not([style*="background:#b"]):not([style*="background:#c"]):not([style*="background:linear"]):not([style*="background:var"]):not(a):not(button):not([role="button"]):not([class*="btn"]):not([class*="cta"]):not([class*="badge"]):not([class*="pill"]):not([class*="share"]):not([class*="social"]):not([class*="countdown"]):not([class*="toast"]):not([class*="rank"]):not([class*="avatar"]):not([class*="timer"]):not([class*="score"]):not([class*="fmt"]) {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 3: PILL/BADGE REINFORCEMENT
   In case any badge ends up with wrong text color, enforce the two valid
   patterns: dark bg = white text, light bg = dark text.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dark-background pills/badges: force white text */
html body [class*="badge"][style*="background:#00"],
html body [class*="badge"][style*="background: #00"],
html body [class*="pill"][style*="background:#00"],
html body [class*="pill"][style*="background: #00"],
html body [class*="badge"][style*="background:#16"],
html body [class*="badge"][style*="background: #16"],
html body [class*="badge"][style*="background:#10"],
html body [class*="badge"][style*="background: #10"],
html body [class*="badge"][style*="background:#3b"],
html body [class*="badge"][style*="background: #3b"] {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Inline dark-bg pills: white text */
html body span[style*="background:#22c55e"],
html body span[style*="background:#3b82f6"],
html body span[style*="background:#10b981"],
html body span[style*="background:#16a34a"],
html body span[style*="background:#00B37D"],
html body span[style*="background:#00875A"],
html body span[style*="background:#dc2626"],
html body span[style*="background:#7c3aed"],
html body span[style*="background:#0369a1"],
html body span[style*="background:#d97706"],
html body span[style*="background:#059669"] {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Light-background pills: force dark text */
html body [class*="badge"][style*="background:#DCF"],
html body [class*="badge"][style*="background:#dcf"],
html body [class*="badge"][style*="background:#FEF"],
html body [class*="badge"][style*="background:#fef"],
html body [class*="badge"][style*="background:#E6F"],
html body [class*="badge"][style*="background:#e6f"],
html body [class*="badge"][style*="background:#EFF"],
html body [class*="badge"][style*="background:#eff"],
html body [class*="badge"][style*="background:#F3F"],
html body [class*="badge"][style*="background:#f3f"],
html body [class*="badge"][style*="background:#ECF"],
html body [class*="badge"][style*="background:#ecf"] {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 4: CTA BUTTON CONTRAST — WCAG AA 4.5:1 minimum
   Buttons with colored backgrounds must have white text.
   Buttons on white backgrounds must have dark text.
   ═══════════════════════════════════════════════════════════════════════════ */

/* All primary/green/emerald CTA buttons: white text on colored bg */
html body .btn-primary,
html body a.btn-primary,
html body button.btn-primary,
html body .cta-primary,
html body .btn-emerald,
html body .btn-green,
html body .cta-emerald,
html body .cta-green {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Outline/ghost buttons on white bg: dark text */
html body .btn-outline,
html body .btn-ghost,
html body .btn-text {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}

/* Inline buttons with dark background — enforce white text */
html body a[style*="background:#00B37D"],
html body a[style*="background:#00875A"],
html body a[style*="background:#16a34a"],
html body a[style*="background:#059669"],
html body button[style*="background:#00B37D"],
html body button[style*="background:#00875A"],
html body a[style*="background:linear-gradient"],
html body button[style*="background:linear-gradient"],
html body a[style*="background:#0369a1"],
html body a[style*="background:#3b82f6"],
html body a[style*="background:#7c3aed"],
html body a[style*="background:#6d28d9"],
html body a[style*="background:#dc2626"],
html body a[style*="background:#000"],
html body a[style*="background:#1877F2"],
html body a[style*="background:#25D366"],
html body button[style*="background:#0369a1"],
html body button[style*="background:#7c3aed"],
html body button[style*="background:#dc2626"],
html body button[style*="background:var(--primary"],
html body a[style*="background:var(--primary"] {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 5: HERO SECTIONS — Ensure dark text on white backgrounds
   Many hero sections were converted from dark to light but retained
   white text inline styles. Force dark text on all known hero classes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Heroes on white backgrounds — dark text */
html body .alerts-hero h1,
html body .alerts-hero h2,
html body .alerts-hero p,
html body .cm-hero h1,
html body .cm-hero h2,
html body .cm-hero p,
html body .dt-hero h1,
html body .dt-hero h2,
html body .dt-hero p,
html body .src-hero h1,
html body .src-hero h2,
html body .src-hero p,
html body .partner-hero h1,
html body .partner-hero h2,
html body .partner-hero p,
html body .employer-hero h1,
html body .employer-hero h2,
html body .employer-hero p,
html body .annual-pass-hero h1,
html body .annual-pass-hero h2,
html body .annual-pass-hero p,
html body .ap-hero h1,
html body .ap-hero h2,
html body .ap-hero p,
html body .autopilot-hero h1,
html body .autopilot-hero h2,
html body .autopilot-hero p {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}

/* Generic hero catch: white bg heroes should have dark text */
html body [class*="-hero"][style*="background:#fff"] h1,
html body [class*="-hero"][style*="background:#fff"] h2,
html body [class*="-hero"][style*="background:#fff"] p,
html body [class*="-hero"][style*="background:#FFF"] h1,
html body [class*="-hero"][style*="background:#FFF"] h2,
html body [class*="-hero"][style*="background:#FFF"] p,
html body [class*="-hero"][style*="background: #fff"] h1,
html body [class*="-hero"][style*="background: #fff"] h2,
html body [class*="-hero"][style*="background: #fff"] p,
html body [class*="-hero"][style*="background:#FFFFFF"] h1,
html body [class*="-hero"][style*="background:#FFFFFF"] h2,
html body [class*="-hero"][style*="background:#FFFFFF"] p,
html body [class*="-hero"][style*="background: #FFFFFF"] h1,
html body [class*="-hero"][style*="background: #FFFFFF"] h2,
html body [class*="-hero"][style*="background: #FFFFFF"] p {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}

/* White-bg hero inline style overrides */
html body [class*="-hero"][style*="background:#fff"] [style*="color:#fff"],
html body [class*="-hero"][style*="background:#FFF"] [style*="color:#fff"],
html body [class*="-hero"][style*="background: #fff"] [style*="color:#fff"],
html body [class*="-hero"][style*="background:#FFFFFF"] [style*="color:#fff"],
html body [class*="-hero"][style*="background: #FFFFFF"] [style*="color:#fff"],
html body [class*="-hero"][style*="background:#fff"] [style*="color: #fff"],
html body [class*="-hero"][style*="background:#FFFFFF"] [style*="color: #fff"],
html body [class*="-hero"][style*="background: #FFFFFF"] [style*="color: #fff"] {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 6: LIGHT GRAY TEXT FAILS — Ensure muted text meets 4.5:1
   #9CA3AF (2.54:1), #94A3B8 (2.80:1), #C4C9D4 (1.83:1), #D1D5DB (1.55:1)
   All fail WCAG AA. Minimum readable gray: #6B7280 (4.54:1).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Catch remaining light gray text colors via inline styles */
html body [style*="color:#cbd5e1"],
html body [style*="color: #cbd5e1"],
html body [style*="color:#CBD5E1"],
html body [style*="color: #CBD5E1"],
html body [style*="color:#a0aec0"],
html body [style*="color: #a0aec0"],
html body [style*="color:#A0AEC0"],
html body [style*="color: #A0AEC0"],
html body [style*="color:#b8c0cc"],
html body [style*="color: #b8c0cc"],
html body [style*="color:#B8C0CC"],
html body [style*="color: #B8C0CC"],
html body [style*="color:rgba(255,255,255,0.5)"],
html body [style*="color:rgba(255,255,255,0.6)"],
html body [style*="color:rgba(255,255,255,0.7)"],
html body [style*="color: rgba(255,255,255,0.5)"],
html body [style*="color: rgba(255,255,255,0.6)"],
html body [style*="color: rgba(255,255,255,0.7)"] {
  color: #6B7280 !important;
  -webkit-text-fill-color: #6B7280 !important;
}

/* Emerald green text on white backgrounds fails WCAG AA:
   #00B37D on white = 2.8:1 ✗ FAIL
   Fix: use #047857 (5.7:1) for accent text on white bg */
html body [style*="color:#00B37D"],
html body [style*="color: #00B37D"],
html body [style*="color:#00b37d"],
html body [style*="color: #00b37d"] {
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 7: SETTLEMENT DETAIL PAGE — Specific fixes
   The settlement-detail.ejs has 92 inline color:#fff instances.
   Most are correct (buttons with dark bg), but some text elements
   inside white-bg sections need dark text.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Settlement detail hero subtitle (often white text on now-white bg) */
html body .sd-hero__subtitle,
html body .sd-hero__meta,
html body [class*="settlement-detail"] [class*="subtitle"] {
  color: #4B5563 !important;
  -webkit-text-fill-color: #4B5563 !important;
}

/* Settlement detail section headings */
html body .sd-section__title,
html body [class*="settlement-detail"] h2,
html body [class*="settlement-detail"] h3 {
  color: #0A0A0A !important;
}

/* Settlement detail body text */
html body .sd-section__body,
html body [class*="settlement-detail"] p {
  color: #1a1a1a !important;
}

/* Pro banner text inside white containers */
html body [style*="color:#fff"][class*="pro-banner"],
html body [style*="color: #fff"][class*="pro-banner"] {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 8: PRICING PAGE — Additional enforcement
   ═══════════════════════════════════════════════════════════════════════════ */

/* Pricing card plan names */
html body [class*="pr-"] [class*="name"],
html body [class*="pr-"] [class*="title"],
html body [class*="pricing"] [class*="name"],
html body [class*="pricing"] [class*="title"] {
  color: #0A0A0A !important;
}

/* Pricing features list */
html body [class*="pr-"] li,
html body [class*="pricing"] [class*="feature"] li {
  color: #374151 !important;
}

/* Pricing period/amount */
html body [class*="pr-"] [class*="price"],
html body [class*="pr-"] [class*="amount"] {
  color: #0A0A0A !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 9: NO-PROOF-REQUIRED & QUIZ PAGES
   ═══════════════════════════════════════════════════════════════════════════ */

/* No-proof-required hero text */
html body .npr-hero h1,
html body .npr-hero h2,
html body .npr-hero p,
html body [class*="no-proof"] h1,
html body [class*="no-proof"] h2 {
  color: #0A0A0A !important;
}
html body [class*="no-proof"] p {
  color: #374151 !important;
}

/* Quiz option text */
html body .qw-option-btn {
  color: #1a1a1a !important;
}
html body .qw-option-label {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 10: BLOG/NEWS/GUIDES PAGES
   ═══════════════════════════════════════════════════════════════════════════ */

html body [class*="blog"] h1,
html body [class*="blog"] h2,
html body [class*="news"] h1,
html body [class*="news"] h2,
html body [class*="guide"] h1,
html body [class*="guide"] h2 {
  color: #0A0A0A !important;
}

html body [class*="blog"] p,
html body [class*="news"] p,
html body [class*="guide"] p {
  color: #374151 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 11: CATEGORY & STATE PAGES
   ═══════════════════════════════════════════════════════════════════════════ */

html body [class*="category-page"] h1,
html body [class*="category-page"] h2,
html body [class*="state-page"] h1,
html body [class*="state-page"] h2 {
  color: #0A0A0A !important;
}

html body [class*="category-page"] p,
html body [class*="state-page"] p {
  color: #374151 !important;
}

/* Category tag pills: enforce readable contrast */
html body .category-tag,
html body .badge-category,
html body [class*="cat-tag"],
html body [class*="category-pill"] {
  background: #F3F4F6 !important;
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 12: DARK CONTAINER PROTECTION
   Ensure text in legitimately dark containers stays white/light.
   Prevents our global dark-text rules from breaking dark sections.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Unclaimed counter section (dark bg) */
html body .hp-unclaimed,
html body .hp-unclaimed * {
  color: #FFFFFF;
}
html body .hp-unclaimed h1,
html body .hp-unclaimed h2,
html body .hp-unclaimed h3,
html body .hp-unclaimed span,
html body .hp-unclaimed p,
html body .hp-unclaimed strong {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Download hero (dark bg) */
html body .dl-hero,
html body .dl-hero * {
  color: #FFFFFF;
}
html body .dl-hero h1,
html body .dl-hero h2,
html body .dl-hero p {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Generic dark section containers */
html body [class*="-dark-section"] h1,
html body [class*="-dark-section"] h2,
html body [class*="-dark-section"] h3,
html body [class*="-dark-section"] p,
html body [class*="-dark-section"] span,
html body [style*="background:#0f172a"] h1,
html body [style*="background:#0f172a"] h2,
html body [style*="background:#0f172a"] h3,
html body [style*="background:#0f172a"] p,
html body [style*="background:#0a0a0a"] h1,
html body [style*="background:#0a0a0a"] h2,
html body [style*="background:#0a0a0a"] p,
html body [style*="background:#0A0A0A"] h1,
html body [style*="background:#0A0A0A"] h2,
html body [style*="background:#0A0A0A"] p {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Countdown timers on red/dark bg: white text */
html body .countdown-timer,
html body .closing-soon-timer,
html body [class*="countdown"] {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Toast notifications on dark bg */
html body .sr-toast,
html body [class*="toast"][style*="background:#0"],
html body [class*="toast"][style*="background:#1"] {
  color: #FFFFFF !important;
}