.custom-input-check {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .custom-input-check label {
        cursor: pointer;
        user-select: none;
        transition: opacity 0.25s ease;
    }

    .custom-input-check input:disabled + label {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .custom-input-check input[type="checkbox"],
    .custom-input-check input[type="radio"] {
        appearance: none;
        -webkit-appearance: none;
        width: 22px;
        height: 22px;
        border: 2px solid #3b82f6;
        background: #fff;
        cursor: pointer;
        position: relative;
        transition: all 0.25s ease;
        flex-shrink: 0;
    }

        .custom-input-check input[type="checkbox"]:disabled,
        .custom-input-check input[type="radio"]:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

    .custom-input-check input[type="checkbox"] {
        border-radius: 6px;
    }

    .custom-input-check input[type="radio"] {
        border-radius: 50%;
    }

        .custom-input-check input[type="checkbox"]:not(:disabled):hover,
        .custom-input-check input[type="radio"]:not(:disabled):hover {
            box-shadow: 0 0 6px rgba(59, 130, 246, 0.6);
            transform: scale(1.05);
        }

        .custom-input-check input[type="checkbox"]:checked,
        .custom-input-check input[type="radio"]:checked {
            background: #3b82f6;
            border-color: #3b82f6;
        }

            .custom-input-check input[type="checkbox"]:checked::after {
                content: "";
                position: absolute;
                left: 6px;
                top: 2px;
                width: 6px;
                height: 12px;
                border: solid #fff;
                border-width: 0 3px 3px 0;
                transform: rotate(45deg) scale(0);
                animation: checkAnimation 0.2s forwards ease;
            }

            .custom-input-check input[type="radio"]:checked::after {
                content: "";
                position: absolute;
                width: 10px;
                height: 10px;
                background: #fff;
                border-radius: 50%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(0);
                animation: radioAnimation 0.2s forwards ease;
            }

@keyframes checkAnimation {
    to {
        transform: rotate(45deg) scale(1);
    }
}

@keyframes radioAnimation {
    to {
        transform: translate(-50%, -50%) scale(1);
    }
}