/* ============ Шторка покупки (web purchase) ============
   Повторяет Mini App BuySubscriptionSheet: mobile — шторка снизу
   (sheetUp cubic-bezier(.22,1,.36,1)), desktop ≥720px — центр-модалка.
   Токены — из :root index.html. */

.ck-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;justify-content:center;background:rgba(3,4,9,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .2s ease-out}
.ck-overlay.open{opacity:1;pointer-events:auto}

.ck-sheet{position:relative;width:100%;max-width:480px;max-height:92vh;overflow-y:auto;background:var(--panel-solid,#121931);border:1px solid var(--brd,rgba(126,156,224,.16));border-bottom:0;border-radius:34px 34px 0 0;padding:14px 22px calc(26px + env(safe-area-inset-bottom,0px));transform:translateY(48px);transition:transform .34s cubic-bezier(.22,1,.36,1)}
.ck-overlay.open .ck-sheet{transform:translateY(0)}

.ck-handle{width:40px;height:4px;border-radius:999px;background:rgba(126,156,224,.35);margin:0 auto 14px}
.ck-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:10px;border:1px solid var(--brd,rgba(126,156,224,.16));background:rgba(126,156,224,.08);color:var(--star,#eef2ff);font-size:15px;line-height:1;cursor:pointer}

/* Header */
.ck-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ck-head-ic{width:44px;height:44px;border-radius:13px;background:rgba(255,90,54,.12);display:flex;align-items:center;justify-content:center;font-size:20px}
.ck-head-t{font-weight:800;font-size:17px;color:var(--star,#eef2ff)}
.ck-head-s{font-family:var(--font-mono,monospace);font-size:11px;color:var(--muted,#707aa6);margin-top:2px}

/* Section labels */
.ck-label{font-family:var(--font-mono,monospace);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted,#707aa6);margin:14px 0 8px}

/* Plans 2×2 */
.ck-plans{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ck-plan{display:flex;flex-direction:column;align-items:center;gap:3px;padding:13px 6px;border-radius:16px;border:1px solid var(--brd,rgba(126,156,224,.16));background:rgba(126,156,224,.05);color:var(--text,#c3cdec);cursor:pointer;transition:all .18s;font:inherit}
.ck-plan b{font-size:14px;color:var(--star,#eef2ff);font-weight:700}
.ck-plan span{font-family:var(--font-mono,monospace);font-size:12px;color:var(--muted,#707aa6)}
.ck-plan.on{border-color:var(--flare,#ff5a36);background:rgba(255,90,54,.10);box-shadow:0 0 0 1px rgba(255,90,54,.35),0 6px 22px rgba(255,90,54,.18)}
.ck-plan.on span{color:var(--flare2,#ff8a3c)}

/* Device stepper */
.ck-devrow{display:flex;align-items:center;gap:12px}
.ck-devbtn{width:52px;height:52px;border-radius:15px;border:1px solid var(--brd,rgba(126,156,224,.16));background:rgba(126,156,224,.08);color:var(--star,#eef2ff);font-size:22px;line-height:1;cursor:pointer;transition:all .15s}
.ck-devbtn:active{transform:scale(.94)}
.ck-devbtn:disabled{opacity:.35;cursor:default}
.ck-devnum{flex:1;text-align:center}
.ck-devnum b{display:block;font-size:24px;font-weight:800;color:var(--star,#eef2ff)}
.ck-devnum span{font-size:11px;color:var(--muted,#707aa6)}
.ck-devhint{margin-top:6px;text-align:center;font-size:12px;color:var(--muted,#707aa6)}

/* Email */
.ck-email{width:100%;box-sizing:border-box;padding:14px 16px;border-radius:14px;border:1px solid var(--brd,rgba(126,156,224,.16));background:rgba(126,156,224,.06);color:var(--star,#eef2ff);font:inherit;font-size:15px;outline:none;transition:border-color .15s}
.ck-email:focus{border-color:var(--uplink,#4ea8ff)}
.ck-email.invalid{border-color:var(--danger,#ff4d62)}
.ck-emailnote{margin-top:7px;font-size:12px;line-height:1.45;color:var(--muted,#707aa6)}
.ck-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* Payment methods 3 cols */
.ck-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ck-method{display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 6px;border-radius:16px;border:1px solid var(--brd,rgba(126,156,224,.16));background:rgba(126,156,224,.05);color:var(--text,#c3cdec);cursor:pointer;transition:all .18s;font:inherit;font-size:12px}
.ck-method em{font-style:normal;font-size:18px}
.ck-method.on{border-color:var(--aurora,#2ee6d6);background:rgba(46,230,214,.10);color:var(--aurora,#2ee6d6);box-shadow:0 0 0 1px rgba(46,230,214,.35),0 6px 22px rgba(46,230,214,.14)}

/* Summary */
.ck-summary{margin-top:14px;padding:13px 15px;border-radius:16px;border:1px solid var(--line,rgba(140,170,235,.10));background:rgba(126,156,224,.05);display:flex;flex-direction:column;gap:5px}
.ck-srow{display:flex;justify-content:space-between;font-size:13px;color:var(--text,#c3cdec)}
.ck-srow.total{border-top:1px solid var(--line,rgba(140,170,235,.10));padding-top:8px;margin-top:4px;font-size:16px;font-weight:800;color:var(--star,#eef2ff)}
.ck-srow .mono{font-family:var(--font-mono,monospace)}

/* Pay button + status */
.ck-pay{width:100%;margin-top:14px;justify-content:center}
button.ck-pay{border:0;cursor:pointer;font:inherit}
button.ck-pay:disabled{opacity:.45;cursor:default;filter:saturate(.5)}
.ck-status{margin-top:10px;text-align:center;font-size:13px;min-height:18px}
.ck-status.err{color:var(--danger,#ff4d62)}
.ck-status.okk{color:var(--aurora,#2ee6d6);font-weight:700}

/* Waiting / success views */
.ck-view{display:none;text-align:center;padding:26px 6px 10px}
.ck-view.show{display:block}
.ck-spin{width:46px;height:46px;margin:0 auto 18px;border-radius:50%;border:3px solid rgba(126,156,224,.18);border-top-color:var(--aurora,#2ee6d6);animation:ckspin 1s linear infinite}
@keyframes ckspin{to{transform:rotate(360deg)}}
.ck-bigok{width:62px;height:62px;margin:0 auto 16px;border-radius:50%;background:rgba(46,230,214,.12);border:1px solid rgba(46,230,214,.4);display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--aurora,#2ee6d6)}
.ck-view h3{margin:0 0 8px;font-size:19px;color:var(--star,#eef2ff)}
.ck-view p{margin:0 0 6px;font-size:13.5px;line-height:1.55;color:var(--muted,#707aa6)}
.ck-view .mail{color:var(--star,#eef2ff);font-weight:700}
.ck-linkbtn{display:inline-block;margin-top:12px;font-size:13px;color:var(--aurora,#2ee6d6);background:none;border:0;cursor:pointer;text-decoration:underline;font-family:inherit}

/* Form view wrapper (скрывается в waiting/success) */
.ck-form{display:block}
.ck-form.hide{display:none}

/* ===== Desktop ≥720px: центрированная модалка ===== */
@media (min-width:720px){
  .ck-overlay{align-items:center;padding:24px}
  .ck-sheet{border-radius:34px;border-bottom:1px solid var(--brd,rgba(126,156,224,.16));max-height:88vh;transform:translateY(0) scale(.96)}
  .ck-overlay.open .ck-sheet{transform:scale(1)}
  .ck-handle{display:none}
}