/* ============================================================================
   BUGFIX — Task #1283328
   Fixes: double scrollbar, giant search bubble, sticky header blocking nav,
   broken trust badge icons, How It Works blue squares, left-aligned content,
   content bleeding below footer.
   Loads LAST in cascade — all rules use !important to override prior CSS.
   ============================================================================ */

/* ── 1. DOUBLE SCROLLBAR FIX ─────────────────────────────────────────────── */
/* Root cause: both html and body have overflow-x:hidden, which per CSS spec
   implicitly sets overflow-y:auto on both — creating two scroll containers.
   Fix: use overflow-x:clip on body (prevents horizontal overflow without
   triggering a new scroll container) and let html be the only scroll root. */
html {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
body {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* ── 2. GIANT SEARCH BUBBLE FIX ──────────────────────────────────────────── */
/* The nav-search-wrap element was displaying as an oversized rounded bubble.
   Lock down dimensions and ensure the desktop search bar only shows at 1100px+. */
.nav-search {
  display: none !important;
}
@media (min-width: 1100px) {
  .nav-search {
    display: flex !important;
    flex: 0 1 320px !important;
    max-width: 320px !important;
  }
}
.nav-search-wrap {
  max-width: 320px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Header search icon button — constrain to 36x36 */
.nav-header-search-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: none !important;
  border: none !important;
  flex-shrink: 0 !important;
}
.nav-header-search {
  flex-shrink: 0 !important;
  max-width: 48px !important;
}
/* Search panel — hidden by default, only shown via JS .open class */
.nav-header-search-panel {
  display: none !important;
}
.nav-header-search-panel.open {
  display: block !important;
}

/* ── 3. STICKY HEADER / ANNOUNCE BAR FIX ─────────────────────────────────── */
/* Root cause: max-height:80px on header clips the nav row beneath the brand row.
   The announce bar's height (~36px) pushes header down, but nav row gets cut off.
   Fix: increase max-height to accommodate both brand row + nav row. */
.sr-header,
.site-header,
header[role="banner"] {
  max-height: none !important;
  overflow: visible !important;
}
/* Ensure the announce bar doesn't overlap — sits above the header in stacking */
.announce-bar {
  z-index: 1001 !important;
}
/* Header positions below announce bar when present */
.has-announce-bar .sr-header,
.has-announce-bar .site-header,
.has-announce-bar header[role="banner"] {
  top: 36px !important;
}
/* Adjust body padding to account for both bar + header */
html.has-announce-bar body {
  padding-top: 104px !important;
}
@media (max-width: 900px) {
  html.has-announce-bar body {
    padding-top: 96px !important;
  }
}
@media (max-width: 600px) {
  html.has-announce-bar body {
    padding-top: 84px !important;
  }
}
/* Returning visitor banner — position below nav, not overlapping */
#returningVisitorBanner {
  z-index: 95 !important;
}

/* ── 4. TRUST BADGE ICONS FIX ────────────────────────────────────────────── */
/* Root cause: SVGs inside .sr-trust__icon get caught by global SVG resets
   (display:block, max-width:100%, height:auto) which breaks flex centering.
   Also the parent section has overflow:hidden which may clip.
   Fix: force icon container and inner SVG to render correctly. */
.sr-trust {
  overflow: visible !important;
}
.sr-trust__icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  background: #2563eb !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #ffffff !important;
  overflow: visible !important;
}
.sr-trust__icon svg {
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}
.sr-trust__icon svg path,
.sr-trust__icon svg line,
.sr-trust__icon svg polyline,
.sr-trust__icon svg circle,
.sr-trust__icon svg rect {
  stroke: #ffffff !important;
}
/* Trustpilot star icon — keep its green fill or force white */
.sr-trust__icon svg path[fill] {
  fill: #ffffff !important;
}
/* Trust item layout */
.sr-trust__item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  overflow: visible !important;
}
.sr-trust__label {
  color: #1a1a1a !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.sr-trust__sub {
  color: #6e6e73 !important;
  font-size: 13px !important;
}

/* ── 5. HOW IT WORKS STEP NUMBERS FIX ────────────────────────────────────── */
/* Root cause: body has color:#0f172a!important which overrides the white text
   on the blue step number boxes, making numbers invisible (dark on dark blue).
   Fix: force white text on step numbers. */
.sr-step__num {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  background: #2563eb !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}
.sr-step {
  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
  overflow: visible !important;
}
.sr-step__title {
  color: #1a1a1a !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  margin-bottom: 8px !important;
}
.sr-step__desc {
  color: #6e6e73 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}
/* Steps section — fix overflow clipping */
#how-it-works {
  overflow: visible !important;
}

/* ── 6. CENTERING / LEFT-ALIGNMENT FIX ───────────────────────────────────── */
/* Community teaser section — center text and content */
.sr-community-teaser {
  text-align: center !important;
  overflow: visible !important;
}
.sr-community-teaser .sr-container {
  text-align: center !important;
}
.sr-community-teaser .sr-section__title,
.sr-community-teaser .sr-section__eyebrow,
.sr-community-teaser .sr-section__sub {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.sr-community-teaser__highlights {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  margin: 32px auto !important;
  text-align: center !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;
}
/* Section titles — ensure centered */
.sr-section__header {
  text-align: center !important;
}
.sr-section__title {
  text-align: center !important;
}
.sr-section__sub {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 640px !important;
}
/* Container centering */
.sr-container {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── 7. CONTENT BELOW FOOTER FIX ────────────────────────────────────────── */
/* Root cause: rir-overlay (Report an Issue modal) CSS was "moved to
   modal-overlays.min.css" but the class doesn't exist in that file.
   The overlay renders visible below the footer with no display:none.
   Fix: hide both modal overlays by default, show only when opened. */
.rir-overlay,
#rirOverlay {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: rgba(0, 0, 0, 0.6) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
}
.rir-overlay.open,
.rir-overlay.active,
.rir-overlay[style*="display: flex"],
.rir-overlay[style*="display:flex"] {
  display: flex !important;
}
.rir-modal {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 2rem !important;
  max-width: 480px !important;
  width: 100% !important;
  position: relative !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}
.rir-close {
  position: absolute !important;
  top: 0.75rem !important;
  right: 0.75rem !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: #6b7280 !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.rir-title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin-bottom: 0.5rem !important;
}
.rir-subtitle {
  font-size: 0.85rem !important;
  color: #6b7280 !important;
  margin-bottom: 1rem !important;
}
.rir-label {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  display: block !important;
  margin-bottom: 0.35rem !important;
}
.rir-url {
  font-size: 0.82rem !important;
  color: #6b7280 !important;
  background: #f9fafb !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 8px !important;
  margin-bottom: 1rem !important;
  word-break: break-all !important;
}
.rir-textarea,
.rir-email-input {
  width: 100% !important;
  padding: 0.6rem 0.75rem !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  margin-bottom: 1rem !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  color: #1a1a1a !important;
}
.rir-submit {
  width: 100% !important;
  background: #2563eb !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 0.75rem !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
}
.rir-submit:hover {
  background: #1d4ed8 !important;
}
.rir-success {
  display: none;
  text-align: center;
  padding: 1.5rem 0;
}

/* Submit a Settlement modal — same fix */
.sas-overlay,
#sasOverlay {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: rgba(0, 0, 0, 0.6) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
}
.sas-overlay.open,
.sas-overlay.active,
.sas-overlay[style*="display: flex"],
.sas-overlay[style*="display:flex"] {
  display: flex !important;
}

/* ── 8. SECTION OVERFLOW FIX ─────────────────────────────────────────────── */
/* The global section{overflow:hidden!important} is clipping trust badges,
   step numbers, and other content. Override on specific homepage sections. */
section.sr-section,
section#how-it-works,
div.sr-trust,
section.sr-community-teaser {
  overflow: visible !important;
}

/* ── 9. SR-REVEAL VISIBILITY FIX ─────────────────────────────────────────── */
/* Root cause: .sr-reveal starts at opacity:0 and only becomes visible when
   IntersectionObserver adds .sr-visible. If the observer doesn't fire (e.g.,
   JS error, race condition, or element already in viewport on load), the trust
   badges and How It Works sections stay invisible — appearing as gray/blue
   empty squares. Fix: ensure critical homepage sections are always visible. */
.sr-trust.sr-reveal,
.sr-trust .sr-reveal,
#how-it-works.sr-reveal,
section.sr-section.sr-reveal,
.sr-community-teaser.sr-reveal,
.sr-reveal.sr-visible {
  opacity: 1 !important;
  transform: none !important;
}
/* Force ALL sr-reveal elements visible — invisible content is worse than
   no animations. Scroll reveal can be re-enabled once the JS is reliable. */
.sr-reveal,
.sr-reveal-scale,
.sr-reveal-from-left,
.sr-reveal-from-right {
  opacity: 1 !important;
  transform: none !important;
}

/* Also kill reveal delays — content should be visible immediately */
[class*="sr-reveal-delay"] {
  transition-delay: 0s !important;
}

/* ── 10. SVG GLOBAL RESET OVERRIDE ───────────────────────────────────────── */
/* Global reset sets all SVGs to display:block + height:auto which breaks
   flex-centered icons. Override specifically for known icon containers. */
.sr-trust__icon svg,
.sr-step__num svg,
.sr-community-teaser__icon svg,
.sr-hero__trust-line-item svg {
  display: inline-block !important;
  height: auto !important;
}
/* Hero trust line SVGs */
.sr-hero__trust-line-item svg {
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0 !important;
}