/*
  Сквозная модалка «Заявка на консультацию» (225:2356 и соседние состояния).
  Разметка — partials/consult-modal.njk, поведение — js/main.js
  (initConsultModal). Один экземпляр на страницу.
*/

.consult-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.consult-modal[hidden] {
  display: none;
}

.consult-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.consult-modal__viewport {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; /* было flex-start — на широком экране карточка
    короче доступной высоты и прижималась к верху; центр по кросс-оси
    не мешает прокрутке: у карточки max-height:100%, поэтому на низких
    окнах она всё равно займёт всю доступную высоту и внутренний скролл
    сработает как раньше */
  padding: 5dvh 20px 0; /* верхний вдвое меньше прежнего 10dvh, нижний
    снят совсем — по фидбоку после 14.3: с широкой 610px карточкой
    экономить высоту важнее, чем держать симметричные отступы, и это
    напрямую сокращает внутреннюю прокрутку карточки на ПК */
  box-sizing: border-box;
}

.consult-modal__card {
  position: relative;
  width: 610px;
  max-width: 100%;
  max-height: 100%;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: consult-modal-in 0.25s ease;
}

@keyframes consult-modal-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.consult-modal__close {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 2;
  line-height: 0;
  transition: transform 0.2s ease;
}

.consult-modal__close:hover {
  transform: rotate(90deg);
}

.consult-modal__scroll {
  overflow-y: auto;
  padding: 35px 40px 40px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-modal-scrollbar-thumb) var(--color-modal-scrollbar-track);
}

.consult-modal__scroll::-webkit-scrollbar {
  width: 7px;
}

.consult-modal__scroll::-webkit-scrollbar-track {
  background: var(--color-modal-scrollbar-track);
  border-radius: var(--radius-modal-field);
}

.consult-modal__scroll::-webkit-scrollbar-thumb {
  background: var(--color-modal-scrollbar-thumb);
  border-radius: var(--radius-modal-field);
}

.consult-modal__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 85px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-surface));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.consult-modal__fade.is-visible {
  opacity: 1;
}

.consult-modal__title {
  margin: 0 auto;
  max-width: 530px;
  font-size: 27px;
  line-height: 38px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-ink);
}

.consult-modal__description {
  margin: 10px auto 0;
  max-width: 530px;
  font-size: 13px;
  line-height: 22px;
  text-align: center;
  color: var(--color-ink);
}

.consult-modal__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 32px;
}

/* Пара полей в одну строку (правка 14.3, макет 530=260+10+260) — обёртка
   вместо двух отдельных потомков формы, поля внутри резиновые (flex:1 1 0),
   не хардкод 260px: карточка фиксированной 610px может ужаться через
   max-width:100% на узком окне. */
.consult-modal__row {
  display: flex;
  gap: 10px;
}

.consult-modal__row > .consult-field {
  flex: 1 1 0;
  min-width: 0;
}

.consult-modal__form[hidden] {
  display: none;
}

/* Поля ввода: ФИО / Компания / Должность / E-mail */
.consult-field {
  position: relative;
}

.consult-field__input {
  width: 100%;
  height: 60px;
  border: none;
  border-radius: var(--radius-modal-field);
  background: var(--color-modal-field-bg);
  padding: 0 30px;
  font-family: var(--font-base);
  font-size: 15px;
  color: var(--color-ink);
  transition: background 0.2s ease;
}

.consult-field__input::placeholder {
  color: var(--color-ink);
  opacity: 0.4;
}

.consult-field__input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.consult-field__error {
  display: none;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  font-size: 0;
  border-radius: 50%;
  background: var(--color-accent);
  pointer-events: none;
}

.consult-field__error::before {
  content: "!";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--color-surface);
}

.consult-field.has-error .consult-field__input {
  background: var(--color-modal-error-bg);
}

.consult-field.has-error .consult-field__input::placeholder {
  color: var(--color-modal-error-label);
  opacity: 1;
}

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

/* Селект — своя правая привязка: подпись наследует общий right:30px, а
   шеврон (10×6) у кнопки .consult-select с padding:0 30px стоит вплотную
   к тому же правому паддингу, то есть занимает ровно ту полосу, куда
   встаёт подпись (на 370px-селекте перекрытие 10px). 50 = 30 (паддинг)
   + 10 (шеврон) + 10 (зазор). Специфичность (0,2,0) намеренная — правило
   не перебивается мобильным блоком ниже (0,1,0), поэтому и красный
   кружок «!» на телефоне встанет левее стрелки без отдельного правила. */
.consult-field--select .consult-field__error {
  right: 50px;
}

/* Телефон: флаг+код страны + маска */
.consult-phone {
  position: relative;
  display: flex;
  align-items: center;
  height: 60px;
  border-radius: var(--radius-modal-field);
  background: var(--color-modal-field-bg);
  padding: 0 20px;
  gap: 10px;
  transition: background 0.2s ease;
}

.consult-field.has-error .consult-phone {
  background: var(--color-modal-error-bg);
}

.consult-phone__country {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.consult-phone__flag {
  width: 25px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid var(--color-modal-flag-border);
  object-fit: cover;
}

.consult-phone__country .icon--filter-chevron {
  color: var(--color-ink);
  opacity: 0.4;
  transition: transform 0.2s ease;
}

.consult-phone__country[aria-expanded="true"] .icon--filter-chevron {
  transform: scaleY(-1);
}

.consult-phone__code {
  flex-shrink: 0;
  font-size: 15px;
  color: var(--color-ink);
  opacity: 0.5;
}

.consult-phone__input {
  flex: 1 0 0;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-base);
  font-size: 15px;
  color: var(--color-ink);
}

.consult-phone__input::placeholder {
  color: var(--color-ink);
  opacity: 0.4;
}

.consult-phone__input:focus {
  outline: none;
}

.consult-field.has-error .consult-phone__input {
  padding-right: 110px;
}

.consult-field.has-error .consult-phone__input::placeholder {
  opacity: 0;
}

.consult-phone__dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  max-height: 340px;
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-modal-field);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
  padding: 10px;
  z-index: 5;
  scrollbar-width: thin;
  scrollbar-color: var(--color-modal-scrollbar-thumb) var(--color-modal-scrollbar-track);
}

.consult-phone__dropdown[hidden] {
  display: none;
}

.consult-phone__dropdown::-webkit-scrollbar {
  width: 7px;
}

.consult-phone__dropdown::-webkit-scrollbar-track {
  background: var(--color-modal-scrollbar-track);
  border-radius: var(--radius-modal-field);
}

.consult-phone__dropdown::-webkit-scrollbar-thumb {
  background: var(--color-modal-scrollbar-thumb);
  border-radius: var(--radius-modal-field);
}

.consult-phone__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-modal-dropdown-item);
  cursor: pointer;
}

.consult-phone__option:hover,
.consult-phone__option.is-selected {
  background: var(--color-modal-dropdown-hover);
}

.consult-phone__option img {
  width: 25px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid var(--color-modal-flag-border);
  flex-shrink: 0;
  object-fit: cover;
}

.consult-phone__option-name {
  flex: 1 0 0;
  font-size: 15px;
  color: var(--color-ink);
}

.consult-phone__option-code {
  font-size: 15px;
  color: var(--color-ink);
  opacity: 0.5;
}

/* Направление деятельности: кастомный select */
.consult-field--select {
  margin-top: 10px;
}

.consult-field__standalone-label {
  margin: 0 0 15px;
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  opacity: 0.7;
}

.consult-select {
  position: relative;
  width: 100%;
  height: 60px;
  border: none;
  border-radius: var(--radius-modal-field);
  background: var(--color-modal-field-bg);
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-base);
  font-size: 15px;
  color: var(--color-ink);
  text-align: left;
  transition: background 0.2s ease;
}

.consult-field--select.has-error .consult-select {
  background: var(--color-modal-error-bg);
}

.consult-select__value {
  flex: 1 0 0;
  opacity: 0.4;
}

.consult-select.has-value .consult-select__value {
  opacity: 1;
}

.consult-select .icon--filter-chevron {
  color: var(--color-ink);
  opacity: 0.4;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.consult-select[aria-expanded="true"] .icon--filter-chevron {
  transform: scaleY(-1);
}

.consult-select__dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  background: var(--color-surface);
  border-radius: var(--radius-modal-field);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
  padding: 10px;
  z-index: 5;
}

.consult-select__dropdown[hidden] {
  display: none;
}

.consult-select__option {
  padding: 17px 12px;
  border-radius: var(--radius-modal-dropdown-item);
  font-size: 15px;
  color: var(--color-ink);
  opacity: 0.5;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.consult-select__option:hover,
.consult-select__option.is-selected {
  background: var(--color-modal-dropdown-hover);
  opacity: 0.9;
}

/* Чекбоксы согласия */
.consult-field--select + .consult-checkbox {
  margin-top: 10px; /* вместе с базовым gap:10px формы — вдвое больше отступ от select к чекбоксам, по фидбеку */
}

.consult-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.consult-checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.consult-checkbox__box {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-badge);
  background: var(--color-modal-checkbox-bg);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.consult-checkbox__box .icon--modal-check {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.consult-checkbox__input:checked ~ .consult-checkbox__box {
  background: var(--color-accent);
}

.consult-checkbox__input:checked ~ .consult-checkbox__box .icon--modal-check {
  opacity: 1;
}

.consult-checkbox.has-error .consult-checkbox__box {
  box-shadow: 0 0 0 1px var(--color-accent);
}

.consult-checkbox__text {
  font-size: 12px;
  line-height: 20px;
  color: var(--color-modal-consent-ink);
}

.consult-checkbox__text a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consult-checkbox__text a:hover {
  color: var(--color-ink);
}

/* Yandex SmartCaptcha, видимый режим. Контейнер пустой — виджет рисует
   себя сам внутри своего iframe и приносит собственные размеры, поэтому
   здесь только место в форме и подсветка ошибки. Раньше на этом месте
   была нарисованная кнопка-заглушка со своей вёрсткой (галочка, подписи,
   значок «?») — она удалена вместе с полями её текстов, см.
   template-parts/consult-modal.php. */
.consult-captcha {
  /* Контейнера может не быть вовсе: пока клиентский ключ не заведён,
     блок капчи не рендерится (штатное состояние). Ширину намеренно не
     задаём — реальный iframe-виджет сам решает свою ширину, flex:1 на
     кнопке (ниже) компенсирует остаток строки. */
  display: block;
  border-radius: 10px;
}

.consult-field--captcha {
  border-radius: 10px;
}

.consult-field--captcha.has-error {
  box-shadow: 0 0 0 1px var(--color-accent);
}

/* Капча + кнопка отправки — теперь одна строка (правка 14.3, экономия
   высоты карточки). Капча может отсутствовать в DOM (пустой клиентский
   ключ) — тогда кнопка одна в ряду и flex:1 1 auto растягивает её на всю
   ширину, той же кнопкой, что и раньше при width:100%. */
.consult-modal__row--submit {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 10px;
}

/* Кнопка отправки */
.consult-modal__submit {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

/* Кнопка на время запроса — заблокирована: без этого двойной клик
   отправляет две одинаковые заявки. */
.consult-modal__submit:disabled {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}

/* Ошибка отправки — про форму целиком (сеть недоступна, сервер ответил
   ошибкой), поэтому обычный блок в потоке, а не .consult-field__error:
   тот абсолютно спозиционирован внутри поля и на мобильном схлопывается
   в кружок «!». Текст приходит из «Настроек сайта». */
.consult-modal__error {
  margin-top: 10px;
  font-size: 13px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  text-align: center;
}

/*
  Точечные мобильные правки (полная мобильная адаптация модалки — отдельная
  задача). Пока только
  то, что физически ломается на узком экране.
*/
@media (max-width: 599.98px) {
  /* Пары полей 14.3 (компания+должность, email+телефон) и капча+кнопка —
     это раскладка широкой 610px десктопной карточки. На мобильной
     карточке (она по-прежнему ~330-350px, .consult-modal__card просто
     упирается в max-width:100% — отдельного мобильного значения ширины
     в этом файле никогда не было) те же 2 колонки сжимали телефон и
     капчу до ~130px — читать/нажимать невозможно. Возвращаем к тому,
     что было до 14.3: одна колонка, поля идут подряд как обычные прямые
     потомки формы. */
  .consult-modal__row,
  .consult-modal__row--submit {
    flex-direction: column;
    align-items: stretch;
  }

  /* flex:1 1 0 (базовое, для 2 колонок) на колоночном контейнере с auto-
     высотой — риск браузерных нестыковок с flex-basis:0. В столбик поле
     просто занимает свою обычную высоту, growth тут не нужен. */
  .consult-modal__row > .consult-field {
    flex: none;
  }

  /* Жёсткий <br> между строками заголовка снимается — бокс заголовка тут
     270px (350 карточки − 2×40 паддинга .consult-modal__scroll), а
     «НА КОНСУЛЬТАЦИЮ» при 27px = 291.6px, поэтому вторая строка
     переносилась ещё раз и заголовок шёл в три строки. Без <br> браузер
     сам разбивает на «ЗАЯВКА НА» / «КОНСУЛЬТАЦИЮ» — те же две строки.
     Тот же приём уже применён к заголовкам photo-quote на сервисной. */
  .consult-modal__linebreak {
    display: none;
  }

}

@media (prefers-reduced-motion: reduce) {
  .consult-modal__card {
    animation: none;
  }
}