/* Contact Us. Числа из фреймов baqqybet-contact-us-desktop (1440) и
 * baqqybet-contact-us-mobile (390): fig-spec / gen, не из головы.
 * Класс страницы — M1: мобильная ветка написана вместе с секцией.
 *
 * Чего не хватило в общих компонентах и что описано здесь:
 *   · поле ввода высотой 48 (в components.css — 44);
 *   · подпись поля на светлой секции цветом #94a3b8 (в components.css её
 *     перекрашивает `.section--light .field__label`);
 *   · обёртка `.cf__select` — нативный select со стрелкой макета;
 *   · панель «Customer Support» и карточка «Need gambling support?».
 * Общие файлы не правились: по ним верстают другие страницы.
 */

/* ── page-intro (2:1475) ──────────────────────────────────────────────── */
/* Тёмная шапка страницы. Паддинги макета: 64 сверху, 24 снизу. */
.ci { background: var(--color-bg); padding-block: var(--space-64) var(--space-24); }
.ci__inner { display: flex; flex-direction: column; gap: var(--space-8); }
.ci__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-xs); font-weight: 800; line-height: 15px; letter-spacing: .0833em; /* 1px / 12px */
  text-transform: uppercase; color: var(--color-accent);
}
.ci__title {
  font-family: var(--font-ui);
  font-size: 56px;            /* кегля 56 в шкале токенов нет — число макета */
  font-weight: 900; line-height: 68px; letter-spacing: -.0268em; /* -1.5px / 56px */
  color: var(--color-text-strong);
}
.ci__lead { font-size: var(--fs-lg); line-height: 24px; color: var(--color-text); }
/* Адрес поддержки нарисован только в мобильном фрейме. */
.ci__email { display: none; font-size: var(--fs-body); line-height: 17px; color: var(--color-text); }
.ci__email a { color: inherit; text-decoration: underline; text-underline-offset: 2px; position: relative; }
.ci__email a:hover { color: var(--color-accent); }
/* Тап-зона 24px псевдоэлементом: паддинг сдвинул бы строку. */
.ci__email a::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 24px; }

/* ── main-contact-area (2:1479) ───────────────────────────────────────── */
/* 936 + 48 + 360 = 1344 — контент десктопного фрейма. */
.contact__inner { display: grid; grid-template-columns: 936px 360px; gap: var(--space-48); align-items: start; }
.contact__main  { display: flex; flex-direction: column; gap: var(--space-24); min-width: 0; }

.cf__heading { display: flex; flex-direction: column; gap: var(--space-4); }
.cf__title {
  font-family: var(--font-ui);
  font-size: var(--fs-h4); font-weight: 900; line-height: 29.05px;
  color: var(--color-text-dark);
}
.cf__sub { font-size: var(--fs-body); line-height: 21px; color: var(--color-text-dark-muted); }

.cf__form { display: flex; flex-direction: column; gap: var(--space-24); }
.cf__form-error { font-size: var(--fs-sm); line-height: 16px; }
.cf__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-16); }

/* Подпись поля. В макете она #94a3b8, но на белой карточке это 2.31:1 при норме
   4.5, поэтому берётся #475569 из той же палитры (6.8:1). Кегль, начертание и
   трекинг остаются макетными — меняется только цвет. */
.contact .field .field__label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs); font-weight: 700; line-height: 15px; letter-spacing: .0417em; /* 0.5px / 12px */
  text-transform: uppercase; color: var(--color-text-dark-muted);
}
/* Поле ввода макета: белое, 48 высотой, радиус 10, паддинг 16 по бокам.
   Обводки в макете у поля нет — состояния рисует box-shadow, чтобы граница
   не меняла габарит и не появлялась там, где её не нарисовали. */
.contact .field input,
.contact .field select,
.contact .field textarea {
  min-height: 48px; padding: 0 var(--space-16);
  background: var(--color-card);
  border: 0; border-radius: var(--radius-10);
  font-size: var(--fs-body); line-height: 17px; color: var(--color-text-dark);
}
.contact .field textarea {
  min-height: 160px; padding: var(--space-20) var(--space-16);
  resize: vertical;
}
.contact .field input::placeholder,
.contact .field textarea::placeholder { color: var(--color-text-muted); }
.contact .field input:hover,
.contact .field select:hover,
.contact .field textarea:hover { box-shadow: inset 0 0 0 1px var(--color-border-dim); }
.contact .field input:focus,
.contact .field select:focus,
.contact .field textarea:focus {
  box-shadow: inset 0 0 0 1px var(--color-text-dark), var(--focus-ring-dark); outline: none;
}
.contact .field.has-error input,
.contact .field.has-error select,
.contact .field.has-error textarea { box-shadow: inset 0 0 0 1px var(--color-error); }

/* Выпадающий список: нативный select, стрелка — вектор макета 16×16 справа.
   Цвет выбранного значения в макете #64748b (в токенах такого нет). */
.cf__select { position: relative; display: block; }
.contact .cf__select select {
  appearance: none; width: 100%; padding-right: 44px; cursor: pointer;
  color: #64748b;
}
.cf__select-arrow {
  position: absolute; right: var(--space-16); top: 50%; translate: 0 -50%;
  width: 16px; height: 16px; color: var(--color-text-dark-muted);
  pointer-events: none;
}

.cf__note { font-size: var(--fs-sm); line-height: 16px; color: var(--color-text-muted); }

/* Кнопка отправки: 168×42 в макете, поэтому ширина по содержимому. */
.cf__submit {
  align-self: flex-start;
  min-height: 42px; padding: var(--space-12) var(--space-24);
  border-radius: var(--radius-12);
  font-family: var(--font-ui);
  font-size: var(--fs-md); font-weight: 900; line-height: 18.15px; letter-spacing: .0667em; /* 1px / 15px */
  text-transform: uppercase;
}

/* Подтверждение отправки. Модуль кита складывает сообщение в data/ и в
   messages.log — почтового транспорта в этой сборке нет, поэтому «получено». */
.cf__done {
  display: flex; flex-direction: column; gap: var(--space-8);
  padding: var(--space-20);
  background: var(--color-card);
  border: 1px solid var(--color-border-light); border-radius: var(--radius-14);
}
.cf__done-title { font-size: var(--fs-lg); font-weight: 900; line-height: 20px; color: var(--color-text-dark); }
.cf__done-text  { font-size: var(--fs-body); line-height: 21px; color: var(--color-text-dark-muted); }

/* ── customer-support-sidebar (2:1515) ────────────────────────────────── */
.cs { display: flex; flex-direction: column; gap: var(--space-24); min-width: 0; }
.cs__heading { display: flex; flex-direction: column; gap: var(--space-8); }
.cs__title {
  font-family: var(--font-ui);
  font-size: var(--fs-h4); font-weight: 900; line-height: 29.05px;
  color: var(--color-text-dark);
}
.cs__sub { font-size: var(--fs-body); line-height: 21px; color: var(--color-text-dark-muted); }

/* Разделители пунктов — ROUNDED_RECTANGLE 1px #e5e7eb: отдельный узел макета
 * в зазоре между пунктами, поэтому псевдоэлемент, а не рамка пункта. */
.cs__stack { display: flex; flex-direction: column; gap: 1px; }
.cs__item  { position: relative; display: flex; flex-direction: column; gap: var(--space-8); padding-block: var(--space-16); }
.cs__item + .cs__item::before {
  content: ""; position: absolute; inset-inline: 0; top: -1px;
  height: 1px; background: var(--color-border-light);
}
.cs__label {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs); font-weight: 800; line-height: 13.31px; letter-spacing: .0909em; /* 1px / 11px */
  text-transform: uppercase; color: #0f172a;   /* из макета, в токенах такого нет */
}
.cs__text { font-size: var(--fs-sm); line-height: 18px; color: var(--color-text-dark-muted); }
.cs__text--email { line-height: 16px; }   /* строка support-email в макете 16, а не 18 */
.cs__link {
  align-self: flex-start; position: relative;
  font-size: var(--fs-sm); font-weight: 700; line-height: 16px;
  color: #0f172a; text-decoration: none;
}
.cs__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.cs__link::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 24px; }
.cs__email {
  position: relative; line-height: 16px;
  color: var(--color-text-dark-muted); text-decoration: underline; text-underline-offset: 2px;
}
.cs__email:hover { color: var(--color-text-dark); }
.cs__email::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 24px; }

.cs__operator { display: flex; flex-direction: column; gap: var(--space-4); }
.cs__op-name { font-size: var(--fs-sm); font-weight: 700; line-height: 16px; color: var(--color-text-dark); }
/* Адрес и коды в макете набраны моноширинным Geist Mono. */
.cs__op-address {
  font-family: var(--font-mono);
  font-size: var(--fs-xs); line-height: 16px; color: var(--color-text-muted);
}
.cs__op-code {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs); line-height: 14.3px; color: var(--color-text-dark-muted);
}
.cs__op-country,
.cs__op-regulator {
  font-family: var(--font-text);
  font-size: var(--fs-sm); line-height: 18.2px; color: var(--color-text-dark-muted);
}

/* Карточка «Need gambling support?»: тёмная плашка на светлой секции. */
.cs__note {
  display: flex; flex-direction: column; gap: var(--space-8);
  padding: var(--space-16);
  background: var(--color-panel);
  border-radius: var(--radius-14);
  box-shadow: inset 0 0 0 1px var(--color-border);   /* strokeAlign INSIDE */
}
.cs__note-label {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs); font-weight: 800; line-height: 13.31px; letter-spacing: .0909em;
  text-transform: uppercase; color: var(--color-accent);
}
.cs__note-line { font-size: var(--fs-sm); font-weight: 700; line-height: 16px; color: var(--color-text-strong); }
.cs__note-line a { color: inherit; text-decoration: underline; text-underline-offset: 2px; position: relative; }
.cs__note-line a:hover { color: var(--color-accent); }
.cs__note-line a::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 24px; }
.cs__note-text { font-size: var(--fs-sm); line-height: 16px; color: var(--color-text); }
.cs__note-link {
  align-self: flex-start; position: relative;
  font-size: var(--fs-sm); font-weight: 700; line-height: 16px;
  color: var(--color-accent); text-decoration: none;
}
.cs__note-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.cs__note-link::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 24px; }

/* ── планшет ──────────────────────────────────────────────────────────── */
/* Порог 1359: ниже него десктопная сетка 936 + 360 уже не помещается. */
@media (max-width: 1359px) {
  .contact__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .ci__title { font-size: var(--fs-d3); line-height: 56px; }
}

/* ── мобильная ветка макета (фрейм 390) ───────────────────────────────── */
@media (max-width: 767px) {
  .ci { padding-block: var(--space-40) var(--space-32); }
  .ci__inner { gap: var(--space-10); }
  .ci__eyebrow { font-size: var(--fs-2xs); line-height: 13.31px; letter-spacing: .1364em; /* 1.5px / 11px */ }
  .ci__title { font-size: var(--fs-h2); line-height: 39px; letter-spacing: normal; }
  .ci__lead  { font-size: var(--fs-body); line-height: 17px; }
  .ci__email { display: block; }

  .contact { padding-block: var(--space-32) var(--space-40); }
  .contact__inner { gap: var(--space-40); }
  .contact__main  { gap: var(--space-16); }

  .cf__heading { gap: var(--space-6); }
  .cf__title { font-size: 22px; line-height: 27px; }   /* кегля 22 в токенах нет — число макета */
  .cf__sub   { font-size: var(--fs-sm); line-height: 16px; }
  .cf__form  { gap: var(--space-16); }
  /* В мобильном фрейме имя и фамилия стоят друг под другом. */
  .cf__row   { grid-template-columns: 1fr; gap: var(--space-16); }

  /* Подпись поля в мобильном фрейме ровно 13 — с 13.31 набегает 2px на пяти полях. */
  .contact .field .field__label { font-size: var(--fs-2xs); line-height: 13px; letter-spacing: .0455em; }
  .contact .field textarea { min-height: 140px; padding: var(--space-14, 14px) var(--space-16); }

  .cf__note { font-size: var(--fs-xs); line-height: 15px; }
  .cf__submit {
    align-self: stretch; width: 100%;
    min-height: 46px; padding: var(--space-14, 14px) 0;
    letter-spacing: normal;
  }

  .cs { gap: var(--space-20); }
  .cs__title { font-size: 22px; line-height: 27px; }
  .cs__sub   { font-size: var(--fs-sm); line-height: 16px; }
  /* В мобильном фрейме разделитель стоит и перед первым пунктом, а зазор до
     него — 20 сверху и снизу: шаг между пунктами 20+1+20 = 41. */
  .cs__stack { gap: 41px; margin-top: 21px; }
  .cs__item::before {
    content: ""; position: absolute; inset-inline: 0; top: -21px;
    height: 1px; background: var(--color-border-light);
  }
  /* В мобильном фрейме адреса поддержки в пункте нет, а ссылки BetStop в карточке — тоже. */
  .cs__text--email,
  .cs__note-link { display: none; }
  .cs__label { color: var(--color-text-dark); letter-spacing: .0455em; }
  .cs__text  { line-height: 16px; }
  .cs__link  { color: var(--color-text-dark); }
  /* Мобильный фрейм набирает весь блок оператора одним кеглем 12 Inter. */
  .cs__item--operator { gap: var(--space-6); }
  .cs__operator { gap: var(--space-6); }
  .cs__op-address,
  .cs__op-code,
  .cs__op-country,
  .cs__op-regulator {
    font-family: var(--font-ui);
    font-size: var(--fs-xs); line-height: 15px; color: var(--color-text-dark-muted);
  }
}

/* Текст в кнопке макета выровнен по левому краю своего бокса; сама подпись
   центрируется флексом кнопки, поэтому на вид это ничего не меняет. */
.cf__submit-label { text-align: left; }