/* mobile-homepage-fix-1344335.css — Task #1344335
   P0: Fix mobile homepage black void, contrast failures, trust badge clipping.
   Loaded ABSOLUTE LAST in layout-head.ejs to override all prior CSS + inline styles.

   Design rules enforced:
   - White (#FFFFFF) backgrounds on ALL standard homepage sections
   - Dark text on light backgrounds
   - All text WCAG AA (4.5:1 minimum)
   - Trust badges fully visible, not clipped
   - Body text minimum 16px
*/

/* ═══════════════════════════════════════════════════════════════════════
   1. TRUST BAR FOMO — .sr-trust-bar-fomo
   Was: background #0f172a (dark navy) with gold/white text
   Fix: White background with dark text for WCAG AA compliance
   ═══════════════════════════════════════════════════════════════════════ */
/* Override premium-motion-design-1320163.css which forces all text to white
   via .sr-trust-bar-fomo * and .sr-trust-bar-fomo span:not([class*='icon'])
   Specificity 0,2,1 needs 0,3,0+ to beat.
   Use triple-class selectors + -webkit-text-fill-color */
div.sr-trust-bar-fomo,
div.sr-trust-bar-fomo *,
div.sr-trust-bar-fomo span,
div.sr-trust-bar-fomo p,
div.sr-trust-bar-fomo span:not([class*='icon']):not(.sr-trust-bar-fomo-cta) {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
}
div.sr-trust-bar-fomo {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
}
div.sr-trust-bar-fomo span.sr-trust-bar-fomo-text,
.sr-trust-bar-fomo .sr-trust-bar-fomo-inner .sr-trust-bar-fomo-text {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
}
div.sr-trust-bar-fomo span.sr-trust-bar-fomo-stat,
.sr-trust-bar-fomo .sr-trust-bar-fomo-inner span.sr-trust-bar-fomo-stat {
  color: #92400e !important;
  -webkit-text-fill-color: #92400e !important;
  font-weight: 800 !important;
}
div.sr-trust-bar-fomo span.sr-trust-bar-fomo-emoji {
  font-size: 1.1em !important;
  -webkit-text-fill-color: initial !important;
}
div.sr-trust-bar-fomo a.sr-trust-bar-fomo-cta,
.sr-trust-bar-fomo .sr-trust-bar-fomo-inner .sr-trust-bar-fomo-cta {
  background: #1e40af !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
}
div.sr-trust-bar-fomo a.sr-trust-bar-fomo-cta:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. WHY SETTLEMENTRADAR — #srWhySection
   Was: background linear-gradient(180deg,#0a1628,#0f1f3d) dark navy
   Fix: White background with dark text
   ═══════════════════════════════════════════════════════════════════════ */
#srWhySection {
  background: #ffffff !important;
  border-top: 1px solid #e5e7eb !important;
  border-bottom: 1px solid #e5e7eb !important;
}
#srWhySection .sr-why-eyebrow {
  color: #b45309 !important;
}
#srWhySection .sr-why-heading {
  color: #0f172a !important;
}
#srWhySection .sr-why-sub {
  color: #475569 !important;
}
#srWhySection .sr-why-table thead th:first-child {
  color: #64748b !important;
}
#srWhySection .sr-why-table thead th.sr-why-col-us {
  background: rgba(245, 166, 35, 0.1) !important;
  color: #b45309 !important;
}
#srWhySection .sr-why-table thead th.sr-why-col-them {
  color: #64748b !important;
}
#srWhySection .sr-why-table tbody tr {
  border-bottom: 1px solid #e5e7eb !important;
}
#srWhySection .sr-why-table tbody td:first-child {
  color: #334155 !important;
}
#srWhySection .sr-why-table tbody td.sr-why-col-us {
  background: rgba(245, 166, 35, 0.06) !important;
  color: #15803d !important;
}
#srWhySection .sr-why-table tbody td.sr-why-col-them {
  color: #6b7280 !important;
}
#srWhySection .sr-why-check {
  color: #15803d !important;
}
#srWhySection .sr-why-x {
  color: #dc2626 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. LIVE SOCIAL PROOF BAR — #srLspHomeBar
   Was: background linear-gradient(#0a0f1a,#0f1117) dark with gold stats
   Fix: Light warm background with dark text
   ═══════════════════════════════════════════════════════════════════════ */
#srLspHomeBar {
  background: #fefce8 !important;
  border-top: 1px solid #e5e7eb !important;
  border-bottom: 1px solid #e5e7eb !important;
}
#srLspHomeBar .sr-lsp-live {
  color: #15803d !important;
}
#srLspHomeBar .sr-lsp-live-dot {
  background: #15803d !important;
}
#srLspHomeBar .sr-lsp-num {
  color: #92400e !important;
}
#srLspHomeBar .sr-lsp-lbl {
  color: #475569 !important;
}
#srLspHomeBar .sr-lsp-div {
  background: #d1d5db !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   4. SETTLEMENT OF THE DAY — #srSotdSection
   Was: background #0d0d0f (near-black) with dark card
   Fix: White background, light card styling
   ═══════════════════════════════════════════════════════════════════════ */
#srSotdSection {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
}
#srSotdSection::before {
  background: none !important;
}
/* SOTD card — keep gold accent but light background */
.sotd-card {
  background: #fffbf0 !important;
  border-color: #d97706 !important;
  box-shadow: 0 4px 24px rgba(217, 119, 6, 0.1) !important;
}
.sotd-card__badge {
  background: #d97706 !important;
  color: #ffffff !important;
}
.sotd-card__cat {
  color: #64748b !important;
}
.sotd-company {
  color: #475569 !important;
}
.sotd-title {
  color: #0f172a !important;
}
.sotd-payout__label {
  color: #64748b !important;
}
.sotd-payout__amount {
  color: #15803d !important;
}
.sotd-claims {
  color: #475569 !important;
}
.sotd-cd-val {
  color: #dc2626 !important;
}
.sotd-cd-lbl {
  color: #64748b !important;
}
.sotd-cd-sep {
  color: #9ca3af !important;
}
.sotd-file-btn {
  background: #d97706 !important;
  color: #ffffff !important;
}
.sotd-share-btn {
  color: #475569 !important;
  border-color: #d1d5db !important;
  background: #ffffff !important;
}
.sotd-deadline-bar {
  color: #475569 !important;
}
.sotd-deadline-bar a {
  color: #2563eb !important;
}
.sotd-radar-circle {
  border-color: rgba(217, 119, 6, 0.15) !important;
}
.sotd-radar-star {
  color: #d97706 !important;
}
/* SOTD section heading & labels */
#srSotdSection .sotd-wrap .sotd-eyebrow,
#srSotdSection [class*="eyebrow"] {
  color: #b45309 !important;
}
/* SOTD countdown badge */
.sotd-countdown {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   5. WHO WE ARE — #who-we-are
   Was: background #0f1923 (dark navy) with light text
   Fix: White background with dark text
   ═══════════════════════════════════════════════════════════════════════ */
#who-we-are {
  background: #ffffff !important;
  border-top: 1px solid #e5e7eb !important;
  border-bottom: 1px solid #e5e7eb !important;
}
.wwa-badge {
  background: rgba(245, 166, 35, 0.1) !important;
  border-color: rgba(245, 166, 35, 0.3) !important;
  color: #b45309 !important;
}
.wwa-label {
  color: #b45309 !important;
}
.wwa-title {
  color: #0f172a !important;
}
.wwa-body {
  color: #475569 !important;
}
.wwa-pill {
  color: #475569 !important;
}
.wwa-pill-dot {
  background: #d97706 !important;
}
.wwa-btn-primary {
  background: #d97706 !important;
  color: #ffffff !important;
}
.wwa-btn-primary:hover {
  background: #b45309 !important;
}
.wwa-btn-ghost {
  color: #2563eb !important;
}
.wwa-btn-ghost:hover {
  color: #1d4ed8 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   6. MOBILE-FIRST CALLOUT — #srMobileCallout
   Was: background linear-gradient(#0a1628,#0d1f40) dark navy
   Fix: White background with dark text
   ═══════════════════════════════════════════════════════════════════════ */
#srMobileCallout {
  background: #f8fafc !important;
  border-top: 1px solid #e5e7eb !important;
  border-bottom: 1px solid #e5e7eb !important;
}
#srMobileCallout .sr-mc-icon {
  color: #0f172a !important;
}
#srMobileCallout .sr-mc-heading {
  color: #0f172a !important;
}
#srMobileCallout .sr-mc-heading span {
  color: #b45309 !important;
}
#srMobileCallout .sr-mc-body {
  color: #475569 !important;
}
#srMobileCallout .sr-mc-step {
  background: rgba(245, 166, 35, 0.1) !important;
  border-color: rgba(245, 166, 35, 0.3) !important;
  color: #92400e !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   7. WEEKLY SHOW SECTION — #weekly-show-section
   Was: background #0a0f1c (dark)
   Fix: White background
   ═══════════════════════════════════════════════════════════════════════ */
#weekly-show-section {
  background: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   8. FOUNDING MEMBER BANNER — #srFoundingBanner
   Was: dark brown gradient
   Fix: Warm light gold background
   ═══════════════════════════════════════════════════════════════════════ */
#srFoundingBanner {
  background: #fffbf0 !important;
  border: 1px solid #fde68a !important;
}
#srFoundingBanner * {
  color: inherit;
}
#srFoundingBanner h2,
#srFoundingBanner [style*="font-weight:800"],
#srFoundingBanner [style*="font-weight:900"] {
  color: #0f172a !important;
}
#srFoundingBanner [style*="color:#fff"],
#srFoundingBanner [style*="color: #fff"],
#srFoundingBanner [style*="color:rgba(255"] {
  color: #334155 !important;
}
#srFoundingBanner [style*="background:linear-gradient(135deg,#d97706"] {
  background: #d97706 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   9. SETTLEMENT CARDS — .s5-card and .sotd-card dark backgrounds
   Was: dark gradient backgrounds in cards
   Fix: White card backgrounds with dark text
   ═══════════════════════════════════════════════════════════════════════ */
.s5-card {
  background: #ffffff !important;
  color: #1f2937 !important;
}
.s5-card:hover {
  border-color: #d97706 !important;
}
/* Card CTA block */
.s5-cta-block__btn {
  background: #d97706 !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   10. TRUST BADGES — horizontal scroll fix for mobile
   Was: badges overflow and clip on 375px viewport
   Fix: Horizontal scroll container on mobile
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .sr-trust-badges {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-bottom: 4px !important;
    gap: 0.4rem !important;
    margin-left: -0.5rem !important;
    margin-right: -0.5rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  .sr-trust-badges::-webkit-scrollbar {
    display: none !important;
  }
  .sr-trust-badge {
    flex-shrink: 0 !important;
    font-size: 0.72rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   11. HERO SOCIAL PROOF STATS — contrast on light background
   ═══════════════════════════════════════════════════════════════════════ */
.sr-hero-stat-number {
  color: #0f172a !important;
}
.sr-hero-stat-label {
  color: #475569 !important;
  font-size: 0.875rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   12. HERO TRUST BAR — ensure readable on light bg
   ═══════════════════════════════════════════════════════════════════════ */
.sr-hero__trust-bar-value {
  color: #0f172a !important;
}
.sr-hero__trust-bar-label {
  color: #475569 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   13. RESUME BANNER — fix blank button
   ═══════════════════════════════════════════════════════════════════════ */
#srResumeBanner {
  background: #ffffff !important;
  border: 1.5px solid #2563eb !important;
}
#srResumeBanner a,
#srResumeBtn {
  background: #2563eb !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 1.1rem !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  min-width: 80px !important;
  text-align: center !important;
}
#srResumeText {
  color: #111827 !important;
  font-size: 0.92rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   14. GOLD FAB — ensure proper positioning and don't float in void
   Only show on mobile when there's content context
   ═══════════════════════════════════════════════════════════════════════ */
.sr-fab-wrap,
.me-fab-container {
  z-index: 9000 !important;
}
/* On mobile, position FAB above the bottom tab bar */
@media (max-width: 640px) {
  .sr-fab-wrap,
  .me-fab-container {
    bottom: 80px !important;
    right: 16px !important;
  }
}
/* FAB button — ensure visible gold styling */
.sr-fab-btn,
.me-fab-main {
  background: linear-gradient(135deg, #d97706, #b45309) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   15. FIRE BAR TICKER — ensure readable
   ═══════════════════════════════════════════════════════════════════════ */
#srFireBarTicker {
  background: rgba(254, 243, 199, 0.5) !important;
  border: 1px solid rgba(217, 119, 6, 0.2) !important;
}
#srFireBarTicker span[style*="color:#dc2626"] {
  color: #b91c1c !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   16. HOW IT WORKS SECTION — ensure light bg
   ═══════════════════════════════════════════════════════════════════════ */
.sr-steps-section,
.sr-section--how-it-works {
  background: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   17. DISCOVERY FEED — ensure light bg maintained
   ═══════════════════════════════════════════════════════════════════════ */
#sr-discovery-feed {
  background: #f9fafb !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   18. DROP BANNER — light treatment
   ═══════════════════════════════════════════════════════════════════════ */
#sr-drop-banner {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  color: #1e40af !important;
}
#sr-drop-banner a {
  background: #1e40af !important;
  color: #ffffff !important;
  border-color: #1e40af !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   19. UNCLAIMED MONEY COUNTER (dashboard logged-in section)
   Was: dark green gradient
   Fix: Light green background
   ═══════════════════════════════════════════════════════════════════════ */
#srDashboard div[style*="background:linear-gradient(135deg,#0b1e14"] {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
}
#srDashboard div[style*="color:#6ee7b7"] {
  color: #059669 !important;
}
#srDashboard div[style*="color:#00e5a0"] {
  color: #059669 !important;
}
#srDashboard span[style*="color:#00e5a0"] {
  color: #059669 !important;
  background: rgba(5, 150, 105, 0.1) !important;
  border-color: rgba(5, 150, 105, 0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   20. GLOBAL: Catch-all for any remaining dark sections on homepage
   ═══════════════════════════════════════════════════════════════════════ */
main.sr-page > section[style*="background:#0"],
main.sr-page > section[style*="background: #0"],
main.sr-page > section[style*="background:linear-gradient"][style*="#0a"],
main.sr-page > section[style*="background:linear-gradient"][style*="#0d"],
main.sr-page > section[style*="background:linear-gradient"][style*="#0f"] {
  background: #ffffff !important;
}

/* Ensure all section text in formerly-dark sections is readable */
main.sr-page > section h2[style*="color:#fff"],
main.sr-page > section h2[style*="color: #fff"],
main.sr-page > section h2[style*="color:#ffffff"] {
  color: #0f172a !important;
}
main.sr-page > section p[style*="color:rgba(255,255,255"],
main.sr-page > section p[style*="color: rgba(255, 255, 255"],
main.sr-page > section span[style*="color:rgba(255,255,255"],
main.sr-page > section span[style*="color:#fff"],
main.sr-page > section div[style*="color:rgba(255,255,255"] {
  color: #475569 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   21. TOP SETTLEMENTS CARD (sotd-card in top-5 list)
   Keep light background override
   ═══════════════════════════════════════════════════════════════════════ */
#top-settlements .sotd-card {
  background: #fffbf0 !important;
}
#top-settlements .sotd-card__badge {
  background: #d97706 !important;
  color: #ffffff !important;
}
#top-settlements .sotd-card__cat,
#top-settlements .sotd-card__cat span {
  color: #475569 !important;
}
#top-settlements .sotd-company,
#top-settlements .sotd-card p[class*="company"] {
  color: #475569 !important;
}
#top-settlements .sotd-title,
#top-settlements .sotd-card h3 {
  color: #0f172a !important;
}
#top-settlements .sotd-cd-val {
  color: #dc2626 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   22. COMMUNITY COUNTER — ensure readable
   ═══════════════════════════════════════════════════════════════════════ */
#srCommunityCounter {
  background: #f5f5f7 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   23. MOBILE RESPONSIVE OVERRIDES — 375px specific
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Trust bar FOMO — stack vertically */
  .sr-trust-bar-fomo-inner {
    flex-direction: column !important;
    gap: 0.5rem !important;
    text-align: center !important;
  }
  .sr-trust-bar-fomo-cta {
    width: auto !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    justify-content: center !important;
  }

  /* Live social proof bar — stack vertically */
  #srLspHomeBar .sr-lsp-inner {
    gap: 0.5rem !important;
    justify-content: center !important;
  }
  #srLspHomeBar .sr-lsp-div {
    display: none !important;
  }

  /* SOTD section — ensure padding */
  #srSotdSection .sotd-wrap {
    padding: 1.5rem 1rem !important;
  }

  /* Resume banner — responsive layout */
  #srResumeBanner {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
    gap: 0.5rem !important;
  }
  #srResumeText {
    white-space: normal !important;
  }

  /* Hero stats — 2-column grid */
  .sr-hero-stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   24. HAMBURGER MENU BARS — Task #1344354
   Root cause: premium-v2.css forces white bars for old dark navy header.
   Lightmode turned header white, so white bars on white = invisible.
   Fix: Dark gray bars (#374151) matching the light theme text color.
   ═══════════════════════════════════════════════════════════════════════ */
.nav-hamburger span,
.nav-hamburger::before,
.nav-hamburger::after,
button.nav-hamburger span {
  background-color: #374151 !important;
  background: #374151 !important;
}

/* Hamburger X state — keep dark when open */
.nav-hamburger.open span,
.nav-hamburger.active span {
  background-color: #374151 !important;
  background: #374151 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   25. RETURNING VISITOR BANNER DISMISS BUTTON — Task #1344354
   The .rvb-dismiss button has no visible content. Add X icon via CSS.
   ═══════════════════════════════════════════════════════════════════════ */
.rvb-dismiss::before {
  content: '\2715' !important; /* ✕ character */
  font-size: 0.85rem !important;
  line-height: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   26. RECOVERY BANNER — Task #1344354
   Force display:none by default to override the inline style bug
   (duplicate display property: display:none then display:flex).
   JS will set display:flex when appropriate.
   ═══════════════════════════════════════════════════════════════════════ */
#sr-recovery-banner {
  display: none !important;
}
#sr-recovery-banner.sr-recovery-visible {
  display: flex !important;
}