/* Bestellen en bestelpagina — zelfde tokens als style.css (huisstijl SpoorSlim) */
.order-panel{margin:32px 0;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:28px;box-shadow:0 12px 40px #12262e08}
.order-head p{max-width:760px}
.order-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:28px;margin-top:18px}
.real-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.real-preview figure{margin:12px 0 0}
.real-preview img{width:100%;height:auto;border:1px solid var(--line);border-radius:8px;background:#f6f4ef;display:block}
.real-preview figcaption{font-size:12px;color:var(--muted);margin-top:6px}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tabs button{min-height:40px;padding:6px 12px;font-size:14px}
.stale{background:#fff4d6;border:1px solid #e8c56a;color:#5a4300;border-radius:6px;padding:8px 12px;font-size:14px}
#sampleCanvas{width:100%;height:320px;display:block;border:1px solid var(--line);border-radius:8px;background:#eef1ef;touch-action:none;margin-top:10px}
.diff-note{margin-top:16px;border-left:4px solid var(--teal);background:var(--paper);padding:12px 16px;border-radius:0 8px 8px 0;font-size:14px}
.diff-note ul{margin:6px 0 0;padding-left:18px;color:var(--muted)}
.buy-box{border:1.5px solid var(--ink);border-radius:10px;padding:20px;align-self:start;position:sticky;top:16px;background:var(--card)}
.price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price span{font:700 44px/1 var(--display)}
.price small{font:12px var(--mono);color:var(--muted)}
.includes{padding-left:18px;margin:14px 0;color:var(--ink)}
.includes li{margin:4px 0}
.consent{border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:14px 0}
.consent legend{font-weight:700;padding:0 6px;font-size:14px}
.consent label{display:flex;gap:10px;align-items:flex-start;margin:10px 0;font-size:15px;line-height:1.4;cursor:pointer}
.consent input{width:22px;height:22px;flex:0 0 22px;margin-top:1px;accent-color:var(--teal)}
.buy-box .primary{width:100%}
.status{border-radius:8px;padding:12px 16px;margin:12px 0;font-weight:600}
.status.ok{background:#e4f2ed;color:#075c50;border:1px solid #9cc7b7}
.status.busy{background:var(--paper);color:var(--ink);border:1px dashed var(--line)}
.status.busy::before{content:'';display:inline-block;width:14px;height:14px;margin-right:10px;border:2px solid var(--teal);border-right-color:transparent;border-radius:50%;vertical-align:-2px;animation:spin .9s linear infinite}
.status.error{background:#fdecea;color:#7a1d12;border:1px solid #ecb1a8}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.status.busy::before{animation:none}}
/* bestelpagina */
.order-page main{max-width:980px}
.order-intro{padding:32px 0 8px}
.order-intro h1{font-size:44px}
.steps{display:flex;gap:8px;list-style:none;padding:0;margin:12px 0;counter-reset:s;flex-wrap:wrap}
.steps li{counter-increment:s;flex:1 1 150px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--card);font-weight:600;color:var(--muted)}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid currentColor;margin-right:8px;font:12px var(--mono)}
.steps li[aria-current]{border-color:var(--teal);color:var(--teal)}
.steps li.done{color:var(--ink)}
.steps li.done::before{content:'✓';background:var(--teal);color:#fff;border-color:var(--teal)}
.card{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:22px 24px;margin:18px 0}
.card h2{font-size:28px;margin-bottom:6px}
.card h3{font-size:20px;margin-top:18px}
.paysteps{padding-left:20px}
.paysteps li{margin:12px 0}
a.button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:6px;margin-top:8px}
a.button.primary{color:#12262e}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row input{flex:1 1 220px;min-width:0}
.card input:not([type=checkbox]){min-height:46px;border:1px solid var(--line);border-radius:6px;padding:8px 12px;background:var(--card);width:100%}
.row input{width:auto}
.redeem label,.recover label{display:block;font-weight:600;margin:12px 0 4px}
#licenseKey{font-family:var(--mono);letter-spacing:.5px;text-transform:uppercase}
.recover button{margin-top:14px}
.files{list-style:none;padding:0;display:grid;gap:8px}
.files button{width:100%;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px}
.files small{font:12px var(--mono);color:inherit;opacity:.8;word-break:break-all}
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 18px;margin:14px 0}
.summary div{border-top:1px solid var(--line);padding-top:6px}
.summary dt{font:11px/1.4 var(--mono);letter-spacing:1px;color:var(--muted);text-transform:uppercase}
.summary dd{margin:2px 0 0;font-weight:600;word-break:break-word}
.params{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.params th,.params td{border-bottom:1px solid var(--line);padding:6px 4px;text-align:left;vertical-align:top}
.params th code{font:11px var(--mono);color:var(--muted);margin-left:6px}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:10px}
.thumbs figure{margin:0}
.thumbs img{width:100%;height:auto;border:1px solid var(--line);border-radius:8px;background:#f6f4ef}
.thumbs figcaption{font-size:12px;color:var(--muted)}
.device-list{padding-left:18px}
.device-list li{margin:6px 0}
body.dark .status.ok{background:#173b33;color:#a5f0d9;border-color:#2c6b5b}
body.dark .status.error{background:#3a1d1a;color:#ffc9c0;border-color:#7a3b31}
body.dark .stale{background:#3a3012;color:#ffe3a1;border-color:#7a6224}
body.dark .real-preview img,body.dark .thumbs img{background:#e9e6df}
body.dark #sampleCanvas{background:#22343a}
body.dark .buy-box{border-color:var(--line)}
@media (max-width:860px){.order-grid{grid-template-columns:1fr}.buy-box{position:static}}
@media (max-width:600px){.order-panel{padding:18px 16px}.card{padding:18px 16px}.price span{font-size:38px}.order-intro h1{font-size:34px}.row button{width:100%}#sampleCanvas{height:260px}}