/*
 * Плашка-уведомление о файлах cookie.
 *
 * Задача rp-1610-wp-152fz (решение Павла 16.10.2026). Разметка и поведение —
 * `inc/cookie-notice.php` и `assets/js/cookie-notice.js`.
 *
 * Отдельным файлом, а не правкой `sections.css`/`responsive.css`: те файлы —
 * чужие слайсы (норма карусели кейсов, адаптивный слой), прецеденты
 * `crumbs.css`, `chips-hover.css`, `head-actions.css`. Здесь ничего, кроме
 * плашки, поэтому файл ни с чем не спорит: новых общих селекторов нет,
 * единственные чужие — `.float-contacts__btn` (плашку поднимаем выше круга)
 * и `body` (нижний отступ по высоте плашки).
 *
 * Геометрия: фиксированная полоса по низу окна, `z-index: 11000` — выше
 * плавающего блока контактов (1000, раскрытый 10000), но ниже попапа формы
 * (12000) и лайтбокса отзывов: попап перекрывает плашку, а не наоборот.
 *
 * Состояние — два класса на `<html>` (их ставит скрипт): `cookie-visible`
 * (плашка на экране, высота в `--cookie-notice-h`) и `cookie-accepted`
 * (выбор сделан — плашка скрыта). Текст и «Принять» при этом просто
 * скрываются, контент страницы плашкой не блокируется никогда.
 */

.cookie-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11000;
  padding: 14px 0;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(17, 17, 17, .08);
}

.cookie-notice__inner {
  display: flex;
  align-items: center;
  gap: 24px;
}

.cookie-notice__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--graphite);
}

.cookie-notice__text a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-notice__accept {
  flex: 0 0 auto;
  padding: 12px 28px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--red);
  color: var(--white);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background var(--ease);
}

.cookie-notice__accept:hover,
.cookie-notice__accept:focus-visible {
  background: var(--red-light);
}

/* Выбор сделан — плашки нет ни на этом экране, ни на следующих. */
html.cookie-accepted .cookie-notice { display: none; }

/* Плашка на экране: низ документа остаётся доступным (подвал не перекрыт
   нижней полосой) и плавающий круг контактов поднимается над плашкой —
   на телефоне он стоит в 10px от низа и иначе оказался бы под ней.
   Высоту кладёт скрипт; до замера переменная может быть ещё пуста — тогда
   работает запасное значение 0. */
html.cookie-visible body { padding-bottom: var(--cookie-notice-h, 0px); }

html.cookie-visible .float-contacts__btn { bottom: calc(50px + var(--cookie-notice-h, 0px)); }

@media (max-width: 960px) {
  html.cookie-visible .float-contacts__btn { bottom: calc(10px + var(--cookie-notice-h, 0px)); }
}

/* Телефон: текст и кнопка друг под другом. Ширины 320–1440 проверены
   замером (см. отчёт задачи): перелива нет, плашка не выше 160px. */
@media (max-width: 640px) {
  .cookie-notice { padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); }

  .cookie-notice__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .cookie-notice__text { font-size: 13px; }

  .cookie-notice__accept {
    align-self: flex-start;
    padding: 11px 24px;
    font-size: 14px;
  }
}