/* checkout.css — the funnel payment popup (assets/js/checkout.js), which replaced
   the AXL iDX order form on lp/pasav/details and serves the new funnels (owner decision,
   2026-10-19). Loaded after lp.css on those pages. Tokens only; every class is
   scoped under .ck-. The popup shell (dialog, ×, scroll container) stays in lp.css. */

.ck { display: grid; gap: var(--sp-4); font-size: var(--text-base); color: var(--c-text); }
.ck h2 { margin: 0; font-size: var(--text-2xl); font-weight: var(--fw-extrabold); line-height: var(--lh-snug); text-wrap: balance; }
.ck h3 { margin: 0; font-size: var(--text-base); font-weight: var(--fw-bold); }
.ck p { margin: 0; }
.ck .btn { width: 100%; }
.ck .ck-center { text-align: center; }

/* order box */
.ck-order { display: grid; gap: var(--sp-2); padding: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.ck-order__name { font-weight: var(--fw-bold); }
.ck-order__items { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-1); font-size: var(--text-sm); color: var(--c-text-2); }
.ck-order__items li { position: relative; padding-left: var(--sp-6); }
.ck-order__items li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 11px; height: 6px; border-left: 2px solid var(--c-primary); border-bottom: 2px solid var(--c-primary); transform: rotate(-45deg); }
.ck-order__row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.ck-order__row s { flex: none; white-space: nowrap; color: var(--c-text-muted); }
.ck-order__total { align-items: baseline; padding-top: var(--sp-2); border-top: 1px solid var(--c-border); }
.ck-order__price { font-size: var(--text-2xl); font-weight: var(--fw-extrabold); }

/* what happens after payment */
.ck-plan { display: grid; gap: var(--sp-2); }
.ck-plan ol { margin: 0; padding: 0; list-style: none; display: grid; counter-reset: ck; }
.ck-plan li { position: relative; padding: 0 0 var(--sp-3) var(--sp-8); font-size: var(--text-sm); color: var(--c-text-2); counter-increment: ck; }
.ck-plan li:last-child { padding-bottom: 0; }
.ck-plan li::before { content: counter(ck); position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: var(--r-full); background: var(--c-surface-blue); color: var(--c-primary); font-size: var(--text-xs); font-weight: var(--fw-bold); display: grid; place-items: center; }
.ck-plan li:not(:last-child)::after { content: ""; position: absolute; left: 9.5px; top: 22px; bottom: 2px; width: 1px; background: var(--c-border); }
.ck-plan li b { display: block; color: var(--c-text); font-weight: var(--fw-semibold); }

/* form */
.ck-form { display: grid; gap: var(--sp-3); }
.ck-field { display: grid; gap: var(--sp-1); }
.ck-field span { font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.ck input { width: 100%; padding: var(--sp-3) var(--sp-4); font: inherit; font-size: var(--text-base); color: var(--c-text); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.ck input:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 1px; }
.ck input.is-known { border-color: var(--c-primary); }
.ck-hint { margin-top: calc(var(--sp-1) * -1); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--c-primary); }
.ck-err { padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--c-text); background: var(--c-surface-blue); border-left: 3px solid var(--c-primary); border-radius: var(--r-sm); }
.ck-err:empty { display: none; }

/* payment method */
.ck-seg { display: grid; gap: var(--sp-2); }
.ck-seg button { display: grid; grid-template-columns: 20px 1fr auto; gap: 2px var(--sp-3); align-items: center; width: 100%; min-height: 44px; padding: var(--sp-3); font: inherit; text-align: left; color: var(--c-text); background: var(--c-bg); border: 1.5px solid var(--c-border); border-radius: var(--r-md); cursor: pointer; }
.ck-seg button[aria-pressed="true"] { border-color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); }
.ck-seg button:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.ck-seg i { width: 18px; height: 18px; grid-row: span 2; border: 2px solid var(--c-border); border-radius: var(--r-full); }
.ck-seg button[aria-pressed="true"] i { border: 6px solid var(--c-primary); }
.ck-seg b { font-size: var(--text-sm); }
.ck-seg small { font-size: var(--text-xs); color: var(--c-text-muted); }
.ck-seg .ck-amt { grid-row: span 2; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* guarantee shield above the button, the small print under it */
.ck-shield { display: flex; gap: var(--sp-3); align-items: center; font-size: var(--text-sm); line-height: var(--lh-snug); color: var(--c-text-2); }
.ck-shield svg { flex: none; color: var(--c-primary); }
.ck-shield b { color: var(--c-text); }
.ck #ck-pay { padding-inline: var(--sp-4); }
.ck-sub { margin-top: calc(var(--sp-2) * -1); font-size: var(--text-sm); text-align: center; color: var(--c-text-muted); }

/* one testimonial, trust chips, legal line */
.ck-quote { display: grid; gap: var(--sp-1); margin: 0; padding: var(--sp-3) var(--sp-4); background: var(--c-surface); border-left: 3px solid var(--c-accent); border-radius: 0 var(--r-md) var(--r-md) 0; }
.ck-quote blockquote { margin: 0; font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: var(--lh-normal); }
.ck-quote figcaption { font-size: var(--text-xs); color: var(--c-text-muted); }
.ck-quote a { color: inherit; }
.ck-trust { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.ck-trust span { padding: 2px var(--sp-2); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--c-text-muted); border: 1px solid var(--c-border); border-radius: var(--r-sm); }
.ck-legal { font-size: var(--text-xs); line-height: var(--lh-normal); text-align: center; color: var(--c-text-muted); }
.ck-legal a { color: inherit; }

/* result screens */
.ck-spin { justify-self: center; width: 30px; height: 30px; margin-top: var(--sp-8); border: 3px solid var(--c-border); border-top-color: var(--c-primary); border-radius: var(--r-full); animation: ck-spin 1s linear infinite; }
@keyframes ck-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ck-spin { animation: none; } }
.ck-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-full); }
.ck-mark--ok { background: var(--c-surface-blue); }
.ck-mark--ok::after { content: ""; width: 22px; height: 12px; border-left: 3px solid var(--c-primary); border-bottom: 3px solid var(--c-primary); transform: rotate(-45deg) translate(2px, -2px); }
.ck-mark--bad { background: var(--c-accent); color: var(--c-accent-text); font-size: var(--text-2xl); font-weight: var(--fw-extrabold); }
.ck-mark--bad::after { content: "!"; }
.ck-kv { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.ck-kv div { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--text-sm); }
.ck-link { justify-self: center; min-height: 44px; padding: var(--sp-1) var(--sp-2); font: inherit; font-size: var(--text-sm); color: var(--c-text-muted); text-decoration: underline; background: none; border: 0; cursor: pointer; }

/* "what stopped you" — shown once after the popup is closed without paying */
.ck-toast { position: fixed; left: 50%; bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); z-index: 40; display: grid; gap: var(--sp-2); width: min(440px, calc(100% - var(--sp-8))); padding: var(--sp-4); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-xl); transform: translateX(-50%); }
.ck-toast b { padding-right: var(--sp-8); }
.ck-toast__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ck-toast__chips button { min-height: 44px; padding: var(--sp-2) var(--sp-3); font: inherit; font-size: var(--text-sm); color: var(--c-text); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-full); cursor: pointer; }
.ck-toast__x { position: absolute; top: var(--sp-1); right: var(--sp-1); width: 44px; height: 44px; font-size: var(--text-2xl); line-height: 1; color: var(--c-text-muted); background: none; border: 0; cursor: pointer; }
.ck-toast__ans { padding: var(--sp-3); font-size: var(--text-sm); background: var(--c-surface-blue); border-radius: var(--r-md); }

@media (max-width: 420px) {
  .ck #ck-pay { font-size: var(--text-lg); }
}