.gp-order-page{--gp-accent:#088fe7;--gp-edge:#d6e9f3;--gp-tint:#edf9ff;display:grid;gap:18px;padding-bottom:50px;color:var(--ink)}
.gp-order-back{display:inline-flex;align-items:center;justify-self:start;gap:7px;color:var(--blue);font-size:12px;font-weight:650;text-decoration:none}
.gp-order-back:hover{text-decoration:underline;text-underline-offset:3px}
.gp-order-hero,.gp-order-card{border:1px solid var(--gp-edge);border-radius:22px;background:var(--surface);box-shadow:0 13px 35px -31px #096a9c50}
.gp-order-hero{position:relative;overflow:hidden;padding:27px 31px 23px;background:linear-gradient(115deg,var(--surface) 56%,var(--gp-tint) 100%)}
.gp-order-hero::after{position:absolute;right:-65px;top:-105px;width:270px;height:270px;border-radius:50%;background:radial-gradient(circle,#34c8ff1c,transparent 70%);content:"";pointer-events:none}
.gp-order-top,.gp-order-title-row,.gp-order-section-head,.gp-order-payment-total{display:flex;align-items:center;justify-content:space-between;gap:16px}
.gp-order-top,.gp-order-title-row,.gp-order-stages{position:relative;z-index:1}
.gp-order-eyebrow{color:var(--gp-accent);font-size:10px;font-weight:750;letter-spacing:1.3px}
.gp-order-top .status-badge{max-width:none;white-space:nowrap}
.gp-order-title-row{align-items:flex-end;margin:18px 0 25px}
.gp-order-title-row h1{margin:0 0 7px;font-size:36px;font-weight:720;letter-spacing:-1.4px;line-height:1.15}
.gp-order-title-row p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.gp-order-amount{flex:0 0 auto;min-width:176px;padding:14px 17px;border-radius:16px;background:#e9f7ff;text-align:right}
.gp-order-amount small{display:block;color:var(--muted);font-size:10px}
.gp-order-amount strong{display:block;margin-top:3px;font-size:26px;font-weight:750;letter-spacing:-.8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.gp-order-amount strong span{font-size:16px;color:var(--gp-accent)}
.gp-order-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:0;padding:0;list-style:none}
.gp-order-stages li{display:flex;align-items:center;gap:9px;min-width:0;padding:12px 13px;border:1px solid var(--gp-edge);border-radius:12px;background:color-mix(in srgb,var(--surface) 78%,transparent);color:var(--muted)}
.gp-order-stages li span{display:grid;place-items:center;flex:0 0 23px;width:23px;height:23px;border-radius:50%;background:var(--surface-soft);font-size:11px;font-weight:750}
.gp-order-stages li b{font-size:11px;font-weight:650;line-height:1.25}
.gp-order-stages li.is-done{color:#167f6c;background:#eefaf6;border-color:#d3eee4}
.gp-order-stages li.is-done span{background:#d7f3e8}
.gp-order-stages li.is-current{color:var(--gp-accent);background:#e8f7ff;border-color:#bfe7fb}
.gp-order-stages li.is-current span{background:#cdefff}
.gp-order-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(270px,.75fr);align-items:start;gap:18px}
.gp-order-main,.gp-order-side{display:grid;gap:18px;min-width:0}
.gp-order-card{min-width:0;padding:25px}
.gp-order-card h2{margin:8px 0 0;font-size:21px;font-weight:700;letter-spacing:-.5px}
.gp-order-clock{border-color:#bde4f7;background:linear-gradient(135deg,#edfaff 0%,#dff4ff 100%)}
.gp-order-clock h2{margin-bottom:19px}
.gp-order-finished{position:relative;overflow:hidden;border-color:#b9e7d6;background:linear-gradient(130deg,#f1fcf7,#e8f8f2)}
.gp-order-finished h2{margin:9px 0 8px}
.gp-order-finished p{max-width:490px;margin:0;color:var(--muted);font-size:13px;line-height:1.65}
.gp-order-finish-icon{display:grid;place-items:center;float:right;width:43px;height:43px;border-radius:50%;background:#d5f4e6;color:#218466;font-size:21px;font-weight:800}
.gp-order-clock .gamepass-countdown{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.gp-timer-units{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gp-timer-units>div{min-width:0;padding:15px 10px 12px;border:1px solid #cce9f8;border-radius:14px;background:#ffffffb8;text-align:center}
.gp-timer-units strong{display:block;font-size:34px;font-weight:760;line-height:1.05;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.gp-timer-units span{display:block;margin-top:6px;color:var(--muted);font-size:10px;font-weight:650}
.gp-order-clock .gamepass-countdown p{margin:13px 0 0;color:var(--muted);font-size:11px;line-height:1.55}
.gp-order-pending{display:flex;align-items:flex-start;gap:9px;margin-top:18px;padding:13px 14px;border-radius:12px;background:#ffffff92}
.gp-order-pending-dot{flex:0 0 7px;width:7px;height:7px;margin-top:5px;border-radius:50%;background:var(--gp-accent)}
.gp-order-pending p{margin:0;color:var(--muted);font-size:11px;line-height:1.65}
.gp-order-wait{background:linear-gradient(120deg,var(--surface),var(--gp-tint))}
.gp-order-wait p{margin:13px 0 0;color:var(--muted);font-size:13px;line-height:1.6}
.gp-order-section-head{margin-bottom:20px}
.gp-order-section-head h2{margin:0}
.gp-order-section-head>span{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.gp-order-recipient{display:flex;align-items:center;gap:12px;padding:13px;border-radius:14px;background:var(--surface-soft);color:var(--ink);text-decoration:none}
.gp-order-recipient:hover{background:var(--blue-soft)}
.gp-order-recipient .recipient-dot{background:var(--surface);overflow:hidden}
.gp-order-recipient .recipient-dot img{display:block;width:100%;height:100%;object-fit:cover}
.gp-order-recipient small,.gp-order-recipient strong{display:block}
.gp-order-recipient small{color:var(--muted);font-size:10px}
.gp-order-recipient strong{margin-top:4px;font-size:14px;overflow-wrap:anywhere}
.gp-order-recipient>span:last-child{margin-left:auto;color:var(--gp-accent)}
.gp-order-info-rows{display:grid;gap:0;margin-top:15px}
.gp-order-info-rows>div{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:11px 0;font-size:12px}
.gp-order-info-rows>div+div{border-top:1px solid var(--gp-edge)}
.gp-order-info-rows span,.gp-order-id>span{color:var(--muted)}
.gp-order-info-rows strong{font-weight:650;text-align:right;overflow-wrap:anywhere}
.gp-order-info-rows a{color:var(--gp-accent);text-decoration:none}
.gp-order-info-rows a:hover{text-decoration:underline}
.gp-order-id{display:grid;gap:5px;margin-top:8px;padding:12px 13px;border-radius:12px;background:var(--surface-soft);font-size:10px}
.gp-order-id code{font-size:11px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.gp-order-payment-total{align-items:baseline;margin:12px 0 17px}
.gp-order-payment-total strong{font-size:29px;font-weight:750;letter-spacing:-.6px;white-space:nowrap}
.gp-order-payment-total span{color:var(--muted);font-size:12px}
.gp-order-paid{display:flex;align-items:center;gap:9px;margin:0;padding:12px 13px;border-radius:11px;background:#eaf9f3;color:#177a64;font-size:12px;font-weight:650}
.gp-order-paid span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#c6f0df}
.gp-order-payment .notice{margin:0;font-size:12px}
.gp-order-payment .field-hint{font-size:11px}
.gp-order-payment #resume-kaspi,.gp-order-payment #cancel-order{margin-top:12px}
.gp-order-help p{margin:11px 0 16px;color:var(--muted);font-size:12px;line-height:1.6}
.gp-order-help .secondary-button{width:100%;min-height:43px;font-size:12px}
.gp-order-help .text-button{margin-top:10px;font-size:11px}
[data-theme=dark] .gp-order-page{--gp-accent:#6ed5ff;--gp-edge:#315266;--gp-tint:#1b3748}
[data-theme=dark] .gp-order-hero,[data-theme=dark] .gp-order-card{background:var(--surface);border-color:var(--gp-edge)}
[data-theme=dark] .gp-order-hero{background:linear-gradient(115deg,var(--surface) 50%,#1a3547 100%)}
[data-theme=dark] .gp-order-amount,[data-theme=dark] .gp-order-stages li.is-current{background:#22485f;border-color:#315c73}
[data-theme=dark] .gp-order-stages li{background:#1a303e;border-color:var(--gp-edge)}
[data-theme=dark] .gp-order-stages li.is-done{background:#1c403b;border-color:#2b5f53;color:#91dcc7}
[data-theme=dark] .gp-order-stages li.is-done span{background:#2a5b4f}
[data-theme=dark] .gp-order-stages li.is-current span{background:#2a5872}
[data-theme=dark] .gp-order-clock{background:linear-gradient(135deg,#173548,#1d4559);border-color:#35647b}
[data-theme=dark] .gp-order-finished{background:linear-gradient(130deg,#193d38,#1d443e);border-color:#2c6657}
[data-theme=dark] .gp-order-finish-icon{background:#2a5b4f;color:#a5e4d1}
[data-theme=dark] .gp-timer-units>div,[data-theme=dark] .gp-order-pending{background:#143448;border-color:#35647b}
[data-theme=dark] .gp-order-paid{background:#1c403b;color:#91dcc7}
[data-theme=dark] .gp-order-paid span{background:#2a5b4f}
@media(max-width:760px){.gp-order-body{grid-template-columns:1fr}.gp-order-title-row h1{font-size:31px}.gp-order-page{gap:15px}.gp-order-main,.gp-order-side{gap:15px}}
@media(max-width:520px){.gp-order-hero{padding:21px 19px}.gp-order-card{padding:21px}.gp-order-title-row{align-items:flex-start;flex-direction:column;gap:17px;margin:18px 0 22px}.gp-order-title-row h1{font-size:29px}.gp-order-amount{width:100%;text-align:left}.gp-order-amount strong{font-size:25px}.gp-order-stages{gap:5px}.gp-order-stages li{display:grid;justify-items:center;gap:5px;padding:9px 3px;text-align:center}.gp-order-stages li b{font-size:9px}.gp-order-top .status-badge{font-size:10px}.gp-timer-units{gap:7px}.gp-timer-units>div{padding:13px 5px 10px}.gp-timer-units strong{font-size:30px}.gp-order-section-head{align-items:start}.gp-order-back{font-size:12px}}
@media(max-width:350px){.gp-timer-units strong{font-size:26px}.gp-order-title-row h1{font-size:26px}}