/* ==========================================================================
   TicketUp — переиспользуемые компоненты
   Кнопки, карточки, шапка, мобильное меню, поля формы, аккордеон, плитки.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 13px 24px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  /* Подписи держим в одну строку, но не даём кнопке распирать колонку:
     на узких экранах перенос разрешён отдельным правилом в responsive.css */
  white-space: nowrap;
  max-width: 100%;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease),
    box-shadow var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-primary);
}

.btn--primary:active {
  background: var(--color-primary-active);
}

/* Всегда лежит на синей плите финального призыва. Раньше плита была светло-жёлтой
   и кнопка на ней была графитовой; теперь плита тёмно-синяя, поэтому контраст
   держит светлая заливка. Значения фиксированные: плита синяя в обеих темах */
.btn--solid {
  background: #fff;
  color: var(--color-primary);
}

.btn--solid:hover {
  background: #e6f0fa;
  color: var(--color-primary-active);
  box-shadow: var(--shadow-card-hover);
}

.btn--ghost {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn--ghost:hover {
  border-color: var(--color-text);
}

/* Вторичная кнопка на графитовой плите */
.btn--outline-light {
  background: transparent;
  color: var(--color-on-dark);
  border-color: var(--line-on-dark);
}

.btn--outline-light:hover {
  background: var(--fill-on-dark-strong);
  border-color: var(--color-on-dark);
}

.btn--lg {
  padding: 16px 30px;
  font-size: 16px;
}

.btn--sm {
  padding: 10px 18px;
  font-size: 14px;
}

/* Нижняя граница под палец: 44px — минимальная зона нажатия */
.btn--lg,
.btn--block {
  min-height: 52px;
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.65;
  pointer-events: none;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Стрелка внутри кнопки слегка уезжает вправо при наведении */
.btn .icon {
  transition: transform var(--duration) var(--ease);
}

.btn:hover .icon--arrow {
  transform: translateX(3px);
}

/* Текстовая ссылка со стрелкой */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: 3px;
  transition:
    color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease);
}

.link-arrow:hover {
  color: var(--color-primary-ink);
  border-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Карточки
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.2vw, 30px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-strong);
}

.card__title {
  font-size: var(--text-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--color-text);
}

.card__text {
  font-size: 15px;
  color: var(--color-text-muted);
}

/* Иконка карточки: квадрат с бледно-янтарной подложкой */
.card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
  border-radius: var(--radius-small);
  background: var(--color-primary-soft);
  color: var(--color-icon-ink);
}

.card--dark {
  background: var(--fill-on-dark);
  border-color: var(--line-on-dark-soft);
  box-shadow: none;
}

.card--dark:hover {
  background: var(--fill-on-dark-strong);
  border-color: var(--line-on-dark);
}

.card--dark .card__title {
  color: var(--color-on-dark);
}

.card--dark .card__text {
  color: var(--color-on-dark-muted);
}

.card--dark .card__icon {
  background: var(--fill-on-dark-strong);
  color: var(--color-primary-light);
}

/* --------------------------------------------------------------------------
   Логотип партнёра
   Подложка тёмная в обеих темах: логотипы партнёров разноцветные, часть из
   них со светлым текстом — на белом фоне они пропадают.
   -------------------------------------------------------------------------- */
.partner {
  display: grid;
  place-items: center;
  height: 100%;
  /* Нижняя граница высоты, а не фиксированная высота: логотипы разной
     формы, плитке нужно право стать выше, но не право стать пустой */
  min-height: clamp(92px, 13vw, 116px);
  padding: clamp(14px, 2.4vw, 20px);
  background: #15171e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-medium);
  transition:
    transform var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.partner:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: var(--shadow-card);
}

.partner__logo {
  width: auto;
  max-width: 72%;
  max-height: 46px;
  object-fit: contain;
}

/* Вертикальные знаки заметно ниже по ширине — им нужен запас по высоте */
.partner__logo--tall {
  max-width: 88%;
  max-height: 76px;
}

/* Самым мелким знакам ужимаем поля плитки, чтобы дать логотипу больше места */
.partner--tight {
  padding: 10px;
}

.partner__logo--xl {
  max-width: 100%;
  max-height: 96px;
}

/* --------------------------------------------------------------------------
   Чип / метка
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-body);
}

.chip--dark {
  background: var(--fill-on-dark);
  border-color: var(--line-on-dark-soft);
  color: var(--color-on-dark-body);
}

.chip--accent {
  background: var(--color-primary-soft);
  border-color: transparent;
  color: #6b5000;
}

/* --------------------------------------------------------------------------
   Шапка
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  /* Только визуальные свойства в переходе — высота не анимируется, чтобы
     контент не дёргался при прокрутке */
  transition: box-shadow var(--duration-fast) var(--ease);
}

.header.is-scrolled {
  border-bottom-color: var(--color-border-strong);
  box-shadow: var(--shadow-header);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 32px);
  min-width: 0;
  height: var(--header-height);
}

/* Ссылка-логотип: min-height даёт зону нажатия под палец —
   сам знак ниже, но кликается вся высота строки шапки */
.logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
}

/* Логотип задаётся высотой: пропорции держит собственный viewBox SVG */
.logo__img {
  width: auto;
  height: 30px;
}

.logo--lg .logo__img {
  height: 38px;
}

.nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
  /* Расстояние между пунктами сжимается вместе с окном: сами пункты уже
     носят внутренние отступы, поэтому внешний зазор может стать совсем
     небольшим, не склеивая подписи */
  gap: clamp(2px, 0.7vw, 12px);
  margin-inline: auto;
}

.nav__link {
  position: relative;
  /* Подпись в одну строку, поэтому сжимать пункт нечего: без flex: none
     он ужимался, а текст вылезал за пределы .nav на переключатель темы */
  flex: none;
  padding: 8px clamp(8px, 0.9vw, 14px);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  /* Неактивные пункты остаются полноценным текстом, а не «выключенными» */
  color: var(--color-text-body);
  transition:
    color var(--duration-fast) var(--ease),
    background-color var(--duration-fast) var(--ease);
}

.nav__link:hover {
  color: var(--color-text);
  background: var(--color-background-alt);
}

/* Активный раздел: фирменный цвет, подложка и более насыщенный текст.
   Класс и aria-current ставит ScrollSpy в js/navigation.js */
.nav__link.is-active {
  color: var(--color-primary-ink);
  font-weight: 700;
  background: var(--color-primary-soft);
  box-shadow: inset 0 0 0 1px var(--color-accent-line);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  margin-left: auto;
}

/*
  Помещается ли навигация — зависит от языка: «Өнөктөштөргө» и
  «Fonctionnalités» шире русских подписей. Поэтому порог не зашит
  в медиазапрос, а считается: js/navigation.js меряет шапку и ставит
  .is-measured вместе с .is-compact. Медиазапрос на 1279px остаётся
  запасным вариантом на случай, когда скрипты не отработали.
*/
.header.is-measured .nav {
  display: flex;
}

/*
  Промежуточная ступень: кегль подписей тот же, но воздуха между ними
  меньше. Так навигация остаётся на экране там, где переводы длиннее
  русского и полного шага уже не хватает.
*/
.header.is-tight .header__inner {
  gap: 16px;
}

.header.is-tight .nav {
  gap: 2px;
}

.header.is-tight .nav__link {
  padding-inline: 8px;
}

.header.is-measured .burger {
  display: none;
}

.header.is-measured.is-compact .nav {
  display: none;
}

.header.is-measured.is-compact .burger {
  display: flex;
}

/* Бургер */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-border-strong);
}

.burger span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--color-text);
  transition:
    transform var(--duration) var(--ease),
    opacity var(--duration-fast) var(--ease);
}

.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Мобильное меню (off-canvas)
   -------------------------------------------------------------------------- */
.scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration) var(--ease),
    visibility var(--duration) var(--ease);
}

.scrim.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-menu) + 1);
  width: min(360px, 88vw);
  display: flex;
  flex-direction: column;
  /* Панель не должна залезать под вырез и системную полосу iPhone */
  padding: max(20px, env(safe-area-inset-top)) var(--container-padding)
    max(32px, env(safe-area-inset-bottom));
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  transform: translateX(100%);
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition:
    transform var(--duration) var(--ease),
    visibility var(--duration) var(--ease);
}

.mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
}

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: calc(var(--header-height) - 20px);
  margin-bottom: 20px;
}

.mobile-menu__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease);
}

.mobile-menu__close:hover {
  border-color: var(--color-text);
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.mobile-menu__link {
  /* Горизонтальный отступ задан всем пунктам сразу: активное состояние
     добавляет только цвет и подложку, поэтому список не дёргается */
  padding: 14px 14px;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  transition:
    color var(--duration-fast) var(--ease),
    background-color var(--duration-fast) var(--ease);
}

.mobile-menu__link:hover {
  color: var(--color-primary-ink);
}

.mobile-menu__link.is-active {
  color: var(--color-primary-ink);
  font-weight: 700;
  background: var(--color-primary-soft);
  box-shadow: inset 3px 0 0 0 var(--color-primary);
}

.mobile-menu__footer {
  margin-top: auto;
  padding-top: 28px;
}

.mobile-menu__note {
  margin-top: 16px;
  font-size: 14px;
  color: var(--color-text-muted);
}

.mobile-menu__note a {
  color: var(--color-text);
  font-weight: 600;
}

.mobile-menu__note a:hover {
  color: var(--color-primary-ink);
}

body.is-locked {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Поля формы
   -------------------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Ячейка сетки формы по умолчанию не уже своего содержимого: без
     min-width: 0 длинный placeholder или текст ошибки раздвинул бы
     столбец и вывел поле за карточку */
  min-width: 0;
}

.field__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.field__label .required {
  color: var(--color-danger);
}

.field__control {
  width: 100%;
  /* max-width страхует поле от выхода за карточку формы, если браузер
     подставит собственную ширину (например, у input[type="number"]) */
  max-width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  /* Ровно 16px: при меньшем размере Safari на iPhone увеличивает страницу
     при фокусе, и после этого её можно прокручивать вбок */
  font-size: 16px;
  color: var(--color-text);
  transition:
    border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}

.field__control::placeholder {
  color: #a4a8b4;
}

.field__control:hover {
  border-color: #c6c7d0;
}

.field__control:focus {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

select.field__control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b6f7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
  cursor: pointer;
}

textarea.field__control {
  /* Высота растёт от содержимого, а не задана жёстко */
  min-height: 112px;
  line-height: 1.55;
  /* Тянуть можно только вниз: горизонтальное растягивание пользователем
     разрывало карточку формы */
  resize: vertical;
}

/* Сообщение об ошибке появляется под полем и раздвигает только свою
   строку: поля лежат в одной колонке, поэтому сетка не перестраивается */
.field__error {
  display: none;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-danger);
}

.field.has-error .field__control {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
}

.field.has-error .field__error {
  display: block;
}

/* Чекбокс согласия */
.checkbox {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
  cursor: pointer;
}

.checkbox input {
  width: 20px;
  height: 20px;
  /* Квадрат выравнивается по первой строке текста, а не по её середине */
  margin-top: 2px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Ссылка на политику конфиденциальности внутри согласия. Оформление то же,
   что у ссылок в сносках (.note a): подчёркивание и более плотное начертание.
   Клик по ней открывает документ и не переключает сам чекбокс — интерактивный
   элемент внутри <label> не передаёт нажатие полю */
.checkbox label a {
  font-weight: 700;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.checkbox label a:hover {
  color: var(--color-primary-ink);
}

.checkbox.has-error {
  color: var(--color-danger);
}

.checkbox.has-error .field__error {
  display: block;
  grid-column: 2;
  margin-top: 4px;
}

/* Сообщение об успехе / ошибке формы */
.form-message {
  display: none;
  align-items: flex-start;
  gap: 12px;
  /* Текст сообщения переносится, а не выталкивает иконку за карточку */
  min-width: 0;
  padding: 16px 18px;
  border-radius: var(--radius-small);
  font-size: 15px;
  font-weight: 600;
}

.form-message.is-visible {
  display: flex;
}

.form-message span {
  min-width: 0;
}

.form-message--success {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  color: var(--color-success);
}

@keyframes sg-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   Аккордеон FAQ
   -------------------------------------------------------------------------- */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.accordion__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  transition:
    border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.accordion__item:hover {
  border-color: var(--color-border-strong);
}

.accordion__item.is-open {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 20px clamp(18px, 2vw, 26px);
  text-align: left;
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.accordion__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  transition:
    transform var(--duration) var(--ease),
    background var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease);
}

.accordion__item.is-open .accordion__icon {
  transform: rotate(45deg);
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* Раскрытие через grid-template-rows — плавно и без замера высоты в JS */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration) var(--ease);
}

.accordion__item.is-open .accordion__panel {
  grid-template-rows: 1fr;
}

.accordion__panel > div {
  overflow: hidden;
}

.accordion__text {
  padding: 0 clamp(18px, 2vw, 26px) 22px;
  font-size: 15px;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Переключатель темы
   -------------------------------------------------------------------------- */
.header__tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-small);
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
}

.switch__btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  /* Внутренний радиус на толщину рамки меньше внешнего */
  border-radius: 11px;
  color: var(--color-text-muted);
  transition:
    background var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}

.switch__btn:hover {
  color: var(--color-text);
}

/* Активное положение — приподнятая «шайба», как у сегментного контрола */
.switch__btn[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1px 3px rgba(16, 18, 27, 0.16);
}

/* Тот же переключатель на графитовой плите футера */
.switch--on-dark {
  background: var(--fill-on-dark);
  border-color: var(--line-on-dark-soft);
}

.switch--on-dark .switch__btn {
  color: var(--color-on-dark-muted);
}

.switch--on-dark .switch__btn:hover {
  color: var(--color-on-dark);
}

.switch--on-dark .switch__btn[aria-pressed="true"] {
  background: var(--fill-on-dark-strong);
  color: var(--color-on-dark);
  box-shadow: none;
}

.mobile-menu__tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.mobile-menu__tools-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Сообщение об ошибке отправки */
.form-message--error {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  color: var(--color-danger);
}

/* --------------------------------------------------------------------------
   Переключатель языка: кнопка в шапке + общая модалка выбора
   -------------------------------------------------------------------------- */
.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  transition:
    border-color var(--duration-fast) var(--ease),
    background var(--duration-fast) var(--ease);
}

.lang__btn:hover {
  border-color: var(--color-border-strong);
  background: var(--color-background-alt);
}

/* --- Модалка --- */
.modal {
  width: min(520px, calc(100vw - 32px));
  max-height: min(78dvh, 640px);
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  color: var(--color-text-body);
  box-shadow: var(--shadow-panel);
  overflow: auto;
  overscroll-behavior: contain;
}

.modal::backdrop {
  background: rgba(16, 18, 27, 0.6);
  backdrop-filter: blur(2px);
}

/* Запасной вариант без JavaScript: кнопка в шапке — ссылка на #lang-modal,
   и окно раскрывается по :target. С JavaScript окно открывается как
   модальное, и это правило не срабатывает. */
.modal:target:not([open]) {
  display: block;
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: 90;
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.modal__title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.modal__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  transition:
    border-color var(--duration-fast) var(--ease),
    background var(--duration-fast) var(--ease);
}

.modal__close:hover {
  border-color: var(--color-text);
  background: var(--color-background-alt);
}

.modal__note {
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--color-text-muted);
}

.lang-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.lang-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--color-background-alt);
  text-align: left;
  transition:
    background var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease);
}

.lang-card:hover {
  background: var(--color-border);
}

.lang-card[aria-current] {
  border-color: var(--color-border-strong);
  background: var(--color-surface);
}

.lang-card__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.lang-card__native {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.lang-card__code {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* Галочка видна только у выбранного языка */
.lang-card__check {
  flex: none;
  opacity: 0;
  color: var(--color-text);
  stroke-width: 2.6;
  transition: opacity var(--duration-fast) var(--ease);
}

.lang-card[aria-current] .lang-card__check {
  opacity: 1;
}

/* Ловушка для ботов: убрана из потока и недоступна для чтения с экрана */
.form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Плавающая кнопка WhatsApp
   Держится в правом нижнем углу на всех страницах. По z-index лежит ниже
   шапки и мобильного меню (--z-float = 90), поэтому открытое меню и модалка
   выбора языка её перекрывают, а не наоборот.
   -------------------------------------------------------------------------- */
/* Разметка кнопки лежит в конце <body> каждой страницы и ведёт на
   подтверждённый номер TicketUp. */
.whatsapp-fab {
  position: fixed;
  /* Отступ растёт вместе с окном — как и вся остальная сетка сайта */
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: var(--z-float);

  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);

  background: var(--color-whatsapp);
  color: #fff;
  box-shadow: var(--shadow-whatsapp);

  transition:
    background var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}

.whatsapp-fab:hover {
  background: var(--color-whatsapp-hover);
  transform: translateY(-2px);
}

.whatsapp-fab:active {
  transform: translateY(0);
}

/* Кольцо фокуса рисуем снаружи: внутри круга оно сливается с заливкой */
.whatsapp-fab:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.whatsapp-fab .icon {
  width: 30px;
  height: 30px;
}

/* Подпись выезжает слева от кнопки. Для скринридера она не нужна —
   имя ссылки уже задано через aria-label, поэтому aria-hidden в разметке */
.whatsapp-fab__label {
  position: absolute;
  right: calc(100% + 12px);
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;

  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition:
    opacity var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease);
}

.whatsapp-fab:hover .whatsapp-fab__label,
.whatsapp-fab:focus-visible .whatsapp-fab__label {
  opacity: 1;
  transform: translateX(0);
}

/* На бумаге кнопка бесполезна и налезает на текст */
@media print {
  .whatsapp-fab {
    display: none;
  }
}