/**
 * Task #1369481: Comprehensive QA Fixes
 *
 * Covers:
 *  - Crisp/chat widget z-index & positioning (prevents overlap of left-side content)
 *  - Scroll-popup banner styles (#sr-scroll-banner)
 *  - Mobile: horizontal overflow at 375px, touch targets ≥44px, font ≥16px body
 *  - FOMO ticker white-bg enforcement
 *  - Community page chat section z-index cleanup
 */

/* ══════════════════════════════════════════════════════════════════════════
   1. CRISP CHAT WIDGET — Position Lock
   Crisp's own iframe container has z-index ~1000000, but can overflow into
   content on certain viewport sizes. These rules ensure it stays bottom-right
   and never overlaps the main content column.
   ══════════════════════════════════════════════════════════════════════════ */

/* Crisp widget container — force bottom-right, safe-area aware */
.crisp-client,
[class*="crisp-client"],
#crisp-chatbox,
[data-id*="crisp"] {
  position: fixed !important;
  bottom: 16px !important;
  right: 16px !important;
  left: auto !important;
  top: auto !important;
  max-width: 360px !important;
  z-index: 9000 !important; /* lower than 1000000 but higher than page content */
}

/* On desktop, add extra bottom margin so Crisp doesn't cover sticky CTAs */
@media (min-width: 1024px) {
  .crisp-client,
  [class*="crisp-client"],
  #crisp-chatbox {
    bottom: 24px !important;
    right: 24px !important;
  }
}

/* Community page: ensure forum modal stays above chat widget */
.ch-forum-modal-overlay {
  z-index: 9999 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. SCROLL POPUP BANNER — Task #1221243 / #1245061
   Bottom slide-up email capture banner shown at 60% scroll depth
   on settlement detail pages. JS: /js/scroll-popup.js
   ══════════════════════════════════════════════════════════════════════════ */

#sr-scroll-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8900;
  background: #ffffff;
  border-top: 2px solid #00B37D;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  padding: 14px 20px;
  transform: translateY(100%);
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}

#sr-scroll-banner.sr-scroll-banner-visible {
  transform: translateY(0);
  opacity: 1;
}

.sr-scroll-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 680px;
  margin: 0 auto;
  flex-wrap: nowrap;
}

.sr-scroll-banner-text {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.sr-scroll-banner-text span {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0A0A0A;
  line-height: 1.35;
  white-space: normal;
}

/* Email form inside banner */
#sr-scroll-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

#sr-scroll-email {
  height: 44px;
  min-height: 44px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  padding: 0 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  color: #0A0A0A;
  background: #fff;
  width: 200px;
  max-width: 200px;
  outline: none;
  transition: border-color 0.2s;
}
#sr-scroll-email:focus { border-color: #00B37D; }

#sr-scroll-submit-btn {
  height: 44px;
  min-height: 44px;
  padding: 0 16px;
  background: #00B37D;
  color: #ffffff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
  flex-shrink: 0;
}
#sr-scroll-submit-btn:hover { background: #00A070; }
#sr-scroll-submit-btn:disabled { opacity: 0.6; cursor: default; }

/* Close button */
#sr-scroll-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.25rem;
  color: #6b7280;
  border-radius: 6px;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
#sr-scroll-close:hover { background: #f3f4f6; color: #0A0A0A; }

/* Error + success states */
#sr-scroll-error {
  display: none;
  font-size: 0.8rem;
  color: #ef4444;
  margin-top: 4px;
  font-family: 'DM Sans', sans-serif;
}

#sr-scroll-success {
  display: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #00B37D;
  text-align: center;
  padding: 4px 0;
}

/* Mobile: stack layout */
@media (max-width: 600px) {
  .sr-scroll-banner-inner {
    flex-wrap: wrap;
    gap: 10px;
  }
  .sr-scroll-banner-text {
    width: 100%;
  }
  #sr-scroll-email {
    width: 160px;
    max-width: 160px;
  }
  #sr-scroll-banner {
    padding: 12px 16px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   3. MOBILE BASELINE — 375px horizontal overflow fix
   Ensure no element causes horizontal scroll at narrow viewports.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* Kill overflow on common culprits */
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Tables */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

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

  /* Wide images and media */
  img, video, iframe, embed, object {
    max-width: 100% !important;
    height: auto;
  }

  /* Flex children that might overflow */
  .flex-nowrap,
  [style*="white-space: nowrap"],
  [style*="white-space:nowrap"] {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   4. TOUCH TARGETS — minimum 44×44px
   WCAG 2.5.5 compliance. Applied globally to interactive elements.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Buttons */
  button:not([style*="width"]),
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Anchor links used as buttons or standalone CTAs */
  a.btn,
  a.button,
  a[class*="btn-"],
  a[class*="-btn"],
  a[class*="cta"],
  .sr-cta-primary,
  .sr-cta-secondary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Radio and checkbox labels */
  label:has(input[type="checkbox"]),
  label:has(input[type="radio"]) {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Nav links */
  nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   5. BODY FONT SIZE — minimum 16px on mobile
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Body text paragraphs */
  p, li, td, dd, dt {
    font-size: max(16px, 1rem);
  }

  /* Input fields */
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   6. FOMO TICKER — enforce white background (design system v3.2)
   ══════════════════════════════════════════════════════════════════════════ */

#fomo-ticker {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  border-bottom: 1px solid #E5E7EB !important;
}

/* Ensure text inside ticker is dark (on white bg) */
#fomo-ticker .fomo-ticker-msg {
  color: #0A0A0A !important;
}

#fomo-ticker .fomo-ticker-num,
#fomo-ticker .fomo-ticker-msg a,
#fomo-ticker .fomo-live-badge {
  color: #00B37D !important;
}

#fomo-ticker .fomo-live-badge {
  background: #FFFFFF !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   7. PRICING PAGE — remove dark/navy backgrounds per v3.2
   ══════════════════════════════════════════════════════════════════════════ */

/* Override any leftover dark sections on /pricing */
.pricing-dark-section,
[style*="background: rgb(10, 22, 40)"],
[style*="background:rgb(10,22,40)"],
[style*="background: rgb(15, 23, 42)"],
[style*="background:rgb(15,23,42)"] {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   8. CLOSING-SOON CARDS — ensure $12.99 price is readable
   ══════════════════════════════════════════════════════════════════════════ */

.cs-file-price {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   9. COMMUNITY PAGE — prevent chat UI from overlapping hero/content
   ══════════════════════════════════════════════════════════════════════════ */

/* Community chat preview section z-index */
.ch-chat-preview {
  position: relative;
  z-index: 1;
}

/* Community forum modal above all chat elements */
.ch-forum-modal-overlay {
  z-index: 9100 !important;
  background: rgba(10, 15, 30, 0.5) !important;
}