{"id":849,"date":"2026-01-27T05:34:06","date_gmt":"2026-01-27T05:34:06","guid":{"rendered":"https:\/\/fm-connect1.fortmindz.in\/wp-godwin-pinto\/?page_id=849"},"modified":"2026-01-27T05:35:25","modified_gmt":"2026-01-27T05:35:25","slug":"limited-liability-partnership-llp","status":"publish","type":"page","link":"https:\/\/fm-connect1.fortmindz.in\/wp-godwin-pinto\/limited-liability-partnership-llp\/","title":{"rendered":"Limited Liability Partnership (LLP)"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"849\" class=\"elementor elementor-849\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-319226c e-flex e-con-boxed e-con e-parent\" data-id=\"319226c\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;shape_divider_top&quot;:&quot;waves&quot;,&quot;shape_divider_bottom&quot;:&quot;waves&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-shape elementor-shape-top\" aria-hidden=\"true\" data-negative=\"false\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1000 100\" preserveAspectRatio=\"none\">\n\t<path class=\"elementor-shape-fill\" d=\"M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7\n\tc23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4\n\tc21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z\"\/>\n<\/svg>\t\t<\/div>\n\t\t\t\t<div class=\"elementor-shape elementor-shape-bottom\" aria-hidden=\"true\" data-negative=\"false\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1000 100\" preserveAspectRatio=\"none\">\n\t<path class=\"elementor-shape-fill\" d=\"M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7\n\tc23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4\n\tc21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z\"\/>\n<\/svg>\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ad27de3 e-con-full e-flex e-con e-child\" data-id=\"ad27de3\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d688140 elementor-absolute elementor-widget elementor-widget-image\" data-id=\"d688140\" data-element_type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"66\" height=\"66\" src=\"https:\/\/fm-connect1.fortmindz.in\/wp-godwin-pinto\/wp-content\/uploads\/2025\/11\/Frame-16.png\" class=\"attachment-full size-full wp-image-69\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-664cff2 e-flex e-con-boxed e-con e-parent\" data-id=\"664cff2\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-60f8493 elementor-widget elementor-widget-shortcode\" data-id=\"60f8493\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"formouter\">\r\n    <div class=\"form-container\">\r\n        <div id=\"formSection\" class=\"\">\r\n            <div class=\"form-header\">\r\n                <h1 class=\"form-title\">Limited Liability Partnership (LLP)<\/h1>\r\n                <div class=\"progress-steps\"> <span class=\"step-indicator active\"><\/span> <span class=\"step-indicator\"><\/span> <span class=\"step-indicator\"><\/span> <\/div>\r\n            <\/div>\r\n            <div style=\"margin: 20px 0; padding: 15px; background: #fff3cd; border: 1px solid #ffecb5; border-radius: 8px; text-align: center;\">\r\n                <label style=\"font-weight: bold; cursor: pointer;\">\r\n                    <input type=\"checkbox\" id=\"testModeToggle\" onchange=\"toggleTestMode(this.checked)\" style=\"vertical-align: middle;\">\r\n                    TEST MODE: Disable Postcode Lookups (No API calls \/ No credits used)\r\n                <\/label>\r\n                <p style=\"margin: 8px 0 0; font-size: 0.9em; color: #856404;\">\r\n                    Use this while testing the form repeatedly. Turn OFF before going live.\r\n                <\/p>\r\n            <\/div>\r\n            <form id=\"multistepForm\" novalidate>\r\n                <div class=\"step active\" data-step=\"1\">\r\n                    <!-- Company Name & UTR -->\r\n                    <div class=\"input-group-row\">\r\n                        <div class=\"input-field\" style=\"position: relative;\">\r\n                            <label for=\"companyName\" class=\"visually-hidden\">Search your company name<\/label>\r\n                            <input type=\"text\" id=\"companyName\" name=\"companyName\" placeholder=\"Search your company name\" autocomplete=\"off\" class=\"hasicon\" required> \r\n                            <div class=\"error-message\" id=\"error-companyName\"><\/div>\r\n                            <div id=\"companySuggestions\" style=\"display: none; position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ccc; max-height: 200px; overflow-y: auto; z-index: 100;\"><\/div>\r\n                        <\/div>\r\n                        <div class=\"input-field\">\r\n                            <label for=\"companyUTR\" class=\"visually-hidden\">Company UTR number<\/label>\r\n                            <input type=\"text\" id=\"companyUTR\" name=\"companyUTR\" placeholder=\"Company UTR number\" pattern=\"\\d{10}\" maxlength=\"10\" readonly> \r\n                        <\/div>\r\n                    <\/div>\r\n                    <!-- Registered Address - Visible Display + Hidden Textarea for Submission -->\r\n                    <div class=\"registered-address-container\" style=\"display: none;\">\r\n                        <label style=\"display: block;\">\r\n                            Registered Address\r\n                        <\/label>\r\n                        \r\n                        <!-- Visible formatted address with spans (for styling & inspection) -->\r\n                        <div id=\"registeredAddressDisplay\">\r\n                            <!-- Content will be injected here with <span> tags -->\r\n                        <\/div>\r\n                        \r\n                        <!-- Hidden textarea to ensure value is submitted with form -->\r\n                        <textarea id=\"registeredAddressTextarea\" name=\"registeredAddress\" style=\"display: none;\"><\/textarea>\r\n                    <\/div>\r\n                    <p class=\"question\">Is your trading address the same as your registered address?<\/p>\r\n                    <div class=\"radio-group\">\r\n                        <input type=\"radio\" id=\"addressYes\" name=\"sameAddress\" value=\"yes\" checked>\r\n                        <label for=\"addressYes\">Yes<\/label>\r\n                        <input type=\"radio\" id=\"addressNo\" name=\"sameAddress\" value=\"no\">\r\n                        <label for=\"addressNo\">No<\/label>\r\n                    <\/div>\r\n                    <!-- Always visible Postcode Lookup -->\r\n                    <div class=\"addressfieldswrap\">\r\n                        <div class=\"address-lookup-group\" id=\"postcodeLookupContext\">\r\n                        <\/div>\r\n                        <!-- Enter address manually checkbox -->\r\n                        <div class=\"checkbox-manual\">\r\n                            <input type=\"checkbox\" id=\"enterManual\">\r\n                            <label for=\"enterManual\">Enter address manually<\/label>\r\n                        <\/div>\r\n                        <div class=\"error-message\" id=\"error-addressfieldswrap\"><\/div>\r\n                    <\/div>\r\n                    <!-- Always visible 6 address fields -->\r\n                    <div class=\"address-fields\">\r\n                        <div class=\"input-group-row\">\r\n                            <div class=\"input-field\">\r\n                                <input type=\"text\" id=\"houseName\" name=\"houseName\" placeholder=\"House No. or Name\"> \r\n                                <div class=\"error-message\" id=\"error-houseName\"><\/div>\r\n                            <\/div>\r\n                            <div class=\"input-field\">\r\n                                <input type=\"text\" id=\"streetName\" name=\"streetName\" placeholder=\"Street name\"> \r\n                                <div class=\"error-message\" id=\"error-streetName\"><\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"input-group-row\">\r\n                            <div class=\"input-field\">\r\n                                <input type=\"text\" id=\"city\" name=\"city\" placeholder=\"City name\"> \r\n                                <div class=\"error-message\" id=\"error-city\"><\/div>\r\n                            <\/div>\r\n                            <div class=\"input-field\">\r\n                                <input type=\"text\" id=\"postCode\" name=\"postCode\" placeholder=\"Post Code\"> \r\n                                <div class=\"error-message\" id=\"error-postCode\"><\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"input-group-row\">\r\n                            <input type=\"text\" id=\"country\" placeholder=\"Country\" name=\"country\"> \r\n                            <div class=\"error-message\" id=\"error-country\"><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <!-- Accountant question (kept as in your screenshot) -->\r\n                    <p class=\"question\">Are you moving from another accountant?<\/p>\r\n                    <div class=\"radio-group radio-accountant\">\r\n                        <input type=\"radio\" id=\"accountantYes\" name=\"movingAccountant\" value=\"yes\">\r\n                        <label for=\"accountantYes\">Yes<\/label>\r\n                        <input type=\"radio\" id=\"accountantNo\" name=\"movingAccountant\" value=\"no\" checked>\r\n                        <label for=\"accountantNo\">No<\/label>\r\n                    <\/div>\r\n                    <div class=\"displayforanotheraccountantyes\" style=\"display: none;\">\r\n                        <div class=\"input-group-row accountant-details\">\r\n                            <div class=\"input-field\">\r\n                                <input type=\"text\" id=\"accountantName\" name=\"accountantName\" placeholder=\"Name of accountant\"> \r\n                                <div class=\"error-message\" id=\"error-accountantName\"><\/div>\r\n                            <\/div>\r\n                            <div class=\"input-field\">\r\n                                <input type=\"email\" id=\"accountantEmail\" name=\"accountantEmail\" placeholder=\"Email of accountant\">\r\n                                <div class=\"error-message\" id=\"error-accountantEmail\"><\/div> \r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <!-- Terms checkbox -->\r\n                    <div class=\"checkbox-terms\">\r\n                        <input type=\"checkbox\" id=\"terms\" name=\"terms\" required>\r\n                        <label for=\"terms\">I have read, understood and agree to the <a href=\"https:\/\/fm-connect1.fortmindz.in\/wp-godwin-pinto\/terms-conditions\" target=\"_blank\">full terms and conditions<\/a><\/label>\r\n                        <div class=\"error-message\" id=\"error-terms\"><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"step\" data-step=\"2\">\r\n                    <div id=\"directorEntriesContainer\">\r\n                        <!-- Initial Director Entry -->\r\n                        <div class=\"director-entry\" data-index=\"1\">\r\n                            <div class=\"director-row\">\r\n                                <div class=\"name\">\r\n                                    <h3>Partner\/Shareholder 1<\/h3>\r\n                                <\/div>\r\n                                <div class=\"radio-group directorshareholder-type\">\r\n                                    <input type=\"radio\" id=\"isDirector1\" name=\"directorRole1\" value=\"director\" checked>\r\n                                    <label for=\"isDirector1\">Partner<\/label>\r\n                                    <input type=\"radio\" id=\"isShareholder1\" name=\"directorRole1\" value=\"shareholder\">\r\n                                    <label for=\"isShareholder1\">Shareholder<\/label>\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                            <div class=\"input-group-row\">\r\n                                <div class=\"input-field\">\r\n                                    <input type=\"text\" id=\"directorFirstName1\" name=\"directorFirstName1\" placeholder=\"Your first name\">\r\n                                    <div class=\"error-message\" id=\"error-directorFirstName1\"><\/div>\r\n                                <\/div>\r\n                                <div class=\"input-field\">\r\n                                    <input type=\"text\" id=\"directorSurname1\" name=\"directorSurname1\" placeholder=\"Surname\">\r\n                                    <div class=\"error-message\" id=\"error-directorSurname1\"><\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                            <!-- Postcode Lookup (controlled by manual checkbox) -->\r\n                            <div class=\"addresswrap\">\r\n                                <div class=\"address-lookup-group postcode-lookup-director\" id=\"postcodeLookupContext1\">\r\n                                    <!-- Ideal Postcodes will inject postcode field + Find address button here -->\r\n                                <\/div>\r\n\r\n                                <!-- Manual entry checkbox -->\r\n                                <div class=\"checkbox-manual director-manual\">\r\n                                    <input type=\"checkbox\" id=\"enterManual1\" class=\"director-manual-checkbox\">\r\n                                    <label for=\"enterManual1\">Enter address manually<\/label>\r\n                                <\/div>\r\n                                <div class=\"error-message\" id=\"error-addresswrap\"><\/div>\r\n                            <\/div>\r\n\r\n                            <!-- Always Visible Address Fields -->\r\n                            <div class=\"address-fields-director initially-hidden\">\r\n                                <div class=\"input-group-row\">\r\n                                    <div class=\"input-field w50\">\r\n                                        <input type=\"text\" id=\"houseNameManual1\" name=\"houseNameManual1\" placeholder=\"House No. or Name\">\r\n                                        <div class=\"error-message\" id=\"error-houseNameManual1\"><\/div>\r\n                                    <\/div>\r\n                                    <div class=\"input-field w50\">\r\n                                        <input type=\"text\" id=\"streetName1\" name=\"streetName1\" placeholder=\"Street name\">\r\n                                        <div class=\"error-message\" id=\"error-streetName1\"><\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                                <div class=\"input-group-row\">\r\n                                    <div class=\"input-field w50\">\r\n                                        <input type=\"text\" id=\"city1\" name=\"city1\" placeholder=\"City name\">\r\n                                        <div class=\"error-message\" id=\"error-city1\"><\/div>\r\n                                    <\/div>\r\n                                    <div class=\"input-field w50\">\r\n                                        <input type=\"text\" id=\"postCodeManual1\" name=\"postCodeManual1\" placeholder=\"Post Code\">\r\n                                        <div class=\"error-message\" id=\"error-postCodeManual1\"><\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                                <div class=\"input-group-row\">\r\n                                    <div class=\"input-field\">\r\n                                        <input type=\"text\" id=\"country1\" name=\"country1\" placeholder=\"Country\" value=\"United Kingdom\" readonly>\r\n                                        <div class=\"error-message\" id=\"error-country1\"><\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                            <!-- Rest of fields (DOB, Phone, Email, Gender, NI, Convictions, Signing) -->\r\n                            <div class=\"input-group-row\">\r\n                                <div class=\"input-field w50\">\r\n                                    <input type=\"date\" id=\"directorDOB1\" name=\"directorDOB1\" placeholder=\"Date of Birth: dd\/mm\/yyy\" required>\r\n                                    <div class=\"error-message\" id=\"error-directorDOB1\"><\/div>\r\n                                <\/div>\r\n                                <div class=\"input-field w50\">\r\n                                    <input type=\"tel\" id=\"directorPhone1\" name=\"directorPhone1\" placeholder=\"Phone number (10 digits)\" required=\"required\">\r\n                                    <div class=\"error-message\" id=\"error-directorPhone1\"><\/div>\r\n                                    <!-- <div style=\"display: flex; gap: 5px;\">\r\n                                        <select id=\"directorCountryCode1\" name=\"directorCountryCode1\" style=\"width: 100px;\">\r\n                                            <option value=\"+44\">UK (+44)<\/option>\r\n                                            <option value=\"+1\">USA (+1)<\/option>\r\n                                            <option value=\"+353\">IE (+353)<\/option>\r\n                                        <\/select>\r\n                                        <input type=\"tel\" id=\"directorPhone1\" name=\"directorPhone1\" placeholder=\"Phone number (10 digits)\" required>\r\n                                    <\/div>\r\n                                    <div class=\"error-message\" id=\"error-directorPhone1\"><\/div> -->\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div class=\"input-group-row\">\r\n                                <div class=\"input-field w50\">\r\n                                    <input type=\"email\" id=\"directorEmail1\" name=\"directorEmail1\" placeholder=\"Email\" required>\r\n                                    <div class=\"error-message\" id=\"error-directorEmail1\"><\/div>\r\n                                <\/div>\r\n                                <div class=\"input-field gender-group w50\">\r\n                                    <p class=\"gender-label\">Gender<\/p>\r\n                                    <div class=\"radio-group-horizontal\">\r\n                                        <span><input type=\"radio\" id=\"genderMale1\" name=\"gender1\" value=\"Male\"><label for=\"genderMale1\">Male<\/label><\/span>\r\n                                        <span><input type=\"radio\" id=\"genderFemale1\" name=\"gender1\" value=\"Female\"><label for=\"genderFemale1\">Female<\/label><\/span>\r\n                                        <span><input type=\"radio\" id=\"genderOther1\" name=\"gender1\" value=\"Other\"><label for=\"genderOther1\">Other<\/label><\/span>\r\n                                        <div class=\"error-message\" id=\"error-gender1\"><\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div class=\"input-group-row\">\r\n                                <div class=\"input-field\">\r\n                                    <input type=\"text\" id=\"directorNI1\" name=\"directorNI1\" placeholder=\"NI number\" required>\r\n                                    <div class=\"error-message\" id=\"error-directorNI1\"><\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <p class=\"question\">Any pending convictions?<\/p>\r\n                            <div class=\"radio-group conviction-group\">\r\n                                <input type=\"radio\" id=\"convictionsYes1\" name=\"convictions1\" value=\"yes\">\r\n                                <label for=\"convictionsYes1\">Yes<\/label>\r\n                                <input type=\"radio\" id=\"convictionsNo1\" name=\"convictions1\" value=\"no\" checked>\r\n                                <label for=\"convictionsNo1\">No<\/label>\r\n                                <div class=\"error-message\" id=\"error-convictions1\"><\/div>\r\n                            <\/div>\r\n                            <p class=\"question\">Will this pension be signing the form?<\/p>\r\n                            <div class=\"radio-group pension-group\">\r\n                                <input type=\"radio\" id=\"pensionSignYes1\" name=\"pensionSign1\" value=\"yes\">\r\n                                <label for=\"pensionSignYes1\">Yes<\/label>\r\n                                <input type=\"radio\" id=\"pensionSignNo1\" name=\"pensionSign1\" value=\"no\" checked>\r\n                                <label for=\"pensionSignNo1\">No<\/label>\r\n                                <div class=\"error-message\" id=\"error-pensionSign1\"><\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <button type=\"button\" class=\"add-director-btn\" id=\"addDirectorBtn\">\r\n                        <img decoding=\"async\" src=\"https:\/\/fm-connect1.fortmindz.in\/wp-godwin-pinto\/wp-content\/themes\/hello-theme-child-master\/assets\/images\/plus.png\" alt=\"\"> Add Partner\/Shareholder\r\n                    <\/button>\r\n                <\/div>\r\n\r\n                <div class=\"step\" data-step=\"3\">\r\n                    <div class=\"col-outer payment-section\">\r\n                        <div class=\"col\">\r\n                            <div class=\"tabcontainer\">\r\n                                <div class=\"payment-element\" id=\"payment-element\" style=\"min-height: 300px;\"><\/div>\r\n                                <div id=\"payment-errors\" role=\"alert\" style=\"color: #fa755a; margin-top: 10px; min-height: 20px;\"><\/div>\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                        <div class=\"col\">\r\n                            <div class=\"monthly\"><\/div>\r\n                            <div class=\"breakdown\">\r\n                                <p>Monthly fee breakdown<\/p>\r\n                            <\/div>\r\n                            <div class=\"table\">\r\n                                <ul>\r\n                                    <li><span>Accounts Package<\/span><span>\u00a349<\/span><\/li>\r\n                                    <li><span>Bookkeeping<\/span><span>\u00a329<\/span><\/li>\r\n                                    <li><span>VAT returns<\/span><span>\u00a315<\/span><\/li>\r\n                                    <li><span>Payroll<\/span><span>\u00a310<\/span><\/li>\r\n                                    <li class=\"total\"><span>Total<\/span><span>\u00a3103<\/span><\/li>\r\n                                <\/ul>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"checkbox-terms mb-28\">\r\n                        <input type=\"checkbox\" id=\"terms-last\" name=\"terms-last-step\" required>\r\n                        <label for=\"terms-last\">I understand that Stripe will be collecting payments on behalf of AccTek Ltd and confirm that I am the account holder and the only person required to authorise debits from this account.<\/label>\r\n                        <div class=\"error-message\" id=\"error-terms-last\"><\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"sign\">                    \r\n                        <div class=\"signature-upload-container\">\r\n                            <input type=\"file\" id=\"signatureUpload\" name=\"signatureUpload\" accept=\"image\/*\" >\r\n                            \r\n                            \r\n                            <div id=\"signaturePreviewContainer\">\r\n                                <!-- Preview will appear here -->\r\n                            <\/div>\r\n                        <\/div>\r\n                        <p>Your Signature above<\/p>\r\n                        \r\n                        <!-- <div class=\"error-message\" id=\"error-signatureUpload\" style=\"color: #fa755a;\"><\/div>-->\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"form-navigation\">\r\n                    <button type=\"button\" class=\"previous-btn\" id=\"previousBtn\" style=\"display: none;\">Previous<\/button>\r\n                    <button type=\"button\" class=\"next-btn\" id=\"nextBtn\">Next<\/button>\r\n                    <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\" style=\"display: none;\" name=\"submit\">Submit<\/button>\r\n                <\/div>\r\n            <\/form>\r\n        <\/div>\r\n        <!-- Thank You Section (shown only on success) -->\r\n        <div id=\"thankYouSection\" class=\"hidden\">\r\n            <div class=\"thank-you-section\">\r\n                <img decoding=\"async\" src=\"https:\/\/fm-connect1.fortmindz.in\/wp-godwin-pinto\/wp-content\/themes\/hello-theme-child-master\/assets\/images\/thank-you-envelope.png\" alt=\"Thank you\">\r\n                \r\n                <h2>Thank you<\/h2>\r\n                \r\n                <p>\r\n                    Thank you for submitting your registration form! One of our admin team will be in contact with you shortly to confirm your registration and get set up with your accountant.\r\n                <\/p>\r\n                \r\n                <button id=\"downloadPdfBtn\">\r\n                    Save as PDF\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        \r\n    <\/div>\r\n<\/div>\r\n<style type=\"text\/css\">\r\n    \/* Ensure errors inside horizontal radio groups don't break layout *\/\r\n    .radio-group-horizontal .error-message {\r\n        width: 100%;\r\n        display: none; \/* Default hidden *\/\r\n        margin-top: 8px;\r\n    }\r\n\r\n    .radio-group-horizontal .error-message.visible {\r\n        display: block !important; \/* Force show *\/\r\n    }\r\n\r\n    .hidden{display: none;}\r\n    \r\n    \/* ==================== ERROR MESSAGES ==================== *\/\r\n    .error-message {\r\n        color: #fa755a;\r\n        font-size: 0.85rem;\r\n        margin-top: 4px;\r\n        \/* FIX: Default to HIDDEN. JS will make it 'block' when needed. *\/\r\n        display: none; \r\n    }\r\n\r\n    \/* Specific class to FORCE visibility (used by JS) *\/\r\n    .error-message.visible {\r\n        display: block !important;\r\n    }\r\n\r\n    .input-error {\r\n        border-color: #fa755a !important;\r\n        background-color: #fff5f5;\r\n    }\r\n    .input-error:focus {\r\n        outline: 2px solid #fa755a;\r\n    }\r\n\r\n    \/* ==================== ADDRESS FIELDS ==================== *\/\r\n    .address-fields-director {\r\n        \/* Ensure they are hidden by default *\/\r\n        display: none;\r\n    }\r\n\r\n    \/* Show when active class is present *\/\r\n    .address-fields-director.active {\r\n        display: block;\r\n    }\r\n\r\n    \/* CRITICAL: FORCE HIDE IF CLASS IS PRESENT *\/\r\n    .address-fields-director.initially-hidden {\r\n        display: none !important;\r\n    }\r\n    \r\n    input[readonly] {\r\n        background-color: #f8f9fa;\r\n        cursor: not-allowed;\r\n    }\r\n\r\n    \/* ==================== STEPS ==================== *\/\r\n    .step {\r\n        display: none !important;\r\n        opacity: 0;\r\n        transition: opacity 0.3s ease;\r\n    }\r\n\r\n    .step.active {\r\n        display: block !important;\r\n        opacity: 1;\r\n    }\r\n\r\n    .step.force-active {\r\n        display: block !important;\r\n        opacity: 1 !important;\r\n    }\r\n\r\n    .step-indicator.force-active {\r\n        background-color: #2c7a2c !important;\r\n        opacity: 1 !important;\r\n    }\r\n\r\n    #nextBtn, #previousBtn {\r\n        cursor: pointer;\r\n    }\r\n    \r\n    \/* General helper *\/\r\n    .force-visible {\r\n        display: block !important;\r\n    }\r\n\r\n    .address-fields {\r\n        display: none; \r\n    }\r\n\r\n    \/* Visual highlight for a director entry that failed validation *\/\r\n    .director-entry.validation-error {\r\n        border: 1px solid #fa755a !important;\r\n        background-color: #fff5f5;\r\n        padding: 15px !important;\r\n        border-radius: 8px;\r\n        margin-bottom: 20px;\r\n    }\r\n<\/style>\r\n<script src=\"https:\/\/js.stripe.com\/v3\/\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@ideal-postcodes\/postcode-lookup-bundled@2\"><\/script>\r\n<!-- jsPDF Library -->\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\r\n<script src=\"https:\/\/html2canvas.hertzen.com\/dist\/html2canvas.min.js\"><\/script>\r\n\r\n\r\n\r\n<script type=\"text\/javascript\">\r\n    const ajaxurl = 'https:\/\/fm-connect1.fortmindz.in\/wp-godwin-pinto\/wp-admin\/admin-ajax.php';\r\n    const ajaxNonce = '258e9ecfc5';\r\n<\/script>\r\n<script type=\"text\/javascript\">\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n    \/\/ HubSpot constants\r\n    const HUBSPOT_PORTAL_ID_NEW = '147342664';\r\n    const HUBSPOT_FORM_GUID_NEW = '73f3bea7-7e9c-4f6f-a7d6-27956ba6a0aa';\r\n\r\n    const form = document.getElementById('multistepForm');\r\n    const companyNameInput = document.getElementById('companyName');\r\n    const companyUTRInput = document.getElementById('companyUTR');\r\n    const registeredAddressTextarea = document.getElementById('registeredAddressTextarea');\r\n    const suggestionsDiv = document.getElementById('companySuggestions');\r\n    const proxyUrl = '\/wp-godwin-pinto\/wp-content\/themes\/hello-theme-child-master\/form-builder\/proxy-companies-house.php';\r\n    let directorCount = 1;\r\n    window.directorVisibilityState = {}; \r\n\r\n    \/\/ Stripe variables\r\n    let stripe = null;\r\n    let elements = null;\r\n    let paymentElement = null;\r\n    let clientSecret = null;\r\n\r\n    \/\/ GLOBAL FLAG FOR DIRECTOR ADDRESS VISIBILITY\r\n    window.isDirectorFirstLoad = true;\r\n\r\n    \/\/ ==================== GET FORM DATA ====================\r\n    function getAllFormFields() {\r\n        if (!form) return {};\r\n        const formData = new FormData(form);\r\n        const data = {};\r\n        for (let [key, value] of formData.entries()) {\r\n            data[key] = value;\r\n        }\r\n        let max = 0;\r\n        Object.keys(data).forEach(k => {\r\n            const match = k.match(\/directorFirstName(\\d+)\/);\r\n            if (match) max = Math.max(max, parseInt(match[1]));\r\n        });\r\n        data._directorCount = max || 1;\r\n        const params = new URLSearchParams(window.location.search);\r\n        data.transactionId = params.get('payment_intent') || 'Test-Mode';\r\n        data.signatureDataURL = sessionStorage.getItem('signatureDataURL') || '';\r\n        return data;\r\n    }\r\n\r\n    \/\/ ==================== HUBSPOT SUBMISSION ON SUCCESS ====================\r\n    if (window.location.search.includes('payment=success')) {\r\n        (function() {\r\n            const saved = sessionStorage.getItem('companySignupFormData');\r\n            if (!saved) return;\r\n            const data = JSON.parse(saved);\r\n            const transactionId = new URLSearchParams(window.location.search).get('payment_intent') || 'Test-Mode';\r\n            const signatureURL = sessionStorage.getItem('signatureDataURL') || '';\r\n\r\n            function getHubspotUtk() {\r\n                const cookies = document.cookie.split(';');\r\n                for (let cookie of cookies) {\r\n                    cookie = cookie.trim();\r\n                    if (cookie.startsWith('hubspotutk=')) return cookie.substring(11);\r\n                }\r\n                return '';\r\n            }\r\n\r\n            const hsFields = [\r\n                { name: \"company\", value: data.companyName || '' },\r\n                { name: \"company_utr_number\", value: data.companyUTR || '' },\r\n                { name: \"registered_address\", value: data.registeredAddressTextarea || '' },\r\n                { name: \"same_address\", value: data.sameAddress === 'yes' ? 'Yes' : 'No' },\r\n                { name: \"house_name\", value: data.houseName || data.houseNameManual1 || '' },\r\n                { name: \"address\", value: data.streetName || data.streetName1 || '' },\r\n                { name: \"city\", value: data.city || data.city1 || '' },\r\n                { name: \"country\", value: data.country || 'United Kingdom' },\r\n                { name: \"zip\", value: data.postCode || data.postCodeManual1 || '' },\r\n                { name: \"another_account\", value: data.movingAccountant === 'yes' ? 'Yes' : 'No' },\r\n                { name: \"accountant_name\", value: data.accountantName || '' },\r\n                { name: \"email\", value: data.accountantEmail || '' },\r\n                { name: \"transaction_id\", value: transactionId },\r\n                { name: \"signature\", value: signatureURL || '' }\r\n            ];\r\n\r\n            for (let i = 1; i <= 3; i++) {\r\n                if (data[`directorFirstName${i}`]) {\r\n                    hsFields.push(\r\n                        { name: `role_${i}`, value: data[`directorRole${i}`] === 'director' ? 'Director' : 'Shareholder' },\r\n                        { name: `role_${i}_first_name`, value: data[`directorFirstName${i}`] || '' },\r\n                        { name: `role_${i}_last_name`, value: data[`directorSurname${i}`] || '' },\r\n                        { name: `role_house_name_${i}`, value: data[`houseNameManual${i}`] || '' },\r\n                        { name: `role_${i}_street_name`, value: data[`streetName${i}`] || '' },\r\n                        { name: `role_${i}_city_name`, value: data[`city${i}`] || '' },\r\n                        { name: `role_${i}_post_code`, value: data[`postCodeManual${i}`] || '' },\r\n                        { name: `role_${i}_country`, value: 'United Kingdom' },\r\n                        { name: `role_${i}_date`, value: data[`directorDOB${i}`] || '' },\r\n                        { name: `role_${i}_phone`, value: data[`directorPhone${i}`] || '' },\r\n                        { name: `role_${i}_email`, value: data[`directorEmail${i}`] || '' },\r\n                        { name: `role_${i}_gender`, value: data[`gender${i}`] || '' },\r\n                        { name: `role_${i}_convictions_pending_`, value: data[`convictions${i}`] === 'yes' ? 'Yes' : 'No' },\r\n                        { name: `role_${i}_signing_pension_`, value: data[`pensionSign${i}`] === 'yes' ? 'Yes' : 'No' }\r\n                    );\r\n                }\r\n            }\r\n\r\n            const payload = {\r\n                fields: hsFields,\r\n                context: {\r\n                    hutk: getHubspotUtk(),\r\n                    pageUri: window.location.href,\r\n                    pageName: document.title\r\n                }\r\n            };\r\n\r\n            fetch('https:\/\/api-eu1.hsforms.com\/submissions\/v3\/integration\/submit\/147342664\/73f3bea7-7e9c-4f6f-a7d6-27956ba6a0aa', {\r\n                method: 'POST',\r\n                headers: { 'Content-Type': 'application\/json' },\r\n                body: JSON.stringify(payload)\r\n            })\r\n            .then(res => console.log(res.ok ? 'HubSpot OK' : 'HubSpot failed'))\r\n            .catch(err => console.error('HubSpot error:', err));\r\n        })();\r\n    }\r\n\r\n    \/\/ ==================== PDF Download ==================\r\n    document.getElementById('downloadPdfBtn').addEventListener('click', async function () {\r\n        const { jsPDF } = window.jspdf;\r\n        const saved = sessionStorage.getItem('companySignupFormData');\r\n        if (!saved) { alert('No form data found.'); return; }\r\n        const data = JSON.parse(saved);\r\n        const urlParams = new URLSearchParams(window.location.search);\r\n        const transactionId = urlParams.get('payment_intent') || 'Test-Mode';\r\n\r\n        const pdfContent = document.createElement('div');\r\n        pdfContent.style.padding = '40px';\r\n        pdfContent.style.fontFamily = 'Arial, sans-serif';\r\n        pdfContent.style.background = 'white';\r\n        pdfContent.style.color = '#333';\r\n        pdfContent.style.maxWidth = '800px';\r\n        pdfContent.style.margin = '0 auto';\r\n        pdfContent.style.lineHeight = '1.6';\r\n        pdfContent.style.fontSize = '14px';\r\n\r\n        let directorsHTML = '';\r\n        const directorKeys = Object.keys(data).filter(key => key.startsWith('directorFirstName'));\r\n        if (directorKeys.length > 0) {\r\n            directorKeys.forEach((key, i) => {\r\n                const idx = i + 1;\r\n                directorsHTML += `\r\n                    <h3 style=\"margin-top:30px; color:#2c7a2c; font-size:18px;\">Director\/Shareholder ${idx}<\/h3>\r\n                    <p><strong>Role:<\/strong> ${data[`directorRole${idx}`] || 'director'}<\/p>\r\n                    <p><strong>Name:<\/strong> ${data[`directorFirstName${idx}`] || ''} ${data[`directorSurname${idx}`] || ''}<\/p>\r\n                    <p><strong>Email:<\/strong> ${data[`directorEmail${idx}`] || ''}<\/p>\r\n                    <p><strong>Phone:<\/strong> ${data[`directorPhone${idx}`] || ''}<\/p>\r\n                    <p><strong>Date of Birth:<\/strong> ${data[`directorDOB${idx}`] || ''}<\/p>\r\n                    <p><strong>Gender:<\/strong> ${data[`gender${idx}`] || ''}<\/p>\r\n                    <p><strong>NI Number:<\/strong> ${data[`directorNI${idx}`] || ''}<\/p>\r\n                    <p><strong>Pending Convictions:<\/strong> ${data[`convictions${idx}`] === 'yes' ? 'Yes' : 'No'}<\/p>\r\n                    <p><strong>Will Sign Form:<\/strong> ${data[`pensionSign${idx}`] === 'yes' ? 'Yes' : 'No'}<\/p>\r\n                    <h4 style=\"margin-top:15px; font-size:16px;\">Address<\/h4>\r\n                    <p><strong>House No.\/Name:<\/strong> ${data[`houseNameManual${idx}`] || ''}<\/p>\r\n                    <p><strong>Street:<\/strong> ${data[`streetName${idx}`] || ''}<\/p>\r\n                    <p><strong>City:<\/strong> ${data[`city${idx}`] || ''}<\/p>\r\n                    <p><strong>Post Code:<\/strong> ${data[`postCodeManual${idx}`] || ''}<\/p>\r\n                    <p><strong>Country:<\/strong> United Kingdom<\/p>\r\n                    <hr style=\"margin:30px 0; border:0; border-top:1px solid #eee;\">\r\n                `;\r\n            });\r\n        } else {\r\n            directorsHTML = '<p>No directors added<\/p>';\r\n        }\r\n        const signatureDataURL = sessionStorage.getItem('signatureDataURL');\r\n        const signatureSection = signatureDataURL\r\n            ? `<div style=\"margin-top: 100px; text-align: center; page-break-inside: avoid;\">\r\n                 <p style=\"font-size: 18px; font-weight: bold; margin-bottom: 30px;\">Signed by:<\/p>\r\n                 <img decoding=\"async\" src=\"${signatureDataURL}\" style=\"max-height: 140px; max-width: 500px; background: white;\" alt=\"Customer Signature\">\r\n                 <p style=\"margin-top: 20px; font-style: italic; color: #555;\">Signature Date: ${new Date().toLocaleDateString('en-GB')}<\/p>\r\n               <\/div>`\r\n            : `<div style=\"margin-top: 100px; text-align: center; color: #999;\"><p><em>No signature uploaded<\/em><\/p><\/div>`;\r\n\r\n        pdfContent.innerHTML = `\r\n            <h1 style=\"text-align:center; color:#2c7a2c; font-size:30px; margin-bottom:10px;\">Company Registration Confirmation<\/h1>\r\n            <p style=\"text-align:center; font-size:18px;\"><strong>Transaction ID:<\/strong> ${transactionId}<\/p>\r\n            <p style=\"text-align:center; font-size:16px;\">Date: ${new Date().toLocaleDateString('en-GB')}<\/p>\r\n            <hr style=\"margin:40px 0; border:0; border-top:2px solid #2c7a2c;\">\r\n            <h2 style=\"color:#2c7a2c; font-size:22px; margin-top:30px;\">Company Details<\/h2>\r\n            <p><strong>Company Name:<\/strong> ${data.companyName || ''}<\/p>\r\n            <p><strong>UTR Number:<\/strong> ${data.companyUTR || ''}<\/p>\r\n            <p><strong>Trading Address Same as Registered:<\/strong> ${data.sameAddress === 'yes' ? 'Yes' : 'No'}<\/p>\r\n            ${data.movingAccountant === 'yes' ? `\r\n            <h2 style=\"color:#2c7a2c; font-size:22px; margin-top:30px;\">Another accountant<\/h2>\r\n            <p><strong>Name:<\/strong> ${data.accountantName || ''}<\/p>\r\n            <p><strong>Email:<\/strong> ${data.accountantEmail || ''}<\/p>\r\n            ` : ''}\r\n            <h2 style=\"color:#2c7a2c; font-size:22px; margin-top:30px;\">Company Address<\/h2>\r\n            <p><strong>House No.\/Name:<\/strong> ${data.houseName || data.houseNameManual1 || ''}<\/p>\r\n            <p><strong>Street:<\/strong> ${data.streetName || data.streetName1 || ''}<\/p>\r\n            <p><strong>City:<\/strong> ${data.city || data.city1 || ''}<\/p>\r\n            <p><strong>Post Code:<\/strong> ${data.postCode || data.postCodeManual1 || ''}<\/p>\r\n            <p><strong>Country:<\/strong> ${data.country || 'United Kingdom'}<\/p>\r\n            <h2 style=\"color:#2c7a2c; font-size:22px; margin-top:40px;\">Partner \/ Shareholders<\/h2>\r\n            ${directorsHTML}\r\n            ${signatureSection}\r\n            <div style=\"margin-top:80px; text-align:center; color:#777; font-size:14px;\">\r\n                <p>Thank you for registering with us.<\/p>\r\n            <\/div>\r\n        `;\r\n\r\n        document.body.appendChild(pdfContent);\r\n        pdfContent.style.position = 'absolute';\r\n        pdfContent.style.left = '-9999px';\r\n        pdfContent.style.top = '0';\r\n        pdfContent.style.width = '800px';\r\n\r\n        const canvas = await html2canvas(pdfContent, { scale: 2, useCORS: true, logging: false });\r\n        const imgData = canvas.toDataURL('image\/png');\r\n        const pdf = new jsPDF('p', 'mm', 'a4');\r\n        const pdfWidth = pdf.internal.pageSize.getWidth();\r\n        const pdfHeight = pdf.internal.pageSize.getHeight();\r\n        const imgWidth = pdfWidth - 30;\r\n        const imgHeight = (canvas.height * imgWidth) \/ canvas.width;\r\n        let heightLeft = imgHeight;\r\n        let position = 15;\r\n\r\n        pdf.addImage(imgData, 'PNG', 15, position, imgWidth, imgHeight);\r\n        heightLeft -= pdfHeight - 30;\r\n        while (heightLeft > 0) {\r\n            position = heightLeft - imgHeight + 15;\r\n            pdf.addPage();\r\n            pdf.addImage(imgData, 'PNG', 15, position, imgWidth, imgHeight);\r\n            heightLeft -= pdfHeight - 30;\r\n        }\r\n        pdf.save(`Company-Registration-${transactionId}.pdf`);\r\n        document.body.removeChild(pdfContent);\r\n        sessionStorage.removeItem('companySignupFormData');\r\n        sessionStorage.removeItem('signatureDataURL');\r\n    });\r\n\r\n    \/\/ ==================== FORM PERSISTENCE ====================\r\n    form.addEventListener('input', function() {\r\n        const data = {};\r\n        const formData = new FormData(form);\r\n        for (let [key, value] of formData.entries()) {\r\n            if (data[key]) {\r\n                if (Array.isArray(data[key])) data[key].push(value);\r\n                else data[key] = [data[key], value];\r\n            } else {\r\n                data[key] = value;\r\n            }\r\n        }\r\n        data._directorCount = directorCount;\r\n        sessionStorage.setItem('companySignupFormData', JSON.stringify(data));\r\n    });\r\n\r\n    \/\/ ==================== RESTORE DATA ====================\r\n    function restoreFormData() {\r\n        const saved = sessionStorage.getItem('companySignupFormData');\r\n        if (!saved) return;\r\n        const data = JSON.parse(saved);\r\n        const directorCountFromData = data._directorCount || 1;\r\n        \r\n        \/\/ Restore base fields (Step 1)\r\n        Object.keys(data).forEach(key => {\r\n            if (key.startsWith('director') || key === '_directorCount' || key === 'signatureDataURL') return; \r\n            \r\n            const elements = form.querySelectorAll(`[name=\"${key}\"]`);\r\n            if (elements.length === 0) return;\r\n            elements.forEach(el => {\r\n                if (el.type === 'file') return;\r\n                if (el.type === 'radio' || el.type === 'checkbox') {\r\n                    const values = Array.isArray(data[key]) ? data[key] : [data[key]];\r\n                    el.checked = values.includes(el.value);\r\n                } else {\r\n                    el.value = Array.isArray(data[key]) ? data[key][0] : data[key];\r\n                }\r\n            });\r\n        });\r\n\r\n        ['sameAddress', 'movingAccountant'].forEach(name => {\r\n            const radios = form.querySelectorAll(`input[name=\"${name}\"]`);\r\n            radios.forEach(radio => {\r\n                radio.checked = radio.value === data[name];\r\n            });\r\n        });\r\n\r\n        \/\/ Restore directors (Step 2)\r\n        let currentDirectorCount = document.querySelectorAll('.director-entry').length;\r\n        if (directorCountFromData > currentDirectorCount) {\r\n            while (currentDirectorCount < directorCountFromData) {\r\n                document.getElementById('addDirectorBtn').click();\r\n                currentDirectorCount++;\r\n            }\r\n        } else if (directorCountFromData < currentDirectorCount) {\r\n            console.warn('Extra directors detected; clearing.');\r\n        }\r\n\r\n        \/\/ Restore each director's data\r\n        for (let i = 1; i <= directorCountFromData; i++) {\r\n            const entry = document.querySelector(`.director-entry[data-index=\"${i}\"]`);\r\n            if (!entry) continue;\r\n            Object.keys(data).filter(k => k.includes(`director${i}`)).forEach(key => {\r\n                const el = entry.querySelector(`[name=\"${key}\"]`) || form.querySelector(`[name=\"${key}\"]`);\r\n                if (!el) return;\r\n                if (el.type === 'radio' || el.type === 'checkbox') {\r\n                    el.checked = el.value === data[key];\r\n                } else {\r\n                    el.value = data[key];\r\n                }\r\n            });\r\n            \r\n            const roleRadios = entry.querySelectorAll('input[name=\"directorRole' + i + '\"]');\r\n            roleRadios.forEach(r => r.checked = r.value === data[`directorRole${i}`]);\r\n            \r\n            const genderRadios = entry.querySelectorAll('input[name=\"gender' + i + '\"]');\r\n            genderRadios.forEach(r => r.checked = r.value === data[`gender${i}`]);\r\n\r\n            \/\/ ============================================================\r\n            \/\/ FIX: CHECK IF FRESH PAGE LOAD\r\n            \/\/ ============================================================\r\n            \/\/ If isDirectorFirstLoad is TRUE, it means setup() just ran and HID the fields.\r\n            \/\/ We MUST NOT override that by adding 'active' classes here.\r\n            \/\/ We only restore values (text inputs) and states (radios\/checkboxes).\r\n            \/\/ ============================================================\r\n\r\n            if (!window.isDirectorFirstLoad) {\r\n                \/\/ If this is a REFRESH (Load is false), THEN we check visibility logic.\r\n                \/\/ Restore Director Address Visibility\r\n                const addrContainer = entry.querySelector('.address-fields-director');\r\n                const manualCb = document.getElementById(`enterManual${i}`);\r\n                \r\n                if (addrContainer) {\r\n                    const hasData = Array.from(addrContainer.querySelectorAll('input'))\r\n                        .some(el => el.value.trim() !== '');\r\n\r\n                    \/\/ ONLY manage classes if we are NOT in first load state\r\n                    \/\/ This ensures the 'initially-hidden' class from HTML is respected\r\n                    if (!window.isDirectorFirstLoad) {\r\n                         if (manualCb?.checked || hasData) {\r\n                            addrContainer.classList.add('active');\r\n                            addrContainer.classList.add('force-visible');\r\n                        } else {\r\n                            addrContainer.classList.remove('active');\r\n                            addrContainer.classList.remove('force-visible');\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        ['sameAddress', 'movingAccountant'].forEach(name => {\r\n            const checked = form.querySelector(`input[name=\"${name}\"]:checked`);\r\n            if (checked) checked.dispatchEvent(new Event('change'));\r\n        });\r\n\r\n        \/\/ Restore manual checkboxes (Step 1 & Directors)\r\n        \/\/ Note: We do this AFTER the visibility check above\r\n        for (let i = 1; i <= directorCountFromData; i++) {\r\n            const manualCb = document.getElementById(`enterManual${i}`);\r\n            if (manualCb && data[`enterManual${i}`]) {\r\n                manualCb.checked = true;\r\n                manualCb.dispatchEvent(new Event('change'));\r\n            }\r\n        }\r\n\r\n        updateAddressFieldsVisibility();\r\n\r\n        \/\/ Restore signature\r\n        const savedSig = sessionStorage.getItem('signatureDataURL');\r\n        if (savedSig) {\r\n            const preview = document.getElementById('signaturePreviewContainer');\r\n            if (preview) {\r\n                const img = document.createElement('img');\r\n                img.src = savedSig;\r\n                img.style.maxWidth = '450px';\r\n                img.style.maxHeight = '160px';\r\n                preview.innerHTML = '';\r\n                preview.appendChild(img);\r\n            }\r\n        }\r\n\r\n        console.log('Form data restored.');\r\n    }\r\n\r\n    window.addEventListener('load', function() {\r\n        const saved = sessionStorage.getItem('companySignupFormData');\r\n        if (saved) {\r\n            const data = JSON.parse(saved);\r\n            directorCount = data._directorCount || 1;\r\n            delete data._directorCount;\r\n\r\n            Object.keys(data).forEach(key => {\r\n                const elements = form.querySelectorAll(`[name=\"${key}\"]`);\r\n                elements.forEach(el => {\r\n                    if (el.type === 'file') return;\r\n                    if (el.type === 'radio' || el.type === 'checkbox') {\r\n                        const values = Array.isArray(data[key]) ? data[key] : [data[key]];\r\n                        el.checked = values.includes(el.value);\r\n                    } else {\r\n                        el.value = Array.isArray(data[key]) ? data[key][0] : data[key];\r\n                    }\r\n                });\r\n            });\r\n\r\n            while (directorCount > 1) {\r\n                document.getElementById('addDirectorBtn').click();\r\n                directorCount--;\r\n            }\r\n        }\r\n        restoreFormData();\r\n        updateProgressIndicators(1);\r\n    });\r\n\r\n    \/\/ ==================== VALIDATION HELPERS ====================\r\n    function validateEmail(email) {\r\n        return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email);\r\n    }\r\n    function validatePhone(phone) {\r\n        \/\/ FIX: Remove UK pattern. Just check if it exists and is 10 digits.\r\n        if (!phone || phone.trim() === '') return false;\r\n        \/\/ Allow spaces, just check length\r\n        if (phone.length !== 10) { \r\n            return false; \r\n        }\r\n        return true;\r\n    }\r\n\r\n    \/\/ MISSING FUNCTION FIXED HERE\r\n    function validateEmailsAndPhones() {\r\n        let isValid = true;\r\n        document.querySelectorAll('.director-entry').forEach(entry => {\r\n            const idx = entry.dataset.index;\r\n            const emailEl = document.getElementById(`directorEmail${idx}`);\r\n            const phoneEl = document.getElementById(`directorPhone${idx}`);\r\n            \r\n            if (emailEl && !validateEmail(emailEl.value)) {\r\n                showError(`directorEmail${idx}`, 'Invalid email format');\r\n                isValid = false;\r\n            }\r\n            if (phoneEl && !validatePhone(phoneEl.value)) {\r\n                showError(`phone1${idx}`, 'Please enter a valid phone number');\r\n                isValid = false;\r\n            }\r\n        });\r\n        return isValid;\r\n    }\r\n\r\n    function showError(fieldId, message) {\r\n        console.log(`[SHOWING ERROR] ID: ${fieldId}, Msg: ${message}`);\r\n        \r\n        const field = document.getElementById(fieldId);\r\n        if (!field) {\r\n            console.warn(`Field \"${fieldId}\" not found. Cannot show error.`);\r\n            return;\r\n        }\r\n\r\n        \/\/ 1. Visual cue on the INPUT\r\n        field.style.borderColor = '#fa755a';\r\n        field.style.backgroundColor = '#fff5f5';\r\n        field.classList.add('input-error');\r\n\r\n        \/\/ 2. Find parent (.input-field)\r\n        const parent = field.closest('.input-field') || field.closest('.checkbox-terms') || field.closest('.radio-group-horizontal') || field.parentElement;\r\n        \r\n        if (!parent) {\r\n            console.error(`Could not find parent for field ${fieldId}`);\r\n            return;\r\n        }\r\n\r\n        \/\/ 3. Find or create error element\r\n        let errorEl = parent.querySelector('.error-message');\r\n        \r\n        if (!errorEl) {\r\n            errorEl = document.createElement('div');\r\n            errorEl.className = 'error-message';\r\n            parent.appendChild(errorEl);\r\n        }\r\n\r\n        \/\/ 4. Set text and add .visible class (This respects CSS priority)\r\n        errorEl.textContent = message;\r\n        errorEl.classList.add('visible'); \r\n    }\r\n    function clearError(fieldId) {\r\n        const field = document.getElementById(fieldId);\r\n        if (field) {\r\n            field.style.borderColor = ''; \r\n            field.style.backgroundColor = ''; \r\n            field.classList.remove('input-error');\r\n        }\r\n\r\n        \/\/ Find and hide error message\r\n        if (field && field.parentElement) {\r\n            const errorEl = field.parentElement.querySelector('.error-message');\r\n            if (errorEl) {\r\n                errorEl.textContent = '';\r\n                errorEl.classList.remove('visible'); \/\/ Remove visible class\r\n            }\r\n        }\r\n    }\r\n    function clearAllErrors() {\r\n        document.querySelectorAll('.error-message').forEach(el => { el.textContent = ''; el.style.display = 'none'; });\r\n        document.querySelectorAll('.input-error').forEach(el => { el.classList.remove('input-error'); });\r\n\r\n    }\r\n\r\n    \/\/ ==================== MAIN VALIDATION (Fixed) ====================\r\n    function validateCurrentStep() {\r\n        clearAllErrors();\r\n        \/\/ Remove previous error highlights from director entries\r\n        document.querySelectorAll('.director-entry').forEach(el => el.classList.remove('validation-error'));\r\n\r\n        const activeStep = document.querySelector('.step.active');\r\n        if (!activeStep) return false;\r\n        \r\n        const stepNum = parseInt(activeStep.dataset.step, 10); \/\/ Ensure number\r\n        let isValid = true;\r\n\r\n        \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n        \/\/          STEP 1 - Company Info\r\n        \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n        if (stepNum === 1) {\r\n            const companyName = document.getElementById('companyName');\r\n            if (!companyName?.value.trim()) { \r\n                showError('companyName', 'Company name is required'); \r\n                isValid = false; \r\n            }\r\n\r\n            const terms = document.getElementById('terms');\r\n            if (!terms?.checked) { \r\n                showError('terms', 'You must agree to the terms'); \r\n                isValid = false; \r\n            }\r\n\r\n            \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n            \/\/ TRADING ADDRESS VALIDATION - When \"No\" selected\r\n            \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n            if (document.getElementById('addressNo')?.checked) {\r\n                const wrapperErrorEl = document.getElementById('error-addressfieldswrap');\r\n\r\n                \/\/ 1. Check if user has ANY address data\r\n                const hasAnyAddressData = ['houseName', 'streetName', 'city', 'postCode'].some(id => {\r\n                    const el = document.getElementById(id);\r\n                    return el && el.value.trim() !== '';\r\n                });\r\n\r\n                \/\/ 2. Check if manual mode was chosen\r\n                const manualChecked = document.getElementById('enterManual')?.checked === true;\r\n\r\n                if (!hasAnyAddressData) {\r\n                    \/\/ No data at all \u2192 strong error on wrapper\r\n                    if (wrapperErrorEl) {\r\n                        wrapperErrorEl.textContent = \"Trading address is required. Please either:\\n\u2022 Use postcode lookup, or\\n\u2022 Check 'Enter address manually' and fill all fields.\";\r\n                        wrapperErrorEl.classList.add('visible');\r\n                        wrapperErrorEl.style.display = 'block';\r\n                        wrapperErrorEl.style.whiteSpace = 'pre-line';\r\n                    }\r\n                    isValid = false;\r\n                } \r\n                else if (!manualChecked) {\r\n                    \/\/ Has data but didn't check manual \u2192 suspicious (probably from lookup)\r\n                    \/\/ \u2192 This is OK, but make sure fields are filled properly\r\n                    const requiredFields = [\r\n                        {id: 'houseName',  msg: 'House No.\/Name is required'},\r\n                        {id: 'streetName', msg: 'Street name is required'},\r\n                        {id: 'city',       msg: 'City name is required'},\r\n                        {id: 'postCode',   msg: 'Post Code is required'}\r\n                    ];\r\n\r\n                    requiredFields.forEach(f => {\r\n                        const el = document.getElementById(f.id);\r\n                        if (!el?.value?.trim()) {\r\n                            showError(f.id, f.msg);\r\n                            isValid = false;\r\n                        }\r\n                    });\r\n                } \r\n                else {\r\n                    \/\/ Manual was checked \u2192 require ALL fields\r\n                    const requiredManual = [\r\n                        {id: 'houseName',  msg: 'House No.\/Name is required (manual)'},\r\n                        {id: 'streetName', msg: 'Street name is required (manual)'},\r\n                        {id: 'city',       msg: 'City name is required (manual)'},\r\n                        {id: 'postCode',   msg: 'Post Code is required (manual)'}\r\n                    ];\r\n\r\n                    requiredManual.forEach(f => {\r\n                        const el = document.getElementById(f.id);\r\n                        if (!el?.value?.trim()) {\r\n                            showError(f.id, f.msg);\r\n                            isValid = false;\r\n                        }\r\n                    });\r\n                }\r\n\r\n                \/\/ Hide wrapper error if validation passed\r\n                if (isValid && wrapperErrorEl) {\r\n                    wrapperErrorEl.textContent = '';\r\n                    wrapperErrorEl.classList.remove('visible');\r\n                    wrapperErrorEl.style.display = 'none';\r\n                }\r\n            }\r\n            \/\/ Accountant Validation \r\n            \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n            if (document.getElementById('accountantYes')?.checked) {\r\n                const accountantName = document.getElementById('accountantName');\r\n                const accountantEmail = document.getElementById('accountantEmail');\r\n\r\n                if (!accountantName?.value.trim()) {\r\n                    showError('accountantName', 'Accountant name is required');\r\n                    isValid = false;\r\n                }\r\n\r\n                if (!accountantEmail?.value.trim()) {\r\n                    showError('accountantEmail', 'Accountant email is required');\r\n                    isValid = false;\r\n                } else if (!validateEmail(accountantEmail.value)) {\r\n                    showError('accountantEmail', 'Invalid email format');\r\n                    isValid = false;\r\n                }\r\n            }\r\n        }\r\n\r\n        \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n        \/\/          STEP 2 - Directors\r\n        \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n        else if (stepNum === 2) {\r\n            document.querySelectorAll('.director-entry').forEach(entry => {\r\n                const idx = entry.dataset.index;\r\n                let entryValid = true;\r\n\r\n                \/\/ 1. Basic Personal Info\r\n                const required = [\r\n                    {id: `directorFirstName${idx}`, msg: 'First name is required'},\r\n                    {id: `directorSurname${idx}`,  msg: 'Surname is required'},\r\n                    {id: `directorDOB${idx}`,      msg: 'Date of birth is required'},\r\n                    {id: `directorEmail${idx}`,    msg: 'Email is required'},\r\n                    {id: `directorPhone${idx}`,    msg: 'Phone number is required'},\r\n                    {id: `directorNI${idx}`,       msg: 'NI number is required'}\r\n                ];\r\n\r\n                required.forEach(f => {\r\n                    const el = document.getElementById(f.id);\r\n                    if (!el) return;\r\n                    if (!el.value.trim()) {\r\n                        showError(f.id, f.msg);\r\n                        entryValid = false;\r\n                        isValid = false;\r\n                    }\r\n                });\r\n\r\n\r\n                \/\/ 2. GENDER CHECK (FIXED LOGIC)\r\n                const genderRadios = entry.querySelectorAll(`input[name=\"gender${idx}\"]`);\r\n                const genderChecked = Array.from(genderRadios).some(r => r.checked);\r\n                \r\n                if (!genderChecked) {\r\n                    \/\/ Try to find the specific error div for this director's gender\r\n                    \/\/ We use the ID convention \"error-gender1\", \"error-gender2\", etc.\r\n                    const genderErrorId = `error-gender${idx}`;\r\n                    const genderErrorEl = document.getElementById(genderErrorId);\r\n\r\n                    if (genderErrorEl) {\r\n                        \/\/ If the element exists in HTML, use it\r\n                        genderErrorEl.textContent = 'Gender is required';\r\n                        genderErrorEl.classList.add('visible'); \/\/ Use class, not inline style\r\n                    } else {\r\n                        \/\/ Fallback: If it doesn't exist (e.g. for dynamically added directors without updated HTML template)\r\n                        \/\/ create it and append it to the radio container\r\n                        const genderContainer = entry.querySelector('.radio-group-horizontal');\r\n                        if (genderContainer) {\r\n                            let newError = document.createElement('div');\r\n                            newError.className = 'error-message visible'; \/\/ Add visible class immediately\r\n                            newError.textContent = 'Gender is required';\r\n                            newError.style.display = 'block'; \/\/ Force inline for dynamic elements\r\n                            genderContainer.appendChild(newError);\r\n                        }\r\n                    }\r\n                    entryValid = false;\r\n                    isValid = false;\r\n                } else {\r\n                    \/\/ Clear the specific error if it exists and is now valid\r\n                    const genderErrorId = `error-gender${idx}`;\r\n                    const genderErrorEl = document.getElementById(genderErrorId);\r\n                    if (genderErrorEl) {\r\n                        genderErrorEl.textContent = '';\r\n                        genderErrorEl.classList.remove('visible');\r\n                    }\r\n                }\r\n\r\n                \/\/ 3. ADDRESS VALIDATION (The New Logic)\r\n                const addrContainer = entry.querySelector('.address-fields-director');\r\n                const manualCb = document.getElementById(`enterManual${idx}`);\r\n                const addressWrap = entry.querySelector('.addresswrap');\r\n                const addressWrapError = addressWrap ? addressWrap.querySelector('.error-message') : null;\r\n\r\n                \/\/ Force visibility just to ensure we can read values if hidden\r\n                if (addrContainer) {\r\n                    addrContainer.classList.remove('force-hide-director');\r\n                    addrContainer.classList.add('active');\r\n                }\r\n\r\n                \/\/ Check if any address field has data\r\n                const addrFields = [\r\n                    document.getElementById(`houseNameManual${idx}`),\r\n                    document.getElementById(`streetName${idx}`),\r\n                    document.getElementById(`city${idx}`),\r\n                    document.getElementById(`postCodeManual${idx}`)\r\n                ];\r\n\r\n                const hasAddressData = addrFields.some(el => el && el.value.trim() !== '');\r\n\r\n                \/\/ ===========================================\r\n                \/\/ LOGIC: Show error in addresswrap if empty\r\n                \/\/ ===========================================\r\n                if (!hasAddressData) {\r\n                    \/\/ This is an error. The user has neither searched nor filled manually.\r\n                    \r\n                    if (addressWrapError) {\r\n                        addressWrapError.textContent = 'Address is required (Search postcode or Enter manually)';\r\n                        addressWrapError.style.display = 'block';\r\n                        addressWrapError.classList.add('visible');\r\n                    }\r\n\r\n                    entryValid = false;\r\n                    isValid = false;\r\n\r\n                    \/\/ Clear errors on individual fields to avoid confusion\r\n                    addrFields.forEach(el => { if(el) clearError(el.id); });\r\n\r\n                } else {\r\n                    \/\/ ===========================================\r\n                    \/\/ DATA EXISTS: Clear errors & Validate fields\r\n                    \/\/ ===========================================\r\n                    \r\n                    \/\/ 1. Clear the error in the addresswrap\r\n                    if (addressWrapError) {\r\n                        addressWrapError.textContent = '';\r\n                        addressWrapError.style.display = 'none';\r\n                        addressWrapError.classList.remove('visible');\r\n                    }\r\n\r\n                    \/\/ 2. Validate individual fields (ensure all parts are filled)\r\n                    addrFields.forEach(el => {\r\n                        if (el && !el.value.trim()) {\r\n                            showError(el.id, 'This field is required');\r\n                            entryValid = false;\r\n                            isValid = false;\r\n                        } else if (el) {\r\n                            clearError(el.id);\r\n                        }\r\n                    });\r\n                }\r\n\r\n                \/\/ 4. Highlight the entry box if invalid\r\n                if (!entryValid) {\r\n                    entry.classList.add('validation-error');\r\n                } else {\r\n                    entry.classList.remove('validation-error');\r\n                }\r\n            });\r\n        }\r\n        \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n        \/\/          STEP 3 - Payment & Signature\r\n        \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n        else if (stepNum === 3) {\r\n            const termsLast = document.getElementById('terms-last');\r\n            if (!termsLast?.checked) { \r\n                showError('terms-last', 'You must confirm declaration'); \r\n                isValid = false; \r\n            }\r\n\r\n            \/*if (!sessionStorage.getItem('signatureDataURL')) { \r\n                showError('signatureUpload', 'Signature is required'); \r\n                isValid = false; \r\n            }*\/\r\n        }\r\n\r\n        \/\/ Scroll to first error if invalid\r\n        if (!isValid) {\r\n            \/\/ Scroll to the first field marked with error\r\n            const firstErrorField = document.querySelector('.input-error');\r\n            if (firstErrorField) {\r\n                firstErrorField.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n                firstErrorField.focus();\r\n            } else {\r\n                \/\/ Fallback: Scroll to first error text\r\n                const firstErrorText = document.querySelector('.error-message:not(:empty)');\r\n                if (firstErrorText) {\r\n                    firstErrorText.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n                }\r\n            }\r\n        }\r\n\r\n        console.log(\"Validation result for Step \" + stepNum + \":\", isValid ? \"PASS\" : \"FAIL\");\r\n        return isValid;\r\n    }\r\n\r\n    \/\/ ==================== TEST MODE ====================\r\n    window.isTestMode = false;\r\n    window.toggleTestMode = function(checked) {\r\n        window.isTestMode = checked;\r\n        if (checked) {\r\n            const manualCheckbox = document.getElementById('enterManual');\r\n            if(manualCheckbox) {\r\n                manualCheckbox.checked = true;\r\n                manualCheckbox.dispatchEvent(new Event('change'));\r\n            }\r\n            document.querySelectorAll('.director-manual-checkbox').forEach(cb => {\r\n                cb.checked = true;\r\n                cb.dispatchEvent(new Event('change'));\r\n            });\r\n        }\r\n    };\r\n\r\n    \/\/ ==================== COMPANY HOUSE AUTOCOMPLETE ====================\r\n    let currentFocus = -1;\r\n    suggestionsDiv.style.position = 'absolute';\r\n    suggestionsDiv.style.top = '100%';\r\n    suggestionsDiv.style.left = '0';\r\n    suggestionsDiv.style.right = '0';\r\n    suggestionsDiv.style.background = 'white';\r\n    suggestionsDiv.style.border = '1px solid #ccc';\r\n    suggestionsDiv.style.borderTop = 'none';\r\n    suggestionsDiv.style.maxHeight = '200px';\r\n    suggestionsDiv.style.overflowY = 'auto';\r\n    suggestionsDiv.style.zIndex = '1000';\r\n    suggestionsDiv.style.boxShadow = '0 6px 12px rgba(0,0,0,0.15)';\r\n    suggestionsDiv.style.display = 'none';\r\n\r\n    function hideRegisteredAddress() {\r\n        const container = document.querySelector('.registered-address-container');\r\n        const displayDiv = document.getElementById('registeredAddressDisplay');\r\n        const hiddenTextarea = document.getElementById('registeredAddressTextarea');\r\n        const companyUTRInput = document.getElementById('companyUTR');\r\n        if (container) container.style.display = 'none';\r\n        if (displayDiv) displayDiv.innerHTML = '';\r\n        if (hiddenTextarea) hiddenTextarea.value = '';\r\n        if (companyUTRInput) companyUTRInput.value = '';\r\n    }\r\n\r\n    companyNameInput.addEventListener('input', async function () {\r\n        const query = this.value.trim();\r\n        suggestionsDiv.innerHTML = '';\r\n        suggestionsDiv.style.display = 'none';\r\n        currentFocus = -1;\r\n        if (query.length < 3) { hideRegisteredAddress(); return; }\r\n\r\n        try {\r\n            const response = await fetch(`${proxyUrl}?q=${encodeURIComponent(query)}`);\r\n            if (!response.ok) throw new Error('Proxy error');\r\n            const data = await response.json();\r\n            if (!data.items || data.items.length === 0) { hideRegisteredAddress(); return; }\r\n            data.items.slice(0, 10).forEach((item) => {\r\n                const div = document.createElement('div');\r\n                div.className = 'suggestion-item';\r\n                div.textContent = `${item.title} (${item.company_number})`;\r\n                div.style.padding = '12px 15px';\r\n                div.style.cursor = 'pointer';\r\n                div.style.borderBottom = '1px solid #eee';\r\n                div.addEventListener('mouseover', () => div.style.backgroundColor = '#f0f8ff');\r\n                div.addEventListener('mouseout', () => div.style.backgroundColor = 'white');\r\n                div.addEventListener('click', () => selectSuggestion(item));\r\n                suggestionsDiv.appendChild(div);\r\n            });\r\n            suggestionsDiv.style.display = 'block';\r\n        } catch (err) { console.error('Search error:', err); hideRegisteredAddress(); }\r\n    });\r\n\r\n    companyNameInput.addEventListener('keydown', function(e) {\r\n        const items = suggestionsDiv.querySelectorAll('.suggestion-item');\r\n        if (!items.length) return;\r\n        if (e.key === 'ArrowDown') { e.preventDefault(); currentFocus = (currentFocus + 1) % items.length; items[currentFocus].focus(); }\r\n        else if (e.key === 'ArrowUp') { e.preventDefault(); currentFocus = (currentFocus - 1 + items.length) % items.length; items[currentFocus].focus(); }\r\n        else if (e.key === 'Enter' && currentFocus > -1) { e.preventDefault(); items[currentFocus].click(); }\r\n    });\r\n\r\n    document.addEventListener('click', e => {\r\n        if (!companyNameInput.contains(e.target) && !suggestionsDiv.contains(e.target)) suggestionsDiv.style.display = 'none';\r\n    });\r\n\r\n    function selectSuggestion(item) {\r\n        companyNameInput.value = item.title;\r\n        companyUTRInput.value = item.company_number;\r\n        suggestionsDiv.style.display = 'none';\r\n        suggestionsDiv.innerHTML = '';\r\n        fetch(`${proxyUrl}?number=${item.company_number}`)\r\n            .then(resp => resp.json())\r\n            .then(details => {\r\n                const addr = details.registered_office_address;\r\n                const container = document.querySelector('.registered-address-container');\r\n                const displayDiv = document.getElementById('registeredAddressDisplay');\r\n                const hiddenTextarea = document.getElementById('registeredAddressTextarea');\r\n                if (addr && container && displayDiv && hiddenTextarea) {\r\n                    const house = addr.premises || addr.po_box || addr.address_line_1 || 'Not provided';\r\n                    const street = addr.address_line_2 || addr.thoroughfare || 'Not provided';\r\n                    const city = addr.post_town || addr.locality || 'Not provided';\r\n                    const postcode = addr.postal_code || 'Not provided';\r\n                    const formattedHTML = `\r\n                        <span style=\"display:block; margin-bottom:8px;\"><strong>House name:<\/strong> ${house}<\/span>\r\n                        <span style=\"display:block; margin-bottom:8px;\"><strong>Street name:<\/strong> ${street}<\/span>\r\n                        <span style=\"display:block; margin-bottom:8px;\"><strong>City:<\/strong> ${city}<\/span>\r\n                        <span style=\"display:block; margin-bottom:8px;\"><strong>Country:<\/strong> United Kingdom<\/span>\r\n                        <span style=\"display:block;\"><strong>Postal code:<\/strong> ${postcode}<\/span>\r\n                    `;\r\n                    displayDiv.innerHTML = formattedHTML;\r\n                    hiddenTextarea.value = `House name: ${house}\\nStreet name: ${street}\\nCity: ${city}\\nCountry: United Kingdom\\nPostal code: ${postcode}`;\r\n                    container.style.display = 'block';\r\n                } else { if (container) container.style.display = 'none'; }\r\n            })\r\n            .catch(err => { console.warn('Could not fetch registered address:', err); document.querySelector('.registered-address-container').style.display = 'none'; });\r\n    }\r\n\r\n    form.addEventListener('input', function() {\r\n        const data = {};\r\n        const formData = new FormData(form);\r\n        for (let [key, value] of formData.entries()) { data[key] = value; }\r\n        data.registeredAddress = document.getElementById('registeredAddressTextarea')?.value || '';\r\n        data._directorCount = directorCount;\r\n        sessionStorage.setItem('companySignupFormData', JSON.stringify(data));\r\n    });\r\n\r\n    \/\/ ==================== TRADING ADDRESS ====================\r\n    const sameAddressYes = document.getElementById('addressYes');\r\n    const sameAddressNo = document.getElementById('addressNo');\r\n    const postcodeContext = document.getElementById('postcodeLookupContext');\r\n    const manualCheckboxContainer = document.querySelector('.checkbox-manual');\r\n    const manualCheckbox = document.getElementById('enterManual');\r\n    const addressFields = document.querySelector('.address-fields');\r\n\r\n    function hideTradingAddressSection() {\r\n        postcodeContext.style.display = 'none';\r\n        manualCheckboxContainer.style.display = 'none';\r\n        addressFields.style.display = 'none';\r\n    }\r\n    function showTradingAddressLookupOnly() {\r\n        postcodeContext.removeAttribute('style');\r\n        \/\/postcodeContext.style.display = 'block';\r\n        manualCheckboxContainer.style.display = 'block';\r\n        addressFields.style.display = 'none';\r\n    }\r\n    function updateTradingAddressVisibility() {\r\n        if (sameAddressYes.checked) {\r\n            \/\/ When hiding everything, remove styles from search bar\r\n            postcodeContext.removeAttribute('style'); \r\n            hideTradingAddressSection();\r\n        }\r\n        else {\r\n            showTradingAddressLookupOnly();\r\n        }\r\n    }\r\n    sameAddressYes.addEventListener('change', updateTradingAddressVisibility);\r\n    sameAddressNo.addEventListener('change', updateTradingAddressVisibility);\r\n    updateTradingAddressVisibility();\r\n\r\n    \/\/ ==================== ADDRESS VISIBILITY HELPER ====================\r\n    function updateAddressFieldsVisibility() {\r\n\r\n        if (!addressFields) return;\r\n        \/\/ ALWAYS clean inline styles on the postcodeContext to prevent conflicts\r\n        postcodeContext.removeAttribute('style');\r\n\r\n        if (sameAddressYes?.checked) {\r\n            postcodeContext.style.display = 'none';\r\n            addressFields.classList.remove('force-visible');\r\n            addressFields.style.display = 'none';\r\n            return;\r\n        }\r\n        if (sameAddressNo?.checked) {\r\n            const isManualChecked = manualCheckbox?.checked;\r\n            const hasData = Array.from(addressFields.querySelectorAll('input')).some(el => el.value.trim() !== '');\r\n            postcodeContext.removeAttribute('style');\r\n            if (isManualChecked || hasData) {\r\n                postcodeContext.style.display = 'none';\r\n                addressFields.classList.add('force-visible');\r\n            } else {\r\n                postcodeContext.removeAttribute('style');\r\n                addressFields.classList.remove('force-visible');\r\n                addressFields.style.display = 'none';\r\n            }\r\n        }\r\n    }\r\n\r\n\r\n\r\n    document.getElementById('addressYes')?.addEventListener('change', updateAddressFieldsVisibility);\r\n    document.getElementById('addressNo')?.addEventListener('change', updateAddressFieldsVisibility);\r\n    document.getElementById('enterManual')?.addEventListener('change', updateAddressFieldsVisibility);\r\n    updateAddressFieldsVisibility();\r\n\r\n    \/\/ ==================== POSTCODE LOOKUP ====================\r\n    if (typeof IdealPostcodes !== \"undefined\" && !window.isTestMode) {\r\n        IdealPostcodes.PostcodeLookup.setup({\r\n            apiKey: \"ak_mioezkn51uvGzA8qAd0BLBQYTusxd\",\r\n            context: \"#postcodeLookupContext\",\r\n            outputFields: { line_1: \"#houseName\", line_2: \"#streetName\", post_town: \"#city\", postcode: \"#postCode\" },\r\n            onAddressSelected: function (address) {\r\n                const countryInput = document.getElementById('country');\r\n                if (countryInput) countryInput.value = 'United Kingdom';\r\n                addressFields.style.display = 'block';\r\n                postcodeContext.removeAttribute('style');\r\n                manualCheckbox.checked = false;\r\n                addressFields.querySelectorAll('input').forEach(el => {\r\n                    if (el.value.trim() !== '') { el.setAttribute('readonly', 'readonly'); el.style.backgroundColor = '#f9f9f9'; }\r\n                    else { el.removeAttribute('readonly'); el.style.backgroundColor = ''; }\r\n                });\r\n                updateAddressFieldsVisibility();\r\n            }\r\n        });\r\n    } else {\r\n        postcodeContext.style.display = 'none';\r\n        addressFields.style.display = 'block';\r\n        addressFields.querySelectorAll('input').forEach(el => el.removeAttribute('readonly'));\r\n    }\r\n\r\n    \/\/ ==================== MANUAL ENTRY CHECKBOX ====================\r\n    manualCheckbox.addEventListener('change', function () {\r\n        const hasData = Array.from(addressFields.querySelectorAll('input')).some(el => el.value.trim() !== '');\r\n        if (this.checked) {\r\n            postcodeContext.style.display = 'none';\r\n            addressFields.style.display = 'block';\r\n            addressFields.classList.add('force-visible');\r\n            addressFields.querySelectorAll('input').forEach(el => { el.removeAttribute('readonly'); el.style.backgroundColor = ''; });\r\n        } else {\r\n            postcodeContext.removeAttribute('style');\r\n            if (hasData) {\r\n                \r\n                \/\/postcodeContext.style.display = 'block';\r\n                addressFields.style.display = 'none';\r\n                addressFields.classList.add('force-visible');\r\n                addressFields.querySelectorAll('input').forEach(el => {\r\n                    if (el.value.trim() !== '') { el.setAttribute('readonly', 'readonly'); el.style.backgroundColor = '#f9f9f9'; }\r\n                    else { el.removeAttribute('readonly'); el.style.backgroundColor = ''; }\r\n                });\r\n            } else {\r\n                \/\/postcodeContext.removeAttribute('style');\r\n                \/\/postcodeContext.style.display = 'block';\r\n                addressFields.classList.remove('force-visible');\r\n                addressFields.style.display = 'none';\r\n            }\r\n        }\r\n    });\r\n\r\n    window.addEventListener('load', function () {\r\n        const saved = sessionStorage.getItem('companySignupFormData');\r\n        if (!saved) return;\r\n        const data = JSON.parse(saved);\r\n        if (data.sameAddress === 'no') { sameAddressNo.checked = true; } else { sameAddressYes.checked = true; }\r\n        updateTradingAddressVisibility();\r\n        if (data.enterManual === 'on') manualCheckbox.checked = true;\r\n        if (data.houseName || data.streetName || data.city || data.postCode) addressFields.style.display = 'block';\r\n        if (manualCheckbox.checked) manualCheckbox.dispatchEvent(new Event('change'));\r\n        else if (!manualCheckbox.checked && (data.houseName || data.streetName || data.city || data.postCode)) {\r\n            addressFields.querySelectorAll('input:not(#country)').forEach(el => {\r\n                if (el.value.trim() !== '') el.setAttribute('readonly', 'readonly');\r\n            });\r\n        }\r\n    });\r\n\r\n    document.querySelectorAll('input[name=\"movingAccountant\"]').forEach(radio => {\r\n        radio.addEventListener('change', function () {\r\n            document.querySelector('.displayforanotheraccountantyes').style.display = this.value === 'yes' ? 'block' : 'none';\r\n        });\r\n    });\r\n    document.querySelector('#accountantNo')?.dispatchEvent(new Event('change'));\r\n\r\n    \/\/ ==================== DIRECTORS ====================\r\n    function setupPostcodeLookupForDirector(index) {\r\n        const contextId = `#postcodeLookupContext${index}`;\r\n        const addressContainer = document.querySelector(`.director-entry[data-index=\"${index}\"] .address-fields-director`);\r\n        const checkbox = document.querySelector(`#enterManual${index}`); \r\n\r\n        if (document.querySelector(contextId) && typeof IdealPostcodes !== \"undefined\" && !window.isTestMode) {\r\n            IdealPostcodes.PostcodeLookup.setup({\r\n                apiKey: \"ak_mioezkn51uvGzA8qAd0BLBQYTusxd\",\r\n                context: contextId,\r\n                outputFields: {\r\n                    line_1: `#houseNameManual${index}`,\r\n                    line_2: `#streetName${index}`,\r\n                    post_town: `#city${index}`,\r\n                    postcode: `#postCodeManual${index}`\r\n                },\r\n                onAddressSelected: function (address) {\r\n                    console.log(`[Director ${index}] Address selected from lookup.`);\r\n                    \r\n                    \/\/ 1. Unlock the container\r\n                    if (addressContainer) {\r\n                        addressContainer.classList.remove('initially-hidden');\r\n                        addressContainer.dataset.unlocked = \"true\";\r\n                    }\r\n                    \r\n                    \/\/ 2. Keep manual checkbox UNCHECKED\r\n                    if (checkbox) checkbox.checked = false;\r\n                    \r\n                    window.isDirectorFirstLoad = false;\r\n\r\n                    \/\/ 3. FORCE SHOW the fields\r\n                    addressContainer.classList.add('active');\r\n                    addressContainer.classList.add('force-visible');\r\n                    addressContainer.style.display = 'block';\r\n\r\n                    \/\/ 4. KEEP THE POSTCODE SEARCH VISIBLE\r\n                    \/\/ lookupGroup.style.display = 'none'; \r\n\r\n                    \/\/ 5. Set fields to READONLY\r\n                    addressContainer.querySelectorAll('input').forEach(i => {\r\n                        i.setAttribute('readonly', 'readonly');\r\n                        i.style.backgroundColor = '#f9f9f9';\r\n                    });\r\n                }\r\n            });\r\n        }\r\n    }\r\n\r\n    function setupManualAddressToggleForDirector(index) {\r\n        const checkbox = document.querySelector(`#enterManual${index}`);\r\n        const lookupGroup = document.querySelector(`#postcodeLookupContext${index}`);\r\n        const addressContainer = document.querySelector(`.director-entry[data-index=\"${index}\"] .address-fields-director`);\r\n\r\n        \/\/ REMOVE STYLE ATTRIBUTE IMMEDIATELY\r\n        lookupGroup.removeAttribute('style');\r\n\r\n        if (!checkbox || !lookupGroup || !addressContainer) return;\r\n\r\n        \/\/ 1. Click Event: User manually interacts\r\n        checkbox.addEventListener('change', function() {\r\n            \/\/ Interaction happened! Unlock this specific director address permanently.\r\n            \/\/ We use a property on the element itself to remember \"I've been unlocked\".\r\n            addressContainer.dataset.unlocked = \"true\";\r\n            window.isDirectorFirstLoad = false; \/\/ Global flag\r\n            \r\n            updateDirectorAddressState(index, checkbox, lookupGroup, addressContainer);\r\n        });\r\n\r\n        \/\/ 2. RUN IMMEDIATELY ON LOAD\r\n        updateDirectorAddressState(index, checkbox, lookupGroup, addressContainer);\r\n    }\r\n\r\n    function updateDirectorAddressState(index, checkbox, lookupGroup, addressContainer) {\r\n        \/\/ Ensure elements exist\r\n        if (!checkbox) checkbox = document.querySelector(`#enterManual${index}`);\r\n        if (!lookupGroup) lookupGroup = document.querySelector(`#postcodeLookupContext${index}`);\r\n        if (!addressContainer) addressContainer = document.querySelector(`.director-entry[data-index=\"${index}\"] .address-fields-director`);\r\n\r\n        const hasData = Array.from(addressContainer.querySelectorAll('input'))\r\n            .some(el => el.value.trim() !== '');\r\n\r\n        const isUnlocked = addressContainer.dataset.unlocked === \"true\";\r\n\r\n        \/\/ ============================================================\r\n        \/\/ LOGIC 1: CHECK FOR 'initially-hidden' CLASS\r\n        \/\/ ============================================================\r\n        if (addressContainer.classList.contains('initially-hidden')) {\r\n            addressContainer.classList.remove('active', 'force-visible');\r\n            addressContainer.classList.add('force-hide-director');\r\n            addressContainer.style.display = 'none';\r\n            addressContainer.classList.remove('initially-hidden');\r\n            return;\r\n        }\r\n\r\n        \/\/ ============================================================\r\n        \/\/ LOGIC 2: NORMAL BEHAVIOR\r\n        \/\/ ============================================================\r\n        addressContainer.classList.remove('force-hide-director');\r\n\r\n        if (checkbox.checked) {\r\n            \/\/ --- CASE: USER CHECKED MANUAL BOX ---\r\n            console.log(`[Director ${index}] MANUAL CHECKBOX CHECKED.`);\r\n            \r\n            \/\/ Hide Postcode Search\r\n            lookupGroup.style.display = 'none'; \r\n            \r\n            \/\/ Show Fields (Editable)\r\n            addressContainer.classList.add('active');           \/\/ CRITICAL: Add 'active' class\r\n            addressContainer.classList.remove('force-visible'); \/\/ Ensure no conflict\r\n            addressContainer.style.display = 'block';            \/\/ CRITICAL: Set inline display\r\n\r\n            \/\/ Make fields EDITABLE\r\n            addressContainer.querySelectorAll('input').forEach(i => {\r\n                i.removeAttribute('readonly');\r\n                i.style.backgroundColor = '';\r\n            });\r\n\r\n        } else {\r\n            \/\/ --- CASE: MANUAL CHECKBOX UNCHECKED ---\r\n            console.log(`[Director ${index}] MANUAL CHECKBOX UNCHECKED.`);\r\n            console.log(`[Director ${index}] Has Data: ${hasData}`);\r\n\r\n            \/\/ Always Show Postcode Search\r\n            \/\/lookupGroup.style.display = 'block';\r\n            lookupGroup.removeAttribute('style');\r\n\r\n            \/\/ CRITICAL FIX: Only hide fields if they are EMPTY.\r\n            \/\/ If they have data (from a previous search), keep them visible and Readonly.\r\n            if (!hasData) {\r\n                addressContainer.classList.remove('active');         \/\/ CRITICAL: Remove 'active'\r\n                addressContainer.classList.remove('force-visible'); \/\/ CRITICAL: Remove 'force-visible'\r\n                addressContainer.style.display = 'none';             \/\/ CRITICAL: Set inline display\r\n            } else {\r\n                \/\/ Fields have data, so keep them visible\r\n                addressContainer.classList.add('active');           \/\/ CRITICAL: Add 'active' class\r\n                addressContainer.classList.add('force-visible'); \/\/ CRITICAL: Add 'force-visible' class\r\n                addressContainer.style.display = 'block';            \/\/ CRITICAL: Set inline display\r\n\r\n                \/\/ Ensure they are ReadOnly (since we are in Search mode)\r\n                addressContainer.querySelectorAll('input').forEach(i => {\r\n                    i.setAttribute('readonly', 'readonly');\r\n                    i.style.backgroundColor = '#f9f9f9';\r\n                });\r\n            }\r\n        }\r\n    }\r\n\r\n    setupPostcodeLookupForDirector(1);\r\n    setupManualAddressToggleForDirector(1);\r\n\r\n    document.getElementById('addDirectorBtn').addEventListener('click', function () {\r\n        directorCount++;\r\n        const newIndex = directorCount;\r\n        const template = document.querySelector('.director-entry[data-index=\"1\"]');\r\n        const newEntry = template.cloneNode(true);\r\n        newEntry.setAttribute('data-index', newIndex);\r\n        newEntry.querySelector('h3').textContent = `Director\/Shareholder ${newIndex}`;\r\n        newEntry.querySelectorAll('[id], [name], [for]').forEach(el => {\r\n            if (el.id) el.id = el.id.replace(\/1$\/, newIndex);\r\n            if (el.name) el.name = el.name.replace(\/1$\/, newIndex);\r\n            if (el.hasAttribute('for')) el.setAttribute('for', el.getAttribute('for').replace(\/1$\/, newIndex));\r\n        });\r\n        newEntry.querySelectorAll('input, select').forEach(el => {\r\n            if (el.type === 'checkbox' || el.type === 'radio') { el.checked = (el.value === 'director' || el.value === 'no'); }\r\n            else { el.value = (el.readOnly && el.placeholder === 'Country') ? 'United Kingdom' : ''; }\r\n        });\r\n        newEntry.querySelectorAll('.error-message').forEach(el => el.textContent = '');\r\n        document.getElementById('directorEntriesContainer').appendChild(newEntry);\r\n        setupPostcodeLookupForDirector(newIndex);\r\n        setupManualAddressToggleForDirector(newIndex);\r\n        const data = getAllFormFields();\r\n        sessionStorage.setItem('companySignupFormData', JSON.stringify(data));\r\n        setTimeout(restoreFormData, 50);\r\n    });\r\n\r\n    \/\/ ==================== STRIPE ====================\r\n    const mode = 'test';\r\n    fetch(ajaxurl, {\r\n        method: 'POST',\r\n        headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\r\n        body: new URLSearchParams({ action: 'get_stripe_keys', security: ajaxNonce, mode: mode })\r\n    })\r\n    .then(res => {\r\n        if (!res.ok) throw new Error('HTTP ' + res.status);\r\n        return res.json();\r\n    })\r\n    .then(result => {\r\n        if (!result.success) {\r\n            console.error('Publishable key error:', result.data?.message);\r\n            document.body.insertAdjacentHTML('beforeend', '<div style=\"background:#f44336;color:white;padding:20px;text-align:center;font-weight:bold;\">Stripe Error: ' + (result.data?.message || 'Cannot load payment system') + '<\/div>');\r\n            return;\r\n        }\r\n        const publishableKey = result.data.publishable_key;\r\n        console.log('Publishable key loaded');\r\n        stripe = Stripe(publishableKey);\r\n        return fetch(ajaxurl, {\r\n            method: 'POST',\r\n            headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\r\n            body: new URLSearchParams({ action: 'get_stripe_client_secret', security: ajaxNonce, mode: mode })\r\n        });\r\n    })\r\n    .then(res => {\r\n        if (!res.ok) throw new Error('HTTP ' + res.status);\r\n        return res.json();\r\n    })\r\n    .then(result => {\r\n        if (!result.success) {\r\n            console.error('Client secret error:', result.data?.message);\r\n            document.body.insertAdjacentHTML('beforeend', '<div style=\"background:#f44336;color:white;padding:20px;text-align:center;font-weight:bold;\">Payment setup failed: ' + (result.data?.message || 'Unknown') + '<\/div>');\r\n            return;\r\n        }\r\n        clientSecret = result.data.clientSecret;\r\n        console.log('Client secret loaded');\r\n        const options = { \r\n            clientSecret: clientSecret,\r\n            layout: { type: 'tabs', defaultCollapsed: false }\r\n        };\r\n        options.paymentMethods = { applePay: 'always', googlePay: 'always' };\r\n        elements = stripe.elements(options);\r\n        paymentElement = elements.create('payment');\r\n        paymentElement.mount('#payment-element');\r\n        paymentElement.on('change', event => {\r\n            const errorEl = document.getElementById('payment-errors');\r\n            if (errorEl) errorEl.textContent = event.error ? event.error.message : '';\r\n        });\r\n    })\r\n    .catch(err => {\r\n        console.error('Stripe load error:', err);\r\n        document.body.insertAdjacentHTML('beforeend', '<div style=\"background:#f44336;color:white;padding:20px;text-align:center;font-weight:bold;\">Payment system failed to load.<\/div>');\r\n    });\r\n\r\n    \/\/ ==================== SIGNATURE ====================\r\n    const signatureInput = document.getElementById('signatureUpload');\r\n    const previewContainer = document.getElementById('signaturePreviewContainer');\r\n    \/\/const signatureErrorEl = document.getElementById('error-signatureUpload');\r\n    if (signatureInput) {\r\n        signatureInput.addEventListener('change', function(e) {\r\n            const file = e.target.files[0];\r\n            \/\/signatureErrorEl.textContent = '';\r\n            if (!file) { previewContainer.innerHTML = ''; sessionStorage.removeItem('signatureDataURL'); return; }\r\n            \/*if (!file.type.startsWith('image\/')) { signatureErrorEl.textContent = 'Please upload an image file.'; signatureInput.value = ''; return; }\r\n            if (file.size > 3 * 1024 * 1024) { signatureErrorEl.textContent = 'Image must be smaller than 3MB.'; signatureInput.value = ''; return; }*\/\r\n            const reader = new FileReader();\r\n            reader.onload = function(event) {\r\n                const img = document.createElement('img');\r\n                img.src = event.target.result;\r\n                img.style.maxWidth = '450px';\r\n                img.style.maxHeight = '160px';\r\n                img.style.marginTop = '15px';\r\n                img.alt = 'Uploaded signature';\r\n                previewContainer.innerHTML = '';\r\n                previewContainer.appendChild(img);\r\n                sessionStorage.setItem('signatureDataURL', event.target.result);\r\n            };\r\n            reader.readAsDataURL(file);\r\n        });\r\n    }\r\n    window.addEventListener('load', function() {\r\n        const savedSignature = sessionStorage.getItem('signatureDataURL');\r\n        if (savedSignature && previewContainer) {\r\n            const img = document.createElement('img');\r\n            img.src = savedSignature;\r\n            img.style.maxWidth = '450px';\r\n            img.style.maxHeight = '160px';\r\n            img.style.borderBottom = '3px solid #333';\r\n            img.style.marginTop = '15px';\r\n            img.alt = 'Uploaded signature';\r\n            previewContainer.innerHTML = '';\r\n            previewContainer.appendChild(img);\r\n        }\r\n    });\r\n\r\n    \/\/ ==================== BUTTON NAVIGATION ====================\r\n    const oldNextBtn = document.getElementById('nextBtn');\r\n    if (oldNextBtn) {\r\n        const newNextBtn = oldNextBtn.cloneNode(true);\r\n        oldNextBtn.parentNode.replaceChild(newNextBtn, oldNextBtn);\r\n    }\r\n    const nextBtn = document.getElementById('nextBtn');\r\n    const prevBtn = document.getElementById('previousBtn');\r\n    const submitBtn = document.getElementById('submitBtn');\r\n\r\n    nextBtn.addEventListener('click', function(e) {\r\n        e.preventDefault();\r\n        e.stopImmediatePropagation();\r\n\r\n        \/\/ 1. FORCE CLEAR all previous errors first\r\n        clearAllErrors(); \r\n        \/\/ Also remove inline styles from previous errors\r\n        document.querySelectorAll('.input-error').forEach(el => {\r\n            el.style.borderColor = '';\r\n            el.style.backgroundColor = '';\r\n        });\r\n        document.querySelectorAll('.error-message').forEach(el => {\r\n            el.style.display = 'none';\r\n        });\r\n\r\n        \/\/ 2. RUN VALIDATION\r\n        const isValid = validateCurrentStep();\r\n\r\n        if (isValid === false) {\r\n            console.log('>>> VALIDATION FAILED. STOPPING NAVIGATION. <<<');\r\n            nextBtn.style.boxShadow = '0 0 0 3px #fa755a';\r\n            setTimeout(() => nextBtn.style.boxShadow = '', 800);\r\n            return; \/\/ STOP\r\n        }\r\n\r\n        console.log('>>> VALIDATION PASSED. MOVING TO NEXT STEP. <<<');\r\n\r\n        \/\/ ... REST OF YOUR NEXT STEP LOGIC ...\r\n        const currentStepEl = document.querySelector('.step.active');\r\n        if (!currentStepEl) {\r\n            console.error(\"No active step found\");\r\n            return;\r\n        }\r\n\r\n        const currentStepNum = parseInt(currentStepEl.dataset.step, 10);\r\n        const targetStepNum = currentStepNum + 1;\r\n        const nextStepEl = document.querySelector(`.step[data-step=\"${targetStepNum}\"]`);\r\n\r\n        if (nextStepEl) {\r\n            \/\/ Switch Steps\r\n            currentStepEl.classList.remove('active');\r\n            currentStepEl.classList.remove('force-active');\r\n            \r\n            nextStepEl.classList.add('active');\r\n            nextStepEl.classList.add('force-active');\r\n\r\n            \/\/ Update Progress\r\n            updateProgressIndicators(targetStepNum);\r\n\r\n            \/\/ Buttons\r\n            document.getElementById('previousBtn').style.display = 'block';\r\n            if (targetStepNum === 3) {\r\n                nextBtn.style.display = 'none';\r\n                document.getElementById('submitBtn').style.display = 'block';\r\n            } else {\r\n                nextBtn.style.display = 'block';\r\n                document.getElementById('submitBtn').style.display = 'none';\r\n            }\r\n\r\n            \/\/ Restore & Scroll\r\n            setTimeout(restoreFormData, 100); \r\n            window.scrollTo({ top: 0, behavior: 'smooth' });\r\n        }\r\n    });\r\n\r\n    prevBtn.addEventListener('click', function(e) {\r\n        e.preventDefault();\r\n        e.stopImmediatePropagation();\r\n\r\n        const currentStepEl = document.querySelector('.step.active');\r\n        if (!currentStepEl) return;\r\n\r\n        const currentStepNum = parseInt(currentStepEl.dataset.step, 10);\r\n        const targetStepNum = currentStepNum - 1;\r\n\r\n        const prevStepEl = document.querySelector(`.step[data-step=\"${targetStepNum}\"]`);\r\n\r\n        if (prevStepEl) {\r\n            currentStepEl.classList.remove('active');\r\n            currentStepEl.classList.remove('force-active');\r\n            prevStepEl.classList.add('active');\r\n            prevStepEl.classList.add('force-active');\r\n\r\n            updateProgressIndicators(targetStepNum);\r\n\r\n            document.getElementById('previousBtn').style.display = targetStepNum === 1 ? 'none' : 'block';\r\n            document.getElementById('nextBtn').style.display = 'block';\r\n            document.getElementById('submitBtn').style.display = 'none';\r\n\r\n            setTimeout(() => {\r\n                restoreFormData();\r\n                updateAddressFieldsVisibility();\r\n                \r\n                \/\/ --- FIX START: Explicitly Dispatch Change for Terms & Radio Buttons ---\r\n                const termsCb = document.getElementById('terms');\r\n                if (termsCb) termsCb.dispatchEvent(new Event('change'));\r\n\r\n                document.querySelectorAll('input[name=\"sameAddress\"]').forEach(r => {\r\n                    if (r.checked) r.dispatchEvent(new Event('change'));\r\n                });\r\n                document.querySelectorAll('input[name=\"movingAccountant\"]').forEach(r => {\r\n                    if (r.checked) r.dispatchEvent(new Event('change'));\r\n                });\r\n                document.querySelectorAll('.director-manual-checkbox').forEach(cb => {\r\n                    cb.dispatchEvent(new Event('change'));\r\n                });\r\n                \/\/ --- FIX END ---\r\n\r\n            }, 50);\r\n\r\n            window.scrollTo({ top: 0, behavior: 'smooth' });\r\n        } else {\r\n            console.warn('Previous step not found');\r\n        }\r\n    });\r\n\r\n    function updateProgressIndicators(stepNumber) {\r\n        const indicators = document.querySelectorAll('.progress-steps .step-indicator');\r\n        indicators.forEach((dot, index) => {\r\n            if (index + 1 <= stepNumber) {\r\n                dot.classList.add('active');\r\n                dot.classList.add('force-active');\r\n            } else {\r\n                dot.classList.remove('active');\r\n                dot.classList.remove('force-active');\r\n            }\r\n        });\r\n        console.log(`Progress indicators updated to step ${stepNumber}`);\r\n    }\r\n\r\n    submitBtn.addEventListener('click', async function (e) {\r\n        e.preventDefault();\r\n        if (!validateCurrentStep()) return;\r\n        \r\n        \/\/ NOTE: validateEmailsAndPhones is called inside validateCurrentStep logic\r\n        \/\/ or you can call it explicitly if preferred.\r\n        if (!validateEmailsAndPhones()) {\r\n            document.querySelector('.input-error')?.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n            return;\r\n        }\r\n\r\n        if (!document.getElementById('terms-last').checked) {\r\n            document.getElementById('error-terms-last').textContent = 'You must agree to the terms.';\r\n            document.getElementById('error-terms-last').style.display = 'block';\r\n            return;\r\n        }\r\n        \r\n        const signatureData = sessionStorage.getItem('signatureDataURL');\r\n        if (!signatureData) {\r\n            document.getElementById('error-signature').textContent = 'Please upload your signature before submitting.';\r\n            document.querySelector('.sign').scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n            return;\r\n        }\r\n        document.getElementById('error-signature').textContent = '';\r\n\r\n        if (!stripe || !elements || !clientSecret || !paymentElement) {\r\n            alert('Payment system not ready. Please wait or refresh.');\r\n            return;\r\n        }\r\n\r\n        submitBtn.disabled = true;\r\n        submitBtn.textContent = 'Processing...';\r\n\r\n        const { error: submitError } = await elements.submit();\r\n        if (submitError) {\r\n            alert(submitError.message);\r\n            submitBtn.disabled = false;\r\n            submitBtn.textContent = 'Submit';\r\n            return;\r\n        }\r\n\r\n        const { error } = await stripe.confirmPayment({\r\n            elements,\r\n            clientSecret,\r\n            confirmParams: {\r\n                return_url: window.location.href + '?payment=success&payment_intent=' + clientSecret.split('_secret_')[0],\r\n            },\r\n        });\r\n\r\n        if (error) {\r\n            alert(error.message);\r\n            submitBtn.disabled = false;\r\n            submitBtn.textContent = 'Submit';\r\n        }\r\n    });\r\n\r\n    document.addEventListener('keydown', e => {\r\n        if (e.key === 'Enter' && e.target.classList.contains('idpc-input')) e.preventDefault();\r\n    });\r\n});\r\n<\/script>\r\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"class_list":["post-849","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/fm-connect1.fortmindz.in\/wp-godwin-pinto\/wp-json\/wp\/v2\/pages\/849","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fm-connect1.fortmindz.in\/wp-godwin-pinto\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fm-connect1.fortmindz.in\/wp-godwin-pinto\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fm-connect1.fortmindz.in\/wp-godwin-pinto\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fm-connect1.fortmindz.in\/wp-godwin-pinto\/wp-json\/wp\/v2\/comments?post=849"}],"version-history":[{"count":4,"href":"https:\/\/fm-connect1.fortmindz.in\/wp-godwin-pinto\/wp-json\/wp\/v2\/pages\/849\/revisions"}],"predecessor-version":[{"id":853,"href":"https:\/\/fm-connect1.fortmindz.in\/wp-godwin-pinto\/wp-json\/wp\/v2\/pages\/849\/revisions\/853"}],"wp:attachment":[{"href":"https:\/\/fm-connect1.fortmindz.in\/wp-godwin-pinto\/wp-json\/wp\/v2\/media?parent=849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}