@idsoftsource/initial-process 2.4.9 → 2.5.2

package/fesm2022/idsoftsource-initial-process.mjs

@@ -9702,6 +9702,7 @@ class RoleSelectComponent {
     roleContextService;
     providerdetail;
     fb;
+    cdr;
     isLoaded = false;
     previewUrl = null;
     isImageLoading = false;
@@ -9767,7 +9768,7 @@ class RoleSelectComponent {
         { 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' },
     ];
     provider;
-    constructor(store, providerService, userService, userDocumentService, router, industrydata, userDetailService, fileService, tokenService, roleContextService, providerdetail, fb) {
+    constructor(store, providerService, userService, userDocumentService, router, industrydata, userDetailService, fileService, tokenService, roleContextService, providerdetail, fb, cdr) {
         this.store = store;
         this.providerService = providerService;
         this.userService = userService;
@@ -9780,6 +9781,7 @@ class RoleSelectComponent {
         this.roleContextService = roleContextService;
         this.providerdetail = providerdetail;
         this.fb = fb;
+        this.cdr = cdr;
     }
     cloudfrontUrl;
     providerId;
@@ -9813,7 +9815,7 @@ class RoleSelectComponent {
             state: new FormControl('', Validators.required),
             zipcode: new FormControl('', Validators.required),
             country: new FormControl('', Validators.required),
-            county: new FormControl('', Validators.required)
+            county: new FormControl('')
         });
         this.getYears();
         this.getIndustries();
@@ -9843,6 +9845,15 @@ class RoleSelectComponent {
                 next: (res) => {
                     console.log(res);
                     this.providerdata = res;
+                    const rawPhone = this.providerdata.phone || '';
+                    const digits = rawPhone.replace(/\D/g, '').substring(0, 10);
+                    let formattedPhone = '';
+                    if (digits.length > 0)
+                        formattedPhone = '(' + digits.substring(0, 3);
+                    if (digits.length >= 4)
+                        formattedPhone += ') ' + digits.substring(3, 6);
+                    if (digits.length >= 7)
+                        formattedPhone += '-' + digits.substring(6, 10);
                     this.companyForm.patchValue({
                         companyName: this.providerdata.providerName || '',
                         address1: this.providerdata.address1 || '',
@@ -9851,7 +9862,7 @@ class RoleSelectComponent {
                         zipcode: this.providerdata.zipcode || '',
                         country: this.providerdata.country || '',
                         county: this.providerdata.county || '',
-                        companyPhoneNumber: this.providerdata.phone || '',
+                        companyPhoneNumber: formattedPhone,
                     });
                     this.previewCompanyUrl = this.cloudfrontUrl + this.providerdata.logoUrl;
                 },
@@ -10552,6 +10563,7 @@ class RoleSelectComponent {
         input.value = formatted;
         if (formType === 'company') {
             this.companyForm.patchValue({ companyPhoneNumber: formatted });
+            this.cdr.detectChanges();
         }
         else {
             this.userForm.patchValue({ phoneNumber: formatted }, { emitEvent: false });
@@ -10602,13 +10614,13 @@ class RoleSelectComponent {
     back() {
         this.store.previousStep();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, deps: [{ token: CredentialingStore }, { token: ProvidersService }, { token: UserService }, { token: UserDocumentService }, { token: i2.Router }, { token: IndustryService }, { token: UserDetailService }, { token: FileService }, { token: i1$2.TokenService }, { token: i1$2.RoleContextService }, { token: FrontEndProvidersService }, { token: i8.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, deps: [{ token: CredentialingStore }, { token: ProvidersService }, { token: UserService }, { token: UserDocumentService }, { token: i2.Router }, { token: IndustryService }, { token: UserDetailService }, { token: FileService }, { token: i1$2.TokenService }, { token: i1$2.RoleContextService }, { token: FrontEndProvidersService }, { token: i8.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: RoleSelectComponent, isStandalone: false, selector: "app-role-select", inputs: { roleData: "roleData", cloudfrontUrl: "cloudfrontUrl", providerId: "providerId", providerName: "providerName" }, outputs: { backToParent: "backToParent", providerSaved: "providerSaved" }, ngImport: i0, template: "<div class=\"role-selection-container\" [class.provider-layout]=\"roleData?.role?.name === 'Provider'\">\r\n\r\n  <!-- NON-PROVIDER LAYOUT -->\r\n  <ng-container *ngIf=\"roleData?.role?.name !== 'Provider'\">\r\n    <h2>Basic Details</h2>\r\n    <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">First Name<span class=\"req\">*</span></label>\r\n            <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n            <div *ngIf=\" u?.firstName?.invalid &&\r\n        (u?.firstName?.touched || u?.firstName?.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                First Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">Last Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n              [ngClass]=\"{\r\n      'is-invalid':\r\n        u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n    }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.lastName.invalid &&\r\n      (u.lastName.touched || u.lastName.dirty)\r\n    \">\r\n              <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n                Last Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Email<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.email.invalid && (u.email.touched || u.email.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.email.invalid &&\r\n        (u.email.touched || u.email.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n                Email is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n                Please enter a valid email address\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Home Address 1<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-address-view\" name=\"random-address-{{randomId}}\" class=\"form-control\"\r\n              placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete\r\n              [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.city.invalid && (u.city.touched || u.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.city.invalid &&\r\n        (u.city.touched || u.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n              id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.state.invalid && (u.state.touched || u.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.state.invalid &&\r\n        (u.state.touched || u.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.zipcode.invalid &&\r\n        (u.zipcode.touched || u.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Country<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n              [ngClass]=\"{\r\n        'is-invalid':\r\n          u.country.invalid && (u.country.touched || u.country.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.country.invalid &&\r\n        (u.country.touched || u.country.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n                Country is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Phone Number<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n              class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n              formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event, 'user')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n                Phone Number is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.pattern\">\r\n                Phone Number must be 10 digits\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n              formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n              id=\"yearsOfExperince\"></ng-select>\r\n            <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n        (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n                Years Of Experience is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n              [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n              placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n            </ng-select>\r\n            <div *ngIf=\" u.userJobTitle.invalid &&\r\n        (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n                Job title is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n            <label class=\"note-label mb-2\">Profile image</label>\r\n            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n            <input [(ngModel)]=\"fileName\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n              placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n            <small class=\"text-muted d-block\" style=\"font-size: 11px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n            <img *ngIf=\"!isImageLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"res d-flex justify-content-between\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Industry</label>\r\n              <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n                [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n                [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n                <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                  <span class=\"form-check\">\r\n                    <span class=\"form-check-input-wrapper\">\r\n                      <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                    </span>\r\n                    {{ item.industryName }}\r\n                  </span>\r\n                </ng-template>\r\n                <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                  <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                  <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                    <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                  </span>\r\n                </ng-template>\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <img *ngIf=\"previewUrl\" [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n              <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n                <div>{{ userError }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary ct-btn\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\"\r\n          (click)=\"saveFinal()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- PROVIDER LAYOUT: one card with Business Information + User Information -->\r\n  <ng-container *ngIf=\"roleData?.role?.name === 'Provider'\">\r\n\r\n    <!-- Business Information -->\r\n    <h2>Business Information</h2>\r\n    <p class=\"note\">We need company information</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"companyForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Company Name<span class=\"req\">*</span></label>\r\n            <input [ngClass]=\"{ 'is-invalid':  c.companyName.invalid && (c.companyName.touched || c.companyName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"Company Name\" formControlName=\"companyName\" id=\"companyName\">\r\n            <div *ngIf=\" c.companyName.invalid &&\r\n        (c.companyName.touched || c.companyName.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyName.errors.required\">\r\n                Company Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Company Phone Number<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n              placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"companyPhoneNumber\" maxlength=\"14\"\r\n              (input)=\"phoneMask($event, 'company')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.companyPhoneNumber.invalid &&\r\n          (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.companyPhoneNumber.invalid &&\r\n        (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyPhoneNumber.errors?.required\">\r\n                Company Phone Number is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"c.companyPhoneNumber.errors?.pattern\">\r\n                Company Phone Number must be 10 digits\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Address 1<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\"\r\n              ngx-google-places-autocomplete [options]=\"options\" (onAddressChange)=\"AddressChangeCompany($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.address1.invalid && (c.address1.touched || c.address1.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.address1.invalid &&\r\n        (c.address1.touched || c.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.city.invalid && (c.city.touched || c.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.city.invalid &&\r\n        (c.city.touched || c.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.state.invalid && (c.state.touched || c.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.state.invalid &&\r\n        (c.state.touched || c.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.zipcode.invalid && (c.zipcode.touched || c.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.zipcode.invalid &&\r\n        (c.zipcode.touched || c.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap justify-content-between row\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Country<span class=\"req\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n                [ngClass]=\"{\r\n        'is-invalid':\r\n          c.country.invalid && (c.country.touched || c.country.dirty)\r\n      }\" />\r\n              <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.country.invalid &&\r\n        (c.country.touched || c.country.dirty)\r\n      \">\r\n                <div class=\"ms-1\" *ngIf=\"c.country.errors?.required\">\r\n                  Country is required\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n              <label class=\"note-label mb-2\">Company Logo</label>\r\n              <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploacompanyImage($event)\" class=\"d-none\" />\r\n              <input [(ngModel)]=\"fileNameCompany\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\"\r\n                class=\"form-control pe-5\" placeholder=\"Upload Company Logo\" (click)=\"uploadFile.click()\" />\r\n              <small class=\"text-muted d-block\" style=\"font-size: 11px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n              <img *ngIf=\"!isLogoLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n              <div *ngIf=\"isLogoLoading\" class=\"upload-spinner\">\r\n                <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n              </div>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <img *ngIf=\"previewCompanyUrl\" [src]=\"previewCompanyUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <!-- User Information -->\r\n    <h2 style=\"margin-top: 30px;\">User Information</h2>\r\n    <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">First Name<span class=\"req\">*</span></label>\r\n            <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n            <div *ngIf=\" u?.firstName?.invalid &&\r\n        (u?.firstName?.touched || u?.firstName?.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                First Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">Last Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n              [ngClass]=\"{\r\n      'is-invalid':\r\n        u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n    }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.lastName.invalid &&\r\n      (u.lastName.touched || u.lastName.dirty)\r\n    \">\r\n              <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n                Last Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Email<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.email.invalid && (u.email.touched || u.email.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.email.invalid &&\r\n        (u.email.touched || u.email.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n                Email is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n                Please enter a valid email address\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Home Address 1<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-address-view\" name=\"random-address-{{randomId}}\" class=\"form-control\"\r\n              placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete\r\n              [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.city.invalid && (u.city.touched || u.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.city.invalid &&\r\n        (u.city.touched || u.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n              id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.state.invalid && (u.state.touched || u.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.state.invalid &&\r\n        (u.state.touched || u.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.zipcode.invalid &&\r\n        (u.zipcode.touched || u.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Country<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n              [ngClass]=\"{\r\n        'is-invalid':\r\n          u.country.invalid && (u.country.touched || u.country.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.country.invalid &&\r\n        (u.country.touched || u.country.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n                Country is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Phone Number<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n              class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n              formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event, 'user')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n                Phone Number is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.pattern\">\r\n                Phone Number must be 10 digits\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n              formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n              id=\"yearsOfExperince\"></ng-select>\r\n            <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n        (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n                Years Of Experience is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n              [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n              placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n            </ng-select>\r\n            <div *ngIf=\" u.userJobTitle.invalid &&\r\n        (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n                Job title is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n            <label class=\"note-label mb-2\">Profile image</label>\r\n            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n            <input [(ngModel)]=\"fileName\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n              placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n            <small class=\"text-muted d-block\" style=\"font-size: 11px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n            <img *ngIf=\"!isImageLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"res d-flex justify-content-between\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Industry</label>\r\n              <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n                [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n                [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n                <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                  <span class=\"form-check\">\r\n                    <span class=\"form-check-input-wrapper\">\r\n                      <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                    </span>\r\n                    {{ item.industryName }}\r\n                  </span>\r\n                </ng-template>\r\n                <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                  <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                  <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                    <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                  </span>\r\n                </ng-template>\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <img *ngIf=\"previewUrl\" [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n              <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n                <div>{{ userError }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary ct-btn\"\r\n          [disabled]=\"showLoader || companyForm.invalid || userForm.invalid\"\r\n          [ng2-loading]=\"showLoader\"\r\n          (click)=\"saveFinal()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n</div>\r\n", styles: [".provider-layout{display:flex;flex-direction:column}.provider-company-first{order:-1}.section-locked{pointer-events:none;opacity:.45;filter:blur(1.5px);-webkit-user-select:none;user-select:none}.preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:8px;border:1px solid #e2e8f0}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon-resume:hover{opacity:1}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon:hover{opacity:1}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container:hover{border-color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{font-size:14px;color:#94a3b8}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:42px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}.form-control{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box}.form-control:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.form-control::placeholder{color:#94a3b8}.form-control.is-invalid{border-color:#ef4444}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:28px 24px;background:#fff}.role-selection-container h2{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.role-selection-container .note{font-size:14px;color:#64748b;margin-bottom:20px}.role-selection-container .note-label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;padding-left:0;display:block;margin-bottom:6px}.role-selection-container .note-label .req{color:#ef4444}.role-selection-container .dropdown-wrapper{display:flex;gap:8px;margin-bottom:16px}.role-selection-container .dropdown-wrapper select{flex:1;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease}.role-selection-container .dropdown-wrapper select:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.role-selection-container .dropdown-wrapper .add-btn{height:42px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .dropdown-wrapper .add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .dropdown-wrapper .add-btn:active{transform:translateY(0)}.role-selection-container .dropdown-wrapper .add-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:8px;background:#ebf2f9;border:1px solid rgba(64,119,173,.2);color:#2d5a8a}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.1rem;font-weight:700;cursor:pointer;color:#ef4444;min-width:auto;height:auto;padding:0 4px;transition:all .2s ease}.role-selection-container .selected-roles .role-card .remove-btn:hover{opacity:.75}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:48px;margin-bottom:32px}.role-selection-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.role-selection-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .navigation-buttons .next:active{transform:translateY(0)}.role-selection-container .navigation-buttons .next:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.upload-spinner{position:absolute;right:25px;top:45px;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.spinner-resume{width:36px;height:36px;border:3px solid #e2e8f0;border-top:3px solid #4077AD;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px;padding:28px 24px;background:#fff}.producer-type-container h2{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.producer-type-container p{font-size:14px;color:#64748b;margin-bottom:20px}.producer-type-container .job-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.producer-type-container .job-list .job-item{padding:12px 16px;font-size:15px;border:1.5px solid #e2e8f0;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:8px;background:#fff;color:#1e293b;transition:all .2s ease;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .job-list .job-item:hover{border-color:#4077ad;background:#ebf2f9}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background:#ebf2f9;color:#2d5a8a;font-weight:600}.producer-type-container .job-list .job-item .plus{font-weight:700;color:#4077ad}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin:40px 0}.producer-type-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.producer-type-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .navigation-buttons .next:active{transform:translateY(0)}.producer-type-container .navigation-buttons .next:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.actions{display:flex;justify-content:space-between;margin:48px 0 28px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}@media screen and (max-width: 767px){h2{font-size:18px}select,.form-control{font-size:16px}.actions{margin:16px 0;flex-direction:column-reverse;gap:8px}.res{flex-direction:column-reverse}.upload-spinner{right:20px;top:45px}.spinner-resume{width:24px;height:24px;top:-22%;left:32%}.ct-btn{width:100%;margin-top:32px}button,.resume-wrapper{width:100%}.role-selection-container .navigation-buttons,.producer-type-container .navigation-buttons{margin-top:24px;margin-bottom:16px}}\n"], dependencies: [{ kind: "directive", type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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: i11.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i11.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-role-select', standalone: false, template: "<div class=\"role-selection-container\" [class.provider-layout]=\"roleData?.role?.name === 'Provider'\">\r\n\r\n  <!-- NON-PROVIDER LAYOUT -->\r\n  <ng-container *ngIf=\"roleData?.role?.name !== 'Provider'\">\r\n    <h2>Basic Details</h2>\r\n    <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">First Name<span class=\"req\">*</span></label>\r\n            <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n            <div *ngIf=\" u?.firstName?.invalid &&\r\n        (u?.firstName?.touched || u?.firstName?.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                First Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">Last Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n              [ngClass]=\"{\r\n      'is-invalid':\r\n        u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n    }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.lastName.invalid &&\r\n      (u.lastName.touched || u.lastName.dirty)\r\n    \">\r\n              <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n                Last Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Email<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.email.invalid && (u.email.touched || u.email.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.email.invalid &&\r\n        (u.email.touched || u.email.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n                Email is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n                Please enter a valid email address\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Home Address 1<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-address-view\" name=\"random-address-{{randomId}}\" class=\"form-control\"\r\n              placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete\r\n              [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.city.invalid && (u.city.touched || u.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.city.invalid &&\r\n        (u.city.touched || u.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n              id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.state.invalid && (u.state.touched || u.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.state.invalid &&\r\n        (u.state.touched || u.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.zipcode.invalid &&\r\n        (u.zipcode.touched || u.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Country<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n              [ngClass]=\"{\r\n        'is-invalid':\r\n          u.country.invalid && (u.country.touched || u.country.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.country.invalid &&\r\n        (u.country.touched || u.country.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n                Country is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Phone Number<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n              class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n              formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event, 'user')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n                Phone Number is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.pattern\">\r\n                Phone Number must be 10 digits\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n              formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n              id=\"yearsOfExperince\"></ng-select>\r\n            <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n        (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n                Years Of Experience is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n              [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n              placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n            </ng-select>\r\n            <div *ngIf=\" u.userJobTitle.invalid &&\r\n        (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n                Job title is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n            <label class=\"note-label mb-2\">Profile image</label>\r\n            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n            <input [(ngModel)]=\"fileName\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n              placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n            <small class=\"text-muted d-block\" style=\"font-size: 11px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n            <img *ngIf=\"!isImageLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"res d-flex justify-content-between\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Industry</label>\r\n              <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n                [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n                [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n                <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                  <span class=\"form-check\">\r\n                    <span class=\"form-check-input-wrapper\">\r\n                      <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                    </span>\r\n                    {{ item.industryName }}\r\n                  </span>\r\n                </ng-template>\r\n                <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                  <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                  <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                    <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                  </span>\r\n                </ng-template>\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <img *ngIf=\"previewUrl\" [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n              <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n                <div>{{ userError }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary ct-btn\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\"\r\n          (click)=\"saveFinal()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- PROVIDER LAYOUT: one card with Business Information + User Information -->\r\n  <ng-container *ngIf=\"roleData?.role?.name === 'Provider'\">\r\n\r\n    <!-- Business Information -->\r\n    <h2>Business Information</h2>\r\n    <p class=\"note\">We need company information</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"companyForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Company Name<span class=\"req\">*</span></label>\r\n            <input [ngClass]=\"{ 'is-invalid':  c.companyName.invalid && (c.companyName.touched || c.companyName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"Company Name\" formControlName=\"companyName\" id=\"companyName\">\r\n            <div *ngIf=\" c.companyName.invalid &&\r\n        (c.companyName.touched || c.companyName.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyName.errors.required\">\r\n                Company Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Company Phone Number<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n              placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"companyPhoneNumber\" maxlength=\"14\"\r\n              (input)=\"phoneMask($event, 'company')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.companyPhoneNumber.invalid &&\r\n          (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.companyPhoneNumber.invalid &&\r\n        (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyPhoneNumber.errors?.required\">\r\n                Company Phone Number is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"c.companyPhoneNumber.errors?.pattern\">\r\n                Company Phone Number must be 10 digits\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Address 1<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\"\r\n              ngx-google-places-autocomplete [options]=\"options\" (onAddressChange)=\"AddressChangeCompany($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.address1.invalid && (c.address1.touched || c.address1.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.address1.invalid &&\r\n        (c.address1.touched || c.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.city.invalid && (c.city.touched || c.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.city.invalid &&\r\n        (c.city.touched || c.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.state.invalid && (c.state.touched || c.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.state.invalid &&\r\n        (c.state.touched || c.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.zipcode.invalid && (c.zipcode.touched || c.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.zipcode.invalid &&\r\n        (c.zipcode.touched || c.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap justify-content-between row\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Country<span class=\"req\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n                [ngClass]=\"{\r\n        'is-invalid':\r\n          c.country.invalid && (c.country.touched || c.country.dirty)\r\n      }\" />\r\n              <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.country.invalid &&\r\n        (c.country.touched || c.country.dirty)\r\n      \">\r\n                <div class=\"ms-1\" *ngIf=\"c.country.errors?.required\">\r\n                  Country is required\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n              <label class=\"note-label mb-2\">Company Logo</label>\r\n              <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploacompanyImage($event)\" class=\"d-none\" />\r\n              <input [(ngModel)]=\"fileNameCompany\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\"\r\n                class=\"form-control pe-5\" placeholder=\"Upload Company Logo\" (click)=\"uploadFile.click()\" />\r\n              <small class=\"text-muted d-block\" style=\"font-size: 11px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n              <img *ngIf=\"!isLogoLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n              <div *ngIf=\"isLogoLoading\" class=\"upload-spinner\">\r\n                <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n              </div>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <img *ngIf=\"previewCompanyUrl\" [src]=\"previewCompanyUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <!-- User Information -->\r\n    <h2 style=\"margin-top: 30px;\">User Information</h2>\r\n    <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">First Name<span class=\"req\">*</span></label>\r\n            <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n            <div *ngIf=\" u?.firstName?.invalid &&\r\n        (u?.firstName?.touched || u?.firstName?.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                First Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">Last Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n              [ngClass]=\"{\r\n      'is-invalid':\r\n        u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n    }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.lastName.invalid &&\r\n      (u.lastName.touched || u.lastName.dirty)\r\n    \">\r\n              <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n                Last Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Email<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.email.invalid && (u.email.touched || u.email.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.email.invalid &&\r\n        (u.email.touched || u.email.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n                Email is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n                Please enter a valid email address\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Home Address 1<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-address-view\" name=\"random-address-{{randomId}}\" class=\"form-control\"\r\n              placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete\r\n              [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.city.invalid && (u.city.touched || u.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.city.invalid &&\r\n        (u.city.touched || u.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n              id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.state.invalid && (u.state.touched || u.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.state.invalid &&\r\n        (u.state.touched || u.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.zipcode.invalid &&\r\n        (u.zipcode.touched || u.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Country<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n              [ngClass]=\"{\r\n        'is-invalid':\r\n          u.country.invalid && (u.country.touched || u.country.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.country.invalid &&\r\n        (u.country.touched || u.country.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n                Country is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Phone Number<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n              class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n              formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event, 'user')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n                Phone Number is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.pattern\">\r\n                Phone Number must be 10 digits\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n              formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n              id=\"yearsOfExperince\"></ng-select>\r\n            <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n        (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n                Years Of Experience is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n              [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n              placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n            </ng-select>\r\n            <div *ngIf=\" u.userJobTitle.invalid &&\r\n        (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n                Job title is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n            <label class=\"note-label mb-2\">Profile image</label>\r\n            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n            <input [(ngModel)]=\"fileName\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n              placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n            <small class=\"text-muted d-block\" style=\"font-size: 11px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n            <img *ngIf=\"!isImageLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"res d-flex justify-content-between\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Industry</label>\r\n              <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n                [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n                [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n                <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                  <span class=\"form-check\">\r\n                    <span class=\"form-check-input-wrapper\">\r\n                      <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                    </span>\r\n                    {{ item.industryName }}\r\n                  </span>\r\n                </ng-template>\r\n                <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                  <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                  <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                    <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                  </span>\r\n                </ng-template>\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <img *ngIf=\"previewUrl\" [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n              <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n                <div>{{ userError }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary ct-btn\"\r\n          [disabled]=\"showLoader || companyForm.invalid || userForm.invalid\"\r\n          [ng2-loading]=\"showLoader\"\r\n          (click)=\"saveFinal()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n</div>\r\n", styles: [".provider-layout{display:flex;flex-direction:column}.provider-company-first{order:-1}.section-locked{pointer-events:none;opacity:.45;filter:blur(1.5px);-webkit-user-select:none;user-select:none}.preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:8px;border:1px solid #e2e8f0}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon-resume:hover{opacity:1}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon:hover{opacity:1}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container:hover{border-color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{font-size:14px;color:#94a3b8}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:42px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}.form-control{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box}.form-control:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.form-control::placeholder{color:#94a3b8}.form-control.is-invalid{border-color:#ef4444}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:28px 24px;background:#fff}.role-selection-container h2{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.role-selection-container .note{font-size:14px;color:#64748b;margin-bottom:20px}.role-selection-container .note-label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;padding-left:0;display:block;margin-bottom:6px}.role-selection-container .note-label .req{color:#ef4444}.role-selection-container .dropdown-wrapper{display:flex;gap:8px;margin-bottom:16px}.role-selection-container .dropdown-wrapper select{flex:1;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease}.role-selection-container .dropdown-wrapper select:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.role-selection-container .dropdown-wrapper .add-btn{height:42px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .dropdown-wrapper .add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .dropdown-wrapper .add-btn:active{transform:translateY(0)}.role-selection-container .dropdown-wrapper .add-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:8px;background:#ebf2f9;border:1px solid rgba(64,119,173,.2);color:#2d5a8a}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.1rem;font-weight:700;cursor:pointer;color:#ef4444;min-width:auto;height:auto;padding:0 4px;transition:all .2s ease}.role-selection-container .selected-roles .role-card .remove-btn:hover{opacity:.75}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:48px;margin-bottom:32px}.role-selection-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.role-selection-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .navigation-buttons .next:active{transform:translateY(0)}.role-selection-container .navigation-buttons .next:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.upload-spinner{position:absolute;right:25px;top:45px;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.spinner-resume{width:36px;height:36px;border:3px solid #e2e8f0;border-top:3px solid #4077AD;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px;padding:28px 24px;background:#fff}.producer-type-container h2{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.producer-type-container p{font-size:14px;color:#64748b;margin-bottom:20px}.producer-type-container .job-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.producer-type-container .job-list .job-item{padding:12px 16px;font-size:15px;border:1.5px solid #e2e8f0;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:8px;background:#fff;color:#1e293b;transition:all .2s ease;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .job-list .job-item:hover{border-color:#4077ad;background:#ebf2f9}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background:#ebf2f9;color:#2d5a8a;font-weight:600}.producer-type-container .job-list .job-item .plus{font-weight:700;color:#4077ad}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin:40px 0}.producer-type-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.producer-type-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .navigation-buttons .next:active{transform:translateY(0)}.producer-type-container .navigation-buttons .next:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.actions{display:flex;justify-content:space-between;margin:48px 0 28px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}@media screen and (max-width: 767px){h2{font-size:18px}select,.form-control{font-size:16px}.actions{margin:16px 0;flex-direction:column-reverse;gap:8px}.res{flex-direction:column-reverse}.upload-spinner{right:20px;top:45px}.spinner-resume{width:24px;height:24px;top:-22%;left:32%}.ct-btn{width:100%;margin-top:32px}button,.resume-wrapper{width:100%}.role-selection-container .navigation-buttons,.producer-type-container .navigation-buttons{margin-top:24px;margin-bottom:16px}}\n"] }]
-        }], ctorParameters: () => [{ type: CredentialingStore }, { type: ProvidersService }, { type: UserService }, { type: UserDocumentService }, { type: i2.Router }, { type: IndustryService }, { type: UserDetailService }, { type: FileService }, { type: i1$2.TokenService }, { type: i1$2.RoleContextService }, { type: FrontEndProvidersService }, { type: i8.FormBuilder }], propDecorators: { backToParent: [{
+        }], ctorParameters: () => [{ type: CredentialingStore }, { type: ProvidersService }, { type: UserService }, { type: UserDocumentService }, { type: i2.Router }, { type: IndustryService }, { type: UserDetailService }, { type: FileService }, { type: i1$2.TokenService }, { type: i1$2.RoleContextService }, { type: FrontEndProvidersService }, { type: i8.FormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { backToParent: [{
                 type: Output
             }], providerSaved: [{
                 type: Output
@@ -35795,6 +35807,7 @@ function passwordMatchValidator(control) {
     return null;
 }
 const CURRENT_YEAR = new Date().getFullYear();
+const BUSINESS_ROLES = ['Provider', 'Contractor', 'InsuranceAgency', 'RealEstateCompany'];
 const PRIVACY_CONFIG = {
     inspectiondepot: {
         companyName: 'Bootog Technologies Inc', modifiedDate: 'September 30, 2025',
@@ -35866,6 +35879,19 @@ class ClaimProcessComponent {
     showPassword = false;
     showConfirmPassword = false;
     validatePage = 0;
+    // User detail state
+    userHasExistingDetails = false;
+    resetPasswordEnabled = false;
+    isAuthenticated = false;
+    existingUserData = null;
+    // Role timing: save role name from API, apply once roles list is loaded
+    pendingUserRole = null;
+    rolesLoaded = false;
+    // File uploads
+    profileFileName = '';
+    profileFile = null;
+    businessLogoName = '';
+    businessLogoFile = null;
     // Terms & Privacy state
     model = { acceptTerms: false, privacy: false };
     termsAndConditionTitle = '';
@@ -35876,6 +35902,15 @@ class ClaimProcessComponent {
     googleOptions = {
         componentRestrictions: { country: ['US'] },
     };
+    /** True when the selected role requires business information. */
+    get isBusinessRole() {
+        const selected = this.roles.find(r => r.id === this.f['role']?.value);
+        return selected ? BUSINESS_ROLES.includes(selected.name) : false;
+    }
+    /** Password fields are shown when there are no existing details OR when the reset toggle is on. */
+    get showPasswordFields() {
+        return !this.userHasExistingDetails || this.resetPasswordEnabled;
+    }
     constructor(fb, route, router, userDetailService, roleService, modalService, libConfig) {
         this.fb = fb;
         this.route = route;
@@ -35885,17 +35920,32 @@ class ClaimProcessComponent {
         this.modalService = modalService;
         this.libConfig = libConfig;
     }
+    static SESSION_KEY = 'claim_process_email';
     ngOnInit() {
         this.setPrivacyAndTerms(this.libConfig?.appType?.toString() ?? '');
         const paramEmail = this.route.snapshot.queryParams['email'] ||
             this.route.snapshot.queryParams['EmailId'];
-        if (!paramEmail) {
-            this.noEmailError = true;
-            return;
+        if (paramEmail) {
+            this.userEmail = paramEmail;
+            sessionStorage.setItem(ClaimProcessComponent.SESSION_KEY, paramEmail);
+            this.router.navigate([], {
+                relativeTo: this.route,
+                queryParams: {},
+                replaceUrl: true,
+            });
+        }
+        else {
+            const stored = sessionStorage.getItem(ClaimProcessComponent.SESSION_KEY);
+            if (stored) {
+                this.userEmail = stored;
+            }
+            else {
+                this.noEmailError = true;
+                return;
+            }
         }
-        this.userEmail = paramEmail;
         this.claimForm = this.fb.group({
-            email: [paramEmail, [Validators.required, Validators.email]],
+            email: [this.userEmail, [Validators.required, Validators.email]],
             firstName: ['', Validators.required],
             lastName: ['', Validators.required],
             phone: ['', Validators.required],
@@ -35904,17 +35954,22 @@ class ClaimProcessComponent {
             state: [''],
             zip: [''],
             role: ['', Validators.required],
-            password: ['', [Validators.required, Validators.minLength(8)]],
-            confirmPassword: ['', Validators.required],
+            password: [''],
+            confirmPassword: [''],
+            // Business information fields (validators applied dynamically)
+            businessName: [''],
+            businessEmail: [''],
+            businessAddress: [''],
+            businessCity: [''],
+            businessState: [''],
+            businessZip: [''],
         }, { validators: passwordMatchValidator });
-        // Strip query params from URL immediately
-        this.router.navigate([], {
-            relativeTo: this.route,
-            queryParams: {},
-            replaceUrl: true,
+        // Re-evaluate business validators whenever role changes
+        this.claimForm.get('role')?.valueChanges.subscribe(() => {
+            this.updateBusinessRoleValidators();
         });
         this.getRoles();
-        this.lookupUser(paramEmail);
+        this.lookupUser(this.userEmail);
     }
     get f() {
         return this.claimForm.controls;
@@ -35934,28 +35989,30 @@ class ClaimProcessComponent {
             currentYear: CURRENT_YEAR,
         };
     }
-    // ─── Modal (read-only — agreement is implied by opening) ─────────────────────
+    // ─── Modal ───────────────────────────────────────────────────────────────────
     openModal(template, title, event) {
         event.preventDefault();
+        // Stop the click from bubbling to the label, which would toggle the
+        // checkbox and potentially trigger a second synthetic click.
+        event.stopPropagation();
         this.termsAndConditionTitle = title;
-        // Mark as agreed when the user chooses to open and read
-        if (title === 'Terms and Conditions') {
-            this.model.acceptTerms = true;
-        }
-        else {
-            this.model.privacy = true;
-        }
         if (this.modelRef) {
             this.modelRef.hide();
         }
-        this.modelRef = this.modalService.show(template);
+        this.modelRef = this.modalService.show(template, { ignoreBackdropClick: true });
     }
     closeModal() {
         if (this.modelRef) {
             this.modelRef.hide();
         }
     }
-    // ─── Form ────────────────────────────────────────────────────────────────────
+    /** Called when the "I accept" checkbox is toggled directly. */
+    onTermsCheckboxChange(event) {
+        const checked = event.target.checked;
+        this.model.acceptTerms = checked;
+        this.model.privacy = checked;
+    }
+    // ─── User lookup ─────────────────────────────────────────────────────────────
     lookupUser(email) {
         this.isLoadingUser = true;
         this.userLookupError = null;
@@ -35963,11 +36020,27 @@ class ClaimProcessComponent {
         this.userDetailService.getAuth0UserDetails(email).subscribe({
             next: (data) => {
                 this.isLoadingUser = false;
-                if (!data?.auth0Id || !data?.userDetails) {
+                if (!data?.auth0Id) {
+                    // No Auth0 account exists — hard block
                     this.accountNotFound = true;
                     return;
                 }
                 const d = data.userDetails;
+                // Authenticated + existing profile → show account-found preview, skip form
+                if (data.authenticated && d) {
+                    this.isAuthenticated = true;
+                    this.existingUserData = d;
+                    return;
+                }
+                if (!d) {
+                    // Auth0 exists but no saved profile yet → new user, password required
+                    this.userHasExistingDetails = false;
+                    this.updatePasswordValidators();
+                    return;
+                }
+                // Has profile but NOT authenticated → claim/update flow, fill form
+                this.userHasExistingDetails = true;
+                this.updatePasswordValidators();
                 this.claimForm.patchValue({
                     firstName: d.firstName || '',
                     lastName: d.lastName || '',
@@ -35977,18 +36050,25 @@ class ClaimProcessComponent {
                     state: d.state || '',
                     zip: d.zip || '',
                 });
-                if (d.userRoles?.length && this.roles.length) {
-                    const match = this.roles.find((r) => d.userRoles.some((ur) => ur.roleName === r.name));
-                    if (match)
-                        this.claimForm.patchValue({ role: match.id });
+                if (d.userRoles?.length) {
+                    this.pendingUserRole = d.userRoles[0].roleName;
+                    this.applyUserRole();
                 }
             },
             error: () => {
                 this.isLoadingUser = false;
                 this.userLookupError = 'Could not load account details for this email.';
+                this.userHasExistingDetails = false;
+                this.updatePasswordValidators();
             },
         });
     }
+    getInitials() {
+        const f = this.existingUserData?.firstName?.[0] || '';
+        const l = this.existingUserData?.lastName?.[0] || '';
+        return (f + l).toUpperCase() || this.userEmail?.[0]?.toUpperCase() || '?';
+    }
+    // ─── Roles ───────────────────────────────────────────────────────────────────
     getRoles() {
         const query = {
             targetProviderId: '00000000-0000-0000-0000-000000000000',
@@ -36000,10 +36080,72 @@ class ClaimProcessComponent {
         this.roleService.getRoles(query).subscribe({
             next: (data) => {
                 this.roles = (data?.data ?? []).filter((r) => r.providerId === '00000000-0000-0000-0000-000000000000');
+                this.rolesLoaded = true;
+                this.applyUserRole();
+            },
+            error: () => {
+                this.rolesLoaded = true;
             },
-            error: () => { },
         });
     }
+    /**
+     * Matches the user's existing role against the loaded roles list.
+     * If the role is missing from the API result it is injected so the
+     * dropdown still shows the correct value.
+     */
+    applyUserRole() {
+        if (!this.pendingUserRole || !this.rolesLoaded)
+            return;
+        let match = this.roles.find(r => r.name === this.pendingUserRole);
+        if (!match) {
+            // Role not returned by the API — add it so the dropdown can show it
+            match = {
+                id: `__custom__${this.pendingUserRole}`,
+                name: this.pendingUserRole,
+                providerId: '00000000-0000-0000-0000-000000000000',
+            };
+            this.roles = [...this.roles, match];
+        }
+        this.claimForm.patchValue({ role: match.id });
+    }
+    // ─── Dynamic validators ───────────────────────────────────────────────────────
+    updatePasswordValidators() {
+        const pwCtrl = this.claimForm.get('password');
+        const cpwCtrl = this.claimForm.get('confirmPassword');
+        if (!this.userHasExistingDetails || this.resetPasswordEnabled) {
+            pwCtrl?.setValidators([Validators.required, Validators.minLength(8)]);
+            cpwCtrl?.setValidators(Validators.required);
+        }
+        else {
+            pwCtrl?.clearValidators();
+            cpwCtrl?.clearValidators();
+        }
+        pwCtrl?.updateValueAndValidity();
+        cpwCtrl?.updateValueAndValidity();
+    }
+    updateBusinessRoleValidators() {
+        const businessFields = ['businessName', 'businessEmail', 'businessAddress'];
+        businessFields.forEach(field => {
+            const ctrl = this.claimForm.get(field);
+            if (this.isBusinessRole) {
+                ctrl?.setValidators(field === 'businessEmail'
+                    ? [Validators.required, Validators.email]
+                    : Validators.required);
+            }
+            else {
+                ctrl?.clearValidators();
+            }
+            ctrl?.updateValueAndValidity({ emitEvent: false });
+        });
+    }
+    toggleResetPassword() {
+        this.resetPasswordEnabled = !this.resetPasswordEnabled;
+        if (!this.resetPasswordEnabled) {
+            this.claimForm.patchValue({ password: '', confirmPassword: '' });
+        }
+        this.updatePasswordValidators();
+    }
+    // ─── Address auto-complete ────────────────────────────────────────────────────
     onAddressChange(address) {
         const get = (type) => address.address_components?.find((c) => c.types.includes(type))?.short_name || '';
         const streetNumber = get('street_number');
@@ -36012,8 +36154,7 @@ class ClaimProcessComponent {
             c.types.includes('sublocality') ||
             c.types.includes('sublocality_level_1'))?.short_name || '';
         const state = get('administrative_area_level_1');
-        const zipComp = address.address_components?.find((c) => c.types.includes('postal_code'));
-        const zip = zipComp?.long_name || '';
+        const zip = address.address_components?.find((c) => c.types.includes('postal_code'))?.long_name || '';
         this.claimForm.patchValue({
             address: [streetNumber, route].filter(Boolean).join(' '),
             city,
@@ -36021,6 +36162,38 @@ class ClaimProcessComponent {
             zip,
         });
     }
+    onBusinessAddressChange(address) {
+        const get = (type) => address.address_components?.find((c) => c.types.includes(type))?.short_name || '';
+        const streetNumber = get('street_number');
+        const route = get('route');
+        const city = address.address_components?.find((c) => c.types.includes('locality') ||
+            c.types.includes('sublocality') ||
+            c.types.includes('sublocality_level_1'))?.short_name || '';
+        const state = get('administrative_area_level_1');
+        const zip = address.address_components?.find((c) => c.types.includes('postal_code'))?.long_name || '';
+        this.claimForm.patchValue({
+            businessAddress: [streetNumber, route].filter(Boolean).join(' '),
+            businessCity: city,
+            businessState: state,
+            businessZip: zip,
+        });
+    }
+    // ─── File uploads ─────────────────────────────────────────────────────────────
+    onProfileFileChange(event) {
+        const input = event.target;
+        if (input.files?.length) {
+            this.profileFile = input.files[0];
+            this.profileFileName = input.files[0].name;
+        }
+    }
+    onBusinessLogoChange(event) {
+        const input = event.target;
+        if (input.files?.length) {
+            this.businessLogoFile = input.files[0];
+            this.businessLogoName = input.files[0].name;
+        }
+    }
+    // ─── Helpers ──────────────────────────────────────────────────────────────────
     formatPhone(event) {
         let digits = event.target.value.replace(/\D/g, '').substring(0, 10);
         let formatted = '';
@@ -36032,8 +36205,10 @@ class ClaimProcessComponent {
             formatted += '-' + digits.substring(6, 10);
         this.claimForm.get('phone')?.setValue(formatted, { emitEvent: false });
     }
+    // ─── Submit ───────────────────────────────────────────────────────────────────
     onSubmit() {
         this.validatePage = 1;
+        this.updateBusinessRoleValidators();
         if (this.accountNotFound || this.claimForm.invalid || !this.model.acceptTerms || !this.model.privacy) {
             this.claimForm.markAllAsTouched();
             return;
@@ -36051,8 +36226,18 @@ class ClaimProcessComponent {
             state: val.state,
             zip: val.zip,
             roleId: val.role,
-            password: val.password,
         };
+        if (this.showPasswordFields && val.password) {
+            payload.password = val.password;
+        }
+        if (this.isBusinessRole) {
+            payload.businessName = val.businessName;
+            payload.businessEmail = val.businessEmail;
+            payload.businessAddress = val.businessAddress;
+            payload.businessCity = val.businessCity;
+            payload.businessState = val.businessState;
+            payload.businessZip = val.businessZip;
+        }
         this.userDetailService.claimAccount(payload).subscribe({
             next: (data) => {
                 this.isSubmitting = false;
@@ -36061,6 +36246,7 @@ class ClaimProcessComponent {
                         data?.failures?.[0]?.message || data?.message || 'Failed to claim account.';
                 }
                 else {
+                    sessionStorage.removeItem(ClaimProcessComponent.SESSION_KEY);
                     this.submitSuccess = true;
                 }
             },
@@ -36071,11 +36257,11 @@ class ClaimProcessComponent {
         });
     }
     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: UserDetailService }, { token: RolesService }, { token: i7.BsModalService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ClaimProcessComponent, isStandalone: false, selector: "app-claim-process", ngImport: i0, template: "<h2 class=\"sr-only\">Claim Your Account</h2>\n\n<!-- \u2500\u2500\u2500 No Email Error \u2500\u2500\u2500 -->\n<div *ngIf=\"noEmailError\" class=\"cp-invalid-page\">\n  <div class=\"cp-invalid-card\">\n    <div class=\"cp-invalid-icon\">\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\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 account.</p>\n  </div>\n</div>\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\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\n    </div>\n    <h2>Account Claimed!</h2>\n    <p>Your account has been successfully activated. You can now sign in and start using the platform.</p>\n    <a [href]=\"libConfig?.dashboardUrl || '#'\" class=\"cp-btn\">Go to Dashboard</a>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Main Layout \u2500\u2500\u2500 -->\n<div *ngIf=\"!noEmailError && !submitSuccess\" class=\"cp-page\">\n\n  <!-- Left Panel -->\n  <aside class=\"cp-left\">\n    <div class=\"cp-left-inner\">\n\n      <div class=\"cp-logo\">\n        <svg version=\"1.2\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 248 48\" width=\"180\" height=\"35\" role=\"img\" aria-label=\"BOOTOG\">\n          <style>.s0 { fill: #ffffff }</style>\n          <g id=\"bootog-logo\">\n            <path class=\"s0\" d=\"m190.36 18.85q-0.1-0.39-0.21-0.78-0.13-0.39-0.26-0.78-0.13-0.38-0.26-0.76-0.15-0.38-0.31-0.75-0.36 0.47-0.75 0.91-0.38 0.43-0.8 0.85-0.41 0.4-0.86 0.78-0.45 0.39-0.92 0.73 0.12 0.39 0.21 0.76 0.09 0.38 0.17 0.76 0.08 0.38 0.14 0.76 0.05 0.39 0.09 0.78 0.51-0.37 0.99-0.76 0.49-0.39 0.96-0.8 0.48-0.41 0.93-0.83 0.46-0.42 0.9-0.87z\"/>\n            <path class=\"s0\" d=\"m159.72 31.28q-0.56 0.13-1.11 0.22-0.56 0.1-1.12 0.15-0.56 0.06-1.13 0.08-0.57 0.02-1.14 0.01 0.16 0.35 0.33 0.71 0.17 0.35 0.36 0.7 0.17 0.34 0.38 0.68 0.19 0.33 0.4 0.66 0.59-0.04 1.19-0.11 0.58-0.07 1.17-0.16 0.59-0.09 1.16-0.21 0.58-0.12 1.16-0.26-0.23-0.29-0.46-0.59-0.22-0.3-0.43-0.61-0.2-0.3-0.39-0.62-0.2-0.32-0.37-0.65z\"/>\n            <path class=\"s0\" d=\"m174.36 26.13q2.02 0.85 3.93 1.56 0.04 0.02 0.09 0.02 0.04 0.01 0.08 0.01 0.05 0 0.09-0.01 0.04 0 0.08-0.02c9.63-5.11 16.02-11.03 14.65-13.9-0.57-1.21-2.42-1.73-5.14-1.62q-0.05 0-0.09 0.03-0.04 0.04-0.04 0.1 0 0.06 0.04 0.1 0.04 0.04 0.09 0.04 0.21 0.01 0.42 0.08 0.2 0.06 0.38 0.18 0.18 0.11 0.33 0.26 0.15 0.15 0.25 0.34c1.05 2.24-5.67 7.56-15.16 12.15q-0.05 0.03-0.08 0.06-0.04 0.04-0.07 0.08-0.03 0.05-0.05 0.1 0 0.05 0 0.1 0 0.05 0.01 0.1 0.02 0.05 0.05 0.1 0.03 0.04 0.06 0.08 0.04 0.03 0.08 0.06z\"/>\n            <path class=\"s0\" d=\"m168.92 30.58c-1.02-0.47-2.04-0.93-3.03-1.46q-0.04-0.02-0.08-0.04-0.03 0-0.07 0-0.04 0-0.07 0-0.04 0.02-0.08 0.04c-6.62 2.3-11.72 2.88-12.49 1.15q-0.07-0.21-0.1-0.42-0.02-0.21 0.01-0.42 0.03-0.21 0.12-0.4 0.08-0.21 0.22-0.37 0.03-0.05 0.02-0.11-0.01-0.06-0.07-0.09-0.05-0.03-0.1-0.02-0.07 0.01-0.1 0.06c-1.83 1.99-2.62 3.75-2.06 4.97 1.27 2.76 9.18 1.92 18.75-1.77q0.08-0.02 0.13-0.08 0.05-0.05 0.09-0.12 0.03-0.06 0.02-0.15 0-0.07-0.02-0.14-0.02-0.03-0.05-0.07-0.01-0.03-0.04-0.05-0.03-0.03-0.05-0.05-0.03-0.02-0.08-0.03-0.1-0.06-0.21-0.12-0.11-0.05-0.22-0.11-0.11-0.06-0.22-0.11-0.11-0.05-0.22-0.09 0 0 0 0z\"/>\n            <path class=\"s0\" d=\"m157.96 22.26q0.03-0.38 0.09-0.77 0.04-0.4 0.12-0.78 0.07-0.39 0.16-0.78 0.09-0.38 0.19-0.76-0.46-0.34-0.9-0.71-0.43-0.36-0.85-0.76-0.42-0.39-0.81-0.81-0.4-0.42-0.76-0.86-0.15 0.37-0.3 0.75-0.15 0.38-0.28 0.77-0.13 0.39-0.24 0.77-0.12 0.39-0.22 0.78 0.45 0.43 0.9 0.84 0.46 0.41 0.93 0.8 0.47 0.4 0.96 0.77 0.49 0.37 0.98 0.73h0.01z\"/>\n            <path class=\"s0\" d=\"m158.86 18.13q0.73-2.08 2.05-3.84 1.32-1.76 3.12-3.04 1.8-1.26 3.91-1.93c1.38-0.43 2.84-0.64 4.3-0.64q2.18 0 4.28 0.64 2.09 0.66 3.88 1.91 1.79 1.25 3.13 2.98 1.34 1.73 2.09 3.78 0.46-0.34 0.89-0.72 0.44-0.37 0.84-0.79 0.4-0.42 0.76-0.86 0.37-0.45 0.7-0.92-1.17-2.26-2.91-4.12-1.75-1.85-3.93-3.15-2.18-1.31-4.64-1.96-2.46-0.65-5-0.61-2.58-0.03-5.08 0.65-2.49 0.68-4.7 2.01-2.21 1.34-3.96 3.24-1.75 1.9-2.91 4.21 0.34 0.45 0.7 0.87 0.38 0.42 0.77 0.82 0.41 0.4 0.83 0.77 0.43 0.37 0.88 0.7z\"/>\n            <g>\n              <path class=\"s0\" d=\"m4 6.27h13.44c3.67 0 6.76 0.59 9.2 2.21q0.92 0.59 1.66 1.39 0.75 0.8 1.26 1.76 0.51 0.96 0.76 2.02 0.25 1.07 0.23 2.15 0.04 1.13-0.26 2.21-0.3 1.08-0.92 2.02-0.62 0.94-1.48 1.64-0.88 0.71-1.93 1.11v0.09q1.3 0.37 2.4 1.13 1.12 0.77 1.91 1.86 0.79 1.09 1.18 2.38 0.39 1.29 0.34 2.64 0.03 1.12-0.21 2.23-0.26 1.1-0.77 2.11-0.51 1.01-1.25 1.86-0.75 0.85-1.67 1.5c-2.47 1.73-5.83 2.55-9.74 2.55h-14.15zm13.1 13.96c2.42 0 3.76-1.11 3.76-3.13q0.01-0.34-0.04-0.65-0.07-0.33-0.21-0.63-0.13-0.29-0.35-0.54-0.21-0.25-0.47-0.45-0.37-0.21-0.77-0.37-0.39-0.16-0.81-0.26-0.41-0.1-0.84-0.13-0.43-0.04-0.85-0.01h-2.69v6.17zm3.79 12.3q0.28-0.22 0.49-0.49 0.22-0.28 0.36-0.59 0.14-0.32 0.21-0.66 0.07-0.34 0.05-0.68c0-2.12-1.44-3.32-3.99-3.32h-4.21v6.55h3.48c1.78 0 2.85-0.25 3.61-0.81z\"/>\n              <path class=\"s0\" d=\"m34.19 23.72c0-10.17 7.99-18 18.64-18 10.63 0 18.64 7.8 18.64 17.97 0 10.17-7.96 17.96-18.64 17.96-10.69 0-18.64-7.79-18.64-17.96zm27.36 0c0-5.2-3.53-9.19-8.72-9.19-5.2 0-8.73 3.99-8.73 9.19 0 5.2 3.53 9.2 8.73 9.2 5.19 0 8.72-4 8.72-9.2z\"/>\n              <path class=\"s0\" d=\"m74.58 23.72c0-10.18 8-17.97 18.64-17.97 10.65 0 18.65 7.79 18.65 17.97 0 10.16-7.95 17.96-18.65 17.96-10.68 0-18.64-7.8-18.64-17.96zm27.37 0c0-5.2-3.53-9.21-8.72-9.21-5.2 0-8.72 4.01-8.72 9.21 0 5.19 3.52 9.19 8.71 9.19 5.2 0 8.73-4 8.73-9.19z\"/>\n              <path class=\"s0\" d=\"m123.84 14.65h-11.09v-8.38h32.08v8.38h-11.07v26.51h-9.92z\"/>\n            </g>\n            <path class=\"s0\" d=\"m212.95 22.04h14.51v17.02q-1.4 0.65-2.85 1.14-1.46 0.49-2.96 0.83-1.51 0.34-3.04 0.5-1.54 0.17-3.08 0.17c-11.88 0-19.68-7.52-19.68-17.68 0-10.14 8.14-18.04 19.5-18.04q1.42-0.01 2.84 0.15 1.41 0.16 2.8 0.49 1.39 0.32 2.72 0.81 1.34 0.48 2.61 1.12v9.4q-1.17-0.74-2.44-1.32-1.27-0.58-2.61-1-1.33-0.41-2.71-0.65-1.37-0.23-2.76-0.28c-6.28 0-10.05 4.02-10.05 9.28 0 5.27 3.68 9.34 9.87 9.34q0.32 0 0.63-0.01 0.33-0.02 0.64-0.06 0.32-0.03 0.64-0.1 0.31-0.05 0.62-0.13v-3.64h-5.17v-7.32z\"/>\n          </g>\n        </svg>\n      </div>\n\n      <div class=\"cp-left-hero\">\n        <div class=\"cp-left-badge\">For Insurance Agencies &amp; Agents</div>\n        <h1>Claim Your InspectorMatch Account</h1>\n        <p>Your agency account is ready and waiting. Complete the form to activate your access to inspection services, field support, and training resources.</p>\n      </div>\n\n      <ul class=\"cp-benefits\">\n        <li>\n          <span class=\"cp-benefit-icon\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z\"/></svg>\n          </span>\n          <span>Instant access to the inspection services marketplace</span>\n        </li>\n        <li>\n          <span class=\"cp-benefit-icon\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\"/></svg>\n          </span>\n          <span>Connect with certified field professionals nationwide</span>\n        </li>\n        <li>\n          <span class=\"cp-benefit-icon\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z\"/></svg>\n          </span>\n          <span>Manage your team and track performance from one dashboard</span>\n        </li>\n        <li>\n          <span class=\"cp-benefit-icon\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"/></svg>\n          </span>\n          <span>Backed by BOOTOG Technologies with 24/7 support</span>\n        </li>\n      </ul>\n\n      <p class=\"cp-left-footnote\">Already have access? <a href=\"#\">Sign in to InspectorMatch</a></p>\n    </div>\n  </aside>\n\n  <!-- Right Panel \u2014 Form -->\n  <main class=\"cp-right\">\n    <div class=\"cp-form-wrap\">\n\n      <div class=\"cp-form-header\">\n        <h2>Complete Your Profile</h2>\n        <p>Your account details have been loaded. Set your password and role to activate.</p>\n        <!-- Email display (read-only) -->\n        <div class=\"cp-email-display\" *ngIf=\"userEmail\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\"/></svg>\n          <span>{{ userEmail }}</span>\n        </div>\n        <div class=\"cp-loading-hint\" *ngIf=\"isLoadingUser\">\n          <span class=\"cp-spinner\"></span> Loading account details\u2026\n        </div>\n        <div class=\"cp-error\" *ngIf=\"userLookupError\">{{ userLookupError }}</div>\n\n        <!-- Account not found in Auth0 -->\n        <div class=\"cp-account-not-found\" *ngIf=\"accountNotFound\">\n          <div class=\"cp-anf-icon\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\n          </div>\n          <div>\n            <p class=\"cp-anf-title\">Account Not Found</p>\n            <p class=\"cp-anf-sub\">No account is linked to <strong>{{ userEmail }}</strong>. Please contact support or use the link from your invitation email.</p>\n          </div>\n        </div>\n      </div>\n\n      <form [formGroup]=\"claimForm\" (ngSubmit)=\"onSubmit()\" novalidate *ngIf=\"!accountNotFound\">\n\n        <!-- \u2500\u2500\u2500 Contact Information \u2500\u2500\u2500 -->\n        <div class=\"cp-section-title\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\"/></svg>\n          Contact Information\n        </div>\n\n        <div class=\"cp-row\">\n          <div class=\"cp-field\">\n            <label for=\"firstName\">First Name<span class=\"req\">*</span></label>\n            <input type=\"text\" id=\"firstName\" formControlName=\"firstName\"\n              placeholder=\"Jane\"\n              [class.is-invalid]=\"f['firstName'].invalid && f['firstName'].touched\"\n              autocomplete=\"given-name\" />\n            <div class=\"cp-error\" *ngIf=\"f['firstName'].invalid && f['firstName'].touched\">First name is 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\"\n              placeholder=\"Doe\"\n              [class.is-invalid]=\"f['lastName'].invalid && f['lastName'].touched\"\n              autocomplete=\"family-name\" />\n            <div class=\"cp-error\" *ngIf=\"f['lastName'].invalid && f['lastName'].touched\">Last name is required</div>\n          </div>\n        </div>\n\n        <div class=\"cp-field\">\n          <label for=\"phone\">Phone<span class=\"req\">*</span></label>\n          <input type=\"tel\" id=\"phone\" formControlName=\"phone\"\n            placeholder=\"(555) 123-4567\" maxlength=\"14\"\n            [class.is-invalid]=\"f['phone'].invalid && f['phone'].touched\"\n            (input)=\"formatPhone($event)\" autocomplete=\"tel\" />\n          <div class=\"cp-error\" *ngIf=\"f['phone'].invalid && f['phone'].touched\">Phone number is required</div>\n        </div>\n\n        <!-- \u2500\u2500\u2500 Address \u2500\u2500\u2500 -->\n        <div class=\"cp-section-title\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 14.5 9 2.5 2.5 0 0 1 12 11.5Z\"/></svg>\n          Address\n        </div>\n\n        <div class=\"cp-field\">\n          <label for=\"address\">Street Address</label>\n          <input type=\"text\" id=\"address\" formControlName=\"address\"\n            placeholder=\"123 Main Street\"\n            ngx-google-places-autocomplete [options]=\"googleOptions\"\n            (onAddressChange)=\"onAddressChange($event)\"\n            autocomplete=\"off\" />\n        </div>\n\n        <div class=\"cp-row cp-row-triple\">\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 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=\"zip\">Zip Code</label>\n            <input type=\"text\" id=\"zip\" formControlName=\"zip\" placeholder=\"32801\" inputmode=\"numeric\" maxlength=\"5\" />\n          </div>\n        </div>\n\n        <!-- \u2500\u2500\u2500 Account Setup \u2500\u2500\u2500 -->\n        <div class=\"cp-section-title\">\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          Account Setup\n        </div>\n\n        <!-- Role -->\n        <div class=\"cp-field\">\n          <label for=\"role\">Role<span class=\"req\">*</span></label>\n          <div class=\"cp-select\">\n            <select id=\"role\" formControlName=\"role\"\n              [class.is-invalid]=\"f['role'].invalid && f['role'].touched\">\n              <option value=\"\" disabled>Select your role</option>\n              <option *ngFor=\"let r of roles\" [value]=\"r.id\">{{ r.name }}</option>\n            </select>\n          </div>\n          <div class=\"cp-error\" *ngIf=\"f['role'].invalid && f['role'].touched\">Please select a role</div>\n        </div>\n\n        <!-- Password -->\n        <div class=\"cp-row\">\n          <div class=\"cp-field\">\n            <label for=\"password\">Password<span class=\"req\">*</span></label>\n            <div class=\"cp-pw-wrap\">\n              <input [type]=\"showPassword ? 'text' : 'password'\" id=\"password\" formControlName=\"password\"\n                placeholder=\"Min. 8 characters\"\n                [class.is-invalid]=\"f['password'].invalid && f['password'].touched\"\n                autocomplete=\"new-password\" />\n              <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showPassword = !showPassword\"\n                [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\">\n                <svg *ngIf=\"!showPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>\n                <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"/></svg>\n              </button>\n            </div>\n            <div class=\"cp-error\" *ngIf=\"f['password'].invalid && f['password'].touched\">\n              <span *ngIf=\"f['password'].errors?.['required']\">Password is required</span>\n              <span *ngIf=\"f['password'].errors?.['minlength']\">Password must be at least 8 characters</span>\n            </div>\n          </div>\n\n          <div class=\"cp-field\">\n            <label for=\"confirmPassword\">Confirm Password<span class=\"req\">*</span></label>\n            <div class=\"cp-pw-wrap\">\n              <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPassword\" formControlName=\"confirmPassword\"\n                placeholder=\"Repeat password\"\n                [class.is-invalid]=\"(f['confirmPassword'].invalid && f['confirmPassword'].touched) || (claimForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched)\"\n                autocomplete=\"new-password\" />\n              <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showConfirmPassword = !showConfirmPassword\"\n                [attr.aria-label]=\"showConfirmPassword ? 'Hide password' : 'Show password'\">\n                <svg *ngIf=\"!showConfirmPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>\n                <svg *ngIf=\"showConfirmPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"/></svg>\n              </button>\n            </div>\n            <div class=\"cp-error\" *ngIf=\"f['confirmPassword'].invalid && f['confirmPassword'].touched\">Confirm password is required</div>\n            <div class=\"cp-error\" *ngIf=\"claimForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched\">Passwords do not match</div>\n          </div>\n        </div>\n\n        <!-- \u2500\u2500\u2500 Terms & Privacy \u2500\u2500\u2500 -->\n        <div class=\"cp-agreements\">\n\n          <!-- Terms card -->\n          <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.acceptTerms\"\n            [class.v1-card--invalid]=\"!model.acceptTerms && validatePage === 1\">\n            <div class=\"v1-card-icon\">\n              <svg width=\"20\" height=\"20\" 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            <div class=\"v1-card-body\">\n              <p class=\"v1-card-title\">Terms and Conditions</p>\n              <p class=\"v1-card-sub\">Click to read and accept</p>\n            </div>\n            <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.acceptTerms\"\n              (click)=\"openModal(termsAndConditionsModel, 'Terms and Conditions', $event)\">\n              <svg *ngIf=\"model.acceptTerms\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\n                stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n              {{ model.acceptTerms ? 'Agreed' : 'Read &amp; Agree' }}\n            </button>\n          </div>\n\n          <!-- Privacy card -->\n          <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.privacy\"\n            [class.v1-card--invalid]=\"!model.privacy && validatePage === 1\">\n            <div class=\"v1-card-icon\">\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>\n              </svg>\n            </div>\n            <div class=\"v1-card-body\">\n              <p class=\"v1-card-title\">Privacy Statement</p>\n              <p class=\"v1-card-sub\">Click to read and accept</p>\n            </div>\n            <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.privacy\"\n              (click)=\"openModal(termsAndConditionsModel, 'Privacy Statement', $event)\">\n              <svg *ngIf=\"model.privacy\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\n                stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n              {{ model.privacy ? 'Agreed' : 'Read &amp; Agree' }}\n            </button>\n          </div>\n\n        </div>\n        <div class=\"cp-error cp-terms-error\"\n          *ngIf=\"(!model.acceptTerms || !model.privacy) && validatePage === 1\">\n          You must agree to both Terms and Conditions and Privacy Statement to continue\n        </div>\n\n        <!-- \u2500\u2500\u2500 Submit \u2500\u2500\u2500 -->\n        <div class=\"cp-error cp-submit-error\" *ngIf=\"submitError\">{{ submitError }}</div>\n\n        <button type=\"submit\" class=\"cp-btn\" [disabled]=\"isSubmitting\">\n          <span *ngIf=\"isSubmitting\" class=\"cp-spinner cp-spinner-btn\"></span>\n          <span>{{ isSubmitting ? 'Activating\u2026' : 'Claim My Account' }}</span>\n        </button>\n\n      </form>\n    </div>\n  </main>\n\n</div>\n\n<!-- \u2500\u2500\u2500 Terms & Privacy Modal (read-only) \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\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\n      <div class=\"tc-modal-body\">\n        <ng-container *ngIf=\"termsAndConditionTitle === 'Terms and Conditions'\">\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\n          </app-terms-conditions>\n        </ng-container>\n        <ng-container *ngIf=\"termsAndConditionTitle !== 'Terms and Conditions'\">\n          <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\n          </app-privacy-policy>\n        </ng-container>\n      </div>\n\n      <div class=\"tc-modal-footer\">\n        <button type=\"button\" class=\"tc-btn tc-btn-close\" (click)=\"closeModal()\">\n          Close\n        </button>\n      </div>\n\n    </div>\n  </div>\n</ng-template>\n", styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.cp-page{display:flex;min-height:100vh;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0c1620}.cp-left{width:42%;min-width:320px;background:#0c1620;display:flex;flex-direction:column;padding:48px 44px;position:sticky;top:0;height:100vh;overflow-y:auto}@media (max-width: 860px){.cp-left{display:none}}.cp-left-inner{display:flex;flex-direction:column;height:100%}.cp-logo{margin-bottom:40px}.cp-logo svg path{fill:#fff}.cp-left-hero{margin-bottom:36px}.cp-left-hero h1{font-size:26px;font-weight:800;color:#fff;line-height:1.25;margin-bottom:12px}.cp-left-hero p{font-size:14px;color:#9fb3c2;line-height:1.7}.cp-left-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#4077ad;margin-bottom:14px}.cp-benefits{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;gap:18px}.cp-benefits li{display:flex;align-items:flex-start;gap:12px;font-size:13px;color:#9fb3c2;line-height:1.55}.cp-benefit-icon{flex-shrink:0;width:32px;height:32px;background:#4077ad26;border-radius:50%;display:flex;align-items:center;justify-content:center}.cp-benefit-icon svg{width:16px;height:16px}.cp-benefit-icon svg path{fill:#4077ad}.cp-left-footnote{margin-top:32px;font-size:13px;color:#5e7385}.cp-left-footnote a{color:#9fb3c2;text-decoration:none}.cp-left-footnote a:hover{color:#4077ad}.cp-right{flex:1;background:#eef1f4;display:flex;align-items:flex-start;justify-content:center;padding:48px 24px 64px;overflow-y:auto}.cp-form-wrap{width:100%;max-width:560px;background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201f;padding:40px 44px 48px}@media (max-width: 600px){.cp-form-wrap{padding:28px 20px 36px}}.cp-form-header{margin-bottom:30px}.cp-form-header h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:6px}.cp-form-header p{font-size:13px;color:#6b7c8a;line-height:1.6}.cp-section-title{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#0c1620;padding-bottom:10px;margin-bottom:18px;margin-top:26px;border-bottom:2px solid #4077AD;display:flex;align-items:center;gap:8px}.cp-section-title svg{width:14px;height:14px;flex-shrink:0}.cp-section-title svg path{fill:#4077ad}.cp-section-title:first-of-type{margin-top:0}.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.cp-row.cp-row-triple{grid-template-columns:2fr 1fr 1fr}@media (max-width: 520px){.cp-row,.cp-row.cp-row-triple{grid-template-columns:1fr}}.cp-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width:0}.cp-field.cp-field-with-btn{margin-bottom: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-input-row{display:flex;gap:8px}.cp-input-row input{flex:1}.cp-lookup-btn{flex-shrink:0;height:42px;padding:0 18px;background:#4077ad;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s;font-family:inherit}.cp-lookup-btn:hover:not(:disabled){background:#335f8a}.cp-lookup-btn:disabled{opacity:.6;cursor:not-allowed}.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-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-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-account-not-found{display:flex;align-items:flex-start;gap:12px;margin-top:16px;padding:14px 16px;background:#fff5f5;border:1.5px solid #fecaca;border-radius:6px}.cp-anf-icon{flex-shrink:0;width:32px;height:32px;background:#dc35451a;border-radius:50%;display:flex;align-items:center;justify-content:center}.cp-anf-icon svg{width:16px;height:16px}.cp-anf-icon svg path{fill:#dc3545}.cp-anf-title{font-size:13px;font-weight:700;color:#b91c1c;margin:0 0 3px}.cp-anf-sub{font-size:12px;color:#dc3545;margin:0;line-height:1.5}.cp-anf-sub strong{font-weight:600}.cp-invalid-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{background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-invalid-card h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-invalid-card p{font-size:14px;color:#6b7c8a;line-height:1.7}.cp-invalid-icon{width:64px;height:64px;background:#dc35451a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-invalid-icon svg{width:32px;height:32px}.cp-invalid-icon svg path{fill:#dc3545}.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-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-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;margin-top:22px;background:#4077ad;border:none;border-radius:6px;font-size:14px;font-weight:700;letter-spacing:.4px;color:#fff;cursor:pointer;text-decoration:none;transition:background .15s,transform .1s;font-family:inherit}.cp-btn:hover:not(:disabled){background:#335f8a}.cp-btn:active:not(:disabled){transform:scale(.99)}.cp-btn:disabled{opacity:.65;cursor:not-allowed}.cp-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:cp-spin .7s linear infinite}.cp-spinner:not(.cp-spinner-btn){border-color:#4077ad4d;border-top-color:#4077ad}@keyframes cp-spin{to{transform:rotate(360deg)}}.cp-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-success-card{background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-success-card h2{font-size:24px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-success-card p{font-size:14px;color:#6b7c8a;line-height:1.7;margin-bottom:28px}.cp-success-icon{width:64px;height:64px;background:#28a7451a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-success-icon svg{width:32px;height:32px}.cp-success-icon svg path{fill:#28a745}\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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: TermsConditionsComponent, selector: "app-terms-conditions", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ClaimProcessComponent, isStandalone: false, selector: "app-claim-process", ngImport: i0, template: "<h2 class=\"sr-only\">Claim Your Account</h2>\r\n\r\n<!-- \u2500\u2500\u2500 No Email Error \u2500\u2500\u2500 -->\r\n<div *ngIf=\"noEmailError\" class=\"cp-invalid-page\">\r\n  <div class=\"cp-invalid-card\">\r\n    <div class=\"cp-invalid-icon\">\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\r\n    </div>\r\n    <h2>Invalid Access Link</h2>\r\n    <p>This page requires a valid invitation link. Please use the link from your invitation email to claim your account.</p>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Success State \u2500\u2500\u2500 -->\r\n<div *ngIf=\"submitSuccess\" class=\"cp-success-page\">\r\n  <div class=\"cp-success-card\">\r\n    <div class=\"cp-success-icon\">\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n    </div>\r\n    <h2>Account Claimed!</h2>\r\n    <p>Your account has been successfully activated. You can now sign in and start using the platform.</p>\r\n    <a [href]=\"libConfig?.dashboardUrl || '#'\" class=\"cp-btn\">Go to Dashboard</a>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Main Layout \u2500\u2500\u2500 -->\r\n<div *ngIf=\"!noEmailError && !submitSuccess\" class=\"cp-page\">\r\n\r\n  <!-- Left Panel -->\r\n  <aside class=\"cp-left\">\r\n    <div class=\"cp-left-inner\">\r\n\r\n      <!-- Dynamic logo from privacyAndTerms -->\r\n      <div class=\"cp-logo\">\r\n        <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\"\r\n          [alt]=\"privacyAndTerms?.companyName || 'Company Logo'\" class=\"cp-logo-img\" />\r\n        <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-logo-fallback\">\r\n          {{ privacyAndTerms?.companyName }}\r\n        </span>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Scenario: Account Found (authenticated) \u2500\u2500 -->\r\n      <ng-container *ngIf=\"isAuthenticated\">\r\n        <div class=\"cp-left-hero\">\r\n          <div class=\"cp-left-badge cp-left-badge--found\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n            Account Verified\r\n          </div>\r\n          <h1>Welcome back, <span class=\"cp-hero-brand\">{{ existingUserData?.firstName || privacyAndTerms?.companyName }}</span></h1>\r\n          <p>Your identity has been verified. Your profile and account history are intact \u2014 click to jump straight into your dashboard.</p>\r\n        </div>\r\n        <ul class=\"cp-benefits\">\r\n          <li>\r\n            <span class=\"cp-benefit-icon cp-benefit-icon--green\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Profile Preserved</strong>\r\n              <span>Your settings, history, and connections are all intact and ready to use.</span>\r\n            </div>\r\n          </li>\r\n          <li>\r\n            <span class=\"cp-benefit-icon cp-benefit-icon--green\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Verified &amp; Secure</strong>\r\n              <span>Your account was verified through a secure multi-step process.</span>\r\n            </div>\r\n          </li>\r\n          <li>\r\n            <span class=\"cp-benefit-icon cp-benefit-icon--green\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Instant Dashboard Access</strong>\r\n              <span>One click and you're back on the platform, exactly where you left off.</span>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n      </ng-container>\r\n\r\n      <!-- \u2500\u2500 Scenario: Activation (new user / claim flow) \u2500\u2500 -->\r\n      <ng-container *ngIf=\"!isAuthenticated\">\r\n        <div class=\"cp-left-hero\">\r\n          <div class=\"cp-left-badge\">Account Activation</div>\r\n          <h1>Welcome to <span class=\"cp-hero-brand\">{{ privacyAndTerms?.companyName }}</span></h1>\r\n          <p>Your account is ready. Complete this short form to set your credentials and gain full access to the platform's tools, programs, and services.</p>\r\n        </div>\r\n        <ul class=\"cp-benefits\">\r\n          <li>\r\n            <span class=\"cp-benefit-icon\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Secure &amp; Encrypted</strong>\r\n              <span>Your information is protected end-to-end and handled per our Privacy Policy.</span>\r\n            </div>\r\n          </li>\r\n          <li>\r\n            <span class=\"cp-benefit-icon\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Instant Access</strong>\r\n              <span>Once activated, get immediate access to programs, rosters, and service requests.</span>\r\n            </div>\r\n          </li>\r\n          <li>\r\n            <span class=\"cp-benefit-icon\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Team &amp; Client Network</strong>\r\n              <span>Connect with certified professionals nationwide and manage your team from one dashboard.</span>\r\n            </div>\r\n          </li>\r\n          <li>\r\n            <span class=\"cp-benefit-icon\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Complete Your Profile</strong>\r\n              <span>A complete profile unlocks all features and makes you visible to clients and partners.</span>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n      </ng-container>\r\n\r\n      <!-- Dynamic contact info -->\r\n      <div class=\"cp-left-contact\" *ngIf=\"privacyAndTerms?.contactEmail || privacyAndTerms?.phone\">\r\n        <a *ngIf=\"privacyAndTerms?.contactEmail\"\r\n          [href]=\"'mailto:' + privacyAndTerms.contactEmail\" class=\"cp-contact-link\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\"/></svg>\r\n          {{ privacyAndTerms?.contactEmail }}\r\n        </a>\r\n        <a *ngIf=\"privacyAndTerms?.phone\"\r\n          [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-contact-link\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\"/></svg>\r\n          {{ privacyAndTerms?.phone }}\r\n        </a>\r\n      </div>\r\n\r\n      <!-- Dynamic website link -->\r\n      <p class=\"cp-left-footnote\">\r\n        <a [href]=\"privacyAndTerms?.websiteurl || '#'\" target=\"_blank\" rel=\"noopener\">\r\n          Visit {{ privacyAndTerms?.companyName }}\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\"/></svg>\r\n        </a>\r\n      </p>\r\n\r\n    </div>\r\n  </aside>\r\n\r\n  <!-- Right Panel \u2014 Form -->\r\n  <main class=\"cp-right\">\r\n\r\n    <!-- Mobile-only top bar (hidden on desktop where left panel is visible) -->\r\n    <div class=\"cp-mobile-bar\">\r\n      <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\"\r\n        [alt]=\"privacyAndTerms?.companyName\" class=\"cp-mobile-logo\" />\r\n      <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-mobile-company\">\r\n        {{ privacyAndTerms?.companyName }}\r\n      </span>\r\n    </div>\r\n\r\n    <!-- \u2500\u2500 Account Found Preview (authenticated users) \u2500\u2500 -->\r\n    <div *ngIf=\"isAuthenticated\" class=\"cf-wrap\">\r\n      <div class=\"cf-badge\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n        Account Found\r\n      </div>\r\n      <h2 class=\"cf-heading\">Welcome back!</h2>\r\n      <p class=\"cf-sub\">We found your account. Here's a summary of your profile before you continue.</p>\r\n\r\n      <div class=\"cf-card\">\r\n        <div class=\"cf-avatar\">{{ getInitials() }}</div>\r\n        <div class=\"cf-info-grid\">\r\n          <div class=\"cf-info-row\">\r\n            <span class=\"cf-info-label\">Full Name</span>\r\n            <span class=\"cf-info-value\">{{ existingUserData?.firstName }} {{ existingUserData?.lastName }}</span>\r\n          </div>\r\n          <div class=\"cf-info-row\">\r\n            <span class=\"cf-info-label\">Email</span>\r\n            <span class=\"cf-info-value\">{{ userEmail }}</span>\r\n          </div>\r\n          <div class=\"cf-info-row\" *ngIf=\"existingUserData?.phone\">\r\n            <span class=\"cf-info-label\">Phone</span>\r\n            <span class=\"cf-info-value\">{{ existingUserData.phone }}</span>\r\n          </div>\r\n          <div class=\"cf-info-row\" *ngIf=\"existingUserData?.userRoles?.length\">\r\n            <span class=\"cf-info-label\">Role</span>\r\n            <span class=\"cf-info-value\">\r\n              <span class=\"cf-role-badge\">{{ existingUserData.userRoles[0]?.roleName }}</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"cf-info-row\" *ngIf=\"existingUserData?.city || existingUserData?.state\">\r\n            <span class=\"cf-info-label\">Location</span>\r\n            <span class=\"cf-info-value\">\r\n              {{ existingUserData?.city }}{{ existingUserData?.city && existingUserData?.state ? ', ' : '' }}{{ existingUserData?.state }}\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <a [href]=\"libConfig?.dashboardUrl || '#'\" class=\"cf-access-btn\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M10 6v2H5v11h11v-5h2v7H3V6h7zm11-3v8l-3.36-3.36-5.3 5.31-1.41-1.42 5.3-5.3L13 3h8z\"/></svg>\r\n        Click to Access Your Account\r\n      </a>\r\n\r\n      <p class=\"cf-not-you\">\r\n        Not you or wrong account?\r\n        <a *ngIf=\"privacyAndTerms?.contactEmail\" [href]=\"'mailto:' + privacyAndTerms.contactEmail\">Contact support</a>\r\n        <span *ngIf=\"!privacyAndTerms?.contactEmail\">Contact your administrator.</span>\r\n      </p>\r\n    </div>\r\n\r\n    <!-- \u2500\u2500 Claim / Activation Form \u2500\u2500 -->\r\n    <div *ngIf=\"!isAuthenticated\" class=\"cp-form-wrap\">\r\n\r\n      <div class=\"cp-form-header\">\r\n        <h2>Activate Your Account</h2>\r\n        <p>Your {{ privacyAndTerms?.companyName }} account is ready. Set your details below to complete activation.</p>\r\n        <!-- Email display (read-only) -->\r\n        <div class=\"cp-email-display\" *ngIf=\"userEmail\">\r\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\"/></svg>\r\n          <span>{{ userEmail }}</span>\r\n        </div>\r\n        <div class=\"cp-loading-hint\" *ngIf=\"isLoadingUser\">\r\n          <span class=\"cp-spinner\"></span> Loading account details\u2026\r\n        </div>\r\n        <div class=\"cp-error\" *ngIf=\"userLookupError\">{{ userLookupError }}</div>\r\n\r\n        <!-- Account not found in Auth0 -->\r\n        <div class=\"cp-account-not-found\" *ngIf=\"accountNotFound\">\r\n          <div class=\"cp-anf-icon\">\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\r\n          </div>\r\n          <div>\r\n            <p class=\"cp-anf-title\">Account Not Found</p>\r\n            <p class=\"cp-anf-sub\">No account is linked to <strong>{{ userEmail }}</strong>. Please contact support or use the link from your invitation email.</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <form [formGroup]=\"claimForm\" (ngSubmit)=\"onSubmit()\" novalidate *ngIf=\"!accountNotFound\">\r\n\r\n        <!-- \u2500\u2500\u2500 Contact Information \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\"/></svg>\r\n          Contact Information\r\n        </div>\r\n\r\n        <!-- Email \u2014 auto-filled, read-only -->\r\n        <div class=\"cp-field\">\r\n          <label for=\"cpEmail\">Email Address</label>\r\n          <div class=\"cp-readonly-wrap\">\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\"/></svg>\r\n            <input type=\"email\" id=\"cpEmail\" formControlName=\"email\" readonly\r\n              class=\"cp-input-readonly\" autocomplete=\"email\" />\r\n          </div>\r\n          <small class=\"cp-autofill-note\">Auto-filled from your invitation</small>\r\n        </div>\r\n\r\n        <div class=\"cp-row\">\r\n          <div class=\"cp-field\">\r\n            <label for=\"firstName\">First Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" id=\"firstName\" formControlName=\"firstName\"\r\n              placeholder=\"Jane\"\r\n              [class.is-invalid]=\"f['firstName'].invalid && f['firstName'].touched\"\r\n              autocomplete=\"given-name\" />\r\n            <div class=\"cp-error\" *ngIf=\"f['firstName'].invalid && f['firstName'].touched\">First name is required</div>\r\n          </div>\r\n          <div class=\"cp-field\">\r\n            <label for=\"lastName\">Last Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" id=\"lastName\" formControlName=\"lastName\"\r\n              placeholder=\"Doe\"\r\n              [class.is-invalid]=\"f['lastName'].invalid && f['lastName'].touched\"\r\n              autocomplete=\"family-name\" />\r\n            <div class=\"cp-error\" *ngIf=\"f['lastName'].invalid && f['lastName'].touched\">Last name is required</div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"cp-field\">\r\n          <label for=\"phone\">Phone<span class=\"req\">*</span></label>\r\n          <input type=\"tel\" id=\"phone\" formControlName=\"phone\"\r\n            placeholder=\"(555) 123-4567\" maxlength=\"14\"\r\n            [class.is-invalid]=\"f['phone'].invalid && f['phone'].touched\"\r\n            (input)=\"formatPhone($event)\" autocomplete=\"tel\" />\r\n          <div class=\"cp-error\" *ngIf=\"f['phone'].invalid && f['phone'].touched\">Phone number is required</div>\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Address \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 14.5 9 2.5 2.5 0 0 1 12 11.5Z\"/></svg>\r\n          Address\r\n        </div>\r\n\r\n        <div class=\"cp-field\">\r\n          <label for=\"address\">Street Address</label>\r\n          <input type=\"text\" id=\"address\" formControlName=\"address\"\r\n            placeholder=\"123 Main Street\"\r\n            ngx-google-places-autocomplete [options]=\"googleOptions\"\r\n            (onAddressChange)=\"onAddressChange($event)\"\r\n            autocomplete=\"off\" />\r\n        </div>\r\n\r\n        <div class=\"cp-row cp-row-triple\">\r\n          <div class=\"cp-field\">\r\n            <label for=\"city\">City</label>\r\n            <input type=\"text\" id=\"city\" formControlName=\"city\" placeholder=\"Orlando\" />\r\n          </div>\r\n          <div class=\"cp-field\">\r\n            <label for=\"state\">State</label>\r\n            <input type=\"text\" id=\"state\" formControlName=\"state\" placeholder=\"FL\" maxlength=\"2\" />\r\n          </div>\r\n          <div class=\"cp-field\">\r\n            <label for=\"zip\">Zip Code</label>\r\n            <input type=\"text\" id=\"zip\" formControlName=\"zip\" placeholder=\"32801\" inputmode=\"numeric\" maxlength=\"5\" />\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Account Setup \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\"/></svg>\r\n          Account Setup\r\n        </div>\r\n\r\n        <!-- Role -->\r\n        <div class=\"cp-field\">\r\n          <label for=\"role\">Role<span class=\"req\">*</span></label>\r\n          <div class=\"cp-select\">\r\n            <select id=\"role\" formControlName=\"role\"\r\n              [class.is-invalid]=\"f['role'].invalid && f['role'].touched\">\r\n              <option value=\"\" disabled>Select your role</option>\r\n              <option *ngFor=\"let r of roles\" [value]=\"r.id\">{{ r.name }}</option>\r\n            </select>\r\n          </div>\r\n          <div class=\"cp-error\" *ngIf=\"f['role'].invalid && f['role'].touched\">Please select a role</div>\r\n        </div>\r\n\r\n        <!-- Password block \u2014 hidden while loading to avoid flash for existing users -->\r\n        <ng-container *ngIf=\"!isLoadingUser\">\r\n\r\n          <!-- Reset toggle: only shown for existing users who already have a password -->\r\n          <div class=\"cp-reset-toggle\" *ngIf=\"userHasExistingDetails\">\r\n            <label class=\"cp-toggle-label\">\r\n              <span class=\"cp-toggle-switch\">\r\n                <input type=\"checkbox\" [checked]=\"resetPasswordEnabled\" (change)=\"toggleResetPassword()\">\r\n                <span class=\"cp-toggle-knob\"></span>\r\n              </span>\r\n              Reset Password\r\n            </label>\r\n            <p class=\"cp-toggle-hint\">Your account already has a password set. Enable this to change it.</p>\r\n          </div>\r\n\r\n          <!-- New-user hint \u2014 shown only when no existing details (password is required) -->\r\n          <div class=\"cp-new-user-hint\" *ngIf=\"!userHasExistingDetails\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2z\"/></svg>\r\n            Create a password for your new account\r\n          </div>\r\n\r\n          <!-- Password fields -->\r\n          <div class=\"cp-row\" *ngIf=\"showPasswordFields\">\r\n          <div class=\"cp-field\">\r\n            <label for=\"password\">Password<span class=\"req\">*</span></label>\r\n            <div class=\"cp-pw-wrap\">\r\n              <input [type]=\"showPassword ? 'text' : 'password'\" id=\"password\" formControlName=\"password\"\r\n                placeholder=\"Min. 8 characters\"\r\n                [class.is-invalid]=\"f['password'].invalid && f['password'].touched\"\r\n                autocomplete=\"new-password\" />\r\n              <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showPassword = !showPassword\"\r\n                [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\">\r\n                <svg *ngIf=\"!showPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>\r\n                <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"/></svg>\r\n              </button>\r\n            </div>\r\n            <div class=\"cp-error\" *ngIf=\"f['password'].invalid && f['password'].touched\">\r\n              <span *ngIf=\"f['password'].errors?.['required']\">Password is required</span>\r\n              <span *ngIf=\"f['password'].errors?.['minlength']\">Password must be at least 8 characters</span>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"cp-field\">\r\n            <label for=\"confirmPassword\">Confirm Password<span class=\"req\">*</span></label>\r\n            <div class=\"cp-pw-wrap\">\r\n              <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPassword\" formControlName=\"confirmPassword\"\r\n                placeholder=\"Repeat password\"\r\n                [class.is-invalid]=\"(f['confirmPassword'].invalid && f['confirmPassword'].touched) || (claimForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched)\"\r\n                autocomplete=\"new-password\" />\r\n              <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showConfirmPassword = !showConfirmPassword\"\r\n                [attr.aria-label]=\"showConfirmPassword ? 'Hide password' : 'Show password'\">\r\n                <svg *ngIf=\"!showConfirmPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>\r\n                <svg *ngIf=\"showConfirmPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"/></svg>\r\n              </button>\r\n            </div>\r\n            <div class=\"cp-error\" *ngIf=\"f['confirmPassword'].invalid && f['confirmPassword'].touched\">Confirm password is required</div>\r\n            <div class=\"cp-error\" *ngIf=\"claimForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched\">Passwords do not match</div>\r\n          </div>\r\n        </div>\r\n\r\n        </ng-container><!-- end password block -->\r\n\r\n        <!-- \u2500\u2500\u2500 Business Information \u2500\u2500\u2500 -->\r\n        <ng-container *ngIf=\"isBusinessRole\">\r\n          <div class=\"cp-section-title\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z\"/></svg>\r\n            Business Information\r\n          </div>\r\n\r\n          <div class=\"cp-row\">\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessName\">Business Name<span class=\"req\">*</span></label>\r\n              <input type=\"text\" id=\"businessName\" formControlName=\"businessName\"\r\n                placeholder=\"Business Name\"\r\n                [class.is-invalid]=\"f['businessName'].invalid && f['businessName'].touched\" />\r\n              <div class=\"cp-error\" *ngIf=\"f['businessName'].invalid && f['businessName'].touched\">Business name is required</div>\r\n            </div>\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessEmail\">Business Email<span class=\"req\">*</span></label>\r\n              <input type=\"email\" id=\"businessEmail\" formControlName=\"businessEmail\"\r\n                placeholder=\"business@example.com\"\r\n                [class.is-invalid]=\"f['businessEmail'].invalid && f['businessEmail'].touched\" />\r\n              <div class=\"cp-error\" *ngIf=\"f['businessEmail'].invalid && f['businessEmail'].touched\">\r\n                <span *ngIf=\"f['businessEmail'].errors?.['required']\">Business email is required</span>\r\n                <span *ngIf=\"f['businessEmail'].errors?.['email']\">Enter a valid email</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"cp-field\">\r\n            <label for=\"businessAddress\">Business Address</label>\r\n            <input type=\"text\" id=\"businessAddress\" formControlName=\"businessAddress\"\r\n              placeholder=\"123 Business Street\"\r\n              ngx-google-places-autocomplete [options]=\"googleOptions\"\r\n              (onAddressChange)=\"onBusinessAddressChange($event)\"\r\n              autocomplete=\"off\" />\r\n          </div>\r\n\r\n          <div class=\"cp-row cp-row-triple\">\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessCity\">City</label>\r\n              <input type=\"text\" id=\"businessCity\" formControlName=\"businessCity\" placeholder=\"City\" />\r\n            </div>\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessState\">State</label>\r\n              <input type=\"text\" id=\"businessState\" formControlName=\"businessState\" placeholder=\"ST\" maxlength=\"2\" />\r\n            </div>\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessZip\">Zip</label>\r\n              <input type=\"text\" id=\"businessZip\" formControlName=\"businessZip\" placeholder=\"00000\" inputmode=\"numeric\" maxlength=\"5\" />\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Business Logo -->\r\n          <div class=\"cp-field\">\r\n            <label>Business Logo</label>\r\n            <div class=\"cp-upload-wrap\">\r\n              <input #cpLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\"\r\n                (change)=\"onBusinessLogoChange($event)\" class=\"cp-upload-hidden\" />\r\n              <input type=\"text\" class=\"cp-upload-text\" [value]=\"businessLogoName\" readonly\r\n                placeholder=\"Click to upload business logo\" (click)=\"cpLogoInput.click()\" />\r\n              <button type=\"button\" class=\"cp-upload-btn\" (click)=\"cpLogoInput.click()\" aria-label=\"Upload logo\">\r\n                <svg viewBox=\"0 0 24 24\"><path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\"/></svg>\r\n              </button>\r\n            </div>\r\n            <small class=\"cp-upload-hint\">Allowed formats: PNG, JPG, JPEG</small>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <!-- \u2500\u2500\u2500 Profile Picture \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\"/></svg>\r\n          Profile Picture\r\n        </div>\r\n        <div class=\"cp-field\">\r\n          <label>Profile Picture<span class=\"req\">*</span></label>\r\n          <div class=\"cp-upload-wrap\">\r\n            <input #cpProfileInput type=\"file\" accept=\".png,.jpg,.jpeg\"\r\n              (change)=\"onProfileFileChange($event)\" class=\"cp-upload-hidden\" />\r\n            <input type=\"text\" class=\"cp-upload-text\" [value]=\"profileFileName\" readonly\r\n              placeholder=\"Click to upload profile picture\" (click)=\"cpProfileInput.click()\" />\r\n            <button type=\"button\" class=\"cp-upload-btn\" (click)=\"cpProfileInput.click()\" aria-label=\"Upload profile picture\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\"/></svg>\r\n            </button>\r\n          </div>\r\n          <small class=\"cp-upload-hint\">Allowed formats: PNG, JPG, JPEG</small>\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Terms & Privacy \u2500\u2500\u2500 -->\r\n        <div class=\"cp-terms\">\r\n          <input type=\"checkbox\" id=\"agree\"\r\n            [checked]=\"model.acceptTerms && model.privacy\"\r\n            (change)=\"onTermsCheckboxChange($event)\" />\r\n          <label for=\"agree\">I accept the\r\n            <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Terms and Conditions', $event)\">Terms &amp; Conditions</a>\r\n            and\r\n            <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Privacy Statement', $event)\">Privacy Policy</a>,\r\n            and confirm I am authorized to activate this account.\r\n          </label>\r\n        </div>\r\n        <div class=\"cp-error cp-terms-error\"\r\n          *ngIf=\"(!model.acceptTerms || !model.privacy) && validatePage === 1\">\r\n          You must agree to both Terms and Conditions and Privacy Statement to continue\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Submit \u2500\u2500\u2500 -->\r\n        <div class=\"cp-error cp-submit-error\" *ngIf=\"submitError\">{{ submitError }}</div>\r\n\r\n        <button type=\"submit\" class=\"cp-btn\" [disabled]=\"isSubmitting\">\r\n          <span *ngIf=\"isSubmitting\" class=\"cp-spinner cp-spinner-btn\"></span>\r\n          <span>{{ isSubmitting ? 'Activating\u2026' : 'Claim My Account' }}</span>\r\n        </button>\r\n\r\n      </form>\r\n    </div>\r\n  </main>\r\n\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Terms & Privacy Modal (read-only) \u2500\u2500\u2500 -->\r\n<ng-template #termsAndConditionsModel>\r\n  <div class=\"modal-dialog modal-dialog-centered tc-modal-dialog\">\r\n    <div class=\"modal-content tc-modal\">\r\n\r\n      <div class=\"tc-modal-header\">\r\n        <div class=\"tc-header-icon\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"/>\r\n            <polyline points=\"14 2 14 8 20 8\"/>\r\n            <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/>\r\n            <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/>\r\n          </svg>\r\n        </div>\r\n        <h4 class=\"tc-modal-title\">{{ termsAndConditionTitle }}</h4>\r\n        <button type=\"button\" class=\"tc-modal-close\" (click)=\"closeModal()\" aria-label=\"Close\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\r\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"tc-modal-body\">\r\n        <ng-container *ngIf=\"termsAndConditionTitle === 'Terms and Conditions'\">\r\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-terms-conditions>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"termsAndConditionTitle !== 'Terms and Conditions'\">\r\n          <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-privacy-policy>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"tc-modal-footer\">\r\n        <button type=\"button\" class=\"tc-btn tc-btn-close\" (click)=\"closeModal()\">\r\n          Close\r\n        </button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.cp-page{display:flex;min-height:100vh;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0c1620}@media (max-width: 860px){.cp-page{flex-direction:column}}.cp-left{width:40%;min-width:300px;background:#fff;border-right:1px solid #e2eaf2;display:flex;flex-direction:column;padding:44px 40px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-left{display:none}}.cp-left-inner{display:flex;flex-direction:column;height:100%}.cp-logo{margin-bottom:36px}.cp-logo-img{max-height:48px;max-width:200px;object-fit:contain;display:block}.cp-logo-fallback{font-size:20px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-left-hero{margin-bottom:32px}.cp-left-hero h1{font-size:22px;font-weight:800;color:#0c1620;line-height:1.3;margin:8px 0 10px}.cp-left-hero p{font-size:13px;color:#6b7c8a;line-height:1.75}.cp-hero-brand{color:#4077ad}.cp-left-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#4077ad;background:#4077ad14;border:1px solid rgba(64,119,173,.2);padding:4px 10px;border-radius:99px}.cp-benefits{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;gap:16px}.cp-benefits li{display:flex;align-items:flex-start;gap:12px}.cp-benefit-icon{flex-shrink:0;width:36px;height:36px;background:#4077ad12;border:1px solid rgba(64,119,173,.14);border-radius:10px;display:flex;align-items:center;justify-content:center}.cp-benefit-icon svg{width:17px;height:17px}.cp-benefit-icon svg path{fill:#4077ad}.cp-benefit-text{display:flex;flex-direction:column;gap:2px;padding-top:2px}.cp-benefit-text strong{font-size:12.5px;font-weight:700;color:#0c1620;display:block}.cp-benefit-text span{font-size:11.5px;color:#6b7c8a;line-height:1.6}.cp-left-contact{display:flex;flex-direction:column;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid #e8edf3}.cp-contact-link{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-contact-link svg{width:14px;height:14px;flex-shrink:0}.cp-contact-link svg path{fill:currentColor}.cp-contact-link:hover{color:#4077ad}.cp-left-footnote{margin-top:18px;font-size:12.5px}.cp-left-footnote a{display:inline-flex;align-items:center;gap:5px;color:#4077ad;text-decoration:none;font-weight:600;transition:color .15s}.cp-left-footnote a svg{width:12px;height:12px}.cp-left-footnote a svg path{fill:#4077ad}.cp-left-footnote a:hover{color:#335f8a;text-decoration:underline}.cp-mobile-bar{display:none;align-items:center;justify-content:center;padding:16px 24px;background:#fff;border-bottom:1px solid #e2eaf2;margin-bottom:0}@media (max-width: 860px){.cp-mobile-bar{display:flex}}.cp-mobile-logo{max-height:36px;max-width:160px;object-fit:contain}.cp-mobile-company{font-size:18px;font-weight:800;color:#4077ad}.cp-right{flex:1;background:#eef1f4;display:flex;flex-direction:column;align-items:center;padding:48px 24px 64px;overflow-y:auto;min-width:0}@media (max-width: 860px){.cp-right{padding:0 0 48px}}.cp-form-wrap{width:100%;max-width:580px;background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201a;padding:40px 44px 48px;margin-top:48px}@media (max-width: 860px){.cp-form-wrap{border-radius:0;box-shadow:none;border-top:1px solid #e2eaf2;margin-top:0;padding:32px 20px 48px;max-width:100%}}@media (max-width: 480px){.cp-form-wrap{padding:24px 16px 40px}}.cp-form-header{margin-bottom:30px}.cp-form-header h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:6px}.cp-form-header p{font-size:13px;color:#6b7c8a;line-height:1.6}.cp-section-title{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#0c1620;padding-bottom:10px;margin-bottom:18px;margin-top:26px;border-bottom:2px solid #4077AD;display:flex;align-items:center;gap:8px}.cp-section-title svg{width:14px;height:14px;flex-shrink:0}.cp-section-title svg path{fill:#4077ad}.cp-section-title:first-of-type{margin-top:0}.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.cp-row.cp-row-triple{grid-template-columns:2fr 1fr 1fr}@media (max-width: 560px){.cp-row{grid-template-columns:1fr}.cp-row.cp-row-triple{grid-template-columns:1fr 1fr}}@media (max-width: 400px){.cp-row.cp-row-triple{grid-template-columns:1fr}}.cp-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width:0}.cp-field.cp-field-with-btn{margin-bottom: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-input-row{display:flex;gap:8px}.cp-input-row input{flex:1}.cp-lookup-btn{flex-shrink:0;height:42px;padding:0 18px;background:#4077ad;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s;font-family:inherit}.cp-lookup-btn:hover:not(:disabled){background:#335f8a}.cp-lookup-btn:disabled{opacity:.6;cursor:not-allowed}.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-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-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-account-not-found{display:flex;align-items:flex-start;gap:12px;margin-top:16px;padding:14px 16px;background:#fff5f5;border:1.5px solid #fecaca;border-radius:6px}.cp-anf-icon{flex-shrink:0;width:32px;height:32px;background:#dc35451a;border-radius:50%;display:flex;align-items:center;justify-content:center}.cp-anf-icon svg{width:16px;height:16px}.cp-anf-icon svg path{fill:#dc3545}.cp-anf-title{font-size:13px;font-weight:700;color:#b91c1c;margin:0 0 3px}.cp-anf-sub{font-size:12px;color:#dc3545;margin:0;line-height:1.5}.cp-anf-sub strong{font-weight:600}.cp-invalid-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{background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-invalid-card h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-invalid-card p{font-size:14px;color:#6b7c8a;line-height:1.7}.cp-invalid-icon{width:64px;height:64px;background:#dc35451a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-invalid-icon svg{width:32px;height:32px}.cp-invalid-icon svg path{fill:#dc3545}.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-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-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;margin-top:22px;background:#4077ad;border:none;border-radius:6px;font-size:14px;font-weight:700;letter-spacing:.4px;color:#fff;cursor:pointer;text-decoration:none;transition:background .15s,transform .1s;font-family:inherit}.cp-btn:hover:not(:disabled){background:#335f8a}.cp-btn:active:not(:disabled){transform:scale(.99)}.cp-btn:disabled{opacity:.65;cursor:not-allowed}.cp-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:cp-spin .7s linear infinite}.cp-spinner:not(.cp-spinner-btn){border-color:#4077ad4d;border-top-color:#4077ad}@keyframes cp-spin{to{transform:rotate(360deg)}}.cp-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-success-card{background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-success-card h2{font-size:24px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-success-card p{font-size:14px;color:#6b7c8a;line-height:1.7;margin-bottom:28px}.cp-success-icon{width:64px;height:64px;background:#28a7451a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-success-icon svg{width:32px;height:32px}.cp-success-icon svg path{fill:#28a745}.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-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-terms{display:flex;align-items:flex-start;gap:10px;margin:22px 0 4px}.cp-terms input[type=checkbox]{margin-top:2px;width:15px;height:15px;flex-shrink:0;accent-color:#4077AD;cursor:pointer}.cp-terms label{font-size:12.5px;color:#6b7c8a;line-height:1.6;cursor:pointer;margin:0}.cp-terms label a{color:#4077ad;text-decoration:underline;font-weight:600}.cp-terms label a:hover{color:#335f8a}.cp-reset-toggle{margin:6px 0 18px;padding:14px 16px;background:#f0f7ff;border:1.5px solid #b8d4ef;border-radius:6px}.cp-toggle-label{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#0c1620;cursor:pointer;margin:0}.cp-toggle-switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0}.cp-toggle-switch input{opacity:0;width:0;height:0;position:absolute}.cp-toggle-switch input:checked+.cp-toggle-knob{background:#4077ad}.cp-toggle-switch input:checked+.cp-toggle-knob:before{transform:translate(16px)}.cp-toggle-knob{position:absolute;inset:0;background:#d3dce3;border-radius:22px;transition:background .2s;cursor:pointer}.cp-toggle-knob:before{content:\"\";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px #0003}.cp-toggle-hint{font-size:11.5px;color:#6b7c8a;margin:6px 0 0}.cp-upload-wrap{display:flex;align-items:stretch}.cp-upload-wrap .cp-upload-hidden{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.cp-upload-wrap .cp-upload-text{flex:1;border-radius:6px 0 0 6px!important;cursor:pointer;min-width:0}.cp-upload-btn{flex-shrink:0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#eef1f4;border:1.5px solid #d3dce3;border-left:none;border-radius:0 6px 6px 0;cursor:pointer;transition:background .15s}.cp-upload-btn:hover{background:#dfe4ea}.cp-upload-btn svg{width:18px;height:18px}.cp-upload-btn svg path{fill:#4077ad}.cp-upload-hint{display:block;font-size:11px;color:#6b7c8a;margin-top:4px}.cp-left-badge--found{color:#166534;background:#22c55e1a;border-color:#22c55e47;gap:5px}.cp-left-badge--found svg{width:12px;height:12px;flex-shrink:0}.cp-left-badge--found svg path{fill:#16a34a}.cp-benefit-icon--green{background:#22c55e14;border-color:#22c55e2e}.cp-benefit-icon--green svg path{fill:#16a34a}.cf-wrap{width:100%;max-width:520px;margin:0 auto;padding:48px 32px 40px;display:flex;flex-direction:column;align-items:center;text-align:center}@media (max-width: 540px){.cf-wrap{padding:32px 20px 28px}}.cf-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:#166534;background:#22c55e1a;border:1px solid rgba(34,197,94,.28);padding:5px 14px;border-radius:99px;margin-bottom:20px}.cf-badge svg{width:13px;height:13px;flex-shrink:0}.cf-badge svg path{fill:#16a34a}.cf-heading{font-size:26px;font-weight:800;color:#0c1620;margin:0 0 8px;line-height:1.2}.cf-sub{font-size:13.5px;color:#6b7c8a;margin:0 0 28px;line-height:1.6;max-width:380px}.cf-card{width:100%;background:#fff;border:1.5px solid #d3dce3;border-radius:14px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:20px;box-shadow:0 4px 16px #0c16200f;margin-bottom:28px;text-align:left}.cf-avatar{width:72px;height:72px;border-radius:50%;background:#4077ad;color:#fff;font-size:24px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:1px;box-shadow:0 4px 12px #4077ad59}.cf-info-grid{width:100%;display:flex;flex-direction:column;gap:0;border:1px solid #e8edf3;border-radius:10px;overflow:hidden}.cf-info-row{display:flex;align-items:center;padding:11px 16px;gap:12px;border-bottom:1px solid #e8edf3}.cf-info-row:last-child{border-bottom:none}@media (max-width: 400px){.cf-info-row{flex-direction:column;align-items:flex-start;gap:2px}}.cf-info-label{font-size:11.5px;font-weight:700;color:#6b7c8a;text-transform:uppercase;letter-spacing:.8px;min-width:90px;flex-shrink:0}.cf-info-value{font-size:13.5px;font-weight:500;color:#0c1620;word-break:break-word}.cf-role-badge{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;color:#4077ad;background:#4077ad14;border:1px solid rgba(64,119,173,.2);padding:3px 10px;border-radius:99px;letter-spacing:.4px}.cf-access-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:0 24px;height:52px;background:#4077ad;color:#fff;border-radius:10px;font-size:14.5px;font-weight:700;text-decoration:none;letter-spacing:.3px;transition:background .15s,transform .1s,box-shadow .15s;box-shadow:0 4px 14px #4077ad59;margin-bottom:18px}.cf-access-btn svg{width:18px;height:18px;flex-shrink:0}.cf-access-btn svg path{fill:#fff}.cf-access-btn:hover{background:#335f8a;box-shadow:0 6px 18px #4077ad73;transform:translateY(-1px);color:#fff;text-decoration:none}.cf-access-btn:active{transform:scale(.99)}.cf-not-you{font-size:12px;color:#6b7c8a;margin:0}.cf-not-you a{color:#4077ad;text-decoration:underline;font-weight:600}.cf-not-you a:hover{color:#335f8a}\n"], dependencies: [{ kind: "directive", type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: TermsConditionsComponent, selector: "app-terms-conditions", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ClaimProcessComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-claim-process', standalone: false, template: "<h2 class=\"sr-only\">Claim Your Account</h2>\n\n<!-- \u2500\u2500\u2500 No Email Error \u2500\u2500\u2500 -->\n<div *ngIf=\"noEmailError\" class=\"cp-invalid-page\">\n  <div class=\"cp-invalid-card\">\n    <div class=\"cp-invalid-icon\">\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\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 account.</p>\n  </div>\n</div>\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\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\n    </div>\n    <h2>Account Claimed!</h2>\n    <p>Your account has been successfully activated. You can now sign in and start using the platform.</p>\n    <a [href]=\"libConfig?.dashboardUrl || '#'\" class=\"cp-btn\">Go to Dashboard</a>\n  </div>\n</div>\n\n<!-- \u2500\u2500\u2500 Main Layout \u2500\u2500\u2500 -->\n<div *ngIf=\"!noEmailError && !submitSuccess\" class=\"cp-page\">\n\n  <!-- Left Panel -->\n  <aside class=\"cp-left\">\n    <div class=\"cp-left-inner\">\n\n      <div class=\"cp-logo\">\n        <svg version=\"1.2\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 248 48\" width=\"180\" height=\"35\" role=\"img\" aria-label=\"BOOTOG\">\n          <style>.s0 { fill: #ffffff }</style>\n          <g id=\"bootog-logo\">\n            <path class=\"s0\" d=\"m190.36 18.85q-0.1-0.39-0.21-0.78-0.13-0.39-0.26-0.78-0.13-0.38-0.26-0.76-0.15-0.38-0.31-0.75-0.36 0.47-0.75 0.91-0.38 0.43-0.8 0.85-0.41 0.4-0.86 0.78-0.45 0.39-0.92 0.73 0.12 0.39 0.21 0.76 0.09 0.38 0.17 0.76 0.08 0.38 0.14 0.76 0.05 0.39 0.09 0.78 0.51-0.37 0.99-0.76 0.49-0.39 0.96-0.8 0.48-0.41 0.93-0.83 0.46-0.42 0.9-0.87z\"/>\n            <path class=\"s0\" d=\"m159.72 31.28q-0.56 0.13-1.11 0.22-0.56 0.1-1.12 0.15-0.56 0.06-1.13 0.08-0.57 0.02-1.14 0.01 0.16 0.35 0.33 0.71 0.17 0.35 0.36 0.7 0.17 0.34 0.38 0.68 0.19 0.33 0.4 0.66 0.59-0.04 1.19-0.11 0.58-0.07 1.17-0.16 0.59-0.09 1.16-0.21 0.58-0.12 1.16-0.26-0.23-0.29-0.46-0.59-0.22-0.3-0.43-0.61-0.2-0.3-0.39-0.62-0.2-0.32-0.37-0.65z\"/>\n            <path class=\"s0\" d=\"m174.36 26.13q2.02 0.85 3.93 1.56 0.04 0.02 0.09 0.02 0.04 0.01 0.08 0.01 0.05 0 0.09-0.01 0.04 0 0.08-0.02c9.63-5.11 16.02-11.03 14.65-13.9-0.57-1.21-2.42-1.73-5.14-1.62q-0.05 0-0.09 0.03-0.04 0.04-0.04 0.1 0 0.06 0.04 0.1 0.04 0.04 0.09 0.04 0.21 0.01 0.42 0.08 0.2 0.06 0.38 0.18 0.18 0.11 0.33 0.26 0.15 0.15 0.25 0.34c1.05 2.24-5.67 7.56-15.16 12.15q-0.05 0.03-0.08 0.06-0.04 0.04-0.07 0.08-0.03 0.05-0.05 0.1 0 0.05 0 0.1 0 0.05 0.01 0.1 0.02 0.05 0.05 0.1 0.03 0.04 0.06 0.08 0.04 0.03 0.08 0.06z\"/>\n            <path class=\"s0\" d=\"m168.92 30.58c-1.02-0.47-2.04-0.93-3.03-1.46q-0.04-0.02-0.08-0.04-0.03 0-0.07 0-0.04 0-0.07 0-0.04 0.02-0.08 0.04c-6.62 2.3-11.72 2.88-12.49 1.15q-0.07-0.21-0.1-0.42-0.02-0.21 0.01-0.42 0.03-0.21 0.12-0.4 0.08-0.21 0.22-0.37 0.03-0.05 0.02-0.11-0.01-0.06-0.07-0.09-0.05-0.03-0.1-0.02-0.07 0.01-0.1 0.06c-1.83 1.99-2.62 3.75-2.06 4.97 1.27 2.76 9.18 1.92 18.75-1.77q0.08-0.02 0.13-0.08 0.05-0.05 0.09-0.12 0.03-0.06 0.02-0.15 0-0.07-0.02-0.14-0.02-0.03-0.05-0.07-0.01-0.03-0.04-0.05-0.03-0.03-0.05-0.05-0.03-0.02-0.08-0.03-0.1-0.06-0.21-0.12-0.11-0.05-0.22-0.11-0.11-0.06-0.22-0.11-0.11-0.05-0.22-0.09 0 0 0 0z\"/>\n            <path class=\"s0\" d=\"m157.96 22.26q0.03-0.38 0.09-0.77 0.04-0.4 0.12-0.78 0.07-0.39 0.16-0.78 0.09-0.38 0.19-0.76-0.46-0.34-0.9-0.71-0.43-0.36-0.85-0.76-0.42-0.39-0.81-0.81-0.4-0.42-0.76-0.86-0.15 0.37-0.3 0.75-0.15 0.38-0.28 0.77-0.13 0.39-0.24 0.77-0.12 0.39-0.22 0.78 0.45 0.43 0.9 0.84 0.46 0.41 0.93 0.8 0.47 0.4 0.96 0.77 0.49 0.37 0.98 0.73h0.01z\"/>\n            <path class=\"s0\" d=\"m158.86 18.13q0.73-2.08 2.05-3.84 1.32-1.76 3.12-3.04 1.8-1.26 3.91-1.93c1.38-0.43 2.84-0.64 4.3-0.64q2.18 0 4.28 0.64 2.09 0.66 3.88 1.91 1.79 1.25 3.13 2.98 1.34 1.73 2.09 3.78 0.46-0.34 0.89-0.72 0.44-0.37 0.84-0.79 0.4-0.42 0.76-0.86 0.37-0.45 0.7-0.92-1.17-2.26-2.91-4.12-1.75-1.85-3.93-3.15-2.18-1.31-4.64-1.96-2.46-0.65-5-0.61-2.58-0.03-5.08 0.65-2.49 0.68-4.7 2.01-2.21 1.34-3.96 3.24-1.75 1.9-2.91 4.21 0.34 0.45 0.7 0.87 0.38 0.42 0.77 0.82 0.41 0.4 0.83 0.77 0.43 0.37 0.88 0.7z\"/>\n            <g>\n              <path class=\"s0\" d=\"m4 6.27h13.44c3.67 0 6.76 0.59 9.2 2.21q0.92 0.59 1.66 1.39 0.75 0.8 1.26 1.76 0.51 0.96 0.76 2.02 0.25 1.07 0.23 2.15 0.04 1.13-0.26 2.21-0.3 1.08-0.92 2.02-0.62 0.94-1.48 1.64-0.88 0.71-1.93 1.11v0.09q1.3 0.37 2.4 1.13 1.12 0.77 1.91 1.86 0.79 1.09 1.18 2.38 0.39 1.29 0.34 2.64 0.03 1.12-0.21 2.23-0.26 1.1-0.77 2.11-0.51 1.01-1.25 1.86-0.75 0.85-1.67 1.5c-2.47 1.73-5.83 2.55-9.74 2.55h-14.15zm13.1 13.96c2.42 0 3.76-1.11 3.76-3.13q0.01-0.34-0.04-0.65-0.07-0.33-0.21-0.63-0.13-0.29-0.35-0.54-0.21-0.25-0.47-0.45-0.37-0.21-0.77-0.37-0.39-0.16-0.81-0.26-0.41-0.1-0.84-0.13-0.43-0.04-0.85-0.01h-2.69v6.17zm3.79 12.3q0.28-0.22 0.49-0.49 0.22-0.28 0.36-0.59 0.14-0.32 0.21-0.66 0.07-0.34 0.05-0.68c0-2.12-1.44-3.32-3.99-3.32h-4.21v6.55h3.48c1.78 0 2.85-0.25 3.61-0.81z\"/>\n              <path class=\"s0\" d=\"m34.19 23.72c0-10.17 7.99-18 18.64-18 10.63 0 18.64 7.8 18.64 17.97 0 10.17-7.96 17.96-18.64 17.96-10.69 0-18.64-7.79-18.64-17.96zm27.36 0c0-5.2-3.53-9.19-8.72-9.19-5.2 0-8.73 3.99-8.73 9.19 0 5.2 3.53 9.2 8.73 9.2 5.19 0 8.72-4 8.72-9.2z\"/>\n              <path class=\"s0\" d=\"m74.58 23.72c0-10.18 8-17.97 18.64-17.97 10.65 0 18.65 7.79 18.65 17.97 0 10.16-7.95 17.96-18.65 17.96-10.68 0-18.64-7.8-18.64-17.96zm27.37 0c0-5.2-3.53-9.21-8.72-9.21-5.2 0-8.72 4.01-8.72 9.21 0 5.19 3.52 9.19 8.71 9.19 5.2 0 8.73-4 8.73-9.19z\"/>\n              <path class=\"s0\" d=\"m123.84 14.65h-11.09v-8.38h32.08v8.38h-11.07v26.51h-9.92z\"/>\n            </g>\n            <path class=\"s0\" d=\"m212.95 22.04h14.51v17.02q-1.4 0.65-2.85 1.14-1.46 0.49-2.96 0.83-1.51 0.34-3.04 0.5-1.54 0.17-3.08 0.17c-11.88 0-19.68-7.52-19.68-17.68 0-10.14 8.14-18.04 19.5-18.04q1.42-0.01 2.84 0.15 1.41 0.16 2.8 0.49 1.39 0.32 2.72 0.81 1.34 0.48 2.61 1.12v9.4q-1.17-0.74-2.44-1.32-1.27-0.58-2.61-1-1.33-0.41-2.71-0.65-1.37-0.23-2.76-0.28c-6.28 0-10.05 4.02-10.05 9.28 0 5.27 3.68 9.34 9.87 9.34q0.32 0 0.63-0.01 0.33-0.02 0.64-0.06 0.32-0.03 0.64-0.1 0.31-0.05 0.62-0.13v-3.64h-5.17v-7.32z\"/>\n          </g>\n        </svg>\n      </div>\n\n      <div class=\"cp-left-hero\">\n        <div class=\"cp-left-badge\">For Insurance Agencies &amp; Agents</div>\n        <h1>Claim Your InspectorMatch Account</h1>\n        <p>Your agency account is ready and waiting. Complete the form to activate your access to inspection services, field support, and training resources.</p>\n      </div>\n\n      <ul class=\"cp-benefits\">\n        <li>\n          <span class=\"cp-benefit-icon\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z\"/></svg>\n          </span>\n          <span>Instant access to the inspection services marketplace</span>\n        </li>\n        <li>\n          <span class=\"cp-benefit-icon\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\"/></svg>\n          </span>\n          <span>Connect with certified field professionals nationwide</span>\n        </li>\n        <li>\n          <span class=\"cp-benefit-icon\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z\"/></svg>\n          </span>\n          <span>Manage your team and track performance from one dashboard</span>\n        </li>\n        <li>\n          <span class=\"cp-benefit-icon\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"/></svg>\n          </span>\n          <span>Backed by BOOTOG Technologies with 24/7 support</span>\n        </li>\n      </ul>\n\n      <p class=\"cp-left-footnote\">Already have access? <a href=\"#\">Sign in to InspectorMatch</a></p>\n    </div>\n  </aside>\n\n  <!-- Right Panel \u2014 Form -->\n  <main class=\"cp-right\">\n    <div class=\"cp-form-wrap\">\n\n      <div class=\"cp-form-header\">\n        <h2>Complete Your Profile</h2>\n        <p>Your account details have been loaded. Set your password and role to activate.</p>\n        <!-- Email display (read-only) -->\n        <div class=\"cp-email-display\" *ngIf=\"userEmail\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\"/></svg>\n          <span>{{ userEmail }}</span>\n        </div>\n        <div class=\"cp-loading-hint\" *ngIf=\"isLoadingUser\">\n          <span class=\"cp-spinner\"></span> Loading account details\u2026\n        </div>\n        <div class=\"cp-error\" *ngIf=\"userLookupError\">{{ userLookupError }}</div>\n\n        <!-- Account not found in Auth0 -->\n        <div class=\"cp-account-not-found\" *ngIf=\"accountNotFound\">\n          <div class=\"cp-anf-icon\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\n          </div>\n          <div>\n            <p class=\"cp-anf-title\">Account Not Found</p>\n            <p class=\"cp-anf-sub\">No account is linked to <strong>{{ userEmail }}</strong>. Please contact support or use the link from your invitation email.</p>\n          </div>\n        </div>\n      </div>\n\n      <form [formGroup]=\"claimForm\" (ngSubmit)=\"onSubmit()\" novalidate *ngIf=\"!accountNotFound\">\n\n        <!-- \u2500\u2500\u2500 Contact Information \u2500\u2500\u2500 -->\n        <div class=\"cp-section-title\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\"/></svg>\n          Contact Information\n        </div>\n\n        <div class=\"cp-row\">\n          <div class=\"cp-field\">\n            <label for=\"firstName\">First Name<span class=\"req\">*</span></label>\n            <input type=\"text\" id=\"firstName\" formControlName=\"firstName\"\n              placeholder=\"Jane\"\n              [class.is-invalid]=\"f['firstName'].invalid && f['firstName'].touched\"\n              autocomplete=\"given-name\" />\n            <div class=\"cp-error\" *ngIf=\"f['firstName'].invalid && f['firstName'].touched\">First name is 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\"\n              placeholder=\"Doe\"\n              [class.is-invalid]=\"f['lastName'].invalid && f['lastName'].touched\"\n              autocomplete=\"family-name\" />\n            <div class=\"cp-error\" *ngIf=\"f['lastName'].invalid && f['lastName'].touched\">Last name is required</div>\n          </div>\n        </div>\n\n        <div class=\"cp-field\">\n          <label for=\"phone\">Phone<span class=\"req\">*</span></label>\n          <input type=\"tel\" id=\"phone\" formControlName=\"phone\"\n            placeholder=\"(555) 123-4567\" maxlength=\"14\"\n            [class.is-invalid]=\"f['phone'].invalid && f['phone'].touched\"\n            (input)=\"formatPhone($event)\" autocomplete=\"tel\" />\n          <div class=\"cp-error\" *ngIf=\"f['phone'].invalid && f['phone'].touched\">Phone number is required</div>\n        </div>\n\n        <!-- \u2500\u2500\u2500 Address \u2500\u2500\u2500 -->\n        <div class=\"cp-section-title\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 14.5 9 2.5 2.5 0 0 1 12 11.5Z\"/></svg>\n          Address\n        </div>\n\n        <div class=\"cp-field\">\n          <label for=\"address\">Street Address</label>\n          <input type=\"text\" id=\"address\" formControlName=\"address\"\n            placeholder=\"123 Main Street\"\n            ngx-google-places-autocomplete [options]=\"googleOptions\"\n            (onAddressChange)=\"onAddressChange($event)\"\n            autocomplete=\"off\" />\n        </div>\n\n        <div class=\"cp-row cp-row-triple\">\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 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=\"zip\">Zip Code</label>\n            <input type=\"text\" id=\"zip\" formControlName=\"zip\" placeholder=\"32801\" inputmode=\"numeric\" maxlength=\"5\" />\n          </div>\n        </div>\n\n        <!-- \u2500\u2500\u2500 Account Setup \u2500\u2500\u2500 -->\n        <div class=\"cp-section-title\">\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          Account Setup\n        </div>\n\n        <!-- Role -->\n        <div class=\"cp-field\">\n          <label for=\"role\">Role<span class=\"req\">*</span></label>\n          <div class=\"cp-select\">\n            <select id=\"role\" formControlName=\"role\"\n              [class.is-invalid]=\"f['role'].invalid && f['role'].touched\">\n              <option value=\"\" disabled>Select your role</option>\n              <option *ngFor=\"let r of roles\" [value]=\"r.id\">{{ r.name }}</option>\n            </select>\n          </div>\n          <div class=\"cp-error\" *ngIf=\"f['role'].invalid && f['role'].touched\">Please select a role</div>\n        </div>\n\n        <!-- Password -->\n        <div class=\"cp-row\">\n          <div class=\"cp-field\">\n            <label for=\"password\">Password<span class=\"req\">*</span></label>\n            <div class=\"cp-pw-wrap\">\n              <input [type]=\"showPassword ? 'text' : 'password'\" id=\"password\" formControlName=\"password\"\n                placeholder=\"Min. 8 characters\"\n                [class.is-invalid]=\"f['password'].invalid && f['password'].touched\"\n                autocomplete=\"new-password\" />\n              <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showPassword = !showPassword\"\n                [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\">\n                <svg *ngIf=\"!showPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>\n                <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"/></svg>\n              </button>\n            </div>\n            <div class=\"cp-error\" *ngIf=\"f['password'].invalid && f['password'].touched\">\n              <span *ngIf=\"f['password'].errors?.['required']\">Password is required</span>\n              <span *ngIf=\"f['password'].errors?.['minlength']\">Password must be at least 8 characters</span>\n            </div>\n          </div>\n\n          <div class=\"cp-field\">\n            <label for=\"confirmPassword\">Confirm Password<span class=\"req\">*</span></label>\n            <div class=\"cp-pw-wrap\">\n              <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPassword\" formControlName=\"confirmPassword\"\n                placeholder=\"Repeat password\"\n                [class.is-invalid]=\"(f['confirmPassword'].invalid && f['confirmPassword'].touched) || (claimForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched)\"\n                autocomplete=\"new-password\" />\n              <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showConfirmPassword = !showConfirmPassword\"\n                [attr.aria-label]=\"showConfirmPassword ? 'Hide password' : 'Show password'\">\n                <svg *ngIf=\"!showConfirmPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>\n                <svg *ngIf=\"showConfirmPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"/></svg>\n              </button>\n            </div>\n            <div class=\"cp-error\" *ngIf=\"f['confirmPassword'].invalid && f['confirmPassword'].touched\">Confirm password is required</div>\n            <div class=\"cp-error\" *ngIf=\"claimForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched\">Passwords do not match</div>\n          </div>\n        </div>\n\n        <!-- \u2500\u2500\u2500 Terms & Privacy \u2500\u2500\u2500 -->\n        <div class=\"cp-agreements\">\n\n          <!-- Terms card -->\n          <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.acceptTerms\"\n            [class.v1-card--invalid]=\"!model.acceptTerms && validatePage === 1\">\n            <div class=\"v1-card-icon\">\n              <svg width=\"20\" height=\"20\" 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            <div class=\"v1-card-body\">\n              <p class=\"v1-card-title\">Terms and Conditions</p>\n              <p class=\"v1-card-sub\">Click to read and accept</p>\n            </div>\n            <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.acceptTerms\"\n              (click)=\"openModal(termsAndConditionsModel, 'Terms and Conditions', $event)\">\n              <svg *ngIf=\"model.acceptTerms\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\n                stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n              {{ model.acceptTerms ? 'Agreed' : 'Read &amp; Agree' }}\n            </button>\n          </div>\n\n          <!-- Privacy card -->\n          <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.privacy\"\n            [class.v1-card--invalid]=\"!model.privacy && validatePage === 1\">\n            <div class=\"v1-card-icon\">\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>\n              </svg>\n            </div>\n            <div class=\"v1-card-body\">\n              <p class=\"v1-card-title\">Privacy Statement</p>\n              <p class=\"v1-card-sub\">Click to read and accept</p>\n            </div>\n            <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.privacy\"\n              (click)=\"openModal(termsAndConditionsModel, 'Privacy Statement', $event)\">\n              <svg *ngIf=\"model.privacy\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\n                stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n              {{ model.privacy ? 'Agreed' : 'Read &amp; Agree' }}\n            </button>\n          </div>\n\n        </div>\n        <div class=\"cp-error cp-terms-error\"\n          *ngIf=\"(!model.acceptTerms || !model.privacy) && validatePage === 1\">\n          You must agree to both Terms and Conditions and Privacy Statement to continue\n        </div>\n\n        <!-- \u2500\u2500\u2500 Submit \u2500\u2500\u2500 -->\n        <div class=\"cp-error cp-submit-error\" *ngIf=\"submitError\">{{ submitError }}</div>\n\n        <button type=\"submit\" class=\"cp-btn\" [disabled]=\"isSubmitting\">\n          <span *ngIf=\"isSubmitting\" class=\"cp-spinner cp-spinner-btn\"></span>\n          <span>{{ isSubmitting ? 'Activating\u2026' : 'Claim My Account' }}</span>\n        </button>\n\n      </form>\n    </div>\n  </main>\n\n</div>\n\n<!-- \u2500\u2500\u2500 Terms & Privacy Modal (read-only) \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\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\n      <div class=\"tc-modal-body\">\n        <ng-container *ngIf=\"termsAndConditionTitle === 'Terms and Conditions'\">\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\n          </app-terms-conditions>\n        </ng-container>\n        <ng-container *ngIf=\"termsAndConditionTitle !== 'Terms and Conditions'\">\n          <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\n          </app-privacy-policy>\n        </ng-container>\n      </div>\n\n      <div class=\"tc-modal-footer\">\n        <button type=\"button\" class=\"tc-btn tc-btn-close\" (click)=\"closeModal()\">\n          Close\n        </button>\n      </div>\n\n    </div>\n  </div>\n</ng-template>\n", styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.cp-page{display:flex;min-height:100vh;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0c1620}.cp-left{width:42%;min-width:320px;background:#0c1620;display:flex;flex-direction:column;padding:48px 44px;position:sticky;top:0;height:100vh;overflow-y:auto}@media (max-width: 860px){.cp-left{display:none}}.cp-left-inner{display:flex;flex-direction:column;height:100%}.cp-logo{margin-bottom:40px}.cp-logo svg path{fill:#fff}.cp-left-hero{margin-bottom:36px}.cp-left-hero h1{font-size:26px;font-weight:800;color:#fff;line-height:1.25;margin-bottom:12px}.cp-left-hero p{font-size:14px;color:#9fb3c2;line-height:1.7}.cp-left-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#4077ad;margin-bottom:14px}.cp-benefits{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;gap:18px}.cp-benefits li{display:flex;align-items:flex-start;gap:12px;font-size:13px;color:#9fb3c2;line-height:1.55}.cp-benefit-icon{flex-shrink:0;width:32px;height:32px;background:#4077ad26;border-radius:50%;display:flex;align-items:center;justify-content:center}.cp-benefit-icon svg{width:16px;height:16px}.cp-benefit-icon svg path{fill:#4077ad}.cp-left-footnote{margin-top:32px;font-size:13px;color:#5e7385}.cp-left-footnote a{color:#9fb3c2;text-decoration:none}.cp-left-footnote a:hover{color:#4077ad}.cp-right{flex:1;background:#eef1f4;display:flex;align-items:flex-start;justify-content:center;padding:48px 24px 64px;overflow-y:auto}.cp-form-wrap{width:100%;max-width:560px;background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201f;padding:40px 44px 48px}@media (max-width: 600px){.cp-form-wrap{padding:28px 20px 36px}}.cp-form-header{margin-bottom:30px}.cp-form-header h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:6px}.cp-form-header p{font-size:13px;color:#6b7c8a;line-height:1.6}.cp-section-title{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#0c1620;padding-bottom:10px;margin-bottom:18px;margin-top:26px;border-bottom:2px solid #4077AD;display:flex;align-items:center;gap:8px}.cp-section-title svg{width:14px;height:14px;flex-shrink:0}.cp-section-title svg path{fill:#4077ad}.cp-section-title:first-of-type{margin-top:0}.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.cp-row.cp-row-triple{grid-template-columns:2fr 1fr 1fr}@media (max-width: 520px){.cp-row,.cp-row.cp-row-triple{grid-template-columns:1fr}}.cp-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width:0}.cp-field.cp-field-with-btn{margin-bottom: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-input-row{display:flex;gap:8px}.cp-input-row input{flex:1}.cp-lookup-btn{flex-shrink:0;height:42px;padding:0 18px;background:#4077ad;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s;font-family:inherit}.cp-lookup-btn:hover:not(:disabled){background:#335f8a}.cp-lookup-btn:disabled{opacity:.6;cursor:not-allowed}.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-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-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-account-not-found{display:flex;align-items:flex-start;gap:12px;margin-top:16px;padding:14px 16px;background:#fff5f5;border:1.5px solid #fecaca;border-radius:6px}.cp-anf-icon{flex-shrink:0;width:32px;height:32px;background:#dc35451a;border-radius:50%;display:flex;align-items:center;justify-content:center}.cp-anf-icon svg{width:16px;height:16px}.cp-anf-icon svg path{fill:#dc3545}.cp-anf-title{font-size:13px;font-weight:700;color:#b91c1c;margin:0 0 3px}.cp-anf-sub{font-size:12px;color:#dc3545;margin:0;line-height:1.5}.cp-anf-sub strong{font-weight:600}.cp-invalid-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{background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-invalid-card h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-invalid-card p{font-size:14px;color:#6b7c8a;line-height:1.7}.cp-invalid-icon{width:64px;height:64px;background:#dc35451a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-invalid-icon svg{width:32px;height:32px}.cp-invalid-icon svg path{fill:#dc3545}.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-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-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;margin-top:22px;background:#4077ad;border:none;border-radius:6px;font-size:14px;font-weight:700;letter-spacing:.4px;color:#fff;cursor:pointer;text-decoration:none;transition:background .15s,transform .1s;font-family:inherit}.cp-btn:hover:not(:disabled){background:#335f8a}.cp-btn:active:not(:disabled){transform:scale(.99)}.cp-btn:disabled{opacity:.65;cursor:not-allowed}.cp-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:cp-spin .7s linear infinite}.cp-spinner:not(.cp-spinner-btn){border-color:#4077ad4d;border-top-color:#4077ad}@keyframes cp-spin{to{transform:rotate(360deg)}}.cp-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-success-card{background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-success-card h2{font-size:24px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-success-card p{font-size:14px;color:#6b7c8a;line-height:1.7;margin-bottom:28px}.cp-success-icon{width:64px;height:64px;background:#28a7451a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-success-icon svg{width:32px;height:32px}.cp-success-icon svg path{fill:#28a745}\n"] }]
+            args: [{ selector: 'app-claim-process', standalone: false, template: "<h2 class=\"sr-only\">Claim Your Account</h2>\r\n\r\n<!-- \u2500\u2500\u2500 No Email Error \u2500\u2500\u2500 -->\r\n<div *ngIf=\"noEmailError\" class=\"cp-invalid-page\">\r\n  <div class=\"cp-invalid-card\">\r\n    <div class=\"cp-invalid-icon\">\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\r\n    </div>\r\n    <h2>Invalid Access Link</h2>\r\n    <p>This page requires a valid invitation link. Please use the link from your invitation email to claim your account.</p>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Success State \u2500\u2500\u2500 -->\r\n<div *ngIf=\"submitSuccess\" class=\"cp-success-page\">\r\n  <div class=\"cp-success-card\">\r\n    <div class=\"cp-success-icon\">\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n    </div>\r\n    <h2>Account Claimed!</h2>\r\n    <p>Your account has been successfully activated. You can now sign in and start using the platform.</p>\r\n    <a [href]=\"libConfig?.dashboardUrl || '#'\" class=\"cp-btn\">Go to Dashboard</a>\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Main Layout \u2500\u2500\u2500 -->\r\n<div *ngIf=\"!noEmailError && !submitSuccess\" class=\"cp-page\">\r\n\r\n  <!-- Left Panel -->\r\n  <aside class=\"cp-left\">\r\n    <div class=\"cp-left-inner\">\r\n\r\n      <!-- Dynamic logo from privacyAndTerms -->\r\n      <div class=\"cp-logo\">\r\n        <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\"\r\n          [alt]=\"privacyAndTerms?.companyName || 'Company Logo'\" class=\"cp-logo-img\" />\r\n        <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-logo-fallback\">\r\n          {{ privacyAndTerms?.companyName }}\r\n        </span>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Scenario: Account Found (authenticated) \u2500\u2500 -->\r\n      <ng-container *ngIf=\"isAuthenticated\">\r\n        <div class=\"cp-left-hero\">\r\n          <div class=\"cp-left-badge cp-left-badge--found\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n            Account Verified\r\n          </div>\r\n          <h1>Welcome back, <span class=\"cp-hero-brand\">{{ existingUserData?.firstName || privacyAndTerms?.companyName }}</span></h1>\r\n          <p>Your identity has been verified. Your profile and account history are intact \u2014 click to jump straight into your dashboard.</p>\r\n        </div>\r\n        <ul class=\"cp-benefits\">\r\n          <li>\r\n            <span class=\"cp-benefit-icon cp-benefit-icon--green\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Profile Preserved</strong>\r\n              <span>Your settings, history, and connections are all intact and ready to use.</span>\r\n            </div>\r\n          </li>\r\n          <li>\r\n            <span class=\"cp-benefit-icon cp-benefit-icon--green\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Verified &amp; Secure</strong>\r\n              <span>Your account was verified through a secure multi-step process.</span>\r\n            </div>\r\n          </li>\r\n          <li>\r\n            <span class=\"cp-benefit-icon cp-benefit-icon--green\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Instant Dashboard Access</strong>\r\n              <span>One click and you're back on the platform, exactly where you left off.</span>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n      </ng-container>\r\n\r\n      <!-- \u2500\u2500 Scenario: Activation (new user / claim flow) \u2500\u2500 -->\r\n      <ng-container *ngIf=\"!isAuthenticated\">\r\n        <div class=\"cp-left-hero\">\r\n          <div class=\"cp-left-badge\">Account Activation</div>\r\n          <h1>Welcome to <span class=\"cp-hero-brand\">{{ privacyAndTerms?.companyName }}</span></h1>\r\n          <p>Your account is ready. Complete this short form to set your credentials and gain full access to the platform's tools, programs, and services.</p>\r\n        </div>\r\n        <ul class=\"cp-benefits\">\r\n          <li>\r\n            <span class=\"cp-benefit-icon\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Secure &amp; Encrypted</strong>\r\n              <span>Your information is protected end-to-end and handled per our Privacy Policy.</span>\r\n            </div>\r\n          </li>\r\n          <li>\r\n            <span class=\"cp-benefit-icon\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Instant Access</strong>\r\n              <span>Once activated, get immediate access to programs, rosters, and service requests.</span>\r\n            </div>\r\n          </li>\r\n          <li>\r\n            <span class=\"cp-benefit-icon\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Team &amp; Client Network</strong>\r\n              <span>Connect with certified professionals nationwide and manage your team from one dashboard.</span>\r\n            </div>\r\n          </li>\r\n          <li>\r\n            <span class=\"cp-benefit-icon\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z\"/></svg>\r\n            </span>\r\n            <div class=\"cp-benefit-text\">\r\n              <strong>Complete Your Profile</strong>\r\n              <span>A complete profile unlocks all features and makes you visible to clients and partners.</span>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n      </ng-container>\r\n\r\n      <!-- Dynamic contact info -->\r\n      <div class=\"cp-left-contact\" *ngIf=\"privacyAndTerms?.contactEmail || privacyAndTerms?.phone\">\r\n        <a *ngIf=\"privacyAndTerms?.contactEmail\"\r\n          [href]=\"'mailto:' + privacyAndTerms.contactEmail\" class=\"cp-contact-link\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\"/></svg>\r\n          {{ privacyAndTerms?.contactEmail }}\r\n        </a>\r\n        <a *ngIf=\"privacyAndTerms?.phone\"\r\n          [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-contact-link\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\"/></svg>\r\n          {{ privacyAndTerms?.phone }}\r\n        </a>\r\n      </div>\r\n\r\n      <!-- Dynamic website link -->\r\n      <p class=\"cp-left-footnote\">\r\n        <a [href]=\"privacyAndTerms?.websiteurl || '#'\" target=\"_blank\" rel=\"noopener\">\r\n          Visit {{ privacyAndTerms?.companyName }}\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\"/></svg>\r\n        </a>\r\n      </p>\r\n\r\n    </div>\r\n  </aside>\r\n\r\n  <!-- Right Panel \u2014 Form -->\r\n  <main class=\"cp-right\">\r\n\r\n    <!-- Mobile-only top bar (hidden on desktop where left panel is visible) -->\r\n    <div class=\"cp-mobile-bar\">\r\n      <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\"\r\n        [alt]=\"privacyAndTerms?.companyName\" class=\"cp-mobile-logo\" />\r\n      <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-mobile-company\">\r\n        {{ privacyAndTerms?.companyName }}\r\n      </span>\r\n    </div>\r\n\r\n    <!-- \u2500\u2500 Account Found Preview (authenticated users) \u2500\u2500 -->\r\n    <div *ngIf=\"isAuthenticated\" class=\"cf-wrap\">\r\n      <div class=\"cf-badge\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\r\n        Account Found\r\n      </div>\r\n      <h2 class=\"cf-heading\">Welcome back!</h2>\r\n      <p class=\"cf-sub\">We found your account. Here's a summary of your profile before you continue.</p>\r\n\r\n      <div class=\"cf-card\">\r\n        <div class=\"cf-avatar\">{{ getInitials() }}</div>\r\n        <div class=\"cf-info-grid\">\r\n          <div class=\"cf-info-row\">\r\n            <span class=\"cf-info-label\">Full Name</span>\r\n            <span class=\"cf-info-value\">{{ existingUserData?.firstName }} {{ existingUserData?.lastName }}</span>\r\n          </div>\r\n          <div class=\"cf-info-row\">\r\n            <span class=\"cf-info-label\">Email</span>\r\n            <span class=\"cf-info-value\">{{ userEmail }}</span>\r\n          </div>\r\n          <div class=\"cf-info-row\" *ngIf=\"existingUserData?.phone\">\r\n            <span class=\"cf-info-label\">Phone</span>\r\n            <span class=\"cf-info-value\">{{ existingUserData.phone }}</span>\r\n          </div>\r\n          <div class=\"cf-info-row\" *ngIf=\"existingUserData?.userRoles?.length\">\r\n            <span class=\"cf-info-label\">Role</span>\r\n            <span class=\"cf-info-value\">\r\n              <span class=\"cf-role-badge\">{{ existingUserData.userRoles[0]?.roleName }}</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"cf-info-row\" *ngIf=\"existingUserData?.city || existingUserData?.state\">\r\n            <span class=\"cf-info-label\">Location</span>\r\n            <span class=\"cf-info-value\">\r\n              {{ existingUserData?.city }}{{ existingUserData?.city && existingUserData?.state ? ', ' : '' }}{{ existingUserData?.state }}\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <a [href]=\"libConfig?.dashboardUrl || '#'\" class=\"cf-access-btn\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M10 6v2H5v11h11v-5h2v7H3V6h7zm11-3v8l-3.36-3.36-5.3 5.31-1.41-1.42 5.3-5.3L13 3h8z\"/></svg>\r\n        Click to Access Your Account\r\n      </a>\r\n\r\n      <p class=\"cf-not-you\">\r\n        Not you or wrong account?\r\n        <a *ngIf=\"privacyAndTerms?.contactEmail\" [href]=\"'mailto:' + privacyAndTerms.contactEmail\">Contact support</a>\r\n        <span *ngIf=\"!privacyAndTerms?.contactEmail\">Contact your administrator.</span>\r\n      </p>\r\n    </div>\r\n\r\n    <!-- \u2500\u2500 Claim / Activation Form \u2500\u2500 -->\r\n    <div *ngIf=\"!isAuthenticated\" class=\"cp-form-wrap\">\r\n\r\n      <div class=\"cp-form-header\">\r\n        <h2>Activate Your Account</h2>\r\n        <p>Your {{ privacyAndTerms?.companyName }} account is ready. Set your details below to complete activation.</p>\r\n        <!-- Email display (read-only) -->\r\n        <div class=\"cp-email-display\" *ngIf=\"userEmail\">\r\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\"/></svg>\r\n          <span>{{ userEmail }}</span>\r\n        </div>\r\n        <div class=\"cp-loading-hint\" *ngIf=\"isLoadingUser\">\r\n          <span class=\"cp-spinner\"></span> Loading account details\u2026\r\n        </div>\r\n        <div class=\"cp-error\" *ngIf=\"userLookupError\">{{ userLookupError }}</div>\r\n\r\n        <!-- Account not found in Auth0 -->\r\n        <div class=\"cp-account-not-found\" *ngIf=\"accountNotFound\">\r\n          <div class=\"cp-anf-icon\">\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\r\n          </div>\r\n          <div>\r\n            <p class=\"cp-anf-title\">Account Not Found</p>\r\n            <p class=\"cp-anf-sub\">No account is linked to <strong>{{ userEmail }}</strong>. Please contact support or use the link from your invitation email.</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <form [formGroup]=\"claimForm\" (ngSubmit)=\"onSubmit()\" novalidate *ngIf=\"!accountNotFound\">\r\n\r\n        <!-- \u2500\u2500\u2500 Contact Information \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\"/></svg>\r\n          Contact Information\r\n        </div>\r\n\r\n        <!-- Email \u2014 auto-filled, read-only -->\r\n        <div class=\"cp-field\">\r\n          <label for=\"cpEmail\">Email Address</label>\r\n          <div class=\"cp-readonly-wrap\">\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\"/></svg>\r\n            <input type=\"email\" id=\"cpEmail\" formControlName=\"email\" readonly\r\n              class=\"cp-input-readonly\" autocomplete=\"email\" />\r\n          </div>\r\n          <small class=\"cp-autofill-note\">Auto-filled from your invitation</small>\r\n        </div>\r\n\r\n        <div class=\"cp-row\">\r\n          <div class=\"cp-field\">\r\n            <label for=\"firstName\">First Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" id=\"firstName\" formControlName=\"firstName\"\r\n              placeholder=\"Jane\"\r\n              [class.is-invalid]=\"f['firstName'].invalid && f['firstName'].touched\"\r\n              autocomplete=\"given-name\" />\r\n            <div class=\"cp-error\" *ngIf=\"f['firstName'].invalid && f['firstName'].touched\">First name is required</div>\r\n          </div>\r\n          <div class=\"cp-field\">\r\n            <label for=\"lastName\">Last Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" id=\"lastName\" formControlName=\"lastName\"\r\n              placeholder=\"Doe\"\r\n              [class.is-invalid]=\"f['lastName'].invalid && f['lastName'].touched\"\r\n              autocomplete=\"family-name\" />\r\n            <div class=\"cp-error\" *ngIf=\"f['lastName'].invalid && f['lastName'].touched\">Last name is required</div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"cp-field\">\r\n          <label for=\"phone\">Phone<span class=\"req\">*</span></label>\r\n          <input type=\"tel\" id=\"phone\" formControlName=\"phone\"\r\n            placeholder=\"(555) 123-4567\" maxlength=\"14\"\r\n            [class.is-invalid]=\"f['phone'].invalid && f['phone'].touched\"\r\n            (input)=\"formatPhone($event)\" autocomplete=\"tel\" />\r\n          <div class=\"cp-error\" *ngIf=\"f['phone'].invalid && f['phone'].touched\">Phone number is required</div>\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Address \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 14.5 9 2.5 2.5 0 0 1 12 11.5Z\"/></svg>\r\n          Address\r\n        </div>\r\n\r\n        <div class=\"cp-field\">\r\n          <label for=\"address\">Street Address</label>\r\n          <input type=\"text\" id=\"address\" formControlName=\"address\"\r\n            placeholder=\"123 Main Street\"\r\n            ngx-google-places-autocomplete [options]=\"googleOptions\"\r\n            (onAddressChange)=\"onAddressChange($event)\"\r\n            autocomplete=\"off\" />\r\n        </div>\r\n\r\n        <div class=\"cp-row cp-row-triple\">\r\n          <div class=\"cp-field\">\r\n            <label for=\"city\">City</label>\r\n            <input type=\"text\" id=\"city\" formControlName=\"city\" placeholder=\"Orlando\" />\r\n          </div>\r\n          <div class=\"cp-field\">\r\n            <label for=\"state\">State</label>\r\n            <input type=\"text\" id=\"state\" formControlName=\"state\" placeholder=\"FL\" maxlength=\"2\" />\r\n          </div>\r\n          <div class=\"cp-field\">\r\n            <label for=\"zip\">Zip Code</label>\r\n            <input type=\"text\" id=\"zip\" formControlName=\"zip\" placeholder=\"32801\" inputmode=\"numeric\" maxlength=\"5\" />\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Account Setup \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\"/></svg>\r\n          Account Setup\r\n        </div>\r\n\r\n        <!-- Role -->\r\n        <div class=\"cp-field\">\r\n          <label for=\"role\">Role<span class=\"req\">*</span></label>\r\n          <div class=\"cp-select\">\r\n            <select id=\"role\" formControlName=\"role\"\r\n              [class.is-invalid]=\"f['role'].invalid && f['role'].touched\">\r\n              <option value=\"\" disabled>Select your role</option>\r\n              <option *ngFor=\"let r of roles\" [value]=\"r.id\">{{ r.name }}</option>\r\n            </select>\r\n          </div>\r\n          <div class=\"cp-error\" *ngIf=\"f['role'].invalid && f['role'].touched\">Please select a role</div>\r\n        </div>\r\n\r\n        <!-- Password block \u2014 hidden while loading to avoid flash for existing users -->\r\n        <ng-container *ngIf=\"!isLoadingUser\">\r\n\r\n          <!-- Reset toggle: only shown for existing users who already have a password -->\r\n          <div class=\"cp-reset-toggle\" *ngIf=\"userHasExistingDetails\">\r\n            <label class=\"cp-toggle-label\">\r\n              <span class=\"cp-toggle-switch\">\r\n                <input type=\"checkbox\" [checked]=\"resetPasswordEnabled\" (change)=\"toggleResetPassword()\">\r\n                <span class=\"cp-toggle-knob\"></span>\r\n              </span>\r\n              Reset Password\r\n            </label>\r\n            <p class=\"cp-toggle-hint\">Your account already has a password set. Enable this to change it.</p>\r\n          </div>\r\n\r\n          <!-- New-user hint \u2014 shown only when no existing details (password is required) -->\r\n          <div class=\"cp-new-user-hint\" *ngIf=\"!userHasExistingDetails\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2z\"/></svg>\r\n            Create a password for your new account\r\n          </div>\r\n\r\n          <!-- Password fields -->\r\n          <div class=\"cp-row\" *ngIf=\"showPasswordFields\">\r\n          <div class=\"cp-field\">\r\n            <label for=\"password\">Password<span class=\"req\">*</span></label>\r\n            <div class=\"cp-pw-wrap\">\r\n              <input [type]=\"showPassword ? 'text' : 'password'\" id=\"password\" formControlName=\"password\"\r\n                placeholder=\"Min. 8 characters\"\r\n                [class.is-invalid]=\"f['password'].invalid && f['password'].touched\"\r\n                autocomplete=\"new-password\" />\r\n              <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showPassword = !showPassword\"\r\n                [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\">\r\n                <svg *ngIf=\"!showPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>\r\n                <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"/></svg>\r\n              </button>\r\n            </div>\r\n            <div class=\"cp-error\" *ngIf=\"f['password'].invalid && f['password'].touched\">\r\n              <span *ngIf=\"f['password'].errors?.['required']\">Password is required</span>\r\n              <span *ngIf=\"f['password'].errors?.['minlength']\">Password must be at least 8 characters</span>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"cp-field\">\r\n            <label for=\"confirmPassword\">Confirm Password<span class=\"req\">*</span></label>\r\n            <div class=\"cp-pw-wrap\">\r\n              <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPassword\" formControlName=\"confirmPassword\"\r\n                placeholder=\"Repeat password\"\r\n                [class.is-invalid]=\"(f['confirmPassword'].invalid && f['confirmPassword'].touched) || (claimForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched)\"\r\n                autocomplete=\"new-password\" />\r\n              <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showConfirmPassword = !showConfirmPassword\"\r\n                [attr.aria-label]=\"showConfirmPassword ? 'Hide password' : 'Show password'\">\r\n                <svg *ngIf=\"!showConfirmPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>\r\n                <svg *ngIf=\"showConfirmPassword\" viewBox=\"0 0 24 24\"><path d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"/></svg>\r\n              </button>\r\n            </div>\r\n            <div class=\"cp-error\" *ngIf=\"f['confirmPassword'].invalid && f['confirmPassword'].touched\">Confirm password is required</div>\r\n            <div class=\"cp-error\" *ngIf=\"claimForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched\">Passwords do not match</div>\r\n          </div>\r\n        </div>\r\n\r\n        </ng-container><!-- end password block -->\r\n\r\n        <!-- \u2500\u2500\u2500 Business Information \u2500\u2500\u2500 -->\r\n        <ng-container *ngIf=\"isBusinessRole\">\r\n          <div class=\"cp-section-title\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z\"/></svg>\r\n            Business Information\r\n          </div>\r\n\r\n          <div class=\"cp-row\">\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessName\">Business Name<span class=\"req\">*</span></label>\r\n              <input type=\"text\" id=\"businessName\" formControlName=\"businessName\"\r\n                placeholder=\"Business Name\"\r\n                [class.is-invalid]=\"f['businessName'].invalid && f['businessName'].touched\" />\r\n              <div class=\"cp-error\" *ngIf=\"f['businessName'].invalid && f['businessName'].touched\">Business name is required</div>\r\n            </div>\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessEmail\">Business Email<span class=\"req\">*</span></label>\r\n              <input type=\"email\" id=\"businessEmail\" formControlName=\"businessEmail\"\r\n                placeholder=\"business@example.com\"\r\n                [class.is-invalid]=\"f['businessEmail'].invalid && f['businessEmail'].touched\" />\r\n              <div class=\"cp-error\" *ngIf=\"f['businessEmail'].invalid && f['businessEmail'].touched\">\r\n                <span *ngIf=\"f['businessEmail'].errors?.['required']\">Business email is required</span>\r\n                <span *ngIf=\"f['businessEmail'].errors?.['email']\">Enter a valid email</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"cp-field\">\r\n            <label for=\"businessAddress\">Business Address</label>\r\n            <input type=\"text\" id=\"businessAddress\" formControlName=\"businessAddress\"\r\n              placeholder=\"123 Business Street\"\r\n              ngx-google-places-autocomplete [options]=\"googleOptions\"\r\n              (onAddressChange)=\"onBusinessAddressChange($event)\"\r\n              autocomplete=\"off\" />\r\n          </div>\r\n\r\n          <div class=\"cp-row cp-row-triple\">\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessCity\">City</label>\r\n              <input type=\"text\" id=\"businessCity\" formControlName=\"businessCity\" placeholder=\"City\" />\r\n            </div>\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessState\">State</label>\r\n              <input type=\"text\" id=\"businessState\" formControlName=\"businessState\" placeholder=\"ST\" maxlength=\"2\" />\r\n            </div>\r\n            <div class=\"cp-field\">\r\n              <label for=\"businessZip\">Zip</label>\r\n              <input type=\"text\" id=\"businessZip\" formControlName=\"businessZip\" placeholder=\"00000\" inputmode=\"numeric\" maxlength=\"5\" />\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Business Logo -->\r\n          <div class=\"cp-field\">\r\n            <label>Business Logo</label>\r\n            <div class=\"cp-upload-wrap\">\r\n              <input #cpLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\"\r\n                (change)=\"onBusinessLogoChange($event)\" class=\"cp-upload-hidden\" />\r\n              <input type=\"text\" class=\"cp-upload-text\" [value]=\"businessLogoName\" readonly\r\n                placeholder=\"Click to upload business logo\" (click)=\"cpLogoInput.click()\" />\r\n              <button type=\"button\" class=\"cp-upload-btn\" (click)=\"cpLogoInput.click()\" aria-label=\"Upload logo\">\r\n                <svg viewBox=\"0 0 24 24\"><path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\"/></svg>\r\n              </button>\r\n            </div>\r\n            <small class=\"cp-upload-hint\">Allowed formats: PNG, JPG, JPEG</small>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <!-- \u2500\u2500\u2500 Profile Picture \u2500\u2500\u2500 -->\r\n        <div class=\"cp-section-title\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\"/></svg>\r\n          Profile Picture\r\n        </div>\r\n        <div class=\"cp-field\">\r\n          <label>Profile Picture<span class=\"req\">*</span></label>\r\n          <div class=\"cp-upload-wrap\">\r\n            <input #cpProfileInput type=\"file\" accept=\".png,.jpg,.jpeg\"\r\n              (change)=\"onProfileFileChange($event)\" class=\"cp-upload-hidden\" />\r\n            <input type=\"text\" class=\"cp-upload-text\" [value]=\"profileFileName\" readonly\r\n              placeholder=\"Click to upload profile picture\" (click)=\"cpProfileInput.click()\" />\r\n            <button type=\"button\" class=\"cp-upload-btn\" (click)=\"cpProfileInput.click()\" aria-label=\"Upload profile picture\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\"/></svg>\r\n            </button>\r\n          </div>\r\n          <small class=\"cp-upload-hint\">Allowed formats: PNG, JPG, JPEG</small>\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Terms & Privacy \u2500\u2500\u2500 -->\r\n        <div class=\"cp-terms\">\r\n          <input type=\"checkbox\" id=\"agree\"\r\n            [checked]=\"model.acceptTerms && model.privacy\"\r\n            (change)=\"onTermsCheckboxChange($event)\" />\r\n          <label for=\"agree\">I accept the\r\n            <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Terms and Conditions', $event)\">Terms &amp; Conditions</a>\r\n            and\r\n            <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Privacy Statement', $event)\">Privacy Policy</a>,\r\n            and confirm I am authorized to activate this account.\r\n          </label>\r\n        </div>\r\n        <div class=\"cp-error cp-terms-error\"\r\n          *ngIf=\"(!model.acceptTerms || !model.privacy) && validatePage === 1\">\r\n          You must agree to both Terms and Conditions and Privacy Statement to continue\r\n        </div>\r\n\r\n        <!-- \u2500\u2500\u2500 Submit \u2500\u2500\u2500 -->\r\n        <div class=\"cp-error cp-submit-error\" *ngIf=\"submitError\">{{ submitError }}</div>\r\n\r\n        <button type=\"submit\" class=\"cp-btn\" [disabled]=\"isSubmitting\">\r\n          <span *ngIf=\"isSubmitting\" class=\"cp-spinner cp-spinner-btn\"></span>\r\n          <span>{{ isSubmitting ? 'Activating\u2026' : 'Claim My Account' }}</span>\r\n        </button>\r\n\r\n      </form>\r\n    </div>\r\n  </main>\r\n\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Terms & Privacy Modal (read-only) \u2500\u2500\u2500 -->\r\n<ng-template #termsAndConditionsModel>\r\n  <div class=\"modal-dialog modal-dialog-centered tc-modal-dialog\">\r\n    <div class=\"modal-content tc-modal\">\r\n\r\n      <div class=\"tc-modal-header\">\r\n        <div class=\"tc-header-icon\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"/>\r\n            <polyline points=\"14 2 14 8 20 8\"/>\r\n            <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/>\r\n            <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/>\r\n          </svg>\r\n        </div>\r\n        <h4 class=\"tc-modal-title\">{{ termsAndConditionTitle }}</h4>\r\n        <button type=\"button\" class=\"tc-modal-close\" (click)=\"closeModal()\" aria-label=\"Close\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\r\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"tc-modal-body\">\r\n        <ng-container *ngIf=\"termsAndConditionTitle === 'Terms and Conditions'\">\r\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-terms-conditions>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"termsAndConditionTitle !== 'Terms and Conditions'\">\r\n          <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-privacy-policy>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"tc-modal-footer\">\r\n        <button type=\"button\" class=\"tc-btn tc-btn-close\" (click)=\"closeModal()\">\r\n          Close\r\n        </button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.cp-page{display:flex;min-height:100vh;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0c1620}@media (max-width: 860px){.cp-page{flex-direction:column}}.cp-left{width:40%;min-width:300px;background:#fff;border-right:1px solid #e2eaf2;display:flex;flex-direction:column;padding:44px 40px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-left{display:none}}.cp-left-inner{display:flex;flex-direction:column;height:100%}.cp-logo{margin-bottom:36px}.cp-logo-img{max-height:48px;max-width:200px;object-fit:contain;display:block}.cp-logo-fallback{font-size:20px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-left-hero{margin-bottom:32px}.cp-left-hero h1{font-size:22px;font-weight:800;color:#0c1620;line-height:1.3;margin:8px 0 10px}.cp-left-hero p{font-size:13px;color:#6b7c8a;line-height:1.75}.cp-hero-brand{color:#4077ad}.cp-left-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#4077ad;background:#4077ad14;border:1px solid rgba(64,119,173,.2);padding:4px 10px;border-radius:99px}.cp-benefits{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;gap:16px}.cp-benefits li{display:flex;align-items:flex-start;gap:12px}.cp-benefit-icon{flex-shrink:0;width:36px;height:36px;background:#4077ad12;border:1px solid rgba(64,119,173,.14);border-radius:10px;display:flex;align-items:center;justify-content:center}.cp-benefit-icon svg{width:17px;height:17px}.cp-benefit-icon svg path{fill:#4077ad}.cp-benefit-text{display:flex;flex-direction:column;gap:2px;padding-top:2px}.cp-benefit-text strong{font-size:12.5px;font-weight:700;color:#0c1620;display:block}.cp-benefit-text span{font-size:11.5px;color:#6b7c8a;line-height:1.6}.cp-left-contact{display:flex;flex-direction:column;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid #e8edf3}.cp-contact-link{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-contact-link svg{width:14px;height:14px;flex-shrink:0}.cp-contact-link svg path{fill:currentColor}.cp-contact-link:hover{color:#4077ad}.cp-left-footnote{margin-top:18px;font-size:12.5px}.cp-left-footnote a{display:inline-flex;align-items:center;gap:5px;color:#4077ad;text-decoration:none;font-weight:600;transition:color .15s}.cp-left-footnote a svg{width:12px;height:12px}.cp-left-footnote a svg path{fill:#4077ad}.cp-left-footnote a:hover{color:#335f8a;text-decoration:underline}.cp-mobile-bar{display:none;align-items:center;justify-content:center;padding:16px 24px;background:#fff;border-bottom:1px solid #e2eaf2;margin-bottom:0}@media (max-width: 860px){.cp-mobile-bar{display:flex}}.cp-mobile-logo{max-height:36px;max-width:160px;object-fit:contain}.cp-mobile-company{font-size:18px;font-weight:800;color:#4077ad}.cp-right{flex:1;background:#eef1f4;display:flex;flex-direction:column;align-items:center;padding:48px 24px 64px;overflow-y:auto;min-width:0}@media (max-width: 860px){.cp-right{padding:0 0 48px}}.cp-form-wrap{width:100%;max-width:580px;background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201a;padding:40px 44px 48px;margin-top:48px}@media (max-width: 860px){.cp-form-wrap{border-radius:0;box-shadow:none;border-top:1px solid #e2eaf2;margin-top:0;padding:32px 20px 48px;max-width:100%}}@media (max-width: 480px){.cp-form-wrap{padding:24px 16px 40px}}.cp-form-header{margin-bottom:30px}.cp-form-header h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:6px}.cp-form-header p{font-size:13px;color:#6b7c8a;line-height:1.6}.cp-section-title{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#0c1620;padding-bottom:10px;margin-bottom:18px;margin-top:26px;border-bottom:2px solid #4077AD;display:flex;align-items:center;gap:8px}.cp-section-title svg{width:14px;height:14px;flex-shrink:0}.cp-section-title svg path{fill:#4077ad}.cp-section-title:first-of-type{margin-top:0}.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.cp-row.cp-row-triple{grid-template-columns:2fr 1fr 1fr}@media (max-width: 560px){.cp-row{grid-template-columns:1fr}.cp-row.cp-row-triple{grid-template-columns:1fr 1fr}}@media (max-width: 400px){.cp-row.cp-row-triple{grid-template-columns:1fr}}.cp-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width:0}.cp-field.cp-field-with-btn{margin-bottom: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-input-row{display:flex;gap:8px}.cp-input-row input{flex:1}.cp-lookup-btn{flex-shrink:0;height:42px;padding:0 18px;background:#4077ad;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s;font-family:inherit}.cp-lookup-btn:hover:not(:disabled){background:#335f8a}.cp-lookup-btn:disabled{opacity:.6;cursor:not-allowed}.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-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-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-account-not-found{display:flex;align-items:flex-start;gap:12px;margin-top:16px;padding:14px 16px;background:#fff5f5;border:1.5px solid #fecaca;border-radius:6px}.cp-anf-icon{flex-shrink:0;width:32px;height:32px;background:#dc35451a;border-radius:50%;display:flex;align-items:center;justify-content:center}.cp-anf-icon svg{width:16px;height:16px}.cp-anf-icon svg path{fill:#dc3545}.cp-anf-title{font-size:13px;font-weight:700;color:#b91c1c;margin:0 0 3px}.cp-anf-sub{font-size:12px;color:#dc3545;margin:0;line-height:1.5}.cp-anf-sub strong{font-weight:600}.cp-invalid-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{background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-invalid-card h2{font-size:22px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-invalid-card p{font-size:14px;color:#6b7c8a;line-height:1.7}.cp-invalid-icon{width:64px;height:64px;background:#dc35451a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-invalid-icon svg{width:32px;height:32px}.cp-invalid-icon svg path{fill:#dc3545}.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-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-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;margin-top:22px;background:#4077ad;border:none;border-radius:6px;font-size:14px;font-weight:700;letter-spacing:.4px;color:#fff;cursor:pointer;text-decoration:none;transition:background .15s,transform .1s;font-family:inherit}.cp-btn:hover:not(:disabled){background:#335f8a}.cp-btn:active:not(:disabled){transform:scale(.99)}.cp-btn:disabled{opacity:.65;cursor:not-allowed}.cp-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:cp-spin .7s linear infinite}.cp-spinner:not(.cp-spinner-btn){border-color:#4077ad4d;border-top-color:#4077ad}@keyframes cp-spin{to{transform:rotate(360deg)}}.cp-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-success-card{background:#fff;border-radius:6px;box-shadow:0 12px 36px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-success-card h2{font-size:24px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-success-card p{font-size:14px;color:#6b7c8a;line-height:1.7;margin-bottom:28px}.cp-success-icon{width:64px;height:64px;background:#28a7451a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-success-icon svg{width:32px;height:32px}.cp-success-icon svg path{fill:#28a745}.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-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-terms{display:flex;align-items:flex-start;gap:10px;margin:22px 0 4px}.cp-terms input[type=checkbox]{margin-top:2px;width:15px;height:15px;flex-shrink:0;accent-color:#4077AD;cursor:pointer}.cp-terms label{font-size:12.5px;color:#6b7c8a;line-height:1.6;cursor:pointer;margin:0}.cp-terms label a{color:#4077ad;text-decoration:underline;font-weight:600}.cp-terms label a:hover{color:#335f8a}.cp-reset-toggle{margin:6px 0 18px;padding:14px 16px;background:#f0f7ff;border:1.5px solid #b8d4ef;border-radius:6px}.cp-toggle-label{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#0c1620;cursor:pointer;margin:0}.cp-toggle-switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0}.cp-toggle-switch input{opacity:0;width:0;height:0;position:absolute}.cp-toggle-switch input:checked+.cp-toggle-knob{background:#4077ad}.cp-toggle-switch input:checked+.cp-toggle-knob:before{transform:translate(16px)}.cp-toggle-knob{position:absolute;inset:0;background:#d3dce3;border-radius:22px;transition:background .2s;cursor:pointer}.cp-toggle-knob:before{content:\"\";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px #0003}.cp-toggle-hint{font-size:11.5px;color:#6b7c8a;margin:6px 0 0}.cp-upload-wrap{display:flex;align-items:stretch}.cp-upload-wrap .cp-upload-hidden{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.cp-upload-wrap .cp-upload-text{flex:1;border-radius:6px 0 0 6px!important;cursor:pointer;min-width:0}.cp-upload-btn{flex-shrink:0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#eef1f4;border:1.5px solid #d3dce3;border-left:none;border-radius:0 6px 6px 0;cursor:pointer;transition:background .15s}.cp-upload-btn:hover{background:#dfe4ea}.cp-upload-btn svg{width:18px;height:18px}.cp-upload-btn svg path{fill:#4077ad}.cp-upload-hint{display:block;font-size:11px;color:#6b7c8a;margin-top:4px}.cp-left-badge--found{color:#166534;background:#22c55e1a;border-color:#22c55e47;gap:5px}.cp-left-badge--found svg{width:12px;height:12px;flex-shrink:0}.cp-left-badge--found svg path{fill:#16a34a}.cp-benefit-icon--green{background:#22c55e14;border-color:#22c55e2e}.cp-benefit-icon--green svg path{fill:#16a34a}.cf-wrap{width:100%;max-width:520px;margin:0 auto;padding:48px 32px 40px;display:flex;flex-direction:column;align-items:center;text-align:center}@media (max-width: 540px){.cf-wrap{padding:32px 20px 28px}}.cf-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:#166534;background:#22c55e1a;border:1px solid rgba(34,197,94,.28);padding:5px 14px;border-radius:99px;margin-bottom:20px}.cf-badge svg{width:13px;height:13px;flex-shrink:0}.cf-badge svg path{fill:#16a34a}.cf-heading{font-size:26px;font-weight:800;color:#0c1620;margin:0 0 8px;line-height:1.2}.cf-sub{font-size:13.5px;color:#6b7c8a;margin:0 0 28px;line-height:1.6;max-width:380px}.cf-card{width:100%;background:#fff;border:1.5px solid #d3dce3;border-radius:14px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:20px;box-shadow:0 4px 16px #0c16200f;margin-bottom:28px;text-align:left}.cf-avatar{width:72px;height:72px;border-radius:50%;background:#4077ad;color:#fff;font-size:24px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:1px;box-shadow:0 4px 12px #4077ad59}.cf-info-grid{width:100%;display:flex;flex-direction:column;gap:0;border:1px solid #e8edf3;border-radius:10px;overflow:hidden}.cf-info-row{display:flex;align-items:center;padding:11px 16px;gap:12px;border-bottom:1px solid #e8edf3}.cf-info-row:last-child{border-bottom:none}@media (max-width: 400px){.cf-info-row{flex-direction:column;align-items:flex-start;gap:2px}}.cf-info-label{font-size:11.5px;font-weight:700;color:#6b7c8a;text-transform:uppercase;letter-spacing:.8px;min-width:90px;flex-shrink:0}.cf-info-value{font-size:13.5px;font-weight:500;color:#0c1620;word-break:break-word}.cf-role-badge{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;color:#4077ad;background:#4077ad14;border:1px solid rgba(64,119,173,.2);padding:3px 10px;border-radius:99px;letter-spacing:.4px}.cf-access-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:0 24px;height:52px;background:#4077ad;color:#fff;border-radius:10px;font-size:14.5px;font-weight:700;text-decoration:none;letter-spacing:.3px;transition:background .15s,transform .1s,box-shadow .15s;box-shadow:0 4px 14px #4077ad59;margin-bottom:18px}.cf-access-btn svg{width:18px;height:18px;flex-shrink:0}.cf-access-btn svg path{fill:#fff}.cf-access-btn:hover{background:#335f8a;box-shadow:0 6px 18px #4077ad73;transform:translateY(-1px);color:#fff;text-decoration:none}.cf-access-btn:active{transform:scale(.99)}.cf-not-you{font-size:12px;color:#6b7c8a;margin:0}.cf-not-you a{color:#4077ad;text-decoration:underline;font-weight:600}.cf-not-you a:hover{color:#335f8a}\n"] }]
         }], ctorParameters: () => [{ type: i8.FormBuilder }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: UserDetailService }, { type: RolesService }, { type: i7.BsModalService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LIBRARY_CONFIG]