@idsoftsource/initial-process 2.7.3 → 2.7.5

package/fesm2022/idsoftsource-initial-process.mjs

@@ -35947,10 +35947,14 @@ class ClaimProcessService {
     initialSetUpCreateUserDetail(model) {
         return this.userDetailService.initialSetUpCreateUserDetail(model);
     }
-    /** Create or update a business provider (ref: initial-process saveBusiness) */
+    /** Create a new business provider */
     createProvider(payload) {
         return this.providerService.adminCreateProvider(payload);
     }
+    /** Update an existing business provider */
+    updateProvider(payload) {
+        return this.providerService.updateInitialSetUpProvider(payload);
+    }
     // ─── File upload ──────────────────────────────────────────────────────────────
     async uploadFile(file, pathPrefix) {
         try {
@@ -36172,14 +36176,15 @@ class ClaimProcessComponent {
     selectedRole = null;
     isBusiness = false;
     assignProviderRoleModel = {};
+    lockedToTypeFromParam = false;
     userViewRoles = [
-        { name: 'Producer', value: 'Producer', img: 'assets/images/users/contractor.svg', selected: false, code: null, id: '00000000-0000-0000-0000-000000000000', roleId: '00000000-0000-0000-0000-000000000000' },
-        { name: 'Provider', value: 'Provider', img: 'assets/images/users/provider.svg', selected: false, code: ProviderType.ServiceProvider, id: '00000000-0000-0000-0000-000000000000', roleId: '00000000-0000-0000-0000-000000000000' },
-        { name: 'Auditor', value: 'Auditor', img: 'assets/images/users/auditor.svg', selected: false, code: null, id: '00000000-0000-0000-0000-000000000000', roleId: '00000000-0000-0000-0000-000000000000' },
-        { name: 'Customer', value: 'Customer', img: 'assets/images/users/customer.svg', selected: false, code: null, id: '00000000-0000-0000-0000-000000000000', roleId: '00000000-0000-0000-0000-000000000000' },
-        { name: 'Contractor', value: 'Contractor', img: 'assets/images/users/contractor.svg', selected: false, code: ProviderType.Contractor, id: '00000000-0000-0000-0000-000000000000', roleId: '00000000-0000-0000-0000-000000000000' },
-        { name: 'Insurance Agency', value: 'InsuranceAgency', img: 'assets/images/users/insurance.svg', selected: false, code: ProviderType.InsuranceAgency, id: '00000000-0000-0000-0000-000000000000', roleId: '00000000-0000-0000-0000-000000000000' },
-        { name: 'Real Estate Company', value: 'RealEstateCompany', img: 'assets/images/users/realestate.svg', selected: false, code: ProviderType.RealEstateAgency, id: '00000000-0000-0000-0000-000000000000', roleId: '00000000-0000-0000-0000-000000000000' },
+        { type: 1, name: 'Producer', value: 'Producer', img: 'assets/images/users/contractor.svg', selected: false, code: null, id: '00000000-0000-0000-0000-000000000000', roleId: '00000000-0000-0000-0000-000000000000' },
+        { type: 2, name: 'Provider', value: 'Provider', img: 'assets/images/users/provider.svg', selected: false, code: ProviderType.ServiceProvider, id: '00000000-0000-0000-0000-000000000000', roleId: '00000000-0000-0000-0000-000000000000' },
+        { type: 3, name: 'Auditor', value: 'Auditor', img: 'assets/images/users/auditor.svg', selected: false, code: null, id: '00000000-0000-0000-0000-000000000000', roleId: '00000000-0000-0000-0000-000000000000' },
+        { type: 4, name: 'Customer', value: 'Customer', img: 'assets/images/users/customer.svg', selected: false, code: null, id: '00000000-0000-0000-0000-000000000000', roleId: '00000000-0000-0000-0000-000000000000' },
+        { type: 5, name: 'Contractor', value: 'Contractor', img: 'assets/images/users/contractor.svg', selected: false, code: ProviderType.Contractor, id: '00000000-0000-0000-0000-000000000000', roleId: '00000000-0000-0000-0000-000000000000' },
+        { type: 6, name: 'Insurance Agency', value: 'InsuranceAgency', img: 'assets/images/users/insurance.svg', selected: false, code: ProviderType.InsuranceAgency, id: '00000000-0000-0000-0000-000000000000', roleId: '00000000-0000-0000-0000-000000000000' },
+        { type: 7, name: 'Real Estate Company', value: 'RealEstateCompany', img: 'assets/images/users/realestate.svg', selected: false, code: ProviderType.RealEstateAgency, id: '00000000-0000-0000-0000-000000000000', roleId: '00000000-0000-0000-0000-000000000000' },
     ];
     // ─── Industries & years ───────────────────────────────────────────────────────
     industries = [];
@@ -36239,6 +36244,7 @@ class ClaimProcessComponent {
     userId = null;
     googleOptions = { componentRestrictions: { country: ['US'] } };
     static SESSION_KEY = 'claim_process_email';
+    static ROLE_TYPE_KEY = 'claim_process_role_type';
     // ─── Accessors ────────────────────────────────────────────────────────────────
     /** userForm controls accessor */
     get u() { return this.userForm.controls; }
@@ -36304,6 +36310,8 @@ class ClaimProcessComponent {
             this.userId = userId;
         const paramEmail = this.route.snapshot.queryParams['email'] ||
             this.route.snapshot.queryParams['EmailId'];
+        const paramType = this.route.snapshot.queryParams['type'] ||
+            this.route.snapshot.queryParams['RoleType'];
         if (paramEmail) {
             this.userEmail = paramEmail;
             if (emailId)
@@ -36326,6 +36334,15 @@ class ClaimProcessComponent {
                 return;
             }
         }
+        // If userId is from the token service, save the paramType to localStorage for
+        // refresh persistence and clear it from the URL. The actual role binding happens
+        // in loadUserRoles() as a fallback when the API returns no existing roles.
+        if (paramType && userId) {
+            localStorage.setItem(ClaimProcessComponent.ROLE_TYPE_KEY, paramType);
+            if (!paramEmail) {
+                this.router.navigate([], { relativeTo: this.route, queryParams: {}, replaceUrl: true });
+            }
+        }
         if (!userId) {
             await this.lookupAuth0Account();
             return;
@@ -36501,6 +36518,16 @@ class ClaimProcessComponent {
                     vr.roleId = companyRole?.id ?? vr.roleId;
                     vr.id = providerRole?.id ?? vr.id;
                 });
+                // If applyParamType() ran before this resolved, re-wire the selected role's IDs
+                if (this.lockedToTypeFromParam && this.selectedRole) {
+                    const BUSINESS = ['Provider', 'Contractor', 'InsuranceAgency', 'RealEstateCompany'];
+                    const isBiz = BUSINESS.includes(this.selectedRole.value);
+                    const userRoleName = isBiz ? this.selectedRole.value + 'User' : this.selectedRole.value;
+                    const companyRole = this.userRoles.find((r) => r.name === userRoleName);
+                    const providerRole = this.userRoles.find((r) => r.name === this.selectedRole.value);
+                    this.selectedRole.roleId = companyRole?.id ?? this.selectedRole.roleId;
+                    this.selectedRole.id = providerRole?.id ?? this.selectedRole.id;
+                }
             },
             error: () => { },
         });
@@ -36511,8 +36538,17 @@ class ClaimProcessComponent {
             return;
         this.claimService.getUserRoles(this.userId).subscribe({
             next: (data) => {
-                if (!data?.length)
+                if (!data?.length) {
+                    // No roles saved in the system — fall back to the pre-assigned type
+                    // that was passed via query param and persisted in localStorage
+                    const savedType = localStorage.getItem(ClaimProcessComponent.ROLE_TYPE_KEY);
+                    if (savedType) {
+                        this.applyParamType(Number(savedType));
+                    }
                     return;
+                }
+                // User already has roles — the localStorage type is no longer needed
+                localStorage.removeItem(ClaimProcessComponent.ROLE_TYPE_KEY);
                 const BUSINESS = ['Provider', 'Contractor', 'InsuranceAgency', 'RealEstateCompany'];
                 const ZERO_GUID = '00000000-0000-0000-0000-000000000000';
                 const viewValues = this.userViewRoles.map(r => r.value);
@@ -36545,12 +36581,40 @@ class ClaimProcessComponent {
                     }
                 }
             },
-            error: () => { },
+            error: () => {
+                // On error, still try localStorage so the pre-assigned role shows
+                const savedType = localStorage.getItem(ClaimProcessComponent.ROLE_TYPE_KEY);
+                if (savedType) {
+                    this.applyParamType(Number(savedType));
+                }
+            },
         });
     }
-    /** Handle role card click — no-op when role is locked after initial setup */
+    /** Auto-select a role by its numeric type (from query param / localStorage). */
+    applyParamType(type) {
+        const match = this.userViewRoles.find(r => r.type === type);
+        if (!match)
+            return;
+        const BUSINESS = ['Provider', 'Contractor', 'InsuranceAgency', 'RealEstateCompany'];
+        this.lockedToTypeFromParam = true;
+        this.selectedRoleValue = match.value;
+        this.isBusiness = BUSINESS.includes(match.value);
+        this.userViewRoles = this.userViewRoles.map(r => ({ ...r, selected: r.value === match.value }));
+        this.selectedRole = this.userViewRoles.find(r => r.selected) ?? null;
+        // Wire role IDs if getRoles() has already returned (otherwise getRoles() will do it)
+        if (this.userRoles.length && this.selectedRole) {
+            const isBiz = BUSINESS.includes(match.value);
+            const userRoleName = isBiz ? match.value + 'User' : match.value;
+            const companyRole = this.userRoles.find((r) => r.name === userRoleName);
+            const providerRole = this.userRoles.find((r) => r.name === match.value);
+            this.selectedRole.roleId = companyRole?.id ?? this.selectedRole.roleId;
+            this.selectedRole.id = providerRole?.id ?? this.selectedRole.id;
+        }
+        this.updateBusinessValidators();
+    }
+    /** Handle role card click — no-op when role is locked after initial setup or pre-assigned via param */
     selectedUserRole(role) {
-        if (this.isInitialSetupCompleted)
+        if (this.isInitialSetupCompleted || this.lockedToTypeFromParam)
             return;
         const BUSINESS = ['Provider', 'Contractor', 'InsuranceAgency', 'RealEstateCompany'];
         this.selectedRoleValue = role.value;
@@ -36827,10 +36891,15 @@ class ClaimProcessComponent {
     }
     /** ref: initial-process saveBusiness — create provider first, then saveFinal */
     async saveBusiness() {
-        // Upload logo
+        const ZERO_GUID = '00000000-0000-0000-0000-000000000000';
+        const existingProviderId = Array.isArray(this.assignProviderRoleModel?.providerId)
+            ? this.assignProviderRoleModel.providerId[0]
+            : this.assignProviderRoleModel?.providerId;
+        const isUpdate = !!(existingProviderId && existingProviderId !== ZERO_GUID);
+        // Upload logo (use existing id for path when updating)
         if (this.businessLogoFile) {
             this.uploadStatus = 'Uploading company logo…';
-            const lid = this.assignProviderRoleModel?.providerId || this.claimService.generateGuid();
+            const lid = existingProviderId || this.claimService.generateGuid();
             const result = await this.claimService.uploadFile(this.businessLogoFile, `Provider/${lid}/Profile/`);
             if (result) {
                 this.logo.logoId = result.fileId;
@@ -36839,25 +36908,42 @@ class ClaimProcessComponent {
                 this.logoPreviewUrl = this.getAssetUrl(result.publicUrl);
             }
         }
-        this.uploadStatus = 'Creating business profile…';
         const providerPayload = this.bindProviderDetails();
         try {
-            const data = await firstValueFrom(this.claimService.createProvider(providerPayload));
+            let data;
+            if (isUpdate) {
+                // Provider already exists — update it
+                this.uploadStatus = 'Updating business profile…';
+                providerPayload.id = existingProviderId;
+                providerPayload.providerId = existingProviderId;
+                data = await firstValueFrom(this.claimService.updateProvider(providerPayload));
+            }
+            else {
+                // No existing provider — create a new one
+                this.uploadStatus = 'Creating business profile…';
+                data = await firstValueFrom(this.claimService.createProvider(providerPayload));
+            }
             if (data?.failed) {
-                this.providerError = data?.failures?.[0]?.message || data?.message || 'Failed to create business profile.';
+                this.providerError = data?.failures?.[0]?.message || data?.message ||
+                    (isUpdate ? 'Failed to update business profile.' : 'Failed to create business profile.');
                 this.isSubmitting = false;
                 this.uploadStatus = '';
                 return;
             }
-            const newProviderId = Array.isArray(data?.value) ? data.value[0] : data?.value;
-            if (newProviderId) {
-                this.assignProviderRoleModel.providerId = newProviderId;
-                this.assignProviderRoleModel.providerName = providerPayload.providerName;
+            // On create the API returns the new providerId; on update keep the existing one
+            if (!isUpdate) {
+                const newProviderId = Array.isArray(data?.value) ? data.value[0] : data?.value;
+                if (newProviderId) {
+                    this.assignProviderRoleModel.providerId = newProviderId;
+                    this.assignProviderRoleModel.providerName = providerPayload.providerName;
+                }
             }
             await this.saveFinal();
         }
         catch {
-            this.providerError = 'Failed to create business profile. Please try again.';
+            this.providerError = isUpdate
+                ? 'Failed to update business profile. Please try again.'
+                : 'Failed to create business profile. Please try again.';
             this.isSubmitting = false;
             this.uploadStatus = '';
         }
@@ -37044,11 +37130,11 @@ class ClaimProcessComponent {
     }
     ngOnDestroy() { this.stopOtpTimer(); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ClaimProcessComponent, deps: [{ token: i8.FormBuilder }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: ClaimProcessService }, { token: i7.BsModalService }, { token: i1$2.TokenService }, { token: i1$2.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</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-logo-wrap\">\n      <svg class=\"cp-brand-logo-svg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 107.928 95.043\">\n        <path\n          d=\"M16.62,76.812a88.959,88.959,0,0,0,12.033-2.091,36.373,36.373,0,0,0,51.459.182h.031a87.176,87.176,0,0,0,11.714,1.91,47.928,47.928,0,0,1-75.237,0ZM.587,71.759c-1.441-3.048.553-7.467,5.2-12.463a.355.355,0,0,1,.487-.116.352.352,0,0,1,.12.485,4.269,4.269,0,0,0-.606,4.026c1.949,4.351,14.87,2.857,31.617-2.9a.783.783,0,0,1,.748,0c2.495,1.358,5.061,2.463,7.639,3.659l-.011-.017a16.755,16.755,0,0,1,2.258,1.1.963.963,0,0,1,0,1.794c-14.543,5.53-27.565,8.5-36.349,8.5C5.846,75.837,1.875,74.519.587,71.759Zm46.34-9.989C17.443,48.164-3.376,30.437.454,22.289c1.374-3.064,6.021-4.351,12.993-4.051a.346.346,0,1,1,0,.686,4.661,4.661,0,0,0-3.465,2.163C7.264,26.919,25.549,41.126,51.107,52.859s48.423,16.61,51.117,10.766a4.685,4.685,0,0,0-.606-4.029.5.5,0,0,1,0-.091.376.376,0,0,1,.37-.369.4.4,0,0,1,.248.091l-.011.011c4.625,5,6.644,9.349,5.111,12.408-1.319,2.793-5.309,4.119-11.163,4.119C84.8,75.764,66.395,70.755,46.927,61.77Zm-36.89,2.868a49.831,49.831,0,0,1-3-16.968,51.991,51.991,0,0,1,.812-8.955A98.753,98.753,0,0,0,17.941,46.8a4.375,4.375,0,0,0-.019.606,40.584,40.584,0,0,0,3.432,16.431,35.288,35.288,0,0,1-8.129.949Q11.63,64.783,10.037,64.639Zm77.4-.712a40.586,40.586,0,0,0,3.27-16.24V46.259a97.668,97.668,0,0,0,10.062-8.2,51.439,51.439,0,0,1,.859,9.377A49.608,49.608,0,0,1,98.587,64.49a30.815,30.815,0,0,1-11.148-.563Zm-.006,0h.006l-.006.015ZM69.57,57.2C66.316,56,63,54.735,59.6,53.314a.924.924,0,0,1,0-1.662c24-11.51,40.992-24.91,38.339-30.5a4.369,4.369,0,0,0-3.46-2.163.346.346,0,1,1,0-.692c6.855-.3,11.544.986,12.984,4.051C110.926,29.575,94.779,44.4,70.4,57.2a1.139,1.139,0,0,1-.416.079A1.156,1.156,0,0,1,69.57,57.2ZM12.343,25.331A46.369,46.369,0,0,1,54.463.008,45.874,45.874,0,0,1,96.1,24.643a33.823,33.823,0,0,1-8.04,8.264A35.874,35.874,0,0,0,54.208,9.589,35.431,35.431,0,0,0,20.38,33.259,39.308,39.308,0,0,1,12.343,25.331Z\" />\n      </svg>\n      <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-brand-logo-text\">\n        {{ privacyAndTerms?.companyName }}\n      </span>\n    </div>\n\n    <div class=\"cp-brand-hero\">\n      <span class=\"cp-brand-eyebrow\">Claim Your Account</span>\n      <p class=\"cp-brand-intro\">\n        Your account is ready. Complete this short form to set your credentials and unlock full 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>The email <strong>{{ userEmail }}</strong> isn't linked to an existing account. Please check your invitation\n          link or contact support.</p>\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\">\n\n      <!-- Logo -->\n      <div class=\"cp-logo\">\n        <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\"\n          [alt]=\"privacyAndTerms?.companyName || 'Company Logo'\" class=\"cp-logo-img\" />\n        <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-logo-fallback\">{{ privacyAndTerms?.companyName }}</span>\n      </div>\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' }}</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      <!-- Sign out -->\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-sb-signout\" (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\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    </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            <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\" 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\" 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</div>\n                  </div>\n                </div>\n\n                <div class=\"cp-field\">\n                  <label for=\"industries\">Industries</label>\n                  <ng-select id=\"industries\" formControlName=\"industries\" [items]=\"industries\" bindLabel=\"industryName\"\n                    bindValue=\"id\" [multiple]=\"true\" [loading]=\"isIndustriesLoading\"\n                    placeholder=\"Select industries (optional)\">\n                  </ng-select>\n                </div>\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>\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\">*</span>\n                <span *ngIf=\"isInitialSetupCompleted\" style=\"font-weight:400;color:#6b7c8a;font-size:11px;margin-left:4px;\">(locked after initial setup)</span>\n              </label>\n              <div class=\"cp-role-cards\" [class.cp-role-cards--locked]=\"isInitialSetupCompleted\">\n                <div *ngFor=\"let role of userViewRoles\" class=\"cp-role-card\"\n                  [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'\"\n                  [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\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" /></svg>\n                    </span>\n                  </div>\n                  <span class=\"cp-role-card__name\">{{ role.name }}</span>\n                </div>\n              </div>\n              <div class=\"cp-role-locked-notice\" *ngIf=\"isInitialSetupCompleted && sectionRoleDone\">\n                <svg viewBox=\"0 0 24 24\"><path d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\" /></svg>\n                Role is locked. Contact support to change it.\n              </div>\n              <div class=\"cp-error\" *ngIf=\"!sectionRoleDone && validatePage === 1 && !isInitialSetupCompleted\">Please select a role</div>\n            </div>\n\n            <ng-container *ngIf=\"!isLoadingUser\" [formGroup]=\"userForm\">\n\n              <!-- New user: optional password toggle -->\n              <div class=\"cp-toggle-row\" *ngIf=\"!userHasExistingDetails\">\n                <div class=\"cp-toggle-row__info\">\n                  <span class=\"cp-toggle-row__label\">Set Password <em>(Optional)</em></span>\n                  <span class=\"cp-toggle-row__hint\">Leave off to use existing credentials</span>\n                </div>\n                <label class=\"cp-toggle-switch\">\n                  <input type=\"checkbox\" [checked]=\"setPasswordEnabled\" (change)=\"toggleSetPassword()\">\n                  <span class=\"cp-toggle-knob\"></span>\n                </label>\n              </div>\n\n              <div class=\"cp-row\" *ngIf=\"!userHasExistingDetails && setPasswordEnabled\">\n                <div class=\"cp-field\">\n                  <label for=\"password\">Password</label>\n                  <div class=\"cp-pw-wrap\">\n                    <input [type]=\"showPassword ? 'text' : 'password'\" id=\"password\" 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 class=\"cp-error\" *ngIf=\"u['password'].errors?.['minlength'] && u['password'].touched\">Min. 8\n                    characters</div>\n                </div>\n                <div class=\"cp-field\">\n                  <label for=\"confirmPassword\">Confirm Password</label>\n                  <div class=\"cp-pw-wrap\">\n                    <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPassword\"\n                      formControlName=\"confirmPassword\" placeholder=\"Repeat password\"\n                      [class.is-invalid]=\"userForm.errors?.['passwordMismatch'] && u['confirmPassword'].touched\"\n                      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 class=\"cp-error\" *ngIf=\"userForm.errors?.['passwordMismatch'] && u['confirmPassword'].touched\">\n                    Passwords do not match</div>\n                </div>\n              </div>\n\n              <!-- Existing user: reset toggle -->\n              <div class=\"cp-toggle-row\" *ngIf=\"userHasExistingDetails\">\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=\"userHasExistingDetails && 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\">\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>\n\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\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 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>\n\n                <div class=\"cp-row\">\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 class=\"cp-field\">\n                    <label for=\"bizCounty\">County</label>\n                    <input type=\"text\" id=\"bizCounty\" formControlName=\"county\" placeholder=\"Orange County\" />\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:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-brand-left{position:static;height:auto;width:100%;min-width:unset;padding:32px 24px 28px;border-right:none;border-bottom:1px solid #e2eaf2}}.cp-brand-logo-wrap{margin-bottom:10px}.cp-brand-logo-img{max-height:48px;max-width:200px;object-fit:contain;display:block}.cp-brand-logo-svg{display:block;height:48px;width:auto;max-width:200px;fill:#4077ad}.cp-brand-logo-text{font-size:20px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-brand-hero{margin-bottom:15px}.cp-brand-eyebrow{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.16);border-radius:99px;padding:3px 10px;margin-bottom:16px}.cp-brand-heading{font-size:26px;font-weight:800;color:#0c1620;line-height:1.22;letter-spacing:-.4px;margin:0 0 14px}@media (max-width: 860px){.cp-brand-heading{font-size:21px}}.cp-brand-intro{font-size:13.5px;color:#6b7c8a;line-height:1.78;margin:0}.cp-brand-features{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;gap:6px}.cp-brand-feature{display:flex;align-items:flex-start;gap:13px;padding:13px 15px;border-radius:9px;background:#f8fafc;border:1px solid #e8edf3;transition:border-color .18s,background .18s}.cp-brand-feature:hover{background:#4077ad08;border-color:#4077ad38}.cp-brand-feature__icon{width:34px;height:34px;flex-shrink:0;border-radius:8px;background:#4077ad14;display:flex;align-items:center;justify-content:center}.cp-brand-feature__icon svg{width:17px;height:17px}.cp-brand-feature__icon svg path{fill:#4077ad}.cp-brand-feature__body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.cp-brand-feature__body strong{font-size:12.5px;font-weight:700;color:#0c1620;line-height:1.2}.cp-brand-feature__body span{font-size:11.5px;color:#6b7c8a;line-height:1.62}.cp-brand-contact{display:flex;flex-direction:column;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid #e8edf3}.cp-brand-contact__link{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-brand-contact__link svg{width:14px;height:14px;flex-shrink:0}.cp-brand-contact__link svg path{fill:currentColor}.cp-brand-contact__link:hover{color:#4077ad}.cp-brand-contact__link--website{font-weight:600;color:#4077ad}.cp-brand-contact__link--website:hover{color:#335f8a}.cp-brand-contact__ext{width:11px!important;height:11px!important;opacity:.65}.cp-brand-right{flex:1;background:#eef1f4;display:flex;align-items:center;justify-content:center;padding:40px 28px;min-width:0}@media (max-width: 860px){.cp-brand-right{padding:28px 20px 48px}}.cp-brand-state{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center}.cp-brand-state .cp-invalid-card,.cp-brand-state .cp-anf-card{width:100%}.cp-left{width:40%;min-width:300px;background:#fff;border-right:1px solid #e2eaf2;display:flex;flex-direction:column;padding:44px 40px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-left{display:none}}.cp-left-inner{display:flex;flex-direction:column;height:100%;gap:0}.cp-logo{margin-bottom:24px}.cp-logo-img{max-height:44px;max-width:180px;object-fit:contain;display:block}.cp-logo-fallback{font-size:18px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-sb-user{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:6px;background:#4077ad0d;border:1px solid rgba(64,119,173,.12);margin-bottom:20px}.cp-sb-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:#4077ad;display:flex;align-items:center;justify-content:center;overflow:hidden}.cp-sb-avatar__img{width:100%;height:100%;object-fit:cover}.cp-sb-avatar__initials{font-size:15px;font-weight:700;color:#fff;text-transform:uppercase}.cp-sb-user__info{display:flex;flex-direction:column;gap:2px;min-width:0}.cp-sb-user__info strong{font-size:13px;font-weight:700;color:#0c1620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-user__info span{font-size:11px;color:#6b7c8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-signout{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;margin-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:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#4077ad;margin-bottom:6px}.cp-sb-intro{font-size:12px;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:10.5px;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:11.5px;font-weight:700;color:#0c1620}.cp-sb-feature div span{font-size:11px;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:12.5px;font-weight:700;color:#0c1620;line-height:1}.cp-step__sub{font-size:11px;color:#6b7c8a;line-height:1.4}.cp-step__badge{width:20px;height:20px;border-radius:50%;flex-shrink:0;margin-top:7px;background:#d3dce3;display:flex;align-items:center;justify-content:center;transition:background .2s}.cp-step__badge svg{width:12px;height:12px}.cp-step__badge svg path{fill:#fff}.cp-step__badge span{font-size:10px;font-weight:700;color:#6b7c8a}.cp-step__badge--done{background:#28a745}.cp-step__badge--done span{display:none}.cp-step--done .cp-step__icon{background:#4077ad14;border-color:#4077ad}.cp-step--done .cp-step__icon svg path{fill:#4077ad}.cp-step--done .cp-step__label{color:#4077ad}.cp-left-contact{display:flex;flex-direction:column;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid #e8edf3}.cp-contact-link{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-contact-link svg{width:14px;height:14px;flex-shrink:0}.cp-contact-link svg path{fill:currentColor}.cp-contact-link:hover{color:#4077ad}.cp-left-footnote{margin-top:18px;font-size:12.5px}.cp-left-footnote a{display:inline-flex;align-items:center;gap:5px;color:#4077ad;text-decoration:none;font-weight:600;transition:color .15s}.cp-left-footnote a svg{width:12px;height:12px}.cp-left-footnote a svg path{fill:#4077ad}.cp-left-footnote a:hover{color:#335f8a;text-decoration:underline}.cp-mobile-bar{display:none;align-items:center;justify-content:space-between;padding:14px 20px;background:#fff;border-bottom:1px solid #e2eaf2}@media (max-width: 860px){.cp-mobile-bar{display:flex}}.cp-mobile-logo{max-height:36px;max-width:160px;object-fit:contain}.cp-mobile-company{font-size:18px;font-weight:800;color:#4077ad}.cp-right{flex:1;background:#f0f4f8;display:flex;flex-direction:column;align-items:center;padding:0 0 64px;overflow-y:auto;min-width:0}@media (max-width: 860px){.cp-right{padding:0 0 48px}}.cp-invalid-page,.cp-success-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#eef1f4;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;padding:24px}.cp-invalid-card,.cp-success-card{background:#fff;border-radius:12px;box-shadow:0 4px 6px -1px #00000012,0 16px 40px -4px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-invalid-card h2,.cp-success-card h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-invalid-card p,.cp-success-card p{font-size:14px;color:#6b7c8a;line-height:1.7;margin-bottom:28px}.cp-invalid-icon,.cp-success-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-invalid-icon svg,.cp-success-icon svg{width:32px;height:32px}.cp-invalid-icon{background:#dc35451a}.cp-invalid-icon svg path{fill:#dc3545}.cp-invalid-icon--warn{background:#f59e0b1a}.cp-invalid-icon--warn svg path{fill:#f59e0b}.cp-success-icon{background:#28a7451a}.cp-success-icon svg path{fill:#28a745}.cp-anf-hint{font-size:13px;color:#6b7280;margin-top:4px}.cp-form-wrap{width:100%;flex:1;display:flex;flex-direction:column;gap:0;padding-bottom:32px}.cp-banner{width:100%;display:flex;align-items:center;gap:20px;padding:20px 32px;background:linear-gradient(135deg,#4077ad,#2f5880);border-bottom:1px solid rgba(0,0,0,.12);position:sticky;top:0;z-index:10;flex-shrink:0}@media (max-width: 860px){.cp-banner{padding:16px 20px;position:static}}@media (max-width: 480px){.cp-banner{padding:14px 16px;gap:12px}}.cp-banner__avatar{position:relative;flex-shrink:0;width:60px;height:60px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);overflow:hidden;background:#ffffff26}@media (max-width: 480px){.cp-banner__avatar{width:46px;height:46px}}.cp-banner__img{width:100%;height:100%;object-fit:cover;display:block}.cp-banner__initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#ffffffe6;text-transform:uppercase;letter-spacing:-.5px}@media (max-width: 480px){.cp-banner__initials{font-size:16px}}.cp-banner__info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.cp-banner__name{font-size:17px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}@media (max-width: 480px){.cp-banner__name{font-size:14px}}.cp-banner__meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.cp-banner__email{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#fffc;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-banner__email svg{width:11px;height:11px}.cp-banner__email svg path{fill:#fffc}.cp-banner__badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:3px 8px;border-radius:99px;background:#fff3;color:#ffffffe6}.cp-banner__badge--update{background:#28a7454d;color:#a8f5c0}.cp-banner__loading{display:flex;align-items:center;gap:6px;font-size:11px;color:#ffffffb3;margin-top:2px}.cp-banner__loading .cp-spinner--sm{border-color:#fff6;border-top-color:#fff}.cp-logout-btn--banner{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;background:#ffffff1f;border:1px solid rgba(255,255,255,.25);color:#ffffffe6;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0}.cp-logout-btn--banner svg{width:15px;height:15px}.cp-logout-btn--banner svg path{fill:#ffffffe6}.cp-logout-btn--banner:hover{background:#dc3545bf;border-color:transparent;color:#fff}.cp-logout-btn--banner:hover svg path{fill:#fff}@media (max-width: 480px){.cp-logout-btn--banner{padding:7px 10px;font-size:11px}}.cp-alert{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:6px;margin:20px 24px 0;background:#dc35450f;border:1px solid rgba(220,53,69,.18);font-size:13px;color:#c0392b}.cp-alert svg path{fill:#c0392b}.cp-card{background:#fff;border:1px solid #e2eaf2;margin:16px 24px 0;border-radius:10px;overflow: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:13.5px;font-weight:700;color:#0c1620;margin:0 0 2px;line-height:1}.cp-card__sub{font-size:11px;color:#6b7c8a;margin:0;line-height:1}.cp-card__status{margin-left:auto;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#eef1f4;border:1.5px solid #d3dce3;display:flex;align-items:center;justify-content:center;transition:all .2s}.cp-card__status svg{width:14px;height:14px}.cp-card__status svg path{fill:#6b7c8a}.cp-card__status span{font-size:12px;font-weight:700;color:#6b7c8a}.cp-card__status--done{background:#28a745;border-color:#28a745}.cp-card__status--done svg path{fill:#fff}.cp-card__body{padding:20px 24px 16px}@media (max-width: 480px){.cp-card__body{padding:16px 16px 12px}}.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.cp-row.cp-row-triple,.cp-row.cp-row--3{grid-template-columns:1fr 1fr 1fr}.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:11.5px;font-weight:600;color:#3a4a57}.cp-field label .req{color:#4077ad;margin-left:2px}.cp-field input,.cp-field select{box-sizing:border-box;height:42px;border:1.5px solid #d3dce3;border-radius:6px;padding:0 12px;font-size:13.5px;color:#0c1620;background:#fff;width:100%;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;font-family:inherit}.cp-field input::placeholder,.cp-field select::placeholder{color:#aab8c2}.cp-field input:focus,.cp-field select:focus{outline:none;border-color:#4077ad;box-shadow:0 0 0 3px #4077ad26}.cp-field input.is-invalid,.cp-field select.is-invalid{border-color:#dc3545}.cp-field input.is-invalid:focus,.cp-field select.is-invalid:focus{box-shadow:0 0 0 3px #dc354526}.cp-select{position:relative}.cp-select:after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #6b7c8a;pointer-events:none}.cp-select select{cursor:pointer;padding-right:32px}.cp-pw-wrap{position:relative}.cp-pw-wrap input{padding-right:42px}.cp-pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;color:#6b7c8a}.cp-pw-toggle svg{width:18px;height:18px}.cp-pw-toggle svg path{fill:#6b7c8a}.cp-pw-toggle:hover svg path{fill:#4077ad}.cp-pw-success{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#16a34a;margin:4px 0 10px}.cp-pw-success svg path{fill:#16a34a}.cp-readonly-wrap{position:relative;display:flex;align-items:center}.cp-readonly-wrap svg{position:absolute;left:12px;width:15px;height:15px;flex-shrink:0;pointer-events:none}.cp-readonly-wrap svg path{fill:#4077ad}.cp-input-readonly{width:100%;box-sizing:border-box;height:42px;border:1.5px solid #d3dce3;border-radius:6px;padding:0 12px 0 36px;font-size:13.5px;color:#0c1620;background:#4077ad0a;cursor:default;font-family:inherit;font-weight:500}.cp-autofill-note{font-size:11px;color:#4077ad;margin-top:3px;display:flex;align-items:center;gap:4px}.cp-email-display{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 12px;background:#eef1f4;border:1.5px solid #d3dce3;border-radius:99px;font-size:12.5px;color:#0c1620;font-weight:500}.cp-email-display svg{width:14px;height:14px;flex-shrink:0}.cp-email-display svg path{fill:#4077ad}.cp-error{font-size:11.5px;color:#dc3545;margin-top:2px}.cp-terms-error{margin-top:4px}.cp-submit-error{margin-bottom:12px;font-size:13px;text-align:center}.cp-loading-hint{display:flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;margin-top:4px}.cp-new-user-hint{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#4077ad;background:#4077ad0f;border:1px solid rgba(64,119,173,.18);border-radius:6px;padding:9px 13px;margin:6px 0 12px}.cp-new-user-hint svg{width:15px;height:15px;flex-shrink:0}.cp-new-user-hint svg path{fill:#4077ad}.cp-agreements{display:flex;flex-direction:column;gap:10px;margin:24px 0 4px}.v1-agreement-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;border:1.5px solid #d3dce3;background:#fff;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #0000000a}.v1-agreement-card:hover{border-color:#bac8d3;box-shadow:0 2px 8px #00000012}.v1-agreement-card.v1-card--agreed{border-color:#b8d4ef;background:#ebf3fb}.v1-agreement-card.v1-card--invalid{border-color:#fecaca;background:#fff5f5}.v1-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#eef1f4;border:1px solid #d3dce3;display:flex;align-items:center;justify-content:center;color:#4077ad}.v1-card--agreed .v1-card-icon{background:#d4e8f8;border-color:#b8d4ef}.v1-card-body{flex:1 1 auto;min-width:0}.v1-card-title{font-size:13px;font-weight:600;color:#0c1620;margin:0 0 2px;line-height:1.3}.v1-card-sub{font-size:11.5px;color:#6b7c8a;margin:0}.v1-agree-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:8px;font-size:12px;font-weight:600;font-family:inherit;border:1.5px solid #4077AD;color:#4077ad;background:transparent;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}.v1-agree-btn:hover{background:#4077ad;color:#fff}.v1-agree-btn.v1-agree-btn--done{background:#4077ad;border-color:#4077ad;color:#fff}.cp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;margin-top:10px;background:#4077ad;border:none;border-radius:6px;font-size:13.5px;font-weight:700;letter-spacing:.3px;color:#fff;cursor:pointer;text-decoration:none;transition:background .15s,box-shadow .15s,transform .1s;font-family:inherit}.cp-btn:hover:not(:disabled){background:#335f8a;box-shadow:0 4px 12px #4077ad59}.cp-btn:active:not(:disabled){transform:scale(.99)}.cp-btn:disabled{opacity:.6;cursor:not-allowed}.cp-btn--submit{height:52px;font-size:15px;letter-spacing:.5px;background:linear-gradient(135deg,#4077ad,#335f8a);box-shadow:0 2px 8px #4077ad40;border-radius:8px;margin-top:0}.cp-btn--submit:hover:not(:disabled){box-shadow:0 6px 18px #4077ad66;filter:brightness(1.05)}.cp-btn--outline{background:#fff;color:#4077ad;border:1.5px solid #4077AD}.cp-btn--outline:hover:not(:disabled){background:#4077ad0d;box-shadow:none}.cp-btn--ghost{background:transparent;color:#6b7c8a;border:1.5px solid #d3dce3}.cp-btn--ghost:hover:not(:disabled){border-color:#4077ad;color:#4077ad;box-shadow:none}.cp-btn--sm{height:38px;font-size:12.5px}.cp-btn-link{background:none;border:none;font-family:inherit;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;margin-top:8px;padding:6px 0;text-decoration:underline}.cp-btn-link:hover{color:#4077ad}.cp-spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:cp-spin .7s linear infinite}.cp-spinner:not(.cp-spinner-btn){border-color:#4077ad4d;border-top-color:#4077ad}.cp-spinner--sm{width:11px;height:11px;border-color:#4077ad4d;border-top-color:#4077ad}@keyframes cp-spin{to{transform:rotate(360deg)}}.cp-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:14px;background:#f8fafc;border:1px solid #e2eaf2;border-radius:6px}.cp-toggle-row__info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.cp-toggle-row__label{font-size:13px;font-weight:600;color:#0c1620}.cp-toggle-row__label em{font-style:normal;font-size:11px;font-weight:500;color:#6b7c8a;margin-left:4px}.cp-toggle-row__hint{font-size:11px;color:#6b7c8a}.cp-toggle-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;cursor:pointer}.cp-toggle-switch input{opacity:0;width:0;height:0;position:absolute}.cp-toggle-switch input:checked+.cp-toggle-knob{background:#4077ad}.cp-toggle-switch input:checked+.cp-toggle-knob:before{transform:translate(18px)}.cp-toggle-knob{position:absolute;inset:0;background:#c8d5e0;border-radius:24px;transition:background .2s;cursor:pointer}.cp-toggle-knob:before{content:\"\";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .22s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0003}.cp-otp-wrap{margin-top:4px}.cp-otp-hint{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#6b7c8a;margin:0 0 12px}.cp-otp-hint svg path{fill:#6b7c8a}.cp-otp-hint strong{color:#0c1620}.cp-otp-timer{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.18);border-radius:99px;padding:4px 12px;margin-bottom:14px}.cp-otp-timer svg path{fill:#4077ad}.cp-otp-timer--expired{color:#dc3545;background:#dc354512;border-color:#dc354533}.cp-otp-timer--expired svg path{fill:#dc3545}.cp-otp-input{letter-spacing:.15em;font-size:16px;font-weight:600}.cp-otp-actions{display:flex;flex-direction:column;gap:0;margin-top:4px}.cp-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-form-footer{margin:16px 24px 0;background:#fff;border:1px solid #e2eaf2;border-radius:10px;padding:20px 24px;box-shadow:0 1px 3px #0000000a}@media (max-width: 860px){.cp-form-footer{margin:12px 16px 0}}@media (max-width: 480px){.cp-form-footer{margin:10px 12px 0;padding:16px;border-radius:8px}}.cp-terms{margin:0 0 16px}.cp-terms__label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:12.5px;color:#6b7c8a;line-height:1.7;margin:0}.cp-terms__label a{color:#4077ad;text-decoration:underline;font-weight:600}.cp-terms__label a:hover{color:#335f8a}.cp-terms__check{position:absolute;opacity:0;width:0;height:0}.cp-terms__box{width:17px;height:17px;flex-shrink:0;margin-top:2px;border:2px solid #d3dce3;border-radius:4px;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}.cp-terms__check:checked~.cp-terms__box{background:#4077ad;border-color:#4077ad}.cp-upload-area{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:120px;border:2px dashed #d3dce3;border-radius:6px;background:#eef1f4;cursor:pointer;transition:border-color .15s,background .15s;overflow:hidden}.cp-upload-area:hover{border-color:#4077ad;background:#4077ad08}.cp-upload-hidden{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.cp-upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px;text-align:center;pointer-events:none}.cp-upload-placeholder svg{width:32px;height:32px;opacity:.5}.cp-upload-placeholder svg path{fill:#6b7c8a}.cp-upload-placeholder span{font-size:12.5px;font-weight:600;color:#6b7c8a}.cp-upload-placeholder small{font-size:11px;color:#95a2ad}.cp-upload-preview{width:100%;object-fit:cover;display:block}.cp-upload-preview--avatar{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 8px #0000001f;margin:14px auto 0}.cp-upload-preview--logo{max-width:180px;max-height:80px;width:auto;height:auto;object-fit:contain;margin:14px auto 0}.cp-upload-change{font-size:11px;font-weight:600;color:#4077ad;margin-bottom:10px;pointer-events:none}.tc-modal-dialog{max-width:min(780px,96vw)}.tc-modal{border-radius:20px!important;border:none!important;overflow:hidden;box-shadow:0 32px 72px #00000038,0 6px 20px #0000001a!important;height:min(720px,90vh);display:flex;flex-direction:column}.tc-modal-header{display:flex;align-items:center;gap:13px;padding:20px 24px;background:#4077ad;border-bottom:none;flex-shrink:0}.tc-modal-header .tc-header-icon{width:38px;height:38px;background:#ffffff1f;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#93c5fd;flex-shrink:0}.tc-modal-header .tc-modal-title{font-size:16px;font-weight:700;color:#fff;margin:0;flex:1}.tc-modal-close{flex-shrink:0;background:#ffffff1f;border:none;border-radius:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#fffc;cursor:pointer;transition:background .15s,color .15s}.tc-modal-close:hover{background:#ffffff38;color:#fff}.tc-modal-body{flex:1 1 auto;overflow-y:auto;padding:26px 32px;background:#fff;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.tc-modal-body::-webkit-scrollbar{width:5px}.tc-modal-body::-webkit-scrollbar-track{background:transparent}.tc-modal-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}.tc-modal-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tc-modal-footer{display:flex;justify-content:flex-end;align-items:center;padding:14px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.tc-btn{font-size:13.5px;font-weight:600;font-family:inherit;padding:9px 24px;border-radius:10px;border:none;cursor:pointer;transition:background .15s ease}.tc-btn.tc-btn-close{background:#4077ad;color:#fff}.tc-btn.tc-btn-close:hover{background:#335f8a}.cp-logout-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;border:1.5px solid #e2eaf2;background:#fff;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0}.cp-logout-btn svg{width:16px;height:16px}.cp-logout-btn svg path{fill:#6b7c8a}.cp-logout-btn:hover{border-color:#dc3545;color:#dc3545}.cp-logout-btn:hover svg path{fill:#dc3545}.cp-logout-btn--mobile{margin-left:auto}.cp-biz-layout{display:grid;grid-template-columns:1fr 160px;gap:20px;align-items:start}@media (max-width: 640px){.cp-biz-layout{grid-template-columns:1fr}}.cp-biz-fields{display:flex;flex-direction:column}.cp-biz-logo{display:flex;flex-direction:column;gap:8px}.cp-biz-logo__label{font-size:11.5px;font-weight:600;color:#3a4a57}.cp-biz-logo__area{border:2px dashed #d3dce3;border-radius:6px;background:#f8fafc;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:140px;padding:12px;text-align:center;transition:border-color .15s}.cp-biz-logo__area:hover{border-color:#4077ad}.cp-biz-logo__img{width:100%;max-height:100px;object-fit:contain;border-radius:4px}.cp-biz-logo__change{font-size:11px;color:#6b7c8a;margin-top:6px;display:block}.cp-biz-logo__placeholder{display:flex;flex-direction:column;align-items:center;gap:6px}.cp-biz-logo__placeholder svg{width:28px;height:28px}.cp-biz-logo__placeholder svg path{fill:#aab8c2}.cp-biz-logo__placeholder span{font-size:11.5px;font-weight:600;color:#6b7c8a}.cp-biz-logo__placeholder small{font-size:10px;color:#aab8c2}.cp-profile-logo-area{border-radius:50%!important;min-height:140px!important;width:140px!important;height:140px!important;margin:0 auto;overflow:hidden;padding:0!important;position:relative}.cp-profile-logo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.cp-profile-logo-area .cp-biz-logo__change{position:absolute;bottom:0;left:0;right:0;background:#0000007a;color:#fff!important;padding:7px 0 5px;text-align:center;font-size:10.5px;font-weight:600;margin-top:0!important;opacity:0;transition:opacity .18s}.cp-profile-logo-area:hover .cp-biz-logo__change{opacity:1}.cp-lookup-loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:48px 44px!important}.cp-lookup-loading p{font-size:14px;color:#6b7c8a;margin:0}.cp-lookup-spinner{width:32px;height:32px;border:3px solid rgba(64,119,173,.2);border-top-color:#4077ad}.cp-anf-card{width:100%;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 6px -1px #00000012,0 16px 40px -4px #0c16201f;border:1px solid #e2eaf2}.cp-anf-card__header{display:flex;align-items:center;gap:16px;padding:28px 28px 20px;border-bottom:1px solid #f0f4f8}.cp-anf-card__identity{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.cp-anf-card__name{font-size:18px;font-weight:800;color:#0c1620;margin:0;line-height:1.2}.cp-anf-card__email{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#6b7c8a}.cp-anf-card__email svg{width:12px;height:12px}.cp-anf-card__email svg path{fill:#6b7c8a}.cp-anf-card__details{padding:16px 28px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid #f0f4f8}.cp-anf-card__notice{display:flex;align-items:center;gap:10px;padding:14px 28px;background:#4077ad0a;border-bottom:1px solid #f0f4f8;font-size:13px;color:#4077ad;font-weight:600}.cp-anf-card__notice svg{width:18px;height:18px;flex-shrink:0}.cp-anf-card__notice svg path{fill:#4077ad}.cp-anf-avatar{width:60px;height:60px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#4077ad,#335f8a);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:-.5px}.cp-anf-roles{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}.cp-anf-role{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;padding:3px 8px;border-radius:99px;background:#4077ad14;color:#4077ad;border:1px solid rgba(64,119,173,.18)}.cp-anf-detail{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:#6b7c8a;line-height:1.5}.cp-anf-detail svg{width:14px;height:14px;flex-shrink:0;margin-top:1px}.cp-anf-detail svg path{fill:#6b7c8a}.cp-anf-signin-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;padding:0 24px;background:linear-gradient(135deg,#4077ad,#335f8a);border:none;border-radius:0;font-size:15px;font-weight:700;letter-spacing:.3px;color:#fff;cursor:pointer;text-decoration:none;font-family:inherit;transition:filter .15s,box-shadow .15s;-webkit-appearance:none}.cp-anf-signin-btn svg{width:18px;height:18px;flex-shrink:0}.cp-anf-signin-btn svg path{fill:#fff}.cp-anf-signin-btn:hover{filter:brightness(1.07);box-shadow:inset 0 -3px #00000026}\n"], dependencies: [{ kind: "directive", type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.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"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ClaimProcessComponent, isStandalone: false, selector: "app-claim-process", inputs: { useEmitter: "useEmitter" }, outputs: { loginNavigate: "loginNavigate", initialProcessNavigate: "initialProcessNavigate" }, ngImport: i0, template: "<h2 class=\"sr-only\">Claim Your Account</h2>\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-logo-wrap\">\n      <svg class=\"cp-brand-logo-svg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 107.928 95.043\">\n        <path\n          d=\"M16.62,76.812a88.959,88.959,0,0,0,12.033-2.091,36.373,36.373,0,0,0,51.459.182h.031a87.176,87.176,0,0,0,11.714,1.91,47.928,47.928,0,0,1-75.237,0ZM.587,71.759c-1.441-3.048.553-7.467,5.2-12.463a.355.355,0,0,1,.487-.116.352.352,0,0,1,.12.485,4.269,4.269,0,0,0-.606,4.026c1.949,4.351,14.87,2.857,31.617-2.9a.783.783,0,0,1,.748,0c2.495,1.358,5.061,2.463,7.639,3.659l-.011-.017a16.755,16.755,0,0,1,2.258,1.1.963.963,0,0,1,0,1.794c-14.543,5.53-27.565,8.5-36.349,8.5C5.846,75.837,1.875,74.519.587,71.759Zm46.34-9.989C17.443,48.164-3.376,30.437.454,22.289c1.374-3.064,6.021-4.351,12.993-4.051a.346.346,0,1,1,0,.686,4.661,4.661,0,0,0-3.465,2.163C7.264,26.919,25.549,41.126,51.107,52.859s48.423,16.61,51.117,10.766a4.685,4.685,0,0,0-.606-4.029.5.5,0,0,1,0-.091.376.376,0,0,1,.37-.369.4.4,0,0,1,.248.091l-.011.011c4.625,5,6.644,9.349,5.111,12.408-1.319,2.793-5.309,4.119-11.163,4.119C84.8,75.764,66.395,70.755,46.927,61.77Zm-36.89,2.868a49.831,49.831,0,0,1-3-16.968,51.991,51.991,0,0,1,.812-8.955A98.753,98.753,0,0,0,17.941,46.8a4.375,4.375,0,0,0-.019.606,40.584,40.584,0,0,0,3.432,16.431,35.288,35.288,0,0,1-8.129.949Q11.63,64.783,10.037,64.639Zm77.4-.712a40.586,40.586,0,0,0,3.27-16.24V46.259a97.668,97.668,0,0,0,10.062-8.2,51.439,51.439,0,0,1,.859,9.377A49.608,49.608,0,0,1,98.587,64.49a30.815,30.815,0,0,1-11.148-.563Zm-.006,0h.006l-.006.015ZM69.57,57.2C66.316,56,63,54.735,59.6,53.314a.924.924,0,0,1,0-1.662c24-11.51,40.992-24.91,38.339-30.5a4.369,4.369,0,0,0-3.46-2.163.346.346,0,1,1,0-.692c6.855-.3,11.544.986,12.984,4.051C110.926,29.575,94.779,44.4,70.4,57.2a1.139,1.139,0,0,1-.416.079A1.156,1.156,0,0,1,69.57,57.2ZM12.343,25.331A46.369,46.369,0,0,1,54.463.008,45.874,45.874,0,0,1,96.1,24.643a33.823,33.823,0,0,1-8.04,8.264A35.874,35.874,0,0,0,54.208,9.589,35.431,35.431,0,0,0,20.38,33.259,39.308,39.308,0,0,1,12.343,25.331Z\" />\n      </svg>\n      <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-brand-logo-text\">\n        {{ privacyAndTerms?.companyName }}\n      </span>\n    </div>\n\n    <div class=\"cp-brand-hero\">\n      <span class=\"cp-brand-eyebrow\">Claim Your Account</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>\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        <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\">\n\n      <!-- Logo -->\n      <div class=\"cp-logo\">\n        <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\"\n          [alt]=\"privacyAndTerms?.companyName || 'Company Logo'\" class=\"cp-logo-img\" />\n        <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-logo-fallback\">{{ privacyAndTerms?.companyName }}</span>\n      </div>\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' }}</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      <!-- Sign out -->\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-sb-signout\" (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\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    </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            <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\" 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\" 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</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>\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\" [class.cp-role-cards--locked]=\"isInitialSetupCompleted\">\n                <ng-container *ngFor=\"let role of userViewRoles\">\n                  <div class=\"cp-role-card\"\n                    [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\" *ngIf=\"lockedToTypeFromParam && sectionRoleDone\">\n                <svg viewBox=\"0 0 24 24\">\n                  <path 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\" *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\" *ngIf=\"!sectionRoleDone && validatePage === 1 && !isInitialSetupCompleted && !lockedToTypeFromParam\">Please\n                select a role</div>\n            </div>\n\n            <ng-container *ngIf=\"!isLoadingUser\" [formGroup]=\"userForm\">\n\n              <!-- New user: optional password toggle -->\n              <div class=\"cp-toggle-row\" *ngIf=\"!userHasExistingDetails\">\n                <div class=\"cp-toggle-row__info\">\n                  <span class=\"cp-toggle-row__label\">Set Password <em>(Optional)</em></span>\n                  <span class=\"cp-toggle-row__hint\">Leave off to use existing credentials</span>\n                </div>\n                <label class=\"cp-toggle-switch\">\n                  <input type=\"checkbox\" [checked]=\"setPasswordEnabled\" (change)=\"toggleSetPassword()\">\n                  <span class=\"cp-toggle-knob\"></span>\n                </label>\n              </div>\n\n              <div class=\"cp-row\" *ngIf=\"!userHasExistingDetails && setPasswordEnabled\">\n                <div class=\"cp-field\">\n                  <label for=\"password\">Password</label>\n                  <div class=\"cp-pw-wrap\">\n                    <input [type]=\"showPassword ? 'text' : 'password'\" id=\"password\" 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 class=\"cp-error\" *ngIf=\"u['password'].errors?.['minlength'] && u['password'].touched\">Min. 8\n                    characters</div>\n                </div>\n                <div class=\"cp-field\">\n                  <label for=\"confirmPassword\">Confirm Password</label>\n                  <div class=\"cp-pw-wrap\">\n                    <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPassword\"\n                      formControlName=\"confirmPassword\" placeholder=\"Repeat password\"\n                      [class.is-invalid]=\"userForm.errors?.['passwordMismatch'] && u['confirmPassword'].touched\"\n                      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 class=\"cp-error\" *ngIf=\"userForm.errors?.['passwordMismatch'] && u['confirmPassword'].touched\">\n                    Passwords do not match</div>\n                </div>\n              </div>\n\n              <!-- Existing user: reset toggle -->\n              <div class=\"cp-toggle-row\" *ngIf=\"userHasExistingDetails\">\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=\"userHasExistingDetails && 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:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-brand-left{position:static;height:auto;width:100%;min-width:unset;padding:32px 24px 28px;border-right:none;border-bottom:1px solid #e2eaf2}}.cp-brand-logo-wrap{margin-bottom:10px}.cp-brand-logo-img{max-height:48px;max-width:200px;object-fit:contain;display:block}.cp-brand-logo-svg{display:block;height:48px;width:auto;max-width:200px;fill:#4077ad}.cp-brand-logo-text{font-size:20px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-brand-hero{margin-bottom:15px}.cp-brand-eyebrow{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.16);border-radius:99px;padding:3px 10px;margin-bottom:16px}.cp-brand-heading{font-size:26px;font-weight:800;color:#0c1620;line-height:1.22;letter-spacing:-.4px;margin:0 0 14px}@media (max-width: 860px){.cp-brand-heading{font-size:21px}}.cp-brand-intro{font-size:13.5px;color:#6b7c8a;line-height:1.78;margin:0}.cp-brand-features{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;gap:6px}.cp-brand-feature{display:flex;align-items:flex-start;gap:13px;padding:13px 15px;border-radius:9px;background:#f8fafc;border:1px solid #e8edf3;transition:border-color .18s,background .18s}.cp-brand-feature:hover{background:#4077ad08;border-color:#4077ad38}.cp-brand-feature__icon{width:34px;height:34px;flex-shrink:0;border-radius:8px;background:#4077ad14;display:flex;align-items:center;justify-content:center}.cp-brand-feature__icon svg{width:17px;height:17px}.cp-brand-feature__icon svg path{fill:#4077ad}.cp-brand-feature__body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.cp-brand-feature__body strong{font-size:12.5px;font-weight:700;color:#0c1620;line-height:1.2}.cp-brand-feature__body span{font-size:11.5px;color:#6b7c8a;line-height:1.62}.cp-brand-contact{display:flex;flex-direction:column;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid #e8edf3}.cp-brand-contact__link{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-brand-contact__link svg{width:14px;height:14px;flex-shrink:0}.cp-brand-contact__link svg path{fill:currentColor}.cp-brand-contact__link:hover{color:#4077ad}.cp-brand-contact__link--website{font-weight:600;color:#4077ad}.cp-brand-contact__link--website:hover{color:#335f8a}.cp-brand-contact__ext{width:11px!important;height:11px!important;opacity:.65}.cp-brand-right{flex:1;background:#eef1f4;display:flex;align-items:center;justify-content:center;padding:40px 28px;min-width:0}@media (max-width: 860px){.cp-brand-right{padding:28px 20px 48px}}.cp-brand-state{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center}.cp-brand-state .cp-invalid-card,.cp-brand-state .cp-anf-card{width:100%}.cp-left{width:40%;min-width:300px;background:#fff;border-right:1px solid #e2eaf2;display:flex;flex-direction:column;padding:44px 40px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-left{display:none}}.cp-left-inner{display:flex;flex-direction:column;height:100%;gap:0}.cp-logo{margin-bottom:24px}.cp-logo-img{max-height:44px;max-width:180px;object-fit:contain;display:block}.cp-logo-fallback{font-size:18px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-sb-user{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:6px;background:#4077ad0d;border:1px solid rgba(64,119,173,.12);margin-bottom:20px}.cp-sb-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:#4077ad;display:flex;align-items:center;justify-content:center;overflow:hidden}.cp-sb-avatar__img{width:100%;height:100%;object-fit:cover}.cp-sb-avatar__initials{font-size:15px;font-weight:700;color:#fff;text-transform:uppercase}.cp-sb-user__info{display:flex;flex-direction:column;gap:2px;min-width:0}.cp-sb-user__info strong{font-size:13px;font-weight:700;color:#0c1620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-user__info span{font-size:11px;color:#6b7c8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-signout{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;margin-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:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#4077ad;margin-bottom:6px}.cp-sb-intro{font-size:12px;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:10.5px;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:11.5px;font-weight:700;color:#0c1620}.cp-sb-feature div span{font-size:11px;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:12.5px;font-weight:700;color:#0c1620;line-height:1}.cp-step__sub{font-size:11px;color:#6b7c8a;line-height:1.4}.cp-step__badge{width:20px;height:20px;border-radius:50%;flex-shrink:0;margin-top:7px;background:#d3dce3;display:flex;align-items:center;justify-content:center;transition:background .2s}.cp-step__badge svg{width:12px;height:12px}.cp-step__badge svg path{fill:#fff}.cp-step__badge span{font-size:10px;font-weight:700;color:#6b7c8a}.cp-step__badge--done{background:#28a745}.cp-step__badge--done span{display:none}.cp-step--done .cp-step__icon{background:#4077ad14;border-color:#4077ad}.cp-step--done .cp-step__icon svg path{fill:#4077ad}.cp-step--done .cp-step__label{color:#4077ad}.cp-left-contact{display:flex;flex-direction:column;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid #e8edf3}.cp-contact-link{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-contact-link svg{width:14px;height:14px;flex-shrink:0}.cp-contact-link svg path{fill:currentColor}.cp-contact-link:hover{color:#4077ad}.cp-left-footnote{margin-top:18px;font-size:12.5px}.cp-left-footnote a{display:inline-flex;align-items:center;gap:5px;color:#4077ad;text-decoration:none;font-weight:600;transition:color .15s}.cp-left-footnote a svg{width:12px;height:12px}.cp-left-footnote a svg path{fill:#4077ad}.cp-left-footnote a:hover{color:#335f8a;text-decoration:underline}.cp-mobile-bar{display:none;align-items:center;justify-content:space-between;padding:14px 20px;background:#fff;border-bottom:1px solid #e2eaf2}@media (max-width: 860px){.cp-mobile-bar{display:flex}}.cp-mobile-logo{max-height:36px;max-width:160px;object-fit:contain}.cp-mobile-company{font-size:18px;font-weight:800;color:#4077ad}.cp-right{flex:1;background:#f0f4f8;display:flex;flex-direction:column;align-items:center;padding:0 0 64px;overflow-y:auto;min-width:0}@media (max-width: 860px){.cp-right{padding:0 0 48px}}.cp-invalid-page,.cp-success-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#eef1f4;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;padding:24px}.cp-invalid-card,.cp-success-card{background:#fff;border-radius:12px;box-shadow:0 4px 6px -1px #00000012,0 16px 40px -4px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-invalid-card h2,.cp-success-card h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-invalid-card p,.cp-success-card p{font-size:14px;color:#6b7c8a;line-height:1.7;margin-bottom:28px}.cp-invalid-icon,.cp-success-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-invalid-icon svg,.cp-success-icon svg{width:32px;height:32px}.cp-invalid-icon{background:#dc35451a}.cp-invalid-icon svg path{fill:#dc3545}.cp-invalid-icon--warn{background:#f59e0b1a}.cp-invalid-icon--warn svg path{fill:#f59e0b}.cp-success-icon{background:#28a7451a}.cp-success-icon svg path{fill:#28a745}.cp-anf-hint{font-size:13px;color:#6b7280;margin-top:4px}.cp-form-wrap{width:100%;flex:1;display:flex;flex-direction:column;gap:0;padding-bottom:32px}.cp-banner{width:100%;display:flex;align-items:center;gap:20px;padding:20px 32px;background:linear-gradient(135deg,#4077ad,#2f5880);border-bottom:1px solid rgba(0,0,0,.12);position:sticky;top:0;z-index:10;flex-shrink:0}@media (max-width: 860px){.cp-banner{padding:16px 20px;position:static}}@media (max-width: 480px){.cp-banner{padding:14px 16px;gap:12px}}.cp-banner__avatar{position:relative;flex-shrink:0;width:60px;height:60px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);overflow:hidden;background:#ffffff26}@media (max-width: 480px){.cp-banner__avatar{width:46px;height:46px}}.cp-banner__img{width:100%;height:100%;object-fit:cover;display:block}.cp-banner__initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#ffffffe6;text-transform:uppercase;letter-spacing:-.5px}@media (max-width: 480px){.cp-banner__initials{font-size:16px}}.cp-banner__info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.cp-banner__name{font-size:17px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}@media (max-width: 480px){.cp-banner__name{font-size:14px}}.cp-banner__meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.cp-banner__email{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#fffc;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-banner__email svg{width:11px;height:11px}.cp-banner__email svg path{fill:#fffc}.cp-banner__badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:3px 8px;border-radius:99px;background:#fff3;color:#ffffffe6}.cp-banner__badge--update{background:#28a7454d;color:#a8f5c0}.cp-banner__loading{display:flex;align-items:center;gap:6px;font-size:11px;color:#ffffffb3;margin-top:2px}.cp-banner__loading .cp-spinner--sm{border-color:#fff6;border-top-color:#fff}.cp-logout-btn--banner{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;background:#ffffff1f;border:1px solid rgba(255,255,255,.25);color:#ffffffe6;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0}.cp-logout-btn--banner svg{width:15px;height:15px}.cp-logout-btn--banner svg path{fill:#ffffffe6}.cp-logout-btn--banner:hover{background:#dc3545bf;border-color:transparent;color:#fff}.cp-logout-btn--banner:hover svg path{fill:#fff}@media (max-width: 480px){.cp-logout-btn--banner{padding:7px 10px;font-size:11px}}.cp-alert{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:6px;margin:20px 24px 0;background:#dc35450f;border:1px solid rgba(220,53,69,.18);font-size:13px;color:#c0392b}.cp-alert svg path{fill:#c0392b}.cp-card{background:#fff;border:1px solid #e2eaf2;margin:16px 24px 0;border-radius:10px;overflow: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:13.5px;font-weight:700;color:#0c1620;margin:0 0 2px;line-height:1}.cp-card__sub{font-size:11px;color:#6b7c8a;margin:0;line-height:1}.cp-card__status{margin-left:auto;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#eef1f4;border:1.5px solid #d3dce3;display:flex;align-items:center;justify-content:center;transition:all .2s}.cp-card__status svg{width:14px;height:14px}.cp-card__status svg path{fill:#6b7c8a}.cp-card__status span{font-size:12px;font-weight:700;color:#6b7c8a}.cp-card__status--done{background:#28a745;border-color:#28a745}.cp-card__status--done svg path{fill:#fff}.cp-card__body{padding:20px 24px 16px}@media (max-width: 480px){.cp-card__body{padding:16px 16px 12px}}.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.cp-row.cp-row-triple,.cp-row.cp-row--3{grid-template-columns:1fr 1fr 1fr}.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:11.5px;font-weight:600;color:#3a4a57}.cp-field label .req{color:#4077ad;margin-left:2px}.cp-field input,.cp-field select{box-sizing:border-box;height:42px;border:1.5px solid #d3dce3;border-radius:6px;padding:0 12px;font-size:13.5px;color:#0c1620;background:#fff;width:100%;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;font-family:inherit}.cp-field input::placeholder,.cp-field select::placeholder{color:#aab8c2}.cp-field input:focus,.cp-field select:focus{outline:none;border-color:#4077ad;box-shadow:0 0 0 3px #4077ad26}.cp-field input.is-invalid,.cp-field select.is-invalid{border-color:#dc3545}.cp-field input.is-invalid:focus,.cp-field select.is-invalid:focus{box-shadow:0 0 0 3px #dc354526}.cp-select{position:relative}.cp-select:after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #6b7c8a;pointer-events:none}.cp-select select{cursor:pointer;padding-right:32px}.cp-pw-wrap{position:relative}.cp-pw-wrap input{padding-right:42px}.cp-pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;color:#6b7c8a}.cp-pw-toggle svg{width:18px;height:18px}.cp-pw-toggle svg path{fill:#6b7c8a}.cp-pw-toggle:hover svg path{fill:#4077ad}.cp-pw-success{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#16a34a;margin:4px 0 10px}.cp-pw-success svg path{fill:#16a34a}.cp-readonly-wrap{position:relative;display:flex;align-items:center}.cp-readonly-wrap svg{position:absolute;left:12px;width:15px;height:15px;flex-shrink:0;pointer-events:none}.cp-readonly-wrap svg path{fill:#4077ad}.cp-input-readonly{width:100%;box-sizing:border-box;height:42px;border:1.5px solid #d3dce3;border-radius:6px;padding:0 12px 0 36px;font-size:13.5px;color:#0c1620;background:#4077ad0a;cursor:default;font-family:inherit;font-weight:500}.cp-autofill-note{font-size:11px;color:#4077ad;margin-top:3px;display:flex;align-items:center;gap:4px}.cp-email-display{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 12px;background:#eef1f4;border:1.5px solid #d3dce3;border-radius:99px;font-size:12.5px;color:#0c1620;font-weight:500}.cp-email-display svg{width:14px;height:14px;flex-shrink:0}.cp-email-display svg path{fill:#4077ad}.cp-error{font-size:11.5px;color:#dc3545;margin-top:2px}.cp-terms-error{margin-top:4px}.cp-submit-error{margin-bottom:12px;font-size:13px;text-align:center}.cp-loading-hint{display:flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;margin-top:4px}.cp-new-user-hint{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#4077ad;background:#4077ad0f;border:1px solid rgba(64,119,173,.18);border-radius:6px;padding:9px 13px;margin:6px 0 12px}.cp-new-user-hint svg{width:15px;height:15px;flex-shrink:0}.cp-new-user-hint svg path{fill:#4077ad}.cp-agreements{display:flex;flex-direction:column;gap:10px;margin:24px 0 4px}.v1-agreement-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;border:1.5px solid #d3dce3;background:#fff;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #0000000a}.v1-agreement-card:hover{border-color:#bac8d3;box-shadow:0 2px 8px #00000012}.v1-agreement-card.v1-card--agreed{border-color:#b8d4ef;background:#ebf3fb}.v1-agreement-card.v1-card--invalid{border-color:#fecaca;background:#fff5f5}.v1-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#eef1f4;border:1px solid #d3dce3;display:flex;align-items:center;justify-content:center;color:#4077ad}.v1-card--agreed .v1-card-icon{background:#d4e8f8;border-color:#b8d4ef}.v1-card-body{flex:1 1 auto;min-width:0}.v1-card-title{font-size:13px;font-weight:600;color:#0c1620;margin:0 0 2px;line-height:1.3}.v1-card-sub{font-size:11.5px;color:#6b7c8a;margin:0}.v1-agree-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:8px;font-size:12px;font-weight:600;font-family:inherit;border:1.5px solid #4077AD;color:#4077ad;background:transparent;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}.v1-agree-btn:hover{background:#4077ad;color:#fff}.v1-agree-btn.v1-agree-btn--done{background:#4077ad;border-color:#4077ad;color:#fff}.cp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;margin-top:10px;background:#4077ad;border:none;border-radius:6px;font-size:13.5px;font-weight:700;letter-spacing:.3px;color:#fff;cursor:pointer;text-decoration:none;transition:background .15s,box-shadow .15s,transform .1s;font-family:inherit}.cp-btn:hover:not(:disabled){background:#335f8a;box-shadow:0 4px 12px #4077ad59}.cp-btn:active:not(:disabled){transform:scale(.99)}.cp-btn:disabled{opacity:.6;cursor:not-allowed}.cp-btn--submit{height:52px;font-size:15px;letter-spacing:.5px;background:linear-gradient(135deg,#4077ad,#335f8a);box-shadow:0 2px 8px #4077ad40;border-radius:8px;margin-top:0}.cp-btn--submit:hover:not(:disabled){box-shadow:0 6px 18px #4077ad66;filter:brightness(1.05)}.cp-btn--outline{background:#fff;color:#4077ad;border:1.5px solid #4077AD}.cp-btn--outline:hover:not(:disabled){background:#4077ad0d;box-shadow:none}.cp-btn--ghost{background:transparent;color:#6b7c8a;border:1.5px solid #d3dce3}.cp-btn--ghost:hover:not(:disabled){border-color:#4077ad;color:#4077ad;box-shadow:none}.cp-btn--sm{height:38px;font-size:12.5px}.cp-btn-link{background:none;border:none;font-family:inherit;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;margin-top:8px;padding:6px 0;text-decoration:underline}.cp-btn-link:hover{color:#4077ad}.cp-spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:cp-spin .7s linear infinite}.cp-spinner:not(.cp-spinner-btn){border-color:#4077ad4d;border-top-color:#4077ad}.cp-spinner--sm{width:11px;height:11px;border-color:#4077ad4d;border-top-color:#4077ad}@keyframes cp-spin{to{transform:rotate(360deg)}}.cp-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:14px;background:#f8fafc;border:1px solid #e2eaf2;border-radius:6px}.cp-toggle-row__info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.cp-toggle-row__label{font-size:13px;font-weight:600;color:#0c1620}.cp-toggle-row__label em{font-style:normal;font-size:11px;font-weight:500;color:#6b7c8a;margin-left:4px}.cp-toggle-row__hint{font-size:11px;color:#6b7c8a}.cp-toggle-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;cursor:pointer}.cp-toggle-switch input{opacity:0;width:0;height:0;position:absolute}.cp-toggle-switch input:checked+.cp-toggle-knob{background:#4077ad}.cp-toggle-switch input:checked+.cp-toggle-knob:before{transform:translate(18px)}.cp-toggle-knob{position:absolute;inset:0;background:#c8d5e0;border-radius:24px;transition:background .2s;cursor:pointer}.cp-toggle-knob:before{content:\"\";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .22s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0003}.cp-otp-wrap{margin-top:4px}.cp-otp-hint{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#6b7c8a;margin:0 0 12px}.cp-otp-hint svg path{fill:#6b7c8a}.cp-otp-hint strong{color:#0c1620}.cp-otp-timer{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.18);border-radius:99px;padding:4px 12px;margin-bottom:14px}.cp-otp-timer svg path{fill:#4077ad}.cp-otp-timer--expired{color:#dc3545;background:#dc354512;border-color:#dc354533}.cp-otp-timer--expired svg path{fill:#dc3545}.cp-otp-input{letter-spacing:.15em;font-size:16px;font-weight:600}.cp-otp-actions{display:flex;flex-direction:column;gap:0;margin-top:4px}.cp-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}.cp-terms__check:checked~.cp-terms__box{background:#4077ad;border-color:#4077ad}.cp-upload-area{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:120px;border:2px dashed #d3dce3;border-radius:6px;background:#eef1f4;cursor:pointer;transition:border-color .15s,background .15s;overflow:hidden}.cp-upload-area:hover{border-color:#4077ad;background:#4077ad08}.cp-upload-hidden{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.cp-upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px;text-align:center;pointer-events:none}.cp-upload-placeholder svg{width:32px;height:32px;opacity:.5}.cp-upload-placeholder svg path{fill:#6b7c8a}.cp-upload-placeholder span{font-size:12.5px;font-weight:600;color:#6b7c8a}.cp-upload-placeholder small{font-size:11px;color:#95a2ad}.cp-upload-preview{width:100%;object-fit:cover;display:block}.cp-upload-preview--avatar{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 8px #0000001f;margin:14px auto 0}.cp-upload-preview--logo{max-width:180px;max-height:80px;width:auto;height:auto;object-fit:contain;margin:14px auto 0}.cp-upload-change{font-size:11px;font-weight:600;color:#4077ad;margin-bottom:10px;pointer-events:none}.tc-modal-dialog{max-width:min(780px,96vw)}.tc-modal{border-radius:20px!important;border:none!important;overflow:hidden;box-shadow:0 32px 72px #00000038,0 6px 20px #0000001a!important;height:min(720px,90vh);display:flex;flex-direction:column}.tc-modal-header{display:flex;align-items:center;gap:13px;padding:20px 24px;background:#4077ad;border-bottom:none;flex-shrink:0}.tc-modal-header .tc-header-icon{width:38px;height:38px;background:#ffffff1f;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#93c5fd;flex-shrink:0}.tc-modal-header .tc-modal-title{font-size:16px;font-weight:700;color:#fff;margin:0;flex:1}.tc-modal-close{flex-shrink:0;background:#ffffff1f;border:none;border-radius:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#fffc;cursor:pointer;transition:background .15s,color .15s}.tc-modal-close:hover{background:#ffffff38;color:#fff}.tc-modal-body{flex:1 1 auto;overflow-y:auto;padding:26px 32px;background:#fff;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.tc-modal-body::-webkit-scrollbar{width:5px}.tc-modal-body::-webkit-scrollbar-track{background:transparent}.tc-modal-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}.tc-modal-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tc-modal-footer{display:flex;justify-content:flex-end;align-items:center;padding:14px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.tc-btn{font-size:13.5px;font-weight:600;font-family:inherit;padding:9px 24px;border-radius:10px;border:none;cursor:pointer;transition:background .15s ease}.tc-btn.tc-btn-close{background:#4077ad;color:#fff}.tc-btn.tc-btn-close:hover{background:#335f8a}.cp-logout-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;border:1.5px solid #e2eaf2;background:#fff;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0}.cp-logout-btn svg{width:16px;height:16px}.cp-logout-btn svg path{fill:#6b7c8a}.cp-logout-btn:hover{border-color:#dc3545;color:#dc3545}.cp-logout-btn:hover svg path{fill:#dc3545}.cp-logout-btn--mobile{margin-left:auto}.cp-biz-layout{display:grid;grid-template-columns:1fr 160px;gap:20px;align-items:start}@media (max-width: 640px){.cp-biz-layout{grid-template-columns:1fr}}.cp-biz-fields{display:flex;flex-direction:column}.cp-biz-logo{display:flex;flex-direction:column;gap:8px}.cp-biz-logo__label{font-size:11.5px;font-weight:600;color:#3a4a57}.cp-biz-logo__area{border:2px dashed #d3dce3;border-radius:6px;background:#f8fafc;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:140px;padding:12px;text-align:center;transition:border-color .15s}.cp-biz-logo__area:hover{border-color:#4077ad}.cp-biz-logo__img{width:100%;max-height:100px;object-fit:contain;border-radius:4px}.cp-biz-logo__change{font-size:11px;color:#6b7c8a;margin-top:6px;display:block}.cp-biz-logo__placeholder{display:flex;flex-direction:column;align-items:center;gap:6px}.cp-biz-logo__placeholder svg{width:28px;height:28px}.cp-biz-logo__placeholder svg path{fill:#aab8c2}.cp-biz-logo__placeholder span{font-size:11.5px;font-weight:600;color:#6b7c8a}.cp-biz-logo__placeholder small{font-size:10px;color:#aab8c2}.cp-profile-logo-area{border-radius:50%!important;min-height:140px!important;width:140px!important;height:140px!important;margin:0 auto;overflow:hidden;padding:0!important;position:relative}.cp-profile-logo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.cp-profile-logo-area .cp-biz-logo__change{position:absolute;bottom:0;left:0;right:0;background:#0000007a;color:#fff!important;padding:7px 0 5px;text-align:center;font-size:10.5px;font-weight:600;margin-top:0!important;opacity:0;transition:opacity .18s}.cp-profile-logo-area:hover .cp-biz-logo__change{opacity:1}.cp-lookup-loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:48px 44px!important}.cp-lookup-loading p{font-size:14px;color:#6b7c8a;margin:0}.cp-lookup-spinner{width:32px;height:32px;border:3px solid rgba(64,119,173,.2);border-top-color:#4077ad}.cp-anf-card{width:100%;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 6px -1px #00000012,0 16px 40px -4px #0c16201f;border:1px solid #e2eaf2}.cp-anf-card__header{display:flex;align-items:center;gap:16px;padding:28px 28px 20px;border-bottom:1px solid #f0f4f8}.cp-anf-card__identity{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.cp-anf-card__name{font-size:18px;font-weight:800;color:#0c1620;margin:0;line-height:1.2}.cp-anf-card__email{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#6b7c8a}.cp-anf-card__email svg{width:12px;height:12px}.cp-anf-card__email svg path{fill:#6b7c8a}.cp-anf-card__details{padding:16px 28px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid #f0f4f8}.cp-anf-card__notice{display:flex;align-items:center;gap:10px;padding:14px 28px;background:#4077ad0a;border-bottom:1px solid #f0f4f8;font-size:13px;color:#4077ad;font-weight:600}.cp-anf-card__notice svg{width:18px;height:18px;flex-shrink:0}.cp-anf-card__notice svg path{fill:#4077ad}.cp-anf-avatar{width:60px;height:60px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#4077ad,#335f8a);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:-.5px}.cp-anf-roles{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}.cp-anf-role{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;padding:3px 8px;border-radius:99px;background:#4077ad14;color:#4077ad;border:1px solid rgba(64,119,173,.18)}.cp-anf-detail{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:#6b7c8a;line-height:1.5}.cp-anf-detail svg{width:14px;height:14px;flex-shrink:0;margin-top:1px}.cp-anf-detail svg path{fill:#6b7c8a}.cp-anf-signin-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;padding:0 24px;background:linear-gradient(135deg,#4077ad,#335f8a);border:none;border-radius:0;font-size:15px;font-weight:700;letter-spacing:.3px;color:#fff;cursor:pointer;text-decoration:none;font-family:inherit;transition:filter .15s,box-shadow .15s;-webkit-appearance:none}.cp-anf-signin-btn svg{width:18px;height:18px;flex-shrink:0}.cp-anf-signin-btn svg path{fill:#fff}.cp-anf-signin-btn:hover{filter:brightness(1.07);box-shadow:inset 0 -3px #00000026}\n"], dependencies: [{ kind: "directive", type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.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"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ClaimProcessComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-claim-process', standalone: false, template: "<h2 class=\"sr-only\">Claim Your Account</h2>\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-logo-wrap\">\n      <svg class=\"cp-brand-logo-svg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 107.928 95.043\">\n        <path\n          d=\"M16.62,76.812a88.959,88.959,0,0,0,12.033-2.091,36.373,36.373,0,0,0,51.459.182h.031a87.176,87.176,0,0,0,11.714,1.91,47.928,47.928,0,0,1-75.237,0ZM.587,71.759c-1.441-3.048.553-7.467,5.2-12.463a.355.355,0,0,1,.487-.116.352.352,0,0,1,.12.485,4.269,4.269,0,0,0-.606,4.026c1.949,4.351,14.87,2.857,31.617-2.9a.783.783,0,0,1,.748,0c2.495,1.358,5.061,2.463,7.639,3.659l-.011-.017a16.755,16.755,0,0,1,2.258,1.1.963.963,0,0,1,0,1.794c-14.543,5.53-27.565,8.5-36.349,8.5C5.846,75.837,1.875,74.519.587,71.759Zm46.34-9.989C17.443,48.164-3.376,30.437.454,22.289c1.374-3.064,6.021-4.351,12.993-4.051a.346.346,0,1,1,0,.686,4.661,4.661,0,0,0-3.465,2.163C7.264,26.919,25.549,41.126,51.107,52.859s48.423,16.61,51.117,10.766a4.685,4.685,0,0,0-.606-4.029.5.5,0,0,1,0-.091.376.376,0,0,1,.37-.369.4.4,0,0,1,.248.091l-.011.011c4.625,5,6.644,9.349,5.111,12.408-1.319,2.793-5.309,4.119-11.163,4.119C84.8,75.764,66.395,70.755,46.927,61.77Zm-36.89,2.868a49.831,49.831,0,0,1-3-16.968,51.991,51.991,0,0,1,.812-8.955A98.753,98.753,0,0,0,17.941,46.8a4.375,4.375,0,0,0-.019.606,40.584,40.584,0,0,0,3.432,16.431,35.288,35.288,0,0,1-8.129.949Q11.63,64.783,10.037,64.639Zm77.4-.712a40.586,40.586,0,0,0,3.27-16.24V46.259a97.668,97.668,0,0,0,10.062-8.2,51.439,51.439,0,0,1,.859,9.377A49.608,49.608,0,0,1,98.587,64.49a30.815,30.815,0,0,1-11.148-.563Zm-.006,0h.006l-.006.015ZM69.57,57.2C66.316,56,63,54.735,59.6,53.314a.924.924,0,0,1,0-1.662c24-11.51,40.992-24.91,38.339-30.5a4.369,4.369,0,0,0-3.46-2.163.346.346,0,1,1,0-.692c6.855-.3,11.544.986,12.984,4.051C110.926,29.575,94.779,44.4,70.4,57.2a1.139,1.139,0,0,1-.416.079A1.156,1.156,0,0,1,69.57,57.2ZM12.343,25.331A46.369,46.369,0,0,1,54.463.008,45.874,45.874,0,0,1,96.1,24.643a33.823,33.823,0,0,1-8.04,8.264A35.874,35.874,0,0,0,54.208,9.589,35.431,35.431,0,0,0,20.38,33.259,39.308,39.308,0,0,1,12.343,25.331Z\" />\n      </svg>\n      <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-brand-logo-text\">\n        {{ privacyAndTerms?.companyName }}\n      </span>\n    </div>\n\n    <div class=\"cp-brand-hero\">\n      <span class=\"cp-brand-eyebrow\">Claim Your Account</span>\n      <p class=\"cp-brand-intro\">\n        Your account is ready. Complete this short form to set your credentials and unlock full 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>The email <strong>{{ userEmail }}</strong> isn't linked to an existing account. Please check your invitation\n          link or contact support.</p>\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\">\n\n      <!-- Logo -->\n      <div class=\"cp-logo\">\n        <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\"\n          [alt]=\"privacyAndTerms?.companyName || 'Company Logo'\" class=\"cp-logo-img\" />\n        <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-logo-fallback\">{{ privacyAndTerms?.companyName }}</span>\n      </div>\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' }}</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      <!-- Sign out -->\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-sb-signout\" (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\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    </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            <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\" 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\" 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</div>\n                  </div>\n                </div>\n\n                <div class=\"cp-field\">\n                  <label for=\"industries\">Industries</label>\n                  <ng-select id=\"industries\" formControlName=\"industries\" [items]=\"industries\" bindLabel=\"industryName\"\n                    bindValue=\"id\" [multiple]=\"true\" [loading]=\"isIndustriesLoading\"\n                    placeholder=\"Select industries (optional)\">\n                  </ng-select>\n                </div>\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>\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\">*</span>\n                <span *ngIf=\"isInitialSetupCompleted\" style=\"font-weight:400;color:#6b7c8a;font-size:11px;margin-left:4px;\">(locked after initial setup)</span>\n              </label>\n              <div class=\"cp-role-cards\" [class.cp-role-cards--locked]=\"isInitialSetupCompleted\">\n                <div *ngFor=\"let role of userViewRoles\" class=\"cp-role-card\"\n                  [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'\"\n                  [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\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" /></svg>\n                    </span>\n                  </div>\n                  <span class=\"cp-role-card__name\">{{ role.name }}</span>\n                </div>\n              </div>\n              <div class=\"cp-role-locked-notice\" *ngIf=\"isInitialSetupCompleted && sectionRoleDone\">\n                <svg viewBox=\"0 0 24 24\"><path d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\" /></svg>\n                Role is locked. Contact support to change it.\n              </div>\n              <div class=\"cp-error\" *ngIf=\"!sectionRoleDone && validatePage === 1 && !isInitialSetupCompleted\">Please select a role</div>\n            </div>\n\n            <ng-container *ngIf=\"!isLoadingUser\" [formGroup]=\"userForm\">\n\n              <!-- New user: optional password toggle -->\n              <div class=\"cp-toggle-row\" *ngIf=\"!userHasExistingDetails\">\n                <div class=\"cp-toggle-row__info\">\n                  <span class=\"cp-toggle-row__label\">Set Password <em>(Optional)</em></span>\n                  <span class=\"cp-toggle-row__hint\">Leave off to use existing credentials</span>\n                </div>\n                <label class=\"cp-toggle-switch\">\n                  <input type=\"checkbox\" [checked]=\"setPasswordEnabled\" (change)=\"toggleSetPassword()\">\n                  <span class=\"cp-toggle-knob\"></span>\n                </label>\n              </div>\n\n              <div class=\"cp-row\" *ngIf=\"!userHasExistingDetails && setPasswordEnabled\">\n                <div class=\"cp-field\">\n                  <label for=\"password\">Password</label>\n                  <div class=\"cp-pw-wrap\">\n                    <input [type]=\"showPassword ? 'text' : 'password'\" id=\"password\" 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 class=\"cp-error\" *ngIf=\"u['password'].errors?.['minlength'] && u['password'].touched\">Min. 8\n                    characters</div>\n                </div>\n                <div class=\"cp-field\">\n                  <label for=\"confirmPassword\">Confirm Password</label>\n                  <div class=\"cp-pw-wrap\">\n                    <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPassword\"\n                      formControlName=\"confirmPassword\" placeholder=\"Repeat password\"\n                      [class.is-invalid]=\"userForm.errors?.['passwordMismatch'] && u['confirmPassword'].touched\"\n                      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 class=\"cp-error\" *ngIf=\"userForm.errors?.['passwordMismatch'] && u['confirmPassword'].touched\">\n                    Passwords do not match</div>\n                </div>\n              </div>\n\n              <!-- Existing user: reset toggle -->\n              <div class=\"cp-toggle-row\" *ngIf=\"userHasExistingDetails\">\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=\"userHasExistingDetails && 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\">\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>\n\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\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 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>\n\n                <div class=\"cp-row\">\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 class=\"cp-field\">\n                    <label for=\"bizCounty\">County</label>\n                    <input type=\"text\" id=\"bizCounty\" formControlName=\"county\" placeholder=\"Orange County\" />\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:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-brand-left{position:static;height:auto;width:100%;min-width:unset;padding:32px 24px 28px;border-right:none;border-bottom:1px solid #e2eaf2}}.cp-brand-logo-wrap{margin-bottom:10px}.cp-brand-logo-img{max-height:48px;max-width:200px;object-fit:contain;display:block}.cp-brand-logo-svg{display:block;height:48px;width:auto;max-width:200px;fill:#4077ad}.cp-brand-logo-text{font-size:20px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-brand-hero{margin-bottom:15px}.cp-brand-eyebrow{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.16);border-radius:99px;padding:3px 10px;margin-bottom:16px}.cp-brand-heading{font-size:26px;font-weight:800;color:#0c1620;line-height:1.22;letter-spacing:-.4px;margin:0 0 14px}@media (max-width: 860px){.cp-brand-heading{font-size:21px}}.cp-brand-intro{font-size:13.5px;color:#6b7c8a;line-height:1.78;margin:0}.cp-brand-features{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;gap:6px}.cp-brand-feature{display:flex;align-items:flex-start;gap:13px;padding:13px 15px;border-radius:9px;background:#f8fafc;border:1px solid #e8edf3;transition:border-color .18s,background .18s}.cp-brand-feature:hover{background:#4077ad08;border-color:#4077ad38}.cp-brand-feature__icon{width:34px;height:34px;flex-shrink:0;border-radius:8px;background:#4077ad14;display:flex;align-items:center;justify-content:center}.cp-brand-feature__icon svg{width:17px;height:17px}.cp-brand-feature__icon svg path{fill:#4077ad}.cp-brand-feature__body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.cp-brand-feature__body strong{font-size:12.5px;font-weight:700;color:#0c1620;line-height:1.2}.cp-brand-feature__body span{font-size:11.5px;color:#6b7c8a;line-height:1.62}.cp-brand-contact{display:flex;flex-direction:column;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid #e8edf3}.cp-brand-contact__link{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-brand-contact__link svg{width:14px;height:14px;flex-shrink:0}.cp-brand-contact__link svg path{fill:currentColor}.cp-brand-contact__link:hover{color:#4077ad}.cp-brand-contact__link--website{font-weight:600;color:#4077ad}.cp-brand-contact__link--website:hover{color:#335f8a}.cp-brand-contact__ext{width:11px!important;height:11px!important;opacity:.65}.cp-brand-right{flex:1;background:#eef1f4;display:flex;align-items:center;justify-content:center;padding:40px 28px;min-width:0}@media (max-width: 860px){.cp-brand-right{padding:28px 20px 48px}}.cp-brand-state{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center}.cp-brand-state .cp-invalid-card,.cp-brand-state .cp-anf-card{width:100%}.cp-left{width:40%;min-width:300px;background:#fff;border-right:1px solid #e2eaf2;display:flex;flex-direction:column;padding:44px 40px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-left{display:none}}.cp-left-inner{display:flex;flex-direction:column;height:100%;gap:0}.cp-logo{margin-bottom:24px}.cp-logo-img{max-height:44px;max-width:180px;object-fit:contain;display:block}.cp-logo-fallback{font-size:18px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-sb-user{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:6px;background:#4077ad0d;border:1px solid rgba(64,119,173,.12);margin-bottom:20px}.cp-sb-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:#4077ad;display:flex;align-items:center;justify-content:center;overflow:hidden}.cp-sb-avatar__img{width:100%;height:100%;object-fit:cover}.cp-sb-avatar__initials{font-size:15px;font-weight:700;color:#fff;text-transform:uppercase}.cp-sb-user__info{display:flex;flex-direction:column;gap:2px;min-width:0}.cp-sb-user__info strong{font-size:13px;font-weight:700;color:#0c1620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-user__info span{font-size:11px;color:#6b7c8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-signout{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;margin-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:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#4077ad;margin-bottom:6px}.cp-sb-intro{font-size:12px;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:10.5px;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:11.5px;font-weight:700;color:#0c1620}.cp-sb-feature div span{font-size:11px;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:12.5px;font-weight:700;color:#0c1620;line-height:1}.cp-step__sub{font-size:11px;color:#6b7c8a;line-height:1.4}.cp-step__badge{width:20px;height:20px;border-radius:50%;flex-shrink:0;margin-top:7px;background:#d3dce3;display:flex;align-items:center;justify-content:center;transition:background .2s}.cp-step__badge svg{width:12px;height:12px}.cp-step__badge svg path{fill:#fff}.cp-step__badge span{font-size:10px;font-weight:700;color:#6b7c8a}.cp-step__badge--done{background:#28a745}.cp-step__badge--done span{display:none}.cp-step--done .cp-step__icon{background:#4077ad14;border-color:#4077ad}.cp-step--done .cp-step__icon svg path{fill:#4077ad}.cp-step--done .cp-step__label{color:#4077ad}.cp-left-contact{display:flex;flex-direction:column;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid #e8edf3}.cp-contact-link{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-contact-link svg{width:14px;height:14px;flex-shrink:0}.cp-contact-link svg path{fill:currentColor}.cp-contact-link:hover{color:#4077ad}.cp-left-footnote{margin-top:18px;font-size:12.5px}.cp-left-footnote a{display:inline-flex;align-items:center;gap:5px;color:#4077ad;text-decoration:none;font-weight:600;transition:color .15s}.cp-left-footnote a svg{width:12px;height:12px}.cp-left-footnote a svg path{fill:#4077ad}.cp-left-footnote a:hover{color:#335f8a;text-decoration:underline}.cp-mobile-bar{display:none;align-items:center;justify-content:space-between;padding:14px 20px;background:#fff;border-bottom:1px solid #e2eaf2}@media (max-width: 860px){.cp-mobile-bar{display:flex}}.cp-mobile-logo{max-height:36px;max-width:160px;object-fit:contain}.cp-mobile-company{font-size:18px;font-weight:800;color:#4077ad}.cp-right{flex:1;background:#f0f4f8;display:flex;flex-direction:column;align-items:center;padding:0 0 64px;overflow-y:auto;min-width:0}@media (max-width: 860px){.cp-right{padding:0 0 48px}}.cp-invalid-page,.cp-success-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#eef1f4;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;padding:24px}.cp-invalid-card,.cp-success-card{background:#fff;border-radius:12px;box-shadow:0 4px 6px -1px #00000012,0 16px 40px -4px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-invalid-card h2,.cp-success-card h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-invalid-card p,.cp-success-card p{font-size:14px;color:#6b7c8a;line-height:1.7;margin-bottom:28px}.cp-invalid-icon,.cp-success-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-invalid-icon svg,.cp-success-icon svg{width:32px;height:32px}.cp-invalid-icon{background:#dc35451a}.cp-invalid-icon svg path{fill:#dc3545}.cp-invalid-icon--warn{background:#f59e0b1a}.cp-invalid-icon--warn svg path{fill:#f59e0b}.cp-success-icon{background:#28a7451a}.cp-success-icon svg path{fill:#28a745}.cp-anf-hint{font-size:13px;color:#6b7280;margin-top:4px}.cp-form-wrap{width:100%;flex:1;display:flex;flex-direction:column;gap:0;padding-bottom:32px}.cp-banner{width:100%;display:flex;align-items:center;gap:20px;padding:20px 32px;background:linear-gradient(135deg,#4077ad,#2f5880);border-bottom:1px solid rgba(0,0,0,.12);position:sticky;top:0;z-index:10;flex-shrink:0}@media (max-width: 860px){.cp-banner{padding:16px 20px;position:static}}@media (max-width: 480px){.cp-banner{padding:14px 16px;gap:12px}}.cp-banner__avatar{position:relative;flex-shrink:0;width:60px;height:60px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);overflow:hidden;background:#ffffff26}@media (max-width: 480px){.cp-banner__avatar{width:46px;height:46px}}.cp-banner__img{width:100%;height:100%;object-fit:cover;display:block}.cp-banner__initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#ffffffe6;text-transform:uppercase;letter-spacing:-.5px}@media (max-width: 480px){.cp-banner__initials{font-size:16px}}.cp-banner__info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.cp-banner__name{font-size:17px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}@media (max-width: 480px){.cp-banner__name{font-size:14px}}.cp-banner__meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.cp-banner__email{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#fffc;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-banner__email svg{width:11px;height:11px}.cp-banner__email svg path{fill:#fffc}.cp-banner__badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:3px 8px;border-radius:99px;background:#fff3;color:#ffffffe6}.cp-banner__badge--update{background:#28a7454d;color:#a8f5c0}.cp-banner__loading{display:flex;align-items:center;gap:6px;font-size:11px;color:#ffffffb3;margin-top:2px}.cp-banner__loading .cp-spinner--sm{border-color:#fff6;border-top-color:#fff}.cp-logout-btn--banner{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;background:#ffffff1f;border:1px solid rgba(255,255,255,.25);color:#ffffffe6;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0}.cp-logout-btn--banner svg{width:15px;height:15px}.cp-logout-btn--banner svg path{fill:#ffffffe6}.cp-logout-btn--banner:hover{background:#dc3545bf;border-color:transparent;color:#fff}.cp-logout-btn--banner:hover svg path{fill:#fff}@media (max-width: 480px){.cp-logout-btn--banner{padding:7px 10px;font-size:11px}}.cp-alert{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:6px;margin:20px 24px 0;background:#dc35450f;border:1px solid rgba(220,53,69,.18);font-size:13px;color:#c0392b}.cp-alert svg path{fill:#c0392b}.cp-card{background:#fff;border:1px solid #e2eaf2;margin:16px 24px 0;border-radius:10px;overflow: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:13.5px;font-weight:700;color:#0c1620;margin:0 0 2px;line-height:1}.cp-card__sub{font-size:11px;color:#6b7c8a;margin:0;line-height:1}.cp-card__status{margin-left:auto;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#eef1f4;border:1.5px solid #d3dce3;display:flex;align-items:center;justify-content:center;transition:all .2s}.cp-card__status svg{width:14px;height:14px}.cp-card__status svg path{fill:#6b7c8a}.cp-card__status span{font-size:12px;font-weight:700;color:#6b7c8a}.cp-card__status--done{background:#28a745;border-color:#28a745}.cp-card__status--done svg path{fill:#fff}.cp-card__body{padding:20px 24px 16px}@media (max-width: 480px){.cp-card__body{padding:16px 16px 12px}}.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.cp-row.cp-row-triple,.cp-row.cp-row--3{grid-template-columns:1fr 1fr 1fr}.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:11.5px;font-weight:600;color:#3a4a57}.cp-field label .req{color:#4077ad;margin-left:2px}.cp-field input,.cp-field select{box-sizing:border-box;height:42px;border:1.5px solid #d3dce3;border-radius:6px;padding:0 12px;font-size:13.5px;color:#0c1620;background:#fff;width:100%;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;font-family:inherit}.cp-field input::placeholder,.cp-field select::placeholder{color:#aab8c2}.cp-field input:focus,.cp-field select:focus{outline:none;border-color:#4077ad;box-shadow:0 0 0 3px #4077ad26}.cp-field input.is-invalid,.cp-field select.is-invalid{border-color:#dc3545}.cp-field input.is-invalid:focus,.cp-field select.is-invalid:focus{box-shadow:0 0 0 3px #dc354526}.cp-select{position:relative}.cp-select:after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #6b7c8a;pointer-events:none}.cp-select select{cursor:pointer;padding-right:32px}.cp-pw-wrap{position:relative}.cp-pw-wrap input{padding-right:42px}.cp-pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;color:#6b7c8a}.cp-pw-toggle svg{width:18px;height:18px}.cp-pw-toggle svg path{fill:#6b7c8a}.cp-pw-toggle:hover svg path{fill:#4077ad}.cp-pw-success{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#16a34a;margin:4px 0 10px}.cp-pw-success svg path{fill:#16a34a}.cp-readonly-wrap{position:relative;display:flex;align-items:center}.cp-readonly-wrap svg{position:absolute;left:12px;width:15px;height:15px;flex-shrink:0;pointer-events:none}.cp-readonly-wrap svg path{fill:#4077ad}.cp-input-readonly{width:100%;box-sizing:border-box;height:42px;border:1.5px solid #d3dce3;border-radius:6px;padding:0 12px 0 36px;font-size:13.5px;color:#0c1620;background:#4077ad0a;cursor:default;font-family:inherit;font-weight:500}.cp-autofill-note{font-size:11px;color:#4077ad;margin-top:3px;display:flex;align-items:center;gap:4px}.cp-email-display{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 12px;background:#eef1f4;border:1.5px solid #d3dce3;border-radius:99px;font-size:12.5px;color:#0c1620;font-weight:500}.cp-email-display svg{width:14px;height:14px;flex-shrink:0}.cp-email-display svg path{fill:#4077ad}.cp-error{font-size:11.5px;color:#dc3545;margin-top:2px}.cp-terms-error{margin-top:4px}.cp-submit-error{margin-bottom:12px;font-size:13px;text-align:center}.cp-loading-hint{display:flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;margin-top:4px}.cp-new-user-hint{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#4077ad;background:#4077ad0f;border:1px solid rgba(64,119,173,.18);border-radius:6px;padding:9px 13px;margin:6px 0 12px}.cp-new-user-hint svg{width:15px;height:15px;flex-shrink:0}.cp-new-user-hint svg path{fill:#4077ad}.cp-agreements{display:flex;flex-direction:column;gap:10px;margin:24px 0 4px}.v1-agreement-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;border:1.5px solid #d3dce3;background:#fff;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #0000000a}.v1-agreement-card:hover{border-color:#bac8d3;box-shadow:0 2px 8px #00000012}.v1-agreement-card.v1-card--agreed{border-color:#b8d4ef;background:#ebf3fb}.v1-agreement-card.v1-card--invalid{border-color:#fecaca;background:#fff5f5}.v1-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#eef1f4;border:1px solid #d3dce3;display:flex;align-items:center;justify-content:center;color:#4077ad}.v1-card--agreed .v1-card-icon{background:#d4e8f8;border-color:#b8d4ef}.v1-card-body{flex:1 1 auto;min-width:0}.v1-card-title{font-size:13px;font-weight:600;color:#0c1620;margin:0 0 2px;line-height:1.3}.v1-card-sub{font-size:11.5px;color:#6b7c8a;margin:0}.v1-agree-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:8px;font-size:12px;font-weight:600;font-family:inherit;border:1.5px solid #4077AD;color:#4077ad;background:transparent;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}.v1-agree-btn:hover{background:#4077ad;color:#fff}.v1-agree-btn.v1-agree-btn--done{background:#4077ad;border-color:#4077ad;color:#fff}.cp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;margin-top:10px;background:#4077ad;border:none;border-radius:6px;font-size:13.5px;font-weight:700;letter-spacing:.3px;color:#fff;cursor:pointer;text-decoration:none;transition:background .15s,box-shadow .15s,transform .1s;font-family:inherit}.cp-btn:hover:not(:disabled){background:#335f8a;box-shadow:0 4px 12px #4077ad59}.cp-btn:active:not(:disabled){transform:scale(.99)}.cp-btn:disabled{opacity:.6;cursor:not-allowed}.cp-btn--submit{height:52px;font-size:15px;letter-spacing:.5px;background:linear-gradient(135deg,#4077ad,#335f8a);box-shadow:0 2px 8px #4077ad40;border-radius:8px;margin-top:0}.cp-btn--submit:hover:not(:disabled){box-shadow:0 6px 18px #4077ad66;filter:brightness(1.05)}.cp-btn--outline{background:#fff;color:#4077ad;border:1.5px solid #4077AD}.cp-btn--outline:hover:not(:disabled){background:#4077ad0d;box-shadow:none}.cp-btn--ghost{background:transparent;color:#6b7c8a;border:1.5px solid #d3dce3}.cp-btn--ghost:hover:not(:disabled){border-color:#4077ad;color:#4077ad;box-shadow:none}.cp-btn--sm{height:38px;font-size:12.5px}.cp-btn-link{background:none;border:none;font-family:inherit;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;margin-top:8px;padding:6px 0;text-decoration:underline}.cp-btn-link:hover{color:#4077ad}.cp-spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:cp-spin .7s linear infinite}.cp-spinner:not(.cp-spinner-btn){border-color:#4077ad4d;border-top-color:#4077ad}.cp-spinner--sm{width:11px;height:11px;border-color:#4077ad4d;border-top-color:#4077ad}@keyframes cp-spin{to{transform:rotate(360deg)}}.cp-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:14px;background:#f8fafc;border:1px solid #e2eaf2;border-radius:6px}.cp-toggle-row__info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.cp-toggle-row__label{font-size:13px;font-weight:600;color:#0c1620}.cp-toggle-row__label em{font-style:normal;font-size:11px;font-weight:500;color:#6b7c8a;margin-left:4px}.cp-toggle-row__hint{font-size:11px;color:#6b7c8a}.cp-toggle-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;cursor:pointer}.cp-toggle-switch input{opacity:0;width:0;height:0;position:absolute}.cp-toggle-switch input:checked+.cp-toggle-knob{background:#4077ad}.cp-toggle-switch input:checked+.cp-toggle-knob:before{transform:translate(18px)}.cp-toggle-knob{position:absolute;inset:0;background:#c8d5e0;border-radius:24px;transition:background .2s;cursor:pointer}.cp-toggle-knob:before{content:\"\";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .22s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0003}.cp-otp-wrap{margin-top:4px}.cp-otp-hint{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#6b7c8a;margin:0 0 12px}.cp-otp-hint svg path{fill:#6b7c8a}.cp-otp-hint strong{color:#0c1620}.cp-otp-timer{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.18);border-radius:99px;padding:4px 12px;margin-bottom:14px}.cp-otp-timer svg path{fill:#4077ad}.cp-otp-timer--expired{color:#dc3545;background:#dc354512;border-color:#dc354533}.cp-otp-timer--expired svg path{fill:#dc3545}.cp-otp-input{letter-spacing:.15em;font-size:16px;font-weight:600}.cp-otp-actions{display:flex;flex-direction:column;gap:0;margin-top:4px}.cp-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-form-footer{margin:16px 24px 0;background:#fff;border:1px solid #e2eaf2;border-radius:10px;padding:20px 24px;box-shadow:0 1px 3px #0000000a}@media (max-width: 860px){.cp-form-footer{margin:12px 16px 0}}@media (max-width: 480px){.cp-form-footer{margin:10px 12px 0;padding:16px;border-radius:8px}}.cp-terms{margin:0 0 16px}.cp-terms__label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:12.5px;color:#6b7c8a;line-height:1.7;margin:0}.cp-terms__label a{color:#4077ad;text-decoration:underline;font-weight:600}.cp-terms__label a:hover{color:#335f8a}.cp-terms__check{position:absolute;opacity:0;width:0;height:0}.cp-terms__box{width:17px;height:17px;flex-shrink:0;margin-top:2px;border:2px solid #d3dce3;border-radius:4px;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}.cp-terms__check:checked~.cp-terms__box{background:#4077ad;border-color:#4077ad}.cp-upload-area{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:120px;border:2px dashed #d3dce3;border-radius:6px;background:#eef1f4;cursor:pointer;transition:border-color .15s,background .15s;overflow:hidden}.cp-upload-area:hover{border-color:#4077ad;background:#4077ad08}.cp-upload-hidden{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.cp-upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px;text-align:center;pointer-events:none}.cp-upload-placeholder svg{width:32px;height:32px;opacity:.5}.cp-upload-placeholder svg path{fill:#6b7c8a}.cp-upload-placeholder span{font-size:12.5px;font-weight:600;color:#6b7c8a}.cp-upload-placeholder small{font-size:11px;color:#95a2ad}.cp-upload-preview{width:100%;object-fit:cover;display:block}.cp-upload-preview--avatar{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 8px #0000001f;margin:14px auto 0}.cp-upload-preview--logo{max-width:180px;max-height:80px;width:auto;height:auto;object-fit:contain;margin:14px auto 0}.cp-upload-change{font-size:11px;font-weight:600;color:#4077ad;margin-bottom:10px;pointer-events:none}.tc-modal-dialog{max-width:min(780px,96vw)}.tc-modal{border-radius:20px!important;border:none!important;overflow:hidden;box-shadow:0 32px 72px #00000038,0 6px 20px #0000001a!important;height:min(720px,90vh);display:flex;flex-direction:column}.tc-modal-header{display:flex;align-items:center;gap:13px;padding:20px 24px;background:#4077ad;border-bottom:none;flex-shrink:0}.tc-modal-header .tc-header-icon{width:38px;height:38px;background:#ffffff1f;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#93c5fd;flex-shrink:0}.tc-modal-header .tc-modal-title{font-size:16px;font-weight:700;color:#fff;margin:0;flex:1}.tc-modal-close{flex-shrink:0;background:#ffffff1f;border:none;border-radius:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#fffc;cursor:pointer;transition:background .15s,color .15s}.tc-modal-close:hover{background:#ffffff38;color:#fff}.tc-modal-body{flex:1 1 auto;overflow-y:auto;padding:26px 32px;background:#fff;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.tc-modal-body::-webkit-scrollbar{width:5px}.tc-modal-body::-webkit-scrollbar-track{background:transparent}.tc-modal-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}.tc-modal-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tc-modal-footer{display:flex;justify-content:flex-end;align-items:center;padding:14px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.tc-btn{font-size:13.5px;font-weight:600;font-family:inherit;padding:9px 24px;border-radius:10px;border:none;cursor:pointer;transition:background .15s ease}.tc-btn.tc-btn-close{background:#4077ad;color:#fff}.tc-btn.tc-btn-close:hover{background:#335f8a}.cp-logout-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;border:1.5px solid #e2eaf2;background:#fff;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0}.cp-logout-btn svg{width:16px;height:16px}.cp-logout-btn svg path{fill:#6b7c8a}.cp-logout-btn:hover{border-color:#dc3545;color:#dc3545}.cp-logout-btn:hover svg path{fill:#dc3545}.cp-logout-btn--mobile{margin-left:auto}.cp-biz-layout{display:grid;grid-template-columns:1fr 160px;gap:20px;align-items:start}@media (max-width: 640px){.cp-biz-layout{grid-template-columns:1fr}}.cp-biz-fields{display:flex;flex-direction:column}.cp-biz-logo{display:flex;flex-direction:column;gap:8px}.cp-biz-logo__label{font-size:11.5px;font-weight:600;color:#3a4a57}.cp-biz-logo__area{border:2px dashed #d3dce3;border-radius:6px;background:#f8fafc;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:140px;padding:12px;text-align:center;transition:border-color .15s}.cp-biz-logo__area:hover{border-color:#4077ad}.cp-biz-logo__img{width:100%;max-height:100px;object-fit:contain;border-radius:4px}.cp-biz-logo__change{font-size:11px;color:#6b7c8a;margin-top:6px;display:block}.cp-biz-logo__placeholder{display:flex;flex-direction:column;align-items:center;gap:6px}.cp-biz-logo__placeholder svg{width:28px;height:28px}.cp-biz-logo__placeholder svg path{fill:#aab8c2}.cp-biz-logo__placeholder span{font-size:11.5px;font-weight:600;color:#6b7c8a}.cp-biz-logo__placeholder small{font-size:10px;color:#aab8c2}.cp-profile-logo-area{border-radius:50%!important;min-height:140px!important;width:140px!important;height:140px!important;margin:0 auto;overflow:hidden;padding:0!important;position:relative}.cp-profile-logo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.cp-profile-logo-area .cp-biz-logo__change{position:absolute;bottom:0;left:0;right:0;background:#0000007a;color:#fff!important;padding:7px 0 5px;text-align:center;font-size:10.5px;font-weight:600;margin-top:0!important;opacity:0;transition:opacity .18s}.cp-profile-logo-area:hover .cp-biz-logo__change{opacity:1}.cp-lookup-loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:48px 44px!important}.cp-lookup-loading p{font-size:14px;color:#6b7c8a;margin:0}.cp-lookup-spinner{width:32px;height:32px;border:3px solid rgba(64,119,173,.2);border-top-color:#4077ad}.cp-anf-card{width:100%;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 6px -1px #00000012,0 16px 40px -4px #0c16201f;border:1px solid #e2eaf2}.cp-anf-card__header{display:flex;align-items:center;gap:16px;padding:28px 28px 20px;border-bottom:1px solid #f0f4f8}.cp-anf-card__identity{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.cp-anf-card__name{font-size:18px;font-weight:800;color:#0c1620;margin:0;line-height:1.2}.cp-anf-card__email{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#6b7c8a}.cp-anf-card__email svg{width:12px;height:12px}.cp-anf-card__email svg path{fill:#6b7c8a}.cp-anf-card__details{padding:16px 28px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid #f0f4f8}.cp-anf-card__notice{display:flex;align-items:center;gap:10px;padding:14px 28px;background:#4077ad0a;border-bottom:1px solid #f0f4f8;font-size:13px;color:#4077ad;font-weight:600}.cp-anf-card__notice svg{width:18px;height:18px;flex-shrink:0}.cp-anf-card__notice svg path{fill:#4077ad}.cp-anf-avatar{width:60px;height:60px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#4077ad,#335f8a);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:-.5px}.cp-anf-roles{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}.cp-anf-role{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;padding:3px 8px;border-radius:99px;background:#4077ad14;color:#4077ad;border:1px solid rgba(64,119,173,.18)}.cp-anf-detail{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:#6b7c8a;line-height:1.5}.cp-anf-detail svg{width:14px;height:14px;flex-shrink:0;margin-top:1px}.cp-anf-detail svg path{fill:#6b7c8a}.cp-anf-signin-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;padding:0 24px;background:linear-gradient(135deg,#4077ad,#335f8a);border:none;border-radius:0;font-size:15px;font-weight:700;letter-spacing:.3px;color:#fff;cursor:pointer;text-decoration:none;font-family:inherit;transition:filter .15s,box-shadow .15s;-webkit-appearance:none}.cp-anf-signin-btn svg{width:18px;height:18px;flex-shrink:0}.cp-anf-signin-btn svg path{fill:#fff}.cp-anf-signin-btn:hover{filter:brightness(1.07);box-shadow:inset 0 -3px #00000026}\n"] }]
+            args: [{ selector: 'app-claim-process', standalone: false, template: "<h2 class=\"sr-only\">Claim Your Account</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-logo-wrap\">\n      <svg class=\"cp-brand-logo-svg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 107.928 95.043\">\n        <path\n          d=\"M16.62,76.812a88.959,88.959,0,0,0,12.033-2.091,36.373,36.373,0,0,0,51.459.182h.031a87.176,87.176,0,0,0,11.714,1.91,47.928,47.928,0,0,1-75.237,0ZM.587,71.759c-1.441-3.048.553-7.467,5.2-12.463a.355.355,0,0,1,.487-.116.352.352,0,0,1,.12.485,4.269,4.269,0,0,0-.606,4.026c1.949,4.351,14.87,2.857,31.617-2.9a.783.783,0,0,1,.748,0c2.495,1.358,5.061,2.463,7.639,3.659l-.011-.017a16.755,16.755,0,0,1,2.258,1.1.963.963,0,0,1,0,1.794c-14.543,5.53-27.565,8.5-36.349,8.5C5.846,75.837,1.875,74.519.587,71.759Zm46.34-9.989C17.443,48.164-3.376,30.437.454,22.289c1.374-3.064,6.021-4.351,12.993-4.051a.346.346,0,1,1,0,.686,4.661,4.661,0,0,0-3.465,2.163C7.264,26.919,25.549,41.126,51.107,52.859s48.423,16.61,51.117,10.766a4.685,4.685,0,0,0-.606-4.029.5.5,0,0,1,0-.091.376.376,0,0,1,.37-.369.4.4,0,0,1,.248.091l-.011.011c4.625,5,6.644,9.349,5.111,12.408-1.319,2.793-5.309,4.119-11.163,4.119C84.8,75.764,66.395,70.755,46.927,61.77Zm-36.89,2.868a49.831,49.831,0,0,1-3-16.968,51.991,51.991,0,0,1,.812-8.955A98.753,98.753,0,0,0,17.941,46.8a4.375,4.375,0,0,0-.019.606,40.584,40.584,0,0,0,3.432,16.431,35.288,35.288,0,0,1-8.129.949Q11.63,64.783,10.037,64.639Zm77.4-.712a40.586,40.586,0,0,0,3.27-16.24V46.259a97.668,97.668,0,0,0,10.062-8.2,51.439,51.439,0,0,1,.859,9.377A49.608,49.608,0,0,1,98.587,64.49a30.815,30.815,0,0,1-11.148-.563Zm-.006,0h.006l-.006.015ZM69.57,57.2C66.316,56,63,54.735,59.6,53.314a.924.924,0,0,1,0-1.662c24-11.51,40.992-24.91,38.339-30.5a4.369,4.369,0,0,0-3.46-2.163.346.346,0,1,1,0-.692c6.855-.3,11.544.986,12.984,4.051C110.926,29.575,94.779,44.4,70.4,57.2a1.139,1.139,0,0,1-.416.079A1.156,1.156,0,0,1,69.57,57.2ZM12.343,25.331A46.369,46.369,0,0,1,54.463.008,45.874,45.874,0,0,1,96.1,24.643a33.823,33.823,0,0,1-8.04,8.264A35.874,35.874,0,0,0,54.208,9.589,35.431,35.431,0,0,0,20.38,33.259,39.308,39.308,0,0,1,12.343,25.331Z\" />\n      </svg>\n      <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-brand-logo-text\">\n        {{ privacyAndTerms?.companyName }}\n      </span>\n    </div>\n\n    <div class=\"cp-brand-hero\">\n      <span class=\"cp-brand-eyebrow\">Claim Your Account</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>\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        <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\">\n\n      <!-- Logo -->\n      <div class=\"cp-logo\">\n        <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\"\n          [alt]=\"privacyAndTerms?.companyName || 'Company Logo'\" class=\"cp-logo-img\" />\n        <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-logo-fallback\">{{ privacyAndTerms?.companyName }}</span>\n      </div>\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' }}</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      <!-- Sign out -->\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-sb-signout\" (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\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    </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            <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\" 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\" 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</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>\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\" [class.cp-role-cards--locked]=\"isInitialSetupCompleted\">\n                <ng-container *ngFor=\"let role of userViewRoles\">\n                  <div class=\"cp-role-card\"\n                    [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\" *ngIf=\"lockedToTypeFromParam && sectionRoleDone\">\n                <svg viewBox=\"0 0 24 24\">\n                  <path 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\" *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\" *ngIf=\"!sectionRoleDone && validatePage === 1 && !isInitialSetupCompleted && !lockedToTypeFromParam\">Please\n                select a role</div>\n            </div>\n\n            <ng-container *ngIf=\"!isLoadingUser\" [formGroup]=\"userForm\">\n\n              <!-- New user: optional password toggle -->\n              <div class=\"cp-toggle-row\" *ngIf=\"!userHasExistingDetails\">\n                <div class=\"cp-toggle-row__info\">\n                  <span class=\"cp-toggle-row__label\">Set Password <em>(Optional)</em></span>\n                  <span class=\"cp-toggle-row__hint\">Leave off to use existing credentials</span>\n                </div>\n                <label class=\"cp-toggle-switch\">\n                  <input type=\"checkbox\" [checked]=\"setPasswordEnabled\" (change)=\"toggleSetPassword()\">\n                  <span class=\"cp-toggle-knob\"></span>\n                </label>\n              </div>\n\n              <div class=\"cp-row\" *ngIf=\"!userHasExistingDetails && setPasswordEnabled\">\n                <div class=\"cp-field\">\n                  <label for=\"password\">Password</label>\n                  <div class=\"cp-pw-wrap\">\n                    <input [type]=\"showPassword ? 'text' : 'password'\" id=\"password\" 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 class=\"cp-error\" *ngIf=\"u['password'].errors?.['minlength'] && u['password'].touched\">Min. 8\n                    characters</div>\n                </div>\n                <div class=\"cp-field\">\n                  <label for=\"confirmPassword\">Confirm Password</label>\n                  <div class=\"cp-pw-wrap\">\n                    <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPassword\"\n                      formControlName=\"confirmPassword\" placeholder=\"Repeat password\"\n                      [class.is-invalid]=\"userForm.errors?.['passwordMismatch'] && u['confirmPassword'].touched\"\n                      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 class=\"cp-error\" *ngIf=\"userForm.errors?.['passwordMismatch'] && u['confirmPassword'].touched\">\n                    Passwords do not match</div>\n                </div>\n              </div>\n\n              <!-- Existing user: reset toggle -->\n              <div class=\"cp-toggle-row\" *ngIf=\"userHasExistingDetails\">\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=\"userHasExistingDetails && 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:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-brand-left{position:static;height:auto;width:100%;min-width:unset;padding:32px 24px 28px;border-right:none;border-bottom:1px solid #e2eaf2}}.cp-brand-logo-wrap{margin-bottom:10px}.cp-brand-logo-img{max-height:48px;max-width:200px;object-fit:contain;display:block}.cp-brand-logo-svg{display:block;height:48px;width:auto;max-width:200px;fill:#4077ad}.cp-brand-logo-text{font-size:20px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-brand-hero{margin-bottom:15px}.cp-brand-eyebrow{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.16);border-radius:99px;padding:3px 10px;margin-bottom:16px}.cp-brand-heading{font-size:26px;font-weight:800;color:#0c1620;line-height:1.22;letter-spacing:-.4px;margin:0 0 14px}@media (max-width: 860px){.cp-brand-heading{font-size:21px}}.cp-brand-intro{font-size:13.5px;color:#6b7c8a;line-height:1.78;margin:0}.cp-brand-features{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;gap:6px}.cp-brand-feature{display:flex;align-items:flex-start;gap:13px;padding:13px 15px;border-radius:9px;background:#f8fafc;border:1px solid #e8edf3;transition:border-color .18s,background .18s}.cp-brand-feature:hover{background:#4077ad08;border-color:#4077ad38}.cp-brand-feature__icon{width:34px;height:34px;flex-shrink:0;border-radius:8px;background:#4077ad14;display:flex;align-items:center;justify-content:center}.cp-brand-feature__icon svg{width:17px;height:17px}.cp-brand-feature__icon svg path{fill:#4077ad}.cp-brand-feature__body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.cp-brand-feature__body strong{font-size:12.5px;font-weight:700;color:#0c1620;line-height:1.2}.cp-brand-feature__body span{font-size:11.5px;color:#6b7c8a;line-height:1.62}.cp-brand-contact{display:flex;flex-direction:column;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid #e8edf3}.cp-brand-contact__link{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-brand-contact__link svg{width:14px;height:14px;flex-shrink:0}.cp-brand-contact__link svg path{fill:currentColor}.cp-brand-contact__link:hover{color:#4077ad}.cp-brand-contact__link--website{font-weight:600;color:#4077ad}.cp-brand-contact__link--website:hover{color:#335f8a}.cp-brand-contact__ext{width:11px!important;height:11px!important;opacity:.65}.cp-brand-right{flex:1;background:#eef1f4;display:flex;align-items:center;justify-content:center;padding:40px 28px;min-width:0}@media (max-width: 860px){.cp-brand-right{padding:28px 20px 48px}}.cp-brand-state{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center}.cp-brand-state .cp-invalid-card,.cp-brand-state .cp-anf-card{width:100%}.cp-left{width:40%;min-width:300px;background:#fff;border-right:1px solid #e2eaf2;display:flex;flex-direction:column;padding:44px 40px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-left{display:none}}.cp-left-inner{display:flex;flex-direction:column;height:100%;gap:0}.cp-logo{margin-bottom:24px}.cp-logo-img{max-height:44px;max-width:180px;object-fit:contain;display:block}.cp-logo-fallback{font-size:18px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-sb-user{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:6px;background:#4077ad0d;border:1px solid rgba(64,119,173,.12);margin-bottom:20px}.cp-sb-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:#4077ad;display:flex;align-items:center;justify-content:center;overflow:hidden}.cp-sb-avatar__img{width:100%;height:100%;object-fit:cover}.cp-sb-avatar__initials{font-size:15px;font-weight:700;color:#fff;text-transform:uppercase}.cp-sb-user__info{display:flex;flex-direction:column;gap:2px;min-width:0}.cp-sb-user__info strong{font-size:13px;font-weight:700;color:#0c1620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-user__info span{font-size:11px;color:#6b7c8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-signout{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;margin-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:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#4077ad;margin-bottom:6px}.cp-sb-intro{font-size:12px;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:10.5px;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:11.5px;font-weight:700;color:#0c1620}.cp-sb-feature div span{font-size:11px;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:12.5px;font-weight:700;color:#0c1620;line-height:1}.cp-step__sub{font-size:11px;color:#6b7c8a;line-height:1.4}.cp-step__badge{width:20px;height:20px;border-radius:50%;flex-shrink:0;margin-top:7px;background:#d3dce3;display:flex;align-items:center;justify-content:center;transition:background .2s}.cp-step__badge svg{width:12px;height:12px}.cp-step__badge svg path{fill:#fff}.cp-step__badge span{font-size:10px;font-weight:700;color:#6b7c8a}.cp-step__badge--done{background:#28a745}.cp-step__badge--done span{display:none}.cp-step--done .cp-step__icon{background:#4077ad14;border-color:#4077ad}.cp-step--done .cp-step__icon svg path{fill:#4077ad}.cp-step--done .cp-step__label{color:#4077ad}.cp-left-contact{display:flex;flex-direction:column;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid #e8edf3}.cp-contact-link{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-contact-link svg{width:14px;height:14px;flex-shrink:0}.cp-contact-link svg path{fill:currentColor}.cp-contact-link:hover{color:#4077ad}.cp-left-footnote{margin-top:18px;font-size:12.5px}.cp-left-footnote a{display:inline-flex;align-items:center;gap:5px;color:#4077ad;text-decoration:none;font-weight:600;transition:color .15s}.cp-left-footnote a svg{width:12px;height:12px}.cp-left-footnote a svg path{fill:#4077ad}.cp-left-footnote a:hover{color:#335f8a;text-decoration:underline}.cp-mobile-bar{display:none;align-items:center;justify-content:space-between;padding:14px 20px;background:#fff;border-bottom:1px solid #e2eaf2}@media (max-width: 860px){.cp-mobile-bar{display:flex}}.cp-mobile-logo{max-height:36px;max-width:160px;object-fit:contain}.cp-mobile-company{font-size:18px;font-weight:800;color:#4077ad}.cp-right{flex:1;background:#f0f4f8;display:flex;flex-direction:column;align-items:center;padding:0 0 64px;overflow-y:auto;min-width:0}@media (max-width: 860px){.cp-right{padding:0 0 48px}}.cp-invalid-page,.cp-success-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#eef1f4;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;padding:24px}.cp-invalid-card,.cp-success-card{background:#fff;border-radius:12px;box-shadow:0 4px 6px -1px #00000012,0 16px 40px -4px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-invalid-card h2,.cp-success-card h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-invalid-card p,.cp-success-card p{font-size:14px;color:#6b7c8a;line-height:1.7;margin-bottom:28px}.cp-invalid-icon,.cp-success-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-invalid-icon svg,.cp-success-icon svg{width:32px;height:32px}.cp-invalid-icon{background:#dc35451a}.cp-invalid-icon svg path{fill:#dc3545}.cp-invalid-icon--warn{background:#f59e0b1a}.cp-invalid-icon--warn svg path{fill:#f59e0b}.cp-success-icon{background:#28a7451a}.cp-success-icon svg path{fill:#28a745}.cp-anf-hint{font-size:13px;color:#6b7280;margin-top:4px}.cp-form-wrap{width:100%;flex:1;display:flex;flex-direction:column;gap:0;padding-bottom:32px}.cp-banner{width:100%;display:flex;align-items:center;gap:20px;padding:20px 32px;background:linear-gradient(135deg,#4077ad,#2f5880);border-bottom:1px solid rgba(0,0,0,.12);position:sticky;top:0;z-index:10;flex-shrink:0}@media (max-width: 860px){.cp-banner{padding:16px 20px;position:static}}@media (max-width: 480px){.cp-banner{padding:14px 16px;gap:12px}}.cp-banner__avatar{position:relative;flex-shrink:0;width:60px;height:60px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);overflow:hidden;background:#ffffff26}@media (max-width: 480px){.cp-banner__avatar{width:46px;height:46px}}.cp-banner__img{width:100%;height:100%;object-fit:cover;display:block}.cp-banner__initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#ffffffe6;text-transform:uppercase;letter-spacing:-.5px}@media (max-width: 480px){.cp-banner__initials{font-size:16px}}.cp-banner__info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.cp-banner__name{font-size:17px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}@media (max-width: 480px){.cp-banner__name{font-size:14px}}.cp-banner__meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.cp-banner__email{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#fffc;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-banner__email svg{width:11px;height:11px}.cp-banner__email svg path{fill:#fffc}.cp-banner__badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:3px 8px;border-radius:99px;background:#fff3;color:#ffffffe6}.cp-banner__badge--update{background:#28a7454d;color:#a8f5c0}.cp-banner__loading{display:flex;align-items:center;gap:6px;font-size:11px;color:#ffffffb3;margin-top:2px}.cp-banner__loading .cp-spinner--sm{border-color:#fff6;border-top-color:#fff}.cp-logout-btn--banner{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;background:#ffffff1f;border:1px solid rgba(255,255,255,.25);color:#ffffffe6;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0}.cp-logout-btn--banner svg{width:15px;height:15px}.cp-logout-btn--banner svg path{fill:#ffffffe6}.cp-logout-btn--banner:hover{background:#dc3545bf;border-color:transparent;color:#fff}.cp-logout-btn--banner:hover svg path{fill:#fff}@media (max-width: 480px){.cp-logout-btn--banner{padding:7px 10px;font-size:11px}}.cp-alert{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:6px;margin:20px 24px 0;background:#dc35450f;border:1px solid rgba(220,53,69,.18);font-size:13px;color:#c0392b}.cp-alert svg path{fill:#c0392b}.cp-card{background:#fff;border:1px solid #e2eaf2;margin:16px 24px 0;border-radius:10px;overflow: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:13.5px;font-weight:700;color:#0c1620;margin:0 0 2px;line-height:1}.cp-card__sub{font-size:11px;color:#6b7c8a;margin:0;line-height:1}.cp-card__status{margin-left:auto;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#eef1f4;border:1.5px solid #d3dce3;display:flex;align-items:center;justify-content:center;transition:all .2s}.cp-card__status svg{width:14px;height:14px}.cp-card__status svg path{fill:#6b7c8a}.cp-card__status span{font-size:12px;font-weight:700;color:#6b7c8a}.cp-card__status--done{background:#28a745;border-color:#28a745}.cp-card__status--done svg path{fill:#fff}.cp-card__body{padding:20px 24px 16px}@media (max-width: 480px){.cp-card__body{padding:16px 16px 12px}}.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.cp-row.cp-row-triple,.cp-row.cp-row--3{grid-template-columns:1fr 1fr 1fr}.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:11.5px;font-weight:600;color:#3a4a57}.cp-field label .req{color:#4077ad;margin-left:2px}.cp-field input,.cp-field select{box-sizing:border-box;height:42px;border:1.5px solid #d3dce3;border-radius:6px;padding:0 12px;font-size:13.5px;color:#0c1620;background:#fff;width:100%;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;font-family:inherit}.cp-field input::placeholder,.cp-field select::placeholder{color:#aab8c2}.cp-field input:focus,.cp-field select:focus{outline:none;border-color:#4077ad;box-shadow:0 0 0 3px #4077ad26}.cp-field input.is-invalid,.cp-field select.is-invalid{border-color:#dc3545}.cp-field input.is-invalid:focus,.cp-field select.is-invalid:focus{box-shadow:0 0 0 3px #dc354526}.cp-select{position:relative}.cp-select:after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #6b7c8a;pointer-events:none}.cp-select select{cursor:pointer;padding-right:32px}.cp-pw-wrap{position:relative}.cp-pw-wrap input{padding-right:42px}.cp-pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;color:#6b7c8a}.cp-pw-toggle svg{width:18px;height:18px}.cp-pw-toggle svg path{fill:#6b7c8a}.cp-pw-toggle:hover svg path{fill:#4077ad}.cp-pw-success{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#16a34a;margin:4px 0 10px}.cp-pw-success svg path{fill:#16a34a}.cp-readonly-wrap{position:relative;display:flex;align-items:center}.cp-readonly-wrap svg{position:absolute;left:12px;width:15px;height:15px;flex-shrink:0;pointer-events:none}.cp-readonly-wrap svg path{fill:#4077ad}.cp-input-readonly{width:100%;box-sizing:border-box;height:42px;border:1.5px solid #d3dce3;border-radius:6px;padding:0 12px 0 36px;font-size:13.5px;color:#0c1620;background:#4077ad0a;cursor:default;font-family:inherit;font-weight:500}.cp-autofill-note{font-size:11px;color:#4077ad;margin-top:3px;display:flex;align-items:center;gap:4px}.cp-email-display{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 12px;background:#eef1f4;border:1.5px solid #d3dce3;border-radius:99px;font-size:12.5px;color:#0c1620;font-weight:500}.cp-email-display svg{width:14px;height:14px;flex-shrink:0}.cp-email-display svg path{fill:#4077ad}.cp-error{font-size:11.5px;color:#dc3545;margin-top:2px}.cp-terms-error{margin-top:4px}.cp-submit-error{margin-bottom:12px;font-size:13px;text-align:center}.cp-loading-hint{display:flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;margin-top:4px}.cp-new-user-hint{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#4077ad;background:#4077ad0f;border:1px solid rgba(64,119,173,.18);border-radius:6px;padding:9px 13px;margin:6px 0 12px}.cp-new-user-hint svg{width:15px;height:15px;flex-shrink:0}.cp-new-user-hint svg path{fill:#4077ad}.cp-agreements{display:flex;flex-direction:column;gap:10px;margin:24px 0 4px}.v1-agreement-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;border:1.5px solid #d3dce3;background:#fff;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #0000000a}.v1-agreement-card:hover{border-color:#bac8d3;box-shadow:0 2px 8px #00000012}.v1-agreement-card.v1-card--agreed{border-color:#b8d4ef;background:#ebf3fb}.v1-agreement-card.v1-card--invalid{border-color:#fecaca;background:#fff5f5}.v1-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#eef1f4;border:1px solid #d3dce3;display:flex;align-items:center;justify-content:center;color:#4077ad}.v1-card--agreed .v1-card-icon{background:#d4e8f8;border-color:#b8d4ef}.v1-card-body{flex:1 1 auto;min-width:0}.v1-card-title{font-size:13px;font-weight:600;color:#0c1620;margin:0 0 2px;line-height:1.3}.v1-card-sub{font-size:11.5px;color:#6b7c8a;margin:0}.v1-agree-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:8px;font-size:12px;font-weight:600;font-family:inherit;border:1.5px solid #4077AD;color:#4077ad;background:transparent;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}.v1-agree-btn:hover{background:#4077ad;color:#fff}.v1-agree-btn.v1-agree-btn--done{background:#4077ad;border-color:#4077ad;color:#fff}.cp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;margin-top:10px;background:#4077ad;border:none;border-radius:6px;font-size:13.5px;font-weight:700;letter-spacing:.3px;color:#fff;cursor:pointer;text-decoration:none;transition:background .15s,box-shadow .15s,transform .1s;font-family:inherit}.cp-btn:hover:not(:disabled){background:#335f8a;box-shadow:0 4px 12px #4077ad59}.cp-btn:active:not(:disabled){transform:scale(.99)}.cp-btn:disabled{opacity:.6;cursor:not-allowed}.cp-btn--submit{height:52px;font-size:15px;letter-spacing:.5px;background:linear-gradient(135deg,#4077ad,#335f8a);box-shadow:0 2px 8px #4077ad40;border-radius:8px;margin-top:0}.cp-btn--submit:hover:not(:disabled){box-shadow:0 6px 18px #4077ad66;filter:brightness(1.05)}.cp-btn--outline{background:#fff;color:#4077ad;border:1.5px solid #4077AD}.cp-btn--outline:hover:not(:disabled){background:#4077ad0d;box-shadow:none}.cp-btn--ghost{background:transparent;color:#6b7c8a;border:1.5px solid #d3dce3}.cp-btn--ghost:hover:not(:disabled){border-color:#4077ad;color:#4077ad;box-shadow:none}.cp-btn--sm{height:38px;font-size:12.5px}.cp-btn-link{background:none;border:none;font-family:inherit;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;margin-top:8px;padding:6px 0;text-decoration:underline}.cp-btn-link:hover{color:#4077ad}.cp-spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:cp-spin .7s linear infinite}.cp-spinner:not(.cp-spinner-btn){border-color:#4077ad4d;border-top-color:#4077ad}.cp-spinner--sm{width:11px;height:11px;border-color:#4077ad4d;border-top-color:#4077ad}@keyframes cp-spin{to{transform:rotate(360deg)}}.cp-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:14px;background:#f8fafc;border:1px solid #e2eaf2;border-radius:6px}.cp-toggle-row__info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.cp-toggle-row__label{font-size:13px;font-weight:600;color:#0c1620}.cp-toggle-row__label em{font-style:normal;font-size:11px;font-weight:500;color:#6b7c8a;margin-left:4px}.cp-toggle-row__hint{font-size:11px;color:#6b7c8a}.cp-toggle-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;cursor:pointer}.cp-toggle-switch input{opacity:0;width:0;height:0;position:absolute}.cp-toggle-switch input:checked+.cp-toggle-knob{background:#4077ad}.cp-toggle-switch input:checked+.cp-toggle-knob:before{transform:translate(18px)}.cp-toggle-knob{position:absolute;inset:0;background:#c8d5e0;border-radius:24px;transition:background .2s;cursor:pointer}.cp-toggle-knob:before{content:\"\";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .22s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0003}.cp-otp-wrap{margin-top:4px}.cp-otp-hint{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#6b7c8a;margin:0 0 12px}.cp-otp-hint svg path{fill:#6b7c8a}.cp-otp-hint strong{color:#0c1620}.cp-otp-timer{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.18);border-radius:99px;padding:4px 12px;margin-bottom:14px}.cp-otp-timer svg path{fill:#4077ad}.cp-otp-timer--expired{color:#dc3545;background:#dc354512;border-color:#dc354533}.cp-otp-timer--expired svg path{fill:#dc3545}.cp-otp-input{letter-spacing:.15em;font-size:16px;font-weight:600}.cp-otp-actions{display:flex;flex-direction:column;gap:0;margin-top:4px}.cp-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}.cp-terms__check:checked~.cp-terms__box{background:#4077ad;border-color:#4077ad}.cp-upload-area{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:120px;border:2px dashed #d3dce3;border-radius:6px;background:#eef1f4;cursor:pointer;transition:border-color .15s,background .15s;overflow:hidden}.cp-upload-area:hover{border-color:#4077ad;background:#4077ad08}.cp-upload-hidden{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.cp-upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px;text-align:center;pointer-events:none}.cp-upload-placeholder svg{width:32px;height:32px;opacity:.5}.cp-upload-placeholder svg path{fill:#6b7c8a}.cp-upload-placeholder span{font-size:12.5px;font-weight:600;color:#6b7c8a}.cp-upload-placeholder small{font-size:11px;color:#95a2ad}.cp-upload-preview{width:100%;object-fit:cover;display:block}.cp-upload-preview--avatar{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 8px #0000001f;margin:14px auto 0}.cp-upload-preview--logo{max-width:180px;max-height:80px;width:auto;height:auto;object-fit:contain;margin:14px auto 0}.cp-upload-change{font-size:11px;font-weight:600;color:#4077ad;margin-bottom:10px;pointer-events:none}.tc-modal-dialog{max-width:min(780px,96vw)}.tc-modal{border-radius:20px!important;border:none!important;overflow:hidden;box-shadow:0 32px 72px #00000038,0 6px 20px #0000001a!important;height:min(720px,90vh);display:flex;flex-direction:column}.tc-modal-header{display:flex;align-items:center;gap:13px;padding:20px 24px;background:#4077ad;border-bottom:none;flex-shrink:0}.tc-modal-header .tc-header-icon{width:38px;height:38px;background:#ffffff1f;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#93c5fd;flex-shrink:0}.tc-modal-header .tc-modal-title{font-size:16px;font-weight:700;color:#fff;margin:0;flex:1}.tc-modal-close{flex-shrink:0;background:#ffffff1f;border:none;border-radius:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#fffc;cursor:pointer;transition:background .15s,color .15s}.tc-modal-close:hover{background:#ffffff38;color:#fff}.tc-modal-body{flex:1 1 auto;overflow-y:auto;padding:26px 32px;background:#fff;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.tc-modal-body::-webkit-scrollbar{width:5px}.tc-modal-body::-webkit-scrollbar-track{background:transparent}.tc-modal-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}.tc-modal-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tc-modal-footer{display:flex;justify-content:flex-end;align-items:center;padding:14px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.tc-btn{font-size:13.5px;font-weight:600;font-family:inherit;padding:9px 24px;border-radius:10px;border:none;cursor:pointer;transition:background .15s ease}.tc-btn.tc-btn-close{background:#4077ad;color:#fff}.tc-btn.tc-btn-close:hover{background:#335f8a}.cp-logout-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;border:1.5px solid #e2eaf2;background:#fff;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0}.cp-logout-btn svg{width:16px;height:16px}.cp-logout-btn svg path{fill:#6b7c8a}.cp-logout-btn:hover{border-color:#dc3545;color:#dc3545}.cp-logout-btn:hover svg path{fill:#dc3545}.cp-logout-btn--mobile{margin-left:auto}.cp-biz-layout{display:grid;grid-template-columns:1fr 160px;gap:20px;align-items:start}@media (max-width: 640px){.cp-biz-layout{grid-template-columns:1fr}}.cp-biz-fields{display:flex;flex-direction:column}.cp-biz-logo{display:flex;flex-direction:column;gap:8px}.cp-biz-logo__label{font-size:11.5px;font-weight:600;color:#3a4a57}.cp-biz-logo__area{border:2px dashed #d3dce3;border-radius:6px;background:#f8fafc;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:140px;padding:12px;text-align:center;transition:border-color .15s}.cp-biz-logo__area:hover{border-color:#4077ad}.cp-biz-logo__img{width:100%;max-height:100px;object-fit:contain;border-radius:4px}.cp-biz-logo__change{font-size:11px;color:#6b7c8a;margin-top:6px;display:block}.cp-biz-logo__placeholder{display:flex;flex-direction:column;align-items:center;gap:6px}.cp-biz-logo__placeholder svg{width:28px;height:28px}.cp-biz-logo__placeholder svg path{fill:#aab8c2}.cp-biz-logo__placeholder span{font-size:11.5px;font-weight:600;color:#6b7c8a}.cp-biz-logo__placeholder small{font-size:10px;color:#aab8c2}.cp-profile-logo-area{border-radius:50%!important;min-height:140px!important;width:140px!important;height:140px!important;margin:0 auto;overflow:hidden;padding:0!important;position:relative}.cp-profile-logo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.cp-profile-logo-area .cp-biz-logo__change{position:absolute;bottom:0;left:0;right:0;background:#0000007a;color:#fff!important;padding:7px 0 5px;text-align:center;font-size:10.5px;font-weight:600;margin-top:0!important;opacity:0;transition:opacity .18s}.cp-profile-logo-area:hover .cp-biz-logo__change{opacity:1}.cp-lookup-loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:48px 44px!important}.cp-lookup-loading p{font-size:14px;color:#6b7c8a;margin:0}.cp-lookup-spinner{width:32px;height:32px;border:3px solid rgba(64,119,173,.2);border-top-color:#4077ad}.cp-anf-card{width:100%;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 6px -1px #00000012,0 16px 40px -4px #0c16201f;border:1px solid #e2eaf2}.cp-anf-card__header{display:flex;align-items:center;gap:16px;padding:28px 28px 20px;border-bottom:1px solid #f0f4f8}.cp-anf-card__identity{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.cp-anf-card__name{font-size:18px;font-weight:800;color:#0c1620;margin:0;line-height:1.2}.cp-anf-card__email{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#6b7c8a}.cp-anf-card__email svg{width:12px;height:12px}.cp-anf-card__email svg path{fill:#6b7c8a}.cp-anf-card__details{padding:16px 28px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid #f0f4f8}.cp-anf-card__notice{display:flex;align-items:center;gap:10px;padding:14px 28px;background:#4077ad0a;border-bottom:1px solid #f0f4f8;font-size:13px;color:#4077ad;font-weight:600}.cp-anf-card__notice svg{width:18px;height:18px;flex-shrink:0}.cp-anf-card__notice svg path{fill:#4077ad}.cp-anf-avatar{width:60px;height:60px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#4077ad,#335f8a);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:-.5px}.cp-anf-roles{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}.cp-anf-role{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;padding:3px 8px;border-radius:99px;background:#4077ad14;color:#4077ad;border:1px solid rgba(64,119,173,.18)}.cp-anf-detail{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:#6b7c8a;line-height:1.5}.cp-anf-detail svg{width:14px;height:14px;flex-shrink:0;margin-top:1px}.cp-anf-detail svg path{fill:#6b7c8a}.cp-anf-signin-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;padding:0 24px;background:linear-gradient(135deg,#4077ad,#335f8a);border:none;border-radius:0;font-size:15px;font-weight:700;letter-spacing:.3px;color:#fff;cursor:pointer;text-decoration:none;font-family:inherit;transition:filter .15s,box-shadow .15s;-webkit-appearance:none}.cp-anf-signin-btn svg{width:18px;height:18px;flex-shrink:0}.cp-anf-signin-btn svg path{fill:#fff}.cp-anf-signin-btn:hover{filter:brightness(1.07);box-shadow:inset 0 -3px #00000026}\n"] }]
         }], ctorParameters: () => [{ type: i8.FormBuilder }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: ClaimProcessService }, { type: i7.BsModalService }, { type: i1$2.TokenService }, { type: i1$2.AuthLogoutService }, { type: IndustryService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LIBRARY_CONFIG]