simpo-component-library 3.6.517 → 3.6.518

package/fesm2022/simpo-component-library.mjs

@@ -4251,131 +4251,90 @@ class AnimationDirective {
         this.el = el;
         this.renderer = renderer;
         this.eventService = eventService;
-        this.animationSpeed = animation;
-        this.animationTypes = {
-            left: "animateleft",
-            right: "animateright",
-            bottom: "animatebottom",
-            top: "animatetop",
-            zoom: "animatezoom",
-            fadeIn: "opac"
-        };
+        // Listen for external changes and re-apply animation
         this.eventServiceSubscription = this.eventService.animationChangeChecks.subscribe((res) => {
-            if (this.el.nativeElement.id === res.id) {
-                this.animationData = res.data;
+            if (this.el.nativeElement.id === res?.id) {
+                this.animationData = res?.data;
                 this.applyAnimation();
             }
         });
     }
-    ngOnDestroy() {
-        if (this.observer) {
-            this.observer.disconnect();
-        }
-        if (this.eventServiceSubscription) {
-            this.eventServiceSubscription.unsubscribe();
-        }
-    }
     ngOnInit() {
         this.createObserver();
-        // this.applyAnimation();
     }
-    ngOnChanges() {
-        // this.applyAnimation();
+    ngOnChanges(_changes) {
+        this.applyAnimation();
+    }
+    ngOnDestroy() {
+        if (this.observer)
+            this.observer.disconnect();
+        if (this.eventServiceSubscription)
+            this.eventServiceSubscription.unsubscribe();
     }
     createObserver() {
+        if (typeof window === 'undefined' || !('IntersectionObserver' in window)) {
+            this.applyAnimation();
+            return;
+        }
         const options = {
-            root: null, // Use the viewport as the container
-            threshold: 0.1 // Percentage of element visibility required to trigger the callback
+            root: null,
+            threshold: 0.1,
         };
-        if (typeof window !== 'undefined' && 'IntersectionObserver' in window) {
-            this.observer = new IntersectionObserver((entries) => {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting &&
-                        !this.el.nativeElement.className.includes('visible')) {
-                        this.el.nativeElement.classList.add('visible');
-                        this.el.nativeElement.style.setProperty('position', 'relative');
-                        this.el.nativeElement.style.setProperty('animation-name', this.getAnimationName());
-                        if (this.animationData?.speed) {
-                            const speed = animation.speed[this.animationData?.speed];
-                            this.el.nativeElement.style.setProperty('animation-duration', this.getAnimationSpeed(this.animationData.speed));
-                        }
-                        this.observer?.unobserve(this.el.nativeElement);
-                    }
-                });
-            }, options);
-            this.observer.observe(this.el.nativeElement);
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting &&
+                    !this.el.nativeElement.classList.contains('visible')) {
+                    this.el.nativeElement.classList.add('visible');
+                    this.applyAnimation();
+                    this.observer?.unobserve(this.el.nativeElement);
+                }
+            });
+        }, options);
+        this.observer.observe(this.el.nativeElement);
+    }
+    applyAnimation() {
+        const name = this.getAnimationName();
+        const duration = this.getAnimationSpeed(this.animationData?.speed);
+        this.renderer.setStyle(this.el.nativeElement, 'position', 'relative');
+        this.restartAnimation(name, duration);
+    }
+    restartAnimation(name, durationSec) {
+        const el = this.el.nativeElement;
+        el.style.animation = 'none';
+        el.offsetHeight;
+        if (!name || name === 'none') {
+            el.style.removeProperty('animation');
+            el.style.removeProperty('animation-name');
+            el.style.removeProperty('animation-duration');
+            return;
         }
+        const dur = durationSec ?? '0.8s';
+        el.style.animation = `${name} ${dur} ease both`;
     }
     getAnimationName() {
-        if (this.animationData?.type) {
-            if (this.animationData?.type == 'left') {
+        switch (this.animationData?.type) {
+            case 'left':
                 return 'animateleft';
-            }
-            if (this.animationData?.type == 'right') {
+            case 'right':
                 return 'animateright';
-            }
-            if (this.animationData?.type == 'top') {
+            case 'top':
                 return 'animatetop';
-            }
-            if (this.animationData?.type == 'bottom') {
+            case 'bottom':
                 return 'animatebottom';
-            }
-            if (this.animationData?.type == 'fadeIn') {
+            case 'fadeIn':
                 return 'opac';
-            }
-            if (this.animationData?.type == 'zoom') {
+            case 'zoom':
                 return 'animatezoom';
-            }
-            if (this.animationData?.type === 'none') {
+            case 'none':
                 return 'none';
-            }
-        }
-        return null;
-    }
-    applyAnimation() {
-        if (this.animationData?.type) {
-            const anim = animation.type[this.animationData?.type];
-            // this.renderer.removeClass(this.el.nativeElement,anim);
-            // this.renderer.addClass(this.el.nativeElement, anim);
-            if (this.animationData.type == 'left') {
-                this.name = 'animateleft';
-            }
-            if (this.animationData.type == 'right') {
-                this.name = 'animateright';
-            }
-            if (this.animationData.type == 'top') {
-                this.name = 'animatetop';
-            }
-            if (this.animationData.type == 'bottom') {
-                this.name = 'animatebottom';
-            }
-            if (this.animationData.type == 'fadeIn') {
-                this.name = 'opac';
-            }
-            if (this.animationData.type == 'zoom') {
-                this.name = 'animatezoom';
-            }
-            if (this.animationData.type === 'none') {
-                this.name = 'none';
-            }
-            this.el.nativeElement.style.setProperty('position', 'relative');
-            this.el.nativeElement.style.setProperty('animation-name', this.name);
-        }
-        if (this.animationData?.speed) {
-            const speed = animation.speed[this.animationData?.speed];
-            this.el.nativeElement.style.setProperty('position', 'relative');
-            this.el.nativeElement.style.setProperty('animation-name', this.name);
-            this.el.nativeElement.style.setProperty('animation-duration', this.getAnimationSpeed(this.animationData.speed));
+            default:
+                return ''; // no animation
         }
     }
     getAnimationSpeed(speed) {
-        let speedInSec = '';
-        for (let key of Object.keys(animation.speed)) {
-            if (key === speed) {
-                speedInSec = animation.speed[key];
-            }
-        }
-        return speedInSec;
+        if (!speed)
+            return null;
+        return animation.speed?.[speed] ?? null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnimationDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: AnimationDirective, isStandalone: true, selector: "[simpoAnimation]", inputs: { animationData: ["simpoAnimation", "animationData"] }, usesOnChanges: true, ngImport: i0 }); }
@@ -13005,6 +12964,7 @@ class AppointmentBookingComponent {
     }
     getAllStaff() {
         this.loader = true;
+        this.activeButton = true;
         this.staffPayload.storeId = this.selectedLocation?.id ?? "";
         this.staffPayload.serviceId = this.selectedService?.serviceId ? this.selectedService.serviceId : '';
         this.staffPayload.businessId = this.businessId ?? "";
@@ -13156,11 +13116,11 @@ class AppointmentBookingComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentBookingComponent, deps: [{ token: RestService }, { token: EventsService }, { token: i2$2.Router }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppointmentBookingComponent, isStandalone: true, selector: "simpo-appointment-booking", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)", "document:click": "closeOnOutsideClick()" } }, providers: [MessageService], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section class=\"main_section\">\r\n    <div class=\"main_header\">\r\n        <div class=\"header d-flex justify-content-between align-items-center\">\r\n            <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\r\n                (click)=\"goBack()\">\r\n                <mat-icon>keyboard_backspace</mat-icon><span *ngIf=\"screenWidth > 475\">Back to Home</span>\r\n            </div>\r\n            <div class=\"header-title\">\r\n                <h1>Book New Appointment</h1>\r\n                <p>{{businessName ?? \"N/A\" }}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\r\n        </div>\r\n    </div>\r\n    <div class=\"main_body w-100 d-flex justify-content-center\"><ng-container *ngIf=\"selectedTab === 'serviceListing'\">\r\n            <ng-container *ngIf=\"!skeletonLoader\">\r\n                <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'locationListing'\">\r\n            <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'staffListing'\">\r\n            <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\r\n            <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='contactDetails'\">\r\n            <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='paymentTab'\">\r\n            <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\r\n            <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"main_footer d-flex justify-content-center align-items-center\" *ngIf=\"selectedTab!=='statusTemplate'\">\r\n        <div class=\"footer-buttons\">\r\n            <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\">Back</span>\r\n            <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\r\n                *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\r\n            <button class=\"cursor-pointer d-flex justify-content-evenly align-items-center\"\r\n                *ngIf=\"selectedTab==='paymentTab'\" (click)=\"checkPayment()\"\r\n                [ngClass]=\"{'pay-now-btn' : selectedService?.depositAmount?.depositRequired,'complete_booking' : !selectedService?.depositAmount?.depositRequired}\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">{{selectedService?.depositAmount?.depositRequired\r\n                ? 'Pay Now' : 'Complete Booking'}}</button>\r\n        </div>\r\n    </div>\r\n</section>\r\n<ng-template #serviceListing>\r\n    <div class=\"w-60 service_section\">\r\n        <div class=\"service-selection\">\r\n            <h2>Select a Service</h2>\r\n            <p>Choose the service you'd like to book</p>\r\n\r\n            <div class=\"services-grid\">\r\n                <ng-container *ngFor=\"let service of serviceData\">\r\n                    <div class=\"\" (click)=\"selectService(service)\"\r\n                        [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\r\n                        <div class=\" service-header\">\r\n                            <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\r\n                            <div class=\"service-info\">\r\n                                <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\r\n                                <div class=\"service-category\">Wellness</div>\r\n                            </div>\r\n                            <div>\r\n                                <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\r\n                                    service?.priceDetails?.price : 'N/A' }}</div>\r\n                                <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"service-description\">\r\n                            {{service?.description ? service?.description : 'N/A'}}\r\n                        </div>\r\n                        <div class=\"home-visit\" *ngIf=\"service?.homeAppointmentAvailable\"><img\r\n                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\r\n                            Visit Available</div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <!-- <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83D\uDC64</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">General Consultation</div>\r\n                            <div class=\"service-category\">Medical</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B9800</div>\r\n                            <div class=\"service-duration\">30 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Comprehensive health consultation\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83E\uDDE0</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Mental Health Counseling</div>\r\n                            <div class=\"service-category\">Mental Health</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91500</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional psychological support\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\u2702</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Hair Cut & Styling</div>\r\n                            <div class=\"service-category\">Beauty</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91200</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional hair cutting and styling\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #locationListing>\r\n    <div class=\"location_section\">\r\n        <div class=\"header flex-column align-items-start\">\r\n            <h1>Choose Location</h1>\r\n            <p>Select where you'd like to receive the service</p>\r\n        </div>\r\n\r\n        <div class=\"location-list\">\r\n            <ng-container *ngFor=\"let location of locationData\">\r\n                <div (click)=\"selectLocation(location)\"\r\n                    [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\r\n                    <div class=\"location-content\">\r\n                        <div class=\"location-info\">\r\n                            <div class=\"location-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\r\n                            </div>\r\n                            <div class=\"location-details\">\r\n                                <div class=\"d-flex justify-content-between align-items-center\">\r\n                                    <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\r\n                                    <!-- <div class=\"distance\"><mat-icon>location_on</mat-icon> 2.3 km</div> -->\r\n                                </div>\r\n                                <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\r\n                                    {{location?.addressDetails?.state}} {{location?.pincode}}</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <!-- <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon branch-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Branch Clinic</h3>\r\n                            <p>456 Care Avenue, Health Zone, Mumbai 400015</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">5.8 km</div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon home-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Home Visit</h3>\r\n                            <p>Your Location</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">0 km</div>\r\n                </div>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #staffListing>\r\n    <div class=\"w-60 overflow-hidden\">\r\n        <div class=\"d-flex w-100 h-100\">\r\n            <div class=\"w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"staff-header mb-3\">\r\n                    <h1>Select Staff Member</h1>\r\n                    <p class=\"staff-subtitle mb-0\">Choose your preferred professional</p>\r\n                </div>\r\n\r\n                <!-- Staff Cards -->\r\n                <div class=\"d-flex flex-column gap-4 staff-list\">\r\n                    <ng-container *ngFor=\"let staff of staffData\">\r\n                        <div class=\"card rounded-3 p-3\" (click)=\"selectStaff(staff)\"\r\n                            [ngClass]=\"{ 'staff-card-selected' : staff?.selected, 'staff-card': !staff?.selected }\">\r\n                            <div class=\"d-flex align-items-start justify-content-between\">\r\n                                <div class=\"d-flex align-items-start flex-grow-1\">\r\n                                    <div\r\n                                        class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\r\n                                        {{staff?.staffName.slice(0,3).toUpperCase()}}\r\n                                    </div>\r\n                                    <div class=\"staff-details flex-grow-1\">\r\n                                        <h3 class=\"staff-name\">{{staff?.staffName ? staff?.staffName : 'N/A'}}</h3>\r\n                                        <p class=\"staff-specialty\">General Medicine</p>\r\n                                        <!-- <p class=\"staff-description mb-0\">Experienced physician with 10+ years in\r\n                                            general\r\n                                            medicine and wellness care.</p> -->\r\n                                    </div>\r\n                                </div>\r\n                                <!-- <div class=\"rating-section\">\r\n                                    <div class=\"star-rating d-flex align-items-center\">\r\n                                        <span class=\"star-icon\"></span>\r\n                                        <span class=\"rating-number\">4.9</span>\r\n                                    </div>\r\n                                    <div class=\"review-count\">156 reviews</div>\r\n                                </div> -->\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #dateSelection>\r\n    <div class=\"w-60 date_section\">\r\n        <div class=\"row justify-content-center h-100\">\r\n            <div class=\"col-12 h-100\">\r\n                <div class=\"datetime-header mb-2\">\r\n                    <h1>Select Date & Time</h1>\r\n                    <p class=\"datetime-subtitle mb-0\">Choose when you'd like your appointment</p>\r\n                </div>\r\n\r\n                <!-- Main Content -->\r\n                <div class=\"d-flex gap-4 main_container\">\r\n                    <!-- Left Column - Date Selection -->\r\n                    <div [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\r\n                        <div class=\"section-card card rounded-3 p-4 h-100\">\r\n                            <h3 class=\"section-title\">Select Date</h3>\r\n\r\n                            <div class=\"date-picker-container d-flex align-items-center justify-content-between\"\r\n                                (click)=\"$event.stopPropagation()\">\r\n                                <input type=\"text\" class=\"date-input border-0 rounded-2\" placeholder=\"dd-mm-yyyy\"\r\n                                    [value]=\"selectedDateStr\" readonly (click)=\"toggleCalendar($event)\">\r\n\r\n                                <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\r\n                            </div>\r\n                            <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\r\n                                <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\r\n                                    <mat-calendar [(selected)]=\"selectedDate\" [dateFilter]=\"dateFilter\"\r\n                                        (selectedChange)=\"onDateSelected($event)\" class=\"datepicker-calendar\">\r\n                                    </mat-calendar>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Right Column - Time Selection -->\r\n                    <div class=\"time_selection\" [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\r\n                        <div class=\"section-card card h-100 rounded-3 p-4\">\r\n                            <h3 class=\"section-title\">Available Times</h3>\r\n\r\n                            <!-- Time Slots Grid -->\r\n                            <div class=\"row g-2 mb-4 overflow-scroll\">\r\n                                <ng-container *ngIf=\"!skeletonLoader ;else slotsLoader\">\r\n                                    <div class=\"col-4\" *ngFor=\"let time of locationTiming\">\r\n                                        <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\r\n                                            (click)=\"selectTimeSlot(time)\">{{time ?\r\n                                            time?.value : 'N/A'}}</div>\r\n                                    </div>\r\n                                </ng-container>\r\n                                <ng-template #slotsLoader>\r\n                                    <!-- Time Slot Grid Skeleton Loader HTML -->\r\n                                    <div class=\"time-slot-grid\">\r\n                                        <!-- Row 1 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 2 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 3 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 4 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 5 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 6 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                    </div>\r\n\r\n                                </ng-template>\r\n                            </div>\r\n\r\n                            <!-- Waitlist Section -->\r\n                            <div class=\"waitlist-section rounded-3\">\r\n                                <div class=\"d-flex align-items-start\">\r\n                                    <div class=\"d-flex h-100 justify-content-between flex-column\">\r\n                                        <div class=\"waitlist-title d-flex align-items-center gap-2\"><span\r\n                                                class=\"waitlist-icon check-icon\"></span>No\r\n                                            slots available?</div>\r\n                                        <div class=\"waitlist-description d-flex align-items-center gap-2\">\r\n                                            <input class=\"form-check-input cursor-pointer\" type=\"checkbox\"\r\n                                                id=\"flexCheckChecked\">\r\n                                            Add me to the waitlist for earlier\r\n                                            availability\r\n                                        </div>\r\n                                    </div>\r\n                                    <div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n<ng-template #contactDetails>\r\n    <div class=\"w-60 contact_section overflow-hidden\">\r\n        <div class=\"d-flex h-100\">\r\n            <div class=\"h-100 w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"contact-header mb-2\">\r\n                    <h1>Contact Details</h1>\r\n                    <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\r\n                </div>\r\n\r\n                <!-- Form Sections -->\r\n                <div class=\"d-flex gap-3 details_container flex-column w-100\">\r\n                    <!-- Left Column - Personal Information -->\r\n                    <div class=\"d-flex gap-4\">\r\n                        <div\r\n                            [ngClass]=\"{'w-50' : selectedService?.homeAppointmentAvailable, 'w-100' : !selectedService?.homeAppointmentAvailable}\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Personal Information</h3>\r\n\r\n                                <!-- Full Name -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Full Name\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"text\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.name\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\" simpoLettersOnly>\r\n                                </div>\r\n\r\n                                <!-- Email Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Email Address\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"email\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.email\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\">\r\n                                </div>\r\n\r\n                                <!-- Phone Number -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Phone Number\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"tel\" class=\"form-control  rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\" simpoNumbersOnly\r\n                                        [ngClass]=\"{'mobile_number' : appointmentPayload.customerDetail.phoneNumber.length != 10}\">\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- Right Column - Home Visit Details -->\r\n                        <div class=\"w-50\" *ngIf=\"selectedService?.homeAppointmentAvailable\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Home Visit Details</h3>\r\n\r\n                                <!-- Home Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Home Address\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Enter your complete address\" [(ngModel)]=\"homeAddress\"></textarea>\r\n                                </div>\r\n\r\n                                <!-- Special Instructions -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Special Instructions\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Any special instructions for the professional (optional)\" [(ngModel)]=\"instructions\"></textarea>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"policies-container\">\r\n                        <!-- Header -->\r\n                        <h2 class=\"policies-title\">Policies & Terms</h2>\r\n\r\n                        <!-- Policy Items -->\r\n                        <div class=\"policy-items-container d-flex flex-column gap-3\">\r\n                            <!-- Cancellation Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showCancellationPolicy = !showCancellationPolicy\">\r\n                                <h3 class=\"policy-title\">Cancellation Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showCancellationPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n\r\n                            <!-- Rescheduling Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showReducingPolicy = !showReducingPolicy\">\r\n                                <h3 class=\"policy-title\">Rescheduling Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showReducingPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Acceptance Section -->\r\n                        <div class=\"acceptance-section\">\r\n                            <input type=\"checkbox\" class=\"custom-checkbox\" [(ngModel)]=\"termsAndConditions\"\r\n                                (ngModelChange)=\"checkRequiredValues()\">\r\n                            <p class=\"acceptance-text\">\r\n                                I understand and accept the cancellation & rescheduling policies and\r\n                                <span class=\"terms-link\">Terms & Conditions<span\r\n                                        class=\"external-link-icon\"></span></span>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #paymentTab>\r\n    <div class=\"w-60 payment_section\">\r\n        <div class=\"w-100 h-100\">\r\n            <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\r\n                <!-- Header Section -->\r\n                <div class=\"payment-header mb-3 w-100\">\r\n                    <h1>Payment & Confirmation</h1>\r\n                    <p class=\"payment-subtitle mb-0\">Review your booking and complete payment</p>\r\n                </div>\r\n\r\n                <!-- Booking Summary Card -->\r\n                <div class=\"booking-summary-card\" [ngClass]=\"{'w-100' : screenWidth < 475,'w-50':screenWidth > 475}\">\r\n                    <h2 class=\"summary-title\">Booking Summary</h2>\r\n\r\n                    <!-- Service -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Service</div>\r\n                        <div class=\"summary-value\">{{selectedService?.name ? selectedService?.name : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Professional -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Professional</div>\r\n                        <div class=\"summary-value\">{{selectedStaff?.staffName ? selectedStaff?.staffName : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Location -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Location</div>\r\n                        <div class=\"summary-value\">{{selectedLocation?.storeName ? selectedLocation?.storeName : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Date & Time -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Date & Time</div>\r\n                        <div class=\"summary-value\">{{selectedDateStr ? (selectedDateStr) : 'N/A'}} at\r\n                            {{selectedTime ? selectedTime.value : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Duration -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Duration</div>\r\n                        <div class=\"summary-value\">{{selectedService?.duration ? selectedService?.duration : 'N/A'}}\r\n                            minutes</div>\r\n                    </div>\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Tax Percent</div>\r\n                        <div class=\"summary-value\">{{selectedService?.priceDetails?.taxPercent ?\r\n                            selectedService?.priceDetails?.taxPercent : 'N/A'}}%</div>\r\n                    </div>\r\n                    <!-- Total -->\r\n                    <div class=\"summary-row total-row\">\r\n                        <div class=\"summary-label\">Total</div>\r\n                        <div class=\"summary-value\">\r\n                            <span class=\"currency-symbol\">\u20B9</span>{{selectedService?.priceDetails?.price ?\r\n                            selectedService?.priceDetails?.price : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #statusTemplate>\r\n    <div class=\"booking-confirmation\">\r\n        <!-- Success Icon -->\r\n        <div class=\"success-icon\">\r\n            <div class=\"checkmark-circle\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"apiStatus\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Main Content -->\r\n        <div class=\"confirmation-content\">\r\n            <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\r\n            <p class=\"confirmation-message\">\r\n                {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\r\n                try again later'}}\r\n            </p>\r\n\r\n            <!-- Details Card -->\r\n            <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\r\n                <div class=\"details-card\">\r\n                    <h3 class=\"details-title\">Appointment Details</h3>\r\n\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Service</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.serviceDetail?.name ?\r\n                            appointmentPayload.serviceDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Professional</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.staffDetail?.name ?\r\n                            appointmentPayload.staffDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Date & Time</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.bookingDate ?\r\n                            appointmentPayload.bookingDate.slice(0,10) :\r\n                            'N/A'}} at\r\n                            {{appointmentPayload.startTime ? appointmentPayload.startTime : 'N/A'}}</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <!-- Action Buttons -->\r\n            <!-- <div class=\"action-buttons\">\r\n                <button class=\"btn btn-outline\">View My Bookings</button>\r\n                <button class=\"btn btn-primary\">Back to Admin</button>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #skeletonLoader *ngIf=\"skeletonLoader\">\r\n    <!-- Service Skeleton Loader HTML -->\r\n    <div class=\"service-grid\">\r\n        <!-- Skeleton Card 1 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 2 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 3 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 4 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 5 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 6 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: ["body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#fff;color:#000;line-height:1.6}.main_section{position:relative;height:100%}.main_header{padding:1%;width:100%;background:#fff;height:15%}.main_body{height:75%;padding-top:0%;overflow:scroll}.header{display:flex;align-items:center;justify-content:space-between}.back-btn mat-icon{height:16px!important;width:20px!important;font-size:21px!important}.back-btn span{color:#000;font-size:15px;font-weight:500}.back-btn:hover{background-color:#f0f0f0}.header-title{flex-grow:1;margin-left:2rem}.header-title h1{font-size:20px;font-weight:600;margin-bottom:0}.header-title p{color:#666;font-size:14px}.step-indicator{font-size:14px;color:#000;font-weight:700}.progress-bar{width:100%;height:8px;background-color:#e0e0e0;margin-bottom:1rem;border-radius:10px;overflow:hidden}.w-60{width:60%!important}.progress-fill{height:100%;width:14.28%;background-color:#000}.service-selection h2{font-size:20px;font-weight:600;margin:.25rem 0}.service-selection p{color:#666;font-size:16px;margin-bottom:1rem}.main_footer{border-top:1px solid lightgrey;width:100%;background-color:#fff;height:10%}.services-grid{display:grid;grid-template-columns:48% 48%;gap:15px;padding-bottom:5px}.service-card{border:1px solid lightgrey;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-card:hover{background-color:#f9f9f9;box-shadow:0 4px 8px #0000001a}.service-card-selected{border:2px solid black;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:3rem}.service-info{flex-grow:1}.service-icon{width:40px;height:40px;border-radius:8px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;margin-right:1rem;font-size:20px;margin-top:.2rem}.service-title{font-size:18px;font-weight:600;margin-bottom:4px}.service-category{background-color:#f0f0f0;color:#000;padding:1% 4%;border-radius:12px;font-size:12px;font-weight:500;display:inline-block}.service-price{font-size:17px;font-weight:700;color:#000}.service-duration{font-size:12px;color:#666;display:flex;justify-content:center;align-items:center}.service-description{color:#666;font-size:15px;margin-bottom:.5rem;line-height:1.5}.home-visit{display:flex;align-items:center;font-size:12px;color:#666;border:1px solid lightgrey;padding:.5% 1%;border-radius:4px;background-color:#fff;width:10vw;height:3vh;white-space:nowrap;justify-content:space-around}.home-visit img{width:18px}.footer-buttons{display:flex;justify-content:space-between;align-items:center;width:60%}.back-footer-btn{color:#000;padding:12px 24px;font-size:16px}.continue-btn{background-color:#000;color:#fff;border:2px solid black;padding:.5%;border-radius:4px;font-size:15px!important;font-weight:600;cursor:pointer;width:6vw!important}.continue-btn:hover{background-color:#333}.continue-btn:disabled{background-color:#ccc;border-color:#ccc;cursor:not-allowed}.location_section{width:60%;overflow:hidden}.location_section .header h1{font-size:20px;font-weight:600;margin:.25rem 0}.location_section .header p{font-size:16px;color:#888;font-weight:400}.location-list{display:flex;flex-direction:column;gap:20px;height:64vh;overflow-x:scroll;padding-bottom:1%}.location-card{border:1px solid lightgrey;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-card:hover{box-shadow:0 4px 8px #0000001a}.location-card-selected{border:1px solid black;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-content{display:flex;align-items:center;justify-content:space-between}.location-info{display:flex;align-items:center;flex-grow:1}.location-icon{width:40px;height:40px;background-color:#d3d3d3;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:20px}.location-icon img{width:28px}.location-details{width:95%}.location-details h3{font-size:16px;font-weight:600;margin-bottom:0}.location-details p{font-size:14px;color:#aaa;line-height:1.4;margin:0}.distance{display:flex;align-items:center;color:#888;font-size:14px;margin-left:20px}.distance mat-icon{width:18px!important;height:15px!important;font-size:17px}.staff-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.staff-subtitle{font-size:16px;color:#888;font-weight:400}.staff-card{border:1px solid lightgrey;cursor:pointer;transition:all .3s ease}.staff-card:hover{box-shadow:0 4px 8px #0000001a}.staff-card-selected{border-color:#666;cursor:pointer;transition:all .3s ease}.staff-avatar{width:64px;height:64px;background-color:gray;font-size:20px;font-weight:600;color:#fff}.staff-name{font-size:16px;font-weight:600;margin-bottom:0}.staff-specialty{font-size:14px;color:gray;margin-bottom:8px}.staff-description{font-size:14px;color:gray;line-height:1.4}.rating-section{display:flex;flex-direction:column;align-items:flex-end}.star-rating{color:gold;font-size:16px;margin-bottom:4px;width:100%}.rating-number{font-size:18px;font-weight:600;color:#000}.review-count{font-size:12px;color:#888}.star-icon:before{content:\"\\2b50\";margin-right:4px}.staff_section{width:60%;overflow:hidden}.staff-list{height:64vh;overflow-x:scroll;padding-bottom:1%}.datetime-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.main_container{height:85%}.datetime-subtitle{font-size:16px;color:#888;font-weight:400}.section-card{border:1px solid lightgrey}.section-title{font-size:17px;font-weight:600;margin-bottom:20px}.date-picker-container{border:1px solid lightgrey}.date-picker-container mat-icon{height:17px;font-size:18px}.date-input{font-size:16px;padding:2%;width:30%;outline:none}.time-slot{border:1px solid lightgrey;font-size:14px;font-weight:500;padding:6%;cursor:pointer;transition:all .3s ease;text-align:center;min-width:80px}.time-slot:hover{box-shadow:0 4px 8px #0000001a}.time-slot.selected{background-color:#555;border-color:#777;color:#fff}.waitlist-section{background-color:#789;border:none;padding:4%;max-height:13vh}.waitlist-icon{color:#4ade80;font-size:18px}.waitlist-title{color:#fff;font-size:16px;font-weight:500;margin-bottom:8px}.mobile_number{border-color:#dc3545!important;box-shadow:0 0 0 .1rem #ffc3c3}.waitlist-description{color:#fff;font-size:14px;margin-bottom:0;font-weight:500}.waitlist-description .form-check-input{width:17px;height:17px;background-color:transparent}.waitlist-description .form-check-input:checked{background-color:#0d6efd}.check-icon:before{content:\"\\2713\"}.contact-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.contact-subtitle{font-size:16px;color:#888;font-weight:400}.form-section{border:1px solid lightgrey}.section-title{font-size:16px;font-weight:600;margin-bottom:24px}.form-label{font-size:14px;font-weight:500;margin-bottom:8px}.required-asterisk{color:#ff6b6b;margin-left:4px}.form-input{border:1px solid lightgrey;font-size:16px;padding:1%;transition:all .3s ease}.form-input:focus{border-color:#777}.form-input::placeholder{color:#aaa;font-size:14px}.form-textarea{border:1px solid lightgrey;font-size:16px;padding:12px 16px;resize:vertical;max-height:120px;transition:all .3s ease}.form-textarea:focus{border-color:#777}.form-textarea::placeholder{color:#aaa;font-size:14px}.optional-label{color:#888;font-size:12px;font-style:italic}.details_container{height:89%;overflow-x:scroll;padding-bottom:1%}.policies-container{background-color:#fff;border:1px solid lightgrey;padding:2rem;border-radius:12px}.policies-title{font-size:16px;font-weight:600;color:#000;margin-bottom:1rem}.policy-item{background-color:#fff;border:1px solid lightgrey;border-radius:8px;padding:1%;cursor:pointer;transition:all .3s ease}.cancellation_policies{padding:1% .5%;font-weight:500}.policy-item:hover{background-color:#f8f9fa;border-color:#ccc}.policy-item:last-of-type{margin-bottom:32px}.policy-title{font-size:14px;font-weight:500;color:#000;margin:0}.acceptance-section{display:flex;align-items:flex-start;gap:7px;margin-top:8px}.custom-checkbox{width:18px;height:20px;background-color:#fff;border:1px solid lightgrey;border-radius:4px;margin-top:2px;cursor:pointer;position:relative;flex-shrink:0;transition:all .3s ease}.custom-checkbox:hover{border-color:#999;background-color:#f8f9fa}.custom-checkbox.checked{background-color:#007bff;border-color:#007bff}.custom-checkbox.checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}.acceptance-text{font-size:14px;color:#000;line-height:1.5;margin:0}.terms-link{color:#007bff;text-decoration:none;font-weight:500;position:relative}.terms-link:hover{color:#0056b3;text-decoration:underline}.external-link-icon{margin-left:4px;font-size:12px;opacity:.8}.external-link-icon:after{content:\"\\2197\"}.payment-header h1{font-size:20px;font-weight:600;color:#000;margin:.25rem 0}.payment-subtitle{font-size:16px;color:#666;font-weight:400}.booking-summary-card{background-color:#fff;border:1px solid lightgrey;padding:2%;border-radius:12px}.summary-title{font-size:18px;font-weight:600;color:#000;margin-bottom:32px}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.summary-row:last-child{border-bottom:none;padding-bottom:0}.summary-label{font-size:16px;color:#000;font-weight:500}.summary-value{font-size:16px;color:#000;font-weight:400;text-align:right}.total-row{margin-top:16px;padding-top:16px}.total-row .summary-label,.total-row .summary-value{font-size:20px;font-weight:600}.currency-symbol{font-size:18px}.complete_booking{background:#e3fee3;border:none;padding:.5%;width:12vw!important;font-size:15px!important;font-weight:500;border-radius:4px}.complete_booking img{width:30px}.pay-now-btn{justify-content:unset!important;background:#e3fee3;border:none;padding:.5%;width:8vw!important;font-size:15px!important;font-weight:500;border-radius:4px;gap:.5rem}.pay-now-btn img{width:30px}.booking-confirmation{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;width:60%;border-radius:10px}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:80px;height:80px;position:relative}.checkmark{width:80px;height:80px;border-radius:50%;display:block;stroke-width:3;stroke:#22c55e;stroke-miterlimit:10;animation:checkmark-fill .4s ease-in-out .4s forwards,checkmark-scale .3s ease-in-out .9s both}.checkmark-circle-path{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:3;stroke-miterlimit:10;stroke:#22c55e;fill:none;animation:checkmark-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;stroke:#22c55e;stroke-width:3;animation:checkmark-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes checkmark-stroke{to{stroke-dashoffset:0}}@keyframes checkmark-scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes checkmark-fill{to{box-shadow:inset 0 0 0 30px #22c55e}}.confirmation-content{width:100%;height:80%}.confirmation-title{font-size:18px;font-weight:700}.confirmation-message{font-size:1rem;margin-bottom:1rem;line-height:1.6;font-weight:500}.details-card{background:#ffffff1a;border:1px solid lightgrey;border-radius:16px;padding:1.5rem;margin-bottom:2rem;width:35vw}.details-title{font-size:1.25rem;font-weight:600;margin:0 0 1.5rem}.details-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.9rem;font-weight:500}.detail-value{font-weight:600;font-size:1rem}.action-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease;border:none;min-width:140px}.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff}.btn-outline:hover{background:#ffffff1a;border-color:#ffffff80}.btn-primary{background:#fff;color:#1f2937}.btn-primary:hover{background:#f3f4f6;transform:translateY(-1px)}.datepicker-popover{position:absolute;z-index:1000;margin-top:8px;border-radius:16px;overflow:hidden;box-shadow:0 12px 28px #0000001f,0 2px 4px #00000014;background:#fff;border:1px solid rgba(0,0,0,.06);width:17vw}::ng-deep .datepicker-calendar{border-radius:16px!important;overflow:hidden!important;font-family:Segoe UI,Roboto,sans-serif!important;width:100%!important}::ng-deep .mat-calendar-header{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;padding:3px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:60px!important;border-radius:16px 16px 0 0!important}::ng-deep .mat-calendar-controls{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;margin:2% calc(4.7142857143% - 16px)!important}::ng-deep .mat-calendar-period-button{color:#fff!important;font-weight:700!important;font-size:16px!important;letter-spacing:.5px!important;background:transparent!important;border:none!important;padding:12px 16px!important;border-radius:8px!important;transition:all .3s ease!important;flex-grow:1!important;text-align:left!important;margin:0!important;order:1!important}::ng-deep .mat-calendar-period-button:hover{background:#ffffff26!important;transform:translateY(-1px)!important}::ng-deep .mat-calendar-header .mat-calendar-controls>div{display:flex;order:2!important}::ng-deep .mat-calendar-previous-button,::ng-deep .mat-calendar-next-button{color:#fff!important;width:40px!important;height:40px!important;border-radius:50%!important;background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;transition:all .3s ease!important;margin:0 4px!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mat-calendar-previous-button:hover,::ng-deep .mat-calendar-next-button:hover{background:#ffffff40!important;transform:scale(1.05)!important}::ng-deep .mat-calendar-arrow{fill:#fff!important;width:20px!important;height:20px!important}::ng-deep .mat-calendar-content{padding:10px 16px!important;background:#fff!important}::ng-deep .mat-calendar-table-header th{color:#6b7280!important;font-weight:600!important;font-size:12px!important;text-align:center!important;padding-bottom:12px!important;text-transform:uppercase!important}::ng-deep .mat-calendar-table{border-spacing:0!important;border-collapse:collapse!important;width:100%!important}::ng-deep .mat-calendar-body-cell{height:44px!important;width:44px!important;border-radius:12px!important}::ng-deep .mat-calendar-body-cell-content{width:33px!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-weight:500!important;font-size:14px!important;color:#374151!important;transition:all .3s cubic-bezier(.4,0,.2,1)!important}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover .mat-calendar-body-cell-content:not(.mat-calendar-body-selected){background:#667eea1a!important;color:#667eea!important;transform:scale(1.05)!important}::ng-deep .mat-calendar-body-selected{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;box-shadow:0 4px 12px #677eea4d!important}::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected){border:none;color:#667eea!important;font-weight:700!important}::ng-deep .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){color:#d1d5db!important}.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;padding:20px;width:60%}.service-card{border:1px solid #e5e5e5;border-radius:8px;padding:20px;background:#fff;box-shadow:0 2px 4px #0000001a}.service-header{display:flex;align-items:flex-start;gap:15px;margin-bottom:15px}.service-content{flex:1;display:flex;flex-direction:column;gap:8px}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:40px;height:40px;border-radius:50%;flex-shrink:0}.skeleton-title{height:20px;width:70%}.skeleton-price{height:18px;width:50%;align-self:flex-end}.skeleton-duration{height:14px;width:40%;align-self:flex-end}.skeleton-category{height:24px;width:25%;border-radius:12px;margin-bottom:10px}.skeleton-description{height:16px;width:85%;margin-bottom:15px}.skeleton-badge{height:32px;width:45%;border-radius:16px;margin-top:10px}@media (max-width: 768px){.service-grid{grid-template-columns:1fr;gap:15px;padding:15px}.service-card{padding:15px}}.time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;max-width:400px;margin:0 auto}.skeleton-time-slot{height:44px;border-radius:8px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;border:1px solid #e5e5e5;position:relative}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-time-slot:nth-child(2n){animation:skeleton-pulse 2s infinite}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.7}}@media (max-width: 480px){.time-slot-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}.skeleton-time-slot{height:40px}}@media (max-width: 320px){.time-slot-grid{grid-template-columns:1fr}}@media screen and (min-width:320px) and (max-width:475px){.back-btn{gap:.25rem!important;margin:0!important}.back-btn span{color:#000;font-size:12px;font-weight:500;white-space:nowrap}.back-btn mat-icon{font-size:16px!important;margin-bottom:0!important}.header-title{display:flex;align-items:center;margin-bottom:0rem!important}.header-title h1{font-size:16px!important}.main_header .header{padding:3%}.date_section,.service_section,.location_section,.contact_section,.payment_section{width:100%!important;padding:0% 5%}.service_section h2{font-size:17px!important;margin-bottom:0!important}.service_section p{font-size:14px!important}.main_section{height:100vh}.services-grid{display:flex;justify-content:center;flex-wrap:wrap}.service-card,.service-card-selected{width:90vw!important}.home-visit{width:40vw!important}.main_body{height:calc(100% - 123px)!important}.back-footer-btn{padding:12px 2px!important}.footer-buttons{padding:0% 3%!important;width:100%!important}.continue-btn{width:22vw!important}.main_container{flex-wrap:wrap;height:100%!important}.date_section{overflow:hidden}.date_section .time_selection{height:60%}.datepicker-popover{width:60vw!important}.details_container{height:90%!important;justify-content:space-around}.complete_booking{width:39vw!important}.booking_confirmation,.details-card{width:100%!important}.datetime-header h1{margin:0!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i15.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: LettersOnlyDirective, selector: "[simpoLettersOnly]" }, { kind: "directive", type: NumbersOnlyDirective, selector: "[simpoNumbersOnly]" }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppointmentBookingComponent, isStandalone: true, selector: "simpo-appointment-booking", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)", "document:click": "closeOnOutsideClick()" } }, providers: [MessageService], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section class=\"main_section\">\r\n    <div class=\"main_header\">\r\n        <div class=\"header d-flex justify-content-between align-items-center\">\r\n            <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\r\n                (click)=\"goBack()\">\r\n                <mat-icon>keyboard_backspace</mat-icon><span *ngIf=\"screenWidth > 475\">Back to Home</span>\r\n            </div>\r\n            <div class=\"header-title\">\r\n                <h1>Book New Appointment</h1>\r\n                <p>{{businessName ?? \"N/A\" }}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\r\n        </div>\r\n    </div>\r\n    <div class=\"main_body w-100 d-flex justify-content-center\"><ng-container *ngIf=\"selectedTab === 'serviceListing'\">\r\n            <ng-container *ngIf=\"!skeletonLoader\">\r\n                <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'locationListing'\">\r\n            <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'staffListing'\">\r\n            <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\r\n            <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='contactDetails'\">\r\n            <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='paymentTab'\">\r\n            <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\r\n            <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"main_footer d-flex justify-content-center align-items-center\" *ngIf=\"selectedTab!=='statusTemplate'\">\r\n        <div class=\"footer-buttons\" [ngStyle]=\"{'justify-content': selectedTab != 'serviceListing' ? 'space-between' : 'end'}\">\r\n            <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\" *ngIf=\"selectedTab != 'serviceListing'\">Back</span>\r\n            <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\r\n                *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\r\n            <button class=\"cursor-pointer d-flex justify-content-evenly align-items-center\"\r\n                *ngIf=\"selectedTab==='paymentTab'\" (click)=\"checkPayment()\"\r\n                [ngClass]=\"{'pay-now-btn' : selectedService?.depositAmount?.depositRequired,'complete_booking' : !selectedService?.depositAmount?.depositRequired}\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">{{selectedService?.depositAmount?.depositRequired\r\n                ? 'Pay Now' : 'Complete Booking'}}</button>\r\n        </div>\r\n    </div>\r\n</section>\r\n<ng-template #serviceListing>\r\n    <div class=\"w-60 service_section\">\r\n        <div class=\"service-selection\">\r\n            <h2>Select a Service</h2>\r\n            <p>Choose the service you'd like to book</p>\r\n\r\n            <div class=\"services-grid\">\r\n                <ng-container *ngFor=\"let service of serviceData\">\r\n                    <div class=\"\" (click)=\"selectService(service)\"\r\n                        [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\r\n                        <div class=\" service-header\">\r\n                            <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\r\n                            <div class=\"service-info\">\r\n                                <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\r\n                                <div class=\"service-category\">Wellness</div>\r\n                            </div>\r\n                            <div>\r\n                                <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\r\n                                    service?.priceDetails?.price : 'N/A' }}</div>\r\n                                <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"service-description\" *ngIf=\"service?.description\">\r\n                            {{service?.description ? service?.description : 'N/A'}}\r\n                        </div>\r\n                        <div class=\"home-visit\" *ngIf=\"service?.homeAppointmentAvailable\"><img\r\n                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\r\n                            Visit Available</div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <!-- <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83D\uDC64</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">General Consultation</div>\r\n                            <div class=\"service-category\">Medical</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B9800</div>\r\n                            <div class=\"service-duration\">30 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Comprehensive health consultation\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83E\uDDE0</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Mental Health Counseling</div>\r\n                            <div class=\"service-category\">Mental Health</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91500</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional psychological support\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\u2702</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Hair Cut & Styling</div>\r\n                            <div class=\"service-category\">Beauty</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91200</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional hair cutting and styling\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #locationListing>\r\n    <div class=\"location_section\">\r\n        <div class=\"header flex-column align-items-start\">\r\n            <h1>Choose Location</h1>\r\n            <p>Select where you'd like to receive the service</p>\r\n        </div>\r\n\r\n        <div class=\"location-list\">\r\n            <ng-container *ngFor=\"let location of locationData\">\r\n                <div (click)=\"selectLocation(location)\"\r\n                    [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\r\n                    <div class=\"location-content\">\r\n                        <div class=\"location-info\">\r\n                            <div class=\"location-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\r\n                            </div>\r\n                            <div class=\"location-details\">\r\n                                <div class=\"d-flex justify-content-between align-items-center\">\r\n                                    <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\r\n                                    <!-- <div class=\"distance\"><mat-icon>location_on</mat-icon> 2.3 km</div> -->\r\n                                </div>\r\n                                <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\r\n                                    {{location?.addressDetails?.state}} {{location?.pincode}}</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <!-- <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon branch-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Branch Clinic</h3>\r\n                            <p>456 Care Avenue, Health Zone, Mumbai 400015</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">5.8 km</div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon home-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Home Visit</h3>\r\n                            <p>Your Location</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">0 km</div>\r\n                </div>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #staffListing>\r\n    <div class=\"w-60 overflow-hidden staff-listing\">\r\n        <div class=\"d-flex w-100 h-100\">\r\n            <div class=\"w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"staff-header mb-3\">\r\n                    <h1>Select Staff Member</h1>\r\n                    <p class=\"staff-subtitle mb-0\">Choose your preferred professional</p>\r\n                </div>\r\n\r\n                <!-- Staff Cards -->\r\n                <div class=\"d-flex flex-column gap-4 staff-list\">\r\n                    <ng-container *ngFor=\"let staff of staffData\">\r\n                        <div class=\"card rounded-3 p-3\" (click)=\"selectStaff(staff)\"\r\n                            [ngClass]=\"{ 'staff-card-selected' : staff?.selected, 'staff-card': !staff?.selected }\">\r\n                            <div class=\"d-flex align-items-start justify-content-between\">\r\n                                <div class=\"d-flex align-items-start flex-grow-1\">\r\n                                    <div\r\n                                        class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\r\n                                        {{staff?.staffName.slice(0,3).toUpperCase()}}\r\n                                    </div>\r\n                                    <div class=\"staff-details flex-grow-1\">\r\n                                        <h3 class=\"staff-name\">{{staff?.staffName ? staff?.staffName : 'N/A'}}</h3>\r\n                                        <p class=\"staff-specialty\">General Medicine</p>\r\n                                        <!-- <p class=\"staff-description mb-0\">Experienced physician with 10+ years in\r\n                                            general\r\n                                            medicine and wellness care.</p> -->\r\n                                    </div>\r\n                                </div>\r\n                                <!-- <div class=\"rating-section\">\r\n                                    <div class=\"star-rating d-flex align-items-center\">\r\n                                        <span class=\"star-icon\"></span>\r\n                                        <span class=\"rating-number\">4.9</span>\r\n                                    </div>\r\n                                    <div class=\"review-count\">156 reviews</div>\r\n                                </div> -->\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #dateSelection>\r\n    <div class=\"w-60 date_section\">\r\n        <div class=\"row justify-content-center h-100\">\r\n            <div class=\"col-12 h-100\">\r\n                <div class=\"datetime-header mb-2\">\r\n                    <h1>Select Date & Time</h1>\r\n                    <p class=\"datetime-subtitle mb-0\">Choose when you'd like your appointment</p>\r\n                </div>\r\n\r\n                <!-- Main Content -->\r\n                <div class=\"d-flex gap-4 main_container\">\r\n                    <!-- Left Column - Date Selection -->\r\n                    <div [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\r\n                        <div class=\"section-card card rounded-3 p-4 h-100\">\r\n                            <h3 class=\"section-title\">Select Date</h3>\r\n\r\n                            <div class=\"date-picker-container d-flex align-items-center justify-content-between\"\r\n                                (click)=\"$event.stopPropagation()\">\r\n                                <input type=\"text\" class=\"date-input border-0 rounded-2\" placeholder=\"dd-mm-yyyy\"\r\n                                    [value]=\"selectedDateStr\" readonly (click)=\"toggleCalendar($event)\">\r\n\r\n                                <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\r\n                            </div>\r\n                            <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\r\n                                <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\r\n                                    <mat-calendar [(selected)]=\"selectedDate\" [dateFilter]=\"dateFilter\"\r\n                                        (selectedChange)=\"onDateSelected($event)\" class=\"datepicker-calendar\">\r\n                                    </mat-calendar>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Right Column - Time Selection -->\r\n                    <div class=\"time_selection\" [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\r\n                        <div class=\"section-card card h-100 rounded-3 p-4\">\r\n                            <h3 class=\"section-title\">Available Times</h3>\r\n\r\n                            <!-- Time Slots Grid -->\r\n                            <div class=\"row g-2 mb-4 overflow-scroll\">\r\n                                <ng-container *ngIf=\"!skeletonLoader ;else slotsLoader\">\r\n                                    <div class=\"col-4\" *ngFor=\"let time of locationTiming\">\r\n                                        <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\r\n                                            (click)=\"selectTimeSlot(time)\">{{time ?\r\n                                            time?.value : 'N/A'}}</div>\r\n                                    </div>\r\n                                </ng-container>\r\n                                <ng-template #slotsLoader>\r\n                                    <!-- Time Slot Grid Skeleton Loader HTML -->\r\n                                    <div class=\"time-slot-grid\">\r\n                                        <!-- Row 1 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 2 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 3 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 4 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 5 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 6 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                    </div>\r\n\r\n                                </ng-template>\r\n                            </div>\r\n\r\n                            <!-- Waitlist Section -->\r\n                            <!-- <div class=\"waitlist-section rounded-3\">\r\n                                <div class=\"d-flex align-items-start\">\r\n                                    <div class=\"d-flex h-100 justify-content-between flex-column\">\r\n                                        <div class=\"waitlist-title d-flex align-items-center gap-2\"><span\r\n                                                class=\"waitlist-icon check-icon\"></span>No\r\n                                            slots available?</div>\r\n                                        <div class=\"waitlist-description d-flex align-items-center gap-2\">\r\n                                            <input class=\"form-check-input cursor-pointer\" type=\"checkbox\"\r\n                                                id=\"flexCheckChecked\">\r\n                                            Add me to the waitlist for earlier\r\n                                            availability\r\n                                        </div>\r\n                                    </div>\r\n                                    <div>\r\n                                    </div>\r\n                                </div>\r\n                            </div> -->\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n<ng-template #contactDetails>\r\n    <div class=\"w-60 contact_section overflow-hidden\">\r\n        <div class=\"d-flex h-100\">\r\n            <div class=\"h-100 w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"contact-header mb-2\">\r\n                    <h1>Contact Details</h1>\r\n                    <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\r\n                </div>\r\n\r\n                <!-- Form Sections -->\r\n                <div class=\"d-flex gap-3 details_container flex-column w-100\">\r\n                    <!-- Left Column - Personal Information -->\r\n                    <div class=\"d-flex gap-4\">\r\n                        <div\r\n                            [ngClass]=\"{'w-50' : selectedService?.homeAppointmentAvailable, 'w-100' : !selectedService?.homeAppointmentAvailable}\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Personal Information</h3>\r\n\r\n                                <!-- Full Name -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Full Name\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"text\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.name\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\" simpoLettersOnly>\r\n                                </div>\r\n\r\n                                <!-- Email Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Email Address\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"email\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.email\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\">\r\n                                </div>\r\n\r\n                                <!-- Phone Number -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Phone Number\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"tel\" class=\"form-control  rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\" simpoNumbersOnly\r\n                                        [ngClass]=\"{'mobile_number' : appointmentPayload.customerDetail.phoneNumber.length != 10}\">\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- Right Column - Home Visit Details -->\r\n                        <div class=\"w-50\" *ngIf=\"selectedService?.homeAppointmentAvailable\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Home Visit Details</h3>\r\n\r\n                                <!-- Home Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Home Address\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Enter your complete address\" [(ngModel)]=\"homeAddress\"></textarea>\r\n                                </div>\r\n\r\n                                <!-- Special Instructions -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Special Instructions\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Any special instructions for the professional (optional)\" [(ngModel)]=\"instructions\"></textarea>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"policies-container\">\r\n                        <!-- Header -->\r\n                        <h2 class=\"policies-title\">Policies & Terms</h2>\r\n\r\n                        <!-- Policy Items -->\r\n                        <div class=\"policy-items-container d-flex flex-column gap-3\">\r\n                            <!-- Cancellation Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showCancellationPolicy = !showCancellationPolicy\">\r\n                                <h3 class=\"policy-title\">Cancellation Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showCancellationPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n\r\n                            <!-- Rescheduling Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showReducingPolicy = !showReducingPolicy\">\r\n                                <h3 class=\"policy-title\">Rescheduling Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showReducingPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Acceptance Section -->\r\n                        <div class=\"acceptance-section\">\r\n                            <input type=\"checkbox\" class=\"custom-checkbox\" [(ngModel)]=\"termsAndConditions\"\r\n                                (ngModelChange)=\"checkRequiredValues()\">\r\n                            <p class=\"acceptance-text\">\r\n                                I understand and accept the cancellation & rescheduling policies and\r\n                                <span class=\"terms-link\">Terms & Conditions<span\r\n                                        class=\"external-link-icon\"></span></span>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #paymentTab>\r\n    <div class=\"w-60 payment_section\">\r\n        <div class=\"w-100 h-100\">\r\n            <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\r\n                <!-- Header Section -->\r\n                <div class=\"payment-header mb-3 w-100\">\r\n                    <h1>Payment & Confirmation</h1>\r\n                    <p class=\"payment-subtitle mb-0\">Review your booking and complete payment</p>\r\n                </div>\r\n\r\n                <!-- Booking Summary Card -->\r\n                <div class=\"booking-summary-card\" [ngClass]=\"{'w-100' : screenWidth < 475,'w-50':screenWidth > 475}\">\r\n                    <h2 class=\"summary-title\">Booking Summary</h2>\r\n\r\n                    <!-- Service -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Service</div>\r\n                        <div class=\"summary-value\">{{selectedService?.name ? selectedService?.name : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Professional -->\r\n                    <div class=\"summary-row\" *ngIf=\"selectedStaff?.staffName\">\r\n                        <div class=\"summary-label\">Professional</div>\r\n                        <div class=\"summary-value\">{{selectedStaff?.staffName ? selectedStaff?.staffName : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Location -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Location</div>\r\n                        <div class=\"summary-value\">{{selectedLocation?.storeName ? selectedLocation?.storeName : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Date & Time -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Date & Time</div>\r\n                        <div class=\"summary-value\">{{selectedDateStr ? (selectedDateStr) : 'N/A'}} at\r\n                            {{selectedTime ? selectedTime.value : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Duration -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Duration</div>\r\n                        <div class=\"summary-value\">{{selectedService?.duration ? selectedService?.duration : 'N/A'}}\r\n                            minutes</div>\r\n                    </div>\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Tax Percent</div>\r\n                        <div class=\"summary-value\">{{selectedService?.priceDetails?.taxPercent ?\r\n                            selectedService?.priceDetails?.taxPercent : 'N/A'}}%</div>\r\n                    </div>\r\n                    <!-- Total -->\r\n                    <div class=\"summary-row total-row\">\r\n                        <div class=\"summary-label\">Total</div>\r\n                        <div class=\"summary-value\">\r\n                            <span class=\"currency-symbol\">\u20B9</span>{{selectedService?.priceDetails?.totalPrice ?\r\n                            selectedService?.priceDetails?.totalPrice : '0'}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #statusTemplate>\r\n    <div class=\"booking-confirmation\">\r\n        <!-- Success Icon -->\r\n        <div class=\"success-icon\">\r\n            <div class=\"checkmark-circle\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"apiStatus\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Main Content -->\r\n        <div class=\"confirmation-content\">\r\n            <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\r\n            <p class=\"confirmation-message\">\r\n                {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\r\n                try again later'}}\r\n            </p>\r\n\r\n            <!-- Details Card -->\r\n            <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\r\n                <div class=\"details-card\">\r\n                    <h3 class=\"details-title\">Appointment Details</h3>\r\n\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Service</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.serviceDetail?.name ?\r\n                            appointmentPayload.serviceDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n\r\n                    <div class=\"details-row\" *ngIf=\"appointmentPayload?.staffDetail?.name\">\r\n                        <span class=\"detail-label\">Professional</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.staffDetail?.name ?\r\n                            appointmentPayload.staffDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Date & Time</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.bookingDate ?\r\n                            appointmentPayload.bookingDate.slice(0,10) :\r\n                            'N/A'}} at\r\n                            {{appointmentPayload.startTime ? appointmentPayload.startTime : 'N/A'}}</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <!-- Action Buttons -->\r\n            <!-- <div class=\"action-buttons\">\r\n                <button class=\"btn btn-outline\">View My Bookings</button>\r\n                <button class=\"btn btn-primary\">Back to Admin</button>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #skeletonLoader *ngIf=\"skeletonLoader\">\r\n    <!-- Service Skeleton Loader HTML -->\r\n    <div class=\"service-grid\">\r\n        <!-- Skeleton Card 1 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 2 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 3 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 4 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 5 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 6 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: ["body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#fff;color:#000;line-height:1.6}.main_section{position:relative;height:100%}.main_header{padding:1%;width:100%;background:#fff;height:15%}.main_body{height:75%;padding-top:0%;overflow:scroll}.header{display:flex;align-items:center;justify-content:space-between}.back-btn mat-icon{height:16px!important;width:20px!important;font-size:21px!important}.back-btn span{color:#000;font-size:15px;font-weight:500}.back-btn:hover{background-color:#f0f0f0}.header-title{flex-grow:1;margin-left:2rem}.header-title h1{font-size:20px;font-weight:600;margin-bottom:0}.header-title p{color:#666;font-size:14px}.step-indicator{font-size:14px;color:#000;font-weight:700}.progress-bar{width:100%;height:8px;background-color:#e0e0e0;margin-bottom:1rem;border-radius:10px;overflow:hidden}.w-60{width:60%!important}.progress-fill{height:100%;width:14.28%;background-color:#000}.service-selection h2{font-size:20px;font-weight:600;margin:.25rem 0}.service-selection p{color:#666;font-size:16px;margin-bottom:1rem}.main_footer{border-top:1px solid lightgrey;width:100%;background-color:#fff;height:10%}.services-grid{display:grid;grid-template-columns:48% 48%;gap:15px;padding-bottom:5px}.service-card{border:1px solid lightgrey;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-card:hover{background-color:#f9f9f9;box-shadow:0 4px 8px #0000001a}.service-card-selected{border:2px solid black;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:3rem}.service-info{flex-grow:1}.service-icon{width:40px;height:40px;border-radius:8px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;margin-right:1rem;font-size:20px;margin-top:.2rem}.service-title{font-size:18px;font-weight:600;margin-bottom:4px}.service-category{background-color:#f0f0f0;color:#000;padding:1% 4%;border-radius:12px;font-size:12px;font-weight:500;display:inline-block}.service-price{font-size:17px;font-weight:700;color:#000}.service-duration{font-size:12px;color:#666;display:flex;justify-content:center;align-items:center}.service-description{color:#666;font-size:15px;margin-bottom:.5rem;line-height:1.5}.home-visit{display:flex;align-items:center;font-size:12px;color:#666;border:1px solid lightgrey;padding:.5% 1%;border-radius:4px;background-color:#fff;width:10vw;height:3vh;white-space:nowrap;justify-content:space-around}.home-visit img{width:18px}.footer-buttons{display:flex;justify-content:space-between;align-items:center;width:60%}.back-footer-btn{color:#000;padding:12px 24px;font-size:16px}.continue-btn{background-color:#000;color:#fff;border:2px solid black;padding:.5%;border-radius:4px;font-size:15px!important;font-weight:600;cursor:pointer;width:6vw!important}.continue-btn:hover{background-color:#333}.continue-btn:disabled{background-color:#ccc;border-color:#ccc;cursor:not-allowed}.location_section{width:60%;overflow:hidden}.location_section .header h1{font-size:20px;font-weight:600;margin:.25rem 0}.location_section .header p{font-size:16px;color:#888;font-weight:400}.location-list{display:flex;flex-direction:column;gap:20px;height:64vh;overflow-x:scroll;padding-bottom:1%}.location-card{border:1px solid lightgrey;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-card:hover{box-shadow:0 4px 8px #0000001a}.location-card-selected{border:1px solid black;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-content{display:flex;align-items:center;justify-content:space-between}.location-info{display:flex;align-items:center;flex-grow:1}.location-icon{width:40px;height:40px;background-color:#d3d3d3;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:20px}.location-icon img{width:28px}.location-details{width:95%}.location-details h3{font-size:16px;font-weight:600;margin-bottom:0}.location-details p{font-size:14px;color:#aaa;line-height:1.4;margin:0}.distance{display:flex;align-items:center;color:#888;font-size:14px;margin-left:20px}.distance mat-icon{width:18px!important;height:15px!important;font-size:17px}.staff-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.staff-subtitle{font-size:16px;color:#888;font-weight:400}.staff-card{border:1px solid lightgrey;cursor:pointer;transition:all .3s ease}.staff-card:hover{box-shadow:0 4px 8px #0000001a}.staff-card-selected{border-color:#666;cursor:pointer;transition:all .3s ease}.staff-avatar{width:64px;height:64px;background-color:gray;font-size:20px;font-weight:600;color:#fff}.staff-name{font-size:16px;font-weight:600;margin-bottom:0}.staff-specialty{font-size:14px;color:gray;margin-bottom:8px}.staff-description{font-size:14px;color:gray;line-height:1.4}.rating-section{display:flex;flex-direction:column;align-items:flex-end}.star-rating{color:gold;font-size:16px;margin-bottom:4px;width:100%}.rating-number{font-size:18px;font-weight:600;color:#000}.review-count{font-size:12px;color:#888}.star-icon:before{content:\"\\2b50\";margin-right:4px}.staff_section{width:60%;overflow:hidden}.staff-list{height:64vh;overflow-x:scroll;padding-bottom:1%}.datetime-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.main_container{height:85%}.datetime-subtitle{font-size:16px;color:#888;font-weight:400}.section-card{border:1px solid lightgrey}.section-title{font-size:17px;font-weight:600;margin-bottom:20px}.date-picker-container{border:1px solid lightgrey}.date-picker-container mat-icon{height:17px;font-size:18px}.date-input{font-size:16px;padding:2%;width:30%;outline:none}.time-slot{border:1px solid lightgrey;font-size:14px;font-weight:500;padding:6%;cursor:pointer;transition:all .3s ease;text-align:center;min-width:80px}.time-slot:hover{box-shadow:0 4px 8px #0000001a}.time-slot.selected{background-color:#555;border-color:#777;color:#fff}.waitlist-section{background-color:#789;border:none;padding:4%;max-height:13vh}.waitlist-icon{color:#4ade80;font-size:18px}.waitlist-title{color:#fff;font-size:16px;font-weight:500;margin-bottom:8px}.mobile_number{border-color:#dc3545!important;box-shadow:0 0 0 .1rem #ffc3c3}.waitlist-description{color:#fff;font-size:14px;margin-bottom:0;font-weight:500}.waitlist-description .form-check-input{width:17px;height:17px;background-color:transparent}.waitlist-description .form-check-input:checked{background-color:#0d6efd}.check-icon:before{content:\"\\2713\"}.contact-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.contact-subtitle{font-size:16px;color:#888;font-weight:400}.form-section{border:1px solid lightgrey}.section-title{font-size:16px;font-weight:600;margin-bottom:24px}.form-label{font-size:14px;font-weight:500;margin-bottom:8px}.required-asterisk{color:#ff6b6b;margin-left:4px}.form-input{border:1px solid lightgrey;font-size:16px;padding:1%;transition:all .3s ease}.form-input:focus{border-color:#777}.form-input::placeholder{color:#aaa;font-size:14px}.form-textarea{border:1px solid lightgrey;font-size:16px;padding:12px 16px;resize:vertical;max-height:120px;transition:all .3s ease}.form-textarea:focus{border-color:#777}.form-textarea::placeholder{color:#aaa;font-size:14px}.optional-label{color:#888;font-size:12px;font-style:italic}.details_container{height:89%;overflow-x:scroll;padding-bottom:1%}.policies-container{background-color:#fff;border:1px solid lightgrey;padding:2rem;border-radius:12px}.policies-title{font-size:16px;font-weight:600;color:#000;margin-bottom:1rem}.policy-item{background-color:#fff;border:1px solid lightgrey;border-radius:8px;padding:1%;cursor:pointer;transition:all .3s ease}.cancellation_policies{padding:1% .5%;font-weight:500}.policy-item:hover{background-color:#f8f9fa;border-color:#ccc}.policy-item:last-of-type{margin-bottom:32px}.policy-title{font-size:14px;font-weight:500;color:#000;margin:0}.acceptance-section{display:flex;align-items:flex-start;gap:7px;margin-top:8px}.custom-checkbox{width:18px;height:20px;background-color:#fff;border:1px solid lightgrey;border-radius:4px;margin-top:2px;cursor:pointer;position:relative;flex-shrink:0;transition:all .3s ease}.custom-checkbox:hover{border-color:#999;background-color:#f8f9fa}.custom-checkbox.checked{background-color:#007bff;border-color:#007bff}.custom-checkbox.checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}.acceptance-text{font-size:14px;color:#000;line-height:1.5;margin:0}.terms-link{color:#007bff;text-decoration:none;font-weight:500;position:relative}.terms-link:hover{color:#0056b3;text-decoration:underline}.external-link-icon{margin-left:4px;font-size:12px;opacity:.8}.external-link-icon:after{content:\"\\2197\"}.payment-header h1{font-size:20px;font-weight:600;color:#000;margin:.25rem 0}.payment-subtitle{font-size:16px;color:#666;font-weight:400}.booking-summary-card{background-color:#fff;border:1px solid lightgrey;padding:2%;border-radius:12px}.summary-title{font-size:18px;font-weight:600;color:#000;margin-bottom:32px}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.summary-row:last-child{border-bottom:none;padding-bottom:0}.summary-label{font-size:16px;color:#000;font-weight:500}.summary-value{font-size:16px;color:#000;font-weight:400;text-align:right}.total-row{margin-top:16px;padding-top:16px}.total-row .summary-label,.total-row .summary-value{font-size:20px;font-weight:600}.currency-symbol{font-size:18px}.complete_booking{background:#e3fee3;border:none;padding:.5%;width:12vw!important;font-size:15px!important;font-weight:500;border-radius:4px}.complete_booking img{width:30px}.pay-now-btn{justify-content:unset!important;background:#e3fee3;border:none;padding:.5%;width:8vw!important;font-size:15px!important;font-weight:500;border-radius:4px;gap:.5rem}.pay-now-btn img{width:30px}.booking-confirmation{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;width:60%;border-radius:10px}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:80px;height:80px;position:relative}.checkmark{width:80px;height:80px;border-radius:50%;display:block;stroke-width:3;stroke:#22c55e;stroke-miterlimit:10;animation:checkmark-fill .4s ease-in-out .4s forwards,checkmark-scale .3s ease-in-out .9s both}.checkmark-circle-path{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:3;stroke-miterlimit:10;stroke:#22c55e;fill:none;animation:checkmark-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;stroke:#22c55e;stroke-width:3;animation:checkmark-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes checkmark-stroke{to{stroke-dashoffset:0}}@keyframes checkmark-scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes checkmark-fill{to{box-shadow:inset 0 0 0 30px #22c55e}}.confirmation-content{width:100%;height:80%}.confirmation-title{font-size:18px;font-weight:700}.confirmation-message{font-size:1rem;margin-bottom:1rem;line-height:1.6;font-weight:500}.details-card{background:#ffffff1a;border:1px solid lightgrey;border-radius:16px;padding:1.5rem;margin-bottom:2rem;width:35vw}.details-title{font-size:1.25rem;font-weight:600;margin:0 0 1.5rem}.details-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.9rem;font-weight:500}.detail-value{font-weight:600;font-size:1rem}.action-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease;border:none;min-width:140px}.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff}.btn-outline:hover{background:#ffffff1a;border-color:#ffffff80}.btn-primary{background:#fff;color:#1f2937}.btn-primary:hover{background:#f3f4f6;transform:translateY(-1px)}.datepicker-popover{position:absolute;z-index:1000;margin-top:8px;border-radius:16px;overflow:hidden;box-shadow:0 12px 28px #0000001f,0 2px 4px #00000014;background:#fff;border:1px solid rgba(0,0,0,.06);width:17vw}::ng-deep .datepicker-calendar{border-radius:16px!important;overflow:hidden!important;font-family:Segoe UI,Roboto,sans-serif!important;width:100%!important}::ng-deep .mat-calendar-header{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;padding:3px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:60px!important;border-radius:16px 16px 0 0!important}::ng-deep .mat-calendar-controls{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;margin:2% calc(4.7142857143% - 16px)!important}::ng-deep .mat-calendar-period-button{color:#fff!important;font-weight:700!important;font-size:16px!important;letter-spacing:.5px!important;background:transparent!important;border:none!important;padding:12px 16px!important;border-radius:8px!important;transition:all .3s ease!important;flex-grow:1!important;text-align:left!important;margin:0!important;order:1!important}::ng-deep .mat-calendar-period-button:hover{background:#ffffff26!important;transform:translateY(-1px)!important}::ng-deep .mat-calendar-header .mat-calendar-controls>div{display:flex;order:2!important}::ng-deep .mat-calendar-previous-button,::ng-deep .mat-calendar-next-button{color:#fff!important;width:40px!important;height:40px!important;border-radius:50%!important;background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;transition:all .3s ease!important;margin:0 4px!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mat-calendar-previous-button:hover,::ng-deep .mat-calendar-next-button:hover{background:#ffffff40!important;transform:scale(1.05)!important}::ng-deep .mat-calendar-arrow{fill:#fff!important;width:20px!important;height:20px!important}::ng-deep .mat-calendar-content{padding:10px 16px!important;background:#fff!important}::ng-deep .mat-calendar-table-header th{color:#6b7280!important;font-weight:600!important;font-size:12px!important;text-align:center!important;padding-bottom:12px!important;text-transform:uppercase!important}::ng-deep .mat-calendar-table{border-spacing:0!important;border-collapse:collapse!important;width:100%!important}::ng-deep .mat-calendar-body-cell{height:44px!important;width:44px!important;border-radius:12px!important}::ng-deep .mat-calendar-body-cell-content{width:33px!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-weight:500!important;font-size:14px!important;color:#374151!important;transition:all .3s cubic-bezier(.4,0,.2,1)!important}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover .mat-calendar-body-cell-content:not(.mat-calendar-body-selected){background:#667eea1a!important;color:#667eea!important;transform:scale(1.05)!important}::ng-deep .mat-calendar-body-selected{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;box-shadow:0 4px 12px #677eea4d!important}::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected){border:none;color:#667eea!important;font-weight:700!important}::ng-deep .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){color:#d1d5db!important}.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;padding:20px;width:60%}.service-card{border:1px solid #e5e5e5;border-radius:8px;padding:20px;background:#fff;box-shadow:0 2px 4px #0000001a}.service-header{display:flex;align-items:flex-start;gap:15px;margin-bottom:15px}.service-content{flex:1;display:flex;flex-direction:column;gap:8px}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:40px;height:40px;border-radius:50%;flex-shrink:0}.skeleton-title{height:20px;width:70%}.skeleton-price{height:18px;width:50%;align-self:flex-end}.skeleton-duration{height:14px;width:40%;align-self:flex-end}.skeleton-category{height:24px;width:25%;border-radius:12px;margin-bottom:10px}.skeleton-description{height:16px;width:85%;margin-bottom:15px}.skeleton-badge{height:32px;width:45%;border-radius:16px;margin-top:10px}@media (max-width: 768px){.service-grid{grid-template-columns:1fr;gap:15px;padding:15px}.service-card{padding:15px}}.time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;max-width:400px;margin:0 auto}.skeleton-time-slot{height:44px;border-radius:8px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;border:1px solid #e5e5e5;position:relative}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-time-slot:nth-child(2n){animation:skeleton-pulse 2s infinite}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.7}}@media (max-width: 480px){.time-slot-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}.skeleton-time-slot{height:40px}}@media (max-width: 320px){.time-slot-grid{grid-template-columns:1fr}}@media screen and (min-width:320px) and (max-width:475px){.back-btn{gap:.25rem!important;margin:0!important}.back-btn span{color:#000;font-size:12px;font-weight:500;white-space:nowrap}.back-btn mat-icon{font-size:16px!important;margin-bottom:0!important}.header-title{display:flex;align-items:center;margin-bottom:0rem!important}.header-title h1{font-size:16px!important}.main_header .header{padding:3%}.date_section,.service_section,.location_section,.contact_section,.payment_section{width:100%!important;padding:0% 5%}.service_section h2{font-size:17px!important;margin-bottom:0!important}.service_section p{font-size:14px!important}.main_section{height:100vh}.services-grid{display:flex;justify-content:center;flex-wrap:wrap}.service-card,.service-card-selected{width:90vw!important}.home-visit{width:40vw!important}.back-footer-btn{padding:12px 2px!important}.footer-buttons{padding:0% 3%!important;width:100%!important}.continue-btn{width:22vw!important}.main_container{flex-wrap:wrap;height:100%!important}.date_section{overflow:hidden}.date_section .time_selection{height:60%}.datepicker-popover{width:60vw!important}.details_container{height:90%!important;justify-content:space-around}.complete_booking{width:39vw!important}.booking_confirmation,.details-card{width:100%!important}.datetime-header h1{margin:0!important}}@media screen and (max-width: 475px){.main_header{height:10%}.main_body{height:83%}.main_footer{height:7%}.staff-listing{width:100%!important;padding:0% 5%}.booking-confirmation{width:auto;padding:0rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i15.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: LettersOnlyDirective, selector: "[simpoLettersOnly]" }, { kind: "directive", type: NumbersOnlyDirective, selector: "[simpoNumbersOnly]" }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentBookingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-appointment-booking', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatIcon, MatFormFieldModule, MatDatepickerModule, FormsModule, MatNativeDateModule, MatInputModule, LettersOnlyDirective, NumbersOnlyDirective, ToastModule], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section class=\"main_section\">\r\n    <div class=\"main_header\">\r\n        <div class=\"header d-flex justify-content-between align-items-center\">\r\n            <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\r\n                (click)=\"goBack()\">\r\n                <mat-icon>keyboard_backspace</mat-icon><span *ngIf=\"screenWidth > 475\">Back to Home</span>\r\n            </div>\r\n            <div class=\"header-title\">\r\n                <h1>Book New Appointment</h1>\r\n                <p>{{businessName ?? \"N/A\" }}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\r\n        </div>\r\n    </div>\r\n    <div class=\"main_body w-100 d-flex justify-content-center\"><ng-container *ngIf=\"selectedTab === 'serviceListing'\">\r\n            <ng-container *ngIf=\"!skeletonLoader\">\r\n                <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'locationListing'\">\r\n            <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'staffListing'\">\r\n            <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\r\n            <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='contactDetails'\">\r\n            <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='paymentTab'\">\r\n            <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\r\n            <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"main_footer d-flex justify-content-center align-items-center\" *ngIf=\"selectedTab!=='statusTemplate'\">\r\n        <div class=\"footer-buttons\">\r\n            <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\">Back</span>\r\n            <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\r\n                *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\r\n            <button class=\"cursor-pointer d-flex justify-content-evenly align-items-center\"\r\n                *ngIf=\"selectedTab==='paymentTab'\" (click)=\"checkPayment()\"\r\n                [ngClass]=\"{'pay-now-btn' : selectedService?.depositAmount?.depositRequired,'complete_booking' : !selectedService?.depositAmount?.depositRequired}\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">{{selectedService?.depositAmount?.depositRequired\r\n                ? 'Pay Now' : 'Complete Booking'}}</button>\r\n        </div>\r\n    </div>\r\n</section>\r\n<ng-template #serviceListing>\r\n    <div class=\"w-60 service_section\">\r\n        <div class=\"service-selection\">\r\n            <h2>Select a Service</h2>\r\n            <p>Choose the service you'd like to book</p>\r\n\r\n            <div class=\"services-grid\">\r\n                <ng-container *ngFor=\"let service of serviceData\">\r\n                    <div class=\"\" (click)=\"selectService(service)\"\r\n                        [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\r\n                        <div class=\" service-header\">\r\n                            <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\r\n                            <div class=\"service-info\">\r\n                                <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\r\n                                <div class=\"service-category\">Wellness</div>\r\n                            </div>\r\n                            <div>\r\n                                <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\r\n                                    service?.priceDetails?.price : 'N/A' }}</div>\r\n                                <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"service-description\">\r\n                            {{service?.description ? service?.description : 'N/A'}}\r\n                        </div>\r\n                        <div class=\"home-visit\" *ngIf=\"service?.homeAppointmentAvailable\"><img\r\n                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\r\n                            Visit Available</div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <!-- <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83D\uDC64</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">General Consultation</div>\r\n                            <div class=\"service-category\">Medical</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B9800</div>\r\n                            <div class=\"service-duration\">30 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Comprehensive health consultation\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83E\uDDE0</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Mental Health Counseling</div>\r\n                            <div class=\"service-category\">Mental Health</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91500</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional psychological support\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\u2702</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Hair Cut & Styling</div>\r\n                            <div class=\"service-category\">Beauty</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91200</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional hair cutting and styling\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #locationListing>\r\n    <div class=\"location_section\">\r\n        <div class=\"header flex-column align-items-start\">\r\n            <h1>Choose Location</h1>\r\n            <p>Select where you'd like to receive the service</p>\r\n        </div>\r\n\r\n        <div class=\"location-list\">\r\n            <ng-container *ngFor=\"let location of locationData\">\r\n                <div (click)=\"selectLocation(location)\"\r\n                    [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\r\n                    <div class=\"location-content\">\r\n                        <div class=\"location-info\">\r\n                            <div class=\"location-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\r\n                            </div>\r\n                            <div class=\"location-details\">\r\n                                <div class=\"d-flex justify-content-between align-items-center\">\r\n                                    <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\r\n                                    <!-- <div class=\"distance\"><mat-icon>location_on</mat-icon> 2.3 km</div> -->\r\n                                </div>\r\n                                <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\r\n                                    {{location?.addressDetails?.state}} {{location?.pincode}}</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <!-- <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon branch-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Branch Clinic</h3>\r\n                            <p>456 Care Avenue, Health Zone, Mumbai 400015</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">5.8 km</div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon home-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Home Visit</h3>\r\n                            <p>Your Location</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">0 km</div>\r\n                </div>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #staffListing>\r\n    <div class=\"w-60 overflow-hidden\">\r\n        <div class=\"d-flex w-100 h-100\">\r\n            <div class=\"w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"staff-header mb-3\">\r\n                    <h1>Select Staff Member</h1>\r\n                    <p class=\"staff-subtitle mb-0\">Choose your preferred professional</p>\r\n                </div>\r\n\r\n                <!-- Staff Cards -->\r\n                <div class=\"d-flex flex-column gap-4 staff-list\">\r\n                    <ng-container *ngFor=\"let staff of staffData\">\r\n                        <div class=\"card rounded-3 p-3\" (click)=\"selectStaff(staff)\"\r\n                            [ngClass]=\"{ 'staff-card-selected' : staff?.selected, 'staff-card': !staff?.selected }\">\r\n                            <div class=\"d-flex align-items-start justify-content-between\">\r\n                                <div class=\"d-flex align-items-start flex-grow-1\">\r\n                                    <div\r\n                                        class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\r\n                                        {{staff?.staffName.slice(0,3).toUpperCase()}}\r\n                                    </div>\r\n                                    <div class=\"staff-details flex-grow-1\">\r\n                                        <h3 class=\"staff-name\">{{staff?.staffName ? staff?.staffName : 'N/A'}}</h3>\r\n                                        <p class=\"staff-specialty\">General Medicine</p>\r\n                                        <!-- <p class=\"staff-description mb-0\">Experienced physician with 10+ years in\r\n                                            general\r\n                                            medicine and wellness care.</p> -->\r\n                                    </div>\r\n                                </div>\r\n                                <!-- <div class=\"rating-section\">\r\n                                    <div class=\"star-rating d-flex align-items-center\">\r\n                                        <span class=\"star-icon\"></span>\r\n                                        <span class=\"rating-number\">4.9</span>\r\n                                    </div>\r\n                                    <div class=\"review-count\">156 reviews</div>\r\n                                </div> -->\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #dateSelection>\r\n    <div class=\"w-60 date_section\">\r\n        <div class=\"row justify-content-center h-100\">\r\n            <div class=\"col-12 h-100\">\r\n                <div class=\"datetime-header mb-2\">\r\n                    <h1>Select Date & Time</h1>\r\n                    <p class=\"datetime-subtitle mb-0\">Choose when you'd like your appointment</p>\r\n                </div>\r\n\r\n                <!-- Main Content -->\r\n                <div class=\"d-flex gap-4 main_container\">\r\n                    <!-- Left Column - Date Selection -->\r\n                    <div [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\r\n                        <div class=\"section-card card rounded-3 p-4 h-100\">\r\n                            <h3 class=\"section-title\">Select Date</h3>\r\n\r\n                            <div class=\"date-picker-container d-flex align-items-center justify-content-between\"\r\n                                (click)=\"$event.stopPropagation()\">\r\n                                <input type=\"text\" class=\"date-input border-0 rounded-2\" placeholder=\"dd-mm-yyyy\"\r\n                                    [value]=\"selectedDateStr\" readonly (click)=\"toggleCalendar($event)\">\r\n\r\n                                <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\r\n                            </div>\r\n                            <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\r\n                                <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\r\n                                    <mat-calendar [(selected)]=\"selectedDate\" [dateFilter]=\"dateFilter\"\r\n                                        (selectedChange)=\"onDateSelected($event)\" class=\"datepicker-calendar\">\r\n                                    </mat-calendar>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Right Column - Time Selection -->\r\n                    <div class=\"time_selection\" [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\r\n                        <div class=\"section-card card h-100 rounded-3 p-4\">\r\n                            <h3 class=\"section-title\">Available Times</h3>\r\n\r\n                            <!-- Time Slots Grid -->\r\n                            <div class=\"row g-2 mb-4 overflow-scroll\">\r\n                                <ng-container *ngIf=\"!skeletonLoader ;else slotsLoader\">\r\n                                    <div class=\"col-4\" *ngFor=\"let time of locationTiming\">\r\n                                        <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\r\n                                            (click)=\"selectTimeSlot(time)\">{{time ?\r\n                                            time?.value : 'N/A'}}</div>\r\n                                    </div>\r\n                                </ng-container>\r\n                                <ng-template #slotsLoader>\r\n                                    <!-- Time Slot Grid Skeleton Loader HTML -->\r\n                                    <div class=\"time-slot-grid\">\r\n                                        <!-- Row 1 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 2 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 3 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 4 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 5 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 6 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                    </div>\r\n\r\n                                </ng-template>\r\n                            </div>\r\n\r\n                            <!-- Waitlist Section -->\r\n                            <div class=\"waitlist-section rounded-3\">\r\n                                <div class=\"d-flex align-items-start\">\r\n                                    <div class=\"d-flex h-100 justify-content-between flex-column\">\r\n                                        <div class=\"waitlist-title d-flex align-items-center gap-2\"><span\r\n                                                class=\"waitlist-icon check-icon\"></span>No\r\n                                            slots available?</div>\r\n                                        <div class=\"waitlist-description d-flex align-items-center gap-2\">\r\n                                            <input class=\"form-check-input cursor-pointer\" type=\"checkbox\"\r\n                                                id=\"flexCheckChecked\">\r\n                                            Add me to the waitlist for earlier\r\n                                            availability\r\n                                        </div>\r\n                                    </div>\r\n                                    <div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n<ng-template #contactDetails>\r\n    <div class=\"w-60 contact_section overflow-hidden\">\r\n        <div class=\"d-flex h-100\">\r\n            <div class=\"h-100 w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"contact-header mb-2\">\r\n                    <h1>Contact Details</h1>\r\n                    <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\r\n                </div>\r\n\r\n                <!-- Form Sections -->\r\n                <div class=\"d-flex gap-3 details_container flex-column w-100\">\r\n                    <!-- Left Column - Personal Information -->\r\n                    <div class=\"d-flex gap-4\">\r\n                        <div\r\n                            [ngClass]=\"{'w-50' : selectedService?.homeAppointmentAvailable, 'w-100' : !selectedService?.homeAppointmentAvailable}\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Personal Information</h3>\r\n\r\n                                <!-- Full Name -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Full Name\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"text\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.name\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\" simpoLettersOnly>\r\n                                </div>\r\n\r\n                                <!-- Email Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Email Address\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"email\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.email\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\">\r\n                                </div>\r\n\r\n                                <!-- Phone Number -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Phone Number\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"tel\" class=\"form-control  rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\" simpoNumbersOnly\r\n                                        [ngClass]=\"{'mobile_number' : appointmentPayload.customerDetail.phoneNumber.length != 10}\">\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- Right Column - Home Visit Details -->\r\n                        <div class=\"w-50\" *ngIf=\"selectedService?.homeAppointmentAvailable\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Home Visit Details</h3>\r\n\r\n                                <!-- Home Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Home Address\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Enter your complete address\" [(ngModel)]=\"homeAddress\"></textarea>\r\n                                </div>\r\n\r\n                                <!-- Special Instructions -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Special Instructions\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Any special instructions for the professional (optional)\" [(ngModel)]=\"instructions\"></textarea>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"policies-container\">\r\n                        <!-- Header -->\r\n                        <h2 class=\"policies-title\">Policies & Terms</h2>\r\n\r\n                        <!-- Policy Items -->\r\n                        <div class=\"policy-items-container d-flex flex-column gap-3\">\r\n                            <!-- Cancellation Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showCancellationPolicy = !showCancellationPolicy\">\r\n                                <h3 class=\"policy-title\">Cancellation Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showCancellationPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n\r\n                            <!-- Rescheduling Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showReducingPolicy = !showReducingPolicy\">\r\n                                <h3 class=\"policy-title\">Rescheduling Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showReducingPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Acceptance Section -->\r\n                        <div class=\"acceptance-section\">\r\n                            <input type=\"checkbox\" class=\"custom-checkbox\" [(ngModel)]=\"termsAndConditions\"\r\n                                (ngModelChange)=\"checkRequiredValues()\">\r\n                            <p class=\"acceptance-text\">\r\n                                I understand and accept the cancellation & rescheduling policies and\r\n                                <span class=\"terms-link\">Terms & Conditions<span\r\n                                        class=\"external-link-icon\"></span></span>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #paymentTab>\r\n    <div class=\"w-60 payment_section\">\r\n        <div class=\"w-100 h-100\">\r\n            <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\r\n                <!-- Header Section -->\r\n                <div class=\"payment-header mb-3 w-100\">\r\n                    <h1>Payment & Confirmation</h1>\r\n                    <p class=\"payment-subtitle mb-0\">Review your booking and complete payment</p>\r\n                </div>\r\n\r\n                <!-- Booking Summary Card -->\r\n                <div class=\"booking-summary-card\" [ngClass]=\"{'w-100' : screenWidth < 475,'w-50':screenWidth > 475}\">\r\n                    <h2 class=\"summary-title\">Booking Summary</h2>\r\n\r\n                    <!-- Service -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Service</div>\r\n                        <div class=\"summary-value\">{{selectedService?.name ? selectedService?.name : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Professional -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Professional</div>\r\n                        <div class=\"summary-value\">{{selectedStaff?.staffName ? selectedStaff?.staffName : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Location -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Location</div>\r\n                        <div class=\"summary-value\">{{selectedLocation?.storeName ? selectedLocation?.storeName : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Date & Time -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Date & Time</div>\r\n                        <div class=\"summary-value\">{{selectedDateStr ? (selectedDateStr) : 'N/A'}} at\r\n                            {{selectedTime ? selectedTime.value : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Duration -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Duration</div>\r\n                        <div class=\"summary-value\">{{selectedService?.duration ? selectedService?.duration : 'N/A'}}\r\n                            minutes</div>\r\n                    </div>\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Tax Percent</div>\r\n                        <div class=\"summary-value\">{{selectedService?.priceDetails?.taxPercent ?\r\n                            selectedService?.priceDetails?.taxPercent : 'N/A'}}%</div>\r\n                    </div>\r\n                    <!-- Total -->\r\n                    <div class=\"summary-row total-row\">\r\n                        <div class=\"summary-label\">Total</div>\r\n                        <div class=\"summary-value\">\r\n                            <span class=\"currency-symbol\">\u20B9</span>{{selectedService?.priceDetails?.price ?\r\n                            selectedService?.priceDetails?.price : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #statusTemplate>\r\n    <div class=\"booking-confirmation\">\r\n        <!-- Success Icon -->\r\n        <div class=\"success-icon\">\r\n            <div class=\"checkmark-circle\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"apiStatus\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Main Content -->\r\n        <div class=\"confirmation-content\">\r\n            <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\r\n            <p class=\"confirmation-message\">\r\n                {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\r\n                try again later'}}\r\n            </p>\r\n\r\n            <!-- Details Card -->\r\n            <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\r\n                <div class=\"details-card\">\r\n                    <h3 class=\"details-title\">Appointment Details</h3>\r\n\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Service</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.serviceDetail?.name ?\r\n                            appointmentPayload.serviceDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Professional</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.staffDetail?.name ?\r\n                            appointmentPayload.staffDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Date & Time</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.bookingDate ?\r\n                            appointmentPayload.bookingDate.slice(0,10) :\r\n                            'N/A'}} at\r\n                            {{appointmentPayload.startTime ? appointmentPayload.startTime : 'N/A'}}</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <!-- Action Buttons -->\r\n            <!-- <div class=\"action-buttons\">\r\n                <button class=\"btn btn-outline\">View My Bookings</button>\r\n                <button class=\"btn btn-primary\">Back to Admin</button>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #skeletonLoader *ngIf=\"skeletonLoader\">\r\n    <!-- Service Skeleton Loader HTML -->\r\n    <div class=\"service-grid\">\r\n        <!-- Skeleton Card 1 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 2 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 3 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 4 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 5 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 6 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: ["body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#fff;color:#000;line-height:1.6}.main_section{position:relative;height:100%}.main_header{padding:1%;width:100%;background:#fff;height:15%}.main_body{height:75%;padding-top:0%;overflow:scroll}.header{display:flex;align-items:center;justify-content:space-between}.back-btn mat-icon{height:16px!important;width:20px!important;font-size:21px!important}.back-btn span{color:#000;font-size:15px;font-weight:500}.back-btn:hover{background-color:#f0f0f0}.header-title{flex-grow:1;margin-left:2rem}.header-title h1{font-size:20px;font-weight:600;margin-bottom:0}.header-title p{color:#666;font-size:14px}.step-indicator{font-size:14px;color:#000;font-weight:700}.progress-bar{width:100%;height:8px;background-color:#e0e0e0;margin-bottom:1rem;border-radius:10px;overflow:hidden}.w-60{width:60%!important}.progress-fill{height:100%;width:14.28%;background-color:#000}.service-selection h2{font-size:20px;font-weight:600;margin:.25rem 0}.service-selection p{color:#666;font-size:16px;margin-bottom:1rem}.main_footer{border-top:1px solid lightgrey;width:100%;background-color:#fff;height:10%}.services-grid{display:grid;grid-template-columns:48% 48%;gap:15px;padding-bottom:5px}.service-card{border:1px solid lightgrey;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-card:hover{background-color:#f9f9f9;box-shadow:0 4px 8px #0000001a}.service-card-selected{border:2px solid black;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:3rem}.service-info{flex-grow:1}.service-icon{width:40px;height:40px;border-radius:8px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;margin-right:1rem;font-size:20px;margin-top:.2rem}.service-title{font-size:18px;font-weight:600;margin-bottom:4px}.service-category{background-color:#f0f0f0;color:#000;padding:1% 4%;border-radius:12px;font-size:12px;font-weight:500;display:inline-block}.service-price{font-size:17px;font-weight:700;color:#000}.service-duration{font-size:12px;color:#666;display:flex;justify-content:center;align-items:center}.service-description{color:#666;font-size:15px;margin-bottom:.5rem;line-height:1.5}.home-visit{display:flex;align-items:center;font-size:12px;color:#666;border:1px solid lightgrey;padding:.5% 1%;border-radius:4px;background-color:#fff;width:10vw;height:3vh;white-space:nowrap;justify-content:space-around}.home-visit img{width:18px}.footer-buttons{display:flex;justify-content:space-between;align-items:center;width:60%}.back-footer-btn{color:#000;padding:12px 24px;font-size:16px}.continue-btn{background-color:#000;color:#fff;border:2px solid black;padding:.5%;border-radius:4px;font-size:15px!important;font-weight:600;cursor:pointer;width:6vw!important}.continue-btn:hover{background-color:#333}.continue-btn:disabled{background-color:#ccc;border-color:#ccc;cursor:not-allowed}.location_section{width:60%;overflow:hidden}.location_section .header h1{font-size:20px;font-weight:600;margin:.25rem 0}.location_section .header p{font-size:16px;color:#888;font-weight:400}.location-list{display:flex;flex-direction:column;gap:20px;height:64vh;overflow-x:scroll;padding-bottom:1%}.location-card{border:1px solid lightgrey;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-card:hover{box-shadow:0 4px 8px #0000001a}.location-card-selected{border:1px solid black;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-content{display:flex;align-items:center;justify-content:space-between}.location-info{display:flex;align-items:center;flex-grow:1}.location-icon{width:40px;height:40px;background-color:#d3d3d3;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:20px}.location-icon img{width:28px}.location-details{width:95%}.location-details h3{font-size:16px;font-weight:600;margin-bottom:0}.location-details p{font-size:14px;color:#aaa;line-height:1.4;margin:0}.distance{display:flex;align-items:center;color:#888;font-size:14px;margin-left:20px}.distance mat-icon{width:18px!important;height:15px!important;font-size:17px}.staff-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.staff-subtitle{font-size:16px;color:#888;font-weight:400}.staff-card{border:1px solid lightgrey;cursor:pointer;transition:all .3s ease}.staff-card:hover{box-shadow:0 4px 8px #0000001a}.staff-card-selected{border-color:#666;cursor:pointer;transition:all .3s ease}.staff-avatar{width:64px;height:64px;background-color:gray;font-size:20px;font-weight:600;color:#fff}.staff-name{font-size:16px;font-weight:600;margin-bottom:0}.staff-specialty{font-size:14px;color:gray;margin-bottom:8px}.staff-description{font-size:14px;color:gray;line-height:1.4}.rating-section{display:flex;flex-direction:column;align-items:flex-end}.star-rating{color:gold;font-size:16px;margin-bottom:4px;width:100%}.rating-number{font-size:18px;font-weight:600;color:#000}.review-count{font-size:12px;color:#888}.star-icon:before{content:\"\\2b50\";margin-right:4px}.staff_section{width:60%;overflow:hidden}.staff-list{height:64vh;overflow-x:scroll;padding-bottom:1%}.datetime-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.main_container{height:85%}.datetime-subtitle{font-size:16px;color:#888;font-weight:400}.section-card{border:1px solid lightgrey}.section-title{font-size:17px;font-weight:600;margin-bottom:20px}.date-picker-container{border:1px solid lightgrey}.date-picker-container mat-icon{height:17px;font-size:18px}.date-input{font-size:16px;padding:2%;width:30%;outline:none}.time-slot{border:1px solid lightgrey;font-size:14px;font-weight:500;padding:6%;cursor:pointer;transition:all .3s ease;text-align:center;min-width:80px}.time-slot:hover{box-shadow:0 4px 8px #0000001a}.time-slot.selected{background-color:#555;border-color:#777;color:#fff}.waitlist-section{background-color:#789;border:none;padding:4%;max-height:13vh}.waitlist-icon{color:#4ade80;font-size:18px}.waitlist-title{color:#fff;font-size:16px;font-weight:500;margin-bottom:8px}.mobile_number{border-color:#dc3545!important;box-shadow:0 0 0 .1rem #ffc3c3}.waitlist-description{color:#fff;font-size:14px;margin-bottom:0;font-weight:500}.waitlist-description .form-check-input{width:17px;height:17px;background-color:transparent}.waitlist-description .form-check-input:checked{background-color:#0d6efd}.check-icon:before{content:\"\\2713\"}.contact-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.contact-subtitle{font-size:16px;color:#888;font-weight:400}.form-section{border:1px solid lightgrey}.section-title{font-size:16px;font-weight:600;margin-bottom:24px}.form-label{font-size:14px;font-weight:500;margin-bottom:8px}.required-asterisk{color:#ff6b6b;margin-left:4px}.form-input{border:1px solid lightgrey;font-size:16px;padding:1%;transition:all .3s ease}.form-input:focus{border-color:#777}.form-input::placeholder{color:#aaa;font-size:14px}.form-textarea{border:1px solid lightgrey;font-size:16px;padding:12px 16px;resize:vertical;max-height:120px;transition:all .3s ease}.form-textarea:focus{border-color:#777}.form-textarea::placeholder{color:#aaa;font-size:14px}.optional-label{color:#888;font-size:12px;font-style:italic}.details_container{height:89%;overflow-x:scroll;padding-bottom:1%}.policies-container{background-color:#fff;border:1px solid lightgrey;padding:2rem;border-radius:12px}.policies-title{font-size:16px;font-weight:600;color:#000;margin-bottom:1rem}.policy-item{background-color:#fff;border:1px solid lightgrey;border-radius:8px;padding:1%;cursor:pointer;transition:all .3s ease}.cancellation_policies{padding:1% .5%;font-weight:500}.policy-item:hover{background-color:#f8f9fa;border-color:#ccc}.policy-item:last-of-type{margin-bottom:32px}.policy-title{font-size:14px;font-weight:500;color:#000;margin:0}.acceptance-section{display:flex;align-items:flex-start;gap:7px;margin-top:8px}.custom-checkbox{width:18px;height:20px;background-color:#fff;border:1px solid lightgrey;border-radius:4px;margin-top:2px;cursor:pointer;position:relative;flex-shrink:0;transition:all .3s ease}.custom-checkbox:hover{border-color:#999;background-color:#f8f9fa}.custom-checkbox.checked{background-color:#007bff;border-color:#007bff}.custom-checkbox.checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}.acceptance-text{font-size:14px;color:#000;line-height:1.5;margin:0}.terms-link{color:#007bff;text-decoration:none;font-weight:500;position:relative}.terms-link:hover{color:#0056b3;text-decoration:underline}.external-link-icon{margin-left:4px;font-size:12px;opacity:.8}.external-link-icon:after{content:\"\\2197\"}.payment-header h1{font-size:20px;font-weight:600;color:#000;margin:.25rem 0}.payment-subtitle{font-size:16px;color:#666;font-weight:400}.booking-summary-card{background-color:#fff;border:1px solid lightgrey;padding:2%;border-radius:12px}.summary-title{font-size:18px;font-weight:600;color:#000;margin-bottom:32px}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.summary-row:last-child{border-bottom:none;padding-bottom:0}.summary-label{font-size:16px;color:#000;font-weight:500}.summary-value{font-size:16px;color:#000;font-weight:400;text-align:right}.total-row{margin-top:16px;padding-top:16px}.total-row .summary-label,.total-row .summary-value{font-size:20px;font-weight:600}.currency-symbol{font-size:18px}.complete_booking{background:#e3fee3;border:none;padding:.5%;width:12vw!important;font-size:15px!important;font-weight:500;border-radius:4px}.complete_booking img{width:30px}.pay-now-btn{justify-content:unset!important;background:#e3fee3;border:none;padding:.5%;width:8vw!important;font-size:15px!important;font-weight:500;border-radius:4px;gap:.5rem}.pay-now-btn img{width:30px}.booking-confirmation{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;width:60%;border-radius:10px}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:80px;height:80px;position:relative}.checkmark{width:80px;height:80px;border-radius:50%;display:block;stroke-width:3;stroke:#22c55e;stroke-miterlimit:10;animation:checkmark-fill .4s ease-in-out .4s forwards,checkmark-scale .3s ease-in-out .9s both}.checkmark-circle-path{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:3;stroke-miterlimit:10;stroke:#22c55e;fill:none;animation:checkmark-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;stroke:#22c55e;stroke-width:3;animation:checkmark-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes checkmark-stroke{to{stroke-dashoffset:0}}@keyframes checkmark-scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes checkmark-fill{to{box-shadow:inset 0 0 0 30px #22c55e}}.confirmation-content{width:100%;height:80%}.confirmation-title{font-size:18px;font-weight:700}.confirmation-message{font-size:1rem;margin-bottom:1rem;line-height:1.6;font-weight:500}.details-card{background:#ffffff1a;border:1px solid lightgrey;border-radius:16px;padding:1.5rem;margin-bottom:2rem;width:35vw}.details-title{font-size:1.25rem;font-weight:600;margin:0 0 1.5rem}.details-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.9rem;font-weight:500}.detail-value{font-weight:600;font-size:1rem}.action-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease;border:none;min-width:140px}.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff}.btn-outline:hover{background:#ffffff1a;border-color:#ffffff80}.btn-primary{background:#fff;color:#1f2937}.btn-primary:hover{background:#f3f4f6;transform:translateY(-1px)}.datepicker-popover{position:absolute;z-index:1000;margin-top:8px;border-radius:16px;overflow:hidden;box-shadow:0 12px 28px #0000001f,0 2px 4px #00000014;background:#fff;border:1px solid rgba(0,0,0,.06);width:17vw}::ng-deep .datepicker-calendar{border-radius:16px!important;overflow:hidden!important;font-family:Segoe UI,Roboto,sans-serif!important;width:100%!important}::ng-deep .mat-calendar-header{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;padding:3px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:60px!important;border-radius:16px 16px 0 0!important}::ng-deep .mat-calendar-controls{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;margin:2% calc(4.7142857143% - 16px)!important}::ng-deep .mat-calendar-period-button{color:#fff!important;font-weight:700!important;font-size:16px!important;letter-spacing:.5px!important;background:transparent!important;border:none!important;padding:12px 16px!important;border-radius:8px!important;transition:all .3s ease!important;flex-grow:1!important;text-align:left!important;margin:0!important;order:1!important}::ng-deep .mat-calendar-period-button:hover{background:#ffffff26!important;transform:translateY(-1px)!important}::ng-deep .mat-calendar-header .mat-calendar-controls>div{display:flex;order:2!important}::ng-deep .mat-calendar-previous-button,::ng-deep .mat-calendar-next-button{color:#fff!important;width:40px!important;height:40px!important;border-radius:50%!important;background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;transition:all .3s ease!important;margin:0 4px!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mat-calendar-previous-button:hover,::ng-deep .mat-calendar-next-button:hover{background:#ffffff40!important;transform:scale(1.05)!important}::ng-deep .mat-calendar-arrow{fill:#fff!important;width:20px!important;height:20px!important}::ng-deep .mat-calendar-content{padding:10px 16px!important;background:#fff!important}::ng-deep .mat-calendar-table-header th{color:#6b7280!important;font-weight:600!important;font-size:12px!important;text-align:center!important;padding-bottom:12px!important;text-transform:uppercase!important}::ng-deep .mat-calendar-table{border-spacing:0!important;border-collapse:collapse!important;width:100%!important}::ng-deep .mat-calendar-body-cell{height:44px!important;width:44px!important;border-radius:12px!important}::ng-deep .mat-calendar-body-cell-content{width:33px!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-weight:500!important;font-size:14px!important;color:#374151!important;transition:all .3s cubic-bezier(.4,0,.2,1)!important}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover .mat-calendar-body-cell-content:not(.mat-calendar-body-selected){background:#667eea1a!important;color:#667eea!important;transform:scale(1.05)!important}::ng-deep .mat-calendar-body-selected{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;box-shadow:0 4px 12px #677eea4d!important}::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected){border:none;color:#667eea!important;font-weight:700!important}::ng-deep .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){color:#d1d5db!important}.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;padding:20px;width:60%}.service-card{border:1px solid #e5e5e5;border-radius:8px;padding:20px;background:#fff;box-shadow:0 2px 4px #0000001a}.service-header{display:flex;align-items:flex-start;gap:15px;margin-bottom:15px}.service-content{flex:1;display:flex;flex-direction:column;gap:8px}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:40px;height:40px;border-radius:50%;flex-shrink:0}.skeleton-title{height:20px;width:70%}.skeleton-price{height:18px;width:50%;align-self:flex-end}.skeleton-duration{height:14px;width:40%;align-self:flex-end}.skeleton-category{height:24px;width:25%;border-radius:12px;margin-bottom:10px}.skeleton-description{height:16px;width:85%;margin-bottom:15px}.skeleton-badge{height:32px;width:45%;border-radius:16px;margin-top:10px}@media (max-width: 768px){.service-grid{grid-template-columns:1fr;gap:15px;padding:15px}.service-card{padding:15px}}.time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;max-width:400px;margin:0 auto}.skeleton-time-slot{height:44px;border-radius:8px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;border:1px solid #e5e5e5;position:relative}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-time-slot:nth-child(2n){animation:skeleton-pulse 2s infinite}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.7}}@media (max-width: 480px){.time-slot-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}.skeleton-time-slot{height:40px}}@media (max-width: 320px){.time-slot-grid{grid-template-columns:1fr}}@media screen and (min-width:320px) and (max-width:475px){.back-btn{gap:.25rem!important;margin:0!important}.back-btn span{color:#000;font-size:12px;font-weight:500;white-space:nowrap}.back-btn mat-icon{font-size:16px!important;margin-bottom:0!important}.header-title{display:flex;align-items:center;margin-bottom:0rem!important}.header-title h1{font-size:16px!important}.main_header .header{padding:3%}.date_section,.service_section,.location_section,.contact_section,.payment_section{width:100%!important;padding:0% 5%}.service_section h2{font-size:17px!important;margin-bottom:0!important}.service_section p{font-size:14px!important}.main_section{height:100vh}.services-grid{display:flex;justify-content:center;flex-wrap:wrap}.service-card,.service-card-selected{width:90vw!important}.home-visit{width:40vw!important}.main_body{height:calc(100% - 123px)!important}.back-footer-btn{padding:12px 2px!important}.footer-buttons{padding:0% 3%!important;width:100%!important}.continue-btn{width:22vw!important}.main_container{flex-wrap:wrap;height:100%!important}.date_section{overflow:hidden}.date_section .time_selection{height:60%}.datepicker-popover{width:60vw!important}.details_container{height:90%!important;justify-content:space-around}.complete_booking{width:39vw!important}.booking_confirmation,.details-card{width:100%!important}.datetime-header h1{margin:0!important}}\n"] }]
+            args: [{ selector: 'simpo-appointment-booking', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatIcon, MatFormFieldModule, MatDatepickerModule, FormsModule, MatNativeDateModule, MatInputModule, LettersOnlyDirective, NumbersOnlyDirective, ToastModule], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section class=\"main_section\">\r\n    <div class=\"main_header\">\r\n        <div class=\"header d-flex justify-content-between align-items-center\">\r\n            <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\r\n                (click)=\"goBack()\">\r\n                <mat-icon>keyboard_backspace</mat-icon><span *ngIf=\"screenWidth > 475\">Back to Home</span>\r\n            </div>\r\n            <div class=\"header-title\">\r\n                <h1>Book New Appointment</h1>\r\n                <p>{{businessName ?? \"N/A\" }}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\r\n        </div>\r\n    </div>\r\n    <div class=\"main_body w-100 d-flex justify-content-center\"><ng-container *ngIf=\"selectedTab === 'serviceListing'\">\r\n            <ng-container *ngIf=\"!skeletonLoader\">\r\n                <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'locationListing'\">\r\n            <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'staffListing'\">\r\n            <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\r\n            <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='contactDetails'\">\r\n            <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='paymentTab'\">\r\n            <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\r\n            <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"main_footer d-flex justify-content-center align-items-center\" *ngIf=\"selectedTab!=='statusTemplate'\">\r\n        <div class=\"footer-buttons\" [ngStyle]=\"{'justify-content': selectedTab != 'serviceListing' ? 'space-between' : 'end'}\">\r\n            <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\" *ngIf=\"selectedTab != 'serviceListing'\">Back</span>\r\n            <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\r\n                *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\r\n            <button class=\"cursor-pointer d-flex justify-content-evenly align-items-center\"\r\n                *ngIf=\"selectedTab==='paymentTab'\" (click)=\"checkPayment()\"\r\n                [ngClass]=\"{'pay-now-btn' : selectedService?.depositAmount?.depositRequired,'complete_booking' : !selectedService?.depositAmount?.depositRequired}\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">{{selectedService?.depositAmount?.depositRequired\r\n                ? 'Pay Now' : 'Complete Booking'}}</button>\r\n        </div>\r\n    </div>\r\n</section>\r\n<ng-template #serviceListing>\r\n    <div class=\"w-60 service_section\">\r\n        <div class=\"service-selection\">\r\n            <h2>Select a Service</h2>\r\n            <p>Choose the service you'd like to book</p>\r\n\r\n            <div class=\"services-grid\">\r\n                <ng-container *ngFor=\"let service of serviceData\">\r\n                    <div class=\"\" (click)=\"selectService(service)\"\r\n                        [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\r\n                        <div class=\" service-header\">\r\n                            <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\r\n                            <div class=\"service-info\">\r\n                                <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\r\n                                <div class=\"service-category\">Wellness</div>\r\n                            </div>\r\n                            <div>\r\n                                <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\r\n                                    service?.priceDetails?.price : 'N/A' }}</div>\r\n                                <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"service-description\" *ngIf=\"service?.description\">\r\n                            {{service?.description ? service?.description : 'N/A'}}\r\n                        </div>\r\n                        <div class=\"home-visit\" *ngIf=\"service?.homeAppointmentAvailable\"><img\r\n                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\r\n                            Visit Available</div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <!-- <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83D\uDC64</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">General Consultation</div>\r\n                            <div class=\"service-category\">Medical</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B9800</div>\r\n                            <div class=\"service-duration\">30 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Comprehensive health consultation\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83E\uDDE0</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Mental Health Counseling</div>\r\n                            <div class=\"service-category\">Mental Health</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91500</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional psychological support\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\u2702</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Hair Cut & Styling</div>\r\n                            <div class=\"service-category\">Beauty</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91200</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional hair cutting and styling\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #locationListing>\r\n    <div class=\"location_section\">\r\n        <div class=\"header flex-column align-items-start\">\r\n            <h1>Choose Location</h1>\r\n            <p>Select where you'd like to receive the service</p>\r\n        </div>\r\n\r\n        <div class=\"location-list\">\r\n            <ng-container *ngFor=\"let location of locationData\">\r\n                <div (click)=\"selectLocation(location)\"\r\n                    [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\r\n                    <div class=\"location-content\">\r\n                        <div class=\"location-info\">\r\n                            <div class=\"location-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\r\n                            </div>\r\n                            <div class=\"location-details\">\r\n                                <div class=\"d-flex justify-content-between align-items-center\">\r\n                                    <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\r\n                                    <!-- <div class=\"distance\"><mat-icon>location_on</mat-icon> 2.3 km</div> -->\r\n                                </div>\r\n                                <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\r\n                                    {{location?.addressDetails?.state}} {{location?.pincode}}</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <!-- <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon branch-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Branch Clinic</h3>\r\n                            <p>456 Care Avenue, Health Zone, Mumbai 400015</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">5.8 km</div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon home-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Home Visit</h3>\r\n                            <p>Your Location</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">0 km</div>\r\n                </div>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #staffListing>\r\n    <div class=\"w-60 overflow-hidden staff-listing\">\r\n        <div class=\"d-flex w-100 h-100\">\r\n            <div class=\"w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"staff-header mb-3\">\r\n                    <h1>Select Staff Member</h1>\r\n                    <p class=\"staff-subtitle mb-0\">Choose your preferred professional</p>\r\n                </div>\r\n\r\n                <!-- Staff Cards -->\r\n                <div class=\"d-flex flex-column gap-4 staff-list\">\r\n                    <ng-container *ngFor=\"let staff of staffData\">\r\n                        <div class=\"card rounded-3 p-3\" (click)=\"selectStaff(staff)\"\r\n                            [ngClass]=\"{ 'staff-card-selected' : staff?.selected, 'staff-card': !staff?.selected }\">\r\n                            <div class=\"d-flex align-items-start justify-content-between\">\r\n                                <div class=\"d-flex align-items-start flex-grow-1\">\r\n                                    <div\r\n                                        class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\r\n                                        {{staff?.staffName.slice(0,3).toUpperCase()}}\r\n                                    </div>\r\n                                    <div class=\"staff-details flex-grow-1\">\r\n                                        <h3 class=\"staff-name\">{{staff?.staffName ? staff?.staffName : 'N/A'}}</h3>\r\n                                        <p class=\"staff-specialty\">General Medicine</p>\r\n                                        <!-- <p class=\"staff-description mb-0\">Experienced physician with 10+ years in\r\n                                            general\r\n                                            medicine and wellness care.</p> -->\r\n                                    </div>\r\n                                </div>\r\n                                <!-- <div class=\"rating-section\">\r\n                                    <div class=\"star-rating d-flex align-items-center\">\r\n                                        <span class=\"star-icon\"></span>\r\n                                        <span class=\"rating-number\">4.9</span>\r\n                                    </div>\r\n                                    <div class=\"review-count\">156 reviews</div>\r\n                                </div> -->\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #dateSelection>\r\n    <div class=\"w-60 date_section\">\r\n        <div class=\"row justify-content-center h-100\">\r\n            <div class=\"col-12 h-100\">\r\n                <div class=\"datetime-header mb-2\">\r\n                    <h1>Select Date & Time</h1>\r\n                    <p class=\"datetime-subtitle mb-0\">Choose when you'd like your appointment</p>\r\n                </div>\r\n\r\n                <!-- Main Content -->\r\n                <div class=\"d-flex gap-4 main_container\">\r\n                    <!-- Left Column - Date Selection -->\r\n                    <div [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\r\n                        <div class=\"section-card card rounded-3 p-4 h-100\">\r\n                            <h3 class=\"section-title\">Select Date</h3>\r\n\r\n                            <div class=\"date-picker-container d-flex align-items-center justify-content-between\"\r\n                                (click)=\"$event.stopPropagation()\">\r\n                                <input type=\"text\" class=\"date-input border-0 rounded-2\" placeholder=\"dd-mm-yyyy\"\r\n                                    [value]=\"selectedDateStr\" readonly (click)=\"toggleCalendar($event)\">\r\n\r\n                                <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\r\n                            </div>\r\n                            <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\r\n                                <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\r\n                                    <mat-calendar [(selected)]=\"selectedDate\" [dateFilter]=\"dateFilter\"\r\n                                        (selectedChange)=\"onDateSelected($event)\" class=\"datepicker-calendar\">\r\n                                    </mat-calendar>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Right Column - Time Selection -->\r\n                    <div class=\"time_selection\" [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\r\n                        <div class=\"section-card card h-100 rounded-3 p-4\">\r\n                            <h3 class=\"section-title\">Available Times</h3>\r\n\r\n                            <!-- Time Slots Grid -->\r\n                            <div class=\"row g-2 mb-4 overflow-scroll\">\r\n                                <ng-container *ngIf=\"!skeletonLoader ;else slotsLoader\">\r\n                                    <div class=\"col-4\" *ngFor=\"let time of locationTiming\">\r\n                                        <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\r\n                                            (click)=\"selectTimeSlot(time)\">{{time ?\r\n                                            time?.value : 'N/A'}}</div>\r\n                                    </div>\r\n                                </ng-container>\r\n                                <ng-template #slotsLoader>\r\n                                    <!-- Time Slot Grid Skeleton Loader HTML -->\r\n                                    <div class=\"time-slot-grid\">\r\n                                        <!-- Row 1 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 2 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 3 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 4 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 5 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 6 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                    </div>\r\n\r\n                                </ng-template>\r\n                            </div>\r\n\r\n                            <!-- Waitlist Section -->\r\n                            <!-- <div class=\"waitlist-section rounded-3\">\r\n                                <div class=\"d-flex align-items-start\">\r\n                                    <div class=\"d-flex h-100 justify-content-between flex-column\">\r\n                                        <div class=\"waitlist-title d-flex align-items-center gap-2\"><span\r\n                                                class=\"waitlist-icon check-icon\"></span>No\r\n                                            slots available?</div>\r\n                                        <div class=\"waitlist-description d-flex align-items-center gap-2\">\r\n                                            <input class=\"form-check-input cursor-pointer\" type=\"checkbox\"\r\n                                                id=\"flexCheckChecked\">\r\n                                            Add me to the waitlist for earlier\r\n                                            availability\r\n                                        </div>\r\n                                    </div>\r\n                                    <div>\r\n                                    </div>\r\n                                </div>\r\n                            </div> -->\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n<ng-template #contactDetails>\r\n    <div class=\"w-60 contact_section overflow-hidden\">\r\n        <div class=\"d-flex h-100\">\r\n            <div class=\"h-100 w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"contact-header mb-2\">\r\n                    <h1>Contact Details</h1>\r\n                    <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\r\n                </div>\r\n\r\n                <!-- Form Sections -->\r\n                <div class=\"d-flex gap-3 details_container flex-column w-100\">\r\n                    <!-- Left Column - Personal Information -->\r\n                    <div class=\"d-flex gap-4\">\r\n                        <div\r\n                            [ngClass]=\"{'w-50' : selectedService?.homeAppointmentAvailable, 'w-100' : !selectedService?.homeAppointmentAvailable}\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Personal Information</h3>\r\n\r\n                                <!-- Full Name -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Full Name\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"text\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.name\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\" simpoLettersOnly>\r\n                                </div>\r\n\r\n                                <!-- Email Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Email Address\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"email\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.email\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\">\r\n                                </div>\r\n\r\n                                <!-- Phone Number -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Phone Number\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"tel\" class=\"form-control  rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\" simpoNumbersOnly\r\n                                        [ngClass]=\"{'mobile_number' : appointmentPayload.customerDetail.phoneNumber.length != 10}\">\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- Right Column - Home Visit Details -->\r\n                        <div class=\"w-50\" *ngIf=\"selectedService?.homeAppointmentAvailable\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Home Visit Details</h3>\r\n\r\n                                <!-- Home Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Home Address\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Enter your complete address\" [(ngModel)]=\"homeAddress\"></textarea>\r\n                                </div>\r\n\r\n                                <!-- Special Instructions -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Special Instructions\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Any special instructions for the professional (optional)\" [(ngModel)]=\"instructions\"></textarea>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"policies-container\">\r\n                        <!-- Header -->\r\n                        <h2 class=\"policies-title\">Policies & Terms</h2>\r\n\r\n                        <!-- Policy Items -->\r\n                        <div class=\"policy-items-container d-flex flex-column gap-3\">\r\n                            <!-- Cancellation Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showCancellationPolicy = !showCancellationPolicy\">\r\n                                <h3 class=\"policy-title\">Cancellation Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showCancellationPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n\r\n                            <!-- Rescheduling Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showReducingPolicy = !showReducingPolicy\">\r\n                                <h3 class=\"policy-title\">Rescheduling Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showReducingPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Acceptance Section -->\r\n                        <div class=\"acceptance-section\">\r\n                            <input type=\"checkbox\" class=\"custom-checkbox\" [(ngModel)]=\"termsAndConditions\"\r\n                                (ngModelChange)=\"checkRequiredValues()\">\r\n                            <p class=\"acceptance-text\">\r\n                                I understand and accept the cancellation & rescheduling policies and\r\n                                <span class=\"terms-link\">Terms & Conditions<span\r\n                                        class=\"external-link-icon\"></span></span>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #paymentTab>\r\n    <div class=\"w-60 payment_section\">\r\n        <div class=\"w-100 h-100\">\r\n            <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\r\n                <!-- Header Section -->\r\n                <div class=\"payment-header mb-3 w-100\">\r\n                    <h1>Payment & Confirmation</h1>\r\n                    <p class=\"payment-subtitle mb-0\">Review your booking and complete payment</p>\r\n                </div>\r\n\r\n                <!-- Booking Summary Card -->\r\n                <div class=\"booking-summary-card\" [ngClass]=\"{'w-100' : screenWidth < 475,'w-50':screenWidth > 475}\">\r\n                    <h2 class=\"summary-title\">Booking Summary</h2>\r\n\r\n                    <!-- Service -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Service</div>\r\n                        <div class=\"summary-value\">{{selectedService?.name ? selectedService?.name : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Professional -->\r\n                    <div class=\"summary-row\" *ngIf=\"selectedStaff?.staffName\">\r\n                        <div class=\"summary-label\">Professional</div>\r\n                        <div class=\"summary-value\">{{selectedStaff?.staffName ? selectedStaff?.staffName : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Location -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Location</div>\r\n                        <div class=\"summary-value\">{{selectedLocation?.storeName ? selectedLocation?.storeName : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Date & Time -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Date & Time</div>\r\n                        <div class=\"summary-value\">{{selectedDateStr ? (selectedDateStr) : 'N/A'}} at\r\n                            {{selectedTime ? selectedTime.value : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Duration -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Duration</div>\r\n                        <div class=\"summary-value\">{{selectedService?.duration ? selectedService?.duration : 'N/A'}}\r\n                            minutes</div>\r\n                    </div>\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Tax Percent</div>\r\n                        <div class=\"summary-value\">{{selectedService?.priceDetails?.taxPercent ?\r\n                            selectedService?.priceDetails?.taxPercent : 'N/A'}}%</div>\r\n                    </div>\r\n                    <!-- Total -->\r\n                    <div class=\"summary-row total-row\">\r\n                        <div class=\"summary-label\">Total</div>\r\n                        <div class=\"summary-value\">\r\n                            <span class=\"currency-symbol\">\u20B9</span>{{selectedService?.priceDetails?.totalPrice ?\r\n                            selectedService?.priceDetails?.totalPrice : '0'}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #statusTemplate>\r\n    <div class=\"booking-confirmation\">\r\n        <!-- Success Icon -->\r\n        <div class=\"success-icon\">\r\n            <div class=\"checkmark-circle\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"apiStatus\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Main Content -->\r\n        <div class=\"confirmation-content\">\r\n            <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\r\n            <p class=\"confirmation-message\">\r\n                {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\r\n                try again later'}}\r\n            </p>\r\n\r\n            <!-- Details Card -->\r\n            <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\r\n                <div class=\"details-card\">\r\n                    <h3 class=\"details-title\">Appointment Details</h3>\r\n\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Service</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.serviceDetail?.name ?\r\n                            appointmentPayload.serviceDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n\r\n                    <div class=\"details-row\" *ngIf=\"appointmentPayload?.staffDetail?.name\">\r\n                        <span class=\"detail-label\">Professional</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.staffDetail?.name ?\r\n                            appointmentPayload.staffDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Date & Time</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.bookingDate ?\r\n                            appointmentPayload.bookingDate.slice(0,10) :\r\n                            'N/A'}} at\r\n                            {{appointmentPayload.startTime ? appointmentPayload.startTime : 'N/A'}}</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <!-- Action Buttons -->\r\n            <!-- <div class=\"action-buttons\">\r\n                <button class=\"btn btn-outline\">View My Bookings</button>\r\n                <button class=\"btn btn-primary\">Back to Admin</button>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #skeletonLoader *ngIf=\"skeletonLoader\">\r\n    <!-- Service Skeleton Loader HTML -->\r\n    <div class=\"service-grid\">\r\n        <!-- Skeleton Card 1 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 2 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 3 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 4 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 5 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 6 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: ["body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#fff;color:#000;line-height:1.6}.main_section{position:relative;height:100%}.main_header{padding:1%;width:100%;background:#fff;height:15%}.main_body{height:75%;padding-top:0%;overflow:scroll}.header{display:flex;align-items:center;justify-content:space-between}.back-btn mat-icon{height:16px!important;width:20px!important;font-size:21px!important}.back-btn span{color:#000;font-size:15px;font-weight:500}.back-btn:hover{background-color:#f0f0f0}.header-title{flex-grow:1;margin-left:2rem}.header-title h1{font-size:20px;font-weight:600;margin-bottom:0}.header-title p{color:#666;font-size:14px}.step-indicator{font-size:14px;color:#000;font-weight:700}.progress-bar{width:100%;height:8px;background-color:#e0e0e0;margin-bottom:1rem;border-radius:10px;overflow:hidden}.w-60{width:60%!important}.progress-fill{height:100%;width:14.28%;background-color:#000}.service-selection h2{font-size:20px;font-weight:600;margin:.25rem 0}.service-selection p{color:#666;font-size:16px;margin-bottom:1rem}.main_footer{border-top:1px solid lightgrey;width:100%;background-color:#fff;height:10%}.services-grid{display:grid;grid-template-columns:48% 48%;gap:15px;padding-bottom:5px}.service-card{border:1px solid lightgrey;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-card:hover{background-color:#f9f9f9;box-shadow:0 4px 8px #0000001a}.service-card-selected{border:2px solid black;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:3rem}.service-info{flex-grow:1}.service-icon{width:40px;height:40px;border-radius:8px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;margin-right:1rem;font-size:20px;margin-top:.2rem}.service-title{font-size:18px;font-weight:600;margin-bottom:4px}.service-category{background-color:#f0f0f0;color:#000;padding:1% 4%;border-radius:12px;font-size:12px;font-weight:500;display:inline-block}.service-price{font-size:17px;font-weight:700;color:#000}.service-duration{font-size:12px;color:#666;display:flex;justify-content:center;align-items:center}.service-description{color:#666;font-size:15px;margin-bottom:.5rem;line-height:1.5}.home-visit{display:flex;align-items:center;font-size:12px;color:#666;border:1px solid lightgrey;padding:.5% 1%;border-radius:4px;background-color:#fff;width:10vw;height:3vh;white-space:nowrap;justify-content:space-around}.home-visit img{width:18px}.footer-buttons{display:flex;justify-content:space-between;align-items:center;width:60%}.back-footer-btn{color:#000;padding:12px 24px;font-size:16px}.continue-btn{background-color:#000;color:#fff;border:2px solid black;padding:.5%;border-radius:4px;font-size:15px!important;font-weight:600;cursor:pointer;width:6vw!important}.continue-btn:hover{background-color:#333}.continue-btn:disabled{background-color:#ccc;border-color:#ccc;cursor:not-allowed}.location_section{width:60%;overflow:hidden}.location_section .header h1{font-size:20px;font-weight:600;margin:.25rem 0}.location_section .header p{font-size:16px;color:#888;font-weight:400}.location-list{display:flex;flex-direction:column;gap:20px;height:64vh;overflow-x:scroll;padding-bottom:1%}.location-card{border:1px solid lightgrey;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-card:hover{box-shadow:0 4px 8px #0000001a}.location-card-selected{border:1px solid black;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-content{display:flex;align-items:center;justify-content:space-between}.location-info{display:flex;align-items:center;flex-grow:1}.location-icon{width:40px;height:40px;background-color:#d3d3d3;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:20px}.location-icon img{width:28px}.location-details{width:95%}.location-details h3{font-size:16px;font-weight:600;margin-bottom:0}.location-details p{font-size:14px;color:#aaa;line-height:1.4;margin:0}.distance{display:flex;align-items:center;color:#888;font-size:14px;margin-left:20px}.distance mat-icon{width:18px!important;height:15px!important;font-size:17px}.staff-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.staff-subtitle{font-size:16px;color:#888;font-weight:400}.staff-card{border:1px solid lightgrey;cursor:pointer;transition:all .3s ease}.staff-card:hover{box-shadow:0 4px 8px #0000001a}.staff-card-selected{border-color:#666;cursor:pointer;transition:all .3s ease}.staff-avatar{width:64px;height:64px;background-color:gray;font-size:20px;font-weight:600;color:#fff}.staff-name{font-size:16px;font-weight:600;margin-bottom:0}.staff-specialty{font-size:14px;color:gray;margin-bottom:8px}.staff-description{font-size:14px;color:gray;line-height:1.4}.rating-section{display:flex;flex-direction:column;align-items:flex-end}.star-rating{color:gold;font-size:16px;margin-bottom:4px;width:100%}.rating-number{font-size:18px;font-weight:600;color:#000}.review-count{font-size:12px;color:#888}.star-icon:before{content:\"\\2b50\";margin-right:4px}.staff_section{width:60%;overflow:hidden}.staff-list{height:64vh;overflow-x:scroll;padding-bottom:1%}.datetime-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.main_container{height:85%}.datetime-subtitle{font-size:16px;color:#888;font-weight:400}.section-card{border:1px solid lightgrey}.section-title{font-size:17px;font-weight:600;margin-bottom:20px}.date-picker-container{border:1px solid lightgrey}.date-picker-container mat-icon{height:17px;font-size:18px}.date-input{font-size:16px;padding:2%;width:30%;outline:none}.time-slot{border:1px solid lightgrey;font-size:14px;font-weight:500;padding:6%;cursor:pointer;transition:all .3s ease;text-align:center;min-width:80px}.time-slot:hover{box-shadow:0 4px 8px #0000001a}.time-slot.selected{background-color:#555;border-color:#777;color:#fff}.waitlist-section{background-color:#789;border:none;padding:4%;max-height:13vh}.waitlist-icon{color:#4ade80;font-size:18px}.waitlist-title{color:#fff;font-size:16px;font-weight:500;margin-bottom:8px}.mobile_number{border-color:#dc3545!important;box-shadow:0 0 0 .1rem #ffc3c3}.waitlist-description{color:#fff;font-size:14px;margin-bottom:0;font-weight:500}.waitlist-description .form-check-input{width:17px;height:17px;background-color:transparent}.waitlist-description .form-check-input:checked{background-color:#0d6efd}.check-icon:before{content:\"\\2713\"}.contact-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.contact-subtitle{font-size:16px;color:#888;font-weight:400}.form-section{border:1px solid lightgrey}.section-title{font-size:16px;font-weight:600;margin-bottom:24px}.form-label{font-size:14px;font-weight:500;margin-bottom:8px}.required-asterisk{color:#ff6b6b;margin-left:4px}.form-input{border:1px solid lightgrey;font-size:16px;padding:1%;transition:all .3s ease}.form-input:focus{border-color:#777}.form-input::placeholder{color:#aaa;font-size:14px}.form-textarea{border:1px solid lightgrey;font-size:16px;padding:12px 16px;resize:vertical;max-height:120px;transition:all .3s ease}.form-textarea:focus{border-color:#777}.form-textarea::placeholder{color:#aaa;font-size:14px}.optional-label{color:#888;font-size:12px;font-style:italic}.details_container{height:89%;overflow-x:scroll;padding-bottom:1%}.policies-container{background-color:#fff;border:1px solid lightgrey;padding:2rem;border-radius:12px}.policies-title{font-size:16px;font-weight:600;color:#000;margin-bottom:1rem}.policy-item{background-color:#fff;border:1px solid lightgrey;border-radius:8px;padding:1%;cursor:pointer;transition:all .3s ease}.cancellation_policies{padding:1% .5%;font-weight:500}.policy-item:hover{background-color:#f8f9fa;border-color:#ccc}.policy-item:last-of-type{margin-bottom:32px}.policy-title{font-size:14px;font-weight:500;color:#000;margin:0}.acceptance-section{display:flex;align-items:flex-start;gap:7px;margin-top:8px}.custom-checkbox{width:18px;height:20px;background-color:#fff;border:1px solid lightgrey;border-radius:4px;margin-top:2px;cursor:pointer;position:relative;flex-shrink:0;transition:all .3s ease}.custom-checkbox:hover{border-color:#999;background-color:#f8f9fa}.custom-checkbox.checked{background-color:#007bff;border-color:#007bff}.custom-checkbox.checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}.acceptance-text{font-size:14px;color:#000;line-height:1.5;margin:0}.terms-link{color:#007bff;text-decoration:none;font-weight:500;position:relative}.terms-link:hover{color:#0056b3;text-decoration:underline}.external-link-icon{margin-left:4px;font-size:12px;opacity:.8}.external-link-icon:after{content:\"\\2197\"}.payment-header h1{font-size:20px;font-weight:600;color:#000;margin:.25rem 0}.payment-subtitle{font-size:16px;color:#666;font-weight:400}.booking-summary-card{background-color:#fff;border:1px solid lightgrey;padding:2%;border-radius:12px}.summary-title{font-size:18px;font-weight:600;color:#000;margin-bottom:32px}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.summary-row:last-child{border-bottom:none;padding-bottom:0}.summary-label{font-size:16px;color:#000;font-weight:500}.summary-value{font-size:16px;color:#000;font-weight:400;text-align:right}.total-row{margin-top:16px;padding-top:16px}.total-row .summary-label,.total-row .summary-value{font-size:20px;font-weight:600}.currency-symbol{font-size:18px}.complete_booking{background:#e3fee3;border:none;padding:.5%;width:12vw!important;font-size:15px!important;font-weight:500;border-radius:4px}.complete_booking img{width:30px}.pay-now-btn{justify-content:unset!important;background:#e3fee3;border:none;padding:.5%;width:8vw!important;font-size:15px!important;font-weight:500;border-radius:4px;gap:.5rem}.pay-now-btn img{width:30px}.booking-confirmation{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;width:60%;border-radius:10px}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:80px;height:80px;position:relative}.checkmark{width:80px;height:80px;border-radius:50%;display:block;stroke-width:3;stroke:#22c55e;stroke-miterlimit:10;animation:checkmark-fill .4s ease-in-out .4s forwards,checkmark-scale .3s ease-in-out .9s both}.checkmark-circle-path{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:3;stroke-miterlimit:10;stroke:#22c55e;fill:none;animation:checkmark-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;stroke:#22c55e;stroke-width:3;animation:checkmark-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes checkmark-stroke{to{stroke-dashoffset:0}}@keyframes checkmark-scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes checkmark-fill{to{box-shadow:inset 0 0 0 30px #22c55e}}.confirmation-content{width:100%;height:80%}.confirmation-title{font-size:18px;font-weight:700}.confirmation-message{font-size:1rem;margin-bottom:1rem;line-height:1.6;font-weight:500}.details-card{background:#ffffff1a;border:1px solid lightgrey;border-radius:16px;padding:1.5rem;margin-bottom:2rem;width:35vw}.details-title{font-size:1.25rem;font-weight:600;margin:0 0 1.5rem}.details-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.9rem;font-weight:500}.detail-value{font-weight:600;font-size:1rem}.action-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease;border:none;min-width:140px}.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff}.btn-outline:hover{background:#ffffff1a;border-color:#ffffff80}.btn-primary{background:#fff;color:#1f2937}.btn-primary:hover{background:#f3f4f6;transform:translateY(-1px)}.datepicker-popover{position:absolute;z-index:1000;margin-top:8px;border-radius:16px;overflow:hidden;box-shadow:0 12px 28px #0000001f,0 2px 4px #00000014;background:#fff;border:1px solid rgba(0,0,0,.06);width:17vw}::ng-deep .datepicker-calendar{border-radius:16px!important;overflow:hidden!important;font-family:Segoe UI,Roboto,sans-serif!important;width:100%!important}::ng-deep .mat-calendar-header{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;padding:3px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:60px!important;border-radius:16px 16px 0 0!important}::ng-deep .mat-calendar-controls{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;margin:2% calc(4.7142857143% - 16px)!important}::ng-deep .mat-calendar-period-button{color:#fff!important;font-weight:700!important;font-size:16px!important;letter-spacing:.5px!important;background:transparent!important;border:none!important;padding:12px 16px!important;border-radius:8px!important;transition:all .3s ease!important;flex-grow:1!important;text-align:left!important;margin:0!important;order:1!important}::ng-deep .mat-calendar-period-button:hover{background:#ffffff26!important;transform:translateY(-1px)!important}::ng-deep .mat-calendar-header .mat-calendar-controls>div{display:flex;order:2!important}::ng-deep .mat-calendar-previous-button,::ng-deep .mat-calendar-next-button{color:#fff!important;width:40px!important;height:40px!important;border-radius:50%!important;background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;transition:all .3s ease!important;margin:0 4px!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mat-calendar-previous-button:hover,::ng-deep .mat-calendar-next-button:hover{background:#ffffff40!important;transform:scale(1.05)!important}::ng-deep .mat-calendar-arrow{fill:#fff!important;width:20px!important;height:20px!important}::ng-deep .mat-calendar-content{padding:10px 16px!important;background:#fff!important}::ng-deep .mat-calendar-table-header th{color:#6b7280!important;font-weight:600!important;font-size:12px!important;text-align:center!important;padding-bottom:12px!important;text-transform:uppercase!important}::ng-deep .mat-calendar-table{border-spacing:0!important;border-collapse:collapse!important;width:100%!important}::ng-deep .mat-calendar-body-cell{height:44px!important;width:44px!important;border-radius:12px!important}::ng-deep .mat-calendar-body-cell-content{width:33px!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-weight:500!important;font-size:14px!important;color:#374151!important;transition:all .3s cubic-bezier(.4,0,.2,1)!important}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover .mat-calendar-body-cell-content:not(.mat-calendar-body-selected){background:#667eea1a!important;color:#667eea!important;transform:scale(1.05)!important}::ng-deep .mat-calendar-body-selected{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;box-shadow:0 4px 12px #677eea4d!important}::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected){border:none;color:#667eea!important;font-weight:700!important}::ng-deep .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){color:#d1d5db!important}.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;padding:20px;width:60%}.service-card{border:1px solid #e5e5e5;border-radius:8px;padding:20px;background:#fff;box-shadow:0 2px 4px #0000001a}.service-header{display:flex;align-items:flex-start;gap:15px;margin-bottom:15px}.service-content{flex:1;display:flex;flex-direction:column;gap:8px}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:40px;height:40px;border-radius:50%;flex-shrink:0}.skeleton-title{height:20px;width:70%}.skeleton-price{height:18px;width:50%;align-self:flex-end}.skeleton-duration{height:14px;width:40%;align-self:flex-end}.skeleton-category{height:24px;width:25%;border-radius:12px;margin-bottom:10px}.skeleton-description{height:16px;width:85%;margin-bottom:15px}.skeleton-badge{height:32px;width:45%;border-radius:16px;margin-top:10px}@media (max-width: 768px){.service-grid{grid-template-columns:1fr;gap:15px;padding:15px}.service-card{padding:15px}}.time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;max-width:400px;margin:0 auto}.skeleton-time-slot{height:44px;border-radius:8px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;border:1px solid #e5e5e5;position:relative}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-time-slot:nth-child(2n){animation:skeleton-pulse 2s infinite}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.7}}@media (max-width: 480px){.time-slot-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}.skeleton-time-slot{height:40px}}@media (max-width: 320px){.time-slot-grid{grid-template-columns:1fr}}@media screen and (min-width:320px) and (max-width:475px){.back-btn{gap:.25rem!important;margin:0!important}.back-btn span{color:#000;font-size:12px;font-weight:500;white-space:nowrap}.back-btn mat-icon{font-size:16px!important;margin-bottom:0!important}.header-title{display:flex;align-items:center;margin-bottom:0rem!important}.header-title h1{font-size:16px!important}.main_header .header{padding:3%}.date_section,.service_section,.location_section,.contact_section,.payment_section{width:100%!important;padding:0% 5%}.service_section h2{font-size:17px!important;margin-bottom:0!important}.service_section p{font-size:14px!important}.main_section{height:100vh}.services-grid{display:flex;justify-content:center;flex-wrap:wrap}.service-card,.service-card-selected{width:90vw!important}.home-visit{width:40vw!important}.back-footer-btn{padding:12px 2px!important}.footer-buttons{padding:0% 3%!important;width:100%!important}.continue-btn{width:22vw!important}.main_container{flex-wrap:wrap;height:100%!important}.date_section{overflow:hidden}.date_section .time_selection{height:60%}.datepicker-popover{width:60vw!important}.details_container{height:90%!important;justify-content:space-around}.complete_booking{width:39vw!important}.booking_confirmation,.details-card{width:100%!important}.datetime-header h1{margin:0!important}}@media screen and (max-width: 475px){.main_header{height:10%}.main_body{height:83%}.main_footer{height:7%}.staff-listing{width:100%!important;padding:0% 5%}.booking-confirmation{width:auto;padding:0rem}}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: EventsService }, { type: i2$2.Router }, { type: i6$1.MessageService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -15685,7 +15645,7 @@ class HeaderSectionComponent {
         this.router.navigate(['/login']);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: RestService }, { token: EventsService }, { token: LOCAL_STORAGE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"isHeaderSticky && isMobile && !isEcommerceWebsite\">\r\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n      simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n      <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n      <ng-container *ngIf=\"style?.headline?.display\">\r\n        <div>\r\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n        </div>\r\n      </ng-container>\r\n      <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n      <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"style?.background?.color\">search</mat-icon>\r\n      </div> -->\r\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n      </ng-container>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n        aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container> </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n    (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n    [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n    loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <div class=\"d-flex gap-3\"\r\n      [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n      <ng-container *ngFor=\"let item of getNavbarButton\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n            [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | lowercase | titlecase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n      <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n        (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon>person_outline</mat-icon>\r\n        Login\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn && !isMobile\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n    [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div> -->\r\n    <div class=\"w-75 d-flex align-items-center\">\r\n      <div class=\"input-group w-75 ml-2\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n          [style.color]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n          height=\"30\" version=\"1.1\">\r\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n          </g>\r\n        </svg>\r\n        <div [style.color]=\"accentColor\">Schemes</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-center\">\r\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n        Pincode\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n        getPincode}}</div>\r\n\r\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your PIN Code unlocks\r\n        </div>\r\n        <div class=\"sub-text text-center f-14 pincode-text\">\r\n          Fastest delivery date, Try-at-Home availability,\r\n          Nearest store and In-store design!\r\n        </div>\r\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n          [class.error-border]=\"pinError\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n            class=\"w-75 p-0\">\r\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n        </div>\r\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n          Please enter a valid pincode\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getCartItemsCount}}</div>\r\n      </div>\r\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path\r\n            d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n      </div>\r\n      <!-- (mouseleave)=\"showLogin = false\" -->\r\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your Account\r\n        </div>\r\n        <div class=\"sub-text text-center f-14\">\r\n          Access account & manage your orders.\r\n        </div>\r\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n            [style.color]=\"style?.background?.color\">Sign Up</div>\r\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n            [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n  [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n  <div class=\"offcanvas-header\">\r\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n    <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\r\n    <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n  </div>\r\n  <div class=\"offcanvas-body\">\r\n    <div class=\"pages\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"offcanvas-footer\">\r\n    <div class=\"canvas-button\">\r\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\r\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n\r\n\r\n  <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\r\n\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n    *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\r\n    <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n      (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\r\n      {{ele?.categoryName | titlecase}}\r\n    </div>\r\n    <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n      *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n      [simpoColor]=\"data?.styles?.headline?.color\">\r\n      Collections\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showList = false\" -->\r\n  <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n          <div class=\"list-header mb-3\">By Price</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n              <div class=\"each-price cursor-pointer\"\r\n                (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n                {{price | titlecase}}\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4 h-100 overflow-scroll\"\r\n          *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n          <div class=\"list-header mb-3\">By Style</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n              <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n                |\r\n                titlecase}}</div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n          <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n              <div class=\"d-flex gap-2 align-items-center\">\r\n                <div style=\"width: 15px;height: 20px;\">\r\n                  <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n                </div>\r\n                <div class=\"each-price cursor-pointer\">{{collection.name\r\n                  |\r\n                  titlecase}}</div>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n        <ng-container *ngFor=\"let image of selectedCategory?.imageUrls  | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n            <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showCollections = false\" -->\r\n  <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n          <div class=\"collection row col-3 align-items-center\"\r\n            (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n            <div class=\"col-imag col-4\">\r\n              <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n            </div>\r\n            <div class=\"col-8 text-overflow\">\r\n              {{collection?.collectionName | titlecase}}\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n        <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6  position-relative\" *ngIf=\"image\"\r\n            (click)=\"applyFilterToList(image, 'collections')\">\r\n            <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n            <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n              [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n      <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n        <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n      </div>\r\n      <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%;z-index:1001}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"isHeaderSticky && isMobile && !isEcommerceWebsite\">\r\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n      simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n      <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n      <ng-container *ngIf=\"style?.headline?.display\">\r\n        <div>\r\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n        </div>\r\n      </ng-container>\r\n      <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n      <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"style?.background?.color\">search</mat-icon>\r\n      </div> -->\r\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n      </ng-container>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div [class.w-5]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n        aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\" [class.w-5]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div [class.w-5]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container> </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\" [class.w-5]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n    (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n    [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n    loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <div class=\"d-flex gap-3\"\r\n      [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n      <ng-container *ngFor=\"let item of getNavbarButton\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n            [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | lowercase | titlecase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n      <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n        (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon>person_outline</mat-icon>\r\n        Login\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn && !isMobile\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n    [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div> -->\r\n    <div class=\"w-75 d-flex align-items-center\">\r\n      <div class=\"input-group w-75 ml-2\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n          [style.color]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n          height=\"30\" version=\"1.1\">\r\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n          </g>\r\n        </svg>\r\n        <div [style.color]=\"accentColor\">Schemes</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-center\">\r\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n        Pincode\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n        getPincode}}</div>\r\n\r\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your PIN Code unlocks\r\n        </div>\r\n        <div class=\"sub-text text-center f-14 pincode-text\">\r\n          Fastest delivery date, Try-at-Home availability,\r\n          Nearest store and In-store design!\r\n        </div>\r\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n          [class.error-border]=\"pinError\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n            class=\"w-75 p-0\">\r\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n        </div>\r\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n          Please enter a valid pincode\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getCartItemsCount}}</div>\r\n      </div>\r\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path\r\n            d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n      </div>\r\n      <!-- (mouseleave)=\"showLogin = false\" -->\r\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your Account\r\n        </div>\r\n        <div class=\"sub-text text-center f-14\">\r\n          Access account & manage your orders.\r\n        </div>\r\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n            [style.color]=\"style?.background?.color\">Sign Up</div>\r\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n            [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n  [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n  <div class=\"offcanvas-header\">\r\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n    <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\r\n    <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n  </div>\r\n  <div class=\"offcanvas-body\">\r\n    <div class=\"pages\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"offcanvas-footer\">\r\n    <div class=\"canvas-button\">\r\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\r\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n\r\n\r\n  <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\r\n\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n    *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\r\n    <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n      (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\r\n      {{ele?.categoryName | titlecase}}\r\n    </div>\r\n    <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n      *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n      [simpoColor]=\"data?.styles?.headline?.color\">\r\n      Collections\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showList = false\" -->\r\n  <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n          <div class=\"list-header mb-3\">By Price</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n              <div class=\"each-price cursor-pointer\"\r\n                (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n                {{price | titlecase}}\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4 h-100 overflow-scroll\"\r\n          *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n          <div class=\"list-header mb-3\">By Style</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n              <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n                |\r\n                titlecase}}</div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n          <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n              <div class=\"d-flex gap-2 align-items-center\">\r\n                <div style=\"width: 15px;height: 20px;\">\r\n                  <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n                </div>\r\n                <div class=\"each-price cursor-pointer\">{{collection.name\r\n                  |\r\n                  titlecase}}</div>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n        <ng-container *ngFor=\"let image of selectedCategory?.imageUrls  | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n            <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showCollections = false\" -->\r\n  <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n          <div class=\"collection row col-3 align-items-center\"\r\n            (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n            <div class=\"col-imag col-4\">\r\n              <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n            </div>\r\n            <div class=\"col-8 text-overflow\">\r\n              {{collection?.collectionName | titlecase}}\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n        <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6  position-relative\" *ngIf=\"image\"\r\n            (click)=\"applyFilterToList(image, 'collections')\">\r\n            <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n            <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n              [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n      <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n        <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n      </div>\r\n      <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%;z-index:1001}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, decorators: [{
             type: Component,
@@ -15709,7 +15669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SpacingHorizontalDirective,
                         MovingTextComponent,
                         ContentFitDirective,
-                    ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"isHeaderSticky && isMobile && !isEcommerceWebsite\">\r\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n      simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n      <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n      <ng-container *ngIf=\"style?.headline?.display\">\r\n        <div>\r\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n        </div>\r\n      </ng-container>\r\n      <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n      <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"style?.background?.color\">search</mat-icon>\r\n      </div> -->\r\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n      </ng-container>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n        aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container> </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n    (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n    [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n    loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <div class=\"d-flex gap-3\"\r\n      [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n      <ng-container *ngFor=\"let item of getNavbarButton\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n            [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | lowercase | titlecase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n      <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n        (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon>person_outline</mat-icon>\r\n        Login\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn && !isMobile\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n    [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div> -->\r\n    <div class=\"w-75 d-flex align-items-center\">\r\n      <div class=\"input-group w-75 ml-2\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n          [style.color]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n          height=\"30\" version=\"1.1\">\r\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n          </g>\r\n        </svg>\r\n        <div [style.color]=\"accentColor\">Schemes</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-center\">\r\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n        Pincode\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n        getPincode}}</div>\r\n\r\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your PIN Code unlocks\r\n        </div>\r\n        <div class=\"sub-text text-center f-14 pincode-text\">\r\n          Fastest delivery date, Try-at-Home availability,\r\n          Nearest store and In-store design!\r\n        </div>\r\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n          [class.error-border]=\"pinError\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n            class=\"w-75 p-0\">\r\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n        </div>\r\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n          Please enter a valid pincode\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getCartItemsCount}}</div>\r\n      </div>\r\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path\r\n            d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n      </div>\r\n      <!-- (mouseleave)=\"showLogin = false\" -->\r\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your Account\r\n        </div>\r\n        <div class=\"sub-text text-center f-14\">\r\n          Access account & manage your orders.\r\n        </div>\r\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n            [style.color]=\"style?.background?.color\">Sign Up</div>\r\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n            [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n  [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n  <div class=\"offcanvas-header\">\r\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n    <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\r\n    <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n  </div>\r\n  <div class=\"offcanvas-body\">\r\n    <div class=\"pages\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"offcanvas-footer\">\r\n    <div class=\"canvas-button\">\r\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\r\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n\r\n\r\n  <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\r\n\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n    *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\r\n    <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n      (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\r\n      {{ele?.categoryName | titlecase}}\r\n    </div>\r\n    <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n      *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n      [simpoColor]=\"data?.styles?.headline?.color\">\r\n      Collections\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showList = false\" -->\r\n  <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n          <div class=\"list-header mb-3\">By Price</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n              <div class=\"each-price cursor-pointer\"\r\n                (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n                {{price | titlecase}}\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4 h-100 overflow-scroll\"\r\n          *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n          <div class=\"list-header mb-3\">By Style</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n              <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n                |\r\n                titlecase}}</div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n          <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n              <div class=\"d-flex gap-2 align-items-center\">\r\n                <div style=\"width: 15px;height: 20px;\">\r\n                  <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n                </div>\r\n                <div class=\"each-price cursor-pointer\">{{collection.name\r\n                  |\r\n                  titlecase}}</div>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n        <ng-container *ngFor=\"let image of selectedCategory?.imageUrls  | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n            <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showCollections = false\" -->\r\n  <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n          <div class=\"collection row col-3 align-items-center\"\r\n            (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n            <div class=\"col-imag col-4\">\r\n              <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n            </div>\r\n            <div class=\"col-8 text-overflow\">\r\n              {{collection?.collectionName | titlecase}}\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n        <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6  position-relative\" *ngIf=\"image\"\r\n            (click)=\"applyFilterToList(image, 'collections')\">\r\n            <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n            <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n              [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n      <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n        <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n      </div>\r\n      <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%;z-index:1001}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"isHeaderSticky && isMobile && !isEcommerceWebsite\">\r\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n      simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n      <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n      <ng-container *ngIf=\"style?.headline?.display\">\r\n        <div>\r\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n        </div>\r\n      </ng-container>\r\n      <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n      <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"style?.background?.color\">search</mat-icon>\r\n      </div> -->\r\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n      </ng-container>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div [class.w-5]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n        aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\" [class.w-5]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div [class.w-5]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container> </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\" [class.w-5]=\"content?.logo?.isImage\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n    (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n    [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n    loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <div class=\"d-flex gap-3\"\r\n      [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n      <ng-container *ngFor=\"let item of getNavbarButton\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n            [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | lowercase | titlecase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n      <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n        (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon>person_outline</mat-icon>\r\n        Login\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn && !isMobile\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n    [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div> -->\r\n    <div class=\"w-75 d-flex align-items-center\">\r\n      <div class=\"input-group w-75 ml-2\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n          [style.color]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n          height=\"30\" version=\"1.1\">\r\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n          </g>\r\n        </svg>\r\n        <div [style.color]=\"accentColor\">Schemes</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-center\">\r\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n        Pincode\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n        getPincode}}</div>\r\n\r\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your PIN Code unlocks\r\n        </div>\r\n        <div class=\"sub-text text-center f-14 pincode-text\">\r\n          Fastest delivery date, Try-at-Home availability,\r\n          Nearest store and In-store design!\r\n        </div>\r\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n          [class.error-border]=\"pinError\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n            class=\"w-75 p-0\">\r\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n        </div>\r\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n          Please enter a valid pincode\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getCartItemsCount}}</div>\r\n      </div>\r\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path\r\n            d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n      </div>\r\n      <!-- (mouseleave)=\"showLogin = false\" -->\r\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your Account\r\n        </div>\r\n        <div class=\"sub-text text-center f-14\">\r\n          Access account & manage your orders.\r\n        </div>\r\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n            [style.color]=\"style?.background?.color\">Sign Up</div>\r\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n            [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n  [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n  <div class=\"offcanvas-header\">\r\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n    <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\r\n    <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n  </div>\r\n  <div class=\"offcanvas-body\">\r\n    <div class=\"pages\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"offcanvas-footer\">\r\n    <div class=\"canvas-button\">\r\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\r\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n\r\n\r\n  <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\r\n\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n    *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\r\n    <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n      (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\r\n      {{ele?.categoryName | titlecase}}\r\n    </div>\r\n    <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n      *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n      [simpoColor]=\"data?.styles?.headline?.color\">\r\n      Collections\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showList = false\" -->\r\n  <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n          <div class=\"list-header mb-3\">By Price</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n              <div class=\"each-price cursor-pointer\"\r\n                (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n                {{price | titlecase}}\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4 h-100 overflow-scroll\"\r\n          *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n          <div class=\"list-header mb-3\">By Style</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n              <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n                |\r\n                titlecase}}</div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n          <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n              <div class=\"d-flex gap-2 align-items-center\">\r\n                <div style=\"width: 15px;height: 20px;\">\r\n                  <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n                </div>\r\n                <div class=\"each-price cursor-pointer\">{{collection.name\r\n                  |\r\n                  titlecase}}</div>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n        <ng-container *ngFor=\"let image of selectedCategory?.imageUrls  | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n            <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showCollections = false\" -->\r\n  <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n          <div class=\"collection row col-3 align-items-center\"\r\n            (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n            <div class=\"col-imag col-4\">\r\n              <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n            </div>\r\n            <div class=\"col-8 text-overflow\">\r\n              {{collection?.collectionName | titlecase}}\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n        <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6  position-relative\" *ngIf=\"image\"\r\n            (click)=\"applyFilterToList(image, 'collections')\">\r\n            <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n            <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n              [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n      <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n        <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n      </div>\r\n      <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%;z-index:1001}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: RestService }, { type: EventsService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCAL_STORAGE]
@@ -21912,13 +21872,13 @@ class StoreListComponent extends BaseSection {
             return;
         const today = new Date();
         const dayName = today.toLocaleDateString('en-US', { weekday: 'long' }).toUpperCase();
-        for (let ele of storeHours) {
-            if (ele.dayOfWeek == dayName) {
+        for (let ele of Object.keys(storeHours)) {
+            if (ele == dayName) {
                 if (type == 'OPEN') {
-                    return ele.openingTime;
+                    return storeHours[ele].openingTime;
                 }
                 else {
-                    return ele.closingTime;
+                    return storeHours[ele].closingTime;
                 }
             }
         }
@@ -22002,13 +21962,13 @@ class StorePageComponent extends BaseSection {
         }
         const today = new Date();
         const dayName = today.toLocaleDateString('en-US', { weekday: 'long' }).toUpperCase();
-        for (let ele of storeHours) {
-            if (ele.dayOfWeek == dayName) {
-                if (ele.isClosed)
+        for (let ele of Object.keys(storeHours)) {
+            if (ele == dayName) {
+                if (storeHours[ele].isClosed)
                     return 'Closed';
-                if (ele.is24Hours)
-                    return 'Open 24 Hours';
-                return `${ele.openingTime} to ${ele.closingTime}`;
+                // if (storeHours[ele].is24Hours)
+                //   return 'Open 24 Hours';
+                return `${storeHours[ele].openingTime} to ${storeHours[ele].closingTime}`;
             }
         }
         return "";