{"id":1129,"date":"2026-01-24T17:17:27","date_gmt":"2026-01-24T17:17:27","guid":{"rendered":"https:\/\/kwata.app\/errands\/market-shopper-login\/"},"modified":"2026-01-24T17:17:27","modified_gmt":"2026-01-24T17:17:27","slug":"market-shopper-login","status":"publish","type":"page","link":"https:\/\/kwata.app\/errands\/market-shopper-login\/","title":{"rendered":"Shopper Login"},"content":{"rendered":"\n<div class=\"wma-content-container\">\n    <div class=\"wma-shopper-login-container\">\n    <div class=\"wma-login-card\">\n        <div class=\"wma-login-header\">\n            <div class=\"wma-site-branding\">\n                <a href=\"https:\/\/kwata.app\/errands\/\" class=\"custom-logo-link\" rel=\"home\"><img fetchpriority=\"high\" decoding=\"async\" width=\"2560\" height=\"732\" src=\"https:\/\/kwata.app\/errands\/wp-content\/uploads\/2026\/01\/K-Errands-web-G.png\" class=\"custom-logo\" alt=\"Kwata Errands\" srcset=\"https:\/\/kwata.app\/errands\/wp-content\/uploads\/2026\/01\/K-Errands-web-G.png 2560w, https:\/\/kwata.app\/errands\/wp-content\/uploads\/2026\/01\/K-Errands-web-G-300x86.png 300w, https:\/\/kwata.app\/errands\/wp-content\/uploads\/2026\/01\/K-Errands-web-G-1024x293.png 1024w, https:\/\/kwata.app\/errands\/wp-content\/uploads\/2026\/01\/K-Errands-web-G-768x220.png 768w, https:\/\/kwata.app\/errands\/wp-content\/uploads\/2026\/01\/K-Errands-web-G-1536x439.png 1536w, https:\/\/kwata.app\/errands\/wp-content\/uploads\/2026\/01\/K-Errands-web-G-2048x586.png 2048w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/a>            <\/div>\n            <h2 class=\"wma-site-title\">Kwata Errands<\/h2>\n            <p class=\"wma-site-subtitle\">Access to start earning...<\/p>\n        <\/div>\n\n        \n        \n        <!-- Tab Navigation -->\n        <div class=\"wma-tab-nav\">\n            <button type=\"button\" class=\"wma-tab-btn active\" data-tab=\"login\">\n                Login            <\/button>\n            <button type=\"button\" class=\"wma-tab-btn \" data-tab=\"apply\">\n                Apply Here            <\/button>\n        <\/div>\n\n        <!-- Login Form Tab -->\n        <div class=\"wma-tab-content active\" id=\"wma-tab-login\">\n            <form class=\"wma-form\" id=\"wma-login-form\">\n                <input type=\"hidden\" id=\"wma_login_nonce\" name=\"wma_login_nonce\" value=\"9419514287\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/errands\/wp-json\/wp\/v2\/pages\/1129\" \/>                <input type=\"hidden\" name=\"redirect_to\" value=\"\">\n                \n                <div class=\"wma-form-group\">\n                    <label for=\"username\">Email or Username<\/label>\n                    <input type=\"text\" id=\"username\" name=\"username\" required autocomplete=\"username\" placeholder=\"Enter your email or username\">\n                <\/div>\n\n                <div class=\"wma-form-group\">\n                    <label for=\"password\">Password<\/label>\n                    <input type=\"password\" id=\"password\" name=\"password\" required autocomplete=\"current-password\" placeholder=\"Enter your password\">\n                <\/div>\n\n                <div class=\"wma-form-group wma-checkbox-group\">\n                    <label>\n                        <input type=\"checkbox\" name=\"remember\" value=\"1\">\n                        Remember me                    <\/label>\n                <\/div>\n\n                <div class=\"wma-form-error\" id=\"wma-login-error\" style=\"display: none;\"><\/div>\n\n                <button type=\"submit\" class=\"wma-btn wma-btn-primary wma-btn-block\" id=\"wma-login-btn\">\n                    <span class=\"wma-btn-text\">Sign In<\/span>\n                    <span class=\"wma-btn-loading\" style=\"display: none;\">\n                        <span class=\"wma-spinner\"><\/span>\n                        Signing in...                    <\/span>\n                <\/button>\n            <\/form>\n\n            <div class=\"wma-login-links\">\n                <a href=\"https:\/\/kwata.app\/errands\/shopper-password-reset\/\">\n                    Forgot password?                <\/a>\n            <\/div>\n        <\/div>\n\n        <!-- Application Form Tab -->\n        <div class=\"wma-tab-content \" id=\"wma-tab-apply\">\n            <div class=\"wma-application-intro\">\n                <p>Join Shoppa! by OrdVia - Earn money daily by helping customers with their shopping and day-to-day tasks.<\/p>\n            <\/div>\n\n            <!-- Application Success Message (hidden by default) -->\n            <div class=\"wma-application-success\" id=\"wma-application-success\" style=\"display: none;\">\n                <div class=\"wma-success-icon\">\u2705<\/div>\n                <h3>Application Submitted!<\/h3>\n                <p>Thank you for applying to become a Market Shopper. We will review your application and contact you via email within 24-48 hours.<\/p>\n                <div class=\"wma-next-steps\">\n                    <h4>What happens next?<\/h4>\n                    <ul>\n                        <li>Our team will review your application<\/li>\n                        <li>You&#039;ll receive an email with the decision<\/li>\n                        <li>If approved, your login credentials will be sent to your email<\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n\n            <!-- Application Form -->\n            <form class=\"wma-form wma-application-form\" id=\"wma-shopper-application-form\">\n                <input type=\"hidden\" id=\"wma_application_nonce\" name=\"wma_application_nonce\" value=\"56000331e0\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/errands\/wp-json\/wp\/v2\/pages\/1129\" \/>                \n                <div class=\"wma-form-group\">\n                    <label for=\"app_full_name\">Full Name <span class=\"required\">*<\/span><\/label>\n                    <input type=\"text\" id=\"app_full_name\" name=\"full_name\" required placeholder=\"Enter your full name\">\n                <\/div>\n\n                <div class=\"wma-form-group\">\n                    <label for=\"app_email\">Email Address <span class=\"required\">*<\/span><\/label>\n                    <input type=\"email\" id=\"app_email\" name=\"email\" required placeholder=\"Enter your email address\">\n                    <small>Your login credentials will be sent to this email<\/small>\n                <\/div>\n\n                <div class=\"wma-form-group\">\n                    <label for=\"app_phone\">Phone Number <span class=\"required\">*<\/span><\/label>\n                    <input type=\"tel\" id=\"app_phone\" name=\"phone\" required placeholder=\"e.g., 6XXXXXXXX\">\n                    <small>We&#039;ll use this to contact you about orders<\/small>\n                <\/div>\n\n                <div class=\"wma-form-group\">\n                    <label>Cities <span class=\"required\">*<\/span><\/label>\n                    <div class=\"wma-city-selector\">\n                        <div class=\"wma-city-search\">\n                            <input type=\"text\" class=\"wma-city-search-input\" id=\"app_city_search\" placeholder=\"Search cities...\">\n                            <span class=\"wma-search-icon\">\ud83d\udd0d<\/span>\n                        <\/div>\n                        <div class=\"wma-city-checkboxes\" id=\"wma-city-checkboxes\">\n                            <!-- Will be populated via JavaScript -->\n                        <\/div>\n                        <input type=\"hidden\" name=\"cities\" id=\"app_cities\" required>\n                        <div class=\"wma-selected-cities\" id=\"wma-selected-cities\"><\/div>\n                    <\/div>\n                    <small>Select the cities where you will operate<\/small>\n                <\/div>\n\n                <div class=\"wma-form-group\">\n                    <label for=\"app_id_document\">ID Document <span class=\"required\">*<\/span><\/label>\n                    <small>Choose one option: Upload PDF or take photos of front and back<\/small>\n                    \n                    <!-- ID Document Type Selector -->\n                    <div class=\"wma-id-type-selector\">\n                        <label class=\"wma-id-type-option\">\n                            <input type=\"radio\" name=\"id_document_type\" value=\"photos\" checked>\n                            <span class=\"wma-id-type-content\">\n                                <span class=\"wma-id-type-icon\">\ud83d\udcf8<\/span>\n                                <span class=\"wma-id-type-text\">\n                                    <strong>Take Photos<\/strong>\n                                    <small>Capture front and back of ID<\/small>\n                                <\/span>\n                            <\/span>\n                        <\/label>\n                        <label class=\"wma-id-type-option\">\n                            <input type=\"radio\" name=\"id_document_type\" value=\"pdf\">\n                            <span class=\"wma-id-type-content\">\n                                <span class=\"wma-id-type-icon\">\ud83d\udcc4<\/span>\n                                <span class=\"wma-id-type-text\">\n                                    <strong>Upload PDF<\/strong>\n                                    <small>Upload scanned ID document<\/small>\n                                <\/span>\n                            <\/span>\n                        <\/label>\n                    <\/div>\n\n                    <!-- Photo Capture Section (Front & Back) -->\n                    <div class=\"wma-id-photos-section\" id=\"wma-id-photos-section\">\n                        <input type=\"hidden\" name=\"id_document_front_url\" id=\"app_id_document_front_url\">\n                        <input type=\"hidden\" name=\"id_document_back_url\" id=\"app_id_document_back_url\">\n                        \n                        <!-- Front Photo -->\n                        <div class=\"wma-id-photo-capture\">\n                            <label>Front of ID <span class=\"required\">*<\/span><\/label>\n                            <div class=\"wma-id-capture-container\" id=\"wma-id-front-container\">\n                                <!-- Camera View -->\n                                <div class=\"wma-id-camera-view\" id=\"wma-id-front-camera\" style=\"display: none;\">\n                                    <video id=\"wma-id-front-video\" autoplay playsinline><\/video>\n                                    <canvas id=\"wma-id-front-canvas\" style=\"display: none;\"><\/canvas>\n                                    <div class=\"wma-id-camera-overlay\">\n                                        <div class=\"wma-id-frame-guide\"><\/div>\n                                    <\/div>\n                                    <div class=\"wma-id-camera-controls\">\n                                        <button type=\"button\" class=\"wma-btn wma-btn-capture\" data-side=\"front\">\n                                            <span class=\"wma-capture-icon\">\ud83d\udcf8<\/span>\n                                            Capture Front                                        <\/button>\n                                        <button type=\"button\" class=\"wma-btn wma-btn-outline wma-btn-sm wma-btn-cancel-camera\" data-side=\"front\">\n                                            Cancel                                        <\/button>\n                                    <\/div>\n                                <\/div>\n                                \n                                <!-- Start Button -->\n                                <div class=\"wma-id-start-capture\" id=\"wma-id-front-start\">\n                                    <span class=\"wma-id-icon\">\ud83d\udcf7<\/span>\n                                    <span class=\"wma-id-text\">Front of ID Card<\/span>\n                                    <div class=\"wma-id-capture-buttons\">\n                                        <button type=\"button\" class=\"wma-btn wma-btn-outline wma-btn-sm wma-start-id-camera\" data-side=\"front\">\n                                            Open Camera                                        <\/button>\n                                        <button type=\"button\" class=\"wma-btn wma-btn-outline wma-btn-sm wma-upload-id-file\" data-side=\"front\">\n                                            Upload File                                        <\/button>\n                                    <\/div>\n                                <\/div>\n                                \n                                <!-- Preview -->\n                                <div class=\"wma-id-preview\" id=\"wma-id-front-preview\" style=\"display: none;\">\n                                    <img decoding=\"async\" src=\"\" alt=\"ID Front Preview\">\n                                    <div class=\"wma-id-preview-actions\">\n                                        <button type=\"button\" class=\"wma-btn wma-btn-outline wma-btn-sm wma-retake-id\" data-side=\"front\">\n                                            Retake                                        <\/button>\n                                        <span class=\"wma-id-status\">\u2705 Captured<\/span>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <!-- Back Photo -->\n                        <div class=\"wma-id-photo-capture\">\n                            <label>Back of ID <span class=\"required\">*<\/span><\/label>\n                            <div class=\"wma-id-capture-container\" id=\"wma-id-back-container\">\n                                <!-- Camera View -->\n                                <div class=\"wma-id-camera-view\" id=\"wma-id-back-camera\" style=\"display: none;\">\n                                    <video id=\"wma-id-back-video\" autoplay playsinline><\/video>\n                                    <canvas id=\"wma-id-back-canvas\" style=\"display: none;\"><\/canvas>\n                                    <div class=\"wma-id-camera-overlay\">\n                                        <div class=\"wma-id-frame-guide\"><\/div>\n                                    <\/div>\n                                    <div class=\"wma-id-camera-controls\">\n                                        <button type=\"button\" class=\"wma-btn wma-btn-capture\" data-side=\"back\">\n                                            <span class=\"wma-capture-icon\">\ud83d\udcf8<\/span>\n                                            Capture Back                                        <\/button>\n                                        <button type=\"button\" class=\"wma-btn wma-btn-outline wma-btn-sm wma-btn-cancel-camera\" data-side=\"back\">\n                                            Cancel                                        <\/button>\n                                    <\/div>\n                                <\/div>\n                                \n                                <!-- Start Button -->\n                                <div class=\"wma-id-start-capture\" id=\"wma-id-back-start\">\n                                    <span class=\"wma-id-icon\">\ud83d\udcf7<\/span>\n                                    <span class=\"wma-id-text\">Back of ID Card<\/span>\n                                    <div class=\"wma-id-capture-buttons\">\n                                        <button type=\"button\" class=\"wma-btn wma-btn-outline wma-btn-sm wma-start-id-camera\" data-side=\"back\">\n                                            Open Camera                                        <\/button>\n                                        <button type=\"button\" class=\"wma-btn wma-btn-outline wma-btn-sm wma-upload-id-file\" data-side=\"back\">\n                                            Upload File                                        <\/button>\n                                    <\/div>\n                                <\/div>\n                                \n                                <!-- Preview -->\n                                <div class=\"wma-id-preview\" id=\"wma-id-back-preview\" style=\"display: none;\">\n                                    <img decoding=\"async\" src=\"\" alt=\"ID Back Preview\">\n                                    <div class=\"wma-id-preview-actions\">\n                                        <button type=\"button\" class=\"wma-btn wma-btn-outline wma-btn-sm wma-retake-id\" data-side=\"back\">\n                                            Retake                                        <\/button>\n                                        <span class=\"wma-id-status\">\u2705 Captured<\/span>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- PDF Upload Section -->\n                    <div class=\"wma-id-pdf-section\" id=\"wma-id-pdf-section\" style=\"display: none;\">\n                        <input type=\"hidden\" name=\"id_document_pdf_url\" id=\"app_id_document_pdf_url\">\n                        <div class=\"wma-file-upload\">\n                            <div class=\"wma-upload-area\" id=\"wma-pdf-upload-area\">\n                                <span class=\"wma-upload-icon\">\ud83d\udcc4<\/span>\n                                <span class=\"wma-upload-text\">Click to upload PDF<\/span>\n                                <span class=\"wma-upload-hint\">PDF file (max 10MB)<\/span>\n                            <\/div>\n                            <div class=\"wma-upload-preview\" id=\"wma-pdf-preview\" style=\"display: none;\">\n                                <div class=\"wma-pdf-preview\">\n                                    <span class=\"wma-pdf-icon\">\ud83d\udcd1<\/span>\n                                    <span class=\"wma-pdf-name\"><\/span>\n                                <\/div>\n                                <button type=\"button\" class=\"wma-remove-upload\" id=\"wma-remove-pdf\">&times;<\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"wma-form-group\">\n                    <label for=\"app_profile_photo\">Live Selfie Photo <span class=\"required\">*<\/span><\/label>\n                    <div class=\"wma-selfie-capture\" id=\"wma-selfie-capture\">\n                        <input type=\"hidden\" name=\"profile_photo_url\" id=\"app_profile_photo_url\" required>\n                        \n                        <!-- Camera View -->\n                        <div class=\"wma-camera-container\" id=\"wma-camera-container\">\n                            <video id=\"wma-camera-video\" autoplay playsinline><\/video>\n                            <canvas id=\"wma-camera-canvas\" style=\"display: none;\"><\/canvas>\n                            <div class=\"wma-camera-overlay\">\n                                <div class=\"wma-face-guide\"><\/div>\n                            <\/div>\n                            <div class=\"wma-camera-controls\">\n                                <button type=\"button\" class=\"wma-btn wma-btn-capture\" id=\"wma-capture-btn\">\n                                    <span class=\"wma-capture-icon\">\ud83d\udcf8<\/span>\n                                    Take Selfie                                <\/button>\n                            <\/div>\n                        <\/div>\n                        \n                        <!-- Start Camera Button (shown initially) -->\n                        <div class=\"wma-camera-start\" id=\"wma-camera-start\">\n                            <span class=\"wma-camera-icon\">\ud83d\udcf7<\/span>\n                            <span class=\"wma-camera-text\">Take a Live Selfie<\/span>\n                            <span class=\"wma-camera-hint\">We need a live photo to verify your identity<\/span>\n                            <button type=\"button\" class=\"wma-btn wma-btn-outline wma-btn-sm\" id=\"wma-start-camera-btn\">\n                                Open Camera                            <\/button>\n                        <\/div>\n                        \n                        <!-- Selfie Preview -->\n                        <div class=\"wma-selfie-preview\" id=\"wma-selfie-preview\" style=\"display: none;\">\n                            <img decoding=\"async\" src=\"\" alt=\"Selfie Preview\" id=\"wma-selfie-img\">\n                            <div class=\"wma-selfie-actions\">\n                                <button type=\"button\" class=\"wma-btn wma-btn-outline wma-btn-sm\" id=\"wma-retake-btn\">\n                                    Retake                                <\/button>\n                                <span class=\"wma-selfie-status\">\u2705 Photo captured<\/span>\n                            <\/div>\n                        <\/div>\n                        \n                        <!-- Camera Error -->\n                        <div class=\"wma-camera-error\" id=\"wma-camera-error\" style=\"display: none;\">\n                            <span class=\"wma-error-icon\">\u26a0\ufe0f<\/span>\n                            <span class=\"wma-error-text\">Camera access denied. Please allow camera access to take a selfie.<\/span>\n                        <\/div>\n                    <\/div>\n                    <small>A live selfie is required to verify you match your ID document<\/small>\n                <\/div>\n\n                <div class=\"wma-form-group\">\n                    <label for=\"app_notes\">Your Professional Profile <span class=\"required\">*<\/span><\/label>\n                    <textarea id=\"app_notes\" name=\"application_notes\" rows=\"4\" required placeholder=\"Share your working experience. Let senders know the things you can do best for better matching with tasks. This will appear on your profile.\"><\/textarea>\n                <\/div>\n\n                <!-- Tasker Registration Section -->\n                <div class=\"wma-runner-registration-section\">\n                    <div class=\"wma-section-divider\">\n                        <span>Additional Services<\/span>\n                    <\/div>\n                    \n                    <div class=\"wma-form-group wma-checkbox-group\">\n                        <label class=\"wma-runner-toggle\">\n                            <input type=\"checkbox\" name=\"is_runner\" id=\"app_is_runner\" value=\"1\">\n                            <span class=\"wma-runner-toggle-content\">\n                                <span class=\"wma-runner-icon\">\ud83c\udfc3<\/span>\n                                <span class=\"wma-runner-text\">\n                                    <strong>Join as an Task Service Provider<\/strong>\n                                    <small>Offer services including pickup &amp; delivery, repairs, cleaning, packing, water supply, beauty services, and other daily errands.<\/small>\n                                <\/span>\n                            <\/span>\n                        <\/label>\n                    <\/div>\n                    \n                    <!-- Tasker Categories Selection (hidden by default) -->\n                    <div class=\"wma-runner-categories-section\" id=\"wma-runner-categories-section\" style=\"display: none;\">\n                        <div class=\"wma-form-group\">\n                            <label>Select Task Categories <span class=\"required\">*<\/span><\/label>\n                            <p class=\"wma-field-hint\">Choose the types of errands you can handle. You&#039;ll only receive requests matching your selected categories.<\/p>\n                            \n                            <div class=\"wma-categories-loading\" id=\"wma-categories-loading\">\n                                <span class=\"wma-spinner\"><\/span>\n                                Loading categories...                            <\/div>\n                            \n                            <div class=\"wma-categories-list\" id=\"wma-categories-list\" style=\"display: none;\">\n                                <!-- Categories will be populated via JavaScript -->\n                            <\/div>\n                            \n                            <input type=\"hidden\" name=\"runner_categories\" id=\"app_runner_categories\" value=\"\">\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"wma-form-group wma-checkbox-group\">\n                    <label>\n                        <input type=\"checkbox\" name=\"terms_accepted\" id=\"app_terms\" required>\n                        I agree to the <a href=\"https:\/\/ordvia.com\/ordvia-terms-safety-policy\/\" target=\"_self\" rel=\"noopener\">Terms &amp; Safety Policy<\/a>                    <\/label>\n                <\/div>\n\n                <div class=\"wma-form-error\" id=\"wma-application-error\" style=\"display: none;\"><\/div>\n\n                <button type=\"submit\" class=\"wma-btn wma-btn-primary wma-btn-block\" id=\"wma-submit-application\">\n                    <span class=\"wma-btn-text\">Submit Application<\/span>\n                    <span class=\"wma-btn-loading\" style=\"display: none;\">\n                        <span class=\"wma-spinner\"><\/span>\n                        Submitting...                    <\/span>\n                <\/button>\n            <\/form>\n\n            <!-- How it Works -->\n            <div class=\"wma-how-it-works\">\n                <h4>How it works<\/h4>\n                <div class=\"wma-steps\">\n                    <div class=\"wma-step\">\n                        <div class=\"wma-step-number\">1<\/div>\n                        <div class=\"wma-step-content\">\n                            <strong>Apply<\/strong>\n                            <p>Fill out the application form above<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"wma-step\">\n                        <div class=\"wma-step-number\">2<\/div>\n                        <div class=\"wma-step-content\">\n                            <strong>Get Approved<\/strong>\n                            <p>We&#039;ll review and approve your application<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"wma-step\">\n                        <div class=\"wma-step-number\">3<\/div>\n                        <div class=\"wma-step-content\">\n                            <strong>Start Earning<\/strong>\n                            <p>Accept orders and earn money<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"wma-login-footer\">\n            <p>\n                KatikaPay Wallet?                <a href=\"https:\/\/katika.ordvia.com\/katika-wallet\/\" target=\"_self\" rel=\"noopener\">\n                    Access Here                <\/a>\n            <\/p>\n        <\/div>\n    <\/div>\n<\/div>\n<\/div>\n\n<style>\n\/* Shopper Login Specific Styles *\/\n.wma-shopper-login-container {\n    max-width: 480px;\n    margin: 0 auto;\n    padding: 20px;\n    width: 100%;\n    box-sizing: border-box;\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.wma-login-card {\n    background: #fff;\n    border-radius: 16px;\n    box-shadow: 0 4px 24px rgba(0,0,0,0.12);\n    padding: 32px;\n    width: 100%;\n}\n\n.wma-login-header {\n    text-align: center;\n    margin-bottom: 24px;\n}\n\n.wma-site-branding {\n    margin-bottom: 8px;\n}\n\n\/* Logo sizing for both custom logo and site icon; use !important to override theme styles *\/\n.wma-site-branding img,\n.wma-site-branding .custom-logo,\n.wma-site-branding .custom-logo-link img,\n.wma-site-logo {\n    max-width: 72px !important;\n    max-height: 72px !important;\n    width: auto !important;\n    height: auto !important;\n    display: block;\n    margin: 0 auto 12px;\n}\n\n@media (max-width: 480px) {\n    .wma-site-branding img,\n    .wma-site-branding .custom-logo,\n    .wma-site-branding .custom-logo-link img,\n    .wma-site-logo {\n        max-width: 56px !important;\n        max-height: 56px !important;\n    }\n}\n\n.wma-site-text {\n    font-size: 18px;\n    font-weight: 700;\n    color: #1a1a1a;\n}\n\n.wma-site-title {\n    margin: 0 0 8px;\n    font-size: 20px;\n    color: #1a1a1a;\n}\n\n.wma-site-subtitle {\n    margin: 0;\n    color: #666;\n    font-size: 14px;\n}\n\n.wma-login-icon {\n    font-size: 48px;\n    margin-bottom: 12px;\n}\n\n.wma-login-header h2 {\n    margin: 0 0 8px;\n    font-size: 24px;\n    color: #1a1a1a;\n}\n\n.wma-login-header p {\n    margin: 0;\n    color: #666;\n    font-size: 14px;\n}\n\n.wma-alert {\n    padding: 12px 16px;\n    border-radius: 8px;\n    margin-bottom: 20px;\n    font-size: 14px;\n}\n\n.wma-alert-error {\n    background: #fee2e2;\n    color: #dc2626;\n    border: 1px solid #fecaca;\n}\n\n.wma-alert-success {\n    background: #dcfce7;\n    color: #16a34a;\n    border: 1px solid #bbf7d0;\n}\n\n\/* Tab Navigation *\/\n.wma-tab-nav {\n    display: flex;\n    gap: 0;\n    margin-bottom: 24px;\n    background: #f3f4f6;\n    border-radius: 10px;\n    padding: 4px;\n}\n\n.wma-tab-btn {\n    flex: 1;\n    padding: 12px 16px;\n    border: none;\n    background: transparent;\n    font-size: 14px;\n    font-weight: 600;\n    color: #6b7280;\n    cursor: pointer;\n    border-radius: 8px;\n    transition: all 0.2s;\n}\n\n.wma-tab-btn:hover {\n    color: white !important;\n}\n\n.wma-tab-btn.active {\n    background: #fff;\n    color: black !important;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n}\n\n\/* Tab Content *\/\n.wma-tab-content {\n    display: none;\n}\n\n.wma-tab-content.active {\n    display: block;\n}\n\n.wma-form-group {\n    margin-bottom: 16px;\n}\n\n.wma-form-group label {\n    display: block;\n    margin-bottom: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    color: #374151;\n}\n\n.wma-form-group label .required {\n    color: #dc2626;\n}\n\n.wma-form-group input[type=\"text\"],\n.wma-form-group input[type=\"email\"],\n.wma-form-group input[type=\"password\"],\n.wma-form-group input[type=\"tel\"],\n.wma-form-group textarea {\n    width: 100%;\n    padding: 12px 14px;\n    border: 1px solid #d1d5db;\n    border-radius: 8px;\n    font-size: 15px;\n    transition: border-color 0.2s, box-shadow 0.2s;\n    box-sizing: border-box;\n    font-family: inherit;\n}\n\n.wma-form-group textarea {\n    resize: vertical;\n    min-height: 80px;\n}\n\n.wma-form-group input:focus,\n.wma-form-group textarea:focus {\n    outline: none;\n    border-color: #10b981;\n    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n}\n\n.wma-form-group input::placeholder,\n.wma-form-group textarea::placeholder {\n    color: #9ca3af;\n}\n\n.wma-form-group small {\n    display: block;\n    margin-top: 4px;\n    font-size: 12px;\n    color: #6b7280;\n}\n\n.wma-checkbox-group label {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    cursor: pointer;\n    font-size: 13px;\n    line-height: 1.4;\n}\n\n.wma-checkbox-group input[type=\"checkbox\"] {\n    width: 16px;\n    height: 16px;\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.wma-checkbox-group a {\n    color: #10b981;\n    text-decoration: none;\n}\n\n.wma-checkbox-group a:hover {\n    text-decoration: underline;\n}\n\n.wma-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 12px 24px;\n    border: none;\n    border-radius: 8px;\n    font-size: 15px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.wma-btn-block {\n    width: 100%;\n}\n\n.wma-btn-primary {\n    background: #10b981;\n    color: #fff;\n}\n\n.wma-btn-primary:hover {\n    background: #059669;\n}\n\n.wma-btn-primary:disabled {\n    background: #9ca3af;\n    cursor: not-allowed;\n}\n\n.wma-login-links {\n    text-align: center;\n    margin-top: 16px;\n}\n\n.wma-login-links a {\n    color: #6b7280;\n    font-size: 14px;\n    text-decoration: none;\n}\n\n.wma-login-links a:hover {\n    color: #10b981;\n}\n\n.wma-login-footer {\n    text-align: center;\n    margin-top: 24px;\n    padding-top: 24px;\n    border-top: 1px solid #e5e7eb;\n}\n\n.wma-login-footer p {\n    margin: 0;\n    font-size: 14px;\n    color: #6b7280;\n}\n\n.wma-login-footer a {\n    color: #10b981;\n    font-weight: 500;\n    text-decoration: none;\n}\n\n.wma-login-footer a:hover {\n    text-decoration: underline;\n}\n\n\/* Application Form Styles *\/\n.wma-application-intro {\n    text-align: center;\n    margin-bottom: 20px;\n}\n\n.wma-application-intro p {\n    color: #6b7280;\n    font-size: 14px;\n    margin: 0;\n}\n\n\/* File Upload *\/\n.wma-file-upload {\n    position: relative;\n}\n\n.wma-upload-area {\n    border: 2px dashed #d1d5db;\n    border-radius: 8px;\n    padding: 20px;\n    text-align: center;\n    cursor: pointer;\n    transition: all 0.2s;\n    background: #f9fafb;\n}\n\n.wma-upload-area:hover {\n    border-color: #10b981;\n    background: #f0fdf4;\n}\n\n.wma-upload-icon {\n    font-size: 32px;\n    display: block;\n    margin-bottom: 8px;\n}\n\n.wma-upload-text {\n    display: block;\n    font-size: 14px;\n    font-weight: 500;\n    color: #374151;\n    margin-bottom: 4px;\n}\n\n.wma-upload-hint {\n    display: block;\n    font-size: 12px;\n    color: #9ca3af;\n}\n\n.wma-upload-preview {\n    position: relative;\n    border-radius: 8px;\n    overflow: hidden;\n    border: 1px solid #e5e7eb;\n}\n\n.wma-upload-preview img {\n    width: 100%;\n    height: 120px;\n    object-fit: cover;\n}\n\n.wma-remove-upload {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background: rgba(0,0,0,0.6);\n    color: #fff;\n    border: none;\n    cursor: pointer;\n    font-size: 16px;\n    line-height: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.wma-remove-upload:hover {\n    background: rgba(220, 38, 38, 0.9);\n}\n\n\/* Live Selfie Capture *\/\n.wma-selfie-capture {\n    position: relative;\n}\n\n.wma-camera-start {\n    border: 2px dashed #d1d5db;\n    border-radius: 8px;\n    padding: 24px;\n    text-align: center;\n    background: #f9fafb;\n}\n\n.wma-camera-icon {\n    font-size: 40px;\n    display: block;\n    margin-bottom: 8px;\n}\n\n.wma-camera-text {\n    display: block;\n    font-size: 14px;\n    font-weight: 600;\n    color: #374151;\n    margin-bottom: 4px;\n}\n\n.wma-camera-hint {\n    display: block;\n    font-size: 12px;\n    color: #9ca3af;\n    margin-bottom: 12px;\n}\n\n.wma-btn-sm {\n    padding: 8px 16px;\n    font-size: 13px;\n}\n\n.wma-camera-container {\n    position: relative;\n    border-radius: 8px;\n    overflow: hidden;\n    background: #000;\n    display: none;\n}\n\n.wma-camera-container.active {\n    display: block;\n}\n\n#wma-camera-video {\n    width: 100%;\n    height: 240px;\n    object-fit: cover;\n    transform: scaleX(-1);\n}\n\n.wma-camera-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 50px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none;\n}\n\n.wma-face-guide {\n    width: 140px;\n    height: 180px;\n    border: 3px dashed rgba(255,255,255,0.6);\n    border-radius: 50%;\n}\n\n.wma-camera-controls {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    padding: 12px;\n    background: rgba(0,0,0,0.5);\n    text-align: center;\n}\n\n.wma-btn-capture {\n    background: #fff;\n    color: #374151;\n    border-radius: 24px;\n    padding: 10px 24px;\n}\n\n.wma-btn-capture:hover {\n    background: #f3f4f6;\n}\n\n.wma-capture-icon {\n    margin-right: 6px;\n}\n\n.wma-selfie-preview {\n    border-radius: 8px;\n    overflow: hidden;\n    border: 2px solid #10b981;\n    background: #f0fdf4;\n}\n\n.wma-selfie-preview img {\n    width: 100%;\n    height: 200px;\n    object-fit: cover;\n}\n\n.wma-selfie-actions {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px;\n    background: #f0fdf4;\n}\n\n.wma-selfie-status {\n    font-size: 13px;\n    color: #059669;\n    font-weight: 500;\n}\n\n.wma-camera-error {\n    border: 2px dashed #fecaca;\n    border-radius: 8px;\n    padding: 20px;\n    text-align: center;\n    background: #fef2f2;\n}\n\n.wma-error-icon {\n    font-size: 32px;\n    display: block;\n    margin-bottom: 8px;\n}\n\n.wma-error-text {\n    font-size: 13px;\n    color: #dc2626;\n}\n\n\/* PDF Preview *\/\n.wma-pdf-preview {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    padding: 30px 20px;\n    background: #f8fafc;\n}\n\n.wma-pdf-icon {\n    font-size: 40px;\n}\n\n.wma-pdf-name {\n    font-size: 14px;\n    color: #374151;\n    font-weight: 500;\n    max-width: 200px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n\/* ID Document Type Selector *\/\n.wma-id-type-selector {\n    display: flex;\n    gap: 12px;\n    margin: 12px 0 20px;\n}\n\n.wma-id-type-option {\n    flex: 1;\n    cursor: pointer;\n    margin-bottom: 0;\n}\n\n.wma-id-type-option input[type=\"radio\"] {\n    display: none;\n}\n\n.wma-id-type-content {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px;\n    border: 2px solid #e5e7eb;\n    border-radius: 10px;\n    background: #fff;\n    transition: all 0.2s;\n}\n\n.wma-id-type-option:hover .wma-id-type-content {\n    border-color: #10b981;\n    background: #f0fdf4;\n}\n\n.wma-id-type-option input[type=\"radio\"]:checked + .wma-id-type-content {\n    border-color: #10b981;\n    background: #ecfdf5;\n}\n\n.wma-id-type-icon {\n    font-size: 28px;\n    line-height: 1;\n}\n\n.wma-id-type-text {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.wma-id-type-text strong {\n    font-size: 14px;\n    color: #374151;\n}\n\n.wma-id-type-text small {\n    font-size: 12px;\n    color: #6b7280;\n}\n\n\/* ID Photos Section *\/\n.wma-id-photos-section {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.wma-id-photo-capture {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.wma-id-photo-capture > label {\n    font-size: 13px;\n    font-weight: 600;\n    color: #374151;\n    margin-bottom: 0;\n}\n\n.wma-id-capture-container {\n    position: relative;\n    border-radius: 10px;\n    overflow: hidden;\n    background: #f9fafb;\n    border: 2px dashed #d1d5db;\n}\n\n\/* ID Camera View *\/\n.wma-id-camera-view {\n    position: relative;\n    background: #000;\n}\n\n.wma-id-camera-view video {\n    width: 100%;\n    height: 280px;\n    object-fit: cover;\n}\n\n.wma-id-camera-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 60px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none;\n}\n\n.wma-id-frame-guide {\n    width: 85%;\n    max-width: 320px;\n    height: 200px;\n    border: 3px dashed rgba(16, 185, 129, 0.8);\n    border-radius: 12px;\n    background: rgba(16, 185, 129, 0.1);\n}\n\n.wma-id-camera-controls {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    padding: 12px;\n    background: rgba(0,0,0,0.7);\n    display: flex;\n    gap: 8px;\n    justify-content: center;\n    align-items: center;\n}\n\n.wma-id-camera-controls .wma-btn-capture {\n    background: #10b981;\n    color: #fff;\n    border-radius: 24px;\n    padding: 10px 20px;\n    flex: 1;\n    max-width: 200px;\n}\n\n.wma-id-camera-controls .wma-btn-capture:hover {\n    background: #059669;\n}\n\n.wma-id-camera-controls .wma-btn-cancel-camera {\n    background: rgba(255,255,255,0.2);\n    color: #fff;\n    border: 1px solid rgba(255,255,255,0.3);\n}\n\n\/* ID Start Capture *\/\n.wma-id-start-capture {\n    padding: 32px 20px;\n    text-align: center;\n}\n\n.wma-id-icon {\n    font-size: 48px;\n    display: block;\n    margin-bottom: 12px;\n}\n\n.wma-id-text {\n    display: block;\n    font-size: 14px;\n    font-weight: 600;\n    color: #374151;\n    margin-bottom: 16px;\n}\n\n.wma-id-capture-buttons {\n    display: flex;\n    gap: 8px;\n    justify-content: center;\n}\n\n\/* ID Preview *\/\n.wma-id-preview {\n    position: relative;\n}\n\n.wma-id-preview img {\n    width: 100%;\n    height: 200px;\n    object-fit: cover;\n}\n\n.wma-id-preview-actions {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px;\n    background: #ecfdf5;\n}\n\n.wma-id-status {\n    font-size: 13px;\n    color: #059669;\n    font-weight: 500;\n}\n\n\/* ID PDF Section *\/\n.wma-id-pdf-section .wma-file-upload {\n    margin-top: 0;\n}\n\n@media (max-width: 480px) {\n    .wma-id-type-selector {\n        flex-direction: column;\n        gap: 8px;\n    }\n    \n    .wma-id-camera-view video {\n        height: 240px;\n    }\n    \n    .wma-id-frame-guide {\n        height: 160px;\n    }\n    \n    .wma-id-capture-buttons {\n        flex-direction: column;\n    }\n    \n    .wma-id-capture-buttons .wma-btn {\n        width: 100%;\n    }\n}\n\n\/* Form Error *\/\n.wma-form-error {\n    background: #fee2e2;\n    color: #dc2626;\n    padding: 12px 16px;\n    border-radius: 8px;\n    font-size: 14px;\n    margin-bottom: 16px;\n    border: 1px solid #fecaca;\n}\n\n\/* Login Button States *\/\n.wma-btn-loading {\n    display: none;\n    align-items: center;\n}\n\n.wma-btn:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n\/* Loading Spinner *\/\n.wma-spinner {\n    display: inline-block;\n    width: 16px;\n    height: 16px;\n    border: 2px solid rgba(255,255,255,0.3);\n    border-radius: 50%;\n    border-top-color: #fff;\n    animation: wma-spin 0.8s linear infinite;\n    margin-right: 8px;\n}\n\n@keyframes wma-spin {\n    to { transform: rotate(360deg); }\n}\n\n\/* Application Success *\/\n.wma-application-success {\n    text-align: center;\n    padding: 20px 0;\n}\n\n.wma-success-icon {\n    font-size: 64px;\n    margin-bottom: 16px;\n}\n\n.wma-application-success h3 {\n    font-size: 20px;\n    color: #059669;\n    margin: 0 0 12px;\n}\n\n.wma-application-success > p {\n    color: #6b7280;\n    font-size: 14px;\n    margin: 0 0 24px;\n    line-height: 1.5;\n}\n\n.wma-next-steps {\n    background: #f0fdf4;\n    border-radius: 8px;\n    padding: 16px;\n    text-align: left;\n}\n\n.wma-next-steps h4 {\n    font-size: 14px;\n    color: #059669;\n    margin: 0 0 12px;\n}\n\n.wma-next-steps ul {\n    margin: 0;\n    padding-left: 20px;\n}\n\n.wma-next-steps li {\n    font-size: 13px;\n    color: #374151;\n    margin-bottom: 6px;\n}\n\n.wma-next-steps li:last-child {\n    margin-bottom: 0;\n}\n\n\/* How it Works *\/\n.wma-how-it-works {\n    margin-top: 32px;\n    padding-top: 24px;\n    border-top: 1px solid #e5e7eb;\n}\n\n.wma-how-it-works h4 {\n    font-size: 14px;\n    color: #374151;\n    margin: 0 0 16px;\n    text-align: center;\n}\n\n.wma-steps {\n    display: flex;\n    gap: 12px;\n}\n\n.wma-step {\n    flex: 1;\n    text-align: center;\n}\n\n.wma-step-number {\n    width: 32px;\n    height: 32px;\n    background: #10b981;\n    color: #fff;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 14px;\n    font-weight: 600;\n    margin: 0 auto 8px;\n}\n\n.wma-step-content strong {\n    display: block;\n    font-size: 13px;\n    color: #374151;\n    margin-bottom: 4px;\n}\n\n.wma-step-content p {\n    font-size: 11px;\n    color: #9ca3af;\n    margin: 0;\n    line-height: 1.3;\n}\n\n\/* Responsive *\/\n@media (max-width: 480px) {\n    .wma-shopper-login-container {\n        padding: 12px;\n        align-items: flex-start;\n        padding-top: 20px;\n    }\n    \n    .wma-login-card {\n        padding: 24px 20px;\n    }\n    \n    .wma-steps {\n        flex-direction: column;\n        gap: 16px;\n    }\n    \n    .wma-step {\n        display: flex;\n        align-items: center;\n        text-align: left;\n        gap: 12px;\n    }\n    \n    .wma-step-number {\n        margin: 0;\n        flex-shrink: 0;\n    }\n}\n\n\/* Tasker Registration Section *\/\n.wma-runner-registration-section {\n    margin-top: 24px;\n    padding-top: 20px;\n}\n\n.wma-section-divider {\n    display: flex;\n    align-items: center;\n    margin-bottom: 16px;\n}\n\n.wma-section-divider::before,\n.wma-section-divider::after {\n    content: '';\n    flex: 1;\n    height: 1px;\n    background: #e5e7eb;\n}\n\n.wma-section-divider span {\n    padding: 0 12px;\n    font-size: 12px;\n    font-weight: 600;\n    color: #6b7280;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.wma-runner-toggle {\n    display: flex !important;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 16px;\n    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);\n    border: 2px solid #d1fae5;\n    border-radius: 12px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.wma-runner-toggle:hover {\n    border-color: #10b981;\n    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);\n}\n\n.wma-runner-toggle input[type=\"checkbox\"] {\n    width: 20px;\n    height: 20px;\n    margin-top: 4px;\n    flex-shrink: 0;\n    accent-color: #10b981;\n}\n\n.wma-runner-toggle-content {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    flex: 1;\n}\n\n.wma-runner-icon {\n    font-size: 28px;\n    line-height: 1;\n}\n\n.wma-runner-text {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.wma-runner-text strong {\n    font-size: 15px;\n    color: #065f46;\n}\n\n.wma-runner-text small {\n    font-size: 13px;\n    color: #6b7280;\n    line-height: 1.4;\n}\n\n\/* Tasker Categories Section *\/\n.wma-runner-categories-section {\n    margin-top: 16px;\n    padding: 16px;\n    background: #f9fafb;\n    border-radius: 12px;\n    border: 1px solid #e5e7eb;\n}\n\n.wma-runner-categories-section .wma-form-group {\n    margin-bottom: 0;\n}\n\n.wma-runner-categories-section label {\n    font-size: 14px;\n    font-weight: 600;\n    color: #374151;\n    margin-bottom: 4px;\n}\n\n.wma-field-hint {\n    font-size: 12px;\n    color: #6b7280;\n    margin-bottom: 12px;\n    line-height: 1.4;\n}\n\n.wma-categories-loading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 20px;\n    color: #6b7280;\n    font-size: 14px;\n}\n\n.wma-categories-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.wma-category-instruction {\n    font-size: 13px;\n    color: #6b7280;\n    margin: 0 0 12px 0;\n    padding: 10px 12px;\n    background: #f0f9ff;\n    border-radius: 8px;\n    border-left: 3px solid #10b981;\n}\n\n.wma-category-group {\n    background: #fff;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.wma-category-header {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 14px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n    cursor: pointer;\n    transition: background 0.2s;\n}\n\n.wma-category-header:hover {\n    background: #f3f4f6;\n}\n\n.wma-category-header input[type=\"checkbox\"],\n.wma-category-header input[type=\"radio\"] {\n    width: 18px;\n    height: 18px;\n    accent-color: #10b981;\n}\n\n.wma-category-header label {\n    flex: 1;\n    font-size: 14px;\n    font-weight: 600;\n    color: #374151;\n    cursor: pointer;\n    margin-bottom: 0;\n}\n\n.wma-category-toggle {\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #9ca3af;\n    transition: transform 0.2s;\n}\n\n.wma-category-toggle.expanded {\n    transform: rotate(180deg);\n}\n\n.wma-subcategories {\n    padding: 8px 14px 12px;\n    display: none;\n}\n\n.wma-subcategories.expanded {\n    display: block;\n}\n\n.wma-subcategory-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 0;\n    border-bottom: 1px solid #f3f4f6;\n}\n\n.wma-subcategory-item:last-child {\n    border-bottom: none;\n}\n\n.wma-subcategory-item input[type=\"checkbox\"] {\n    width: 16px;\n    height: 16px;\n    accent-color: #10b981;\n}\n\n.wma-subcategory-item input[type=\"checkbox\"]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.wma-subcategory-item input[type=\"checkbox\"]:disabled + label {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.wma-subcategory-item label {\n    font-size: 13px;\n    color: #4b5563;\n    cursor: pointer;\n    margin-bottom: 0;\n}\n\n.wma-no-subcategories {\n    padding: 8px 0;\n    font-size: 12px;\n    color: #9ca3af;\n    font-style: italic;\n}\n\n.wma-categories-empty {\n    text-align: center;\n    padding: 20px;\n    color: #6b7280;\n    font-size: 14px;\n}\n\n.wma-selected-count {\n    margin-top: 12px;\n    padding: 10px 14px;\n    background: #ecfdf5;\n    border-radius: 8px;\n    font-size: 13px;\n    color: #065f46;\n    display: none;\n}\n\n.wma-selected-count.visible {\n    display: block;\n}\n\n@media (max-width: 480px) {\n    .wma-runner-toggle {\n        padding: 12px;\n    }\n    \n    .wma-runner-icon {\n        font-size: 24px;\n    }\n    \n    .wma-runner-text strong {\n        font-size: 14px;\n    }\n    \n    .wma-runner-text small {\n        font-size: 12px;\n    }\n    \n    .wma-runner-categories-section {\n        padding: 12px;\n    }\n}\n\n\/* City Selector Styles *\/\n.wma-city-selector {\n    border-radius: 8px;\n    background: #fff;\n    overflow: hidden;\n}\n\n.wma-city-search {\n    position: relative;\n    padding: 12px;\n}\n\n.wma-city-search-input {\n    width: 100%;\n    padding: 10px 36px 10px 12px;\n    border: 1px solid #d1d5db;\n    border-radius: 6px;\n    font-size: 14px;\n    box-sizing: border-box;\n}\n\n.wma-city-search-input:focus {\n    outline: none;\n    border-color: #10b981;\n    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n}\n\n.wma-search-icon {\n    position: absolute;\n    right: 24px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: #9ca3af;\n    pointer-events: none;\n}\n\n.wma-city-checkboxes {\n    max-height: 300px;\n    overflow-y: auto;\n    padding: 12px;\n}\n\n.wma-city-checkbox {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px;\n    cursor: pointer;\n    border-radius: 6px;\n    transition: background 0.2s;\n    margin-bottom: 4px;\n}\n\n.wma-city-checkbox:hover {\n    background: #f3f4f6;\n}\n\n.wma-city-checkbox input[type=\"checkbox\"] {\n    width: 18px;\n    height: 18px;\n    cursor: pointer;\n    flex-shrink: 0;\n}\n\n.wma-city-checkbox input[type=\"checkbox\"]:checked {\n    accent-color: #10b981;\n}\n\n.wma-load-more-cities {\n    width: 100%;\n    padding: 12px;\n    margin-top: 8px;\n    background: #f3f4f6;\n    border: 1px solid #d1d5db;\n    border-radius: 6px;\n    color: #374151;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.wma-load-more-cities:hover {\n    background: #e5e7eb;\n    border-color: #9ca3af;\n}\n\n.wma-load-more-cities:active {\n    background: #d1d5db;\n}\n\n.wma-selected-cities {\n    padding: 12px;\n    border-top: 1px solid #e5e7eb;\n    min-height: 20px;\n}\n\n.wma-selected-cities-list {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.wma-city-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: #d1fae5;\n    color: #065f46;\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 500;\n}\n<\/style>\n\n<script>\n(function() {\n    'use strict';\n    \n    document.addEventListener('DOMContentLoaded', function() {\n        \/\/ Tab switching\n        var tabBtns = document.querySelectorAll('.wma-tab-btn');\n        var tabContents = document.querySelectorAll('.wma-tab-content');\n        \n        tabBtns.forEach(function(btn) {\n            btn.addEventListener('click', function() {\n                var targetTab = this.getAttribute('data-tab');\n                \n                tabBtns.forEach(function(b) { b.classList.remove('active'); });\n                tabContents.forEach(function(c) { c.classList.remove('active'); });\n                \n                this.classList.add('active');\n                document.getElementById('wma-tab-' + targetTab).classList.add('active');\n            });\n        });\n        \n        \/\/ Initialize City Multi-Selector\n        initializeCitySelector();\n        \n        \/\/ Initialize ID Document Capture System\n        initializeIdDocumentCapture();\n        \n        \/\/ ID Document file upload handling (supports images and PDF) - LEGACY, kept for backward compatibility\n        var uploadAreas = document.querySelectorAll('.wma-upload-area:not(#wma-pdf-upload-area)');\n        uploadAreas.forEach(function(area) {\n            area.addEventListener('click', function() {\n                var targetInput = this.getAttribute('data-target');\n                var acceptTypes = this.getAttribute('data-accept') || 'image\/*';\n                var fileInput = document.createElement('input');\n                fileInput.type = 'file';\n                fileInput.accept = acceptTypes;\n                fileInput.style.display = 'none';\n                \n                fileInput.addEventListener('change', function(e) {\n                    if (e.target.files && e.target.files[0]) {\n                        handleFileUpload(e.target.files[0], targetInput, area.parentElement);\n                    }\n                });\n                \n                document.body.appendChild(fileInput);\n                fileInput.click();\n                document.body.removeChild(fileInput);\n            });\n        });\n        \n        \/\/ Remove upload buttons\n        document.querySelectorAll('.wma-remove-upload').forEach(function(btn) {\n            btn.addEventListener('click', function(e) {\n                e.preventDefault();\n                var container = this.closest('.wma-file-upload');\n                var uploadArea = container.querySelector('.wma-upload-area');\n                var preview = container.querySelector('.wma-upload-preview');\n                var hiddenInput = container.querySelector('input[type=\"hidden\"]');\n                var previewImg = preview.querySelector('.wma-preview-image');\n                var pdfPreview = preview.querySelector('.wma-pdf-preview');\n                \n                uploadArea.style.display = 'block';\n                preview.style.display = 'none';\n                if (previewImg) previewImg.src = '';\n                if (pdfPreview) pdfPreview.style.display = 'none';\n                hiddenInput.value = '';\n            });\n        });\n        \n        \/\/ Live Selfie Camera handling\n        var cameraStream = null;\n        var startCameraBtn = document.getElementById('wma-start-camera-btn');\n        var captureBtn = document.getElementById('wma-capture-btn');\n        var retakeBtn = document.getElementById('wma-retake-btn');\n        var cameraStart = document.getElementById('wma-camera-start');\n        var cameraContainer = document.getElementById('wma-camera-container');\n        var selfiePreview = document.getElementById('wma-selfie-preview');\n        var cameraError = document.getElementById('wma-camera-error');\n        var video = document.getElementById('wma-camera-video');\n        var canvas = document.getElementById('wma-camera-canvas');\n        var selfieImg = document.getElementById('wma-selfie-img');\n        var selfieInput = document.getElementById('app_profile_photo_url');\n        \n        if (startCameraBtn) {\n            startCameraBtn.addEventListener('click', startCamera);\n        }\n        \n        if (captureBtn) {\n            captureBtn.addEventListener('click', captureSelfie);\n        }\n        \n        if (retakeBtn) {\n            retakeBtn.addEventListener('click', retakeSelfie);\n        }\n        \n        function startCamera() {\n            cameraStart.style.display = 'none';\n            cameraError.style.display = 'none';\n            \n            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {\n                navigator.mediaDevices.getUserMedia({ \n                    video: { \n                        facingMode: 'user',\n                        width: { ideal: 640 },\n                        height: { ideal: 480 }\n                    } \n                })\n                .then(function(stream) {\n                    cameraStream = stream;\n                    video.srcObject = stream;\n                    cameraContainer.classList.add('active');\n                })\n                .catch(function(err) {\n                    console.error('Camera error:', err);\n                    cameraError.style.display = 'block';\n                    cameraStart.style.display = 'block';\n                });\n            } else {\n                cameraError.querySelector('.wma-error-text').textContent = 'Camera not supported on this device';\n                cameraError.style.display = 'block';\n                cameraStart.style.display = 'block';\n            }\n        }\n        \n        function captureSelfie() {\n            if (!video.srcObject) return;\n            \n            \/\/ Set canvas size to match video\n            canvas.width = video.videoWidth;\n            canvas.height = video.videoHeight;\n            \n            \/\/ Draw mirrored image (to match what user sees)\n            var ctx = canvas.getContext('2d');\n            ctx.translate(canvas.width, 0);\n            ctx.scale(-1, 1);\n            ctx.drawImage(video, 0, 0);\n            \n            \/\/ Convert to blob and upload\n            canvas.toBlob(function(blob) {\n                uploadSelfie(blob);\n            }, 'image\/jpeg', 0.85);\n        }\n        \n        function uploadSelfie(blob) {\n            \/\/ Show loading state\n            captureBtn.disabled = true;\n            captureBtn.innerHTML = '<span class=\"wma-spinner\"><\/span> Processing...';\n            \n            var formData = new FormData();\n            formData.append('action', 'wma_upload_application_file');\n            formData.append('nonce', '0b5e90d418');\n            formData.append('file', blob, 'selfie_' + Date.now() + '.jpg');\n            \n            fetch('https:\/\/kwata.app\/errands\/wp-admin\/admin-ajax.php', {\n                method: 'POST',\n                body: formData\n            })\n            .then(function(response) { return response.json(); })\n            .then(function(data) {\n                if (data.success) {\n                    selfieInput.value = data.data.url;\n                    selfieImg.src = data.data.url;\n                    \n                    \/\/ Stop camera and show preview\n                    stopCamera();\n                    cameraContainer.classList.remove('active');\n                    selfiePreview.style.display = 'block';\n                } else {\n                    alert(data.data.message || 'Failed to save selfie');\n                    resetCaptureBtn();\n                }\n            })\n            .catch(function(error) {\n                console.error('Upload error:', error);\n                alert('Failed to save selfie. Please try again.');\n                resetCaptureBtn();\n            });\n        }\n        \n        function resetCaptureBtn() {\n            captureBtn.disabled = false;\n            captureBtn.innerHTML = '<span class=\"wma-capture-icon\">\ud83d\udcf8<\/span> Take Selfie';\n        }\n        \n        function retakeSelfie() {\n            selfiePreview.style.display = 'none';\n            selfieInput.value = '';\n            selfieImg.src = '';\n            \/\/ Reset capture button state before starting camera\n            resetCaptureBtn();\n            startCamera();\n        }\n        \n        function stopCamera() {\n            if (cameraStream) {\n                cameraStream.getTracks().forEach(function(track) {\n                    track.stop();\n                });\n                cameraStream = null;\n            }\n        }\n        \n        \/\/ Stop camera when leaving page\n        window.addEventListener('beforeunload', stopCamera);\n        \n        \/\/ ==================== ID Document Capture System ====================\n        initializeIdDocumentCapture();\n        \n        \/\/ ==================== Tasker Registration Handling ====================\n        var isRunnerCheckbox = document.getElementById('app_is_runner');\n        var runnerCategoriesSection = document.getElementById('wma-runner-categories-section');\n        var categoriesLoading = document.getElementById('wma-categories-loading');\n        var categoriesList = document.getElementById('wma-categories-list');\n        var runnerCategoriesInput = document.getElementById('app_runner_categories');\n        var categoriesLoaded = false;\n        var selectedCategories = [];\n        \n        if (isRunnerCheckbox) {\n            isRunnerCheckbox.addEventListener('change', function() {\n                if (this.checked) {\n                    runnerCategoriesSection.style.display = 'block';\n                    if (!categoriesLoaded) {\n                        loadErrandCategories();\n                    }\n                } else {\n                    runnerCategoriesSection.style.display = 'none';\n                    \/\/ Clear selected categories when unchecked\n                    selectedCategories = [];\n                    updateSelectedCategoriesInput();\n                }\n            });\n        }\n        \n        function loadErrandCategories() {\n            categoriesLoading.style.display = 'flex';\n            categoriesList.style.display = 'none';\n            \n            var formData = new FormData();\n            formData.append('action', 'wma_get_errand_categories');\n            formData.append('nonce', '686469dfc3');\n            \n            fetch('https:\/\/kwata.app\/errands\/wp-admin\/admin-ajax.php', {\n                method: 'POST',\n                body: formData\n            })\n            .then(function(response) { return response.json(); })\n            .then(function(data) {\n                categoriesLoading.style.display = 'none';\n                \n                if (data.success && data.data.categories && data.data.categories.length > 0) {\n                    renderCategories(data.data.categories);\n                    categoriesList.style.display = 'flex';\n                    categoriesLoaded = true;\n                } else {\n                    categoriesList.innerHTML = '<div class=\"wma-categories-empty\">No errand categories available yet. You can still apply as a Market Shopper.<\/div>';\n                    categoriesList.style.display = 'block';\n                }\n            })\n            .catch(function(error) {\n                console.error('Error loading categories:', error);\n                categoriesLoading.style.display = 'none';\n                categoriesList.innerHTML = '<div class=\"wma-categories-empty\">Failed to load categories. Please try again.<\/div>';\n                categoriesList.style.display = 'block';\n            });\n        }\n        \n        function renderCategories(categories) {\n            var html = '';\n            \n            \/\/ Add instruction for multiple category selection (up to 3)\n            html += '<p class=\"wma-category-instruction\">Select up to 3 categories, then choose the subcategories you can handle:<\/p>';\n            \n            categories.forEach(function(category) {\n                var hasSubcategories = category.subcategories && category.subcategories.length > 0;\n                \n                html += '<div class=\"wma-category-group\" data-category-id=\"' + category.id + '\">';\n                html += '<div class=\"wma-category-header\">';\n                \/\/ Use checkbox for multiple category selection (up to 3)\n                html += '<input type=\"checkbox\" id=\"cat_' + category.id + '\" value=\"' + category.id + '\" class=\"wma-category-checkbox\">';\n                html += '<label for=\"cat_' + category.id + '\">' + escapeHtml(category.name) + '<\/label>';\n                \n                if (hasSubcategories) {\n                    html += '<span class=\"wma-category-toggle\">\u25bc<\/span>';\n                }\n                \n                html += '<\/div>';\n                \n                if (hasSubcategories) {\n                    html += '<div class=\"wma-subcategories\">';\n                    category.subcategories.forEach(function(sub) {\n                        html += '<div class=\"wma-subcategory-item\">';\n                        html += '<input type=\"checkbox\" id=\"subcat_' + sub.id + '\" value=\"' + sub.id + '\" class=\"wma-subcategory-checkbox\" data-parent=\"' + category.id + '\" disabled>';\n                        html += '<label for=\"subcat_' + sub.id + '\">' + escapeHtml(sub.name) + '<\/label>';\n                        html += '<\/div>';\n                    });\n                    html += '<\/div>';\n                }\n                \n                html += '<\/div>';\n            });\n            \n            \/\/ Add selected count display\n            html += '<div class=\"wma-selected-count\" id=\"wma-selected-count\">Selected: <span id=\"wma-selected-count-num\">0 categories, 0 subcategories<\/span><\/div>';\n            \n            categoriesList.innerHTML = html;\n            \n            \/\/ Attach event listeners\n            attachCategoryEventListeners();\n        }\n        \n        function attachCategoryEventListeners() {\n            var selectedMainCategories = [];\n            var maxCategories = 3;\n            \n            \/\/ Category header click to toggle subcategories\n            document.querySelectorAll('.wma-category-header').forEach(function(header) {\n                header.addEventListener('click', function(e) {\n                    if (e.target.tagName === 'INPUT') return; \/\/ Don't toggle when clicking checkbox\n                    \n                    var group = this.closest('.wma-category-group');\n                    var subcategories = group.querySelector('.wma-subcategories');\n                    var toggle = this.querySelector('.wma-category-toggle');\n                    \n                    if (subcategories) {\n                        subcategories.classList.toggle('expanded');\n                        if (toggle) {\n                            toggle.classList.toggle('expanded');\n                        }\n                    }\n                });\n            });\n            \n            \/\/ Main category checkbox change (multiple selection up to 3)\n            document.querySelectorAll('.wma-category-checkbox').forEach(function(checkbox) {\n                checkbox.addEventListener('change', function() {\n                    var categoryId = parseInt(this.value);\n                    var group = this.closest('.wma-category-group');\n                    \n                    if (this.checked) {\n                        \/\/ Check if we've reached the limit\n                        if (selectedMainCategories.length >= maxCategories) {\n                            this.checked = false;\n                            alert('You can select up to 3 categories maximum');\n                            return;\n                        }\n                        \n                        \/\/ Add to selected categories\n                        selectedMainCategories.push(categoryId);\n                        if (!selectedCategories.includes(categoryId)) {\n                            selectedCategories.push(categoryId);\n                        }\n                        \n                        \/\/ Enable subcategories for this category\n                        group.querySelectorAll('.wma-subcategory-checkbox').forEach(function(sub) {\n                            sub.disabled = false;\n                        });\n                        \n                        \/\/ Expand subcategories section\n                        var subSection = group.querySelector('.wma-subcategories');\n                        var toggle = group.querySelector('.wma-category-toggle');\n                        if (subSection) {\n                            subSection.classList.add('expanded');\n                            if (toggle) toggle.classList.add('expanded');\n                        }\n                    } else {\n                        \/\/ Remove from selected categories\n                        selectedMainCategories = selectedMainCategories.filter(function(id) { return id !== categoryId; });\n                        selectedCategories = selectedCategories.filter(function(id) { return id !== categoryId; });\n                        \n                        \/\/ Disable and uncheck subcategories for this category\n                        group.querySelectorAll('.wma-subcategory-checkbox').forEach(function(sub) {\n                            sub.checked = false;\n                            sub.disabled = true;\n                            \/\/ Remove subcategory from selected\n                            var subId = parseInt(sub.value);\n                            selectedCategories = selectedCategories.filter(function(id) { return id !== subId; });\n                        });\n                        \n                        \/\/ Collapse subcategories section\n                        var subSection = group.querySelector('.wma-subcategories');\n                        var toggle = group.querySelector('.wma-category-toggle');\n                        if (subSection) {\n                            subSection.classList.remove('expanded');\n                            if (toggle) toggle.classList.remove('expanded');\n                        }\n                    }\n                    \n                    updateSelectedCategoriesInput();\n                    updateCategoryLimitDisplay();\n                });\n            });\n            \n            \/\/ Subcategory checkbox change (multiple selection within selected categories)\n            document.querySelectorAll('.wma-subcategory-checkbox').forEach(function(checkbox) {\n                checkbox.addEventListener('change', function() {\n                    var subId = parseInt(this.value);\n                    var parentId = parseInt(this.getAttribute('data-parent'));\n                    \n                    \/\/ Ensure parent category is selected\n                    if (!selectedMainCategories.includes(parentId)) {\n                        return; \/\/ Should not happen since checkbox is disabled\n                    }\n                    \n                    if (this.checked) {\n                        \/\/ Add subcategory\n                        if (!selectedCategories.includes(subId)) {\n                            selectedCategories.push(subId);\n                        }\n                    } else {\n                        \/\/ Remove subcategory\n                        selectedCategories = selectedCategories.filter(function(id) { return id !== subId; });\n                    }\n                    \n                    updateSelectedCategoriesInput();\n                });\n            });\n            \n            function updateCategoryLimitDisplay() {\n                \/\/ Update visual feedback for category limit\n                var remaining = maxCategories - selectedMainCategories.length;\n                var countDisplay = document.getElementById('wma-selected-count');\n                if (countDisplay && remaining === 0) {\n                    \/\/ Disable unchecked category checkboxes when limit reached\n                    document.querySelectorAll('.wma-category-checkbox').forEach(function(cb) {\n                        if (!cb.checked) {\n                            cb.disabled = true;\n                        }\n                    });\n                } else {\n                    \/\/ Re-enable all category checkboxes\n                    document.querySelectorAll('.wma-category-checkbox').forEach(function(cb) {\n                        cb.disabled = false;\n                    });\n                }\n            }\n        }\n        \n        function updateSelectedCategoriesInput() {\n            runnerCategoriesInput.value = JSON.stringify(selectedCategories);\n            \n            \/\/ Update selected count display\n            var countDisplay = document.getElementById('wma-selected-count');\n            var countNum = document.getElementById('wma-selected-count-num');\n            \n            if (countDisplay && countNum) {\n                \/\/ Count main categories selected\n                var mainCategoryCheckboxes = document.querySelectorAll('.wma-category-checkbox:checked');\n                var mainCount = mainCategoryCheckboxes.length;\n                \/\/ Count subcategories (total selected minus main categories)\n                var subcategoryCount = selectedCategories.length - mainCount;\n                \n                countNum.textContent = mainCount + ' categories, ' + subcategoryCount + ' subcategories';\n                if (selectedCategories.length > 0) {\n                    countDisplay.classList.add('visible');\n                } else {\n                    countDisplay.classList.remove('visible');\n                }\n            }\n        }\n        \n        function escapeHtml(text) {\n            var div = document.createElement('div');\n            div.textContent = text;\n            return div.innerHTML;\n        }\n        \n        function decodeHtml(html) {\n            var txt = document.createElement('textarea');\n            txt.innerHTML = html;\n            return txt.value;\n        }\n        \n        \/\/ Login form submission\n        var loginForm = document.getElementById('wma-login-form');\n        if (loginForm) {\n            loginForm.addEventListener('submit', function(e) {\n                e.preventDefault();\n                submitLogin();\n            });\n        }\n\n        \/\/ Application form submission\n        var applicationForm = document.getElementById('wma-shopper-application-form');\n        if (applicationForm) {\n            applicationForm.addEventListener('submit', function(e) {\n                e.preventDefault();\n                submitApplication();\n            });\n        }\n    });\n    \n    function handleFileUpload(file, targetInputId, container) {\n        \/\/ Validate file type (images and PDF for ID documents)\n        var isImage = file.type.startsWith('image\/');\n        var isPdf = file.type === 'application\/pdf';\n        \n        if (!isImage && !isPdf) {\n            alert('Please select an image or PDF file');\n            return;\n        }\n        \n        \/\/ Max 10MB for PDF, 5MB for images\n        var maxSize = isPdf ? 10 * 1024 * 1024 : 5 * 1024 * 1024;\n        if (file.size > maxSize) {\n            alert(isPdf ? 'PDF file size must be less than 10MB' : 'Image file size must be less than 5MB');\n            return;\n        }\n        \n        var uploadArea = container.querySelector('.wma-upload-area');\n        var preview = container.querySelector('.wma-upload-preview');\n        var previewImg = preview.querySelector('.wma-preview-image');\n        var pdfPreview = preview.querySelector('.wma-pdf-preview');\n        var hiddenInput = document.getElementById(targetInputId);\n        \n        \/\/ Show loading state\n        uploadArea.innerHTML = '<span class=\"wma-spinner\"><\/span> Uploading...';\n        \n        \/\/ Upload via WordPress media\n        var formData = new FormData();\n        formData.append('action', 'wma_upload_application_file');\n        formData.append('nonce', '0b5e90d418');\n        formData.append('file', file);\n        \n        fetch('https:\/\/kwata.app\/errands\/wp-admin\/admin-ajax.php', {\n            method: 'POST',\n            body: formData\n        })\n        .then(function(response) { return response.json(); })\n        .then(function(data) {\n            if (data.success) {\n                hiddenInput.value = data.data.url;\n                uploadArea.style.display = 'none';\n                preview.style.display = 'block';\n                \n                \/\/ Show appropriate preview based on file type\n                if (data.data.type === 'application\/pdf') {\n                    if (previewImg) previewImg.style.display = 'none';\n                    if (pdfPreview) {\n                        pdfPreview.style.display = 'flex';\n                        pdfPreview.querySelector('.wma-pdf-name').textContent = file.name;\n                    }\n                } else {\n                    if (pdfPreview) pdfPreview.style.display = 'none';\n                    if (previewImg) {\n                        previewImg.style.display = 'block';\n                        previewImg.src = data.data.url;\n                    }\n                }\n            } else {\n                alert(data.data.message || 'Upload failed');\n                resetUploadArea(uploadArea, targetInputId);\n            }\n        })\n        .catch(function(error) {\n            console.error('Upload error:', error);\n            alert('Upload failed. Please try again.');\n            resetUploadArea(uploadArea, targetInputId);\n        });\n    }\n    \n    function resetUploadArea(uploadArea, targetInputId) {\n        var isIdDoc = targetInputId === 'app_id_document_url';\n        uploadArea.innerHTML = '<span class=\"wma-upload-icon\">' + (isIdDoc ? '\ud83d\udcc4' : '\ud83d\udcf7') + '<\/span>' +\n            '<span class=\"wma-upload-text\">Click to upload<\/span>' +\n            '<span class=\"wma-upload-hint\">' + (isIdDoc ? 'Image or PDF (National ID, Passport, Driver\\'s License)' : 'Clear photo of your face') + '<\/span>';\n        if (isIdDoc) {\n            uploadArea.setAttribute('data-accept', 'image\/*,.pdf');\n        }\n        uploadArea.style.display = 'block';\n    }\n    \n    function initializeCitySelector() {\n        var allCities = [\"Abong-Mbang\",\"Ako\",\"Akonolinga\",\"Ambam\",\"Bafang\",\"Bafia\",\"Bafoussam\",\"Bafut\",\"Bali\",\"Bambili\",\"Bamenda\",\"Bandjoun\",\"Bangem\",\"Banyo\",\"Batibo\",\"Batouri\",\"B\\u00e9labo\",\"Bertoua\",\"Buea\",\"Campo\",\"Dimako\",\"Dizangue\",\"Djoum\",\"Douala\",\"Dschang\",\"Ebolowa\",\"Ed\\u00e9a\",\"Eyumojock\",\"Fontem\",\"Foumban\",\"Foumbot\",\"Fundong\",\"Garoua\",\"Garoua-Boula\\u00ef\",\"Guider\",\"Idenau\",\"Ka\\u00e9l\\u00e9\",\"Kouss\\u00e9ri\",\"Kribi\",\"Kumba\",\"Kumbo\",\"Limb\\u00e9\",\"Lomi\\u00e9\",\"Loum\",\"Mak\\u00e9n\\u00e9n\\u00e9\",\"Mamfe\",\"Manjo\",\"Maroua\",\"Martap\",\"Mbalmayo\",\"Mbandjock\",\"Mbanga\",\"Mb\\u00ea\",\"Mbengwi\",\"Mbouda\",\"Meiganga\",\"Melong\",\"Menji\",\"Mokolo\",\"Monat\\u00e9l\\u00e9\",\"Mora\",\"Mouloudou\",\"Mutengene\",\"Nanga Eboko\",\"Ndu\",\"Ndop\",\"Ngaound\\u00e9r\\u00e9\",\"Nkambe\",\"Nkongsamba\",\"Nkoteng\",\"Nkwen\",\"Obala\",\"Penja\",\"Sa'a\",\"Sangm\\u00e9lima\",\"Santa\",\"Tibati\",\"Tiko\",\"Wum\",\"Yaound\\u00e9\",\"Yagoua\",\"Yokadouma\"];\n        var checkboxesContainer = document.getElementById('wma-city-checkboxes');\n        var searchInput = document.getElementById('app_city_search');\n        var citiesHiddenInput = document.getElementById('app_cities');\n        var selectedCitiesDiv = document.getElementById('wma-selected-cities');\n        var selectedCities = [];\n        var citiesPerPage = 10;\n        var currentPage = 1;\n        var filteredCities = [];\n        \n        if (!checkboxesContainer) return;\n        \n        \/\/ Helper function to decode HTML entities\n        function decodeHtml(html) {\n            var txt = document.createElement('textarea');\n            txt.innerHTML = html;\n            return txt.value;\n        }\n        \n        \/\/ Render cities with pagination\n        function renderCities(filter = '') {\n            checkboxesContainer.innerHTML = '';\n            filteredCities = allCities.filter(function(city) {\n                return city.toLowerCase().includes(filter.toLowerCase());\n            });\n            \n            if (filteredCities.length === 0) {\n                checkboxesContainer.innerHTML = '<p style=\"padding: 12px; color: #6b7280; text-align: center;\">No cities found<\/p>';\n                return;\n            }\n            \n            \/\/ Show first 10 cities\n            var citiesToShow = filteredCities.slice(0, citiesPerPage);\n            citiesToShow.forEach(function(city) {\n                var isSelected = selectedCities.includes(city);\n                var label = document.createElement('label');\n                label.className = 'wma-city-checkbox';\n                \/\/ Decode HTML entities for proper display\n                var decodedCity = decodeHtml(city);\n                label.innerHTML = '<input type=\"checkbox\" value=\"' + city + '\" ' + (isSelected ? 'checked' : '') + '> ' + decodedCity;\n                \n                var checkbox = label.querySelector('input');\n                checkbox.addEventListener('change', function() {\n                    if (this.checked) {\n                        if (!selectedCities.includes(city)) {\n                            selectedCities.push(city);\n                        }\n                    } else {\n                        selectedCities = selectedCities.filter(function(c) { return c !== city; });\n                    }\n                    updateSelectedCities();\n                });\n                \n                checkboxesContainer.appendChild(label);\n            });\n            \n            \/\/ Add \"Load More\" button if there are more cities\n            if (filteredCities.length > citiesPerPage) {\n                var loadMoreBtn = document.createElement('button');\n                loadMoreBtn.type = 'button';\n                loadMoreBtn.className = 'wma-load-more-cities';\n                loadMoreBtn.textContent = 'Load More';\n                \n                loadMoreBtn.addEventListener('click', function(e) {\n                    e.preventDefault();\n                    showMoreCities();\n                });\n                \n                checkboxesContainer.appendChild(loadMoreBtn);\n            }\n        }\n        \n        function showMoreCities() {\n            var startIdx = checkboxesContainer.querySelectorAll('.wma-city-checkbox').length;\n            var citiesToAdd = filteredCities.slice(startIdx, startIdx + citiesPerPage);\n            var loadMoreBtn = checkboxesContainer.querySelector('.wma-load-more-cities');\n            \n            if (loadMoreBtn) {\n                loadMoreBtn.remove();\n            }\n            \n            citiesToAdd.forEach(function(city) {\n                var isSelected = selectedCities.includes(city);\n                var label = document.createElement('label');\n                label.className = 'wma-city-checkbox';\n                label.innerHTML = '<input type=\"checkbox\" value=\"' + city + '\" ' + (isSelected ? 'checked' : '') + '> ' + city;\n                \n                var checkbox = label.querySelector('input');\n                checkbox.addEventListener('change', function() {\n                    if (this.checked) {\n                        if (!selectedCities.includes(city)) {\n                            selectedCities.push(city);\n                        }\n                    } else {\n                        selectedCities = selectedCities.filter(function(c) { return c !== city; });\n                    }\n                    updateSelectedCities();\n                });\n                \n                checkboxesContainer.appendChild(label);\n            });\n            \n            \/\/ Re-add \"Load More\" button if there are still more cities\n            if (startIdx + citiesToAdd.length < filteredCities.length) {\n                var newLoadMoreBtn = document.createElement('button');\n                newLoadMoreBtn.type = 'button';\n                newLoadMoreBtn.className = 'wma-load-more-cities';\n                newLoadMoreBtn.textContent = 'Load More';\n                \n                newLoadMoreBtn.addEventListener('click', function(e) {\n                    e.preventDefault();\n                    showMoreCities();\n                });\n                \n                checkboxesContainer.appendChild(newLoadMoreBtn);\n            }\n        }\n        \n        function updateSelectedCities() {\n            citiesHiddenInput.value = JSON.stringify(selectedCities);\n            \n            \/\/ Update selected cities display\n            selectedCitiesDiv.innerHTML = '';\n            if (selectedCities.length > 0) {\n                var citiesDisplay = document.createElement('div');\n                citiesDisplay.className = 'wma-selected-cities-list';\n                selectedCities.forEach(function(city) {\n                    var tag = document.createElement('span');\n                    tag.className = 'wma-city-tag';\n                    tag.textContent = city;\n                    citiesDisplay.appendChild(tag);\n                });\n                selectedCitiesDiv.appendChild(citiesDisplay);\n            }\n        }\n        \n        \/\/ Handle search\n        if (searchInput) {\n            searchInput.addEventListener('input', function() {\n                currentPage = 1;\n                renderCities(this.value);\n            });\n        }\n        \n        \/\/ Initial render\n        renderCities();\n    }\n    \n    function submitApplication() {\n        var form = document.getElementById('wma-shopper-application-form');\n        var submitBtn = document.getElementById('wma-submit-application');\n        var btnText = submitBtn.querySelector('.wma-btn-text');\n        var btnLoading = submitBtn.querySelector('.wma-btn-loading');\n        var errorDiv = document.getElementById('wma-application-error');\n        var successDiv = document.getElementById('wma-application-success');\n        \n        \/\/ Validate required fields\n        var fullName = form.querySelector('[name=\"full_name\"]').value.trim();\n        var email = form.querySelector('[name=\"email\"]').value.trim();\n        var phone = form.querySelector('[name=\"phone\"]').value.trim();\n        var citiesInput = form.querySelector('[name=\"cities\"]');\n        var cities = citiesInput && citiesInput.value ? JSON.parse(citiesInput.value) : [];\n        var selfieUrl = form.querySelector('[name=\"profile_photo_url\"]').value.trim();\n        var termsAccepted = form.querySelector('[name=\"terms_accepted\"]').checked;\n        \n        \/\/ ID Document validation\n        var idDocumentType = form.querySelector('input[name=\"id_document_type\"]:checked').value;\n        var idFrontUrl = form.querySelector('[name=\"id_document_front_url\"]').value.trim();\n        var idBackUrl = form.querySelector('[name=\"id_document_back_url\"]').value.trim();\n        var idPdfUrl = form.querySelector('[name=\"id_document_pdf_url\"]').value.trim();\n        \n        \/\/ Tasker registration fields\n        var isRunnerCheckbox = form.querySelector('[name=\"is_runner\"]');\n        var isRunner = isRunnerCheckbox && isRunnerCheckbox.checked;\n        var runnerCategoriesInput = form.querySelector('[name=\"runner_categories\"]');\n        var runnerCategories = runnerCategoriesInput ? runnerCategoriesInput.value : '';\n        \n        if (!fullName || !email || !phone || cities.length === 0) {\n            showError('Please fill in all required fields');\n            return;\n        }\n        \n        \/\/ Validate ID document based on selected type\n        if (idDocumentType === 'photos') {\n            if (!idFrontUrl || !idBackUrl) {\n                showError('Please capture both front and back of your ID card');\n                return;\n            }\n        } else {\n            if (!idPdfUrl) {\n                showError('Please upload your ID document PDF');\n                return;\n            }\n        }\n        \n        if (!selfieUrl) {\n            showError('Please take a live selfie photo for identity verification');\n            return;\n        }\n        \n        if (!termsAccepted) {\n            showError('Please accept the Terms of Service');\n            return;\n        }\n        \n        \/\/ Validate runner categories if registering as runner\n        if (isRunner) {\n            var categories = [];\n            try {\n                categories = runnerCategories ? JSON.parse(runnerCategories) : [];\n            } catch (e) {\n                categories = [];\n            }\n            \n            if (categories.length === 0) {\n                showError('Please select at least one errand category to register as a Tasker');\n                \/\/ Scroll to categories section\n                var categoriesSection = document.getElementById('wma-runner-categories-section');\n                if (categoriesSection) {\n                    categoriesSection.scrollIntoView({ behavior: 'smooth', block: 'center' });\n                }\n                return;\n            }\n        }\n        \n        \/\/ Email validation\n        var emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n        if (!emailRegex.test(email)) {\n            showError('Please enter a valid email address');\n            return;\n        }\n        \n        \/\/ Show loading state\n        btnText.style.display = 'none';\n        btnLoading.style.display = 'inline-flex';\n        submitBtn.disabled = true;\n        errorDiv.style.display = 'none';\n        \n        \/\/ Prepare form data\n        var formData = new FormData(form);\n        formData.append('action', 'wma_submit_shopper_application');\n        formData.append('nonce', form.querySelector('[name=\"wma_application_nonce\"]').value);\n        \n        \/\/ Convert cities array to comma-separated string for storage\n        formData.set('cities', JSON.stringify(cities));\n        \n        \/\/ Ensure runner data is included\n        if (isRunner) {\n            formData.set('is_runner', '1');\n            formData.set('runner_categories', runnerCategories);\n        } else {\n            formData.set('is_runner', '0');\n            formData.set('runner_categories', '');\n        }\n        \n        fetch('https:\/\/kwata.app\/errands\/wp-admin\/admin-ajax.php', {\n            method: 'POST',\n            body: formData\n        })\n        .then(function(response) { return response.json(); })\n        .then(function(data) {\n            if (data.success) {\n                form.style.display = 'none';\n                document.querySelector('.wma-how-it-works').style.display = 'none';\n                document.querySelector('.wma-application-intro').style.display = 'none';\n                document.querySelector('.wma-runner-registration-section').style.display = 'none';\n                successDiv.style.display = 'block';\n                \n                \/\/ Update success message if registered as runner\n                if (isRunner) {\n                    var successTitle = successDiv.querySelector('h3');\n                    if (successTitle) {\n                        successTitle.textContent = 'Application Submitted!';\n                    }\n                    var successText = successDiv.querySelector('p');\n                    if (successText) {\n                        successText.textContent = 'Thank you for applying to become a Market Shopper and Tasker. We will review your application and contact you via email within 24-48 hours.';\n                    }\n                }\n            } else {\n                showError(data.data.message || 'Application submission failed');\n            }\n        })\n        .catch(function(error) {\n            console.error('Submit error:', error);\n            showError('An error occurred. Please try again.');\n        })\n        .finally(function() {\n            btnText.style.display = 'inline';\n            btnLoading.style.display = 'none';\n            submitBtn.disabled = false;\n        });\n        \n        function showError(message) {\n            errorDiv.textContent = message;\n            errorDiv.style.display = 'block';\n            errorDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });\n        }\n    }\n\n    function submitLogin() {\n        var form = document.getElementById('wma-login-form');\n        var loginBtn = document.getElementById('wma-login-btn');\n        var btnText = loginBtn.querySelector('.wma-btn-text');\n        var btnLoading = loginBtn.querySelector('.wma-btn-loading');\n        var errorDiv = document.getElementById('wma-login-error');\n        \n        \/\/ Get form data\n        var username = form.querySelector('[name=\"username\"]').value.trim();\n        var password = form.querySelector('[name=\"password\"]').value;\n        var remember = form.querySelector('[name=\"remember\"]').checked;\n        var redirectTo = form.querySelector('[name=\"redirect_to\"]').value;\n        var nonce = form.querySelector('[name=\"wma_login_nonce\"]').value;\n        \n        \/\/ Validate\n        if (!username || !password) {\n            showLoginError('Please enter username and password');\n            return;\n        }\n        \n        \/\/ Show loading state\n        btnText.style.display = 'none';\n        btnLoading.style.display = 'inline-flex';\n        loginBtn.disabled = true;\n        errorDiv.style.display = 'none';\n        \n        \/\/ Prepare form data\n        var formData = new FormData();\n        formData.append('action', 'wma_process_shopper_login');\n        formData.append('username', username);\n        formData.append('password', password);\n        formData.append('remember', remember ? '1' : '');\n        formData.append('redirect_to', redirectTo);\n        formData.append('wma_login_nonce', nonce);\n        \n        fetch('https:\/\/kwata.app\/errands\/wp-admin\/admin-ajax.php', {\n            method: 'POST',\n            body: formData\n        })\n        .then(function(response) { return response.json(); })\n        .then(function(data) {\n            if (data.success) {\n                \/\/ Successful login - redirect\n                window.location.href = data.data.redirect_url;\n            } else {\n                showLoginError(data.data.message || 'Login failed');\n            }\n        })\n        .catch(function(error) {\n            console.error('Login error:', error);\n            showLoginError('An error occurred. Please try again.');\n        })\n        .finally(function() {\n            btnText.style.display = 'inline';\n            btnLoading.style.display = 'none';\n            loginBtn.disabled = false;\n        });\n        \n        function showLoginError(message) {\n            errorDiv.textContent = message;\n            errorDiv.style.display = 'block';\n            errorDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });\n        }\n    }\n    \n    \/\/ ==================== ID Document Capture System ====================\n    function initializeIdDocumentCapture() {\n        var idTypeRadios = document.querySelectorAll('input[name=\"id_document_type\"]');\n        var photosSection = document.getElementById('wma-id-photos-section');\n        var pdfSection = document.getElementById('wma-id-pdf-section');\n        var pdfUploadArea = document.getElementById('wma-pdf-upload-area');\n        var pdfPreview = document.getElementById('wma-pdf-preview');\n        var removePdfBtn = document.getElementById('wma-remove-pdf');\n        var pdfUrlInput = document.getElementById('app_id_document_pdf_url');\n        \n        var idStreams = { front: null, back: null };\n        \n        \/\/ Toggle between photos and PDF\n        idTypeRadios.forEach(function(radio) {\n            radio.addEventListener('change', function() {\n                if (this.value === 'photos') {\n                    photosSection.style.display = 'flex';\n                    pdfSection.style.display = 'none';\n                    \/\/ Clear PDF data\n                    if (pdfUrlInput) pdfUrlInput.value = '';\n                } else {\n                    photosSection.style.display = 'none';\n                    pdfSection.style.display = 'block';\n                    \/\/ Clear photo data\n                    document.getElementById('app_id_document_front_url').value = '';\n                    document.getElementById('app_id_document_back_url').value = '';\n                    \/\/ Stop any active cameras\n                    stopIdCamera('front');\n                    stopIdCamera('back');\n                }\n            });\n        });\n        \n        \/\/ PDF Upload\n        if (pdfUploadArea) {\n            pdfUploadArea.addEventListener('click', function() {\n                var fileInput = document.createElement('input');\n                fileInput.type = 'file';\n                fileInput.accept = 'application\/pdf';\n                fileInput.style.display = 'none';\n                \n                fileInput.addEventListener('change', function(e) {\n                    if (e.target.files && e.target.files[0]) {\n                        handlePdfUpload(e.target.files[0]);\n                    }\n                });\n                \n                document.body.appendChild(fileInput);\n                fileInput.click();\n                document.body.removeChild(fileInput);\n            });\n        }\n        \n        if (removePdfBtn) {\n            removePdfBtn.addEventListener('click', function() {\n                pdfUploadArea.style.display = 'block';\n                pdfPreview.style.display = 'none';\n                pdfUrlInput.value = '';\n            });\n        }\n        \n        \/\/ ID Photo Capture - Start Camera Buttons\n        document.querySelectorAll('.wma-start-id-camera').forEach(function(btn) {\n            btn.addEventListener('click', function() {\n                var side = this.getAttribute('data-side');\n                startIdCamera(side);\n            });\n        });\n        \n        \/\/ ID Photo Capture - Upload File Buttons\n        document.querySelectorAll('.wma-upload-id-file').forEach(function(btn) {\n            btn.addEventListener('click', function() {\n                var side = this.getAttribute('data-side');\n                uploadIdFile(side);\n            });\n        });\n        \n        \/\/ ID Photo Capture - Capture Buttons\n        document.querySelectorAll('.wma-btn-capture').forEach(function(btn) {\n            btn.addEventListener('click', function() {\n                var side = this.getAttribute('data-side');\n                captureIdPhoto(side);\n            });\n        });\n        \n        \/\/ ID Photo Capture - Cancel Camera Buttons\n        document.querySelectorAll('.wma-btn-cancel-camera').forEach(function(btn) {\n            btn.addEventListener('click', function() {\n                var side = this.getAttribute('data-side');\n                stopIdCamera(side);\n                document.getElementById('wma-id-' + side + '-camera').style.display = 'none';\n                document.getElementById('wma-id-' + side + '-start').style.display = 'block';\n            });\n        });\n        \n        \/\/ ID Photo Capture - Retake Buttons\n        document.querySelectorAll('.wma-retake-id').forEach(function(btn) {\n            btn.addEventListener('click', function() {\n                var side = this.getAttribute('data-side');\n                document.getElementById('wma-id-' + side + '-preview').style.display = 'none';\n                document.getElementById('wma-id-' + side + '-start').style.display = 'block';\n                document.getElementById('app_id_document_' + side + '_url').value = '';\n            });\n        });\n        \n        function handlePdfUpload(file) {\n            if (file.type !== 'application\/pdf') {\n                alert('Please select a PDF file');\n                return;\n            }\n            \n            if (file.size > 10 * 1024 * 1024) {\n                alert('PDF file size must be less than 10MB');\n                return;\n            }\n            \n            pdfUploadArea.innerHTML = '<span class=\"wma-spinner\"><\/span> Uploading...';\n            \n            var formData = new FormData();\n            formData.append('action', 'wma_upload_application_file');\n            formData.append('nonce', '0b5e90d418');\n            formData.append('file', file);\n            \n            fetch('https:\/\/kwata.app\/errands\/wp-admin\/admin-ajax.php', {\n                method: 'POST',\n                body: formData\n            })\n            .then(function(response) { return response.json(); })\n            .then(function(data) {\n                if (data.success) {\n                    pdfUrlInput.value = data.data.url;\n                    pdfUploadArea.style.display = 'none';\n                    pdfPreview.style.display = 'block';\n                    pdfPreview.querySelector('.wma-pdf-name').textContent = file.name;\n                } else {\n                    alert(data.data.message || 'Upload failed');\n                    resetPdfUploadArea();\n                }\n            })\n            .catch(function(error) {\n                console.error('Upload error:', error);\n                alert('Upload failed. Please try again.');\n                resetPdfUploadArea();\n            });\n        }\n        \n        function resetPdfUploadArea() {\n            pdfUploadArea.innerHTML = '<span class=\"wma-upload-icon\">\ud83d\udcc4<\/span>' +\n                '<span class=\"wma-upload-text\">Click to upload PDF<\/span>' +\n                '<span class=\"wma-upload-hint\">PDF file (max 10MB)<\/span>';\n            pdfUploadArea.style.display = 'block';\n        }\n        \n        function startIdCamera(side) {\n            document.getElementById('wma-id-' + side + '-start').style.display = 'none';\n            \n            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {\n                navigator.mediaDevices.getUserMedia({ \n                    video: { \n                        facingMode: 'environment',\n                        width: { ideal: 1280 },\n                        height: { ideal: 720 }\n                    } \n                })\n                .then(function(stream) {\n                    idStreams[side] = stream;\n                    var video = document.getElementById('wma-id-' + side + '-video');\n                    video.srcObject = stream;\n                    document.getElementById('wma-id-' + side + '-camera').style.display = 'block';\n                })\n                .catch(function(err) {\n                    console.error('Camera error:', err);\n                    alert('Camera access denied. Please allow camera access or upload a file instead.');\n                    document.getElementById('wma-id-' + side + '-start').style.display = 'block';\n                });\n            } else {\n                alert('Camera not supported on this device. Please use the upload option.');\n                document.getElementById('wma-id-' + side + '-start').style.display = 'block';\n            }\n        }\n        \n        function stopIdCamera(side) {\n            if (idStreams[side]) {\n                idStreams[side].getTracks().forEach(function(track) {\n                    track.stop();\n                });\n                idStreams[side] = null;\n            }\n        }\n        \n        function captureIdPhoto(side) {\n            var video = document.getElementById('wma-id-' + side + '-video');\n            var canvas = document.getElementById('wma-id-' + side + '-canvas');\n            \n            if (!video.srcObject) return;\n            \n            canvas.width = video.videoWidth;\n            canvas.height = video.videoHeight;\n            \n            var ctx = canvas.getContext('2d');\n            ctx.drawImage(video, 0, 0);\n            \n            canvas.toBlob(function(blob) {\n                uploadIdPhoto(blob, side);\n            }, 'image\/jpeg', 0.85);\n        }\n        \n        function uploadIdFile(side) {\n            var fileInput = document.createElement('input');\n            fileInput.type = 'file';\n            fileInput.accept = 'image\/*';\n            fileInput.style.display = 'none';\n            \n            fileInput.addEventListener('change', function(e) {\n                if (e.target.files && e.target.files[0]) {\n                    var file = e.target.files[0];\n                    \n                    if (!file.type.startsWith('image\/')) {\n                        alert('Please select an image file');\n                        return;\n                    }\n                    \n                    if (file.size > 5 * 1024 * 1024) {\n                        alert('Image file size must be less than 5MB');\n                        return;\n                    }\n                    \n                    uploadIdPhoto(file, side);\n                }\n            });\n            \n            document.body.appendChild(fileInput);\n            fileInput.click();\n            document.body.removeChild(fileInput);\n        }\n        \n        function uploadIdPhoto(blob, side) {\n            var captureBtn = document.querySelector('.wma-btn-capture[data-side=\"' + side + '\"]');\n            if (captureBtn) {\n                captureBtn.disabled = true;\n                captureBtn.innerHTML = '<span class=\"wma-spinner\"><\/span> Processing...';\n            }\n            \n            var formData = new FormData();\n            formData.append('action', 'wma_upload_application_file');\n            formData.append('nonce', '0b5e90d418');\n            formData.append('file', blob, 'id_' + side + '_' + Date.now() + '.jpg');\n            \n            fetch('https:\/\/kwata.app\/errands\/wp-admin\/admin-ajax.php', {\n                method: 'POST',\n                body: formData\n            })\n            .then(function(response) { return response.json(); })\n            .then(function(data) {\n                if (data.success) {\n                    document.getElementById('app_id_document_' + side + '_url').value = data.data.url;\n                    document.getElementById('wma-id-' + side + '-preview').querySelector('img').src = data.data.url;\n                    \n                    stopIdCamera(side);\n                    document.getElementById('wma-id-' + side + '-camera').style.display = 'none';\n                    document.getElementById('wma-id-' + side + '-preview').style.display = 'block';\n                } else {\n                    alert(data.data.message || 'Failed to save photo');\n                    resetIdCaptureBtn(side);\n                }\n            })\n            .catch(function(error) {\n                console.error('Upload error:', error);\n                alert('Failed to save photo. Please try again.');\n                resetIdCaptureBtn(side);\n            });\n        }\n        \n        function resetIdCaptureBtn(side) {\n            var captureBtn = document.querySelector('.wma-btn-capture[data-side=\"' + side + '\"]');\n            if (captureBtn) {\n                captureBtn.disabled = false;\n                captureBtn.innerHTML = '<span class=\"wma-capture-icon\">\ud83d\udcf8<\/span> Capture ' + (side === 'front' ? 'Front' : 'Back');\n            }\n        }\n        \n        \/\/ Stop cameras when leaving page\n        window.addEventListener('beforeunload', function() {\n            stopIdCamera('front');\n            stopIdCamera('back');\n        });\n    }\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1129","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kwata.app\/errands\/wp-json\/wp\/v2\/pages\/1129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kwata.app\/errands\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kwata.app\/errands\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kwata.app\/errands\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kwata.app\/errands\/wp-json\/wp\/v2\/comments?post=1129"}],"version-history":[{"count":0,"href":"https:\/\/kwata.app\/errands\/wp-json\/wp\/v2\/pages\/1129\/revisions"}],"wp:attachment":[{"href":"https:\/\/kwata.app\/errands\/wp-json\/wp\/v2\/media?parent=1129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}