/* Checkout wizard: catalogue checkout and marketplace lot share it. */

.wz{
  position:relative;width:100%;max-width:1000px;max-height:min(800px,94vh);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  border-radius:30px;background:#070a11;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 50px 120px rgba(0,0,0,.95),0 0 80px rgba(168,221,255,.08),inset 0 1px 0 rgba(255,255,255,.14);
  animation:wz-pop .5s var(--ease) both;
}
@keyframes wz-pop{from{opacity:0;transform:translateY(28px) scale(.95)}}
.wz-close{
  position:absolute;top:18px;right:18px;z-index:6;width:38px;height:38px;border-radius:50%;
  background:rgba(6,9,16,.65);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);color:#aebccb;font-size:13px;
  transition:all .25s var(--ease);
}
.wz-close:hover{color:#fff;background:rgba(255,255,255,.16);transform:rotate(90deg)}

/* ── left: the product, full-bleed ──────── */
.wz-side{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:30px;min-height:420px;overflow:hidden;background:#050810}
.wz-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.wz-media video,.wz-media .s-img,.wz-media .s-ph{width:100%;height:100%;object-fit:cover;display:block;opacity:.8}
.wz-media .s-img{background-size:cover;background-position:center;animation:wz-ken 16s ease-in-out infinite alternate}
.wz-media .s-ph{display:grid;place-items:center;font:900 140px var(--display);letter-spacing:-.06em;color:rgba(168,221,255,.12);
  background:radial-gradient(120% 90% at 25% 15%,rgba(168,221,255,.22),transparent 60%),
    radial-gradient(90% 80% at 85% 95%,rgba(80,130,220,.2),transparent 60%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 2px,transparent 2px 16px),#070b13}
.wz-side::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,8,16,.25) 0%,rgba(5,8,16,.55) 45%,rgba(5,8,16,.96) 100%)}
.wz-side > *:not(.wz-media){position:relative;z-index:2}
.wz-cat{align-self:flex-start;padding:5px 11px;border-radius:100px;font:700 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:#e2f4ff;background:rgba(6,9,16,.6);backdrop-filter:blur(8px);border:1px solid rgba(168,221,255,.28)}
.wz-name{margin:6px 0 0;padding-right:46px;font:800 clamp(22px,2.6vw,30px)/1.12 var(--display);letter-spacing:-.04em}
.wz-desc{margin:0;font-size:13px;line-height:1.65;color:#a9b6c6;max-height:132px;overflow:auto;white-space:pre-line}
.wz-chips{display:flex;flex-wrap:wrap;gap:6px}
.wz-chip{padding:4px 10px;border-radius:8px;font:600 10.5px var(--mono);color:#cfe0ee;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.wz-price{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:6px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
.wz-price span{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8e9db0}
.wz-price b{font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.05em;color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:0 0 32px rgba(168,221,255,.45)}
.wz-seller{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:rgba(6,9,16,.55);
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}
.wz-seller .seller-av{width:38px;height:38px;font-size:15px}
.wz-seller-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wz-seller-name{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px}
.wz-seller-text > span{font:500 10.5px var(--mono);color:#8e9db0}

/* ── right: steps ───────────────────────── */
.wz-main{display:flex;flex-direction:column;min-height:0;padding:28px 30px 26px;overflow-y:auto}
.wz-steps{position:relative;list-style:none;margin:0 0 24px;padding:0 46px 0 0;display:flex;align-items:center}
.wz-steps li{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;color:var(--text-3);white-space:nowrap}
.wz-steps li:not(:last-child){flex:1}
.wz-steps li:not(:last-child)::after{content:"";flex:1;height:2px;margin:0 12px;border-radius:2px;background:rgba(255,255,255,.1);
  background-image:linear-gradient(90deg,var(--accent),var(--accent));background-repeat:no-repeat;background-size:0% 100%;
  transition:background-size .6s var(--ease)}
.wz-steps li.done:not(:last-child)::after{background-size:100% 100%}
.wz-steps i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:800 11px var(--mono);font-style:normal;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:all .35s var(--ease)}
.wz-steps li span{display:none}
.wz-steps li.on span{display:inline}
.wz-steps li.on{color:#e2f4ff}
.wz-steps li.on i{background:var(--accent);color:var(--bg);border-color:var(--accent);box-shadow:0 0 0 5px rgba(168,221,255,.14),0 0 22px rgba(168,221,255,.5)}
.wz-steps li.done{color:var(--text-2)}
.wz-steps li.done i{background:rgba(126,231,135,.15);color:var(--ok);border-color:rgba(126,231,135,.45);font-size:0}
.wz-steps li.done i::before{content:"✓";font-size:12px}

.wz-stage{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}
.wz-pane{display:none;flex-direction:column;gap:18px;flex:1}
.wz-pane.on{display:flex;animation:wz-fwd .5s var(--ease) both}
.wz-pane.on[data-dir="back"]{animation-name:wz-back}
@keyframes wz-fwd{from{opacity:0;transform:translateX(34px)}}
@keyframes wz-back{from{opacity:0;transform:translateX(-34px)}}
.wz-title{margin:0;font:800 19px var(--display);letter-spacing:-.03em}
.wz-sub{margin:-8px 0 0;font-size:13px;color:var(--text-3)}
.wz-sec-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;
  font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}

.wz-actions{display:flex;gap:10px;margin-top:auto;padding-top:20px}
.wz-actions .btn{border-radius:100px;min-height:48px}
.wz-actions .wz-go{flex:1;font-family:var(--display);font-weight:800;font-size:13px;box-shadow:0 0 30px rgba(168,221,255,.26)}
.wz-actions .wz-go:hover{box-shadow:0 0 46px rgba(168,221,255,.5)}
.wz-back-3{align-self:flex-start;margin-top:auto}
[data-step="4"] .wz-back-3{display:none}

/* options: periods + payment tiles */
.wz-periods{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.wz-opt{display:flex;flex-direction:column;gap:4px;text-align:left;padding:13px 14px;border-radius:16px;color:inherit;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);transition:all .25s var(--ease)}
.wz-opt:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2)}
.wz-opt.on{background:linear-gradient(180deg,rgba(168,221,255,.1),rgba(168,221,255,.02));border-color:var(--accent);
  box-shadow:0 0 22px rgba(168,221,255,.12),inset 0 1px 0 rgba(255,255,255,.18);transform:translateY(-1px)}
.wz-opt b{font-size:13.5px;color:#fff}
.wz-opt i{font:800 14px var(--mono);font-style:normal;font-variant-numeric:tabular-nums;color:var(--text-2)}
.wz-opt.on i{color:#fff}
.wz-opt span{font:500 10px var(--mono);color:var(--danger)}

.wz-pays{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wz-pays .pay{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px 16px;border-radius:16px;cursor:pointer;color:inherit;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);transition:all .25s var(--ease)}
.wz-pays .pay b{font-size:14px;font-weight:700;color:#fff}
.wz-pays .pay span{font:500 10.5px var(--mono);color:var(--ok)}
.wz-pays .pay:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2)}
.wz-pays .pay.on{background:linear-gradient(180deg,rgba(168,221,255,.1),rgba(168,221,255,.02));border-color:var(--accent);
  box-shadow:0 0 22px rgba(168,221,255,.12);transform:translateY(-1px)}
.wz-pays .pay.soon,.wz-pays .pay.off{opacity:.42;cursor:not-allowed}
.wz-pays .pay.soon span,.wz-pays .pay.off span{color:var(--text-3)}

/* confirm: receipt */
.wz-receipt{margin:0;padding:6px 18px;border-radius:18px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.08)}
.wz-receipt div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px dashed rgba(255,255,255,.1)}
.wz-receipt div:last-child{border-bottom:0;padding-top:14px}
.wz-receipt dt{font-size:12.5px;color:var(--text-3)}
.wz-receipt dd{margin:0;font-size:13.5px;font-weight:700;text-align:right}
.wz-receipt div:last-child dd{font-size:22px;font-weight:800;letter-spacing:-.04em;color:#e2f4ff}
.wz-note{margin:0;text-align:center;font-size:11.5px;color:#6a7788}

/* embedded payment (QR / address / success) */
.pm-embedded{width:100%}
.pm-embedded .pm-head{display:block}
.pm-embedded .pm-close,.pm-embedded .pm-steps{display:none}
.pm-embedded .pay-qr-plate{margin-top:10px}
/* once the key is issued the wizard's own header and price stand in for the payment head */
.pm-embedded:has(.pm-success) .pm-head,.pm-embedded:has(.pm-success) .pm-amount{display:none}
.wz-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.wz-thumbs:empty{display:none}
.wz-thumbs img{width:54px!important;height:54px!important;object-fit:cover;border-radius:12px!important;border:1px solid rgba(255,255,255,.18)!important;cursor:zoom-in}
.wz-instant{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;font-size:12px;color:#cfe0ee;
  background:rgba(6,9,16,.6);backdrop-filter:blur(8px);border:1px solid rgba(168,221,255,.28)}
.wz-instant svg{color:var(--accent);flex:none}
.wz-instant b{color:#fff}

/* spark burst on success */
.wz-spark{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:2px;pointer-events:none;
  background:var(--accent);box-shadow:0 0 10px var(--accent);opacity:0;animation:wz-spark 1.1s var(--ease) var(--d,0ms) both}
.wz-spark:nth-child(3n){background:var(--ok);box-shadow:0 0 10px var(--ok)}
.wz-spark:nth-child(4n){background:#fff;box-shadow:0 0 10px #fff}
@keyframes wz-spark{0%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3) rotate(220deg)}}

/* ── responsive ─────────────────────────── */
@media (max-width:900px){
  .wz{grid-template-columns:1fr;overflow-y:auto;max-height:94vh}
  .wz-side{min-height:0;padding:22px;justify-content:flex-start}
  .wz-media{opacity:.9}
  .wz-desc{max-height:76px}
  .wz-main{overflow:visible;padding:22px}
}
@media (max-width:640px){
  .wz{border-radius:26px 26px 0 0;max-height:96vh}
  .wz-steps li span{display:none}
  .wz-steps li.on span{display:inline}
  .wz-pays{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .wz,.wz-pane.on,.wz-media .s-img{animation:none}
  .wz-spark{display:none}
}

/* charge currency picker for card / Apple Pay / Google Pay */
.wz-cur{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center;margin-top:12px;padding:12px 14px;border-radius:16px;
  background:rgba(168,221,255,.05);border:1px solid rgba(168,221,255,.18)}
.wz-cur-label{font:700 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.wz-cur .field{height:40px;border-radius:12px;padding:0 12px;font-size:13.5px}
.wz-cur-quote{grid-column:1/-1;font:600 12px var(--mono);color:#cfe7fa}