/* deposit-limits — правки по макету поверх pages.css.
   Файл подключается после pages.css, поэтому правила с той же
   специфичностью здесь выигрывают. Значения — числами из макета.
   Десктоп — фрейм 0:2655 (1440), мобильный — 4:607 (390). */

/* ============================================================================
   Интро (0:2656 — 1440×428, col gap24, pad 80/80 / 4:623 — 390×277, pad 32/16)
   ========================================================================= */

/* Вертикальный отступ секции 80, а не 48: содержимое стояло на 32 выше макета */
.page-deposit-limits .page-intro { padding-block: var(--space-15); }

/* 0:2657 — знак задан ОТ ФРЕЙМА (y 160), сама секция начинается на y 120,
   значит внутри секции он стоит на 40. Бокс 583 с выключкой вправо. */
.page-deposit-limits .page-intro__watermark {
  --wm-top: 40px;
  width: 583px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 0:2659 — плашка 199×26: padding 6/12, радиус 4 (не таблетка), текст
   Geist 900 11/14.3 кремовым. Иконки в макете нет. */
.page-deposit-limits .page-intro__kicker { min-height: 26px; }

.page-deposit-limits .page-intro__kicker .kicker-pill {
  padding: var(--space-3) var(--space-6);
  border-radius: 4px;
  font-size: 11px;
  line-height: 14px;
  color: var(--color-paper);
}

/* 0:2661 headline-group — две строки 64/64 с зазором 4 (бокс 132) */
.page-deposit-limits .page-intro__title {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 64px;
  line-height: 64px;
}

/* 0:2664 — лид Geist 500 18/26 основным цветом, ширина 595 (3 строки) */
.page-deposit-limits .page-intro__lead {
  max-width: 595px;
  font-size: 18px;
  line-height: 26px;
  font-weight: var(--fw-medium);
  color: var(--color-ink);
}

/* ============================================================================
   Панель лимита (0:2665 — 1440×669, row gap48, pad 80/80)
   ========================================================================= */

/* 0:2666 control-surface — прозрачная колонка 792×443 с зазором 32:
   белым в макете залита только карточка 0:2671, а не вся колонка. */
.page-deposit-limits .dl-surface {
  gap: var(--space-11);
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.page-deposit-limits .dl-surface__head { gap: var(--space-4); }
.page-deposit-limits .dl-surface__kicker { font-size: 12px; line-height: 16px; }

/* 0:2670 — Archivo Black 28/30.46 */
.page-deposit-limits .dl-surface__title { font-size: 28px; line-height: 30px; }

/* 0:2671 limit-display-card — 792×357, pad 32, gap 24, обводка 2, радиус 16 */
.page-deposit-limits .dl-surface__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-11);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 2px var(--color-ink);
}

/* 0:2672 display-row — метка и сумма слева колонкой (зазор 4),
   бейдж периода справа по центру строки. Высота 76. */
.page-deposit-limits .dl-current {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-8);
  row-gap: var(--space-2);
  align-items: center;
}

.page-deposit-limits .dl-current__top { display: contents; }

.page-deposit-limits .dl-current__label {
  grid-column: 1;
  font-size: 12px;
  line-height: 16px;
}

/* 0:2675 — Archivo Black 56/56 */
.page-deposit-limits .dl-current__value {
  grid-column: 1;
  font-size: 56px;
  line-height: 56px;
}

/* 0:2676 period-badge — 105×34: кремовая плашка, радиус 8, Geist 800 14/18.2 */
.page-deposit-limits .dl-current__period {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: center;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  font-size: 14px;
  font-weight: var(--fw-extrabold);
  line-height: 18px;
  text-transform: uppercase;
  color: var(--color-ink);
}

/* 0:2678 timeline-container — зазор 12, высота 81 */
.page-deposit-limits .dl-cycle { gap: var(--space-6); }

.page-deposit-limits .dl-cycle__row { font-size: 12px; line-height: 16px; }
.page-deposit-limits .dl-cycle__name { color: var(--color-ink); }
.page-deposit-limits .dl-cycle__max { color: var(--color-brand-text); }

/* 0:2682 track-wrapper — MON и SUN по бокам полосы, высота строки 24 */
.page-deposit-limits .dl-cycle__track {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 24px;
}

.page-deposit-limits .dl-cycle__day {
  font-size: 11px;
  font-weight: var(--fw-extrabold);
  line-height: 14px;
  text-transform: uppercase;
  color: var(--color-ink);
}

/* 0:2684 track-line — 677×4 тёмная полоса без скругления, 0:2685 — 140 из 677 */
.page-deposit-limits .dl-cycle__bar {
  flex: 1;
  height: 4px;
  border-radius: 0;
  background: var(--color-ink);
  box-shadow: none;
}

/* 0:2687 — Geist 400 13/16.9, бокс 17 */
.page-deposit-limits .dl-surface__note { font-size: 13px; line-height: 17px; }

/* 0:2688 action-block — кнопка и оговорка, зазор 16 */
.page-deposit-limits .dl-form { gap: var(--space-8); }
.page-deposit-limits .dl-form__legal { font-size: 12px; line-height: 16px; }

/* 0:2689 custom-button 181×56 в роли <summary>: в закрытом состоянии
   раскрывающейся панели видна ровно та кнопка, что нарисована в макете. */
.page-deposit-limits .dl-change { display: block; }

.page-deposit-limits .dl-change__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 56px;
  padding: 0 var(--space-11);
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-surface);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-black);
  line-height: 18px;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
  transition: background-color var(--dur-fast, 140ms) var(--ease, ease);
}

.page-deposit-limits .dl-change__toggle::-webkit-details-marker { display: none; }
.page-deposit-limits .dl-change__toggle::marker { content: ""; }
.page-deposit-limits .dl-change__toggle:hover { background: var(--color-brand-hover); }

.page-deposit-limits .dl-change__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.page-deposit-limits .dl-change__submit { align-self: flex-start; height: 48px; }

@media (prefers-reduced-motion: no-preference) {
  .page-deposit-limits .dl-change[open] .dl-change__panel { animation: dl-reveal 200ms var(--ease, ease) both; }
}

@keyframes dl-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================================
   Панель помощи (0:2692 — 440×509, pad 32, зоны по 32 + разделители)
   ========================================================================= */

.page-deposit-limits .dl-rail {
  gap: var(--space-14);            /* 32 + линия + 32 = 64 между зонами */
  padding: var(--space-11);
  border-radius: var(--radius-xl);
}

.page-deposit-limits .dl-rail__card { position: relative; gap: var(--space-6); }

/* 0:2697 / 0:2703 — линии #f4e2cf при 15% ровно посередине зазора */
.page-deposit-limits .dl-rail__card + .dl-rail__card::before {
  content: "";
  position: absolute;
  inset: -32px 0 auto 0;
  height: 1px;
  background: var(--color-paper);
  opacity: .15;
}

/* Вторая зона в макете не выделена подложкой — тот же тёмный фон */
.page-deposit-limits .dl-rail__card--phone {
  padding: 0;
  border-radius: 0;
  background: none;
}

/* 0:2694 — Archivo Black 16/17.41 кремовым */
.page-deposit-limits .dl-rail__title {
  font-size: 16px;
  line-height: 17px;
  color: var(--color-paper);
}

/* 0:2695 / 0:2706 — Geist 400 13/20, #fffdf8 при 0.8 */
.page-deposit-limits .dl-rail__text {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-surface);
  opacity: .8;
}

/* 0:2702 — в зоне «Gambling help» текст мельче: 12/15.6 */
.page-deposit-limits .dl-rail__card--phone .dl-rail__text {
  font-size: 12px;
  line-height: 16px;
}

/* 0:2700 — Geist 400 13/16.9, #fffdf8 при 0.6 (в макете не оранжевый) */
.page-deposit-limits .dl-rail__meta {
  font-size: 13px;
  font-weight: var(--fw-regular);
  line-height: 17px;
  color: var(--color-surface);
  opacity: .6;
}

/* 0:2701 — Archivo Black 32/34.82 брендовым */
.page-deposit-limits .dl-rail__phone {
  font-size: 32px;
  line-height: 35px;
  color: var(--color-brand);
}

/* 0:2696 / 0:2707 — Geist 700 13/16.9 #f20d2f; на тёмном фоне
   светлый брендовый ещё и контрастнее приглушённого --color-brand-text */
.page-deposit-limits .dl-rail .link-arrow {
  font-weight: var(--fw-bold);
  font-size: 13px;
  line-height: 17px;
  color: var(--color-brand);
}

.page-deposit-limits .dl-rail .link-arrow:hover { color: var(--color-flame); }

/* ============================================================================
   Ответственная игра (0:2757 — 1440×264 / 4:720 — 390×264)
   ========================================================================= */

/* 0:2758 — знак ЗАЛИТ брендовым при 12%, контура в макете нет.
   y 2453 от фрейма при секции на y 2433 — внутри секции это 20. */
.page-deposit-limits .rg-section__watermark {
  top: 20px;
  left: var(--gutter);
  font-size: 140px;
  line-height: 152px;
  color: var(--color-brand);
  -webkit-text-stroke: 0;
}

/* 0:2763 — Geist 400 15/19.5 во всю ширину контента (1280): в макете одна
   строка, ограничение по ширине ломало и высоту секции */
.page-deposit-limits .rg-section--slim .rg-section__lead {
  max-width: none;
  font-size: 15px;
  line-height: 20px;
}

.page-deposit-limits .rg-section--slim .rg-section__title { font-size: 40px; line-height: 44px; }

/* ============================================================================
   Мобильный фрейм 4:607 (390)
   ========================================================================= */

@media (max-width: 767px) {
  /* 4:623 — секция 390×277, pad 32/16, зазор 16 */
  .page-deposit-limits .page-intro { padding-block: var(--space-11); }

  /* 4:624 — знак 323×240 в две строки: 110/119.68, выключка вправо,
     y 133 от фрейма при секции на y 123 → внутри секции 10 */
  .page-deposit-limits .page-intro__watermark {
    --wm-top: 10px;
    --wm-left: 67px;
    --wm-size: 110px;
    width: 323px;
    line-height: 120px;
    white-space: normal;
    word-break: break-all;
    overflow: visible;
  }

  /* 4:625 — плашка 175×21: padding 4/8, текст 10/13 */
  .page-deposit-limits .page-intro__kicker { min-height: 21px; }
  .page-deposit-limits .page-intro__kicker .kicker-pill {
    padding: var(--space-2) var(--space-4);
    font-size: 10px;
    line-height: 13px;
  }

  /* 4:627 — две строки 38/38 с зазором 4 (бокс 80) */
  .page-deposit-limits .page-intro__title { font-size: 38px; line-height: 38px; }

  /* 4:630 — Geist 500 14/20 основным цветом, 4 строки */
  .page-deposit-limits .page-intro__lead {
    max-width: none;
    font-size: 14px;
    line-height: 20px;
    font-weight: var(--fw-medium);
    color: var(--color-ink);
  }

  /* Мои десктопные правила .dl-surface лежат вне медиазапроса и перебивают
     мобильные из pages.css — возвращаю числа фрейма 4:631: pad 24/16, зазор 20 */
  .page-deposit-limits .dl-surface {
    gap: var(--space-9);
    padding: var(--space-10) var(--gutter-mobile);
  }

  /* 4:632 — шапка 358×66: 11/14.3 + Archivo Black 22/23.94 в две строки */
  .page-deposit-limits .dl-surface__kicker { font-size: 11px; line-height: 14px; }
  .page-deposit-limits .dl-surface__head { gap: var(--space-2); }
  .page-deposit-limits .dl-surface__title { font-size: 22px; line-height: 24px; }

  /* 4:635 — карточка 358×356: pad 20, зазор 20, радиус 12 */
  .page-deposit-limits .dl-surface__body {
    gap: var(--space-9);
    padding: var(--space-9);
    border-radius: var(--radius-xl);
  }

  /* 4:636 — на мобильном метка и бейдж в строке, сумма отдельной строкой */
  .page-deposit-limits .dl-current {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    min-height: 70px;
  }

  .page-deposit-limits .dl-current__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 22px;
  }

  .page-deposit-limits .dl-current__label { font-size: 10px; line-height: 13px; }
  .page-deposit-limits .dl-current__value { font-size: 40px; line-height: 40px; }

  /* 4:639 — бейдж 74×22: padding 4/8, радиус 4, текст 11/14.3 */
  .page-deposit-limits .dl-current__period {
    padding: var(--space-2) var(--space-4);
    border-radius: 4px;
    font-size: 11px;
    line-height: 14px;
  }

  /* 4:642 — между суммой и шкалой линия #120e0d при 10%, зазоры 20 */
  .page-deposit-limits .dl-cycle {
    position: relative;
    gap: var(--space-4);
    min-height: 98px;
    /* 4:642 — линия нулевой высоты между суммой и шкалой: зазор 20 сверху
       и 20 снизу, то есть 40 всего, а не один общий gap карточки */
    margin-top: var(--space-9);
  }

  .page-deposit-limits .dl-cycle::before {
    content: "";
    position: absolute;
    inset: -20px 0 auto 0;
    height: 1px;
    background: var(--color-ink);
    opacity: .1;
  }

  .page-deposit-limits .dl-cycle__row { font-size: 11px; line-height: 14px; }
  .page-deposit-limits .dl-cycle__track { gap: var(--space-4); min-height: 20px; }
  .page-deposit-limits .dl-cycle__day { font-size: 10px; line-height: 13px; }

  /* 4:652 — оговорка в мобильном фрейме есть: 318×48, Geist 400 12/16 */
  .page-deposit-limits .dl-surface__note {
    display: block;
    font-size: 12px;
    line-height: 16px;
  }

  /* 4:653 — кнопка во всю ширину, 48, текст 13/16.9; оговорка 11/14 */
  .page-deposit-limits .dl-form { gap: var(--space-6); }

  .page-deposit-limits .dl-change__toggle {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-9);
    font-size: 13px;
    line-height: 17px;
  }

  .page-deposit-limits .dl-change__panel { gap: var(--space-6); margin-top: var(--space-6); }
  .page-deposit-limits .dl-change__submit { align-self: stretch; }
  .page-deposit-limits .dl-form__legal { font-size: 11px; line-height: 14px; }

  /* 4:657 — полоса помощи 390×401: pad 20, зоны по 8, между ними 24 + линия */
  .page-deposit-limits .dl-rail {
    gap: 0;
    padding: var(--space-9);
    border-radius: 0;
  }

  .page-deposit-limits .dl-rail__card { gap: var(--space-4); }
  .page-deposit-limits .dl-rail__card + .dl-rail__card { margin-top: var(--space-13); }

  .page-deposit-limits .dl-rail__card + .dl-rail__card::before {
    inset: -24px 0 auto 0;
    background: var(--color-paper);
    opacity: .15;
  }

  /* 4:659 — Archivo Black 14/15.23; 4:660 — 12/18; 4:665 — 11/14.3;
     4:666 — Archivo Black 28/30.46; 4:661 — Geist 700 12/15.6 */
  .page-deposit-limits .dl-rail__title { font-size: 14px; line-height: 15px; }
  .page-deposit-limits .dl-rail__text { font-size: 12px; line-height: 18px; }
  .page-deposit-limits .dl-rail__card--phone .dl-rail__text { font-size: 12px; line-height: 16px; }
  .page-deposit-limits .dl-rail__meta { font-size: 11px; line-height: 14px; }
  /* Специфичнее, чем .dl-rail__card a из pages.css: телефон — тоже ссылка,
     и общее правило 12/16 гасило кегль 28 из макета (4:666) */
  .page-deposit-limits .dl-rail__card .dl-rail__phone { font-size: 28px; line-height: 30px; }
  .page-deposit-limits .dl-rail .link-arrow { font-size: 12px; line-height: 16px; }


  /* 4:695 related-controls — 390x466: шапка 70 (11/14.3 + Archivo Black 24/26.11),
     строки 65/81/81/65 = padding 16 + блок текста (15 + 2 + 16|32).
     Обводка строки в макете внутренняя и высоту не увеличивает — рисую
     её inset-тенью: border добавлял по 1px на строку. */
  .page-deposit-limits .dl-how__kicker { font-size: 11px; line-height: 14px; }
  .page-deposit-limits .dl-how__title { font-size: 24px; line-height: 26px; }

  .page-deposit-limits .dl-tool {
    column-gap: 0;
    align-items: center;
    border: 0;
    box-shadow: inset 0 1px 0 var(--color-line-soft);
  }

  .page-deposit-limits .dl-tool:last-child {
    box-shadow: inset 0 1px 0 var(--color-line-soft), inset 0 -1px 0 var(--color-line-soft);
  }

  .page-deposit-limits .dl-tool__text { gap: var(--space-1); }

  /* 4:712 — «RESPONSIBLE GAMBLING CENTRE» в макете 269 при колонке 266:
     заголовок там не переносится, а вылезает на 3px. Перенос давал строке
     96 вместо 81. Ниже ширины фрейма перенос возвращается. */
  .page-deposit-limits .dl-tool__title { white-space: nowrap; }

  .page-deposit-limits .dl-tool__note { font-size: 12px; line-height: 16px; }

  .page-deposit-limits .dl-tool__link {
    font-size: 13px;
    font-weight: var(--fw-black);
    line-height: 17px;
  }
  /* 4:720 — секция 390×264: pad 48/16, зазор 12 */
  .page-deposit-limits .rg-section--slim {
    gap: var(--space-6);
    padding: var(--space-13) var(--gutter-mobile);
  }

  .page-deposit-limits .rg-section--slim .rg-section__intro { gap: var(--space-6); }
  .page-deposit-limits .rg-section__kicker { font-size: 11px; line-height: 14px; }
  .page-deposit-limits .rg-section--slim .rg-section__title { font-size: 32px; line-height: 35px; }
  .page-deposit-limits .rg-section--slim .rg-section__lead { font-size: 14px; line-height: 20px; }

  /* 4:721 — знак 80/87.04, y 2719 от фрейма при секции на y 2599 → 120 */
  .page-deposit-limits .rg-section__watermark {
    top: 120px;
    left: var(--gutter-mobile);
    font-size: 80px;
    line-height: 87px;
  }
}

/* Ниже ширины мобильного фрейма геометрия макета не проверяется —
   задача одна: ничего не ломать. */
@media (max-width: 389px) {
  .page-deposit-limits .dl-tool__title { white-space: normal; }
}