simpo-component-library 3.6.990 → 3.6.991

package/fesm2022/simpo-component-library.mjs

@@ -10942,7 +10942,7 @@ class CartComponent extends BaseSection {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$2.Router }, { token: RestService }, { token: i3$2.MatDialog }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: i8$1.MatBottomSheet }, { token: i2$2.ActivatedRoute }, { token: BookingProductCartService }, { token: MAT_DIALOG_DATA, optional: true }, { token: i3$2.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], viewQueries: [{ propertyName: "d2", first: true, predicate: ["d2"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n  <ng-container *ngIf=\"data\">\n    <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\n      [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\n      (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\n      [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\n      <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\n        [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\n        *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\n        <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\n        <div class=\"bar\"></div>\n        <span class=\"timeline isActive\">Address</span>\n        <div class=\"bar\"></div>\n        <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\n      </div>\n      <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && (appointmentSettings?.homeVisitProductsEnabled || appointmentSettings?.videoCallProductsEnabled)\">\n        <!-- && appointmentSettings?.homeVisitProductsEnabled\" -->\n        <div class=\"cart-tabs\" [id]=\"data?.id\">\n          <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\n            (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\n          <div [ngClass]=\"{'selected-cart-tab': cartType==='BOOKING'}\" (click)=\"cartType='BOOKING'\">Booking Cart\n            ({{getTotalBookingItems}})</div>\n        </div>\n      </div>\n      <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\n        [simpoAnimation]=\"styles?.animation\">\n        <ng-container>\n          <ng-container *ngIf=\"cartType === 'SHOPPING'\">\n            <ng-container\n              *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"cartType === 'BOOKING'\">\n            <div class=\"w-100\">\n              <simpo-booking-cart-groups></simpo-booking-cart-groups>\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n      <div class=\"d-flex checkoutPage\"\n        *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\n        <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\n        </ng-container>\n      </div>\n\n\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n          [isEcommerce]=\"true\"></simpo-hover-elements>\n      </div>\n      <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n      </div>\n\n    </section>\n\n    <div class=\"schedule-panel-overlay\" *ngIf=\"schedulePanelOpen\">\n      <button type=\"button\" class=\"schedule-panel-backdrop\" (click)=\"closeSchedulePanel()\"></button>\n      <div class=\"schedule-panel\">\n        <div class=\"schedule-panel-header\">\n          <div>\n            <div class=\"schedule-panel-title\">Schedule a Video Call</div>\n            <div class=\"schedule-panel-subtitle\">Choose which pieces to include</div>\n          </div>\n          <button type=\"button\" class=\"schedule-panel-close\" (click)=\"closeSchedulePanel()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n        <div class=\"schedule-panel-body\">\n          <button type=\"button\" class=\"schedule-panel-row\" *ngFor=\"let item of responseData?.orderedItems\"\n            [class.selected]=\"isPanelSelected(item)\" (click)=\"togglePanelSelection(item)\">\n            <div class=\"schedule-panel-checkbox\" [class.checked]=\"isPanelSelected(item)\">\n              <mat-icon *ngIf=\"isPanelSelected(item)\">check</mat-icon>\n            </div>\n            <img class=\"schedule-panel-thumb\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\">\n            <div class=\"schedule-panel-info\">\n              <div class=\"schedule-panel-name\">{{item.itemName}}</div>\n            </div>\n          </button>\n        </div>\n        <div class=\"schedule-panel-footer\">\n          <div class=\"schedule-panel-selection-line\">{{panelSelectionLine}}</div>\n          <button type=\"button\" class=\"schedule-panel-cta\" [disabled]=\"panelInvalid\" (click)=\"confirmSchedulePanel()\">Continue</button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"!data\">\n    <section class=\"cart-window\">\n      <div class=\"heading-large lh-2 mb-3 header-sec\">\n        <div class=\"d-flex align-items-center\">\n          <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\n          <span>Your Cart</span>\n        </div>\n        <div class=\"saving\"></div>\n      </div>\n      <div class=\"offers\">\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\n          <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\n          <span>Avail Offers / Coupons</span>\n        </div>\n        <mat-icon>keyboard_arrow_right</mat-icon>\n      </div>\n      <div class=\"small-items\">\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\n          <div class=\"small-item\">\n            <div class=\"d-flex\" style=\"gap: 5px;\">\n              <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                  class=\"small-product-img\"\n                  [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n                  (click)=\"goToProductDetails(item)\">\n              </div>\n              <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\n              <div class=\"small-item-quantity\">\n                <span class=\"cursor\">-</span>\n                <span>{{item.quantity}}</span>\n                <span class=\"cursor\">+</span>\n              </div>\n              <div class=\"small-item-price\">\n                <div class=\"price-with-tax\">\n                  <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\n                </div>\n                <!-- <div class=\"price-with-tax\">\n                  <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\n                </div> -->\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n      <div class=\"fotter-sec\">\n        <div class=\"delivery-add d-flex\">\n          <mat-icon>home</mat-icon>\n          <div class=\"address\">Tetsting</div>\n        </div>\n        <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\n            style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\n          {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\n      </div>\n    </section>\n  </ng-container>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n<ng-template #CouponList>\n  <section class=\"coupons-listing-section\">\n    <div class=\"coupon-heading\">\n      <div class=\"back-btn\" (click)=\"closeDialogRef()\">\n        <mat-icon>keyboard_arrow_left</mat-icon>\n      </div>\n      <div class=\"header-text\">Apply Coupon</div>\n    </div>\n    <!-- <div class=\"coupon-search-sec\">\n      <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\n      <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\n    </div> -->\n    <div class=\"coupon-listing\">\n      <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\n        <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n          <div class=\"coupon-details\"\n            [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\n            *ngIf=\"couponDetails?.status\">\n            <div class=\"details__coupon-heading\">\n              <div class=\"coupon-brief\">\n                <div class=\"coupon-brief__left-sec\">\n                  <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n                    {{ couponDetails.couponCode | uppercase }}</div>\n                  <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\n                </div>\n                <div class=\"coupon-brief__right-sec\">\n                  <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n                    [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\n                    (click)=\"applyCoupon(couponDetails)\">Apply</div>\n                </div>\n              </div>\n              <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\n                <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\n                <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\n              </div> -->\n            </div>\n            <ng-container>\n              <!-- *ngIf=\"couponDetails.status\" -->\n              <div class=\"details-divider\"></div>\n              <ul class=\"details__coupon-terms\">\n                <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\n              </ul>\n            </ng-container>\n          </div>\n        </ng-container>\n      </ng-container>\n      <ng-template #showEmptyScreen>\n        <div class=\"empty-screen-container\">\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n          <div class=\"empty-screen__primary-text\">No Coupon Available</div>\n          <div class=\"empty-screen__secondary-text\">\n            Looks like there are no coupons at the moment\n          </div>\n          <!-- <div class=\"empty-screen__button\">Explore</div> -->\n        </div>\n      </ng-template>\n    </div>\n  </section>\n</ng-template>\n\n<ng-template #RedemptionVouchers>\n  <section class=\"vouchers-listing-section d-flex flex-column\">\n    <div class=\"coupon-heading d-flex align-items-center gap-2 p-3 fs-18 fw-600 border-bottom\">\n      <div class=\"back-btn cursor-pointer d-flex align-items-center\" (click)=\"closeDialogRef()\">\n        <mat-icon>keyboard_arrow_left</mat-icon>\n      </div>\n      <div class=\"header-text\">Coupons & Vouchers</div>\n    </div>\n\n    <!-- <div class=\"d-flex align-items-center tab-container justify-content-between gap-2 p-3\">\n      <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'COUPONS'}\"\n        (click)=\"redemptionType = 'COUPONS'\">\n        Coupons\n      </div>\n      <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'VOUCHERS'}\"\n        (click)=\"redemptionType = 'VOUCHERS'\">\n        Vouchers\n      </div>\n    </div> -->\n\n    <div class=\"coupon-listing d-flex flex-column gap-3 pt-3\" *ngIf=\"redemptionType === 'COUPONS'\">\n      <div class=\"d-flex align-items-center tab-container gap-3\">\n        <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n          [ngClass]=\"{'active-coupon': redemptionCouponType === 'REWARDS'}\" (click)=\"redemptionCouponType = 'REWARDS'\">\n          Rewards\n        </div>\n        <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n          [ngClass]=\"{'active-coupon': redemptionCouponType === 'DISCOUNTS'}\"\n          (click)=\"redemptionCouponType = 'DISCOUNTS'\">\n          Discounts\n        </div>\n      </div>\n      <ng-container *ngIf=\"redemptionCouponType === 'REWARDS'\">\n        <ng-container *ngIf=\"(listRedemptionCoupons?.vouchers?.length > 0) ; else showEmptyScreen\">\n          <ng-container *ngFor=\"let voucher of listRedemptionCoupons?.vouchers; let idx = index\">\n            <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n              <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n                <div class=\"coupon-brief__left-sec\">\n                  <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n                  <div class=\"coupon-desc fs-12 text-secondary\">\n                    Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%'\n                    }}\n                    off on your payment\n                  </div>\n                </div>\n                <div class=\"coupon-brief__right-sec\">\n                  <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">\n                    Apply</div>\n                </div>\n              </div>\n\n              <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n                <div class=\"code-label\">Code</div>\n                <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n              </div>\n\n              <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n                <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n                <span class=\"separator text-secondary\">|</span>\n                <span class=\"validity\">\n                  <mat-icon class=\"clock-icon\">schedule</mat-icon>\n                  Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n                </span>\n                <span class=\"separator text-secondary\" *ngIf=\"voucher.maxRedeemableAmount\">|</span>\n                <span class=\"min-order\" *ngIf=\"voucher.maxRedeemableAmount\">Max Redeemable Amount: \u20B9{{\n                  voucher.maxRedeemableAmount | number }}</span>\n              </div>\n\n              <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n            </div>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"redemptionCouponType === 'DISCOUNTS'\">\n        <ng-container *ngIf=\"(couponList.length > 0); else showEmptyDiscounts\">\n          <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n            <div class=\"voucher-details\" *ngIf=\"couponDetails?.status\">\n\n              <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n                <div class=\"coupon-brief__left-sec\">\n                  <div class=\"coupon-name fs-16 fw-600 mb-1\"\n                    [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n                    {{ couponDetails.couponCode | uppercase }}\n                  </div>\n                  <div class=\"coupon-desc fs-12 text-secondary\">\n                    {{ couponDetails.discountDescription | titlecase }}\n                  </div>\n                </div>\n                <div class=\"coupon-brief__right-sec\">\n                  <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\"\n                    [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n                    [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : 'not-allowed'}\"\n                    (click)=\"applyCoupon(couponDetails)\">\n                    Apply\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n                <div class=\"code-label\">Code</div>\n                <div class=\"code-value\">{{ couponDetails.couponCode | uppercase }}</div>\n              </div>\n\n              <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n                <span class=\"validity\">\n                  <mat-icon class=\"clock-icon\">schedule</mat-icon>\n                  {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}\n                </span>\n              </div>\n\n            </div>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n\n      <ng-template #showEmptyDiscounts>\n        <div class=\"empty-screen-container\">\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n          <div class=\"empty-screen__primary-text\">No Discount Coupons Available</div>\n          <div class=\"empty-screen__secondary-text\">\n            Looks like there are no discount coupons at the moment\n          </div>\n          <!-- <div class=\"empty-screen__button\">Explore</div> -->\n        </div>\n      </ng-template>\n\n      <ng-template #showEmptyScreen>\n        <div class=\"empty-screen-container\">\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n          <div class=\"empty-screen__primary-text\">No Coupons Available</div>\n          <div class=\"empty-screen__secondary-text\">Looks like there are no coupons</div>\n        </div>\n      </ng-template>\n    </div>\n\n    <div class=\"coupon-listing d-flex flex-column gap-3\" *ngIf=\"redemptionType === 'VOUCHERS'\">\n      <ng-container *ngIf=\"listRedemptionVouchers?.vouchers?.length > 0; else showEmptyScreen\">\n        <ng-container *ngFor=\"let voucher of listRedemptionVouchers?.vouchers; let idx = index\">\n          <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n            <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n              <div class=\"coupon-brief__left-sec\">\n                <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n                <div class=\"coupon-desc fs-12 text-secondary\">\n                  Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\n                  off on your payment\n                </div>\n              </div>\n              <div class=\"coupon-brief__right-sec\">\n                <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply\n                </div>\n              </div>\n            </div>\n\n            <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n              <div class=\"code-label\">Code</div>\n              <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n            </div>\n\n            <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n              <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n              <span class=\"separator text-secondary\">|</span>\n              <span class=\"validity\">\n                <mat-icon class=\"clock-icon\">schedule</mat-icon>\n                Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n              </span>\n            </div>\n\n            <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <ng-template #showEmptyScreen>\n        <div class=\"empty-screen-container\">\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n          <div class=\"empty-screen__primary-text\">No Vouchers Available</div>\n          <div class=\"empty-screen__secondary-text\">Looks like there are no vouchers</div>\n        </div>\n      </ng-template>\n    </div>\n  </section>\n</ng-template>\n\n<ng-template #CARTPAGE>\n  <div class=\"container\">\n    <div class=\"main-content\">\n      <div class=\"cart-items\">\n        <div class=\"cart-header\">\n          <h2>Your Cart</h2>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"CARTITEM;context:{data: responseData?.orderedItems}\"></ng-container>\n      </div>\n    </div>\n\n    <div class=\"sidebar\">\n      <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"getUrl()\">\n        <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\n          <div class=\"toogle-switch\">\n            <div class=\"form-check form-switch\">\n              <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\n                [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\n            </div>\n          </div>\n        </div>\n        <!-- <div class=\"select_matured_text  w-100 text-start cursor-pointer\"\n          *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\n          Select Matured Scheme\n        </div> -->\n        <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\n          *ngIf=\"selectedRedemption\">\n          Selected Scheme\n          <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\n            scheme-5000/M <span>Change</span></div>\n          <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\n            <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\n          </div>\n        </div> -->\n      </div>\n      <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\n        <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\n      </div>\n      <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && !referEarnExist\">\n        <div class=\"coupon-left\">\n          <div class=\"coupon-icon\"><mat-icon>percent</mat-icon></div>\n          <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply\n            Coupon</span>\n          <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon\n            Applied</span>\n        </div>\n        <svg *ngIf=\"!responseData.billdetails?.couponId\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" class=\"chevron-icon\" (click)=\"openDialog(CouponList)\">\n          <path d=\"m9 18 6-6-6-6\" />\n        </svg>\n        <span *ngIf=\"responseData.billdetails?.couponId\"\n          (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\n      </div>\n\n      <div class=\"promo-banner mb-3\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && appointmentSettings?.videoCallProductsEnabled\">\n        <div class=\"promo-banner-row\">\n          <div class=\"promo-text\">\n            <h3>See It Before You Buy It</h3>\n            <p>Experience our designs in detail via video call</p>\n          </div>\n          <button class=\"see-live-btn\" [disabled]=\"!hasCartItems\" (click)=\"openSchedulePanel()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"lucide lucide-video\">\n              <path d=\"m22 8-6 4 6 4V8Z\" />\n              <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\" />\n            </svg>\n            CONTINUE TO SCHEDULE\n          </button>\n        </div>\n        <div class=\"video-selection-line\">{{videoSelectionLine}}</div>\n        <a class=\"video-cart-hint\" *ngIf=\"videoCartCount > 0\" (click)=\"viewPendingVideoCart()\">{{videoCartCount}}\n          item{{videoCartCount === 1 ? '' : 's'}} waiting in your Video Call cart \u2014 view it</a>\n      </div>\n\n      <div class=\"plan-details-container p-3 rounded-4 bg-white text-dark voucher-details\"\n        *ngIf=\"referEarnExist && this?.redemptionPoints?.availablePoints > 0\">\n        <div class=\"fs-14 fw-500\">\n          Rewards Available\n        </div>\n        <div class=\"d-flex justify-content-between align-items-start border-bottom pb-2\">\n          <div class=\"avb_pts mt-2 mb-2\">\n            <span class=\"fs-16 fw-500 total_points text-secondary\">\n              <span class=\" fs-18 fw-600 text-dark\">{{(this?.redemptionPoints?.availablePoints || 0).toFixed(2)}}</span>\n              pts\n            </span>\n            <div class=\"total_value fs-12 text-secondary\">\n              = max \u20B9{{(this?.redemptionPoints?.pointsConvertedRupees || 0).toFixed(2)}} discount\n            </div>\n          </div>\n          <div class=\"wallte_icon\">\n            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\n          </div>\n        </div>\n        <div class=\"d-flex justify-content-between align-items-center mt-3\">\n          <div class=\"redemable_text\">\n            <div class=\"title_text\">\n              <div class=\"fs-14 fw-500\">\n                Redeem Points\n              </div>\n              <div class=\"fs-13 fs-400\">\n                Use your points for discount\n              </div>\n            </div>\n          </div>\n          <div class=\"toggle_btn\">\n            <label class=\"switch\">\n              <input type=\"checkbox\" id=\"toggleSwitch\" [checked]=\"isPointsRedeeming\"\n                (click)=\"onPointsRedeemingChange($event)\" />\n              <span class=\"slider\"></span>\n            </label>\n          </div>\n        </div>\n        <div class=\"mt-3 success_selected w-100 applied-coupon-card\" *ngIf=\"isPointsRedeeming\">\n          <div class=\"d-flex align-items-start gap-2\">\n            <div class=\"success_icon\">\n              <mat-icon class=\"d-flex justify-content-center align-items-center text-success\">check_circle</mat-icon>\n            </div>\n            <div class=\"success_text\">\n              <div class=\"fs-13 fw-500\">\n                You're saving \u20B9\n                {{totalSavingAmt || 0}}\n              </div>\n              <div class=\"fs-12 fs-400 text-success\">\n                {{totalSavingPoints}} points remaining after redemption\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Existing coupon row (keep as-is) -->\n      <div class=\"coupon-section d-flex flex-column voucher-details\" [id]=\"data?.id\"\n        *ngIf=\"cartType === 'SHOPPING' && referEarnExist\">\n        <div class=\"d-flex justify-content-between align-items-center w-100\">\n          <div class=\"coupon-left\">\n            Apply Coupon\n          </div>\n          <div (click)=\"addRedemptionCoupon(RedemptionVouchers)\">View All</div>\n        </div>\n\n        <!-- Applied Coupon Success Banner -->\n        <div class=\"applied-coupon-card w-100 mt-3 d-flex align-items-center justify-content-between\"\n          *ngIf=\"selectedVoucherId\">\n          <div class=\"applied-coupon-left d-flex align-items-center gap-3\">\n            <mat-icon class=\"success-check\">check_circle</mat-icon>\n            <div class=\"applied-coupon-info\">\n              <div class=\"applied-coupon-code\">Coupon {{ selectedVoucherCode }} applied!</div>\n              <div class=\"applied-coupon-saving\">You're saving\n                <span *ngIf=\"this.couponValueType === 'AMOUNT'\">\u20B9 {{selectedVoucherAmount || 0}}</span>\n                <span *ngIf=\"this.couponValueType === 'PERCENTAGE'\"> {{selectedVoucherPercentage || 0}}%</span>\n              </div>\n\n            </div>\n          </div>\n          <div class=\"remove-coupon-btn fs-14 fw-500 text-secondary cursor-pointer\"\n            (click)=\"removeRedemptionCoupon($event)\">Remove</div>\n        </div>\n      </div>\n\n      <div class=\"delivery-section\" *ngIf=\"getUrl()\">\n        <div class=\"delivery-header\">\n          <mat-icon>gps_fixed</mat-icon>\n          <span>Delivering to</span>\n          <span class=\"pincode\">{{pincode}}</span>\n          <!-- <a class=\"change-link\">Change Pincode</a> -->\n        </div>\n      </div>\n\n      <div class=\"summary-section\">\n        <div class=\"summary-title\">Summary</div>\n\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span class=\"summary-label\">Subtotal</span>\n          <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</span>\n        </div>\n\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\n          <span class=\"summary-label\">Points Redeemed</span>\n          <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\n        </div>\n\n        <div class=\"summary-row\"\n          *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'AMOUNT' && appliedVoucher)\">\n          <span class=\"summary-label\">Voucher Applied</span>\n          <span class=\"summary-value\">- \u20B9{{ selectedVoucherAmount || 0 }}</span>\n        </div>\n\n        <div class=\"summary-row\"\n          *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'PERCENTAGE' && appliedVoucher)\">\n          <span class=\"summary-label\">Voucher Applied</span>\n          <span class=\"summary-value\">- \u20B9{{ percentageReduced || 0 }}</span>\n        </div>\n\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount\">\n          <span class=\"summary-label\">Discount Amount</span>\n          <span class=\"summary-value\">\n            {{('\u20B9' + (responseData?.billdetails?.discountAmount | number: '1.0-2')) }}\n          </span>\n        </div>\n\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span class=\"summary-label\">Shipping</span>\n          <span class=\"summary-value\"\n            [ngClass]=\"{'savings': !responseData?.billdetails?.deliveryCharges || responseData.billdetails.deliveryCharges <= 0}\">\n            {{ (responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0) ? ('\u20B9' +\n            (responseData.billdetails.deliveryCharges | number: '1.0-2')) : 'Free' }}\n          </span>\n        </div>\n\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span class=\"summary-label\">Estimated Tax</span>\n          <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\n            responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n            number: '1.0-2'}}</span>\n        </div>\n\n        <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span class=\"summary-label\">Total</span>\n          <!-- <span class=\"summary-value\">\u20B9{{ responseData?.totalAmount | number: '1.0-2' }}</span> -->\n          <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\n            number: '1.0-2' }}</span>\n\n          <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\n            number: '1.0-2' }}</span>\n          <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n            (selectedVoucherAmount || 0)) | number:\n            '1.0-2'}}</span>\n          <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n            (percentageReduced || 0)) | number:\n            '1.0-2' }}</span>\n        </div>\n      </div>\n      <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n        [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n        *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n        Shopping'}}</button>\n      <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToCheckout()\" simpoButtonDirective\n        *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n        [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\n        Cart'}}</button>\n\n    </div>\n  </div>\n  <!-- <ng-container *ngIf=\"recommededData?.length\">\n    <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\"\n      [responseData]=\"recommededData\"></simpo-featured-products>\n  </ng-container> -->\n</ng-template>\n<ng-template #CHECKOUTPAGE>\n  <div class=\"checkout-left-panel\">\n    <div class=\"checkout-main-content\">\n      <!-- <div class=\"delivery-options\">\n        <div class=\"delivery-option active\">\n          <div class=\"delivery-icon\"></div>\n          HOME DELIVERY\n        </div>\n        <div class=\"delivery-option\">\n          <div class=\"delivery-icon\"></div>\n          STORE PICK-UP\n        </div>\n      </div> -->\n\n      <div class=\"section-title\">Shipping Address</div>\n\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\n      <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n        <mat-icon>add</mat-icon>\n      </div>\n\n      <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\n\n      <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\n        *ngIf=\"defaultAddress && !placeOrderLoader\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n        [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n        [backgroundInfo]=\"styles?.background\">\n        Place Order\n      </button>\n      <button class=\"btn w-100 mt-1 payment-btn\" simpoButtonDirective *ngIf=\"defaultAddress && placeOrderLoader\"\n        [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n        [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\">\n        Loading...\n      </button>\n\n    </div>\n  </div>\n\n  <div class=\"checkout-right-panel\">\n    <div class=\"order-summary\">\n      <div class=\"summary-title\">Order Summary</div>\n\n      <div class=\"checkout-product\">\n        <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n          <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\n            alt=\"\">\n          <div class=\"product-details\">\n            <div class=\"product-name\">{{item.itemName}}</div>\n            <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\n            <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\n          </div>\n        </div>\n\n      </div>\n\n      <div class=\"price-breakdown\">\n        <div class=\"price-row\">\n          <span>Total Price</span>\n          <span>\u20B9{{(responseData?.billdetails?.totalNetValue\n            ?? 0) | number: '1.0-2'}}</span>\n        </div>\n        <div class=\"price-row\">\n          <span>Total Tax</span>\n          <span>\u20B9{{((!responseData.billdetails?.couponId ?\n            responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n            number:\n            '1.0-2'}}</span>\n        </div>\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\n          <span class=\"summary-label\">Redeem Amount</span>\n          <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\n            '1.0-2'}}</span>\n        </div>\n\n        <div class=\"price-row discount\" *ngIf=\"responseData?.billdetails?.discountAmount && !isJewellery\">\n          <span>Coupon Discount</span>\n          <span>- \u20B9{{responseData?.billdetails?.discountAmount\n            | number: '1.0-2'}}</span>\n        </div>\n        <div class=\"price-row\"\n          *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n          <span>Delivery Charge</span>\n          <span>{{responseData.billdetails.deliveryCharges\n            |\n            number: '1.0-2'}}</span>\n        </div>\n        <div class=\"price-row total\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span>TOTAL AMOUNT</span>\n          <span *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\n            '1.0-2'}}</span>\n          <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\n            '1.0-2'}}</span>\n          <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n            (selectedVoucherAmount || 0)) | number:\n            '1.0-2'}}</span>\n          <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n            (responseData?.totalAmount * (selectedVoucherPercentage / 100) || 0)) | number:\n            '1.0-2' }}</span>\n        </div>\n      </div>\n    </div>\n\n  </div>\n</ng-template>\n\n<ng-template #CARTITEM let-products=\"data\">\n  <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\n    <div class=\"item-left\">\n      <div class=\"item-image\">\n        <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n          (click)=\"goToProductDetails(item)\" style=\"cursor: pointer;\">\n      </div>\n      <div class=\"item-details\">\n        <h3 class=\"item-title\">{{item.itemName}}</h3>\n        <div class=\"item-subtitle\" *ngIf=\"item.itemVariant\">\n          <span *ngFor=\"let varient of getKeys(item.itemVariant.properties); let last = last\">\n            {{ item.itemVariant.properties[varient] | titlecase }}<span *ngIf=\"!last\">, </span>\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"item-right\">\n      <div class=\"quantity-control\" *ngIf=\"cartType === 'SHOPPING'\">\n        <button class=\"qty-btn px-2\" (click)=\"decreaseQty(item)\" [disabled]=\"item.quantity === 1\">\n          <mat-icon>remove</mat-icon>\n        </button>\n        <span class=\"qty-value px-3\">{{item.quantity}}</span>\n        <button class=\"qty-btn px-2\" (click)=\"increaseQty(item)\">\n          <mat-icon>add</mat-icon>\n        </button>\n      </div>\n\n      <div class=\"item-price\">\n        \u20B9{{item.sellingPrice | number: '1.0-2'}}\n      </div>\n\n      <div class=\"delete-btn-circle\" (click)=\"removeItem(item)\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\n          <path d=\"M3 6h18\" />\n          <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\n          <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\n          <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\n          <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\n        </svg>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #EMPTYITEM>\n  <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\n    <div class=\"empty-cart-container d-flex flex-column\">\n      <div class=\"cart-image\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\n          [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\n      </div>\n      <div class=\"cart-text content-side\">\n        <ng-container *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"d-flex justify-content-center\"\n            [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\n          </div>\n        </ng-container>\n      </div>\n      <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n        [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n        [appButtonEditor]=\"edit ?? false\"\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n        Shopping'}}</button>\n    </div>\n  </section>\n</ng-template>\n\n<ng-template #SCHEME_REDEMPTION>\n  <div class=\"modal-body\">\n    <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\n      [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\n      <label for=\"individual\" class=\"scheme-card\">\n        <div class=\"scheme-info d-flex gap-1\">\n          <div class=\"form-check-radio\">\n            <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\n          </div>\n          <div class=\"right-side\">\n            <div class=\"scheme-name\">\n              <div class=\"scheme-title\">Individual Investment Scheme</div>\n              <div class=\"scheme-monthly\">\u20B98000/M</div>\n            </div>\n            <div class=\"scheme-details\">\n              <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\n              <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\n            </div>\n            <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\n          </div>\n        </div>\n      </label>\n    </div>\n    <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\n      Please add more \u20B9{{vaildAmount}} to reedem this scheme\n    </div>\n  </div>\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.cart-header{padding:16px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.cart-header h2{margin:0;font-size:18px;font-weight:500;color:#0f172a}.cart-item{display:flex!important;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;gap:20px;padding:0 8px;transition:background .2s}.cart-item:hover{background:#fbfcfe}.item-left{display:flex;align-items:center;flex:1}.item-right{display:flex;align-items:center;padding:15px;gap:32px}.item-image img{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid #f1f5f9}.item-details{display:flex;flex-direction:column;gap:4px}.item-title{margin:0;font-size:15px;font-weight:600;color:#0f172a;line-height:1.4}.item-subtitle{font-size:13px;color:#64748b;font-weight:400}.quantity-control{display:flex;align-items:center;border:1.5px solid #e2e8f0;border-radius:7px;overflow:hidden;height:38px;background:#fff;width:fit-content}.qty-btn{width:38px;height:100%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;transition:all .2s ease}.qty-btn:hover{background:#f8fafc;color:#0f172a}.qty-btn mat-icon{font-size:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.qty-value{width:32px;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:#0f172a;border-left:1.5px solid #e2e8f0;border-right:1.5px solid #e2e8f0}.item-price{font-size:18px;font-weight:700;color:#0f172a;min-width:60px;text-align:right;letter-spacing:-.01em}.delete-btn-circle{width:36px;height:36px;border-radius:50%;border:1px solid #fee2e2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ef4444;transition:all .2s ease}.delete-btn-circle:hover{background:#fef2f2;border-color:#fecaca;transform:scale(1.05);color:#dc2626}.delete-btn-circle svg{width:18px;height:18px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.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:#df2e2e;cursor:pointer;font-size:18px}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;width:100%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.fs-12{font-size:12px}.fs-18{font-size:18px}.b-1-b{border-width:0px 1px;border-style:solid;border-color:#000}.container{max-width:unset;padding:24px;display:flex;gap:24px;width:100%!important}.main-content{background:#fff;border-radius:12px;width:70%}.promo-banner{padding:16px 20px;display:flex;flex-direction:column;gap:10px;border-radius:8px;border:1px solid #e2e8f0}.promo-banner-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.promo-text h3{font-size:16px!important;font-weight:500;margin-bottom:4px}.promo-text p{font-size:.9rem!important;margin-bottom:0!important;color:#64748b}.see-live-btn{background:#fff;border:1px solid #e2e8f0;font-weight:600;color:#000;padding:8px 16px;border-radius:8px;font-size:12px!important;cursor:pointer;display:flex;align-items:center;gap:8px;width:max-content!important;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.see-live-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}.see-live-btn:disabled{color:#94a3b8;cursor:not-allowed;box-shadow:none}.see-live-btn:disabled:hover{background:#fff;border-color:#e2e8f0;transform:none}.see-live-btn svg{color:#6366f1}.video-selection-line{font-size:.8rem;color:#64748b}.video-cart-hint{font-size:.8rem;color:#6366f1;cursor:pointer;text-decoration:underline;width:max-content}.schedule-panel-overlay{position:fixed;inset:0;background:#141a2666;z-index:1200}.schedule-panel-backdrop{position:absolute;inset:0;border:none;background:none;cursor:default;padding:0}.schedule-panel{position:absolute;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:#fff;box-shadow:-20px 0 50px -20px #141a2659;display:flex;flex-direction:column}.schedule-panel-header{flex:none;padding:20px 22px;border-bottom:1px solid #e2e8f0;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.schedule-panel-title{font-size:17px;font-weight:600;color:#1b2436}.schedule-panel-subtitle{font-size:12.5px;color:#64748b}.schedule-panel-close{flex:none;border:none;background:none;cursor:pointer;color:#64748b;line-height:0;padding:3px}.schedule-panel-body{flex:1;min-height:0;overflow-y:auto;padding:16px 22px;display:flex;flex-direction:column;gap:10px}.schedule-panel-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;cursor:pointer;width:100%;background:#fff;border:1px solid #e2e8f0;text-align:left}.schedule-panel-row.selected{background:#f5f3ff;border-color:#c7d2fe}.schedule-panel-checkbox{width:18px;height:18px;flex:none;border:1.5px solid #cbd5e1;border-radius:4px;background:#fff;display:grid;place-items:center}.schedule-panel-checkbox.checked{background:#6366f1;border-color:#6366f1}.schedule-panel-checkbox mat-icon{color:#fff!important;font-size:13px!important;height:13px!important;width:13px!important}.schedule-panel-thumb{width:46px;height:46px;border-radius:6px;object-fit:cover;flex:none;background:#f3efe9}.schedule-panel-info{flex:1}.schedule-panel-name{font-size:13.5px;color:#1b2436}.schedule-panel-footer{flex:none;padding:16px 22px;border-top:1px solid #e2e8f0;display:flex;flex-direction:column;gap:10px}.schedule-panel-selection-line{font-size:11.5px;color:#64748b}.schedule-panel-cta{width:100%;height:48px;border:none;border-radius:8px;background:#7c3a11;color:#fff;font-size:14px;font-weight:600;cursor:pointer}.schedule-panel-cta:disabled{background:#cbd5e1;cursor:not-allowed}.cart-item{display:flex;gap:16px;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:15%;height:100px;border-radius:8px;object-fit:cover;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-weight:500;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px}.current-price{font-size:1rem;font-weight:600}.original-price{font-size:1rem;text-decoration:line-through}.discount{background:#fef3c7;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:32%}.coupon-section{border-radius:8px;padding:10px 15px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.coupon-section:hover{border-color:#cbd5e1;background-color:#f8fafc}.chevron-icon{color:#94a3b8;transition:transform .2s ease}.coupon-section:hover .chevron-icon{transform:translate(2px);color:#64748b}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.coupon-icon mat-icon{font-size:17px;width:17px!important;height:19px!important}.coupon-text{font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:8px;padding:20px;border:1px solid #e2e8f0}.summary-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:20px;letter-spacing:-.01em}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.summary-row:last-child{margin-bottom:0}.summary-label{font-size:14px;font-weight:400;color:#64748b}.summary-value{font-size:14px;font-weight:500;color:#0f172a}.summary-divider{height:1px;background:#f1f5f9;margin:16px 0;width:100%}.total-row .summary-label{font-size:16px;font-weight:600;color:#0f172a}.total-row .summary-value{font-size:16px;font-weight:700;color:#0f172a}.total-row{border-top:1px solid #e2e8f0;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px}.total-value{font-weight:700;font-size:18px}.place-order-btn{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;align-items:center;width:max-content;border-radius:8px;border:1px solid #e2e8f0}.cart-tabs div{padding:7px 10px;cursor:pointer;font-size:14px}.selected-cart-tab{margin:6px;background:#f1f5f9;border-radius:5px;color:#000!important;font-weight:500}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.cart-item{flex-direction:column!important;align-items:flex-start!important;padding:16px 12px!important;gap:16px!important}.item-left{width:100%!important;gap:16px!important;align-items:flex-start!important}.item-image{width:86px!important;height:86px!important;flex-shrink:0!important}.item-right{width:100%!important;justify-content:space-between!important;padding:0!important;gap:12px!important;margin-top:4px!important}.item-price{flex:1!important;text-align:right!important;margin-right:8px!important;font-size:16px!important}.item-title{font-size:14px!important;-webkit-line-clamp:2!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.quantity-control{height:34px!important}.qty-btn{width:34px!important}.qty-value{width:28px!important;font-size:13px!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}.vouchers-listing-section{min-width:unset!important;width:100vw!important}.separator{display:none!important}.coupon-meta{display:grid!important;grid-template-columns:1fr 1fr!important}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.w-fit{width:fit-content!important}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}.add-to-cart-parent{width:max-content;border:1px solid #000000;border-radius:8px}.cursor{cursor:pointer}.cart-text{max-width:600px;margin:0 auto;text-align:center}.cart-text div{word-break:break-word;overflow-wrap:break-word;white-space:normal}.switch{position:relative;display:inline-block;width:45px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:3px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translate(24px)}.vouchers-listing-section{position:relative;width:fit-content;min-width:500px;z-index:100;background:#fff;height:100vh}.vouchers-listing-section .coupon-heading{border-bottom:1px solid #eee}.vouchers-listing-section .coupon-listing{padding:12px 16px;overflow-y:auto;height:calc(97vh - 100px)}.voucher-details{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 4px #00000042}.voucher-details .coupon-brief .apply-offer-btn{background:#111;color:#fff;border-radius:10px;padding:6px 16px}.voucher-details .coupon-code-box{border:1.5px dashed #bbb;border-radius:8px;padding:8px 12px;margin-bottom:10px}.voucher-details .coupon-code-box .code-label{font-size:11px;color:#888;margin-bottom:2px}.voucher-details .coupon-code-box .code-row .code-value{font-weight:700;font-size:15px;letter-spacing:1px}.voucher-details .coupon-meta .clock-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.applied-coupon-card{background:#f0fff8;border-radius:12px;padding:12px 16px}.applied-coupon-card .applied-coupon-left .success-check{color:#22c55e;font-size:22px}.applied-coupon-card .applied-coupon-left .applied-coupon-code{font-weight:700;font-size:14px}.applied-coupon-card .applied-coupon-left .applied-coupon-saving{font-size:13px;color:#097d5f;margin-top:2px}.active-type{background:#111!important;color:#fff!important}.redemption-type{text-align:center;border-radius:10px;padding:6px 16px;background:#d3d3d36b;width:-webkit-fill-available!important}.wallte_icon{background:#000;border-radius:50px;padding:5px 9px 7px}.wallte_icon img{width:18px;height:18px}.fw-600{font-weight:600}.coupon-type{width:fit-content!important;border-radius:26px!important;background:transparent!important;border:1px solid #afafaf;color:#393838;text-align:center;padding:6px 16px}.active-coupon{background:transparent!important;border:2px solid black!important;color:#000!important}.my-close-btn{position:absolute!important;top:10px!important;right:10px!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.UpperCasePipe, name: "uppercase" }, { 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: MatDialogModule }, { 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: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], viewQueries: [{ propertyName: "d2", first: true, predicate: ["d2"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n  <ng-container *ngIf=\"data\">\n    <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\n      [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\n      (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\n      [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\n      <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\n        [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\n        *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\n        <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\n        <div class=\"bar\"></div>\n        <span class=\"timeline isActive\">Address</span>\n        <div class=\"bar\"></div>\n        <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\n      </div>\n      <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && (appointmentSettings?.homeVisitProductsEnabled || appointmentSettings?.videoCallProductsEnabled)\">\n        <!-- && appointmentSettings?.homeVisitProductsEnabled\" -->\n        <div class=\"cart-tabs\" [id]=\"data?.id\">\n          <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\n            (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\n          <div [ngClass]=\"{'selected-cart-tab': cartType==='BOOKING'}\" (click)=\"cartType='BOOKING'\">Booking Cart\n            ({{getTotalBookingItems}})</div>\n        </div>\n      </div>\n      <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\n        [simpoAnimation]=\"styles?.animation\">\n        <ng-container>\n          <ng-container *ngIf=\"cartType === 'SHOPPING'\">\n            <ng-container\n              *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"cartType === 'BOOKING'\">\n            <div class=\"w-100\">\n              <simpo-booking-cart-groups></simpo-booking-cart-groups>\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n      <div class=\"d-flex checkoutPage\"\n        *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\n        <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\n        </ng-container>\n      </div>\n\n\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n          [isEcommerce]=\"true\"></simpo-hover-elements>\n      </div>\n      <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n      </div>\n\n    </section>\n\n    <div class=\"schedule-panel-overlay\" *ngIf=\"schedulePanelOpen\">\n      <button type=\"button\" class=\"schedule-panel-backdrop\" (click)=\"closeSchedulePanel()\"></button>\n      <div class=\"schedule-panel\">\n        <div class=\"schedule-panel-header\">\n          <div class=\"schedule-panel-heading\">\n            <div class=\"schedule-panel-title\">Schedule a Video Call</div>\n            <div class=\"schedule-panel-subtitle\">Choose which pieces to include</div>\n          </div>\n          <button type=\"button\" class=\"schedule-panel-close\" (click)=\"closeSchedulePanel()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n        <div class=\"schedule-panel-body\">\n          <button type=\"button\" class=\"schedule-panel-row\" *ngFor=\"let item of responseData?.orderedItems\"\n            [class.selected]=\"isPanelSelected(item)\" (click)=\"togglePanelSelection(item)\">\n            <div class=\"schedule-panel-checkbox\" [class.checked]=\"isPanelSelected(item)\">\n              <mat-icon *ngIf=\"isPanelSelected(item)\">check</mat-icon>\n            </div>\n            <img class=\"schedule-panel-thumb\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\">\n            <div class=\"schedule-panel-info\">\n              <div class=\"schedule-panel-name\">{{item.itemName}}</div>\n            </div>\n          </button>\n        </div>\n        <div class=\"schedule-panel-footer\">\n          <div class=\"schedule-panel-selection-line\">{{panelSelectionLine}}</div>\n          <button type=\"button\" class=\"schedule-panel-cta\" [disabled]=\"panelInvalid\" (click)=\"confirmSchedulePanel()\">Continue</button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"!data\">\n    <section class=\"cart-window\">\n      <div class=\"heading-large lh-2 mb-3 header-sec\">\n        <div class=\"d-flex align-items-center\">\n          <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\n          <span>Your Cart</span>\n        </div>\n        <div class=\"saving\"></div>\n      </div>\n      <div class=\"offers\">\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\n          <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\n          <span>Avail Offers / Coupons</span>\n        </div>\n        <mat-icon>keyboard_arrow_right</mat-icon>\n      </div>\n      <div class=\"small-items\">\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\n          <div class=\"small-item\">\n            <div class=\"d-flex\" style=\"gap: 5px;\">\n              <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                  class=\"small-product-img\"\n                  [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n                  (click)=\"goToProductDetails(item)\">\n              </div>\n              <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\n              <div class=\"small-item-quantity\">\n                <span class=\"cursor\">-</span>\n                <span>{{item.quantity}}</span>\n                <span class=\"cursor\">+</span>\n              </div>\n              <div class=\"small-item-price\">\n                <div class=\"price-with-tax\">\n                  <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\n                </div>\n                <!-- <div class=\"price-with-tax\">\n                  <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\n                </div> -->\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n      <div class=\"fotter-sec\">\n        <div class=\"delivery-add d-flex\">\n          <mat-icon>home</mat-icon>\n          <div class=\"address\">Tetsting</div>\n        </div>\n        <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\n            style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\n          {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\n      </div>\n    </section>\n  </ng-container>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n<ng-template #CouponList>\n  <section class=\"coupons-listing-section\">\n    <div class=\"coupon-heading\">\n      <div class=\"back-btn\" (click)=\"closeDialogRef()\">\n        <mat-icon>keyboard_arrow_left</mat-icon>\n      </div>\n      <div class=\"header-text\">Apply Coupon</div>\n    </div>\n    <!-- <div class=\"coupon-search-sec\">\n      <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\n      <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\n    </div> -->\n    <div class=\"coupon-listing\">\n      <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\n        <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n          <div class=\"coupon-details\"\n            [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\n            *ngIf=\"couponDetails?.status\">\n            <div class=\"details__coupon-heading\">\n              <div class=\"coupon-brief\">\n                <div class=\"coupon-brief__left-sec\">\n                  <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n                    {{ couponDetails.couponCode | uppercase }}</div>\n                  <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\n                </div>\n                <div class=\"coupon-brief__right-sec\">\n                  <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n                    [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\n                    (click)=\"applyCoupon(couponDetails)\">Apply</div>\n                </div>\n              </div>\n              <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\n                <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\n                <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\n              </div> -->\n            </div>\n            <ng-container>\n              <!-- *ngIf=\"couponDetails.status\" -->\n              <div class=\"details-divider\"></div>\n              <ul class=\"details__coupon-terms\">\n                <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\n              </ul>\n            </ng-container>\n          </div>\n        </ng-container>\n      </ng-container>\n      <ng-template #showEmptyScreen>\n        <div class=\"empty-screen-container\">\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n          <div class=\"empty-screen__primary-text\">No Coupon Available</div>\n          <div class=\"empty-screen__secondary-text\">\n            Looks like there are no coupons at the moment\n          </div>\n          <!-- <div class=\"empty-screen__button\">Explore</div> -->\n        </div>\n      </ng-template>\n    </div>\n  </section>\n</ng-template>\n\n<ng-template #RedemptionVouchers>\n  <section class=\"vouchers-listing-section d-flex flex-column\">\n    <div class=\"coupon-heading d-flex align-items-center gap-2 p-3 fs-18 fw-600 border-bottom\">\n      <div class=\"back-btn cursor-pointer d-flex align-items-center\" (click)=\"closeDialogRef()\">\n        <mat-icon>keyboard_arrow_left</mat-icon>\n      </div>\n      <div class=\"header-text\">Coupons & Vouchers</div>\n    </div>\n\n    <!-- <div class=\"d-flex align-items-center tab-container justify-content-between gap-2 p-3\">\n      <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'COUPONS'}\"\n        (click)=\"redemptionType = 'COUPONS'\">\n        Coupons\n      </div>\n      <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'VOUCHERS'}\"\n        (click)=\"redemptionType = 'VOUCHERS'\">\n        Vouchers\n      </div>\n    </div> -->\n\n    <div class=\"coupon-listing d-flex flex-column gap-3 pt-3\" *ngIf=\"redemptionType === 'COUPONS'\">\n      <div class=\"d-flex align-items-center tab-container gap-3\">\n        <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n          [ngClass]=\"{'active-coupon': redemptionCouponType === 'REWARDS'}\" (click)=\"redemptionCouponType = 'REWARDS'\">\n          Rewards\n        </div>\n        <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n          [ngClass]=\"{'active-coupon': redemptionCouponType === 'DISCOUNTS'}\"\n          (click)=\"redemptionCouponType = 'DISCOUNTS'\">\n          Discounts\n        </div>\n      </div>\n      <ng-container *ngIf=\"redemptionCouponType === 'REWARDS'\">\n        <ng-container *ngIf=\"(listRedemptionCoupons?.vouchers?.length > 0) ; else showEmptyScreen\">\n          <ng-container *ngFor=\"let voucher of listRedemptionCoupons?.vouchers; let idx = index\">\n            <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n              <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n                <div class=\"coupon-brief__left-sec\">\n                  <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n                  <div class=\"coupon-desc fs-12 text-secondary\">\n                    Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%'\n                    }}\n                    off on your payment\n                  </div>\n                </div>\n                <div class=\"coupon-brief__right-sec\">\n                  <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">\n                    Apply</div>\n                </div>\n              </div>\n\n              <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n                <div class=\"code-label\">Code</div>\n                <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n              </div>\n\n              <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n                <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n                <span class=\"separator text-secondary\">|</span>\n                <span class=\"validity\">\n                  <mat-icon class=\"clock-icon\">schedule</mat-icon>\n                  Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n                </span>\n                <span class=\"separator text-secondary\" *ngIf=\"voucher.maxRedeemableAmount\">|</span>\n                <span class=\"min-order\" *ngIf=\"voucher.maxRedeemableAmount\">Max Redeemable Amount: \u20B9{{\n                  voucher.maxRedeemableAmount | number }}</span>\n              </div>\n\n              <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n            </div>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"redemptionCouponType === 'DISCOUNTS'\">\n        <ng-container *ngIf=\"(couponList.length > 0); else showEmptyDiscounts\">\n          <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n            <div class=\"voucher-details\" *ngIf=\"couponDetails?.status\">\n\n              <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n                <div class=\"coupon-brief__left-sec\">\n                  <div class=\"coupon-name fs-16 fw-600 mb-1\"\n                    [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n                    {{ couponDetails.couponCode | uppercase }}\n                  </div>\n                  <div class=\"coupon-desc fs-12 text-secondary\">\n                    {{ couponDetails.discountDescription | titlecase }}\n                  </div>\n                </div>\n                <div class=\"coupon-brief__right-sec\">\n                  <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\"\n                    [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n                    [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : 'not-allowed'}\"\n                    (click)=\"applyCoupon(couponDetails)\">\n                    Apply\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n                <div class=\"code-label\">Code</div>\n                <div class=\"code-value\">{{ couponDetails.couponCode | uppercase }}</div>\n              </div>\n\n              <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n                <span class=\"validity\">\n                  <mat-icon class=\"clock-icon\">schedule</mat-icon>\n                  {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}\n                </span>\n              </div>\n\n            </div>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n\n      <ng-template #showEmptyDiscounts>\n        <div class=\"empty-screen-container\">\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n          <div class=\"empty-screen__primary-text\">No Discount Coupons Available</div>\n          <div class=\"empty-screen__secondary-text\">\n            Looks like there are no discount coupons at the moment\n          </div>\n          <!-- <div class=\"empty-screen__button\">Explore</div> -->\n        </div>\n      </ng-template>\n\n      <ng-template #showEmptyScreen>\n        <div class=\"empty-screen-container\">\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n          <div class=\"empty-screen__primary-text\">No Coupons Available</div>\n          <div class=\"empty-screen__secondary-text\">Looks like there are no coupons</div>\n        </div>\n      </ng-template>\n    </div>\n\n    <div class=\"coupon-listing d-flex flex-column gap-3\" *ngIf=\"redemptionType === 'VOUCHERS'\">\n      <ng-container *ngIf=\"listRedemptionVouchers?.vouchers?.length > 0; else showEmptyScreen\">\n        <ng-container *ngFor=\"let voucher of listRedemptionVouchers?.vouchers; let idx = index\">\n          <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n            <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n              <div class=\"coupon-brief__left-sec\">\n                <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n                <div class=\"coupon-desc fs-12 text-secondary\">\n                  Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\n                  off on your payment\n                </div>\n              </div>\n              <div class=\"coupon-brief__right-sec\">\n                <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply\n                </div>\n              </div>\n            </div>\n\n            <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n              <div class=\"code-label\">Code</div>\n              <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n            </div>\n\n            <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n              <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n              <span class=\"separator text-secondary\">|</span>\n              <span class=\"validity\">\n                <mat-icon class=\"clock-icon\">schedule</mat-icon>\n                Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n              </span>\n            </div>\n\n            <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <ng-template #showEmptyScreen>\n        <div class=\"empty-screen-container\">\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n          <div class=\"empty-screen__primary-text\">No Vouchers Available</div>\n          <div class=\"empty-screen__secondary-text\">Looks like there are no vouchers</div>\n        </div>\n      </ng-template>\n    </div>\n  </section>\n</ng-template>\n\n<ng-template #CARTPAGE>\n  <div class=\"container\">\n    <div class=\"main-content\">\n      <div class=\"cart-items\">\n        <div class=\"cart-header\">\n          <h2>Your Cart</h2>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"CARTITEM;context:{data: responseData?.orderedItems}\"></ng-container>\n      </div>\n    </div>\n\n    <div class=\"sidebar\">\n      <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"getUrl()\">\n        <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\n          <div class=\"toogle-switch\">\n            <div class=\"form-check form-switch\">\n              <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\n                [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\n            </div>\n          </div>\n        </div>\n        <!-- <div class=\"select_matured_text  w-100 text-start cursor-pointer\"\n          *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\n          Select Matured Scheme\n        </div> -->\n        <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\n          *ngIf=\"selectedRedemption\">\n          Selected Scheme\n          <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\n            scheme-5000/M <span>Change</span></div>\n          <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\n            <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\n          </div>\n        </div> -->\n      </div>\n      <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\n        <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\n      </div>\n      <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && !referEarnExist\">\n        <div class=\"coupon-left\">\n          <div class=\"coupon-icon\"><mat-icon>percent</mat-icon></div>\n          <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply\n            Coupon</span>\n          <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon\n            Applied</span>\n        </div>\n        <svg *ngIf=\"!responseData.billdetails?.couponId\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" class=\"chevron-icon\" (click)=\"openDialog(CouponList)\">\n          <path d=\"m9 18 6-6-6-6\" />\n        </svg>\n        <span *ngIf=\"responseData.billdetails?.couponId\"\n          (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\n      </div>\n\n      <div class=\"promo-banner mb-3\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && appointmentSettings?.videoCallProductsEnabled\">\n        <div class=\"promo-banner-row\">\n          <div class=\"promo-text\">\n            <h3>See It Before You Buy It</h3>\n            <p>Experience our designs in detail via video call</p>\n          </div>\n          <button class=\"see-live-btn\" [disabled]=\"!hasCartItems\" (click)=\"openSchedulePanel()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"lucide lucide-video\">\n              <path d=\"m22 8-6 4 6 4V8Z\" />\n              <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\" />\n            </svg>\n            CONTINUE TO SCHEDULE\n          </button>\n        </div>\n        <div class=\"video-selection-line\">{{videoSelectionLine}}</div>\n        <a class=\"video-cart-hint\" *ngIf=\"videoCartCount > 0\" (click)=\"viewPendingVideoCart()\">{{videoCartCount}}\n          item{{videoCartCount === 1 ? '' : 's'}} waiting in your Video Call cart \u2014 view it</a>\n      </div>\n\n      <div class=\"plan-details-container p-3 rounded-4 bg-white text-dark voucher-details\"\n        *ngIf=\"referEarnExist && this?.redemptionPoints?.availablePoints > 0\">\n        <div class=\"fs-14 fw-500\">\n          Rewards Available\n        </div>\n        <div class=\"d-flex justify-content-between align-items-start border-bottom pb-2\">\n          <div class=\"avb_pts mt-2 mb-2\">\n            <span class=\"fs-16 fw-500 total_points text-secondary\">\n              <span class=\" fs-18 fw-600 text-dark\">{{(this?.redemptionPoints?.availablePoints || 0).toFixed(2)}}</span>\n              pts\n            </span>\n            <div class=\"total_value fs-12 text-secondary\">\n              = max \u20B9{{(this?.redemptionPoints?.pointsConvertedRupees || 0).toFixed(2)}} discount\n            </div>\n          </div>\n          <div class=\"wallte_icon\">\n            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\n          </div>\n        </div>\n        <div class=\"d-flex justify-content-between align-items-center mt-3\">\n          <div class=\"redemable_text\">\n            <div class=\"title_text\">\n              <div class=\"fs-14 fw-500\">\n                Redeem Points\n              </div>\n              <div class=\"fs-13 fs-400\">\n                Use your points for discount\n              </div>\n            </div>\n          </div>\n          <div class=\"toggle_btn\">\n            <label class=\"switch\">\n              <input type=\"checkbox\" id=\"toggleSwitch\" [checked]=\"isPointsRedeeming\"\n                (click)=\"onPointsRedeemingChange($event)\" />\n              <span class=\"slider\"></span>\n            </label>\n          </div>\n        </div>\n        <div class=\"mt-3 success_selected w-100 applied-coupon-card\" *ngIf=\"isPointsRedeeming\">\n          <div class=\"d-flex align-items-start gap-2\">\n            <div class=\"success_icon\">\n              <mat-icon class=\"d-flex justify-content-center align-items-center text-success\">check_circle</mat-icon>\n            </div>\n            <div class=\"success_text\">\n              <div class=\"fs-13 fw-500\">\n                You're saving \u20B9\n                {{totalSavingAmt || 0}}\n              </div>\n              <div class=\"fs-12 fs-400 text-success\">\n                {{totalSavingPoints}} points remaining after redemption\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Existing coupon row (keep as-is) -->\n      <div class=\"coupon-section d-flex flex-column voucher-details\" [id]=\"data?.id\"\n        *ngIf=\"cartType === 'SHOPPING' && referEarnExist\">\n        <div class=\"d-flex justify-content-between align-items-center w-100\">\n          <div class=\"coupon-left\">\n            Apply Coupon\n          </div>\n          <div (click)=\"addRedemptionCoupon(RedemptionVouchers)\">View All</div>\n        </div>\n\n        <!-- Applied Coupon Success Banner -->\n        <div class=\"applied-coupon-card w-100 mt-3 d-flex align-items-center justify-content-between\"\n          *ngIf=\"selectedVoucherId\">\n          <div class=\"applied-coupon-left d-flex align-items-center gap-3\">\n            <mat-icon class=\"success-check\">check_circle</mat-icon>\n            <div class=\"applied-coupon-info\">\n              <div class=\"applied-coupon-code\">Coupon {{ selectedVoucherCode }} applied!</div>\n              <div class=\"applied-coupon-saving\">You're saving\n                <span *ngIf=\"this.couponValueType === 'AMOUNT'\">\u20B9 {{selectedVoucherAmount || 0}}</span>\n                <span *ngIf=\"this.couponValueType === 'PERCENTAGE'\"> {{selectedVoucherPercentage || 0}}%</span>\n              </div>\n\n            </div>\n          </div>\n          <div class=\"remove-coupon-btn fs-14 fw-500 text-secondary cursor-pointer\"\n            (click)=\"removeRedemptionCoupon($event)\">Remove</div>\n        </div>\n      </div>\n\n      <div class=\"delivery-section\" *ngIf=\"getUrl()\">\n        <div class=\"delivery-header\">\n          <mat-icon>gps_fixed</mat-icon>\n          <span>Delivering to</span>\n          <span class=\"pincode\">{{pincode}}</span>\n          <!-- <a class=\"change-link\">Change Pincode</a> -->\n        </div>\n      </div>\n\n      <div class=\"summary-section\">\n        <div class=\"summary-title\">Summary</div>\n\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span class=\"summary-label\">Subtotal</span>\n          <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</span>\n        </div>\n\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\n          <span class=\"summary-label\">Points Redeemed</span>\n          <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\n        </div>\n\n        <div class=\"summary-row\"\n          *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'AMOUNT' && appliedVoucher)\">\n          <span class=\"summary-label\">Voucher Applied</span>\n          <span class=\"summary-value\">- \u20B9{{ selectedVoucherAmount || 0 }}</span>\n        </div>\n\n        <div class=\"summary-row\"\n          *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'PERCENTAGE' && appliedVoucher)\">\n          <span class=\"summary-label\">Voucher Applied</span>\n          <span class=\"summary-value\">- \u20B9{{ percentageReduced || 0 }}</span>\n        </div>\n\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount\">\n          <span class=\"summary-label\">Discount Amount</span>\n          <span class=\"summary-value\">\n            {{('\u20B9' + (responseData?.billdetails?.discountAmount | number: '1.0-2')) }}\n          </span>\n        </div>\n\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span class=\"summary-label\">Shipping</span>\n          <span class=\"summary-value\"\n            [ngClass]=\"{'savings': !responseData?.billdetails?.deliveryCharges || responseData.billdetails.deliveryCharges <= 0}\">\n            {{ (responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0) ? ('\u20B9' +\n            (responseData.billdetails.deliveryCharges | number: '1.0-2')) : 'Free' }}\n          </span>\n        </div>\n\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span class=\"summary-label\">Estimated Tax</span>\n          <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\n            responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n            number: '1.0-2'}}</span>\n        </div>\n\n        <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span class=\"summary-label\">Total</span>\n          <!-- <span class=\"summary-value\">\u20B9{{ responseData?.totalAmount | number: '1.0-2' }}</span> -->\n          <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\n            number: '1.0-2' }}</span>\n\n          <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\n            number: '1.0-2' }}</span>\n          <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n            (selectedVoucherAmount || 0)) | number:\n            '1.0-2'}}</span>\n          <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n            (percentageReduced || 0)) | number:\n            '1.0-2' }}</span>\n        </div>\n      </div>\n      <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n        [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n        *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n        Shopping'}}</button>\n      <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToCheckout()\" simpoButtonDirective\n        *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n        [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\n        Cart'}}</button>\n\n    </div>\n  </div>\n  <!-- <ng-container *ngIf=\"recommededData?.length\">\n    <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\"\n      [responseData]=\"recommededData\"></simpo-featured-products>\n  </ng-container> -->\n</ng-template>\n<ng-template #CHECKOUTPAGE>\n  <div class=\"checkout-left-panel\">\n    <div class=\"checkout-main-content\">\n      <!-- <div class=\"delivery-options\">\n        <div class=\"delivery-option active\">\n          <div class=\"delivery-icon\"></div>\n          HOME DELIVERY\n        </div>\n        <div class=\"delivery-option\">\n          <div class=\"delivery-icon\"></div>\n          STORE PICK-UP\n        </div>\n      </div> -->\n\n      <div class=\"section-title\">Shipping Address</div>\n\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\n      <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n        <mat-icon>add</mat-icon>\n      </div>\n\n      <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\n\n      <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\n        *ngIf=\"defaultAddress && !placeOrderLoader\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n        [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n        [backgroundInfo]=\"styles?.background\">\n        Place Order\n      </button>\n      <button class=\"btn w-100 mt-1 payment-btn\" simpoButtonDirective *ngIf=\"defaultAddress && placeOrderLoader\"\n        [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n        [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\">\n        Loading...\n      </button>\n\n    </div>\n  </div>\n\n  <div class=\"checkout-right-panel\">\n    <div class=\"order-summary\">\n      <div class=\"summary-title\">Order Summary</div>\n\n      <div class=\"checkout-product\">\n        <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n          <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\n            alt=\"\">\n          <div class=\"product-details\">\n            <div class=\"product-name\">{{item.itemName}}</div>\n            <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\n            <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\n          </div>\n        </div>\n\n      </div>\n\n      <div class=\"price-breakdown\">\n        <div class=\"price-row\">\n          <span>Total Price</span>\n          <span>\u20B9{{(responseData?.billdetails?.totalNetValue\n            ?? 0) | number: '1.0-2'}}</span>\n        </div>\n        <div class=\"price-row\">\n          <span>Total Tax</span>\n          <span>\u20B9{{((!responseData.billdetails?.couponId ?\n            responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n            number:\n            '1.0-2'}}</span>\n        </div>\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\n          <span class=\"summary-label\">Redeem Amount</span>\n          <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\n            '1.0-2'}}</span>\n        </div>\n\n        <div class=\"price-row discount\" *ngIf=\"responseData?.billdetails?.discountAmount && !isJewellery\">\n          <span>Coupon Discount</span>\n          <span>- \u20B9{{responseData?.billdetails?.discountAmount\n            | number: '1.0-2'}}</span>\n        </div>\n        <div class=\"price-row\"\n          *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n          <span>Delivery Charge</span>\n          <span>{{responseData.billdetails.deliveryCharges\n            |\n            number: '1.0-2'}}</span>\n        </div>\n        <div class=\"price-row total\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span>TOTAL AMOUNT</span>\n          <span *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\n            '1.0-2'}}</span>\n          <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\n            '1.0-2'}}</span>\n          <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n            (selectedVoucherAmount || 0)) | number:\n            '1.0-2'}}</span>\n          <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n            (responseData?.totalAmount * (selectedVoucherPercentage / 100) || 0)) | number:\n            '1.0-2' }}</span>\n        </div>\n      </div>\n    </div>\n\n  </div>\n</ng-template>\n\n<ng-template #CARTITEM let-products=\"data\">\n  <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\n    <div class=\"item-left\">\n      <div class=\"item-image\">\n        <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n          (click)=\"goToProductDetails(item)\" style=\"cursor: pointer;\">\n      </div>\n      <div class=\"item-details\">\n        <h3 class=\"item-title\">{{item.itemName}}</h3>\n        <div class=\"item-subtitle\" *ngIf=\"item.itemVariant\">\n          <span *ngFor=\"let varient of getKeys(item.itemVariant.properties); let last = last\">\n            {{ item.itemVariant.properties[varient] | titlecase }}<span *ngIf=\"!last\">, </span>\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"item-right\">\n      <div class=\"quantity-control\" *ngIf=\"cartType === 'SHOPPING'\">\n        <button class=\"qty-btn px-2\" (click)=\"decreaseQty(item)\" [disabled]=\"item.quantity === 1\">\n          <mat-icon>remove</mat-icon>\n        </button>\n        <span class=\"qty-value px-3\">{{item.quantity}}</span>\n        <button class=\"qty-btn px-2\" (click)=\"increaseQty(item)\">\n          <mat-icon>add</mat-icon>\n        </button>\n      </div>\n\n      <div class=\"item-price\">\n        \u20B9{{item.sellingPrice | number: '1.0-2'}}\n      </div>\n\n      <div class=\"delete-btn-circle\" (click)=\"removeItem(item)\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\n          <path d=\"M3 6h18\" />\n          <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\n          <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\n          <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\n          <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\n        </svg>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #EMPTYITEM>\n  <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\n    <div class=\"empty-cart-container d-flex flex-column\">\n      <div class=\"cart-image\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\n          [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\n      </div>\n      <div class=\"cart-text content-side\">\n        <ng-container *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"d-flex justify-content-center\"\n            [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\n          </div>\n        </ng-container>\n      </div>\n      <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n        [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n        [appButtonEditor]=\"edit ?? false\"\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n        Shopping'}}</button>\n    </div>\n  </section>\n</ng-template>\n\n<ng-template #SCHEME_REDEMPTION>\n  <div class=\"modal-body\">\n    <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\n      [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\n      <label for=\"individual\" class=\"scheme-card\">\n        <div class=\"scheme-info d-flex gap-1\">\n          <div class=\"form-check-radio\">\n            <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\n          </div>\n          <div class=\"right-side\">\n            <div class=\"scheme-name\">\n              <div class=\"scheme-title\">Individual Investment Scheme</div>\n              <div class=\"scheme-monthly\">\u20B98000/M</div>\n            </div>\n            <div class=\"scheme-details\">\n              <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\n              <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\n            </div>\n            <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\n          </div>\n        </div>\n      </label>\n    </div>\n    <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\n      Please add more \u20B9{{vaildAmount}} to reedem this scheme\n    </div>\n  </div>\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.cart-header{padding:16px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.cart-header h2{margin:0;font-size:18px;font-weight:500;color:#0f172a}.cart-item{display:flex!important;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;gap:20px;padding:0 8px;transition:background .2s}.cart-item:hover{background:#fbfcfe}.item-left{display:flex;align-items:center;flex:1}.item-right{display:flex;align-items:center;padding:15px;gap:32px}.item-image img{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid #f1f5f9}.item-details{display:flex;flex-direction:column;gap:4px}.item-title{margin:0;font-size:15px;font-weight:600;color:#0f172a;line-height:1.4}.item-subtitle{font-size:13px;color:#64748b;font-weight:400}.quantity-control{display:flex;align-items:center;border:1.5px solid #e2e8f0;border-radius:7px;overflow:hidden;height:38px;background:#fff;width:fit-content}.qty-btn{width:38px;height:100%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;transition:all .2s ease}.qty-btn:hover{background:#f8fafc;color:#0f172a}.qty-btn mat-icon{font-size:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.qty-value{width:32px;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:#0f172a;border-left:1.5px solid #e2e8f0;border-right:1.5px solid #e2e8f0}.item-price{font-size:18px;font-weight:700;color:#0f172a;min-width:60px;text-align:right;letter-spacing:-.01em}.delete-btn-circle{width:36px;height:36px;border-radius:50%;border:1px solid #fee2e2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ef4444;transition:all .2s ease}.delete-btn-circle:hover{background:#fef2f2;border-color:#fecaca;transform:scale(1.05);color:#dc2626}.delete-btn-circle svg{width:18px;height:18px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.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:#df2e2e;cursor:pointer;font-size:18px}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;width:100%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.fs-12{font-size:12px}.fs-18{font-size:18px}.b-1-b{border-width:0px 1px;border-style:solid;border-color:#000}.container{max-width:unset;padding:24px;display:flex;gap:24px;width:100%!important}.main-content{background:#fff;border-radius:12px;width:70%}.promo-banner{padding:16px 20px;display:flex;flex-direction:column;gap:10px;border-radius:8px;border:1px solid #e2e8f0}.promo-banner-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.promo-text h3{font-size:16px!important;font-weight:500;margin-bottom:4px}.promo-text p{font-size:.9rem!important;margin-bottom:0!important;color:#64748b}.see-live-btn{background:#fff;border:1px solid #e2e8f0;font-weight:600;color:#000;padding:8px 16px;border-radius:8px;font-size:12px!important;cursor:pointer;display:flex;align-items:center;gap:8px;width:max-content!important;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.see-live-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}.see-live-btn:disabled{color:#94a3b8;cursor:not-allowed;box-shadow:none}.see-live-btn:disabled:hover{background:#fff;border-color:#e2e8f0;transform:none}.see-live-btn svg{color:#6366f1}.video-selection-line{font-size:.8rem;color:#64748b}.video-cart-hint{font-size:.8rem;color:#6366f1;cursor:pointer;text-decoration:underline;width:max-content}.schedule-panel-overlay{position:fixed;inset:0;background:#141a2666;z-index:1200}.schedule-panel-backdrop{position:absolute;inset:0;border:none;background:none;cursor:default;padding:0}.schedule-panel{position:absolute;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:#fff;box-shadow:-20px 0 50px -20px #141a2659;display:flex;flex-direction:column}.schedule-panel-header{flex:none;padding:20px 22px;border-bottom:1px solid #e2e8f0;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.schedule-panel-heading{min-width:0}.schedule-panel-title{font-size:17px;font-weight:600;color:#1b2436;line-height:1.3;margin-bottom:2px}.schedule-panel-subtitle{font-size:12.5px;color:#64748b;line-height:1.3}.schedule-panel-close{flex:none;border:none;background:none;cursor:pointer;color:#64748b;line-height:0;padding:3px}.schedule-panel-body{flex:1;min-height:0;overflow-y:auto;padding:16px 22px;display:flex;flex-direction:column;gap:10px}.schedule-panel-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;cursor:pointer;width:100%;background:#fff;border:1px solid #e2e8f0;text-align:left}.schedule-panel-row.selected{background:#f5f3ff;border-color:#c7d2fe}.schedule-panel-checkbox{width:18px;height:18px;flex:none;border:1.5px solid #cbd5e1;border-radius:4px;background:#fff;display:grid;place-items:center}.schedule-panel-checkbox.checked{background:#6366f1;border-color:#6366f1}.schedule-panel-checkbox mat-icon{color:#fff!important;font-size:13px!important;height:13px!important;width:13px!important}.schedule-panel-thumb{width:46px;height:46px;border-radius:6px;object-fit:cover;flex:none;background:#f3efe9}.schedule-panel-info{flex:1}.schedule-panel-name{font-size:13.5px;color:#1b2436}.schedule-panel-footer{flex:none;padding:16px 22px;border-top:1px solid #e2e8f0;display:flex;flex-direction:column;gap:10px}.schedule-panel-selection-line{font-size:11.5px;color:#64748b}.schedule-panel-cta{width:100%;height:48px;border:none;border-radius:8px;background:#7c3a11;color:#fff;font-size:14px;font-weight:600;cursor:pointer}.schedule-panel-cta:disabled{background:#cbd5e1;cursor:not-allowed}.cart-item{display:flex;gap:16px;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:15%;height:100px;border-radius:8px;object-fit:cover;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-weight:500;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px}.current-price{font-size:1rem;font-weight:600}.original-price{font-size:1rem;text-decoration:line-through}.discount{background:#fef3c7;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:32%}.coupon-section{border-radius:8px;padding:10px 15px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.coupon-section:hover{border-color:#cbd5e1;background-color:#f8fafc}.chevron-icon{color:#94a3b8;transition:transform .2s ease}.coupon-section:hover .chevron-icon{transform:translate(2px);color:#64748b}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.coupon-icon mat-icon{font-size:17px;width:17px!important;height:19px!important}.coupon-text{font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:8px;padding:20px;border:1px solid #e2e8f0}.summary-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:20px;letter-spacing:-.01em}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.summary-row:last-child{margin-bottom:0}.summary-label{font-size:14px;font-weight:400;color:#64748b}.summary-value{font-size:14px;font-weight:500;color:#0f172a}.summary-divider{height:1px;background:#f1f5f9;margin:16px 0;width:100%}.total-row .summary-label{font-size:16px;font-weight:600;color:#0f172a}.total-row .summary-value{font-size:16px;font-weight:700;color:#0f172a}.total-row{border-top:1px solid #e2e8f0;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px}.total-value{font-weight:700;font-size:18px}.place-order-btn{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;align-items:center;width:max-content;border-radius:8px;border:1px solid #e2e8f0}.cart-tabs div{padding:7px 10px;cursor:pointer;font-size:14px}.selected-cart-tab{margin:6px;background:#f1f5f9;border-radius:5px;color:#000!important;font-weight:500}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.cart-item{flex-direction:column!important;align-items:flex-start!important;padding:16px 12px!important;gap:16px!important}.item-left{width:100%!important;gap:16px!important;align-items:flex-start!important}.item-image{width:86px!important;height:86px!important;flex-shrink:0!important}.item-right{width:100%!important;justify-content:space-between!important;padding:0!important;gap:12px!important;margin-top:4px!important}.item-price{flex:1!important;text-align:right!important;margin-right:8px!important;font-size:16px!important}.item-title{font-size:14px!important;-webkit-line-clamp:2!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.quantity-control{height:34px!important}.qty-btn{width:34px!important}.qty-value{width:28px!important;font-size:13px!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}.vouchers-listing-section{min-width:unset!important;width:100vw!important}.separator{display:none!important}.coupon-meta{display:grid!important;grid-template-columns:1fr 1fr!important}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.w-fit{width:fit-content!important}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}.add-to-cart-parent{width:max-content;border:1px solid #000000;border-radius:8px}.cursor{cursor:pointer}.cart-text{max-width:600px;margin:0 auto;text-align:center}.cart-text div{word-break:break-word;overflow-wrap:break-word;white-space:normal}.switch{position:relative;display:inline-block;width:45px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:3px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translate(24px)}.vouchers-listing-section{position:relative;width:fit-content;min-width:500px;z-index:100;background:#fff;height:100vh}.vouchers-listing-section .coupon-heading{border-bottom:1px solid #eee}.vouchers-listing-section .coupon-listing{padding:12px 16px;overflow-y:auto;height:calc(97vh - 100px)}.voucher-details{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 4px #00000042}.voucher-details .coupon-brief .apply-offer-btn{background:#111;color:#fff;border-radius:10px;padding:6px 16px}.voucher-details .coupon-code-box{border:1.5px dashed #bbb;border-radius:8px;padding:8px 12px;margin-bottom:10px}.voucher-details .coupon-code-box .code-label{font-size:11px;color:#888;margin-bottom:2px}.voucher-details .coupon-code-box .code-row .code-value{font-weight:700;font-size:15px;letter-spacing:1px}.voucher-details .coupon-meta .clock-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.applied-coupon-card{background:#f0fff8;border-radius:12px;padding:12px 16px}.applied-coupon-card .applied-coupon-left .success-check{color:#22c55e;font-size:22px}.applied-coupon-card .applied-coupon-left .applied-coupon-code{font-weight:700;font-size:14px}.applied-coupon-card .applied-coupon-left .applied-coupon-saving{font-size:13px;color:#097d5f;margin-top:2px}.active-type{background:#111!important;color:#fff!important}.redemption-type{text-align:center;border-radius:10px;padding:6px 16px;background:#d3d3d36b;width:-webkit-fill-available!important}.wallte_icon{background:#000;border-radius:50px;padding:5px 9px 7px}.wallte_icon img{width:18px;height:18px}.fw-600{font-weight:600}.coupon-type{width:fit-content!important;border-radius:26px!important;background:transparent!important;border:1px solid #afafaf;color:#393838;text-align:center;padding:6px 16px}.active-coupon{background:transparent!important;border:2px solid black!important;color:#000!important}.my-close-btn{position:absolute!important;top:10px!important;right:10px!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.UpperCasePipe, name: "uppercase" }, { 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: MatDialogModule }, { 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: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type: 
                 //DIRECTIVE
                 ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { 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: "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: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }, { kind: "component", type: BookingCartGroupsComponent, selector: "simpo-booking-cart-groups" }] }); }
 }
@@ -10973,7 +10973,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FeaturedProductsComponent,
                         MatSpinner,
                         BookingCartGroupsComponent
-                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n  <ng-container *ngIf=\"data\">\n    <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\n      [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\n      (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\n      [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\n      <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\n        [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\n        *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\n        <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\n        <div class=\"bar\"></div>\n        <span class=\"timeline isActive\">Address</span>\n        <div class=\"bar\"></div>\n        <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\n      </div>\n      <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && (appointmentSettings?.homeVisitProductsEnabled || appointmentSettings?.videoCallProductsEnabled)\">\n        <!-- && appointmentSettings?.homeVisitProductsEnabled\" -->\n        <div class=\"cart-tabs\" [id]=\"data?.id\">\n          <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\n            (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\n          <div [ngClass]=\"{'selected-cart-tab': cartType==='BOOKING'}\" (click)=\"cartType='BOOKING'\">Booking Cart\n            ({{getTotalBookingItems}})</div>\n        </div>\n      </div>\n      <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\n        [simpoAnimation]=\"styles?.animation\">\n        <ng-container>\n          <ng-container *ngIf=\"cartType === 'SHOPPING'\">\n            <ng-container\n              *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"cartType === 'BOOKING'\">\n            <div class=\"w-100\">\n              <simpo-booking-cart-groups></simpo-booking-cart-groups>\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n      <div class=\"d-flex checkoutPage\"\n        *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\n        <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\n        </ng-container>\n      </div>\n\n\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n          [isEcommerce]=\"true\"></simpo-hover-elements>\n      </div>\n      <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n      </div>\n\n    </section>\n\n    <div class=\"schedule-panel-overlay\" *ngIf=\"schedulePanelOpen\">\n      <button type=\"button\" class=\"schedule-panel-backdrop\" (click)=\"closeSchedulePanel()\"></button>\n      <div class=\"schedule-panel\">\n        <div class=\"schedule-panel-header\">\n          <div>\n            <div class=\"schedule-panel-title\">Schedule a Video Call</div>\n            <div class=\"schedule-panel-subtitle\">Choose which pieces to include</div>\n          </div>\n          <button type=\"button\" class=\"schedule-panel-close\" (click)=\"closeSchedulePanel()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n        <div class=\"schedule-panel-body\">\n          <button type=\"button\" class=\"schedule-panel-row\" *ngFor=\"let item of responseData?.orderedItems\"\n            [class.selected]=\"isPanelSelected(item)\" (click)=\"togglePanelSelection(item)\">\n            <div class=\"schedule-panel-checkbox\" [class.checked]=\"isPanelSelected(item)\">\n              <mat-icon *ngIf=\"isPanelSelected(item)\">check</mat-icon>\n            </div>\n            <img class=\"schedule-panel-thumb\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\">\n            <div class=\"schedule-panel-info\">\n              <div class=\"schedule-panel-name\">{{item.itemName}}</div>\n            </div>\n          </button>\n        </div>\n        <div class=\"schedule-panel-footer\">\n          <div class=\"schedule-panel-selection-line\">{{panelSelectionLine}}</div>\n          <button type=\"button\" class=\"schedule-panel-cta\" [disabled]=\"panelInvalid\" (click)=\"confirmSchedulePanel()\">Continue</button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"!data\">\n    <section class=\"cart-window\">\n      <div class=\"heading-large lh-2 mb-3 header-sec\">\n        <div class=\"d-flex align-items-center\">\n          <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\n          <span>Your Cart</span>\n        </div>\n        <div class=\"saving\"></div>\n      </div>\n      <div class=\"offers\">\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\n          <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\n          <span>Avail Offers / Coupons</span>\n        </div>\n        <mat-icon>keyboard_arrow_right</mat-icon>\n      </div>\n      <div class=\"small-items\">\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\n          <div class=\"small-item\">\n            <div class=\"d-flex\" style=\"gap: 5px;\">\n              <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                  class=\"small-product-img\"\n                  [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n                  (click)=\"goToProductDetails(item)\">\n              </div>\n              <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\n              <div class=\"small-item-quantity\">\n                <span class=\"cursor\">-</span>\n                <span>{{item.quantity}}</span>\n                <span class=\"cursor\">+</span>\n              </div>\n              <div class=\"small-item-price\">\n                <div class=\"price-with-tax\">\n                  <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\n                </div>\n                <!-- <div class=\"price-with-tax\">\n                  <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\n                </div> -->\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n      <div class=\"fotter-sec\">\n        <div class=\"delivery-add d-flex\">\n          <mat-icon>home</mat-icon>\n          <div class=\"address\">Tetsting</div>\n        </div>\n        <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\n            style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\n          {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\n      </div>\n    </section>\n  </ng-container>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n<ng-template #CouponList>\n  <section class=\"coupons-listing-section\">\n    <div class=\"coupon-heading\">\n      <div class=\"back-btn\" (click)=\"closeDialogRef()\">\n        <mat-icon>keyboard_arrow_left</mat-icon>\n      </div>\n      <div class=\"header-text\">Apply Coupon</div>\n    </div>\n    <!-- <div class=\"coupon-search-sec\">\n      <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\n      <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\n    </div> -->\n    <div class=\"coupon-listing\">\n      <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\n        <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n          <div class=\"coupon-details\"\n            [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\n            *ngIf=\"couponDetails?.status\">\n            <div class=\"details__coupon-heading\">\n              <div class=\"coupon-brief\">\n                <div class=\"coupon-brief__left-sec\">\n                  <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n                    {{ couponDetails.couponCode | uppercase }}</div>\n                  <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\n                </div>\n                <div class=\"coupon-brief__right-sec\">\n                  <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n                    [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\n                    (click)=\"applyCoupon(couponDetails)\">Apply</div>\n                </div>\n              </div>\n              <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\n                <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\n                <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\n              </div> -->\n            </div>\n            <ng-container>\n              <!-- *ngIf=\"couponDetails.status\" -->\n              <div class=\"details-divider\"></div>\n              <ul class=\"details__coupon-terms\">\n                <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\n              </ul>\n            </ng-container>\n          </div>\n        </ng-container>\n      </ng-container>\n      <ng-template #showEmptyScreen>\n        <div class=\"empty-screen-container\">\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n          <div class=\"empty-screen__primary-text\">No Coupon Available</div>\n          <div class=\"empty-screen__secondary-text\">\n            Looks like there are no coupons at the moment\n          </div>\n          <!-- <div class=\"empty-screen__button\">Explore</div> -->\n        </div>\n      </ng-template>\n    </div>\n  </section>\n</ng-template>\n\n<ng-template #RedemptionVouchers>\n  <section class=\"vouchers-listing-section d-flex flex-column\">\n    <div class=\"coupon-heading d-flex align-items-center gap-2 p-3 fs-18 fw-600 border-bottom\">\n      <div class=\"back-btn cursor-pointer d-flex align-items-center\" (click)=\"closeDialogRef()\">\n        <mat-icon>keyboard_arrow_left</mat-icon>\n      </div>\n      <div class=\"header-text\">Coupons & Vouchers</div>\n    </div>\n\n    <!-- <div class=\"d-flex align-items-center tab-container justify-content-between gap-2 p-3\">\n      <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'COUPONS'}\"\n        (click)=\"redemptionType = 'COUPONS'\">\n        Coupons\n      </div>\n      <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'VOUCHERS'}\"\n        (click)=\"redemptionType = 'VOUCHERS'\">\n        Vouchers\n      </div>\n    </div> -->\n\n    <div class=\"coupon-listing d-flex flex-column gap-3 pt-3\" *ngIf=\"redemptionType === 'COUPONS'\">\n      <div class=\"d-flex align-items-center tab-container gap-3\">\n        <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n          [ngClass]=\"{'active-coupon': redemptionCouponType === 'REWARDS'}\" (click)=\"redemptionCouponType = 'REWARDS'\">\n          Rewards\n        </div>\n        <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n          [ngClass]=\"{'active-coupon': redemptionCouponType === 'DISCOUNTS'}\"\n          (click)=\"redemptionCouponType = 'DISCOUNTS'\">\n          Discounts\n        </div>\n      </div>\n      <ng-container *ngIf=\"redemptionCouponType === 'REWARDS'\">\n        <ng-container *ngIf=\"(listRedemptionCoupons?.vouchers?.length > 0) ; else showEmptyScreen\">\n          <ng-container *ngFor=\"let voucher of listRedemptionCoupons?.vouchers; let idx = index\">\n            <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n              <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n                <div class=\"coupon-brief__left-sec\">\n                  <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n                  <div class=\"coupon-desc fs-12 text-secondary\">\n                    Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%'\n                    }}\n                    off on your payment\n                  </div>\n                </div>\n                <div class=\"coupon-brief__right-sec\">\n                  <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">\n                    Apply</div>\n                </div>\n              </div>\n\n              <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n                <div class=\"code-label\">Code</div>\n                <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n              </div>\n\n              <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n                <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n                <span class=\"separator text-secondary\">|</span>\n                <span class=\"validity\">\n                  <mat-icon class=\"clock-icon\">schedule</mat-icon>\n                  Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n                </span>\n                <span class=\"separator text-secondary\" *ngIf=\"voucher.maxRedeemableAmount\">|</span>\n                <span class=\"min-order\" *ngIf=\"voucher.maxRedeemableAmount\">Max Redeemable Amount: \u20B9{{\n                  voucher.maxRedeemableAmount | number }}</span>\n              </div>\n\n              <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n            </div>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"redemptionCouponType === 'DISCOUNTS'\">\n        <ng-container *ngIf=\"(couponList.length > 0); else showEmptyDiscounts\">\n          <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n            <div class=\"voucher-details\" *ngIf=\"couponDetails?.status\">\n\n              <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n                <div class=\"coupon-brief__left-sec\">\n                  <div class=\"coupon-name fs-16 fw-600 mb-1\"\n                    [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n                    {{ couponDetails.couponCode | uppercase }}\n                  </div>\n                  <div class=\"coupon-desc fs-12 text-secondary\">\n                    {{ couponDetails.discountDescription | titlecase }}\n                  </div>\n                </div>\n                <div class=\"coupon-brief__right-sec\">\n                  <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\"\n                    [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n                    [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : 'not-allowed'}\"\n                    (click)=\"applyCoupon(couponDetails)\">\n                    Apply\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n                <div class=\"code-label\">Code</div>\n                <div class=\"code-value\">{{ couponDetails.couponCode | uppercase }}</div>\n              </div>\n\n              <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n                <span class=\"validity\">\n                  <mat-icon class=\"clock-icon\">schedule</mat-icon>\n                  {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}\n                </span>\n              </div>\n\n            </div>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n\n      <ng-template #showEmptyDiscounts>\n        <div class=\"empty-screen-container\">\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n          <div class=\"empty-screen__primary-text\">No Discount Coupons Available</div>\n          <div class=\"empty-screen__secondary-text\">\n            Looks like there are no discount coupons at the moment\n          </div>\n          <!-- <div class=\"empty-screen__button\">Explore</div> -->\n        </div>\n      </ng-template>\n\n      <ng-template #showEmptyScreen>\n        <div class=\"empty-screen-container\">\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n          <div class=\"empty-screen__primary-text\">No Coupons Available</div>\n          <div class=\"empty-screen__secondary-text\">Looks like there are no coupons</div>\n        </div>\n      </ng-template>\n    </div>\n\n    <div class=\"coupon-listing d-flex flex-column gap-3\" *ngIf=\"redemptionType === 'VOUCHERS'\">\n      <ng-container *ngIf=\"listRedemptionVouchers?.vouchers?.length > 0; else showEmptyScreen\">\n        <ng-container *ngFor=\"let voucher of listRedemptionVouchers?.vouchers; let idx = index\">\n          <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n            <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n              <div class=\"coupon-brief__left-sec\">\n                <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n                <div class=\"coupon-desc fs-12 text-secondary\">\n                  Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\n                  off on your payment\n                </div>\n              </div>\n              <div class=\"coupon-brief__right-sec\">\n                <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply\n                </div>\n              </div>\n            </div>\n\n            <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n              <div class=\"code-label\">Code</div>\n              <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n            </div>\n\n            <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n              <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n              <span class=\"separator text-secondary\">|</span>\n              <span class=\"validity\">\n                <mat-icon class=\"clock-icon\">schedule</mat-icon>\n                Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n              </span>\n            </div>\n\n            <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <ng-template #showEmptyScreen>\n        <div class=\"empty-screen-container\">\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n          <div class=\"empty-screen__primary-text\">No Vouchers Available</div>\n          <div class=\"empty-screen__secondary-text\">Looks like there are no vouchers</div>\n        </div>\n      </ng-template>\n    </div>\n  </section>\n</ng-template>\n\n<ng-template #CARTPAGE>\n  <div class=\"container\">\n    <div class=\"main-content\">\n      <div class=\"cart-items\">\n        <div class=\"cart-header\">\n          <h2>Your Cart</h2>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"CARTITEM;context:{data: responseData?.orderedItems}\"></ng-container>\n      </div>\n    </div>\n\n    <div class=\"sidebar\">\n      <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"getUrl()\">\n        <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\n          <div class=\"toogle-switch\">\n            <div class=\"form-check form-switch\">\n              <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\n                [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\n            </div>\n          </div>\n        </div>\n        <!-- <div class=\"select_matured_text  w-100 text-start cursor-pointer\"\n          *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\n          Select Matured Scheme\n        </div> -->\n        <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\n          *ngIf=\"selectedRedemption\">\n          Selected Scheme\n          <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\n            scheme-5000/M <span>Change</span></div>\n          <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\n            <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\n          </div>\n        </div> -->\n      </div>\n      <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\n        <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\n      </div>\n      <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && !referEarnExist\">\n        <div class=\"coupon-left\">\n          <div class=\"coupon-icon\"><mat-icon>percent</mat-icon></div>\n          <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply\n            Coupon</span>\n          <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon\n            Applied</span>\n        </div>\n        <svg *ngIf=\"!responseData.billdetails?.couponId\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" class=\"chevron-icon\" (click)=\"openDialog(CouponList)\">\n          <path d=\"m9 18 6-6-6-6\" />\n        </svg>\n        <span *ngIf=\"responseData.billdetails?.couponId\"\n          (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\n      </div>\n\n      <div class=\"promo-banner mb-3\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && appointmentSettings?.videoCallProductsEnabled\">\n        <div class=\"promo-banner-row\">\n          <div class=\"promo-text\">\n            <h3>See It Before You Buy It</h3>\n            <p>Experience our designs in detail via video call</p>\n          </div>\n          <button class=\"see-live-btn\" [disabled]=\"!hasCartItems\" (click)=\"openSchedulePanel()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"lucide lucide-video\">\n              <path d=\"m22 8-6 4 6 4V8Z\" />\n              <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\" />\n            </svg>\n            CONTINUE TO SCHEDULE\n          </button>\n        </div>\n        <div class=\"video-selection-line\">{{videoSelectionLine}}</div>\n        <a class=\"video-cart-hint\" *ngIf=\"videoCartCount > 0\" (click)=\"viewPendingVideoCart()\">{{videoCartCount}}\n          item{{videoCartCount === 1 ? '' : 's'}} waiting in your Video Call cart \u2014 view it</a>\n      </div>\n\n      <div class=\"plan-details-container p-3 rounded-4 bg-white text-dark voucher-details\"\n        *ngIf=\"referEarnExist && this?.redemptionPoints?.availablePoints > 0\">\n        <div class=\"fs-14 fw-500\">\n          Rewards Available\n        </div>\n        <div class=\"d-flex justify-content-between align-items-start border-bottom pb-2\">\n          <div class=\"avb_pts mt-2 mb-2\">\n            <span class=\"fs-16 fw-500 total_points text-secondary\">\n              <span class=\" fs-18 fw-600 text-dark\">{{(this?.redemptionPoints?.availablePoints || 0).toFixed(2)}}</span>\n              pts\n            </span>\n            <div class=\"total_value fs-12 text-secondary\">\n              = max \u20B9{{(this?.redemptionPoints?.pointsConvertedRupees || 0).toFixed(2)}} discount\n            </div>\n          </div>\n          <div class=\"wallte_icon\">\n            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\n          </div>\n        </div>\n        <div class=\"d-flex justify-content-between align-items-center mt-3\">\n          <div class=\"redemable_text\">\n            <div class=\"title_text\">\n              <div class=\"fs-14 fw-500\">\n                Redeem Points\n              </div>\n              <div class=\"fs-13 fs-400\">\n                Use your points for discount\n              </div>\n            </div>\n          </div>\n          <div class=\"toggle_btn\">\n            <label class=\"switch\">\n              <input type=\"checkbox\" id=\"toggleSwitch\" [checked]=\"isPointsRedeeming\"\n                (click)=\"onPointsRedeemingChange($event)\" />\n              <span class=\"slider\"></span>\n            </label>\n          </div>\n        </div>\n        <div class=\"mt-3 success_selected w-100 applied-coupon-card\" *ngIf=\"isPointsRedeeming\">\n          <div class=\"d-flex align-items-start gap-2\">\n            <div class=\"success_icon\">\n              <mat-icon class=\"d-flex justify-content-center align-items-center text-success\">check_circle</mat-icon>\n            </div>\n            <div class=\"success_text\">\n              <div class=\"fs-13 fw-500\">\n                You're saving \u20B9\n                {{totalSavingAmt || 0}}\n              </div>\n              <div class=\"fs-12 fs-400 text-success\">\n                {{totalSavingPoints}} points remaining after redemption\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Existing coupon row (keep as-is) -->\n      <div class=\"coupon-section d-flex flex-column voucher-details\" [id]=\"data?.id\"\n        *ngIf=\"cartType === 'SHOPPING' && referEarnExist\">\n        <div class=\"d-flex justify-content-between align-items-center w-100\">\n          <div class=\"coupon-left\">\n            Apply Coupon\n          </div>\n          <div (click)=\"addRedemptionCoupon(RedemptionVouchers)\">View All</div>\n        </div>\n\n        <!-- Applied Coupon Success Banner -->\n        <div class=\"applied-coupon-card w-100 mt-3 d-flex align-items-center justify-content-between\"\n          *ngIf=\"selectedVoucherId\">\n          <div class=\"applied-coupon-left d-flex align-items-center gap-3\">\n            <mat-icon class=\"success-check\">check_circle</mat-icon>\n            <div class=\"applied-coupon-info\">\n              <div class=\"applied-coupon-code\">Coupon {{ selectedVoucherCode }} applied!</div>\n              <div class=\"applied-coupon-saving\">You're saving\n                <span *ngIf=\"this.couponValueType === 'AMOUNT'\">\u20B9 {{selectedVoucherAmount || 0}}</span>\n                <span *ngIf=\"this.couponValueType === 'PERCENTAGE'\"> {{selectedVoucherPercentage || 0}}%</span>\n              </div>\n\n            </div>\n          </div>\n          <div class=\"remove-coupon-btn fs-14 fw-500 text-secondary cursor-pointer\"\n            (click)=\"removeRedemptionCoupon($event)\">Remove</div>\n        </div>\n      </div>\n\n      <div class=\"delivery-section\" *ngIf=\"getUrl()\">\n        <div class=\"delivery-header\">\n          <mat-icon>gps_fixed</mat-icon>\n          <span>Delivering to</span>\n          <span class=\"pincode\">{{pincode}}</span>\n          <!-- <a class=\"change-link\">Change Pincode</a> -->\n        </div>\n      </div>\n\n      <div class=\"summary-section\">\n        <div class=\"summary-title\">Summary</div>\n\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span class=\"summary-label\">Subtotal</span>\n          <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</span>\n        </div>\n\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\n          <span class=\"summary-label\">Points Redeemed</span>\n          <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\n        </div>\n\n        <div class=\"summary-row\"\n          *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'AMOUNT' && appliedVoucher)\">\n          <span class=\"summary-label\">Voucher Applied</span>\n          <span class=\"summary-value\">- \u20B9{{ selectedVoucherAmount || 0 }}</span>\n        </div>\n\n        <div class=\"summary-row\"\n          *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'PERCENTAGE' && appliedVoucher)\">\n          <span class=\"summary-label\">Voucher Applied</span>\n          <span class=\"summary-value\">- \u20B9{{ percentageReduced || 0 }}</span>\n        </div>\n\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount\">\n          <span class=\"summary-label\">Discount Amount</span>\n          <span class=\"summary-value\">\n            {{('\u20B9' + (responseData?.billdetails?.discountAmount | number: '1.0-2')) }}\n          </span>\n        </div>\n\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span class=\"summary-label\">Shipping</span>\n          <span class=\"summary-value\"\n            [ngClass]=\"{'savings': !responseData?.billdetails?.deliveryCharges || responseData.billdetails.deliveryCharges <= 0}\">\n            {{ (responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0) ? ('\u20B9' +\n            (responseData.billdetails.deliveryCharges | number: '1.0-2')) : 'Free' }}\n          </span>\n        </div>\n\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span class=\"summary-label\">Estimated Tax</span>\n          <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\n            responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n            number: '1.0-2'}}</span>\n        </div>\n\n        <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span class=\"summary-label\">Total</span>\n          <!-- <span class=\"summary-value\">\u20B9{{ responseData?.totalAmount | number: '1.0-2' }}</span> -->\n          <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\n            number: '1.0-2' }}</span>\n\n          <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\n            number: '1.0-2' }}</span>\n          <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n            (selectedVoucherAmount || 0)) | number:\n            '1.0-2'}}</span>\n          <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n            (percentageReduced || 0)) | number:\n            '1.0-2' }}</span>\n        </div>\n      </div>\n      <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n        [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n        *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n        Shopping'}}</button>\n      <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToCheckout()\" simpoButtonDirective\n        *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n        [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\n        Cart'}}</button>\n\n    </div>\n  </div>\n  <!-- <ng-container *ngIf=\"recommededData?.length\">\n    <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\"\n      [responseData]=\"recommededData\"></simpo-featured-products>\n  </ng-container> -->\n</ng-template>\n<ng-template #CHECKOUTPAGE>\n  <div class=\"checkout-left-panel\">\n    <div class=\"checkout-main-content\">\n      <!-- <div class=\"delivery-options\">\n        <div class=\"delivery-option active\">\n          <div class=\"delivery-icon\"></div>\n          HOME DELIVERY\n        </div>\n        <div class=\"delivery-option\">\n          <div class=\"delivery-icon\"></div>\n          STORE PICK-UP\n        </div>\n      </div> -->\n\n      <div class=\"section-title\">Shipping Address</div>\n\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\n      <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n        <mat-icon>add</mat-icon>\n      </div>\n\n      <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\n\n      <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\n        *ngIf=\"defaultAddress && !placeOrderLoader\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n        [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n        [backgroundInfo]=\"styles?.background\">\n        Place Order\n      </button>\n      <button class=\"btn w-100 mt-1 payment-btn\" simpoButtonDirective *ngIf=\"defaultAddress && placeOrderLoader\"\n        [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n        [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\">\n        Loading...\n      </button>\n\n    </div>\n  </div>\n\n  <div class=\"checkout-right-panel\">\n    <div class=\"order-summary\">\n      <div class=\"summary-title\">Order Summary</div>\n\n      <div class=\"checkout-product\">\n        <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n          <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\n            alt=\"\">\n          <div class=\"product-details\">\n            <div class=\"product-name\">{{item.itemName}}</div>\n            <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\n            <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\n          </div>\n        </div>\n\n      </div>\n\n      <div class=\"price-breakdown\">\n        <div class=\"price-row\">\n          <span>Total Price</span>\n          <span>\u20B9{{(responseData?.billdetails?.totalNetValue\n            ?? 0) | number: '1.0-2'}}</span>\n        </div>\n        <div class=\"price-row\">\n          <span>Total Tax</span>\n          <span>\u20B9{{((!responseData.billdetails?.couponId ?\n            responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n            number:\n            '1.0-2'}}</span>\n        </div>\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\n          <span class=\"summary-label\">Redeem Amount</span>\n          <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\n            '1.0-2'}}</span>\n        </div>\n\n        <div class=\"price-row discount\" *ngIf=\"responseData?.billdetails?.discountAmount && !isJewellery\">\n          <span>Coupon Discount</span>\n          <span>- \u20B9{{responseData?.billdetails?.discountAmount\n            | number: '1.0-2'}}</span>\n        </div>\n        <div class=\"price-row\"\n          *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n          <span>Delivery Charge</span>\n          <span>{{responseData.billdetails.deliveryCharges\n            |\n            number: '1.0-2'}}</span>\n        </div>\n        <div class=\"price-row total\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span>TOTAL AMOUNT</span>\n          <span *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\n            '1.0-2'}}</span>\n          <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\n            '1.0-2'}}</span>\n          <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n            (selectedVoucherAmount || 0)) | number:\n            '1.0-2'}}</span>\n          <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n            (responseData?.totalAmount * (selectedVoucherPercentage / 100) || 0)) | number:\n            '1.0-2' }}</span>\n        </div>\n      </div>\n    </div>\n\n  </div>\n</ng-template>\n\n<ng-template #CARTITEM let-products=\"data\">\n  <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\n    <div class=\"item-left\">\n      <div class=\"item-image\">\n        <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n          (click)=\"goToProductDetails(item)\" style=\"cursor: pointer;\">\n      </div>\n      <div class=\"item-details\">\n        <h3 class=\"item-title\">{{item.itemName}}</h3>\n        <div class=\"item-subtitle\" *ngIf=\"item.itemVariant\">\n          <span *ngFor=\"let varient of getKeys(item.itemVariant.properties); let last = last\">\n            {{ item.itemVariant.properties[varient] | titlecase }}<span *ngIf=\"!last\">, </span>\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"item-right\">\n      <div class=\"quantity-control\" *ngIf=\"cartType === 'SHOPPING'\">\n        <button class=\"qty-btn px-2\" (click)=\"decreaseQty(item)\" [disabled]=\"item.quantity === 1\">\n          <mat-icon>remove</mat-icon>\n        </button>\n        <span class=\"qty-value px-3\">{{item.quantity}}</span>\n        <button class=\"qty-btn px-2\" (click)=\"increaseQty(item)\">\n          <mat-icon>add</mat-icon>\n        </button>\n      </div>\n\n      <div class=\"item-price\">\n        \u20B9{{item.sellingPrice | number: '1.0-2'}}\n      </div>\n\n      <div class=\"delete-btn-circle\" (click)=\"removeItem(item)\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\n          <path d=\"M3 6h18\" />\n          <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\n          <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\n          <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\n          <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\n        </svg>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #EMPTYITEM>\n  <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\n    <div class=\"empty-cart-container d-flex flex-column\">\n      <div class=\"cart-image\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\n          [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\n      </div>\n      <div class=\"cart-text content-side\">\n        <ng-container *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"d-flex justify-content-center\"\n            [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\n          </div>\n        </ng-container>\n      </div>\n      <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n        [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n        [appButtonEditor]=\"edit ?? false\"\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n        Shopping'}}</button>\n    </div>\n  </section>\n</ng-template>\n\n<ng-template #SCHEME_REDEMPTION>\n  <div class=\"modal-body\">\n    <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\n      [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\n      <label for=\"individual\" class=\"scheme-card\">\n        <div class=\"scheme-info d-flex gap-1\">\n          <div class=\"form-check-radio\">\n            <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\n          </div>\n          <div class=\"right-side\">\n            <div class=\"scheme-name\">\n              <div class=\"scheme-title\">Individual Investment Scheme</div>\n              <div class=\"scheme-monthly\">\u20B98000/M</div>\n            </div>\n            <div class=\"scheme-details\">\n              <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\n              <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\n            </div>\n            <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\n          </div>\n        </div>\n      </label>\n    </div>\n    <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\n      Please add more \u20B9{{vaildAmount}} to reedem this scheme\n    </div>\n  </div>\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.cart-header{padding:16px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.cart-header h2{margin:0;font-size:18px;font-weight:500;color:#0f172a}.cart-item{display:flex!important;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;gap:20px;padding:0 8px;transition:background .2s}.cart-item:hover{background:#fbfcfe}.item-left{display:flex;align-items:center;flex:1}.item-right{display:flex;align-items:center;padding:15px;gap:32px}.item-image img{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid #f1f5f9}.item-details{display:flex;flex-direction:column;gap:4px}.item-title{margin:0;font-size:15px;font-weight:600;color:#0f172a;line-height:1.4}.item-subtitle{font-size:13px;color:#64748b;font-weight:400}.quantity-control{display:flex;align-items:center;border:1.5px solid #e2e8f0;border-radius:7px;overflow:hidden;height:38px;background:#fff;width:fit-content}.qty-btn{width:38px;height:100%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;transition:all .2s ease}.qty-btn:hover{background:#f8fafc;color:#0f172a}.qty-btn mat-icon{font-size:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.qty-value{width:32px;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:#0f172a;border-left:1.5px solid #e2e8f0;border-right:1.5px solid #e2e8f0}.item-price{font-size:18px;font-weight:700;color:#0f172a;min-width:60px;text-align:right;letter-spacing:-.01em}.delete-btn-circle{width:36px;height:36px;border-radius:50%;border:1px solid #fee2e2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ef4444;transition:all .2s ease}.delete-btn-circle:hover{background:#fef2f2;border-color:#fecaca;transform:scale(1.05);color:#dc2626}.delete-btn-circle svg{width:18px;height:18px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.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:#df2e2e;cursor:pointer;font-size:18px}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;width:100%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.fs-12{font-size:12px}.fs-18{font-size:18px}.b-1-b{border-width:0px 1px;border-style:solid;border-color:#000}.container{max-width:unset;padding:24px;display:flex;gap:24px;width:100%!important}.main-content{background:#fff;border-radius:12px;width:70%}.promo-banner{padding:16px 20px;display:flex;flex-direction:column;gap:10px;border-radius:8px;border:1px solid #e2e8f0}.promo-banner-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.promo-text h3{font-size:16px!important;font-weight:500;margin-bottom:4px}.promo-text p{font-size:.9rem!important;margin-bottom:0!important;color:#64748b}.see-live-btn{background:#fff;border:1px solid #e2e8f0;font-weight:600;color:#000;padding:8px 16px;border-radius:8px;font-size:12px!important;cursor:pointer;display:flex;align-items:center;gap:8px;width:max-content!important;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.see-live-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}.see-live-btn:disabled{color:#94a3b8;cursor:not-allowed;box-shadow:none}.see-live-btn:disabled:hover{background:#fff;border-color:#e2e8f0;transform:none}.see-live-btn svg{color:#6366f1}.video-selection-line{font-size:.8rem;color:#64748b}.video-cart-hint{font-size:.8rem;color:#6366f1;cursor:pointer;text-decoration:underline;width:max-content}.schedule-panel-overlay{position:fixed;inset:0;background:#141a2666;z-index:1200}.schedule-panel-backdrop{position:absolute;inset:0;border:none;background:none;cursor:default;padding:0}.schedule-panel{position:absolute;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:#fff;box-shadow:-20px 0 50px -20px #141a2659;display:flex;flex-direction:column}.schedule-panel-header{flex:none;padding:20px 22px;border-bottom:1px solid #e2e8f0;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.schedule-panel-title{font-size:17px;font-weight:600;color:#1b2436}.schedule-panel-subtitle{font-size:12.5px;color:#64748b}.schedule-panel-close{flex:none;border:none;background:none;cursor:pointer;color:#64748b;line-height:0;padding:3px}.schedule-panel-body{flex:1;min-height:0;overflow-y:auto;padding:16px 22px;display:flex;flex-direction:column;gap:10px}.schedule-panel-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;cursor:pointer;width:100%;background:#fff;border:1px solid #e2e8f0;text-align:left}.schedule-panel-row.selected{background:#f5f3ff;border-color:#c7d2fe}.schedule-panel-checkbox{width:18px;height:18px;flex:none;border:1.5px solid #cbd5e1;border-radius:4px;background:#fff;display:grid;place-items:center}.schedule-panel-checkbox.checked{background:#6366f1;border-color:#6366f1}.schedule-panel-checkbox mat-icon{color:#fff!important;font-size:13px!important;height:13px!important;width:13px!important}.schedule-panel-thumb{width:46px;height:46px;border-radius:6px;object-fit:cover;flex:none;background:#f3efe9}.schedule-panel-info{flex:1}.schedule-panel-name{font-size:13.5px;color:#1b2436}.schedule-panel-footer{flex:none;padding:16px 22px;border-top:1px solid #e2e8f0;display:flex;flex-direction:column;gap:10px}.schedule-panel-selection-line{font-size:11.5px;color:#64748b}.schedule-panel-cta{width:100%;height:48px;border:none;border-radius:8px;background:#7c3a11;color:#fff;font-size:14px;font-weight:600;cursor:pointer}.schedule-panel-cta:disabled{background:#cbd5e1;cursor:not-allowed}.cart-item{display:flex;gap:16px;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:15%;height:100px;border-radius:8px;object-fit:cover;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-weight:500;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px}.current-price{font-size:1rem;font-weight:600}.original-price{font-size:1rem;text-decoration:line-through}.discount{background:#fef3c7;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:32%}.coupon-section{border-radius:8px;padding:10px 15px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.coupon-section:hover{border-color:#cbd5e1;background-color:#f8fafc}.chevron-icon{color:#94a3b8;transition:transform .2s ease}.coupon-section:hover .chevron-icon{transform:translate(2px);color:#64748b}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.coupon-icon mat-icon{font-size:17px;width:17px!important;height:19px!important}.coupon-text{font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:8px;padding:20px;border:1px solid #e2e8f0}.summary-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:20px;letter-spacing:-.01em}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.summary-row:last-child{margin-bottom:0}.summary-label{font-size:14px;font-weight:400;color:#64748b}.summary-value{font-size:14px;font-weight:500;color:#0f172a}.summary-divider{height:1px;background:#f1f5f9;margin:16px 0;width:100%}.total-row .summary-label{font-size:16px;font-weight:600;color:#0f172a}.total-row .summary-value{font-size:16px;font-weight:700;color:#0f172a}.total-row{border-top:1px solid #e2e8f0;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px}.total-value{font-weight:700;font-size:18px}.place-order-btn{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;align-items:center;width:max-content;border-radius:8px;border:1px solid #e2e8f0}.cart-tabs div{padding:7px 10px;cursor:pointer;font-size:14px}.selected-cart-tab{margin:6px;background:#f1f5f9;border-radius:5px;color:#000!important;font-weight:500}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.cart-item{flex-direction:column!important;align-items:flex-start!important;padding:16px 12px!important;gap:16px!important}.item-left{width:100%!important;gap:16px!important;align-items:flex-start!important}.item-image{width:86px!important;height:86px!important;flex-shrink:0!important}.item-right{width:100%!important;justify-content:space-between!important;padding:0!important;gap:12px!important;margin-top:4px!important}.item-price{flex:1!important;text-align:right!important;margin-right:8px!important;font-size:16px!important}.item-title{font-size:14px!important;-webkit-line-clamp:2!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.quantity-control{height:34px!important}.qty-btn{width:34px!important}.qty-value{width:28px!important;font-size:13px!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}.vouchers-listing-section{min-width:unset!important;width:100vw!important}.separator{display:none!important}.coupon-meta{display:grid!important;grid-template-columns:1fr 1fr!important}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.w-fit{width:fit-content!important}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}.add-to-cart-parent{width:max-content;border:1px solid #000000;border-radius:8px}.cursor{cursor:pointer}.cart-text{max-width:600px;margin:0 auto;text-align:center}.cart-text div{word-break:break-word;overflow-wrap:break-word;white-space:normal}.switch{position:relative;display:inline-block;width:45px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:3px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translate(24px)}.vouchers-listing-section{position:relative;width:fit-content;min-width:500px;z-index:100;background:#fff;height:100vh}.vouchers-listing-section .coupon-heading{border-bottom:1px solid #eee}.vouchers-listing-section .coupon-listing{padding:12px 16px;overflow-y:auto;height:calc(97vh - 100px)}.voucher-details{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 4px #00000042}.voucher-details .coupon-brief .apply-offer-btn{background:#111;color:#fff;border-radius:10px;padding:6px 16px}.voucher-details .coupon-code-box{border:1.5px dashed #bbb;border-radius:8px;padding:8px 12px;margin-bottom:10px}.voucher-details .coupon-code-box .code-label{font-size:11px;color:#888;margin-bottom:2px}.voucher-details .coupon-code-box .code-row .code-value{font-weight:700;font-size:15px;letter-spacing:1px}.voucher-details .coupon-meta .clock-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.applied-coupon-card{background:#f0fff8;border-radius:12px;padding:12px 16px}.applied-coupon-card .applied-coupon-left .success-check{color:#22c55e;font-size:22px}.applied-coupon-card .applied-coupon-left .applied-coupon-code{font-weight:700;font-size:14px}.applied-coupon-card .applied-coupon-left .applied-coupon-saving{font-size:13px;color:#097d5f;margin-top:2px}.active-type{background:#111!important;color:#fff!important}.redemption-type{text-align:center;border-radius:10px;padding:6px 16px;background:#d3d3d36b;width:-webkit-fill-available!important}.wallte_icon{background:#000;border-radius:50px;padding:5px 9px 7px}.wallte_icon img{width:18px;height:18px}.fw-600{font-weight:600}.coupon-type{width:fit-content!important;border-radius:26px!important;background:transparent!important;border:1px solid #afafaf;color:#393838;text-align:center;padding:6px 16px}.active-coupon{background:transparent!important;border:2px solid black!important;color:#000!important}.my-close-btn{position:absolute!important;top:10px!important;right:10px!important}\n"] }]
+                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n  <ng-container *ngIf=\"data\">\n    <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\n      [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\n      (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\n      [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\n      <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\n        [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\n        *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\n        <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\n        <div class=\"bar\"></div>\n        <span class=\"timeline isActive\">Address</span>\n        <div class=\"bar\"></div>\n        <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\n      </div>\n      <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && (appointmentSettings?.homeVisitProductsEnabled || appointmentSettings?.videoCallProductsEnabled)\">\n        <!-- && appointmentSettings?.homeVisitProductsEnabled\" -->\n        <div class=\"cart-tabs\" [id]=\"data?.id\">\n          <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\n            (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\n          <div [ngClass]=\"{'selected-cart-tab': cartType==='BOOKING'}\" (click)=\"cartType='BOOKING'\">Booking Cart\n            ({{getTotalBookingItems}})</div>\n        </div>\n      </div>\n      <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\n        [simpoAnimation]=\"styles?.animation\">\n        <ng-container>\n          <ng-container *ngIf=\"cartType === 'SHOPPING'\">\n            <ng-container\n              *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"cartType === 'BOOKING'\">\n            <div class=\"w-100\">\n              <simpo-booking-cart-groups></simpo-booking-cart-groups>\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n      <div class=\"d-flex checkoutPage\"\n        *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\n        <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\n        </ng-container>\n      </div>\n\n\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n          [isEcommerce]=\"true\"></simpo-hover-elements>\n      </div>\n      <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n      </div>\n\n    </section>\n\n    <div class=\"schedule-panel-overlay\" *ngIf=\"schedulePanelOpen\">\n      <button type=\"button\" class=\"schedule-panel-backdrop\" (click)=\"closeSchedulePanel()\"></button>\n      <div class=\"schedule-panel\">\n        <div class=\"schedule-panel-header\">\n          <div class=\"schedule-panel-heading\">\n            <div class=\"schedule-panel-title\">Schedule a Video Call</div>\n            <div class=\"schedule-panel-subtitle\">Choose which pieces to include</div>\n          </div>\n          <button type=\"button\" class=\"schedule-panel-close\" (click)=\"closeSchedulePanel()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n        <div class=\"schedule-panel-body\">\n          <button type=\"button\" class=\"schedule-panel-row\" *ngFor=\"let item of responseData?.orderedItems\"\n            [class.selected]=\"isPanelSelected(item)\" (click)=\"togglePanelSelection(item)\">\n            <div class=\"schedule-panel-checkbox\" [class.checked]=\"isPanelSelected(item)\">\n              <mat-icon *ngIf=\"isPanelSelected(item)\">check</mat-icon>\n            </div>\n            <img class=\"schedule-panel-thumb\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\">\n            <div class=\"schedule-panel-info\">\n              <div class=\"schedule-panel-name\">{{item.itemName}}</div>\n            </div>\n          </button>\n        </div>\n        <div class=\"schedule-panel-footer\">\n          <div class=\"schedule-panel-selection-line\">{{panelSelectionLine}}</div>\n          <button type=\"button\" class=\"schedule-panel-cta\" [disabled]=\"panelInvalid\" (click)=\"confirmSchedulePanel()\">Continue</button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"!data\">\n    <section class=\"cart-window\">\n      <div class=\"heading-large lh-2 mb-3 header-sec\">\n        <div class=\"d-flex align-items-center\">\n          <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\n          <span>Your Cart</span>\n        </div>\n        <div class=\"saving\"></div>\n      </div>\n      <div class=\"offers\">\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\n          <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\n          <span>Avail Offers / Coupons</span>\n        </div>\n        <mat-icon>keyboard_arrow_right</mat-icon>\n      </div>\n      <div class=\"small-items\">\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\n          <div class=\"small-item\">\n            <div class=\"d-flex\" style=\"gap: 5px;\">\n              <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                  class=\"small-product-img\"\n                  [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n                  (click)=\"goToProductDetails(item)\">\n              </div>\n              <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\n              <div class=\"small-item-quantity\">\n                <span class=\"cursor\">-</span>\n                <span>{{item.quantity}}</span>\n                <span class=\"cursor\">+</span>\n              </div>\n              <div class=\"small-item-price\">\n                <div class=\"price-with-tax\">\n                  <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\n                </div>\n                <!-- <div class=\"price-with-tax\">\n                  <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\n                </div> -->\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n      <div class=\"fotter-sec\">\n        <div class=\"delivery-add d-flex\">\n          <mat-icon>home</mat-icon>\n          <div class=\"address\">Tetsting</div>\n        </div>\n        <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\n            style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\n          {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\n      </div>\n    </section>\n  </ng-container>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n<ng-template #CouponList>\n  <section class=\"coupons-listing-section\">\n    <div class=\"coupon-heading\">\n      <div class=\"back-btn\" (click)=\"closeDialogRef()\">\n        <mat-icon>keyboard_arrow_left</mat-icon>\n      </div>\n      <div class=\"header-text\">Apply Coupon</div>\n    </div>\n    <!-- <div class=\"coupon-search-sec\">\n      <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\n      <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\n    </div> -->\n    <div class=\"coupon-listing\">\n      <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\n        <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n          <div class=\"coupon-details\"\n            [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\n            *ngIf=\"couponDetails?.status\">\n            <div class=\"details__coupon-heading\">\n              <div class=\"coupon-brief\">\n                <div class=\"coupon-brief__left-sec\">\n                  <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n                    {{ couponDetails.couponCode | uppercase }}</div>\n                  <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\n                </div>\n                <div class=\"coupon-brief__right-sec\">\n                  <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n                    [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\n                    (click)=\"applyCoupon(couponDetails)\">Apply</div>\n                </div>\n              </div>\n              <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\n                <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\n                <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\n              </div> -->\n            </div>\n            <ng-container>\n              <!-- *ngIf=\"couponDetails.status\" -->\n              <div class=\"details-divider\"></div>\n              <ul class=\"details__coupon-terms\">\n                <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\n              </ul>\n            </ng-container>\n          </div>\n        </ng-container>\n      </ng-container>\n      <ng-template #showEmptyScreen>\n        <div class=\"empty-screen-container\">\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n          <div class=\"empty-screen__primary-text\">No Coupon Available</div>\n          <div class=\"empty-screen__secondary-text\">\n            Looks like there are no coupons at the moment\n          </div>\n          <!-- <div class=\"empty-screen__button\">Explore</div> -->\n        </div>\n      </ng-template>\n    </div>\n  </section>\n</ng-template>\n\n<ng-template #RedemptionVouchers>\n  <section class=\"vouchers-listing-section d-flex flex-column\">\n    <div class=\"coupon-heading d-flex align-items-center gap-2 p-3 fs-18 fw-600 border-bottom\">\n      <div class=\"back-btn cursor-pointer d-flex align-items-center\" (click)=\"closeDialogRef()\">\n        <mat-icon>keyboard_arrow_left</mat-icon>\n      </div>\n      <div class=\"header-text\">Coupons & Vouchers</div>\n    </div>\n\n    <!-- <div class=\"d-flex align-items-center tab-container justify-content-between gap-2 p-3\">\n      <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'COUPONS'}\"\n        (click)=\"redemptionType = 'COUPONS'\">\n        Coupons\n      </div>\n      <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'VOUCHERS'}\"\n        (click)=\"redemptionType = 'VOUCHERS'\">\n        Vouchers\n      </div>\n    </div> -->\n\n    <div class=\"coupon-listing d-flex flex-column gap-3 pt-3\" *ngIf=\"redemptionType === 'COUPONS'\">\n      <div class=\"d-flex align-items-center tab-container gap-3\">\n        <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n          [ngClass]=\"{'active-coupon': redemptionCouponType === 'REWARDS'}\" (click)=\"redemptionCouponType = 'REWARDS'\">\n          Rewards\n        </div>\n        <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n          [ngClass]=\"{'active-coupon': redemptionCouponType === 'DISCOUNTS'}\"\n          (click)=\"redemptionCouponType = 'DISCOUNTS'\">\n          Discounts\n        </div>\n      </div>\n      <ng-container *ngIf=\"redemptionCouponType === 'REWARDS'\">\n        <ng-container *ngIf=\"(listRedemptionCoupons?.vouchers?.length > 0) ; else showEmptyScreen\">\n          <ng-container *ngFor=\"let voucher of listRedemptionCoupons?.vouchers; let idx = index\">\n            <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n              <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n                <div class=\"coupon-brief__left-sec\">\n                  <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n                  <div class=\"coupon-desc fs-12 text-secondary\">\n                    Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%'\n                    }}\n                    off on your payment\n                  </div>\n                </div>\n                <div class=\"coupon-brief__right-sec\">\n                  <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">\n                    Apply</div>\n                </div>\n              </div>\n\n              <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n                <div class=\"code-label\">Code</div>\n                <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n              </div>\n\n              <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n                <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n                <span class=\"separator text-secondary\">|</span>\n                <span class=\"validity\">\n                  <mat-icon class=\"clock-icon\">schedule</mat-icon>\n                  Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n                </span>\n                <span class=\"separator text-secondary\" *ngIf=\"voucher.maxRedeemableAmount\">|</span>\n                <span class=\"min-order\" *ngIf=\"voucher.maxRedeemableAmount\">Max Redeemable Amount: \u20B9{{\n                  voucher.maxRedeemableAmount | number }}</span>\n              </div>\n\n              <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n            </div>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"redemptionCouponType === 'DISCOUNTS'\">\n        <ng-container *ngIf=\"(couponList.length > 0); else showEmptyDiscounts\">\n          <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n            <div class=\"voucher-details\" *ngIf=\"couponDetails?.status\">\n\n              <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n                <div class=\"coupon-brief__left-sec\">\n                  <div class=\"coupon-name fs-16 fw-600 mb-1\"\n                    [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n                    {{ couponDetails.couponCode | uppercase }}\n                  </div>\n                  <div class=\"coupon-desc fs-12 text-secondary\">\n                    {{ couponDetails.discountDescription | titlecase }}\n                  </div>\n                </div>\n                <div class=\"coupon-brief__right-sec\">\n                  <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\"\n                    [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n                    [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : 'not-allowed'}\"\n                    (click)=\"applyCoupon(couponDetails)\">\n                    Apply\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n                <div class=\"code-label\">Code</div>\n                <div class=\"code-value\">{{ couponDetails.couponCode | uppercase }}</div>\n              </div>\n\n              <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n                <span class=\"validity\">\n                  <mat-icon class=\"clock-icon\">schedule</mat-icon>\n                  {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}\n                </span>\n              </div>\n\n            </div>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n\n      <ng-template #showEmptyDiscounts>\n        <div class=\"empty-screen-container\">\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n          <div class=\"empty-screen__primary-text\">No Discount Coupons Available</div>\n          <div class=\"empty-screen__secondary-text\">\n            Looks like there are no discount coupons at the moment\n          </div>\n          <!-- <div class=\"empty-screen__button\">Explore</div> -->\n        </div>\n      </ng-template>\n\n      <ng-template #showEmptyScreen>\n        <div class=\"empty-screen-container\">\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n          <div class=\"empty-screen__primary-text\">No Coupons Available</div>\n          <div class=\"empty-screen__secondary-text\">Looks like there are no coupons</div>\n        </div>\n      </ng-template>\n    </div>\n\n    <div class=\"coupon-listing d-flex flex-column gap-3\" *ngIf=\"redemptionType === 'VOUCHERS'\">\n      <ng-container *ngIf=\"listRedemptionVouchers?.vouchers?.length > 0; else showEmptyScreen\">\n        <ng-container *ngFor=\"let voucher of listRedemptionVouchers?.vouchers; let idx = index\">\n          <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n            <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n              <div class=\"coupon-brief__left-sec\">\n                <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n                <div class=\"coupon-desc fs-12 text-secondary\">\n                  Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\n                  off on your payment\n                </div>\n              </div>\n              <div class=\"coupon-brief__right-sec\">\n                <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply\n                </div>\n              </div>\n            </div>\n\n            <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n              <div class=\"code-label\">Code</div>\n              <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n            </div>\n\n            <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n              <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n              <span class=\"separator text-secondary\">|</span>\n              <span class=\"validity\">\n                <mat-icon class=\"clock-icon\">schedule</mat-icon>\n                Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n              </span>\n            </div>\n\n            <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <ng-template #showEmptyScreen>\n        <div class=\"empty-screen-container\">\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n          <div class=\"empty-screen__primary-text\">No Vouchers Available</div>\n          <div class=\"empty-screen__secondary-text\">Looks like there are no vouchers</div>\n        </div>\n      </ng-template>\n    </div>\n  </section>\n</ng-template>\n\n<ng-template #CARTPAGE>\n  <div class=\"container\">\n    <div class=\"main-content\">\n      <div class=\"cart-items\">\n        <div class=\"cart-header\">\n          <h2>Your Cart</h2>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"CARTITEM;context:{data: responseData?.orderedItems}\"></ng-container>\n      </div>\n    </div>\n\n    <div class=\"sidebar\">\n      <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"getUrl()\">\n        <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\n          <div class=\"toogle-switch\">\n            <div class=\"form-check form-switch\">\n              <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\n                [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\n            </div>\n          </div>\n        </div>\n        <!-- <div class=\"select_matured_text  w-100 text-start cursor-pointer\"\n          *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\n          Select Matured Scheme\n        </div> -->\n        <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\n          *ngIf=\"selectedRedemption\">\n          Selected Scheme\n          <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\n            scheme-5000/M <span>Change</span></div>\n          <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\n            <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\n          </div>\n        </div> -->\n      </div>\n      <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\n        <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\n      </div>\n      <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && !referEarnExist\">\n        <div class=\"coupon-left\">\n          <div class=\"coupon-icon\"><mat-icon>percent</mat-icon></div>\n          <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply\n            Coupon</span>\n          <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon\n            Applied</span>\n        </div>\n        <svg *ngIf=\"!responseData.billdetails?.couponId\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" class=\"chevron-icon\" (click)=\"openDialog(CouponList)\">\n          <path d=\"m9 18 6-6-6-6\" />\n        </svg>\n        <span *ngIf=\"responseData.billdetails?.couponId\"\n          (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\n      </div>\n\n      <div class=\"promo-banner mb-3\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && appointmentSettings?.videoCallProductsEnabled\">\n        <div class=\"promo-banner-row\">\n          <div class=\"promo-text\">\n            <h3>See It Before You Buy It</h3>\n            <p>Experience our designs in detail via video call</p>\n          </div>\n          <button class=\"see-live-btn\" [disabled]=\"!hasCartItems\" (click)=\"openSchedulePanel()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"lucide lucide-video\">\n              <path d=\"m22 8-6 4 6 4V8Z\" />\n              <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\" />\n            </svg>\n            CONTINUE TO SCHEDULE\n          </button>\n        </div>\n        <div class=\"video-selection-line\">{{videoSelectionLine}}</div>\n        <a class=\"video-cart-hint\" *ngIf=\"videoCartCount > 0\" (click)=\"viewPendingVideoCart()\">{{videoCartCount}}\n          item{{videoCartCount === 1 ? '' : 's'}} waiting in your Video Call cart \u2014 view it</a>\n      </div>\n\n      <div class=\"plan-details-container p-3 rounded-4 bg-white text-dark voucher-details\"\n        *ngIf=\"referEarnExist && this?.redemptionPoints?.availablePoints > 0\">\n        <div class=\"fs-14 fw-500\">\n          Rewards Available\n        </div>\n        <div class=\"d-flex justify-content-between align-items-start border-bottom pb-2\">\n          <div class=\"avb_pts mt-2 mb-2\">\n            <span class=\"fs-16 fw-500 total_points text-secondary\">\n              <span class=\" fs-18 fw-600 text-dark\">{{(this?.redemptionPoints?.availablePoints || 0).toFixed(2)}}</span>\n              pts\n            </span>\n            <div class=\"total_value fs-12 text-secondary\">\n              = max \u20B9{{(this?.redemptionPoints?.pointsConvertedRupees || 0).toFixed(2)}} discount\n            </div>\n          </div>\n          <div class=\"wallte_icon\">\n            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\n          </div>\n        </div>\n        <div class=\"d-flex justify-content-between align-items-center mt-3\">\n          <div class=\"redemable_text\">\n            <div class=\"title_text\">\n              <div class=\"fs-14 fw-500\">\n                Redeem Points\n              </div>\n              <div class=\"fs-13 fs-400\">\n                Use your points for discount\n              </div>\n            </div>\n          </div>\n          <div class=\"toggle_btn\">\n            <label class=\"switch\">\n              <input type=\"checkbox\" id=\"toggleSwitch\" [checked]=\"isPointsRedeeming\"\n                (click)=\"onPointsRedeemingChange($event)\" />\n              <span class=\"slider\"></span>\n            </label>\n          </div>\n        </div>\n        <div class=\"mt-3 success_selected w-100 applied-coupon-card\" *ngIf=\"isPointsRedeeming\">\n          <div class=\"d-flex align-items-start gap-2\">\n            <div class=\"success_icon\">\n              <mat-icon class=\"d-flex justify-content-center align-items-center text-success\">check_circle</mat-icon>\n            </div>\n            <div class=\"success_text\">\n              <div class=\"fs-13 fw-500\">\n                You're saving \u20B9\n                {{totalSavingAmt || 0}}\n              </div>\n              <div class=\"fs-12 fs-400 text-success\">\n                {{totalSavingPoints}} points remaining after redemption\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Existing coupon row (keep as-is) -->\n      <div class=\"coupon-section d-flex flex-column voucher-details\" [id]=\"data?.id\"\n        *ngIf=\"cartType === 'SHOPPING' && referEarnExist\">\n        <div class=\"d-flex justify-content-between align-items-center w-100\">\n          <div class=\"coupon-left\">\n            Apply Coupon\n          </div>\n          <div (click)=\"addRedemptionCoupon(RedemptionVouchers)\">View All</div>\n        </div>\n\n        <!-- Applied Coupon Success Banner -->\n        <div class=\"applied-coupon-card w-100 mt-3 d-flex align-items-center justify-content-between\"\n          *ngIf=\"selectedVoucherId\">\n          <div class=\"applied-coupon-left d-flex align-items-center gap-3\">\n            <mat-icon class=\"success-check\">check_circle</mat-icon>\n            <div class=\"applied-coupon-info\">\n              <div class=\"applied-coupon-code\">Coupon {{ selectedVoucherCode }} applied!</div>\n              <div class=\"applied-coupon-saving\">You're saving\n                <span *ngIf=\"this.couponValueType === 'AMOUNT'\">\u20B9 {{selectedVoucherAmount || 0}}</span>\n                <span *ngIf=\"this.couponValueType === 'PERCENTAGE'\"> {{selectedVoucherPercentage || 0}}%</span>\n              </div>\n\n            </div>\n          </div>\n          <div class=\"remove-coupon-btn fs-14 fw-500 text-secondary cursor-pointer\"\n            (click)=\"removeRedemptionCoupon($event)\">Remove</div>\n        </div>\n      </div>\n\n      <div class=\"delivery-section\" *ngIf=\"getUrl()\">\n        <div class=\"delivery-header\">\n          <mat-icon>gps_fixed</mat-icon>\n          <span>Delivering to</span>\n          <span class=\"pincode\">{{pincode}}</span>\n          <!-- <a class=\"change-link\">Change Pincode</a> -->\n        </div>\n      </div>\n\n      <div class=\"summary-section\">\n        <div class=\"summary-title\">Summary</div>\n\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span class=\"summary-label\">Subtotal</span>\n          <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</span>\n        </div>\n\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\n          <span class=\"summary-label\">Points Redeemed</span>\n          <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\n        </div>\n\n        <div class=\"summary-row\"\n          *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'AMOUNT' && appliedVoucher)\">\n          <span class=\"summary-label\">Voucher Applied</span>\n          <span class=\"summary-value\">- \u20B9{{ selectedVoucherAmount || 0 }}</span>\n        </div>\n\n        <div class=\"summary-row\"\n          *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'PERCENTAGE' && appliedVoucher)\">\n          <span class=\"summary-label\">Voucher Applied</span>\n          <span class=\"summary-value\">- \u20B9{{ percentageReduced || 0 }}</span>\n        </div>\n\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount\">\n          <span class=\"summary-label\">Discount Amount</span>\n          <span class=\"summary-value\">\n            {{('\u20B9' + (responseData?.billdetails?.discountAmount | number: '1.0-2')) }}\n          </span>\n        </div>\n\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span class=\"summary-label\">Shipping</span>\n          <span class=\"summary-value\"\n            [ngClass]=\"{'savings': !responseData?.billdetails?.deliveryCharges || responseData.billdetails.deliveryCharges <= 0}\">\n            {{ (responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0) ? ('\u20B9' +\n            (responseData.billdetails.deliveryCharges | number: '1.0-2')) : 'Free' }}\n          </span>\n        </div>\n\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span class=\"summary-label\">Estimated Tax</span>\n          <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\n            responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n            number: '1.0-2'}}</span>\n        </div>\n\n        <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span class=\"summary-label\">Total</span>\n          <!-- <span class=\"summary-value\">\u20B9{{ responseData?.totalAmount | number: '1.0-2' }}</span> -->\n          <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\n            number: '1.0-2' }}</span>\n\n          <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\n            number: '1.0-2' }}</span>\n          <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n            (selectedVoucherAmount || 0)) | number:\n            '1.0-2'}}</span>\n          <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n            (percentageReduced || 0)) | number:\n            '1.0-2' }}</span>\n        </div>\n      </div>\n      <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n        [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n        *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n        Shopping'}}</button>\n      <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToCheckout()\" simpoButtonDirective\n        *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n        [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\n        Cart'}}</button>\n\n    </div>\n  </div>\n  <!-- <ng-container *ngIf=\"recommededData?.length\">\n    <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\"\n      [responseData]=\"recommededData\"></simpo-featured-products>\n  </ng-container> -->\n</ng-template>\n<ng-template #CHECKOUTPAGE>\n  <div class=\"checkout-left-panel\">\n    <div class=\"checkout-main-content\">\n      <!-- <div class=\"delivery-options\">\n        <div class=\"delivery-option active\">\n          <div class=\"delivery-icon\"></div>\n          HOME DELIVERY\n        </div>\n        <div class=\"delivery-option\">\n          <div class=\"delivery-icon\"></div>\n          STORE PICK-UP\n        </div>\n      </div> -->\n\n      <div class=\"section-title\">Shipping Address</div>\n\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\n      <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n        <mat-icon>add</mat-icon>\n      </div>\n\n      <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\n\n      <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\n        *ngIf=\"defaultAddress && !placeOrderLoader\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n        [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n        [backgroundInfo]=\"styles?.background\">\n        Place Order\n      </button>\n      <button class=\"btn w-100 mt-1 payment-btn\" simpoButtonDirective *ngIf=\"defaultAddress && placeOrderLoader\"\n        [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n        [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\">\n        Loading...\n      </button>\n\n    </div>\n  </div>\n\n  <div class=\"checkout-right-panel\">\n    <div class=\"order-summary\">\n      <div class=\"summary-title\">Order Summary</div>\n\n      <div class=\"checkout-product\">\n        <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n          <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\n            alt=\"\">\n          <div class=\"product-details\">\n            <div class=\"product-name\">{{item.itemName}}</div>\n            <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\n            <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\n          </div>\n        </div>\n\n      </div>\n\n      <div class=\"price-breakdown\">\n        <div class=\"price-row\">\n          <span>Total Price</span>\n          <span>\u20B9{{(responseData?.billdetails?.totalNetValue\n            ?? 0) | number: '1.0-2'}}</span>\n        </div>\n        <div class=\"price-row\">\n          <span>Total Tax</span>\n          <span>\u20B9{{((!responseData.billdetails?.couponId ?\n            responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n            number:\n            '1.0-2'}}</span>\n        </div>\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\n          <span class=\"summary-label\">Redeem Amount</span>\n          <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\n            '1.0-2'}}</span>\n        </div>\n\n        <div class=\"price-row discount\" *ngIf=\"responseData?.billdetails?.discountAmount && !isJewellery\">\n          <span>Coupon Discount</span>\n          <span>- \u20B9{{responseData?.billdetails?.discountAmount\n            | number: '1.0-2'}}</span>\n        </div>\n        <div class=\"price-row\"\n          *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n          <span>Delivery Charge</span>\n          <span>{{responseData.billdetails.deliveryCharges\n            |\n            number: '1.0-2'}}</span>\n        </div>\n        <div class=\"price-row total\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span>TOTAL AMOUNT</span>\n          <span *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\n            '1.0-2'}}</span>\n          <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\n            '1.0-2'}}</span>\n          <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n            (selectedVoucherAmount || 0)) | number:\n            '1.0-2'}}</span>\n          <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n            (responseData?.totalAmount * (selectedVoucherPercentage / 100) || 0)) | number:\n            '1.0-2' }}</span>\n        </div>\n      </div>\n    </div>\n\n  </div>\n</ng-template>\n\n<ng-template #CARTITEM let-products=\"data\">\n  <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\n    <div class=\"item-left\">\n      <div class=\"item-image\">\n        <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n          (click)=\"goToProductDetails(item)\" style=\"cursor: pointer;\">\n      </div>\n      <div class=\"item-details\">\n        <h3 class=\"item-title\">{{item.itemName}}</h3>\n        <div class=\"item-subtitle\" *ngIf=\"item.itemVariant\">\n          <span *ngFor=\"let varient of getKeys(item.itemVariant.properties); let last = last\">\n            {{ item.itemVariant.properties[varient] | titlecase }}<span *ngIf=\"!last\">, </span>\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"item-right\">\n      <div class=\"quantity-control\" *ngIf=\"cartType === 'SHOPPING'\">\n        <button class=\"qty-btn px-2\" (click)=\"decreaseQty(item)\" [disabled]=\"item.quantity === 1\">\n          <mat-icon>remove</mat-icon>\n        </button>\n        <span class=\"qty-value px-3\">{{item.quantity}}</span>\n        <button class=\"qty-btn px-2\" (click)=\"increaseQty(item)\">\n          <mat-icon>add</mat-icon>\n        </button>\n      </div>\n\n      <div class=\"item-price\">\n        \u20B9{{item.sellingPrice | number: '1.0-2'}}\n      </div>\n\n      <div class=\"delete-btn-circle\" (click)=\"removeItem(item)\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\n          <path d=\"M3 6h18\" />\n          <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\n          <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\n          <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\n          <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\n        </svg>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #EMPTYITEM>\n  <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\n    <div class=\"empty-cart-container d-flex flex-column\">\n      <div class=\"cart-image\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\n          [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\n      </div>\n      <div class=\"cart-text content-side\">\n        <ng-container *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"d-flex justify-content-center\"\n            [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\n          </div>\n        </ng-container>\n      </div>\n      <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n        [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n        [appButtonEditor]=\"edit ?? false\"\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n        Shopping'}}</button>\n    </div>\n  </section>\n</ng-template>\n\n<ng-template #SCHEME_REDEMPTION>\n  <div class=\"modal-body\">\n    <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\n      [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\n      <label for=\"individual\" class=\"scheme-card\">\n        <div class=\"scheme-info d-flex gap-1\">\n          <div class=\"form-check-radio\">\n            <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\n          </div>\n          <div class=\"right-side\">\n            <div class=\"scheme-name\">\n              <div class=\"scheme-title\">Individual Investment Scheme</div>\n              <div class=\"scheme-monthly\">\u20B98000/M</div>\n            </div>\n            <div class=\"scheme-details\">\n              <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\n              <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\n            </div>\n            <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\n          </div>\n        </div>\n      </label>\n    </div>\n    <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\n      Please add more \u20B9{{vaildAmount}} to reedem this scheme\n    </div>\n  </div>\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.cart-header{padding:16px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.cart-header h2{margin:0;font-size:18px;font-weight:500;color:#0f172a}.cart-item{display:flex!important;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;gap:20px;padding:0 8px;transition:background .2s}.cart-item:hover{background:#fbfcfe}.item-left{display:flex;align-items:center;flex:1}.item-right{display:flex;align-items:center;padding:15px;gap:32px}.item-image img{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid #f1f5f9}.item-details{display:flex;flex-direction:column;gap:4px}.item-title{margin:0;font-size:15px;font-weight:600;color:#0f172a;line-height:1.4}.item-subtitle{font-size:13px;color:#64748b;font-weight:400}.quantity-control{display:flex;align-items:center;border:1.5px solid #e2e8f0;border-radius:7px;overflow:hidden;height:38px;background:#fff;width:fit-content}.qty-btn{width:38px;height:100%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;transition:all .2s ease}.qty-btn:hover{background:#f8fafc;color:#0f172a}.qty-btn mat-icon{font-size:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.qty-value{width:32px;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:#0f172a;border-left:1.5px solid #e2e8f0;border-right:1.5px solid #e2e8f0}.item-price{font-size:18px;font-weight:700;color:#0f172a;min-width:60px;text-align:right;letter-spacing:-.01em}.delete-btn-circle{width:36px;height:36px;border-radius:50%;border:1px solid #fee2e2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ef4444;transition:all .2s ease}.delete-btn-circle:hover{background:#fef2f2;border-color:#fecaca;transform:scale(1.05);color:#dc2626}.delete-btn-circle svg{width:18px;height:18px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.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:#df2e2e;cursor:pointer;font-size:18px}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;width:100%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.fs-12{font-size:12px}.fs-18{font-size:18px}.b-1-b{border-width:0px 1px;border-style:solid;border-color:#000}.container{max-width:unset;padding:24px;display:flex;gap:24px;width:100%!important}.main-content{background:#fff;border-radius:12px;width:70%}.promo-banner{padding:16px 20px;display:flex;flex-direction:column;gap:10px;border-radius:8px;border:1px solid #e2e8f0}.promo-banner-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.promo-text h3{font-size:16px!important;font-weight:500;margin-bottom:4px}.promo-text p{font-size:.9rem!important;margin-bottom:0!important;color:#64748b}.see-live-btn{background:#fff;border:1px solid #e2e8f0;font-weight:600;color:#000;padding:8px 16px;border-radius:8px;font-size:12px!important;cursor:pointer;display:flex;align-items:center;gap:8px;width:max-content!important;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.see-live-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}.see-live-btn:disabled{color:#94a3b8;cursor:not-allowed;box-shadow:none}.see-live-btn:disabled:hover{background:#fff;border-color:#e2e8f0;transform:none}.see-live-btn svg{color:#6366f1}.video-selection-line{font-size:.8rem;color:#64748b}.video-cart-hint{font-size:.8rem;color:#6366f1;cursor:pointer;text-decoration:underline;width:max-content}.schedule-panel-overlay{position:fixed;inset:0;background:#141a2666;z-index:1200}.schedule-panel-backdrop{position:absolute;inset:0;border:none;background:none;cursor:default;padding:0}.schedule-panel{position:absolute;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:#fff;box-shadow:-20px 0 50px -20px #141a2659;display:flex;flex-direction:column}.schedule-panel-header{flex:none;padding:20px 22px;border-bottom:1px solid #e2e8f0;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.schedule-panel-heading{min-width:0}.schedule-panel-title{font-size:17px;font-weight:600;color:#1b2436;line-height:1.3;margin-bottom:2px}.schedule-panel-subtitle{font-size:12.5px;color:#64748b;line-height:1.3}.schedule-panel-close{flex:none;border:none;background:none;cursor:pointer;color:#64748b;line-height:0;padding:3px}.schedule-panel-body{flex:1;min-height:0;overflow-y:auto;padding:16px 22px;display:flex;flex-direction:column;gap:10px}.schedule-panel-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;cursor:pointer;width:100%;background:#fff;border:1px solid #e2e8f0;text-align:left}.schedule-panel-row.selected{background:#f5f3ff;border-color:#c7d2fe}.schedule-panel-checkbox{width:18px;height:18px;flex:none;border:1.5px solid #cbd5e1;border-radius:4px;background:#fff;display:grid;place-items:center}.schedule-panel-checkbox.checked{background:#6366f1;border-color:#6366f1}.schedule-panel-checkbox mat-icon{color:#fff!important;font-size:13px!important;height:13px!important;width:13px!important}.schedule-panel-thumb{width:46px;height:46px;border-radius:6px;object-fit:cover;flex:none;background:#f3efe9}.schedule-panel-info{flex:1}.schedule-panel-name{font-size:13.5px;color:#1b2436}.schedule-panel-footer{flex:none;padding:16px 22px;border-top:1px solid #e2e8f0;display:flex;flex-direction:column;gap:10px}.schedule-panel-selection-line{font-size:11.5px;color:#64748b}.schedule-panel-cta{width:100%;height:48px;border:none;border-radius:8px;background:#7c3a11;color:#fff;font-size:14px;font-weight:600;cursor:pointer}.schedule-panel-cta:disabled{background:#cbd5e1;cursor:not-allowed}.cart-item{display:flex;gap:16px;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:15%;height:100px;border-radius:8px;object-fit:cover;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-weight:500;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px}.current-price{font-size:1rem;font-weight:600}.original-price{font-size:1rem;text-decoration:line-through}.discount{background:#fef3c7;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:32%}.coupon-section{border-radius:8px;padding:10px 15px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.coupon-section:hover{border-color:#cbd5e1;background-color:#f8fafc}.chevron-icon{color:#94a3b8;transition:transform .2s ease}.coupon-section:hover .chevron-icon{transform:translate(2px);color:#64748b}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.coupon-icon mat-icon{font-size:17px;width:17px!important;height:19px!important}.coupon-text{font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:8px;padding:20px;border:1px solid #e2e8f0}.summary-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:20px;letter-spacing:-.01em}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.summary-row:last-child{margin-bottom:0}.summary-label{font-size:14px;font-weight:400;color:#64748b}.summary-value{font-size:14px;font-weight:500;color:#0f172a}.summary-divider{height:1px;background:#f1f5f9;margin:16px 0;width:100%}.total-row .summary-label{font-size:16px;font-weight:600;color:#0f172a}.total-row .summary-value{font-size:16px;font-weight:700;color:#0f172a}.total-row{border-top:1px solid #e2e8f0;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px}.total-value{font-weight:700;font-size:18px}.place-order-btn{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;align-items:center;width:max-content;border-radius:8px;border:1px solid #e2e8f0}.cart-tabs div{padding:7px 10px;cursor:pointer;font-size:14px}.selected-cart-tab{margin:6px;background:#f1f5f9;border-radius:5px;color:#000!important;font-weight:500}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.cart-item{flex-direction:column!important;align-items:flex-start!important;padding:16px 12px!important;gap:16px!important}.item-left{width:100%!important;gap:16px!important;align-items:flex-start!important}.item-image{width:86px!important;height:86px!important;flex-shrink:0!important}.item-right{width:100%!important;justify-content:space-between!important;padding:0!important;gap:12px!important;margin-top:4px!important}.item-price{flex:1!important;text-align:right!important;margin-right:8px!important;font-size:16px!important}.item-title{font-size:14px!important;-webkit-line-clamp:2!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.quantity-control{height:34px!important}.qty-btn{width:34px!important}.qty-value{width:28px!important;font-size:13px!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}.vouchers-listing-section{min-width:unset!important;width:100vw!important}.separator{display:none!important}.coupon-meta{display:grid!important;grid-template-columns:1fr 1fr!important}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.w-fit{width:fit-content!important}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}.add-to-cart-parent{width:max-content;border:1px solid #000000;border-radius:8px}.cursor{cursor:pointer}.cart-text{max-width:600px;margin:0 auto;text-align:center}.cart-text div{word-break:break-word;overflow-wrap:break-word;white-space:normal}.switch{position:relative;display:inline-block;width:45px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:3px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translate(24px)}.vouchers-listing-section{position:relative;width:fit-content;min-width:500px;z-index:100;background:#fff;height:100vh}.vouchers-listing-section .coupon-heading{border-bottom:1px solid #eee}.vouchers-listing-section .coupon-listing{padding:12px 16px;overflow-y:auto;height:calc(97vh - 100px)}.voucher-details{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 4px #00000042}.voucher-details .coupon-brief .apply-offer-btn{background:#111;color:#fff;border-radius:10px;padding:6px 16px}.voucher-details .coupon-code-box{border:1.5px dashed #bbb;border-radius:8px;padding:8px 12px;margin-bottom:10px}.voucher-details .coupon-code-box .code-label{font-size:11px;color:#888;margin-bottom:2px}.voucher-details .coupon-code-box .code-row .code-value{font-weight:700;font-size:15px;letter-spacing:1px}.voucher-details .coupon-meta .clock-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.applied-coupon-card{background:#f0fff8;border-radius:12px;padding:12px 16px}.applied-coupon-card .applied-coupon-left .success-check{color:#22c55e;font-size:22px}.applied-coupon-card .applied-coupon-left .applied-coupon-code{font-weight:700;font-size:14px}.applied-coupon-card .applied-coupon-left .applied-coupon-saving{font-size:13px;color:#097d5f;margin-top:2px}.active-type{background:#111!important;color:#fff!important}.redemption-type{text-align:center;border-radius:10px;padding:6px 16px;background:#d3d3d36b;width:-webkit-fill-available!important}.wallte_icon{background:#000;border-radius:50px;padding:5px 9px 7px}.wallte_icon img{width:18px;height:18px}.fw-600{font-weight:600}.coupon-type{width:fit-content!important;border-radius:26px!important;background:transparent!important;border:1px solid #afafaf;color:#393838;text-align:center;padding:6px 16px}.active-coupon{background:transparent!important;border:2px solid black!important;color:#000!important}.my-close-btn{position:absolute!important;top:10px!important;right:10px!important}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$2.Router }, { type: RestService }, { type: i3$2.MatDialog }, { type: StorageServiceService }, { type: i6$1.MessageService }, { type: i8$1.MatBottomSheet }, { type: i2$2.ActivatedRoute }, { type: BookingProductCartService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -26547,11 +26547,11 @@ class BookAppointmentComponent extends BaseSection {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookAppointmentComponent, deps: [{ token: i2$2.ActivatedRoute }, { token: i2$2.Router }, { token: RestService }, { token: EventsService }, { token: i6$1.MessageService }, { token: StorageServiceService }, { token: BookingProductCartService }, { token: i3$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BookAppointmentComponent, isStandalone: true, selector: "simpo-book-appointment", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, 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_body w-100 d-flex justify-content-center\">\n        <div class=\"wiz-container\">\n\n            <ng-container *ngIf=\"step === 'form'\">\n                <div class=\"single-grid\">\n                    <div class=\"single-left\">\n\n                        <div class=\"wizard-banner\" [id]=\"data?.id\" [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n                            <div class=\"wizard-banner-title\">{{bannerTitle}}</div>\n                            <div class=\"wizard-banner-desc\">{{bannerDesc}}</div>\n                        </div>\n\n                        <div class=\"sub-step-tabs\">\n                            <button type=\"button\" class=\"sub-step-tab\" *ngFor=\"let s of subSteps; trackBy: trackBySubStepKey\"\n                                [class.active]=\"s.active\" [class.locked]=\"s.locked\" [disabled]=\"s.locked\" (click)=\"s.go()\">\n                                <span class=\"sub-step-dot\">{{s.num}}</span>\n                                {{s.label}}\n                            </button>\n                        </div>\n\n                        <div class=\"sub-step-content\">\n                            <ng-container *ngIf=\"subStep === 'date'\">\n                                <div class=\"section-card card\">\n                                    <div class=\"week-header\">\n                                        <div>\n                                            <h3 class=\"section-title mb-0\">Select a Date</h3>\n                                            <p class=\"subtitle mb-0\">{{weekRangeLabel}}</p>\n                                        </div>\n                                        <div class=\"week-arrows\">\n                                            <button type=\"button\" class=\"week-arrow-btn\" (click)=\"prevWeek()\" [disabled]=\"weekOffset <= 0\">\n                                                <mat-icon>chevron_left</mat-icon>\n                                            </button>\n                                            <button type=\"button\" class=\"week-arrow-btn\" (click)=\"nextWeek()\" [disabled]=\"weekOffset >= maxWeekOffset\">\n                                                <mat-icon>chevron_right</mat-icon>\n                                            </button>\n                                        </div>\n                                    </div>\n                                    <div class=\"week-strip\">\n                                        <button type=\"button\" class=\"week-day\" *ngFor=\"let d of weekDays\" [class.selected]=\"d.selected\"\n                                            (click)=\"pickDay(d)\">\n                                            <div class=\"week-day-dow\">{{d.dow}}</div>\n                                            <div class=\"week-day-num\">{{d.num}}</div>\n                                        </button>\n                                    </div>\n                                </div>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"subStep === 'time'\">\n                                <div class=\"section-card card\">\n                                    <h3 class=\"section-title mb-0\">Select a Time</h3>\n                                    <p class=\"subtitle\" *ngIf=\"selectedDateStr\">Available slots for {{selectedDateStr}}</p>\n                                    <p class=\"subtitle mb-0\" *ngIf=\"!selectedDateStr\">Pick a date to see available times.</p>\n                                    <div class=\"time-slot-grid overflow-scroll\" *ngIf=\"selectedDateStr\">\n                                        <ng-container *ngIf=\"!slotsLoading; else slotsLoadingTpl\">\n                                            <div class=\"time-slot rounded-2\" *ngFor=\"let time of slots\" [class.selected]=\"time.selected\"\n                                                (click)=\"selectSlot(time)\">{{time?.value}}</div>\n                                            <p class=\"mb-0\" *ngIf=\"slots.length === 0\">No slots available for this date.</p>\n                                        </ng-container>\n                                        <ng-template #slotsLoadingTpl>\n                                            <p class=\"mb-0\">Loading available times...</p>\n                                        </ng-template>\n                                    </div>\n                                </div>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"subStep === 'details'\">\n                                <div class=\"section-card card\">\n                                    <h3 class=\"section-title\">Booking Details</h3>\n                                    <div class=\"booking-for-line\">\n                                        Booking for <strong>{{userDetails?.contact?.name}}</strong>\n                                        <ng-container *ngIf=\"userDetails?.contact?.mobile\"> \u00B7 {{userDetails?.contact?.mobile}}</ng-container>\n                                        <ng-container *ngIf=\"userDetails?.contact?.email\"> \u00B7 {{userDetails?.contact?.email}}</ng-container>\n                                    </div>\n\n                                    <ng-container *ngIf=\"mode === 'HOME_VISIT'\">\n                                        <p class=\"policies-title mt-3 mb-2\" style=\"font-size:1rem;\">Shipping Address</p>\n\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\n                                        <div class=\"mb-0 mt-3\">\n                                            <label class=\"form-label d-flex align-items-center\">Instructions (optional)</label>\n                                            <textarea class=\"form-control form-textarea rounded-2\" [(ngModel)]=\"instructions\"></textarea>\n                                        </div>\n                                    </ng-container>\n                                </div>\n                            </ng-container>\n                        </div>\n\n                        <div class=\"sub-step-footer\">\n                            <button type=\"button\" class=\"sub-back-btn\" [disabled]=\"subBackOff\" (click)=\"subBack()\">Back</button>\n                            <div class=\"sub-chosen-label\">{{subChosenLabel}}</div>\n                            <button type=\"button\" class=\"sub-next-btn\" *ngIf=\"subStep !== 'details'\" [disabled]=\"subNextOff\" (click)=\"subNext()\">Next</button>\n                        </div>\n                    </div>\n\n                    <div class=\"single-right section-card card\">\n                        <h3 class=\"section-title\">Your Shortlisted Designs</h3>\n                        <div class=\"design-row\" *ngFor=\"let it of productCartItems\">\n                            <div class=\"design-thumb\"></div>\n                            <div class=\"design-info\">\n                                <div class=\"design-name\">{{it.itemName}}</div>\n                                <div class=\"design-price\">\u20B9{{(it.sellingPrice ?? it.price ?? 0) * (it.quantity ?? 1)}}</div>\n                            </div>\n                        </div>\n                        <button type=\"button\" class=\"add-more-btn\" (click)=\"goToListing()\">+ Add More Designs</button>\n\n                        <div class=\"summary-divider\"></div>\n\n                        <div class=\"summary-line\" *ngIf=\"mode !== 'HOME_VISIT' || homeVisitCharge <= 0\">\n                            <div class=\"summary-label\">Service:</div>\n                            <div class=\"free-label\">FREE</div>\n                        </div>\n                        <div class=\"summary-line\" *ngIf=\"mode === 'HOME_VISIT' && homeVisitCharge > 0\">\n                            <div class=\"summary-label\">Home visit charge</div>\n                            <div class=\"summary-value\">\u20B9{{homeVisitCharge}}</div>\n                        </div>\n\n                        <button class=\"continue-btn w-100 mt-2\" [disabled]=\"invalid()\" (click)=\"goToReview()\">Review Booking</button>\n                        <p class=\"footnote\">You will review everything on the next screen before it is confirmed.</p>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"step === 'review'\">\n                <div class=\"review-wrap\">\n                    <div class=\"review-card card\">\n                        <div class=\"review-header\">Review your booking</div>\n                        <div class=\"review-row\" *ngFor=\"let rc of reviewRows\">\n                            <div class=\"review-k\">{{rc.k}}</div>\n                            <div class=\"review-v\">{{rc.v}}</div>\n                        </div>\n                    </div>\n                    <div class=\"review-actions\">\n                        <button type=\"button\" class=\"review-back-btn\" (click)=\"backToForm()\">Back &amp; edit</button>\n                        <button type=\"button\" class=\"review-confirm-btn\" (click)=\"confirmBooking()\" [disabled]=\"isProcessing\">\n                            {{isProcessing ? 'Please wait...' : (mode === 'HOME_VISIT' ? 'Confirm Home Visit' : 'Confirm Video Call')}}\n                        </button>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"step === 'done'\">\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 your appointment. Please\n                            try again later'}}\n                        </p>\n\n                        <div class=\"video-call-link-card d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus && mode === '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\">\n                                    <span class=\"detail-label\">{{productCartItems.length ? 'Products' : (mode === 'HOME_VISIT' ? 'Home Visit' : 'Video Call')}}</span>\n                                    <span class=\"detail-value\">{{selectedDateStr}} at {{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=\"homeVisitCharge > 0\">\n                                    <span class=\"detail-label\">Home visit charge</span>\n                                    <span class=\"detail-value\">\u20B9{{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                            <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                        </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</section>\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.5rem;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}.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:.75rem;font-weight:600;color:var(--slate-800)!important;height:34px;padding:0 4px;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);text-align:center;display:flex;align-items:center;justify-content: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}.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)}.done-btn-secondary:hover{background-color:var(--slate-100);color:var(--slate-900)!important}.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}.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(6,1fr);gap:8px;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}.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}}h1{font-size:24px!important;font-weight:600!important}.wiz-container{width:100%;max-width:1120px}.wizard-banner{border-radius:var(--border-radius-lg);padding:1.125rem 1.5rem;background:var(--color-accent-gradient);box-shadow:var(--shadow-sm)}.wizard-banner-title{font-size:1.1rem;font-weight:700;color:#fff!important}.wizard-banner-desc{font-size:.85rem;line-height:1.5;color:#ffffffd9!important;padding-top:.2rem;max-width:520px}.sub-step-tabs{display:flex;background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);overflow:hidden}.sub-step-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:none;background:#fff;padding:.85rem 0;font-size:.85rem;font-weight:600;color:var(--slate-500)!important;cursor:pointer;border-bottom:2px solid transparent;transition:var(--transition-smooth)}.sub-step-tab.active{color:var(--slate-900)!important;border-bottom-color:var(--color-primary);background:var(--slate-50)}.sub-step-tab.locked{color:var(--slate-300)!important;cursor:not-allowed}.sub-step-dot{width:20px;height:20px;border-radius:50%;background:var(--slate-200);color:var(--slate-500)!important;font-size:.7rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sub-step-tab.active .sub-step-dot{background:var(--color-accent-gradient);color:#fff!important}.sub-step-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.85rem 1.25rem;box-shadow:var(--shadow-sm)}.sub-step-footer .sub-back-btn{width:auto;flex:0 0 auto;height:40px;font-size:.85rem;font-weight:600;color:var(--slate-600)!important;background:none;border:1.5px solid var(--slate-200);padding:0 18px;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth)}.sub-step-footer .sub-back-btn:hover:not(:disabled){color:var(--slate-900)!important;background-color:var(--slate-100)}.sub-step-footer .sub-back-btn:disabled{color:var(--slate-300)!important;cursor:not-allowed}.sub-step-footer .sub-chosen-label{width:auto;flex:1 1 auto;font-size:.8rem;color:var(--slate-500)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-align:center}.sub-step-footer .sub-next-btn{width:auto;flex:0 0 auto;height:40px;background:var(--color-accent-gradient);color:#fff!important;border:none;padding:0 22px;border-radius:var(--border-radius-md);font-size:.85rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.sub-step-footer .sub-next-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.sub-step-footer .sub-next-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.single-grid{display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:start}.single-left{display:flex;flex-direction:column;gap:1.5rem}.single-right{align-self:flex-start;position:sticky;top:10px}.week-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px}.week-arrows{display:flex;gap:8px}.week-arrow-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--slate-200);background:#fff;color:var(--slate-700)!important;cursor:pointer;display:flex;align-items:center;justify-content:center}.week-arrow-btn:disabled{color:var(--slate-300)!important;cursor:not-allowed}.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.week-day{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem .25rem;cursor:pointer;transition:var(--transition-smooth);text-align:center}.week-day:hover{border-color:var(--slate-400)}.week-day.selected{background:var(--color-accent-gradient);border-color:transparent}.week-day.selected .week-day-dow,.week-day.selected .week-day-num{color:#fff!important}.week-day-dow{font-size:.75rem;font-weight:600;color:var(--slate-500)!important;text-transform:uppercase}.week-day-num{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-top:2px}.booking-for-line{font-size:.9rem;color:var(--slate-600)!important;padding:.85rem 1rem;background:var(--slate-50);border-radius:var(--border-radius-md);margin-bottom:.5rem}.booking-for-line strong{color:var(--slate-900)!important}.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}.design-row{display:flex;gap:13px;align-items:center;padding-bottom:1rem}.design-thumb{width:56px;height:56px;border-radius:8px;background:var(--slate-100);flex:none}.design-info{flex:1}.design-name{font-size:13.5px;color:var(--slate-900)!important;line-height:1.35}.design-price{font-size:13.5px;font-weight:600;color:var(--slate-900)!important;margin-top:3px}.add-more-btn{width:100%;height:44px;border:1.5px dashed var(--slate-300);border-radius:8px;background:none;color:var(--color-primary)!important;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:1rem}.summary-divider{height:1px;background:var(--slate-100);margin-bottom:1rem}.summary-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.free-label{font-size:13.5px;font-weight:600;color:var(--color-success)!important}.footnote{font-size:11.5px;line-height:1.5;color:var(--slate-500)!important;text-align:center;margin:.75rem 0 0}.review-wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px}.review-card{border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);overflow:hidden}.review-actions{display:flex;gap:12px}.review-actions .review-back-btn{flex:1;height:48px;border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);background:#fff;color:var(--slate-600)!important;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.review-actions .review-back-btn:hover{color:var(--slate-900)!important;background-color:var(--slate-100)}.review-actions .review-confirm-btn{flex:1;height:48px;border:none;border-radius:var(--border-radius-md);background:var(--color-accent-gradient);color:#fff!important;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.review-actions .review-confirm-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.review-actions .review-confirm-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.review-header{padding:14px 18px;background:var(--slate-50);border-bottom:1px solid var(--slate-100);font-size:14.5px;font-weight:700;color:var(--slate-900)!important}.review-row{display:flex;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:1px solid var(--slate-100);font-size:13.5px}.review-row:last-child{border-bottom:none}.review-k{color:var(--slate-500)!important;flex-shrink:0}.review-v{color:var(--slate-900)!important;font-weight:500;text-align:right}@media screen and (max-width: 900px){.single-grid{grid-template-columns:1fr}.single-right{position:static}}@media screen and (max-width: 475px){.week-strip{gap:6px}}\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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatIconModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { 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: BookAppointmentComponent, isStandalone: true, selector: "simpo-book-appointment", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, 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_body w-100 d-flex justify-content-center\">\n        <div class=\"wiz-container\">\n\n            <ng-container *ngIf=\"step === 'form'\">\n                <div class=\"single-grid\">\n                    <div class=\"single-left\">\n\n                        <div class=\"wizard-banner\" [id]=\"data?.id\" [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n                            <div class=\"wizard-banner-title\">{{bannerTitle}}</div>\n                            <div class=\"wizard-banner-desc\">{{bannerDesc}}</div>\n                        </div>\n\n                        <div class=\"sub-step-tabs\">\n                            <button type=\"button\" class=\"sub-step-tab\" *ngFor=\"let s of subSteps; trackBy: trackBySubStepKey\"\n                                [class.active]=\"s.active\" [class.locked]=\"s.locked\" [disabled]=\"s.locked\" (click)=\"s.go()\">\n                                <span class=\"sub-step-dot\">{{s.num}}</span>\n                                {{s.label}}\n                            </button>\n                        </div>\n\n                        <div class=\"sub-step-content\">\n                            <ng-container *ngIf=\"subStep === 'date'\">\n                                <div class=\"section-card card\">\n                                    <div class=\"week-header\">\n                                        <div>\n                                            <h3 class=\"section-title mb-0\">Select a Date</h3>\n                                            <p class=\"subtitle mb-0\">{{weekRangeLabel}}</p>\n                                        </div>\n                                        <div class=\"week-arrows\">\n                                            <button type=\"button\" class=\"week-arrow-btn\" (click)=\"prevWeek()\" [disabled]=\"weekOffset <= 0\">\n                                                <mat-icon>chevron_left</mat-icon>\n                                            </button>\n                                            <button type=\"button\" class=\"week-arrow-btn\" (click)=\"nextWeek()\" [disabled]=\"weekOffset >= maxWeekOffset\">\n                                                <mat-icon>chevron_right</mat-icon>\n                                            </button>\n                                        </div>\n                                    </div>\n                                    <div class=\"week-strip\">\n                                        <button type=\"button\" class=\"week-day\" *ngFor=\"let d of weekDays\" [class.selected]=\"d.selected\"\n                                            (click)=\"pickDay(d)\">\n                                            <div class=\"week-day-dow\">{{d.dow}}</div>\n                                            <div class=\"week-day-num\">{{d.num}}</div>\n                                        </button>\n                                    </div>\n                                </div>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"subStep === 'time'\">\n                                <div class=\"section-card card\">\n                                    <h3 class=\"section-title mb-0\">Select a Time</h3>\n                                    <p class=\"subtitle\" *ngIf=\"selectedDateStr\">Available slots for {{selectedDateStr}}</p>\n                                    <p class=\"subtitle mb-0\" *ngIf=\"!selectedDateStr\">Pick a date to see available times.</p>\n                                    <div class=\"time-slot-grid overflow-scroll\" *ngIf=\"selectedDateStr\">\n                                        <ng-container *ngIf=\"!slotsLoading; else slotsLoadingTpl\">\n                                            <div class=\"time-slot rounded-2\" *ngFor=\"let time of slots\" [class.selected]=\"time.selected\"\n                                                (click)=\"selectSlot(time)\">{{time?.value}}</div>\n                                            <p class=\"mb-0\" *ngIf=\"slots.length === 0\">No slots available for this date.</p>\n                                        </ng-container>\n                                        <ng-template #slotsLoadingTpl>\n                                            <p class=\"mb-0\">Loading available times...</p>\n                                        </ng-template>\n                                    </div>\n                                </div>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"subStep === 'details'\">\n                                <div class=\"section-card card\">\n                                    <h3 class=\"section-title\">Booking Details</h3>\n                                    <div class=\"booking-for-line\">\n                                        Booking for <strong>{{userDetails?.contact?.name}}</strong>\n                                        <ng-container *ngIf=\"userDetails?.contact?.mobile\"> \u00B7 {{userDetails?.contact?.mobile}}</ng-container>\n                                        <ng-container *ngIf=\"userDetails?.contact?.email\"> \u00B7 {{userDetails?.contact?.email}}</ng-container>\n                                    </div>\n\n                                    <ng-container *ngIf=\"mode === 'HOME_VISIT'\">\n                                        <p class=\"policies-title mt-3 mb-2\" style=\"font-size:1rem;\">Shipping Address</p>\n\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\n                                        <div class=\"mb-0 mt-3\">\n                                            <label class=\"form-label d-flex align-items-center\">Instructions (optional)</label>\n                                            <textarea class=\"form-control form-textarea rounded-2\" [(ngModel)]=\"instructions\"></textarea>\n                                        </div>\n                                    </ng-container>\n                                </div>\n                            </ng-container>\n                        </div>\n\n                        <div class=\"sub-step-footer\">\n                            <button type=\"button\" class=\"sub-back-btn\" [disabled]=\"subBackOff\" (click)=\"subBack()\">Back</button>\n                            <div class=\"sub-chosen-label\">{{subChosenLabel}}</div>\n                            <button type=\"button\" class=\"sub-next-btn\" *ngIf=\"subStep !== 'details'\" [disabled]=\"subNextOff\" (click)=\"subNext()\">Next</button>\n                        </div>\n                    </div>\n\n                    <div class=\"single-right section-card card\">\n                        <h3 class=\"section-title\">Your Shortlisted Designs</h3>\n                        <div class=\"design-row\" *ngFor=\"let it of productCartItems\">\n                            <div class=\"design-thumb\"></div>\n                            <div class=\"design-info\">\n                                <div class=\"design-name\">{{it.itemName}}</div>\n                                <div class=\"design-price\">\u20B9{{(it.sellingPrice ?? it.price ?? 0) * (it.quantity ?? 1)}}</div>\n                            </div>\n                        </div>\n                        <button type=\"button\" class=\"add-more-btn\" (click)=\"goToListing()\">+ Add More Designs</button>\n\n                        <div class=\"summary-divider\"></div>\n\n                        <div class=\"summary-line\" *ngIf=\"mode !== 'HOME_VISIT' || homeVisitCharge <= 0\">\n                            <div class=\"summary-label\">Service:</div>\n                            <div class=\"free-label\">FREE</div>\n                        </div>\n                        <div class=\"summary-line\" *ngIf=\"mode === 'HOME_VISIT' && homeVisitCharge > 0\">\n                            <div class=\"summary-label\">Home visit charge</div>\n                            <div class=\"summary-value\">\u20B9{{homeVisitCharge}}</div>\n                        </div>\n\n                        <button class=\"continue-btn w-100 mt-2\" [disabled]=\"invalid()\" (click)=\"goToReview()\">Review Booking</button>\n                        <p class=\"footnote\">You will review everything on the next screen before it is confirmed.</p>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"step === 'review'\">\n                <div class=\"review-wrap\">\n                    <div class=\"review-card card\">\n                        <div class=\"review-header\">Review your booking</div>\n                        <div class=\"review-row\" *ngFor=\"let rc of reviewRows\">\n                            <div class=\"review-k\">{{rc.k}}</div>\n                            <div class=\"review-v\">{{rc.v}}</div>\n                        </div>\n                    </div>\n                    <div class=\"review-actions\">\n                        <button type=\"button\" class=\"review-back-btn\" (click)=\"backToForm()\">Back &amp; edit</button>\n                        <button type=\"button\" class=\"review-confirm-btn\" (click)=\"confirmBooking()\" [disabled]=\"isProcessing\">\n                            {{isProcessing ? 'Please wait...' : (mode === 'HOME_VISIT' ? 'Confirm Home Visit' : 'Confirm Video Call')}}\n                        </button>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"step === 'done'\">\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 your appointment. Please\n                            try again later'}}\n                        </p>\n\n                        <div class=\"video-call-link-card d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus && mode === '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\">\n                                    <span class=\"detail-label\">{{productCartItems.length ? 'Products' : (mode === 'HOME_VISIT' ? 'Home Visit' : 'Video Call')}}</span>\n                                    <span class=\"detail-value\">{{selectedDateStr}} at {{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=\"mode === 'HOME_VISIT' && homeVisitCharge > 0\">\n                                    <span class=\"detail-label\">Home visit charge</span>\n                                    <span class=\"detail-value\">\u20B9{{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                            <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                        </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</section>\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.5rem;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}.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:.75rem;font-weight:600;color:var(--slate-800)!important;height:34px;padding:0 4px;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);text-align:center;display:flex;align-items:center;justify-content: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}.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;white-space:nowrap}.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)}.done-btn-secondary:hover{background-color:var(--slate-100);color:var(--slate-900)!important}.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}.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(6,1fr);gap:8px;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){.done-actions{flex-direction:column}.done-btn{max-width:none;width:100%}.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}.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}}h1{font-size:24px!important;font-weight:600!important}.wiz-container{width:100%;max-width:1120px}.wizard-banner{border-radius:var(--border-radius-lg);padding:1.125rem 1.5rem;background:var(--color-accent-gradient);box-shadow:var(--shadow-sm)}.wizard-banner-title{font-size:1.1rem;font-weight:700;color:#fff!important}.wizard-banner-desc{font-size:.85rem;line-height:1.5;color:#ffffffd9!important;padding-top:.2rem;max-width:520px}.sub-step-tabs{display:flex;background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);overflow:hidden}.sub-step-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:none;background:#fff;padding:.85rem 0;font-size:.85rem;font-weight:600;color:var(--slate-500)!important;cursor:pointer;border-bottom:2px solid transparent;transition:var(--transition-smooth)}.sub-step-tab.active{color:var(--slate-900)!important;border-bottom-color:var(--color-primary);background:var(--slate-50)}.sub-step-tab.locked{color:var(--slate-300)!important;cursor:not-allowed}.sub-step-dot{width:20px;height:20px;border-radius:50%;background:var(--slate-200);color:var(--slate-500)!important;font-size:.7rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sub-step-tab.active .sub-step-dot{background:var(--color-accent-gradient);color:#fff!important}.sub-step-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.85rem 1.25rem;box-shadow:var(--shadow-sm)}.sub-step-footer .sub-back-btn{width:auto;flex:0 0 auto;height:40px;font-size:.85rem;font-weight:600;color:var(--slate-600)!important;background:none;border:1.5px solid var(--slate-200);padding:0 18px;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth)}.sub-step-footer .sub-back-btn:hover:not(:disabled){color:var(--slate-900)!important;background-color:var(--slate-100)}.sub-step-footer .sub-back-btn:disabled{color:var(--slate-300)!important;cursor:not-allowed}.sub-step-footer .sub-chosen-label{width:auto;flex:1 1 auto;font-size:.8rem;color:var(--slate-500)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-align:center}.sub-step-footer .sub-next-btn{width:auto;flex:0 0 auto;height:40px;background:var(--color-accent-gradient);color:#fff!important;border:none;padding:0 22px;border-radius:var(--border-radius-md);font-size:.85rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.sub-step-footer .sub-next-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.sub-step-footer .sub-next-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.single-grid{display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:start}.single-left{display:flex;flex-direction:column;gap:1.5rem}.single-right{align-self:flex-start;position:sticky;top:10px}.week-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px}.week-arrows{display:flex;gap:8px}.week-arrow-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--slate-200);background:#fff;color:var(--slate-700)!important;cursor:pointer;display:flex;align-items:center;justify-content:center}.week-arrow-btn:disabled{color:var(--slate-300)!important;cursor:not-allowed}.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.week-day{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem .25rem;cursor:pointer;transition:var(--transition-smooth);text-align:center}.week-day:hover{border-color:var(--slate-400)}.week-day.selected{background:var(--color-accent-gradient);border-color:transparent}.week-day.selected .week-day-dow,.week-day.selected .week-day-num{color:#fff!important}.week-day-dow{font-size:.75rem;font-weight:600;color:var(--slate-500)!important;text-transform:uppercase}.week-day-num{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-top:2px}.booking-for-line{font-size:.9rem;color:var(--slate-600)!important;padding:.85rem 1rem;background:var(--slate-50);border-radius:var(--border-radius-md);margin-bottom:.5rem}.booking-for-line strong{color:var(--slate-900)!important}.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}.design-row{display:flex;gap:13px;align-items:center;padding-bottom:1rem}.design-thumb{width:56px;height:56px;border-radius:8px;background:var(--slate-100);flex:none}.design-info{flex:1}.design-name{font-size:13.5px;color:var(--slate-900)!important;line-height:1.35}.design-price{font-size:13.5px;font-weight:600;color:var(--slate-900)!important;margin-top:3px}.add-more-btn{width:100%;height:44px;border:1.5px dashed var(--slate-300);border-radius:8px;background:none;color:var(--color-primary)!important;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:1rem}.summary-divider{height:1px;background:var(--slate-100);margin-bottom:1rem}.summary-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.free-label{font-size:13.5px;font-weight:600;color:var(--color-success)!important}.footnote{font-size:11.5px;line-height:1.5;color:var(--slate-500)!important;text-align:center;margin:.75rem 0 0}.review-wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px}.review-card{border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);overflow:hidden}.review-actions{display:flex;gap:12px}.review-actions .review-back-btn{flex:1;height:48px;border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);background:#fff;color:var(--slate-600)!important;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.review-actions .review-back-btn:hover{color:var(--slate-900)!important;background-color:var(--slate-100)}.review-actions .review-confirm-btn{flex:1;height:48px;border:none;border-radius:var(--border-radius-md);background:var(--color-accent-gradient);color:#fff!important;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.review-actions .review-confirm-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.review-actions .review-confirm-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.review-header{padding:14px 18px;background:var(--slate-50);border-bottom:1px solid var(--slate-100);font-size:14.5px;font-weight:700;color:var(--slate-900)!important}.review-row{display:flex;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:1px solid var(--slate-100);font-size:13.5px}.review-row:last-child{border-bottom:none}.review-k{color:var(--slate-500)!important;flex-shrink:0}.review-v{color:var(--slate-900)!important;font-weight:500;text-align:right}@media screen and (max-width: 900px){.single-grid{grid-template-columns:1fr}.single-right{position:static}}@media screen and (max-width: 475px){.week-strip{gap:6px}}\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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatIconModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { 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: BookAppointmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-book-appointment', standalone: true, imports: [CommonModule, MatIcon, MatIconModule, FormsModule, MatDialogModule, 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_body w-100 d-flex justify-content-center\">\n        <div class=\"wiz-container\">\n\n            <ng-container *ngIf=\"step === 'form'\">\n                <div class=\"single-grid\">\n                    <div class=\"single-left\">\n\n                        <div class=\"wizard-banner\" [id]=\"data?.id\" [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n                            <div class=\"wizard-banner-title\">{{bannerTitle}}</div>\n                            <div class=\"wizard-banner-desc\">{{bannerDesc}}</div>\n                        </div>\n\n                        <div class=\"sub-step-tabs\">\n                            <button type=\"button\" class=\"sub-step-tab\" *ngFor=\"let s of subSteps; trackBy: trackBySubStepKey\"\n                                [class.active]=\"s.active\" [class.locked]=\"s.locked\" [disabled]=\"s.locked\" (click)=\"s.go()\">\n                                <span class=\"sub-step-dot\">{{s.num}}</span>\n                                {{s.label}}\n                            </button>\n                        </div>\n\n                        <div class=\"sub-step-content\">\n                            <ng-container *ngIf=\"subStep === 'date'\">\n                                <div class=\"section-card card\">\n                                    <div class=\"week-header\">\n                                        <div>\n                                            <h3 class=\"section-title mb-0\">Select a Date</h3>\n                                            <p class=\"subtitle mb-0\">{{weekRangeLabel}}</p>\n                                        </div>\n                                        <div class=\"week-arrows\">\n                                            <button type=\"button\" class=\"week-arrow-btn\" (click)=\"prevWeek()\" [disabled]=\"weekOffset <= 0\">\n                                                <mat-icon>chevron_left</mat-icon>\n                                            </button>\n                                            <button type=\"button\" class=\"week-arrow-btn\" (click)=\"nextWeek()\" [disabled]=\"weekOffset >= maxWeekOffset\">\n                                                <mat-icon>chevron_right</mat-icon>\n                                            </button>\n                                        </div>\n                                    </div>\n                                    <div class=\"week-strip\">\n                                        <button type=\"button\" class=\"week-day\" *ngFor=\"let d of weekDays\" [class.selected]=\"d.selected\"\n                                            (click)=\"pickDay(d)\">\n                                            <div class=\"week-day-dow\">{{d.dow}}</div>\n                                            <div class=\"week-day-num\">{{d.num}}</div>\n                                        </button>\n                                    </div>\n                                </div>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"subStep === 'time'\">\n                                <div class=\"section-card card\">\n                                    <h3 class=\"section-title mb-0\">Select a Time</h3>\n                                    <p class=\"subtitle\" *ngIf=\"selectedDateStr\">Available slots for {{selectedDateStr}}</p>\n                                    <p class=\"subtitle mb-0\" *ngIf=\"!selectedDateStr\">Pick a date to see available times.</p>\n                                    <div class=\"time-slot-grid overflow-scroll\" *ngIf=\"selectedDateStr\">\n                                        <ng-container *ngIf=\"!slotsLoading; else slotsLoadingTpl\">\n                                            <div class=\"time-slot rounded-2\" *ngFor=\"let time of slots\" [class.selected]=\"time.selected\"\n                                                (click)=\"selectSlot(time)\">{{time?.value}}</div>\n                                            <p class=\"mb-0\" *ngIf=\"slots.length === 0\">No slots available for this date.</p>\n                                        </ng-container>\n                                        <ng-template #slotsLoadingTpl>\n                                            <p class=\"mb-0\">Loading available times...</p>\n                                        </ng-template>\n                                    </div>\n                                </div>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"subStep === 'details'\">\n                                <div class=\"section-card card\">\n                                    <h3 class=\"section-title\">Booking Details</h3>\n                                    <div class=\"booking-for-line\">\n                                        Booking for <strong>{{userDetails?.contact?.name}}</strong>\n                                        <ng-container *ngIf=\"userDetails?.contact?.mobile\"> \u00B7 {{userDetails?.contact?.mobile}}</ng-container>\n                                        <ng-container *ngIf=\"userDetails?.contact?.email\"> \u00B7 {{userDetails?.contact?.email}}</ng-container>\n                                    </div>\n\n                                    <ng-container *ngIf=\"mode === 'HOME_VISIT'\">\n                                        <p class=\"policies-title mt-3 mb-2\" style=\"font-size:1rem;\">Shipping Address</p>\n\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\n                                        <div class=\"mb-0 mt-3\">\n                                            <label class=\"form-label d-flex align-items-center\">Instructions (optional)</label>\n                                            <textarea class=\"form-control form-textarea rounded-2\" [(ngModel)]=\"instructions\"></textarea>\n                                        </div>\n                                    </ng-container>\n                                </div>\n                            </ng-container>\n                        </div>\n\n                        <div class=\"sub-step-footer\">\n                            <button type=\"button\" class=\"sub-back-btn\" [disabled]=\"subBackOff\" (click)=\"subBack()\">Back</button>\n                            <div class=\"sub-chosen-label\">{{subChosenLabel}}</div>\n                            <button type=\"button\" class=\"sub-next-btn\" *ngIf=\"subStep !== 'details'\" [disabled]=\"subNextOff\" (click)=\"subNext()\">Next</button>\n                        </div>\n                    </div>\n\n                    <div class=\"single-right section-card card\">\n                        <h3 class=\"section-title\">Your Shortlisted Designs</h3>\n                        <div class=\"design-row\" *ngFor=\"let it of productCartItems\">\n                            <div class=\"design-thumb\"></div>\n                            <div class=\"design-info\">\n                                <div class=\"design-name\">{{it.itemName}}</div>\n                                <div class=\"design-price\">\u20B9{{(it.sellingPrice ?? it.price ?? 0) * (it.quantity ?? 1)}}</div>\n                            </div>\n                        </div>\n                        <button type=\"button\" class=\"add-more-btn\" (click)=\"goToListing()\">+ Add More Designs</button>\n\n                        <div class=\"summary-divider\"></div>\n\n                        <div class=\"summary-line\" *ngIf=\"mode !== 'HOME_VISIT' || homeVisitCharge <= 0\">\n                            <div class=\"summary-label\">Service:</div>\n                            <div class=\"free-label\">FREE</div>\n                        </div>\n                        <div class=\"summary-line\" *ngIf=\"mode === 'HOME_VISIT' && homeVisitCharge > 0\">\n                            <div class=\"summary-label\">Home visit charge</div>\n                            <div class=\"summary-value\">\u20B9{{homeVisitCharge}}</div>\n                        </div>\n\n                        <button class=\"continue-btn w-100 mt-2\" [disabled]=\"invalid()\" (click)=\"goToReview()\">Review Booking</button>\n                        <p class=\"footnote\">You will review everything on the next screen before it is confirmed.</p>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"step === 'review'\">\n                <div class=\"review-wrap\">\n                    <div class=\"review-card card\">\n                        <div class=\"review-header\">Review your booking</div>\n                        <div class=\"review-row\" *ngFor=\"let rc of reviewRows\">\n                            <div class=\"review-k\">{{rc.k}}</div>\n                            <div class=\"review-v\">{{rc.v}}</div>\n                        </div>\n                    </div>\n                    <div class=\"review-actions\">\n                        <button type=\"button\" class=\"review-back-btn\" (click)=\"backToForm()\">Back &amp; edit</button>\n                        <button type=\"button\" class=\"review-confirm-btn\" (click)=\"confirmBooking()\" [disabled]=\"isProcessing\">\n                            {{isProcessing ? 'Please wait...' : (mode === 'HOME_VISIT' ? 'Confirm Home Visit' : 'Confirm Video Call')}}\n                        </button>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"step === 'done'\">\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 your appointment. Please\n                            try again later'}}\n                        </p>\n\n                        <div class=\"video-call-link-card d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus && mode === '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\">\n                                    <span class=\"detail-label\">{{productCartItems.length ? 'Products' : (mode === 'HOME_VISIT' ? 'Home Visit' : 'Video Call')}}</span>\n                                    <span class=\"detail-value\">{{selectedDateStr}} at {{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=\"homeVisitCharge > 0\">\n                                    <span class=\"detail-label\">Home visit charge</span>\n                                    <span class=\"detail-value\">\u20B9{{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                            <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                        </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</section>\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.5rem;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}.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:.75rem;font-weight:600;color:var(--slate-800)!important;height:34px;padding:0 4px;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);text-align:center;display:flex;align-items:center;justify-content: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}.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)}.done-btn-secondary:hover{background-color:var(--slate-100);color:var(--slate-900)!important}.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}.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(6,1fr);gap:8px;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}.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}}h1{font-size:24px!important;font-weight:600!important}.wiz-container{width:100%;max-width:1120px}.wizard-banner{border-radius:var(--border-radius-lg);padding:1.125rem 1.5rem;background:var(--color-accent-gradient);box-shadow:var(--shadow-sm)}.wizard-banner-title{font-size:1.1rem;font-weight:700;color:#fff!important}.wizard-banner-desc{font-size:.85rem;line-height:1.5;color:#ffffffd9!important;padding-top:.2rem;max-width:520px}.sub-step-tabs{display:flex;background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);overflow:hidden}.sub-step-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:none;background:#fff;padding:.85rem 0;font-size:.85rem;font-weight:600;color:var(--slate-500)!important;cursor:pointer;border-bottom:2px solid transparent;transition:var(--transition-smooth)}.sub-step-tab.active{color:var(--slate-900)!important;border-bottom-color:var(--color-primary);background:var(--slate-50)}.sub-step-tab.locked{color:var(--slate-300)!important;cursor:not-allowed}.sub-step-dot{width:20px;height:20px;border-radius:50%;background:var(--slate-200);color:var(--slate-500)!important;font-size:.7rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sub-step-tab.active .sub-step-dot{background:var(--color-accent-gradient);color:#fff!important}.sub-step-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.85rem 1.25rem;box-shadow:var(--shadow-sm)}.sub-step-footer .sub-back-btn{width:auto;flex:0 0 auto;height:40px;font-size:.85rem;font-weight:600;color:var(--slate-600)!important;background:none;border:1.5px solid var(--slate-200);padding:0 18px;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth)}.sub-step-footer .sub-back-btn:hover:not(:disabled){color:var(--slate-900)!important;background-color:var(--slate-100)}.sub-step-footer .sub-back-btn:disabled{color:var(--slate-300)!important;cursor:not-allowed}.sub-step-footer .sub-chosen-label{width:auto;flex:1 1 auto;font-size:.8rem;color:var(--slate-500)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-align:center}.sub-step-footer .sub-next-btn{width:auto;flex:0 0 auto;height:40px;background:var(--color-accent-gradient);color:#fff!important;border:none;padding:0 22px;border-radius:var(--border-radius-md);font-size:.85rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.sub-step-footer .sub-next-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.sub-step-footer .sub-next-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.single-grid{display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:start}.single-left{display:flex;flex-direction:column;gap:1.5rem}.single-right{align-self:flex-start;position:sticky;top:10px}.week-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px}.week-arrows{display:flex;gap:8px}.week-arrow-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--slate-200);background:#fff;color:var(--slate-700)!important;cursor:pointer;display:flex;align-items:center;justify-content:center}.week-arrow-btn:disabled{color:var(--slate-300)!important;cursor:not-allowed}.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.week-day{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem .25rem;cursor:pointer;transition:var(--transition-smooth);text-align:center}.week-day:hover{border-color:var(--slate-400)}.week-day.selected{background:var(--color-accent-gradient);border-color:transparent}.week-day.selected .week-day-dow,.week-day.selected .week-day-num{color:#fff!important}.week-day-dow{font-size:.75rem;font-weight:600;color:var(--slate-500)!important;text-transform:uppercase}.week-day-num{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-top:2px}.booking-for-line{font-size:.9rem;color:var(--slate-600)!important;padding:.85rem 1rem;background:var(--slate-50);border-radius:var(--border-radius-md);margin-bottom:.5rem}.booking-for-line strong{color:var(--slate-900)!important}.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}.design-row{display:flex;gap:13px;align-items:center;padding-bottom:1rem}.design-thumb{width:56px;height:56px;border-radius:8px;background:var(--slate-100);flex:none}.design-info{flex:1}.design-name{font-size:13.5px;color:var(--slate-900)!important;line-height:1.35}.design-price{font-size:13.5px;font-weight:600;color:var(--slate-900)!important;margin-top:3px}.add-more-btn{width:100%;height:44px;border:1.5px dashed var(--slate-300);border-radius:8px;background:none;color:var(--color-primary)!important;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:1rem}.summary-divider{height:1px;background:var(--slate-100);margin-bottom:1rem}.summary-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.free-label{font-size:13.5px;font-weight:600;color:var(--color-success)!important}.footnote{font-size:11.5px;line-height:1.5;color:var(--slate-500)!important;text-align:center;margin:.75rem 0 0}.review-wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px}.review-card{border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);overflow:hidden}.review-actions{display:flex;gap:12px}.review-actions .review-back-btn{flex:1;height:48px;border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);background:#fff;color:var(--slate-600)!important;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.review-actions .review-back-btn:hover{color:var(--slate-900)!important;background-color:var(--slate-100)}.review-actions .review-confirm-btn{flex:1;height:48px;border:none;border-radius:var(--border-radius-md);background:var(--color-accent-gradient);color:#fff!important;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.review-actions .review-confirm-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.review-actions .review-confirm-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.review-header{padding:14px 18px;background:var(--slate-50);border-bottom:1px solid var(--slate-100);font-size:14.5px;font-weight:700;color:var(--slate-900)!important}.review-row{display:flex;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:1px solid var(--slate-100);font-size:13.5px}.review-row:last-child{border-bottom:none}.review-k{color:var(--slate-500)!important;flex-shrink:0}.review-v{color:var(--slate-900)!important;font-weight:500;text-align:right}@media screen and (max-width: 900px){.single-grid{grid-template-columns:1fr}.single-right{position:static}}@media screen and (max-width: 475px){.week-strip{gap:6px}}\n"] }]
+            args: [{ selector: 'simpo-book-appointment', standalone: true, imports: [CommonModule, MatIcon, MatIconModule, FormsModule, MatDialogModule, 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_body w-100 d-flex justify-content-center\">\n        <div class=\"wiz-container\">\n\n            <ng-container *ngIf=\"step === 'form'\">\n                <div class=\"single-grid\">\n                    <div class=\"single-left\">\n\n                        <div class=\"wizard-banner\" [id]=\"data?.id\" [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n                            <div class=\"wizard-banner-title\">{{bannerTitle}}</div>\n                            <div class=\"wizard-banner-desc\">{{bannerDesc}}</div>\n                        </div>\n\n                        <div class=\"sub-step-tabs\">\n                            <button type=\"button\" class=\"sub-step-tab\" *ngFor=\"let s of subSteps; trackBy: trackBySubStepKey\"\n                                [class.active]=\"s.active\" [class.locked]=\"s.locked\" [disabled]=\"s.locked\" (click)=\"s.go()\">\n                                <span class=\"sub-step-dot\">{{s.num}}</span>\n                                {{s.label}}\n                            </button>\n                        </div>\n\n                        <div class=\"sub-step-content\">\n                            <ng-container *ngIf=\"subStep === 'date'\">\n                                <div class=\"section-card card\">\n                                    <div class=\"week-header\">\n                                        <div>\n                                            <h3 class=\"section-title mb-0\">Select a Date</h3>\n                                            <p class=\"subtitle mb-0\">{{weekRangeLabel}}</p>\n                                        </div>\n                                        <div class=\"week-arrows\">\n                                            <button type=\"button\" class=\"week-arrow-btn\" (click)=\"prevWeek()\" [disabled]=\"weekOffset <= 0\">\n                                                <mat-icon>chevron_left</mat-icon>\n                                            </button>\n                                            <button type=\"button\" class=\"week-arrow-btn\" (click)=\"nextWeek()\" [disabled]=\"weekOffset >= maxWeekOffset\">\n                                                <mat-icon>chevron_right</mat-icon>\n                                            </button>\n                                        </div>\n                                    </div>\n                                    <div class=\"week-strip\">\n                                        <button type=\"button\" class=\"week-day\" *ngFor=\"let d of weekDays\" [class.selected]=\"d.selected\"\n                                            (click)=\"pickDay(d)\">\n                                            <div class=\"week-day-dow\">{{d.dow}}</div>\n                                            <div class=\"week-day-num\">{{d.num}}</div>\n                                        </button>\n                                    </div>\n                                </div>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"subStep === 'time'\">\n                                <div class=\"section-card card\">\n                                    <h3 class=\"section-title mb-0\">Select a Time</h3>\n                                    <p class=\"subtitle\" *ngIf=\"selectedDateStr\">Available slots for {{selectedDateStr}}</p>\n                                    <p class=\"subtitle mb-0\" *ngIf=\"!selectedDateStr\">Pick a date to see available times.</p>\n                                    <div class=\"time-slot-grid overflow-scroll\" *ngIf=\"selectedDateStr\">\n                                        <ng-container *ngIf=\"!slotsLoading; else slotsLoadingTpl\">\n                                            <div class=\"time-slot rounded-2\" *ngFor=\"let time of slots\" [class.selected]=\"time.selected\"\n                                                (click)=\"selectSlot(time)\">{{time?.value}}</div>\n                                            <p class=\"mb-0\" *ngIf=\"slots.length === 0\">No slots available for this date.</p>\n                                        </ng-container>\n                                        <ng-template #slotsLoadingTpl>\n                                            <p class=\"mb-0\">Loading available times...</p>\n                                        </ng-template>\n                                    </div>\n                                </div>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"subStep === 'details'\">\n                                <div class=\"section-card card\">\n                                    <h3 class=\"section-title\">Booking Details</h3>\n                                    <div class=\"booking-for-line\">\n                                        Booking for <strong>{{userDetails?.contact?.name}}</strong>\n                                        <ng-container *ngIf=\"userDetails?.contact?.mobile\"> \u00B7 {{userDetails?.contact?.mobile}}</ng-container>\n                                        <ng-container *ngIf=\"userDetails?.contact?.email\"> \u00B7 {{userDetails?.contact?.email}}</ng-container>\n                                    </div>\n\n                                    <ng-container *ngIf=\"mode === 'HOME_VISIT'\">\n                                        <p class=\"policies-title mt-3 mb-2\" style=\"font-size:1rem;\">Shipping Address</p>\n\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\n                                        <div class=\"mb-0 mt-3\">\n                                            <label class=\"form-label d-flex align-items-center\">Instructions (optional)</label>\n                                            <textarea class=\"form-control form-textarea rounded-2\" [(ngModel)]=\"instructions\"></textarea>\n                                        </div>\n                                    </ng-container>\n                                </div>\n                            </ng-container>\n                        </div>\n\n                        <div class=\"sub-step-footer\">\n                            <button type=\"button\" class=\"sub-back-btn\" [disabled]=\"subBackOff\" (click)=\"subBack()\">Back</button>\n                            <div class=\"sub-chosen-label\">{{subChosenLabel}}</div>\n                            <button type=\"button\" class=\"sub-next-btn\" *ngIf=\"subStep !== 'details'\" [disabled]=\"subNextOff\" (click)=\"subNext()\">Next</button>\n                        </div>\n                    </div>\n\n                    <div class=\"single-right section-card card\">\n                        <h3 class=\"section-title\">Your Shortlisted Designs</h3>\n                        <div class=\"design-row\" *ngFor=\"let it of productCartItems\">\n                            <div class=\"design-thumb\"></div>\n                            <div class=\"design-info\">\n                                <div class=\"design-name\">{{it.itemName}}</div>\n                                <div class=\"design-price\">\u20B9{{(it.sellingPrice ?? it.price ?? 0) * (it.quantity ?? 1)}}</div>\n                            </div>\n                        </div>\n                        <button type=\"button\" class=\"add-more-btn\" (click)=\"goToListing()\">+ Add More Designs</button>\n\n                        <div class=\"summary-divider\"></div>\n\n                        <div class=\"summary-line\" *ngIf=\"mode !== 'HOME_VISIT' || homeVisitCharge <= 0\">\n                            <div class=\"summary-label\">Service:</div>\n                            <div class=\"free-label\">FREE</div>\n                        </div>\n                        <div class=\"summary-line\" *ngIf=\"mode === 'HOME_VISIT' && homeVisitCharge > 0\">\n                            <div class=\"summary-label\">Home visit charge</div>\n                            <div class=\"summary-value\">\u20B9{{homeVisitCharge}}</div>\n                        </div>\n\n                        <button class=\"continue-btn w-100 mt-2\" [disabled]=\"invalid()\" (click)=\"goToReview()\">Review Booking</button>\n                        <p class=\"footnote\">You will review everything on the next screen before it is confirmed.</p>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"step === 'review'\">\n                <div class=\"review-wrap\">\n                    <div class=\"review-card card\">\n                        <div class=\"review-header\">Review your booking</div>\n                        <div class=\"review-row\" *ngFor=\"let rc of reviewRows\">\n                            <div class=\"review-k\">{{rc.k}}</div>\n                            <div class=\"review-v\">{{rc.v}}</div>\n                        </div>\n                    </div>\n                    <div class=\"review-actions\">\n                        <button type=\"button\" class=\"review-back-btn\" (click)=\"backToForm()\">Back &amp; edit</button>\n                        <button type=\"button\" class=\"review-confirm-btn\" (click)=\"confirmBooking()\" [disabled]=\"isProcessing\">\n                            {{isProcessing ? 'Please wait...' : (mode === 'HOME_VISIT' ? 'Confirm Home Visit' : 'Confirm Video Call')}}\n                        </button>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"step === 'done'\">\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 your appointment. Please\n                            try again later'}}\n                        </p>\n\n                        <div class=\"video-call-link-card d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus && mode === '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\">\n                                    <span class=\"detail-label\">{{productCartItems.length ? 'Products' : (mode === 'HOME_VISIT' ? 'Home Visit' : 'Video Call')}}</span>\n                                    <span class=\"detail-value\">{{selectedDateStr}} at {{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=\"mode === 'HOME_VISIT' && homeVisitCharge > 0\">\n                                    <span class=\"detail-label\">Home visit charge</span>\n                                    <span class=\"detail-value\">\u20B9{{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                            <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                        </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</section>\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.5rem;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}.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:.75rem;font-weight:600;color:var(--slate-800)!important;height:34px;padding:0 4px;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);text-align:center;display:flex;align-items:center;justify-content: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}.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;white-space:nowrap}.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)}.done-btn-secondary:hover{background-color:var(--slate-100);color:var(--slate-900)!important}.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}.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(6,1fr);gap:8px;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){.done-actions{flex-direction:column}.done-btn{max-width:none;width:100%}.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}.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}}h1{font-size:24px!important;font-weight:600!important}.wiz-container{width:100%;max-width:1120px}.wizard-banner{border-radius:var(--border-radius-lg);padding:1.125rem 1.5rem;background:var(--color-accent-gradient);box-shadow:var(--shadow-sm)}.wizard-banner-title{font-size:1.1rem;font-weight:700;color:#fff!important}.wizard-banner-desc{font-size:.85rem;line-height:1.5;color:#ffffffd9!important;padding-top:.2rem;max-width:520px}.sub-step-tabs{display:flex;background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);overflow:hidden}.sub-step-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:none;background:#fff;padding:.85rem 0;font-size:.85rem;font-weight:600;color:var(--slate-500)!important;cursor:pointer;border-bottom:2px solid transparent;transition:var(--transition-smooth)}.sub-step-tab.active{color:var(--slate-900)!important;border-bottom-color:var(--color-primary);background:var(--slate-50)}.sub-step-tab.locked{color:var(--slate-300)!important;cursor:not-allowed}.sub-step-dot{width:20px;height:20px;border-radius:50%;background:var(--slate-200);color:var(--slate-500)!important;font-size:.7rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sub-step-tab.active .sub-step-dot{background:var(--color-accent-gradient);color:#fff!important}.sub-step-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.85rem 1.25rem;box-shadow:var(--shadow-sm)}.sub-step-footer .sub-back-btn{width:auto;flex:0 0 auto;height:40px;font-size:.85rem;font-weight:600;color:var(--slate-600)!important;background:none;border:1.5px solid var(--slate-200);padding:0 18px;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth)}.sub-step-footer .sub-back-btn:hover:not(:disabled){color:var(--slate-900)!important;background-color:var(--slate-100)}.sub-step-footer .sub-back-btn:disabled{color:var(--slate-300)!important;cursor:not-allowed}.sub-step-footer .sub-chosen-label{width:auto;flex:1 1 auto;font-size:.8rem;color:var(--slate-500)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-align:center}.sub-step-footer .sub-next-btn{width:auto;flex:0 0 auto;height:40px;background:var(--color-accent-gradient);color:#fff!important;border:none;padding:0 22px;border-radius:var(--border-radius-md);font-size:.85rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.sub-step-footer .sub-next-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.sub-step-footer .sub-next-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.single-grid{display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:start}.single-left{display:flex;flex-direction:column;gap:1.5rem}.single-right{align-self:flex-start;position:sticky;top:10px}.week-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px}.week-arrows{display:flex;gap:8px}.week-arrow-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--slate-200);background:#fff;color:var(--slate-700)!important;cursor:pointer;display:flex;align-items:center;justify-content:center}.week-arrow-btn:disabled{color:var(--slate-300)!important;cursor:not-allowed}.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.week-day{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem .25rem;cursor:pointer;transition:var(--transition-smooth);text-align:center}.week-day:hover{border-color:var(--slate-400)}.week-day.selected{background:var(--color-accent-gradient);border-color:transparent}.week-day.selected .week-day-dow,.week-day.selected .week-day-num{color:#fff!important}.week-day-dow{font-size:.75rem;font-weight:600;color:var(--slate-500)!important;text-transform:uppercase}.week-day-num{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-top:2px}.booking-for-line{font-size:.9rem;color:var(--slate-600)!important;padding:.85rem 1rem;background:var(--slate-50);border-radius:var(--border-radius-md);margin-bottom:.5rem}.booking-for-line strong{color:var(--slate-900)!important}.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}.design-row{display:flex;gap:13px;align-items:center;padding-bottom:1rem}.design-thumb{width:56px;height:56px;border-radius:8px;background:var(--slate-100);flex:none}.design-info{flex:1}.design-name{font-size:13.5px;color:var(--slate-900)!important;line-height:1.35}.design-price{font-size:13.5px;font-weight:600;color:var(--slate-900)!important;margin-top:3px}.add-more-btn{width:100%;height:44px;border:1.5px dashed var(--slate-300);border-radius:8px;background:none;color:var(--color-primary)!important;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:1rem}.summary-divider{height:1px;background:var(--slate-100);margin-bottom:1rem}.summary-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.free-label{font-size:13.5px;font-weight:600;color:var(--color-success)!important}.footnote{font-size:11.5px;line-height:1.5;color:var(--slate-500)!important;text-align:center;margin:.75rem 0 0}.review-wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px}.review-card{border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);overflow:hidden}.review-actions{display:flex;gap:12px}.review-actions .review-back-btn{flex:1;height:48px;border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);background:#fff;color:var(--slate-600)!important;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.review-actions .review-back-btn:hover{color:var(--slate-900)!important;background-color:var(--slate-100)}.review-actions .review-confirm-btn{flex:1;height:48px;border:none;border-radius:var(--border-radius-md);background:var(--color-accent-gradient);color:#fff!important;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.review-actions .review-confirm-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.review-actions .review-confirm-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.review-header{padding:14px 18px;background:var(--slate-50);border-bottom:1px solid var(--slate-100);font-size:14.5px;font-weight:700;color:var(--slate-900)!important}.review-row{display:flex;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:1px solid var(--slate-100);font-size:13.5px}.review-row:last-child{border-bottom:none}.review-k{color:var(--slate-500)!important;flex-shrink:0}.review-v{color:var(--slate-900)!important;font-weight:500;text-align:right}@media screen and (max-width: 900px){.single-grid{grid-template-columns:1fr}.single-right{position:static}}@media screen and (max-width: 475px){.week-strip{gap:6px}}\n"] }]
         }], ctorParameters: () => [{ type: i2$2.ActivatedRoute }, { type: i2$2.Router }, { type: RestService }, { type: EventsService }, { type: i6$1.MessageService }, { type: StorageServiceService }, { type: BookingProductCartService }, { type: i3$2.MatDialog }], propDecorators: { data: [{
                 type: Input
             }], index: [{