/* Форма заявки маркета: сама форма + модальное окно, в котором она открывается.
   Отдельным файлом, а не в style.css: подключается только там, где есть кнопки заявки. */

/* ── Модалка ───────────────────────────────────────────────────────────────
   Нативный <dialog>: Esc, ловушка фокуса и top-layer — из коробки. Top-layer
   здесь не роскошь: на страницах висит виджет Б24 со своим высоким z-index,
   и обычному оверлею пришлось бы с ним воевать. */
.mf-modal {
  /* Центрируем явно: <dialog> штатно центрируется своим margin:auto, а глобальный
     сброс «* { margin: 0 }» в style.css его затирает — окно уезжает в левый угол. */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px));
  /* dvh — вторым: на телефонах 100vh не знает про адресную строку и окно уезжает
     под неё. Браузеры без dvh просто останутся на первом правиле. */
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: none;
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 64px rgba(13, 21, 38, .28);
  overflow: visible;
}
.mf-modal::backdrop { background: rgba(8, 15, 30, .55); }

/* Скролл длинной формы — внутри окна, страница под модалкой стоит на месте. */
.mf-modal-body { padding: 26px 28px 28px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; }
.mf-modal-open { overflow: hidden; }

.mf-modal-close {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; color: var(--text-muted);
  background: transparent; border: none; border-radius: 8px; cursor: pointer;
}
.mf-modal-close:hover { background: var(--surface2); color: var(--text); }

.mf-title { font-size: 24px; font-weight: 700; margin: 0 30px 6px 0; }
.mf-subtitle { color: var(--text-sub); font-size: 14px; margin: 0 0 22px; }

/* ── Поля ─────────────────────────────────────────────────────────────────── */
.mf-row { margin-bottom: 16px; }
.mf-row label { display: block; font-size: 13px; font-weight: 600; color: var(--text-sub); margin-bottom: 6px; }
.mf-row .req { color: var(--red); }
.mf-row input[type="text"],
.mf-row input[type="tel"],
.mf-row input[type="email"],
.mf-row textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 15px; color: var(--text);
  background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; outline: none;
}
.mf-row input:focus, .mf-row textarea:focus { border-color: var(--accent); background: var(--surface); }
.mf-row textarea { min-height: 104px; resize: vertical; }

.mf-agree { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--text-sub); }
.mf-agree input { margin-top: 2px; flex: none; }

.mf-submit { width: 100%; margin-top: 6px; }
/* Пока не заполнено обязательное — кнопка видна, но явно нерабочая. */
.mf-submit:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.mf-submit:disabled:hover { background: var(--accent); transform: none; }

.mf-alert { padding: 13px 15px; border-radius: 9px; font-size: 14px; margin-bottom: 18px; white-space: pre-line; }
.mf-alert-error { background: var(--red-dim); border: 1px solid #fecaca; color: var(--red); }
.mf-alert-success { background: var(--green-dim); border: 1px solid #86efac; color: #15803d; }

/* Ловушка для ботов: человек её не видит и не сфокусирует табом. */
.mf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Место под капчу держим заранее. Виджет Яндекса дорисовывает себя асинхронно —
   render() уже вернулся, а картинки ещё нет, и без резерва форма подпрыгивает
   на его высоту. 102px — постоянная высота виджета, одна и та же на всех
   ширинах от 320px до 1920px (замерено); если Яндекс её изменит, контейнер
   просто растянется — min-height не ограничивает сверху. */
.mf-captcha { margin-bottom: 16px; min-height: 102px; }

@media (max-width: 560px) {
  .mf-modal-body { padding: 22px 18px 24px; }
  .mf-title { font-size: 20px; }
}