/* ==========================================================================
   Task #1295608: Mobile Settlement Detail — Text Overflow, Dividers, CTAs
   Applied to: settlement detail page (375px mobile)
   ========================================================================== */

/* ── Bug 1: Text overflow at screen edges ─────────────────────────────────── */
/* The sr-quick-facts dd elements cut off text on narrow mobile screens.
   Add word-break so long text (e.g. long settlement names in 'How to File')
   wraps properly instead of bleeding past the viewport edge. */

.sr-quick-facts,
.sr-quick-facts * {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* Also ensure the parent container doesn't overflow */
.sr-quick-facts {
  overflow: visible !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure dd text doesn't clip at edges on mobile */
.sr-quick-facts dd {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
  padding-right: 4px !important; /* prevent text from touching exact edge */
}

/* dt labels should NOT wrap awkwardly — keep them on their own line */
.sr-quick-facts dt {
  white-space: normal !important;
  word-break: break-word !important;
}

/* Countdown banner text must not overflow */
.sr-countdown-banner {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}
.sr-countdown-message,
.sr-countdown-units {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* ── Bug 2: Remove visible horizontal dividers between content sections ──────── */
/* The .detail-hero border-bottom creates a visible divider line between the
   hero and the sr-quick-facts section. On mobile, use whitespace + background
   color transitions instead of horizontal rules. */

/* Remove hero border-bottom on mobile — whitespace is the section transition */
@media (max-width: 600px) {
  .detail-hero {
    border-bottom: none !important;
    background: #ffffff !important;
  }
}

/* sr-quick-facts: replace hard border with background-based section separation.
   White bg → light gray bg → white bg creates premium visual separation
   without any visible horizontal lines. */
@media (max-width: 600px) {
  .sr-quick-facts {
    border: none !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Sections below sr-quick-facts (banners, urgency strips) should use
   background color changes — NOT border-top dividers */
@media (max-width: 600px) {
  .ue-page-banner,
  .sp-cta-urgency-strip,
  .sr-countdown-banner {
    border-top: none !important;
    border-bottom: none !important;
  }

  /* Kill any inline border-top dividers on detail section wrappers */
  .detail-section {
    border-top: none !important;
  }
}

/* Hide any hr elements between content sections on mobile */
@media (max-width: 600px) {
  .detail-page-content hr,
  .detail-content hr,
  main hr,
  .sr-detail-page hr {
    display: none !important;
  }
}

/* Kill any decorative border-top between section blocks inline */
@media (max-width: 600px) {
  [style*='border-top: 1px solid'] {
    border-top: none !important;
  }
}

/* ── Bug 3: File a Claim CTA is cramped — full-width, 52px+, 18px+, bold ───── */
/* Primary CTA on mobile 375-430px must be large, full-width, and prominent */

@media (max-width: 430px) {
  /* All primary filing CTAs get the full-width treatment */
  #file-claim,
  #file-claim > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* The main CTA button inside #file-claim */
  #file-claim .filing-cta-main-btn,
  #file-claim a.filing-cta-link,
  #file-claim a[href*='checkout'],
  #file-claim a[href='#file-claim'],
  #file-claim .cta-hover-lift {
    display: block !important;
    width: 100% !important;
    min-height: 52px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    padding: 16px 24px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    /* Premium accent color: solid blue with white text */
    background: #0055B8 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 12px !important;
    /* Subtle depth shadow */
    box-shadow: 0 4px 12px rgba(0, 87, 184, 0.35) !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    margin: 0 !important;
    flex: unset !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Countdown CTA button — make it full width too */
  .sr-countdown-cta {
    display: block !important;
    width: 100% !important;
    min-height: 52px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    padding: 16px 24px !important;
    text-align: center !important;
    background: #0055B8 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 87, 184, 0.35) !important;
    text-decoration: none !important;
    margin-top: 12px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Urgency banner CTA — shrink slightly but still prominent */
  .udb-cta {
    font-size: 16px !important;
    padding: 12px 20px !important;
    min-height: 44px !important;
  }
}

/* Also fix at 375px specifically */
@media (max-width: 376px) {
  #file-claim .filing-cta-main-btn,
  #file-claim a.filing-cta-link,
  #file-claim a[href*='checkout'],
  #file-claim a[href='#file-claim'] {
    font-size: 17px !important;
    padding: 14px 20px !important;
    min-height: 50px !important;
  }
}

/* ── Bug 4: Card text truncation on settlements browse page ──────────────────── */
/* Browse page cards must not silently truncate text — wrap to next line */

/* sr2-card (new browse card format) */
.sr2-card,
.sr2-card * {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}
.sr2-card {
  overflow: visible !important;
}
.sr2-card-title,
.sr2-card-amount,
.sr2-company-name,
.sr2-card-amount-value {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

/* Legacy settlement card */
.settlement-card,
.settlement-card * {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}
.settlement-card {
  overflow: visible !important;
}
.card-title,
.settlement-card .card-title {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

/* sr-card (saved settlements / watchlist cards) */
.sr-card,
.sr-card * {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}
.sr-card {
  overflow: visible !important;
}
.sr-card-title {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* Dir-card (directory browse cards) */
.dir-card,
.dir-card * {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}
.dir-card {
  overflow: visible !important;
}

/* Closing soon strip cards */
.cs-card-name {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

/* Mobile browse grid: force wrap, no hidden overflow */
@media (max-width: 600px) {
  .sr-grid,
  .dir-grid,
  .settlement-grid {
    overflow: visible !important;
  }

  .sr-card-wrap,
  .dir-card-wrap {
    overflow: visible !important;
  }

  .sr-card-wrap *,
  .dir-card-wrap * {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* Browse page card text: full width, no truncation */
  .sr-card-title,
  .dir-card-title,
  .sr2-card-title,
  .card-title {
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* Amount/payout text must not truncate */
  .card-amount,
  .settlement-amount,
  .sr-amount,
  .payout-amount {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* ── General mobile 375px: prevent any text from bleeding past viewport ─────── */
@media (max-width: 600px) {
  /* Page-level overflow guard */
  #main-content,
  .detail-page-content,
  .detail-content,
  main {
    overflow-x: hidden !important;
  }

  /* Ensure any text inside the detail page can't overflow the viewport */
  .detail-inner,
  .sr-quick-facts,
  .detail-hero,
  .detail-section,
  #file-claim {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}