/* Окно покупки билетов (с 10.10). Тёмное, в языке окна «Как пройдёт вечер»:
   те же токены, радиусы и жёлтый акцент. Подключается из index.html. */

.apd.buy{width:min(760px,calc(100vw - 32px));padding:0;display:flex;flex-direction:column;scroll-padding-bottom:120px}
.apd.buy[open]{display:flex}
.buy-head{padding:clamp(24px,4vw,36px) clamp(22px,4vw,40px) 0}
.buy-head h3{margin:10px 0 6px}
.buy-body{padding:4px clamp(22px,4vw,40px) 28px;flex:1}
.buy-screen{animation:buy-in .4s var(--ease)}
@keyframes buy-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.buy-screen,.buy[open]{animation:none}}

.buy-sec{margin-top:26px;border:0;padding:0;min-width:0}
.buy-sec>legend,.buy-h{font-family:var(--fh);font-weight:600;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-3);margin:0 0 12px;padding:0}

/* тарифы */
.buy-tiers{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.buy-tier{position:relative;display:block;cursor:pointer}
.buy-tier input{position:absolute;opacity:0;width:0;height:0}
.buy-tier>span{display:grid;gap:4px;height:100%;padding:16px 18px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg-3);
  transition:border-color .25s,background .25s,box-shadow .25s}
.buy-tier b{font-family:var(--fh);font-weight:600;font-size:16px;line-height:1.3}
.buy-tier .pr{font-family:var(--fh);font-weight:700;font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.buy-tier small{color:var(--tx-2);font-size:13.5px;line-height:1.4}
.buy-tier:hover>span{border-color:var(--tx-3)}
.buy-tier input:checked+span{border-color:var(--sun);background:linear-gradient(180deg,rgba(255,196,0,.12),rgba(255,196,0,.03));box-shadow:inset 0 0 0 1px var(--sun)}
.buy-tier input:focus-visible+span{outline:2px solid var(--sun);outline-offset:2px}
.buy-tier input:disabled+span{opacity:.45;cursor:not-allowed}

/* переключатели «Иду сам / Дарю» и каналы */
.buy-seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--bg-3);border:1px solid var(--line-2);gap:4px;flex-wrap:wrap}
.buy-seg label{position:relative;cursor:pointer}
.buy-seg input{position:absolute;opacity:0;width:0;height:0}
.buy-seg span{display:block;padding:9px 18px;border-radius:999px;font-family:var(--fh);font-weight:600;font-size:15px;color:var(--tx-2);transition:background .25s,color .25s}
.buy-seg input:checked+span{background:var(--tx);color:var(--bg)}
.buy-seg input:focus-visible+span{outline:2px solid var(--sun);outline-offset:2px}

.buy-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.buy-qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;background:var(--bg-3)}
.buy-qty button{width:44px;height:44px;border:0;background:transparent;color:var(--tx);font-size:20px;line-height:1;border-radius:50%;cursor:pointer}
.buy-qty button:hover:not(:disabled){background:var(--line)}
.buy-qty button:disabled{opacity:.35;cursor:default}
.buy-qty output{min-width:40px;text-align:center;font-family:var(--fh);font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}

.buy-note{margin:12px 0 0;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,196,0,.28);background:rgba(255,196,0,.06);color:var(--tx);font-size:14.5px;line-height:1.5}
.buy-note b{color:var(--sun)}
.buy-muted{color:var(--tx-2);font-size:14.5px;line-height:1.5;margin:8px 0 0}

/* поля */
.buy-person{margin-top:14px;padding:16px;border-radius:12px;border:1px solid var(--line)}
.buy-person h4{margin:0 0 12px;font-family:var(--fh);font-weight:600;font-size:15px;color:var(--tx)}
.buy-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.buy-grid .wide{grid-column:1/-1}
.buy-f{display:grid;gap:6px;font-family:var(--fh);font-weight:500;font-size:13.5px;color:var(--tx-2)}
.buy-f input,.buy-f textarea{width:100%;background:var(--bg);border:1px solid var(--line-2);border-radius:8px;padding:13px 14px;
  font:inherit;font-family:var(--fb);font-size:16px;color:var(--tx);transition:border-color .25s}
.buy-f textarea{min-height:84px;resize:vertical}
.buy-f input:hover,.buy-f textarea:hover{border-color:var(--tx-3)}
.buy-f input:focus,.buy-f textarea:focus{outline:2px solid var(--sun);outline-offset:0;border-color:transparent}
.buy-f input[aria-invalid=true]{border-color:#E5484D}
.buy-f .err{color:#FF8A8D;font-size:13px;font-weight:500}
.buy-f .err:empty{display:none}

.buy-check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:14.5px;line-height:1.5;color:var(--tx-2);margin-top:12px}
.buy-check input{appearance:none;flex:none;width:20px;height:20px;margin-top:1px;border-radius:6px;border:1px solid var(--line-2);background:var(--bg);display:grid;place-content:center;cursor:pointer}
.buy-check input::after{content:"";width:10px;height:6px;border:2px solid var(--on-sun);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.buy-check input:checked{background:var(--sun);border-color:var(--sun)}
.buy-check input:checked::after{opacity:1}
.buy-check input:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.buy-check a{color:var(--tx);text-underline-offset:3px}
.buy-doc{margin:6px 0 0 32px;font-size:13px;color:var(--tx-3)}
.buy-doc summary{cursor:pointer;color:var(--tx-2);text-decoration:underline;text-underline-offset:3px}
.buy-doc pre{white-space:pre-wrap;font:inherit;max-height:220px;overflow:auto;margin:8px 0 0;padding:12px;border-radius:8px;background:var(--bg);border:1px solid var(--line)}

/* низ с суммой: остаётся на виду при прокрутке длинной формы */
.buy-foot{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px clamp(22px,4vw,40px);border-top:1px solid var(--line);background:rgba(19,19,23,.94);backdrop-filter:blur(10px)}
.buy-sum{display:grid;line-height:1.15}
.buy-sum span{font-size:13px;color:var(--tx-3)}
.buy-sum b{font-family:var(--fh);font-weight:800;font-size:28px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.buy-sum small{font-size:13px;color:var(--tx-2)}
.buy-foot .btn{white-space:nowrap}
.buy-foot .btn[disabled]{opacity:.6;cursor:progress}

.buy-alert{margin-top:18px;padding:12px 14px;border-radius:10px;border:1px solid rgba(229,72,77,.45);background:rgba(229,72,77,.1);color:#FFC9CA;font-size:14.5px}
.buy-alert:empty{display:none}
.hp-buy{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* оплата */
.buy-widget{margin-top:18px;min-height:440px;border-radius:14px;background:#fff;overflow:hidden}

/* результат */
.buy-state{text-align:left;padding-top:8px}
.buy-state h4{font-family:var(--fh);font-weight:700;font-size:clamp(22px,3vw,28px);margin:18px 0 8px;letter-spacing:-.02em}
.buy-spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--line-2);border-top-color:var(--sun);animation:buy-spin 1s linear infinite}
@keyframes buy-spin{to{transform:rotate(360deg)}}
.buy-tickets{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.buy-tickets a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:12px;border:1px solid var(--line-2);
  color:var(--tx);text-decoration:none;transition:border-color .25s}
.buy-tickets a:hover{border-color:var(--sun)}
.buy-tickets small{color:var(--tx-2);font-size:13.5px}
.buy-invite{margin-top:22px;padding:18px;border-radius:14px;background:linear-gradient(180deg,rgba(255,196,0,.12),rgba(255,196,0,.03));border:1px solid rgba(255,196,0,.3)}
.buy-invite p{margin:0 0 14px;font-size:15px;line-height:1.5}
.buy-invite .ok{margin:12px 0 0;font-size:14px;color:var(--tx-2)}

@media (max-width:640px){
  .apd.buy{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:16px}
  .buy-sum b{font-size:24px}
  .buy-foot{gap:12px}
  .buy-foot .btn{padding:15px 20px}
  .buy-tiers,.buy-grid{grid-template-columns:1fr}
}

/* оплата: СБП главная, карта запасная */
.buy-pay{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.buy-card{background:none;border:0;padding:8px 4px;color:var(--tx-2);font:inherit;font-size:15px;
  text-decoration:underline;text-underline-offset:4px;cursor:pointer;transition:color .2s}
.buy-card:hover{color:var(--tx)}
.buy-card[disabled]{opacity:.5;cursor:progress}
.buy-widget{background:#16161B}
@media (max-width:640px){
  .buy-pay{width:100%;flex-direction:column;align-items:stretch;gap:6px}
  .buy-foot .buy-sbp{justify-content:center;width:100%}
  .buy-card{align-self:center}
}

.buy-messenger{margin-top:18px}

.buy-test{margin:0 0 18px;padding:10px 14px;border-radius:10px;border:1px dashed var(--sun);color:var(--sun);font-size:14px}