/* ═══ /order and /payment in the «ex» look — the money path, so a skin only: every id, class, handler and
   inline script of order.html / payment.html stays as it was; these rules (all under .exo, the page root)
   only repaint. Tokens come from ex-ui.css (declared on .exo too). Selected things get a gold ring
   instead of a gold border, surfaces are fills instead of outlined boxes. ═══ */
.exo{--cs1:var(--g1);--cs2:var(--g2)}

/* ── /order: head ── */
.exo .ord-head .section-label{color:var(--gold-tx);letter-spacing:.04em;text-transform:none;font-size:15px;font-weight:600}
.exo .ord-head .section-title{font-family:var(--disp);font-weight:600;font-size:clamp(34px,4.4vw,60px)!important;line-height:1.04;letter-spacing:-.045em;color:var(--ink)}
.exo .ord-head p{color:var(--mu)!important;font-size:16.5px!important}
.exo .gsw-btn{border:0;background:var(--cs1)}
.exo .gsw-btn:hover{background:var(--cs2)}
.exo .gsw-opt{border:0;border-radius:14px;background:var(--cs1);box-shadow:none}
.exo .gsw-opt:hover{transform:none;background:var(--cs2)}
.exo .gsw-opt.selected{box-shadow:inset 0 0 0 2px var(--gold)}

/* ── steps island + sections ── */
.exo .ord-steps{background:var(--cs1);border:0;border-radius:20px}
.exo .stp:hover{background:var(--cs2)}
.exo .stp.active{background:var(--cs2)}
.exo .stp-dot{background:var(--cs2);border:0;color:var(--mu)}
.exo .stp.active .stp-dot,.exo .stp-list li.done .stp-dot{background:var(--gold);color:#0b0b0c;border:0}
.exo .ord-sec{background:var(--cs1);border:0;border-radius:24px;padding:clamp(20px,2.2vw,28px)}
.exo .ord-sec-num{background:var(--gold);color:#0b0b0c}
.exo .ord-sec-title{font-family:var(--disp);font-weight:600;font-size:clamp(19px,1.6vw,22px);letter-spacing:-.03em;color:var(--ink)}
.exo .ord-sec-hint{color:var(--mu)}

/* ── catalogue of cores and packs ── */
.exo .cat-search{border:0;border-radius:999px;background:var(--cs2);min-height:46px}
.exo .cat-search:focus-within{box-shadow:0 0 0 2px var(--gold)}
.exo .cat-list::-webkit-scrollbar-track{background:var(--cs2)}
.exo .cat-list::-webkit-scrollbar-thumb{border-color:var(--cs2)}
.exo .cat-row{border:0;border-radius:12px;background:var(--cs2)}
.exo .cat-row:hover{background:color-mix(in srgb,var(--cs2) 82%,var(--ink));border:0}
.exo .cat-row.selected{background:color-mix(in srgb,var(--gold) 12%,var(--cs2));box-shadow:inset 0 0 0 2px var(--gold)}
.exo .cat-name{color:var(--ink)}
.exo .cat-meta{color:var(--mu)}
.exo .pf-key-row input{border:0;border-radius:12px;background:var(--cs1);color:var(--ink)}
.exo .pf-key-row input:focus{box-shadow:0 0 0 2px var(--gold)}
.exo .mc-chip{border:0;border-radius:999px;background:var(--cs2);color:var(--mu)}
.exo .mc-chip:hover{color:var(--ink)}
.exo .mc-chip.selected{background:var(--gold);color:#0b0b0c}

/* ── plans, period, add-ons ── */
.exo .period-opt{border:0;border-radius:14px;background:var(--cs2);color:var(--mu)}
.exo .period-opt:hover{color:var(--ink)}
.exo .period-opt.active{background:var(--gold);box-shadow:none;border:0;color:#0b0b0c}
.exo .trf-card{border:0;border-radius:18px;background:var(--cs2);box-shadow:none}
.exo .trf-card:hover{transform:none;background:color-mix(in srgb,var(--cs2) 84%,var(--ink));border:0}
.exo .trf-card.selected{background:color-mix(in srgb,var(--gold) 12%,var(--cs2));box-shadow:inset 0 0 0 2px var(--gold);border:0}
.exo .trf-badge{border:0}
.exo .trf-arrow{border:0;border-radius:999px;background:var(--cs2);color:var(--ink)}
.exo .addon-row{border:0;border-radius:14px;background:var(--cs2)}
.exo .addon-row.on{background:color-mix(in srgb,var(--gold) 12%,var(--cs2));box-shadow:inset 0 0 0 2px var(--gold)}
.exo .addon-step,.exo .addon-step button{border:0;border-radius:999px;background:var(--cs1);color:var(--ink)}
.exo .players-row,.exo .trf-warn,.exo .mod-warn{border:0;border-radius:16px}
.exo .players-row{background:var(--cs2)}
.exo .cust-toggle{border:0;border-radius:999px;background:var(--cs2);color:var(--ink)}
.exo .cust-panel{border:0;border-radius:16px;background:var(--cs2)}
.exo .cust-input{border:0;border-radius:12px;background:var(--cs1);color:var(--ink)}
.exo .cust-input:focus{box-shadow:0 0 0 2px var(--gold)}
.exo .cust-btn{border:0;border-radius:999px}

/* ── location ── */
.exo .loc-card{border:0;border-radius:16px;background:var(--cs2)}
.exo .loc-card:hover{background:color-mix(in srgb,var(--cs2) 84%,var(--ink));border:0}
.exo .loc-card.selected{background:color-mix(in srgb,var(--gold) 12%,var(--cs2));box-shadow:inset 0 0 0 2px var(--gold);border:0}
.exo .loc-tooltip{border:0;border-radius:10px;background:var(--cs2)}

/* ── account step ── */
.exo .auth-tabs{border:0;border-radius:999px;background:var(--cs2);padding:4px}
.exo .auth-tab{border:0;border-radius:999px;color:var(--mu)}
.exo .auth-tab.active{background:var(--gold);color:#0b0b0c;box-shadow:none}
.exo .auth-field input{border:0;border-radius:12px;background:var(--cs2);color:var(--ink);min-height:48px}
.exo .auth-field input:focus{box-shadow:0 0 0 2px var(--gold);border:0}
.exo .auth-welcome{border:0;border-radius:16px;background:var(--cs2)}

/* ── summary (right column) ── */
.exo .sum{background:var(--cs1);border:0;border-radius:24px}
.exo .sum-row{border-color:color-mix(in srgb,var(--ink) 8%,transparent)}
.exo .sum-total{font-family:var(--disp);letter-spacing:-.03em}
.exo .sum-btn{border:0;border-radius:999px;background:var(--gold);color:#0b0b0c;box-shadow:none}
.exo .sum-btn:hover:not(:disabled){background:var(--gold-l);transform:none;box-shadow:none}
.exo .sum-btn-ghost{border:0;background:var(--cs2);color:var(--ink)}
.exo .calc{background:var(--cs1);border:0;border-radius:20px}

/* ── /payment ── */
.exo .pay-card{background:var(--cs1);border:0;border-radius:24px}
.exo .pay-head{border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.exo .pay-item{border-bottom:1px solid color-mix(in srgb,var(--ink) 7%,transparent)}
.exo .pay-term,.exo .pay-method,.exo .coin-btn{border:0;background:var(--cs2)}
.exo .pay-term:hover,.exo .pay-method:hover,.exo .coin-btn:hover{border:0;background:color-mix(in srgb,var(--cs2) 84%,var(--ink))}
.exo .pay-term.sel,.exo .pay-method.sel{background:color-mix(in srgb,var(--gold) 12%,var(--cs2));box-shadow:inset 0 0 0 2px var(--gold);border:0}
.exo .pay-mic{background:var(--cs1)}
.exo .pay-promo-row input{border:0;border-radius:12px;background:var(--cs2);color:var(--ink)}
.exo .pay-promo-row input:focus{box-shadow:0 0 0 2px var(--gold)}
.exo .pay-promo-btn{border:0;border-radius:999px}
.exo .pay-cta{border-radius:999px;background:var(--gold);color:#0b0b0c}
.exo .pay-cta:hover{background:var(--gold-l)}
.exo .pay-cta-ghost{border:0;background:var(--cs2);color:var(--ink)}
.exo .pay-cta-ghost:hover{background:color-mix(in srgb,var(--cs2) 84%,var(--ink))}
.exo .pay-crypto-box{border:0;background:var(--cs2);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 45%,transparent)}

/* map of locations: the «full» badge sat on the city name (on phones — on Frankfurt's too). The dimmed
   dot and the cards under the map already say a location is full; on phones the full ones lose the name. */
.exo .loc-marker.full .loc-marker-badge{display:none}
@media (max-width:639px){.exo .loc-marker.full .loc-marker-label{display:none}}

/* ── contrast ── grey hints were #666 on the card fill (2.9:1 in the dark theme); in the light theme the
   gold (#d4a853) and green (#22c55e) used as text sit at 1.5–2.2:1 on the light fills — darker twins there. */
.exo{--text-muted:color-mix(in srgb,var(--ink) 56%,transparent)}
.exo .trf-badge.rec{background:var(--ok);color:#0b0b0c}
[data-theme="light"] .exo{--green:#15803d}
[data-theme="light"] .exo .trf-badge.rec{color:#fff}
[data-theme="light"] .exo :is(.reg-consent a,.period-save,.trf-fo,.trf-ram small,.cust-toggle b,.stp.active .stp-name,.stp-list li.done .stp-name,.stp-title,.sum-title,.pay-badge,.pay-total-v,.pay-term.sel .pay-term-n,.pay-bal-amt){color:var(--gold-tx)}