/* Индикатор оплаты Appto: кольцо вокруг карты, шаги «Счёт → Окно оплаты → Готово», зелёный диск с галочкой, когда
   окно оплаты готово (владелец 15.10.2026: «большой лоадер… со сменой цвета в зелёный»). Один файл на окошко покупки
   на сайте (public/js/lead.js) и страницу оплаты /pay/paddle (src/paddle.js › paddlePage), чтобы вид не разошёлся.
   Цвета — переменными --pay-acc, --pay-acc2, --pay-grn, --pay-fg, --pay-mut, --pay-line у предка. */
.pv{display:grid;justify-items:center;text-align:center;padding:10px 0 2px}
.pv h3{margin:0 0 6px}
.pv-orb{position:relative;width:116px;height:116px;margin:4px 0 20px}
.pv-orb::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 20%,var(--pay-acc,#0a84ff) 62%,#64d2ff 86%,transparent 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));animation:pv-spin 1.05s linear infinite;transition:opacity .35s}
.pv-orb::after{content:"";position:absolute;inset:12px;border-radius:50%;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--pay-acc,#0a84ff) 34%,transparent),transparent 70%);animation:pv-pulse 1.8s ease-in-out infinite}
.pv-ok{position:absolute;inset:6px;border-radius:50%;background:var(--pay-grn,#30d158);box-shadow:0 12px 40px color-mix(in srgb,var(--pay-grn,#30d158) 45%,transparent);transform:scale(.35);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.25,1.35),opacity .25s}
.pv-ic{position:absolute;left:50%;top:50%;width:52px;height:40px;transform:translate(-50%,-50%);transition:opacity .25s}
.pv-card{color:var(--pay-acc2,#5aa9ff);animation:pv-float 1.8s ease-in-out infinite}
.pv-check{color:#fff;opacity:0}
.pv-check path{stroke-dasharray:44;stroke-dashoffset:44;transition:stroke-dashoffset .45s .2s}
.pv[data-stage="ready"] .pv-orb::before,.pv[data-stage="ready"] .pv-orb::after,.pv[data-stage="ready"] .pv-card{opacity:0}
.pv[data-stage="ready"] .pv-ok{transform:scale(1);opacity:1}
.pv[data-stage="ready"] .pv-check{opacity:1}
.pv[data-stage="ready"] .pv-check path{stroke-dashoffset:0}
.pv .plan{margin:0 0 4px}
.pv-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;list-style:none;margin:14px 0 0;padding:0;font-size:13px;color:var(--pay-mut,#8a8f98)}
.pv-steps li{display:flex;align-items:center;gap:7px;transition:color .3s}
.pv-steps li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pay-line,rgba(127,127,127,.25));transition:background .3s}
.pv-steps li.on{color:var(--pay-fg,currentColor)}
.pv-steps li.on::before{background:var(--pay-acc,#0a84ff);animation:pv-pulse 1s ease-in-out infinite}
.pv-steps li.done{color:var(--pay-fg,currentColor)}
.pv-steps li.done::before{background:var(--pay-grn,#30d158)}
@keyframes pv-spin{to{transform:rotate(360deg)}} @keyframes pv-pulse{50%{transform:scale(1.12);opacity:.7}} @keyframes pv-float{50%{transform:translate(-50%,calc(-50% - 4px))}}
.pv .slow{margin:12px 0 0}
@media (prefers-reduced-motion:reduce){.pv-orb::before,.pv-orb::after,.pv-card,.pv-steps li.on::before{animation:none!important}}

/* Оплата рублями и кнопка оплаты (владелец 15.10.2026, утверждённый макет — как экран покупки в программе,
   ide/extension/media/views/paywall.css): способ плиткой со знаком, СБП первой и шире; галочка согласия; одна кнопка
   с суммой и способом. Блок «Цены» на главной и окошко покупки (public/js/lead.js). Плитки белые в обеих темах:
   знаки платёжных систем рисуются для светлого фона. */
.pay-tiles{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:10px}
.pay-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:76px;padding:12px 10px;border-radius:14px;border:1px solid rgba(10,20,40,.12);background:#fff;color:#1d1d1f;font-family:inherit;font-size:14px;font-weight:600;line-height:1.2;text-align:center;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.pay-tile:hover{border-color:rgba(10,20,40,.3);transform:translateY(-1px)}
.pay-tile:focus-visible{outline:3px solid color-mix(in srgb,var(--pay-acc,#0a6cff) 45%,transparent);outline-offset:2px}
.pay-tile[aria-checked="true"]{border:2px solid var(--pay-acc,#0a6cff);padding:11px 9px;box-shadow:0 6px 18px -8px color-mix(in srgb,var(--pay-acc,#0a6cff) 60%,transparent)}
.pay-tile[aria-checked="true"]::after{content:"";position:absolute;top:7px;right:7px;width:18px;height:18px;border-radius:50%;background:var(--pay-acc,#0a6cff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.pay-tile .sub{font-size:11.5px;font-weight:500;color:#6e6e73}
.pay-tile--other{color:#424245;font-weight:500;background:#f1f4fa}
.pay-logo{display:block;max-width:100%;background:no-repeat center/contain}
.pay-logo--sbp{width:112px;height:40px;background-image:url(/img/pay/sbp.svg)}
.pay-logo--mir{width:58px;height:18px;background-image:url(/img/pay/mir.svg)}
.pay-logo--sberpay{width:84px;height:40px;background-image:url(/img/pay/sberpay.webp)}
.pay-logo--tbank{width:26px;height:28px;background-image:url(/img/pay/tbank.svg);background-position:left center;background-size:auto 100%}
.pay-cs{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;margin:0;padding:14px 16px;border-radius:14px;border:1px solid transparent;background:var(--pay-soft,rgba(127,127,127,.08));color:var(--pay-fg,inherit);font-size:14px;line-height:1.45;cursor:pointer;transition:border-color .15s}
.pay-cs:has(input:checked){border-color:color-mix(in srgb,var(--pay-acc,#0a6cff) 50%,transparent)}
.pay-cs input{width:20px;height:20px;margin:0;accent-color:var(--pay-acc,#0a6cff);cursor:pointer}
.pay-cs a{color:var(--pay-acc2,#0a6cff)}
.pay-cta{display:flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;min-height:54px;padding:12px 22px;border:0;border-radius:16px;background:linear-gradient(90deg,var(--pay-acc,#0a6cff),color-mix(in srgb,var(--pay-acc,#0a6cff) 72%,#6b8cff));color:#fff;font-family:inherit;font-size:17px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;box-shadow:0 14px 28px -14px color-mix(in srgb,var(--pay-acc,#0a6cff) 90%,transparent);transition:transform .15s,filter .15s}
.pay-cta:hover{filter:brightness(1.07);transform:translateY(-1px)}
.pay-cta:focus-visible{outline:3px solid color-mix(in srgb,var(--pay-acc,#0a6cff) 45%,transparent);outline-offset:3px}
.pay-fine{margin:0;font-size:12.5px;line-height:1.5;color:var(--pay-mut,#6e6e73)}
@media (max-width:760px){.pay-tiles{grid-template-columns:1fr 1fr}.pay-tile--sbp{grid-column:1/-1}}