/**
 * @file
 * Баннер согласия на cookie.
 *
 * ⚠️ ИЕРАРХИЯ КНОПОК. По умолчанию модуль красит заливкой кнопку отказа,
 * а согласие оставляет бледным — то есть предлагает отказаться. Для
 * сайта, которому согласие нужно ради аналитики, это тихо обнуляет
 * счётчик: человек жмёт то, что выглядит главным.
 *
 * Обратное тоже недопустимо: прятать отказ или делать его неразличимым —
 * тёмный паттерн, и во Франции это прямо запрещено (CNIL требует, чтобы
 * отказаться было так же просто, как согласиться). Поэтому обе кнопки
 * одного размера и обе читаемы — различаются только заливкой.
 */

/*
 * ⚠️ Модуль задаёт ширину содержимого в пикселях и центрирует его
 * отрицательным отступом — на узком экране блок уезжает за левый край,
 * и половина текста с кнопками оказывается за пределами экрана. Именно
 * так это выглядело на телефоне 03.11: «COOKIES ON THIS SITE» начинался
 * за кадром, а «Принять» было обрезано.
 *
 * Поэтому ширину и отступы задаём сами, от края до края.
 */
#sliding-popup,
#sliding-popup .eu-cookie-compliance-banner {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-main, system-ui, sans-serif);
}

#sliding-popup .popup-content {
  box-sizing: border-box;
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
}

#sliding-popup .eu-cookie-compliance-message {
  max-width: 44rem;
}

#sliding-popup .eu-cookie-compliance-message h2 {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
}

#sliding-popup .eu-cookie-compliance-message p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
}

#sliding-popup .eu-cookie-compliance-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

#sliding-popup .agree-button,
#sliding-popup .decline-button {
  min-width: 11rem;
  padding: 0.75rem 1.5rem;
  border-radius: 2px;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Согласие — заливка акцентом. Текст тёмный: белый на #50C6D8 даёт
   2.0:1 и нечитаем (брендбук, три глубины голубого). */
#sliding-popup .agree-button {
  border: 1px solid var(--color-accent, #50c6d8);
  background: var(--color-accent, #50c6d8);
  color: var(--color-text-on-accent, #2b2b2b);
  font-weight: 600;
}

#sliding-popup .agree-button:hover {
  background: var(--color-accent-deep, #2691a5);
  color: var(--color-white, #fff);
}

/* Отказ — та же кнопка, но контуром. Равноправная, не спрятанная. */
#sliding-popup .decline-button {
  border: 1px solid var(--color-line, #cfcccc);
  background: transparent;
  color: var(--color-text, #545454);
}

#sliding-popup .decline-button:hover {
  border-color: var(--color-accent-text, #17707f);
  color: var(--color-accent-text, #17707f);
}

#sliding-popup .eu-cookie-compliance-more-button {
  color: var(--color-accent-text, #17707f);
  text-underline-offset: 0.2em;
}

/*
 * Телефон: кнопки во всю ширину.
 *
 * ⚠️ Попасть пальцем важнее экономии места. В ряд они на узком экране
 * не помещаются и переносятся так, что «Принять» оказывается шириной в
 * половину строки, а «Только необходимые» — во всю: выбор выглядит
 * неравным, хотя должен быть равным.
 */
@media (max-width: 36rem) {
  #sliding-popup .popup-content {
    padding: 1.25rem 1rem;
  }

  #sliding-popup .eu-cookie-compliance-buttons {
    flex-direction: column;
  }

  #sliding-popup .agree-button,
  #sliding-popup .decline-button {
    width: 100%;
    min-width: 0;
  }
}