@import url('/css/fonts.css');

/* ========================================================================
   ННХ — форма сбора заявок. Дизайн-токены сняты с макетов.
   ======================================================================== */

:root {
  --cream:        #F2EDE1;
  --cream-light:  #F8F5EE;
  --red:          #B7192B;
  --red-dark:     #8F1322;
  --red-logo:     #E32126;
  --green:        #6AB076;
  --ink:          #14140F;
  --ink-soft:     #4A4A42;
  --muted:        #8B8B82;
  --field:        #EBEAE6;
  --field-line:   #D6D4CE;
  --white:        #FFFFFF;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;

  --shadow-card: 0 10px 30px rgba(20, 20, 15, 0.08);
  --shadow-btn:  0 6px 18px rgba(183, 25, 43, 0.28);

  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-slab: 'Roboto Slab', Georgia, 'Times New Roman', serif;
  --font-serif: 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  /* Inspiration не содержит кириллицы, поэтому русский текст подхватывает
     Great Vibes — ближайший каллиграфический аналог с кириллицей */
  --font-script: 'Inspiration', 'Great Vibes', cursive;

  --pad: 22px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

/* ---- каркас экрана ---------------------------------------------------- */

.app {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  /* именно height, а не min-height: при auto-высоте flex-basis: 0%
     у .app__inner не разрешается и тот растягивается по своему контенту */
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--cream);
}

/* Один длинный пейзаж, который «проматывается» по мере прохождения шагов —
   так же, как меняется фон от экрана к экрану в макетах. */
/* Два одинаковых слоя: новый фон проявляется поверх старого, поэтому смена
   картинки при переходе между экранами читается как плавное перетекание. */
.app__bg {
  position: fixed;
  inset: 0;
  max-width: 520px;
  margin: 0 auto;
  /* background-size выставляется из JS: своим файлам экрана — cover,
     общему лесу — увеличение, чтобы кадр реально сдвигался по шагам */
  background-size: cover;
  background-position: center var(--bg-pos, 50%);
  opacity: 0;
  z-index: 0;
  transition:
    opacity 700ms cubic-bezier(0.4, 0, 0.2, 1),
    background-position 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.app__bg--on { opacity: 1; }

.app__veil--off { opacity: 0; }

.app__veil {
  position: fixed;
  inset: 0;
  max-width: 520px;
  margin: 0 auto;
  z-index: 1;
  transition: opacity 400ms ease;
  background: linear-gradient(
    to bottom,
    var(--cream) 0%,
    rgba(242, 237, 225, 0.94) 18%,
    rgba(242, 237, 225, 0.55) 38%,
    rgba(242, 237, 225, 0.15) 60%,
    rgba(242, 237, 225, 0.45) 100%
  );
  pointer-events: none;
}

.app__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  /* min-height: auto у flex-элемента не даёт ему стать ниже своего контента —
     без явного нуля сетка менеджеров не могла ужаться под экран.
     Высоту задаёт .app (100dvh), лишнее прокручивается внутри */
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--safe-top) + 18px) var(--pad) calc(var(--safe-bottom) + 20px);
}

/* ---- шапка ------------------------------------------------------------ */

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 42px;
  margin-bottom: 18px;
}

/* .header задаёт display, поэтому стандартный [hidden] его не скрывает */
.header[hidden] { display: none; }

.header__logo { height: 34px; width: auto; display: block; }

.header__back {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 22px;
  cursor: pointer;
}
.header__back:active { background: rgba(0, 0, 0, 0.06); }
.header__back[hidden] { display: none; }

/* ---- прогресс --------------------------------------------------------- */

.progress { margin-bottom: 26px; }

.progress__track {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 10px;
}

.progress__dot {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #D3D1CB;
  transition: background-color 280ms ease, transform 280ms ease;
}
.progress__dot--done { background: var(--red); }
.progress__dot--current { background: var(--red); transform: scale(1.18); }

.progress__line {
  flex: 1 1 auto;
  height: 2px;
  background: #D3D1CB;
  transition: background-color 280ms ease;
}
.progress__line--done { background: var(--red); }

.progress__label {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
}

/* ---- содержимое шага -------------------------------------------------- */

#leadForm {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
/* селектор по id перебивает стандартный [hidden] { display: none } */
#leadForm[hidden] { display: none; }

.screen {
  flex: 1;
  min-height: 0;
  display: none;
  flex-direction: column;
  animation: rise 340ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.screen--active { display: flex; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .screen, .app__bg, .splash--out,
  .splash__logo, .splash__rule, .splash__line1, .splash__line2,
  .intro__title, .intro .actions {
    animation: none;
    transition: none;
  }
}

.fields { display: flex; flex-direction: column; gap: 26px; padding-top: 12px; }

/* Шаг с менеджерами: карточки подстраиваются под высоту экрана,
   чтобы все четыре были видны сразу, без прокрутки. */
.fields--fill { flex: 1; min-height: 0; }
.field--fill {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.field__label {
  display: block;
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 3px rgba(242, 237, 225, 0.85);
}
.field__label .req { color: var(--red); }

.input,
.select,
.textarea {
  width: 100%;
  padding: 16px 18px;
  font-family: inherit;
  font-size: 17px;
  color: var(--ink);
  background: rgba(235, 234, 230, 0.92);
  border: 1.5px solid var(--field-line);
  border-radius: var(--r-md);
  outline: none;
  transition: border-color 180ms ease, background-color 180ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder,
.textarea::placeholder { color: #9B9A92; }

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--red);
  background: var(--white);
}

.textarea { min-height: 110px; resize: vertical; line-height: 1.45; }

.field--error .input,
.field--error .select,
.field--error .textarea { border-color: var(--red); }

.field__note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
  text-shadow: 0 1px 3px rgba(242, 237, 225, 0.9);
}
.field__note::before {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #C9C7C1;
  flex: 0 0 auto;
}
.field__note--required { color: var(--red); font-weight: 600; }
.field__note--required::before { background: var(--red); }

.field--error .field__note { color: var(--red); font-weight: 600; }
.field--error .field__note::before { background: var(--red); }

/* ---- кнопки ----------------------------------------------------------- */

.actions {
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: 28px;
  /* кнопки не прижаты к нижнему краю — под ними остаётся воздух */
  margin-bottom: clamp(18px, 8dvh, 84px);
}
.fields--fill ~ .actions { padding-top: 18px; }

.btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 22px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 200ms ease, opacity 200ms ease;
}
.btn:active { transform: translateY(1px) scale(0.995); }

.btn--primary {
  background: var(--red);
  color: var(--white);
  box-shadow: var(--shadow-btn);
}
.btn--primary:disabled {
  background: #C9C7C1;
  color: #F4F3F0;
  box-shadow: none;
  cursor: not-allowed;
}

.btn--ghost {
  flex: 1;
  min-width: 0;
  background: var(--cream-light);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(20, 20, 15, 0.08);
}

.btn--wide { flex: 1; }

/* на финальном экране кнопки идут в столбик, во всю ширину */
.actions--stacked { flex-direction: column; }
.actions--stacked .btn { width: 100%; }
.actions--stacked .btn[hidden] { display: none; }

/* ссылка-кнопка не должна выглядеть ссылкой */
a.btn { text-decoration: none; }

/* ---- стартовый экран -------------------------------------------------- */

.intro { justify-content: flex-start; }

/* Заголовок и кнопка выходят с небольшой задержкой друг за другом —
   переход с заставки получается непрерывным. */
.intro__title  { animation: fadeUp 620ms cubic-bezier(0.22, 0.61, 0.36, 1) 120ms both; }
.intro .actions { animation: fadeUp 620ms cubic-bezier(0.22, 0.61, 0.36, 1) 300ms both; }

.intro__title {
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  /* заголовок стоит не под самой шапкой, а примерно на трети экрана */
  margin: clamp(40px, 16dvh, 150px) 0 0;
  max-width: 9ch;
}

/* ---- заставка --------------------------------------------------------- */

.splash {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-bottom: 22dvh;
}

.splash--out {
  animation: splashOut 520ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}

@keyframes splashOut {
  to { opacity: 0; transform: translateY(-20px) scale(0.97); }
}

/* Появление заставки: логотип, линия и строки подхватываются по очереди */
.splash__logo  { animation: fadeUp 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 60ms both; }
.splash__rule  { animation: fadeUp 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 220ms both; }
.splash__line1 { animation: fadeUp 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 320ms both; }
.splash__line2 { animation: fadeUp 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 420ms both; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.splash__logo { width: min(68%, 300px); height: auto; }

.splash__rule {
  display: block;
  width: 64px;
  height: 2px;
  margin: 26px 0 20px;
  background: #A8874E;
}

.splash__line1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.splash__line2 {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- выбор менеджера -------------------------------------------------- */

.managers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* строки делят ровно ту высоту, что осталась между заголовком и кнопками,
     поэтому все четыре карточки всегда видны целиком */
  grid-auto-rows: minmax(0, 1fr);
  gap: 12px;
  flex: 1;
  min-height: 0;
  padding: 2px;
}

.manager {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--white);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease;
}
.manager:has(input:checked) { border-color: var(--red); transform: translateY(-2px); }

.manager__photo {
  display: block;
  flex: 1;
  width: 100%;
  min-height: 0;
  object-fit: cover;
  /* кадрируем ближе к верху — на низком экране лицо остаётся в кадре */
  object-position: center 22%;
  background: #DEDCD6;
}
.manager__photo--empty {
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 700;
  color: #9A988F;
}

.manager__body { flex: 0 0 auto; padding: 8px 10px 10px; }
.manager__name {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.manager__role {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manager input { position: absolute; opacity: 0; pointer-events: none; }

/* ---- выпадающий список ------------------------------------------------- */

.dropdown { position: relative; }

.dropdown__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  font: inherit;
  font-size: 17px;
  text-align: left;
  color: var(--ink);
  background: rgba(235, 234, 230, 0.92);
  border: 1.5px solid var(--field-line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.dropdown--open .dropdown__button,
.dropdown__button:focus-visible {
  border-color: var(--red);
  background: var(--white);
  outline: none;
}

.dropdown__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown__value--empty { color: #9B9A92; }

.dropdown__chevron {
  flex: 0 0 auto;
  color: var(--ink);
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dropdown--open .dropdown__chevron { transform: rotate(180deg); }

.dropdown__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  max-height: 46dvh;
  overflow-y: auto;
  padding: 6px;
  background: var(--white);
  border: 1.5px solid var(--field-line);
  border-radius: var(--r-md);
  box-shadow: 0 18px 44px rgba(20, 20, 15, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.985);
  transform-origin: top center;
  pointer-events: none;
  transition:
    opacity 200ms ease,
    transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 240ms;
  -webkit-overflow-scrolling: touch;
}
.dropdown--open .dropdown__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.dropdown__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 14px;
  font: inherit;
  font-size: 16px;
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.dropdown__option + .dropdown__option { margin-top: 2px; }
.dropdown__option:hover,
.dropdown__option--active { background: #F4F1EA; }
.dropdown__option[aria-selected='true'] {
  background: #FBEDEF;
  color: var(--red);
  font-weight: 700;
}

.dropdown__check {
  flex: 0 0 auto;
  width: 16px;
  opacity: 0;
  transition: opacity 140ms ease;
}
.dropdown__option[aria-selected='true'] .dropdown__check { opacity: 1; }

.dropdown__option--custom {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--field-line);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  color: var(--ink-soft);
}

/* ---- варианты ответа (шаг про Китай) ---------------------------------- */

.choices {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 12px;
  background: rgba(235, 234, 230, 0.86);
  border: 1.5px solid var(--field-line);
  border-radius: var(--r-lg);
}

.choice {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 17px;
  background: rgba(255, 255, 255, 0.7);
  border: 1.5px solid var(--field-line);
  border-radius: var(--r-md);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.choice:has(input:checked) {
  border-color: var(--red);
  background: #FBEDEF;
  font-weight: 600;
}

.choice__radio {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 2px solid #C4C2BC;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color 160ms ease;
}
.choice:has(input:checked) .choice__radio { border-color: var(--red); }
.choice__radio::after {
  content: '';
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--red);
  transform: scale(0);
  transition: transform 160ms ease;
}
.choice:has(input:checked) .choice__radio::after { transform: scale(1); }

.choice input { position: absolute; opacity: 0; pointer-events: none; }

/* ---- финальный экран -------------------------------------------------- */

.thanks { align-items: center; text-align: center; justify-content: center; }
.thanks .actions { width: 100%; }
.thanks .privacy { width: 100%; }

/* без блока подарка содержимое прижималось к шапке —
   свободная высота делится поровну сверху и снизу */
.thanks__check {
  margin-top: auto;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green);
  margin-bottom: 18px;
  box-shadow: 0 8px 22px rgba(106, 176, 118, 0.38);
  animation: pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.thanks__title {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 10px;
}

.thanks__text {
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 26px;
  max-width: 26ch;
}

/* Подарок вырезан с прозрачным фоном, поэтому лежит прямо на пейзаже,
   без карточки. Ширину не задираем — исходник небольшой. */
.gift {
  width: 100%;
  max-width: 226px;
  margin: 4px auto 0;
  padding: 0;
}
.gift[hidden] { display: none; }

.gift__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(20, 20, 15, 0.18));
}

.gift figcaption {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-soft);
  text-shadow: 0 1px 3px rgba(242, 237, 225, 0.9);
}
.gift figcaption[hidden] { display: none; }


.privacy {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
  text-align: center;
  text-shadow: 0 1px 2px rgba(242, 237, 225, 0.9);
}

/* ---- служебное -------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 26px);
  transform: translate(-50%, 140%);
  z-index: 50;
  max-width: 420px;
  width: calc(100% - 44px);
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--white);
  font-size: 15px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 220ms ease, visibility 320ms;
}
.toast--show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-height: 720px) {
  .fields { gap: 18px; padding-top: 6px; }
  .field__label { font-size: 22px; margin-bottom: 8px; }
  .progress { margin-bottom: 16px; }
  .header { margin-bottom: 12px; }
  .actions { padding-top: 16px; margin-bottom: clamp(12px, 4dvh, 32px); }
  .fields--fill ~ .actions { padding-top: 12px; }
  .thanks__title { font-size: 34px; }
  .thanks__text { font-size: 16px; }
  .thanks__check { width: 68px; height: 68px; margin-bottom: 12px; }
  .gift { max-width: 150px; }
  .gift figcaption { margin-top: 6px; font-size: 12px; }
  .btn { min-height: 50px; font-size: 17px; }
  .privacy { font-size: 11px; margin-top: 10px; }
  .managers { gap: 10px; }
  .manager__body { padding: 6px 8px 8px; }
  .manager__name { font-size: 12.5px; }
  .manager__role { font-size: 11px; }
}

@media (min-width: 560px) {
  .app { min-height: 100dvh; box-shadow: 0 0 60px rgba(20, 20, 15, 0.14); }
  body { background: #E6E1D5; }
}