/* ============================================================================
   MASTER FIX — Task #1291374
   Sitewide Contrast + Mobile Premium Overhaul — App Store Quality.

   This file is the DEFINITIVE LAST-LOADED CSS on the entire site.
   Every rule uses !important to override all prior CSS including async motion CSS.

   PALETTE (LOCKED):
     Background: #FFFFFF / #F8F9FA
     Primary text: #1a1a2e / #333
     Secondary text: #666666
     Accent: #00d4ff (cyan)
     Secondary accent: #7c3aed
     Buttons: solid bg + #FFFFFF text
     Success: #10B981 / Warning: #F59E0B / Error: #EF4444
   ============================================================================ */

/* ════════════════════════════════════════════════════════════════════════════
   1. GHOST BUTTON FIX — Nuclear: every colored-bg element gets white text
   ════════════════════════════════════════════════════════════════════════════ */

/* 1a. UNIVERSAL BUTTON RULE — ANY element with a colored background gets white text.
   This catches: .btn, button, .cta, a[class*="btn"], a[class*="cta"], etc. */
.sr-btn--primary,
.sr-btn--secondary,
.sr-btn--ctw-all,
.sr-btn.sr-btn--primary,
.sr-btn.sr-btn--secondary,
a.sr-btn--primary,
a.sr-btn--secondary,
a.sr-btn.sr-btn--secondary,
.ctw-file-btn,
.ctw-file-btn.cta-red,
.ctw-file-btn.cta-orange,
.ctw-file-btn.cta-green,
.dc-card-btn,
.bar-cta,
.sr-ft-email-btn,
.nav-cta-go-pro,
.nav-mobile-cta-pro,
.nav-mobile-go-pro,
.nav-upgrade-btn,
.cfb-go-btn,
.ei-cta-btn,
.ei-submit-btn,
.sp-btn,
.rs-btn-primary,
.rs-btn-primary-dominant,
.lm-bar-btn,
.exit-intent-btn,
.fomo-btn,
.quiz-option-btn,
[class*="btn-primary"],
[class*="cta-btn"],
[class*="go-pro"],
[class*="upgrade-btn"],
.rir-submit,
.sas-submit,
#srPaywallCTA,
a[style*="background:#2563eb"],
a[style*="background: #2563eb"],
a[style*="background:#1d4ed8"],
a[style*="background: #1d4ed8"],
a[style*="background:#dc2626"],
a[style*="background:#16a34a"],
a[style*="background:#ea580c"],
a[style*="background:linear-gradient"],
a[style*="background: linear-gradient"],
button[style*="background:#2563eb"],
button[style*="background: #2563eb"],
button[style*="background:#1d4ed8"],
button[style*="background:linear-gradient"],
div[style*="background:linear-gradient"] a,
div[style*="background: linear-gradient"] a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* 1b. Hover states — maintain white text */
.sr-btn--primary:hover,
.sr-btn--secondary:hover,
.sr-btn--ctw-all:hover,
.ctw-file-btn:hover,
.dc-card-btn:hover,
.bar-cta:hover,
.sr-ft-email-btn:hover,
.cfb-go-btn:hover,
.ei-cta-btn:hover,
.ei-submit-btn:hover,
.sp-btn:hover,
.rs-btn-primary:hover,
.rir-submit:hover,
[class*="btn-primary"]:hover,
[class*="cta-btn"]:hover,
a[style*="background:#2563eb"]:hover,
a[style*="background:#1d4ed8"]:hover,
a[style*="background:linear-gradient"]:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* 1c. Badge and pill text contrast */
.sr-badge,
.sr-badge--blue,
.sr-badge--green,
.sr-badge--red,
.badge,
.pill,
.tag,
[class*="badge"],
[class*="pill"] {
  -webkit-text-fill-color: currentColor !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   2. MOTION SYSTEM VISIBILITY OVERRIDE — Kill all opacity:0 hide patterns
   ════════════════════════════════════════════════════════════════════════════ */

/* 2a. data-motion elements — must be visible by default; JS adds .ms-visible on scroll */
[data-motion],
[data-motion="fade-up"],
[data-motion="fade-in"],
[data-motion="fade-left"],
[data-motion="fade-right"],
[data-motion="scale-up"],
[data-motion="zoom-in"],
[data-motion="stagger"],
[data-motion="stagger"] > * {
  opacity: 1 !important;
  transform: none !important;
}

/* 2b. ms-reveal / ms-step / ms-badge / ms-hero-el — force visible */
.ms-reveal,
.ms-step,
.ms-badge,
.ms-hero-el,
.ms-stagger > *,
.ms-count-up,
.ms-payout-reveal,
.ms-trust-badge {
  opacity: 1 !important;
  transform: none !important;
}

/* 2c. Trust badges — the motion system broadly targets [class*="trust-badge"] */
[class*="trust-badge"],
[class*="-trust-"] span,
.sr-ft-trust-badge,
.sr-trust__item,
.sr-trust__icon,
.sr-hero__trust-line-item {
  opacity: 1 !important;
  transform: none !important;
}

/* 2d. sr-reveal patterns from older animation systems */
.sr-reveal,
.sr-reveal-scale,
.sr-reveal-from-left,
.sr-reveal-from-right,
[class*="sr-reveal"] {
  opacity: 1 !important;
  transform: none !important;
}

/* 2e. Kill transition delays that keep content hidden */
[class*="sr-reveal-delay"],
[class*="ms-delay-"] {
  transition-delay: 0s !important;
  animation-delay: 0s !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   3. DOUBLE SCROLLBAR FIX — Reinforcement
   ════════════════════════════════════════════════════════════════════════════ */

html {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body {
  overflow-x: clip !important;
  overflow-y: visible !important;
  max-width: 100vw !important;
}

/* Kill any rogue scroll containers */
main,
#main-content,
[role="main"],
.page-wrapper,
.sr-page {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   4. DUPLICATE SEARCH BUTTON FIX
   ════════════════════════════════════════════════════════════════════════════ */

/* Desktop: Only show the centered search bar at 1100px+.
   Hide the separate icon-based search button entirely on desktop since the full
   search bar is visible. On mobile (<1100px), hide the centered bar (already done)
   but ALSO hide the icon button — mobile gets search in the mobile menu. */
.nav-header-search {
  display: none !important;
}

/* At desktop widths, show the centered search bar, keep the icon hidden */
@media (min-width: 1100px) {
  .nav-search {
    display: flex !important;
    flex: 0 1 320px !important;
    max-width: 320px !important;
  }
  .nav-header-search {
    display: none !important;
  }
}

/* Below 1100px, hide both desktop search variants — mobile menu has its own search */
@media (max-width: 1099px) {
  .nav-search {
    display: none !important;
  }
  .nav-header-search {
    display: none !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   5. FOOTER FIX — Contained, centered, no bleeding, no dropdown outlines
   ════════════════════════════════════════════════════════════════════════════ */

/* 5a. Footer containment */
.sr-ramsey-footer {
  overflow: hidden !important;
  position: relative !important;
  background: #f9fafb !important;
  color: #1a1a1a !important;
}

/* 5b. Footer inner centering */
.sr-ft-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  text-align: left !important;
}

/* 5c. Footer columns centering */
.sr-ft-columns {
  display: grid !important;
  gap: 24px !important;
  justify-content: center !important;
}

@media (min-width: 768px) {
  .sr-ft-columns {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  }
}

/* 5d. Footer details/dropdown — REMOVE all stray borders/outlines/box-shadows */
.sr-ft-col-details,
.sr-ft-col-details summary,
.sr-ft-col-details[open],
.sr-ft-col-details[open] summary,
.sr-ft-col-header {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  list-style: none !important;
}

/* Remove the default disclosure triangle */
.sr-ft-col-details summary::-webkit-details-marker,
.sr-ft-col-details summary::marker {
  display: none !important;
  content: '' !important;
}

.sr-ft-col-details summary {
  cursor: pointer !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  color: #1a1a1a !important;
  padding: 0 !important;
  margin-bottom: 12px !important;
}

/* Footer links */
.sr-ft-col-links a {
  color: #4b5563 !important;
  text-decoration: none !important;
  font-size: 0.88rem !important;
  display: block !important;
  padding: 4px 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: none !important;
}

.sr-ft-col-links a:hover {
  color: #2563eb !important;
}

/* 5e. Footer trust badges — clean */
.sr-ft-trust-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px 16px !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 32px 0 !important;
  padding: 0 !important;
}

.sr-ft-trust-badge {
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: none !important;
  white-space: nowrap !important;
}

/* 5f. Footer legal section */
.sr-ft-legal {
  text-align: center !important;
  border-top: 1px solid #e5e7eb !important;
  padding-top: 24px !important;
  margin-top: 24px !important;
}

.sr-ft-legal a {
  color: #6b7280 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 5g. Footer email capture — centered */
.sr-ft-email-capture {
  text-align: center !important;
}

.sr-ft-email-inner {
  margin: 0 auto !important;
  text-align: center !important;
}

.sr-ft-email-row {
  justify-content: center !important;
}

/* 5h. Footer email input — proper contrast */
.sr-ft-email-input {
  color: #1a1a1a !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  outline: none !important;
  box-shadow: none !important;
}

.sr-ft-email-input:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
  outline: none !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   6. BORDER / BUBBLE ARTIFACTS — Remove all unintentional visual noise
   ════════════════════════════════════════════════════════════════════════════ */

/* 6a. Text elements should NEVER have outline/border/box-shadow unless they're interactive */
p, h1, h2, h3, h4, h5, h6, span, label, small, strong, em, time {
  outline: none !important;
  text-decoration-skip-ink: auto !important;
}

/* 6b. Card and section artifact cleanup */
.sr-section,
.sr-community-teaser,
.sr-trust,
#how-it-works,
section.sr-section {
  border: none !important;
  outline: none !important;
  overflow: visible !important;
}

/* 6c. Remove artifacts from the motion system's dropdown/tooltip styles leaking */
.ms-dropdown:not(.ms-open):not(.ms-closing) {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 6d. Focus-visible only — remove :focus (non-visible) outlines from all non-form elements */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   7. CENTERING FIXES — Consistent across all pages
   ════════════════════════════════════════════════════════════════════════════ */

/* 7a. Section headers */
.sr-section__header {
  text-align: center !important;
}

.sr-section__title {
  text-align: center !important;
  color: #1a1a2e !important;
}

.sr-section__sub {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 640px !important;
  color: #666666 !important;
}

.sr-section__eyebrow {
  text-align: center !important;
}

/* 7b. Container centering */
.sr-container {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 7c. Community teaser centering */
.sr-community-teaser {
  text-align: center !important;
}

.sr-community-teaser .sr-container {
  text-align: center !important;
}

.sr-community-teaser__highlights {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  margin: 32px auto !important;
}

.sr-community-teaser__item {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.sr-community-teaser .sr-btn {
  margin: 0 auto !important;
  display: inline-flex !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   8. MOBILE PREMIUM PASS (375px - 430px) — App Store Quality
   ════════════════════════════════════════════════════════════════════════════ */

/* 8a. All screens up to 430px */
@media (max-width: 430px) {
  /* Minimum padding on all containers */
  .sr-container,
  .sr-ft-inner,
  main,
  [role="main"],
  .sr-page {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Minimum tap targets on ALL interactive elements */
  button,
  a.sr-btn,
  a[class*="btn"],
  a[class*="cta"],
  input[type="submit"],
  input[type="button"],
  select,
  .sr-filter-tab,
  .sr-badge,
  .nav-hamburger,
  [role="button"],
  [role="tab"],
  [role="menuitem"] {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Body text minimum 16px — never below 14px */
  body {
    font-size: 16px !important;
  }

  p, li, td, th, dd, dt, label, span:not([class*="icon"]):not([aria-hidden]) {
    font-size: max(0.875rem, 14px) !important;
  }

  /* Headings scaled for mobile */
  h1 { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  h2 { font-size: clamp(1.25rem, 5vw, 1.75rem) !important; }
  h3 { font-size: clamp(1.1rem, 4vw, 1.5rem) !important; }

  /* No overflow, no horizontal scroll */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  img, video, iframe, table, pre, code {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  /* Settlement cards — full width */
  .sr-settlement-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
  }

  /* Category cards — responsive */
  .sr-cat-card {
    padding: 16px !important;
  }

  /* Filter pills — scrollable row */
  .sr-filter-tabs,
  .sr-filter-row,
  [class*="filter-tabs"],
  [class*="filter-row"] {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }

  .sr-filter-tabs::-webkit-scrollbar,
  .sr-filter-row::-webkit-scrollbar,
  [class*="filter-tabs"]::-webkit-scrollbar {
    display: none !important;
  }

  .sr-filter-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* Footer mobile adjustments */
  .sr-ft-brand-row {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .sr-ft-brand-left {
    flex-direction: column !important;
    align-items: center !important;
  }

  .sr-ft-social-links {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  .sr-ft-about-brand {
    text-align: center !important;
  }

  .sr-ft-columns {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .sr-ft-email-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .sr-ft-email-input {
    width: 100% !important;
  }

  .sr-ft-email-btn {
    width: 100% !important;
  }

  /* Hero section mobile */
  .sr-hero,
  [class*="hero-section"],
  [class*="sr-hero"] {
    padding: 32px 16px !important;
  }

  /* Sticky filing bar mobile */
  .sticky-filing-bar {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  .sticky-filing-bar .bar-text {
    font-size: 13px !important;
    text-align: center !important;
  }

  .sticky-filing-bar .bar-cta {
    width: 100% !important;
    text-align: center !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }
}

/* 8b. Extra small screens (375px and below) */
@media (max-width: 375px) {
  .sr-container,
  .sr-ft-inner,
  main,
  [role="main"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  h1 { font-size: 1.375rem !important; }
  h2 { font-size: 1.2rem !important; }

  /* Tighter card padding */
  .sr-settlement-card {
    padding: 12px !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   9. GLOBAL TEXT CONTRAST — Light mode only, always readable
   Scoped to .sr-page to avoid breaking dark-background modals and overlays.
   ════════════════════════════════════════════════════════════════════════════ */

/* 9a. Body text always dark on white */
body {
  background: #ffffff !important;
  color: #1a1a2e !important;
}

/* 9b. Page-level text — dark text on light backgrounds.
   Scoped to .sr-page to NOT affect modals with dark backgrounds (paywall, exit-intent) */
.sr-page h1,
.sr-page h2,
.sr-page h3,
.sr-page h4,
.sr-page h5,
.sr-page h6 {
  color: #1a1a2e !important;
}

/* 9c. Page-level paragraph text — scoped */
.sr-page p {
  color: #333333 !important;
}

/* 9d. Links on white/light page backgrounds — blue.
   NOT applied to buttons, CTAs, nav items, or elements with inline backgrounds.
   Scoped to .sr-page to protect modal/overlay link colors. */
.sr-page a:not([class*="btn"]):not([class*="cta"]):not([class*="nav-"]):not([style*="background"]):not([class*="sr-ft-col"]) {
  color: #2563eb !important;
}

/* 9e. Muted / secondary text */
.text-muted,
.text-secondary,
[class*="secondary-text"] {
  color: #666666 !important;
}

/* 9f. Footer links retain their own color */
.sr-ramsey-footer a {
  color: inherit !important;
}

.sr-ramsey-footer .sr-ft-about-brand a {
  color: #2563eb !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   10. SECTION OVERFLOW — Prevent clipping of content
   ════════════════════════════════════════════════════════════════════════════ */

section.sr-section,
section#how-it-works,
div.sr-trust,
section.sr-community-teaser,
.sr-page > section {
  overflow: visible !important;
}

/* But contain the page to prevent horizontal scroll */
.sr-page {
  overflow-x: hidden !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   11. MODAL / OVERLAY CLEANUP — Proper z-index stacking
   ════════════════════════════════════════════════════════════════════════════ */

/* All modal overlays hidden by default */
.rir-overlay,
#rirOverlay,
.sas-overlay,
#sasOverlay,
#exitIntentOverlay,
#srFmsExitBackdrop,
#quizCtaOverlay {
  display: none !important;
}

/* Show when explicitly opened */
.rir-overlay.open,
.sas-overlay.open,
#exitIntentOverlay.visible,
#exitIntentOverlay.open,
#srFmsExitBackdrop.open,
#quizCtaOverlay.open {
  display: flex !important;
}

/* Fix: modals must sit above everything */
[role="dialog"],
.modal.open,
.overlay.open {
  z-index: 99999 !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   12. HOW IT WORKS / STEP NUMBERS — White text on blue boxes
   ════════════════════════════════════════════════════════════════════════════ */

.sr-step__num {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #2563eb !important;
}

.sr-step__title {
  color: #1a1a2e !important;
}

.sr-step__desc {
  color: #666666 !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   13. HEADER CLEANUP — Clean, single search, no artifacts
   ════════════════════════════════════════════════════════════════════════════ */

/* Remove any stray outlines/borders from header elements */
.sr-header,
.site-header,
header[role="banner"] {
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Nav links dark text */
.nav-flat-link {
  color: #1a1a2e !important;
}

.nav-flat-link:hover {
  color: #2563eb !important;
}

/* Nav CTA — white text on colored bg */
.nav-cta-go-pro,
.nav-upgrade-btn {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   14. NAV MEGA-BUTTON FIX — Clean text links, NOT blue pill buttons
   Task #1291940: Nav items (Settlements, Plans, Community, Filing, Tools,
   Business, Guides, About) were turned into solid blue (#2563eb) pills by
   premium-color-enforcement-1291326.css button[type=button] rule.
   Root cause: button[type=button] { background-color: #2563eb !important }
   overrides .mega-btn { background: none } from nav-header-authority.css.

   Fix: Explicitly reset .mega-btn to clean text-link styling.
   Only .nav-cta-go-pro (Get Started) remains as a blue pill CTA.
   ════════════════════════════════════════════════════════════════════════════ */

/* Desktop nav mega-buttons: clean text links with subtle hover — NOT pills */
.mega-btn,
button.mega-btn {
  background-color: transparent !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  font-weight: 500 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 6px 12px !important;
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  cursor: pointer;
  white-space: nowrap;
}

/* Hover state: subtle background highlight only */
.mega-btn:hover,
.mega-btn.open,
button.mega-btn:hover,
button.mega-btn.open {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* Active/current page: underline indicator, no solid pill */
.mega-btn.nav-active {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  font-weight: 600 !important;
  background-color: transparent !important;
}

.mega-btn.nav-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: #2563eb;
  border-radius: 1px;
}

/* Ensure the nav nav row keeps items centered and clean */
.nav-nav-row {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex: 1 !important;
  justify-content: center !important;
  margin: 0 !important;
}