/* Quiz: without script every question is shown in turn as one form; with
   block.js (.is-stepped) one question per screen with a progress bar. */

.cms-block--quiz .cms-quiz {
    --card-pad: clamp(var(--s-4), 3.5vw, var(--s-7));
    max-width: 52rem;
    margin-inline: auto;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    box-shadow: none;
}

.cms-block--quiz .cms-quiz__form { display: flex; flex-direction: column; gap: var(--s-6); }
.cms-block--quiz .cms-quiz__form.is-stepped { gap: var(--s-5); }

.cms-block--quiz .cms-quiz__top { display: flex; align-items: center; gap: var(--s-4); }
.cms-block--quiz .cms-quiz__top[hidden] { display: none; }
.cms-block--quiz .cms-quiz__count { flex: 0 0 auto; font-size: var(--t-sm); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.cms-block--quiz .cms-quiz__bar { position: relative; flex: 1 1 auto; height: 6px; border-radius: var(--r-pill); background: var(--c-surface-sunk); overflow: hidden; }
.cms-block--quiz .cms-quiz__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--c-accent); transition: width .35s ease; }

.cms-block--quiz .cms-quiz__gift {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-md);
    background: var(--c-accent-soft);
    color: var(--c-text-strong);
    font-size: var(--t-sm);
    font-weight: 600;
}
.cms-block--quiz .cms-quiz__gift svg { flex: 0 0 auto; width: 1.15em; height: 1.15em; color: var(--c-accent); }

.cms-block--quiz .cms-quiz__step { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.cms-block--quiz .is-stepped .cms-quiz__step { animation: cms-quiz-in .3s ease both; }
.cms-block--quiz .is-stepped .cms-quiz__step[hidden] { display: none; }

.cms-block--quiz .cms-quiz__question {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: 0;
    color: var(--c-text-strong);
    font-family: var(--f-head, inherit);
    font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
    font-weight: 700;
    line-height: 1.25;
}
.cms-block--quiz .cms-quiz__no {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--c-accent);
    color: var(--c-on-accent, #fff);
    font-size: 1rem;
    font-weight: 700;
}
.cms-block--quiz .cms-quiz__no svg { width: 1rem; height: 1rem; }
.cms-block--quiz .cms-quiz__hint { margin: 0; color: var(--c-text-muted); font-size: var(--t-sm); }

.cms-block--quiz .cms-quiz__options { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.cms-block--quiz .cms-quiz__option { position: relative; display: flex; cursor: pointer; }
.cms-block--quiz .cms-quiz__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cms-block--quiz .cms-quiz__card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px var(--s-3);
    width: 100%;
    padding: var(--s-3) var(--s-4);
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    transition: border-color .15s, background .15s;
}
.cms-block--quiz .cms-quiz__option:hover .cms-quiz__card { border-color: var(--c-border-strong); }
.cms-block--quiz .cms-quiz__input:focus-visible + .cms-quiz__card { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.cms-block--quiz .cms-quiz__input:checked + .cms-quiz__card { border-color: var(--c-accent); background: var(--c-accent-soft); }
.cms-block--quiz .cms-quiz__mark {
    grid-row: span 2;
    width: 1.15rem;
    height: 1.15rem;
    border: 1.5px solid var(--c-border-strong);
    border-radius: 50%;
    background: var(--c-surface);
}
.cms-block--quiz .cms-quiz__input[type="checkbox"] + .cms-quiz__card .cms-quiz__mark { border-radius: var(--r-xs); }
.cms-block--quiz .cms-quiz__input:checked + .cms-quiz__card .cms-quiz__mark {
    border-color: var(--c-accent);
    background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.cms-block--quiz .cms-quiz__label { color: var(--c-text-strong); font-weight: 600; line-height: 1.3; }
.cms-block--quiz .cms-quiz__text { grid-column: 2; color: var(--c-text-muted); font-size: var(--t-sm); line-height: 1.35; }

.cms-block--quiz .cms-quiz__other { display: flex; flex-direction: column; gap: var(--s-1); }
.cms-block--quiz .cms-quiz__other-label { color: var(--c-text-muted); font-size: var(--t-sm); }
.cms-block--quiz .cms-quiz__step [data-quiz-error][hidden] { display: none; }

.cms-block--quiz .cms-quiz__contacts { display: grid; gap: var(--s-3) var(--s-4); }
@media (min-width: 40rem) {
    .cms-block--quiz .cms-quiz__contacts { grid-template-columns: 1fr 1fr; }
    .cms-block--quiz .cms-quiz__contacts .cms-form__field--wide { grid-column: 1 / -1; }
}
.cms-block--quiz .cms-quiz__ways { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cms-block--quiz .cms-quiz__way { position: relative; cursor: pointer; }
.cms-block--quiz .cms-quiz__way input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cms-block--quiz .cms-quiz__way span { display: inline-flex; padding: var(--s-1) var(--s-3); border: 1.5px solid var(--c-border); border-radius: var(--r-pill); font-size: var(--t-sm); transition: border-color .15s, background .15s; }
.cms-block--quiz .cms-quiz__way input:checked + span { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-text-strong); font-weight: 600; }
.cms-block--quiz .cms-quiz__way input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.cms-block--quiz .cms-quiz__submit { align-self: flex-start; }

.cms-block--quiz .cms-quiz__nav { display: flex; justify-content: space-between; gap: var(--s-3); }
.cms-block--quiz .cms-quiz__nav[hidden] { display: none; }
.cms-block--quiz .cms-quiz__nav .cms-btn { display: inline-flex; align-items: center; gap: var(--s-2); }
.cms-block--quiz .cms-quiz__nav .cms-btn svg { width: 1em; height: 1em; }
.cms-block--quiz .cms-quiz__nav [hidden] { display: none; }
.cms-block--quiz .cms-quiz__back[disabled] { visibility: hidden; }
.cms-block--quiz .cms-quiz__done { text-align: center; }

@keyframes cms-quiz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .cms-block--quiz .is-stepped .cms-quiz__step { animation: none; }
    .cms-block--quiz .cms-quiz__fill { transition: none; }
}