/*! Navex · UX-лаборатория · css/billing-ux.css — окна покупки, продления и счетов (раунд 13, SPEC §12.2, §12.5).
   Разметку рисует js/billing-ui-ux.js: одно окно <dialog id="uxbu">, на телефоне — нижняя шторка. Префикс bu-.
   Цвета — только токены темы «Туман» (theme.css). */

dialog.bu-dlg { --nx-modal-w: 640px; }
dialog.bu-dlg:has(.bu--admin) { --nx-modal-w: 700px; }
#uxbu-root { display: contents; }
.bu { gap: 18px; }
.bu-view { display: grid; gap: 16px; min-width: 0; min-height: 280px; align-content: start; animation: bu-in 220ms var(--ease, cubic-bezier(.23, 1, .32, 1)) both; }
@keyframes bu-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- шапка и шаги ---------- */
.bu-head { display: grid; gap: 6px; min-width: 0; }
.bu-sub { margin: 0; font: 400 14px/1.4 var(--font-text); color: var(--ink-soft); }
.bu-tag { display: inline-flex; align-items: center; gap: 6px; justify-self: start; height: 24px; padding: 0 10px; border-radius: var(--rounded-pill); background: var(--ink); color: var(--ink-inverse); font: 600 11px/1 var(--font-text); letter-spacing: .06em; text-transform: uppercase; }
.bu-tag .nx-icon { --nx-size: 14px; }
.bu-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: -4px 0 0; padding: 0; list-style: none; }
.bu-steps li { display: grid; gap: 6px; min-width: 0; font: 500 12px/1.2 var(--font-text); color: var(--ink-soft); }
.bu-steps li::before { content: ""; height: 4px; border-radius: 2px; background: var(--surface-sunken); transition: background-color 240ms var(--ease, ease-out); }
.bu-steps li.is-done::before { background: var(--ink-soft); }
.bu-steps li.is-on::before { background: var(--ink); }
.bu-steps li.is-on { color: var(--ink); }
.bu-steps li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-h { margin: 0; font: 600 15px/1.3 var(--font-text); }
.bu-hint { margin: 0; font: 400 13px/1.45 var(--font-text); color: var(--ink-soft); }
.bu-hint--ico { display: flex; gap: 8px; align-items: flex-start; }
.bu-hint--ico .nx-icon { --nx-size: 16px; flex: none; margin-top: 1px; }
.bu-hint .mz-link { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- плашки ---------- */
.bu-trial { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--rounded-md); background: var(--primary-faint); box-shadow: inset 0 0 0 1px rgb(79 90 10 / .18); font: 400 14px/1.4 var(--font-text); color: var(--ink); }
.bu-trial .nx-icon { --nx-size: 22px; flex: none; color: var(--primary-ink); }
.bu-trial b { font-weight: 600; }
.bu-info { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--rounded-md); background: var(--surface-subtle); font: 400 14px/1.45 var(--font-text); }
.bu-info .nx-icon { --nx-size: 20px; flex: none; margin-top: 1px; color: var(--ink-soft); }
.bu-info a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.bu-info--warn { background: var(--warning-soft); color: #4F3300; }
.bu-info--warn .nx-icon { color: var(--warning); }
.bu-info--ok { background: var(--success-soft); color: #134D27; }
.bu-info--ok .nx-icon { color: var(--success); }

/* ---------- выбор: срок ---------- */
.bu-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bu-opt {
  position: relative; display: grid; gap: 4px; align-content: start; text-align: left; min-width: 0; min-height: 44px;
  padding: 14px; border: 0; border-radius: var(--rounded-md); cursor: pointer; font: inherit; color: var(--ink);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow var(--fast, 150ms) var(--ease-hover, ease-out), background-color var(--fast, 150ms) var(--ease-hover, ease-out);
}
@media (hover: hover) and (pointer: fine) { .bu-opt:not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--ink-faint); } }
.bu-opt[aria-checked="true"] { background: var(--primary-faint); box-shadow: inset 0 0 0 1.5px var(--ink); }
.bu-opt:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bu-opt:disabled { cursor: not-allowed; opacity: .6; }
.bu-opt__t { font: 600 15px/1.25 var(--font-text); }
.bu-opt__p { font: 500 18px/1.2 var(--font-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bu-opt__m { font: 400 12px/1.35 var(--font-text); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bu-opt--m { min-height: 104px; padding-top: 16px; }
.bu-opt__off { position: absolute; top: 12px; right: 10px; height: 20px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: var(--rounded-pill); background: var(--success-soft); color: var(--success); font: 600 11px/1 var(--font-text); white-space: nowrap; }

/* ---------- выбор: строки (агент, канал, интеграция) ---------- */
.bu-list { display: grid; gap: 10px; }
.bu-opt--row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; }
.bu-opt--row .bu-opt__body { display: grid; gap: 3px; min-width: 0; }
.bu-opt--row .bu-opt__t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bu-ava { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line); }
.bu-ava .nx-icon { --nx-size: 20px; }
.bu-radio { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px var(--line-strong); background: var(--surface-raised); transition: box-shadow var(--fast, 150ms) var(--ease-hover, ease-out); }
.bu-opt[aria-checked="true"] .bu-radio { box-shadow: inset 0 0 0 6px var(--ink); }

/* ---------- степпер ---------- */
.bu-stepper { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px; border-radius: var(--rounded-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.bu-stepper__ctl { display: inline-flex; align-items: center; gap: 12px; }
.bu-stepper__ctl .btn { width: 44px; height: 44px; }
.bu-stepper__n { min-width: 48px; text-align: center; font: 400 34px/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bu-stepper__hint { font: 400 14px/1.4 var(--font-text); color: var(--ink-soft); }

/* ---------- итог ---------- */
.bu-sum { display: grid; gap: 0; padding: 6px 16px 16px; border-radius: var(--rounded-md); background: var(--surface-subtle); }
.bu-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bu-row__t { display: grid; gap: 3px; min-width: 0; }
.bu-row__t b { font: 500 15px/1.35 var(--font-text); overflow-wrap: anywhere; }
.bu-row__t small { font: 400 13px/1.4 var(--font-text); color: var(--ink-soft); }
.bu-row__v { font: 500 15px/1.35 var(--font-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bu-row--save .bu-row__v, .bu-row--save .bu-row__t b { color: var(--success); }
.bu-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 14px; }
.bu-total span { font: 500 15px/1.2 var(--font-text); color: var(--ink-soft); }
.bu-total b { font: 400 30px/1.1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bu-sum__note { margin: 10px 0 0; font: 400 13px/1.45 var(--font-text); color: var(--ink-soft); }

/* ---------- продление и админ: список услуг ---------- */
.bu-svcs { display: grid; gap: 8px; }
.bu-svc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border-radius: var(--rounded-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow var(--fast, 150ms) var(--ease-hover, ease-out), background-color var(--fast, 150ms) var(--ease-hover, ease-out); }
.bu-svc.is-on { background: var(--primary-faint); box-shadow: inset 0 0 0 1.5px var(--ink); }
.bu-svc:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bu-svc__t { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.bu-svc__t b { font: 600 14px/1.3 var(--font-text); overflow-wrap: anywhere; }
.bu-svc__t small { font: 400 12px/1.35 var(--font-text); color: var(--ink-soft); }
.bu-svc__t .badge { height: 22px; }
.bu-svc__v { display: grid; gap: 3px; justify-items: end; text-align: right; font: 500 14px/1.2 var(--font-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bu-svc__price { font: 400 13px/1.2 var(--font-text); color: var(--ink-soft); }
.bu-svc__new { display: inline-flex; align-items: center; gap: 4px; font: 500 12px/1.2 var(--font-text); color: var(--success); }
.bu-svc__new .nx-icon { --nx-size: 14px; }
.bu-svc--new { cursor: default; grid-template-columns: auto minmax(0, 1fr) auto auto; }
.bu-svc__plus { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--ink-inverse); }
.bu-svc__plus .nx-icon { --nx-size: 16px; color: var(--ink-inverse); }
.bu-add { display: grid; gap: 12px; padding: 14px; border-radius: var(--rounded-md); background: var(--surface-subtle); }
.bu-add__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bu-add__act { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.bu-addbtn { justify-self: start; margin-left: -8px; }
.bu-admin-pay { display: grid; gap: 12px; padding: 12px 14px; border-radius: var(--rounded-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- счёт ---------- */
.bu-inv { display: grid; gap: 16px; }
.bu-inv__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bu-inv__top > div { display: grid; gap: 4px; }
.bu-k { font: 600 11px/1 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.bu-num { font: 400 32px/1.1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bu-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.bu-dates > div { display: grid; gap: 4px; padding: 10px 14px; border-radius: var(--rounded-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.bu-dates dt { font: 400 12px/1.2 var(--font-text); color: var(--ink-soft); }
.bu-dates dd { margin: 0; display: grid; gap: 2px; font: 500 14px/1.35 var(--font-text); font-variant-numeric: tabular-nums; }
.bu-dates dd small { font: 400 12px/1.3 var(--font-text); color: var(--ink-soft); }
.bu-dates .is-late dd small { color: var(--danger); }
.bu-dates .is-late { background: var(--danger-soft); box-shadow: inset 0 0 0 1px rgb(179 43 43 / .25); }
.bu-dates .is-late dd, .bu-dates .is-late dt { color: var(--danger); }
.bu-sum--inv { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.bu-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: -4px; }
.bu-tools .btn { margin-left: -4px; }
.bu-danger { color: var(--danger); }
.bu-danger .nx-icon { color: var(--danger); }

/* ---------- «Оплачено» ---------- */
.bu-done { display: grid; justify-items: center; gap: 8px; padding: 12px 0 4px; text-align: center; }
.bu-done__ico { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--success-soft); color: var(--success); animation: bu-pop 420ms var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1)) both; }
.bu-done__ico .nx-icon { --nx-size: 36px; color: var(--success); }
@keyframes bu-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.bu-done__h { margin: 4px 0 0; font: 400 28px/1.15 var(--font-display); letter-spacing: -.02em; }
.bu-done__p { margin: 0; font: 400 14px/1.45 var(--font-text); color: var(--ink-soft); }
.bu-done__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bu-done__list li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--rounded-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.bu-done__list .nx-icon { --nx-size: 18px; flex: none; margin-top: 1px; color: var(--success); }
.bu-done__t { display: grid; gap: 3px; min-width: 0; }
.bu-done__t b { font: 500 14px/1.35 var(--font-text); overflow-wrap: anywhere; }
.bu-done__t small { font: 400 13px/1.35 var(--font-text); color: var(--ink-soft); }

/* ---------- окно админа — строже ---------- */
.bu--admin .modal__title { font-size: 21px; }
.bu--admin .bu-opt, .bu--admin .bu-svc, .bu--admin .bu-sum, .bu--admin .bu-add, .bu--admin .bu-admin-pay, .bu--admin .bu-info, .bu--admin .bu-done__list li { border-radius: var(--rounded-sm); }
.bu--admin .bu-opt--m { min-height: 88px; }
.bu--admin .bu-opt__p { font-size: 17px; }
.bu--admin .bu-h { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.bu--admin .bu-svc, .bu--admin .bu-opt:not([aria-checked="true"]) { background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line-strong); }
.bu--admin .bu-svc.is-on { background: var(--surface-subtle); box-shadow: inset 0 0 0 1.5px var(--ink); }
.bu--admin .bu-opt[aria-checked="true"] { background: var(--surface-subtle); }
.bu--admin .bu-total b { font-size: 28px; }

/* липкий низ окна на ПК: длинные окна (админ, продление) прокручиваются, кнопки остаются на виду */
dialog[data-nx-as="modal"] .bu .modal__footer { position: sticky; bottom: 0; z-index: 2; margin: 8px -28px -28px; padding: 14px 28px 20px; background: var(--surface-raised); box-shadow: 0 -12px 20px -16px rgb(22 22 22 / .28); }

/* ---------- телефон ---------- */
@media (max-width: 767.98px) {
  .bu { gap: 14px; }
  .bu-view { min-height: 240px; }
  .bu-months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bu-opt--m { min-height: 96px; }
  .bu-opt__p { font-size: 18px; }
  .bu-num { font-size: 28px; }
  .bu-stepper { gap: 12px; }
  .bu-add__grid { grid-template-columns: minmax(0, 1fr); }
  .bu-svc { padding: 10px 12px; gap: 10px; }
  .bu-svc__v b { font-size: 14px; }
  .bu-total b { font-size: 28px; }
  .bu-dates > div { padding: 10px 12px; }
  .bu-hint .mz-link { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0 2px; }
  .bu .modal__footer { flex-wrap: wrap; }
  .bu .modal__footer .btn { white-space: normal; text-align: center; height: auto; padding-block: 10px; flex: 1 1 auto; }
  .bu-tools .btn, .bu-addbtn, .bu-add__act .btn { min-height: 44px; }
  .bu-foot--stack { flex-direction: column-reverse; align-items: stretch; }
  .bu-foot--stack > .btn { width: 100%; }
  .bu .modal__footer .btn { min-height: 48px; }
}
@media (max-width: 380px) {
  .bu-steps li { font-size: 11px; }
  .bu-svc--new { grid-template-columns: auto minmax(0, 1fr) auto; }
  .bu-svc--new .btn-icon { grid-column: 3; grid-row: 1; }
  .bu-svc--new .bu-svc__v { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .bu-view, .bu-done__ico { animation: none; }
  .bu-steps li::before, .bu-opt, .bu-svc, .bu-radio { transition: none; }
}
:root[data-motion="reduce"] .bu-view, :root[data-motion="reduce"] .bu-done__ico { animation: none; }
:root[data-motion="reduce"] .bu-steps li::before, :root[data-motion="reduce"] .bu-opt, :root[data-motion="reduce"] .bu-svc, :root[data-motion="reduce"] .bu-radio { transition: none; }