/* Checkout and thank-you pages. Built on styles.css and tokens.css: every colour and font is a token.
 * Section order is the DOM order (summary, form, button, trust). Never reorder it with CSS. */
.teststrip{position:sticky;top:0;z-index:10;background:var(--color-hilite);color:var(--color-ink);border-bottom:var(--rule-heavy);text-align:center;padding:.6rem var(--space-sm);font:800 1rem/1.3 var(--font-display);text-transform:uppercase;letter-spacing:.04em}
[hidden]{display:none!important}
.co{padding-block:var(--space-lg) var(--space-xl)}
.co h1{font-size:var(--text-xl);margin-bottom:var(--space-md)}
.co-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-lg);align-items:start}
.co-box{background:var(--color-surface);border:var(--rule-heavy);border-radius:var(--radius-md);padding:var(--space-md)}

/* order summary */
.co-summary{box-shadow:6px 6px 0 var(--color-navy)}
.co-box h2{font-size:1.4rem;margin-bottom:var(--space-sm);word-spacing:.08em}
.co-summary ul.ck{font-size:1rem;line-height:1.45;gap:.4rem;margin-bottom:var(--space-sm)}
.co-lines{margin:0;border-top:2px dashed var(--color-paper-2);padding-top:var(--space-sm);display:grid;gap:.35rem}
.co-lines div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-sm)}
.co-lines dt{min-width:0}
.co-lines dd{margin:0;font-weight:600;text-align:right}
.co-lines .total{font:900 1.5rem/1.2 var(--font-display);border-top:var(--rule-heavy);padding-top:.5rem;margin-top:.3rem}
.co-lines .total dd{font-weight:900}
.co-summary .micro{margin-bottom:0}

/* form */
.field{margin:0 0 var(--space-sm);padding:0;border:0;min-width:0}
.field label,.field legend{display:block;padding:0;font:700 1rem/1.3 var(--font-body);margin-bottom:.3rem}
.field input,.field select{display:block;width:100%;min-height:3rem;font:400 1rem/1.4 var(--font-body);color:var(--color-ink);background:var(--color-surface);border:var(--rule-field);border-radius:var(--radius-sm);padding:.7rem .8rem}
.field input:focus-visible,.field select:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}
.field [aria-invalid="true"]{border-color:var(--color-danger)}
.field-error{color:var(--color-danger);font-size:.95rem;font-weight:600;line-height:1.4;margin:.3rem 0 0}
.field-hint{color:var(--color-ink-2);font-size:.9rem;line-height:1.4;margin:.3rem 0 0}
.field-row{display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--space-sm)}
#payment-element{min-height:5rem}
.co-legal{margin:var(--space-md) 0 0;font-size:.95rem;line-height:1.45;color:var(--color-ink-2)}
.co-legal a{color:inherit}
.ty .todo p{margin:.5rem 0 0;font-size:1rem}

/* pay button: default, hover, focus-visible and active come from .btn */
.co button.btn{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;border:0;cursor:pointer;white-space:nowrap;font-size:1.25rem;padding:1.1rem 1rem;margin-top:var(--space-md);color:var(--color-on-accent)}
.co button.btn:disabled{background:var(--color-disabled);box-shadow:0 6px 0 var(--color-ink);transform:none;cursor:not-allowed}
.co button.btn[data-state="loading"]:disabled{background:var(--color-accent-hover);box-shadow:0 2px 0 var(--color-accent-shadow);transform:translateY(4px);cursor:progress}
.co button.btn[data-state="error"]{outline:4px solid var(--color-danger);outline-offset:4px}
/* keyboard focus keeps its own ring after an error; the message below the button carries the error */
.co button.btn[data-state="error"]:focus-visible{outline-color:var(--color-ink)}
.co button.btn[data-state="success"]:disabled{background:var(--color-success);box-shadow:0 6px 0 var(--color-ink);cursor:default}
.spinner{width:1.1em;height:1.1em;flex:none;border:3px solid var(--color-on-accent);border-top-color:transparent;border-radius:50%;animation:co-spin .8s linear infinite}
@keyframes co-spin{to{transform:rotate(360deg)}}
.co-msg{margin-top:var(--space-md);padding:.8rem 1rem;background:var(--color-surface);border:var(--rule-field);border-radius:var(--radius-sm);font-size:1rem;font-weight:600;line-height:1.45}
.co-msg[data-type="error"]{border-color:var(--color-danger);color:var(--color-danger)}
.co-notice{margin:0 0 var(--space-md)}
.co-notice a{color:inherit}

/* trust */
.co-trust{margin-top:var(--space-md);display:grid;gap:.5rem;font-size:.95rem;line-height:1.45;color:var(--color-ink-2)}
.co-trust p{margin:0}
.co-trust b{color:var(--color-ink)}

/* thank-you */
.ty{padding-block:var(--space-xl)}
.ty h1{font-size:var(--text-2xl);margin-bottom:var(--space-md);text-wrap:balance}
.ty p{font-size:1.25rem}
.ty .btn{margin-top:var(--space-sm);white-space:nowrap;font-size:1.25rem}
.ty b{overflow-wrap:anywhere}

@media (min-width:30rem){
  .field-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:56rem){
  .co-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
}
@media (prefers-reduced-motion:reduce){.spinner{animation:none;border-top-color:var(--color-on-accent)}}