/* =========================================================
   Баннер согласия на cookie.

   Разметку создаёт js/consent.js — в HTML его нет намеренно:
   без JS не грузится и пиксель, а значит спрашивать не о чем.

   Полосой снизу, а не модальным окном во весь экран: согласие
   на аналитику не стоит того, чтобы закрывать собой сайт до
   первого клика.
   ========================================================= */

.consent {
  position: fixed;
  left: clamp(12px, 2vw, 22px);
  right: clamp(12px, 2vw, 22px);
  bottom: clamp(12px, 2vw, 22px);
  z-index: 90;                    /* над плавающими кнопками, под попапом */
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  max-width: 880px;
  margin-inline: auto;
  padding: 16px 18px;
  border: 1px solid rgba(var(--paint), .14);
  border-radius: 14px;
  background: rgb(var(--glass) / var(--glass-a));
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgb(var(--shadow) / calc(var(--shadow-a) * .9));

  opacity: 0;
  transform: translateY(14px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.consent.is-open {
  opacity: 1;
  transform: none;
}

.consent__text {
  flex: 1 1 320px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-dim);
  text-wrap: pretty;
}

.consent__text a { color: var(--blue-lt); }

.consent__actions {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.consent__btn {
  padding: 10px 18px;
  border: 0;
  border-radius: 9px;
  background: var(--btn);
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}

.consent__btn:hover { background: var(--blue); }

.consent__btn--ghost {
  background: transparent;
  border: 1px solid rgba(var(--paint), .22);
  color: var(--ink-soft);
}

.consent__btn--ghost:hover {
  background: transparent;
  border-color: rgba(var(--paint), .4);
}

/* На узком экране кнопки в строку не помещаются, а «Только
   необходимые» длиннее «Принять» — растягиваем обе поровну,
   чтобы не получить одну широкую и одну узкую. */
@media (max-width: 560px) {
  .consent { gap: 12px; padding: 14px; }
  .consent__actions { width: 100%; margin-left: 0; }
  .consent__btn { flex: 1; text-align: center; padding: 11px 12px; }
}

/* Ссылка «Настройки cookie» в подвале. Скрыта до тех пор, пока
   consent.js не убедится, что пиксель вообще подключён. */
.js-consent-open[hidden] { display: none; }

/* Разделитель — на самой ссылке, а не отдельным символом в разметке.
   Иначе, пока ссылка скрыта, точка висит в подвале сама по себе. */
.js-consent-open::before { content: '· '; }

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