/* static-pricing-fixes.css — injected into static /pricing/ + /ar/pricing/
   (inc/paid-landing-static-server.php → rp_static_inject_home_footer_css).
   Two fixes vs the Figma on-scroll frame (8222:38500) + current live:

   1. STICKY tier header didn't pin. `.rp-body { overflow:auto }` (a theme rule that
      doesn't exist on live) made .rp-body the sticky containing block, so Webflow's
      `top:10%` resolved against the ~7000px page height (~705px) instead of the
      viewport — the header scrolled away. Drop the overflow so the viewport is the
      scroll container again, and pin with a fixed top below the sticky nav.

   2. Comparison "Get started" buttons render teal (`.dark-green-btn` — the snapshot
      predates live's switch to blue). Figma/live: outline blue by default, with the
      highlighted EOR column (3rd) filled solid blue. */

/* 1. Sticky comparison tier header */
body.rp-body { overflow: visible !important; }
body.rp-body .comparison-table-brands-main-header { top: 88px !important; z-index: 40; }

/* 2. Comparison tier buttons → blue (outline default) */
body.rp-body .pricing-comparison-table-td-container .btn.pricing.dark-green-btn {
  background-color: #F0F4FE !important;
  border: 1px solid #114EF7 !important;
  color: #114EF7 !important;
}
/* highlighted EOR column (3rd of 4) → filled blue */
body.rp-body .pricing-comparison-table-td-container .comparison-table-td:nth-child(3) .btn.pricing.dark-green-btn {
  background-color: #114EF7 !important;
  border-color: #114EF7 !important;
  color: #FFFFFF !important;
}

/* 3. Key Features / All Features toggle → blue segmented (teal dark-green-btn → blue).
   Figma: active = white box + blue border/text, inactive = plain grey. */
body.rp-body .pricing-comparison-table-td-filter-btn.btn.pricing.dark-green-btn {
  background-color: transparent !important;
  border: 1px solid transparent !important;
  color: #6B7280 !important;
}
body.rp-body .pricing-comparison-table-td-filter-btn.active.btn.pricing.dark-green-btn {
  background-color: #FFFFFF !important;
  border: 1px solid #114EF7 !important;
  color: #114EF7 !important;
}

/* === 4. Pricing TIER CARDS (top of page) — Figma 8200:41990 ================
   Order: Figma = Contractors · Contractor of Record · Employer of Record · Local
   Payroll. The snapshot has Local Payroll (nth-child 3) and EOR (nth-child 4)
   SWAPPED — reorder via CSS grid `order`. Buttons: teal dark-green-btn → blue
   (outline default, EOR filled solid blue). */
body.rp-body .pricing-grid > .new-pricing-col:nth-child(3) { order: 4; } /* Local Payroll → last */
body.rp-body .pricing-grid > .new-pricing-col:nth-child(4) { order: 3; } /* EOR → 3rd */

body.rp-body .new-pricing-col .btn.pricing.dark-green-btn {
  background-color: #F0F4FE !important;
  border: 1px solid #114EF7 !important;
  color: #114EF7 !important;
}
/* EOR card (DOM nth-child 4) button → filled blue */
body.rp-body .pricing-grid > .new-pricing-col:nth-child(4) .btn.pricing.dark-green-btn {
  background-color: #114EF7 !important;
  border-color: #114EF7 !important;
  color: #FFFFFF !important;
}

/* #4 (Greg batch 2, 2026-07-05): reviews swiper horizontal overflow at mobile.
   The reviews carousel's off-screen `.review-card.swiper-slide` slides extend to
   right≈4522px; on staging pricing that produced ~565px of page-wide horizontal
   scroll at 360 (the swiper container renders overflow-x:visible). Clip the
   container so parked slides don't push page width. :has() targets ONLY the reviews
   carousel (never other swipers). This file is the pricing-only sheet (qa-fixes-*
   are skipped on pricing via $qa_pages_skip), so the fix stays pricing-scoped. */
.slider.swiper-container:has(.review-card) { overflow-x: hidden; max-width: 100%; }