/* ============================================================
   VAYTON — стили квиз-калькулятора.
   Подключить после основного styles.css (использует его токены:
   --accent, --accent-ink, --accent-soft, --surface, --surface-2,
   --bg, --bg-2, --line, --line-2, --ink, --ink-2, --ink-3,
   --r-md, --r-xl, --shadow-md, --shadow-lg, --ease,
   --font-display, --font-body).
   ============================================================ */
/* ============================================================
   QUIZ / CALCULATOR
   ============================================================ */
.quiz-sec{ background:linear-gradient(180deg,var(--surface-2),var(--bg)); }
.quiz{ max-width:760px; margin:46px auto 0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:clamp(22px,3vw,36px); }
.quiz-progress{ height:6px; border-radius:999px; background:var(--bg-2); overflow:hidden; }
.quiz-progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),#4f86f2); border-radius:999px; transition:width .45s var(--ease); }
.quiz-meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
#quiz-step-label{ font-size:13px; font-weight:600; color:var(--ink-3); letter-spacing:.04em; }
.quiz-price-chip{ font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--accent); background:var(--accent-soft); border:1px solid #d8e4ff; padding:7px 15px; border-radius:999px; white-space:nowrap; }
.quiz-title{ font-family:var(--font-display); font-weight:800; font-size:clamp(21px,2.3vw,28px); margin:22px 0 0; letter-spacing:-.02em; }
.quiz-options{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.quiz-opt{ text-align:left; background:var(--surface-2); border:1.5px solid var(--line-2); border-radius:var(--r-md); padding:17px 18px; cursor:pointer; display:flex; flex-direction:column; gap:3px; transition:border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.quiz-opt:hover{ border-color:var(--accent); background:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md); }
.quiz-opt.sel{ border-color:var(--accent); background:var(--accent-soft); }
.quiz-opt b{ font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink); }
.quiz-opt > span{ font-size:13.5px; color:var(--ink-2); }
.quiz-opt .opt-add{ margin-top:5px; font-size:12.5px; color:var(--accent-ink); font-weight:700; }
.quiz-nav{ margin-top:20px; }
.quiz-back{ background:none; border:none; color:var(--ink-2); font-weight:600; font-size:15px; padding:6px 0; cursor:pointer; transition:color .2s; }
.quiz-back:hover{ color:var(--ink); }

/* contact / result */
.quiz-result{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; margin-top:20px; background:linear-gradient(135deg,var(--accent-soft),#fff); border:1px solid #d8e4ff; border-radius:var(--r-md); padding:20px 22px; }
.qr-label{ font-size:13px; font-weight:600; color:var(--ink-2); width:100%; }
.qr-price{ font-family:var(--font-display); font-weight:800; font-size:clamp(30px,4vw,42px); color:var(--accent); letter-spacing:-.02em; }
.qr-note{ font-size:13.5px; color:var(--ink-2); }
.quiz-contact{ display:grid; gap:4px; margin-top:18px; }
.quiz-contact .field{ margin-top:12px; }
.quiz-contact .btn{ margin-top:14px; }

/* success */
.quiz-success{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:26px 8px; }
.quiz-success .ok{ width:64px; height:64px; border-radius:50%; background:#e4f6ec; display:grid; place-items:center; margin-bottom:18px; }
.quiz-success .ok svg{ width:30px; height:30px; color:#1c9a5d; }
.quiz-success h3{ font-family:var(--font-display); font-size:24px; }
.quiz-success p{ color:var(--ink-2); margin-top:10px; font-size:15.5px; line-height:1.6; }
.quiz-success b{ color:var(--ink); }
.quiz-disclaimer{ font-size:12.5px; line-height:1.5; color:var(--ink-3); margin-top:14px; }
.quiz-foot-note{ max-width:760px; margin:14px auto 0; text-align:center; font-size:12.5px; color:var(--ink-3); }

@media (max-width:560px){
  .quiz-options{ grid-template-columns:1fr; }
}