/* Квиз (qas_groups_questions/default), tshop_3. Поля, согласие и панель успеха — form/default/list.css.
 * Ручки на корне блока: --quiz-radius, --quiz-bg, --quiz-accent, --quiz-option-min (ширина карточки варианта). */
@layer modules {
  .t3-quiz-block {
    --quiz-radius: var(--radius-l);
    --quiz-bg: var(--surface);
    --quiz-accent: var(--brand);
    --quiz-option-min: 210px;
  }
  .t3-quiz-block > .wrap { container-type: inline-size; }
  .t3-quiz {
    max-width: 920px; margin-inline: auto;
    padding: clamp(20px, 4vw, 48px);
    border: var(--line-w) solid var(--line); border-radius: var(--quiz-radius);
    background: var(--quiz-bg); box-shadow: var(--shadow-pop);
  }
  .t3-quiz__form { display: grid; gap: var(--s-6); }

  /* верх: счётчик, подарок, полоса прогресса */
  .t3-quiz__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
  .t3-quiz__count { margin: 0; font-size: var(--fs-s); font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
  .t3-quiz__bonus {
    display: inline-flex; align-items: center; gap: var(--s-2); margin: 0 0 0 auto;
    padding: 6px 12px; border-radius: var(--radius-pill);
    background: var(--brand-soft); color: var(--brand-text); font-size: var(--fs-s); font-weight: 600;
  }
  .t3-quiz__progress { flex: 1 0 100%; height: 6px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
  .t3-quiz__bar {
    display: block; height: 100%; width: var(--quiz-progress, 0%); min-width: 6px;
    border-radius: inherit; background: var(--quiz-accent);
    transition: width .45s var(--ease-out);
  }
  .t3-quiz__form:not(.is-ready) .t3-quiz__top { display: none; }

  /* шаг */
  .t3-quiz__steps { display: grid; gap: var(--s-7); }
  .t3-quiz__step { display: grid; gap: var(--s-5); min-width: 0; margin: 0; padding: 0; border: 0; }
  .t3-quiz__step[hidden] { display: none; }
  .t3-quiz__form.is-ready .t3-quiz__step.is-active { animation: t3-quiz-in .35s var(--ease-out); }
  .t3-quiz__title { float: left; width: 100%; margin: 0; padding: 0; font-size: var(--fs-xl); line-height: 1.2; outline: none; }
  .t3-quiz__title + * { clear: both; }
  .t3-quiz__hint { margin: calc(-1 * var(--s-3)) 0 0; color: var(--text-2); max-width: 60ch; }
  .t3-quiz__question { gap: var(--s-3); }
  .t3-quiz__q { margin: 0; font-weight: 600; }
  .t3-quiz__q-note { margin-left: var(--s-2); font-weight: 400; font-size: var(--fs-s); color: var(--text-3); }

  /* варианты ответа — карточки */
  .t3-quiz__options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--quiz-option-min)), 1fr)); gap: var(--s-3); }
  .t3-quiz__option {
    position: relative; display: flex; align-items: center; gap: var(--s-3);
    min-height: 56px; padding: 14px 16px; cursor: pointer;
    border: var(--line-w) solid var(--line-strong); border-radius: var(--radius-m);
    background: var(--surface); line-height: 1.35;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .t3-quiz__option:hover { border-color: var(--quiz-accent); }
  .t3-quiz__option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .t3-quiz__mark {
    flex: none; display: grid; place-items: center; width: 22px; height: 22px;
    border: var(--line-w) solid var(--line-strong); border-radius: 50%; color: transparent; background: var(--surface);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .t3-quiz__option input[type="checkbox"] + .t3-quiz__mark { border-radius: 6px; }
  .t3-quiz__mark .i { width: 14px; height: 14px; }
  .t3-quiz__option:has(input:checked) { border-color: var(--quiz-accent); background: color-mix(in srgb, var(--quiz-accent) 8%, var(--surface)); box-shadow: inset 0 0 0 1px var(--quiz-accent); }
  .t3-quiz__option input:checked + .t3-quiz__mark { background: var(--quiz-accent); border-color: var(--quiz-accent); color: var(--brand-ink); }
  .t3-quiz__option:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  .t3-quiz__question[aria-invalid="true"] .t3-quiz__option { border-color: var(--danger); }

  .t3-quiz__contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s-4); }

  /* навигация */
  .t3-quiz__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
  .t3-quiz__nav [hidden] { display: none; }
  .t3-quiz__next, .t3-quiz__submit { margin-left: auto; }
  .t3-quiz__back { padding-inline: 16px; }
  .t3-quiz__agree[hidden] { display: none; }

  @container (max-width: 559px) {
    .t3-quiz__bonus { margin-left: 0; }
    .t3-quiz__next, .t3-quiz__submit { flex: 1 1 auto; }
  }

  @keyframes t3-quiz-in { from { opacity: 0; transform: translateY(8px); } }
  @media (prefers-reduced-motion: reduce) {
    .t3-quiz__form.is-ready .t3-quiz__step.is-active { animation: none; }
    .t3-quiz__bar { transition: none; }
  }
}