/* ТехКарта — кабинет: плашки внизу экрана: cookie, нулевой баланс (раздел 15). Порядок файлов — см. base.css. */

/* ============================================================ 15. Плашки внизу экрана */
/* Плашка нулевого остатка уходит в этапе 2 (её роль заберёт блок аккаунта в
   меню); пока — светлая, без своего зума. */
.zero-bar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px 16px;
  flex-wrap: wrap;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 8px 8px 8px 16px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-left: 4px solid var(--primary);
  border-radius: var(--r-8);
  box-shadow: var(--shadow-dialog);
  font: var(--t-small);
}

.zero-bar__text {
  margin: 0;
}

.zero-bar__hint {
  color: var(--text-2);
}

.zero-bar__form {
  margin: 0;
}

/* Строчная ссылка — цель нажатия 40 px по высоте; отступы съедены отрицательным margin, строка у кнопки не растёт.
   По вертикали −8, а не −10: на 320 «Тарифы» своей строкой, и цель не должна заходить на кнопку через зазор
   строк плашки 8 px (#144) */
.zero-bar__more {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 4px;
  margin: -8px -4px;
  font-weight: 600;
}

.zero-bar__close {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-8);
  color: var(--text-2);
  font: 400 24px/1 var(--font-sans);
}

.zero-bar__close:hover {
  background: var(--surface-2);
  color: var(--ink);
}

/* Телефон: крестик в правый верхний угол, а не отдельной строкой внизу. Текст — всегда своей строкой, крестик
   в её углу: иначе на 660–767 px плашка вставала в одну строку и крестик ложился на «Тарифы» и кнопку покупки.
   С 768 px плашка в одну строку, крестик остаётся последним в ней (#144) */
@media (max-width: 767px) {
  .zero-bar__text {
    flex-basis: 100%;
    padding-right: 40px;
  }

  .zero-bar__close {
    position: absolute;
    top: 4px;
    right: 4px;
  }
}

/* Уведомление о cookie — небольшой блок в углу, не над кнопками действий */
.cookie {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 12px 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-8);
  box-shadow: var(--shadow-dialog);
  font: var(--t-small);
  color: var(--text-2);
}

.cookie p {
  margin: 0;
}

/* Плашки сайта на React — в общем контейнере: в кабинете это последняя строка оболочки под рабочей
   областью (shell.css, responsive.css), на лендинге — конец страницы. Контейнер в потоке и прилипает к
   низу экрана (sticky): плашки не ложатся друг на друга, а прокрутка до конца показывает последнюю
   строку страницы над ними (кнопку «Сгенерировать» формы). Отступ снизу — у самих плашек, поэтому
   скрытые плашки места не занимают. Серверные страницы (Jinja) кладут плашки прямо в body — у них
   прежнее position: fixed. */
.tk-bars {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  column-gap: 16px;
  padding: 0 16px;
  pointer-events: none;
}

.tk-bars > .zero-bar,
.tk-bars > .cookie {
  position: static;
  margin-bottom: 16px;
  pointer-events: auto;
}

/* Плашка нуля — по центру свободного места (одна — по центру), cookie — справа. relative — опора крестика в
   углу на телефоне; inset: auto гасит left: 50% и bottom общего правила, иначе плашка сдвигается (#144) */
.tk-bars > .zero-bar {
  position: relative;
  inset: auto;
  transform: none;
  margin-inline: auto;
  max-width: 100%;
}

/* В потоке 100vw шире места на полосу прокрутки — ширина от контейнера, без горизонтальной прокрутки */
.tk-bars > .cookie {
  max-width: min(420px, 100%);
}

/* Плашки «документ готов» (techkarta-back#196): стопкой до трёх внизу справа. Контейнер — внутри .tk-bars и стоит
   над ними (bottom: 100%): плашка нуля и cookie остаются видны; плашек внизу нет — у низа экрана. Под окнами и
   выезжающим меню. Контейнер пропускает клики — нажимаются только сами плашки. */
.tk-toasts {
  position: absolute;
  right: 16px;
  bottom: calc(100% + 16px);
  display: grid;
  gap: 8px;
  width: min(400px, calc(100% - 32px));
  pointer-events: none;
}

.tk-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 4px 12px 16px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-left: 4px solid var(--success);
  border-radius: var(--r-8);
  box-shadow: var(--shadow-dialog);
  font: var(--t-small);
  pointer-events: auto;
}

.tk-toast--failed {
  border-left-color: var(--error);
}

.tk-toast__icon {
  display: grid;
  flex-shrink: 0;
  padding-top: 2px;
  color: var(--success);
}

.tk-toast--failed .tk-toast__icon {
  color: var(--error);
}

.tk-toast__body {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px;
  justify-items: start;
  padding-top: 2px;
}

/* Длинная тема — не больше трёх строк */
.tk-toast__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-weight: 600;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.tk-toast__close {
  appearance: none;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -8px 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-8);
  background: none;
  color: var(--text-2);
  cursor: pointer;
}

.tk-toast__close:hover {
  background: var(--surface-2);
  color: var(--ink);
}

/* Телефон: сверху, под верхней панелью (56 px), во всю ширину — внизу экрана кнопки форм и плашки */
@media (max-width: 767px) {
  .tk-toasts {
    position: fixed;
    top: 64px;
    bottom: auto;
    left: 16px;
    width: auto;
  }
}

/* Серверные страницы: окно входа (z-index 50) с подложкой-ссылкой во весь экран лежало на плашке cookie —
   «Понятно» не нажималось. На телефоне окно во весь экран и плашки под ним не видно (её убирает первый клик). */
@media (min-width: 768px) {
  body > .cookie {
    z-index: 51;
  }
}

/* Кнопки старых партиалов (cookie, плашка нуля) — та же основная кнопка */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--r-8);
  border: 1px solid transparent;
  cursor: pointer;
  font: 600 16px/22px var(--font-sans);
  color: var(--on-primary);
  background: var(--primary);
  white-space: nowrap;
}

.btn:hover {
  color: var(--on-primary);
  background: var(--primary-hover);
}

.btn--sm {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 20px;
}