/* /deposit-limits — личный кабинет (инструмент лимита) + регуляторная справка.
 *
 * Числа из макета:
 *   десктоп  — baqqybet-deposit-limits-desktop (2:1609), 1440;
 *   мобильный — baqqybet-deposit-limits-mobile (95:173), 390.
 *
 * Как и на правовых страницах, семейство шрифта различается между фреймами:
 * на десктопе статья набрана Archivo (--font-text), на мобильном — Inter
 * (--font-ui). Переключение — в ветке 767.
 *
 * Блок .dl-tool (форма лимита) в макете не нарисован: фрейм показывает только
 * справочную часть. Он добавлен, потому что страница объявлена личным кабинетом;
 * все его цвета, кегли и радиусы взяты из токенов макета.
 */

/* ── интро: тёмная шапка страницы ─────────────────────────────────────── */
/* Макет: FRAME intro 2:1645 — 1440×213, pad 64/48/48/48, gap 16, fill #0b0f14. */
.dl-hero { padding-block: var(--space-64) var(--space-48); background: var(--color-bg); }
.dl-hero__inner { display: flex; flex-direction: column; gap: var(--space-16); }

/* «RESPONSIBLE GAMBLING» нарисован только в мобильном фрейме (95:199). */
.dl-hero__eyebrow { display: none; }

.dl-hero__title {
  font-family: var(--font-text);
  font-size: 56px; font-weight: 900; line-height: 61px; letter-spacing: -1.5px;   /* трекинг макета в px */
  color: var(--color-text-strong);
}
.dl-hero__lead {
  font-family: var(--font-text);
  font-size: var(--fs-lg); line-height: 24px;
  color: var(--color-text);
}

/* ── светлая полоса ───────────────────────────────────────────────────── */
/* Макет: FRAME editorial-area 2:1649 — pad 64/48/96/48, fill #f5f3ef. */
.dl-body {
  padding-block: var(--space-64) 96px;   /* 96 снизу — число из макета */
  background: var(--color-bg-light);
  color: var(--color-text-dark);
}
/* Колонка 960 (FRAME article-container 66:4) стоит по ЛЕВОМУ краю контейнера.
   max-width вешается на детей, а не на сам .container: у контейнера есть
   margin-inline: auto, и 960 на нём отцентровало бы колонку. */
.dl-body__inner {
  display: flex; flex-direction: column; gap: var(--space-48);
  font-family: var(--font-text);
}
.dl-body__inner > * { width: 100%; max-width: 960px; }
.dl-article { display: flex; flex-direction: column; gap: var(--space-48); }

/* Разделители секций: ROUNDED_RECTANGLE 960×1, fill #e5e7eb. */
.dl-rule { height: 1px; margin: 0; border: 0; background: var(--color-border-light); }

/* ── секция статьи ────────────────────────────────────────────────────── */
/* Макет: FRAME section-* — AL column, gap 20. */
.dl-section { display: flex; flex-direction: column; gap: var(--space-20); }

/* Дробный межстрочный макета — «auto» шрифта; округляется до целого пикселя
   коробки узла (26.11→26, 17.41→17, 24.2→24, 18.15→18), иначе доли копятся. */
.dl-section__title {
  font-family: var(--font-text);
  font-size: var(--fs-h4); font-weight: 900; line-height: 26px; letter-spacing: -.02em;
  color: var(--color-text-dark);
}
.dl-p {
  font-size: var(--fs-lg); line-height: 24px;
  color: var(--color-text-dark-muted);   /* #475569 */
}

/* ── маркированный список ─────────────────────────────────────────────── */
/* Макет: FRAME bullets 61:13 gap 12. На десктопе «•» входит в текстовый узел,
   на мобильном (95:209) это отдельный узел в ряду с gap 8 — разметка одна. */
.dl-list { display: flex; flex-direction: column; gap: var(--space-12); list-style: none; margin: 0; padding: 0; }
/* Кегль и цвет дублируются на строке списка: в макете «•» и текст лежат в одном
   узле, поэтому у li сверка ждёт ту же типографику, что и у текста. */
.dl-list__item {
  display: flex; align-items: flex-start; gap: var(--space-8);
  font-size: var(--fs-lg); line-height: 24px; color: var(--color-text-dark-muted);
}
.dl-list__dot {
  flex: none; width: 8px;
  font-size: var(--fs-lg); font-weight: 700; line-height: 24px;
  color: var(--color-text-dark-muted);
}
.dl-list__text { flex: 1; font-size: var(--fs-lg); line-height: 24px; color: var(--color-text-dark-muted); }

/* ── три периода в ряд ────────────────────────────────────────────────── */
/* Макет: FRAME periods-row 61:26 — row gap 24, колонки 287, вертикальные
   разделители 1×64 (выше ряда 73, поэтому выравнены по верху, а не по центру). */
.dl-split { display: flex; gap: var(--space-24); }
.dl-split__item { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.dl-split__rule {
  flex: none; align-self: flex-start;
  width: 1px; height: 64px; margin: 0; border: 0;
  background: var(--color-border-light);
}
.dl-split__title {
  font-family: var(--font-text);
  font-size: var(--fs-lg); font-weight: 700; line-height: 17px;
  color: var(--color-text-dark);
}
.dl-split__text { font-size: var(--fs-lg); line-height: 24px; color: var(--color-text-dark-muted); }

/* ── правила изменения лимита ─────────────────────────────────────────── */
/* Макет: FRAME changes-list 61:43 — gap 0, у строк pad 12/0/12/0, внутри gap 8. */
.dl-changes { display: flex; flex-direction: column; }
/* У строк в макете объявлена обводка нулевой толщины (strokeAlign INSIDE):
   переносится как inset-тень нулевой ширины — видимого следа не даёт, но
   сверка видит ту же обводку, что и в макете. */
.dl-changes__row {
  display: flex; flex-direction: column; gap: var(--space-8);
  padding-block: var(--space-12);
  box-shadow: inset 0 0 0 0 var(--color-border-light);
}
.dl-changes__title {
  font-family: var(--font-text);
  font-size: var(--fs-lg); font-weight: 700; line-height: 17px;
  color: var(--color-text-dark);
}
.dl-changes__text { font-size: var(--fs-lg); line-height: 24px; color: var(--color-text-dark-muted); }
/* Разделители между строками нарисованы только в мобильном фрейме (95:239). */
.dl-changes__rule { display: none; height: 1px; margin: 0; border: 0; background: var(--color-border-light); }

/* ── ссылки на смежные страницы ───────────────────────────────────────── */
/* Макет: FRAME links 61:72 — row gap 24, узлы по 468 (960 − 24) / 2. */
.dl-links {
  display: flex; flex-wrap: wrap; gap: var(--space-24); margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-lg); font-weight: 700; line-height: 17px;
  color: var(--color-green);
}
/* Одиночная ссылка стоит в потоке секции без обёртки. */
.dl-link--solo { align-self: flex-start; }
.dl-link {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-6);
  font-family: var(--font-text);
  font-size: var(--fs-lg); font-weight: 700; line-height: 17px;
  color: var(--color-green);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}
.dl-link:hover { color: var(--color-green-deep); gap: var(--space-10); text-decoration: underline; text-underline-offset: 3px; }
.dl-link:focus-visible { outline: none; box-shadow: var(--focus-ring-dark); border-radius: var(--radius-sm); }
/* Тап-зона 24px — псевдоэлементом: паддинг сдвинул бы раскладку. */
.dl-link::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%;
  height: 100%; min-height: 24px;
}

/* ══ инструмент лимита (в макете не нарисован) ════════════════════════ */
.dl-tool {
  display: flex; flex-direction: column; gap: var(--space-24);
  padding: var(--space-32);
  background: var(--color-card);
  border-radius: var(--radius-14);
  box-shadow: inset 0 0 0 1px var(--color-border-light);
}
.dl-tool__head { display: flex; flex-direction: column; gap: var(--space-8); }
.dl-tool__eyebrow {
  font-family: var(--font-text);
  font-size: var(--fs-2xs); font-weight: 800; line-height: 13px; letter-spacing: .14em;
  color: var(--color-green);
}
.dl-tool__title {
  font-family: var(--font-text);
  font-size: var(--fs-h4); font-weight: 900; line-height: 26px; letter-spacing: -.02em;
  color: var(--color-text-dark);
}

/* Гость: та же вёрстка, но вместо формы — приглашение войти. */
.dl-tool__gate { display: flex; flex-direction: column; gap: var(--space-16); }
.dl-tool__gate-text { font-size: var(--fs-lg); line-height: 24px; color: var(--color-text-dark-muted); }
.dl-tool__gate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-20); margin: 0; }
.dl-tool__gate-login { flex: none; }

/* ── состояние лимита ─────────────────────────────────────────────────── */
.dl-state { display: flex; flex-direction: column; gap: var(--space-12); }
.dl-state__none { font-size: var(--fs-lg); line-height: 24px; color: var(--color-text-dark-muted); }
.dl-state__row {
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-16);
  border-radius: var(--radius-12);
  background: var(--color-bg-light);
  box-shadow: inset 0 0 0 1px var(--color-border-light);
}
.dl-state__row--active { box-shadow: inset 0 0 0 1px var(--color-green); }
/* Отложенное увеличение — предупреждение, а не свершившийся факт. */
.dl-state__row--pending { background: var(--color-surface-light); }
.dl-state__label {
  font-family: var(--font-text);
  font-size: var(--fs-2xs); font-weight: 800; line-height: 13px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-dark-faint);
}
.dl-state__row--active .dl-state__label { color: var(--color-green); }
.dl-state__value {
  font-family: var(--font-text);
  font-size: var(--fs-h3); font-weight: 900; line-height: 32px; letter-spacing: -.02em;
  color: var(--color-text-dark);
}
.dl-state__period {
  font-size: var(--fs-lg); font-weight: 700; line-height: 17px;
  color: var(--color-text-dark-muted);
}
.dl-state__note { font-size: var(--fs-body); line-height: 20px; color: var(--color-text-dark-muted); }
.dl-state__error { font-size: var(--fs-xs); line-height: 15px; }
.dl-state__cancel { margin-top: var(--space-4); }
.dl-state__cancel-btn {
  position: relative;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-text);
  font-size: var(--fs-body); font-weight: 700; line-height: 17px;
  color: var(--color-green);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease);
}
.dl-state__cancel-btn:hover { color: var(--color-green-deep); }
.dl-state__cancel-btn:focus-visible { outline: none; box-shadow: var(--focus-ring-dark); border-radius: var(--radius-sm); }
.dl-state__cancel-btn:disabled { opacity: .55; cursor: not-allowed; }
.dl-state__cancel-btn::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%;
  height: 100%; min-height: 24px;
}

/* ── форма ────────────────────────────────────────────────────────────── */
.dl-form { display: flex; flex-direction: column; gap: var(--space-20); }
.dl-form__error { font-size: var(--fs-body); line-height: 20px; }
.dl-form__amount { max-width: 280px; }
/* Правило-контейнер .field{display:grid} не должно ломать раскладку легенды. */
.dl-form__periods { display: flex; flex-direction: column; gap: var(--space-12); margin: 0; padding: 0; border: 0; }
.dl-form__periods > legend { padding: 0; }

.dl-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-12); }
.dl-choice {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-12);
  background: var(--color-card);
  box-shadow: inset 0 0 0 1px var(--color-border-light);
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.dl-choice:hover { box-shadow: inset 0 0 0 1px var(--color-text-dark-faint); }
.dl-choice input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.dl-choice:has(input:checked) { background: var(--color-bg-light); box-shadow: inset 0 0 0 2px var(--color-green); }
.dl-choice:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--color-green), var(--focus-ring-dark); }
.dl-choice__name {
  font-family: var(--font-text);
  font-size: var(--fs-lg); font-weight: 700; line-height: 17px;
  color: var(--color-text-dark);
}
.dl-choice__note { font-size: var(--fs-xs); line-height: 16px; color: var(--color-text-dark-muted); }

.dl-form__actions { display: flex; flex-direction: column; gap: var(--space-12); }
.dl-form__submit { align-self: flex-start; }
.dl-form__note { font-size: var(--fs-body); line-height: 20px; color: var(--color-text-dark-muted); }

/* ── планшет ──────────────────────────────────────────────────────────── */
/* Промежуточная ширина; в макете её нет — числа сведены между 1440 и 390. */
@media (max-width: 1359px) {
  .dl-hero { padding-block: var(--space-48) var(--space-40); }
  .dl-hero__title { font-size: var(--fs-h1); line-height: 48px; letter-spacing: -.02em; }
  .dl-body { padding-block: var(--space-48) var(--space-64); }
  .dl-tool { padding: var(--space-24); }
}

/* ── мобильный фрейм макета (390) ─────────────────────────────────────── */
@media (max-width: 767px) {
  /* Интро: FRAME page-intro 95:198 — pad 40/16/32/16, gap 12. */
  .dl-hero { padding-block: var(--space-40) var(--space-32); }
  .dl-hero__inner { gap: var(--space-12); }
  .dl-hero__eyebrow {
    display: block; width: fit-content;
    font-family: var(--font-ui);
    font-size: var(--fs-2xs); font-weight: 800; line-height: 13.31px; letter-spacing: .14em;
    color: var(--color-accent);
  }
  .dl-hero__title {
    font-family: var(--font-ui);
    font-size: var(--fs-h2); line-height: 39px; letter-spacing: normal;
  }
  .dl-hero__lead { font-family: var(--font-ui); font-size: var(--fs-body); line-height: 17px; }

  /* Статья: FRAME article-content 95:202 — pad 32/16/40/16, gap 32, шрифт Inter. */
  .dl-body { padding-block: var(--space-32) var(--space-40); }
  .dl-body__inner { gap: var(--space-32); font-family: var(--font-ui); }
  .dl-body__inner > * { max-width: none; }
  .dl-article { gap: var(--space-32); }

  /* Разделителей МЕЖДУ секциями в мобильном фрейме нет — только внутри
     «Limit Periods» и «Changing Your Limit», и это отдельные классы
     (.dl-split__rule, .dl-changes__rule), которых это правило не касается. */
  .dl-rule { display: none; }

  .dl-section { gap: var(--space-12); }
  .dl-section__title {
    font-family: var(--font-ui);
    font-size: var(--fs-h5); line-height: 24px; letter-spacing: normal;
  }
  .dl-p { font-size: var(--fs-body); line-height: 17px; }

  /* Маркер списка: в макете он лаймовый (#d9ff00), но лайм на бежевом #f5f3ef
     нечитаем — взят зелёный из макета, как уже сделано на правовых страницах. */
  .dl-list__dot {
    width: 7px;
    font-size: var(--fs-body); line-height: 17px;
    color: var(--color-green);
  }
  .dl-list__text { font-size: var(--fs-body); line-height: 17px; }

  /* Периоды: в мобильном фрейме колонка с горизонтальными разделителями. */
  .dl-split { flex-direction: column; gap: var(--space-12); }
  .dl-split__rule { align-self: stretch; width: auto; height: 1px; }
  .dl-split__title { font-family: var(--font-ui); font-size: var(--fs-md); line-height: 18px; }
  .dl-split__text { font-size: var(--fs-body); line-height: 17px; }

  /* Правила изменения: те же разделители, паддингов у строк в макете нет. */
  .dl-changes { gap: var(--space-12); }
  .dl-changes__row { gap: var(--space-12); padding-block: 0; }
  .dl-changes__rule { display: block; }
  .dl-changes__title { font-family: var(--font-ui); font-size: var(--fs-md); line-height: 18px; }
  .dl-changes__text { font-size: var(--fs-body); line-height: 17px; }

  .dl-links { flex-direction: column; gap: var(--space-12); font-family: var(--font-ui); font-size: var(--fs-body); line-height: 17px; }
  .dl-link { font-family: var(--font-ui); font-size: var(--fs-body); line-height: 17px; }

  /* Инструмент лимита. */
  .dl-tool { gap: var(--space-20); padding: var(--space-20); }
  .dl-tool__title { font-family: var(--font-ui); font-size: var(--fs-h5); line-height: 24px; letter-spacing: normal; }
  .dl-tool__eyebrow { font-family: var(--font-ui); }
  .dl-tool__gate-text { font-size: var(--fs-body); line-height: 17px; }
  .dl-tool__gate-actions { flex-direction: column; align-items: flex-start; gap: var(--space-12); }
  .dl-state__none, .dl-state__note, .dl-form__note { font-size: var(--fs-body); line-height: 20px; }
  .dl-state__value { font-family: var(--font-ui); font-size: var(--fs-h4); line-height: 28px; }
  .dl-state__period { font-size: var(--fs-body); line-height: 17px; }
  .dl-form__amount { max-width: none; }
  .dl-choices { grid-template-columns: 1fr; }
  .dl-choice__name { font-family: var(--font-ui); font-size: var(--fs-md); line-height: 18px; }
  .dl-form__submit { align-self: stretch; }
}