/* ============================================================
   Task #1372730: Critical Mobile Regressions Fix

   Fixes:
   #1 — Pale green text on white (contrast WCAG AA failure)
   #2 — Burger menu missing (CTA override conflict)
   #3 — Footer dark background
   #4 — Settlement cards mint/green tinted backgrounds
   #5 — Unstyled compare bar
   #6 — Unstyled offline banner

   PERMANENT RULE: Dark text (#1a1a1a or darker) on light/white backgrounds.
   White text on dark backgrounds. No exceptions.
   No pale/mint/light-green text on white EVER.
   ============================================================ */

/* ══════════════════════════════════════════════════════════════════════════
   #1 — CONTRAST FIX: All green/emerald text on light backgrounds → dark
   ══════════════════════════════════════════════════════════════════════════ */

/* Hero eyebrow pill: "654+ Open Settlements — Updated Daily" */
.hp-hero__eyebrow {
  color: #1F2A37 !important;
  background: #F0FDF4 !important;
  border-color: #bbf7d0 !important;
}

/* Hero counter value ($2.4B) */
.hp-counter__value {
  color: #0A0A0A !important;
}

/* Hero counter container — remove mint bg */
.hp-counter {
  background: #F9FAFB !important;
  border-color: #E5E7EB !important;
}

/* Payout text on settlement cards */
.hp-sotd__payout {
  color: #0A0A0A !important;
}

/* Trust bar — ensure dark text and dark icons */
.trust-bar .trust-item {
  color: #1F2A37 !important;
}
.trust-bar .trust-item-icon {
  color: #1F2A37 !important;
}

/* Section labels (e.g. "Trending Now") */
.section-label {
  color: #1F2A37 !important;
}

/* Deadline badges — dark text on light backgrounds */
.badge-deadline-green,
.deadline-badge.open,
.deadline-open {
  color: #065F46 !important;
  background: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
}

.badge-deadline-yellow,
.deadline-badge.closing-soon,
.deadline-closing {
  color: #92400E !important;
}

.badge-deadline-red,
.deadline-badge.urgent,
.deadline-urgent {
  color: #991B1B !important;
}

/* Badge-success on light bg — dark green text */
.badge-success {
  color: #065F46 !important;
  background: #ECFDF5 !important;
}

/* Category tags — dark text on light bg */
.badge-category,
.category-tag,
.hp-sotd__category {
  color: #1F2A37 !important;
}

/* "No Proof Required" badge — must be readable */
.badge-no-proof,
.no-proof-badge,
[class*="no-proof"] {
  color: #FFFFFF !important;
  background-color: #059669 !important;
  border-color: #059669 !important;
}

/* NEW badge — dark text if on light bg, or white on solid green */
.badge-accent,
.badge-new,
[class*="badge-new"] {
  color: #FFFFFF !important;
  background-color: #059669 !important;
}

/* Social proof badges that render as pills */
.spb-trending-badge,
[class*="trending-badge"],
.badge-trending {
  color: #FFFFFF !important;
  background-color: #DC2626 !important;
}

/* Override the broken contrast-fix-1369064.css that forces white text on ALL badges
   regardless of background color. Badges with LIGHT backgrounds need DARK text. */
.badge-deadline-green,
.badge-success,
.badge-category,
.category-tag,
.badge-light,
.badge-ghost,
.tag-light {
  color: #065F46 !important;
}
.badge-category,
.category-tag {
  color: #1F2A37 !important;
}

/* Price text that shows "Varies" or "$XX" — must be dark on white cards */
[class*="payout"],
[class*="price-text"] {
  color: #0A0A0A !important;
}

/* Fix .hp-hero__headline em (the italic "settlement fund") */
.hp-hero__headline em {
  color: #059669 !important;
}

/* Fix FOMO ticker — dark text on white bg (override contrast-fix white text) */
.fomo-ticker,
#fomo-ticker,
.fomo-ticker-msg,
#fomo-ticker .fomo-ticker-msg,
.live-ticker {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
}
#fomo-ticker .fomo-ticker-num,
#fomo-ticker .fomo-live-badge,
.fomo-ticker-msg a {
  color: #059669 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   #2 — BURGER MENU: Fix CTA visibility conflict on mobile
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  /* Force hide the desktop CTA on mobile — overrides qa-fixes a[class*="cta"] */
  a.hn-cta,
  .hn-cta {
    display: none !important;
  }

  /* Force show the hamburger */
  .hn-hamburger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex-shrink: 0 !important;
  }

  /* Ensure hamburger bars are visible */
  .hn-hamburger span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #0A0A0A !important;
    border-radius: 2px !important;
  }

  /* Hide desktop nav elements */
  .hn-nav,
  .hn-search,
  .hn-login {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   #3 — FOOTER: Force white background, dark text
   ══════════════════════════════════════════════════════════════════════════ */

footer,
footer.sr-ramsey-footer,
.sr-ramsey-footer,
footer[role="contentinfo"],
.fn-footer {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  color: #1F2A37 !important;
}

/* Footer text elements */
.sr-ramsey-footer p,
.sr-ramsey-footer span,
.sr-ramsey-footer div,
.sr-ramsey-footer li,
.sr-ramsey-footer summary,
.sr-ramsey-footer h3,
.sr-ramsey-footer h4,
footer[role="contentinfo"] p,
footer[role="contentinfo"] span,
footer[role="contentinfo"] div {
  color: #1F2A37 !important;
}

/* Footer links — dark gray text, not green */
.sr-ramsey-footer a,
footer[role="contentinfo"] a,
.sr-ft-col-links a,
.fn-footer a {
  color: #4B5563 !important;
}
.sr-ramsey-footer a:hover,
footer[role="contentinfo"] a:hover,
.fn-footer a:hover {
  color: #059669 !important;
}

/* Footer column headers */
.sr-ft-col-header,
.sr-ft-col-details summary {
  color: #0A0A0A !important;
  font-weight: 700 !important;
}

/* Footer sub-sections */
.sr-ft-bottom-section,
.sr-ft-bottom-bar,
.sr-ft-trust-badges,
.sr-ft-email-capture {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

/* Share strip above footer */
.sr-sitewide-share-strip {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #1F2A37 !important;
  border-top: 1px solid #E5E7EB !important;
}
.sr-sitewide-share-strip strong,
.sr-sitewide-share-strip span,
.sr-sitewide-share-strip div {
  color: #1F2A37 !important;
}

/* Override ONLY: allow social icon circles to keep their brand colors */
.sr-ft-social-links a {
  color: #FFFFFF !important;
}

/* Footer CTA banner — white bg */
.sr-footer-cta-banner {
  background: #FFFFFF !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   #4 — SETTLEMENT CARDS: Pure white backgrounds, no mint tint
   ══════════════════════════════════════════════════════════════════════════ */

.hp-sotd__card,
.hp-sotd__card--featured {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

/* Card titles — dark text */
.hp-sotd__title,
.hp-sotd__card-title {
  color: #0A0A0A !important;
}

/* Card company names */
.hp-sotd__company {
  color: #4B5563 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   #5 — COMPARE BAR: Style the floating comparison tray
   ══════════════════════════════════════════════════════════════════════════ */

#compareFloatBar {
  display: none; /* hidden by default — JS shows it when items are selected */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8800;
  background: #FFFFFF;
  border-top: 2px solid #059669;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  padding: 12px 16px;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: 'DM Sans', system-ui, sans-serif;
}

#compareFloatBar.cfb-visible {
  display: flex;
}

.cfb-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1F2A37;
  white-space: nowrap;
}

.cfb-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.cfb-chips .cfb-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  font-size: 0.8rem;
  color: #1F2A37;
  white-space: nowrap;
}

.cfb-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.cfb-go-btn {
  height: 36px;
  padding: 0 16px;
  background: #059669;
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.cfb-go-btn:hover {
  background: #047857;
}

.cfb-clear-btn {
  height: 36px;
  padding: 0 12px;
  background: transparent;
  color: #6B7280;
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.cfb-clear-btn:hover {
  background: #F3F4F6;
  color: #1F2A37;
}

/* ══════════════════════════════════════════════════════════════════════════
   #6 — OFFLINE BANNER: Style the connectivity notification
   ══════════════════════════════════════════════════════════════════════════ */

#sr-offline-banner {
  display: none; /* hidden by default — JS shows via .is-visible class */
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9500;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 10px 16px;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', system-ui, sans-serif;
  max-width: 90vw;
  width: auto;
}

#sr-offline-banner.is-visible {
  display: flex;
}

.sr-offline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #EF4444;
  flex-shrink: 0;
  animation: sr-offline-pulse 1.5s ease-in-out infinite;
}

#sr-offline-banner.is-online .sr-offline-dot {
  background: #059669;
}

@keyframes sr-offline-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.sr-offline-text {
  font-size: 0.85rem;
  color: #1F2A37;
  font-weight: 500;
  white-space: nowrap;
}

.sr-offline-retry {
  height: 32px;
  padding: 0 12px;
  background: #059669;
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}
.sr-offline-retry:hover {
  background: #047857;
}

@media (max-width: 480px) {
  #sr-offline-banner {
    left: 8px;
    right: 8px;
    transform: none;
    bottom: 8px;
  }
  .sr-offline-text {
    white-space: normal;
    font-size: 0.8rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   #7 — SETTLEMENT CARDS (.sr-card): Force white background
   Base .sr-card styles are only in design-system-pages.css (not loaded).
   Without these, cards are transparent and show parent mint/green bg.
   ══════════════════════════════════════════════════════════════════════════ */

.sr-card,
.sr-card--featured,
[class*="sr-card"] {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
}

/* Card title text — dark */
.sr-card__title,
.sr-card__name,
.sr-card h3,
.sr-card h4 {
  color: #0A0A0A !important;
}

/* Card body text — dark gray */
.sr-card__desc,
.sr-card__company,
.sr-card p,
.sr-card span {
  color: #4B5563 !important;
}

/* Card payout amount — dark */
.sr-card__payout,
.sr-card__amount {
  color: #0A0A0A !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   #8 — PRO NUDGE BAR: Hidden by default, styled when visible
   ══════════════════════════════════════════════════════════════════════════ */

#srProNudgeBar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9980;
  background: #FFFFFF;
  border-top: 2px solid #059669;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  padding: 12px 16px;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: 'DM Sans', system-ui, sans-serif;
}

#srProNudgeBar.pnb-visible {
  display: flex !important;
}

.pnb-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1F2A37;
}

.pnb-btn {
  height: 36px;
  padding: 0 16px;
  background: #059669;
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.pnb-btn:hover {
  background: #047857;
}

.pnb-close {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  color: #6B7280;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   #9 — EXIT-INTENT POPUP: Hidden by default
   ══════════════════════════════════════════════════════════════════════════ */

#sr-ep-overlay-old {
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
}

#sr-ep-overlay-old.ep-visible {
  display: flex !important;
}

.sr-ep-modal {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 2rem 1.5rem;
  max-width: 400px;
  width: 90vw;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: relative;
}

.sr-ep-modal h2,
.sr-ep-modal h3 {
  color: #0A0A0A;
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 0 0.75rem;
}

.sr-ep-modal p {
  color: #4B5563;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 1.25rem;
}

.sr-ep-modal .ep-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #059669;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.7rem 1.5rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  margin-bottom: 0.75rem;
}
.sr-ep-modal .ep-cta-btn:hover {
  background: #047857;
}

.sr-ep-modal .ep-dismiss {
  background: transparent;
  border: none;
  color: #6B7280;
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
}

.sr-ep-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 1.4rem;
  color: #6B7280;
  cursor: pointer;
  line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   #10 — PAGE LOADER: Hidden by default
   ══════════════════════════════════════════════════════════════════════════ */

#srPageLoader,
.sr-page-loader {
  display: none !important;
}

#srPageLoader.is-visible,
.sr-page-loader.is-visible {
  display: flex !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99998;
  background: rgba(255, 255, 255, 0.9);
  align-items: center;
  justify-content: center;
}