/* ===== Страница анкеты ===== */

.page-anketa { background: var(--c-bg); }

.anketa {
  display: grid;
  grid-template-columns: 620rem 1082rem;
  column-gap: 96rem;
  grid-template-rows: minmax(1178rem, auto);
  align-items: start;
  padding: 60rem 60rem 100rem;
}

/* Анкета как блок лендинга: без логотипа и соцсетей, с собственным заголовком */
.anketa--inline {
  grid-template-rows: auto;
  padding-bottom: 140rem;
  background: var(--c-bg);
}
.anketa__heading {
  font-size: 96rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.anketa__lead {
  margin-top: 28rem;
  max-width: 520rem;
  letter-spacing: -0.03em;
  color: #9A9A9A;
}
.anketa--inline .steps { margin-top: 64rem; }

/* ---------- сайдбар ---------- */
.anketa__side {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.anketa__logo { display: block; width: 167rem; margin-top: 19rem; }
.anketa__logo img { width: 100%; }

.contacts { margin-top: 42rem; }
.contact { display: flex; gap: 30.5rem; }
.contact + .contact { margin-top: 44rem; }
.contact__icon { width: 40rem; height: 40rem; flex: none; }
.contact__title { font-size: 24rem; line-height: 1.2; }
.contact__note {
  margin-top: 8rem;
  font-size: 20rem;
  line-height: 29rem;
  color: var(--c-muted);
}
.contact__value {
  display: inline-block;
  margin-top: 12rem;
  font-size: 20rem;
  font-weight: 600;
  line-height: 1.2;
  transition: color .2s ease;
}
.contact__value:hover { color: var(--c-orange); }

.socials { display: flex; gap: 20.5rem; margin-top: auto; }
.socials img { width: 42rem; height: 42rem; }
.socials a { transition: transform .22s cubic-bezier(.22,1,.36,1); }
.socials a:hover { transform: translateY(-3rem); }

/* ---------- трекер шагов ---------- */
.steps { margin-top: 46rem; display: none; }
.anketa--quiz .steps { display: block; }
.contacts { margin-top: 48rem; }

.steps__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18rem;
  padding: 7rem 0;
  font-size: 20rem;
  line-height: 1.25;
  color: var(--c-muted);
  transition: color .28s ease;
}
.steps__dot {
  position: relative;
  width: 16rem;
  height: 16rem;
  flex: none;
  border-radius: 50%;
  border: 1.5rem solid var(--c-line);
  background-position: center;
  background-repeat: no-repeat;
  transition: border-color .28s ease, background-color .28s ease;
}
/* соединительная линия между точками */
.steps__item:not(:last-child) .steps__dot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1.5rem;
  height: 14rem;
  margin-left: -0.75rem;
  background: var(--c-line);
}
/* пройденный шаг — залитый кружок с галочкой */
.steps__item.is-done { color: var(--c-dark); }
.steps__item.is-done .steps__dot {
  border-color: var(--c-orange);
  background-color: var(--c-orange);
  background-image: url('../assets/icons/check.svg');
  background-size: 10rem 10rem;
}

/* текущий шаг — оранжевое кольцо с точкой: галочка тут была бы неправдой */
.steps__item.is-current { color: var(--c-dark); font-weight: 600; }
.steps__item.is-current .steps__dot {
  border-color: var(--c-orange);
  background-image: radial-gradient(circle at center, var(--c-orange) 0 3.2rem, transparent 3.3rem);
}

/* ---------- панель ---------- */
.panel {
  width: 1082rem;
  min-height: 1216rem;
  padding: 79rem 50rem 64.5rem 52rem;
  border-radius: 26rem;
  background: var(--c-orange-panel);
  display: flex;
  flex-direction: column;
}

.panel__title {
  font-size: 52rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.192;
}

.mode {
  display: inline-flex;
  gap: 6rem;
  margin-top: 26rem;
  padding: 6rem;
  border-radius: 999rem;
  background: rgba(31, 31, 31, .09);
}
.mode__btn {
  padding: 0 26rem;
  height: 46rem;
  border: 0;
  border-radius: 999rem;
  background: transparent;
  color: rgba(31, 31, 31, .62);
  font-family: inherit;
  font-size: 20rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}
.mode__btn:hover { color: var(--c-dark); }
.mode__btn.is-active {
  background: var(--c-dark);
  color: var(--c-cream);
}

/* ---------- поля ---------- */
.form {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 34rem;
}

.field {
  border: 0;
  padding: 0;
  margin: 0 0 40rem;
}
.field__label {
  display: block;
  margin-bottom: 18rem;
  font-size: 20rem;
  font-weight: 600;
  line-height: 1;
  color: var(--c-dark);
}
.field__label span { color: var(--c-dark); }

.field__input {
  display: block;
  width: 100%;
  padding: 0 0 12rem;
  border: 0;
  border-bottom: 1rem solid var(--c-dark);
  border-radius: 0;
  background: transparent;
  color: var(--c-dark);
  font-family: inherit;
  font-size: 18rem;
  line-height: 21rem;
  outline: none;
  transition: border-color .2s ease;
}
.field__input::placeholder { color: rgba(31, 31, 31, .42); }
.field__input:focus { border-bottom-color: var(--c-white); }
.field.is-invalid .field__input { border-bottom-color: #8A2B00; }

.field--pair { display: grid; grid-template-columns: 470rem 470rem; column-gap: 40rem; }
/* если подпись слева переносится, поля всё равно стоят на одной линии */
.field__col { display: flex; flex-direction: column; }
.field__col { justify-content: space-between; }
.field__col .field__input { margin-top: auto; }

/* плашки-ответы */
.field--choice { margin-bottom: 26rem; }
.field--choice .field__label { margin-bottom: 0; }
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10rem;
  margin-top: 18rem;
  padding-bottom: 26rem;
  border-bottom: 1rem solid var(--c-dark);
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: inline-flex;
  align-items: center;
  height: 44rem;
  padding: 0 22rem;
  border: 1.5rem solid var(--c-dark);
  border-radius: 999rem;
  font-size: 20rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .22s ease, color .22s ease, transform .22s cubic-bezier(.22,1,.36,1);
}
.choice span:hover { transform: translateY(-2rem); }
.choice input:checked + span { background: var(--c-dark); color: var(--c-cream); }
.choice input:focus-visible + span { outline: 2rem solid var(--c-white); outline-offset: 3rem; }

/* ---------- кнопки панели ---------- */
.btn--light {
  background-color: var(--c-white);
  background-image: linear-gradient(var(--c-dark), var(--c-dark));
  color: var(--c-dark);
}
.btn--light:hover { color: var(--c-cream); }
.btn--light .btn__arrow img { filter: invert(1); transition: filter .28s ease; }
.btn--light:hover .btn__arrow img { filter: none; }

.btn--ghost {
  background-color: transparent;
  background-image: linear-gradient(var(--c-dark), var(--c-dark));
  border: 2rem solid var(--c-dark);
  color: var(--c-dark);
}
.btn--ghost:hover { color: var(--c-cream); }

.form__submit { margin-top: auto; padding-top: 56rem; }
.form__submit .btn { height: 67.5rem; padding: 0 53rem; }

.quiz-nav {
  display: none;
  align-items: center;
  gap: 16rem;
  margin-top: 56rem;
  padding-top: 0;
}
.quiz-nav .btn { height: 67.5rem; padding: 0 44rem; }

/* ---------- режим квиза ---------- */
.anketa--quiz .form__submit { display: none; }
.anketa--quiz .quiz-nav { display: flex; }

.anketa--quiz .field { display: none; margin-bottom: 0; }
.anketa--quiz .field.is-current { display: block; }
.anketa--quiz .field--pair.is-current { display: grid; }

/* в квизе вопрос звучит крупно */
.anketa--quiz .field.is-current {
  margin-top: 56rem;
  animation: step-in .42s cubic-bezier(.22, 1, .36, 1) both;
}
.anketa--quiz .panel__title { font-size: 24rem; line-height: 1.3; }
.anketa--quiz .field.is-current .field__label {
  margin-bottom: 0;
  font-size: 52rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  max-width: 900rem;
}
.anketa--quiz .field.is-current .field__input {
  margin-top: 34rem;
  padding-bottom: 18rem;
  font-size: 28rem;
  line-height: 40rem;
  border-bottom-width: 1.5rem;
}
.anketa--quiz .field--pair.is-current { grid-template-columns: 470rem 470rem; }
.anketa--quiz .field--choice.is-current .field__label { font-size: 52rem; }

@keyframes step-in {
  from { opacity: 0; transform: translateY(18rem); }
  to   { opacity: 1; transform: none; }
}

/* счётчик под навигацией */
.quiz-count {
  margin-left: auto;
  align-self: center;
  font-size: 20rem;
  font-weight: 600;
  color: rgba(31, 31, 31, .62);
}

/* ---------- благодарность ---------- */
.done {
  display: none;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}
.anketa.is-done .form { display: none; }
.anketa.is-done .done { display: flex; }
.anketa.is-done .mode { display: none; }
.done__title {
  font-size: 52rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.192;
}
.done__text { margin-top: 24rem; font-size: 24rem; line-height: 32rem; }

/* ===== Мобильная ===== */
@media (max-width: 1199px) {
  .anketa {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
    padding: 24rem 20rem 40rem;
  }
  .panel {
    order: 1;
    width: 100%;
    min-height: 0;
    padding: 28rem 20rem 30rem;
    border-radius: 16rem;
  }
  .panel__title { font-size: 17.5rem; line-height: 1.2; }

  .mode { margin-top: 18rem; padding: 4rem; gap: 4rem; }
  .mode__btn { height: 30rem; padding: 0 14rem; font-size: 11.5rem; }

  .form { margin-top: 24rem; }
  .field { margin-bottom: 14rem; }
  .field__label { margin-bottom: 8rem; font-size: 11.5rem; }
  .field__input { padding-bottom: 7rem; font-size: 13rem; line-height: 18rem; }
  .field--pair { grid-template-columns: 1fr 1fr; column-gap: 14rem; }

  .choices { gap: 6rem; margin-top: 10rem; padding-bottom: 16rem; }
  .choice span { height: 28rem; padding: 0 12rem; font-size: 11.5rem; }

  .form__submit { padding-top: 22rem; }
  .form__submit .btn, .quiz-nav .btn { height: 42rem; padding: 0 24rem; }
  .quiz-nav { padding-top: 24rem; gap: 10rem; }
  .field { margin-bottom: 18rem; }
  .quiz-count { font-size: 12rem; }

  .anketa--quiz .field.is-current { margin-top: 26rem; }
  .anketa--quiz .field.is-current .field__label { font-size: 22rem; max-width: none; }
  .anketa--quiz .field.is-current .field__input { margin-top: 16rem; padding-bottom: 11rem; font-size: 17rem; line-height: 24rem; }
  .anketa--quiz .field--pair.is-current { grid-template-columns: 1fr; row-gap: 14rem; }

  .anketa--inline .anketa__side { order: 0; margin-top: 0; margin-bottom: 26rem; }
  .anketa__heading { font-size: 30rem; line-height: 1.05; }
  .anketa__lead { margin-top: 12rem; max-width: none; font-size: 13rem; line-height: 18rem; }

  .anketa__side {
    order: 2;
    width: auto;
    margin-top: 30rem;
  }
  .anketa__logo { width: 115rem; margin-top: 0; }
  .contacts { margin-top: 22rem; }
  .contact { gap: 16rem; }
  .contact + .contact { margin-top: 22rem; }
  .contact__icon { width: 26rem; height: 26rem; }
  .contact__title { font-size: 15rem; }
  .contact__note { margin-top: 4rem; font-size: 12rem; line-height: 17rem; }
  .contact__value { margin-top: 6rem; font-size: 13rem; }
  .socials { margin-top: 26rem; gap: 12rem; }
  .socials img { width: 28rem; height: 28rem; }

  /* на телефоне трекер шагов занимает слишком много места */
  .anketa--quiz .steps { display: none; }
  .anketa--quiz .contacts { display: block; }

  .done__title { font-size: 17.5rem; }
  .done__text { font-size: 14rem; line-height: 20rem; }
}

/* «Назад» на первом шаге гаснет, но место сохраняет */
.quiz-nav__back:disabled {
  opacity: .32;
  pointer-events: none;
  transform: none;
}

/* в квизе панель не тянется на высоту полной анкеты */
.anketa--quiz .panel { min-height: 0; }

@media (max-width: 1199px) {
  .anketa--quiz .panel__title { font-size: 15rem; }
  .anketa--quiz .field.is-current { margin-top: 24rem; }
  .anketa--quiz .quiz-nav { margin-top: 28rem; }
}

/* ловушка для ботов: людям не видна и не доступна с клавиатуры */
.form__trap {
  position: absolute;
  left: -9999rem;
  width: 1rem;
  height: 1rem;
  overflow: hidden;
}

.form__error {
  margin-top: 24rem;
  font-size: 20rem;
  line-height: 1.4;
  color: #6B1F00;
}
.form__error a { text-decoration: underline; }

@media (max-width: 1199px) {
  .form__error { margin-top: 14rem; font-size: 12rem; }
}

/* Согласие на обработку данных. Галочка не проставлена заранее:
   предзаполненное согласие законом не считается согласием. */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 14rem;
  margin-top: 40rem;
  font-size: 18rem;
  line-height: 1.45;
  cursor: pointer;
}
.consent.is-hidden { display: none; }
.consent__box { position: absolute; opacity: 0; pointer-events: none; }
.consent__mark {
  position: relative;
  flex: none;
  width: 24rem;
  height: 24rem;
  margin-top: 2rem;
  border: 2rem solid var(--c-dark);
  border-radius: 7rem;
  transition: background-color .2s ease, border-color .2s ease;
}
.consent__box:checked + .consent__mark {
  background: var(--c-dark) url('../assets/icons/check.svg') center / 14rem 14rem no-repeat;
}
.consent__box:focus-visible + .consent__mark { outline: 2rem solid var(--c-white); outline-offset: 3rem; }
.consent__text a { text-decoration: underline; }
.consent.is-invalid .consent__mark { border-color: #8A2B00; background-color: rgba(138, 43, 0, .12); }
.consent.is-invalid .consent__text { color: #6B1F00; }

@media (max-width: 1199px) {
  .consent { margin-top: 20rem; gap: 9rem; font-size: 11.5rem; }
  .consent__mark { width: 16rem; height: 16rem; border-width: 1.5rem; border-radius: 5rem; }
  .consent__box:checked + .consent__mark { background-size: 10rem 10rem; }
}

/* Оплата — следующий шаг после отправленной анкеты */
.done__pay { margin-top: 36rem; align-self: flex-start; }
@media (max-width: 1199px) {
  .done__pay { margin-top: 20rem; height: 42rem; padding: 0 24rem; }
}

/* Соцсети в сайдбаре стоят на светлом: PNG-знаки тёмные и годятся как есть,
   а SVG пришли светлыми — их нужно вывернуть. */
.socials img[src$=".svg"] { filter: invert(1); }

/* Отказ «Далее» раньше был почти не виден: тёмно-красная линия
   на оранжевом фоне не читается. Теперь поле ещё и подписано. */
.field__hint {
  display: none;
  margin-top: 8rem;
  font-size: 16rem;
  line-height: 1.3;
  color: #6B1F00;
}
.field.is-invalid > .field__hint,
.field__col.is-invalid .field__hint { display: block; }
.field.is-invalid .field__input,
.field__col.is-invalid .field__input { border-bottom-color: #6B1F00; border-bottom-width: 2rem; }

.anketa--quiz .field.is-current .field__hint { margin-top: 14rem; font-size: 20rem; }

/* Цена появляется вместе с кнопкой оплаты */
.done__price {
  margin-top: 28rem;
  font-size: 20rem;
  line-height: 1.4;
  color: rgba(31, 31, 31, .72);
}

@media (max-width: 1199px) {
  .field__hint { margin-top: 5rem; font-size: 10.5rem; }
  .anketa--quiz .field.is-current .field__hint { margin-top: 8rem; font-size: 12rem; }
  .done__price { margin-top: 14rem; font-size: 12rem; }
}