@idsoftsource/initial-process 3.5.9 → 3.6.1

package/fesm2022/idsoftsource-initial-process.mjs

@@ -2771,13 +2771,13 @@ class UserToolService {
           CREATE USER TOOL
     ============================== */
     createUserTool(model) {
-        return this.httpClient.post(`${this.baseUrl}/CreateUserTool`, model);
+        return this.httpClient.post(`${this.baseUrl}/CreateNewUserTool`, model);
     }
     /* ==============================
           UPDATE USER TOOL
     ============================== */
     updateUserTool(model) {
-        return this.httpClient.put(`${this.baseUrl}/UpdateUserTool`, model);
+        return this.httpClient.put(`${this.baseUrl}/UpdateNewUserTool`, model);
     }
     /* ==============================
           BULK DELETE USER TOOL
@@ -2789,7 +2789,7 @@ class UserToolService {
           GET USER TOOL (GRID)
     ============================== */
     getUserTool(query) {
-        return this.httpClient.get(`${this.baseUrl}/GetUserTool`, {
+        return this.httpClient.get(`${this.baseUrl}/GetNewUserTool`, {
             params: this.buildParams(query),
         });
     }
@@ -2919,7 +2919,7 @@ class UserDocumentService {
         return this.httpClient.put(`${this.baseUrl}/UpdateNewUserDocument`, model);
     }
     getUserDocument(query) {
-        return this.httpClient.get(`${this.baseUrl}/GetUserDocument`, {
+        return this.httpClient.get(`${this.baseUrl}/GetNewUserDocument`, {
             params: this.buildParams(query)
         });
     }
@@ -3101,6 +3101,9 @@ class FrontEndProvidersService {
     getProviderDetails(id) {
         return this.http.get(`${this.baseUrl}/GetProviderById?targetProviderId=${id}`);
     }
+    getProviderUserMapping(query) {
+        return this.http.get(`${this.baseUrl}/GetProviderUserMapping`, { params: this.generateParams(query) });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FrontEndProvidersService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FrontEndProvidersService, providedIn: 'root' });
 }
@@ -3317,7 +3320,7 @@ class PreviewComponent {
                 }
             }
             if (!sessionStorage.getItem('providerId')) {
-                this.restoreProviderIdFromLocalCache();
+                await this.restoreProviderId();
             }
             const storedCompanyDetails = this.store.profileSignal()?.companyDetails;
             if (storedCompanyDetails) {
@@ -7437,20 +7440,53 @@ class PreviewComponent {
             logoUrl: this.logo.logoUrl
         };
     }
-    // localStorage (unlike sessionStorage) survives a sessionStorage clear and a browser
-    // restart, and keying it by the user's own email keeps each user's cached provider
-    // fully isolated — no risk of one user's provider leaking into another's session.
-    // GetProviderUserMapping was tried as a server-side source of truth for this but
-    // consistently returns an empty result, so it can't be relied on — this local cache
-    // is the fallback of record.
+    // Keyed by payloadUserId — the same stable identifier already used for
+    // ip_provider_owner and every other targetUserId call in this component.
     providerCacheKey() {
-        const normalized = (this.useremail || '').trim().toLowerCase();
+        const normalized = (this.payloadUserId || '').toString().trim();
         return normalized ? `ip_provider_cache::${normalized}` : null;
     }
+    // Authoritative, cross-device source of truth: ask the backend whether this user
+    // already has a provider mapping. Correct endpoint is FrontEndUser/GetProviderUserMapping
+    // (NOT the ProviderUserMapping controller, which always returns an empty result for
+    // this lookup). Falls back to the local per-device cache if the call fails or the
+    // user genuinely has no mapping there either.
+    async restoreProviderMappingFromServer() {
+        if (!this.payloadUserId)
+            return false;
+        try {
+            const res = await firstValueFrom(this.frontendProviderService.getProviderUserMapping({
+                TargetUserId: this.payloadUserId,
+                Page: 1,
+                PageSize: 1,
+            }));
+            const mapping = res?.data?.[0];
+            const providerId = mapping?.providerId ?? null;
+            if (providerId) {
+                sessionStorage.setItem('providerId', providerId);
+                sessionStorage.setItem('ip_provider_owner', this.payloadUserId);
+                this.cacheProviderIdLocally(providerId);
+                return true;
+            }
+        }
+        catch (err) {
+            console.error('Unable to look up existing provider mapping from server', err);
+        }
+        return false;
+    }
+    // Combines the two sources: try the backend first (works across any device/browser),
+    // then fall back to the local per-device cache if that fails or comes back empty.
+    async restoreProviderId() {
+        const restoredFromServer = await this.restoreProviderMappingFromServer();
+        if (!restoredFromServer) {
+            this.restoreProviderIdFromLocalCache();
+        }
+    }
     // Restores providerId/providerUserMappingId into sessionStorage from the local,
-    // per-email cache when they're missing (e.g. sessionStorage was cleared) but this
-    // user already created a provider earlier. Prevents saveProvider() from mistakenly
-    // creating a duplicate provider for a returning user.
+    // per-user cache when they're missing (e.g. sessionStorage was cleared, or the
+    // server lookup didn't find anything) but this user already created a provider
+    // earlier on this same device. Prevents saveProvider() from mistakenly creating a
+    // duplicate provider for a returning user.
     restoreProviderIdFromLocalCache() {
         const key = this.providerCacheKey();
         if (!key)
@@ -7471,7 +7507,7 @@ class PreviewComponent {
             console.error('Unable to restore provider id from local cache', err);
         }
     }
-    // Persists the current provider id/mapping so a future session for the same email
+    // Persists the current provider id/mapping so a future session on this device
     // (even after sessionStorage is cleared) can find it again instead of recreating it.
     cacheProviderIdLocally(providerId, providerUserMappingId) {
         const key = this.providerCacheKey();
@@ -7486,7 +7522,7 @@ class PreviewComponent {
     }
     async saveProvider() {
         if (!sessionStorage.getItem('providerId')) {
-            this.restoreProviderIdFromLocalCache();
+            await this.restoreProviderId();
         }
         const existingProviderId = sessionStorage.getItem('providerId');
         this.provider = this.bindProviderDetails();
@@ -39641,11 +39677,11 @@ class ClaimProcessComponent {
     }
     ngOnDestroy() { this.stopOtpTimer(); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ClaimProcessComponent, deps: [{ token: i7.FormBuilder }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: ClaimProcessService }, { token: i1$1.BsModalService }, { token: i1$3.TokenService }, { token: i1$3.AuthLogoutService }, { token: IndustryService }, { 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<ng-container *ngIf=\"pendingRoleName\"> \u2014 {{ pendingRoleName }}</ng-container></h2>\n\n<!-- \u2500\u2500\u2500 Unauthenticated / Error states: branded two-column layout \u2500\u2500\u2500 -->\n<div *ngIf=\"noEmailError || isLookingUpAccount || auth0UserData || showAccountNotFound\" class=\"cp-page cp-page--brand\">\n\n  <!-- Left: Static marketing & branding panel -->\n  <aside class=\"cp-brand-left\">\n\n    <div class=\"cp-brand-hero\">\n      <span class=\"cp-brand-eyebrow\">Claim Your Account<ng-container *ngIf=\"pendingRoleName\"> \u2014 {{ pendingRoleName\n          }}</ng-container></span>\n      <p class=\"cp-brand-intro\">\n        Your account is ready. Complete this short form to set your credentials and unlock your access to the\n        platform's tools, programs, and services.\n      </p>\n    </div>\n\n    <ul class=\"cp-brand-features\">\n      <li class=\"cp-brand-feature\">\n        <span class=\"cp-brand-feature__icon\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\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\" />\n          </svg>\n        </span>\n        <div class=\"cp-brand-feature__body\">\n          <strong>Secure &amp; Encrypted</strong>\n          <span>Your information is protected end-to-end and handled in accordance with our Privacy Policy.</span>\n        </div>\n      </li>\n      <li class=\"cp-brand-feature\">\n        <span class=\"cp-brand-feature__icon\">\n          <svg viewBox=\"0 0 24 24\">\n            <path d=\"M7 2v11h3v9l7-12h-4l4-8z\" />\n          </svg>\n        </span>\n        <div class=\"cp-brand-feature__body\">\n          <strong>Instant Access</strong>\n          <span>Once activated, you'll get immediate access to programs, rosters, and service requests.</span>\n        </div>\n      </li>\n      <li class=\"cp-brand-feature\">\n        <span class=\"cp-brand-feature__icon\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\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\" />\n          </svg>\n        </span>\n        <div class=\"cp-brand-feature__body\">\n          <strong>Team &amp; Client Network</strong>\n          <span>Connect with certified professionals nationwide and manage your team from a single dashboard.</span>\n        </div>\n      </li>\n      <li class=\"cp-brand-feature\">\n        <span class=\"cp-brand-feature__icon\">\n          <svg viewBox=\"0 0 24 24\">\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\" />\n          </svg>\n        </span>\n        <div class=\"cp-brand-feature__body\">\n          <strong>Complete Your Profile</strong>\n          <span>A complete profile unlocks every feature and makes you visible to clients and partners.</span>\n        </div>\n      </li>\n    </ul>\n\n    <div class=\"cp-brand-contact\">\n      <a *ngIf=\"privacyAndTerms?.contactEmail || privacyAndTerms?.email\"\n        [href]=\"'mailto:' + (privacyAndTerms.contactEmail || privacyAndTerms.email)\" class=\"cp-brand-contact__link\">\n        <svg viewBox=\"0 0 24 24\">\n          <path\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\" />\n        </svg>\n        {{ privacyAndTerms?.contactEmail || privacyAndTerms?.email }}\n      </a>\n      <a *ngIf=\"privacyAndTerms?.phone\" [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-brand-contact__link\">\n        <svg viewBox=\"0 0 24 24\">\n          <path\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\" />\n        </svg>\n        {{ privacyAndTerms?.phone }}\n      </a>\n      <a *ngIf=\"privacyAndTerms?.websiteurl\" [href]=\"privacyAndTerms.websiteurl\" target=\"_blank\"\n        rel=\"noopener noreferrer\" class=\"cp-brand-contact__link cp-brand-contact__link--website\">\n        <svg viewBox=\"0 0 24 24\">\n          <path\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\" />\n        </svg>\n        Visit {{ privacyAndTerms?.companyName || 'our website' }}\n        <svg viewBox=\"0 0 24 24\" class=\"cp-brand-contact__ext\">\n          <path\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\" />\n        </svg>\n      </a>\n    </div>\n\n  </aside>\n\n  <!-- Right: State-specific content -->\n  <main class=\"cp-brand-right\">\n\n    <!-- No Email Error -->\n    <div *ngIf=\"noEmailError\" class=\"cp-brand-state\">\n      <div class=\"cp-invalid-card\">\n        <div class=\"cp-invalid-icon\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path\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\" />\n          </svg>\n        </div>\n        <h2>Invalid Access Link</h2>\n        <p>This page requires a valid invitation link. Please use the link from your invitation email to claim your\n          account.</p>\n      </div>\n    </div>\n\n    <!-- Account Lookup: Loading -->\n    <div *ngIf=\"isLookingUpAccount\" class=\"cp-brand-state\">\n      <div class=\"cp-invalid-card cp-lookup-loading\">\n        <span class=\"cp-spinner cp-lookup-spinner\"></span>\n        <p>Looking up your account\u2026</p>\n      </div>\n    </div>\n\n    <!-- Account Not Found -->\n    <div *ngIf=\"!isLookingUpAccount && !auth0UserData && showAccountNotFound\" class=\"cp-brand-state\">\n      <div class=\"cp-invalid-card\">\n        <div class=\"cp-invalid-icon cp-invalid-icon--warn\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\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\" />\n          </svg>\n        </div>\n        <p [style.margin-bottom]=\"pendingParamType ? '16px' : null\">\n          The email address <strong>{{ userEmail }}</strong> is not associated with an account on our platform.\n          Please click the button below to create a new account.\n        </p>\n        <!-- Pre-assigned role preview when type exists in invitation link -->\n        <ng-container *ngFor=\"let role of userViewRoles\">\n          <div *ngIf=\"pendingParamType && role.type === pendingParamType\" class=\"cp-anf-role-preview\">\n            <span class=\"cp-anf-role-label\">Your pre-assigned role</span>\n            <div class=\"cp-role-card cp-role-card--selected cp-role-card--preassigned\">\n              <div class=\"cp-role-card__img\">\n                <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\n                <span class=\"cp-role-card__check\">\n                  <svg viewBox=\"0 0 24 24\">\n                    <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n                  </svg>\n                </span>\n              </div>\n              <span class=\"cp-role-card__name\">{{ role.name }}</span>\n            </div>\n          </div>\n        </ng-container>\n        <button type=\"button\" class=\"cp-btn\" style=\"margin-top:20px\" (click)=\"navigateToLogin()\">\n          <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\n            <path\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\"\n              fill=\"#fff\" />\n          </svg>\n          Create New Account\n        </button>\n      </div>\n    </div>\n\n    <!-- Account Found -->\n    <div *ngIf=\"!isLookingUpAccount && auth0UserData\" class=\"cp-brand-state\">\n      <div class=\"cp-anf-card\">\n        <div class=\"cp-anf-card__header\">\n          <div class=\"cp-anf-avatar\">\n            {{ (auth0UserData.userDetails?.firstName?.[0] || '') + (auth0UserData.userDetails?.lastName?.[0] || '') ||\n            '?' }}\n          </div>\n          <div class=\"cp-anf-card__identity\">\n            <h2 class=\"cp-anf-card__name\">{{ auth0UserData.userDetails?.firstName }} {{\n              auth0UserData.userDetails?.lastName }}</h2>\n            <span class=\"cp-anf-card__email\">\n              <svg viewBox=\"0 0 24 24\">\n                <path\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\" />\n              </svg>\n              {{ auth0UserData.email }}\n            </span>\n            <div class=\"cp-anf-roles\" *ngIf=\"auth0UserData.userDetails?.userRoles?.length\">\n              <span class=\"cp-anf-role\" *ngFor=\"let r of auth0UserData.userDetails.userRoles\">{{ r.roleName }}</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"cp-anf-card__notice\">\n          <svg viewBox=\"0 0 24 24\">\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\" />\n          </svg>\n          An account already exists for this email address.\n        </div>\n        <button type=\"button\" class=\"cp-anf-signin-btn\" (click)=\"navigateToLogin()\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\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\"\n              fill=\"#fff\" />\n          </svg>\n          Sign In to Your Account\n        </button>\n      </div>\n    </div>\n\n  </main>\n</div>\n\n\n<!-- \u2500\u2500\u2500 Success State \u2500\u2500\u2500 -->\n<div *ngIf=\"submitSuccess\" class=\"cp-success-page\">\n  <div class=\"cp-success-card\">\n    <div class=\"cp-success-icon\">\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n      </svg>\n    </div>\n    <h2>{{ userHasExistingDetails ? 'Profile Updated!' : 'Account Activated!' }}</h2>\n    <p>{{ userHasExistingDetails ? 'Your profile has been saved successfully.' : 'Your account has been successfully\n      activated.' }}</p>\n    <button *ngIf=\"!isInitialSetupCompleted && libConfig?.initialUrl\" type=\"button\" class=\"cp-btn\"\n      style=\"margin-top:20px\" (click)=\"navigateToInitialProcess()\">\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\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\"\n          fill=\"#fff\" />\n      </svg>\n      Complete Initial Setup\n    </button>\n    <button type=\"button\" class=\"cp-btn\" [class.cp-btn--ghost]=\"!isInitialSetupCompleted && libConfig?.initialUrl\"\n      style=\"margin-top:10px\" (click)=\"navigateToDashboard()\">\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\n        <path d=\"M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z\" fill=\"currentColor\" />\n      </svg>\n      Go to Dashboard\n    </button>\n    <button *ngIf=\"!userHasExistingDetails\" type=\"button\" class=\"cp-btn cp-btn--ghost\" style=\"margin-top:10px\"\n      (click)=\"navigateToLogin()\">\n      <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;flex-shrink:0\">\n        <path\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\" />\n      </svg>\n      Sign In Instead\n    </button>\n  </div>\n</div>\n\n\n<!-- \u2500\u2500\u2500 Main Layout \u2500\u2500\u2500 -->\n<div *ngIf=\"!noEmailError && !submitSuccess && !auth0UserData && !isLookingUpAccount && !isInitializing\"\n  class=\"cp-page\">\n\n  <!-- Left Panel \u2014 Status Tracker -->\n  <aside class=\"cp-left\">\n    <div class=\"cp-left-inner mt-1\">\n\n      <!-- User identity card -->\n      <div class=\"cp-sb-user\">\n        <div class=\"cp-sb-avatar\">\n          <img *ngIf=\"profilePreviewUrl\" [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-sb-avatar__img\" />\n          <span *ngIf=\"!profilePreviewUrl\" class=\"cp-sb-avatar__initials\">\n            {{ (u['firstName'].value?.[0] || '') + (u['lastName'].value?.[0] || '') || '?' }}\n          </span>\n        </div>\n        <div class=\"cp-sb-user__info\">\n          <strong class=\"cp-sb-user__name\">\n            {{ (u['firstName'].value || u['lastName'].value) ? (u['firstName'].value + ' ' + u['lastName'].value) :\n            'Your Profile' }}\n          </strong>\n          <span class=\"cp-sb-user__email\">{{ userEmail }}</span>\n        </div>\n      </div>\n\n      <!-- Hero intro -->\n      <div class=\"cp-sb-hero\">\n        <span class=\"cp-sb-eyebrow\">{{ userHasExistingDetails ? 'Profile Update' : 'Claim Your Account' }}<ng-container\n            *ngIf=\"!userHasExistingDetails && (selectedRole?.name || pendingRoleName)\"> \u2014 {{ selectedRole?.name ||\n            pendingRoleName }}</ng-container></span>\n        <p class=\"cp-sb-intro\">\n          {{ userHasExistingDetails\n          ? 'Review and update your personal, role, and business information below.'\n          : 'Complete this form to activate your account and unlock full platform access.' }}\n        </p>\n      </div>\n\n      <!-- Progress bar -->\n      <div class=\"cp-sb-progress\">\n        <div class=\"cp-sb-progress__bar\">\n          <div class=\"cp-sb-progress__fill\" [style.width.%]=\"overallProgress\"></div>\n        </div>\n        <span class=\"cp-sb-progress__label\">{{ overallProgress }}% complete</span>\n      </div>\n\n      <!-- Section status steps -->\n      <ul class=\"cp-steps\">\n\n        <li class=\"cp-step\" [class.cp-step--done]=\"sectionPersonalDone\">\n          <span class=\"cp-step__icon\">\n            <svg viewBox=\"0 0 24 24\">\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\" />\n            </svg>\n          </span>\n          <div class=\"cp-step__body\">\n            <span class=\"cp-step__label\">Personal Information</span>\n            <span class=\"cp-step__sub\">Name, address, profile photo</span>\n          </div>\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionPersonalDone && sectionPhotoDone\">\n            <svg *ngIf=\"sectionPersonalDone && sectionPhotoDone\" viewBox=\"0 0 24 24\">\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n            </svg>\n          </span>\n        </li>\n\n        <li class=\"cp-step\" [class.cp-step--done]=\"sectionRoleDone\">\n          <span class=\"cp-step__icon\">\n            <svg viewBox=\"0 0 24 24\">\n              <path\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\" />\n            </svg>\n          </span>\n          <div class=\"cp-step__body\">\n            <span class=\"cp-step__label\">Account Setup</span>\n            <span class=\"cp-step__sub\">Role selection{{ (setPasswordEnabled || resetPasswordEnabled) ? ', password' : ''\n              }}</span>\n          </div>\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionRoleDone && sectionPasswordDone\">\n            <svg *ngIf=\"sectionRoleDone && sectionPasswordDone\" viewBox=\"0 0 24 24\">\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n            </svg>\n          </span>\n        </li>\n\n        <li class=\"cp-step\" *ngIf=\"isBusiness\" [class.cp-step--done]=\"sectionBusinessDone\">\n          <span class=\"cp-step__icon\">\n            <svg viewBox=\"0 0 24 24\">\n              <path\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\" />\n            </svg>\n          </span>\n          <div class=\"cp-step__body\">\n            <span class=\"cp-step__label\">Business Info</span>\n            <span class=\"cp-step__sub\">Name, email, address, logo</span>\n          </div>\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionBusinessDone\">\n            <svg *ngIf=\"sectionBusinessDone\" viewBox=\"0 0 24 24\">\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n            </svg>\n          </span>\n        </li>\n\n      </ul>\n\n      <!-- Feature highlights -->\n      <ul class=\"cp-sb-features\">\n        <li class=\"cp-sb-feature\">\n          <span class=\"cp-sb-feature__icon\">\n            <svg viewBox=\"0 0 24 24\">\n              <path\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\" />\n            </svg>\n          </span>\n          <div>\n            <strong>Secure &amp; Encrypted</strong>\n            <span>Protected end-to-end per our Privacy Policy.</span>\n          </div>\n        </li>\n        <li class=\"cp-sb-feature\">\n          <span class=\"cp-sb-feature__icon\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M7 2v11h3v9l7-12h-4l4-8z\" />\n            </svg>\n          </span>\n          <div>\n            <strong>Instant Access</strong>\n            <span>Immediate access to programs and service requests.</span>\n          </div>\n        </li>\n        <li class=\"cp-sb-feature\">\n          <span class=\"cp-sb-feature__icon\">\n            <svg viewBox=\"0 0 24 24\">\n              <path\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\" />\n            </svg>\n          </span>\n          <div>\n            <strong>Professional Network</strong>\n            <span>Connect with certified professionals nationwide.</span>\n          </div>\n        </li>\n      </ul>\n\n      <!-- Footer contact -->\n      <div class=\"cp-left-contact\" *ngIf=\"privacyAndTerms?.contactEmail || privacyAndTerms?.phone\">\n        <a *ngIf=\"privacyAndTerms?.contactEmail\" [href]=\"'mailto:' + privacyAndTerms.contactEmail\"\n          class=\"cp-contact-link\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\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\" />\n          </svg>\n          {{ privacyAndTerms?.contactEmail }}\n        </a>\n        <a *ngIf=\"privacyAndTerms?.phone\" [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-contact-link\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\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\" />\n          </svg>\n          {{ privacyAndTerms?.phone }}\n        </a>\n      </div>\n\n    </div>\n  </aside>\n\n  <!-- Right Panel \u2014 Form -->\n  <main class=\"cp-right\">\n\n    <!-- Mobile-only top bar -->\n    <div class=\"cp-mobile-bar\">\n      <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\" [alt]=\"privacyAndTerms?.companyName\"\n        class=\"cp-mobile-logo\" />\n      <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-mobile-company\">{{ privacyAndTerms?.companyName }}</span>\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-logout-btn cp-logout-btn--mobile\" (click)=\"logout()\">\n        <svg viewBox=\"0 0 24 24\">\n          <path\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\" />\n        </svg>\n        Logout\n      </button>\n    </div>\n\n    <!-- \u2500\u2500\u2500 Profile Banner \u2500\u2500\u2500 -->\n    <div class=\"cp-banner\">\n      <div class=\"cp-banner__avatar\">\n        <img *ngIf=\"profilePreviewUrl\" [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-banner__img\" />\n        <div *ngIf=\"!profilePreviewUrl\" class=\"cp-banner__initials\">\n          {{ (u['firstName'].value?.[0] || '') + (u['lastName'].value?.[0] || '') || '?' }}\n        </div>\n      </div>\n      <div class=\"cp-banner__info\">\n        <div class=\"cp-banner__name\">\n          {{ (u['firstName'].value || u['lastName'].value) ? (u['firstName'].value + ' ' + u['lastName'].value) : 'Your\n          Profile' }}\n        </div>\n        <div class=\"cp-banner__meta\">\n          <span class=\"cp-banner__email\" *ngIf=\"userEmail\">\n            <svg viewBox=\"0 0 24 24\">\n              <path\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\" />\n            </svg>\n            {{ userEmail }}\n          </span>\n          <span class=\"cp-banner__badge\" [class.cp-banner__badge--update]=\"userHasExistingDetails\">\n            {{ userHasExistingDetails ? 'Profile Update' : 'Account Activation' }}\n          </span>\n        </div>\n        <div class=\"cp-banner__loading\" *ngIf=\"isLoadingUser\">\n          <span class=\"cp-spinner cp-spinner--sm\"></span> Loading profile\u2026\n        </div>\n      </div>\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-logout-btn--banner\" (click)=\"logout()\">\n        <svg viewBox=\"0 0 24 24\">\n          <path\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\" />\n        </svg>\n        Sign Out\n      </button>\n    </div>\n\n    <div class=\"cp-form-wrap\">\n\n      <div class=\"cp-error cp-alert\" *ngIf=\"userLookupError\">\n        <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;flex-shrink:0\">\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" />\n        </svg>\n        {{ userLookupError }}\n      </div>\n\n      <form (ngSubmit)=\"onSubmit()\" novalidate>\n\n        <!-- \u2550\u2550\u2550 SECTION: Personal Information \u2550\u2550\u2550 -->\n        <div class=\"cp-card\" [formGroup]=\"userForm\">\n          <div class=\"cp-card__header\">\n            <span class=\"cp-card__icon\">\n              <svg viewBox=\"0 0 24 24\">\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\" />\n              </svg>\n            </span>\n            <div>\n              <h3 class=\"cp-card__title\">Personal Information</h3>\n              <p class=\"cp-card__sub\">Name, contact, address and profile photo</p>\n            </div>\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionPersonalDone && sectionPhotoDone\">\n              <svg *ngIf=\"sectionPersonalDone && sectionPhotoDone\" viewBox=\"0 0 24 24\">\n                <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n              </svg>\n              <span *ngIf=\"!(sectionPersonalDone && sectionPhotoDone)\">\u2014</span>\n            </span>\n          </div>\n          <div class=\"cp-card__body\">\n            <!-- Pending notice: shown until a role is selected -->\n            <div *ngIf=\"!selectedRoleValue && !isLoadingUser\" class=\"cp-pending-notice\">\n              <svg viewBox=\"0 0 24 24\">\n                <path\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\" />\n              </svg>\n              Please select your role in the Account Setup section below to unlock these fields.\n            </div>\n            <div [class.cp-fields-pending]=\"!selectedRoleValue && !isLoadingUser\">\n              <div class=\"cp-biz-layout\">\n                <!-- Left: fields -->\n                <div class=\"cp-biz-fields\">\n                  <div class=\"cp-row cp-row--3\">\n                    <div class=\"cp-field\">\n                      <label for=\"firstName\">First Name <span class=\"req\">*</span></label>\n                      <input type=\"text\" id=\"firstName\" formControlName=\"firstName\" placeholder=\"Jane\"\n                        [class.is-invalid]=\"u['firstName'].invalid && u['firstName'].touched\"\n                        autocomplete=\"given-name\" />\n                      <div class=\"cp-error\" *ngIf=\"u['firstName'].invalid && u['firstName'].touched\">Required</div>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"lastName\">Last Name <span class=\"req\">*</span></label>\n                      <input type=\"text\" id=\"lastName\" formControlName=\"lastName\" placeholder=\"Doe\"\n                        [class.is-invalid]=\"u['lastName'].invalid && u['lastName'].touched\"\n                        autocomplete=\"family-name\" />\n                      <div class=\"cp-error\" *ngIf=\"u['lastName'].invalid && u['lastName'].touched\">Required</div>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"phoneNumber\">Phone <span class=\"req\">*</span></label>\n                      <input type=\"tel\" id=\"phoneNumber\" formControlName=\"phoneNumber\" placeholder=\"(555) 123-4567\"\n                        maxlength=\"14\" [class.is-invalid]=\"u['phoneNumber'].invalid && u['phoneNumber'].touched\"\n                        (input)=\"formatPhone($event, 'user')\" autocomplete=\"tel\" />\n                      <div class=\"cp-error\" *ngIf=\"u['phoneNumber'].invalid && u['phoneNumber'].touched\">Required</div>\n                    </div>\n                  </div>\n                  <div class=\"cp-row cp-row--3\">\n                    <div class=\"cp-field\">\n                      <label for=\"address1\">Street Address</label>\n                      <input type=\"text\" id=\"address1\" formControlName=\"address1\" placeholder=\"123 Main Street\"\n                        ngx-google-places-autocomplete [options]=\"googleOptions\"\n                        (onAddressChange)=\"onAddressChange($event)\" autocomplete=\"off\" />\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"address2\">Address Line 2</label>\n                      <input type=\"text\" id=\"address2\" formControlName=\"address2\" placeholder=\"Apt, Suite, Unit, etc.\"\n                        autocomplete=\"address-line2\" />\n                    </div>\n\n                    <div class=\"cp-field\">\n                      <label for=\"city\">City</label>\n                      <input type=\"text\" id=\"city\" formControlName=\"city\" placeholder=\"Orlando\" />\n                    </div>\n                  </div>\n\n                  <div class=\"cp-row cp-row--4\">\n                    <div class=\"cp-field\">\n                      <label for=\"state\">State</label>\n                      <input type=\"text\" id=\"state\" formControlName=\"state\" placeholder=\"FL\" maxlength=\"2\" />\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"county\">County</label>\n                      <input type=\"text\" id=\"county\" formControlName=\"county\" placeholder=\"Orange County\" />\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"zipcode\">Zip Code</label>\n                      <input type=\"text\" id=\"zipcode\" formControlName=\"zipcode\" placeholder=\"32801\" inputmode=\"numeric\"\n                        maxlength=\"5\" />\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"country\">Country <span class=\"req\">*</span></label>\n                      <input type=\"text\" id=\"country\" formControlName=\"country\" placeholder=\"US\"\n                        [class.is-invalid]=\"u['country'].invalid && u['country'].touched\" autocomplete=\"country\" />\n                      <div class=\"cp-error\" *ngIf=\"u['country'].invalid && u['country'].touched\">Required</div>\n                    </div>\n                  </div>\n\n                  <input type=\"hidden\" formControlName=\"latitude\" />\n                  <input type=\"hidden\" formControlName=\"longitude\" />\n\n                  <div class=\"cp-row cp-row--3\">\n                    <div class=\"cp-field\">\n                      <label for=\"yearsOfExperince\">Years of Experience <span class=\"req\">*</span></label>\n                      <ng-select id=\"yearsOfExperince\" formControlName=\"yearsOfExperince\" [items]=\"expYears\"\n                        bindLabel=\"text\" bindValue=\"value\" placeholder=\"Select years\" [clearable]=\"false\"\n                        [class.is-invalid]=\"u['yearsOfExperince'].invalid && u['yearsOfExperince'].touched\">\n                      </ng-select>\n                      <div class=\"cp-error\" *ngIf=\"u['yearsOfExperince'].invalid && u['yearsOfExperince'].touched\">\n                        Required</div>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"userJobTitle\">Job Title(s) <span class=\"req\">*</span></label>\n                      <ng-select id=\"userJobTitle\" formControlName=\"userJobTitle\" [items]=\"jobTitles\" bindLabel=\"text\"\n                        bindValue=\"value\" [multiple]=\"true\" placeholder=\"Select job title(s)\"\n                        [class.is-invalid]=\"u['userJobTitle'].invalid && u['userJobTitle'].touched\">\n                      </ng-select>\n                      <div class=\"cp-error\" *ngIf=\"u['userJobTitle'].invalid && u['userJobTitle'].touched\">Required\n                      </div>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"industries\">Industries</label>\n                      <ng-select id=\"industries\" formControlName=\"industries\" [items]=\"industries\"\n                        bindLabel=\"industryName\" bindValue=\"id\" [multiple]=\"true\" [loading]=\"isIndustriesLoading\"\n                        placeholder=\"Select industries (optional)\">\n                      </ng-select>\n                    </div>\n                  </div>\n\n                </div>\n\n                <!-- Right: profile photo -->\n                <div class=\"cp-biz-logo\">\n                  <label class=\"cp-biz-logo__label\">Profile Photo</label>\n                  <div class=\"cp-biz-logo__area cp-profile-logo-area\" (click)=\"cpProfileInput.click()\">\n                    <input #cpProfileInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"onProfileFileChange($event)\"\n                      class=\"cp-upload-hidden\" />\n                    <ng-container *ngIf=\"profilePreviewUrl; else profilePlaceholder\">\n                      <img [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-profile-logo-img\" />\n                      <span class=\"cp-biz-logo__change\">Change</span>\n                    </ng-container>\n                    <ng-template #profilePlaceholder>\n                      <div class=\"cp-biz-logo__placeholder\">\n                        <svg viewBox=\"0 0 24 24\">\n                          <path\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\" />\n                        </svg>\n                        <span>Upload Photo</span>\n                        <small>PNG \u00B7 JPG</small>\n                      </div>\n                    </ng-template>\n                  </div>\n                </div>\n              </div>\n            </div><!-- /cp-fields-pending -->\n          </div>\n        </div>\n\n        <!-- \u2550\u2550\u2550 SECTION: Account Setup \u2014 Role Cards + Password \u2550\u2550\u2550 -->\n        <div class=\"cp-card\">\n          <div class=\"cp-card__header\">\n            <span class=\"cp-card__icon\">\n              <svg viewBox=\"0 0 24 24\">\n                <path\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\" />\n              </svg>\n            </span>\n            <div>\n              <h3 class=\"cp-card__title\">Account Setup</h3>\n              <p class=\"cp-card__sub\">Select your role and configure your password</p>\n            </div>\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionRoleDone && sectionPasswordDone\">\n              <svg *ngIf=\"sectionRoleDone && sectionPasswordDone\" viewBox=\"0 0 24 24\">\n                <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n              </svg>\n              <span *ngIf=\"!(sectionRoleDone && sectionPasswordDone)\">\u2014</span>\n            </span>\n          </div>\n          <div class=\"cp-card__body\">\n\n            <!-- Role Cards (ref: initial-process userViewRoles) -->\n            <div class=\"cp-field\">\n              <label>\n                Select Your Role\n                <span class=\"req\" *ngIf=\"!isInitialSetupCompleted && !lockedToTypeFromParam\">*</span>\n                <span *ngIf=\"isInitialSetupCompleted && !lockedToTypeFromParam\"\n                  style=\"font-weight:400;color:#6b7c8a;font-size:11px;margin-left:4px;\">(locked after initial\n                  setup)</span>\n                <span *ngIf=\"lockedToTypeFromParam\"\n                  style=\"font-weight:400;color:#2563eb;font-size:11px;margin-left:4px;\">(pre-assigned)</span>\n              </label>\n\n              <!-- When locked from param, show only the pre-assigned card centred -->\n              <div *ngIf=\"lockedToTypeFromParam\" class=\"cp-role-cards cp-role-cards--preassigned\">\n                <ng-container *ngFor=\"let role of userViewRoles\">\n                  <div *ngIf=\"role.selected\" class=\"cp-role-card cp-role-card--selected cp-role-card--preassigned\">\n                    <div class=\"cp-role-card__img\">\n                      <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\n                      <span class=\"cp-role-card__check\">\n                        <svg viewBox=\"0 0 24 24\">\n                          <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n                        </svg>\n                      </span>\n                    </div>\n                    <span class=\"cp-role-card__name\">{{ role.name }}</span>\n                  </div>\n                </ng-container>\n              </div>\n\n              <!-- Normal grid of all role cards -->\n              <div *ngIf=\"!lockedToTypeFromParam\" class=\"cp-role-cards\"\n                [class.cp-role-cards--locked]=\"isInitialSetupCompleted\">\n                <ng-container *ngFor=\"let role of userViewRoles\">\n                  <div class=\"cp-role-card\" [class.cp-role-card--selected]=\"role.selected\"\n                    [class.cp-role-card--disabled]=\"isInitialSetupCompleted\"\n                    (click)=\"!isInitialSetupCompleted && selectedUserRole(role)\"\n                    [attr.role]=\"isInitialSetupCompleted ? null : 'button'\" [attr.aria-pressed]=\"role.selected\"\n                    [attr.aria-label]=\"role.name\"\n                    [attr.title]=\"isInitialSetupCompleted ? 'Role cannot be changed after initial setup is complete' : null\">\n                    <div class=\"cp-role-card__img\">\n                      <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\n                      <span class=\"cp-role-card__check\" *ngIf=\"role.selected\">\n                        <svg viewBox=\"0 0 24 24\">\n                          <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n                        </svg>\n                      </span>\n                    </div>\n                    <span class=\"cp-role-card__name\">{{ role.name }}</span>\n                  </div>\n                </ng-container>\n              </div>\n\n              <!-- Pre-assigned notice (from query param / localStorage) -->\n              <div class=\"cp-role-locked-notice cp-role-preassigned-notice\"\n                *ngIf=\"lockedToTypeFromParam && sectionRoleDone\">\n                <svg viewBox=\"0 0 24 24\">\n                  <path\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\" />\n                </svg>\n                Your role has been pre-assigned from your invitation. Contact support to change it.\n              </div>\n\n              <!-- Locked after initial setup notice -->\n              <div class=\"cp-role-locked-notice\"\n                *ngIf=\"isInitialSetupCompleted && !lockedToTypeFromParam && sectionRoleDone\">\n                <svg viewBox=\"0 0 24 24\">\n                  <path\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\" />\n                </svg>\n                Role is locked. Contact support to change it.\n              </div>\n\n              <div class=\"cp-error\"\n                *ngIf=\"!sectionRoleDone && validatePage === 1 && !isInitialSetupCompleted && !lockedToTypeFromParam\">\n                Please\n                select a role</div>\n            </div>\n\n            <ng-container *ngIf=\"!isLoadingUser\" [formGroup]=\"userForm\">\n\n              <!-- Existing user: reset toggle -->\n              <div class=\"cp-toggle-row\">\n                <div class=\"cp-toggle-row__info\">\n                  <span class=\"cp-toggle-row__label\">Reset Password</span>\n                  <span class=\"cp-toggle-row__hint\">Enable to change your current password</span>\n                </div>\n                <label class=\"cp-toggle-switch\">\n                  <input type=\"checkbox\" [checked]=\"resetPasswordEnabled\" (change)=\"toggleResetPassword()\">\n                  <span class=\"cp-toggle-knob\"></span>\n                </label>\n              </div>\n\n              <ng-container *ngIf=\"resetPasswordEnabled\">\n                <ng-container *ngIf=\"passwordStep === 1\">\n                  <div class=\"cp-row\">\n                    <div class=\"cp-field\">\n                      <label for=\"newPassword\">New Password</label>\n                      <div class=\"cp-pw-wrap\">\n                        <input [type]=\"showPassword ? 'text' : 'password'\" id=\"newPassword\" formControlName=\"password\"\n                          placeholder=\"Min. 8 characters\" autocomplete=\"new-password\" />\n                        <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showPassword = !showPassword\">\n                          <svg *ngIf=\"!showPassword\" viewBox=\"0 0 24 24\">\n                            <path\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\" />\n                          </svg>\n                          <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\">\n                            <path\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\" />\n                          </svg>\n                        </button>\n                      </div>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"confirmPasswordReset\">Confirm Password</label>\n                      <div class=\"cp-pw-wrap\">\n                        <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPasswordReset\"\n                          formControlName=\"confirmPassword\" placeholder=\"Repeat password\" autocomplete=\"new-password\" />\n                        <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showConfirmPassword = !showConfirmPassword\">\n                          <svg *ngIf=\"!showConfirmPassword\" viewBox=\"0 0 24 24\">\n                            <path\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\" />\n                          </svg>\n                          <svg *ngIf=\"showConfirmPassword\" viewBox=\"0 0 24 24\">\n                            <path\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\" />\n                          </svg>\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"cp-error\" *ngIf=\"passwordChangeError\">{{ passwordChangeError }}</div>\n                  <div class=\"cp-pw-success\" *ngIf=\"passwordChangeSuccess\">\n                    <svg viewBox=\"0 0 24 24\" style=\"width:15px;height:15px\">\n                      <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n                    </svg>\n                    Password changed successfully.\n                  </div>\n                  <button type=\"button\" class=\"cp-btn cp-btn--outline cp-btn--sm\" (click)=\"changePassword()\"\n                    [disabled]=\"isPasswordChanging\">\n                    <span *ngIf=\"isPasswordChanging\" class=\"cp-spinner cp-spinner-btn\"></span>\n                    {{ isPasswordChanging ? 'Sending\u2026' : 'Send Verification Code' }}\n                  </button>\n                </ng-container>\n\n                <ng-container *ngIf=\"passwordStep === 2\">\n                  <div class=\"cp-otp-wrap\">\n                    <p class=\"cp-otp-hint\">\n                      <svg viewBox=\"0 0 24 24\" style=\"width:15px;height:15px;flex-shrink:0\">\n                        <path\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\" />\n                      </svg>\n                      Code sent to <strong>{{ userEmail }}</strong>\n                    </p>\n                    <div class=\"cp-otp-timer\" [class.cp-otp-timer--expired]=\"otpExpired\">\n                      <svg viewBox=\"0 0 24 24\" style=\"width:14px;height:14px\">\n                        <path\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\" />\n                      </svg>\n                      <span *ngIf=\"!otpExpired\">{{ otpMinutes }}:{{ otpSeconds < 10 ? '0' + otpSeconds : otpSeconds\n                          }}</span>\n                          <span *ngIf=\"otpExpired\">Code expired</span>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"otpInput\">Enter 6-digit code</label>\n                      <input type=\"text\" id=\"otpInput\" [(ngModel)]=\"otpValue\" [ngModelOptions]=\"{standalone: true}\"\n                        placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\" maxlength=\"6\" inputmode=\"numeric\" class=\"cp-otp-input\" />\n                    </div>\n                    <div class=\"cp-error\" *ngIf=\"passwordChangeError\">{{ passwordChangeError }}</div>\n                    <div class=\"cp-otp-actions\">\n                      <button type=\"button\" class=\"cp-btn\" (click)=\"verifyPasswordOtp()\"\n                        [disabled]=\"otpExpired || !otpValue || isPasswordChanging\">\n                        <span *ngIf=\"isPasswordChanging\" class=\"cp-spinner cp-spinner-btn\"></span>\n                        {{ isPasswordChanging ? 'Verifying\u2026' : 'Verify & Change Password' }}\n                      </button>\n                      <button type=\"button\" class=\"cp-btn cp-btn--ghost\" *ngIf=\"canResendOtp\"\n                        (click)=\"changePassword(true)\" [disabled]=\"isPasswordChanging\">Resend Code</button>\n                      <button type=\"button\" class=\"cp-btn-link\" (click)=\"cancelPasswordChange()\">Cancel</button>\n                    </div>\n                  </div>\n                </ng-container>\n              </ng-container>\n\n            </ng-container>\n          </div>\n        </div>\n\n        <!-- \u2550\u2550\u2550 SECTION: Business Information \u2550\u2550\u2550 -->\n        <div class=\"cp-card\" *ngIf=\"isBusiness\" [formGroup]=\"companyForm\">\n          <div class=\"cp-card__header\">\n            <span class=\"cp-card__icon\">\n              <svg viewBox=\"0 0 24 24\">\n                <path\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\" />\n              </svg>\n            </span>\n            <div>\n              <h3 class=\"cp-card__title\">Business Information</h3>\n              <p class=\"cp-card__sub\">Company details and branding</p>\n            </div>\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionBusinessDone\">\n              <svg *ngIf=\"sectionBusinessDone\" viewBox=\"0 0 24 24\">\n                <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n              </svg>\n              <span *ngIf=\"!sectionBusinessDone\">\u2014</span>\n            </span>\n          </div>\n          <div class=\"cp-card__body\">\n            <div class=\"cp-biz-layout\">\n              <div class=\"cp-biz-fields\">\n                <div class=\"cp-row cp-row--3\">\n                  <div class=\"cp-field\">\n                    <label for=\"companyName\">Business Name <span class=\"req\">*</span></label>\n                    <input type=\"text\" id=\"companyName\" formControlName=\"companyName\" placeholder=\"Acme Corp\"\n                      [class.is-invalid]=\"c['companyName'].invalid && c['companyName'].touched\" />\n                    <div class=\"cp-error\" *ngIf=\"c['companyName'].invalid && c['companyName'].touched\">Required</div>\n                  </div>\n                  <div class=\"cp-field\">\n                    <label for=\"companyEmail\">Business Email <span class=\"req\">*</span></label>\n                    <input type=\"email\" id=\"companyEmail\" formControlName=\"companyEmail\" placeholder=\"info@acme.com\"\n                      [class.is-invalid]=\"c['companyEmail'].invalid && c['companyEmail'].touched\" />\n                    <div class=\"cp-error\" *ngIf=\"c['companyEmail'].invalid && c['companyEmail'].touched\">\n                      <span *ngIf=\"c['companyEmail'].errors?.['required']\">Required</span>\n                      <span *ngIf=\"c['companyEmail'].errors?.['email']\">Invalid email</span>\n                    </div>\n                  </div>\n                  <div class=\"cp-field\">\n                    <label for=\"companyPhoneNumber\">Business Phone <span class=\"req\">*</span></label>\n                    <input type=\"tel\" id=\"companyPhoneNumber\" formControlName=\"companyPhoneNumber\"\n                      placeholder=\"(555) 123-4567\" maxlength=\"14\"\n                      [class.is-invalid]=\"c['companyPhoneNumber'].invalid && c['companyPhoneNumber'].touched\"\n                      (input)=\"formatPhone($event, 'company')\" autocomplete=\"tel\" />\n                    <div class=\"cp-error\" *ngIf=\"c['companyPhoneNumber'].invalid && c['companyPhoneNumber'].touched\">\n                      Required</div>\n                  </div>\n                </div>\n\n\n                <div class=\"cp-field\">\n                  <label for=\"bizAddress1\">Business Address</label>\n                  <input type=\"text\" id=\"bizAddress1\" formControlName=\"address1\" placeholder=\"123 Business Street\"\n                    ngx-google-places-autocomplete [options]=\"googleOptions\"\n                    (onAddressChange)=\"onBusinessAddressChange($event)\" autocomplete=\"off\" />\n                </div>\n\n                <div class=\"cp-row cp-row--3\">\n                  <div class=\"cp-field\">\n                    <label for=\"bizCity\">City</label>\n                    <input type=\"text\" id=\"bizCity\" formControlName=\"city\" placeholder=\"City\" />\n                  </div>\n                  <div class=\"cp-field\">\n                    <label for=\"bizState\">State</label>\n                    <input type=\"text\" id=\"bizState\" formControlName=\"state\" placeholder=\"ST\" maxlength=\"2\" />\n                  </div>\n                </div>\n\n                <div class=\"cp-row cp-row--3\">\n                  <div class=\"cp-field\">\n                    <label for=\"bizCounty\">County</label>\n                    <input type=\"text\" id=\"bizCounty\" formControlName=\"county\" placeholder=\"Orange County\" />\n                  </div>\n                  <div class=\"cp-field\">\n                    <label for=\"bizZipcode\">Zip</label>\n                    <input type=\"text\" id=\"bizZipcode\" formControlName=\"zipcode\" placeholder=\"00000\" inputmode=\"numeric\"\n                      maxlength=\"5\" />\n                  </div>\n                  <div class=\"cp-field\">\n                    <label for=\"bizCountry\">Country</label>\n                    <input type=\"text\" id=\"bizCountry\" formControlName=\"country\" placeholder=\"US\"\n                      autocomplete=\"country\" />\n                  </div>\n                </div>\n              </div>\n\n              <!-- Business logo -->\n              <div class=\"cp-biz-logo\">\n                <label class=\"cp-biz-logo__label\">Business Logo</label>\n                <div class=\"cp-biz-logo__area\" (click)=\"cpLogoInput.click()\">\n                  <input #cpLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"onBusinessLogoChange($event)\"\n                    class=\"cp-upload-hidden\" />\n                  <ng-container *ngIf=\"logoPreviewUrl; else logoPlaceholder\">\n                    <img [src]=\"logoPreviewUrl\" alt=\"Business logo\" class=\"cp-biz-logo__img\" />\n                    <span class=\"cp-biz-logo__change\">Change</span>\n                  </ng-container>\n                  <ng-template #logoPlaceholder>\n                    <div class=\"cp-biz-logo__placeholder\">\n                      <svg viewBox=\"0 0 24 24\">\n                        <path\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\" />\n                      </svg>\n                      <span>Upload Logo</span>\n                      <small>PNG \u00B7 JPG</small>\n                    </div>\n                  </ng-template>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- \u2550\u2550\u2550 Footer: Terms + Submit \u2550\u2550\u2550 -->\n        <div class=\"cp-form-footer\">\n          <div class=\"cp-terms\">\n            <label class=\"cp-terms__label\">\n              <input type=\"checkbox\" class=\"cp-terms__check\" [checked]=\"model.acceptTerms && model.privacy\"\n                (change)=\"onTermsCheckboxChange($event)\" />\n              <span class=\"cp-terms__box\"></span>\n              <span>I accept the\n                <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Terms and Conditions', $event)\">Terms &amp;\n                  Conditions</a>\n                and\n                <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Privacy Statement', $event)\">Privacy Policy</a>\n              </span>\n            </label>\n            <div class=\"cp-error cp-terms-error\" *ngIf=\"(!model.acceptTerms || !model.privacy) && validatePage === 1\">\n              You must accept the Terms and Privacy Policy to continue\n            </div>\n          </div>\n\n          <div class=\"cp-error cp-submit-error\" *ngIf=\"submitError\">{{ submitError }}</div>\n          <div class=\"cp-error cp-submit-error\" *ngIf=\"providerError\">{{ providerError }}</div>\n\n          <button type=\"submit\" class=\"cp-btn cp-btn--submit\" [disabled]=\"isSubmitting\">\n            <span *ngIf=\"isSubmitting\" class=\"cp-spinner cp-spinner-btn\"></span>\n            <svg *ngIf=\"!isSubmitting\" viewBox=\"0 0 24 24\" style=\"width:18px;height:18px\">\n              <path *ngIf=\"userHasExistingDetails\"\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\"\n                fill=\"#fff\" />\n              <path *ngIf=\"!userHasExistingDetails\" d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" fill=\"#fff\" />\n            </svg>\n            {{ uploadStatus || (isSubmitting ? 'Processing\u2026' : (userHasExistingDetails ? 'Save Changes' : 'Activate My\n            Account')) }}\n          </button>\n        </div>\n\n      </form>\n    </div>\n\n  </main>\n\n</div>\n\n<!-- \u2500\u2500\u2500 Terms & Privacy Modal \u2500\u2500\u2500 -->\n<ng-template #termsAndConditionsModel>\n  <div class=\"modal-dialog modal-dialog-centered tc-modal-dialog\">\n    <div class=\"modal-content tc-modal\">\n      <div class=\"tc-modal-header\">\n        <div class=\"tc-header-icon\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\" />\n            <polyline points=\"14 2 14 8 20 8\" />\n            <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\" />\n            <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\" />\n          </svg>\n        </div>\n        <h4 class=\"tc-modal-title\">{{ termsAndConditionTitle }}</h4>\n        <button type=\"button\" class=\"tc-modal-close\" (click)=\"closeModal()\" aria-label=\"Close\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n          </svg>\n        </button>\n      </div>\n      <div class=\"tc-modal-body\">\n        <ng-container *ngIf=\"termsAndConditionTitle === 'Terms and Conditions'\">\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\"\n            [branding]=\"branding\"></app-terms-conditions>\n        </ng-container>\n        <ng-container *ngIf=\"termsAndConditionTitle !== 'Terms and Conditions'\">\n          <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\"\n            [branding]=\"branding\"></app-privacy-policy>\n        </ng-container>\n      </div>\n      <div class=\"tc-modal-footer\">\n        <button type=\"button\" class=\"tc-btn tc-btn-close\" (click)=\"closeModal()\">Close</button>\n      </div>\n    </div>\n  </div>\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:20px;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:12px;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:14px;color:#6b7c8a;line-height:1.78;margin:0}.cp-brand-features{list-style:none;padding:0;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:14px;font-weight:700;color:#0c1620;line-height:1.2}.cp-brand-feature__body span{font-size:12px;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:14px;font-weight:700;color:#0c1620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-user__info span{font-size:12px;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-top:20px;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-hero{margin-bottom:16px}.cp-sb-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#4077ad;margin-bottom:6px}.cp-sb-intro{font-size:14px;line-height:1.6;color:#6b7c8a;margin:0}.cp-sb-progress{margin-bottom:20px}.cp-sb-progress__bar{height:5px;background:#e2eaf2;border-radius:99px;overflow:hidden;margin-bottom:5px}.cp-sb-progress__fill{height:100%;background:linear-gradient(90deg,#4077ad,#5b9fd4);border-radius:99px;transition:width .4s ease;min-width:4px}.cp-sb-progress__label{font-size:12px;font-weight:600;color:#6b7c8a}.cp-sb-features{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:12px}.cp-sb-feature{display:flex;align-items:flex-start;gap:10px}.cp-sb-feature__icon{width:28px;height:28px;border-radius:6px;background:#4077ad14;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cp-sb-feature__icon svg{width:15px;height:15px}.cp-sb-feature__icon svg path{fill:#4077ad}.cp-sb-feature div{display:flex;flex-direction:column;gap:2px}.cp-sb-feature div strong{font-size:14px;font-weight:700;color:#0c1620}.cp-sb-feature div span{font-size:12px;color:#6b7c8a;line-height:1.5}.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:14px;font-weight:700;color:#0c1620;line-height:1}.cp-step__sub{font-size:12px;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:12px;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:18px;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:16px;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:12px;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:12px;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:12px;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:12px}}.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:14px;color:#c0392b}.cp-alert svg path{fill:#c0392b}.cp-card{background:#fff;border:1px solid #e2eaf2;margin:16px 24px 0;border-radius:10px;overflow:visible;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;border-radius:10px 10px 0 0;overflow:hidden}@media (max-width: 480px){.cp-card__header{padding:14px 16px;gap:10px;border-radius:8px 8px 0 0}}.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:16px;font-weight:700;color:#0c1620;margin:0 0 2px;line-height:1}.cp-card__sub{font-size:12px;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}.cp-row.cp-row--4{grid-template-columns:1fr 1fr 1fr 1fr}@media (max-width: 640px){.cp-row.cp-row--3,.cp-row.cp-row--4{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,.cp-row.cp-row--4{grid-template-columns:1fr 1fr}}@media (max-width: 400px){.cp-row.cp-row-triple,.cp-row.cp-row--3,.cp-row.cp-row--4{grid-template-columns:1fr}}.cp-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width:0}.cp-field label{font-size:12px;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:14px;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:12px;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:12px;color:#dc3545;margin-top:2px}.cp-terms-error{margin-top:4px}.cp-submit-error{margin-bottom:12px;font-size:14px;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-pending-notice{display:flex;align-items:flex-start;gap:9px;padding:10px 14px;margin-bottom:16px;background:#4077ad0d;border:1px solid rgba(64,119,173,.18);border-radius:6px;font-size:12px;font-weight:600;color:#4077ad;line-height:1.55}.cp-pending-notice svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}.cp-pending-notice svg path{fill:#4077ad}.cp-fields-pending{opacity:.42;pointer-events:none;filter:blur(.4px);-webkit-user-select:none;user-select:none}.cp-anf-role-preview{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 16px;margin-bottom:4px;background:#4077ad08;border:1px solid rgba(64,119,173,.14);border-radius:8px}.cp-anf-role-preview .cp-role-card{width:110px;pointer-events:none}.cp-anf-role-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#6b7c8a}.cp-role-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;margin-top:6px}@media (max-width: 480px){.cp-role-cards{grid-template-columns:repeat(3,1fr)}}.cp-role-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px 10px;border:2px solid #d3dce3;border-radius:6px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s;-webkit-user-select:none;user-select:none}.cp-role-card:hover{border-color:#4077ad;box-shadow:0 2px 8px #4077ad1f}.cp-role-card--selected{border-color:#4077ad;background:#4077ad0d;box-shadow:0 0 0 3px #4077ad26}.cp-role-card__img{position:relative;width:48px;height:48px}.cp-role-card__img img{width:100%;height:100%;object-fit:contain}.cp-role-card__check{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:#4077ad;display:flex;align-items:center;justify-content:center}.cp-role-card__check svg{width:11px;height:11px}.cp-role-card__check svg path{fill:#fff}.cp-role-card__name{font-size:11px;font-weight:600;color:#0c1620;text-align:center;line-height:1.3}.cp-role-card--disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.cp-role-card--disabled:hover{border-color:#d3dce3;box-shadow:none}.cp-role-cards--locked .cp-role-card--selected{border-color:#6b7c8a;background:#f8fafc;box-shadow:none}.cp-role-cards--locked .cp-role-card--selected .cp-role-card__check{background:#6b7c8a}.cp-role-locked-notice{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 12px;border-radius:99px;background:#f59e0b14;border:1px solid rgba(245,158,11,.25);font-size:11.5px;font-weight:600;color:#92400e}.cp-role-locked-notice svg{width:13px;height:13px;flex-shrink:0}.cp-role-locked-notice svg path{fill:#92400e}.cp-role-locked-notice.cp-role-preassigned-notice{background:#2563eb0f;border-color:#2563eb38;color:#1e40af}.cp-role-locked-notice.cp-role-preassigned-notice svg path{fill:#2563eb}.cp-role-cards--preassigned{display:flex;justify-content:flex-start;gap:0;margin-top:8px}.cp-role-cards--preassigned .cp-role-card--preassigned{width:140px;cursor:default;pointer-events:none;border-color:#2563eb;background:#2563eb0a;box-shadow:0 0 0 3px #2563eb1f}.cp-role-cards--preassigned .cp-role-card--preassigned .cp-role-card__check{background:#2563eb}.cp-role-cards--preassigned .cp-role-card--preassigned .cp-role-card__name{color:#1e40af;font-weight:700}.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;position:relative}.cp-terms__box:after{content:\"\";display:none;position:absolute;left:4px;top:1px;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}.cp-terms__check:checked~.cp-terms__box{background:#4077ad;border-color:#4077ad}.cp-terms__check:checked~.cp-terms__box:after{display:block}.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}::ng-deep .modal-content{background:none!important;border:none!important}::ng-deep .ng-select div,.ng-select input,.ng-select span{font-size:12px!important}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { 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"], outputs: ["metaLoaded"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"], outputs: ["metaLoaded"] }] });
+    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<ng-container *ngIf=\"pendingRoleName\"> \u2014 {{ pendingRoleName }}</ng-container></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-hero\">\r\n      <span class=\"cp-brand-eyebrow\">Claim Your Account<ng-container *ngIf=\"pendingRoleName\"> \u2014 {{ pendingRoleName\r\n          }}</ng-container></span>\r\n      <p class=\"cp-brand-intro\">\r\n        Your account is ready. Complete this short form to set your credentials and unlock your 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      <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      <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      <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      <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    </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 -->\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        <p [style.margin-bottom]=\"pendingParamType ? '16px' : null\">\r\n          The email address <strong>{{ userEmail }}</strong> is not associated with an account on our platform.\r\n          Please click the button below to create a new account.\r\n        </p>\r\n        <!-- Pre-assigned role preview when type exists in invitation link -->\r\n        <ng-container *ngFor=\"let role of userViewRoles\">\r\n          <div *ngIf=\"pendingParamType && role.type === pendingParamType\" class=\"cp-anf-role-preview\">\r\n            <span class=\"cp-anf-role-label\">Your pre-assigned role</span>\r\n            <div class=\"cp-role-card cp-role-card--selected cp-role-card--preassigned\">\r\n              <div class=\"cp-role-card__img\">\r\n                <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\r\n                <span class=\"cp-role-card__check\">\r\n                  <svg 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              </div>\r\n              <span class=\"cp-role-card__name\">{{ role.name }}</span>\r\n            </div>\r\n          </div>\r\n        </ng-container>\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 -->\r\n    <div *ngIf=\"!isLookingUpAccount && auth0UserData\" class=\"cp-brand-state\">\r\n      <div class=\"cp-anf-card\">\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\">{{ auth0UserData.userDetails?.firstName }} {{\r\n              auth0UserData.userDetails?.lastName }}</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.roleName }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\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        <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      </div>\r\n    </div>\r\n\r\n  </main>\r\n</div>\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 ? 'Your profile has been saved successfully.' : 'Your account has been successfully\r\n      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 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\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 mt-1\">\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            {{ (u['firstName'].value?.[0] || '') + (u['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            {{ (u['firstName'].value || u['lastName'].value) ? (u['firstName'].value + ' ' + u['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      <!-- Hero intro -->\r\n      <div class=\"cp-sb-hero\">\r\n        <span class=\"cp-sb-eyebrow\">{{ userHasExistingDetails ? 'Profile Update' : 'Claim Your Account' }}<ng-container\r\n            *ngIf=\"!userHasExistingDetails && (selectedRole?.name || pendingRoleName)\"> \u2014 {{ selectedRole?.name ||\r\n            pendingRoleName }}</ng-container></span>\r\n        <p class=\"cp-sb-intro\">\r\n          {{ userHasExistingDetails\r\n          ? 'Review and update your personal, role, and business information below.'\r\n          : 'Complete this form to activate your account and unlock full platform access.' }}\r\n        </p>\r\n      </div>\r\n\r\n      <!-- Progress bar -->\r\n      <div class=\"cp-sb-progress\">\r\n        <div class=\"cp-sb-progress__bar\">\r\n          <div class=\"cp-sb-progress__fill\" [style.width.%]=\"overallProgress\"></div>\r\n        </div>\r\n        <span class=\"cp-sb-progress__label\">{{ overallProgress }}% complete</span>\r\n      </div>\r\n\r\n      <!-- Section status steps -->\r\n      <ul class=\"cp-steps\">\r\n\r\n        <li class=\"cp-step\" [class.cp-step--done]=\"sectionPersonalDone\">\r\n          <span class=\"cp-step__icon\">\r\n            <svg viewBox=\"0 0 24 24\">\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=\"isBusiness\" [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      <!-- Feature highlights -->\r\n      <ul class=\"cp-sb-features\">\r\n        <li class=\"cp-sb-feature\">\r\n          <span class=\"cp-sb-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>\r\n            <strong>Secure &amp; Encrypted</strong>\r\n            <span>Protected end-to-end per our Privacy Policy.</span>\r\n          </div>\r\n        </li>\r\n        <li class=\"cp-sb-feature\">\r\n          <span class=\"cp-sb-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>\r\n            <strong>Instant Access</strong>\r\n            <span>Immediate access to programs and service requests.</span>\r\n          </div>\r\n        </li>\r\n        <li class=\"cp-sb-feature\">\r\n          <span class=\"cp-sb-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>\r\n            <strong>Professional Network</strong>\r\n            <span>Connect with certified professionals nationwide.</span>\r\n          </div>\r\n        </li>\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    <!-- 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          {{ (u['firstName'].value?.[0] || '') + (u['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          {{ (u['firstName'].value || u['lastName'].value) ? (u['firstName'].value + ' ' + u['lastName'].value) : 'Your\r\n          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      <button *ngIf=\"userId\" type=\"button\" class=\"cp-logout-btn--banner\" (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    </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 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 (ngSubmit)=\"onSubmit()\" novalidate>\r\n\r\n        <!-- \u2550\u2550\u2550 SECTION: Personal Information \u2550\u2550\u2550 -->\r\n        <div class=\"cp-card\" [formGroup]=\"userForm\">\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            <!-- Pending notice: shown until a role is selected -->\r\n            <div *ngIf=\"!selectedRoleValue && !isLoadingUser\" class=\"cp-pending-notice\">\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              Please select your role in the Account Setup section below to unlock these fields.\r\n            </div>\r\n            <div [class.cp-fields-pending]=\"!selectedRoleValue && !isLoadingUser\">\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]=\"u['firstName'].invalid && u['firstName'].touched\"\r\n                        autocomplete=\"given-name\" />\r\n                      <div class=\"cp-error\" *ngIf=\"u['firstName'].invalid && u['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]=\"u['lastName'].invalid && u['lastName'].touched\"\r\n                        autocomplete=\"family-name\" />\r\n                      <div class=\"cp-error\" *ngIf=\"u['lastName'].invalid && u['lastName'].touched\">Required</div>\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"phoneNumber\">Phone <span class=\"req\">*</span></label>\r\n                      <input type=\"tel\" id=\"phoneNumber\" formControlName=\"phoneNumber\" placeholder=\"(555) 123-4567\"\r\n                        maxlength=\"14\" [class.is-invalid]=\"u['phoneNumber'].invalid && u['phoneNumber'].touched\"\r\n                        (input)=\"formatPhone($event, 'user')\" autocomplete=\"tel\" />\r\n                      <div class=\"cp-error\" *ngIf=\"u['phoneNumber'].invalid && u['phoneNumber'].touched\">Required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"cp-row cp-row--3\">\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"address1\">Street Address</label>\r\n                      <input type=\"text\" id=\"address1\" formControlName=\"address1\" 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-field\">\r\n                      <label for=\"address2\">Address Line 2</label>\r\n                      <input type=\"text\" id=\"address2\" formControlName=\"address2\" placeholder=\"Apt, Suite, Unit, etc.\"\r\n                        autocomplete=\"address-line2\" />\r\n                    </div>\r\n\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>\r\n\r\n                  <div class=\"cp-row cp-row--4\">\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=\"county\">County</label>\r\n                      <input type=\"text\" id=\"county\" formControlName=\"county\" placeholder=\"Orange County\" />\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"zipcode\">Zip Code</label>\r\n                      <input type=\"text\" id=\"zipcode\" formControlName=\"zipcode\" placeholder=\"32801\" inputmode=\"numeric\"\r\n                        maxlength=\"5\" />\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"country\">Country <span class=\"req\">*</span></label>\r\n                      <input type=\"text\" id=\"country\" formControlName=\"country\" placeholder=\"US\"\r\n                        [class.is-invalid]=\"u['country'].invalid && u['country'].touched\" autocomplete=\"country\" />\r\n                      <div class=\"cp-error\" *ngIf=\"u['country'].invalid && u['country'].touched\">Required</div>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <input type=\"hidden\" formControlName=\"latitude\" />\r\n                  <input type=\"hidden\" formControlName=\"longitude\" />\r\n\r\n                  <div class=\"cp-row cp-row--3\">\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"yearsOfExperince\">Years of Experience <span class=\"req\">*</span></label>\r\n                      <ng-select id=\"yearsOfExperince\" formControlName=\"yearsOfExperince\" [items]=\"expYears\"\r\n                        bindLabel=\"text\" bindValue=\"value\" placeholder=\"Select years\" [clearable]=\"false\"\r\n                        [class.is-invalid]=\"u['yearsOfExperince'].invalid && u['yearsOfExperince'].touched\">\r\n                      </ng-select>\r\n                      <div class=\"cp-error\" *ngIf=\"u['yearsOfExperince'].invalid && u['yearsOfExperince'].touched\">\r\n                        Required</div>\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"userJobTitle\">Job Title(s) <span class=\"req\">*</span></label>\r\n                      <ng-select id=\"userJobTitle\" formControlName=\"userJobTitle\" [items]=\"jobTitles\" bindLabel=\"text\"\r\n                        bindValue=\"value\" [multiple]=\"true\" placeholder=\"Select job title(s)\"\r\n                        [class.is-invalid]=\"u['userJobTitle'].invalid && u['userJobTitle'].touched\">\r\n                      </ng-select>\r\n                      <div class=\"cp-error\" *ngIf=\"u['userJobTitle'].invalid && u['userJobTitle'].touched\">Required\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"industries\">Industries</label>\r\n                      <ng-select id=\"industries\" formControlName=\"industries\" [items]=\"industries\"\r\n                        bindLabel=\"industryName\" bindValue=\"id\" [multiple]=\"true\" [loading]=\"isIndustriesLoading\"\r\n                        placeholder=\"Select industries (optional)\">\r\n                      </ng-select>\r\n                    </div>\r\n                  </div>\r\n\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><!-- /cp-fields-pending -->\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \u2550\u2550\u2550 SECTION: Account Setup \u2014 Role Cards + Password \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\">Select your role and configure your password</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            <!-- Role Cards (ref: initial-process userViewRoles) -->\r\n            <div class=\"cp-field\">\r\n              <label>\r\n                Select Your Role\r\n                <span class=\"req\" *ngIf=\"!isInitialSetupCompleted && !lockedToTypeFromParam\">*</span>\r\n                <span *ngIf=\"isInitialSetupCompleted && !lockedToTypeFromParam\"\r\n                  style=\"font-weight:400;color:#6b7c8a;font-size:11px;margin-left:4px;\">(locked after initial\r\n                  setup)</span>\r\n                <span *ngIf=\"lockedToTypeFromParam\"\r\n                  style=\"font-weight:400;color:#2563eb;font-size:11px;margin-left:4px;\">(pre-assigned)</span>\r\n              </label>\r\n\r\n              <!-- When locked from param, show only the pre-assigned card centred -->\r\n              <div *ngIf=\"lockedToTypeFromParam\" class=\"cp-role-cards cp-role-cards--preassigned\">\r\n                <ng-container *ngFor=\"let role of userViewRoles\">\r\n                  <div *ngIf=\"role.selected\" class=\"cp-role-card cp-role-card--selected cp-role-card--preassigned\">\r\n                    <div class=\"cp-role-card__img\">\r\n                      <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\r\n                      <span class=\"cp-role-card__check\">\r\n                        <svg 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                    </div>\r\n                    <span class=\"cp-role-card__name\">{{ role.name }}</span>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n\r\n              <!-- Normal grid of all role cards -->\r\n              <div *ngIf=\"!lockedToTypeFromParam\" class=\"cp-role-cards\"\r\n                [class.cp-role-cards--locked]=\"isInitialSetupCompleted\">\r\n                <ng-container *ngFor=\"let role of userViewRoles\">\r\n                  <div class=\"cp-role-card\" [class.cp-role-card--selected]=\"role.selected\"\r\n                    [class.cp-role-card--disabled]=\"isInitialSetupCompleted\"\r\n                    (click)=\"!isInitialSetupCompleted && selectedUserRole(role)\"\r\n                    [attr.role]=\"isInitialSetupCompleted ? null : 'button'\" [attr.aria-pressed]=\"role.selected\"\r\n                    [attr.aria-label]=\"role.name\"\r\n                    [attr.title]=\"isInitialSetupCompleted ? 'Role cannot be changed after initial setup is complete' : null\">\r\n                    <div class=\"cp-role-card__img\">\r\n                      <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\r\n                      <span class=\"cp-role-card__check\" *ngIf=\"role.selected\">\r\n                        <svg 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                    </div>\r\n                    <span class=\"cp-role-card__name\">{{ role.name }}</span>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n\r\n              <!-- Pre-assigned notice (from query param / localStorage) -->\r\n              <div class=\"cp-role-locked-notice cp-role-preassigned-notice\"\r\n                *ngIf=\"lockedToTypeFromParam && sectionRoleDone\">\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                Your role has been pre-assigned from your invitation. Contact support to change it.\r\n              </div>\r\n\r\n              <!-- Locked after initial setup notice -->\r\n              <div class=\"cp-role-locked-notice\"\r\n                *ngIf=\"isInitialSetupCompleted && !lockedToTypeFromParam && sectionRoleDone\">\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                Role is locked. Contact support to change it.\r\n              </div>\r\n\r\n              <div class=\"cp-error\"\r\n                *ngIf=\"!sectionRoleDone && validatePage === 1 && !isInitialSetupCompleted && !lockedToTypeFromParam\">\r\n                Please\r\n                select a role</div>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"!isLoadingUser\" [formGroup]=\"userForm\">\r\n\r\n              <!-- Existing user: reset toggle -->\r\n              <div class=\"cp-toggle-row\">\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=\"resetPasswordEnabled\">\r\n                <ng-container *ngIf=\"passwordStep === 1\">\r\n                  <div class=\"cp-row\">\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"newPassword\">New Password</label>\r\n                      <div class=\"cp-pw-wrap\">\r\n                        <input [type]=\"showPassword ? 'text' : 'password'\" id=\"newPassword\" 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=\"confirmPasswordReset\">Confirm Password</label>\r\n                      <div class=\"cp-pw-wrap\">\r\n                        <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPasswordReset\"\r\n                          formControlName=\"confirmPassword\" placeholder=\"Repeat password\" autocomplete=\"new-password\" />\r\n                        <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showConfirmPassword = !showConfirmPassword\">\r\n                          <svg *ngIf=\"!showConfirmPassword\" viewBox=\"0 0 24 24\">\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=\"isBusiness\" [formGroup]=\"companyForm\">\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 cp-row--3\">\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"companyName\">Business Name <span class=\"req\">*</span></label>\r\n                    <input type=\"text\" id=\"companyName\" formControlName=\"companyName\" placeholder=\"Acme Corp\"\r\n                      [class.is-invalid]=\"c['companyName'].invalid && c['companyName'].touched\" />\r\n                    <div class=\"cp-error\" *ngIf=\"c['companyName'].invalid && c['companyName'].touched\">Required</div>\r\n                  </div>\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"companyEmail\">Business Email <span class=\"req\">*</span></label>\r\n                    <input type=\"email\" id=\"companyEmail\" formControlName=\"companyEmail\" placeholder=\"info@acme.com\"\r\n                      [class.is-invalid]=\"c['companyEmail'].invalid && c['companyEmail'].touched\" />\r\n                    <div class=\"cp-error\" *ngIf=\"c['companyEmail'].invalid && c['companyEmail'].touched\">\r\n                      <span *ngIf=\"c['companyEmail'].errors?.['required']\">Required</span>\r\n                      <span *ngIf=\"c['companyEmail'].errors?.['email']\">Invalid email</span>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"companyPhoneNumber\">Business Phone <span class=\"req\">*</span></label>\r\n                    <input type=\"tel\" id=\"companyPhoneNumber\" formControlName=\"companyPhoneNumber\"\r\n                      placeholder=\"(555) 123-4567\" maxlength=\"14\"\r\n                      [class.is-invalid]=\"c['companyPhoneNumber'].invalid && c['companyPhoneNumber'].touched\"\r\n                      (input)=\"formatPhone($event, 'company')\" autocomplete=\"tel\" />\r\n                    <div class=\"cp-error\" *ngIf=\"c['companyPhoneNumber'].invalid && c['companyPhoneNumber'].touched\">\r\n                      Required</div>\r\n                  </div>\r\n                </div>\r\n\r\n\r\n                <div class=\"cp-field\">\r\n                  <label for=\"bizAddress1\">Business Address</label>\r\n                  <input type=\"text\" id=\"bizAddress1\" formControlName=\"address1\" placeholder=\"123 Business Street\"\r\n                    ngx-google-places-autocomplete [options]=\"googleOptions\"\r\n                    (onAddressChange)=\"onBusinessAddressChange($event)\" autocomplete=\"off\" />\r\n                </div>\r\n\r\n                <div class=\"cp-row cp-row--3\">\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"bizCity\">City</label>\r\n                    <input type=\"text\" id=\"bizCity\" formControlName=\"city\" placeholder=\"City\" />\r\n                  </div>\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"bizState\">State</label>\r\n                    <input type=\"text\" id=\"bizState\" formControlName=\"state\" placeholder=\"ST\" maxlength=\"2\" />\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"cp-row cp-row--3\">\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"bizCounty\">County</label>\r\n                    <input type=\"text\" id=\"bizCounty\" formControlName=\"county\" placeholder=\"Orange County\" />\r\n                  </div>\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"bizZipcode\">Zip</label>\r\n                    <input type=\"text\" id=\"bizZipcode\" formControlName=\"zipcode\" placeholder=\"00000\" inputmode=\"numeric\"\r\n                      maxlength=\"5\" />\r\n                  </div>\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"bizCountry\">Country</label>\r\n                    <input type=\"text\" id=\"bizCountry\" formControlName=\"country\" placeholder=\"US\"\r\n                      autocomplete=\"country\" />\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Business logo -->\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 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          <div class=\"cp-error cp-submit-error\" *ngIf=\"providerError\">{{ providerError }}</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\" 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\r\n  </main>\r\n\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Terms & Privacy Modal \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      <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      <div class=\"tc-modal-body\">\r\n        <ng-container *ngIf=\"termsAndConditionTitle === 'Terms and Conditions'\">\r\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\"\r\n            [branding]=\"branding\"></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\"\r\n            [branding]=\"branding\"></app-privacy-policy>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"tc-modal-footer\">\r\n        <button type=\"button\" class=\"tc-btn tc-btn-close\" (click)=\"closeModal()\">Close</button>\r\n      </div>\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:20px;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:12px;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:14px;color:#6b7c8a;line-height:1.78;margin:0}.cp-brand-features{list-style:none;padding:0;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:14px;font-weight:700;color:#0c1620;line-height:1.2}.cp-brand-feature__body span{font-size:12px;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:14px;font-weight:700;color:#0c1620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-user__info span{font-size:12px;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-top:20px;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-hero{margin-bottom:16px}.cp-sb-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#4077ad;margin-bottom:6px}.cp-sb-intro{font-size:14px;line-height:1.6;color:#6b7c8a;margin:0}.cp-sb-progress{margin-bottom:20px}.cp-sb-progress__bar{height:5px;background:#e2eaf2;border-radius:99px;overflow:hidden;margin-bottom:5px}.cp-sb-progress__fill{height:100%;background:linear-gradient(90deg,#4077ad,#5b9fd4);border-radius:99px;transition:width .4s ease;min-width:4px}.cp-sb-progress__label{font-size:12px;font-weight:600;color:#6b7c8a}.cp-sb-features{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:12px}.cp-sb-feature{display:flex;align-items:flex-start;gap:10px}.cp-sb-feature__icon{width:28px;height:28px;border-radius:6px;background:#4077ad14;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cp-sb-feature__icon svg{width:15px;height:15px}.cp-sb-feature__icon svg path{fill:#4077ad}.cp-sb-feature div{display:flex;flex-direction:column;gap:2px}.cp-sb-feature div strong{font-size:14px;font-weight:700;color:#0c1620}.cp-sb-feature div span{font-size:12px;color:#6b7c8a;line-height:1.5}.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:14px;font-weight:700;color:#0c1620;line-height:1}.cp-step__sub{font-size:12px;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:12px;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:18px;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:16px;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:12px;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:12px;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:12px;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:12px}}.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:14px;color:#c0392b}.cp-alert svg path{fill:#c0392b}.cp-card{background:#fff;border:1px solid #e2eaf2;margin:16px 24px 0;border-radius:10px;overflow:visible;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;border-radius:10px 10px 0 0;overflow:hidden}@media (max-width: 480px){.cp-card__header{padding:14px 16px;gap:10px;border-radius:8px 8px 0 0}}.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:16px;font-weight:700;color:#0c1620;margin:0 0 2px;line-height:1}.cp-card__sub{font-size:12px;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}.cp-row.cp-row--4{grid-template-columns:1fr 1fr 1fr 1fr}@media (max-width: 640px){.cp-row.cp-row--3,.cp-row.cp-row--4{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,.cp-row.cp-row--4{grid-template-columns:1fr 1fr}}@media (max-width: 400px){.cp-row.cp-row-triple,.cp-row.cp-row--3,.cp-row.cp-row--4{grid-template-columns:1fr}}.cp-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width:0}.cp-field label{font-size:12px;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:14px;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:12px;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:12px;color:#dc3545;margin-top:2px}.cp-terms-error{margin-top:4px}.cp-submit-error{margin-bottom:12px;font-size:14px;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-pending-notice{display:flex;align-items:flex-start;gap:9px;padding:10px 14px;margin-bottom:16px;background:#4077ad0d;border:1px solid rgba(64,119,173,.18);border-radius:6px;font-size:12px;font-weight:600;color:#4077ad;line-height:1.55}.cp-pending-notice svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}.cp-pending-notice svg path{fill:#4077ad}.cp-fields-pending{opacity:.42;pointer-events:none;filter:blur(.4px);-webkit-user-select:none;user-select:none}.cp-anf-role-preview{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 16px;margin-bottom:4px;background:#4077ad08;border:1px solid rgba(64,119,173,.14);border-radius:8px}.cp-anf-role-preview .cp-role-card{width:110px;pointer-events:none}.cp-anf-role-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#6b7c8a}.cp-role-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;margin-top:6px}@media (max-width: 480px){.cp-role-cards{grid-template-columns:repeat(3,1fr)}}.cp-role-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px 10px;border:2px solid #d3dce3;border-radius:6px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s;-webkit-user-select:none;user-select:none}.cp-role-card:hover{border-color:#4077ad;box-shadow:0 2px 8px #4077ad1f}.cp-role-card--selected{border-color:#4077ad;background:#4077ad0d;box-shadow:0 0 0 3px #4077ad26}.cp-role-card__img{position:relative;width:48px;height:48px}.cp-role-card__img img{width:100%;height:100%;object-fit:contain}.cp-role-card__check{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:#4077ad;display:flex;align-items:center;justify-content:center}.cp-role-card__check svg{width:11px;height:11px}.cp-role-card__check svg path{fill:#fff}.cp-role-card__name{font-size:11px;font-weight:600;color:#0c1620;text-align:center;line-height:1.3}.cp-role-card--disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.cp-role-card--disabled:hover{border-color:#d3dce3;box-shadow:none}.cp-role-cards--locked .cp-role-card--selected{border-color:#6b7c8a;background:#f8fafc;box-shadow:none}.cp-role-cards--locked .cp-role-card--selected .cp-role-card__check{background:#6b7c8a}.cp-role-locked-notice{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 12px;border-radius:99px;background:#f59e0b14;border:1px solid rgba(245,158,11,.25);font-size:11.5px;font-weight:600;color:#92400e}.cp-role-locked-notice svg{width:13px;height:13px;flex-shrink:0}.cp-role-locked-notice svg path{fill:#92400e}.cp-role-locked-notice.cp-role-preassigned-notice{background:#2563eb0f;border-color:#2563eb38;color:#1e40af}.cp-role-locked-notice.cp-role-preassigned-notice svg path{fill:#2563eb}.cp-role-cards--preassigned{display:flex;justify-content:flex-start;gap:0;margin-top:8px}.cp-role-cards--preassigned .cp-role-card--preassigned{width:140px;cursor:default;pointer-events:none;border-color:#2563eb;background:#2563eb0a;box-shadow:0 0 0 3px #2563eb1f}.cp-role-cards--preassigned .cp-role-card--preassigned .cp-role-card__check{background:#2563eb}.cp-role-cards--preassigned .cp-role-card--preassigned .cp-role-card__name{color:#1e40af;font-weight:700}.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;position:relative}.cp-terms__box:after{content:\"\";display:none;position:absolute;left:4px;top:1px;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}.cp-terms__check:checked~.cp-terms__box{background:#4077ad;border-color:#4077ad}.cp-terms__check:checked~.cp-terms__box:after{display:block}.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}::ng-deep .modal-content{background:none!important;border:none!important}::ng-deep .ng-select div,.ng-select input,.ng-select span{font-size:12px!important}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { 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"], outputs: ["metaLoaded"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"], outputs: ["metaLoaded"] }] });
 }
 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<ng-container *ngIf=\"pendingRoleName\"> \u2014 {{ pendingRoleName }}</ng-container></h2>\n\n<!-- \u2500\u2500\u2500 Unauthenticated / Error states: branded two-column layout \u2500\u2500\u2500 -->\n<div *ngIf=\"noEmailError || isLookingUpAccount || auth0UserData || showAccountNotFound\" class=\"cp-page cp-page--brand\">\n\n  <!-- Left: Static marketing & branding panel -->\n  <aside class=\"cp-brand-left\">\n\n    <div class=\"cp-brand-hero\">\n      <span class=\"cp-brand-eyebrow\">Claim Your Account<ng-container *ngIf=\"pendingRoleName\"> \u2014 {{ pendingRoleName\n          }}</ng-container></span>\n      <p class=\"cp-brand-intro\">\n        Your account is ready. Complete this short form to set your credentials and unlock your access to the\n        platform's tools, programs, and services.\n      </p>\n    </div>\n\n    <ul class=\"cp-brand-features\">\n      <li class=\"cp-brand-feature\">\n        <span class=\"cp-brand-feature__icon\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\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\" />\n          </svg>\n        </span>\n        <div class=\"cp-brand-feature__body\">\n          <strong>Secure &amp; Encrypted</strong>\n          <span>Your information is protected end-to-end and handled in accordance with our Privacy Policy.</span>\n        </div>\n      </li>\n      <li class=\"cp-brand-feature\">\n        <span class=\"cp-brand-feature__icon\">\n          <svg viewBox=\"0 0 24 24\">\n            <path d=\"M7 2v11h3v9l7-12h-4l4-8z\" />\n          </svg>\n        </span>\n        <div class=\"cp-brand-feature__body\">\n          <strong>Instant Access</strong>\n          <span>Once activated, you'll get immediate access to programs, rosters, and service requests.</span>\n        </div>\n      </li>\n      <li class=\"cp-brand-feature\">\n        <span class=\"cp-brand-feature__icon\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\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\" />\n          </svg>\n        </span>\n        <div class=\"cp-brand-feature__body\">\n          <strong>Team &amp; Client Network</strong>\n          <span>Connect with certified professionals nationwide and manage your team from a single dashboard.</span>\n        </div>\n      </li>\n      <li class=\"cp-brand-feature\">\n        <span class=\"cp-brand-feature__icon\">\n          <svg viewBox=\"0 0 24 24\">\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\" />\n          </svg>\n        </span>\n        <div class=\"cp-brand-feature__body\">\n          <strong>Complete Your Profile</strong>\n          <span>A complete profile unlocks every feature and makes you visible to clients and partners.</span>\n        </div>\n      </li>\n    </ul>\n\n    <div class=\"cp-brand-contact\">\n      <a *ngIf=\"privacyAndTerms?.contactEmail || privacyAndTerms?.email\"\n        [href]=\"'mailto:' + (privacyAndTerms.contactEmail || privacyAndTerms.email)\" class=\"cp-brand-contact__link\">\n        <svg viewBox=\"0 0 24 24\">\n          <path\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\" />\n        </svg>\n        {{ privacyAndTerms?.contactEmail || privacyAndTerms?.email }}\n      </a>\n      <a *ngIf=\"privacyAndTerms?.phone\" [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-brand-contact__link\">\n        <svg viewBox=\"0 0 24 24\">\n          <path\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\" />\n        </svg>\n        {{ privacyAndTerms?.phone }}\n      </a>\n      <a *ngIf=\"privacyAndTerms?.websiteurl\" [href]=\"privacyAndTerms.websiteurl\" target=\"_blank\"\n        rel=\"noopener noreferrer\" class=\"cp-brand-contact__link cp-brand-contact__link--website\">\n        <svg viewBox=\"0 0 24 24\">\n          <path\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\" />\n        </svg>\n        Visit {{ privacyAndTerms?.companyName || 'our website' }}\n        <svg viewBox=\"0 0 24 24\" class=\"cp-brand-contact__ext\">\n          <path\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\" />\n        </svg>\n      </a>\n    </div>\n\n  </aside>\n\n  <!-- Right: State-specific content -->\n  <main class=\"cp-brand-right\">\n\n    <!-- No Email Error -->\n    <div *ngIf=\"noEmailError\" class=\"cp-brand-state\">\n      <div class=\"cp-invalid-card\">\n        <div class=\"cp-invalid-icon\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path\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\" />\n          </svg>\n        </div>\n        <h2>Invalid Access Link</h2>\n        <p>This page requires a valid invitation link. Please use the link from your invitation email to claim your\n          account.</p>\n      </div>\n    </div>\n\n    <!-- Account Lookup: Loading -->\n    <div *ngIf=\"isLookingUpAccount\" class=\"cp-brand-state\">\n      <div class=\"cp-invalid-card cp-lookup-loading\">\n        <span class=\"cp-spinner cp-lookup-spinner\"></span>\n        <p>Looking up your account\u2026</p>\n      </div>\n    </div>\n\n    <!-- Account Not Found -->\n    <div *ngIf=\"!isLookingUpAccount && !auth0UserData && showAccountNotFound\" class=\"cp-brand-state\">\n      <div class=\"cp-invalid-card\">\n        <div class=\"cp-invalid-icon cp-invalid-icon--warn\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\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\" />\n          </svg>\n        </div>\n        <p [style.margin-bottom]=\"pendingParamType ? '16px' : null\">\n          The email address <strong>{{ userEmail }}</strong> is not associated with an account on our platform.\n          Please click the button below to create a new account.\n        </p>\n        <!-- Pre-assigned role preview when type exists in invitation link -->\n        <ng-container *ngFor=\"let role of userViewRoles\">\n          <div *ngIf=\"pendingParamType && role.type === pendingParamType\" class=\"cp-anf-role-preview\">\n            <span class=\"cp-anf-role-label\">Your pre-assigned role</span>\n            <div class=\"cp-role-card cp-role-card--selected cp-role-card--preassigned\">\n              <div class=\"cp-role-card__img\">\n                <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\n                <span class=\"cp-role-card__check\">\n                  <svg viewBox=\"0 0 24 24\">\n                    <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n                  </svg>\n                </span>\n              </div>\n              <span class=\"cp-role-card__name\">{{ role.name }}</span>\n            </div>\n          </div>\n        </ng-container>\n        <button type=\"button\" class=\"cp-btn\" style=\"margin-top:20px\" (click)=\"navigateToLogin()\">\n          <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\n            <path\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\"\n              fill=\"#fff\" />\n          </svg>\n          Create New Account\n        </button>\n      </div>\n    </div>\n\n    <!-- Account Found -->\n    <div *ngIf=\"!isLookingUpAccount && auth0UserData\" class=\"cp-brand-state\">\n      <div class=\"cp-anf-card\">\n        <div class=\"cp-anf-card__header\">\n          <div class=\"cp-anf-avatar\">\n            {{ (auth0UserData.userDetails?.firstName?.[0] || '') + (auth0UserData.userDetails?.lastName?.[0] || '') ||\n            '?' }}\n          </div>\n          <div class=\"cp-anf-card__identity\">\n            <h2 class=\"cp-anf-card__name\">{{ auth0UserData.userDetails?.firstName }} {{\n              auth0UserData.userDetails?.lastName }}</h2>\n            <span class=\"cp-anf-card__email\">\n              <svg viewBox=\"0 0 24 24\">\n                <path\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\" />\n              </svg>\n              {{ auth0UserData.email }}\n            </span>\n            <div class=\"cp-anf-roles\" *ngIf=\"auth0UserData.userDetails?.userRoles?.length\">\n              <span class=\"cp-anf-role\" *ngFor=\"let r of auth0UserData.userDetails.userRoles\">{{ r.roleName }}</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"cp-anf-card__notice\">\n          <svg viewBox=\"0 0 24 24\">\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\" />\n          </svg>\n          An account already exists for this email address.\n        </div>\n        <button type=\"button\" class=\"cp-anf-signin-btn\" (click)=\"navigateToLogin()\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\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\"\n              fill=\"#fff\" />\n          </svg>\n          Sign In to Your Account\n        </button>\n      </div>\n    </div>\n\n  </main>\n</div>\n\n\n<!-- \u2500\u2500\u2500 Success State \u2500\u2500\u2500 -->\n<div *ngIf=\"submitSuccess\" class=\"cp-success-page\">\n  <div class=\"cp-success-card\">\n    <div class=\"cp-success-icon\">\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n      </svg>\n    </div>\n    <h2>{{ userHasExistingDetails ? 'Profile Updated!' : 'Account Activated!' }}</h2>\n    <p>{{ userHasExistingDetails ? 'Your profile has been saved successfully.' : 'Your account has been successfully\n      activated.' }}</p>\n    <button *ngIf=\"!isInitialSetupCompleted && libConfig?.initialUrl\" type=\"button\" class=\"cp-btn\"\n      style=\"margin-top:20px\" (click)=\"navigateToInitialProcess()\">\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\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\"\n          fill=\"#fff\" />\n      </svg>\n      Complete Initial Setup\n    </button>\n    <button type=\"button\" class=\"cp-btn\" [class.cp-btn--ghost]=\"!isInitialSetupCompleted && libConfig?.initialUrl\"\n      style=\"margin-top:10px\" (click)=\"navigateToDashboard()\">\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\n        <path d=\"M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z\" fill=\"currentColor\" />\n      </svg>\n      Go to Dashboard\n    </button>\n    <button *ngIf=\"!userHasExistingDetails\" type=\"button\" class=\"cp-btn cp-btn--ghost\" style=\"margin-top:10px\"\n      (click)=\"navigateToLogin()\">\n      <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;flex-shrink:0\">\n        <path\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\" />\n      </svg>\n      Sign In Instead\n    </button>\n  </div>\n</div>\n\n\n<!-- \u2500\u2500\u2500 Main Layout \u2500\u2500\u2500 -->\n<div *ngIf=\"!noEmailError && !submitSuccess && !auth0UserData && !isLookingUpAccount && !isInitializing\"\n  class=\"cp-page\">\n\n  <!-- Left Panel \u2014 Status Tracker -->\n  <aside class=\"cp-left\">\n    <div class=\"cp-left-inner mt-1\">\n\n      <!-- User identity card -->\n      <div class=\"cp-sb-user\">\n        <div class=\"cp-sb-avatar\">\n          <img *ngIf=\"profilePreviewUrl\" [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-sb-avatar__img\" />\n          <span *ngIf=\"!profilePreviewUrl\" class=\"cp-sb-avatar__initials\">\n            {{ (u['firstName'].value?.[0] || '') + (u['lastName'].value?.[0] || '') || '?' }}\n          </span>\n        </div>\n        <div class=\"cp-sb-user__info\">\n          <strong class=\"cp-sb-user__name\">\n            {{ (u['firstName'].value || u['lastName'].value) ? (u['firstName'].value + ' ' + u['lastName'].value) :\n            'Your Profile' }}\n          </strong>\n          <span class=\"cp-sb-user__email\">{{ userEmail }}</span>\n        </div>\n      </div>\n\n      <!-- Hero intro -->\n      <div class=\"cp-sb-hero\">\n        <span class=\"cp-sb-eyebrow\">{{ userHasExistingDetails ? 'Profile Update' : 'Claim Your Account' }}<ng-container\n            *ngIf=\"!userHasExistingDetails && (selectedRole?.name || pendingRoleName)\"> \u2014 {{ selectedRole?.name ||\n            pendingRoleName }}</ng-container></span>\n        <p class=\"cp-sb-intro\">\n          {{ userHasExistingDetails\n          ? 'Review and update your personal, role, and business information below.'\n          : 'Complete this form to activate your account and unlock full platform access.' }}\n        </p>\n      </div>\n\n      <!-- Progress bar -->\n      <div class=\"cp-sb-progress\">\n        <div class=\"cp-sb-progress__bar\">\n          <div class=\"cp-sb-progress__fill\" [style.width.%]=\"overallProgress\"></div>\n        </div>\n        <span class=\"cp-sb-progress__label\">{{ overallProgress }}% complete</span>\n      </div>\n\n      <!-- Section status steps -->\n      <ul class=\"cp-steps\">\n\n        <li class=\"cp-step\" [class.cp-step--done]=\"sectionPersonalDone\">\n          <span class=\"cp-step__icon\">\n            <svg viewBox=\"0 0 24 24\">\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\" />\n            </svg>\n          </span>\n          <div class=\"cp-step__body\">\n            <span class=\"cp-step__label\">Personal Information</span>\n            <span class=\"cp-step__sub\">Name, address, profile photo</span>\n          </div>\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionPersonalDone && sectionPhotoDone\">\n            <svg *ngIf=\"sectionPersonalDone && sectionPhotoDone\" viewBox=\"0 0 24 24\">\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n            </svg>\n          </span>\n        </li>\n\n        <li class=\"cp-step\" [class.cp-step--done]=\"sectionRoleDone\">\n          <span class=\"cp-step__icon\">\n            <svg viewBox=\"0 0 24 24\">\n              <path\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\" />\n            </svg>\n          </span>\n          <div class=\"cp-step__body\">\n            <span class=\"cp-step__label\">Account Setup</span>\n            <span class=\"cp-step__sub\">Role selection{{ (setPasswordEnabled || resetPasswordEnabled) ? ', password' : ''\n              }}</span>\n          </div>\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionRoleDone && sectionPasswordDone\">\n            <svg *ngIf=\"sectionRoleDone && sectionPasswordDone\" viewBox=\"0 0 24 24\">\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n            </svg>\n          </span>\n        </li>\n\n        <li class=\"cp-step\" *ngIf=\"isBusiness\" [class.cp-step--done]=\"sectionBusinessDone\">\n          <span class=\"cp-step__icon\">\n            <svg viewBox=\"0 0 24 24\">\n              <path\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\" />\n            </svg>\n          </span>\n          <div class=\"cp-step__body\">\n            <span class=\"cp-step__label\">Business Info</span>\n            <span class=\"cp-step__sub\">Name, email, address, logo</span>\n          </div>\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionBusinessDone\">\n            <svg *ngIf=\"sectionBusinessDone\" viewBox=\"0 0 24 24\">\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n            </svg>\n          </span>\n        </li>\n\n      </ul>\n\n      <!-- Feature highlights -->\n      <ul class=\"cp-sb-features\">\n        <li class=\"cp-sb-feature\">\n          <span class=\"cp-sb-feature__icon\">\n            <svg viewBox=\"0 0 24 24\">\n              <path\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\" />\n            </svg>\n          </span>\n          <div>\n            <strong>Secure &amp; Encrypted</strong>\n            <span>Protected end-to-end per our Privacy Policy.</span>\n          </div>\n        </li>\n        <li class=\"cp-sb-feature\">\n          <span class=\"cp-sb-feature__icon\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M7 2v11h3v9l7-12h-4l4-8z\" />\n            </svg>\n          </span>\n          <div>\n            <strong>Instant Access</strong>\n            <span>Immediate access to programs and service requests.</span>\n          </div>\n        </li>\n        <li class=\"cp-sb-feature\">\n          <span class=\"cp-sb-feature__icon\">\n            <svg viewBox=\"0 0 24 24\">\n              <path\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\" />\n            </svg>\n          </span>\n          <div>\n            <strong>Professional Network</strong>\n            <span>Connect with certified professionals nationwide.</span>\n          </div>\n        </li>\n      </ul>\n\n      <!-- Footer contact -->\n      <div class=\"cp-left-contact\" *ngIf=\"privacyAndTerms?.contactEmail || privacyAndTerms?.phone\">\n        <a *ngIf=\"privacyAndTerms?.contactEmail\" [href]=\"'mailto:' + privacyAndTerms.contactEmail\"\n          class=\"cp-contact-link\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\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\" />\n          </svg>\n          {{ privacyAndTerms?.contactEmail }}\n        </a>\n        <a *ngIf=\"privacyAndTerms?.phone\" [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-contact-link\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\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\" />\n          </svg>\n          {{ privacyAndTerms?.phone }}\n        </a>\n      </div>\n\n    </div>\n  </aside>\n\n  <!-- Right Panel \u2014 Form -->\n  <main class=\"cp-right\">\n\n    <!-- Mobile-only top bar -->\n    <div class=\"cp-mobile-bar\">\n      <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\" [alt]=\"privacyAndTerms?.companyName\"\n        class=\"cp-mobile-logo\" />\n      <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-mobile-company\">{{ privacyAndTerms?.companyName }}</span>\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-logout-btn cp-logout-btn--mobile\" (click)=\"logout()\">\n        <svg viewBox=\"0 0 24 24\">\n          <path\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\" />\n        </svg>\n        Logout\n      </button>\n    </div>\n\n    <!-- \u2500\u2500\u2500 Profile Banner \u2500\u2500\u2500 -->\n    <div class=\"cp-banner\">\n      <div class=\"cp-banner__avatar\">\n        <img *ngIf=\"profilePreviewUrl\" [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-banner__img\" />\n        <div *ngIf=\"!profilePreviewUrl\" class=\"cp-banner__initials\">\n          {{ (u['firstName'].value?.[0] || '') + (u['lastName'].value?.[0] || '') || '?' }}\n        </div>\n      </div>\n      <div class=\"cp-banner__info\">\n        <div class=\"cp-banner__name\">\n          {{ (u['firstName'].value || u['lastName'].value) ? (u['firstName'].value + ' ' + u['lastName'].value) : 'Your\n          Profile' }}\n        </div>\n        <div class=\"cp-banner__meta\">\n          <span class=\"cp-banner__email\" *ngIf=\"userEmail\">\n            <svg viewBox=\"0 0 24 24\">\n              <path\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\" />\n            </svg>\n            {{ userEmail }}\n          </span>\n          <span class=\"cp-banner__badge\" [class.cp-banner__badge--update]=\"userHasExistingDetails\">\n            {{ userHasExistingDetails ? 'Profile Update' : 'Account Activation' }}\n          </span>\n        </div>\n        <div class=\"cp-banner__loading\" *ngIf=\"isLoadingUser\">\n          <span class=\"cp-spinner cp-spinner--sm\"></span> Loading profile\u2026\n        </div>\n      </div>\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-logout-btn--banner\" (click)=\"logout()\">\n        <svg viewBox=\"0 0 24 24\">\n          <path\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\" />\n        </svg>\n        Sign Out\n      </button>\n    </div>\n\n    <div class=\"cp-form-wrap\">\n\n      <div class=\"cp-error cp-alert\" *ngIf=\"userLookupError\">\n        <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;flex-shrink:0\">\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" />\n        </svg>\n        {{ userLookupError }}\n      </div>\n\n      <form (ngSubmit)=\"onSubmit()\" novalidate>\n\n        <!-- \u2550\u2550\u2550 SECTION: Personal Information \u2550\u2550\u2550 -->\n        <div class=\"cp-card\" [formGroup]=\"userForm\">\n          <div class=\"cp-card__header\">\n            <span class=\"cp-card__icon\">\n              <svg viewBox=\"0 0 24 24\">\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\" />\n              </svg>\n            </span>\n            <div>\n              <h3 class=\"cp-card__title\">Personal Information</h3>\n              <p class=\"cp-card__sub\">Name, contact, address and profile photo</p>\n            </div>\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionPersonalDone && sectionPhotoDone\">\n              <svg *ngIf=\"sectionPersonalDone && sectionPhotoDone\" viewBox=\"0 0 24 24\">\n                <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n              </svg>\n              <span *ngIf=\"!(sectionPersonalDone && sectionPhotoDone)\">\u2014</span>\n            </span>\n          </div>\n          <div class=\"cp-card__body\">\n            <!-- Pending notice: shown until a role is selected -->\n            <div *ngIf=\"!selectedRoleValue && !isLoadingUser\" class=\"cp-pending-notice\">\n              <svg viewBox=\"0 0 24 24\">\n                <path\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\" />\n              </svg>\n              Please select your role in the Account Setup section below to unlock these fields.\n            </div>\n            <div [class.cp-fields-pending]=\"!selectedRoleValue && !isLoadingUser\">\n              <div class=\"cp-biz-layout\">\n                <!-- Left: fields -->\n                <div class=\"cp-biz-fields\">\n                  <div class=\"cp-row cp-row--3\">\n                    <div class=\"cp-field\">\n                      <label for=\"firstName\">First Name <span class=\"req\">*</span></label>\n                      <input type=\"text\" id=\"firstName\" formControlName=\"firstName\" placeholder=\"Jane\"\n                        [class.is-invalid]=\"u['firstName'].invalid && u['firstName'].touched\"\n                        autocomplete=\"given-name\" />\n                      <div class=\"cp-error\" *ngIf=\"u['firstName'].invalid && u['firstName'].touched\">Required</div>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"lastName\">Last Name <span class=\"req\">*</span></label>\n                      <input type=\"text\" id=\"lastName\" formControlName=\"lastName\" placeholder=\"Doe\"\n                        [class.is-invalid]=\"u['lastName'].invalid && u['lastName'].touched\"\n                        autocomplete=\"family-name\" />\n                      <div class=\"cp-error\" *ngIf=\"u['lastName'].invalid && u['lastName'].touched\">Required</div>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"phoneNumber\">Phone <span class=\"req\">*</span></label>\n                      <input type=\"tel\" id=\"phoneNumber\" formControlName=\"phoneNumber\" placeholder=\"(555) 123-4567\"\n                        maxlength=\"14\" [class.is-invalid]=\"u['phoneNumber'].invalid && u['phoneNumber'].touched\"\n                        (input)=\"formatPhone($event, 'user')\" autocomplete=\"tel\" />\n                      <div class=\"cp-error\" *ngIf=\"u['phoneNumber'].invalid && u['phoneNumber'].touched\">Required</div>\n                    </div>\n                  </div>\n                  <div class=\"cp-row cp-row--3\">\n                    <div class=\"cp-field\">\n                      <label for=\"address1\">Street Address</label>\n                      <input type=\"text\" id=\"address1\" formControlName=\"address1\" placeholder=\"123 Main Street\"\n                        ngx-google-places-autocomplete [options]=\"googleOptions\"\n                        (onAddressChange)=\"onAddressChange($event)\" autocomplete=\"off\" />\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"address2\">Address Line 2</label>\n                      <input type=\"text\" id=\"address2\" formControlName=\"address2\" placeholder=\"Apt, Suite, Unit, etc.\"\n                        autocomplete=\"address-line2\" />\n                    </div>\n\n                    <div class=\"cp-field\">\n                      <label for=\"city\">City</label>\n                      <input type=\"text\" id=\"city\" formControlName=\"city\" placeholder=\"Orlando\" />\n                    </div>\n                  </div>\n\n                  <div class=\"cp-row cp-row--4\">\n                    <div class=\"cp-field\">\n                      <label for=\"state\">State</label>\n                      <input type=\"text\" id=\"state\" formControlName=\"state\" placeholder=\"FL\" maxlength=\"2\" />\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"county\">County</label>\n                      <input type=\"text\" id=\"county\" formControlName=\"county\" placeholder=\"Orange County\" />\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"zipcode\">Zip Code</label>\n                      <input type=\"text\" id=\"zipcode\" formControlName=\"zipcode\" placeholder=\"32801\" inputmode=\"numeric\"\n                        maxlength=\"5\" />\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"country\">Country <span class=\"req\">*</span></label>\n                      <input type=\"text\" id=\"country\" formControlName=\"country\" placeholder=\"US\"\n                        [class.is-invalid]=\"u['country'].invalid && u['country'].touched\" autocomplete=\"country\" />\n                      <div class=\"cp-error\" *ngIf=\"u['country'].invalid && u['country'].touched\">Required</div>\n                    </div>\n                  </div>\n\n                  <input type=\"hidden\" formControlName=\"latitude\" />\n                  <input type=\"hidden\" formControlName=\"longitude\" />\n\n                  <div class=\"cp-row cp-row--3\">\n                    <div class=\"cp-field\">\n                      <label for=\"yearsOfExperince\">Years of Experience <span class=\"req\">*</span></label>\n                      <ng-select id=\"yearsOfExperince\" formControlName=\"yearsOfExperince\" [items]=\"expYears\"\n                        bindLabel=\"text\" bindValue=\"value\" placeholder=\"Select years\" [clearable]=\"false\"\n                        [class.is-invalid]=\"u['yearsOfExperince'].invalid && u['yearsOfExperince'].touched\">\n                      </ng-select>\n                      <div class=\"cp-error\" *ngIf=\"u['yearsOfExperince'].invalid && u['yearsOfExperince'].touched\">\n                        Required</div>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"userJobTitle\">Job Title(s) <span class=\"req\">*</span></label>\n                      <ng-select id=\"userJobTitle\" formControlName=\"userJobTitle\" [items]=\"jobTitles\" bindLabel=\"text\"\n                        bindValue=\"value\" [multiple]=\"true\" placeholder=\"Select job title(s)\"\n                        [class.is-invalid]=\"u['userJobTitle'].invalid && u['userJobTitle'].touched\">\n                      </ng-select>\n                      <div class=\"cp-error\" *ngIf=\"u['userJobTitle'].invalid && u['userJobTitle'].touched\">Required\n                      </div>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"industries\">Industries</label>\n                      <ng-select id=\"industries\" formControlName=\"industries\" [items]=\"industries\"\n                        bindLabel=\"industryName\" bindValue=\"id\" [multiple]=\"true\" [loading]=\"isIndustriesLoading\"\n                        placeholder=\"Select industries (optional)\">\n                      </ng-select>\n                    </div>\n                  </div>\n\n                </div>\n\n                <!-- Right: profile photo -->\n                <div class=\"cp-biz-logo\">\n                  <label class=\"cp-biz-logo__label\">Profile Photo</label>\n                  <div class=\"cp-biz-logo__area cp-profile-logo-area\" (click)=\"cpProfileInput.click()\">\n                    <input #cpProfileInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"onProfileFileChange($event)\"\n                      class=\"cp-upload-hidden\" />\n                    <ng-container *ngIf=\"profilePreviewUrl; else profilePlaceholder\">\n                      <img [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-profile-logo-img\" />\n                      <span class=\"cp-biz-logo__change\">Change</span>\n                    </ng-container>\n                    <ng-template #profilePlaceholder>\n                      <div class=\"cp-biz-logo__placeholder\">\n                        <svg viewBox=\"0 0 24 24\">\n                          <path\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\" />\n                        </svg>\n                        <span>Upload Photo</span>\n                        <small>PNG \u00B7 JPG</small>\n                      </div>\n                    </ng-template>\n                  </div>\n                </div>\n              </div>\n            </div><!-- /cp-fields-pending -->\n          </div>\n        </div>\n\n        <!-- \u2550\u2550\u2550 SECTION: Account Setup \u2014 Role Cards + Password \u2550\u2550\u2550 -->\n        <div class=\"cp-card\">\n          <div class=\"cp-card__header\">\n            <span class=\"cp-card__icon\">\n              <svg viewBox=\"0 0 24 24\">\n                <path\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\" />\n              </svg>\n            </span>\n            <div>\n              <h3 class=\"cp-card__title\">Account Setup</h3>\n              <p class=\"cp-card__sub\">Select your role and configure your password</p>\n            </div>\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionRoleDone && sectionPasswordDone\">\n              <svg *ngIf=\"sectionRoleDone && sectionPasswordDone\" viewBox=\"0 0 24 24\">\n                <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n              </svg>\n              <span *ngIf=\"!(sectionRoleDone && sectionPasswordDone)\">\u2014</span>\n            </span>\n          </div>\n          <div class=\"cp-card__body\">\n\n            <!-- Role Cards (ref: initial-process userViewRoles) -->\n            <div class=\"cp-field\">\n              <label>\n                Select Your Role\n                <span class=\"req\" *ngIf=\"!isInitialSetupCompleted && !lockedToTypeFromParam\">*</span>\n                <span *ngIf=\"isInitialSetupCompleted && !lockedToTypeFromParam\"\n                  style=\"font-weight:400;color:#6b7c8a;font-size:11px;margin-left:4px;\">(locked after initial\n                  setup)</span>\n                <span *ngIf=\"lockedToTypeFromParam\"\n                  style=\"font-weight:400;color:#2563eb;font-size:11px;margin-left:4px;\">(pre-assigned)</span>\n              </label>\n\n              <!-- When locked from param, show only the pre-assigned card centred -->\n              <div *ngIf=\"lockedToTypeFromParam\" class=\"cp-role-cards cp-role-cards--preassigned\">\n                <ng-container *ngFor=\"let role of userViewRoles\">\n                  <div *ngIf=\"role.selected\" class=\"cp-role-card cp-role-card--selected cp-role-card--preassigned\">\n                    <div class=\"cp-role-card__img\">\n                      <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\n                      <span class=\"cp-role-card__check\">\n                        <svg viewBox=\"0 0 24 24\">\n                          <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n                        </svg>\n                      </span>\n                    </div>\n                    <span class=\"cp-role-card__name\">{{ role.name }}</span>\n                  </div>\n                </ng-container>\n              </div>\n\n              <!-- Normal grid of all role cards -->\n              <div *ngIf=\"!lockedToTypeFromParam\" class=\"cp-role-cards\"\n                [class.cp-role-cards--locked]=\"isInitialSetupCompleted\">\n                <ng-container *ngFor=\"let role of userViewRoles\">\n                  <div class=\"cp-role-card\" [class.cp-role-card--selected]=\"role.selected\"\n                    [class.cp-role-card--disabled]=\"isInitialSetupCompleted\"\n                    (click)=\"!isInitialSetupCompleted && selectedUserRole(role)\"\n                    [attr.role]=\"isInitialSetupCompleted ? null : 'button'\" [attr.aria-pressed]=\"role.selected\"\n                    [attr.aria-label]=\"role.name\"\n                    [attr.title]=\"isInitialSetupCompleted ? 'Role cannot be changed after initial setup is complete' : null\">\n                    <div class=\"cp-role-card__img\">\n                      <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\n                      <span class=\"cp-role-card__check\" *ngIf=\"role.selected\">\n                        <svg viewBox=\"0 0 24 24\">\n                          <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n                        </svg>\n                      </span>\n                    </div>\n                    <span class=\"cp-role-card__name\">{{ role.name }}</span>\n                  </div>\n                </ng-container>\n              </div>\n\n              <!-- Pre-assigned notice (from query param / localStorage) -->\n              <div class=\"cp-role-locked-notice cp-role-preassigned-notice\"\n                *ngIf=\"lockedToTypeFromParam && sectionRoleDone\">\n                <svg viewBox=\"0 0 24 24\">\n                  <path\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\" />\n                </svg>\n                Your role has been pre-assigned from your invitation. Contact support to change it.\n              </div>\n\n              <!-- Locked after initial setup notice -->\n              <div class=\"cp-role-locked-notice\"\n                *ngIf=\"isInitialSetupCompleted && !lockedToTypeFromParam && sectionRoleDone\">\n                <svg viewBox=\"0 0 24 24\">\n                  <path\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\" />\n                </svg>\n                Role is locked. Contact support to change it.\n              </div>\n\n              <div class=\"cp-error\"\n                *ngIf=\"!sectionRoleDone && validatePage === 1 && !isInitialSetupCompleted && !lockedToTypeFromParam\">\n                Please\n                select a role</div>\n            </div>\n\n            <ng-container *ngIf=\"!isLoadingUser\" [formGroup]=\"userForm\">\n\n              <!-- Existing user: reset toggle -->\n              <div class=\"cp-toggle-row\">\n                <div class=\"cp-toggle-row__info\">\n                  <span class=\"cp-toggle-row__label\">Reset Password</span>\n                  <span class=\"cp-toggle-row__hint\">Enable to change your current password</span>\n                </div>\n                <label class=\"cp-toggle-switch\">\n                  <input type=\"checkbox\" [checked]=\"resetPasswordEnabled\" (change)=\"toggleResetPassword()\">\n                  <span class=\"cp-toggle-knob\"></span>\n                </label>\n              </div>\n\n              <ng-container *ngIf=\"resetPasswordEnabled\">\n                <ng-container *ngIf=\"passwordStep === 1\">\n                  <div class=\"cp-row\">\n                    <div class=\"cp-field\">\n                      <label for=\"newPassword\">New Password</label>\n                      <div class=\"cp-pw-wrap\">\n                        <input [type]=\"showPassword ? 'text' : 'password'\" id=\"newPassword\" formControlName=\"password\"\n                          placeholder=\"Min. 8 characters\" autocomplete=\"new-password\" />\n                        <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showPassword = !showPassword\">\n                          <svg *ngIf=\"!showPassword\" viewBox=\"0 0 24 24\">\n                            <path\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\" />\n                          </svg>\n                          <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\">\n                            <path\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\" />\n                          </svg>\n                        </button>\n                      </div>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"confirmPasswordReset\">Confirm Password</label>\n                      <div class=\"cp-pw-wrap\">\n                        <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPasswordReset\"\n                          formControlName=\"confirmPassword\" placeholder=\"Repeat password\" autocomplete=\"new-password\" />\n                        <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showConfirmPassword = !showConfirmPassword\">\n                          <svg *ngIf=\"!showConfirmPassword\" viewBox=\"0 0 24 24\">\n                            <path\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\" />\n                          </svg>\n                          <svg *ngIf=\"showConfirmPassword\" viewBox=\"0 0 24 24\">\n                            <path\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\" />\n                          </svg>\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"cp-error\" *ngIf=\"passwordChangeError\">{{ passwordChangeError }}</div>\n                  <div class=\"cp-pw-success\" *ngIf=\"passwordChangeSuccess\">\n                    <svg viewBox=\"0 0 24 24\" style=\"width:15px;height:15px\">\n                      <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n                    </svg>\n                    Password changed successfully.\n                  </div>\n                  <button type=\"button\" class=\"cp-btn cp-btn--outline cp-btn--sm\" (click)=\"changePassword()\"\n                    [disabled]=\"isPasswordChanging\">\n                    <span *ngIf=\"isPasswordChanging\" class=\"cp-spinner cp-spinner-btn\"></span>\n                    {{ isPasswordChanging ? 'Sending\u2026' : 'Send Verification Code' }}\n                  </button>\n                </ng-container>\n\n                <ng-container *ngIf=\"passwordStep === 2\">\n                  <div class=\"cp-otp-wrap\">\n                    <p class=\"cp-otp-hint\">\n                      <svg viewBox=\"0 0 24 24\" style=\"width:15px;height:15px;flex-shrink:0\">\n                        <path\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\" />\n                      </svg>\n                      Code sent to <strong>{{ userEmail }}</strong>\n                    </p>\n                    <div class=\"cp-otp-timer\" [class.cp-otp-timer--expired]=\"otpExpired\">\n                      <svg viewBox=\"0 0 24 24\" style=\"width:14px;height:14px\">\n                        <path\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\" />\n                      </svg>\n                      <span *ngIf=\"!otpExpired\">{{ otpMinutes }}:{{ otpSeconds < 10 ? '0' + otpSeconds : otpSeconds\n                          }}</span>\n                          <span *ngIf=\"otpExpired\">Code expired</span>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"otpInput\">Enter 6-digit code</label>\n                      <input type=\"text\" id=\"otpInput\" [(ngModel)]=\"otpValue\" [ngModelOptions]=\"{standalone: true}\"\n                        placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\" maxlength=\"6\" inputmode=\"numeric\" class=\"cp-otp-input\" />\n                    </div>\n                    <div class=\"cp-error\" *ngIf=\"passwordChangeError\">{{ passwordChangeError }}</div>\n                    <div class=\"cp-otp-actions\">\n                      <button type=\"button\" class=\"cp-btn\" (click)=\"verifyPasswordOtp()\"\n                        [disabled]=\"otpExpired || !otpValue || isPasswordChanging\">\n                        <span *ngIf=\"isPasswordChanging\" class=\"cp-spinner cp-spinner-btn\"></span>\n                        {{ isPasswordChanging ? 'Verifying\u2026' : 'Verify & Change Password' }}\n                      </button>\n                      <button type=\"button\" class=\"cp-btn cp-btn--ghost\" *ngIf=\"canResendOtp\"\n                        (click)=\"changePassword(true)\" [disabled]=\"isPasswordChanging\">Resend Code</button>\n                      <button type=\"button\" class=\"cp-btn-link\" (click)=\"cancelPasswordChange()\">Cancel</button>\n                    </div>\n                  </div>\n                </ng-container>\n              </ng-container>\n\n            </ng-container>\n          </div>\n        </div>\n\n        <!-- \u2550\u2550\u2550 SECTION: Business Information \u2550\u2550\u2550 -->\n        <div class=\"cp-card\" *ngIf=\"isBusiness\" [formGroup]=\"companyForm\">\n          <div class=\"cp-card__header\">\n            <span class=\"cp-card__icon\">\n              <svg viewBox=\"0 0 24 24\">\n                <path\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\" />\n              </svg>\n            </span>\n            <div>\n              <h3 class=\"cp-card__title\">Business Information</h3>\n              <p class=\"cp-card__sub\">Company details and branding</p>\n            </div>\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionBusinessDone\">\n              <svg *ngIf=\"sectionBusinessDone\" viewBox=\"0 0 24 24\">\n                <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n              </svg>\n              <span *ngIf=\"!sectionBusinessDone\">\u2014</span>\n            </span>\n          </div>\n          <div class=\"cp-card__body\">\n            <div class=\"cp-biz-layout\">\n              <div class=\"cp-biz-fields\">\n                <div class=\"cp-row cp-row--3\">\n                  <div class=\"cp-field\">\n                    <label for=\"companyName\">Business Name <span class=\"req\">*</span></label>\n                    <input type=\"text\" id=\"companyName\" formControlName=\"companyName\" placeholder=\"Acme Corp\"\n                      [class.is-invalid]=\"c['companyName'].invalid && c['companyName'].touched\" />\n                    <div class=\"cp-error\" *ngIf=\"c['companyName'].invalid && c['companyName'].touched\">Required</div>\n                  </div>\n                  <div class=\"cp-field\">\n                    <label for=\"companyEmail\">Business Email <span class=\"req\">*</span></label>\n                    <input type=\"email\" id=\"companyEmail\" formControlName=\"companyEmail\" placeholder=\"info@acme.com\"\n                      [class.is-invalid]=\"c['companyEmail'].invalid && c['companyEmail'].touched\" />\n                    <div class=\"cp-error\" *ngIf=\"c['companyEmail'].invalid && c['companyEmail'].touched\">\n                      <span *ngIf=\"c['companyEmail'].errors?.['required']\">Required</span>\n                      <span *ngIf=\"c['companyEmail'].errors?.['email']\">Invalid email</span>\n                    </div>\n                  </div>\n                  <div class=\"cp-field\">\n                    <label for=\"companyPhoneNumber\">Business Phone <span class=\"req\">*</span></label>\n                    <input type=\"tel\" id=\"companyPhoneNumber\" formControlName=\"companyPhoneNumber\"\n                      placeholder=\"(555) 123-4567\" maxlength=\"14\"\n                      [class.is-invalid]=\"c['companyPhoneNumber'].invalid && c['companyPhoneNumber'].touched\"\n                      (input)=\"formatPhone($event, 'company')\" autocomplete=\"tel\" />\n                    <div class=\"cp-error\" *ngIf=\"c['companyPhoneNumber'].invalid && c['companyPhoneNumber'].touched\">\n                      Required</div>\n                  </div>\n                </div>\n\n\n                <div class=\"cp-field\">\n                  <label for=\"bizAddress1\">Business Address</label>\n                  <input type=\"text\" id=\"bizAddress1\" formControlName=\"address1\" placeholder=\"123 Business Street\"\n                    ngx-google-places-autocomplete [options]=\"googleOptions\"\n                    (onAddressChange)=\"onBusinessAddressChange($event)\" autocomplete=\"off\" />\n                </div>\n\n                <div class=\"cp-row cp-row--3\">\n                  <div class=\"cp-field\">\n                    <label for=\"bizCity\">City</label>\n                    <input type=\"text\" id=\"bizCity\" formControlName=\"city\" placeholder=\"City\" />\n                  </div>\n                  <div class=\"cp-field\">\n                    <label for=\"bizState\">State</label>\n                    <input type=\"text\" id=\"bizState\" formControlName=\"state\" placeholder=\"ST\" maxlength=\"2\" />\n                  </div>\n                </div>\n\n                <div class=\"cp-row cp-row--3\">\n                  <div class=\"cp-field\">\n                    <label for=\"bizCounty\">County</label>\n                    <input type=\"text\" id=\"bizCounty\" formControlName=\"county\" placeholder=\"Orange County\" />\n                  </div>\n                  <div class=\"cp-field\">\n                    <label for=\"bizZipcode\">Zip</label>\n                    <input type=\"text\" id=\"bizZipcode\" formControlName=\"zipcode\" placeholder=\"00000\" inputmode=\"numeric\"\n                      maxlength=\"5\" />\n                  </div>\n                  <div class=\"cp-field\">\n                    <label for=\"bizCountry\">Country</label>\n                    <input type=\"text\" id=\"bizCountry\" formControlName=\"country\" placeholder=\"US\"\n                      autocomplete=\"country\" />\n                  </div>\n                </div>\n              </div>\n\n              <!-- Business logo -->\n              <div class=\"cp-biz-logo\">\n                <label class=\"cp-biz-logo__label\">Business Logo</label>\n                <div class=\"cp-biz-logo__area\" (click)=\"cpLogoInput.click()\">\n                  <input #cpLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"onBusinessLogoChange($event)\"\n                    class=\"cp-upload-hidden\" />\n                  <ng-container *ngIf=\"logoPreviewUrl; else logoPlaceholder\">\n                    <img [src]=\"logoPreviewUrl\" alt=\"Business logo\" class=\"cp-biz-logo__img\" />\n                    <span class=\"cp-biz-logo__change\">Change</span>\n                  </ng-container>\n                  <ng-template #logoPlaceholder>\n                    <div class=\"cp-biz-logo__placeholder\">\n                      <svg viewBox=\"0 0 24 24\">\n                        <path\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\" />\n                      </svg>\n                      <span>Upload Logo</span>\n                      <small>PNG \u00B7 JPG</small>\n                    </div>\n                  </ng-template>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- \u2550\u2550\u2550 Footer: Terms + Submit \u2550\u2550\u2550 -->\n        <div class=\"cp-form-footer\">\n          <div class=\"cp-terms\">\n            <label class=\"cp-terms__label\">\n              <input type=\"checkbox\" class=\"cp-terms__check\" [checked]=\"model.acceptTerms && model.privacy\"\n                (change)=\"onTermsCheckboxChange($event)\" />\n              <span class=\"cp-terms__box\"></span>\n              <span>I accept the\n                <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Terms and Conditions', $event)\">Terms &amp;\n                  Conditions</a>\n                and\n                <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Privacy Statement', $event)\">Privacy Policy</a>\n              </span>\n            </label>\n            <div class=\"cp-error cp-terms-error\" *ngIf=\"(!model.acceptTerms || !model.privacy) && validatePage === 1\">\n              You must accept the Terms and Privacy Policy to continue\n            </div>\n          </div>\n\n          <div class=\"cp-error cp-submit-error\" *ngIf=\"submitError\">{{ submitError }}</div>\n          <div class=\"cp-error cp-submit-error\" *ngIf=\"providerError\">{{ providerError }}</div>\n\n          <button type=\"submit\" class=\"cp-btn cp-btn--submit\" [disabled]=\"isSubmitting\">\n            <span *ngIf=\"isSubmitting\" class=\"cp-spinner cp-spinner-btn\"></span>\n            <svg *ngIf=\"!isSubmitting\" viewBox=\"0 0 24 24\" style=\"width:18px;height:18px\">\n              <path *ngIf=\"userHasExistingDetails\"\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\"\n                fill=\"#fff\" />\n              <path *ngIf=\"!userHasExistingDetails\" d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" fill=\"#fff\" />\n            </svg>\n            {{ uploadStatus || (isSubmitting ? 'Processing\u2026' : (userHasExistingDetails ? 'Save Changes' : 'Activate My\n            Account')) }}\n          </button>\n        </div>\n\n      </form>\n    </div>\n\n  </main>\n\n</div>\n\n<!-- \u2500\u2500\u2500 Terms & Privacy Modal \u2500\u2500\u2500 -->\n<ng-template #termsAndConditionsModel>\n  <div class=\"modal-dialog modal-dialog-centered tc-modal-dialog\">\n    <div class=\"modal-content tc-modal\">\n      <div class=\"tc-modal-header\">\n        <div class=\"tc-header-icon\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\" />\n            <polyline points=\"14 2 14 8 20 8\" />\n            <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\" />\n            <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\" />\n          </svg>\n        </div>\n        <h4 class=\"tc-modal-title\">{{ termsAndConditionTitle }}</h4>\n        <button type=\"button\" class=\"tc-modal-close\" (click)=\"closeModal()\" aria-label=\"Close\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n          </svg>\n        </button>\n      </div>\n      <div class=\"tc-modal-body\">\n        <ng-container *ngIf=\"termsAndConditionTitle === 'Terms and Conditions'\">\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\"\n            [branding]=\"branding\"></app-terms-conditions>\n        </ng-container>\n        <ng-container *ngIf=\"termsAndConditionTitle !== 'Terms and Conditions'\">\n          <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\"\n            [branding]=\"branding\"></app-privacy-policy>\n        </ng-container>\n      </div>\n      <div class=\"tc-modal-footer\">\n        <button type=\"button\" class=\"tc-btn tc-btn-close\" (click)=\"closeModal()\">Close</button>\n      </div>\n    </div>\n  </div>\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:20px;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:12px;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:14px;color:#6b7c8a;line-height:1.78;margin:0}.cp-brand-features{list-style:none;padding:0;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:14px;font-weight:700;color:#0c1620;line-height:1.2}.cp-brand-feature__body span{font-size:12px;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:14px;font-weight:700;color:#0c1620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-user__info span{font-size:12px;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-top:20px;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-hero{margin-bottom:16px}.cp-sb-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#4077ad;margin-bottom:6px}.cp-sb-intro{font-size:14px;line-height:1.6;color:#6b7c8a;margin:0}.cp-sb-progress{margin-bottom:20px}.cp-sb-progress__bar{height:5px;background:#e2eaf2;border-radius:99px;overflow:hidden;margin-bottom:5px}.cp-sb-progress__fill{height:100%;background:linear-gradient(90deg,#4077ad,#5b9fd4);border-radius:99px;transition:width .4s ease;min-width:4px}.cp-sb-progress__label{font-size:12px;font-weight:600;color:#6b7c8a}.cp-sb-features{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:12px}.cp-sb-feature{display:flex;align-items:flex-start;gap:10px}.cp-sb-feature__icon{width:28px;height:28px;border-radius:6px;background:#4077ad14;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cp-sb-feature__icon svg{width:15px;height:15px}.cp-sb-feature__icon svg path{fill:#4077ad}.cp-sb-feature div{display:flex;flex-direction:column;gap:2px}.cp-sb-feature div strong{font-size:14px;font-weight:700;color:#0c1620}.cp-sb-feature div span{font-size:12px;color:#6b7c8a;line-height:1.5}.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:14px;font-weight:700;color:#0c1620;line-height:1}.cp-step__sub{font-size:12px;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:12px;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:18px;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:16px;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:12px;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:12px;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:12px;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:12px}}.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:14px;color:#c0392b}.cp-alert svg path{fill:#c0392b}.cp-card{background:#fff;border:1px solid #e2eaf2;margin:16px 24px 0;border-radius:10px;overflow:visible;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;border-radius:10px 10px 0 0;overflow:hidden}@media (max-width: 480px){.cp-card__header{padding:14px 16px;gap:10px;border-radius:8px 8px 0 0}}.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:16px;font-weight:700;color:#0c1620;margin:0 0 2px;line-height:1}.cp-card__sub{font-size:12px;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}.cp-row.cp-row--4{grid-template-columns:1fr 1fr 1fr 1fr}@media (max-width: 640px){.cp-row.cp-row--3,.cp-row.cp-row--4{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,.cp-row.cp-row--4{grid-template-columns:1fr 1fr}}@media (max-width: 400px){.cp-row.cp-row-triple,.cp-row.cp-row--3,.cp-row.cp-row--4{grid-template-columns:1fr}}.cp-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width:0}.cp-field label{font-size:12px;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:14px;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:12px;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:12px;color:#dc3545;margin-top:2px}.cp-terms-error{margin-top:4px}.cp-submit-error{margin-bottom:12px;font-size:14px;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-pending-notice{display:flex;align-items:flex-start;gap:9px;padding:10px 14px;margin-bottom:16px;background:#4077ad0d;border:1px solid rgba(64,119,173,.18);border-radius:6px;font-size:12px;font-weight:600;color:#4077ad;line-height:1.55}.cp-pending-notice svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}.cp-pending-notice svg path{fill:#4077ad}.cp-fields-pending{opacity:.42;pointer-events:none;filter:blur(.4px);-webkit-user-select:none;user-select:none}.cp-anf-role-preview{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 16px;margin-bottom:4px;background:#4077ad08;border:1px solid rgba(64,119,173,.14);border-radius:8px}.cp-anf-role-preview .cp-role-card{width:110px;pointer-events:none}.cp-anf-role-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#6b7c8a}.cp-role-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;margin-top:6px}@media (max-width: 480px){.cp-role-cards{grid-template-columns:repeat(3,1fr)}}.cp-role-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px 10px;border:2px solid #d3dce3;border-radius:6px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s;-webkit-user-select:none;user-select:none}.cp-role-card:hover{border-color:#4077ad;box-shadow:0 2px 8px #4077ad1f}.cp-role-card--selected{border-color:#4077ad;background:#4077ad0d;box-shadow:0 0 0 3px #4077ad26}.cp-role-card__img{position:relative;width:48px;height:48px}.cp-role-card__img img{width:100%;height:100%;object-fit:contain}.cp-role-card__check{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:#4077ad;display:flex;align-items:center;justify-content:center}.cp-role-card__check svg{width:11px;height:11px}.cp-role-card__check svg path{fill:#fff}.cp-role-card__name{font-size:11px;font-weight:600;color:#0c1620;text-align:center;line-height:1.3}.cp-role-card--disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.cp-role-card--disabled:hover{border-color:#d3dce3;box-shadow:none}.cp-role-cards--locked .cp-role-card--selected{border-color:#6b7c8a;background:#f8fafc;box-shadow:none}.cp-role-cards--locked .cp-role-card--selected .cp-role-card__check{background:#6b7c8a}.cp-role-locked-notice{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 12px;border-radius:99px;background:#f59e0b14;border:1px solid rgba(245,158,11,.25);font-size:11.5px;font-weight:600;color:#92400e}.cp-role-locked-notice svg{width:13px;height:13px;flex-shrink:0}.cp-role-locked-notice svg path{fill:#92400e}.cp-role-locked-notice.cp-role-preassigned-notice{background:#2563eb0f;border-color:#2563eb38;color:#1e40af}.cp-role-locked-notice.cp-role-preassigned-notice svg path{fill:#2563eb}.cp-role-cards--preassigned{display:flex;justify-content:flex-start;gap:0;margin-top:8px}.cp-role-cards--preassigned .cp-role-card--preassigned{width:140px;cursor:default;pointer-events:none;border-color:#2563eb;background:#2563eb0a;box-shadow:0 0 0 3px #2563eb1f}.cp-role-cards--preassigned .cp-role-card--preassigned .cp-role-card__check{background:#2563eb}.cp-role-cards--preassigned .cp-role-card--preassigned .cp-role-card__name{color:#1e40af;font-weight:700}.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;position:relative}.cp-terms__box:after{content:\"\";display:none;position:absolute;left:4px;top:1px;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}.cp-terms__check:checked~.cp-terms__box{background:#4077ad;border-color:#4077ad}.cp-terms__check:checked~.cp-terms__box:after{display:block}.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}::ng-deep .modal-content{background:none!important;border:none!important}::ng-deep .ng-select div,.ng-select input,.ng-select span{font-size:12px!important}\n"] }]
+            args: [{ selector: 'app-claim-process', standalone: false, template: "<h2 class=\"sr-only\">Claim Your Account<ng-container *ngIf=\"pendingRoleName\"> \u2014 {{ pendingRoleName }}</ng-container></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-hero\">\r\n      <span class=\"cp-brand-eyebrow\">Claim Your Account<ng-container *ngIf=\"pendingRoleName\"> \u2014 {{ pendingRoleName\r\n          }}</ng-container></span>\r\n      <p class=\"cp-brand-intro\">\r\n        Your account is ready. Complete this short form to set your credentials and unlock your 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      <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      <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      <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      <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    </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 -->\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        <p [style.margin-bottom]=\"pendingParamType ? '16px' : null\">\r\n          The email address <strong>{{ userEmail }}</strong> is not associated with an account on our platform.\r\n          Please click the button below to create a new account.\r\n        </p>\r\n        <!-- Pre-assigned role preview when type exists in invitation link -->\r\n        <ng-container *ngFor=\"let role of userViewRoles\">\r\n          <div *ngIf=\"pendingParamType && role.type === pendingParamType\" class=\"cp-anf-role-preview\">\r\n            <span class=\"cp-anf-role-label\">Your pre-assigned role</span>\r\n            <div class=\"cp-role-card cp-role-card--selected cp-role-card--preassigned\">\r\n              <div class=\"cp-role-card__img\">\r\n                <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\r\n                <span class=\"cp-role-card__check\">\r\n                  <svg 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              </div>\r\n              <span class=\"cp-role-card__name\">{{ role.name }}</span>\r\n            </div>\r\n          </div>\r\n        </ng-container>\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 -->\r\n    <div *ngIf=\"!isLookingUpAccount && auth0UserData\" class=\"cp-brand-state\">\r\n      <div class=\"cp-anf-card\">\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\">{{ auth0UserData.userDetails?.firstName }} {{\r\n              auth0UserData.userDetails?.lastName }}</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.roleName }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\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        <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      </div>\r\n    </div>\r\n\r\n  </main>\r\n</div>\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 ? 'Your profile has been saved successfully.' : 'Your account has been successfully\r\n      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 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\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 mt-1\">\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            {{ (u['firstName'].value?.[0] || '') + (u['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            {{ (u['firstName'].value || u['lastName'].value) ? (u['firstName'].value + ' ' + u['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      <!-- Hero intro -->\r\n      <div class=\"cp-sb-hero\">\r\n        <span class=\"cp-sb-eyebrow\">{{ userHasExistingDetails ? 'Profile Update' : 'Claim Your Account' }}<ng-container\r\n            *ngIf=\"!userHasExistingDetails && (selectedRole?.name || pendingRoleName)\"> \u2014 {{ selectedRole?.name ||\r\n            pendingRoleName }}</ng-container></span>\r\n        <p class=\"cp-sb-intro\">\r\n          {{ userHasExistingDetails\r\n          ? 'Review and update your personal, role, and business information below.'\r\n          : 'Complete this form to activate your account and unlock full platform access.' }}\r\n        </p>\r\n      </div>\r\n\r\n      <!-- Progress bar -->\r\n      <div class=\"cp-sb-progress\">\r\n        <div class=\"cp-sb-progress__bar\">\r\n          <div class=\"cp-sb-progress__fill\" [style.width.%]=\"overallProgress\"></div>\r\n        </div>\r\n        <span class=\"cp-sb-progress__label\">{{ overallProgress }}% complete</span>\r\n      </div>\r\n\r\n      <!-- Section status steps -->\r\n      <ul class=\"cp-steps\">\r\n\r\n        <li class=\"cp-step\" [class.cp-step--done]=\"sectionPersonalDone\">\r\n          <span class=\"cp-step__icon\">\r\n            <svg viewBox=\"0 0 24 24\">\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=\"isBusiness\" [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      <!-- Feature highlights -->\r\n      <ul class=\"cp-sb-features\">\r\n        <li class=\"cp-sb-feature\">\r\n          <span class=\"cp-sb-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>\r\n            <strong>Secure &amp; Encrypted</strong>\r\n            <span>Protected end-to-end per our Privacy Policy.</span>\r\n          </div>\r\n        </li>\r\n        <li class=\"cp-sb-feature\">\r\n          <span class=\"cp-sb-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>\r\n            <strong>Instant Access</strong>\r\n            <span>Immediate access to programs and service requests.</span>\r\n          </div>\r\n        </li>\r\n        <li class=\"cp-sb-feature\">\r\n          <span class=\"cp-sb-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>\r\n            <strong>Professional Network</strong>\r\n            <span>Connect with certified professionals nationwide.</span>\r\n          </div>\r\n        </li>\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    <!-- 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          {{ (u['firstName'].value?.[0] || '') + (u['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          {{ (u['firstName'].value || u['lastName'].value) ? (u['firstName'].value + ' ' + u['lastName'].value) : 'Your\r\n          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      <button *ngIf=\"userId\" type=\"button\" class=\"cp-logout-btn--banner\" (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    </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 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 (ngSubmit)=\"onSubmit()\" novalidate>\r\n\r\n        <!-- \u2550\u2550\u2550 SECTION: Personal Information \u2550\u2550\u2550 -->\r\n        <div class=\"cp-card\" [formGroup]=\"userForm\">\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            <!-- Pending notice: shown until a role is selected -->\r\n            <div *ngIf=\"!selectedRoleValue && !isLoadingUser\" class=\"cp-pending-notice\">\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              Please select your role in the Account Setup section below to unlock these fields.\r\n            </div>\r\n            <div [class.cp-fields-pending]=\"!selectedRoleValue && !isLoadingUser\">\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]=\"u['firstName'].invalid && u['firstName'].touched\"\r\n                        autocomplete=\"given-name\" />\r\n                      <div class=\"cp-error\" *ngIf=\"u['firstName'].invalid && u['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]=\"u['lastName'].invalid && u['lastName'].touched\"\r\n                        autocomplete=\"family-name\" />\r\n                      <div class=\"cp-error\" *ngIf=\"u['lastName'].invalid && u['lastName'].touched\">Required</div>\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"phoneNumber\">Phone <span class=\"req\">*</span></label>\r\n                      <input type=\"tel\" id=\"phoneNumber\" formControlName=\"phoneNumber\" placeholder=\"(555) 123-4567\"\r\n                        maxlength=\"14\" [class.is-invalid]=\"u['phoneNumber'].invalid && u['phoneNumber'].touched\"\r\n                        (input)=\"formatPhone($event, 'user')\" autocomplete=\"tel\" />\r\n                      <div class=\"cp-error\" *ngIf=\"u['phoneNumber'].invalid && u['phoneNumber'].touched\">Required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"cp-row cp-row--3\">\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"address1\">Street Address</label>\r\n                      <input type=\"text\" id=\"address1\" formControlName=\"address1\" 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-field\">\r\n                      <label for=\"address2\">Address Line 2</label>\r\n                      <input type=\"text\" id=\"address2\" formControlName=\"address2\" placeholder=\"Apt, Suite, Unit, etc.\"\r\n                        autocomplete=\"address-line2\" />\r\n                    </div>\r\n\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>\r\n\r\n                  <div class=\"cp-row cp-row--4\">\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=\"county\">County</label>\r\n                      <input type=\"text\" id=\"county\" formControlName=\"county\" placeholder=\"Orange County\" />\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"zipcode\">Zip Code</label>\r\n                      <input type=\"text\" id=\"zipcode\" formControlName=\"zipcode\" placeholder=\"32801\" inputmode=\"numeric\"\r\n                        maxlength=\"5\" />\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"country\">Country <span class=\"req\">*</span></label>\r\n                      <input type=\"text\" id=\"country\" formControlName=\"country\" placeholder=\"US\"\r\n                        [class.is-invalid]=\"u['country'].invalid && u['country'].touched\" autocomplete=\"country\" />\r\n                      <div class=\"cp-error\" *ngIf=\"u['country'].invalid && u['country'].touched\">Required</div>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <input type=\"hidden\" formControlName=\"latitude\" />\r\n                  <input type=\"hidden\" formControlName=\"longitude\" />\r\n\r\n                  <div class=\"cp-row cp-row--3\">\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"yearsOfExperince\">Years of Experience <span class=\"req\">*</span></label>\r\n                      <ng-select id=\"yearsOfExperince\" formControlName=\"yearsOfExperince\" [items]=\"expYears\"\r\n                        bindLabel=\"text\" bindValue=\"value\" placeholder=\"Select years\" [clearable]=\"false\"\r\n                        [class.is-invalid]=\"u['yearsOfExperince'].invalid && u['yearsOfExperince'].touched\">\r\n                      </ng-select>\r\n                      <div class=\"cp-error\" *ngIf=\"u['yearsOfExperince'].invalid && u['yearsOfExperince'].touched\">\r\n                        Required</div>\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"userJobTitle\">Job Title(s) <span class=\"req\">*</span></label>\r\n                      <ng-select id=\"userJobTitle\" formControlName=\"userJobTitle\" [items]=\"jobTitles\" bindLabel=\"text\"\r\n                        bindValue=\"value\" [multiple]=\"true\" placeholder=\"Select job title(s)\"\r\n                        [class.is-invalid]=\"u['userJobTitle'].invalid && u['userJobTitle'].touched\">\r\n                      </ng-select>\r\n                      <div class=\"cp-error\" *ngIf=\"u['userJobTitle'].invalid && u['userJobTitle'].touched\">Required\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"industries\">Industries</label>\r\n                      <ng-select id=\"industries\" formControlName=\"industries\" [items]=\"industries\"\r\n                        bindLabel=\"industryName\" bindValue=\"id\" [multiple]=\"true\" [loading]=\"isIndustriesLoading\"\r\n                        placeholder=\"Select industries (optional)\">\r\n                      </ng-select>\r\n                    </div>\r\n                  </div>\r\n\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><!-- /cp-fields-pending -->\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \u2550\u2550\u2550 SECTION: Account Setup \u2014 Role Cards + Password \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\">Select your role and configure your password</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            <!-- Role Cards (ref: initial-process userViewRoles) -->\r\n            <div class=\"cp-field\">\r\n              <label>\r\n                Select Your Role\r\n                <span class=\"req\" *ngIf=\"!isInitialSetupCompleted && !lockedToTypeFromParam\">*</span>\r\n                <span *ngIf=\"isInitialSetupCompleted && !lockedToTypeFromParam\"\r\n                  style=\"font-weight:400;color:#6b7c8a;font-size:11px;margin-left:4px;\">(locked after initial\r\n                  setup)</span>\r\n                <span *ngIf=\"lockedToTypeFromParam\"\r\n                  style=\"font-weight:400;color:#2563eb;font-size:11px;margin-left:4px;\">(pre-assigned)</span>\r\n              </label>\r\n\r\n              <!-- When locked from param, show only the pre-assigned card centred -->\r\n              <div *ngIf=\"lockedToTypeFromParam\" class=\"cp-role-cards cp-role-cards--preassigned\">\r\n                <ng-container *ngFor=\"let role of userViewRoles\">\r\n                  <div *ngIf=\"role.selected\" class=\"cp-role-card cp-role-card--selected cp-role-card--preassigned\">\r\n                    <div class=\"cp-role-card__img\">\r\n                      <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\r\n                      <span class=\"cp-role-card__check\">\r\n                        <svg 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                    </div>\r\n                    <span class=\"cp-role-card__name\">{{ role.name }}</span>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n\r\n              <!-- Normal grid of all role cards -->\r\n              <div *ngIf=\"!lockedToTypeFromParam\" class=\"cp-role-cards\"\r\n                [class.cp-role-cards--locked]=\"isInitialSetupCompleted\">\r\n                <ng-container *ngFor=\"let role of userViewRoles\">\r\n                  <div class=\"cp-role-card\" [class.cp-role-card--selected]=\"role.selected\"\r\n                    [class.cp-role-card--disabled]=\"isInitialSetupCompleted\"\r\n                    (click)=\"!isInitialSetupCompleted && selectedUserRole(role)\"\r\n                    [attr.role]=\"isInitialSetupCompleted ? null : 'button'\" [attr.aria-pressed]=\"role.selected\"\r\n                    [attr.aria-label]=\"role.name\"\r\n                    [attr.title]=\"isInitialSetupCompleted ? 'Role cannot be changed after initial setup is complete' : null\">\r\n                    <div class=\"cp-role-card__img\">\r\n                      <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\r\n                      <span class=\"cp-role-card__check\" *ngIf=\"role.selected\">\r\n                        <svg 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                    </div>\r\n                    <span class=\"cp-role-card__name\">{{ role.name }}</span>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n\r\n              <!-- Pre-assigned notice (from query param / localStorage) -->\r\n              <div class=\"cp-role-locked-notice cp-role-preassigned-notice\"\r\n                *ngIf=\"lockedToTypeFromParam && sectionRoleDone\">\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                Your role has been pre-assigned from your invitation. Contact support to change it.\r\n              </div>\r\n\r\n              <!-- Locked after initial setup notice -->\r\n              <div class=\"cp-role-locked-notice\"\r\n                *ngIf=\"isInitialSetupCompleted && !lockedToTypeFromParam && sectionRoleDone\">\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                Role is locked. Contact support to change it.\r\n              </div>\r\n\r\n              <div class=\"cp-error\"\r\n                *ngIf=\"!sectionRoleDone && validatePage === 1 && !isInitialSetupCompleted && !lockedToTypeFromParam\">\r\n                Please\r\n                select a role</div>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"!isLoadingUser\" [formGroup]=\"userForm\">\r\n\r\n              <!-- Existing user: reset toggle -->\r\n              <div class=\"cp-toggle-row\">\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=\"resetPasswordEnabled\">\r\n                <ng-container *ngIf=\"passwordStep === 1\">\r\n                  <div class=\"cp-row\">\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"newPassword\">New Password</label>\r\n                      <div class=\"cp-pw-wrap\">\r\n                        <input [type]=\"showPassword ? 'text' : 'password'\" id=\"newPassword\" 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=\"confirmPasswordReset\">Confirm Password</label>\r\n                      <div class=\"cp-pw-wrap\">\r\n                        <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPasswordReset\"\r\n                          formControlName=\"confirmPassword\" placeholder=\"Repeat password\" autocomplete=\"new-password\" />\r\n                        <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showConfirmPassword = !showConfirmPassword\">\r\n                          <svg *ngIf=\"!showConfirmPassword\" viewBox=\"0 0 24 24\">\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=\"isBusiness\" [formGroup]=\"companyForm\">\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 cp-row--3\">\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"companyName\">Business Name <span class=\"req\">*</span></label>\r\n                    <input type=\"text\" id=\"companyName\" formControlName=\"companyName\" placeholder=\"Acme Corp\"\r\n                      [class.is-invalid]=\"c['companyName'].invalid && c['companyName'].touched\" />\r\n                    <div class=\"cp-error\" *ngIf=\"c['companyName'].invalid && c['companyName'].touched\">Required</div>\r\n                  </div>\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"companyEmail\">Business Email <span class=\"req\">*</span></label>\r\n                    <input type=\"email\" id=\"companyEmail\" formControlName=\"companyEmail\" placeholder=\"info@acme.com\"\r\n                      [class.is-invalid]=\"c['companyEmail'].invalid && c['companyEmail'].touched\" />\r\n                    <div class=\"cp-error\" *ngIf=\"c['companyEmail'].invalid && c['companyEmail'].touched\">\r\n                      <span *ngIf=\"c['companyEmail'].errors?.['required']\">Required</span>\r\n                      <span *ngIf=\"c['companyEmail'].errors?.['email']\">Invalid email</span>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"companyPhoneNumber\">Business Phone <span class=\"req\">*</span></label>\r\n                    <input type=\"tel\" id=\"companyPhoneNumber\" formControlName=\"companyPhoneNumber\"\r\n                      placeholder=\"(555) 123-4567\" maxlength=\"14\"\r\n                      [class.is-invalid]=\"c['companyPhoneNumber'].invalid && c['companyPhoneNumber'].touched\"\r\n                      (input)=\"formatPhone($event, 'company')\" autocomplete=\"tel\" />\r\n                    <div class=\"cp-error\" *ngIf=\"c['companyPhoneNumber'].invalid && c['companyPhoneNumber'].touched\">\r\n                      Required</div>\r\n                  </div>\r\n                </div>\r\n\r\n\r\n                <div class=\"cp-field\">\r\n                  <label for=\"bizAddress1\">Business Address</label>\r\n                  <input type=\"text\" id=\"bizAddress1\" formControlName=\"address1\" placeholder=\"123 Business Street\"\r\n                    ngx-google-places-autocomplete [options]=\"googleOptions\"\r\n                    (onAddressChange)=\"onBusinessAddressChange($event)\" autocomplete=\"off\" />\r\n                </div>\r\n\r\n                <div class=\"cp-row cp-row--3\">\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"bizCity\">City</label>\r\n                    <input type=\"text\" id=\"bizCity\" formControlName=\"city\" placeholder=\"City\" />\r\n                  </div>\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"bizState\">State</label>\r\n                    <input type=\"text\" id=\"bizState\" formControlName=\"state\" placeholder=\"ST\" maxlength=\"2\" />\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"cp-row cp-row--3\">\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"bizCounty\">County</label>\r\n                    <input type=\"text\" id=\"bizCounty\" formControlName=\"county\" placeholder=\"Orange County\" />\r\n                  </div>\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"bizZipcode\">Zip</label>\r\n                    <input type=\"text\" id=\"bizZipcode\" formControlName=\"zipcode\" placeholder=\"00000\" inputmode=\"numeric\"\r\n                      maxlength=\"5\" />\r\n                  </div>\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"bizCountry\">Country</label>\r\n                    <input type=\"text\" id=\"bizCountry\" formControlName=\"country\" placeholder=\"US\"\r\n                      autocomplete=\"country\" />\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Business logo -->\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 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          <div class=\"cp-error cp-submit-error\" *ngIf=\"providerError\">{{ providerError }}</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\" 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\r\n  </main>\r\n\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Terms & Privacy Modal \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      <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      <div class=\"tc-modal-body\">\r\n        <ng-container *ngIf=\"termsAndConditionTitle === 'Terms and Conditions'\">\r\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\"\r\n            [branding]=\"branding\"></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\"\r\n            [branding]=\"branding\"></app-privacy-policy>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"tc-modal-footer\">\r\n        <button type=\"button\" class=\"tc-btn tc-btn-close\" (click)=\"closeModal()\">Close</button>\r\n      </div>\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:20px;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:12px;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:14px;color:#6b7c8a;line-height:1.78;margin:0}.cp-brand-features{list-style:none;padding:0;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:14px;font-weight:700;color:#0c1620;line-height:1.2}.cp-brand-feature__body span{font-size:12px;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:14px;font-weight:700;color:#0c1620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-user__info span{font-size:12px;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-top:20px;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-hero{margin-bottom:16px}.cp-sb-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#4077ad;margin-bottom:6px}.cp-sb-intro{font-size:14px;line-height:1.6;color:#6b7c8a;margin:0}.cp-sb-progress{margin-bottom:20px}.cp-sb-progress__bar{height:5px;background:#e2eaf2;border-radius:99px;overflow:hidden;margin-bottom:5px}.cp-sb-progress__fill{height:100%;background:linear-gradient(90deg,#4077ad,#5b9fd4);border-radius:99px;transition:width .4s ease;min-width:4px}.cp-sb-progress__label{font-size:12px;font-weight:600;color:#6b7c8a}.cp-sb-features{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:12px}.cp-sb-feature{display:flex;align-items:flex-start;gap:10px}.cp-sb-feature__icon{width:28px;height:28px;border-radius:6px;background:#4077ad14;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cp-sb-feature__icon svg{width:15px;height:15px}.cp-sb-feature__icon svg path{fill:#4077ad}.cp-sb-feature div{display:flex;flex-direction:column;gap:2px}.cp-sb-feature div strong{font-size:14px;font-weight:700;color:#0c1620}.cp-sb-feature div span{font-size:12px;color:#6b7c8a;line-height:1.5}.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:14px;font-weight:700;color:#0c1620;line-height:1}.cp-step__sub{font-size:12px;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:12px;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:18px;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:16px;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:12px;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:12px;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:12px;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:12px}}.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:14px;color:#c0392b}.cp-alert svg path{fill:#c0392b}.cp-card{background:#fff;border:1px solid #e2eaf2;margin:16px 24px 0;border-radius:10px;overflow:visible;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;border-radius:10px 10px 0 0;overflow:hidden}@media (max-width: 480px){.cp-card__header{padding:14px 16px;gap:10px;border-radius:8px 8px 0 0}}.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:16px;font-weight:700;color:#0c1620;margin:0 0 2px;line-height:1}.cp-card__sub{font-size:12px;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}.cp-row.cp-row--4{grid-template-columns:1fr 1fr 1fr 1fr}@media (max-width: 640px){.cp-row.cp-row--3,.cp-row.cp-row--4{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,.cp-row.cp-row--4{grid-template-columns:1fr 1fr}}@media (max-width: 400px){.cp-row.cp-row-triple,.cp-row.cp-row--3,.cp-row.cp-row--4{grid-template-columns:1fr}}.cp-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width:0}.cp-field label{font-size:12px;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:14px;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:12px;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:12px;color:#dc3545;margin-top:2px}.cp-terms-error{margin-top:4px}.cp-submit-error{margin-bottom:12px;font-size:14px;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-pending-notice{display:flex;align-items:flex-start;gap:9px;padding:10px 14px;margin-bottom:16px;background:#4077ad0d;border:1px solid rgba(64,119,173,.18);border-radius:6px;font-size:12px;font-weight:600;color:#4077ad;line-height:1.55}.cp-pending-notice svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}.cp-pending-notice svg path{fill:#4077ad}.cp-fields-pending{opacity:.42;pointer-events:none;filter:blur(.4px);-webkit-user-select:none;user-select:none}.cp-anf-role-preview{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 16px;margin-bottom:4px;background:#4077ad08;border:1px solid rgba(64,119,173,.14);border-radius:8px}.cp-anf-role-preview .cp-role-card{width:110px;pointer-events:none}.cp-anf-role-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#6b7c8a}.cp-role-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;margin-top:6px}@media (max-width: 480px){.cp-role-cards{grid-template-columns:repeat(3,1fr)}}.cp-role-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px 10px;border:2px solid #d3dce3;border-radius:6px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s;-webkit-user-select:none;user-select:none}.cp-role-card:hover{border-color:#4077ad;box-shadow:0 2px 8px #4077ad1f}.cp-role-card--selected{border-color:#4077ad;background:#4077ad0d;box-shadow:0 0 0 3px #4077ad26}.cp-role-card__img{position:relative;width:48px;height:48px}.cp-role-card__img img{width:100%;height:100%;object-fit:contain}.cp-role-card__check{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:#4077ad;display:flex;align-items:center;justify-content:center}.cp-role-card__check svg{width:11px;height:11px}.cp-role-card__check svg path{fill:#fff}.cp-role-card__name{font-size:11px;font-weight:600;color:#0c1620;text-align:center;line-height:1.3}.cp-role-card--disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.cp-role-card--disabled:hover{border-color:#d3dce3;box-shadow:none}.cp-role-cards--locked .cp-role-card--selected{border-color:#6b7c8a;background:#f8fafc;box-shadow:none}.cp-role-cards--locked .cp-role-card--selected .cp-role-card__check{background:#6b7c8a}.cp-role-locked-notice{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 12px;border-radius:99px;background:#f59e0b14;border:1px solid rgba(245,158,11,.25);font-size:11.5px;font-weight:600;color:#92400e}.cp-role-locked-notice svg{width:13px;height:13px;flex-shrink:0}.cp-role-locked-notice svg path{fill:#92400e}.cp-role-locked-notice.cp-role-preassigned-notice{background:#2563eb0f;border-color:#2563eb38;color:#1e40af}.cp-role-locked-notice.cp-role-preassigned-notice svg path{fill:#2563eb}.cp-role-cards--preassigned{display:flex;justify-content:flex-start;gap:0;margin-top:8px}.cp-role-cards--preassigned .cp-role-card--preassigned{width:140px;cursor:default;pointer-events:none;border-color:#2563eb;background:#2563eb0a;box-shadow:0 0 0 3px #2563eb1f}.cp-role-cards--preassigned .cp-role-card--preassigned .cp-role-card__check{background:#2563eb}.cp-role-cards--preassigned .cp-role-card--preassigned .cp-role-card__name{color:#1e40af;font-weight:700}.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;position:relative}.cp-terms__box:after{content:\"\";display:none;position:absolute;left:4px;top:1px;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}.cp-terms__check:checked~.cp-terms__box{background:#4077ad;border-color:#4077ad}.cp-terms__check:checked~.cp-terms__box:after{display:block}.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}::ng-deep .modal-content{background:none!important;border:none!important}::ng-deep .ng-select div,.ng-select input,.ng-select span{font-size:12px!important}\n"] }]
         }], ctorParameters: () => [{ type: i7.FormBuilder }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: ClaimProcessService }, { type: i1$1.BsModalService }, { type: i1$3.TokenService }, { type: i1$3.AuthLogoutService }, { type: IndustryService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LIBRARY_CONFIG]