/*
  Окно 18+ и баннер cookies — по макетам Web/Mobi – 18+ и Web/Mobi – Cookies.

  Свои классы кнопок (cc-btn), а не .btn сайта: у .btn в медиазапросах
  style.css стоят крошечные размеры под карточки матчей (до 8–9px), и
  кнопки окон на телефоне становились бы нечитаемыми.

  Показ управляется классами на <html> (needs-age, needs-consent), их
  ставит скрипт в <head> до отрисовки — см. layout.ejs.
*/

/* ── Общее ─────────────────────────────────────────────────────────────── */

.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: #fafafa;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.cc-btn:hover { filter: brightness(1.1); }
.cc-btn:active { transform: translateY(1px); }
.cc-btn:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }

/* Синяя кнопка с той же фактурой, что «See Today’s Picks» на главной. */
.cc-btn--primary {
  background: url('../img/btn.png') center / cover no-repeat, #0d69fd;
  box-shadow: 0 0 0 1px #000, inset 0 1px 2px 1px rgba(255, 255, 255, 0.15);
}
.cc-btn--muted {
  background: #3b3c43;
  box-shadow: inset 0 0 0 1px #52535c;
}

/* ── Окно 18+ ──────────────────────────────────────────────────────────── */

.age-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 5, 7, 0.82);
  backdrop-filter: blur(6px);
}
html.needs-age .age-gate { display: flex; }
/* Сайт под окном не прокручивается, пока возраст не подтверждён. */
html.needs-age, html.needs-age body { overflow: hidden; }

.age-gate__card {
  width: 100%;
  max-width: 400px;
  padding: 24px;
  border: 1px solid #27272a;
  border-radius: 14px;
  background: #18181b;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
.age-gate__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 3px solid #e5212b;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  color: #fafafa;
}
/* Заголовки окон — <p>, а не H2 (SEO-аудит лиг): окна есть на каждой
   странице и попадали в структуру заголовков. Вид прежний. */
.age-gate__title {
  font-family: OpenRunde, Arial, sans-serif;
  font-weight: 700;
  margin: 18px 0 10px;
  font-size: 24px;
  line-height: 1.2;
  color: #fafafa;
}
.age-gate__text {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.45;
  color: #a1a1aa;
}
.age-gate__actions { display: grid; gap: 10px; }
.age-gate__note {
  margin: 16px 0 0;
  font-size: 12px;
  color: #a1a1aa;
}
.age-gate__note a { color: #3b8bff; }

/* ── Баннер cookies ────────────────────────────────────────────────────── */

.cookie-banner {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 900;
  display: none;
  width: calc(100% - 48px);
  max-width: 500px;
  padding: 22px 24px 24px;
  border: 1px solid #27272a;
  border-radius: 14px;
  background: #18181b;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}
/* Пока открыт возраст, баннер не показываем: два окна разом — перебор. */
html.needs-consent:not(.needs-age) .cookie-banner { display: block; }

.cookie-banner__title {
  font-family: OpenRunde, Arial, sans-serif;
  font-weight: 700;
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.2;
  color: #fafafa;
}
.cookie-banner__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #a1a1aa;
}
.cookie-banner__text a { color: #3b8bff; }

.cookie-banner__settings { display: none; gap: 8px; margin-top: 16px; }
.cookie-banner[data-view='settings'] .cookie-banner__settings { display: grid; }

.cookie-banner__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}
/* Десктоп: три равные кнопки в ряд. На других языках подписи длиннее
   («Rechazar todas», «Alle akzeptieren») и в треть ширины не влезают —
   тогда кнопки переносятся, а не ломают подпись на две строки: «Accept all»
   уходит вниз на всю ширину, как на телефоне. */
@media (min-width: 601px) {
  .cookie-banner__actions { display: flex; flex-wrap: wrap; }
  .cookie-banner__actions .cc-btn { flex: 1 0 0; min-width: max-content; }
}
.cookie-banner[data-view='short'] .cookie-banner__settings-only,
.cookie-banner[data-view='settings'] .cookie-banner__short-only { display: none; }

.cookie-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #27272a;
  border-radius: 10px;
  background: #09090b;
}
.cookie-option__text { display: grid; gap: 2px; }
.cookie-option__text b { font-size: 14px; font-weight: 600; color: #fafafa; }
.cookie-option__text span { font-size: 12px; color: #a1a1aa; }

/* Переключатель: синий — включено. Обязательные — включены и не трогаются. */
.cc-switch { position: relative; flex: none; display: inline-flex; cursor: pointer; }
.cc-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
.cc-switch__track {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #3f3f46;
  transition: background 0.15s ease;
}
.cc-switch__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fafafa;
  transition: transform 0.15s ease;
}
.cc-switch input:checked + .cc-switch__track { background: #0d69fd; }
.cc-switch input:checked + .cc-switch__track::after { transform: translateX(16px); }
.cc-switch input:focus-visible + .cc-switch__track { outline: 2px solid #60a5fa; outline-offset: 2px; }
.cc-switch input:disabled { cursor: default; }
.cc-switch input:disabled + .cc-switch__track { opacity: 0.85; }

/* ── Телефон: по макету Mobi ───────────────────────────────────────────── */

@media (max-width: 600px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    padding: 18px;
  }
  .cookie-banner__title { font-size: 20px; }
  .cookie-banner__text { font-size: 13px; }
  /* Две кнопки в ряд, «Accept all» на всю ширину под ними. */
  .cookie-banner__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cookie-banner__actions [data-consent='accept'] { grid-column: 1 / -1; }
  .cc-btn { font-size: 14px; min-height: 42px; padding: 0 12px; }

  .age-gate__card { padding: 22px 18px; }
  .age-gate__title { font-size: 22px; }
}