.radio-button {
    margin-bottom: 20px;
    display: flex;
    justify-content: left;
    font-size: 15px;
    color: var(--text-main); /* Чтобы текст адаптировался под тему */
    transition: color 0.3s ease;
}

.radio-button input[type=radio] {
    display: none;
    cursor: pointer;
}

.radio-button label {
    display: inline-flex;
    align-items: center;
    user-select: none;
    cursor: pointer;
}

.radio-button label:before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    flex-grow: 0;
    
    /* Адаптивная рамка и фон */
    border: 1px solid var(--text-main);
    background-color: var(--bg-input);
    
    border-radius: 50%;
    margin-right: 0.5em;
    box-sizing: border-box; /* Чтобы размеры не прыгали */
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Эффект наведения (пользователю сразу понятно, что можно кликнуть) */
.radio-button label:hover:before {
    border-color: var(--accent-brand);
}

.radio-button input[type=radio]:checked + label:before {
    /* Фирменный цвет вместо #E4494A */
    background-color: var(--accent-brand);
    border: 1px solid var(--accent-brand);
    
    /* Создает красивую "точку" внутри радио-кнопки цвета текущего фона (белого или темного) */
    box-shadow: inset 0 0 0 3px var(--bg-surface);
}