@idsoftsource/initial-process 2.5.6 → 2.5.7

package/fesm2022/idsoftsource-initial-process.mjs

@@ -36084,6 +36084,8 @@ class ClaimProcessComponent {
     isInitializing = true;
     noEmailError = false;
     showAccountNotFound = false;
+    isLookingUpAccount = false;
+    auth0UserData = null;
     userEmail = '';
     isLoadingUser = false;
     isSubmitting = false;
@@ -36207,7 +36209,10 @@ class ClaimProcessComponent {
         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,
@@ -36218,18 +36223,23 @@ 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) {
-            this.showAccountNotFound = true;
+            await this.lookupAuth0Account();
             return;
         }
         this.claimForm = this.fb.group({
@@ -36285,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;
@@ -36302,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 || '',
@@ -36622,15 +36659,25 @@ class ClaimProcessComponent {
     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: 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 Not Found (no userId in token) \u2500\u2500\u2500 -->\r\n<div *ngIf=\"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\">Please sign in or create a new account to get started.</p>\r\n    <a [href]=\"libConfig?.navigateUrl ?? libConfig?.loginUrl ?? libConfig?.dashboardUrl ?? '#'\" class=\"cp-btn cp-btn--create\">\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      Click here to create account\r\n    </a>\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 && !showAccountNotFound && !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\">\r\n        {{ privacyAndTerms?.companyName }}\r\n      </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 Form Wrap \u2500\u2500 -->\r\n    <div class=\"cp-form-wrap\">\r\n\r\n      <!-- \u2500\u2500\u2500 Profile Hero (top) \u2500\u2500\u2500 -->\r\n      <div class=\"cp-profile-hero\">\r\n        <div class=\"cp-profile-hero__avatar\" (click)=\"cpProfileInput.click()\">\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 picture\" class=\"cp-profile-hero__img\" />\r\n          <div *ngIf=\"!profilePreviewUrl\" class=\"cp-profile-hero__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          </div>\r\n          <div class=\"cp-profile-hero__overlay\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\" fill=\"#fff\"/></svg>\r\n          </div>\r\n        </div>\r\n        <div class=\"cp-profile-hero__meta\">\r\n          <span class=\"cp-profile-hero__name\">\r\n            {{ (f['firstName'].value || f['lastName'].value) ? (f['firstName'].value + ' ' + f['lastName'].value) : 'Your Profile' }}\r\n          </span>\r\n          <span class=\"cp-profile-hero__hint\">Click photo to {{ profilePreviewUrl ? 'change' : 'upload' }}</span>\r\n          <span class=\"cp-email-chip\" *ngIf=\"userEmail\">\r\n            <svg viewBox=\"0 0 24 24\" style=\"width:12px;height:12px\"><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        </div>\r\n        <div class=\"cp-profile-hero__actions\">\r\n          <button *ngIf=\"userId\" type=\"button\" class=\"cp-logout-btn\" (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      </div>\r\n\r\n      <!-- Form status banner -->\r\n      <div class=\"cp-form-status\" *ngIf=\"isLoadingUser\">\r\n        <span class=\"cp-spinner\"></span> Loading account details\u2026\r\n      </div>\r\n      <div class=\"cp-error cp-form-status\" *ngIf=\"userLookupError\">{{ userLookupError }}</div>\r\n\r\n      <!-- Form title -->\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.'\r\n          : 'Complete the form below to activate your ' + (privacyAndTerms?.companyName || '') + ' account.' }}</p>\r\n      </div>\r\n\r\n      <form [formGroup]=\"claimForm\" (ngSubmit)=\"onSubmit()\" novalidate>\r\n\r\n        <!-- \u2500\u2500\u2500 Personal Details \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          Personal Details\r\n        </div>\r\n\r\n        <!-- First Name | Last Name | Phone \u2014 3 per row -->\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\"\r\n              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\"\r\n              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\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        <!-- Street | City | State | Zip \u2014 street full-width then 3-col -->\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</label>\r\n            <input type=\"text\" id=\"zip\" formControlName=\"zip\" placeholder=\"32801\"\r\n              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        <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 -->\r\n        <ng-container *ngIf=\"!isLoadingUser\">\r\n\r\n          <!-- NEW USER: optional password toggle -->\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]=\"setPasswordEnabled\" (change)=\"toggleSetPassword()\">\r\n                <span class=\"cp-toggle-knob\"></span>\r\n              </span>\r\n              Set Password <span class=\"cp-toggle-optional\">(Optional)</span>\r\n            </label>\r\n            <p class=\"cp-toggle-hint\">Skip this to use your existing login credentials, or enable to set a new password.</p>\r\n          </div>\r\n\r\n          <!-- NEW USER: password fields (shown when toggle enabled) -->\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\"\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                  <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 + OTP flow -->\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          <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: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            <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\" [ngModelOptions]=\"{standalone: true}\"\r\n                    placeholder=\"Enter 6-digit code\" 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--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          </ng-container>\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          <!-- Business fields LEFT + Logo RIGHT -->\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\"\r\n                    inputmode=\"numeric\" maxlength=\"5\" />\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Logo upload \u2014 right side -->\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, JPG</small>\r\n                  </div>\r\n                </ng-template>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\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        <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%;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:#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-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%;background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201a;padding:40px 44px 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:24px}.cp-form-header h2{font-size:20px;font-weight:800;color:#0c1620;margin-bottom:4px}.cp-form-header p{font-size:12.5px;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,.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: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}.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-profile-hero{display:flex;align-items:center;gap:20px;padding:20px 24px;margin:-40px -44px 32px;background:linear-gradient(135deg,#4077ad,#335f8a);border-radius:6px 6px 0 0}@media (max-width: 860px){.cp-profile-hero{margin:0 -20px 24px;border-radius:0}}@media (max-width: 480px){.cp-profile-hero{padding:16px;gap:14px}}.cp-profile-hero__avatar{position:relative;cursor:pointer;flex-shrink:0;width:80px;height:80px;border-radius:50%;border:3px solid rgba(255,255,255,.5);overflow:hidden;background:#ffffff26}.cp-profile-hero__avatar:hover .cp-profile-hero__overlay{opacity:1}.cp-profile-hero__img{width:100%;height:100%;object-fit:cover;display:block}.cp-profile-hero__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cp-profile-hero__placeholder svg{width:36px;height:36px}.cp-profile-hero__placeholder svg path{fill:#ffffffb3}.cp-profile-hero__overlay{position:absolute;inset:0;opacity:0;background:#00000073;display:flex;align-items:center;justify-content:center;transition:opacity .2s;border-radius:50%}.cp-profile-hero__meta{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.cp-profile-hero__name{font-size:16px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-profile-hero__hint{font-size:11px;color:#ffffffb3}.cp-email-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:#ffffffd9;background:#ffffff1f;border-radius:99px;padding:3px 10px;margin-top:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-email-chip svg path{fill:#fffc}.cp-profile-hero__actions{margin-left:auto;flex-shrink:0}.cp-profile-hero__actions .cp-logout-btn{background:#ffffff1f;border-color:#ffffff40;color:#fff}.cp-profile-hero__actions .cp-logout-btn svg path{fill:#fff}.cp-profile-hero__actions .cp-logout-btn:hover{background:#dc3545d9;border-color:transparent;color:#fff}.cp-profile-hero__actions .cp-logout-btn:hover svg path{fill:#fff}.cp-form-status{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:6px;margin-bottom:18px;background:#4077ad0f;font-size:13px;color:#6b7c8a}.cp-form-status.cp-error{background:#dc35450f;color:#dc3545}.cp-toggle-optional{font-size:10.5px;font-weight:500;color:#6b7c8a;margin-left:4px}.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}\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 ɵ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 Account Not Found (no userId in token) \u2500\u2500\u2500 -->\r\n<div *ngIf=\"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\">Please sign in or create a new account to get started.</p>\r\n    <a [href]=\"libConfig?.navigateUrl ?? libConfig?.loginUrl ?? libConfig?.dashboardUrl ?? '#'\" class=\"cp-btn cp-btn--create\">\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      Click here to create account\r\n    </a>\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 && !showAccountNotFound && !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\">\r\n        {{ privacyAndTerms?.companyName }}\r\n      </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 Form Wrap \u2500\u2500 -->\r\n    <div class=\"cp-form-wrap\">\r\n\r\n      <!-- \u2500\u2500\u2500 Profile Hero (top) \u2500\u2500\u2500 -->\r\n      <div class=\"cp-profile-hero\">\r\n        <div class=\"cp-profile-hero__avatar\" (click)=\"cpProfileInput.click()\">\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 picture\" class=\"cp-profile-hero__img\" />\r\n          <div *ngIf=\"!profilePreviewUrl\" class=\"cp-profile-hero__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          </div>\r\n          <div class=\"cp-profile-hero__overlay\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\" fill=\"#fff\"/></svg>\r\n          </div>\r\n        </div>\r\n        <div class=\"cp-profile-hero__meta\">\r\n          <span class=\"cp-profile-hero__name\">\r\n            {{ (f['firstName'].value || f['lastName'].value) ? (f['firstName'].value + ' ' + f['lastName'].value) : 'Your Profile' }}\r\n          </span>\r\n          <span class=\"cp-profile-hero__hint\">Click photo to {{ profilePreviewUrl ? 'change' : 'upload' }}</span>\r\n          <span class=\"cp-email-chip\" *ngIf=\"userEmail\">\r\n            <svg viewBox=\"0 0 24 24\" style=\"width:12px;height:12px\"><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        </div>\r\n        <div class=\"cp-profile-hero__actions\">\r\n          <button *ngIf=\"userId\" type=\"button\" class=\"cp-logout-btn\" (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      </div>\r\n\r\n      <!-- Form status banner -->\r\n      <div class=\"cp-form-status\" *ngIf=\"isLoadingUser\">\r\n        <span class=\"cp-spinner\"></span> Loading account details\u2026\r\n      </div>\r\n      <div class=\"cp-error cp-form-status\" *ngIf=\"userLookupError\">{{ userLookupError }}</div>\r\n\r\n      <!-- Form title -->\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.'\r\n          : 'Complete the form below to activate your ' + (privacyAndTerms?.companyName || '') + ' account.' }}</p>\r\n      </div>\r\n\r\n      <form [formGroup]=\"claimForm\" (ngSubmit)=\"onSubmit()\" novalidate>\r\n\r\n        <!-- \u2500\u2500\u2500 Personal Details \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          Personal Details\r\n        </div>\r\n\r\n        <!-- First Name | Last Name | Phone \u2014 3 per row -->\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\"\r\n              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\"\r\n              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\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        <!-- Street | City | State | Zip \u2014 street full-width then 3-col -->\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</label>\r\n            <input type=\"text\" id=\"zip\" formControlName=\"zip\" placeholder=\"32801\"\r\n              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        <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 -->\r\n        <ng-container *ngIf=\"!isLoadingUser\">\r\n\r\n          <!-- NEW USER: optional password toggle -->\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]=\"setPasswordEnabled\" (change)=\"toggleSetPassword()\">\r\n                <span class=\"cp-toggle-knob\"></span>\r\n              </span>\r\n              Set Password <span class=\"cp-toggle-optional\">(Optional)</span>\r\n            </label>\r\n            <p class=\"cp-toggle-hint\">Skip this to use your existing login credentials, or enable to set a new password.</p>\r\n          </div>\r\n\r\n          <!-- NEW USER: password fields (shown when toggle enabled) -->\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\"\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                  <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 + OTP flow -->\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          <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: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            <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\" [ngModelOptions]=\"{standalone: true}\"\r\n                    placeholder=\"Enter 6-digit code\" 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--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          </ng-container>\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          <!-- Business fields LEFT + Logo RIGHT -->\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\"\r\n                    inputmode=\"numeric\" maxlength=\"5\" />\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Logo upload \u2014 right side -->\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, JPG</small>\r\n                  </div>\r\n                </ng-template>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\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        <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%;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:#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-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%;background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201a;padding:40px 44px 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:24px}.cp-form-header h2{font-size:20px;font-weight:800;color:#0c1620;margin-bottom:4px}.cp-form-header p{font-size:12.5px;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,.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: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}.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-profile-hero{display:flex;align-items:center;gap:20px;padding:20px 24px;margin:-40px -44px 32px;background:linear-gradient(135deg,#4077ad,#335f8a);border-radius:6px 6px 0 0}@media (max-width: 860px){.cp-profile-hero{margin:0 -20px 24px;border-radius:0}}@media (max-width: 480px){.cp-profile-hero{padding:16px;gap:14px}}.cp-profile-hero__avatar{position:relative;cursor:pointer;flex-shrink:0;width:80px;height:80px;border-radius:50%;border:3px solid rgba(255,255,255,.5);overflow:hidden;background:#ffffff26}.cp-profile-hero__avatar:hover .cp-profile-hero__overlay{opacity:1}.cp-profile-hero__img{width:100%;height:100%;object-fit:cover;display:block}.cp-profile-hero__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cp-profile-hero__placeholder svg{width:36px;height:36px}.cp-profile-hero__placeholder svg path{fill:#ffffffb3}.cp-profile-hero__overlay{position:absolute;inset:0;opacity:0;background:#00000073;display:flex;align-items:center;justify-content:center;transition:opacity .2s;border-radius:50%}.cp-profile-hero__meta{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.cp-profile-hero__name{font-size:16px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-profile-hero__hint{font-size:11px;color:#ffffffb3}.cp-email-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:#ffffffd9;background:#ffffff1f;border-radius:99px;padding:3px 10px;margin-top:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-email-chip svg path{fill:#fffc}.cp-profile-hero__actions{margin-left:auto;flex-shrink:0}.cp-profile-hero__actions .cp-logout-btn{background:#ffffff1f;border-color:#ffffff40;color:#fff}.cp-profile-hero__actions .cp-logout-btn svg path{fill:#fff}.cp-profile-hero__actions .cp-logout-btn:hover{background:#dc3545d9;border-color:transparent;color:#fff}.cp-profile-hero__actions .cp-logout-btn:hover svg path{fill:#fff}.cp-form-status{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:6px;margin-bottom:18px;background:#4077ad0f;font-size:13px;color:#6b7c8a}.cp-form-status.cp-error{background:#dc35450f;color:#dc3545}.cp-toggle-optional{font-size:10.5px;font-weight:500;color:#6b7c8a;margin-left:4px}.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}\n"] }]
+            args: [{ selector: 'app-claim-process', standalone: false, template: "<h2 class=\"sr-only\">Claim Your Account</h2>\r\n\r\n<!-- \u2500\u2500\u2500 No Email Error \u2500\u2500\u2500 -->\r\n<div *ngIf=\"noEmailError\" class=\"cp-invalid-page\">\r\n  <div class=\"cp-invalid-card\">\r\n    <div class=\"cp-invalid-icon\">\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\r\n    </div>\r\n    <h2>Invalid Access Link</h2>\r\n    <p>This page requires a valid invitation link. Please use the link from your invitation email to claim your account.</p>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 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]