npm - @idsoftsource/initial-process - Versions diffs - 2.6.3 → 2.6.5 - Mend

@idsoftsource/initial-process 2.6.3 → 2.6.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/fesm2022/idsoftsource-initial-process.mjs +48 -7
package/fesm2022/idsoftsource-initial-process.mjs.map +1 -1
package/index.d.ts +15 -11
package/package.json +1 -1

package/fesm2022/idsoftsource-initial-process.mjs CHANGED Viewed

@@ -35902,11 +35902,13 @@ class ClaimProcessService {
     userDetailService;
     roleService;
     providerService;
+    frontEndProviderService;
     fileService;
-    constructor(userDetailService, roleService, providerService, fileService) {
+    constructor(userDetailService, roleService, providerService, frontEndProviderService, fileService) {
         this.userDetailService = userDetailService;
         this.roleService = roleService;
         this.providerService = providerService;
+        this.frontEndProviderService = frontEndProviderService;
         this.fileService = fileService;
     }
     // ─── Privacy ──────────────────────────────────────────────────────────────────
@@ -35922,6 +35924,10 @@ class ClaimProcessService {
     lookupUser(email) {
         return this.userDetailService.getAuth0UserDetails(email);
     }
+    /** Provider/business details by providerId (ref: role-select getprovider) */
+    getProviderDetails(providerId) {
+        return this.frontEndProviderService.getProviderDetails(providerId);
+    }
     // ─── Roles ───────────────────────────────────────────────────────────────────
     getRoles() {
         return this.roleService.getRoles({
@@ -36086,13 +36092,13 @@ class ClaimProcessService {
         }
         return payload;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ClaimProcessService, deps: [{ token: UserDetailService }, { token: RolesService }, { token: ProvidersService }, { token: FileService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ClaimProcessService, deps: [{ token: UserDetailService }, { token: RolesService }, { token: ProvidersService }, { token: FrontEndProvidersService }, { token: FileService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ClaimProcessService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ClaimProcessService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: UserDetailService }, { type: RolesService }, { type: ProvidersService }, { type: FileService }] });
+        }], ctorParameters: () => [{ type: UserDetailService }, { type: RolesService }, { type: ProvidersService }, { type: FrontEndProvidersService }, { type: FileService }] });
 function passwordMatchValidator(control) {
     const pw = control.get('password');
@@ -36360,14 +36366,14 @@ class ClaimProcessComponent {
             next: (data) => {
                 this.isLoadingUser = false;
                 this.updateRoleValidator();
-                if (!data?.userId) {
+                if (!data?.id) {
                     // No profile yet — show blank form (new user)
                     this.userHasExistingDetails = false;
                     this.updatePasswordValidators();
                     return;
                 }
                 // Existing profile — pre-fill and let user update
-                this.userId = data.userId;
+                this.userId = data.userId || userId;
                 this.userHasExistingDetails = true;
                 this.isInitialSetupCompleted = data.isInitialSetupCompleted ?? true;
                 this.updatePasswordValidators();
@@ -36393,6 +36399,11 @@ class ClaimProcessComponent {
                     this.pendingUserRole = data.roleName;
                     this.applyUserRole();
                 }
+                // Load business/provider details (ref: role-select getprovider)
+                const providerId = data.providerId;
+                if (providerId && providerId !== '00000000-0000-0000-0000-000000000000') {
+                    this.loadProviderDetails(providerId);
+                }
             },
             error: () => {
                 this.isLoadingUser = false;
@@ -36401,6 +36412,36 @@ class ClaimProcessComponent {
             },
         });
     }
+    // ref: role-select getprovider — load provider details and pre-fill business fields
+    loadProviderDetails(providerId) {
+        this.claimService.getProviderDetails(providerId).subscribe({
+            next: (providerData) => {
+                if (!providerData)
+                    return;
+                const rawPhone = providerData.phone || providerData.phoneNumber || '';
+                const digits = rawPhone.replace(/\D/g, '').substring(0, 10);
+                let formattedPhone = '';
+                if (digits.length > 0)
+                    formattedPhone = '(' + digits.substring(0, 3);
+                if (digits.length >= 4)
+                    formattedPhone += ') ' + digits.substring(3, 6);
+                if (digits.length >= 7)
+                    formattedPhone += '-' + digits.substring(6, 10);
+                this.claimForm.patchValue({
+                    businessName: providerData.providerName || this.claimForm.get('businessName')?.value || '',
+                    businessEmail: providerData.email || '',
+                    businessAddress: providerData.address1 || '',
+                    businessCity: providerData.city || '',
+                    businessState: providerData.state || '',
+                    businessZip: providerData.zipcode || '',
+                });
+                if (providerData.logoUrl) {
+                    this.logoPreviewUrl = this.getAssetUrl(providerData.logoUrl);
+                }
+            },
+            error: () => { },
+        });
+    }
     // ─── Roles ───────────────────────────────────────────────────────────────────
     getRoles() {
         this.claimService.getRoles().subscribe({
@@ -36721,11 +36762,11 @@ class ClaimProcessComponent {
         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", inputs: { useEmitter: "useEmitter" }, outputs: { loginNavigate: "loginNavigate", initialProcessNavigate: "initialProcessNavigate" }, ngImport: i0, template: "<h2 class=\"sr-only\">Claim Your Account</h2>\r\n\r\n<!-- \u2500\u2500\u2500 Unauthenticated / Error states: branded two-column layout \u2500\u2500\u2500 -->\r\n<div *ngIf=\"noEmailError || isLookingUpAccount || auth0UserData || showAccountNotFound\" class=\"cp-page cp-page--brand\">\r\n\r\n  <!-- Left: Static marketing & branding panel -->\r\n  <aside class=\"cp-brand-left\">\r\n\r\n    <div class=\"cp-brand-logo-wrap\">\r\n      <svg class=\"cp-brand-logo-svg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 107.928 95.043\">\r\n        <path\r\n          d=\"M16.62,76.812a88.959,88.959,0,0,0,12.033-2.091,36.373,36.373,0,0,0,51.459.182h.031a87.176,87.176,0,0,0,11.714,1.91,47.928,47.928,0,0,1-75.237,0ZM.587,71.759c-1.441-3.048.553-7.467,5.2-12.463a.355.355,0,0,1,.487-.116.352.352,0,0,1,.12.485,4.269,4.269,0,0,0-.606,4.026c1.949,4.351,14.87,2.857,31.617-2.9a.783.783,0,0,1,.748,0c2.495,1.358,5.061,2.463,7.639,3.659l-.011-.017a16.755,16.755,0,0,1,2.258,1.1.963.963,0,0,1,0,1.794c-14.543,5.53-27.565,8.5-36.349,8.5C5.846,75.837,1.875,74.519.587,71.759Zm46.34-9.989C17.443,48.164-3.376,30.437.454,22.289c1.374-3.064,6.021-4.351,12.993-4.051a.346.346,0,1,1,0,.686,4.661,4.661,0,0,0-3.465,2.163C7.264,26.919,25.549,41.126,51.107,52.859s48.423,16.61,51.117,10.766a4.685,4.685,0,0,0-.606-4.029.5.5,0,0,1,0-.091.376.376,0,0,1,.37-.369.4.4,0,0,1,.248.091l-.011.011c4.625,5,6.644,9.349,5.111,12.408-1.319,2.793-5.309,4.119-11.163,4.119C84.8,75.764,66.395,70.755,46.927,61.77Zm-36.89,2.868a49.831,49.831,0,0,1-3-16.968,51.991,51.991,0,0,1,.812-8.955A98.753,98.753,0,0,0,17.941,46.8a4.375,4.375,0,0,0-.019.606,40.584,40.584,0,0,0,3.432,16.431,35.288,35.288,0,0,1-8.129.949Q11.63,64.783,10.037,64.639Zm77.4-.712a40.586,40.586,0,0,0,3.27-16.24V46.259a97.668,97.668,0,0,0,10.062-8.2,51.439,51.439,0,0,1,.859,9.377A49.608,49.608,0,0,1,98.587,64.49a30.815,30.815,0,0,1-11.148-.563Zm-.006,0h.006l-.006.015ZM69.57,57.2C66.316,56,63,54.735,59.6,53.314a.924.924,0,0,1,0-1.662c24-11.51,40.992-24.91,38.339-30.5a4.369,4.369,0,0,0-3.46-2.163.346.346,0,1,1,0-.692c6.855-.3,11.544.986,12.984,4.051C110.926,29.575,94.779,44.4,70.4,57.2a1.139,1.139,0,0,1-.416.079A1.156,1.156,0,0,1,69.57,57.2ZM12.343,25.331A46.369,46.369,0,0,1,54.463.008,45.874,45.874,0,0,1,96.1,24.643a33.823,33.823,0,0,1-8.04,8.264A35.874,35.874,0,0,0,54.208,9.589,35.431,35.431,0,0,0,20.38,33.259,39.308,39.308,0,0,1,12.343,25.331Z\" />\r\n      </svg>\r\n      <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-brand-logo-text\">\r\n        {{ privacyAndTerms?.companyName }}\r\n      </span>\r\n    </div>\r\n\r\n    <div class=\"cp-brand-hero\">\r\n      <span class=\"cp-brand-eyebrow\">Claim Your Account</span>\r\n      <!-- <h1 class=\"cp-brand-heading\">Welcome to<br />{{ privacyAndTerms?.companyName || 'Our Platform' }}</h1> -->\r\n      <p class=\"cp-brand-intro\">\r\n        Your account is ready. Complete this short form to set your credentials and unlock full access to the\r\n        platform's tools, programs, and services.\r\n      </p>\r\n    </div>\r\n\r\n    <ul class=\"cp-brand-features\">\r\n\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4l5 2.18V11c0 3.5-2.33 6.79-5 7.93-2.67-1.14-5-4.43-5-7.93V7.18L12 5z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Secure &amp; Encrypted</strong>\r\n          <span>Your information is protected end-to-end and handled in accordance with our Privacy Policy.</span>\r\n        </div>\r\n      </li>\r\n\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M7 2v11h3v9l7-12h-4l4-8z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Instant Access</strong>\r\n          <span>Once activated, you'll get immediate access to programs, rosters, and service requests.</span>\r\n        </div>\r\n      </li>\r\n\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Team &amp; Client Network</strong>\r\n          <span>Connect with certified professionals nationwide and manage your team from a single dashboard.</span>\r\n        </div>\r\n      </li>\r\n\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Complete Your Profile</strong>\r\n          <span>A complete profile unlocks every feature and makes you visible to clients and partners.</span>\r\n        </div>\r\n      </li>\r\n\r\n    </ul>\r\n\r\n    <div class=\"cp-brand-contact\">\r\n      <a *ngIf=\"privacyAndTerms?.contactEmail || privacyAndTerms?.email\"\r\n        [href]=\"'mailto:' + (privacyAndTerms.contactEmail || privacyAndTerms.email)\" class=\"cp-brand-contact__link\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            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\" />\r\n        </svg>\r\n        {{ privacyAndTerms?.contactEmail || privacyAndTerms?.email }}\r\n      </a>\r\n      <a *ngIf=\"privacyAndTerms?.phone\" [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-brand-contact__link\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            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\" />\r\n        </svg>\r\n        {{ privacyAndTerms?.phone }}\r\n      </a>\r\n      <a *ngIf=\"privacyAndTerms?.websiteurl\" [href]=\"privacyAndTerms.websiteurl\" target=\"_blank\"\r\n        rel=\"noopener noreferrer\" class=\"cp-brand-contact__link cp-brand-contact__link--website\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z\" />\r\n        </svg>\r\n        Visit {{ privacyAndTerms?.companyName || 'our website' }}\r\n        <svg viewBox=\"0 0 24 24\" class=\"cp-brand-contact__ext\">\r\n          <path\r\n            d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" />\r\n        </svg>\r\n      </a>\r\n    </div>\r\n\r\n  </aside>\r\n\r\n  <!-- Right: State-specific content (centered) -->\r\n  <main class=\"cp-brand-right\">\r\n\r\n    <!-- No Email Error -->\r\n    <div *ngIf=\"noEmailError\" class=\"cp-brand-state\">\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\">\r\n            <path\r\n              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\" />\r\n          </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\r\n          account.</p>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Account Lookup: Loading -->\r\n    <div *ngIf=\"isLookingUpAccount\" class=\"cp-brand-state\">\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    <!-- Account Not Found -->\r\n    <div *ngIf=\"!isLookingUpAccount && !auth0UserData && showAccountNotFound\" class=\"cp-brand-state\">\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\">\r\n            <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\" />\r\n          </svg>\r\n        </div>\r\n        <!-- <h2>Account Not Found</h2> -->\r\n        <p>The email <strong>{{ userEmail }}</strong> isn't linked to an existing account. Please check your invitation\r\n          link or contact support.</p>\r\n        <button type=\"button\" class=\"cp-btn\" style=\"margin-top:20px\" (click)=\"navigateToLogin()\">\r\n          <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\r\n            <path\r\n              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\"\r\n              fill=\"#fff\" />\r\n          </svg>\r\n          Create New Account\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Account Found (auth0 record exists, no active userId) -->\r\n    <div *ngIf=\"!isLookingUpAccount && auth0UserData\" class=\"cp-brand-state\">\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            '?' }}\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\">\r\n                <path\r\n                  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\" />\r\n              </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\" *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\">\r\n              <path\r\n                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\" />\r\n            </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\">\r\n              <path\r\n                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\" />\r\n            </svg>\r\n            {{ [auth0UserData.userDetails?.address, auth0UserData.userDetails?.city,\r\n            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\">\r\n            <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\" />\r\n          </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\">\r\n            <path\r\n              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\"\r\n              fill=\"#fff\" />\r\n          </svg>\r\n          Sign In to Your Account\r\n        </button>\r\n\r\n      </div>\r\n    </div>\r\n\r\n  </main>\r\n\r\n</div>\r\n\r\n\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\">\r\n        <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n      </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 *ngIf=\"!isInitialSetupCompleted && libConfig?.initialUrl\" type=\"button\" class=\"cp-btn\"\r\n      style=\"margin-top:20px\" (click)=\"navigateToInitialProcess()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\r\n        <path\r\n          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\"\r\n          fill=\"#fff\" />\r\n      </svg>\r\n      Complete Initial Setup\r\n    </button>\r\n    <button type=\"button\" class=\"cp-btn\" [class.cp-btn--ghost]=\"!isInitialSetupCompleted && libConfig?.initialUrl\"\r\n      style=\"margin-top:10px\" (click)=\"navigateToDashboard()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\r\n        <path d=\"M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z\" fill=\"currentColor\" />\r\n      </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\"\r\n      (click)=\"navigateToLogin()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;flex-shrink:0\">\r\n        <path\r\n          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\" />\r\n      </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 && !auth0UserData && !isLookingUpAccount && !isInitializing\"\r\n  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      <!-- Sign out -->\r\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-sb-signout\" (click)=\"logout()\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            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\" />\r\n        </svg>\r\n        Sign Out\r\n      </button>\r\n\r\n      <!-- Section status steps -->\r\n      <ul class=\"cp-steps\" style=\"margin-top:20px\">\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\">\r\n              <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\" />\r\n            </svg>\r\n          </span>\r\n          <div class=\"cp-step__body\">\r\n            <span class=\"cp-step__label\">Personal Information</span>\r\n            <span class=\"cp-step__sub\">Name, address, profile photo</span>\r\n          </div>\r\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionPersonalDone && sectionPhotoDone\">\r\n            <svg *ngIf=\"sectionPersonalDone && sectionPhotoDone\" viewBox=\"0 0 24 24\">\r\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n            </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\">\r\n              <path\r\n                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\" />\r\n            </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' : ''\r\n              }}</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\">\r\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n            </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\">\r\n              <path\r\n                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\" />\r\n            </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\">\r\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n            </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\" [href]=\"'mailto:' + privacyAndTerms.contactEmail\"\r\n          class=\"cp-contact-link\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              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\" />\r\n          </svg>\r\n          {{ privacyAndTerms?.contactEmail }}\r\n        </a>\r\n        <a *ngIf=\"privacyAndTerms?.phone\" [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-contact-link\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              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\" />\r\n          </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    <ng-container>\r\n      <!-- Mobile-only top bar -->\r\n      <div class=\"cp-mobile-bar\">\r\n        <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\" [alt]=\"privacyAndTerms?.companyName\"\r\n          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\">\r\n            <path\r\n              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\" />\r\n          </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\">\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>\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\">\r\n                <path\r\n                  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\" />\r\n              </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      </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\">\r\n            <path\r\n              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\" />\r\n          </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 Information (details + address + photo) \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\">\r\n                  <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\" />\r\n                </svg>\r\n              </span>\r\n              <div>\r\n                <h3 class=\"cp-card__title\">Personal Information</h3>\r\n                <p class=\"cp-card__sub\">Name, contact, address and profile photo</p>\r\n              </div>\r\n              <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionPersonalDone && sectionPhotoDone\">\r\n                <svg *ngIf=\"sectionPersonalDone && sectionPhotoDone\" viewBox=\"0 0 24 24\">\r\n                  <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                </svg>\r\n                <span *ngIf=\"!(sectionPersonalDone && sectionPhotoDone)\">\u2014</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"cp-card__body\">\r\n              <div class=\"cp-biz-layout\">\r\n                <!-- Left: fields -->\r\n                <div class=\"cp-biz-fields\">\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\" maxlength=\"14\"\r\n                        [class.is-invalid]=\"f['phone'].invalid && f['phone'].touched\" (input)=\"formatPhone($event)\"\r\n                        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 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\"\r\n                        maxlength=\"5\" />\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Right: profile photo -->\r\n                <div class=\"cp-biz-logo\">\r\n                  <label class=\"cp-biz-logo__label\">Profile Photo</label>\r\n                  <div class=\"cp-biz-logo__area cp-profile-logo-area\" (click)=\"cpProfileInput.click()\">\r\n                    <input #cpProfileInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"onProfileFileChange($event)\"\r\n                      class=\"cp-upload-hidden\" />\r\n                    <ng-container *ngIf=\"profilePreviewUrl; else profilePlaceholder\">\r\n                      <img [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-profile-logo-img\" />\r\n                      <span class=\"cp-biz-logo__change\">Change</span>\r\n                    </ng-container>\r\n                    <ng-template #profilePlaceholder>\r\n                      <div class=\"cp-biz-logo__placeholder\">\r\n                        <svg viewBox=\"0 0 24 24\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                        <span>Upload Photo</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 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\">\r\n                  <path\r\n                    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\" />\r\n                </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\">\r\n                  <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                </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\" [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\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                        <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                      </button>\r\n                    </div>\r\n                    <div class=\"cp-error\" *ngIf=\"f['password'].errors?.['minlength'] && f['password'].touched\">Min. 8\r\n                      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\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                        <svg *ngIf=\"showConfirmPassword\" viewBox=\"0 0 24 24\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                      </button>\r\n                    </div>\r\n                    <div class=\"cp-error\"\r\n                      *ngIf=\"claimForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched\">Passwords do not\r\n                      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\">\r\n                              <path\r\n                                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\" />\r\n                            </svg>\r\n                            <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\">\r\n                              <path\r\n                                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\" />\r\n                            </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\"\r\n                            autocomplete=\"new-password\" />\r\n                          <button type=\"button\" class=\"cp-pw-toggle\"\r\n                            (click)=\"showConfirmPassword = !showConfirmPassword\">\r\n                            <svg *ngIf=\"!showConfirmPassword\" viewBox=\"0 0 24 24\">\r\n                              <path\r\n                                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\" />\r\n                            </svg>\r\n                            <svg *ngIf=\"showConfirmPassword\" viewBox=\"0 0 24 24\">\r\n                              <path\r\n                                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\" />\r\n                            </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\">\r\n                        <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                      </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()\"\r\n                      [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\">\r\n                          <path\r\n                            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\" />\r\n                        </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\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                        <span *ngIf=\"!otpExpired\">{{ otpMinutes }}:{{ otpSeconds < 10 ? '0' + otpSeconds : otpSeconds\r\n                            }}</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\">\r\n                  <path\r\n                    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\" />\r\n                </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\">\r\n                  <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                </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\r\n                      </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\" 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\"\r\n                        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                <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\" (change)=\"onBusinessLogoChange($event)\"\r\n                      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\">\r\n                          <path\r\n                            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\" />\r\n                        </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\" [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;\r\n                    Conditions</a>\r\n                  and\r\n                  <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Privacy Statement', $event)\">Privacy\r\n                    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\"\r\n                  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\"\r\n                  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\"\r\n                  fill=\"#fff\" />\r\n              </svg>\r\n              {{ uploadStatus || (isSubmitting ? 'Processing\u2026' : (userHasExistingDetails ? 'Save Changes' : 'Activate My\r\n              Account')) }}\r\n            </button>\r\n          </div>\r\n\r\n        </form>\r\n      </div>\r\n    </ng-container>\r\n\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>", 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-page--brand{display:flex;min-height:100vh;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif}@media (max-width: 860px){.cp-page--brand{flex-direction:column}}.cp-brand-left{width:42%;min-width:320px;background:#fff;border-right:1px solid #e2eaf2;display:flex;flex-direction:column;padding:10px 48px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-brand-left{position:static;height:auto;width:100%;min-width:unset;padding:32px 24px 28px;border-right:none;border-bottom:1px solid #e2eaf2}}.cp-brand-logo-wrap{margin-bottom:10px}.cp-brand-logo-img{max-height:48px;max-width:200px;object-fit:contain;display:block}.cp-brand-logo-svg{display:block;height:48px;width:auto;max-width:200px;fill:#4077ad}.cp-brand-logo-text{font-size:20px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-brand-hero{margin-bottom:15px}.cp-brand-eyebrow{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.16);border-radius:99px;padding:3px 10px;margin-bottom:16px}.cp-brand-heading{font-size:26px;font-weight:800;color:#0c1620;line-height:1.22;letter-spacing:-.4px;margin:0 0 14px}@media (max-width: 860px){.cp-brand-heading{font-size:21px}}.cp-brand-intro{font-size:13.5px;color:#6b7c8a;line-height:1.78;margin:0}.cp-brand-features{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;gap:6px}.cp-brand-feature{display:flex;align-items:flex-start;gap:13px;padding:13px 15px;border-radius:9px;background:#f8fafc;border:1px solid #e8edf3;transition:border-color .18s,background .18s}.cp-brand-feature:hover{background:#4077ad08;border-color:#4077ad38}.cp-brand-feature__icon{width:34px;height:34px;flex-shrink:0;border-radius:8px;background:#4077ad14;display:flex;align-items:center;justify-content:center}.cp-brand-feature__icon svg{width:17px;height:17px}.cp-brand-feature__icon svg path{fill:#4077ad}.cp-brand-feature__body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.cp-brand-feature__body strong{font-size:12.5px;font-weight:700;color:#0c1620;line-height:1.2}.cp-brand-feature__body span{font-size:11.5px;color:#6b7c8a;line-height:1.62}.cp-brand-contact{display:flex;flex-direction:column;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid #e8edf3}.cp-brand-contact__link{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-brand-contact__link svg{width:14px;height:14px;flex-shrink:0}.cp-brand-contact__link svg path{fill:currentColor}.cp-brand-contact__link:hover{color:#4077ad}.cp-brand-contact__link--website{font-weight:600;color:#4077ad}.cp-brand-contact__link--website:hover{color:#335f8a}.cp-brand-contact__ext{width:11px!important;height:11px!important;opacity:.65}.cp-brand-right{flex:1;background:#eef1f4;display:flex;align-items:center;justify-content:center;padding:40px 28px;min-width:0}@media (max-width: 860px){.cp-brand-right{padding:28px 20px 48px}}.cp-brand-state{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center}.cp-brand-state .cp-invalid-card,.cp-brand-state .cp-anf-card{width:100%}.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-signout{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;margin-bottom:4px;background:transparent;border:1.5px solid #e2eaf2;border-radius:6px;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;font-family:inherit;transition:all .15s;text-align:left}.cp-sb-signout svg{width:16px;height:16px;flex-shrink:0}.cp-sb-signout svg path{fill:#6b7c8a}.cp-sb-signout:hover{border-color:#f87171;color:#dc2626;background:#dc26260a}.cp-sb-signout:hover svg path{fill:#dc2626}.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;flex-shrink:0;width:60px;height:60px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);overflow:hidden;background:#ffffff26}@media (max-width: 480px){.cp-banner__avatar{width:46px;height:46px}}.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__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-profile-logo-area{border-radius:50%!important;min-height:140px!important;width:140px!important;height:140px!important;margin:0 auto;overflow:hidden}.cp-profile-logo-img{width:100%;height:100%;object-fit:cover;border-radius:50%}.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-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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ClaimProcessComponent, isStandalone: false, selector: "app-claim-process", inputs: { useEmitter: "useEmitter" }, outputs: { loginNavigate: "loginNavigate", initialProcessNavigate: "initialProcessNavigate" }, ngImport: i0, template: "<h2 class=\"sr-only\">Claim Your Account</h2>\r\n\r\n<!-- \u2500\u2500\u2500 Unauthenticated / Error states: branded two-column layout \u2500\u2500\u2500 -->\r\n<div *ngIf=\"noEmailError || isLookingUpAccount || auth0UserData || showAccountNotFound\" class=\"cp-page cp-page--brand\">\r\n\r\n  <!-- Left: Static marketing & branding panel -->\r\n  <aside class=\"cp-brand-left\">\r\n\r\n    <div class=\"cp-brand-logo-wrap\">\r\n      <svg class=\"cp-brand-logo-svg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 107.928 95.043\">\r\n        <path\r\n          d=\"M16.62,76.812a88.959,88.959,0,0,0,12.033-2.091,36.373,36.373,0,0,0,51.459.182h.031a87.176,87.176,0,0,0,11.714,1.91,47.928,47.928,0,0,1-75.237,0ZM.587,71.759c-1.441-3.048.553-7.467,5.2-12.463a.355.355,0,0,1,.487-.116.352.352,0,0,1,.12.485,4.269,4.269,0,0,0-.606,4.026c1.949,4.351,14.87,2.857,31.617-2.9a.783.783,0,0,1,.748,0c2.495,1.358,5.061,2.463,7.639,3.659l-.011-.017a16.755,16.755,0,0,1,2.258,1.1.963.963,0,0,1,0,1.794c-14.543,5.53-27.565,8.5-36.349,8.5C5.846,75.837,1.875,74.519.587,71.759Zm46.34-9.989C17.443,48.164-3.376,30.437.454,22.289c1.374-3.064,6.021-4.351,12.993-4.051a.346.346,0,1,1,0,.686,4.661,4.661,0,0,0-3.465,2.163C7.264,26.919,25.549,41.126,51.107,52.859s48.423,16.61,51.117,10.766a4.685,4.685,0,0,0-.606-4.029.5.5,0,0,1,0-.091.376.376,0,0,1,.37-.369.4.4,0,0,1,.248.091l-.011.011c4.625,5,6.644,9.349,5.111,12.408-1.319,2.793-5.309,4.119-11.163,4.119C84.8,75.764,66.395,70.755,46.927,61.77Zm-36.89,2.868a49.831,49.831,0,0,1-3-16.968,51.991,51.991,0,0,1,.812-8.955A98.753,98.753,0,0,0,17.941,46.8a4.375,4.375,0,0,0-.019.606,40.584,40.584,0,0,0,3.432,16.431,35.288,35.288,0,0,1-8.129.949Q11.63,64.783,10.037,64.639Zm77.4-.712a40.586,40.586,0,0,0,3.27-16.24V46.259a97.668,97.668,0,0,0,10.062-8.2,51.439,51.439,0,0,1,.859,9.377A49.608,49.608,0,0,1,98.587,64.49a30.815,30.815,0,0,1-11.148-.563Zm-.006,0h.006l-.006.015ZM69.57,57.2C66.316,56,63,54.735,59.6,53.314a.924.924,0,0,1,0-1.662c24-11.51,40.992-24.91,38.339-30.5a4.369,4.369,0,0,0-3.46-2.163.346.346,0,1,1,0-.692c6.855-.3,11.544.986,12.984,4.051C110.926,29.575,94.779,44.4,70.4,57.2a1.139,1.139,0,0,1-.416.079A1.156,1.156,0,0,1,69.57,57.2ZM12.343,25.331A46.369,46.369,0,0,1,54.463.008,45.874,45.874,0,0,1,96.1,24.643a33.823,33.823,0,0,1-8.04,8.264A35.874,35.874,0,0,0,54.208,9.589,35.431,35.431,0,0,0,20.38,33.259,39.308,39.308,0,0,1,12.343,25.331Z\" />\r\n      </svg>\r\n      <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-brand-logo-text\">\r\n        {{ privacyAndTerms?.companyName }}\r\n      </span>\r\n    </div>\r\n\r\n    <div class=\"cp-brand-hero\">\r\n      <span class=\"cp-brand-eyebrow\">Claim Your Account</span>\r\n      <!-- <h1 class=\"cp-brand-heading\">Welcome to<br />{{ privacyAndTerms?.companyName || 'Our Platform' }}</h1> -->\r\n      <p class=\"cp-brand-intro\">\r\n        Your account is ready. Complete this short form to set your credentials and unlock full access to the\r\n        platform's tools, programs, and services.\r\n      </p>\r\n    </div>\r\n\r\n    <ul class=\"cp-brand-features\">\r\n\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4l5 2.18V11c0 3.5-2.33 6.79-5 7.93-2.67-1.14-5-4.43-5-7.93V7.18L12 5z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Secure &amp; Encrypted</strong>\r\n          <span>Your information is protected end-to-end and handled in accordance with our Privacy Policy.</span>\r\n        </div>\r\n      </li>\r\n\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M7 2v11h3v9l7-12h-4l4-8z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Instant Access</strong>\r\n          <span>Once activated, you'll get immediate access to programs, rosters, and service requests.</span>\r\n        </div>\r\n      </li>\r\n\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Team &amp; Client Network</strong>\r\n          <span>Connect with certified professionals nationwide and manage your team from a single dashboard.</span>\r\n        </div>\r\n      </li>\r\n\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Complete Your Profile</strong>\r\n          <span>A complete profile unlocks every feature and makes you visible to clients and partners.</span>\r\n        </div>\r\n      </li>\r\n\r\n    </ul>\r\n\r\n    <div class=\"cp-brand-contact\">\r\n      <a *ngIf=\"privacyAndTerms?.contactEmail || privacyAndTerms?.email\"\r\n        [href]=\"'mailto:' + (privacyAndTerms.contactEmail || privacyAndTerms.email)\" class=\"cp-brand-contact__link\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            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\" />\r\n        </svg>\r\n        {{ privacyAndTerms?.contactEmail || privacyAndTerms?.email }}\r\n      </a>\r\n      <a *ngIf=\"privacyAndTerms?.phone\" [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-brand-contact__link\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            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\" />\r\n        </svg>\r\n        {{ privacyAndTerms?.phone }}\r\n      </a>\r\n      <a *ngIf=\"privacyAndTerms?.websiteurl\" [href]=\"privacyAndTerms.websiteurl\" target=\"_blank\"\r\n        rel=\"noopener noreferrer\" class=\"cp-brand-contact__link cp-brand-contact__link--website\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z\" />\r\n        </svg>\r\n        Visit {{ privacyAndTerms?.companyName || 'our website' }}\r\n        <svg viewBox=\"0 0 24 24\" class=\"cp-brand-contact__ext\">\r\n          <path\r\n            d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" />\r\n        </svg>\r\n      </a>\r\n    </div>\r\n\r\n  </aside>\r\n\r\n  <!-- Right: State-specific content (centered) -->\r\n  <main class=\"cp-brand-right\">\r\n\r\n    <!-- No Email Error -->\r\n    <div *ngIf=\"noEmailError\" class=\"cp-brand-state\">\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\">\r\n            <path\r\n              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\" />\r\n          </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\r\n          account.</p>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Account Lookup: Loading -->\r\n    <div *ngIf=\"isLookingUpAccount\" class=\"cp-brand-state\">\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    <!-- Account Not Found -->\r\n    <div *ngIf=\"!isLookingUpAccount && !auth0UserData && showAccountNotFound\" class=\"cp-brand-state\">\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\">\r\n            <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\" />\r\n          </svg>\r\n        </div>\r\n        <!-- <h2>Account Not Found</h2> -->\r\n        <p>The email <strong>{{ userEmail }}</strong> isn't linked to an existing account. Please check your invitation\r\n          link or contact support.</p>\r\n        <button type=\"button\" class=\"cp-btn\" style=\"margin-top:20px\" (click)=\"navigateToLogin()\">\r\n          <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\r\n            <path\r\n              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\"\r\n              fill=\"#fff\" />\r\n          </svg>\r\n          Create New Account\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Account Found (auth0 record exists, no active userId) -->\r\n    <div *ngIf=\"!isLookingUpAccount && auth0UserData\" class=\"cp-brand-state\">\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            '?' }}\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\">\r\n                <path\r\n                  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\" />\r\n              </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\" *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\">\r\n              <path\r\n                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\" />\r\n            </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\">\r\n              <path\r\n                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\" />\r\n            </svg>\r\n            {{ [auth0UserData.userDetails?.address, auth0UserData.userDetails?.city,\r\n            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\">\r\n            <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\" />\r\n          </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\">\r\n            <path\r\n              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\"\r\n              fill=\"#fff\" />\r\n          </svg>\r\n          Sign In to Your Account\r\n        </button>\r\n\r\n      </div>\r\n    </div>\r\n\r\n  </main>\r\n\r\n</div>\r\n\r\n\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\">\r\n        <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n      </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 *ngIf=\"!isInitialSetupCompleted && libConfig?.initialUrl\" type=\"button\" class=\"cp-btn\"\r\n      style=\"margin-top:20px\" (click)=\"navigateToInitialProcess()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\r\n        <path\r\n          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\"\r\n          fill=\"#fff\" />\r\n      </svg>\r\n      Complete Initial Setup\r\n    </button>\r\n    <button type=\"button\" class=\"cp-btn\" [class.cp-btn--ghost]=\"!isInitialSetupCompleted && libConfig?.initialUrl\"\r\n      style=\"margin-top:10px\" (click)=\"navigateToDashboard()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\r\n        <path d=\"M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z\" fill=\"currentColor\" />\r\n      </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\"\r\n      (click)=\"navigateToLogin()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;flex-shrink:0\">\r\n        <path\r\n          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\" />\r\n      </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 && !auth0UserData && !isLookingUpAccount && !isInitializing\"\r\n  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      <!-- Sign out -->\r\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-sb-signout\" (click)=\"logout()\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            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\" />\r\n        </svg>\r\n        Sign Out\r\n      </button>\r\n\r\n      <!-- Section status steps -->\r\n      <ul class=\"cp-steps\" style=\"margin-top:20px\">\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\">\r\n              <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\" />\r\n            </svg>\r\n          </span>\r\n          <div class=\"cp-step__body\">\r\n            <span class=\"cp-step__label\">Personal Information</span>\r\n            <span class=\"cp-step__sub\">Name, address, profile photo</span>\r\n          </div>\r\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionPersonalDone && sectionPhotoDone\">\r\n            <svg *ngIf=\"sectionPersonalDone && sectionPhotoDone\" viewBox=\"0 0 24 24\">\r\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n            </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\">\r\n              <path\r\n                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\" />\r\n            </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' : ''\r\n              }}</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\">\r\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n            </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\">\r\n              <path\r\n                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\" />\r\n            </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\">\r\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n            </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\" [href]=\"'mailto:' + privacyAndTerms.contactEmail\"\r\n          class=\"cp-contact-link\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              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\" />\r\n          </svg>\r\n          {{ privacyAndTerms?.contactEmail }}\r\n        </a>\r\n        <a *ngIf=\"privacyAndTerms?.phone\" [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-contact-link\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              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\" />\r\n          </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    <ng-container>\r\n      <!-- Mobile-only top bar -->\r\n      <div class=\"cp-mobile-bar\">\r\n        <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\" [alt]=\"privacyAndTerms?.companyName\"\r\n          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\">\r\n            <path\r\n              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\" />\r\n          </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\">\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>\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\">\r\n                <path\r\n                  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\" />\r\n              </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      </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\">\r\n            <path\r\n              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\" />\r\n          </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 Information (details + address + photo) \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\">\r\n                  <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\" />\r\n                </svg>\r\n              </span>\r\n              <div>\r\n                <h3 class=\"cp-card__title\">Personal Information</h3>\r\n                <p class=\"cp-card__sub\">Name, contact, address and profile photo</p>\r\n              </div>\r\n              <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionPersonalDone && sectionPhotoDone\">\r\n                <svg *ngIf=\"sectionPersonalDone && sectionPhotoDone\" viewBox=\"0 0 24 24\">\r\n                  <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                </svg>\r\n                <span *ngIf=\"!(sectionPersonalDone && sectionPhotoDone)\">\u2014</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"cp-card__body\">\r\n              <div class=\"cp-biz-layout\">\r\n                <!-- Left: fields -->\r\n                <div class=\"cp-biz-fields\">\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\" maxlength=\"14\"\r\n                        [class.is-invalid]=\"f['phone'].invalid && f['phone'].touched\" (input)=\"formatPhone($event)\"\r\n                        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 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\"\r\n                        maxlength=\"5\" />\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Right: profile photo -->\r\n                <div class=\"cp-biz-logo\">\r\n                  <label class=\"cp-biz-logo__label\">Profile Photo</label>\r\n                  <div class=\"cp-biz-logo__area cp-profile-logo-area\" (click)=\"cpProfileInput.click()\">\r\n                    <input #cpProfileInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"onProfileFileChange($event)\"\r\n                      class=\"cp-upload-hidden\" />\r\n                    <ng-container *ngIf=\"profilePreviewUrl; else profilePlaceholder\">\r\n                      <img [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-profile-logo-img\" />\r\n                      <span class=\"cp-biz-logo__change\">Change</span>\r\n                    </ng-container>\r\n                    <ng-template #profilePlaceholder>\r\n                      <div class=\"cp-biz-logo__placeholder\">\r\n                        <svg viewBox=\"0 0 24 24\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                        <span>Upload Photo</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 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\">\r\n                  <path\r\n                    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\" />\r\n                </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\">\r\n                  <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                </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\" [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\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                        <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                      </button>\r\n                    </div>\r\n                    <div class=\"cp-error\" *ngIf=\"f['password'].errors?.['minlength'] && f['password'].touched\">Min. 8\r\n                      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\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                        <svg *ngIf=\"showConfirmPassword\" viewBox=\"0 0 24 24\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                      </button>\r\n                    </div>\r\n                    <div class=\"cp-error\"\r\n                      *ngIf=\"claimForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched\">Passwords do not\r\n                      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\">\r\n                              <path\r\n                                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\" />\r\n                            </svg>\r\n                            <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\">\r\n                              <path\r\n                                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\" />\r\n                            </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\"\r\n                            autocomplete=\"new-password\" />\r\n                          <button type=\"button\" class=\"cp-pw-toggle\"\r\n                            (click)=\"showConfirmPassword = !showConfirmPassword\">\r\n                            <svg *ngIf=\"!showConfirmPassword\" viewBox=\"0 0 24 24\">\r\n                              <path\r\n                                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\" />\r\n                            </svg>\r\n                            <svg *ngIf=\"showConfirmPassword\" viewBox=\"0 0 24 24\">\r\n                              <path\r\n                                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\" />\r\n                            </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\">\r\n                        <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                      </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()\"\r\n                      [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\">\r\n                          <path\r\n                            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\" />\r\n                        </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\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                        <span *ngIf=\"!otpExpired\">{{ otpMinutes }}:{{ otpSeconds < 10 ? '0' + otpSeconds : otpSeconds\r\n                            }}</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\">\r\n                  <path\r\n                    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\" />\r\n                </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\">\r\n                  <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                </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\r\n                      </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\" 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\"\r\n                        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                <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\" (change)=\"onBusinessLogoChange($event)\"\r\n                      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\">\r\n                          <path\r\n                            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\" />\r\n                        </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\" [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;\r\n                    Conditions</a>\r\n                  and\r\n                  <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Privacy Statement', $event)\">Privacy\r\n                    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\"\r\n                  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\"\r\n                  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\"\r\n                  fill=\"#fff\" />\r\n              </svg>\r\n              {{ uploadStatus || (isSubmitting ? 'Processing\u2026' : (userHasExistingDetails ? 'Save Changes' : 'Activate My\r\n              Account')) }}\r\n            </button>\r\n          </div>\r\n\r\n        </form>\r\n      </div>\r\n    </ng-container>\r\n\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>", 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-page--brand{display:flex;min-height:100vh;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif}@media (max-width: 860px){.cp-page--brand{flex-direction:column}}.cp-brand-left{width:42%;min-width:320px;background:#fff;border-right:1px solid #e2eaf2;display:flex;flex-direction:column;padding:10px 48px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-brand-left{position:static;height:auto;width:100%;min-width:unset;padding:32px 24px 28px;border-right:none;border-bottom:1px solid #e2eaf2}}.cp-brand-logo-wrap{margin-bottom:10px}.cp-brand-logo-img{max-height:48px;max-width:200px;object-fit:contain;display:block}.cp-brand-logo-svg{display:block;height:48px;width:auto;max-width:200px;fill:#4077ad}.cp-brand-logo-text{font-size:20px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-brand-hero{margin-bottom:15px}.cp-brand-eyebrow{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.16);border-radius:99px;padding:3px 10px;margin-bottom:16px}.cp-brand-heading{font-size:26px;font-weight:800;color:#0c1620;line-height:1.22;letter-spacing:-.4px;margin:0 0 14px}@media (max-width: 860px){.cp-brand-heading{font-size:21px}}.cp-brand-intro{font-size:13.5px;color:#6b7c8a;line-height:1.78;margin:0}.cp-brand-features{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;gap:6px}.cp-brand-feature{display:flex;align-items:flex-start;gap:13px;padding:13px 15px;border-radius:9px;background:#f8fafc;border:1px solid #e8edf3;transition:border-color .18s,background .18s}.cp-brand-feature:hover{background:#4077ad08;border-color:#4077ad38}.cp-brand-feature__icon{width:34px;height:34px;flex-shrink:0;border-radius:8px;background:#4077ad14;display:flex;align-items:center;justify-content:center}.cp-brand-feature__icon svg{width:17px;height:17px}.cp-brand-feature__icon svg path{fill:#4077ad}.cp-brand-feature__body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.cp-brand-feature__body strong{font-size:12.5px;font-weight:700;color:#0c1620;line-height:1.2}.cp-brand-feature__body span{font-size:11.5px;color:#6b7c8a;line-height:1.62}.cp-brand-contact{display:flex;flex-direction:column;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid #e8edf3}.cp-brand-contact__link{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-brand-contact__link svg{width:14px;height:14px;flex-shrink:0}.cp-brand-contact__link svg path{fill:currentColor}.cp-brand-contact__link:hover{color:#4077ad}.cp-brand-contact__link--website{font-weight:600;color:#4077ad}.cp-brand-contact__link--website:hover{color:#335f8a}.cp-brand-contact__ext{width:11px!important;height:11px!important;opacity:.65}.cp-brand-right{flex:1;background:#eef1f4;display:flex;align-items:center;justify-content:center;padding:40px 28px;min-width:0}@media (max-width: 860px){.cp-brand-right{padding:28px 20px 48px}}.cp-brand-state{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center}.cp-brand-state .cp-invalid-card,.cp-brand-state .cp-anf-card{width:100%}.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-signout{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;margin-bottom:4px;background:transparent;border:1.5px solid #e2eaf2;border-radius:6px;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;font-family:inherit;transition:all .15s;text-align:left}.cp-sb-signout svg{width:16px;height:16px;flex-shrink:0}.cp-sb-signout svg path{fill:#6b7c8a}.cp-sb-signout:hover{border-color:#f87171;color:#dc2626;background:#dc26260a}.cp-sb-signout:hover svg path{fill:#dc2626}.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{width:100%;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;flex-shrink:0;width:60px;height:60px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);overflow:hidden;background:#ffffff26}@media (max-width: 480px){.cp-banner__avatar{width:46px;height:46px}}.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__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-profile-logo-area{border-radius:50%!important;min-height:140px!important;width:140px!important;height:140px!important;margin:0 auto;overflow:hidden;padding:0!important;position:relative}.cp-profile-logo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.cp-profile-logo-area .cp-biz-logo__change{position:absolute;bottom:0;left:0;right:0;background:#0000007a;color:#fff!important;padding:7px 0 5px;text-align:center;font-size:10.5px;font-weight:600;margin-top:0!important;opacity:0;transition:opacity .18s}.cp-profile-logo-area:hover .cp-biz-logo__change{opacity:1}.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-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 Unauthenticated / Error states: branded two-column layout \u2500\u2500\u2500 -->\r\n<div *ngIf=\"noEmailError || isLookingUpAccount || auth0UserData || showAccountNotFound\" class=\"cp-page cp-page--brand\">\r\n\r\n  <!-- Left: Static marketing & branding panel -->\r\n  <aside class=\"cp-brand-left\">\r\n\r\n    <div class=\"cp-brand-logo-wrap\">\r\n      <svg class=\"cp-brand-logo-svg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 107.928 95.043\">\r\n        <path\r\n          d=\"M16.62,76.812a88.959,88.959,0,0,0,12.033-2.091,36.373,36.373,0,0,0,51.459.182h.031a87.176,87.176,0,0,0,11.714,1.91,47.928,47.928,0,0,1-75.237,0ZM.587,71.759c-1.441-3.048.553-7.467,5.2-12.463a.355.355,0,0,1,.487-.116.352.352,0,0,1,.12.485,4.269,4.269,0,0,0-.606,4.026c1.949,4.351,14.87,2.857,31.617-2.9a.783.783,0,0,1,.748,0c2.495,1.358,5.061,2.463,7.639,3.659l-.011-.017a16.755,16.755,0,0,1,2.258,1.1.963.963,0,0,1,0,1.794c-14.543,5.53-27.565,8.5-36.349,8.5C5.846,75.837,1.875,74.519.587,71.759Zm46.34-9.989C17.443,48.164-3.376,30.437.454,22.289c1.374-3.064,6.021-4.351,12.993-4.051a.346.346,0,1,1,0,.686,4.661,4.661,0,0,0-3.465,2.163C7.264,26.919,25.549,41.126,51.107,52.859s48.423,16.61,51.117,10.766a4.685,4.685,0,0,0-.606-4.029.5.5,0,0,1,0-.091.376.376,0,0,1,.37-.369.4.4,0,0,1,.248.091l-.011.011c4.625,5,6.644,9.349,5.111,12.408-1.319,2.793-5.309,4.119-11.163,4.119C84.8,75.764,66.395,70.755,46.927,61.77Zm-36.89,2.868a49.831,49.831,0,0,1-3-16.968,51.991,51.991,0,0,1,.812-8.955A98.753,98.753,0,0,0,17.941,46.8a4.375,4.375,0,0,0-.019.606,40.584,40.584,0,0,0,3.432,16.431,35.288,35.288,0,0,1-8.129.949Q11.63,64.783,10.037,64.639Zm77.4-.712a40.586,40.586,0,0,0,3.27-16.24V46.259a97.668,97.668,0,0,0,10.062-8.2,51.439,51.439,0,0,1,.859,9.377A49.608,49.608,0,0,1,98.587,64.49a30.815,30.815,0,0,1-11.148-.563Zm-.006,0h.006l-.006.015ZM69.57,57.2C66.316,56,63,54.735,59.6,53.314a.924.924,0,0,1,0-1.662c24-11.51,40.992-24.91,38.339-30.5a4.369,4.369,0,0,0-3.46-2.163.346.346,0,1,1,0-.692c6.855-.3,11.544.986,12.984,4.051C110.926,29.575,94.779,44.4,70.4,57.2a1.139,1.139,0,0,1-.416.079A1.156,1.156,0,0,1,69.57,57.2ZM12.343,25.331A46.369,46.369,0,0,1,54.463.008,45.874,45.874,0,0,1,96.1,24.643a33.823,33.823,0,0,1-8.04,8.264A35.874,35.874,0,0,0,54.208,9.589,35.431,35.431,0,0,0,20.38,33.259,39.308,39.308,0,0,1,12.343,25.331Z\" />\r\n      </svg>\r\n      <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-brand-logo-text\">\r\n        {{ privacyAndTerms?.companyName }}\r\n      </span>\r\n    </div>\r\n\r\n    <div class=\"cp-brand-hero\">\r\n      <span class=\"cp-brand-eyebrow\">Claim Your Account</span>\r\n      <!-- <h1 class=\"cp-brand-heading\">Welcome to<br />{{ privacyAndTerms?.companyName || 'Our Platform' }}</h1> -->\r\n      <p class=\"cp-brand-intro\">\r\n        Your account is ready. Complete this short form to set your credentials and unlock full access to the\r\n        platform's tools, programs, and services.\r\n      </p>\r\n    </div>\r\n\r\n    <ul class=\"cp-brand-features\">\r\n\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4l5 2.18V11c0 3.5-2.33 6.79-5 7.93-2.67-1.14-5-4.43-5-7.93V7.18L12 5z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Secure &amp; Encrypted</strong>\r\n          <span>Your information is protected end-to-end and handled in accordance with our Privacy Policy.</span>\r\n        </div>\r\n      </li>\r\n\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M7 2v11h3v9l7-12h-4l4-8z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Instant Access</strong>\r\n          <span>Once activated, you'll get immediate access to programs, rosters, and service requests.</span>\r\n        </div>\r\n      </li>\r\n\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Team &amp; Client Network</strong>\r\n          <span>Connect with certified professionals nationwide and manage your team from a single dashboard.</span>\r\n        </div>\r\n      </li>\r\n\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Complete Your Profile</strong>\r\n          <span>A complete profile unlocks every feature and makes you visible to clients and partners.</span>\r\n        </div>\r\n      </li>\r\n\r\n    </ul>\r\n\r\n    <div class=\"cp-brand-contact\">\r\n      <a *ngIf=\"privacyAndTerms?.contactEmail || privacyAndTerms?.email\"\r\n        [href]=\"'mailto:' + (privacyAndTerms.contactEmail || privacyAndTerms.email)\" class=\"cp-brand-contact__link\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            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\" />\r\n        </svg>\r\n        {{ privacyAndTerms?.contactEmail || privacyAndTerms?.email }}\r\n      </a>\r\n      <a *ngIf=\"privacyAndTerms?.phone\" [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-brand-contact__link\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            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\" />\r\n        </svg>\r\n        {{ privacyAndTerms?.phone }}\r\n      </a>\r\n      <a *ngIf=\"privacyAndTerms?.websiteurl\" [href]=\"privacyAndTerms.websiteurl\" target=\"_blank\"\r\n        rel=\"noopener noreferrer\" class=\"cp-brand-contact__link cp-brand-contact__link--website\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z\" />\r\n        </svg>\r\n        Visit {{ privacyAndTerms?.companyName || 'our website' }}\r\n        <svg viewBox=\"0 0 24 24\" class=\"cp-brand-contact__ext\">\r\n          <path\r\n            d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" />\r\n        </svg>\r\n      </a>\r\n    </div>\r\n\r\n  </aside>\r\n\r\n  <!-- Right: State-specific content (centered) -->\r\n  <main class=\"cp-brand-right\">\r\n\r\n    <!-- No Email Error -->\r\n    <div *ngIf=\"noEmailError\" class=\"cp-brand-state\">\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\">\r\n            <path\r\n              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\" />\r\n          </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\r\n          account.</p>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Account Lookup: Loading -->\r\n    <div *ngIf=\"isLookingUpAccount\" class=\"cp-brand-state\">\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    <!-- Account Not Found -->\r\n    <div *ngIf=\"!isLookingUpAccount && !auth0UserData && showAccountNotFound\" class=\"cp-brand-state\">\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\">\r\n            <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\" />\r\n          </svg>\r\n        </div>\r\n        <!-- <h2>Account Not Found</h2> -->\r\n        <p>The email <strong>{{ userEmail }}</strong> isn't linked to an existing account. Please check your invitation\r\n          link or contact support.</p>\r\n        <button type=\"button\" class=\"cp-btn\" style=\"margin-top:20px\" (click)=\"navigateToLogin()\">\r\n          <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\r\n            <path\r\n              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\"\r\n              fill=\"#fff\" />\r\n          </svg>\r\n          Create New Account\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Account Found (auth0 record exists, no active userId) -->\r\n    <div *ngIf=\"!isLookingUpAccount && auth0UserData\" class=\"cp-brand-state\">\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            '?' }}\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\">\r\n                <path\r\n                  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\" />\r\n              </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\" *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\">\r\n              <path\r\n                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\" />\r\n            </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\">\r\n              <path\r\n                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\" />\r\n            </svg>\r\n            {{ [auth0UserData.userDetails?.address, auth0UserData.userDetails?.city,\r\n            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\">\r\n            <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\" />\r\n          </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\">\r\n            <path\r\n              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\"\r\n              fill=\"#fff\" />\r\n          </svg>\r\n          Sign In to Your Account\r\n        </button>\r\n\r\n      </div>\r\n    </div>\r\n\r\n  </main>\r\n\r\n</div>\r\n\r\n\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\">\r\n        <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n      </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 *ngIf=\"!isInitialSetupCompleted && libConfig?.initialUrl\" type=\"button\" class=\"cp-btn\"\r\n      style=\"margin-top:20px\" (click)=\"navigateToInitialProcess()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\r\n        <path\r\n          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\"\r\n          fill=\"#fff\" />\r\n      </svg>\r\n      Complete Initial Setup\r\n    </button>\r\n    <button type=\"button\" class=\"cp-btn\" [class.cp-btn--ghost]=\"!isInitialSetupCompleted && libConfig?.initialUrl\"\r\n      style=\"margin-top:10px\" (click)=\"navigateToDashboard()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\r\n        <path d=\"M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z\" fill=\"currentColor\" />\r\n      </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\"\r\n      (click)=\"navigateToLogin()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;flex-shrink:0\">\r\n        <path\r\n          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\" />\r\n      </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 && !auth0UserData && !isLookingUpAccount && !isInitializing\"\r\n  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      <!-- Sign out -->\r\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-sb-signout\" (click)=\"logout()\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            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\" />\r\n        </svg>\r\n        Sign Out\r\n      </button>\r\n\r\n      <!-- Section status steps -->\r\n      <ul class=\"cp-steps\" style=\"margin-top:20px\">\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\">\r\n              <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\" />\r\n            </svg>\r\n          </span>\r\n          <div class=\"cp-step__body\">\r\n            <span class=\"cp-step__label\">Personal Information</span>\r\n            <span class=\"cp-step__sub\">Name, address, profile photo</span>\r\n          </div>\r\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionPersonalDone && sectionPhotoDone\">\r\n            <svg *ngIf=\"sectionPersonalDone && sectionPhotoDone\" viewBox=\"0 0 24 24\">\r\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n            </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\">\r\n              <path\r\n                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\" />\r\n            </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' : ''\r\n              }}</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\">\r\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n            </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\">\r\n              <path\r\n                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\" />\r\n            </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\">\r\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n            </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\" [href]=\"'mailto:' + privacyAndTerms.contactEmail\"\r\n          class=\"cp-contact-link\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              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\" />\r\n          </svg>\r\n          {{ privacyAndTerms?.contactEmail }}\r\n        </a>\r\n        <a *ngIf=\"privacyAndTerms?.phone\" [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-contact-link\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              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\" />\r\n          </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    <ng-container>\r\n      <!-- Mobile-only top bar -->\r\n      <div class=\"cp-mobile-bar\">\r\n        <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\" [alt]=\"privacyAndTerms?.companyName\"\r\n          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\">\r\n            <path\r\n              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\" />\r\n          </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\">\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>\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\">\r\n                <path\r\n                  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\" />\r\n              </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      </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\">\r\n            <path\r\n              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\" />\r\n          </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 Information (details + address + photo) \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\">\r\n                  <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\" />\r\n                </svg>\r\n              </span>\r\n              <div>\r\n                <h3 class=\"cp-card__title\">Personal Information</h3>\r\n                <p class=\"cp-card__sub\">Name, contact, address and profile photo</p>\r\n              </div>\r\n              <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionPersonalDone && sectionPhotoDone\">\r\n                <svg *ngIf=\"sectionPersonalDone && sectionPhotoDone\" viewBox=\"0 0 24 24\">\r\n                  <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                </svg>\r\n                <span *ngIf=\"!(sectionPersonalDone && sectionPhotoDone)\">\u2014</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"cp-card__body\">\r\n              <div class=\"cp-biz-layout\">\r\n                <!-- Left: fields -->\r\n                <div class=\"cp-biz-fields\">\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\" maxlength=\"14\"\r\n                        [class.is-invalid]=\"f['phone'].invalid && f['phone'].touched\" (input)=\"formatPhone($event)\"\r\n                        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 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\"\r\n                        maxlength=\"5\" />\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Right: profile photo -->\r\n                <div class=\"cp-biz-logo\">\r\n                  <label class=\"cp-biz-logo__label\">Profile Photo</label>\r\n                  <div class=\"cp-biz-logo__area cp-profile-logo-area\" (click)=\"cpProfileInput.click()\">\r\n                    <input #cpProfileInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"onProfileFileChange($event)\"\r\n                      class=\"cp-upload-hidden\" />\r\n                    <ng-container *ngIf=\"profilePreviewUrl; else profilePlaceholder\">\r\n                      <img [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-profile-logo-img\" />\r\n                      <span class=\"cp-biz-logo__change\">Change</span>\r\n                    </ng-container>\r\n                    <ng-template #profilePlaceholder>\r\n                      <div class=\"cp-biz-logo__placeholder\">\r\n                        <svg viewBox=\"0 0 24 24\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                        <span>Upload Photo</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 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\">\r\n                  <path\r\n                    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\" />\r\n                </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\">\r\n                  <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                </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\" [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\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                        <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                      </button>\r\n                    </div>\r\n                    <div class=\"cp-error\" *ngIf=\"f['password'].errors?.['minlength'] && f['password'].touched\">Min. 8\r\n                      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\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                        <svg *ngIf=\"showConfirmPassword\" viewBox=\"0 0 24 24\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                      </button>\r\n                    </div>\r\n                    <div class=\"cp-error\"\r\n                      *ngIf=\"claimForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched\">Passwords do not\r\n                      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\">\r\n                              <path\r\n                                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\" />\r\n                            </svg>\r\n                            <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\">\r\n                              <path\r\n                                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\" />\r\n                            </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\"\r\n                            autocomplete=\"new-password\" />\r\n                          <button type=\"button\" class=\"cp-pw-toggle\"\r\n                            (click)=\"showConfirmPassword = !showConfirmPassword\">\r\n                            <svg *ngIf=\"!showConfirmPassword\" viewBox=\"0 0 24 24\">\r\n                              <path\r\n                                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\" />\r\n                            </svg>\r\n                            <svg *ngIf=\"showConfirmPassword\" viewBox=\"0 0 24 24\">\r\n                              <path\r\n                                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\" />\r\n                            </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\">\r\n                        <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                      </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()\"\r\n                      [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\">\r\n                          <path\r\n                            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\" />\r\n                        </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\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                        <span *ngIf=\"!otpExpired\">{{ otpMinutes }}:{{ otpSeconds < 10 ? '0' + otpSeconds : otpSeconds\r\n                            }}</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\">\r\n                  <path\r\n                    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\" />\r\n                </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\">\r\n                  <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                </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\r\n                      </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\" 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\"\r\n                        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                <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\" (change)=\"onBusinessLogoChange($event)\"\r\n                      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\">\r\n                          <path\r\n                            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\" />\r\n                        </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\" [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;\r\n                    Conditions</a>\r\n                  and\r\n                  <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Privacy Statement', $event)\">Privacy\r\n                    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\"\r\n                  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\"\r\n                  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\"\r\n                  fill=\"#fff\" />\r\n              </svg>\r\n              {{ uploadStatus || (isSubmitting ? 'Processing\u2026' : (userHasExistingDetails ? 'Save Changes' : 'Activate My\r\n              Account')) }}\r\n            </button>\r\n          </div>\r\n\r\n        </form>\r\n      </div>\r\n    </ng-container>\r\n\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>", 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-page--brand{display:flex;min-height:100vh;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif}@media (max-width: 860px){.cp-page--brand{flex-direction:column}}.cp-brand-left{width:42%;min-width:320px;background:#fff;border-right:1px solid #e2eaf2;display:flex;flex-direction:column;padding:10px 48px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-brand-left{position:static;height:auto;width:100%;min-width:unset;padding:32px 24px 28px;border-right:none;border-bottom:1px solid #e2eaf2}}.cp-brand-logo-wrap{margin-bottom:10px}.cp-brand-logo-img{max-height:48px;max-width:200px;object-fit:contain;display:block}.cp-brand-logo-svg{display:block;height:48px;width:auto;max-width:200px;fill:#4077ad}.cp-brand-logo-text{font-size:20px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-brand-hero{margin-bottom:15px}.cp-brand-eyebrow{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.16);border-radius:99px;padding:3px 10px;margin-bottom:16px}.cp-brand-heading{font-size:26px;font-weight:800;color:#0c1620;line-height:1.22;letter-spacing:-.4px;margin:0 0 14px}@media (max-width: 860px){.cp-brand-heading{font-size:21px}}.cp-brand-intro{font-size:13.5px;color:#6b7c8a;line-height:1.78;margin:0}.cp-brand-features{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;gap:6px}.cp-brand-feature{display:flex;align-items:flex-start;gap:13px;padding:13px 15px;border-radius:9px;background:#f8fafc;border:1px solid #e8edf3;transition:border-color .18s,background .18s}.cp-brand-feature:hover{background:#4077ad08;border-color:#4077ad38}.cp-brand-feature__icon{width:34px;height:34px;flex-shrink:0;border-radius:8px;background:#4077ad14;display:flex;align-items:center;justify-content:center}.cp-brand-feature__icon svg{width:17px;height:17px}.cp-brand-feature__icon svg path{fill:#4077ad}.cp-brand-feature__body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.cp-brand-feature__body strong{font-size:12.5px;font-weight:700;color:#0c1620;line-height:1.2}.cp-brand-feature__body span{font-size:11.5px;color:#6b7c8a;line-height:1.62}.cp-brand-contact{display:flex;flex-direction:column;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid #e8edf3}.cp-brand-contact__link{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-brand-contact__link svg{width:14px;height:14px;flex-shrink:0}.cp-brand-contact__link svg path{fill:currentColor}.cp-brand-contact__link:hover{color:#4077ad}.cp-brand-contact__link--website{font-weight:600;color:#4077ad}.cp-brand-contact__link--website:hover{color:#335f8a}.cp-brand-contact__ext{width:11px!important;height:11px!important;opacity:.65}.cp-brand-right{flex:1;background:#eef1f4;display:flex;align-items:center;justify-content:center;padding:40px 28px;min-width:0}@media (max-width: 860px){.cp-brand-right{padding:28px 20px 48px}}.cp-brand-state{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center}.cp-brand-state .cp-invalid-card,.cp-brand-state .cp-anf-card{width:100%}.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-signout{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;margin-bottom:4px;background:transparent;border:1.5px solid #e2eaf2;border-radius:6px;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;font-family:inherit;transition:all .15s;text-align:left}.cp-sb-signout svg{width:16px;height:16px;flex-shrink:0}.cp-sb-signout svg path{fill:#6b7c8a}.cp-sb-signout:hover{border-color:#f87171;color:#dc2626;background:#dc26260a}.cp-sb-signout:hover svg path{fill:#dc2626}.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;flex-shrink:0;width:60px;height:60px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);overflow:hidden;background:#ffffff26}@media (max-width: 480px){.cp-banner__avatar{width:46px;height:46px}}.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__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-profile-logo-area{border-radius:50%!important;min-height:140px!important;width:140px!important;height:140px!important;margin:0 auto;overflow:hidden}.cp-profile-logo-img{width:100%;height:100%;object-fit:cover;border-radius:50%}.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-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"] }]
+            args: [{ selector: 'app-claim-process', standalone: false, template: "<h2 class=\"sr-only\">Claim Your Account</h2>\r\n\r\n<!-- \u2500\u2500\u2500 Unauthenticated / Error states: branded two-column layout \u2500\u2500\u2500 -->\r\n<div *ngIf=\"noEmailError || isLookingUpAccount || auth0UserData || showAccountNotFound\" class=\"cp-page cp-page--brand\">\r\n\r\n  <!-- Left: Static marketing & branding panel -->\r\n  <aside class=\"cp-brand-left\">\r\n\r\n    <div class=\"cp-brand-logo-wrap\">\r\n      <svg class=\"cp-brand-logo-svg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 107.928 95.043\">\r\n        <path\r\n          d=\"M16.62,76.812a88.959,88.959,0,0,0,12.033-2.091,36.373,36.373,0,0,0,51.459.182h.031a87.176,87.176,0,0,0,11.714,1.91,47.928,47.928,0,0,1-75.237,0ZM.587,71.759c-1.441-3.048.553-7.467,5.2-12.463a.355.355,0,0,1,.487-.116.352.352,0,0,1,.12.485,4.269,4.269,0,0,0-.606,4.026c1.949,4.351,14.87,2.857,31.617-2.9a.783.783,0,0,1,.748,0c2.495,1.358,5.061,2.463,7.639,3.659l-.011-.017a16.755,16.755,0,0,1,2.258,1.1.963.963,0,0,1,0,1.794c-14.543,5.53-27.565,8.5-36.349,8.5C5.846,75.837,1.875,74.519.587,71.759Zm46.34-9.989C17.443,48.164-3.376,30.437.454,22.289c1.374-3.064,6.021-4.351,12.993-4.051a.346.346,0,1,1,0,.686,4.661,4.661,0,0,0-3.465,2.163C7.264,26.919,25.549,41.126,51.107,52.859s48.423,16.61,51.117,10.766a4.685,4.685,0,0,0-.606-4.029.5.5,0,0,1,0-.091.376.376,0,0,1,.37-.369.4.4,0,0,1,.248.091l-.011.011c4.625,5,6.644,9.349,5.111,12.408-1.319,2.793-5.309,4.119-11.163,4.119C84.8,75.764,66.395,70.755,46.927,61.77Zm-36.89,2.868a49.831,49.831,0,0,1-3-16.968,51.991,51.991,0,0,1,.812-8.955A98.753,98.753,0,0,0,17.941,46.8a4.375,4.375,0,0,0-.019.606,40.584,40.584,0,0,0,3.432,16.431,35.288,35.288,0,0,1-8.129.949Q11.63,64.783,10.037,64.639Zm77.4-.712a40.586,40.586,0,0,0,3.27-16.24V46.259a97.668,97.668,0,0,0,10.062-8.2,51.439,51.439,0,0,1,.859,9.377A49.608,49.608,0,0,1,98.587,64.49a30.815,30.815,0,0,1-11.148-.563Zm-.006,0h.006l-.006.015ZM69.57,57.2C66.316,56,63,54.735,59.6,53.314a.924.924,0,0,1,0-1.662c24-11.51,40.992-24.91,38.339-30.5a4.369,4.369,0,0,0-3.46-2.163.346.346,0,1,1,0-.692c6.855-.3,11.544.986,12.984,4.051C110.926,29.575,94.779,44.4,70.4,57.2a1.139,1.139,0,0,1-.416.079A1.156,1.156,0,0,1,69.57,57.2ZM12.343,25.331A46.369,46.369,0,0,1,54.463.008,45.874,45.874,0,0,1,96.1,24.643a33.823,33.823,0,0,1-8.04,8.264A35.874,35.874,0,0,0,54.208,9.589,35.431,35.431,0,0,0,20.38,33.259,39.308,39.308,0,0,1,12.343,25.331Z\" />\r\n      </svg>\r\n      <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-brand-logo-text\">\r\n        {{ privacyAndTerms?.companyName }}\r\n      </span>\r\n    </div>\r\n\r\n    <div class=\"cp-brand-hero\">\r\n      <span class=\"cp-brand-eyebrow\">Claim Your Account</span>\r\n      <!-- <h1 class=\"cp-brand-heading\">Welcome to<br />{{ privacyAndTerms?.companyName || 'Our Platform' }}</h1> -->\r\n      <p class=\"cp-brand-intro\">\r\n        Your account is ready. Complete this short form to set your credentials and unlock full access to the\r\n        platform's tools, programs, and services.\r\n      </p>\r\n    </div>\r\n\r\n    <ul class=\"cp-brand-features\">\r\n\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4l5 2.18V11c0 3.5-2.33 6.79-5 7.93-2.67-1.14-5-4.43-5-7.93V7.18L12 5z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Secure &amp; Encrypted</strong>\r\n          <span>Your information is protected end-to-end and handled in accordance with our Privacy Policy.</span>\r\n        </div>\r\n      </li>\r\n\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M7 2v11h3v9l7-12h-4l4-8z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Instant Access</strong>\r\n          <span>Once activated, you'll get immediate access to programs, rosters, and service requests.</span>\r\n        </div>\r\n      </li>\r\n\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Team &amp; Client Network</strong>\r\n          <span>Connect with certified professionals nationwide and manage your team from a single dashboard.</span>\r\n        </div>\r\n      </li>\r\n\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Complete Your Profile</strong>\r\n          <span>A complete profile unlocks every feature and makes you visible to clients and partners.</span>\r\n        </div>\r\n      </li>\r\n\r\n    </ul>\r\n\r\n    <div class=\"cp-brand-contact\">\r\n      <a *ngIf=\"privacyAndTerms?.contactEmail || privacyAndTerms?.email\"\r\n        [href]=\"'mailto:' + (privacyAndTerms.contactEmail || privacyAndTerms.email)\" class=\"cp-brand-contact__link\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            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\" />\r\n        </svg>\r\n        {{ privacyAndTerms?.contactEmail || privacyAndTerms?.email }}\r\n      </a>\r\n      <a *ngIf=\"privacyAndTerms?.phone\" [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-brand-contact__link\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            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\" />\r\n        </svg>\r\n        {{ privacyAndTerms?.phone }}\r\n      </a>\r\n      <a *ngIf=\"privacyAndTerms?.websiteurl\" [href]=\"privacyAndTerms.websiteurl\" target=\"_blank\"\r\n        rel=\"noopener noreferrer\" class=\"cp-brand-contact__link cp-brand-contact__link--website\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z\" />\r\n        </svg>\r\n        Visit {{ privacyAndTerms?.companyName || 'our website' }}\r\n        <svg viewBox=\"0 0 24 24\" class=\"cp-brand-contact__ext\">\r\n          <path\r\n            d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" />\r\n        </svg>\r\n      </a>\r\n    </div>\r\n\r\n  </aside>\r\n\r\n  <!-- Right: State-specific content (centered) -->\r\n  <main class=\"cp-brand-right\">\r\n\r\n    <!-- No Email Error -->\r\n    <div *ngIf=\"noEmailError\" class=\"cp-brand-state\">\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\">\r\n            <path\r\n              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\" />\r\n          </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\r\n          account.</p>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Account Lookup: Loading -->\r\n    <div *ngIf=\"isLookingUpAccount\" class=\"cp-brand-state\">\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    <!-- Account Not Found -->\r\n    <div *ngIf=\"!isLookingUpAccount && !auth0UserData && showAccountNotFound\" class=\"cp-brand-state\">\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\">\r\n            <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\" />\r\n          </svg>\r\n        </div>\r\n        <!-- <h2>Account Not Found</h2> -->\r\n        <p>The email <strong>{{ userEmail }}</strong> isn't linked to an existing account. Please check your invitation\r\n          link or contact support.</p>\r\n        <button type=\"button\" class=\"cp-btn\" style=\"margin-top:20px\" (click)=\"navigateToLogin()\">\r\n          <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\r\n            <path\r\n              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\"\r\n              fill=\"#fff\" />\r\n          </svg>\r\n          Create New Account\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Account Found (auth0 record exists, no active userId) -->\r\n    <div *ngIf=\"!isLookingUpAccount && auth0UserData\" class=\"cp-brand-state\">\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            '?' }}\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\">\r\n                <path\r\n                  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\" />\r\n              </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\" *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\">\r\n              <path\r\n                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\" />\r\n            </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\">\r\n              <path\r\n                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\" />\r\n            </svg>\r\n            {{ [auth0UserData.userDetails?.address, auth0UserData.userDetails?.city,\r\n            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\">\r\n            <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\" />\r\n          </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\">\r\n            <path\r\n              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\"\r\n              fill=\"#fff\" />\r\n          </svg>\r\n          Sign In to Your Account\r\n        </button>\r\n\r\n      </div>\r\n    </div>\r\n\r\n  </main>\r\n\r\n</div>\r\n\r\n\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\">\r\n        <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n      </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 *ngIf=\"!isInitialSetupCompleted && libConfig?.initialUrl\" type=\"button\" class=\"cp-btn\"\r\n      style=\"margin-top:20px\" (click)=\"navigateToInitialProcess()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\r\n        <path\r\n          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\"\r\n          fill=\"#fff\" />\r\n      </svg>\r\n      Complete Initial Setup\r\n    </button>\r\n    <button type=\"button\" class=\"cp-btn\" [class.cp-btn--ghost]=\"!isInitialSetupCompleted && libConfig?.initialUrl\"\r\n      style=\"margin-top:10px\" (click)=\"navigateToDashboard()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\r\n        <path d=\"M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z\" fill=\"currentColor\" />\r\n      </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\"\r\n      (click)=\"navigateToLogin()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;flex-shrink:0\">\r\n        <path\r\n          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\" />\r\n      </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 && !auth0UserData && !isLookingUpAccount && !isInitializing\"\r\n  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      <!-- Sign out -->\r\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-sb-signout\" (click)=\"logout()\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            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\" />\r\n        </svg>\r\n        Sign Out\r\n      </button>\r\n\r\n      <!-- Section status steps -->\r\n      <ul class=\"cp-steps\" style=\"margin-top:20px\">\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\">\r\n              <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\" />\r\n            </svg>\r\n          </span>\r\n          <div class=\"cp-step__body\">\r\n            <span class=\"cp-step__label\">Personal Information</span>\r\n            <span class=\"cp-step__sub\">Name, address, profile photo</span>\r\n          </div>\r\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionPersonalDone && sectionPhotoDone\">\r\n            <svg *ngIf=\"sectionPersonalDone && sectionPhotoDone\" viewBox=\"0 0 24 24\">\r\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n            </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\">\r\n              <path\r\n                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\" />\r\n            </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' : ''\r\n              }}</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\">\r\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n            </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\">\r\n              <path\r\n                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\" />\r\n            </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\">\r\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n            </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\" [href]=\"'mailto:' + privacyAndTerms.contactEmail\"\r\n          class=\"cp-contact-link\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              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\" />\r\n          </svg>\r\n          {{ privacyAndTerms?.contactEmail }}\r\n        </a>\r\n        <a *ngIf=\"privacyAndTerms?.phone\" [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-contact-link\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              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\" />\r\n          </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    <ng-container>\r\n      <!-- Mobile-only top bar -->\r\n      <div class=\"cp-mobile-bar\">\r\n        <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\" [alt]=\"privacyAndTerms?.companyName\"\r\n          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\">\r\n            <path\r\n              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\" />\r\n          </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\">\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>\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\">\r\n                <path\r\n                  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\" />\r\n              </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      </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\">\r\n            <path\r\n              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\" />\r\n          </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 Information (details + address + photo) \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\">\r\n                  <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\" />\r\n                </svg>\r\n              </span>\r\n              <div>\r\n                <h3 class=\"cp-card__title\">Personal Information</h3>\r\n                <p class=\"cp-card__sub\">Name, contact, address and profile photo</p>\r\n              </div>\r\n              <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionPersonalDone && sectionPhotoDone\">\r\n                <svg *ngIf=\"sectionPersonalDone && sectionPhotoDone\" viewBox=\"0 0 24 24\">\r\n                  <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                </svg>\r\n                <span *ngIf=\"!(sectionPersonalDone && sectionPhotoDone)\">\u2014</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"cp-card__body\">\r\n              <div class=\"cp-biz-layout\">\r\n                <!-- Left: fields -->\r\n                <div class=\"cp-biz-fields\">\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\" maxlength=\"14\"\r\n                        [class.is-invalid]=\"f['phone'].invalid && f['phone'].touched\" (input)=\"formatPhone($event)\"\r\n                        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 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\"\r\n                        maxlength=\"5\" />\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Right: profile photo -->\r\n                <div class=\"cp-biz-logo\">\r\n                  <label class=\"cp-biz-logo__label\">Profile Photo</label>\r\n                  <div class=\"cp-biz-logo__area cp-profile-logo-area\" (click)=\"cpProfileInput.click()\">\r\n                    <input #cpProfileInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"onProfileFileChange($event)\"\r\n                      class=\"cp-upload-hidden\" />\r\n                    <ng-container *ngIf=\"profilePreviewUrl; else profilePlaceholder\">\r\n                      <img [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-profile-logo-img\" />\r\n                      <span class=\"cp-biz-logo__change\">Change</span>\r\n                    </ng-container>\r\n                    <ng-template #profilePlaceholder>\r\n                      <div class=\"cp-biz-logo__placeholder\">\r\n                        <svg viewBox=\"0 0 24 24\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                        <span>Upload Photo</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 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\">\r\n                  <path\r\n                    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\" />\r\n                </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\">\r\n                  <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                </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\" [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\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                        <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                      </button>\r\n                    </div>\r\n                    <div class=\"cp-error\" *ngIf=\"f['password'].errors?.['minlength'] && f['password'].touched\">Min. 8\r\n                      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\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                        <svg *ngIf=\"showConfirmPassword\" viewBox=\"0 0 24 24\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                      </button>\r\n                    </div>\r\n                    <div class=\"cp-error\"\r\n                      *ngIf=\"claimForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched\">Passwords do not\r\n                      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\">\r\n                              <path\r\n                                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\" />\r\n                            </svg>\r\n                            <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\">\r\n                              <path\r\n                                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\" />\r\n                            </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\"\r\n                            autocomplete=\"new-password\" />\r\n                          <button type=\"button\" class=\"cp-pw-toggle\"\r\n                            (click)=\"showConfirmPassword = !showConfirmPassword\">\r\n                            <svg *ngIf=\"!showConfirmPassword\" viewBox=\"0 0 24 24\">\r\n                              <path\r\n                                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\" />\r\n                            </svg>\r\n                            <svg *ngIf=\"showConfirmPassword\" viewBox=\"0 0 24 24\">\r\n                              <path\r\n                                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\" />\r\n                            </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\">\r\n                        <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                      </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()\"\r\n                      [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\">\r\n                          <path\r\n                            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\" />\r\n                        </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\">\r\n                          <path\r\n                            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\" />\r\n                        </svg>\r\n                        <span *ngIf=\"!otpExpired\">{{ otpMinutes }}:{{ otpSeconds < 10 ? '0' + otpSeconds : otpSeconds\r\n                            }}</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\">\r\n                  <path\r\n                    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\" />\r\n                </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\">\r\n                  <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                </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\r\n                      </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\" 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\"\r\n                        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                <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\" (change)=\"onBusinessLogoChange($event)\"\r\n                      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\">\r\n                          <path\r\n                            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\" />\r\n                        </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\" [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;\r\n                    Conditions</a>\r\n                  and\r\n                  <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Privacy Statement', $event)\">Privacy\r\n                    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\"\r\n                  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\"\r\n                  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\"\r\n                  fill=\"#fff\" />\r\n              </svg>\r\n              {{ uploadStatus || (isSubmitting ? 'Processing\u2026' : (userHasExistingDetails ? 'Save Changes' : 'Activate My\r\n              Account')) }}\r\n            </button>\r\n          </div>\r\n\r\n        </form>\r\n      </div>\r\n    </ng-container>\r\n\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>", 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-page--brand{display:flex;min-height:100vh;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif}@media (max-width: 860px){.cp-page--brand{flex-direction:column}}.cp-brand-left{width:42%;min-width:320px;background:#fff;border-right:1px solid #e2eaf2;display:flex;flex-direction:column;padding:10px 48px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-brand-left{position:static;height:auto;width:100%;min-width:unset;padding:32px 24px 28px;border-right:none;border-bottom:1px solid #e2eaf2}}.cp-brand-logo-wrap{margin-bottom:10px}.cp-brand-logo-img{max-height:48px;max-width:200px;object-fit:contain;display:block}.cp-brand-logo-svg{display:block;height:48px;width:auto;max-width:200px;fill:#4077ad}.cp-brand-logo-text{font-size:20px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-brand-hero{margin-bottom:15px}.cp-brand-eyebrow{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.16);border-radius:99px;padding:3px 10px;margin-bottom:16px}.cp-brand-heading{font-size:26px;font-weight:800;color:#0c1620;line-height:1.22;letter-spacing:-.4px;margin:0 0 14px}@media (max-width: 860px){.cp-brand-heading{font-size:21px}}.cp-brand-intro{font-size:13.5px;color:#6b7c8a;line-height:1.78;margin:0}.cp-brand-features{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;gap:6px}.cp-brand-feature{display:flex;align-items:flex-start;gap:13px;padding:13px 15px;border-radius:9px;background:#f8fafc;border:1px solid #e8edf3;transition:border-color .18s,background .18s}.cp-brand-feature:hover{background:#4077ad08;border-color:#4077ad38}.cp-brand-feature__icon{width:34px;height:34px;flex-shrink:0;border-radius:8px;background:#4077ad14;display:flex;align-items:center;justify-content:center}.cp-brand-feature__icon svg{width:17px;height:17px}.cp-brand-feature__icon svg path{fill:#4077ad}.cp-brand-feature__body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.cp-brand-feature__body strong{font-size:12.5px;font-weight:700;color:#0c1620;line-height:1.2}.cp-brand-feature__body span{font-size:11.5px;color:#6b7c8a;line-height:1.62}.cp-brand-contact{display:flex;flex-direction:column;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid #e8edf3}.cp-brand-contact__link{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-brand-contact__link svg{width:14px;height:14px;flex-shrink:0}.cp-brand-contact__link svg path{fill:currentColor}.cp-brand-contact__link:hover{color:#4077ad}.cp-brand-contact__link--website{font-weight:600;color:#4077ad}.cp-brand-contact__link--website:hover{color:#335f8a}.cp-brand-contact__ext{width:11px!important;height:11px!important;opacity:.65}.cp-brand-right{flex:1;background:#eef1f4;display:flex;align-items:center;justify-content:center;padding:40px 28px;min-width:0}@media (max-width: 860px){.cp-brand-right{padding:28px 20px 48px}}.cp-brand-state{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center}.cp-brand-state .cp-invalid-card,.cp-brand-state .cp-anf-card{width:100%}.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-signout{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;margin-bottom:4px;background:transparent;border:1.5px solid #e2eaf2;border-radius:6px;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;font-family:inherit;transition:all .15s;text-align:left}.cp-sb-signout svg{width:16px;height:16px;flex-shrink:0}.cp-sb-signout svg path{fill:#6b7c8a}.cp-sb-signout:hover{border-color:#f87171;color:#dc2626;background:#dc26260a}.cp-sb-signout:hover svg path{fill:#dc2626}.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{width:100%;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;flex-shrink:0;width:60px;height:60px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);overflow:hidden;background:#ffffff26}@media (max-width: 480px){.cp-banner__avatar{width:46px;height:46px}}.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__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-profile-logo-area{border-radius:50%!important;min-height:140px!important;width:140px!important;height:140px!important;margin:0 auto;overflow:hidden;padding:0!important;position:relative}.cp-profile-logo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.cp-profile-logo-area .cp-biz-logo__change{position:absolute;bottom:0;left:0;right:0;background:#0000007a;color:#fff!important;padding:7px 0 5px;text-align:center;font-size:10.5px;font-weight:600;margin-top:0!important;opacity:0;transition:opacity .18s}.cp-profile-logo-area:hover .cp-biz-logo__change{opacity:1}.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-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]