/* LEGAL-AGEGATE-1 — блокирующее подтверждение возраста на публичных страницах.
 *
 * Один статический ассет на три поверхности (лендинг, SPA-шелл, SEO-страницы
 * каталога), поэтому здесь нет переменных из темы приложения: на лендинге и на
 * SEO-страницах их просто нет. Цвета совпадают с оформлением /legal/*.
 *
 * Гейт рисуется скриптом ПОВЕРХ уже отрендеренного DOM: HTML для краулера и для
 * человека один и тот же, клоакинга нет.
 */

.sf-age-gate {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 6, 14, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font: 16px/1.6 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #edf0ff;
}

.sf-age-gate__card {
  width: 100%;
  max-width: 460px;
  padding: 26px 24px 22px;
  border: 1px solid rgba(160, 170, 255, 0.16);
  border-radius: 18px;
  background: linear-gradient(180deg, #0a0f22, #05070f);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  text-align: center;
}

.sf-age-gate__brand {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
}

.sf-age-gate__brand span { color: #ffd88a; }

/* Не <h1>: prerender лендинга проверяется на РОВНО один <h1> (verify-seo.mjs),
   а гейт живёт на всех страницах сразу. */
.sf-age-gate__title {
  margin: 0 0 10px;
  font-size: clamp(20px, 4.4vw, 25px);
  font-weight: 700;
  line-height: 1.4;
}

.sf-age-gate__text {
  margin: 0 0 20px;
  color: #b9c1e4;
  font-size: 14.5px;
}

.sf-age-gate__text a { color: #55d6ff; text-underline-offset: 3px; }
.sf-age-gate__text a:hover { color: #8b7cff; }

.sf-age-gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.sf-age-gate__btn {
  flex: 1 1 150px;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid rgba(160, 170, 255, 0.22);
  background: rgba(148, 163, 255, 0.08);
  color: #edf0ff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.sf-age-gate__btn:hover { background: rgba(148, 163, 255, 0.16); }

.sf-age-gate__btn:focus-visible {
  outline: 2px solid #8b7cff;
  outline-offset: 2px;
}

.sf-age-gate__btn--yes {
  border-color: transparent;
  background: linear-gradient(135deg, #8b7cff, #6355c9);
  color: #07091a;
}

.sf-age-gate__btn--yes:hover { filter: brightness(1.08); background: linear-gradient(135deg, #8b7cff, #6355c9); }

.sf-age-gate__legal {
  margin: 18px 0 0;
  color: #8790b5;
  font-size: 12.5px;
}

.sf-age-gate__legal a { color: #8790b5; }
.sf-age-gate__legal a:hover { color: #55d6ff; }

html.sf-age-gate-open,
body.sf-age-gate-open {
  overflow: hidden !important;
  /* iOS Safari игнорирует overflow:hidden на body при инерционном скролле */
  touch-action: none;
}

@media (prefers-reduced-motion: no-preference) {
  .sf-age-gate { animation: sf-age-gate-in .18s ease-out; }
  @keyframes sf-age-gate-in { from { opacity: 0 } to { opacity: 1 } }
}