<style>
        * {
            box-sizing: border-box !important;
        }
	
	.afb-hide{
		display: none !important
	}
	 

        .login-container {
            max-width: 700px !important;
            margin: 0 auto !important;
            background: #F5EEE6 !important;
            padding: 40px 11px !important;
            font-family: 'Garamond 3 LT Std', serif !important;
        }

        .alert {
            background-color: #f8d7da !important;
            border: 1px solid #f5c6cb !important;
            color: #721c24 !important;
            padding: 15px !important;
            margin-bottom: 20px !important;
            border-radius: 4px !important;
            font-size: 14px !important;
            letter-spacing: 1px !important;
            display: none !important;
        }

        .alert.show {
            display: block !important;
        }

        .alert.success {
            background-color: #d4edda !important;
            border-color: #c3e6cb !important;
            color: #155724 !important;
        }

        .alert.error {
            background-color: #f8d7da !important;
            border-color: #f5c6cb !important;
            color: #721c24 !important;
        }

        .form-content-wrapper {
            display: flex !important;
            gap: 0 !important;
            align-items: flex-start !important;
        }

        .labels-column {
            width: 25% !important;
            padding-right: 15px !important;
        }

        .fields-column {
            width: 75% !important;
            padding-left: 15px !important;
        }

        .login-title {
            font-size: 20px !important;
            font-weight: 500 !important;
            text-transform: uppercase !important;
            letter-spacing: 2px !important;
            color: #232323 !important;
            margin: 0 0 20px 0 !important;
            line-height: 1.7 !important;
            text-align: center !important;
            font-family: 'Garamond 3 LT Std', serif !important;
        }

        .form-label {
            font-size: 12px !important;
            font-weight: 400 !important;
            text-transform: uppercase !important;
            letter-spacing: 2px !important;
            color: #1d1d1b !important;
/*             padding-top: 15px !important; */
            text-align: left !important;
            margin-bottom: 30px !important;
            display: block !important;
            font-family: inherit !important;
        }

        .form-input {
            width: 100% !important;
            height: 49px !important;
            border: 1px solid #b7c4ca !important;
            background: transparent !important;
            font-size: 12px !important;
            letter-spacing: 2px !important;
            padding: 5px 11px !important;
            color: #7a7a7a !important;
            border-radius: 0 !important;
            outline: none !important;
/*             margin-bottom: 30px !important; */
            box-shadow: none !important;
            font-family: inherit !important;
        }

        .form-input:focus {
            border-color: #999 !important;
            box-shadow: none !important;
            outline: none !important;
        }

        .password-container {
            display: flex !important; 
        }

        .password-input {
            flex: 1 !important;
            height: 49px !important;
            border: 1px solid #b7c4ca !important;
            border-right: none !important;
            background: transparent !important;
            font-size: 12px !important;
            letter-spacing: 2px !important;
            padding: 5px 11px !important;
            color: #7a7a7a !important;
            border-radius: 0 !important;
            outline: none !important;
            box-shadow: none !important;
            font-family: inherit !important;
        }

        .password-input:focus {
            border-color: #999 !important;
            box-shadow: none !important;
            outline: none !important;
        }

        .show-password-btn {
            height: 49px !important;
            background: #000 !important;
            color: #fff !important;
            border: none !important;
            padding: 7px 11px !important;
            font-size: 8px !important;
            font-weight: 500 !important;
            text-transform: uppercase !important;
            letter-spacing: 2px !important;
            cursor: pointer !important;
            font-family: 'Sweet Sans On Air', sans-serif !important;
            border-radius: 0 !important;
            white-space: nowrap !important;
            min-width: 60px !important;
            box-shadow: none !important;
            outline: none !important;
        }

        .show-password-btn:hover {
            background: #333 !important;
        }

        .forgot-password {
            text-align: center !important;
            margin: 10px 0px !important;
    		margin-bottom: 20px !important;
        }

        .forgot-password a {
            font-size: 10px !important;
            color: #929396 !important;
            text-decoration: none !important;
            text-transform: uppercase !important;
            letter-spacing: 2px !important;
            font-family: inherit !important;
        }

        .forgot-password a:hover {
            color: #666 !important;
            text-decoration: none !important;
        }

        .login-btn {
            background: transparent !important;
            border: 1px solid #000 !important;
            color: #1d1d1b !important;
            padding: 16px 40px !important;
            font-size: 12px !important;
            font-weight: 500 !important;
            text-transform: uppercase !important;
            letter-spacing: 2px !important;
            cursor: pointer !important;
            font-family: 'Sweet Sans On Air', sans-serif !important;
            border-radius: 0 !important;
            width: 100% !important;
            margin-bottom: 10px !important;
            box-shadow: none !important;
            outline: none !important;
        }

        .login-btn:hover {
            background: #000 !important;
            color: #fff !important;
        }

        .login-btn:disabled {
            opacity: 0.6 !important;
            cursor: not-allowed !important;
        }

        .create-account {
            text-align: center !important;
            margin-top: 20px !important;
        }

        .create-account a {
            font-size: 12px !important;
            color: #1d1d1b !important;
            text-decoration: none !important;
            text-transform: uppercase !important;
            letter-spacing: 1px !important;
            font-family: inherit !important;
        }

        .create-account a:hover {
            color: #666 !important;
            text-decoration: none !important;
        }

        .empty-label {
            height: 49px !important;
            margin-bottom: 30px !important;
        }

        /* Responsive Design - Mobile First */
        @media (max-width: 768px) {
            .form-content-wrapper {
                display: block !important;
            }
            
            .labels-column {
                display: none !important;
            }
            
            .fields-column {
                width: 100% !important;
                padding-left: 0 !important;
            }
            
            .login-title {
                font-size: 18px !important;
                margin-bottom: 40px !important;
            }
            
            .form-input {
/*                 margin-bottom: 25px !important; */
            }
            
            .password-container {
                margin-bottom: 25px !important;
            }
            
            .form-label {
                display: block !important;
                text-align: left !important;
                margin-bottom: 10px !important;
                padding-top: 0 !important;
            }
            
            /* Show labels above fields on mobile */
            .mobile-form-group {
                margin-bottom: 25px !important;
            }
            
            .forgot-password {
                margin: 0px !important;
    			margin-bottom: 20px !important;
            }
        }
        
        @media (max-width: 480px) {
            .login-container {
                padding: 20px 10px !important;
            }
            
            .login-title {
                font-size: 16px !important;
                line-height: 1.4 !important;
            }
            
            .show-password-btn {
                font-size: 7px !important;
                padding: 7px 8px !important;
                min-width: 50px !important;
            }
        }

        /* Override common theme conflicts */
        .login-container input[type="text"],
        .login-container input[type="password"],
        .login-container input[type="email"] {
            border: 1px solid #b7c4ca !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            background: transparent !important;
            font-size: 12px !important;
            height: 49px !important;
            padding: 5px 11px !important;
            margin: 0 !important;
        }

        .login-container button {
            border-radius: 0 !important;
            box-shadow: none !important;
            text-transform: uppercase !important;
            letter-spacing: 2px !important;
        }

        /* Override WooCommerce styles */
        .woocommerce .login-container input[type="text"],
        .woocommerce .login-container input[type="password"],
        .woocommerce .login-container input[type="email"] {
            border: 1px solid #b7c4ca !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            background: transparent !important;
        }

        .woocommerce .login-container button {
            border-radius: 0 !important;
            box-shadow: none !important;
        }
	
	
	
	
	
	
	@media(min-width:768px){
		.mobile-only{
			display:none !important
		}
		
		.afb-username-group{
			margin-bottom: 15px !important
		}
		
		.afb-pass-label{
			padding-top:20px !important
		}
		
		
		.form-content-wrapper,
		#loginAlert{
			margin-left: -100px !important;
    		max-width: 678px !important;
		}
	}
	
	
    </style>



<!-- // LOGIN CONTAINERR -->
<section class="login-container" id="login-form">
    <!-- Alert Box -->
    <div id="loginAlert" class="alert">
        <span id="alertMessage"></span>
    </div>

    <div class="form-content-wrapper">
        <!-- Labels Column - Desktop Only -->
        <div class="labels-column">
            <div class="empty-label"></div> <!-- Space for title -->
            <label class="form-label" for="field-email">E-mail</label>
            <label class="form-label afb-pass-label" for="field-password">Password</label>
        </div>
        
        <!-- Fields Column -->
        <div class="fields-column">
            <h1 class="login-title">Log in to your account</h1>
            
            <form id="wp-login-form" method="post">
                <input type="hidden" name="action" value="wp_ajax_login" />
                <input type="hidden" name="security" id="security" value="" />
                
                <!-- Mobile Form Group - Email -->
                <div class="mobile-form-group afb-username-group">
                    <label class="form-label mobile-only" for="username" style="display: none;">E-mail</label>
                    <input class="form-input" name="username" id="username" type="text" value="" autocomplete="username" required="" placeholder="" />
                </div>
                
                <!-- Mobile Form Group - Password -->
                <div class="mobile-form-group">
                    <label class="form-label mobile-only" for="password" style="display: none;">Password</label>
                    <div class="password-container">
                        <input class="password-input" name="password" id="password" title="At least 5 characters" type="password" autocomplete="current-password" value="" required="" placeholder="" />
                        <button class="show-password-btn" type="button" data-action="show-password">Show</button>
                    </div>
                </div>
                
                <div class="forgot-password">
                    <a href="/lost-password/" rel="nofollow">
                        Forgot your password?
                    </a>
                </div>
                
                <button class="login-btn" type="submit" id="login-submit">
                    <span id="login-text">Login</span>
                    <span id="login-loading" style="display: none;">Logging in...</span>
                </button>
            </form>
            
            <div class="create-account">
                <a href="https://damyel.com/en/admindamyel2652/?action=register">
                    Don't have an account? Create one
                </a>
            </div>
        </div>
    </div>
</section>


<!-- // REGISTERATION CONTAINER -->
<style>
        /* New registration-specific styles only */
        .reg-subtitle {
            font-size: 14px !important;
            color: #1d1d1b !important;
            text-align: center !important;
            margin-bottom: 20px !important;
            font-family: inherit !important;
            font-weight: normal !important;
        }

        .reg-subtitle a {
            color: #1d1d1b !important;
            text-decoration: underline !important;
        }

        .reg-subtitle a:hover {
            color: #666 !important;
        }

        .date-input {
            width: 100% !important;
            height: 49px !important;
            border: 1px solid #b7c4ca !important;
            background: transparent !important;
            font-size: 12px !important;
            letter-spacing: 1px !important;
            padding: 5px 11px !important;
            color: #7a7a7a !important;
            border-radius: 0 !important;
            outline: none !important; 
            box-shadow: none !important;
            font-family: inherit !important;
        }

        .date-input:focus {
            border-color: #999 !important;
            box-shadow: none !important;
            outline: none !important;
        }

        .date-input::-webkit-calendar-picker-indicator {
            background-color: #1d1d1b !important;
            border-radius: 0 !important;
            cursor: pointer !important;
        }

        .select-input {
            width: 100% !important;
            height: 49px !important;
            border: 1px solid #b7c4ca !important;
            background: transparent !important;
            font-size: 12px !important;
            letter-spacing: 2px !important;
            padding: 5px 11px !important;
            color: #7a7a7a !important;
            border-radius: 0 !important;
            outline: none !important;
/*             margin-bottom: 30px !important; */
            box-shadow: none !important;
            font-family: inherit !important;
            appearance: none !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
            background-repeat: no-repeat !important;
            background-position: right 11px center !important;
            background-size: 16px !important;
        }

        .select-input:focus {
            border-color: #999 !important;
            box-shadow: none !important;
            outline: none !important;
        }

        .checkbox-container {
            display: flex !important;
            align-items: flex-start !important;
            margin-bottom: 20px !important;
            gap: 10px !important;
        }

        .checkbox-input {
            width: 16px !important;
            height: 16px !important;
            margin: 0 !important;
            margin-top: 2px !important;
            border: 1px solid #b7c4ca !important;
            background: transparent !important;
            border-radius: 0 !important;
            outline: none !important;
            cursor: pointer !important;
        }

        .checkbox-label {
            font-size: 11px !important;
            color: #1d1d1b !important;
            line-height: 1.4 !important;
            font-family: inherit !important;
            margin: 0 !important;
            cursor: pointer !important;
        }

        .checkbox-label em {
            font-style: italic !important;
        }

        .checkbox-label a {
            color: #1d1d1b !important;
            text-decoration: underline !important;
        }

        .checkbox-label a:hover {
            color: #666 !important;
        }

        /* Responsive adjustments for registration */
        @media (max-width: 768px) {
            .reg-subtitle {
                margin-bottom: 30px !important;
            }
            
            .checkbox-container {
                margin-bottom: 15px !important;
            }
			
			.login-title {
				margin-bottom: 22px !important
			}
        }
	
	
	@media(min-width:768px){
		#wp-register-form  .mobile-form-group {
			margin-bottom: 15px !important;
		}
			
		#registration-form .labels-column{
			margin-top: -45px;
		}
		
		#registration-form  .form-label:not(#registration-form .form-label:nth-child(1)):not(#registration-form .form-label:nth-child(2)):not(#registration-form .form-label:nth-child(3)){
			padding-top: 22px !important
		}
	}
    </style>


<section class="login-container afb-hide" id="registration-form">
    <!-- Alert Box -->
    <div id="registerAlert" class="alert">
        <span id="registerAlertMessage"></span>
    </div>

    <div class="form-content-wrapper">
        <!-- Labels Column - Desktop Only -->
        <div class="labels-column">
            <div class="empty-label"></div> <!-- Space for title -->
            <div class="empty-label"></div> <!-- Space for subtitle -->
            <label class="form-label" for="field-first-name">First Name</label>
            <label class="form-label" for="field-last-name">Name</label>
            <label class="form-label" for="field-email">E-mail</label>
            <label class="form-label afb-pass-label" for="field-password">Password</label>
            <label class="form-label" for="field-dob">Date of Birth</label>
            <label class="form-label" for="field-address">Address</label>
            <label class="form-label" for="field-postcode">Postal Code</label>
            <label class="form-label" for="field-city">City</label>
            <label class="form-label" for="field-country">Country</label>
            <label class="form-label" for="field-phone">Phone</label>
        </div>
        
        <!-- Fields Column -->
        <div class="fields-column">
            <h1 class="login-title">Create Your Account</h1>
            
            <div class="reg-subtitle">
                Already have an account? <a class="afb-login-tab" href="https://damyel.com/en/admindamyel2652/">Please log in!</a>
            </div>
            
            <form id="wp-register-form" method="post">
                <input type="hidden" name="action" value="wc_ajax_register" />
                <input type="hidden" name="register_security" id="register_security" value="" />
                
                <!-- First Name -->
                <div class="mobile-form-group">
                    <label class="form-label mobile-only" for="billing_first_name" style="display: none;">First Name</label>
                    <input class="form-input" name="billing_first_name" id="billing_first_name" type="text" value="" autocomplete="given-name" required="" />
                </div>
                
                <!-- Last Name -->
                <div class="mobile-form-group">
                    <label class="form-label mobile-only" for="billing_last_name" style="display: none;">Name</label>
                    <input class="form-input" name="billing_last_name" id="billing_last_name" type="text" value="" autocomplete="family-name" required="" />
                </div>
                
                <!-- Email -->
                <div class="mobile-form-group">
                    <label class="form-label mobile-only" for="reg_email" style="display: none;">E-mail</label>
                    <input class="form-input" name="email" id="reg_email" type="email" value="" autocomplete="email" required="" />
                </div>
                
                <!-- Password -->
                <div class="mobile-form-group">
                    <label class="form-label mobile-only" for="reg_password" style="display: none;">Password</label>
                    <div class="password-container">
                        <input class="password-input" name="password" id="reg_password" type="password" autocomplete="new-password" value="" required="" />
                        <button class="show-password-btn" type="button" data-action="show-password">Show</button>
                    </div>
                </div>
                
                <!-- Date of Birth -->
                <div class="mobile-form-group">
                    <label class="form-label mobile-only" for="billing_dob" style="display: none;">Date of Birth</label>
                    <input class="date-input" name="billing_dob" id="billing_dob" type="date" value="" placeholder="dd/mm/yyyy" />
                </div>
                
                <!-- Address -->
                <div class="mobile-form-group">
                    <label class="form-label mobile-only" for="billing_address_1" style="display: none;">Address</label>
                    <input class="form-input" name="billing_address_1" id="billing_address_1" type="text" value="" placeholder="Enter a location" autocomplete="street-address" />
                </div>
                
                <!-- Postal Code -->
                <div class="mobile-form-group">
                    <label class="form-label mobile-only" for="billing_postcode" style="display: none;">Postal Code</label>
                    <input class="form-input" name="billing_postcode" id="billing_postcode" type="text" value="" autocomplete="postal-code" />
                </div>
                
                <!-- City -->
                <div class="mobile-form-group">
                    <label class="form-label mobile-only" for="billing_city" style="display: none;">City</label>
                    <input class="form-input" name="billing_city" id="billing_city" type="text" value="" autocomplete="address-level2" />
                </div>
                
                <!-- Country -->
                <div class="mobile-form-group">
                    <label class="form-label mobile-only" for="billing_country" style="display: none;">Country</label>
                    <select class="select-input" name="billing_country" id="billing_country" autocomplete="country">
                        <option value="">Please select</option>
                        <option value="US">United States</option>
                        <option value="GB">United Kingdom</option>
                        <option value="CA">Canada</option>
                        <option value="AU">Australia</option>
                        <option value="DE">Germany</option>
                        <option value="FR">France</option>
                        <option value="IT">Italy</option>
                        <option value="ES">Spain</option>
                        <option value="PK">Pakistan</option>
                        <!-- Add more countries as needed -->
                    </select>
                </div>
                
                <!-- Phone -->
                <div class="mobile-form-group">
                    <label class="form-label mobile-only" for="billing_phone" style="display: none;">Phone</label>
                    <input class="form-input" name="billing_phone" id="billing_phone" type="tel" value="" placeholder="Example: +33061234567" autocomplete="tel" />
                </div>
                
                <!-- Privacy Checkbox -->
                <div class="checkbox-container">
                    <input type="checkbox" id="privacy_policy" name="privacy_policy" class="checkbox-input" required />
                    <label for="privacy_policy" class="checkbox-label">
                        Message concerning the confidentiality of customer data<br>
                        <em>In accordance with the provisions of the law n°78-17 of January 6, 1978, you have a right of access, of correction and opposition on the personal data concerning you.</em>
                    </label>
                </div>
                
                <!-- Newsletter Checkbox -->
<!--                 <div class="checkbox-container">
                    <input type="checkbox" id="newsletter" name="newsletter" class="checkbox-input" />
                    <label for="newsletter" class="checkbox-label">
                        Receive our newsletter<br>
                        <em>You can unsubscribe at any time. You will find our contact details in the site's terms of use.</em>
                    </label>
                </div> -->
                
                <button class="login-btn" type="submit" id="register-submit">
                    <span id="register-text">Register</span>
                    <span id="register-loading" style="display: none;">Creating account...</span>
                </button>
            </form>
        </div>
    </div>
</section>


<!-- // registratioon script -->
<script>
    // Set security nonce for registration
    document.getElementById('register_security').value = 'c07e5d3b20';
    
    // Show mobile labels on smaller screens (reuse login function)
    function handleResponsiveLabels() {
        const isMobile = window.innerWidth <= 768;
        const mobileLabels = document.querySelectorAll('.mobile-only');
        
        mobileLabels.forEach(label => {
            label.style.display = isMobile ? 'block' : 'none';
        });
    }
    
    // Run on load and resize
    window.addEventListener('load', handleResponsiveLabels);
    window.addEventListener('resize', handleResponsiveLabels);
    
    // Toggle password visibility for registration
    document.querySelector('.show-password-btn').addEventListener('click', function() {
        const passwordInput = document.querySelector('#reg_password');
        const btn = this;
        
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            btn.textContent = 'Hide';
        } else {
            passwordInput.type = 'password';
            btn.textContent = 'Show';
        }
    });

    // Handle registration form submission
    document.getElementById('wp-register-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const form = this;
        const formData = new FormData(form);
        const submitBtn = document.getElementById('register-submit');
        const registerText = document.getElementById('register-text');
        const registerLoading = document.getElementById('register-loading');
        
        // Basic validation
        if (!form.billing_first_name.value || !form.billing_last_name.value || 
            !form.email.value || !form.password.value) {
            showRegisterAlert('Please fill in all required fields.', 'error');
            return;
        }
        
        if (!form.privacy_policy.checked) {
            showRegisterAlert('Please accept the privacy policy.', 'error');
            return;
        }
        
        // Show loading state
        submitBtn.disabled = true;
        registerText.style.display = 'none';
        registerLoading.style.display = 'inline';
        
        // Send AJAX request to WordPress
        fetch('https://damyel.com/wp-admin/admin-ajax.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showRegisterAlert('Registration successful! Please check your email.', 'success');
                form.reset();
                // Optional: redirect to login or account page
                setTimeout(() => {
					//data.data.redirect_url ||
                    window.location.href =  '/user-dashboard';
                }, 2000);
            } else {
                showRegisterAlert(data.data.message || 'Registration failed. Please try again.', 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showRegisterAlert('An error occurred. Please try again.', 'error');
        })
        .finally(() => {
            // Reset button state
            submitBtn.disabled = false;
            registerText.style.display = 'inline';
            registerLoading.style.display = 'none';
        });
    });
    
    function showRegisterAlert(message, type) {
        const alert = document.getElementById('registerAlert');
        const alertMessage = document.getElementById('registerAlertMessage');
        
        alertMessage.textContent = message;
        alert.className = 'alert ' + type + ' show';
        
        // Auto-hide success messages
        if (type === 'success') {
            setTimeout(() => {
                alert.className = 'alert';
            }, 4000);
        }
    }
</script>




<!-- //login scrupt -->
<script>
    // Set security nonce (this should be set by WordPress)
    document.getElementById('security').value = '85032d8a2e';
    
    // Show mobile labels on smaller screens
    function handleResponsiveLabels() {
        const isMobile = window.innerWidth <= 768;
        const mobileLabels = document.querySelectorAll('.mobile-only');
        
        mobileLabels.forEach(label => {
            label.style.display = isMobile ? 'block' : 'none';
        });
    }
    
    // Run on load and resize
    window.addEventListener('load', handleResponsiveLabels);
    window.addEventListener('resize', handleResponsiveLabels);
    
    // Toggle password visibility
    document.querySelector('.show-password-btn').addEventListener('click', function() {
        const passwordInput = document.querySelector('.password-input');
        const btn = this;
        
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            btn.textContent = 'Hide';
        } else {
            passwordInput.type = 'password';
            btn.textContent = 'Show';
        }
    });

    // Handle form submission
    document.getElementById('wp-login-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const form = this;
        const username = form.username.value;
        const password = form.password.value;
        const security = form.security.value;
        const submitBtn = document.getElementById('login-submit');
        const loginText = document.getElementById('login-text');
        const loginLoading = document.getElementById('login-loading');
        
        // Validation
        if (!username || !password) {
            showAlert('Please fill in both username and password.', 'error');
            return;
        }
        
        // Show loading state
        submitBtn.disabled = true;
        loginText.style.display = 'none';
        loginLoading.style.display = 'inline';
         
		
        const formData = new FormData();
        formData.append('action', 'ajax_login');
        formData.append('username', username);
        formData.append('password', password);
        formData.append('security', security);
        
  
        fetch('https://damyel.com/wp-admin/admin-ajax.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('Login successful! Redirecting...', 'success');
                // Redirect after success
                setTimeout(() => {
					//data.data.redirect_url ||
                    window.location.href =  '/user-dashboard';
                }, 1500);
            } else {
                showAlert(data.data.message || 'Incorrect Credentials', 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('An error occurred. Please try again.', 'error');
        })
        .finally(() => {
            // Reset button state
            submitBtn.disabled = false;
            loginText.style.display = 'inline';
            loginLoading.style.display = 'none';
        });
    });
    
    function showAlert(message, type) {
        const alert = document.getElementById('loginAlert');
        const alertMessage = document.getElementById('alertMessage');
        
        alertMessage.textContent = message;
        alert.className = 'alert ' + type + ' show';
        
        // Auto-hide success messages
        if (type === 'success') {
            setTimeout(() => {
                alert.className = 'alert';
            }, 3000);
        }
    }
    
    // Check for URL parameters (for error messages)
    const urlParams = new URLSearchParams(window.location.search);
    const error = urlParams.get('login_error');
    if (error) {
        let message = 'Authentication failure';
        switch (error) {
            case 'empty_credentials':
                message = 'Please enter both username and password.';
                break;
            case 'invalid_username':
                message = 'Invalid username.';
                break;
            case 'incorrect_password':
                message = 'The password you entered is incorrect.';
                break;
            case 'too_many_retries':
                message = 'Too many login attempts. Please try again later.';
                break;
        }
        showAlert(message, 'error');
    }
</script>







<script>
document.addEventListener('DOMContentLoaded', function() {
    
  
    document.addEventListener('click', function(e) {
        if (e.target.matches('.create-account a')) {
            e.preventDefault();
            
            const loginForm = document.getElementById('login-form');
            const registrationForm = document.getElementById('registration-form');
            
            if (loginForm && registrationForm) {
                loginForm.classList.add('afb-hide');
                registrationForm.classList.remove('afb-hide');
            }
        }
    });
    
 
    document.addEventListener('click', function(e) {
        if (e.target.matches('.afb-login-tab') || e.target.closest('.afb-login-tab')) {
            e.preventDefault();
            
            const loginForm = document.getElementById('login-form');
            const registrationForm = document.getElementById('registration-form');
            
            if (loginForm && registrationForm) {
                registrationForm.classList.add('afb-hide');
                loginForm.classList.remove('afb-hide');
            }
        }
    });
     
		
    document.addEventListener('click', function(e) {
        if (e.target.matches('.reg-subtitle a')) {
            e.preventDefault();
            
            const loginForm = document.getElementById('login-form');
            const registrationForm = document.getElementById('registration-form');
            
            if (loginForm && registrationForm) {
                registrationForm.classList.add('afb-hide');
                loginForm.classList.remove('afb-hide');
            }
        }
    });
    
});
</script>
	{"id":5225,"date":"2025-08-17T17:09:42","date_gmt":"2025-08-17T15:09:42","guid":{"rendered":"https:\/\/damyel.com\/authentication-2\/"},"modified":"2025-08-20T16:39:42","modified_gmt":"2025-08-20T14:39:42","slug":"authentication-2","status":"publish","type":"page","link":"https:\/\/damyel.com\/en\/authentication-2\/","title":{"rendered":"Authentication"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-5225","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/damyel.com\/en\/wp-json\/wp\/v2\/pages\/5225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/damyel.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/damyel.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/damyel.com\/en\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/damyel.com\/en\/wp-json\/wp\/v2\/comments?post=5225"}],"version-history":[{"count":1,"href":"https:\/\/damyel.com\/en\/wp-json\/wp\/v2\/pages\/5225\/revisions"}],"predecessor-version":[{"id":5226,"href":"https:\/\/damyel.com\/en\/wp-json\/wp\/v2\/pages\/5225\/revisions\/5226"}],"wp:attachment":[{"href":"https:\/\/damyel.com\/en\/wp-json\/wp\/v2\/media?parent=5225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}