/* ================================================================
 * Subscription popup (.planSec) overrides.
 *
 * The popup uses the shared partial pricing-page/partials/pricing-cards.php
 * which expects pricing-page/css/new-pricing.css. But the popup is also
 * styled by essay-page/css/plans.min.css (loaded site-wide), which contains
 * a lot of unscoped rules for .toggle-switch, .pricingCard, .price-wrap, etc.
 *
 * This file scopes the new dark-theme rules under .planSec with extra
 * specificity (.planSec .pricingSec ...) so they always beat plans.min.css.
 * ================================================================ */

/* ===== Modal wrapper: dark background instead of white ===== */
.planSec .planSecWrap {
  background: #0A0A0F !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.6) !important;
  background-image:
    radial-gradient(ellipse at top left, rgba(211, 6, 244, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(87, 0, 230, 0.08) 0%, transparent 50%) !important;
  max-width: 1180px !important;
  width: calc(100% - 30px) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
.planSec .planOverlay {
  background: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.planSec .planModal {
  height: auto !important;
  max-height: 82vh !important;
  background: transparent !important;
  overflow-y: auto !important;
}
.planSec .modalHead {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
  padding: 18px 0 !important;
}
.planSec span.closeModalBtn {
  top: 18px !important;
  right: 18px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #23233A !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .2s, border-color .2s !important;
}
.planSec span.closeModalBtn:hover {
  background: #1A1A26 !important;
  border-color: rgba(211, 6, 244, 0.32) !important;
}
.planSec span.closeModalBtn img {
  filter: brightness(0) invert(1) !important;
  opacity: .85 !important;
}
.planSec .absoluteLoginBtn {
  top: 14px !important;
  right: 64px !important;
  padding: 8px 18px !important;
  border-radius: 100px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  transition: border-color .2s, background .2s !important;
}
.planSec .absoluteLoginBtn:hover {
  background: rgba(211, 6, 244, 0.10) !important;
  border-color: rgba(211, 6, 244, 0.32) !important;
}
.planSec .absoluteLoginBtn .btnText {
  color: #A8A8B8 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.planSec .absoluteLoginBtn:hover .btnText { color: #ffffff !important; }

.planSec .plansWrapper {
  display: block !important;
  padding: 24px 36px 36px !important;
  background: transparent !important;
}

.planSec .plansWrapper .pricingSec {
  background: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.planSec .pew-hero-bg { display: none !important; }

/* ===== Toggle (override unscoped plans.min.css rules) ===== */
.planSec .toggle-switch {
  width: 56px !important;
  height: 30px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: #23233A !important;
  background-color: #23233A !important;
  border-radius: 100px !important;
  display: inline-block !important;
  position: relative !important;
  vertical-align: middle !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  transition: background .25s, border-color .25s, box-shadow .25s !important;
}
.planSec .toggle-switch:has(.toggle-input:checked) {
  background: #D306F4 !important;
  background-color: #D306F4 !important;
  border-color: #D306F4 !important;
  box-shadow: 0 0 14px rgba(211, 6, 244, 0.22) !important;
}
.planSec .toggle-label {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
  top: 0 !important;
  border-radius: 100px !important;
  font-family: inherit !important;
  font-size: 0 !important;
  color: transparent !important;
  background: transparent !important;
  transition: none !important;
  transform: none !important;
}
/* kill the wide light-purple slider from plans.min.css */
.planSec .toggle-label::before {
  content: none !important;
  display: none !important;
}
/* the new pill thumb (added by our updated markup) */
.planSec .toggle-thumb {
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 22px !important;
  height: 22px !important;
  background: #6B6B7B !important;
  border-radius: 50% !important;
  transition: transform .3s cubic-bezier(.4,0,.2,1), background .25s !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.4) !important;
  z-index: 2 !important;
  display: block !important;
}
.planSec .toggle-input:checked + .toggle-label .toggle-thumb {
  transform: translateX(26px) !important;
  background: #ffffff !important;
}
/* visually-hide the inner Monthly/Annual option spans (we use external labels) */
.planSec .toggle-label .option {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
}

.planSec .toggleSec {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin: 8px auto 28px !important;
  padding: 0 !important;
  flex-wrap: wrap !important;
  background: transparent !important;
  border: none !important;
  position: relative !important;
  width: auto !important;
  max-width: 100% !important;
}
.planSec .billing-side-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #6B6B7B !important;
  cursor: default !important;
  transition: color .2s !important;
  user-select: none !important;
}
.planSec .toggleSec:has(.toggle-input:not(:checked)) .billing-side-label.is-monthly { color: #ffffff !important; }
.planSec .toggleSec:has(.toggle-input:checked)       .billing-side-label.is-annually { color: #ffffff !important; }
.planSec .toggleSec:has(.toggle-input:checked)       .billing-side-label.is-monthly  { color: #6B6B7B !important; }
.planSec .toggleSec:has(.toggle-input:not(:checked)) .billing-side-label.is-annually { color: #6B6B7B !important; }

.planSec .billing-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 12px !important;
  background: #FACC15 !important;
  color: #1A1A26 !important;
  border-radius: 100px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 14px rgba(250, 204, 21, 0.2) !important;
  animation: pewModalPillBounce 2s ease-in-out infinite !important;
}
.planSec .billing-pill svg { width: 10px !important; height: 10px !important; flex-shrink: 0 !important; }
@keyframes pewModalPillBounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-3px); }
}
/* kill any leftover floating tooltip from old plans.min.css markup */
.planSec .toggleSec .tooltip { display: none !important; }

/* ===== Cards: kill the light .price-wrap from plans.min.css inside the popup ===== */
.planSec .pricingCard,
.planSec .pricingSec .pricingCard {
  background: #1A1A26 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.4) !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
.planSec .pricingCard.featured,
.planSec .pricingSec .pricingCard.featured {
  border-color: rgba(211, 6, 244, 0.32) !important;
  background: linear-gradient(160deg, rgba(211,6,244,0.10) 0%, #1A1A26 60%) !important;
  box-shadow: 0 0 0 1px rgba(211, 6, 244, 0.32), 0 24px 56px rgba(211, 6, 244, 0.18), 0 32px 64px rgba(0,0,0,.5) !important;
}
.planSec .pricingCard .price-wrap {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ===== CTA buttons inside popup cards =====
   plans.min.css applies a generic purple gradient to .btnContainer that
   overrides our per-card variants. Re-assert each variant scoped under
   .planSec so the popup matches the pricing page exactly. */

/* Standard — outlined purple */
.planSec .pricingCard.statPlan .btnContainer,
.planSec .pricingCard.statPlan .plan-cta.cta-standard {
  background: transparent !important;
  border: 1px solid rgba(211, 6, 244, 0.4) !important;
  color: #b44dff !important;
  box-shadow: none !important;
}
.planSec .pricingCard.statPlan .btnContainer:hover,
.planSec .pricingCard.statPlan .plan-cta.cta-standard:hover {
  background: rgba(211, 6, 244, 0.10) !important;
  border-color: #D306F4 !important;
  color: #ffffff !important;
}
.planSec .pricingCard.statPlan .btnContainer .startedBtn { color: inherit !important; }

/* Pro (featured) — filled purple gradient */
.planSec .pricingCard.basicPlan .btnContainer,
.planSec .pricingCard.basicPlan .plan-cta.cta-pro {
  background: linear-gradient(246.87deg, #D306F4 -2.66%, #5700E6 98.71%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 6px 22px rgba(211, 6, 244, 0.22) !important;
}
.planSec .pricingCard.basicPlan .btnContainer:hover,
.planSec .pricingCard.basicPlan .plan-cta.cta-pro:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 32px rgba(211, 6, 244, 0.45) !important;
}
.planSec .pricingCard.basicPlan .btnContainer .startedBtn { color: #ffffff !important; }

/* Premium — filled yellow */
.planSec .pricingCard.proPlancard .btnContainer,
.planSec .pricingCard.proPlancard .plan-cta.cta-premium {
  background: #FACC15 !important;
  border: none !important;
  color: #1A1A26 !important;
  box-shadow: 0 4px 18px rgba(250, 204, 21, 0.2) !important;
}
.planSec .pricingCard.proPlancard .btnContainer:hover,
.planSec .pricingCard.proPlancard .plan-cta.cta-premium:hover {
  transform: translateY(-2px) !important;
  background: #EAB308 !important;
  box-shadow: 0 10px 28px rgba(250, 204, 21, 0.4) !important;
}
.planSec .pricingCard.proPlancard .btnContainer .startedBtn { color: #1A1A26 !important; }

/* ===== Strikethrough price fix =====
   new-price-modal.js does $('.annualPlanPriceInfo').css('display','inline-block')
   which matches BOTH .monthInfo and .yearInfo. We only want one struck-through
   price visible on annual mode (the would-be-monthly total). Force .yearInfo
   to stay hidden via CSS so the JS inline style is overridden. */
.planSec .annualPlanPriceInfo.yearInfo { display: none !important; }

/* Responsive niceties */
@media (max-width: 1024px) {
  .planSec .planSecWrap { max-width: 92vw !important; }
}
@media (max-width: 680px) {
  .planSec .planSecWrap {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    border-radius: 16px !important;
  }
  .planSec .modalHead {
    font-size: 18px !important;
    text-align: left !important;
    padding: 14px 50px 14px 18px !important;
  }
  .planSec .plansWrapper { padding: 16px 14px 22px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .planSec *,
  .planSec *::before,
  .planSec *::after { animation: none !important; transition: none !important; }
}