@idsoftsource/initial-process 2.5.5 → 2.5.7

package/fesm2022/idsoftsource-initial-process.mjs

@@ -36077,10 +36077,15 @@ class ClaimProcessComponent {
     claimService;
     modalService;
     tokenService;
+    authLogoutService;
     libConfig;
     claimForm;
     roles = [];
+    isInitializing = true;
     noEmailError = false;
+    showAccountNotFound = false;
+    isLookingUpAccount = false;
+    auth0UserData = null;
     userEmail = '';
     isLoadingUser = false;
     isSubmitting = false;
@@ -36095,6 +36100,8 @@ class ClaimProcessComponent {
     userHasExistingDetails = false;
     resetPasswordEnabled = false;
     showRoleSelect = true;
+    // Password toggles
+    setPasswordEnabled = false;
     // OTP password reset
     passwordStep = 1;
     otpValue = '';
@@ -36135,13 +36142,56 @@ class ClaimProcessComponent {
     get showPasswordFields() {
         return !this.userHasExistingDetails;
     }
-    constructor(fb, route, router, claimService, modalService, tokenService, libConfig) {
+    // ─── Sidebar section status getters ──────────────────────────────────────────
+    get sectionPersonalDone() {
+        if (!this.claimForm)
+            return false;
+        return this.f['firstName'].valid && this.f['lastName'].valid && this.f['phone'].valid;
+    }
+    get sectionAddressDone() {
+        if (!this.claimForm)
+            return false;
+        return !!(this.f['address'].value || this.f['city'].value || this.f['zip'].value);
+    }
+    get sectionRoleDone() {
+        if (!this.claimForm)
+            return false;
+        return this.f['role'].valid;
+    }
+    get sectionPasswordDone() {
+        if (this.userHasExistingDetails)
+            return !this.resetPasswordEnabled || this.passwordChangeSuccess;
+        return !this.setPasswordEnabled ||
+            (this.f['password'].valid && !this.claimForm?.errors?.['passwordMismatch']);
+    }
+    get sectionBusinessDone() {
+        if (!this.isBusinessRole || !this.claimForm)
+            return true;
+        return this.f['businessName'].valid && this.f['businessEmail'].valid;
+    }
+    get sectionPhotoDone() {
+        return !!this.profilePreviewUrl;
+    }
+    get overallProgress() {
+        if (!this.claimForm)
+            return 0;
+        const steps = [
+            this.sectionPersonalDone,
+            this.sectionAddressDone,
+            this.sectionRoleDone,
+            this.sectionPhotoDone,
+            ...(this.isBusinessRole ? [this.sectionBusinessDone] : []),
+        ];
+        return Math.round((steps.filter(Boolean).length / steps.length) * 100);
+    }
+    constructor(fb, route, router, claimService, modalService, tokenService, authLogoutService, libConfig) {
         this.fb = fb;
         this.route = route;
         this.router = router;
         this.claimService = claimService;
         this.modalService = modalService;
         this.tokenService = tokenService;
+        this.authLogoutService = authLogoutService;
         this.libConfig = libConfig;
     }
     static SESSION_KEY = 'claim_process_email';
@@ -36154,13 +36204,15 @@ class ClaimProcessComponent {
             this.tokenService.getUserLastName(),
         ]);
         this.privacyAndTerms = this.claimService.getPrivacyConfig(this.libConfig?.appType?.toString() ?? '');
-        // Use token userId as base; lookupUser may override with the API userId
         if (userId)
             this.userId = userId;
         const paramEmail = this.route.snapshot.queryParams['email'] ||
             this.route.snapshot.queryParams['EmailId'];
         if (paramEmail) {
-            this.userEmail = emailId ?? paramEmail;
+            this.userEmail = paramEmail;
+            if (emailId) {
+                this.userEmail = emailId;
+            }
             sessionStorage.setItem(ClaimProcessComponent.SESSION_KEY, paramEmail);
             this.router.navigate([], {
                 relativeTo: this.route,
@@ -36171,19 +36223,27 @@ class ClaimProcessComponent {
         else {
             const stored = sessionStorage.getItem(ClaimProcessComponent.SESSION_KEY);
             if (stored) {
-                this.userEmail = emailId ?? stored;
+                this.userEmail = stored;
+                if (emailId) {
+                    this.userEmail = emailId;
+                }
             }
             else if (emailId) {
                 this.userEmail = emailId;
             }
-            else {
+            else if (!userId) {
+                // No email AND no userId — genuinely invalid access link
                 this.noEmailError = true;
                 return;
             }
+            // userId present but no email yet — loadUserProfile will supply it
+        }
+        if (!userId) {
+            await this.lookupAuth0Account();
+            return;
         }
         this.claimForm = this.fb.group({
             email: [this.userEmail, [Validators.required, Validators.email]],
-            // Pre-fill from token; lookupUser patches over these if existing profile found
             firstName: [firstName || '', Validators.required],
             lastName: [lastName || '', Validators.required],
             phone: ['', Validators.required],
@@ -36204,14 +36264,9 @@ class ClaimProcessComponent {
         this.claimForm.get('role')?.valueChanges.subscribe(() => {
             this.updateBusinessRoleValidators();
         });
+        this.isInitializing = false;
         this.getRoles();
-        // Ref: initial-process ngOnInit — if userId in token, fetch existing profile
-        if (userId) {
-            this.loadUserProfile(userId);
-        }
-        else {
-            this.lookupUser(this.userEmail);
-        }
+        this.loadUserProfile(userId);
     }
     get f() {
         return this.claimForm.controls;
@@ -36240,6 +36295,28 @@ class ClaimProcessComponent {
      * Called when token returns a userId — fetches the full DB profile and
      * pre-fills the form so the user can update or complete their profile.
      */
+    async lookupAuth0Account() {
+        if (!this.userEmail) {
+            this.showAccountNotFound = true;
+            return;
+        }
+        this.isLookingUpAccount = true;
+        try {
+            const response = await this.claimService.lookupUser(this.userEmail).toPromise();
+            if (response?.userDetails) {
+                this.auth0UserData = response;
+            }
+            else {
+                this.showAccountNotFound = true;
+            }
+        }
+        catch {
+            this.showAccountNotFound = true;
+        }
+        finally {
+            this.isLookingUpAccount = false;
+        }
+    }
     loadUserProfile(userId) {
         this.isLoadingUser = true;
         this.userLookupError = null;
@@ -36257,7 +36334,12 @@ class ClaimProcessComponent {
                 this.userId = data.userId;
                 this.userHasExistingDetails = true;
                 this.updatePasswordValidators();
+                // Patch email from profile if not already set from token/params
+                if (data.email && !this.userEmail) {
+                    this.userEmail = data.email;
+                }
                 this.claimForm.patchValue({
+                    email: data.email || this.userEmail,
                     firstName: data.firstName || '',
                     lastName: data.lastName || '',
                     phone: data.phoneNumber || '',
@@ -36281,56 +36363,6 @@ class ClaimProcessComponent {
             },
         });
     }
-    /**
-     * Fallback path: invite-link without an active session.
-     * Uses auth0 email lookup when no userId is present in the token.
-     */
-    lookupUser(email) {
-        this.isLoadingUser = true;
-        this.userLookupError = null;
-        this.claimService.lookupUser(email).subscribe({
-            next: (data) => {
-                this.isLoadingUser = false;
-                this.showRoleSelect = data?.roleSelect ?? true;
-                this.updateRoleValidator();
-                if (!data?.auth0Id) {
-                    this.userHasExistingDetails = false;
-                    this.updatePasswordValidators();
-                    return;
-                }
-                const d = data.userDetails;
-                if (!d) {
-                    // Auth0 account exists but no DB profile — new user, show blank form
-                    this.userHasExistingDetails = false;
-                    this.updatePasswordValidators();
-                    return;
-                }
-                this.userId = d.userId ?? this.claimService.generateGuid();
-                this.userHasExistingDetails = true;
-                this.updatePasswordValidators();
-                this.claimForm.patchValue({
-                    firstName: d.firstName || '',
-                    lastName: d.lastName || '',
-                    phone: d.phone || '',
-                    address: d.address || '',
-                    city: d.city || '',
-                    state: d.state || '',
-                    zip: d.zip || '',
-                });
-                if (d.userRoles?.length) {
-                    this.pendingUserRole = d.userRoles[0].roleName;
-                    this.applyUserRole();
-                }
-            },
-            error: () => {
-                this.isLoadingUser = false;
-                this.userLookupError = 'Could not load account details for this email.';
-                this.userHasExistingDetails = false;
-                this.showRoleSelect = true;
-                this.updatePasswordValidators();
-            },
-        });
-    }
     // ─── Roles ───────────────────────────────────────────────────────────────────
     getRoles() {
         this.claimService.getRoles().subscribe({
@@ -36370,7 +36402,9 @@ class ClaimProcessComponent {
     updatePasswordValidators() {
         const pwCtrl = this.claimForm.get('password');
         const cpwCtrl = this.claimForm.get('confirmPassword');
-        if (!this.userHasExistingDetails) {
+        // Password is only required for new users when they explicitly enable the set-password toggle
+        const requirePw = !this.userHasExistingDetails && this.setPasswordEnabled;
+        if (requirePw) {
             pwCtrl?.setValidators([Validators.required, Validators.minLength(8)]);
             cpwCtrl?.setValidators(Validators.required);
         }
@@ -36381,6 +36415,10 @@ class ClaimProcessComponent {
         pwCtrl?.updateValueAndValidity();
         cpwCtrl?.updateValueAndValidity();
     }
+    toggleSetPassword() {
+        this.setPasswordEnabled = !this.setPasswordEnabled;
+        this.updatePasswordValidators();
+    }
     updateBusinessRoleValidators() {
         const businessFields = ['businessName', 'businessEmail', 'businessAddress'];
         businessFields.forEach(field => {
@@ -36618,16 +36656,29 @@ class ClaimProcessComponent {
     stopOtpTimer() {
         clearInterval(this.otpIntervalRef);
     }
+    async logout() {
+        await this.authLogoutService.logout();
+    }
+    navigateTo(url) {
+        if (url)
+            window.location.href = url;
+    }
+    navigateToDashboard() {
+        this.navigateTo(this.libConfig?.dashboardUrl);
+    }
+    navigateToLogin() {
+        this.navigateTo(this.libConfig?.loginUrl ?? this.libConfig?.navigateUrl ?? this.libConfig?.dashboardUrl);
+    }
     ngOnDestroy() {
         this.stopOtpTimer();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ClaimProcessComponent, deps: [{ token: i1$3.FormBuilder }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: ClaimProcessService }, { token: i7.BsModalService }, { token: i1$2.TokenService }, { 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 Created!</h2>\r\n    <p>Your account has been successfully activated. You'll be redirected to sign in shortly.</p>\r\n    <a [href]=\"libConfig?.loginUrl ?? libConfig?.navigateUrl ?? libConfig?.dashboardUrl ?? '#'\" class=\"cp-btn\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\"><path d=\"M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z\" fill=\"#fff\"/></svg>\r\n      Sign In to Your Account\r\n    </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      <!-- Left panel \u2014 always shown (activation / update flow) -->\r\n      <div class=\"cp-left-hero\">\r\n        <div class=\"cp-left-badge\">{{ userHasExistingDetails ? 'Profile Update' : 'Account Activation' }}</div>\r\n        <h1>{{ userHasExistingDetails ? 'Update your' : 'Welcome to' }} <span class=\"cp-hero-brand\">{{ privacyAndTerms?.companyName }}</span></h1>\r\n        <p>{{ userHasExistingDetails\r\n          ? 'Your account is already set up. Update your details below and save the changes.'\r\n          : 'Your account is ready. Complete this short form to gain full access to the platform.' }}</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\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 Profile / Activation Form \u2500\u2500 -->\r\n    <div class=\"cp-form-wrap\">\r\n\r\n      <div class=\"cp-form-header\">\r\n        <h2>{{ userHasExistingDetails ? 'Update Your Profile' : 'Activate Your Account' }}</h2>\r\n        <p>{{ userHasExistingDetails\r\n          ? 'Review and update your details below, then save to apply the changes.'\r\n          : 'Your ' + (privacyAndTerms?.companyName || 'account') + ' 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      </div>\r\n\r\n      <form [formGroup]=\"claimForm\" (ngSubmit)=\"onSubmit()\" novalidate>\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\" *ngIf=\"showRoleSelect\">\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 -->\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 -->\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          <!-- NEW USER: password fields in main form submit -->\r\n          <div class=\"cp-row\" *ngIf=\"!userHasExistingDetails\">\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            <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          <!-- EXISTING USER: OTP password reset flow (ref: user-profile changePassword / verifyOtp) -->\r\n          <ng-container *ngIf=\"userHasExistingDetails && resetPasswordEnabled\">\r\n\r\n            <!-- Step 1: Enter new password + trigger OTP -->\r\n            <ng-container *ngIf=\"passwordStep === 1\">\r\n              <div class=\"cp-row\">\r\n                <div class=\"cp-field\">\r\n                  <label for=\"password\">New Password</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\" autocomplete=\"new-password\" />\r\n                    <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showPassword = !showPassword\">\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>\r\n                <div class=\"cp-field\">\r\n                  <label for=\"confirmPassword\">Confirm Password</label>\r\n                  <div class=\"cp-pw-wrap\">\r\n                    <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPassword\" formControlName=\"confirmPassword\"\r\n                      placeholder=\"Repeat password\" autocomplete=\"new-password\" />\r\n                    <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showConfirmPassword = !showConfirmPassword\">\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>\r\n              </div>\r\n              <div class=\"cp-error\" *ngIf=\"passwordChangeError\">{{ passwordChangeError }}</div>\r\n              <div class=\"cp-pw-success\" *ngIf=\"passwordChangeSuccess\">\r\n                <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n                Password changed successfully.\r\n              </div>\r\n              <button type=\"button\" class=\"cp-btn cp-btn--otp\" (click)=\"changePassword()\" [disabled]=\"isPasswordChanging\">\r\n                <span *ngIf=\"isPasswordChanging\" class=\"cp-spinner cp-spinner-btn\"></span>\r\n                {{ isPasswordChanging ? 'Sending\u2026' : 'Send Verification Code' }}\r\n              </button>\r\n            </ng-container>\r\n\r\n            <!-- Step 2: Enter OTP + verify -->\r\n            <ng-container *ngIf=\"passwordStep === 2\">\r\n              <div class=\"cp-otp-wrap\">\r\n                <p class=\"cp-otp-hint\">\r\n                  <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;flex-shrink:0\"><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                  Verification code sent to <strong>{{ userEmail }}</strong>\r\n                </p>\r\n                <div class=\"cp-otp-timer\" [class.cp-otp-timer--expired]=\"otpExpired\">\r\n                  <svg viewBox=\"0 0 24 24\" style=\"width:15px;height:15px\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\"/></svg>\r\n                  <span *ngIf=\"!otpExpired\">{{ otpMinutes }}:{{ otpSeconds < 10 ? '0' + otpSeconds : otpSeconds }}</span>\r\n                  <span *ngIf=\"otpExpired\">Code expired</span>\r\n                </div>\r\n                <div class=\"cp-field\">\r\n                  <label for=\"otpInput\">Verification Code</label>\r\n                  <input type=\"text\" id=\"otpInput\" [(ngModel)]=\"otpValue\"\r\n                    [ngModelOptions]=\"{standalone: true}\"\r\n                    placeholder=\"Enter 6-digit code\" maxlength=\"6\" inputmode=\"numeric\"\r\n                    class=\"cp-otp-input\" />\r\n                </div>\r\n                <div class=\"cp-error\" *ngIf=\"passwordChangeError\">{{ passwordChangeError }}</div>\r\n                <div class=\"cp-otp-actions\">\r\n                  <button type=\"button\" class=\"cp-btn\" (click)=\"verifyPasswordOtp()\"\r\n                    [disabled]=\"otpExpired || !otpValue || isPasswordChanging\">\r\n                    <span *ngIf=\"isPasswordChanging\" class=\"cp-spinner cp-spinner-btn\"></span>\r\n                    {{ isPasswordChanging ? 'Verifying\u2026' : 'Verify & Change Password' }}\r\n                  </button>\r\n                  <button type=\"button\" class=\"cp-btn cp-btn--secondary\" *ngIf=\"canResendOtp\"\r\n                    (click)=\"changePassword(true)\" [disabled]=\"isPasswordChanging\">\r\n                    Resend Code\r\n                  </button>\r\n                  <button type=\"button\" class=\"cp-btn-link\" (click)=\"cancelPasswordChange()\">Cancel</button>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n\r\n          </ng-container><!-- end OTP password reset -->\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-area\" (click)=\"cpLogoInput.click()\">\r\n              <input #cpLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\"\r\n                (change)=\"onBusinessLogoChange($event)\" class=\"cp-upload-hidden\" />\r\n              <ng-container *ngIf=\"logoPreviewUrl; else logoPlaceholder\">\r\n                <img [src]=\"logoPreviewUrl\" alt=\"Business logo preview\" class=\"cp-upload-preview cp-upload-preview--logo\" />\r\n                <span class=\"cp-upload-change\">Click to change</span>\r\n              </ng-container>\r\n              <ng-template #logoPlaceholder>\r\n                <div class=\"cp-upload-placeholder\">\r\n                  <svg viewBox=\"0 0 24 24\"><path d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"/></svg>\r\n                  <span>Click to upload company logo</span>\r\n                  <small>PNG, JPG, JPEG</small>\r\n                </div>\r\n              </ng-template>\r\n            </div>\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-area\" (click)=\"cpProfileInput.click()\">\r\n            <input #cpProfileInput type=\"file\" accept=\".png,.jpg,.jpeg\"\r\n              (change)=\"onProfileFileChange($event)\" class=\"cp-upload-hidden\" />\r\n            <ng-container *ngIf=\"profilePreviewUrl; else profilePlaceholder\">\r\n              <img [src]=\"profilePreviewUrl\" alt=\"Profile picture preview\" class=\"cp-upload-preview cp-upload-preview--avatar\" />\r\n              <span class=\"cp-upload-change\">Click to change</span>\r\n            </ng-container>\r\n            <ng-template #profilePlaceholder>\r\n              <div class=\"cp-upload-placeholder\">\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                <span>Click to upload profile picture</span>\r\n                <small>PNG, JPG, JPEG</small>\r\n              </div>\r\n            </ng-template>\r\n          </div>\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>{{ uploadStatus || (isSubmitting ? 'Processing\u2026' : (userHasExistingDetails ? 'Save Changes' : '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}@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-invalid-page,.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-invalid-card,.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-invalid-card h2,.cp-success-card h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-invalid-card p,.cp-success-card p{font-size:14px;color:#6b7c8a;line-height:1.7;margin-bottom:28px}.cp-invalid-icon,.cp-success-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-invalid-icon svg,.cp-success-icon svg{width:32px;height:32px}.cp-invalid-icon{background:#dc35451a}.cp-invalid-icon svg path{fill:#dc3545}.cp-success-icon{background:#28a7451a}.cp-success-icon svg path{fill:#28a745}.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 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-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-pw-success{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#16a34a;margin:4px 0 10px}.cp-pw-success svg path{fill:#16a34a}.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-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-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-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-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-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-btn--otp{margin-top:12px}.cp-btn--secondary{background:#fff;color:#4077ad;border:1.5px solid #4077AD;margin-top:8px}.cp-btn--secondary:hover:not(:disabled){background:#4077ad0f}.cp-btn-link{background:none;border:none;font-family:inherit;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;margin-top:8px;padding:6px 0;text-decoration:underline}.cp-btn-link:hover{color:#4077ad}.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-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-otp-wrap{margin-top:4px}.cp-otp-hint{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#6b7c8a;margin:0 0 12px}.cp-otp-hint svg path{fill:#6b7c8a}.cp-otp-hint strong{color:#0c1620}.cp-otp-timer{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.18);border-radius:99px;padding:4px 12px;margin-bottom:14px}.cp-otp-timer svg path{fill:#4077ad}.cp-otp-timer--expired{color:#dc3545;background:#dc354512;border-color:#dc354533}.cp-otp-timer--expired svg path{fill:#dc3545}.cp-otp-input{letter-spacing:.15em;font-size:16px;font-weight:600}.cp-otp-actions{display:flex;flex-direction:column;gap:0;margin-top:4px}.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-upload-area{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:120px;border:2px dashed #d3dce3;border-radius:6px;background:#eef1f4;cursor:pointer;transition:border-color .15s,background .15s;overflow:hidden}.cp-upload-area:hover{border-color:#4077ad;background:#4077ad08}.cp-upload-hidden{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.cp-upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px;text-align:center;pointer-events:none}.cp-upload-placeholder svg{width:32px;height:32px;opacity:.5}.cp-upload-placeholder svg path{fill:#6b7c8a}.cp-upload-placeholder span{font-size:12.5px;font-weight:600;color:#6b7c8a}.cp-upload-placeholder small{font-size:11px;color:#95a2ad}.cp-upload-preview{width:100%;object-fit:cover;display:block}.cp-upload-preview--avatar{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 8px #0000001f;margin:14px auto 0}.cp-upload-preview--logo{max-width:180px;max-height:80px;width:auto;height:auto;object-fit:contain;margin:14px auto 0}.cp-upload-change{font-size:11px;font-weight:600;color:#4077ad;margin-bottom:10px;pointer-events:none}.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}\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: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.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: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ClaimProcessComponent, deps: [{ token: i1$3.FormBuilder }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: ClaimProcessService }, { token: i7.BsModalService }, { token: i1$2.TokenService }, { token: i1$2.AuthLogoutService }, { 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 Account Lookup: Loading \u2500\u2500\u2500 -->\r\n<div *ngIf=\"isLookingUpAccount\" class=\"cp-invalid-page\">\r\n  <div class=\"cp-invalid-card cp-lookup-loading\">\r\n    <span class=\"cp-spinner cp-lookup-spinner\"></span>\r\n    <p>Looking up your account\u2026</p>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Account Found (auth0 record exists, no active userId) \u2500\u2500\u2500 -->\r\n<div *ngIf=\"!isLookingUpAccount && auth0UserData\" class=\"cp-anf-page\">\r\n  <div class=\"cp-anf-wrap\">\r\n\r\n    <div class=\"cp-anf-brand\" *ngIf=\"privacyAndTerms?.logoUrl || privacyAndTerms?.companyName\">\r\n      <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\"\r\n        [alt]=\"privacyAndTerms?.companyName\" class=\"cp-anf-logo\" />\r\n      <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-anf-company\">{{ privacyAndTerms?.companyName }}</span>\r\n    </div>\r\n\r\n    <div class=\"cp-anf-card\">\r\n\r\n      <div class=\"cp-anf-card__header\">\r\n        <div class=\"cp-anf-avatar\">\r\n          {{ (auth0UserData.userDetails?.firstName?.[0] || '') + (auth0UserData.userDetails?.lastName?.[0] || '') || '?' }}\r\n        </div>\r\n        <div class=\"cp-anf-card__identity\">\r\n          <h2 class=\"cp-anf-card__name\">\r\n            {{ auth0UserData.userDetails?.firstName }} {{ auth0UserData.userDetails?.lastName }}\r\n          </h2>\r\n          <span class=\"cp-anf-card__email\">\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            {{ auth0UserData.email }}\r\n          </span>\r\n          <div class=\"cp-anf-roles\" *ngIf=\"auth0UserData.userDetails?.userRoles?.length\">\r\n            <span class=\"cp-anf-role\"\r\n              *ngFor=\"let r of auth0UserData.userDetails.userRoles\">\r\n              {{ r.roleName }}\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"cp-anf-card__details\">\r\n        <div class=\"cp-anf-detail\" *ngIf=\"auth0UserData.userDetails?.phone\">\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          {{ auth0UserData.userDetails.phone }}\r\n        </div>\r\n        <div class=\"cp-anf-detail\" *ngIf=\"auth0UserData.userDetails?.address || auth0UserData.userDetails?.city\">\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          {{ [auth0UserData.userDetails?.address, auth0UserData.userDetails?.city, auth0UserData.userDetails?.state, auth0UserData.userDetails?.zip].filter(Boolean).join(', ') }}\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"cp-anf-card__notice\">\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        An account already exists for this email address.\r\n      </div>\r\n\r\n      <button type=\"button\" class=\"cp-anf-signin-btn\" (click)=\"navigateToLogin()\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z\" fill=\"#fff\"/></svg>\r\n        Sign In to Your Account\r\n      </button>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Account Not Found (no record at all) \u2500\u2500\u2500 -->\r\n<div *ngIf=\"!isLookingUpAccount && !auth0UserData && showAccountNotFound\" class=\"cp-invalid-page\">\r\n  <div class=\"cp-invalid-card\">\r\n    <div class=\"cp-invalid-icon cp-invalid-icon--warn\">\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 2zm-1 5h2v6h-2zm0 8h2v2h-2z\"/></svg>\r\n    </div>\r\n    <h2>Account Not Found</h2>\r\n    <p *ngIf=\"userEmail\">No account was found for <strong>{{ userEmail }}</strong>.</p>\r\n    <p *ngIf=\"!userEmail\">We couldn't find an account linked to your session.</p>\r\n    <p class=\"cp-anf-hint\">Would you like to create a new account?</p>\r\n    <button type=\"button\" class=\"cp-btn\" (click)=\"navigateToLogin()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z\" fill=\"#fff\"/></svg>\r\n      Create New Account\r\n    </button>\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>{{ userHasExistingDetails ? 'Profile Updated!' : 'Account Activated!' }}</h2>\r\n    <p>{{ userHasExistingDetails\r\n      ? 'Your profile has been saved successfully.'\r\n      : 'Your account has been successfully activated.' }}</p>\r\n    <button type=\"button\" class=\"cp-btn\" style=\"margin-top:20px\" (click)=\"navigateToDashboard()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\"><path d=\"M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z\" fill=\"#fff\"/></svg>\r\n      Go to Dashboard\r\n    </button>\r\n    <button *ngIf=\"!userHasExistingDetails\" type=\"button\" class=\"cp-btn cp-btn--ghost\" style=\"margin-top:10px\" (click)=\"navigateToLogin()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;flex-shrink:0\"><path d=\"M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z\"/></svg>\r\n      Sign In Instead\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Main Layout \u2500\u2500\u2500 -->\r\n<div *ngIf=\"!noEmailError && !submitSuccess && !showAccountNotFound && !auth0UserData && !isLookingUpAccount && !isInitializing\" class=\"cp-page\">\r\n\r\n  <!-- Left Panel \u2014 Status Tracker -->\r\n  <aside class=\"cp-left\">\r\n    <div class=\"cp-left-inner\">\r\n\r\n      <!-- Logo -->\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      <!-- User identity card -->\r\n      <div class=\"cp-sb-user\">\r\n        <div class=\"cp-sb-avatar\">\r\n          <img *ngIf=\"profilePreviewUrl\" [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-sb-avatar__img\" />\r\n          <span *ngIf=\"!profilePreviewUrl\" class=\"cp-sb-avatar__initials\">\r\n            {{ (f['firstName'].value?.[0] || '') + (f['lastName'].value?.[0] || '') || '?' }}\r\n          </span>\r\n        </div>\r\n        <div class=\"cp-sb-user__info\">\r\n          <strong class=\"cp-sb-user__name\">\r\n            {{ (f['firstName'].value || f['lastName'].value)\r\n               ? (f['firstName'].value + ' ' + f['lastName'].value)\r\n               : 'Your Profile' }}\r\n          </strong>\r\n          <span class=\"cp-sb-user__email\">{{ userEmail }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Overall progress bar -->\r\n      <div class=\"cp-sb-progress\">\r\n        <div class=\"cp-sb-progress__header\">\r\n          <span>Profile Completion</span>\r\n          <strong>{{ overallProgress }}%</strong>\r\n        </div>\r\n        <div class=\"cp-sb-progress__track\">\r\n          <div class=\"cp-sb-progress__fill\" [style.width]=\"overallProgress + '%'\"></div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Section status steps -->\r\n      <ul class=\"cp-steps\">\r\n\r\n        <li class=\"cp-step\" [class.cp-step--done]=\"sectionPersonalDone\">\r\n          <span class=\"cp-step__icon\">\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          </span>\r\n          <div class=\"cp-step__body\">\r\n            <span class=\"cp-step__label\">Personal Details</span>\r\n            <span class=\"cp-step__sub\">First name, last name, phone</span>\r\n          </div>\r\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionPersonalDone\">\r\n            <svg *ngIf=\"sectionPersonalDone\" 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 *ngIf=\"!sectionPersonalDone\">{{ sectionPersonalDone ? '' : '!' }}</span>\r\n          </span>\r\n        </li>\r\n\r\n        <li class=\"cp-step\" [class.cp-step--done]=\"sectionAddressDone\">\r\n          <span class=\"cp-step__icon\">\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          </span>\r\n          <div class=\"cp-step__body\">\r\n            <span class=\"cp-step__label\">Address</span>\r\n            <span class=\"cp-step__sub\">Street, city, state, zip</span>\r\n          </div>\r\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionAddressDone\">\r\n            <svg *ngIf=\"sectionAddressDone\" 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        </li>\r\n\r\n        <li class=\"cp-step\" [class.cp-step--done]=\"sectionRoleDone\">\r\n          <span class=\"cp-step__icon\">\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          </span>\r\n          <div class=\"cp-step__body\">\r\n            <span class=\"cp-step__label\">Account Setup</span>\r\n            <span class=\"cp-step__sub\">Role selection{{ (setPasswordEnabled || resetPasswordEnabled) ? ', password' : '' }}</span>\r\n          </div>\r\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionRoleDone && sectionPasswordDone\">\r\n            <svg *ngIf=\"sectionRoleDone && sectionPasswordDone\" 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        </li>\r\n\r\n        <li class=\"cp-step\" [class.cp-step--done]=\"sectionPhotoDone\">\r\n          <span class=\"cp-step__icon\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"/></svg>\r\n          </span>\r\n          <div class=\"cp-step__body\">\r\n            <span class=\"cp-step__label\">Profile Photo</span>\r\n            <span class=\"cp-step__sub\">{{ sectionPhotoDone ? 'Photo uploaded' : 'Upload a profile picture' }}</span>\r\n          </div>\r\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionPhotoDone\">\r\n            <svg *ngIf=\"sectionPhotoDone\" 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        </li>\r\n\r\n        <li class=\"cp-step\" *ngIf=\"isBusinessRole\" [class.cp-step--done]=\"sectionBusinessDone\">\r\n          <span class=\"cp-step__icon\">\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          </span>\r\n          <div class=\"cp-step__body\">\r\n            <span class=\"cp-step__label\">Business Info</span>\r\n            <span class=\"cp-step__sub\">Name, email, address, logo</span>\r\n          </div>\r\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionBusinessDone\">\r\n            <svg *ngIf=\"sectionBusinessDone\" 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        </li>\r\n\r\n      </ul>\r\n\r\n      <!-- Footer contact -->\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    </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 -->\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\">{{ privacyAndTerms?.companyName }}</span>\r\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-logout-btn cp-logout-btn--mobile\" (click)=\"logout()\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5-5-5zm-5 12H5V5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h7v-2z\"/></svg>\r\n        Logout\r\n      </button>\r\n    </div>\r\n\r\n    <!-- \u2500\u2500\u2500 Profile Banner \u2500\u2500\u2500 -->\r\n    <div class=\"cp-banner\">\r\n      <div class=\"cp-banner__avatar\" (click)=\"cpProfileInput.click()\" title=\"Click to upload photo\">\r\n        <input #cpProfileInput type=\"file\" accept=\".png,.jpg,.jpeg\"\r\n          (change)=\"onProfileFileChange($event)\" class=\"cp-upload-hidden\" />\r\n        <img *ngIf=\"profilePreviewUrl\" [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-banner__img\" />\r\n        <div *ngIf=\"!profilePreviewUrl\" class=\"cp-banner__initials\">\r\n          {{ (f['firstName'].value?.[0] || '') + (f['lastName'].value?.[0] || '') || '?' }}\r\n        </div>\r\n        <div class=\"cp-banner__cam\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 15.2A3.2 3.2 0 1 1 15.2 12 3.2 3.2 0 0 1 12 15.2zm6.4-9.6h-1.6l-1.6-2.4H8.8L7.2 5.6H5.6A2.4 2.4 0 0 0 3.2 8v9.6A2.4 2.4 0 0 0 5.6 20h12.8a2.4 2.4 0 0 0 2.4-2.4V8a2.4 2.4 0 0 0-2.4-2.4z\" fill=\"#fff\"/></svg>\r\n        </div>\r\n      </div>\r\n      <div class=\"cp-banner__info\">\r\n        <div class=\"cp-banner__name\">\r\n          {{ (f['firstName'].value || f['lastName'].value)\r\n             ? (f['firstName'].value + ' ' + f['lastName'].value)\r\n             : 'Your Profile' }}\r\n        </div>\r\n        <div class=\"cp-banner__meta\">\r\n          <span class=\"cp-banner__email\" *ngIf=\"userEmail\">\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            {{ userEmail }}\r\n          </span>\r\n          <span class=\"cp-banner__badge\" [class.cp-banner__badge--update]=\"userHasExistingDetails\">\r\n            {{ userHasExistingDetails ? 'Profile Update' : 'Account Activation' }}\r\n          </span>\r\n        </div>\r\n        <div class=\"cp-banner__loading\" *ngIf=\"isLoadingUser\">\r\n          <span class=\"cp-spinner cp-spinner--sm\"></span> Loading profile\u2026\r\n        </div>\r\n      </div>\r\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-logout-btn cp-logout-btn--banner\" (click)=\"logout()\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5-5-5zm-5 12H5V5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h7v-2z\"/></svg>\r\n        Sign Out\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"cp-form-wrap\">\r\n\r\n      <div class=\"cp-error cp-alert\" *ngIf=\"userLookupError\">\r\n        <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;flex-shrink:0\"><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        {{ userLookupError }}\r\n      </div>\r\n\r\n      <form [formGroup]=\"claimForm\" (ngSubmit)=\"onSubmit()\" novalidate>\r\n\r\n        <!-- \u2550\u2550\u2550 SECTION: Personal Details \u2550\u2550\u2550 -->\r\n        <div class=\"cp-card\">\r\n          <div class=\"cp-card__header\">\r\n            <span class=\"cp-card__icon\">\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            </span>\r\n            <div>\r\n              <h3 class=\"cp-card__title\">Personal Details</h3>\r\n              <p class=\"cp-card__sub\">Your full name and contact number</p>\r\n            </div>\r\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionPersonalDone\">\r\n              <svg *ngIf=\"sectionPersonalDone\" 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 *ngIf=\"!sectionPersonalDone\">\u2014</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"cp-card__body\">\r\n            <div class=\"cp-row cp-row--3\">\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\" placeholder=\"Jane\"\r\n                  [class.is-invalid]=\"f['firstName'].invalid && f['firstName'].touched\" autocomplete=\"given-name\" />\r\n                <div class=\"cp-error\" *ngIf=\"f['firstName'].invalid && f['firstName'].touched\">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\" placeholder=\"Doe\"\r\n                  [class.is-invalid]=\"f['lastName'].invalid && f['lastName'].touched\" autocomplete=\"family-name\" />\r\n                <div class=\"cp-error\" *ngIf=\"f['lastName'].invalid && f['lastName'].touched\">Required</div>\r\n              </div>\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\" placeholder=\"(555) 123-4567\"\r\n                  maxlength=\"14\" [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\">Required</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \u2550\u2550\u2550 SECTION: Address \u2550\u2550\u2550 -->\r\n        <div class=\"cp-card\">\r\n          <div class=\"cp-card__header\">\r\n            <span class=\"cp-card__icon\">\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            </span>\r\n            <div>\r\n              <h3 class=\"cp-card__title\">Address</h3>\r\n              <p class=\"cp-card__sub\">Your residential or mailing address</p>\r\n            </div>\r\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionAddressDone\">\r\n              <svg *ngIf=\"sectionAddressDone\" 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 *ngIf=\"!sectionAddressDone\">\u2014</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"cp-card__body\">\r\n            <div class=\"cp-field\">\r\n              <label for=\"address\">Street Address</label>\r\n              <input type=\"text\" id=\"address\" formControlName=\"address\" placeholder=\"123 Main Street\"\r\n                ngx-google-places-autocomplete [options]=\"googleOptions\"\r\n                (onAddressChange)=\"onAddressChange($event)\" autocomplete=\"off\" />\r\n            </div>\r\n            <div class=\"cp-row cp-row--3\">\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          </div>\r\n        </div>\r\n\r\n        <!-- \u2550\u2550\u2550 SECTION: Account Setup \u2550\u2550\u2550 -->\r\n        <div class=\"cp-card\">\r\n          <div class=\"cp-card__header\">\r\n            <span class=\"cp-card__icon\">\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            </span>\r\n            <div>\r\n              <h3 class=\"cp-card__title\">Account Setup</h3>\r\n              <p class=\"cp-card__sub\">Role and password configuration</p>\r\n            </div>\r\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionRoleDone && sectionPasswordDone\">\r\n              <svg *ngIf=\"sectionRoleDone && sectionPasswordDone\" 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 *ngIf=\"!(sectionRoleDone && sectionPasswordDone)\">\u2014</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"cp-card__body\">\r\n\r\n            <div class=\"cp-field\" *ngIf=\"showRoleSelect\">\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            <ng-container *ngIf=\"!isLoadingUser\">\r\n\r\n              <!-- New user: optional password toggle -->\r\n              <div class=\"cp-toggle-row\" *ngIf=\"!userHasExistingDetails\">\r\n                <div class=\"cp-toggle-row__info\">\r\n                  <span class=\"cp-toggle-row__label\">Set Password <em>(Optional)</em></span>\r\n                  <span class=\"cp-toggle-row__hint\">Leave off to use existing credentials</span>\r\n                </div>\r\n                <label class=\"cp-toggle-switch\">\r\n                  <input type=\"checkbox\" [checked]=\"setPasswordEnabled\" (change)=\"toggleSetPassword()\">\r\n                  <span class=\"cp-toggle-knob\"></span>\r\n                </label>\r\n              </div>\r\n\r\n              <div class=\"cp-row\" *ngIf=\"!userHasExistingDetails && setPasswordEnabled\">\r\n                <div class=\"cp-field\">\r\n                  <label for=\"password\">Password</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\" autocomplete=\"new-password\" />\r\n                    <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showPassword = !showPassword\">\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'].errors?.['minlength'] && f['password'].touched\">Min. 8 characters</div>\r\n                </div>\r\n                <div class=\"cp-field\">\r\n                  <label for=\"confirmPassword\">Confirm Password</label>\r\n                  <div class=\"cp-pw-wrap\">\r\n                    <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPassword\"\r\n                      formControlName=\"confirmPassword\" placeholder=\"Repeat password\"\r\n                      [class.is-invalid]=\"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                      <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=\"claimForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched\">Passwords do not match</div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Existing user: reset toggle -->\r\n              <div class=\"cp-toggle-row\" *ngIf=\"userHasExistingDetails\">\r\n                <div class=\"cp-toggle-row__info\">\r\n                  <span class=\"cp-toggle-row__label\">Reset Password</span>\r\n                  <span class=\"cp-toggle-row__hint\">Enable to change your current password</span>\r\n                </div>\r\n                <label class=\"cp-toggle-switch\">\r\n                  <input type=\"checkbox\" [checked]=\"resetPasswordEnabled\" (change)=\"toggleResetPassword()\">\r\n                  <span class=\"cp-toggle-knob\"></span>\r\n                </label>\r\n              </div>\r\n\r\n              <ng-container *ngIf=\"userHasExistingDetails && resetPasswordEnabled\">\r\n                <ng-container *ngIf=\"passwordStep === 1\">\r\n                  <div class=\"cp-row\">\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"password\">New Password</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\" autocomplete=\"new-password\" />\r\n                        <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showPassword = !showPassword\">\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>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"confirmPassword\">Confirm Password</label>\r\n                      <div class=\"cp-pw-wrap\">\r\n                        <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPassword\"\r\n                          formControlName=\"confirmPassword\" placeholder=\"Repeat password\" autocomplete=\"new-password\" />\r\n                        <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showConfirmPassword = !showConfirmPassword\">\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>\r\n                  </div>\r\n                  <div class=\"cp-error\" *ngIf=\"passwordChangeError\">{{ passwordChangeError }}</div>\r\n                  <div class=\"cp-pw-success\" *ngIf=\"passwordChangeSuccess\">\r\n                    <svg viewBox=\"0 0 24 24\" style=\"width:15px;height:15px\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n                    Password changed successfully.\r\n                  </div>\r\n                  <button type=\"button\" class=\"cp-btn cp-btn--outline cp-btn--sm\" (click)=\"changePassword()\" [disabled]=\"isPasswordChanging\">\r\n                    <span *ngIf=\"isPasswordChanging\" class=\"cp-spinner cp-spinner-btn\"></span>\r\n                    {{ isPasswordChanging ? 'Sending\u2026' : 'Send Verification Code' }}\r\n                  </button>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"passwordStep === 2\">\r\n                  <div class=\"cp-otp-wrap\">\r\n                    <p class=\"cp-otp-hint\">\r\n                      <svg viewBox=\"0 0 24 24\" style=\"width:15px;height:15px;flex-shrink:0\"><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                      Code sent to <strong>{{ userEmail }}</strong>\r\n                    </p>\r\n                    <div class=\"cp-otp-timer\" [class.cp-otp-timer--expired]=\"otpExpired\">\r\n                      <svg viewBox=\"0 0 24 24\" style=\"width:14px;height:14px\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\"/></svg>\r\n                      <span *ngIf=\"!otpExpired\">{{ otpMinutes }}:{{ otpSeconds < 10 ? '0' + otpSeconds : otpSeconds }}</span>\r\n                      <span *ngIf=\"otpExpired\">Code expired</span>\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"otpInput\">Enter 6-digit code</label>\r\n                      <input type=\"text\" id=\"otpInput\" [(ngModel)]=\"otpValue\" [ngModelOptions]=\"{standalone: true}\"\r\n                        placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\" maxlength=\"6\" inputmode=\"numeric\" class=\"cp-otp-input\" />\r\n                    </div>\r\n                    <div class=\"cp-error\" *ngIf=\"passwordChangeError\">{{ passwordChangeError }}</div>\r\n                    <div class=\"cp-otp-actions\">\r\n                      <button type=\"button\" class=\"cp-btn\" (click)=\"verifyPasswordOtp()\"\r\n                        [disabled]=\"otpExpired || !otpValue || isPasswordChanging\">\r\n                        <span *ngIf=\"isPasswordChanging\" class=\"cp-spinner cp-spinner-btn\"></span>\r\n                        {{ isPasswordChanging ? 'Verifying\u2026' : 'Verify & Change Password' }}\r\n                      </button>\r\n                      <button type=\"button\" class=\"cp-btn cp-btn--ghost\" *ngIf=\"canResendOtp\"\r\n                        (click)=\"changePassword(true)\" [disabled]=\"isPasswordChanging\">Resend Code</button>\r\n                      <button type=\"button\" class=\"cp-btn-link\" (click)=\"cancelPasswordChange()\">Cancel</button>\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-container>\r\n\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \u2550\u2550\u2550 SECTION: Business Information \u2550\u2550\u2550 -->\r\n        <div class=\"cp-card\" *ngIf=\"isBusinessRole\">\r\n          <div class=\"cp-card__header\">\r\n            <span class=\"cp-card__icon\">\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            </span>\r\n            <div>\r\n              <h3 class=\"cp-card__title\">Business Information</h3>\r\n              <p class=\"cp-card__sub\">Company details and branding</p>\r\n            </div>\r\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionBusinessDone\">\r\n              <svg *ngIf=\"sectionBusinessDone\" 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 *ngIf=\"!sectionBusinessDone\">\u2014</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"cp-card__body\">\r\n            <div class=\"cp-biz-layout\">\r\n              <div class=\"cp-biz-fields\">\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\" placeholder=\"Acme Corp\"\r\n                      [class.is-invalid]=\"f['businessName'].invalid && f['businessName'].touched\" />\r\n                    <div class=\"cp-error\" *ngIf=\"f['businessName'].invalid && f['businessName'].touched\">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\" placeholder=\"info@acme.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']\">Required</span>\r\n                      <span *ngIf=\"f['businessEmail'].errors?.['email']\">Invalid email</span>\r\n                    </div>\r\n                  </div>\r\n                </div>\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)\" autocomplete=\"off\" />\r\n                </div>\r\n                <div class=\"cp-row cp-row--3\">\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              </div>\r\n              <div class=\"cp-biz-logo\">\r\n                <label class=\"cp-biz-logo__label\">Business Logo</label>\r\n                <div class=\"cp-biz-logo__area\" (click)=\"cpLogoInput.click()\">\r\n                  <input #cpLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\"\r\n                    (change)=\"onBusinessLogoChange($event)\" class=\"cp-upload-hidden\" />\r\n                  <ng-container *ngIf=\"logoPreviewUrl; else logoPlaceholder\">\r\n                    <img [src]=\"logoPreviewUrl\" alt=\"Business logo\" class=\"cp-biz-logo__img\" />\r\n                    <span class=\"cp-biz-logo__change\">Change</span>\r\n                  </ng-container>\r\n                  <ng-template #logoPlaceholder>\r\n                    <div class=\"cp-biz-logo__placeholder\">\r\n                      <svg viewBox=\"0 0 24 24\"><path d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"/></svg>\r\n                      <span>Upload Logo</span>\r\n                      <small>PNG \u00B7 JPG</small>\r\n                    </div>\r\n                  </ng-template>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \u2550\u2550\u2550 Footer: Terms + Submit \u2550\u2550\u2550 -->\r\n        <div class=\"cp-form-footer\">\r\n          <div class=\"cp-terms\">\r\n            <label class=\"cp-terms__label\">\r\n              <input type=\"checkbox\" class=\"cp-terms__check\"\r\n                [checked]=\"model.acceptTerms && model.privacy\"\r\n                (change)=\"onTermsCheckboxChange($event)\" />\r\n              <span class=\"cp-terms__box\"></span>\r\n              <span>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              </span>\r\n            </label>\r\n            <div class=\"cp-error cp-terms-error\" *ngIf=\"(!model.acceptTerms || !model.privacy) && validatePage === 1\">\r\n              You must accept the Terms and Privacy Policy to continue\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"cp-error cp-submit-error\" *ngIf=\"submitError\">{{ submitError }}</div>\r\n\r\n          <button type=\"submit\" class=\"cp-btn cp-btn--submit\" [disabled]=\"isSubmitting\">\r\n            <span *ngIf=\"isSubmitting\" class=\"cp-spinner cp-spinner-btn\"></span>\r\n            <svg *ngIf=\"!isSubmitting\" viewBox=\"0 0 24 24\" style=\"width:18px;height:18px\">\r\n              <path *ngIf=\"userHasExistingDetails\" d=\"M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z\" fill=\"#fff\"/>\r\n              <path *ngIf=\"!userHasExistingDetails\" d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" fill=\"#fff\"/>\r\n            </svg>\r\n            {{ uploadStatus || (isSubmitting ? 'Processing\u2026' : (userHasExistingDetails ? 'Save Changes' : 'Activate My Account')) }}\r\n          </button>\r\n        </div>\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%;gap:0}.cp-logo{margin-bottom:24px}.cp-logo-img{max-height:44px;max-width:180px;object-fit:contain;display:block}.cp-logo-fallback{font-size:18px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-sb-user{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:6px;background:#4077ad0d;border:1px solid rgba(64,119,173,.12);margin-bottom:20px}.cp-sb-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:#4077ad;display:flex;align-items:center;justify-content:center;overflow:hidden}.cp-sb-avatar__img{width:100%;height:100%;object-fit:cover}.cp-sb-avatar__initials{font-size:15px;font-weight:700;color:#fff;text-transform:uppercase}.cp-sb-user__info{display:flex;flex-direction:column;gap:2px;min-width:0}.cp-sb-user__info strong{font-size:13px;font-weight:700;color:#0c1620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-user__info span{font-size:11px;color:#6b7c8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-progress{margin-bottom:24px}.cp-sb-progress__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.cp-sb-progress__header span{font-size:11px;font-weight:600;color:#6b7c8a;text-transform:uppercase;letter-spacing:.8px}.cp-sb-progress__header strong{font-size:13px;font-weight:800;color:#4077ad}.cp-sb-progress__track{height:6px;background:#e2eaf2;border-radius:99px;overflow:hidden}.cp-sb-progress__fill{height:100%;background:linear-gradient(90deg,#4077ad,#5b9fd4);border-radius:99px;transition:width .4s ease;min-width:4px}.cp-steps{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;position:relative}.cp-steps:before{content:\"\";position:absolute;left:17px;top:20px;width:2px;bottom:20px;background:#e2eaf2;z-index:0}.cp-step{display:flex;align-items:flex-start;gap:12px;padding:10px 0;position:relative;z-index:1}.cp-step__icon{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:#fff;border:2px solid #d3dce3;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}.cp-step__icon svg{width:15px;height:15px}.cp-step__icon svg path{fill:#6b7c8a;transition:fill .2s}.cp-step__body{flex:1;display:flex;flex-direction:column;gap:2px;padding-top:5px;min-width:0}.cp-step__label{font-size:12.5px;font-weight:700;color:#0c1620;line-height:1}.cp-step__sub{font-size:11px;color:#6b7c8a;line-height:1.4}.cp-step__badge{width:20px;height:20px;border-radius:50%;flex-shrink:0;margin-top:7px;background:#d3dce3;display:flex;align-items:center;justify-content:center;transition:background .2s}.cp-step__badge svg{width:12px;height:12px}.cp-step__badge svg path{fill:#fff}.cp-step__badge span{font-size:10px;font-weight:700;color:#6b7c8a}.cp-step__badge--done{background:#28a745}.cp-step__badge--done span{display:none}.cp-step--done .cp-step__icon{background:#4077ad14;border-color:#4077ad}.cp-step--done .cp-step__icon svg path{fill:#4077ad}.cp-step--done .cp-step__label{color:#4077ad}.cp-left-contact{display:flex;flex-direction:column;gap:8px;margin-top:20px;padding-top:16px;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:space-between;padding:14px 20px;background:#fff;border-bottom:1px solid #e2eaf2}@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:#f0f4f8;display:flex;flex-direction:column;align-items:center;padding:0 0 64px;overflow-y:auto;min-width:0}@media (max-width: 860px){.cp-right{padding:0 0 48px}}.cp-invalid-page,.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-invalid-card,.cp-success-card{background:#fff;border-radius:12px;box-shadow:0 4px 6px -1px #00000012,0 16px 40px -4px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-invalid-card h2,.cp-success-card h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-invalid-card p,.cp-success-card p{font-size:14px;color:#6b7c8a;line-height:1.7;margin-bottom:28px}.cp-invalid-icon,.cp-success-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-invalid-icon svg,.cp-success-icon svg{width:32px;height:32px}.cp-invalid-icon{background:#dc35451a}.cp-invalid-icon svg path{fill:#dc3545}.cp-invalid-icon--warn{background:#f59e0b1a}.cp-invalid-icon--warn svg path{fill:#f59e0b}.cp-success-icon{background:#28a7451a}.cp-success-icon svg path{fill:#28a745}.cp-anf-hint{font-size:13px;color:#6b7280;margin-top:4px}.cp-form-wrap{width:100%;flex:1;display:flex;flex-direction:column;gap:0;padding-bottom:32px}.cp-banner{display:flex;align-items:center;gap:20px;padding:20px 32px;background:linear-gradient(135deg,#4077ad,#2f5880);border-bottom:1px solid rgba(0,0,0,.12);position:sticky;top:0;z-index:10;flex-shrink:0}@media (max-width: 860px){.cp-banner{padding:16px 20px;position:static}}@media (max-width: 480px){.cp-banner{padding:14px 16px;gap:12px}}.cp-banner__avatar{position:relative;cursor:pointer;flex-shrink:0;width:68px;height:68px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);overflow:hidden;background:#ffffff26}.cp-banner__avatar:hover .cp-banner__cam{opacity:1}@media (max-width: 480px){.cp-banner__avatar{width:52px;height:52px}}.cp-banner__img{width:100%;height:100%;object-fit:cover;display:block}.cp-banner__initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#ffffffe6;text-transform:uppercase;letter-spacing:-.5px}@media (max-width: 480px){.cp-banner__initials{font-size:16px}}.cp-banner__cam{position:absolute;inset:0;opacity:0;background:#00000080;display:flex;align-items:center;justify-content:center;transition:opacity .2s;border-radius:50%}.cp-banner__cam svg{width:22px;height:22px}.cp-banner__info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.cp-banner__name{font-size:17px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}@media (max-width: 480px){.cp-banner__name{font-size:14px}}.cp-banner__meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.cp-banner__email{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#fffc;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-banner__email svg{width:11px;height:11px}.cp-banner__email svg path{fill:#fffc}.cp-banner__badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:3px 8px;border-radius:99px;background:#fff3;color:#ffffffe6}.cp-banner__badge--update{background:#28a7454d;color:#a8f5c0}.cp-banner__loading{display:flex;align-items:center;gap:6px;font-size:11px;color:#ffffffb3;margin-top:2px}.cp-banner__loading .cp-spinner--sm{border-color:#fff6;border-top-color:#fff}.cp-logout-btn--banner{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;background:#ffffff1f;border:1px solid rgba(255,255,255,.25);color:#ffffffe6;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0}.cp-logout-btn--banner svg{width:15px;height:15px}.cp-logout-btn--banner svg path{fill:#ffffffe6}.cp-logout-btn--banner:hover{background:#dc3545bf;border-color:transparent;color:#fff}.cp-logout-btn--banner:hover svg path{fill:#fff}@media (max-width: 480px){.cp-logout-btn--banner{padding:7px 10px;font-size:11px}}.cp-alert{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:6px;margin:20px 24px 0;background:#dc35450f;border:1px solid rgba(220,53,69,.18);font-size:13px;color:#c0392b}.cp-alert svg path{fill:#c0392b}.cp-card{background:#fff;border:1px solid #e2eaf2;margin:16px 24px 0;border-radius:10px;overflow:hidden;box-shadow:0 1px 3px #0000000a}.cp-card:first-of-type{margin-top:20px}@media (max-width: 860px){.cp-card{margin:12px 16px 0}}@media (max-width: 480px){.cp-card{margin:10px 12px 0;border-radius:8px}}.cp-card__header{display:flex;align-items:center;gap:14px;padding:16px 24px;border-bottom:1px solid #f0f4f8;background:#fafbfc}@media (max-width: 480px){.cp-card__header{padding:14px 16px;gap:10px}}.cp-card__icon{width:36px;height:36px;border-radius:8px;flex-shrink:0;background:#4077ad14;display:flex;align-items:center;justify-content:center}.cp-card__icon svg{width:18px;height:18px}.cp-card__icon svg path{fill:#4077ad}.cp-card__title{font-size:13.5px;font-weight:700;color:#0c1620;margin:0 0 2px;line-height:1}.cp-card__sub{font-size:11px;color:#6b7c8a;margin:0;line-height:1}.cp-card__status{margin-left:auto;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#eef1f4;border:1.5px solid #d3dce3;display:flex;align-items:center;justify-content:center;transition:all .2s}.cp-card__status svg{width:14px;height:14px}.cp-card__status svg path{fill:#6b7c8a}.cp-card__status span{font-size:12px;font-weight:700;color:#6b7c8a}.cp-card__status--done{background:#28a745;border-color:#28a745}.cp-card__status--done svg path{fill:#fff}.cp-card__body{padding:20px 24px 16px}@media (max-width: 480px){.cp-card__body{padding:16px 16px 12px}}.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.cp-row.cp-row-triple,.cp-row.cp-row--3{grid-template-columns:1fr 1fr 1fr}@media (max-width: 640px){.cp-row.cp-row--3{grid-template-columns:1fr 1fr}}@media (max-width: 560px){.cp-row{grid-template-columns:1fr}.cp-row.cp-row-triple,.cp-row.cp-row--3{grid-template-columns:1fr 1fr}}@media (max-width: 400px){.cp-row.cp-row-triple,.cp-row.cp-row--3{grid-template-columns:1fr}}.cp-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width: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-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-pw-success{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#16a34a;margin:4px 0 10px}.cp-pw-success svg path{fill:#16a34a}.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-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-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-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-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-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;margin-top:10px;background:#4077ad;border:none;border-radius:6px;font-size:13.5px;font-weight:700;letter-spacing:.3px;color:#fff;cursor:pointer;text-decoration:none;transition:background .15s,box-shadow .15s,transform .1s;font-family:inherit}.cp-btn:hover:not(:disabled){background:#335f8a;box-shadow:0 4px 12px #4077ad59}.cp-btn:active:not(:disabled){transform:scale(.99)}.cp-btn:disabled{opacity:.6;cursor:not-allowed}.cp-btn--submit{height:52px;font-size:15px;letter-spacing:.5px;background:linear-gradient(135deg,#4077ad,#335f8a);box-shadow:0 2px 8px #4077ad40;border-radius:8px;margin-top:0}.cp-btn--submit:hover:not(:disabled){box-shadow:0 6px 18px #4077ad66;filter:brightness(1.05)}.cp-btn--outline{background:#fff;color:#4077ad;border:1.5px solid #4077AD}.cp-btn--outline:hover:not(:disabled){background:#4077ad0d;box-shadow:none}.cp-btn--ghost{background:transparent;color:#6b7c8a;border:1.5px solid #d3dce3}.cp-btn--ghost:hover:not(:disabled){border-color:#4077ad;color:#4077ad;box-shadow:none}.cp-btn--sm{height:38px;font-size:12.5px}.cp-btn-link{background:none;border:none;font-family:inherit;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;margin-top:8px;padding:6px 0;text-decoration:underline}.cp-btn-link:hover{color:#4077ad}.cp-spinner{display:inline-block;width:15px;height:15px;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}.cp-spinner--sm{width:11px;height:11px;border-color:#4077ad4d;border-top-color:#4077ad}@keyframes cp-spin{to{transform:rotate(360deg)}}.cp-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:14px;background:#f8fafc;border:1px solid #e2eaf2;border-radius:6px}.cp-toggle-row__info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.cp-toggle-row__label{font-size:13px;font-weight:600;color:#0c1620}.cp-toggle-row__label em{font-style:normal;font-size:11px;font-weight:500;color:#6b7c8a;margin-left:4px}.cp-toggle-row__hint{font-size:11px;color:#6b7c8a}.cp-toggle-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;cursor:pointer}.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(18px)}.cp-toggle-knob{position:absolute;inset:0;background:#c8d5e0;border-radius:24px;transition:background .2s;cursor:pointer}.cp-toggle-knob:before{content:\"\";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .22s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0003}.cp-otp-wrap{margin-top:4px}.cp-otp-hint{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#6b7c8a;margin:0 0 12px}.cp-otp-hint svg path{fill:#6b7c8a}.cp-otp-hint strong{color:#0c1620}.cp-otp-timer{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.18);border-radius:99px;padding:4px 12px;margin-bottom:14px}.cp-otp-timer svg path{fill:#4077ad}.cp-otp-timer--expired{color:#dc3545;background:#dc354512;border-color:#dc354533}.cp-otp-timer--expired svg path{fill:#dc3545}.cp-otp-input{letter-spacing:.15em;font-size:16px;font-weight:600}.cp-otp-actions{display:flex;flex-direction:column;gap:0;margin-top:4px}.cp-form-footer{margin:16px 24px 0;background:#fff;border:1px solid #e2eaf2;border-radius:10px;padding:20px 24px;box-shadow:0 1px 3px #0000000a}@media (max-width: 860px){.cp-form-footer{margin:12px 16px 0}}@media (max-width: 480px){.cp-form-footer{margin:10px 12px 0;padding:16px;border-radius:8px}}.cp-terms{margin:0 0 16px}.cp-terms__label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:12.5px;color:#6b7c8a;line-height:1.7;margin:0}.cp-terms__label a{color:#4077ad;text-decoration:underline;font-weight:600}.cp-terms__label a:hover{color:#335f8a}.cp-terms__check{position:absolute;opacity:0;width:0;height:0}.cp-terms__box{width:17px;height:17px;flex-shrink:0;margin-top:2px;border:2px solid #d3dce3;border-radius:4px;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}.cp-terms__check:checked~.cp-terms__box{background:#4077ad;border-color:#4077ad}.cp-upload-area{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:120px;border:2px dashed #d3dce3;border-radius:6px;background:#eef1f4;cursor:pointer;transition:border-color .15s,background .15s;overflow:hidden}.cp-upload-area:hover{border-color:#4077ad;background:#4077ad08}.cp-upload-hidden{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.cp-upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px;text-align:center;pointer-events:none}.cp-upload-placeholder svg{width:32px;height:32px;opacity:.5}.cp-upload-placeholder svg path{fill:#6b7c8a}.cp-upload-placeholder span{font-size:12.5px;font-weight:600;color:#6b7c8a}.cp-upload-placeholder small{font-size:11px;color:#95a2ad}.cp-upload-preview{width:100%;object-fit:cover;display:block}.cp-upload-preview--avatar{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 8px #0000001f;margin:14px auto 0}.cp-upload-preview--logo{max-width:180px;max-height:80px;width:auto;height:auto;object-fit:contain;margin:14px auto 0}.cp-upload-change{font-size:11px;font-weight:600;color:#4077ad;margin-bottom:10px;pointer-events:none}.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-logout-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;border:1.5px solid #e2eaf2;background:#fff;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0}.cp-logout-btn svg{width:16px;height:16px}.cp-logout-btn svg path{fill:#6b7c8a}.cp-logout-btn:hover{border-color:#dc3545;color:#dc3545}.cp-logout-btn:hover svg path{fill:#dc3545}.cp-logout-btn--mobile{margin-left:auto}.cp-biz-layout{display:grid;grid-template-columns:1fr 160px;gap:20px;align-items:start}@media (max-width: 640px){.cp-biz-layout{grid-template-columns:1fr}}.cp-biz-fields{display:flex;flex-direction:column}.cp-biz-logo{display:flex;flex-direction:column;gap:8px}.cp-biz-logo__label{font-size:11.5px;font-weight:600;color:#3a4a57}.cp-biz-logo__area{border:2px dashed #d3dce3;border-radius:6px;background:#f8fafc;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:140px;padding:12px;text-align:center;transition:border-color .15s}.cp-biz-logo__area:hover{border-color:#4077ad}.cp-biz-logo__img{width:100%;max-height:100px;object-fit:contain;border-radius:4px}.cp-biz-logo__change{font-size:11px;color:#6b7c8a;margin-top:6px;display:block}.cp-biz-logo__placeholder{display:flex;flex-direction:column;align-items:center;gap:6px}.cp-biz-logo__placeholder svg{width:28px;height:28px}.cp-biz-logo__placeholder svg path{fill:#aab8c2}.cp-biz-logo__placeholder span{font-size:11.5px;font-weight:600;color:#6b7c8a}.cp-biz-logo__placeholder small{font-size:10px;color:#aab8c2}.cp-lookup-loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:48px 44px!important}.cp-lookup-loading p{font-size:14px;color:#6b7c8a;margin:0}.cp-lookup-spinner{width:32px;height:32px;border:3px solid rgba(64,119,173,.2);border-top-color:#4077ad}.cp-anf-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f0f4f8;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;padding:24px}.cp-anf-wrap{width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:24px}.cp-anf-brand{display:flex;align-items:center;justify-content:center}.cp-anf-logo{max-height:44px;max-width:180px;object-fit:contain}.cp-anf-company{font-size:20px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-anf-card{width:100%;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 6px -1px #00000012,0 16px 40px -4px #0c16201f;border:1px solid #e2eaf2}.cp-anf-card__header{display:flex;align-items:center;gap:16px;padding:28px 28px 20px;border-bottom:1px solid #f0f4f8}.cp-anf-card__identity{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.cp-anf-card__name{font-size:18px;font-weight:800;color:#0c1620;margin:0;line-height:1.2}.cp-anf-card__email{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#6b7c8a}.cp-anf-card__email svg{width:12px;height:12px}.cp-anf-card__email svg path{fill:#6b7c8a}.cp-anf-card__details{padding:16px 28px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid #f0f4f8}.cp-anf-card__notice{display:flex;align-items:center;gap:10px;padding:14px 28px;background:#4077ad0a;border-bottom:1px solid #f0f4f8;font-size:13px;color:#4077ad;font-weight:600}.cp-anf-card__notice svg{width:18px;height:18px;flex-shrink:0}.cp-anf-card__notice svg path{fill:#4077ad}.cp-anf-avatar{width:60px;height:60px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#4077ad,#335f8a);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:-.5px}.cp-anf-roles{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}.cp-anf-role{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;padding:3px 8px;border-radius:99px;background:#4077ad14;color:#4077ad;border:1px solid rgba(64,119,173,.18)}.cp-anf-detail{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:#6b7c8a;line-height:1.5}.cp-anf-detail svg{width:14px;height:14px;flex-shrink:0;margin-top:1px}.cp-anf-detail svg path{fill:#6b7c8a}.cp-anf-signin-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;padding:0 24px;background:linear-gradient(135deg,#4077ad,#335f8a);border:none;border-radius:0;font-size:15px;font-weight:700;letter-spacing:.3px;color:#fff;cursor:pointer;text-decoration:none;font-family:inherit;transition:filter .15s,box-shadow .15s;-webkit-appearance:none}.cp-anf-signin-btn svg{width:18px;height:18px;flex-shrink:0}.cp-anf-signin-btn svg path{fill:#fff}.cp-anf-signin-btn:hover{filter:brightness(1.07);box-shadow:inset 0 -3px #00000026}\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: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.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: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.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 Created!</h2>\r\n    <p>Your account has been successfully activated. You'll be redirected to sign in shortly.</p>\r\n    <a [href]=\"libConfig?.loginUrl ?? libConfig?.navigateUrl ?? libConfig?.dashboardUrl ?? '#'\" class=\"cp-btn\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\"><path d=\"M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z\" fill=\"#fff\"/></svg>\r\n      Sign In to Your Account\r\n    </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      <!-- Left panel \u2014 always shown (activation / update flow) -->\r\n      <div class=\"cp-left-hero\">\r\n        <div class=\"cp-left-badge\">{{ userHasExistingDetails ? 'Profile Update' : 'Account Activation' }}</div>\r\n        <h1>{{ userHasExistingDetails ? 'Update your' : 'Welcome to' }} <span class=\"cp-hero-brand\">{{ privacyAndTerms?.companyName }}</span></h1>\r\n        <p>{{ userHasExistingDetails\r\n          ? 'Your account is already set up. Update your details below and save the changes.'\r\n          : 'Your account is ready. Complete this short form to gain full access to the platform.' }}</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\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 Profile / Activation Form \u2500\u2500 -->\r\n    <div class=\"cp-form-wrap\">\r\n\r\n      <div class=\"cp-form-header\">\r\n        <h2>{{ userHasExistingDetails ? 'Update Your Profile' : 'Activate Your Account' }}</h2>\r\n        <p>{{ userHasExistingDetails\r\n          ? 'Review and update your details below, then save to apply the changes.'\r\n          : 'Your ' + (privacyAndTerms?.companyName || 'account') + ' 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      </div>\r\n\r\n      <form [formGroup]=\"claimForm\" (ngSubmit)=\"onSubmit()\" novalidate>\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\" *ngIf=\"showRoleSelect\">\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 -->\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 -->\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          <!-- NEW USER: password fields in main form submit -->\r\n          <div class=\"cp-row\" *ngIf=\"!userHasExistingDetails\">\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            <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          <!-- EXISTING USER: OTP password reset flow (ref: user-profile changePassword / verifyOtp) -->\r\n          <ng-container *ngIf=\"userHasExistingDetails && resetPasswordEnabled\">\r\n\r\n            <!-- Step 1: Enter new password + trigger OTP -->\r\n            <ng-container *ngIf=\"passwordStep === 1\">\r\n              <div class=\"cp-row\">\r\n                <div class=\"cp-field\">\r\n                  <label for=\"password\">New Password</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\" autocomplete=\"new-password\" />\r\n                    <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showPassword = !showPassword\">\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>\r\n                <div class=\"cp-field\">\r\n                  <label for=\"confirmPassword\">Confirm Password</label>\r\n                  <div class=\"cp-pw-wrap\">\r\n                    <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPassword\" formControlName=\"confirmPassword\"\r\n                      placeholder=\"Repeat password\" autocomplete=\"new-password\" />\r\n                    <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showConfirmPassword = !showConfirmPassword\">\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>\r\n              </div>\r\n              <div class=\"cp-error\" *ngIf=\"passwordChangeError\">{{ passwordChangeError }}</div>\r\n              <div class=\"cp-pw-success\" *ngIf=\"passwordChangeSuccess\">\r\n                <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n                Password changed successfully.\r\n              </div>\r\n              <button type=\"button\" class=\"cp-btn cp-btn--otp\" (click)=\"changePassword()\" [disabled]=\"isPasswordChanging\">\r\n                <span *ngIf=\"isPasswordChanging\" class=\"cp-spinner cp-spinner-btn\"></span>\r\n                {{ isPasswordChanging ? 'Sending\u2026' : 'Send Verification Code' }}\r\n              </button>\r\n            </ng-container>\r\n\r\n            <!-- Step 2: Enter OTP + verify -->\r\n            <ng-container *ngIf=\"passwordStep === 2\">\r\n              <div class=\"cp-otp-wrap\">\r\n                <p class=\"cp-otp-hint\">\r\n                  <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;flex-shrink:0\"><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                  Verification code sent to <strong>{{ userEmail }}</strong>\r\n                </p>\r\n                <div class=\"cp-otp-timer\" [class.cp-otp-timer--expired]=\"otpExpired\">\r\n                  <svg viewBox=\"0 0 24 24\" style=\"width:15px;height:15px\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\"/></svg>\r\n                  <span *ngIf=\"!otpExpired\">{{ otpMinutes }}:{{ otpSeconds < 10 ? '0' + otpSeconds : otpSeconds }}</span>\r\n                  <span *ngIf=\"otpExpired\">Code expired</span>\r\n                </div>\r\n                <div class=\"cp-field\">\r\n                  <label for=\"otpInput\">Verification Code</label>\r\n                  <input type=\"text\" id=\"otpInput\" [(ngModel)]=\"otpValue\"\r\n                    [ngModelOptions]=\"{standalone: true}\"\r\n                    placeholder=\"Enter 6-digit code\" maxlength=\"6\" inputmode=\"numeric\"\r\n                    class=\"cp-otp-input\" />\r\n                </div>\r\n                <div class=\"cp-error\" *ngIf=\"passwordChangeError\">{{ passwordChangeError }}</div>\r\n                <div class=\"cp-otp-actions\">\r\n                  <button type=\"button\" class=\"cp-btn\" (click)=\"verifyPasswordOtp()\"\r\n                    [disabled]=\"otpExpired || !otpValue || isPasswordChanging\">\r\n                    <span *ngIf=\"isPasswordChanging\" class=\"cp-spinner cp-spinner-btn\"></span>\r\n                    {{ isPasswordChanging ? 'Verifying\u2026' : 'Verify & Change Password' }}\r\n                  </button>\r\n                  <button type=\"button\" class=\"cp-btn cp-btn--secondary\" *ngIf=\"canResendOtp\"\r\n                    (click)=\"changePassword(true)\" [disabled]=\"isPasswordChanging\">\r\n                    Resend Code\r\n                  </button>\r\n                  <button type=\"button\" class=\"cp-btn-link\" (click)=\"cancelPasswordChange()\">Cancel</button>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n\r\n          </ng-container><!-- end OTP password reset -->\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-area\" (click)=\"cpLogoInput.click()\">\r\n              <input #cpLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\"\r\n                (change)=\"onBusinessLogoChange($event)\" class=\"cp-upload-hidden\" />\r\n              <ng-container *ngIf=\"logoPreviewUrl; else logoPlaceholder\">\r\n                <img [src]=\"logoPreviewUrl\" alt=\"Business logo preview\" class=\"cp-upload-preview cp-upload-preview--logo\" />\r\n                <span class=\"cp-upload-change\">Click to change</span>\r\n              </ng-container>\r\n              <ng-template #logoPlaceholder>\r\n                <div class=\"cp-upload-placeholder\">\r\n                  <svg viewBox=\"0 0 24 24\"><path d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"/></svg>\r\n                  <span>Click to upload company logo</span>\r\n                  <small>PNG, JPG, JPEG</small>\r\n                </div>\r\n              </ng-template>\r\n            </div>\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-area\" (click)=\"cpProfileInput.click()\">\r\n            <input #cpProfileInput type=\"file\" accept=\".png,.jpg,.jpeg\"\r\n              (change)=\"onProfileFileChange($event)\" class=\"cp-upload-hidden\" />\r\n            <ng-container *ngIf=\"profilePreviewUrl; else profilePlaceholder\">\r\n              <img [src]=\"profilePreviewUrl\" alt=\"Profile picture preview\" class=\"cp-upload-preview cp-upload-preview--avatar\" />\r\n              <span class=\"cp-upload-change\">Click to change</span>\r\n            </ng-container>\r\n            <ng-template #profilePlaceholder>\r\n              <div class=\"cp-upload-placeholder\">\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                <span>Click to upload profile picture</span>\r\n                <small>PNG, JPG, JPEG</small>\r\n              </div>\r\n            </ng-template>\r\n          </div>\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>{{ uploadStatus || (isSubmitting ? 'Processing\u2026' : (userHasExistingDetails ? 'Save Changes' : '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}@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-invalid-page,.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-invalid-card,.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-invalid-card h2,.cp-success-card h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-invalid-card p,.cp-success-card p{font-size:14px;color:#6b7c8a;line-height:1.7;margin-bottom:28px}.cp-invalid-icon,.cp-success-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-invalid-icon svg,.cp-success-icon svg{width:32px;height:32px}.cp-invalid-icon{background:#dc35451a}.cp-invalid-icon svg path{fill:#dc3545}.cp-success-icon{background:#28a7451a}.cp-success-icon svg path{fill:#28a745}.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 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-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-pw-success{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#16a34a;margin:4px 0 10px}.cp-pw-success svg path{fill:#16a34a}.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-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-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-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-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-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-btn--otp{margin-top:12px}.cp-btn--secondary{background:#fff;color:#4077ad;border:1.5px solid #4077AD;margin-top:8px}.cp-btn--secondary:hover:not(:disabled){background:#4077ad0f}.cp-btn-link{background:none;border:none;font-family:inherit;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;margin-top:8px;padding:6px 0;text-decoration:underline}.cp-btn-link:hover{color:#4077ad}.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-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-otp-wrap{margin-top:4px}.cp-otp-hint{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#6b7c8a;margin:0 0 12px}.cp-otp-hint svg path{fill:#6b7c8a}.cp-otp-hint strong{color:#0c1620}.cp-otp-timer{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.18);border-radius:99px;padding:4px 12px;margin-bottom:14px}.cp-otp-timer svg path{fill:#4077ad}.cp-otp-timer--expired{color:#dc3545;background:#dc354512;border-color:#dc354533}.cp-otp-timer--expired svg path{fill:#dc3545}.cp-otp-input{letter-spacing:.15em;font-size:16px;font-weight:600}.cp-otp-actions{display:flex;flex-direction:column;gap:0;margin-top:4px}.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-upload-area{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:120px;border:2px dashed #d3dce3;border-radius:6px;background:#eef1f4;cursor:pointer;transition:border-color .15s,background .15s;overflow:hidden}.cp-upload-area:hover{border-color:#4077ad;background:#4077ad08}.cp-upload-hidden{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.cp-upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px;text-align:center;pointer-events:none}.cp-upload-placeholder svg{width:32px;height:32px;opacity:.5}.cp-upload-placeholder svg path{fill:#6b7c8a}.cp-upload-placeholder span{font-size:12.5px;font-weight:600;color:#6b7c8a}.cp-upload-placeholder small{font-size:11px;color:#95a2ad}.cp-upload-preview{width:100%;object-fit:cover;display:block}.cp-upload-preview--avatar{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 8px #0000001f;margin:14px auto 0}.cp-upload-preview--logo{max-width:180px;max-height:80px;width:auto;height:auto;object-fit:contain;margin:14px auto 0}.cp-upload-change{font-size:11px;font-weight:600;color:#4077ad;margin-bottom:10px;pointer-events:none}.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}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: ClaimProcessService }, { type: i7.BsModalService }, { type: i1$2.TokenService }, { type: undefined, decorators: [{
+            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 Account Lookup: Loading \u2500\u2500\u2500 -->\r\n<div *ngIf=\"isLookingUpAccount\" class=\"cp-invalid-page\">\r\n  <div class=\"cp-invalid-card cp-lookup-loading\">\r\n    <span class=\"cp-spinner cp-lookup-spinner\"></span>\r\n    <p>Looking up your account\u2026</p>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Account Found (auth0 record exists, no active userId) \u2500\u2500\u2500 -->\r\n<div *ngIf=\"!isLookingUpAccount && auth0UserData\" class=\"cp-anf-page\">\r\n  <div class=\"cp-anf-wrap\">\r\n\r\n    <div class=\"cp-anf-brand\" *ngIf=\"privacyAndTerms?.logoUrl || privacyAndTerms?.companyName\">\r\n      <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\"\r\n        [alt]=\"privacyAndTerms?.companyName\" class=\"cp-anf-logo\" />\r\n      <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-anf-company\">{{ privacyAndTerms?.companyName }}</span>\r\n    </div>\r\n\r\n    <div class=\"cp-anf-card\">\r\n\r\n      <div class=\"cp-anf-card__header\">\r\n        <div class=\"cp-anf-avatar\">\r\n          {{ (auth0UserData.userDetails?.firstName?.[0] || '') + (auth0UserData.userDetails?.lastName?.[0] || '') || '?' }}\r\n        </div>\r\n        <div class=\"cp-anf-card__identity\">\r\n          <h2 class=\"cp-anf-card__name\">\r\n            {{ auth0UserData.userDetails?.firstName }} {{ auth0UserData.userDetails?.lastName }}\r\n          </h2>\r\n          <span class=\"cp-anf-card__email\">\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            {{ auth0UserData.email }}\r\n          </span>\r\n          <div class=\"cp-anf-roles\" *ngIf=\"auth0UserData.userDetails?.userRoles?.length\">\r\n            <span class=\"cp-anf-role\"\r\n              *ngFor=\"let r of auth0UserData.userDetails.userRoles\">\r\n              {{ r.roleName }}\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"cp-anf-card__details\">\r\n        <div class=\"cp-anf-detail\" *ngIf=\"auth0UserData.userDetails?.phone\">\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          {{ auth0UserData.userDetails.phone }}\r\n        </div>\r\n        <div class=\"cp-anf-detail\" *ngIf=\"auth0UserData.userDetails?.address || auth0UserData.userDetails?.city\">\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          {{ [auth0UserData.userDetails?.address, auth0UserData.userDetails?.city, auth0UserData.userDetails?.state, auth0UserData.userDetails?.zip].filter(Boolean).join(', ') }}\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"cp-anf-card__notice\">\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        An account already exists for this email address.\r\n      </div>\r\n\r\n      <button type=\"button\" class=\"cp-anf-signin-btn\" (click)=\"navigateToLogin()\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z\" fill=\"#fff\"/></svg>\r\n        Sign In to Your Account\r\n      </button>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Account Not Found (no record at all) \u2500\u2500\u2500 -->\r\n<div *ngIf=\"!isLookingUpAccount && !auth0UserData && showAccountNotFound\" class=\"cp-invalid-page\">\r\n  <div class=\"cp-invalid-card\">\r\n    <div class=\"cp-invalid-icon cp-invalid-icon--warn\">\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 2zm-1 5h2v6h-2zm0 8h2v2h-2z\"/></svg>\r\n    </div>\r\n    <h2>Account Not Found</h2>\r\n    <p *ngIf=\"userEmail\">No account was found for <strong>{{ userEmail }}</strong>.</p>\r\n    <p *ngIf=\"!userEmail\">We couldn't find an account linked to your session.</p>\r\n    <p class=\"cp-anf-hint\">Would you like to create a new account?</p>\r\n    <button type=\"button\" class=\"cp-btn\" (click)=\"navigateToLogin()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z\" fill=\"#fff\"/></svg>\r\n      Create New Account\r\n    </button>\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>{{ userHasExistingDetails ? 'Profile Updated!' : 'Account Activated!' }}</h2>\r\n    <p>{{ userHasExistingDetails\r\n      ? 'Your profile has been saved successfully.'\r\n      : 'Your account has been successfully activated.' }}</p>\r\n    <button type=\"button\" class=\"cp-btn\" style=\"margin-top:20px\" (click)=\"navigateToDashboard()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\"><path d=\"M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z\" fill=\"#fff\"/></svg>\r\n      Go to Dashboard\r\n    </button>\r\n    <button *ngIf=\"!userHasExistingDetails\" type=\"button\" class=\"cp-btn cp-btn--ghost\" style=\"margin-top:10px\" (click)=\"navigateToLogin()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;flex-shrink:0\"><path d=\"M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z\"/></svg>\r\n      Sign In Instead\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Main Layout \u2500\u2500\u2500 -->\r\n<div *ngIf=\"!noEmailError && !submitSuccess && !showAccountNotFound && !auth0UserData && !isLookingUpAccount && !isInitializing\" class=\"cp-page\">\r\n\r\n  <!-- Left Panel \u2014 Status Tracker -->\r\n  <aside class=\"cp-left\">\r\n    <div class=\"cp-left-inner\">\r\n\r\n      <!-- Logo -->\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      <!-- User identity card -->\r\n      <div class=\"cp-sb-user\">\r\n        <div class=\"cp-sb-avatar\">\r\n          <img *ngIf=\"profilePreviewUrl\" [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-sb-avatar__img\" />\r\n          <span *ngIf=\"!profilePreviewUrl\" class=\"cp-sb-avatar__initials\">\r\n            {{ (f['firstName'].value?.[0] || '') + (f['lastName'].value?.[0] || '') || '?' }}\r\n          </span>\r\n        </div>\r\n        <div class=\"cp-sb-user__info\">\r\n          <strong class=\"cp-sb-user__name\">\r\n            {{ (f['firstName'].value || f['lastName'].value)\r\n               ? (f['firstName'].value + ' ' + f['lastName'].value)\r\n               : 'Your Profile' }}\r\n          </strong>\r\n          <span class=\"cp-sb-user__email\">{{ userEmail }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Overall progress bar -->\r\n      <div class=\"cp-sb-progress\">\r\n        <div class=\"cp-sb-progress__header\">\r\n          <span>Profile Completion</span>\r\n          <strong>{{ overallProgress }}%</strong>\r\n        </div>\r\n        <div class=\"cp-sb-progress__track\">\r\n          <div class=\"cp-sb-progress__fill\" [style.width]=\"overallProgress + '%'\"></div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Section status steps -->\r\n      <ul class=\"cp-steps\">\r\n\r\n        <li class=\"cp-step\" [class.cp-step--done]=\"sectionPersonalDone\">\r\n          <span class=\"cp-step__icon\">\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          </span>\r\n          <div class=\"cp-step__body\">\r\n            <span class=\"cp-step__label\">Personal Details</span>\r\n            <span class=\"cp-step__sub\">First name, last name, phone</span>\r\n          </div>\r\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionPersonalDone\">\r\n            <svg *ngIf=\"sectionPersonalDone\" 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 *ngIf=\"!sectionPersonalDone\">{{ sectionPersonalDone ? '' : '!' }}</span>\r\n          </span>\r\n        </li>\r\n\r\n        <li class=\"cp-step\" [class.cp-step--done]=\"sectionAddressDone\">\r\n          <span class=\"cp-step__icon\">\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          </span>\r\n          <div class=\"cp-step__body\">\r\n            <span class=\"cp-step__label\">Address</span>\r\n            <span class=\"cp-step__sub\">Street, city, state, zip</span>\r\n          </div>\r\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionAddressDone\">\r\n            <svg *ngIf=\"sectionAddressDone\" 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        </li>\r\n\r\n        <li class=\"cp-step\" [class.cp-step--done]=\"sectionRoleDone\">\r\n          <span class=\"cp-step__icon\">\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          </span>\r\n          <div class=\"cp-step__body\">\r\n            <span class=\"cp-step__label\">Account Setup</span>\r\n            <span class=\"cp-step__sub\">Role selection{{ (setPasswordEnabled || resetPasswordEnabled) ? ', password' : '' }}</span>\r\n          </div>\r\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionRoleDone && sectionPasswordDone\">\r\n            <svg *ngIf=\"sectionRoleDone && sectionPasswordDone\" 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        </li>\r\n\r\n        <li class=\"cp-step\" [class.cp-step--done]=\"sectionPhotoDone\">\r\n          <span class=\"cp-step__icon\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"/></svg>\r\n          </span>\r\n          <div class=\"cp-step__body\">\r\n            <span class=\"cp-step__label\">Profile Photo</span>\r\n            <span class=\"cp-step__sub\">{{ sectionPhotoDone ? 'Photo uploaded' : 'Upload a profile picture' }}</span>\r\n          </div>\r\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionPhotoDone\">\r\n            <svg *ngIf=\"sectionPhotoDone\" 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        </li>\r\n\r\n        <li class=\"cp-step\" *ngIf=\"isBusinessRole\" [class.cp-step--done]=\"sectionBusinessDone\">\r\n          <span class=\"cp-step__icon\">\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          </span>\r\n          <div class=\"cp-step__body\">\r\n            <span class=\"cp-step__label\">Business Info</span>\r\n            <span class=\"cp-step__sub\">Name, email, address, logo</span>\r\n          </div>\r\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionBusinessDone\">\r\n            <svg *ngIf=\"sectionBusinessDone\" 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        </li>\r\n\r\n      </ul>\r\n\r\n      <!-- Footer contact -->\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    </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 -->\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\">{{ privacyAndTerms?.companyName }}</span>\r\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-logout-btn cp-logout-btn--mobile\" (click)=\"logout()\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5-5-5zm-5 12H5V5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h7v-2z\"/></svg>\r\n        Logout\r\n      </button>\r\n    </div>\r\n\r\n    <!-- \u2500\u2500\u2500 Profile Banner \u2500\u2500\u2500 -->\r\n    <div class=\"cp-banner\">\r\n      <div class=\"cp-banner__avatar\" (click)=\"cpProfileInput.click()\" title=\"Click to upload photo\">\r\n        <input #cpProfileInput type=\"file\" accept=\".png,.jpg,.jpeg\"\r\n          (change)=\"onProfileFileChange($event)\" class=\"cp-upload-hidden\" />\r\n        <img *ngIf=\"profilePreviewUrl\" [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-banner__img\" />\r\n        <div *ngIf=\"!profilePreviewUrl\" class=\"cp-banner__initials\">\r\n          {{ (f['firstName'].value?.[0] || '') + (f['lastName'].value?.[0] || '') || '?' }}\r\n        </div>\r\n        <div class=\"cp-banner__cam\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 15.2A3.2 3.2 0 1 1 15.2 12 3.2 3.2 0 0 1 12 15.2zm6.4-9.6h-1.6l-1.6-2.4H8.8L7.2 5.6H5.6A2.4 2.4 0 0 0 3.2 8v9.6A2.4 2.4 0 0 0 5.6 20h12.8a2.4 2.4 0 0 0 2.4-2.4V8a2.4 2.4 0 0 0-2.4-2.4z\" fill=\"#fff\"/></svg>\r\n        </div>\r\n      </div>\r\n      <div class=\"cp-banner__info\">\r\n        <div class=\"cp-banner__name\">\r\n          {{ (f['firstName'].value || f['lastName'].value)\r\n             ? (f['firstName'].value + ' ' + f['lastName'].value)\r\n             : 'Your Profile' }}\r\n        </div>\r\n        <div class=\"cp-banner__meta\">\r\n          <span class=\"cp-banner__email\" *ngIf=\"userEmail\">\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            {{ userEmail }}\r\n          </span>\r\n          <span class=\"cp-banner__badge\" [class.cp-banner__badge--update]=\"userHasExistingDetails\">\r\n            {{ userHasExistingDetails ? 'Profile Update' : 'Account Activation' }}\r\n          </span>\r\n        </div>\r\n        <div class=\"cp-banner__loading\" *ngIf=\"isLoadingUser\">\r\n          <span class=\"cp-spinner cp-spinner--sm\"></span> Loading profile\u2026\r\n        </div>\r\n      </div>\r\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-logout-btn cp-logout-btn--banner\" (click)=\"logout()\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5-5-5zm-5 12H5V5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h7v-2z\"/></svg>\r\n        Sign Out\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"cp-form-wrap\">\r\n\r\n      <div class=\"cp-error cp-alert\" *ngIf=\"userLookupError\">\r\n        <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;flex-shrink:0\"><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        {{ userLookupError }}\r\n      </div>\r\n\r\n      <form [formGroup]=\"claimForm\" (ngSubmit)=\"onSubmit()\" novalidate>\r\n\r\n        <!-- \u2550\u2550\u2550 SECTION: Personal Details \u2550\u2550\u2550 -->\r\n        <div class=\"cp-card\">\r\n          <div class=\"cp-card__header\">\r\n            <span class=\"cp-card__icon\">\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            </span>\r\n            <div>\r\n              <h3 class=\"cp-card__title\">Personal Details</h3>\r\n              <p class=\"cp-card__sub\">Your full name and contact number</p>\r\n            </div>\r\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionPersonalDone\">\r\n              <svg *ngIf=\"sectionPersonalDone\" 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 *ngIf=\"!sectionPersonalDone\">\u2014</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"cp-card__body\">\r\n            <div class=\"cp-row cp-row--3\">\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\" placeholder=\"Jane\"\r\n                  [class.is-invalid]=\"f['firstName'].invalid && f['firstName'].touched\" autocomplete=\"given-name\" />\r\n                <div class=\"cp-error\" *ngIf=\"f['firstName'].invalid && f['firstName'].touched\">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\" placeholder=\"Doe\"\r\n                  [class.is-invalid]=\"f['lastName'].invalid && f['lastName'].touched\" autocomplete=\"family-name\" />\r\n                <div class=\"cp-error\" *ngIf=\"f['lastName'].invalid && f['lastName'].touched\">Required</div>\r\n              </div>\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\" placeholder=\"(555) 123-4567\"\r\n                  maxlength=\"14\" [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\">Required</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \u2550\u2550\u2550 SECTION: Address \u2550\u2550\u2550 -->\r\n        <div class=\"cp-card\">\r\n          <div class=\"cp-card__header\">\r\n            <span class=\"cp-card__icon\">\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            </span>\r\n            <div>\r\n              <h3 class=\"cp-card__title\">Address</h3>\r\n              <p class=\"cp-card__sub\">Your residential or mailing address</p>\r\n            </div>\r\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionAddressDone\">\r\n              <svg *ngIf=\"sectionAddressDone\" 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 *ngIf=\"!sectionAddressDone\">\u2014</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"cp-card__body\">\r\n            <div class=\"cp-field\">\r\n              <label for=\"address\">Street Address</label>\r\n              <input type=\"text\" id=\"address\" formControlName=\"address\" placeholder=\"123 Main Street\"\r\n                ngx-google-places-autocomplete [options]=\"googleOptions\"\r\n                (onAddressChange)=\"onAddressChange($event)\" autocomplete=\"off\" />\r\n            </div>\r\n            <div class=\"cp-row cp-row--3\">\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          </div>\r\n        </div>\r\n\r\n        <!-- \u2550\u2550\u2550 SECTION: Account Setup \u2550\u2550\u2550 -->\r\n        <div class=\"cp-card\">\r\n          <div class=\"cp-card__header\">\r\n            <span class=\"cp-card__icon\">\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            </span>\r\n            <div>\r\n              <h3 class=\"cp-card__title\">Account Setup</h3>\r\n              <p class=\"cp-card__sub\">Role and password configuration</p>\r\n            </div>\r\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionRoleDone && sectionPasswordDone\">\r\n              <svg *ngIf=\"sectionRoleDone && sectionPasswordDone\" 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 *ngIf=\"!(sectionRoleDone && sectionPasswordDone)\">\u2014</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"cp-card__body\">\r\n\r\n            <div class=\"cp-field\" *ngIf=\"showRoleSelect\">\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            <ng-container *ngIf=\"!isLoadingUser\">\r\n\r\n              <!-- New user: optional password toggle -->\r\n              <div class=\"cp-toggle-row\" *ngIf=\"!userHasExistingDetails\">\r\n                <div class=\"cp-toggle-row__info\">\r\n                  <span class=\"cp-toggle-row__label\">Set Password <em>(Optional)</em></span>\r\n                  <span class=\"cp-toggle-row__hint\">Leave off to use existing credentials</span>\r\n                </div>\r\n                <label class=\"cp-toggle-switch\">\r\n                  <input type=\"checkbox\" [checked]=\"setPasswordEnabled\" (change)=\"toggleSetPassword()\">\r\n                  <span class=\"cp-toggle-knob\"></span>\r\n                </label>\r\n              </div>\r\n\r\n              <div class=\"cp-row\" *ngIf=\"!userHasExistingDetails && setPasswordEnabled\">\r\n                <div class=\"cp-field\">\r\n                  <label for=\"password\">Password</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\" autocomplete=\"new-password\" />\r\n                    <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showPassword = !showPassword\">\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'].errors?.['minlength'] && f['password'].touched\">Min. 8 characters</div>\r\n                </div>\r\n                <div class=\"cp-field\">\r\n                  <label for=\"confirmPassword\">Confirm Password</label>\r\n                  <div class=\"cp-pw-wrap\">\r\n                    <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPassword\"\r\n                      formControlName=\"confirmPassword\" placeholder=\"Repeat password\"\r\n                      [class.is-invalid]=\"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                      <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=\"claimForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched\">Passwords do not match</div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Existing user: reset toggle -->\r\n              <div class=\"cp-toggle-row\" *ngIf=\"userHasExistingDetails\">\r\n                <div class=\"cp-toggle-row__info\">\r\n                  <span class=\"cp-toggle-row__label\">Reset Password</span>\r\n                  <span class=\"cp-toggle-row__hint\">Enable to change your current password</span>\r\n                </div>\r\n                <label class=\"cp-toggle-switch\">\r\n                  <input type=\"checkbox\" [checked]=\"resetPasswordEnabled\" (change)=\"toggleResetPassword()\">\r\n                  <span class=\"cp-toggle-knob\"></span>\r\n                </label>\r\n              </div>\r\n\r\n              <ng-container *ngIf=\"userHasExistingDetails && resetPasswordEnabled\">\r\n                <ng-container *ngIf=\"passwordStep === 1\">\r\n                  <div class=\"cp-row\">\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"password\">New Password</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\" autocomplete=\"new-password\" />\r\n                        <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showPassword = !showPassword\">\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>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"confirmPassword\">Confirm Password</label>\r\n                      <div class=\"cp-pw-wrap\">\r\n                        <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPassword\"\r\n                          formControlName=\"confirmPassword\" placeholder=\"Repeat password\" autocomplete=\"new-password\" />\r\n                        <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showConfirmPassword = !showConfirmPassword\">\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>\r\n                  </div>\r\n                  <div class=\"cp-error\" *ngIf=\"passwordChangeError\">{{ passwordChangeError }}</div>\r\n                  <div class=\"cp-pw-success\" *ngIf=\"passwordChangeSuccess\">\r\n                    <svg viewBox=\"0 0 24 24\" style=\"width:15px;height:15px\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n                    Password changed successfully.\r\n                  </div>\r\n                  <button type=\"button\" class=\"cp-btn cp-btn--outline cp-btn--sm\" (click)=\"changePassword()\" [disabled]=\"isPasswordChanging\">\r\n                    <span *ngIf=\"isPasswordChanging\" class=\"cp-spinner cp-spinner-btn\"></span>\r\n                    {{ isPasswordChanging ? 'Sending\u2026' : 'Send Verification Code' }}\r\n                  </button>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"passwordStep === 2\">\r\n                  <div class=\"cp-otp-wrap\">\r\n                    <p class=\"cp-otp-hint\">\r\n                      <svg viewBox=\"0 0 24 24\" style=\"width:15px;height:15px;flex-shrink:0\"><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                      Code sent to <strong>{{ userEmail }}</strong>\r\n                    </p>\r\n                    <div class=\"cp-otp-timer\" [class.cp-otp-timer--expired]=\"otpExpired\">\r\n                      <svg viewBox=\"0 0 24 24\" style=\"width:14px;height:14px\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\"/></svg>\r\n                      <span *ngIf=\"!otpExpired\">{{ otpMinutes }}:{{ otpSeconds < 10 ? '0' + otpSeconds : otpSeconds }}</span>\r\n                      <span *ngIf=\"otpExpired\">Code expired</span>\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"otpInput\">Enter 6-digit code</label>\r\n                      <input type=\"text\" id=\"otpInput\" [(ngModel)]=\"otpValue\" [ngModelOptions]=\"{standalone: true}\"\r\n                        placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\" maxlength=\"6\" inputmode=\"numeric\" class=\"cp-otp-input\" />\r\n                    </div>\r\n                    <div class=\"cp-error\" *ngIf=\"passwordChangeError\">{{ passwordChangeError }}</div>\r\n                    <div class=\"cp-otp-actions\">\r\n                      <button type=\"button\" class=\"cp-btn\" (click)=\"verifyPasswordOtp()\"\r\n                        [disabled]=\"otpExpired || !otpValue || isPasswordChanging\">\r\n                        <span *ngIf=\"isPasswordChanging\" class=\"cp-spinner cp-spinner-btn\"></span>\r\n                        {{ isPasswordChanging ? 'Verifying\u2026' : 'Verify & Change Password' }}\r\n                      </button>\r\n                      <button type=\"button\" class=\"cp-btn cp-btn--ghost\" *ngIf=\"canResendOtp\"\r\n                        (click)=\"changePassword(true)\" [disabled]=\"isPasswordChanging\">Resend Code</button>\r\n                      <button type=\"button\" class=\"cp-btn-link\" (click)=\"cancelPasswordChange()\">Cancel</button>\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-container>\r\n\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \u2550\u2550\u2550 SECTION: Business Information \u2550\u2550\u2550 -->\r\n        <div class=\"cp-card\" *ngIf=\"isBusinessRole\">\r\n          <div class=\"cp-card__header\">\r\n            <span class=\"cp-card__icon\">\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            </span>\r\n            <div>\r\n              <h3 class=\"cp-card__title\">Business Information</h3>\r\n              <p class=\"cp-card__sub\">Company details and branding</p>\r\n            </div>\r\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionBusinessDone\">\r\n              <svg *ngIf=\"sectionBusinessDone\" 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 *ngIf=\"!sectionBusinessDone\">\u2014</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"cp-card__body\">\r\n            <div class=\"cp-biz-layout\">\r\n              <div class=\"cp-biz-fields\">\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\" placeholder=\"Acme Corp\"\r\n                      [class.is-invalid]=\"f['businessName'].invalid && f['businessName'].touched\" />\r\n                    <div class=\"cp-error\" *ngIf=\"f['businessName'].invalid && f['businessName'].touched\">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\" placeholder=\"info@acme.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']\">Required</span>\r\n                      <span *ngIf=\"f['businessEmail'].errors?.['email']\">Invalid email</span>\r\n                    </div>\r\n                  </div>\r\n                </div>\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)\" autocomplete=\"off\" />\r\n                </div>\r\n                <div class=\"cp-row cp-row--3\">\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              </div>\r\n              <div class=\"cp-biz-logo\">\r\n                <label class=\"cp-biz-logo__label\">Business Logo</label>\r\n                <div class=\"cp-biz-logo__area\" (click)=\"cpLogoInput.click()\">\r\n                  <input #cpLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\"\r\n                    (change)=\"onBusinessLogoChange($event)\" class=\"cp-upload-hidden\" />\r\n                  <ng-container *ngIf=\"logoPreviewUrl; else logoPlaceholder\">\r\n                    <img [src]=\"logoPreviewUrl\" alt=\"Business logo\" class=\"cp-biz-logo__img\" />\r\n                    <span class=\"cp-biz-logo__change\">Change</span>\r\n                  </ng-container>\r\n                  <ng-template #logoPlaceholder>\r\n                    <div class=\"cp-biz-logo__placeholder\">\r\n                      <svg viewBox=\"0 0 24 24\"><path d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"/></svg>\r\n                      <span>Upload Logo</span>\r\n                      <small>PNG \u00B7 JPG</small>\r\n                    </div>\r\n                  </ng-template>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \u2550\u2550\u2550 Footer: Terms + Submit \u2550\u2550\u2550 -->\r\n        <div class=\"cp-form-footer\">\r\n          <div class=\"cp-terms\">\r\n            <label class=\"cp-terms__label\">\r\n              <input type=\"checkbox\" class=\"cp-terms__check\"\r\n                [checked]=\"model.acceptTerms && model.privacy\"\r\n                (change)=\"onTermsCheckboxChange($event)\" />\r\n              <span class=\"cp-terms__box\"></span>\r\n              <span>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              </span>\r\n            </label>\r\n            <div class=\"cp-error cp-terms-error\" *ngIf=\"(!model.acceptTerms || !model.privacy) && validatePage === 1\">\r\n              You must accept the Terms and Privacy Policy to continue\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"cp-error cp-submit-error\" *ngIf=\"submitError\">{{ submitError }}</div>\r\n\r\n          <button type=\"submit\" class=\"cp-btn cp-btn--submit\" [disabled]=\"isSubmitting\">\r\n            <span *ngIf=\"isSubmitting\" class=\"cp-spinner cp-spinner-btn\"></span>\r\n            <svg *ngIf=\"!isSubmitting\" viewBox=\"0 0 24 24\" style=\"width:18px;height:18px\">\r\n              <path *ngIf=\"userHasExistingDetails\" d=\"M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z\" fill=\"#fff\"/>\r\n              <path *ngIf=\"!userHasExistingDetails\" d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" fill=\"#fff\"/>\r\n            </svg>\r\n            {{ uploadStatus || (isSubmitting ? 'Processing\u2026' : (userHasExistingDetails ? 'Save Changes' : 'Activate My Account')) }}\r\n          </button>\r\n        </div>\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%;gap:0}.cp-logo{margin-bottom:24px}.cp-logo-img{max-height:44px;max-width:180px;object-fit:contain;display:block}.cp-logo-fallback{font-size:18px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-sb-user{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:6px;background:#4077ad0d;border:1px solid rgba(64,119,173,.12);margin-bottom:20px}.cp-sb-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:#4077ad;display:flex;align-items:center;justify-content:center;overflow:hidden}.cp-sb-avatar__img{width:100%;height:100%;object-fit:cover}.cp-sb-avatar__initials{font-size:15px;font-weight:700;color:#fff;text-transform:uppercase}.cp-sb-user__info{display:flex;flex-direction:column;gap:2px;min-width:0}.cp-sb-user__info strong{font-size:13px;font-weight:700;color:#0c1620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-user__info span{font-size:11px;color:#6b7c8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-progress{margin-bottom:24px}.cp-sb-progress__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.cp-sb-progress__header span{font-size:11px;font-weight:600;color:#6b7c8a;text-transform:uppercase;letter-spacing:.8px}.cp-sb-progress__header strong{font-size:13px;font-weight:800;color:#4077ad}.cp-sb-progress__track{height:6px;background:#e2eaf2;border-radius:99px;overflow:hidden}.cp-sb-progress__fill{height:100%;background:linear-gradient(90deg,#4077ad,#5b9fd4);border-radius:99px;transition:width .4s ease;min-width:4px}.cp-steps{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;position:relative}.cp-steps:before{content:\"\";position:absolute;left:17px;top:20px;width:2px;bottom:20px;background:#e2eaf2;z-index:0}.cp-step{display:flex;align-items:flex-start;gap:12px;padding:10px 0;position:relative;z-index:1}.cp-step__icon{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:#fff;border:2px solid #d3dce3;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}.cp-step__icon svg{width:15px;height:15px}.cp-step__icon svg path{fill:#6b7c8a;transition:fill .2s}.cp-step__body{flex:1;display:flex;flex-direction:column;gap:2px;padding-top:5px;min-width:0}.cp-step__label{font-size:12.5px;font-weight:700;color:#0c1620;line-height:1}.cp-step__sub{font-size:11px;color:#6b7c8a;line-height:1.4}.cp-step__badge{width:20px;height:20px;border-radius:50%;flex-shrink:0;margin-top:7px;background:#d3dce3;display:flex;align-items:center;justify-content:center;transition:background .2s}.cp-step__badge svg{width:12px;height:12px}.cp-step__badge svg path{fill:#fff}.cp-step__badge span{font-size:10px;font-weight:700;color:#6b7c8a}.cp-step__badge--done{background:#28a745}.cp-step__badge--done span{display:none}.cp-step--done .cp-step__icon{background:#4077ad14;border-color:#4077ad}.cp-step--done .cp-step__icon svg path{fill:#4077ad}.cp-step--done .cp-step__label{color:#4077ad}.cp-left-contact{display:flex;flex-direction:column;gap:8px;margin-top:20px;padding-top:16px;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:space-between;padding:14px 20px;background:#fff;border-bottom:1px solid #e2eaf2}@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:#f0f4f8;display:flex;flex-direction:column;align-items:center;padding:0 0 64px;overflow-y:auto;min-width:0}@media (max-width: 860px){.cp-right{padding:0 0 48px}}.cp-invalid-page,.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-invalid-card,.cp-success-card{background:#fff;border-radius:12px;box-shadow:0 4px 6px -1px #00000012,0 16px 40px -4px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-invalid-card h2,.cp-success-card h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-invalid-card p,.cp-success-card p{font-size:14px;color:#6b7c8a;line-height:1.7;margin-bottom:28px}.cp-invalid-icon,.cp-success-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-invalid-icon svg,.cp-success-icon svg{width:32px;height:32px}.cp-invalid-icon{background:#dc35451a}.cp-invalid-icon svg path{fill:#dc3545}.cp-invalid-icon--warn{background:#f59e0b1a}.cp-invalid-icon--warn svg path{fill:#f59e0b}.cp-success-icon{background:#28a7451a}.cp-success-icon svg path{fill:#28a745}.cp-anf-hint{font-size:13px;color:#6b7280;margin-top:4px}.cp-form-wrap{width:100%;flex:1;display:flex;flex-direction:column;gap:0;padding-bottom:32px}.cp-banner{display:flex;align-items:center;gap:20px;padding:20px 32px;background:linear-gradient(135deg,#4077ad,#2f5880);border-bottom:1px solid rgba(0,0,0,.12);position:sticky;top:0;z-index:10;flex-shrink:0}@media (max-width: 860px){.cp-banner{padding:16px 20px;position:static}}@media (max-width: 480px){.cp-banner{padding:14px 16px;gap:12px}}.cp-banner__avatar{position:relative;cursor:pointer;flex-shrink:0;width:68px;height:68px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);overflow:hidden;background:#ffffff26}.cp-banner__avatar:hover .cp-banner__cam{opacity:1}@media (max-width: 480px){.cp-banner__avatar{width:52px;height:52px}}.cp-banner__img{width:100%;height:100%;object-fit:cover;display:block}.cp-banner__initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#ffffffe6;text-transform:uppercase;letter-spacing:-.5px}@media (max-width: 480px){.cp-banner__initials{font-size:16px}}.cp-banner__cam{position:absolute;inset:0;opacity:0;background:#00000080;display:flex;align-items:center;justify-content:center;transition:opacity .2s;border-radius:50%}.cp-banner__cam svg{width:22px;height:22px}.cp-banner__info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.cp-banner__name{font-size:17px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}@media (max-width: 480px){.cp-banner__name{font-size:14px}}.cp-banner__meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.cp-banner__email{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#fffc;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-banner__email svg{width:11px;height:11px}.cp-banner__email svg path{fill:#fffc}.cp-banner__badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:3px 8px;border-radius:99px;background:#fff3;color:#ffffffe6}.cp-banner__badge--update{background:#28a7454d;color:#a8f5c0}.cp-banner__loading{display:flex;align-items:center;gap:6px;font-size:11px;color:#ffffffb3;margin-top:2px}.cp-banner__loading .cp-spinner--sm{border-color:#fff6;border-top-color:#fff}.cp-logout-btn--banner{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;background:#ffffff1f;border:1px solid rgba(255,255,255,.25);color:#ffffffe6;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0}.cp-logout-btn--banner svg{width:15px;height:15px}.cp-logout-btn--banner svg path{fill:#ffffffe6}.cp-logout-btn--banner:hover{background:#dc3545bf;border-color:transparent;color:#fff}.cp-logout-btn--banner:hover svg path{fill:#fff}@media (max-width: 480px){.cp-logout-btn--banner{padding:7px 10px;font-size:11px}}.cp-alert{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:6px;margin:20px 24px 0;background:#dc35450f;border:1px solid rgba(220,53,69,.18);font-size:13px;color:#c0392b}.cp-alert svg path{fill:#c0392b}.cp-card{background:#fff;border:1px solid #e2eaf2;margin:16px 24px 0;border-radius:10px;overflow:hidden;box-shadow:0 1px 3px #0000000a}.cp-card:first-of-type{margin-top:20px}@media (max-width: 860px){.cp-card{margin:12px 16px 0}}@media (max-width: 480px){.cp-card{margin:10px 12px 0;border-radius:8px}}.cp-card__header{display:flex;align-items:center;gap:14px;padding:16px 24px;border-bottom:1px solid #f0f4f8;background:#fafbfc}@media (max-width: 480px){.cp-card__header{padding:14px 16px;gap:10px}}.cp-card__icon{width:36px;height:36px;border-radius:8px;flex-shrink:0;background:#4077ad14;display:flex;align-items:center;justify-content:center}.cp-card__icon svg{width:18px;height:18px}.cp-card__icon svg path{fill:#4077ad}.cp-card__title{font-size:13.5px;font-weight:700;color:#0c1620;margin:0 0 2px;line-height:1}.cp-card__sub{font-size:11px;color:#6b7c8a;margin:0;line-height:1}.cp-card__status{margin-left:auto;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#eef1f4;border:1.5px solid #d3dce3;display:flex;align-items:center;justify-content:center;transition:all .2s}.cp-card__status svg{width:14px;height:14px}.cp-card__status svg path{fill:#6b7c8a}.cp-card__status span{font-size:12px;font-weight:700;color:#6b7c8a}.cp-card__status--done{background:#28a745;border-color:#28a745}.cp-card__status--done svg path{fill:#fff}.cp-card__body{padding:20px 24px 16px}@media (max-width: 480px){.cp-card__body{padding:16px 16px 12px}}.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.cp-row.cp-row-triple,.cp-row.cp-row--3{grid-template-columns:1fr 1fr 1fr}@media (max-width: 640px){.cp-row.cp-row--3{grid-template-columns:1fr 1fr}}@media (max-width: 560px){.cp-row{grid-template-columns:1fr}.cp-row.cp-row-triple,.cp-row.cp-row--3{grid-template-columns:1fr 1fr}}@media (max-width: 400px){.cp-row.cp-row-triple,.cp-row.cp-row--3{grid-template-columns:1fr}}.cp-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width: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-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-pw-success{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#16a34a;margin:4px 0 10px}.cp-pw-success svg path{fill:#16a34a}.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-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-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-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-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-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;margin-top:10px;background:#4077ad;border:none;border-radius:6px;font-size:13.5px;font-weight:700;letter-spacing:.3px;color:#fff;cursor:pointer;text-decoration:none;transition:background .15s,box-shadow .15s,transform .1s;font-family:inherit}.cp-btn:hover:not(:disabled){background:#335f8a;box-shadow:0 4px 12px #4077ad59}.cp-btn:active:not(:disabled){transform:scale(.99)}.cp-btn:disabled{opacity:.6;cursor:not-allowed}.cp-btn--submit{height:52px;font-size:15px;letter-spacing:.5px;background:linear-gradient(135deg,#4077ad,#335f8a);box-shadow:0 2px 8px #4077ad40;border-radius:8px;margin-top:0}.cp-btn--submit:hover:not(:disabled){box-shadow:0 6px 18px #4077ad66;filter:brightness(1.05)}.cp-btn--outline{background:#fff;color:#4077ad;border:1.5px solid #4077AD}.cp-btn--outline:hover:not(:disabled){background:#4077ad0d;box-shadow:none}.cp-btn--ghost{background:transparent;color:#6b7c8a;border:1.5px solid #d3dce3}.cp-btn--ghost:hover:not(:disabled){border-color:#4077ad;color:#4077ad;box-shadow:none}.cp-btn--sm{height:38px;font-size:12.5px}.cp-btn-link{background:none;border:none;font-family:inherit;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;margin-top:8px;padding:6px 0;text-decoration:underline}.cp-btn-link:hover{color:#4077ad}.cp-spinner{display:inline-block;width:15px;height:15px;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}.cp-spinner--sm{width:11px;height:11px;border-color:#4077ad4d;border-top-color:#4077ad}@keyframes cp-spin{to{transform:rotate(360deg)}}.cp-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:14px;background:#f8fafc;border:1px solid #e2eaf2;border-radius:6px}.cp-toggle-row__info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.cp-toggle-row__label{font-size:13px;font-weight:600;color:#0c1620}.cp-toggle-row__label em{font-style:normal;font-size:11px;font-weight:500;color:#6b7c8a;margin-left:4px}.cp-toggle-row__hint{font-size:11px;color:#6b7c8a}.cp-toggle-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;cursor:pointer}.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(18px)}.cp-toggle-knob{position:absolute;inset:0;background:#c8d5e0;border-radius:24px;transition:background .2s;cursor:pointer}.cp-toggle-knob:before{content:\"\";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .22s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0003}.cp-otp-wrap{margin-top:4px}.cp-otp-hint{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#6b7c8a;margin:0 0 12px}.cp-otp-hint svg path{fill:#6b7c8a}.cp-otp-hint strong{color:#0c1620}.cp-otp-timer{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.18);border-radius:99px;padding:4px 12px;margin-bottom:14px}.cp-otp-timer svg path{fill:#4077ad}.cp-otp-timer--expired{color:#dc3545;background:#dc354512;border-color:#dc354533}.cp-otp-timer--expired svg path{fill:#dc3545}.cp-otp-input{letter-spacing:.15em;font-size:16px;font-weight:600}.cp-otp-actions{display:flex;flex-direction:column;gap:0;margin-top:4px}.cp-form-footer{margin:16px 24px 0;background:#fff;border:1px solid #e2eaf2;border-radius:10px;padding:20px 24px;box-shadow:0 1px 3px #0000000a}@media (max-width: 860px){.cp-form-footer{margin:12px 16px 0}}@media (max-width: 480px){.cp-form-footer{margin:10px 12px 0;padding:16px;border-radius:8px}}.cp-terms{margin:0 0 16px}.cp-terms__label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:12.5px;color:#6b7c8a;line-height:1.7;margin:0}.cp-terms__label a{color:#4077ad;text-decoration:underline;font-weight:600}.cp-terms__label a:hover{color:#335f8a}.cp-terms__check{position:absolute;opacity:0;width:0;height:0}.cp-terms__box{width:17px;height:17px;flex-shrink:0;margin-top:2px;border:2px solid #d3dce3;border-radius:4px;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}.cp-terms__check:checked~.cp-terms__box{background:#4077ad;border-color:#4077ad}.cp-upload-area{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:120px;border:2px dashed #d3dce3;border-radius:6px;background:#eef1f4;cursor:pointer;transition:border-color .15s,background .15s;overflow:hidden}.cp-upload-area:hover{border-color:#4077ad;background:#4077ad08}.cp-upload-hidden{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.cp-upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px;text-align:center;pointer-events:none}.cp-upload-placeholder svg{width:32px;height:32px;opacity:.5}.cp-upload-placeholder svg path{fill:#6b7c8a}.cp-upload-placeholder span{font-size:12.5px;font-weight:600;color:#6b7c8a}.cp-upload-placeholder small{font-size:11px;color:#95a2ad}.cp-upload-preview{width:100%;object-fit:cover;display:block}.cp-upload-preview--avatar{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 8px #0000001f;margin:14px auto 0}.cp-upload-preview--logo{max-width:180px;max-height:80px;width:auto;height:auto;object-fit:contain;margin:14px auto 0}.cp-upload-change{font-size:11px;font-weight:600;color:#4077ad;margin-bottom:10px;pointer-events:none}.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-logout-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;border:1.5px solid #e2eaf2;background:#fff;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0}.cp-logout-btn svg{width:16px;height:16px}.cp-logout-btn svg path{fill:#6b7c8a}.cp-logout-btn:hover{border-color:#dc3545;color:#dc3545}.cp-logout-btn:hover svg path{fill:#dc3545}.cp-logout-btn--mobile{margin-left:auto}.cp-biz-layout{display:grid;grid-template-columns:1fr 160px;gap:20px;align-items:start}@media (max-width: 640px){.cp-biz-layout{grid-template-columns:1fr}}.cp-biz-fields{display:flex;flex-direction:column}.cp-biz-logo{display:flex;flex-direction:column;gap:8px}.cp-biz-logo__label{font-size:11.5px;font-weight:600;color:#3a4a57}.cp-biz-logo__area{border:2px dashed #d3dce3;border-radius:6px;background:#f8fafc;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:140px;padding:12px;text-align:center;transition:border-color .15s}.cp-biz-logo__area:hover{border-color:#4077ad}.cp-biz-logo__img{width:100%;max-height:100px;object-fit:contain;border-radius:4px}.cp-biz-logo__change{font-size:11px;color:#6b7c8a;margin-top:6px;display:block}.cp-biz-logo__placeholder{display:flex;flex-direction:column;align-items:center;gap:6px}.cp-biz-logo__placeholder svg{width:28px;height:28px}.cp-biz-logo__placeholder svg path{fill:#aab8c2}.cp-biz-logo__placeholder span{font-size:11.5px;font-weight:600;color:#6b7c8a}.cp-biz-logo__placeholder small{font-size:10px;color:#aab8c2}.cp-lookup-loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:48px 44px!important}.cp-lookup-loading p{font-size:14px;color:#6b7c8a;margin:0}.cp-lookup-spinner{width:32px;height:32px;border:3px solid rgba(64,119,173,.2);border-top-color:#4077ad}.cp-anf-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f0f4f8;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;padding:24px}.cp-anf-wrap{width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:24px}.cp-anf-brand{display:flex;align-items:center;justify-content:center}.cp-anf-logo{max-height:44px;max-width:180px;object-fit:contain}.cp-anf-company{font-size:20px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-anf-card{width:100%;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 6px -1px #00000012,0 16px 40px -4px #0c16201f;border:1px solid #e2eaf2}.cp-anf-card__header{display:flex;align-items:center;gap:16px;padding:28px 28px 20px;border-bottom:1px solid #f0f4f8}.cp-anf-card__identity{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.cp-anf-card__name{font-size:18px;font-weight:800;color:#0c1620;margin:0;line-height:1.2}.cp-anf-card__email{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#6b7c8a}.cp-anf-card__email svg{width:12px;height:12px}.cp-anf-card__email svg path{fill:#6b7c8a}.cp-anf-card__details{padding:16px 28px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid #f0f4f8}.cp-anf-card__notice{display:flex;align-items:center;gap:10px;padding:14px 28px;background:#4077ad0a;border-bottom:1px solid #f0f4f8;font-size:13px;color:#4077ad;font-weight:600}.cp-anf-card__notice svg{width:18px;height:18px;flex-shrink:0}.cp-anf-card__notice svg path{fill:#4077ad}.cp-anf-avatar{width:60px;height:60px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#4077ad,#335f8a);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:-.5px}.cp-anf-roles{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}.cp-anf-role{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;padding:3px 8px;border-radius:99px;background:#4077ad14;color:#4077ad;border:1px solid rgba(64,119,173,.18)}.cp-anf-detail{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:#6b7c8a;line-height:1.5}.cp-anf-detail svg{width:14px;height:14px;flex-shrink:0;margin-top:1px}.cp-anf-detail svg path{fill:#6b7c8a}.cp-anf-signin-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;padding:0 24px;background:linear-gradient(135deg,#4077ad,#335f8a);border:none;border-radius:0;font-size:15px;font-weight:700;letter-spacing:.3px;color:#fff;cursor:pointer;text-decoration:none;font-family:inherit;transition:filter .15s,box-shadow .15s;-webkit-appearance:none}.cp-anf-signin-btn svg{width:18px;height:18px;flex-shrink:0}.cp-anf-signin-btn svg path{fill:#fff}.cp-anf-signin-btn:hover{filter:brightness(1.07);box-shadow:inset 0 -3px #00000026}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: ClaimProcessService }, { type: i7.BsModalService }, { type: i1$2.TokenService }, { type: i1$2.AuthLogoutService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LIBRARY_CONFIG]
                 }] }] });