/* The document layout shared by Terms, Privacy, Cookie Policy and Responsible
 * Gambling — betaces-terms-and-conditions and its siblings. */

/* ── hero ─────────────────────────────────────────────────────────────── */
.doc-hero {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-40);
  padding: 100px var(--container-pad); background: var(--color-cream);
  box-shadow: inset 0 -1px 0 var(--color-border);
}
/* Cookie Policy: counterAlign в её фрейме не задан — колонки прижаты к верху.
   Privacy: те же 80 по бокам, но 120 сверху и снизу. */
.doc-hero--top { align-items: flex-start; }
.doc-hero--pad-120 { padding-block: 120px; }
.doc-hero__left { width: 680px; flex: none; display: grid; gap: var(--space-24); align-content: start; }
/* Frame heights: Terms 337, Privacy and Responsible Gambling 313, Cookie 217 —
   the standfirst is what differs, so the floor follows the document. */
.doc-hero--tall .doc-hero__left { min-height: 337px; }
.doc-hero--mid .doc-hero__left { min-height: 313px; }
.doc-hero__h {
  font-size: 88px; font-weight: 700; line-height: 88px; letter-spacing: var(--ls-h1);
  text-transform: uppercase; color: var(--color-ink);
}
.doc-hero__lede { max-width: 560px; font-size: var(--fs-body); line-height: 24px; color: var(--color-muted); }

.doc-facts {
  width: 420px; flex: none; display: grid; gap: var(--space-20); align-content: start;
  min-height: 281px;
  padding: var(--space-32); background: var(--color-cream-2); border-radius: var(--radius-md);
}
/* В макете подпись синяя 11 ExtraBold, значение тёмное 15 Medium. */
.doc-facts__row { display: grid; gap: var(--space-4); }
.doc-facts__label { font-size: var(--fs-label); font-weight: 800; line-height: 14px; color: var(--color-brand); }
.doc-facts__value { font-size: var(--fs-body); font-weight: 500; line-height: 20px; color: var(--color-ink); }

/* Панель быстрых ссылок на странице ответственной игры: первая ссылка синяя,
   остальные тёмные, между ними волосяные линии, снизу телефон помощи. */
.doc-links { display: grid; gap: var(--space-20); }
.doc-links__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); min-height: 17px; }
.doc-links__head b { font-size: var(--fs-label); font-weight: 800; line-height: 14px; color: var(--color-brand); }
.doc-links__list { display: grid; }
/* index-links 356×160: строки 16/22, между ними 12 + волосяная + 12. */
.doc-links__list a {
  display: block; padding-block: var(--space-12);
  font-size: 16px; font-weight: 700; line-height: 22px; color: var(--color-ink); text-decoration: none;
}
.doc-links__list a:first-child { color: var(--color-brand); }
.doc-links__list a:hover { color: var(--color-brand); }
.doc-links__list a + a { box-shadow: inset 0 1px 0 var(--color-border); }
.doc-links__list a:first-child { padding-top: 0; }
.doc-links__list a:last-child { padding-bottom: 0; }
.doc-links__help { display: grid; gap: var(--space-4); padding-top: var(--space-8); }
.doc-links__help span { font-size: var(--fs-label); font-weight: 700; line-height: 14px; color: var(--color-muted); }
.doc-links__help a {
  font-family: var(--font-display); font-size: var(--fs-h6); font-weight: 700; line-height: 30px;
  color: var(--color-brand); text-decoration: none;
}

/* ── workspace ────────────────────────────────────────────────────────── */
.doc-workspace { display: flex; align-items: flex-start; background: var(--color-cream); }
/* Sticky, but only as tall as it needs: a column taller than the viewport that
   sticks would trap the page. align-self keeps it from stretching to the
   document column's height. */
.doc-sidebar {
  position: sticky; top: 0; align-self: start;
  width: calc(var(--container-pad) + 320px); flex: none; display: grid; gap: var(--space-24);
  padding: var(--section-pad-y-sm) var(--space-24) var(--section-pad-y-sm) var(--container-pad);
}
.doc-sidebar__label { font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-muted); }
.doc-sidebar__search { gap: var(--space-8); }
.doc-search {
  display: flex; align-items: center; gap: var(--space-12);
  height: 48px; padding: 0 var(--space-16);
  background: var(--color-white); border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.doc-search:focus-within { box-shadow: inset 0 0 0 1px var(--color-brand), var(--focus-ring); }
.doc-search .icon { width: 16px; height: 16px; flex: none; color: var(--color-muted); }
.doc-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
  font-size: var(--fs-ui); color: var(--color-ink);
}
.doc-search input:focus { outline: none; }
.doc-sidebar__head { display: grid; gap: var(--space-4); }
.doc-sidebar__count { font-family: var(--font-display); font-size: var(--fs-title); font-weight: 700; line-height: 27px; color: var(--color-ink); }

/* No inner scroll: the column is sticky and the list is short enough to read in
   one go, which is also how the mockup draws it. */
.doc-toc { }
.doc-toc__row {
  display: block; padding: 12px var(--space-16);
  font-size: var(--fs-ui); font-weight: 700; line-height: 17px;
  color: var(--color-muted); text-decoration: none; border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.doc-toc__row:hover { background: var(--color-cream-2); color: var(--color-ink); }
.doc-toc__row.is-active { color: var(--color-brand); }

/* Ответственная игра, editorial-sidebar 320×1365 pad 80/24/80/80 gap24:
   «CONTENTS» синим 14/19, оглавление — 24 строки по 16 с шагом 14, без плашек,
   под ним водяной знак. Кегль 12, потому что колонка внутри всего 216. */
.doc--plain .doc-sidebar { width: calc(var(--container-pad) + 240px); }
/* Privacy Policy: её editorial-sidebar 360, а не 400. */
.doc--narrow .doc-sidebar { width: calc(var(--container-pad) + 280px); }
.doc--plain .doc-sidebar__label {
  font-family: var(--font-display); font-size: 14px; font-weight: 700; line-height: 19px;
  color: var(--color-brand);
}
.doc--plain .doc-toc { display: grid; gap: 14px; }
.doc--plain .doc-toc__row {
  position: relative; padding: 0; border-radius: 0;
  font-size: 12px; font-weight: 400; line-height: 16px; color: var(--color-muted);
}
/* Строка 16 px при шаге 30 — зона добирается псевдоэлементом до соседа, не паддингом. */
.doc--plain .doc-toc__row::after { content: ""; position: absolute; inset: -7px 0; }
.doc--plain .doc-toc__row:hover { background: none; color: var(--color-brand); }
.doc--plain .doc-toc__row.is-active { font-weight: 700; color: var(--color-brand); }

.doc--plain .doc-sidebar__deco {
  display: flex; justify-content: center; overflow: hidden;
  height: 432px; padding-block: 40px; opacity: .1; color: var(--color-ink);
}
.doc--plain .doc-sidebar__deco .icon { width: 280px; height: 392px; flex: none; }

/* The mockup gives every section 100px of air above and below and 80px inside,
   and separates them with a hairline — the document reads as a stack of plates
   rather than a wall of text. */
.doc-content { flex: 1; min-width: 0; box-shadow: inset 1px 0 0 var(--color-border); }
/* Документ в макете полосатый: нечётные разделы кремовые, чётные — вторым
   кремовым. Без чередования сплошная простыня на 14 000 пикселей. */
.doc-section {
  display: grid; gap: var(--space-32); scroll-margin-top: var(--space-24);
  padding: 100px var(--section-pad-x);
  background: var(--color-cream);
  box-shadow: inset 0 -1px 0 var(--color-border);
}
.doc-section:nth-child(even) { background: var(--color-cream-2); }
.doc-section__body { display: grid; gap: var(--space-16); }
.doc-section__h {
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; line-height: 54px;
  text-transform: uppercase; color: var(--color-ink);
}
/* Ответственная игра собрана иначе: заголовки разделов обычным регистром. */
.doc--plain .doc-section__h { text-transform: none; }
.doc-section__sub {
  margin-top: var(--space-8);
  font-family: var(--font-display); font-size: var(--fs-title); font-weight: 700; line-height: 27px;
  color: var(--color-ink);
}
.doc-p, .doc-term { font-size: var(--fs-body); line-height: 24px; color: var(--color-muted); }
/* Список из макета — ряд «маркер + текст»: маркер синий, шириной 14 (номер 17),
   зазор до текста 12 (у нумерованного 16), между пунктами 16. */
.doc-lead { font-size: var(--fs-body); font-weight: 700; line-height: 22px; color: var(--color-ink); }
.doc-list { display: grid; gap: var(--space-16); list-style: none; }
.doc-list__item {
  display: flex; gap: var(--space-12);
  font-size: var(--fs-body); line-height: 22px; color: var(--color-muted);
}
.doc-list__m {
  flex: none; width: 14px;
  font-size: var(--fs-body); font-weight: 400; line-height: 22px; color: var(--color-brand);
}
.doc-list--num .doc-list__item { gap: var(--space-16); }
.doc-list--num .doc-list__m {
  width: 17px;
  font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 24px;
}
/* A defined term sits on its own line above its definition, as the mockup sets it. */
.doc-term b { display: block; color: var(--color-ink); }
.doc-empty { padding: var(--space-24); background: var(--color-cream-2); font-size: var(--fs-body-sm); line-height: 22px; color: var(--color-muted); }

/* ── end of document ──────────────────────────────────────────────────── */
.doc-end { padding: var(--space-64) var(--container-pad); background: var(--color-cream-2); }
.doc-end__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-40);
  max-width: var(--container); margin-inline: auto;
}
.doc-end__note { max-width: 640px; margin-top: var(--space-8); font-size: var(--fs-body-sm); line-height: 22px; color: var(--color-muted); }
.doc-end__actions { display: flex; align-items: center; gap: var(--space-24); }

.doc-reopen { padding: var(--space-48) var(--container-pad); background: var(--color-cream); }
.doc-reopen__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-40);
  max-width: var(--container); margin-inline: auto;
}
.doc-reopen__note { max-width: 640px; margin-top: var(--space-8); font-size: var(--fs-body-sm); line-height: 22px; color: var(--color-muted); }

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  /* align-items из десктопной ветки в колонке сжимает половины по содержимому —
     на мобильных фреймах это две полосы во всю ширину. */
  .doc-hero { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .doc-hero__left { width: auto; gap: var(--space-16); padding: var(--space-32) var(--container-pad-mobile); }
  .doc-hero__h { font-size: 40px; line-height: 40px; }
  .doc-hero__lede { max-width: none; font-size: var(--fs-ui); line-height: 20px; }
  .doc-facts { width: auto; min-height: 0; gap: var(--space-16); border-radius: 0; padding: var(--space-24) var(--container-pad-mobile); }
  .doc-hero--tall .doc-hero__left, .doc-hero--mid .doc-hero__left { min-height: 0; }
  .doc-section { padding: var(--space-32) var(--container-pad-mobile); }

  /* align-items: flex-start из десктопной ветки в колонке даёт детям ширину по
     содержимому, и на 320 текст вылезал за экран. */
  .doc-workspace { flex-direction: column; align-items: stretch; }
  .doc-sidebar {
    /* align-self: start из липкой десктопной колонки не даёт ей растянуться
       во всю ширину — полоса оглавления выходила уже экрана. */
    position: static; align-self: stretch; width: auto; gap: var(--space-16);
    padding: var(--space-24) var(--container-pad-mobile);
    background: var(--color-cream-2);
  }
  .doc-toc { max-height: none; }
  .doc-toc__row { padding: 10px var(--space-12); font-size: var(--fs-ui); }

  /* toc-section 390×807: белая полоса, линии сверху и снизу, шаг строк 12. */
  .doc--plain .doc-sidebar, .doc--narrow .doc-sidebar { width: auto; }
  .doc--plain .doc-sidebar { padding: var(--space-40) var(--container-pad-mobile);
    background: var(--color-white);
    box-shadow: inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-border);
  }
  .doc--plain .doc-toc { gap: 12px; }
  .doc--plain .doc-toc__row::after { inset: -6px 0; }
  .doc--plain .doc-sidebar__deco { display: none; }
  .doc-content { gap: var(--space-32); padding: var(--space-32) var(--container-pad-mobile); box-shadow: none; }
  .doc-section__h { font-size: var(--fs-h5); line-height: 38px; }
  .doc-p, .doc-term { font-size: var(--fs-ui); line-height: 20px; }

  .doc-end, .doc-reopen { padding: var(--space-32) var(--container-pad-mobile); }
  .doc-end__inner, .doc-reopen__inner { flex-direction: column; align-items: stretch; gap: var(--space-16); }
  .doc-end__actions { flex-wrap: wrap; }
}

/* ── cookie-settings-ui (раздел 4 Cookie Policy) ──────────────────────────
   Панель 880×311, белая, паддинг 24, gap 20; строки 14 Bold слева и состояние
   справа, между строками 12 и волосяная линия. */
.ck-settings {
  display: grid; gap: var(--space-20);
  padding: var(--space-24); background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.ck-settings__h {
  font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 24px;
  color: var(--color-ink);
}
.ck-settings__rows { display: grid; gap: var(--space-12); }
.ck-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  min-height: 20px; padding-bottom: var(--space-12);
  box-shadow: inset 0 -1px 0 var(--color-border);
}
.ck-row:last-child { padding-bottom: 0; box-shadow: none; }
.ck-row__name { font-size: 14px; font-weight: 700; line-height: 18px; color: var(--color-muted); }
.ck-row__name--lead { color: var(--color-ink); }
.ck-row__always { font-size: 12px; font-weight: 700; line-height: 16px; color: var(--color-brand); }
.ck-row__switch { gap: var(--space-8); }
/* Невидимый чекбокс перекрывает дорожку, а не подпись слева от неё. */
.ck-row__switch input { left: auto; right: 0; }
.ck-row__state { font-size: 12px; line-height: 16px; color: var(--color-muted); }
.ck-settings__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16); }
.ck-settings__ghost { color: var(--color-brand); }
.ck-settings__ghost:hover { background: var(--color-cream-2); }
.ck-settings__done { font-size: var(--fs-body-sm); line-height: 22px; color: var(--color-brand); }

@media (max-width: 1199px) {
  .ck-settings { padding: var(--space-16); }
  .ck-settings__actions .btn { flex: 1 1 auto; }
}