/* ============================================================
   PLANS & PRICING PAGE — page-specific chrome only.
   Structural port of `plans.jsx` + `plan-options.jsx` (couple-website-markup
   repo). Base layout is inline in `templates/pages/plans.php` (matching the
   reference's own inline-style-heavy JSX — same "chrome is inline" note the
   shared `.plan-nav*`/`.plan-block*`/`.compare-*` responsive rules in
   styles.css already carry). Everything below is the piece that isn't:
   named-class base recipes and the no-JS toggle mechanism.

   NO-JS TERM/TICKET TOGGLE (03_PAGE_DATA_CONTRACTS.md §1.3): the reference
   swaps price/features/CTA via React state. This port uses a real
   `role="radiogroup"` of radio inputs + `:has()` to show the matching
   `.plan-option-panel` — works with JS disabled, same "native control
   first" rule as the FAQ accordion's `<details>`. Panel ids are option ids
   (`1mo`/`3mo`/`6mo`/`1`/`5`), scoped by each `.plan-block` so the same
   option id in two different plans' toggles never collides.
   ============================================================ */

/* ---------- STICKY PLAN NAV ---------- */
.plan-nav-item { color: var(--fg-heading); transition: background 200ms ease, padding 240ms ease, gap 240ms ease; }
.plan-nav-item .sub { color: var(--ink-500); }
.plan-nav-item.is-active { background: var(--couple-purple); }
.plan-nav-item.is-active .label,
.plan-nav-item.is-active .sub { color: #fff; }
.plan-nav-wrap.is-stuck .plan-nav { box-shadow: var(--shadow-elevated); }

/* "Compact on stuck" pill morph — ported verbatim from `Plans & Pricing.html`'s
   own page-local <style> block (not the shared design-system styles.css,
   same "page-local chrome" convention Sign In's own CSS follows). Toggled
   by public/assets/js/plans.js alongside the `.is-stuck` class it already
   applies on scroll. */
.plan-nav-wrap { transition: padding 240ms cubic-bezier(.2,.8,.2,1), background 240ms ease, box-shadow 240ms ease, backdrop-filter 240ms ease; }
.plan-nav { transition: max-width 240ms cubic-bezier(.2,.8,.2,1), padding 240ms ease, box-shadow 240ms ease, border-radius 240ms ease; }
.plan-nav-item .label { transition: font-size 200ms ease; }
.plan-nav-item .sub { transition: opacity 180ms ease, max-height 240ms ease, margin 240ms ease; }
.plan-nav-dot {
  display: none;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: none;
}
.plan-nav-wrap.is-stuck.compact .plan-nav-item {
  flex-direction: row !important;
  gap: 12px;
  padding: 12px 14px;
}
.plan-nav-wrap.is-stuck.compact .plan-nav-dot { display: block; }
.plan-nav-wrap.is-stuck.compact .plan-nav-item.is-active .plan-nav-dot { background: var(--couple-yellow) !important; }
.plan-nav-wrap.is-stuck.compact .plan-nav-item .sub {
  opacity: 0;
  max-height: 0;
  margin: 0;
  overflow: hidden;
}

/* ---------- SEGMENTED TOGGLE (term / ticket quantity) ---------- */
.seg-toggle {
  display: inline-flex;
  gap: 0;
  background: #fff;
  border: var(--border-hairline) solid var(--ink-100);
  border-radius: var(--r-pill);
  padding: 4px;
  box-shadow: var(--shadow-subtle);
  max-width: 100%;
  flex-wrap: wrap;
}
.seg-toggle-radio {
  /* Visually hidden but still focusable/operable — a real radio, not
     display:none, so keyboard + assistive-tech semantics stay intact. */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.seg-toggle-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font: 700 16px var(--font-display);
  letter-spacing: -0.1px;
  white-space: nowrap;
  color: var(--fg-heading);
  transition: background 160ms ease, color 160ms ease;
}
.seg-toggle-item:hover { background: var(--lavender-hover); }
.seg-toggle-radio:checked + .seg-toggle-item {
  background: var(--couple-purple);
  color: #fff;
}
.seg-toggle-radio:checked + .seg-toggle-item:hover { background: var(--couple-purple-hover); }
.seg-toggle-save {
  font: 700 12px/1 var(--font-display);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--couple-purple);
}
.seg-toggle-radio:checked + .seg-toggle-item .seg-toggle-save { color: var(--couple-yellow); }
.seg-toggle-radio:focus-visible + .seg-toggle-item { outline: 2px solid var(--couple-purple); outline-offset: 2px; }

/* Option panels — only the one matching the checked radio in this plan's
   toggle renders. `:has()` support: all current evergreen browsers. */
.plan-option-panel { display: none; }
.plan-block:has(.seg-toggle-radio[value="1mo"]:checked) .plan-option-panel[data-panel="1mo"],
.plan-block:has(.seg-toggle-radio[value="3mo"]:checked) .plan-option-panel[data-panel="3mo"],
.plan-block:has(.seg-toggle-radio[value="6mo"]:checked) .plan-option-panel[data-panel="6mo"],
.plan-block:has(.seg-toggle-radio[value="1"]:checked) .plan-option-panel[data-panel="1"],
.plan-block:has(.seg-toggle-radio[value="5"]:checked) .plan-option-panel[data-panel="5"] {
  display: block;
}

/* ---------- PRICE / FEATURES / CTA ---------- */
.plan-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 24px 0 0;
  flex-wrap: wrap;
}
.plan-price { font: var(--type-h1); letter-spacing: -0.8px; }
.plan-price-unit { font: 500 20px/1 var(--font-body); color: var(--ink-500); }
.plan-unit-note {
  font: 700 20px/1 var(--font-display);
  color: var(--couple-purple);
  letter-spacing: -0.2px;
  margin: 12px 0 0;
}
.plan-features-block { margin: 32px 0 0; }
.plan-feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.plan-feature { display: flex; align-items: flex-start; gap: 14px; font: var(--type-body-sm); color: var(--ink-700); }
.plan-feature-check {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--couple-purple);
  display: grid; place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.plan-cta-block { margin-top: 40px; }
.plan-fine-print { font: var(--type-body-sm); color: var(--ink-500); margin: 16px 0 0; max-width: 460px; }
.plan-mockup-img { display: block; width: 100%; height: auto; }

/* ---------- TOP-UPS (Couple Coins banner) ---------- */
.coinbar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 28px 40px;
  border-radius: var(--r-card-lg);
  background: var(--grad-cta-purple);
  box-shadow: var(--shadow-card);
}
.coinbar-medallion {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,0.14);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.coinbar-text { flex: 1; min-width: 0; }
.coinbar-title { font: var(--type-h3); color: #fff; }
.coinbar-sub { font: var(--type-body-sm); color: rgba(255,255,255,0.85); margin: 6px 0 0; max-width: 560px; }
.coinbar-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.coinbar-price { font: 700 24px var(--font-display); color: #fff; }

/* ---------- COMPARE TABLE ---------- */
.compare-cell { border-top: none; border-bottom: none; }
.compare-scroll::-webkit-scrollbar { height: 6px; }
.plan-compare-check {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-grid; place-items: center;
}
.plan-compare-dash { width: 26px; height: 2px; background: var(--ink-200); display: inline-block; border-radius: 4px; }

/* ---------- PLANS FAQ (native <details>, same recipe as faq.css) ---------- */
.plans-faq-item {
  border-radius: var(--r-card-sm);
  border: var(--border-hairline) solid var(--ink-100);
  background: #fff;
  overflow: hidden;
  transition: background 200ms ease, border-color 200ms ease;
}
.plans-faq-item:hover { border-color: var(--lavender-border); }
.plans-faq-item[open] { background: var(--lavender); border-color: var(--lavender-border); }
.plans-faq-q {
  width: 100%;
  display: flex; align-items: center; gap: 20px;
  padding: 20px 24px;
  background: transparent; border: 0; cursor: pointer;
  text-align: left;
  list-style: none;
}
.plans-faq-q::-webkit-details-marker { display: none; }
.plans-faq-q::marker { content: ""; }
.plans-faq-q-text {
  flex: 1;
  font: 700 20px/1.4 var(--font-display);
  color: var(--fg-heading);
  letter-spacing: -0.2px;
}
.plans-faq-item[open] .plans-faq-q-text { color: var(--couple-purple-dark); }
.plans-faq-q-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--lavender-hover);
  color: var(--couple-purple);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background 200ms ease, color 200ms ease, transform 240ms ease;
}
.plans-faq-item[open] .plans-faq-q-icon { background: var(--couple-purple); color: #fff; transform: rotate(45deg); }
.plans-faq-a { padding: 0 24px 24px; font: var(--type-body); color: var(--couple-purple-dark); }
.plans-faq-a p { margin: 0 0 16px; }
.plans-faq-a p:last-child { margin-bottom: 0; }

/* ============================================================
   RESPONSIVE — follows the project's 1100/900/768/640 cadence. The
   shared `.plan-nav*`/`.plan-block*`/`.compare-section` breakpoints
   already live in styles.css (Batch 0 port); only this page's own
   classes need rules here.
   ============================================================ */
@media (max-width: 900px) {
  .coinbar { padding: 24px 28px; gap: 20px; }
  .coinbar-medallion { width: 56px; height: 56px; }
}

@media (max-width: 640px) {
  /* The reference drops decorative device shots on narrow screens so the
     plan details and purchase CTA retain the full viewport width. */
  .plan-mockup-col { display: none !important; }
  .coinbar { flex-direction: column; align-items: flex-start; text-align: left; }
  .coinbar-buy { align-items: flex-start; width: 100%; }
  .plans-faq-q { padding: 18px 20px; gap: 14px; }
  .plans-faq-q-text { font-size: 18px; }
  .plans-faq-a { padding: 0 20px 22px; }
}