/* ========================================================================
   Task #1155306: Mobile-first pass — sticky CTA bar, swipeable cards,
   thumb-reachable everything, layout audit (375px/390px)
   ======================================================================== */

/* ─── 1. STICKY CTA BAR — smooth show/hide via transform ─────────────── */

#sr-mobile-cta-bar {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease !important;
  will-change: transform, opacity;
}

/* Start hidden below fold, reveal via JS */
#sr-mobile-cta-bar.sr-cta-bar--ready {
  transform: translateY(100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: flex !important;
}

#sr-mobile-cta-bar.sr-cta-bar--visible {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#sr-mobile-cta-bar.sr-cta-bar--hidden {
  transform: translateY(100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Safe area inset for iPhone notch / Dynamic Island */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #sr-mobile-cta-bar {
    padding-bottom: max(0.8rem, env(safe-area-inset-bottom)) !important;
  }
}

/* Dismiss button — 44×44 minimum tap target */
#sr-mobile-cta-bar > button[aria-label="Dismiss"],
#sr-mobile-cta-bar > button {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Body padding guard when bar is visible — prevents footer/content overlap */
body.sr-mob-bar-visible {
  padding-bottom: 76px !important;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body.sr-mob-bar-visible {
    padding-bottom: max(76px, calc(56px + env(safe-area-inset-bottom))) !important;
  }
}

/* ─── 2. SWIPEABLE HORIZONTAL CARD CAROUSELS ──────────────────────────── */

@media (max-width: 767px) {
  /* Homepage featured settlements — 3-col grid → horizontal scroll */
  .rs-card-grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.875rem !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    padding: 0.25rem 1rem 0.75rem !important;
    /* Negative margin compensates for padding to reach full bleed */
    margin: 0 -1rem !important;
    /* Right-edge fade hints at more cards */
    -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%) !important;
    mask-image: linear-gradient(to right, black 88%, transparent 100%) !important;
  }

  .rs-card-grid::-webkit-scrollbar {
    display: none !important;
  }

  /* Each settlement card — fixed width for consistent swiping */
  .rs-card-grid .rs-settlement-card {
    flex: 0 0 clamp(258px, 78vw, 295px) !important;
    scroll-snap-align: start !important;
    min-width: 0 !important;
  }

  /* Remove right-edge fade when scrolled to end */
  .rs-card-grid.sr-at-end {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* Related settlements grid on detail pages */
  .related-grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.75rem !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    padding-bottom: 0.75rem !important;
    -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%) !important;
    mask-image: linear-gradient(to right, black 88%, transparent 100%) !important;
  }

  .related-grid::-webkit-scrollbar { display: none !important; }

  .related-grid .related-card {
    flex: 0 0 clamp(240px, 74vw, 275px) !important;
    scroll-snap-align: start !important;
    min-width: 0 !important;
  }

  .related-grid.sr-at-end {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* ES carousel — already has snap, just ensure correct card sizing */
  .es-carousel-track {
    padding-bottom: 0.5rem !important;
  }
}

/* ─── 3. PAGINATION DOTS ─────────────────────────────────────────────── */

.sr-carousel-dots {
  display: none;
}

@media (max-width: 767px) {
  .sr-carousel-dots {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 0.4rem 0 0.25rem;
    list-style: none;
    margin: 0;
    flex-wrap: wrap;
    max-width: 180px;
    margin-left: auto;
    margin-right: auto;
  }

  .sr-carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d1d5db;
    border: 1px solid transparent;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, width 0.25s ease, border-radius 0.25s ease;
    flex-shrink: 0;
    /* Invisible touch area padding */
    position: relative;
  }

  .sr-carousel-dot::after {
    content: '';
    position: absolute;
    inset: -8px;
  }

  .sr-carousel-dot.active {
    background: #2563eb;
    width: 18px;
    border-radius: 3px;
  }

  .sr-carousel-dot:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
    border-radius: 50%;
  }
}

/* ─── 4. SWIPE HINT ──────────────────────────────────────────────────── */

.sr-swipe-hint {
  display: none;
}

@media (max-width: 767px) {
  .sr-swipe-hint {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: #9ca3af;
    padding: 0 0.25rem 0.4rem;
    letter-spacing: 0.01em;
  }

  .sr-swipe-hint svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }
}

/* ─── 5. THUMB-ZONE OPTIMIZATION ─────────────────────────────────────── */

@media (max-width: 767px) {
  /* All primary CTAs: 48px minimum (WCAG 2.5.5) */
  .btn, .cta-btn, .rs-btn, .sp-btn, .hero-cta,
  .filing-cta-link, .above-fold-cta-btn,
  .rs-btn-primary, .rs-btn-primary-dominant,
  .lm-bar-btn, .bar-cta, .fs-hero-cta,
  a[class*="cta"][class*="btn"],
  .es-card-cta, .related-card-cta,
  .sr-mcta-btn, .sticky-cta-btn {
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Form inputs: 16px prevents iOS auto-zoom */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 48px !important;
  }

  /* Spacing between form fields */
  .form-group + .form-group,
  .field + .field,
  .input-wrap + .input-wrap {
    margin-top: 1rem !important;
  }

  /* Filter/tab pills: tall enough to tap */
  .filter-pill, .tab-pill, .category-tab,
  button[data-filter], [role="tab"] {
    min-height: 40px !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* Navigation links */
  .footer-link, .nav-flat-link {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ─── 6. HOVER-ONLY INTERACTION FIXES ───────────────────────────────── */

/* Touch devices: swap hover effects for :active */
@media (hover: none) and (pointer: coarse) {
  /* Cards: active press state instead of sticky hover */
  .rs-settlement-card:active,
  .es-card:active,
  .related-card:active,
  .settlement-card:active,
  .sr-card:active,
  .rs-settlement-card:active * {
    transform: scale(0.985) !important;
    transition: transform 0.08s ease !important;
  }

  /* Disable hover transforms that get stuck on touch */
  .rs-settlement-card:hover,
  .es-card:hover,
  .related-card:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06)) !important;
  }

  /* Buttons */
  button:active, [role="button"]:active,
  .rs-btn-primary:active, .sp-btn:active,
  a.bar-cta:active, .fs-hero-cta:active,
  .filing-cta-link:active {
    opacity: 0.82 !important;
    transform: scale(0.975) !important;
    transition: opacity 0.08s, transform 0.08s !important;
  }

  /* Remove hover-dependent tooltips (they flash on tap) */
  [data-tooltip]:hover::before,
  [data-tooltip]:hover::after {
    display: none !important;
  }
}

/* ─── 7. MOBILE LAYOUT AUDIT — 375px & 390px ────────────────────────── */

@media (max-width: 390px) {
  /* Hero CTAs: always stacked and full-width */
  .sr-hero-cta-group,
  .hero-cta-pair,
  .fs-hero-cta-pair,
  .above-fold-cta-pair,
  .cta-pair,
  .dual-cta {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.75rem !important;
  }

  .sr-hero-cta-group a,
  .hero-cta-pair a,
  .fs-hero-cta-pair a,
  .above-fold-cta-pair a,
  .sr-hero-cta-group button,
  .hero-cta-pair button {
    width: 100% !important;
    min-height: 52px !important;
  }

  /* Social proof / trust bar: allow items to wrap */
  .social-proof-bar .spb-items,
  .trust-bar-inner,
  .sr-trust-items,
  .stats-row {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.4rem 0.75rem !important;
  }

  /* Countdown timers: readable on small screens */
  .countdown-timer,
  .sr-countdown,
  .deadline-timer,
  .timer-digits {
    font-size: clamp(0.75rem, 3vw, 0.9rem) !important;
  }

  /* Eligibility checklist: full-width items */
  .eligibility-checklist li,
  .checklist-item {
    padding: 0.6rem 0.75rem !important;
    font-size: 0.85rem !important;
  }

  /* Settlement detail: dual CTAs stack */
  .above-fold-cta-strip,
  .cta-strip,
  .filing-actions {
    flex-direction: column !important;
    gap: 0.625rem !important;
  }

  .above-fold-cta-strip a,
  .above-fold-cta-strip button,
  .cta-strip a,
  .cta-strip button {
    width: 100% !important;
    min-height: 52px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Pricing: always single column, Pro card first */
  .pricing-grid,
  .plan-cards,
  .pricing-plans,
  .plans-wrapper {
    grid-template-columns: 1fr !important;
  }

  /* Directory filters: wrap and stack on very small screens */
  .filter-bar,
  .filters-row,
  .dir-filter-pills {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }

  /* Guide/hub pages: no content overflow */
  .guide-body,
  .seo-guide-body,
  .content-body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* Images: never wider than viewport */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Text: prevent overflow */
  h1, h2, h3, h4 {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* Footer: ensure links are tappable */
  footer a, .footer a {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.25rem 0 !important;
  }
}

/* ─── 8. NO HORIZONTAL SCROLL SAFETY NET ────────────────────────────── */

@media (max-width: 767px) {
  /* Tables: scroll horizontally inside, don't overflow page */
  .settlement-body table,
  .guide-body table,
  .seo-content table,
  .content-body table,
  article table {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Images in content: never overflow */
  article img, .guide-body img, .blog-post img,
  .settlement-body img, .seo-guide img,
  .content-body img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Code blocks */
  pre, code {
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
  }

  /* iframes (embeds, maps) */
  iframe {
    max-width: 100% !important;
  }
}

/* ─── 9. FULL-SCREEN MODALS — BOTTOM SHEET PATTERN ─────────────────── */

@media (max-width: 767px) {
  /* Move modals to bottom of screen for thumb accessibility */
  .modal-overlay .modal-content,
  .modal-overlay .modal-dialog,
  .sr-modal .sr-modal-content,
  .exit-intent-modal .exit-intent-content,
  .fms-quiz-modal .fms-quiz-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    max-height: 90dvh !important;
    max-height: 90vh !important; /* fallback */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    animation: sr-slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  @keyframes sr-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  /* Drag handle indicator */
  .exit-intent-content::before,
  .sr-modal-content::before {
    content: '' !important;
    display: block !important;
    width: 36px !important;
    height: 4px !important;
    background: #d1d5db !important;
    border-radius: 2px !important;
    margin: 0.75rem auto 0.5rem !important;
  }

  /* Close buttons — easy tap */
  .modal-close, .sr-modal-close, .exit-intent-close,
  [class*="modal"] button[aria-label*="Close"],
  [class*="modal"] button[aria-label*="Dismiss"],
  [class*="popup"] button[aria-label*="Close"] {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ─── 10. PERFORMANCE: CONTENT IMAGES ───────────────────────────────── */

/* Lazy-loaded images: avoid CLS */
img[loading="lazy"] {
  display: block;
  min-height: 1px; /* prevents zero-height collapse before load */
}

/* Card images: consistent aspect ratio */
@media (max-width: 767px) {
  .settlement-card .card-img,
  .rs-settlement-card img,
  .es-card img {
    aspect-ratio: 16/9;
    object-fit: cover;
    width: 100%;
    height: auto;
  }
}