/* Поп-ап уведомления об использовании cookies.
   Разметка лежит в index.html, ru/index.html и en/index.html, поведение —
   в /cookie-consent.js. Файл написан вручную, а не собран Astro, поэтому
   и лежит в корне, а не в /_astro/ рядом с артефактами сборки.

   Цвета берутся из переменных сайта (объявлены в :root основного CSS),
   fallback-значения продублированы на случай, если основной CSS не загрузился. */

.cookie-consent {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;

  box-sizing: border-box;
  width: 380px;
  max-width: calc(100vw - 32px);
  padding: 24px;

  border-radius: 20px;
  background: #111a2d;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);

  color: #fff;
  font-family: OpinionProRegular, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;

  animation: cookie-consent-in .3s ease-out;
}

.cookie-consent[hidden] {
  display: none;
}

.cookie-consent__text {
  margin: 0 0 20px;
}

.cookie-consent__link {
  color: var(--silver, #abc8e7);
  text-underline-offset: 2px;
}

.cookie-consent__link:hover {
  color: #fff;
}

/* Скруглением, цветом и поведением при наведении повторяет кнопку формы
   обратной связи, но без её фиксированной высоты в 81px — для баннера
   это слишком крупно. */
.cookie-consent__button {
  display: block;
  width: 100%;
  padding: 14px 24px;

  border: none;
  border-radius: 40px;
  background-color: var(--light-blue, #5299e4);

  color: #fff;
  font-family: inherit;
  font-size: 16px;

  cursor: pointer;
  transition: background-color .3s ease;
}

.cookie-consent__button:hover {
  background-color: var(--dark-blue, #1226aa);
}

.cookie-consent__button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@keyframes cookie-consent-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* На узких экранах баннер занимает всю ширину за вычетом полей. */
@media (max-width: 480px) {
  .cookie-consent {
    right: 16px;
    bottom: 16px;
    left: 16px;
    width: auto;
    padding: 20px;
  }
}

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