/* ═══════════════════════════════════════════════════════════════════
   BUGFIX — Task #1161885: Pricing page broken — scroll, bubbles, cut-off

   Issues fixed:
     1. SCROLL — Comparison table at desktop uses overflow-x:hidden
        (line 3910 of pricing.ejs) which clips the table. Also adds
        defensive scroll rules as a safety net.
     2. MASSIVE BUBBLES — premium-refinement-1161399.css adds a
        700px×700px radial-gradient ::before to ALL .sp-hero elements
        globally via layout-head. Too large for pricing page hero.
     3. CONTENT CUT-OFF — overflow:hidden on card/container elements
        may clip content.

   Date: 2026-04-27
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   1. SCROLL SAFETY NET
   ───────────────────────────────────────────────────────── */

/* html controls the scrollbar — always allow scroll on Y, clip X */
html {
  overflow-y: scroll !important;
  overflow-x: hidden;
}

/* Body: let html handle scrolling. JavaScript modal code sets
   overflow on body but we want it to work correctly. */
body {
  overflow-y: auto !important;
  overflow-x: hidden;
}

/* Defensive: if JS sets overflow:hidden on body, auto still applies
   via !important (unless JS also uses !important, which it doesn't) */
body[style*="overflow: hidden"] {
  overflow-y: auto !important;
}

/* Pricing page main wrapper: never clip vertically */
#main-content.pricing-page-wrap {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* ─────────────────────────────────────────────────────────
   2. REMOVE MASSIVE .sp-hero::before BUBBLE FROM PRICING PAGE
   premium-refinement-1161399.css adds a 700×700px radial-gradient
   bubble via .sp-hero::before (global — applies to all pages).
   Scale it down dramatically for the pricing hero.
   ───────────────────────────────────────────────────────── */

/* The 700px bubble is for hub pages only. Pricing uses .sp-hero
   which also matches so we need to neutralize it here. */
#main-content.pricing-page-wrap .sp-hero::before,
.pricing-page-wrap .sp-hero::before {
  width: 80px !important;
  height: 80px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ─────────────────────────────────────────────────────────
   3. FIX COMPARISON TABLE DESKTOP OVERFLOW (THE MAIN CULPRIT)
   pricing.ejs line 3909-3910 sets overflow-x:hidden at desktop (769px+).
   This clips the table. Switch to auto to enable horizontal scroll.
   ───────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  #main-content.pricing-page-wrap .cmp-table-wrap {
    overflow-x: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────
   4. CONTENT VISIBILITY — remove overflow:hidden that clips
   Note: Some overflow:hidden is intentional (card ::before elements,
   section decorative bubbles). Only removing ones that genuinely
   clip visible content.
   ───────────────────────────────────────────────────────── */

/* Testimonial cards: the quote mark ::before is decorative, not clipped.
   Removing overflow:hidden just to be safe. */
#main-content.pricing-page-wrap .sp-testimonial-card {
  overflow: visible !important;
}

/* Comparison table inner container (if separate from .cmp-table-wrap) */
#main-content.pricing-page-wrap .cmp-table {
  overflow: visible !important;
}

/* Guarantee section: The decorative ::before bubble (300px at top-right)
   is clipped by overflow:hidden. This creates a partial-bubble look.
   Remove the bubble entirely — the guarantee section is fine without it. */
#main-content.pricing-page-wrap .sr-guarantee-section::before {
  display: none !important;
}

/* Guarantee section: keep overflow:hidden for layout containment,
   but ensure the section itself is fully visible. */
#main-content.pricing-page-wrap .sr-guarantee-section {
  overflow: visible !important;
}

/* Ensure the page-level footer area doesn't clip content */
#main-content.pricing-page-wrap footer,
#main-content.pricing-page-wrap .sr-footer-section {
  overflow: visible !important;
}

/* ─────────────────────────────────────────────────────────
   5. MOBILE SCROLL SAFETY
   ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  html {
    overflow-y: scroll !important;
  }

  #main-content.pricing-page-wrap {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}