simpo-component-library 3.6.995 → 3.6.998

package/fesm2022/simpo-component-library.mjs

@@ -22451,10 +22451,8 @@ class MyBookingsComponent {
         this.selected = null;
         this.cancellationPolicy = null;
         this.rescheduleCutoffHours = 24;
-        // Reschedule panel - date strip + slot grid, mirroring the customer prototype.
         this.reschedulePanelOpen = false;
         this.reschDays = [];
-        this.reschWeekStart = 0;
         this.reschSelectedIso = '';
         this.reschSelectedTime = '';
         this.reschSlots = [];
@@ -22463,7 +22461,30 @@ class MyBookingsComponent {
         this.reschError = '';
         this.reschNoSlots = false;
     }
+    /** Same contrast algorithm as ColorDirective (directive/color.directive.ts) - reimplemented as
+     * a pure getter rather than reusing that directive directly, since its [simpoColor] only ever
+     * *sets* a computed color and never clears it, which would leave a stale color stuck on a
+     * chip after it toggles from active back to inactive. Every accent-colored element here is
+     * either always-on (never toggles) or driven by this same getter, so there's exactly one
+     * definition of "what text color goes on the accent color" in this file. */
+    get contrastColor() {
+        let hex = this.styles?.background?.accentColor;
+        if (!hex)
+            return '#ffffff';
+        if (hex.length < 6) {
+            let expanded = '#';
+            for (let i = 1; i < hex.length; i++)
+                expanded += hex[i] + hex[i];
+            hex = expanded;
+        }
+        const r = parseInt(hex.slice(1, 3), 16);
+        const g = parseInt(hex.slice(3, 5), 16);
+        const b = parseInt(hex.slice(5, 7), 16);
+        const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+        return brightness > 130 ? '#000000' : '#ffffff';
+    }
     ngOnInit() {
+        this.styles = this.data?.styles;
         this.load();
     }
     load() {
@@ -22600,7 +22621,6 @@ class MyBookingsComponent {
         if (!this.selected)
             return;
         this.reschedulePanelOpen = true;
-        this.reschWeekStart = 0;
         this.reschSelectedTime = '';
         this.reschError = '';
         this.buildReschDayStrip();
@@ -22614,9 +22634,9 @@ class MyBookingsComponent {
         const today = new Date();
         today.setHours(0, 0, 0, 0);
         this.reschDays = [];
-        for (let i = 0; i < 5; i++) {
+        for (let i = 0; i < 14; i++) {
             const d = new Date(today);
-            d.setDate(d.getDate() + this.reschWeekStart + i);
+            d.setDate(d.getDate() + i);
             this.reschDays.push({
                 iso: d.toISOString(),
                 dow: d.toLocaleDateString('en-IN', { weekday: 'short' }),
@@ -22624,15 +22644,14 @@ class MyBookingsComponent {
             });
         }
     }
-    reschPrevWeek() {
-        if (this.reschWeekStart <= 0)
+    /** Mouse users have no swipe/trackpad gesture for the horizontally-scrolling day strip - give
+     * them explicit prev/next arrows instead of relying on shift+wheel (matches the admin side's
+     * RescheduleAppointmentComponent#scrollDays). */
+    scrollReschDays(direction) {
+        const el = this.reschDayStripRef?.nativeElement;
+        if (!el)
             return;
-        this.reschWeekStart = Math.max(0, this.reschWeekStart - 5);
-        this.buildReschDayStrip();
-    }
-    reschNextWeek() {
-        this.reschWeekStart += 5;
-        this.buildReschDayStrip();
+        el.scrollBy({ left: direction * 160, behavior: 'smooth' });
     }
     selectReschDay(day) {
         this.reschSelectedIso = day.iso;
@@ -22699,12 +22718,17 @@ class MyBookingsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MyBookingsComponent, deps: [{ token: RestService }, { token: StorageServiceService }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MyBookingsComponent, isStandalone: true, selector: "simpo-my-bookings", providers: [MessageService], ngImport: i0, template: "<p-toast position=\"bottom-right\"></p-toast>\n\n<div class=\"mb-root\">\n  <ng-container *ngIf=\"currentTab === 'LIST'\">\n    <div class=\"mb-title\">My Bookings</div>\n\n    <div class=\"mb-tabs\">\n      <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'upcoming'\" (click)=\"setProfTab('upcoming')\">Upcoming</button>\n      <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'past'\" (click)=\"setProfTab('past')\">Past</button>\n    </div>\n\n    <div class=\"mb-loading\" *ngIf=\"loading\">Loading your bookings\u2026</div>\n\n    <div class=\"mb-rows\" *ngIf=\"!loading && !isEmpty\">\n      <button type=\"button\" class=\"mb-row\" *ngFor=\"let b of rows\" (click)=\"viewBookingDetail(b)\">\n        <div class=\"mb-row-stripe\" [ngClass]=\"b.mode === 'HOME_VISIT' ? 'stripe-home' : b.mode === 'VIDEO_CALL' ? 'stripe-video' : 'stripe-store'\"></div>\n        <div class=\"mb-row-info\">\n          <div class=\"mb-row-top\">\n            <div class=\"mb-row-title\">{{title(b)}}</div>\n          </div>\n          <div class=\"mb-row-when\">{{when(b)}}</div>\n          <div class=\"mb-row-detail\">{{detail(b)}}</div>\n        </div>\n        <div class=\"mb-row-end\">\n          <span class=\"mb-status\" [ngClass]=\"statusClass(b.status)\">{{statusLabel(b.status)}}</span>\n        </div>\n      </button>\n    </div>\n\n    <div class=\"mb-empty\" *ngIf=\"isEmpty\">\n      <mat-icon class=\"mb-empty-icon\">event_busy</mat-icon>\n      <div class=\"mb-empty-title\">No {{profTab}} bookings yet.</div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"currentTab === 'DETAIL' && selected\">\n    <button type=\"button\" class=\"mb-back\" (click)=\"backToList()\">\n      <mat-icon>arrow_back</mat-icon> Back to My Bookings\n    </button>\n\n    <div class=\"mb-detail-card\">\n      <div class=\"mb-detail-header\">\n        <div class=\"mb-detail-title-row\">\n          <div class=\"mb-detail-title\">{{title(selected)}}</div>\n          <span class=\"mb-status\" [ngClass]=\"statusClass(selected.status)\">{{statusLabel(selected.status)}}</span>\n        </div>\n        <div class=\"mb-detail-when\">{{when(selected)}}</div>\n      </div>\n\n      <div class=\"mb-detail-rows\">\n        <div class=\"mb-detail-row\" *ngIf=\"selected.services?.length\">\n          <div class=\"mb-detail-k\">Services</div>\n          <div class=\"mb-detail-v\">{{serviceNames(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.productLines?.length\">\n          <div class=\"mb-detail-k\">Products</div>\n          <div class=\"mb-detail-v\">{{productNames(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.customerDetail\">\n          <div class=\"mb-detail-k\">Contact</div>\n          <div class=\"mb-detail-v\">{{selected.customerDetail?.name}} \u00B7 {{selected.customerDetail?.phoneNumber}} \u00B7 {{selected.customerDetail?.email}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.mode === 'HOME_VISIT' && selected.addressDetails\">\n          <div class=\"mb-detail-k\">Address</div>\n          <div class=\"mb-detail-v\">{{selected.addressDetails?.addressLine1}}, {{selected.addressDetails?.city}}, {{selected.addressDetails?.state}} {{selected.addressDetails?.zipCode}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"servicePriceTotal(selected) > 0\">\n          <div class=\"mb-detail-k\">Service price</div>\n          <div class=\"mb-detail-v\">\u20B9{{servicePriceTotal(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.homeVisitCharge\">\n          <div class=\"mb-detail-k\">Home visit charge</div>\n          <div class=\"mb-detail-v\">\u20B9{{selected.homeVisitCharge}}</div>\n        </div>\n        <div class=\"mb-detail-row\">\n          <div class=\"mb-detail-k\">Total</div>\n          <div class=\"mb-detail-v\">\u20B9{{totalDue(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\">\n          <div class=\"mb-detail-k\">Paid</div>\n          <div class=\"mb-detail-v\">{{paidLabel(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"pendingAmount(selected) > 0\">\n          <div class=\"mb-detail-k\">Pending at appointment</div>\n          <div class=\"mb-detail-v\">\u20B9{{pendingAmount(selected)}}</div>\n        </div>\n      </div>\n\n      <div class=\"mb-video-link\" *ngIf=\"selected.mode === 'VIDEO_CALL' && selected.videoCallLink && selected.status !== 'CANCELLED'\">\n        <mat-icon>videocam</mat-icon>\n        <a [href]=\"selected.videoCallLink\" target=\"_blank\">{{selected.videoCallLink}}</a>\n      </div>\n\n      <ng-container *ngIf=\"selected.status === 'BOOKED' && !reschedulePanelOpen\">\n        <div class=\"mb-policy\" *ngIf=\"canRescheduleSelected\">\n          <div class=\"mb-policy-title\">Reschedule policy</div>\n          <div class=\"mb-policy-text\">You can reschedule this booking up to {{rescheduleCutoffHours}} hour{{rescheduleCutoffHours === 1 ? '' : 's'}} before the appointment time.</div>\n        </div>\n        <button\n          type=\"button\"\n          class=\"mb-reschedule-btn\"\n          [disabled]=\"!canRescheduleSelected\"\n          [title]=\"!canRescheduleSelected ? selected.rescheduleBlockedReason : ''\"\n          (click)=\"openReschedulePanel()\"\n        >Reschedule booking</button>\n      </ng-container>\n\n      <div class=\"mb-resch-panel\" *ngIf=\"reschedulePanelOpen\">\n        <div class=\"mb-resch-header\">\n          <div class=\"mb-resch-title\">Choose a new date &amp; time</div>\n          <button type=\"button\" class=\"mb-resch-close\" (click)=\"closeReschedulePanel()\">&times;</button>\n        </div>\n\n        <div class=\"mb-resch-daystrip\">\n          <button type=\"button\" class=\"mb-resch-nav\" [disabled]=\"reschWeekStart <= 0\" (click)=\"reschPrevWeek()\">\n            <mat-icon>chevron_left</mat-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mb-resch-day\"\n            *ngFor=\"let day of reschDays\"\n            [class.active]=\"day.iso === reschSelectedIso\"\n            (click)=\"selectReschDay(day)\"\n          >\n            <span class=\"mb-resch-day-dow\">{{day.dow}}</span>\n            <span class=\"mb-resch-day-num\">{{day.num}}</span>\n          </button>\n          <button type=\"button\" class=\"mb-resch-nav\" (click)=\"reschNextWeek()\">\n            <mat-icon>chevron_right</mat-icon>\n          </button>\n        </div>\n\n        <div class=\"mb-resch-slots-loading\" *ngIf=\"reschLoadingSlots\">Loading available times\u2026</div>\n        <div class=\"mb-resch-slots-empty\" *ngIf=\"!reschLoadingSlots && reschNoSlots\">No slots available on this date. Try another date.</div>\n        <div class=\"mb-resch-slots\" *ngIf=\"!reschLoadingSlots && reschSlots.length\">\n          <button\n            type=\"button\"\n            class=\"mb-resch-slot\"\n            *ngFor=\"let slot of reschSlots\"\n            [class.active]=\"slot === reschSelectedTime\"\n            (click)=\"selectReschTime(slot)\"\n          >{{slot}}</button>\n        </div>\n\n        <div class=\"mb-resch-error\" *ngIf=\"reschError\">{{reschError}}</div>\n\n        <button type=\"button\" class=\"mb-resch-confirm\" [disabled]=\"reschInvalid\" (click)=\"confirmReschedule()\">\n          {{reschConfirming ? 'Confirming\u2026' : 'Confirm new slot'}}\n        </button>\n      </div>\n\n      <ng-container *ngIf=\"canCancelSelected && !reschedulePanelOpen\">\n        <div class=\"mb-policy\" *ngIf=\"cancellationPolicy\">\n          <div class=\"mb-policy-title\">{{cancellationPolicy.title}}</div>\n          <div class=\"mb-policy-text\">{{cancellationPolicy.policyDetails}}</div>\n        </div>\n        <button type=\"button\" class=\"mb-cancel-btn\" [disabled]=\"cancelling\" (click)=\"cancelBooking()\">\n          {{cancelling ? 'Cancelling\u2026' : 'Cancel booking'}}\n        </button>\n      </ng-container>\n\n      <div class=\"mb-cancelled-note\" *ngIf=\"selected.status === 'CANCELLED'\">This booking has been cancelled.</div>\n    </div>\n  </ng-container>\n</div>\n", styles: [".mb-root{display:flex;flex-direction:column;gap:16px;padding:4px 0 24px}.mb-title{font-size:20px;font-weight:600;color:#1b2436}.mb-tabs{display:flex;background:#f5f2ee;border-radius:8px;padding:4px;gap:4px;width:fit-content}.mb-tab{border:none;background:transparent;border-radius:6px;padding:8px 18px;font-size:13.5px;font-weight:500;color:#8a94a3;cursor:pointer}.mb-tab.active{background:#fff;color:#1b2436;font-weight:600;box-shadow:0 1px 3px #00000012}.mb-loading{font-size:13.5px;color:#8a94a3;padding:20px 0}.mb-rows{display:flex;flex-direction:column;gap:12px}.mb-row{border:1px solid #EEE9E3;border-radius:10px;padding:16px 18px;display:flex;align-items:flex-start;gap:14px;background:#fff;cursor:pointer;text-align:left;width:100%}.mb-row-stripe{width:3px;align-self:stretch;border-radius:999px;flex:none}.stripe-home{background:#16233a}.stripe-video{background:#7c3a11}.stripe-store{background:#8a94a3}.mb-row-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.mb-row-title{font-size:14.5px;font-weight:600;color:#1b2436}.mb-row-when{font-size:12.5px;color:#6b7688}.mb-row-detail{font-size:12px;color:#8a94a3}.mb-row-end{flex:none}.mb-status{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;border-radius:999px;padding:4px 9px;white-space:nowrap}.status-confirmed{background:#e8f4ee;color:#1e7a4b}.status-completed{background:#f2eee9;color:#8a7c6c}.status-cancelled{background:#fbedec;color:#b4432e}.status-pending{background:#fdf3e3;color:#b36b00}.mb-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:50px 20px;text-align:center}.mb-empty-icon{font-size:40px!important;height:40px!important;width:40px!important;color:#c9b7a2!important}.mb-empty-title{font-size:14.5px;color:#8a94a3}.mb-back{display:flex;align-items:center;gap:6px;border:none;background:none;padding:0;cursor:pointer;font-size:12.5px;color:#7c3a11;margin-bottom:6px;width:fit-content}.mb-back mat-icon{font-size:16px!important;height:16px!important;width:16px!important}.mb-detail-card{border:1px solid #EEE9E3;border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:16px;background:#fff}.mb-detail-header{display:flex;flex-direction:column;gap:6px;padding-bottom:14px;border-bottom:1px solid #F0ECE7}.mb-detail-title-row{display:flex;align-items:center;gap:10px}.mb-detail-title{font-size:17px;font-weight:600;color:#1b2436}.mb-detail-when{font-size:13px;color:#6b7688}.mb-detail-rows{display:flex;flex-direction:column;gap:12px}.mb-detail-row{display:flex;justify-content:space-between;gap:16px;font-size:13px}.mb-detail-k{color:#8a94a3;flex:none}.mb-detail-v{color:#1b2436;font-weight:500;text-align:right}.mb-video-link{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#f2f9f5;border-radius:8px;font-size:13px;color:#2c6a4b}.mb-video-link mat-icon{color:#1e7a4b!important;flex:none}.mb-policy{background:#fbfaf8;border:1px solid #EDE8E2;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.mb-policy-title{font-size:12px;font-weight:600;color:#a08b72;text-transform:uppercase;letter-spacing:.06em}.mb-policy-text{font-size:12.5px;line-height:1.6;color:#5f6b7c}.mb-cancel-btn{height:46px;border:1.5px solid #E3CFC9;border-radius:8px;background:#fff;color:#b4432e;font-size:13.5px;font-weight:600;cursor:pointer}.mb-cancel-btn:disabled{opacity:.6;cursor:not-allowed}.mb-cancelled-note{font-size:13px;color:#b4432e;font-weight:600}.mb-reschedule-btn{height:46px;border:1.5px solid #16233A;border-radius:8px;background:#fff;color:#16233a;font-size:13.5px;font-weight:600;cursor:pointer}.mb-reschedule-btn:disabled{opacity:.5;cursor:not-allowed}.mb-resch-panel{border:1px solid #EEE9E3;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:14px;background:#fbfaf8}.mb-resch-header{display:flex;align-items:center;justify-content:space-between}.mb-resch-title{font-size:14px;font-weight:600;color:#1b2436}.mb-resch-close{border:none;background:none;font-size:18px;color:#8a94a3;cursor:pointer;line-height:1}.mb-resch-daystrip{display:flex;align-items:center;gap:6px;overflow-x:auto}.mb-resch-nav{flex:none;border:none;background:none;color:#8a94a3;cursor:pointer;display:flex;align-items:center;justify-content:center}.mb-resch-nav:disabled{opacity:.35;cursor:not-allowed}.mb-resch-day{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;width:50px;padding:8px 0;border:1px solid #EEE9E3;border-radius:10px;background:#fff;cursor:pointer}.mb-resch-day.active{border-color:#7c3a11;background:#fbf1ea}.mb-resch-day-dow{font-size:10.5px;color:#8a94a3;text-transform:uppercase}.mb-resch-day-num{font-size:13.5px;font-weight:600;color:#1b2436}.mb-resch-slots-loading,.mb-resch-slots-empty{font-size:12.5px;color:#8a94a3}.mb-resch-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mb-resch-slot{padding:9px 6px;border:1px solid #EEE9E3;border-radius:8px;background:#fff;font-size:12.5px;color:#1b2436;cursor:pointer}.mb-resch-slot.active{border-color:#7c3a11;background:#7c3a11;color:#fff}.mb-resch-error{font-size:12.5px;color:#b4432e}.mb-resch-confirm{height:46px;border:none;border-radius:8px;background:#16233a;color:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-resch-confirm:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.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: MyBookingsComponent, isStandalone: true, selector: "simpo-my-bookings", inputs: { data: "data" }, providers: [MessageService], viewQueries: [{ propertyName: "reschDayStripRef", first: true, predicate: ["reschDayStrip"], descendants: true }], ngImport: i0, template: "<p-toast position=\"bottom-right\"></p-toast>\n\n<div class=\"mb-root\">\n  <ng-container *ngIf=\"currentTab === 'LIST'\">\n    <div class=\"mb-title\">My Bookings</div>\n\n    <div class=\"mb-tabs\">\n      <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'upcoming'\" (click)=\"setProfTab('upcoming')\">Upcoming</button>\n      <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'past'\" (click)=\"setProfTab('past')\">Past</button>\n    </div>\n\n    <div class=\"mb-loading\" *ngIf=\"loading\">Loading your bookings\u2026</div>\n\n    <div class=\"mb-rows\" *ngIf=\"!loading && !isEmpty\">\n      <button type=\"button\" class=\"mb-row\" *ngFor=\"let b of rows\" (click)=\"viewBookingDetail(b)\">\n        <div class=\"mb-row-stripe\" [ngClass]=\"b.mode === 'HOME_VISIT' ? 'stripe-home' : b.mode === 'VIDEO_CALL' ? 'stripe-video' : 'stripe-store'\"></div>\n        <div class=\"mb-row-info\">\n          <div class=\"mb-row-top\">\n            <div class=\"mb-row-title\">{{title(b)}}</div>\n          </div>\n          <div class=\"mb-row-when\">{{when(b)}}</div>\n          <div class=\"mb-row-detail\">{{detail(b)}}</div>\n        </div>\n        <div class=\"mb-row-end\">\n          <span class=\"mb-status\" [ngClass]=\"statusClass(b.status)\">{{statusLabel(b.status)}}</span>\n        </div>\n      </button>\n    </div>\n\n    <div class=\"mb-empty\" *ngIf=\"isEmpty\">\n      <mat-icon class=\"mb-empty-icon\">event_busy</mat-icon>\n      <div class=\"mb-empty-title\">No {{profTab}} bookings yet.</div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"currentTab === 'DETAIL' && selected\">\n    <button type=\"button\" class=\"mb-back\" (click)=\"backToList()\">\n      <mat-icon>arrow_back</mat-icon> Back to My Bookings\n    </button>\n\n    <div class=\"mb-detail-card\">\n      <div class=\"mb-detail-header\">\n        <div class=\"mb-detail-title-row\">\n          <div class=\"mb-detail-title\">{{title(selected)}}</div>\n          <span class=\"mb-status\" [ngClass]=\"statusClass(selected.status)\">{{statusLabel(selected.status)}}</span>\n        </div>\n        <div class=\"mb-detail-when\">{{when(selected)}}</div>\n      </div>\n\n      <div class=\"mb-detail-rows\">\n        <div class=\"mb-detail-row\" *ngIf=\"selected.services?.length\">\n          <div class=\"mb-detail-k\">Services</div>\n          <div class=\"mb-detail-v\">{{serviceNames(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.productLines?.length\">\n          <div class=\"mb-detail-k\">Products</div>\n          <div class=\"mb-detail-v\">{{productNames(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.customerDetail\">\n          <div class=\"mb-detail-k\">Contact</div>\n          <div class=\"mb-detail-v\">{{selected.customerDetail?.name}} \u00B7 {{selected.customerDetail?.phoneNumber}} \u00B7 {{selected.customerDetail?.email}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.mode === 'HOME_VISIT' && selected.addressDetails\">\n          <div class=\"mb-detail-k\">Address</div>\n          <div class=\"mb-detail-v\">{{selected.addressDetails?.addressLine1}}, {{selected.addressDetails?.city}}, {{selected.addressDetails?.state}} {{selected.addressDetails?.zipCode}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"servicePriceTotal(selected) > 0\">\n          <div class=\"mb-detail-k\">Service price</div>\n          <div class=\"mb-detail-v\">\u20B9{{servicePriceTotal(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.homeVisitCharge\">\n          <div class=\"mb-detail-k\">Home visit charge</div>\n          <div class=\"mb-detail-v\">\u20B9{{selected.homeVisitCharge}}</div>\n        </div>\n        <div class=\"mb-detail-row\">\n          <div class=\"mb-detail-k\">Total</div>\n          <div class=\"mb-detail-v\">\u20B9{{totalDue(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\">\n          <div class=\"mb-detail-k\">Paid</div>\n          <div class=\"mb-detail-v\">{{paidLabel(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"pendingAmount(selected) > 0\">\n          <div class=\"mb-detail-k\">Pending at appointment</div>\n          <div class=\"mb-detail-v\">\u20B9{{pendingAmount(selected)}}</div>\n        </div>\n      </div>\n\n      <div class=\"mb-video-link\" *ngIf=\"selected.mode === 'VIDEO_CALL' && selected.videoCallLink && selected.status !== 'CANCELLED'\">\n        <mat-icon>videocam</mat-icon>\n        <a [href]=\"selected.videoCallLink\" target=\"_blank\">{{selected.videoCallLink}}</a>\n      </div>\n\n      <div class=\"mb-policy\" *ngIf=\"canRescheduleSelected\">\n        <div class=\"mb-policy-title\">Reschedule policy</div>\n        <div class=\"mb-policy-text\">You can reschedule this booking up to {{rescheduleCutoffHours}} hour{{rescheduleCutoffHours === 1 ? '' : 's'}} before the appointment time.</div>\n      </div>\n      <div class=\"mb-policy\" *ngIf=\"canCancelSelected && cancellationPolicy\">\n        <div class=\"mb-policy-title\">{{cancellationPolicy.title}}</div>\n        <div class=\"mb-policy-text\">{{cancellationPolicy.policyDetails}}</div>\n      </div>\n\n      <div class=\"mb-actions-row\" *ngIf=\"selected.status === 'BOOKED' || canCancelSelected\">\n        <button\n          type=\"button\"\n          class=\"mb-reschedule-btn\"\n          *ngIf=\"selected.status === 'BOOKED'\"\n          [disabled]=\"!canRescheduleSelected\"\n          [title]=\"!canRescheduleSelected ? selected.rescheduleBlockedReason : ''\"\n          [style.borderColor]=\"styles?.background?.accentColor\"\n          [style.color]=\"styles?.background?.accentColor\"\n          (click)=\"openReschedulePanel()\"\n        >Reschedule booking</button>\n        <button\n          type=\"button\"\n          class=\"mb-cancel-btn\"\n          *ngIf=\"canCancelSelected\"\n          [disabled]=\"cancelling\"\n          [style.borderColor]=\"styles?.background?.accentColor\"\n          [style.color]=\"styles?.background?.accentColor\"\n          (click)=\"cancelBooking()\"\n        >\n          {{cancelling ? 'Cancelling\u2026' : 'Cancel booking'}}\n        </button>\n      </div>\n\n      <div class=\"mb-cancelled-note\" *ngIf=\"selected.status === 'CANCELLED'\">This booking has been cancelled.</div>\n    </div>\n  </ng-container>\n\n  <div class=\"mb-resch-backdrop\" *ngIf=\"reschedulePanelOpen\" (click)=\"closeReschedulePanel()\">\n    <div class=\"mb-resch-panel\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mb-resch-header\">\n        <div class=\"mb-resch-title\">Choose a new date &amp; time</div>\n        <button type=\"button\" class=\"mb-resch-close\" (click)=\"closeReschedulePanel()\">&times;</button>\n      </div>\n\n      <div class=\"mb-resch-body\">\n        <div class=\"mb-resch-daystrip-row\">\n          <button type=\"button\" class=\"mb-resch-nav\" (click)=\"scrollReschDays(-1)\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 18l-6-6 6-6\"></path></svg>\n          </button>\n          <div class=\"mb-resch-daystrip\" #reschDayStrip>\n            <button\n              type=\"button\"\n              class=\"mb-resch-day\"\n              *ngFor=\"let day of reschDays\"\n              [class.active]=\"day.iso === reschSelectedIso\"\n              [style.background]=\"day.iso === reschSelectedIso ? styles?.background?.accentColor : null\"\n              [style.borderColor]=\"day.iso === reschSelectedIso ? styles?.background?.accentColor : null\"\n              (click)=\"selectReschDay(day)\"\n            >\n              <span class=\"mb-resch-day-dow\" [style.color]=\"day.iso === reschSelectedIso ? contrastColor : null\">{{day.dow}}</span>\n              <span class=\"mb-resch-day-num\" [style.color]=\"day.iso === reschSelectedIso ? contrastColor : null\">{{day.num}}</span>\n            </button>\n          </div>\n          <button type=\"button\" class=\"mb-resch-nav\" (click)=\"scrollReschDays(1)\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 18l6-6-6-6\"></path></svg>\n          </button>\n        </div>\n\n        <div class=\"mb-resch-slots-loading\" *ngIf=\"reschLoadingSlots\">Loading available times\u2026</div>\n        <div class=\"mb-resch-slots-empty\" *ngIf=\"!reschLoadingSlots && reschNoSlots\">No slots available on this date. Try another date.</div>\n        <div class=\"mb-resch-slots\" *ngIf=\"!reschLoadingSlots && reschSlots.length\">\n          <button\n            type=\"button\"\n            class=\"mb-resch-slot\"\n            *ngFor=\"let slot of reschSlots\"\n            [class.active]=\"slot === reschSelectedTime\"\n            [style.background]=\"slot === reschSelectedTime ? styles?.background?.accentColor : null\"\n            [style.borderColor]=\"slot === reschSelectedTime ? styles?.background?.accentColor : null\"\n            [style.color]=\"slot === reschSelectedTime ? contrastColor : null\"\n            (click)=\"selectReschTime(slot)\"\n          >{{slot}}</button>\n        </div>\n\n        <div class=\"mb-resch-error\" *ngIf=\"reschError\">{{reschError}}</div>\n      </div>\n\n      <div class=\"mb-resch-footer\">\n        <button type=\"button\" class=\"mb-resch-cancel\" (click)=\"closeReschedulePanel()\">Cancel</button>\n        <button\n          type=\"button\"\n          class=\"mb-resch-confirm\"\n          [disabled]=\"reschInvalid\"\n          [style.background]=\"reschInvalid ? null : styles?.background?.accentColor\"\n          [style.color]=\"reschInvalid ? null : contrastColor\"\n          (click)=\"confirmReschedule()\"\n        >\n          {{reschConfirming ? 'Confirming\u2026' : 'Confirm new slot'}}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".mb-root{display:flex;flex-direction:column;gap:16px;padding:4px 0 24px}.mb-title{font-size:20px;font-weight:600;color:#1b2436}.mb-tabs{display:flex;background:#f5f2ee;border-radius:8px;padding:4px;gap:4px;width:fit-content}.mb-tab{border:none;background:transparent;border-radius:6px;padding:8px 18px;font-size:13.5px;font-weight:500;color:#8a94a3;cursor:pointer}.mb-tab.active{background:#fff;color:#1b2436;font-weight:600;box-shadow:0 1px 3px #00000012}.mb-loading{font-size:13.5px;color:#8a94a3;padding:20px 0}.mb-rows{display:flex;flex-direction:column;gap:12px}.mb-row{border:1px solid #EEE9E3;border-radius:10px;padding:16px 18px;display:flex;align-items:flex-start;gap:14px;background:#fff;cursor:pointer;text-align:left;width:100%}.mb-row-stripe{width:3px;align-self:stretch;border-radius:999px;flex:none}.stripe-home{background:#16233a}.stripe-video{background:#7c3a11}.stripe-store{background:#8a94a3}.mb-row-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.mb-row-title{font-size:14.5px;font-weight:600;color:#1b2436}.mb-row-when{font-size:12.5px;color:#6b7688}.mb-row-detail{font-size:12px;color:#8a94a3}.mb-row-end{flex:none}.mb-status{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;border-radius:999px;padding:4px 9px;white-space:nowrap}.status-confirmed{background:#e8f4ee;color:#1e7a4b}.status-completed{background:#f2eee9;color:#8a7c6c}.status-cancelled{background:#fbedec;color:#b4432e}.status-pending{background:#fdf3e3;color:#b36b00}.mb-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:50px 20px;text-align:center}.mb-empty-icon{font-size:40px!important;height:40px!important;width:40px!important;color:#c9b7a2!important}.mb-empty-title{font-size:14.5px;color:#8a94a3}.mb-back{display:flex;align-items:center;gap:6px;border:none;background:none;padding:0;cursor:pointer;font-size:12.5px;color:#7c3a11;margin-bottom:6px;width:fit-content}.mb-back mat-icon{font-size:16px!important;height:16px!important;width:16px!important}.mb-detail-card{border:1px solid #EEE9E3;border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:16px;background:#fff}.mb-detail-header{display:flex;flex-direction:column;gap:6px;padding-bottom:14px;border-bottom:1px solid #F0ECE7}.mb-detail-title-row{display:flex;align-items:center;gap:10px}.mb-detail-title{font-size:17px;font-weight:600;color:#1b2436}.mb-detail-when{font-size:13px;color:#6b7688}.mb-detail-rows{display:flex;flex-direction:column;gap:12px}.mb-detail-row{display:flex;justify-content:space-between;gap:16px;font-size:13px}.mb-detail-k{color:#8a94a3;flex:none}.mb-detail-v{color:#1b2436;font-weight:500;text-align:right}.mb-video-link{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#f2f9f5;border-radius:8px;font-size:13px;color:#2c6a4b}.mb-video-link mat-icon{color:#1e7a4b!important;flex:none}.mb-policy{background:#fbfaf8;border:1px solid #EDE8E2;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.mb-policy-title{font-size:12px;font-weight:600;color:#a08b72;text-transform:uppercase;letter-spacing:.06em}.mb-policy-text{font-size:12.5px;line-height:1.6;color:#5f6b7c}.mb-cancel-btn{height:46px;border:1.5px solid;border-radius:8px;background:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-cancel-btn:disabled{opacity:.6;cursor:not-allowed}.mb-cancelled-note{font-size:13px;color:#b4432e;font-weight:600}.mb-actions-row{display:flex;gap:12px}.mb-actions-row .mb-reschedule-btn,.mb-actions-row .mb-cancel-btn{flex:1}.mb-reschedule-btn{height:46px;border:1.5px solid;border-radius:8px;background:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-reschedule-btn:disabled{opacity:.5;cursor:not-allowed}.mb-resch-backdrop{position:fixed;inset:0;background:#1b243673;display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000}.mb-resch-panel{width:100%;max-width:440px;max-height:85vh;border-radius:14px;background:#fff;box-shadow:0 20px 50px #14141e40;display:flex;flex-direction:column;overflow:hidden}.mb-resch-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #F0ECE7;flex:none}.mb-resch-body{padding:18px 20px;overflow-y:auto}.mb-resch-footer{display:flex;gap:10px;padding:14px 20px;border-top:1px solid #F0ECE7;flex:none}.mb-resch-footer .mb-resch-cancel,.mb-resch-footer .mb-resch-confirm{flex:1}.mb-resch-cancel{height:46px;border:1.5px solid #E2E2E9;border-radius:8px;background:#fff;color:#5f6b7c;font-size:13.5px;font-weight:600;cursor:pointer}.mb-resch-title{font-size:14px;font-weight:600;color:#1b2436}.mb-resch-close{border:none;background:none;font-size:18px;color:#8a94a3;cursor:pointer;line-height:1}.mb-resch-daystrip-row{display:flex;align-items:center;gap:4px;margin-bottom:14px}.mb-resch-daystrip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-behavior:smooth}.mb-resch-daystrip::-webkit-scrollbar{height:5px}.mb-resch-daystrip::-webkit-scrollbar-thumb{background:#eee9e3;border-radius:999px}.mb-resch-nav{flex:none;width:26px!important;height:26px;border:1px solid #EEE9E3;border-radius:999px;background:#fff;color:#8a94a3;cursor:pointer;display:flex;align-items:center;justify-content:center}.mb-resch-nav:hover{border-color:#7c3a11;color:#7c3a11}.mb-resch-day{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;width:50px!important;padding:8px 0;border:1px solid #EEE9E3;border-radius:10px;background:#fff;cursor:pointer}.mb-resch-day:hover{border-color:#7c3a11}.mb-resch-day-dow{font-size:10.5px;color:#8a94a3;text-transform:uppercase}.mb-resch-day-num{font-size:13.5px;font-weight:600;color:#1b2436}.mb-resch-slots-loading,.mb-resch-slots-empty{font-size:12.5px;color:#8a94a3;margin-bottom:14px}.mb-resch-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mb-resch-slot{padding:9px 6px;border:1px solid #EEE9E3;border-radius:8px;background:#fff;font-size:12.5px!important;color:#1b2436;cursor:pointer}.mb-resch-error{margin-top:14px;font-size:12.5px;color:#b4432e}.mb-resch-confirm{height:46px;border:none;border-radius:8px;background:#94a3b8;color:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-resch-confirm:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.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: MyBookingsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-my-bookings', standalone: true, imports: [CommonModule, MatIconModule, ToastModule], providers: [MessageService], template: "<p-toast position=\"bottom-right\"></p-toast>\n\n<div class=\"mb-root\">\n  <ng-container *ngIf=\"currentTab === 'LIST'\">\n    <div class=\"mb-title\">My Bookings</div>\n\n    <div class=\"mb-tabs\">\n      <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'upcoming'\" (click)=\"setProfTab('upcoming')\">Upcoming</button>\n      <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'past'\" (click)=\"setProfTab('past')\">Past</button>\n    </div>\n\n    <div class=\"mb-loading\" *ngIf=\"loading\">Loading your bookings\u2026</div>\n\n    <div class=\"mb-rows\" *ngIf=\"!loading && !isEmpty\">\n      <button type=\"button\" class=\"mb-row\" *ngFor=\"let b of rows\" (click)=\"viewBookingDetail(b)\">\n        <div class=\"mb-row-stripe\" [ngClass]=\"b.mode === 'HOME_VISIT' ? 'stripe-home' : b.mode === 'VIDEO_CALL' ? 'stripe-video' : 'stripe-store'\"></div>\n        <div class=\"mb-row-info\">\n          <div class=\"mb-row-top\">\n            <div class=\"mb-row-title\">{{title(b)}}</div>\n          </div>\n          <div class=\"mb-row-when\">{{when(b)}}</div>\n          <div class=\"mb-row-detail\">{{detail(b)}}</div>\n        </div>\n        <div class=\"mb-row-end\">\n          <span class=\"mb-status\" [ngClass]=\"statusClass(b.status)\">{{statusLabel(b.status)}}</span>\n        </div>\n      </button>\n    </div>\n\n    <div class=\"mb-empty\" *ngIf=\"isEmpty\">\n      <mat-icon class=\"mb-empty-icon\">event_busy</mat-icon>\n      <div class=\"mb-empty-title\">No {{profTab}} bookings yet.</div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"currentTab === 'DETAIL' && selected\">\n    <button type=\"button\" class=\"mb-back\" (click)=\"backToList()\">\n      <mat-icon>arrow_back</mat-icon> Back to My Bookings\n    </button>\n\n    <div class=\"mb-detail-card\">\n      <div class=\"mb-detail-header\">\n        <div class=\"mb-detail-title-row\">\n          <div class=\"mb-detail-title\">{{title(selected)}}</div>\n          <span class=\"mb-status\" [ngClass]=\"statusClass(selected.status)\">{{statusLabel(selected.status)}}</span>\n        </div>\n        <div class=\"mb-detail-when\">{{when(selected)}}</div>\n      </div>\n\n      <div class=\"mb-detail-rows\">\n        <div class=\"mb-detail-row\" *ngIf=\"selected.services?.length\">\n          <div class=\"mb-detail-k\">Services</div>\n          <div class=\"mb-detail-v\">{{serviceNames(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.productLines?.length\">\n          <div class=\"mb-detail-k\">Products</div>\n          <div class=\"mb-detail-v\">{{productNames(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.customerDetail\">\n          <div class=\"mb-detail-k\">Contact</div>\n          <div class=\"mb-detail-v\">{{selected.customerDetail?.name}} \u00B7 {{selected.customerDetail?.phoneNumber}} \u00B7 {{selected.customerDetail?.email}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.mode === 'HOME_VISIT' && selected.addressDetails\">\n          <div class=\"mb-detail-k\">Address</div>\n          <div class=\"mb-detail-v\">{{selected.addressDetails?.addressLine1}}, {{selected.addressDetails?.city}}, {{selected.addressDetails?.state}} {{selected.addressDetails?.zipCode}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"servicePriceTotal(selected) > 0\">\n          <div class=\"mb-detail-k\">Service price</div>\n          <div class=\"mb-detail-v\">\u20B9{{servicePriceTotal(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.homeVisitCharge\">\n          <div class=\"mb-detail-k\">Home visit charge</div>\n          <div class=\"mb-detail-v\">\u20B9{{selected.homeVisitCharge}}</div>\n        </div>\n        <div class=\"mb-detail-row\">\n          <div class=\"mb-detail-k\">Total</div>\n          <div class=\"mb-detail-v\">\u20B9{{totalDue(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\">\n          <div class=\"mb-detail-k\">Paid</div>\n          <div class=\"mb-detail-v\">{{paidLabel(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"pendingAmount(selected) > 0\">\n          <div class=\"mb-detail-k\">Pending at appointment</div>\n          <div class=\"mb-detail-v\">\u20B9{{pendingAmount(selected)}}</div>\n        </div>\n      </div>\n\n      <div class=\"mb-video-link\" *ngIf=\"selected.mode === 'VIDEO_CALL' && selected.videoCallLink && selected.status !== 'CANCELLED'\">\n        <mat-icon>videocam</mat-icon>\n        <a [href]=\"selected.videoCallLink\" target=\"_blank\">{{selected.videoCallLink}}</a>\n      </div>\n\n      <ng-container *ngIf=\"selected.status === 'BOOKED' && !reschedulePanelOpen\">\n        <div class=\"mb-policy\" *ngIf=\"canRescheduleSelected\">\n          <div class=\"mb-policy-title\">Reschedule policy</div>\n          <div class=\"mb-policy-text\">You can reschedule this booking up to {{rescheduleCutoffHours}} hour{{rescheduleCutoffHours === 1 ? '' : 's'}} before the appointment time.</div>\n        </div>\n        <button\n          type=\"button\"\n          class=\"mb-reschedule-btn\"\n          [disabled]=\"!canRescheduleSelected\"\n          [title]=\"!canRescheduleSelected ? selected.rescheduleBlockedReason : ''\"\n          (click)=\"openReschedulePanel()\"\n        >Reschedule booking</button>\n      </ng-container>\n\n      <div class=\"mb-resch-panel\" *ngIf=\"reschedulePanelOpen\">\n        <div class=\"mb-resch-header\">\n          <div class=\"mb-resch-title\">Choose a new date &amp; time</div>\n          <button type=\"button\" class=\"mb-resch-close\" (click)=\"closeReschedulePanel()\">&times;</button>\n        </div>\n\n        <div class=\"mb-resch-daystrip\">\n          <button type=\"button\" class=\"mb-resch-nav\" [disabled]=\"reschWeekStart <= 0\" (click)=\"reschPrevWeek()\">\n            <mat-icon>chevron_left</mat-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mb-resch-day\"\n            *ngFor=\"let day of reschDays\"\n            [class.active]=\"day.iso === reschSelectedIso\"\n            (click)=\"selectReschDay(day)\"\n          >\n            <span class=\"mb-resch-day-dow\">{{day.dow}}</span>\n            <span class=\"mb-resch-day-num\">{{day.num}}</span>\n          </button>\n          <button type=\"button\" class=\"mb-resch-nav\" (click)=\"reschNextWeek()\">\n            <mat-icon>chevron_right</mat-icon>\n          </button>\n        </div>\n\n        <div class=\"mb-resch-slots-loading\" *ngIf=\"reschLoadingSlots\">Loading available times\u2026</div>\n        <div class=\"mb-resch-slots-empty\" *ngIf=\"!reschLoadingSlots && reschNoSlots\">No slots available on this date. Try another date.</div>\n        <div class=\"mb-resch-slots\" *ngIf=\"!reschLoadingSlots && reschSlots.length\">\n          <button\n            type=\"button\"\n            class=\"mb-resch-slot\"\n            *ngFor=\"let slot of reschSlots\"\n            [class.active]=\"slot === reschSelectedTime\"\n            (click)=\"selectReschTime(slot)\"\n          >{{slot}}</button>\n        </div>\n\n        <div class=\"mb-resch-error\" *ngIf=\"reschError\">{{reschError}}</div>\n\n        <button type=\"button\" class=\"mb-resch-confirm\" [disabled]=\"reschInvalid\" (click)=\"confirmReschedule()\">\n          {{reschConfirming ? 'Confirming\u2026' : 'Confirm new slot'}}\n        </button>\n      </div>\n\n      <ng-container *ngIf=\"canCancelSelected && !reschedulePanelOpen\">\n        <div class=\"mb-policy\" *ngIf=\"cancellationPolicy\">\n          <div class=\"mb-policy-title\">{{cancellationPolicy.title}}</div>\n          <div class=\"mb-policy-text\">{{cancellationPolicy.policyDetails}}</div>\n        </div>\n        <button type=\"button\" class=\"mb-cancel-btn\" [disabled]=\"cancelling\" (click)=\"cancelBooking()\">\n          {{cancelling ? 'Cancelling\u2026' : 'Cancel booking'}}\n        </button>\n      </ng-container>\n\n      <div class=\"mb-cancelled-note\" *ngIf=\"selected.status === 'CANCELLED'\">This booking has been cancelled.</div>\n    </div>\n  </ng-container>\n</div>\n", styles: [".mb-root{display:flex;flex-direction:column;gap:16px;padding:4px 0 24px}.mb-title{font-size:20px;font-weight:600;color:#1b2436}.mb-tabs{display:flex;background:#f5f2ee;border-radius:8px;padding:4px;gap:4px;width:fit-content}.mb-tab{border:none;background:transparent;border-radius:6px;padding:8px 18px;font-size:13.5px;font-weight:500;color:#8a94a3;cursor:pointer}.mb-tab.active{background:#fff;color:#1b2436;font-weight:600;box-shadow:0 1px 3px #00000012}.mb-loading{font-size:13.5px;color:#8a94a3;padding:20px 0}.mb-rows{display:flex;flex-direction:column;gap:12px}.mb-row{border:1px solid #EEE9E3;border-radius:10px;padding:16px 18px;display:flex;align-items:flex-start;gap:14px;background:#fff;cursor:pointer;text-align:left;width:100%}.mb-row-stripe{width:3px;align-self:stretch;border-radius:999px;flex:none}.stripe-home{background:#16233a}.stripe-video{background:#7c3a11}.stripe-store{background:#8a94a3}.mb-row-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.mb-row-title{font-size:14.5px;font-weight:600;color:#1b2436}.mb-row-when{font-size:12.5px;color:#6b7688}.mb-row-detail{font-size:12px;color:#8a94a3}.mb-row-end{flex:none}.mb-status{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;border-radius:999px;padding:4px 9px;white-space:nowrap}.status-confirmed{background:#e8f4ee;color:#1e7a4b}.status-completed{background:#f2eee9;color:#8a7c6c}.status-cancelled{background:#fbedec;color:#b4432e}.status-pending{background:#fdf3e3;color:#b36b00}.mb-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:50px 20px;text-align:center}.mb-empty-icon{font-size:40px!important;height:40px!important;width:40px!important;color:#c9b7a2!important}.mb-empty-title{font-size:14.5px;color:#8a94a3}.mb-back{display:flex;align-items:center;gap:6px;border:none;background:none;padding:0;cursor:pointer;font-size:12.5px;color:#7c3a11;margin-bottom:6px;width:fit-content}.mb-back mat-icon{font-size:16px!important;height:16px!important;width:16px!important}.mb-detail-card{border:1px solid #EEE9E3;border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:16px;background:#fff}.mb-detail-header{display:flex;flex-direction:column;gap:6px;padding-bottom:14px;border-bottom:1px solid #F0ECE7}.mb-detail-title-row{display:flex;align-items:center;gap:10px}.mb-detail-title{font-size:17px;font-weight:600;color:#1b2436}.mb-detail-when{font-size:13px;color:#6b7688}.mb-detail-rows{display:flex;flex-direction:column;gap:12px}.mb-detail-row{display:flex;justify-content:space-between;gap:16px;font-size:13px}.mb-detail-k{color:#8a94a3;flex:none}.mb-detail-v{color:#1b2436;font-weight:500;text-align:right}.mb-video-link{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#f2f9f5;border-radius:8px;font-size:13px;color:#2c6a4b}.mb-video-link mat-icon{color:#1e7a4b!important;flex:none}.mb-policy{background:#fbfaf8;border:1px solid #EDE8E2;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.mb-policy-title{font-size:12px;font-weight:600;color:#a08b72;text-transform:uppercase;letter-spacing:.06em}.mb-policy-text{font-size:12.5px;line-height:1.6;color:#5f6b7c}.mb-cancel-btn{height:46px;border:1.5px solid #E3CFC9;border-radius:8px;background:#fff;color:#b4432e;font-size:13.5px;font-weight:600;cursor:pointer}.mb-cancel-btn:disabled{opacity:.6;cursor:not-allowed}.mb-cancelled-note{font-size:13px;color:#b4432e;font-weight:600}.mb-reschedule-btn{height:46px;border:1.5px solid #16233A;border-radius:8px;background:#fff;color:#16233a;font-size:13.5px;font-weight:600;cursor:pointer}.mb-reschedule-btn:disabled{opacity:.5;cursor:not-allowed}.mb-resch-panel{border:1px solid #EEE9E3;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:14px;background:#fbfaf8}.mb-resch-header{display:flex;align-items:center;justify-content:space-between}.mb-resch-title{font-size:14px;font-weight:600;color:#1b2436}.mb-resch-close{border:none;background:none;font-size:18px;color:#8a94a3;cursor:pointer;line-height:1}.mb-resch-daystrip{display:flex;align-items:center;gap:6px;overflow-x:auto}.mb-resch-nav{flex:none;border:none;background:none;color:#8a94a3;cursor:pointer;display:flex;align-items:center;justify-content:center}.mb-resch-nav:disabled{opacity:.35;cursor:not-allowed}.mb-resch-day{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;width:50px;padding:8px 0;border:1px solid #EEE9E3;border-radius:10px;background:#fff;cursor:pointer}.mb-resch-day.active{border-color:#7c3a11;background:#fbf1ea}.mb-resch-day-dow{font-size:10.5px;color:#8a94a3;text-transform:uppercase}.mb-resch-day-num{font-size:13.5px;font-weight:600;color:#1b2436}.mb-resch-slots-loading,.mb-resch-slots-empty{font-size:12.5px;color:#8a94a3}.mb-resch-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mb-resch-slot{padding:9px 6px;border:1px solid #EEE9E3;border-radius:8px;background:#fff;font-size:12.5px;color:#1b2436;cursor:pointer}.mb-resch-slot.active{border-color:#7c3a11;background:#7c3a11;color:#fff}.mb-resch-error{font-size:12.5px;color:#b4432e}.mb-resch-confirm{height:46px;border:none;border-radius:8px;background:#16233a;color:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-resch-confirm:disabled{opacity:.5;cursor:not-allowed}\n"] }]
-        }], ctorParameters: () => [{ type: RestService }, { type: StorageServiceService }, { type: i6$1.MessageService }] });
+            args: [{ selector: 'simpo-my-bookings', standalone: true, imports: [CommonModule, MatIconModule, ToastModule], providers: [MessageService], template: "<p-toast position=\"bottom-right\"></p-toast>\n\n<div class=\"mb-root\">\n  <ng-container *ngIf=\"currentTab === 'LIST'\">\n    <div class=\"mb-title\">My Bookings</div>\n\n    <div class=\"mb-tabs\">\n      <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'upcoming'\" (click)=\"setProfTab('upcoming')\">Upcoming</button>\n      <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'past'\" (click)=\"setProfTab('past')\">Past</button>\n    </div>\n\n    <div class=\"mb-loading\" *ngIf=\"loading\">Loading your bookings\u2026</div>\n\n    <div class=\"mb-rows\" *ngIf=\"!loading && !isEmpty\">\n      <button type=\"button\" class=\"mb-row\" *ngFor=\"let b of rows\" (click)=\"viewBookingDetail(b)\">\n        <div class=\"mb-row-stripe\" [ngClass]=\"b.mode === 'HOME_VISIT' ? 'stripe-home' : b.mode === 'VIDEO_CALL' ? 'stripe-video' : 'stripe-store'\"></div>\n        <div class=\"mb-row-info\">\n          <div class=\"mb-row-top\">\n            <div class=\"mb-row-title\">{{title(b)}}</div>\n          </div>\n          <div class=\"mb-row-when\">{{when(b)}}</div>\n          <div class=\"mb-row-detail\">{{detail(b)}}</div>\n        </div>\n        <div class=\"mb-row-end\">\n          <span class=\"mb-status\" [ngClass]=\"statusClass(b.status)\">{{statusLabel(b.status)}}</span>\n        </div>\n      </button>\n    </div>\n\n    <div class=\"mb-empty\" *ngIf=\"isEmpty\">\n      <mat-icon class=\"mb-empty-icon\">event_busy</mat-icon>\n      <div class=\"mb-empty-title\">No {{profTab}} bookings yet.</div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"currentTab === 'DETAIL' && selected\">\n    <button type=\"button\" class=\"mb-back\" (click)=\"backToList()\">\n      <mat-icon>arrow_back</mat-icon> Back to My Bookings\n    </button>\n\n    <div class=\"mb-detail-card\">\n      <div class=\"mb-detail-header\">\n        <div class=\"mb-detail-title-row\">\n          <div class=\"mb-detail-title\">{{title(selected)}}</div>\n          <span class=\"mb-status\" [ngClass]=\"statusClass(selected.status)\">{{statusLabel(selected.status)}}</span>\n        </div>\n        <div class=\"mb-detail-when\">{{when(selected)}}</div>\n      </div>\n\n      <div class=\"mb-detail-rows\">\n        <div class=\"mb-detail-row\" *ngIf=\"selected.services?.length\">\n          <div class=\"mb-detail-k\">Services</div>\n          <div class=\"mb-detail-v\">{{serviceNames(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.productLines?.length\">\n          <div class=\"mb-detail-k\">Products</div>\n          <div class=\"mb-detail-v\">{{productNames(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.customerDetail\">\n          <div class=\"mb-detail-k\">Contact</div>\n          <div class=\"mb-detail-v\">{{selected.customerDetail?.name}} \u00B7 {{selected.customerDetail?.phoneNumber}} \u00B7 {{selected.customerDetail?.email}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.mode === 'HOME_VISIT' && selected.addressDetails\">\n          <div class=\"mb-detail-k\">Address</div>\n          <div class=\"mb-detail-v\">{{selected.addressDetails?.addressLine1}}, {{selected.addressDetails?.city}}, {{selected.addressDetails?.state}} {{selected.addressDetails?.zipCode}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"servicePriceTotal(selected) > 0\">\n          <div class=\"mb-detail-k\">Service price</div>\n          <div class=\"mb-detail-v\">\u20B9{{servicePriceTotal(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.homeVisitCharge\">\n          <div class=\"mb-detail-k\">Home visit charge</div>\n          <div class=\"mb-detail-v\">\u20B9{{selected.homeVisitCharge}}</div>\n        </div>\n        <div class=\"mb-detail-row\">\n          <div class=\"mb-detail-k\">Total</div>\n          <div class=\"mb-detail-v\">\u20B9{{totalDue(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\">\n          <div class=\"mb-detail-k\">Paid</div>\n          <div class=\"mb-detail-v\">{{paidLabel(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"pendingAmount(selected) > 0\">\n          <div class=\"mb-detail-k\">Pending at appointment</div>\n          <div class=\"mb-detail-v\">\u20B9{{pendingAmount(selected)}}</div>\n        </div>\n      </div>\n\n      <div class=\"mb-video-link\" *ngIf=\"selected.mode === 'VIDEO_CALL' && selected.videoCallLink && selected.status !== 'CANCELLED'\">\n        <mat-icon>videocam</mat-icon>\n        <a [href]=\"selected.videoCallLink\" target=\"_blank\">{{selected.videoCallLink}}</a>\n      </div>\n\n      <div class=\"mb-policy\" *ngIf=\"canRescheduleSelected\">\n        <div class=\"mb-policy-title\">Reschedule policy</div>\n        <div class=\"mb-policy-text\">You can reschedule this booking up to {{rescheduleCutoffHours}} hour{{rescheduleCutoffHours === 1 ? '' : 's'}} before the appointment time.</div>\n      </div>\n      <div class=\"mb-policy\" *ngIf=\"canCancelSelected && cancellationPolicy\">\n        <div class=\"mb-policy-title\">{{cancellationPolicy.title}}</div>\n        <div class=\"mb-policy-text\">{{cancellationPolicy.policyDetails}}</div>\n      </div>\n\n      <div class=\"mb-actions-row\" *ngIf=\"selected.status === 'BOOKED' || canCancelSelected\">\n        <button\n          type=\"button\"\n          class=\"mb-reschedule-btn\"\n          *ngIf=\"selected.status === 'BOOKED'\"\n          [disabled]=\"!canRescheduleSelected\"\n          [title]=\"!canRescheduleSelected ? selected.rescheduleBlockedReason : ''\"\n          [style.borderColor]=\"styles?.background?.accentColor\"\n          [style.color]=\"styles?.background?.accentColor\"\n          (click)=\"openReschedulePanel()\"\n        >Reschedule booking</button>\n        <button\n          type=\"button\"\n          class=\"mb-cancel-btn\"\n          *ngIf=\"canCancelSelected\"\n          [disabled]=\"cancelling\"\n          [style.borderColor]=\"styles?.background?.accentColor\"\n          [style.color]=\"styles?.background?.accentColor\"\n          (click)=\"cancelBooking()\"\n        >\n          {{cancelling ? 'Cancelling\u2026' : 'Cancel booking'}}\n        </button>\n      </div>\n\n      <div class=\"mb-cancelled-note\" *ngIf=\"selected.status === 'CANCELLED'\">This booking has been cancelled.</div>\n    </div>\n  </ng-container>\n\n  <div class=\"mb-resch-backdrop\" *ngIf=\"reschedulePanelOpen\" (click)=\"closeReschedulePanel()\">\n    <div class=\"mb-resch-panel\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mb-resch-header\">\n        <div class=\"mb-resch-title\">Choose a new date &amp; time</div>\n        <button type=\"button\" class=\"mb-resch-close\" (click)=\"closeReschedulePanel()\">&times;</button>\n      </div>\n\n      <div class=\"mb-resch-body\">\n        <div class=\"mb-resch-daystrip-row\">\n          <button type=\"button\" class=\"mb-resch-nav\" (click)=\"scrollReschDays(-1)\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 18l-6-6 6-6\"></path></svg>\n          </button>\n          <div class=\"mb-resch-daystrip\" #reschDayStrip>\n            <button\n              type=\"button\"\n              class=\"mb-resch-day\"\n              *ngFor=\"let day of reschDays\"\n              [class.active]=\"day.iso === reschSelectedIso\"\n              [style.background]=\"day.iso === reschSelectedIso ? styles?.background?.accentColor : null\"\n              [style.borderColor]=\"day.iso === reschSelectedIso ? styles?.background?.accentColor : null\"\n              (click)=\"selectReschDay(day)\"\n            >\n              <span class=\"mb-resch-day-dow\" [style.color]=\"day.iso === reschSelectedIso ? contrastColor : null\">{{day.dow}}</span>\n              <span class=\"mb-resch-day-num\" [style.color]=\"day.iso === reschSelectedIso ? contrastColor : null\">{{day.num}}</span>\n            </button>\n          </div>\n          <button type=\"button\" class=\"mb-resch-nav\" (click)=\"scrollReschDays(1)\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 18l6-6-6-6\"></path></svg>\n          </button>\n        </div>\n\n        <div class=\"mb-resch-slots-loading\" *ngIf=\"reschLoadingSlots\">Loading available times\u2026</div>\n        <div class=\"mb-resch-slots-empty\" *ngIf=\"!reschLoadingSlots && reschNoSlots\">No slots available on this date. Try another date.</div>\n        <div class=\"mb-resch-slots\" *ngIf=\"!reschLoadingSlots && reschSlots.length\">\n          <button\n            type=\"button\"\n            class=\"mb-resch-slot\"\n            *ngFor=\"let slot of reschSlots\"\n            [class.active]=\"slot === reschSelectedTime\"\n            [style.background]=\"slot === reschSelectedTime ? styles?.background?.accentColor : null\"\n            [style.borderColor]=\"slot === reschSelectedTime ? styles?.background?.accentColor : null\"\n            [style.color]=\"slot === reschSelectedTime ? contrastColor : null\"\n            (click)=\"selectReschTime(slot)\"\n          >{{slot}}</button>\n        </div>\n\n        <div class=\"mb-resch-error\" *ngIf=\"reschError\">{{reschError}}</div>\n      </div>\n\n      <div class=\"mb-resch-footer\">\n        <button type=\"button\" class=\"mb-resch-cancel\" (click)=\"closeReschedulePanel()\">Cancel</button>\n        <button\n          type=\"button\"\n          class=\"mb-resch-confirm\"\n          [disabled]=\"reschInvalid\"\n          [style.background]=\"reschInvalid ? null : styles?.background?.accentColor\"\n          [style.color]=\"reschInvalid ? null : contrastColor\"\n          (click)=\"confirmReschedule()\"\n        >\n          {{reschConfirming ? 'Confirming\u2026' : 'Confirm new slot'}}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".mb-root{display:flex;flex-direction:column;gap:16px;padding:4px 0 24px}.mb-title{font-size:20px;font-weight:600;color:#1b2436}.mb-tabs{display:flex;background:#f5f2ee;border-radius:8px;padding:4px;gap:4px;width:fit-content}.mb-tab{border:none;background:transparent;border-radius:6px;padding:8px 18px;font-size:13.5px;font-weight:500;color:#8a94a3;cursor:pointer}.mb-tab.active{background:#fff;color:#1b2436;font-weight:600;box-shadow:0 1px 3px #00000012}.mb-loading{font-size:13.5px;color:#8a94a3;padding:20px 0}.mb-rows{display:flex;flex-direction:column;gap:12px}.mb-row{border:1px solid #EEE9E3;border-radius:10px;padding:16px 18px;display:flex;align-items:flex-start;gap:14px;background:#fff;cursor:pointer;text-align:left;width:100%}.mb-row-stripe{width:3px;align-self:stretch;border-radius:999px;flex:none}.stripe-home{background:#16233a}.stripe-video{background:#7c3a11}.stripe-store{background:#8a94a3}.mb-row-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.mb-row-title{font-size:14.5px;font-weight:600;color:#1b2436}.mb-row-when{font-size:12.5px;color:#6b7688}.mb-row-detail{font-size:12px;color:#8a94a3}.mb-row-end{flex:none}.mb-status{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;border-radius:999px;padding:4px 9px;white-space:nowrap}.status-confirmed{background:#e8f4ee;color:#1e7a4b}.status-completed{background:#f2eee9;color:#8a7c6c}.status-cancelled{background:#fbedec;color:#b4432e}.status-pending{background:#fdf3e3;color:#b36b00}.mb-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:50px 20px;text-align:center}.mb-empty-icon{font-size:40px!important;height:40px!important;width:40px!important;color:#c9b7a2!important}.mb-empty-title{font-size:14.5px;color:#8a94a3}.mb-back{display:flex;align-items:center;gap:6px;border:none;background:none;padding:0;cursor:pointer;font-size:12.5px;color:#7c3a11;margin-bottom:6px;width:fit-content}.mb-back mat-icon{font-size:16px!important;height:16px!important;width:16px!important}.mb-detail-card{border:1px solid #EEE9E3;border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:16px;background:#fff}.mb-detail-header{display:flex;flex-direction:column;gap:6px;padding-bottom:14px;border-bottom:1px solid #F0ECE7}.mb-detail-title-row{display:flex;align-items:center;gap:10px}.mb-detail-title{font-size:17px;font-weight:600;color:#1b2436}.mb-detail-when{font-size:13px;color:#6b7688}.mb-detail-rows{display:flex;flex-direction:column;gap:12px}.mb-detail-row{display:flex;justify-content:space-between;gap:16px;font-size:13px}.mb-detail-k{color:#8a94a3;flex:none}.mb-detail-v{color:#1b2436;font-weight:500;text-align:right}.mb-video-link{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#f2f9f5;border-radius:8px;font-size:13px;color:#2c6a4b}.mb-video-link mat-icon{color:#1e7a4b!important;flex:none}.mb-policy{background:#fbfaf8;border:1px solid #EDE8E2;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.mb-policy-title{font-size:12px;font-weight:600;color:#a08b72;text-transform:uppercase;letter-spacing:.06em}.mb-policy-text{font-size:12.5px;line-height:1.6;color:#5f6b7c}.mb-cancel-btn{height:46px;border:1.5px solid;border-radius:8px;background:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-cancel-btn:disabled{opacity:.6;cursor:not-allowed}.mb-cancelled-note{font-size:13px;color:#b4432e;font-weight:600}.mb-actions-row{display:flex;gap:12px}.mb-actions-row .mb-reschedule-btn,.mb-actions-row .mb-cancel-btn{flex:1}.mb-reschedule-btn{height:46px;border:1.5px solid;border-radius:8px;background:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-reschedule-btn:disabled{opacity:.5;cursor:not-allowed}.mb-resch-backdrop{position:fixed;inset:0;background:#1b243673;display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000}.mb-resch-panel{width:100%;max-width:440px;max-height:85vh;border-radius:14px;background:#fff;box-shadow:0 20px 50px #14141e40;display:flex;flex-direction:column;overflow:hidden}.mb-resch-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #F0ECE7;flex:none}.mb-resch-body{padding:18px 20px;overflow-y:auto}.mb-resch-footer{display:flex;gap:10px;padding:14px 20px;border-top:1px solid #F0ECE7;flex:none}.mb-resch-footer .mb-resch-cancel,.mb-resch-footer .mb-resch-confirm{flex:1}.mb-resch-cancel{height:46px;border:1.5px solid #E2E2E9;border-radius:8px;background:#fff;color:#5f6b7c;font-size:13.5px;font-weight:600;cursor:pointer}.mb-resch-title{font-size:14px;font-weight:600;color:#1b2436}.mb-resch-close{border:none;background:none;font-size:18px;color:#8a94a3;cursor:pointer;line-height:1}.mb-resch-daystrip-row{display:flex;align-items:center;gap:4px;margin-bottom:14px}.mb-resch-daystrip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-behavior:smooth}.mb-resch-daystrip::-webkit-scrollbar{height:5px}.mb-resch-daystrip::-webkit-scrollbar-thumb{background:#eee9e3;border-radius:999px}.mb-resch-nav{flex:none;width:26px!important;height:26px;border:1px solid #EEE9E3;border-radius:999px;background:#fff;color:#8a94a3;cursor:pointer;display:flex;align-items:center;justify-content:center}.mb-resch-nav:hover{border-color:#7c3a11;color:#7c3a11}.mb-resch-day{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;width:50px!important;padding:8px 0;border:1px solid #EEE9E3;border-radius:10px;background:#fff;cursor:pointer}.mb-resch-day:hover{border-color:#7c3a11}.mb-resch-day-dow{font-size:10.5px;color:#8a94a3;text-transform:uppercase}.mb-resch-day-num{font-size:13.5px;font-weight:600;color:#1b2436}.mb-resch-slots-loading,.mb-resch-slots-empty{font-size:12.5px;color:#8a94a3;margin-bottom:14px}.mb-resch-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mb-resch-slot{padding:9px 6px;border:1px solid #EEE9E3;border-radius:8px;background:#fff;font-size:12.5px!important;color:#1b2436;cursor:pointer}.mb-resch-error{margin-top:14px;font-size:12.5px;color:#b4432e}.mb-resch-confirm{height:46px;border:none;border-radius:8px;background:#94a3b8;color:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-resch-confirm:disabled{opacity:.5;cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [{ type: RestService }, { type: StorageServiceService }, { type: i6$1.MessageService }], propDecorators: { data: [{
+                type: Input
+            }], reschDayStripRef: [{
+                type: ViewChild,
+                args: ['reschDayStrip']
+            }] } });
 
 class PassbookTransactionsComponent {
     constructor(storageService, restService) {
@@ -23302,7 +23326,7 @@ class UserProfileComponent extends BaseSection {
         this.getAllSchemes();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$2.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: CartService }, { token: i3$2.MatDialog }, { token: i8$1.MatBottomSheet }, { token: i2$1.CookieService }, { token: i6$1.MessageService }, { token: i1.DomSanitizer }, { token: i2$2.ActivatedRoute }, { token: LOCAL_STORAGE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }, { propertyName: "logoutDialogTemplate", first: true, predicate: ["logoutDialog"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n    [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n    [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-4 profile-box\" style=\"width: 25%; border-radius: 20px; height: fit-content\"\r\n            [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n            <!-- Profile Header Section -->\r\n            <div class=\"d-flex align-items-center profile-header\"\r\n                style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n                <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n                        style=\"border: 3px solid #e3f2fd; transition: all 0.3s ease;\">\r\n                    <div class=\"online-indicator\"\r\n                        style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"profile-details flex-grow-1\">\r\n                    <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n                        {{getUserDetails?.contact?.name}}</h4>\r\n\r\n                    <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                        </h6>\r\n\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n                            <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n                        </h6>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Navigation Tabs Section -->\r\n            <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center tab-item\"\r\n                        style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n                        [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n                        [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n                        [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n                        [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n                        <div class=\"tab-icon-wrapper\"\r\n                            style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n                            <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n                        </div>\r\n\r\n                        <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n                            {{tab.value}}</div>\r\n\r\n                        <!-- Hover effect background -->\r\n                        <div class=\"tab-hover-bg\"\r\n                            style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <!-- Action Buttons Section -->\r\n            <div class=\"d-flex action-buttons\"\r\n                style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n                <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                    [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n                    Edit Profile\r\n                </button>\r\n\r\n                <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                    [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease;\">\r\n                    Logout\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"orders-sec\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Transactions'\">\r\n                    <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Bookings'\">\r\n                    <simpo-my-bookings></simpo-my-bookings>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n                    <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n                    <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n                *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n                    (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n                            style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n                                <mat-icon>stay_primary_portrait</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                            </h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n                                *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.email}}</span>\r\n                            </h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n                                [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n                                [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                    [style.color]=\"styles?.background?.accentColor\">\r\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n                                    {{tab.value}}</div>\r\n                            </div>\r\n\r\n                        </ng-container>\r\n                    </section>\r\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                            [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\">Logout</button>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Transactions'\">\r\n                    <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Bookings'\">\r\n                    <simpo-my-bookings></simpo-my-bookings>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n                    <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n                    <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n            [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n</section>\r\n\r\n<ng-template #Referrals>\r\n    <iframe [src]=\"getMyReferralsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #Rewards>\r\n    <iframe [src]=\"getRewardsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #OrderSection>\r\n    <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n    <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n                {{tab.value}}</div>\r\n        </ng-container>\r\n    </div> -->\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                            [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n                    </div>\r\n                    <div class=\"cart-text \">\r\n                        <ng-container *ngFor=\"let text of content?.inputText\">\r\n                            <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n                                [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n                                <simpo-text-editor [(value)]=\"text.value\"\r\n                                    [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n        (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2\">\r\n        <h3 class=\"title-text\">My Address</h3>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n            [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n                <div class=\"card  border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n                    <div class=\"card-body p-3\">\r\n                        <!-- Header Section -->\r\n                        <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n                            <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n                                <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n                                <div class=\"icon-grp d-flex\">\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"address-content mb-3\">\r\n                            <div class=\"address-line mb-2\">\r\n                                <span class=\"text-muted small d-block\">Address</span>\r\n                                <span class=\"address-text\">{{address.addressLine1}}</span>\r\n                            </div>\r\n                            <div class=\"phone-info\">\r\n                                <span class=\"text-muted small d-block\">Phone</span>\r\n                                <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #showEmptyAddress>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n                    </div>\r\n                    <div class=\"cart-text\">\r\n                        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n                        </div>\r\n                        <!-- </ng-container> -->\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #logoutDialog>\r\n    <div class=\"logout-dialog-card\">\r\n        <!-- Decorative blobs -->\r\n        <div class=\"logout-blob logout-blob-1\"></div>\r\n        <div class=\"logout-blob logout-blob-2\"></div>\r\n\r\n        <!-- Close Button -->\r\n        <button class=\"logout-close-btn\" (click)=\"closeDialog()\" aria-label=\"Close\">\r\n            <mat-icon>close</mat-icon>\r\n        </button>\r\n\r\n        <!-- Wave icon -->\r\n        <div class=\"logout-icon-ring\">\r\n            <span class=\"logout-wave\">\uD83D\uDC4B</span>\r\n        </div>\r\n\r\n        <!-- Copy -->\r\n        <h2 class=\"logout-title\">See you soon, {{getUserDetails?.contact?.name?.split(' ')?.[0] || 'Friend'}}!</h2>\r\n        <p class=\"logout-subtitle\">\r\n            We'll keep everything safe while you're away.<br>\r\n            Come back anytime \u2014 we'll be right here. \uD83D\uDE0A\r\n        </p>\r\n\r\n        <!-- Actions -->\r\n        <div class=\"logout-actions\">\r\n            <button class=\"logout-action-btn btn-stay\" (click)=\"closeDialog()\">\r\n                <mat-icon class=\"logout-btn-icon\">arrow_back</mat-icon>\r\n                Stay\r\n            </button>\r\n            <button class=\"logout-action-btn btn-confirm\"\r\n                [style.background]=\"styles?.background?.accentColor\"\r\n                (click)=\"closeDialog(); _doLogout()\">\r\n                <mat-icon class=\"logout-btn-icon\">logout</mat-icon>\r\n                Yes, Logout\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <ng-container *ngTemplateOutlet=\"logoutDialog\"></ng-container>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"card  border-0 mb-2 cursor-pointer order-card\">\r\n        <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n            <!-- Header Section -->\r\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n                <div class=\"order-number\">\r\n                    <h4 class=\"mb-0  fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n                </div>\r\n                <div class=\"arrow-icon\">\r\n                    <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n                </div>\r\n            </div>\r\n            <div class=\"ordered-item row mb-2\">\r\n                <ng-container *ngFor=\"let item of  getOrderedItems(order)\">\r\n                    <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n                            onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            class=\"item-img w-50\">\r\n                        <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <!-- Middle Section -->\r\n            <div class=\"order-details\">\r\n                <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n                    <span class=\"text-muted small mb-3 mb-sm-0\">\r\n                        {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"amount-section\">\r\n                    <span class=\"h5 mb-0 text-success fw-bold\">\r\n                        <span [innerHTML]=\"currency\"></span>\r\n                        <!-- {{(order.billDetails.discountAmount ?\r\n                        (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n                        order?.billDetails?.totalTaxAfterDiscount) :\r\n                        order.billDetails.totalGrossValue) | number:'1.0-2'}}  -->\r\n                        {{getTotalAmtPaid(order) | number:'1.0-2'}}\r\n                    </span>\r\n                </div>\r\n                <div class=\"status-section\">\r\n                    <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n                        {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'REWARD_POINTS'\">\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Amount Paid -\r\n                    <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.pointsConvertedINR ? '0' :\r\n                        (getTotalAmtPaid(order) - order.pointsConvertedINR) }}</span>\r\n                </div>\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.pointsConvertedINR}}</span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'VOUCHER'\">\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Amount Paid -\r\n                    <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.voucherValue ? '0' :\r\n                        (getTotalAmtPaid(order) - order.voucherValue) }}</span>\r\n                </div>\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.voucherValue}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n    <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n    <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n        <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n                <div class=\"address-card mb-2\">\r\n                    <div class=\"card-body p-4\">\r\n                        <div class=\"row align-items-center\">\r\n                            <div class=\"col-auto\">\r\n                                <div class=\"product-image-wrapper\">\r\n                                    <img loading=\"lazy\"\r\n                                        onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                                        class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col\">\r\n                                <div class=\"product-details\">\r\n                                    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n                                        <div\r\n                                            class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n                                            <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n                                                {{item.itemName}}\r\n                                            </h6>\r\n                                            <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n                                                <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n                                                    title=\"Remove from wishlist\">\r\n                                                    <mat-icon class=\"small-icon\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                            <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n                                                <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n                                                    <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"product-price mb-3\">\r\n                                        <span class=\"h5 text-success fw-bold mb-0\">\r\n                                            <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n                                        </span>\r\n                                        <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n                                            ({{item.quantity}} items)\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"action-buttons d-flex  gap-2\">\r\n                                        <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n                                            *ngIf=\"item.quantity\">\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n                                                -\r\n                                            </button>\r\n                                            <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n                                                {{item.quantity}}\r\n                                            </span>\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'ADD')\"> +\r\n                                            </button>\r\n                                        </div>\r\n                                        <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n                                            (click)=\"addToFav(item, 'ADD')\">\r\n                                            + Add Quantity\r\n                                        </button>\r\n                                        <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n                                            Move to Cart\r\n                                        </button>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n    <ng-template #showEmptyWishlistScreen>\r\n        <section class=\"empty-cart m-auto\">\r\n            <div>\r\n                <div class=\"cart-image\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                    <ng-container>\r\n                        <div class=\"heading-medium d-flex justify-content-center\">\r\n                            Your Wishlist is Empty</div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </section>\r\n    </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n    <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n    <div class=\"row gap-2\">\r\n        <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n            <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n                <div class=\"card-header row gap-2\">\r\n                    <div class=\"card-head-left col-7\">\r\n                        <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n                        <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n                    </div>\r\n                    <div class=\"card-head-right col-4 text-center align-content-center\">\r\n                        <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body d-flex p-0 mb-3\">\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n                            class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n                        <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n                        <div class=\"card-sub-text text-center\">Rewards</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">8</div>\r\n                        <div class=\"card-sub-text text-center\">Due Months</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-footer row\">\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n                            may 2025</span>\r\n                    </div>\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n                            may 2026</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n    <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n        <div class=\"header d-flex flex-column\">\r\n            <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n                    class=\"store-listing\" (change)=\"changeStore($event)\">\r\n                    <option value=\"\">Select Store</option>\r\n                    <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n                </select></div>\r\n            <div class=\"scheme-overview d-flex flex-column\">\r\n                <div class=\"d-flex gap-2\">\r\n                    <div class=\"available-savings\">\r\n                        <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n                            <h3>Available Savings</h3>\r\n                            <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n                        </div>\r\n\r\n                        <div class=\"amount\">{{totalSavings ? totalSavings :\r\n                            '0'}}</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Active Passbooks</h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n                            totalSchemes.length : '0'}}</div>\r\n                        <div class=\"subtitle\">On Track</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Accumulated Gold </h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n                    </div>\r\n                </div>\r\n                <ng-container *ngIf=\"overAllDues?.length\">\r\n                    <div class=\"section d-flex-flex-column gap-2\">\r\n                        <div class=\"section-header\">\r\n                            <h2 class=\"section-title\">Due Payments</h2>\r\n                        </div>\r\n                        <div class=\"payment-list d-flex flex-column gap-2\">\r\n                            <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n                                <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n                                    <div class=\"payment-info\">\r\n                                        <div class=\"payment-icon\"><img\r\n                                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n                                            <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n                                            *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n                                        </div>\r\n                                        <div class=\"payment-details\">\r\n                                            <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n                                            <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n                                                'N/A'}}\r\n                                                <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n                                                ? payment.daysOverdue : 0}}</span> --></span>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"payment-amount\">\r\n                                        <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n                                            '0'}}\r\n                                        </div>\r\n                                        <div class=\"payment-status  overdue-status cursor-pointer\"\r\n                                            (click)=\"payDue(payment)\">\r\n                                            <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n                                            <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                            <ng-template #showEmptyPayment>\r\n                                <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                                    <span>No Due Payments</span>\r\n                                </div>\r\n                            </ng-template>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"section mt-3\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n            </div>\r\n\r\n            <div class=\"schemes-grid\">\r\n                <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n                    <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n                        *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n                        <div class=\"scheme-header\">\r\n                            <div>\r\n                                <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n                                <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\r\n                            </div>\r\n                            <div class=\"scheme-date\">\r\n                                <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n                                    date:'dd-MM-yyyy') :\r\n                                    'N/A' }}</span>\r\n                                <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n                                'N/A' }}</span> -->\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n                            [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n                            {{\r\n                            scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n                            }}\r\n                        </div>\r\n\r\n                        <div class=\"scheme-stats\">\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\r\n                                <div class=\"stat-label\">Deposited Amount</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">\r\n                                    {{\r\n                                    scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n                                    (scheme?.schemePayments?.length -\r\n                                    scheme.dueMonths) : 'N/A'\r\n                                    }}\r\n                                </div>\r\n                                <div class=\"stat-label\">Paid Months</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n                                    scheme?.dueMonths : 'N/A' }}</div>\r\n                                <div class=\"stat-label\">Due Months</div>\r\n                            </div>\r\n                            <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n                                <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\r\n                                <div class=\"stat-label\">Accumulated Gold</div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-footer\">\r\n                            <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n                                'N/A' }}</span>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <ng-template #showActiveScheme>\r\n                    <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                        <span>No Active Scheme</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n\r\n\r\n        </div>\r\n\r\n        <!-- <div class=\"auto-pay\">\r\n            <div class=\"auto-pay-icon mobile-icon\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n            <div class=\"auto-pay-content\">\r\n                <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n                <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n            </div>\r\n            <button class=\"manage-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n        </div> -->\r\n    </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n    <div class=\"payment-dialog\">\r\n        <div class=\"dialog-header\">\r\n            <h2>Payment Details</h2>\r\n            <button class=\"close-btn\" mat-icon-button>\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"payment-content\">\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Installment Amount:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Convenience Fee:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Payment Service Charges:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row total-row\">\r\n                <span class=\"label total-label\">Total Amount:</span>\r\n                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"dialog-actions\">\r\n            <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n    <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n        (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n    <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;padding:15px;overflow-y:auto;overflow-x:hidden;max-height:80vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;border:none;padding:10px 5px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px;border:none}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}.fs-14{font-size:14px}.fs-12{font-size:12px}.logout-dialog-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;width:440px;max-width:90vw;padding:40px 32px 32px;border-radius:28px;box-shadow:0 25px 60px -15px #00000040,0 0 0 1px #0000000d;overflow:hidden;text-align:center;animation:modalPopIn .35s cubic-bezier(.16,1,.3,1) both}@keyframes modalPopIn{0%{opacity:0;transform:scale(.92) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}.logout-close-btn{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:none;background:#0000000d;color:#64748b;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:2}.logout-close-btn mat-icon{font-size:20px!important;height:20px!important;width:20px!important;line-height:20px!important}.logout-close-btn:hover{background:#0000001a;color:#0f172a;transform:rotate(90deg)}.logout-blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}.logout-blob-1{width:240px;height:240px;background:radial-gradient(circle,rgba(255,99,102,.18) 0%,transparent 70%);top:-60px;right:-60px;animation:blobFloat1 8s ease-in-out infinite}.logout-blob-2{width:200px;height:200px;background:radial-gradient(circle,rgba(255,165,80,.14) 0%,transparent 70%);bottom:-40px;left:-40px;animation:blobFloat2 10s ease-in-out infinite}@keyframes blobFloat1{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-12px,16px) scale(1.06)}}@keyframes blobFloat2{0%,to{transform:translate(0) scale(1)}50%{transform:translate(10px,-14px) scale(1.04)}}.logout-icon-ring{position:relative;z-index:1;width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,#fff4e5,#ffe0e0);box-shadow:0 8px 30px #ff64642e,0 0 0 10px #ff646412;display:flex;align-items:center;justify-content:center;margin-bottom:24px}.logout-wave{font-size:42px;line-height:1;display:inline-block;animation:waveHand 1.6s ease-in-out infinite;transform-origin:70% 80%}@keyframes waveHand{0%,60%,to{transform:rotate(0)}10%,30%{transform:rotate(-14deg)}20%,40%{transform:rotate(10deg)}}.logout-title{position:relative;z-index:1;font-size:1.55rem;font-weight:700;color:#1a1a2e;margin:0 0 10px;letter-spacing:-.3px}.logout-subtitle{position:relative;z-index:1;font-size:.92rem;color:#64748b;line-height:1.6;margin:0 0 32px;max-width:320px}.logout-actions{position:relative;z-index:1;display:flex;gap:12px;width:100%;justify-content:center}.logout-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1;padding:13px 20px;border-radius:12px;font-size:.95rem;font-weight:600;border:none;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);letter-spacing:.2px}.logout-action-btn .logout-btn-icon{font-size:18px!important;height:18px!important;width:18px!important;line-height:18px!important}.logout-action-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0000001f}.logout-action-btn:active{transform:translateY(0)}.btn-stay{background:#f1f5f9;color:#334155;border:1px solid #e2e8f0}.btn-stay:hover{background:#e2e8f0;border-color:#cbd5e1}.btn-confirm{color:#fff;border:1px solid transparent;box-shadow:0 4px 18px #0000002e}.btn-confirm:hover{filter:brightness(1.1);box-shadow:0 8px 24px #0000003d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter", "downloadReceiptEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details", inputs: ["schemeDetails", "data", "metalPrice"], outputs: ["gotoSchemeOverview"] }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }, { kind: "component", type: MyBookingsComponent, selector: "simpo-my-bookings" }, { kind: "component", type: PassbookTransactionsComponent, selector: "simpo-passbook-transactions" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }, { propertyName: "logoutDialogTemplate", first: true, predicate: ["logoutDialog"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n    [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n    [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-4 profile-box\" style=\"width: 25%; border-radius: 20px; height: fit-content\"\r\n            [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n            <!-- Profile Header Section -->\r\n            <div class=\"d-flex align-items-center profile-header\"\r\n                style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n                <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n                        style=\"border: 3px solid #e3f2fd; transition: all 0.3s ease;\">\r\n                    <div class=\"online-indicator\"\r\n                        style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"profile-details flex-grow-1\">\r\n                    <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n                        {{getUserDetails?.contact?.name}}</h4>\r\n\r\n                    <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                        </h6>\r\n\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n                            <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n                        </h6>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Navigation Tabs Section -->\r\n            <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center tab-item\"\r\n                        style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n                        [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n                        [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n                        [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n                        [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n                        <div class=\"tab-icon-wrapper\"\r\n                            style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n                            <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n                        </div>\r\n\r\n                        <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n                            {{tab.value}}</div>\r\n\r\n                        <!-- Hover effect background -->\r\n                        <div class=\"tab-hover-bg\"\r\n                            style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <!-- Action Buttons Section -->\r\n            <div class=\"d-flex action-buttons\"\r\n                style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n                <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                    [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n                    Edit Profile\r\n                </button>\r\n\r\n                <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                    [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease;\">\r\n                    Logout\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"orders-sec\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Transactions'\">\r\n                    <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Bookings'\">\r\n                    <simpo-my-bookings [data]=\"data\"></simpo-my-bookings>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n                    <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n                    <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n                *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n                    (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n                            style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n                                <mat-icon>stay_primary_portrait</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                            </h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n                                *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.email}}</span>\r\n                            </h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n                                [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n                                [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                    [style.color]=\"styles?.background?.accentColor\">\r\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n                                    {{tab.value}}</div>\r\n                            </div>\r\n\r\n                        </ng-container>\r\n                    </section>\r\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                            [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\">Logout</button>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Transactions'\">\r\n                    <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Bookings'\">\r\n                    <simpo-my-bookings [data]=\"data\"></simpo-my-bookings>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n                    <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n                    <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n            [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n</section>\r\n\r\n<ng-template #Referrals>\r\n    <iframe [src]=\"getMyReferralsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #Rewards>\r\n    <iframe [src]=\"getRewardsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #OrderSection>\r\n    <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n    <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n                {{tab.value}}</div>\r\n        </ng-container>\r\n    </div> -->\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                            [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n                    </div>\r\n                    <div class=\"cart-text \">\r\n                        <ng-container *ngFor=\"let text of content?.inputText\">\r\n                            <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n                                [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n                                <simpo-text-editor [(value)]=\"text.value\"\r\n                                    [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n        (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2\">\r\n        <h3 class=\"title-text\">My Address</h3>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n            [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n                <div class=\"card  border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n                    <div class=\"card-body p-3\">\r\n                        <!-- Header Section -->\r\n                        <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n                            <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n                                <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n                                <div class=\"icon-grp d-flex\">\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"address-content mb-3\">\r\n                            <div class=\"address-line mb-2\">\r\n                                <span class=\"text-muted small d-block\">Address</span>\r\n                                <span class=\"address-text\">{{address.addressLine1}}</span>\r\n                            </div>\r\n                            <div class=\"phone-info\">\r\n                                <span class=\"text-muted small d-block\">Phone</span>\r\n                                <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #showEmptyAddress>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n                    </div>\r\n                    <div class=\"cart-text\">\r\n                        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n                        </div>\r\n                        <!-- </ng-container> -->\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #logoutDialog>\r\n    <div class=\"logout-dialog-card\">\r\n        <!-- Decorative blobs -->\r\n        <div class=\"logout-blob logout-blob-1\"></div>\r\n        <div class=\"logout-blob logout-blob-2\"></div>\r\n\r\n        <!-- Close Button -->\r\n        <button class=\"logout-close-btn\" (click)=\"closeDialog()\" aria-label=\"Close\">\r\n            <mat-icon>close</mat-icon>\r\n        </button>\r\n\r\n        <!-- Wave icon -->\r\n        <div class=\"logout-icon-ring\">\r\n            <span class=\"logout-wave\">\uD83D\uDC4B</span>\r\n        </div>\r\n\r\n        <!-- Copy -->\r\n        <h2 class=\"logout-title\">See you soon, {{getUserDetails?.contact?.name?.split(' ')?.[0] || 'Friend'}}!</h2>\r\n        <p class=\"logout-subtitle\">\r\n            We'll keep everything safe while you're away.<br>\r\n            Come back anytime \u2014 we'll be right here. \uD83D\uDE0A\r\n        </p>\r\n\r\n        <!-- Actions -->\r\n        <div class=\"logout-actions\">\r\n            <button class=\"logout-action-btn btn-stay\" (click)=\"closeDialog()\">\r\n                <mat-icon class=\"logout-btn-icon\">arrow_back</mat-icon>\r\n                Stay\r\n            </button>\r\n            <button class=\"logout-action-btn btn-confirm\"\r\n                [style.background]=\"styles?.background?.accentColor\"\r\n                (click)=\"closeDialog(); _doLogout()\">\r\n                <mat-icon class=\"logout-btn-icon\">logout</mat-icon>\r\n                Yes, Logout\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <ng-container *ngTemplateOutlet=\"logoutDialog\"></ng-container>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"card  border-0 mb-2 cursor-pointer order-card\">\r\n        <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n            <!-- Header Section -->\r\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n                <div class=\"order-number\">\r\n                    <h4 class=\"mb-0  fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n                </div>\r\n                <div class=\"arrow-icon\">\r\n                    <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n                </div>\r\n            </div>\r\n            <div class=\"ordered-item row mb-2\">\r\n                <ng-container *ngFor=\"let item of  getOrderedItems(order)\">\r\n                    <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n                            onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            class=\"item-img w-50\">\r\n                        <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <!-- Middle Section -->\r\n            <div class=\"order-details\">\r\n                <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n                    <span class=\"text-muted small mb-3 mb-sm-0\">\r\n                        {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"amount-section\">\r\n                    <span class=\"h5 mb-0 text-success fw-bold\">\r\n                        <span [innerHTML]=\"currency\"></span>\r\n                        <!-- {{(order.billDetails.discountAmount ?\r\n                        (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n                        order?.billDetails?.totalTaxAfterDiscount) :\r\n                        order.billDetails.totalGrossValue) | number:'1.0-2'}}  -->\r\n                        {{getTotalAmtPaid(order) | number:'1.0-2'}}\r\n                    </span>\r\n                </div>\r\n                <div class=\"status-section\">\r\n                    <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n                        {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'REWARD_POINTS'\">\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Amount Paid -\r\n                    <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.pointsConvertedINR ? '0' :\r\n                        (getTotalAmtPaid(order) - order.pointsConvertedINR) }}</span>\r\n                </div>\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.pointsConvertedINR}}</span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'VOUCHER'\">\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Amount Paid -\r\n                    <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.voucherValue ? '0' :\r\n                        (getTotalAmtPaid(order) - order.voucherValue) }}</span>\r\n                </div>\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.voucherValue}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n    <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n    <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n        <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n                <div class=\"address-card mb-2\">\r\n                    <div class=\"card-body p-4\">\r\n                        <div class=\"row align-items-center\">\r\n                            <div class=\"col-auto\">\r\n                                <div class=\"product-image-wrapper\">\r\n                                    <img loading=\"lazy\"\r\n                                        onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                                        class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col\">\r\n                                <div class=\"product-details\">\r\n                                    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n                                        <div\r\n                                            class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n                                            <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n                                                {{item.itemName}}\r\n                                            </h6>\r\n                                            <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n                                                <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n                                                    title=\"Remove from wishlist\">\r\n                                                    <mat-icon class=\"small-icon\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                            <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n                                                <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n                                                    <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"product-price mb-3\">\r\n                                        <span class=\"h5 text-success fw-bold mb-0\">\r\n                                            <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n                                        </span>\r\n                                        <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n                                            ({{item.quantity}} items)\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"action-buttons d-flex  gap-2\">\r\n                                        <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n                                            *ngIf=\"item.quantity\">\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n                                                -\r\n                                            </button>\r\n                                            <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n                                                {{item.quantity}}\r\n                                            </span>\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'ADD')\"> +\r\n                                            </button>\r\n                                        </div>\r\n                                        <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n                                            (click)=\"addToFav(item, 'ADD')\">\r\n                                            + Add Quantity\r\n                                        </button>\r\n                                        <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n                                            Move to Cart\r\n                                        </button>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n    <ng-template #showEmptyWishlistScreen>\r\n        <section class=\"empty-cart m-auto\">\r\n            <div>\r\n                <div class=\"cart-image\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                    <ng-container>\r\n                        <div class=\"heading-medium d-flex justify-content-center\">\r\n                            Your Wishlist is Empty</div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </section>\r\n    </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n    <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n    <div class=\"row gap-2\">\r\n        <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n            <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n                <div class=\"card-header row gap-2\">\r\n                    <div class=\"card-head-left col-7\">\r\n                        <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n                        <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n                    </div>\r\n                    <div class=\"card-head-right col-4 text-center align-content-center\">\r\n                        <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body d-flex p-0 mb-3\">\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n                            class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n                        <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n                        <div class=\"card-sub-text text-center\">Rewards</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">8</div>\r\n                        <div class=\"card-sub-text text-center\">Due Months</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-footer row\">\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n                            may 2025</span>\r\n                    </div>\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n                            may 2026</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n    <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n        <div class=\"header d-flex flex-column\">\r\n            <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n                    class=\"store-listing\" (change)=\"changeStore($event)\">\r\n                    <option value=\"\">Select Store</option>\r\n                    <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n                </select></div>\r\n            <div class=\"scheme-overview d-flex flex-column\">\r\n                <div class=\"d-flex gap-2\">\r\n                    <div class=\"available-savings\">\r\n                        <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n                            <h3>Available Savings</h3>\r\n                            <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n                        </div>\r\n\r\n                        <div class=\"amount\">{{totalSavings ? totalSavings :\r\n                            '0'}}</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Active Passbooks</h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n                            totalSchemes.length : '0'}}</div>\r\n                        <div class=\"subtitle\">On Track</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Accumulated Gold </h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n                    </div>\r\n                </div>\r\n                <ng-container *ngIf=\"overAllDues?.length\">\r\n                    <div class=\"section d-flex-flex-column gap-2\">\r\n                        <div class=\"section-header\">\r\n                            <h2 class=\"section-title\">Due Payments</h2>\r\n                        </div>\r\n                        <div class=\"payment-list d-flex flex-column gap-2\">\r\n                            <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n                                <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n                                    <div class=\"payment-info\">\r\n                                        <div class=\"payment-icon\"><img\r\n                                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n                                            <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n                                            *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n                                        </div>\r\n                                        <div class=\"payment-details\">\r\n                                            <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n                                            <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n                                                'N/A'}}\r\n                                                <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n                                                ? payment.daysOverdue : 0}}</span> --></span>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"payment-amount\">\r\n                                        <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n                                            '0'}}\r\n                                        </div>\r\n                                        <div class=\"payment-status  overdue-status cursor-pointer\"\r\n                                            (click)=\"payDue(payment)\">\r\n                                            <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n                                            <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                            <ng-template #showEmptyPayment>\r\n                                <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                                    <span>No Due Payments</span>\r\n                                </div>\r\n                            </ng-template>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"section mt-3\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n            </div>\r\n\r\n            <div class=\"schemes-grid\">\r\n                <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n                    <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n                        *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n                        <div class=\"scheme-header\">\r\n                            <div>\r\n                                <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n                                <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\r\n                            </div>\r\n                            <div class=\"scheme-date\">\r\n                                <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n                                    date:'dd-MM-yyyy') :\r\n                                    'N/A' }}</span>\r\n                                <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n                                'N/A' }}</span> -->\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n                            [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n                            {{\r\n                            scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n                            }}\r\n                        </div>\r\n\r\n                        <div class=\"scheme-stats\">\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\r\n                                <div class=\"stat-label\">Deposited Amount</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">\r\n                                    {{\r\n                                    scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n                                    (scheme?.schemePayments?.length -\r\n                                    scheme.dueMonths) : 'N/A'\r\n                                    }}\r\n                                </div>\r\n                                <div class=\"stat-label\">Paid Months</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n                                    scheme?.dueMonths : 'N/A' }}</div>\r\n                                <div class=\"stat-label\">Due Months</div>\r\n                            </div>\r\n                            <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n                                <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\r\n                                <div class=\"stat-label\">Accumulated Gold</div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-footer\">\r\n                            <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n                                'N/A' }}</span>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <ng-template #showActiveScheme>\r\n                    <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                        <span>No Active Scheme</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n\r\n\r\n        </div>\r\n\r\n        <!-- <div class=\"auto-pay\">\r\n            <div class=\"auto-pay-icon mobile-icon\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n            <div class=\"auto-pay-content\">\r\n                <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n                <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n            </div>\r\n            <button class=\"manage-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n        </div> -->\r\n    </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n    <div class=\"payment-dialog\">\r\n        <div class=\"dialog-header\">\r\n            <h2>Payment Details</h2>\r\n            <button class=\"close-btn\" mat-icon-button>\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"payment-content\">\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Installment Amount:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Convenience Fee:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Payment Service Charges:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row total-row\">\r\n                <span class=\"label total-label\">Total Amount:</span>\r\n                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"dialog-actions\">\r\n            <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n    <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n        (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n    <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;padding:15px;overflow-y:auto;overflow-x:hidden;max-height:80vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;border:none;padding:10px 5px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px;border:none}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}.fs-14{font-size:14px}.fs-12{font-size:12px}.logout-dialog-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;width:440px;max-width:90vw;padding:40px 32px 32px;border-radius:28px;box-shadow:0 25px 60px -15px #00000040,0 0 0 1px #0000000d;overflow:hidden;text-align:center;animation:modalPopIn .35s cubic-bezier(.16,1,.3,1) both}@keyframes modalPopIn{0%{opacity:0;transform:scale(.92) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}.logout-close-btn{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:none;background:#0000000d;color:#64748b;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:2}.logout-close-btn mat-icon{font-size:20px!important;height:20px!important;width:20px!important;line-height:20px!important}.logout-close-btn:hover{background:#0000001a;color:#0f172a;transform:rotate(90deg)}.logout-blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}.logout-blob-1{width:240px;height:240px;background:radial-gradient(circle,rgba(255,99,102,.18) 0%,transparent 70%);top:-60px;right:-60px;animation:blobFloat1 8s ease-in-out infinite}.logout-blob-2{width:200px;height:200px;background:radial-gradient(circle,rgba(255,165,80,.14) 0%,transparent 70%);bottom:-40px;left:-40px;animation:blobFloat2 10s ease-in-out infinite}@keyframes blobFloat1{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-12px,16px) scale(1.06)}}@keyframes blobFloat2{0%,to{transform:translate(0) scale(1)}50%{transform:translate(10px,-14px) scale(1.04)}}.logout-icon-ring{position:relative;z-index:1;width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,#fff4e5,#ffe0e0);box-shadow:0 8px 30px #ff64642e,0 0 0 10px #ff646412;display:flex;align-items:center;justify-content:center;margin-bottom:24px}.logout-wave{font-size:42px;line-height:1;display:inline-block;animation:waveHand 1.6s ease-in-out infinite;transform-origin:70% 80%}@keyframes waveHand{0%,60%,to{transform:rotate(0)}10%,30%{transform:rotate(-14deg)}20%,40%{transform:rotate(10deg)}}.logout-title{position:relative;z-index:1;font-size:1.55rem;font-weight:700;color:#1a1a2e;margin:0 0 10px;letter-spacing:-.3px}.logout-subtitle{position:relative;z-index:1;font-size:.92rem;color:#64748b;line-height:1.6;margin:0 0 32px;max-width:320px}.logout-actions{position:relative;z-index:1;display:flex;gap:12px;width:100%;justify-content:center}.logout-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1;padding:13px 20px;border-radius:12px;font-size:.95rem;font-weight:600;border:none;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);letter-spacing:.2px}.logout-action-btn .logout-btn-icon{font-size:18px!important;height:18px!important;width:18px!important;line-height:18px!important}.logout-action-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0000001f}.logout-action-btn:active{transform:translateY(0)}.btn-stay{background:#f1f5f9;color:#334155;border:1px solid #e2e8f0}.btn-stay:hover{background:#e2e8f0;border-color:#cbd5e1}.btn-confirm{color:#fff;border:1px solid transparent;box-shadow:0 4px 18px #0000002e}.btn-confirm:hover{filter:brightness(1.1);box-shadow:0 8px 24px #0000003d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter", "downloadReceiptEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details", inputs: ["schemeDetails", "data", "metalPrice"], outputs: ["gotoSchemeOverview"] }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }, { kind: "component", type: MyBookingsComponent, selector: "simpo-my-bookings", inputs: ["data"] }, { kind: "component", type: PassbookTransactionsComponent, selector: "simpo-passbook-transactions" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, decorators: [{
             type: Component,
@@ -23330,7 +23354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ListHomeAppointmentComponent,
                         MyBookingsComponent,
                         PassbookTransactionsComponent
-                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n    [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n    [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-4 profile-box\" style=\"width: 25%; border-radius: 20px; height: fit-content\"\r\n            [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n            <!-- Profile Header Section -->\r\n            <div class=\"d-flex align-items-center profile-header\"\r\n                style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n                <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n                        style=\"border: 3px solid #e3f2fd; transition: all 0.3s ease;\">\r\n                    <div class=\"online-indicator\"\r\n                        style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"profile-details flex-grow-1\">\r\n                    <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n                        {{getUserDetails?.contact?.name}}</h4>\r\n\r\n                    <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                        </h6>\r\n\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n                            <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n                        </h6>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Navigation Tabs Section -->\r\n            <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center tab-item\"\r\n                        style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n                        [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n                        [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n                        [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n                        [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n                        <div class=\"tab-icon-wrapper\"\r\n                            style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n                            <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n                        </div>\r\n\r\n                        <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n                            {{tab.value}}</div>\r\n\r\n                        <!-- Hover effect background -->\r\n                        <div class=\"tab-hover-bg\"\r\n                            style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <!-- Action Buttons Section -->\r\n            <div class=\"d-flex action-buttons\"\r\n                style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n                <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                    [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n                    Edit Profile\r\n                </button>\r\n\r\n                <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                    [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease;\">\r\n                    Logout\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"orders-sec\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Transactions'\">\r\n                    <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Bookings'\">\r\n                    <simpo-my-bookings></simpo-my-bookings>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n                    <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n                    <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n                *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n                    (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n                            style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n                                <mat-icon>stay_primary_portrait</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                            </h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n                                *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.email}}</span>\r\n                            </h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n                                [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n                                [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                    [style.color]=\"styles?.background?.accentColor\">\r\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n                                    {{tab.value}}</div>\r\n                            </div>\r\n\r\n                        </ng-container>\r\n                    </section>\r\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                            [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\">Logout</button>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Transactions'\">\r\n                    <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Bookings'\">\r\n                    <simpo-my-bookings></simpo-my-bookings>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n                    <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n                    <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n            [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n</section>\r\n\r\n<ng-template #Referrals>\r\n    <iframe [src]=\"getMyReferralsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #Rewards>\r\n    <iframe [src]=\"getRewardsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #OrderSection>\r\n    <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n    <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n                {{tab.value}}</div>\r\n        </ng-container>\r\n    </div> -->\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                            [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n                    </div>\r\n                    <div class=\"cart-text \">\r\n                        <ng-container *ngFor=\"let text of content?.inputText\">\r\n                            <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n                                [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n                                <simpo-text-editor [(value)]=\"text.value\"\r\n                                    [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n        (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2\">\r\n        <h3 class=\"title-text\">My Address</h3>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n            [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n                <div class=\"card  border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n                    <div class=\"card-body p-3\">\r\n                        <!-- Header Section -->\r\n                        <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n                            <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n                                <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n                                <div class=\"icon-grp d-flex\">\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"address-content mb-3\">\r\n                            <div class=\"address-line mb-2\">\r\n                                <span class=\"text-muted small d-block\">Address</span>\r\n                                <span class=\"address-text\">{{address.addressLine1}}</span>\r\n                            </div>\r\n                            <div class=\"phone-info\">\r\n                                <span class=\"text-muted small d-block\">Phone</span>\r\n                                <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #showEmptyAddress>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n                    </div>\r\n                    <div class=\"cart-text\">\r\n                        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n                        </div>\r\n                        <!-- </ng-container> -->\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #logoutDialog>\r\n    <div class=\"logout-dialog-card\">\r\n        <!-- Decorative blobs -->\r\n        <div class=\"logout-blob logout-blob-1\"></div>\r\n        <div class=\"logout-blob logout-blob-2\"></div>\r\n\r\n        <!-- Close Button -->\r\n        <button class=\"logout-close-btn\" (click)=\"closeDialog()\" aria-label=\"Close\">\r\n            <mat-icon>close</mat-icon>\r\n        </button>\r\n\r\n        <!-- Wave icon -->\r\n        <div class=\"logout-icon-ring\">\r\n            <span class=\"logout-wave\">\uD83D\uDC4B</span>\r\n        </div>\r\n\r\n        <!-- Copy -->\r\n        <h2 class=\"logout-title\">See you soon, {{getUserDetails?.contact?.name?.split(' ')?.[0] || 'Friend'}}!</h2>\r\n        <p class=\"logout-subtitle\">\r\n            We'll keep everything safe while you're away.<br>\r\n            Come back anytime \u2014 we'll be right here. \uD83D\uDE0A\r\n        </p>\r\n\r\n        <!-- Actions -->\r\n        <div class=\"logout-actions\">\r\n            <button class=\"logout-action-btn btn-stay\" (click)=\"closeDialog()\">\r\n                <mat-icon class=\"logout-btn-icon\">arrow_back</mat-icon>\r\n                Stay\r\n            </button>\r\n            <button class=\"logout-action-btn btn-confirm\"\r\n                [style.background]=\"styles?.background?.accentColor\"\r\n                (click)=\"closeDialog(); _doLogout()\">\r\n                <mat-icon class=\"logout-btn-icon\">logout</mat-icon>\r\n                Yes, Logout\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <ng-container *ngTemplateOutlet=\"logoutDialog\"></ng-container>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"card  border-0 mb-2 cursor-pointer order-card\">\r\n        <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n            <!-- Header Section -->\r\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n                <div class=\"order-number\">\r\n                    <h4 class=\"mb-0  fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n                </div>\r\n                <div class=\"arrow-icon\">\r\n                    <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n                </div>\r\n            </div>\r\n            <div class=\"ordered-item row mb-2\">\r\n                <ng-container *ngFor=\"let item of  getOrderedItems(order)\">\r\n                    <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n                            onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            class=\"item-img w-50\">\r\n                        <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <!-- Middle Section -->\r\n            <div class=\"order-details\">\r\n                <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n                    <span class=\"text-muted small mb-3 mb-sm-0\">\r\n                        {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"amount-section\">\r\n                    <span class=\"h5 mb-0 text-success fw-bold\">\r\n                        <span [innerHTML]=\"currency\"></span>\r\n                        <!-- {{(order.billDetails.discountAmount ?\r\n                        (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n                        order?.billDetails?.totalTaxAfterDiscount) :\r\n                        order.billDetails.totalGrossValue) | number:'1.0-2'}}  -->\r\n                        {{getTotalAmtPaid(order) | number:'1.0-2'}}\r\n                    </span>\r\n                </div>\r\n                <div class=\"status-section\">\r\n                    <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n                        {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'REWARD_POINTS'\">\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Amount Paid -\r\n                    <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.pointsConvertedINR ? '0' :\r\n                        (getTotalAmtPaid(order) - order.pointsConvertedINR) }}</span>\r\n                </div>\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.pointsConvertedINR}}</span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'VOUCHER'\">\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Amount Paid -\r\n                    <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.voucherValue ? '0' :\r\n                        (getTotalAmtPaid(order) - order.voucherValue) }}</span>\r\n                </div>\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.voucherValue}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n    <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n    <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n        <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n                <div class=\"address-card mb-2\">\r\n                    <div class=\"card-body p-4\">\r\n                        <div class=\"row align-items-center\">\r\n                            <div class=\"col-auto\">\r\n                                <div class=\"product-image-wrapper\">\r\n                                    <img loading=\"lazy\"\r\n                                        onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                                        class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col\">\r\n                                <div class=\"product-details\">\r\n                                    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n                                        <div\r\n                                            class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n                                            <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n                                                {{item.itemName}}\r\n                                            </h6>\r\n                                            <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n                                                <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n                                                    title=\"Remove from wishlist\">\r\n                                                    <mat-icon class=\"small-icon\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                            <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n                                                <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n                                                    <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"product-price mb-3\">\r\n                                        <span class=\"h5 text-success fw-bold mb-0\">\r\n                                            <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n                                        </span>\r\n                                        <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n                                            ({{item.quantity}} items)\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"action-buttons d-flex  gap-2\">\r\n                                        <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n                                            *ngIf=\"item.quantity\">\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n                                                -\r\n                                            </button>\r\n                                            <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n                                                {{item.quantity}}\r\n                                            </span>\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'ADD')\"> +\r\n                                            </button>\r\n                                        </div>\r\n                                        <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n                                            (click)=\"addToFav(item, 'ADD')\">\r\n                                            + Add Quantity\r\n                                        </button>\r\n                                        <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n                                            Move to Cart\r\n                                        </button>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n    <ng-template #showEmptyWishlistScreen>\r\n        <section class=\"empty-cart m-auto\">\r\n            <div>\r\n                <div class=\"cart-image\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                    <ng-container>\r\n                        <div class=\"heading-medium d-flex justify-content-center\">\r\n                            Your Wishlist is Empty</div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </section>\r\n    </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n    <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n    <div class=\"row gap-2\">\r\n        <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n            <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n                <div class=\"card-header row gap-2\">\r\n                    <div class=\"card-head-left col-7\">\r\n                        <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n                        <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n                    </div>\r\n                    <div class=\"card-head-right col-4 text-center align-content-center\">\r\n                        <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body d-flex p-0 mb-3\">\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n                            class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n                        <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n                        <div class=\"card-sub-text text-center\">Rewards</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">8</div>\r\n                        <div class=\"card-sub-text text-center\">Due Months</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-footer row\">\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n                            may 2025</span>\r\n                    </div>\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n                            may 2026</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n    <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n        <div class=\"header d-flex flex-column\">\r\n            <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n                    class=\"store-listing\" (change)=\"changeStore($event)\">\r\n                    <option value=\"\">Select Store</option>\r\n                    <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n                </select></div>\r\n            <div class=\"scheme-overview d-flex flex-column\">\r\n                <div class=\"d-flex gap-2\">\r\n                    <div class=\"available-savings\">\r\n                        <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n                            <h3>Available Savings</h3>\r\n                            <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n                        </div>\r\n\r\n                        <div class=\"amount\">{{totalSavings ? totalSavings :\r\n                            '0'}}</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Active Passbooks</h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n                            totalSchemes.length : '0'}}</div>\r\n                        <div class=\"subtitle\">On Track</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Accumulated Gold </h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n                    </div>\r\n                </div>\r\n                <ng-container *ngIf=\"overAllDues?.length\">\r\n                    <div class=\"section d-flex-flex-column gap-2\">\r\n                        <div class=\"section-header\">\r\n                            <h2 class=\"section-title\">Due Payments</h2>\r\n                        </div>\r\n                        <div class=\"payment-list d-flex flex-column gap-2\">\r\n                            <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n                                <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n                                    <div class=\"payment-info\">\r\n                                        <div class=\"payment-icon\"><img\r\n                                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n                                            <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n                                            *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n                                        </div>\r\n                                        <div class=\"payment-details\">\r\n                                            <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n                                            <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n                                                'N/A'}}\r\n                                                <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n                                                ? payment.daysOverdue : 0}}</span> --></span>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"payment-amount\">\r\n                                        <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n                                            '0'}}\r\n                                        </div>\r\n                                        <div class=\"payment-status  overdue-status cursor-pointer\"\r\n                                            (click)=\"payDue(payment)\">\r\n                                            <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n                                            <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                            <ng-template #showEmptyPayment>\r\n                                <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                                    <span>No Due Payments</span>\r\n                                </div>\r\n                            </ng-template>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"section mt-3\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n            </div>\r\n\r\n            <div class=\"schemes-grid\">\r\n                <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n                    <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n                        *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n                        <div class=\"scheme-header\">\r\n                            <div>\r\n                                <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n                                <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\r\n                            </div>\r\n                            <div class=\"scheme-date\">\r\n                                <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n                                    date:'dd-MM-yyyy') :\r\n                                    'N/A' }}</span>\r\n                                <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n                                'N/A' }}</span> -->\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n                            [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n                            {{\r\n                            scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n                            }}\r\n                        </div>\r\n\r\n                        <div class=\"scheme-stats\">\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\r\n                                <div class=\"stat-label\">Deposited Amount</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">\r\n                                    {{\r\n                                    scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n                                    (scheme?.schemePayments?.length -\r\n                                    scheme.dueMonths) : 'N/A'\r\n                                    }}\r\n                                </div>\r\n                                <div class=\"stat-label\">Paid Months</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n                                    scheme?.dueMonths : 'N/A' }}</div>\r\n                                <div class=\"stat-label\">Due Months</div>\r\n                            </div>\r\n                            <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n                                <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\r\n                                <div class=\"stat-label\">Accumulated Gold</div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-footer\">\r\n                            <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n                                'N/A' }}</span>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <ng-template #showActiveScheme>\r\n                    <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                        <span>No Active Scheme</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n\r\n\r\n        </div>\r\n\r\n        <!-- <div class=\"auto-pay\">\r\n            <div class=\"auto-pay-icon mobile-icon\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n            <div class=\"auto-pay-content\">\r\n                <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n                <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n            </div>\r\n            <button class=\"manage-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n        </div> -->\r\n    </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n    <div class=\"payment-dialog\">\r\n        <div class=\"dialog-header\">\r\n            <h2>Payment Details</h2>\r\n            <button class=\"close-btn\" mat-icon-button>\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"payment-content\">\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Installment Amount:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Convenience Fee:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Payment Service Charges:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row total-row\">\r\n                <span class=\"label total-label\">Total Amount:</span>\r\n                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"dialog-actions\">\r\n            <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n    <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n        (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n    <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;padding:15px;overflow-y:auto;overflow-x:hidden;max-height:80vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;border:none;padding:10px 5px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px;border:none}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}.fs-14{font-size:14px}.fs-12{font-size:12px}.logout-dialog-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;width:440px;max-width:90vw;padding:40px 32px 32px;border-radius:28px;box-shadow:0 25px 60px -15px #00000040,0 0 0 1px #0000000d;overflow:hidden;text-align:center;animation:modalPopIn .35s cubic-bezier(.16,1,.3,1) both}@keyframes modalPopIn{0%{opacity:0;transform:scale(.92) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}.logout-close-btn{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:none;background:#0000000d;color:#64748b;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:2}.logout-close-btn mat-icon{font-size:20px!important;height:20px!important;width:20px!important;line-height:20px!important}.logout-close-btn:hover{background:#0000001a;color:#0f172a;transform:rotate(90deg)}.logout-blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}.logout-blob-1{width:240px;height:240px;background:radial-gradient(circle,rgba(255,99,102,.18) 0%,transparent 70%);top:-60px;right:-60px;animation:blobFloat1 8s ease-in-out infinite}.logout-blob-2{width:200px;height:200px;background:radial-gradient(circle,rgba(255,165,80,.14) 0%,transparent 70%);bottom:-40px;left:-40px;animation:blobFloat2 10s ease-in-out infinite}@keyframes blobFloat1{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-12px,16px) scale(1.06)}}@keyframes blobFloat2{0%,to{transform:translate(0) scale(1)}50%{transform:translate(10px,-14px) scale(1.04)}}.logout-icon-ring{position:relative;z-index:1;width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,#fff4e5,#ffe0e0);box-shadow:0 8px 30px #ff64642e,0 0 0 10px #ff646412;display:flex;align-items:center;justify-content:center;margin-bottom:24px}.logout-wave{font-size:42px;line-height:1;display:inline-block;animation:waveHand 1.6s ease-in-out infinite;transform-origin:70% 80%}@keyframes waveHand{0%,60%,to{transform:rotate(0)}10%,30%{transform:rotate(-14deg)}20%,40%{transform:rotate(10deg)}}.logout-title{position:relative;z-index:1;font-size:1.55rem;font-weight:700;color:#1a1a2e;margin:0 0 10px;letter-spacing:-.3px}.logout-subtitle{position:relative;z-index:1;font-size:.92rem;color:#64748b;line-height:1.6;margin:0 0 32px;max-width:320px}.logout-actions{position:relative;z-index:1;display:flex;gap:12px;width:100%;justify-content:center}.logout-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1;padding:13px 20px;border-radius:12px;font-size:.95rem;font-weight:600;border:none;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);letter-spacing:.2px}.logout-action-btn .logout-btn-icon{font-size:18px!important;height:18px!important;width:18px!important;line-height:18px!important}.logout-action-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0000001f}.logout-action-btn:active{transform:translateY(0)}.btn-stay{background:#f1f5f9;color:#334155;border:1px solid #e2e8f0}.btn-stay:hover{background:#e2e8f0;border-color:#cbd5e1}.btn-confirm{color:#fff;border:1px solid transparent;box-shadow:0 4px 18px #0000002e}.btn-confirm:hover{filter:brightness(1.1);box-shadow:0 8px 24px #0000003d}\n"] }]
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n    [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n    [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-4 profile-box\" style=\"width: 25%; border-radius: 20px; height: fit-content\"\r\n            [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n            <!-- Profile Header Section -->\r\n            <div class=\"d-flex align-items-center profile-header\"\r\n                style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n                <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n                        style=\"border: 3px solid #e3f2fd; transition: all 0.3s ease;\">\r\n                    <div class=\"online-indicator\"\r\n                        style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"profile-details flex-grow-1\">\r\n                    <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n                        {{getUserDetails?.contact?.name}}</h4>\r\n\r\n                    <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                        </h6>\r\n\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n                            <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n                        </h6>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Navigation Tabs Section -->\r\n            <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center tab-item\"\r\n                        style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n                        [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n                        [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n                        [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n                        [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n                        <div class=\"tab-icon-wrapper\"\r\n                            style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n                            <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n                        </div>\r\n\r\n                        <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n                            {{tab.value}}</div>\r\n\r\n                        <!-- Hover effect background -->\r\n                        <div class=\"tab-hover-bg\"\r\n                            style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <!-- Action Buttons Section -->\r\n            <div class=\"d-flex action-buttons\"\r\n                style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n                <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                    [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n                    Edit Profile\r\n                </button>\r\n\r\n                <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                    [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease;\">\r\n                    Logout\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"orders-sec\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Transactions'\">\r\n                    <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Bookings'\">\r\n                    <simpo-my-bookings [data]=\"data\"></simpo-my-bookings>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n                    <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n                    <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n                *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n                    (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n                            style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n                                <mat-icon>stay_primary_portrait</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                            </h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n                                *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.email}}</span>\r\n                            </h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n                                [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n                                [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                    [style.color]=\"styles?.background?.accentColor\">\r\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n                                    {{tab.value}}</div>\r\n                            </div>\r\n\r\n                        </ng-container>\r\n                    </section>\r\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                            [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\">Logout</button>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Transactions'\">\r\n                    <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Bookings'\">\r\n                    <simpo-my-bookings [data]=\"data\"></simpo-my-bookings>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n                    <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n                    <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n            [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n</section>\r\n\r\n<ng-template #Referrals>\r\n    <iframe [src]=\"getMyReferralsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #Rewards>\r\n    <iframe [src]=\"getRewardsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #OrderSection>\r\n    <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n    <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n                {{tab.value}}</div>\r\n        </ng-container>\r\n    </div> -->\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                            [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n                    </div>\r\n                    <div class=\"cart-text \">\r\n                        <ng-container *ngFor=\"let text of content?.inputText\">\r\n                            <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n                                [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n                                <simpo-text-editor [(value)]=\"text.value\"\r\n                                    [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n        (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2\">\r\n        <h3 class=\"title-text\">My Address</h3>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n            [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n                <div class=\"card  border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n                    <div class=\"card-body p-3\">\r\n                        <!-- Header Section -->\r\n                        <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n                            <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n                                <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n                                <div class=\"icon-grp d-flex\">\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"address-content mb-3\">\r\n                            <div class=\"address-line mb-2\">\r\n                                <span class=\"text-muted small d-block\">Address</span>\r\n                                <span class=\"address-text\">{{address.addressLine1}}</span>\r\n                            </div>\r\n                            <div class=\"phone-info\">\r\n                                <span class=\"text-muted small d-block\">Phone</span>\r\n                                <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #showEmptyAddress>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                    <div class=\"cart-image\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n                    </div>\r\n                    <div class=\"cart-text\">\r\n                        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n                        </div>\r\n                        <!-- </ng-container> -->\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #logoutDialog>\r\n    <div class=\"logout-dialog-card\">\r\n        <!-- Decorative blobs -->\r\n        <div class=\"logout-blob logout-blob-1\"></div>\r\n        <div class=\"logout-blob logout-blob-2\"></div>\r\n\r\n        <!-- Close Button -->\r\n        <button class=\"logout-close-btn\" (click)=\"closeDialog()\" aria-label=\"Close\">\r\n            <mat-icon>close</mat-icon>\r\n        </button>\r\n\r\n        <!-- Wave icon -->\r\n        <div class=\"logout-icon-ring\">\r\n            <span class=\"logout-wave\">\uD83D\uDC4B</span>\r\n        </div>\r\n\r\n        <!-- Copy -->\r\n        <h2 class=\"logout-title\">See you soon, {{getUserDetails?.contact?.name?.split(' ')?.[0] || 'Friend'}}!</h2>\r\n        <p class=\"logout-subtitle\">\r\n            We'll keep everything safe while you're away.<br>\r\n            Come back anytime \u2014 we'll be right here. \uD83D\uDE0A\r\n        </p>\r\n\r\n        <!-- Actions -->\r\n        <div class=\"logout-actions\">\r\n            <button class=\"logout-action-btn btn-stay\" (click)=\"closeDialog()\">\r\n                <mat-icon class=\"logout-btn-icon\">arrow_back</mat-icon>\r\n                Stay\r\n            </button>\r\n            <button class=\"logout-action-btn btn-confirm\"\r\n                [style.background]=\"styles?.background?.accentColor\"\r\n                (click)=\"closeDialog(); _doLogout()\">\r\n                <mat-icon class=\"logout-btn-icon\">logout</mat-icon>\r\n                Yes, Logout\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <ng-container *ngTemplateOutlet=\"logoutDialog\"></ng-container>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"card  border-0 mb-2 cursor-pointer order-card\">\r\n        <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n            <!-- Header Section -->\r\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n                <div class=\"order-number\">\r\n                    <h4 class=\"mb-0  fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n                </div>\r\n                <div class=\"arrow-icon\">\r\n                    <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n                </div>\r\n            </div>\r\n            <div class=\"ordered-item row mb-2\">\r\n                <ng-container *ngFor=\"let item of  getOrderedItems(order)\">\r\n                    <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n                            onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            class=\"item-img w-50\">\r\n                        <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <!-- Middle Section -->\r\n            <div class=\"order-details\">\r\n                <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n                    <span class=\"text-muted small mb-3 mb-sm-0\">\r\n                        {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"amount-section\">\r\n                    <span class=\"h5 mb-0 text-success fw-bold\">\r\n                        <span [innerHTML]=\"currency\"></span>\r\n                        <!-- {{(order.billDetails.discountAmount ?\r\n                        (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n                        order?.billDetails?.totalTaxAfterDiscount) :\r\n                        order.billDetails.totalGrossValue) | number:'1.0-2'}}  -->\r\n                        {{getTotalAmtPaid(order) | number:'1.0-2'}}\r\n                    </span>\r\n                </div>\r\n                <div class=\"status-section\">\r\n                    <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n                        {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'REWARD_POINTS'\">\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Amount Paid -\r\n                    <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.pointsConvertedINR ? '0' :\r\n                        (getTotalAmtPaid(order) - order.pointsConvertedINR) }}</span>\r\n                </div>\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.pointsConvertedINR}}</span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'VOUCHER'\">\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Amount Paid -\r\n                    <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.voucherValue ? '0' :\r\n                        (getTotalAmtPaid(order) - order.voucherValue) }}</span>\r\n                </div>\r\n                <div class=\"fs-14 text-secondary\">\r\n                    Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.voucherValue}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n    <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n    <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n        <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n                <div class=\"address-card mb-2\">\r\n                    <div class=\"card-body p-4\">\r\n                        <div class=\"row align-items-center\">\r\n                            <div class=\"col-auto\">\r\n                                <div class=\"product-image-wrapper\">\r\n                                    <img loading=\"lazy\"\r\n                                        onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                                        class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col\">\r\n                                <div class=\"product-details\">\r\n                                    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n                                        <div\r\n                                            class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n                                            <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n                                                {{item.itemName}}\r\n                                            </h6>\r\n                                            <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n                                                <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n                                                    title=\"Remove from wishlist\">\r\n                                                    <mat-icon class=\"small-icon\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                            <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n                                                <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n                                                    <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"product-price mb-3\">\r\n                                        <span class=\"h5 text-success fw-bold mb-0\">\r\n                                            <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n                                        </span>\r\n                                        <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n                                            ({{item.quantity}} items)\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"action-buttons d-flex  gap-2\">\r\n                                        <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n                                            *ngIf=\"item.quantity\">\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n                                                -\r\n                                            </button>\r\n                                            <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n                                                {{item.quantity}}\r\n                                            </span>\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'ADD')\"> +\r\n                                            </button>\r\n                                        </div>\r\n                                        <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n                                            (click)=\"addToFav(item, 'ADD')\">\r\n                                            + Add Quantity\r\n                                        </button>\r\n                                        <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n                                            Move to Cart\r\n                                        </button>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n    <ng-template #showEmptyWishlistScreen>\r\n        <section class=\"empty-cart m-auto\">\r\n            <div>\r\n                <div class=\"cart-image\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                    <ng-container>\r\n                        <div class=\"heading-medium d-flex justify-content-center\">\r\n                            Your Wishlist is Empty</div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </section>\r\n    </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n    <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n    <div class=\"row gap-2\">\r\n        <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n            <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n                <div class=\"card-header row gap-2\">\r\n                    <div class=\"card-head-left col-7\">\r\n                        <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n                        <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n                    </div>\r\n                    <div class=\"card-head-right col-4 text-center align-content-center\">\r\n                        <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body d-flex p-0 mb-3\">\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n                            class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n                        <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n                        <div class=\"card-sub-text text-center\">Rewards</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">8</div>\r\n                        <div class=\"card-sub-text text-center\">Due Months</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-footer row\">\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n                            may 2025</span>\r\n                    </div>\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n                            may 2026</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n    <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n        <div class=\"header d-flex flex-column\">\r\n            <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n                    class=\"store-listing\" (change)=\"changeStore($event)\">\r\n                    <option value=\"\">Select Store</option>\r\n                    <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n                </select></div>\r\n            <div class=\"scheme-overview d-flex flex-column\">\r\n                <div class=\"d-flex gap-2\">\r\n                    <div class=\"available-savings\">\r\n                        <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n                            <h3>Available Savings</h3>\r\n                            <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n                        </div>\r\n\r\n                        <div class=\"amount\">{{totalSavings ? totalSavings :\r\n                            '0'}}</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Active Passbooks</h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n                            totalSchemes.length : '0'}}</div>\r\n                        <div class=\"subtitle\">On Track</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Accumulated Gold </h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n                    </div>\r\n                </div>\r\n                <ng-container *ngIf=\"overAllDues?.length\">\r\n                    <div class=\"section d-flex-flex-column gap-2\">\r\n                        <div class=\"section-header\">\r\n                            <h2 class=\"section-title\">Due Payments</h2>\r\n                        </div>\r\n                        <div class=\"payment-list d-flex flex-column gap-2\">\r\n                            <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n                                <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n                                    <div class=\"payment-info\">\r\n                                        <div class=\"payment-icon\"><img\r\n                                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n                                            <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n                                            *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n                                        </div>\r\n                                        <div class=\"payment-details\">\r\n                                            <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n                                            <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n                                                'N/A'}}\r\n                                                <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n                                                ? payment.daysOverdue : 0}}</span> --></span>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"payment-amount\">\r\n                                        <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n                                            '0'}}\r\n                                        </div>\r\n                                        <div class=\"payment-status  overdue-status cursor-pointer\"\r\n                                            (click)=\"payDue(payment)\">\r\n                                            <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n                                            <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                            <ng-template #showEmptyPayment>\r\n                                <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                                    <span>No Due Payments</span>\r\n                                </div>\r\n                            </ng-template>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"section mt-3\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n            </div>\r\n\r\n            <div class=\"schemes-grid\">\r\n                <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n                    <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n                        *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n                        <div class=\"scheme-header\">\r\n                            <div>\r\n                                <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n                                <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\r\n                            </div>\r\n                            <div class=\"scheme-date\">\r\n                                <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n                                    date:'dd-MM-yyyy') :\r\n                                    'N/A' }}</span>\r\n                                <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n                                'N/A' }}</span> -->\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n                            [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n                            {{\r\n                            scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n                            }}\r\n                        </div>\r\n\r\n                        <div class=\"scheme-stats\">\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\r\n                                <div class=\"stat-label\">Deposited Amount</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">\r\n                                    {{\r\n                                    scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n                                    (scheme?.schemePayments?.length -\r\n                                    scheme.dueMonths) : 'N/A'\r\n                                    }}\r\n                                </div>\r\n                                <div class=\"stat-label\">Paid Months</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n                                    scheme?.dueMonths : 'N/A' }}</div>\r\n                                <div class=\"stat-label\">Due Months</div>\r\n                            </div>\r\n                            <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n                                <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\r\n                                <div class=\"stat-label\">Accumulated Gold</div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-footer\">\r\n                            <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n                                'N/A' }}</span>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <ng-template #showActiveScheme>\r\n                    <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                        <span>No Active Scheme</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n\r\n\r\n        </div>\r\n\r\n        <!-- <div class=\"auto-pay\">\r\n            <div class=\"auto-pay-icon mobile-icon\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n            <div class=\"auto-pay-content\">\r\n                <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n                <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n            </div>\r\n            <button class=\"manage-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n        </div> -->\r\n    </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n    <div class=\"payment-dialog\">\r\n        <div class=\"dialog-header\">\r\n            <h2>Payment Details</h2>\r\n            <button class=\"close-btn\" mat-icon-button>\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"payment-content\">\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Installment Amount:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Convenience Fee:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Payment Service Charges:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row total-row\">\r\n                <span class=\"label total-label\">Total Amount:</span>\r\n                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"dialog-actions\">\r\n            <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n    <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n        (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n    <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;padding:15px;overflow-y:auto;overflow-x:hidden;max-height:80vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;border:none;padding:10px 5px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px;border:none}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}.fs-14{font-size:14px}.fs-12{font-size:12px}.logout-dialog-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;width:440px;max-width:90vw;padding:40px 32px 32px;border-radius:28px;box-shadow:0 25px 60px -15px #00000040,0 0 0 1px #0000000d;overflow:hidden;text-align:center;animation:modalPopIn .35s cubic-bezier(.16,1,.3,1) both}@keyframes modalPopIn{0%{opacity:0;transform:scale(.92) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}.logout-close-btn{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:none;background:#0000000d;color:#64748b;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:2}.logout-close-btn mat-icon{font-size:20px!important;height:20px!important;width:20px!important;line-height:20px!important}.logout-close-btn:hover{background:#0000001a;color:#0f172a;transform:rotate(90deg)}.logout-blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}.logout-blob-1{width:240px;height:240px;background:radial-gradient(circle,rgba(255,99,102,.18) 0%,transparent 70%);top:-60px;right:-60px;animation:blobFloat1 8s ease-in-out infinite}.logout-blob-2{width:200px;height:200px;background:radial-gradient(circle,rgba(255,165,80,.14) 0%,transparent 70%);bottom:-40px;left:-40px;animation:blobFloat2 10s ease-in-out infinite}@keyframes blobFloat1{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-12px,16px) scale(1.06)}}@keyframes blobFloat2{0%,to{transform:translate(0) scale(1)}50%{transform:translate(10px,-14px) scale(1.04)}}.logout-icon-ring{position:relative;z-index:1;width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,#fff4e5,#ffe0e0);box-shadow:0 8px 30px #ff64642e,0 0 0 10px #ff646412;display:flex;align-items:center;justify-content:center;margin-bottom:24px}.logout-wave{font-size:42px;line-height:1;display:inline-block;animation:waveHand 1.6s ease-in-out infinite;transform-origin:70% 80%}@keyframes waveHand{0%,60%,to{transform:rotate(0)}10%,30%{transform:rotate(-14deg)}20%,40%{transform:rotate(10deg)}}.logout-title{position:relative;z-index:1;font-size:1.55rem;font-weight:700;color:#1a1a2e;margin:0 0 10px;letter-spacing:-.3px}.logout-subtitle{position:relative;z-index:1;font-size:.92rem;color:#64748b;line-height:1.6;margin:0 0 32px;max-width:320px}.logout-actions{position:relative;z-index:1;display:flex;gap:12px;width:100%;justify-content:center}.logout-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1;padding:13px 20px;border-radius:12px;font-size:.95rem;font-weight:600;border:none;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);letter-spacing:.2px}.logout-action-btn .logout-btn-icon{font-size:18px!important;height:18px!important;width:18px!important;line-height:18px!important}.logout-action-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0000001f}.logout-action-btn:active{transform:translateY(0)}.btn-stay{background:#f1f5f9;color:#334155;border:1px solid #e2e8f0}.btn-stay:hover{background:#e2e8f0;border-color:#cbd5e1}.btn-confirm{color:#fff;border:1px solid transparent;box-shadow:0 4px 18px #0000002e}.btn-confirm:hover{filter:brightness(1.1);box-shadow:0 8px 24px #0000003d}\n"] }]
         }], ctorParameters: () => [{ type: i2$2.Router }, { type: EventsService }, { type: RestService }, { type: StorageServiceService }, { type: CartService }, { type: i3$2.MatDialog }, { type: i8$1.MatBottomSheet }, { type: i2$1.CookieService }, { type: i6$1.MessageService }, { type: i1.DomSanitizer }, { type: i2$2.ActivatedRoute }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCAL_STORAGE]
@@ -25622,6 +25646,13 @@ class AppointmentBookingComponent extends BaseSection {
         };
         this.serviceData = [];
         this.locationData = [];
+        // True once the wizard has detoured through staffListing for the current cart (ambiguous
+        // staff pool) and returned to dateSelection to show times - NOT just "slots have been
+        // fetched", since the simple/unambiguous path also fetches slots on its one and only visit to
+        // dateSelection and should keep showing the full "Select Date" card there, unchanged. Only the
+        // staffListing detour makes the date card redundant on the return visit (the date was already
+        // picked and locked in before the detour even started).
+        this.cameFromStaffListing = false;
         this.staffSearchQuery = '';
         this.staffData = [];
         this.loader = false;
@@ -25731,6 +25762,7 @@ class AppointmentBookingComponent extends BaseSection {
     resetWizard() {
         this.cartServices = [];
         this.resolvedLines = [];
+        this.cameFromStaffListing = false;
         this.selectedLocation = null;
         this.selectedDate = null;
         this.selectedDateStr = '';
@@ -25968,6 +26000,7 @@ class AppointmentBookingComponent extends BaseSection {
         this.barWidth = '43.57';
         this.activeButton = false;
         this.resolvedLines = [];
+        this.cameFromStaffListing = false;
     }
     get filteredStaff() {
         if (!this.staffSearchQuery.trim()) {
@@ -26013,6 +26046,7 @@ class AppointmentBookingComponent extends BaseSection {
                 this.staffSearchQuery = '';
                 this.selectedTab = 'staffListing';
                 this.barWidth = '43.57';
+                this.cameFromStaffListing = true;
                 // Picking is optional - Continue is enabled immediately either way, and the backend
                 // auto-assigns the least-busy eligible staff for any line left unpicked.
                 this.activeButton = true;
@@ -26043,6 +26077,7 @@ class AppointmentBookingComponent extends BaseSection {
             this.staffData.forEach((staff) => staff.selected = false);
             this.selectedTab = 'staffListing';
             this.barWidth = '43.57';
+            this.cameFromStaffListing = true;
             // Optional - Continue enables immediately, the customer can still pick if they want.
             this.activeButton = true;
         }, () => { this.loader = false; });
@@ -26257,11 +26292,11 @@ class AppointmentBookingComponent extends BaseSection {
         this.resetWizard();
     }
     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 }, { token: BookingProductCartService }, { token: StorageServiceService }, { token: i3$2.MatDialog }, { token: i3$2.MatDialogRef, optional: true }], 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", isAdminBooking: "isAdminBooking", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor", prefillContact: "prefillContact" }, host: { listeners: { "window: resize": "getScreenSize($event)", "document:click": "closeOnOutsideClick()" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\n<section class=\"main_section\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div class=\"main_header\">\n        <div class=\"header d-flex justify-content-between align-items-center\">\n            <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\n                (click)=\"goBack()\">\n                <mat-icon>keyboard_backspace</mat-icon><span *ngIf=\"screenWidth > 475\">Back to Home</span>\n            </div>\n            <div class=\"header-title\">\n                <h1>Book New Appointment</h1>\n                <p>{{businessName ?? \"N/A\" }}</p>\n            </div>\n        </div>\n\n        <div class=\"progress-bar\">\n            <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\n        </div>\n    </div>\n    <div class=\"main_body w-100 d-flex justify-content-center\">\n        <ng-container *ngIf=\"selectedTab === 'modeSelection'\">\n            <ng-container *ngTemplateOutlet=\"modeSelection\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab === 'serviceListing'\">\n            <ng-container *ngIf=\"!skeletonLoader\">\n                <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab === 'locationListing'\">\n            <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab === 'staffListing'\">\n            <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\n            <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab==='contactDetails'\">\n            <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab==='paymentTab'\">\n            <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\n            <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\n        </ng-container>\n    </div>\n    <div class=\"main_footer d-flex justify-content-center align-items-center\"\n        *ngIf=\"selectedTab!=='statusTemplate' && selectedTab!=='modeSelection'\">\n        <div class=\"footer-buttons\"\n            [ngStyle]=\"{'justify-content': selectedTab != 'serviceListing' ? 'space-between' : 'end'}\">\n            <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\"\n                *ngIf=\"selectedTab != 'serviceListing'\">Back</span>\n            <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\n                *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\n            <button class=\"cursor-pointer d-flex justify-content-evenly align-items-center\"\n                *ngIf=\"selectedTab==='paymentTab'\" (click)=\"confirmBooking()\" [disabled]=\"isProcessing\"\n                [ngClass]=\"{'pay-now-btn' : bookingGroup?.totalCollectedAtBooking > 0 || !bookingGroup,'complete_booking' : bookingGroup && !bookingGroup?.totalCollectedAtBooking}\">\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\n                {{isProcessing ? 'Please wait...' : 'Confirm Booking'}}\n            </button>\n        </div>\n    </div>\n</section>\n\n<ng-template #modeSelection>\n    <div class=\"w-60 service_section\">\n        <div class=\"service-selection\">\n            <h2>How would you like this?</h2>\n            <p>Choose how you'd like to be served</p>\n            <div class=\"services-grid\">\n                <div class=\"service-card\" (click)=\"selectMode('STORE_VISIT')\">\n                    <div class=\"service-header\">\n                        <div class=\"service-icon\"><mat-icon>storefront</mat-icon></div>\n                        <div class=\"service-info\">\n                            <div class=\"service-title\">Visit our Store</div>\n                        </div>\n                    </div>\n                    <div class=\"service-description\">Come to us at one of our locations</div>\n                </div>\n                <div class=\"service-card\" (click)=\"selectMode('HOME_VISIT')\">\n                    <div class=\"service-header\">\n                        <div class=\"service-icon\"><mat-icon>home</mat-icon></div>\n                        <div class=\"service-info\">\n                            <div class=\"service-title\">We come to you</div>\n                        </div>\n                    </div>\n                    <div class=\"service-description\">A professional visits your address</div>\n                </div>\n                <div class=\"service-card\" (click)=\"selectMode('VIDEO_CALL')\">\n                    <div class=\"service-header\">\n                        <div class=\"service-icon\"><mat-icon>videocam</mat-icon></div>\n                        <div class=\"service-info\">\n                            <div class=\"service-title\">Video consultation</div>\n                        </div>\n                    </div>\n                    <div class=\"service-description\">Connect over a video call</div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #serviceListing>\n    <div class=\"w-60 service_section\">\n        <div class=\"service-selection\">\n            <h2>Select a Service</h2>\n            <p>Choose the service(s) you'd like to book<span *ngIf=\"cartServices.length > 0\"> \u2014 {{cartServices.length}} selected</span></p>\n            <p *ngIf=\"productCartItems.length > 0\" class=\"cart-hint\">{{productCartItems.length}} product(s) already in your cart \u2014 you can continue without picking a service.</p>\n\n            <div class=\"services-grid\">\n                <ng-container *ngFor=\"let service of serviceData\">\n                    <div class=\"\" (click)=\"selectService(service)\"\n                        [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\n                        <div class=\" service-header\">\n                            <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\n                            <div class=\"service-info\">\n                                <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\n                            </div>\n                            <div>\n                                <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\n                                    service?.priceDetails?.price : 'N/A' }}</div>\n                                <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"service-description\" *ngIf=\"service?.description\">\n                            {{service?.description ? service?.description : 'N/A'}}\n                        </div>\n                        <div class=\"home-visit\" *ngIf=\"selectedMode === 'STORE_VISIT' && service?.homeAppointmentAvailable\"><img\n                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\n                            Visit Available</div>\n                    </div>\n                </ng-container>\n                <div class=\"empty-state-mini\" *ngIf=\"serviceData.length === 0\">\n                    <mat-icon>inventory_2</mat-icon>\n                    <h4>No services available</h4>\n                    <p *ngIf=\"selectedMode === 'HOME_VISIT'\">No services are currently available for home visits.</p>\n                    <p *ngIf=\"selectedMode === 'VIDEO_CALL'\">No services are currently available for video calls.</p>\n                    <p *ngIf=\"selectedMode === 'STORE_VISIT'\">This business hasn't added any services yet.</p>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #locationListing>\n    <div class=\"location_section\">\n        <div class=\"header flex-column align-items-start\">\n            <h1>Choose Location</h1>\n            <p>Select where you'd like to receive the service</p>\n        </div>\n\n        <div class=\"location-list\">\n            <ng-container *ngFor=\"let location of locationData\">\n                <div (click)=\"selectLocation(location)\"\n                    [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\n                    <div class=\"location-content\">\n                        <div class=\"location-info\">\n                            <div class=\"location-icon\"><img\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\n                            </div>\n                            <div class=\"location-details\">\n                                <div class=\"d-flex justify-content-between align-items-center\">\n                                    <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\n                                </div>\n                                <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\n                                    {{location?.addressDetails?.state}} {{location?.pincode}}</p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n            <div class=\"empty-state-mini\" *ngIf=\"locationData.length === 0\">\n                <mat-icon>storefront</mat-icon>\n                <h4>No locations available</h4>\n                <p>There's no location available for this service right now.</p>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #staffListing>\n    <div class=\"w-60 overflow-hidden staff-listing\">\n        <div class=\"d-flex w-100 h-100\">\n            <div class=\"w-100\">\n                <div class=\"staff-header mb-3\">\n                    <h1>Select Staff Member</h1>\n                    <p class=\"staff-subtitle mb-0\">Choose your preferred professional, or skip to have us assign the best available one</p>\n                </div>\n\n                <div class=\"search-container mb-4\">\n                    <div class=\"search-input-wrapper d-flex align-items-center\">\n                        <mat-icon class=\"search-icon me-2\">search</mat-icon>\n                        <input type=\"text\" class=\"search-input border-0 flex-grow-1\" placeholder=\"Search staff member by name...\" [(ngModel)]=\"staffSearchQuery\">\n                        <mat-icon class=\"clear-icon cursor-pointer ms-2\" *ngIf=\"staffSearchQuery\" (click)=\"staffSearchQuery = ''\">close</mat-icon>\n                    </div>\n                </div>\n\n                <!-- Pure product-only line: one flat staff list, same as the old single-service flow -->\n                <div class=\"staff-list\" *ngIf=\"cartServices.length === 0\">\n                    <ng-container *ngFor=\"let staff of filteredStaff\">\n                        <div class=\"card rounded-3 p-3\" (click)=\"selectStaffForProductOnlyLine(staff)\"\n                            [ngClass]=\"{ 'staff-card-selected' : staff?.selected, 'staff-card': !staff?.selected }\">\n                            <div class=\"d-flex align-items-center justify-content-between w-100\">\n                                <div class=\"d-flex align-items-center flex-grow-1\">\n                                    <div class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\n                                        {{staff?.staffName.slice(0,2).toUpperCase()}}\n                                    </div>\n                                    <div class=\"staff-details flex-grow-1\">\n                                        <h3 class=\"staff-name\">{{(staff?.staffName ? staff?.staffName : 'N/A') | titlecase}}</h3>\n                                        <p class=\"staff-specialty\">{{(businessName && businessName !== 'N/A') ? businessName : 'Booking Specialist'}}</p>\n                                    </div>\n                                </div>\n                                <div class=\"selection-indicator\">\n                                    <div class=\"checkmark-circle-mini d-flex align-items-center justify-content-center\" [class.selected]=\"staff?.selected\">\n                                        <mat-icon *ngIf=\"staff?.selected\">check</mat-icon>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <div class=\"empty-state-mini\" *ngIf=\"filteredStaff.length === 0\">\n                        <mat-icon>badge</mat-icon>\n                        <h4>No staff available</h4>\n                        <p>There's no staff member available for this service right now.</p>\n                    </div>\n                </div>\n\n                <!-- Bundled cart: one pool per line that resolution couldn't collapse to a single provider -->\n                <ng-container *ngIf=\"cartServices.length > 0\">\n                    <div class=\"staff-line-group mb-4\" *ngFor=\"let line of resolvedLines\">\n                        <ng-container *ngIf=\"line.candidateStaffPool?.length\">\n                            <h4 class=\"mb-2\">For {{line.services.length}} service(s): {{ (line.services | slice:0:3).length ? '' : '' }}<span *ngFor=\"let s of line.services; let last = last\">{{s.name}}{{last ? '' : ', '}}</span></h4>\n                            <div class=\"staff-list mb-3\">\n                                <ng-container *ngFor=\"let staff of line.candidateStaffPool\">\n                                    <div class=\"card rounded-3 p-3\" (click)=\"selectStaffForLine(line, staff)\"\n                                        [ngClass]=\"{ 'staff-card-selected' : line.selectedStaffId === staff.id, 'staff-card': line.selectedStaffId !== staff.id }\">\n                                        <div class=\"d-flex align-items-center justify-content-between w-100\">\n                                            <div class=\"d-flex align-items-center flex-grow-1\">\n                                                <div class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\n                                                    {{staff?.name?.slice(0,2)?.toUpperCase()}}\n                                                </div>\n                                                <div class=\"staff-details flex-grow-1\">\n                                                    <h3 class=\"staff-name\">{{(staff?.name ? staff?.name : 'N/A') | titlecase}}</h3>\n                                                </div>\n                                            </div>\n                                            <div class=\"selection-indicator\">\n                                                <div class=\"checkmark-circle-mini d-flex align-items-center justify-content-center\" [class.selected]=\"line.selectedStaffId === staff.id\">\n                                                    <mat-icon *ngIf=\"line.selectedStaffId === staff.id\">check</mat-icon>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                        <div class=\"empty-state-mini\" *ngIf=\"!line.candidateStaffPool?.length\">\n                            <mat-icon>badge</mat-icon>\n                            <h4>No staff available</h4>\n                            <p>No staff member is available for {{line.services.length}} service(s) in this line.</p>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dateSelection>\n    <div class=\"w-60 date_section\">\n        <div class=\"row justify-content-center h-100\">\n            <div class=\"col-12 h-100\">\n                <div class=\"datetime-header mb-2\">\n                    <h1>Select Date & Time</h1>\n                    <p class=\"datetime-subtitle mb-0\">Choose when you'd like your appointment</p>\n                </div>\n\n                <div class=\"d-flex gap-4 main_container\">\n                    <div [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\n                        <div class=\"section-card card rounded-3 p-4 h-100\">\n                            <h3 class=\"section-title\">Select Date</h3>\n\n                            <div class=\"date-picker-container d-flex align-items-center justify-content-between\"\n                                (click)=\"$event.stopPropagation()\">\n                                <input type=\"text\" class=\"date-input border-0 rounded-2\" placeholder=\"dd-mm-yyyy\"\n                                    [value]=\"selectedDateStr\" readonly (click)=\"toggleCalendar($event)\">\n\n                                <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\n                            </div>\n                            <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\n                                <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\n                                    <mat-calendar [(selected)]=\"selectedDate\" [dateFilter]=\"dateFilter\"\n                                        (selectedChange)=\"onDateSelected($event)\" class=\"datepicker-calendar\">\n                                    </mat-calendar>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- One slot-picker per resolved line, side by side when there's more than one (design doc \u00A73b) -->\n                    <div class=\"time_selection\" [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\" *ngIf=\"resolvedLines.length <= 1\">\n                        <div class=\"section-card card h-100 rounded-3 p-4\">\n                            <h3 class=\"section-title\">Available Times</h3>\n                            <div class=\"row g-2 mb-4 overflow-scroll\">\n                                <ng-container *ngIf=\"!skeletonLoader && resolvedLines[0]\">\n                                    <div class=\"col-4\" *ngFor=\"let time of resolvedLines[0].slots\">\n                                        <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\n                                            (click)=\"selectSlotForLine(resolvedLines[0], time)\">{{time ? time?.value : 'N/A'}}</div>\n                                    </div>\n                                    <p class=\"mb-0\" *ngIf=\"resolvedLines[0].slots.length === 0\">No slots available for this date.</p>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Multi-line case: each line gets its own full-width card with a staff header -->\n                <div class=\"d-flex gap-4 main_container flex-wrap\" *ngIf=\"resolvedLines.length > 1\">\n                    <div class=\"w-100\" *ngFor=\"let line of resolvedLines\">\n                        <div class=\"section-card card rounded-3 p-4\">\n                            <h3 class=\"section-title\">Professional: {{line.staffName || line.selectedStaffName || 'To be assigned'}}</h3>\n                            <p class=\"mb-2\" *ngIf=\"line.services.length\"><span *ngFor=\"let s of line.services; let last = last\">{{s.name}}{{last ? '' : ', '}}</span></p>\n                            <div class=\"row g-2 mb-2 overflow-scroll\">\n                                <ng-container *ngIf=\"!line.slotsLoading\">\n                                    <div class=\"col-4\" *ngFor=\"let time of line.slots\">\n                                        <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\n                                            (click)=\"selectSlotForLine(line, time)\">{{time ? time?.value : 'N/A'}}</div>\n                                    </div>\n                                    <p class=\"mb-0\" *ngIf=\"line.slots.length === 0\">No slots available for this date.</p>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #contactDetails>\n    <div class=\"w-60 contact_section\">\n        <div class=\"contact-header mb-2\">\n            <h1>Contact Details</h1>\n            <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\n        </div>\n\n        <div class=\"d-flex gap-3 details_container flex-column w-100\">\n            <div class=\"d-flex gap-4\">\n                <div [ngClass]=\"{'w-50' : selectedMode === 'HOME_VISIT', 'w-100' : selectedMode !== 'HOME_VISIT'}\">\n                    <div class=\"form-section card rounded-3 p-4 h-100\">\n                        <h3 class=\"section-title\">Personal Information</h3>\n\n                        <div class=\"mb-4\">\n                            <label class=\"form-label d-flex align-items-center\">\n                                Full Name\n                                <span class=\"required-asterisk\">*</span>\n                            </label>\n                            <input type=\"text\" class=\"form-control form-input rounded-2\"\n                                [(ngModel)]=\"appointmentPayload.customerDetail.name\"\n                                (ngModelChange)=\"checkRequiredValues()\" simpoLettersOnly>\n                        </div>\n\n                        <div class=\"mb-4\">\n                            <label class=\"form-label d-flex align-items-center\">\n                                Email Address\n                                <span class=\"required-asterisk\">*</span>\n                            </label>\n                            <input type=\"email\" class=\"form-control form-input rounded-2\"\n                                [(ngModel)]=\"appointmentPayload.customerDetail.email\"\n                                (ngModelChange)=\"checkRequiredValues()\"\n                                pattern=\"^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$\" #emailField=\"ngModel\"\n                                name=\"email\" required>\n                        </div>\n\n                        <div class=\"mb-0\">\n                            <label class=\"form-label d-flex align-items-center\">\n                                Phone Number\n                                <span class=\"required-asterisk\">*</span>\n                            </label>\n                            <input type=\"tel\" class=\"form-control  rounded-2\"\n                                [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\n                                (ngModelChange)=\"checkRequiredValues()\" simpoNumbersOnly\n                                [ngClass]=\"{'mobile_number' : appointmentPayload.customerDetail.phoneNumber.length != 10}\">\n                        </div>\n                    </div>\n                </div>\n                <!-- Home Visit address. Customer context: same saved-address flow as\n                     checkout/BookAppointmentComponent. Admin context (isAdminBooking): no\n                     logged-in customer account to read a saved address book from, so staff type\n                     the address manually instead. -->\n                <div class=\"w-50\" *ngIf=\"selectedMode === 'HOME_VISIT'\">\n                    <div class=\"form-section card rounded-3 p-4 h-100\">\n                        <h3 class=\"section-title\">Home Visit Details</h3>\n\n                        <ng-container *ngIf=\"!isAdminBooking; else manualHomeVisitAddress\">\n                            <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n                                <div class=\"address-info\">\n                                    <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n                                    <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n                                        {{defaultAddress?.stateName}}</div>\n                                    <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n                                </div>\n                            </div>\n                            <button type=\"button\" class=\"change-address-btn w-100\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">\n                                CHANGE OR ADD ADDRESS\n                            </button>\n\n                            <div class=\"addLinks\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n                                <mat-icon>add</mat-icon>\n                                <span class=\"ms-2\">Add an address</span>\n                            </div>\n                        </ng-container>\n\n                        <ng-template #manualHomeVisitAddress>\n                            <div class=\"mb-3\">\n                                <label class=\"form-label d-flex align-items-center\">Receiver Name</label>\n                                <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.receiverName\" (ngModelChange)=\"checkRequiredValues()\">\n                            </div>\n                            <div class=\"mb-3\">\n                                <label class=\"form-label d-flex align-items-center\">Receiver Phone</label>\n                                <input type=\"tel\" class=\"form-control form-input rounded-2\" simpoNumbersOnly [(ngModel)]=\"homeVisitAddress.receiverPhone\" (ngModelChange)=\"checkRequiredValues()\">\n                            </div>\n                            <div class=\"mb-3\">\n                                <label class=\"form-label d-flex align-items-center\">Address Line 1</label>\n                                <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.addressLine1\" (ngModelChange)=\"checkRequiredValues()\">\n                            </div>\n                            <div class=\"mb-3\">\n                                <label class=\"form-label d-flex align-items-center\">Address Line 2 (optional)</label>\n                                <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.addressLine2\">\n                            </div>\n                            <div class=\"d-flex gap-2 mb-3\">\n                                <div class=\"w-50\">\n                                    <label class=\"form-label d-flex align-items-center\">City</label>\n                                    <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.city\" (ngModelChange)=\"checkRequiredValues()\">\n                                </div>\n                                <div class=\"w-50\">\n                                    <label class=\"form-label d-flex align-items-center\">State</label>\n                                    <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.state\">\n                                </div>\n                            </div>\n                            <div class=\"mb-3\">\n                                <label class=\"form-label d-flex align-items-center\">Pincode</label>\n                                <input type=\"text\" class=\"form-control form-input rounded-2\" simpoNumbersOnly [(ngModel)]=\"homeVisitAddress.zipCode\" (ngModelChange)=\"checkRequiredValues()\">\n                            </div>\n                        </ng-template>\n\n                        <div class=\"mb-0 mt-3\">\n                            <label class=\"form-label d-flex align-items-center\">Special Instructions</label>\n                            <textarea class=\"form-control form-textarea rounded-2\"\n                                placeholder=\"Any special instructions for the professional (optional)\"\n                                [(ngModel)]=\"instructions\"></textarea>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"policies-container\"\n                *ngIf=\"cartServices[0]?.cancellationPolicy?.length > 0 || cartServices[0]?.reschedulePolicy?.length\">\n                <h2 class=\"policies-title\">Policies & Terms</h2>\n\n                <div class=\"policy-items-container d-flex flex-column gap-3\">\n                    <div class=\"policy-item d-flex justify-content-between align-items-center\"\n                        (click)=\"showCancellationPolicy = !showCancellationPolicy\">\n                        <h3 class=\"policy-title\">Cancellation Policy</h3>\n                        <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\n                                *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\n                            <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\n                        </div>\n                    </div>\n                    <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\n                        *ngIf=\"showCancellationPolicy\">\n                        <span *ngFor=\"let policy of cartServices[0]?.cancellationPolicy\">&#8226;\n                            {{policy}}</span>\n                    </div>\n\n                    <div class=\"policy-item d-flex justify-content-between align-items-center\"\n                        (click)=\"showReducingPolicy = !showReducingPolicy\">\n                        <h3 class=\"policy-title\">Rescheduling Policy</h3>\n                        <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\n                                *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\n                            <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\n                        </div>\n                    </div>\n                    <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\n                        *ngIf=\"showReducingPolicy\">\n                        <span *ngFor=\"let policy of cartServices[0]?.reschedulePolicy\">&#8226; {{policy}}</span>\n                    </div>\n                </div>\n\n                <div class=\"acceptance-section\">\n                    <input type=\"checkbox\" class=\"custom-checkbox\" [(ngModel)]=\"termsAndConditions\"\n                        (ngModelChange)=\"checkRequiredValues()\">\n                    <p class=\"acceptance-text\" style=\"margin-bottom:0px !important\">\n                        I understand and accept the cancellation & rescheduling policies.\n                    </p>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #paymentTab>\n    <div class=\"w-60 payment_section\">\n        <div class=\"w-100 h-100\">\n            <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\n                <div class=\"payment-header mb-3 w-100\">\n                    <h1 style=\"font-size:24px;font-weight: 600;\">Booking Summary</h1>\n                    <p class=\"payment-subtitle mb-0\">Review your booking before confirming</p>\n                </div>\n\n                <div class=\"booking-summary-card\" [ngClass]=\"{'w-100' : screenWidth < 475,'w-50':screenWidth > 475}\">\n                    <div *ngFor=\"let line of resolvedLines; let i = index\">\n                        <h2 class=\"summary-title\" *ngIf=\"resolvedLines.length > 1\">Line {{i + 1}}</h2>\n                        <div class=\"summary-row\" *ngFor=\"let s of line.services\">\n                            <div class=\"summary-label\">{{s.name}}</div>\n                            <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{servicePrice(s.id)}}</div>\n                        </div>\n                        <div class=\"summary-row\" *ngIf=\"line.staffName || line.selectedStaffName\">\n                            <div class=\"summary-label\">Professional</div>\n                            <div class=\"summary-value\">{{line.staffName || line.selectedStaffName}}</div>\n                        </div>\n                        <div class=\"summary-row\" *ngIf=\"selectedMode === 'STORE_VISIT'\">\n                            <div class=\"summary-label\">Location</div>\n                            <div class=\"summary-value\">{{selectedLocation?.storeName ?? 'N/A'}}</div>\n                        </div>\n                        <div class=\"summary-row\">\n                            <div class=\"summary-label\">Date & Time</div>\n                            <div class=\"summary-value\">{{selectedDateStr}} at {{line.selectedSlot?.value ?? 'N/A'}}</div>\n                        </div>\n                    </div>\n\n                    <div *ngIf=\"productCartItems.length > 0\">\n                        <h2 class=\"summary-title\">Products</h2>\n                        <div class=\"summary-row\" *ngFor=\"let p of productCartItems\">\n                            <div class=\"summary-label\">{{p.itemName}} x{{p.quantity}}</div>\n                            <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{(p.sellingPrice ?? p.price ?? 0) * (p.quantity ?? 1)}}</div>\n                        </div>\n                    </div>\n\n                    <h2 class=\"summary-title\">Payment</h2>\n                    <div class=\"summary-row\" *ngIf=\"homeVisitCharge > 0\">\n                        <div class=\"summary-label\">Home visit charge</div>\n                        <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{homeVisitCharge}}</div>\n                    </div>\n                    <div class=\"summary-row\">\n                        <div class=\"summary-label\">Total</div>\n                        <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{reviewTotal}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #statusTemplate>\n    <div class=\"booking-confirmation\">\n        <div class=\"success-icon\">\n            <div class=\"checkmark-circle\">\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\n                    class=\"w-100 h-100\" *ngIf=\"apiStatus\">\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\n                    class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\n            </div>\n        </div>\n\n        <div class=\"confirmation-content\">\n            <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\n            <p class=\"confirmation-message\">\n                {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\n                try again later'}}\n            </p>\n\n            <!-- Video Call link, when already present on the confirmed group (a paid Video Call's\n                 link only appears once payment verification completes, handled elsewhere - see\n                 verify-payment.component.ts, not this screen). -->\n            <div class=\"video-call-link-card d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus && selectedMode === 'VIDEO_CALL' && bookingGroup?.videoCallLink\">\n                <div class=\"details-card\">\n                    <h3 class=\"details-title\">Your Video Call Link</h3>\n                    <a [href]=\"bookingGroup.videoCallLink\" target=\"_blank\">{{bookingGroup.videoCallLink}}</a>\n                </div>\n            </div>\n\n            <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n                <div class=\"details-card\">\n                    <h3 class=\"details-title\">Appointment Details</h3>\n                    <div class=\"details-row\" *ngFor=\"let line of resolvedLines\">\n                        <span class=\"detail-label\">{{line.services.length ? (line.services[0].name) : 'Products'}}</span>\n                        <span class=\"detail-value\">{{selectedDateStr}} at {{line.selectedSlot?.value ?? 'N/A'}}</span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n                <div class=\"details-card\">\n                    <h3 class=\"details-title\">Payment</h3>\n                    <div class=\"details-row\" *ngIf=\"bookingGroup?.homeVisitCharge > 0\">\n                        <span class=\"detail-label\">Home visit charge</span>\n                        <span class=\"detail-value\">\u20B9{{bookingGroup.homeVisitCharge}}</span>\n                    </div>\n                    <div class=\"details-row\">\n                        <span class=\"detail-label\">Total</span>\n                        <span class=\"detail-value\">\u20B9{{bookingTotal}}</span>\n                    </div>\n                    <div class=\"details-row\">\n                        <span class=\"detail-label\">Paid</span>\n                        <span class=\"detail-value\">\u20B9{{bookingPaid}}</span>\n                    </div>\n                    <div class=\"details-row\" *ngIf=\"bookingDue > 0\">\n                        <span class=\"detail-label\">Due</span>\n                        <span class=\"detail-value\">\u20B9{{bookingDue}}</span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"done-actions d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n                <ng-container *ngIf=\"!isAdminContext; else adminDoneActions\">\n                    <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToMyBookings()\">View my bookings</button>\n                    <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"goToListing()\">Keep shopping</button>\n                </ng-container>\n                <ng-template #adminDoneActions>\n                    <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToAppointmentsList()\">Back to Appointments List</button>\n                    <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"bookAnother()\">Book Another</button>\n                </ng-template>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap\";mat-icon{font-family:Material Icons!important}:host{--font-sans: \"Outfit\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a;--color-primary: #230860;--color-secondary: #00b6ff;--color-accent-gradient: linear-gradient(135deg, #230860 0%, #00b6ff 100%);--color-success: #10b981;--color-success-bg: #ecfdf5;--color-error: #ef4444;--color-error-bg: #fef2f2;--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 16px;--border-radius-xl: 24px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px -3px rgba(35, 8, 96, .05), 0 4px 6px -4px rgba(35, 8, 96, .05);--shadow-xl: 0 20px 25px -5px rgba(35, 8, 96, .08), 0 8px 10px -6px rgba(35, 8, 96, .08);--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: all .4s cubic-bezier(.175, .885, .32, 1.275)}*{box-sizing:border-box;font-family:var(--font-sans)}.main_section{position:relative;height:100vh;background-color:var(--slate-50);display:flex;flex-direction:column;overflow:hidden}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.main_header{padding:15px;background:#fff;border-bottom:1px solid var(--slate-100);flex-shrink:0;box-shadow:0 2px 8px #00000003}.header{display:flex;align-items:center;justify-content:space-between}.back-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:var(--border-radius-md);background:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-700)!important;transition:var(--transition-smooth);font-weight:500;font-size:.9rem;cursor:pointer}.back-btn mat-icon{font-size:18px!important;width:18px!important;height:18px!important;color:var(--slate-700)!important;display:flex;align-items:center;justify-content:center}.back-btn:hover{background:var(--slate-100);transform:translate(-3px);color:var(--slate-900)!important}.header-title{flex-grow:1;text-align:right}.header-title h1{font-size:1.5rem;font-weight:700;margin-bottom:.2rem;color:var(--slate-900)!important;letter-spacing:-.025em}.header-title p{color:var(--slate-500)!important;font-size:.9rem;font-weight:500;margin-bottom:0}.progress-bar{width:100%;height:6px;background-color:var(--slate-100);margin-top:3px;border-radius:10px;overflow:hidden;position:relative}.progress-fill{height:100%;background:var(--color-accent-gradient);border-radius:10px;transition:width .5s cubic-bezier(.4,0,.2,1);position:relative}.progress-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#fff0,#ffffff4d,#fff0);animation:shimmer 2s infinite linear}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.main_body{flex-grow:1;overflow-y:auto;padding:10px;display:flex;justify-content:center;background:var(--slate-50)}.w-60{width:100%;max-width:800px}.service_section,.location_section,.staff-listing,.date_section,.contact_section,.payment_section,.booking-confirmation{animation:slideUp .5s cubic-bezier(.16,1,.3,1) forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}h2{font-size:1.5rem;font-weight:700;color:var(--slate-900)!important;letter-spacing:-.02em;margin-bottom:.3rem}p.subtitle,.service-selection p,.location_section p,.staff-subtitle,.datetime-subtitle,.contact-subtitle,.payment-subtitle{color:var(--slate-500)!important;font-size:13px;margin-bottom:2rem}.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding-bottom:2rem}.service-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px}.service-card:hover{border-color:var(--slate-400);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.service-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px;transform:translateY(-2px)}.service-card-selected:before,.location-card-selected:before{content:\"\\2713\";position:absolute;top:-10px;right:-10px;background:var(--color-accent-gradient);color:#fff!important;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;box-shadow:0 4px 8px #2308604d;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275);z-index:10}@keyframes popIn{0%{transform:scale(0)}to{transform:scale(1)}}.service-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}.service-icon{width:48px;height:48px;border-radius:var(--border-radius-md);background-color:var(--slate-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.service-icon mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:var(--color-primary)!important}.service-card-selected .service-icon{background:var(--slate-900)}.service-card-selected .service-icon mat-icon{color:#fff!important}.service-info{flex-grow:1}.service-title{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;line-height:1.3;margin-bottom:.2rem}.service-price{font-size:1.25rem;font-weight:800;color:var(--slate-900)!important;text-align:right}.service-duration{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;text-align:right;margin-top:.1rem}.service-description{color:var(--slate-600)!important;font-size:.9rem;line-height:1.5;margin-bottom:1.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home-visit{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--slate-700)!important;border:1px solid var(--slate-200);padding:.35rem .75rem;border-radius:20px;background-color:var(--slate-50);transition:var(--transition-smooth)}.home-visit img{width:14px;height:14px}.home-visit:before{content:\"\";display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--color-success);box-shadow:0 0 #10b98166;animation:pulseGlow 1.8s infinite}@keyframes pulseGlow{0%{box-shadow:0 0 #10b981b3}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.location-list{display:flex;flex-direction:column;gap:1.25rem;padding-bottom:2rem}.location-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm)}.location-card:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md)}.location-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px)}.location-content{display:flex;align-items:center}.location-info{display:flex;align-items:center;gap:1.25rem;width:100%}.location-icon{width:52px;height:52px;background-color:var(--slate-100);border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.location-icon img{width:28px;height:28px}.location-card-selected .location-icon{background:var(--slate-900)}.location-details{flex-grow:1}.location-details h3{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.3rem}.location-details p{font-size:.9rem;color:var(--slate-500)!important;font-weight:450;line-height:1.4;margin-bottom:0}.search-container{width:100%;margin-bottom:1.25rem}.search-input-wrapper{width:100%;background-color:var(--slate-100);border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;transition:var(--transition-smooth)}.search-input-wrapper:focus-within{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #23086014}.search-input{font-size:.95rem;font-weight:500;color:var(--slate-900)!important;background:transparent;outline:none;width:100%}.search-input::placeholder{color:var(--slate-400)}.search-icon{color:var(--slate-400)!important;font-size:20px!important;width:20px!important;height:20px!important}.clear-icon{color:var(--slate-400)!important;font-size:18px!important;width:18px!important;height:18px!important;transition:var(--transition-smooth)}.clear-icon:hover{color:var(--slate-600)!important}.staff-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;max-height:48vh;overflow-y:auto;padding-right:.5rem;padding-bottom:1rem}.staff-list::-webkit-scrollbar{width:6px}.staff-list::-webkit-scrollbar-track{background:var(--slate-50);border-radius:4px}.staff-list::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:4px}.staff-list::-webkit-scrollbar-thumb:hover{background:var(--slate-300)}.staff-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);margin-bottom:0!important}.staff-card:hover{border-color:var(--slate-300);transform:translateY(-2px);box-shadow:var(--shadow-md)}.staff-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px);margin-bottom:0!important}.staff-avatar{width:48px;height:48px;background:var(--color-accent-gradient);font-size:.95rem;font-weight:700;color:#fff!important;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px #2308601a;letter-spacing:.5px;transition:var(--transition-smooth)}.staff-card-selected .staff-avatar{transform:scale(1.05)}.staff-name{font-size:1.05rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.2rem;letter-spacing:-.015em}.staff-specialty{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;margin-bottom:0;text-transform:uppercase;letter-spacing:.05em}.selection-indicator{display:flex;align-items:center;justify-content:center;margin-left:auto;padding-left:1rem}.checkmark-circle-mini{width:24px;height:24px;border:2px solid var(--slate-300);border-radius:50%;background-color:#fff;transition:var(--transition-bounce);color:#fff!important}.checkmark-circle-mini.selected{background:var(--color-accent-gradient);border-color:transparent;box-shadow:0 3px 8px #23086040}.checkmark-circle-mini mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#fff!important;font-weight:800!important;display:flex;align-items:center;justify-content:center}.main_container{display:flex;gap:2rem;margin-bottom:2rem}.section-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm);height:100%}.section-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:10px!important;letter-spacing:-.01em}.date-picker-container{border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;display:flex;align-items:center;justify-content:space-between;transition:var(--transition-smooth);background-color:var(--slate-50);cursor:pointer}.date-picker-container:hover{border-color:var(--slate-400);background-color:#fff}.date-input{font-size:.95rem;font-weight:600;color:var(--slate-800)!important;background:transparent;border:none;outline:none;cursor:pointer;width:100%}.date-picker-container mat-icon{color:var(--color-primary)!important;font-size:20px!important;width:20px!important;height:20px!important}.datepicker-popover{position:absolute;z-index:1000;margin-top:4px;border-radius:var(--border-radius-lg);overflow:hidden;box-shadow:var(--shadow-xl);background:#fff;border:1px solid var(--slate-200);width:320px}::ng-deep .datepicker-calendar{border-radius:var(--border-radius-lg)!important;width:100%!important}::ng-deep .mat-calendar-header{background:var(--color-accent-gradient)!important;color:#fff!important;padding:.5rem!important}::ng-deep .mat-calendar-content{padding:8px!important}::ng-deep .mat-calendar-controls{margin:0!important}::ng-deep .mat-calendar-period-button{color:#fff!important;font-weight:700!important;font-size:1rem!important}::ng-deep .mat-calendar-arrow{fill:#fff!important}::ng-deep .mat-calendar-previous-button,::ng-deep .mat-calendar-next-button{color:#fff!important}::ng-deep .mat-calendar-body-cell{font-size:13px!important}::ng-deep .mat-calendar-body-cell-content{font-weight:600!important;color:var(--slate-800)!important;border-radius:8px!important}::ng-deep .mat-calendar-body-selected{background:var(--color-accent-gradient)!important;color:#fff!important;box-shadow:0 4px 10px #23086033!important}::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected){border:2px solid var(--color-primary)!important;color:var(--color-primary)!important}.time_selection{max-height:420px;display:flex;flex-direction:column}.time_selection .row{flex-grow:1;overflow-y:auto;padding-right:.25rem;margin-top:10px}.time-slot{background:#fff;border:1px solid var(--slate-200);font-size:.9rem;font-weight:600;color:var(--slate-800)!important;padding:.75rem .5rem;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);text-align:center;box-shadow:var(--shadow-sm)}.time-slot:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md);background-color:var(--slate-50)}.time-slot.selected{background:var(--color-accent-gradient);border-color:transparent;color:#fff!important;box-shadow:0 4px 12px #23086033}.form-section{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm)}.form-label{font-size:.85rem;font-weight:600;color:var(--slate-700)!important;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.required-asterisk{color:var(--color-error);margin-left:2px}.form-control,.form-input,.form-textarea{width:100%;background-color:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-900)!important;font-size:.95rem;font-weight:500;padding:.75rem 1rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);outline:none}.form-control:focus,.form-input:focus,.form-textarea:focus{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #2308601a}.form-textarea{min-height:100px;resize:vertical}.policies-container{background-color:#fff;border:1px solid var(--slate-200);padding:1.75rem;border-radius:var(--border-radius-lg);margin-top:1.5rem;box-shadow:var(--shadow-sm)}.policies-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1.25rem}.policy-item{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1rem 1.25rem;cursor:pointer;transition:var(--transition-smooth);display:flex;justify-content:space-between;align-items:center}.policy-item:hover{background-color:var(--slate-100);border-color:var(--slate-300)}.policy-title{font-size:.95rem;font-weight:600;color:var(--slate-800)!important}.policy-arrow mat-icon{color:var(--slate-500)!important;transition:var(--transition-smooth)}.cancellation_policies{background-color:var(--slate-50);padding:1rem 1.5rem;border-left:3px solid var(--color-primary);border-radius:0 0 var(--border-radius-md) var(--border-radius-md);margin-top:-4px;margin-bottom:1rem;font-size:.9rem;color:var(--slate-600)!important;line-height:1.5}.acceptance-section{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem}.custom-checkbox{width:20px;height:20px;border:2px solid var(--slate-300);border-radius:6px;cursor:pointer;transition:var(--transition-smooth);position:relative;appearance:none;background-color:#fff;outline:none}.custom-checkbox:checked{background:var(--color-accent-gradient);border-color:transparent}.custom-checkbox:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff!important;font-size:.75rem;font-weight:800}.acceptance-text{font-size:.95rem;color:var(--slate-700)!important;font-weight:500;-webkit-user-select:none;user-select:none;line-height:1.4}.booking-summary-card{background-color:#fff;border:1px solid var(--slate-200);padding:2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);position:relative}.booking-summary-card:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:10px;background-image:radial-gradient(circle,white 4px,transparent 5px);background-size:12px 12px;background-position:0 0;z-index:2}.summary-title{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important;border-bottom:2px dashed var(--slate-200);padding-bottom:1rem;margin-bottom:1.5rem;text-align:center}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--slate-100)}.summary-label{font-size:.95rem;color:var(--slate-500)!important;font-weight:500}.summary-value{font-size:.95rem;color:var(--slate-900)!important;font-weight:600;text-align:right}.total-row{margin-top:1rem;padding-top:1.25rem;border-top:2px dashed var(--slate-200);border-bottom:none}.total-row .summary-label{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important}.total-row .summary-value{font-size:1.5rem;font-weight:800;color:var(--color-primary)!important}.booking-confirmation{background:#fff;border:1px solid var(--slate-200);padding:3rem 2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;text-align:center;max-width:500px;margin:0 auto}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:96px;height:96px;display:flex;align-items:center;justify-content:center}.confirmation-title{font-size:1.5rem;font-weight:800;color:var(--slate-900)!important;margin-bottom:.5rem}.confirmation-message{font-size:1rem;color:var(--slate-500)!important;line-height:1.6;margin-bottom:2rem;font-weight:450}.details-card{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1.5rem;width:100%;margin-bottom:2rem;text-align:left}.details-title{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}.details-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed var(--slate-200)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.85rem;color:var(--slate-500)!important;font-weight:500}.detail-value{font-size:.9rem;color:var(--slate-900)!important;font-weight:600}.main_footer{border-top:1px solid var(--slate-200);background-color:#fff;padding:15px;flex-shrink:0;display:flex;justify-content:center;box-shadow:0 -4px 12px #00000005}.footer-buttons{width:100%;max-width:800px;display:flex;align-items:center}.back-footer-btn{font-size:.95rem;font-weight:600;color:var(--slate-600)!important;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);cursor:pointer}.back-footer-btn:hover{color:var(--slate-900)!important;background-color:var(--slate-100)}.continue-btn{background:var(--color-accent-gradient);color:#fff!important;border:none;padding:.75rem 2rem;border-radius:var(--border-radius-md);font-size:.95rem!important;font-weight:600;cursor:pointer;transition:var(--transition-smooth);box-shadow:0 4px 10px #23086033;width:max-content!important}.continue-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.continue-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.complete_booking,.pay-now-btn{background:var(--color-accent-gradient)!important;color:#fff!important;border:none;padding:.75rem 2.25rem!important;font-size:.95rem!important;font-weight:600;border-radius:var(--border-radius-md)!important;box-shadow:0 4px 12px #23086040;transition:var(--transition-smooth);cursor:pointer;display:flex;align-items:center;gap:.5rem;width:max-content!important}.complete_booking img,.pay-now-btn img{width:20px;height:20px;filter:brightness(0) invert(1)}.complete_booking:hover:not([disabled]),.pay-now-btn:hover:not([disabled]){transform:translateY(-2px);box-shadow:0 6px 18px #23086059}.complete_booking:disabled,.pay-now-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed;box-shadow:none}.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding:0;width:100%}.skeleton-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;height:180px;display:flex;flex-direction:column;justify-content:space-between}.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border-radius:4px}@keyframes loading-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:48px;height:48px;border-radius:var(--border-radius-md)}.skeleton-title{height:20px;width:60%;margin-bottom:.5rem}.skeleton-price{height:20px;width:30%}.skeleton-duration{height:12px;width:25%;margin-top:.25rem}.skeleton-description{height:14px;width:85%}.skeleton-badge{height:28px;width:120px;border-radius:20px}.time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;width:100%}.skeleton-time-slot{height:42px;border-radius:var(--border-radius-md);background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border:1px solid var(--slate-100)}@media screen and (max-width: 475px){.main_header{padding:1rem}.header-title h1{font-size:1.25rem}.back-btn{padding:.5rem .8rem}.back-btn span{display:none}.main_body{padding:15px}.services-grid{grid-template-columns:1fr;gap:1rem}.staff-list{grid-template-columns:1fr!important;gap:.85rem!important}.service-card,.service-card-selected{min-height:auto}.main_container{flex-direction:column;gap:1.5rem}.datepicker-popover{width:100%;left:0}.details_container{gap:1.5rem}.details_container>.d-flex{flex-direction:column;gap:1.5rem}.details_container>.d-flex>div{width:100%!important}.booking-summary-card{padding:1.25rem}.summary-title{font-size:1.15rem}.total-row .summary-label{font-size:1.1rem}.total-row .summary-value{font-size:1.3rem}.main_footer{padding:1rem}.continue-btn{padding:.75rem 1.5rem}}.shipping-info{border-radius:10px;padding:20px;margin-bottom:12px;border:1px solid var(--slate-200);box-shadow:var(--shadow-sm)}.address-info{margin-bottom:0}.address-name{font-weight:700;margin-bottom:8px;color:var(--slate-900)!important}.address-details{color:var(--slate-500)!important;margin-bottom:8px}.mobile-number{font-weight:700;color:var(--slate-900)!important;font-size:15px}.change-address-btn{font-size:.85rem!important;font-weight:700!important;padding:10px;background:#fff;border:1px solid var(--slate-200);border-radius:8px;color:var(--slate-900)!important;cursor:pointer;transition:var(--transition-smooth)}.change-address-btn:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.addLinks{padding:14px;border:1px dashed var(--slate-300);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;color:var(--slate-500)!important;margin-bottom:12px}.addLinks:hover{border-color:var(--color-primary);color:var(--color-primary)!important}h1{font-size:24px!important;font-weight:600!important}.done-actions{display:flex;gap:12px;width:100%}.done-btn{flex:1;max-width:220px;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);font-size:.95rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth);border:none}.done-btn-primary{background:var(--color-accent-gradient);color:#fff!important;box-shadow:0 4px 10px #23086033}.done-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.done-btn-secondary{background:#fff;color:var(--slate-600)!important;border:1px solid var(--slate-200)}.empty-state-mini{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:48px 16px;color:var(--slate-500)}.empty-state-mini mat-icon{font-size:32px;height:32px;width:32px;color:var(--slate-300);margin-bottom:4px}.empty-state-mini h4{margin:0;font-size:15px;font-weight:600;color:var(--slate-700)}.empty-state-mini p{margin:0;font-size:13px;color:var(--slate-500)}.done-btn-secondary:hover{background-color:var(--slate-100);color:var(--slate-900)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { 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: i9$2.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: i9.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: i9.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i9.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i9.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: "ngmodule", type: MatDialogModule }, { kind: "directive", type: LettersOnlyDirective, selector: "[simpoLettersOnly]" }, { kind: "directive", type: NumbersOnlyDirective, selector: "[simpoNumbersOnly]" }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { 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"] }] }); }
+    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", isAdminBooking: "isAdminBooking", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor", prefillContact: "prefillContact" }, host: { listeners: { "window: resize": "getScreenSize($event)", "document:click": "closeOnOutsideClick()" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\n<section class=\"main_section\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div class=\"main_header\">\n        <div class=\"header d-flex justify-content-between align-items-center\">\n            <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\n                (click)=\"goBack()\">\n                <mat-icon>keyboard_backspace</mat-icon><span *ngIf=\"screenWidth > 475\">Back to Home</span>\n            </div>\n            <div class=\"header-title\">\n                <h1>Book New Appointment</h1>\n                <p>{{businessName ?? \"N/A\" }}</p>\n            </div>\n        </div>\n\n        <div class=\"progress-bar\">\n            <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\n        </div>\n    </div>\n    <div class=\"main_body w-100 d-flex justify-content-center\">\n        <ng-container *ngIf=\"selectedTab === 'modeSelection'\">\n            <ng-container *ngTemplateOutlet=\"modeSelection\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab === 'serviceListing'\">\n            <ng-container *ngIf=\"!skeletonLoader\">\n                <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab === 'locationListing'\">\n            <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab === 'staffListing'\">\n            <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\n            <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab==='contactDetails'\">\n            <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab==='paymentTab'\">\n            <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\n            <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\n        </ng-container>\n    </div>\n    <div class=\"main_footer d-flex justify-content-center align-items-center\"\n        *ngIf=\"selectedTab!=='statusTemplate' && selectedTab!=='modeSelection'\">\n        <div class=\"footer-buttons\"\n            [ngStyle]=\"{'justify-content': selectedTab != 'serviceListing' ? 'space-between' : 'end'}\">\n            <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\"\n                *ngIf=\"selectedTab != 'serviceListing'\">Back</span>\n            <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\n                *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\n            <button class=\"cursor-pointer d-flex justify-content-evenly align-items-center\"\n                *ngIf=\"selectedTab==='paymentTab'\" (click)=\"confirmBooking()\" [disabled]=\"isProcessing\"\n                [ngClass]=\"{'pay-now-btn' : bookingGroup?.totalCollectedAtBooking > 0 || !bookingGroup,'complete_booking' : bookingGroup && !bookingGroup?.totalCollectedAtBooking}\">\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\n                {{isProcessing ? 'Please wait...' : 'Confirm Booking'}}\n            </button>\n        </div>\n    </div>\n</section>\n\n<ng-template #modeSelection>\n    <div class=\"w-60 service_section\">\n        <div class=\"service-selection\">\n            <h2>How would you like this?</h2>\n            <p>Choose how you'd like to be served</p>\n            <div class=\"services-grid\">\n                <div class=\"service-card\" (click)=\"selectMode('STORE_VISIT')\">\n                    <div class=\"service-header\">\n                        <div class=\"service-icon\"><mat-icon>storefront</mat-icon></div>\n                        <div class=\"service-info\">\n                            <div class=\"service-title\">Visit our Store</div>\n                        </div>\n                    </div>\n                    <div class=\"service-description\">Come to us at one of our locations</div>\n                </div>\n                <div class=\"service-card\" (click)=\"selectMode('HOME_VISIT')\">\n                    <div class=\"service-header\">\n                        <div class=\"service-icon\"><mat-icon>home</mat-icon></div>\n                        <div class=\"service-info\">\n                            <div class=\"service-title\">We come to you</div>\n                        </div>\n                    </div>\n                    <div class=\"service-description\">A professional visits your address</div>\n                </div>\n                <div class=\"service-card\" (click)=\"selectMode('VIDEO_CALL')\">\n                    <div class=\"service-header\">\n                        <div class=\"service-icon\"><mat-icon>videocam</mat-icon></div>\n                        <div class=\"service-info\">\n                            <div class=\"service-title\">Video consultation</div>\n                        </div>\n                    </div>\n                    <div class=\"service-description\">Connect over a video call</div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #serviceListing>\n    <div class=\"w-60 service_section\">\n        <div class=\"service-selection\">\n            <h2>Select a Service</h2>\n            <p>Choose the service(s) you'd like to book<span *ngIf=\"cartServices.length > 0\"> \u2014 {{cartServices.length}} selected</span></p>\n            <p *ngIf=\"productCartItems.length > 0\" class=\"cart-hint\">{{productCartItems.length}} product(s) already in your cart \u2014 you can continue without picking a service.</p>\n\n            <div class=\"services-grid\">\n                <ng-container *ngFor=\"let service of serviceData\">\n                    <div class=\"\" (click)=\"selectService(service)\"\n                        [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\n                        <div class=\" service-header\">\n                            <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\n                            <div class=\"service-info\">\n                                <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\n                            </div>\n                            <div>\n                                <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\n                                    service?.priceDetails?.price : 'N/A' }}</div>\n                                <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"service-description\" *ngIf=\"service?.description\">\n                            {{service?.description ? service?.description : 'N/A'}}\n                        </div>\n                        <div class=\"home-visit\" *ngIf=\"selectedMode === 'STORE_VISIT' && service?.homeAppointmentAvailable\"><img\n                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\n                            Visit Available</div>\n                    </div>\n                </ng-container>\n                <div class=\"empty-state-mini\" *ngIf=\"serviceData.length === 0\">\n                    <mat-icon>inventory_2</mat-icon>\n                    <h4>No services available</h4>\n                    <p *ngIf=\"selectedMode === 'HOME_VISIT'\">No services are currently available for home visits.</p>\n                    <p *ngIf=\"selectedMode === 'VIDEO_CALL'\">No services are currently available for video calls.</p>\n                    <p *ngIf=\"selectedMode === 'STORE_VISIT'\">This business hasn't added any services yet.</p>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #locationListing>\n    <div class=\"location_section\">\n        <div class=\"header flex-column align-items-start\">\n            <h1>Choose Location</h1>\n            <p>Select where you'd like to receive the service</p>\n        </div>\n\n        <div class=\"location-list\">\n            <ng-container *ngFor=\"let location of locationData\">\n                <div (click)=\"selectLocation(location)\"\n                    [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\n                    <div class=\"location-content\">\n                        <div class=\"location-info\">\n                            <div class=\"location-icon\"><img\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\n                            </div>\n                            <div class=\"location-details\">\n                                <div class=\"d-flex justify-content-between align-items-center\">\n                                    <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\n                                </div>\n                                <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\n                                    {{location?.addressDetails?.state}} {{location?.pincode}}</p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n            <div class=\"empty-state-mini\" *ngIf=\"locationData.length === 0\">\n                <mat-icon>storefront</mat-icon>\n                <h4>No locations available</h4>\n                <p>There's no location available for this service right now.</p>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #staffListing>\n    <div class=\"w-60 overflow-hidden staff-listing\">\n        <div class=\"d-flex w-100 h-100\">\n            <div class=\"w-100\">\n                <div class=\"staff-header mb-3\">\n                    <h1>Select Staff Member</h1>\n                    <p class=\"staff-subtitle mb-0\">Choose your preferred professional, or skip to have us assign the best available one</p>\n                </div>\n\n                <div class=\"search-container mb-4\">\n                    <div class=\"search-input-wrapper d-flex align-items-center\">\n                        <mat-icon class=\"search-icon me-2\">search</mat-icon>\n                        <input type=\"text\" class=\"search-input border-0 flex-grow-1\" placeholder=\"Search staff member by name...\" [(ngModel)]=\"staffSearchQuery\">\n                        <mat-icon class=\"clear-icon cursor-pointer ms-2\" *ngIf=\"staffSearchQuery\" (click)=\"staffSearchQuery = ''\">close</mat-icon>\n                    </div>\n                </div>\n\n                <!-- Pure product-only line: one flat staff list, same as the old single-service flow -->\n                <div class=\"staff-list\" *ngIf=\"cartServices.length === 0\">\n                    <ng-container *ngFor=\"let staff of filteredStaff\">\n                        <div class=\"card rounded-3 p-3\" (click)=\"selectStaffForProductOnlyLine(staff)\"\n                            [ngClass]=\"{ 'staff-card-selected' : staff?.selected, 'staff-card': !staff?.selected }\">\n                            <div class=\"d-flex align-items-center justify-content-between w-100\">\n                                <div class=\"d-flex align-items-center flex-grow-1\">\n                                    <div class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\n                                        {{staff?.staffName.slice(0,2).toUpperCase()}}\n                                    </div>\n                                    <div class=\"staff-details flex-grow-1\">\n                                        <h3 class=\"staff-name\">{{(staff?.staffName ? staff?.staffName : 'N/A') | titlecase}}</h3>\n                                        <p class=\"staff-specialty\">{{(businessName && businessName !== 'N/A') ? businessName : 'Booking Specialist'}}</p>\n                                    </div>\n                                </div>\n                                <div class=\"selection-indicator\">\n                                    <div class=\"checkmark-circle-mini d-flex align-items-center justify-content-center\" [class.selected]=\"staff?.selected\">\n                                        <mat-icon *ngIf=\"staff?.selected\">check</mat-icon>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <div class=\"empty-state-mini\" *ngIf=\"filteredStaff.length === 0\">\n                        <mat-icon>badge</mat-icon>\n                        <h4>No staff available</h4>\n                        <p>There's no staff member available for this service right now.</p>\n                    </div>\n                </div>\n\n                <!-- Bundled cart: one pool per line that resolution couldn't collapse to a single provider -->\n                <ng-container *ngIf=\"cartServices.length > 0\">\n                    <div class=\"staff-line-group mb-4\" *ngFor=\"let line of resolvedLines\">\n                        <ng-container *ngIf=\"line.candidateStaffPool?.length\">\n                            <h4 class=\"mb-2\">For {{line.services.length}} service(s): {{ (line.services | slice:0:3).length ? '' : '' }}<span *ngFor=\"let s of line.services; let last = last\">{{s.name}}{{last ? '' : ', '}}</span></h4>\n                            <div class=\"staff-list mb-3\">\n                                <ng-container *ngFor=\"let staff of line.candidateStaffPool\">\n                                    <div class=\"card rounded-3 p-3\" (click)=\"selectStaffForLine(line, staff)\"\n                                        [ngClass]=\"{ 'staff-card-selected' : line.selectedStaffId === staff.id, 'staff-card': line.selectedStaffId !== staff.id }\">\n                                        <div class=\"d-flex align-items-center justify-content-between w-100\">\n                                            <div class=\"d-flex align-items-center flex-grow-1\">\n                                                <div class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\n                                                    {{staff?.name?.slice(0,2)?.toUpperCase()}}\n                                                </div>\n                                                <div class=\"staff-details flex-grow-1\">\n                                                    <h3 class=\"staff-name\">{{(staff?.name ? staff?.name : 'N/A') | titlecase}}</h3>\n                                                </div>\n                                            </div>\n                                            <div class=\"selection-indicator\">\n                                                <div class=\"checkmark-circle-mini d-flex align-items-center justify-content-center\" [class.selected]=\"line.selectedStaffId === staff.id\">\n                                                    <mat-icon *ngIf=\"line.selectedStaffId === staff.id\">check</mat-icon>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                        <div class=\"empty-state-mini\" *ngIf=\"!line.candidateStaffPool?.length\">\n                            <mat-icon>badge</mat-icon>\n                            <h4>No staff available</h4>\n                            <p>No staff member is available for {{line.services.length}} service(s) in this line.</p>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dateSelection>\n    <div class=\"w-60 date_section\">\n        <div class=\"row justify-content-center h-100\">\n            <div class=\"col-12 h-100\">\n                <div class=\"datetime-header mb-2\">\n                    <h1>Select Date & Time</h1>\n                    <p class=\"datetime-subtitle mb-0\" *ngIf=\"!cameFromStaffListing\">Choose when you'd like your appointment</p>\n                    <p class=\"datetime-subtitle mb-0\" *ngIf=\"cameFromStaffListing\">\uD83D\uDCC5 {{selectedDateStr}}</p>\n                </div>\n\n                <div class=\"d-flex gap-4 main_container\">\n                    <div *ngIf=\"!cameFromStaffListing\" [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\n                        <div class=\"section-card card rounded-3 p-4 h-100\">\n                            <h3 class=\"section-title\">Select Date</h3>\n\n                            <div class=\"date-picker-container d-flex align-items-center justify-content-between\"\n                                (click)=\"$event.stopPropagation()\">\n                                <input type=\"text\" class=\"date-input border-0 rounded-2\" placeholder=\"dd-mm-yyyy\"\n                                    [value]=\"selectedDateStr\" readonly (click)=\"toggleCalendar($event)\">\n\n                                <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\n                            </div>\n                            <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\n                                <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\n                                    <mat-calendar [(selected)]=\"selectedDate\" [dateFilter]=\"dateFilter\"\n                                        (selectedChange)=\"onDateSelected($event)\" class=\"datepicker-calendar\">\n                                    </mat-calendar>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- One slot-picker per resolved line, side by side when there's more than one (design doc \u00A73b) -->\n                    <div class=\"time_selection\" [ngClass]=\"{'w-50' : screenWidth > 475 && !cameFromStaffListing, 'w-100':screenWidth < 475 || cameFromStaffListing}\" *ngIf=\"resolvedLines.length <= 1\">\n                        <div class=\"section-card card h-100 rounded-3 p-4\">\n                            <h3 class=\"section-title\">Available Times</h3>\n                            <div class=\"row g-2 mb-4 overflow-scroll\">\n                                <ng-container *ngIf=\"!skeletonLoader && resolvedLines[0]\">\n                                    <div class=\"col-4\" *ngFor=\"let time of resolvedLines[0].slots\">\n                                        <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\n                                            (click)=\"selectSlotForLine(resolvedLines[0], time)\">{{time ? time?.value : 'N/A'}}</div>\n                                    </div>\n                                    <p class=\"mb-0\" *ngIf=\"resolvedLines[0].slots.length === 0\">No slots available for this date.</p>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Multi-line case: each line gets its own full-width card with a staff header -->\n                <div class=\"d-flex gap-4 main_container flex-wrap\" *ngIf=\"resolvedLines.length > 1\">\n                    <div class=\"w-100\" *ngFor=\"let line of resolvedLines\">\n                        <div class=\"section-card card rounded-3 p-4\">\n                            <h3 class=\"section-title\">Professional: {{line.staffName || line.selectedStaffName || 'To be assigned'}}</h3>\n                            <p class=\"mb-2\" *ngIf=\"line.services.length\"><span *ngFor=\"let s of line.services; let last = last\">{{s.name}}{{last ? '' : ', '}}</span></p>\n                            <div class=\"row g-2 mb-2 overflow-scroll\">\n                                <ng-container *ngIf=\"!line.slotsLoading\">\n                                    <div class=\"col-4\" *ngFor=\"let time of line.slots\">\n                                        <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\n                                            (click)=\"selectSlotForLine(line, time)\">{{time ? time?.value : 'N/A'}}</div>\n                                    </div>\n                                    <p class=\"mb-0\" *ngIf=\"line.slots.length === 0\">No slots available for this date.</p>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #contactDetails>\n    <div class=\"w-60 contact_section\">\n        <div class=\"contact-header mb-2\">\n            <h1>Contact Details</h1>\n            <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\n        </div>\n\n        <div class=\"d-flex gap-3 details_container flex-column w-100\">\n            <div class=\"d-flex gap-4\">\n                <div [ngClass]=\"{'w-50' : selectedMode === 'HOME_VISIT', 'w-100' : selectedMode !== 'HOME_VISIT'}\">\n                    <div class=\"form-section card rounded-3 p-4 h-100\">\n                        <h3 class=\"section-title\">Personal Information</h3>\n\n                        <div class=\"mb-4\">\n                            <label class=\"form-label d-flex align-items-center\">\n                                Full Name\n                                <span class=\"required-asterisk\">*</span>\n                            </label>\n                            <input type=\"text\" class=\"form-control form-input rounded-2\"\n                                [(ngModel)]=\"appointmentPayload.customerDetail.name\"\n                                (ngModelChange)=\"checkRequiredValues()\" simpoLettersOnly>\n                        </div>\n\n                        <div class=\"mb-4\">\n                            <label class=\"form-label d-flex align-items-center\">\n                                Email Address\n                                <span class=\"required-asterisk\">*</span>\n                            </label>\n                            <input type=\"email\" class=\"form-control form-input rounded-2\"\n                                [(ngModel)]=\"appointmentPayload.customerDetail.email\"\n                                (ngModelChange)=\"checkRequiredValues()\"\n                                pattern=\"^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$\" #emailField=\"ngModel\"\n                                name=\"email\" required>\n                        </div>\n\n                        <div class=\"mb-0\">\n                            <label class=\"form-label d-flex align-items-center\">\n                                Phone Number\n                                <span class=\"required-asterisk\">*</span>\n                            </label>\n                            <input type=\"tel\" class=\"form-control  rounded-2\"\n                                [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\n                                (ngModelChange)=\"checkRequiredValues()\" simpoNumbersOnly\n                                [ngClass]=\"{'mobile_number' : appointmentPayload.customerDetail.phoneNumber.length != 10}\">\n                        </div>\n                    </div>\n                </div>\n                <!-- Home Visit address. Customer context: same saved-address flow as\n                     checkout/BookAppointmentComponent. Admin context (isAdminBooking): no\n                     logged-in customer account to read a saved address book from, so staff type\n                     the address manually instead. -->\n                <div class=\"w-50\" *ngIf=\"selectedMode === 'HOME_VISIT'\">\n                    <div class=\"form-section card rounded-3 p-4 h-100\">\n                        <h3 class=\"section-title\">Home Visit Details</h3>\n\n                        <ng-container *ngIf=\"!isAdminBooking; else manualHomeVisitAddress\">\n                            <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n                                <div class=\"address-info\">\n                                    <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n                                    <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n                                        {{defaultAddress?.stateName}}</div>\n                                    <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n                                </div>\n                            </div>\n                            <button type=\"button\" class=\"change-address-btn w-100\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">\n                                CHANGE OR ADD ADDRESS\n                            </button>\n\n                            <div class=\"addLinks\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n                                <mat-icon>add</mat-icon>\n                                <span class=\"ms-2\">Add an address</span>\n                            </div>\n                        </ng-container>\n\n                        <ng-template #manualHomeVisitAddress>\n                            <div class=\"mb-3\">\n                                <label class=\"form-label d-flex align-items-center\">Receiver Name</label>\n                                <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.receiverName\" (ngModelChange)=\"checkRequiredValues()\">\n                            </div>\n                            <div class=\"mb-3\">\n                                <label class=\"form-label d-flex align-items-center\">Receiver Phone</label>\n                                <input type=\"tel\" class=\"form-control form-input rounded-2\" simpoNumbersOnly [(ngModel)]=\"homeVisitAddress.receiverPhone\" (ngModelChange)=\"checkRequiredValues()\">\n                            </div>\n                            <div class=\"mb-3\">\n                                <label class=\"form-label d-flex align-items-center\">Address Line 1</label>\n                                <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.addressLine1\" (ngModelChange)=\"checkRequiredValues()\">\n                            </div>\n                            <div class=\"mb-3\">\n                                <label class=\"form-label d-flex align-items-center\">Address Line 2 (optional)</label>\n                                <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.addressLine2\">\n                            </div>\n                            <div class=\"d-flex gap-2 mb-3\">\n                                <div class=\"w-50\">\n                                    <label class=\"form-label d-flex align-items-center\">City</label>\n                                    <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.city\" (ngModelChange)=\"checkRequiredValues()\">\n                                </div>\n                                <div class=\"w-50\">\n                                    <label class=\"form-label d-flex align-items-center\">State</label>\n                                    <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.state\">\n                                </div>\n                            </div>\n                            <div class=\"mb-3\">\n                                <label class=\"form-label d-flex align-items-center\">Pincode</label>\n                                <input type=\"text\" class=\"form-control form-input rounded-2\" simpoNumbersOnly [(ngModel)]=\"homeVisitAddress.zipCode\" (ngModelChange)=\"checkRequiredValues()\">\n                            </div>\n                        </ng-template>\n\n                        <div class=\"mb-0 mt-3\">\n                            <label class=\"form-label d-flex align-items-center\">Special Instructions</label>\n                            <textarea class=\"form-control form-textarea rounded-2\"\n                                placeholder=\"Any special instructions for the professional (optional)\"\n                                [(ngModel)]=\"instructions\"></textarea>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"policies-container\"\n                *ngIf=\"cartServices[0]?.cancellationPolicy?.length > 0 || cartServices[0]?.reschedulePolicy?.length\">\n                <h2 class=\"policies-title\">Policies & Terms</h2>\n\n                <div class=\"policy-items-container d-flex flex-column gap-3\">\n                    <div class=\"policy-item d-flex justify-content-between align-items-center\"\n                        (click)=\"showCancellationPolicy = !showCancellationPolicy\">\n                        <h3 class=\"policy-title\">Cancellation Policy</h3>\n                        <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\n                                *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\n                            <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\n                        </div>\n                    </div>\n                    <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\n                        *ngIf=\"showCancellationPolicy\">\n                        <span *ngFor=\"let policy of cartServices[0]?.cancellationPolicy\">&#8226;\n                            {{policy}}</span>\n                    </div>\n\n                    <div class=\"policy-item d-flex justify-content-between align-items-center\"\n                        (click)=\"showReducingPolicy = !showReducingPolicy\">\n                        <h3 class=\"policy-title\">Rescheduling Policy</h3>\n                        <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\n                                *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\n                            <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\n                        </div>\n                    </div>\n                    <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\n                        *ngIf=\"showReducingPolicy\">\n                        <span *ngFor=\"let policy of cartServices[0]?.reschedulePolicy\">&#8226; {{policy}}</span>\n                    </div>\n                </div>\n\n                <div class=\"acceptance-section\">\n                    <input type=\"checkbox\" class=\"custom-checkbox\" [(ngModel)]=\"termsAndConditions\"\n                        (ngModelChange)=\"checkRequiredValues()\">\n                    <p class=\"acceptance-text\" style=\"margin-bottom:0px !important\">\n                        I understand and accept the cancellation & rescheduling policies.\n                    </p>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #paymentTab>\n    <div class=\"w-60 payment_section\">\n        <div class=\"w-100 h-100\">\n            <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\n                <div class=\"payment-header mb-3 w-100\">\n                    <h1 style=\"font-size:24px;font-weight: 600;\">Booking Summary</h1>\n                    <p class=\"payment-subtitle mb-0\">Review your booking before confirming</p>\n                </div>\n\n                <div class=\"booking-summary-card\" [ngClass]=\"{'w-100' : screenWidth < 475,'w-50':screenWidth > 475}\">\n                    <div *ngFor=\"let line of resolvedLines; let i = index\">\n                        <h2 class=\"summary-title\" *ngIf=\"resolvedLines.length > 1\">Line {{i + 1}}</h2>\n                        <div class=\"summary-row\" *ngFor=\"let s of line.services\">\n                            <div class=\"summary-label\">{{s.name}}</div>\n                            <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{servicePrice(s.id)}}</div>\n                        </div>\n                        <div class=\"summary-row\" *ngIf=\"line.staffName || line.selectedStaffName\">\n                            <div class=\"summary-label\">Professional</div>\n                            <div class=\"summary-value\">{{line.staffName || line.selectedStaffName}}</div>\n                        </div>\n                        <div class=\"summary-row\" *ngIf=\"selectedMode === 'STORE_VISIT'\">\n                            <div class=\"summary-label\">Location</div>\n                            <div class=\"summary-value\">{{selectedLocation?.storeName ?? 'N/A'}}</div>\n                        </div>\n                        <div class=\"summary-row\">\n                            <div class=\"summary-label\">Date & Time</div>\n                            <div class=\"summary-value\">{{selectedDateStr}} at {{line.selectedSlot?.value ?? 'N/A'}}</div>\n                        </div>\n                    </div>\n\n                    <div *ngIf=\"productCartItems.length > 0\">\n                        <h2 class=\"summary-title\">Products</h2>\n                        <div class=\"summary-row\" *ngFor=\"let p of productCartItems\">\n                            <div class=\"summary-label\">{{p.itemName}} x{{p.quantity}}</div>\n                            <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{(p.sellingPrice ?? p.price ?? 0) * (p.quantity ?? 1)}}</div>\n                        </div>\n                    </div>\n\n                    <h2 class=\"summary-title\">Payment</h2>\n                    <div class=\"summary-row\" *ngIf=\"homeVisitCharge > 0\">\n                        <div class=\"summary-label\">Home visit charge</div>\n                        <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{homeVisitCharge}}</div>\n                    </div>\n                    <div class=\"summary-row\">\n                        <div class=\"summary-label\">Total</div>\n                        <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{reviewTotal}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #statusTemplate>\n    <div class=\"booking-confirmation\">\n        <div class=\"success-icon\">\n            <div class=\"checkmark-circle\">\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\n                    class=\"w-100 h-100\" *ngIf=\"apiStatus\">\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\n                    class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\n            </div>\n        </div>\n\n        <div class=\"confirmation-content\">\n            <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\n            <p class=\"confirmation-message\">\n                {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\n                try again later'}}\n            </p>\n\n            <!-- Video Call link, when already present on the confirmed group (a paid Video Call's\n                 link only appears once payment verification completes, handled elsewhere - see\n                 verify-payment.component.ts, not this screen). -->\n            <div class=\"video-call-link-card d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus && selectedMode === 'VIDEO_CALL' && bookingGroup?.videoCallLink\">\n                <div class=\"details-card\">\n                    <h3 class=\"details-title\">Your Video Call Link</h3>\n                    <a [href]=\"bookingGroup.videoCallLink\" target=\"_blank\">{{bookingGroup.videoCallLink}}</a>\n                </div>\n            </div>\n\n            <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n                <div class=\"details-card\">\n                    <h3 class=\"details-title\">Appointment Details</h3>\n                    <div class=\"details-row\" *ngFor=\"let line of resolvedLines\">\n                        <span class=\"detail-label\">{{line.services.length ? (line.services[0].name) : 'Products'}}</span>\n                        <span class=\"detail-value\">{{selectedDateStr}} at {{line.selectedSlot?.value ?? 'N/A'}}</span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n                <div class=\"details-card\">\n                    <h3 class=\"details-title\">Payment</h3>\n                    <div class=\"details-row\" *ngIf=\"bookingGroup?.homeVisitCharge > 0\">\n                        <span class=\"detail-label\">Home visit charge</span>\n                        <span class=\"detail-value\">\u20B9{{bookingGroup.homeVisitCharge}}</span>\n                    </div>\n                    <div class=\"details-row\">\n                        <span class=\"detail-label\">Total</span>\n                        <span class=\"detail-value\">\u20B9{{bookingTotal}}</span>\n                    </div>\n                    <div class=\"details-row\">\n                        <span class=\"detail-label\">Paid</span>\n                        <span class=\"detail-value\">\u20B9{{bookingPaid}}</span>\n                    </div>\n                    <div class=\"details-row\" *ngIf=\"bookingDue > 0\">\n                        <span class=\"detail-label\">Due</span>\n                        <span class=\"detail-value\">\u20B9{{bookingDue}}</span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"done-actions d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n                <ng-container *ngIf=\"!isAdminContext; else adminDoneActions\">\n                    <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToMyBookings()\">View my bookings</button>\n                    <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"goToListing()\">Keep shopping</button>\n                </ng-container>\n                <ng-template #adminDoneActions>\n                    <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToAppointmentsList()\">Back to Appointments List</button>\n                    <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"bookAnother()\">Book Another</button>\n                </ng-template>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap\";mat-icon{font-family:Material Icons!important}:host{--font-sans: \"Outfit\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a;--color-primary: #230860;--color-secondary: #00b6ff;--color-accent-gradient: linear-gradient(135deg, #230860 0%, #00b6ff 100%);--color-success: #10b981;--color-success-bg: #ecfdf5;--color-error: #ef4444;--color-error-bg: #fef2f2;--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 16px;--border-radius-xl: 24px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px -3px rgba(35, 8, 96, .05), 0 4px 6px -4px rgba(35, 8, 96, .05);--shadow-xl: 0 20px 25px -5px rgba(35, 8, 96, .08), 0 8px 10px -6px rgba(35, 8, 96, .08);--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: all .4s cubic-bezier(.175, .885, .32, 1.275)}*{box-sizing:border-box;font-family:var(--font-sans)}.main_section{position:relative;height:100vh;background-color:var(--slate-50);display:flex;flex-direction:column;overflow:hidden}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.main_header{padding:15px;background:#fff;border-bottom:1px solid var(--slate-100);flex-shrink:0;box-shadow:0 2px 8px #00000003}.header{display:flex;align-items:center;justify-content:space-between}.back-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:var(--border-radius-md);background:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-700)!important;transition:var(--transition-smooth);font-weight:500;font-size:.9rem;cursor:pointer}.back-btn mat-icon{font-size:18px!important;width:18px!important;height:18px!important;color:var(--slate-700)!important;display:flex;align-items:center;justify-content:center}.back-btn:hover{background:var(--slate-100);transform:translate(-3px);color:var(--slate-900)!important}.header-title{flex-grow:1;text-align:right}.header-title h1{font-size:1.5rem;font-weight:700;margin-bottom:.2rem;color:var(--slate-900)!important;letter-spacing:-.025em}.header-title p{color:var(--slate-500)!important;font-size:.9rem;font-weight:500;margin-bottom:0}.progress-bar{width:100%;height:6px;background-color:var(--slate-100);margin-top:3px;border-radius:10px;overflow:hidden;position:relative}.progress-fill{height:100%;background:var(--color-accent-gradient);border-radius:10px;transition:width .5s cubic-bezier(.4,0,.2,1);position:relative}.progress-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#fff0,#ffffff4d,#fff0);animation:shimmer 2s infinite linear}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.main_body{flex-grow:1;overflow-y:auto;padding:10px;display:flex;justify-content:center;background:var(--slate-50)}.w-60{width:100%;max-width:800px}.service_section,.location_section,.staff-listing,.date_section,.contact_section,.payment_section,.booking-confirmation{animation:slideUp .5s cubic-bezier(.16,1,.3,1) forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}h2{font-size:1.5rem;font-weight:700;color:var(--slate-900)!important;letter-spacing:-.02em;margin-bottom:.3rem}p.subtitle,.service-selection p,.location_section p,.staff-subtitle,.datetime-subtitle,.contact-subtitle,.payment-subtitle{color:var(--slate-500)!important;font-size:13px;margin-bottom:2rem}.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding-bottom:2rem}.service-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px}.service-card:hover{border-color:var(--slate-400);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.service-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px;transform:translateY(-2px)}.service-card-selected:before,.location-card-selected:before{content:\"\\2713\";position:absolute;top:-10px;right:-10px;background:var(--color-accent-gradient);color:#fff!important;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;box-shadow:0 4px 8px #2308604d;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275);z-index:10}@keyframes popIn{0%{transform:scale(0)}to{transform:scale(1)}}.service-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}.service-icon{width:48px;height:48px;border-radius:var(--border-radius-md);background-color:var(--slate-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.service-icon mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:var(--color-primary)!important}.service-card-selected .service-icon{background:var(--slate-900)}.service-card-selected .service-icon mat-icon{color:#fff!important}.service-info{flex-grow:1}.service-title{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;line-height:1.3;margin-bottom:.2rem}.service-price{font-size:1.25rem;font-weight:800;color:var(--slate-900)!important;text-align:right}.service-duration{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;text-align:right;margin-top:.1rem}.service-description{color:var(--slate-600)!important;font-size:.9rem;line-height:1.5;margin-bottom:1.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home-visit{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--slate-700)!important;border:1px solid var(--slate-200);padding:.35rem .75rem;border-radius:20px;background-color:var(--slate-50);transition:var(--transition-smooth)}.home-visit img{width:14px;height:14px}.home-visit:before{content:\"\";display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--color-success);box-shadow:0 0 #10b98166;animation:pulseGlow 1.8s infinite}@keyframes pulseGlow{0%{box-shadow:0 0 #10b981b3}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.location-list{display:flex;flex-direction:column;gap:1.25rem;padding-bottom:2rem}.location-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm)}.location-card:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md)}.location-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px)}.location-content{display:flex;align-items:center}.location-info{display:flex;align-items:center;gap:1.25rem;width:100%}.location-icon{width:52px;height:52px;background-color:var(--slate-100);border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.location-icon img{width:28px;height:28px}.location-card-selected .location-icon{background:var(--slate-900)}.location-details{flex-grow:1}.location-details h3{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.3rem}.location-details p{font-size:.9rem;color:var(--slate-500)!important;font-weight:450;line-height:1.4;margin-bottom:0}.search-container{width:100%;margin-bottom:1.25rem}.search-input-wrapper{width:100%;background-color:var(--slate-100);border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;transition:var(--transition-smooth)}.search-input-wrapper:focus-within{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #23086014}.search-input{font-size:.95rem;font-weight:500;color:var(--slate-900)!important;background:transparent;outline:none;width:100%}.search-input::placeholder{color:var(--slate-400)}.search-icon{color:var(--slate-400)!important;font-size:20px!important;width:20px!important;height:20px!important}.clear-icon{color:var(--slate-400)!important;font-size:18px!important;width:18px!important;height:18px!important;transition:var(--transition-smooth)}.clear-icon:hover{color:var(--slate-600)!important}.staff-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;max-height:48vh;overflow-y:auto;padding-right:.5rem;padding-bottom:1rem}.staff-list::-webkit-scrollbar{width:6px}.staff-list::-webkit-scrollbar-track{background:var(--slate-50);border-radius:4px}.staff-list::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:4px}.staff-list::-webkit-scrollbar-thumb:hover{background:var(--slate-300)}.staff-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);margin-bottom:0!important}.staff-card:hover{border-color:var(--slate-300);transform:translateY(-2px);box-shadow:var(--shadow-md)}.staff-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px);margin-bottom:0!important}.staff-avatar{width:48px;height:48px;background:var(--color-accent-gradient);font-size:.95rem;font-weight:700;color:#fff!important;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px #2308601a;letter-spacing:.5px;transition:var(--transition-smooth)}.staff-card-selected .staff-avatar{transform:scale(1.05)}.staff-name{font-size:1.05rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.2rem;letter-spacing:-.015em}.staff-specialty{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;margin-bottom:0;text-transform:uppercase;letter-spacing:.05em}.selection-indicator{display:flex;align-items:center;justify-content:center;margin-left:auto;padding-left:1rem}.checkmark-circle-mini{width:24px;height:24px;border:2px solid var(--slate-300);border-radius:50%;background-color:#fff;transition:var(--transition-bounce);color:#fff!important}.checkmark-circle-mini.selected{background:var(--color-accent-gradient);border-color:transparent;box-shadow:0 3px 8px #23086040}.checkmark-circle-mini mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#fff!important;font-weight:800!important;display:flex;align-items:center;justify-content:center}.main_container{display:flex;gap:2rem;margin-bottom:2rem}.section-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm);height:100%}.section-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:10px!important;letter-spacing:-.01em}.date-picker-container{border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;display:flex;align-items:center;justify-content:space-between;transition:var(--transition-smooth);background-color:var(--slate-50);cursor:pointer}.date-picker-container:hover{border-color:var(--slate-400);background-color:#fff}.date-input{font-size:.95rem;font-weight:600;color:var(--slate-800)!important;background:transparent;border:none;outline:none;cursor:pointer;width:100%}.date-picker-container mat-icon{color:var(--color-primary)!important;font-size:20px!important;width:20px!important;height:20px!important}.datepicker-popover{position:absolute;z-index:1000;margin-top:4px;border-radius:var(--border-radius-lg);overflow:hidden;box-shadow:var(--shadow-xl);background:#fff;border:1px solid var(--slate-200);width:320px}::ng-deep .datepicker-calendar{border-radius:var(--border-radius-lg)!important;width:100%!important}::ng-deep .mat-calendar-header{background:var(--color-accent-gradient)!important;color:#fff!important;padding:.5rem!important}::ng-deep .mat-calendar-content{padding:8px!important}::ng-deep .mat-calendar-controls{margin:0!important}::ng-deep .mat-calendar-period-button{color:#fff!important;font-weight:700!important;font-size:1rem!important}::ng-deep .mat-calendar-arrow{fill:#fff!important}::ng-deep .mat-calendar-previous-button,::ng-deep .mat-calendar-next-button{color:#fff!important}::ng-deep .mat-calendar-body-cell{font-size:13px!important}::ng-deep .mat-calendar-body-cell-content{font-weight:600!important;color:var(--slate-800)!important;border-radius:8px!important}::ng-deep .mat-calendar-body-selected{background:var(--color-accent-gradient)!important;color:#fff!important;box-shadow:0 4px 10px #23086033!important}::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected){border:2px solid var(--color-primary)!important;color:var(--color-primary)!important}.time_selection{max-height:420px;display:flex;flex-direction:column}.time_selection .row{flex-grow:1;overflow-y:auto;padding-right:.25rem;margin-top:10px}.time-slot{background:#fff;border:1px solid var(--slate-200);font-size:.9rem;font-weight:600;color:var(--slate-800)!important;padding:.75rem .5rem;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);text-align:center;box-shadow:var(--shadow-sm)}.time-slot:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md);background-color:var(--slate-50)}.time-slot.selected{background:var(--color-accent-gradient);border-color:transparent;color:#fff!important;box-shadow:0 4px 12px #23086033}.form-section{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm)}.form-label{font-size:.85rem;font-weight:600;color:var(--slate-700)!important;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.required-asterisk{color:var(--color-error);margin-left:2px}.form-control,.form-input,.form-textarea{width:100%;background-color:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-900)!important;font-size:.95rem;font-weight:500;padding:.75rem 1rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);outline:none}.form-control:focus,.form-input:focus,.form-textarea:focus{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #2308601a}.form-textarea{min-height:100px;resize:vertical}.policies-container{background-color:#fff;border:1px solid var(--slate-200);padding:1.75rem;border-radius:var(--border-radius-lg);margin-top:1.5rem;box-shadow:var(--shadow-sm)}.policies-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1.25rem}.policy-item{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1rem 1.25rem;cursor:pointer;transition:var(--transition-smooth);display:flex;justify-content:space-between;align-items:center}.policy-item:hover{background-color:var(--slate-100);border-color:var(--slate-300)}.policy-title{font-size:.95rem;font-weight:600;color:var(--slate-800)!important}.policy-arrow mat-icon{color:var(--slate-500)!important;transition:var(--transition-smooth)}.cancellation_policies{background-color:var(--slate-50);padding:1rem 1.5rem;border-left:3px solid var(--color-primary);border-radius:0 0 var(--border-radius-md) var(--border-radius-md);margin-top:-4px;margin-bottom:1rem;font-size:.9rem;color:var(--slate-600)!important;line-height:1.5}.acceptance-section{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem}.custom-checkbox{width:20px;height:20px;border:2px solid var(--slate-300);border-radius:6px;cursor:pointer;transition:var(--transition-smooth);position:relative;appearance:none;background-color:#fff;outline:none}.custom-checkbox:checked{background:var(--color-accent-gradient);border-color:transparent}.custom-checkbox:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff!important;font-size:.75rem;font-weight:800}.acceptance-text{font-size:.95rem;color:var(--slate-700)!important;font-weight:500;-webkit-user-select:none;user-select:none;line-height:1.4}.booking-summary-card{background-color:#fff;border:1px solid var(--slate-200);padding:2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);position:relative}.booking-summary-card:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:10px;background-image:radial-gradient(circle,white 4px,transparent 5px);background-size:12px 12px;background-position:0 0;z-index:2}.summary-title{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important;border-bottom:2px dashed var(--slate-200);padding-bottom:1rem;margin-bottom:1.5rem;text-align:center}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--slate-100)}.summary-label{font-size:.95rem;color:var(--slate-500)!important;font-weight:500}.summary-value{font-size:.95rem;color:var(--slate-900)!important;font-weight:600;text-align:right}.total-row{margin-top:1rem;padding-top:1.25rem;border-top:2px dashed var(--slate-200);border-bottom:none}.total-row .summary-label{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important}.total-row .summary-value{font-size:1.5rem;font-weight:800;color:var(--color-primary)!important}.booking-confirmation{background:#fff;border:1px solid var(--slate-200);padding:3rem 2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;text-align:center;max-width:500px;margin:0 auto}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:96px;height:96px;display:flex;align-items:center;justify-content:center}.confirmation-title{font-size:1.5rem;font-weight:800;color:var(--slate-900)!important;margin-bottom:.5rem}.confirmation-message{font-size:1rem;color:var(--slate-500)!important;line-height:1.6;margin-bottom:2rem;font-weight:450}.details-card{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1.5rem;width:100%;margin-bottom:2rem;text-align:left}.details-title{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}.details-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed var(--slate-200)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.85rem;color:var(--slate-500)!important;font-weight:500}.detail-value{font-size:.9rem;color:var(--slate-900)!important;font-weight:600}.main_footer{border-top:1px solid var(--slate-200);background-color:#fff;padding:15px;flex-shrink:0;display:flex;justify-content:center;box-shadow:0 -4px 12px #00000005}.footer-buttons{width:100%;max-width:800px;display:flex;align-items:center}.back-footer-btn{font-size:.95rem;font-weight:600;color:var(--slate-600)!important;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);cursor:pointer}.back-footer-btn:hover{color:var(--slate-900)!important;background-color:var(--slate-100)}.continue-btn{background:var(--color-accent-gradient);color:#fff!important;border:none;padding:.75rem 2rem;border-radius:var(--border-radius-md);font-size:.95rem!important;font-weight:600;cursor:pointer;transition:var(--transition-smooth);box-shadow:0 4px 10px #23086033;width:max-content!important}.continue-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.continue-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.complete_booking,.pay-now-btn{background:var(--color-accent-gradient)!important;color:#fff!important;border:none;padding:.75rem 2.25rem!important;font-size:.95rem!important;font-weight:600;border-radius:var(--border-radius-md)!important;box-shadow:0 4px 12px #23086040;transition:var(--transition-smooth);cursor:pointer;display:flex;align-items:center;gap:.5rem;width:max-content!important}.complete_booking img,.pay-now-btn img{width:20px;height:20px;filter:brightness(0) invert(1)}.complete_booking:hover:not([disabled]),.pay-now-btn:hover:not([disabled]){transform:translateY(-2px);box-shadow:0 6px 18px #23086059}.complete_booking:disabled,.pay-now-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed;box-shadow:none}.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding:0;width:100%}.skeleton-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;height:180px;display:flex;flex-direction:column;justify-content:space-between}.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border-radius:4px}@keyframes loading-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:48px;height:48px;border-radius:var(--border-radius-md)}.skeleton-title{height:20px;width:60%;margin-bottom:.5rem}.skeleton-price{height:20px;width:30%}.skeleton-duration{height:12px;width:25%;margin-top:.25rem}.skeleton-description{height:14px;width:85%}.skeleton-badge{height:28px;width:120px;border-radius:20px}.time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;width:100%}.skeleton-time-slot{height:42px;border-radius:var(--border-radius-md);background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border:1px solid var(--slate-100)}@media screen and (max-width: 475px){.main_header{padding:1rem}.header-title h1{font-size:1.25rem}.back-btn{padding:.5rem .8rem}.back-btn span{display:none}.main_body{padding:15px}.services-grid{grid-template-columns:1fr;gap:1rem}.staff-list{grid-template-columns:1fr!important;gap:.85rem!important}.service-card,.service-card-selected{min-height:auto}.main_container{flex-direction:column;gap:1.5rem}.datepicker-popover{width:100%;left:0}.details_container{gap:1.5rem}.details_container>.d-flex{flex-direction:column;gap:1.5rem}.details_container>.d-flex>div{width:100%!important}.booking-summary-card{padding:1.25rem}.summary-title{font-size:1.15rem}.total-row .summary-label{font-size:1.1rem}.total-row .summary-value{font-size:1.3rem}.main_footer{padding:1rem}.continue-btn{padding:.75rem 1.5rem}}.shipping-info{border-radius:10px;padding:20px;margin-bottom:12px;border:1px solid var(--slate-200);box-shadow:var(--shadow-sm)}.address-info{margin-bottom:0}.address-name{font-weight:700;margin-bottom:8px;color:var(--slate-900)!important}.address-details{color:var(--slate-500)!important;margin-bottom:8px}.mobile-number{font-weight:700;color:var(--slate-900)!important;font-size:15px}.change-address-btn{font-size:.85rem!important;font-weight:700!important;padding:10px;background:#fff;border:1px solid var(--slate-200);border-radius:8px;color:var(--slate-900)!important;cursor:pointer;transition:var(--transition-smooth)}.change-address-btn:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.addLinks{padding:14px;border:1px dashed var(--slate-300);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;color:var(--slate-500)!important;margin-bottom:12px}.addLinks:hover{border-color:var(--color-primary);color:var(--color-primary)!important}h1{font-size:24px!important;font-weight:600!important}.done-actions{display:flex;gap:12px;width:100%}.done-btn{flex:1;max-width:220px;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);font-size:.95rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth);border:none}.done-btn-primary{background:var(--color-accent-gradient);color:#fff!important;box-shadow:0 4px 10px #23086033}.done-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.done-btn-secondary{background:#fff;color:var(--slate-600)!important;border:1px solid var(--slate-200)}.empty-state-mini{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:48px 16px;color:var(--slate-500)}.empty-state-mini mat-icon{font-size:32px;height:32px;width:32px;color:var(--slate-300);margin-bottom:4px}.empty-state-mini h4{margin:0;font-size:15px;font-weight:600;color:var(--slate-700)}.empty-state-mini p{margin:0;font-size:13px;color:var(--slate-500)}.done-btn-secondary:hover{background-color:var(--slate-100);color:var(--slate-900)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { 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: i9$2.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: i9.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: i9.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i9.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i9.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: "ngmodule", type: MatDialogModule }, { kind: "directive", type: LettersOnlyDirective, selector: "[simpoLettersOnly]" }, { kind: "directive", type: NumbersOnlyDirective, selector: "[simpoNumbersOnly]" }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { 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"] }] }); }
 }
 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, MatDialogModule, LettersOnlyDirective, NumbersOnlyDirective, ToastModule, HoverDirective, HoverElementsComponent, BackgroundDirective], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\n<section class=\"main_section\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div class=\"main_header\">\n        <div class=\"header d-flex justify-content-between align-items-center\">\n            <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\n                (click)=\"goBack()\">\n                <mat-icon>keyboard_backspace</mat-icon><span *ngIf=\"screenWidth > 475\">Back to Home</span>\n            </div>\n            <div class=\"header-title\">\n                <h1>Book New Appointment</h1>\n                <p>{{businessName ?? \"N/A\" }}</p>\n            </div>\n        </div>\n\n        <div class=\"progress-bar\">\n            <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\n        </div>\n    </div>\n    <div class=\"main_body w-100 d-flex justify-content-center\">\n        <ng-container *ngIf=\"selectedTab === 'modeSelection'\">\n            <ng-container *ngTemplateOutlet=\"modeSelection\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab === 'serviceListing'\">\n            <ng-container *ngIf=\"!skeletonLoader\">\n                <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab === 'locationListing'\">\n            <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab === 'staffListing'\">\n            <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\n            <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab==='contactDetails'\">\n            <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab==='paymentTab'\">\n            <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\n            <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\n        </ng-container>\n    </div>\n    <div class=\"main_footer d-flex justify-content-center align-items-center\"\n        *ngIf=\"selectedTab!=='statusTemplate' && selectedTab!=='modeSelection'\">\n        <div class=\"footer-buttons\"\n            [ngStyle]=\"{'justify-content': selectedTab != 'serviceListing' ? 'space-between' : 'end'}\">\n            <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\"\n                *ngIf=\"selectedTab != 'serviceListing'\">Back</span>\n            <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\n                *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\n            <button class=\"cursor-pointer d-flex justify-content-evenly align-items-center\"\n                *ngIf=\"selectedTab==='paymentTab'\" (click)=\"confirmBooking()\" [disabled]=\"isProcessing\"\n                [ngClass]=\"{'pay-now-btn' : bookingGroup?.totalCollectedAtBooking > 0 || !bookingGroup,'complete_booking' : bookingGroup && !bookingGroup?.totalCollectedAtBooking}\">\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\n                {{isProcessing ? 'Please wait...' : 'Confirm Booking'}}\n            </button>\n        </div>\n    </div>\n</section>\n\n<ng-template #modeSelection>\n    <div class=\"w-60 service_section\">\n        <div class=\"service-selection\">\n            <h2>How would you like this?</h2>\n            <p>Choose how you'd like to be served</p>\n            <div class=\"services-grid\">\n                <div class=\"service-card\" (click)=\"selectMode('STORE_VISIT')\">\n                    <div class=\"service-header\">\n                        <div class=\"service-icon\"><mat-icon>storefront</mat-icon></div>\n                        <div class=\"service-info\">\n                            <div class=\"service-title\">Visit our Store</div>\n                        </div>\n                    </div>\n                    <div class=\"service-description\">Come to us at one of our locations</div>\n                </div>\n                <div class=\"service-card\" (click)=\"selectMode('HOME_VISIT')\">\n                    <div class=\"service-header\">\n                        <div class=\"service-icon\"><mat-icon>home</mat-icon></div>\n                        <div class=\"service-info\">\n                            <div class=\"service-title\">We come to you</div>\n                        </div>\n                    </div>\n                    <div class=\"service-description\">A professional visits your address</div>\n                </div>\n                <div class=\"service-card\" (click)=\"selectMode('VIDEO_CALL')\">\n                    <div class=\"service-header\">\n                        <div class=\"service-icon\"><mat-icon>videocam</mat-icon></div>\n                        <div class=\"service-info\">\n                            <div class=\"service-title\">Video consultation</div>\n                        </div>\n                    </div>\n                    <div class=\"service-description\">Connect over a video call</div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #serviceListing>\n    <div class=\"w-60 service_section\">\n        <div class=\"service-selection\">\n            <h2>Select a Service</h2>\n            <p>Choose the service(s) you'd like to book<span *ngIf=\"cartServices.length > 0\"> \u2014 {{cartServices.length}} selected</span></p>\n            <p *ngIf=\"productCartItems.length > 0\" class=\"cart-hint\">{{productCartItems.length}} product(s) already in your cart \u2014 you can continue without picking a service.</p>\n\n            <div class=\"services-grid\">\n                <ng-container *ngFor=\"let service of serviceData\">\n                    <div class=\"\" (click)=\"selectService(service)\"\n                        [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\n                        <div class=\" service-header\">\n                            <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\n                            <div class=\"service-info\">\n                                <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\n                            </div>\n                            <div>\n                                <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\n                                    service?.priceDetails?.price : 'N/A' }}</div>\n                                <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"service-description\" *ngIf=\"service?.description\">\n                            {{service?.description ? service?.description : 'N/A'}}\n                        </div>\n                        <div class=\"home-visit\" *ngIf=\"selectedMode === 'STORE_VISIT' && service?.homeAppointmentAvailable\"><img\n                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\n                            Visit Available</div>\n                    </div>\n                </ng-container>\n                <div class=\"empty-state-mini\" *ngIf=\"serviceData.length === 0\">\n                    <mat-icon>inventory_2</mat-icon>\n                    <h4>No services available</h4>\n                    <p *ngIf=\"selectedMode === 'HOME_VISIT'\">No services are currently available for home visits.</p>\n                    <p *ngIf=\"selectedMode === 'VIDEO_CALL'\">No services are currently available for video calls.</p>\n                    <p *ngIf=\"selectedMode === 'STORE_VISIT'\">This business hasn't added any services yet.</p>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #locationListing>\n    <div class=\"location_section\">\n        <div class=\"header flex-column align-items-start\">\n            <h1>Choose Location</h1>\n            <p>Select where you'd like to receive the service</p>\n        </div>\n\n        <div class=\"location-list\">\n            <ng-container *ngFor=\"let location of locationData\">\n                <div (click)=\"selectLocation(location)\"\n                    [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\n                    <div class=\"location-content\">\n                        <div class=\"location-info\">\n                            <div class=\"location-icon\"><img\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\n                            </div>\n                            <div class=\"location-details\">\n                                <div class=\"d-flex justify-content-between align-items-center\">\n                                    <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\n                                </div>\n                                <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\n                                    {{location?.addressDetails?.state}} {{location?.pincode}}</p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n            <div class=\"empty-state-mini\" *ngIf=\"locationData.length === 0\">\n                <mat-icon>storefront</mat-icon>\n                <h4>No locations available</h4>\n                <p>There's no location available for this service right now.</p>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #staffListing>\n    <div class=\"w-60 overflow-hidden staff-listing\">\n        <div class=\"d-flex w-100 h-100\">\n            <div class=\"w-100\">\n                <div class=\"staff-header mb-3\">\n                    <h1>Select Staff Member</h1>\n                    <p class=\"staff-subtitle mb-0\">Choose your preferred professional, or skip to have us assign the best available one</p>\n                </div>\n\n                <div class=\"search-container mb-4\">\n                    <div class=\"search-input-wrapper d-flex align-items-center\">\n                        <mat-icon class=\"search-icon me-2\">search</mat-icon>\n                        <input type=\"text\" class=\"search-input border-0 flex-grow-1\" placeholder=\"Search staff member by name...\" [(ngModel)]=\"staffSearchQuery\">\n                        <mat-icon class=\"clear-icon cursor-pointer ms-2\" *ngIf=\"staffSearchQuery\" (click)=\"staffSearchQuery = ''\">close</mat-icon>\n                    </div>\n                </div>\n\n                <!-- Pure product-only line: one flat staff list, same as the old single-service flow -->\n                <div class=\"staff-list\" *ngIf=\"cartServices.length === 0\">\n                    <ng-container *ngFor=\"let staff of filteredStaff\">\n                        <div class=\"card rounded-3 p-3\" (click)=\"selectStaffForProductOnlyLine(staff)\"\n                            [ngClass]=\"{ 'staff-card-selected' : staff?.selected, 'staff-card': !staff?.selected }\">\n                            <div class=\"d-flex align-items-center justify-content-between w-100\">\n                                <div class=\"d-flex align-items-center flex-grow-1\">\n                                    <div class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\n                                        {{staff?.staffName.slice(0,2).toUpperCase()}}\n                                    </div>\n                                    <div class=\"staff-details flex-grow-1\">\n                                        <h3 class=\"staff-name\">{{(staff?.staffName ? staff?.staffName : 'N/A') | titlecase}}</h3>\n                                        <p class=\"staff-specialty\">{{(businessName && businessName !== 'N/A') ? businessName : 'Booking Specialist'}}</p>\n                                    </div>\n                                </div>\n                                <div class=\"selection-indicator\">\n                                    <div class=\"checkmark-circle-mini d-flex align-items-center justify-content-center\" [class.selected]=\"staff?.selected\">\n                                        <mat-icon *ngIf=\"staff?.selected\">check</mat-icon>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <div class=\"empty-state-mini\" *ngIf=\"filteredStaff.length === 0\">\n                        <mat-icon>badge</mat-icon>\n                        <h4>No staff available</h4>\n                        <p>There's no staff member available for this service right now.</p>\n                    </div>\n                </div>\n\n                <!-- Bundled cart: one pool per line that resolution couldn't collapse to a single provider -->\n                <ng-container *ngIf=\"cartServices.length > 0\">\n                    <div class=\"staff-line-group mb-4\" *ngFor=\"let line of resolvedLines\">\n                        <ng-container *ngIf=\"line.candidateStaffPool?.length\">\n                            <h4 class=\"mb-2\">For {{line.services.length}} service(s): {{ (line.services | slice:0:3).length ? '' : '' }}<span *ngFor=\"let s of line.services; let last = last\">{{s.name}}{{last ? '' : ', '}}</span></h4>\n                            <div class=\"staff-list mb-3\">\n                                <ng-container *ngFor=\"let staff of line.candidateStaffPool\">\n                                    <div class=\"card rounded-3 p-3\" (click)=\"selectStaffForLine(line, staff)\"\n                                        [ngClass]=\"{ 'staff-card-selected' : line.selectedStaffId === staff.id, 'staff-card': line.selectedStaffId !== staff.id }\">\n                                        <div class=\"d-flex align-items-center justify-content-between w-100\">\n                                            <div class=\"d-flex align-items-center flex-grow-1\">\n                                                <div class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\n                                                    {{staff?.name?.slice(0,2)?.toUpperCase()}}\n                                                </div>\n                                                <div class=\"staff-details flex-grow-1\">\n                                                    <h3 class=\"staff-name\">{{(staff?.name ? staff?.name : 'N/A') | titlecase}}</h3>\n                                                </div>\n                                            </div>\n                                            <div class=\"selection-indicator\">\n                                                <div class=\"checkmark-circle-mini d-flex align-items-center justify-content-center\" [class.selected]=\"line.selectedStaffId === staff.id\">\n                                                    <mat-icon *ngIf=\"line.selectedStaffId === staff.id\">check</mat-icon>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                        <div class=\"empty-state-mini\" *ngIf=\"!line.candidateStaffPool?.length\">\n                            <mat-icon>badge</mat-icon>\n                            <h4>No staff available</h4>\n                            <p>No staff member is available for {{line.services.length}} service(s) in this line.</p>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dateSelection>\n    <div class=\"w-60 date_section\">\n        <div class=\"row justify-content-center h-100\">\n            <div class=\"col-12 h-100\">\n                <div class=\"datetime-header mb-2\">\n                    <h1>Select Date & Time</h1>\n                    <p class=\"datetime-subtitle mb-0\">Choose when you'd like your appointment</p>\n                </div>\n\n                <div class=\"d-flex gap-4 main_container\">\n                    <div [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\n                        <div class=\"section-card card rounded-3 p-4 h-100\">\n                            <h3 class=\"section-title\">Select Date</h3>\n\n                            <div class=\"date-picker-container d-flex align-items-center justify-content-between\"\n                                (click)=\"$event.stopPropagation()\">\n                                <input type=\"text\" class=\"date-input border-0 rounded-2\" placeholder=\"dd-mm-yyyy\"\n                                    [value]=\"selectedDateStr\" readonly (click)=\"toggleCalendar($event)\">\n\n                                <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\n                            </div>\n                            <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\n                                <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\n                                    <mat-calendar [(selected)]=\"selectedDate\" [dateFilter]=\"dateFilter\"\n                                        (selectedChange)=\"onDateSelected($event)\" class=\"datepicker-calendar\">\n                                    </mat-calendar>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- One slot-picker per resolved line, side by side when there's more than one (design doc \u00A73b) -->\n                    <div class=\"time_selection\" [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\" *ngIf=\"resolvedLines.length <= 1\">\n                        <div class=\"section-card card h-100 rounded-3 p-4\">\n                            <h3 class=\"section-title\">Available Times</h3>\n                            <div class=\"row g-2 mb-4 overflow-scroll\">\n                                <ng-container *ngIf=\"!skeletonLoader && resolvedLines[0]\">\n                                    <div class=\"col-4\" *ngFor=\"let time of resolvedLines[0].slots\">\n                                        <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\n                                            (click)=\"selectSlotForLine(resolvedLines[0], time)\">{{time ? time?.value : 'N/A'}}</div>\n                                    </div>\n                                    <p class=\"mb-0\" *ngIf=\"resolvedLines[0].slots.length === 0\">No slots available for this date.</p>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Multi-line case: each line gets its own full-width card with a staff header -->\n                <div class=\"d-flex gap-4 main_container flex-wrap\" *ngIf=\"resolvedLines.length > 1\">\n                    <div class=\"w-100\" *ngFor=\"let line of resolvedLines\">\n                        <div class=\"section-card card rounded-3 p-4\">\n                            <h3 class=\"section-title\">Professional: {{line.staffName || line.selectedStaffName || 'To be assigned'}}</h3>\n                            <p class=\"mb-2\" *ngIf=\"line.services.length\"><span *ngFor=\"let s of line.services; let last = last\">{{s.name}}{{last ? '' : ', '}}</span></p>\n                            <div class=\"row g-2 mb-2 overflow-scroll\">\n                                <ng-container *ngIf=\"!line.slotsLoading\">\n                                    <div class=\"col-4\" *ngFor=\"let time of line.slots\">\n                                        <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\n                                            (click)=\"selectSlotForLine(line, time)\">{{time ? time?.value : 'N/A'}}</div>\n                                    </div>\n                                    <p class=\"mb-0\" *ngIf=\"line.slots.length === 0\">No slots available for this date.</p>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #contactDetails>\n    <div class=\"w-60 contact_section\">\n        <div class=\"contact-header mb-2\">\n            <h1>Contact Details</h1>\n            <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\n        </div>\n\n        <div class=\"d-flex gap-3 details_container flex-column w-100\">\n            <div class=\"d-flex gap-4\">\n                <div [ngClass]=\"{'w-50' : selectedMode === 'HOME_VISIT', 'w-100' : selectedMode !== 'HOME_VISIT'}\">\n                    <div class=\"form-section card rounded-3 p-4 h-100\">\n                        <h3 class=\"section-title\">Personal Information</h3>\n\n                        <div class=\"mb-4\">\n                            <label class=\"form-label d-flex align-items-center\">\n                                Full Name\n                                <span class=\"required-asterisk\">*</span>\n                            </label>\n                            <input type=\"text\" class=\"form-control form-input rounded-2\"\n                                [(ngModel)]=\"appointmentPayload.customerDetail.name\"\n                                (ngModelChange)=\"checkRequiredValues()\" simpoLettersOnly>\n                        </div>\n\n                        <div class=\"mb-4\">\n                            <label class=\"form-label d-flex align-items-center\">\n                                Email Address\n                                <span class=\"required-asterisk\">*</span>\n                            </label>\n                            <input type=\"email\" class=\"form-control form-input rounded-2\"\n                                [(ngModel)]=\"appointmentPayload.customerDetail.email\"\n                                (ngModelChange)=\"checkRequiredValues()\"\n                                pattern=\"^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$\" #emailField=\"ngModel\"\n                                name=\"email\" required>\n                        </div>\n\n                        <div class=\"mb-0\">\n                            <label class=\"form-label d-flex align-items-center\">\n                                Phone Number\n                                <span class=\"required-asterisk\">*</span>\n                            </label>\n                            <input type=\"tel\" class=\"form-control  rounded-2\"\n                                [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\n                                (ngModelChange)=\"checkRequiredValues()\" simpoNumbersOnly\n                                [ngClass]=\"{'mobile_number' : appointmentPayload.customerDetail.phoneNumber.length != 10}\">\n                        </div>\n                    </div>\n                </div>\n                <!-- Home Visit address. Customer context: same saved-address flow as\n                     checkout/BookAppointmentComponent. Admin context (isAdminBooking): no\n                     logged-in customer account to read a saved address book from, so staff type\n                     the address manually instead. -->\n                <div class=\"w-50\" *ngIf=\"selectedMode === 'HOME_VISIT'\">\n                    <div class=\"form-section card rounded-3 p-4 h-100\">\n                        <h3 class=\"section-title\">Home Visit Details</h3>\n\n                        <ng-container *ngIf=\"!isAdminBooking; else manualHomeVisitAddress\">\n                            <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n                                <div class=\"address-info\">\n                                    <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n                                    <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n                                        {{defaultAddress?.stateName}}</div>\n                                    <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n                                </div>\n                            </div>\n                            <button type=\"button\" class=\"change-address-btn w-100\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">\n                                CHANGE OR ADD ADDRESS\n                            </button>\n\n                            <div class=\"addLinks\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n                                <mat-icon>add</mat-icon>\n                                <span class=\"ms-2\">Add an address</span>\n                            </div>\n                        </ng-container>\n\n                        <ng-template #manualHomeVisitAddress>\n                            <div class=\"mb-3\">\n                                <label class=\"form-label d-flex align-items-center\">Receiver Name</label>\n                                <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.receiverName\" (ngModelChange)=\"checkRequiredValues()\">\n                            </div>\n                            <div class=\"mb-3\">\n                                <label class=\"form-label d-flex align-items-center\">Receiver Phone</label>\n                                <input type=\"tel\" class=\"form-control form-input rounded-2\" simpoNumbersOnly [(ngModel)]=\"homeVisitAddress.receiverPhone\" (ngModelChange)=\"checkRequiredValues()\">\n                            </div>\n                            <div class=\"mb-3\">\n                                <label class=\"form-label d-flex align-items-center\">Address Line 1</label>\n                                <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.addressLine1\" (ngModelChange)=\"checkRequiredValues()\">\n                            </div>\n                            <div class=\"mb-3\">\n                                <label class=\"form-label d-flex align-items-center\">Address Line 2 (optional)</label>\n                                <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.addressLine2\">\n                            </div>\n                            <div class=\"d-flex gap-2 mb-3\">\n                                <div class=\"w-50\">\n                                    <label class=\"form-label d-flex align-items-center\">City</label>\n                                    <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.city\" (ngModelChange)=\"checkRequiredValues()\">\n                                </div>\n                                <div class=\"w-50\">\n                                    <label class=\"form-label d-flex align-items-center\">State</label>\n                                    <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.state\">\n                                </div>\n                            </div>\n                            <div class=\"mb-3\">\n                                <label class=\"form-label d-flex align-items-center\">Pincode</label>\n                                <input type=\"text\" class=\"form-control form-input rounded-2\" simpoNumbersOnly [(ngModel)]=\"homeVisitAddress.zipCode\" (ngModelChange)=\"checkRequiredValues()\">\n                            </div>\n                        </ng-template>\n\n                        <div class=\"mb-0 mt-3\">\n                            <label class=\"form-label d-flex align-items-center\">Special Instructions</label>\n                            <textarea class=\"form-control form-textarea rounded-2\"\n                                placeholder=\"Any special instructions for the professional (optional)\"\n                                [(ngModel)]=\"instructions\"></textarea>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"policies-container\"\n                *ngIf=\"cartServices[0]?.cancellationPolicy?.length > 0 || cartServices[0]?.reschedulePolicy?.length\">\n                <h2 class=\"policies-title\">Policies & Terms</h2>\n\n                <div class=\"policy-items-container d-flex flex-column gap-3\">\n                    <div class=\"policy-item d-flex justify-content-between align-items-center\"\n                        (click)=\"showCancellationPolicy = !showCancellationPolicy\">\n                        <h3 class=\"policy-title\">Cancellation Policy</h3>\n                        <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\n                                *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\n                            <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\n                        </div>\n                    </div>\n                    <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\n                        *ngIf=\"showCancellationPolicy\">\n                        <span *ngFor=\"let policy of cartServices[0]?.cancellationPolicy\">&#8226;\n                            {{policy}}</span>\n                    </div>\n\n                    <div class=\"policy-item d-flex justify-content-between align-items-center\"\n                        (click)=\"showReducingPolicy = !showReducingPolicy\">\n                        <h3 class=\"policy-title\">Rescheduling Policy</h3>\n                        <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\n                                *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\n                            <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\n                        </div>\n                    </div>\n                    <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\n                        *ngIf=\"showReducingPolicy\">\n                        <span *ngFor=\"let policy of cartServices[0]?.reschedulePolicy\">&#8226; {{policy}}</span>\n                    </div>\n                </div>\n\n                <div class=\"acceptance-section\">\n                    <input type=\"checkbox\" class=\"custom-checkbox\" [(ngModel)]=\"termsAndConditions\"\n                        (ngModelChange)=\"checkRequiredValues()\">\n                    <p class=\"acceptance-text\" style=\"margin-bottom:0px !important\">\n                        I understand and accept the cancellation & rescheduling policies.\n                    </p>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #paymentTab>\n    <div class=\"w-60 payment_section\">\n        <div class=\"w-100 h-100\">\n            <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\n                <div class=\"payment-header mb-3 w-100\">\n                    <h1 style=\"font-size:24px;font-weight: 600;\">Booking Summary</h1>\n                    <p class=\"payment-subtitle mb-0\">Review your booking before confirming</p>\n                </div>\n\n                <div class=\"booking-summary-card\" [ngClass]=\"{'w-100' : screenWidth < 475,'w-50':screenWidth > 475}\">\n                    <div *ngFor=\"let line of resolvedLines; let i = index\">\n                        <h2 class=\"summary-title\" *ngIf=\"resolvedLines.length > 1\">Line {{i + 1}}</h2>\n                        <div class=\"summary-row\" *ngFor=\"let s of line.services\">\n                            <div class=\"summary-label\">{{s.name}}</div>\n                            <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{servicePrice(s.id)}}</div>\n                        </div>\n                        <div class=\"summary-row\" *ngIf=\"line.staffName || line.selectedStaffName\">\n                            <div class=\"summary-label\">Professional</div>\n                            <div class=\"summary-value\">{{line.staffName || line.selectedStaffName}}</div>\n                        </div>\n                        <div class=\"summary-row\" *ngIf=\"selectedMode === 'STORE_VISIT'\">\n                            <div class=\"summary-label\">Location</div>\n                            <div class=\"summary-value\">{{selectedLocation?.storeName ?? 'N/A'}}</div>\n                        </div>\n                        <div class=\"summary-row\">\n                            <div class=\"summary-label\">Date & Time</div>\n                            <div class=\"summary-value\">{{selectedDateStr}} at {{line.selectedSlot?.value ?? 'N/A'}}</div>\n                        </div>\n                    </div>\n\n                    <div *ngIf=\"productCartItems.length > 0\">\n                        <h2 class=\"summary-title\">Products</h2>\n                        <div class=\"summary-row\" *ngFor=\"let p of productCartItems\">\n                            <div class=\"summary-label\">{{p.itemName}} x{{p.quantity}}</div>\n                            <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{(p.sellingPrice ?? p.price ?? 0) * (p.quantity ?? 1)}}</div>\n                        </div>\n                    </div>\n\n                    <h2 class=\"summary-title\">Payment</h2>\n                    <div class=\"summary-row\" *ngIf=\"homeVisitCharge > 0\">\n                        <div class=\"summary-label\">Home visit charge</div>\n                        <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{homeVisitCharge}}</div>\n                    </div>\n                    <div class=\"summary-row\">\n                        <div class=\"summary-label\">Total</div>\n                        <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{reviewTotal}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #statusTemplate>\n    <div class=\"booking-confirmation\">\n        <div class=\"success-icon\">\n            <div class=\"checkmark-circle\">\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\n                    class=\"w-100 h-100\" *ngIf=\"apiStatus\">\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\n                    class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\n            </div>\n        </div>\n\n        <div class=\"confirmation-content\">\n            <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\n            <p class=\"confirmation-message\">\n                {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\n                try again later'}}\n            </p>\n\n            <!-- Video Call link, when already present on the confirmed group (a paid Video Call's\n                 link only appears once payment verification completes, handled elsewhere - see\n                 verify-payment.component.ts, not this screen). -->\n            <div class=\"video-call-link-card d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus && selectedMode === 'VIDEO_CALL' && bookingGroup?.videoCallLink\">\n                <div class=\"details-card\">\n                    <h3 class=\"details-title\">Your Video Call Link</h3>\n                    <a [href]=\"bookingGroup.videoCallLink\" target=\"_blank\">{{bookingGroup.videoCallLink}}</a>\n                </div>\n            </div>\n\n            <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n                <div class=\"details-card\">\n                    <h3 class=\"details-title\">Appointment Details</h3>\n                    <div class=\"details-row\" *ngFor=\"let line of resolvedLines\">\n                        <span class=\"detail-label\">{{line.services.length ? (line.services[0].name) : 'Products'}}</span>\n                        <span class=\"detail-value\">{{selectedDateStr}} at {{line.selectedSlot?.value ?? 'N/A'}}</span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n                <div class=\"details-card\">\n                    <h3 class=\"details-title\">Payment</h3>\n                    <div class=\"details-row\" *ngIf=\"bookingGroup?.homeVisitCharge > 0\">\n                        <span class=\"detail-label\">Home visit charge</span>\n                        <span class=\"detail-value\">\u20B9{{bookingGroup.homeVisitCharge}}</span>\n                    </div>\n                    <div class=\"details-row\">\n                        <span class=\"detail-label\">Total</span>\n                        <span class=\"detail-value\">\u20B9{{bookingTotal}}</span>\n                    </div>\n                    <div class=\"details-row\">\n                        <span class=\"detail-label\">Paid</span>\n                        <span class=\"detail-value\">\u20B9{{bookingPaid}}</span>\n                    </div>\n                    <div class=\"details-row\" *ngIf=\"bookingDue > 0\">\n                        <span class=\"detail-label\">Due</span>\n                        <span class=\"detail-value\">\u20B9{{bookingDue}}</span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"done-actions d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n                <ng-container *ngIf=\"!isAdminContext; else adminDoneActions\">\n                    <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToMyBookings()\">View my bookings</button>\n                    <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"goToListing()\">Keep shopping</button>\n                </ng-container>\n                <ng-template #adminDoneActions>\n                    <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToAppointmentsList()\">Back to Appointments List</button>\n                    <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"bookAnother()\">Book Another</button>\n                </ng-template>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap\";mat-icon{font-family:Material Icons!important}:host{--font-sans: \"Outfit\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a;--color-primary: #230860;--color-secondary: #00b6ff;--color-accent-gradient: linear-gradient(135deg, #230860 0%, #00b6ff 100%);--color-success: #10b981;--color-success-bg: #ecfdf5;--color-error: #ef4444;--color-error-bg: #fef2f2;--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 16px;--border-radius-xl: 24px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px -3px rgba(35, 8, 96, .05), 0 4px 6px -4px rgba(35, 8, 96, .05);--shadow-xl: 0 20px 25px -5px rgba(35, 8, 96, .08), 0 8px 10px -6px rgba(35, 8, 96, .08);--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: all .4s cubic-bezier(.175, .885, .32, 1.275)}*{box-sizing:border-box;font-family:var(--font-sans)}.main_section{position:relative;height:100vh;background-color:var(--slate-50);display:flex;flex-direction:column;overflow:hidden}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.main_header{padding:15px;background:#fff;border-bottom:1px solid var(--slate-100);flex-shrink:0;box-shadow:0 2px 8px #00000003}.header{display:flex;align-items:center;justify-content:space-between}.back-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:var(--border-radius-md);background:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-700)!important;transition:var(--transition-smooth);font-weight:500;font-size:.9rem;cursor:pointer}.back-btn mat-icon{font-size:18px!important;width:18px!important;height:18px!important;color:var(--slate-700)!important;display:flex;align-items:center;justify-content:center}.back-btn:hover{background:var(--slate-100);transform:translate(-3px);color:var(--slate-900)!important}.header-title{flex-grow:1;text-align:right}.header-title h1{font-size:1.5rem;font-weight:700;margin-bottom:.2rem;color:var(--slate-900)!important;letter-spacing:-.025em}.header-title p{color:var(--slate-500)!important;font-size:.9rem;font-weight:500;margin-bottom:0}.progress-bar{width:100%;height:6px;background-color:var(--slate-100);margin-top:3px;border-radius:10px;overflow:hidden;position:relative}.progress-fill{height:100%;background:var(--color-accent-gradient);border-radius:10px;transition:width .5s cubic-bezier(.4,0,.2,1);position:relative}.progress-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#fff0,#ffffff4d,#fff0);animation:shimmer 2s infinite linear}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.main_body{flex-grow:1;overflow-y:auto;padding:10px;display:flex;justify-content:center;background:var(--slate-50)}.w-60{width:100%;max-width:800px}.service_section,.location_section,.staff-listing,.date_section,.contact_section,.payment_section,.booking-confirmation{animation:slideUp .5s cubic-bezier(.16,1,.3,1) forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}h2{font-size:1.5rem;font-weight:700;color:var(--slate-900)!important;letter-spacing:-.02em;margin-bottom:.3rem}p.subtitle,.service-selection p,.location_section p,.staff-subtitle,.datetime-subtitle,.contact-subtitle,.payment-subtitle{color:var(--slate-500)!important;font-size:13px;margin-bottom:2rem}.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding-bottom:2rem}.service-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px}.service-card:hover{border-color:var(--slate-400);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.service-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px;transform:translateY(-2px)}.service-card-selected:before,.location-card-selected:before{content:\"\\2713\";position:absolute;top:-10px;right:-10px;background:var(--color-accent-gradient);color:#fff!important;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;box-shadow:0 4px 8px #2308604d;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275);z-index:10}@keyframes popIn{0%{transform:scale(0)}to{transform:scale(1)}}.service-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}.service-icon{width:48px;height:48px;border-radius:var(--border-radius-md);background-color:var(--slate-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.service-icon mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:var(--color-primary)!important}.service-card-selected .service-icon{background:var(--slate-900)}.service-card-selected .service-icon mat-icon{color:#fff!important}.service-info{flex-grow:1}.service-title{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;line-height:1.3;margin-bottom:.2rem}.service-price{font-size:1.25rem;font-weight:800;color:var(--slate-900)!important;text-align:right}.service-duration{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;text-align:right;margin-top:.1rem}.service-description{color:var(--slate-600)!important;font-size:.9rem;line-height:1.5;margin-bottom:1.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home-visit{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--slate-700)!important;border:1px solid var(--slate-200);padding:.35rem .75rem;border-radius:20px;background-color:var(--slate-50);transition:var(--transition-smooth)}.home-visit img{width:14px;height:14px}.home-visit:before{content:\"\";display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--color-success);box-shadow:0 0 #10b98166;animation:pulseGlow 1.8s infinite}@keyframes pulseGlow{0%{box-shadow:0 0 #10b981b3}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.location-list{display:flex;flex-direction:column;gap:1.25rem;padding-bottom:2rem}.location-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm)}.location-card:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md)}.location-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px)}.location-content{display:flex;align-items:center}.location-info{display:flex;align-items:center;gap:1.25rem;width:100%}.location-icon{width:52px;height:52px;background-color:var(--slate-100);border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.location-icon img{width:28px;height:28px}.location-card-selected .location-icon{background:var(--slate-900)}.location-details{flex-grow:1}.location-details h3{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.3rem}.location-details p{font-size:.9rem;color:var(--slate-500)!important;font-weight:450;line-height:1.4;margin-bottom:0}.search-container{width:100%;margin-bottom:1.25rem}.search-input-wrapper{width:100%;background-color:var(--slate-100);border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;transition:var(--transition-smooth)}.search-input-wrapper:focus-within{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #23086014}.search-input{font-size:.95rem;font-weight:500;color:var(--slate-900)!important;background:transparent;outline:none;width:100%}.search-input::placeholder{color:var(--slate-400)}.search-icon{color:var(--slate-400)!important;font-size:20px!important;width:20px!important;height:20px!important}.clear-icon{color:var(--slate-400)!important;font-size:18px!important;width:18px!important;height:18px!important;transition:var(--transition-smooth)}.clear-icon:hover{color:var(--slate-600)!important}.staff-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;max-height:48vh;overflow-y:auto;padding-right:.5rem;padding-bottom:1rem}.staff-list::-webkit-scrollbar{width:6px}.staff-list::-webkit-scrollbar-track{background:var(--slate-50);border-radius:4px}.staff-list::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:4px}.staff-list::-webkit-scrollbar-thumb:hover{background:var(--slate-300)}.staff-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);margin-bottom:0!important}.staff-card:hover{border-color:var(--slate-300);transform:translateY(-2px);box-shadow:var(--shadow-md)}.staff-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px);margin-bottom:0!important}.staff-avatar{width:48px;height:48px;background:var(--color-accent-gradient);font-size:.95rem;font-weight:700;color:#fff!important;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px #2308601a;letter-spacing:.5px;transition:var(--transition-smooth)}.staff-card-selected .staff-avatar{transform:scale(1.05)}.staff-name{font-size:1.05rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.2rem;letter-spacing:-.015em}.staff-specialty{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;margin-bottom:0;text-transform:uppercase;letter-spacing:.05em}.selection-indicator{display:flex;align-items:center;justify-content:center;margin-left:auto;padding-left:1rem}.checkmark-circle-mini{width:24px;height:24px;border:2px solid var(--slate-300);border-radius:50%;background-color:#fff;transition:var(--transition-bounce);color:#fff!important}.checkmark-circle-mini.selected{background:var(--color-accent-gradient);border-color:transparent;box-shadow:0 3px 8px #23086040}.checkmark-circle-mini mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#fff!important;font-weight:800!important;display:flex;align-items:center;justify-content:center}.main_container{display:flex;gap:2rem;margin-bottom:2rem}.section-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm);height:100%}.section-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:10px!important;letter-spacing:-.01em}.date-picker-container{border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;display:flex;align-items:center;justify-content:space-between;transition:var(--transition-smooth);background-color:var(--slate-50);cursor:pointer}.date-picker-container:hover{border-color:var(--slate-400);background-color:#fff}.date-input{font-size:.95rem;font-weight:600;color:var(--slate-800)!important;background:transparent;border:none;outline:none;cursor:pointer;width:100%}.date-picker-container mat-icon{color:var(--color-primary)!important;font-size:20px!important;width:20px!important;height:20px!important}.datepicker-popover{position:absolute;z-index:1000;margin-top:4px;border-radius:var(--border-radius-lg);overflow:hidden;box-shadow:var(--shadow-xl);background:#fff;border:1px solid var(--slate-200);width:320px}::ng-deep .datepicker-calendar{border-radius:var(--border-radius-lg)!important;width:100%!important}::ng-deep .mat-calendar-header{background:var(--color-accent-gradient)!important;color:#fff!important;padding:.5rem!important}::ng-deep .mat-calendar-content{padding:8px!important}::ng-deep .mat-calendar-controls{margin:0!important}::ng-deep .mat-calendar-period-button{color:#fff!important;font-weight:700!important;font-size:1rem!important}::ng-deep .mat-calendar-arrow{fill:#fff!important}::ng-deep .mat-calendar-previous-button,::ng-deep .mat-calendar-next-button{color:#fff!important}::ng-deep .mat-calendar-body-cell{font-size:13px!important}::ng-deep .mat-calendar-body-cell-content{font-weight:600!important;color:var(--slate-800)!important;border-radius:8px!important}::ng-deep .mat-calendar-body-selected{background:var(--color-accent-gradient)!important;color:#fff!important;box-shadow:0 4px 10px #23086033!important}::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected){border:2px solid var(--color-primary)!important;color:var(--color-primary)!important}.time_selection{max-height:420px;display:flex;flex-direction:column}.time_selection .row{flex-grow:1;overflow-y:auto;padding-right:.25rem;margin-top:10px}.time-slot{background:#fff;border:1px solid var(--slate-200);font-size:.9rem;font-weight:600;color:var(--slate-800)!important;padding:.75rem .5rem;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);text-align:center;box-shadow:var(--shadow-sm)}.time-slot:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md);background-color:var(--slate-50)}.time-slot.selected{background:var(--color-accent-gradient);border-color:transparent;color:#fff!important;box-shadow:0 4px 12px #23086033}.form-section{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm)}.form-label{font-size:.85rem;font-weight:600;color:var(--slate-700)!important;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.required-asterisk{color:var(--color-error);margin-left:2px}.form-control,.form-input,.form-textarea{width:100%;background-color:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-900)!important;font-size:.95rem;font-weight:500;padding:.75rem 1rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);outline:none}.form-control:focus,.form-input:focus,.form-textarea:focus{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #2308601a}.form-textarea{min-height:100px;resize:vertical}.policies-container{background-color:#fff;border:1px solid var(--slate-200);padding:1.75rem;border-radius:var(--border-radius-lg);margin-top:1.5rem;box-shadow:var(--shadow-sm)}.policies-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1.25rem}.policy-item{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1rem 1.25rem;cursor:pointer;transition:var(--transition-smooth);display:flex;justify-content:space-between;align-items:center}.policy-item:hover{background-color:var(--slate-100);border-color:var(--slate-300)}.policy-title{font-size:.95rem;font-weight:600;color:var(--slate-800)!important}.policy-arrow mat-icon{color:var(--slate-500)!important;transition:var(--transition-smooth)}.cancellation_policies{background-color:var(--slate-50);padding:1rem 1.5rem;border-left:3px solid var(--color-primary);border-radius:0 0 var(--border-radius-md) var(--border-radius-md);margin-top:-4px;margin-bottom:1rem;font-size:.9rem;color:var(--slate-600)!important;line-height:1.5}.acceptance-section{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem}.custom-checkbox{width:20px;height:20px;border:2px solid var(--slate-300);border-radius:6px;cursor:pointer;transition:var(--transition-smooth);position:relative;appearance:none;background-color:#fff;outline:none}.custom-checkbox:checked{background:var(--color-accent-gradient);border-color:transparent}.custom-checkbox:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff!important;font-size:.75rem;font-weight:800}.acceptance-text{font-size:.95rem;color:var(--slate-700)!important;font-weight:500;-webkit-user-select:none;user-select:none;line-height:1.4}.booking-summary-card{background-color:#fff;border:1px solid var(--slate-200);padding:2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);position:relative}.booking-summary-card:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:10px;background-image:radial-gradient(circle,white 4px,transparent 5px);background-size:12px 12px;background-position:0 0;z-index:2}.summary-title{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important;border-bottom:2px dashed var(--slate-200);padding-bottom:1rem;margin-bottom:1.5rem;text-align:center}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--slate-100)}.summary-label{font-size:.95rem;color:var(--slate-500)!important;font-weight:500}.summary-value{font-size:.95rem;color:var(--slate-900)!important;font-weight:600;text-align:right}.total-row{margin-top:1rem;padding-top:1.25rem;border-top:2px dashed var(--slate-200);border-bottom:none}.total-row .summary-label{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important}.total-row .summary-value{font-size:1.5rem;font-weight:800;color:var(--color-primary)!important}.booking-confirmation{background:#fff;border:1px solid var(--slate-200);padding:3rem 2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;text-align:center;max-width:500px;margin:0 auto}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:96px;height:96px;display:flex;align-items:center;justify-content:center}.confirmation-title{font-size:1.5rem;font-weight:800;color:var(--slate-900)!important;margin-bottom:.5rem}.confirmation-message{font-size:1rem;color:var(--slate-500)!important;line-height:1.6;margin-bottom:2rem;font-weight:450}.details-card{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1.5rem;width:100%;margin-bottom:2rem;text-align:left}.details-title{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}.details-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed var(--slate-200)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.85rem;color:var(--slate-500)!important;font-weight:500}.detail-value{font-size:.9rem;color:var(--slate-900)!important;font-weight:600}.main_footer{border-top:1px solid var(--slate-200);background-color:#fff;padding:15px;flex-shrink:0;display:flex;justify-content:center;box-shadow:0 -4px 12px #00000005}.footer-buttons{width:100%;max-width:800px;display:flex;align-items:center}.back-footer-btn{font-size:.95rem;font-weight:600;color:var(--slate-600)!important;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);cursor:pointer}.back-footer-btn:hover{color:var(--slate-900)!important;background-color:var(--slate-100)}.continue-btn{background:var(--color-accent-gradient);color:#fff!important;border:none;padding:.75rem 2rem;border-radius:var(--border-radius-md);font-size:.95rem!important;font-weight:600;cursor:pointer;transition:var(--transition-smooth);box-shadow:0 4px 10px #23086033;width:max-content!important}.continue-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.continue-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.complete_booking,.pay-now-btn{background:var(--color-accent-gradient)!important;color:#fff!important;border:none;padding:.75rem 2.25rem!important;font-size:.95rem!important;font-weight:600;border-radius:var(--border-radius-md)!important;box-shadow:0 4px 12px #23086040;transition:var(--transition-smooth);cursor:pointer;display:flex;align-items:center;gap:.5rem;width:max-content!important}.complete_booking img,.pay-now-btn img{width:20px;height:20px;filter:brightness(0) invert(1)}.complete_booking:hover:not([disabled]),.pay-now-btn:hover:not([disabled]){transform:translateY(-2px);box-shadow:0 6px 18px #23086059}.complete_booking:disabled,.pay-now-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed;box-shadow:none}.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding:0;width:100%}.skeleton-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;height:180px;display:flex;flex-direction:column;justify-content:space-between}.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border-radius:4px}@keyframes loading-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:48px;height:48px;border-radius:var(--border-radius-md)}.skeleton-title{height:20px;width:60%;margin-bottom:.5rem}.skeleton-price{height:20px;width:30%}.skeleton-duration{height:12px;width:25%;margin-top:.25rem}.skeleton-description{height:14px;width:85%}.skeleton-badge{height:28px;width:120px;border-radius:20px}.time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;width:100%}.skeleton-time-slot{height:42px;border-radius:var(--border-radius-md);background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border:1px solid var(--slate-100)}@media screen and (max-width: 475px){.main_header{padding:1rem}.header-title h1{font-size:1.25rem}.back-btn{padding:.5rem .8rem}.back-btn span{display:none}.main_body{padding:15px}.services-grid{grid-template-columns:1fr;gap:1rem}.staff-list{grid-template-columns:1fr!important;gap:.85rem!important}.service-card,.service-card-selected{min-height:auto}.main_container{flex-direction:column;gap:1.5rem}.datepicker-popover{width:100%;left:0}.details_container{gap:1.5rem}.details_container>.d-flex{flex-direction:column;gap:1.5rem}.details_container>.d-flex>div{width:100%!important}.booking-summary-card{padding:1.25rem}.summary-title{font-size:1.15rem}.total-row .summary-label{font-size:1.1rem}.total-row .summary-value{font-size:1.3rem}.main_footer{padding:1rem}.continue-btn{padding:.75rem 1.5rem}}.shipping-info{border-radius:10px;padding:20px;margin-bottom:12px;border:1px solid var(--slate-200);box-shadow:var(--shadow-sm)}.address-info{margin-bottom:0}.address-name{font-weight:700;margin-bottom:8px;color:var(--slate-900)!important}.address-details{color:var(--slate-500)!important;margin-bottom:8px}.mobile-number{font-weight:700;color:var(--slate-900)!important;font-size:15px}.change-address-btn{font-size:.85rem!important;font-weight:700!important;padding:10px;background:#fff;border:1px solid var(--slate-200);border-radius:8px;color:var(--slate-900)!important;cursor:pointer;transition:var(--transition-smooth)}.change-address-btn:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.addLinks{padding:14px;border:1px dashed var(--slate-300);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;color:var(--slate-500)!important;margin-bottom:12px}.addLinks:hover{border-color:var(--color-primary);color:var(--color-primary)!important}h1{font-size:24px!important;font-weight:600!important}.done-actions{display:flex;gap:12px;width:100%}.done-btn{flex:1;max-width:220px;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);font-size:.95rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth);border:none}.done-btn-primary{background:var(--color-accent-gradient);color:#fff!important;box-shadow:0 4px 10px #23086033}.done-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.done-btn-secondary{background:#fff;color:var(--slate-600)!important;border:1px solid var(--slate-200)}.empty-state-mini{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:48px 16px;color:var(--slate-500)}.empty-state-mini mat-icon{font-size:32px;height:32px;width:32px;color:var(--slate-300);margin-bottom:4px}.empty-state-mini h4{margin:0;font-size:15px;font-weight:600;color:var(--slate-700)}.empty-state-mini p{margin:0;font-size:13px;color:var(--slate-500)}.done-btn-secondary:hover{background-color:var(--slate-100);color:var(--slate-900)!important}\n"] }]
+            args: [{ selector: 'simpo-appointment-booking', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatIcon, MatFormFieldModule, MatDatepickerModule, FormsModule, MatNativeDateModule, MatInputModule, MatDialogModule, LettersOnlyDirective, NumbersOnlyDirective, ToastModule, HoverDirective, HoverElementsComponent, BackgroundDirective], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\n<section class=\"main_section\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div class=\"main_header\">\n        <div class=\"header d-flex justify-content-between align-items-center\">\n            <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\n                (click)=\"goBack()\">\n                <mat-icon>keyboard_backspace</mat-icon><span *ngIf=\"screenWidth > 475\">Back to Home</span>\n            </div>\n            <div class=\"header-title\">\n                <h1>Book New Appointment</h1>\n                <p>{{businessName ?? \"N/A\" }}</p>\n            </div>\n        </div>\n\n        <div class=\"progress-bar\">\n            <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\n        </div>\n    </div>\n    <div class=\"main_body w-100 d-flex justify-content-center\">\n        <ng-container *ngIf=\"selectedTab === 'modeSelection'\">\n            <ng-container *ngTemplateOutlet=\"modeSelection\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab === 'serviceListing'\">\n            <ng-container *ngIf=\"!skeletonLoader\">\n                <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab === 'locationListing'\">\n            <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab === 'staffListing'\">\n            <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\n            <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab==='contactDetails'\">\n            <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab==='paymentTab'\">\n            <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\n            <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\n        </ng-container>\n    </div>\n    <div class=\"main_footer d-flex justify-content-center align-items-center\"\n        *ngIf=\"selectedTab!=='statusTemplate' && selectedTab!=='modeSelection'\">\n        <div class=\"footer-buttons\"\n            [ngStyle]=\"{'justify-content': selectedTab != 'serviceListing' ? 'space-between' : 'end'}\">\n            <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\"\n                *ngIf=\"selectedTab != 'serviceListing'\">Back</span>\n            <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\n                *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\n            <button class=\"cursor-pointer d-flex justify-content-evenly align-items-center\"\n                *ngIf=\"selectedTab==='paymentTab'\" (click)=\"confirmBooking()\" [disabled]=\"isProcessing\"\n                [ngClass]=\"{'pay-now-btn' : bookingGroup?.totalCollectedAtBooking > 0 || !bookingGroup,'complete_booking' : bookingGroup && !bookingGroup?.totalCollectedAtBooking}\">\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\n                {{isProcessing ? 'Please wait...' : 'Confirm Booking'}}\n            </button>\n        </div>\n    </div>\n</section>\n\n<ng-template #modeSelection>\n    <div class=\"w-60 service_section\">\n        <div class=\"service-selection\">\n            <h2>How would you like this?</h2>\n            <p>Choose how you'd like to be served</p>\n            <div class=\"services-grid\">\n                <div class=\"service-card\" (click)=\"selectMode('STORE_VISIT')\">\n                    <div class=\"service-header\">\n                        <div class=\"service-icon\"><mat-icon>storefront</mat-icon></div>\n                        <div class=\"service-info\">\n                            <div class=\"service-title\">Visit our Store</div>\n                        </div>\n                    </div>\n                    <div class=\"service-description\">Come to us at one of our locations</div>\n                </div>\n                <div class=\"service-card\" (click)=\"selectMode('HOME_VISIT')\">\n                    <div class=\"service-header\">\n                        <div class=\"service-icon\"><mat-icon>home</mat-icon></div>\n                        <div class=\"service-info\">\n                            <div class=\"service-title\">We come to you</div>\n                        </div>\n                    </div>\n                    <div class=\"service-description\">A professional visits your address</div>\n                </div>\n                <div class=\"service-card\" (click)=\"selectMode('VIDEO_CALL')\">\n                    <div class=\"service-header\">\n                        <div class=\"service-icon\"><mat-icon>videocam</mat-icon></div>\n                        <div class=\"service-info\">\n                            <div class=\"service-title\">Video consultation</div>\n                        </div>\n                    </div>\n                    <div class=\"service-description\">Connect over a video call</div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #serviceListing>\n    <div class=\"w-60 service_section\">\n        <div class=\"service-selection\">\n            <h2>Select a Service</h2>\n            <p>Choose the service(s) you'd like to book<span *ngIf=\"cartServices.length > 0\"> \u2014 {{cartServices.length}} selected</span></p>\n            <p *ngIf=\"productCartItems.length > 0\" class=\"cart-hint\">{{productCartItems.length}} product(s) already in your cart \u2014 you can continue without picking a service.</p>\n\n            <div class=\"services-grid\">\n                <ng-container *ngFor=\"let service of serviceData\">\n                    <div class=\"\" (click)=\"selectService(service)\"\n                        [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\n                        <div class=\" service-header\">\n                            <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\n                            <div class=\"service-info\">\n                                <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\n                            </div>\n                            <div>\n                                <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\n                                    service?.priceDetails?.price : 'N/A' }}</div>\n                                <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"service-description\" *ngIf=\"service?.description\">\n                            {{service?.description ? service?.description : 'N/A'}}\n                        </div>\n                        <div class=\"home-visit\" *ngIf=\"selectedMode === 'STORE_VISIT' && service?.homeAppointmentAvailable\"><img\n                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\n                            Visit Available</div>\n                    </div>\n                </ng-container>\n                <div class=\"empty-state-mini\" *ngIf=\"serviceData.length === 0\">\n                    <mat-icon>inventory_2</mat-icon>\n                    <h4>No services available</h4>\n                    <p *ngIf=\"selectedMode === 'HOME_VISIT'\">No services are currently available for home visits.</p>\n                    <p *ngIf=\"selectedMode === 'VIDEO_CALL'\">No services are currently available for video calls.</p>\n                    <p *ngIf=\"selectedMode === 'STORE_VISIT'\">This business hasn't added any services yet.</p>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #locationListing>\n    <div class=\"location_section\">\n        <div class=\"header flex-column align-items-start\">\n            <h1>Choose Location</h1>\n            <p>Select where you'd like to receive the service</p>\n        </div>\n\n        <div class=\"location-list\">\n            <ng-container *ngFor=\"let location of locationData\">\n                <div (click)=\"selectLocation(location)\"\n                    [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\n                    <div class=\"location-content\">\n                        <div class=\"location-info\">\n                            <div class=\"location-icon\"><img\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\n                            </div>\n                            <div class=\"location-details\">\n                                <div class=\"d-flex justify-content-between align-items-center\">\n                                    <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\n                                </div>\n                                <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\n                                    {{location?.addressDetails?.state}} {{location?.pincode}}</p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n            <div class=\"empty-state-mini\" *ngIf=\"locationData.length === 0\">\n                <mat-icon>storefront</mat-icon>\n                <h4>No locations available</h4>\n                <p>There's no location available for this service right now.</p>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #staffListing>\n    <div class=\"w-60 overflow-hidden staff-listing\">\n        <div class=\"d-flex w-100 h-100\">\n            <div class=\"w-100\">\n                <div class=\"staff-header mb-3\">\n                    <h1>Select Staff Member</h1>\n                    <p class=\"staff-subtitle mb-0\">Choose your preferred professional, or skip to have us assign the best available one</p>\n                </div>\n\n                <div class=\"search-container mb-4\">\n                    <div class=\"search-input-wrapper d-flex align-items-center\">\n                        <mat-icon class=\"search-icon me-2\">search</mat-icon>\n                        <input type=\"text\" class=\"search-input border-0 flex-grow-1\" placeholder=\"Search staff member by name...\" [(ngModel)]=\"staffSearchQuery\">\n                        <mat-icon class=\"clear-icon cursor-pointer ms-2\" *ngIf=\"staffSearchQuery\" (click)=\"staffSearchQuery = ''\">close</mat-icon>\n                    </div>\n                </div>\n\n                <!-- Pure product-only line: one flat staff list, same as the old single-service flow -->\n                <div class=\"staff-list\" *ngIf=\"cartServices.length === 0\">\n                    <ng-container *ngFor=\"let staff of filteredStaff\">\n                        <div class=\"card rounded-3 p-3\" (click)=\"selectStaffForProductOnlyLine(staff)\"\n                            [ngClass]=\"{ 'staff-card-selected' : staff?.selected, 'staff-card': !staff?.selected }\">\n                            <div class=\"d-flex align-items-center justify-content-between w-100\">\n                                <div class=\"d-flex align-items-center flex-grow-1\">\n                                    <div class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\n                                        {{staff?.staffName.slice(0,2).toUpperCase()}}\n                                    </div>\n                                    <div class=\"staff-details flex-grow-1\">\n                                        <h3 class=\"staff-name\">{{(staff?.staffName ? staff?.staffName : 'N/A') | titlecase}}</h3>\n                                        <p class=\"staff-specialty\">{{(businessName && businessName !== 'N/A') ? businessName : 'Booking Specialist'}}</p>\n                                    </div>\n                                </div>\n                                <div class=\"selection-indicator\">\n                                    <div class=\"checkmark-circle-mini d-flex align-items-center justify-content-center\" [class.selected]=\"staff?.selected\">\n                                        <mat-icon *ngIf=\"staff?.selected\">check</mat-icon>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <div class=\"empty-state-mini\" *ngIf=\"filteredStaff.length === 0\">\n                        <mat-icon>badge</mat-icon>\n                        <h4>No staff available</h4>\n                        <p>There's no staff member available for this service right now.</p>\n                    </div>\n                </div>\n\n                <!-- Bundled cart: one pool per line that resolution couldn't collapse to a single provider -->\n                <ng-container *ngIf=\"cartServices.length > 0\">\n                    <div class=\"staff-line-group mb-4\" *ngFor=\"let line of resolvedLines\">\n                        <ng-container *ngIf=\"line.candidateStaffPool?.length\">\n                            <h4 class=\"mb-2\">For {{line.services.length}} service(s): {{ (line.services | slice:0:3).length ? '' : '' }}<span *ngFor=\"let s of line.services; let last = last\">{{s.name}}{{last ? '' : ', '}}</span></h4>\n                            <div class=\"staff-list mb-3\">\n                                <ng-container *ngFor=\"let staff of line.candidateStaffPool\">\n                                    <div class=\"card rounded-3 p-3\" (click)=\"selectStaffForLine(line, staff)\"\n                                        [ngClass]=\"{ 'staff-card-selected' : line.selectedStaffId === staff.id, 'staff-card': line.selectedStaffId !== staff.id }\">\n                                        <div class=\"d-flex align-items-center justify-content-between w-100\">\n                                            <div class=\"d-flex align-items-center flex-grow-1\">\n                                                <div class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\n                                                    {{staff?.name?.slice(0,2)?.toUpperCase()}}\n                                                </div>\n                                                <div class=\"staff-details flex-grow-1\">\n                                                    <h3 class=\"staff-name\">{{(staff?.name ? staff?.name : 'N/A') | titlecase}}</h3>\n                                                </div>\n                                            </div>\n                                            <div class=\"selection-indicator\">\n                                                <div class=\"checkmark-circle-mini d-flex align-items-center justify-content-center\" [class.selected]=\"line.selectedStaffId === staff.id\">\n                                                    <mat-icon *ngIf=\"line.selectedStaffId === staff.id\">check</mat-icon>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                        <div class=\"empty-state-mini\" *ngIf=\"!line.candidateStaffPool?.length\">\n                            <mat-icon>badge</mat-icon>\n                            <h4>No staff available</h4>\n                            <p>No staff member is available for {{line.services.length}} service(s) in this line.</p>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dateSelection>\n    <div class=\"w-60 date_section\">\n        <div class=\"row justify-content-center h-100\">\n            <div class=\"col-12 h-100\">\n                <div class=\"datetime-header mb-2\">\n                    <h1>Select Date & Time</h1>\n                    <p class=\"datetime-subtitle mb-0\" *ngIf=\"!cameFromStaffListing\">Choose when you'd like your appointment</p>\n                    <p class=\"datetime-subtitle mb-0\" *ngIf=\"cameFromStaffListing\">\uD83D\uDCC5 {{selectedDateStr}}</p>\n                </div>\n\n                <div class=\"d-flex gap-4 main_container\">\n                    <div *ngIf=\"!cameFromStaffListing\" [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\n                        <div class=\"section-card card rounded-3 p-4 h-100\">\n                            <h3 class=\"section-title\">Select Date</h3>\n\n                            <div class=\"date-picker-container d-flex align-items-center justify-content-between\"\n                                (click)=\"$event.stopPropagation()\">\n                                <input type=\"text\" class=\"date-input border-0 rounded-2\" placeholder=\"dd-mm-yyyy\"\n                                    [value]=\"selectedDateStr\" readonly (click)=\"toggleCalendar($event)\">\n\n                                <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\n                            </div>\n                            <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\n                                <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\n                                    <mat-calendar [(selected)]=\"selectedDate\" [dateFilter]=\"dateFilter\"\n                                        (selectedChange)=\"onDateSelected($event)\" class=\"datepicker-calendar\">\n                                    </mat-calendar>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- One slot-picker per resolved line, side by side when there's more than one (design doc \u00A73b) -->\n                    <div class=\"time_selection\" [ngClass]=\"{'w-50' : screenWidth > 475 && !cameFromStaffListing, 'w-100':screenWidth < 475 || cameFromStaffListing}\" *ngIf=\"resolvedLines.length <= 1\">\n                        <div class=\"section-card card h-100 rounded-3 p-4\">\n                            <h3 class=\"section-title\">Available Times</h3>\n                            <div class=\"row g-2 mb-4 overflow-scroll\">\n                                <ng-container *ngIf=\"!skeletonLoader && resolvedLines[0]\">\n                                    <div class=\"col-4\" *ngFor=\"let time of resolvedLines[0].slots\">\n                                        <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\n                                            (click)=\"selectSlotForLine(resolvedLines[0], time)\">{{time ? time?.value : 'N/A'}}</div>\n                                    </div>\n                                    <p class=\"mb-0\" *ngIf=\"resolvedLines[0].slots.length === 0\">No slots available for this date.</p>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Multi-line case: each line gets its own full-width card with a staff header -->\n                <div class=\"d-flex gap-4 main_container flex-wrap\" *ngIf=\"resolvedLines.length > 1\">\n                    <div class=\"w-100\" *ngFor=\"let line of resolvedLines\">\n                        <div class=\"section-card card rounded-3 p-4\">\n                            <h3 class=\"section-title\">Professional: {{line.staffName || line.selectedStaffName || 'To be assigned'}}</h3>\n                            <p class=\"mb-2\" *ngIf=\"line.services.length\"><span *ngFor=\"let s of line.services; let last = last\">{{s.name}}{{last ? '' : ', '}}</span></p>\n                            <div class=\"row g-2 mb-2 overflow-scroll\">\n                                <ng-container *ngIf=\"!line.slotsLoading\">\n                                    <div class=\"col-4\" *ngFor=\"let time of line.slots\">\n                                        <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\n                                            (click)=\"selectSlotForLine(line, time)\">{{time ? time?.value : 'N/A'}}</div>\n                                    </div>\n                                    <p class=\"mb-0\" *ngIf=\"line.slots.length === 0\">No slots available for this date.</p>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #contactDetails>\n    <div class=\"w-60 contact_section\">\n        <div class=\"contact-header mb-2\">\n            <h1>Contact Details</h1>\n            <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\n        </div>\n\n        <div class=\"d-flex gap-3 details_container flex-column w-100\">\n            <div class=\"d-flex gap-4\">\n                <div [ngClass]=\"{'w-50' : selectedMode === 'HOME_VISIT', 'w-100' : selectedMode !== 'HOME_VISIT'}\">\n                    <div class=\"form-section card rounded-3 p-4 h-100\">\n                        <h3 class=\"section-title\">Personal Information</h3>\n\n                        <div class=\"mb-4\">\n                            <label class=\"form-label d-flex align-items-center\">\n                                Full Name\n                                <span class=\"required-asterisk\">*</span>\n                            </label>\n                            <input type=\"text\" class=\"form-control form-input rounded-2\"\n                                [(ngModel)]=\"appointmentPayload.customerDetail.name\"\n                                (ngModelChange)=\"checkRequiredValues()\" simpoLettersOnly>\n                        </div>\n\n                        <div class=\"mb-4\">\n                            <label class=\"form-label d-flex align-items-center\">\n                                Email Address\n                                <span class=\"required-asterisk\">*</span>\n                            </label>\n                            <input type=\"email\" class=\"form-control form-input rounded-2\"\n                                [(ngModel)]=\"appointmentPayload.customerDetail.email\"\n                                (ngModelChange)=\"checkRequiredValues()\"\n                                pattern=\"^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$\" #emailField=\"ngModel\"\n                                name=\"email\" required>\n                        </div>\n\n                        <div class=\"mb-0\">\n                            <label class=\"form-label d-flex align-items-center\">\n                                Phone Number\n                                <span class=\"required-asterisk\">*</span>\n                            </label>\n                            <input type=\"tel\" class=\"form-control  rounded-2\"\n                                [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\n                                (ngModelChange)=\"checkRequiredValues()\" simpoNumbersOnly\n                                [ngClass]=\"{'mobile_number' : appointmentPayload.customerDetail.phoneNumber.length != 10}\">\n                        </div>\n                    </div>\n                </div>\n                <!-- Home Visit address. Customer context: same saved-address flow as\n                     checkout/BookAppointmentComponent. Admin context (isAdminBooking): no\n                     logged-in customer account to read a saved address book from, so staff type\n                     the address manually instead. -->\n                <div class=\"w-50\" *ngIf=\"selectedMode === 'HOME_VISIT'\">\n                    <div class=\"form-section card rounded-3 p-4 h-100\">\n                        <h3 class=\"section-title\">Home Visit Details</h3>\n\n                        <ng-container *ngIf=\"!isAdminBooking; else manualHomeVisitAddress\">\n                            <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n                                <div class=\"address-info\">\n                                    <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n                                    <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n                                        {{defaultAddress?.stateName}}</div>\n                                    <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n                                </div>\n                            </div>\n                            <button type=\"button\" class=\"change-address-btn w-100\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">\n                                CHANGE OR ADD ADDRESS\n                            </button>\n\n                            <div class=\"addLinks\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n                                <mat-icon>add</mat-icon>\n                                <span class=\"ms-2\">Add an address</span>\n                            </div>\n                        </ng-container>\n\n                        <ng-template #manualHomeVisitAddress>\n                            <div class=\"mb-3\">\n                                <label class=\"form-label d-flex align-items-center\">Receiver Name</label>\n                                <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.receiverName\" (ngModelChange)=\"checkRequiredValues()\">\n                            </div>\n                            <div class=\"mb-3\">\n                                <label class=\"form-label d-flex align-items-center\">Receiver Phone</label>\n                                <input type=\"tel\" class=\"form-control form-input rounded-2\" simpoNumbersOnly [(ngModel)]=\"homeVisitAddress.receiverPhone\" (ngModelChange)=\"checkRequiredValues()\">\n                            </div>\n                            <div class=\"mb-3\">\n                                <label class=\"form-label d-flex align-items-center\">Address Line 1</label>\n                                <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.addressLine1\" (ngModelChange)=\"checkRequiredValues()\">\n                            </div>\n                            <div class=\"mb-3\">\n                                <label class=\"form-label d-flex align-items-center\">Address Line 2 (optional)</label>\n                                <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.addressLine2\">\n                            </div>\n                            <div class=\"d-flex gap-2 mb-3\">\n                                <div class=\"w-50\">\n                                    <label class=\"form-label d-flex align-items-center\">City</label>\n                                    <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.city\" (ngModelChange)=\"checkRequiredValues()\">\n                                </div>\n                                <div class=\"w-50\">\n                                    <label class=\"form-label d-flex align-items-center\">State</label>\n                                    <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.state\">\n                                </div>\n                            </div>\n                            <div class=\"mb-3\">\n                                <label class=\"form-label d-flex align-items-center\">Pincode</label>\n                                <input type=\"text\" class=\"form-control form-input rounded-2\" simpoNumbersOnly [(ngModel)]=\"homeVisitAddress.zipCode\" (ngModelChange)=\"checkRequiredValues()\">\n                            </div>\n                        </ng-template>\n\n                        <div class=\"mb-0 mt-3\">\n                            <label class=\"form-label d-flex align-items-center\">Special Instructions</label>\n                            <textarea class=\"form-control form-textarea rounded-2\"\n                                placeholder=\"Any special instructions for the professional (optional)\"\n                                [(ngModel)]=\"instructions\"></textarea>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"policies-container\"\n                *ngIf=\"cartServices[0]?.cancellationPolicy?.length > 0 || cartServices[0]?.reschedulePolicy?.length\">\n                <h2 class=\"policies-title\">Policies & Terms</h2>\n\n                <div class=\"policy-items-container d-flex flex-column gap-3\">\n                    <div class=\"policy-item d-flex justify-content-between align-items-center\"\n                        (click)=\"showCancellationPolicy = !showCancellationPolicy\">\n                        <h3 class=\"policy-title\">Cancellation Policy</h3>\n                        <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\n                                *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\n                            <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\n                        </div>\n                    </div>\n                    <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\n                        *ngIf=\"showCancellationPolicy\">\n                        <span *ngFor=\"let policy of cartServices[0]?.cancellationPolicy\">&#8226;\n                            {{policy}}</span>\n                    </div>\n\n                    <div class=\"policy-item d-flex justify-content-between align-items-center\"\n                        (click)=\"showReducingPolicy = !showReducingPolicy\">\n                        <h3 class=\"policy-title\">Rescheduling Policy</h3>\n                        <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\n                                *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\n                            <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\n                        </div>\n                    </div>\n                    <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\n                        *ngIf=\"showReducingPolicy\">\n                        <span *ngFor=\"let policy of cartServices[0]?.reschedulePolicy\">&#8226; {{policy}}</span>\n                    </div>\n                </div>\n\n                <div class=\"acceptance-section\">\n                    <input type=\"checkbox\" class=\"custom-checkbox\" [(ngModel)]=\"termsAndConditions\"\n                        (ngModelChange)=\"checkRequiredValues()\">\n                    <p class=\"acceptance-text\" style=\"margin-bottom:0px !important\">\n                        I understand and accept the cancellation & rescheduling policies.\n                    </p>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #paymentTab>\n    <div class=\"w-60 payment_section\">\n        <div class=\"w-100 h-100\">\n            <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\n                <div class=\"payment-header mb-3 w-100\">\n                    <h1 style=\"font-size:24px;font-weight: 600;\">Booking Summary</h1>\n                    <p class=\"payment-subtitle mb-0\">Review your booking before confirming</p>\n                </div>\n\n                <div class=\"booking-summary-card\" [ngClass]=\"{'w-100' : screenWidth < 475,'w-50':screenWidth > 475}\">\n                    <div *ngFor=\"let line of resolvedLines; let i = index\">\n                        <h2 class=\"summary-title\" *ngIf=\"resolvedLines.length > 1\">Line {{i + 1}}</h2>\n                        <div class=\"summary-row\" *ngFor=\"let s of line.services\">\n                            <div class=\"summary-label\">{{s.name}}</div>\n                            <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{servicePrice(s.id)}}</div>\n                        </div>\n                        <div class=\"summary-row\" *ngIf=\"line.staffName || line.selectedStaffName\">\n                            <div class=\"summary-label\">Professional</div>\n                            <div class=\"summary-value\">{{line.staffName || line.selectedStaffName}}</div>\n                        </div>\n                        <div class=\"summary-row\" *ngIf=\"selectedMode === 'STORE_VISIT'\">\n                            <div class=\"summary-label\">Location</div>\n                            <div class=\"summary-value\">{{selectedLocation?.storeName ?? 'N/A'}}</div>\n                        </div>\n                        <div class=\"summary-row\">\n                            <div class=\"summary-label\">Date & Time</div>\n                            <div class=\"summary-value\">{{selectedDateStr}} at {{line.selectedSlot?.value ?? 'N/A'}}</div>\n                        </div>\n                    </div>\n\n                    <div *ngIf=\"productCartItems.length > 0\">\n                        <h2 class=\"summary-title\">Products</h2>\n                        <div class=\"summary-row\" *ngFor=\"let p of productCartItems\">\n                            <div class=\"summary-label\">{{p.itemName}} x{{p.quantity}}</div>\n                            <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{(p.sellingPrice ?? p.price ?? 0) * (p.quantity ?? 1)}}</div>\n                        </div>\n                    </div>\n\n                    <h2 class=\"summary-title\">Payment</h2>\n                    <div class=\"summary-row\" *ngIf=\"homeVisitCharge > 0\">\n                        <div class=\"summary-label\">Home visit charge</div>\n                        <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{homeVisitCharge}}</div>\n                    </div>\n                    <div class=\"summary-row\">\n                        <div class=\"summary-label\">Total</div>\n                        <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{reviewTotal}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #statusTemplate>\n    <div class=\"booking-confirmation\">\n        <div class=\"success-icon\">\n            <div class=\"checkmark-circle\">\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\n                    class=\"w-100 h-100\" *ngIf=\"apiStatus\">\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\n                    class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\n            </div>\n        </div>\n\n        <div class=\"confirmation-content\">\n            <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\n            <p class=\"confirmation-message\">\n                {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\n                try again later'}}\n            </p>\n\n            <!-- Video Call link, when already present on the confirmed group (a paid Video Call's\n                 link only appears once payment verification completes, handled elsewhere - see\n                 verify-payment.component.ts, not this screen). -->\n            <div class=\"video-call-link-card d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus && selectedMode === 'VIDEO_CALL' && bookingGroup?.videoCallLink\">\n                <div class=\"details-card\">\n                    <h3 class=\"details-title\">Your Video Call Link</h3>\n                    <a [href]=\"bookingGroup.videoCallLink\" target=\"_blank\">{{bookingGroup.videoCallLink}}</a>\n                </div>\n            </div>\n\n            <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n                <div class=\"details-card\">\n                    <h3 class=\"details-title\">Appointment Details</h3>\n                    <div class=\"details-row\" *ngFor=\"let line of resolvedLines\">\n                        <span class=\"detail-label\">{{line.services.length ? (line.services[0].name) : 'Products'}}</span>\n                        <span class=\"detail-value\">{{selectedDateStr}} at {{line.selectedSlot?.value ?? 'N/A'}}</span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n                <div class=\"details-card\">\n                    <h3 class=\"details-title\">Payment</h3>\n                    <div class=\"details-row\" *ngIf=\"bookingGroup?.homeVisitCharge > 0\">\n                        <span class=\"detail-label\">Home visit charge</span>\n                        <span class=\"detail-value\">\u20B9{{bookingGroup.homeVisitCharge}}</span>\n                    </div>\n                    <div class=\"details-row\">\n                        <span class=\"detail-label\">Total</span>\n                        <span class=\"detail-value\">\u20B9{{bookingTotal}}</span>\n                    </div>\n                    <div class=\"details-row\">\n                        <span class=\"detail-label\">Paid</span>\n                        <span class=\"detail-value\">\u20B9{{bookingPaid}}</span>\n                    </div>\n                    <div class=\"details-row\" *ngIf=\"bookingDue > 0\">\n                        <span class=\"detail-label\">Due</span>\n                        <span class=\"detail-value\">\u20B9{{bookingDue}}</span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"done-actions d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n                <ng-container *ngIf=\"!isAdminContext; else adminDoneActions\">\n                    <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToMyBookings()\">View my bookings</button>\n                    <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"goToListing()\">Keep shopping</button>\n                </ng-container>\n                <ng-template #adminDoneActions>\n                    <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToAppointmentsList()\">Back to Appointments List</button>\n                    <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"bookAnother()\">Book Another</button>\n                </ng-template>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap\";mat-icon{font-family:Material Icons!important}:host{--font-sans: \"Outfit\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a;--color-primary: #230860;--color-secondary: #00b6ff;--color-accent-gradient: linear-gradient(135deg, #230860 0%, #00b6ff 100%);--color-success: #10b981;--color-success-bg: #ecfdf5;--color-error: #ef4444;--color-error-bg: #fef2f2;--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 16px;--border-radius-xl: 24px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px -3px rgba(35, 8, 96, .05), 0 4px 6px -4px rgba(35, 8, 96, .05);--shadow-xl: 0 20px 25px -5px rgba(35, 8, 96, .08), 0 8px 10px -6px rgba(35, 8, 96, .08);--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: all .4s cubic-bezier(.175, .885, .32, 1.275)}*{box-sizing:border-box;font-family:var(--font-sans)}.main_section{position:relative;height:100vh;background-color:var(--slate-50);display:flex;flex-direction:column;overflow:hidden}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.main_header{padding:15px;background:#fff;border-bottom:1px solid var(--slate-100);flex-shrink:0;box-shadow:0 2px 8px #00000003}.header{display:flex;align-items:center;justify-content:space-between}.back-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:var(--border-radius-md);background:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-700)!important;transition:var(--transition-smooth);font-weight:500;font-size:.9rem;cursor:pointer}.back-btn mat-icon{font-size:18px!important;width:18px!important;height:18px!important;color:var(--slate-700)!important;display:flex;align-items:center;justify-content:center}.back-btn:hover{background:var(--slate-100);transform:translate(-3px);color:var(--slate-900)!important}.header-title{flex-grow:1;text-align:right}.header-title h1{font-size:1.5rem;font-weight:700;margin-bottom:.2rem;color:var(--slate-900)!important;letter-spacing:-.025em}.header-title p{color:var(--slate-500)!important;font-size:.9rem;font-weight:500;margin-bottom:0}.progress-bar{width:100%;height:6px;background-color:var(--slate-100);margin-top:3px;border-radius:10px;overflow:hidden;position:relative}.progress-fill{height:100%;background:var(--color-accent-gradient);border-radius:10px;transition:width .5s cubic-bezier(.4,0,.2,1);position:relative}.progress-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#fff0,#ffffff4d,#fff0);animation:shimmer 2s infinite linear}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.main_body{flex-grow:1;overflow-y:auto;padding:10px;display:flex;justify-content:center;background:var(--slate-50)}.w-60{width:100%;max-width:800px}.service_section,.location_section,.staff-listing,.date_section,.contact_section,.payment_section,.booking-confirmation{animation:slideUp .5s cubic-bezier(.16,1,.3,1) forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}h2{font-size:1.5rem;font-weight:700;color:var(--slate-900)!important;letter-spacing:-.02em;margin-bottom:.3rem}p.subtitle,.service-selection p,.location_section p,.staff-subtitle,.datetime-subtitle,.contact-subtitle,.payment-subtitle{color:var(--slate-500)!important;font-size:13px;margin-bottom:2rem}.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding-bottom:2rem}.service-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px}.service-card:hover{border-color:var(--slate-400);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.service-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px;transform:translateY(-2px)}.service-card-selected:before,.location-card-selected:before{content:\"\\2713\";position:absolute;top:-10px;right:-10px;background:var(--color-accent-gradient);color:#fff!important;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;box-shadow:0 4px 8px #2308604d;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275);z-index:10}@keyframes popIn{0%{transform:scale(0)}to{transform:scale(1)}}.service-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}.service-icon{width:48px;height:48px;border-radius:var(--border-radius-md);background-color:var(--slate-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.service-icon mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:var(--color-primary)!important}.service-card-selected .service-icon{background:var(--slate-900)}.service-card-selected .service-icon mat-icon{color:#fff!important}.service-info{flex-grow:1}.service-title{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;line-height:1.3;margin-bottom:.2rem}.service-price{font-size:1.25rem;font-weight:800;color:var(--slate-900)!important;text-align:right}.service-duration{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;text-align:right;margin-top:.1rem}.service-description{color:var(--slate-600)!important;font-size:.9rem;line-height:1.5;margin-bottom:1.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home-visit{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--slate-700)!important;border:1px solid var(--slate-200);padding:.35rem .75rem;border-radius:20px;background-color:var(--slate-50);transition:var(--transition-smooth)}.home-visit img{width:14px;height:14px}.home-visit:before{content:\"\";display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--color-success);box-shadow:0 0 #10b98166;animation:pulseGlow 1.8s infinite}@keyframes pulseGlow{0%{box-shadow:0 0 #10b981b3}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.location-list{display:flex;flex-direction:column;gap:1.25rem;padding-bottom:2rem}.location-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm)}.location-card:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md)}.location-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px)}.location-content{display:flex;align-items:center}.location-info{display:flex;align-items:center;gap:1.25rem;width:100%}.location-icon{width:52px;height:52px;background-color:var(--slate-100);border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.location-icon img{width:28px;height:28px}.location-card-selected .location-icon{background:var(--slate-900)}.location-details{flex-grow:1}.location-details h3{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.3rem}.location-details p{font-size:.9rem;color:var(--slate-500)!important;font-weight:450;line-height:1.4;margin-bottom:0}.search-container{width:100%;margin-bottom:1.25rem}.search-input-wrapper{width:100%;background-color:var(--slate-100);border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;transition:var(--transition-smooth)}.search-input-wrapper:focus-within{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #23086014}.search-input{font-size:.95rem;font-weight:500;color:var(--slate-900)!important;background:transparent;outline:none;width:100%}.search-input::placeholder{color:var(--slate-400)}.search-icon{color:var(--slate-400)!important;font-size:20px!important;width:20px!important;height:20px!important}.clear-icon{color:var(--slate-400)!important;font-size:18px!important;width:18px!important;height:18px!important;transition:var(--transition-smooth)}.clear-icon:hover{color:var(--slate-600)!important}.staff-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;max-height:48vh;overflow-y:auto;padding-right:.5rem;padding-bottom:1rem}.staff-list::-webkit-scrollbar{width:6px}.staff-list::-webkit-scrollbar-track{background:var(--slate-50);border-radius:4px}.staff-list::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:4px}.staff-list::-webkit-scrollbar-thumb:hover{background:var(--slate-300)}.staff-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);margin-bottom:0!important}.staff-card:hover{border-color:var(--slate-300);transform:translateY(-2px);box-shadow:var(--shadow-md)}.staff-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px);margin-bottom:0!important}.staff-avatar{width:48px;height:48px;background:var(--color-accent-gradient);font-size:.95rem;font-weight:700;color:#fff!important;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px #2308601a;letter-spacing:.5px;transition:var(--transition-smooth)}.staff-card-selected .staff-avatar{transform:scale(1.05)}.staff-name{font-size:1.05rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.2rem;letter-spacing:-.015em}.staff-specialty{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;margin-bottom:0;text-transform:uppercase;letter-spacing:.05em}.selection-indicator{display:flex;align-items:center;justify-content:center;margin-left:auto;padding-left:1rem}.checkmark-circle-mini{width:24px;height:24px;border:2px solid var(--slate-300);border-radius:50%;background-color:#fff;transition:var(--transition-bounce);color:#fff!important}.checkmark-circle-mini.selected{background:var(--color-accent-gradient);border-color:transparent;box-shadow:0 3px 8px #23086040}.checkmark-circle-mini mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#fff!important;font-weight:800!important;display:flex;align-items:center;justify-content:center}.main_container{display:flex;gap:2rem;margin-bottom:2rem}.section-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm);height:100%}.section-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:10px!important;letter-spacing:-.01em}.date-picker-container{border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;display:flex;align-items:center;justify-content:space-between;transition:var(--transition-smooth);background-color:var(--slate-50);cursor:pointer}.date-picker-container:hover{border-color:var(--slate-400);background-color:#fff}.date-input{font-size:.95rem;font-weight:600;color:var(--slate-800)!important;background:transparent;border:none;outline:none;cursor:pointer;width:100%}.date-picker-container mat-icon{color:var(--color-primary)!important;font-size:20px!important;width:20px!important;height:20px!important}.datepicker-popover{position:absolute;z-index:1000;margin-top:4px;border-radius:var(--border-radius-lg);overflow:hidden;box-shadow:var(--shadow-xl);background:#fff;border:1px solid var(--slate-200);width:320px}::ng-deep .datepicker-calendar{border-radius:var(--border-radius-lg)!important;width:100%!important}::ng-deep .mat-calendar-header{background:var(--color-accent-gradient)!important;color:#fff!important;padding:.5rem!important}::ng-deep .mat-calendar-content{padding:8px!important}::ng-deep .mat-calendar-controls{margin:0!important}::ng-deep .mat-calendar-period-button{color:#fff!important;font-weight:700!important;font-size:1rem!important}::ng-deep .mat-calendar-arrow{fill:#fff!important}::ng-deep .mat-calendar-previous-button,::ng-deep .mat-calendar-next-button{color:#fff!important}::ng-deep .mat-calendar-body-cell{font-size:13px!important}::ng-deep .mat-calendar-body-cell-content{font-weight:600!important;color:var(--slate-800)!important;border-radius:8px!important}::ng-deep .mat-calendar-body-selected{background:var(--color-accent-gradient)!important;color:#fff!important;box-shadow:0 4px 10px #23086033!important}::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected){border:2px solid var(--color-primary)!important;color:var(--color-primary)!important}.time_selection{max-height:420px;display:flex;flex-direction:column}.time_selection .row{flex-grow:1;overflow-y:auto;padding-right:.25rem;margin-top:10px}.time-slot{background:#fff;border:1px solid var(--slate-200);font-size:.9rem;font-weight:600;color:var(--slate-800)!important;padding:.75rem .5rem;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);text-align:center;box-shadow:var(--shadow-sm)}.time-slot:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md);background-color:var(--slate-50)}.time-slot.selected{background:var(--color-accent-gradient);border-color:transparent;color:#fff!important;box-shadow:0 4px 12px #23086033}.form-section{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm)}.form-label{font-size:.85rem;font-weight:600;color:var(--slate-700)!important;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.required-asterisk{color:var(--color-error);margin-left:2px}.form-control,.form-input,.form-textarea{width:100%;background-color:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-900)!important;font-size:.95rem;font-weight:500;padding:.75rem 1rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);outline:none}.form-control:focus,.form-input:focus,.form-textarea:focus{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #2308601a}.form-textarea{min-height:100px;resize:vertical}.policies-container{background-color:#fff;border:1px solid var(--slate-200);padding:1.75rem;border-radius:var(--border-radius-lg);margin-top:1.5rem;box-shadow:var(--shadow-sm)}.policies-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1.25rem}.policy-item{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1rem 1.25rem;cursor:pointer;transition:var(--transition-smooth);display:flex;justify-content:space-between;align-items:center}.policy-item:hover{background-color:var(--slate-100);border-color:var(--slate-300)}.policy-title{font-size:.95rem;font-weight:600;color:var(--slate-800)!important}.policy-arrow mat-icon{color:var(--slate-500)!important;transition:var(--transition-smooth)}.cancellation_policies{background-color:var(--slate-50);padding:1rem 1.5rem;border-left:3px solid var(--color-primary);border-radius:0 0 var(--border-radius-md) var(--border-radius-md);margin-top:-4px;margin-bottom:1rem;font-size:.9rem;color:var(--slate-600)!important;line-height:1.5}.acceptance-section{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem}.custom-checkbox{width:20px;height:20px;border:2px solid var(--slate-300);border-radius:6px;cursor:pointer;transition:var(--transition-smooth);position:relative;appearance:none;background-color:#fff;outline:none}.custom-checkbox:checked{background:var(--color-accent-gradient);border-color:transparent}.custom-checkbox:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff!important;font-size:.75rem;font-weight:800}.acceptance-text{font-size:.95rem;color:var(--slate-700)!important;font-weight:500;-webkit-user-select:none;user-select:none;line-height:1.4}.booking-summary-card{background-color:#fff;border:1px solid var(--slate-200);padding:2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);position:relative}.booking-summary-card:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:10px;background-image:radial-gradient(circle,white 4px,transparent 5px);background-size:12px 12px;background-position:0 0;z-index:2}.summary-title{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important;border-bottom:2px dashed var(--slate-200);padding-bottom:1rem;margin-bottom:1.5rem;text-align:center}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--slate-100)}.summary-label{font-size:.95rem;color:var(--slate-500)!important;font-weight:500}.summary-value{font-size:.95rem;color:var(--slate-900)!important;font-weight:600;text-align:right}.total-row{margin-top:1rem;padding-top:1.25rem;border-top:2px dashed var(--slate-200);border-bottom:none}.total-row .summary-label{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important}.total-row .summary-value{font-size:1.5rem;font-weight:800;color:var(--color-primary)!important}.booking-confirmation{background:#fff;border:1px solid var(--slate-200);padding:3rem 2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;text-align:center;max-width:500px;margin:0 auto}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:96px;height:96px;display:flex;align-items:center;justify-content:center}.confirmation-title{font-size:1.5rem;font-weight:800;color:var(--slate-900)!important;margin-bottom:.5rem}.confirmation-message{font-size:1rem;color:var(--slate-500)!important;line-height:1.6;margin-bottom:2rem;font-weight:450}.details-card{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1.5rem;width:100%;margin-bottom:2rem;text-align:left}.details-title{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}.details-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed var(--slate-200)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.85rem;color:var(--slate-500)!important;font-weight:500}.detail-value{font-size:.9rem;color:var(--slate-900)!important;font-weight:600}.main_footer{border-top:1px solid var(--slate-200);background-color:#fff;padding:15px;flex-shrink:0;display:flex;justify-content:center;box-shadow:0 -4px 12px #00000005}.footer-buttons{width:100%;max-width:800px;display:flex;align-items:center}.back-footer-btn{font-size:.95rem;font-weight:600;color:var(--slate-600)!important;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);cursor:pointer}.back-footer-btn:hover{color:var(--slate-900)!important;background-color:var(--slate-100)}.continue-btn{background:var(--color-accent-gradient);color:#fff!important;border:none;padding:.75rem 2rem;border-radius:var(--border-radius-md);font-size:.95rem!important;font-weight:600;cursor:pointer;transition:var(--transition-smooth);box-shadow:0 4px 10px #23086033;width:max-content!important}.continue-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.continue-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.complete_booking,.pay-now-btn{background:var(--color-accent-gradient)!important;color:#fff!important;border:none;padding:.75rem 2.25rem!important;font-size:.95rem!important;font-weight:600;border-radius:var(--border-radius-md)!important;box-shadow:0 4px 12px #23086040;transition:var(--transition-smooth);cursor:pointer;display:flex;align-items:center;gap:.5rem;width:max-content!important}.complete_booking img,.pay-now-btn img{width:20px;height:20px;filter:brightness(0) invert(1)}.complete_booking:hover:not([disabled]),.pay-now-btn:hover:not([disabled]){transform:translateY(-2px);box-shadow:0 6px 18px #23086059}.complete_booking:disabled,.pay-now-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed;box-shadow:none}.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding:0;width:100%}.skeleton-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;height:180px;display:flex;flex-direction:column;justify-content:space-between}.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border-radius:4px}@keyframes loading-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:48px;height:48px;border-radius:var(--border-radius-md)}.skeleton-title{height:20px;width:60%;margin-bottom:.5rem}.skeleton-price{height:20px;width:30%}.skeleton-duration{height:12px;width:25%;margin-top:.25rem}.skeleton-description{height:14px;width:85%}.skeleton-badge{height:28px;width:120px;border-radius:20px}.time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;width:100%}.skeleton-time-slot{height:42px;border-radius:var(--border-radius-md);background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border:1px solid var(--slate-100)}@media screen and (max-width: 475px){.main_header{padding:1rem}.header-title h1{font-size:1.25rem}.back-btn{padding:.5rem .8rem}.back-btn span{display:none}.main_body{padding:15px}.services-grid{grid-template-columns:1fr;gap:1rem}.staff-list{grid-template-columns:1fr!important;gap:.85rem!important}.service-card,.service-card-selected{min-height:auto}.main_container{flex-direction:column;gap:1.5rem}.datepicker-popover{width:100%;left:0}.details_container{gap:1.5rem}.details_container>.d-flex{flex-direction:column;gap:1.5rem}.details_container>.d-flex>div{width:100%!important}.booking-summary-card{padding:1.25rem}.summary-title{font-size:1.15rem}.total-row .summary-label{font-size:1.1rem}.total-row .summary-value{font-size:1.3rem}.main_footer{padding:1rem}.continue-btn{padding:.75rem 1.5rem}}.shipping-info{border-radius:10px;padding:20px;margin-bottom:12px;border:1px solid var(--slate-200);box-shadow:var(--shadow-sm)}.address-info{margin-bottom:0}.address-name{font-weight:700;margin-bottom:8px;color:var(--slate-900)!important}.address-details{color:var(--slate-500)!important;margin-bottom:8px}.mobile-number{font-weight:700;color:var(--slate-900)!important;font-size:15px}.change-address-btn{font-size:.85rem!important;font-weight:700!important;padding:10px;background:#fff;border:1px solid var(--slate-200);border-radius:8px;color:var(--slate-900)!important;cursor:pointer;transition:var(--transition-smooth)}.change-address-btn:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.addLinks{padding:14px;border:1px dashed var(--slate-300);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;color:var(--slate-500)!important;margin-bottom:12px}.addLinks:hover{border-color:var(--color-primary);color:var(--color-primary)!important}h1{font-size:24px!important;font-weight:600!important}.done-actions{display:flex;gap:12px;width:100%}.done-btn{flex:1;max-width:220px;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);font-size:.95rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth);border:none}.done-btn-primary{background:var(--color-accent-gradient);color:#fff!important;box-shadow:0 4px 10px #23086033}.done-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.done-btn-secondary{background:#fff;color:var(--slate-600)!important;border:1px solid var(--slate-200)}.empty-state-mini{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:48px 16px;color:var(--slate-500)}.empty-state-mini mat-icon{font-size:32px;height:32px;width:32px;color:var(--slate-300);margin-bottom:4px}.empty-state-mini h4{margin:0;font-size:15px;font-weight:600;color:var(--slate-700)}.empty-state-mini p{margin:0;font-size:13px;color:var(--slate-500)}.done-btn-secondary:hover{background-color:var(--slate-100);color:var(--slate-900)!important}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: EventsService }, { type: i2$2.Router }, { type: i6$1.MessageService }, { type: BookingProductCartService }, { type: StorageServiceService }, { type: i3$2.MatDialog }, { type: i3$2.MatDialogRef, decorators: [{
                     type: Optional
                 }] }], propDecorators: { data: [{