/* Sea Breeze V3 - раскрытый квиз (блок 12). Стилизуем только содержимое #quiz-root:
   фон секции задан в styles.css (файл соседнего исполнителя, не трогаем) - секция
   .section--quiz целиком тёмно-синяя. Поэтому у #quiz-root своей панели и своих отступов
   нет: фон прозрачный, содержимое занимает всю ширину контейнера секции.
   Токены и класс .btn берём из styles.css. */

#quiz-root {
  --quiz-ink: var(--ivory);
  --quiz-dim: #a9b6c0;
  --quiz-line: rgba(244, 241, 234, .22);
  --quiz-error: #ffb4a3;

  background: none;
  color: var(--quiz-ink);
}

#quiz-root [hidden] { display: none; }
#quiz-root noscript { display: block; font-size: 16px; line-height: 1.6; color: var(--quiz-dim); }

.quiz { width: 100%; }

/* ---------- строка прогресса ---------- */

.quiz-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.quiz-progress__dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); }
.quiz-progress__name { display: none; font: 600 11px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--quiz-dim); }
.quiz-progress__track { position: relative; flex: 1 1 auto; height: 1px; background: var(--quiz-line); }
.quiz-progress__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--brass); transition: width .38s cubic-bezier(.4, 0, .2, 1); }
.quiz-progress__count { flex: 0 0 auto; font: 500 12px/1.2 var(--sans); letter-spacing: .16em; font-variant-numeric: tabular-nums; color: var(--quiz-dim); }

/* ---------- контейнер с анимируемой высотой ---------- */

.quiz-viewport { transition: height .38s cubic-bezier(.4, 0, .2, 1); }
.quiz-viewport.is-animating { overflow: hidden; }
/* Замок навигации: пока едет анимация, новый шаг не принимает клики (второй тап по той же
   точке иначе выбрал бы вариант следующего экрана). Снимается по завершении перехода. */
.quiz-stage.is-locked { pointer-events: none; }
.quiz-stage--in-forward { animation: quiz-in-forward .38s cubic-bezier(.4, 0, .2, 1) both; }
.quiz-stage--in-back { animation: quiz-in-back .38s cubic-bezier(.4, 0, .2, 1) both; }

@keyframes quiz-in-forward { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes quiz-in-back { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

/* ---------- вопрос ---------- */

.quiz-question { font: 500 clamp(24px, 4.6vw, 40px)/1.14 var(--serif); letter-spacing: -.01em; color: var(--quiz-ink); }
.quiz-question:focus { outline: none; }
.quiz-question:focus-visible { outline: 2px solid var(--brass); outline-offset: 6px; }

/* ---------- варианты ---------- */

.quiz-options { margin: 26px 0 0; border-top: 1px solid var(--quiz-line); }
.quiz-options__item { border-bottom: 1px solid var(--quiz-line); }

.quiz-option {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 60px;
  border: 0;
  padding: 16px 0;
  background: none;
  color: var(--quiz-ink);
  text-align: left;
  transition: padding-left .18s ease, color .18s ease;
}
.quiz-option__num { font: 500 11px/1.2 var(--sans); letter-spacing: .2em; font-variant-numeric: tabular-nums; color: var(--quiz-dim); transition: color .18s ease; }
.quiz-option__text { font: 400 18px/1.35 var(--sans); }
.quiz-option__tail { display: flex; justify-content: flex-end; color: var(--quiz-dim); transition: color .18s ease; }
.quiz-option__icon { display: block; }

.quiz-option:hover,
.quiz-option:focus-visible { padding-left: 12px; color: var(--brass); }
.quiz-option:hover .quiz-option__num,
.quiz-option:hover .quiz-option__tail,
.quiz-option:focus-visible .quiz-option__num,
.quiz-option:focus-visible .quiz-option__tail { color: var(--brass); }
.quiz-option.is-chosen { color: var(--brass); }
.quiz-option.is-chosen .quiz-option__num,
.quiz-option.is-chosen .quiz-option__tail { color: var(--brass); }

/* ---------- кнопки шага ---------- */

.quiz-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.quiz-actions--single { justify-content: flex-start; }
.quiz-actions__spacer { display: block; }

.quiz-back {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  border: 0; padding: 10px 2px;
  background: none;
  color: var(--quiz-dim);
  font: 500 14px/1.2 var(--sans); letter-spacing: .06em;
  transition: color .18s ease;
}
.quiz-back:hover { color: var(--quiz-ink); }
.quiz-back[disabled] { opacity: .45; cursor: default; }

.quiz-next { min-height: 48px; }
.quiz-next[disabled] { opacity: .55; cursor: default; }

/* ---------- шаг контактов ---------- */

.quiz-form { margin-top: 26px; }
/* fieldset тут только ради disabled на время отправки - визуально его нет. */
.quiz-fieldset { display: flex; flex-direction: column; gap: 20px; min-width: 0; margin: 0; border: 0; padding: 0; }
.quiz-fieldset[disabled] .quiz-field__input,
.quiz-fieldset[disabled] .quiz-phone__country,
.quiz-fieldset[disabled] .quiz-consent { opacity: .6; }
.quiz-fieldset[disabled] .quiz-consent { cursor: default; }
.quiz-field { display: flex; flex-direction: column; gap: 8px; }
.quiz-field__label { font: 600 11px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--quiz-dim); }

.quiz-field__input,
.quiz-phone__country {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--quiz-line);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: rgba(255, 253, 248, .06);
  color: var(--quiz-ink);
  font: 400 16px/1.4 var(--sans);
  transition: border-color .18s ease;
}
.quiz-field__input::placeholder { color: #7f8e99; }
.quiz-field__input:focus,
.quiz-phone__country:focus { border-color: var(--brass); outline: none; }
.quiz-field__input:focus-visible,
.quiz-phone__country:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.quiz-field__input[aria-invalid='true'] { border-color: var(--quiz-error); }

.quiz-phone { display: flex; gap: 10px; }
.quiz-phone__country { flex: 0 1 auto; width: auto; max-width: 48%; }
.quiz-phone__input { flex: 1 1 auto; min-width: 0; }

.quiz-consent { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 4px 0; cursor: pointer; }
.quiz-consent input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brass); }
.quiz-consent__text { font: 400 14px/1.5 var(--sans); color: var(--quiz-dim); }

.quiz-error:empty { display: none; }
.quiz-error { font: 400 14px/1.45 var(--sans); color: var(--quiz-error); }
.quiz-error--send { margin-top: -6px; }

/* ---------- экран «Готово» ---------- */

.quiz-done__label { margin-bottom: 14px; font: 600 11px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.quiz-done__text { max-width: 640px; }
.quiz-step--done .quiz-actions { margin-top: 32px; }

/* ---------- адаптив ---------- */

@media (min-width: 720px) {
  .quiz-progress__name { display: block; }
  .quiz-progress { gap: 16px; margin-bottom: 34px; }
  .quiz-option { grid-template-columns: 56px minmax(0, 1fr) 56px; min-height: 72px; padding: 20px 0; }
  .quiz-option__text { font-size: 21px; }
  .quiz-options { margin-top: 34px; }
  .quiz-fieldset { gap: 22px; }
  .quiz-actions { margin-top: 34px; }
}

@media (min-width: 1100px) {
  .quiz-option__text { font-size: 23px; }
  .quiz-option { min-height: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-viewport { transition: none; }
  .quiz-stage--in-forward,
  .quiz-stage--in-back { animation: none; }
  .quiz-progress__fill { transition: none; }
  .quiz-option { transition: none; }
}