/* 2S1: the quiz on a dark sheet over a blurred photo (cms-tone-accent).
   Light type, answers as glassy tiles with a number (keys 1-9 work), a
   segmented progress bar; vermilion only for what is chosen and for the
   actions. On a light sheet the same markup reads dark (the tone's
   variables). Overrides Default's block.css; the markup is Default's. */

.cms-block--quiz {
    --q-fg: var(--c-text-strong, var(--s2-ink));
    --q-muted: var(--c-text-muted, #555);
    --q-line: var(--c-border, rgba(0, 0, 0, .2));
    --q-tile: var(--c-surface, #fff);
    --q-tile-hover: var(--c-surface-sunk, #f3f0ea);
}

.cms-block--quiz .cms-quiz {
    max-width: 62rem;
    margin-inline: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--q-fg);
}

.cms-block--quiz .cms-quiz__form { display: flex; flex-direction: column; gap: clamp(1.25rem, 2.6vw, 2rem); }

.cms-block--quiz .cms-quiz__top { display: flex; align-items: center; gap: 1rem; }
.cms-block--quiz .cms-quiz__top[hidden] { display: none; }
.cms-block--quiz .cms-quiz__count { flex: 0 0 auto; color: var(--q-muted); font: 600 .9rem var(--s2-text); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cms-block--quiz .cms-quiz__bar {
    position: relative;
    flex: 1 1 auto;
    height: 6px;
    border-radius: 3px;
    background: var(--q-line);
    overflow: hidden;
}
.cms-block--quiz .cms-quiz__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--s2-vermilion); transition: width .45s cubic-bezier(.2, .7, .2, 1); }

.cms-block--quiz .cms-quiz__gift {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .55rem .95rem;
    border: 1px solid color-mix(in srgb, var(--s2-vermilion) 55%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--s2-vermilion) 14%, transparent);
    color: var(--q-fg);
    font-size: .92rem;
    font-weight: 600;
    align-self: flex-start;
}
.cms-block--quiz .cms-quiz__gift svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; color: var(--s2-vermilion); }

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

.cms-block--quiz .cms-quiz__question {
    display: block;
    padding: 0;
    float: none;
    width: 100%;
    font-family: var(--s2-display);
    font-size: clamp(28px, 3.4vw, 48px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.025em;
    color: var(--q-fg);
}
.cms-block--quiz .cms-quiz__no {
    display: inline;
    margin-right: .3em;
    width: auto;
    height: auto;
    background: transparent;
    color: var(--s2-vermilion);
    border-radius: 0;
    font-size: inherit;
}
.cms-block--quiz .cms-quiz__no::after { content: '.'; }
.cms-block--quiz .cms-quiz__no svg { width: .8em; height: .8em; }
.cms-block--quiz .cms-quiz__question > span:last-child { display: inline; }
.cms-block--quiz .cms-quiz__hint { margin: -.3rem 0 0; color: var(--q-muted); font-size: 1rem; }

.cms-block--quiz .cms-quiz__options { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); counter-reset: s2opt; }
.cms-block--quiz .cms-quiz__option { position: relative; display: flex; cursor: pointer; counter-increment: s2opt; }
.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 1rem;
    width: 100%;
    min-height: 5rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--q-line);
    border-radius: 12px;
    background: var(--q-tile);
    color: var(--q-fg);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform .2s var(--s2-ease), background .15s, border-color .15s, box-shadow .15s;
}
.cms-block--quiz .cms-quiz__option:hover .cms-quiz__card { transform: translateY(-2px); background: var(--q-tile-hover); border-color: var(--c-border-strong, currentColor); }
.cms-block--quiz .cms-quiz__input:focus-visible + .cms-quiz__card { outline: 2px solid var(--s2-vermilion); outline-offset: 3px; }
.cms-block--quiz .cms-quiz__input:checked + .cms-quiz__card {
    border-color: var(--s2-vermilion);
    background: color-mix(in srgb, var(--s2-vermilion) 16%, var(--q-tile));
    box-shadow: inset 0 0 0 1px var(--s2-vermilion);
}
.cms-block--quiz .cms-quiz__mark {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid var(--q-line);
    border-radius: 8px;
    background: transparent;
    color: var(--q-muted);
}
.cms-block--quiz .cms-quiz__mark::before { content: counter(s2opt); font: 700 1rem var(--s2-display); }
.cms-block--quiz .cms-quiz__input:checked + .cms-quiz__card .cms-quiz__mark { background: var(--s2-vermilion); border-color: var(--s2-vermilion); color: #fff; }
.cms-block--quiz .cms-quiz__label { font: 700 1.05rem/1.25 var(--s2-text); }
.cms-block--quiz .cms-quiz__text { grid-column: 2; color: var(--q-muted); font-size: .9rem; line-height: 1.35; }

.cms-block--quiz .cms-quiz__other { display: flex; flex-direction: column; gap: .4rem; max-width: 30rem; }
.cms-block--quiz .cms-quiz__other-label { color: var(--q-muted); font-size: .92rem; font-weight: 600; }
.cms-block--quiz .cms-quiz__step [data-quiz-error][hidden] { display: none; }
.cms-block--quiz .cms-form__error, .cms-block--quiz [data-quiz-error] { font-weight: 600; color: #ff9b86; }
.cms-section:not(.cms-tone-accent):not(.cms-tone-dark):not(.cms-tone-primary) .cms-block--quiz :is(.cms-form__error, [data-quiz-error]) { color: #b3261e; }

.cms-block--quiz .cms-quiz__contacts { display: grid; gap: 1rem 1.2rem; }
@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-form__input {
    background: var(--q-tile);
    border: 1px solid var(--q-line);
    border-radius: 10px;
    color: var(--q-fg);
}
.cms-block--quiz .cms-form__input::placeholder { color: var(--q-muted); }
.cms-block--quiz .cms-form__input:focus { border-color: var(--s2-vermilion); outline: 2px solid color-mix(in srgb, var(--s2-vermilion) 40%, transparent); outline-offset: 1px; }
.cms-block--quiz .cms-form__label { color: var(--q-fg); }
.cms-block--quiz .cms-form__check { color: var(--q-muted); }
.cms-block--quiz .cms-form__check a { color: var(--q-fg); font-weight: 600; }
.cms-block--quiz .cms-form__check input { accent-color: var(--s2-vermilion); }
.cms-block--quiz .cms-quiz__ways { display: flex; flex-wrap: wrap; gap: 8px; }
.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: .55em 1.05em; border: 1px solid var(--q-line); border-radius: 999px; background: var(--q-tile); color: var(--q-fg); font-weight: 600; transition: background .15s, border-color .15s; }
.cms-block--quiz .cms-quiz__way input:checked + span { border-color: var(--s2-vermilion); background: var(--s2-vermilion); color: #fff; }
.cms-block--quiz .cms-quiz__way input:focus-visible + span { outline: 2px solid var(--s2-vermilion); outline-offset: 3px; }
.cms-block--quiz .cms-quiz__submit { align-self: flex-start; background: var(--s2-vermilion); color: #fff; border-color: var(--s2-vermilion); }

.cms-block--quiz .cms-quiz__nav { display: flex; justify-content: space-between; gap: 1rem; }
.cms-block--quiz .cms-quiz__nav[hidden] { display: none; }
.cms-block--quiz .cms-quiz__nav .cms-btn { display: inline-flex; align-items: center; gap: .5rem; }
.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__nav .cms-btn--ghost { color: var(--q-fg); border-color: var(--q-line); background: transparent; }
.cms-block--quiz .cms-quiz__nav .cms-btn--primary { background: var(--s2-vermilion); color: #fff; border-color: var(--s2-vermilion); }
.cms-block--quiz .cms-quiz__back[disabled] { visibility: hidden; }
.cms-block--quiz .cms-quiz__done {
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--q-line);
    border-radius: 14px;
    background: var(--q-tile);
    color: var(--q-fg);
    font: 800 clamp(1.5rem, 2.6vw, 2.1rem)/1.15 var(--s2-display);
    letter-spacing: -.02em;
}

@keyframes s2-quiz-in { from { opacity: 0; transform: translateY(10px); } 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; }
    .cms-block--quiz .cms-quiz__card { transition: none; }
}