/* Пошаговый заказ: слой поверх галереи.
 *
 * ⚠ Слой, а не отдельная страница. Уход на /checkout/ означает потерю
 * контекста: человек смотрел на конкретный букет, а попадает в форму,
 * где этого букета не видно. Диалог остаётся поверх той же работы.
 *
 * Тон — той же тёмной галереи: переход из карточки в форму не должен
 * читаться как переход на другой сайт.
 */

.zb {
  /* Те же переменные тёмной темы, что у галереи: диалог открывается
     поверх неё и обязан выглядеть её продолжением, а кнопки внутри —
     обычными .btn сайта. */
  --color-bg:            #14110D;
  --color-surface:       #221D16;
  --color-surface-raised:#2A241C;
  --color-text:          #FAF6EF;
  --color-text-soft:     #C9BDAB;
  --color-accent:        #D9B383;
  --color-accent-hover:  #E8C79C;
  --color-accent-text:   #D9B383;
  --color-border:        rgba(250, 246, 239, 0.12);
  --color-border-strong: rgba(250, 246, 239, 0.20);
  --color-on-accent:     #1C1712;

  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: #14110D;
  color: #FAF6EF;
  overscroll-behavior: contain;
}

/* Живой фон диалога — тот же кадр, что в карточке работы.
   ⚠ Вуаль обязательна, и это не украшение: на живой проверке галереи
   светлый размытый снимок поднялся до уровня текста и состав стал
   нечитаем. Фотография всегда светлее, чем ждёшь; контраст держит
   вуаль, а не удачный кадр. Здесь она плотнее галерейной — на экране
   заказа читают не описание, а суммы. */
.zb__fon {
  position: absolute;
  inset: -10%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(90px) saturate(1.35);
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.4s ease;
  pointer-events: none;
}

.zb__fon.is-vidno { opacity: 0.5; }

.zb__fon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 17, 13, 0.88),
    rgba(20, 17, 13, 0.82) 45%,
    rgba(20, 17, 13, 0.9)
  );
}

/* Шапка и тело — над фоном. Без этого фон лёг бы поверх вопросов:
   он рисуется первым ребёнком слоя. */
.zb__verh,
.zb__telo { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .zb__fon { transition: none; }
}

/* ⚠ Страница под слоем не должна прокручиваться: на телефоне палец,
   промахнувшийся мимо поля, увозит галерею, и человек теряет вопрос. */
body.zb-otkryt { overflow: hidden; }

.zb__verh {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(250, 246, 239, 0.1);
}

.zb__nazad,
.zb__krest {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(250, 246, 239, 0.07);
  color: #FAF6EF;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.zb__polosa {
  flex: 1 1 auto;
  height: 2px;
  background: rgba(250, 246, 239, 0.14);
  border-radius: 2px;
  overflow: hidden;
}

.zb__polosa i {
  display: block;
  height: 100%;
  background: #D9B383;
  transition: width 0.45s cubic-bezier(.22,.61,.36,1);
}

.zb__telo {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 20px 40px;
}

.zb__telo--itog { text-align: center; }

.zb__vopros {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(30px, 7vw, 44px);
  line-height: 1.12;
  margin: 0 0 10px;
}

.zb__podskaz {
  font-size: 14.5px;
  line-height: 1.6;
  color: #C9BDAB;
  margin: 0 0 24px;
}

.zb__varianty {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ⚠ Вариант — крупная мишень (минимум 56 px): на ходу, одной рукой,
   промах по кнопке в 36 px означает ответ не на тот вопрос. */
.zb__variant {
  min-height: 56px;
  padding: 16px 20px;
  border: 1px solid var(--color-border-strong);
  /* ⚠ Радиус фирменный (--radius-md, как у полей формы), а не свой:
     прямоугольники с острым углом на сайте не встречаются нигде,
     и раздел читался как чужой. Вариант ответа — это поле выбора,
     поэтому радиус полей, а не пилюля кнопки. */
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.zb__variant:hover,
.zb__variant:focus-visible {
  border-color: #D9B383;
  background: rgba(217, 179, 131, 0.08);
}

.zb__pole {
  width: 100%;
  min-height: 56px;
  padding: 15px 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text);
  /* ⚠ 16px ровно: при меньшем Safari на iPhone масштабирует страницу
     при фокусе, и слой уезжает за край экрана. */
  font-size: 16px;
  font-family: inherit;
}

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

.zb__pole:focus {
  outline: none;
  border-color: #D9B383;
}

.zb__knopki {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}



/* «Напишу свой текст» отделён от готовых фраз: это другой род действия,
   и слитый список читался бы как шесть равных вариантов. */
.zb__variant--svoy {
  margin-top: 6px;
  border-style: dashed;
  color: var(--color-text-soft);
}

.zb__propustit {
  border: 0;
  background: none;
  color: #C9BDAB;
  font-size: 14.5px;
  text-decoration: underline;
  cursor: pointer;
}

.zb__svodka {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  border-top: 1px solid rgba(250, 246, 239, 0.12);
}

.zb__svodka li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(250, 246, 239, 0.07);
  font-size: 14.5px;
}

.zb__svodka span { color: #C9BDAB; flex: 0 0 auto; }
.zb__svodka b { text-align: right; font-weight: 500; }

.zb__soglasie {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #C9BDAB;
  cursor: pointer;
}

.zb__soglasie input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: #D9B383;
}

.zb__oshibka {
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: rgba(214, 106, 92, 0.16);
  color: #F0B4AA;
  font-size: 14px;
}

.zb__nomer-zakaza {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  letter-spacing: 0.22em;
  color: #D9B383;
  margin: 0 0 12px;
}

@media (prefers-reduced-motion: reduce) {
  .zb__polosa i { transition: none; }
}