```






<script>
    document.addEventListener('DOMContentLoaded', function () {

        /*
        |--------------------------------------------------------------------------
        | CSRF Configuration
        |--------------------------------------------------------------------------
        */

        const csrfToken = document.querySelector(
            'meta[name="csrf-token"]'
        )?.getAttribute('content') || "9TjjgRK32F5nG3gl7fuujIQZNfnA42ZE0XnpTsQb";


        /*
        |--------------------------------------------------------------------------
        | Utilities
        |--------------------------------------------------------------------------
        */

        function debounce(callback, delay = 500) {
            let timer;
            return function (...args) {
                clearTimeout(timer);
                timer = setTimeout(() => {
                    callback.apply(this, args);
                }, delay);
            };
        }

        function setFieldMessage(element, message, type) {
            if (!element) return;
            element.textContent = message || '';
            element.classList.remove('is-visible', 'is-error', 'is-success');
            if (message) {
                element.classList.add('is-visible', type === 'success' ? 'is-success' : 'is-error');
            }
        }

        function setCheckStatus(element, message, type) {
            if (!element) return;
            element.textContent = message || '';
            element.classList.remove('is-visible', 'checking', 'success', 'error');
            if (message) {
                element.classList.add('is-visible', type);
            }
        }

        function normalizeAadhaar(value) {
            let digits = value.replace(/\D/g, '').substring(0, 12);
            let parts = [];
            for (let i = 0; i < digits.length; i += 4) {
                parts.push(digits.substring(i, i + 4));
            }
            return parts.join('-');
        }

        function normalizePassport(value) {
            return value
                .replace(/\s+/g, '')
                .toUpperCase()
                .replace(/[^A-Z0-9]/g, '');
        }

        async function postJson(url, data) {
            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify(data)
            });

            let payload = {};
            try {
                payload = await response.json();
            } catch (error) {
                payload = {};
            }

            return {
                ok: response.ok,
                status: response.status,
                data: payload
            };
        }

        function setSectionLock(container, shouldLock) {
            if (!container) return;
            const elements = container.querySelectorAll('input, select, textarea, button');
            elements.forEach(function (el) {
                el.disabled = shouldLock;
            });
            if (shouldLock) {
                container.classList.add('ycams-is-hidden');
            } else {
                container.classList.remove('ycams-is-hidden');
            }
        }


        /*
        |--------------------------------------------------------------------------
        | Start Again Handler
        |--------------------------------------------------------------------------
        */

        const resetModal = document.getElementById('registration-reset-modal');
        const resetConfirmBtn = document.getElementById('registration-reset-confirm');
        const resetCancelBtn = document.getElementById('registration-reset-cancel');

        function submitRegistrationReset() {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = "https:\/\/mail.youngsterschessacademy.com\/register\/reset";

            const token = document.createElement('input');
            token.type = 'hidden';
            token.name = '_token';
            token.value = csrfToken;

            form.appendChild(token);
            document.body.appendChild(form);
            form.submit();
        }

        document
            .querySelectorAll('[data-registration-reset]')
            .forEach(function (button) {
                button.addEventListener('click', function () {
                    if (!resetModal) {
                        submitRegistrationReset();
                        return;
                    }

                    resetModal.classList.remove('ycams-is-hidden');
                    resetCancelBtn?.focus();
                });
            });

        resetCancelBtn?.addEventListener('click', function () {
            resetModal?.classList.add('ycams-is-hidden');
        });

        resetConfirmBtn?.addEventListener('click', function () {
            submitRegistrationReset();
        });

        resetModal?.addEventListener('click', function (event) {
            if (event.target === resetModal) {
                resetModal.classList.add('ycams-is-hidden');
            }
        });


        /*
        |--------------------------------------------------------------------------
        | Password Show / Hide Handler
        |--------------------------------------------------------------------------
        */

        document
            .querySelectorAll('[data-password-toggle]')
            .forEach(function (button) {
                button.addEventListener('click', function () {
                    const input = document.getElementById(button.dataset.passwordToggle);
                    if (!input) return;

                    if (input.type === 'password') {
                        input.type = 'text';
                        button.textContent = 'Hide';
                    } else {
                        input.type = 'password';
                        button.textContent = 'Show';
                    }
                });
            });


        /*
        |--------------------------------------------------------------------------
        | STEP 1: PARENT REGISTRATION CONTROLLER
        |--------------------------------------------------------------------------
        */

        const parentForm = document.getElementById('parent-registration-form');

        if (parentForm) {

            const country = document.getElementById('parent_country_id');
            const identity = document.getElementById('parent_identity_number');
            const identityLabel = document.getElementById('parent-identity-label');
            const identityTip = document.getElementById('parent-identity-tip');
            const identityStatus = document.getElementById('parent-identity-status');
            const identityError = document.getElementById('parent-identity-error');
            const extendedFields = document.getElementById('parent-extended-fields');

            const email = document.getElementById('parent_email');
            const emailStatus = document.getElementById('parent-email-status');
            const emailError = document.getElementById('parent-email-error');
            const phoneCode = document.getElementById('parent-phone-code');
            const relationshipInputs = parentForm.querySelectorAll('input[name="parent_relationship"]');
            const gender = document.getElementById('parent_gender');
            const parentName = document.getElementById('parent_name');
            const mobile = document.getElementById('parent_mobile_number');
            const dob = document.getElementById('parent_date_of_birth');
            const password = document.getElementById('parent_password');
            const confirmation = document.getElementById('parent_password_confirmation');
            const passwordMatch = document.getElementById('parent-password-match');
            const nextButton = document.getElementById('parent-next');

            // Modal elements
            const modal = document.getElementById('existing-parent-modal');
            const modalMsg = document.getElementById('existing-parent-msg');
            const modalConfirmBtn = document.getElementById('modal-confirm-btn');
            const modalCancelBtn = document.getElementById('modal-cancel-btn');

            let identityVerified = false;
            let emailVerified = false;
            let identityRequestVersion = 0;
            let emailRequestVersion = 0;
            let existingParentDetected = false;

            function resetParentState() {
                identityVerified = false;
                emailVerified = false;
                existingParentDetected = false;
                setSectionLock(extendedFields, true);
                setCheckStatus(identityStatus, '', '');
                setFieldMessage(identityError, '', '');
                setCheckStatus(emailStatus, '', '');
                setFieldMessage(emailError, '', '');
                if (modal) {
                    modal.classList.add('ycams-is-hidden');
                    modal.hidden = true;
                }
                updateParentNextButton();
            }

            function updateParentCountry() {
                const selected = country.options[country.selectedIndex];

                if (!selected || !selected.value) {
                    identityLabel.innerHTML = 'Identity Number <span class="ycams-required">*</span>';
                    identity.placeholder = 'Select country first';
                    identityTip.textContent = 'Select your country first.';
                    phoneCode.textContent = '+--';
                    identity.value = '';
                    resetParentState();
                    return;
                }

                const type = selected.dataset.identityType || '';
                const code = selected.dataset.phoneCode || '';

                if (type === 'AADHAAR') {
                    identityLabel.innerHTML = 'Aadhaar Number <span class="ycams-required">*</span>';
                    identity.placeholder = '1234-5678-9012';
                    identityTip.textContent = 'Enter the 12-digit Aadhaar number. Example: 1234-5678-9012.';
                } else {
                    identityLabel.innerHTML = 'Passport Number <span class="ycams-required">*</span>';
                    identity.placeholder = 'Example: A1234567';
                    identityTip.textContent = 'Passport numbers may contain letters and numbers only.';
                }

                phoneCode.textContent = code ? '+' + code.replace(/^\+/, '') : '+--';
                identity.value = '';
                resetParentState();
            }

            country.addEventListener('change', updateParentCountry);

            identity.addEventListener('input', function () {
                const selected = country.options[country.selectedIndex];
                const type = selected?.dataset.identityType || '';

                if (type === 'AADHAAR') {
                    identity.value = normalizeAadhaar(identity.value);
                } else {
                    identity.value = normalizePassport(identity.value);
                }

                resetParentState();
            });

            const checkParentIdentity = debounce(async function () {
                const selected = country.options[country.selectedIndex];
                const countryId = country.value;
                const identityValue = identity.value.trim();

                if (!countryId || !identityValue) {
                    resetParentState();
                    return;
                }

                const type = selected?.dataset.identityType || '';

                if (type === 'AADHAAR' && !/^\d{4}-\d{4}-\d{4}$/.test(identityValue)) {
                    identityVerified = false;
                    setSectionLock(extendedFields, true);
                    setCheckStatus(identityStatus, 'Enter Aadhaar in the format 1234-5678-9012.', 'error');
                    updateParentNextButton();
                    return;
                }

                if (type !== 'AADHAAR' && !/^[A-Z0-9]+$/.test(identityValue)) {
                    identityVerified = false;
                    setSectionLock(extendedFields, true);
                    setCheckStatus(identityStatus, 'Enter a valid passport number.', 'error');
                    updateParentNextButton();
                    return;
                }

                const requestVersion = ++identityRequestVersion;
                identityVerified = false;
                setCheckStatus(identityStatus, 'Checking identity number...', 'checking');

                const result = await postJson("https:\/\/mail.youngsterschessacademy.com\/register\/check-identity", {
                    type: 'parent',
                    country_id: countryId,
                    identity_number: identityValue
                });

                if (requestVersion !== identityRequestVersion) return;

                if (!result.ok) {
                    identityVerified = false;
                    setSectionLock(extendedFields, true);
                    setCheckStatus(
                        identityStatus,
                        result.data?.message || 'Identity verification could not be completed.',
                        'error'
                    );
                    updateParentNextButton();
                    return;
                }

                const data = result.data || {};

                if (data.status === 'available') {
                    identityVerified = true;
                    existingParentDetected = false;
                    setSectionLock(extendedFields, false);
                    setCheckStatus(identityStatus, 'Identity number is available.', 'success');
                    updateParentGender();
                } else if (data.status === 'existing_parent') {
                    const displayName = data.display_name || 'the existing Parent';
                    setSectionLock(extendedFields, true);
                    setCheckStatus(identityStatus, '', '');

                    modalMsg.textContent = `We found your existing family account registered under ${displayName}.`;
                    modal.classList.remove('ycams-is-hidden');
                    modal.hidden = false;

                    modalConfirmBtn.onclick = function () {
                        modal.classList.add('ycams-is-hidden');
                        modal.hidden = true;
                        existingParentDetected = true;
                        identityVerified = true;
                        setCheckStatus(identityStatus, 'Existing Parent verified. Proceeding to Student details...', 'success');
                        nextButton.disabled = false;
                        parentForm.submit();
                    };

                    modalCancelBtn.onclick = function () {
                        modal.classList.add('ycams-is-hidden');
                        modal.hidden = true;
                        identity.value = '';
                        resetParentState();
                        setCheckStatus(identityStatus, 'Please enter a different Parent identity number.', 'error');
                    };
                } else {
                    identityVerified = false;
                    setSectionLock(extendedFields, true);
                    setCheckStatus(identityStatus, data.message || 'This identity number is already registered.', 'error');
                }

                updateParentNextButton();
            }, 550);

            identity.addEventListener('blur', checkParentIdentity);

            email.addEventListener('input', function () {
                emailVerified = false;
                setCheckStatus(emailStatus, '', '');
                setFieldMessage(emailError, '', '');
                updateParentNextButton();
            });

            const checkParentEmail = debounce(async function () {
                const emailValue = email.value.trim();

                if (!emailValue) {
                    emailVerified = false;
                    updateParentNextButton();
                    return;
                }

                if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailValue)) {
                    emailVerified = false;
                    setCheckStatus(emailStatus, 'Enter a valid email address.', 'error');
                    updateParentNextButton();
                    return;
                }

                const requestVersion = ++emailRequestVersion;
                emailVerified = false;
                setCheckStatus(emailStatus, 'Checking email address...', 'checking');

                const result = await postJson("https:\/\/mail.youngsterschessacademy.com\/register\/check-email", {
                    type: 'parent',
                    email: emailValue,
                    country_id: country.value,
                    identity_number: identity.value.trim()
                });

                if (requestVersion !== emailRequestVersion) return;

                if (!result.ok) {
                    emailVerified = false;
                    setCheckStatus(emailStatus, result.data?.message || 'Email verification could not be completed.', 'error');
                    updateParentNextButton();
                    return;
                }

                const data = result.data || {};

                if (data.status === 'available' || data.status === 'existing_parent') {
                    emailVerified = true;
                    setCheckStatus(emailStatus, data.message || 'Email address is available.', 'success');
                } else {
                    emailVerified = false;
                    setCheckStatus(emailStatus, data.message || 'This email address is already registered.', 'error');
                }

                updateParentNextButton();
            }, 650);

            email.addEventListener('blur', checkParentEmail);

            function updateParentGender() {
                let relationship = '';
                relationshipInputs.forEach(function (input) {
                    if (input.checked) relationship = input.value;
                    input.closest('.ycams-radio-option')?.classList.toggle('is-selected', input.checked);
                });

                if (relationship === 'FATHER') {
                    gender.value = 'male';
                    gender.disabled = true;
                } else if (relationship === 'MOTHER') {
                    gender.value = 'female';
                    gender.disabled = true;
                } else {
                    gender.disabled = false;
                }
            }

            relationshipInputs.forEach(function (input) {
                input.addEventListener('change', function () {
                    updateParentGender();
                    updateParentNextButton();
                });
            });

            function updatePasswordRules(passwordValue, prefix) {
                const rules = {
                    length: passwordValue.length >= 8,
                    upper: /[A-Z]/.test(passwordValue),
                    lower: /[a-z]/.test(passwordValue),
                    number: /[0-9]/.test(passwordValue),
                    symbol: /[^A-Za-z0-9]/.test(passwordValue)
                };

                Object.entries(rules).forEach(function ([rule, valid]) {
                    document.querySelector(`[data-password-rule="${prefix}-${rule}"]`)?.classList.toggle('is-valid', valid);
                });

                return Object.values(rules).every(Boolean);
            }

            function updateParentPasswordMatch() {
                const passwordValue = password.value;
                const confirmationValue = confirmation.value;
                const valid = passwordValue.length >= 8 && passwordValue === confirmationValue;

                if (!confirmationValue) {
                    setFieldMessage(passwordMatch, '', '');
                    return false;
                }

                setFieldMessage(
                    passwordMatch,
                    valid ? 'Passwords match.' : 'Passwords do not match.',
                    valid ? 'success' : 'error'
                );

                return valid;
            }

            password.addEventListener('input', function () {
                if (!existingParentDetected) {
                    updatePasswordRules(password.value, 'parent');
                    updateParentPasswordMatch();
                }
                updateParentNextButton();
            });

            confirmation.addEventListener('input', function () {
                updateParentPasswordMatch();
                updateParentNextButton();
            });

            function updateParentNextButton() {
                if (existingParentDetected && identityVerified) {
                    nextButton.disabled = false;
                    return;
                }

                const relationship = parentForm.querySelector('input[name="parent_relationship"]:checked');
                const dobValid = !!dob.value && dob.value <= "2006-10-20";
                const genderValid = !!relationship && (relationship.value !== 'GUARDIAN' || !!gender.value);
                const nameValid = parentName.value.trim().length >= 2;
                const mobileValid = /^[0-9+\-\s().]{7,20}$/.test(mobile.value.trim());
                const passwordValid = updatePasswordRules(password.value, 'parent');
                const passwordsMatch = updateParentPasswordMatch();

                nextButton.disabled = !(
                    !!country.value &&
                    identity.value.trim() &&
                    identityVerified &&
                    nameValid &&
                    genderValid &&
                    !!email.value.trim() &&
                    emailVerified &&
                    mobileValid &&
                    dobValid &&
                    passwordValid &&
                    passwordsMatch
                );
            }

            [parentName, mobile, dob, gender].forEach(function (element) {
                element?.addEventListener('input', updateParentNextButton);
                element?.addEventListener('change', updateParentNextButton);
            });

            // Initial lock
            setSectionLock(extendedFields, true);
        }


        /*
        |--------------------------------------------------------------------------
        | STEP 2: STUDENT REGISTRATION CONTROLLER
        |--------------------------------------------------------------------------
        */

        const studentForm = document.getElementById('student-registration-form');

        if (studentForm) {

            const country = document.getElementById('student_country_id');
            const section = document.getElementById('student-section');
            const identity = document.getElementById('student_identity_number');
            const identityLabel = document.getElementById('student-identity-label');
            const identityTip = document.getElementById('student-identity-tip');
            const identityStatus = document.getElementById('student-identity-status');
            const identityError = document.getElementById('student-identity-error');
            const extendedFields = document.getElementById('student-extended-fields');

            const email = document.getElementById('student_email');
            const emailStatus = document.getElementById('student-email-status');
            const emailError = document.getElementById('student-email-error');
            const phoneCode = document.getElementById('student-phone-code');
            const name = document.getElementById('student_name');
            const gender = document.getElementById('student_gender');
            const mobile = document.getElementById('student_mobile_number');
            const dob = document.getElementById('student_date_of_birth');
            const password = document.getElementById('student_password');
            const confirmation = document.getElementById('student_password_confirmation');
            const passwordMatch = document.getElementById('student-password-match');
            const nextButton = document.getElementById('student-next');

            let identityVerified = false;
            let emailVerified = false;
            let identityRequestVersion = 0;
            let emailRequestVersion = 0;

            function resetStudentState() {
                identityVerified = false;
                emailVerified = false;
                setSectionLock(extendedFields, true);
                setCheckStatus(identityStatus, '', '');
                setFieldMessage(identityError, '', '');
                setCheckStatus(emailStatus, '', '');
                setFieldMessage(emailError, '', '');
                updateStudentNextButton();
            }

            function updateStudentCountry() {
                const selected = country.options[country.selectedIndex];

                if (!selected || !selected.value) {
                    if (section) section.dataset.country = '';
                    identityLabel.innerHTML = 'Identity Number <span class="ycams-required">*</span>';
                    identity.placeholder = 'Select country first';
                    identityTip.textContent = 'Select the student country first.';
                    phoneCode.textContent = '+--';
                    identity.value = '';
                    resetStudentState();
                    return;
                }

                const iso2 = selected.dataset.iso2 || '';
                const type = selected.dataset.identityType || '';
                const code = selected.dataset.phoneCode || '';

                if (section) section.dataset.country = iso2;

                if (type === 'AADHAAR') {
                    identityLabel.innerHTML = 'Aadhaar Number <span class="ycams-required">*</span>';
                    identity.placeholder = '1234-5678-9012';
                    identityTip.textContent = 'Enter the 12-digit Aadhaar number. Example: 1234-5678-9012.';
                } else {
                    identityLabel.innerHTML = 'Passport Number <span class="ycams-required">*</span>';
                    identity.placeholder = 'Example: A1234567';
                    identityTip.textContent = 'Passport numbers may contain letters and numbers only.';
                }

                phoneCode.textContent = code ? '+' + code.replace(/^\+/, '') : '+--';
                identity.value = '';
                resetStudentState();
            }

            country.addEventListener('change', updateStudentCountry);

            identity.addEventListener('input', function () {
                const selected = country.options[country.selectedIndex];
                const type = selected?.dataset.identityType || '';

                if (type === 'AADHAAR') {
                    identity.value = normalizeAadhaar(identity.value);
                } else {
                    identity.value = normalizePassport(identity.value);
                }

                resetStudentState();
            });

            const checkStudentIdentity = debounce(async function () {
                const selected = country.options[country.selectedIndex];
                const countryId = country.value;
                const identityValue = identity.value.trim();

                if (!countryId || !identityValue) {
                    resetStudentState();
                    return;
                }

                const type = selected?.dataset.identityType || '';

                if (type === 'AADHAAR' && !/^\d{4}-\d{4}-\d{4}$/.test(identityValue)) {
                    identityVerified = false;
                    setSectionLock(extendedFields, true);
                    setCheckStatus(identityStatus, 'Enter Aadhaar in the format 1234-5678-9012.', 'error');
                    updateStudentNextButton();
                    return;
                }

                if (type !== 'AADHAAR' && !/^[A-Z0-9]+$/.test(identityValue)) {
                    identityVerified = false;
                    setSectionLock(extendedFields, true);
                    setCheckStatus(identityStatus, 'Enter a valid passport number.', 'error');
                    updateStudentNextButton();
                    return;
                }

                const requestVersion = ++identityRequestVersion;
                identityVerified = false;
                setCheckStatus(identityStatus, 'Checking student identity...', 'checking');

                const result = await postJson("https:\/\/mail.youngsterschessacademy.com\/register\/check-identity", {
                    type: 'student',
                    country_id: countryId,
                    identity_number: identityValue
                });

                if (requestVersion !== identityRequestVersion) return;

                if (!result.ok) {
                    identityVerified = false;
                    setSectionLock(extendedFields, true);
                    setCheckStatus(
                        identityStatus,
                        result.data?.message || 'Identity verification could not be completed.',
                        'error'
                    );
                    updateStudentNextButton();
                    return;
                }

                const data = result.data || {};

                if (data.status === 'available') {
                    identityVerified = true;
                    setSectionLock(extendedFields, false);
                    setCheckStatus(identityStatus, 'Student identity number is available.', 'success');
                } else {
                    identityVerified = false;
                    setSectionLock(extendedFields, true);
                    setCheckStatus(identityStatus, data.message || 'This Student identity number is already registered.', 'error');
                }

                updateStudentNextButton();
            }, 550);

            identity.addEventListener('blur', checkStudentIdentity);

            email.addEventListener('input', function () {
                emailVerified = false;
                setCheckStatus(emailStatus, '', '');
                setFieldMessage(emailError, '', '');
                updateStudentNextButton();
            });

            const checkStudentEmail = debounce(async function () {
                const emailValue = email.value.trim();

                if (!emailValue) {
                    emailVerified = false;
                    updateStudentNextButton();
                    return;
                }

                if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailValue)) {
                    emailVerified = false;
                    setCheckStatus(emailStatus, 'Enter a valid email address.', 'error');
                    updateStudentNextButton();
                    return;
                }

                const parentEmail = "";

                if (parentEmail && parentEmail.toLowerCase() === emailValue.toLowerCase()) {
                    emailVerified = false;
                    setCheckStatus(emailStatus, 'Student email must be different from the Parent / Guardian email.', 'error');
                    updateStudentNextButton();
                    return;
                }

                const requestVersion = ++emailRequestVersion;
                emailVerified = false;
                setCheckStatus(emailStatus, 'Checking student email...', 'checking');

                const result = await postJson("https:\/\/mail.youngsterschessacademy.com\/register\/check-email", {
                    type: 'student',
                    email: emailValue
                });

                if (requestVersion !== emailRequestVersion) return;

                if (!result.ok) {
                    emailVerified = false;
                    setCheckStatus(emailStatus, result.data?.message || 'Email verification could not be completed.', 'error');
                    updateStudentNextButton();
                    return;
                }

                const data = result.data || {};

                if (data.status === 'available') {
                    emailVerified = true;
                    setCheckStatus(emailStatus, 'Student email is available.', 'success');
                } else {
                    emailVerified = false;
                    setCheckStatus(emailStatus, data.message || 'This email address is already registered.', 'error');
                }

                updateStudentNextButton();
            }, 650);

            email.addEventListener('blur', checkStudentEmail);

            function updateStudentPasswordRules() {
                const value = password.value;
                const rules = {
                    length: value.length >= 8,
                    upper: /[A-Z]/.test(value),
                    lower: /[a-z]/.test(value),
                    number: /[0-9]/.test(value),
                    symbol: /[^A-Za-z0-9]/.test(value)
                };

                Object.entries(rules).forEach(function ([rule, valid]) {
                    document.querySelector(`[data-password-rule="student-${rule}"]`)?.classList.toggle('is-valid', valid);
                });

                return Object.values(rules).every(Boolean);
            }

            function updateStudentPasswordMatch() {
                const passwordValue = password.value;
                const confirmationValue = confirmation.value;
                const valid = passwordValue.length >= 8 && passwordValue === confirmationValue;

                if (!confirmationValue) {
                    setFieldMessage(passwordMatch, '', '');
                    return false;
                }

                setFieldMessage(
                    passwordMatch,
                    valid ? 'Passwords match.' : 'Passwords do not match.',
                    valid ? 'success' : 'error'
                );

                return valid;
            }

            password.addEventListener('input', function () {
                updateStudentPasswordRules();
                updateStudentPasswordMatch();
                updateStudentNextButton();
            });

            confirmation.addEventListener('input', function () {
                updateStudentPasswordMatch();
                updateStudentNextButton();
            });

            function updateStudentNextButton() {
                const emailValue = email.value.trim();
                const parentEmail = "";
                const emailDifferent = !parentEmail || emailValue.toLowerCase() !== parentEmail.toLowerCase();
                const mobileValid = !mobile.value.trim() || /^[0-9+\-\s().]{7,20}$/.test(mobile.value.trim());
                const dobValid = !!dob.value && dob.value <= "2022-10-20";
                const passwordValid = updateStudentPasswordRules();
                const passwordsMatch = updateStudentPasswordMatch();

                nextButton.disabled = !(
                    !!country.value &&
                    identity.value.trim() &&
                    identityVerified &&
                    name.value.trim().length >= 2 &&
                    !!gender.value &&
                    !!emailValue &&
                    emailDifferent &&
                    emailVerified &&
                    mobileValid &&
                    dobValid &&
                    passwordValid &&
                    passwordsMatch
                );
            }

            [name, gender, mobile, dob].forEach(function (element) {
                element?.addEventListener('input', updateStudentNextButton);
                element?.addEventListener('change', updateStudentNextButton);
            });

            // Initial lock
            setSectionLock(extendedFields, true);
        }


        /*
        |--------------------------------------------------------------------------
        | STEP 3: VERIFICATION CONTROLLER
        |--------------------------------------------------------------------------
        */

        const verificationForm = document.getElementById('verification-form');

        if (verificationForm) {
            const terms = document.getElementById('registration-terms');
            const completeButton = document.getElementById('complete-registration');

            const parentSendOtp = document.getElementById('parent-send-otp');
            const parentResendOtp = document.getElementById('parent-resend-otp');
            const parentVerifyOtp = document.getElementById('parent-verify-otp');
            const parentOtp = document.getElementById('parent-otp');
            const parentOtpStatus = document.getElementById('parent-otp-status');
            const parentOtpTimer = document.getElementById('parent-otp-timer');
            const parentOtpToken = document.getElementById('parent-email-verification-token');

            const studentSendOtp = document.getElementById('student-send-otp');
            const studentResendOtp = document.getElementById('student-resend-otp');
            const studentVerifyOtp = document.getElementById('student-verify-otp');
            const studentOtp = document.getElementById('student-otp');
            const studentOtpStatus = document.getElementById('student-otp-status');
            const studentOtpTimer = document.getElementById('student-otp-timer');
            const studentOtpToken = document.getElementById('student-email-verification-token');

            const parentExists = false;
            const parentEmail = "";
            const studentEmail = "";

            const OTP_EXPIRY_SECONDS = 10 * 60;
            const OTP_RESEND_COOLDOWN_SECONDS = 60;

            let parentOtpVerified = parentExists;
            let studentOtpVerified = false;

            let parentOtpExpiresAt = null;
            let parentResendAvailableAt = null;
            let parentOtpTimerId = null;
            let parentResendTimerId = null;

            let studentOtpExpiresAt = null;
            let studentResendAvailableAt = null;
            let studentOtpTimerId = null;
            let studentResendTimerId = null;

            function setOtpStatus(element, message, type = 'info') {
                if (!element) return;
                element.textContent = message || '';
                element.className = 'ycams-otp-status ' + type;
            }

            function updateCompleteButton() {
                completeButton.disabled = !(
                    terms.checked &&
                    parentOtpVerified &&
                    studentOtpVerified
                );
            }

            function formatRemaining(seconds) {
                const minutes = Math.floor(seconds / 60);
                const remainder = seconds % 60;

                return String(minutes).padStart(2, '0') + ':' +
                    String(remainder).padStart(2, '0');
            }

            function stopOtpTimer(timerId) {
                if (timerId) {
                    window.clearInterval(timerId);
                }
            }

            function startOtpTimer({
                                       timerElement,
                                       resendButton,
                                       verifyButton,
                                       otpInput,
                                       setExpiry,
                                       setResendAvailable,
                                       setTimerId,
                                       setResendTimerId,
                                       getExpiry,
                                       getResendAvailable,
                                       getTimerId,
                                       getResendTimerId
                                   }) {
                stopOtpTimer(getTimerId());
                stopOtpTimer(getResendTimerId());

                const now = Date.now();
                const expiry = now + (OTP_EXPIRY_SECONDS * 1000);
                const resendAvailable = now + (OTP_RESEND_COOLDOWN_SECONDS * 1000);

                setExpiry(expiry);
                setResendAvailable(resendAvailable);

                timerElement?.classList.remove('is-expired');
                if (timerElement) {
                    timerElement.textContent = 'Code expires in ' +
                        formatRemaining(OTP_EXPIRY_SECONDS);
                }

                if (resendButton) {
                    resendButton.disabled = true;
                    resendButton.textContent = 'Resend in 60s';
                }

                if (verifyButton) {
                    verifyButton.disabled = !otpInput?.value.match(/^\d{6}$/);
                }

                const timerId = window.setInterval(function () {
                    const current = Date.now();
                    const remaining = Math.max(
                        0,
                        Math.ceil((getExpiry() - current) / 1000)
                    );

                    if (remaining <= 0) {
                        stopOtpTimer(getTimerId());
                        setTimerId(null);

                        if (timerElement) {
                            timerElement.textContent =
                                'This verification code has expired.';
                            timerElement.classList.add('is-expired');
                        }

                        if (verifyButton) {
                            verifyButton.disabled = true;
                        }

                        if (otpInput) {
                            otpInput.disabled = true;
                        }

                        if (resendButton && current >= getResendAvailable()) {
                            resendButton.disabled = false;
                            resendButton.textContent = 'Resend Code';
                        }

                        return;
                    }

                    if (timerElement) {
                        timerElement.textContent =
                            'Code expires in ' + formatRemaining(remaining);
                    }
                }, 1000);

                setTimerId(timerId);

                const resendTimerId = window.setInterval(function () {
                    const current = Date.now();
                    const remaining = Math.max(
                        0,
                        Math.ceil((getResendAvailable() - current) / 1000)
                    );

                    if (remaining <= 0) {
                        stopOtpTimer(getResendTimerId());
                        setResendTimerId(null);

                        if (resendButton) {
                            resendButton.disabled = false;
                            resendButton.textContent = 'Resend Code';
                        }

                        return;
                    }

                    if (resendButton) {
                        resendButton.disabled = true;
                        resendButton.textContent = 'Resend in ' + remaining + 's';
                    }
                }, 1000);

                setResendTimerId(resendTimerId);
            }

            function markOtpExpired({
                                        timerElement,
                                        resendButton,
                                        verifyButton,
                                        otpInput
                                    }) {
                if (timerElement) {
                    timerElement.textContent =
                        'This verification code has expired.';
                    timerElement.classList.add('is-expired');
                }

                if (verifyButton) {
                    verifyButton.disabled = true;
                }

                if (otpInput) {
                    otpInput.disabled = true;
                }

                if (resendButton && Date.now() >= (resendButton.dataset.availableAt || 0)) {
                    resendButton.disabled = false;
                    resendButton.textContent = 'Resend Code';
                }
            }

            async function sendOtp(
                email,
                purpose,
                sendButton,
                resendButton,
                statusElement,
                verifyButton,
                otpInput,
                timerElement,
                tokenElement,
                label
            ) {
                if (!email) {
                    setOtpStatus(
                        statusElement,
                        label + ' email address is missing.',
                        'error'
                    );
                    return;
                }

                sendButton.disabled = true;
                if (resendButton) {
                    resendButton.disabled = true;
                    resendButton.textContent = 'Sending...';
                }
                verifyButton.disabled = true;
                otpInput.disabled = true;
                otpInput.value = '';
                tokenElement.value = '';

                setOtpStatus(
                    statusElement,
                    'Sending verification code...',
                    'info'
                );

                const result = await postJson("https:\/\/mail.youngsterschessacademy.com\/verification\/email\/send", {
                    email: email,
                    purpose: purpose
                });

                if (!result.ok || !result.data?.success) {
                    sendButton.disabled = false;

                    if (resendButton) {
                        resendButton.disabled = false;
                        resendButton.textContent = 'Resend Code';
                    }

                    setOtpStatus(
                        statusElement,
                        result.data?.message ||
                        'The verification code could not be sent. Please try again.',
                        'error'
                    );
                    return;
                }

                tokenElement.value = result.data.reference_token || '';

                otpInput.disabled = false;
                verifyButton.disabled = true;

                if (resendButton) {
                    resendButton.dataset.availableAt =
                        String(Date.now() + (OTP_RESEND_COOLDOWN_SECONDS * 1000));
                }

                startOtpTimer({
                    timerElement: timerElement,
                    resendButton: resendButton,
                    verifyButton: verifyButton,
                    otpInput: otpInput,
                    setExpiry: function (value) {
                        if (purpose === 'REGISTRATION_PARENT') {
                            parentOtpExpiresAt = value;
                        } else {
                            studentOtpExpiresAt = value;
                        }
                    },
                    setResendAvailable: function (value) {
                        if (purpose === 'REGISTRATION_PARENT') {
                            parentResendAvailableAt = value;
                        } else {
                            studentResendAvailableAt = value;
                        }
                    },
                    setTimerId: function (value) {
                        if (purpose === 'REGISTRATION_PARENT') {
                            parentOtpTimerId = value;
                        } else {
                            studentOtpTimerId = value;
                        }
                    },
                    setResendTimerId: function (value) {
                        if (purpose === 'REGISTRATION_PARENT') {
                            parentResendTimerId = value;
                        } else {
                            studentResendTimerId = value;
                        }
                    },
                    getExpiry: function () {
                        return purpose === 'REGISTRATION_PARENT'
                            ? parentOtpExpiresAt
                            : studentOtpExpiresAt;
                    },
                    getResendAvailable: function () {
                        return purpose === 'REGISTRATION_PARENT'
                            ? parentResendAvailableAt
                            : studentResendAvailableAt;
                    },
                    getTimerId: function () {
                        return purpose === 'REGISTRATION_PARENT'
                            ? parentOtpTimerId
                            : studentOtpTimerId;
                    },
                    getResendTimerId: function () {
                        return purpose === 'REGISTRATION_PARENT'
                            ? parentResendTimerId
                            : studentResendTimerId;
                    }
                });

                setOtpStatus(
                    statusElement,
                    'Verification code sent. Please check the email inbox and enter the code.',
                    'info'
                );
            }

            async function verifyOtp(
                email,
                purpose,
                otpInput,
                verifyButton,
                sendButton,
                resendButton,
                statusElement,
                tokenElement,
                timerElement,
                label,
                onSuccess
            ) {
                const token = tokenElement.value.trim();
                const otp = otpInput.value.replace(/\D/g, '').substring(0, 6);
                otpInput.value = otp;

                if (!token) {
                    setOtpStatus(
                        statusElement,
                        'Please send a verification code first.',
                        'error'
                    );
                    return;
                }

                if (Date.now() >= (
                    purpose === 'REGISTRATION_PARENT'
                        ? parentOtpExpiresAt
                        : studentOtpExpiresAt
                )) {
                    markOtpExpired({
                        timerElement: timerElement,
                        resendButton: resendButton,
                        verifyButton: verifyButton,
                        otpInput: otpInput
                    });

                    setOtpStatus(
                        statusElement,
                        'This verification code has expired. Please resend a new code.',
                        'error'
                    );
                    return;
                }

                if (!/^\d{6}$/.test(otp)) {
                    setOtpStatus(
                        statusElement,
                        'Enter the 6-digit verification code.',
                        'error'
                    );
                    return;
                }

                verifyButton.disabled = true;

                setOtpStatus(statusElement, 'Verifying code...', 'info');

                const result = await postJson("https:\/\/mail.youngsterschessacademy.com\/verification\/email\/verify", {
                    email: email,
                    purpose: purpose,
                    reference_token: token,
                    otp: otp
                });

                if (!result.ok || !result.data?.success) {
                    const serverMessage =
                        result.data?.message ||
                        'The verification code is invalid or has expired.';

                    if (/expired/i.test(serverMessage)) {
                        markOtpExpired({
                            timerElement: timerElement,
                            resendButton: resendButton,
                            verifyButton: verifyButton,
                            otpInput: otpInput
                        });
                    } else {
                        verifyButton.disabled = false;
                    }

                    setOtpStatus(statusElement, serverMessage, 'error');
                    return;
                }

                tokenElement.value = result.data.reference_token || token;

                stopOtpTimer(
                    purpose === 'REGISTRATION_PARENT'
                        ? parentOtpTimerId
                        : studentOtpTimerId
                );

                stopOtpTimer(
                    purpose === 'REGISTRATION_PARENT'
                        ? parentResendTimerId
                        : studentResendTimerId
                );

                if (purpose === 'REGISTRATION_PARENT') {
                    parentOtpTimerId = null;
                    parentResendTimerId = null;
                } else {
                    studentOtpTimerId = null;
                    studentResendTimerId = null;
                }

                verifyButton.disabled = true;
                sendButton.disabled = true;

                if (resendButton) {
                    resendButton.disabled = true;
                }

                otpInput.disabled = true;

                if (timerElement) {
                    timerElement.classList.remove('is-expired');
                    timerElement.textContent = 'Email verified successfully.';
                }

                setOtpStatus(
                    statusElement,
                    label + ' email verified successfully.',
                    'success'
                );

                onSuccess();
            }

            if (parentSendOtp) {
                parentSendOtp.addEventListener('click', function () {
                    parentOtpVerified = false;
                    updateCompleteButton();

                    sendOtp(
                        parentEmail,
                        'REGISTRATION_PARENT',
                        parentSendOtp,
                        parentResendOtp,
                        parentOtpStatus,
                        parentVerifyOtp,
                        parentOtp,
                        parentOtpTimer,
                        parentOtpToken,
                        'Parent / Guardian'
                    );
                });
            }

            if (parentResendOtp) {
                parentResendOtp.addEventListener('click', function () {
                    parentOtpVerified = false;
                    updateCompleteButton();

                    sendOtp(
                        parentEmail,
                        'REGISTRATION_PARENT',
                        parentSendOtp,
                        parentResendOtp,
                        parentOtpStatus,
                        parentVerifyOtp,
                        parentOtp,
                        parentOtpTimer,
                        parentOtpToken,
                        'Parent / Guardian'
                    );
                });
            }

            if (parentVerifyOtp) {
                parentVerifyOtp.addEventListener('click', function () {
                    verifyOtp(
                        parentEmail,
                        'REGISTRATION_PARENT',
                        parentOtp,
                        parentVerifyOtp,
                        parentSendOtp,
                        parentResendOtp,
                        parentOtpStatus,
                        parentOtpToken,
                        parentOtpTimer,
                        'Parent / Guardian',
                        function () {
                            parentOtpVerified = true;
                            updateCompleteButton();
                        }
                    );
                });
            }

            if (parentOtp) {
                parentOtp.addEventListener('input', function () {
                    this.value = this.value.replace(/\D/g, '').substring(0, 6);

                    const isSixDigits = /^\d{6}$/.test(this.value);
                    const isExpired = parentOtpExpiresAt &&
                        Date.now() >= parentOtpExpiresAt;

                    parentVerifyOtp.disabled = !isSixDigits || isExpired;
                });
            }

            if (studentSendOtp) {
                studentSendOtp.addEventListener('click', function () {
                    studentOtpVerified = false;
                    updateCompleteButton();

                    sendOtp(
                        studentEmail,
                        'REGISTRATION_STUDENT',
                        studentSendOtp,
                        studentResendOtp,
                        studentOtpStatus,
                        studentVerifyOtp,
                        studentOtp,
                        studentOtpTimer,
                        studentOtpToken,
                        'Student'
                    );
                });
            }

            if (studentResendOtp) {
                studentResendOtp.addEventListener('click', function () {
                    studentOtpVerified = false;
                    updateCompleteButton();

                    sendOtp(
                        studentEmail,
                        'REGISTRATION_STUDENT',
                        studentSendOtp,
                        studentResendOtp,
                        studentOtpStatus,
                        studentVerifyOtp,
                        studentOtp,
                        studentOtpTimer,
                        studentOtpToken,
                        'Student'
                    );
                });
            }

            if (studentVerifyOtp) {
                studentVerifyOtp.addEventListener('click', function () {
                    verifyOtp(
                        studentEmail,
                        'REGISTRATION_STUDENT',
                        studentOtp,
                        studentVerifyOtp,
                        studentSendOtp,
                        studentResendOtp,
                        studentOtpStatus,
                        studentOtpToken,
                        studentOtpTimer,
                        'Student',
                        function () {
                            studentOtpVerified = true;
                            updateCompleteButton();
                        }
                    );
                });
            }

            if (studentOtp) {
                studentOtp.addEventListener('input', function () {
                    this.value = this.value.replace(/\D/g, '').substring(0, 6);

                    const isSixDigits = /^\d{6}$/.test(this.value);
                    const isExpired = studentOtpExpiresAt &&
                        Date.now() >= studentOtpExpiresAt;

                    studentVerifyOtp.disabled = !isSixDigits || isExpired;
                });
            }

            terms.addEventListener('change', updateCompleteButton);
            updateCompleteButton();
        }

    });
</script>

<!DOCTYPE html>

<!--
|--------------------------------------------------------------------------
| YCAMS - Youngsters Chess Academy Management System
|--------------------------------------------------------------------------
|
| File            : website.blade.php
| Module          : Public Website
| Sub Module      : Layout
| Purpose         : Master layout for all public website pages.
|
| Description     :
|   Master layout shared across all public website pages.
|
|   The layout is responsible for the global visual canvas of the
|   public website. Individual sections and cards are displayed
|   above this common background.
|
| Responsibilities:
|       - HTML Document Structure
|       - Global Website Background
|       - Asset Loading
|       - Website Top Bar
|       - Website Header
|       - Main Content Area
|       - Website Footer
|
| Child Views:
|       - website.home
|       - website.about
|       - website.programs
|       - website.coaches
|       - website.achievements
|       - website.events
|       - website.contact
|
| Author          : YCAMS Development Team
| Owner           : Youngsters Chess Academy
|
| Framework       : Laravel 13
|
| Version         : 0.3.0
| Created Date    : 29-Jul-2026
| Last Modified   : 15-Aug-2026
|
|--------------------------------------------------------------------------
|
| CHANGE LOG
|
| v0.3.0
| - Established the layout as the owner of the global website background.
| - Added a dedicated global background layer.
| - Added minimum viewport height.
| - Ensured website content remains above the global background.
| - Prepared layout for consistent floating section/card design.
|
| v0.2.0
| - Added reusable Top Bar.
| - Updated layout structure.
|
| v0.1.0
| - Initial master layout.
|
|--------------------------------------------------------------------------
-->


<html lang="en">


<head>

    <meta charset="utf-8">


    <meta
        name="viewport"
        content="width=device-width, initial-scale=1"
    >


    <meta
        name="description"
        content="Youngsters Chess Academy Management System"
    >


    <meta
        name="author"
        content="Youngsters Chess Academy"
    >


    <title>

        Registration | Youngsters Chess Academy
    </title>


    <link rel="preload" as="style" href="https://mail.youngsterschessacademy.com/build/assets/app-qpQvtpTg.css" /><link rel="modulepreload" as="script" href="https://mail.youngsterschessacademy.com/build/assets/app-CQZ41YpL.js" /><link rel="stylesheet" href="https://mail.youngsterschessacademy.com/build/assets/app-qpQvtpTg.css" /><script type="module" src="https://mail.youngsterschessacademy.com/build/assets/app-CQZ41YpL.js"></script>
</head>


<body
    class="min-h-screen bg-slate-100 text-slate-800 antialiased"
>


<!-- ==========================================================
     GLOBAL WEBSITE BACKGROUND
=========================================================== -->

<div
    class="pointer-events-none fixed inset-0 -z-10 bg-slate-100"
    aria-hidden="true"
></div>


<!-- ==========================================================
     WEBSITE TOP BAR
=========================================================== -->

<!--
|--------------------------------------------------------------------------
| YCAMS - Youngsters Chess Academy Management System
|--------------------------------------------------------------------------
|
| File            : topbar.blade.php
| Module          : Public Website
| Sub Module      : Top Bar
| Purpose         : Displays the website utility bar.
|
| Description     :
|   Displays social media links and academy contact information.
|
| Responsibilities:
|       - Social Media Links
|       - Contact Number
|       - Email Address
|
| Layout:
|       - All utility information aligned to the right.
|
| Icons:
|       - Inline SVG icons.
|       - No dependency on external icon libraries.
|
| Author          : YCAMS Development Team
| Owner           : Youngsters Chess Academy
|
| Framework       : Laravel 13
|
| Version         : 0.4.0
| Created Date    : 29-Jul-2026
| Last Modified   : 14-Aug-2026
|
|--------------------------------------------------------------------------
|
| CHANGE LOG
|
| v0.4.0
| - Moved social media icons to the right side.
| - Grouped social media and contact information together.
| - Replaced Lucide phone icon with inline SVG.
| - Replaced Lucide mail icon with inline SVG.
| - Removed dependency on Lucide for Top Bar icons.
|
| v0.3.0
| - Moved social media exclusively to the top bar.
| - Replaced Lucide brand icons with inline SVG brand icons.
| - Restored phone and email information on the right.
|
|--------------------------------------------------------------------------
-->

<!-- ==========================================================
     WEBSITE TOP BAR
=========================================================== -->

<div
    class="fixed inset-x-0 top-0 z-50 h-10 bg-green-700 text-white shadow-sm"
>

    <div
        class="mx-auto flex h-full max-w-7xl items-center justify-end px-8 text-xs"
    >

        <!-- ======================================================
             RIGHT SIDE UTILITY INFORMATION
        ======================================================= -->

        <div
            class="flex items-center gap-5"
        >


            <!-- ==================================================
                 SOCIAL MEDIA
            =================================================== -->

            <div
                class="flex items-center gap-4"
            >

                

                <a
                    href="#"
                    title="Facebook"
                    aria-label="Facebook"
                    class="transition-all duration-300 hover:text-red-300"
                >

                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="currentColor"
                        class="h-4 w-4"
                        aria-hidden="true"
                    >

                        <path
                            d="M13.5 22v-8h2.7l.4-3h-3.1V9.1c0-.9.3-1.5 1.6-1.5h1.7V5c-.3 0-1.3-.1-2.4-.1-2.4 0-4 1.5-4 4.1V11H8v3h2.4v8h3.1z"
                        />

                    </svg>

                </a>


                

                <a
                    href="#"
                    title="Instagram"
                    aria-label="Instagram"
                    class="transition-all duration-300 hover:text-red-300"
                >

                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        class="h-4 w-4"
                        aria-hidden="true"
                    >

                        <rect
                            x="3"
                            y="3"
                            width="18"
                            height="18"
                            rx="5"
                        />

                        <circle
                            cx="12"
                            cy="12"
                            r="4"
                        />

                        <circle
                            cx="17.5"
                            cy="6.5"
                            r="1"
                            fill="currentColor"
                            stroke="none"
                        />

                    </svg>

                </a>


                

                <a
                    href="#"
                    title="YouTube"
                    aria-label="YouTube"
                    class="transition-all duration-300 hover:text-red-300"
                >

                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="currentColor"
                        class="h-4 w-4"
                        aria-hidden="true"
                    >

                        <path
                            d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z"
                        />

                    </svg>

                </a>


                

                <a
                    href="#"
                    title="LinkedIn"
                    aria-label="LinkedIn"
                    class="transition-all duration-300 hover:text-red-300"
                >

                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="currentColor"
                        class="h-4 w-4"
                        aria-hidden="true"
                    >

                        <path
                            d="M6.5 8.5A1.75 1.75 0 1 1 6.5 5a1.75 1.75 0 0 1 0 3.5zM5 10h3v9H5v-9zm5 0h2.9v1.2h.1c.4-.8 1.4-1.6 2.9-1.6 3.1 0 3.7 2 3.7 4.6V19h-3v-4.3c0-1 0-2.4-1.5-2.4s-1.7 1.1-1.7 2.3V19h-3v-9z"
                        />

                    </svg>

                </a>

            </div>


            <!-- ==================================================
                 SEPARATOR
            =================================================== -->

            <span
                class="h-4 w-px bg-white/30"
                aria-hidden="true"
            ></span>


            <!-- ==================================================
                 PHONE
            =================================================== -->

            <a
                href="tel:+918072805827"
                class="flex items-center gap-2 transition-all duration-300 hover:text-red-300"
            >

                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    class="h-4 w-4"
                    aria-hidden="true"
                >

                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M22 16.92v3a2 2 0 0 1-2.18 2
                        19.79 19.79 0 0 1-8.63-3.07
                        19.5 19.5 0 0 1-6-6
                        A19.79 19.79 0 0 1 2.12 4.18
                        2 2 0 0 1 4.11 2h3
                        a2 2 0 0 1 2 1.72
                        12.84 12.84 0 0 0 .7 2.81
                        2 2 0 0 1-.45 2.11L8.09 9.91
                        a16 16 0 0 0 6 6l1.27-1.27
                        a2 2 0 0 1 2.11-.45
                        12.84 12.84 0 0 0 2.81.7
                        A2 2 0 0 1 22 16.92z"
                    />

                </svg>

                <span>
                    +91 8072805827
                </span>

            </a>


            <!-- ==================================================
                 EMAIL
            =================================================== -->

            <a
                href="mailto:info@youngsterschessacademy.com"
                class="flex items-center gap-2 transition-all duration-300 hover:text-red-300"
            >

                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    class="h-4 w-4"
                    aria-hidden="true"
                >

                    <rect
                        x="3"
                        y="5"
                        width="18"
                        height="14"
                        rx="2"
                    />

                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="m3 7 9 6 9-6"
                    />

                </svg>

                <span>
                    info@youngsterschessacademy.com
                </span>

            </a>


        </div>

    </div>

</div>


<!-- ==========================================================
         WEBSITE HEADER
    =========================================================== -->

<!--
|--------------------------------------------------------------------------
| YCAMS - Youngsters Chess Academy Management System
|--------------------------------------------------------------------------
|
| File            : header.blade.php
| Module          : Public Website
| Sub Module      : Header
| Purpose         : Displays the website header.
|
| Description     :
|   Shared public website header containing:
|
|       - Academy Logo
|       - Primary Navigation
|       - Make Your First Move CTA
|       - Welcome Back CTA
|       - Responsive Mobile Navigation
|
|   Desktop layout stretches across the full viewport width while the
|   inner content is aligned to match the content wrapper below.
|
|   Desktop geometry:
|
|       Logo | Flexible Navigation Area | CTA Group
|
|   The logo and CTA group establish the two fixed horizontal
|   boundaries. The navigation is centred only inside the space
|   between those two boundaries.
|
| Author          : YCAMS Development Team
| Owner            : Youngsters Chess Academy
|
| Framework       : Laravel 13
| PHP             : 8.3+
|
| Version         : 1.2.0
| Created Date    : 29-Jul-2026
| Last Modified   : 03-Sep-2026
|
|--------------------------------------------------------------------------
|
| CHANGE LOG
|
| v1.2.0
| - Restored full-width edge-to-edge layout on header bar (removed rounded outer box).
| - Constrained inner header content to standard content wrapper (max-w-7xl px-4 sm:px-6 lg:px-8) so logo and buttons align directly with the content box below.
| - Preserved desktop grid structure (280px / 1fr / 405px).
| - Preserved mobile navigation and toggle behavior.
|
| v1.1.0
| - Constrained header boundaries to align directly with the content wrapper below.
| - Replaced full-width fixed bleeding (inset-x-0) with a centered max-w-7xl floating wrapper.
| - Added matching container padding and rounded corner aesthetics.
| - Preserved desktop grid structure (280px / 1fr / 405px).
| - Preserved mobile navigation and toggle behavior.
|
| v1.0.0
| - Aligned the main header to the common 1520px website wrapper.
| - Logo is anchored to the left edge of the wrapper.
| - CTA group is anchored to the right edge of the wrapper.
| - Navigation is centred only within the space between logo and CTA.
| - Removed independent navigation flex expansion.
| - Removed independent navigation centering across the full header.
| - Removed duplicate desktop/mobile navigation rendering.
| - Preserved responsive mobile navigation.
| - Preserved Academy dropdown navigation.
| - Preserved existing logo and CTA destinations.
|
|--------------------------------------------------------------------------
-->


<!-- ==========================================================
     WEBSITE HEADER (FULL WIDTH STRETCH)
=========================================================== -->

<header
    class="fixed inset-x-0 top-10 z-50 border-b border-slate-200/80 bg-white/90 shadow-sm backdrop-blur-md"
>


    <!-- ======================================================
         INNER CONTAINER
         Constrained to match the content card wrapper below.
    ======================================================= -->

    <div
        class="relative mx-auto flex h-20 w-full max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8 xl:h-24"
    >


        <!-- ==================================================
             DESKTOP HEADER STRUCTURE

             Three controlled regions:

                 1. Logo       = 280px
                 2. Navigation = remaining space
                 3. CTA        = 405px

             Therefore the navigation can never influence
             the position of the logo or CTA group.
        =================================================== -->

        <div
            class="hidden w-full items-center xl:grid xl:grid-cols-[280px_minmax(0,1fr)_405px]"
        >


            <!-- ==================================================
                 LEFT BOUNDARY: ACADEMY LOGO
            =================================================== -->

            <div
                class="flex h-full min-w-0 items-center"
            >

                <a
                    href="https://mail.youngsterschessacademy.com"
                    class="flex shrink-0 items-center"
                >

                    <img
                        src="https://mail.youngsterschessacademy.com/assets/images/branding/academy-logo.png"
                        alt="Youngsters Chess Academy"
                        class="h-16 w-auto object-contain transition-transform duration-300 hover:scale-105"
                    >

                </a>

            </div>


            <!-- ==================================================
                 MIDDLE NAVIGATION REGION
            =================================================== -->

            <div
                class="flex min-w-0 items-center justify-center"
            >

                <!--
|--------------------------------------------------------------------------
| YCAMS - Youngsters Chess Academy Management System
|--------------------------------------------------------------------------
|
| File            : navigation.blade.php
| Module          : Public Website
| Sub Module      : Navigation
| Purpose         : Primary Website Navigation Menu
|
| Description     :
|   Displays the primary website navigation.
|
|   Primary Navigation:
|
|       Home
|       About Us
|       Academy
|           - Programs
|           - Coaches
|           - Achievements
|       Events
|       FAQ
|       Contact
|
|   Academy provides a responsive dropdown/submenu.
|
| Author          : YCAMS Development Team
| Owner            : Youngsters Chess Academy
|
| Framework       : Laravel 13
| PHP             : 8.3+
|
| Version         : 1.2.0
| Created Date    : 29-Jul-2026
| Last Modified   : 03-Sep-2026
|
|--------------------------------------------------------------------------
|
| CHANGE LOG
|
| v1.2.0
| - Optimized desktop navigation spacing and padding to fit comfortably inside content wrapper.
| - Maintained strict flex shrink limits to prevent overflowing the middle grid zone.
| - Preserved Academy dropdown functionality, pointer delay, and keyboard accessibility.
|
| v1.1.0
| - Simplified navigation partial to contain navigation only.
| - Preserved Academy dropdown.
| - Removed unnecessary header-level positioning from navigation.
| - Preserved desktop single-line navigation.
| - Preserved mobile vertical navigation.
| - Improved Academy submenu pointer path.
| - Removed submenu vertical gap.
| - Preserved keyboard accessibility.
| - Preserved all existing routes.
|
| v1.0.0
| - Finalized Academy dropdown navigation.
|
|--------------------------------------------------------------------------
-->


<!-- ==========================================================
     PRIMARY NAVIGATION
=========================================================== -->

<nav
    aria-label="Primary navigation"
    class="w-auto max-w-full"
>

    <ul
        class="flex flex-col gap-1 text-base font-medium xl:flex-row xl:items-center xl:gap-0 xl:text-sm"
    >


        <!-- ==================================================
             HOME
        =================================================== -->

        <li>

            <a
                href="https://mail.youngsterschessacademy.com"
                class="block whitespace-nowrap rounded-lg border-b-2 border-transparent px-4 py-3 transition-all duration-300
                xl:rounded-none xl:px-3 xl:py-1
                text-slate-700 hover:bg-green-50 hover:text-green-700 hover:border-red-600"
            >
                Home
            </a>

        </li>


        <!-- ==================================================
             ABOUT US
        =================================================== -->

        <li>

            <a
                href="https://mail.youngsterschessacademy.com/about"
                class="block whitespace-nowrap rounded-lg border-b-2 border-transparent px-4 py-3 transition-all duration-300
                xl:rounded-none xl:px-3 xl:py-1
                text-slate-700 hover:bg-green-50 hover:text-green-700 hover:border-red-600"
            >
                About Us
            </a>

        </li>


        <!-- ==================================================
             ACADEMY
        =================================================== -->

        

        <li
            id="academy-navigation-item"
            class="relative"
        >


            <!-- ==================================================
                 ACADEMY TOGGLE
            =================================================== -->

            <button
                type="button"
                id="academy-navigation-toggle"
                aria-expanded="false"
                aria-haspopup="true"
                aria-controls="academy-navigation-menu"
                class="flex w-full items-center justify-between whitespace-nowrap rounded-lg border-b-2 border-transparent px-4 py-3 text-left transition-all duration-300
                xl:w-auto xl:justify-center xl:gap-1 xl:rounded-none xl:px-3 xl:py-1
                text-slate-700 hover:bg-green-50 hover:text-green-700 hover:border-red-600"
            >

                <span>
                    Academy
                </span>


                <!-- ==================================================
                     DOWN ARROW
                =================================================== -->

                <svg
                    id="academy-navigation-arrow"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="2"
                    stroke="currentColor"
                    class="h-4 w-4 shrink-0 transition-transform duration-200"
                    aria-hidden="true"
                >

                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="m6 9 6 6 6-6"
                    />

                </svg>

            </button>


            <!-- ==================================================
                 ACADEMY SUBMENU
            =================================================== -->

            <div
                id="academy-navigation-menu"
                class="hidden overflow-hidden rounded-lg border border-slate-200 bg-white shadow-xl
                xl:absolute xl:left-0 xl:top-full xl:z-[100] xl:w-52 xl:overflow-visible"
            >

                <div
                    class="py-2"
                >


                    <!-- ==================================================
                         PROGRAMS
                    =================================================== -->

                    <a
                        href="https://mail.youngsterschessacademy.com/programs"
                        class="block whitespace-nowrap px-5 py-3 text-sm transition-all duration-200
                        text-slate-700 hover:bg-green-50 hover:text-green-700"
                    >
                        Programs
                    </a>


                    <!-- ==================================================
                         COACHES
                    =================================================== -->

                    <a
                        href="https://mail.youngsterschessacademy.com/coaches"
                        class="block whitespace-nowrap px-5 py-3 text-sm transition-all duration-200
                        text-slate-700 hover:bg-green-50 hover:text-green-700"
                    >
                        Coaches
                    </a>


                    <!-- ==================================================
                         ACHIEVEMENTS
                    =================================================== -->

                    <a
                        href="https://mail.youngsterschessacademy.com/achievements"
                        class="block whitespace-nowrap px-5 py-3 text-sm transition-all duration-200
                        text-slate-700 hover:bg-green-50 hover:text-green-700"
                    >
                        Achievements
                    </a>

                </div>

            </div>

        </li>


        <!-- ==================================================
             EVENTS
        =================================================== -->

        <li>

            <a
                href="https://mail.youngsterschessacademy.com/events"
                class="block whitespace-nowrap rounded-lg border-b-2 border-transparent px-4 py-3 transition-all duration-300
                xl:rounded-none xl:px-3 xl:py-1
                text-slate-700 hover:bg-green-50 hover:text-green-700 hover:border-red-600"
            >
                Events
            </a>

        </li>


        <!-- ==================================================
             FAQ
        =================================================== -->

        <li>

            <a
                href="https://mail.youngsterschessacademy.com/faq"
                class="block whitespace-nowrap rounded-lg border-b-2 border-transparent px-4 py-3 transition-all duration-300
                xl:rounded-none xl:px-3 xl:py-1
                text-slate-700 hover:bg-green-50 hover:text-green-700 hover:border-red-600"
            >
                FAQ
            </a>

        </li>


        <!-- ==================================================
             CONTACT
        =================================================== -->

        <li>

            <a
                href="https://mail.youngsterschessacademy.com/contact"
                class="block whitespace-nowrap rounded-lg border-b-2 border-transparent px-4 py-3 transition-all duration-300
                xl:rounded-none xl:px-3 xl:py-1
                text-slate-700 hover:bg-green-50 hover:text-green-700 hover:border-red-600"
            >
                Contact
            </a>

        </li>

    </ul>

</nav>


<!-- ==========================================================
     ACADEMY DROPDOWN SCRIPT
=========================================================== -->

<script>

    document.addEventListener('DOMContentLoaded', function () {

        const academyItem =
            document.getElementById('academy-navigation-item');

        const academyToggle =
            document.getElementById('academy-navigation-toggle');

        const academyMenu =
            document.getElementById('academy-navigation-menu');

        const academyArrow =
            document.getElementById('academy-navigation-arrow');


        if (
            !academyItem ||
            !academyToggle ||
            !academyMenu ||
            !academyArrow
        ) {
            return;
        }


        const desktopBreakpoint = 1280;

        let closeTimer = null;


        /* ======================================================
           CANCEL CLOSE
        ======================================================= */

        function cancelClose() {

            if (closeTimer !== null) {

                clearTimeout(closeTimer);

                closeTimer = null;

            }

        }


        /* ======================================================
           OPEN MENU
        ======================================================= */

        function openMenu() {

            cancelClose();

            academyMenu.classList.remove('hidden');

            academyToggle.setAttribute(
                'aria-expanded',
                'true'
            );

            academyArrow.classList.add(
                'rotate-180'
            );

        }


        /* ======================================================
           CLOSE MENU
        ======================================================= */

        function closeMenu() {

            cancelClose();

            academyMenu.classList.add('hidden');

            academyToggle.setAttribute(
                'aria-expanded',
                'false'
            );

            academyArrow.classList.remove(
                'rotate-180'
            );

        }


        /* ======================================================
           DELAYED CLOSE
        ======================================================= */

        function scheduleClose() {

            cancelClose();

            closeTimer = setTimeout(
                function () {

                    closeMenu();

                },
                220
            );

        }


        /* ======================================================
           BUTTON CLICK
        ======================================================= */

        academyToggle.addEventListener(
            'click',
            function (event) {

                event.preventDefault();

                event.stopPropagation();


                const isOpen =
                    academyToggle.getAttribute('aria-expanded') === 'true';


                if (isOpen) {

                    closeMenu();

                } else {

                    openMenu();

                }

            }
        );


        /* ======================================================
           DESKTOP POINTER ENTER
        ======================================================= */

        academyItem.addEventListener(
            'mouseenter',
            function () {

                if (
                    window.innerWidth >= desktopBreakpoint
                ) {

                    openMenu();

                }

            }
        );


        /* ======================================================
           DESKTOP POINTER LEAVE
        ======================================================= */

        academyItem.addEventListener(
            'mouseleave',
            function () {

                if (
                    window.innerWidth >= desktopBreakpoint
                ) {

                    scheduleClose();

                }

            }
        );


        /* ======================================================
           SUBMENU ENTER
        ======================================================= */

        academyMenu.addEventListener(
            'mouseenter',
            function () {

                if (
                    window.innerWidth >= desktopBreakpoint
                ) {

                    openMenu();

                }

            }
        );


        /* ======================================================
           SUBMENU LEAVE
        ======================================================= */

        academyMenu.addEventListener(
            'mouseleave',
            function () {

                if (
                    window.innerWidth >= desktopBreakpoint
                ) {

                    scheduleClose();

                }

            }
        );


        /* ======================================================
           KEYBOARD ACCESS
        ======================================================= */

        academyToggle.addEventListener(
            'keydown',
            function (event) {

                if (
                    event.key === 'ArrowDown' ||
                    event.key === 'Enter' ||
                    event.key === ' '
                ) {

                    event.preventDefault();

                    openMenu();


                    const firstLink =
                        academyMenu.querySelector('a');


                    if (firstLink) {

                        firstLink.focus();

                    }

                }


                if (
                    event.key === 'Escape'
                ) {

                    closeMenu();

                    academyToggle.focus();

                }

            }
        );


        /* ======================================================
           ESCAPE FROM SUBMENU
        ======================================================= */

        academyMenu.addEventListener(
            'keydown',
            function (event) {

                if (
                    event.key === 'Escape'
                ) {

                    closeMenu();

                    academyToggle.focus();

                }

            }
        );


        /* ======================================================
           CLOSE OUTSIDE
        ======================================================= */

        document.addEventListener(
            'click',
            function (event) {

                if (
                    !academyItem.contains(event.target)
                ) {

                    closeMenu();

                }

            }
        );


        /* ======================================================
           RESET WHEN RESIZING
        ======================================================= */

        window.addEventListener(
            'resize',
            function () {

                cancelClose();

                closeMenu();

            }
        );

    });

</script>

            </div>


            <!-- ==================================================
                 RIGHT BOUNDARY: DESKTOP CTA GROUP
            =================================================== -->

            <div
                class="flex items-center justify-end gap-3"
            >


                <!-- ==========================================
                     MAKE YOUR FIRST MOVE
                =========================================== -->

                <a
                    href="https://mail.youngsterschessacademy.com/register"
                    class="whitespace-nowrap rounded-lg bg-green-700 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition-all duration-300 hover:-translate-y-0.5 hover:bg-green-800"
                >
                    Make Your First Move
                </a>


                <!-- ==========================================
                     WELCOME BACK
                =========================================== -->

                <a
                    href="https://mail.youngsterschessacademy.com/login"
                    class="whitespace-nowrap rounded-lg border border-green-700 bg-white px-5 py-2.5 text-sm font-semibold text-green-700 transition-all duration-300 hover:border-red-600 hover:text-red-600"
                >
                    Welcome Back
                </a>

            </div>

        </div>


        <!-- ==================================================
             MOBILE / TABLET HEADER
        =================================================== -->

        <div
            class="flex w-full items-center justify-between xl:hidden"
        >


            <!-- ==================================================
                 MOBILE LOGO
            =================================================== -->

            <a
                href="https://mail.youngsterschessacademy.com"
                class="flex shrink-0 items-center"
            >

                <img
                    src="https://mail.youngsterschessacademy.com/assets/images/branding/academy-logo.png"
                    alt="Youngsters Chess Academy"
                    class="h-12 w-auto object-contain sm:h-14"
                >

            </a>


            <!-- ==================================================
                 MOBILE MENU BUTTON
            =================================================== -->

            <button
                type="button"
                id="mobile-menu-button"
                aria-controls="responsive-navigation"
                aria-expanded="false"
                aria-label="Open navigation menu"
                class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-lg border border-slate-300 bg-white/90 text-slate-700 shadow-sm transition-all duration-300 hover:border-green-700 hover:text-green-700"
            >


                <!-- ==================================================
                     HAMBURGER ICON
                =================================================== -->

                <svg
                    id="mobile-menu-open-icon"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="2"
                    stroke="currentColor"
                    class="h-6 w-6"
                    aria-hidden="true"
                >

                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M4 6h16M4 12h16M4 18h16"
                    />

                </svg>


                <!-- ==================================================
                     CLOSE ICON
                =================================================== -->

                <svg
                    id="mobile-menu-close-icon"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="2"
                    stroke="currentColor"
                    class="hidden h-6 w-6"
                    aria-hidden="true"
                >

                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M6 18 18 6M6 6l12 12"
                    />

                </svg>

            </button>

        </div>


        <!-- ==================================================
             MOBILE NAVIGATION PANEL
        =================================================== -->

        <div
            id="responsive-navigation"
            class="absolute left-0 right-0 top-full hidden border-b border-t border-slate-200/80 bg-white/95 shadow-xl backdrop-blur-md xl:hidden"
        >

            <div
                class="mx-auto w-full max-w-7xl overflow-y-auto px-4 py-5 sm:px-6 lg:px-8"
            >

                <!--
|--------------------------------------------------------------------------
| YCAMS - Youngsters Chess Academy Management System
|--------------------------------------------------------------------------
|
| File            : navigation.blade.php
| Module          : Public Website
| Sub Module      : Navigation
| Purpose         : Primary Website Navigation Menu
|
| Description     :
|   Displays the primary website navigation.
|
|   Primary Navigation:
|
|       Home
|       About Us
|       Academy
|           - Programs
|           - Coaches
|           - Achievements
|       Events
|       FAQ
|       Contact
|
|   Academy provides a responsive dropdown/submenu.
|
| Author          : YCAMS Development Team
| Owner            : Youngsters Chess Academy
|
| Framework       : Laravel 13
| PHP             : 8.3+
|
| Version         : 1.2.0
| Created Date    : 29-Jul-2026
| Last Modified   : 03-Sep-2026
|
|--------------------------------------------------------------------------
|
| CHANGE LOG
|
| v1.2.0
| - Optimized desktop navigation spacing and padding to fit comfortably inside content wrapper.
| - Maintained strict flex shrink limits to prevent overflowing the middle grid zone.
| - Preserved Academy dropdown functionality, pointer delay, and keyboard accessibility.
|
| v1.1.0
| - Simplified navigation partial to contain navigation only.
| - Preserved Academy dropdown.
| - Removed unnecessary header-level positioning from navigation.
| - Preserved desktop single-line navigation.
| - Preserved mobile vertical navigation.
| - Improved Academy submenu pointer path.
| - Removed submenu vertical gap.
| - Preserved keyboard accessibility.
| - Preserved all existing routes.
|
| v1.0.0
| - Finalized Academy dropdown navigation.
|
|--------------------------------------------------------------------------
-->


<!-- ==========================================================
     PRIMARY NAVIGATION
=========================================================== -->

<nav
    aria-label="Primary navigation"
    class="w-auto max-w-full"
>

    <ul
        class="flex flex-col gap-1 text-base font-medium xl:flex-row xl:items-center xl:gap-0 xl:text-sm"
    >


        <!-- ==================================================
             HOME
        =================================================== -->

        <li>

            <a
                href="https://mail.youngsterschessacademy.com"
                class="block whitespace-nowrap rounded-lg border-b-2 border-transparent px-4 py-3 transition-all duration-300
                xl:rounded-none xl:px-3 xl:py-1
                text-slate-700 hover:bg-green-50 hover:text-green-700 hover:border-red-600"
            >
                Home
            </a>

        </li>


        <!-- ==================================================
             ABOUT US
        =================================================== -->

        <li>

            <a
                href="https://mail.youngsterschessacademy.com/about"
                class="block whitespace-nowrap rounded-lg border-b-2 border-transparent px-4 py-3 transition-all duration-300
                xl:rounded-none xl:px-3 xl:py-1
                text-slate-700 hover:bg-green-50 hover:text-green-700 hover:border-red-600"
            >
                About Us
            </a>

        </li>


        <!-- ==================================================
             ACADEMY
        =================================================== -->

        

        <li
            id="academy-navigation-item"
            class="relative"
        >


            <!-- ==================================================
                 ACADEMY TOGGLE
            =================================================== -->

            <button
                type="button"
                id="academy-navigation-toggle"
                aria-expanded="false"
                aria-haspopup="true"
                aria-controls="academy-navigation-menu"
                class="flex w-full items-center justify-between whitespace-nowrap rounded-lg border-b-2 border-transparent px-4 py-3 text-left transition-all duration-300
                xl:w-auto xl:justify-center xl:gap-1 xl:rounded-none xl:px-3 xl:py-1
                text-slate-700 hover:bg-green-50 hover:text-green-700 hover:border-red-600"
            >

                <span>
                    Academy
                </span>


                <!-- ==================================================
                     DOWN ARROW
                =================================================== -->

                <svg
                    id="academy-navigation-arrow"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="2"
                    stroke="currentColor"
                    class="h-4 w-4 shrink-0 transition-transform duration-200"
                    aria-hidden="true"
                >

                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="m6 9 6 6 6-6"
                    />

                </svg>

            </button>


            <!-- ==================================================
                 ACADEMY SUBMENU
            =================================================== -->

            <div
                id="academy-navigation-menu"
                class="hidden overflow-hidden rounded-lg border border-slate-200 bg-white shadow-xl
                xl:absolute xl:left-0 xl:top-full xl:z-[100] xl:w-52 xl:overflow-visible"
            >

                <div
                    class="py-2"
                >


                    <!-- ==================================================
                         PROGRAMS
                    =================================================== -->

                    <a
                        href="https://mail.youngsterschessacademy.com/programs"
                        class="block whitespace-nowrap px-5 py-3 text-sm transition-all duration-200
                        text-slate-700 hover:bg-green-50 hover:text-green-700"
                    >
                        Programs
                    </a>


                    <!-- ==================================================
                         COACHES
                    =================================================== -->

                    <a
                        href="https://mail.youngsterschessacademy.com/coaches"
                        class="block whitespace-nowrap px-5 py-3 text-sm transition-all duration-200
                        text-slate-700 hover:bg-green-50 hover:text-green-700"
                    >
                        Coaches
                    </a>


                    <!-- ==================================================
                         ACHIEVEMENTS
                    =================================================== -->

                    <a
                        href="https://mail.youngsterschessacademy.com/achievements"
                        class="block whitespace-nowrap px-5 py-3 text-sm transition-all duration-200
                        text-slate-700 hover:bg-green-50 hover:text-green-700"
                    >
                        Achievements
                    </a>

                </div>

            </div>

        </li>


        <!-- ==================================================
             EVENTS
        =================================================== -->

        <li>

            <a
                href="https://mail.youngsterschessacademy.com/events"
                class="block whitespace-nowrap rounded-lg border-b-2 border-transparent px-4 py-3 transition-all duration-300
                xl:rounded-none xl:px-3 xl:py-1
                text-slate-700 hover:bg-green-50 hover:text-green-700 hover:border-red-600"
            >
                Events
            </a>

        </li>


        <!-- ==================================================
             FAQ
        =================================================== -->

        <li>

            <a
                href="https://mail.youngsterschessacademy.com/faq"
                class="block whitespace-nowrap rounded-lg border-b-2 border-transparent px-4 py-3 transition-all duration-300
                xl:rounded-none xl:px-3 xl:py-1
                text-slate-700 hover:bg-green-50 hover:text-green-700 hover:border-red-600"
            >
                FAQ
            </a>

        </li>


        <!-- ==================================================
             CONTACT
        =================================================== -->

        <li>

            <a
                href="https://mail.youngsterschessacademy.com/contact"
                class="block whitespace-nowrap rounded-lg border-b-2 border-transparent px-4 py-3 transition-all duration-300
                xl:rounded-none xl:px-3 xl:py-1
                text-slate-700 hover:bg-green-50 hover:text-green-700 hover:border-red-600"
            >
                Contact
            </a>

        </li>

    </ul>

</nav>


<!-- ==========================================================
     ACADEMY DROPDOWN SCRIPT
=========================================================== -->

<script>

    document.addEventListener('DOMContentLoaded', function () {

        const academyItem =
            document.getElementById('academy-navigation-item');

        const academyToggle =
            document.getElementById('academy-navigation-toggle');

        const academyMenu =
            document.getElementById('academy-navigation-menu');

        const academyArrow =
            document.getElementById('academy-navigation-arrow');


        if (
            !academyItem ||
            !academyToggle ||
            !academyMenu ||
            !academyArrow
        ) {
            return;
        }


        const desktopBreakpoint = 1280;

        let closeTimer = null;


        /* ======================================================
           CANCEL CLOSE
        ======================================================= */

        function cancelClose() {

            if (closeTimer !== null) {

                clearTimeout(closeTimer);

                closeTimer = null;

            }

        }


        /* ======================================================
           OPEN MENU
        ======================================================= */

        function openMenu() {

            cancelClose();

            academyMenu.classList.remove('hidden');

            academyToggle.setAttribute(
                'aria-expanded',
                'true'
            );

            academyArrow.classList.add(
                'rotate-180'
            );

        }


        /* ======================================================
           CLOSE MENU
        ======================================================= */

        function closeMenu() {

            cancelClose();

            academyMenu.classList.add('hidden');

            academyToggle.setAttribute(
                'aria-expanded',
                'false'
            );

            academyArrow.classList.remove(
                'rotate-180'
            );

        }


        /* ======================================================
           DELAYED CLOSE
        ======================================================= */

        function scheduleClose() {

            cancelClose();

            closeTimer = setTimeout(
                function () {

                    closeMenu();

                },
                220
            );

        }


        /* ======================================================
           BUTTON CLICK
        ======================================================= */

        academyToggle.addEventListener(
            'click',
            function (event) {

                event.preventDefault();

                event.stopPropagation();


                const isOpen =
                    academyToggle.getAttribute('aria-expanded') === 'true';


                if (isOpen) {

                    closeMenu();

                } else {

                    openMenu();

                }

            }
        );


        /* ======================================================
           DESKTOP POINTER ENTER
        ======================================================= */

        academyItem.addEventListener(
            'mouseenter',
            function () {

                if (
                    window.innerWidth >= desktopBreakpoint
                ) {

                    openMenu();

                }

            }
        );


        /* ======================================================
           DESKTOP POINTER LEAVE
        ======================================================= */

        academyItem.addEventListener(
            'mouseleave',
            function () {

                if (
                    window.innerWidth >= desktopBreakpoint
                ) {

                    scheduleClose();

                }

            }
        );


        /* ======================================================
           SUBMENU ENTER
        ======================================================= */

        academyMenu.addEventListener(
            'mouseenter',
            function () {

                if (
                    window.innerWidth >= desktopBreakpoint
                ) {

                    openMenu();

                }

            }
        );


        /* ======================================================
           SUBMENU LEAVE
        ======================================================= */

        academyMenu.addEventListener(
            'mouseleave',
            function () {

                if (
                    window.innerWidth >= desktopBreakpoint
                ) {

                    scheduleClose();

                }

            }
        );


        /* ======================================================
           KEYBOARD ACCESS
        ======================================================= */

        academyToggle.addEventListener(
            'keydown',
            function (event) {

                if (
                    event.key === 'ArrowDown' ||
                    event.key === 'Enter' ||
                    event.key === ' '
                ) {

                    event.preventDefault();

                    openMenu();


                    const firstLink =
                        academyMenu.querySelector('a');


                    if (firstLink) {

                        firstLink.focus();

                    }

                }


                if (
                    event.key === 'Escape'
                ) {

                    closeMenu();

                    academyToggle.focus();

                }

            }
        );


        /* ======================================================
           ESCAPE FROM SUBMENU
        ======================================================= */

        academyMenu.addEventListener(
            'keydown',
            function (event) {

                if (
                    event.key === 'Escape'
                ) {

                    closeMenu();

                    academyToggle.focus();

                }

            }
        );


        /* ======================================================
           CLOSE OUTSIDE
        ======================================================= */

        document.addEventListener(
            'click',
            function (event) {

                if (
                    !academyItem.contains(event.target)
                ) {

                    closeMenu();

                }

            }
        );


        /* ======================================================
           RESET WHEN RESIZING
        ======================================================= */

        window.addEventListener(
            'resize',
            function () {

                cancelClose();

                closeMenu();

            }
        );

    });

</script>


                <!-- ==================================================
                     MOBILE ACTION BUTTONS
                =================================================== -->

                <div
                    class="mt-5 grid grid-cols-1 gap-3 border-t border-slate-200 pt-5 sm:grid-cols-2"
                >


                    <!-- ==========================================
                         MAKE YOUR FIRST MOVE
                    =========================================== -->

                    <a
                        href="https://mail.youngsterschessacademy.com/register"
                        class="flex items-center justify-center whitespace-nowrap rounded-lg bg-green-700 px-5 py-3 text-center text-sm font-semibold text-white shadow-sm transition-all duration-300 hover:bg-green-800"
                    >
                        Make Your First Move
                    </a>


                    <!-- ==========================================
                         WELCOME BACK
                    =========================================== -->

                    <a
                        href="https://mail.youngsterschessacademy.com/login"
                        class="flex items-center justify-center whitespace-nowrap rounded-lg border border-green-700 bg-white px-5 py-3 text-center text-sm font-semibold text-green-700 transition-all duration-300 hover:border-red-600 hover:text-red-600"
                    >
                        Welcome Back
                    </a>

                </div>

            </div>

        </div>

    </div>

</header>


<!-- ==========================================================
     MOBILE MENU SCRIPT
=========================================================== -->

<script>

    document.addEventListener('DOMContentLoaded', function () {

        const menuButton =
            document.getElementById('mobile-menu-button');

        const navigation =
            document.getElementById('responsive-navigation');

        const openIcon =
            document.getElementById('mobile-menu-open-icon');

        const closeIcon =
            document.getElementById('mobile-menu-close-icon');


        if (
            !menuButton ||
            !navigation ||
            !openIcon ||
            !closeIcon
        ) {
            return;
        }


        const desktopBreakpoint = 1280;


        /* ======================================================
           OPEN MOBILE MENU
        ======================================================= */

        function openMobileMenu() {

            navigation.classList.remove('hidden');

            openIcon.classList.add('hidden');

            closeIcon.classList.remove('hidden');

            menuButton.setAttribute(
                'aria-expanded',
                'true'
            );

            menuButton.setAttribute(
                'aria-label',
                'Close navigation menu'
            );

        }


        /* ======================================================
           CLOSE MOBILE MENU
        ======================================================= */

        function closeMobileMenu() {

            navigation.classList.add('hidden');

            openIcon.classList.remove('hidden');

            closeIcon.classList.add('hidden');

            menuButton.setAttribute(
                'aria-expanded',
                'false'
            );

            menuButton.setAttribute(
                'aria-label',
                'Open navigation menu'
            );

        }


        /* ======================================================
           MOBILE MENU TOGGLE
        ======================================================= */

        menuButton.addEventListener(
            'click',
            function (event) {

                event.stopPropagation();


                const isOpen =
                    menuButton.getAttribute('aria-expanded') === 'true';


                if (isOpen) {

                    closeMobileMenu();

                } else {

                    openMobileMenu();

                }

            }
        );


        /* ======================================================
           CLOSE AFTER NORMAL NAVIGATION LINK
        ======================================================= */

        const navigationLinks =
            navigation.querySelectorAll('a');


        navigationLinks.forEach(
            function (link) {

                link.addEventListener(
                    'click',
                    function () {

                        if (
                            window.innerWidth < desktopBreakpoint
                        ) {

                            closeMobileMenu();

                        }

                    }
                );

            }
        );


        /* ======================================================
           CLOSE WHEN CLICKING OUTSIDE
        ======================================================= */

        document.addEventListener(
            'click',
            function (event) {

                if (
                    window.innerWidth >= desktopBreakpoint
                ) {
                    return;
                }


                const clickedButton =
                    menuButton.contains(event.target);

                const clickedNavigation =
                    navigation.contains(event.target);


                if (
                    !clickedButton &&
                    !clickedNavigation
                ) {

                    closeMobileMenu();

                }

            }
        );


        /* ======================================================
           RESET AFTER RETURNING TO DESKTOP
        ======================================================= */

        window.addEventListener(
            'resize',
            function () {

                if (
                    window.innerWidth >= desktopBreakpoint
                ) {

                    closeMobileMenu();

                }

            }
        );

    });

</script>


<!-- ==========================================================
         MAIN CONTENT
    =========================================================== -->

<main
    class="relative z-10 pt-[136px]"
>

    
    

    <style>
        /*
        |--------------------------------------------------------------------------
        | YCAMS Registration
        |--------------------------------------------------------------------------
        */

        .ycams-registration {
            --ycams-primary: #1d3557;
            --ycams-primary-dark: #14253d;
            --ycams-accent: #e9b949;
            --ycams-success: #287d4c;
            --ycams-danger: #b42318;
            --ycams-muted: #667085;
            --ycams-border: #d9dee7;
            --ycams-soft: #f6f8fb;

            padding: 45px 0 70px;
            background: #f8fafc;
        }

        .ycams-registration *,
        .ycams-registration *::before,
        .ycams-registration *::after {
            box-sizing: border-box;
        }

        .ycams-registration-shell {
            width: min(1100px, calc(100% - 30px));
            margin: 0 auto;
        }

        .ycams-registration-heading {
            text-align: center;
            margin-bottom: 28px;
        }

        .ycams-registration-heading h1 {
            margin: 0 0 8px;
            color: var(--ycams-primary);
            font-size: clamp(28px, 4vw, 40px);
            font-weight: 700;
            line-height: 1.2;
        }

        .ycams-registration-heading p {
            margin: 0 auto;
            max-width: 720px;
            color: var(--ycams-muted);
            font-size: 15px;
            line-height: 1.7;
        }

        /*
        |--------------------------------------------------------------------------
        | Progress
        |--------------------------------------------------------------------------
        */

        .ycams-registration-progress {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 25px;
        }

        .ycams-progress-item {
            position: relative;
            padding: 13px 15px;
            border: 1px solid var(--ycams-border);
            border-radius: 10px;
            background: #fff;
            color: #7a8494;
            text-align: center;
            font-size: 13px;
            font-weight: 600;
            transition: .2s ease;
        }

        .ycams-progress-item.is-active {
            border-color: var(--ycams-primary);
            background: var(--ycams-primary);
            color: #fff;
        }

        .ycams-progress-item.is-complete {
            border-color: var(--ycams-success);
            background: #edf8f1;
            color: var(--ycams-success);
        }

        /*
        |--------------------------------------------------------------------------
        | Alerts
        |--------------------------------------------------------------------------
        */

        .ycams-alert {
            margin-bottom: 20px;
            padding: 14px 17px;
            border-radius: 9px;
            font-size: 14px;
            line-height: 1.55;
        }

        .ycams-alert-error {
            border: 1px solid #f2c4c0;
            background: #fff5f4;
            color: #8f1d15;
        }

        .ycams-alert-success {
            border: 1px solid #b9dfc8;
            background: #f0faf3;
            color: #21643d;
        }

        .ycams-alert-info {
            border: 1px solid #bfd1e8;
            background: #f3f7fc;
            color: #27496f;
        }

        /*
        |--------------------------------------------------------------------------
        | Main Card
        |--------------------------------------------------------------------------
        */

        .ycams-registration-card {
            overflow: hidden;
            border: 1px solid #e0e5ec;
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 12px 35px rgba(20, 37, 61, .08);
        }

        .ycams-step {
            padding: clamp(22px, 4vw, 40px);
        }

        .ycams-step-header {
            margin-bottom: 28px;
        }

        .ycams-step-header h2 {
            margin: 0 0 7px;
            color: var(--ycams-primary);
            font-size: 25px;
            font-weight: 700;
        }

        .ycams-step-header p {
            margin: 0;
            color: var(--ycams-muted);
            font-size: 14px;
            line-height: 1.65;
        }

        /*
        |--------------------------------------------------------------------------
        | Form Grid
        |--------------------------------------------------------------------------
        */

        .ycams-form-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 21px 22px;
        }

        .ycams-form-group {
            min-width: 0;
        }

        .ycams-form-group-full {
            grid-column: 1 / -1;
        }

        .ycams-form-label {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 7px;
            color: #27364a;
            font-size: 13px;
            font-weight: 700;
        }

        .ycams-required {
            color: #c62828;
        }

        .ycams-form-control,
        .ycams-form-select {
            display: block;
            width: 100%;
            min-height: 46px;
            padding: 10px 13px;
            border: 1px solid #cfd6e1;
            border-radius: 8px;
            background: #fff;
            color: #27364a;
            font-family: inherit;
            font-size: 14px;
            outline: none;
            transition:
                border-color .18s ease,
                box-shadow .18s ease,
                background .18s ease;
        }

        .ycams-form-control::placeholder {
            color: #a0a9b7;
        }

        .ycams-form-control:focus,
        .ycams-form-select:focus {
            border-color: var(--ycams-primary);
            box-shadow: 0 0 0 3px rgba(29, 53, 87, .09);
        }

        .ycams-form-control.is-valid,
        .ycams-form-select.is-valid {
            border-color: #53a56f;
        }

        .ycams-form-control.is-invalid,
        .ycams-form-select.is-invalid {
            border-color: #d65a50;
        }

        .ycams-field-tip {
            margin-top: 6px;
            color: #7b8594;
            font-size: 12px;
            line-height: 1.5;
        }

        .ycams-field-message {
            display: none;
            margin-top: 6px;
            font-size: 12px;
            line-height: 1.5;
        }

        .ycams-field-message.is-visible {
            display: block;
        }

        .ycams-field-message.is-error {
            color: var(--ycams-danger);
        }

        .ycams-field-message.is-success {
            color: var(--ycams-success);
        }

        /*
        |--------------------------------------------------------------------------
        | Phone
        |--------------------------------------------------------------------------
        */

        .ycams-phone-wrapper {
            display: flex;
            align-items: stretch;
        }

        .ycams-phone-code {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 68px;
            padding: 0 10px;
            border: 1px solid #cfd6e1;
            border-right: 0;
            border-radius: 8px 0 0 8px;
            background: #f3f5f8;
            color: #526174;
            font-size: 13px;
            font-weight: 700;
        }

        .ycams-phone-wrapper .ycams-form-control {
            border-radius: 0 8px 8px 0;
        }

        /*
        |--------------------------------------------------------------------------
        | Relationship
        |--------------------------------------------------------------------------
        */

        .ycams-radio-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
        }

        .ycams-radio-option {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 42px;
            padding: 8px 14px;
            border: 1px solid #d2d9e3;
            border-radius: 8px;
            background: #fff;
            color: #35445a;
            cursor: pointer;
            font-size: 13px;
            transition: .18s ease;
        }

        .ycams-radio-option:hover {
            border-color: #9daabc;
            background: #f8fafc;
        }

        .ycams-radio-option input {
            margin: 0;
            accent-color: var(--ycams-primary);
        }

        .ycams-radio-option.is-selected {
            border-color: var(--ycams-primary);
            background: #f1f5fa;
            color: var(--ycams-primary);
        }

        /*
        |--------------------------------------------------------------------------
        | Password
        |--------------------------------------------------------------------------
        */

        .ycams-password-wrapper {
            position: relative;
        }

        .ycams-password-wrapper .ycams-form-control {
            padding-right: 75px;
        }

        .ycams-password-toggle {
            position: absolute;
            top: 50%;
            right: 9px;
            transform: translateY(-50%);
            border: 0;
            background: transparent;
            color: #687588;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
        }

        .ycams-password-rules {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 5px 12px;
            margin-top: 9px;
        }

        .ycams-password-rule {
            color: #8a94a3;
            font-size: 11px;
        }

        .ycams-password-rule::before {
            content: '○';
            display: inline-block;
            width: 17px;
            font-size: 13px;
        }

        .ycams-password-rule.is-valid {
            color: var(--ycams-success);
        }

        .ycams-password-rule.is-valid::before {
            content: '✓';
        }

        /*
        |--------------------------------------------------------------------------
        | Country-dependent Student Background
        |--------------------------------------------------------------------------
        */

        .ycams-student-section {
            transition:
                background-color .35s ease,
                background-image .35s ease;
        }

        .ycams-student-section[data-country="IN"] {
            background:
                linear-gradient(
                    135deg,
                    rgba(255, 153, 51, .075),
                    rgba(255, 255, 255, .95) 45%,
                    rgba(19, 136, 8, .075)
                );
        }

        .ycams-student-section[data-country="SG"] {
            background:
                linear-gradient(
                    135deg,
                    rgba(220, 53, 69, .07),
                    rgba(255, 255, 255, .96)
                );
        }

        .ycams-student-section[data-country="MY"] {
            background:
                linear-gradient(
                    135deg,
                    rgba(35, 83, 142, .075),
                    rgba(255, 255, 255, .96)
                );
        }

        .ycams-student-section[data-country="AE"] {
            background:
                linear-gradient(
                    135deg,
                    rgba(0, 120, 90, .07),
                    rgba(255, 255, 255, .96)
                );
        }

        .ycams-student-section[data-country="LK"] {
            background:
                linear-gradient(
                    135deg,
                    rgba(139, 32, 32, .07),
                    rgba(255, 255, 255, .96)
                );
        }

        .ycams-student-section[data-country="US"] {
            background:
                linear-gradient(
                    135deg,
                    rgba(35, 78, 145, .07),
                    rgba(255, 255, 255, .96)
                );
        }

        .ycams-student-section[data-country="GB"] {
            background:
                linear-gradient(
                    135deg,
                    rgba(30, 65, 130, .07),
                    rgba(255, 255, 255, .96)
                );
        }

        .ycams-student-section[data-country="AU"] {
            background:
                linear-gradient(
                    135deg,
                    rgba(25, 65, 135, .07),
                    rgba(255, 255, 255, .96)
                );
        }

        .ycams-student-section[data-country="CA"] {
            background:
                linear-gradient(
                    135deg,
                    rgba(210, 30, 45, .07),
                    rgba(255, 255, 255, .96)
                );
        }

        .ycams-student-section[data-country="NZ"] {
            background:
                linear-gradient(
                    135deg,
                    rgba(25, 55, 115, .07),
                    rgba(255, 255, 255, .96)
                );
        }

        /*
        |--------------------------------------------------------------------------
        | Verification
        |--------------------------------------------------------------------------
        */

        .ycams-summary-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
        }

        .ycams-summary-card {
            padding: 20px;
            border: 1px solid #dce2ea;
            border-radius: 11px;
            background: rgba(255,255,255,.9);
        }

        .ycams-summary-card h3 {
            margin: 0 0 15px;
            color: var(--ycams-primary);
            font-size: 17px;
        }

        .ycams-summary-row {
            display: flex;
            justify-content: space-between;
            gap: 15px;
            padding: 8px 0;
            border-bottom: 1px solid #edf0f4;
            font-size: 13px;
        }

        .ycams-summary-row:last-child {
            border-bottom: 0;
        }

        .ycams-summary-label {
            color: #7a8493;
        }

        .ycams-summary-value {
            color: #26364b;
            font-weight: 600;
            text-align: right;
            word-break: break-word;
        }

        .ycams-terms {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-top: 22px;
            padding: 15px;
            border: 1px solid #dce2ea;
            border-radius: 9px;
            background: #fafbfd;
            font-size: 13px;
            line-height: 1.6;
        }

        .ycams-terms input {
            margin-top: 4px;
            accent-color: var(--ycams-primary);
        }

        /*
        |--------------------------------------------------------------------------
        | Buttons
        |--------------------------------------------------------------------------
        */

        .ycams-form-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-top: 30px;
            padding-top: 22px;
            border-top: 1px solid #edf0f4;
        }

        .ycams-button-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .ycams-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            padding: 10px 19px;
            border: 1px solid transparent;
            border-radius: 8px;
            cursor: pointer;
            font-family: inherit;
            font-size: 13px;
            font-weight: 700;
            text-decoration: none;
            transition:
                background .18s ease,
                border-color .18s ease,
                opacity .18s ease,
                transform .18s ease;
        }

        .ycams-button:hover:not(:disabled) {
            transform: translateY(-1px);
        }

        .ycams-button-primary {
            background: var(--ycams-primary);
            color: #fff;
        }

        .ycams-button-primary:hover:not(:disabled) {
            background: var(--ycams-primary-dark);
            color: #fff;
        }

        .ycams-button-secondary {
            border-color: #cfd6e1;
            background: #fff;
            color: #45546a;
        }

        .ycams-button-secondary:hover:not(:disabled) {
            background: #f6f8fb;
        }

        .ycams-button-danger {
            border-color: #e0b0ac;
            background: #fff;
            color: #a3261d;
        }

        .ycams-button:disabled {
            opacity: .42;
            cursor: not-allowed;
            transform: none;
        }

        /*
        |--------------------------------------------------------------------------
        | Loading / Verification
        |--------------------------------------------------------------------------
        */

        .ycams-check-status {
            display: none;
            margin-top: 6px;
            font-size: 12px;
        }

        .ycams-check-status.is-visible {
            display: block;
        }

        .ycams-check-status.checking {
            color: #667085;
        }

        .ycams-check-status.success {
            color: var(--ycams-success);
        }

        .ycams-check-status.error {
            color: var(--ycams-danger);
        }

        /*
        |--------------------------------------------------------------------------
        | Email OTP Verification
        |--------------------------------------------------------------------------
        */

        .ycams-otp-section {
            margin: 28px 0 22px;
            padding: 20px;
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            background: #f8fafc;
        }

        .ycams-otp-section h3 {
            margin: 0 0 8px;
            font-size: 16px;
        }

        .ycams-otp-section p {
            margin: 0 0 14px;
            font-size: 13px;
            line-height: 1.6;
        }

        .ycams-otp-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }

        .ycams-otp-input {
            width: 170px;
            letter-spacing: 5px;
            text-align: center;
            font-weight: 700;
        }

        .ycams-otp-status {
            margin-top: 10px;
            font-size: 13px;
        }

        .ycams-otp-status.success {
            color: var(--ycams-success);
        }

        .ycams-otp-status.error {
            color: var(--ycams-danger);
        }

        .ycams-otp-status.info {
            color: #667085;
        }

        .ycams-otp-timer {
            margin-top: 10px;
            font-size: 13px;
            font-weight: 700;
            color: #667085;
        }

        .ycams-otp-timer.is-expired {
            color: var(--ycams-danger);
        }

        .ycams-otp-resend {
            min-width: 130px;
        }

        /*
        |--------------------------------------------------------------------------
        | In-Page Confirmation Modal
        |--------------------------------------------------------------------------
        */

        .ycams-modal-backdrop {
            position: fixed;
            inset: 0;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            background-color: rgba(15, 23, 42, 0.65);
            backdrop-filter: blur(4px);
        }

        /*
        |--------------------------------------------------------------------------
        | Reliable Hidden State
        |--------------------------------------------------------------------------
        |
        | Do not use a generic "hidden" class here. The public website/theme may
        | define that class with display:flex or another display rule.
        |
        */
        .ycams-is-hidden,
        [hidden] {
            display: none !important;
        }

        .ycams-modal-card {
            width: 100%;
            max-width: 500px;
            overflow: hidden;
            border-radius: 14px;
            border: 1px solid #cbd5e1;
            background: #ffffff;
            padding: 28px 24px;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        }

        .ycams-modal-title {
            margin: 0 0 10px;
            font-size: 19px;
            font-weight: 700;
            color: var(--ycams-primary);
        }

        .ycams-modal-text {
            margin: 0 0 14px;
            font-size: 14px;
            line-height: 1.6;
            color: #334155;
        }

        .ycams-modal-subtext {
            margin: 0 0 22px;
            font-size: 14px;
            line-height: 1.6;
            color: var(--ycams-muted);
        }

        .ycams-modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }

        /*
        |--------------------------------------------------------------------------
        | Mobile
        |--------------------------------------------------------------------------
        */

        @media (max-width: 760px) {
            .ycams-registration {
                padding: 30px 0 50px;
            }

            .ycams-registration-progress {
                grid-template-columns: 1fr;
                gap: 6px;
            }

            .ycams-progress-item {
                padding: 10px;
            }

            .ycams-form-grid,
            .ycams-summary-grid {
                grid-template-columns: 1fr;
            }

            .ycams-form-group-full {
                grid-column: auto;
            }

            .ycams-password-rules {
                grid-template-columns: 1fr;
            }

            .ycams-form-actions {
                flex-direction: column-reverse;
                align-items: stretch;
            }

            .ycams-button-group {
                width: 100%;
            }

            .ycams-button {
                width: 100%;
            }

            .ycams-summary-row {
                flex-direction: column;
                gap: 3px;
            }

            .ycams-summary-value {
                text-align: left;
            }

            .ycams-modal-actions {
                flex-direction: column-reverse;
            }

            .ycams-modal-actions .ycams-button {
                width: 100%;
            }
        }
    </style>


    <section class="ycams-registration">

        <div class="ycams-registration-shell">

            <div class="ycams-registration-heading">
                <h1>Join Youngsters Chess Academy</h1>

                <p>
                    Register your Parent / Guardian account and Student
                    details securely. Your information will be verified
                    before the registration is completed.
                </p>
            </div>


            

            <div class="ycams-registration-progress">

                <div
                    class="ycams-progress-item
                    is-active
                    "
                >
                    1. Parent / Guardian
                </div>

                <div
                    class="ycams-progress-item
                    
                    "
                >
                    2. Student
                </div>

                <div
                    class="ycams-progress-item
                    "
                >
                    3. Verification
                </div>

            </div>


            

            
            
            

            

            

            
                <div class="ycams-registration-card">

                    <div class="ycams-step">

                        <div class="ycams-step-header">
                            <h2>Parent / Guardian Details</h2>

                            <p>
                                Please enter the details of the Parent or
                                Guardian who will be associated with the
                                student's YCAMS family account.
                            </p>
                        </div>


                        <form
                            method="POST"
                            action="https://mail.youngsterschessacademy.com/register"
                            id="parent-registration-form"
                            novalidate
                        >

                            <input type="hidden" name="_token" value="9TjjgRK32F5nG3gl7fuujIQZNfnA42ZE0XnpTsQb" autocomplete="off">
                            <input
                                type="hidden"
                                name="step"
                                value="1"
                            >


                            <div class="ycams-form-grid">

                                
                                <div class="ycams-form-group">

                                    <label
                                        class="ycams-form-label"
                                        for="parent_country_id"
                                    >
                                        Country
                                        <span class="ycams-required">*</span>
                                    </label>

                                    <select
                                        class="ycams-form-select"
                                        id="parent_country_id"
                                        name="parent_country_id"
                                        required
                                    >
                                        <option value="">
                                            Select your country
                                        </option>

                                        
                                            <option
                                                value="1"
                                                data-iso2="IN"
                                                data-identity-type="AADHAAR"
                                                data-identity-length="12"
                                                data-phone-code="+91"
                                                                                            >
                                                India
                                            </option>

                                        
                                            <option
                                                value="2"
                                                data-iso2="SG"
                                                data-identity-type="PASSPORT"
                                                data-identity-length=""
                                                data-phone-code="+65"
                                                                                            >
                                                Singapore
                                            </option>

                                        
                                            <option
                                                value="3"
                                                data-iso2="MY"
                                                data-identity-type="PASSPORT"
                                                data-identity-length=""
                                                data-phone-code="+60"
                                                                                            >
                                                Malaysia
                                            </option>

                                        
                                            <option
                                                value="4"
                                                data-iso2="AE"
                                                data-identity-type="PASSPORT"
                                                data-identity-length=""
                                                data-phone-code="+971"
                                                                                            >
                                                United Arab Emirates
                                            </option>

                                        
                                            <option
                                                value="5"
                                                data-iso2="LK"
                                                data-identity-type="PASSPORT"
                                                data-identity-length=""
                                                data-phone-code="+94"
                                                                                            >
                                                Sri Lanka
                                            </option>

                                        
                                            <option
                                                value="6"
                                                data-iso2="US"
                                                data-identity-type="PASSPORT"
                                                data-identity-length=""
                                                data-phone-code="+1"
                                                                                            >
                                                United States
                                            </option>

                                        
                                            <option
                                                value="7"
                                                data-iso2="GB"
                                                data-identity-type="PASSPORT"
                                                data-identity-length=""
                                                data-phone-code="+44"
                                                                                            >
                                                United Kingdom
                                            </option>

                                        
                                            <option
                                                value="8"
                                                data-iso2="AU"
                                                data-identity-type="PASSPORT"
                                                data-identity-length=""
                                                data-phone-code="+61"
                                                                                            >
                                                Australia
                                            </option>

                                        
                                            <option
                                                value="9"
                                                data-iso2="CA"
                                                data-identity-type="PASSPORT"
                                                data-identity-length=""
                                                data-phone-code="+1"
                                                                                            >
                                                Canada
                                            </option>

                                        
                                            <option
                                                value="10"
                                                data-iso2="NZ"
                                                data-identity-type="PASSPORT"
                                                data-identity-length=""
                                                data-phone-code="+64"
                                                                                            >
                                                New Zealand
                                            </option>

                                        
                                    </select>

                                    <div class="ycams-field-tip">
                                        Your country determines the identity
                                        document used for registration.
                                    </div>

                                </div>


                                
                                <div class="ycams-form-group">

                                    <label
                                        class="ycams-form-label"
                                        for="parent_identity_number"
                                        id="parent-identity-label"
                                    >
                                        Identity Number
                                        <span class="ycams-required">*</span>
                                    </label>

                                    <input
                                        type="text"
                                        class="ycams-form-control"
                                        id="parent_identity_number"
                                        name="parent_identity_number"
                                        value=""
                                        placeholder="Enter identity number"
                                        maxlength="50"
                                        autocomplete="off"
                                        required
                                    >

                                    <div class="ycams-field-tip" id="parent-identity-tip">
                                        Select your country first.
                                    </div>

                                    <div
                                        class="ycams-check-status"
                                        id="parent-identity-status"
                                    ></div>

                                    <div
                                        class="ycams-field-message is-error"
                                        id="parent-identity-error"
                                    ></div>

                                </div>

                            </div>


                            

                            <div
                                id="parent-extended-fields"
                                class="ycams-is-hidden"
                                style="margin-top: 24px; border-top: 1px solid #edf0f4; padding-top: 24px;"
                            >

                                <div class="ycams-form-grid">

                                    
                                    <div class="ycams-form-group ycams-form-group-full">

                                        <label class="ycams-form-label">
                                            You are
                                            <span class="ycams-required">*</span>
                                        </label>

                                        <div class="ycams-radio-row">

                                            <label class="ycams-radio-option">
                                                <input
                                                    type="radio"
                                                    name="parent_relationship"
                                                    value="FATHER"
                                                    disabled
                                                    checked                                                >
                                                <span>Father</span>
                                            </label>

                                            <label class="ycams-radio-option">
                                                <input
                                                    type="radio"
                                                    name="parent_relationship"
                                                    value="MOTHER"
                                                    disabled
                                                                                                    >
                                                <span>Mother</span>
                                            </label>

                                            <label class="ycams-radio-option">
                                                <input
                                                    type="radio"
                                                    name="parent_relationship"
                                                    value="GUARDIAN"
                                                    disabled
                                                                                                    >
                                                <span>Guardian</span>
                                            </label>

                                        </div>

                                        <div class="ycams-field-tip">
                                            Father and Mother automatically determine
                                            the gender. Guardian allows you to select
                                            the appropriate gender below.
                                        </div>

                                    </div>


                                    
                                    <div class="ycams-form-group">

                                        <label
                                            class="ycams-form-label"
                                            for="parent_name"
                                        >
                                            Full Name
                                            <span class="ycams-required">*</span>
                                        </label>

                                        <input
                                            type="text"
                                            class="ycams-form-control"
                                            id="parent_name"
                                            name="parent_name"
                                            value=""
                                            placeholder="Enter your full name"
                                            minlength="2"
                                            maxlength="150"
                                            autocomplete="name"
                                            disabled
                                            required
                                        >

                                        <div class="ycams-field-tip">
                                            Enter your name as it should appear
                                            on the YCAMS account.
                                        </div>

                                    </div>


                                    
                                    <div
                                        class="ycams-form-group"
                                        id="parent-gender-group"
                                    >

                                        <label
                                            class="ycams-form-label"
                                            for="parent_gender"
                                        >
                                            Gender
                                            <span
                                                class="ycams-required"
                                                id="parent-gender-required"
                                            >
                                                *
                                            </span>
                                        </label>

                                        <select
                                            class="ycams-form-select"
                                            id="parent_gender"
                                            name="parent_gender"
                                            disabled
                                        >

                                            <option value="">
                                                Select gender
                                            </option>

                                            <option
                                                value="male"
                                                                                            >
                                                Male
                                            </option>

                                            <option
                                                value="female"
                                                                                            >
                                                Female
                                            </option>

                                            <option
                                                value="other"
                                                                                            >
                                                Other
                                            </option>

                                        </select>

                                        <div class="ycams-field-tip">
                                            Guardian must select a gender.
                                            Father/Mother is selected automatically.
                                        </div>

                                    </div>


                                    
                                    <div class="ycams-form-group ycams-form-group-full">

                                        <label class="ycams-form-label" for="parent_address_line_1">
                                            Address / Street
                                        </label>

                                        <textarea
                                            class="ycams-form-control"
                                            id="parent_address_line_1"
                                            name="parent_address_line_1"
                                            rows="2"
                                            maxlength="255"
                                            placeholder="House / Flat / Street / Area"
                                            autocomplete="street-address"
                                            disabled
                                        ></textarea>

                                    </div>

                                    
                                    <div class="ycams-form-group ycams-form-group-full">
                                        <label class="ycams-form-label" for="parent_address_line_2">
                                            Address Line 2 <span style="color:#8a94a3;font-weight:500;">Optional</span>
                                        </label>
                                        <input type="text" class="ycams-form-control" id="parent_address_line_2" name="parent_address_line_2" value="" maxlength="255" placeholder="Apartment, landmark, locality, etc." disabled>
                                    </div>

                                    
                                    <div class="ycams-form-group">
                                        <label class="ycams-form-label" for="parent_city">City</label>
                                        <input type="text" class="ycams-form-control" id="parent_city" name="parent_city" value="" maxlength="100" placeholder="Enter city" autocomplete="address-level2" disabled>
                                    </div>

                                    
                                    <div class="ycams-form-group">
                                        <label class="ycams-form-label" for="parent_district">District <span style="color:#8a94a3;font-weight:500;">Optional</span></label>
                                        <input type="text" class="ycams-form-control" id="parent_district" name="parent_district" value="" maxlength="100" placeholder="Enter district" disabled>
                                    </div>

                                    
                                    <div class="ycams-form-group">
                                        <label class="ycams-form-label" for="parent_state_province">State / Province <span style="color:#8a94a3;font-weight:500;">Optional</span></label>
                                        <input type="text" class="ycams-form-control" id="parent_state_province" name="parent_state_province" value="" maxlength="100" placeholder="Enter state / province" autocomplete="address-level1" disabled>
                                    </div>

                                    
                                    <div class="ycams-form-group">
                                        <label class="ycams-form-label" for="parent_postal_code">Postal / PIN Code</label>
                                        <input type="text" class="ycams-form-control" id="parent_postal_code" name="parent_postal_code" value="" maxlength="20" placeholder="Enter postal / PIN code" autocomplete="postal-code" disabled>
                                    </div>

                                    
                                    <div class="ycams-form-group">

                                        <label
                                            class="ycams-form-label"
                                            for="parent_email"
                                        >
                                            Email Address
                                            <span class="ycams-required">*</span>
                                        </label>

                                        <input
                                            type="email"
                                            class="ycams-form-control"
                                            id="parent_email"
                                            name="parent_email"
                                            value=""
                                            placeholder="you@example.com"
                                            maxlength="255"
                                            autocomplete="email"
                                            disabled
                                            required
                                        >

                                        <div class="ycams-field-tip">
                                            This email will be associated with
                                            your Parent account.
                                        </div>

                                        <div
                                            class="ycams-check-status"
                                            id="parent-email-status"
                                        ></div>

                                        <div
                                            class="ycams-field-message is-error"
                                            id="parent-email-error"
                                        ></div>

                                    </div>


                                    
                                    <div class="ycams-form-group">

                                        <label
                                            class="ycams-form-label"
                                            for="parent_mobile_number"
                                        >
                                            Mobile Number
                                            <span class="ycams-required">*</span>
                                        </label>

                                        <div class="ycams-phone-wrapper">

                                            <span
                                                class="ycams-phone-code"
                                                id="parent-phone-code"
                                            >
                                                +--
                                            </span>

                                            <input
                                                type="tel"
                                                class="ycams-form-control"
                                                id="parent_mobile_number"
                                                name="parent_mobile_number"
                                                value=""
                                                placeholder="Enter mobile number"
                                                minlength="7"
                                                maxlength="20"
                                                autocomplete="tel"
                                                inputmode="tel"
                                                disabled
                                                required
                                            >

                                        </div>

                                        <div class="ycams-field-tip">
                                            The country code is shown automatically.
                                            Enter the mobile number only.
                                        </div>

                                    </div>


                                    
                                    <div class="ycams-form-group">

                                        <label
                                            class="ycams-form-label"
                                            for="parent_date_of_birth"
                                        >
                                            Date of Birth
                                            <span class="ycams-required">*</span>
                                        </label>

                                        <input
                                            type="date"
                                            class="ycams-form-control"
                                            id="parent_date_of_birth"
                                            name="parent_date_of_birth"
                                            value=""
                                            min="1900-01-01"
                                            max="2006-10-20"
                                            disabled
                                            required
                                        >

                                        <div class="ycams-field-tip">
                                            Parent / Guardian must be at least
                                            20 years old.
                                        </div>

                                    </div>


                                    
                                    <div class="ycams-form-group">

                                        <label
                                            class="ycams-form-label"
                                            for="parent_password"
                                        >
                                            Password
                                            <span class="ycams-required">*</span>
                                        </label>

                                        <div class="ycams-password-wrapper">

                                            <input
                                                type="password"
                                                class="ycams-form-control"
                                                id="parent_password"
                                                name="parent_password"
                                                data-parent-new-account-only
                                                placeholder="Create a secure password"
                                                minlength="8"
                                                autocomplete="new-password"
                                                disabled
                                                required
                                            >

                                            <button
                                                type="button"
                                                class="ycams-password-toggle"
                                                data-password-toggle="parent_password"
                                            >
                                                Show
                                            </button>

                                        </div>

                                        <div class="ycams-password-rules">

                                            <span
                                                class="ycams-password-rule"
                                                data-password-rule="parent-length"
                                            >
                                                At least 8 characters
                                            </span>

                                            <span
                                                class="ycams-password-rule"
                                                data-password-rule="parent-upper"
                                            >
                                                One uppercase letter
                                            </span>

                                            <span
                                                class="ycams-password-rule"
                                                data-password-rule="parent-lower"
                                            >
                                                One lowercase letter
                                            </span>

                                            <span
                                                class="ycams-password-rule"
                                                data-password-rule="parent-number"
                                            >
                                                One number
                                            </span>

                                            <span
                                                class="ycams-password-rule"
                                                data-password-rule="parent-symbol"
                                            >
                                                One special character
                                            </span>

                                        </div>

                                    </div>


                                    
                                    <div class="ycams-form-group">

                                        <label
                                            class="ycams-form-label"
                                            for="parent_password_confirmation"
                                        >
                                            Confirm Password
                                            <span class="ycams-required">*</span>
                                        </label>

                                        <div class="ycams-password-wrapper">

                                            <input
                                                type="password"
                                                class="ycams-form-control"
                                                id="parent_password_confirmation"
                                                name="parent_password_confirmation"
                                                data-parent-new-account-only
                                                placeholder="Enter the same password again"
                                                minlength="8"
                                                autocomplete="new-password"
                                                disabled
                                                required
                                            >

                                            <button
                                                type="button"
                                                class="ycams-password-toggle"
                                                data-password-toggle="parent_password_confirmation"
                                            >
                                                Show
                                            </button>

                                        </div>

                                        <div
                                            class="ycams-field-message"
                                            id="parent-password-match"
                                        ></div>

                                    </div>

                                </div>

                            </div>


                            <div class="ycams-form-actions">

                                <div class="ycams-button-group">

                                    <button
                                        type="button"
                                        class="ycams-button ycams-button-danger"
                                        id="parent-start-again"
                                        data-registration-reset
                                    >
                                        Start Again
                                    </button>

                                </div>

                                <div class="ycams-button-group">

                                    <button
                                        type="submit"
                                        class="ycams-button ycams-button-primary"
                                        id="parent-next"
                                        disabled
                                    >
                                        Save &amp; Continue
                                    </button>

                                </div>

                            </div>

                        </form>

                    </div>

                </div>


                

                <div
                    id="existing-parent-modal"
                    class="ycams-modal-backdrop ycams-is-hidden"
                    hidden
                >

                    <div class="ycams-modal-card">

                        <h3 class="ycams-modal-title">
                            Welcome back!
                        </h3>

                        <p
                            class="ycams-modal-text"
                            id="existing-parent-msg"
                        ></p>

                        <p class="ycams-modal-subtext">
                            If this is your account, you can continue and add another student to your family.
                        </p>

                        <div class="ycams-modal-actions">

                            <button
                                type="button"
                                class="ycams-button ycams-button-secondary"
                                id="modal-cancel-btn"
                            >
                                No, Use a Different ID
                            </button>

                            <button
                                type="button"
                                class="ycams-button ycams-button-primary"
                                id="modal-confirm-btn"
                            >
                                Yes, Continue
                            </button>

                        </div>

                    </div>

                </div>

            

            

            

            

            
            

            <div
                id="registration-reset-modal"
                class="ycams-modal-backdrop ycams-is-hidden"
                role="dialog"
                aria-modal="true"
                aria-labelledby="registration-reset-title"
            >
                <div class="ycams-modal-card">

                    <h3
                        class="ycams-modal-title"
                        id="registration-reset-title"
                    >
                        Start Again?
                    </h3>

                    <p class="ycams-modal-text">
                        Your current registration details will be cleared.
                    </p>

                    <p class="ycams-modal-subtext">
                        You can start fresh with a new Parent / Guardian and Student registration.
                    </p>

                    <div class="ycams-modal-actions">

                        <button
                            type="button"
                            class="ycams-button ycams-button-secondary"
                            id="registration-reset-cancel"
                        >
                            No, Keep My Details
                        </button>

                        <button
                            type="button"
                            class="ycams-button ycams-button-danger"
                            id="registration-reset-confirm"
                        >
                            Yes, Start Again
                        </button>

                    </div>

                </div>
            </div>

        </div>

    </section>


</main>


<!-- ==========================================================
     WEBSITE FOOTER
=========================================================== -->

<div
    class="relative z-10"
>

    <!--
|--------------------------------------------------------------------------
| YCAMS - Youngsters Chess Academy Management System
|--------------------------------------------------------------------------
|
| File            : footer.blade.php
| Module          : Public Website
| Sub Module      : Footer
| Purpose         : Global Website Footer
|
| Description     :
|   Displays the global footer across all public website pages.
|
| Footer Structure:
|       - Academy Logo
|       - Academy Information
|       - Quick Links
|       - Resources
|       - Contact
|       - Legal
|       - Copyright
|       - Creative Ants Attribution
|
| Author          : YCAMS Development Team
| Owner            : Youngsters Chess Academy
|
| Framework        : Laravel 13
| PHP              : 8.3+
|
| Version          : 0.3.4
| Created Date     : 29-Jul-2026
| Last Modified    : 17-Aug-2026
|
|--------------------------------------------------------------------------
|
| CHANGE LOG
|
| v0.3.4
| - Rebalanced desktop footer layout.
| - Separated academy logo from academy information.
| - Academy information now appears beside the logo.
| - Preserved Quick Links, Resources, Contact and Legal columns.
| - Improved use of available horizontal footer space.
| - Preserved simplified copyright bar.
| - Preserved Creative Ants LLC attribution.
| - Improved responsive behaviour.
|
| v0.3.3
| - Separated Academy logo from Academy information on desktop.
| - Added dedicated horizontal Academy branding area.
| - Rebalanced footer into multiple desktop columns.
|
| v0.3.2
| - Added dedicated Legal column.
| - Moved legal links from copyright area into main footer.
| - Simplified copyright bar.
| - Copyright aligned left on desktop.
| - Creative Ants attribution aligned right on desktop.
|
| v0.3.1
| - Improved copyright and legal footer layout.
|
| v0.3.0
| - Updated website navigation links.
| - Removed Gallery link.
| - Added Privacy Policy.
| - Added Terms of Service.
| - Added Cookie Policy.
| - Added Sitemap.
| - Added Creative Ants LLC attribution.
|
|--------------------------------------------------------------------------
-->


<!-- ==========================================================
     WEBSITE FOOTER
=========================================================== -->

<footer
    class="border-t border-slate-200 bg-slate-50"
>


    <!-- ======================================================
         MAIN FOOTER
    ======================================================= -->

    <div
        class="mx-auto max-w-7xl px-6 py-10 lg:px-8 lg:py-12"
    >

        <div
            class="grid grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-6"
        >


            <!-- ==================================================
                 ACADEMY LOGO
            =================================================== -->

            <div
                class="lg:col-span-1"
            >

                <a
                    href="https://mail.youngsterschessacademy.com"
                    class="inline-flex items-start"
                >

                    <img
                        src="https://mail.youngsterschessacademy.com/assets/images/branding/academy-logo.png"
                        alt="Youngsters Chess Academy"
                        class="h-auto w-full max-w-[190px]"
                    >

                </a>

            </div>



            <!-- ==================================================
                 ACADEMY INFORMATION
            =================================================== -->

            <div
                class="lg:col-span-1"
            >

                <h3
                    class="text-sm font-black uppercase tracking-[0.2em] text-slate-900"
                >
                    Academy
                </h3>


                <div
                    class="mt-5 h-1 w-10 rounded-full bg-green-700"
                ></div>


                <p
                    class="mt-5 text-sm leading-7 text-slate-600"
                >
                    Youngsters Chess Academy provides structured chess
                    coaching, competitive opportunities and a positive
                    learning environment to help young players grow
                    with confidence.
                </p>

            </div>



            <!-- ==================================================
                 QUICK LINKS
            =================================================== -->

            <div>

                <h3
                    class="text-sm font-black uppercase tracking-[0.2em] text-slate-900"
                >
                    Quick Links
                </h3>


                <div
                    class="mt-5 h-1 w-10 rounded-full bg-green-700"
                ></div>


                <ul
                    class="mt-5 space-y-3 text-sm"
                >

                    <li>
                        <a
                            href="https://mail.youngsterschessacademy.com"
                            class="text-slate-600 transition duration-300 hover:text-green-700"
                        >
                            Home
                        </a>
                    </li>


                    <li>
                        <a
                            href="https://mail.youngsterschessacademy.com/about"
                            class="text-slate-600 transition duration-300 hover:text-green-700"
                        >
                            About Us
                        </a>
                    </li>


                    <li>
                        <a
                            href="https://mail.youngsterschessacademy.com/programs"
                            class="text-slate-600 transition duration-300 hover:text-green-700"
                        >
                            Programs
                        </a>
                    </li>


                    <li>
                        <a
                            href="https://mail.youngsterschessacademy.com/coaches"
                            class="text-slate-600 transition duration-300 hover:text-green-700"
                        >
                            Coaches
                        </a>
                    </li>


                    <li>
                        <a
                            href="https://mail.youngsterschessacademy.com/achievements"
                            class="text-slate-600 transition duration-300 hover:text-green-700"
                        >
                            Achievements
                        </a>
                    </li>


                    <li>
                        <a
                            href="https://mail.youngsterschessacademy.com/events"
                            class="text-slate-600 transition duration-300 hover:text-green-700"
                        >
                            Events
                        </a>
                    </li>


                    <li>
                        <a
                            href="https://mail.youngsterschessacademy.com/faq"
                            class="text-slate-600 transition duration-300 hover:text-green-700"
                        >
                            FAQ
                        </a>
                    </li>


                    <li>
                        <a
                            href="https://mail.youngsterschessacademy.com/contact"
                            class="text-slate-600 transition duration-300 hover:text-green-700"
                        >
                            Contact
                        </a>
                    </li>

                </ul>

            </div>



            <!-- ==================================================
                 RESOURCES
            =================================================== -->

            <div>

                <h3
                    class="text-sm font-black uppercase tracking-[0.2em] text-slate-900"
                >
                    Resources
                </h3>


                <div
                    class="mt-5 h-1 w-10 rounded-full bg-green-700"
                ></div>


                <ul
                    class="mt-5 space-y-3 text-sm"
                >

                    <li>
                        <a
                            href="https://mail.youngsterschessacademy.com/events"
                            class="text-slate-600 transition duration-300 hover:text-green-700"
                        >
                            Events
                        </a>
                    </li>


                    <li>
                        <a
                            href="https://mail.youngsterschessacademy.com/faq"
                            class="text-slate-600 transition duration-300 hover:text-green-700"
                        >
                            FAQ
                        </a>
                    </li>


                    <li>
                        <a
                            href="https://mail.youngsterschessacademy.com/achievements"
                            class="text-slate-600 transition duration-300 hover:text-green-700"
                        >
                            Achievements
                        </a>
                    </li>


                    <li>
                        <a
                            href="https://mail.youngsterschessacademy.com/sitemap"
                            class="text-slate-600 transition duration-300 hover:text-green-700"
                        >
                            Sitemap
                        </a>
                    </li>

                </ul>

            </div>


            <!-- ==================================================
                 LEGAL
            =================================================== -->

            <div>

                <h3
                    class="text-sm font-black uppercase tracking-[0.2em] text-slate-900"
                >
                    Legal
                </h3>


                <div
                    class="mt-5 h-1 w-10 rounded-full bg-green-700"
                ></div>


                <ul
                    class="mt-5 space-y-3 text-sm"
                >

                    <li>
                        <a
                            href="https://mail.youngsterschessacademy.com/privacy-policy"
                            class="text-slate-600 transition duration-300 hover:text-green-700"
                        >
                            Privacy Policy
                        </a>
                    </li>


                    <li>
                        <a
                            href="https://mail.youngsterschessacademy.com/terms-of-service"
                            class="text-slate-600 transition duration-300 hover:text-green-700"
                        >
                            Terms of Service
                        </a>
                    </li>


                    <li>
                        <a
                            href="https://mail.youngsterschessacademy.com/cookie-policy"
                            class="text-slate-600 transition duration-300 hover:text-green-700"
                        >
                            Cookie Policy
                        </a>
                    </li>


                    <li>
                        <a
                            href="https://mail.youngsterschessacademy.com/sitemap"
                            class="text-slate-600 transition duration-300 hover:text-green-700"
                        >
                            Sitemap
                        </a>
                    </li>

                </ul>

            </div>

            <!-- ==================================================
                 CONTACT
            =================================================== -->

            <div>

                <h3
                    class="text-sm font-black uppercase tracking-[0.2em] text-slate-900"
                >
                    Contact
                </h3>


                <div
                    class="mt-5 h-1 w-10 rounded-full bg-green-700"
                ></div>


                <div
                    class="mt-5 space-y-5 text-sm text-slate-600"
                >


                    <!-- Phone -->

                    <a
                        href="tel:+918072805827"
                        class="flex items-start gap-3 transition duration-300 hover:text-green-700"
                    >

                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            class="mt-0.5 h-5 w-5 shrink-0"
                            aria-hidden="true"
                        >

                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M22 16.92v3a2 2 0 0 1-2.18 2
                                19.79 19.79 0 0 1-8.63-3.07
                                19.5 19.5 0 0 1-6-6
                                A19.79 19.79 0 0 1 2.12 4.18
                                2 2 0 0 1 4.11 2h3
                                a2 2 0 0 1 2 1.72
                                12.84 12.84 0 0 0 .7 2.81
                                2 2 0 0 1-.45 2.11L8.09 9.91
                                a16 16 0 0 0 6 6l1.27-1.27
                                a2 2 0 0 1 2.11-.45
                                12.84 12.84 0 0 0 2.81.7
                                A2 2 0 0 1 22 16.92z"
                            />

                        </svg>


                        <span>
                            +91 8072805827
                        </span>

                    </a>


                    <!-- Email -->

                    <a
                        href="mailto:info@youngsterschessacademy.com"
                        class="flex items-start gap-3 transition duration-300 hover:text-green-700"
                    >

                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            class="mt-0.5 h-5 w-5 shrink-0"
                            aria-hidden="true"
                        >

                            <rect
                                x="3"
                                y="5"
                                width="18"
                                height="14"
                                rx="2"
                            />

                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="m3 7 9 6 9-6"
                            />

                        </svg>


                        <span class="break-all">
                            info@youngsterschessacademy.com
                        </span>

                    </a>


                    <!-- Location -->

                    <div
                        class="flex items-start gap-3"
                    >

                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            class="mt-0.5 h-5 w-5 shrink-0"
                            aria-hidden="true"
                        >

                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M12 21s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12z"
                            />

                            <circle
                                cx="12"
                                cy="9"
                                r="2.5"
                            />

                        </svg>


                        <span>
                            Youngsters Chess Academy
                        </span>

                    </div>

                </div>

                <!-- ==================================================
                        SOCIAL MEDIA
                   =================================================== -->

                <div
                    class="mt-6 flex items-center gap-4"
                >


                    <!-- Facebook -->

                    <span
                        title="Facebook link coming soon"
                        aria-label="Facebook link coming soon"
                        class="cursor-default text-slate-400"
                    >

                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 24 24"
                            fill="currentColor"
                            class="h-5 w-5"
                            aria-hidden="true"
                        >

                            <path
                                d="M13.5 22v-8h2.7l.4-3h-3.1V9.1c0-.9.3-1.5 1.6-1.5h1.7V5c-.3 0-1.3-.1-2.4-.1-2.4 0-4 1.5-4 4.1V11H8v3h2.4v8h3.1z"
                            />

                        </svg>

                    </span>


                    <!-- Instagram -->

                    <span
                        title="Instagram link coming soon"
                        aria-label="Instagram link coming soon"
                        class="cursor-default text-slate-400"
                    >

                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            class="h-5 w-5"
                            aria-hidden="true"
                        >

                            <rect
                                x="3"
                                y="3"
                                width="18"
                                height="18"
                                rx="5"
                            />

                            <circle
                                cx="12"
                                cy="12"
                                r="4"
                            />

                            <circle
                                cx="17.5"
                                cy="6.5"
                                r="1"
                                fill="currentColor"
                                stroke="none"
                            />

                        </svg>

                    </span>


                    <!-- YouTube -->

                    <span
                        title="YouTube link coming soon"
                        aria-label="YouTube link coming soon"
                        class="cursor-default text-slate-400"
                    >

                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 24 24"
                            fill="currentColor"
                            class="h-5 w-5"
                            aria-hidden="true"
                        >

                            <path
                                d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z"
                            />

                        </svg>

                    </span>


                    <!-- LinkedIn -->

                    <span
                        title="LinkedIn link coming soon"
                        aria-label="LinkedIn link coming soon"
                        class="cursor-default text-slate-400"
                    >

                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 24 24"
                            fill="currentColor"
                            class="h-5 w-5"
                            aria-hidden="true"
                        >

                            <path
                                d="M6.5 8.5A1.75 1.75 0 1 1 6.5 5a1.75 1.75 0 0 1 0 3.5zM5 10h3v9H5v-9zm5 0h2.9v1.2h.1c.4-.8 1.4-1.6 2.9-1.6 3.1 0 3.7 2 3.7 4.6V19h-3v-4.3c0-1 0-2.4-1.5-2.4s-1.7 1.1-1.7 2.3V19h-3v-9z"
                            />

                        </svg>

                    </span>

                </div>

                <!-- Academy Motto -->

                <p
                    class="mt-4 text-md font-semibold text-green-700"
                >
                    Making Every Move Count.
                </p>
            </div>





        </div>

    </div>



    <!-- ======================================================
         COPYRIGHT BAR
    ======================================================= -->

    <div
        class="border-t border-slate-200 bg-white"
    >

        <div
            class="mx-auto flex max-w-7xl flex-col gap-2 px-6 py-4 text-xs text-slate-500 sm:flex-row sm:items-center sm:justify-between lg:px-8"
        >


            <!-- ==================================================
                 COPYRIGHT - LEFT
            =================================================== -->

            <div
                class="text-center sm:text-left"
            >

                &copy; 2026

                <span class="font-semibold text-slate-700">
                    Youngsters Chess Academy
                </span>

                <span class="mx-1 text-slate-300">
                    •
                </span>

                All Rights Reserved.

            </div>


            <!-- ==================================================
                 CREATIVE ANTS - RIGHT
            =================================================== -->

            <div
                class="text-center sm:text-right"
            >

                Designed, Developed &amp; Maintained by

                <a
                    href="https://creativeants.tamilpanpalai.com"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="font-semibold text-slate-700 transition duration-300 hover:text-green-700"
                >
                    Creative Ants LLC
                </a>

            </div>


        </div>

    </div>


</footer>

</div>


</body>

</html>