/* ContraCity PRO — окно оплаты подарками Telegram Stars (NOLIMITSTARS).
   Подключается в pay.html вместе со stars-pay.js. */
    /* ── Оплата подарками Telegram Stars ───────────────────────────────── */
:root{--star:#ffc83d;--star-2:#ff9f1c;--tg:#2aabee;--tg-2:#229ed9}
body.sp-lock{overflow:hidden}
.sp{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;visibility:hidden;pointer-events:none}
.sp.open{visibility:visible;pointer-events:auto}
.sp-shade{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .4s var(--ease)}
.sp.open .sp-shade{opacity:1}
.sp-box{position:relative;width:min(920px,100%);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain;
  background:#000;border:1px solid rgba(255,255,255,.08);border-radius:24px;box-shadow:0 40px 120px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,200,61,.04) inset;
  opacity:0;transform:translateY(24px) scale(.96);transition:opacity .45s var(--ease),transform .55s var(--ease);scrollbar-width:thin;scrollbar-color:#222 transparent}
.sp.open .sp-box{opacity:1;transform:none}
.sp-box::before{content:'';position:absolute;left:50%;top:-180px;width:640px;height:360px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,200,61,.14),rgba(255,159,28,.04) 60%,transparent)}
.sp-x{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#9aa0ab;transition:background .2s,color .2s}
.sp-x:hover{background:rgba(255,255,255,.07);color:#fff}
.sp-x .ic{width:18px;height:18px}

/* Создание платежа */
.sp-make{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;padding:72px 24px 64px;text-align:center}
.sp-orbit{position:relative;width:168px;height:168px}
.sp-core{position:absolute;inset:44px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#ffe7a3,var(--star) 45%,var(--star-2) 100%);box-shadow:0 0 60px rgba(255,200,61,.55),0 0 120px rgba(255,159,28,.25);animation:spCore 1.6s ease-in-out infinite}
.sp-core svg{width:44px;height:44px;fill:#1a1200}
.sp-ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(255,200,61,.22);animation:spSpin 9s linear infinite}
.sp-ring.r2{inset:18px;border-style:solid;border-color:rgba(255,255,255,.06);animation-duration:6s;animation-direction:reverse}
.sp-dot{position:absolute;left:50%;top:50%;width:0;height:0;animation:spSpin var(--d,3s) linear infinite;animation-delay:var(--dl,0s)}
.sp-dot i{position:absolute;left:var(--r,78px);top:-6px;width:12px;height:12px;filter:drop-shadow(0 0 6px rgba(255,200,61,.9))}
.sp-dot i svg{width:100%;height:100%;fill:var(--star)}
.sp-make h3{font-family:var(--f-display);font-size:22px;font-weight:800;letter-spacing:-.2px}
.sp-make p{color:#9aa0ab;font-size:14px;min-height:22px;transition:opacity .25s}
.sp-make .sp-err{color:#fecdd3}
.sp-make p.sp-fade{opacity:0}
@keyframes spSpin{to{transform:rotate(360deg)}}
@keyframes spCore{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* Счёт */
.sp-body{position:relative;padding:28px 28px 26px}
.sp-in{opacity:0;transform:translateY(14px);animation:spIn .6s var(--ease) forwards;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes spIn{to{opacity:1;transform:none}}
.sp-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-right:44px}
.sp-kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8a8f99;font-weight:600}
.sp-sum{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:40px;font-weight:800;letter-spacing:-1px;line-height:1.1;margin-top:4px}
.sp-sum .st{width:34px;height:34px;filter:drop-shadow(0 0 14px rgba(255,200,61,.6));animation:spTwinkle 2.4s ease-in-out infinite}
.sp-sum small{font-family:var(--f-body);font-size:15px;font-weight:500;color:#8a8f99;letter-spacing:0}
@keyframes spTwinkle{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(14deg) scale(1.1)}}
.sp-order{margin-left:auto;text-align:right;font-size:12.5px;color:#8a8f99}
.sp-order code{display:block;font:600 14px ui-monospace,SFMono-Regular,Consolas,monospace;color:#eceef3;letter-spacing:.5px;margin-top:2px}

.sp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}
.sp-step{position:relative;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;background:#0a0a0a;border:1px solid rgba(255,255,255,.06);font-size:13px;color:#7d8494;transition:border-color .4s,background .4s,color .4s}
.sp-step b{display:block;font-size:13.5px;font-weight:600;color:#b4bac6;transition:color .4s}
.sp-step .n{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;background:#151515;color:#7d8494;transition:background .4s,color .4s,box-shadow .4s}
.sp-step.on{border-color:rgba(42,171,238,.45);background:rgba(42,171,238,.07)}
.sp-step.on b{color:#fff}
.sp-step.on .n{background:var(--tg);color:#fff;box-shadow:0 0 0 4px rgba(42,171,238,.18);animation:spPing 1.8s ease-out infinite}
.sp-step.ok{border-color:rgba(74,222,128,.3);background:rgba(74,222,128,.06)}
.sp-step.ok b{color:#d9fbe5}
.sp-step.ok .n{background:#22c55e;color:#03140a}
@keyframes spPing{0%{box-shadow:0 0 0 0 rgba(42,171,238,.5)}100%{box-shadow:0 0 0 10px rgba(42,171,238,0)}}

.sp-grid{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:22px;margin-top:22px;align-items:start}
.sp-sec{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8a8f99;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.sp-sec span{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:500;color:#6b7280}

.sp-gifts{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:10px}
.sp-gift{position:relative;padding:14px 10px 12px;border-radius:18px;background:#050505;border:1px solid rgba(255,255,255,.06);text-align:center;overflow:hidden;
  opacity:0;transform:translateY(18px) scale(.92);animation:spGift .7s var(--ease) forwards;animation-delay:calc(180ms + var(--i,0) * 90ms);transition:border-color .3s,transform .3s}
.sp-gift::before{content:'';position:absolute;left:50%;top:44px;width:120px;height:120px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,hsla(var(--h,42),95%,60%,.20),transparent);transition:opacity .4s;opacity:.8}
.sp-gift:hover{border-color:rgba(255,200,61,.3)}
.sp-gift:hover::before{opacity:1}
@keyframes spGift{to{opacity:1;transform:none}}
.sp-anim{position:relative;width:92px;height:92px;margin:0 auto 8px}
.sp-anim.wait::after{content:'';position:absolute;inset:14px;border-radius:50%;background:linear-gradient(90deg,#0f0f0f,#1c1c1c,#0f0f0f);background-size:200% 100%;animation:spShim 1.2s linear infinite}
.sp-anim .emo{position:absolute;inset:0;display:grid;place-items:center;font-size:52px;animation:spFloat 3s ease-in-out infinite}
@keyframes spShim{to{background-position:-200% 0}}
@keyframes spFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.sp-price{position:relative;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;background:rgba(255,200,61,.1);color:var(--star);font-weight:700;font-size:14px}
.sp-price svg{width:13px;height:13px;fill:currentColor}
.sp-name{position:relative;font-size:12px;color:#7d8494;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-times{position:absolute;top:9px;right:9px;z-index:1;padding:1px 8px;border-radius:99px;background:var(--star);color:#1a1200;font-weight:800;font-size:12.5px;box-shadow:0 4px 14px -4px rgba(255,200,61,.7)}
.sp-total{margin-top:12px;font-size:13px;color:#7d8494}
.sp-total b{color:#eceef3}
.sp-empty{padding:18px;border-radius:16px;border:1px dashed rgba(255,255,255,.1);color:#8a8f99;font-size:13.5px;text-align:center}

.sp-side{display:flex;flex-direction:column;gap:12px}
.sp-tg{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:54px;border-radius:16px;background:linear-gradient(180deg,#37b6f5,var(--tg-2));color:#fff;font-weight:700;font-size:15.5px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 14px 34px -12px rgba(42,171,238,.8);transition:transform .2s,box-shadow .2s}
.sp-tg:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 18px 40px -12px rgba(42,171,238,.95)}
.sp-tg svg{width:22px;height:22px;fill:currentColor}
.sp-tg::after{content:'';position:absolute;top:0;bottom:0;width:60px;left:-80px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:spShine 3.2s ease-in-out infinite}
@keyframes spShine{0%,55%{left:-80px}100%{left:120%}}
.sp-qr{position:relative;padding:12px;border-radius:20px;background:#fff;aspect-ratio:1;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 20px 50px -20px rgba(42,171,238,.45)}
.sp-qr img{display:block;width:100%;height:100%;opacity:0;transform:scale(.94);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.sp-qr img.ld{opacity:1;transform:none}
.sp-qr::after{content:'';position:absolute;left:8px;right:8px;height:36px;top:-40px;background:linear-gradient(180deg,transparent,rgba(42,171,238,.28),transparent);border-bottom:2px solid rgba(42,171,238,.75);animation:spScan 2.8s ease-in-out infinite;pointer-events:none}
@keyframes spScan{0%{top:-40px}60%,100%{top:100%}}
.sp-qr-cap{text-align:center;font-size:12.5px;color:#7d8494;margin-top:-2px}
.sp-msg{white-space:pre-wrap;font-size:13px;line-height:1.5;color:#d6dae2;background:#0b1620;border:1px solid rgba(42,171,238,.2);border-radius:16px 16px 16px 4px;padding:10px 12px}
.sp-copy{font-size:12.5px;color:#7dcaf3;text-align:left;padding:2px 0;align-self:flex-start}
.sp-copy:hover{color:#fff}

.sp-progress{margin-top:22px;padding:16px;border-radius:18px;background:#070707;border:1px solid rgba(255,255,255,.06)}
.sp-bar{position:relative;height:12px;border-radius:99px;background:#141414;overflow:hidden}
.sp-bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;background:linear-gradient(90deg,var(--star-2),var(--star),#ffe7a3);transition:width 1s var(--ease);box-shadow:0 0 18px rgba(255,200,61,.55)}
.sp-bar i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);background-size:60% 100%;background-repeat:no-repeat;animation:spBarShine 1.8s linear infinite}
@keyframes spBarShine{from{background-position:-60% 0}to{background-position:160% 0}}
.sp-legend{display:flex;justify-content:space-between;gap:12px;margin-top:9px;font-size:13px;color:#8a8f99}
.sp-legend b{color:#fff}
.sp-status{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13.5px;color:#cbd2dc}
.sp-status .spinner{color:var(--star)}
.sp-recv{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.sp-recv:empty{display:none}
.sp-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:99px;background:#101010;border:1px solid rgba(255,200,61,.22);font-size:12.5px;color:#f5e3b0;animation:spPop .55s cubic-bezier(.3,1.6,.5,1) both}
.sp-chip .mini{width:26px;height:26px}
@keyframes spPop{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:none}}

/* Оплачено */
.sp-paid{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:64px 24px 48px;text-align:center}
.sp-check{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#86efac,#22c55e);box-shadow:0 0 60px rgba(34,197,94,.5);animation:spPop .7s cubic-bezier(.3,1.6,.5,1) both}
.sp-check svg{width:44px;height:44px;fill:none;stroke:#03140a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:spDraw .5s .35s ease forwards}
@keyframes spDraw{to{stroke-dashoffset:0}}
.sp-paid h3{font-family:var(--f-display);font-size:26px;font-weight:800}
.sp-paid p{color:#9aa0ab;font-size:14px;max-width:360px}
.sp-burst{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sp-burst i{position:absolute;left:50%;top:110px;width:14px;height:14px;opacity:0;animation:spBurst 1.4s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--dl)}
.sp-burst i svg{width:100%;height:100%;fill:var(--c,var(--star))}
@keyframes spBurst{0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--rot)) scale(1)}}

/* Кнопка «Перейти к оплате» для Stars и загрузка кнопки «Оплатить» */
.pay-go.stars{background:linear-gradient(180deg,#37b6f5,var(--tg-2));color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 26px -10px rgba(42,171,238,.8)}
.pay-submit.busy{position:relative;overflow:hidden;pointer-events:none}
.pay-submit.busy::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);background-size:50% 100%;background-repeat:no-repeat;animation:spBarShine 1.1s linear infinite}

/* Служебное */
.sp [hidden]{display:none!important}
.sp .ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sp-spin{width:15px;height:15px;flex:none;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:var(--star);animation:spSpin .8s linear infinite}
.sp-dot.d2{--d:3.4s;--dl:-1.2s;--r:66px}
.sp-dot.d3{--d:4.2s;--dl:-2.6s;--r:82px}
.sp-paid .btn{min-width:240px}
.sp-body .sp-in:nth-child(1){--i:0}
.sp-steps.sp-in{--i:1}
.sp-grid>.sp-in:nth-child(1){--i:2}
.sp-grid>.sp-in:nth-child(2){--i:3}
.sp-progress.sp-in{--i:4}
.sp-box{font-family:var(--f-body);color:var(--text)}
.sp-order code{font-family:var(--f-mono)}

@media (max-width:760px){
  .sp{padding:0;place-items:end center}
  .sp-box{border-radius:22px 22px 0 0;max-height:94vh;max-height:94dvh;transform:translateY(60px)}
  .sp-body{padding:22px 16px 20px}
  .sp-grid{grid-template-columns:1fr}
  .sp-side{order:-1}
  .sp-qr{width:200px;margin:0 auto}
  .sp-sum{font-size:32px}
  .sp-order{margin-left:0;text-align:left}
  .sp-head{padding-right:40px}
  .sp-steps{grid-template-columns:1fr}
  .sp-step{padding:9px 11px}
  .sp-gifts{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .sp-anim{width:78px;height:78px}
}

@media (prefers-reduced-motion:reduce){.sp *,.sp *::before,.sp *::after{animation:none!important;transition:none!important}.sp-in,.sp-gift{opacity:1;transform:none}}