/* ═══════════ Оплата программы (scripts/billing-ui.mjs, SPEC §8.3.3) ═══════════
   Счёт заведения перед нами: тариф плитой, способы оплаты карточками, история
   платежей строками. Пробные суммы помечены пунктиром — так в продукте помечен
   черновик (SPEC §8.3). Окно открывает владелец из меню аккаунта. */

.dlg.dlg-billing{width:min(560px, calc(100vw - 48px))}
.bl{display:flex;flex-direction:column;padding:16px 22px 22px}
.bl-head{display:flex;align-items:center;gap:10px;min-height:36px;margin-bottom:16px}
.bl-head h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.bl-demo{padding:3px 10px;border-radius:var(--r-pill);border:1px dashed var(--ink-3);font-size:11px;font-weight:500;color:var(--ink-2)}
.bl-x{margin-left:auto}
.bl-sub{display:flex;align-items:center;gap:8px;margin:22px 0 10px;font-size:11.5px;font-weight:500;color:var(--ink-3)}
.bl-sub::after{content:"";flex:1;height:1px;background:var(--rule-2)}

/* Тариф — тёмная плита: главное в окне, срок и цена рядом. */
.bl-plan{
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;
  border-radius:var(--r-lg);color:var(--card);
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0) 70%), var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 16px 30px -22px rgba(28,25,20,.5);
}
html[data-ui-theme="dark"] .bl-plan{
  color:var(--ink);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 70%), color-mix(in oklab, var(--ink) 9%, var(--card));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), 0 16px 30px -22px rgba(0,0,0,.8);
}
.bl-plan-t,.bl-plan-p{display:flex;flex-direction:column;gap:3px;min-width:0}
.bl-plan-p{align-items:flex-end;text-align:right}
.bl-plan-t span,.bl-plan-p em{font-style:normal;font-size:12px;opacity:.72}
.bl-plan-t b{font-size:16px;font-weight:600;letter-spacing:-.015em}
.bl-plan-p b{font-size:18px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.bl-methods{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px}
.bl-method{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px;
  border-radius:var(--r-lg);background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule-2);
}
.bl-method-t{display:flex;flex-direction:column;gap:2px}
.bl-method-t b{font-size:13.5px;font-weight:600;color:var(--ink)}
.bl-method-t em{font-style:normal;font-size:12px;color:var(--ink-2)}
.bl-note{margin:10px 0 0;font-size:12px;line-height:1.45;color:var(--ink-2)}
.bl-note:empty{display:none}
.bl-lines{list-style:none;margin:0;padding:0}
.bl-lines li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 2px}
.bl-lines li + li{border-top:1px solid var(--rule-2)}
.bl-lines b{font-size:13px;font-weight:600;color:var(--ink)}
.bl-lines em{font-style:normal;font-size:12px;color:var(--ink-3)}
.bl-lines li > span{display:flex;flex-direction:column;gap:2px;min-width:0}
.bl-lines strong{flex-shrink:0;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}

@media (max-width:720px){
  .dlg.dlg-billing{width:calc(100vw - 24px);max-width:none}
  .bl{padding:14px 16px 20px}
  .bl-plan{flex-direction:column;align-items:flex-start}
  .bl-plan-p{align-items:flex-start;text-align:left}
  .bl-methods{grid-template-columns:minmax(0, 1fr)}
}