/* ==========================================================================
   Анкета VIRA — «В ожидании вкусного попкорна» (Хабаровск)
   Гибрид: светлая спокойная Apple-база + тёплые кинематографичные акценты.
   Всё self-hosted: системный SF-шрифт, ноль внешних CDN.
   ========================================================================== */

:root {
  --bg: #f4f6fb;                 /* чистый почти-белый, прохладный (как на сайте VIRA) */
  --card: #ffffff;
  --fill: rgba(120, 120, 128, 0.10);
  --fill-2: rgba(120, 120, 128, 0.06);
  --text: #1c1c1e;
  --text-2: #56555c;
  --hint: #8a8a8e;
  --sep: rgba(60, 60, 67, 0.12);

  /* Фирменный сине-фиолетовый VIRA (navy/indigo — по стилю сайта виравира.рф).
     Точные hex из брендбука можно подставить сюда. */
  --brand: #2b31b0;             /* основной индиго — кнопки, акценты */
  --brand-2: #4a54de;           /* светлее — верх градиента, свечение */
  --brand-press: #202573;       /* тёмный navy — нажатие, логотип, выбранное */
  --brand-soft: rgba(43, 49, 176, 0.12);
  --brand-ring: rgba(43, 49, 176, 0.30);
  --on-brand: #ffffff;          /* белый текст на кнопке */

  --red: #d1483f;
  --red-soft: rgba(209, 72, 63, 0.12);

  --r-lg: 22px;
  --r-md: 15px;
  --r-sm: 11px;

  --shadow-btn: 0 8px 22px rgba(43, 49, 176, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --shadow-soft: 0 1px 2px rgba(16, 24, 40, 0.05), 0 12px 34px rgba(16, 24, 40, 0.07);

  --ease: cubic-bezier(0.22, 0.9, 0.3, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

/* Тёплое кинематографичное свечение сверху + едва заметное зерно */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1200px 620px at 50% -240px, rgba(74, 84, 222, 0.15), transparent 60%),
    radial-gradient(900px 500px at 88% 4%, rgba(43, 49, 176, 0.08), transparent 55%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

button { font-family: inherit; cursor: pointer; color: inherit; }
input { font-family: inherit; font-size: 17px; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ===== Каркас ===== */
#app {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  max-width: 480px; margin: 0 auto;
  padding: 0 22px;
  /* Больше воздуха сверху/снизу: шапка не липнет к верху, кнопки не жмутся
     к нижнему краю (важно во встроенном браузере Telegram, где своя панель). */
  padding-top: calc(env(safe-area-inset-top) + 32px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 46px);
}

/* ===== Шапка: бренд + прогресс ===== */
#bar { flex-shrink: 0; }
#brand { display: flex; align-items: center; }
.brand-logo-img { height: 36px; width: auto; display: block; }

#progress { margin-top: 16px; height: 22px; transition: opacity 0.35s var(--ease); }
#progress.hidden { opacity: 0; pointer-events: none; }
#progress-track {
  height: 5px; border-radius: 99px; background: var(--fill); overflow: hidden;
}
#progress-fill {
  height: 100%; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg, var(--brand-2), var(--brand));
  transition: width 0.5s var(--ease);
}
#progress-label {
  margin-top: 7px; font-size: 12.5px; font-weight: 600;
  color: var(--hint); letter-spacing: 0.01em;
}

/* ===== Сцена и шаги ===== */
#stage { flex: 1; display: flex; position: relative; }
.step {
  display: none; flex-direction: column; flex: 1;
  width: 100%; padding: 8px 0 2px;
}
.step.is-active { display: flex; animation: step-in 0.44s var(--ease) both; }
@keyframes step-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.q { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 18px 0; }
.q-title {
  font-size: 30px; line-height: 1.14; font-weight: 700;
  letter-spacing: -0.03em; margin: 0 0 10px;
}
.q-note { color: var(--text-2); font-size: 16px; margin: 0 0 22px; }

/* ===== Поля ввода ===== */
.field { margin-top: 6px; }
.field input {
  width: 100%; border: 1.5px solid transparent; background: var(--fill);
  color: var(--text); border-radius: var(--r-md);
  padding: 16px 16px; outline: none; font-size: 18px;
  -webkit-appearance: none; appearance: none;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.field input::placeholder { color: var(--hint); }
.field input:focus {
  border-color: var(--brand);
  background: var(--card);
  box-shadow: 0 0 0 4px var(--brand-ring);
}
.field input.invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 4px var(--red-soft);
}
.field-err {
  min-height: 18px; margin: 8px 2px 0; font-size: 13px; font-weight: 600;
  color: var(--red); opacity: 0; transform: translateY(-2px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}
.field-err.show { opacity: 1; transform: translateY(0); }

/* ===== Кнопки выбора (Да/Нет, комнаты) ===== */
.choices { display: flex; flex-direction: column; gap: 11px; margin-top: 8px; }
.choices-3 { flex-direction: row; }
.choices-3 .choice { flex: 1; }
.choice {
  position: relative;
  border: 1.5px solid var(--sep); background: var(--card);
  color: var(--text); border-radius: var(--r-md);
  padding: 18px 18px; font-size: 18px; font-weight: 600; text-align: left;
  box-shadow: var(--shadow-soft);
  transition: transform 0.12s var(--ease), border-color 0.16s var(--ease),
    background 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.choices-3 .choice { text-align: center; padding: 20px 8px; }
.choice:active { transform: scale(0.975); }
.choice.selected {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.choice.selected::after {
  content: "✓"; position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
  color: var(--brand-press); font-weight: 800; font-size: 18px;
}
.choices-3 .choice.selected::after { display: none; }

/* ===== Кнопки действий ===== */
.q-actions {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding-top: 14px;
}
.q-actions.only-next { justify-content: flex-end; }

.btn-primary {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: var(--on-brand);
  padding: 17px 22px; font-size: 17.5px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: var(--shadow-btn);
  transition: transform 0.12s var(--ease), box-shadow 0.16s var(--ease), opacity 0.16s var(--ease);
}
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.55; box-shadow: none; }

.btn-ghost {
  border: none; background: none; color: var(--text-2);
  padding: 15px 8px; font-size: 16px; font-weight: 600;
  transition: color 0.15s var(--ease), transform 0.12s var(--ease);
}
.btn-ghost:active { transform: scale(0.97); color: var(--text); }

/* ===== Экран приветствия (hero) ===== */
.step-hero .q { justify-content: center; text-align: center; }
.hero-title {
  font-size: 40px; line-height: 1.08; font-weight: 800;
  letter-spacing: -0.035em; margin: 0 0 16px;
}
.hero-sub { color: var(--text-2); font-size: 17px; margin: 0 0 4px; max-width: 320px; align-self: center; }

/* ===== Финальные экраны (done / dup) ===== */
.step-done .q { justify-content: center; text-align: center; }
.done-icon {
  font-size: 62px; line-height: 1; margin-bottom: 18px;
  animation: pop-in 0.6s var(--ease-pop) both;
}
@keyframes pop-in { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.done-title { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 10px; }
.done-sub { color: var(--text-2); font-size: 17px; margin: 0 0 26px; max-width: 320px; align-self: center; }
.btn-tg { text-decoration: none; }

/* Кнопки подписки: Telegram (основная) + MAX (вторичная), в столбик */
.subs { display: flex; flex-direction: column; gap: 11px; width: 100%; max-width: 340px; margin: 0 auto; }
.btn-sub { width: 100%; flex: 0 0 auto; text-decoration: none; }
.btn-sub.is-off { display: none; }          /* скрыта, пока не задана ссылка на площадку */
.btn-outline {
  background: var(--card); color: var(--brand-press);
  border: 1.5px solid var(--brand); box-shadow: none;
}
.btn-outline:active { transform: scale(0.98); }

.done-hint {
  margin: 18px auto 0; max-width: 300px; font-size: 15px; font-weight: 600;
  color: var(--text-2); line-height: 1.45;
}

/* ===== Honeypot (скрыто от людей) ===== */
.hp-field {
  position: absolute !important; left: -9999px !important; top: -9999px !important;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

/* ===== Тост об ошибке ===== */
#toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 26px);
  transform: translateX(-50%) translateY(140%);
  background: #2a2a2e; color: #fff; font-size: 15px; font-weight: 600;
  padding: 13px 20px; border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,0.28);
  z-index: 60; max-width: 90vw; text-align: center;
  transition: transform 0.4s var(--ease-pop);
}
#toast.show { transform: translateX(-50%) translateY(0); }

/* ===== Оверлей загрузки ===== */
#loading {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(247, 245, 242, 0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
}
#loading.show { display: flex; }
.spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--brand-soft); border-top-color: var(--brand);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Попкорн-конфетти на финале ===== */
#confetti { position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; }
.pop {
  position: absolute; top: -8%; font-size: 22px; will-change: transform, opacity;
  animation: pop-fall linear forwards;
}
@keyframes pop-fall {
  0%   { transform: translateY(-10vh) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(112vh) rotate(320deg); opacity: 0; }
}

/* ===== Крупные экраны ===== */
@media (min-width: 520px) {
  .q-title { font-size: 33px; }
  .hero-title { font-size: 46px; }
}

/* ===== Уважение к reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
  .step.is-active { animation: none; }
  #progress-fill { transition: none; }
  .done-icon { animation: none; }
  .choice, .btn-primary, .btn-ghost, .field input { transition: none; }
  #confetti { display: none !important; }
  #toast { transition: opacity 0.2s linear; }
}