/* Уведомление об использовании cookie.
   ============================================================
   Файл общий для обеих тем публичного сайта, поэтому цвета берутся из
   переменных темы v2, а запасные значения в var(..., ...) рассчитаны на v1,
   где этих переменных нет. По той же причине здесь свои размеры и скругления,
   а не классы кнопок темы: в v1 их не существует.

   Плашка небольшая и в левом нижнем углу — она не перекрывает ни шапку, ни
   основное действие на странице. */

.cookie-note {
  position: fixed;
  left: 16px;
  bottom: 16px;
  /* Выше закреплённой шапки (60), но ниже модального окна (200) */
  z-index: 100;

  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 440px;
  padding: 12px 12px 12px 18px;

  /* Фон на ступень отличается от страницы, рамка заметная, тень глубокая:
     плашка висит поверх произвольного места страницы, и белым по белому она
     терялась. Отделяют её сразу три вещи, потому что под ней бывают и белые
     секции, и тонированные. */
  border: 1px solid var(--line-strong, #d8cfc2);
  border-radius: 16px;
  background: var(--bg-soft, #f7f3ec);
  color: var(--ink, #1a1714);
  box-shadow: 0 6px 16px rgba(26, 23, 20, .10), 0 24px 48px -22px rgba(26, 23, 20, .34);

  font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: 14.5px;
  line-height: 1.45;

  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}

/* Пока скрипт не решил показывать плашку, её нет в потоке. Правило нужно
   явно: любое своё display перебило бы стандартное поведение [hidden]. */
.cookie-note[hidden] { display: none; }

.cookie-note.is-visible {
  opacity: 1;
  transform: none;
}

/* В тёмной теме переменные v2 уже переключены — здесь только запасные
   значения для темы v1, где переменных нет вовсе. */
html.dark .cookie-note {
  /* В тёмной теме «выделяется» — значит светлее фона, а не темнее */
  border-color: var(--line-strong, #4a4238);
  background: var(--bg-tint, #2d2822);
  color: var(--ink, #f3ece3);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .34), 0 24px 48px -22px rgba(0, 0, 0, .7);
}

.cookie-note__text { margin: 0; }

.cookie-note__text a {
  color: var(--brand, #7a4f33);
  text-decoration: underline;
  text-underline-offset: 2px;
}
html.dark .cookie-note__text a { color: var(--accent, #d9a566); }

.cookie-note__ok {
  flex: none;
  padding: 9px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--brand, #7a4f33);
  color: #fff;
  font: inherit;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease;
}
.cookie-note__ok:hover { background: var(--brand-soft, #a9764f); }

@media (max-width: 560px) {
  .cookie-note {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    gap: 10px;
    padding: 11px 11px 11px 15px;
    font-size: 14px;
  }
  .cookie-note__ok { padding: 9px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-note { transition: none; transform: none; }
}