/* ═════════════════════════════════════════════════════════════════════════════
   TASK #915626: Homepage CSS & Layout Fixes (Round 2)
   ROOT CAUSE: bugfix-914378 incorrectly applied display:grid to wrapper
   sections (.trust-proof-section, .sr-benefits-section) instead of inner
   grid containers (.sr-benefits-grid). This broke centering for stats,
   badges, and made benefit cards show 3-across instead of 4.

   This file applies targeted fixes AFTER the 914378 CSS loads.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────
   FIX #1: LIVE TICKER — TEXT CONTRAST
   Connector text was set via inline style="color:#64748b" in payout-ticker.js.
   Fixed at source: replaced inline styles with .lpt-item-connector class.
   This CSS is a safety net for the class-based approach.
   ────────────────────────────────────────────────────────────────────────── */
.lpt-item-connector {
  color: #94a3b8 !important; /* 4.56:1 on #0d1c15 — PASSES WCAG AA */
}

/* ──────────────────────────────────────────────────────────────────────────
   FIX #2: TRUST-PROOF-SECTION — UNDO GRID, RESTORE BLOCK/CENTERED LAYOUT
   bugfix-914378 applied display:grid to .trust-proof-section, which broke
   the stats row and badges row centering. The section should be block with
   text-align:center, NOT a grid container.
   ────────────────────────────────────────────────────────────────────────── */
.trust-proof-section {
  display: block !important;
  text-align: center !important;
}

.trust-proof-inner {
  max-width: 960px !important;
  margin: 0 auto !important;
}

/* Stats row — centered flex */
.trust-stats-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

/* Trust badges — centered flex */
.trust-badges-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   FIX #3: BENEFIT CARDS — 4-ACROSS GRID
   The grid belongs on .sr-benefits-grid (inner), NOT .sr-benefits-section
   (wrapper). Undo any grid on the wrapper and ensure inner grid is 4-col.
   ────────────────────────────────────────────────────────────────────────── */
.sr-benefits-section {
  display: block !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   FIX #3c: BENEFIT SECTION — Dark theme color overrides (Task #919796)
   homepage-100k.css uses hardcoded light-mode colors (#0f172a, #475569,
   #f0fdf4, etc.) that are invisible on the dark elite background.
   These overrides ensure proper contrast on the #0A0A0A dark theme.
   ────────────────────────────────────────────────────────────────────────── */
.sr-benefits-title {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.sr-benefits-sub {
  color: #909090 !important;
}
.sr-benefit-card {
  /* Dark glass card — match premium-elite-dark-foundation pattern */
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
.sr-benefit-card:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(80, 200, 120, 0.25) !important;
  box-shadow: 0 0 20px rgba(80, 200, 120, 0.08),
              0 8px 32px rgba(0, 0, 0, 0.4) !important;
}
.sr-benefit-title {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.sr-benefit-desc {
  color: #B0B0B0 !important;
}
.sr-benefit-icon {
  background: rgba(80, 200, 120, 0.10) !important;
  border-color: rgba(80, 200, 120, 0.20) !important;
}
.sr-benefit-icon svg {
  color: #50C878 !important;
}
.sr-benefit-highlight {
  background: rgba(80, 200, 120, 0.12) !important;
  color: #50C878 !important;
}

.sr-benefits-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.25rem !important;
}

@media (max-width: 900px) {
  .sr-benefits-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .sr-benefits-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   FIX #3b: BENEFIT CARDS — STACK VERTICALLY ON MOBILE (Task #919796)
   homepage-100k.css and homepage-inline-extract.css set flex-direction:row
   at ≤600px/≤480px, which puts all 4 children (icon, title, desc, badge)
   in a horizontal line. This causes word-breaking and cramped layout.
   Override to column so cards stack: icon → title → desc → badge.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .sr-benefit-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding: 1.5rem 1.25rem !important;
  }
  .sr-benefit-icon {
    margin-bottom: 0.25rem !important;
  }
  .sr-benefit-title {
    font-size: 1rem !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
  .sr-benefit-desc {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   FIX #4: EMPTY LIVE SECTION (activity-ticker-wrap)
   When .activity-ticker-wrap has no visible ticker items, hide the entire
   section. Also hide vpf-wrap when vpf-list is empty.
   ────────────────────────────────────────────────────────────────────────── */
.activity-ticker-wrap:empty {
  display: none !important;
}

/* If the ticker track has no children, hide the entire wrap */
.activity-ticker-wrap:has(.activity-ticker-track:empty),
.activity-ticker-wrap:has(.ticker-group:empty) {
  display: none !important;
}

/* VPF feed: hide when list is empty */
.vpf-wrap:has(.vpf-list:empty) {
  display: none !important;
}

.vpf-list:empty {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   FIX #5: FOOTER TEXT — LOW CONTRAST
   Footer bg is #0b1120. Text needs to be bright enough for WCAG AA.
   #9ca3af on #0b1120 = 4.12:1 (borderline)
   #b0bac4 on #0b1120 = 5.81:1 (PASS AA, good)
   #cbd5e1 on #0b1120 = 8.14:1 (PASS AAA)
   ────────────────────────────────────────────────────────────────────────── */
footer.sr-ramsey-footer {
  color: #b0bac4 !important;
}

footer.sr-ramsey-footer p,
footer.sr-ramsey-footer span,
footer.sr-ramsey-footer div:not(.sr-ft-email-capture):not(.sr-ft-email-inner):not(.sr-ft-email-form):not(.sr-ft-email-row) {
  color: #b0bac4 !important;
}

.sr-ft-brand-tagline {
  color: #94a3b8 !important;  /* 4.65:1 on #0b1120 — PASS AA */
  -webkit-text-fill-color: #94a3b8 !important;
}

.sr-ft-about-brand {
  color: #b0bac4 !important;  /* 5.81:1 on #0b1120 — PASS AA */
}

footer.sr-ramsey-footer .sr-ft-col-header {
  color: #e2e8f0 !important;  /* 10.66:1 — strong headers */
  -webkit-text-fill-color: #e2e8f0 !important;
}

footer.sr-ramsey-footer a {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

footer.sr-ramsey-footer a:hover {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}

.sr-ft-copy,
.sr-ft-disclaimer-text,
.sr-ft-address {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   FIX #6: SOCIAL PROOF POPUP — REPOSITION TO AVOID CROWDING
   The toast appears bottom-left and can overlap trust badges when scrolled.
   Fix: increase bottom offset and add left margin on larger screens.
   ────────────────────────────────────────────────────────────────────────── */
#sr-social-proof-toast {
  bottom: 80px !important; /* Higher to avoid sticky bars and content overlap */
  z-index: 9990 !important;
}

@media (max-width: 480px) {
  #sr-social-proof-toast {
    bottom: 90px !important; /* Extra clearance above sticky mobile bars */
  }
}