@idsoftsource/initial-process 2.5.1 → 2.5.2

package/fesm2022/idsoftsource-initial-process.mjs

@@ -35882,6 +35882,8 @@ class ClaimProcessComponent {
     // User detail state
     userHasExistingDetails = false;
     resetPasswordEnabled = false;
+    isAuthenticated = false;
+    existingUserData = null;
     // Role timing: save role name from API, apply once roles list is loaded
     pendingUserRole = null;
     rolesLoaded = false;
@@ -36019,18 +36021,24 @@ class ClaimProcessComponent {
             next: (data) => {
                 this.isLoadingUser = false;
                 if (!data?.auth0Id) {
-                    // No Auth0 account at all — hard block
+                    // No Auth0 account exists — hard block
                     this.accountNotFound = true;
                     return;
                 }
                 const d = data.userDetails;
+                // Authenticated + existing profile → show account-found preview, skip form
+                if (data.authenticated && d) {
+                    this.isAuthenticated = true;
+                    this.existingUserData = d;
+                    return;
+                }
                 if (!d) {
-                    // Auth0 account exists but no profile saved yet → password required
+                    // Auth0 exists but no saved profile yet → new user, password required
                     this.userHasExistingDetails = false;
                     this.updatePasswordValidators();
                     return;
                 }
-                // Existing profile found → pre-fill form, show reset-password toggle
+                // Has profile but NOT authenticated → claim/update flow, fill form
                 this.userHasExistingDetails = true;
                 this.updatePasswordValidators();
                 this.claimForm.patchValue({
@@ -36055,6 +36063,11 @@ class ClaimProcessComponent {
             },
         });
     }
+    getInitials() {
+        const f = this.existingUserData?.firstName?.[0] || '';
+        const l = this.existingUserData?.lastName?.[0] || '';
+        return (f + l).toUpperCase() || this.userEmail?.[0]?.toUpperCase() || '?';
+    }
     // ─── Roles ───────────────────────────────────────────────────────────────────
     getRoles() {
         const query = {
@@ -36244,11 +36257,11 @@ class ClaimProcessComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ClaimProcessComponent, deps: [{ token: i8.FormBuilder }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: UserDetailService }, { token: RolesService }, { token: i7.BsModalService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ClaimProcessComponent, isStandalone: false, selector: "app-claim-process", ngImport: i0, template: "<h2 class=\"sr-only\">Claim Your Account</h2>\r\n\r\n<!-- \u2500\u2500\u2500 No Email Error \u2500\u2500\u2500 -->\r\n<div *ngIf=\"noEmailError\" class=\"cp-invalid-page\">\r\n  <div class=\"cp-invalid-card\">\r\n    <div class=\"cp-invalid-icon\">\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\r\n    </div>\r\n    <h2>Invalid Access Link</h2>\r\n    <p>This page requires a valid invitation link. Please use the link from your invitation email to claim your account.</p>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Success State \u2500\u2500\u2500 -->\r\n<div *ngIf=\"submitSuccess\" class=\"cp-success-page\">\r\n  <div class=\"cp-success-card\">\r\n    <div class=\"cp-success-icon\">\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n    </div>\r\n    <h2>Account Claimed!</h2>\r\n    <p>Your account has been successfully activated. You can now sign in and start using the platform.</p>\r\n    <a [href]=\"libConfig?.dashboardUrl || '#'\" class=\"cp-btn\">Go to Dashboard</a>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Main Layout \u2500\u2500\u2500 -->\r\n<div *ngIf=\"!noEmailError && !submitSuccess\" class=\"cp-page\">\r\n\r\n  <!-- Left Panel -->\r\n  <aside class=\"cp-left\">\r\n    <div class=\"cp-left-inner\">\r\n\r\n      <div class=\"cp-logo\">\r\n        <svg version=\"1.2\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 248 48\" width=\"180\" height=\"35\" role=\"img\" aria-label=\"BOOTOG\">\r\n          <style>.s0 { fill: #ffffff }</style>\r\n          <g id=\"bootog-logo\">\r\n            <path class=\"s0\" d=\"m190.36 18.85q-0.1-0.39-0.21-0.78-0.13-0.39-0.26-0.78-0.13-0.38-0.26-0.76-0.15-0.38-0.31-0.75-0.36 0.47-0.75 0.91-0.38 0.43-0.8 0.85-0.41 0.4-0.86 0.78-0.45 0.39-0.92 0.73 0.12 0.39 0.21 0.76 0.09 0.38 0.17 0.76 0.08 0.38 0.14 0.76 0.05 0.39 0.09 0.78 0.51-0.37 0.99-0.76 0.49-0.39 0.96-0.8 0.48-0.41 0.93-0.83 0.46-0.42 0.9-0.87z\"/>\r\n            <path class=\"s0\" d=\"m159.72 31.28q-0.56 0.13-1.11 0.22-0.56 0.1-1.12 0.15-0.56 0.06-1.13 0.08-0.57 0.02-1.14 0.01 0.16 0.35 0.33 0.71 0.17 0.35 0.36 0.7 0.17 0.34 0.38 0.68 0.19 0.33 0.4 0.66 0.59-0.04 1.19-0.11 0.58-0.07 1.17-0.16 0.59-0.09 1.16-0.21 0.58-0.12 1.16-0.26-0.23-0.29-0.46-0.59-0.22-0.3-0.43-0.61-0.2-0.3-0.39-0.62-0.2-0.32-0.37-0.65z\"/>\r\n            <path class=\"s0\" d=\"m174.36 26.13q2.02 0.85 3.93 1.56 0.04 0.02 0.09 0.02 0.04 0.01 0.08 0.01 0.05 0 0.09-0.01 0.04 0 0.08-0.02c9.63-5.11 16.02-11.03 14.65-13.9-0.57-1.21-2.42-1.73-5.14-1.62q-0.05 0-0.09 0.03-0.04 0.04-0.04 0.1 0 0.06 0.04 0.1 0.04 0.04 0.09 0.04 0.21 0.01 0.42 0.08 0.2 0.06 0.38 0.18 0.18 0.11 0.33 0.26 0.15 0.15 0.25 0.34c1.05 2.24-5.67 7.56-15.16 12.15q-0.05 0.03-0.08 0.06-0.04 0.04-0.07 0.08-0.03 0.05-0.05 0.1 0 0.05 0 0.1 0 0.05 0.01 0.1 0.02 0.05 0.05 0.1 0.03 0.04 0.06 0.08 0.04 0.03 0.08 0.06z\"/>\r\n            <path class=\"s0\" d=\"m168.92 30.58c-1.02-0.47-2.04-0.93-3.03-1.46q-0.04-0.02-0.08-0.04-0.03 0-0.07 0-0.04 0-0.07 0-0.04 0.02-0.08 0.04c-6.62 2.3-11.72 2.88-12.49 1.15q-0.07-0.21-0.1-0.42-0.02-0.21 0.01-0.42 0.03-0.21 0.12-0.4 0.08-0.21 0.22-0.37 0.03-0.05 0.02-0.11-0.01-0.06-0.07-0.09-0.05-0.03-0.1-0.02-0.07 0.01-0.1 0.06c-1.83 1.99-2.62 3.75-2.06 4.97 1.27 2.76 9.18 1.92 18.75-1.77q0.08-0.02 0.13-0.08 0.05-0.05 0.09-0.12 0.03-0.06 0.02-0.15 0-0.07-0.02-0.14-0.02-0.03-0.05-0.07-0.01-0.03-0.04-0.05-0.03-0.03-0.05-0.05-0.03-0.02-0.08-0.03-0.1-0.06-0.21-0.12-0.11-0.05-0.22-0.11-0.11-0.06-0.22-0.11-0.11-0.05-0.22-0.09 0 0 0 0z\"/>\r\n            <path class=\"s0\" d=\"m157.96 22.26q0.03-0.38 0.09-0.77 0.04-0.4 0.12-0.78 0.07-0.39 0.16-0.78 0.09-0.38 0.19-0.76-0.46-0.34-0.9-0.71-0.43-0.36-0.85-0.76-0.42-0.39-0.81-0.81-0.4-0.42-0.76-0.86-0.15 0.37-0.3 0.75-0.15 0.38-0.28 0.77-0.13 0.39-0.24 0.77-0.12 0.39-0.22 0.78 0.45 0.43 0.9 0.84 0.46 0.41 0.93 0.8 0.47 0.4 0.96 0.77 0.49 0.37 0.98 0.73h0.01z\"/>\r\n            <path class=\"s0\" d=\"m158.86 18.13q0.73-2.08 2.05-3.84 1.32-1.76 3.12-3.04 1.8-1.26 3.91-1.93c1.38-0.43 2.84-0.64 4.3-0.64q2.18 0 4.28 0.64 2.09 0.66 3.88 1.91 1.79 1.25 3.13 2.98 1.34 1.73 2.09 3.78 0.46-0.34 0.89-0.72 0.44-0.37 0.84-0.79 0.4-0.42 0.76-0.86 0.37-0.45 0.7-0.92-1.17-2.26-2.91-4.12-1.75-1.85-3.93-3.15-2.18-1.31-4.64-1.96-2.46-0.65-5-0.61-2.58-0.03-5.08 0.65-2.49 0.68-4.7 2.01-2.21 1.34-3.96 3.24-1.75 1.9-2.91 4.21 0.34 0.45 0.7 0.87 0.38 0.42 0.77 0.82 0.41 0.4 0.83 0.77 0.43 0.37 0.88 0.7z\"/>\r\n            <g>\r\n              <path class=\"s0\" d=\"m4 6.27h13.44c3.67 0 6.76 0.59 9.2 2.21q0.92 0.59 1.66 1.39 0.75 0.8 1.26 1.76 0.51 0.96 0.76 2.02 0.25 1.07 0.23 2.15 0.04 1.13-0.26 2.21-0.3 1.08-0.92 2.02-0.62 0.94-1.48 1.64-0.88 0.71-1.93 1.11v0.09q1.3 0.37 2.4 1.13 1.12 0.77 1.91 1.86 0.79 1.09 1.18 2.38 0.39 1.29 0.34 2.64 0.03 1.12-0.21 2.23-0.26 1.1-0.77 2.11-0.51 1.01-1.25 1.86-0.75 0.85-1.67 1.5c-2.47 1.73-5.83 2.55-9.74 2.55h-14.15zm13.1 13.96c2.42 0 3.76-1.11 3.76-3.13q0.01-0.34-0.04-0.65-0.07-0.33-0.21-0.63-0.13-0.29-0.35-0.54-0.21-0.25-0.47-0.45-0.37-0.21-0.77-0.37-0.39-0.16-0.81-0.26-0.41-0.1-0.84-0.13-0.43-0.04-0.85-0.01h-2.69v6.17zm3.79 12.3q0.28-0.22 0.49-0.49 0.22-0.28 0.36-0.59 0.14-0.32 0.21-0.66 0.07-0.34 0.05-0.68c0-2.12-1.44-3.32-3.99-3.32h-4.21v6.55h3.48c1.78 0 2.85-0.25 3.61-0.81z\"/>\r\n              <path class=\"s0\" d=\"m34.19 23.72c0-10.17 7.99-18 18.64-18 10.63 0 18.64 7.8 18.64 17.97 0 10.17-7.96 17.96-18.64 17.96-10.69 0-18.64-7.79-18.64-17.96zm27.36 0c0-5.2-3.53-9.19-8.72-9.19-5.2 0-8.73 3.99-8.73 9.19 0 5.2 3.53 9.2 8.73 9.2 5.19 0 8.72-4 8.72-9.2z\"/>\r\n              <path class=\"s0\" d=\"m74.58 23.72c0-10.18 8-17.97 18.64-17.97 10.65 0 18.65 7.79 18.65 17.97 0 10.16-7.95 17.96-18.65 17.96-10.68 0-18.64-7.8-18.64-17.96zm27.37 0c0-5.2-3.53-9.21-8.72-9.21-5.2 0-8.72 4.01-8.72 9.21 0 5.19 3.52 9.19 8.71 9.19 5.2 0 8.73-4 8.73-9.19z\"/>\r\n              <path class=\"s0\" d=\"m123.84 14.65h-11.09v-8.38h32.08v8.38h-11.07v26.51h-9.92z\"/>\r\n            </g>\r\n            <path class=\"s0\" d=\"m212.95 22.04h14.51v17.02q-1.4 0.65-2.85 1.14-1.46 0.49-2.96 0.83-1.51 0.34-3.04 0.5-1.54 0.17-3.08 0.17c-11.88 0-19.68-7.52-19.68-17.68 0-10.14 8.14-18.04 19.5-18.04q1.42-0.01 2.84 0.15 1.41 0.16 2.8 0.49 1.39 0.32 2.72 0.81 1.34 0.48 2.61 1.12v9.4q-1.17-0.74-2.44-1.32-1.27-0.58-2.61-1-1.33-0.41-2.71-0.65-1.37-0.23-2.76-0.28c-6.28 0-10.05 4.02-10.05 9.28 0 5.27 3.68 9.34 9.87 9.34q0.32 0 0.63-0.01 0.33-0.02 0.64-0.06 0.32-0.03 0.64-0.1 0.31-0.05 0.62-0.13v-3.64h-5.17v-7.32z\"/>\r\n          </g>\r\n        </svg>\r\n      </div>\r\n\r\n      <div class=\"cp-left-hero\">\r\n        <div class=\"cp-left-badge\">For Insurance Agencies &amp; Agents</div>\r\n        <h1>Claim Your InspectorMatch Account</h1>\r\n        <p>Your agency account is ready and waiting. Complete the form to activate your access to inspection services, field support, and training resources.</p>\r\n      </div>\r\n\r\n      <ul class=\"cp-benefits\">\r\n        <li>\r\n          <span class=\"cp-benefit-icon\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z\"/></svg>\r\n          </span>\r\n          <span>Instant access to the inspection services marketplace</span>\r\n        </li>\r\n        <li>\r\n          <span class=\"cp-benefit-icon\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\"/></svg>\r\n          </span>\r\n          <span>Connect with certified field professionals nationwide</span>\r\n        </li>\r\n        <li>\r\n          <span class=\"cp-benefit-icon\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z\"/></svg>\r\n          </span>\r\n          <span>Manage your team and track performance from one dashboard</span>\r\n        </li>\r\n        <li>\r\n          <span class=\"cp-benefit-icon\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"/></svg>\r\n          </span>\r\n          <span>Backed by BOOTOG Technologies with 24/7 support</span>\r\n        </li>\r\n      </ul>\r\n\r\n      <p class=\"cp-left-footnote\">Already have access? <a href=\"#\">Sign in to InspectorMatch</a></p>\r\n    </div>\r\n  </aside>\r\n\r\n  <!-- Right Panel \u2014 Form -->\r\n  <main class=\"cp-right\">\r\n    <div class=\"cp-form-wrap\">\r\n\r\n      <div class=\"cp-form-header\">\r\n        <h2>Complete Your Profile</h2>\r\n        <p>Your account details have been loaded. Set your password and role to activate.</p>\r\n        <!-- Email display (read-only) -->\r\n        <div class=\"cp-email-display\" *ngIf=\"userEmail\">\r\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\"/></svg>\r\n          <span>{{ userEmail }}</span>\r\n        </div>\r\n        <div class=\"cp-loading-hint\" *ngIf=\"isLoadingUser\">\r\n          <span class=\"cp-spinner\"></span> Loading account details\u2026\r\n        </div>\r\n        <div class=\"cp-error\" *ngIf=\"userLookupError\">{{ userLookupError }}</div>\r\n\r\n        <!-- Account not found in Auth0 -->\r\n        <div class=\"cp-account-not-found\" *ngIf=\"accountNotFound\">\r\n          <div class=\"cp-anf-icon\">\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\r\n          </div>\r\n          <div>\r\n            <p class=\"cp-anf-title\">Account Not Found</p>\r\n            <p class=\"cp-anf-sub\">No account is linked to <strong>{{ userEmail }}</strong>. Please contact support or use the link from your invitation email.</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <form [formGroup]=\"claimForm\" (ngSubmit)=\"onSubmit()\" novalidate *ngIf=\"!accountNotFound\">\r\n\r\n        <!-- \u2500\u2500\u2500 Contact Information \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\"/></svg>\r\n          Contact Information\r\n        </div>\r\n\r\n        <div class=\"cp-row\">\r\n          <div class=\"cp-field\">\r\n            <label for=\"firstName\">First Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" id=\"firstName\" formControlName=\"firstName\"\r\n              placeholder=\"Jane\"\r\n              [class.is-invalid]=\"f['firstName'].invalid && f['firstName'].touched\"\r\n              autocomplete=\"given-name\" />\r\n            <div class=\"cp-error\" *ngIf=\"f['firstName'].invalid && f['firstName'].touched\">First name is required</div>\r\n          </div>\r\n          <div class=\"cp-field\">\r\n            <label for=\"lastName\">Last Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" id=\"lastName\" formControlName=\"lastName\"\r\n              placeholder=\"Doe\"\r\n              [class.is-invalid]=\"f['lastName'].invalid && f['lastName'].touched\"\r\n              autocomplete=\"family-name\" />\r\n            <div class=\"cp-error\" *ngIf=\"f['lastName'].invalid && f['lastName'].touched\">Last name is required</div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"cp-field\">\r\n          <label for=\"phone\">Phone<span class=\"req\">*</span></label>\r\n          <input type=\"tel\" id=\"phone\" formControlName=\"phone\"\r\n            placeholder=\"(555) 123-4567\" maxlength=\"14\"\r\n            [class.is-invalid]=\"f['phone'].invalid && f['phone'].touched\"\r\n            (input)=\"formatPhone($event)\" autocomplete=\"tel\" />\r\n          <div class=\"cp-error\" *ngIf=\"f['phone'].invalid && f['phone'].touched\">Phone number is required</div>\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Address \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 14.5 9 2.5 2.5 0 0 1 12 11.5Z\"/></svg>\r\n          Address\r\n        </div>\r\n\r\n        <div class=\"cp-field\">\r\n          <label for=\"address\">Street Address</label>\r\n          <input type=\"text\" id=\"address\" formControlName=\"address\"\r\n            placeholder=\"123 Main Street\"\r\n            ngx-google-places-autocomplete [options]=\"googleOptions\"\r\n            (onAddressChange)=\"onAddressChange($event)\"\r\n            autocomplete=\"off\" />\r\n        </div>\r\n\r\n        <div class=\"cp-row cp-row-triple\">\r\n          <div class=\"cp-field\">\r\n            <label for=\"city\">City</label>\r\n            <input type=\"text\" id=\"city\" formControlName=\"city\" placeholder=\"Orlando\" />\r\n          </div>\r\n          <div class=\"cp-field\">\r\n            <label for=\"state\">State</label>\r\n            <input type=\"text\" id=\"state\" formControlName=\"state\" placeholder=\"FL\" maxlength=\"2\" />\r\n          </div>\r\n          <div class=\"cp-field\">\r\n            <label for=\"zip\">Zip Code</label>\r\n            <input type=\"text\" id=\"zip\" formControlName=\"zip\" placeholder=\"32801\" inputmode=\"numeric\" maxlength=\"5\" />\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Account Setup \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\"/></svg>\r\n          Account Setup\r\n        </div>\r\n\r\n        <!-- Role -->\r\n        <div class=\"cp-field\">\r\n          <label for=\"role\">Role<span class=\"req\">*</span></label>\r\n          <div class=\"cp-select\">\r\n            <select id=\"role\" formControlName=\"role\"\r\n              [class.is-invalid]=\"f['role'].invalid && f['role'].touched\">\r\n              <option value=\"\" disabled>Select your role</option>\r\n              <option *ngFor=\"let r of roles\" [value]=\"r.id\">{{ r.name }}</option>\r\n            </select>\r\n          </div>\r\n          <div class=\"cp-error\" *ngIf=\"f['role'].invalid && f['role'].touched\">Please select a role</div>\r\n        </div>\r\n\r\n        <!-- Reset password toggle (existing users only) -->\r\n        <div class=\"cp-reset-toggle\" *ngIf=\"userHasExistingDetails\">\r\n          <label class=\"cp-toggle-label\">\r\n            <span class=\"cp-toggle-switch\">\r\n              <input type=\"checkbox\" [checked]=\"resetPasswordEnabled\" (change)=\"toggleResetPassword()\">\r\n              <span class=\"cp-toggle-knob\"></span>\r\n            </span>\r\n            Reset Password\r\n          </label>\r\n          <p class=\"cp-toggle-hint\">Your account already has a password set. Enable this to change it.</p>\r\n        </div>\r\n\r\n        <!-- Password -->\r\n        <div class=\"cp-row\" *ngIf=\"showPasswordFields\">\r\n          <div class=\"cp-field\">\r\n            <label for=\"password\">Password<span class=\"req\">*</span></label>\r\n            <div class=\"cp-pw-wrap\">\r\n              <input [type]=\"showPassword ? 'text' : 'password'\" id=\"password\" formControlName=\"password\"\r\n                placeholder=\"Min. 8 characters\"\r\n                [class.is-invalid]=\"f['password'].invalid && f['password'].touched\"\r\n                autocomplete=\"new-password\" />\r\n              <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showPassword = !showPassword\"\r\n                [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\">\r\n                <svg *ngIf=\"!showPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>\r\n                <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"/></svg>\r\n              </button>\r\n            </div>\r\n            <div class=\"cp-error\" *ngIf=\"f['password'].invalid && f['password'].touched\">\r\n              <span *ngIf=\"f['password'].errors?.['required']\">Password is required</span>\r\n              <span *ngIf=\"f['password'].errors?.['minlength']\">Password must be at least 8 characters</span>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"cp-field\">\r\n            <label for=\"confirmPassword\">Confirm Password<span class=\"req\">*</span></label>\r\n            <div class=\"cp-pw-wrap\">\r\n              <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPassword\" formControlName=\"confirmPassword\"\r\n                placeholder=\"Repeat password\"\r\n                [class.is-invalid]=\"(f['confirmPassword'].invalid && f['confirmPassword'].touched) || (claimForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched)\"\r\n                autocomplete=\"new-password\" />\r\n              <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showConfirmPassword = !showConfirmPassword\"\r\n                [attr.aria-label]=\"showConfirmPassword ? 'Hide password' : 'Show password'\">\r\n                <svg *ngIf=\"!showConfirmPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>\r\n                <svg *ngIf=\"showConfirmPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"/></svg>\r\n              </button>\r\n            </div>\r\n            <div class=\"cp-error\" *ngIf=\"f['confirmPassword'].invalid && f['confirmPassword'].touched\">Confirm password is required</div>\r\n            <div class=\"cp-error\" *ngIf=\"claimForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched\">Passwords do not match</div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Business Information \u2500\u2500\u2500 -->\r\n        <ng-container *ngIf=\"isBusinessRole\">\r\n          <div class=\"cp-section-title\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z\"/></svg>\r\n            Business Information\r\n          </div>\r\n\r\n          <div class=\"cp-row\">\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessName\">Business Name<span class=\"req\">*</span></label>\r\n              <input type=\"text\" id=\"businessName\" formControlName=\"businessName\"\r\n                placeholder=\"Business Name\"\r\n                [class.is-invalid]=\"f['businessName'].invalid && f['businessName'].touched\" />\r\n              <div class=\"cp-error\" *ngIf=\"f['businessName'].invalid && f['businessName'].touched\">Business name is required</div>\r\n            </div>\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessEmail\">Business Email<span class=\"req\">*</span></label>\r\n              <input type=\"email\" id=\"businessEmail\" formControlName=\"businessEmail\"\r\n                placeholder=\"business@example.com\"\r\n                [class.is-invalid]=\"f['businessEmail'].invalid && f['businessEmail'].touched\" />\r\n              <div class=\"cp-error\" *ngIf=\"f['businessEmail'].invalid && f['businessEmail'].touched\">\r\n                <span *ngIf=\"f['businessEmail'].errors?.['required']\">Business email is required</span>\r\n                <span *ngIf=\"f['businessEmail'].errors?.['email']\">Enter a valid email</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"cp-field\">\r\n            <label for=\"businessAddress\">Business Address</label>\r\n            <input type=\"text\" id=\"businessAddress\" formControlName=\"businessAddress\"\r\n              placeholder=\"123 Business Street\"\r\n              ngx-google-places-autocomplete [options]=\"googleOptions\"\r\n              (onAddressChange)=\"onBusinessAddressChange($event)\"\r\n              autocomplete=\"off\" />\r\n          </div>\r\n\r\n          <div class=\"cp-row cp-row-triple\">\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessCity\">City</label>\r\n              <input type=\"text\" id=\"businessCity\" formControlName=\"businessCity\" placeholder=\"City\" />\r\n            </div>\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessState\">State</label>\r\n              <input type=\"text\" id=\"businessState\" formControlName=\"businessState\" placeholder=\"ST\" maxlength=\"2\" />\r\n            </div>\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessZip\">Zip</label>\r\n              <input type=\"text\" id=\"businessZip\" formControlName=\"businessZip\" placeholder=\"00000\" inputmode=\"numeric\" maxlength=\"5\" />\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Business Logo -->\r\n          <div class=\"cp-field\">\r\n            <label>Business Logo</label>\r\n            <div class=\"cp-upload-wrap\">\r\n              <input #cpLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\"\r\n                (change)=\"onBusinessLogoChange($event)\" class=\"cp-upload-hidden\" />\r\n              <input type=\"text\" class=\"cp-upload-text\" [value]=\"businessLogoName\" readonly\r\n                placeholder=\"Click to upload business logo\" (click)=\"cpLogoInput.click()\" />\r\n              <button type=\"button\" class=\"cp-upload-btn\" (click)=\"cpLogoInput.click()\" aria-label=\"Upload logo\">\r\n                <svg viewBox=\"0 0 24 24\"><path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\"/></svg>\r\n              </button>\r\n            </div>\r\n            <small class=\"cp-upload-hint\">Allowed formats: PNG, JPG, JPEG</small>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <!-- \u2500\u2500\u2500 Profile Picture \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\"/></svg>\r\n          Profile Picture\r\n        </div>\r\n        <div class=\"cp-field\">\r\n          <label>Profile Picture<span class=\"req\">*</span></label>\r\n          <div class=\"cp-upload-wrap\">\r\n            <input #cpProfileInput type=\"file\" accept=\".png,.jpg,.jpeg\"\r\n              (change)=\"onProfileFileChange($event)\" class=\"cp-upload-hidden\" />\r\n            <input type=\"text\" class=\"cp-upload-text\" [value]=\"profileFileName\" readonly\r\n              placeholder=\"Click to upload profile picture\" (click)=\"cpProfileInput.click()\" />\r\n            <button type=\"button\" class=\"cp-upload-btn\" (click)=\"cpProfileInput.click()\" aria-label=\"Upload profile picture\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\"/></svg>\r\n            </button>\r\n          </div>\r\n          <small class=\"cp-upload-hint\">Allowed formats: PNG, JPG, JPEG</small>\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Terms & Privacy \u2500\u2500\u2500 -->\r\n        <div class=\"cp-terms\">\r\n          <input type=\"checkbox\" id=\"agree\"\r\n            [checked]=\"model.acceptTerms && model.privacy\"\r\n            (change)=\"onTermsCheckboxChange($event)\" />\r\n          <label for=\"agree\">I accept the\r\n            <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Terms and Conditions', $event)\">Terms &amp; Conditions</a>\r\n            and\r\n            <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Privacy Statement', $event)\">Privacy Policy</a>,\r\n            and confirm I am authorized to activate this account.\r\n          </label>\r\n        </div>\r\n        <div class=\"cp-error cp-terms-error\"\r\n          *ngIf=\"(!model.acceptTerms || !model.privacy) && validatePage === 1\">\r\n          You must agree to both Terms and Conditions and Privacy Statement to continue\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Submit \u2500\u2500\u2500 -->\r\n        <div class=\"cp-error cp-submit-error\" *ngIf=\"submitError\">{{ submitError }}</div>\r\n\r\n        <button type=\"submit\" class=\"cp-btn\" [disabled]=\"isSubmitting\">\r\n          <span *ngIf=\"isSubmitting\" class=\"cp-spinner cp-spinner-btn\"></span>\r\n          <span>{{ isSubmitting ? 'Activating\u2026' : 'Claim My Account' }}</span>\r\n        </button>\r\n\r\n      </form>\r\n    </div>\r\n  </main>\r\n\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Terms & Privacy Modal (read-only) \u2500\u2500\u2500 -->\r\n<ng-template #termsAndConditionsModel>\r\n  <div class=\"modal-dialog modal-dialog-centered tc-modal-dialog\">\r\n    <div class=\"modal-content tc-modal\">\r\n\r\n      <div class=\"tc-modal-header\">\r\n        <div class=\"tc-header-icon\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"/>\r\n            <polyline points=\"14 2 14 8 20 8\"/>\r\n            <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/>\r\n            <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/>\r\n          </svg>\r\n        </div>\r\n        <h4 class=\"tc-modal-title\">{{ termsAndConditionTitle }}</h4>\r\n        <button type=\"button\" class=\"tc-modal-close\" (click)=\"closeModal()\" aria-label=\"Close\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\r\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"tc-modal-body\">\r\n        <ng-container *ngIf=\"termsAndConditionTitle === 'Terms and Conditions'\">\r\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-terms-conditions>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"termsAndConditionTitle !== 'Terms and Conditions'\">\r\n          <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-privacy-policy>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"tc-modal-footer\">\r\n        <button type=\"button\" class=\"tc-btn tc-btn-close\" (click)=\"closeModal()\">\r\n          Close\r\n        </button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.cp-page{display:flex;min-height:100vh;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0c1620}.cp-left{width:42%;min-width:320px;background:#0c1620;display:flex;flex-direction:column;padding:48px 44px;position:sticky;top:0;height:100vh;overflow-y:auto}@media (max-width: 860px){.cp-left{display:none}}.cp-left-inner{display:flex;flex-direction:column;height:100%}.cp-logo{margin-bottom:40px}.cp-logo svg path{fill:#fff}.cp-left-hero{margin-bottom:36px}.cp-left-hero h1{font-size:26px;font-weight:800;color:#fff;line-height:1.25;margin-bottom:12px}.cp-left-hero p{font-size:14px;color:#9fb3c2;line-height:1.7}.cp-left-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#4077ad;margin-bottom:14px}.cp-benefits{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;gap:18px}.cp-benefits li{display:flex;align-items:flex-start;gap:12px;font-size:13px;color:#9fb3c2;line-height:1.55}.cp-benefit-icon{flex-shrink:0;width:32px;height:32px;background:#4077ad26;border-radius:50%;display:flex;align-items:center;justify-content:center}.cp-benefit-icon svg{width:16px;height:16px}.cp-benefit-icon svg path{fill:#4077ad}.cp-left-footnote{margin-top:32px;font-size:13px;color:#5e7385}.cp-left-footnote a{color:#9fb3c2;text-decoration:none}.cp-left-footnote a:hover{color:#4077ad}.cp-right{flex:1;background:#eef1f4;display:flex;align-items:flex-start;justify-content:center;padding:48px 24px 64px;overflow-y:auto}.cp-form-wrap{width:100%;max-width:560px;background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201f;padding:40px 44px 48px}@media (max-width: 600px){.cp-form-wrap{padding:28px 20px 36px}}.cp-form-header{margin-bottom:30px}.cp-form-header h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:6px}.cp-form-header p{font-size:13px;color:#6b7c8a;line-height:1.6}.cp-section-title{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#0c1620;padding-bottom:10px;margin-bottom:18px;margin-top:26px;border-bottom:2px solid #4077AD;display:flex;align-items:center;gap:8px}.cp-section-title svg{width:14px;height:14px;flex-shrink:0}.cp-section-title svg path{fill:#4077ad}.cp-section-title:first-of-type{margin-top:0}.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.cp-row.cp-row-triple{grid-template-columns:2fr 1fr 1fr}@media (max-width: 520px){.cp-row,.cp-row.cp-row-triple{grid-template-columns:1fr}}.cp-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width:0}.cp-field.cp-field-with-btn{margin-bottom:0}.cp-field label{font-size:11.5px;font-weight:600;color:#3a4a57}.cp-field label .req{color:#4077ad;margin-left:2px}.cp-field input,.cp-field select{box-sizing:border-box;height:42px;border:1.5px solid #d3dce3;border-radius:6px;padding:0 12px;font-size:13.5px;color:#0c1620;background:#fff;width:100%;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;font-family:inherit}.cp-field input::placeholder,.cp-field select::placeholder{color:#aab8c2}.cp-field input:focus,.cp-field select:focus{outline:none;border-color:#4077ad;box-shadow:0 0 0 3px #4077ad26}.cp-field input.is-invalid,.cp-field select.is-invalid{border-color:#dc3545}.cp-field input.is-invalid:focus,.cp-field select.is-invalid:focus{box-shadow:0 0 0 3px #dc354526}.cp-input-row{display:flex;gap:8px}.cp-input-row input{flex:1}.cp-lookup-btn{flex-shrink:0;height:42px;padding:0 18px;background:#4077ad;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s;font-family:inherit}.cp-lookup-btn:hover:not(:disabled){background:#335f8a}.cp-lookup-btn:disabled{opacity:.6;cursor:not-allowed}.cp-select{position:relative}.cp-select:after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #6b7c8a;pointer-events:none}.cp-select select{cursor:pointer;padding-right:32px}.cp-pw-wrap{position:relative}.cp-pw-wrap input{padding-right:42px}.cp-pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;color:#6b7c8a}.cp-pw-toggle svg{width:18px;height:18px}.cp-pw-toggle svg path{fill:#6b7c8a}.cp-pw-toggle:hover svg path{fill:#4077ad}.cp-agreements{display:flex;flex-direction:column;gap:10px;margin:24px 0 4px}.v1-agreement-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;border:1.5px solid #d3dce3;background:#fff;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #0000000a}.v1-agreement-card:hover{border-color:#bac8d3;box-shadow:0 2px 8px #00000012}.v1-agreement-card.v1-card--agreed{border-color:#b8d4ef;background:#ebf3fb}.v1-agreement-card.v1-card--invalid{border-color:#fecaca;background:#fff5f5}.v1-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#eef1f4;border:1px solid #d3dce3;display:flex;align-items:center;justify-content:center;color:#4077ad}.v1-card--agreed .v1-card-icon{background:#d4e8f8;border-color:#b8d4ef}.v1-card-body{flex:1 1 auto;min-width:0}.v1-card-title{font-size:13px;font-weight:600;color:#0c1620;margin:0 0 2px;line-height:1.3}.v1-card-sub{font-size:11.5px;color:#6b7c8a;margin:0}.v1-agree-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:8px;font-size:12px;font-weight:600;font-family:inherit;border:1.5px solid #4077AD;color:#4077ad;background:transparent;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}.v1-agree-btn:hover{background:#4077ad;color:#fff}.v1-agree-btn.v1-agree-btn--done{background:#4077ad;border-color:#4077ad;color:#fff}.cp-email-display{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 12px;background:#eef1f4;border:1.5px solid #d3dce3;border-radius:99px;font-size:12.5px;color:#0c1620;font-weight:500}.cp-email-display svg{width:14px;height:14px;flex-shrink:0}.cp-email-display svg path{fill:#4077ad}.cp-account-not-found{display:flex;align-items:flex-start;gap:12px;margin-top:16px;padding:14px 16px;background:#fff5f5;border:1.5px solid #fecaca;border-radius:6px}.cp-anf-icon{flex-shrink:0;width:32px;height:32px;background:#dc35451a;border-radius:50%;display:flex;align-items:center;justify-content:center}.cp-anf-icon svg{width:16px;height:16px}.cp-anf-icon svg path{fill:#dc3545}.cp-anf-title{font-size:13px;font-weight:700;color:#b91c1c;margin:0 0 3px}.cp-anf-sub{font-size:12px;color:#dc3545;margin:0;line-height:1.5}.cp-anf-sub strong{font-weight:600}.cp-invalid-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#eef1f4;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;padding:24px}.cp-invalid-card{background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-invalid-card h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-invalid-card p{font-size:14px;color:#6b7c8a;line-height:1.7}.cp-invalid-icon{width:64px;height:64px;background:#dc35451a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-invalid-icon svg{width:32px;height:32px}.cp-invalid-icon svg path{fill:#dc3545}.tc-modal-dialog{max-width:min(780px,96vw)}.tc-modal{border-radius:20px!important;border:none!important;overflow:hidden;box-shadow:0 32px 72px #00000038,0 6px 20px #0000001a!important;height:min(720px,90vh);display:flex;flex-direction:column}.tc-modal-header{display:flex;align-items:center;gap:13px;padding:20px 24px;background:#4077ad;border-bottom:none;flex-shrink:0}.tc-modal-header .tc-header-icon{width:38px;height:38px;background:#ffffff1f;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#93c5fd;flex-shrink:0}.tc-modal-header .tc-modal-title{font-size:16px;font-weight:700;color:#fff;margin:0;flex:1}.tc-modal-close{flex-shrink:0;background:#ffffff1f;border:none;border-radius:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#fffc;cursor:pointer;transition:background .15s,color .15s}.tc-modal-close:hover{background:#ffffff38;color:#fff}.tc-modal-body{flex:1 1 auto;overflow-y:auto;padding:26px 32px;background:#fff;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.tc-modal-body::-webkit-scrollbar{width:5px}.tc-modal-body::-webkit-scrollbar-track{background:transparent}.tc-modal-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}.tc-modal-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tc-modal-footer{display:flex;justify-content:flex-end;align-items:center;padding:14px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.tc-btn{font-size:13.5px;font-weight:600;font-family:inherit;padding:9px 24px;border-radius:10px;border:none;cursor:pointer;transition:background .15s ease}.tc-btn.tc-btn-close{background:#4077ad;color:#fff}.tc-btn.tc-btn-close:hover{background:#335f8a}.cp-error{font-size:11.5px;color:#dc3545;margin-top:2px}.cp-terms-error{margin-top:4px}.cp-submit-error{margin-bottom:12px;font-size:13px;text-align:center}.cp-loading-hint{display:flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;margin-top:4px}.cp-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;margin-top:22px;background:#4077ad;border:none;border-radius:6px;font-size:14px;font-weight:700;letter-spacing:.4px;color:#fff;cursor:pointer;text-decoration:none;transition:background .15s,transform .1s;font-family:inherit}.cp-btn:hover:not(:disabled){background:#335f8a}.cp-btn:active:not(:disabled){transform:scale(.99)}.cp-btn:disabled{opacity:.65;cursor:not-allowed}.cp-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:cp-spin .7s linear infinite}.cp-spinner:not(.cp-spinner-btn){border-color:#4077ad4d;border-top-color:#4077ad}@keyframes cp-spin{to{transform:rotate(360deg)}}.cp-success-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#eef1f4;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;padding:24px}.cp-success-card{background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-success-card h2{font-size:24px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-success-card p{font-size:14px;color:#6b7c8a;line-height:1.7;margin-bottom:28px}.cp-success-icon{width:64px;height:64px;background:#28a7451a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-success-icon svg{width:32px;height:32px}.cp-success-icon svg path{fill:#28a745}.cp-terms{display:flex;align-items:flex-start;gap:10px;margin:22px 0 4px}.cp-terms input[type=checkbox]{margin-top:2px;width:15px;height:15px;flex-shrink:0;accent-color:#4077AD;cursor:pointer}.cp-terms label{font-size:12.5px;color:#6b7c8a;line-height:1.6;cursor:pointer;margin:0}.cp-terms label a{color:#4077ad;text-decoration:underline;font-weight:600}.cp-terms label a:hover{color:#335f8a}.cp-reset-toggle{margin:6px 0 18px;padding:14px 16px;background:#f0f7ff;border:1.5px solid #b8d4ef;border-radius:6px}.cp-toggle-label{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#0c1620;cursor:pointer;margin:0}.cp-toggle-switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0}.cp-toggle-switch input{opacity:0;width:0;height:0;position:absolute}.cp-toggle-switch input:checked+.cp-toggle-knob{background:#4077ad}.cp-toggle-switch input:checked+.cp-toggle-knob:before{transform:translate(16px)}.cp-toggle-knob{position:absolute;inset:0;background:#d3dce3;border-radius:22px;transition:background .2s;cursor:pointer}.cp-toggle-knob:before{content:\"\";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px #0003}.cp-toggle-hint{font-size:11.5px;color:#6b7c8a;margin:6px 0 0}.cp-upload-wrap{display:flex;align-items:stretch}.cp-upload-wrap .cp-upload-hidden{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.cp-upload-wrap .cp-upload-text{flex:1;border-radius:6px 0 0 6px!important;cursor:pointer;min-width:0}.cp-upload-btn{flex-shrink:0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#eef1f4;border:1.5px solid #d3dce3;border-left:none;border-radius:0 6px 6px 0;cursor:pointer;transition:background .15s}.cp-upload-btn:hover{background:#dfe4ea}.cp-upload-btn svg{width:18px;height:18px}.cp-upload-btn svg path{fill:#4077ad}.cp-upload-hint{display:block;font-size:11px;color:#6b7c8a;margin-top:4px}\n"], dependencies: [{ kind: "directive", type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: TermsConditionsComponent, selector: "app-terms-conditions", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ClaimProcessComponent, isStandalone: false, selector: "app-claim-process", ngImport: i0, template: "<h2 class=\"sr-only\">Claim Your Account</h2>\r\n\r\n<!-- \u2500\u2500\u2500 No Email Error \u2500\u2500\u2500 -->\r\n<div *ngIf=\"noEmailError\" class=\"cp-invalid-page\">\r\n  <div class=\"cp-invalid-card\">\r\n    <div class=\"cp-invalid-icon\">\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\r\n    </div>\r\n    <h2>Invalid Access Link</h2>\r\n    <p>This page requires a valid invitation link. Please use the link from your invitation email to claim your account.</p>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Success State \u2500\u2500\u2500 -->\r\n<div *ngIf=\"submitSuccess\" class=\"cp-success-page\">\r\n  <div class=\"cp-success-card\">\r\n    <div class=\"cp-success-icon\">\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n    </div>\r\n    <h2>Account Claimed!</h2>\r\n    <p>Your account has been successfully activated. You can now sign in and start using the platform.</p>\r\n    <a [href]=\"libConfig?.dashboardUrl || '#'\" class=\"cp-btn\">Go to Dashboard</a>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Main Layout \u2500\u2500\u2500 -->\r\n<div *ngIf=\"!noEmailError && !submitSuccess\" class=\"cp-page\">\r\n\r\n  <!-- Left Panel -->\r\n  <aside class=\"cp-left\">\r\n    <div class=\"cp-left-inner\">\r\n\r\n      <!-- Dynamic logo from privacyAndTerms -->\r\n      <div class=\"cp-logo\">\r\n        <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\"\r\n          [alt]=\"privacyAndTerms?.companyName || 'Company Logo'\" class=\"cp-logo-img\" />\r\n        <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-logo-fallback\">\r\n          {{ privacyAndTerms?.companyName }}\r\n        </span>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Scenario: Account Found (authenticated) \u2500\u2500 -->\r\n      <ng-container *ngIf=\"isAuthenticated\">\r\n        <div class=\"cp-left-hero\">\r\n          <div class=\"cp-left-badge cp-left-badge--found\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n            Account Verified\r\n          </div>\r\n          <h1>Welcome back, <span class=\"cp-hero-brand\">{{ existingUserData?.firstName || privacyAndTerms?.companyName }}</span></h1>\r\n          <p>Your identity has been verified. Your profile and account history are intact \u2014 click to jump straight into your dashboard.</p>\r\n        </div>\r\n        <ul class=\"cp-benefits\">\r\n          <li>\r\n            <span class=\"cp-benefit-icon cp-benefit-icon--green\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Profile Preserved</strong>\r\n              <span>Your settings, history, and connections are all intact and ready to use.</span>\r\n            </div>\r\n          </li>\r\n          <li>\r\n            <span class=\"cp-benefit-icon cp-benefit-icon--green\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Verified &amp; Secure</strong>\r\n              <span>Your account was verified through a secure multi-step process.</span>\r\n            </div>\r\n          </li>\r\n          <li>\r\n            <span class=\"cp-benefit-icon cp-benefit-icon--green\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Instant Dashboard Access</strong>\r\n              <span>One click and you're back on the platform, exactly where you left off.</span>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n      </ng-container>\r\n\r\n      <!-- \u2500\u2500 Scenario: Activation (new user / claim flow) \u2500\u2500 -->\r\n      <ng-container *ngIf=\"!isAuthenticated\">\r\n        <div class=\"cp-left-hero\">\r\n          <div class=\"cp-left-badge\">Account Activation</div>\r\n          <h1>Welcome to <span class=\"cp-hero-brand\">{{ privacyAndTerms?.companyName }}</span></h1>\r\n          <p>Your account is ready. Complete this short form to set your credentials and gain full access to the platform's tools, programs, and services.</p>\r\n        </div>\r\n        <ul class=\"cp-benefits\">\r\n          <li>\r\n            <span class=\"cp-benefit-icon\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Secure &amp; Encrypted</strong>\r\n              <span>Your information is protected end-to-end and handled per our Privacy Policy.</span>\r\n            </div>\r\n          </li>\r\n          <li>\r\n            <span class=\"cp-benefit-icon\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Instant Access</strong>\r\n              <span>Once activated, get immediate access to programs, rosters, and service requests.</span>\r\n            </div>\r\n          </li>\r\n          <li>\r\n            <span class=\"cp-benefit-icon\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Team &amp; Client Network</strong>\r\n              <span>Connect with certified professionals nationwide and manage your team from one dashboard.</span>\r\n            </div>\r\n          </li>\r\n          <li>\r\n            <span class=\"cp-benefit-icon\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Complete Your Profile</strong>\r\n              <span>A complete profile unlocks all features and makes you visible to clients and partners.</span>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n      </ng-container>\r\n\r\n      <!-- Dynamic contact info -->\r\n      <div class=\"cp-left-contact\" *ngIf=\"privacyAndTerms?.contactEmail || privacyAndTerms?.phone\">\r\n        <a *ngIf=\"privacyAndTerms?.contactEmail\"\r\n          [href]=\"'mailto:' + privacyAndTerms.contactEmail\" class=\"cp-contact-link\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\"/></svg>\r\n          {{ privacyAndTerms?.contactEmail }}\r\n        </a>\r\n        <a *ngIf=\"privacyAndTerms?.phone\"\r\n          [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-contact-link\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\"/></svg>\r\n          {{ privacyAndTerms?.phone }}\r\n        </a>\r\n      </div>\r\n\r\n      <!-- Dynamic website link -->\r\n      <p class=\"cp-left-footnote\">\r\n        <a [href]=\"privacyAndTerms?.websiteurl || '#'\" target=\"_blank\" rel=\"noopener\">\r\n          Visit {{ privacyAndTerms?.companyName }}\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\"/></svg>\r\n        </a>\r\n      </p>\r\n\r\n    </div>\r\n  </aside>\r\n\r\n  <!-- Right Panel \u2014 Form -->\r\n  <main class=\"cp-right\">\r\n\r\n    <!-- Mobile-only top bar (hidden on desktop where left panel is visible) -->\r\n    <div class=\"cp-mobile-bar\">\r\n      <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\"\r\n        [alt]=\"privacyAndTerms?.companyName\" class=\"cp-mobile-logo\" />\r\n      <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-mobile-company\">\r\n        {{ privacyAndTerms?.companyName }}\r\n      </span>\r\n    </div>\r\n\r\n    <!-- \u2500\u2500 Account Found Preview (authenticated users) \u2500\u2500 -->\r\n    <div *ngIf=\"isAuthenticated\" class=\"cf-wrap\">\r\n      <div class=\"cf-badge\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n        Account Found\r\n      </div>\r\n      <h2 class=\"cf-heading\">Welcome back!</h2>\r\n      <p class=\"cf-sub\">We found your account. Here's a summary of your profile before you continue.</p>\r\n\r\n      <div class=\"cf-card\">\r\n        <div class=\"cf-avatar\">{{ getInitials() }}</div>\r\n        <div class=\"cf-info-grid\">\r\n          <div class=\"cf-info-row\">\r\n            <span class=\"cf-info-label\">Full Name</span>\r\n            <span class=\"cf-info-value\">{{ existingUserData?.firstName }} {{ existingUserData?.lastName }}</span>\r\n          </div>\r\n          <div class=\"cf-info-row\">\r\n            <span class=\"cf-info-label\">Email</span>\r\n            <span class=\"cf-info-value\">{{ userEmail }}</span>\r\n          </div>\r\n          <div class=\"cf-info-row\" *ngIf=\"existingUserData?.phone\">\r\n            <span class=\"cf-info-label\">Phone</span>\r\n            <span class=\"cf-info-value\">{{ existingUserData.phone }}</span>\r\n          </div>\r\n          <div class=\"cf-info-row\" *ngIf=\"existingUserData?.userRoles?.length\">\r\n            <span class=\"cf-info-label\">Role</span>\r\n            <span class=\"cf-info-value\">\r\n              <span class=\"cf-role-badge\">{{ existingUserData.userRoles[0]?.roleName }}</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"cf-info-row\" *ngIf=\"existingUserData?.city || existingUserData?.state\">\r\n            <span class=\"cf-info-label\">Location</span>\r\n            <span class=\"cf-info-value\">\r\n              {{ existingUserData?.city }}{{ existingUserData?.city && existingUserData?.state ? ', ' : '' }}{{ existingUserData?.state }}\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <a [href]=\"libConfig?.dashboardUrl || '#'\" class=\"cf-access-btn\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M10 6v2H5v11h11v-5h2v7H3V6h7zm11-3v8l-3.36-3.36-5.3 5.31-1.41-1.42 5.3-5.3L13 3h8z\"/></svg>\r\n        Click to Access Your Account\r\n      </a>\r\n\r\n      <p class=\"cf-not-you\">\r\n        Not you or wrong account?\r\n        <a *ngIf=\"privacyAndTerms?.contactEmail\" [href]=\"'mailto:' + privacyAndTerms.contactEmail\">Contact support</a>\r\n        <span *ngIf=\"!privacyAndTerms?.contactEmail\">Contact your administrator.</span>\r\n      </p>\r\n    </div>\r\n\r\n    <!-- \u2500\u2500 Claim / Activation Form \u2500\u2500 -->\r\n    <div *ngIf=\"!isAuthenticated\" class=\"cp-form-wrap\">\r\n\r\n      <div class=\"cp-form-header\">\r\n        <h2>Activate Your Account</h2>\r\n        <p>Your {{ privacyAndTerms?.companyName }} account is ready. Set your details below to complete activation.</p>\r\n        <!-- Email display (read-only) -->\r\n        <div class=\"cp-email-display\" *ngIf=\"userEmail\">\r\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\"/></svg>\r\n          <span>{{ userEmail }}</span>\r\n        </div>\r\n        <div class=\"cp-loading-hint\" *ngIf=\"isLoadingUser\">\r\n          <span class=\"cp-spinner\"></span> Loading account details\u2026\r\n        </div>\r\n        <div class=\"cp-error\" *ngIf=\"userLookupError\">{{ userLookupError }}</div>\r\n\r\n        <!-- Account not found in Auth0 -->\r\n        <div class=\"cp-account-not-found\" *ngIf=\"accountNotFound\">\r\n          <div class=\"cp-anf-icon\">\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\r\n          </div>\r\n          <div>\r\n            <p class=\"cp-anf-title\">Account Not Found</p>\r\n            <p class=\"cp-anf-sub\">No account is linked to <strong>{{ userEmail }}</strong>. Please contact support or use the link from your invitation email.</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <form [formGroup]=\"claimForm\" (ngSubmit)=\"onSubmit()\" novalidate *ngIf=\"!accountNotFound\">\r\n\r\n        <!-- \u2500\u2500\u2500 Contact Information \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\"/></svg>\r\n          Contact Information\r\n        </div>\r\n\r\n        <!-- Email \u2014 auto-filled, read-only -->\r\n        <div class=\"cp-field\">\r\n          <label for=\"cpEmail\">Email Address</label>\r\n          <div class=\"cp-readonly-wrap\">\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\"/></svg>\r\n            <input type=\"email\" id=\"cpEmail\" formControlName=\"email\" readonly\r\n              class=\"cp-input-readonly\" autocomplete=\"email\" />\r\n          </div>\r\n          <small class=\"cp-autofill-note\">Auto-filled from your invitation</small>\r\n        </div>\r\n\r\n        <div class=\"cp-row\">\r\n          <div class=\"cp-field\">\r\n            <label for=\"firstName\">First Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" id=\"firstName\" formControlName=\"firstName\"\r\n              placeholder=\"Jane\"\r\n              [class.is-invalid]=\"f['firstName'].invalid && f['firstName'].touched\"\r\n              autocomplete=\"given-name\" />\r\n            <div class=\"cp-error\" *ngIf=\"f['firstName'].invalid && f['firstName'].touched\">First name is required</div>\r\n          </div>\r\n          <div class=\"cp-field\">\r\n            <label for=\"lastName\">Last Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" id=\"lastName\" formControlName=\"lastName\"\r\n              placeholder=\"Doe\"\r\n              [class.is-invalid]=\"f['lastName'].invalid && f['lastName'].touched\"\r\n              autocomplete=\"family-name\" />\r\n            <div class=\"cp-error\" *ngIf=\"f['lastName'].invalid && f['lastName'].touched\">Last name is required</div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"cp-field\">\r\n          <label for=\"phone\">Phone<span class=\"req\">*</span></label>\r\n          <input type=\"tel\" id=\"phone\" formControlName=\"phone\"\r\n            placeholder=\"(555) 123-4567\" maxlength=\"14\"\r\n            [class.is-invalid]=\"f['phone'].invalid && f['phone'].touched\"\r\n            (input)=\"formatPhone($event)\" autocomplete=\"tel\" />\r\n          <div class=\"cp-error\" *ngIf=\"f['phone'].invalid && f['phone'].touched\">Phone number is required</div>\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Address \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 14.5 9 2.5 2.5 0 0 1 12 11.5Z\"/></svg>\r\n          Address\r\n        </div>\r\n\r\n        <div class=\"cp-field\">\r\n          <label for=\"address\">Street Address</label>\r\n          <input type=\"text\" id=\"address\" formControlName=\"address\"\r\n            placeholder=\"123 Main Street\"\r\n            ngx-google-places-autocomplete [options]=\"googleOptions\"\r\n            (onAddressChange)=\"onAddressChange($event)\"\r\n            autocomplete=\"off\" />\r\n        </div>\r\n\r\n        <div class=\"cp-row cp-row-triple\">\r\n          <div class=\"cp-field\">\r\n            <label for=\"city\">City</label>\r\n            <input type=\"text\" id=\"city\" formControlName=\"city\" placeholder=\"Orlando\" />\r\n          </div>\r\n          <div class=\"cp-field\">\r\n            <label for=\"state\">State</label>\r\n            <input type=\"text\" id=\"state\" formControlName=\"state\" placeholder=\"FL\" maxlength=\"2\" />\r\n          </div>\r\n          <div class=\"cp-field\">\r\n            <label for=\"zip\">Zip Code</label>\r\n            <input type=\"text\" id=\"zip\" formControlName=\"zip\" placeholder=\"32801\" inputmode=\"numeric\" maxlength=\"5\" />\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Account Setup \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\"/></svg>\r\n          Account Setup\r\n        </div>\r\n\r\n        <!-- Role -->\r\n        <div class=\"cp-field\">\r\n          <label for=\"role\">Role<span class=\"req\">*</span></label>\r\n          <div class=\"cp-select\">\r\n            <select id=\"role\" formControlName=\"role\"\r\n              [class.is-invalid]=\"f['role'].invalid && f['role'].touched\">\r\n              <option value=\"\" disabled>Select your role</option>\r\n              <option *ngFor=\"let r of roles\" [value]=\"r.id\">{{ r.name }}</option>\r\n            </select>\r\n          </div>\r\n          <div class=\"cp-error\" *ngIf=\"f['role'].invalid && f['role'].touched\">Please select a role</div>\r\n        </div>\r\n\r\n        <!-- Password block \u2014 hidden while loading to avoid flash for existing users -->\r\n        <ng-container *ngIf=\"!isLoadingUser\">\r\n\r\n          <!-- Reset toggle: only shown for existing users who already have a password -->\r\n          <div class=\"cp-reset-toggle\" *ngIf=\"userHasExistingDetails\">\r\n            <label class=\"cp-toggle-label\">\r\n              <span class=\"cp-toggle-switch\">\r\n                <input type=\"checkbox\" [checked]=\"resetPasswordEnabled\" (change)=\"toggleResetPassword()\">\r\n                <span class=\"cp-toggle-knob\"></span>\r\n              </span>\r\n              Reset Password\r\n            </label>\r\n            <p class=\"cp-toggle-hint\">Your account already has a password set. Enable this to change it.</p>\r\n          </div>\r\n\r\n          <!-- New-user hint \u2014 shown only when no existing details (password is required) -->\r\n          <div class=\"cp-new-user-hint\" *ngIf=\"!userHasExistingDetails\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2z\"/></svg>\r\n            Create a password for your new account\r\n          </div>\r\n\r\n          <!-- Password fields -->\r\n          <div class=\"cp-row\" *ngIf=\"showPasswordFields\">\r\n          <div class=\"cp-field\">\r\n            <label for=\"password\">Password<span class=\"req\">*</span></label>\r\n            <div class=\"cp-pw-wrap\">\r\n              <input [type]=\"showPassword ? 'text' : 'password'\" id=\"password\" formControlName=\"password\"\r\n                placeholder=\"Min. 8 characters\"\r\n                [class.is-invalid]=\"f['password'].invalid && f['password'].touched\"\r\n                autocomplete=\"new-password\" />\r\n              <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showPassword = !showPassword\"\r\n                [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\">\r\n                <svg *ngIf=\"!showPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>\r\n                <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"/></svg>\r\n              </button>\r\n            </div>\r\n            <div class=\"cp-error\" *ngIf=\"f['password'].invalid && f['password'].touched\">\r\n              <span *ngIf=\"f['password'].errors?.['required']\">Password is required</span>\r\n              <span *ngIf=\"f['password'].errors?.['minlength']\">Password must be at least 8 characters</span>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"cp-field\">\r\n            <label for=\"confirmPassword\">Confirm Password<span class=\"req\">*</span></label>\r\n            <div class=\"cp-pw-wrap\">\r\n              <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPassword\" formControlName=\"confirmPassword\"\r\n                placeholder=\"Repeat password\"\r\n                [class.is-invalid]=\"(f['confirmPassword'].invalid && f['confirmPassword'].touched) || (claimForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched)\"\r\n                autocomplete=\"new-password\" />\r\n              <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showConfirmPassword = !showConfirmPassword\"\r\n                [attr.aria-label]=\"showConfirmPassword ? 'Hide password' : 'Show password'\">\r\n                <svg *ngIf=\"!showConfirmPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>\r\n                <svg *ngIf=\"showConfirmPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"/></svg>\r\n              </button>\r\n            </div>\r\n            <div class=\"cp-error\" *ngIf=\"f['confirmPassword'].invalid && f['confirmPassword'].touched\">Confirm password is required</div>\r\n            <div class=\"cp-error\" *ngIf=\"claimForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched\">Passwords do not match</div>\r\n          </div>\r\n        </div>\r\n\r\n        </ng-container><!-- end password block -->\r\n\r\n        <!-- \u2500\u2500\u2500 Business Information \u2500\u2500\u2500 -->\r\n        <ng-container *ngIf=\"isBusinessRole\">\r\n          <div class=\"cp-section-title\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z\"/></svg>\r\n            Business Information\r\n          </div>\r\n\r\n          <div class=\"cp-row\">\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessName\">Business Name<span class=\"req\">*</span></label>\r\n              <input type=\"text\" id=\"businessName\" formControlName=\"businessName\"\r\n                placeholder=\"Business Name\"\r\n                [class.is-invalid]=\"f['businessName'].invalid && f['businessName'].touched\" />\r\n              <div class=\"cp-error\" *ngIf=\"f['businessName'].invalid && f['businessName'].touched\">Business name is required</div>\r\n            </div>\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessEmail\">Business Email<span class=\"req\">*</span></label>\r\n              <input type=\"email\" id=\"businessEmail\" formControlName=\"businessEmail\"\r\n                placeholder=\"business@example.com\"\r\n                [class.is-invalid]=\"f['businessEmail'].invalid && f['businessEmail'].touched\" />\r\n              <div class=\"cp-error\" *ngIf=\"f['businessEmail'].invalid && f['businessEmail'].touched\">\r\n                <span *ngIf=\"f['businessEmail'].errors?.['required']\">Business email is required</span>\r\n                <span *ngIf=\"f['businessEmail'].errors?.['email']\">Enter a valid email</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"cp-field\">\r\n            <label for=\"businessAddress\">Business Address</label>\r\n            <input type=\"text\" id=\"businessAddress\" formControlName=\"businessAddress\"\r\n              placeholder=\"123 Business Street\"\r\n              ngx-google-places-autocomplete [options]=\"googleOptions\"\r\n              (onAddressChange)=\"onBusinessAddressChange($event)\"\r\n              autocomplete=\"off\" />\r\n          </div>\r\n\r\n          <div class=\"cp-row cp-row-triple\">\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessCity\">City</label>\r\n              <input type=\"text\" id=\"businessCity\" formControlName=\"businessCity\" placeholder=\"City\" />\r\n            </div>\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessState\">State</label>\r\n              <input type=\"text\" id=\"businessState\" formControlName=\"businessState\" placeholder=\"ST\" maxlength=\"2\" />\r\n            </div>\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessZip\">Zip</label>\r\n              <input type=\"text\" id=\"businessZip\" formControlName=\"businessZip\" placeholder=\"00000\" inputmode=\"numeric\" maxlength=\"5\" />\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Business Logo -->\r\n          <div class=\"cp-field\">\r\n            <label>Business Logo</label>\r\n            <div class=\"cp-upload-wrap\">\r\n              <input #cpLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\"\r\n                (change)=\"onBusinessLogoChange($event)\" class=\"cp-upload-hidden\" />\r\n              <input type=\"text\" class=\"cp-upload-text\" [value]=\"businessLogoName\" readonly\r\n                placeholder=\"Click to upload business logo\" (click)=\"cpLogoInput.click()\" />\r\n              <button type=\"button\" class=\"cp-upload-btn\" (click)=\"cpLogoInput.click()\" aria-label=\"Upload logo\">\r\n                <svg viewBox=\"0 0 24 24\"><path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\"/></svg>\r\n              </button>\r\n            </div>\r\n            <small class=\"cp-upload-hint\">Allowed formats: PNG, JPG, JPEG</small>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <!-- \u2500\u2500\u2500 Profile Picture \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\"/></svg>\r\n          Profile Picture\r\n        </div>\r\n        <div class=\"cp-field\">\r\n          <label>Profile Picture<span class=\"req\">*</span></label>\r\n          <div class=\"cp-upload-wrap\">\r\n            <input #cpProfileInput type=\"file\" accept=\".png,.jpg,.jpeg\"\r\n              (change)=\"onProfileFileChange($event)\" class=\"cp-upload-hidden\" />\r\n            <input type=\"text\" class=\"cp-upload-text\" [value]=\"profileFileName\" readonly\r\n              placeholder=\"Click to upload profile picture\" (click)=\"cpProfileInput.click()\" />\r\n            <button type=\"button\" class=\"cp-upload-btn\" (click)=\"cpProfileInput.click()\" aria-label=\"Upload profile picture\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\"/></svg>\r\n            </button>\r\n          </div>\r\n          <small class=\"cp-upload-hint\">Allowed formats: PNG, JPG, JPEG</small>\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Terms & Privacy \u2500\u2500\u2500 -->\r\n        <div class=\"cp-terms\">\r\n          <input type=\"checkbox\" id=\"agree\"\r\n            [checked]=\"model.acceptTerms && model.privacy\"\r\n            (change)=\"onTermsCheckboxChange($event)\" />\r\n          <label for=\"agree\">I accept the\r\n            <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Terms and Conditions', $event)\">Terms &amp; Conditions</a>\r\n            and\r\n            <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Privacy Statement', $event)\">Privacy Policy</a>,\r\n            and confirm I am authorized to activate this account.\r\n          </label>\r\n        </div>\r\n        <div class=\"cp-error cp-terms-error\"\r\n          *ngIf=\"(!model.acceptTerms || !model.privacy) && validatePage === 1\">\r\n          You must agree to both Terms and Conditions and Privacy Statement to continue\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Submit \u2500\u2500\u2500 -->\r\n        <div class=\"cp-error cp-submit-error\" *ngIf=\"submitError\">{{ submitError }}</div>\r\n\r\n        <button type=\"submit\" class=\"cp-btn\" [disabled]=\"isSubmitting\">\r\n          <span *ngIf=\"isSubmitting\" class=\"cp-spinner cp-spinner-btn\"></span>\r\n          <span>{{ isSubmitting ? 'Activating\u2026' : 'Claim My Account' }}</span>\r\n        </button>\r\n\r\n      </form>\r\n    </div>\r\n  </main>\r\n\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Terms & Privacy Modal (read-only) \u2500\u2500\u2500 -->\r\n<ng-template #termsAndConditionsModel>\r\n  <div class=\"modal-dialog modal-dialog-centered tc-modal-dialog\">\r\n    <div class=\"modal-content tc-modal\">\r\n\r\n      <div class=\"tc-modal-header\">\r\n        <div class=\"tc-header-icon\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"/>\r\n            <polyline points=\"14 2 14 8 20 8\"/>\r\n            <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/>\r\n            <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/>\r\n          </svg>\r\n        </div>\r\n        <h4 class=\"tc-modal-title\">{{ termsAndConditionTitle }}</h4>\r\n        <button type=\"button\" class=\"tc-modal-close\" (click)=\"closeModal()\" aria-label=\"Close\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\r\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"tc-modal-body\">\r\n        <ng-container *ngIf=\"termsAndConditionTitle === 'Terms and Conditions'\">\r\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-terms-conditions>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"termsAndConditionTitle !== 'Terms and Conditions'\">\r\n          <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-privacy-policy>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"tc-modal-footer\">\r\n        <button type=\"button\" class=\"tc-btn tc-btn-close\" (click)=\"closeModal()\">\r\n          Close\r\n        </button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.cp-page{display:flex;min-height:100vh;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0c1620}@media (max-width: 860px){.cp-page{flex-direction:column}}.cp-left{width:40%;min-width:300px;background:#fff;border-right:1px solid #e2eaf2;display:flex;flex-direction:column;padding:44px 40px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-left{display:none}}.cp-left-inner{display:flex;flex-direction:column;height:100%}.cp-logo{margin-bottom:36px}.cp-logo-img{max-height:48px;max-width:200px;object-fit:contain;display:block}.cp-logo-fallback{font-size:20px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-left-hero{margin-bottom:32px}.cp-left-hero h1{font-size:22px;font-weight:800;color:#0c1620;line-height:1.3;margin:8px 0 10px}.cp-left-hero p{font-size:13px;color:#6b7c8a;line-height:1.75}.cp-hero-brand{color:#4077ad}.cp-left-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#4077ad;background:#4077ad14;border:1px solid rgba(64,119,173,.2);padding:4px 10px;border-radius:99px}.cp-benefits{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;gap:16px}.cp-benefits li{display:flex;align-items:flex-start;gap:12px}.cp-benefit-icon{flex-shrink:0;width:36px;height:36px;background:#4077ad12;border:1px solid rgba(64,119,173,.14);border-radius:10px;display:flex;align-items:center;justify-content:center}.cp-benefit-icon svg{width:17px;height:17px}.cp-benefit-icon svg path{fill:#4077ad}.cp-benefit-text{display:flex;flex-direction:column;gap:2px;padding-top:2px}.cp-benefit-text strong{font-size:12.5px;font-weight:700;color:#0c1620;display:block}.cp-benefit-text span{font-size:11.5px;color:#6b7c8a;line-height:1.6}.cp-left-contact{display:flex;flex-direction:column;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid #e8edf3}.cp-contact-link{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-contact-link svg{width:14px;height:14px;flex-shrink:0}.cp-contact-link svg path{fill:currentColor}.cp-contact-link:hover{color:#4077ad}.cp-left-footnote{margin-top:18px;font-size:12.5px}.cp-left-footnote a{display:inline-flex;align-items:center;gap:5px;color:#4077ad;text-decoration:none;font-weight:600;transition:color .15s}.cp-left-footnote a svg{width:12px;height:12px}.cp-left-footnote a svg path{fill:#4077ad}.cp-left-footnote a:hover{color:#335f8a;text-decoration:underline}.cp-mobile-bar{display:none;align-items:center;justify-content:center;padding:16px 24px;background:#fff;border-bottom:1px solid #e2eaf2;margin-bottom:0}@media (max-width: 860px){.cp-mobile-bar{display:flex}}.cp-mobile-logo{max-height:36px;max-width:160px;object-fit:contain}.cp-mobile-company{font-size:18px;font-weight:800;color:#4077ad}.cp-right{flex:1;background:#eef1f4;display:flex;flex-direction:column;align-items:center;padding:48px 24px 64px;overflow-y:auto;min-width:0}@media (max-width: 860px){.cp-right{padding:0 0 48px}}.cp-form-wrap{width:100%;max-width:580px;background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201a;padding:40px 44px 48px;margin-top:48px}@media (max-width: 860px){.cp-form-wrap{border-radius:0;box-shadow:none;border-top:1px solid #e2eaf2;margin-top:0;padding:32px 20px 48px;max-width:100%}}@media (max-width: 480px){.cp-form-wrap{padding:24px 16px 40px}}.cp-form-header{margin-bottom:30px}.cp-form-header h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:6px}.cp-form-header p{font-size:13px;color:#6b7c8a;line-height:1.6}.cp-section-title{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#0c1620;padding-bottom:10px;margin-bottom:18px;margin-top:26px;border-bottom:2px solid #4077AD;display:flex;align-items:center;gap:8px}.cp-section-title svg{width:14px;height:14px;flex-shrink:0}.cp-section-title svg path{fill:#4077ad}.cp-section-title:first-of-type{margin-top:0}.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.cp-row.cp-row-triple{grid-template-columns:2fr 1fr 1fr}@media (max-width: 560px){.cp-row{grid-template-columns:1fr}.cp-row.cp-row-triple{grid-template-columns:1fr 1fr}}@media (max-width: 400px){.cp-row.cp-row-triple{grid-template-columns:1fr}}.cp-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width:0}.cp-field.cp-field-with-btn{margin-bottom:0}.cp-field label{font-size:11.5px;font-weight:600;color:#3a4a57}.cp-field label .req{color:#4077ad;margin-left:2px}.cp-field input,.cp-field select{box-sizing:border-box;height:42px;border:1.5px solid #d3dce3;border-radius:6px;padding:0 12px;font-size:13.5px;color:#0c1620;background:#fff;width:100%;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;font-family:inherit}.cp-field input::placeholder,.cp-field select::placeholder{color:#aab8c2}.cp-field input:focus,.cp-field select:focus{outline:none;border-color:#4077ad;box-shadow:0 0 0 3px #4077ad26}.cp-field input.is-invalid,.cp-field select.is-invalid{border-color:#dc3545}.cp-field input.is-invalid:focus,.cp-field select.is-invalid:focus{box-shadow:0 0 0 3px #dc354526}.cp-input-row{display:flex;gap:8px}.cp-input-row input{flex:1}.cp-lookup-btn{flex-shrink:0;height:42px;padding:0 18px;background:#4077ad;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s;font-family:inherit}.cp-lookup-btn:hover:not(:disabled){background:#335f8a}.cp-lookup-btn:disabled{opacity:.6;cursor:not-allowed}.cp-select{position:relative}.cp-select:after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #6b7c8a;pointer-events:none}.cp-select select{cursor:pointer;padding-right:32px}.cp-pw-wrap{position:relative}.cp-pw-wrap input{padding-right:42px}.cp-pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;color:#6b7c8a}.cp-pw-toggle svg{width:18px;height:18px}.cp-pw-toggle svg path{fill:#6b7c8a}.cp-pw-toggle:hover svg path{fill:#4077ad}.cp-agreements{display:flex;flex-direction:column;gap:10px;margin:24px 0 4px}.v1-agreement-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;border:1.5px solid #d3dce3;background:#fff;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #0000000a}.v1-agreement-card:hover{border-color:#bac8d3;box-shadow:0 2px 8px #00000012}.v1-agreement-card.v1-card--agreed{border-color:#b8d4ef;background:#ebf3fb}.v1-agreement-card.v1-card--invalid{border-color:#fecaca;background:#fff5f5}.v1-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#eef1f4;border:1px solid #d3dce3;display:flex;align-items:center;justify-content:center;color:#4077ad}.v1-card--agreed .v1-card-icon{background:#d4e8f8;border-color:#b8d4ef}.v1-card-body{flex:1 1 auto;min-width:0}.v1-card-title{font-size:13px;font-weight:600;color:#0c1620;margin:0 0 2px;line-height:1.3}.v1-card-sub{font-size:11.5px;color:#6b7c8a;margin:0}.v1-agree-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:8px;font-size:12px;font-weight:600;font-family:inherit;border:1.5px solid #4077AD;color:#4077ad;background:transparent;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}.v1-agree-btn:hover{background:#4077ad;color:#fff}.v1-agree-btn.v1-agree-btn--done{background:#4077ad;border-color:#4077ad;color:#fff}.cp-email-display{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 12px;background:#eef1f4;border:1.5px solid #d3dce3;border-radius:99px;font-size:12.5px;color:#0c1620;font-weight:500}.cp-email-display svg{width:14px;height:14px;flex-shrink:0}.cp-email-display svg path{fill:#4077ad}.cp-account-not-found{display:flex;align-items:flex-start;gap:12px;margin-top:16px;padding:14px 16px;background:#fff5f5;border:1.5px solid #fecaca;border-radius:6px}.cp-anf-icon{flex-shrink:0;width:32px;height:32px;background:#dc35451a;border-radius:50%;display:flex;align-items:center;justify-content:center}.cp-anf-icon svg{width:16px;height:16px}.cp-anf-icon svg path{fill:#dc3545}.cp-anf-title{font-size:13px;font-weight:700;color:#b91c1c;margin:0 0 3px}.cp-anf-sub{font-size:12px;color:#dc3545;margin:0;line-height:1.5}.cp-anf-sub strong{font-weight:600}.cp-invalid-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#eef1f4;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;padding:24px}.cp-invalid-card{background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-invalid-card h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-invalid-card p{font-size:14px;color:#6b7c8a;line-height:1.7}.cp-invalid-icon{width:64px;height:64px;background:#dc35451a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-invalid-icon svg{width:32px;height:32px}.cp-invalid-icon svg path{fill:#dc3545}.tc-modal-dialog{max-width:min(780px,96vw)}.tc-modal{border-radius:20px!important;border:none!important;overflow:hidden;box-shadow:0 32px 72px #00000038,0 6px 20px #0000001a!important;height:min(720px,90vh);display:flex;flex-direction:column}.tc-modal-header{display:flex;align-items:center;gap:13px;padding:20px 24px;background:#4077ad;border-bottom:none;flex-shrink:0}.tc-modal-header .tc-header-icon{width:38px;height:38px;background:#ffffff1f;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#93c5fd;flex-shrink:0}.tc-modal-header .tc-modal-title{font-size:16px;font-weight:700;color:#fff;margin:0;flex:1}.tc-modal-close{flex-shrink:0;background:#ffffff1f;border:none;border-radius:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#fffc;cursor:pointer;transition:background .15s,color .15s}.tc-modal-close:hover{background:#ffffff38;color:#fff}.tc-modal-body{flex:1 1 auto;overflow-y:auto;padding:26px 32px;background:#fff;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.tc-modal-body::-webkit-scrollbar{width:5px}.tc-modal-body::-webkit-scrollbar-track{background:transparent}.tc-modal-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}.tc-modal-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tc-modal-footer{display:flex;justify-content:flex-end;align-items:center;padding:14px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.tc-btn{font-size:13.5px;font-weight:600;font-family:inherit;padding:9px 24px;border-radius:10px;border:none;cursor:pointer;transition:background .15s ease}.tc-btn.tc-btn-close{background:#4077ad;color:#fff}.tc-btn.tc-btn-close:hover{background:#335f8a}.cp-error{font-size:11.5px;color:#dc3545;margin-top:2px}.cp-terms-error{margin-top:4px}.cp-submit-error{margin-bottom:12px;font-size:13px;text-align:center}.cp-loading-hint{display:flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;margin-top:4px}.cp-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;margin-top:22px;background:#4077ad;border:none;border-radius:6px;font-size:14px;font-weight:700;letter-spacing:.4px;color:#fff;cursor:pointer;text-decoration:none;transition:background .15s,transform .1s;font-family:inherit}.cp-btn:hover:not(:disabled){background:#335f8a}.cp-btn:active:not(:disabled){transform:scale(.99)}.cp-btn:disabled{opacity:.65;cursor:not-allowed}.cp-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:cp-spin .7s linear infinite}.cp-spinner:not(.cp-spinner-btn){border-color:#4077ad4d;border-top-color:#4077ad}@keyframes cp-spin{to{transform:rotate(360deg)}}.cp-success-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#eef1f4;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;padding:24px}.cp-success-card{background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-success-card h2{font-size:24px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-success-card p{font-size:14px;color:#6b7c8a;line-height:1.7;margin-bottom:28px}.cp-success-icon{width:64px;height:64px;background:#28a7451a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-success-icon svg{width:32px;height:32px}.cp-success-icon svg path{fill:#28a745}.cp-readonly-wrap{position:relative;display:flex;align-items:center}.cp-readonly-wrap svg{position:absolute;left:12px;width:15px;height:15px;flex-shrink:0;pointer-events:none}.cp-readonly-wrap svg path{fill:#4077ad}.cp-input-readonly{width:100%;box-sizing:border-box;height:42px;border:1.5px solid #d3dce3;border-radius:6px;padding:0 12px 0 36px;font-size:13.5px;color:#0c1620;background:#4077ad0a;cursor:default;font-family:inherit;font-weight:500}.cp-autofill-note{font-size:11px;color:#4077ad;margin-top:3px;display:flex;align-items:center;gap:4px}.cp-new-user-hint{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#4077ad;background:#4077ad0f;border:1px solid rgba(64,119,173,.18);border-radius:6px;padding:9px 13px;margin:6px 0 12px}.cp-new-user-hint svg{width:15px;height:15px;flex-shrink:0}.cp-new-user-hint svg path{fill:#4077ad}.cp-terms{display:flex;align-items:flex-start;gap:10px;margin:22px 0 4px}.cp-terms input[type=checkbox]{margin-top:2px;width:15px;height:15px;flex-shrink:0;accent-color:#4077AD;cursor:pointer}.cp-terms label{font-size:12.5px;color:#6b7c8a;line-height:1.6;cursor:pointer;margin:0}.cp-terms label a{color:#4077ad;text-decoration:underline;font-weight:600}.cp-terms label a:hover{color:#335f8a}.cp-reset-toggle{margin:6px 0 18px;padding:14px 16px;background:#f0f7ff;border:1.5px solid #b8d4ef;border-radius:6px}.cp-toggle-label{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#0c1620;cursor:pointer;margin:0}.cp-toggle-switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0}.cp-toggle-switch input{opacity:0;width:0;height:0;position:absolute}.cp-toggle-switch input:checked+.cp-toggle-knob{background:#4077ad}.cp-toggle-switch input:checked+.cp-toggle-knob:before{transform:translate(16px)}.cp-toggle-knob{position:absolute;inset:0;background:#d3dce3;border-radius:22px;transition:background .2s;cursor:pointer}.cp-toggle-knob:before{content:\"\";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px #0003}.cp-toggle-hint{font-size:11.5px;color:#6b7c8a;margin:6px 0 0}.cp-upload-wrap{display:flex;align-items:stretch}.cp-upload-wrap .cp-upload-hidden{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.cp-upload-wrap .cp-upload-text{flex:1;border-radius:6px 0 0 6px!important;cursor:pointer;min-width:0}.cp-upload-btn{flex-shrink:0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#eef1f4;border:1.5px solid #d3dce3;border-left:none;border-radius:0 6px 6px 0;cursor:pointer;transition:background .15s}.cp-upload-btn:hover{background:#dfe4ea}.cp-upload-btn svg{width:18px;height:18px}.cp-upload-btn svg path{fill:#4077ad}.cp-upload-hint{display:block;font-size:11px;color:#6b7c8a;margin-top:4px}.cp-left-badge--found{color:#166534;background:#22c55e1a;border-color:#22c55e47;gap:5px}.cp-left-badge--found svg{width:12px;height:12px;flex-shrink:0}.cp-left-badge--found svg path{fill:#16a34a}.cp-benefit-icon--green{background:#22c55e14;border-color:#22c55e2e}.cp-benefit-icon--green svg path{fill:#16a34a}.cf-wrap{width:100%;max-width:520px;margin:0 auto;padding:48px 32px 40px;display:flex;flex-direction:column;align-items:center;text-align:center}@media (max-width: 540px){.cf-wrap{padding:32px 20px 28px}}.cf-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:#166534;background:#22c55e1a;border:1px solid rgba(34,197,94,.28);padding:5px 14px;border-radius:99px;margin-bottom:20px}.cf-badge svg{width:13px;height:13px;flex-shrink:0}.cf-badge svg path{fill:#16a34a}.cf-heading{font-size:26px;font-weight:800;color:#0c1620;margin:0 0 8px;line-height:1.2}.cf-sub{font-size:13.5px;color:#6b7c8a;margin:0 0 28px;line-height:1.6;max-width:380px}.cf-card{width:100%;background:#fff;border:1.5px solid #d3dce3;border-radius:14px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:20px;box-shadow:0 4px 16px #0c16200f;margin-bottom:28px;text-align:left}.cf-avatar{width:72px;height:72px;border-radius:50%;background:#4077ad;color:#fff;font-size:24px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:1px;box-shadow:0 4px 12px #4077ad59}.cf-info-grid{width:100%;display:flex;flex-direction:column;gap:0;border:1px solid #e8edf3;border-radius:10px;overflow:hidden}.cf-info-row{display:flex;align-items:center;padding:11px 16px;gap:12px;border-bottom:1px solid #e8edf3}.cf-info-row:last-child{border-bottom:none}@media (max-width: 400px){.cf-info-row{flex-direction:column;align-items:flex-start;gap:2px}}.cf-info-label{font-size:11.5px;font-weight:700;color:#6b7c8a;text-transform:uppercase;letter-spacing:.8px;min-width:90px;flex-shrink:0}.cf-info-value{font-size:13.5px;font-weight:500;color:#0c1620;word-break:break-word}.cf-role-badge{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;color:#4077ad;background:#4077ad14;border:1px solid rgba(64,119,173,.2);padding:3px 10px;border-radius:99px;letter-spacing:.4px}.cf-access-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:0 24px;height:52px;background:#4077ad;color:#fff;border-radius:10px;font-size:14.5px;font-weight:700;text-decoration:none;letter-spacing:.3px;transition:background .15s,transform .1s,box-shadow .15s;box-shadow:0 4px 14px #4077ad59;margin-bottom:18px}.cf-access-btn svg{width:18px;height:18px;flex-shrink:0}.cf-access-btn svg path{fill:#fff}.cf-access-btn:hover{background:#335f8a;box-shadow:0 6px 18px #4077ad73;transform:translateY(-1px);color:#fff;text-decoration:none}.cf-access-btn:active{transform:scale(.99)}.cf-not-you{font-size:12px;color:#6b7c8a;margin:0}.cf-not-you a{color:#4077ad;text-decoration:underline;font-weight:600}.cf-not-you a:hover{color:#335f8a}\n"], dependencies: [{ kind: "directive", type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: TermsConditionsComponent, selector: "app-terms-conditions", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ClaimProcessComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-claim-process', standalone: false, template: "<h2 class=\"sr-only\">Claim Your Account</h2>\r\n\r\n<!-- \u2500\u2500\u2500 No Email Error \u2500\u2500\u2500 -->\r\n<div *ngIf=\"noEmailError\" class=\"cp-invalid-page\">\r\n  <div class=\"cp-invalid-card\">\r\n    <div class=\"cp-invalid-icon\">\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\r\n    </div>\r\n    <h2>Invalid Access Link</h2>\r\n    <p>This page requires a valid invitation link. Please use the link from your invitation email to claim your account.</p>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Success State \u2500\u2500\u2500 -->\r\n<div *ngIf=\"submitSuccess\" class=\"cp-success-page\">\r\n  <div class=\"cp-success-card\">\r\n    <div class=\"cp-success-icon\">\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n    </div>\r\n    <h2>Account Claimed!</h2>\r\n    <p>Your account has been successfully activated. You can now sign in and start using the platform.</p>\r\n    <a [href]=\"libConfig?.dashboardUrl || '#'\" class=\"cp-btn\">Go to Dashboard</a>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Main Layout \u2500\u2500\u2500 -->\r\n<div *ngIf=\"!noEmailError && !submitSuccess\" class=\"cp-page\">\r\n\r\n  <!-- Left Panel -->\r\n  <aside class=\"cp-left\">\r\n    <div class=\"cp-left-inner\">\r\n\r\n      <div class=\"cp-logo\">\r\n        <svg version=\"1.2\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 248 48\" width=\"180\" height=\"35\" role=\"img\" aria-label=\"BOOTOG\">\r\n          <style>.s0 { fill: #ffffff }</style>\r\n          <g id=\"bootog-logo\">\r\n            <path class=\"s0\" d=\"m190.36 18.85q-0.1-0.39-0.21-0.78-0.13-0.39-0.26-0.78-0.13-0.38-0.26-0.76-0.15-0.38-0.31-0.75-0.36 0.47-0.75 0.91-0.38 0.43-0.8 0.85-0.41 0.4-0.86 0.78-0.45 0.39-0.92 0.73 0.12 0.39 0.21 0.76 0.09 0.38 0.17 0.76 0.08 0.38 0.14 0.76 0.05 0.39 0.09 0.78 0.51-0.37 0.99-0.76 0.49-0.39 0.96-0.8 0.48-0.41 0.93-0.83 0.46-0.42 0.9-0.87z\"/>\r\n            <path class=\"s0\" d=\"m159.72 31.28q-0.56 0.13-1.11 0.22-0.56 0.1-1.12 0.15-0.56 0.06-1.13 0.08-0.57 0.02-1.14 0.01 0.16 0.35 0.33 0.71 0.17 0.35 0.36 0.7 0.17 0.34 0.38 0.68 0.19 0.33 0.4 0.66 0.59-0.04 1.19-0.11 0.58-0.07 1.17-0.16 0.59-0.09 1.16-0.21 0.58-0.12 1.16-0.26-0.23-0.29-0.46-0.59-0.22-0.3-0.43-0.61-0.2-0.3-0.39-0.62-0.2-0.32-0.37-0.65z\"/>\r\n            <path class=\"s0\" d=\"m174.36 26.13q2.02 0.85 3.93 1.56 0.04 0.02 0.09 0.02 0.04 0.01 0.08 0.01 0.05 0 0.09-0.01 0.04 0 0.08-0.02c9.63-5.11 16.02-11.03 14.65-13.9-0.57-1.21-2.42-1.73-5.14-1.62q-0.05 0-0.09 0.03-0.04 0.04-0.04 0.1 0 0.06 0.04 0.1 0.04 0.04 0.09 0.04 0.21 0.01 0.42 0.08 0.2 0.06 0.38 0.18 0.18 0.11 0.33 0.26 0.15 0.15 0.25 0.34c1.05 2.24-5.67 7.56-15.16 12.15q-0.05 0.03-0.08 0.06-0.04 0.04-0.07 0.08-0.03 0.05-0.05 0.1 0 0.05 0 0.1 0 0.05 0.01 0.1 0.02 0.05 0.05 0.1 0.03 0.04 0.06 0.08 0.04 0.03 0.08 0.06z\"/>\r\n            <path class=\"s0\" d=\"m168.92 30.58c-1.02-0.47-2.04-0.93-3.03-1.46q-0.04-0.02-0.08-0.04-0.03 0-0.07 0-0.04 0-0.07 0-0.04 0.02-0.08 0.04c-6.62 2.3-11.72 2.88-12.49 1.15q-0.07-0.21-0.1-0.42-0.02-0.21 0.01-0.42 0.03-0.21 0.12-0.4 0.08-0.21 0.22-0.37 0.03-0.05 0.02-0.11-0.01-0.06-0.07-0.09-0.05-0.03-0.1-0.02-0.07 0.01-0.1 0.06c-1.83 1.99-2.62 3.75-2.06 4.97 1.27 2.76 9.18 1.92 18.75-1.77q0.08-0.02 0.13-0.08 0.05-0.05 0.09-0.12 0.03-0.06 0.02-0.15 0-0.07-0.02-0.14-0.02-0.03-0.05-0.07-0.01-0.03-0.04-0.05-0.03-0.03-0.05-0.05-0.03-0.02-0.08-0.03-0.1-0.06-0.21-0.12-0.11-0.05-0.22-0.11-0.11-0.06-0.22-0.11-0.11-0.05-0.22-0.09 0 0 0 0z\"/>\r\n            <path class=\"s0\" d=\"m157.96 22.26q0.03-0.38 0.09-0.77 0.04-0.4 0.12-0.78 0.07-0.39 0.16-0.78 0.09-0.38 0.19-0.76-0.46-0.34-0.9-0.71-0.43-0.36-0.85-0.76-0.42-0.39-0.81-0.81-0.4-0.42-0.76-0.86-0.15 0.37-0.3 0.75-0.15 0.38-0.28 0.77-0.13 0.39-0.24 0.77-0.12 0.39-0.22 0.78 0.45 0.43 0.9 0.84 0.46 0.41 0.93 0.8 0.47 0.4 0.96 0.77 0.49 0.37 0.98 0.73h0.01z\"/>\r\n            <path class=\"s0\" d=\"m158.86 18.13q0.73-2.08 2.05-3.84 1.32-1.76 3.12-3.04 1.8-1.26 3.91-1.93c1.38-0.43 2.84-0.64 4.3-0.64q2.18 0 4.28 0.64 2.09 0.66 3.88 1.91 1.79 1.25 3.13 2.98 1.34 1.73 2.09 3.78 0.46-0.34 0.89-0.72 0.44-0.37 0.84-0.79 0.4-0.42 0.76-0.86 0.37-0.45 0.7-0.92-1.17-2.26-2.91-4.12-1.75-1.85-3.93-3.15-2.18-1.31-4.64-1.96-2.46-0.65-5-0.61-2.58-0.03-5.08 0.65-2.49 0.68-4.7 2.01-2.21 1.34-3.96 3.24-1.75 1.9-2.91 4.21 0.34 0.45 0.7 0.87 0.38 0.42 0.77 0.82 0.41 0.4 0.83 0.77 0.43 0.37 0.88 0.7z\"/>\r\n            <g>\r\n              <path class=\"s0\" d=\"m4 6.27h13.44c3.67 0 6.76 0.59 9.2 2.21q0.92 0.59 1.66 1.39 0.75 0.8 1.26 1.76 0.51 0.96 0.76 2.02 0.25 1.07 0.23 2.15 0.04 1.13-0.26 2.21-0.3 1.08-0.92 2.02-0.62 0.94-1.48 1.64-0.88 0.71-1.93 1.11v0.09q1.3 0.37 2.4 1.13 1.12 0.77 1.91 1.86 0.79 1.09 1.18 2.38 0.39 1.29 0.34 2.64 0.03 1.12-0.21 2.23-0.26 1.1-0.77 2.11-0.51 1.01-1.25 1.86-0.75 0.85-1.67 1.5c-2.47 1.73-5.83 2.55-9.74 2.55h-14.15zm13.1 13.96c2.42 0 3.76-1.11 3.76-3.13q0.01-0.34-0.04-0.65-0.07-0.33-0.21-0.63-0.13-0.29-0.35-0.54-0.21-0.25-0.47-0.45-0.37-0.21-0.77-0.37-0.39-0.16-0.81-0.26-0.41-0.1-0.84-0.13-0.43-0.04-0.85-0.01h-2.69v6.17zm3.79 12.3q0.28-0.22 0.49-0.49 0.22-0.28 0.36-0.59 0.14-0.32 0.21-0.66 0.07-0.34 0.05-0.68c0-2.12-1.44-3.32-3.99-3.32h-4.21v6.55h3.48c1.78 0 2.85-0.25 3.61-0.81z\"/>\r\n              <path class=\"s0\" d=\"m34.19 23.72c0-10.17 7.99-18 18.64-18 10.63 0 18.64 7.8 18.64 17.97 0 10.17-7.96 17.96-18.64 17.96-10.69 0-18.64-7.79-18.64-17.96zm27.36 0c0-5.2-3.53-9.19-8.72-9.19-5.2 0-8.73 3.99-8.73 9.19 0 5.2 3.53 9.2 8.73 9.2 5.19 0 8.72-4 8.72-9.2z\"/>\r\n              <path class=\"s0\" d=\"m74.58 23.72c0-10.18 8-17.97 18.64-17.97 10.65 0 18.65 7.79 18.65 17.97 0 10.16-7.95 17.96-18.65 17.96-10.68 0-18.64-7.8-18.64-17.96zm27.37 0c0-5.2-3.53-9.21-8.72-9.21-5.2 0-8.72 4.01-8.72 9.21 0 5.19 3.52 9.19 8.71 9.19 5.2 0 8.73-4 8.73-9.19z\"/>\r\n              <path class=\"s0\" d=\"m123.84 14.65h-11.09v-8.38h32.08v8.38h-11.07v26.51h-9.92z\"/>\r\n            </g>\r\n            <path class=\"s0\" d=\"m212.95 22.04h14.51v17.02q-1.4 0.65-2.85 1.14-1.46 0.49-2.96 0.83-1.51 0.34-3.04 0.5-1.54 0.17-3.08 0.17c-11.88 0-19.68-7.52-19.68-17.68 0-10.14 8.14-18.04 19.5-18.04q1.42-0.01 2.84 0.15 1.41 0.16 2.8 0.49 1.39 0.32 2.72 0.81 1.34 0.48 2.61 1.12v9.4q-1.17-0.74-2.44-1.32-1.27-0.58-2.61-1-1.33-0.41-2.71-0.65-1.37-0.23-2.76-0.28c-6.28 0-10.05 4.02-10.05 9.28 0 5.27 3.68 9.34 9.87 9.34q0.32 0 0.63-0.01 0.33-0.02 0.64-0.06 0.32-0.03 0.64-0.1 0.31-0.05 0.62-0.13v-3.64h-5.17v-7.32z\"/>\r\n          </g>\r\n        </svg>\r\n      </div>\r\n\r\n      <div class=\"cp-left-hero\">\r\n        <div class=\"cp-left-badge\">For Insurance Agencies &amp; Agents</div>\r\n        <h1>Claim Your InspectorMatch Account</h1>\r\n        <p>Your agency account is ready and waiting. Complete the form to activate your access to inspection services, field support, and training resources.</p>\r\n      </div>\r\n\r\n      <ul class=\"cp-benefits\">\r\n        <li>\r\n          <span class=\"cp-benefit-icon\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z\"/></svg>\r\n          </span>\r\n          <span>Instant access to the inspection services marketplace</span>\r\n        </li>\r\n        <li>\r\n          <span class=\"cp-benefit-icon\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\"/></svg>\r\n          </span>\r\n          <span>Connect with certified field professionals nationwide</span>\r\n        </li>\r\n        <li>\r\n          <span class=\"cp-benefit-icon\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z\"/></svg>\r\n          </span>\r\n          <span>Manage your team and track performance from one dashboard</span>\r\n        </li>\r\n        <li>\r\n          <span class=\"cp-benefit-icon\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"/></svg>\r\n          </span>\r\n          <span>Backed by BOOTOG Technologies with 24/7 support</span>\r\n        </li>\r\n      </ul>\r\n\r\n      <p class=\"cp-left-footnote\">Already have access? <a href=\"#\">Sign in to InspectorMatch</a></p>\r\n    </div>\r\n  </aside>\r\n\r\n  <!-- Right Panel \u2014 Form -->\r\n  <main class=\"cp-right\">\r\n    <div class=\"cp-form-wrap\">\r\n\r\n      <div class=\"cp-form-header\">\r\n        <h2>Complete Your Profile</h2>\r\n        <p>Your account details have been loaded. Set your password and role to activate.</p>\r\n        <!-- Email display (read-only) -->\r\n        <div class=\"cp-email-display\" *ngIf=\"userEmail\">\r\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\"/></svg>\r\n          <span>{{ userEmail }}</span>\r\n        </div>\r\n        <div class=\"cp-loading-hint\" *ngIf=\"isLoadingUser\">\r\n          <span class=\"cp-spinner\"></span> Loading account details\u2026\r\n        </div>\r\n        <div class=\"cp-error\" *ngIf=\"userLookupError\">{{ userLookupError }}</div>\r\n\r\n        <!-- Account not found in Auth0 -->\r\n        <div class=\"cp-account-not-found\" *ngIf=\"accountNotFound\">\r\n          <div class=\"cp-anf-icon\">\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\r\n          </div>\r\n          <div>\r\n            <p class=\"cp-anf-title\">Account Not Found</p>\r\n            <p class=\"cp-anf-sub\">No account is linked to <strong>{{ userEmail }}</strong>. Please contact support or use the link from your invitation email.</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <form [formGroup]=\"claimForm\" (ngSubmit)=\"onSubmit()\" novalidate *ngIf=\"!accountNotFound\">\r\n\r\n        <!-- \u2500\u2500\u2500 Contact Information \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\"/></svg>\r\n          Contact Information\r\n        </div>\r\n\r\n        <div class=\"cp-row\">\r\n          <div class=\"cp-field\">\r\n            <label for=\"firstName\">First Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" id=\"firstName\" formControlName=\"firstName\"\r\n              placeholder=\"Jane\"\r\n              [class.is-invalid]=\"f['firstName'].invalid && f['firstName'].touched\"\r\n              autocomplete=\"given-name\" />\r\n            <div class=\"cp-error\" *ngIf=\"f['firstName'].invalid && f['firstName'].touched\">First name is required</div>\r\n          </div>\r\n          <div class=\"cp-field\">\r\n            <label for=\"lastName\">Last Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" id=\"lastName\" formControlName=\"lastName\"\r\n              placeholder=\"Doe\"\r\n              [class.is-invalid]=\"f['lastName'].invalid && f['lastName'].touched\"\r\n              autocomplete=\"family-name\" />\r\n            <div class=\"cp-error\" *ngIf=\"f['lastName'].invalid && f['lastName'].touched\">Last name is required</div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"cp-field\">\r\n          <label for=\"phone\">Phone<span class=\"req\">*</span></label>\r\n          <input type=\"tel\" id=\"phone\" formControlName=\"phone\"\r\n            placeholder=\"(555) 123-4567\" maxlength=\"14\"\r\n            [class.is-invalid]=\"f['phone'].invalid && f['phone'].touched\"\r\n            (input)=\"formatPhone($event)\" autocomplete=\"tel\" />\r\n          <div class=\"cp-error\" *ngIf=\"f['phone'].invalid && f['phone'].touched\">Phone number is required</div>\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Address \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 14.5 9 2.5 2.5 0 0 1 12 11.5Z\"/></svg>\r\n          Address\r\n        </div>\r\n\r\n        <div class=\"cp-field\">\r\n          <label for=\"address\">Street Address</label>\r\n          <input type=\"text\" id=\"address\" formControlName=\"address\"\r\n            placeholder=\"123 Main Street\"\r\n            ngx-google-places-autocomplete [options]=\"googleOptions\"\r\n            (onAddressChange)=\"onAddressChange($event)\"\r\n            autocomplete=\"off\" />\r\n        </div>\r\n\r\n        <div class=\"cp-row cp-row-triple\">\r\n          <div class=\"cp-field\">\r\n            <label for=\"city\">City</label>\r\n            <input type=\"text\" id=\"city\" formControlName=\"city\" placeholder=\"Orlando\" />\r\n          </div>\r\n          <div class=\"cp-field\">\r\n            <label for=\"state\">State</label>\r\n            <input type=\"text\" id=\"state\" formControlName=\"state\" placeholder=\"FL\" maxlength=\"2\" />\r\n          </div>\r\n          <div class=\"cp-field\">\r\n            <label for=\"zip\">Zip Code</label>\r\n            <input type=\"text\" id=\"zip\" formControlName=\"zip\" placeholder=\"32801\" inputmode=\"numeric\" maxlength=\"5\" />\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Account Setup \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\"/></svg>\r\n          Account Setup\r\n        </div>\r\n\r\n        <!-- Role -->\r\n        <div class=\"cp-field\">\r\n          <label for=\"role\">Role<span class=\"req\">*</span></label>\r\n          <div class=\"cp-select\">\r\n            <select id=\"role\" formControlName=\"role\"\r\n              [class.is-invalid]=\"f['role'].invalid && f['role'].touched\">\r\n              <option value=\"\" disabled>Select your role</option>\r\n              <option *ngFor=\"let r of roles\" [value]=\"r.id\">{{ r.name }}</option>\r\n            </select>\r\n          </div>\r\n          <div class=\"cp-error\" *ngIf=\"f['role'].invalid && f['role'].touched\">Please select a role</div>\r\n        </div>\r\n\r\n        <!-- Reset password toggle (existing users only) -->\r\n        <div class=\"cp-reset-toggle\" *ngIf=\"userHasExistingDetails\">\r\n          <label class=\"cp-toggle-label\">\r\n            <span class=\"cp-toggle-switch\">\r\n              <input type=\"checkbox\" [checked]=\"resetPasswordEnabled\" (change)=\"toggleResetPassword()\">\r\n              <span class=\"cp-toggle-knob\"></span>\r\n            </span>\r\n            Reset Password\r\n          </label>\r\n          <p class=\"cp-toggle-hint\">Your account already has a password set. Enable this to change it.</p>\r\n        </div>\r\n\r\n        <!-- Password -->\r\n        <div class=\"cp-row\" *ngIf=\"showPasswordFields\">\r\n          <div class=\"cp-field\">\r\n            <label for=\"password\">Password<span class=\"req\">*</span></label>\r\n            <div class=\"cp-pw-wrap\">\r\n              <input [type]=\"showPassword ? 'text' : 'password'\" id=\"password\" formControlName=\"password\"\r\n                placeholder=\"Min. 8 characters\"\r\n                [class.is-invalid]=\"f['password'].invalid && f['password'].touched\"\r\n                autocomplete=\"new-password\" />\r\n              <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showPassword = !showPassword\"\r\n                [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\">\r\n                <svg *ngIf=\"!showPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>\r\n                <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"/></svg>\r\n              </button>\r\n            </div>\r\n            <div class=\"cp-error\" *ngIf=\"f['password'].invalid && f['password'].touched\">\r\n              <span *ngIf=\"f['password'].errors?.['required']\">Password is required</span>\r\n              <span *ngIf=\"f['password'].errors?.['minlength']\">Password must be at least 8 characters</span>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"cp-field\">\r\n            <label for=\"confirmPassword\">Confirm Password<span class=\"req\">*</span></label>\r\n            <div class=\"cp-pw-wrap\">\r\n              <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPassword\" formControlName=\"confirmPassword\"\r\n                placeholder=\"Repeat password\"\r\n                [class.is-invalid]=\"(f['confirmPassword'].invalid && f['confirmPassword'].touched) || (claimForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched)\"\r\n                autocomplete=\"new-password\" />\r\n              <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showConfirmPassword = !showConfirmPassword\"\r\n                [attr.aria-label]=\"showConfirmPassword ? 'Hide password' : 'Show password'\">\r\n                <svg *ngIf=\"!showConfirmPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>\r\n                <svg *ngIf=\"showConfirmPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"/></svg>\r\n              </button>\r\n            </div>\r\n            <div class=\"cp-error\" *ngIf=\"f['confirmPassword'].invalid && f['confirmPassword'].touched\">Confirm password is required</div>\r\n            <div class=\"cp-error\" *ngIf=\"claimForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched\">Passwords do not match</div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Business Information \u2500\u2500\u2500 -->\r\n        <ng-container *ngIf=\"isBusinessRole\">\r\n          <div class=\"cp-section-title\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z\"/></svg>\r\n            Business Information\r\n          </div>\r\n\r\n          <div class=\"cp-row\">\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessName\">Business Name<span class=\"req\">*</span></label>\r\n              <input type=\"text\" id=\"businessName\" formControlName=\"businessName\"\r\n                placeholder=\"Business Name\"\r\n                [class.is-invalid]=\"f['businessName'].invalid && f['businessName'].touched\" />\r\n              <div class=\"cp-error\" *ngIf=\"f['businessName'].invalid && f['businessName'].touched\">Business name is required</div>\r\n            </div>\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessEmail\">Business Email<span class=\"req\">*</span></label>\r\n              <input type=\"email\" id=\"businessEmail\" formControlName=\"businessEmail\"\r\n                placeholder=\"business@example.com\"\r\n                [class.is-invalid]=\"f['businessEmail'].invalid && f['businessEmail'].touched\" />\r\n              <div class=\"cp-error\" *ngIf=\"f['businessEmail'].invalid && f['businessEmail'].touched\">\r\n                <span *ngIf=\"f['businessEmail'].errors?.['required']\">Business email is required</span>\r\n                <span *ngIf=\"f['businessEmail'].errors?.['email']\">Enter a valid email</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"cp-field\">\r\n            <label for=\"businessAddress\">Business Address</label>\r\n            <input type=\"text\" id=\"businessAddress\" formControlName=\"businessAddress\"\r\n              placeholder=\"123 Business Street\"\r\n              ngx-google-places-autocomplete [options]=\"googleOptions\"\r\n              (onAddressChange)=\"onBusinessAddressChange($event)\"\r\n              autocomplete=\"off\" />\r\n          </div>\r\n\r\n          <div class=\"cp-row cp-row-triple\">\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessCity\">City</label>\r\n              <input type=\"text\" id=\"businessCity\" formControlName=\"businessCity\" placeholder=\"City\" />\r\n            </div>\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessState\">State</label>\r\n              <input type=\"text\" id=\"businessState\" formControlName=\"businessState\" placeholder=\"ST\" maxlength=\"2\" />\r\n            </div>\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessZip\">Zip</label>\r\n              <input type=\"text\" id=\"businessZip\" formControlName=\"businessZip\" placeholder=\"00000\" inputmode=\"numeric\" maxlength=\"5\" />\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Business Logo -->\r\n          <div class=\"cp-field\">\r\n            <label>Business Logo</label>\r\n            <div class=\"cp-upload-wrap\">\r\n              <input #cpLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\"\r\n                (change)=\"onBusinessLogoChange($event)\" class=\"cp-upload-hidden\" />\r\n              <input type=\"text\" class=\"cp-upload-text\" [value]=\"businessLogoName\" readonly\r\n                placeholder=\"Click to upload business logo\" (click)=\"cpLogoInput.click()\" />\r\n              <button type=\"button\" class=\"cp-upload-btn\" (click)=\"cpLogoInput.click()\" aria-label=\"Upload logo\">\r\n                <svg viewBox=\"0 0 24 24\"><path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\"/></svg>\r\n              </button>\r\n            </div>\r\n            <small class=\"cp-upload-hint\">Allowed formats: PNG, JPG, JPEG</small>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <!-- \u2500\u2500\u2500 Profile Picture \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\"/></svg>\r\n          Profile Picture\r\n        </div>\r\n        <div class=\"cp-field\">\r\n          <label>Profile Picture<span class=\"req\">*</span></label>\r\n          <div class=\"cp-upload-wrap\">\r\n            <input #cpProfileInput type=\"file\" accept=\".png,.jpg,.jpeg\"\r\n              (change)=\"onProfileFileChange($event)\" class=\"cp-upload-hidden\" />\r\n            <input type=\"text\" class=\"cp-upload-text\" [value]=\"profileFileName\" readonly\r\n              placeholder=\"Click to upload profile picture\" (click)=\"cpProfileInput.click()\" />\r\n            <button type=\"button\" class=\"cp-upload-btn\" (click)=\"cpProfileInput.click()\" aria-label=\"Upload profile picture\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\"/></svg>\r\n            </button>\r\n          </div>\r\n          <small class=\"cp-upload-hint\">Allowed formats: PNG, JPG, JPEG</small>\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Terms & Privacy \u2500\u2500\u2500 -->\r\n        <div class=\"cp-terms\">\r\n          <input type=\"checkbox\" id=\"agree\"\r\n            [checked]=\"model.acceptTerms && model.privacy\"\r\n            (change)=\"onTermsCheckboxChange($event)\" />\r\n          <label for=\"agree\">I accept the\r\n            <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Terms and Conditions', $event)\">Terms &amp; Conditions</a>\r\n            and\r\n            <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Privacy Statement', $event)\">Privacy Policy</a>,\r\n            and confirm I am authorized to activate this account.\r\n          </label>\r\n        </div>\r\n        <div class=\"cp-error cp-terms-error\"\r\n          *ngIf=\"(!model.acceptTerms || !model.privacy) && validatePage === 1\">\r\n          You must agree to both Terms and Conditions and Privacy Statement to continue\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Submit \u2500\u2500\u2500 -->\r\n        <div class=\"cp-error cp-submit-error\" *ngIf=\"submitError\">{{ submitError }}</div>\r\n\r\n        <button type=\"submit\" class=\"cp-btn\" [disabled]=\"isSubmitting\">\r\n          <span *ngIf=\"isSubmitting\" class=\"cp-spinner cp-spinner-btn\"></span>\r\n          <span>{{ isSubmitting ? 'Activating\u2026' : 'Claim My Account' }}</span>\r\n        </button>\r\n\r\n      </form>\r\n    </div>\r\n  </main>\r\n\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Terms & Privacy Modal (read-only) \u2500\u2500\u2500 -->\r\n<ng-template #termsAndConditionsModel>\r\n  <div class=\"modal-dialog modal-dialog-centered tc-modal-dialog\">\r\n    <div class=\"modal-content tc-modal\">\r\n\r\n      <div class=\"tc-modal-header\">\r\n        <div class=\"tc-header-icon\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"/>\r\n            <polyline points=\"14 2 14 8 20 8\"/>\r\n            <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/>\r\n            <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/>\r\n          </svg>\r\n        </div>\r\n        <h4 class=\"tc-modal-title\">{{ termsAndConditionTitle }}</h4>\r\n        <button type=\"button\" class=\"tc-modal-close\" (click)=\"closeModal()\" aria-label=\"Close\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\r\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"tc-modal-body\">\r\n        <ng-container *ngIf=\"termsAndConditionTitle === 'Terms and Conditions'\">\r\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-terms-conditions>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"termsAndConditionTitle !== 'Terms and Conditions'\">\r\n          <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-privacy-policy>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"tc-modal-footer\">\r\n        <button type=\"button\" class=\"tc-btn tc-btn-close\" (click)=\"closeModal()\">\r\n          Close\r\n        </button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.cp-page{display:flex;min-height:100vh;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0c1620}.cp-left{width:42%;min-width:320px;background:#0c1620;display:flex;flex-direction:column;padding:48px 44px;position:sticky;top:0;height:100vh;overflow-y:auto}@media (max-width: 860px){.cp-left{display:none}}.cp-left-inner{display:flex;flex-direction:column;height:100%}.cp-logo{margin-bottom:40px}.cp-logo svg path{fill:#fff}.cp-left-hero{margin-bottom:36px}.cp-left-hero h1{font-size:26px;font-weight:800;color:#fff;line-height:1.25;margin-bottom:12px}.cp-left-hero p{font-size:14px;color:#9fb3c2;line-height:1.7}.cp-left-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#4077ad;margin-bottom:14px}.cp-benefits{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;gap:18px}.cp-benefits li{display:flex;align-items:flex-start;gap:12px;font-size:13px;color:#9fb3c2;line-height:1.55}.cp-benefit-icon{flex-shrink:0;width:32px;height:32px;background:#4077ad26;border-radius:50%;display:flex;align-items:center;justify-content:center}.cp-benefit-icon svg{width:16px;height:16px}.cp-benefit-icon svg path{fill:#4077ad}.cp-left-footnote{margin-top:32px;font-size:13px;color:#5e7385}.cp-left-footnote a{color:#9fb3c2;text-decoration:none}.cp-left-footnote a:hover{color:#4077ad}.cp-right{flex:1;background:#eef1f4;display:flex;align-items:flex-start;justify-content:center;padding:48px 24px 64px;overflow-y:auto}.cp-form-wrap{width:100%;max-width:560px;background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201f;padding:40px 44px 48px}@media (max-width: 600px){.cp-form-wrap{padding:28px 20px 36px}}.cp-form-header{margin-bottom:30px}.cp-form-header h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:6px}.cp-form-header p{font-size:13px;color:#6b7c8a;line-height:1.6}.cp-section-title{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#0c1620;padding-bottom:10px;margin-bottom:18px;margin-top:26px;border-bottom:2px solid #4077AD;display:flex;align-items:center;gap:8px}.cp-section-title svg{width:14px;height:14px;flex-shrink:0}.cp-section-title svg path{fill:#4077ad}.cp-section-title:first-of-type{margin-top:0}.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.cp-row.cp-row-triple{grid-template-columns:2fr 1fr 1fr}@media (max-width: 520px){.cp-row,.cp-row.cp-row-triple{grid-template-columns:1fr}}.cp-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width:0}.cp-field.cp-field-with-btn{margin-bottom:0}.cp-field label{font-size:11.5px;font-weight:600;color:#3a4a57}.cp-field label .req{color:#4077ad;margin-left:2px}.cp-field input,.cp-field select{box-sizing:border-box;height:42px;border:1.5px solid #d3dce3;border-radius:6px;padding:0 12px;font-size:13.5px;color:#0c1620;background:#fff;width:100%;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;font-family:inherit}.cp-field input::placeholder,.cp-field select::placeholder{color:#aab8c2}.cp-field input:focus,.cp-field select:focus{outline:none;border-color:#4077ad;box-shadow:0 0 0 3px #4077ad26}.cp-field input.is-invalid,.cp-field select.is-invalid{border-color:#dc3545}.cp-field input.is-invalid:focus,.cp-field select.is-invalid:focus{box-shadow:0 0 0 3px #dc354526}.cp-input-row{display:flex;gap:8px}.cp-input-row input{flex:1}.cp-lookup-btn{flex-shrink:0;height:42px;padding:0 18px;background:#4077ad;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s;font-family:inherit}.cp-lookup-btn:hover:not(:disabled){background:#335f8a}.cp-lookup-btn:disabled{opacity:.6;cursor:not-allowed}.cp-select{position:relative}.cp-select:after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #6b7c8a;pointer-events:none}.cp-select select{cursor:pointer;padding-right:32px}.cp-pw-wrap{position:relative}.cp-pw-wrap input{padding-right:42px}.cp-pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;color:#6b7c8a}.cp-pw-toggle svg{width:18px;height:18px}.cp-pw-toggle svg path{fill:#6b7c8a}.cp-pw-toggle:hover svg path{fill:#4077ad}.cp-agreements{display:flex;flex-direction:column;gap:10px;margin:24px 0 4px}.v1-agreement-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;border:1.5px solid #d3dce3;background:#fff;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #0000000a}.v1-agreement-card:hover{border-color:#bac8d3;box-shadow:0 2px 8px #00000012}.v1-agreement-card.v1-card--agreed{border-color:#b8d4ef;background:#ebf3fb}.v1-agreement-card.v1-card--invalid{border-color:#fecaca;background:#fff5f5}.v1-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#eef1f4;border:1px solid #d3dce3;display:flex;align-items:center;justify-content:center;color:#4077ad}.v1-card--agreed .v1-card-icon{background:#d4e8f8;border-color:#b8d4ef}.v1-card-body{flex:1 1 auto;min-width:0}.v1-card-title{font-size:13px;font-weight:600;color:#0c1620;margin:0 0 2px;line-height:1.3}.v1-card-sub{font-size:11.5px;color:#6b7c8a;margin:0}.v1-agree-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:8px;font-size:12px;font-weight:600;font-family:inherit;border:1.5px solid #4077AD;color:#4077ad;background:transparent;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}.v1-agree-btn:hover{background:#4077ad;color:#fff}.v1-agree-btn.v1-agree-btn--done{background:#4077ad;border-color:#4077ad;color:#fff}.cp-email-display{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 12px;background:#eef1f4;border:1.5px solid #d3dce3;border-radius:99px;font-size:12.5px;color:#0c1620;font-weight:500}.cp-email-display svg{width:14px;height:14px;flex-shrink:0}.cp-email-display svg path{fill:#4077ad}.cp-account-not-found{display:flex;align-items:flex-start;gap:12px;margin-top:16px;padding:14px 16px;background:#fff5f5;border:1.5px solid #fecaca;border-radius:6px}.cp-anf-icon{flex-shrink:0;width:32px;height:32px;background:#dc35451a;border-radius:50%;display:flex;align-items:center;justify-content:center}.cp-anf-icon svg{width:16px;height:16px}.cp-anf-icon svg path{fill:#dc3545}.cp-anf-title{font-size:13px;font-weight:700;color:#b91c1c;margin:0 0 3px}.cp-anf-sub{font-size:12px;color:#dc3545;margin:0;line-height:1.5}.cp-anf-sub strong{font-weight:600}.cp-invalid-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#eef1f4;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;padding:24px}.cp-invalid-card{background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-invalid-card h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-invalid-card p{font-size:14px;color:#6b7c8a;line-height:1.7}.cp-invalid-icon{width:64px;height:64px;background:#dc35451a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-invalid-icon svg{width:32px;height:32px}.cp-invalid-icon svg path{fill:#dc3545}.tc-modal-dialog{max-width:min(780px,96vw)}.tc-modal{border-radius:20px!important;border:none!important;overflow:hidden;box-shadow:0 32px 72px #00000038,0 6px 20px #0000001a!important;height:min(720px,90vh);display:flex;flex-direction:column}.tc-modal-header{display:flex;align-items:center;gap:13px;padding:20px 24px;background:#4077ad;border-bottom:none;flex-shrink:0}.tc-modal-header .tc-header-icon{width:38px;height:38px;background:#ffffff1f;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#93c5fd;flex-shrink:0}.tc-modal-header .tc-modal-title{font-size:16px;font-weight:700;color:#fff;margin:0;flex:1}.tc-modal-close{flex-shrink:0;background:#ffffff1f;border:none;border-radius:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#fffc;cursor:pointer;transition:background .15s,color .15s}.tc-modal-close:hover{background:#ffffff38;color:#fff}.tc-modal-body{flex:1 1 auto;overflow-y:auto;padding:26px 32px;background:#fff;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.tc-modal-body::-webkit-scrollbar{width:5px}.tc-modal-body::-webkit-scrollbar-track{background:transparent}.tc-modal-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}.tc-modal-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tc-modal-footer{display:flex;justify-content:flex-end;align-items:center;padding:14px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.tc-btn{font-size:13.5px;font-weight:600;font-family:inherit;padding:9px 24px;border-radius:10px;border:none;cursor:pointer;transition:background .15s ease}.tc-btn.tc-btn-close{background:#4077ad;color:#fff}.tc-btn.tc-btn-close:hover{background:#335f8a}.cp-error{font-size:11.5px;color:#dc3545;margin-top:2px}.cp-terms-error{margin-top:4px}.cp-submit-error{margin-bottom:12px;font-size:13px;text-align:center}.cp-loading-hint{display:flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;margin-top:4px}.cp-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;margin-top:22px;background:#4077ad;border:none;border-radius:6px;font-size:14px;font-weight:700;letter-spacing:.4px;color:#fff;cursor:pointer;text-decoration:none;transition:background .15s,transform .1s;font-family:inherit}.cp-btn:hover:not(:disabled){background:#335f8a}.cp-btn:active:not(:disabled){transform:scale(.99)}.cp-btn:disabled{opacity:.65;cursor:not-allowed}.cp-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:cp-spin .7s linear infinite}.cp-spinner:not(.cp-spinner-btn){border-color:#4077ad4d;border-top-color:#4077ad}@keyframes cp-spin{to{transform:rotate(360deg)}}.cp-success-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#eef1f4;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;padding:24px}.cp-success-card{background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-success-card h2{font-size:24px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-success-card p{font-size:14px;color:#6b7c8a;line-height:1.7;margin-bottom:28px}.cp-success-icon{width:64px;height:64px;background:#28a7451a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-success-icon svg{width:32px;height:32px}.cp-success-icon svg path{fill:#28a745}.cp-terms{display:flex;align-items:flex-start;gap:10px;margin:22px 0 4px}.cp-terms input[type=checkbox]{margin-top:2px;width:15px;height:15px;flex-shrink:0;accent-color:#4077AD;cursor:pointer}.cp-terms label{font-size:12.5px;color:#6b7c8a;line-height:1.6;cursor:pointer;margin:0}.cp-terms label a{color:#4077ad;text-decoration:underline;font-weight:600}.cp-terms label a:hover{color:#335f8a}.cp-reset-toggle{margin:6px 0 18px;padding:14px 16px;background:#f0f7ff;border:1.5px solid #b8d4ef;border-radius:6px}.cp-toggle-label{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#0c1620;cursor:pointer;margin:0}.cp-toggle-switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0}.cp-toggle-switch input{opacity:0;width:0;height:0;position:absolute}.cp-toggle-switch input:checked+.cp-toggle-knob{background:#4077ad}.cp-toggle-switch input:checked+.cp-toggle-knob:before{transform:translate(16px)}.cp-toggle-knob{position:absolute;inset:0;background:#d3dce3;border-radius:22px;transition:background .2s;cursor:pointer}.cp-toggle-knob:before{content:\"\";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px #0003}.cp-toggle-hint{font-size:11.5px;color:#6b7c8a;margin:6px 0 0}.cp-upload-wrap{display:flex;align-items:stretch}.cp-upload-wrap .cp-upload-hidden{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.cp-upload-wrap .cp-upload-text{flex:1;border-radius:6px 0 0 6px!important;cursor:pointer;min-width:0}.cp-upload-btn{flex-shrink:0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#eef1f4;border:1.5px solid #d3dce3;border-left:none;border-radius:0 6px 6px 0;cursor:pointer;transition:background .15s}.cp-upload-btn:hover{background:#dfe4ea}.cp-upload-btn svg{width:18px;height:18px}.cp-upload-btn svg path{fill:#4077ad}.cp-upload-hint{display:block;font-size:11px;color:#6b7c8a;margin-top:4px}\n"] }]
+            args: [{ selector: 'app-claim-process', standalone: false, template: "<h2 class=\"sr-only\">Claim Your Account</h2>\r\n\r\n<!-- \u2500\u2500\u2500 No Email Error \u2500\u2500\u2500 -->\r\n<div *ngIf=\"noEmailError\" class=\"cp-invalid-page\">\r\n  <div class=\"cp-invalid-card\">\r\n    <div class=\"cp-invalid-icon\">\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\r\n    </div>\r\n    <h2>Invalid Access Link</h2>\r\n    <p>This page requires a valid invitation link. Please use the link from your invitation email to claim your account.</p>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Success State \u2500\u2500\u2500 -->\r\n<div *ngIf=\"submitSuccess\" class=\"cp-success-page\">\r\n  <div class=\"cp-success-card\">\r\n    <div class=\"cp-success-icon\">\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n    </div>\r\n    <h2>Account Claimed!</h2>\r\n    <p>Your account has been successfully activated. You can now sign in and start using the platform.</p>\r\n    <a [href]=\"libConfig?.dashboardUrl || '#'\" class=\"cp-btn\">Go to Dashboard</a>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Main Layout \u2500\u2500\u2500 -->\r\n<div *ngIf=\"!noEmailError && !submitSuccess\" class=\"cp-page\">\r\n\r\n  <!-- Left Panel -->\r\n  <aside class=\"cp-left\">\r\n    <div class=\"cp-left-inner\">\r\n\r\n      <!-- Dynamic logo from privacyAndTerms -->\r\n      <div class=\"cp-logo\">\r\n        <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\"\r\n          [alt]=\"privacyAndTerms?.companyName || 'Company Logo'\" class=\"cp-logo-img\" />\r\n        <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-logo-fallback\">\r\n          {{ privacyAndTerms?.companyName }}\r\n        </span>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Scenario: Account Found (authenticated) \u2500\u2500 -->\r\n      <ng-container *ngIf=\"isAuthenticated\">\r\n        <div class=\"cp-left-hero\">\r\n          <div class=\"cp-left-badge cp-left-badge--found\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n            Account Verified\r\n          </div>\r\n          <h1>Welcome back, <span class=\"cp-hero-brand\">{{ existingUserData?.firstName || privacyAndTerms?.companyName }}</span></h1>\r\n          <p>Your identity has been verified. Your profile and account history are intact \u2014 click to jump straight into your dashboard.</p>\r\n        </div>\r\n        <ul class=\"cp-benefits\">\r\n          <li>\r\n            <span class=\"cp-benefit-icon cp-benefit-icon--green\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Profile Preserved</strong>\r\n              <span>Your settings, history, and connections are all intact and ready to use.</span>\r\n            </div>\r\n          </li>\r\n          <li>\r\n            <span class=\"cp-benefit-icon cp-benefit-icon--green\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Verified &amp; Secure</strong>\r\n              <span>Your account was verified through a secure multi-step process.</span>\r\n            </div>\r\n          </li>\r\n          <li>\r\n            <span class=\"cp-benefit-icon cp-benefit-icon--green\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Instant Dashboard Access</strong>\r\n              <span>One click and you're back on the platform, exactly where you left off.</span>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n      </ng-container>\r\n\r\n      <!-- \u2500\u2500 Scenario: Activation (new user / claim flow) \u2500\u2500 -->\r\n      <ng-container *ngIf=\"!isAuthenticated\">\r\n        <div class=\"cp-left-hero\">\r\n          <div class=\"cp-left-badge\">Account Activation</div>\r\n          <h1>Welcome to <span class=\"cp-hero-brand\">{{ privacyAndTerms?.companyName }}</span></h1>\r\n          <p>Your account is ready. Complete this short form to set your credentials and gain full access to the platform's tools, programs, and services.</p>\r\n        </div>\r\n        <ul class=\"cp-benefits\">\r\n          <li>\r\n            <span class=\"cp-benefit-icon\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Secure &amp; Encrypted</strong>\r\n              <span>Your information is protected end-to-end and handled per our Privacy Policy.</span>\r\n            </div>\r\n          </li>\r\n          <li>\r\n            <span class=\"cp-benefit-icon\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Instant Access</strong>\r\n              <span>Once activated, get immediate access to programs, rosters, and service requests.</span>\r\n            </div>\r\n          </li>\r\n          <li>\r\n            <span class=\"cp-benefit-icon\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Team &amp; Client Network</strong>\r\n              <span>Connect with certified professionals nationwide and manage your team from one dashboard.</span>\r\n            </div>\r\n          </li>\r\n          <li>\r\n            <span class=\"cp-benefit-icon\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Complete Your Profile</strong>\r\n              <span>A complete profile unlocks all features and makes you visible to clients and partners.</span>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n      </ng-container>\r\n\r\n      <!-- Dynamic contact info -->\r\n      <div class=\"cp-left-contact\" *ngIf=\"privacyAndTerms?.contactEmail || privacyAndTerms?.phone\">\r\n        <a *ngIf=\"privacyAndTerms?.contactEmail\"\r\n          [href]=\"'mailto:' + privacyAndTerms.contactEmail\" class=\"cp-contact-link\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\"/></svg>\r\n          {{ privacyAndTerms?.contactEmail }}\r\n        </a>\r\n        <a *ngIf=\"privacyAndTerms?.phone\"\r\n          [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-contact-link\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\"/></svg>\r\n          {{ privacyAndTerms?.phone }}\r\n        </a>\r\n      </div>\r\n\r\n      <!-- Dynamic website link -->\r\n      <p class=\"cp-left-footnote\">\r\n        <a [href]=\"privacyAndTerms?.websiteurl || '#'\" target=\"_blank\" rel=\"noopener\">\r\n          Visit {{ privacyAndTerms?.companyName }}\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\"/></svg>\r\n        </a>\r\n      </p>\r\n\r\n    </div>\r\n  </aside>\r\n\r\n  <!-- Right Panel \u2014 Form -->\r\n  <main class=\"cp-right\">\r\n\r\n    <!-- Mobile-only top bar (hidden on desktop where left panel is visible) -->\r\n    <div class=\"cp-mobile-bar\">\r\n      <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\"\r\n        [alt]=\"privacyAndTerms?.companyName\" class=\"cp-mobile-logo\" />\r\n      <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-mobile-company\">\r\n        {{ privacyAndTerms?.companyName }}\r\n      </span>\r\n    </div>\r\n\r\n    <!-- \u2500\u2500 Account Found Preview (authenticated users) \u2500\u2500 -->\r\n    <div *ngIf=\"isAuthenticated\" class=\"cf-wrap\">\r\n      <div class=\"cf-badge\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n        Account Found\r\n      </div>\r\n      <h2 class=\"cf-heading\">Welcome back!</h2>\r\n      <p class=\"cf-sub\">We found your account. Here's a summary of your profile before you continue.</p>\r\n\r\n      <div class=\"cf-card\">\r\n        <div class=\"cf-avatar\">{{ getInitials() }}</div>\r\n        <div class=\"cf-info-grid\">\r\n          <div class=\"cf-info-row\">\r\n            <span class=\"cf-info-label\">Full Name</span>\r\n            <span class=\"cf-info-value\">{{ existingUserData?.firstName }} {{ existingUserData?.lastName }}</span>\r\n          </div>\r\n          <div class=\"cf-info-row\">\r\n            <span class=\"cf-info-label\">Email</span>\r\n            <span class=\"cf-info-value\">{{ userEmail }}</span>\r\n          </div>\r\n          <div class=\"cf-info-row\" *ngIf=\"existingUserData?.phone\">\r\n            <span class=\"cf-info-label\">Phone</span>\r\n            <span class=\"cf-info-value\">{{ existingUserData.phone }}</span>\r\n          </div>\r\n          <div class=\"cf-info-row\" *ngIf=\"existingUserData?.userRoles?.length\">\r\n            <span class=\"cf-info-label\">Role</span>\r\n            <span class=\"cf-info-value\">\r\n              <span class=\"cf-role-badge\">{{ existingUserData.userRoles[0]?.roleName }}</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"cf-info-row\" *ngIf=\"existingUserData?.city || existingUserData?.state\">\r\n            <span class=\"cf-info-label\">Location</span>\r\n            <span class=\"cf-info-value\">\r\n              {{ existingUserData?.city }}{{ existingUserData?.city && existingUserData?.state ? ', ' : '' }}{{ existingUserData?.state }}\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <a [href]=\"libConfig?.dashboardUrl || '#'\" class=\"cf-access-btn\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M10 6v2H5v11h11v-5h2v7H3V6h7zm11-3v8l-3.36-3.36-5.3 5.31-1.41-1.42 5.3-5.3L13 3h8z\"/></svg>\r\n        Click to Access Your Account\r\n      </a>\r\n\r\n      <p class=\"cf-not-you\">\r\n        Not you or wrong account?\r\n        <a *ngIf=\"privacyAndTerms?.contactEmail\" [href]=\"'mailto:' + privacyAndTerms.contactEmail\">Contact support</a>\r\n        <span *ngIf=\"!privacyAndTerms?.contactEmail\">Contact your administrator.</span>\r\n      </p>\r\n    </div>\r\n\r\n    <!-- \u2500\u2500 Claim / Activation Form \u2500\u2500 -->\r\n    <div *ngIf=\"!isAuthenticated\" class=\"cp-form-wrap\">\r\n\r\n      <div class=\"cp-form-header\">\r\n        <h2>Activate Your Account</h2>\r\n        <p>Your {{ privacyAndTerms?.companyName }} account is ready. Set your details below to complete activation.</p>\r\n        <!-- Email display (read-only) -->\r\n        <div class=\"cp-email-display\" *ngIf=\"userEmail\">\r\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\"/></svg>\r\n          <span>{{ userEmail }}</span>\r\n        </div>\r\n        <div class=\"cp-loading-hint\" *ngIf=\"isLoadingUser\">\r\n          <span class=\"cp-spinner\"></span> Loading account details\u2026\r\n        </div>\r\n        <div class=\"cp-error\" *ngIf=\"userLookupError\">{{ userLookupError }}</div>\r\n\r\n        <!-- Account not found in Auth0 -->\r\n        <div class=\"cp-account-not-found\" *ngIf=\"accountNotFound\">\r\n          <div class=\"cp-anf-icon\">\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\r\n          </div>\r\n          <div>\r\n            <p class=\"cp-anf-title\">Account Not Found</p>\r\n            <p class=\"cp-anf-sub\">No account is linked to <strong>{{ userEmail }}</strong>. Please contact support or use the link from your invitation email.</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <form [formGroup]=\"claimForm\" (ngSubmit)=\"onSubmit()\" novalidate *ngIf=\"!accountNotFound\">\r\n\r\n        <!-- \u2500\u2500\u2500 Contact Information \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\"/></svg>\r\n          Contact Information\r\n        </div>\r\n\r\n        <!-- Email \u2014 auto-filled, read-only -->\r\n        <div class=\"cp-field\">\r\n          <label for=\"cpEmail\">Email Address</label>\r\n          <div class=\"cp-readonly-wrap\">\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\"/></svg>\r\n            <input type=\"email\" id=\"cpEmail\" formControlName=\"email\" readonly\r\n              class=\"cp-input-readonly\" autocomplete=\"email\" />\r\n          </div>\r\n          <small class=\"cp-autofill-note\">Auto-filled from your invitation</small>\r\n        </div>\r\n\r\n        <div class=\"cp-row\">\r\n          <div class=\"cp-field\">\r\n            <label for=\"firstName\">First Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" id=\"firstName\" formControlName=\"firstName\"\r\n              placeholder=\"Jane\"\r\n              [class.is-invalid]=\"f['firstName'].invalid && f['firstName'].touched\"\r\n              autocomplete=\"given-name\" />\r\n            <div class=\"cp-error\" *ngIf=\"f['firstName'].invalid && f['firstName'].touched\">First name is required</div>\r\n          </div>\r\n          <div class=\"cp-field\">\r\n            <label for=\"lastName\">Last Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" id=\"lastName\" formControlName=\"lastName\"\r\n              placeholder=\"Doe\"\r\n              [class.is-invalid]=\"f['lastName'].invalid && f['lastName'].touched\"\r\n              autocomplete=\"family-name\" />\r\n            <div class=\"cp-error\" *ngIf=\"f['lastName'].invalid && f['lastName'].touched\">Last name is required</div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"cp-field\">\r\n          <label for=\"phone\">Phone<span class=\"req\">*</span></label>\r\n          <input type=\"tel\" id=\"phone\" formControlName=\"phone\"\r\n            placeholder=\"(555) 123-4567\" maxlength=\"14\"\r\n            [class.is-invalid]=\"f['phone'].invalid && f['phone'].touched\"\r\n            (input)=\"formatPhone($event)\" autocomplete=\"tel\" />\r\n          <div class=\"cp-error\" *ngIf=\"f['phone'].invalid && f['phone'].touched\">Phone number is required</div>\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Address \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 14.5 9 2.5 2.5 0 0 1 12 11.5Z\"/></svg>\r\n          Address\r\n        </div>\r\n\r\n        <div class=\"cp-field\">\r\n          <label for=\"address\">Street Address</label>\r\n          <input type=\"text\" id=\"address\" formControlName=\"address\"\r\n            placeholder=\"123 Main Street\"\r\n            ngx-google-places-autocomplete [options]=\"googleOptions\"\r\n            (onAddressChange)=\"onAddressChange($event)\"\r\n            autocomplete=\"off\" />\r\n        </div>\r\n\r\n        <div class=\"cp-row cp-row-triple\">\r\n          <div class=\"cp-field\">\r\n            <label for=\"city\">City</label>\r\n            <input type=\"text\" id=\"city\" formControlName=\"city\" placeholder=\"Orlando\" />\r\n          </div>\r\n          <div class=\"cp-field\">\r\n            <label for=\"state\">State</label>\r\n            <input type=\"text\" id=\"state\" formControlName=\"state\" placeholder=\"FL\" maxlength=\"2\" />\r\n          </div>\r\n          <div class=\"cp-field\">\r\n            <label for=\"zip\">Zip Code</label>\r\n            <input type=\"text\" id=\"zip\" formControlName=\"zip\" placeholder=\"32801\" inputmode=\"numeric\" maxlength=\"5\" />\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Account Setup \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\"/></svg>\r\n          Account Setup\r\n        </div>\r\n\r\n        <!-- Role -->\r\n        <div class=\"cp-field\">\r\n          <label for=\"role\">Role<span class=\"req\">*</span></label>\r\n          <div class=\"cp-select\">\r\n            <select id=\"role\" formControlName=\"role\"\r\n              [class.is-invalid]=\"f['role'].invalid && f['role'].touched\">\r\n              <option value=\"\" disabled>Select your role</option>\r\n              <option *ngFor=\"let r of roles\" [value]=\"r.id\">{{ r.name }}</option>\r\n            </select>\r\n          </div>\r\n          <div class=\"cp-error\" *ngIf=\"f['role'].invalid && f['role'].touched\">Please select a role</div>\r\n        </div>\r\n\r\n        <!-- Password block \u2014 hidden while loading to avoid flash for existing users -->\r\n        <ng-container *ngIf=\"!isLoadingUser\">\r\n\r\n          <!-- Reset toggle: only shown for existing users who already have a password -->\r\n          <div class=\"cp-reset-toggle\" *ngIf=\"userHasExistingDetails\">\r\n            <label class=\"cp-toggle-label\">\r\n              <span class=\"cp-toggle-switch\">\r\n                <input type=\"checkbox\" [checked]=\"resetPasswordEnabled\" (change)=\"toggleResetPassword()\">\r\n                <span class=\"cp-toggle-knob\"></span>\r\n              </span>\r\n              Reset Password\r\n            </label>\r\n            <p class=\"cp-toggle-hint\">Your account already has a password set. Enable this to change it.</p>\r\n          </div>\r\n\r\n          <!-- New-user hint \u2014 shown only when no existing details (password is required) -->\r\n          <div class=\"cp-new-user-hint\" *ngIf=\"!userHasExistingDetails\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2z\"/></svg>\r\n            Create a password for your new account\r\n          </div>\r\n\r\n          <!-- Password fields -->\r\n          <div class=\"cp-row\" *ngIf=\"showPasswordFields\">\r\n          <div class=\"cp-field\">\r\n            <label for=\"password\">Password<span class=\"req\">*</span></label>\r\n            <div class=\"cp-pw-wrap\">\r\n              <input [type]=\"showPassword ? 'text' : 'password'\" id=\"password\" formControlName=\"password\"\r\n                placeholder=\"Min. 8 characters\"\r\n                [class.is-invalid]=\"f['password'].invalid && f['password'].touched\"\r\n                autocomplete=\"new-password\" />\r\n              <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showPassword = !showPassword\"\r\n                [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\">\r\n                <svg *ngIf=\"!showPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>\r\n                <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"/></svg>\r\n              </button>\r\n            </div>\r\n            <div class=\"cp-error\" *ngIf=\"f['password'].invalid && f['password'].touched\">\r\n              <span *ngIf=\"f['password'].errors?.['required']\">Password is required</span>\r\n              <span *ngIf=\"f['password'].errors?.['minlength']\">Password must be at least 8 characters</span>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"cp-field\">\r\n            <label for=\"confirmPassword\">Confirm Password<span class=\"req\">*</span></label>\r\n            <div class=\"cp-pw-wrap\">\r\n              <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPassword\" formControlName=\"confirmPassword\"\r\n                placeholder=\"Repeat password\"\r\n                [class.is-invalid]=\"(f['confirmPassword'].invalid && f['confirmPassword'].touched) || (claimForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched)\"\r\n                autocomplete=\"new-password\" />\r\n              <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showConfirmPassword = !showConfirmPassword\"\r\n                [attr.aria-label]=\"showConfirmPassword ? 'Hide password' : 'Show password'\">\r\n                <svg *ngIf=\"!showConfirmPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>\r\n                <svg *ngIf=\"showConfirmPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"/></svg>\r\n              </button>\r\n            </div>\r\n            <div class=\"cp-error\" *ngIf=\"f['confirmPassword'].invalid && f['confirmPassword'].touched\">Confirm password is required</div>\r\n            <div class=\"cp-error\" *ngIf=\"claimForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched\">Passwords do not match</div>\r\n          </div>\r\n        </div>\r\n\r\n        </ng-container><!-- end password block -->\r\n\r\n        <!-- \u2500\u2500\u2500 Business Information \u2500\u2500\u2500 -->\r\n        <ng-container *ngIf=\"isBusinessRole\">\r\n          <div class=\"cp-section-title\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z\"/></svg>\r\n            Business Information\r\n          </div>\r\n\r\n          <div class=\"cp-row\">\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessName\">Business Name<span class=\"req\">*</span></label>\r\n              <input type=\"text\" id=\"businessName\" formControlName=\"businessName\"\r\n                placeholder=\"Business Name\"\r\n                [class.is-invalid]=\"f['businessName'].invalid && f['businessName'].touched\" />\r\n              <div class=\"cp-error\" *ngIf=\"f['businessName'].invalid && f['businessName'].touched\">Business name is required</div>\r\n            </div>\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessEmail\">Business Email<span class=\"req\">*</span></label>\r\n              <input type=\"email\" id=\"businessEmail\" formControlName=\"businessEmail\"\r\n                placeholder=\"business@example.com\"\r\n                [class.is-invalid]=\"f['businessEmail'].invalid && f['businessEmail'].touched\" />\r\n              <div class=\"cp-error\" *ngIf=\"f['businessEmail'].invalid && f['businessEmail'].touched\">\r\n                <span *ngIf=\"f['businessEmail'].errors?.['required']\">Business email is required</span>\r\n                <span *ngIf=\"f['businessEmail'].errors?.['email']\">Enter a valid email</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"cp-field\">\r\n            <label for=\"businessAddress\">Business Address</label>\r\n            <input type=\"text\" id=\"businessAddress\" formControlName=\"businessAddress\"\r\n              placeholder=\"123 Business Street\"\r\n              ngx-google-places-autocomplete [options]=\"googleOptions\"\r\n              (onAddressChange)=\"onBusinessAddressChange($event)\"\r\n              autocomplete=\"off\" />\r\n          </div>\r\n\r\n          <div class=\"cp-row cp-row-triple\">\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessCity\">City</label>\r\n              <input type=\"text\" id=\"businessCity\" formControlName=\"businessCity\" placeholder=\"City\" />\r\n            </div>\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessState\">State</label>\r\n              <input type=\"text\" id=\"businessState\" formControlName=\"businessState\" placeholder=\"ST\" maxlength=\"2\" />\r\n            </div>\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessZip\">Zip</label>\r\n              <input type=\"text\" id=\"businessZip\" formControlName=\"businessZip\" placeholder=\"00000\" inputmode=\"numeric\" maxlength=\"5\" />\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Business Logo -->\r\n          <div class=\"cp-field\">\r\n            <label>Business Logo</label>\r\n            <div class=\"cp-upload-wrap\">\r\n              <input #cpLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\"\r\n                (change)=\"onBusinessLogoChange($event)\" class=\"cp-upload-hidden\" />\r\n              <input type=\"text\" class=\"cp-upload-text\" [value]=\"businessLogoName\" readonly\r\n                placeholder=\"Click to upload business logo\" (click)=\"cpLogoInput.click()\" />\r\n              <button type=\"button\" class=\"cp-upload-btn\" (click)=\"cpLogoInput.click()\" aria-label=\"Upload logo\">\r\n                <svg viewBox=\"0 0 24 24\"><path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\"/></svg>\r\n              </button>\r\n            </div>\r\n            <small class=\"cp-upload-hint\">Allowed formats: PNG, JPG, JPEG</small>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <!-- \u2500\u2500\u2500 Profile Picture \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\"/></svg>\r\n          Profile Picture\r\n        </div>\r\n        <div class=\"cp-field\">\r\n          <label>Profile Picture<span class=\"req\">*</span></label>\r\n          <div class=\"cp-upload-wrap\">\r\n            <input #cpProfileInput type=\"file\" accept=\".png,.jpg,.jpeg\"\r\n              (change)=\"onProfileFileChange($event)\" class=\"cp-upload-hidden\" />\r\n            <input type=\"text\" class=\"cp-upload-text\" [value]=\"profileFileName\" readonly\r\n              placeholder=\"Click to upload profile picture\" (click)=\"cpProfileInput.click()\" />\r\n            <button type=\"button\" class=\"cp-upload-btn\" (click)=\"cpProfileInput.click()\" aria-label=\"Upload profile picture\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\"/></svg>\r\n            </button>\r\n          </div>\r\n          <small class=\"cp-upload-hint\">Allowed formats: PNG, JPG, JPEG</small>\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Terms & Privacy \u2500\u2500\u2500 -->\r\n        <div class=\"cp-terms\">\r\n          <input type=\"checkbox\" id=\"agree\"\r\n            [checked]=\"model.acceptTerms && model.privacy\"\r\n            (change)=\"onTermsCheckboxChange($event)\" />\r\n          <label for=\"agree\">I accept the\r\n            <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Terms and Conditions', $event)\">Terms &amp; Conditions</a>\r\n            and\r\n            <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Privacy Statement', $event)\">Privacy Policy</a>,\r\n            and confirm I am authorized to activate this account.\r\n          </label>\r\n        </div>\r\n        <div class=\"cp-error cp-terms-error\"\r\n          *ngIf=\"(!model.acceptTerms || !model.privacy) && validatePage === 1\">\r\n          You must agree to both Terms and Conditions and Privacy Statement to continue\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Submit \u2500\u2500\u2500 -->\r\n        <div class=\"cp-error cp-submit-error\" *ngIf=\"submitError\">{{ submitError }}</div>\r\n\r\n        <button type=\"submit\" class=\"cp-btn\" [disabled]=\"isSubmitting\">\r\n          <span *ngIf=\"isSubmitting\" class=\"cp-spinner cp-spinner-btn\"></span>\r\n          <span>{{ isSubmitting ? 'Activating\u2026' : 'Claim My Account' }}</span>\r\n        </button>\r\n\r\n      </form>\r\n    </div>\r\n  </main>\r\n\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Terms & Privacy Modal (read-only) \u2500\u2500\u2500 -->\r\n<ng-template #termsAndConditionsModel>\r\n  <div class=\"modal-dialog modal-dialog-centered tc-modal-dialog\">\r\n    <div class=\"modal-content tc-modal\">\r\n\r\n      <div class=\"tc-modal-header\">\r\n        <div class=\"tc-header-icon\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"/>\r\n            <polyline points=\"14 2 14 8 20 8\"/>\r\n            <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/>\r\n            <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/>\r\n          </svg>\r\n        </div>\r\n        <h4 class=\"tc-modal-title\">{{ termsAndConditionTitle }}</h4>\r\n        <button type=\"button\" class=\"tc-modal-close\" (click)=\"closeModal()\" aria-label=\"Close\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\r\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"tc-modal-body\">\r\n        <ng-container *ngIf=\"termsAndConditionTitle === 'Terms and Conditions'\">\r\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-terms-conditions>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"termsAndConditionTitle !== 'Terms and Conditions'\">\r\n          <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-privacy-policy>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"tc-modal-footer\">\r\n        <button type=\"button\" class=\"tc-btn tc-btn-close\" (click)=\"closeModal()\">\r\n          Close\r\n        </button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.cp-page{display:flex;min-height:100vh;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0c1620}@media (max-width: 860px){.cp-page{flex-direction:column}}.cp-left{width:40%;min-width:300px;background:#fff;border-right:1px solid #e2eaf2;display:flex;flex-direction:column;padding:44px 40px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-left{display:none}}.cp-left-inner{display:flex;flex-direction:column;height:100%}.cp-logo{margin-bottom:36px}.cp-logo-img{max-height:48px;max-width:200px;object-fit:contain;display:block}.cp-logo-fallback{font-size:20px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-left-hero{margin-bottom:32px}.cp-left-hero h1{font-size:22px;font-weight:800;color:#0c1620;line-height:1.3;margin:8px 0 10px}.cp-left-hero p{font-size:13px;color:#6b7c8a;line-height:1.75}.cp-hero-brand{color:#4077ad}.cp-left-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#4077ad;background:#4077ad14;border:1px solid rgba(64,119,173,.2);padding:4px 10px;border-radius:99px}.cp-benefits{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;gap:16px}.cp-benefits li{display:flex;align-items:flex-start;gap:12px}.cp-benefit-icon{flex-shrink:0;width:36px;height:36px;background:#4077ad12;border:1px solid rgba(64,119,173,.14);border-radius:10px;display:flex;align-items:center;justify-content:center}.cp-benefit-icon svg{width:17px;height:17px}.cp-benefit-icon svg path{fill:#4077ad}.cp-benefit-text{display:flex;flex-direction:column;gap:2px;padding-top:2px}.cp-benefit-text strong{font-size:12.5px;font-weight:700;color:#0c1620;display:block}.cp-benefit-text span{font-size:11.5px;color:#6b7c8a;line-height:1.6}.cp-left-contact{display:flex;flex-direction:column;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid #e8edf3}.cp-contact-link{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-contact-link svg{width:14px;height:14px;flex-shrink:0}.cp-contact-link svg path{fill:currentColor}.cp-contact-link:hover{color:#4077ad}.cp-left-footnote{margin-top:18px;font-size:12.5px}.cp-left-footnote a{display:inline-flex;align-items:center;gap:5px;color:#4077ad;text-decoration:none;font-weight:600;transition:color .15s}.cp-left-footnote a svg{width:12px;height:12px}.cp-left-footnote a svg path{fill:#4077ad}.cp-left-footnote a:hover{color:#335f8a;text-decoration:underline}.cp-mobile-bar{display:none;align-items:center;justify-content:center;padding:16px 24px;background:#fff;border-bottom:1px solid #e2eaf2;margin-bottom:0}@media (max-width: 860px){.cp-mobile-bar{display:flex}}.cp-mobile-logo{max-height:36px;max-width:160px;object-fit:contain}.cp-mobile-company{font-size:18px;font-weight:800;color:#4077ad}.cp-right{flex:1;background:#eef1f4;display:flex;flex-direction:column;align-items:center;padding:48px 24px 64px;overflow-y:auto;min-width:0}@media (max-width: 860px){.cp-right{padding:0 0 48px}}.cp-form-wrap{width:100%;max-width:580px;background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201a;padding:40px 44px 48px;margin-top:48px}@media (max-width: 860px){.cp-form-wrap{border-radius:0;box-shadow:none;border-top:1px solid #e2eaf2;margin-top:0;padding:32px 20px 48px;max-width:100%}}@media (max-width: 480px){.cp-form-wrap{padding:24px 16px 40px}}.cp-form-header{margin-bottom:30px}.cp-form-header h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:6px}.cp-form-header p{font-size:13px;color:#6b7c8a;line-height:1.6}.cp-section-title{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#0c1620;padding-bottom:10px;margin-bottom:18px;margin-top:26px;border-bottom:2px solid #4077AD;display:flex;align-items:center;gap:8px}.cp-section-title svg{width:14px;height:14px;flex-shrink:0}.cp-section-title svg path{fill:#4077ad}.cp-section-title:first-of-type{margin-top:0}.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.cp-row.cp-row-triple{grid-template-columns:2fr 1fr 1fr}@media (max-width: 560px){.cp-row{grid-template-columns:1fr}.cp-row.cp-row-triple{grid-template-columns:1fr 1fr}}@media (max-width: 400px){.cp-row.cp-row-triple{grid-template-columns:1fr}}.cp-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width:0}.cp-field.cp-field-with-btn{margin-bottom:0}.cp-field label{font-size:11.5px;font-weight:600;color:#3a4a57}.cp-field label .req{color:#4077ad;margin-left:2px}.cp-field input,.cp-field select{box-sizing:border-box;height:42px;border:1.5px solid #d3dce3;border-radius:6px;padding:0 12px;font-size:13.5px;color:#0c1620;background:#fff;width:100%;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;font-family:inherit}.cp-field input::placeholder,.cp-field select::placeholder{color:#aab8c2}.cp-field input:focus,.cp-field select:focus{outline:none;border-color:#4077ad;box-shadow:0 0 0 3px #4077ad26}.cp-field input.is-invalid,.cp-field select.is-invalid{border-color:#dc3545}.cp-field input.is-invalid:focus,.cp-field select.is-invalid:focus{box-shadow:0 0 0 3px #dc354526}.cp-input-row{display:flex;gap:8px}.cp-input-row input{flex:1}.cp-lookup-btn{flex-shrink:0;height:42px;padding:0 18px;background:#4077ad;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s;font-family:inherit}.cp-lookup-btn:hover:not(:disabled){background:#335f8a}.cp-lookup-btn:disabled{opacity:.6;cursor:not-allowed}.cp-select{position:relative}.cp-select:after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #6b7c8a;pointer-events:none}.cp-select select{cursor:pointer;padding-right:32px}.cp-pw-wrap{position:relative}.cp-pw-wrap input{padding-right:42px}.cp-pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;color:#6b7c8a}.cp-pw-toggle svg{width:18px;height:18px}.cp-pw-toggle svg path{fill:#6b7c8a}.cp-pw-toggle:hover svg path{fill:#4077ad}.cp-agreements{display:flex;flex-direction:column;gap:10px;margin:24px 0 4px}.v1-agreement-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;border:1.5px solid #d3dce3;background:#fff;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #0000000a}.v1-agreement-card:hover{border-color:#bac8d3;box-shadow:0 2px 8px #00000012}.v1-agreement-card.v1-card--agreed{border-color:#b8d4ef;background:#ebf3fb}.v1-agreement-card.v1-card--invalid{border-color:#fecaca;background:#fff5f5}.v1-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#eef1f4;border:1px solid #d3dce3;display:flex;align-items:center;justify-content:center;color:#4077ad}.v1-card--agreed .v1-card-icon{background:#d4e8f8;border-color:#b8d4ef}.v1-card-body{flex:1 1 auto;min-width:0}.v1-card-title{font-size:13px;font-weight:600;color:#0c1620;margin:0 0 2px;line-height:1.3}.v1-card-sub{font-size:11.5px;color:#6b7c8a;margin:0}.v1-agree-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:8px;font-size:12px;font-weight:600;font-family:inherit;border:1.5px solid #4077AD;color:#4077ad;background:transparent;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}.v1-agree-btn:hover{background:#4077ad;color:#fff}.v1-agree-btn.v1-agree-btn--done{background:#4077ad;border-color:#4077ad;color:#fff}.cp-email-display{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 12px;background:#eef1f4;border:1.5px solid #d3dce3;border-radius:99px;font-size:12.5px;color:#0c1620;font-weight:500}.cp-email-display svg{width:14px;height:14px;flex-shrink:0}.cp-email-display svg path{fill:#4077ad}.cp-account-not-found{display:flex;align-items:flex-start;gap:12px;margin-top:16px;padding:14px 16px;background:#fff5f5;border:1.5px solid #fecaca;border-radius:6px}.cp-anf-icon{flex-shrink:0;width:32px;height:32px;background:#dc35451a;border-radius:50%;display:flex;align-items:center;justify-content:center}.cp-anf-icon svg{width:16px;height:16px}.cp-anf-icon svg path{fill:#dc3545}.cp-anf-title{font-size:13px;font-weight:700;color:#b91c1c;margin:0 0 3px}.cp-anf-sub{font-size:12px;color:#dc3545;margin:0;line-height:1.5}.cp-anf-sub strong{font-weight:600}.cp-invalid-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#eef1f4;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;padding:24px}.cp-invalid-card{background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-invalid-card h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-invalid-card p{font-size:14px;color:#6b7c8a;line-height:1.7}.cp-invalid-icon{width:64px;height:64px;background:#dc35451a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-invalid-icon svg{width:32px;height:32px}.cp-invalid-icon svg path{fill:#dc3545}.tc-modal-dialog{max-width:min(780px,96vw)}.tc-modal{border-radius:20px!important;border:none!important;overflow:hidden;box-shadow:0 32px 72px #00000038,0 6px 20px #0000001a!important;height:min(720px,90vh);display:flex;flex-direction:column}.tc-modal-header{display:flex;align-items:center;gap:13px;padding:20px 24px;background:#4077ad;border-bottom:none;flex-shrink:0}.tc-modal-header .tc-header-icon{width:38px;height:38px;background:#ffffff1f;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#93c5fd;flex-shrink:0}.tc-modal-header .tc-modal-title{font-size:16px;font-weight:700;color:#fff;margin:0;flex:1}.tc-modal-close{flex-shrink:0;background:#ffffff1f;border:none;border-radius:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#fffc;cursor:pointer;transition:background .15s,color .15s}.tc-modal-close:hover{background:#ffffff38;color:#fff}.tc-modal-body{flex:1 1 auto;overflow-y:auto;padding:26px 32px;background:#fff;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.tc-modal-body::-webkit-scrollbar{width:5px}.tc-modal-body::-webkit-scrollbar-track{background:transparent}.tc-modal-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}.tc-modal-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tc-modal-footer{display:flex;justify-content:flex-end;align-items:center;padding:14px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.tc-btn{font-size:13.5px;font-weight:600;font-family:inherit;padding:9px 24px;border-radius:10px;border:none;cursor:pointer;transition:background .15s ease}.tc-btn.tc-btn-close{background:#4077ad;color:#fff}.tc-btn.tc-btn-close:hover{background:#335f8a}.cp-error{font-size:11.5px;color:#dc3545;margin-top:2px}.cp-terms-error{margin-top:4px}.cp-submit-error{margin-bottom:12px;font-size:13px;text-align:center}.cp-loading-hint{display:flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;margin-top:4px}.cp-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;margin-top:22px;background:#4077ad;border:none;border-radius:6px;font-size:14px;font-weight:700;letter-spacing:.4px;color:#fff;cursor:pointer;text-decoration:none;transition:background .15s,transform .1s;font-family:inherit}.cp-btn:hover:not(:disabled){background:#335f8a}.cp-btn:active:not(:disabled){transform:scale(.99)}.cp-btn:disabled{opacity:.65;cursor:not-allowed}.cp-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:cp-spin .7s linear infinite}.cp-spinner:not(.cp-spinner-btn){border-color:#4077ad4d;border-top-color:#4077ad}@keyframes cp-spin{to{transform:rotate(360deg)}}.cp-success-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#eef1f4;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;padding:24px}.cp-success-card{background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-success-card h2{font-size:24px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-success-card p{font-size:14px;color:#6b7c8a;line-height:1.7;margin-bottom:28px}.cp-success-icon{width:64px;height:64px;background:#28a7451a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-success-icon svg{width:32px;height:32px}.cp-success-icon svg path{fill:#28a745}.cp-readonly-wrap{position:relative;display:flex;align-items:center}.cp-readonly-wrap svg{position:absolute;left:12px;width:15px;height:15px;flex-shrink:0;pointer-events:none}.cp-readonly-wrap svg path{fill:#4077ad}.cp-input-readonly{width:100%;box-sizing:border-box;height:42px;border:1.5px solid #d3dce3;border-radius:6px;padding:0 12px 0 36px;font-size:13.5px;color:#0c1620;background:#4077ad0a;cursor:default;font-family:inherit;font-weight:500}.cp-autofill-note{font-size:11px;color:#4077ad;margin-top:3px;display:flex;align-items:center;gap:4px}.cp-new-user-hint{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#4077ad;background:#4077ad0f;border:1px solid rgba(64,119,173,.18);border-radius:6px;padding:9px 13px;margin:6px 0 12px}.cp-new-user-hint svg{width:15px;height:15px;flex-shrink:0}.cp-new-user-hint svg path{fill:#4077ad}.cp-terms{display:flex;align-items:flex-start;gap:10px;margin:22px 0 4px}.cp-terms input[type=checkbox]{margin-top:2px;width:15px;height:15px;flex-shrink:0;accent-color:#4077AD;cursor:pointer}.cp-terms label{font-size:12.5px;color:#6b7c8a;line-height:1.6;cursor:pointer;margin:0}.cp-terms label a{color:#4077ad;text-decoration:underline;font-weight:600}.cp-terms label a:hover{color:#335f8a}.cp-reset-toggle{margin:6px 0 18px;padding:14px 16px;background:#f0f7ff;border:1.5px solid #b8d4ef;border-radius:6px}.cp-toggle-label{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#0c1620;cursor:pointer;margin:0}.cp-toggle-switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0}.cp-toggle-switch input{opacity:0;width:0;height:0;position:absolute}.cp-toggle-switch input:checked+.cp-toggle-knob{background:#4077ad}.cp-toggle-switch input:checked+.cp-toggle-knob:before{transform:translate(16px)}.cp-toggle-knob{position:absolute;inset:0;background:#d3dce3;border-radius:22px;transition:background .2s;cursor:pointer}.cp-toggle-knob:before{content:\"\";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px #0003}.cp-toggle-hint{font-size:11.5px;color:#6b7c8a;margin:6px 0 0}.cp-upload-wrap{display:flex;align-items:stretch}.cp-upload-wrap .cp-upload-hidden{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.cp-upload-wrap .cp-upload-text{flex:1;border-radius:6px 0 0 6px!important;cursor:pointer;min-width:0}.cp-upload-btn{flex-shrink:0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#eef1f4;border:1.5px solid #d3dce3;border-left:none;border-radius:0 6px 6px 0;cursor:pointer;transition:background .15s}.cp-upload-btn:hover{background:#dfe4ea}.cp-upload-btn svg{width:18px;height:18px}.cp-upload-btn svg path{fill:#4077ad}.cp-upload-hint{display:block;font-size:11px;color:#6b7c8a;margin-top:4px}.cp-left-badge--found{color:#166534;background:#22c55e1a;border-color:#22c55e47;gap:5px}.cp-left-badge--found svg{width:12px;height:12px;flex-shrink:0}.cp-left-badge--found svg path{fill:#16a34a}.cp-benefit-icon--green{background:#22c55e14;border-color:#22c55e2e}.cp-benefit-icon--green svg path{fill:#16a34a}.cf-wrap{width:100%;max-width:520px;margin:0 auto;padding:48px 32px 40px;display:flex;flex-direction:column;align-items:center;text-align:center}@media (max-width: 540px){.cf-wrap{padding:32px 20px 28px}}.cf-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:#166534;background:#22c55e1a;border:1px solid rgba(34,197,94,.28);padding:5px 14px;border-radius:99px;margin-bottom:20px}.cf-badge svg{width:13px;height:13px;flex-shrink:0}.cf-badge svg path{fill:#16a34a}.cf-heading{font-size:26px;font-weight:800;color:#0c1620;margin:0 0 8px;line-height:1.2}.cf-sub{font-size:13.5px;color:#6b7c8a;margin:0 0 28px;line-height:1.6;max-width:380px}.cf-card{width:100%;background:#fff;border:1.5px solid #d3dce3;border-radius:14px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:20px;box-shadow:0 4px 16px #0c16200f;margin-bottom:28px;text-align:left}.cf-avatar{width:72px;height:72px;border-radius:50%;background:#4077ad;color:#fff;font-size:24px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:1px;box-shadow:0 4px 12px #4077ad59}.cf-info-grid{width:100%;display:flex;flex-direction:column;gap:0;border:1px solid #e8edf3;border-radius:10px;overflow:hidden}.cf-info-row{display:flex;align-items:center;padding:11px 16px;gap:12px;border-bottom:1px solid #e8edf3}.cf-info-row:last-child{border-bottom:none}@media (max-width: 400px){.cf-info-row{flex-direction:column;align-items:flex-start;gap:2px}}.cf-info-label{font-size:11.5px;font-weight:700;color:#6b7c8a;text-transform:uppercase;letter-spacing:.8px;min-width:90px;flex-shrink:0}.cf-info-value{font-size:13.5px;font-weight:500;color:#0c1620;word-break:break-word}.cf-role-badge{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;color:#4077ad;background:#4077ad14;border:1px solid rgba(64,119,173,.2);padding:3px 10px;border-radius:99px;letter-spacing:.4px}.cf-access-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:0 24px;height:52px;background:#4077ad;color:#fff;border-radius:10px;font-size:14.5px;font-weight:700;text-decoration:none;letter-spacing:.3px;transition:background .15s,transform .1s,box-shadow .15s;box-shadow:0 4px 14px #4077ad59;margin-bottom:18px}.cf-access-btn svg{width:18px;height:18px;flex-shrink:0}.cf-access-btn svg path{fill:#fff}.cf-access-btn:hover{background:#335f8a;box-shadow:0 6px 18px #4077ad73;transform:translateY(-1px);color:#fff;text-decoration:none}.cf-access-btn:active{transform:scale(.99)}.cf-not-you{font-size:12px;color:#6b7c8a;margin:0}.cf-not-you a{color:#4077ad;text-decoration:underline;font-weight:600}.cf-not-you a:hover{color:#335f8a}\n"] }]
         }], ctorParameters: () => [{ type: i8.FormBuilder }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: UserDetailService }, { type: RolesService }, { type: i7.BsModalService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LIBRARY_CONFIG]