.custom-radio {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.custom-radio input {
    width: 20px;
    height: 20px;
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease,
    filter 0.3s ease;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    outline: none;
    appearance: none;
}

.custom-radio input:checked {
    border-color: var(--secondary-dark);
    background-color: var(--secondary-dark);
}

.custom-radio label {
    font-size: 14px;
    margin-left: 10px;
    cursor: pointer;
    user-select: none;
    transition: filter 0.3s ease;
    color: var(--text-color-darker);
}

.custom-radio label:hover {
    filter: brightness(140%);
}

.custom-radio input:hover {
    filter: brightness(140%);
}

.custom-radio input:focus-visible {
    outline: 2px solid var(--secondary-dark);
    outline-offset: 2px;
}