/* Каркас квиза (_shared/quiz.js). Вид задаёт лендинг через переменные --qz-* и свои правила поверх.
   Поля формы, дни и время — классы .lf-* из core.css (те же переменные --lf-*). */
.qz {
  --qz-bg: var(--lf-field, #fff);
  --qz-fg: var(--lf-fg, #111);
  --qz-muted: var(--lf-muted, #666);
  --qz-border: var(--lf-border, #d0d4dc);
  --qz-accent: var(--lf-accent, #1f4fd8);
  --qz-accent-fg: var(--lf-accent-fg, #fff);
  --qz-opt-bg: var(--qz-bg);
  --qz-opt-on-bg: color-mix(in srgb, var(--qz-accent) 12%, var(--qz-bg));
  --qz-radius: var(--lf-radius, 10px);
  --qz-q-size: clamp(20px, 2.1vw, 28px);
  color: var(--qz-fg); position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.qz-head { display: flex; align-items: center; gap: 12px; min-height: 32px; }
.qz-back { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--qz-border); border-radius: 50%; background: var(--qz-bg); color: var(--qz-fg); cursor: pointer; padding: 0; }
.qz-back svg { width: 18px; height: 18px; }
.qz-back[hidden] { display: none; }
.qz-progress { flex: 1; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--qz-fg) 10%, transparent); overflow: hidden; }
.qz-progress i { display: block; height: 100%; width: 4%; background: var(--qz-accent); border-radius: inherit; transition: width .35s cubic-bezier(.2,.7,.2,1); }
.qz-count { flex: 0 0 auto; font-size: 13px; color: var(--qz-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qz[data-step="intro"] .qz-head { display: none; }

.qz-body { min-width: 0; }
.qz-body.qz-in { animation: qz-in .32s cubic-bezier(.2,.7,.2,1); }
@keyframes qz-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qz-body.qz-in { animation: none; } .qz-progress i { transition: none; } }

.qz-q { font-size: var(--qz-q-size); line-height: 1.2; margin: 0 0 6px; font-weight: 700; }
.qz-hint { margin: 0 0 12px; color: var(--qz-muted); font-size: 14.5px; line-height: 1.45; }
.qz-hint.qz-warn { color: var(--lf-error, #c62828); font-weight: 600; }
.qz-micro { margin: 8px 0 0; font-size: 13px; color: var(--qz-muted); }

.qz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.qz-opts--many { grid-template-columns: repeat(3, 1fr); }
.qz-opt {
  font: inherit; color: var(--qz-fg); text-align: left; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: 12px 16px;
  background: var(--qz-opt-bg); border: 1.5px solid var(--qz-border); border-radius: var(--qz-radius);
  transition: border-color .15s, background .15s, transform .1s;
}
.qz-opt:hover { border-color: var(--qz-accent); }
.qz-opt:active { transform: scale(.985); }
.qz-opt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lf-focus, rgba(31,79,216,.35)); }
.qz-opt.is-on { border-color: var(--qz-accent); background: var(--qz-opt-on-bg); }
.qz-ot { font-size: 16px; font-weight: 600; line-height: 1.25; }
.qz-opt small { font-size: 13px; color: var(--qz-muted); line-height: 1.3; }
.qz-ico { display: block; width: 28px; height: 28px; margin-bottom: 4px; }
.qz-ico svg { width: 100%; height: 100%; }
.qz-opts--multi .qz-opt { padding-left: 44px; position: relative; }
.qz-opts--multi .qz-opt::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 1.5px solid var(--qz-border); border-radius: 5px; background: var(--qz-bg); }
.qz-opts--multi .qz-opt.is-on::before { background: var(--qz-accent); border-color: var(--qz-accent); box-shadow: inset 0 0 0 3px var(--qz-bg); }

.qz-next {
  font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; margin-top: 16px; min-height: 50px; padding: 0 22px;
  background: var(--qz-accent); color: var(--qz-accent-fg); border: 0; border-radius: var(--qz-radius);
}
.qz-next:disabled { opacity: .4; cursor: not-allowed; }
.qz-next--main { width: 100%; }
.qz-result { min-width: 0; }
.qz-gift-line { display: flex; gap: 10px; align-items: center; margin: 14px 0 0; font-size: 14.5px; }
.qz-gift-line svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--qz-accent); }

.qz-slots .lf-days { margin-top: 4px; }
.qz-noslots { color: var(--qz-muted); font-size: 14px; }
.qz-other { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.qz-other[hidden] { display: none; }
.qz-when { display: inline-flex; gap: 8px; align-items: center; margin: 2px 0 12px; font-weight: 600; font-size: 15px; }
.qz-when svg { width: 20px; height: 20px; color: var(--qz-accent); }
.qz-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.qz-form .lf-submit { width: 100%; margin-top: 14px; }
.qz-done { text-align: left; }
.qz-done-ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--qz-accent); color: var(--qz-accent-fg); margin-bottom: 10px; }
.qz-done-ico svg { width: 26px; height: 26px; }

@media (max-width: 640px) {
  .qz-opts, .qz-opts--many { grid-template-columns: 1fr; gap: 8px; }
  .qz-opt { min-height: 54px; padding: 10px 14px; }
  .qz-fields { grid-template-columns: 1fr; }
  .qz-opts--multi .qz-opt { padding-left: 42px; }
}