/* ================================================================================================
   PRICING.CSS - the public membership plans page (storefront.subscriptions).
   Loaded after store.css, on the same token ramp (--brand, --green, --gold, --ink ramp, --line,
   --radius-card). Page-specific only: nothing here changes another page.

   Read: calm, trust-first commerce page for phone visitors. VARIANCE 3, MOTION 3, DENSITY 4.
   Interaction thesis: one card, one tab per billing option. The only movement is the tab
   indicator sliding (300ms, strong ease-out, no bounce) and a 160ms fade between cards. Under
   reduced motion both are instant.

   How the tabs work in CSS:
     - Without JavaScript every option is an ordinary stacked card and the tab control is hidden.
     - A script in the head adds the "js" class to the root element before first paint. From then
       on the options sit stacked in ONE grid cell, so the panel area is always as tall as the
       tallest option and switching never moves anything below it.
   Written with logical properties (inline/block, start/end) so it mirrors correctly in RTL.
   ================================================================================================ */

.pricing { --pl-gap: 24px; }

/* The titleband subtitle rule store.css never received (kept from the previous version of this page). */
.titleband p.tb-sub { margin-top: 5px; color: color-mix(in oklch, white 82%, transparent); font-size: 0.9rem; max-width: 62ch; }

/* ---- Member banner ------------------------------------------------------------------------- */
.plan-member { display: flex; gap: 12px; align-items: flex-start; max-width: 920px; margin: 0 auto 22px; padding: 14px 16px; border-radius: 12px; background: color-mix(in oklch, var(--green) 10%, white 90%); border: 1px solid color-mix(in oklch, var(--green) 28%, transparent); color: color-mix(in oklch, var(--green) 100%, black 62%); font-size: 0.92rem; line-height: 1.5; }
.plan-member b { color: color-mix(in oklch, var(--green) 100%, black 70%); }
.plan-member a { display: flex; width: fit-content; align-items: center; min-height: 44px; color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.plan-member-ic { flex: none; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in oklch, var(--green) 100%, black 30%); color: #fff; margin-block-start: 1px; }

/* ---- Set of options (one per plan group) --------------------------------------------------- */
.plan-set + .plan-set { margin-block-start: 40px; }
.plan-group-title { max-width: 920px; margin: 0 auto 14px; font-size: 1.15rem; font-weight: 800; color: var(--ink); }

/* ---- Tab control (only shown once the script is allowed to run) ----------------------------- */
.plan-tabs { display: none; }
.js .plan-tabs { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); width: 100%; max-width: 480px; margin-inline: auto; margin-block-end: 20px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.plan-tabs-thumb { position: absolute; inset-block: 4px; inset-inline-start: 4px; width: calc((100% - 8px) / var(--n)); border-radius: 999px; background: var(--brand); box-shadow: 0 10px 18px -12px rgba(25, 79, 144, 0.75); transform: translateX(calc(var(--i) * 100%)); transition: transform 300ms var(--ease); }
.plan-tabs:dir(rtl) .plan-tabs-thumb { transform: translateX(calc(var(--i) * -100%)); }
[dir="rtl"] .plan-tabs .plan-tabs-thumb { transform: translateX(calc(var(--i) * -100%)); }

.plan-tab { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 44px; padding: 6px 6px; border: 0; border-radius: 999px; background: none; color: var(--ink-soft); font: inherit; font-size: 0.95rem; font-weight: 800; line-height: 1.2; cursor: pointer; touch-action: manipulation; transition: color 200ms ease; }
.has-badges .plan-tab { min-height: 58px; }
.plan-tab[aria-selected="true"] { color: #fff; }
.plan-tab:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.plan-tab-badge { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: 0.72rem; font-weight: 800; line-height: 1; white-space: nowrap; }
@media (hover: hover) {
  .plan-tab[aria-selected="false"]:hover { color: var(--brand); }
}

/* ---- Panels -------------------------------------------------------------------------------- */
.plan-panels { display: block; }
.js .plan-set--tabs .plan-panels { display: grid; }
.js .plan-set--tabs .plan-card { grid-area: 1 / 1; margin-block: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 160ms ease, visibility 0s linear 160ms; }
.js .plan-set--tabs .plan-card.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }

/* ---- Card ---------------------------------------------------------------------------------- */
.plan-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 460px; margin-inline: auto; margin-block-end: 18px; padding: 22px 22px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 1px 0 rgba(25, 79, 144, 0.04), 0 18px 34px -28px rgba(25, 79, 144, 0.35); }
.plan-card.is-best { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 22px 40px -28px rgba(25, 79, 144, 0.55); }
.plan-set--tabs .plan-card { max-width: 920px; }

.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-height: 28px; }
.plan-name { font-size: 1.08rem; font-weight: 800; color: var(--ink); line-height: 1.25; }
.plan-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 11px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-deep); font-size: 0.78rem; font-weight: 800; }

.plan-pricing { margin-block-start: 14px; }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; color: var(--brand); font-variant-numeric: tabular-nums; line-height: 1.1; }
.plan-price b { font-size: clamp(2.1rem, 8vw, 2.5rem); font-weight: 800; letter-spacing: -0.01em; }
.plan-price .cur { font-size: 1rem; font-weight: 800; }
.plan-price .per { font-size: 0.95rem; font-weight: 600; color: var(--ink-soft); }
.plan-eq { margin-block-start: 8px; font-size: 0.92rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-save { margin-block-start: 4px; font-size: 0.88rem; font-weight: 700; color: color-mix(in oklch, var(--green) 100%, black 42%); font-variant-numeric: tabular-nums; }
.plan-desc { margin-block-start: 12px; font-size: 0.92rem; color: var(--ink-soft); max-width: 62ch; }

.plan-form { margin-block-start: 18px; }
.plan-form .btn { touch-action: manipulation; min-height: 48px; font-size: 0.95rem; line-height: 1.25; text-align: center; }
.plan-form .btn-primary { background: color-mix(in oklch, var(--green) 100%, black 22%); }
.plan-form .btn-primary:hover:not(:disabled) { background: color-mix(in oklch, var(--green) 100%, black 34%); }
.plan-form .btn[aria-busy="true"] { opacity: 0.7; }
.plan-form-note { margin-block-start: 8px; font-size: 0.84rem; color: var(--ink-soft); text-align: center; }

.plan-incl { margin-block-start: 20px; padding-block-start: 16px; border-block-start: 1px solid var(--line); }
.plan-incl h3 { font-size: 0.86rem; font-weight: 800; color: var(--ink); margin-block-end: 10px; }

.plan-list { display: grid; gap: 10px; }
.plan-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; line-height: 1.45; color: var(--ink); }
.plan-list .tick { flex: none; width: 20px; height: 20px; margin-block-start: 1px; border-radius: 999px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); }
.plan-list .tick svg { width: 12px; height: 12px; }
.plan-list .d { display: block; margin-block-start: 1px; font-size: 0.86rem; color: var(--ink-soft); }
.plan-list-empty { font-size: 0.9rem; color: var(--ink-soft); }

/* Wide screens: the price and button on one side, what you get on the other. */
@media (min-width: 760px) {
  .plan-set--tabs .plan-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 28px; }
  .plan-set--tabs .plan-main { padding-inline-end: 28px; }
  .plan-set--tabs .plan-incl { margin-block-start: 0; padding-block-start: 0; padding-inline-start: 28px; border-block-start: 0; border-inline-start: 1px solid var(--line); }
  .plan-set--tabs .plan-incl h3 { margin-block-start: 6px; }
}

/* ---- How it works -------------------------------------------------------------------------- */
.plan-how { max-width: 920px; margin: 34px auto 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.plan-how h2 { font-size: 1.05rem; font-weight: 800; color: var(--brand); margin-block-end: 14px; }
.plan-how ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px 24px; counter-reset: how; list-style: none; padding: 0; margin: 0; }
.plan-how li { position: relative; padding-inline-start: 40px; counter-increment: how; }
.plan-how li::before { content: counter(how); position: absolute; inset-inline-start: 0; inset-block-start: 0; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: var(--brand); color: #fff; font-size: 0.86rem; font-weight: 800; }
.plan-how li b { display: block; font-size: 0.95rem; font-weight: 800; color: var(--ink); line-height: 1.3; padding-block-start: 3px; }
.plan-how li span { display: block; margin-block-start: 2px; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.45; }

.plan-note { max-width: 920px; margin: 18px auto 0; font-size: 0.9rem; color: var(--ink-soft); }
.plan-note a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.empty-state-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-block-start: 16px; }

@media (prefers-reduced-motion: reduce) {
  .plan-tabs-thumb, .plan-tab, .js .plan-set--tabs .plan-card { transition: none; }
}