/* ================ ОБЩИЕ СТИЛИ ДЛЯ ЧЕКБОКСОВ И РАДИОКНОПОК ================== */
.custom-checkbox input,
.custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-checkbox .checkmark,
.custom-radio .radiomark {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #eee;
    border: 2px solid #ccc;
    margin-right: 2px;
    vertical-align: middle;
    transition: background-color 0.3s, border-color 0.3s;
}

/* Стиль при наведении */
.custom-checkbox:hover input ~ .checkmark,
.custom-radio:hover input ~ .radiomark {
    background-color: #ddd;
    border-color: #bbb;
}

/* Стиль для активного (выбранного) элемента */
.custom-checkbox input:checked ~ .checkmark,
.custom-radio input:checked ~ .radiomark {
    background-color: #007bff;
    border-color: #007bff;
}

/* ================ СПЕЦИФИЧНЫЕ СТИЛИ ДЛЯ ЧЕКБОКСОВ ================== */
.custom-checkbox .checkmark {
    border-radius: 4px; /* Квадратная форма */
}

/* Галочка для чекбоксов */
.checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked ~ .checkmark::after {
    display: block;
}

/* ================ СПЕЦИФИЧНЫЕ СТИЛИ ДЛЯ РАДИОКНОПОК ================== */
.custom-radio .radiomark {
    border-radius: 50%; /* Круглая форма */
}

/* Внутренний круг для радиокнопок */
.radiomark::after {
    content: "";
    position: absolute;
    display: none;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.custom-radio input:checked ~ .radiomark::after {
    display: block;
}
