/* ===== crypto checkout (assets/css/checkout.css) ===== */

.co-wrap{ min-height:60vh; padding:30px 0 70px; }
.co-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:38px; align-items:start; }

.co-back{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--tx-faint); transition:color .2s; }
.co-back:hover{ color:var(--co); } .co-back svg{ transform:rotate(180deg); }
.co-h1{ font-size:clamp(30px,4vw,46px); margin:14px 0 16px; }
.co-steps{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
.cs{ font-family:var(--mono); font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--tx-faint); padding:7px 13px; border:1px solid var(--line); border-radius:999px; }
.cs.on{ color:var(--co-deep); background:var(--co-wash); border-color:var(--co-line); }

.co-card{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card); padding:22px 22px; margin-bottom:16px; }
.co-card-h{ display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.co-card-h .n{ width:28px; height:28px; flex:0 0 auto; border-radius:8px; display:grid; place-items:center; font-family:var(--serif); font-weight:560; color:var(--co-on); background:var(--co); font-size:15px; }
.co-card-h h3{ font-size:19px; font-weight:540; } .co-card-h .co-save-pill{ margin-left:auto; }

.co-fields{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fl{ display:flex; flex-direction:column; gap:6px; } .fl.full{ grid-column:1/-1; }
.fl span{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--tx-faint); }
.fl input{ border:1px solid var(--line-2); background:var(--paper); border-radius:var(--r-sm); padding:13px 15px; font-size:14.5px; color:var(--ink); outline:none; transition:border-color .2s; }
.fl input:focus{ border-color:var(--co); }
.co-note{ display:flex; align-items:center; gap:9px; margin-top:14px; font-size:12px; color:var(--tx-mut); } .co-note svg{ color:var(--cr); flex:0 0 auto; }

/* order bump */
.co-bump{ border-color:var(--au); background:linear-gradient(180deg, var(--au-wash), var(--card)); }
.co-bump .co-card-h .n{ background:var(--au); color:var(--ink); }
.co-bump-tag{ margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--au-deep); font-weight:600; }
.co-bumps{ display:flex; flex-direction:column; gap:10px; }
.co-bump-row{ display:flex; align-items:center; gap:13px; padding:13px 14px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--card); cursor:pointer; transition:border-color .2s, background .2s; }
.co-bump-row:hover{ border-color:var(--au); }
.co-bump-row.on{ border-color:var(--au); background:var(--au-wash); box-shadow:0 0 0 1px var(--au); }
.co-bump-row input{ position:absolute; opacity:0; pointer-events:none; }
.co-bump-row .cb{ width:22px; height:22px; flex:0 0 auto; border-radius:6px; border:2px solid var(--line-2); display:grid; place-items:center; transition:all .2s; }
.co-bump-row .cb::after{ content:"✓"; color:#fff; font-size:13px; font-weight:700; opacity:0; transition:opacity .2s; }
.co-bump-row.on .cb{ background:var(--au); border-color:var(--au); } .co-bump-row.on .cb::after{ opacity:1; }
.co-bump-row .bv{ width:30px; height:40px; flex:0 0 auto; border-radius:6px; border:1px solid var(--line); background:radial-gradient(100% 90% at 50% 20%, var(--co-wash), var(--paper-2)); display:grid; place-items:center; overflow:hidden; }
.co-bump-row .bm{ flex:1; min-width:0; } .co-bump-row .bm b{ font-size:14px; font-weight:650; display:block; } .co-bump-row .bm span{ font-size:11.5px; color:var(--tx-mut); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.co-bump-row .bp{ text-align:right; flex:0 0 auto; } .co-bump-row .bp b{ font-size:14px; font-weight:700; color:var(--cr-deep); } .co-bump-row .bp .was{ display:block; font-size:11px; color:var(--tx-faint); text-decoration:line-through; }

/* coins */
.co-coins{ display:flex; gap:9px; flex-wrap:wrap; }
.co-coin{ display:inline-flex; align-items:center; gap:8px; padding:12px 17px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--card); font-family:var(--mono); font-size:13.5px; font-weight:600; color:var(--tx-soft); transition:all .18s; }
.co-coin .cc-ic{ color:var(--cr); display:flex; } .co-coin:hover{ border-color:var(--tx-faint); }
.co-coin.sel{ border-color:var(--cr); background:var(--cr-wash); color:var(--cr-deep); box-shadow:0 0 0 1px var(--cr); }
.co-pay-note{ display:flex; align-items:flex-start; gap:9px; margin-top:14px; font-size:12.5px; color:var(--tx-mut); line-height:1.5; } .co-pay-note svg{ color:var(--co); flex:0 0 auto; margin-top:2px; }

.co-pay{ margin-top:6px; }
.co-guarantees{ display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; margin-top:16px; }
.co-guarantees span{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--tx-mut); } .co-guarantees svg{ color:var(--cr); }

/* summary */
.co-side{ position:sticky; top:90px; }
.co-sum{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card); padding:22px; box-shadow:var(--sh); }
.co-sum h3{ font-size:19px; font-weight:540; margin-bottom:16px; }
.co-lines{ display:flex; flex-direction:column; gap:13px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.co-li{ display:flex; align-items:center; gap:11px; }
.co-li .qn{ font-family:var(--mono); font-size:12px; color:var(--tx-faint); flex:0 0 auto; }
.co-li .lv{ width:30px; height:40px; flex:0 0 auto; border-radius:6px; border:1px solid var(--line); background:radial-gradient(100% 90% at 50% 20%, var(--co-wash), var(--paper-2)); display:grid; place-items:center; overflow:hidden; }
.co-li .lm{ flex:1; min-width:0; } .co-li .lm b{ font-size:13.5px; font-weight:600; display:block; line-height:1.2; }
.co-li .ls, .co-li .lb{ font-family:var(--mono); font-size:10.5px; color:var(--tx-faint); } .co-li .lb{ color:var(--co-deep); } .co-li .ls.add{ color:var(--cr-deep); }
.co-li .lp{ font-weight:650; font-size:14px; flex:0 0 auto; }
.co-li.bump .lv{ border-color:var(--au); }
.co-rows{ display:flex; flex-direction:column; gap:9px; padding:16px 0; border-bottom:1px solid var(--line); }
.cr-row{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--tx-soft); } .cr-row.save{ color:var(--cr-deep); font-weight:600; }
.co-total{ display:flex; justify-content:space-between; align-items:baseline; padding-top:16px; } .co-total span:first-child{ font-family:var(--serif); font-size:20px; } .co-total span:last-child{ font-family:var(--serif); font-size:28px; font-weight:560; }
.co-coineq{ display:flex; align-items:center; gap:8px; margin-top:10px; font-family:var(--mono); font-size:11px; color:var(--tx-mut); background:var(--cr-wash); border:1px solid var(--cr-line); border-radius:var(--r-sm); padding:9px 11px; } .co-coineq svg{ color:var(--cr); flex:0 0 auto; } .co-coineq b{ color:var(--cr-deep); }
.co-seals{ display:flex; justify-content:center; gap:16px; margin-top:14px; }
.co-seals span{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:0.03em; color:var(--tx-faint); }
.co-tp{ display:flex; justify-content:center; margin-top:16px; }
.co-promo{ display:flex; gap:8px; margin-top:16px; } .co-promo input{ flex:1; min-width:0; border:1px solid var(--line-2); background:var(--paper); border-radius:var(--r-sm); padding:11px 13px; font-size:13px; outline:none; } .co-promo input:focus{ border-color:var(--co); } .co-promo .btn{ padding:11px 18px; }

/* empty */
.co-empty{ grid-column:1/-1; text-align:center; padding:60px 20px; }
.co-empty-ic{ width:60px; height:60px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center; color:var(--co); background:var(--co-wash); }
.co-empty h2{ font-size:28px; margin-bottom:8px; } .co-empty p{ color:var(--tx-mut); margin-bottom:22px; }
.co-empty-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* hosted invoice screen */
.co-pay-screen{ grid-column:1/-1; max-width:520px; margin:0 auto; text-align:center; }
.co-pay-card{ border:1px solid var(--line); border-radius:var(--r-xl); background:var(--card); box-shadow:var(--sh-lg); padding:30px; }
.co-pay-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.co-timer{ font-family:var(--mono); font-size:14px; font-weight:600; color:var(--rd); background:var(--rd-wash); padding:5px 11px; border-radius:999px; }
.co-pay-card h2{ font-size:18px; color:var(--tx-soft); font-weight:540; }
.co-amt{ font-family:var(--serif); font-size:42px; font-weight:560; letter-spacing:-0.02em; margin:6px 0 2px; } .co-amt span{ font-size:24px; color:var(--cr-deep); }
.co-fiat{ font-family:var(--mono); font-size:12px; color:var(--tx-mut); margin-bottom:22px; }
.co-qr{ display:flex; align-items:center; gap:18px; justify-content:center; padding:18px; border:1px solid var(--line); border-radius:var(--r); background:var(--paper-2); }
.co-qr .qr{ color:var(--ink); flex:0 0 auto; background:#fff; padding:8px; border-radius:8px; border:1px solid var(--line); }
.co-addr{ text-align:left; min-width:0; } .co-addr span{ font-family:var(--mono); font-size:10px; letter-spacing:0.05em; text-transform:uppercase; color:var(--tx-faint); display:block; margin-bottom:4px; }
.co-addr code{ font-family:var(--mono); font-size:11.5px; color:var(--ink); word-break:break-all; display:block; line-height:1.4; }
.co-copy{ margin-top:8px; font-family:var(--mono); font-size:11px; color:var(--co); border:1px solid var(--co-line); border-radius:6px; padding:5px 12px; }
.co-pay-state{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:20px; font-size:13px; color:var(--tx-soft); } .co-pay-state svg{ color:var(--co); }
.co-confirming{ display:inline-flex; align-items:center; gap:9px; color:var(--cr-deep); font-weight:600; }
.co-confirming svg{ color:var(--cr); animation:spin 1.2s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.co-pay-fine{ font-family:var(--mono); font-size:11px; color:var(--tx-faint); line-height:1.6; margin-top:18px; }

/* not-connected notice (replaces the old auto-confirm demo) */
.co-notice{ text-align:center; }
.co-notice-ic{ width:60px; height:60px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center; color:var(--co); background:var(--co-wash); }
.co-notice-ic svg{ width:26px; height:26px; }
.co-notice h2{ font-size:24px; margin-bottom:10px; color:var(--ink); }
.co-notice p{ color:var(--tx-soft); font-size:15px; max-width:46ch; margin:0 auto 22px; line-height:1.6; }
.co-notice .co-succ-cta{ justify-content:center; }

/* success */
.co-success{ grid-column:1/-1; max-width:560px; margin:0 auto; text-align:center; padding:40px 20px; }
.co-tick{ width:84px; height:84px; margin:0 auto 22px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--cr); box-shadow:0 16px 40px -16px var(--cr); animation:pop .5s var(--pop); }
.co-tick svg{ width:42px; height:42px; }
@keyframes pop{ from{ transform:scale(.5); opacity:0; } }
.co-success h1{ font-size:clamp(32px,5vw,48px); margin-bottom:12px; } .co-success p{ color:var(--tx-soft); font-size:16px; max-width:44ch; margin:0 auto 24px; } .co-success p b{ color:var(--ink); }
.co-succ-row{ display:flex; justify-content:center; gap:20px; flex-wrap:wrap; margin-bottom:28px; }
.co-succ-row span{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--tx-mut); } .co-succ-row svg{ color:var(--cr); }
.co-succ-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

@media(max-width:920px){
  .co-grid{ grid-template-columns:1fr; gap:24px; }
  .co-side{ position:static; order:-1; }
}
@media(max-width:560px){
  .co-fields{ grid-template-columns:1fr; }
  .co-qr{ flex-direction:column; } .co-addr{ text-align:center; }
}