/* ==========================================
   Возрастной барьер 18+ (Module/AgeGate)
   Оболочка — общий .ds-modal из modal.css; здесь —
   содержимое замка: плашка, текст и две кнопки.
   ========================================== */

/* Пока барьер не снят, страница под ним не прокручивается.
   Класс вешает js/age-gate.js вместе с открытием модалки, а до выполнения
   скрипта его ставит inline-скрипт в шапке (AgeGateAssets). */
html[data-age-gate].ds-age-gate-open { overflow: hidden; }

.ds-age-gate {
  /* Выше модалки входа (1000): барьер — единственный слой поверх всего. */
  z-index: 1100;
}

/* Блюр миниатюр — отдельный файл age-gate-blur.css: он подключается на всех
   страницах, а этот файл только на самой записи 18+. */

/* Подложка барьера — сплошной чёрный, без просвета: страница под ним не
   должна читаться ни в обход, ни сквозь. Общая подложка модалок полупрозрачна
   (modal.css), здесь переопределяем только эту. */
.ds-age-gate .ds-modal__backdrop {
  background: #000;
}

/* Якорь возврата фокуса: в макете не занимает места. */
.ds-age-gate__return {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ds-age-gate__body {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  text-align: center;
}

.ds-age-gate__badge {
  align-self: center;
  margin: 0;
  padding: 2px 12px;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-accent);
  color: var(--ds-text-on-accent);
  font-family: var(--ds-font-heading);
  font-size: var(--ds-font-size-xl);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.ds-age-gate__title {
  margin: 0;
  color: var(--ds-text-heading);
  font-family: var(--ds-font-heading);
  font-size: var(--ds-font-size-2xl);
  font-weight: 700;
  line-height: 1.25;
}

.ds-age-gate__text {
  margin: 0;
  color: var(--ds-text-primary);
  font-size: var(--ds-font-size-base);
  line-height: 1.5;
}

.ds-age-gate__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-2);
}

.ds-age-gate__actions .ds-btn {
  flex: 1 1 200px;
  max-width: 100%;
  box-sizing: border-box;
}

.ds-age-gate__confirm { font-weight: 700; }

@media (max-width: 480px) {
  .ds-age-gate__actions { flex-direction: column; }
  .ds-age-gate__actions .ds-btn { flex: 1 1 auto; width: 100%; }
}