document.addEventListener('DOMContentLoaded', function() {
    const toggleButtons = document.querySelectorAll('.password-toggle-btn');

    toggleButtons.forEach(button => {
        // Hover effect logic
        button.addEventListener('mouseenter', function() {
            this.style.color = 'var(--primary-color)';
        });
        
        button.addEventListener('mouseleave', function() {
            this.style.color = '#666';
        });

        button.addEventListener('click', function() {
            // Find the input element within the same container
            // We assume the structure is container > input + button
            // or button is absolutely positioned relative to container
            // The safest way is to look for the input in the parent container
            const container = this.parentElement;
            const input = container.querySelector('input');
            
            if (input) {
                const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
                input.setAttribute('type', type);
                
                const icon = this.querySelector('i');
                if (type === 'text') {
                    icon.classList.remove('fa-eye');
                    icon.classList.add('fa-eye-slash');
                    this.setAttribute('aria-label', 'Hide password');
                } else {
                    icon.classList.remove('fa-eye-slash');
                    icon.classList.add('fa-eye');
                    this.setAttribute('aria-label', 'Show password');
                }
            }
        });

        // Add keyboard accessibility
        button.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                this.click();
            }
        });
    });
});