/* ========================================
   Cookie consent — плашка согласия

   Компактная плашка слева внизу: текст и одна кнопка в строку. Ширина по
   содержимому, на узких экранах раскладка переворачивается в столбик.
   Разметку строит src/js/consent.js — партиала нет намеренно: страницы
   мероприятий и слайды партиалы лендинга не подключают.

   Файл отдельный, а не секция common.css: слайды вебинаров common.css не
   грузят (у них своя вёрстка и свой сброс), а плашка там нужна. По той же
   причине цвета объявлены своими переменными на .cc, а не взяты из токенов
   страницы: на слайдах --muted перекрашен под тёмную колоду, и текст плашки
   уходил ниже порога контраста.
   ======================================== */
.cc {
  --cc-bg: #fff;
  --cc-text: #4A4A4A;
  --cc-link: #2C3744;
  --cc-accent: #FF7D55;
  --cc-accent-hover: #e86d45;

  position: fixed;
  bottom: 20px;
  left: 20px;

  /* Ниже модалок (.modal-overlay — 2000): модальное окно на то и модальное,
     чтобы плашка не лежала поверх его кнопки «Отправить». */
  z-index: 1900;
  max-width: calc(100vw - 40px);
  opacity: 0;
  transition: opacity .25s ease;
}

.cc--open { opacity: 1; }

/* Пока плашка не открыта — включая четверть секунды на исчезновение — она
   невидима и кликов не ловит. Иначе прозрачный узел ещё 250 мс перехватывал
   нажатия по тому, что под ним. */
.cc:not(.cc--open) { pointer-events: none; }

/* Открытая модалка прячет плашку совсем: на узком экране она иначе накрывает
   нижнюю часть окна заявки. .vmodal — окно с записью вебинара на страницах
   мероприятий, у него своя разметка. */
body:has(.modal-overlay.open) .cc,
body:has(.vmodal.open) .cc { display: none; }

.cc__box {
  position: relative;
  box-sizing: border-box;
  background: var(--cc-bg);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
  transition: transform .25s ease;
  transform: translateY(16px);
}

/* Фокус сюда переносит скрипт, когда плашку открыли кнопкой в подвале.
   Табуляцией контейнер недостижим, показывать на нём рамку незачем. */
.cc__box:focus { outline: none; }

.cc--open .cc__box { transform: none; }

.cc__main {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 12px 18px;
}

.cc__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cc-text);
}

/* Оранжевый на белом даёт 2.5:1 — для текста ссылки мало. Оранжевый остаётся
   кнопке, ссылке — графитовый с подчёркиванием. */
.cc__text a {
  color: var(--cc-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cc__btn {
  flex: 0 0 auto;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  background: var(--cc-accent);
  border: 0;
  border-radius: var(--radius-pill, 999px);
  transition: background .2s;
}

.cc__btn:hover { background: var(--cc-accent-hover); }

@media (max-width: 768px) {
  .cc {
    right: 12px;
    bottom: 12px;
    left: 12px;
    max-width: none;
  }

  /* В строку текст и кнопка помещаются только на широком экране. */
  .cc__main {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc,
  .cc__box { transition: none; }
}