/* ============================================================
   Apex — модалка «Программа путешествия» (заявка на тур)

   Нативный <dialog>: Esc, фокус-трап и затемнение достаются
   от браузера, JS нужен только на открытие и мелкую логику.

   Дисциплина акцентов: оранжевый #fd4a22 закреплён за обратной
   связью — фокус и ошибки, больше нигде. Цвет мессенджеров —
   только у чипов. Кнопка чёрная. Так в карточке ровно один
   активный цвет за раз, а не четыре одновременно.
   ============================================================ */

.apex-contact {
  /* цвета */
  --ac-ink: var(--dark, #1f1f1f);
  --ac-ink-soft: #5f5e58;
  /* текст поверх серых полей. Отдельный тон от --ac-ink-soft: фон полей
     темнее белого, и на нём мягкие чернила дают только 4.24:1.
     Этот держит 5.13:1 на поле и 4.72:1 при наведении */
  --ac-hint: #5f5e58;
  --ac-white: var(--bg-light, #f3f2ee);
  --ac-field: var(--bg-card, #e4e2db);          /* поля: полутон между белым и «gray light» сайта */
  --ac-field-hover: #d9d6ce;    /* ровно тот же серый, что у карточек сайта */
  --ac-line: rgba(31, 31, 31, 0.1);
  --ac-accent: #fd4a22;         /* только фокус и ошибки */
  --ac-error: #c2380f;          /* тот же акцент, затемнён до 4.5:1 для текста */

  /* кнопка. Цвет вынесен в переменные: нужен оранжевый —
     меняются эти две строки (текст тогда тёмный, белый на #fd4a22
     даёт 3.4:1 при норме 4.5) */
  --ac-cta: var(--orange, #fd4a22);
  --ac-cta-text: #ffffff;
  --ac-cta-hover: #f24d12;

  /* геометрия */
  --ac-radius: 12px;
  --ac-control: 54px;

  /* шрифты: заголовки Bebas Neue, кириллицу подхватывает
     Alumni Sans (в Bebas с Google Fonts кириллицы нет) */
  --ac-display: var(--font-h, "Oswald", "Arial Narrow", sans-serif);
  --ac-text: var(--font-b, "Inter", -apple-system, "Segoe UI", Roboto, sans-serif);

  position: fixed;
  inset: 0;
  margin: auto;
  width: min(620px, calc(100vw - 40px));
  max-height: min(860px, calc(100svh - 40px));
  padding: 0;
  border: 0;
  border-radius: 20px;          /* радиус больших карточек сайта */
  background: var(--bg-light, #f3f2ee);
  color: var(--ac-ink);
  font-family: var(--ac-text);
  overflow: auto;
  overscroll-behavior: contain;
}

.apex-contact *,
.apex-contact *::before,
.apex-contact *::after { box-sizing: border-box; }

.apex-contact::backdrop {
  background: rgba(18, 17, 15, 0.55);
  backdrop-filter: blur(3px);
}

/* появление */
.apex-contact[open] {
  animation: ac-pop 0.32s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.apex-contact[open]::backdrop {
  animation: ac-fade 0.32s ease both;
}

@keyframes ac-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes ac-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.apex-contact__inner { padding: 44px; }

/* ---------------- крестик ---------------- */

.apex-contact__close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--ac-line);
  border-radius: 50%;
  background: var(--ac-white);
  color: var(--ac-ink-soft);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease,
              border-color 0.2s ease;
}

.apex-contact__close svg { width: 16px; height: 16px; }

.apex-contact__close:hover {
  background: var(--ac-ink);
  border-color: var(--ac-ink);
  color: var(--ac-white);
}

.apex-contact__close:focus-visible {
  outline: 2px solid var(--ac-accent);
  outline-offset: 3px;
}

/* ---------------- шапка ---------------- */

.apex-contact__head { margin-bottom: 32px; }

.apex-contact__badge {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--ac-line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ac-ink-soft);
}

.apex-contact__title {
  margin: 18px 0 0;
  padding-right: 44px;         /* место под крестик */
  font-family: var(--ac-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 0.92;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.apex-contact__lead {
  margin: 14px 0 0;
  max-width: 44ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ac-ink-soft);
  text-wrap: pretty;
}

/* ---------------- поля ---------------- */

.apex-contact__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 20px;
}

.ac-field { min-width: 0; }
.ac-messengers { grid-column: 1 / -1; }

.ac-field__label,
.ac-messengers__legend {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 0;
  margin-bottom: 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ac-ink-soft);
}

.ac-field__opt {
  margin-left: auto;
  font-size: 12px;
  color: var(--ac-hint);
}

.ac-input,
.ac-textarea {
  width: 100%;
  background: var(--ac-field);
  border: 1px solid transparent;
  border-radius: var(--ac-radius);
  color: var(--ac-ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease;
}

.ac-input {
  height: var(--ac-control);
  padding: 0 16px;
}

.ac-textarea {
  min-height: 96px;
  padding: 15px 16px;
  resize: vertical;
}

.ac-input::placeholder,
.ac-textarea::placeholder { color: var(--ac-hint); }

.ac-input:hover,
.ac-textarea:hover { background: var(--ac-field-hover); }

.ac-input:focus,
.ac-textarea:focus {
  outline: none;
  background: var(--ac-white);
  border-color: var(--ac-accent);
  box-shadow: 0 0 0 3px rgba(253, 74, 34, 0.14);
}

/* Автозаполнение Chrome красит поле в свой бледно-жёлтый и перебивает
   наш фон. Перебиваем обратно внутренней тенью на всю высоту поля. */
.ac-input:-webkit-autofill,
.ac-input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--ac-ink);
  box-shadow: 0 0 0 1000px var(--ac-field) inset;
  caret-color: var(--ac-ink);
}

.ac-input:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px var(--ac-white) inset,
              0 0 0 3px rgba(253, 74, 34, 0.14);
}

/* ошибка валидации */
.ac-field[data-invalid="true"] .ac-input {
  background: var(--ac-white);
  border-color: var(--ac-error);
}

.ac-field__error {
  display: none;
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ac-error);
}

.ac-field[data-invalid="true"] .ac-field__error { display: block; }

/* ---------------- мессенджеры ---------------- */

.ac-messengers {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

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

.ac-chip { position: relative; }

.ac-chip__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ac-chip__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: var(--ac-control);
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--ac-radius);
  background: var(--ac-field);
  color: var(--ac-hint);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease;
}

.ac-chip__label svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor;
}

.ac-chip__label:hover { background: var(--ac-field-hover); }
.ac-chip__label:active { transform: scale(0.985); }

/* Выбранный чип — белая плашка в обводке чернилами.
   Сайт помечает выбранное двумя способами: чёрной заливкой (активный таб)
   и оранжевой обводкой (активное превью). Заливка здесь столкнулась бы с
   чёрной кнопкой отправки — стало бы две одинаково тяжёлые плашки.
   Оранжевая обводка столкнулась бы с обводкой фокуса — выбранный чип и
   сфокусированное поле выглядели бы одинаково. Поэтому третий вариант:
   форма от таба (обводка), цвет от кнопки (чернила). */
.ac-chip__input:checked + .ac-chip__label {
  background: var(--ac-ink);
  border-color: var(--ac-ink);
  box-shadow: inset 0 0 0 1px var(--ac-ink);
  color: #ffffff;
}

/* у выбранного чипа заливка не меняется, поэтому отклик на наведение —
   утолщение обводки, иначе он единственный не реагирует на курсор */
.ac-chip__input:checked + .ac-chip__label:hover {
  background: #000000;
  box-shadow: inset 0 0 0 2px #000000;
}

.ac-chip__input:focus-visible + .ac-chip__label {
  border-color: var(--ac-accent);
  box-shadow: 0 0 0 3px rgba(253, 74, 34, 0.14);
}

/* ---------------- ник в Telegram ---------------- */

.ac-tg-user {
  margin-top: 16px;
  animation: ac-open 0.28s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.ac-prefix { position: relative; }

.ac-prefix__at {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: var(--ac-hint);
  pointer-events: none;
}

.ac-input--prefixed { padding-left: 30px; }

/* ---------------- «Добавить вопрос» ---------------- */

.ac-more {
  /* flex + fit-content, а не inline-flex: иначе тоггл и кнопка
     отправки встают на одну строку и перекрывают друг друга */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 9px;
  /* зона нажатия 44px: сам текст маленький, добираем невидимым padding */
  min-height: 44px;
  margin-top: 10px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--ac-ink-soft);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.18s ease;
}

.ac-more__sign {
  position: relative;
  width: 17px;
  height: 17px;
  border: 1px solid var(--ac-line);
  border-radius: 50%;
  flex: none;
  transition: transform 0.22s ease, border-color 0.18s ease;
}

/* плюс, который на раскрытии превращается в минус */
.ac-more__sign::before,
.ac-more__sign::after {
  content: "";
  position: absolute;
  inset: 50% 3px auto 3px;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
  transition: opacity 0.22s ease;
}

.ac-more__sign::after { transform: translateY(-50%) rotate(90deg); }

.ac-more[aria-expanded="true"] .ac-more__sign::after { opacity: 0; }
.ac-more[aria-expanded="true"] .ac-more__sign { transform: rotate(180deg); }

.ac-more:hover { color: var(--ac-ink); }
.ac-more:hover .ac-more__sign { border-color: var(--ac-ink); }

.ac-more:focus-visible {
  outline: 2px solid var(--ac-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.ac-note {
  margin-top: 16px;
  animation: ac-open 0.28s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

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

/* ---------------- кнопка ---------------- */

.ac-submit,
.ac-trigger {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--ac-text, "Inter", sans-serif);
}

.ac-submit { margin-top: 28px; }

.ac-submit__label,
.ac-submit__arrow,
.ac-trigger__label,
.ac-trigger__arrow {
  background: var(--ac-cta, #1f1f1f);
  color: var(--ac-cta-text, #fff);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.ac-submit__label,
.ac-trigger__label {
  display: grid;
  place-items: center;
  height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.ac-submit__arrow,
.ac-trigger__arrow {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.ac-submit__arrow svg,
.ac-trigger__arrow svg {
  width: 17px;
  height: 17px;
  transition: transform 0.2s ease;
}

.ac-submit:hover .ac-submit__label,
.ac-submit:hover .ac-submit__arrow,
.ac-trigger:hover .ac-trigger__label,
.ac-trigger:hover .ac-trigger__arrow { background: var(--ac-cta-hover, #000); }

.ac-submit:hover .ac-submit__arrow svg,
.ac-trigger:hover .ac-trigger__arrow svg { transform: translate(2px, -2px); }

.ac-submit:active .ac-submit__label,
.ac-submit:active .ac-submit__arrow { transform: scale(0.98); }

.ac-submit:focus-visible,
.ac-trigger:focus-visible {
  outline: 2px solid var(--ac-accent, #fd4a22);
  outline-offset: 4px;
  border-radius: 999px;
}

.ac-submit[disabled] { opacity: 0.55; pointer-events: none; }

.apex-contact__legal {
  margin: 18px 0 0;
  max-width: 46ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ac-ink-soft);   /* согласие на обработку данных должно читаться */
}

.apex-contact__legal a {
  color: var(--ac-ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.apex-contact__legal a:hover { color: var(--ac-ink); }

/* ---------------- экран «отправлено» ---------------- */

.apex-contact__done {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 0 4px;
}

.apex-contact__inner[data-state="sent"] .apex-contact__head,
.apex-contact__inner[data-state="sent"] .apex-contact__form { display: none; }

.apex-contact__inner[data-state="sent"] .apex-contact__done {
  display: flex;
  animation: ac-open 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.apex-contact__done-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ac-ink);
  color: var(--ac-white);
  margin-bottom: 22px;
}

.apex-contact__done-title {
  margin: 0 0 12px;
  font-family: var(--ac-display);
  font-weight: 700;
  font-size: 46px;
  line-height: 0.95;
  text-transform: uppercase;
}

.apex-contact__done-text {
  margin: 0;
  max-width: 44ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ac-ink-soft);
}

.apex-contact__done-text b { color: var(--ac-ink); font-weight: 500; }

/* номер не должен разрываться посреди цифр */
.ac-nowrap { white-space: nowrap; }

.ac-done-close {
  margin-top: 28px;
  height: 48px;
  padding: 0 26px;
  border: 1px solid var(--ac-line);
  border-radius: 999px;
  background: none;
  color: var(--ac-ink);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease,
              border-color 0.2s ease;
}

.ac-done-close:hover {
  background: var(--ac-ink);
  border-color: var(--ac-ink);
  color: var(--ac-white);
}

.ac-done-close:focus-visible {
  outline: 2px solid var(--ac-accent);
  outline-offset: 3px;
}

/* ============================================================
   Мобильный: модалка прижимается к низу как шторка
   ============================================================ */

@media (max-width: 560px) {
  .apex-contact {
    --ac-control: 50px;

    width: 100%;
    max-width: none;
    max-height: 92svh;
    inset: auto 0 0;
    margin: 0 auto;               /* к нижнему краю */
    border-radius: 20px 20px 0 0;
  }

  .apex-contact__inner {
    padding: 22px 20px max(22px, env(safe-area-inset-bottom));
  }

  .apex-contact__close { top: 14px; right: 14px; width: 38px; height: 38px; }

  .apex-contact__head { margin-bottom: 22px; }
  .apex-contact__title { font-size: 36px; margin-top: 14px; padding-right: 40px; }
  .apex-contact__lead { font-size: 14.5px; line-height: 1.5; margin-top: 10px; }

  .apex-contact__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ac-field__label, .ac-messengers__legend { margin-bottom: 7px; }
  .ac-more { margin-top: 6px; }

  .ac-submit { display: flex; margin-top: 24px; }
  .ac-submit__label { flex: 1; }

  .apex-contact__done-title { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .apex-contact,
  .apex-contact::backdrop,
  .apex-contact *,
  .apex-contact *::before,
  .apex-contact *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* Landing integration: shared form state and privacy controls. */
.apex-contact__status {
  min-height: 20px;
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ac-ink-soft);
}

.apex-contact__status[data-kind="error"] { color: var(--ac-error); }
.apex-contact__status[data-kind="success"] { color: #207344; }

.ac-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  color: var(--ac-ink-soft);
  font-size: 12.5px;
  line-height: 1.45;
  cursor: pointer;
}

.ac-consent input {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  accent-color: var(--ac-accent);
}

.ac-consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ac-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.apex-contact[data-loading="true"] { cursor: progress; }

@media (max-width: 560px) {
  .apex-contact__inner { padding-top: 26px; }
  .apex-contact__badge { max-width: calc(100% - 52px); }
  .ac-submit { width: 100%; }
  .ac-submit__label { min-width: 0; }
}

.apex-contact .turnstile-slot { margin: 12px 0 0; }