script.js

// Add ripple effect to checkboxes
document.querySelectorAll('.checkbox-label').forEach(label => {
    label.addEventListener('click', (e) => {
        // Create ripple element
        const ripple = document.createElement('span');
        ripple.classList.add('ripple-effect');
        
        // Position the ripple
        const checkbox = label.querySelector('.checkbox-custom, .animated-checkbox, .icon-checkbox');
        const rect = checkbox.getBoundingClientRect();
        const size = Math.max(rect.width, rect.height);
        
        ripple.style.width = ripple.style.height = `${size}px`;
        ripple.style.left = `${e.clientX - rect.left - size/2}px`;
        ripple.style.top = `${e.clientY - rect.top - size/2}px`;
        
        // Add ripple to checkbox
        checkbox.appendChild(ripple);
        
        // Remove ripple after animation
        setTimeout(() => {
            ripple.remove();
        }, 600);
    });
});

// Add keyboard navigation
document.querySelectorAll('.checkbox-input').forEach(checkbox => {
    checkbox.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            checkbox.checked = !checkbox.checked;
            checkbox.dispatchEvent(new Event('change'));
        }
    });
});