/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/


.quiz-container {
    max-width: 600px;
    margin: 0 auto;
    padding:0
}

.quiz-step {
    display: none;
}

.quiz-step.active {
    display: block;
}

#quiz-result {
    display: none;
}

/* Скрываем чекбоксы */
.quiz-step input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

#quiz-result.active {
    display: block;
}

/* Скрываем все шаги, когда результат виден */
.quiz-container:has(#quiz-result.active) .quiz-step,
.quiz-container #quiz-result ~ .quiz-step {
    display: none
}

/* Стили для лейблов */
.quiz-step label {
    display: block;
    padding: 10px 15px;
    margin: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    border: 1px solid #D6D9DD;
    display: inline-block;
}

/* Подсветка при выборе */
.quiz-step label:has(input:checked) {
    background: #331a38;
    color: #ffffff;
    border-color: #331a38;
}
.quiz-container button{
	display: block;
	margin-top: 20px;
}
.quiz-container .wrap{
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
}
.page-id-418 header.entry-header{
	display: none;
}