/* billing.css - модуль «Тарифы и оплата» (задача 11). Только токены дизайна v4, префикс bl-. */
.bl-loading{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;padding:28px 4px}

/* Витрина тарифов */
.bl-page .pf-tabs{margin-bottom:22px}
.bl-tariff-grid{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;margin-bottom:18px}
.bl-tariff{display:flex;flex-direction:column;gap:12px;min-width:0}
.bl-tariff.bl-featured{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.bl-tariff-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.bl-tariff-top h2{margin:0;font-size:22px;letter-spacing:-.02em}
.bl-tariff-limits{margin:0;color:var(--muted);font-size:13px;font-weight:600}
.bl-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bl-price strong{font-size:36px;letter-spacing:-.04em;line-height:1.05}
.bl-price span{color:var(--muted);font-size:14px;font-weight:600}
.bl-price-note{margin:0;min-height:18px;color:var(--muted);font-size:12.5px}
.bl-features{list-style:none;margin:4px 0 8px;padding:0;display:flex;flex-direction:column;gap:10px;flex:1}
.bl-features li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4}
.bl-features li svg{flex:none;margin-top:2px;color:var(--blue)}

/* Оформление */
.bl-grid{margin-top:18px}
.bl-form-panel .pf-panel-heading .pf-tabs{margin:0}
.bl-plans{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.bl-plan{min-width:0}
.bl-plan[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.bl-plan-head{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:26px;flex-wrap:wrap}
.bl-plan-head .tag{flex:none;max-width:100%}
.bl-plan strong{font-size:20px;letter-spacing:-.02em}
.bl-subhead{font-size:15px;margin:26px 0 14px;letter-spacing:-.01em}
.bl-methods{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.bl-method{flex-direction:row;align-items:center;gap:10px}
.bl-method .pf-choice-icon{margin:0}
.bl-method[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.bl-provider{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding:12px 14px;border-radius:14px;background:var(--paper);color:var(--muted);font-size:13px;line-height:1.45}
.bl-provider svg{flex:none;color:var(--ink)}
.bl-provider>span:not(.tag){flex:1 1 220px}
.bl-summary{position:sticky;top:20px}
.bl-summary-rows{display:flex;flex-direction:column}
.bl-kv{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:40px;font-size:14px;border-bottom:1px solid var(--line)}
.bl-kv span:last-child{font-weight:700;white-space:nowrap}
.bl-kv.bl-total{border-bottom:0;padding-top:8px}
.bl-kv.bl-total span{font-weight:700}
.bl-kv.bl-total strong{font-size:28px;letter-spacing:-.03em}
.bl-pay{margin-top:14px}
.bl-summary-note{margin:12px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5}
.bl-includes{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.bl-includes .section-label{margin-bottom:8px;display:block}
.bl-includes p{margin:0;font-size:13.5px;line-height:1.5}

/* Результат оплаты */
.bl-result{display:flex;flex-direction:column;gap:12px}
.bl-result h2{margin:0;font-size:26px;letter-spacing:-.03em}
.bl-result p{margin:0;color:var(--muted);line-height:1.5}
.bl-result-icon{width:52px;height:52px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;background:var(--paper);color:var(--ink)}
.bl-result.is-ok .bl-result-icon{background:var(--ink);color:var(--white)}
.bl-result.is-pending .bl-result-icon{background:var(--yellow)}
.bl-result.is-canceled .bl-result-icon{color:var(--red)}
.bl-result-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.bl-mono{font-variant-numeric:tabular-nums;word-break:break-all;font-weight:600}

@media (max-width:1050px){
  .bl-tariff-grid{grid-template-columns:1fr}
  .bl-summary{position:static}
}
@media (max-width:740px){
  .bl-plans,.bl-methods{grid-template-columns:1fr}
  .bl-price strong{font-size:30px}
  .bl-form-panel .pf-panel-heading{flex-direction:column;align-items:flex-start}
  .bl-result-actions .button{width:100%}
}

/* QA 05.11 BUG-051: до 480 px показатели «Тариф» / «Действует до» в одну колонку, крупное значение не обрезается */
.bl-root .pf-stat>div{min-width:0}
.bl-root .pf-stat strong{overflow-wrap:normal;min-width:0;font-size:clamp(18px,2.2vw,24px)}
@media (max-width:480px){
  .bl-root .pf-stat-grid{grid-template-columns:minmax(0,1fr)}
}

/* Получатель оплаты - агент по продажам («Юрлица платформы») */
.bl-seller{margin:10px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}