/*
 * Pricing Page Premium Design — Task #1162519
 * Clean hero, enhanced cards, smooth toggle, comparison table scroll
 * Mobile-first — no overflow:hidden on full-page containers
 */

/* ── Hero — cleaner, no massive decorative elements ─── */
#main-content.pricing-page-wrap .pricing-hero {
  padding: clamp(2.5rem,5vw,4rem) clamp(1.25rem,4vw,2.5rem) clamp(2rem,4vw,3rem) !important;
}

/* Remove any decorative bubble pseudo-elements on hero */
#main-content .sp-hero.pricing-hero::before,
#main-content .sp-hero.pricing-hero::after {
  display: none !important;
}
.sp-hero-bubble,
.sp-hero-orb,
.sp-hero-decoration,
.sp-hero-decor,
.sp-bubble {
  display: none !important;
}

/* ── Pricing hero badge — premium polish ────────────── */
#main-content .sp-hero.pricing-hero .sp-hero-badge {
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  padding: 0.5rem 1.2rem !important;
  border-radius: 999px !important;
}

/* ── Billing toggle — smooth animated switch ─────────── */
.sp-billing-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem 1.5rem 0.5rem !important;
  overflow: visible !important;
}

/* Toggle track */
.sp-toggle-track,
[role="switch"],
.toggle-switch,
.billing-toggle {
  transition: background 0.25s ease !important;
}

/* Toggle label animations */
.sp-toggle-label,
.billing-label-monthly,
.billing-label-annual {
  transition: color 0.2s ease, font-weight 0.2s ease !important;
}

/* Annual toggle — highlight save pill */
.saving-annual,
.annual-save-badge {
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* ── Pricing cards — enhanced elevation + hover ──────── */
.prc-card {
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease !important;
}

/* Default card hover — stronger lift */
.prc-card:hover {
  border-color: #bfdbfe !important;
  box-shadow: 0 8px 28px rgba(37,99,235,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
  transform: translateY(-3px) !important;
}

/* Pro card — keep the featured elevation on hover */
.prc-card--pro:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 16px 48px rgba(37,99,235,0.25), 0 4px 16px rgba(0,0,0,0.08) !important;
}

/* Pro Plus hover */
.prc-card--proplus:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 20px 56px rgba(37,99,235,0.28), 0 6px 20px rgba(0,0,0,0.08) !important;
}

/* Free card hover */
.prc-card:not(.prc-card--pro):not(.prc-card--proplus):not(.prc-card--family):hover {
  border-color: #d1d5db !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
  transform: translateY(-3px) !important;
}

/* ── CTA buttons — shimmer effect on primary ─────────── */
.prc-cta--primary,
.prc-cta--indigo,
.prc-cta--gold {
  position: relative;
  overflow: hidden;
}
.prc-cta--primary::before,
.prc-cta--indigo::before,
.prc-cta--gold::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.22) 50%,
    transparent 100%
  );
  animation: prcCtaShimmer 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes prcCtaShimmer {
  0%   { left: -100%; }
  55%  { left: 200%; }
  100% { left: 200%; }
}

/* ── Pro CTA pulse — breathing glow ──────────────────── */
.prc-card--pro .prc-cta--primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
}

/* ── Comparison table — mobile horizontal scroll ─────── */
/* cmp-section overflow-x removed in pricing.ejs; table-wrap already has overflow-x:auto */

/* Ensure table wrapper scrolls correctly */
.cmp-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  /* Prevent any parent from clipping this */
  position: relative;
}

/* Scroll hint — more visible on mobile */
.cmp-scroll-hint {
  background: rgba(37,99,235,0.06);
  border: 1px solid rgba(37,99,235,0.12);
  border-radius: 20px;
  padding: 0.3rem 0.8rem;
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600 !important;
  color: #2563eb !important;
}
@media (max-width: 511px) {
  .cmp-scroll-hint { display: none !important; }
}
@media (max-width: 640px) {
  .cmp-scroll-hint { display: inline-flex !important; }
  /* Table minimum width so it scrolls on small screens */
  .cmp-table {
    min-width: 560px !important;
  }
}

/* ── Comparison table — premium header styles ─────────── */
.cmp-table th {
  font-size: 0.82rem !important;
  padding: 1rem 0.85rem !important;
}
.cmp-table th.cmp-th--pro {
  background: rgba(37,99,235,0.06) !important;
}

/* ── Comparison section title — Space Grotesk ────────── */
.cmp-title {
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif !important;
  font-size: clamp(1.6rem, 3.5vw, 2rem) !important;
}

/* ── Guarantee section — more premium ───────────────── */
.sr-guarantee-section {
  background: linear-gradient(135deg, #f0f7ff 0%, #f8fafc 100%) !important;
  border-top: 2px solid rgba(37,99,235,0.1) !important;
}

/* ── Pricing social bar — better contrast ────────────── */
.pricing-social-bar {
  font-size: 0.85rem !important;
}

/* ── Pricing grid — extra breathing room ─────────────── */
.prc-grid {
  padding: clamp(2rem,4vw,3rem) clamp(1rem,4vw,2rem) !important;
  gap: 1.25rem !important;
}
@media (max-width: 768px) {
  .prc-grid { gap: 1rem !important; }
  /* Cards don't translate on mobile — they stack cleanly */
  .prc-card--pro,
  .prc-card--proplus {
    transform: none !important;
  }
  .prc-card--pro:hover,
  .prc-card--proplus:hover {
    transform: translateY(-3px) !important;
  }
}

/* ── ROI banner — cleaner ──────────────────────────────── */
.roi-banner {
  border-top: 1px solid rgba(37,99,235,0.08) !important;
  border-bottom: 1px solid rgba(37,99,235,0.08) !important;
}

/* ── Hero heading — Space Grotesk ───────────────────── */
#main-content .sp-hero.pricing-hero h1 {
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif !important;
  font-size: clamp(2.2rem, 5.5vw, 3.25rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.08 !important;
}

/* ── Mobile: full breathing room ─────────────────────── */
@media (max-width: 480px) {
  #main-content.pricing-page-wrap .pricing-hero {
    padding: 2rem 1rem 1.5rem !important;
  }
  .prc-grid {
    padding: 1.25rem 0.75rem 1rem !important;
  }
}