/* ============================================================
   Checkout de la tienda (modal): método de pago, número de orden, monto exacto,
   chequeo en la red y mensaje para el ticket de Discord. Lógica: js/checkout.js
   ============================================================ */
.ck { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: rgba(5, 4, 18, .74); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: ckfade .25s var(--ease); }
@keyframes ckfade { from { opacity: 0; } }
body.ck-open { overflow: hidden; }
.ck-in { position: relative; width: min(700px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 28px 30px 30px; border-radius: 20px; background: var(--bg2); box-shadow: 0 40px 100px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--line2); animation: ckin .35s var(--ease); scrollbar-width: thin; }
@keyframes ckin { from { transform: translateY(14px) scale(.98); opacity: 0; } }
.ck-x { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--mute); background: rgba(255, 255, 255, .06); transition: color .2s, background .2s; }
.ck-x:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.ck-x .ico { width: 18px; height: 18px; }
.ck-head { padding-right: 50px; margin-bottom: 18px; }
.ck-title { margin: 10px 0 8px; font: 400 clamp(30px, 4vw, 40px)/1 var(--f-d); text-transform: uppercase; }
.ck-order { display: flex; align-items: center; gap: 10px; font: 700 13px/1 var(--f-c); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.ck-order b { padding: 6px 10px; border-radius: 7px; font: 700 14px/1 var(--f-m); letter-spacing: .08em; color: var(--gold); background: rgba(255, 216, 74, .1); box-shadow: inset 0 0 0 1px rgba(255, 216, 74, .35); }
.ck-price { margin-left: auto; font: 400 22px/1 var(--f-d); color: #fff; }

/* Paso 1: métodos */
.ck-h { margin: 0 0 12px; font: 700 13px/1 var(--f-c); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }
.ck-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.ck-m { display: grid; grid-template-columns: 42px 1fr; gap: 4px 12px; align-items: center; padding: 14px; border-radius: 14px; text-align: left; color: #fff; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, box-shadow .2s, transform .2s; }
.ck-m:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px var(--cyan); transform: translateY(-2px); }
.ck-m i { grid-row: 1 / 3; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; font: 700 20px/1 var(--f-c); font-style: normal; color: #fff; background: var(--c, #5865f2); box-shadow: 0 8px 18px color-mix(in srgb, var(--c, #5865f2) 45%, transparent); }
.ck-m i .ico { width: 20px; height: 20px; }
.ck-m b { font: 600 15px/1.1 var(--f-b); }
.ck-m small { font: 500 11.5px/1.2 var(--f-b); color: var(--mute); }
.ck-m.ltc { --c: #8a8d93; } .ck-m.btc { --c: #f7931a; } .ck-m.eth { --c: #627eea; } .ck-m.sol { --c: #9945ff; } .ck-m.paypal { --c: #0070ba; } .ck-m.discord { --c: #5865f2; }

/* Paso 2: pagar */
.ck-pay { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; align-items: start; }
.ck-qr { padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, .4); }
.ck-qr img { width: 100%; height: auto; display: block; }
.ck-lab { font: 700 12px/1 var(--f-c); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.ck-amt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin: 6px 0 4px; font: 400 34px/1 var(--f-d); color: var(--gold); text-shadow: 0 0 20px rgba(255, 216, 74, .35); word-break: break-all; }
.ck-amt small { font: 600 14px/1 var(--f-b); color: var(--mute); }
.ck-note { font-size: 13.5px; color: var(--mute); }
.ck-note.warn { color: #ffb4c4; }
.ck-addr { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 10px 10px 12px; border-radius: 10px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font: 500 13px/1.35 var(--f-m); color: #e9e4ff; word-break: break-all; }
.ck-addr code { flex: 1; font: inherit; }
.ck-copy { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 8px; font: 700 11.5px/1 var(--f-c); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); background: rgba(34, 211, 238, .1); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .3); transition: filter .2s, color .2s; }
.ck-copy:hover { filter: brightness(1.2); }
.ck-copy.ok { color: var(--ok); }
.ck-copy .ico { width: 13px; height: 13px; }
.ck-status { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); font: 700 12px/1.35 var(--f-c); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.ck-status i { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .2); border-top-color: var(--cyan); animation: spin 1s linear infinite; }
.ck-status.off i { border: 0; background: var(--dim); animation: none; }
.ck-status.ok { color: var(--ok); }
.ck-status.ok i { border: 0; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: ping 2s infinite; }
.ck-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ck-actions .btn { --h: 44px; }

/* Paso 3: listo */
.ck-done { text-align: center; }
.ck-badge { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 999px; font: 700 12px/1 var(--f-c); letter-spacing: .18em; text-transform: uppercase; color: #ffd84a; background: rgba(255, 216, 74, .1); box-shadow: inset 0 0 0 1px rgba(255, 216, 74, .35); }
.ck-badge.ok { color: var(--ok); background: rgba(61, 220, 132, .1); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .4); }
.ck-badge i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ck-claim { margin: 16px 0 14px; font: 400 clamp(28px, 4vw, 38px)/1 var(--f-d); text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ck-steps { display: grid; gap: 8px; max-width: 520px; margin: 16px auto 0; padding: 0; counter-reset: s; text-align: left; }
.ck-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; counter-increment: s; font-size: 14.5px; color: #d9d4f4; }
.ck-steps li::before { content: counter(s); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font: 700 13px/1 var(--f-m); color: #160a32; background: var(--grad); }
.ck-big { margin: 6px 0 6px; font: 700 clamp(26px, 5vw, 40px)/1 var(--f-m); letter-spacing: .08em; color: var(--gold); text-shadow: 0 0 24px rgba(255, 216, 74, .35); }
.ck-keep { font: 700 12px/1.4 var(--f-c); letter-spacing: .14em; text-transform: uppercase; color: #ffb4c4; }
.ck-done p.ck-note { margin: 14px auto 0; max-width: 520px; }
.ck-msg { width: 100%; min-height: 96px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; resize: vertical; font: 500 13.5px/1.5 var(--f-m); color: #e9e4ff; background: var(--bg); border: 1px solid var(--line2); outline: none; }
.ck-done .ck-actions { justify-content: center; }

@media (max-width: 640px) {
  .ck { padding: 10px; }
  .ck-in { padding: 22px 18px 22px; border-radius: 16px; max-height: calc(100vh - 20px); }
  .ck-methods { grid-template-columns: 1fr 1fr; }
  .ck-pay { grid-template-columns: 1fr; }
  .ck-qr { width: 180px; margin: 0 auto; }
  .ck-price { display: none; }
}