/* ==========================================================================
   KIYIZGROUP — правовой слой: блок «Правовая информация» в подвале
   и выбор cookie.

   Отдельный файл, а не часть base.css, потому что подключается он ко всем
   страницам домена — включая ceo.html, у которой своя палитра, своя вёрстка
   и общего слоя лендингов нет. Поэтому у каждого токена здесь записано
   запасное значение: без base.css цвет берётся из него, а не выпадает
   в прозрачное.

   Разметку подвала собирает apps/web/scripts/build-legal.mjs,
   разметку баннера и панели — /site/legal.js.
   ========================================================================== */

/* ---------- правовой блок подвала ---------- */
/*
  §4 инструкции по размещению документов: ссылки на оферту, конфиденциальность,
  возврат, оплату, cookie, реестр, реквизиты и региональные условия стоят
  на каждой странице. Блок остаётся видимым и на телефоне — прятать его
  в меню-гамбургере инструкция прямо запрещает, поэтому здесь обычный
  переносящийся список, а не раскрывающийся элемент.
*/
.footer__legal {
  padding-top: 26px;
  border-top: 1px solid var(--line-d, rgba(255, 255, 255, 0.18));
}
.footer__lt {
  margin: 0 0 12px;
  font-family: var(--mono, system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 0.82rem;
}
.footer__links a:hover,
.footer__cookie:hover {
  color: var(--ink-d, #ffffff);
}
/* Кнопка, а не ссылка: она не ведёт на страницу, а заново открывает панель
   выбора. Выглядеть должна как соседние ссылки — это один и тот же ряд. */
.footer__cookie {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
/* Строка с реквизитами продавца — не декоративная подпись: по ней покупатель
   понимает, с кем имеет дело. 0.45 белого на #0e0e0e давало 4,4:1 — ниже AA
   для этого кегля; 0.55 даёт 6:1. */
.footer__copy {
  margin: 16px 0 0;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.55);
}

/* Сообщение только для чтения с экрана: hidden или display:none такое
   сообщение из озвучивания тоже убрали бы. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- cookie: баннер и панель ---------- */
/*
  Баннер не перекрывает страницу целиком и не запирает чтение: на сайте
  работают только необходимые технологии, и держать человека в модальном
  окне ради выбора, который ничего сейчас не включает, было бы тем самым
  нечестным интерфейсом, что запрещён §19.

  Зато он и не исчезает сам: закрыть его, ничего не выбрав, нельзя —
  молчание согласием не считается.
*/
.cbanner {
  position: fixed;
  inset: auto 0 0;
  z-index: 150;
  background: var(--dark, #0e0e0e);
  color: rgba(255, 255, 255, 0.78);
  border-top: 1px solid var(--line-d, rgba(255, 255, 255, 0.18));
}
.cbanner__in {
  max-width: var(--wrap, 1320px);
  margin: 0 auto;
  padding: 20px var(--pad, clamp(20px, 5vw, 48px));
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
}
.cbanner__text {
  flex: 1 1 420px;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.6;
}
.cbanner__text a {
  color: var(--ink-d, #ffffff);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cbanner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/*
  Три кнопки одного вида: §11 требует, чтобы принятие и отказ были
  одинаково заметны. Ни у одной нет заливки, увеличенного кегля или
  веса, которые делали бы её очевидным «правильным» ответом.
*/
/*
  Самодостаточная кнопка правового слоя. На лендингах форму ей задаёт .btn
  из base.css, но на ceo.html его нет — и без этих правил три равнозначные
  кнопки баннера превратились бы в три системные, разного размера. Свойства
  повторяют .btn намеренно: они здесь запасные, а не альтернативные.
*/
.cbanner .btn,
.cpanel .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 40px;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}
.cpanel .btn--solid {
  background: var(--ink, #111111);
  color: var(--bg, #ffffff);
}
.cpanel .btn--line {
  background: none;
  border-color: var(--line, rgba(17, 17, 17, 0.13));
  color: var(--ink, #111111);
}
.cpanel .btn--line:hover {
  border-color: var(--ink, #111111);
}
.cbanner__btn {
  background: none;
  border-color: var(--line-d, rgba(255, 255, 255, 0.18));
  color: var(--ink-d, #ffffff);
  padding: 12px 22px;
  font-size: 0.86rem;
}
.cbanner__btn:hover {
  background: var(--ink-d, #ffffff);
  border-color: var(--ink-d, #ffffff);
  color: var(--dark, #0e0e0e);
}

.cpanel {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(14, 14, 14, 0.55);
  backdrop-filter: blur(2px);
}
@media (min-width: 720px) {
  .cpanel {
    align-items: center;
  }
}
.cpanel__sheet {
  width: min(640px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: clamp(22px, 4vw, 34px);
  background: var(--bg, #ffffff);
  border-radius: 14px 14px 0 0;
}
@media (min-width: 720px) {
  .cpanel__sheet {
    border-radius: 14px;
  }
}
.cpanel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cpanel__h {
  font-family: var(--serif, system-ui, sans-serif);
  font-size: 1.3rem;
}
.cpanel .iconbtn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line, rgba(17, 17, 17, 0.13));
  border-radius: 50%;
  background: none;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.cpanel__x {
  font-size: 1.5rem;
  line-height: 1;
}
.cpanel__status {
  margin: 12px 0 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--ink-soft, #4a4744);
}
.cpanel__cats {
  margin: 22px 0;
  display: grid;
  gap: 4px;
}
.ccat {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line, rgba(17, 17, 17, 0.13));
  cursor: pointer;
}
.ccat--locked {
  cursor: default;
}
.ccat__box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--ink, #111111);
}
.ccat__copy {
  display: grid;
  gap: 4px;
}
.ccat__name {
  font-weight: 600;
  font-size: 0.94rem;
}
.ccat__always {
  font-family: var(--mono, system-ui, sans-serif);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute, #6f6f6f);
}
.ccat__text {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-soft, #4a4744);
}
.cpanel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cpanel__actions .btn {
  flex: 1 1 auto;
  padding: 13px 20px;
  font-size: 0.88rem;
}

/* Прокрутка страницы под открытой панелью. В base.css это правило есть,
   но правовой слой должен работать и без него */
html.is-locked {
  overflow: hidden;
}

/* Ни баннера, ни панели на бумаге: печатается документ, а не интерфейс */
@media print {
  .cbanner,
  .cpanel {
    display: none !important;
  }
}