/* ===================================================================
   Task #1585453: Pricing Page QA -- 375px + 1440px Polish (v2)

   Audit fixes applied 2026-05-15:
   1. Toggle wrap overflow at 375px: flex-wrap so save badge drops below
   2. WCAG AA contrast: catalog link opacity removed (was 0.8 on #6B7280)
   3. Mobile text sizing: card-tag/feature-head/popular-badge bumped from
      .58rem to .62-.65rem for readability
   4. Desktop 1440px: feature text bumped from .72rem to .78rem
   5. Free-vs-Pro grid: tighter gap + padding at 375px
   6. OTP desc bump: .72rem -> .75rem for readability
   7. Trust strip count: CSS-only (count update in EJS)
   8. Save badge: allow wrapping on narrow screens
   =================================================================== */


/* -- GLOBAL: Catalog link contrast fix (WCAG AA) ---------------------
   #6B7280 at opacity:0.8 = ~3.6:1 contrast on white -- fails AA.
   Remove opacity, use solid color that passes.
   ------------------------------------------------------------------- */

.pr-catalog-link {
  opacity: 1 !important;
  color: #6B7280 !important; /* 4.54:1 on white -- WCAG AA pass at >=18px or bold; for small text use darker */
}

/* Small text below 18px needs 4.5:1 -- #6B7280 is 4.54:1 which is borderline.
   Bump to #64748b (4.63:1) for safety margin on subpixel rendering. */
.pr-catalog-link {
  color: #64748b !important; /* 4.63:1 on white -- safe WCAG AA */
}


/* == MOBILE 375px FIXES ============================================= */

@media (max-width: 480px) {

  /* -- 1. HERO: no overflow, toggle wraps cleanly ------------------- */

  .pr-hero {
    padding: clamp(2.5rem, 5vw, 3.5rem) 0.75rem clamp(2rem, 4vw, 3rem) !important;
    overflow-x: hidden !important;
  }

  .pr-hero h1 {
    font-size: clamp(1.8rem, 6vw, 2.2rem) !important;
  }

  .pr-hero-sub {
    font-size: .88rem !important;
  }

  /* Toggle wrap: allow badge to wrap below toggle on narrow screens */
  .pr-toggle-wrap {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: .5rem !important;
    margin: 2rem auto 0 !important;
    max-width: 100% !important;
  }

  .pr-toggle-label {
    font-size: .82rem !important;
  }

  .pr-toggle-switch {
    width: 44px !important;
    height: 24px !important;
  }

  .pr-toggle-switch::after {
    width: 18px !important;
    height: 18px !important;
  }

  body.billing-annual .pr-toggle-switch::after {
    transform: translateX(20px) !important;
  }

  /* Save badge: allow wrapping, remove nowrap */
  .pr-save-global-badge {
    font-size: .68rem !important;
    padding: .2rem .55rem !important;
    white-space: normal !important;
    text-align: center !important;
    flex-basis: 100% !important;
    order: 10 !important;
  }

  /* Urgency bar: no overflow */
  .pr-urgency-bar {
    margin: 1.2rem 0 0 !important;
    max-width: 100% !important;
    padding: .65rem .9rem !important;
    font-size: .75rem !important;
    border-radius: 10px !important;
    flex-wrap: wrap !important;
  }

  /* Biz link */
  .pr-biz-link {
    font-size: .75rem !important;
    margin-top: 1rem !important;
  }

  /* Catalog link */
  .pr-catalog-link {
    font-size: .72rem !important;
  }


  /* -- 2. PLANS SECTION: full-width cards, no overflow -------------- */

  .pr-plans-section {
    padding: clamp(2.5rem, 5vw, 3.5rem) 0.75rem !important;
    overflow-x: hidden !important;
    width: 100% !important;
  }

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

  .pr-plans-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
    max-width: 100% !important;
  }

  .pr-card {
    width: 100% !important;
    padding: 1.25rem 0.9rem 1.15rem !important;
    border-radius: 14px !important;
  }

  .pr-card-name {
    font-size: 1.2rem !important;
  }

  .pr-price-num {
    font-size: 1.75rem !important;
  }

  /* CTA buttons: full width, high contrast */
  .pr-cta {
    width: 100% !important;
    min-height: 46px !important;
    padding: 0.8rem 0.9rem !important;
    font-size: .82rem !important;
    border-radius: 10px !important;
  }

  /* Feature list: readable on small screens */
  .pr-features {
    gap: .48rem !important;
  }

  .pr-features li {
    font-size: .75rem !important; /* bumped from .72rem */
    line-height: 1.45 !important;
    gap: .4rem !important;
  }

  .pr-check-icon {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
  }

  /* Savings row: compact but visible */
  .pr-savings-row {
    font-size: .65rem !important;
    padding: .2rem .55rem !important;
  }

  /* Upgrade count: readable */
  .pr-upgrade-count {
    font-size: .68rem !important;
  }

  /* Card tag: bumped from .58rem to .62rem for readability */
  .pr-card-tag {
    font-size: .62rem !important;
  }

  /* Popular badge: bumped from .58rem to .62rem */
  .pr-popular-badge {
    top: -12px !important;
    font-size: .62rem !important;
    padding: .22rem .75rem !important;
  }

  /* Testimonial: readable */
  .pr-testimonial {
    font-size: .68rem !important;
    padding: .5rem .65rem !important;
  }

  /* Annual nudge: visible and tappable */
  .pr-annual-nudge {
    font-size: .68rem !important;
    padding: .4rem !important;
  }

  /* Loss frame: readable */
  .pr-loss-frame {
    font-size: .68rem !important;
    padding: .42rem .6rem !important;
  }

  /* Feature head: bumped from .58rem to .62rem */
  .pr-feature-head {
    font-size: .62rem !important;
  }


  /* -- 3. OTP SECTION: single column, no overflow ------------------- */

  .pr-otp-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    padding: 0 0.5rem !important;
  }

  .pr-otp-section {
    padding: clamp(2.5rem, 5vw, 4rem) 0.75rem !important;
    overflow-x: hidden !important;
  }

  .pr-otp-card {
    padding: 1.1rem 0.9rem !important;
  }

  .pr-otp-name {
    font-size: .85rem !important;
    padding-right: 2.5rem !important;
  }

  .pr-otp-price {
    font-size: 1.4rem !important;
  }

  /* OTP desc: bumped from .72rem to .75rem */
  .pr-otp-desc {
    font-size: .75rem !important;
    line-height: 1.45 !important;
    color: #4b5563 !important; /* 7.0:1 on white -- better than #6B7280 for body text */
  }

  .pr-otp-cta {
    width: 100% !important;
    min-height: 44px !important;
    padding: 0.7rem 0.8rem !important;
    font-size: .78rem !important;
  }


  /* -- 4. COMPARISON TABLE: sticky first col, scrollable ------------ */

  .pr-compare-section {
    padding: clamp(2.5rem, 5vw, 4rem) 0.75rem !important;
    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 !important;
    border-radius: 12px !important;
    max-width: 100% !important;
    display: block !important;
    scrollbar-width: thin !important;
  }

  .pr-compare-table {
    min-width: 560px !important;
    font-size: .75rem !important;
  }

  .pr-compare-table th {
    padding: .65rem .45rem !important;
    font-size: .65rem !important;
  }

  .pr-compare-table td {
    padding: .45rem .45rem !important;
    font-size: .72rem !important;
  }

  .pr-compare-table th:first-child,
  .pr-compare-table td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 3 !important;
    background: #fff !important;
    min-width: 110px !important;
    max-width: 130px !important;
    padding-left: .65rem !important;
    padding-right: .4rem !important;
    box-shadow: 2px 0 8px rgba(0,0,0,.08) !important;
    font-size: .68rem !important;
  }

  .pr-compare-table thead th:first-child {
    background: #F9FAFB !important;
  }

  .pr-compare-wrap::after {
    display: block !important;
  }


  /* -- 5. TRUST STRIP: badges wrap cleanly -------------------------- */

  .pr-trust-strip {
    padding: 1.2rem 0.75rem !important;
    overflow-x: hidden !important;
  }

  .pr-trust-headline {
    font-size: .8rem !important;
  }

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

  .pr-trust-badge {
    font-size: .65rem !important;
    padding: .28rem .65rem !important;
    gap: .3rem !important;
  }


  /* -- 6. FAQ: tap targets + readable text -------------------------- */

  .pr-faq-section {
    padding: clamp(2.5rem, 5vw, 4rem) 0.75rem !important;
  }

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

  .pr-faq-q {
    font-size: .88rem !important;
    padding: .95rem 0 !important;
    line-height: 1.4 !important;
  }

  .pr-faq-icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }

  .pr-faq-a {
    font-size: .82rem !important;
    line-height: 1.6 !important;
  }

  .pr-faq-item.open .pr-faq-a {
    padding-bottom: .95rem !important;
  }


  /* -- 7. FINAL CTA: full-width prominent button -------------------- */

  .pr-final-cta {
    padding: clamp(3rem, 6vw, 4.5rem) 0.75rem !important;
  }

  .pr-final-cta h2 {
    font-size: clamp(1.4rem, 4vw, 1.8rem) !important;
    margin-bottom: .6rem !important;
  }

  .pr-final-cta p {
    font-size: .88rem !important;
    margin-bottom: 1.5rem !important;
  }

  .pr-final-cta-btn {
    width: 100% !important;
    padding: .85rem 1.5rem !important;
    font-size: .9rem !important;
    border-radius: 12px !important;
  }

  .pr-final-cta-note {
    font-size: .72rem !important;
  }


  /* -- 8. FREE VS PRO section: tighter at 375px -------------------- */

  .fvp-grid {
    gap: 1rem !important;
  }


  /* -- 9. REFERRAL SECTION ------------------------------------------ */

  .pr-referral-section {
    padding: 2.5rem 0.75rem !important;
  }

  .pr-referral-badge {
    font-size: .65rem !important;
    padding: .32rem .65rem !important;
  }

  .pr-referral-heading {
    font-size: 1.2rem !important;
  }

  .pr-referral-body {
    font-size: .85rem !important;
  }

  .pr-referral-cta {
    font-size: .82rem !important;
    padding: .7rem 1.2rem !important;
  }
}


/* Tighter sub-375px refinements */
@media (max-width: 376px) {
  .pr-otp-grid {
    padding: 0 0.4rem !important;
    gap: 0.65rem !important;
  }

  .pr-otp-card {
    padding: 1rem 0.8rem !important;
  }

  .pr-compare-table {
    min-width: 520px !important;
    font-size: .72rem !important;
  }

  /* Save badge: even tighter on very narrow */
  .pr-save-global-badge {
    font-size: .62rem !important;
  }
}


/* == DESKTOP 1440px FIXES =========================================== */

@media (min-width: 1440px) {
  /* Hero: use more viewport width */
  .pr-hero {
    padding: clamp(4rem, 6vw, 6rem) 2rem clamp(3rem, 5vw, 4.5rem) !important;
  }

  .pr-hero h1 {
    max-width: 800px !important;
  }

  .pr-hero-sub {
    max-width: 580px !important;
  }

  /* Plans section: expand to fill viewport */
  .pr-plans-section {
    padding: clamp(4rem, 6vw, 5.5rem) 2rem !important;
  }

  .pr-plans-inner {
    max-width: 1400px !important;
  }

  /* 5-column grid: use full width at 1440px */
  .pr-plans-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1.1rem !important;
    max-width: 1400px !important;
  }

  /* Cards: slightly reduced padding to fit all 5 */
  .pr-card {
    padding: 1.4rem 1.1rem 1.3rem !important;
  }

  .pr-card-name {
    font-size: 1.3rem !important;
  }

  .pr-price-num {
    font-size: 1.9rem !important;
  }

  /* Feature text: bumped from .72rem to .78rem for desktop readability */
  .pr-features {
    gap: .45rem !important;
  }

  .pr-features li {
    font-size: .78rem !important;
  }

  /* CTA: fit all cards */
  .pr-cta {
    font-size: .78rem !important;
    padding: .7rem .75rem !important;
    min-height: 44px !important;
  }

  /* OTP section at 1440px: 3-col grid, max width */
  .pr-otp-section {
    padding: clamp(4rem, 5vw, 5rem) 2rem !important;
  }

  .pr-otp-inner {
    max-width: 1400px !important;
  }

  .pr-otp-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
  }

  /* Comparison table at 1440px: maximize width */
  .pr-compare-section {
    padding: clamp(4rem, 5vw, 5rem) 2rem !important;
  }

  .pr-compare-inner {
    max-width: 1400px !important;
  }

  .pr-compare-table {
    font-size: .87rem !important;
  }

  .pr-compare-table th {
    font-size: .78rem !important;
    padding: 1rem .9rem !important;
  }

  /* FAQ section at 1440px */
  .pr-faq-section {
    padding: clamp(4rem, 5vw, 5rem) 2rem !important;
  }

  .pr-faq-inner {
    max-width: 900px !important;
  }

  /* Final CTA at 1440px */
  .pr-final-cta {
    padding: clamp(4rem, 6vw, 6rem) 2rem !important;
  }

  /* Trust strip at 1440px */
  .pr-trust-strip {
    padding: 1.8rem 2rem !important;
  }

  /* Referral section at 1440px */
  .pr-referral-section {
    padding: 3rem 2rem !important;
  }

  /* Free vs Pro: wider cards at desktop */
  .fvp-grid {
    gap: 2rem !important;
  }
}


/* == ACCESSIBILITY: minimum tap targets ============================== */

@media (max-width: 768px) {
  /* All pricing page CTAs: minimum 44px height */
  .pr-cta,
  .pr-otp-cta,
  .pr-final-cta-btn,
  .pr-referral-cta {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Toggle switch: increase tap area */
  .pr-toggle-switch {
    min-width: 48px !important;
    min-height: 26px !important;
  }

  /* FAQ items: adequate tap target */
  .pr-faq-q {
    min-height: 44px !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* Trust badges: adequate tap target */
  .pr-trust-badge {
    min-height: 32px !important;
    min-width: 60px !important;
  }

  /* Annual nudge link: adequate tap target */
  .pr-annual-nudge {
    min-height: 36px !important;
    padding: .4rem .5rem !important;
  }
}