@idsoftsource/initial-process 2.3.3 → 2.3.5

package/fesm2022/idsoftsource-initial-process.mjs

@@ -1504,6 +1504,10 @@ class CredentialingStore {
     notApplicable = signal(false, ...(ngDevMode ? [{ debugName: "notApplicable" }] : []));
     selectedStates = signal([], ...(ngDevMode ? [{ debugName: "selectedStates" }] : []));
     isUploadSuccess = signal(null, ...(ngDevMode ? [{ debugName: "isUploadSuccess" }] : []));
+    uploadedResumeFile = signal(null, ...(ngDevMode ? [{ debugName: "uploadedResumeFile" }] : []));
+    setUploadedResumeFile(file) {
+        this.uploadedResumeFile.set({ name: file.name, size: file.size, lastModified: file.lastModified });
+    }
     profileSignal = signal(null, ...(ngDevMode ? [{ debugName: "profileSignal" }] : []));
     // Extra per-skill details for the resume-preview flow (indexed by skill position)
     resumeSkillMeta = signal({}, ...(ngDevMode ? [{ debugName: "resumeSkillMeta" }] : []));
@@ -33677,6 +33681,7 @@ class FirstComponent {
                     isActive: true,
                 });
             }
+            this.store.setUploadedResumeFile(this.fileData);
             this.uploadresume();
         });
     }
@@ -33723,6 +33728,16 @@ class FirstComponent {
             this.uploadError = 'Only PDF, DOC, or DOCX files are allowed.';
             return;
         }
+        const existing = this.store.uploadedResumeFile();
+        const isSameFile = !!existing &&
+            existing.name === file.name &&
+            existing.size === file.size &&
+            existing.lastModified === file.lastModified;
+        if (isSameFile && this.store.profileSignal() && this.store.isUploadSuccess()) {
+            this.resumeName = file.name;
+            this.handleAutoNavigation();
+            return;
+        }
         this.fileData = file;
         this.resumeName = file.name;
         this.model.fileName = this.resumeName;
@@ -34362,6 +34377,7 @@ class InitialProcessComponent {
     selectedContractorSubCategories = [];
     contractorSubCategories = [];
     contractorCategories = [];
+    isLoadingSubCategories = false;
     appBrandingMap = {
         AdjusterMatch: {
             logo: 'assets/images/icons/adjuster-match-logo.svg',
@@ -35406,6 +35422,7 @@ class InitialProcessComponent {
             targetProviderId: "00000000-0000-0000-0000-000000000000"
         };
         this.contractorSubCategories = [];
+        this.isLoadingSubCategories = true;
         this.contractorSubCategoryService
             .get(query)
             .subscribe((result) => {
@@ -35425,6 +35442,9 @@ class InitialProcessComponent {
                     items: result.data.filter(x => x.contractorCategoryId === category.contractorCategoryId)
                 });
             });
+            this.isLoadingSubCategories = false;
+        }, () => {
+            this.isLoadingSubCategories = false;
         });
     }
     saveContractorSubCategory(id) {
@@ -35548,11 +35568,11 @@ class InitialProcessComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InitialProcessComponent, deps: [{ token: i2.Router }, { token: UserDetailService }, { token: i8.FormBuilder }, { token: FileService }, { token: ProvidersService }, { token: RolesService }, { token: i7.BsModalService }, { token: ProviderContractorSubCategoryService }, { token: ProviderContractorSubCategoryService }, { token: i9.AuthService }, { token: i1$2.TokenService }, { token: i1$2.RoleContextService }, { token: i1$2.AuthLogoutService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: InitialProcessComponent, isStandalone: false, selector: "app-initial-process", viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"container\">\r\n  <div class=\"mb-4 logout-container\" *ngIf=\"showlogout\">\r\n    <button class=\"logout-btn\" (click)=\"logout()\">\r\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"\r\n        stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4\"/>\r\n        <polyline points=\"16 17 21 12 16 7\"/>\r\n        <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\r\n      </svg>\r\n      Logout\r\n    </button>\r\n  </div>\r\n  <div class=\"card pb-2 mob pr-5\" style=\"margin-bottom: 30px;\">\r\n    <div [hidden]=\"view !== 1\">\r\n\r\n      <!-- \u2500\u2500 Welcome Banner \u2500\u2500 -->\r\n      <div class=\"v1-welcome\">\r\n        <div class=\"v1-welcome-icon\">\r\n          <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"/>\r\n            <circle cx=\"9\" cy=\"7\" r=\"4\"/>\r\n            <path d=\"M23 21v-2a4 4 0 00-3-3.87\"/>\r\n            <path d=\"M16 3.13a4 4 0 010 7.75\"/>\r\n          </svg>\r\n        </div>\r\n        <div class=\"v1-welcome-text\">\r\n          <h2 class=\"v1-welcome-title\">Welcome to <span class=\"v1-brand\">{{ branding.displayName }}</span></h2>\r\n          <p class=\"v1-welcome-sub\">Our members and service providers rely on accurate info in your profile to connect\r\n            you with work that suits your capabilities. Keep your profile complete, skills updated, licenses current,\r\n            photos and logos professional, and schedule up to date.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Main Body: agreements + signature \u2500\u2500 -->\r\n      <div class=\"v1-body\">\r\n\r\n        <!-- Left: agreement cards -->\r\n        <div class=\"v1-agreements\">\r\n\r\n          <!-- Terms card -->\r\n          <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.acceptTerms\"\r\n            [class.v1-card--invalid]=\"!model.acceptTerms && validatePage==1\">\r\n            <div class=\"v1-card-icon\">\r\n              <svg width=\"20\" height=\"20\" 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            <div class=\"v1-card-body\">\r\n              <p class=\"v1-card-title\">Terms and Conditions</p>\r\n              <p class=\"v1-card-sub\">Read and accept to continue</p>\r\n            </div>\r\n            <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.acceptTerms\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n              <svg *ngIf=\"model.acceptTerms\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"20 6 9 17 4 12\"/>\r\n              </svg>\r\n              {{ model.acceptTerms ? 'Agreed' : 'Read & Agree' }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- Privacy card -->\r\n          <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.privacy\"\r\n            [class.v1-card--invalid]=\"!model.privacy && validatePage==1\">\r\n            <div class=\"v1-card-icon\">\r\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>\r\n              </svg>\r\n            </div>\r\n            <div class=\"v1-card-body\">\r\n              <p class=\"v1-card-title\">Privacy Statement</p>\r\n              <p class=\"v1-card-sub\">Read and accept to continue</p>\r\n            </div>\r\n            <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.privacy\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n              <svg *ngIf=\"model.privacy\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"20 6 9 17 4 12\"/>\r\n              </svg>\r\n              {{ model.privacy ? 'Agreed' : 'Read & Agree' }}\r\n            </button>\r\n          </div>\r\n\r\n        </div>\r\n\r\n        <!-- Right: signature pad -->\r\n        <div class=\"v1-signature\">\r\n          <div class=\"v1-sig-header\">\r\n            <span class=\"v1-sig-label\">\r\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M17 3a2.828 2.828 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z\"/>\r\n              </svg>\r\n              Signature\r\n            </span>\r\n            <button (click)=\"clearPad()\" class=\"v1-clear-btn\">\r\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n              </svg>\r\n              Clear\r\n            </button>\r\n          </div>\r\n          <div class=\"v1-sig-pad\">\r\n            <div [ngClass]=\"{'d-none': signaturePadData?.publicUrl}\">\r\n              <canvas #canvas [width]=\"255\" [height]=\"90\"></canvas>\r\n            </div>\r\n            <div [ngClass]=\"{'d-none': !signaturePadData?.publicUrl}\">\r\n              <img [width]=\"255\" [height]=\"120\" [src]=\"signaturePadData?.publicUrl\" alt style=\"position:relative\">\r\n            </div>\r\n            <p class=\"v1-sig-hint\" *ngIf=\"!signaturePadData?.publicUrl && (!points || !points?.length)\">\r\n              Draw your signature here\r\n            </p>\r\n          </div>\r\n          <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length==0) && !fileData\"\r\n            class=\"v1-error-msg\">\r\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\r\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\r\n            </svg>\r\n            Signature is required\r\n          </div>\r\n          <div *ngIf=\"uploadError\" class=\"v1-error-msg\">{{ uploadError }}</div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Continue Button \u2500\u2500 -->\r\n      <div class=\"v1-footer\">\r\n        <button class=\"v1-continue-btn\" (click)=\"next(2)\"\r\n          [disabled]=\"((!points || !points?.length || points.length==0) && !fileData) || !model.acceptTerms || !model.privacy\">\r\n          <span *ngIf=\"!showLoader\">Continue</span>\r\n          <span *ngIf=\"showLoader\" class=\"v1-spinner\"></span>\r\n          <svg *ngIf=\"!showLoader\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n            stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n    </div>\r\n    <ng-container *ngIf=\"view == 2\">\r\n\r\n      <!-- \u2500\u2500 Role-select header \u2500\u2500 -->\r\n      <div class=\"v2-header\">\r\n        <div class=\"v2-header-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <circle cx=\"12\" cy=\"8\" r=\"4\"/>\r\n            <path d=\"M6 20v-2a4 4 0 014-4h4a4 4 0 014 4v2\"/>\r\n          </svg>\r\n        </div>\r\n        <div>\r\n          <h2 class=\"v2-title\">Choose your role</h2>\r\n          <p class=\"v2-sub\">Choose the areas you'd like to be part of \u2014 programs, services, events, or\r\n            collaborations. Connect your business to others and prospective clients.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Role cards grid \u2500\u2500 -->\r\n      <div class=\"v2-grid\">\r\n        <ng-container *ngFor=\"let userType of userViewRoles\">\r\n          <div class=\"v2-role-card\" [class.v2-role-card--active]=\"userType.value === selectedRoleValue\"\r\n            (click)=\"selectedUserRole(userType)\">\r\n            <div class=\"v2-role-img-wrap\">\r\n              <img [src]=\"userType?.img\" alt=\"\">\r\n            </div>\r\n            <span class=\"v2-role-name\">{{userType.name}}</span>\r\n            <span class=\"v2-role-check\" *ngIf=\"userType.value === selectedRoleValue\">\r\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"20 6 9 17 4 12\"/>\r\n              </svg>\r\n            </span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Footer: Back + Continue \u2500\u2500 -->\r\n      <div class=\"v2-footer\">\r\n        <button class=\"v2-back-btn\" (click)=\"previous()\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n          </svg>\r\n          Back\r\n        </button>\r\n        <button class=\"v2-continue-btn\" (click)=\"next(3)\" [disabled]=\"!isUserSelected\">\r\n          Continue\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 3\">\r\n\r\n      <!-- Header -->\r\n      <div class=\"ip-header\">\r\n        <div class=\"ip-header-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z\"/>\r\n            <polyline points=\"9 22 9 12 15 12 15 22\"/>\r\n          </svg>\r\n        </div>\r\n        <div>\r\n          <h2 class=\"ip-title\">Business Information</h2>\r\n          <p class=\"ip-sub\">Tell us about your company so we can connect you with the right work.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <form [formGroup]=\"companyForm\">\r\n\r\n        <!-- Company Details -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Company Details</p>\r\n          <div class=\"ip-grid-2\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"companyName\">Company Name <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': (f.companyName.errors && validatePage == 3) || providerError}\"\r\n                type=\"text\" class=\"ip-input\" id=\"companyName\" placeholder=\"Company Name\"\r\n                formControlName=\"companyName\">\r\n              <span *ngIf=\"f.companyName.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.companyName.errors.required\">Company Name is required</span>\r\n                <span *ngIf=\"f.companyName.errors.minlength\">Minimum 2 characters</span>\r\n                <span *ngIf=\"f.companyName.errors.maxLength\">Maximum 100 characters</span>\r\n              </span>\r\n              <span *ngIf=\"providerError\" class=\"ip-error\">{{ providerError }}</span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"inputPhone\">Phone Number <span class=\"ip-required\">*</span></label>\r\n              <input class=\"ip-input\" type=\"text\" name=\"inputPhone\" placeholder=\"Company Phone Number\"\r\n                id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\" [maxLength]=\"14\"\r\n                (input)=\"formatPhone($event,companyForm)\"\r\n                [ngClass]=\"{'ip-input--invalid': (f.phoneNumber.errors && validatePage == 3) || providerError}\">\r\n              <span *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.phoneNumber.errors.required\">Phone Number is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Address -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Address</p>\r\n          <div class=\"ip-grid-2\" style=\"margin-bottom: 12px;\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"businessAddress\">Address Line 1 <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': f.address1.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n                (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n              <span *ngIf=\"f.address1.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.address1.errors.required\">Business Address 1 is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"businessAddress2\">Address Line 2</label>\r\n              <input type=\"text\" class=\"ip-input\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n            </div>\r\n          </div>\r\n          <div class=\"ip-grid-4\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"City\">City <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': f.city.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n              <span *ngIf=\"f.city.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.city.errors.required\">City is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"State\">State <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': f.state.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n              <span *ngIf=\"f.state.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.state.errors.required\">State is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Zipcode\">Zipcode <span class=\"ip-required\">*</span></label>\r\n              <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                [ngClass]=\"{'ip-input--invalid': f.zipcode.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n              <span *ngIf=\"f.zipcode.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.zipcode.errors.required\">Zipcode is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Country\">Country <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': f.country.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n              <span *ngIf=\"f.country.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.country.errors.required\">Country is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </form>\r\n\r\n      <!-- Company Logo (intentionally outside formGroup) -->\r\n      <div class=\"ip-section\">\r\n        <p class=\"ip-section-label\">Company Logo</p>\r\n        <div class=\"ip-field\">\r\n          <label class=\"ip-label\">Company Logo <span class=\"ip-required\">*</span></label>\r\n          <div class=\"ip-upload-wrap\">\r\n            <input #uploadLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadLogo($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\"\r\n              class=\"ip-input\" placeholder=\"Click to upload company logo\">\r\n            <img #uploadImage2 class=\"ip-upload-icon\" (click)=\"uploadLogoInput.click()\"\r\n              src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n          </div>\r\n          <span *ngIf=\"isLogoRequired\" class=\"ip-error\">Please upload a company logo</span>\r\n          <span *ngIf=\"isneeded\" class=\"ip-error\">Company Logo is required</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Contractor Category -->\r\n      <div *ngIf=\"selectedRole?.name == 'Contractor'\" class=\"ip-section\">\r\n        <p class=\"ip-section-label\">Contractor Category</p>\r\n\r\n        <!-- Category selector \u2014 ng-select logic intact, restyled as pill tag-input -->\r\n        <div class=\"cc-select-wrap\">\r\n          <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n            (ngModelChange)=\"changeContractor($event)\" [(ngModel)]=\"selectedContractorCategories\"\r\n            >\r\n          </ng-select>\r\n        </div>\r\n\r\n        <!-- Sub-items as pill chips per selected category -->\r\n        <ng-container *ngFor=\"let item of selectedContractorCategories; let i=index\">\r\n          <div class=\"cc-group\">\r\n\r\n            <!-- \"Select all\" toggle pill for this category -->\r\n            <label class=\"cc-select-all-pill\" [class.cc-select-all-pill--on]=\"item.selectAll\">\r\n              <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n                (change)=\"selectAll($event,item?.items)\" class=\"cc-hidden-check\">\r\n              <svg *ngIf=\"item.selectAll\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"20 6 9 17 4 12\"/>\r\n              </svg>\r\n              {{ item?.name }} \u2014 Select all\r\n            </label>\r\n\r\n            <!-- Individual sub-item pills -->\r\n            <div class=\"cc-sub-pills\">\r\n              <label *ngFor=\"let subItem of item?.items\" class=\"cc-sub-pill\"\r\n                [class.cc-sub-pill--on]=\"subItem.selected\">\r\n                <input type=\"checkbox\" [(ngModel)]=\"subItem.selected\" [name]=\"subItem?.id\" [id]=\"subItem?.id\"\r\n                  (change)=\"unCheckedEvent($event,item)\" class=\"cc-hidden-check\">\r\n                <svg *ngIf=\"subItem.selected\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                  stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                  <polyline points=\"20 6 9 17 4 12\"/>\r\n                </svg>\r\n                {{ subItem?.name }}\r\n              </label>\r\n            </div>\r\n\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- Footer -->\r\n      <div class=\"ip-footer\">\r\n        <button class=\"ip-back-btn\" (click)=\"previous()\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n          </svg>\r\n          Back\r\n        </button>\r\n        <button class=\"ip-next-btn\" (click)=\"next(4)\">\r\n          Continue\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 4\">\r\n\r\n      <!-- Header -->\r\n      <div class=\"ip-header\">\r\n        <div class=\"ip-header-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <circle cx=\"12\" cy=\"8\" r=\"4\"/>\r\n            <path d=\"M6 20v-2a4 4 0 014-4h4a4 4 0 014 4v2\"/>\r\n          </svg>\r\n        </div>\r\n        <div>\r\n          <h2 class=\"ip-title\">Your Profile</h2>\r\n          <p class=\"ip-sub\">We need a few basics and a headshot to complete your profile.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Copy from provider toggle -->\r\n      <div *ngIf=\"isBusiness\" class=\"ip-copy-row\">\r\n        <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\"\r\n          class=\"ip-copy-check\" (change)=\"changeAddressUser()\">\r\n        <label for=\"isCopy\" class=\"ip-copy-label\">Copy from Provider Information</label>\r\n      </div>\r\n\r\n      <form [formGroup]=\"userForm\">\r\n\r\n        <!-- Personal Details -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Personal Details</p>\r\n          <div class=\"ip-grid-3\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"firstName\">First Name <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.firstName.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n              <span *ngIf=\"u.firstName.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.firstName.errors.required\">First Name is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"lastName\">Last Name <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.lastName.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n              <span *ngIf=\"u.lastName.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.lastName.errors.required\">Last Name is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"email\">Email <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.email.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n              <span *ngIf=\"u.email.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.email.errors.required\">Email is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Home Address -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Home Address</p>\r\n          <div class=\"ip-field\" style=\"margin-bottom: 12px;\">\r\n            <label class=\"ip-label\" for=\"address1\">Address Line 1 <span class=\"ip-required\">*</span></label>\r\n            <input [ngClass]=\"{'ip-input--invalid': u.address1.errors && validatePage == 4}\"\r\n              [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"ip-input\"\r\n              placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n            <span *ngIf=\"u.address1.errors && validatePage == 4\" class=\"ip-error\">\r\n              <span *ngIf=\"u.address1.errors.required\">Home Address 1 is required</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"ip-grid-3\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"homeAddress2\">Address Line 2</label>\r\n              <input type=\"text\" class=\"ip-input\" id=\"homeAddress2\" formControlName=\"address2\"\r\n                placeholder=\"Home Address 2\">\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"City\">City <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.city.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n              <span *ngIf=\"u.city.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.city.errors.required\">City is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"State\">State <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.state.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n              <span *ngIf=\"u.state.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.state.errors.required\">State is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Zipcode\">Zipcode <span class=\"ip-required\">*</span></label>\r\n              <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                [ngClass]=\"{'ip-input--invalid': u.zipcode.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n              <span *ngIf=\"u.zipcode.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.zipcode.errors.required\">Zipcode is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Country\">Country <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.country.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n              <span *ngIf=\"u.country.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.country.errors.required\">Country is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"inputPhone\">Phone Number <span class=\"ip-required\">*</span></label>\r\n              <input class=\"ip-input\" type=\"text\" (input)=\"formatPhone($event,userForm)\"\r\n                name=\"inputPhone\" placeholder=\"Phone Number\" id=\"inputPhone\" autocomplete=\"off\"\r\n                formControlName=\"phoneNumber\" [maxLength]=\"14\"\r\n                [ngClass]=\"{'ip-input--invalid': u.phoneNumber.errors && validatePage == 4}\">\r\n              <span *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.phoneNumber.errors.required\">Phone Number is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </form>\r\n\r\n      <!-- Profile Picture (intentionally outside formGroup) -->\r\n      <div class=\"ip-section\">\r\n        <p class=\"ip-section-label\">Profile Picture</p>\r\n        <div class=\"ip-field\">\r\n          <label class=\"ip-label\">Profile Picture <span class=\"ip-required\">*</span></label>\r\n          <div class=\"ip-upload-wrap\">\r\n            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadUserImage($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\"\r\n              class=\"ip-input\" id=\"upload\" accept=\".png,.jpg,.jpeg\" placeholder=\"Click to upload profile picture\">\r\n            <img #uploadImage1 class=\"ip-upload-icon\" (click)=\"uploadFile.click()\"\r\n              src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n          </div>\r\n          <span *ngIf=\"isImageRequired\" class=\"ip-error\">Please upload a profile image</span>\r\n          <span *ngIf=\"userError\" class=\"ip-error\">{{ userError }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Footer -->\r\n      <div class=\"ip-footer\">\r\n        <button class=\"ip-back-btn\" (click)=\"previous()\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n          </svg>\r\n          Back\r\n        </button>\r\n        <button class=\"ip-next-btn\" (click)=\"next(5)\" [disabled]=\"showLoader\">\r\n          <span *ngIf=\"!showLoader\">Continue</span>\r\n          <span *ngIf=\"showLoader\" class=\"v1-spinner\"></span>\r\n          <svg *ngIf=\"!showLoader\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n            stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 5\">\r\n      <div class=\"v5-wrap\">\r\n\r\n        <!-- Success icon -->\r\n        <div class=\"v5-icon\">\r\n          <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M22 11.08V12a10 10 0 11-5.93-9.14\"/>\r\n            <polyline points=\"22 4 12 14.01 9 11.01\"/>\r\n          </svg>\r\n        </div>\r\n\r\n        <h2 class=\"v5-title\">You're all set!</h2>\r\n        <p class=\"v5-sub\">Account created successfully. Next step: complete your profile.</p>\r\n\r\n        <!-- Info cards -->\r\n        <div class=\"v5-cards\">\r\n          <div class=\"v5-card\">\r\n            <div class=\"v5-card-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                <circle cx=\"12\" cy=\"12\" r=\"10\"/>\r\n                <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\r\n                <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\r\n              </svg>\r\n            </div>\r\n            <p class=\"v5-card-text\">Profile completion is mandatory to participate in rosters, programs, requests, and platform workflows. Incomplete profiles will have limited access.</p>\r\n          </div>\r\n          <div class=\"v5-card\">\r\n            <div class=\"v5-card-icon v5-card-icon--green\">\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                <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18M9 21V9\"/>\r\n              </svg>\r\n            </div>\r\n            <p class=\"v5-card-text\">You may access your dashboard at any time, but full functionality is available only after profile completion.</p>\r\n          </div>\r\n        </div>\r\n\r\n        <button (click)=\"dashboard()\" class=\"v5-cta\">\r\n          Go to Dashboard\r\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 10\">\r\n      <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\" [signatureFileId]=\"signatureFileId\"\r\n    [signatureUrl]=\"signatureUrl\"></app-credentialing>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\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      <!-- HEADER -->\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      </div>\r\n\r\n      <!-- SCROLL HINT + PROGRESS -->\r\n      <div class=\"tc-scroll-hint\">\r\n        <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <path d=\"M12 5v14M5 12l7 7 7-7\"/>\r\n        </svg>\r\n        Scroll to the bottom to enable the <strong>&nbsp;Agree&nbsp;</strong> button\r\n        <span class=\"tc-progress-pill\">{{ scrollProgress }}%</span>\r\n      </div>\r\n      <div class=\"tc-progress-bar\">\r\n        <div class=\"tc-progress-fill\" [style.width.%]=\"scrollProgress\"></div>\r\n      </div>\r\n\r\n      <!-- SCROLLABLE CONTENT -->\r\n      <div class=\"tc-scroll-wrapper\">\r\n        <div class=\"tc-modal-body\"\r\n          (scroll)=\"onTermsScroll($event)\"\r\n          (wheel)=\"stopAutoScroll()\"\r\n          (touchstart)=\"stopAutoScroll()\">\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        <!-- Floating scroll-to-bottom button -->\r\n        <button class=\"tc-scroll-fab\" *ngIf=\"!isAgreeEnabled\" (click)=\"scrollToBottomClick($event)\"\r\n          title=\"Scroll to bottom\">\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            <path d=\"M12 5v14M5 15l7 7 7-7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- FOOTER -->\r\n      <div class=\"tc-modal-footer\">\r\n        <button type=\"button\" class=\"tc-btn tc-btn-decline\"\r\n          (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n          Decline\r\n        </button>\r\n        <button type=\"button\" class=\"tc-btn tc-btn-agree\"\r\n          [disabled]=\"!isAgreeEnabled\"\r\n          (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n          I Agree\r\n        </button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";.brand-name{font-weight:700;font-size:calc(100% + 4px)}.spinner{width:38px;height:38px;border:dotted white;border-top:2px solid #f6f6f6;border-radius:62%;animation:spin 1.7s linear infinite;margin:-9px 0 0 -28px}@keyframes spin{to{transform:rotate(360deg)}}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:80px}.container .card{border-radius:1.25rem}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:147px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}.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:22px 28px 20px;background:#4077ad;border-bottom:none;flex-shrink:0}.tc-modal-header .tc-header-icon{width:40px;height:40px;background:#ffffff1f;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#93c5fd;flex-shrink:0}.tc-modal-header .tc-modal-title{font-family:Inter,system-ui,sans-serif;font-size:17px;font-weight:700;color:#fff;letter-spacing:-.01em;margin:0;flex:1}.tc-scroll-hint{display:flex;align-items:center;gap:7px;padding:9px 28px;background:#f0f9ff;border-bottom:none;font-size:12px;color:#4077ad;font-family:Inter,system-ui,sans-serif;letter-spacing:.01em;flex-shrink:0}.tc-scroll-hint svg{flex-shrink:0}.tc-scroll-hint strong{font-weight:700}.tc-scroll-hint .tc-progress-pill{margin-left:auto;background:#4077ad;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 9px;border-radius:99px;min-width:42px;text-align:center;transition:background .2s ease}.tc-progress-bar{height:3px;background:#e0f2fe;flex-shrink:0}.tc-progress-bar .tc-progress-fill{height:100%;background:linear-gradient(90deg,#4077ad,#38bdf8);border-radius:0 99px 99px 0;transition:width .12s ease}.tc-scroll-wrapper{position:relative;flex:1 1 auto;overflow:hidden;display:flex;flex-direction:column}.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-scroll-fab{position:absolute;bottom:20px;right:20px;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#4077ad 0% 100%);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px #4077ad80;z-index:10;animation:tc-fab-bounce 2s ease-in-out infinite;transition:transform .18s ease,box-shadow .18s ease}.tc-scroll-fab:hover{transform:translateY(-3px) scale(1.1);box-shadow:0 8px 24px #4077ad99;animation:none}@keyframes tc-fab-bounce{0%,to{transform:translateY(0);box-shadow:0 4px 18px #2563eb80}50%{transform:translateY(5px);box-shadow:0 2px 10px #2563eb59}}.tc-modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.tc-btn{font-family:Inter,system-ui,sans-serif;font-size:13.5px;font-weight:600;letter-spacing:.015em;padding:10px 26px;border-radius:10px;border:none;cursor:pointer;transition:background .18s ease,box-shadow .18s ease,transform .15s ease}.tc-btn.tc-btn-decline{background:#f1f5f9;color:#64748b;border:1.5px solid #e2e8f0}.tc-btn.tc-btn-decline:hover{background:#e2e8f0;color:#475569}.tc-btn.tc-btn-agree{background:linear-gradient(135deg,#4077ad 0% 100%);color:#fff;box-shadow:0 3px 10px #2563eb59}.tc-btn.tc-btn-agree:hover:not(:disabled){background:linear-gradient(135deg,#2d5f8a,#4077ad);box-shadow:0 5px 16px #2563eb73;transform:translateY(-1px)}.tc-btn.tc-btn-agree:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #4077ad40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:8px;font-size:13px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#64748b;background:#f8fafc;border:1.5px solid #e2e8f0;cursor:pointer;transition:color .18s,background .18s,border-color .18s,box-shadow .18s}.logout-btn:hover{color:#dc2626;background:#fff5f5;border-color:#fca5a5;box-shadow:0 2px 8px #dc26261a}.logout-btn:active{transform:scale(.97)}@media screen and (max-width: 767px){.term-signature{padding-left:3rem;padding-right:0;position:unset;margin:0}.footer-signature{margin-top:0rem}.disabled-btn{position:absolute;bottom:13px;right:24px}.next{height:46px;width:46px;position:absolute;bottom:21px;right:35px}.mob{padding-bottom:4.5rem!important}.checkmark{width:85%}.terms-fixed-modal{width:unset}::ng-deep .privacy-policy-modal .logo-section{margin-bottom:0!important}.add-tab-view{padding:30px 25px 6px;margin-left:0}.user-card{width:96%}.footer .btn-mob{display:flex;align-items:center}.back-btn{position:absolute;bottom:21px;left:10px}.actions{margin:50px 34px 1px}}@media screen and (min-width: 768px) and (max-width: 1024px){.footer-signature{margin-top:3rem}}.v1-welcome{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-welcome-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad;margin-top:2px}.v1-welcome-title{font-size:20px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em}.v1-brand{color:#4077ad}.v1-welcome-sub{font-size:13.5px;color:#374151;line-height:1.65;margin:0}.v1-body{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v1-body{grid-template-columns:1fr;padding:0 16px 16px}}.v1-agreements{display:flex;flex-direction:column;gap:12px}.v1-agreement-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;border:1.5px solid #e2e8f0;background:#fff;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #0000000a}.v1-agreement-card:hover{border-color:#c7d3e2;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:38px;height:38px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;color:#4077ad}.v1-card--agreed .v1-card-icon{background:#d4e8f8;border-color:#b8d4ef;color:#4077ad}.v1-card-body{flex:1 1 auto;min-width:0}.v1-card-title{font-size:13.5px;font-weight:600;color:#0f172a;margin:0 0 2px;line-height:1.3}.v1-card-sub{font-size:11.5px;color:#6b7280;margin:0}.v1-agree-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:8px;font-size:12px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;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}.v1-signature{display:flex;flex-direction:column;gap:10px}.v1-sig-header{display:flex;align-items:center;justify-content:space-between}.v1-sig-label{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#0f172a;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-clear-btn{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;color:#6b7280;background:transparent;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;cursor:pointer;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;transition:color .18s,border-color .18s}.v1-clear-btn:hover{color:#dc2626;border-color:#fca5a5}.v1-sig-pad{position:relative;border-radius:12px;border:1.5px dashed #cbd5e1;background:#f8fafc;overflow:hidden;min-height:110px;display:flex;align-items:center;justify-content:center}.v1-sig-pad canvas{display:block;cursor:crosshair}.v1-sig-pad img{display:block;max-width:100%}.v1-sig-hint{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:10.5px;color:#c0cad8;pointer-events:none;margin:0;white-space:nowrap;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-error-msg{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;color:#dc2626;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-footer{padding:8px 32px 20px;display:flex;justify-content:flex-end;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v1-footer{padding:8px 16px 20px}}.v1-continue-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 28px;border-radius:10px;font-size:14px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad59;transition:transform .15s,box-shadow .15s;min-width:148px;justify-content:center}.v1-continue-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #4077ad73}.v1-continue-btn:active:not(:disabled){transform:translateY(0)}.v1-continue-btn:disabled,.v1-continue-btn.disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.v1-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:v1-spin .65s linear infinite}@keyframes v1-spin{to{transform:rotate(360deg)}}@media (max-width: 767px){.v1-welcome{padding:20px 16px 14px;gap:12px}.v1-welcome-icon{width:40px;height:40px}.v1-welcome-title{font-size:17px}}.v2-header{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-header{padding:20px 16px 14px;gap:12px}}.v2-header-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad;margin-top:2px}.v2-title{font-size:20px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em}.v2-sub{font-size:13.5px;color:#374151;line-height:1.65;margin:0}.v2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;padding:0 32px 24px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));padding:0 16px 20px;gap:10px}}.v2-role-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 12px 16px;border-radius:14px;border:1.5px solid #e2e8f0;background:#fff;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .15s;box-shadow:0 1px 3px #0000000a;text-align:center}.v2-role-card:hover{border-color:#93c5fd;box-shadow:0 4px 16px #4077ad1a;transform:translateY(-2px)}.v2-role-card.v2-role-card--active{border-color:#4077ad;background:#eff6ff;box-shadow:0 0 0 3px #4077ad1f,0 4px 16px #4077ad1f}.v2-role-img-wrap{width:64px;height:64px;border-radius:50%;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background .18s,border-color .18s}.v2-role-img-wrap img{width:44px;height:44px;object-fit:contain;display:block}.v2-role-card--active .v2-role-img-wrap{background:#dbeafe;border-color:#93c5fd}.v2-role-name{font-size:12px;font-weight:600;color:#0f172a;line-height:1.3;text-align:center}.v2-role-card--active .v2-role-name{color:#4077ad}.v2-role-check{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:#4077ad;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #4077ad59}.v2-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 32px 24px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-footer{padding:8px 16px 20px}}.v2-back-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:9px;font-size:13.5px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#6b7280;background:#f8fafc;border:1.5px solid #e2e8f0;cursor:pointer;transition:color .18s,border-color .18s}.v2-back-btn:hover{color:#0f172a;border-color:#94a3b8}.v2-continue-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 24px;border-radius:9px;font-size:13.5px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad4d;transition:transform .15s,box-shadow .15s}.v2-continue-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #4077ad66}.v2-continue-btn:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.ip-header{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 16px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-header{padding:20px 16px 12px;gap:12px}}.ip-header-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad;margin-top:2px}.ip-title{font-size:20px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-sub{font-size:13.5px;color:#374151;line-height:1.65;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-section{margin:0 24px 14px;background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;padding:18px 20px 16px;box-shadow:0 1px 4px #0000000a}@media (max-width: 767px){.ip-section{margin:0 12px 10px;padding:14px}}.ip-section-label{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6b7280;margin:0 0 12px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width: 767px){.ip-grid-2{grid-template-columns:1fr}}.ip-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}@media (max-width: 1024px){.ip-grid-3{grid-template-columns:1fr 1fr}}@media (max-width: 599px){.ip-grid-3{grid-template-columns:1fr}}.ip-grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}@media (max-width: 1024px){.ip-grid-4{grid-template-columns:1fr 1fr}}@media (max-width: 599px){.ip-grid-4{grid-template-columns:1fr}}.ip-field{display:flex;flex-direction:column;gap:5px}.ip-label{font-size:12px;font-weight:600;color:#374151;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;line-height:1.3}.ip-required{color:#dc2626;margin-left:2px;font-weight:700}.ip-input{width:100%;height:44px;padding:0 14px;border:1.5px solid #e2e8f0;border-radius:9px;font-size:13.5px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#0f172a;background:#fff;outline:none;transition:border-color .18s,box-shadow .18s;box-sizing:border-box}.ip-input::placeholder{color:#adb5bd;font-weight:400}.ip-input:focus{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1a}.ip-input.ip-input--invalid{border-color:#dc2626;background:#fff8f8}.ip-input.ip-input--invalid:focus{box-shadow:0 0 0 3px #dc26261a}.ip-input[readonly]{cursor:pointer;background:#f8fafc}.ip-error{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:500;color:#dc2626;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-upload-wrap{position:relative;display:flex;align-items:center}.ip-upload-icon{position:absolute;right:14px;width:16px;height:16px;cursor:pointer;opacity:.45;transition:opacity .18s}.ip-upload-icon:hover{opacity:.85}.ip-copy-row{display:flex;align-items:center;gap:10px;margin:0 24px 12px;padding:11px 16px;background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:10px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-copy-row{margin:0 12px 10px}}.ip-copy-check{width:16px;height:16px;accent-color:#4077AD;cursor:pointer;flex-shrink:0}.ip-copy-label{font-size:13px;font-weight:500;color:#0f172a;cursor:pointer;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none}.ip-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 24px 28px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-footer{padding:8px 16px 24px}}.ip-back-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:9px;font-size:13.5px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#6b7280;background:#f8fafc;border:1.5px solid #e2e8f0;cursor:pointer;transition:color .18s,border-color .18s,background .18s}.ip-back-btn:hover{color:#0f172a;border-color:#94a3b8;background:#f1f5f9}.ip-next-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 26px;border-radius:9px;font-size:13.5px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad4d;transition:transform .15s,box-shadow .15s}.ip-next-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #4077ad66}.ip-next-btn:active:not(:disabled){transform:translateY(0)}.ip-next-btn:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.v5-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 32px 40px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v5-wrap{padding:36px 20px 32px}}.v5-icon{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:1.5px solid #86efac;display:flex;align-items:center;justify-content:center;color:#16a34a;margin-bottom:20px;box-shadow:0 0 0 8px #22c55e14}.v5-title{font-size:26px;font-weight:800;color:#0f172a;margin:0 0 10px;letter-spacing:-.025em;line-height:1.2}.v5-sub{font-size:14px;color:#374151;margin:0 0 28px;line-height:1.6;max-width:480px}.v5-cards{display:flex;flex-direction:column;gap:12px;width:100%;max-width:520px;margin-bottom:32px;text-align:left}.v5-card{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:12px;border:1.5px solid #e2e8f0;background:#f8fafc;box-shadow:0 1px 3px #0000000a}.v5-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#eff6ff;border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad}.v5-card-icon.v5-card-icon--green{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a}.v5-card-text{font-size:13px;color:#374151;line-height:1.6;margin:0}.v5-cta{display:inline-flex;align-items:center;gap:10px;padding:13px 32px;border-radius:10px;font-size:14.5px;font-weight:600;font-family:inherit;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 16px #4077ad52;transition:transform .15s,box-shadow .15s}.v5-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px #4077ad6b}.v5-cta:active{transform:translateY(0)}.cc-select-wrap{margin-bottom:20px}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container{border:1.5px solid #e2e8f0;border-radius:10px;min-height:48px;padding:5px 10px;background:#fff;box-shadow:none;cursor:text;transition:border-color .18s,box-shadow .18s}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container:hover{border-color:#94a3b8}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1a}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap;gap:6px;padding:2px 0}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value{display:inline-flex;flex-direction:row;align-items:center;gap:5px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:99px;padding:4px 8px 4px 13px;font-size:12px;font-weight:600;color:#4077ad;margin:0;line-height:1}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-label{order:1}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon{display:inline-flex;align-items:center;justify-content:center;order:2;width:16px;height:16px;border-radius:50%;font-size:12px;font-weight:700;line-height:1;padding:0;background:#4077ad26;color:#4077ad;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon:hover{background:#4077ad;color:#fff}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon.right{display:none}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-placeholder{font-size:13.5px;color:#adb5bd;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-placeholder{display:none}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-input>input{font-size:13.5px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#0f172a}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-arrow-wrapper{padding-right:6px}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-arrow-wrapper .ng-arrow{border-color:#94a3b8 transparent transparent;border-width:5px 4px 0}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-clear-wrapper{color:#94a3b8}::ng-deep .ng-dropdown-panel{border:1.5px solid #e2e8f0;border-radius:12px;box-shadow:0 8px 28px #0000001a,0 2px 8px #0000000f;overflow:hidden;margin-top:5px;z-index:9999!important;background:#fff!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{padding:6px}::ng-deep .ng-dropdown-panel .ng-option{border-radius:8px;padding:10px 13px;font-size:13.5px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;transition:background .12s}::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#eff6ff;color:#4077ad;font-weight:600}::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked:not(.ng-option-selected){background:#f8fafc;color:#0f172a}::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked{background:#dbeafe}.cc-group{margin-bottom:18px;padding-top:4px}.cc-group:last-child{margin-bottom:0}.cc-hidden-check{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.cc-select-all-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:99px;border:1.5px solid #e2e8f0;background:#f8fafc;font-size:12px;font-weight:700;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;cursor:pointer;-webkit-user-select:none;user-select:none;margin-bottom:10px;transition:background .18s,border-color .18s,color .18s}.cc-select-all-pill:hover:not(.cc-select-all-pill--on){background:#f1f5f9;border-color:#94a3b8}.cc-select-all-pill.cc-select-all-pill--on{background:#0f172a;border-color:#0f172a;color:#fff}.cc-sub-pills{display:flex;flex-wrap:wrap;gap:8px}.cc-sub-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:99px;border:1.5px solid #e2e8f0;background:#fff;font-size:12.5px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}.cc-sub-pill:hover:not(.cc-sub-pill--on){background:#f8fafc;border-color:#94a3b8;color:#0f172a}.cc-sub-pill.cc-sub-pill--on{background:#eff6ff;border-color:#93c5fd;color:#4077ad;font-weight:600;box-shadow:0 0 0 3px #4077ad12}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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.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: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "component", type: TermsConditionsComponent, selector: "app-terms-conditions", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: CredentialingComponent, selector: "app-credentialing", inputs: ["signatureFileId", "signatureUrl", "data"], outputs: ["back"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: InitialProcessComponent, isStandalone: false, selector: "app-initial-process", viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"container\">\r\n  <div class=\"mb-4 logout-container\" *ngIf=\"showlogout\">\r\n    <button class=\"logout-btn\" (click)=\"logout()\">\r\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"\r\n        stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4\"/>\r\n        <polyline points=\"16 17 21 12 16 7\"/>\r\n        <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\r\n      </svg>\r\n      Logout\r\n    </button>\r\n  </div>\r\n  <div class=\"card pb-2 mob pr-5\" style=\"margin-bottom: 30px;\">\r\n    <div [hidden]=\"view !== 1\">\r\n\r\n      <!-- \u2500\u2500 Welcome Banner \u2500\u2500 -->\r\n      <div class=\"v1-welcome\">\r\n        <div class=\"v1-welcome-icon\">\r\n          <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"/>\r\n            <circle cx=\"9\" cy=\"7\" r=\"4\"/>\r\n            <path d=\"M23 21v-2a4 4 0 00-3-3.87\"/>\r\n            <path d=\"M16 3.13a4 4 0 010 7.75\"/>\r\n          </svg>\r\n        </div>\r\n        <div class=\"v1-welcome-text\">\r\n          <h2 class=\"v1-welcome-title\">Welcome to <span class=\"v1-brand\">{{ branding.displayName }}</span></h2>\r\n          <p class=\"v1-welcome-sub\">Our members and service providers rely on accurate info in your profile to connect\r\n            you with work that suits your capabilities. Keep your profile complete, skills updated, licenses current,\r\n            photos and logos professional, and schedule up to date.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Main Body: agreements + signature \u2500\u2500 -->\r\n      <div class=\"v1-body\">\r\n\r\n        <!-- Left: agreement cards -->\r\n        <div class=\"v1-agreements\">\r\n\r\n          <!-- Terms card -->\r\n          <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.acceptTerms\"\r\n            [class.v1-card--invalid]=\"!model.acceptTerms && validatePage==1\">\r\n            <div class=\"v1-card-icon\">\r\n              <svg width=\"20\" height=\"20\" 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            <div class=\"v1-card-body\">\r\n              <p class=\"v1-card-title\">Terms and Conditions</p>\r\n              <p class=\"v1-card-sub\">Read and accept to continue</p>\r\n            </div>\r\n            <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.acceptTerms\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n              <svg *ngIf=\"model.acceptTerms\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"20 6 9 17 4 12\"/>\r\n              </svg>\r\n              {{ model.acceptTerms ? 'Agreed' : 'Read & Agree' }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- Privacy card -->\r\n          <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.privacy\"\r\n            [class.v1-card--invalid]=\"!model.privacy && validatePage==1\">\r\n            <div class=\"v1-card-icon\">\r\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>\r\n              </svg>\r\n            </div>\r\n            <div class=\"v1-card-body\">\r\n              <p class=\"v1-card-title\">Privacy Statement</p>\r\n              <p class=\"v1-card-sub\">Read and accept to continue</p>\r\n            </div>\r\n            <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.privacy\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n              <svg *ngIf=\"model.privacy\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"20 6 9 17 4 12\"/>\r\n              </svg>\r\n              {{ model.privacy ? 'Agreed' : 'Read & Agree' }}\r\n            </button>\r\n          </div>\r\n\r\n        </div>\r\n\r\n        <!-- Right: signature pad -->\r\n        <div class=\"v1-signature\">\r\n          <div class=\"v1-sig-header\">\r\n            <span class=\"v1-sig-label\">\r\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M17 3a2.828 2.828 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z\"/>\r\n              </svg>\r\n              Signature\r\n            </span>\r\n            <button (click)=\"clearPad()\" class=\"v1-clear-btn\">\r\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n              </svg>\r\n              Clear\r\n            </button>\r\n          </div>\r\n          <div class=\"v1-sig-pad\">\r\n            <div [ngClass]=\"{'d-none': signaturePadData?.publicUrl}\">\r\n              <canvas #canvas [width]=\"255\" [height]=\"90\"></canvas>\r\n            </div>\r\n            <div [ngClass]=\"{'d-none': !signaturePadData?.publicUrl}\">\r\n              <img [width]=\"255\" [height]=\"120\" [src]=\"signaturePadData?.publicUrl\" alt style=\"position:relative\">\r\n            </div>\r\n            <p class=\"v1-sig-hint\" *ngIf=\"!signaturePadData?.publicUrl && (!points || !points?.length)\">\r\n              Draw your signature here\r\n            </p>\r\n          </div>\r\n          <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length==0) && !fileData\"\r\n            class=\"v1-error-msg\">\r\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\r\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\r\n            </svg>\r\n            Signature is required\r\n          </div>\r\n          <div *ngIf=\"uploadError\" class=\"v1-error-msg\">{{ uploadError }}</div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Continue Button \u2500\u2500 -->\r\n      <div class=\"v1-footer\">\r\n        <button class=\"v1-continue-btn\" (click)=\"next(2)\"\r\n          [disabled]=\"((!points || !points?.length || points.length==0) && !fileData) || !model.acceptTerms || !model.privacy\">\r\n          <span *ngIf=\"!showLoader\">Continue</span>\r\n          <span *ngIf=\"showLoader\" class=\"v1-spinner\"></span>\r\n          <svg *ngIf=\"!showLoader\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n            stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n    </div>\r\n    <ng-container *ngIf=\"view == 2\">\r\n\r\n      <!-- \u2500\u2500 Role-select header \u2500\u2500 -->\r\n      <div class=\"v2-header\">\r\n        <div class=\"v2-header-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <circle cx=\"12\" cy=\"8\" r=\"4\"/>\r\n            <path d=\"M6 20v-2a4 4 0 014-4h4a4 4 0 014 4v2\"/>\r\n          </svg>\r\n        </div>\r\n        <div>\r\n          <h2 class=\"v2-title\">Choose your role</h2>\r\n          <p class=\"v2-sub\">Choose the areas you'd like to be part of \u2014 programs, services, events, or\r\n            collaborations. Connect your business to others and prospective clients.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Role cards grid \u2500\u2500 -->\r\n      <div class=\"v2-grid\">\r\n        <ng-container *ngFor=\"let userType of userViewRoles\">\r\n          <div class=\"v2-role-card\" [class.v2-role-card--active]=\"userType.value === selectedRoleValue\"\r\n            (click)=\"selectedUserRole(userType)\">\r\n            <div class=\"v2-role-img-wrap\">\r\n              <img [src]=\"userType?.img\" alt=\"\">\r\n            </div>\r\n            <span class=\"v2-role-name\">{{userType.name}}</span>\r\n            <span class=\"v2-role-check\" *ngIf=\"userType.value === selectedRoleValue\">\r\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"20 6 9 17 4 12\"/>\r\n              </svg>\r\n            </span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Footer: Back + Continue \u2500\u2500 -->\r\n      <div class=\"v2-footer\">\r\n        <button class=\"v2-back-btn\" (click)=\"previous()\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n          </svg>\r\n          Back\r\n        </button>\r\n        <button class=\"v2-continue-btn\" (click)=\"next(3)\" [disabled]=\"!isUserSelected || isLoadingSubCategories\">\r\n          <span *ngIf=\"isLoadingSubCategories\" class=\"v1-spinner\"></span>\r\n          <ng-container *ngIf=\"!isLoadingSubCategories\">\r\n            Continue\r\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n            </svg>\r\n          </ng-container>\r\n        </button>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 3\">\r\n\r\n      <!-- Header -->\r\n      <div class=\"ip-header\">\r\n        <div class=\"ip-header-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z\"/>\r\n            <polyline points=\"9 22 9 12 15 12 15 22\"/>\r\n          </svg>\r\n        </div>\r\n        <div>\r\n          <h2 class=\"ip-title\">Business Information</h2>\r\n          <p class=\"ip-sub\">Tell us about your company so we can connect you with the right work.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <form [formGroup]=\"companyForm\">\r\n\r\n        <!-- Company Details -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Company Details</p>\r\n          <div class=\"ip-grid-2\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"companyName\">Company Name <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': (f.companyName.errors && validatePage == 3) || providerError}\"\r\n                type=\"text\" class=\"ip-input\" id=\"companyName\" placeholder=\"Company Name\"\r\n                formControlName=\"companyName\">\r\n              <span *ngIf=\"f.companyName.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.companyName.errors.required\">Company Name is required</span>\r\n                <span *ngIf=\"f.companyName.errors.minlength\">Minimum 2 characters</span>\r\n                <span *ngIf=\"f.companyName.errors.maxLength\">Maximum 100 characters</span>\r\n              </span>\r\n              <span *ngIf=\"providerError\" class=\"ip-error\">{{ providerError }}</span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"inputPhone\">Phone Number <span class=\"ip-required\">*</span></label>\r\n              <input class=\"ip-input\" type=\"text\" name=\"inputPhone\" placeholder=\"Company Phone Number\"\r\n                id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\" [maxLength]=\"14\"\r\n                (input)=\"formatPhone($event,companyForm)\"\r\n                [ngClass]=\"{'ip-input--invalid': (f.phoneNumber.errors && validatePage == 3) || providerError}\">\r\n              <span *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.phoneNumber.errors.required\">Phone Number is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Address -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Address</p>\r\n          <div class=\"ip-grid-2\" style=\"margin-bottom: 12px;\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"businessAddress\">Address Line 1 <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': f.address1.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n                (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n              <span *ngIf=\"f.address1.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.address1.errors.required\">Business Address 1 is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"businessAddress2\">Address Line 2</label>\r\n              <input type=\"text\" class=\"ip-input\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n            </div>\r\n          </div>\r\n          <div class=\"ip-grid-4\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"City\">City <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': f.city.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n              <span *ngIf=\"f.city.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.city.errors.required\">City is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"State\">State <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': f.state.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n              <span *ngIf=\"f.state.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.state.errors.required\">State is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Zipcode\">Zipcode <span class=\"ip-required\">*</span></label>\r\n              <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                [ngClass]=\"{'ip-input--invalid': f.zipcode.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n              <span *ngIf=\"f.zipcode.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.zipcode.errors.required\">Zipcode is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Country\">Country <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': f.country.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n              <span *ngIf=\"f.country.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.country.errors.required\">Country is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </form>\r\n\r\n      <!-- Company Logo (intentionally outside formGroup) -->\r\n      <div class=\"ip-section\">\r\n        <p class=\"ip-section-label\">Company Logo</p>\r\n        <div class=\"ip-field\">\r\n          <label class=\"ip-label\">Company Logo <span class=\"ip-required\">*</span></label>\r\n          <div class=\"ip-upload-wrap\">\r\n            <input #uploadLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadLogo($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\"\r\n              class=\"ip-input\" placeholder=\"Click to upload company logo\">\r\n            <img #uploadImage2 class=\"ip-upload-icon\" (click)=\"uploadLogoInput.click()\"\r\n              src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n          </div>\r\n          <span *ngIf=\"isLogoRequired\" class=\"ip-error\">Please upload a company logo</span>\r\n          <span *ngIf=\"isneeded\" class=\"ip-error\">Company Logo is required</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Contractor Category -->\r\n      <div *ngIf=\"selectedRole?.name == 'Contractor'\" class=\"ip-section\">\r\n        <p class=\"ip-section-label\">Contractor Category</p>\r\n\r\n        <!-- Category selector \u2014 ng-select logic intact, restyled as pill tag-input -->\r\n        <div class=\"cc-select-wrap\">\r\n          <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n            (ngModelChange)=\"changeContractor($event)\" [(ngModel)]=\"selectedContractorCategories\"\r\n            >\r\n          </ng-select>\r\n        </div>\r\n\r\n        <!-- Sub-items as pill chips per selected category -->\r\n        <ng-container *ngFor=\"let item of selectedContractorCategories; let i=index\">\r\n          <div class=\"cc-group\">\r\n\r\n            <!-- \"Select all\" toggle pill for this category -->\r\n            <label class=\"cc-select-all-pill\" [class.cc-select-all-pill--on]=\"item.selectAll\">\r\n              <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n                (change)=\"selectAll($event,item?.items)\" class=\"cc-hidden-check\">\r\n              <svg *ngIf=\"item.selectAll\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"20 6 9 17 4 12\"/>\r\n              </svg>\r\n              {{ item?.name }} \u2014 Select all\r\n            </label>\r\n\r\n            <!-- Individual sub-item pills -->\r\n            <div class=\"cc-sub-pills\">\r\n              <label *ngFor=\"let subItem of item?.items\" class=\"cc-sub-pill\"\r\n                [class.cc-sub-pill--on]=\"subItem.selected\">\r\n                <input type=\"checkbox\" [(ngModel)]=\"subItem.selected\" [name]=\"subItem?.id\" [id]=\"subItem?.id\"\r\n                  (change)=\"unCheckedEvent($event,item)\" class=\"cc-hidden-check\">\r\n                <svg *ngIf=\"subItem.selected\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                  stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                  <polyline points=\"20 6 9 17 4 12\"/>\r\n                </svg>\r\n                {{ subItem?.name }}\r\n              </label>\r\n            </div>\r\n\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- Footer -->\r\n      <div class=\"ip-footer\">\r\n        <button class=\"ip-back-btn\" (click)=\"previous()\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n          </svg>\r\n          Back\r\n        </button>\r\n        <button class=\"ip-next-btn\" (click)=\"next(4)\">\r\n          Continue\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 4\">\r\n\r\n      <!-- Header -->\r\n      <div class=\"ip-header\">\r\n        <div class=\"ip-header-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <circle cx=\"12\" cy=\"8\" r=\"4\"/>\r\n            <path d=\"M6 20v-2a4 4 0 014-4h4a4 4 0 014 4v2\"/>\r\n          </svg>\r\n        </div>\r\n        <div>\r\n          <h2 class=\"ip-title\">Your Profile</h2>\r\n          <p class=\"ip-sub\">We need a few basics and a headshot to complete your profile.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Copy from provider toggle -->\r\n      <div *ngIf=\"isBusiness\" class=\"ip-copy-row\">\r\n        <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\"\r\n          class=\"ip-copy-check\" (change)=\"changeAddressUser()\">\r\n        <label for=\"isCopy\" class=\"ip-copy-label\">Copy from Provider Information</label>\r\n      </div>\r\n\r\n      <form [formGroup]=\"userForm\">\r\n\r\n        <!-- Personal Details -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Personal Details</p>\r\n          <div class=\"ip-grid-3\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"firstName\">First Name <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.firstName.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n              <span *ngIf=\"u.firstName.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.firstName.errors.required\">First Name is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"lastName\">Last Name <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.lastName.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n              <span *ngIf=\"u.lastName.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.lastName.errors.required\">Last Name is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"email\">Email <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.email.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n              <span *ngIf=\"u.email.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.email.errors.required\">Email is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Home Address -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Home Address</p>\r\n          <div class=\"ip-field\" style=\"margin-bottom: 12px;\">\r\n            <label class=\"ip-label\" for=\"address1\">Address Line 1 <span class=\"ip-required\">*</span></label>\r\n            <input [ngClass]=\"{'ip-input--invalid': u.address1.errors && validatePage == 4}\"\r\n              [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"ip-input\"\r\n              placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n            <span *ngIf=\"u.address1.errors && validatePage == 4\" class=\"ip-error\">\r\n              <span *ngIf=\"u.address1.errors.required\">Home Address 1 is required</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"ip-grid-3\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"homeAddress2\">Address Line 2</label>\r\n              <input type=\"text\" class=\"ip-input\" id=\"homeAddress2\" formControlName=\"address2\"\r\n                placeholder=\"Home Address 2\">\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"City\">City <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.city.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n              <span *ngIf=\"u.city.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.city.errors.required\">City is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"State\">State <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.state.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n              <span *ngIf=\"u.state.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.state.errors.required\">State is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Zipcode\">Zipcode <span class=\"ip-required\">*</span></label>\r\n              <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                [ngClass]=\"{'ip-input--invalid': u.zipcode.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n              <span *ngIf=\"u.zipcode.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.zipcode.errors.required\">Zipcode is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Country\">Country <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.country.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n              <span *ngIf=\"u.country.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.country.errors.required\">Country is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"inputPhone\">Phone Number <span class=\"ip-required\">*</span></label>\r\n              <input class=\"ip-input\" type=\"text\" (input)=\"formatPhone($event,userForm)\"\r\n                name=\"inputPhone\" placeholder=\"Phone Number\" id=\"inputPhone\" autocomplete=\"off\"\r\n                formControlName=\"phoneNumber\" [maxLength]=\"14\"\r\n                [ngClass]=\"{'ip-input--invalid': u.phoneNumber.errors && validatePage == 4}\">\r\n              <span *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.phoneNumber.errors.required\">Phone Number is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </form>\r\n\r\n      <!-- Profile Picture (intentionally outside formGroup) -->\r\n      <div class=\"ip-section\">\r\n        <p class=\"ip-section-label\">Profile Picture</p>\r\n        <div class=\"ip-field\">\r\n          <label class=\"ip-label\">Profile Picture <span class=\"ip-required\">*</span></label>\r\n          <div class=\"ip-upload-wrap\">\r\n            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadUserImage($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\"\r\n              class=\"ip-input\" id=\"upload\" accept=\".png,.jpg,.jpeg\" placeholder=\"Click to upload profile picture\">\r\n            <img #uploadImage1 class=\"ip-upload-icon\" (click)=\"uploadFile.click()\"\r\n              src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n          </div>\r\n          <span *ngIf=\"isImageRequired\" class=\"ip-error\">Please upload a profile image</span>\r\n          <span *ngIf=\"userError\" class=\"ip-error\">{{ userError }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Footer -->\r\n      <div class=\"ip-footer\">\r\n        <button class=\"ip-back-btn\" (click)=\"previous()\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n          </svg>\r\n          Back\r\n        </button>\r\n        <button class=\"ip-next-btn\" (click)=\"next(5)\" [disabled]=\"showLoader\">\r\n          <span *ngIf=\"!showLoader\">Continue</span>\r\n          <span *ngIf=\"showLoader\" class=\"v1-spinner\"></span>\r\n          <svg *ngIf=\"!showLoader\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n            stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 5\">\r\n      <div class=\"v5-wrap\">\r\n\r\n        <!-- Success icon -->\r\n        <div class=\"v5-icon\">\r\n          <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M22 11.08V12a10 10 0 11-5.93-9.14\"/>\r\n            <polyline points=\"22 4 12 14.01 9 11.01\"/>\r\n          </svg>\r\n        </div>\r\n\r\n        <h2 class=\"v5-title\">You're all set!</h2>\r\n        <p class=\"v5-sub\">Account created successfully. Next step: complete your profile.</p>\r\n\r\n        <!-- Info cards -->\r\n        <div class=\"v5-cards\">\r\n          <div class=\"v5-card\">\r\n            <div class=\"v5-card-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                <circle cx=\"12\" cy=\"12\" r=\"10\"/>\r\n                <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\r\n                <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\r\n              </svg>\r\n            </div>\r\n            <p class=\"v5-card-text\">Profile completion is mandatory to participate in rosters, programs, requests, and platform workflows. Incomplete profiles will have limited access.</p>\r\n          </div>\r\n          <div class=\"v5-card\">\r\n            <div class=\"v5-card-icon v5-card-icon--green\">\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                <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18M9 21V9\"/>\r\n              </svg>\r\n            </div>\r\n            <p class=\"v5-card-text\">You may access your dashboard at any time, but full functionality is available only after profile completion.</p>\r\n          </div>\r\n        </div>\r\n\r\n        <button (click)=\"dashboard()\" class=\"v5-cta\">\r\n          Go to Dashboard\r\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 10\">\r\n      <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\" [signatureFileId]=\"signatureFileId\"\r\n    [signatureUrl]=\"signatureUrl\"></app-credentialing>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\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      <!-- HEADER -->\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      </div>\r\n\r\n      <!-- SCROLL HINT + PROGRESS -->\r\n      <div class=\"tc-scroll-hint\">\r\n        <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <path d=\"M12 5v14M5 12l7 7 7-7\"/>\r\n        </svg>\r\n        Scroll to the bottom to enable the <strong>&nbsp;Agree&nbsp;</strong> button\r\n        <span class=\"tc-progress-pill\">{{ scrollProgress }}%</span>\r\n      </div>\r\n      <div class=\"tc-progress-bar\">\r\n        <div class=\"tc-progress-fill\" [style.width.%]=\"scrollProgress\"></div>\r\n      </div>\r\n\r\n      <!-- SCROLLABLE CONTENT -->\r\n      <div class=\"tc-scroll-wrapper\">\r\n        <div class=\"tc-modal-body\"\r\n          (scroll)=\"onTermsScroll($event)\"\r\n          (wheel)=\"stopAutoScroll()\"\r\n          (touchstart)=\"stopAutoScroll()\">\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        <!-- Floating scroll-to-bottom button -->\r\n        <button class=\"tc-scroll-fab\" *ngIf=\"!isAgreeEnabled\" (click)=\"scrollToBottomClick($event)\"\r\n          title=\"Scroll to bottom\">\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            <path d=\"M12 5v14M5 15l7 7 7-7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- FOOTER -->\r\n      <div class=\"tc-modal-footer\">\r\n        <button type=\"button\" class=\"tc-btn tc-btn-decline\"\r\n          (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n          Decline\r\n        </button>\r\n        <button type=\"button\" class=\"tc-btn tc-btn-agree\"\r\n          [disabled]=\"!isAgreeEnabled\"\r\n          (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n          I Agree\r\n        </button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";.brand-name{font-weight:700;font-size:calc(100% + 4px)}.spinner{width:38px;height:38px;border:dotted white;border-top:2px solid #f6f6f6;border-radius:62%;animation:spin 1.7s linear infinite;margin:-9px 0 0 -28px}@keyframes spin{to{transform:rotate(360deg)}}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:80px}.container .card{border-radius:1.25rem}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:147px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}.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:22px 28px 20px;background:#4077ad;border-bottom:none;flex-shrink:0}.tc-modal-header .tc-header-icon{width:40px;height:40px;background:#ffffff1f;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#93c5fd;flex-shrink:0}.tc-modal-header .tc-modal-title{font-family:Inter,system-ui,sans-serif;font-size:17px;font-weight:700;color:#fff;letter-spacing:-.01em;margin:0;flex:1}.tc-scroll-hint{display:flex;align-items:center;gap:7px;padding:9px 28px;background:#f0f9ff;border-bottom:none;font-size:12px;color:#4077ad;font-family:Inter,system-ui,sans-serif;letter-spacing:.01em;flex-shrink:0}.tc-scroll-hint svg{flex-shrink:0}.tc-scroll-hint strong{font-weight:700}.tc-scroll-hint .tc-progress-pill{margin-left:auto;background:#4077ad;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 9px;border-radius:99px;min-width:42px;text-align:center;transition:background .2s ease}.tc-progress-bar{height:3px;background:#e0f2fe;flex-shrink:0}.tc-progress-bar .tc-progress-fill{height:100%;background:linear-gradient(90deg,#4077ad,#38bdf8);border-radius:0 99px 99px 0;transition:width .12s ease}.tc-scroll-wrapper{position:relative;flex:1 1 auto;overflow:hidden;display:flex;flex-direction:column}.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-scroll-fab{position:absolute;bottom:20px;right:20px;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#4077ad 0% 100%);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px #4077ad80;z-index:10;animation:tc-fab-bounce 2s ease-in-out infinite;transition:transform .18s ease,box-shadow .18s ease}.tc-scroll-fab:hover{transform:translateY(-3px) scale(1.1);box-shadow:0 8px 24px #4077ad99;animation:none}@keyframes tc-fab-bounce{0%,to{transform:translateY(0);box-shadow:0 4px 18px #2563eb80}50%{transform:translateY(5px);box-shadow:0 2px 10px #2563eb59}}.tc-modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.tc-btn{font-family:Inter,system-ui,sans-serif;font-size:13.5px;font-weight:600;letter-spacing:.015em;padding:10px 26px;border-radius:10px;border:none;cursor:pointer;transition:background .18s ease,box-shadow .18s ease,transform .15s ease}.tc-btn.tc-btn-decline{background:#f1f5f9;color:#64748b;border:1.5px solid #e2e8f0}.tc-btn.tc-btn-decline:hover{background:#e2e8f0;color:#475569}.tc-btn.tc-btn-agree{background:linear-gradient(135deg,#4077ad 0% 100%);color:#fff;box-shadow:0 3px 10px #2563eb59}.tc-btn.tc-btn-agree:hover:not(:disabled){background:linear-gradient(135deg,#2d5f8a,#4077ad);box-shadow:0 5px 16px #2563eb73;transform:translateY(-1px)}.tc-btn.tc-btn-agree:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #4077ad40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:8px;font-size:13px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#64748b;background:#f8fafc;border:1.5px solid #e2e8f0;cursor:pointer;transition:color .18s,background .18s,border-color .18s,box-shadow .18s}.logout-btn:hover{color:#dc2626;background:#fff5f5;border-color:#fca5a5;box-shadow:0 2px 8px #dc26261a}.logout-btn:active{transform:scale(.97)}@media screen and (max-width: 767px){.term-signature{padding-left:3rem;padding-right:0;position:unset;margin:0}.footer-signature{margin-top:0rem}.disabled-btn{position:absolute;bottom:13px;right:24px}.next{height:46px;width:46px;position:absolute;bottom:21px;right:35px}.mob{padding-bottom:4.5rem!important}.checkmark{width:85%}.terms-fixed-modal{width:unset}::ng-deep .privacy-policy-modal .logo-section{margin-bottom:0!important}.add-tab-view{padding:30px 25px 6px;margin-left:0}.user-card{width:96%}.footer .btn-mob{display:flex;align-items:center}.back-btn{position:absolute;bottom:21px;left:10px}.actions{margin:50px 34px 1px}}@media screen and (min-width: 768px) and (max-width: 1024px){.footer-signature{margin-top:3rem}}.v1-welcome{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-welcome-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad;margin-top:2px}.v1-welcome-title{font-size:20px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em}.v1-brand{color:#4077ad}.v1-welcome-sub{font-size:13.5px;color:#374151;line-height:1.65;margin:0}.v1-body{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v1-body{grid-template-columns:1fr;padding:0 16px 16px}}.v1-agreements{display:flex;flex-direction:column;gap:12px}.v1-agreement-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;border:1.5px solid #e2e8f0;background:#fff;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #0000000a}.v1-agreement-card:hover{border-color:#c7d3e2;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:38px;height:38px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;color:#4077ad}.v1-card--agreed .v1-card-icon{background:#d4e8f8;border-color:#b8d4ef;color:#4077ad}.v1-card-body{flex:1 1 auto;min-width:0}.v1-card-title{font-size:13.5px;font-weight:600;color:#0f172a;margin:0 0 2px;line-height:1.3}.v1-card-sub{font-size:11.5px;color:#6b7280;margin:0}.v1-agree-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:8px;font-size:12px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;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}.v1-signature{display:flex;flex-direction:column;gap:10px}.v1-sig-header{display:flex;align-items:center;justify-content:space-between}.v1-sig-label{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#0f172a;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-clear-btn{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;color:#6b7280;background:transparent;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;cursor:pointer;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;transition:color .18s,border-color .18s}.v1-clear-btn:hover{color:#dc2626;border-color:#fca5a5}.v1-sig-pad{position:relative;border-radius:12px;border:1.5px dashed #cbd5e1;background:#f8fafc;overflow:hidden;min-height:110px;display:flex;align-items:center;justify-content:center}.v1-sig-pad canvas{display:block;cursor:crosshair}.v1-sig-pad img{display:block;max-width:100%}.v1-sig-hint{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:10.5px;color:#c0cad8;pointer-events:none;margin:0;white-space:nowrap;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-error-msg{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;color:#dc2626;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-footer{padding:8px 32px 20px;display:flex;justify-content:flex-end;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v1-footer{padding:8px 16px 20px}}.v1-continue-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 28px;border-radius:10px;font-size:14px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad59;transition:transform .15s,box-shadow .15s;min-width:148px;justify-content:center}.v1-continue-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #4077ad73}.v1-continue-btn:active:not(:disabled){transform:translateY(0)}.v1-continue-btn:disabled,.v1-continue-btn.disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.v1-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:v1-spin .65s linear infinite}@keyframes v1-spin{to{transform:rotate(360deg)}}@media (max-width: 767px){.v1-welcome{padding:20px 16px 14px;gap:12px}.v1-welcome-icon{width:40px;height:40px}.v1-welcome-title{font-size:17px}}.v2-header{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-header{padding:20px 16px 14px;gap:12px}}.v2-header-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad;margin-top:2px}.v2-title{font-size:20px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em}.v2-sub{font-size:13.5px;color:#374151;line-height:1.65;margin:0}.v2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;padding:0 32px 24px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));padding:0 16px 20px;gap:10px}}.v2-role-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 12px 16px;border-radius:14px;border:1.5px solid #e2e8f0;background:#fff;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .15s;box-shadow:0 1px 3px #0000000a;text-align:center}.v2-role-card:hover{border-color:#93c5fd;box-shadow:0 4px 16px #4077ad1a;transform:translateY(-2px)}.v2-role-card.v2-role-card--active{border-color:#4077ad;background:#eff6ff;box-shadow:0 0 0 3px #4077ad1f,0 4px 16px #4077ad1f}.v2-role-img-wrap{width:64px;height:64px;border-radius:50%;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background .18s,border-color .18s}.v2-role-img-wrap img{width:44px;height:44px;object-fit:contain;display:block}.v2-role-card--active .v2-role-img-wrap{background:#dbeafe;border-color:#93c5fd}.v2-role-name{font-size:12px;font-weight:600;color:#0f172a;line-height:1.3;text-align:center}.v2-role-card--active .v2-role-name{color:#4077ad}.v2-role-check{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:#4077ad;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #4077ad59}.v2-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 32px 24px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-footer{padding:8px 16px 20px}}.v2-back-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:9px;font-size:13.5px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#6b7280;background:#f8fafc;border:1.5px solid #e2e8f0;cursor:pointer;transition:color .18s,border-color .18s}.v2-back-btn:hover{color:#0f172a;border-color:#94a3b8}.v2-continue-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 24px;border-radius:9px;font-size:13.5px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad4d;transition:transform .15s,box-shadow .15s}.v2-continue-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #4077ad66}.v2-continue-btn:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.ip-header{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 16px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-header{padding:20px 16px 12px;gap:12px}}.ip-header-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad;margin-top:2px}.ip-title{font-size:20px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-sub{font-size:13.5px;color:#374151;line-height:1.65;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-section{margin:0 24px 14px;background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;padding:18px 20px 16px;box-shadow:0 1px 4px #0000000a}@media (max-width: 767px){.ip-section{margin:0 12px 10px;padding:14px}}.ip-section-label{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6b7280;margin:0 0 12px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width: 767px){.ip-grid-2{grid-template-columns:1fr}}.ip-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}@media (max-width: 1024px){.ip-grid-3{grid-template-columns:1fr 1fr}}@media (max-width: 599px){.ip-grid-3{grid-template-columns:1fr}}.ip-grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}@media (max-width: 1024px){.ip-grid-4{grid-template-columns:1fr 1fr}}@media (max-width: 599px){.ip-grid-4{grid-template-columns:1fr}}.ip-field{display:flex;flex-direction:column;gap:5px}.ip-label{font-size:12px;font-weight:600;color:#374151;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;line-height:1.3}.ip-required{color:#dc2626;margin-left:2px;font-weight:700}.ip-input{width:100%;height:44px;padding:0 14px;border:1.5px solid #e2e8f0;border-radius:9px;font-size:13.5px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#0f172a;background:#fff;outline:none;transition:border-color .18s,box-shadow .18s;box-sizing:border-box}.ip-input::placeholder{color:#adb5bd;font-weight:400}.ip-input:focus{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1a}.ip-input.ip-input--invalid{border-color:#dc2626;background:#fff8f8}.ip-input.ip-input--invalid:focus{box-shadow:0 0 0 3px #dc26261a}.ip-input[readonly]{cursor:pointer;background:#f8fafc}.ip-error{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:500;color:#dc2626;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-upload-wrap{position:relative;display:flex;align-items:center}.ip-upload-icon{position:absolute;right:14px;width:16px;height:16px;cursor:pointer;opacity:.45;transition:opacity .18s}.ip-upload-icon:hover{opacity:.85}.ip-copy-row{display:flex;align-items:center;gap:10px;margin:0 24px 12px;padding:11px 16px;background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:10px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-copy-row{margin:0 12px 10px}}.ip-copy-check{width:16px;height:16px;accent-color:#4077AD;cursor:pointer;flex-shrink:0}.ip-copy-label{font-size:13px;font-weight:500;color:#0f172a;cursor:pointer;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none}.ip-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 24px 28px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-footer{padding:8px 16px 24px}}.ip-back-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:9px;font-size:13.5px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#6b7280;background:#f8fafc;border:1.5px solid #e2e8f0;cursor:pointer;transition:color .18s,border-color .18s,background .18s}.ip-back-btn:hover{color:#0f172a;border-color:#94a3b8;background:#f1f5f9}.ip-next-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 26px;border-radius:9px;font-size:13.5px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad4d;transition:transform .15s,box-shadow .15s}.ip-next-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #4077ad66}.ip-next-btn:active:not(:disabled){transform:translateY(0)}.ip-next-btn:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.v5-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 32px 40px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v5-wrap{padding:36px 20px 32px}}.v5-icon{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:1.5px solid #86efac;display:flex;align-items:center;justify-content:center;color:#16a34a;margin-bottom:20px;box-shadow:0 0 0 8px #22c55e14}.v5-title{font-size:26px;font-weight:800;color:#0f172a;margin:0 0 10px;letter-spacing:-.025em;line-height:1.2}.v5-sub{font-size:14px;color:#374151;margin:0 0 28px;line-height:1.6;max-width:480px}.v5-cards{display:flex;flex-direction:column;gap:12px;width:100%;max-width:520px;margin-bottom:32px;text-align:left}.v5-card{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:12px;border:1.5px solid #e2e8f0;background:#f8fafc;box-shadow:0 1px 3px #0000000a}.v5-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#eff6ff;border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad}.v5-card-icon.v5-card-icon--green{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a}.v5-card-text{font-size:13px;color:#374151;line-height:1.6;margin:0}.v5-cta{display:inline-flex;align-items:center;gap:10px;padding:13px 32px;border-radius:10px;font-size:14.5px;font-weight:600;font-family:inherit;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 16px #4077ad52;transition:transform .15s,box-shadow .15s}.v5-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px #4077ad6b}.v5-cta:active{transform:translateY(0)}.cc-select-wrap{margin-bottom:20px}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container{border:1.5px solid #e2e8f0;border-radius:10px;min-height:48px;padding:5px 10px;background:#fff;box-shadow:none;cursor:text;transition:border-color .18s,box-shadow .18s}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container:hover{border-color:#94a3b8}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1a}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap;gap:6px;padding:2px 0}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value{display:inline-flex;flex-direction:row;align-items:center;gap:5px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:99px;padding:4px 8px 4px 13px;font-size:12px;font-weight:600;color:#4077ad;margin:0;line-height:1}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-label{order:1}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon{display:inline-flex;align-items:center;justify-content:center;order:2;width:16px;height:16px;border-radius:50%;font-size:12px;font-weight:700;line-height:1;padding:0;background:#4077ad26;color:#4077ad;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon:hover{background:#4077ad;color:#fff}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon.right{display:none}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-placeholder{font-size:13.5px;color:#adb5bd;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-placeholder{display:none}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-input>input{font-size:13.5px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#0f172a}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-arrow-wrapper{padding-right:6px}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-arrow-wrapper .ng-arrow{border-color:#94a3b8 transparent transparent;border-width:5px 4px 0}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-clear-wrapper{color:#94a3b8}::ng-deep .ng-dropdown-panel{border:1.5px solid #e2e8f0;border-radius:12px;box-shadow:0 8px 28px #0000001a,0 2px 8px #0000000f;overflow:hidden;margin-top:5px;z-index:9999!important;background:#fff!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{padding:6px}::ng-deep .ng-dropdown-panel .ng-option{border-radius:8px;padding:10px 13px;font-size:13.5px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;transition:background .12s}::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#eff6ff;color:#4077ad;font-weight:600}::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked:not(.ng-option-selected){background:#f8fafc;color:#0f172a}::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked{background:#dbeafe}.cc-group{margin-bottom:18px;padding-top:4px}.cc-group:last-child{margin-bottom:0}.cc-hidden-check{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.cc-select-all-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:99px;border:1.5px solid #e2e8f0;background:#f8fafc;font-size:12px;font-weight:700;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;cursor:pointer;-webkit-user-select:none;user-select:none;margin-bottom:10px;transition:background .18s,border-color .18s,color .18s}.cc-select-all-pill:hover:not(.cc-select-all-pill--on){background:#f1f5f9;border-color:#94a3b8}.cc-select-all-pill.cc-select-all-pill--on{background:#0f172a;border-color:#0f172a;color:#fff}.cc-sub-pills{display:flex;flex-wrap:wrap;gap:8px}.cc-sub-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:99px;border:1.5px solid #e2e8f0;background:#fff;font-size:12.5px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}.cc-sub-pill:hover:not(.cc-sub-pill--on){background:#f8fafc;border-color:#94a3b8;color:#0f172a}.cc-sub-pill.cc-sub-pill--on{background:#eff6ff;border-color:#93c5fd;color:#4077ad;font-weight:600;box-shadow:0 0 0 3px #4077ad12}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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.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: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "component", type: TermsConditionsComponent, selector: "app-terms-conditions", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: CredentialingComponent, selector: "app-credentialing", inputs: ["signatureFileId", "signatureUrl", "data"], outputs: ["back"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InitialProcessComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-initial-process', standalone: false, template: "<div class=\"container\">\r\n  <div class=\"mb-4 logout-container\" *ngIf=\"showlogout\">\r\n    <button class=\"logout-btn\" (click)=\"logout()\">\r\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"\r\n        stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4\"/>\r\n        <polyline points=\"16 17 21 12 16 7\"/>\r\n        <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\r\n      </svg>\r\n      Logout\r\n    </button>\r\n  </div>\r\n  <div class=\"card pb-2 mob pr-5\" style=\"margin-bottom: 30px;\">\r\n    <div [hidden]=\"view !== 1\">\r\n\r\n      <!-- \u2500\u2500 Welcome Banner \u2500\u2500 -->\r\n      <div class=\"v1-welcome\">\r\n        <div class=\"v1-welcome-icon\">\r\n          <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"/>\r\n            <circle cx=\"9\" cy=\"7\" r=\"4\"/>\r\n            <path d=\"M23 21v-2a4 4 0 00-3-3.87\"/>\r\n            <path d=\"M16 3.13a4 4 0 010 7.75\"/>\r\n          </svg>\r\n        </div>\r\n        <div class=\"v1-welcome-text\">\r\n          <h2 class=\"v1-welcome-title\">Welcome to <span class=\"v1-brand\">{{ branding.displayName }}</span></h2>\r\n          <p class=\"v1-welcome-sub\">Our members and service providers rely on accurate info in your profile to connect\r\n            you with work that suits your capabilities. Keep your profile complete, skills updated, licenses current,\r\n            photos and logos professional, and schedule up to date.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Main Body: agreements + signature \u2500\u2500 -->\r\n      <div class=\"v1-body\">\r\n\r\n        <!-- Left: agreement cards -->\r\n        <div class=\"v1-agreements\">\r\n\r\n          <!-- Terms card -->\r\n          <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.acceptTerms\"\r\n            [class.v1-card--invalid]=\"!model.acceptTerms && validatePage==1\">\r\n            <div class=\"v1-card-icon\">\r\n              <svg width=\"20\" height=\"20\" 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            <div class=\"v1-card-body\">\r\n              <p class=\"v1-card-title\">Terms and Conditions</p>\r\n              <p class=\"v1-card-sub\">Read and accept to continue</p>\r\n            </div>\r\n            <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.acceptTerms\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n              <svg *ngIf=\"model.acceptTerms\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"20 6 9 17 4 12\"/>\r\n              </svg>\r\n              {{ model.acceptTerms ? 'Agreed' : 'Read & Agree' }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- Privacy card -->\r\n          <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.privacy\"\r\n            [class.v1-card--invalid]=\"!model.privacy && validatePage==1\">\r\n            <div class=\"v1-card-icon\">\r\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>\r\n              </svg>\r\n            </div>\r\n            <div class=\"v1-card-body\">\r\n              <p class=\"v1-card-title\">Privacy Statement</p>\r\n              <p class=\"v1-card-sub\">Read and accept to continue</p>\r\n            </div>\r\n            <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.privacy\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n              <svg *ngIf=\"model.privacy\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"20 6 9 17 4 12\"/>\r\n              </svg>\r\n              {{ model.privacy ? 'Agreed' : 'Read & Agree' }}\r\n            </button>\r\n          </div>\r\n\r\n        </div>\r\n\r\n        <!-- Right: signature pad -->\r\n        <div class=\"v1-signature\">\r\n          <div class=\"v1-sig-header\">\r\n            <span class=\"v1-sig-label\">\r\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M17 3a2.828 2.828 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z\"/>\r\n              </svg>\r\n              Signature\r\n            </span>\r\n            <button (click)=\"clearPad()\" class=\"v1-clear-btn\">\r\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n              </svg>\r\n              Clear\r\n            </button>\r\n          </div>\r\n          <div class=\"v1-sig-pad\">\r\n            <div [ngClass]=\"{'d-none': signaturePadData?.publicUrl}\">\r\n              <canvas #canvas [width]=\"255\" [height]=\"90\"></canvas>\r\n            </div>\r\n            <div [ngClass]=\"{'d-none': !signaturePadData?.publicUrl}\">\r\n              <img [width]=\"255\" [height]=\"120\" [src]=\"signaturePadData?.publicUrl\" alt style=\"position:relative\">\r\n            </div>\r\n            <p class=\"v1-sig-hint\" *ngIf=\"!signaturePadData?.publicUrl && (!points || !points?.length)\">\r\n              Draw your signature here\r\n            </p>\r\n          </div>\r\n          <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length==0) && !fileData\"\r\n            class=\"v1-error-msg\">\r\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\r\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\r\n            </svg>\r\n            Signature is required\r\n          </div>\r\n          <div *ngIf=\"uploadError\" class=\"v1-error-msg\">{{ uploadError }}</div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Continue Button \u2500\u2500 -->\r\n      <div class=\"v1-footer\">\r\n        <button class=\"v1-continue-btn\" (click)=\"next(2)\"\r\n          [disabled]=\"((!points || !points?.length || points.length==0) && !fileData) || !model.acceptTerms || !model.privacy\">\r\n          <span *ngIf=\"!showLoader\">Continue</span>\r\n          <span *ngIf=\"showLoader\" class=\"v1-spinner\"></span>\r\n          <svg *ngIf=\"!showLoader\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n            stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n    </div>\r\n    <ng-container *ngIf=\"view == 2\">\r\n\r\n      <!-- \u2500\u2500 Role-select header \u2500\u2500 -->\r\n      <div class=\"v2-header\">\r\n        <div class=\"v2-header-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <circle cx=\"12\" cy=\"8\" r=\"4\"/>\r\n            <path d=\"M6 20v-2a4 4 0 014-4h4a4 4 0 014 4v2\"/>\r\n          </svg>\r\n        </div>\r\n        <div>\r\n          <h2 class=\"v2-title\">Choose your role</h2>\r\n          <p class=\"v2-sub\">Choose the areas you'd like to be part of \u2014 programs, services, events, or\r\n            collaborations. Connect your business to others and prospective clients.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Role cards grid \u2500\u2500 -->\r\n      <div class=\"v2-grid\">\r\n        <ng-container *ngFor=\"let userType of userViewRoles\">\r\n          <div class=\"v2-role-card\" [class.v2-role-card--active]=\"userType.value === selectedRoleValue\"\r\n            (click)=\"selectedUserRole(userType)\">\r\n            <div class=\"v2-role-img-wrap\">\r\n              <img [src]=\"userType?.img\" alt=\"\">\r\n            </div>\r\n            <span class=\"v2-role-name\">{{userType.name}}</span>\r\n            <span class=\"v2-role-check\" *ngIf=\"userType.value === selectedRoleValue\">\r\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"20 6 9 17 4 12\"/>\r\n              </svg>\r\n            </span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Footer: Back + Continue \u2500\u2500 -->\r\n      <div class=\"v2-footer\">\r\n        <button class=\"v2-back-btn\" (click)=\"previous()\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n          </svg>\r\n          Back\r\n        </button>\r\n        <button class=\"v2-continue-btn\" (click)=\"next(3)\" [disabled]=\"!isUserSelected\">\r\n          Continue\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 3\">\r\n\r\n      <!-- Header -->\r\n      <div class=\"ip-header\">\r\n        <div class=\"ip-header-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z\"/>\r\n            <polyline points=\"9 22 9 12 15 12 15 22\"/>\r\n          </svg>\r\n        </div>\r\n        <div>\r\n          <h2 class=\"ip-title\">Business Information</h2>\r\n          <p class=\"ip-sub\">Tell us about your company so we can connect you with the right work.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <form [formGroup]=\"companyForm\">\r\n\r\n        <!-- Company Details -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Company Details</p>\r\n          <div class=\"ip-grid-2\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"companyName\">Company Name <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': (f.companyName.errors && validatePage == 3) || providerError}\"\r\n                type=\"text\" class=\"ip-input\" id=\"companyName\" placeholder=\"Company Name\"\r\n                formControlName=\"companyName\">\r\n              <span *ngIf=\"f.companyName.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.companyName.errors.required\">Company Name is required</span>\r\n                <span *ngIf=\"f.companyName.errors.minlength\">Minimum 2 characters</span>\r\n                <span *ngIf=\"f.companyName.errors.maxLength\">Maximum 100 characters</span>\r\n              </span>\r\n              <span *ngIf=\"providerError\" class=\"ip-error\">{{ providerError }}</span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"inputPhone\">Phone Number <span class=\"ip-required\">*</span></label>\r\n              <input class=\"ip-input\" type=\"text\" name=\"inputPhone\" placeholder=\"Company Phone Number\"\r\n                id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\" [maxLength]=\"14\"\r\n                (input)=\"formatPhone($event,companyForm)\"\r\n                [ngClass]=\"{'ip-input--invalid': (f.phoneNumber.errors && validatePage == 3) || providerError}\">\r\n              <span *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.phoneNumber.errors.required\">Phone Number is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Address -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Address</p>\r\n          <div class=\"ip-grid-2\" style=\"margin-bottom: 12px;\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"businessAddress\">Address Line 1 <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': f.address1.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n                (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n              <span *ngIf=\"f.address1.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.address1.errors.required\">Business Address 1 is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"businessAddress2\">Address Line 2</label>\r\n              <input type=\"text\" class=\"ip-input\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n            </div>\r\n          </div>\r\n          <div class=\"ip-grid-4\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"City\">City <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': f.city.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n              <span *ngIf=\"f.city.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.city.errors.required\">City is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"State\">State <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': f.state.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n              <span *ngIf=\"f.state.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.state.errors.required\">State is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Zipcode\">Zipcode <span class=\"ip-required\">*</span></label>\r\n              <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                [ngClass]=\"{'ip-input--invalid': f.zipcode.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n              <span *ngIf=\"f.zipcode.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.zipcode.errors.required\">Zipcode is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Country\">Country <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': f.country.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n              <span *ngIf=\"f.country.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.country.errors.required\">Country is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </form>\r\n\r\n      <!-- Company Logo (intentionally outside formGroup) -->\r\n      <div class=\"ip-section\">\r\n        <p class=\"ip-section-label\">Company Logo</p>\r\n        <div class=\"ip-field\">\r\n          <label class=\"ip-label\">Company Logo <span class=\"ip-required\">*</span></label>\r\n          <div class=\"ip-upload-wrap\">\r\n            <input #uploadLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadLogo($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\"\r\n              class=\"ip-input\" placeholder=\"Click to upload company logo\">\r\n            <img #uploadImage2 class=\"ip-upload-icon\" (click)=\"uploadLogoInput.click()\"\r\n              src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n          </div>\r\n          <span *ngIf=\"isLogoRequired\" class=\"ip-error\">Please upload a company logo</span>\r\n          <span *ngIf=\"isneeded\" class=\"ip-error\">Company Logo is required</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Contractor Category -->\r\n      <div *ngIf=\"selectedRole?.name == 'Contractor'\" class=\"ip-section\">\r\n        <p class=\"ip-section-label\">Contractor Category</p>\r\n\r\n        <!-- Category selector \u2014 ng-select logic intact, restyled as pill tag-input -->\r\n        <div class=\"cc-select-wrap\">\r\n          <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n            (ngModelChange)=\"changeContractor($event)\" [(ngModel)]=\"selectedContractorCategories\"\r\n            >\r\n          </ng-select>\r\n        </div>\r\n\r\n        <!-- Sub-items as pill chips per selected category -->\r\n        <ng-container *ngFor=\"let item of selectedContractorCategories; let i=index\">\r\n          <div class=\"cc-group\">\r\n\r\n            <!-- \"Select all\" toggle pill for this category -->\r\n            <label class=\"cc-select-all-pill\" [class.cc-select-all-pill--on]=\"item.selectAll\">\r\n              <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n                (change)=\"selectAll($event,item?.items)\" class=\"cc-hidden-check\">\r\n              <svg *ngIf=\"item.selectAll\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"20 6 9 17 4 12\"/>\r\n              </svg>\r\n              {{ item?.name }} \u2014 Select all\r\n            </label>\r\n\r\n            <!-- Individual sub-item pills -->\r\n            <div class=\"cc-sub-pills\">\r\n              <label *ngFor=\"let subItem of item?.items\" class=\"cc-sub-pill\"\r\n                [class.cc-sub-pill--on]=\"subItem.selected\">\r\n                <input type=\"checkbox\" [(ngModel)]=\"subItem.selected\" [name]=\"subItem?.id\" [id]=\"subItem?.id\"\r\n                  (change)=\"unCheckedEvent($event,item)\" class=\"cc-hidden-check\">\r\n                <svg *ngIf=\"subItem.selected\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                  stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                  <polyline points=\"20 6 9 17 4 12\"/>\r\n                </svg>\r\n                {{ subItem?.name }}\r\n              </label>\r\n            </div>\r\n\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- Footer -->\r\n      <div class=\"ip-footer\">\r\n        <button class=\"ip-back-btn\" (click)=\"previous()\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n          </svg>\r\n          Back\r\n        </button>\r\n        <button class=\"ip-next-btn\" (click)=\"next(4)\">\r\n          Continue\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 4\">\r\n\r\n      <!-- Header -->\r\n      <div class=\"ip-header\">\r\n        <div class=\"ip-header-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <circle cx=\"12\" cy=\"8\" r=\"4\"/>\r\n            <path d=\"M6 20v-2a4 4 0 014-4h4a4 4 0 014 4v2\"/>\r\n          </svg>\r\n        </div>\r\n        <div>\r\n          <h2 class=\"ip-title\">Your Profile</h2>\r\n          <p class=\"ip-sub\">We need a few basics and a headshot to complete your profile.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Copy from provider toggle -->\r\n      <div *ngIf=\"isBusiness\" class=\"ip-copy-row\">\r\n        <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\"\r\n          class=\"ip-copy-check\" (change)=\"changeAddressUser()\">\r\n        <label for=\"isCopy\" class=\"ip-copy-label\">Copy from Provider Information</label>\r\n      </div>\r\n\r\n      <form [formGroup]=\"userForm\">\r\n\r\n        <!-- Personal Details -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Personal Details</p>\r\n          <div class=\"ip-grid-3\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"firstName\">First Name <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.firstName.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n              <span *ngIf=\"u.firstName.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.firstName.errors.required\">First Name is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"lastName\">Last Name <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.lastName.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n              <span *ngIf=\"u.lastName.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.lastName.errors.required\">Last Name is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"email\">Email <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.email.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n              <span *ngIf=\"u.email.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.email.errors.required\">Email is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Home Address -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Home Address</p>\r\n          <div class=\"ip-field\" style=\"margin-bottom: 12px;\">\r\n            <label class=\"ip-label\" for=\"address1\">Address Line 1 <span class=\"ip-required\">*</span></label>\r\n            <input [ngClass]=\"{'ip-input--invalid': u.address1.errors && validatePage == 4}\"\r\n              [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"ip-input\"\r\n              placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n            <span *ngIf=\"u.address1.errors && validatePage == 4\" class=\"ip-error\">\r\n              <span *ngIf=\"u.address1.errors.required\">Home Address 1 is required</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"ip-grid-3\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"homeAddress2\">Address Line 2</label>\r\n              <input type=\"text\" class=\"ip-input\" id=\"homeAddress2\" formControlName=\"address2\"\r\n                placeholder=\"Home Address 2\">\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"City\">City <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.city.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n              <span *ngIf=\"u.city.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.city.errors.required\">City is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"State\">State <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.state.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n              <span *ngIf=\"u.state.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.state.errors.required\">State is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Zipcode\">Zipcode <span class=\"ip-required\">*</span></label>\r\n              <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                [ngClass]=\"{'ip-input--invalid': u.zipcode.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n              <span *ngIf=\"u.zipcode.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.zipcode.errors.required\">Zipcode is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Country\">Country <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.country.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n              <span *ngIf=\"u.country.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.country.errors.required\">Country is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"inputPhone\">Phone Number <span class=\"ip-required\">*</span></label>\r\n              <input class=\"ip-input\" type=\"text\" (input)=\"formatPhone($event,userForm)\"\r\n                name=\"inputPhone\" placeholder=\"Phone Number\" id=\"inputPhone\" autocomplete=\"off\"\r\n                formControlName=\"phoneNumber\" [maxLength]=\"14\"\r\n                [ngClass]=\"{'ip-input--invalid': u.phoneNumber.errors && validatePage == 4}\">\r\n              <span *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.phoneNumber.errors.required\">Phone Number is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </form>\r\n\r\n      <!-- Profile Picture (intentionally outside formGroup) -->\r\n      <div class=\"ip-section\">\r\n        <p class=\"ip-section-label\">Profile Picture</p>\r\n        <div class=\"ip-field\">\r\n          <label class=\"ip-label\">Profile Picture <span class=\"ip-required\">*</span></label>\r\n          <div class=\"ip-upload-wrap\">\r\n            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadUserImage($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\"\r\n              class=\"ip-input\" id=\"upload\" accept=\".png,.jpg,.jpeg\" placeholder=\"Click to upload profile picture\">\r\n            <img #uploadImage1 class=\"ip-upload-icon\" (click)=\"uploadFile.click()\"\r\n              src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n          </div>\r\n          <span *ngIf=\"isImageRequired\" class=\"ip-error\">Please upload a profile image</span>\r\n          <span *ngIf=\"userError\" class=\"ip-error\">{{ userError }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Footer -->\r\n      <div class=\"ip-footer\">\r\n        <button class=\"ip-back-btn\" (click)=\"previous()\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n          </svg>\r\n          Back\r\n        </button>\r\n        <button class=\"ip-next-btn\" (click)=\"next(5)\" [disabled]=\"showLoader\">\r\n          <span *ngIf=\"!showLoader\">Continue</span>\r\n          <span *ngIf=\"showLoader\" class=\"v1-spinner\"></span>\r\n          <svg *ngIf=\"!showLoader\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n            stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 5\">\r\n      <div class=\"v5-wrap\">\r\n\r\n        <!-- Success icon -->\r\n        <div class=\"v5-icon\">\r\n          <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M22 11.08V12a10 10 0 11-5.93-9.14\"/>\r\n            <polyline points=\"22 4 12 14.01 9 11.01\"/>\r\n          </svg>\r\n        </div>\r\n\r\n        <h2 class=\"v5-title\">You're all set!</h2>\r\n        <p class=\"v5-sub\">Account created successfully. Next step: complete your profile.</p>\r\n\r\n        <!-- Info cards -->\r\n        <div class=\"v5-cards\">\r\n          <div class=\"v5-card\">\r\n            <div class=\"v5-card-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                <circle cx=\"12\" cy=\"12\" r=\"10\"/>\r\n                <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\r\n                <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\r\n              </svg>\r\n            </div>\r\n            <p class=\"v5-card-text\">Profile completion is mandatory to participate in rosters, programs, requests, and platform workflows. Incomplete profiles will have limited access.</p>\r\n          </div>\r\n          <div class=\"v5-card\">\r\n            <div class=\"v5-card-icon v5-card-icon--green\">\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                <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18M9 21V9\"/>\r\n              </svg>\r\n            </div>\r\n            <p class=\"v5-card-text\">You may access your dashboard at any time, but full functionality is available only after profile completion.</p>\r\n          </div>\r\n        </div>\r\n\r\n        <button (click)=\"dashboard()\" class=\"v5-cta\">\r\n          Go to Dashboard\r\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 10\">\r\n      <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\" [signatureFileId]=\"signatureFileId\"\r\n    [signatureUrl]=\"signatureUrl\"></app-credentialing>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\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      <!-- HEADER -->\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      </div>\r\n\r\n      <!-- SCROLL HINT + PROGRESS -->\r\n      <div class=\"tc-scroll-hint\">\r\n        <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <path d=\"M12 5v14M5 12l7 7 7-7\"/>\r\n        </svg>\r\n        Scroll to the bottom to enable the <strong>&nbsp;Agree&nbsp;</strong> button\r\n        <span class=\"tc-progress-pill\">{{ scrollProgress }}%</span>\r\n      </div>\r\n      <div class=\"tc-progress-bar\">\r\n        <div class=\"tc-progress-fill\" [style.width.%]=\"scrollProgress\"></div>\r\n      </div>\r\n\r\n      <!-- SCROLLABLE CONTENT -->\r\n      <div class=\"tc-scroll-wrapper\">\r\n        <div class=\"tc-modal-body\"\r\n          (scroll)=\"onTermsScroll($event)\"\r\n          (wheel)=\"stopAutoScroll()\"\r\n          (touchstart)=\"stopAutoScroll()\">\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        <!-- Floating scroll-to-bottom button -->\r\n        <button class=\"tc-scroll-fab\" *ngIf=\"!isAgreeEnabled\" (click)=\"scrollToBottomClick($event)\"\r\n          title=\"Scroll to bottom\">\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            <path d=\"M12 5v14M5 15l7 7 7-7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- FOOTER -->\r\n      <div class=\"tc-modal-footer\">\r\n        <button type=\"button\" class=\"tc-btn tc-btn-decline\"\r\n          (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n          Decline\r\n        </button>\r\n        <button type=\"button\" class=\"tc-btn tc-btn-agree\"\r\n          [disabled]=\"!isAgreeEnabled\"\r\n          (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n          I Agree\r\n        </button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";.brand-name{font-weight:700;font-size:calc(100% + 4px)}.spinner{width:38px;height:38px;border:dotted white;border-top:2px solid #f6f6f6;border-radius:62%;animation:spin 1.7s linear infinite;margin:-9px 0 0 -28px}@keyframes spin{to{transform:rotate(360deg)}}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:80px}.container .card{border-radius:1.25rem}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:147px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}.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:22px 28px 20px;background:#4077ad;border-bottom:none;flex-shrink:0}.tc-modal-header .tc-header-icon{width:40px;height:40px;background:#ffffff1f;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#93c5fd;flex-shrink:0}.tc-modal-header .tc-modal-title{font-family:Inter,system-ui,sans-serif;font-size:17px;font-weight:700;color:#fff;letter-spacing:-.01em;margin:0;flex:1}.tc-scroll-hint{display:flex;align-items:center;gap:7px;padding:9px 28px;background:#f0f9ff;border-bottom:none;font-size:12px;color:#4077ad;font-family:Inter,system-ui,sans-serif;letter-spacing:.01em;flex-shrink:0}.tc-scroll-hint svg{flex-shrink:0}.tc-scroll-hint strong{font-weight:700}.tc-scroll-hint .tc-progress-pill{margin-left:auto;background:#4077ad;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 9px;border-radius:99px;min-width:42px;text-align:center;transition:background .2s ease}.tc-progress-bar{height:3px;background:#e0f2fe;flex-shrink:0}.tc-progress-bar .tc-progress-fill{height:100%;background:linear-gradient(90deg,#4077ad,#38bdf8);border-radius:0 99px 99px 0;transition:width .12s ease}.tc-scroll-wrapper{position:relative;flex:1 1 auto;overflow:hidden;display:flex;flex-direction:column}.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-scroll-fab{position:absolute;bottom:20px;right:20px;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#4077ad 0% 100%);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px #4077ad80;z-index:10;animation:tc-fab-bounce 2s ease-in-out infinite;transition:transform .18s ease,box-shadow .18s ease}.tc-scroll-fab:hover{transform:translateY(-3px) scale(1.1);box-shadow:0 8px 24px #4077ad99;animation:none}@keyframes tc-fab-bounce{0%,to{transform:translateY(0);box-shadow:0 4px 18px #2563eb80}50%{transform:translateY(5px);box-shadow:0 2px 10px #2563eb59}}.tc-modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.tc-btn{font-family:Inter,system-ui,sans-serif;font-size:13.5px;font-weight:600;letter-spacing:.015em;padding:10px 26px;border-radius:10px;border:none;cursor:pointer;transition:background .18s ease,box-shadow .18s ease,transform .15s ease}.tc-btn.tc-btn-decline{background:#f1f5f9;color:#64748b;border:1.5px solid #e2e8f0}.tc-btn.tc-btn-decline:hover{background:#e2e8f0;color:#475569}.tc-btn.tc-btn-agree{background:linear-gradient(135deg,#4077ad 0% 100%);color:#fff;box-shadow:0 3px 10px #2563eb59}.tc-btn.tc-btn-agree:hover:not(:disabled){background:linear-gradient(135deg,#2d5f8a,#4077ad);box-shadow:0 5px 16px #2563eb73;transform:translateY(-1px)}.tc-btn.tc-btn-agree:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #4077ad40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:8px;font-size:13px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#64748b;background:#f8fafc;border:1.5px solid #e2e8f0;cursor:pointer;transition:color .18s,background .18s,border-color .18s,box-shadow .18s}.logout-btn:hover{color:#dc2626;background:#fff5f5;border-color:#fca5a5;box-shadow:0 2px 8px #dc26261a}.logout-btn:active{transform:scale(.97)}@media screen and (max-width: 767px){.term-signature{padding-left:3rem;padding-right:0;position:unset;margin:0}.footer-signature{margin-top:0rem}.disabled-btn{position:absolute;bottom:13px;right:24px}.next{height:46px;width:46px;position:absolute;bottom:21px;right:35px}.mob{padding-bottom:4.5rem!important}.checkmark{width:85%}.terms-fixed-modal{width:unset}::ng-deep .privacy-policy-modal .logo-section{margin-bottom:0!important}.add-tab-view{padding:30px 25px 6px;margin-left:0}.user-card{width:96%}.footer .btn-mob{display:flex;align-items:center}.back-btn{position:absolute;bottom:21px;left:10px}.actions{margin:50px 34px 1px}}@media screen and (min-width: 768px) and (max-width: 1024px){.footer-signature{margin-top:3rem}}.v1-welcome{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-welcome-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad;margin-top:2px}.v1-welcome-title{font-size:20px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em}.v1-brand{color:#4077ad}.v1-welcome-sub{font-size:13.5px;color:#374151;line-height:1.65;margin:0}.v1-body{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v1-body{grid-template-columns:1fr;padding:0 16px 16px}}.v1-agreements{display:flex;flex-direction:column;gap:12px}.v1-agreement-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;border:1.5px solid #e2e8f0;background:#fff;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #0000000a}.v1-agreement-card:hover{border-color:#c7d3e2;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:38px;height:38px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;color:#4077ad}.v1-card--agreed .v1-card-icon{background:#d4e8f8;border-color:#b8d4ef;color:#4077ad}.v1-card-body{flex:1 1 auto;min-width:0}.v1-card-title{font-size:13.5px;font-weight:600;color:#0f172a;margin:0 0 2px;line-height:1.3}.v1-card-sub{font-size:11.5px;color:#6b7280;margin:0}.v1-agree-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:8px;font-size:12px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;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}.v1-signature{display:flex;flex-direction:column;gap:10px}.v1-sig-header{display:flex;align-items:center;justify-content:space-between}.v1-sig-label{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#0f172a;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-clear-btn{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;color:#6b7280;background:transparent;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;cursor:pointer;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;transition:color .18s,border-color .18s}.v1-clear-btn:hover{color:#dc2626;border-color:#fca5a5}.v1-sig-pad{position:relative;border-radius:12px;border:1.5px dashed #cbd5e1;background:#f8fafc;overflow:hidden;min-height:110px;display:flex;align-items:center;justify-content:center}.v1-sig-pad canvas{display:block;cursor:crosshair}.v1-sig-pad img{display:block;max-width:100%}.v1-sig-hint{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:10.5px;color:#c0cad8;pointer-events:none;margin:0;white-space:nowrap;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-error-msg{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;color:#dc2626;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-footer{padding:8px 32px 20px;display:flex;justify-content:flex-end;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v1-footer{padding:8px 16px 20px}}.v1-continue-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 28px;border-radius:10px;font-size:14px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad59;transition:transform .15s,box-shadow .15s;min-width:148px;justify-content:center}.v1-continue-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #4077ad73}.v1-continue-btn:active:not(:disabled){transform:translateY(0)}.v1-continue-btn:disabled,.v1-continue-btn.disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.v1-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:v1-spin .65s linear infinite}@keyframes v1-spin{to{transform:rotate(360deg)}}@media (max-width: 767px){.v1-welcome{padding:20px 16px 14px;gap:12px}.v1-welcome-icon{width:40px;height:40px}.v1-welcome-title{font-size:17px}}.v2-header{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-header{padding:20px 16px 14px;gap:12px}}.v2-header-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad;margin-top:2px}.v2-title{font-size:20px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em}.v2-sub{font-size:13.5px;color:#374151;line-height:1.65;margin:0}.v2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;padding:0 32px 24px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));padding:0 16px 20px;gap:10px}}.v2-role-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 12px 16px;border-radius:14px;border:1.5px solid #e2e8f0;background:#fff;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .15s;box-shadow:0 1px 3px #0000000a;text-align:center}.v2-role-card:hover{border-color:#93c5fd;box-shadow:0 4px 16px #4077ad1a;transform:translateY(-2px)}.v2-role-card.v2-role-card--active{border-color:#4077ad;background:#eff6ff;box-shadow:0 0 0 3px #4077ad1f,0 4px 16px #4077ad1f}.v2-role-img-wrap{width:64px;height:64px;border-radius:50%;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background .18s,border-color .18s}.v2-role-img-wrap img{width:44px;height:44px;object-fit:contain;display:block}.v2-role-card--active .v2-role-img-wrap{background:#dbeafe;border-color:#93c5fd}.v2-role-name{font-size:12px;font-weight:600;color:#0f172a;line-height:1.3;text-align:center}.v2-role-card--active .v2-role-name{color:#4077ad}.v2-role-check{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:#4077ad;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #4077ad59}.v2-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 32px 24px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-footer{padding:8px 16px 20px}}.v2-back-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:9px;font-size:13.5px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#6b7280;background:#f8fafc;border:1.5px solid #e2e8f0;cursor:pointer;transition:color .18s,border-color .18s}.v2-back-btn:hover{color:#0f172a;border-color:#94a3b8}.v2-continue-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 24px;border-radius:9px;font-size:13.5px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad4d;transition:transform .15s,box-shadow .15s}.v2-continue-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #4077ad66}.v2-continue-btn:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.ip-header{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 16px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-header{padding:20px 16px 12px;gap:12px}}.ip-header-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad;margin-top:2px}.ip-title{font-size:20px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-sub{font-size:13.5px;color:#374151;line-height:1.65;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-section{margin:0 24px 14px;background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;padding:18px 20px 16px;box-shadow:0 1px 4px #0000000a}@media (max-width: 767px){.ip-section{margin:0 12px 10px;padding:14px}}.ip-section-label{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6b7280;margin:0 0 12px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width: 767px){.ip-grid-2{grid-template-columns:1fr}}.ip-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}@media (max-width: 1024px){.ip-grid-3{grid-template-columns:1fr 1fr}}@media (max-width: 599px){.ip-grid-3{grid-template-columns:1fr}}.ip-grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}@media (max-width: 1024px){.ip-grid-4{grid-template-columns:1fr 1fr}}@media (max-width: 599px){.ip-grid-4{grid-template-columns:1fr}}.ip-field{display:flex;flex-direction:column;gap:5px}.ip-label{font-size:12px;font-weight:600;color:#374151;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;line-height:1.3}.ip-required{color:#dc2626;margin-left:2px;font-weight:700}.ip-input{width:100%;height:44px;padding:0 14px;border:1.5px solid #e2e8f0;border-radius:9px;font-size:13.5px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#0f172a;background:#fff;outline:none;transition:border-color .18s,box-shadow .18s;box-sizing:border-box}.ip-input::placeholder{color:#adb5bd;font-weight:400}.ip-input:focus{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1a}.ip-input.ip-input--invalid{border-color:#dc2626;background:#fff8f8}.ip-input.ip-input--invalid:focus{box-shadow:0 0 0 3px #dc26261a}.ip-input[readonly]{cursor:pointer;background:#f8fafc}.ip-error{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:500;color:#dc2626;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-upload-wrap{position:relative;display:flex;align-items:center}.ip-upload-icon{position:absolute;right:14px;width:16px;height:16px;cursor:pointer;opacity:.45;transition:opacity .18s}.ip-upload-icon:hover{opacity:.85}.ip-copy-row{display:flex;align-items:center;gap:10px;margin:0 24px 12px;padding:11px 16px;background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:10px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-copy-row{margin:0 12px 10px}}.ip-copy-check{width:16px;height:16px;accent-color:#4077AD;cursor:pointer;flex-shrink:0}.ip-copy-label{font-size:13px;font-weight:500;color:#0f172a;cursor:pointer;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none}.ip-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 24px 28px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-footer{padding:8px 16px 24px}}.ip-back-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:9px;font-size:13.5px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#6b7280;background:#f8fafc;border:1.5px solid #e2e8f0;cursor:pointer;transition:color .18s,border-color .18s,background .18s}.ip-back-btn:hover{color:#0f172a;border-color:#94a3b8;background:#f1f5f9}.ip-next-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 26px;border-radius:9px;font-size:13.5px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad4d;transition:transform .15s,box-shadow .15s}.ip-next-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #4077ad66}.ip-next-btn:active:not(:disabled){transform:translateY(0)}.ip-next-btn:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.v5-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 32px 40px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v5-wrap{padding:36px 20px 32px}}.v5-icon{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:1.5px solid #86efac;display:flex;align-items:center;justify-content:center;color:#16a34a;margin-bottom:20px;box-shadow:0 0 0 8px #22c55e14}.v5-title{font-size:26px;font-weight:800;color:#0f172a;margin:0 0 10px;letter-spacing:-.025em;line-height:1.2}.v5-sub{font-size:14px;color:#374151;margin:0 0 28px;line-height:1.6;max-width:480px}.v5-cards{display:flex;flex-direction:column;gap:12px;width:100%;max-width:520px;margin-bottom:32px;text-align:left}.v5-card{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:12px;border:1.5px solid #e2e8f0;background:#f8fafc;box-shadow:0 1px 3px #0000000a}.v5-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#eff6ff;border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad}.v5-card-icon.v5-card-icon--green{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a}.v5-card-text{font-size:13px;color:#374151;line-height:1.6;margin:0}.v5-cta{display:inline-flex;align-items:center;gap:10px;padding:13px 32px;border-radius:10px;font-size:14.5px;font-weight:600;font-family:inherit;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 16px #4077ad52;transition:transform .15s,box-shadow .15s}.v5-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px #4077ad6b}.v5-cta:active{transform:translateY(0)}.cc-select-wrap{margin-bottom:20px}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container{border:1.5px solid #e2e8f0;border-radius:10px;min-height:48px;padding:5px 10px;background:#fff;box-shadow:none;cursor:text;transition:border-color .18s,box-shadow .18s}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container:hover{border-color:#94a3b8}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1a}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap;gap:6px;padding:2px 0}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value{display:inline-flex;flex-direction:row;align-items:center;gap:5px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:99px;padding:4px 8px 4px 13px;font-size:12px;font-weight:600;color:#4077ad;margin:0;line-height:1}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-label{order:1}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon{display:inline-flex;align-items:center;justify-content:center;order:2;width:16px;height:16px;border-radius:50%;font-size:12px;font-weight:700;line-height:1;padding:0;background:#4077ad26;color:#4077ad;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon:hover{background:#4077ad;color:#fff}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon.right{display:none}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-placeholder{font-size:13.5px;color:#adb5bd;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-placeholder{display:none}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-input>input{font-size:13.5px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#0f172a}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-arrow-wrapper{padding-right:6px}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-arrow-wrapper .ng-arrow{border-color:#94a3b8 transparent transparent;border-width:5px 4px 0}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-clear-wrapper{color:#94a3b8}::ng-deep .ng-dropdown-panel{border:1.5px solid #e2e8f0;border-radius:12px;box-shadow:0 8px 28px #0000001a,0 2px 8px #0000000f;overflow:hidden;margin-top:5px;z-index:9999!important;background:#fff!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{padding:6px}::ng-deep .ng-dropdown-panel .ng-option{border-radius:8px;padding:10px 13px;font-size:13.5px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;transition:background .12s}::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#eff6ff;color:#4077ad;font-weight:600}::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked:not(.ng-option-selected){background:#f8fafc;color:#0f172a}::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked{background:#dbeafe}.cc-group{margin-bottom:18px;padding-top:4px}.cc-group:last-child{margin-bottom:0}.cc-hidden-check{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.cc-select-all-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:99px;border:1.5px solid #e2e8f0;background:#f8fafc;font-size:12px;font-weight:700;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;cursor:pointer;-webkit-user-select:none;user-select:none;margin-bottom:10px;transition:background .18s,border-color .18s,color .18s}.cc-select-all-pill:hover:not(.cc-select-all-pill--on){background:#f1f5f9;border-color:#94a3b8}.cc-select-all-pill.cc-select-all-pill--on{background:#0f172a;border-color:#0f172a;color:#fff}.cc-sub-pills{display:flex;flex-wrap:wrap;gap:8px}.cc-sub-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:99px;border:1.5px solid #e2e8f0;background:#fff;font-size:12.5px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}.cc-sub-pill:hover:not(.cc-sub-pill--on){background:#f8fafc;border-color:#94a3b8;color:#0f172a}.cc-sub-pill.cc-sub-pill--on{background:#eff6ff;border-color:#93c5fd;color:#4077ad;font-weight:600;box-shadow:0 0 0 3px #4077ad12}\n"] }]
+            args: [{ selector: 'app-initial-process', standalone: false, template: "<div class=\"container\">\r\n  <div class=\"mb-4 logout-container\" *ngIf=\"showlogout\">\r\n    <button class=\"logout-btn\" (click)=\"logout()\">\r\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"\r\n        stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4\"/>\r\n        <polyline points=\"16 17 21 12 16 7\"/>\r\n        <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\r\n      </svg>\r\n      Logout\r\n    </button>\r\n  </div>\r\n  <div class=\"card pb-2 mob pr-5\" style=\"margin-bottom: 30px;\">\r\n    <div [hidden]=\"view !== 1\">\r\n\r\n      <!-- \u2500\u2500 Welcome Banner \u2500\u2500 -->\r\n      <div class=\"v1-welcome\">\r\n        <div class=\"v1-welcome-icon\">\r\n          <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"/>\r\n            <circle cx=\"9\" cy=\"7\" r=\"4\"/>\r\n            <path d=\"M23 21v-2a4 4 0 00-3-3.87\"/>\r\n            <path d=\"M16 3.13a4 4 0 010 7.75\"/>\r\n          </svg>\r\n        </div>\r\n        <div class=\"v1-welcome-text\">\r\n          <h2 class=\"v1-welcome-title\">Welcome to <span class=\"v1-brand\">{{ branding.displayName }}</span></h2>\r\n          <p class=\"v1-welcome-sub\">Our members and service providers rely on accurate info in your profile to connect\r\n            you with work that suits your capabilities. Keep your profile complete, skills updated, licenses current,\r\n            photos and logos professional, and schedule up to date.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Main Body: agreements + signature \u2500\u2500 -->\r\n      <div class=\"v1-body\">\r\n\r\n        <!-- Left: agreement cards -->\r\n        <div class=\"v1-agreements\">\r\n\r\n          <!-- Terms card -->\r\n          <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.acceptTerms\"\r\n            [class.v1-card--invalid]=\"!model.acceptTerms && validatePage==1\">\r\n            <div class=\"v1-card-icon\">\r\n              <svg width=\"20\" height=\"20\" 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            <div class=\"v1-card-body\">\r\n              <p class=\"v1-card-title\">Terms and Conditions</p>\r\n              <p class=\"v1-card-sub\">Read and accept to continue</p>\r\n            </div>\r\n            <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.acceptTerms\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n              <svg *ngIf=\"model.acceptTerms\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"20 6 9 17 4 12\"/>\r\n              </svg>\r\n              {{ model.acceptTerms ? 'Agreed' : 'Read & Agree' }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- Privacy card -->\r\n          <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.privacy\"\r\n            [class.v1-card--invalid]=\"!model.privacy && validatePage==1\">\r\n            <div class=\"v1-card-icon\">\r\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>\r\n              </svg>\r\n            </div>\r\n            <div class=\"v1-card-body\">\r\n              <p class=\"v1-card-title\">Privacy Statement</p>\r\n              <p class=\"v1-card-sub\">Read and accept to continue</p>\r\n            </div>\r\n            <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.privacy\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n              <svg *ngIf=\"model.privacy\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"20 6 9 17 4 12\"/>\r\n              </svg>\r\n              {{ model.privacy ? 'Agreed' : 'Read & Agree' }}\r\n            </button>\r\n          </div>\r\n\r\n        </div>\r\n\r\n        <!-- Right: signature pad -->\r\n        <div class=\"v1-signature\">\r\n          <div class=\"v1-sig-header\">\r\n            <span class=\"v1-sig-label\">\r\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M17 3a2.828 2.828 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z\"/>\r\n              </svg>\r\n              Signature\r\n            </span>\r\n            <button (click)=\"clearPad()\" class=\"v1-clear-btn\">\r\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n              </svg>\r\n              Clear\r\n            </button>\r\n          </div>\r\n          <div class=\"v1-sig-pad\">\r\n            <div [ngClass]=\"{'d-none': signaturePadData?.publicUrl}\">\r\n              <canvas #canvas [width]=\"255\" [height]=\"90\"></canvas>\r\n            </div>\r\n            <div [ngClass]=\"{'d-none': !signaturePadData?.publicUrl}\">\r\n              <img [width]=\"255\" [height]=\"120\" [src]=\"signaturePadData?.publicUrl\" alt style=\"position:relative\">\r\n            </div>\r\n            <p class=\"v1-sig-hint\" *ngIf=\"!signaturePadData?.publicUrl && (!points || !points?.length)\">\r\n              Draw your signature here\r\n            </p>\r\n          </div>\r\n          <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length==0) && !fileData\"\r\n            class=\"v1-error-msg\">\r\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\r\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\r\n            </svg>\r\n            Signature is required\r\n          </div>\r\n          <div *ngIf=\"uploadError\" class=\"v1-error-msg\">{{ uploadError }}</div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Continue Button \u2500\u2500 -->\r\n      <div class=\"v1-footer\">\r\n        <button class=\"v1-continue-btn\" (click)=\"next(2)\"\r\n          [disabled]=\"((!points || !points?.length || points.length==0) && !fileData) || !model.acceptTerms || !model.privacy\">\r\n          <span *ngIf=\"!showLoader\">Continue</span>\r\n          <span *ngIf=\"showLoader\" class=\"v1-spinner\"></span>\r\n          <svg *ngIf=\"!showLoader\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n            stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n    </div>\r\n    <ng-container *ngIf=\"view == 2\">\r\n\r\n      <!-- \u2500\u2500 Role-select header \u2500\u2500 -->\r\n      <div class=\"v2-header\">\r\n        <div class=\"v2-header-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <circle cx=\"12\" cy=\"8\" r=\"4\"/>\r\n            <path d=\"M6 20v-2a4 4 0 014-4h4a4 4 0 014 4v2\"/>\r\n          </svg>\r\n        </div>\r\n        <div>\r\n          <h2 class=\"v2-title\">Choose your role</h2>\r\n          <p class=\"v2-sub\">Choose the areas you'd like to be part of \u2014 programs, services, events, or\r\n            collaborations. Connect your business to others and prospective clients.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Role cards grid \u2500\u2500 -->\r\n      <div class=\"v2-grid\">\r\n        <ng-container *ngFor=\"let userType of userViewRoles\">\r\n          <div class=\"v2-role-card\" [class.v2-role-card--active]=\"userType.value === selectedRoleValue\"\r\n            (click)=\"selectedUserRole(userType)\">\r\n            <div class=\"v2-role-img-wrap\">\r\n              <img [src]=\"userType?.img\" alt=\"\">\r\n            </div>\r\n            <span class=\"v2-role-name\">{{userType.name}}</span>\r\n            <span class=\"v2-role-check\" *ngIf=\"userType.value === selectedRoleValue\">\r\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"20 6 9 17 4 12\"/>\r\n              </svg>\r\n            </span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Footer: Back + Continue \u2500\u2500 -->\r\n      <div class=\"v2-footer\">\r\n        <button class=\"v2-back-btn\" (click)=\"previous()\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n          </svg>\r\n          Back\r\n        </button>\r\n        <button class=\"v2-continue-btn\" (click)=\"next(3)\" [disabled]=\"!isUserSelected || isLoadingSubCategories\">\r\n          <span *ngIf=\"isLoadingSubCategories\" class=\"v1-spinner\"></span>\r\n          <ng-container *ngIf=\"!isLoadingSubCategories\">\r\n            Continue\r\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n            </svg>\r\n          </ng-container>\r\n        </button>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 3\">\r\n\r\n      <!-- Header -->\r\n      <div class=\"ip-header\">\r\n        <div class=\"ip-header-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z\"/>\r\n            <polyline points=\"9 22 9 12 15 12 15 22\"/>\r\n          </svg>\r\n        </div>\r\n        <div>\r\n          <h2 class=\"ip-title\">Business Information</h2>\r\n          <p class=\"ip-sub\">Tell us about your company so we can connect you with the right work.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <form [formGroup]=\"companyForm\">\r\n\r\n        <!-- Company Details -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Company Details</p>\r\n          <div class=\"ip-grid-2\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"companyName\">Company Name <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': (f.companyName.errors && validatePage == 3) || providerError}\"\r\n                type=\"text\" class=\"ip-input\" id=\"companyName\" placeholder=\"Company Name\"\r\n                formControlName=\"companyName\">\r\n              <span *ngIf=\"f.companyName.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.companyName.errors.required\">Company Name is required</span>\r\n                <span *ngIf=\"f.companyName.errors.minlength\">Minimum 2 characters</span>\r\n                <span *ngIf=\"f.companyName.errors.maxLength\">Maximum 100 characters</span>\r\n              </span>\r\n              <span *ngIf=\"providerError\" class=\"ip-error\">{{ providerError }}</span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"inputPhone\">Phone Number <span class=\"ip-required\">*</span></label>\r\n              <input class=\"ip-input\" type=\"text\" name=\"inputPhone\" placeholder=\"Company Phone Number\"\r\n                id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\" [maxLength]=\"14\"\r\n                (input)=\"formatPhone($event,companyForm)\"\r\n                [ngClass]=\"{'ip-input--invalid': (f.phoneNumber.errors && validatePage == 3) || providerError}\">\r\n              <span *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.phoneNumber.errors.required\">Phone Number is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Address -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Address</p>\r\n          <div class=\"ip-grid-2\" style=\"margin-bottom: 12px;\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"businessAddress\">Address Line 1 <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': f.address1.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n                (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n              <span *ngIf=\"f.address1.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.address1.errors.required\">Business Address 1 is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"businessAddress2\">Address Line 2</label>\r\n              <input type=\"text\" class=\"ip-input\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n            </div>\r\n          </div>\r\n          <div class=\"ip-grid-4\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"City\">City <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': f.city.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n              <span *ngIf=\"f.city.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.city.errors.required\">City is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"State\">State <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': f.state.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n              <span *ngIf=\"f.state.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.state.errors.required\">State is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Zipcode\">Zipcode <span class=\"ip-required\">*</span></label>\r\n              <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                [ngClass]=\"{'ip-input--invalid': f.zipcode.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n              <span *ngIf=\"f.zipcode.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.zipcode.errors.required\">Zipcode is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Country\">Country <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': f.country.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n              <span *ngIf=\"f.country.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.country.errors.required\">Country is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </form>\r\n\r\n      <!-- Company Logo (intentionally outside formGroup) -->\r\n      <div class=\"ip-section\">\r\n        <p class=\"ip-section-label\">Company Logo</p>\r\n        <div class=\"ip-field\">\r\n          <label class=\"ip-label\">Company Logo <span class=\"ip-required\">*</span></label>\r\n          <div class=\"ip-upload-wrap\">\r\n            <input #uploadLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadLogo($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\"\r\n              class=\"ip-input\" placeholder=\"Click to upload company logo\">\r\n            <img #uploadImage2 class=\"ip-upload-icon\" (click)=\"uploadLogoInput.click()\"\r\n              src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n          </div>\r\n          <span *ngIf=\"isLogoRequired\" class=\"ip-error\">Please upload a company logo</span>\r\n          <span *ngIf=\"isneeded\" class=\"ip-error\">Company Logo is required</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Contractor Category -->\r\n      <div *ngIf=\"selectedRole?.name == 'Contractor'\" class=\"ip-section\">\r\n        <p class=\"ip-section-label\">Contractor Category</p>\r\n\r\n        <!-- Category selector \u2014 ng-select logic intact, restyled as pill tag-input -->\r\n        <div class=\"cc-select-wrap\">\r\n          <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n            (ngModelChange)=\"changeContractor($event)\" [(ngModel)]=\"selectedContractorCategories\"\r\n            >\r\n          </ng-select>\r\n        </div>\r\n\r\n        <!-- Sub-items as pill chips per selected category -->\r\n        <ng-container *ngFor=\"let item of selectedContractorCategories; let i=index\">\r\n          <div class=\"cc-group\">\r\n\r\n            <!-- \"Select all\" toggle pill for this category -->\r\n            <label class=\"cc-select-all-pill\" [class.cc-select-all-pill--on]=\"item.selectAll\">\r\n              <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n                (change)=\"selectAll($event,item?.items)\" class=\"cc-hidden-check\">\r\n              <svg *ngIf=\"item.selectAll\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"20 6 9 17 4 12\"/>\r\n              </svg>\r\n              {{ item?.name }} \u2014 Select all\r\n            </label>\r\n\r\n            <!-- Individual sub-item pills -->\r\n            <div class=\"cc-sub-pills\">\r\n              <label *ngFor=\"let subItem of item?.items\" class=\"cc-sub-pill\"\r\n                [class.cc-sub-pill--on]=\"subItem.selected\">\r\n                <input type=\"checkbox\" [(ngModel)]=\"subItem.selected\" [name]=\"subItem?.id\" [id]=\"subItem?.id\"\r\n                  (change)=\"unCheckedEvent($event,item)\" class=\"cc-hidden-check\">\r\n                <svg *ngIf=\"subItem.selected\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                  stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                  <polyline points=\"20 6 9 17 4 12\"/>\r\n                </svg>\r\n                {{ subItem?.name }}\r\n              </label>\r\n            </div>\r\n\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- Footer -->\r\n      <div class=\"ip-footer\">\r\n        <button class=\"ip-back-btn\" (click)=\"previous()\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n          </svg>\r\n          Back\r\n        </button>\r\n        <button class=\"ip-next-btn\" (click)=\"next(4)\">\r\n          Continue\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 4\">\r\n\r\n      <!-- Header -->\r\n      <div class=\"ip-header\">\r\n        <div class=\"ip-header-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <circle cx=\"12\" cy=\"8\" r=\"4\"/>\r\n            <path d=\"M6 20v-2a4 4 0 014-4h4a4 4 0 014 4v2\"/>\r\n          </svg>\r\n        </div>\r\n        <div>\r\n          <h2 class=\"ip-title\">Your Profile</h2>\r\n          <p class=\"ip-sub\">We need a few basics and a headshot to complete your profile.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Copy from provider toggle -->\r\n      <div *ngIf=\"isBusiness\" class=\"ip-copy-row\">\r\n        <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\"\r\n          class=\"ip-copy-check\" (change)=\"changeAddressUser()\">\r\n        <label for=\"isCopy\" class=\"ip-copy-label\">Copy from Provider Information</label>\r\n      </div>\r\n\r\n      <form [formGroup]=\"userForm\">\r\n\r\n        <!-- Personal Details -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Personal Details</p>\r\n          <div class=\"ip-grid-3\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"firstName\">First Name <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.firstName.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n              <span *ngIf=\"u.firstName.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.firstName.errors.required\">First Name is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"lastName\">Last Name <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.lastName.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n              <span *ngIf=\"u.lastName.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.lastName.errors.required\">Last Name is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"email\">Email <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.email.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n              <span *ngIf=\"u.email.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.email.errors.required\">Email is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Home Address -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Home Address</p>\r\n          <div class=\"ip-field\" style=\"margin-bottom: 12px;\">\r\n            <label class=\"ip-label\" for=\"address1\">Address Line 1 <span class=\"ip-required\">*</span></label>\r\n            <input [ngClass]=\"{'ip-input--invalid': u.address1.errors && validatePage == 4}\"\r\n              [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"ip-input\"\r\n              placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n            <span *ngIf=\"u.address1.errors && validatePage == 4\" class=\"ip-error\">\r\n              <span *ngIf=\"u.address1.errors.required\">Home Address 1 is required</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"ip-grid-3\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"homeAddress2\">Address Line 2</label>\r\n              <input type=\"text\" class=\"ip-input\" id=\"homeAddress2\" formControlName=\"address2\"\r\n                placeholder=\"Home Address 2\">\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"City\">City <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.city.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n              <span *ngIf=\"u.city.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.city.errors.required\">City is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"State\">State <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.state.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n              <span *ngIf=\"u.state.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.state.errors.required\">State is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Zipcode\">Zipcode <span class=\"ip-required\">*</span></label>\r\n              <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                [ngClass]=\"{'ip-input--invalid': u.zipcode.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n              <span *ngIf=\"u.zipcode.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.zipcode.errors.required\">Zipcode is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Country\">Country <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.country.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n              <span *ngIf=\"u.country.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.country.errors.required\">Country is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"inputPhone\">Phone Number <span class=\"ip-required\">*</span></label>\r\n              <input class=\"ip-input\" type=\"text\" (input)=\"formatPhone($event,userForm)\"\r\n                name=\"inputPhone\" placeholder=\"Phone Number\" id=\"inputPhone\" autocomplete=\"off\"\r\n                formControlName=\"phoneNumber\" [maxLength]=\"14\"\r\n                [ngClass]=\"{'ip-input--invalid': u.phoneNumber.errors && validatePage == 4}\">\r\n              <span *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.phoneNumber.errors.required\">Phone Number is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </form>\r\n\r\n      <!-- Profile Picture (intentionally outside formGroup) -->\r\n      <div class=\"ip-section\">\r\n        <p class=\"ip-section-label\">Profile Picture</p>\r\n        <div class=\"ip-field\">\r\n          <label class=\"ip-label\">Profile Picture <span class=\"ip-required\">*</span></label>\r\n          <div class=\"ip-upload-wrap\">\r\n            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadUserImage($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\"\r\n              class=\"ip-input\" id=\"upload\" accept=\".png,.jpg,.jpeg\" placeholder=\"Click to upload profile picture\">\r\n            <img #uploadImage1 class=\"ip-upload-icon\" (click)=\"uploadFile.click()\"\r\n              src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n          </div>\r\n          <span *ngIf=\"isImageRequired\" class=\"ip-error\">Please upload a profile image</span>\r\n          <span *ngIf=\"userError\" class=\"ip-error\">{{ userError }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Footer -->\r\n      <div class=\"ip-footer\">\r\n        <button class=\"ip-back-btn\" (click)=\"previous()\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n          </svg>\r\n          Back\r\n        </button>\r\n        <button class=\"ip-next-btn\" (click)=\"next(5)\" [disabled]=\"showLoader\">\r\n          <span *ngIf=\"!showLoader\">Continue</span>\r\n          <span *ngIf=\"showLoader\" class=\"v1-spinner\"></span>\r\n          <svg *ngIf=\"!showLoader\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n            stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 5\">\r\n      <div class=\"v5-wrap\">\r\n\r\n        <!-- Success icon -->\r\n        <div class=\"v5-icon\">\r\n          <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M22 11.08V12a10 10 0 11-5.93-9.14\"/>\r\n            <polyline points=\"22 4 12 14.01 9 11.01\"/>\r\n          </svg>\r\n        </div>\r\n\r\n        <h2 class=\"v5-title\">You're all set!</h2>\r\n        <p class=\"v5-sub\">Account created successfully. Next step: complete your profile.</p>\r\n\r\n        <!-- Info cards -->\r\n        <div class=\"v5-cards\">\r\n          <div class=\"v5-card\">\r\n            <div class=\"v5-card-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                <circle cx=\"12\" cy=\"12\" r=\"10\"/>\r\n                <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\r\n                <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\r\n              </svg>\r\n            </div>\r\n            <p class=\"v5-card-text\">Profile completion is mandatory to participate in rosters, programs, requests, and platform workflows. Incomplete profiles will have limited access.</p>\r\n          </div>\r\n          <div class=\"v5-card\">\r\n            <div class=\"v5-card-icon v5-card-icon--green\">\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                <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18M9 21V9\"/>\r\n              </svg>\r\n            </div>\r\n            <p class=\"v5-card-text\">You may access your dashboard at any time, but full functionality is available only after profile completion.</p>\r\n          </div>\r\n        </div>\r\n\r\n        <button (click)=\"dashboard()\" class=\"v5-cta\">\r\n          Go to Dashboard\r\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 10\">\r\n      <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\" [signatureFileId]=\"signatureFileId\"\r\n    [signatureUrl]=\"signatureUrl\"></app-credentialing>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\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      <!-- HEADER -->\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      </div>\r\n\r\n      <!-- SCROLL HINT + PROGRESS -->\r\n      <div class=\"tc-scroll-hint\">\r\n        <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <path d=\"M12 5v14M5 12l7 7 7-7\"/>\r\n        </svg>\r\n        Scroll to the bottom to enable the <strong>&nbsp;Agree&nbsp;</strong> button\r\n        <span class=\"tc-progress-pill\">{{ scrollProgress }}%</span>\r\n      </div>\r\n      <div class=\"tc-progress-bar\">\r\n        <div class=\"tc-progress-fill\" [style.width.%]=\"scrollProgress\"></div>\r\n      </div>\r\n\r\n      <!-- SCROLLABLE CONTENT -->\r\n      <div class=\"tc-scroll-wrapper\">\r\n        <div class=\"tc-modal-body\"\r\n          (scroll)=\"onTermsScroll($event)\"\r\n          (wheel)=\"stopAutoScroll()\"\r\n          (touchstart)=\"stopAutoScroll()\">\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        <!-- Floating scroll-to-bottom button -->\r\n        <button class=\"tc-scroll-fab\" *ngIf=\"!isAgreeEnabled\" (click)=\"scrollToBottomClick($event)\"\r\n          title=\"Scroll to bottom\">\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            <path d=\"M12 5v14M5 15l7 7 7-7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- FOOTER -->\r\n      <div class=\"tc-modal-footer\">\r\n        <button type=\"button\" class=\"tc-btn tc-btn-decline\"\r\n          (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n          Decline\r\n        </button>\r\n        <button type=\"button\" class=\"tc-btn tc-btn-agree\"\r\n          [disabled]=\"!isAgreeEnabled\"\r\n          (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n          I Agree\r\n        </button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";.brand-name{font-weight:700;font-size:calc(100% + 4px)}.spinner{width:38px;height:38px;border:dotted white;border-top:2px solid #f6f6f6;border-radius:62%;animation:spin 1.7s linear infinite;margin:-9px 0 0 -28px}@keyframes spin{to{transform:rotate(360deg)}}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:80px}.container .card{border-radius:1.25rem}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:147px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}.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:22px 28px 20px;background:#4077ad;border-bottom:none;flex-shrink:0}.tc-modal-header .tc-header-icon{width:40px;height:40px;background:#ffffff1f;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#93c5fd;flex-shrink:0}.tc-modal-header .tc-modal-title{font-family:Inter,system-ui,sans-serif;font-size:17px;font-weight:700;color:#fff;letter-spacing:-.01em;margin:0;flex:1}.tc-scroll-hint{display:flex;align-items:center;gap:7px;padding:9px 28px;background:#f0f9ff;border-bottom:none;font-size:12px;color:#4077ad;font-family:Inter,system-ui,sans-serif;letter-spacing:.01em;flex-shrink:0}.tc-scroll-hint svg{flex-shrink:0}.tc-scroll-hint strong{font-weight:700}.tc-scroll-hint .tc-progress-pill{margin-left:auto;background:#4077ad;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 9px;border-radius:99px;min-width:42px;text-align:center;transition:background .2s ease}.tc-progress-bar{height:3px;background:#e0f2fe;flex-shrink:0}.tc-progress-bar .tc-progress-fill{height:100%;background:linear-gradient(90deg,#4077ad,#38bdf8);border-radius:0 99px 99px 0;transition:width .12s ease}.tc-scroll-wrapper{position:relative;flex:1 1 auto;overflow:hidden;display:flex;flex-direction:column}.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-scroll-fab{position:absolute;bottom:20px;right:20px;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#4077ad 0% 100%);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px #4077ad80;z-index:10;animation:tc-fab-bounce 2s ease-in-out infinite;transition:transform .18s ease,box-shadow .18s ease}.tc-scroll-fab:hover{transform:translateY(-3px) scale(1.1);box-shadow:0 8px 24px #4077ad99;animation:none}@keyframes tc-fab-bounce{0%,to{transform:translateY(0);box-shadow:0 4px 18px #2563eb80}50%{transform:translateY(5px);box-shadow:0 2px 10px #2563eb59}}.tc-modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.tc-btn{font-family:Inter,system-ui,sans-serif;font-size:13.5px;font-weight:600;letter-spacing:.015em;padding:10px 26px;border-radius:10px;border:none;cursor:pointer;transition:background .18s ease,box-shadow .18s ease,transform .15s ease}.tc-btn.tc-btn-decline{background:#f1f5f9;color:#64748b;border:1.5px solid #e2e8f0}.tc-btn.tc-btn-decline:hover{background:#e2e8f0;color:#475569}.tc-btn.tc-btn-agree{background:linear-gradient(135deg,#4077ad 0% 100%);color:#fff;box-shadow:0 3px 10px #2563eb59}.tc-btn.tc-btn-agree:hover:not(:disabled){background:linear-gradient(135deg,#2d5f8a,#4077ad);box-shadow:0 5px 16px #2563eb73;transform:translateY(-1px)}.tc-btn.tc-btn-agree:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #4077ad40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:8px;font-size:13px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#64748b;background:#f8fafc;border:1.5px solid #e2e8f0;cursor:pointer;transition:color .18s,background .18s,border-color .18s,box-shadow .18s}.logout-btn:hover{color:#dc2626;background:#fff5f5;border-color:#fca5a5;box-shadow:0 2px 8px #dc26261a}.logout-btn:active{transform:scale(.97)}@media screen and (max-width: 767px){.term-signature{padding-left:3rem;padding-right:0;position:unset;margin:0}.footer-signature{margin-top:0rem}.disabled-btn{position:absolute;bottom:13px;right:24px}.next{height:46px;width:46px;position:absolute;bottom:21px;right:35px}.mob{padding-bottom:4.5rem!important}.checkmark{width:85%}.terms-fixed-modal{width:unset}::ng-deep .privacy-policy-modal .logo-section{margin-bottom:0!important}.add-tab-view{padding:30px 25px 6px;margin-left:0}.user-card{width:96%}.footer .btn-mob{display:flex;align-items:center}.back-btn{position:absolute;bottom:21px;left:10px}.actions{margin:50px 34px 1px}}@media screen and (min-width: 768px) and (max-width: 1024px){.footer-signature{margin-top:3rem}}.v1-welcome{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-welcome-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad;margin-top:2px}.v1-welcome-title{font-size:20px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em}.v1-brand{color:#4077ad}.v1-welcome-sub{font-size:13.5px;color:#374151;line-height:1.65;margin:0}.v1-body{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v1-body{grid-template-columns:1fr;padding:0 16px 16px}}.v1-agreements{display:flex;flex-direction:column;gap:12px}.v1-agreement-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;border:1.5px solid #e2e8f0;background:#fff;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #0000000a}.v1-agreement-card:hover{border-color:#c7d3e2;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:38px;height:38px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;color:#4077ad}.v1-card--agreed .v1-card-icon{background:#d4e8f8;border-color:#b8d4ef;color:#4077ad}.v1-card-body{flex:1 1 auto;min-width:0}.v1-card-title{font-size:13.5px;font-weight:600;color:#0f172a;margin:0 0 2px;line-height:1.3}.v1-card-sub{font-size:11.5px;color:#6b7280;margin:0}.v1-agree-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:8px;font-size:12px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;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}.v1-signature{display:flex;flex-direction:column;gap:10px}.v1-sig-header{display:flex;align-items:center;justify-content:space-between}.v1-sig-label{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#0f172a;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-clear-btn{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;color:#6b7280;background:transparent;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;cursor:pointer;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;transition:color .18s,border-color .18s}.v1-clear-btn:hover{color:#dc2626;border-color:#fca5a5}.v1-sig-pad{position:relative;border-radius:12px;border:1.5px dashed #cbd5e1;background:#f8fafc;overflow:hidden;min-height:110px;display:flex;align-items:center;justify-content:center}.v1-sig-pad canvas{display:block;cursor:crosshair}.v1-sig-pad img{display:block;max-width:100%}.v1-sig-hint{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:10.5px;color:#c0cad8;pointer-events:none;margin:0;white-space:nowrap;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-error-msg{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;color:#dc2626;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-footer{padding:8px 32px 20px;display:flex;justify-content:flex-end;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v1-footer{padding:8px 16px 20px}}.v1-continue-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 28px;border-radius:10px;font-size:14px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad59;transition:transform .15s,box-shadow .15s;min-width:148px;justify-content:center}.v1-continue-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #4077ad73}.v1-continue-btn:active:not(:disabled){transform:translateY(0)}.v1-continue-btn:disabled,.v1-continue-btn.disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.v1-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:v1-spin .65s linear infinite}@keyframes v1-spin{to{transform:rotate(360deg)}}@media (max-width: 767px){.v1-welcome{padding:20px 16px 14px;gap:12px}.v1-welcome-icon{width:40px;height:40px}.v1-welcome-title{font-size:17px}}.v2-header{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-header{padding:20px 16px 14px;gap:12px}}.v2-header-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad;margin-top:2px}.v2-title{font-size:20px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em}.v2-sub{font-size:13.5px;color:#374151;line-height:1.65;margin:0}.v2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;padding:0 32px 24px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));padding:0 16px 20px;gap:10px}}.v2-role-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 12px 16px;border-radius:14px;border:1.5px solid #e2e8f0;background:#fff;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .15s;box-shadow:0 1px 3px #0000000a;text-align:center}.v2-role-card:hover{border-color:#93c5fd;box-shadow:0 4px 16px #4077ad1a;transform:translateY(-2px)}.v2-role-card.v2-role-card--active{border-color:#4077ad;background:#eff6ff;box-shadow:0 0 0 3px #4077ad1f,0 4px 16px #4077ad1f}.v2-role-img-wrap{width:64px;height:64px;border-radius:50%;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background .18s,border-color .18s}.v2-role-img-wrap img{width:44px;height:44px;object-fit:contain;display:block}.v2-role-card--active .v2-role-img-wrap{background:#dbeafe;border-color:#93c5fd}.v2-role-name{font-size:12px;font-weight:600;color:#0f172a;line-height:1.3;text-align:center}.v2-role-card--active .v2-role-name{color:#4077ad}.v2-role-check{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:#4077ad;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #4077ad59}.v2-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 32px 24px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-footer{padding:8px 16px 20px}}.v2-back-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:9px;font-size:13.5px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#6b7280;background:#f8fafc;border:1.5px solid #e2e8f0;cursor:pointer;transition:color .18s,border-color .18s}.v2-back-btn:hover{color:#0f172a;border-color:#94a3b8}.v2-continue-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 24px;border-radius:9px;font-size:13.5px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad4d;transition:transform .15s,box-shadow .15s}.v2-continue-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #4077ad66}.v2-continue-btn:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.ip-header{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 16px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-header{padding:20px 16px 12px;gap:12px}}.ip-header-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad;margin-top:2px}.ip-title{font-size:20px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-sub{font-size:13.5px;color:#374151;line-height:1.65;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-section{margin:0 24px 14px;background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;padding:18px 20px 16px;box-shadow:0 1px 4px #0000000a}@media (max-width: 767px){.ip-section{margin:0 12px 10px;padding:14px}}.ip-section-label{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6b7280;margin:0 0 12px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width: 767px){.ip-grid-2{grid-template-columns:1fr}}.ip-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}@media (max-width: 1024px){.ip-grid-3{grid-template-columns:1fr 1fr}}@media (max-width: 599px){.ip-grid-3{grid-template-columns:1fr}}.ip-grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}@media (max-width: 1024px){.ip-grid-4{grid-template-columns:1fr 1fr}}@media (max-width: 599px){.ip-grid-4{grid-template-columns:1fr}}.ip-field{display:flex;flex-direction:column;gap:5px}.ip-label{font-size:12px;font-weight:600;color:#374151;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;line-height:1.3}.ip-required{color:#dc2626;margin-left:2px;font-weight:700}.ip-input{width:100%;height:44px;padding:0 14px;border:1.5px solid #e2e8f0;border-radius:9px;font-size:13.5px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#0f172a;background:#fff;outline:none;transition:border-color .18s,box-shadow .18s;box-sizing:border-box}.ip-input::placeholder{color:#adb5bd;font-weight:400}.ip-input:focus{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1a}.ip-input.ip-input--invalid{border-color:#dc2626;background:#fff8f8}.ip-input.ip-input--invalid:focus{box-shadow:0 0 0 3px #dc26261a}.ip-input[readonly]{cursor:pointer;background:#f8fafc}.ip-error{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:500;color:#dc2626;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-upload-wrap{position:relative;display:flex;align-items:center}.ip-upload-icon{position:absolute;right:14px;width:16px;height:16px;cursor:pointer;opacity:.45;transition:opacity .18s}.ip-upload-icon:hover{opacity:.85}.ip-copy-row{display:flex;align-items:center;gap:10px;margin:0 24px 12px;padding:11px 16px;background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:10px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-copy-row{margin:0 12px 10px}}.ip-copy-check{width:16px;height:16px;accent-color:#4077AD;cursor:pointer;flex-shrink:0}.ip-copy-label{font-size:13px;font-weight:500;color:#0f172a;cursor:pointer;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none}.ip-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 24px 28px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-footer{padding:8px 16px 24px}}.ip-back-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:9px;font-size:13.5px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#6b7280;background:#f8fafc;border:1.5px solid #e2e8f0;cursor:pointer;transition:color .18s,border-color .18s,background .18s}.ip-back-btn:hover{color:#0f172a;border-color:#94a3b8;background:#f1f5f9}.ip-next-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 26px;border-radius:9px;font-size:13.5px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad4d;transition:transform .15s,box-shadow .15s}.ip-next-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #4077ad66}.ip-next-btn:active:not(:disabled){transform:translateY(0)}.ip-next-btn:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.v5-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 32px 40px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v5-wrap{padding:36px 20px 32px}}.v5-icon{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:1.5px solid #86efac;display:flex;align-items:center;justify-content:center;color:#16a34a;margin-bottom:20px;box-shadow:0 0 0 8px #22c55e14}.v5-title{font-size:26px;font-weight:800;color:#0f172a;margin:0 0 10px;letter-spacing:-.025em;line-height:1.2}.v5-sub{font-size:14px;color:#374151;margin:0 0 28px;line-height:1.6;max-width:480px}.v5-cards{display:flex;flex-direction:column;gap:12px;width:100%;max-width:520px;margin-bottom:32px;text-align:left}.v5-card{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:12px;border:1.5px solid #e2e8f0;background:#f8fafc;box-shadow:0 1px 3px #0000000a}.v5-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#eff6ff;border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad}.v5-card-icon.v5-card-icon--green{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a}.v5-card-text{font-size:13px;color:#374151;line-height:1.6;margin:0}.v5-cta{display:inline-flex;align-items:center;gap:10px;padding:13px 32px;border-radius:10px;font-size:14.5px;font-weight:600;font-family:inherit;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 16px #4077ad52;transition:transform .15s,box-shadow .15s}.v5-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px #4077ad6b}.v5-cta:active{transform:translateY(0)}.cc-select-wrap{margin-bottom:20px}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container{border:1.5px solid #e2e8f0;border-radius:10px;min-height:48px;padding:5px 10px;background:#fff;box-shadow:none;cursor:text;transition:border-color .18s,box-shadow .18s}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container:hover{border-color:#94a3b8}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1a}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap;gap:6px;padding:2px 0}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value{display:inline-flex;flex-direction:row;align-items:center;gap:5px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:99px;padding:4px 8px 4px 13px;font-size:12px;font-weight:600;color:#4077ad;margin:0;line-height:1}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-label{order:1}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon{display:inline-flex;align-items:center;justify-content:center;order:2;width:16px;height:16px;border-radius:50%;font-size:12px;font-weight:700;line-height:1;padding:0;background:#4077ad26;color:#4077ad;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon:hover{background:#4077ad;color:#fff}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon.right{display:none}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-placeholder{font-size:13.5px;color:#adb5bd;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-placeholder{display:none}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-input>input{font-size:13.5px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#0f172a}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-arrow-wrapper{padding-right:6px}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-arrow-wrapper .ng-arrow{border-color:#94a3b8 transparent transparent;border-width:5px 4px 0}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-clear-wrapper{color:#94a3b8}::ng-deep .ng-dropdown-panel{border:1.5px solid #e2e8f0;border-radius:12px;box-shadow:0 8px 28px #0000001a,0 2px 8px #0000000f;overflow:hidden;margin-top:5px;z-index:9999!important;background:#fff!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{padding:6px}::ng-deep .ng-dropdown-panel .ng-option{border-radius:8px;padding:10px 13px;font-size:13.5px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;transition:background .12s}::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#eff6ff;color:#4077ad;font-weight:600}::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked:not(.ng-option-selected){background:#f8fafc;color:#0f172a}::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked{background:#dbeafe}.cc-group{margin-bottom:18px;padding-top:4px}.cc-group:last-child{margin-bottom:0}.cc-hidden-check{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.cc-select-all-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:99px;border:1.5px solid #e2e8f0;background:#f8fafc;font-size:12px;font-weight:700;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;cursor:pointer;-webkit-user-select:none;user-select:none;margin-bottom:10px;transition:background .18s,border-color .18s,color .18s}.cc-select-all-pill:hover:not(.cc-select-all-pill--on){background:#f1f5f9;border-color:#94a3b8}.cc-select-all-pill.cc-select-all-pill--on{background:#0f172a;border-color:#0f172a;color:#fff}.cc-sub-pills{display:flex;flex-wrap:wrap;gap:8px}.cc-sub-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:99px;border:1.5px solid #e2e8f0;background:#fff;font-size:12.5px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}.cc-sub-pill:hover:not(.cc-sub-pill--on){background:#f8fafc;border-color:#94a3b8;color:#0f172a}.cc-sub-pill.cc-sub-pill--on{background:#eff6ff;border-color:#93c5fd;color:#4077ad;font-weight:600;box-shadow:0 0 0 3px #4077ad12}\n"] }]
         }], ctorParameters: () => [{ type: i2.Router }, { type: UserDetailService }, { type: i8.FormBuilder }, { type: FileService }, { type: ProvidersService }, { type: RolesService }, { type: i7.BsModalService }, { type: ProviderContractorSubCategoryService }, { type: ProviderContractorSubCategoryService }, { type: i9.AuthService }, { type: i1$2.TokenService }, { type: i1$2.RoleContextService }, { type: i1$2.AuthLogoutService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LIBRARY_CONFIG]