/* 1. Скрываем стандартный системный чекбокс, но оставляем его доступным для фокуса и валидации */
.elementor-field-type-acceptance .elementor-acceptance-field {
    position: absolute;
    z-index: -1;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

/* 2. Задаем базовые стили для label и делаем отступ слева под кастомный квадрат */
.elementor-field-type-acceptance .elementor-field-option label {
    position: relative;
    display: inline-block;
    padding-left: 30px; /* Отступ текста от квадрата */
    cursor: pointer;
    vertical-align: middle;
    line-height: 20px;
}

/* 3. Отрисовываем кастомный пустой квадрат (чекбокс) */
.elementor-field-type-acceptance .elementor-field-option label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0; /* Центрируем по вертикали относительно строки */
    width: 20px;
    height: 20px;
    border: 2px solid #333333; /* Цвет рамки (можете заменить под ваш дизайн) */
    border-radius: 4px; /* Скругление уголков */
    background-color: #ffffff;
    box-sizing: border-box;
    transition: background-color 0.2s, border-color 0.2s;
}

/* 4. Отрисовываем скрытую по умолчанию галочку внутри квадрата */
.elementor-field-type-acceptance .elementor-field-option label::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid #ffffff; /* Цвет галочки */
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.2s;
}

/* 5. Стили для состояния, когда чекбокс ВЫБРАН (Checked) */
/* Заливаем квадрат цветом */
.elementor-field-type-acceptance .elementor-acceptance-field:checked + label::before {
    background-color: #000000; /* Цвет заливки при клике (черный, под ваш стиль печей) */
    border-color: #000000;
}

/* Показываем галочку (анимируем увеличение из центра) */
.elementor-field-type-acceptance .elementor-acceptance-field:checked + label::after {
    transform: rotate(45deg) scale(1);
}

/* 6. Стили для фокуса (для доступности с клавиатуры) */
.elementor-field-type-acceptance .elementor-acceptance-field:focus + label::before {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}

/* 7. Если форма не отправляется и поле подсвечивается как ошибочное */
.elementor-field-type-acceptance .elementor-acceptance-field:invalid + label::before {
    /* Можно добавить красную рамку, если пользователь пытается отправить форму пустой */
    /* border-color: #ff0000; */
}