@font-face {
    font-family: 'NunitoSans';
    src: url('/font/NunitoSans-Variablewght.ttf');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'NunitoSans';
    src: url('/font/NunitoSans-Variablewght.ttf');
    font-style: normal;
    font-weight: 700;
}

.quiz-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    font-family: 'NunitoSans';
    text-align: center;
    width: 100%;
    /* padding: 0 calc(350 / 1280 * 100vw); */
}

/* Блок одного вопроса */
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: calc((20 / 1280) * 100vw);
}

/* Текст вопросов по ТЗ */
.question-title {
    font-weight: 600;
    font-size: calc(18 / 1280 * 100vw);
    color: #333333;
    margin: 0;
    /* Расстояние между вопросом и ответами: calc(12 / 1280 * 100vw) */
    margin-bottom: calc((12 / 1280) * 100vw);
}

/* Подпись под вопросом (для напитков) */
.question-hint {
    font-weight: 300;
    font-size: calc(14 / 1280 * 100vw);
    color: #666666;
    margin-top: calc((-8 / 1280) * 100vw);
    /* Компенсация отступа */
    margin-bottom: calc((12 / 1280) * 100vw);
}

/* Контейнер для вариантов ответов */
.options-list {
    display: flex;
    flex-direction: column;
    /* Расстояние между самими ответами: calc(7 / 1280 * 100vw) */
    gap: calc((7 / 1280) * 100vw);
}

/* Текст и контейнер ответов по ТЗ */
.option-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 300;
    font-size: calc(16 / 1280 * 100vw);
    color: #444444;
    cursor: pointer;
}


/* Кнопка отправки формы */
.btn-submit {
    font-family: 'NunitoSans';
    text-transform: uppercase;
    font-weight: 700;
    font-size: calc(18 / 1280 * 100vw);
    padding: calc(13 / 1280 * 100vw) calc(26 / 1280 * 100vw) calc(11 / 1280 * 100vw) calc(27 / 1280 * 100vw);
    background-color: #450707;
    color: white;
    border: none;
    border-radius: calc(14.23 / 1280 * 100vw);
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;
    max-width: calc(401 / 1280 * 100vw);
    margin: calc(30 / 1280 * 100vw) auto;
}

.btn-submit::after {
    content: '';
    background: #DFD8D2;
    width: 100%;
    height: 100%;
    transform: rotate(-5.09deg);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: calc(14.23 / 1280 * 100vw);
}



.input-field {
    width: 100%;
    font-weight: 300;
    font-size: calc(16 / 1280 * 100vw);
    padding: calc(12 / 1280 * 100vw);
    outline: none;

    color: #977272;
    text-align: center;
    border: none;
    border-bottom: 1.5px solid #000000;
    background: transparent;
    padding: calc((10 / 1280) * 100vw) 0;
    width: 100%;
    outline: none;
}


.input-field::placeholder {
    color: #977272;

}

/* Скрываем стандартный дефолтный кружок браузера */
.option-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Контейнер для текста и новой радио-кнопки */
.option-label {
    display: flex;
    align-items: center;
    /* Расстояние между вопросами/ответами по вашему ТЗ */
    gap: calc((12 / 1280) * 100vw);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: calc(16 / 1280 * 100vw);
    color: #000000;
    cursor: pointer;
    user-select: none;
}

/* Создаем кастомный внешний круг */
.option-label::before {
    content: "";
    display: inline-block;
    /* Адаптивный размер кружка ~20px на десктопе */
    width: calc((20 / 1280) * 100vw);
    height: calc((20 / 1280) * 100vw);
    min-width: calc(18 / 1280 * 100vw);
    /* Ограничители, чтобы кружок не сжимался совсем мелко */
    min-height: calc(18 / 1280 * 100vw);

    border: 1.5px solid #000000;
    /* Тонкий черный ободок */
    border-radius: 50%;
    background-color: transparent;
    box-sizing: border-box;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

/* Стили для внутренней точки при выборе (Checked) */
.option-label input[type="radio"]:checked+.option-label::before,
.option-label:has(input[type="radio"]:checked)::before {
    /* Создаем эффект точки внутри за счет радиального градиента */
    background: radial-gradient(circle, #000000 35%, transparent 40%);
}

/* Контейнер строки с чекбоксом */
.drink-option {
    display: flex;
    align-items: center;
    gap: calc((12 / 1280) * 100vw);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: calc(16 / 1280 * 100vw);
    color: #000000;
    cursor: pointer;
    user-select: none;
}

/* Полностью скрываем стандартный чекбокс браузера */
.drink-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Создаем кастомный квадратный ободок (незаполненный) */
.drink-option::before {
    content: "";
    display: inline-block;
    width: calc((20 / 1280) * 100vw);
    height: calc((20 / 1280) * 100vw);
    min-width: calc(18 / 1280 * 100vw);
    min-height: calc(18 / 1280 * 100vw);

    border: 1.5px solid #000000;
    /* Тонкая черная рамка */
    border-radius: 50%;
    /* Легкое аккуратное скругление уголков */
    box-sizing: border-box;
    flex-shrink: 0;
    background-color: transparent;
    transition: background 0.2s;
}

/* Стиль чекбокса при выборе — добавляется точка по центру */
.drink-option:has(input[type="checkbox"]:checked)::before {
    /* Радиальный градиент рисует круглую черную точку внутри квадрата */
    background: radial-gradient(circle, #000000 35%, transparent 40%);
}

@media screen and (max-width: 768px) and (min-width: 320px) {
    .form-group {
        margin-bottom: calc(20 / 375 * 100vw);
    }

    .input-field {
        font-size: calc(18 / 375 * 100vw);
        padding: calc(7 / 375 * 100vw);
    }

    .question-title {
        font-size: calc(20 / 375 * 100vw);
        margin-bottom: calc(12.15 / 375 * 100vw);
    }

    .options-list {
        gap: calc(7 / 375 * 100vw);
    }

    .option-label {
        font-size: calc(18 / 375 * 100vw);
        gap: calc(10 / 375 * 100vw);
    }

    .option-label::before {
        max-width: calc(13 / 375 * 100vw);
        max-height: calc(13 / 375 * 100vw);
        width: calc(13 / 375 * 100vw);
        height: calc(13 / 375 * 100vw);

    }

    .question-hint {
        font-size: calc(18 / 375 * 100vw);
        margin-bottom: calc(12.15 / 375 * 100vw);
    }

    .drink-option {
        font-size: calc(18 / 375 * 100vw);
        gap: calc(10 / 375 * 100vw);
    }

    .drink-option::before {
        max-width: calc(13 / 375 * 100vw);
        max-height: calc(13 / 375 * 100vw);
        width: calc(13 / 375 * 100vw);
        height: calc(13 / 375 * 100vw);
    }
    .btn-submit{
        font-size: calc(18 / 375 * 100vw);
        padding: calc(9 / 375 * 100vw) calc(65 / 375 * 100vw);
        border-radius: calc(10 / 375 * 100vw);
        max-width: fit-content;
        width: 100%;
    }
    .btn-submit::after{
        border-radius: calc(10 / 375 * 100vw);
    }
}