/* ═══════════════════════════════════════════════════════════════════
   Task #1565109: FIX — /pricing 49px mobile overflow + stacking bottom bars + hero search bar

   Bug 1: /pricing page has 49px horizontal overflow on mobile (375px)
   Root cause: body lacks overflow-x:hidden at mobile widths.
   The pr-page has overflow-x:hidden but body still scrolls.
   Fix: Add body-level overflow-x:hidden for pricing page at 375px.
        Also constrain the comparison table wrapper to stay within viewport.

   Bug 2: Multiple fixed-bottom elements can stack (>100px combined)
   The cookie consent (56px, z:10000) and mobile CTA bar (56px, z:9000)
   can both appear at bottom:0, consuming up to ~112px of viewport.
   Fix: When cookie consent is visible, ensure mobile CTA bar doesn't add
        more than 44px. Cookie consent takes priority (higher z-index).
        Also cap body padding-bottom to prevent content from being
        pushed behind fixed bars on mobile.

   Bug 3: Hero search bar has zero dimensions on mobile
   Fix: Ensure sr-hero search form has proper height at 375px.
        Add explicit min-height to prevent zero-height collapse.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   Bug 1: /pricing — prevent body-level horizontal scroll at 375px
   ───────────────────────────────────────────────────────────────── */

/* Constrain body-level overflow on mobile for all pages.
   This is the key fix: even if .pr-page clips content visually,
   the body element itself must not create horizontal scroll. */
@media (max-width: 480px) {
  /* Global body constraint */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Ensure .pr-page doesn't expand beyond viewport */
  .pr-page {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  /* Comparison table: ensure wrapper doesn't expand beyond parent.
     The table has min-width:520px at mobile. The wrapper must scroll
     internally without expanding the body. */
  .pr-compare-section {
    overflow-x: hidden !important;
  }

  .pr-compare-inner {
    overflow-x: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .pr-compare-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    /* Ensure the scrollbar doesn't expand layout */
    display: block;
    scrollbar-width: thin;
  }

  /* Constrain OTP grid to prevent overflow at 375px */
  .pr-otp-section {
    overflow-x: hidden !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .pr-otp-inner {
    overflow-x: hidden !important;
  }

  /* Plans section: ensure no overflow */
  .pr-plans-section {
    overflow-x: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }

  .pr-plans-inner {
    padding: 0 0.75rem !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Trust strip: constrain on mobile */
  .pr-trust-strip {
    overflow-x: hidden !important;
    padding: 1rem 0.75rem !important;
  }

  .pr-trust-strip-inner {
    padding: 0 !important;
  }

  .pr-trust-badges {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    justify-content: center !important;
  }

  /* Social proof ticker on pricing: constrain */
  .sp-ticker-wrap,
  .spt-wrap {
    overflow-x: hidden !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Referral section */
  .pr-referral-section {
    overflow-x: hidden !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .pr-referral-inner {
    padding: 0 !important;
  }

  /* FAQ section */
  .pr-faq-section {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .pr-faq-inner {
    padding: 0 !important;
  }

  /* Hero section on pricing page */
  .pr-hero {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* Extra strict constraint at 375px (iPhone SE) */
@media (max-width: 376px) {
  .pr-page {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* OTP grid: single column to avoid any overflow */
  .pr-otp-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Comparison table: reduce min-width at 375px */
  .pr-compare-table {
    min-width: 480px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────
   Bug 2: Fixed-bottom elements — cap combined height at 100px
   ───────────────────────────────────────────────────────────────── */

/* Cookie consent: z:10000, shown first, dismissible.
   When visible, it occupies ~56px from bottom. */
#sr-cookie-consent {
  z-index: 10000 !important;
}

/* Mobile CTA bar: z:9000, shown after 300px scroll.
   When BOTH are visible (cookie not dismissed), cap mobile CTA
   bar to max 44px so combined ≤ 100px.
   Use a class added by JS when cookie is visible. */
@media (max-width: 768px) {
  #sr-mobile-cta-bar {
    z-index: 9000 !important;
    /* When cookie consent is showing, reduce height */
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* The mobile CTA bar has min-height:44px on the anchor/button.
     When combined with cookie consent, total = 56px + 56px = 112px.
     If cookie is visible, mobile CTA bar can still show below it.
     The body padding-bottom should be 0 — fixed bars overlay content.
     Cap combined height at 100px by ensuring mobile-cta-bar shows
     only when cookie consent has been dismissed or is not present. */
  body.sr-cookie-visible #sr-mobile-cta-bar {
    /* When cookie consent is visible (sr-cookie-visible class added by JS),
       the mobile CTA bar should be hidden or reduced */
    display: flex !important;
    /* But we don't hide it — both can show. The combined height
       at max = 56px (cookie) + 56px (CTA) = 112px.
       Task says "no more than 100px simultaneously". */
  }

  /* Instead: when cookie is visible, hide the mobile CTA bar
     to keep combined at ~56px (cookie only) */
  body.sr-cookie-visible #sr-mobile-cta-bar {
    display: none !important;
  }

  /* When cookie is dismissed, show mobile CTA bar */
  body.sr-cookie-dismissed #sr-mobile-cta-bar {
    display: flex !important;
  }
}

/* Announcement bar (drop banner): top of page, not bottom.
   No conflict with bottom fixed bars. */


/* ─────────────────────────────────────────────────────────────────
   Bug 3: Hero search bar — ensure visible with proper dimensions at 375px
   ───────────────────────────────────────────────────────────────── */

/* sr-hero search form and wrap: ensure minimum height on mobile */
@media (max-width: 480px) {
  .sr-hero__search-form {
    /* Block element with margin-top. Ensure width constraint. */
    max-width: calc(100vw - 1.5rem) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .sr-hero__search-wrap {
    /* Flex column layout at mobile.
       Ensure minimum height so it doesn't collapse to 0. */
    min-height: 56px !important;
    flex-direction: column !important;
    padding: 12px !important;
    gap: 8px !important;
    /* Ensure the wrap itself has visible height */
    align-items: stretch !important;
  }

  .sr-hero__search-icon {
    display: none !important;
  }

  .sr-hero__search-input {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 12px !important;
    text-align: center !important;
    /* Prevent iOS zoom on focus */
    font-size: 16px !important;
  }

  .sr-hero__search-btn {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
  }

  .sr-hero__search-proof {
    display: block !important;
  }
}

/* At 375px: ensure search form doesn't have 0 height */
@media (max-width: 376px) {
  .sr-hero__search-form {
    display: block !important;
    min-height: 56px !important;
  }

  .sr-hero__search-wrap {
    min-height: 56px !important;
    /* Ensure content inside creates height */
  }

  /* If search form has display:none via inline style, it's intentional.
     Otherwise, ensure it's visible. */
  .sr-hero__search-form:not([style*="display: none"]):not([style*="display:none"]) {
    display: block !important;
    visibility: visible !important;
  }
}