/* ==========================================================================
   DropHub — подвал (v7). Разметку собирает drophub.footer.js, он же
   подключает этот файл и вставляет подвал после его загрузки.

   Префикс .dh-foot — новый, чтобы старые правила .kz-footer из
   закешированного home.css не могли ничего задеть.

   Раскладка по образцу владельца: логотип + кнопки · линия · четыре
   колонки · четыре широкие кнопки · строка 18+. Цвета — наши: индиго-
   фиолетовые подложки (--ht-* из index.css), лайм и фиолет логотипа.

   Телефоны на сайте слабые: ни одного backdrop-filter, картинки лениво,
   двигаются только transform/opacity и цвет; при reduced-motion — ничего.
   ========================================================================== */

.dh-foot {
  --df-text:    #F5F3FF;
  --df-dim:     #9F98C9;   /* заголовки колонок, 6:1 на фоне */
  --df-mute:    #8C86B3;   /* правовая строка */
  --df-line:    rgba(196, 186, 255, .10);
  --df-pill:    #261E48;   /* плашки кнопок — ступень над фоном (#1A1430) */
  --df-pill-hi: #31285C;
  --df-lime:    #D7FF00;   /* «Drop» логотипа */
  --df-violet:  #A62CFF;   /* «Hub» логотипа */
  --df-tg:      #2AABEE;

  position: relative;
  margin-top: 64px;
  color: var(--df-text);
  font-family: var(--f-body, 'Inter', system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  /* своей полосы и подложки нет, как у образца: подвал лежит на общем
     фоне страницы, а разделитель один — под строкой с логотипом. Так на
     коротких страницах не появляется шов между подвалом и фоном ниже. */
  border-top: 0;
  background: none;
}
/* скрыт, пока не загрузились стили (см. drophub.footer.js) */
.dh-foot[hidden], .dh-foot [hidden] { display: none !important; }
/* сбросы — через :where(), с нулевым весом: иначе .dh-foot a {color}
   перебивал бы цвета самих элементов (.dh-foot__tg-dot и т.п.) */
:where(.dh-foot) *, :where(.dh-foot) *::before, :where(.dh-foot) *::after { box-sizing: border-box; }
:where(.dh-foot) ul { list-style: none; margin: 0; padding: 0; }
:where(.dh-foot) h2, :where(.dh-foot) h3, :where(.dh-foot) p { margin: 0; }
:where(.dh-foot) a { color: inherit; text-decoration: none; }
:where(.dh-foot) svg { display: block; flex: none; }
.dh-foot__sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* 1400px содержимого — как контейнер игровых страниц (crash, case, dealer;
   upgrade/contract и главная лишь чуть шире): края подвала встают по краям
   карточек выше, как у образца. */
.dh-foot__in {
  max-width: 1448px;
  margin: 0 auto;
  padding: 34px 24px 34px;
}

/* общий фокус: лаймовое кольцо, только с клавиатуры */
.dh-foot a:focus-visible,
.dh-foot button:focus-visible {
  outline: 2px solid var(--df-lime);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ─── 1. Верхняя строка ─── */
.dh-foot__top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--df-line);
}
.dh-foot__brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.dh-foot__brand img { display: block; height: 40px; width: auto; }
.dh-foot__tag {
  padding-left: 3px;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #D9D4F5; line-height: 1.2;
}

.dh-foot__tools { display: flex; align-items: center; gap: 8px; }
.dh-foot__pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 42px; padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .04); border-radius: 12px;
  background: var(--df-pill);
  color: var(--df-text); font: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.dh-foot__pill svg { width: 20px; height: 20px; }
.dh-foot__pill:hover { background: var(--df-pill-hi); }
.dh-foot__pill--static { padding: 0 14px; gap: 8px; font-size: 13px; font-weight: 700; cursor: default; }
.dh-foot__pill--static:hover { background: var(--df-pill); }
.dh-foot__pill--static svg { width: 21px; height: 15px; border-radius: 3px; }
.dh-foot__pill--icon { width: 42px; padding: 0; }
.dh-foot__pill--icon svg { width: 21px; height: 21px; }
.dh-foot__pill--icon.is-off { color: #8C86B3; }
.dh-foot__pill--icon.is-off:hover { color: #BDB7DE; }

/* ─── 2. Колонки ─── */
.dh-foot__nav {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  gap: 28px 40px;
  padding-top: 34px;
}
.dh-foot__h {
  margin: 0 0 14px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--df-dim); line-height: 1.3;
}
.dh-foot__h--sub { margin-top: 20px; }
.dh-foot__list { display: flex; flex-direction: column; gap: 10px; }
.dh-foot__list--2 {
  display: grid;
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  column-gap: 56px; row-gap: 10px;
}
.dh-foot__a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 500; line-height: 20px;
  color: var(--df-text);
  /* по верху строки: у пункта со значком (@drophub) базовая линия
     inline-flex берётся от значка, и в одном ряду с «Партнёрской
     программой» пункты стояли на разной высоте */
  vertical-align: top;
  transition: color .15s;
}
a.dh-foot__a:hover { color: var(--df-lime); }
a.dh-foot__a[aria-current="page"] { color: #CBB6FF; }
.dh-foot__a--text { cursor: default; }
.dh-foot__tg-dot {
  display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  background: var(--df-text); color: #1A1430;
  transition: background-color .15s;
}
.dh-foot__tg-dot svg { width: 11px; height: 11px; margin-left: -1px; }
a.dh-foot__a--ico:hover .dh-foot__tg-dot { background: var(--df-lime); }
/* «Поддержка в Telegram» (≈175px) на 340–413px не влезает в колонку
   (151–175px) и рвалась на две строки — там подпись короче */
.dh-foot__tg-s { display: none; }
@media (min-width: 340px) and (max-width: 413px) {
  .dh-foot__tg-l { display: none; }
  .dh-foot__tg-s { display: inline; }
}
/* «Партнёрская программа» встаёт в колонку впритык (≈167–173px на
   168–171px): с классической полосой прокрутки она разрывалась бы по
   слову на строку. Без переноса в худшем случае заходит на 2–6px в
   зазор колонок (16–18px), но фраза не рвётся. */
.dh-foot__grp--coop .dh-foot__a { white-space: nowrap; }

/* ─── 3. Широкие кнопки ─── */
.dh-foot__promos {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  margin-top: 28px;
}
.dh-foot__promo {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 14px 0 62px;
  border-radius: 10px;
  background: linear-gradient(90deg, #2B2257 0%, #221B45 55%, #1F1840 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px rgba(166, 44, 255, .10);
  color: #fff; font-size: 14px; font-weight: 600; line-height: 1.15; text-align: center;
  transition: transform .15s, filter .15s;
}
.dh-foot__promo:hover { transform: translateY(-1px); filter: brightness(1.12); }
/* зелёная: от изумруда к лайму логотипа; середина темнее, чтобы белый
   текст держал контраст (≈4.6:1 под надписью) */
.dh-foot__promo.is-green {
  background: linear-gradient(90deg, #136B3A 0%, #2C8630 50%, #5E9A16 100%);
  box-shadow: inset 0 1px 0 rgba(215, 255, 0, .28), inset 0 0 0 1px rgba(215, 255, 0, .10);
}
.dh-foot__promo-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* На широком экране надпись — по центру всей кнопки, как у образца:
   справа такой же отступ, как место под значком слева. Уже 1240px места
   на самую длинную надпись («Ежедневные награды») с таким отступом не
   хватает, там она центрируется в части правее значка. */
@media (min-width: 1240px) {
  .dh-foot__promo { padding-right: 62px; }
}
/* объёмный значок вылезает за кнопку сверху и снизу, как у образца */
.dh-foot__promo-ico {
  position: absolute; left: 6px; top: 50%;
  width: 52px; height: 52px; object-fit: contain;
  transform: translateY(-50%) rotate(-6deg);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45));
  pointer-events: none;
  transition: transform .2s;
}
.dh-foot__promo:hover .dh-foot__promo-ico { transform: translateY(-54%) rotate(-2deg) scale(1.06); }

/* ─── 4. Нижняя строка ─── */
.dh-foot__bottom {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
  margin-top: 30px;
}
.dh-foot__age {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--df-pill); border: 1px solid rgba(166, 44, 255, .35);
  font-size: 12px; font-weight: 800; color: #E7DEFF;
}
.dh-foot__copy { flex: none; font-size: 13px; font-weight: 700; color: var(--df-text); }
.dh-foot__legal {
  flex: 1 1 300px; min-width: 0;
  padding-left: 14px; border-left: 1px solid var(--df-line);
  font-size: 12px; line-height: 1.45; color: var(--df-mute);
}
.dh-foot__pay { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.dh-foot__pay img { display: block; height: 15px; width: auto; opacity: .5; transition: opacity .15s; }
.dh-foot__pay img[alt="Mastercard"] { height: 20px; }
.dh-foot__pay:hover img { opacity: .8; }

/* Ссылка «Промокоды» ведёт на index.html#ht-promo-form: шапка липкая,
   поэтому форма встаёт ниже неё вместе с заголовком блока. */
#ht-promo-form { scroll-margin-top: 240px; }

/* ─── Планшет ───
   Три колонки: «Режимы · Бонусы · Информация», ниже — «Полезное» во всю
   ширину, и три его группы (Полезное · Соцсети · Сотрудничество) встают
   ровно под тремя колонками выше. В две колонки (как было) под
   «Информацией» оставалась пустая половина рядом с высокой «Полезное». */
@media (max-width: 1000px) {
  .dh-foot { margin-top: 48px; }
  .dh-foot__in { padding: 30px 20px 30px; }
  .dh-foot__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 18px; }
  /* две подколонки режимов должны влезть в треть ширины (≈175px на 601px);
     зазор колонок 18px — чтобы и «Партнёрская программа» (≈173px) там
     вставала в одну строку */
  .dh-foot__list--2 { column-gap: 28px; }
  .dh-foot__col--useful {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 18px; align-items: start;
  }
  .dh-foot__col--useful .dh-foot__h--sub { margin-top: 0; }
  /* зазор между рядами шире: значки вылезают за кнопку сверху и снизу */
  .dh-foot__promos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
}

/* Нижняя строка в одну линию («18+ · DropHub © · оговорка · оплата»)
   влезает с ≈1266px (с учётом полосы прокрутки и места под кнопку чата).
   Уже — две строки: «18+ · DropHub © · оплата справа», под ними правовая
   строка целиком, без висящего на второй строке «Corporation.». */
@media (max-width: 1279px) {
  .dh-foot__legal { order: 3; flex-basis: 100%; padding-left: 0; border-left: 0; }
}

/* Круглая кнопка чата (.kz-chat, home.css) висит в правом нижнем углу
   поверх страницы, ≈64px от края окна. Пока правый край подвала ближе к
   краю окна, правый конец нижней строки (значки оплаты) уходил бы под
   неё. Граница — с запасом на полосу прокрутки: ширина в media-запросе
   её включает, а кнопка стоит от края области содержимого.
   (1448 + 2·(64 − 24) + 17 ≈ 1545 → 1560.) На ≤760px кнопку поднимает
   над полосой вкладок mobile.css, а подвал там и так с запасом снизу.
   Кнопка есть только на главной (.dh-foot--chat, см. drophub.footer.js);
   на остальных страницах значки оплаты встают по правому краю колонок. */
@media (min-width: 761px) and (max-width: 1560px) {
  .dh-foot--chat .dh-foot__bottom { padding-right: 58px; }
}

/* Отступ под полосу вкладок (58px + safe-area) даёт body из mobile.css,
   подвалу хватает обычных 28px снизу. Круглая кнопка чата есть только
   на главной (класс .dh-foot--chat ставит drophub.footer.js, когда на
   странице есть #kz-chat): на ≤760px она висит над полосой вкладок
   (низ ≈12px, верх ≈58px над ней) — там запас больше, чтобы последняя
   строка не уходила под кнопку. На остальных страницах пустой полосы
   над вкладками нет. */
@media (max-width: 760px) {
  .dh-foot__in { padding-bottom: 28px; }
  .dh-foot--chat .dh-foot__in { padding-bottom: 72px; }
}

/* ─── Телефон ───
   Сетка в две равные колонки, и всё встаёт по ним: две подколонки
   «Режимов», «Бонусы | Информация», «Полезное | Сотрудничество». Левые
   края второй колонки — на одной вертикали. */
@media (max-width: 600px) {
  .dh-foot { margin-top: 36px; }
  /* низ: 28px, на главной — 72px под кнопку чата (см. выше, ≤760px) */
  .dh-foot__in { padding: 24px 16px 28px; }
  .dh-foot__top { flex-wrap: wrap; padding-bottom: 20px; }
  .dh-foot__brand img { height: 34px; }
  .dh-foot__pill { height: 40px; padding: 0 14px; }
  .dh-foot__pill--icon { width: 40px; padding: 0; }

  .dh-foot__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; padding-top: 24px; }
  .dh-foot__col--modes { grid-column: 1 / -1; }
  /* row-gap, а не gap: короткая запись сбрасывала бы и column-gap у
     .dh-foot__list--2, и вторая подколонка режимов съезжала на 8px левее
     второй колонки ниже */
  .dh-foot__list { row-gap: 8px; }
  .dh-foot__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .dh-foot__a { font-size: 13.5px; line-height: 19px; }
  .dh-foot__h { margin-bottom: 12px; }
  /* «Полезное» во всю ширину: слева сам раздел, справа «Сотрудничество»
     (до 2026-10-28 справа были «Соцсети», а «Сотрудничество» шло ниже) */
  .dh-foot__col--useful { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }

  /* 2×2, пока надписи влезают; уже 520px — по одной в ряд (ниже) */
  .dh-foot__promos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; margin-top: 24px; }
  .dh-foot__promo { height: 40px; }

  .dh-foot__bottom { margin-top: 26px; gap: 12px; }
}
/* Логотип и три кнопки в одну строку не влезают уже ≈450px. Тогда кнопки
   переносятся под логотип ровным рядом на всю ширину, а не висят слева
   с пустым местом справа: «Помощь» тянется, «RU» — просто подпись, не
   кнопка, поэтому остаётся по своей ширине, звук — квадрат. */
@media (max-width: 459px) {
  .dh-foot__tools {
    flex: 1 1 100%;
    display: grid; grid-template-columns: minmax(0, 1fr) auto 40px; gap: 8px;
  }
}
/* Значки оплаты справа от «18+ · DropHub ©», пока между ними остаётся
   заметный зазор (строке нужно ≈375px, с 441px окна запас ≥30px). Уже —
   отдельной строкой под ними, а не впритык к «© 2026». */
@media (max-width: 440px) {
  .dh-foot__pay { flex-basis: 100%; margin-left: 0; }
}
@media (max-width: 520px) {
  /* 12px между рядами: значки соседних кнопок вылезают за край и иначе
     почти касаются друг друга */
  .dh-foot__promos { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .dh-foot__promo { height: 44px; }
}
/* Самые узкие телефоны (iPhone SE 1-го поколения — 320px, обложка
   Galaxy Fold — 280px): колонка в половину ширины уже слова
   «Конфиденциальность» (≈145px), а «Ивенты и розыгрыши» и «Проверка
   честности» рвутся на две строки. Здесь разделы идут друг под другом
   в одну колонку; две подколонки «Режимов» остаются — у них своя
   сетка, а названия режимов короткие. */
@media (max-width: 339px) {
  .dh-foot__nav, .dh-foot__col--useful { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .dh-foot *, .dh-foot *::before, .dh-foot *::after { transition: none !important; }
  .dh-foot__promo:hover { transform: none; }
  .dh-foot__promo:hover .dh-foot__promo-ico { transform: translateY(-50%) rotate(-6deg); }
}