/* De kopersstack (canon koopfunctie-in-de-kaart, 9 okt 2026): vijf Jumbocards in de huid van
   de World van het artikel. De kaartvorm komt uit instruction-stack.css (.ins-card); dit
   bestand kleedt alleen de inhoud van de stappen: velden, keuzes, knoppen en de samenvatting,
   in de inkt en het font van de World (--base, --body). Eén stap tegelijk is actief; de
   andere staan als stapel onder elkaar, zoals een Stack. */
.checkout-page .checkout-main { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 24px 0 64px; }
.checkout-page .checkout-head { text-align: center; max-width: 770px; padding: 0 56px; }   /* vrij van de hamburger linksboven */
.checkout-page .checkout-head h1 { font: 600 clamp(22px, 3vw, 30px)/1.2 var(--serif, var(--body)); margin: 0 0 6px; color: var(--ink, #2b241a); }
.checkout-page .checkout-head p { margin: 0; color: var(--muted, #7a6c52); font-family: var(--body); }
.checkout-page .checkout-head a { color: inherit; }

/* De stapel: elke stap is een Jumbocard met twee kanten (card-flip.js); alleen de actieve ligt
   open, de rest ligt dicht. De rug is het merkvlak van de World (instruction-stack.css). */
.checkout-flip { display: none; }
.checkout-flip.is-active { display: block; }
.checkout-flip .ins-back { --wk-ink: var(--strip-ink, rgba(255,255,255,.78)); --wk-hover-ink: rgba(255,255,255,.98); }
.checkout-step .inner { font-family: var(--body); color: var(--ink, #2b241a); }
/* De handeling vult de kaart tot de systeemstrook, zodat de knoppen onderaan liggen (margin-top: auto). */
.checkout-step .step { align-items: stretch; }
.checkout-step .steptext { display: flex; flex-direction: column; min-height: 0; }
.checkout-step .body { flex: 1 1 auto; min-height: 0; overflow: hidden auto; display: flex; flex-direction: column; gap: 16px; font-size: calc(21px * var(--fs, 1)); line-height: 1.45; }   /* alleen verticaal schuiven: het betaalelement toonde anders een horizontale balk */
.checkout-step .note { font-size: calc(17px * var(--fs, 1)); color: var(--muted, #7a6c52); margin: 0; }
.checkout-step .warn { font-size: calc(19px * var(--fs, 1)); color: #8a3b2b; margin: 0; }
.checkout-step fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.checkout-step legend, .checkout-step label.title { font-weight: 600; margin-bottom: 4px; }
.checkout-step label.choice { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1.5px solid rgba(var(--base-rgb), .35); border-radius: 14px; cursor: pointer; background: rgba(255,255,255,.35); }
.checkout-step label.choice:has(input:checked) { border-color: var(--base); box-shadow: inset 0 0 0 1px var(--base); background: rgba(255,255,255,.6); }
.checkout-step label.choice input { margin-top: 6px; accent-color: var(--base); width: 20px; height: 20px; flex: none; }
.checkout-step label.choice .lbl { flex: 1 1 auto; }
.checkout-step label.choice .amt { font-weight: 600; white-space: nowrap; }
.checkout-step label.choice.is-off { opacity: .5; cursor: default; }
.checkout-step label.field { display: flex; flex-direction: column; gap: 6px; }
.checkout-step label.field span { font-weight: 600; font-size: calc(18px * var(--fs, 1)); }
.checkout-step label.field small { font-weight: 400; color: var(--muted, #7a6c52); font-size: calc(15px * var(--fs, 1)); }
/* Velden: lager dan de lopende tekst, met een rustige focus in de wereldkleur in plaats van de
   browserring (Tom, 10 okt 2026). */
.checkout-step input[type=text], .checkout-step input[type=email], .checkout-step input[type=number] {
  font: inherit; font-size: calc(18px * var(--fs, 1)); line-height: 1.3; padding: 9px 12px; border: 1.5px solid rgba(var(--base-rgb), .4); border-radius: 10px; background: rgba(255,255,255,.75); color: inherit; width: 100%; }
.checkout-step input:focus { outline: none; border-color: var(--base); box-shadow: 0 0 0 3px rgba(var(--base-rgb), .16); background: #fff; }
.checkout-step input:focus-visible { outline: none; }
.checkout-step input:invalid:not(:placeholder-shown) { border-color: #8a3b2b; }
.checkout-step .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkout-step label.check { display: flex; gap: 12px; align-items: flex-start; font-size: calc(17px * var(--fs, 1)); color: var(--muted, #7a6c52); }
.checkout-step label.check input { margin-top: 5px; accent-color: var(--base); width: 20px; height: 20px; flex: none; }
.checkout-step .summary { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.checkout-step .summary dt { font-weight: 600; }
.checkout-step .summary dd { margin: 0; text-align: right; }
.checkout-step .summary .total dt, .checkout-step .summary .total dd { font-size: calc(26px * var(--fs, 1)); font-weight: 700; border-top: 1.5px solid rgba(var(--base-rgb), .4); padding-top: 8px; }
.checkout-step .withdrawal { font-size: calc(15px * var(--fs, 1)); color: var(--muted, #7a6c52); margin: 0; }
.checkout-step .withdrawal a { color: inherit; }
.checkout-step #payment-element { min-height: 60px; max-width: 100%; overflow: hidden; }
.checkout-step .actions { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 10px; }
.checkout-step .btn { font: 600 calc(19px * var(--fs, 1))/1 var(--body); padding: 16px 24px; border-radius: 999px; border: 1.5px solid var(--base); background: var(--base); color: #fff; cursor: pointer; letter-spacing: .02em; }
.checkout-step .btn.secondary { background: transparent; color: var(--base); }
.checkout-step .btn[disabled] { opacity: .5; cursor: default; }
.checkout-step .btn.wide { width: 100%; text-align: center; }
.checkout-step .melding { font-size: calc(17px * var(--fs, 1)); color: #8a3b2b; margin: 0; min-height: 1.4em; }
.checkout-step .confirm { text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; flex: 1 1 auto; }
.checkout-step .confirm .big { font: 600 calc(34px * var(--fs, 1))/1.2 var(--serif, var(--body)); margin: 0; }
.checkout-step .confirm .nr { font: 600 calc(22px * var(--fs, 1))/1 var(--body); letter-spacing: .12em; }
.checkout-step .confirm .spin { width: 36px; height: 36px; border: 3px solid rgba(var(--base-rgb), .25); border-top-color: var(--base); border-radius: 50%; animation: checkout-spin 1s linear infinite; }
@keyframes checkout-spin { to { transform: rotate(360deg); } }

/* Digitaal (canon koopfunctie-in-elke-world): de afstandsverklaring direct bij de knop, het downloadblok op kaart 5. */
.checkout-step .confirm .download { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 100%; max-width: 520px; margin-top: 8px; }
.checkout-step .confirm .download .btn.wide { max-width: 420px; }