/* ============================================================
   Формы заявки — Figma 6:52764 «Запись на консультацию»
   и 6:52813 «Запись на онлайн подсчет выгоды» (оба 1920 × 1080).
   Общая сетка: подпись в рамке слева, поле 755×68 справа,
   строки на y = 460 / 567 / 674, зелёная кнопка 489×104 на (715, 808).
   Координаты — абсолютные координаты фрейма.
   ============================================================ */

.page-form {
  height: 1080px;
}

.form-main {
  position: relative;
  width: var(--canvas-w);
  height: 1080px;
}

.form-title {
  left: 685px;
  top: 266px;
  width: 630px;
}

.form-lead {
  position: absolute;
  left: 657px;
  top: 366px;
  width: 686px;
  text-align: center;
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 24px;
  line-height: 28px;
  color: var(--c-ink);
}

.form-row {
  position: static;
}

/* Подпись в рамке: Rectangle 45, border 3px #000 внутрь бокса */
.form-label {
  position: absolute;
  left: 358px;
  width: 266px;
  height: 68px;
  box-shadow: inset 0 0 0 3px var(--c-black);
  cursor: pointer;
}

.form-label__text {
  position: absolute;
  left: 55px;
  top: 22px;
  font-family: var(--f-accent);
  font-weight: 400;
  font-size: 32px;
  line-height: 33px;
  color: var(--c-black);
  white-space: nowrap;
}

/* Поле ввода: те же 3 px рамки; содержимого в макете нет */
.form-input {
  position: absolute;
  left: 686px;
  width: 755px;
  height: 68px;
  margin: 0;
  padding: 0 24px;
  border: 3px solid var(--c-black);
  border-radius: 0;
  background: transparent;
  font-family: var(--f-text);
  font-size: 32px;
  color: var(--c-ink);
  -webkit-appearance: none;
  appearance: none;
}

.form-row--1 .form-label,
.form-row--1 .form-input { top: 460px; }
.form-row--2 .form-label,
.form-row--2 .form-input { top: 567px; }
.form-row--3 .form-label,
.form-row--3 .form-input { top: 674px; }

/* Кнопка отправки — геометрия как у кнопки «Записаться на консультацию»
   в блоке «Готовы начать?» главной страницы */
.form-submit {
  left: 715px;
  top: 808px;
  width: 489px;
  height: 104px;
}

.form-submit .btn__label {
  left: 18px;
  top: 8px;
  width: 478px;
}

/* ---------- Запись на консультацию ------------------------- */

/* «желаемое время встречи» — бокс текста 244 px от (369, 674),
   переносится на две строки */
.page-consultation .form-row--3 .form-label__text {
  left: 11px;
  top: 0;
  width: 244px;
  white-space: normal;
}

/* ---------- Расчёт выгоды ---------------------------------- */

.page-benefit .form-title {
  left: 624px;
  top: 199px;
  text-align: center;
}

.page-benefit .form-row--2 .form-label { left: 175.25px; width: 448.75px; }
.page-benefit .form-row--3 .form-label { left: 175px; width: 449px; }
.page-benefit .form-row--2 .form-label__text { left: 92.79px; }
.page-benefit .form-row--3 .form-label__text { left: 92.84px; }

.page-benefit .form-submit .btn__label {
  left: 133px;
  top: 28px;
  width: 223px;
}

/* ---------- Экран после отправки ---------------------------
   ТЗ: «пустой фон с одним элементом в середине — галочка и надпись».
   В макете этого экрана нет: галочка рисуется линией в цвет кнопок,
   круг и «птичка» прочерчиваются, затем всплывает надпись. */

.form-main.is-sent > :not(.form-done) {
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--hover-ease);
}

.form-done {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-height: 60vh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(20px, 3vw, 40px);
  background: var(--c-white);
  opacity: 0;
  transition: opacity 260ms var(--hover-ease);
}

.form-done.is-on {
  opacity: 1;
}

/* display: grid перебивает атрибут hidden — возвращаем его силу */
.form-done[hidden] {
  display: none;
}

.form-done__check {
  width: clamp(120px, 14vw, 200px);
  height: clamp(120px, 14vw, 200px);
}

.form-done__ring,
.form-done__mark {
  fill: none;
  stroke: var(--c-green);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.form-done__ring {
  stroke-width: 5;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
}

.form-done__mark {
  stroke-width: 8;
  stroke-dasharray: 84;
  stroke-dashoffset: 84;
}

.form-done.is-on .form-done__ring {
  animation: form-done-ring 640ms var(--hover-ease) 80ms forwards;
}

.form-done.is-on .form-done__mark {
  animation: form-done-mark 420ms var(--hover-ease) 520ms forwards;
}

@keyframes form-done-ring {
  to { stroke-dashoffset: 0; }
}

@keyframes form-done-mark {
  to { stroke-dashoffset: 0; }
}

.form-done__text {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-h1-size);
  line-height: var(--t-h1-lh);
  color: var(--c-ink);
  opacity: 0;
  transform: translateY(12px);
}

.form-done.is-on .form-done__text {
  animation: form-done-text 480ms var(--hover-ease) 760ms forwards;
}

@keyframes form-done-text {
  to { opacity: 1; transform: none; }
}

/* ---------- Согласие на обработку данных -------------------
   Обязательный элемент по закону РК № 94-V: согласие даётся
   явным действием, галочка не предустановлена. В макете Figma
   его нет — строка вписана между последним полем (низ 742)
   и кнопкой (верх 808). */

.form-consent {
  position: absolute;
  left: 686px;
  top: 754px;
  width: 755px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.form-consent__box {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--c-green);
  cursor: pointer;
}

.form-consent__text {
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: var(--c-ink);
  cursor: pointer;
}

.form-consent__text a {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-consent__text a:hover,
.form-consent__text a:focus-visible {
  color: var(--c-grey);
}

/* ============================================================
   Расчёт выгоды — опросник
   В макете Figma на этой странице было три текстовых поля
   с подписями «Вопрос 1» и «Вопрос 2», то есть заготовка.
   Здесь шесть настоящих вопросов (WORK_PLAN.md §4) в том же
   языке: рамка 3 px, те же шрифты, зелёный как акцент выбора.
   Высота страницы перестаёт быть фиксированной: вопросов больше,
   чем помещалось в 1080 px холста.
   ============================================================ */

.page-quiz,
.page-quiz .form-main {
  height: auto;
}

/* flow-root: верхний отступ опросника остаётся внутри блока. Без него отступ
   «проваливался» наружу — вся страница с шапкой уезжала на 420 px вниз,
   а опросник вставал вплотную под заголовок и закрывал его. */
.page-quiz .form-main {
  padding-bottom: 120px;
}

/* только холст 1920: ниже 1600 блок — сетка (fluid.css), там отступа нет */
@media (min-width: 1600px) {
  .page-quiz .form-main {
    display: flow-root;
  }
}

/* Опросник стоит в потоке под заголовком и подзаголовком (тот кончается
   на 422 px холста): так высота страницы растёт вместе с ним и подвал
   не наезжает на форму. */
.form-quiz {
  position: relative;
  width: 900px;
  margin: 470px auto 0;
  display: grid;
  gap: 48px;
}

/* --- шаг --- */
.quiz-step {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 36px;
}

.quiz-step__legend {
  padding: 0 0 4px;
  font-family: var(--f-accent);
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  color: var(--c-grey);
}

/* --- вопрос --- */
.quiz-q {
  display: grid;
  gap: 14px;
}

.quiz-q__title {
  margin: 0;
  font-family: var(--f-text);
  font-weight: 500;
  font-size: 24px;
  line-height: 30px;
  color: var(--c-ink);
}

.quiz-q__hint {
  margin-left: 10px;
  font-weight: 400;
  font-size: 18px;
  color: var(--c-grey);
}

/* --- варианты --- */
.quiz-opts {
  display: grid;
  gap: 10px;
}

.quiz-opts--row {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.quiz-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 18px;
  box-shadow: inset 0 0 0 3px var(--c-black);
  font-family: var(--f-text);
  font-size: 20px;
  line-height: 25px;
  color: var(--c-ink);
  cursor: pointer;
  transition: box-shadow var(--hover-dur) var(--hover-ease),
              background var(--hover-dur) var(--hover-ease);
}

.quiz-opt:hover {
  background: rgba(92, 226, 163, .10);
}

.quiz-opt input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--c-green);
  cursor: pointer;
}

/* выбранный вариант подсвечивается рамкой и заливкой */
.quiz-opt:has(input:checked) {
  box-shadow: inset 0 0 0 3px var(--c-green);
  background: rgba(92, 226, 163, .16);
}

.quiz-opt:has(input:focus-visible) {
  outline: 2px solid var(--c-green);
  outline-offset: 3px;
}

/* --- текстовые поля шага 3 --- */
.quiz-input {
  position: static;
  left: auto;
  top: auto;
  width: 100%;
  height: 68px;
}

/* --- согласие внутри опросника: в потоке, а не по координатам --- */
.form-quiz .form-consent {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  margin-top: 6px;
}

/* --- кнопки --- */
.quiz-nav {
  display: flex;
  gap: 16px;
}

.quiz-nav .btn {
  position: static;
  width: 220px;
  height: 64px;
}

.quiz-nav .btn__label {
  position: absolute;
  left: 0;
  top: 18px;
  width: 100%;
}

.page-quiz .form-submit {
  position: static;
  justify-self: start;
  width: 489px;
  height: 104px;
}

.page-quiz .form-submit .btn__label {
  left: 0;
  top: 28px;
  width: 100%;
}

/* --- пошаговый режим: включается скриптом --- */
.form-quiz.is-stepped .quiz-step { display: none; }
.form-quiz.is-stepped .quiz-step.is-current { display: grid; }
.form-quiz.is-stepped .form-submit { display: none; }
.form-quiz.is-stepped.is-last .form-submit { display: block; }
.form-quiz.is-stepped.is-last .quiz-next { display: none; }
.form-quiz.is-stepped.is-first .quiz-back { visibility: hidden; }

/* ---------- Отправка: ловушка для ботов, ошибка, ожидание --------- */

/* Поле-ловушка: убрано за край экрана, а не display:none —
   часть ботов пропускает скрытые поля, но заполняет «невидимые». */
.form-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Сообщение об ошибке отправки — под кнопкой */
.form-error {
  position: absolute;
  left: 486px;
  top: 930px;
  width: 948px;
  text-align: center;
  font-family: var(--f-text);
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  color: #c62828;
}

.form-error[hidden] {
  display: none;
}

.form-quiz .form-error {
  position: static;
  width: auto;
  text-align: left;
}

/* Пока письмо уходит — кнопка неактивна */
.form-submit[aria-busy='true'] {
  opacity: 0.6;
  pointer-events: none;
}

.form-done__note {
  max-width: 640px;
  text-align: center;
  font-family: var(--f-text);
  font-size: 22px;
  line-height: 30px;
  color: var(--c-grey);
  opacity: 0;
}

.form-done.is-on .form-done__note {
  animation: form-done-text 480ms var(--hover-ease) 900ms forwards;
}

@media (max-width: 1599.98px) {
  .form-error {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    text-align: left;
    font-size: clamp(14px, 1.4vw, 17px);
    line-height: 1.4;
  }

  .form-quiz {
    margin: 0 auto;
  }

  .form-done__note {
    padding: 0 var(--gutter);
    font-size: clamp(14px, 1.4vw, 18px);
  }
}