/* Страницы подписки: /pay (оплата) и /account (кабинет). Раскладка и
   тексты — стаб заказчика out/16.09_оплата_стаб/{оплата,кабинет}.html,
   перенесён как есть. Токены и шрифты — :root в styles.css, новых оттенков
   нет. Одна колонка 520px, карточки r20, кнопка как AppButton, шторка
   подтверждения как в приложении. */
.bill-page{background:var(--bg);color:var(--ink);font:400 16px/24px 'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;letter-spacing:-.0225px;}
.bill-page main{display:block;}
/* шрифт наследуем, цвет — нет: у кнопок свой (белый на акценте — как AppButton) */
.bill-page button,.bill-page input{font:inherit;}
.bill-page input{color:inherit;}

/* шапка: как у юр-страниц, только тише */
.bill-hd{border-bottom:1px solid var(--outline);background:var(--bg);}
.bill-hd .in{max-width:520px;margin:0 auto;padding:0 20px;height:60px;display:flex;align-items:center;justify-content:space-between;}
.bill-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:700 22px/1 'Sansation',sans-serif;letter-spacing:.02em;color:var(--navy);}
.bill-brand img{width:36px;height:36px;border-radius:50%;}
.bill-secure{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-muted);}
.bill-secure svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.bill-quiet{border:0;background:none;padding:0;font-size:14px;color:var(--ink-muted);cursor:pointer;text-decoration:none;}
.bill-quiet:hover{color:var(--ink);}

.bill-wrap{max-width:520px;margin:0 auto;padding:28px 20px calc(40px + env(safe-area-inset-bottom));}
.bill-wrap h1{font:700 30px/36px 'Sansation',sans-serif;letter-spacing:-.01em;color:var(--navy);margin:0;}
.bill-lead{margin:6px 0 0;color:var(--ink-muted);font-size:16px;}
.bill-back{display:inline-flex;align-items:center;gap:4px;margin-bottom:12px;font-size:14px;color:var(--ink-muted);text-decoration:none;border:0;background:none;padding:0;cursor:pointer;}
.bill-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* карточка */
.bill-card{background:var(--surface);border-radius:var(--r);padding:20px;margin-top:16px;}
.bill-card.slim{padding:0;}
.bill-in{width:100%;height:60px;border:0;outline:none;border-radius:var(--r);padding:0 20px;background:transparent;color:var(--ink);font-size:17px;}
.bill-in::placeholder{color:var(--ink-faint);}
.bill-in:focus{box-shadow:0 0 0 2px var(--accent);}
.bill-in[readonly]{color:var(--ink);cursor:default;}
.bill-in[readonly]:focus{box-shadow:none;}
.bill-hint{margin:8px 20px 0;font-size:13px;line-height:18px;color:var(--ink-faint);}
.bill-hint a{color:var(--ink-muted);text-decoration:none;border-bottom:1px solid var(--outline);}
.bill-hint--info{margin:12px 0 -8px;color:var(--ink-muted);text-align:center;}
.bill-card.slim + .bill-card.slim{margin-top:12px;}
.bill-card.slim.first{margin-top:20px;}
.bill-loading .bill-lead{text-align:center;padding-top:40px;}

/* сводка: табы плана (AppSegmented, как на пейволе), сумма, дата */
.bill-seg{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:var(--r-pill);background:var(--surface-muted);}
.bill-seg button{height:40px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-muted);font-weight:500;font-size:15px;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;}
.bill-seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);}
/* «−17%» у года: пилюля как AppBadge mini (caption 11 / 600, 8×3, r999), цвет акцента на его подложке */
.bill-seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.bill-seg-badge{font:600 11px/1 'Onest',sans-serif;letter-spacing:0;padding:4px 7px 3px;border-radius:var(--r-pill);background:var(--accent-halo);color:var(--accent);}
.bill-sum-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.bill-sum-plan{font-weight:500;}
.bill-state{font-size:13px;font-weight:500;padding:4px 10px;border-radius:var(--r-pill);background:var(--pos-light);color:var(--sph-health);}
.bill-state.off{background:var(--surface-muted);color:var(--ink-muted);}
.bill-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:16px;}
.bill-price b{font:700 40px/44px 'Sansation',sans-serif;letter-spacing:-.01em;color:var(--navy);white-space:nowrap;}
.bill-price span{color:var(--ink-muted);}
/* цена в пересчёте на месяц у годового плана — подпись помельче ПОД ценой, не вперемешку со строкой суммы */
.bill-price-sub{margin:2px 0 0;font-size:14px;line-height:20px;color:var(--ink-muted);}
.bill-price-sub b{font:700 20px/24px 'Sansation',sans-serif;letter-spacing:-.01em;color:var(--navy);}
/* «7 дней бесплатно» — плашка-надстрочник над ценой (как плашка над заголовком пейвола):
   AppBadge regular — 12/600, 11×5, r999, зелёная; цена под ней остаётся главной */
.bill-eyebrow{display:inline-block;margin-top:16px;font:600 12px/1 'Onest',sans-serif;padding:6px 11px 5px;border-radius:var(--r-pill);background:var(--pos-light);color:var(--sph-health);white-space:nowrap;}
.bill-eyebrow:not([hidden]) + .bill-price{margin-top:8px;}
.bill-sum-top + .bill-price{margin-top:10px;}
.bill-note{margin:10px 0 0;font-size:14px;line-height:20px;color:var(--ink-muted);}
/* условия — до трёх коротких строк одним стилем, без маркеров и линий */
.bill-terms{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:20px;color:var(--ink-muted);}

/* способы оплаты: карточка-список, одна выбрана */
.bill-methods{display:flex;flex-direction:column;gap:8px;margin-top:16px;}
.bill-m{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-sm);border:1.5px solid var(--outline);background:var(--surface);cursor:pointer;transition:border-color .15s,box-shadow .15s,opacity .15s;}
.bill-m:hover{border-color:var(--ink-faint);}
.bill-m input{position:absolute;opacity:0;pointer-events:none;}
.bill-m .rd{width:22px;height:22px;border-radius:50%;border:2px solid var(--outline);flex:none;display:grid;place-items:center;transition:border-color .15s;}
.bill-m .rd::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .15s;}
.bill-m.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-halo);}
.bill-m.on .rd{border-color:var(--accent);}
.bill-m.on .rd::after{transform:scale(1);}
.bill-m.off{opacity:.45;cursor:not-allowed;}
.bill-m .t{flex:1;min-width:0;font-weight:500;display:flex;flex-direction:column;}
.bill-m .t small{font-weight:400;font-size:13px;color:var(--ink-muted);}
.bill-m .logos{display:flex;align-items:center;gap:8px;flex:none;}
.bill-m .logos img{height:16px;width:auto;display:block;}
.bill-m .logos img.sber,.bill-m .logos img.sbp{height:28px;}

/* строки-кнопки кабинета */
.bill-card.list{padding:4px 0;}
.bill-rows{display:flex;flex-direction:column;}
.bill-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:16px 20px;border:0;background:none;text-align:left;font-size:16px;color:var(--ink);cursor:pointer;}
.bill-row + .bill-row{border-top:1px solid var(--outline);}
.bill-row svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--ink-faint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.bill-row.danger{color:var(--accent);}
.bill-row div{display:flex;flex-direction:column;}
.bill-row small{font-size:13px;color:var(--ink-muted);}
.bill-row span.sum{font-variant-numeric:tabular-nums;}
/* лейбл строки + необязательный чип-подсказка (напр. «Не привязан»), слева от шеврона */
.bill-row-label{display:inline-flex;align-items:center;gap:8px;min-width:0;}
.bill-chip{flex:none;font:600 11px/1 'Onest',sans-serif;letter-spacing:0;padding:4px 7px 3px;border-radius:var(--r-pill);background:var(--accent-halo);color:var(--accent);}
.bill-card.pays .bill-row{cursor:default;}

/* готово: как экран «готово» в приложении — знак, заголовок, строка и одна кнопка.
   100dvh: на телефоне 100vh считает высоту под тулбаром браузера, и кнопка уезжает под него */
.bill-page main.bill-done{max-width:520px;margin:0 auto;padding:0 20px calc(24px + env(safe-area-inset-bottom));min-height:calc(100vh - 60px);min-height:calc(100dvh - 60px);display:flex;flex-direction:column;}
.bill-done-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center;}
.bill-done-mid h1{font:700 30px/36px 'Sansation',sans-serif;color:var(--navy);}
.bill-done-mid .bill-lead{margin-top:-12px;}
.bill-done-mid img{width:104px;height:104px;}
.bill-done-foot p{text-align:center;margin:0 0 16px;}
.bill-done .bill-pay{margin-top:0;}
.bill-done-foot .bill-quiet{display:block;width:100%;height:48px;margin-top:4px;font-size:16px;}
/* ожидание банка: крупный спиннер вместо знака Plus */
.bill-wait-spin{display:block;width:56px;height:56px;border:4px solid var(--outline);border-top-color:var(--accent);border-radius:50%;animation:bill-spin .9s linear infinite;}

/* кнопка */
/* кнопка — как AppButton / .btn-primary лендинга: плоская, r16, Onest 700, белый текст на акценте */
.bill-pay{margin-top:20px;width:100%;height:56px;border:0;border-radius:16px;background:var(--accent);color:var(--on-accent);font:700 17px/20px 'Onest',sans-serif;letter-spacing:-.005em;cursor:pointer;transition:background .15s;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;}
.bill-page .bill-pay{color:var(--on-accent);}
.bill-pay:hover{background:var(--accent-hover);}
.bill-pay:active{background:var(--accent-pressed);}
.bill-pay[disabled]{opacity:.45;cursor:not-allowed;}
/* «занята»: подпись прячем цветом (разметка на месте), спиннер — псевдоэлементом */
.bill-pay.is-busy{position:relative;color:transparent;opacity:1;}
.bill-pay.is-busy::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:bill-spin .8s linear infinite;}
.bill-after{margin:12px 0 0;font-size:13px;line-height:18px;color:var(--ink-faint);text-align:left;}
.bill-after a{color:var(--ink-muted);text-decoration:none;border-bottom:1px solid var(--outline);}
.bill-err{display:none;margin-top:12px;padding:12px 16px;border-radius:var(--r-sm);background:var(--accent-halo);color:var(--accent);font-size:14px;line-height:20px;}
.bill-err.is-on{display:block;}
@keyframes bill-spin{to{transform:rotate(360deg);}}

/* вход в кабинет — форма по центру */
.bill-page main.bill-login{min-height:calc(100vh - 60px);min-height:calc(100dvh - 60px);display:flex;flex-direction:column;justify-content:center;padding-bottom:calc(60px + env(safe-area-inset-bottom));}
.bill-login h1{text-align:center;margin-bottom:8px;}
.bill-login .bill-lead{text-align:center;margin-bottom:8px;}
.bill-login .bill-quiet{display:block;margin:16px auto 0;text-align:center;}
.bill-methods.tight{margin-top:0;}
.bill-methods.spaced{margin-top:20px;}

/* шторка подтверждения — как в приложении */
.bill-sheet-bg{position:fixed;inset:0;background:rgba(43,41,56,.45);display:flex;align-items:flex-end;justify-content:center;z-index:50;}
.bill-sheet{width:100%;max-width:520px;background:var(--bg);border-radius:24px 24px 0 0;padding:16px 20px calc(24px + env(safe-area-inset-bottom));}
.bill-sheet::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--outline);margin:0 auto 20px;}
.bill-sheet h2{font:700 22px/28px 'Onest',sans-serif;margin:0 0 8px;}
.bill-sheet p{margin:0;color:var(--ink-muted);}
.bill-sheet .bill-pay{margin-top:20px;}
.bill-sheet .bill-quiet{display:block;width:100%;height:48px;margin-top:4px;font-size:16px;}

@media(min-width:721px){
  .bill-wrap{padding-top:40px;}
  .bill-wrap h1{font-size:34px;line-height:40px;}
  .bill-sheet-bg{align-items:center;}
  .bill-sheet{border-radius:24px;}
  .bill-sheet::before{display:none;}
}
.bill-page [hidden]{display:none!important;}