/*
 * settlement-detail-qa-1585452.css — Task #1585452
 * Owns: QA + Visual Polish for settlement detail pages — 375px + 1440px audit
 * Does NOT own: base layout, typography system, component design
 *
 * Fixes:
 * 1. WCAG AA contrast failures — muted text (#94a3b8 → #6b7280 or #64748b)
 * 2. View gate hard modal — missing CSS (unstyled modal)
 * 3. How-it-works 3-col grid → 1-col at ≤480px mobile
 * 4. Daily paywall modal — mobile padding overflow fix
 * 5. Top deadline timer — flex-wrap for very narrow viewports
 * 6. QEC header row — ensure price badge doesn't cause overflow at 375px
 * 7. Announcement bar emoji/banner text overflow prevention
 * 8. Mobile sticky CTA — bottom offset fix
 * 9. Urgency deadline banner — wrap prevention fix
 * 10. Desktop (1440px) — refined padding + sidebar spacing
 * 11. Firm modal (view gate) — mobile responsiveness
 * 12. Category icon — consistent sizing
 */

/* ══════════════════════════════════════════════════════════════════════════
   1. WCAG AA CONTRAST FIXES
   --sr-text-muted (#94a3b8) has only 3.3:1 contrast on white — fails AA.
   Replace with #64748b (5.9:1) for text ≤18px, #6b7280 (4.6:1) for ≥19px bold.
   ══════════════════════════════════════════════════════════════════════════ */

/* Byline — 13px: needs #64748b minimum */
body.page-settlement-detail .sr-eeeat-byline,
body.page-settlement-detail .sr-eeeat-byline > * {
  color: #64748b !important;
}

/* Quick facts label row — 11px uppercase, needs highest contrast: #4b5563 */
body.page-settlement-detail .qf-label {
  color: #4b5563 !important;
}

/* Quick facts trust row (below CTA) — 11px */
body.page-settlement-detail .qf-trust {
  color: #4b5563 !important;
}

/* Deadline timer label (9px!) — must be dark enough to pass */
body.page-settlement-detail .tdt-lbl {
  color: #4b5563 !important;
  font-size: 10px !important; /* Bump from 9px for legibility */
}

/* Deadline timer colon separator */
body.page-settlement-detail .tdt-colon {
  color: #94a3b8 !important; /* 20px large text — 3.3:1 passes AA Large */
}

/* Deadline timer subtitle text */
body.page-settlement-detail .tdt-sub,
body.page-settlement-detail .tdt-msg {
  color: #64748b !important;
}

/* Last updated badge */
body.page-settlement-detail .sr-last-updated,
body.page-settlement-detail .sr-last-updated * {
  color: #64748b !important;
}

/* QEC sub-text and trust line — 13px */
body.page-settlement-detail .qec-sub,
body.page-settlement-detail .qec-trust-line {
  color: #64748b !important;
}

/* HIW step description — 12px */
body.page-settlement-detail .hiw-step-desc {
  color: #64748b !important;
}

/* Sidebar price subtitle */
body.page-settlement-detail .sidebar-price-sub {
  color: #64748b !important;
}

/* AEO breadcrumb root color */
body.page-settlement-detail .breadcrumb-nav {
  color: #64748b !important;
}

/* Detail summary — ensure strong enough */
body.page-settlement-detail .detail-summary {
  color: #374151 !important; /* was #475569 via var — keeping consistent */
}

/* ══════════════════════════════════════════════════════════════════════════
   2. VIEW HARD GATE MODAL — Missing CSS
   This is a full-page gate. Needs to cover viewport, center content, and
   show a clean pricing table. No CSS existed before this fix.
   ══════════════════════════════════════════════════════════════════════════ */

#sr-view-hard-gate {
  display: none; /* hidden by default; JS sets display:block on trigger */
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.75) !important;
  z-index: 99999 !important;
  overflow-y: auto !important;
  padding: 1rem !important;
}

body.sr-hard-gated #sr-view-hard-gate {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 2rem 1rem !important;
}

body.sr-hard-gated {
  overflow: hidden !important;
}

.sr-vg-gate-inner {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 2rem 1.75rem 1.5rem !important;
  max-width: 680px !important;
  width: 100% !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3) !important;
  text-align: center !important;
}

.sr-vg-gate-badge {
  display: inline-flex !important;
  align-items: center !important;
  background: #fee2e2 !important;
  color: #b91c1c !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  padding: 0.3rem 0.75rem !important;
  border-radius: 100px !important;
  margin-bottom: 1rem !important;
}

.sr-vg-gate-inner h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(1.3rem, 4vw, 1.65rem) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 0.5rem !important;
  line-height: 1.2 !important;
}

.sr-vg-gate-inner > p {
  font-size: 0.9rem !important;
  color: #64748b !important;
  margin: 0 0 1.5rem !important;
  line-height: 1.55 !important;
}

/* Plan cards grid — 3 columns on desktop, 1 on mobile */
.sr-vg-plans {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin: 0 0 1.25rem !important;
  text-align: left !important;
}

.sr-vg-plan {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 1.1rem !important;
  position: relative !important;
}

.sr-vg-plan--featured {
  background: #f0fdf4 !important;
  border-color: #059669 !important;
  border-width: 2px !important;
}

.sr-vg-plan-badge {
  display: inline-flex !important;
  background: #059669 !important;
  color: #ffffff !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  padding: 0.2rem 0.5rem !important;
  border-radius: 4px !important;
  margin-bottom: 0.5rem !important;
}

.sr-vg-plan-name {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 0.25rem !important;
}

.sr-vg-plan-price {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  color: #059669 !important;
  margin-bottom: 0.75rem !important;
  line-height: 1 !important;
}

.sr-vg-plan-price span {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
}

.sr-vg-plan-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1rem !important;
  font-size: 0.82rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
}

.sr-vg-plan-features li {
  color: #374151 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.sr-vg-plan-features .check {
  color: #059669 !important;
  font-weight: 700 !important;
}

.sr-vg-plan-features .lock {
  color: #ef4444 !important;
  font-weight: 700 !important;
}

.sr-vg-plan-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 0.65rem 1rem !important;
  border-radius: 8px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background 0.15s !important;
  text-align: center !important;
}

.sr-vg-plan-cta--primary {
  background: #059669 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25) !important;
}

.sr-vg-plan-cta--primary:hover {
  background: #047857 !important;
  color: #ffffff !important;
}

.sr-vg-plan-cta--secondary {
  background: #ffffff !important;
  color: #374151 !important;
  border: 1.5px solid #e2e8f0 !important;
}

.sr-vg-plan-cta--secondary:hover {
  background: #f8fafc !important;
}

.sr-vg-gate-footer {
  font-size: 0.8rem !important;
  color: #94a3b8 !important;
  margin: 0 !important;
}

.sr-vg-gate-footer a {
  color: #64748b !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Mobile: Stack plans vertically */
@media (max-width: 600px) {
  .sr-vg-plans {
    grid-template-columns: 1fr !important;
  }

  .sr-vg-gate-inner {
    padding: 1.5rem 1.1rem 1.25rem !important;
    border-radius: 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   3. HOW IT WORKS — 3-column grid collapses at mobile
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  body.page-settlement-detail .how-it-works-steps,
  body.page-settlement-detail [class*="how-it-works"] .steps,
  body.page-settlement-detail .hiw-steps {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.page-settlement-detail .hiw-step {
    padding: 14px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   4. DAILY PAYWALL MODAL — Mobile padding fix
   At 375px, max-width:520px is fine (constrained by viewport), but
   padding:2rem 1.75rem = 56px horizontal padding on a 343px card
   leaves only 287px for content. Reduce padding on mobile.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  #sr-daily-paywall-inner {
    padding: 1.5rem 1.1rem 1.25rem !important;
    margin: 1rem auto !important;
    border-radius: 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   5. TOP DEADLINE TIMER — flex-wrap on narrow viewports
   At 375px, the countdown block + info text may be too wide to fit in row.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  body.page-settlement-detail .top-deadline-timer {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }

  body.page-settlement-detail .tdt-countdown-block {
    flex-basis: 100% !important;
    justify-content: center !important;
  }

  body.page-settlement-detail .tdt-info {
    flex-basis: 100% !important;
    text-align: center !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   6. QEC WIDGET — Price badge overflow fix at 375px
   qec-header-row is flex row with headline and price badge.
   At very narrow widths the price badge (28px font) needs to not overflow.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 375px) {
  body.page-settlement-detail .qec-price-badge {
    font-size: 22px !important;
    padding: 6px 10px !important;
  }

  body.page-settlement-detail .qec-headline {
    font-size: 18px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   7. URGENCY DEADLINE BANNER — overflow prevention at 375px
   .ue-page-banner CTA button has white-space: nowrap — wrap the banner
   text on narrow screens to prevent horizontal overflow.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  body.page-settlement-detail .ue-page-banner {
    flex-wrap: wrap !important;
    padding: 12px 16px !important;
    gap: 8px !important;
  }

  body.page-settlement-detail .ue-page-banner-text {
    font-size: 13px !important;
    flex: 1 1 100% !important;
  }

  body.page-settlement-detail .ue-page-banner-cta {
    font-size: 12px !important;
    padding: 9px 14px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   8. MOBILE STICKY CTA — bottom offset refinement
   After de-spam cleanup (Task #1589892), fewer stacked elements at bottom.
   The 60px offset above Crisp is correct; ensure it's properly positioned.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  #sr-mobile-sticky-cta {
    /* Keep 60px offset but ensure it uses safe-area-inset correctly */
    bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: 0 !important; /* Remove double padding — handled by bottom offset */
  }

  #sr-mobile-sticky-cta-inner {
    height: 56px !important;
    padding: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   9. FIRM VIEW GATE MODAL (30-49 views) — mobile responsive
   The firm modal backdrop and inner card need proper mobile sizing.
   ══════════════════════════════════════════════════════════════════════════ */

#sr-view-firm-backdrop {
  overflow-y: auto !important;
}

@media (max-width: 480px) {
  #sr-view-firm-inner {
    padding: 1.5rem 1.1rem 1.25rem !important;
    margin: 1rem auto !important;
    border-radius: 16px !important;
    max-width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   10. DESKTOP (≥1440px) REFINEMENTS
   At 1440px, the max-width 1200px layout is surrounded by whitespace.
   Ensure no elements bleed beyond their containers.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1440px) {
  body.page-settlement-detail .detail-inner {
    max-width: 1200px !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  body.page-settlement-detail .content-with-sidebar {
    max-width: 1200px !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  /* Slightly wider gap for better visual breathing room */
  body.page-settlement-detail .content-with-sidebar {
    gap: 40px !important;
  }

  /* Sidebar quick facts card — slightly wider */
  body.page-settlement-detail .quick-facts-card {
    min-width: 340px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   11. MOBILE LAYOUT POLISH (375px target)
   Extra polish for the 375px breakpoint specifically
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 390px) {
  /* Ensure detail sections don't have tight horizontal overflow */
  body.page-settlement-detail .detail-section {
    overflow: hidden !important;
  }

  /* SR AEO summary — single column confirmed */
  body.page-settlement-detail .sr-aeo-summary {
    grid-template-columns: 1fr !important;
  }

  /* Trust strip — ensure chips wrap cleanly */
  body.page-settlement-detail .sr-detail-trust-strip {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Meta badges row — compact wrapping */
  body.page-settlement-detail .detail-meta-row {
    gap: 5px !important;
  }

  /* Full-width filing CTA buttons — 44px minimum tap target */
  body.page-settlement-detail .sidebar-btn.sidebar-btn-xl,
  body.page-settlement-detail .sidebar-btn-xl,
  body.page-settlement-detail a.sidebar-btn-xl,
  body.page-settlement-detail .qec-cta-btn {
    min-height: 52px !important;
    font-size: 15px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Prevent long URLs / text from causing horizontal scroll */
  body.page-settlement-detail .detail-section p,
  body.page-settlement-detail .detail-section li {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Announcement bar messages on 375px — reduce font */
  #sr-announcement-bar {
    font-size: 12px !important;
  }

  /* Category banner slightly shorter */
  body.page-settlement-detail .detail-cat-banner {
    height: 80px !important;
  }

  /* Reduce inner content padding at very narrow */
  body.page-settlement-detail .qec-body {
    padding: 16px 16px 16px !important;
  }

  /* EC widget pills — stack vertically */
  body.page-settlement-detail .ec-widget-pills {
    flex-direction: column !important;
  }

  body.page-settlement-detail .ec-pill {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   12. PAYWALL MODAL — width fix at 375px
   The paywall card has 1.5rem padding (24px) each side = 48px total.
   At 375px viewport, backdrop padding = 1rem each side = 30px total.
   Available width = 375 - 30 = 345px. Content = 345 - 48 = 297px. OK.
   But ensure the card doesn't get padding-caused overflow.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 420px) {
  .sr-paywall-card {
    padding: 1.25rem 1rem 1rem !important;
    border-radius: 12px !important;
  }

  .sr-paywall-card__title {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   13. RELATED SETTLEMENTS SECTION — mobile card stacking
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  body.page-settlement-detail #related-settlements-grid {
    padding: 32px 16px !important;
  }

  body.page-settlement-detail #related-settlements-grid .sr-related-grid,
  body.page-settlement-detail #related-settlements-grid > div[style*="grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   14. DEADLINE CHIP / STATUS BADGES — WCAG contrast on colored backgrounds
   Ensure chip text colors pass AA against their backgrounds.
   ══════════════════════════════════════════════════════════════════════════ */

/* Status chip: "Open" — #059669 text on #ecfdf5 = 4.6:1, passes AA */
body.page-settlement-detail .sr-status-open {
  color: #047857 !important; /* 5.4:1 on #ecfdf5 — passes AA */
}

/* Category badge outline — ensure emerald color passes on white */
body.page-settlement-detail .detail-meta-row .card-category {
  color: #047857 !important; /* Slightly darker emerald for 4.9:1 on white */
  border-color: #047857 !important;
}

/* Trust chip: dark emerald text on light green bg */
body.page-settlement-detail .sr-trust-chip {
  color: #065f46 !important; /* 6.8:1 on #f0fdf4 — passes AA */
}

/* ══════════════════════════════════════════════════════════════════════════
   15. GLOBAL: PREVENT HORIZONTAL SCROLL
   Ensure nothing bleeds past viewport width on mobile.
   ══════════════════════════════════════════════════════════════════════════ */

body.page-settlement-detail {
  overflow-x: hidden !important;
}

@media (max-width: 768px) {
  body.page-settlement-detail .detail-content,
  body.page-settlement-detail .detail-inner,
  body.page-settlement-detail .content-with-sidebar,
  body.page-settlement-detail .sidebar {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Tables inside sections — scroll horizontally within container */
  body.page-settlement-detail .detail-section table {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   16. SOCIAL PROOF BAR — remove fire emoji, tone down
   The social proof bar injected via JS uses emoji — keep but ensure
   the bar doesn't overflow at 375px.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  #sr-settlement-social-proof > div {
    font-size: 0.85rem !important;
    padding: 0.4rem 0.85rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   17. SCORE CARD — ensure readable at both viewports
   ══════════════════════════════════════════════════════════════════════════ */

body.page-settlement-detail .sr-score-gauge-label,
body.page-settlement-detail .sr-score-sub,
body.page-settlement-detail [class*="score"] .label,
body.page-settlement-detail [class*="score"] .sub {
  color: #64748b !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   18. OVERALL FOOTER SPACING — avoid sticky CTA overlap
   Content at the bottom of the page needs padding to not be hidden
   behind the mobile sticky CTA bar.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  body.page-settlement-detail .sr-ramsey-footer,
  body.page-settlement-detail .site-footer,
  body.page-settlement-detail footer {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
  }
}