/* ============================================================================
   ARGO · tpgargo.ru · форма «Подобрать аналог» на страницах аналогов
   ИП Карпачёв В. · 25.09.2026 · договор № 17 от 12.09.2026

   Макет: Figma «Форма обратной связи tpgargo.ru» (узел 3:2), гайд 5:211.
   Подключается после argo-form.css в чанке footer: базовые правила полей,
   кнопки и сообщений берутся оттуда, здесь — только то, чего в макете
   старой формы не было: окно 520 px, иконки в полях, чипы, чекбокс,
   состояние «Запрос принят», мобильный лист с прилипшей кнопкой.

   Разметка — чанк tpl.AjaxForm.analog, поведение — argo-form-ui.js.
   ОТКАТ: убрать <link> на этот файл и <script> argo-form-ui.js из чанка
   footer, вернуть в шаблоне 15 вызовы form4/form5.
   ========================================================================== */

/* ── Окно ──────────────────────────────────────────────────────────────── */

:is(#modal, #order-analog, #other-analogs).af-modal--analog {
  /* На странице окно спрятано (как #modal и .modal в style.css); показывает его
     только fancybox, перенося внутрь .fancybox-inner. Здесь display не задаём
     иначе — окно вылезет в подвал страницы. */
  display: none;
  width: 520px;
  padding: 28px 36px 36px;
  --af-hint: #9aa4ad;
  --af-ok-soft: #e9f6ee;
}
.fancybox-inner > :is(#modal, #order-analog, #other-analogs).af-modal--analog { display: block; }
:is(#modal, #order-analog, #other-analogs).af-modal--analog form,
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-done {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog form[hidden],
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-done[hidden] { display: none; }

/* Шапка: заголовок и подпись слева, кнопка закрытия справа. */
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-head__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  text-wrap: balance;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog h3.af-title { margin: 0; font-size: 24px; line-height: 29px; outline: none; }
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-sub {
  margin: 0;
  color: var(--af-muted);
  font-size: 15px;
  line-height: 21px;
}

/* Кнопка закрытия — мягкий круг, как в макете; своя вместо спрайта fancybox. */
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #f4f6f8;
  color: var(--af-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .16s var(--af-ease), transform .12s var(--af-ease);
}
@media (hover: hover) {
  :is(#modal, #order-analog, #other-analogs).af-modal--analog .af-close:hover { background: #e9edf1; }
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-close:active { transform: scale(.94); }
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--af-blue-ring); }
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-close .af-ico { width: 18px; height: 18px; }

/* Окно открывает argo-form-ui.js своим вызовом fancybox с классом обёртки
   af-wrap-analog: кожа белая, без отступов, родная кнопка закрытия выключена
   (своя — в шапке окна). */
.af-wrap-analog .fancybox-skin {
  background: #fff;
  border-radius: 16px;
  padding: 0 !important;
  box-shadow: 0 24px 64px -16px rgba(18, 23, 33, .45), 0 0 0 1px rgba(18, 23, 33, .06);
}
.af-wrap-analog .fancybox-close { display: none; }

/* Форма «Связаться с нами» (form1) открывается тем же вызовом с классом af-wrap:
   кожа без серого фона и отступов, родная кнопка закрытия остаётся. */
.af-wrap .fancybox-skin {
  background: #fff;
  border-radius: 16px;
  padding: 0 !important;
  box-shadow: 0 24px 64px -16px rgba(18, 23, 33, .45), 0 0 0 1px rgba(18, 23, 33, .06);
}

/* ── Тело формы ────────────────────────────────────────────────────────── */

:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-fields { margin: 0; gap: 14px; }
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-field { gap: 6px; }
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-label { font-family: 'DINPro-Medium', Arial, sans-serif; }
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-label--caps {
  text-transform: uppercase;
  letter-spacing: .04em;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-hint {
  color: var(--af-muted);
  font-size: 13px;
  line-height: 17px;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog textarea {
  min-height: 92px;
  padding: 12px 14px;
}

/* Поле с иконкой: иконка внутри, слева; красится состоянием поля. */
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-control {
  position: relative;
  display: block;
  color: var(--af-muted);
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-control > .af-ico {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  pointer-events: none;
  transition: color .16s var(--af-ease);
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-control > input {
  padding-left: 44px;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-control:focus-within { color: var(--af-blue); }
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-control:has(> input.error) { color: var(--af-error); }
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-control:has(> input:disabled) { color: var(--af-muted); }

/* Подпись ошибки. AjaxForm ставит класс error на поле и на .error_<имя>. */
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-error { line-height: 17px; }
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-error.error { display: block; }

/* ── Чипы «Как удобнее ответить» ──────────────────────────────────────── */

:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-chips {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-chips__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-chip { position: relative; display: inline-flex; }
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-chip span {
  display: inline-block;
  padding: 7px 14px;
  min-height: 36px;
  border: 1.5px solid var(--af-line);
  border-radius: 999px;
  background: #fff;
  color: var(--af-ink);
  font-family: 'DINPro-Medium', Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
  user-select: none;
  transition: background-color .16s var(--af-ease), border-color .16s var(--af-ease), color .16s var(--af-ease), transform .12s var(--af-ease);
}
@media (hover: hover) {
  :is(#modal, #order-analog, #other-analogs).af-modal--analog .af-chip:hover span { border-color: var(--af-line-hover); }
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-chip:active span { transform: scale(.97); }
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-chip input:checked + span {
  background: var(--af-blue);
  border-color: var(--af-blue);
  color: #fff;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--af-blue-ring); }
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-chip input:disabled + span { opacity: .6; cursor: default; }

/* ── Согласие ──────────────────────────────────────────────────────────── */

:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-consent {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-consent__row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-consent__row input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-consent__box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: -1px;
  border: 1.5px solid var(--af-line-hover);
  border-radius: 5px;
  background: #fff;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .16s var(--af-ease), border-color .16s var(--af-ease);
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-consent__box .af-ico {
  width: 14px;
  height: 14px;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .12s var(--af-ease), transform .16s var(--af-ease);
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-consent__row input:checked ~ .af-consent__box {
  background: var(--af-blue);
  border-color: var(--af-blue);
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-consent__row input:checked ~ .af-consent__box .af-ico { opacity: 1; transform: scale(1); }
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-consent__row input:focus-visible ~ .af-consent__box { box-shadow: 0 0 0 3px var(--af-blue-ring); }
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-consent--error .af-consent__box { border-color: var(--af-error); }
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-consent__text {
  color: var(--af-muted);
  font-size: 13px;
  line-height: 18px;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-consent__text a {
  color: var(--af-blue);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 2px;
}
@media (hover: hover) {
  :is(#modal, #order-analog, #other-analogs).af-modal--analog .af-consent__text a:hover { color: #015d7e; }
}

/* ── Кнопка и подписи под ней ──────────────────────────────────────────── */

:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-foot {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .btn.af-submit {
  letter-spacing: .6px;
  font-size: 15px;
  line-height: 24px;
  min-height: 50px;
  padding: 13px 20px;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .btn.af-submit:disabled {
  background: #f7a071;
  cursor: progress;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .btn--ghost {
  background: #fff;
  border: 1.5px solid var(--af-line);
  color: var(--af-ink);
  letter-spacing: .6px;
  font-size: 15px;
  line-height: 24px;
  min-height: 50px;
  padding: 12px 20px;
}
@media (hover: hover) {
  :is(#modal, #order-analog, #other-analogs).af-modal--analog .btn--ghost:hover { background: #f4f6f8; color: var(--af-ink); }
}

:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-notes li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--af-muted);
  font-size: 13px;
  line-height: 18px;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-notes .af-ico {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}
/* «бесплатно по России» переносится целиком, а не посередине фразы */
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-nowrap { white-space: nowrap; }
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-notes b {
  font-family: 'DINPro-Medium', Arial, sans-serif;
  font-weight: normal;
  color: var(--af-ink);
  white-space: nowrap;
}

/* ── «Запрос принят» ───────────────────────────────────────────────────── */

:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-done__status {
  display: flex;
  align-items: center;
  gap: 16px;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-done__icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 32px;
  background: var(--af-ok-soft);
  color: var(--af-ok);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-done__icon .af-ico { width: 36px; height: 36px; }
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-done__text {
  margin: 0;
  color: var(--af-ink);
  font-size: 15px;
  line-height: 22px;
  text-wrap: pretty;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-done__text b {
  font-family: 'DINPro-Medium', Arial, sans-serif;
  font-weight: normal;
  white-space: nowrap;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-divider {
  margin: 0;
  border: 0;
  height: 1px;
  background: var(--af-line);
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--af-blue);
  font-size: 15px;
  line-height: 20px;
  text-decoration: none;
  width: fit-content;
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-links a .af-ico { flex: 0 0 auto; width: 16px; height: 16px; }
@media (hover: hover) {
  :is(#modal, #order-analog, #other-analogs).af-modal--analog .af-links a:hover span { text-decoration: underline; text-underline-offset: 2px; }
}
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-links a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--af-blue-ring); border-radius: 4px; }

/* Появление панели «Запрос принят»: короткий сдвиг снизу, без масштаба от нуля. */
:is(#modal, #order-analog, #other-analogs).af-modal--analog .af-done:not([hidden]) { animation: af-done-in .22s var(--af-ease) both; }
@keyframes af-done-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#modal, #order-analog, #other-analogs).af-modal--analog .af-done:not([hidden]) { animation: none; }
  :is(#modal, #order-analog, #other-analogs).af-modal--analog .af-chip span, .af-modal--analog .af-close, .af-modal--analog .af-consent__box { transition: none; }
}

/* ── Телефон: лист во всю ширину, кнопка прилипает к низу ─────────────── */

@media (max-width: 559px) {
  :is(#modal, #order-analog, #other-analogs).af-modal--analog {
    width: auto;
    padding: 20px 20px 0;
    gap: 16px;
    min-height: 100%;
  }
  :is(#modal, #order-analog, #other-analogs).af-modal--analog form, .af-modal--analog .af-done { gap: 16px; }
  :is(#modal, #order-analog, #other-analogs).af-modal--analog h3.af-title { font-size: 22px; line-height: 26px; letter-spacing: -.01em; }
  :is(#modal, #order-analog, #other-analogs).af-modal--analog .af-sub { font-size: 14px; line-height: 20px; }
  :is(#modal, #order-analog, #other-analogs).af-modal--analog .af-body { gap: 16px; }
  :is(#modal, #order-analog, #other-analogs).af-modal--analog .af-wide-only { display: none; }

  /* Низ формы прилипает к краю экрана, пока список полей прокручивается. */
  :is(#modal, #order-analog, #other-analogs).af-modal--analog .af-foot {
    position: sticky;
    bottom: 0;
    margin: 0 -20px;
    padding: 12px 20px 16px;
    gap: 10px;
    background: #fff;
    box-shadow: 0 -12px 24px -16px rgba(18, 23, 33, .35);
  }
  :is(#modal, #order-analog, #other-analogs).af-modal--analog .af-done { padding-bottom: 24px; }
  :is(#modal, #order-analog, #other-analogs).af-modal--analog .af-done__status { align-items: flex-start; }

  /* fancybox считает окно по содержимому; на телефоне окно — весь экран. */
  .af-wrap-analog {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
  }
  .af-wrap-analog .fancybox-skin {
    width: auto !important;
    height: 100% !important;
    border-radius: 0;
    box-shadow: none;
  }
  .af-wrap-analog .fancybox-outer,
  .af-wrap-analog .fancybox-inner {
    width: auto !important;
    height: 100% !important;
    overflow: auto !important;
    overscroll-behavior: contain;   /* докрутили лист до конца — страница под ним не едет */
    -webkit-overflow-scrolling: touch;
  }
}