/* Checkout · the pay form and the pages around it.

   A component stylesheet, because the form is included from every product
   detail page while the summary and status blocks are used by the standalone
   payment pages. Both readers load this one file.

   The composition follows the checkout organism in the internal atomic design
   library, node `funnel-sales-pages.fn08-checkout-order`: a sealed header bar,
   numbered violet steps, plan cards that carry the ring when they are the
   chosen one, a single full-width violet commit, and the trust row beneath it
   (`funnel-lead-magnet.fn09-trust-signals`). The panel treatment — bordered
   field, violet orbit glow, lock-marked privacy line — is
   `funnel-lead-magnet.fn02-optin-form`, and the settled mark on the return page
   is `accent-elements.a07-verified-check-ring`. The library's own node
   addresses carry a brand namespace that public pages do not, so they are
   quoted in full only in the Django template comments, which the renderer
   strips; this file ships to every visitor exactly as written.

   Every colour resolves through the token sheet, so light and dark follow the
   site without a second rule set. Two exceptions, both deliberate: `#fff` on the
   violet fills, which is the choice `.mega-tile` and `.mega-promo-card` already
   make — the fill is Electric Violet in both themes, so its label has to stay
   light in both — and nothing else.

   An earlier revision reached for `--accent` and `--surface-1`. This project
   declares neither, so the parser dropped every rule that named them: the chosen
   plan lost its selected state entirely, and the form's own focus ring never
   drew. Nothing below names a variable `tokens.css` does not define. */

.checkout-page{max-width:660px}
.checkout-page h1{margin:8px 0 12px}

/* ---- The panel ----------------------------------------------------------- */

.checkout{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin:24px 0 0;
  padding:0;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:linear-gradient(150deg,var(--surface),var(--surface-2));
  box-shadow:var(--shadow);
  /* The steps number themselves. A product priced one way and a product priced
     several ways render a different set of steps, and the standalone payment
     page renders fewer still — so the number is derived from what actually
     rendered rather than typed into each branch and left to drift. */
  counter-reset:checkout-step;
}
/* The proof line: violet resolving into cyan, the brand's own signature for a
   surface that has been verified. */
.checkout:before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0 0 auto;
  height:2px;
  background:linear-gradient(90deg,var(--violet),color-mix(in srgb,var(--violet) 68%,var(--cyan)),var(--cyan));
}
/* The orbit glow the signal panels carry, kept behind the content. */
.checkout:after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-90px;
  top:-120px;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--violet) 32%,transparent),transparent 68%);
  pointer-events:none;
}

.checkout-head{
  display:flex;
  flex-wrap:wrap;
  gap:12px 16px;
  align-items:center;
  padding:18px 22px;
  border-bottom:1px solid var(--line);
}
.checkout-seal{
  flex:none;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(140deg,var(--violet),var(--violet-2));
  box-shadow:0 6px 18px color-mix(in srgb,var(--violet) 36%,transparent);
}
.checkout-seal svg{width:20px;height:20px}
.checkout-head-text{flex:1 1 190px;min-width:0}
.checkout-title{
  margin:0;
  font-size:1.16rem;
  letter-spacing:-.015em;
}
.checkout-head-note{
  display:block;
  margin-top:3px;
  color:var(--silver);
  font-size:.79rem;
  line-height:1.45;
}
.checkout-secure{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 11px;
  border:1px solid color-mix(in srgb,var(--cyan) 30%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--cyan) 8%,transparent);
  color:var(--cyan);
  font-size:.63rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.checkout-secure svg{flex:none;width:13px;height:13px}

.checkout-body{padding:20px 22px 22px}

/* ---- Steps --------------------------------------------------------------- */

.checkout-step{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:12px;
  align-items:center;
  margin:0 0 13px;
}
.checkout-step-mark:before{
  counter-increment:checkout-step;
  content:counter(checkout-step);
}
.checkout-step-title{
  margin:0;
  font-family:var(--font-body);
  font-size:.95rem;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--paper);
}
.checkout-step-note{
  display:block;
  margin-top:2px;
  color:var(--silver);
  font-size:.78rem;
  font-weight:400;
  line-height:1.5;
}

/* ---- Choosing a plan ------------------------------------------------------ */

.checkout-choices{margin:0 0 18px;padding:0;border:0;min-width:0}
/* The step heading above already names this group on screen; the legend stays
   in the accessibility tree so the radios keep a group name. */
.checkout-choices legend{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.checkout-choice-list{display:grid;gap:10px}
@media (min-width:640px){
  .checkout-choice-list{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
}
.checkout-choice{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:9px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:color-mix(in srgb,var(--surface-2) 70%,transparent);
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.checkout-choice:hover{
  border-color:color-mix(in srgb,var(--violet) 40%,var(--line));
  transform:translateY(-2px);
}
/* The whole card is the hit area rather than the 17px control — this form is
   used on phones more than on desktops — and the card, not the dot, is what
   carries the choice. */
.checkout-choice:has(input:checked){
  border-color:color-mix(in srgb,var(--violet) 62%,var(--line-strong));
  background:color-mix(in srgb,var(--violet) 12%,var(--surface-2));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--violet) 40%,transparent),
             0 14px 30px color-mix(in srgb,var(--violet) 18%,transparent);
}
.checkout-choice:focus-within{
  outline:2px solid color-mix(in srgb,var(--violet) 66%,transparent);
  outline-offset:2px;
}
.checkout-choice-head{display:flex;align-items:center;gap:9px}
/* Native controls, tinted through the token rather than redrawn: the radio
   keeps its own keyboard and screen-reader behaviour for free. */
.checkout-choice input{
  flex:none;
  width:17px;
  height:17px;
  min-height:0;
  margin:0;
  padding:0;
  accent-color:var(--violet);
  cursor:pointer;
}
.checkout-choice-flag{
  position:absolute;
  top:-9px;
  left:16px;
  padding:3px 9px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(140deg,var(--violet),var(--violet-2));
  box-shadow:0 6px 16px color-mix(in srgb,var(--violet) 32%,transparent);
  font-size:.56rem;
  font-weight:820;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.checkout-choice-label{
  color:var(--silver);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.checkout-choice-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.checkout-choice-amount{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px;
  color:var(--paper);
  font-family:var(--font-display);
  font-size:clamp(1.65rem,3.4vw,2rem);
  font-weight:700;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.checkout-choice-amount span{
  color:var(--silver);
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:0;
}
.checkout-choice-note{color:var(--silver);font-size:.76rem;line-height:1.5}

/* One way to pay: the amount *is* the order, so it is stated as one card —
   what a chosen plan becomes, minus the choice. */
.checkout-single{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:5px 10px;
  margin:0 0 18px;
  padding:16px 18px;
  border:1px solid color-mix(in srgb,var(--violet) 34%,var(--line));
  border-radius:16px;
  background:linear-gradient(140deg,color-mix(in srgb,var(--violet) 13%,transparent),transparent 72%);
}
.checkout-single b{
  color:var(--paper);
  font-family:var(--font-display);
  font-size:clamp(1.9rem,4vw,2.35rem);
  font-weight:700;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.checkout-single span{color:var(--silver);font-size:.84rem;font-weight:700}
.checkout-single-label{flex-basis:100%}

/* ---- Buyer details -------------------------------------------------------- */

.checkout-fields{display:grid;gap:13px;margin-bottom:16px}
@media (min-width:620px){
  .checkout-fields{grid-template-columns:1fr 1fr}
  .checkout-fields label:first-child{grid-column:1 / -1}
}
.checkout-fields label{display:flex;flex-direction:column;gap:6px}
.checkout-fields label > span{
  color:var(--silver);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.checkout-fields input{
  min-height:46px;
  padding:11px 13px;
  border:1px solid var(--line-strong);
  border-radius:12px;
  background:color-mix(in srgb,var(--ink) 26%,transparent);
  color:var(--paper);
  font:inherit;
  font-size:.95rem;
}
.checkout-fields input:hover{border-color:color-mix(in srgb,var(--violet) 34%,var(--line-strong))}
.checkout-fields input:focus-visible{
  outline:2px solid color-mix(in srgb,var(--violet) 62%,transparent);
  outline-offset:1px;
}

/* Consent is a real gate, not a formality: it is what freezes the terms version
   onto the payment row, so it is drawn as a panel that visibly latches rather
   than as a line of small print. */
.checkout-consent{
  display:flex;
  gap:11px;
  align-items:flex-start;
  margin:0 0 16px;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:13px;
  background:color-mix(in srgb,var(--ink) 20%,transparent);
  color:var(--silver);
  font-size:.84rem;
  line-height:1.5;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}
.checkout-consent:has(input:checked){
  border-color:color-mix(in srgb,var(--cyan) 40%,var(--line));
  background:color-mix(in srgb,var(--cyan) 7%,transparent);
}
.checkout-consent:focus-within{outline:2px solid color-mix(in srgb,var(--cyan) 58%,transparent);outline-offset:2px}
.checkout-consent input{
  flex:none;
  width:17px;
  height:17px;
  min-height:0;
  margin:2px 0 0;
  padding:0;
  accent-color:var(--cyan);
  cursor:pointer;
}
.checkout-consent a{color:var(--paper);text-underline-offset:3px}

/* ---- The commit ----------------------------------------------------------- */

/* The one violet fill on the page. The site's `.button.primary` is the light
   paper button, and it stays that way everywhere else; a checkout's commit is
   the exception the design library draws filled in Electric Violet, because it
   is the only action on the panel and a buyer should never have to look for it. */
.checkout-submit.button.primary{
  width:100%;
  min-height:54px;
  border-color:color-mix(in srgb,var(--violet) 62%,transparent);
  background:linear-gradient(140deg,var(--violet),var(--violet-2));
  color:#fff;
  box-shadow:0 14px 34px color-mix(in srgb,var(--violet) 28%,transparent);
  font-size:1rem;
}
.checkout-submit.button.primary:hover{
  background:linear-gradient(140deg,color-mix(in srgb,var(--violet) 86%,var(--lavender)),var(--violet-2));
  box-shadow:0 18px 42px color-mix(in srgb,var(--violet) 38%,transparent);
  transform:translateY(-1px);
}
.checkout-submit:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.checkout-submit svg{flex:none;width:17px;height:17px;transition:transform .18s ease}
.checkout-submit:hover svg{transform:translateX(3px)}

.checkout-reassurance{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:center;
  margin:13px 0 0;
  color:var(--silver);
  font-size:.78rem;
  line-height:1.5;
  text-align:center;
}
.checkout-reassurance svg{flex:none;width:14px;height:14px;color:var(--cyan)}

/* ---- The trust row -------------------------------------------------------- */

/* Four facts the stack can stand behind, each one already true of the flow
   above it. A trust row that states anything else is decoration, and decoration
   on a payment form is a lie. */
.checkout-signals{
  list-style:none;
  display:grid;
  gap:1px;
  margin:0;
  padding:0;
  border-top:1px solid var(--line);
  background:var(--line);
}
@media (min-width:560px){.checkout-signals{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.checkout-signals{grid-template-columns:repeat(4,1fr)}}
.checkout-signals li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:14px 16px;
  background:color-mix(in srgb,var(--ink) 32%,var(--surface-2));
}
.checkout-signal-mark{
  flex:none;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:1px solid color-mix(in srgb,var(--cyan) 26%,transparent);
  border-radius:9px;
  background:color-mix(in srgb,var(--cyan) 12%,transparent);
  color:var(--cyan);
}
.checkout-signal-mark svg{width:14px;height:14px}
.checkout-signals strong{display:block;color:var(--paper);font-size:.78rem;font-weight:780}
.checkout-signals span{display:block;margin-top:2px;color:var(--silver);font-size:.72rem;line-height:1.45}

/* ---- Summary and status --------------------------------------------------- */

.checkout-summary{
  position:relative;
  overflow:hidden;
  margin:20px 0;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(150deg,var(--surface),var(--surface-2));
}
.checkout-summary:before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:2px;
  background:linear-gradient(90deg,var(--violet),var(--cyan));
  opacity:.72;
}
.checkout-summary .checkout-title{margin:0 0 14px}
.checkout-summary dl{display:grid;gap:12px;margin:0}
.checkout-summary div{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:space-between}
.checkout-summary dt{
  color:var(--silver);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.checkout-summary dd{margin:0;color:var(--paper);text-align:right}
.checkout-summary-amount{
  font-family:var(--font-display);
  font-size:1.45rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.checkout-summary code{font-size:.85rem;letter-spacing:.04em}
.checkout-vat{
  margin:14px 0 0;
  padding-top:12px;
  border-top:1px solid var(--line);
  color:var(--silver);
  font-size:.78rem;
}

.checkout-entitlements{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:10px}
.checkout-entitlements li{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:center;
  justify-content:space-between;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.checkout-entitlements li:last-child{border-bottom:0;padding-bottom:0}

/* `pp.t1-atom.accent.accent-elements.a07-verified-check-ring` — the mark that
   says settled. extras.css draws the same ring under `.confirmation-ring`, but
   the payment pages do not load that sheet, so the component carries its own. */
.checkout-proof{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  margin:0 0 18px;
  border-radius:50%;
  background:color-mix(in srgb,var(--cyan) 14%,transparent);
  box-shadow:0 0 0 9px color-mix(in srgb,var(--cyan) 6%,transparent),
             0 0 0 20px color-mix(in srgb,var(--cyan) 3%,transparent);
  color:var(--cyan);
}
.checkout-proof svg{width:24px;height:24px}
/* A SEPA debit legitimately takes days to settle, so the pending state is a
   normal outcome and not an error: it gets the same ring in the waiting colour
   rather than the danger one. */
.checkout-proof--pending{
  background:color-mix(in srgb,var(--warning) 14%,transparent);
  box-shadow:0 0 0 9px color-mix(in srgb,var(--warning) 6%,transparent),
             0 0 0 20px color-mix(in srgb,var(--warning) 3%,transparent);
  color:var(--warning);
}

.checkout-provider-status{color:var(--silver);font-size:.85rem}
.checkout-terms-note{
  margin-top:16px;
  color:var(--silver);
  font-size:.82rem;
  line-height:1.55;
}

.checkout-alert{
  margin:14px 0;
  padding:11px 14px;
  border:1px solid var(--line);
  border-left:3px solid var(--silver);
  border-radius:10px;
  font-size:.9rem;
}
.checkout-alert--error{border-left-color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)}
.checkout-alert--success{border-left-color:var(--success);background:color-mix(in srgb,var(--success) 10%,transparent)}
.checkout-alert--warning{border-left-color:var(--warning);background:color-mix(in srgb,var(--warning) 10%,transparent)}
.checkout-alert--info,.checkout-alert--debug{border-left-color:var(--lavender);background:color-mix(in srgb,var(--lavender) 10%,transparent)}

@media (max-width:560px){
  .checkout-head{padding:16px}
  .checkout-body{padding:18px 16px}
  .checkout-summary{padding:18px 16px}
  .checkout-secure{order:3}
}