@almatar/smart-booking-dashboard 0.0.2-alpha.4 → 0.0.2-alpha.6

package/fesm2022/almatar-smart-booking-dashboard.mjs

@@ -5,7 +5,7 @@ import { NgTemplateOutlet, NgClass, DOCUMENT, CommonModule, LowerCasePipe, Upper
 import * as i2$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { HttpClient, HttpRequest, HttpEventType } from '@angular/common/http';
-import { map, filter, catchError as catchError$1, switchMap, debounceTime, distinctUntilChanged, tap, finalize } from 'rxjs/operators';
+import { map, catchError as catchError$1, switchMap, debounceTime, distinctUntilChanged, tap, finalize } from 'rxjs/operators';
 import { ToastrService } from 'ngx-toastr';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -26,7 +26,6 @@ import * as i1$4 from '@angular/router';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import moment from 'moment';
 import { DialogService } from 'primeng/dynamicdialog';
-import { createSelector, Store } from '@ngrx/store';
 import { TagModule } from 'primeng/tag';
 import * as i5$1 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
@@ -1184,8 +1183,15 @@ function mapToHotelBookingData(apiResponse) {
         checkOutTime: hotelData.checkOutTime,
         // Pricing
         price: hotelData.customerPrice?.amountToBeCollected || hotelData.customerPrice?.amountWithMarkeup,
+        priceCurrency: hotelData.customerPrice?.currency,
         // Preserve raw data for accessing booking_info (notes, history, etc.)
         data: apiResponse,
+        currency: {
+            code: hotelData.customerPrice?.currency,
+            name: '',
+            symbol: '',
+            rate: 1
+        }
     };
 }
 
@@ -3498,34 +3504,6 @@ class AlmatarHotelAutoCancellationEndpointsService {
             preferredPaymentMethod: refundOption
         };
         this._selectedPackageIds.set(uniquePackageIds);
-        return of({
-            data: {
-                error: '1',
-                message: 'Cancel requested — supplier cancellation failed; ticket created',
-                bookingId: 144368,
-                preferredPaymentMethod: 'wallet',
-                cancel: {
-                    status: 'failed',
-                    packageIds: ['f03838bd-ea8d-4fe5-bfc8-dd31c9bdee95'],
-                },
-                refund: {
-                    status: 'skipped',
-                    bookingStatus: 'Cancelled',
-                    amount: 1050,
-                    currency: 'SAR',
-                    breakdown: {
-                        wallet: 0,
-                        mokafa: 0,
-                        qitaf: 0,
-                        card: 200,
-                        tabby: 0,
-                        tamara: 0,
-                    },
-                },
-            },
-            status: 200,
-            errors: null,
-        });
         return this.api
             .post({
             endpoint,
@@ -3607,6 +3585,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+// Flight refund details interfaces
+var PaymentGatewayCode;
+(function (PaymentGatewayCode) {
+    PaymentGatewayCode["MADA"] = "MADA";
+    PaymentGatewayCode["VISA"] = "VISA";
+    PaymentGatewayCode["MASTERCARD"] = "MASTERCARD";
+    PaymentGatewayCode["AMEX"] = "AMEX";
+    PaymentGatewayCode["APPLE_PAY"] = "APPLE_PAY";
+    PaymentGatewayCode["AlRajhiMokafaa"] = "RAJHI";
+    PaymentGatewayCode["Qitaf"] = "QITAF";
+    PaymentGatewayCode["Wala"] = "WALA";
+    PaymentGatewayCode["Tamara"] = "TM";
+    PaymentGatewayCode["Tabby"] = "TB";
+    PaymentGatewayCode["Stc"] = "STC";
+    PaymentGatewayCode["CH"] = "CH";
+    PaymentGatewayCode["HP"] = "HP";
+    PaymentGatewayCode["MF"] = "MF";
+    PaymentGatewayCode["WT"] = "WT";
+    PaymentGatewayCode["TM"] = "TM";
+    PaymentGatewayCode["TB"] = "TB";
+    PaymentGatewayCode["RAJHI"] = "RAJHI";
+    PaymentGatewayCode["STC"] = "STC";
+    PaymentGatewayCode["PPB"] = "PPB";
+    PaymentGatewayCode["PP"] = "PP";
+    PaymentGatewayCode["TAMAM"] = "TAMAM";
+    PaymentGatewayCode["QITAF"] = "QITAF";
+    PaymentGatewayCode["WALA"] = "WALA";
+})(PaymentGatewayCode || (PaymentGatewayCode = {}));
+/** Labels for `paymentMethodCustomerUsed` gateway codes returned by the backend. */
+const PAYMENT_GATEWAY_LABELS = {
+    CH: { en: 'Card', ar: 'البطاقة' },
+    HP: { en: 'Hyperpay', ar: 'هايبر باي' },
+    MF: { en: 'My Fatoora', ar: 'ماي فاتورة' },
+    WT: { en: 'Wire Transfer', ar: 'تحويل بنكي' },
+    STC: { en: 'STC', ar: 'STC' },
+    TM: { en: 'Tamara', ar: 'تمارا' },
+    TB: { en: 'Tabby', ar: 'تابي' },
+    RAJHI: { en: 'Al Rajhi Mokafaa', ar: 'الراجحي مكافآت' },
+    PPB: { en: 'Customer Balance', ar: 'رصيد العميل' },
+    PP: { en: 'Postpay', ar: 'بوست باي' },
+    TAMAM: { en: 'Tamam', ar: 'تمام' },
+    QITAF: { en: 'Qitaf', ar: 'قطاف' },
+    MIS: { en: 'MIS Pay', ar: 'MIS Pay' },
+    MATAR: { en: 'Almatar Pay', ar: 'المطار باي' },
+    CB: { en: 'Company Balance', ar: 'رصيد الشركة' },
+    ANB: { en: 'ANB', ar: 'العربي الوطني' },
+    AMWAL: { en: 'Amwal', ar: 'أموال' },
+    WALA: { en: 'Wala', ar: 'ولاء' },
+    YGG: { en: 'YGG', ar: 'YGG' },
+};
+/** Gateway codes that refund to an installment plan rather than the original card. */
+const INSTALLMENT_GATEWAY_CODES = ['TM', 'TB'];
+/** Gateway codes that refund to a loyalty-program account rather than the original card. */
+const LOYALTY_GATEWAY_CODES = ['RAJHI', 'QITAF', 'STC', 'WALA'];
+/**
+ * Internal payment-processor/gateway names, never customer-recognizable
+ * brands — must not be surfaced verbatim (e.g. a card refund processed
+ * through Hyperpay must read as "Card"/"Original Payment Method", never
+ * "Hyperpay"). Callers fall back to a generic label whenever the normalized
+ * lookup returns ''.
+ */
+const INTERNAL_GATEWAY_CODES = ['HP', 'MF', 'WT', 'PPB', 'PP', 'TAMAM'];
+/**
+ * Result/confirmation-screen-only override: these gateways process card
+ * payments through Mada — shown specifically as "Mada Card" instead of
+ * falling back to the generic "Original Payment Method" label used
+ * everywhere else `INTERNAL_GATEWAY_CODES` applies.
+ */
+const MADA_GATEWAY_CODES = ['HP', 'CH'];
+/**
+ * Normalizes a raw payment gateway code from the backend to a standardized code.
+ * Handles both uppercase codes (e.g. 'HP') and labels (e.g. 'Hyperpay').
+ */
+function normalizePaymentGatewayCode(raw) {
+    if (!raw)
+        return '';
+    const needle = raw.trim().toLowerCase();
+    const codes = Object.keys(PAYMENT_GATEWAY_LABELS);
+    const byCode = codes.find((code) => code.toLowerCase() === needle);
+    if (byCode)
+        return byCode;
+    const byLabel = codes.find((code) => PAYMENT_GATEWAY_LABELS[code].en.toLowerCase() === needle ||
+        PAYMENT_GATEWAY_LABELS[code].ar.toLowerCase() === needle);
+    return byLabel ? byLabel : '';
+}
+
 class AlmatarHotelAutoCancellationRefundableRoomComponent {
     constructor() {
         this.package = input.required();
@@ -4054,14 +4118,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"select-rooms\">\n  <div class=\"select-rooms__content\">\n    @if (hotelInfo(); as hotel) {\n      <div class=\"hotel-info-card\">\n        <h3 class=\"hotel-info-card__name\">{{ hotel.hotelName }}</h3>\n\n        <div class=\"hotel-info-card__content\">\n          @if (hotel.hotelImage) {\n            <div class=\"hotel-info-card__image\">\n              <img [src]=\"hotel.hotelImage\" [alt]=\"hotel.hotelName\" />\n            </div>\n          }\n\n          <div class=\"hotel-info-card__dates\">\n            <div class=\"date-box\">\n              <span class=\"date-box__label\">CHECK-IN</span>\n              <span class=\"date-box__day\">{{\n                formatDate(hotel.checkIn).day\n              }}</span>\n              <span class=\"date-box__month\">{{\n                formatDate(hotel.checkIn).month\n              }}</span>\n              <span class=\"date-box__day-name\">{{\n                formatDate(hotel.checkIn).dayName\n              }}</span>\n              <span class=\"date-box__time\"\n                >From\n                {{ hotel?.checkInTime }}</span\n              >\n            </div>\n\n            <div class=\"date-box\">\n              <span class=\"date-box__label\">CHECK-OUT</span>\n              <span class=\"date-box__day\">{{\n                formatDate(hotel.checkOut).day\n              }}</span>\n              <span class=\"date-box__month\">{{\n                formatDate(hotel.checkOut).month\n              }}</span>\n              <span class=\"date-box__day-name\">{{\n                formatDate(hotel.checkOut).dayName\n              }}</span>\n              <span class=\"date-box__time\"\n                >Until\n                {{ hotel?.checkOutTime }}</span\n              >\n            </div>\n          </div>\n\n          <div class=\"hotel-info-card__stats\">\n            <div class=\"stat-box\">\n              <span class=\"stat-box__label\">Rooms</span>\n              <span class=\"stat-box__value\">{{ totalRoomsCount() }}</span>\n            </div>\n            <div class=\"stat-box\">\n              <span class=\"stat-box__label\">NIGHTS</span>\n              <span class=\"stat-box__value\">{{ hotel.nights }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n\n    <div class=\"select-rooms__notice select-rooms__notice--default\">\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"9\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.6\"\n        />\n        <path\n          d=\"M12 11v5.5M12 8v.01\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.6\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n      <span>\n        Some rooms in each package, share one booking reference, so they will be cancelled together.</span\n      >\n    </div>\n\n    <div class=\"rooms-list\">\n      @for (package of displayPackages(); track $index) {\n        @if (!package.manualRefundRequest && !package.isCancelled) {\n          <almatar-hotel-auto-cancellation-refundable-room\n            [package]=\"package\"\n            [hideCheckbox]=\"isSinglePackage()\"\n            (togglePackage)=\"togglePackage($event)\"\n          />\n        } @else {\n          <almatar-hotel-auto-cancellation-non-refundable-room\n            [package]=\"package\"\n            [allPackages]=\"displayPackages()\"\n            [hotelInfo]=\"hotelInfo()\"\n            [hotelId]=\"hotelId()\"\n            [currencyCode]=\"currencyCode()\"\n            [allPackagesNonRefundable]=\"allPackagesNonRefundable()\"\n            (closeModal)=\"onClose()\"\n            (nonRefundableSubmitSuccess)=\"onNonRefundableSubmitSuccess($event)\"\n          />\n        }\n      }\n    </div>\n\n    @if (allPackagesNonRefundable()) {\n      <div class=\"select-rooms__notice select-rooms__notice--warning\">\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <!-- warning triangle icon -->\n          <path\n            d=\"M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.6\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n        <span>Sorry, we couldn't process your refund right now. Please chat with our Customer Service team for help.</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"select-rooms__footer\">\n    @if (allPackagesNonRefundable()) {\n      <button\n        class=\"main_btn main_btn--chat-with-us\"\n        type=\"button\"\n        (click)=\"onChatWithAgent()\"\n      >\n        Chat with customer service\n      </button>\n    } @else {\n      @if (!hasSelectedPackages()) {\n        <p class=\"select-rooms__hint\">\n          Select at least one room to continue\n        </p>\n      }\n      <button\n        class=\"main_btn\"\n        type=\"button\"\n        [disabled]=\"!hasSelectedPackages()\"\n        (click)=\"onContinue()\"\n      >\n        Continue to cancel\n      </button>\n    }\n  </div>\n</div>\n", styles: [".select-rooms{display:flex;flex-direction:column;height:100%;background-color:#fff}.select-rooms__header{padding:16px;border-bottom:1px solid var(--almatar-neutral-border-default)}.select-rooms__notice{display:flex;align-items:center;gap:8px;padding:12px;border-radius:8px;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:400;margin:12px 0}.select-rooms__notice svg{flex-shrink:0;width:18px;height:18px;margin-top:1px}.select-rooms__notice--info{background:var(--almatar-info-surface, #eaf2ff);border:1px solid var(--almatar-info-border, #b9d6ff);color:var(--almatar-info-text, #1a56db);border-radius:12px}.select-rooms__notice--info svg{color:var(--almatar-info-icon, #1a56db)}.select-rooms__notice--default{background:#f7f7f8;border:1px solid rgb(217,217,222);color:#1b1a1f;border-radius:12px}.select-rooms__notice--default svg{color:#1b1a1f}.select-rooms__notice--warning{background:#faedcc;border:1px solid rgb(137,99,42);color:#89632a;border-radius:12px}.select-rooms__notice--warning svg{color:#89632a}.select-rooms__title{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:var(--almatar-neutral-text-primary-static);margin-bottom:4px}.select-rooms__subtitle{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static)}.select-rooms__content{flex:1;overflow-y:auto;padding:12px}.select-rooms__footer{padding:16px;background:var(--almatar-neutral-surface-card);border-top:1px solid rgb(217,217,222)}.select-rooms__hint{text-align:center;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static);margin-bottom:12px}.hotel-info-card{background:var(--almatar-neutral-surface-card);border-radius:12px;padding:12px;margin-bottom:12px;border:1px solid rgb(217,217,222)}.hotel-info-card__name{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:var(--almatar-neutral-text-primary-static);margin-bottom:12px}.hotel-info-card__content{display:flex;align-items:stretch;gap:0}.hotel-info-card__image{width:120px;overflow:hidden;flex-shrink:0;padding-inline-end:12px;border-inline-end:1px solid rgb(217,217,222)}.hotel-info-card__image img{border-radius:5px;width:100%;height:100%;object-fit:cover;max-height:100px}.hotel-info-card__dates{display:flex;flex:1;border-inline-start:1px solid var(--almatar-neutral-border-default)}.hotel-info-card__stats{display:flex;flex-direction:column;justify-content:center;border-inline-start:1px solid var(--almatar-neutral-border-default);padding-inline-start:12px;margin-inline-start:0;min-width:70px}.date-box{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;padding:0 12px;border-inline-end:1px solid rgb(217,217,222);gap:4px}.date-box__label{font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static);text-transform:uppercase;letter-spacing:.5px}.date-box__day{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#491d95;line-height:1.2}.date-box__month{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:var(--almatar-neutral-text-primary-static)}.date-box__day-name{font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583}.date-box__time{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:var(--almatar-neutral-text-primary-static)}.stat-box{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 0;border-bottom:1px solid rgb(217,217,222)}.stat-box:last-child{border-bottom:none}.stat-box__label{font-size:calc(11 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.stat-box__value{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:var(--almatar-neutral-text-primary-static);line-height:1.3;color:#491d95}.rooms-list{display:flex;flex-direction:column;gap:12px}.main_btn{font-weight:var(--almatar-font-weight-medium);padding:17.5px;border-radius:6px;display:block;width:100%}.main_btn:disabled{opacity:.5;cursor:not-allowed}.main_btn--chat-with-us{background-color:#fff;border:1px solid rgb(217,217,222);color:#1b1a1f}button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{background-color:#747583;color:#b8b9c1;border-radius:12px}.info-banner{display:flex;gap:8px;border:1px solid rgb(11,84,194);border-radius:12px;padding:14px;align-items:flex-start;transition:all .3s cubic-bezier(.4,0,.2,1)}.info-banner__icon{color:#0b54c2;flex-shrink:0;width:20px;height:20px}.info-banner__content{flex:1}.info-banner__text{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#0b54c2;margin:0 0 4px;font-weight:var(--almatar-font-weight-regular);line-height:16px}.info-banner__subtext{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;margin:0;line-height:1.4}\n"] }]
         }], ctorParameters: () => [] });
 
-// Stub selector for getCurrentCurrency
-const getCurrentCurrency = createSelector(() => ({}), () => ({
-    code: 'SAR',
-    name: 'Saudi Riyal',
-    symbol: 'SAR',
-    rate: 1
-}));
-
 class ExchangePipe {
     transform(value, currency, rate) {
         if (!rate || rate === 1) {
@@ -4240,12 +4296,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
+class AlmatarHotelAutoCancellationRefundSummarySkeletonComponent {
+    constructor() {
+        this.skeletonCards = [1, 2];
+        this.summaryRows = [1, 2, 3];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlmatarHotelAutoCancellationRefundSummarySkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AlmatarHotelAutoCancellationRefundSummarySkeletonComponent, isStandalone: true, selector: "almatar-hotel-auto-cancellation-refund-summary-skeleton", ngImport: i0, template: "<div class=\"refund-summary-skeleton\">\n  <div class=\"refund-summary-skeleton__content\">\n    <!-- Skeleton Title -->\n    <div class=\"skeleton skeleton--title\"></div>\n\n    <!-- Skeleton Package Cards -->\n    @for (item of skeletonCards; track item) {\n      <div class=\"skeleton-card\">\n        <div class=\"skeleton-card__header\">\n          <div class=\"skeleton-card__title-section\">\n            <div class=\"skeleton skeleton--text skeleton--text-lg\"></div>\n            <div class=\"skeleton skeleton--badge\"></div>\n          </div>\n          <div class=\"skeleton skeleton--icon\"></div>\n        </div>\n        <div class=\"skeleton-card__room-info\">\n          <div class=\"skeleton skeleton--text skeleton--text-sm\"></div>\n          <div class=\"skeleton skeleton--text skeleton--text-sm\" style=\"width: 70%;\"></div>\n        </div>\n        <div class=\"skeleton-card__date\">\n          <div class=\"skeleton skeleton--text skeleton--text-xs\" style=\"width: 50%;\"></div>\n        </div>\n      </div>\n    }\n\n    <!-- Skeleton Separator -->\n    <div class=\"skeleton-separator\"></div>\n\n    <!-- Skeleton Total Summary -->\n    <div class=\"skeleton-summary\">\n      @for (item of summaryRows; track item) {\n        <div class=\"skeleton-summary__row\">\n          <div class=\"skeleton skeleton--text skeleton--text-sm\" style=\"width: 40%;\"></div>\n          <div class=\"skeleton skeleton--text skeleton--text-sm\" style=\"width: 30%;\"></div>\n        </div>\n      }\n    </div>\n\n    <!-- Skeleton Info Banner -->\n    <div class=\"skeleton-banner\">\n      <div class=\"skeleton skeleton--icon-circle\"></div>\n      <div class=\"skeleton-banner__content\">\n        <div class=\"skeleton skeleton--text skeleton--text-sm\"></div>\n        <div class=\"skeleton skeleton--text skeleton--text-sm\" style=\"width: 80%;\"></div>\n        <div class=\"skeleton skeleton--text skeleton--text-xs\" style=\"width: 60%;\"></div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Skeleton Footer -->\n  <div class=\"refund-summary-skeleton__footer\">\n    <div class=\"skeleton skeleton--button\"></div>\n    <div class=\"skeleton skeleton--button\"></div>\n  </div>\n</div>\n", styles: [".refund-summary-skeleton{display:flex;flex-direction:column;height:100%}.refund-summary-skeleton__content{flex:1;overflow-y:auto;padding:16px;background-color:#fff}.refund-summary-skeleton__footer{display:flex;gap:12px;padding:16px 20px;background:#fff;border-top:1px solid rgb(229,231,235)}.skeleton{background:linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:8px}.skeleton--title{height:24px;width:150px;margin-bottom:16px}.skeleton--text{height:16px;border-radius:4px}.skeleton--text-xs{height:12px}.skeleton--text-sm{height:14px;width:100%}.skeleton--text-lg{height:18px;width:100%}.skeleton--badge{height:24px;width:140px;border-radius:999px}.skeleton--icon{width:20px;height:20px;border-radius:4px;flex-shrink:0}.skeleton--icon-circle{width:20px;height:20px;border-radius:50%;flex-shrink:0}.skeleton--button{flex:1;height:44px;border-radius:10px}.skeleton-card{background:#fff;border:1px solid rgb(229,231,235);border-radius:12px;padding:16px;margin-bottom:12px}.skeleton-card__header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.skeleton-card__title-section{flex:1;display:flex;flex-direction:column;gap:8px}.skeleton-card__room-info{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.skeleton-card__date{margin-bottom:4px}.skeleton-separator{height:1px;background:linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;margin:12px 0;border-radius:1px}.skeleton-summary{background:#f3f4f6;border-radius:12px;padding:16px;margin-bottom:16px}.skeleton-summary__row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.skeleton-summary__row:last-child{margin-bottom:0}.skeleton-banner{display:flex;gap:8px;border:1px solid rgb(229,231,235);border-radius:12px;padding:14px;align-items:flex-start}.skeleton-banner__content{flex:1;display:flex;flex-direction:column;gap:6px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlmatarHotelAutoCancellationRefundSummarySkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'almatar-hotel-auto-cancellation-refund-summary-skeleton', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"refund-summary-skeleton\">\n  <div class=\"refund-summary-skeleton__content\">\n    <!-- Skeleton Title -->\n    <div class=\"skeleton skeleton--title\"></div>\n\n    <!-- Skeleton Package Cards -->\n    @for (item of skeletonCards; track item) {\n      <div class=\"skeleton-card\">\n        <div class=\"skeleton-card__header\">\n          <div class=\"skeleton-card__title-section\">\n            <div class=\"skeleton skeleton--text skeleton--text-lg\"></div>\n            <div class=\"skeleton skeleton--badge\"></div>\n          </div>\n          <div class=\"skeleton skeleton--icon\"></div>\n        </div>\n        <div class=\"skeleton-card__room-info\">\n          <div class=\"skeleton skeleton--text skeleton--text-sm\"></div>\n          <div class=\"skeleton skeleton--text skeleton--text-sm\" style=\"width: 70%;\"></div>\n        </div>\n        <div class=\"skeleton-card__date\">\n          <div class=\"skeleton skeleton--text skeleton--text-xs\" style=\"width: 50%;\"></div>\n        </div>\n      </div>\n    }\n\n    <!-- Skeleton Separator -->\n    <div class=\"skeleton-separator\"></div>\n\n    <!-- Skeleton Total Summary -->\n    <div class=\"skeleton-summary\">\n      @for (item of summaryRows; track item) {\n        <div class=\"skeleton-summary__row\">\n          <div class=\"skeleton skeleton--text skeleton--text-sm\" style=\"width: 40%;\"></div>\n          <div class=\"skeleton skeleton--text skeleton--text-sm\" style=\"width: 30%;\"></div>\n        </div>\n      }\n    </div>\n\n    <!-- Skeleton Info Banner -->\n    <div class=\"skeleton-banner\">\n      <div class=\"skeleton skeleton--icon-circle\"></div>\n      <div class=\"skeleton-banner__content\">\n        <div class=\"skeleton skeleton--text skeleton--text-sm\"></div>\n        <div class=\"skeleton skeleton--text skeleton--text-sm\" style=\"width: 80%;\"></div>\n        <div class=\"skeleton skeleton--text skeleton--text-xs\" style=\"width: 60%;\"></div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Skeleton Footer -->\n  <div class=\"refund-summary-skeleton__footer\">\n    <div class=\"skeleton skeleton--button\"></div>\n    <div class=\"skeleton skeleton--button\"></div>\n  </div>\n</div>\n", styles: [".refund-summary-skeleton{display:flex;flex-direction:column;height:100%}.refund-summary-skeleton__content{flex:1;overflow-y:auto;padding:16px;background-color:#fff}.refund-summary-skeleton__footer{display:flex;gap:12px;padding:16px 20px;background:#fff;border-top:1px solid rgb(229,231,235)}.skeleton{background:linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:8px}.skeleton--title{height:24px;width:150px;margin-bottom:16px}.skeleton--text{height:16px;border-radius:4px}.skeleton--text-xs{height:12px}.skeleton--text-sm{height:14px;width:100%}.skeleton--text-lg{height:18px;width:100%}.skeleton--badge{height:24px;width:140px;border-radius:999px}.skeleton--icon{width:20px;height:20px;border-radius:4px;flex-shrink:0}.skeleton--icon-circle{width:20px;height:20px;border-radius:50%;flex-shrink:0}.skeleton--button{flex:1;height:44px;border-radius:10px}.skeleton-card{background:#fff;border:1px solid rgb(229,231,235);border-radius:12px;padding:16px;margin-bottom:12px}.skeleton-card__header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.skeleton-card__title-section{flex:1;display:flex;flex-direction:column;gap:8px}.skeleton-card__room-info{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.skeleton-card__date{margin-bottom:4px}.skeleton-separator{height:1px;background:linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;margin:12px 0;border-radius:1px}.skeleton-summary{background:#f3f4f6;border-radius:12px;padding:16px;margin-bottom:16px}.skeleton-summary__row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.skeleton-summary__row:last-child{margin-bottom:0}.skeleton-banner{display:flex;gap:8px;border:1px solid rgb(229,231,235);border-radius:12px;padding:14px;align-items:flex-start}.skeleton-banner__content{flex:1;display:flex;flex-direction:column;gap:6px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
+        }] });
+
 class AlmatarHotelAutoCancellationRefundSummaryComponent {
     constructor() {
         this.endpointsService = inject(AlmatarHotelAutoCancellationEndpointsService);
         this.autoCancellationService = inject(AlmatarHotelAutoCancellationService);
-        this.store = inject(Store);
-        this.sharedService = inject(SharedService);
         this.destroyRef = inject(DestroyRef);
         this.translateService = inject(TranslationService);
         this.hotelManageBookingsEndpointsService = inject(HotelManageBookingEndpointsService);
@@ -4261,6 +4328,7 @@ class AlmatarHotelAutoCancellationRefundSummaryComponent {
         this.hotelId = input('');
         this.hotelInfo = input(null);
         this.selectionSkipped = input(false);
+        this.currency = input(null);
         this.keepRoom = output();
         this.selectRefundOption = output();
         this.closeModal = output();
@@ -4314,9 +4382,13 @@ class AlmatarHotelAutoCancellationRefundSummaryComponent {
             this.giftsTotal() > 0 ||
             this.serviceFeeAmount() > 0 ||
             this.surchargeAmount() > 0);
-        // effect(() => {
-        //   console.log('Refund Summary Updated:', this.currentCurrency());
-        // })
+        // Set currency from input
+        effect(() => {
+            const inputCurrency = this.currency();
+            if (inputCurrency) {
+                this.currentCurrency.set(inputCurrency);
+            }
+        }, { allowSignalWrites: true });
     }
     groupRoomsByName(rooms) {
         const grouped = new Map();
@@ -4345,27 +4417,12 @@ class AlmatarHotelAutoCancellationRefundSummaryComponent {
     }
     ngOnInit() {
         this.loadRefundDetails();
-        this.initCurrency();
         this.initLanguage();
     }
     initLanguage() {
         // Language is fixed to English
         this.currentLang.set('en');
     }
-    initCurrency() {
-        this.store
-            .select(getCurrentCurrency)
-            .pipe(filter((currency) => !!currency), takeUntilDestroyed(this.destroyRef))
-            .subscribe((currency) => {
-            this.currentCurrency.set(currency);
-        });
-        this.sharedService
-            .getBaseCurrency()
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((currency) => {
-            this.baseCurrencyCode.set(currency.code);
-        });
-    }
     loadRefundDetails() {
         const packageIds = this.packageIds();
         this.isLoading.set(true);
@@ -4502,7 +4559,7 @@ class AlmatarHotelAutoCancellationRefundSummaryComponent {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlmatarHotelAutoCancellationRefundSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AlmatarHotelAutoCancellationRefundSummaryComponent, isStandalone: true, selector: "almatar-hotel-auto-cancellation-refund-summary", inputs: { selectedRooms: { classPropertyName: "selectedRooms", publicName: "selectedRooms", isSignal: true, isRequired: true, transformFunction: null }, bookingId: { classPropertyName: "bookingId", publicName: "bookingId", isSignal: true, isRequired: false, transformFunction: null }, hotelId: { classPropertyName: "hotelId", publicName: "hotelId", isSignal: true, isRequired: false, transformFunction: null }, hotelInfo: { classPropertyName: "hotelInfo", publicName: "hotelInfo", isSignal: true, isRequired: false, transformFunction: null }, selectionSkipped: { classPropertyName: "selectionSkipped", publicName: "selectionSkipped", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keepRoom: "keepRoom", selectRefundOption: "selectRefundOption", closeModal: "closeModal" }, ngImport: i0, template: "<div class=\"refund-summary\">\n  <!-- Header -->\n  <!-- <div class=\"refund-summary__header\">\n    <button\n      type=\"button\"\n      class=\"refund-summary__header-btn\"\n      (click)=\"onKeepRoom()\"\n      aria-label=\"Close\"\n    >\n      <almatar-icon [name]=\"backArrow()\"></almatar-icon>\n    </button>\n\n    <div class=\"refund-summary__header-text\">\n      <h3 class=\"refund-summary__header-title\">\n        Cancel Booking Request\n      </h3>\n    </div>\n    <button\n      type=\"button\"\n      class=\"refund-summary__header-btn\"\n      (click)=\"onClose()\"\n      aria-label=\"Close\"\n    >\n      <almatar-icon [name]=\"'x-mark'\"></almatar-icon>\n    </button>\n  </div> -->\n\n  @if (isLoading()) {\n    <div class=\"refund-summary__loader\">\n      <almatar-loader></almatar-loader>\n    </div>\n  } @else if (error()) {\n    <div class=\"refund-summary__error\">\n      <div class=\"refund-summary__error-card\">\n        <div class=\"refund-summary__error-icon-wrapper\">\n          <svg\n            width=\"32\"\n            height=\"32\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M12 8V12M12 16H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </div>\n        <h4 class=\"refund-summary__error-title\">\n          Failed to load refund details. Please try again.\n        </h4>\n        <button\n          class=\"refund-summary__error-btn\"\n          type=\"button\"\n          (click)=\"loadRefundDetails()\"\n        >\n          <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M1 4V10H7M23 20V14H17M20.49 9C19.9828 7.56678 19.1209 6.2854 17.9845 5.27542C16.8482 4.26543 15.4745 3.55976 13.9917 3.22426C12.5089 2.88875 10.9652 2.93434 9.50481 3.35677C8.04437 3.77921 6.71475 4.56471 5.64 5.64L1 10M23 14L18.36 18.36C17.2853 19.4353 15.9556 20.2208 14.4952 20.6432C13.0348 21.0657 11.4911 21.1112 10.0083 20.7757C8.52547 20.4402 7.1518 19.7346 6.01547 18.7246C4.87913 17.7146 4.01717 16.4332 3.51 15\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n          Try Again\n        </button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"refund-summary__content\">\n      <h3 class=\"refund-summary__title\">\n        Refund summary\n      </h3>\n\n      <div class=\"package-cards\">\n        @for (pkg of packages(); track i; let i = $index) {\n          <div\n            class=\"package-card\"\n            [class.package-card--expanded]=\"isPackageExpanded(pkg.packageId)\"\n            [class.package-card--cancelled-before]=\"pkg.cancelledBefore\"\n          >\n            <div\n              class=\"package-card__header\"\n              (click)=\"togglePackageExpand(pkg.packageId)\"\n            >\n              <div class=\"package-card__info\">\n                <div class=\"package-card__title-row\">\n                  <h4 class=\"package-card__name\">{{ pkg.packageName }}</h4>\n                  @if (!pkg.cancelledBefore) {\n                    <span class=\"package-card__badge\">\n                      CURRENT CANCELLATION\n                    </span>\n                    <!-- <span class=\"package-card__date\">\n                      Today on\n                      {{ formatDate(pkg.cancellationDate) }}\n                    </span> -->\n                  } @else {\n                    <span\n                      class=\"package-card__badge package-card__badge--cancelled\"\n                    >\n                      PREVIOUS CANCELLATION\n                    </span>\n                    <!-- <span class=\"package-card__date\">\n                      Cancellation date:\n                      {{ formatDate(pkg.cancellationDate) }}\n                    </span> -->\n                  }\n                </div>\n              </div>\n              <div\n                class=\"package-card__expand-icon\"\n                [class.rotated]=\"isPackageExpanded(pkg.packageId)\"\n              >\n                <almatar-icon [name]=\"'chevron-down'\"></almatar-icon>\n              </div>\n            </div>\n\n            <!-- Rooms display -->\n            @if (pkg.rooms?.length) {\n              <div class=\"package-card__rooms-container\">\n                @for (\n                  group of groupRoomsByName(pkg.rooms);\n                  track i;\n                  let i = $index\n                ) {\n                  <div class=\"package-card__room-summary\">\n                    @if (group.count > 1) {\n                      <!-- Multiple rooms -->\n                      {{ group.count }}x {{ group.roomName }}\n                    } @else {\n                      <!-- Single room -->\n                      Room\n\n                      {{ i + 1 }}\n                      <span class=\"package-card__separator\">&bull;</span>\n                      {{ group.roomName }}\n                    }\n                    @if (group.nights) {\n                      <span class=\"package-card__separator\">&bull;</span>\n                      {{ group.nights }}\n                      @if (group.nights === 1) {\n                        night\n                      } @else {\n                        nights\n                      }\n                    }\n                    @if (group.adults) {\n                      <span class=\"package-card__separator\">&bull;</span>\n                      {{ group.adults }}\n                      @if (group.adults === 1) {\n                        Adult\n                      } @else {\n                        Adults\n                      }\n                    }\n                    @if (group.children) {\n                      <span class=\"package-card__separator\">&bull;</span>\n                      {{ group.children }}\n                      @if (group.children === 1) {\n                        Child\n                      } @else {\n                        Children\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            }\n\n            @if (!pkg.cancelledBefore) {\n              <span class=\"package-card__date\">\n                Today on\n                {{ formatDate(pkg.cancellationDate) }}\n              </span>\n            } @else {\n              <span class=\"package-card__date\">\n                Cancellation date:\n                {{ formatDate(pkg.cancellationDate) }}\n              </span>\n            }\n\n            <!-- Room Amount Row with expand -->\n\n            <!-- Expandable content: Rooms, Date, and Financial breakdown -->\n            <div\n              class=\"package-card__expandable-content\"\n              [class.expanded]=\"isPackageExpanded(pkg.packageId)\"\n            >\n              <div\n                class=\"package-card__row package-card__row--clickable\"\n                (click)=\"\n                  toggleAmountExpand(pkg.packageId); $event.stopPropagation()\n                \"\n              >\n                @if (pkg?.rooms?.length > 1) {\n                  <span\n                    class=\"package-card__label package-card__label--dark-light\"\n                    >Rooms amount</span\n                  >\n                } @else {\n                  <span\n                    class=\"package-card__label package-card__label--dark-light\"\n                    >Room amount</span\n                  >\n                }\n                <span class=\"package-card__value package-card__value--regular\">\n                  @if (\n                    pkg.fee > 0 || pkg.serviceFee > 0 || surchargeAmount() > 0\n                  ) {\n                    <div\n                      class=\"package-card__expand-icon\"\n                      [class.rotated]=\"isAmountExpanded(pkg.packageId)\"\n                    >\n                      <almatar-icon [name]=\"'chevron-down'\"></almatar-icon>\n                    </div>\n                  }\n\n                  {{\n                    pkg.amount | exchange_round\n                  }}\n                  {{ currentCurrency()?.code }}\n                </span>\n              </div>\n\n              <!-- Expanded content: Cancellation fee and Service fee -->\n              <div\n                class=\"package-card__expanded-content\"\n                [class.expanded]=\"\n                  isAmountExpanded(pkg.packageId) &&\n                  (pkg.fee > 0 || pkg.serviceFee > 0)\n                \"\n              >\n                @if (pkg.fee > 0) {\n                  <div class=\"package-card__row\">\n                    <span class=\"package-card__label\">Cancellation fee</span>\n                    <span\n                      class=\"package-card__value package-card__value--gray package-card__value--regular\"\n                    >\n                      -\n                      {{\n                        pkg.fee | exchange_round\n                      }}\n                      {{ currentCurrency()?.code }}\n                    </span>\n                  </div>\n                }\n\n                @if (pkg.serviceFee > 0) {\n                  <div class=\"package-card__row\">\n                    <span class=\"package-card__label\">Service Fee</span>\n                    <span\n                      class=\"package-card__value package-card__value--gray package-card__value--regular\"\n                    >\n                      -\n                      {{\n                        pkg.serviceFee | exchange_round\n                      }}\n                      {{ currentCurrency()?.code }}\n                    </span>\n                  </div>\n                }\n\n                @if (surchargeAmount() > 0) {\n                  <div class=\"package-card__row\">\n                    <span class=\"package-card__label\">\n                      Surcharge (2.5%)\n                    </span>\n                    <span\n                      class=\"package-card__value package-card__value--gray package-card__value--regular\"\n                    >\n                      -\n                      {{\n                        surchargeAmount() | exchange_round\n                      }}\n                      {{ currentCurrency()?.code }}\n                    </span>\n                  </div>\n                }\n              </div>\n              <!-- Add-Ons Refund Section -->\n              @if (giftsDetails().length > 0 && i === packages()?.length - 1) {\n                <div class=\"addons-refund\">\n                  <span\n                    class=\"package-card__label package-card__label--dark-light\"\n                  >\n                    Add-Ons Refund\n                  </span>\n                  <div class=\"addons-refund__list\">\n                    @for (gift of giftsDetails(); track $index) {\n                      <div class=\"package-card__row\">\n                        <span class=\"package-card__label\">{{ gift.name }}</span>\n                        <span\n                          class=\"package-card__value package-card__value--gray package-card__value--regular\"\n                        >\n                          {{\n                            gift.toBeRefundedAmount | exchange_round\n                          }}\n                          {{ currentCurrency()?.code }}\n                          <!-- @if (!gift.refundable) {\n                            <span> - </span>\n                          } -->\n                        </span>\n                      </div>\n                    }\n                  </div>\n\n                  <!-- @if (giftsHasRefundableEntity()) {\n                    <div class=\"addons-refund__notice\">\n                      <svg\n                        width=\"18\"\n                        height=\"18\"\n                        viewBox=\"0 0 20 20\"\n                        fill=\"none\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                      >\n                        <circle\n                          cx=\"10\"\n                          cy=\"10\"\n                          r=\"9\"\n                          stroke=\"currentColor\"\n                          stroke-width=\"1.5\"\n                        />\n                        <path\n                          d=\"M10 9V14\"\n                          stroke=\"currentColor\"\n                          stroke-width=\"1.5\"\n                          stroke-linecap=\"round\"\n                        />\n                        <circle cx=\"10\" cy=\"6.5\" r=\"0.75\" fill=\"currentColor\" />\n                      </svg>\n                      <span class=\"addons-refund__notice-text\">\n                        Your add-on service/s refund will be processed separately by our Customer Service team shortly.\n                      </span>\n                    </div>\n                  } -->\n                </div>\n              }\n            </div>\n            <!-- End expandable content -->\n\n            <!-- You will get back row - ALWAYS VISIBLE -->\n            <div class=\"package-card__details\">\n              @if (pkg.cancelledBefore) {\n                <div class=\"package-card__row package-card__row--total\">\n                  <span class=\"package-card__label package-card__label--dark\">Refunded amount</span>\n                  <span\n                    class=\"package-card__value package-card__value--highlight\"\n                  >\n                    {{\n                      pkg.refund | exchange_round\n                    }}\n                    {{ currentCurrency()?.code }}\n                  </span>\n                </div>\n              } @else {\n                <div class=\"package-card__row package-card__row--total\">\n                  <span class=\"package-card__label package-card__label--dark\">You will get back</span>\n                  <span\n                    class=\"package-card__value package-card__value--highlight package-card__value--regular\"\n                  >\n                    {{\n                      pkg.refund | exchange_round\n                    }}\n                    {{ currentCurrency()?.code }}\n                  </span>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n      <hr class=\"seperator\" />\n\n      <div class=\"total-summary\">\n        <div class=\"total-summary__row\">\n          <span class=\"total-summary__label\">Total paid</span>\n          <span class=\"total-summary__value\">\n            {{\n              totalPaid() | exchange_round\n            }}\n            {{ currentCurrency()?.code }}\n          </span>\n        </div>\n\n        @if (alreadyRefunded()) {\n          <div class=\"total-summary__row\">\n            <span class=\"total-summary__label\">Rooms Refunded</span>\n            <span class=\"total-summary__value\">\n              {{\n                alreadyRefunded() | exchange_round\n              }}\n              {{ currentCurrency()?.code }}\n            </span>\n          </div>\n        }\n\n        <div class=\"total-summary__row total-summary__row--highlight\">\n          <div class=\"total-summary__label total-summary__label--highlight\">\n            <span>\n              You'll get back for\n              {{ currentRefundRoomsNumber() }}\n              {{\n                currentLang() !== 'ar'\n                  ? currentRefundRoomsNumber() > 1\n                    ? ('Rooms')\n                    : ('Room')\n                  : ''\n              }}\n            </span>\n          </div>\n          <span class=\"total-summary__value total-summary__value--highlight\">\n            {{\n              totalRefund() | exchange_round\n            }}\n            {{ currentCurrency()?.code }}\n          </span>\n        </div>\n      </div>\n\n      <div class=\"info-banner\">\n        <div class=\"info-banner__icon\">\n          <svg\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 20 20\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M10 2L3 5V9C3 13.55 6.24 17.74 10 18.5C13.76 17.74 17 13.55 17 9V5L10 2Z\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n            <path\n              d=\"M7 10L9 12L13 8\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </div>\n        <div class=\"info-banner__content\">\n          @if (paymentMethod() === 'CH') {\n            <p class=\"info-banner__text\">\n              Your refund is instant from our side, your bank may take up to 15 business days to reflect it.\n            </p>\n          } @else if (paymentMethod() === 'TB') {\n            <p class=\"info-banner__text\">\n              Your refund will be processed to Tabby within 3-5 business days.\n            </p>\n          } @else if (paymentMethod() === 'TM') {\n            <p class=\"info-banner__text\">\n              Your refund will be processed to Tamara within 7-10 business days.\n            </p>\n          } @else {\n            <p class=\"info-banner__text\">\n              Your loyalty points will be refunded instantly to your account.\n            </p>\n          }\n\n          <p class=\"info-banner__subtext\">\n            You can select refund option in the next step\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"refund-summary__footer\">\n      @if (allPackagesCancelled()) {\n        <div class=\"cancelled-status\">\n          <div class=\"cancelled-status__icon\">\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle\n                cx=\"12\"\n                cy=\"12\"\n                r=\"9\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n              />\n              <path\n                d=\"M9 12L11 14L15 10\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </div>\n          <div class=\"cancelled-status__text\">\n            <h4>All Rooms Cancelled</h4>\n            <p>All packages in this booking have been cancelled</p>\n          </div>\n        </div>\n      } @else {\n        @if (totalRefund()) {\n          <button\n            class=\"btn btn--secondary\"\n            type=\"button\"\n            (click)=\"onKeepRoom()\"\n          >\n            Keep Room\n          </button>\n          <button\n            class=\"btn btn--primary\"\n            type=\"button\"\n            (click)=\"onSelectRefundOption()\"\n          >\n            Select refund option\n          </button>\n        } @else {\n          <button\n            class=\"btn btn--danger\"\n            type=\"button\"\n            [disabled]=\"isCancelLoading()\"\n            (click)=\"submitData()\"\n          >\n            @if (isCancelLoading()) {\n              <span class=\"btn__spinner\"></span>\n            } @else {\n              Cancel Booking\n            }\n          </button>\n        }\n      }\n    </div>\n  }\n</div>\n\n<!-- Confirm Modal -->\n@if (showConfirmModalFlag()) {\n  <div\n    almatar-confirm-modal\n    [Message]=\"'Your request has been submitted. Our customer service team will contact you shortly.'\"\n    (cancelEvent)=\"closeAllModals()\"\n    (confirmEvent)=\"closeAllModals()\"\n  ></div>\n}\n\n<!-- Error Modal -->\n@if (showErrorModalFlag()) {\n  <div\n    almatar-manage-booking-failed-modal\n    [errorMessage]=\"hotelManageError()\"\n    (cancelEvent)=\"closeAllModals()\"\n    (confirmEvent)=\"closeAllModals()\"\n  ></div>\n}\n", styles: [".refund-summary{display:flex;flex-direction:column;height:100%}.refund-summary__notice{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:8px;font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:400;margin-top:16px}.refund-summary__notice svg{flex-shrink:0;width:18px;height:18px;margin-top:1px}.refund-summary__notice--info{background:var(--almatar-info-surface, #eaf2ff);border:1px solid var(--almatar-info-border, #b9d6ff);color:var(--almatar-info-text, #1a56db);border-radius:12px}.refund-summary__notice--info svg{color:var(--almatar-info-icon, #1a56db)}.refund-summary__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff;border-bottom:1px solid rgb(229,231,235)}.refund-summary__header-text{flex:1;text-align:center}.refund-summary__header-title{font-size:calc(24 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#1b1a1f;margin:0}.refund-summary__header-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;cursor:pointer;color:#7c3aed;padding:0}.refund-summary__header-btn svg{width:20px;height:20px}.refund-summary__header-btn:hover{opacity:.7}.refund-summary__content{flex:1;overflow-y:auto;padding:16px;background-color:#fff}.refund-summary__title{font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:#1b1a1f;margin-bottom:16px}.refund-summary__error{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 20px;background:linear-gradient(180deg,#fef2f280,#fff)}.refund-summary__error-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 24px;background:#fff;border-radius:16px;box-shadow:0 1px 3px #0000000a,0 4px 12px #0000000f;max-width:320px;width:100%;animation:fadeInUp .4s ease-out}.refund-summary__error-icon-wrapper{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#fee2e2,#fecaca);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:#dc2626;animation:pulse 2s ease-in-out infinite}.refund-summary__error-title{font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#374151;margin:0 0 24px;line-height:1.5}.refund-summary__error-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;border:none;border-radius:10px;font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #7c3aed40}.refund-summary__error-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px #7c3aed59}.refund-summary__error-btn:active{transform:translateY(0)}.refund-summary__error-btn svg{transition:transform .3s ease}.refund-summary__error-btn:hover svg{transform:rotate(180deg)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.refund-summary__footer{display:flex;gap:12px;padding:16px 20px;background:#fff;border-top:1px solid rgb(229,231,235)}.package-cards{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}.package-card{background:#fff;border:1px solid rgb(21,128,60);border-radius:12px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);padding:16px}.package-card__header{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer}.package-card__info{flex:1;min-width:0}.package-card__title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}.package-card__name{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#000;line-height:20px;margin:0}.package-card__badge{font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);color:#15803c;background:#f0fdf5;padding:6px 8px;border-radius:999px;text-transform:uppercase;flex-shrink:0}.package-card__badge--cancelled{color:#92939e;background:#fff;border:1px solid rgb(217,217,222)}.package-card__header-expand-icon{color:currentColor;transition:transform .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.package-card__header-expand-icon.rotated{transform:rotate(180deg)}.package-card__expandable-content{opacity:0;max-height:0;transform:translateY(-10px);transition:opacity .3s cubic-bezier(.4,0,.2,1),max-height .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1),margin-top .3s cubic-bezier(.4,0,.2,1);overflow:hidden;margin-top:0}.package-card__expandable-content.expanded{opacity:1;max-height:1000px;transform:translateY(0);margin-top:12px}.package-card__rooms-container{display:flex;flex-direction:column;gap:4px;margin:8px 0 4px}.package-card__rooms{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.package-card__room{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:16px;border:1px solid rgb(217,217,222);background:#fff}.package-card__room-name{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#1b1a1f;display:flex;align-items:center;flex-wrap:wrap;gap:0;margin:0}.package-card__room-basis{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#6b7280}.package-card__room-summary{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#1b1a1f;display:flex;align-items:center;flex-wrap:wrap;gap:0}.package-card__separator{margin:0 4px;color:#1f2937;font-weight:var(--almatar-font-weight-regular)}.package-card__date{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#6b7280;margin-bottom:12px}.package-card__details{cursor:pointer;overflow:hidden}.package-card__expanded-content{opacity:0;max-height:0;transform:translateY(-10px);transition:opacity .3s cubic-bezier(.4,0,.2,1),max-height .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1);overflow:hidden;margin-bottom:0}.package-card__expanded-content.expanded{opacity:1;max-height:500px;transform:translateY(0);margin-bottom:0}.package-card__row{display:flex;justify-content:space-between;align-items:center;transition:all .2s ease;margin-bottom:4px}.package-card__row--clickable{cursor:pointer}.package-card__row--total{margin-top:4px;font-weight:var(--almatar-font-weight-semibold);margin-bottom:0}.package-card__row:last-child{margin-bottom:0}.package-card__label{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583;font-weight:var(--almatar-font-weight-regular)}.package-card__label--dark{color:#1b1a1f;font-weight:var(--almatar-font-weight-medium)}.package-card__label--dark-light{color:#1b1a1f}.package-card__value{font-size:calc(13 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#1b1a1f;display:flex;align-items:center}:host-context(#ltr) .package-card__value{flex-direction:row-reverse}.package-card__value{gap:2px}.package-card__value--gray{color:#747583}.package-card__value--highlight{font-weight:var(--almatar-font-weight-medium);font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f}.package-card__value--regular{font-weight:var(--almatar-font-weight-regular)}.package-card__expand-icon{color:currentColor;transition:transform .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;width:16px;height:16px}.package-card__expand-icon.rotated{transform:rotate(180deg)}.package-card--cancelled-before{border:1px solid transparent;background-color:#f7f7f8}.package-card--cancelled-before .package-card__label.package-card__label--dark,.package-card--cancelled-before .package-card__value.package-card__value--highlight{color:#15803c}.package-card--expanded .package-card__header{margin-bottom:0}.addons-refund{margin-bottom:4px}.addons-refund__title{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:#1b1a1f;margin:0 0 12px}.addons-refund__list{display:flex;flex-direction:column}.addons-refund__item{display:flex;justify-content:space-between;align-items:center}.addons-refund__name{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#747583}.addons-refund__value{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#747583;display:flex;align-items:center}:host-context(#ltr) .addons-refund__value{flex-direction:row-reverse}.addons-refund__value{gap:2px}.addons-refund__notice{display:flex;align-items:center;gap:8px;padding:12px;border-radius:12px;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:400;margin-top:8px;background:#f7f7f8;border:1px solid rgb(217,217,222);color:#1b1a1f}.addons-refund__notice svg{flex-shrink:0;width:18px;height:18px;margin-top:1px;color:#1b1a1f}.addons-refund__notice-text{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#1b1a1f;margin:0;line-height:1.5}.seperator{margin:12px 0;border:1px dashed rgb(217,217,222)}.total-summary{background:#f0f8ff;border-radius:12px;padding:16px;margin-bottom:16px;transition:all .3s cubic-bezier(.4,0,.2,1)}.total-summary__row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.total-summary__label{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:#0b54c2;font-weight:var(--almatar-font-weight-regular)}.total-summary__label--highlight{font-weight:var(--almatar-font-weight-medium)}.total-summary__value{font-size:calc(13 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#0b54c2;display:flex;align-items:center}:host-context(#ltr) .total-summary__value{flex-direction:row-reverse}.total-summary__value{gap:2px}.total-summary__value--highlight{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);color:#0b54c2}.info-banner{display:flex;gap:8px;border:1px solid rgb(11,84,194);border-radius:12px;padding:14px;align-items:flex-start;transition:all .3s cubic-bezier(.4,0,.2,1)}.info-banner__icon{color:#0b54c2;flex-shrink:0;width:20px;height:20px}.info-banner__content{flex:1}.info-banner__text{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#0b54c2;margin:0 0 4px;font-weight:var(--almatar-font-weight-regular);line-height:16px}.info-banner__subtext{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;margin:0;line-height:1.4}.btn{flex:1;padding:12px 20px;border-radius:10px;font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);border:none;position:relative;overflow:hidden}.btn:before{content:\"\";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn:active:before{width:300px;height:300px}.btn--primary{background:#7c3aed;color:#fff}.btn--primary:hover{background:#6d28d9;transform:translateY(-1px);color:#fff;box-shadow:0 4px 12px #7c3aed4d}.btn--primary:active{transform:translateY(0)}.btn--secondary{background:#fff;color:#1b1a1f;border:1.5px solid rgb(229,231,235)}.btn--secondary:hover{background:#f9fafb;border-color:#d1d5db}.btn--secondary:active{background:#f3f4f6}.btn--danger{background:#fae3de;color:#dc2626;width:100%}.btn--danger:hover{color:#dc2626}.btn--danger:disabled{opacity:.7;cursor:not-allowed}.btn__spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.cancelled-status{display:flex;align-items:center;gap:16px;padding:20px;background:linear-gradient(135deg,#f0fdf5,#dcfce7);border:1px solid rgba(21,128,60,.2);border-radius:12px;width:100%;animation:fadeInUp .4s ease-out}.cancelled-status__icon{width:48px;height:48px;border-radius:50%;background:#15803c;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cancelled-status__icon svg{width:24px;height:24px;stroke:#fff}.cancelled-status__text{flex:1}.cancelled-status__text h4{font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:#15803c;margin:0 0 4px}.cancelled-status__text p{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#166534;margin:0;line-height:1.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: LoaderModule }, { kind: "ngmodule", type: AlmatarIconModule }, { kind: "component", type: AlmatarIconComponent, selector: "almatar-icon", inputs: ["name", "size"] }, { kind: "ngmodule", type: ExchangePipeModule }, { kind: "pipe", type: ExchangeRoundPipe, name: "exchange_round" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AlmatarHotelAutoCancellationRefundSummaryComponent, isStandalone: true, selector: "almatar-hotel-auto-cancellation-refund-summary", inputs: { selectedRooms: { classPropertyName: "selectedRooms", publicName: "selectedRooms", isSignal: true, isRequired: true, transformFunction: null }, bookingId: { classPropertyName: "bookingId", publicName: "bookingId", isSignal: true, isRequired: false, transformFunction: null }, hotelId: { classPropertyName: "hotelId", publicName: "hotelId", isSignal: true, isRequired: false, transformFunction: null }, hotelInfo: { classPropertyName: "hotelInfo", publicName: "hotelInfo", isSignal: true, isRequired: false, transformFunction: null }, selectionSkipped: { classPropertyName: "selectionSkipped", publicName: "selectionSkipped", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keepRoom: "keepRoom", selectRefundOption: "selectRefundOption", closeModal: "closeModal" }, ngImport: i0, template: "<div class=\"refund-summary\">\n  <!-- Header -->\n  <!-- <div class=\"refund-summary__header\">\n    <button\n      type=\"button\"\n      class=\"refund-summary__header-btn\"\n      (click)=\"onKeepRoom()\"\n      aria-label=\"Close\"\n    >\n      <almatar-icon [name]=\"backArrow()\"></almatar-icon>\n    </button>\n\n    <div class=\"refund-summary__header-text\">\n      <h3 class=\"refund-summary__header-title\">\n        Cancel Booking Request\n      </h3>\n    </div>\n    <button\n      type=\"button\"\n      class=\"refund-summary__header-btn\"\n      (click)=\"onClose()\"\n      aria-label=\"Close\"\n    >\n      <almatar-icon [name]=\"'x-mark'\"></almatar-icon>\n    </button>\n  </div> -->\n\n  @if (isLoading()) {\n    <almatar-hotel-auto-cancellation-refund-summary-skeleton />\n  } @else if (error()) {\n    <div class=\"refund-summary__error\">\n      <div class=\"refund-summary__error-card\">\n        <div class=\"refund-summary__error-icon-wrapper\">\n          <svg\n            width=\"32\"\n            height=\"32\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M12 8V12M12 16H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </div>\n        <h4 class=\"refund-summary__error-title\">\n          Failed to load refund details. Please try again.\n        </h4>\n        <button\n          class=\"refund-summary__error-btn\"\n          type=\"button\"\n          (click)=\"loadRefundDetails()\"\n        >\n          <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M1 4V10H7M23 20V14H17M20.49 9C19.9828 7.56678 19.1209 6.2854 17.9845 5.27542C16.8482 4.26543 15.4745 3.55976 13.9917 3.22426C12.5089 2.88875 10.9652 2.93434 9.50481 3.35677C8.04437 3.77921 6.71475 4.56471 5.64 5.64L1 10M23 14L18.36 18.36C17.2853 19.4353 15.9556 20.2208 14.4952 20.6432C13.0348 21.0657 11.4911 21.1112 10.0083 20.7757C8.52547 20.4402 7.1518 19.7346 6.01547 18.7246C4.87913 17.7146 4.01717 16.4332 3.51 15\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n          Try Again\n        </button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"refund-summary__content\">\n      <h3 class=\"refund-summary__title\">\n        Refund summary\n      </h3>\n\n      <div class=\"package-cards\">\n        @for (pkg of packages(); track i; let i = $index) {\n          <div\n            class=\"package-card\"\n            [class.package-card--expanded]=\"isPackageExpanded(pkg.packageId)\"\n            [class.package-card--cancelled-before]=\"pkg.cancelledBefore\"\n          >\n            <div\n              class=\"package-card__header\"\n              (click)=\"togglePackageExpand(pkg.packageId)\"\n            >\n              <div class=\"package-card__info\">\n                <div class=\"package-card__title-row\">\n                  <h4 class=\"package-card__name\">{{ pkg.packageName }}</h4>\n                  @if (!pkg.cancelledBefore) {\n                    <span class=\"package-card__badge\">\n                      CURRENT CANCELLATION\n                    </span>\n                    <!-- <span class=\"package-card__date\">\n                      Today on\n                      {{ formatDate(pkg.cancellationDate) }}\n                    </span> -->\n                  } @else {\n                    <span\n                      class=\"package-card__badge package-card__badge--cancelled\"\n                    >\n                      PREVIOUS CANCELLATION\n                    </span>\n                    <!-- <span class=\"package-card__date\">\n                      Cancellation date:\n                      {{ formatDate(pkg.cancellationDate) }}\n                    </span> -->\n                  }\n                </div>\n              </div>\n              <div\n                class=\"package-card__expand-icon\"\n                [class.rotated]=\"isPackageExpanded(pkg.packageId)\"\n              >\n                <almatar-icon [name]=\"'chevron-down'\"></almatar-icon>\n              </div>\n            </div>\n\n            <!-- Rooms display -->\n            @if (pkg.rooms?.length) {\n              <div class=\"package-card__rooms-container\">\n                @for (\n                  group of groupRoomsByName(pkg.rooms);\n                  track i;\n                  let i = $index\n                ) {\n                  <div class=\"package-card__room-summary\">\n                    @if (group.count > 1) {\n                      <!-- Multiple rooms -->\n                      {{ group.count }}x {{ group.roomName }}\n                    } @else {\n                      <!-- Single room -->\n                      Room\n\n                      {{ i + 1 }}\n                      <span class=\"package-card__separator\">&bull;</span>\n                      {{ group.roomName }}\n                    }\n                    @if (group.nights) {\n                      <span class=\"package-card__separator\">&bull;</span>\n                      {{ group.nights }}\n                      @if (group.nights === 1) {\n                        night\n                      } @else {\n                        nights\n                      }\n                    }\n                    @if (group.adults) {\n                      <span class=\"package-card__separator\">&bull;</span>\n                      {{ group.adults }}\n                      @if (group.adults === 1) {\n                        Adult\n                      } @else {\n                        Adults\n                      }\n                    }\n                    @if (group.children) {\n                      <span class=\"package-card__separator\">&bull;</span>\n                      {{ group.children }}\n                      @if (group.children === 1) {\n                        Child\n                      } @else {\n                        Children\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            }\n\n            @if (!pkg.cancelledBefore) {\n              <span class=\"package-card__date\">\n                Today on\n                {{ formatDate(pkg.cancellationDate) }}\n              </span>\n            } @else {\n              <span class=\"package-card__date\">\n                Cancellation date:\n                {{ formatDate(pkg.cancellationDate) }}\n              </span>\n            }\n\n            <!-- Room Amount Row with expand -->\n\n            <!-- Expandable content: Rooms, Date, and Financial breakdown -->\n            <div\n              class=\"package-card__expandable-content\"\n              [class.expanded]=\"isPackageExpanded(pkg.packageId)\"\n            >\n              <div\n                class=\"package-card__row package-card__row--clickable\"\n                (click)=\"\n                  toggleAmountExpand(pkg.packageId); $event.stopPropagation()\n                \"\n              >\n                @if (pkg?.rooms?.length > 1) {\n                  <span\n                    class=\"package-card__label package-card__label--dark-light\"\n                    >Rooms amount</span\n                  >\n                } @else {\n                  <span\n                    class=\"package-card__label package-card__label--dark-light\"\n                    >Room amount</span\n                  >\n                }\n                <span class=\"package-card__value package-card__value--regular\">\n                  @if (\n                    pkg.fee > 0 || pkg.serviceFee > 0 || surchargeAmount() > 0\n                  ) {\n                    <div\n                      class=\"package-card__expand-icon\"\n                      [class.rotated]=\"isAmountExpanded(pkg.packageId)\"\n                    >\n                      <almatar-icon [name]=\"'chevron-down'\"></almatar-icon>\n                    </div>\n                  }\n\n                  {{\n                    pkg.amount | exchange_round\n                  }}\n                  {{ currentCurrency()?.code }}\n                </span>\n              </div>\n\n              <!-- Expanded content: Cancellation fee and Service fee -->\n              <div\n                class=\"package-card__expanded-content\"\n                [class.expanded]=\"\n                  isAmountExpanded(pkg.packageId) &&\n                  (pkg.fee > 0 || pkg.serviceFee > 0)\n                \"\n              >\n                @if (pkg.fee > 0) {\n                  <div class=\"package-card__row\">\n                    <span class=\"package-card__label\">Cancellation fee</span>\n                    <span\n                      class=\"package-card__value package-card__value--gray package-card__value--regular\"\n                    >\n                      -\n                      {{\n                        pkg.fee | exchange_round\n                      }}\n                      {{ currentCurrency()?.code }}\n                    </span>\n                  </div>\n                }\n\n                @if (pkg.serviceFee > 0) {\n                  <div class=\"package-card__row\">\n                    <span class=\"package-card__label\">Service Fee</span>\n                    <span\n                      class=\"package-card__value package-card__value--gray package-card__value--regular\"\n                    >\n                      -\n                      {{\n                        pkg.serviceFee | exchange_round\n                      }}\n                      {{ currentCurrency()?.code }}\n                    </span>\n                  </div>\n                }\n\n                @if (surchargeAmount() > 0) {\n                  <div class=\"package-card__row\">\n                    <span class=\"package-card__label\">\n                      Surcharge (2.5%)\n                    </span>\n                    <span\n                      class=\"package-card__value package-card__value--gray package-card__value--regular\"\n                    >\n                      -\n                      {{\n                        surchargeAmount() | exchange_round\n                      }}\n                      {{ currentCurrency()?.code }}\n                    </span>\n                  </div>\n                }\n              </div>\n              <!-- Add-Ons Refund Section -->\n              @if (giftsDetails().length > 0 && i === packages()?.length - 1) {\n                <div class=\"addons-refund\">\n                  <span\n                    class=\"package-card__label package-card__label--dark-light\"\n                  >\n                    Add-Ons Refund\n                  </span>\n                  <div class=\"addons-refund__list\">\n                    @for (gift of giftsDetails(); track $index) {\n                      <div class=\"package-card__row\">\n                        <span class=\"package-card__label\">{{ gift.name }}</span>\n                        <span\n                          class=\"package-card__value package-card__value--gray package-card__value--regular\"\n                        >\n                          {{\n                            gift.toBeRefundedAmount | exchange_round\n                          }}\n                          {{ currentCurrency()?.code }}\n                          <!-- @if (!gift.refundable) {\n                            <span> - </span>\n                          } -->\n                        </span>\n                      </div>\n                    }\n                  </div>\n\n                  <!-- @if (giftsHasRefundableEntity()) {\n                    <div class=\"addons-refund__notice\">\n                      <svg\n                        width=\"18\"\n                        height=\"18\"\n                        viewBox=\"0 0 20 20\"\n                        fill=\"none\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                      >\n                        <circle\n                          cx=\"10\"\n                          cy=\"10\"\n                          r=\"9\"\n                          stroke=\"currentColor\"\n                          stroke-width=\"1.5\"\n                        />\n                        <path\n                          d=\"M10 9V14\"\n                          stroke=\"currentColor\"\n                          stroke-width=\"1.5\"\n                          stroke-linecap=\"round\"\n                        />\n                        <circle cx=\"10\" cy=\"6.5\" r=\"0.75\" fill=\"currentColor\" />\n                      </svg>\n                      <span class=\"addons-refund__notice-text\">\n                        Your add-on service/s refund will be processed separately by our Customer Service team shortly.\n                      </span>\n                    </div>\n                  } -->\n                </div>\n              }\n            </div>\n            <!-- End expandable content -->\n\n            <!-- You will get back row - ALWAYS VISIBLE -->\n            <div class=\"package-card__details\">\n              @if (pkg.cancelledBefore) {\n                <div class=\"package-card__row package-card__row--total\">\n                  <span class=\"package-card__label package-card__label--dark\">Refunded amount</span>\n                  <span\n                    class=\"package-card__value package-card__value--highlight\"\n                  >\n                    {{\n                      pkg.refund | exchange_round\n                    }}\n                    {{ currentCurrency()?.code }}\n                  </span>\n                </div>\n              } @else {\n                <div class=\"package-card__row package-card__row--total\">\n                  <span class=\"package-card__label package-card__label--dark\">You will get back</span>\n                  <span\n                    class=\"package-card__value package-card__value--highlight package-card__value--regular\"\n                  >\n                    {{\n                      pkg.refund | exchange_round\n                    }}\n                    {{ currentCurrency()?.code }}\n                  </span>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n      <hr class=\"seperator\" />\n\n      <div class=\"total-summary\">\n        <div class=\"total-summary__row\">\n          <span class=\"total-summary__label\">Total paid</span>\n          <span class=\"total-summary__value\">\n            {{\n              totalPaid() | exchange_round\n            }}\n            {{ currentCurrency()?.code }}\n          </span>\n        </div>\n\n        @if (alreadyRefunded()) {\n          <div class=\"total-summary__row\">\n            <span class=\"total-summary__label\">Rooms Refunded</span>\n            <span class=\"total-summary__value\">\n              {{\n                alreadyRefunded() | exchange_round\n              }}\n              {{ currentCurrency()?.code }}\n            </span>\n          </div>\n        }\n\n        <div class=\"total-summary__row total-summary__row--highlight\">\n          <div class=\"total-summary__label total-summary__label--highlight\">\n            <span>\n              You'll get back for\n              {{ currentRefundRoomsNumber() }}\n              {{\n                currentLang() !== 'ar'\n                  ? currentRefundRoomsNumber() > 1\n                    ? ('Rooms')\n                    : ('Room')\n                  : ''\n              }}\n            </span>\n          </div>\n          <span class=\"total-summary__value total-summary__value--highlight\">\n            {{\n              totalRefund() | exchange_round\n            }}\n            {{ currentCurrency()?.code }}\n          </span>\n        </div>\n      </div>\n\n      <div class=\"info-banner\">\n        <div class=\"info-banner__icon\">\n          <svg\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 20 20\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M10 2L3 5V9C3 13.55 6.24 17.74 10 18.5C13.76 17.74 17 13.55 17 9V5L10 2Z\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n            <path\n              d=\"M7 10L9 12L13 8\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </div>\n        <div class=\"info-banner__content\">\n          @if (paymentMethod() === 'CH') {\n            <p class=\"info-banner__text\">\n              Your refund is instant from our side, your bank may take up to 15 business days to reflect it.\n            </p>\n          } @else if (paymentMethod() === 'TB') {\n            <p class=\"info-banner__text\">\n              Your refund is instant from our side, Tabby may take 5-7 business days to reflect it.\n            </p>\n          } @else if (paymentMethod() === 'TM') {\n            <p class=\"info-banner__text\">\n              Your refund is instant from our side, Tamara may take up to 10 business days to reflect it.\n            </p>\n          } @else {\n            <p class=\"info-banner__text\">\n              Your refund is instant from our side, your loyalty program may take some time to reflect it based on their policy.\n            </p>\n          }\n\n          <p class=\"info-banner__subtext\">\n            You can select refund option in the next step\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"refund-summary__footer\">\n      @if (allPackagesCancelled()) {\n        <div class=\"cancelled-status\">\n          <div class=\"cancelled-status__icon\">\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle\n                cx=\"12\"\n                cy=\"12\"\n                r=\"9\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n              />\n              <path\n                d=\"M9 12L11 14L15 10\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </div>\n          <div class=\"cancelled-status__text\">\n            <h4>All Rooms Cancelled</h4>\n            <p>All packages in this booking have been cancelled</p>\n          </div>\n        </div>\n      } @else {\n        @if (totalRefund()) {\n          <button\n            class=\"btn btn--secondary\"\n            type=\"button\"\n            (click)=\"onKeepRoom()\"\n          >\n            Keep Room\n          </button>\n          <button\n            class=\"btn btn--primary\"\n            type=\"button\"\n            (click)=\"onSelectRefundOption()\"\n          >\n            Select refund option\n          </button>\n        } @else {\n          <button\n            class=\"btn btn--danger\"\n            type=\"button\"\n            [disabled]=\"isCancelLoading()\"\n            (click)=\"submitData()\"\n          >\n            @if (isCancelLoading()) {\n              <span class=\"btn__spinner\"></span>\n            } @else {\n              Cancel Booking\n            }\n          </button>\n        }\n      }\n    </div>\n  }\n</div>\n\n<!-- Confirm Modal -->\n@if (showConfirmModalFlag()) {\n  <div\n    almatar-confirm-modal\n    [Message]=\"'Your request has been submitted. Our customer service team will contact you shortly.'\"\n    (cancelEvent)=\"closeAllModals()\"\n    (confirmEvent)=\"closeAllModals()\"\n  ></div>\n}\n\n<!-- Error Modal -->\n@if (showErrorModalFlag()) {\n  <div\n    almatar-manage-booking-failed-modal\n    [errorMessage]=\"hotelManageError()\"\n    (cancelEvent)=\"closeAllModals()\"\n    (confirmEvent)=\"closeAllModals()\"\n  ></div>\n}\n", styles: [".refund-summary{display:flex;flex-direction:column;height:100%}.refund-summary__notice{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:8px;font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:400;margin-top:16px}.refund-summary__notice svg{flex-shrink:0;width:18px;height:18px;margin-top:1px}.refund-summary__notice--info{background:var(--almatar-info-surface, #eaf2ff);border:1px solid var(--almatar-info-border, #b9d6ff);color:var(--almatar-info-text, #1a56db);border-radius:12px}.refund-summary__notice--info svg{color:var(--almatar-info-icon, #1a56db)}.refund-summary__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff;border-bottom:1px solid rgb(229,231,235)}.refund-summary__header-text{flex:1;text-align:center}.refund-summary__header-title{font-size:calc(24 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#1b1a1f;margin:0}.refund-summary__header-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;cursor:pointer;color:#7c3aed;padding:0}.refund-summary__header-btn svg{width:20px;height:20px}.refund-summary__header-btn:hover{opacity:.7}.refund-summary__content{flex:1;overflow-y:auto;padding:16px;background-color:#fff}.refund-summary__title{font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:#1b1a1f;margin-bottom:16px}.refund-summary__error{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 20px;background:linear-gradient(180deg,#fef2f280,#fff)}.refund-summary__error-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 24px;background:#fff;border-radius:16px;box-shadow:0 1px 3px #0000000a,0 4px 12px #0000000f;max-width:320px;width:100%;animation:fadeInUp .4s ease-out}.refund-summary__error-icon-wrapper{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#fee2e2,#fecaca);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:#dc2626;animation:pulse 2s ease-in-out infinite}.refund-summary__error-title{font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#374151;margin:0 0 24px;line-height:1.5}.refund-summary__error-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;border:none;border-radius:10px;font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #7c3aed40}.refund-summary__error-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px #7c3aed59}.refund-summary__error-btn:active{transform:translateY(0)}.refund-summary__error-btn svg{transition:transform .3s ease}.refund-summary__error-btn:hover svg{transform:rotate(180deg)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.refund-summary__footer{display:flex;gap:12px;padding:16px 20px;background:#fff;border-top:1px solid rgb(229,231,235)}.package-cards{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}.package-card{background:#fff;border:1px solid rgb(21,128,60);border-radius:12px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);padding:16px}.package-card__header{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer}.package-card__info{flex:1;min-width:0}.package-card__title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}.package-card__name{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#000;line-height:20px;margin:0}.package-card__badge{font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);color:#15803c;background:#f0fdf5;padding:6px 8px;border-radius:999px;text-transform:uppercase;flex-shrink:0}.package-card__badge--cancelled{color:#92939e;background:#fff;border:1px solid rgb(217,217,222)}.package-card__header-expand-icon{color:currentColor;transition:transform .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.package-card__header-expand-icon.rotated{transform:rotate(180deg)}.package-card__expandable-content{opacity:0;max-height:0;transform:translateY(-10px);transition:opacity .3s cubic-bezier(.4,0,.2,1),max-height .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1),margin-top .3s cubic-bezier(.4,0,.2,1);overflow:hidden;margin-top:0}.package-card__expandable-content.expanded{opacity:1;max-height:1000px;transform:translateY(0);margin-top:12px}.package-card__rooms-container{display:flex;flex-direction:column;gap:4px;margin:8px 0 4px}.package-card__rooms{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.package-card__room{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:16px;border:1px solid rgb(217,217,222);background:#fff}.package-card__room-name{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#1b1a1f;display:flex;align-items:center;flex-wrap:wrap;gap:0;margin:0}.package-card__room-basis{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#6b7280}.package-card__room-summary{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#1b1a1f;display:flex;align-items:center;flex-wrap:wrap;gap:0}.package-card__separator{margin:0 4px;color:#1f2937;font-weight:var(--almatar-font-weight-regular)}.package-card__date{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#6b7280;margin-bottom:12px}.package-card__details{cursor:pointer;overflow:hidden}.package-card__expanded-content{opacity:0;max-height:0;transform:translateY(-10px);transition:opacity .3s cubic-bezier(.4,0,.2,1),max-height .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1);overflow:hidden;margin-bottom:0}.package-card__expanded-content.expanded{opacity:1;max-height:500px;transform:translateY(0);margin-bottom:0}.package-card__row{display:flex;justify-content:space-between;align-items:center;transition:all .2s ease;margin-bottom:4px}.package-card__row--clickable{cursor:pointer}.package-card__row--total{margin-top:4px;font-weight:var(--almatar-font-weight-semibold);margin-bottom:0}.package-card__row:last-child{margin-bottom:0}.package-card__label{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583;font-weight:var(--almatar-font-weight-regular)}.package-card__label--dark{color:#1b1a1f;font-weight:var(--almatar-font-weight-medium)}.package-card__label--dark-light{color:#1b1a1f}.package-card__value{font-size:calc(13 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#1b1a1f;display:flex;align-items:center}:host-context(#ltr) .package-card__value{flex-direction:row-reverse}.package-card__value{gap:2px}.package-card__value--gray{color:#747583}.package-card__value--highlight{font-weight:var(--almatar-font-weight-medium);font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f}.package-card__value--regular{font-weight:var(--almatar-font-weight-regular)}.package-card__expand-icon{color:currentColor;transition:transform .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;width:16px;height:16px}.package-card__expand-icon.rotated{transform:rotate(180deg)}.package-card--cancelled-before{border:1px solid transparent;background-color:#f7f7f8}.package-card--cancelled-before .package-card__label.package-card__label--dark,.package-card--cancelled-before .package-card__value.package-card__value--highlight{color:#15803c}.package-card--expanded .package-card__header{margin-bottom:0}.addons-refund{margin-bottom:4px}.addons-refund__title{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:#1b1a1f;margin:0 0 12px}.addons-refund__list{display:flex;flex-direction:column}.addons-refund__item{display:flex;justify-content:space-between;align-items:center}.addons-refund__name{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#747583}.addons-refund__value{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#747583;display:flex;align-items:center}:host-context(#ltr) .addons-refund__value{flex-direction:row-reverse}.addons-refund__value{gap:2px}.addons-refund__notice{display:flex;align-items:center;gap:8px;padding:12px;border-radius:12px;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:400;margin-top:8px;background:#f7f7f8;border:1px solid rgb(217,217,222);color:#1b1a1f}.addons-refund__notice svg{flex-shrink:0;width:18px;height:18px;margin-top:1px;color:#1b1a1f}.addons-refund__notice-text{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#1b1a1f;margin:0;line-height:1.5}.seperator{margin:12px 0;border:1px dashed rgb(217,217,222)}.total-summary{background:#f0f8ff;border-radius:12px;padding:16px;margin-bottom:16px;transition:all .3s cubic-bezier(.4,0,.2,1)}.total-summary__row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.total-summary__label{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:#0b54c2;font-weight:var(--almatar-font-weight-regular)}.total-summary__label--highlight{font-weight:var(--almatar-font-weight-medium)}.total-summary__value{font-size:calc(13 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#0b54c2;display:flex;align-items:center}:host-context(#ltr) .total-summary__value{flex-direction:row-reverse}.total-summary__value{gap:2px}.total-summary__value--highlight{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);color:#0b54c2}.info-banner{display:flex;gap:8px;border:1px solid rgb(11,84,194);border-radius:12px;padding:14px;align-items:flex-start;transition:all .3s cubic-bezier(.4,0,.2,1)}.info-banner__icon{color:#0b54c2;flex-shrink:0;width:20px;height:20px}.info-banner__content{flex:1}.info-banner__text{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#0b54c2;margin:0 0 4px;font-weight:var(--almatar-font-weight-regular);line-height:16px}.info-banner__subtext{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;margin:0;line-height:1.4}.btn{flex:1;padding:12px 20px;border-radius:10px;font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);border:none;position:relative;overflow:hidden}.btn:before{content:\"\";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn:active:before{width:300px;height:300px}.btn--primary{background:#7c3aed;color:#fff}.btn--primary:hover{background:#6d28d9;transform:translateY(-1px);color:#fff;box-shadow:0 4px 12px #7c3aed4d}.btn--primary:active{transform:translateY(0)}.btn--secondary{background:#fff;color:#1b1a1f;border:1.5px solid rgb(229,231,235)}.btn--secondary:hover{background:#f9fafb;border-color:#d1d5db}.btn--secondary:active{background:#f3f4f6}.btn--danger{background:#fae3de;color:#dc2626;width:100%}.btn--danger:hover{color:#dc2626}.btn--danger:disabled{opacity:.7;cursor:not-allowed}.btn__spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.cancelled-status{display:flex;align-items:center;gap:16px;padding:20px;background:linear-gradient(135deg,#f0fdf5,#dcfce7);border:1px solid rgba(21,128,60,.2);border-radius:12px;width:100%;animation:fadeInUp .4s ease-out}.cancelled-status__icon{width:48px;height:48px;border-radius:50%;background:#15803c;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cancelled-status__icon svg{width:24px;height:24px;stroke:#fff}.cancelled-status__text{flex:1}.cancelled-status__text h4{font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:#15803c;margin:0 0 4px}.cancelled-status__text p{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#166534;margin:0;line-height:1.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: LoaderModule }, { kind: "ngmodule", type: AlmatarIconModule }, { kind: "component", type: AlmatarIconComponent, selector: "almatar-icon", inputs: ["name", "size"] }, { kind: "ngmodule", type: ExchangePipeModule }, { kind: "pipe", type: ExchangeRoundPipe, name: "exchange_round" }, { kind: "component", type: AlmatarHotelAutoCancellationRefundSummarySkeletonComponent, selector: "almatar-hotel-auto-cancellation-refund-summary-skeleton" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlmatarHotelAutoCancellationRefundSummaryComponent, decorators: [{
             type: Component,
@@ -4514,95 +4571,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         CurrencyCodeIconComponent,
                         ConfirmModalComponent,
                         ManageBookingFailedModalComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"refund-summary\">\n  <!-- Header -->\n  <!-- <div class=\"refund-summary__header\">\n    <button\n      type=\"button\"\n      class=\"refund-summary__header-btn\"\n      (click)=\"onKeepRoom()\"\n      aria-label=\"Close\"\n    >\n      <almatar-icon [name]=\"backArrow()\"></almatar-icon>\n    </button>\n\n    <div class=\"refund-summary__header-text\">\n      <h3 class=\"refund-summary__header-title\">\n        Cancel Booking Request\n      </h3>\n    </div>\n    <button\n      type=\"button\"\n      class=\"refund-summary__header-btn\"\n      (click)=\"onClose()\"\n      aria-label=\"Close\"\n    >\n      <almatar-icon [name]=\"'x-mark'\"></almatar-icon>\n    </button>\n  </div> -->\n\n  @if (isLoading()) {\n    <div class=\"refund-summary__loader\">\n      <almatar-loader></almatar-loader>\n    </div>\n  } @else if (error()) {\n    <div class=\"refund-summary__error\">\n      <div class=\"refund-summary__error-card\">\n        <div class=\"refund-summary__error-icon-wrapper\">\n          <svg\n            width=\"32\"\n            height=\"32\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M12 8V12M12 16H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </div>\n        <h4 class=\"refund-summary__error-title\">\n          Failed to load refund details. Please try again.\n        </h4>\n        <button\n          class=\"refund-summary__error-btn\"\n          type=\"button\"\n          (click)=\"loadRefundDetails()\"\n        >\n          <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M1 4V10H7M23 20V14H17M20.49 9C19.9828 7.56678 19.1209 6.2854 17.9845 5.27542C16.8482 4.26543 15.4745 3.55976 13.9917 3.22426C12.5089 2.88875 10.9652 2.93434 9.50481 3.35677C8.04437 3.77921 6.71475 4.56471 5.64 5.64L1 10M23 14L18.36 18.36C17.2853 19.4353 15.9556 20.2208 14.4952 20.6432C13.0348 21.0657 11.4911 21.1112 10.0083 20.7757C8.52547 20.4402 7.1518 19.7346 6.01547 18.7246C4.87913 17.7146 4.01717 16.4332 3.51 15\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n          Try Again\n        </button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"refund-summary__content\">\n      <h3 class=\"refund-summary__title\">\n        Refund summary\n      </h3>\n\n      <div class=\"package-cards\">\n        @for (pkg of packages(); track i; let i = $index) {\n          <div\n            class=\"package-card\"\n            [class.package-card--expanded]=\"isPackageExpanded(pkg.packageId)\"\n            [class.package-card--cancelled-before]=\"pkg.cancelledBefore\"\n          >\n            <div\n              class=\"package-card__header\"\n              (click)=\"togglePackageExpand(pkg.packageId)\"\n            >\n              <div class=\"package-card__info\">\n                <div class=\"package-card__title-row\">\n                  <h4 class=\"package-card__name\">{{ pkg.packageName }}</h4>\n                  @if (!pkg.cancelledBefore) {\n                    <span class=\"package-card__badge\">\n                      CURRENT CANCELLATION\n                    </span>\n                    <!-- <span class=\"package-card__date\">\n                      Today on\n                      {{ formatDate(pkg.cancellationDate) }}\n                    </span> -->\n                  } @else {\n                    <span\n                      class=\"package-card__badge package-card__badge--cancelled\"\n                    >\n                      PREVIOUS CANCELLATION\n                    </span>\n                    <!-- <span class=\"package-card__date\">\n                      Cancellation date:\n                      {{ formatDate(pkg.cancellationDate) }}\n                    </span> -->\n                  }\n                </div>\n              </div>\n              <div\n                class=\"package-card__expand-icon\"\n                [class.rotated]=\"isPackageExpanded(pkg.packageId)\"\n              >\n                <almatar-icon [name]=\"'chevron-down'\"></almatar-icon>\n              </div>\n            </div>\n\n            <!-- Rooms display -->\n            @if (pkg.rooms?.length) {\n              <div class=\"package-card__rooms-container\">\n                @for (\n                  group of groupRoomsByName(pkg.rooms);\n                  track i;\n                  let i = $index\n                ) {\n                  <div class=\"package-card__room-summary\">\n                    @if (group.count > 1) {\n                      <!-- Multiple rooms -->\n                      {{ group.count }}x {{ group.roomName }}\n                    } @else {\n                      <!-- Single room -->\n                      Room\n\n                      {{ i + 1 }}\n                      <span class=\"package-card__separator\">&bull;</span>\n                      {{ group.roomName }}\n                    }\n                    @if (group.nights) {\n                      <span class=\"package-card__separator\">&bull;</span>\n                      {{ group.nights }}\n                      @if (group.nights === 1) {\n                        night\n                      } @else {\n                        nights\n                      }\n                    }\n                    @if (group.adults) {\n                      <span class=\"package-card__separator\">&bull;</span>\n                      {{ group.adults }}\n                      @if (group.adults === 1) {\n                        Adult\n                      } @else {\n                        Adults\n                      }\n                    }\n                    @if (group.children) {\n                      <span class=\"package-card__separator\">&bull;</span>\n                      {{ group.children }}\n                      @if (group.children === 1) {\n                        Child\n                      } @else {\n                        Children\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            }\n\n            @if (!pkg.cancelledBefore) {\n              <span class=\"package-card__date\">\n                Today on\n                {{ formatDate(pkg.cancellationDate) }}\n              </span>\n            } @else {\n              <span class=\"package-card__date\">\n                Cancellation date:\n                {{ formatDate(pkg.cancellationDate) }}\n              </span>\n            }\n\n            <!-- Room Amount Row with expand -->\n\n            <!-- Expandable content: Rooms, Date, and Financial breakdown -->\n            <div\n              class=\"package-card__expandable-content\"\n              [class.expanded]=\"isPackageExpanded(pkg.packageId)\"\n            >\n              <div\n                class=\"package-card__row package-card__row--clickable\"\n                (click)=\"\n                  toggleAmountExpand(pkg.packageId); $event.stopPropagation()\n                \"\n              >\n                @if (pkg?.rooms?.length > 1) {\n                  <span\n                    class=\"package-card__label package-card__label--dark-light\"\n                    >Rooms amount</span\n                  >\n                } @else {\n                  <span\n                    class=\"package-card__label package-card__label--dark-light\"\n                    >Room amount</span\n                  >\n                }\n                <span class=\"package-card__value package-card__value--regular\">\n                  @if (\n                    pkg.fee > 0 || pkg.serviceFee > 0 || surchargeAmount() > 0\n                  ) {\n                    <div\n                      class=\"package-card__expand-icon\"\n                      [class.rotated]=\"isAmountExpanded(pkg.packageId)\"\n                    >\n                      <almatar-icon [name]=\"'chevron-down'\"></almatar-icon>\n                    </div>\n                  }\n\n                  {{\n                    pkg.amount | exchange_round\n                  }}\n                  {{ currentCurrency()?.code }}\n                </span>\n              </div>\n\n              <!-- Expanded content: Cancellation fee and Service fee -->\n              <div\n                class=\"package-card__expanded-content\"\n                [class.expanded]=\"\n                  isAmountExpanded(pkg.packageId) &&\n                  (pkg.fee > 0 || pkg.serviceFee > 0)\n                \"\n              >\n                @if (pkg.fee > 0) {\n                  <div class=\"package-card__row\">\n                    <span class=\"package-card__label\">Cancellation fee</span>\n                    <span\n                      class=\"package-card__value package-card__value--gray package-card__value--regular\"\n                    >\n                      -\n                      {{\n                        pkg.fee | exchange_round\n                      }}\n                      {{ currentCurrency()?.code }}\n                    </span>\n                  </div>\n                }\n\n                @if (pkg.serviceFee > 0) {\n                  <div class=\"package-card__row\">\n                    <span class=\"package-card__label\">Service Fee</span>\n                    <span\n                      class=\"package-card__value package-card__value--gray package-card__value--regular\"\n                    >\n                      -\n                      {{\n                        pkg.serviceFee | exchange_round\n                      }}\n                      {{ currentCurrency()?.code }}\n                    </span>\n                  </div>\n                }\n\n                @if (surchargeAmount() > 0) {\n                  <div class=\"package-card__row\">\n                    <span class=\"package-card__label\">\n                      Surcharge (2.5%)\n                    </span>\n                    <span\n                      class=\"package-card__value package-card__value--gray package-card__value--regular\"\n                    >\n                      -\n                      {{\n                        surchargeAmount() | exchange_round\n                      }}\n                      {{ currentCurrency()?.code }}\n                    </span>\n                  </div>\n                }\n              </div>\n              <!-- Add-Ons Refund Section -->\n              @if (giftsDetails().length > 0 && i === packages()?.length - 1) {\n                <div class=\"addons-refund\">\n                  <span\n                    class=\"package-card__label package-card__label--dark-light\"\n                  >\n                    Add-Ons Refund\n                  </span>\n                  <div class=\"addons-refund__list\">\n                    @for (gift of giftsDetails(); track $index) {\n                      <div class=\"package-card__row\">\n                        <span class=\"package-card__label\">{{ gift.name }}</span>\n                        <span\n                          class=\"package-card__value package-card__value--gray package-card__value--regular\"\n                        >\n                          {{\n                            gift.toBeRefundedAmount | exchange_round\n                          }}\n                          {{ currentCurrency()?.code }}\n                          <!-- @if (!gift.refundable) {\n                            <span> - </span>\n                          } -->\n                        </span>\n                      </div>\n                    }\n                  </div>\n\n                  <!-- @if (giftsHasRefundableEntity()) {\n                    <div class=\"addons-refund__notice\">\n                      <svg\n                        width=\"18\"\n                        height=\"18\"\n                        viewBox=\"0 0 20 20\"\n                        fill=\"none\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                      >\n                        <circle\n                          cx=\"10\"\n                          cy=\"10\"\n                          r=\"9\"\n                          stroke=\"currentColor\"\n                          stroke-width=\"1.5\"\n                        />\n                        <path\n                          d=\"M10 9V14\"\n                          stroke=\"currentColor\"\n                          stroke-width=\"1.5\"\n                          stroke-linecap=\"round\"\n                        />\n                        <circle cx=\"10\" cy=\"6.5\" r=\"0.75\" fill=\"currentColor\" />\n                      </svg>\n                      <span class=\"addons-refund__notice-text\">\n                        Your add-on service/s refund will be processed separately by our Customer Service team shortly.\n                      </span>\n                    </div>\n                  } -->\n                </div>\n              }\n            </div>\n            <!-- End expandable content -->\n\n            <!-- You will get back row - ALWAYS VISIBLE -->\n            <div class=\"package-card__details\">\n              @if (pkg.cancelledBefore) {\n                <div class=\"package-card__row package-card__row--total\">\n                  <span class=\"package-card__label package-card__label--dark\">Refunded amount</span>\n                  <span\n                    class=\"package-card__value package-card__value--highlight\"\n                  >\n                    {{\n                      pkg.refund | exchange_round\n                    }}\n                    {{ currentCurrency()?.code }}\n                  </span>\n                </div>\n              } @else {\n                <div class=\"package-card__row package-card__row--total\">\n                  <span class=\"package-card__label package-card__label--dark\">You will get back</span>\n                  <span\n                    class=\"package-card__value package-card__value--highlight package-card__value--regular\"\n                  >\n                    {{\n                      pkg.refund | exchange_round\n                    }}\n                    {{ currentCurrency()?.code }}\n                  </span>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n      <hr class=\"seperator\" />\n\n      <div class=\"total-summary\">\n        <div class=\"total-summary__row\">\n          <span class=\"total-summary__label\">Total paid</span>\n          <span class=\"total-summary__value\">\n            {{\n              totalPaid() | exchange_round\n            }}\n            {{ currentCurrency()?.code }}\n          </span>\n        </div>\n\n        @if (alreadyRefunded()) {\n          <div class=\"total-summary__row\">\n            <span class=\"total-summary__label\">Rooms Refunded</span>\n            <span class=\"total-summary__value\">\n              {{\n                alreadyRefunded() | exchange_round\n              }}\n              {{ currentCurrency()?.code }}\n            </span>\n          </div>\n        }\n\n        <div class=\"total-summary__row total-summary__row--highlight\">\n          <div class=\"total-summary__label total-summary__label--highlight\">\n            <span>\n              You'll get back for\n              {{ currentRefundRoomsNumber() }}\n              {{\n                currentLang() !== 'ar'\n                  ? currentRefundRoomsNumber() > 1\n                    ? ('Rooms')\n                    : ('Room')\n                  : ''\n              }}\n            </span>\n          </div>\n          <span class=\"total-summary__value total-summary__value--highlight\">\n            {{\n              totalRefund() | exchange_round\n            }}\n            {{ currentCurrency()?.code }}\n          </span>\n        </div>\n      </div>\n\n      <div class=\"info-banner\">\n        <div class=\"info-banner__icon\">\n          <svg\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 20 20\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M10 2L3 5V9C3 13.55 6.24 17.74 10 18.5C13.76 17.74 17 13.55 17 9V5L10 2Z\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n            <path\n              d=\"M7 10L9 12L13 8\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </div>\n        <div class=\"info-banner__content\">\n          @if (paymentMethod() === 'CH') {\n            <p class=\"info-banner__text\">\n              Your refund is instant from our side, your bank may take up to 15 business days to reflect it.\n            </p>\n          } @else if (paymentMethod() === 'TB') {\n            <p class=\"info-banner__text\">\n              Your refund will be processed to Tabby within 3-5 business days.\n            </p>\n          } @else if (paymentMethod() === 'TM') {\n            <p class=\"info-banner__text\">\n              Your refund will be processed to Tamara within 7-10 business days.\n            </p>\n          } @else {\n            <p class=\"info-banner__text\">\n              Your loyalty points will be refunded instantly to your account.\n            </p>\n          }\n\n          <p class=\"info-banner__subtext\">\n            You can select refund option in the next step\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"refund-summary__footer\">\n      @if (allPackagesCancelled()) {\n        <div class=\"cancelled-status\">\n          <div class=\"cancelled-status__icon\">\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle\n                cx=\"12\"\n                cy=\"12\"\n                r=\"9\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n              />\n              <path\n                d=\"M9 12L11 14L15 10\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </div>\n          <div class=\"cancelled-status__text\">\n            <h4>All Rooms Cancelled</h4>\n            <p>All packages in this booking have been cancelled</p>\n          </div>\n        </div>\n      } @else {\n        @if (totalRefund()) {\n          <button\n            class=\"btn btn--secondary\"\n            type=\"button\"\n            (click)=\"onKeepRoom()\"\n          >\n            Keep Room\n          </button>\n          <button\n            class=\"btn btn--primary\"\n            type=\"button\"\n            (click)=\"onSelectRefundOption()\"\n          >\n            Select refund option\n          </button>\n        } @else {\n          <button\n            class=\"btn btn--danger\"\n            type=\"button\"\n            [disabled]=\"isCancelLoading()\"\n            (click)=\"submitData()\"\n          >\n            @if (isCancelLoading()) {\n              <span class=\"btn__spinner\"></span>\n            } @else {\n              Cancel Booking\n            }\n          </button>\n        }\n      }\n    </div>\n  }\n</div>\n\n<!-- Confirm Modal -->\n@if (showConfirmModalFlag()) {\n  <div\n    almatar-confirm-modal\n    [Message]=\"'Your request has been submitted. Our customer service team will contact you shortly.'\"\n    (cancelEvent)=\"closeAllModals()\"\n    (confirmEvent)=\"closeAllModals()\"\n  ></div>\n}\n\n<!-- Error Modal -->\n@if (showErrorModalFlag()) {\n  <div\n    almatar-manage-booking-failed-modal\n    [errorMessage]=\"hotelManageError()\"\n    (cancelEvent)=\"closeAllModals()\"\n    (confirmEvent)=\"closeAllModals()\"\n  ></div>\n}\n", styles: [".refund-summary{display:flex;flex-direction:column;height:100%}.refund-summary__notice{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:8px;font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:400;margin-top:16px}.refund-summary__notice svg{flex-shrink:0;width:18px;height:18px;margin-top:1px}.refund-summary__notice--info{background:var(--almatar-info-surface, #eaf2ff);border:1px solid var(--almatar-info-border, #b9d6ff);color:var(--almatar-info-text, #1a56db);border-radius:12px}.refund-summary__notice--info svg{color:var(--almatar-info-icon, #1a56db)}.refund-summary__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff;border-bottom:1px solid rgb(229,231,235)}.refund-summary__header-text{flex:1;text-align:center}.refund-summary__header-title{font-size:calc(24 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#1b1a1f;margin:0}.refund-summary__header-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;cursor:pointer;color:#7c3aed;padding:0}.refund-summary__header-btn svg{width:20px;height:20px}.refund-summary__header-btn:hover{opacity:.7}.refund-summary__content{flex:1;overflow-y:auto;padding:16px;background-color:#fff}.refund-summary__title{font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:#1b1a1f;margin-bottom:16px}.refund-summary__error{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 20px;background:linear-gradient(180deg,#fef2f280,#fff)}.refund-summary__error-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 24px;background:#fff;border-radius:16px;box-shadow:0 1px 3px #0000000a,0 4px 12px #0000000f;max-width:320px;width:100%;animation:fadeInUp .4s ease-out}.refund-summary__error-icon-wrapper{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#fee2e2,#fecaca);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:#dc2626;animation:pulse 2s ease-in-out infinite}.refund-summary__error-title{font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#374151;margin:0 0 24px;line-height:1.5}.refund-summary__error-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;border:none;border-radius:10px;font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #7c3aed40}.refund-summary__error-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px #7c3aed59}.refund-summary__error-btn:active{transform:translateY(0)}.refund-summary__error-btn svg{transition:transform .3s ease}.refund-summary__error-btn:hover svg{transform:rotate(180deg)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.refund-summary__footer{display:flex;gap:12px;padding:16px 20px;background:#fff;border-top:1px solid rgb(229,231,235)}.package-cards{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}.package-card{background:#fff;border:1px solid rgb(21,128,60);border-radius:12px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);padding:16px}.package-card__header{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer}.package-card__info{flex:1;min-width:0}.package-card__title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}.package-card__name{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#000;line-height:20px;margin:0}.package-card__badge{font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);color:#15803c;background:#f0fdf5;padding:6px 8px;border-radius:999px;text-transform:uppercase;flex-shrink:0}.package-card__badge--cancelled{color:#92939e;background:#fff;border:1px solid rgb(217,217,222)}.package-card__header-expand-icon{color:currentColor;transition:transform .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.package-card__header-expand-icon.rotated{transform:rotate(180deg)}.package-card__expandable-content{opacity:0;max-height:0;transform:translateY(-10px);transition:opacity .3s cubic-bezier(.4,0,.2,1),max-height .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1),margin-top .3s cubic-bezier(.4,0,.2,1);overflow:hidden;margin-top:0}.package-card__expandable-content.expanded{opacity:1;max-height:1000px;transform:translateY(0);margin-top:12px}.package-card__rooms-container{display:flex;flex-direction:column;gap:4px;margin:8px 0 4px}.package-card__rooms{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.package-card__room{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:16px;border:1px solid rgb(217,217,222);background:#fff}.package-card__room-name{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#1b1a1f;display:flex;align-items:center;flex-wrap:wrap;gap:0;margin:0}.package-card__room-basis{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#6b7280}.package-card__room-summary{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#1b1a1f;display:flex;align-items:center;flex-wrap:wrap;gap:0}.package-card__separator{margin:0 4px;color:#1f2937;font-weight:var(--almatar-font-weight-regular)}.package-card__date{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#6b7280;margin-bottom:12px}.package-card__details{cursor:pointer;overflow:hidden}.package-card__expanded-content{opacity:0;max-height:0;transform:translateY(-10px);transition:opacity .3s cubic-bezier(.4,0,.2,1),max-height .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1);overflow:hidden;margin-bottom:0}.package-card__expanded-content.expanded{opacity:1;max-height:500px;transform:translateY(0);margin-bottom:0}.package-card__row{display:flex;justify-content:space-between;align-items:center;transition:all .2s ease;margin-bottom:4px}.package-card__row--clickable{cursor:pointer}.package-card__row--total{margin-top:4px;font-weight:var(--almatar-font-weight-semibold);margin-bottom:0}.package-card__row:last-child{margin-bottom:0}.package-card__label{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583;font-weight:var(--almatar-font-weight-regular)}.package-card__label--dark{color:#1b1a1f;font-weight:var(--almatar-font-weight-medium)}.package-card__label--dark-light{color:#1b1a1f}.package-card__value{font-size:calc(13 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#1b1a1f;display:flex;align-items:center}:host-context(#ltr) .package-card__value{flex-direction:row-reverse}.package-card__value{gap:2px}.package-card__value--gray{color:#747583}.package-card__value--highlight{font-weight:var(--almatar-font-weight-medium);font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f}.package-card__value--regular{font-weight:var(--almatar-font-weight-regular)}.package-card__expand-icon{color:currentColor;transition:transform .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;width:16px;height:16px}.package-card__expand-icon.rotated{transform:rotate(180deg)}.package-card--cancelled-before{border:1px solid transparent;background-color:#f7f7f8}.package-card--cancelled-before .package-card__label.package-card__label--dark,.package-card--cancelled-before .package-card__value.package-card__value--highlight{color:#15803c}.package-card--expanded .package-card__header{margin-bottom:0}.addons-refund{margin-bottom:4px}.addons-refund__title{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:#1b1a1f;margin:0 0 12px}.addons-refund__list{display:flex;flex-direction:column}.addons-refund__item{display:flex;justify-content:space-between;align-items:center}.addons-refund__name{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#747583}.addons-refund__value{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#747583;display:flex;align-items:center}:host-context(#ltr) .addons-refund__value{flex-direction:row-reverse}.addons-refund__value{gap:2px}.addons-refund__notice{display:flex;align-items:center;gap:8px;padding:12px;border-radius:12px;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:400;margin-top:8px;background:#f7f7f8;border:1px solid rgb(217,217,222);color:#1b1a1f}.addons-refund__notice svg{flex-shrink:0;width:18px;height:18px;margin-top:1px;color:#1b1a1f}.addons-refund__notice-text{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#1b1a1f;margin:0;line-height:1.5}.seperator{margin:12px 0;border:1px dashed rgb(217,217,222)}.total-summary{background:#f0f8ff;border-radius:12px;padding:16px;margin-bottom:16px;transition:all .3s cubic-bezier(.4,0,.2,1)}.total-summary__row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.total-summary__label{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:#0b54c2;font-weight:var(--almatar-font-weight-regular)}.total-summary__label--highlight{font-weight:var(--almatar-font-weight-medium)}.total-summary__value{font-size:calc(13 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#0b54c2;display:flex;align-items:center}:host-context(#ltr) .total-summary__value{flex-direction:row-reverse}.total-summary__value{gap:2px}.total-summary__value--highlight{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);color:#0b54c2}.info-banner{display:flex;gap:8px;border:1px solid rgb(11,84,194);border-radius:12px;padding:14px;align-items:flex-start;transition:all .3s cubic-bezier(.4,0,.2,1)}.info-banner__icon{color:#0b54c2;flex-shrink:0;width:20px;height:20px}.info-banner__content{flex:1}.info-banner__text{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#0b54c2;margin:0 0 4px;font-weight:var(--almatar-font-weight-regular);line-height:16px}.info-banner__subtext{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;margin:0;line-height:1.4}.btn{flex:1;padding:12px 20px;border-radius:10px;font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);border:none;position:relative;overflow:hidden}.btn:before{content:\"\";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn:active:before{width:300px;height:300px}.btn--primary{background:#7c3aed;color:#fff}.btn--primary:hover{background:#6d28d9;transform:translateY(-1px);color:#fff;box-shadow:0 4px 12px #7c3aed4d}.btn--primary:active{transform:translateY(0)}.btn--secondary{background:#fff;color:#1b1a1f;border:1.5px solid rgb(229,231,235)}.btn--secondary:hover{background:#f9fafb;border-color:#d1d5db}.btn--secondary:active{background:#f3f4f6}.btn--danger{background:#fae3de;color:#dc2626;width:100%}.btn--danger:hover{color:#dc2626}.btn--danger:disabled{opacity:.7;cursor:not-allowed}.btn__spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.cancelled-status{display:flex;align-items:center;gap:16px;padding:20px;background:linear-gradient(135deg,#f0fdf5,#dcfce7);border:1px solid rgba(21,128,60,.2);border-radius:12px;width:100%;animation:fadeInUp .4s ease-out}.cancelled-status__icon{width:48px;height:48px;border-radius:50%;background:#15803c;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cancelled-status__icon svg{width:24px;height:24px;stroke:#fff}.cancelled-status__text{flex:1}.cancelled-status__text h4{font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:#15803c;margin:0 0 4px}.cancelled-status__text p{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#166534;margin:0;line-height:1.5}\n"] }]
+                        AlmatarHotelAutoCancellationRefundSummarySkeletonComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"refund-summary\">\n  <!-- Header -->\n  <!-- <div class=\"refund-summary__header\">\n    <button\n      type=\"button\"\n      class=\"refund-summary__header-btn\"\n      (click)=\"onKeepRoom()\"\n      aria-label=\"Close\"\n    >\n      <almatar-icon [name]=\"backArrow()\"></almatar-icon>\n    </button>\n\n    <div class=\"refund-summary__header-text\">\n      <h3 class=\"refund-summary__header-title\">\n        Cancel Booking Request\n      </h3>\n    </div>\n    <button\n      type=\"button\"\n      class=\"refund-summary__header-btn\"\n      (click)=\"onClose()\"\n      aria-label=\"Close\"\n    >\n      <almatar-icon [name]=\"'x-mark'\"></almatar-icon>\n    </button>\n  </div> -->\n\n  @if (isLoading()) {\n    <almatar-hotel-auto-cancellation-refund-summary-skeleton />\n  } @else if (error()) {\n    <div class=\"refund-summary__error\">\n      <div class=\"refund-summary__error-card\">\n        <div class=\"refund-summary__error-icon-wrapper\">\n          <svg\n            width=\"32\"\n            height=\"32\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M12 8V12M12 16H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </div>\n        <h4 class=\"refund-summary__error-title\">\n          Failed to load refund details. Please try again.\n        </h4>\n        <button\n          class=\"refund-summary__error-btn\"\n          type=\"button\"\n          (click)=\"loadRefundDetails()\"\n        >\n          <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M1 4V10H7M23 20V14H17M20.49 9C19.9828 7.56678 19.1209 6.2854 17.9845 5.27542C16.8482 4.26543 15.4745 3.55976 13.9917 3.22426C12.5089 2.88875 10.9652 2.93434 9.50481 3.35677C8.04437 3.77921 6.71475 4.56471 5.64 5.64L1 10M23 14L18.36 18.36C17.2853 19.4353 15.9556 20.2208 14.4952 20.6432C13.0348 21.0657 11.4911 21.1112 10.0083 20.7757C8.52547 20.4402 7.1518 19.7346 6.01547 18.7246C4.87913 17.7146 4.01717 16.4332 3.51 15\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n          Try Again\n        </button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"refund-summary__content\">\n      <h3 class=\"refund-summary__title\">\n        Refund summary\n      </h3>\n\n      <div class=\"package-cards\">\n        @for (pkg of packages(); track i; let i = $index) {\n          <div\n            class=\"package-card\"\n            [class.package-card--expanded]=\"isPackageExpanded(pkg.packageId)\"\n            [class.package-card--cancelled-before]=\"pkg.cancelledBefore\"\n          >\n            <div\n              class=\"package-card__header\"\n              (click)=\"togglePackageExpand(pkg.packageId)\"\n            >\n              <div class=\"package-card__info\">\n                <div class=\"package-card__title-row\">\n                  <h4 class=\"package-card__name\">{{ pkg.packageName }}</h4>\n                  @if (!pkg.cancelledBefore) {\n                    <span class=\"package-card__badge\">\n                      CURRENT CANCELLATION\n                    </span>\n                    <!-- <span class=\"package-card__date\">\n                      Today on\n                      {{ formatDate(pkg.cancellationDate) }}\n                    </span> -->\n                  } @else {\n                    <span\n                      class=\"package-card__badge package-card__badge--cancelled\"\n                    >\n                      PREVIOUS CANCELLATION\n                    </span>\n                    <!-- <span class=\"package-card__date\">\n                      Cancellation date:\n                      {{ formatDate(pkg.cancellationDate) }}\n                    </span> -->\n                  }\n                </div>\n              </div>\n              <div\n                class=\"package-card__expand-icon\"\n                [class.rotated]=\"isPackageExpanded(pkg.packageId)\"\n              >\n                <almatar-icon [name]=\"'chevron-down'\"></almatar-icon>\n              </div>\n            </div>\n\n            <!-- Rooms display -->\n            @if (pkg.rooms?.length) {\n              <div class=\"package-card__rooms-container\">\n                @for (\n                  group of groupRoomsByName(pkg.rooms);\n                  track i;\n                  let i = $index\n                ) {\n                  <div class=\"package-card__room-summary\">\n                    @if (group.count > 1) {\n                      <!-- Multiple rooms -->\n                      {{ group.count }}x {{ group.roomName }}\n                    } @else {\n                      <!-- Single room -->\n                      Room\n\n                      {{ i + 1 }}\n                      <span class=\"package-card__separator\">&bull;</span>\n                      {{ group.roomName }}\n                    }\n                    @if (group.nights) {\n                      <span class=\"package-card__separator\">&bull;</span>\n                      {{ group.nights }}\n                      @if (group.nights === 1) {\n                        night\n                      } @else {\n                        nights\n                      }\n                    }\n                    @if (group.adults) {\n                      <span class=\"package-card__separator\">&bull;</span>\n                      {{ group.adults }}\n                      @if (group.adults === 1) {\n                        Adult\n                      } @else {\n                        Adults\n                      }\n                    }\n                    @if (group.children) {\n                      <span class=\"package-card__separator\">&bull;</span>\n                      {{ group.children }}\n                      @if (group.children === 1) {\n                        Child\n                      } @else {\n                        Children\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            }\n\n            @if (!pkg.cancelledBefore) {\n              <span class=\"package-card__date\">\n                Today on\n                {{ formatDate(pkg.cancellationDate) }}\n              </span>\n            } @else {\n              <span class=\"package-card__date\">\n                Cancellation date:\n                {{ formatDate(pkg.cancellationDate) }}\n              </span>\n            }\n\n            <!-- Room Amount Row with expand -->\n\n            <!-- Expandable content: Rooms, Date, and Financial breakdown -->\n            <div\n              class=\"package-card__expandable-content\"\n              [class.expanded]=\"isPackageExpanded(pkg.packageId)\"\n            >\n              <div\n                class=\"package-card__row package-card__row--clickable\"\n                (click)=\"\n                  toggleAmountExpand(pkg.packageId); $event.stopPropagation()\n                \"\n              >\n                @if (pkg?.rooms?.length > 1) {\n                  <span\n                    class=\"package-card__label package-card__label--dark-light\"\n                    >Rooms amount</span\n                  >\n                } @else {\n                  <span\n                    class=\"package-card__label package-card__label--dark-light\"\n                    >Room amount</span\n                  >\n                }\n                <span class=\"package-card__value package-card__value--regular\">\n                  @if (\n                    pkg.fee > 0 || pkg.serviceFee > 0 || surchargeAmount() > 0\n                  ) {\n                    <div\n                      class=\"package-card__expand-icon\"\n                      [class.rotated]=\"isAmountExpanded(pkg.packageId)\"\n                    >\n                      <almatar-icon [name]=\"'chevron-down'\"></almatar-icon>\n                    </div>\n                  }\n\n                  {{\n                    pkg.amount | exchange_round\n                  }}\n                  {{ currentCurrency()?.code }}\n                </span>\n              </div>\n\n              <!-- Expanded content: Cancellation fee and Service fee -->\n              <div\n                class=\"package-card__expanded-content\"\n                [class.expanded]=\"\n                  isAmountExpanded(pkg.packageId) &&\n                  (pkg.fee > 0 || pkg.serviceFee > 0)\n                \"\n              >\n                @if (pkg.fee > 0) {\n                  <div class=\"package-card__row\">\n                    <span class=\"package-card__label\">Cancellation fee</span>\n                    <span\n                      class=\"package-card__value package-card__value--gray package-card__value--regular\"\n                    >\n                      -\n                      {{\n                        pkg.fee | exchange_round\n                      }}\n                      {{ currentCurrency()?.code }}\n                    </span>\n                  </div>\n                }\n\n                @if (pkg.serviceFee > 0) {\n                  <div class=\"package-card__row\">\n                    <span class=\"package-card__label\">Service Fee</span>\n                    <span\n                      class=\"package-card__value package-card__value--gray package-card__value--regular\"\n                    >\n                      -\n                      {{\n                        pkg.serviceFee | exchange_round\n                      }}\n                      {{ currentCurrency()?.code }}\n                    </span>\n                  </div>\n                }\n\n                @if (surchargeAmount() > 0) {\n                  <div class=\"package-card__row\">\n                    <span class=\"package-card__label\">\n                      Surcharge (2.5%)\n                    </span>\n                    <span\n                      class=\"package-card__value package-card__value--gray package-card__value--regular\"\n                    >\n                      -\n                      {{\n                        surchargeAmount() | exchange_round\n                      }}\n                      {{ currentCurrency()?.code }}\n                    </span>\n                  </div>\n                }\n              </div>\n              <!-- Add-Ons Refund Section -->\n              @if (giftsDetails().length > 0 && i === packages()?.length - 1) {\n                <div class=\"addons-refund\">\n                  <span\n                    class=\"package-card__label package-card__label--dark-light\"\n                  >\n                    Add-Ons Refund\n                  </span>\n                  <div class=\"addons-refund__list\">\n                    @for (gift of giftsDetails(); track $index) {\n                      <div class=\"package-card__row\">\n                        <span class=\"package-card__label\">{{ gift.name }}</span>\n                        <span\n                          class=\"package-card__value package-card__value--gray package-card__value--regular\"\n                        >\n                          {{\n                            gift.toBeRefundedAmount | exchange_round\n                          }}\n                          {{ currentCurrency()?.code }}\n                          <!-- @if (!gift.refundable) {\n                            <span> - </span>\n                          } -->\n                        </span>\n                      </div>\n                    }\n                  </div>\n\n                  <!-- @if (giftsHasRefundableEntity()) {\n                    <div class=\"addons-refund__notice\">\n                      <svg\n                        width=\"18\"\n                        height=\"18\"\n                        viewBox=\"0 0 20 20\"\n                        fill=\"none\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                      >\n                        <circle\n                          cx=\"10\"\n                          cy=\"10\"\n                          r=\"9\"\n                          stroke=\"currentColor\"\n                          stroke-width=\"1.5\"\n                        />\n                        <path\n                          d=\"M10 9V14\"\n                          stroke=\"currentColor\"\n                          stroke-width=\"1.5\"\n                          stroke-linecap=\"round\"\n                        />\n                        <circle cx=\"10\" cy=\"6.5\" r=\"0.75\" fill=\"currentColor\" />\n                      </svg>\n                      <span class=\"addons-refund__notice-text\">\n                        Your add-on service/s refund will be processed separately by our Customer Service team shortly.\n                      </span>\n                    </div>\n                  } -->\n                </div>\n              }\n            </div>\n            <!-- End expandable content -->\n\n            <!-- You will get back row - ALWAYS VISIBLE -->\n            <div class=\"package-card__details\">\n              @if (pkg.cancelledBefore) {\n                <div class=\"package-card__row package-card__row--total\">\n                  <span class=\"package-card__label package-card__label--dark\">Refunded amount</span>\n                  <span\n                    class=\"package-card__value package-card__value--highlight\"\n                  >\n                    {{\n                      pkg.refund | exchange_round\n                    }}\n                    {{ currentCurrency()?.code }}\n                  </span>\n                </div>\n              } @else {\n                <div class=\"package-card__row package-card__row--total\">\n                  <span class=\"package-card__label package-card__label--dark\">You will get back</span>\n                  <span\n                    class=\"package-card__value package-card__value--highlight package-card__value--regular\"\n                  >\n                    {{\n                      pkg.refund | exchange_round\n                    }}\n                    {{ currentCurrency()?.code }}\n                  </span>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n      <hr class=\"seperator\" />\n\n      <div class=\"total-summary\">\n        <div class=\"total-summary__row\">\n          <span class=\"total-summary__label\">Total paid</span>\n          <span class=\"total-summary__value\">\n            {{\n              totalPaid() | exchange_round\n            }}\n            {{ currentCurrency()?.code }}\n          </span>\n        </div>\n\n        @if (alreadyRefunded()) {\n          <div class=\"total-summary__row\">\n            <span class=\"total-summary__label\">Rooms Refunded</span>\n            <span class=\"total-summary__value\">\n              {{\n                alreadyRefunded() | exchange_round\n              }}\n              {{ currentCurrency()?.code }}\n            </span>\n          </div>\n        }\n\n        <div class=\"total-summary__row total-summary__row--highlight\">\n          <div class=\"total-summary__label total-summary__label--highlight\">\n            <span>\n              You'll get back for\n              {{ currentRefundRoomsNumber() }}\n              {{\n                currentLang() !== 'ar'\n                  ? currentRefundRoomsNumber() > 1\n                    ? ('Rooms')\n                    : ('Room')\n                  : ''\n              }}\n            </span>\n          </div>\n          <span class=\"total-summary__value total-summary__value--highlight\">\n            {{\n              totalRefund() | exchange_round\n            }}\n            {{ currentCurrency()?.code }}\n          </span>\n        </div>\n      </div>\n\n      <div class=\"info-banner\">\n        <div class=\"info-banner__icon\">\n          <svg\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 20 20\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M10 2L3 5V9C3 13.55 6.24 17.74 10 18.5C13.76 17.74 17 13.55 17 9V5L10 2Z\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n            <path\n              d=\"M7 10L9 12L13 8\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </div>\n        <div class=\"info-banner__content\">\n          @if (paymentMethod() === 'CH') {\n            <p class=\"info-banner__text\">\n              Your refund is instant from our side, your bank may take up to 15 business days to reflect it.\n            </p>\n          } @else if (paymentMethod() === 'TB') {\n            <p class=\"info-banner__text\">\n              Your refund is instant from our side, Tabby may take 5-7 business days to reflect it.\n            </p>\n          } @else if (paymentMethod() === 'TM') {\n            <p class=\"info-banner__text\">\n              Your refund is instant from our side, Tamara may take up to 10 business days to reflect it.\n            </p>\n          } @else {\n            <p class=\"info-banner__text\">\n              Your refund is instant from our side, your loyalty program may take some time to reflect it based on their policy.\n            </p>\n          }\n\n          <p class=\"info-banner__subtext\">\n            You can select refund option in the next step\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"refund-summary__footer\">\n      @if (allPackagesCancelled()) {\n        <div class=\"cancelled-status\">\n          <div class=\"cancelled-status__icon\">\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle\n                cx=\"12\"\n                cy=\"12\"\n                r=\"9\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n              />\n              <path\n                d=\"M9 12L11 14L15 10\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </div>\n          <div class=\"cancelled-status__text\">\n            <h4>All Rooms Cancelled</h4>\n            <p>All packages in this booking have been cancelled</p>\n          </div>\n        </div>\n      } @else {\n        @if (totalRefund()) {\n          <button\n            class=\"btn btn--secondary\"\n            type=\"button\"\n            (click)=\"onKeepRoom()\"\n          >\n            Keep Room\n          </button>\n          <button\n            class=\"btn btn--primary\"\n            type=\"button\"\n            (click)=\"onSelectRefundOption()\"\n          >\n            Select refund option\n          </button>\n        } @else {\n          <button\n            class=\"btn btn--danger\"\n            type=\"button\"\n            [disabled]=\"isCancelLoading()\"\n            (click)=\"submitData()\"\n          >\n            @if (isCancelLoading()) {\n              <span class=\"btn__spinner\"></span>\n            } @else {\n              Cancel Booking\n            }\n          </button>\n        }\n      }\n    </div>\n  }\n</div>\n\n<!-- Confirm Modal -->\n@if (showConfirmModalFlag()) {\n  <div\n    almatar-confirm-modal\n    [Message]=\"'Your request has been submitted. Our customer service team will contact you shortly.'\"\n    (cancelEvent)=\"closeAllModals()\"\n    (confirmEvent)=\"closeAllModals()\"\n  ></div>\n}\n\n<!-- Error Modal -->\n@if (showErrorModalFlag()) {\n  <div\n    almatar-manage-booking-failed-modal\n    [errorMessage]=\"hotelManageError()\"\n    (cancelEvent)=\"closeAllModals()\"\n    (confirmEvent)=\"closeAllModals()\"\n  ></div>\n}\n", styles: [".refund-summary{display:flex;flex-direction:column;height:100%}.refund-summary__notice{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:8px;font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:400;margin-top:16px}.refund-summary__notice svg{flex-shrink:0;width:18px;height:18px;margin-top:1px}.refund-summary__notice--info{background:var(--almatar-info-surface, #eaf2ff);border:1px solid var(--almatar-info-border, #b9d6ff);color:var(--almatar-info-text, #1a56db);border-radius:12px}.refund-summary__notice--info svg{color:var(--almatar-info-icon, #1a56db)}.refund-summary__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff;border-bottom:1px solid rgb(229,231,235)}.refund-summary__header-text{flex:1;text-align:center}.refund-summary__header-title{font-size:calc(24 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#1b1a1f;margin:0}.refund-summary__header-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;cursor:pointer;color:#7c3aed;padding:0}.refund-summary__header-btn svg{width:20px;height:20px}.refund-summary__header-btn:hover{opacity:.7}.refund-summary__content{flex:1;overflow-y:auto;padding:16px;background-color:#fff}.refund-summary__title{font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:#1b1a1f;margin-bottom:16px}.refund-summary__error{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 20px;background:linear-gradient(180deg,#fef2f280,#fff)}.refund-summary__error-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 24px;background:#fff;border-radius:16px;box-shadow:0 1px 3px #0000000a,0 4px 12px #0000000f;max-width:320px;width:100%;animation:fadeInUp .4s ease-out}.refund-summary__error-icon-wrapper{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#fee2e2,#fecaca);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:#dc2626;animation:pulse 2s ease-in-out infinite}.refund-summary__error-title{font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#374151;margin:0 0 24px;line-height:1.5}.refund-summary__error-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;border:none;border-radius:10px;font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #7c3aed40}.refund-summary__error-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px #7c3aed59}.refund-summary__error-btn:active{transform:translateY(0)}.refund-summary__error-btn svg{transition:transform .3s ease}.refund-summary__error-btn:hover svg{transform:rotate(180deg)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.refund-summary__footer{display:flex;gap:12px;padding:16px 20px;background:#fff;border-top:1px solid rgb(229,231,235)}.package-cards{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}.package-card{background:#fff;border:1px solid rgb(21,128,60);border-radius:12px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);padding:16px}.package-card__header{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer}.package-card__info{flex:1;min-width:0}.package-card__title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}.package-card__name{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#000;line-height:20px;margin:0}.package-card__badge{font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);color:#15803c;background:#f0fdf5;padding:6px 8px;border-radius:999px;text-transform:uppercase;flex-shrink:0}.package-card__badge--cancelled{color:#92939e;background:#fff;border:1px solid rgb(217,217,222)}.package-card__header-expand-icon{color:currentColor;transition:transform .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.package-card__header-expand-icon.rotated{transform:rotate(180deg)}.package-card__expandable-content{opacity:0;max-height:0;transform:translateY(-10px);transition:opacity .3s cubic-bezier(.4,0,.2,1),max-height .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1),margin-top .3s cubic-bezier(.4,0,.2,1);overflow:hidden;margin-top:0}.package-card__expandable-content.expanded{opacity:1;max-height:1000px;transform:translateY(0);margin-top:12px}.package-card__rooms-container{display:flex;flex-direction:column;gap:4px;margin:8px 0 4px}.package-card__rooms{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.package-card__room{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:16px;border:1px solid rgb(217,217,222);background:#fff}.package-card__room-name{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#1b1a1f;display:flex;align-items:center;flex-wrap:wrap;gap:0;margin:0}.package-card__room-basis{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#6b7280}.package-card__room-summary{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#1b1a1f;display:flex;align-items:center;flex-wrap:wrap;gap:0}.package-card__separator{margin:0 4px;color:#1f2937;font-weight:var(--almatar-font-weight-regular)}.package-card__date{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#6b7280;margin-bottom:12px}.package-card__details{cursor:pointer;overflow:hidden}.package-card__expanded-content{opacity:0;max-height:0;transform:translateY(-10px);transition:opacity .3s cubic-bezier(.4,0,.2,1),max-height .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1);overflow:hidden;margin-bottom:0}.package-card__expanded-content.expanded{opacity:1;max-height:500px;transform:translateY(0);margin-bottom:0}.package-card__row{display:flex;justify-content:space-between;align-items:center;transition:all .2s ease;margin-bottom:4px}.package-card__row--clickable{cursor:pointer}.package-card__row--total{margin-top:4px;font-weight:var(--almatar-font-weight-semibold);margin-bottom:0}.package-card__row:last-child{margin-bottom:0}.package-card__label{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583;font-weight:var(--almatar-font-weight-regular)}.package-card__label--dark{color:#1b1a1f;font-weight:var(--almatar-font-weight-medium)}.package-card__label--dark-light{color:#1b1a1f}.package-card__value{font-size:calc(13 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#1b1a1f;display:flex;align-items:center}:host-context(#ltr) .package-card__value{flex-direction:row-reverse}.package-card__value{gap:2px}.package-card__value--gray{color:#747583}.package-card__value--highlight{font-weight:var(--almatar-font-weight-medium);font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f}.package-card__value--regular{font-weight:var(--almatar-font-weight-regular)}.package-card__expand-icon{color:currentColor;transition:transform .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;width:16px;height:16px}.package-card__expand-icon.rotated{transform:rotate(180deg)}.package-card--cancelled-before{border:1px solid transparent;background-color:#f7f7f8}.package-card--cancelled-before .package-card__label.package-card__label--dark,.package-card--cancelled-before .package-card__value.package-card__value--highlight{color:#15803c}.package-card--expanded .package-card__header{margin-bottom:0}.addons-refund{margin-bottom:4px}.addons-refund__title{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:#1b1a1f;margin:0 0 12px}.addons-refund__list{display:flex;flex-direction:column}.addons-refund__item{display:flex;justify-content:space-between;align-items:center}.addons-refund__name{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#747583}.addons-refund__value{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#747583;display:flex;align-items:center}:host-context(#ltr) .addons-refund__value{flex-direction:row-reverse}.addons-refund__value{gap:2px}.addons-refund__notice{display:flex;align-items:center;gap:8px;padding:12px;border-radius:12px;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:400;margin-top:8px;background:#f7f7f8;border:1px solid rgb(217,217,222);color:#1b1a1f}.addons-refund__notice svg{flex-shrink:0;width:18px;height:18px;margin-top:1px;color:#1b1a1f}.addons-refund__notice-text{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#1b1a1f;margin:0;line-height:1.5}.seperator{margin:12px 0;border:1px dashed rgb(217,217,222)}.total-summary{background:#f0f8ff;border-radius:12px;padding:16px;margin-bottom:16px;transition:all .3s cubic-bezier(.4,0,.2,1)}.total-summary__row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.total-summary__label{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:#0b54c2;font-weight:var(--almatar-font-weight-regular)}.total-summary__label--highlight{font-weight:var(--almatar-font-weight-medium)}.total-summary__value{font-size:calc(13 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#0b54c2;display:flex;align-items:center}:host-context(#ltr) .total-summary__value{flex-direction:row-reverse}.total-summary__value{gap:2px}.total-summary__value--highlight{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);color:#0b54c2}.info-banner{display:flex;gap:8px;border:1px solid rgb(11,84,194);border-radius:12px;padding:14px;align-items:flex-start;transition:all .3s cubic-bezier(.4,0,.2,1)}.info-banner__icon{color:#0b54c2;flex-shrink:0;width:20px;height:20px}.info-banner__content{flex:1}.info-banner__text{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#0b54c2;margin:0 0 4px;font-weight:var(--almatar-font-weight-regular);line-height:16px}.info-banner__subtext{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;margin:0;line-height:1.4}.btn{flex:1;padding:12px 20px;border-radius:10px;font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);border:none;position:relative;overflow:hidden}.btn:before{content:\"\";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn:active:before{width:300px;height:300px}.btn--primary{background:#7c3aed;color:#fff}.btn--primary:hover{background:#6d28d9;transform:translateY(-1px);color:#fff;box-shadow:0 4px 12px #7c3aed4d}.btn--primary:active{transform:translateY(0)}.btn--secondary{background:#fff;color:#1b1a1f;border:1.5px solid rgb(229,231,235)}.btn--secondary:hover{background:#f9fafb;border-color:#d1d5db}.btn--secondary:active{background:#f3f4f6}.btn--danger{background:#fae3de;color:#dc2626;width:100%}.btn--danger:hover{color:#dc2626}.btn--danger:disabled{opacity:.7;cursor:not-allowed}.btn__spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.cancelled-status{display:flex;align-items:center;gap:16px;padding:20px;background:linear-gradient(135deg,#f0fdf5,#dcfce7);border:1px solid rgba(21,128,60,.2);border-radius:12px;width:100%;animation:fadeInUp .4s ease-out}.cancelled-status__icon{width:48px;height:48px;border-radius:50%;background:#15803c;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cancelled-status__icon svg{width:24px;height:24px;stroke:#fff}.cancelled-status__text{flex:1}.cancelled-status__text h4{font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:#15803c;margin:0 0 4px}.cancelled-status__text p{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#166534;margin:0;line-height:1.5}\n"] }]
         }], ctorParameters: () => [] });
 
-// Flight refund details interfaces
-var PaymentGatewayCode;
-(function (PaymentGatewayCode) {
-    PaymentGatewayCode["MADA"] = "MADA";
-    PaymentGatewayCode["VISA"] = "VISA";
-    PaymentGatewayCode["MASTERCARD"] = "MASTERCARD";
-    PaymentGatewayCode["AMEX"] = "AMEX";
-    PaymentGatewayCode["APPLE_PAY"] = "APPLE_PAY";
-    PaymentGatewayCode["AlRajhiMokafaa"] = "RAJHI";
-    PaymentGatewayCode["Qitaf"] = "QITAF";
-    PaymentGatewayCode["Wala"] = "WALA";
-    PaymentGatewayCode["Tamara"] = "TM";
-    PaymentGatewayCode["Tabby"] = "TB";
-    PaymentGatewayCode["Stc"] = "STC";
-    PaymentGatewayCode["CH"] = "CH";
-    PaymentGatewayCode["HP"] = "HP";
-    PaymentGatewayCode["MF"] = "MF";
-    PaymentGatewayCode["WT"] = "WT";
-    PaymentGatewayCode["TM"] = "TM";
-    PaymentGatewayCode["TB"] = "TB";
-    PaymentGatewayCode["RAJHI"] = "RAJHI";
-    PaymentGatewayCode["STC"] = "STC";
-    PaymentGatewayCode["PPB"] = "PPB";
-    PaymentGatewayCode["PP"] = "PP";
-    PaymentGatewayCode["TAMAM"] = "TAMAM";
-    PaymentGatewayCode["QITAF"] = "QITAF";
-    PaymentGatewayCode["WALA"] = "WALA";
-})(PaymentGatewayCode || (PaymentGatewayCode = {}));
-/** Labels for `paymentMethodCustomerUsed` gateway codes returned by the backend. */
-const PAYMENT_GATEWAY_LABELS = {
-    CH: { en: 'Card', ar: 'البطاقة' },
-    HP: { en: 'Hyperpay', ar: 'هايبر باي' },
-    MF: { en: 'My Fatoora', ar: 'ماي فاتورة' },
-    WT: { en: 'Wire Transfer', ar: 'تحويل بنكي' },
-    STC: { en: 'STC', ar: 'STC' },
-    TM: { en: 'Tamara', ar: 'تمارا' },
-    TB: { en: 'Tabby', ar: 'تابي' },
-    RAJHI: { en: 'Al Rajhi Mokafaa', ar: 'الراجحي مكافآت' },
-    PPB: { en: 'Customer Balance', ar: 'رصيد العميل' },
-    PP: { en: 'Postpay', ar: 'بوست باي' },
-    TAMAM: { en: 'Tamam', ar: 'تمام' },
-    QITAF: { en: 'Qitaf', ar: 'قطاف' },
-    MIS: { en: 'MIS Pay', ar: 'MIS Pay' },
-    MATAR: { en: 'Almatar Pay', ar: 'المطار باي' },
-    CB: { en: 'Company Balance', ar: 'رصيد الشركة' },
-    ANB: { en: 'ANB', ar: 'العربي الوطني' },
-    AMWAL: { en: 'Amwal', ar: 'أموال' },
-    WALA: { en: 'Wala', ar: 'ولاء' },
-    YGG: { en: 'YGG', ar: 'YGG' },
-};
-/** Gateway codes that refund to an installment plan rather than the original card. */
-const INSTALLMENT_GATEWAY_CODES = ['TM', 'TB'];
-/** Gateway codes that refund to a loyalty-program account rather than the original card. */
-const LOYALTY_GATEWAY_CODES = ['RAJHI', 'QITAF', 'STC', 'WALA'];
-/**
- * Internal payment-processor/gateway names, never customer-recognizable
- * brands — must not be surfaced verbatim (e.g. a card refund processed
- * through Hyperpay must read as "Card"/"Original Payment Method", never
- * "Hyperpay"). Callers fall back to a generic label whenever the normalized
- * lookup returns ''.
- */
-const INTERNAL_GATEWAY_CODES = ['HP', 'MF', 'WT', 'PPB', 'PP', 'TAMAM'];
-/**
- * Result/confirmation-screen-only override: these gateways process card
- * payments through Mada — shown specifically as "Mada Card" instead of
- * falling back to the generic "Original Payment Method" label used
- * everywhere else `INTERNAL_GATEWAY_CODES` applies.
- */
-const MADA_GATEWAY_CODES = ['HP', 'CH'];
-/**
- * Normalizes a raw payment gateway code from the backend to a standardized code.
- * Handles both uppercase codes (e.g. 'HP') and labels (e.g. 'Hyperpay').
- */
-function normalizePaymentGatewayCode(raw) {
-    if (!raw)
-        return '';
-    const needle = raw.trim().toLowerCase();
-    const codes = Object.keys(PAYMENT_GATEWAY_LABELS);
-    const byCode = codes.find((code) => code.toLowerCase() === needle);
-    if (byCode)
-        return byCode;
-    const byLabel = codes.find((code) => PAYMENT_GATEWAY_LABELS[code].en.toLowerCase() === needle ||
-        PAYMENT_GATEWAY_LABELS[code].ar.toLowerCase() === needle);
-    return byLabel ? byLabel : '';
-}
-
 /**
  * Hotel Refund-method selection screen ("You will get back … / Wallet / Card /
  * Split Refund"). Takes the raw refund snapshot (`data`) as its single
@@ -4661,13 +4633,13 @@ class HotelRefundMethodSelectorComponent {
         this.paymentBadgeKey = computed(() => {
             if (this.isInstallmentMethod()) {
                 return this.gatewayCode() === PaymentGatewayCode.Tamara
-                    ? '7-10 business days'
-                    : '3-5 business days';
+                    ? 'Up to 10 business days'
+                    : 'From 5-7 business days';
             }
             if (this.showAsLoyalty()) {
-                return 'Instant';
+                return 'Loyalty Program Policy';
             }
-            return '5-7 business days';
+            return 'Up to 15 business days, bank policy ';
         });
         /**
          * Display label for `paymentMethodCustomerUsed`, localized. `loyaltyPaymentType`
@@ -4842,11 +4814,10 @@ class HotelRefundMethodSelectorComponent {
      */
     walletOrLoyaltyLabel(d, fallbackKey = 'Almatar Wallet') {
         const loyalty = d?.loyaltyPaymentType;
+        console.log("loyalty", loyalty);
         const entry = loyalty ? PAYMENT_GATEWAY_LABELS[loyalty] : undefined;
         if (entry) {
-            return this.translateService.currentLang?.startsWith('ar')
-                ? entry.ar
-                : entry.en;
+            return entry.en;
         }
         return fallbackKey;
     }
@@ -4895,11 +4866,11 @@ class HotelRefundMethodSelectorComponent {
         return 'Returned to your original payment method';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HotelRefundMethodSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: HotelRefundMethodSelectorComponent, isStandalone: true, selector: "almatar-hotel-refund-method-selector", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, bookingId: { classPropertyName: "bookingId", publicName: "bookingId", isSignal: false, isRequired: false, transformFunction: null }, currencyObj: { classPropertyName: "currencyObj", publicName: "currencyObj", isSignal: false, isRequired: false, transformFunction: null }, refundMethod: { classPropertyName: "refundMethod", publicName: "refundMethod", isSignal: false, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: false, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, showLoyaltyPointsNote: { classPropertyName: "showLoyaltyPointsNote", publicName: "showLoyaltyPointsNote", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", backRequested: "backRequested", methodSelected: "methodSelected" }, ngImport: i0, template: "<div class=\"refund-method-selector\">\n  <div class=\"refund-method-selector__header\">\n    @if (showBack) {\n      <button\n        type=\"button\"\n        class=\"refund-method-selector__close\"\n        (click)=\"back()\"\n        aria-label=\"Back\"\n      >\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path\n            d=\"M19 12H5M12 19l-7-7 7-7\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    }\n    <div class=\"refund-method-selector__header-text\">\n      <h3 class=\"refund-method-selector__title\">\n        Refund Method\n      </h3>\n      <span class=\"refund-method-selector__sub\"\n        >Booking ID #{{\n          displayBookingId()\n        }}</span\n      >\n    </div>\n    <!-- @if (showCloseButton()) {\n      <button\n        type=\"button\"\n        class=\"refund-method-selector__close\"\n        (click)=\"close()\"\n        aria-label=\"Close\"\n      >\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 18L18 6M6 6L18 18\"\n            stroke=\"#1B1A1F\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    } -->\n  </div>\n\n  <div class=\"refund-method-selector__amount\">\n    <span>You will get back</span>\n    <strong>\n      {{ fmtAmount(totalRefundAmount()) }}\n    </strong>\n  </div>\n\n  <!-- Wallet option -->\n  @if (showWallet()) {\n    <button\n      type=\"button\"\n      class=\"refund-method-selector__option\"\n      [class.refund-method-selector__option--active]=\"\n        refundMethod === 'wallet' && !hasSingleOption()\n      \"\n      (click)=\"select('wallet')\"\n    >\n      <span class=\"refund-method-selector__icon\">\n        <svg\n          width=\"22\"\n          height=\"24\"\n          viewBox=\"0 0 22 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <g clip-path=\"url(#clip0_25478_1880)\">\n            <path\n              d=\"M2.67676 20.8852C1.74902 20.8852 1.04704 20.6533 0.570801 20.1894C0.100749 19.7256 -0.134277 19.0359 -0.134277 18.1206V8.51852C-0.134277 7.77015 0.0265299 7.1764 0.348145 6.73727C0.675944 6.29815 1.18929 5.97344 1.88818 5.76315L13.7817 2.3027C14.4559 2.11097 15.0589 2.06149 15.5908 2.15427C16.1289 2.24704 16.5495 2.49443 16.8525 2.89645C17.1618 3.29229 17.3164 3.85511 17.3164 4.58493V6.25485L15.8042 6.38473V4.45505C15.8042 4.04684 15.6898 3.76543 15.4609 3.61081C15.2321 3.45619 14.895 3.44382 14.4497 3.5737L7.27832 5.55905C7.19173 5.5776 7.15153 5.61471 7.15771 5.67038C7.1639 5.71986 7.20719 5.7446 7.2876 5.7446H17.5947C18.5286 5.7446 19.2275 5.97962 19.6914 6.44968C20.1615 6.91354 20.3965 7.60316 20.3965 8.51852V10.8564H18.8936V8.60202C18.8936 8.15671 18.7791 7.81963 18.5503 7.59079C18.3215 7.36195 17.9937 7.24753 17.5669 7.24753H2.69531C2.26855 7.24753 1.94076 7.36195 1.71191 7.59079C1.48926 7.81963 1.37793 8.15671 1.37793 8.60202V18.0371C1.37793 18.4824 1.48926 18.8164 1.71191 19.039C1.94076 19.2679 2.26855 19.3823 2.69531 19.3823H17.5669C17.9937 19.3823 18.3215 19.2679 18.5503 19.039C18.7791 18.8164 18.8936 18.4824 18.8936 18.0371V15.4394H20.3965V18.1206C20.3965 19.0359 20.1615 19.7256 19.6914 20.1894C19.2275 20.6533 18.5286 20.8852 17.5947 20.8852H2.67676ZM16.769 14.2334C16.5093 14.2334 16.2866 14.1437 16.1011 13.9643C15.9217 13.7788 15.832 13.5561 15.832 13.2964C15.832 13.0366 15.9217 12.817 16.1011 12.6377C16.2866 12.4521 16.5093 12.3593 16.769 12.3593C17.0288 12.3593 17.2484 12.4521 17.4277 12.6377C17.6133 12.817 17.7061 13.0366 17.7061 13.2964C17.7061 13.5561 17.6133 13.7788 17.4277 13.9643C17.2484 14.1437 17.0288 14.2334 16.769 14.2334ZM16.6763 16.2187C15.7424 16.2187 14.9878 15.9775 14.4126 15.4951C13.8374 15.0065 13.5498 14.2767 13.5498 13.3056C13.5498 12.3346 13.8374 11.6079 14.4126 11.1255C14.9878 10.643 15.7424 10.4018 16.6763 10.4018H20.1089C20.6903 10.4018 21.1479 10.5812 21.4819 10.9399C21.8221 11.2986 21.9922 11.7439 21.9922 12.2758V14.3354C21.9922 14.8673 21.8221 15.3157 21.4819 15.6806C21.1479 16.0394 20.6903 16.2187 20.1089 16.2187H16.6763ZM16.769 14.9756H19.7842C20.1058 14.9756 20.347 14.8921 20.5078 14.7251C20.6748 14.5519 20.7583 14.3138 20.7583 14.0107V12.6006C20.7583 12.2975 20.6748 12.0625 20.5078 11.8955C20.347 11.7223 20.1058 11.6357 19.7842 11.6357H16.769C16.1196 11.6357 15.6372 11.7841 15.3218 12.081C15.0125 12.3779 14.8579 12.7861 14.8579 13.3056C14.8579 13.8252 15.0125 14.2334 15.3218 14.5302C15.6372 14.8271 16.1196 14.9756 16.769 14.9756Z\"\n              fill=\"black\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0_25478_1880\">\n              <rect width=\"24\" height=\"24\" fill=\"white\" />\n            </clipPath>\n          </defs>\n        </svg>\n      </span>\n      <span class=\"refund-method-selector__body\">\n        <span class=\"refund-method-selector__name\">{{ walletLabel() }}</span>\n        <span class=\"refund-method-selector__desc\">Usable for future bookings</span>\n        <span\n          class=\"refund-method-selector__badge refund-method-selector__badge--instant\"\n        >\n          <svg\n            width=\"12\"\n            height=\"9\"\n            viewBox=\"0 0 12 9\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M7.31818 0C8.42727 0 9.49093 0.440583 10.2752 1.22483C11.0594 2.00907 11.5 3.07273 11.5 4.18182C11.5 5.2909 11.0594 6.35457 10.2752 7.13881C9.49093 7.92305 8.42727 8.36364 7.31818 8.36364C6.20909 8.36364 5.14543 7.92305 4.36119 7.13881C3.57695 6.35457 3.13636 5.2909 3.13636 4.18182C3.13636 3.07273 3.57695 2.00907 4.36119 1.22483C5.14543 0.440583 6.20909 0 7.31818 0ZM7.31818 1.04545C6.48637 1.04545 5.68862 1.37589 5.10044 1.96407C4.51226 2.55226 4.18182 3.35 4.18182 4.18182C4.18182 5.01363 4.51226 5.81138 5.10044 6.39956C5.68862 6.98774 6.48637 7.31818 7.31818 7.31818C8.15 7.31818 8.94774 6.98774 9.53593 6.39956C10.1241 5.81138 10.4545 5.01363 10.4545 4.18182C10.4545 3.35 10.1241 2.55226 9.53593 1.96407C8.94774 1.37589 8.15 1.04545 7.31818 1.04545ZM6.79545 2.09091H7.57955V4.06682L8.7975 5.28477L8.24341 5.83886L6.79545 4.39091V2.09091ZM0.522727 7.31818C0.384091 7.31818 0.251134 7.26311 0.153103 7.16508C0.0550729 7.06705 0 6.93409 0 6.79545C0 6.65682 0.0550729 6.52386 0.153103 6.42583C0.251134 6.3278 0.384091 6.27273 0.522727 6.27273H2.52477C2.68682 6.64386 2.89591 6.99409 3.13636 7.31818H0.522727ZM1.04545 4.70455C0.906819 4.70455 0.773861 4.64947 0.67583 4.55144C0.5778 4.45341 0.522727 4.32045 0.522727 4.18182C0.522727 4.04318 0.5778 3.91022 0.67583 3.81219C0.773861 3.71416 0.906819 3.65909 1.04545 3.65909H2.11705L2.09091 4.18182L2.11705 4.70455H1.04545ZM1.56818 2.09091C1.42955 2.09091 1.29659 2.03584 1.19856 1.93781C1.10053 1.83978 1.04545 1.70682 1.04545 1.56818C1.04545 1.42955 1.10053 1.29659 1.19856 1.19856C1.29659 1.10053 1.42955 1.04545 1.56818 1.04545H3.13636C2.89591 1.36955 2.68682 1.71977 2.52477 2.09091H1.56818Z\"\n              fill=\"#15803C\"\n            />\n          </svg>\n          Instant\n        </span>\n      </span>\n      @if (!hasSingleOption()) {\n        <span class=\"refund-method-selector__radio\"></span>\n      }\n    </button>\n  }\n\n  <!-- Original Payment Method option -->\n  @if (showOriginal()) {\n    <button\n      type=\"button\"\n      class=\"refund-method-selector__option\"\n      [class.refund-method-selector__option--active]=\"\n        refundMethod === 'originalPaymentMethod' && !hasSingleOption()\n      \"\n      (click)=\"select('originalPaymentMethod')\"\n    >\n      <span class=\"refund-method-selector__icon\">\n        @if (isSpecialGatewayMethod()) {\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M21 12a2.25 2.25 0 0 0-2.25-2.25H15a3 3 0 1 1-6 0H5.25A2.25 2.25 0 0 0 3 12m18 0v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6m18 0V9M3 12V9m18 0a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 9m18 0V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v3\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"cardIcon\"></ng-container>\n        }\n        <ng-template #cardIcon>\n          <svg\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M2.25 8.25H21.75M2.25 9H21.75M5.25 14.25H11.25M5.25 16.5H8.25M4.5 19.5H19.5C20.0967 19.5 20.669 19.2629 21.091 18.841C21.5129 18.419 21.75 17.8467 21.75 17.25V6.75C21.75 6.15326 21.5129 5.58097 21.091 5.15901C20.669 4.73705 20.0967 4.5 19.5 4.5H4.5C3.90326 4.5 3.33097 4.73705 2.90901 5.15901C2.48705 5.58097 2.25 6.15326 2.25 6.75V17.25C2.25 17.8467 2.48705 18.419 2.90901 18.841C3.33097 19.2629 3.90326 19.5 4.5 19.5Z\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </ng-template>\n      </span>\n      <span class=\"refund-method-selector__body\">\n        <span class=\"refund-method-selector__name\">{{\n          originalPaymentLabel()\n        }}</span>\n        <span class=\"refund-method-selector__desc\">{{\n          getOriginalPaymentDescription()\n        }}</span>\n        @if (!showAsLoyalty()) {\n          <span\n            class=\"refund-method-selector__badge\"\n            [class.refund-method-selector__badge--days]=\"!showAsLoyalty()\"\n            [class.refund-method-selector__badge--loyalty]=\"showAsLoyalty()\"\n          >\n            @if (!showAsLoyalty()) {\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 12 12\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M3.30078 6.50195C3.20312 6.50195 3.12174 6.4694 3.05664 6.4043C2.99154 6.33919 2.95898 6.25781 2.95898 6.16016C2.95898 6.06576 2.99154 5.986 3.05664 5.9209C3.12174 5.85579 3.20312 5.82324 3.30078 5.82324H5.5127V2.86914C5.5127 2.77474 5.54525 2.69499 5.61035 2.62988C5.67546 2.56478 5.75521 2.53223 5.84961 2.53223C5.94727 2.53223 6.02865 2.56478 6.09375 2.62988C6.15885 2.69499 6.19141 2.77474 6.19141 2.86914V6.16016C6.19141 6.25781 6.15885 6.33919 6.09375 6.4043C6.02865 6.4694 5.94727 6.50195 5.84961 6.50195H3.30078ZM5.85449 10.9551C5.16764 10.9551 4.52311 10.8249 3.9209 10.5645C3.31868 10.3073 2.78971 9.95085 2.33398 9.49512C1.87826 9.03939 1.52018 8.51042 1.25977 7.9082C1.0026 7.30599 0.874023 6.66146 0.874023 5.97461C0.874023 5.28776 1.0026 4.64323 1.25977 4.04102C1.52018 3.4388 1.87826 2.90983 2.33398 2.4541C2.78971 1.99512 3.31868 1.63704 3.9209 1.37988C4.52311 1.12272 5.16764 0.994141 5.85449 0.994141C6.54134 0.994141 7.18587 1.12272 7.78809 1.37988C8.3903 1.63704 8.91927 1.99512 9.375 2.4541C9.83073 2.90983 10.1872 3.4388 10.4443 4.04102C10.7048 4.64323 10.835 5.28776 10.835 5.97461C10.835 6.66146 10.7048 7.30599 10.4443 7.9082C10.1872 8.51042 9.83073 9.03939 9.375 9.49512C8.91927 9.95085 8.3903 10.3073 7.78809 10.5645C7.18587 10.8249 6.54134 10.9551 5.85449 10.9551ZM5.85449 10.125C6.42741 10.125 6.96452 10.0176 7.46582 9.80273C7.96712 9.58789 8.4082 9.29004 8.78906 8.90918C9.16992 8.52832 9.46777 8.08724 9.68262 7.58594C9.89746 7.08464 10.0049 6.54753 10.0049 5.97461C10.0049 5.40169 9.89746 4.86458 9.68262 4.36328C9.46777 3.85872 9.16992 3.41764 8.78906 3.04004C8.4082 2.65918 7.96712 2.36133 7.46582 2.14648C6.96452 1.93164 6.42741 1.82422 5.85449 1.82422C5.28158 1.82422 4.74447 1.93164 4.24316 2.14648C3.74186 2.36133 3.30078 2.65918 2.91992 3.04004C2.53906 3.41764 2.24121 3.85872 2.02637 4.36328C1.81152 4.86458 1.7041 5.40169 1.7041 5.97461C1.7041 6.54753 1.81152 7.08464 2.02637 7.58594C2.24121 8.08724 2.53906 8.52832 2.91992 8.90918C3.30078 9.29004 3.74186 9.58789 4.24316 9.80273C4.74447 10.0176 5.28158 10.125 5.85449 10.125Z\"\n                  fill=\"#0B54C2\"\n                />\n              </svg>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"loyaltyBadgeIcon\"></ng-container>\n            }\n            <ng-template #loyaltyBadgeIcon>\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 12 12\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <circle\n                  cx=\"6\"\n                  cy=\"6\"\n                  r=\"5\"\n                  stroke=\"#0B54C2\"\n                  stroke-width=\"1.2\"\n                />\n                <path\n                  d=\"M6 5.5v3M6 3.9v.01\"\n                  stroke=\"#0B54C2\"\n                  stroke-width=\"1.2\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </ng-template>\n\n            {{ paymentBadgeKey() }}\n          </span>\n        }\n        <!-- showing loyalty note for hotels -->\n        @if (showLoyaltyPointsNote() && showAsLoyalty()) {\n          <div\n            class=\"refund-method-selector__notice refund-method-selector__notice--info\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M4.1582 21.1777C3.60482 21.1777 3.12956 21.0605 2.73242 20.8262C2.33529 20.5918 2.0293 20.2728 1.81445 19.8691C1.59961 19.472 1.49219 19.026 1.49219 18.5312C1.49219 18.056 1.61914 17.6003 1.87305 17.1641L9.45117 3.96094C9.69857 3.51823 10.0273 3.1862 10.4375 2.96484C10.8477 2.73698 11.2773 2.62305 11.7266 2.62305C12.1758 2.62305 12.6022 2.73698 13.0059 2.96484C13.416 3.1862 13.748 3.51823 14.002 3.96094L21.5801 17.1641C21.7038 17.3789 21.7982 17.6035 21.8633 17.8379C21.9284 18.0723 21.9609 18.3034 21.9609 18.5312C21.9609 19.026 21.8535 19.472 21.6387 19.8691C21.4238 20.2728 21.1178 20.5918 20.7207 20.8262C20.3236 21.0605 19.8483 21.1777 19.2949 21.1777H4.1582ZM4.16797 19.6445H19.2754C19.6139 19.6445 19.8809 19.5306 20.0762 19.3027C20.278 19.0814 20.3789 18.821 20.3789 18.5215C20.3789 18.3132 20.3268 18.1081 20.2227 17.9062L12.6543 4.70312C12.5501 4.52083 12.4134 4.39062 12.2441 4.3125C12.0814 4.22786 11.9089 4.18555 11.7266 4.18555C11.5443 4.18555 11.3685 4.22786 11.1992 4.3125C11.0299 4.39062 10.8932 4.52083 10.7891 4.70312L3.2207 17.8965C3.16862 18.0007 3.12956 18.1081 3.10352 18.2188C3.08398 18.3294 3.07422 18.4303 3.07422 18.5215C3.07422 18.821 3.17188 19.0814 3.36719 19.3027C3.5625 19.5306 3.82943 19.6445 4.16797 19.6445ZM11.7266 14.5859C11.2253 14.5859 10.9681 14.3288 10.9551 13.8145L10.8281 8.64844C10.8216 8.40104 10.8997 8.19596 11.0625 8.0332C11.2318 7.87044 11.4499 7.78906 11.7168 7.78906C11.9772 7.78906 12.1921 7.8737 12.3613 8.04297C12.5371 8.20573 12.6217 8.41081 12.6152 8.6582L12.4688 13.8145C12.4622 14.3288 12.2148 14.5859 11.7266 14.5859ZM11.7266 17.7598C11.4401 17.7598 11.1927 17.6621 10.9844 17.4668C10.776 17.265 10.6719 17.0241 10.6719 16.7441C10.6719 16.4642 10.776 16.2266 10.9844 16.0312C11.1927 15.8294 11.4401 15.7285 11.7266 15.7285C12.013 15.7285 12.2604 15.8262 12.4688 16.0215C12.6771 16.2168 12.7812 16.4577 12.7812 16.7441C12.7812 17.0306 12.6738 17.2715 12.459 17.4668C12.2507 17.6621 12.0065 17.7598 11.7266 17.7598Z\"\n                fill=\"#0B54C2\"\n              />\n            </svg>\n            <span>Loyalty points will be refunded instantly to your account</span>\n          </div>\n        }\n      </span>\n      <span class=\"refund-method-selector__option-end\">\n        @if (isMadaMethod()) {\n          <span class=\"refund-method-selector__mada-logo\" aria-hidden=\"true\">\n            <ng-container *ngTemplateOutlet=\"madaLogo\"></ng-container>\n          </span>\n        }\n        @if (!hasSingleOption()) {\n          <span class=\"refund-method-selector__radio\"></span>\n        }\n      </span>\n    </button>\n  }\n\n  <!-- Split Refund option -->\n  @if (showSplit()) {\n    <button\n      type=\"button\"\n      class=\"refund-method-selector__option refund-method-selector__option--split\"\n      [class.refund-method-selector__option--active]=\"\n        refundMethod === 'split' && !hasSingleOption()\n      \"\n      (click)=\"select('split')\"\n    >\n      <span class=\"refund-method-selector__icon\">\n        <svg\n          width=\"45\"\n          height=\"45\"\n          viewBox=\"0 0 45 45\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <rect\n            x=\"0.5\"\n            y=\"0.5\"\n            width=\"44\"\n            height=\"44\"\n            rx=\"7.5\"\n            stroke=\"#D9D9DE\"\n          />\n          <g clip-path=\"url(#clip0_24079_7906_selector)\">\n            <path\n              d=\"M28.1621 14.9951C28.1621 14.7998 28.2142 14.6501 28.3184 14.5459C28.429 14.4417 28.5853 14.3896 28.7871 14.3896C28.8783 14.3896 28.9661 14.4059 29.0508 14.4385C29.1419 14.4645 29.2233 14.5068 29.2949 14.5654L32.9863 17.6318C33.1426 17.7686 33.2207 17.9248 33.2207 18.1006C33.2207 18.2764 33.1426 18.4294 32.9863 18.5596L29.2949 21.6162C29.2233 21.6748 29.1419 21.7204 29.0508 21.7529C28.9661 21.7855 28.8783 21.8018 28.7871 21.8018C28.5853 21.8018 28.429 21.7497 28.3184 21.6455C28.2142 21.5348 28.1621 21.3818 28.1621 21.1865V14.9951ZM10.7793 28.2373C10.7793 27.9964 10.8607 27.8011 11.0234 27.6514C11.1927 27.5016 11.4108 27.4268 11.6777 27.4268H13.9531C14.4479 27.4268 14.8841 27.3258 15.2617 27.124C15.6458 26.9222 16.0495 26.5739 16.4727 26.0791L22.3809 19.1748C22.9668 18.4912 23.5332 18.016 24.0801 17.749C24.627 17.4821 25.3073 17.3486 26.1211 17.3486H29.5977C29.8255 17.3486 30.0176 17.43 30.1738 17.5928C30.3366 17.749 30.418 17.9411 30.418 18.1689C30.418 18.3903 30.3366 18.5824 30.1738 18.7451C30.0176 18.9014 29.8255 18.9795 29.5977 18.9795H26.1699C25.8118 18.9795 25.4863 19.0251 25.1934 19.1162C24.9069 19.2008 24.6302 19.3408 24.3633 19.5361C24.1029 19.7314 23.8327 19.9919 23.5527 20.3174L17.6348 27.2217C17.0423 27.9053 16.4727 28.3805 15.9258 28.6475C15.3854 28.9144 14.7116 29.0479 13.9043 29.0479H11.6777C11.4108 29.0479 11.1927 28.973 11.0234 28.8232C10.8607 28.6735 10.7793 28.4782 10.7793 28.2373ZM28.1621 31.4795V25.2881C28.1621 25.0928 28.2142 24.943 28.3184 24.8389C28.429 24.7282 28.5853 24.6729 28.7871 24.6729C28.8783 24.6729 28.9661 24.6891 29.0508 24.7217C29.1419 24.7542 29.2233 24.7998 29.2949 24.8584L32.9863 27.915C33.1426 28.0452 33.2207 28.1982 33.2207 28.374C33.2207 28.5498 33.1426 28.7061 32.9863 28.8428L29.2949 31.9092C29.2233 31.9678 29.1419 32.0101 29.0508 32.0361C28.9661 32.0687 28.8783 32.085 28.7871 32.085C28.5853 32.085 28.429 32.0329 28.3184 31.9287C28.2142 31.8245 28.1621 31.6748 28.1621 31.4795ZM10.7793 18.2373C10.7793 17.9964 10.8607 17.8011 11.0234 17.6514C11.1927 17.5016 11.4108 17.4268 11.6777 17.4268H13.9043C14.7116 17.4268 15.3854 17.5602 15.9258 17.8271C16.4727 18.0941 17.0423 18.5693 17.6348 19.2529L23.5527 26.1572C23.8327 26.4827 24.1029 26.7432 24.3633 26.9385C24.6302 27.1338 24.9069 27.277 25.1934 27.3682C25.4863 27.4528 25.8118 27.4951 26.1699 27.4951H29.5977C29.8255 27.4951 30.0176 27.5765 30.1738 27.7393C30.3366 27.8955 30.418 28.0843 30.418 28.3057C30.418 28.5335 30.3366 28.7288 30.1738 28.8916C30.0176 29.0479 29.8255 29.126 29.5977 29.126H26.1211C25.3073 29.126 24.627 28.9925 24.0801 28.7256C23.5332 28.4587 22.9668 27.9834 22.3809 27.2998L16.4727 20.3955C16.0495 19.9007 15.6458 19.5524 15.2617 19.3506C14.8841 19.1488 14.4479 19.0479 13.9531 19.0479H11.6777C11.4108 19.0479 11.1927 18.973 11.0234 18.8232C10.8607 18.6735 10.7793 18.4782 10.7793 18.2373Z\"\n              fill=\"#1B1A1F\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0_24079_7906_selector\">\n              <rect\n                width=\"24\"\n                height=\"24\"\n                fill=\"white\"\n                transform=\"translate(10 11.5)\"\n              />\n            </clipPath>\n          </defs>\n        </svg>\n      </span>\n      <span class=\"refund-method-selector__body\">\n        <span class=\"refund-method-selector__name\">Split Refund</span>\n        <span class=\"refund-method-selector__desc\">Returned to your original payment method</span>\n      </span>\n      <strong class=\"refund-method-selector__split-total\">\n        {{ fmtAmount(totalRefundAmount()) }}\n      </strong>\n      @if (!hasSingleOption()) {\n        <span class=\"refund-method-selector__radio\"></span>\n      }\n\n      <span class=\"refund-method-selector__split-breakdown\">\n        @for (row of splitRefundRows(); track $index) {\n          <span class=\"refund-method-selector__split-row\">\n            <span class=\"refund-method-selector__split-label\">\n              {{ row.label }}\n              @if (row.isMada) {\n                <span\n                  class=\"refund-method-selector__mada-logo\"\n                  aria-hidden=\"true\"\n                >\n                  <ng-container *ngTemplateOutlet=\"madaLogo\"></ng-container>\n                </span>\n              }\n            </span>\n            <strong>\n              {{ fmtAmount(row.value) }}\n            </strong>\n          </span>\n          <span\n            class=\"refund-method-selector__badge\"\n            [class.refund-method-selector__badge--instant]=\"row.instant\"\n            [class.refund-method-selector__badge--days]=\"!row.instant\"\n          >\n            @if (row.instant) {\n              <svg\n                width=\"12\"\n                height=\"9\"\n                viewBox=\"0 0 12 9\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M7.31818 0C8.42727 0 9.49093 0.440583 10.2752 1.22483C11.0594 2.00907 11.5 3.07273 11.5 4.18182C11.5 5.2909 11.0594 6.35457 10.2752 7.13881C9.49093 7.92305 8.42727 8.36364 7.31818 8.36364C6.20909 8.36364 5.14543 7.92305 4.36119 7.13881C3.57695 6.35457 3.13636 5.2909 3.13636 4.18182C3.13636 3.07273 3.57695 2.00907 4.36119 1.22483C5.14543 0.440583 6.20909 0 7.31818 0ZM7.31818 1.04545C6.48637 1.04545 5.68862 1.37589 5.10044 1.96407C4.51226 2.55226 4.18182 3.35 4.18182 4.18182C4.18182 5.01363 4.51226 5.81138 5.10044 6.39956C5.68862 6.98774 6.48637 7.31818 7.31818 7.31818C8.15 7.31818 8.94774 6.98774 9.53593 6.39956C10.1241 5.81138 10.4545 5.01363 10.4545 4.18182C10.4545 3.35 10.1241 2.55226 9.53593 1.96407C8.94774 1.37589 8.15 1.04545 7.31818 1.04545ZM6.79545 2.09091H7.57955V4.06682L8.7975 5.28477L8.24341 5.83886L6.79545 4.39091V2.09091ZM0.522727 7.31818C0.384091 7.31818 0.251134 7.26311 0.153103 7.16508C0.0550729 7.06705 0 6.93409 0 6.79545C0 6.65682 0.0550729 6.52386 0.153103 6.42583C0.251134 6.3278 0.384091 6.27273 0.522727 6.27273H2.52477C2.68682 6.64386 2.89591 6.99409 3.13636 7.31818H0.522727ZM1.04545 4.70455C0.906819 4.70455 0.773861 4.64947 0.67583 4.55144C0.5778 4.45341 0.522727 4.32045 0.522727 4.18182C0.522727 4.04318 0.5778 3.91022 0.67583 3.81219C0.773861 3.71416 0.906819 3.65909 1.04545 3.65909H2.11705L2.09091 4.18182L2.11705 4.70455H1.04545ZM1.56818 2.09091C1.42955 2.09091 1.29659 2.03584 1.19856 1.93781C1.10053 1.83978 1.04545 1.70682 1.04545 1.56818C1.04545 1.42955 1.10053 1.29659 1.19856 1.19856C1.29659 1.10053 1.42955 1.04545 1.56818 1.04545H3.13636C2.89591 1.36955 2.68682 1.71977 2.52477 2.09091H1.56818Z\"\n                  fill=\"#15803C\"\n                />\n              </svg>\n            }\n            @if (!row.instant) {\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 12 12\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M3.30078 6.50195C3.20312 6.50195 3.12174 6.4694 3.05664 6.4043C2.99154 6.33919 2.95898 6.25781 2.95898 6.16016C2.95898 6.06576 2.99154 5.986 3.05664 5.9209C3.12174 5.85579 3.20312 5.82324 3.30078 5.82324H5.5127V2.86914C5.5127 2.77474 5.54525 2.69499 5.61035 2.62988C5.67546 2.56478 5.75521 2.53223 5.84961 2.53223C5.94727 2.53223 6.02865 2.56478 6.09375 2.62988C6.15885 2.69499 6.19141 2.77474 6.19141 2.86914V6.16016C6.19141 6.25781 6.15885 6.33919 6.09375 6.4043C6.02865 6.4694 5.94727 6.50195 5.84961 6.50195H3.30078ZM5.85449 10.9551C5.16764 10.9551 4.52311 10.8249 3.9209 10.5645C3.31868 10.3073 2.78971 9.95085 2.33398 9.49512C1.87826 9.03939 1.52018 8.51042 1.25977 7.9082C1.0026 7.30599 0.874023 6.66146 0.874023 5.97461C0.874023 5.28776 1.0026 4.64323 1.25977 4.04102C1.52018 3.4388 1.87826 2.90983 2.33398 2.4541C2.78971 1.99512 3.31868 1.63704 3.9209 1.37988C4.52311 1.12272 5.16764 0.994141 5.85449 0.994141C6.54134 0.994141 7.18587 1.12272 7.78809 1.37988C8.3903 1.63704 8.91927 1.99512 9.375 2.4541C9.83073 2.90983 10.1872 3.4388 10.4443 4.04102C10.7048 4.64323 10.835 5.28776 10.835 5.97461C10.835 6.66146 10.7048 7.30599 10.4443 7.9082C10.1872 8.51042 9.83073 9.03939 9.375 9.49512C8.91927 9.95085 8.3903 10.3073 7.78809 10.5645C7.18587 10.8249 6.54134 10.9551 5.85449 10.9551ZM5.85449 10.125C6.42741 10.125 6.96452 10.0176 7.46582 9.80273C7.96712 9.58789 8.4082 9.29004 8.78906 8.90918C9.16992 8.52832 9.46777 8.08724 9.68262 7.58594C9.89746 7.08464 10.0049 6.54753 10.0049 5.97461C10.0049 5.40169 9.89746 4.86458 9.68262 4.36328C9.46777 3.85872 9.16992 3.41764 8.78906 3.04004C8.4082 2.65918 7.96712 2.36133 7.46582 2.14648C6.96452 1.93164 6.42741 1.82422 5.85449 1.82422C5.28158 1.82422 4.74447 1.93164 4.24316 2.14648C3.74186 2.36133 3.30078 2.65918 2.91992 3.04004C2.53906 3.41764 2.24121 3.85872 2.02637 4.36328C1.81152 4.86458 1.7041 5.40169 1.7041 5.97461C1.7041 6.54753 1.81152 7.08464 2.02637 7.58594C2.24121 8.08724 2.53906 8.52832 2.91992 8.90918C3.30078 9.29004 3.74186 9.58789 4.24316 9.80273C4.74447 10.0176 5.28158 10.125 5.85449 10.125Z\"\n                  fill=\"#0B54C2\"\n                />\n              </svg>\n            }\n            {{ row.instant ? 'Instant' : paymentBadgeKey() }}\n          </span>\n\n          @if (row.isLoyalty) {\n            <div\n              class=\"refund-method-selector__notice refund-method-selector__notice--info\"\n            >\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <circle\n                  cx=\"12\"\n                  cy=\"12\"\n                  r=\"9\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.6\"\n                />\n                <path\n                  d=\"M12 11v5.5M12 8v.01\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.6\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n              <span>Loyalty points will be refunded instantly to your account</span>\n            </div>\n          }\n        }\n      </span>\n    </button>\n  }\n</div>\n\n<ng-template #madaLogo>\n  <svg\n    width=\"43\"\n    height=\"15\"\n    viewBox=\"0 0 43 15\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g clip-path=\"url(#clip0_rms_mada)\">\n      <path d=\"M18.1894 8.6543H0V14.9933H18.1894V8.6543Z\" fill=\"#84B740\" />\n      <path d=\"M18.1894 0H0V6.34463H18.1894V0Z\" fill=\"#259BD6\" />\n      <path\n        d=\"M36.3779 13.7034L36.2969 13.7203C36.016 13.7768 35.9134 13.7994 35.7082 13.7994C35.233 13.7994 34.6713 13.5452 34.6713 12.3475C34.6713 11.7316 34.7685 10.9124 35.6542 10.9124H35.6596C35.8108 10.9237 35.9836 10.9407 36.3077 11.0424L36.3779 11.065V13.7034ZM36.5237 7.73164L36.3779 7.75989V9.97458L36.2483 9.93503L36.2105 9.92373C36.0647 9.87853 35.7298 9.77684 35.4058 9.77684C33.6344 9.77684 33.2617 11.178 33.2617 12.3531C33.2617 13.9633 34.1258 14.8898 35.6326 14.8898C36.2699 14.8898 36.7397 14.822 37.215 14.6582C37.6524 14.5113 37.8091 14.3023 37.8091 13.8559V7.5C37.3878 7.5791 36.9504 7.65819 36.5237 7.73164Z\"\n        fill=\"#747583\"\n      />\n      <path\n        d=\"M41.651 13.7385L41.5754 13.7611L41.3053 13.8345C41.0515 13.9023 40.8247 13.9419 40.6519 13.9419C40.236 13.9419 39.9876 13.7272 39.9876 13.36C39.9876 13.1227 40.0902 12.7215 40.7707 12.7215H41.651V13.7385ZM41.0299 9.74414C40.4844 9.74414 39.9228 9.84584 39.2261 10.0718L38.7724 10.2131L38.9236 11.2865L39.3665 11.134C39.831 10.9758 40.4088 10.8741 40.8409 10.8741C41.0353 10.8741 41.6294 10.8741 41.6294 11.5464V11.8402H40.8031C39.2963 11.8402 38.5996 12.343 38.5996 13.4221C38.5996 14.343 39.2423 14.8967 40.3224 14.8967C40.6573 14.8967 41.1217 14.8289 41.5214 14.7272L41.543 14.7215L41.5646 14.7272L41.6996 14.7498C42.1208 14.8289 42.5583 14.908 42.9849 14.9927V11.4673C42.9849 10.3261 42.3261 9.74414 41.0299 9.74414Z\"\n        fill=\"#747583\"\n      />\n      <path\n        d=\"M31.1527 13.7385L31.0771 13.7611L30.807 13.8345C30.5532 13.9023 30.3318 13.9419 30.1536 13.9419C29.7377 13.9419 29.4893 13.7272 29.4893 13.36C29.4893 13.1227 29.5919 12.7215 30.267 12.7215H31.1473L31.1527 13.7385ZM30.537 9.74414C29.9861 9.74414 29.4299 9.84584 28.7332 10.0718L28.2795 10.2131L28.4308 11.2865L28.8736 11.134C29.3381 10.9758 29.9159 10.8741 30.348 10.8741C30.5424 10.8741 31.1365 10.8741 31.1365 11.5464V11.8402H30.3102C28.8034 11.8402 28.1013 12.343 28.1013 13.4221C28.1013 14.343 28.744 14.8967 29.8295 14.8967C30.1644 14.8967 30.6288 14.8289 31.0285 14.7272L31.0501 14.7215L31.0717 14.7272L31.2013 14.7498C31.6279 14.8289 32.06 14.908 32.4866 14.9984V11.473C32.492 10.3204 31.8332 9.74414 30.537 9.74414Z\"\n        fill=\"#747583\"\n      />\n      <path\n        d=\"M25.4701 9.7576C24.7842 9.7576 24.2172 9.99489 24.0065 10.0966L23.9525 10.1248L23.9039 10.0853C23.6123 9.86495 23.1856 9.75195 22.5916 9.75195C22.0677 9.75195 21.5762 9.83105 21.0416 9.99489C20.5825 10.1418 20.4043 10.3734 20.4043 10.8085V14.8367H21.8409V11.1135L21.9111 11.0909C22.2027 10.9892 22.3755 10.9723 22.543 10.9723C22.9588 10.9723 23.1694 11.2039 23.1694 11.6559V14.8423H24.5844V11.5938C24.5844 11.4017 24.5466 11.2887 24.5412 11.2661L24.4926 11.17L24.5898 11.1248C24.8058 11.0231 25.0435 10.9723 25.2919 10.9723C25.5781 10.9723 25.9184 11.0909 25.9184 11.6559V14.8423H27.3279V11.509C27.3279 10.3282 26.7231 9.7576 25.4701 9.7576Z\"\n        fill=\"#747583\"\n      />\n      <path\n        d=\"M40.5866 4.13559C40.3759 4.13559 40.0249 4.113 39.7495 4.0565L39.6684 4.03955V1.86441C39.6684 1.68362 39.636 1.57062 39.6306 1.55367L39.5874 1.46328L39.6793 1.42373C39.7009 1.41243 39.7225 1.40678 39.7495 1.39548L39.7657 1.38418C39.7981 1.37288 39.8305 1.36158 39.8629 1.35028C39.8791 1.34463 39.8899 1.33898 39.9007 1.33898C40.2193 1.24859 40.511 1.25989 40.6406 1.24859H40.646C41.5263 1.24859 41.6289 2.0678 41.6289 2.68362C41.6235 3.88136 41.0564 4.13559 40.5866 4.13559ZM40.5812 0C40.5704 0 40.5542 0 40.5434 0C39.7171 0 38.8692 0.237288 38.5667 0.700565C38.4047 0.926554 38.3129 1.20904 38.3075 1.54237V3.78531C38.3075 3.9774 38.2697 4.05085 38.2643 4.0678L38.2157 4.16384H35.6072V2.60452H35.6018C35.5694 0.960452 34.6404 0.0564972 33.2957 0.0564972H33.1391H31.9833C31.9293 0.457627 31.8861 0.740113 31.8321 1.14124H33.1391C33.8249 1.14124 34.1868 1.75141 34.1868 2.68927V4.25989L34.095 4.20904C34.0788 4.20339 33.9654 4.16384 33.7871 4.16384H31.5297C31.4865 4.46328 31.4325 4.85311 31.373 5.24294H38.3129C38.5505 5.19209 38.8259 5.14689 39.0636 5.10735C39.4146 5.28814 40.0681 5.38418 40.5164 5.38418C42.0231 5.38418 43.0007 4.32768 43.0007 2.70057C42.9953 1.0904 42.0501 0.0338983 40.5812 0Z\"\n        fill=\"#747583\"\n      />\n      <path\n        d=\"M28.4189 5.90821H28.4837C29.9905 5.90821 30.6925 5.38844 30.6925 4.10595C30.6925 3.18505 30.0499 2.45059 28.9697 2.45059H27.5818C27.1659 2.45059 26.9175 2.202 26.9175 1.78392C26.9175 1.50143 27.0201 1.15115 27.7006 1.15115H30.7357C30.8006 0.738723 30.833 0.478836 30.8924 0.0664062H27.7384C26.2694 0.0664062 25.5295 0.710474 25.5295 1.78392C25.5295 2.84607 26.1722 3.39974 27.2523 3.39974H28.6403C29.0561 3.39974 29.3046 3.74437 29.3046 4.10595C29.3046 4.34324 29.202 4.83477 28.5269 4.83477H28.2947L23.8499 4.82347H23.0398C22.3539 4.82347 21.8733 4.41669 21.8733 3.47319V2.82347C21.8733 1.84042 22.2459 1.23025 23.0398 1.23025H24.3576C24.417 0.812169 24.4548 0.546632 24.5088 0.151152H22.867H22.7104C21.3656 0.151152 20.4367 1.09466 20.4043 2.73872V2.80087V3.47319C20.4367 5.11725 21.3656 5.90256 22.7104 5.90256H22.867H24.0227L26.4314 5.90821H27.868H28.4189Z\"\n        fill=\"#747583\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_rms_mada\">\n        <rect width=\"43\" height=\"15\" fill=\"white\" />\n      </clipPath>\n    </defs>\n  </svg>\n</ng-template>\n", styles: [".refund-method-selector{display:flex;flex-direction:column;gap:16px}.refund-method-selector strong{direction:ltr;display:inline-flex;align-items:center;gap:4px}.refund-method-selector__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:-40px -16px 0;padding:16px;background:var(--almatar-neutral-surface-card, #fff);border-bottom:1px solid var(--almatar-primary-border-disabled)}.refund-method-selector__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;background:none;border:none;padding:2px;color:var(--almatar-neutral-text-primary-static, #1c1c28);cursor:pointer}.refund-method-selector__close svg{display:block;flex-shrink:0;stroke:currentColor}:host-context(.rtl) .refund-method-selector__close:first-child svg{transform:scaleX(-1)}.refund-method-selector__header-text{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:start}.refund-method-selector__title{font-size:calc(17 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:var(--almatar-neutral-text-primary-static);margin:0}.refund-method-selector__sub{font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static)}.refund-method-selector__amount{display:flex;align-items:center;justify-content:space-between;padding:20px;background:linear-gradient(135deg,#f0fdf5,#dcfce7);border:1px solid #bbf7d0;border-radius:12px;box-shadow:0 2px 8px #15803c1a}.refund-method-selector__amount span{font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:600;color:#15803c}.refund-method-selector__amount strong{display:inline-flex;align-items:center;gap:6px;font-size:calc(28 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:700;color:#15803c;font-variant-numeric:tabular-nums}.refund-method-selector__option{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:start;padding:18px;border-radius:12px;border:2px solid #e2e8f0;background:#fff;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 3px #0000000d}.refund-method-selector__option:hover:not(.refund-method-selector__option--active){border-color:#cbd5e1;box-shadow:0 4px 12px #00000014;transform:translateY(-1px)}.refund-method-selector__option--active{border-color:#3b82f6;background:linear-gradient(135deg,#eff6ff,#dbeafe);box-shadow:0 0 0 3px #3b82f61a,0 4px 12px #3b82f626}.refund-method-selector__option--static{flex-direction:column;align-items:stretch;cursor:default}.refund-method-selector__option--static .refund-method-selector__name{font-weight:var(--almatar-font-weight-medium)}.refund-method-selector__credit-shell-row{display:flex;align-items:flex-start;gap:12px}.refund-method-selector__section-title{margin:0;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:var(--almatar-neutral-text-primary-static)}.refund-method-selector__name-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}.refund-method-selector__item-amount{flex-shrink:0;font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:var(--almatar-neutral-text-primary-static);font-variant-numeric:tabular-nums}.refund-method-selector__option--addons{flex-direction:column;align-items:stretch;cursor:default;gap:0}.refund-method-selector__option--addons .refund-method-selector__notice{margin-top:14px}.refund-method-selector__addon-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-primary-static);border-bottom:1px solid var(--almatar-primary-border-disabled)}.refund-method-selector__addon-row:first-of-type{padding-top:0}.refund-method-selector__addon-row strong{color:var(--almatar-neutral-text-secondary-static);font-weight:var(--almatar-font-weight-regular)}.refund-method-selector__addon-row--total{padding-bottom:0;border-bottom:none;font-weight:var(--almatar-font-weight-semibold);color:var(--almatar-neutral-text-primary-static)}.refund-method-selector__addon-row--total strong{color:var(--almatar-neutral-text-primary-static);font-weight:var(--almatar-font-weight-semibold)}.refund-method-selector__icon{flex-shrink:0;width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid #e2e8f0;color:#1e293b;box-shadow:0 2px 4px #0000000a;transition:all .2s ease}.refund-method-selector__option:hover .refund-method-selector__icon{background:linear-gradient(135deg,#eff6ff,#dbeafe);border-color:#3b82f6;box-shadow:0 4px 8px #3b82f626}.refund-method-selector__option--active .refund-method-selector__icon{background:linear-gradient(135deg,#3b82f6,#2563eb);border-color:#2563eb;color:#fff;box-shadow:0 4px 12px #3b82f64d}.refund-method-selector__body{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.refund-method-selector__name{font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:var(--almatar-neutral-text-primary-static);display:inline-flex;align-items:center;gap:6px}.refund-method-selector__desc{font-size:calc(13 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static)}.refund-method-selector__badge{margin-top:6px;font-size:calc(11 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:5px 12px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;box-shadow:0 2px 4px #00000014}.refund-method-selector__badge svg{flex-shrink:0}.refund-method-selector__badge--instant{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#15803c;border:1px solid #86efac}.refund-method-selector__badge--days,.refund-method-selector__badge--loyalty{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1e40af;border:1px solid #93c5fd}.refund-method-selector__option-end{flex-shrink:0;display:flex;align-items:center;gap:8px}.refund-method-selector__radio{flex-shrink:0;width:22px;height:22px;margin-top:2px;border-radius:50%;border:2px solid #cbd5e1;position:relative;background:#fff;transition:all .2s ease;box-shadow:0 1px 3px #0000001a}.refund-method-selector__option:hover .refund-method-selector__radio{border-color:#3b82f6;box-shadow:0 2px 6px #3b82f633}.refund-method-selector__option--active .refund-method-selector__radio{border-color:#3b82f6;background:#fff;box-shadow:0 0 0 3px #3b82f61a,0 2px 6px #3b82f633}.refund-method-selector__option--active .refund-method-selector__radio:after{content:\"\";position:absolute;inset:4px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 1px 2px #2563eb66}.refund-method-selector__option--split{flex-wrap:wrap}.refund-method-selector__split-total{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:var(--almatar-neutral-text-primary-static);font-variant-numeric:tabular-nums}.refund-method-selector__split-breakdown{flex-basis:calc(100% - 56px);width:calc(100% - 56px);margin-inline-start:56px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--almatar-primary-border-disabled)}.refund-method-selector__split-row{flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-primary-static)}.refund-method-selector__split-row strong{display:inline-flex;align-items:center;gap:4px;font-weight:var(--almatar-font-weight-semibold);font-variant-numeric:tabular-nums}.refund-method-selector__split-label{color:var(--almatar-neutral-text-primary-static);display:inline-flex;align-items:center;gap:6px}.refund-method-selector__mada-logo{display:inline-flex;align-items:center;flex-shrink:0}.refund-method-selector__mada-logo svg{display:block}.refund-method-selector__notice{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:500;line-height:1.5}.refund-method-selector__notice svg{flex-shrink:0;width:18px;height:18px;margin-top:1px}.refund-method-selector__notice--info{background:linear-gradient(135deg,#dbeafe,#eff6ff);border:1px solid #93c5fd;color:#1e40af;box-shadow:0 2px 4px #3b82f61a}.refund-method-selector__notice--info svg{color:#2563eb}.refund-method-selector__notice--muted{background:#f8fafc;border:1px solid #e2e8f0;color:#64748b;box-shadow:0 1px 3px #0000000d}.refund-method-selector__notice--muted svg{color:#94a3b8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: HotelRefundMethodSelectorComponent, isStandalone: true, selector: "almatar-hotel-refund-method-selector", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, bookingId: { classPropertyName: "bookingId", publicName: "bookingId", isSignal: false, isRequired: false, transformFunction: null }, currencyObj: { classPropertyName: "currencyObj", publicName: "currencyObj", isSignal: false, isRequired: false, transformFunction: null }, refundMethod: { classPropertyName: "refundMethod", publicName: "refundMethod", isSignal: false, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: false, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, showLoyaltyPointsNote: { classPropertyName: "showLoyaltyPointsNote", publicName: "showLoyaltyPointsNote", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", backRequested: "backRequested", methodSelected: "methodSelected" }, ngImport: i0, template: "<div class=\"refund-method-selector\">\n  <div class=\"refund-method-selector__header\">\n    @if (showBack) {\n      <button\n        type=\"button\"\n        class=\"refund-method-selector__close\"\n        (click)=\"back()\"\n        aria-label=\"Back\"\n      >\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path\n            d=\"M19 12H5M12 19l-7-7 7-7\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    }\n    <div class=\"refund-method-selector__header-text\">\n      <h3 class=\"refund-method-selector__title\">\n        Refund Method\n      </h3>\n      <span class=\"refund-method-selector__sub\"\n        >Booking ID #{{\n          displayBookingId()\n        }}</span\n      >\n    </div>\n    <!-- @if (showCloseButton()) {\n      <button\n        type=\"button\"\n        class=\"refund-method-selector__close\"\n        (click)=\"close()\"\n        aria-label=\"Close\"\n      >\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 18L18 6M6 6L18 18\"\n            stroke=\"#1B1A1F\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    } -->\n  </div>\n\n  <div class=\"refund-method-selector__amount\">\n    <span>You will get back</span>\n    <strong>\n      {{ fmtAmount(totalRefundAmount()) }}\n      {{ currencyObj?.code }}\n    </strong>\n  </div>\n\n  <!-- Wallet option -->\n  @if (showWallet()) {\n    <button\n      type=\"button\"\n      class=\"refund-method-selector__option\"\n      [class.refund-method-selector__option--active]=\"\n        refundMethod === 'wallet' && !hasSingleOption()\n      \"\n      (click)=\"select('wallet')\"\n    >\n      <span class=\"refund-method-selector__icon\">\n        <svg\n          width=\"22\"\n          height=\"24\"\n          viewBox=\"0 0 22 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <g clip-path=\"url(#clip0_25478_1880)\">\n            <path\n              d=\"M2.67676 20.8852C1.74902 20.8852 1.04704 20.6533 0.570801 20.1894C0.100749 19.7256 -0.134277 19.0359 -0.134277 18.1206V8.51852C-0.134277 7.77015 0.0265299 7.1764 0.348145 6.73727C0.675944 6.29815 1.18929 5.97344 1.88818 5.76315L13.7817 2.3027C14.4559 2.11097 15.0589 2.06149 15.5908 2.15427C16.1289 2.24704 16.5495 2.49443 16.8525 2.89645C17.1618 3.29229 17.3164 3.85511 17.3164 4.58493V6.25485L15.8042 6.38473V4.45505C15.8042 4.04684 15.6898 3.76543 15.4609 3.61081C15.2321 3.45619 14.895 3.44382 14.4497 3.5737L7.27832 5.55905C7.19173 5.5776 7.15153 5.61471 7.15771 5.67038C7.1639 5.71986 7.20719 5.7446 7.2876 5.7446H17.5947C18.5286 5.7446 19.2275 5.97962 19.6914 6.44968C20.1615 6.91354 20.3965 7.60316 20.3965 8.51852V10.8564H18.8936V8.60202C18.8936 8.15671 18.7791 7.81963 18.5503 7.59079C18.3215 7.36195 17.9937 7.24753 17.5669 7.24753H2.69531C2.26855 7.24753 1.94076 7.36195 1.71191 7.59079C1.48926 7.81963 1.37793 8.15671 1.37793 8.60202V18.0371C1.37793 18.4824 1.48926 18.8164 1.71191 19.039C1.94076 19.2679 2.26855 19.3823 2.69531 19.3823H17.5669C17.9937 19.3823 18.3215 19.2679 18.5503 19.039C18.7791 18.8164 18.8936 18.4824 18.8936 18.0371V15.4394H20.3965V18.1206C20.3965 19.0359 20.1615 19.7256 19.6914 20.1894C19.2275 20.6533 18.5286 20.8852 17.5947 20.8852H2.67676ZM16.769 14.2334C16.5093 14.2334 16.2866 14.1437 16.1011 13.9643C15.9217 13.7788 15.832 13.5561 15.832 13.2964C15.832 13.0366 15.9217 12.817 16.1011 12.6377C16.2866 12.4521 16.5093 12.3593 16.769 12.3593C17.0288 12.3593 17.2484 12.4521 17.4277 12.6377C17.6133 12.817 17.7061 13.0366 17.7061 13.2964C17.7061 13.5561 17.6133 13.7788 17.4277 13.9643C17.2484 14.1437 17.0288 14.2334 16.769 14.2334ZM16.6763 16.2187C15.7424 16.2187 14.9878 15.9775 14.4126 15.4951C13.8374 15.0065 13.5498 14.2767 13.5498 13.3056C13.5498 12.3346 13.8374 11.6079 14.4126 11.1255C14.9878 10.643 15.7424 10.4018 16.6763 10.4018H20.1089C20.6903 10.4018 21.1479 10.5812 21.4819 10.9399C21.8221 11.2986 21.9922 11.7439 21.9922 12.2758V14.3354C21.9922 14.8673 21.8221 15.3157 21.4819 15.6806C21.1479 16.0394 20.6903 16.2187 20.1089 16.2187H16.6763ZM16.769 14.9756H19.7842C20.1058 14.9756 20.347 14.8921 20.5078 14.7251C20.6748 14.5519 20.7583 14.3138 20.7583 14.0107V12.6006C20.7583 12.2975 20.6748 12.0625 20.5078 11.8955C20.347 11.7223 20.1058 11.6357 19.7842 11.6357H16.769C16.1196 11.6357 15.6372 11.7841 15.3218 12.081C15.0125 12.3779 14.8579 12.7861 14.8579 13.3056C14.8579 13.8252 15.0125 14.2334 15.3218 14.5302C15.6372 14.8271 16.1196 14.9756 16.769 14.9756Z\"\n              fill=\"black\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0_25478_1880\">\n              <rect width=\"24\" height=\"24\" fill=\"white\" />\n            </clipPath>\n          </defs>\n        </svg>\n      </span>\n      <span class=\"refund-method-selector__body\">\n        <span class=\"refund-method-selector__name\">{{ walletLabel() }}</span>\n        <span class=\"refund-method-selector__desc\">Usable for future bookings</span>\n        <span\n          class=\"refund-method-selector__badge refund-method-selector__badge--instant\"\n        >\n          <svg\n            width=\"12\"\n            height=\"9\"\n            viewBox=\"0 0 12 9\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M7.31818 0C8.42727 0 9.49093 0.440583 10.2752 1.22483C11.0594 2.00907 11.5 3.07273 11.5 4.18182C11.5 5.2909 11.0594 6.35457 10.2752 7.13881C9.49093 7.92305 8.42727 8.36364 7.31818 8.36364C6.20909 8.36364 5.14543 7.92305 4.36119 7.13881C3.57695 6.35457 3.13636 5.2909 3.13636 4.18182C3.13636 3.07273 3.57695 2.00907 4.36119 1.22483C5.14543 0.440583 6.20909 0 7.31818 0ZM7.31818 1.04545C6.48637 1.04545 5.68862 1.37589 5.10044 1.96407C4.51226 2.55226 4.18182 3.35 4.18182 4.18182C4.18182 5.01363 4.51226 5.81138 5.10044 6.39956C5.68862 6.98774 6.48637 7.31818 7.31818 7.31818C8.15 7.31818 8.94774 6.98774 9.53593 6.39956C10.1241 5.81138 10.4545 5.01363 10.4545 4.18182C10.4545 3.35 10.1241 2.55226 9.53593 1.96407C8.94774 1.37589 8.15 1.04545 7.31818 1.04545ZM6.79545 2.09091H7.57955V4.06682L8.7975 5.28477L8.24341 5.83886L6.79545 4.39091V2.09091ZM0.522727 7.31818C0.384091 7.31818 0.251134 7.26311 0.153103 7.16508C0.0550729 7.06705 0 6.93409 0 6.79545C0 6.65682 0.0550729 6.52386 0.153103 6.42583C0.251134 6.3278 0.384091 6.27273 0.522727 6.27273H2.52477C2.68682 6.64386 2.89591 6.99409 3.13636 7.31818H0.522727ZM1.04545 4.70455C0.906819 4.70455 0.773861 4.64947 0.67583 4.55144C0.5778 4.45341 0.522727 4.32045 0.522727 4.18182C0.522727 4.04318 0.5778 3.91022 0.67583 3.81219C0.773861 3.71416 0.906819 3.65909 1.04545 3.65909H2.11705L2.09091 4.18182L2.11705 4.70455H1.04545ZM1.56818 2.09091C1.42955 2.09091 1.29659 2.03584 1.19856 1.93781C1.10053 1.83978 1.04545 1.70682 1.04545 1.56818C1.04545 1.42955 1.10053 1.29659 1.19856 1.19856C1.29659 1.10053 1.42955 1.04545 1.56818 1.04545H3.13636C2.89591 1.36955 2.68682 1.71977 2.52477 2.09091H1.56818Z\"\n              fill=\"#15803C\"\n            />\n          </svg>\n          Instant\n        </span>\n      </span>\n      @if (!hasSingleOption()) {\n        <span class=\"refund-method-selector__radio\"></span>\n      }\n    </button>\n  }\n\n  <!-- Original Payment Method option -->\n  @if (showOriginal()) {\n    <button\n      type=\"button\"\n      class=\"refund-method-selector__option\"\n      [class.refund-method-selector__option--active]=\"\n        refundMethod === 'originalPaymentMethod' && !hasSingleOption()\n      \"\n      (click)=\"select('originalPaymentMethod')\"\n    >\n      <span class=\"refund-method-selector__icon\">\n        @if (isSpecialGatewayMethod()) {\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M21 12a2.25 2.25 0 0 0-2.25-2.25H15a3 3 0 1 1-6 0H5.25A2.25 2.25 0 0 0 3 12m18 0v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6m18 0V9M3 12V9m18 0a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 9m18 0V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v3\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"cardIcon\"></ng-container>\n        }\n        <ng-template #cardIcon>\n          <svg\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M2.25 8.25H21.75M2.25 9H21.75M5.25 14.25H11.25M5.25 16.5H8.25M4.5 19.5H19.5C20.0967 19.5 20.669 19.2629 21.091 18.841C21.5129 18.419 21.75 17.8467 21.75 17.25V6.75C21.75 6.15326 21.5129 5.58097 21.091 5.15901C20.669 4.73705 20.0967 4.5 19.5 4.5H4.5C3.90326 4.5 3.33097 4.73705 2.90901 5.15901C2.48705 5.58097 2.25 6.15326 2.25 6.75V17.25C2.25 17.8467 2.48705 18.419 2.90901 18.841C3.33097 19.2629 3.90326 19.5 4.5 19.5Z\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </ng-template>\n      </span>\n      <span class=\"refund-method-selector__body\">\n        <span class=\"refund-method-selector__name\">{{\n          originalPaymentLabel()\n        }}</span>\n        <span class=\"refund-method-selector__desc\">{{\n          getOriginalPaymentDescription()\n        }}</span>\n        @if (!showAsLoyalty()) {\n          <span\n            class=\"refund-method-selector__badge\"\n            [class.refund-method-selector__badge--days]=\"!showAsLoyalty()\"\n            [class.refund-method-selector__badge--loyalty]=\"showAsLoyalty()\"\n          >\n            @if (!showAsLoyalty()) {\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 12 12\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M3.30078 6.50195C3.20312 6.50195 3.12174 6.4694 3.05664 6.4043C2.99154 6.33919 2.95898 6.25781 2.95898 6.16016C2.95898 6.06576 2.99154 5.986 3.05664 5.9209C3.12174 5.85579 3.20312 5.82324 3.30078 5.82324H5.5127V2.86914C5.5127 2.77474 5.54525 2.69499 5.61035 2.62988C5.67546 2.56478 5.75521 2.53223 5.84961 2.53223C5.94727 2.53223 6.02865 2.56478 6.09375 2.62988C6.15885 2.69499 6.19141 2.77474 6.19141 2.86914V6.16016C6.19141 6.25781 6.15885 6.33919 6.09375 6.4043C6.02865 6.4694 5.94727 6.50195 5.84961 6.50195H3.30078ZM5.85449 10.9551C5.16764 10.9551 4.52311 10.8249 3.9209 10.5645C3.31868 10.3073 2.78971 9.95085 2.33398 9.49512C1.87826 9.03939 1.52018 8.51042 1.25977 7.9082C1.0026 7.30599 0.874023 6.66146 0.874023 5.97461C0.874023 5.28776 1.0026 4.64323 1.25977 4.04102C1.52018 3.4388 1.87826 2.90983 2.33398 2.4541C2.78971 1.99512 3.31868 1.63704 3.9209 1.37988C4.52311 1.12272 5.16764 0.994141 5.85449 0.994141C6.54134 0.994141 7.18587 1.12272 7.78809 1.37988C8.3903 1.63704 8.91927 1.99512 9.375 2.4541C9.83073 2.90983 10.1872 3.4388 10.4443 4.04102C10.7048 4.64323 10.835 5.28776 10.835 5.97461C10.835 6.66146 10.7048 7.30599 10.4443 7.9082C10.1872 8.51042 9.83073 9.03939 9.375 9.49512C8.91927 9.95085 8.3903 10.3073 7.78809 10.5645C7.18587 10.8249 6.54134 10.9551 5.85449 10.9551ZM5.85449 10.125C6.42741 10.125 6.96452 10.0176 7.46582 9.80273C7.96712 9.58789 8.4082 9.29004 8.78906 8.90918C9.16992 8.52832 9.46777 8.08724 9.68262 7.58594C9.89746 7.08464 10.0049 6.54753 10.0049 5.97461C10.0049 5.40169 9.89746 4.86458 9.68262 4.36328C9.46777 3.85872 9.16992 3.41764 8.78906 3.04004C8.4082 2.65918 7.96712 2.36133 7.46582 2.14648C6.96452 1.93164 6.42741 1.82422 5.85449 1.82422C5.28158 1.82422 4.74447 1.93164 4.24316 2.14648C3.74186 2.36133 3.30078 2.65918 2.91992 3.04004C2.53906 3.41764 2.24121 3.85872 2.02637 4.36328C1.81152 4.86458 1.7041 5.40169 1.7041 5.97461C1.7041 6.54753 1.81152 7.08464 2.02637 7.58594C2.24121 8.08724 2.53906 8.52832 2.91992 8.90918C3.30078 9.29004 3.74186 9.58789 4.24316 9.80273C4.74447 10.0176 5.28158 10.125 5.85449 10.125Z\"\n                  fill=\"#0B54C2\"\n                />\n              </svg>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"loyaltyBadgeIcon\"></ng-container>\n            }\n            <ng-template #loyaltyBadgeIcon>\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 12 12\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <circle\n                  cx=\"6\"\n                  cy=\"6\"\n                  r=\"5\"\n                  stroke=\"#0B54C2\"\n                  stroke-width=\"1.2\"\n                />\n                <path\n                  d=\"M6 5.5v3M6 3.9v.01\"\n                  stroke=\"#0B54C2\"\n                  stroke-width=\"1.2\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </ng-template>\n\n            {{ paymentBadgeKey() }}\n          </span>\n        }\n        <!-- showing loyalty note for hotels -->\n        @if (showLoyaltyPointsNote() && showAsLoyalty()) {\n          <div\n            class=\"refund-method-selector__notice refund-method-selector__notice--info\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M4.1582 21.1777C3.60482 21.1777 3.12956 21.0605 2.73242 20.8262C2.33529 20.5918 2.0293 20.2728 1.81445 19.8691C1.59961 19.472 1.49219 19.026 1.49219 18.5312C1.49219 18.056 1.61914 17.6003 1.87305 17.1641L9.45117 3.96094C9.69857 3.51823 10.0273 3.1862 10.4375 2.96484C10.8477 2.73698 11.2773 2.62305 11.7266 2.62305C12.1758 2.62305 12.6022 2.73698 13.0059 2.96484C13.416 3.1862 13.748 3.51823 14.002 3.96094L21.5801 17.1641C21.7038 17.3789 21.7982 17.6035 21.8633 17.8379C21.9284 18.0723 21.9609 18.3034 21.9609 18.5312C21.9609 19.026 21.8535 19.472 21.6387 19.8691C21.4238 20.2728 21.1178 20.5918 20.7207 20.8262C20.3236 21.0605 19.8483 21.1777 19.2949 21.1777H4.1582ZM4.16797 19.6445H19.2754C19.6139 19.6445 19.8809 19.5306 20.0762 19.3027C20.278 19.0814 20.3789 18.821 20.3789 18.5215C20.3789 18.3132 20.3268 18.1081 20.2227 17.9062L12.6543 4.70312C12.5501 4.52083 12.4134 4.39062 12.2441 4.3125C12.0814 4.22786 11.9089 4.18555 11.7266 4.18555C11.5443 4.18555 11.3685 4.22786 11.1992 4.3125C11.0299 4.39062 10.8932 4.52083 10.7891 4.70312L3.2207 17.8965C3.16862 18.0007 3.12956 18.1081 3.10352 18.2188C3.08398 18.3294 3.07422 18.4303 3.07422 18.5215C3.07422 18.821 3.17188 19.0814 3.36719 19.3027C3.5625 19.5306 3.82943 19.6445 4.16797 19.6445ZM11.7266 14.5859C11.2253 14.5859 10.9681 14.3288 10.9551 13.8145L10.8281 8.64844C10.8216 8.40104 10.8997 8.19596 11.0625 8.0332C11.2318 7.87044 11.4499 7.78906 11.7168 7.78906C11.9772 7.78906 12.1921 7.8737 12.3613 8.04297C12.5371 8.20573 12.6217 8.41081 12.6152 8.6582L12.4688 13.8145C12.4622 14.3288 12.2148 14.5859 11.7266 14.5859ZM11.7266 17.7598C11.4401 17.7598 11.1927 17.6621 10.9844 17.4668C10.776 17.265 10.6719 17.0241 10.6719 16.7441C10.6719 16.4642 10.776 16.2266 10.9844 16.0312C11.1927 15.8294 11.4401 15.7285 11.7266 15.7285C12.013 15.7285 12.2604 15.8262 12.4688 16.0215C12.6771 16.2168 12.7812 16.4577 12.7812 16.7441C12.7812 17.0306 12.6738 17.2715 12.459 17.4668C12.2507 17.6621 12.0065 17.7598 11.7266 17.7598Z\"\n                fill=\"#0B54C2\"\n              />\n            </svg>\n            <span>External loyalty points are refunded to your almatar Wallet as permanent points and ready to use in your next booking.</span>\n          </div>\n        }\n      </span>\n      <span class=\"refund-method-selector__option-end\">\n        @if (isMadaMethod()) {\n          <span class=\"refund-method-selector__mada-logo\" aria-hidden=\"true\">\n            <ng-container *ngTemplateOutlet=\"madaLogo\"></ng-container>\n          </span>\n        }\n        @if (!hasSingleOption()) {\n          <span class=\"refund-method-selector__radio\"></span>\n        }\n      </span>\n    </button>\n  }\n\n  <!-- Split Refund option -->\n  @if (showSplit()) {\n    <button\n      type=\"button\"\n      class=\"refund-method-selector__option refund-method-selector__option--split\"\n      [class.refund-method-selector__option--active]=\"\n        refundMethod === 'split' && !hasSingleOption()\n      \"\n      (click)=\"select('split')\"\n    >\n      <span class=\"refund-method-selector__icon\">\n        <svg\n          width=\"45\"\n          height=\"45\"\n          viewBox=\"0 0 45 45\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <rect\n            x=\"0.5\"\n            y=\"0.5\"\n            width=\"44\"\n            height=\"44\"\n            rx=\"7.5\"\n            stroke=\"#D9D9DE\"\n          />\n          <g clip-path=\"url(#clip0_24079_7906_selector)\">\n            <path\n              d=\"M28.1621 14.9951C28.1621 14.7998 28.2142 14.6501 28.3184 14.5459C28.429 14.4417 28.5853 14.3896 28.7871 14.3896C28.8783 14.3896 28.9661 14.4059 29.0508 14.4385C29.1419 14.4645 29.2233 14.5068 29.2949 14.5654L32.9863 17.6318C33.1426 17.7686 33.2207 17.9248 33.2207 18.1006C33.2207 18.2764 33.1426 18.4294 32.9863 18.5596L29.2949 21.6162C29.2233 21.6748 29.1419 21.7204 29.0508 21.7529C28.9661 21.7855 28.8783 21.8018 28.7871 21.8018C28.5853 21.8018 28.429 21.7497 28.3184 21.6455C28.2142 21.5348 28.1621 21.3818 28.1621 21.1865V14.9951ZM10.7793 28.2373C10.7793 27.9964 10.8607 27.8011 11.0234 27.6514C11.1927 27.5016 11.4108 27.4268 11.6777 27.4268H13.9531C14.4479 27.4268 14.8841 27.3258 15.2617 27.124C15.6458 26.9222 16.0495 26.5739 16.4727 26.0791L22.3809 19.1748C22.9668 18.4912 23.5332 18.016 24.0801 17.749C24.627 17.4821 25.3073 17.3486 26.1211 17.3486H29.5977C29.8255 17.3486 30.0176 17.43 30.1738 17.5928C30.3366 17.749 30.418 17.9411 30.418 18.1689C30.418 18.3903 30.3366 18.5824 30.1738 18.7451C30.0176 18.9014 29.8255 18.9795 29.5977 18.9795H26.1699C25.8118 18.9795 25.4863 19.0251 25.1934 19.1162C24.9069 19.2008 24.6302 19.3408 24.3633 19.5361C24.1029 19.7314 23.8327 19.9919 23.5527 20.3174L17.6348 27.2217C17.0423 27.9053 16.4727 28.3805 15.9258 28.6475C15.3854 28.9144 14.7116 29.0479 13.9043 29.0479H11.6777C11.4108 29.0479 11.1927 28.973 11.0234 28.8232C10.8607 28.6735 10.7793 28.4782 10.7793 28.2373ZM28.1621 31.4795V25.2881C28.1621 25.0928 28.2142 24.943 28.3184 24.8389C28.429 24.7282 28.5853 24.6729 28.7871 24.6729C28.8783 24.6729 28.9661 24.6891 29.0508 24.7217C29.1419 24.7542 29.2233 24.7998 29.2949 24.8584L32.9863 27.915C33.1426 28.0452 33.2207 28.1982 33.2207 28.374C33.2207 28.5498 33.1426 28.7061 32.9863 28.8428L29.2949 31.9092C29.2233 31.9678 29.1419 32.0101 29.0508 32.0361C28.9661 32.0687 28.8783 32.085 28.7871 32.085C28.5853 32.085 28.429 32.0329 28.3184 31.9287C28.2142 31.8245 28.1621 31.6748 28.1621 31.4795ZM10.7793 18.2373C10.7793 17.9964 10.8607 17.8011 11.0234 17.6514C11.1927 17.5016 11.4108 17.4268 11.6777 17.4268H13.9043C14.7116 17.4268 15.3854 17.5602 15.9258 17.8271C16.4727 18.0941 17.0423 18.5693 17.6348 19.2529L23.5527 26.1572C23.8327 26.4827 24.1029 26.7432 24.3633 26.9385C24.6302 27.1338 24.9069 27.277 25.1934 27.3682C25.4863 27.4528 25.8118 27.4951 26.1699 27.4951H29.5977C29.8255 27.4951 30.0176 27.5765 30.1738 27.7393C30.3366 27.8955 30.418 28.0843 30.418 28.3057C30.418 28.5335 30.3366 28.7288 30.1738 28.8916C30.0176 29.0479 29.8255 29.126 29.5977 29.126H26.1211C25.3073 29.126 24.627 28.9925 24.0801 28.7256C23.5332 28.4587 22.9668 27.9834 22.3809 27.2998L16.4727 20.3955C16.0495 19.9007 15.6458 19.5524 15.2617 19.3506C14.8841 19.1488 14.4479 19.0479 13.9531 19.0479H11.6777C11.4108 19.0479 11.1927 18.973 11.0234 18.8232C10.8607 18.6735 10.7793 18.4782 10.7793 18.2373Z\"\n              fill=\"#1B1A1F\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0_24079_7906_selector\">\n              <rect\n                width=\"24\"\n                height=\"24\"\n                fill=\"white\"\n                transform=\"translate(10 11.5)\"\n              />\n            </clipPath>\n          </defs>\n        </svg>\n      </span>\n      <span class=\"refund-method-selector__body\">\n        <span class=\"refund-method-selector__name\">Split Refund</span>\n        <span class=\"refund-method-selector__desc\">Returned to your original payment method</span>\n      </span>\n      <strong class=\"refund-method-selector__split-total\">\n        {{ fmtAmount(totalRefundAmount()) }}\n        {{ currencyObj?.code }}\n      </strong>\n      @if (!hasSingleOption()) {\n        <span class=\"refund-method-selector__radio\"></span>\n      }\n\n      <span class=\"refund-method-selector__split-breakdown\">\n        @for (row of splitRefundRows(); track $index) {\n          <span class=\"refund-method-selector__split-row\">\n            <span class=\"refund-method-selector__split-label\">\n              {{ row.label }}\n              @if (row.isMada) {\n                <span\n                  class=\"refund-method-selector__mada-logo\"\n                  aria-hidden=\"true\"\n                >\n                  <ng-container *ngTemplateOutlet=\"madaLogo\"></ng-container>\n                </span>\n              }\n            </span>\n            <strong>\n              {{ fmtAmount(row.value) }}\n              {{ currencyObj?.code }}\n            </strong>\n          </span>\n          <span\n            class=\"refund-method-selector__badge\"\n            [class.refund-method-selector__badge--instant]=\"row.instant\"\n            [class.refund-method-selector__badge--days]=\"!row.instant\"\n          >\n            @if (row.instant) {\n              <svg\n                width=\"12\"\n                height=\"9\"\n                viewBox=\"0 0 12 9\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M7.31818 0C8.42727 0 9.49093 0.440583 10.2752 1.22483C11.0594 2.00907 11.5 3.07273 11.5 4.18182C11.5 5.2909 11.0594 6.35457 10.2752 7.13881C9.49093 7.92305 8.42727 8.36364 7.31818 8.36364C6.20909 8.36364 5.14543 7.92305 4.36119 7.13881C3.57695 6.35457 3.13636 5.2909 3.13636 4.18182C3.13636 3.07273 3.57695 2.00907 4.36119 1.22483C5.14543 0.440583 6.20909 0 7.31818 0ZM7.31818 1.04545C6.48637 1.04545 5.68862 1.37589 5.10044 1.96407C4.51226 2.55226 4.18182 3.35 4.18182 4.18182C4.18182 5.01363 4.51226 5.81138 5.10044 6.39956C5.68862 6.98774 6.48637 7.31818 7.31818 7.31818C8.15 7.31818 8.94774 6.98774 9.53593 6.39956C10.1241 5.81138 10.4545 5.01363 10.4545 4.18182C10.4545 3.35 10.1241 2.55226 9.53593 1.96407C8.94774 1.37589 8.15 1.04545 7.31818 1.04545ZM6.79545 2.09091H7.57955V4.06682L8.7975 5.28477L8.24341 5.83886L6.79545 4.39091V2.09091ZM0.522727 7.31818C0.384091 7.31818 0.251134 7.26311 0.153103 7.16508C0.0550729 7.06705 0 6.93409 0 6.79545C0 6.65682 0.0550729 6.52386 0.153103 6.42583C0.251134 6.3278 0.384091 6.27273 0.522727 6.27273H2.52477C2.68682 6.64386 2.89591 6.99409 3.13636 7.31818H0.522727ZM1.04545 4.70455C0.906819 4.70455 0.773861 4.64947 0.67583 4.55144C0.5778 4.45341 0.522727 4.32045 0.522727 4.18182C0.522727 4.04318 0.5778 3.91022 0.67583 3.81219C0.773861 3.71416 0.906819 3.65909 1.04545 3.65909H2.11705L2.09091 4.18182L2.11705 4.70455H1.04545ZM1.56818 2.09091C1.42955 2.09091 1.29659 2.03584 1.19856 1.93781C1.10053 1.83978 1.04545 1.70682 1.04545 1.56818C1.04545 1.42955 1.10053 1.29659 1.19856 1.19856C1.29659 1.10053 1.42955 1.04545 1.56818 1.04545H3.13636C2.89591 1.36955 2.68682 1.71977 2.52477 2.09091H1.56818Z\"\n                  fill=\"#15803C\"\n                />\n              </svg>\n            }\n            @if (!row.instant) {\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 12 12\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M3.30078 6.50195C3.20312 6.50195 3.12174 6.4694 3.05664 6.4043C2.99154 6.33919 2.95898 6.25781 2.95898 6.16016C2.95898 6.06576 2.99154 5.986 3.05664 5.9209C3.12174 5.85579 3.20312 5.82324 3.30078 5.82324H5.5127V2.86914C5.5127 2.77474 5.54525 2.69499 5.61035 2.62988C5.67546 2.56478 5.75521 2.53223 5.84961 2.53223C5.94727 2.53223 6.02865 2.56478 6.09375 2.62988C6.15885 2.69499 6.19141 2.77474 6.19141 2.86914V6.16016C6.19141 6.25781 6.15885 6.33919 6.09375 6.4043C6.02865 6.4694 5.94727 6.50195 5.84961 6.50195H3.30078ZM5.85449 10.9551C5.16764 10.9551 4.52311 10.8249 3.9209 10.5645C3.31868 10.3073 2.78971 9.95085 2.33398 9.49512C1.87826 9.03939 1.52018 8.51042 1.25977 7.9082C1.0026 7.30599 0.874023 6.66146 0.874023 5.97461C0.874023 5.28776 1.0026 4.64323 1.25977 4.04102C1.52018 3.4388 1.87826 2.90983 2.33398 2.4541C2.78971 1.99512 3.31868 1.63704 3.9209 1.37988C4.52311 1.12272 5.16764 0.994141 5.85449 0.994141C6.54134 0.994141 7.18587 1.12272 7.78809 1.37988C8.3903 1.63704 8.91927 1.99512 9.375 2.4541C9.83073 2.90983 10.1872 3.4388 10.4443 4.04102C10.7048 4.64323 10.835 5.28776 10.835 5.97461C10.835 6.66146 10.7048 7.30599 10.4443 7.9082C10.1872 8.51042 9.83073 9.03939 9.375 9.49512C8.91927 9.95085 8.3903 10.3073 7.78809 10.5645C7.18587 10.8249 6.54134 10.9551 5.85449 10.9551ZM5.85449 10.125C6.42741 10.125 6.96452 10.0176 7.46582 9.80273C7.96712 9.58789 8.4082 9.29004 8.78906 8.90918C9.16992 8.52832 9.46777 8.08724 9.68262 7.58594C9.89746 7.08464 10.0049 6.54753 10.0049 5.97461C10.0049 5.40169 9.89746 4.86458 9.68262 4.36328C9.46777 3.85872 9.16992 3.41764 8.78906 3.04004C8.4082 2.65918 7.96712 2.36133 7.46582 2.14648C6.96452 1.93164 6.42741 1.82422 5.85449 1.82422C5.28158 1.82422 4.74447 1.93164 4.24316 2.14648C3.74186 2.36133 3.30078 2.65918 2.91992 3.04004C2.53906 3.41764 2.24121 3.85872 2.02637 4.36328C1.81152 4.86458 1.7041 5.40169 1.7041 5.97461C1.7041 6.54753 1.81152 7.08464 2.02637 7.58594C2.24121 8.08724 2.53906 8.52832 2.91992 8.90918C3.30078 9.29004 3.74186 9.58789 4.24316 9.80273C4.74447 10.0176 5.28158 10.125 5.85449 10.125Z\"\n                  fill=\"#0B54C2\"\n                />\n              </svg>\n            }\n            {{ row.instant ? 'Instant' : paymentBadgeKey() }}\n          </span>\n\n          @if (row.isLoyalty) {\n            <div\n              class=\"refund-method-selector__notice refund-method-selector__notice--info\"\n            >\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <circle\n                  cx=\"12\"\n                  cy=\"12\"\n                  r=\"9\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.6\"\n                />\n                <path\n                  d=\"M12 11v5.5M12 8v.01\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.6\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n              <span>External loyalty points are refunded to your almatar Wallet as permanent points and ready to use in your next booking.</span>\n            </div>\n          }\n        }\n      </span>\n    </button>\n  }\n</div>\n\n<ng-template #madaLogo>\n  <svg\n    width=\"43\"\n    height=\"15\"\n    viewBox=\"0 0 43 15\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g clip-path=\"url(#clip0_rms_mada)\">\n      <path d=\"M18.1894 8.6543H0V14.9933H18.1894V8.6543Z\" fill=\"#84B740\" />\n      <path d=\"M18.1894 0H0V6.34463H18.1894V0Z\" fill=\"#259BD6\" />\n      <path\n        d=\"M36.3779 13.7034L36.2969 13.7203C36.016 13.7768 35.9134 13.7994 35.7082 13.7994C35.233 13.7994 34.6713 13.5452 34.6713 12.3475C34.6713 11.7316 34.7685 10.9124 35.6542 10.9124H35.6596C35.8108 10.9237 35.9836 10.9407 36.3077 11.0424L36.3779 11.065V13.7034ZM36.5237 7.73164L36.3779 7.75989V9.97458L36.2483 9.93503L36.2105 9.92373C36.0647 9.87853 35.7298 9.77684 35.4058 9.77684C33.6344 9.77684 33.2617 11.178 33.2617 12.3531C33.2617 13.9633 34.1258 14.8898 35.6326 14.8898C36.2699 14.8898 36.7397 14.822 37.215 14.6582C37.6524 14.5113 37.8091 14.3023 37.8091 13.8559V7.5C37.3878 7.5791 36.9504 7.65819 36.5237 7.73164Z\"\n        fill=\"#747583\"\n      />\n      <path\n        d=\"M41.651 13.7385L41.5754 13.7611L41.3053 13.8345C41.0515 13.9023 40.8247 13.9419 40.6519 13.9419C40.236 13.9419 39.9876 13.7272 39.9876 13.36C39.9876 13.1227 40.0902 12.7215 40.7707 12.7215H41.651V13.7385ZM41.0299 9.74414C40.4844 9.74414 39.9228 9.84584 39.2261 10.0718L38.7724 10.2131L38.9236 11.2865L39.3665 11.134C39.831 10.9758 40.4088 10.8741 40.8409 10.8741C41.0353 10.8741 41.6294 10.8741 41.6294 11.5464V11.8402H40.8031C39.2963 11.8402 38.5996 12.343 38.5996 13.4221C38.5996 14.343 39.2423 14.8967 40.3224 14.8967C40.6573 14.8967 41.1217 14.8289 41.5214 14.7272L41.543 14.7215L41.5646 14.7272L41.6996 14.7498C42.1208 14.8289 42.5583 14.908 42.9849 14.9927V11.4673C42.9849 10.3261 42.3261 9.74414 41.0299 9.74414Z\"\n        fill=\"#747583\"\n      />\n      <path\n        d=\"M31.1527 13.7385L31.0771 13.7611L30.807 13.8345C30.5532 13.9023 30.3318 13.9419 30.1536 13.9419C29.7377 13.9419 29.4893 13.7272 29.4893 13.36C29.4893 13.1227 29.5919 12.7215 30.267 12.7215H31.1473L31.1527 13.7385ZM30.537 9.74414C29.9861 9.74414 29.4299 9.84584 28.7332 10.0718L28.2795 10.2131L28.4308 11.2865L28.8736 11.134C29.3381 10.9758 29.9159 10.8741 30.348 10.8741C30.5424 10.8741 31.1365 10.8741 31.1365 11.5464V11.8402H30.3102C28.8034 11.8402 28.1013 12.343 28.1013 13.4221C28.1013 14.343 28.744 14.8967 29.8295 14.8967C30.1644 14.8967 30.6288 14.8289 31.0285 14.7272L31.0501 14.7215L31.0717 14.7272L31.2013 14.7498C31.6279 14.8289 32.06 14.908 32.4866 14.9984V11.473C32.492 10.3204 31.8332 9.74414 30.537 9.74414Z\"\n        fill=\"#747583\"\n      />\n      <path\n        d=\"M25.4701 9.7576C24.7842 9.7576 24.2172 9.99489 24.0065 10.0966L23.9525 10.1248L23.9039 10.0853C23.6123 9.86495 23.1856 9.75195 22.5916 9.75195C22.0677 9.75195 21.5762 9.83105 21.0416 9.99489C20.5825 10.1418 20.4043 10.3734 20.4043 10.8085V14.8367H21.8409V11.1135L21.9111 11.0909C22.2027 10.9892 22.3755 10.9723 22.543 10.9723C22.9588 10.9723 23.1694 11.2039 23.1694 11.6559V14.8423H24.5844V11.5938C24.5844 11.4017 24.5466 11.2887 24.5412 11.2661L24.4926 11.17L24.5898 11.1248C24.8058 11.0231 25.0435 10.9723 25.2919 10.9723C25.5781 10.9723 25.9184 11.0909 25.9184 11.6559V14.8423H27.3279V11.509C27.3279 10.3282 26.7231 9.7576 25.4701 9.7576Z\"\n        fill=\"#747583\"\n      />\n      <path\n        d=\"M40.5866 4.13559C40.3759 4.13559 40.0249 4.113 39.7495 4.0565L39.6684 4.03955V1.86441C39.6684 1.68362 39.636 1.57062 39.6306 1.55367L39.5874 1.46328L39.6793 1.42373C39.7009 1.41243 39.7225 1.40678 39.7495 1.39548L39.7657 1.38418C39.7981 1.37288 39.8305 1.36158 39.8629 1.35028C39.8791 1.34463 39.8899 1.33898 39.9007 1.33898C40.2193 1.24859 40.511 1.25989 40.6406 1.24859H40.646C41.5263 1.24859 41.6289 2.0678 41.6289 2.68362C41.6235 3.88136 41.0564 4.13559 40.5866 4.13559ZM40.5812 0C40.5704 0 40.5542 0 40.5434 0C39.7171 0 38.8692 0.237288 38.5667 0.700565C38.4047 0.926554 38.3129 1.20904 38.3075 1.54237V3.78531C38.3075 3.9774 38.2697 4.05085 38.2643 4.0678L38.2157 4.16384H35.6072V2.60452H35.6018C35.5694 0.960452 34.6404 0.0564972 33.2957 0.0564972H33.1391H31.9833C31.9293 0.457627 31.8861 0.740113 31.8321 1.14124H33.1391C33.8249 1.14124 34.1868 1.75141 34.1868 2.68927V4.25989L34.095 4.20904C34.0788 4.20339 33.9654 4.16384 33.7871 4.16384H31.5297C31.4865 4.46328 31.4325 4.85311 31.373 5.24294H38.3129C38.5505 5.19209 38.8259 5.14689 39.0636 5.10735C39.4146 5.28814 40.0681 5.38418 40.5164 5.38418C42.0231 5.38418 43.0007 4.32768 43.0007 2.70057C42.9953 1.0904 42.0501 0.0338983 40.5812 0Z\"\n        fill=\"#747583\"\n      />\n      <path\n        d=\"M28.4189 5.90821H28.4837C29.9905 5.90821 30.6925 5.38844 30.6925 4.10595C30.6925 3.18505 30.0499 2.45059 28.9697 2.45059H27.5818C27.1659 2.45059 26.9175 2.202 26.9175 1.78392C26.9175 1.50143 27.0201 1.15115 27.7006 1.15115H30.7357C30.8006 0.738723 30.833 0.478836 30.8924 0.0664062H27.7384C26.2694 0.0664062 25.5295 0.710474 25.5295 1.78392C25.5295 2.84607 26.1722 3.39974 27.2523 3.39974H28.6403C29.0561 3.39974 29.3046 3.74437 29.3046 4.10595C29.3046 4.34324 29.202 4.83477 28.5269 4.83477H28.2947L23.8499 4.82347H23.0398C22.3539 4.82347 21.8733 4.41669 21.8733 3.47319V2.82347C21.8733 1.84042 22.2459 1.23025 23.0398 1.23025H24.3576C24.417 0.812169 24.4548 0.546632 24.5088 0.151152H22.867H22.7104C21.3656 0.151152 20.4367 1.09466 20.4043 2.73872V2.80087V3.47319C20.4367 5.11725 21.3656 5.90256 22.7104 5.90256H22.867H24.0227L26.4314 5.90821H27.868H28.4189Z\"\n        fill=\"#747583\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_rms_mada\">\n        <rect width=\"43\" height=\"15\" fill=\"white\" />\n      </clipPath>\n    </defs>\n  </svg>\n</ng-template>\n", styles: [".refund-method-selector{display:flex;flex-direction:column;gap:16px}.refund-method-selector strong{direction:ltr;display:inline-flex;align-items:center;gap:4px}.refund-method-selector__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:-40px -16px 0;padding:16px;background:var(--almatar-neutral-surface-card, #fff);border-bottom:1px solid var(--almatar-primary-border-disabled)}.refund-method-selector__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;background:none;border:none;padding:2px;color:var(--almatar-neutral-text-primary-static, #1c1c28);cursor:pointer}.refund-method-selector__close svg{display:block;flex-shrink:0;stroke:currentColor}:host-context(.rtl) .refund-method-selector__close:first-child svg{transform:scaleX(-1)}.refund-method-selector__header-text{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:start}.refund-method-selector__title{font-size:calc(17 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:var(--almatar-neutral-text-primary-static);margin:0}.refund-method-selector__sub{font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static)}.refund-method-selector__amount{display:flex;align-items:center;justify-content:space-between;padding:20px;background:linear-gradient(135deg,#f0fdf5,#dcfce7);border:1px solid #bbf7d0;border-radius:12px;box-shadow:0 2px 8px #15803c1a}.refund-method-selector__amount span{font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:600;color:#15803c}.refund-method-selector__amount strong{display:inline-flex;align-items:center;gap:6px;font-size:calc(28 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:700;color:#15803c;font-variant-numeric:tabular-nums}.refund-method-selector__option{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:start;padding:18px;border-radius:12px;border:2px solid #e2e8f0;background:#fff;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 3px #0000000d}.refund-method-selector__option:hover:not(.refund-method-selector__option--active){border-color:#cbd5e1;box-shadow:0 4px 12px #00000014;transform:translateY(-1px)}.refund-method-selector__option--active{border-color:#3b82f6;background:linear-gradient(135deg,#eff6ff,#dbeafe);box-shadow:0 0 0 3px #3b82f61a,0 4px 12px #3b82f626}.refund-method-selector__option--static{flex-direction:column;align-items:stretch;cursor:default}.refund-method-selector__option--static .refund-method-selector__name{font-weight:var(--almatar-font-weight-medium)}.refund-method-selector__credit-shell-row{display:flex;align-items:flex-start;gap:12px}.refund-method-selector__section-title{margin:0;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:var(--almatar-neutral-text-primary-static)}.refund-method-selector__name-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}.refund-method-selector__item-amount{flex-shrink:0;font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:var(--almatar-neutral-text-primary-static);font-variant-numeric:tabular-nums}.refund-method-selector__option--addons{flex-direction:column;align-items:stretch;cursor:default;gap:0}.refund-method-selector__option--addons .refund-method-selector__notice{margin-top:14px}.refund-method-selector__addon-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-primary-static);border-bottom:1px solid var(--almatar-primary-border-disabled)}.refund-method-selector__addon-row:first-of-type{padding-top:0}.refund-method-selector__addon-row strong{color:var(--almatar-neutral-text-secondary-static);font-weight:var(--almatar-font-weight-regular)}.refund-method-selector__addon-row--total{padding-bottom:0;border-bottom:none;font-weight:var(--almatar-font-weight-semibold);color:var(--almatar-neutral-text-primary-static)}.refund-method-selector__addon-row--total strong{color:var(--almatar-neutral-text-primary-static);font-weight:var(--almatar-font-weight-semibold)}.refund-method-selector__icon{flex-shrink:0;width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid #e2e8f0;color:#1e293b;box-shadow:0 2px 4px #0000000a;transition:all .2s ease}.refund-method-selector__option:hover .refund-method-selector__icon{background:linear-gradient(135deg,#eff6ff,#dbeafe);border-color:#3b82f6;box-shadow:0 4px 8px #3b82f626}.refund-method-selector__option--active .refund-method-selector__icon{background:linear-gradient(135deg,#3b82f6,#2563eb);border-color:#2563eb;color:#fff;box-shadow:0 4px 12px #3b82f64d}.refund-method-selector__body{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.refund-method-selector__name{font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:var(--almatar-neutral-text-primary-static);display:inline-flex;align-items:center;gap:6px}.refund-method-selector__desc{font-size:calc(13 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static)}.refund-method-selector__badge{margin-top:6px;font-size:calc(11 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:5px 12px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;box-shadow:0 2px 4px #00000014}.refund-method-selector__badge svg{flex-shrink:0}.refund-method-selector__badge--instant{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#15803c;border:1px solid #86efac}.refund-method-selector__badge--days,.refund-method-selector__badge--loyalty{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1e40af;border:1px solid #93c5fd}.refund-method-selector__option-end{flex-shrink:0;display:flex;align-items:center;gap:8px}.refund-method-selector__radio{flex-shrink:0;width:22px;height:22px;margin-top:2px;border-radius:50%;border:2px solid #cbd5e1;position:relative;background:#fff;transition:all .2s ease;box-shadow:0 1px 3px #0000001a}.refund-method-selector__option:hover .refund-method-selector__radio{border-color:#3b82f6;box-shadow:0 2px 6px #3b82f633}.refund-method-selector__option--active .refund-method-selector__radio{border-color:#3b82f6;background:#fff;box-shadow:0 0 0 3px #3b82f61a,0 2px 6px #3b82f633}.refund-method-selector__option--active .refund-method-selector__radio:after{content:\"\";position:absolute;inset:4px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 1px 2px #2563eb66}.refund-method-selector__option--split{flex-wrap:wrap}.refund-method-selector__split-total{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:var(--almatar-neutral-text-primary-static);font-variant-numeric:tabular-nums}.refund-method-selector__split-breakdown{flex-basis:calc(100% - 56px);width:calc(100% - 56px);margin-inline-start:56px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--almatar-primary-border-disabled)}.refund-method-selector__split-row{flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-primary-static)}.refund-method-selector__split-row strong{display:inline-flex;align-items:center;gap:4px;font-weight:var(--almatar-font-weight-semibold);font-variant-numeric:tabular-nums}.refund-method-selector__split-label{color:var(--almatar-neutral-text-primary-static);display:inline-flex;align-items:center;gap:6px}.refund-method-selector__mada-logo{display:inline-flex;align-items:center;flex-shrink:0}.refund-method-selector__mada-logo svg{display:block}.refund-method-selector__notice{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:500;line-height:1.5}.refund-method-selector__notice svg{flex-shrink:0;width:18px;height:18px;margin-top:1px}.refund-method-selector__notice--info{background:linear-gradient(135deg,#dbeafe,#eff6ff);border:1px solid #93c5fd;color:#1e40af;box-shadow:0 2px 4px #3b82f61a}.refund-method-selector__notice--info svg{color:#2563eb}.refund-method-selector__notice--muted{background:#f8fafc;border:1px solid #e2e8f0;color:#64748b;box-shadow:0 1px 3px #0000000d}.refund-method-selector__notice--muted svg{color:#94a3b8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HotelRefundMethodSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'almatar-hotel-refund-method-selector', standalone: true, imports: [CommonModule, CurrencyCodeIconComponent], template: "<div class=\"refund-method-selector\">\n  <div class=\"refund-method-selector__header\">\n    @if (showBack) {\n      <button\n        type=\"button\"\n        class=\"refund-method-selector__close\"\n        (click)=\"back()\"\n        aria-label=\"Back\"\n      >\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path\n            d=\"M19 12H5M12 19l-7-7 7-7\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    }\n    <div class=\"refund-method-selector__header-text\">\n      <h3 class=\"refund-method-selector__title\">\n        Refund Method\n      </h3>\n      <span class=\"refund-method-selector__sub\"\n        >Booking ID #{{\n          displayBookingId()\n        }}</span\n      >\n    </div>\n    <!-- @if (showCloseButton()) {\n      <button\n        type=\"button\"\n        class=\"refund-method-selector__close\"\n        (click)=\"close()\"\n        aria-label=\"Close\"\n      >\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 18L18 6M6 6L18 18\"\n            stroke=\"#1B1A1F\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    } -->\n  </div>\n\n  <div class=\"refund-method-selector__amount\">\n    <span>You will get back</span>\n    <strong>\n      {{ fmtAmount(totalRefundAmount()) }}\n    </strong>\n  </div>\n\n  <!-- Wallet option -->\n  @if (showWallet()) {\n    <button\n      type=\"button\"\n      class=\"refund-method-selector__option\"\n      [class.refund-method-selector__option--active]=\"\n        refundMethod === 'wallet' && !hasSingleOption()\n      \"\n      (click)=\"select('wallet')\"\n    >\n      <span class=\"refund-method-selector__icon\">\n        <svg\n          width=\"22\"\n          height=\"24\"\n          viewBox=\"0 0 22 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <g clip-path=\"url(#clip0_25478_1880)\">\n            <path\n              d=\"M2.67676 20.8852C1.74902 20.8852 1.04704 20.6533 0.570801 20.1894C0.100749 19.7256 -0.134277 19.0359 -0.134277 18.1206V8.51852C-0.134277 7.77015 0.0265299 7.1764 0.348145 6.73727C0.675944 6.29815 1.18929 5.97344 1.88818 5.76315L13.7817 2.3027C14.4559 2.11097 15.0589 2.06149 15.5908 2.15427C16.1289 2.24704 16.5495 2.49443 16.8525 2.89645C17.1618 3.29229 17.3164 3.85511 17.3164 4.58493V6.25485L15.8042 6.38473V4.45505C15.8042 4.04684 15.6898 3.76543 15.4609 3.61081C15.2321 3.45619 14.895 3.44382 14.4497 3.5737L7.27832 5.55905C7.19173 5.5776 7.15153 5.61471 7.15771 5.67038C7.1639 5.71986 7.20719 5.7446 7.2876 5.7446H17.5947C18.5286 5.7446 19.2275 5.97962 19.6914 6.44968C20.1615 6.91354 20.3965 7.60316 20.3965 8.51852V10.8564H18.8936V8.60202C18.8936 8.15671 18.7791 7.81963 18.5503 7.59079C18.3215 7.36195 17.9937 7.24753 17.5669 7.24753H2.69531C2.26855 7.24753 1.94076 7.36195 1.71191 7.59079C1.48926 7.81963 1.37793 8.15671 1.37793 8.60202V18.0371C1.37793 18.4824 1.48926 18.8164 1.71191 19.039C1.94076 19.2679 2.26855 19.3823 2.69531 19.3823H17.5669C17.9937 19.3823 18.3215 19.2679 18.5503 19.039C18.7791 18.8164 18.8936 18.4824 18.8936 18.0371V15.4394H20.3965V18.1206C20.3965 19.0359 20.1615 19.7256 19.6914 20.1894C19.2275 20.6533 18.5286 20.8852 17.5947 20.8852H2.67676ZM16.769 14.2334C16.5093 14.2334 16.2866 14.1437 16.1011 13.9643C15.9217 13.7788 15.832 13.5561 15.832 13.2964C15.832 13.0366 15.9217 12.817 16.1011 12.6377C16.2866 12.4521 16.5093 12.3593 16.769 12.3593C17.0288 12.3593 17.2484 12.4521 17.4277 12.6377C17.6133 12.817 17.7061 13.0366 17.7061 13.2964C17.7061 13.5561 17.6133 13.7788 17.4277 13.9643C17.2484 14.1437 17.0288 14.2334 16.769 14.2334ZM16.6763 16.2187C15.7424 16.2187 14.9878 15.9775 14.4126 15.4951C13.8374 15.0065 13.5498 14.2767 13.5498 13.3056C13.5498 12.3346 13.8374 11.6079 14.4126 11.1255C14.9878 10.643 15.7424 10.4018 16.6763 10.4018H20.1089C20.6903 10.4018 21.1479 10.5812 21.4819 10.9399C21.8221 11.2986 21.9922 11.7439 21.9922 12.2758V14.3354C21.9922 14.8673 21.8221 15.3157 21.4819 15.6806C21.1479 16.0394 20.6903 16.2187 20.1089 16.2187H16.6763ZM16.769 14.9756H19.7842C20.1058 14.9756 20.347 14.8921 20.5078 14.7251C20.6748 14.5519 20.7583 14.3138 20.7583 14.0107V12.6006C20.7583 12.2975 20.6748 12.0625 20.5078 11.8955C20.347 11.7223 20.1058 11.6357 19.7842 11.6357H16.769C16.1196 11.6357 15.6372 11.7841 15.3218 12.081C15.0125 12.3779 14.8579 12.7861 14.8579 13.3056C14.8579 13.8252 15.0125 14.2334 15.3218 14.5302C15.6372 14.8271 16.1196 14.9756 16.769 14.9756Z\"\n              fill=\"black\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0_25478_1880\">\n              <rect width=\"24\" height=\"24\" fill=\"white\" />\n            </clipPath>\n          </defs>\n        </svg>\n      </span>\n      <span class=\"refund-method-selector__body\">\n        <span class=\"refund-method-selector__name\">{{ walletLabel() }}</span>\n        <span class=\"refund-method-selector__desc\">Usable for future bookings</span>\n        <span\n          class=\"refund-method-selector__badge refund-method-selector__badge--instant\"\n        >\n          <svg\n            width=\"12\"\n            height=\"9\"\n            viewBox=\"0 0 12 9\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M7.31818 0C8.42727 0 9.49093 0.440583 10.2752 1.22483C11.0594 2.00907 11.5 3.07273 11.5 4.18182C11.5 5.2909 11.0594 6.35457 10.2752 7.13881C9.49093 7.92305 8.42727 8.36364 7.31818 8.36364C6.20909 8.36364 5.14543 7.92305 4.36119 7.13881C3.57695 6.35457 3.13636 5.2909 3.13636 4.18182C3.13636 3.07273 3.57695 2.00907 4.36119 1.22483C5.14543 0.440583 6.20909 0 7.31818 0ZM7.31818 1.04545C6.48637 1.04545 5.68862 1.37589 5.10044 1.96407C4.51226 2.55226 4.18182 3.35 4.18182 4.18182C4.18182 5.01363 4.51226 5.81138 5.10044 6.39956C5.68862 6.98774 6.48637 7.31818 7.31818 7.31818C8.15 7.31818 8.94774 6.98774 9.53593 6.39956C10.1241 5.81138 10.4545 5.01363 10.4545 4.18182C10.4545 3.35 10.1241 2.55226 9.53593 1.96407C8.94774 1.37589 8.15 1.04545 7.31818 1.04545ZM6.79545 2.09091H7.57955V4.06682L8.7975 5.28477L8.24341 5.83886L6.79545 4.39091V2.09091ZM0.522727 7.31818C0.384091 7.31818 0.251134 7.26311 0.153103 7.16508C0.0550729 7.06705 0 6.93409 0 6.79545C0 6.65682 0.0550729 6.52386 0.153103 6.42583C0.251134 6.3278 0.384091 6.27273 0.522727 6.27273H2.52477C2.68682 6.64386 2.89591 6.99409 3.13636 7.31818H0.522727ZM1.04545 4.70455C0.906819 4.70455 0.773861 4.64947 0.67583 4.55144C0.5778 4.45341 0.522727 4.32045 0.522727 4.18182C0.522727 4.04318 0.5778 3.91022 0.67583 3.81219C0.773861 3.71416 0.906819 3.65909 1.04545 3.65909H2.11705L2.09091 4.18182L2.11705 4.70455H1.04545ZM1.56818 2.09091C1.42955 2.09091 1.29659 2.03584 1.19856 1.93781C1.10053 1.83978 1.04545 1.70682 1.04545 1.56818C1.04545 1.42955 1.10053 1.29659 1.19856 1.19856C1.29659 1.10053 1.42955 1.04545 1.56818 1.04545H3.13636C2.89591 1.36955 2.68682 1.71977 2.52477 2.09091H1.56818Z\"\n              fill=\"#15803C\"\n            />\n          </svg>\n          Instant\n        </span>\n      </span>\n      @if (!hasSingleOption()) {\n        <span class=\"refund-method-selector__radio\"></span>\n      }\n    </button>\n  }\n\n  <!-- Original Payment Method option -->\n  @if (showOriginal()) {\n    <button\n      type=\"button\"\n      class=\"refund-method-selector__option\"\n      [class.refund-method-selector__option--active]=\"\n        refundMethod === 'originalPaymentMethod' && !hasSingleOption()\n      \"\n      (click)=\"select('originalPaymentMethod')\"\n    >\n      <span class=\"refund-method-selector__icon\">\n        @if (isSpecialGatewayMethod()) {\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M21 12a2.25 2.25 0 0 0-2.25-2.25H15a3 3 0 1 1-6 0H5.25A2.25 2.25 0 0 0 3 12m18 0v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6m18 0V9M3 12V9m18 0a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 9m18 0V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v3\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"cardIcon\"></ng-container>\n        }\n        <ng-template #cardIcon>\n          <svg\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M2.25 8.25H21.75M2.25 9H21.75M5.25 14.25H11.25M5.25 16.5H8.25M4.5 19.5H19.5C20.0967 19.5 20.669 19.2629 21.091 18.841C21.5129 18.419 21.75 17.8467 21.75 17.25V6.75C21.75 6.15326 21.5129 5.58097 21.091 5.15901C20.669 4.73705 20.0967 4.5 19.5 4.5H4.5C3.90326 4.5 3.33097 4.73705 2.90901 5.15901C2.48705 5.58097 2.25 6.15326 2.25 6.75V17.25C2.25 17.8467 2.48705 18.419 2.90901 18.841C3.33097 19.2629 3.90326 19.5 4.5 19.5Z\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </ng-template>\n      </span>\n      <span class=\"refund-method-selector__body\">\n        <span class=\"refund-method-selector__name\">{{\n          originalPaymentLabel()\n        }}</span>\n        <span class=\"refund-method-selector__desc\">{{\n          getOriginalPaymentDescription()\n        }}</span>\n        @if (!showAsLoyalty()) {\n          <span\n            class=\"refund-method-selector__badge\"\n            [class.refund-method-selector__badge--days]=\"!showAsLoyalty()\"\n            [class.refund-method-selector__badge--loyalty]=\"showAsLoyalty()\"\n          >\n            @if (!showAsLoyalty()) {\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 12 12\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M3.30078 6.50195C3.20312 6.50195 3.12174 6.4694 3.05664 6.4043C2.99154 6.33919 2.95898 6.25781 2.95898 6.16016C2.95898 6.06576 2.99154 5.986 3.05664 5.9209C3.12174 5.85579 3.20312 5.82324 3.30078 5.82324H5.5127V2.86914C5.5127 2.77474 5.54525 2.69499 5.61035 2.62988C5.67546 2.56478 5.75521 2.53223 5.84961 2.53223C5.94727 2.53223 6.02865 2.56478 6.09375 2.62988C6.15885 2.69499 6.19141 2.77474 6.19141 2.86914V6.16016C6.19141 6.25781 6.15885 6.33919 6.09375 6.4043C6.02865 6.4694 5.94727 6.50195 5.84961 6.50195H3.30078ZM5.85449 10.9551C5.16764 10.9551 4.52311 10.8249 3.9209 10.5645C3.31868 10.3073 2.78971 9.95085 2.33398 9.49512C1.87826 9.03939 1.52018 8.51042 1.25977 7.9082C1.0026 7.30599 0.874023 6.66146 0.874023 5.97461C0.874023 5.28776 1.0026 4.64323 1.25977 4.04102C1.52018 3.4388 1.87826 2.90983 2.33398 2.4541C2.78971 1.99512 3.31868 1.63704 3.9209 1.37988C4.52311 1.12272 5.16764 0.994141 5.85449 0.994141C6.54134 0.994141 7.18587 1.12272 7.78809 1.37988C8.3903 1.63704 8.91927 1.99512 9.375 2.4541C9.83073 2.90983 10.1872 3.4388 10.4443 4.04102C10.7048 4.64323 10.835 5.28776 10.835 5.97461C10.835 6.66146 10.7048 7.30599 10.4443 7.9082C10.1872 8.51042 9.83073 9.03939 9.375 9.49512C8.91927 9.95085 8.3903 10.3073 7.78809 10.5645C7.18587 10.8249 6.54134 10.9551 5.85449 10.9551ZM5.85449 10.125C6.42741 10.125 6.96452 10.0176 7.46582 9.80273C7.96712 9.58789 8.4082 9.29004 8.78906 8.90918C9.16992 8.52832 9.46777 8.08724 9.68262 7.58594C9.89746 7.08464 10.0049 6.54753 10.0049 5.97461C10.0049 5.40169 9.89746 4.86458 9.68262 4.36328C9.46777 3.85872 9.16992 3.41764 8.78906 3.04004C8.4082 2.65918 7.96712 2.36133 7.46582 2.14648C6.96452 1.93164 6.42741 1.82422 5.85449 1.82422C5.28158 1.82422 4.74447 1.93164 4.24316 2.14648C3.74186 2.36133 3.30078 2.65918 2.91992 3.04004C2.53906 3.41764 2.24121 3.85872 2.02637 4.36328C1.81152 4.86458 1.7041 5.40169 1.7041 5.97461C1.7041 6.54753 1.81152 7.08464 2.02637 7.58594C2.24121 8.08724 2.53906 8.52832 2.91992 8.90918C3.30078 9.29004 3.74186 9.58789 4.24316 9.80273C4.74447 10.0176 5.28158 10.125 5.85449 10.125Z\"\n                  fill=\"#0B54C2\"\n                />\n              </svg>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"loyaltyBadgeIcon\"></ng-container>\n            }\n            <ng-template #loyaltyBadgeIcon>\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 12 12\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <circle\n                  cx=\"6\"\n                  cy=\"6\"\n                  r=\"5\"\n                  stroke=\"#0B54C2\"\n                  stroke-width=\"1.2\"\n                />\n                <path\n                  d=\"M6 5.5v3M6 3.9v.01\"\n                  stroke=\"#0B54C2\"\n                  stroke-width=\"1.2\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </ng-template>\n\n            {{ paymentBadgeKey() }}\n          </span>\n        }\n        <!-- showing loyalty note for hotels -->\n        @if (showLoyaltyPointsNote() && showAsLoyalty()) {\n          <div\n            class=\"refund-method-selector__notice refund-method-selector__notice--info\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M4.1582 21.1777C3.60482 21.1777 3.12956 21.0605 2.73242 20.8262C2.33529 20.5918 2.0293 20.2728 1.81445 19.8691C1.59961 19.472 1.49219 19.026 1.49219 18.5312C1.49219 18.056 1.61914 17.6003 1.87305 17.1641L9.45117 3.96094C9.69857 3.51823 10.0273 3.1862 10.4375 2.96484C10.8477 2.73698 11.2773 2.62305 11.7266 2.62305C12.1758 2.62305 12.6022 2.73698 13.0059 2.96484C13.416 3.1862 13.748 3.51823 14.002 3.96094L21.5801 17.1641C21.7038 17.3789 21.7982 17.6035 21.8633 17.8379C21.9284 18.0723 21.9609 18.3034 21.9609 18.5312C21.9609 19.026 21.8535 19.472 21.6387 19.8691C21.4238 20.2728 21.1178 20.5918 20.7207 20.8262C20.3236 21.0605 19.8483 21.1777 19.2949 21.1777H4.1582ZM4.16797 19.6445H19.2754C19.6139 19.6445 19.8809 19.5306 20.0762 19.3027C20.278 19.0814 20.3789 18.821 20.3789 18.5215C20.3789 18.3132 20.3268 18.1081 20.2227 17.9062L12.6543 4.70312C12.5501 4.52083 12.4134 4.39062 12.2441 4.3125C12.0814 4.22786 11.9089 4.18555 11.7266 4.18555C11.5443 4.18555 11.3685 4.22786 11.1992 4.3125C11.0299 4.39062 10.8932 4.52083 10.7891 4.70312L3.2207 17.8965C3.16862 18.0007 3.12956 18.1081 3.10352 18.2188C3.08398 18.3294 3.07422 18.4303 3.07422 18.5215C3.07422 18.821 3.17188 19.0814 3.36719 19.3027C3.5625 19.5306 3.82943 19.6445 4.16797 19.6445ZM11.7266 14.5859C11.2253 14.5859 10.9681 14.3288 10.9551 13.8145L10.8281 8.64844C10.8216 8.40104 10.8997 8.19596 11.0625 8.0332C11.2318 7.87044 11.4499 7.78906 11.7168 7.78906C11.9772 7.78906 12.1921 7.8737 12.3613 8.04297C12.5371 8.20573 12.6217 8.41081 12.6152 8.6582L12.4688 13.8145C12.4622 14.3288 12.2148 14.5859 11.7266 14.5859ZM11.7266 17.7598C11.4401 17.7598 11.1927 17.6621 10.9844 17.4668C10.776 17.265 10.6719 17.0241 10.6719 16.7441C10.6719 16.4642 10.776 16.2266 10.9844 16.0312C11.1927 15.8294 11.4401 15.7285 11.7266 15.7285C12.013 15.7285 12.2604 15.8262 12.4688 16.0215C12.6771 16.2168 12.7812 16.4577 12.7812 16.7441C12.7812 17.0306 12.6738 17.2715 12.459 17.4668C12.2507 17.6621 12.0065 17.7598 11.7266 17.7598Z\"\n                fill=\"#0B54C2\"\n              />\n            </svg>\n            <span>Loyalty points will be refunded instantly to your account</span>\n          </div>\n        }\n      </span>\n      <span class=\"refund-method-selector__option-end\">\n        @if (isMadaMethod()) {\n          <span class=\"refund-method-selector__mada-logo\" aria-hidden=\"true\">\n            <ng-container *ngTemplateOutlet=\"madaLogo\"></ng-container>\n          </span>\n        }\n        @if (!hasSingleOption()) {\n          <span class=\"refund-method-selector__radio\"></span>\n        }\n      </span>\n    </button>\n  }\n\n  <!-- Split Refund option -->\n  @if (showSplit()) {\n    <button\n      type=\"button\"\n      class=\"refund-method-selector__option refund-method-selector__option--split\"\n      [class.refund-method-selector__option--active]=\"\n        refundMethod === 'split' && !hasSingleOption()\n      \"\n      (click)=\"select('split')\"\n    >\n      <span class=\"refund-method-selector__icon\">\n        <svg\n          width=\"45\"\n          height=\"45\"\n          viewBox=\"0 0 45 45\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <rect\n            x=\"0.5\"\n            y=\"0.5\"\n            width=\"44\"\n            height=\"44\"\n            rx=\"7.5\"\n            stroke=\"#D9D9DE\"\n          />\n          <g clip-path=\"url(#clip0_24079_7906_selector)\">\n            <path\n              d=\"M28.1621 14.9951C28.1621 14.7998 28.2142 14.6501 28.3184 14.5459C28.429 14.4417 28.5853 14.3896 28.7871 14.3896C28.8783 14.3896 28.9661 14.4059 29.0508 14.4385C29.1419 14.4645 29.2233 14.5068 29.2949 14.5654L32.9863 17.6318C33.1426 17.7686 33.2207 17.9248 33.2207 18.1006C33.2207 18.2764 33.1426 18.4294 32.9863 18.5596L29.2949 21.6162C29.2233 21.6748 29.1419 21.7204 29.0508 21.7529C28.9661 21.7855 28.8783 21.8018 28.7871 21.8018C28.5853 21.8018 28.429 21.7497 28.3184 21.6455C28.2142 21.5348 28.1621 21.3818 28.1621 21.1865V14.9951ZM10.7793 28.2373C10.7793 27.9964 10.8607 27.8011 11.0234 27.6514C11.1927 27.5016 11.4108 27.4268 11.6777 27.4268H13.9531C14.4479 27.4268 14.8841 27.3258 15.2617 27.124C15.6458 26.9222 16.0495 26.5739 16.4727 26.0791L22.3809 19.1748C22.9668 18.4912 23.5332 18.016 24.0801 17.749C24.627 17.4821 25.3073 17.3486 26.1211 17.3486H29.5977C29.8255 17.3486 30.0176 17.43 30.1738 17.5928C30.3366 17.749 30.418 17.9411 30.418 18.1689C30.418 18.3903 30.3366 18.5824 30.1738 18.7451C30.0176 18.9014 29.8255 18.9795 29.5977 18.9795H26.1699C25.8118 18.9795 25.4863 19.0251 25.1934 19.1162C24.9069 19.2008 24.6302 19.3408 24.3633 19.5361C24.1029 19.7314 23.8327 19.9919 23.5527 20.3174L17.6348 27.2217C17.0423 27.9053 16.4727 28.3805 15.9258 28.6475C15.3854 28.9144 14.7116 29.0479 13.9043 29.0479H11.6777C11.4108 29.0479 11.1927 28.973 11.0234 28.8232C10.8607 28.6735 10.7793 28.4782 10.7793 28.2373ZM28.1621 31.4795V25.2881C28.1621 25.0928 28.2142 24.943 28.3184 24.8389C28.429 24.7282 28.5853 24.6729 28.7871 24.6729C28.8783 24.6729 28.9661 24.6891 29.0508 24.7217C29.1419 24.7542 29.2233 24.7998 29.2949 24.8584L32.9863 27.915C33.1426 28.0452 33.2207 28.1982 33.2207 28.374C33.2207 28.5498 33.1426 28.7061 32.9863 28.8428L29.2949 31.9092C29.2233 31.9678 29.1419 32.0101 29.0508 32.0361C28.9661 32.0687 28.8783 32.085 28.7871 32.085C28.5853 32.085 28.429 32.0329 28.3184 31.9287C28.2142 31.8245 28.1621 31.6748 28.1621 31.4795ZM10.7793 18.2373C10.7793 17.9964 10.8607 17.8011 11.0234 17.6514C11.1927 17.5016 11.4108 17.4268 11.6777 17.4268H13.9043C14.7116 17.4268 15.3854 17.5602 15.9258 17.8271C16.4727 18.0941 17.0423 18.5693 17.6348 19.2529L23.5527 26.1572C23.8327 26.4827 24.1029 26.7432 24.3633 26.9385C24.6302 27.1338 24.9069 27.277 25.1934 27.3682C25.4863 27.4528 25.8118 27.4951 26.1699 27.4951H29.5977C29.8255 27.4951 30.0176 27.5765 30.1738 27.7393C30.3366 27.8955 30.418 28.0843 30.418 28.3057C30.418 28.5335 30.3366 28.7288 30.1738 28.8916C30.0176 29.0479 29.8255 29.126 29.5977 29.126H26.1211C25.3073 29.126 24.627 28.9925 24.0801 28.7256C23.5332 28.4587 22.9668 27.9834 22.3809 27.2998L16.4727 20.3955C16.0495 19.9007 15.6458 19.5524 15.2617 19.3506C14.8841 19.1488 14.4479 19.0479 13.9531 19.0479H11.6777C11.4108 19.0479 11.1927 18.973 11.0234 18.8232C10.8607 18.6735 10.7793 18.4782 10.7793 18.2373Z\"\n              fill=\"#1B1A1F\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0_24079_7906_selector\">\n              <rect\n                width=\"24\"\n                height=\"24\"\n                fill=\"white\"\n                transform=\"translate(10 11.5)\"\n              />\n            </clipPath>\n          </defs>\n        </svg>\n      </span>\n      <span class=\"refund-method-selector__body\">\n        <span class=\"refund-method-selector__name\">Split Refund</span>\n        <span class=\"refund-method-selector__desc\">Returned to your original payment method</span>\n      </span>\n      <strong class=\"refund-method-selector__split-total\">\n        {{ fmtAmount(totalRefundAmount()) }}\n      </strong>\n      @if (!hasSingleOption()) {\n        <span class=\"refund-method-selector__radio\"></span>\n      }\n\n      <span class=\"refund-method-selector__split-breakdown\">\n        @for (row of splitRefundRows(); track $index) {\n          <span class=\"refund-method-selector__split-row\">\n            <span class=\"refund-method-selector__split-label\">\n              {{ row.label }}\n              @if (row.isMada) {\n                <span\n                  class=\"refund-method-selector__mada-logo\"\n                  aria-hidden=\"true\"\n                >\n                  <ng-container *ngTemplateOutlet=\"madaLogo\"></ng-container>\n                </span>\n              }\n            </span>\n            <strong>\n              {{ fmtAmount(row.value) }}\n            </strong>\n          </span>\n          <span\n            class=\"refund-method-selector__badge\"\n            [class.refund-method-selector__badge--instant]=\"row.instant\"\n            [class.refund-method-selector__badge--days]=\"!row.instant\"\n          >\n            @if (row.instant) {\n              <svg\n                width=\"12\"\n                height=\"9\"\n                viewBox=\"0 0 12 9\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M7.31818 0C8.42727 0 9.49093 0.440583 10.2752 1.22483C11.0594 2.00907 11.5 3.07273 11.5 4.18182C11.5 5.2909 11.0594 6.35457 10.2752 7.13881C9.49093 7.92305 8.42727 8.36364 7.31818 8.36364C6.20909 8.36364 5.14543 7.92305 4.36119 7.13881C3.57695 6.35457 3.13636 5.2909 3.13636 4.18182C3.13636 3.07273 3.57695 2.00907 4.36119 1.22483C5.14543 0.440583 6.20909 0 7.31818 0ZM7.31818 1.04545C6.48637 1.04545 5.68862 1.37589 5.10044 1.96407C4.51226 2.55226 4.18182 3.35 4.18182 4.18182C4.18182 5.01363 4.51226 5.81138 5.10044 6.39956C5.68862 6.98774 6.48637 7.31818 7.31818 7.31818C8.15 7.31818 8.94774 6.98774 9.53593 6.39956C10.1241 5.81138 10.4545 5.01363 10.4545 4.18182C10.4545 3.35 10.1241 2.55226 9.53593 1.96407C8.94774 1.37589 8.15 1.04545 7.31818 1.04545ZM6.79545 2.09091H7.57955V4.06682L8.7975 5.28477L8.24341 5.83886L6.79545 4.39091V2.09091ZM0.522727 7.31818C0.384091 7.31818 0.251134 7.26311 0.153103 7.16508C0.0550729 7.06705 0 6.93409 0 6.79545C0 6.65682 0.0550729 6.52386 0.153103 6.42583C0.251134 6.3278 0.384091 6.27273 0.522727 6.27273H2.52477C2.68682 6.64386 2.89591 6.99409 3.13636 7.31818H0.522727ZM1.04545 4.70455C0.906819 4.70455 0.773861 4.64947 0.67583 4.55144C0.5778 4.45341 0.522727 4.32045 0.522727 4.18182C0.522727 4.04318 0.5778 3.91022 0.67583 3.81219C0.773861 3.71416 0.906819 3.65909 1.04545 3.65909H2.11705L2.09091 4.18182L2.11705 4.70455H1.04545ZM1.56818 2.09091C1.42955 2.09091 1.29659 2.03584 1.19856 1.93781C1.10053 1.83978 1.04545 1.70682 1.04545 1.56818C1.04545 1.42955 1.10053 1.29659 1.19856 1.19856C1.29659 1.10053 1.42955 1.04545 1.56818 1.04545H3.13636C2.89591 1.36955 2.68682 1.71977 2.52477 2.09091H1.56818Z\"\n                  fill=\"#15803C\"\n                />\n              </svg>\n            }\n            @if (!row.instant) {\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 12 12\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M3.30078 6.50195C3.20312 6.50195 3.12174 6.4694 3.05664 6.4043C2.99154 6.33919 2.95898 6.25781 2.95898 6.16016C2.95898 6.06576 2.99154 5.986 3.05664 5.9209C3.12174 5.85579 3.20312 5.82324 3.30078 5.82324H5.5127V2.86914C5.5127 2.77474 5.54525 2.69499 5.61035 2.62988C5.67546 2.56478 5.75521 2.53223 5.84961 2.53223C5.94727 2.53223 6.02865 2.56478 6.09375 2.62988C6.15885 2.69499 6.19141 2.77474 6.19141 2.86914V6.16016C6.19141 6.25781 6.15885 6.33919 6.09375 6.4043C6.02865 6.4694 5.94727 6.50195 5.84961 6.50195H3.30078ZM5.85449 10.9551C5.16764 10.9551 4.52311 10.8249 3.9209 10.5645C3.31868 10.3073 2.78971 9.95085 2.33398 9.49512C1.87826 9.03939 1.52018 8.51042 1.25977 7.9082C1.0026 7.30599 0.874023 6.66146 0.874023 5.97461C0.874023 5.28776 1.0026 4.64323 1.25977 4.04102C1.52018 3.4388 1.87826 2.90983 2.33398 2.4541C2.78971 1.99512 3.31868 1.63704 3.9209 1.37988C4.52311 1.12272 5.16764 0.994141 5.85449 0.994141C6.54134 0.994141 7.18587 1.12272 7.78809 1.37988C8.3903 1.63704 8.91927 1.99512 9.375 2.4541C9.83073 2.90983 10.1872 3.4388 10.4443 4.04102C10.7048 4.64323 10.835 5.28776 10.835 5.97461C10.835 6.66146 10.7048 7.30599 10.4443 7.9082C10.1872 8.51042 9.83073 9.03939 9.375 9.49512C8.91927 9.95085 8.3903 10.3073 7.78809 10.5645C7.18587 10.8249 6.54134 10.9551 5.85449 10.9551ZM5.85449 10.125C6.42741 10.125 6.96452 10.0176 7.46582 9.80273C7.96712 9.58789 8.4082 9.29004 8.78906 8.90918C9.16992 8.52832 9.46777 8.08724 9.68262 7.58594C9.89746 7.08464 10.0049 6.54753 10.0049 5.97461C10.0049 5.40169 9.89746 4.86458 9.68262 4.36328C9.46777 3.85872 9.16992 3.41764 8.78906 3.04004C8.4082 2.65918 7.96712 2.36133 7.46582 2.14648C6.96452 1.93164 6.42741 1.82422 5.85449 1.82422C5.28158 1.82422 4.74447 1.93164 4.24316 2.14648C3.74186 2.36133 3.30078 2.65918 2.91992 3.04004C2.53906 3.41764 2.24121 3.85872 2.02637 4.36328C1.81152 4.86458 1.7041 5.40169 1.7041 5.97461C1.7041 6.54753 1.81152 7.08464 2.02637 7.58594C2.24121 8.08724 2.53906 8.52832 2.91992 8.90918C3.30078 9.29004 3.74186 9.58789 4.24316 9.80273C4.74447 10.0176 5.28158 10.125 5.85449 10.125Z\"\n                  fill=\"#0B54C2\"\n                />\n              </svg>\n            }\n            {{ row.instant ? 'Instant' : paymentBadgeKey() }}\n          </span>\n\n          @if (row.isLoyalty) {\n            <div\n              class=\"refund-method-selector__notice refund-method-selector__notice--info\"\n            >\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <circle\n                  cx=\"12\"\n                  cy=\"12\"\n                  r=\"9\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.6\"\n                />\n                <path\n                  d=\"M12 11v5.5M12 8v.01\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.6\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n              <span>Loyalty points will be refunded instantly to your account</span>\n            </div>\n          }\n        }\n      </span>\n    </button>\n  }\n</div>\n\n<ng-template #madaLogo>\n  <svg\n    width=\"43\"\n    height=\"15\"\n    viewBox=\"0 0 43 15\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g clip-path=\"url(#clip0_rms_mada)\">\n      <path d=\"M18.1894 8.6543H0V14.9933H18.1894V8.6543Z\" fill=\"#84B740\" />\n      <path d=\"M18.1894 0H0V6.34463H18.1894V0Z\" fill=\"#259BD6\" />\n      <path\n        d=\"M36.3779 13.7034L36.2969 13.7203C36.016 13.7768 35.9134 13.7994 35.7082 13.7994C35.233 13.7994 34.6713 13.5452 34.6713 12.3475C34.6713 11.7316 34.7685 10.9124 35.6542 10.9124H35.6596C35.8108 10.9237 35.9836 10.9407 36.3077 11.0424L36.3779 11.065V13.7034ZM36.5237 7.73164L36.3779 7.75989V9.97458L36.2483 9.93503L36.2105 9.92373C36.0647 9.87853 35.7298 9.77684 35.4058 9.77684C33.6344 9.77684 33.2617 11.178 33.2617 12.3531C33.2617 13.9633 34.1258 14.8898 35.6326 14.8898C36.2699 14.8898 36.7397 14.822 37.215 14.6582C37.6524 14.5113 37.8091 14.3023 37.8091 13.8559V7.5C37.3878 7.5791 36.9504 7.65819 36.5237 7.73164Z\"\n        fill=\"#747583\"\n      />\n      <path\n        d=\"M41.651 13.7385L41.5754 13.7611L41.3053 13.8345C41.0515 13.9023 40.8247 13.9419 40.6519 13.9419C40.236 13.9419 39.9876 13.7272 39.9876 13.36C39.9876 13.1227 40.0902 12.7215 40.7707 12.7215H41.651V13.7385ZM41.0299 9.74414C40.4844 9.74414 39.9228 9.84584 39.2261 10.0718L38.7724 10.2131L38.9236 11.2865L39.3665 11.134C39.831 10.9758 40.4088 10.8741 40.8409 10.8741C41.0353 10.8741 41.6294 10.8741 41.6294 11.5464V11.8402H40.8031C39.2963 11.8402 38.5996 12.343 38.5996 13.4221C38.5996 14.343 39.2423 14.8967 40.3224 14.8967C40.6573 14.8967 41.1217 14.8289 41.5214 14.7272L41.543 14.7215L41.5646 14.7272L41.6996 14.7498C42.1208 14.8289 42.5583 14.908 42.9849 14.9927V11.4673C42.9849 10.3261 42.3261 9.74414 41.0299 9.74414Z\"\n        fill=\"#747583\"\n      />\n      <path\n        d=\"M31.1527 13.7385L31.0771 13.7611L30.807 13.8345C30.5532 13.9023 30.3318 13.9419 30.1536 13.9419C29.7377 13.9419 29.4893 13.7272 29.4893 13.36C29.4893 13.1227 29.5919 12.7215 30.267 12.7215H31.1473L31.1527 13.7385ZM30.537 9.74414C29.9861 9.74414 29.4299 9.84584 28.7332 10.0718L28.2795 10.2131L28.4308 11.2865L28.8736 11.134C29.3381 10.9758 29.9159 10.8741 30.348 10.8741C30.5424 10.8741 31.1365 10.8741 31.1365 11.5464V11.8402H30.3102C28.8034 11.8402 28.1013 12.343 28.1013 13.4221C28.1013 14.343 28.744 14.8967 29.8295 14.8967C30.1644 14.8967 30.6288 14.8289 31.0285 14.7272L31.0501 14.7215L31.0717 14.7272L31.2013 14.7498C31.6279 14.8289 32.06 14.908 32.4866 14.9984V11.473C32.492 10.3204 31.8332 9.74414 30.537 9.74414Z\"\n        fill=\"#747583\"\n      />\n      <path\n        d=\"M25.4701 9.7576C24.7842 9.7576 24.2172 9.99489 24.0065 10.0966L23.9525 10.1248L23.9039 10.0853C23.6123 9.86495 23.1856 9.75195 22.5916 9.75195C22.0677 9.75195 21.5762 9.83105 21.0416 9.99489C20.5825 10.1418 20.4043 10.3734 20.4043 10.8085V14.8367H21.8409V11.1135L21.9111 11.0909C22.2027 10.9892 22.3755 10.9723 22.543 10.9723C22.9588 10.9723 23.1694 11.2039 23.1694 11.6559V14.8423H24.5844V11.5938C24.5844 11.4017 24.5466 11.2887 24.5412 11.2661L24.4926 11.17L24.5898 11.1248C24.8058 11.0231 25.0435 10.9723 25.2919 10.9723C25.5781 10.9723 25.9184 11.0909 25.9184 11.6559V14.8423H27.3279V11.509C27.3279 10.3282 26.7231 9.7576 25.4701 9.7576Z\"\n        fill=\"#747583\"\n      />\n      <path\n        d=\"M40.5866 4.13559C40.3759 4.13559 40.0249 4.113 39.7495 4.0565L39.6684 4.03955V1.86441C39.6684 1.68362 39.636 1.57062 39.6306 1.55367L39.5874 1.46328L39.6793 1.42373C39.7009 1.41243 39.7225 1.40678 39.7495 1.39548L39.7657 1.38418C39.7981 1.37288 39.8305 1.36158 39.8629 1.35028C39.8791 1.34463 39.8899 1.33898 39.9007 1.33898C40.2193 1.24859 40.511 1.25989 40.6406 1.24859H40.646C41.5263 1.24859 41.6289 2.0678 41.6289 2.68362C41.6235 3.88136 41.0564 4.13559 40.5866 4.13559ZM40.5812 0C40.5704 0 40.5542 0 40.5434 0C39.7171 0 38.8692 0.237288 38.5667 0.700565C38.4047 0.926554 38.3129 1.20904 38.3075 1.54237V3.78531C38.3075 3.9774 38.2697 4.05085 38.2643 4.0678L38.2157 4.16384H35.6072V2.60452H35.6018C35.5694 0.960452 34.6404 0.0564972 33.2957 0.0564972H33.1391H31.9833C31.9293 0.457627 31.8861 0.740113 31.8321 1.14124H33.1391C33.8249 1.14124 34.1868 1.75141 34.1868 2.68927V4.25989L34.095 4.20904C34.0788 4.20339 33.9654 4.16384 33.7871 4.16384H31.5297C31.4865 4.46328 31.4325 4.85311 31.373 5.24294H38.3129C38.5505 5.19209 38.8259 5.14689 39.0636 5.10735C39.4146 5.28814 40.0681 5.38418 40.5164 5.38418C42.0231 5.38418 43.0007 4.32768 43.0007 2.70057C42.9953 1.0904 42.0501 0.0338983 40.5812 0Z\"\n        fill=\"#747583\"\n      />\n      <path\n        d=\"M28.4189 5.90821H28.4837C29.9905 5.90821 30.6925 5.38844 30.6925 4.10595C30.6925 3.18505 30.0499 2.45059 28.9697 2.45059H27.5818C27.1659 2.45059 26.9175 2.202 26.9175 1.78392C26.9175 1.50143 27.0201 1.15115 27.7006 1.15115H30.7357C30.8006 0.738723 30.833 0.478836 30.8924 0.0664062H27.7384C26.2694 0.0664062 25.5295 0.710474 25.5295 1.78392C25.5295 2.84607 26.1722 3.39974 27.2523 3.39974H28.6403C29.0561 3.39974 29.3046 3.74437 29.3046 4.10595C29.3046 4.34324 29.202 4.83477 28.5269 4.83477H28.2947L23.8499 4.82347H23.0398C22.3539 4.82347 21.8733 4.41669 21.8733 3.47319V2.82347C21.8733 1.84042 22.2459 1.23025 23.0398 1.23025H24.3576C24.417 0.812169 24.4548 0.546632 24.5088 0.151152H22.867H22.7104C21.3656 0.151152 20.4367 1.09466 20.4043 2.73872V2.80087V3.47319C20.4367 5.11725 21.3656 5.90256 22.7104 5.90256H22.867H24.0227L26.4314 5.90821H27.868H28.4189Z\"\n        fill=\"#747583\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_rms_mada\">\n        <rect width=\"43\" height=\"15\" fill=\"white\" />\n      </clipPath>\n    </defs>\n  </svg>\n</ng-template>\n", styles: [".refund-method-selector{display:flex;flex-direction:column;gap:16px}.refund-method-selector strong{direction:ltr;display:inline-flex;align-items:center;gap:4px}.refund-method-selector__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:-40px -16px 0;padding:16px;background:var(--almatar-neutral-surface-card, #fff);border-bottom:1px solid var(--almatar-primary-border-disabled)}.refund-method-selector__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;background:none;border:none;padding:2px;color:var(--almatar-neutral-text-primary-static, #1c1c28);cursor:pointer}.refund-method-selector__close svg{display:block;flex-shrink:0;stroke:currentColor}:host-context(.rtl) .refund-method-selector__close:first-child svg{transform:scaleX(-1)}.refund-method-selector__header-text{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:start}.refund-method-selector__title{font-size:calc(17 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:var(--almatar-neutral-text-primary-static);margin:0}.refund-method-selector__sub{font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static)}.refund-method-selector__amount{display:flex;align-items:center;justify-content:space-between;padding:20px;background:linear-gradient(135deg,#f0fdf5,#dcfce7);border:1px solid #bbf7d0;border-radius:12px;box-shadow:0 2px 8px #15803c1a}.refund-method-selector__amount span{font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:600;color:#15803c}.refund-method-selector__amount strong{display:inline-flex;align-items:center;gap:6px;font-size:calc(28 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:700;color:#15803c;font-variant-numeric:tabular-nums}.refund-method-selector__option{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:start;padding:18px;border-radius:12px;border:2px solid #e2e8f0;background:#fff;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 3px #0000000d}.refund-method-selector__option:hover:not(.refund-method-selector__option--active){border-color:#cbd5e1;box-shadow:0 4px 12px #00000014;transform:translateY(-1px)}.refund-method-selector__option--active{border-color:#3b82f6;background:linear-gradient(135deg,#eff6ff,#dbeafe);box-shadow:0 0 0 3px #3b82f61a,0 4px 12px #3b82f626}.refund-method-selector__option--static{flex-direction:column;align-items:stretch;cursor:default}.refund-method-selector__option--static .refund-method-selector__name{font-weight:var(--almatar-font-weight-medium)}.refund-method-selector__credit-shell-row{display:flex;align-items:flex-start;gap:12px}.refund-method-selector__section-title{margin:0;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:var(--almatar-neutral-text-primary-static)}.refund-method-selector__name-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}.refund-method-selector__item-amount{flex-shrink:0;font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:var(--almatar-neutral-text-primary-static);font-variant-numeric:tabular-nums}.refund-method-selector__option--addons{flex-direction:column;align-items:stretch;cursor:default;gap:0}.refund-method-selector__option--addons .refund-method-selector__notice{margin-top:14px}.refund-method-selector__addon-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-primary-static);border-bottom:1px solid var(--almatar-primary-border-disabled)}.refund-method-selector__addon-row:first-of-type{padding-top:0}.refund-method-selector__addon-row strong{color:var(--almatar-neutral-text-secondary-static);font-weight:var(--almatar-font-weight-regular)}.refund-method-selector__addon-row--total{padding-bottom:0;border-bottom:none;font-weight:var(--almatar-font-weight-semibold);color:var(--almatar-neutral-text-primary-static)}.refund-method-selector__addon-row--total strong{color:var(--almatar-neutral-text-primary-static);font-weight:var(--almatar-font-weight-semibold)}.refund-method-selector__icon{flex-shrink:0;width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid #e2e8f0;color:#1e293b;box-shadow:0 2px 4px #0000000a;transition:all .2s ease}.refund-method-selector__option:hover .refund-method-selector__icon{background:linear-gradient(135deg,#eff6ff,#dbeafe);border-color:#3b82f6;box-shadow:0 4px 8px #3b82f626}.refund-method-selector__option--active .refund-method-selector__icon{background:linear-gradient(135deg,#3b82f6,#2563eb);border-color:#2563eb;color:#fff;box-shadow:0 4px 12px #3b82f64d}.refund-method-selector__body{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.refund-method-selector__name{font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:var(--almatar-neutral-text-primary-static);display:inline-flex;align-items:center;gap:6px}.refund-method-selector__desc{font-size:calc(13 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static)}.refund-method-selector__badge{margin-top:6px;font-size:calc(11 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:5px 12px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;box-shadow:0 2px 4px #00000014}.refund-method-selector__badge svg{flex-shrink:0}.refund-method-selector__badge--instant{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#15803c;border:1px solid #86efac}.refund-method-selector__badge--days,.refund-method-selector__badge--loyalty{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1e40af;border:1px solid #93c5fd}.refund-method-selector__option-end{flex-shrink:0;display:flex;align-items:center;gap:8px}.refund-method-selector__radio{flex-shrink:0;width:22px;height:22px;margin-top:2px;border-radius:50%;border:2px solid #cbd5e1;position:relative;background:#fff;transition:all .2s ease;box-shadow:0 1px 3px #0000001a}.refund-method-selector__option:hover .refund-method-selector__radio{border-color:#3b82f6;box-shadow:0 2px 6px #3b82f633}.refund-method-selector__option--active .refund-method-selector__radio{border-color:#3b82f6;background:#fff;box-shadow:0 0 0 3px #3b82f61a,0 2px 6px #3b82f633}.refund-method-selector__option--active .refund-method-selector__radio:after{content:\"\";position:absolute;inset:4px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 1px 2px #2563eb66}.refund-method-selector__option--split{flex-wrap:wrap}.refund-method-selector__split-total{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:var(--almatar-neutral-text-primary-static);font-variant-numeric:tabular-nums}.refund-method-selector__split-breakdown{flex-basis:calc(100% - 56px);width:calc(100% - 56px);margin-inline-start:56px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--almatar-primary-border-disabled)}.refund-method-selector__split-row{flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-primary-static)}.refund-method-selector__split-row strong{display:inline-flex;align-items:center;gap:4px;font-weight:var(--almatar-font-weight-semibold);font-variant-numeric:tabular-nums}.refund-method-selector__split-label{color:var(--almatar-neutral-text-primary-static);display:inline-flex;align-items:center;gap:6px}.refund-method-selector__mada-logo{display:inline-flex;align-items:center;flex-shrink:0}.refund-method-selector__mada-logo svg{display:block}.refund-method-selector__notice{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:500;line-height:1.5}.refund-method-selector__notice svg{flex-shrink:0;width:18px;height:18px;margin-top:1px}.refund-method-selector__notice--info{background:linear-gradient(135deg,#dbeafe,#eff6ff);border:1px solid #93c5fd;color:#1e40af;box-shadow:0 2px 4px #3b82f61a}.refund-method-selector__notice--info svg{color:#2563eb}.refund-method-selector__notice--muted{background:#f8fafc;border:1px solid #e2e8f0;color:#64748b;box-shadow:0 1px 3px #0000000d}.refund-method-selector__notice--muted svg{color:#94a3b8}\n"] }]
+            args: [{ selector: 'almatar-hotel-refund-method-selector', standalone: true, imports: [CommonModule, CurrencyCodeIconComponent], template: "<div class=\"refund-method-selector\">\n  <div class=\"refund-method-selector__header\">\n    @if (showBack) {\n      <button\n        type=\"button\"\n        class=\"refund-method-selector__close\"\n        (click)=\"back()\"\n        aria-label=\"Back\"\n      >\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path\n            d=\"M19 12H5M12 19l-7-7 7-7\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    }\n    <div class=\"refund-method-selector__header-text\">\n      <h3 class=\"refund-method-selector__title\">\n        Refund Method\n      </h3>\n      <span class=\"refund-method-selector__sub\"\n        >Booking ID #{{\n          displayBookingId()\n        }}</span\n      >\n    </div>\n    <!-- @if (showCloseButton()) {\n      <button\n        type=\"button\"\n        class=\"refund-method-selector__close\"\n        (click)=\"close()\"\n        aria-label=\"Close\"\n      >\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 18L18 6M6 6L18 18\"\n            stroke=\"#1B1A1F\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    } -->\n  </div>\n\n  <div class=\"refund-method-selector__amount\">\n    <span>You will get back</span>\n    <strong>\n      {{ fmtAmount(totalRefundAmount()) }}\n      {{ currencyObj?.code }}\n    </strong>\n  </div>\n\n  <!-- Wallet option -->\n  @if (showWallet()) {\n    <button\n      type=\"button\"\n      class=\"refund-method-selector__option\"\n      [class.refund-method-selector__option--active]=\"\n        refundMethod === 'wallet' && !hasSingleOption()\n      \"\n      (click)=\"select('wallet')\"\n    >\n      <span class=\"refund-method-selector__icon\">\n        <svg\n          width=\"22\"\n          height=\"24\"\n          viewBox=\"0 0 22 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <g clip-path=\"url(#clip0_25478_1880)\">\n            <path\n              d=\"M2.67676 20.8852C1.74902 20.8852 1.04704 20.6533 0.570801 20.1894C0.100749 19.7256 -0.134277 19.0359 -0.134277 18.1206V8.51852C-0.134277 7.77015 0.0265299 7.1764 0.348145 6.73727C0.675944 6.29815 1.18929 5.97344 1.88818 5.76315L13.7817 2.3027C14.4559 2.11097 15.0589 2.06149 15.5908 2.15427C16.1289 2.24704 16.5495 2.49443 16.8525 2.89645C17.1618 3.29229 17.3164 3.85511 17.3164 4.58493V6.25485L15.8042 6.38473V4.45505C15.8042 4.04684 15.6898 3.76543 15.4609 3.61081C15.2321 3.45619 14.895 3.44382 14.4497 3.5737L7.27832 5.55905C7.19173 5.5776 7.15153 5.61471 7.15771 5.67038C7.1639 5.71986 7.20719 5.7446 7.2876 5.7446H17.5947C18.5286 5.7446 19.2275 5.97962 19.6914 6.44968C20.1615 6.91354 20.3965 7.60316 20.3965 8.51852V10.8564H18.8936V8.60202C18.8936 8.15671 18.7791 7.81963 18.5503 7.59079C18.3215 7.36195 17.9937 7.24753 17.5669 7.24753H2.69531C2.26855 7.24753 1.94076 7.36195 1.71191 7.59079C1.48926 7.81963 1.37793 8.15671 1.37793 8.60202V18.0371C1.37793 18.4824 1.48926 18.8164 1.71191 19.039C1.94076 19.2679 2.26855 19.3823 2.69531 19.3823H17.5669C17.9937 19.3823 18.3215 19.2679 18.5503 19.039C18.7791 18.8164 18.8936 18.4824 18.8936 18.0371V15.4394H20.3965V18.1206C20.3965 19.0359 20.1615 19.7256 19.6914 20.1894C19.2275 20.6533 18.5286 20.8852 17.5947 20.8852H2.67676ZM16.769 14.2334C16.5093 14.2334 16.2866 14.1437 16.1011 13.9643C15.9217 13.7788 15.832 13.5561 15.832 13.2964C15.832 13.0366 15.9217 12.817 16.1011 12.6377C16.2866 12.4521 16.5093 12.3593 16.769 12.3593C17.0288 12.3593 17.2484 12.4521 17.4277 12.6377C17.6133 12.817 17.7061 13.0366 17.7061 13.2964C17.7061 13.5561 17.6133 13.7788 17.4277 13.9643C17.2484 14.1437 17.0288 14.2334 16.769 14.2334ZM16.6763 16.2187C15.7424 16.2187 14.9878 15.9775 14.4126 15.4951C13.8374 15.0065 13.5498 14.2767 13.5498 13.3056C13.5498 12.3346 13.8374 11.6079 14.4126 11.1255C14.9878 10.643 15.7424 10.4018 16.6763 10.4018H20.1089C20.6903 10.4018 21.1479 10.5812 21.4819 10.9399C21.8221 11.2986 21.9922 11.7439 21.9922 12.2758V14.3354C21.9922 14.8673 21.8221 15.3157 21.4819 15.6806C21.1479 16.0394 20.6903 16.2187 20.1089 16.2187H16.6763ZM16.769 14.9756H19.7842C20.1058 14.9756 20.347 14.8921 20.5078 14.7251C20.6748 14.5519 20.7583 14.3138 20.7583 14.0107V12.6006C20.7583 12.2975 20.6748 12.0625 20.5078 11.8955C20.347 11.7223 20.1058 11.6357 19.7842 11.6357H16.769C16.1196 11.6357 15.6372 11.7841 15.3218 12.081C15.0125 12.3779 14.8579 12.7861 14.8579 13.3056C14.8579 13.8252 15.0125 14.2334 15.3218 14.5302C15.6372 14.8271 16.1196 14.9756 16.769 14.9756Z\"\n              fill=\"black\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0_25478_1880\">\n              <rect width=\"24\" height=\"24\" fill=\"white\" />\n            </clipPath>\n          </defs>\n        </svg>\n      </span>\n      <span class=\"refund-method-selector__body\">\n        <span class=\"refund-method-selector__name\">{{ walletLabel() }}</span>\n        <span class=\"refund-method-selector__desc\">Usable for future bookings</span>\n        <span\n          class=\"refund-method-selector__badge refund-method-selector__badge--instant\"\n        >\n          <svg\n            width=\"12\"\n            height=\"9\"\n            viewBox=\"0 0 12 9\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M7.31818 0C8.42727 0 9.49093 0.440583 10.2752 1.22483C11.0594 2.00907 11.5 3.07273 11.5 4.18182C11.5 5.2909 11.0594 6.35457 10.2752 7.13881C9.49093 7.92305 8.42727 8.36364 7.31818 8.36364C6.20909 8.36364 5.14543 7.92305 4.36119 7.13881C3.57695 6.35457 3.13636 5.2909 3.13636 4.18182C3.13636 3.07273 3.57695 2.00907 4.36119 1.22483C5.14543 0.440583 6.20909 0 7.31818 0ZM7.31818 1.04545C6.48637 1.04545 5.68862 1.37589 5.10044 1.96407C4.51226 2.55226 4.18182 3.35 4.18182 4.18182C4.18182 5.01363 4.51226 5.81138 5.10044 6.39956C5.68862 6.98774 6.48637 7.31818 7.31818 7.31818C8.15 7.31818 8.94774 6.98774 9.53593 6.39956C10.1241 5.81138 10.4545 5.01363 10.4545 4.18182C10.4545 3.35 10.1241 2.55226 9.53593 1.96407C8.94774 1.37589 8.15 1.04545 7.31818 1.04545ZM6.79545 2.09091H7.57955V4.06682L8.7975 5.28477L8.24341 5.83886L6.79545 4.39091V2.09091ZM0.522727 7.31818C0.384091 7.31818 0.251134 7.26311 0.153103 7.16508C0.0550729 7.06705 0 6.93409 0 6.79545C0 6.65682 0.0550729 6.52386 0.153103 6.42583C0.251134 6.3278 0.384091 6.27273 0.522727 6.27273H2.52477C2.68682 6.64386 2.89591 6.99409 3.13636 7.31818H0.522727ZM1.04545 4.70455C0.906819 4.70455 0.773861 4.64947 0.67583 4.55144C0.5778 4.45341 0.522727 4.32045 0.522727 4.18182C0.522727 4.04318 0.5778 3.91022 0.67583 3.81219C0.773861 3.71416 0.906819 3.65909 1.04545 3.65909H2.11705L2.09091 4.18182L2.11705 4.70455H1.04545ZM1.56818 2.09091C1.42955 2.09091 1.29659 2.03584 1.19856 1.93781C1.10053 1.83978 1.04545 1.70682 1.04545 1.56818C1.04545 1.42955 1.10053 1.29659 1.19856 1.19856C1.29659 1.10053 1.42955 1.04545 1.56818 1.04545H3.13636C2.89591 1.36955 2.68682 1.71977 2.52477 2.09091H1.56818Z\"\n              fill=\"#15803C\"\n            />\n          </svg>\n          Instant\n        </span>\n      </span>\n      @if (!hasSingleOption()) {\n        <span class=\"refund-method-selector__radio\"></span>\n      }\n    </button>\n  }\n\n  <!-- Original Payment Method option -->\n  @if (showOriginal()) {\n    <button\n      type=\"button\"\n      class=\"refund-method-selector__option\"\n      [class.refund-method-selector__option--active]=\"\n        refundMethod === 'originalPaymentMethod' && !hasSingleOption()\n      \"\n      (click)=\"select('originalPaymentMethod')\"\n    >\n      <span class=\"refund-method-selector__icon\">\n        @if (isSpecialGatewayMethod()) {\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M21 12a2.25 2.25 0 0 0-2.25-2.25H15a3 3 0 1 1-6 0H5.25A2.25 2.25 0 0 0 3 12m18 0v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6m18 0V9M3 12V9m18 0a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 9m18 0V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v3\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"cardIcon\"></ng-container>\n        }\n        <ng-template #cardIcon>\n          <svg\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M2.25 8.25H21.75M2.25 9H21.75M5.25 14.25H11.25M5.25 16.5H8.25M4.5 19.5H19.5C20.0967 19.5 20.669 19.2629 21.091 18.841C21.5129 18.419 21.75 17.8467 21.75 17.25V6.75C21.75 6.15326 21.5129 5.58097 21.091 5.15901C20.669 4.73705 20.0967 4.5 19.5 4.5H4.5C3.90326 4.5 3.33097 4.73705 2.90901 5.15901C2.48705 5.58097 2.25 6.15326 2.25 6.75V17.25C2.25 17.8467 2.48705 18.419 2.90901 18.841C3.33097 19.2629 3.90326 19.5 4.5 19.5Z\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </ng-template>\n      </span>\n      <span class=\"refund-method-selector__body\">\n        <span class=\"refund-method-selector__name\">{{\n          originalPaymentLabel()\n        }}</span>\n        <span class=\"refund-method-selector__desc\">{{\n          getOriginalPaymentDescription()\n        }}</span>\n        @if (!showAsLoyalty()) {\n          <span\n            class=\"refund-method-selector__badge\"\n            [class.refund-method-selector__badge--days]=\"!showAsLoyalty()\"\n            [class.refund-method-selector__badge--loyalty]=\"showAsLoyalty()\"\n          >\n            @if (!showAsLoyalty()) {\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 12 12\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M3.30078 6.50195C3.20312 6.50195 3.12174 6.4694 3.05664 6.4043C2.99154 6.33919 2.95898 6.25781 2.95898 6.16016C2.95898 6.06576 2.99154 5.986 3.05664 5.9209C3.12174 5.85579 3.20312 5.82324 3.30078 5.82324H5.5127V2.86914C5.5127 2.77474 5.54525 2.69499 5.61035 2.62988C5.67546 2.56478 5.75521 2.53223 5.84961 2.53223C5.94727 2.53223 6.02865 2.56478 6.09375 2.62988C6.15885 2.69499 6.19141 2.77474 6.19141 2.86914V6.16016C6.19141 6.25781 6.15885 6.33919 6.09375 6.4043C6.02865 6.4694 5.94727 6.50195 5.84961 6.50195H3.30078ZM5.85449 10.9551C5.16764 10.9551 4.52311 10.8249 3.9209 10.5645C3.31868 10.3073 2.78971 9.95085 2.33398 9.49512C1.87826 9.03939 1.52018 8.51042 1.25977 7.9082C1.0026 7.30599 0.874023 6.66146 0.874023 5.97461C0.874023 5.28776 1.0026 4.64323 1.25977 4.04102C1.52018 3.4388 1.87826 2.90983 2.33398 2.4541C2.78971 1.99512 3.31868 1.63704 3.9209 1.37988C4.52311 1.12272 5.16764 0.994141 5.85449 0.994141C6.54134 0.994141 7.18587 1.12272 7.78809 1.37988C8.3903 1.63704 8.91927 1.99512 9.375 2.4541C9.83073 2.90983 10.1872 3.4388 10.4443 4.04102C10.7048 4.64323 10.835 5.28776 10.835 5.97461C10.835 6.66146 10.7048 7.30599 10.4443 7.9082C10.1872 8.51042 9.83073 9.03939 9.375 9.49512C8.91927 9.95085 8.3903 10.3073 7.78809 10.5645C7.18587 10.8249 6.54134 10.9551 5.85449 10.9551ZM5.85449 10.125C6.42741 10.125 6.96452 10.0176 7.46582 9.80273C7.96712 9.58789 8.4082 9.29004 8.78906 8.90918C9.16992 8.52832 9.46777 8.08724 9.68262 7.58594C9.89746 7.08464 10.0049 6.54753 10.0049 5.97461C10.0049 5.40169 9.89746 4.86458 9.68262 4.36328C9.46777 3.85872 9.16992 3.41764 8.78906 3.04004C8.4082 2.65918 7.96712 2.36133 7.46582 2.14648C6.96452 1.93164 6.42741 1.82422 5.85449 1.82422C5.28158 1.82422 4.74447 1.93164 4.24316 2.14648C3.74186 2.36133 3.30078 2.65918 2.91992 3.04004C2.53906 3.41764 2.24121 3.85872 2.02637 4.36328C1.81152 4.86458 1.7041 5.40169 1.7041 5.97461C1.7041 6.54753 1.81152 7.08464 2.02637 7.58594C2.24121 8.08724 2.53906 8.52832 2.91992 8.90918C3.30078 9.29004 3.74186 9.58789 4.24316 9.80273C4.74447 10.0176 5.28158 10.125 5.85449 10.125Z\"\n                  fill=\"#0B54C2\"\n                />\n              </svg>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"loyaltyBadgeIcon\"></ng-container>\n            }\n            <ng-template #loyaltyBadgeIcon>\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 12 12\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <circle\n                  cx=\"6\"\n                  cy=\"6\"\n                  r=\"5\"\n                  stroke=\"#0B54C2\"\n                  stroke-width=\"1.2\"\n                />\n                <path\n                  d=\"M6 5.5v3M6 3.9v.01\"\n                  stroke=\"#0B54C2\"\n                  stroke-width=\"1.2\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </ng-template>\n\n            {{ paymentBadgeKey() }}\n          </span>\n        }\n        <!-- showing loyalty note for hotels -->\n        @if (showLoyaltyPointsNote() && showAsLoyalty()) {\n          <div\n            class=\"refund-method-selector__notice refund-method-selector__notice--info\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M4.1582 21.1777C3.60482 21.1777 3.12956 21.0605 2.73242 20.8262C2.33529 20.5918 2.0293 20.2728 1.81445 19.8691C1.59961 19.472 1.49219 19.026 1.49219 18.5312C1.49219 18.056 1.61914 17.6003 1.87305 17.1641L9.45117 3.96094C9.69857 3.51823 10.0273 3.1862 10.4375 2.96484C10.8477 2.73698 11.2773 2.62305 11.7266 2.62305C12.1758 2.62305 12.6022 2.73698 13.0059 2.96484C13.416 3.1862 13.748 3.51823 14.002 3.96094L21.5801 17.1641C21.7038 17.3789 21.7982 17.6035 21.8633 17.8379C21.9284 18.0723 21.9609 18.3034 21.9609 18.5312C21.9609 19.026 21.8535 19.472 21.6387 19.8691C21.4238 20.2728 21.1178 20.5918 20.7207 20.8262C20.3236 21.0605 19.8483 21.1777 19.2949 21.1777H4.1582ZM4.16797 19.6445H19.2754C19.6139 19.6445 19.8809 19.5306 20.0762 19.3027C20.278 19.0814 20.3789 18.821 20.3789 18.5215C20.3789 18.3132 20.3268 18.1081 20.2227 17.9062L12.6543 4.70312C12.5501 4.52083 12.4134 4.39062 12.2441 4.3125C12.0814 4.22786 11.9089 4.18555 11.7266 4.18555C11.5443 4.18555 11.3685 4.22786 11.1992 4.3125C11.0299 4.39062 10.8932 4.52083 10.7891 4.70312L3.2207 17.8965C3.16862 18.0007 3.12956 18.1081 3.10352 18.2188C3.08398 18.3294 3.07422 18.4303 3.07422 18.5215C3.07422 18.821 3.17188 19.0814 3.36719 19.3027C3.5625 19.5306 3.82943 19.6445 4.16797 19.6445ZM11.7266 14.5859C11.2253 14.5859 10.9681 14.3288 10.9551 13.8145L10.8281 8.64844C10.8216 8.40104 10.8997 8.19596 11.0625 8.0332C11.2318 7.87044 11.4499 7.78906 11.7168 7.78906C11.9772 7.78906 12.1921 7.8737 12.3613 8.04297C12.5371 8.20573 12.6217 8.41081 12.6152 8.6582L12.4688 13.8145C12.4622 14.3288 12.2148 14.5859 11.7266 14.5859ZM11.7266 17.7598C11.4401 17.7598 11.1927 17.6621 10.9844 17.4668C10.776 17.265 10.6719 17.0241 10.6719 16.7441C10.6719 16.4642 10.776 16.2266 10.9844 16.0312C11.1927 15.8294 11.4401 15.7285 11.7266 15.7285C12.013 15.7285 12.2604 15.8262 12.4688 16.0215C12.6771 16.2168 12.7812 16.4577 12.7812 16.7441C12.7812 17.0306 12.6738 17.2715 12.459 17.4668C12.2507 17.6621 12.0065 17.7598 11.7266 17.7598Z\"\n                fill=\"#0B54C2\"\n              />\n            </svg>\n            <span>External loyalty points are refunded to your almatar Wallet as permanent points and ready to use in your next booking.</span>\n          </div>\n        }\n      </span>\n      <span class=\"refund-method-selector__option-end\">\n        @if (isMadaMethod()) {\n          <span class=\"refund-method-selector__mada-logo\" aria-hidden=\"true\">\n            <ng-container *ngTemplateOutlet=\"madaLogo\"></ng-container>\n          </span>\n        }\n        @if (!hasSingleOption()) {\n          <span class=\"refund-method-selector__radio\"></span>\n        }\n      </span>\n    </button>\n  }\n\n  <!-- Split Refund option -->\n  @if (showSplit()) {\n    <button\n      type=\"button\"\n      class=\"refund-method-selector__option refund-method-selector__option--split\"\n      [class.refund-method-selector__option--active]=\"\n        refundMethod === 'split' && !hasSingleOption()\n      \"\n      (click)=\"select('split')\"\n    >\n      <span class=\"refund-method-selector__icon\">\n        <svg\n          width=\"45\"\n          height=\"45\"\n          viewBox=\"0 0 45 45\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <rect\n            x=\"0.5\"\n            y=\"0.5\"\n            width=\"44\"\n            height=\"44\"\n            rx=\"7.5\"\n            stroke=\"#D9D9DE\"\n          />\n          <g clip-path=\"url(#clip0_24079_7906_selector)\">\n            <path\n              d=\"M28.1621 14.9951C28.1621 14.7998 28.2142 14.6501 28.3184 14.5459C28.429 14.4417 28.5853 14.3896 28.7871 14.3896C28.8783 14.3896 28.9661 14.4059 29.0508 14.4385C29.1419 14.4645 29.2233 14.5068 29.2949 14.5654L32.9863 17.6318C33.1426 17.7686 33.2207 17.9248 33.2207 18.1006C33.2207 18.2764 33.1426 18.4294 32.9863 18.5596L29.2949 21.6162C29.2233 21.6748 29.1419 21.7204 29.0508 21.7529C28.9661 21.7855 28.8783 21.8018 28.7871 21.8018C28.5853 21.8018 28.429 21.7497 28.3184 21.6455C28.2142 21.5348 28.1621 21.3818 28.1621 21.1865V14.9951ZM10.7793 28.2373C10.7793 27.9964 10.8607 27.8011 11.0234 27.6514C11.1927 27.5016 11.4108 27.4268 11.6777 27.4268H13.9531C14.4479 27.4268 14.8841 27.3258 15.2617 27.124C15.6458 26.9222 16.0495 26.5739 16.4727 26.0791L22.3809 19.1748C22.9668 18.4912 23.5332 18.016 24.0801 17.749C24.627 17.4821 25.3073 17.3486 26.1211 17.3486H29.5977C29.8255 17.3486 30.0176 17.43 30.1738 17.5928C30.3366 17.749 30.418 17.9411 30.418 18.1689C30.418 18.3903 30.3366 18.5824 30.1738 18.7451C30.0176 18.9014 29.8255 18.9795 29.5977 18.9795H26.1699C25.8118 18.9795 25.4863 19.0251 25.1934 19.1162C24.9069 19.2008 24.6302 19.3408 24.3633 19.5361C24.1029 19.7314 23.8327 19.9919 23.5527 20.3174L17.6348 27.2217C17.0423 27.9053 16.4727 28.3805 15.9258 28.6475C15.3854 28.9144 14.7116 29.0479 13.9043 29.0479H11.6777C11.4108 29.0479 11.1927 28.973 11.0234 28.8232C10.8607 28.6735 10.7793 28.4782 10.7793 28.2373ZM28.1621 31.4795V25.2881C28.1621 25.0928 28.2142 24.943 28.3184 24.8389C28.429 24.7282 28.5853 24.6729 28.7871 24.6729C28.8783 24.6729 28.9661 24.6891 29.0508 24.7217C29.1419 24.7542 29.2233 24.7998 29.2949 24.8584L32.9863 27.915C33.1426 28.0452 33.2207 28.1982 33.2207 28.374C33.2207 28.5498 33.1426 28.7061 32.9863 28.8428L29.2949 31.9092C29.2233 31.9678 29.1419 32.0101 29.0508 32.0361C28.9661 32.0687 28.8783 32.085 28.7871 32.085C28.5853 32.085 28.429 32.0329 28.3184 31.9287C28.2142 31.8245 28.1621 31.6748 28.1621 31.4795ZM10.7793 18.2373C10.7793 17.9964 10.8607 17.8011 11.0234 17.6514C11.1927 17.5016 11.4108 17.4268 11.6777 17.4268H13.9043C14.7116 17.4268 15.3854 17.5602 15.9258 17.8271C16.4727 18.0941 17.0423 18.5693 17.6348 19.2529L23.5527 26.1572C23.8327 26.4827 24.1029 26.7432 24.3633 26.9385C24.6302 27.1338 24.9069 27.277 25.1934 27.3682C25.4863 27.4528 25.8118 27.4951 26.1699 27.4951H29.5977C29.8255 27.4951 30.0176 27.5765 30.1738 27.7393C30.3366 27.8955 30.418 28.0843 30.418 28.3057C30.418 28.5335 30.3366 28.7288 30.1738 28.8916C30.0176 29.0479 29.8255 29.126 29.5977 29.126H26.1211C25.3073 29.126 24.627 28.9925 24.0801 28.7256C23.5332 28.4587 22.9668 27.9834 22.3809 27.2998L16.4727 20.3955C16.0495 19.9007 15.6458 19.5524 15.2617 19.3506C14.8841 19.1488 14.4479 19.0479 13.9531 19.0479H11.6777C11.4108 19.0479 11.1927 18.973 11.0234 18.8232C10.8607 18.6735 10.7793 18.4782 10.7793 18.2373Z\"\n              fill=\"#1B1A1F\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0_24079_7906_selector\">\n              <rect\n                width=\"24\"\n                height=\"24\"\n                fill=\"white\"\n                transform=\"translate(10 11.5)\"\n              />\n            </clipPath>\n          </defs>\n        </svg>\n      </span>\n      <span class=\"refund-method-selector__body\">\n        <span class=\"refund-method-selector__name\">Split Refund</span>\n        <span class=\"refund-method-selector__desc\">Returned to your original payment method</span>\n      </span>\n      <strong class=\"refund-method-selector__split-total\">\n        {{ fmtAmount(totalRefundAmount()) }}\n        {{ currencyObj?.code }}\n      </strong>\n      @if (!hasSingleOption()) {\n        <span class=\"refund-method-selector__radio\"></span>\n      }\n\n      <span class=\"refund-method-selector__split-breakdown\">\n        @for (row of splitRefundRows(); track $index) {\n          <span class=\"refund-method-selector__split-row\">\n            <span class=\"refund-method-selector__split-label\">\n              {{ row.label }}\n              @if (row.isMada) {\n                <span\n                  class=\"refund-method-selector__mada-logo\"\n                  aria-hidden=\"true\"\n                >\n                  <ng-container *ngTemplateOutlet=\"madaLogo\"></ng-container>\n                </span>\n              }\n            </span>\n            <strong>\n              {{ fmtAmount(row.value) }}\n              {{ currencyObj?.code }}\n            </strong>\n          </span>\n          <span\n            class=\"refund-method-selector__badge\"\n            [class.refund-method-selector__badge--instant]=\"row.instant\"\n            [class.refund-method-selector__badge--days]=\"!row.instant\"\n          >\n            @if (row.instant) {\n              <svg\n                width=\"12\"\n                height=\"9\"\n                viewBox=\"0 0 12 9\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M7.31818 0C8.42727 0 9.49093 0.440583 10.2752 1.22483C11.0594 2.00907 11.5 3.07273 11.5 4.18182C11.5 5.2909 11.0594 6.35457 10.2752 7.13881C9.49093 7.92305 8.42727 8.36364 7.31818 8.36364C6.20909 8.36364 5.14543 7.92305 4.36119 7.13881C3.57695 6.35457 3.13636 5.2909 3.13636 4.18182C3.13636 3.07273 3.57695 2.00907 4.36119 1.22483C5.14543 0.440583 6.20909 0 7.31818 0ZM7.31818 1.04545C6.48637 1.04545 5.68862 1.37589 5.10044 1.96407C4.51226 2.55226 4.18182 3.35 4.18182 4.18182C4.18182 5.01363 4.51226 5.81138 5.10044 6.39956C5.68862 6.98774 6.48637 7.31818 7.31818 7.31818C8.15 7.31818 8.94774 6.98774 9.53593 6.39956C10.1241 5.81138 10.4545 5.01363 10.4545 4.18182C10.4545 3.35 10.1241 2.55226 9.53593 1.96407C8.94774 1.37589 8.15 1.04545 7.31818 1.04545ZM6.79545 2.09091H7.57955V4.06682L8.7975 5.28477L8.24341 5.83886L6.79545 4.39091V2.09091ZM0.522727 7.31818C0.384091 7.31818 0.251134 7.26311 0.153103 7.16508C0.0550729 7.06705 0 6.93409 0 6.79545C0 6.65682 0.0550729 6.52386 0.153103 6.42583C0.251134 6.3278 0.384091 6.27273 0.522727 6.27273H2.52477C2.68682 6.64386 2.89591 6.99409 3.13636 7.31818H0.522727ZM1.04545 4.70455C0.906819 4.70455 0.773861 4.64947 0.67583 4.55144C0.5778 4.45341 0.522727 4.32045 0.522727 4.18182C0.522727 4.04318 0.5778 3.91022 0.67583 3.81219C0.773861 3.71416 0.906819 3.65909 1.04545 3.65909H2.11705L2.09091 4.18182L2.11705 4.70455H1.04545ZM1.56818 2.09091C1.42955 2.09091 1.29659 2.03584 1.19856 1.93781C1.10053 1.83978 1.04545 1.70682 1.04545 1.56818C1.04545 1.42955 1.10053 1.29659 1.19856 1.19856C1.29659 1.10053 1.42955 1.04545 1.56818 1.04545H3.13636C2.89591 1.36955 2.68682 1.71977 2.52477 2.09091H1.56818Z\"\n                  fill=\"#15803C\"\n                />\n              </svg>\n            }\n            @if (!row.instant) {\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 12 12\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M3.30078 6.50195C3.20312 6.50195 3.12174 6.4694 3.05664 6.4043C2.99154 6.33919 2.95898 6.25781 2.95898 6.16016C2.95898 6.06576 2.99154 5.986 3.05664 5.9209C3.12174 5.85579 3.20312 5.82324 3.30078 5.82324H5.5127V2.86914C5.5127 2.77474 5.54525 2.69499 5.61035 2.62988C5.67546 2.56478 5.75521 2.53223 5.84961 2.53223C5.94727 2.53223 6.02865 2.56478 6.09375 2.62988C6.15885 2.69499 6.19141 2.77474 6.19141 2.86914V6.16016C6.19141 6.25781 6.15885 6.33919 6.09375 6.4043C6.02865 6.4694 5.94727 6.50195 5.84961 6.50195H3.30078ZM5.85449 10.9551C5.16764 10.9551 4.52311 10.8249 3.9209 10.5645C3.31868 10.3073 2.78971 9.95085 2.33398 9.49512C1.87826 9.03939 1.52018 8.51042 1.25977 7.9082C1.0026 7.30599 0.874023 6.66146 0.874023 5.97461C0.874023 5.28776 1.0026 4.64323 1.25977 4.04102C1.52018 3.4388 1.87826 2.90983 2.33398 2.4541C2.78971 1.99512 3.31868 1.63704 3.9209 1.37988C4.52311 1.12272 5.16764 0.994141 5.85449 0.994141C6.54134 0.994141 7.18587 1.12272 7.78809 1.37988C8.3903 1.63704 8.91927 1.99512 9.375 2.4541C9.83073 2.90983 10.1872 3.4388 10.4443 4.04102C10.7048 4.64323 10.835 5.28776 10.835 5.97461C10.835 6.66146 10.7048 7.30599 10.4443 7.9082C10.1872 8.51042 9.83073 9.03939 9.375 9.49512C8.91927 9.95085 8.3903 10.3073 7.78809 10.5645C7.18587 10.8249 6.54134 10.9551 5.85449 10.9551ZM5.85449 10.125C6.42741 10.125 6.96452 10.0176 7.46582 9.80273C7.96712 9.58789 8.4082 9.29004 8.78906 8.90918C9.16992 8.52832 9.46777 8.08724 9.68262 7.58594C9.89746 7.08464 10.0049 6.54753 10.0049 5.97461C10.0049 5.40169 9.89746 4.86458 9.68262 4.36328C9.46777 3.85872 9.16992 3.41764 8.78906 3.04004C8.4082 2.65918 7.96712 2.36133 7.46582 2.14648C6.96452 1.93164 6.42741 1.82422 5.85449 1.82422C5.28158 1.82422 4.74447 1.93164 4.24316 2.14648C3.74186 2.36133 3.30078 2.65918 2.91992 3.04004C2.53906 3.41764 2.24121 3.85872 2.02637 4.36328C1.81152 4.86458 1.7041 5.40169 1.7041 5.97461C1.7041 6.54753 1.81152 7.08464 2.02637 7.58594C2.24121 8.08724 2.53906 8.52832 2.91992 8.90918C3.30078 9.29004 3.74186 9.58789 4.24316 9.80273C4.74447 10.0176 5.28158 10.125 5.85449 10.125Z\"\n                  fill=\"#0B54C2\"\n                />\n              </svg>\n            }\n            {{ row.instant ? 'Instant' : paymentBadgeKey() }}\n          </span>\n\n          @if (row.isLoyalty) {\n            <div\n              class=\"refund-method-selector__notice refund-method-selector__notice--info\"\n            >\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <circle\n                  cx=\"12\"\n                  cy=\"12\"\n                  r=\"9\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.6\"\n                />\n                <path\n                  d=\"M12 11v5.5M12 8v.01\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.6\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n              <span>External loyalty points are refunded to your almatar Wallet as permanent points and ready to use in your next booking.</span>\n            </div>\n          }\n        }\n      </span>\n    </button>\n  }\n</div>\n\n<ng-template #madaLogo>\n  <svg\n    width=\"43\"\n    height=\"15\"\n    viewBox=\"0 0 43 15\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g clip-path=\"url(#clip0_rms_mada)\">\n      <path d=\"M18.1894 8.6543H0V14.9933H18.1894V8.6543Z\" fill=\"#84B740\" />\n      <path d=\"M18.1894 0H0V6.34463H18.1894V0Z\" fill=\"#259BD6\" />\n      <path\n        d=\"M36.3779 13.7034L36.2969 13.7203C36.016 13.7768 35.9134 13.7994 35.7082 13.7994C35.233 13.7994 34.6713 13.5452 34.6713 12.3475C34.6713 11.7316 34.7685 10.9124 35.6542 10.9124H35.6596C35.8108 10.9237 35.9836 10.9407 36.3077 11.0424L36.3779 11.065V13.7034ZM36.5237 7.73164L36.3779 7.75989V9.97458L36.2483 9.93503L36.2105 9.92373C36.0647 9.87853 35.7298 9.77684 35.4058 9.77684C33.6344 9.77684 33.2617 11.178 33.2617 12.3531C33.2617 13.9633 34.1258 14.8898 35.6326 14.8898C36.2699 14.8898 36.7397 14.822 37.215 14.6582C37.6524 14.5113 37.8091 14.3023 37.8091 13.8559V7.5C37.3878 7.5791 36.9504 7.65819 36.5237 7.73164Z\"\n        fill=\"#747583\"\n      />\n      <path\n        d=\"M41.651 13.7385L41.5754 13.7611L41.3053 13.8345C41.0515 13.9023 40.8247 13.9419 40.6519 13.9419C40.236 13.9419 39.9876 13.7272 39.9876 13.36C39.9876 13.1227 40.0902 12.7215 40.7707 12.7215H41.651V13.7385ZM41.0299 9.74414C40.4844 9.74414 39.9228 9.84584 39.2261 10.0718L38.7724 10.2131L38.9236 11.2865L39.3665 11.134C39.831 10.9758 40.4088 10.8741 40.8409 10.8741C41.0353 10.8741 41.6294 10.8741 41.6294 11.5464V11.8402H40.8031C39.2963 11.8402 38.5996 12.343 38.5996 13.4221C38.5996 14.343 39.2423 14.8967 40.3224 14.8967C40.6573 14.8967 41.1217 14.8289 41.5214 14.7272L41.543 14.7215L41.5646 14.7272L41.6996 14.7498C42.1208 14.8289 42.5583 14.908 42.9849 14.9927V11.4673C42.9849 10.3261 42.3261 9.74414 41.0299 9.74414Z\"\n        fill=\"#747583\"\n      />\n      <path\n        d=\"M31.1527 13.7385L31.0771 13.7611L30.807 13.8345C30.5532 13.9023 30.3318 13.9419 30.1536 13.9419C29.7377 13.9419 29.4893 13.7272 29.4893 13.36C29.4893 13.1227 29.5919 12.7215 30.267 12.7215H31.1473L31.1527 13.7385ZM30.537 9.74414C29.9861 9.74414 29.4299 9.84584 28.7332 10.0718L28.2795 10.2131L28.4308 11.2865L28.8736 11.134C29.3381 10.9758 29.9159 10.8741 30.348 10.8741C30.5424 10.8741 31.1365 10.8741 31.1365 11.5464V11.8402H30.3102C28.8034 11.8402 28.1013 12.343 28.1013 13.4221C28.1013 14.343 28.744 14.8967 29.8295 14.8967C30.1644 14.8967 30.6288 14.8289 31.0285 14.7272L31.0501 14.7215L31.0717 14.7272L31.2013 14.7498C31.6279 14.8289 32.06 14.908 32.4866 14.9984V11.473C32.492 10.3204 31.8332 9.74414 30.537 9.74414Z\"\n        fill=\"#747583\"\n      />\n      <path\n        d=\"M25.4701 9.7576C24.7842 9.7576 24.2172 9.99489 24.0065 10.0966L23.9525 10.1248L23.9039 10.0853C23.6123 9.86495 23.1856 9.75195 22.5916 9.75195C22.0677 9.75195 21.5762 9.83105 21.0416 9.99489C20.5825 10.1418 20.4043 10.3734 20.4043 10.8085V14.8367H21.8409V11.1135L21.9111 11.0909C22.2027 10.9892 22.3755 10.9723 22.543 10.9723C22.9588 10.9723 23.1694 11.2039 23.1694 11.6559V14.8423H24.5844V11.5938C24.5844 11.4017 24.5466 11.2887 24.5412 11.2661L24.4926 11.17L24.5898 11.1248C24.8058 11.0231 25.0435 10.9723 25.2919 10.9723C25.5781 10.9723 25.9184 11.0909 25.9184 11.6559V14.8423H27.3279V11.509C27.3279 10.3282 26.7231 9.7576 25.4701 9.7576Z\"\n        fill=\"#747583\"\n      />\n      <path\n        d=\"M40.5866 4.13559C40.3759 4.13559 40.0249 4.113 39.7495 4.0565L39.6684 4.03955V1.86441C39.6684 1.68362 39.636 1.57062 39.6306 1.55367L39.5874 1.46328L39.6793 1.42373C39.7009 1.41243 39.7225 1.40678 39.7495 1.39548L39.7657 1.38418C39.7981 1.37288 39.8305 1.36158 39.8629 1.35028C39.8791 1.34463 39.8899 1.33898 39.9007 1.33898C40.2193 1.24859 40.511 1.25989 40.6406 1.24859H40.646C41.5263 1.24859 41.6289 2.0678 41.6289 2.68362C41.6235 3.88136 41.0564 4.13559 40.5866 4.13559ZM40.5812 0C40.5704 0 40.5542 0 40.5434 0C39.7171 0 38.8692 0.237288 38.5667 0.700565C38.4047 0.926554 38.3129 1.20904 38.3075 1.54237V3.78531C38.3075 3.9774 38.2697 4.05085 38.2643 4.0678L38.2157 4.16384H35.6072V2.60452H35.6018C35.5694 0.960452 34.6404 0.0564972 33.2957 0.0564972H33.1391H31.9833C31.9293 0.457627 31.8861 0.740113 31.8321 1.14124H33.1391C33.8249 1.14124 34.1868 1.75141 34.1868 2.68927V4.25989L34.095 4.20904C34.0788 4.20339 33.9654 4.16384 33.7871 4.16384H31.5297C31.4865 4.46328 31.4325 4.85311 31.373 5.24294H38.3129C38.5505 5.19209 38.8259 5.14689 39.0636 5.10735C39.4146 5.28814 40.0681 5.38418 40.5164 5.38418C42.0231 5.38418 43.0007 4.32768 43.0007 2.70057C42.9953 1.0904 42.0501 0.0338983 40.5812 0Z\"\n        fill=\"#747583\"\n      />\n      <path\n        d=\"M28.4189 5.90821H28.4837C29.9905 5.90821 30.6925 5.38844 30.6925 4.10595C30.6925 3.18505 30.0499 2.45059 28.9697 2.45059H27.5818C27.1659 2.45059 26.9175 2.202 26.9175 1.78392C26.9175 1.50143 27.0201 1.15115 27.7006 1.15115H30.7357C30.8006 0.738723 30.833 0.478836 30.8924 0.0664062H27.7384C26.2694 0.0664062 25.5295 0.710474 25.5295 1.78392C25.5295 2.84607 26.1722 3.39974 27.2523 3.39974H28.6403C29.0561 3.39974 29.3046 3.74437 29.3046 4.10595C29.3046 4.34324 29.202 4.83477 28.5269 4.83477H28.2947L23.8499 4.82347H23.0398C22.3539 4.82347 21.8733 4.41669 21.8733 3.47319V2.82347C21.8733 1.84042 22.2459 1.23025 23.0398 1.23025H24.3576C24.417 0.812169 24.4548 0.546632 24.5088 0.151152H22.867H22.7104C21.3656 0.151152 20.4367 1.09466 20.4043 2.73872V2.80087V3.47319C20.4367 5.11725 21.3656 5.90256 22.7104 5.90256H22.867H24.0227L26.4314 5.90821H27.868H28.4189Z\"\n        fill=\"#747583\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_rms_mada\">\n        <rect width=\"43\" height=\"15\" fill=\"white\" />\n      </clipPath>\n    </defs>\n  </svg>\n</ng-template>\n", styles: [".refund-method-selector{display:flex;flex-direction:column;gap:16px}.refund-method-selector strong{direction:ltr;display:inline-flex;align-items:center;gap:4px}.refund-method-selector__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:-40px -16px 0;padding:16px;background:var(--almatar-neutral-surface-card, #fff);border-bottom:1px solid var(--almatar-primary-border-disabled)}.refund-method-selector__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;background:none;border:none;padding:2px;color:var(--almatar-neutral-text-primary-static, #1c1c28);cursor:pointer}.refund-method-selector__close svg{display:block;flex-shrink:0;stroke:currentColor}:host-context(.rtl) .refund-method-selector__close:first-child svg{transform:scaleX(-1)}.refund-method-selector__header-text{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:start}.refund-method-selector__title{font-size:calc(17 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:var(--almatar-neutral-text-primary-static);margin:0}.refund-method-selector__sub{font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static)}.refund-method-selector__amount{display:flex;align-items:center;justify-content:space-between;padding:20px;background:linear-gradient(135deg,#f0fdf5,#dcfce7);border:1px solid #bbf7d0;border-radius:12px;box-shadow:0 2px 8px #15803c1a}.refund-method-selector__amount span{font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:600;color:#15803c}.refund-method-selector__amount strong{display:inline-flex;align-items:center;gap:6px;font-size:calc(28 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:700;color:#15803c;font-variant-numeric:tabular-nums}.refund-method-selector__option{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:start;padding:18px;border-radius:12px;border:2px solid #e2e8f0;background:#fff;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 3px #0000000d}.refund-method-selector__option:hover:not(.refund-method-selector__option--active){border-color:#cbd5e1;box-shadow:0 4px 12px #00000014;transform:translateY(-1px)}.refund-method-selector__option--active{border-color:#3b82f6;background:linear-gradient(135deg,#eff6ff,#dbeafe);box-shadow:0 0 0 3px #3b82f61a,0 4px 12px #3b82f626}.refund-method-selector__option--static{flex-direction:column;align-items:stretch;cursor:default}.refund-method-selector__option--static .refund-method-selector__name{font-weight:var(--almatar-font-weight-medium)}.refund-method-selector__credit-shell-row{display:flex;align-items:flex-start;gap:12px}.refund-method-selector__section-title{margin:0;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:var(--almatar-neutral-text-primary-static)}.refund-method-selector__name-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}.refund-method-selector__item-amount{flex-shrink:0;font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:var(--almatar-neutral-text-primary-static);font-variant-numeric:tabular-nums}.refund-method-selector__option--addons{flex-direction:column;align-items:stretch;cursor:default;gap:0}.refund-method-selector__option--addons .refund-method-selector__notice{margin-top:14px}.refund-method-selector__addon-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-primary-static);border-bottom:1px solid var(--almatar-primary-border-disabled)}.refund-method-selector__addon-row:first-of-type{padding-top:0}.refund-method-selector__addon-row strong{color:var(--almatar-neutral-text-secondary-static);font-weight:var(--almatar-font-weight-regular)}.refund-method-selector__addon-row--total{padding-bottom:0;border-bottom:none;font-weight:var(--almatar-font-weight-semibold);color:var(--almatar-neutral-text-primary-static)}.refund-method-selector__addon-row--total strong{color:var(--almatar-neutral-text-primary-static);font-weight:var(--almatar-font-weight-semibold)}.refund-method-selector__icon{flex-shrink:0;width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid #e2e8f0;color:#1e293b;box-shadow:0 2px 4px #0000000a;transition:all .2s ease}.refund-method-selector__option:hover .refund-method-selector__icon{background:linear-gradient(135deg,#eff6ff,#dbeafe);border-color:#3b82f6;box-shadow:0 4px 8px #3b82f626}.refund-method-selector__option--active .refund-method-selector__icon{background:linear-gradient(135deg,#3b82f6,#2563eb);border-color:#2563eb;color:#fff;box-shadow:0 4px 12px #3b82f64d}.refund-method-selector__body{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.refund-method-selector__name{font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:var(--almatar-neutral-text-primary-static);display:inline-flex;align-items:center;gap:6px}.refund-method-selector__desc{font-size:calc(13 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static)}.refund-method-selector__badge{margin-top:6px;font-size:calc(11 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:5px 12px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;box-shadow:0 2px 4px #00000014}.refund-method-selector__badge svg{flex-shrink:0}.refund-method-selector__badge--instant{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#15803c;border:1px solid #86efac}.refund-method-selector__badge--days,.refund-method-selector__badge--loyalty{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1e40af;border:1px solid #93c5fd}.refund-method-selector__option-end{flex-shrink:0;display:flex;align-items:center;gap:8px}.refund-method-selector__radio{flex-shrink:0;width:22px;height:22px;margin-top:2px;border-radius:50%;border:2px solid #cbd5e1;position:relative;background:#fff;transition:all .2s ease;box-shadow:0 1px 3px #0000001a}.refund-method-selector__option:hover .refund-method-selector__radio{border-color:#3b82f6;box-shadow:0 2px 6px #3b82f633}.refund-method-selector__option--active .refund-method-selector__radio{border-color:#3b82f6;background:#fff;box-shadow:0 0 0 3px #3b82f61a,0 2px 6px #3b82f633}.refund-method-selector__option--active .refund-method-selector__radio:after{content:\"\";position:absolute;inset:4px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 1px 2px #2563eb66}.refund-method-selector__option--split{flex-wrap:wrap}.refund-method-selector__split-total{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:var(--almatar-neutral-text-primary-static);font-variant-numeric:tabular-nums}.refund-method-selector__split-breakdown{flex-basis:calc(100% - 56px);width:calc(100% - 56px);margin-inline-start:56px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--almatar-primary-border-disabled)}.refund-method-selector__split-row{flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-primary-static)}.refund-method-selector__split-row strong{display:inline-flex;align-items:center;gap:4px;font-weight:var(--almatar-font-weight-semibold);font-variant-numeric:tabular-nums}.refund-method-selector__split-label{color:var(--almatar-neutral-text-primary-static);display:inline-flex;align-items:center;gap:6px}.refund-method-selector__mada-logo{display:inline-flex;align-items:center;flex-shrink:0}.refund-method-selector__mada-logo svg{display:block}.refund-method-selector__notice{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:500;line-height:1.5}.refund-method-selector__notice svg{flex-shrink:0;width:18px;height:18px;margin-top:1px}.refund-method-selector__notice--info{background:linear-gradient(135deg,#dbeafe,#eff6ff);border:1px solid #93c5fd;color:#1e40af;box-shadow:0 2px 4px #3b82f61a}.refund-method-selector__notice--info svg{color:#2563eb}.refund-method-selector__notice--muted{background:#f8fafc;border:1px solid #e2e8f0;color:#64748b;box-shadow:0 1px 3px #0000000d}.refund-method-selector__notice--muted svg{color:#94a3b8}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], bookingId: [{
@@ -5008,7 +4979,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class AlmatarHotelAutoCancellationResultOverlayComponent {
     constructor() {
         this.translateService = inject(TranslationService);
-        this.store = inject(Store);
         this.sharedService = inject(SharedService);
         this.destroyRef = inject(DestroyRef);
         // Currency
@@ -5040,17 +5010,18 @@ class AlmatarHotelAutoCancellationResultOverlayComponent {
             }
             return this.buildRowsFromApiResponse(response);
         });
+        // Sync currency input to local signal
+        effect(() => {
+            const inputCurrency = this.currencyObj();
+            if (inputCurrency) {
+                this.currentCurrency.set(inputCurrency);
+            }
+        }, { allowSignalWrites: true });
     }
     ngOnInit() {
         this.initCurrency();
     }
     initCurrency() {
-        this.store
-            .select(getCurrentCurrency)
-            .pipe(filter((currency) => !!currency), takeUntilDestroyed(this.destroyRef))
-            .subscribe((currency) => {
-            this.currentCurrency.set(currency);
-        });
         this.sharedService
             .getBaseCurrency()
             .pipe(takeUntilDestroyed(this.destroyRef))
@@ -5200,7 +5171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         CurrencyCodeIconComponent,
                         ExchangePipeModule,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"result-overlay\" [class.result-overlay--visible]=\"visible()\">\n  <div class=\"result-overlay__backdrop\"></div>\n  <div class=\"result-overlay__modal\">\n    <div class=\"result-overlay__hero\">\n      <span class=\"result-overlay__icon result-overlay__icon--green\">\n        <svg\n          width=\"114\"\n          height=\"114\"\n          viewBox=\"0 0 114 114\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle cx=\"57\" cy=\"57\" r=\"42\" fill=\"#6DE197\" />\n          <path\n            d=\"M71.417 43.5774C73.169 41.8254 76.0097 41.8254 77.7617 43.5774C79.5134 45.3294 79.5136 48.1702 77.7617 49.9221L55.4248 72.2581C54.5835 73.0992 53.4426 73.5715 52.2529 73.5715C51.0632 73.5715 49.9224 73.0992 49.0811 72.2581L36.3174 59.4944C34.5654 57.7424 34.5654 54.9017 36.3174 53.1497C38.0694 51.3978 40.9102 51.3977 42.6621 53.1497L52.041 62.5286C52.0973 62.5848 52.1734 62.6165 52.2529 62.6165C52.3325 62.6164 52.4086 62.5848 52.4648 62.5286L71.417 43.5774Z\"\n            fill=\"url(#paint0_linear_hotel_result)\"\n            fill-opacity=\"0.9\"\n            stroke=\"url(#paint1_linear_hotel_result)\"\n            stroke-width=\"0.6\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <defs>\n            <linearGradient\n              id=\"paint0_linear_hotel_result\"\n              x1=\"41.6842\"\n              y1=\"54.1291\"\n              x2=\"111.486\"\n              y2=\"62.3784\"\n              gradientUnits=\"userSpaceOnUse\"\n            >\n              <stop stop-color=\"white\" />\n              <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\" />\n            </linearGradient>\n            <linearGradient\n              id=\"paint1_linear_hotel_result\"\n              x1=\"42.6803\"\n              y1=\"51.352\"\n              x2=\"61.1185\"\n              y2=\"79.3662\"\n              gradientUnits=\"userSpaceOnUse\"\n            >\n              <stop stop-color=\"white\" />\n              <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\" />\n            </linearGradient>\n          </defs>\n        </svg>\n      </span>\n      <h3 class=\"result-overlay__title\">\n        {{ isNilRefund() ? 'Cancellation Confirmed' : 'Refund Confirmed' }}\n      </h3>\n    </div>\n\n    @for (row of refundRows(); track $index) {\n      <div\n        class=\"result-overlay__row\"\n        [class.result-overlay__row--with-breakdown]=\"\n          row.loyaltySubItems?.length\n        \"\n      >\n        <!-- Wallet Icon -->\n        @if (isWalletRow(row)) {\n          <span class=\"result-overlay__method-icon\">\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 22 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <g clip-path=\"url(#clip0_wallet_result)\">\n                <path\n                  d=\"M2.67627 20.8852C1.74854 20.8852 1.04655 20.6533 0.570312 20.1894C0.10026 19.7256 -0.134766 19.0359 -0.134766 18.1206V8.51852C-0.134766 7.77015 0.0260417 7.1764 0.347656 6.73727C0.675456 6.29815 1.1888 5.97344 1.8877 5.76315L13.7812 2.3027C14.4554 2.11097 15.0584 2.06149 15.5903 2.15427C16.1284 2.24704 16.549 2.49443 16.8521 2.89645C17.1613 3.29229 17.3159 3.85511 17.3159 4.58493V6.25485L15.8037 6.38473V4.45505C15.8037 4.04684 15.6893 3.76543 15.4604 3.61081C15.2316 3.45619 14.8945 3.44382 14.4492 3.5737L7.27783 5.55905C7.19124 5.5776 7.15104 5.61471 7.15723 5.67038C7.16341 5.71986 7.20671 5.7446 7.28711 5.7446H17.5942C18.5282 5.7446 19.2271 5.97962 19.6909 6.44968C20.161 6.91354 20.396 7.60316 20.396 8.51852V10.8564H18.8931V8.60202C18.8931 8.15671 18.7786 7.81963 18.5498 7.59079C18.321 7.36195 17.9932 7.24753 17.5664 7.24753H2.69482C2.26807 7.24753 1.94027 7.36195 1.71143 7.59079C1.48877 7.81963 1.37744 8.15671 1.37744 8.60202V18.0371C1.37744 18.4824 1.48877 18.8164 1.71143 19.039C1.94027 19.2679 2.26807 19.3823 2.69482 19.3823H17.5664C17.9932 19.3823 18.321 19.2679 18.5498 19.039C18.7786 18.8164 18.8931 18.4824 18.8931 18.0371V15.4394H20.396V18.1206C20.396 19.0359 20.161 19.7256 19.6909 20.1894C19.2271 20.6533 18.5282 20.8852 17.5942 20.8852H2.67627ZM16.7686 14.2334C16.5088 14.2334 16.2861 14.1437 16.1006 13.9643C15.9212 13.7788 15.8315 13.5561 15.8315 13.2964C15.8315 13.0366 15.9212 12.817 16.1006 12.6377C16.2861 12.4521 16.5088 12.3593 16.7686 12.3593C17.0283 12.3593 17.2479 12.4521 17.4272 12.6377C17.6128 12.817 17.7056 13.0366 17.7056 13.2964C17.7056 13.5561 17.6128 13.7788 17.4272 13.9643C17.2479 14.1437 17.0283 14.2334 16.7686 14.2334ZM16.6758 16.2187C15.7419 16.2187 14.9873 15.9775 14.4121 15.4951C13.8369 15.0065 13.5493 14.2767 13.5493 13.3056C13.5493 12.3346 13.8369 11.6079 14.4121 11.1255C14.9873 10.643 15.7419 10.4018 16.6758 10.4018H20.1084C20.6898 10.4018 21.1475 10.5812 21.4814 10.9399C21.8216 11.2986 21.9917 11.7439 21.9917 12.2758V14.3354C21.9917 14.8673 21.8216 15.3157 21.4814 15.6806C21.1475 16.0394 20.6898 16.2187 20.1084 16.2187H16.6758ZM16.7686 14.9756H19.7837C20.1053 14.9756 20.3465 14.8921 20.5073 14.7251C20.6743 14.5519 20.7578 14.3138 20.7578 14.0107V12.6006C20.7578 12.2975 20.6743 12.0625 20.5073 11.8955C20.3465 11.7223 20.1053 11.6357 19.7837 11.6357H16.7686C16.1191 11.6357 15.6367 11.7841 15.3213 12.081C15.012 12.3779 14.8574 12.7861 14.8574 13.3056C14.8574 13.8252 15.012 14.2334 15.3213 14.5302C15.6367 14.8271 16.1191 14.9756 16.7686 14.9756Z\"\n                  fill=\"black\"\n                />\n              </g>\n              <defs>\n                <clipPath id=\"clip0_wallet_result\">\n                  <rect width=\"24\" height=\"24\" fill=\"white\" />\n                </clipPath>\n              </defs>\n            </svg>\n          </span>\n        }\n\n        <!-- Card Icon -->\n        @if (!isWalletRow(row)) {\n          <span class=\"result-overlay__method-icon\">\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M2.25 8.25H21.75M2.25 9H21.75M5.25 14.25H11.25M5.25 16.5H8.25M4.5 19.5H19.5C20.0967 19.5 20.669 19.2629 21.091 18.841C21.5129 18.419 21.75 17.8467 21.75 17.25V6.75C21.75 6.15326 21.5129 5.58097 21.091 5.15901C20.669 4.73705 20.0967 4.5 19.5 4.5H4.5C3.90326 4.5 3.33097 4.73705 2.90901 5.15901C2.48705 5.58097 2.25 6.15326 2.25 6.75V17.25C2.25 17.8467 2.48705 18.419 2.90901 18.841C3.33097 19.2629 3.90326 19.5 4.5 19.5Z\"\n                stroke=\"#1B1A1F\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </span>\n        }\n\n        <span class=\"result-overlay__body\">\n          <span class=\"result-overlay__method-name\">\n            <span class=\"result-overlay__method-block\">\n              {{ row.label }}\n\n              @if (!isWalletRow(row) && !row?.isInstallment) {\n                <span class=\"mada-logo\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"43\"\n                    height=\"15\"\n                    viewBox=\"0 0 43 15\"\n                    fill=\"none\"\n                  >\n                    <g clip-path=\"url(#clip0_19158_27303)\">\n                      <path\n                        d=\"M18.1894 8.65527H0V14.9943H18.1894V8.65527Z\"\n                        fill=\"#84B740\"\n                      />\n                      <path\n                        d=\"M18.1894 0H0V6.34463H18.1894V0Z\"\n                        fill=\"#259BD6\"\n                      />\n                      <path\n                        d=\"M36.3779 13.7034L36.2969 13.7203C36.016 13.7768 35.9134 13.7994 35.7082 13.7994C35.233 13.7994 34.6713 13.5452 34.6713 12.3475C34.6713 11.7316 34.7685 10.9124 35.6542 10.9124H35.6596C35.8108 10.9237 35.9836 10.9407 36.3077 11.0424L36.3779 11.065V13.7034ZM36.5237 7.73164L36.3779 7.75989V9.97458L36.2483 9.93503L36.2105 9.92373C36.0647 9.87853 35.7298 9.77684 35.4058 9.77684C33.6344 9.77684 33.2617 11.178 33.2617 12.3531C33.2617 13.9633 34.1258 14.8898 35.6326 14.8898C36.2699 14.8898 36.7397 14.822 37.215 14.6582C37.6524 14.5113 37.8091 14.3023 37.8091 13.8559V7.5C37.3878 7.5791 36.9504 7.65819 36.5237 7.73164Z\"\n                        fill=\"#747583\"\n                      />\n                      <path\n                        d=\"M41.651 13.7375L41.5754 13.7601L41.3053 13.8336C41.0515 13.9014 40.8247 13.9409 40.6519 13.9409C40.236 13.9409 39.9876 13.7262 39.9876 13.359C39.9876 13.1217 40.0902 12.7206 40.7707 12.7206H41.651V13.7375ZM41.0299 9.74316C40.4844 9.74316 39.9228 9.84486 39.2261 10.0708L38.7724 10.2121L38.9236 11.2855L39.3665 11.133C39.831 10.9748 40.4088 10.8731 40.8409 10.8731C41.0353 10.8731 41.6294 10.8731 41.6294 11.5454V11.8392H40.8031C39.2963 11.8392 38.5996 12.342 38.5996 13.4211C38.5996 14.342 39.2423 14.8957 40.3224 14.8957C40.6573 14.8957 41.1217 14.8279 41.5214 14.7262L41.543 14.7206L41.5646 14.7262L41.6996 14.7488C42.1208 14.8279 42.5583 14.907 42.9849 14.9918V11.4663C42.9849 10.3251 42.3261 9.74316 41.0299 9.74316Z\"\n                        fill=\"#747583\"\n                      />\n                      <path\n                        d=\"M31.1529 13.7375L31.0773 13.7601L30.8073 13.8336C30.5535 13.9014 30.332 13.9409 30.1538 13.9409C29.738 13.9409 29.4895 13.7262 29.4895 13.359C29.4895 13.1217 29.5921 12.7206 30.2672 12.7206H31.1475L31.1529 13.7375ZM30.5373 9.74316C29.9864 9.74316 29.4301 9.84486 28.7334 10.0708L28.2798 10.2121L28.431 11.2855L28.8739 11.133C29.3383 10.9748 29.9162 10.8731 30.3482 10.8731C30.5427 10.8731 31.1367 10.8731 31.1367 11.5454V11.8392H30.3104C28.8036 11.8392 28.1016 12.342 28.1016 13.4211C28.1016 14.342 28.7442 14.8957 29.8298 14.8957C30.1646 14.8957 30.6291 14.8279 31.0287 14.7262L31.0503 14.7206L31.0719 14.7262L31.2015 14.7488C31.6282 14.8279 32.0602 14.907 32.4869 14.9974V11.472C32.4923 10.3194 31.8334 9.74316 30.5373 9.74316Z\"\n                        fill=\"#747583\"\n                      />\n                      <path\n                        d=\"M25.4701 9.7576C24.7842 9.7576 24.2172 9.99489 24.0065 10.0966L23.9525 10.1248L23.9039 10.0853C23.6123 9.86495 23.1856 9.75195 22.5916 9.75195C22.0677 9.75195 21.5762 9.83105 21.0416 9.99489C20.5825 10.1418 20.4043 10.3734 20.4043 10.8085V14.8367H21.8409V11.1135L21.9111 11.0909C22.2027 10.9892 22.3755 10.9723 22.543 10.9723C22.9588 10.9723 23.1694 11.2039 23.1694 11.6559V14.8423H24.5844V11.5938C24.5844 11.4017 24.5466 11.2887 24.5412 11.2661L24.4926 11.17L24.5898 11.1248C24.8058 11.0231 25.0435 10.9723 25.2919 10.9723C25.5781 10.9723 25.9184 11.0909 25.9184 11.6559V14.8423H27.3279V11.509C27.3279 10.3282 26.7231 9.7576 25.4701 9.7576Z\"\n                        fill=\"#747583\"\n                      />\n                      <path\n                        d=\"M40.5866 4.13559C40.3759 4.13559 40.0249 4.113 39.7495 4.0565L39.6684 4.03955V1.86441C39.6684 1.68362 39.636 1.57062 39.6306 1.55367L39.5874 1.46328L39.6793 1.42373C39.7009 1.41243 39.7225 1.40678 39.7495 1.39548L39.7657 1.38418C39.7981 1.37288 39.8305 1.36158 39.8629 1.35028C39.8791 1.34463 39.8899 1.33898 39.9007 1.33898C40.2193 1.24859 40.511 1.25989 40.6406 1.24859H40.646C41.5263 1.24859 41.6289 2.0678 41.6289 2.68362C41.6235 3.88136 41.0564 4.13559 40.5866 4.13559ZM40.5812 0C40.5704 0 40.5542 0 40.5434 0C39.7171 0 38.8692 0.237288 38.5667 0.700565C38.4047 0.926554 38.3129 1.20904 38.3075 1.54237V3.78531C38.3075 3.9774 38.2697 4.05085 38.2643 4.0678L38.2157 4.16384H35.6072V2.60452H35.6018C35.5694 0.960452 34.6404 0.0564972 33.2957 0.0564972H33.1391H31.9833C31.9293 0.457627 31.8861 0.740113 31.8321 1.14124H33.1391C33.8249 1.14124 34.1868 1.75141 34.1868 2.68927V4.25989L34.095 4.20904C34.0788 4.20339 33.9654 4.16384 33.7871 4.16384H31.5297C31.4865 4.46328 31.4325 4.85311 31.373 5.24294H38.3129C38.5505 5.19209 38.8259 5.14689 39.0636 5.10735C39.4146 5.28814 40.0681 5.38418 40.5164 5.38418C42.0231 5.38418 43.0007 4.32768 43.0007 2.70057C42.9953 1.0904 42.0501 0.0338983 40.5812 0Z\"\n                        fill=\"#747583\"\n                      />\n                      <path\n                        d=\"M28.4189 5.9087H28.4837C29.9905 5.9087 30.6925 5.38893 30.6925 4.10644C30.6925 3.18554 30.0499 2.45108 28.9697 2.45108H27.5818C27.1659 2.45108 26.9175 2.20249 26.9175 1.78441C26.9175 1.50192 27.0201 1.15164 27.7006 1.15164H30.7357C30.8006 0.739211 30.833 0.479324 30.8924 0.0668945H27.7384C26.2694 0.0668945 25.5295 0.710962 25.5295 1.78441C25.5295 2.84656 26.1722 3.40023 27.2523 3.40023H28.6403C29.0561 3.40023 29.3046 3.74486 29.3046 4.10644C29.3046 4.34373 29.202 4.83526 28.5269 4.83526H28.2947L23.8499 4.82396H23.0398C22.3539 4.82396 21.8733 4.41718 21.8733 3.47367V2.82396C21.8733 1.84091 22.2459 1.23074 23.0398 1.23074H24.3576C24.417 0.812657 24.4548 0.547121 24.5088 0.15164H22.867H22.7104C21.3656 0.15164 20.4367 1.09514 20.4043 2.73921V2.80136V3.47367C20.4367 5.11774 21.3656 5.90305 22.7104 5.90305H22.867H24.0227L26.4314 5.9087H27.868H28.4189Z\"\n                        fill=\"#747583\"\n                      />\n                    </g>\n                    <defs>\n                      <clipPath id=\"clip0_19158_27303\">\n                        <rect width=\"43\" height=\"15\" fill=\"white\" />\n                      </clipPath>\n                    </defs>\n                  </svg>\n                </span>\n              }\n            </span>\n\n            <strong class=\"result-overlay__amount\">\n              {{\n                row.value | exchange_round\n              }}\n              {{ currentCurrency()?.code }}\n            </strong>\n          </span>\n\n          <!-- Loyalty breakdown sub-items -->\n          @if (row.loyaltySubItems?.length) {\n            <div class=\"result-overlay__loyalty-breakdown\">\n              @for (subItem of row.loyaltySubItems; track $index) {\n                <div class=\"result-overlay__loyalty-item\">\n                  <span class=\"result-overlay__loyalty-label\">{{\n                    subItem.label\n                  }}</span>\n                  <span class=\"result-overlay__loyalty-value\">\n                    {{\n                      subItem.value | exchange_round\n                    }}\n                    {{ currentCurrency()?.code }}\n                  </span>\n                </div>\n              }\n            </div>\n          }\n\n          <span\n            class=\"result-overlay__badge\"\n            [class.result-overlay__badge--instant]=\"row.instant\"\n            [class.result-overlay__badge--days]=\"!row.instant\"\n          >\n            {{ row.badgeKey }}\n          </span>\n\n          <!-- Loyalty note -->\n          @if (row.hasLoyaltyNote && row.loyaltySubItems?.length) {\n            <div class=\"result-overlay__loyalty-note\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n              >\n                <path\n                  d=\"M4.1582 21.1777C3.60482 21.1777 3.12956 21.0605 2.73242 20.8262C2.33529 20.5918 2.0293 20.2728 1.81445 19.8691C1.59961 19.472 1.49219 19.026 1.49219 18.5312C1.49219 18.056 1.61914 17.6003 1.87305 17.1641L9.45117 3.96094C9.69857 3.51823 10.0273 3.1862 10.4375 2.96484C10.8477 2.73698 11.2773 2.62305 11.7266 2.62305C12.1758 2.62305 12.6022 2.73698 13.0059 2.96484C13.416 3.1862 13.748 3.51823 14.002 3.96094L21.5801 17.1641C21.7038 17.3789 21.7982 17.6035 21.8633 17.8379C21.9284 18.0723 21.9609 18.3034 21.9609 18.5312C21.9609 19.026 21.8535 19.472 21.6387 19.8691C21.4238 20.2728 21.1178 20.5918 20.7207 20.8262C20.3236 21.0605 19.8483 21.1777 19.2949 21.1777H4.1582ZM4.16797 19.6445H19.2754C19.6139 19.6445 19.8809 19.5306 20.0762 19.3027C20.278 19.0814 20.3789 18.821 20.3789 18.5215C20.3789 18.3132 20.3268 18.1081 20.2227 17.9062L12.6543 4.70312C12.5501 4.52083 12.4134 4.39062 12.2441 4.3125C12.0814 4.22786 11.9089 4.18555 11.7266 4.18555C11.5443 4.18555 11.3685 4.22786 11.1992 4.3125C11.0299 4.39062 10.8932 4.52083 10.7891 4.70312L3.2207 17.8965C3.16862 18.0007 3.12956 18.1081 3.10352 18.2188C3.08398 18.3294 3.07422 18.4303 3.07422 18.5215C3.07422 18.821 3.17188 19.0814 3.36719 19.3027C3.5625 19.5306 3.82943 19.6445 4.16797 19.6445ZM11.7266 14.5859C11.2253 14.5859 10.9681 14.3288 10.9551 13.8145L10.8281 8.64844C10.8216 8.40104 10.8997 8.19596 11.0625 8.0332C11.2318 7.87044 11.4499 7.78906 11.7168 7.78906C11.9772 7.78906 12.1921 7.8737 12.3613 8.04297C12.5371 8.20573 12.6217 8.41081 12.6152 8.6582L12.4688 13.8145C12.4622 14.3288 12.2148 14.5859 11.7266 14.5859ZM11.7266 17.7598C11.4401 17.7598 11.1927 17.6621 10.9844 17.4668C10.776 17.265 10.6719 17.0241 10.6719 16.7441C10.6719 16.4642 10.776 16.2266 10.9844 16.0312C11.1927 15.8294 11.4401 15.7285 11.7266 15.7285C12.013 15.7285 12.2604 15.8262 12.4688 16.0215C12.6771 16.2168 12.7812 16.4577 12.7812 16.7441C12.7812 17.0306 12.6738 17.2715 12.459 17.4668C12.2507 17.6621 12.0065 17.7598 11.7266 17.7598Z\"\n                  fill=\"#0B54C2\"\n                />\n              </svg>\n              <span>Loyalty points will be refunded instantly to your account</span>\n            </div>\n          }\n        </span>\n      </div>\n    }\n\n    <button\n      class=\"btn btn--primary result-overlay__done\"\n      type=\"button\"\n      (click)=\"onDone()\"\n    >\n      {{ 'GOT IT!' }}\n    </button>\n  </div>\n</div>\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}.result-overlay{display:none;position:fixed;inset:0;z-index:99999999;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}.result-overlay--visible{display:flex;animation:fadeIn .3s ease-out}.result-overlay :is(strong,span):has(>app-currency-code-icon){direction:ltr;display:inline-flex;align-items:center;gap:4px}.result-overlay__backdrop{position:absolute;inset:0;background:linear-gradient(135deg,#0009,#00000073);backdrop-filter:blur(4px);animation:fadeIn .3s ease-out}.result-overlay__modal{position:relative;width:100%;max-width:540px;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;gap:20px;padding:32px 28px;border-radius:24px;background:linear-gradient(180deg,#fff,#fafafa);box-shadow:0 8px 32px #0000001f,0 2px 8px #00000014;animation:slideUp .4s cubic-bezier(.16,1,.3,1)}.result-overlay__modal::-webkit-scrollbar{width:8px}.result-overlay__modal::-webkit-scrollbar-track{background:transparent;border-radius:10px;margin:8px 0}.result-overlay__modal::-webkit-scrollbar-thumb{background:#00000026;border-radius:10px}.result-overlay__modal::-webkit-scrollbar-thumb:hover{background:#00000040}.result-overlay__hero{display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px 0 20px}.result-overlay__icon{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;animation:scaleIn .5s cubic-bezier(.34,1.56,.64,1) .2s both}.result-overlay__icon--green:before{content:\"\";position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle,#6de19726,#6de19700 70%);animation:scaleIn .6s cubic-bezier(.34,1.56,.64,1) .3s both}.result-overlay__icon svg{filter:drop-shadow(0 4px 12px rgba(109,225,151,.3))}.result-overlay__title{font-size:calc(24 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);color:#1a1a1a;margin:0;text-align:center;letter-spacing:-.02em}.result-overlay__row{display:flex;align-items:flex-start;gap:14px;width:100%;padding:18px;border-radius:16px;background:#fff;border:1px solid rgba(0,0,0,.08);transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.result-overlay__row:before{content:\"\";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#7c3aedcc,#10b981cc);transform:translate(-100%);transition:transform .3s ease}.result-overlay__row:hover{border-color:#7c3aed33;box-shadow:0 4px 12px #0000000d,0 0 0 1px #7c3aed0d;transform:translateY(-2px)}.result-overlay__row:hover:before{transform:translate(0)}.result-overlay__row--with-breakdown{padding:20px}.result-overlay__method-icon{flex-shrink:0;width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:1px solid rgba(0,0,0,.06);color:#1a1a1a;box-shadow:0 2px 4px #0000000a}.result-overlay__body{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px}.result-overlay__method-name{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#1a1a1a}.result-overlay__method-block{display:inline-flex;align-items:center;font-weight:500;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);color:#4a5568}.result-overlay__amount{display:inline-flex;align-items:center;gap:5px;font-size:calc(20 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);color:#1a1a1a;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em}.result-overlay__badge{font-size:calc(11 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);text-transform:uppercase;letter-spacing:.05em;padding:6px 12px;border-radius:24px;transition:all .2s ease}.result-overlay__badge--instant{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#15803c;border:1px solid rgba(21,128,60,.2);box-shadow:0 2px 4px #15803c1a}.result-overlay__badge--days{background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#1e40af;border:1px solid rgba(30,64,175,.2);box-shadow:0 2px 4px #1e40af1a}.result-overlay__loyalty-breakdown{width:100%;display:flex;flex-direction:column;gap:10px;padding:12px;background:linear-gradient(135deg,#f9fafb,#f3f4f6);border-radius:12px;border:1px solid rgba(0,0,0,.05)}.result-overlay__loyalty-item{display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 4px}.result-overlay__loyalty-label{font-size:calc(13 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#6b7280}.result-overlay__loyalty-value{display:inline-flex;align-items:center;gap:4px;font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:#374151;font-variant-numeric:tabular-nums;white-space:nowrap}.result-overlay__loyalty-note{display:flex;align-items:flex-start;gap:10px;width:100%;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,#edf9ff,#e0f2fe);font-size:calc(13 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#0b54c2;line-height:1.5;border:1.5px solid rgba(11,84,194,.3);box-shadow:0 2px 8px #0b54c214}.result-overlay__loyalty-note svg{flex-shrink:0;margin-top:1px;width:22px;height:22px;filter:drop-shadow(0 1px 2px rgba(11,84,194,.2))}.result-overlay__done{min-height:56px;width:100%;border-radius:16px;font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);transition:all .3s cubic-bezier(.4,0,.2,1);border:none;letter-spacing:.01em}.result-overlay__done:hover{transform:translateY(-2px);box-shadow:0 8px 20px #7c3aed59}.result-overlay__done:active{transform:translateY(0);box-shadow:0 4px 12px #7c3aed40}.btn{padding:16px 24px;border-radius:14px;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);cursor:pointer;border:none;position:relative;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn:before{content:\"\";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn:active:before{width:300px;height:300px}.btn--primary{background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;box-shadow:0 4px 16px #7c3aed40,0 2px 4px #7c3aed26}.btn--primary:hover{background:linear-gradient(135deg,#6d28d9,#5b21b6);transform:translateY(-2px);box-shadow:0 8px 20px #7c3aed59,0 4px 8px #7c3aed33;color:#fff}.btn--primary:active{transform:translateY(0);box-shadow:0 4px 12px #7c3aed40,0 2px 4px #7c3aed26}.mada-logo{margin-inline-start:12px;display:inline-flex;align-items:center;padding:4px 8px;background:#ffffffe6;border-radius:6px;border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 3px #0000000f}\n"] }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class AlmatarHotelAutoCancellationComponent {
     constructor() {
@@ -5210,7 +5181,6 @@ class AlmatarHotelAutoCancellationComponent {
         this.autoCancellationEndpointsService = inject(AlmatarHotelAutoCancellationEndpointsService);
         this.activatedRoute = inject(ActivatedRoute);
         this.destroyRef = inject(DestroyRef);
-        this.store = inject(Store);
         this.sharedService = inject(SharedService);
         this.selectedHotelBooking = input(null);
         this.closed = output();
@@ -5302,9 +5272,36 @@ class AlmatarHotelAutoCancellationComponent {
         });
         effect(() => {
             this.HotelManageBookingService.selectedHotelBooking.next(this.selectedHotelBooking());
-            // console.log('selectedHotelBooking', this.selectedHotelBooking());
-            // console.log('refundDetailsData', this.refundDetailsData());
-        });
+            console.log('selectedHotelBooking', this.selectedHotelBooking());
+            console.log('refundDetailsData', this.refundDetailsData());
+        }, { allowSignalWrites: true });
+        // Set currency from selected hotel booking
+        effect(() => {
+            const booking = this.selectedHotelBooking();
+            if (booking) {
+                // Try multiple sources for currency
+                let currency = booking.currency;
+                // Fallback: try to extract from raw data
+                if (!currency && booking.data) {
+                    const rawData = booking.data.data || booking.data;
+                    if (rawData?.sCurrency) {
+                        currency = {
+                            code: rawData.sCurrency,
+                            name: '',
+                            symbol: '',
+                            rate: rawData.sCurrencyROE || 1
+                        };
+                    }
+                }
+                if (currency) {
+                    this.currentCurrency.set(currency);
+                    console.log('Currency set to:', this.currentCurrency());
+                }
+                else {
+                    console.log('No currency found on booking');
+                }
+            }
+        }, { allowSignalWrites: true });
     }
     get closeIconName() {
         const lang = this.sharedService.getAppLanguage();
@@ -5313,15 +5310,6 @@ class AlmatarHotelAutoCancellationComponent {
     ngOnInit() {
         this.initializeQueryParams();
         this.loadBookingDataFromPackages();
-        this.initCurrency();
-    }
-    initCurrency() {
-        this.store
-            .select(getCurrentCurrency)
-            .pipe(filter((currency) => !!currency), takeUntilDestroyed(this.destroyRef))
-            .subscribe((currency) => {
-            this.currentCurrency.set(currency);
-        });
     }
     ngOnDestroy() {
         this.autoCancellationService.reset();
@@ -5562,13 +5550,13 @@ class AlmatarHotelAutoCancellationComponent {
      */
     determineLoyaltyType(totals, payout) {
         if ((totals?.mokafa ?? 0) > 0) {
-            return 'AlRajhiMokafaa';
+            return PaymentGatewayCode.AlRajhiMokafaa;
         }
         if ((totals?.qitaf ?? 0) > 0) {
-            return 'Qitaf';
+            return PaymentGatewayCode.QITAF;
         }
         if ((totals?.wala ?? 0) > 0) {
-            return 'Wala';
+            return PaymentGatewayCode.WALA;
         }
         if ((payout?.loyaltyToWallet ?? 0) > 0 ||
             (payout?.loyaltyPoints ?? 0) > 0) {
@@ -5576,11 +5564,9 @@ class AlmatarHotelAutoCancellationComponent {
             const loyaltyType = totals?.loyaltyType;
             if (loyaltyType &&
                 [
-                    'AlRajhiMokafaa',
-                    'Qitaf',
-                    'Wala',
-                    'ALFURSAN',
-                    'ALMATAR_POINTS'
+                    PaymentGatewayCode.AlRajhiMokafaa,
+                    PaymentGatewayCode.Qitaf,
+                    PaymentGatewayCode.Wala
                 ].includes(loyaltyType)) {
                 return loyaltyType;
             }
@@ -5705,7 +5691,7 @@ class AlmatarHotelAutoCancellationComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AlmatarHotelAutoCancellationComponent, isStandalone: true, selector: "almatar-hotel-auto-cancellation", inputs: { selectedHotelBooking: { classPropertyName: "selectedHotelBooking", publicName: "selectedHotelBooking", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", cancellationSuccess: "cancellationSuccess", nonRefundableSubmitSuccess: "nonRefundableSubmitSuccess", chatWithAgent: "chatWithAgent" }, providers: [
             AlmatarHotelAutoCancellationService,
             AlmatarHotelAutoCancellationEndpointsService
-        ], ngImport: i0, template: "@if (showAside()) {\n  <almatar-aside\n\n    class=\"auto_cancellation_wrapper\"\n    [asideTitle]=\"asideTitle()\"\n    [showAside]=\"showAside()\"\n    [whiteHeader]=\"true\"\n    [showHeader]=\"false\"\n    (onClose)=\"onCloseModal()\"\n  >\n    <!-- Custom Header with 60px height -->\n    <div class=\"auto_cancellation__header\">\n      @if (canGoBack()) {\n        <button class=\"auto_cancellation__header-back\" (click)=\"onGoBack()\" type=\"button\">\n          <i class=\"pi pi-arrow-left\"></i>\n        </button>\n      }\n      <div class=\"auto_cancellation__header-content\">\n        @if (currentStep() === stepEnum.selectRooms) {\n          <h2 class=\"auto_cancellation__header-title\">\n            @if (isSinglePackage()) {\n              Cancel Rooms\n            } @else {\n              Select Rooms\n            }\n          </h2>\n          <p class=\"auto_cancellation__header-subtitle\">\n            @if (isSinglePackage()) {\n              Review and confirm your cancellation\n            } @else {\n              Choose which room(s) you'd like to cancel\n            }\n          </p>\n        } @else if (currentStep() === stepEnum.refundSummary) {\n          <h2 class=\"auto_cancellation__header-title\">Cancel Booking Request</h2>\n          <p class=\"auto_cancellation__header-subtitle\">Review your refund summary and proceed</p>\n        } @else if (currentStep() === stepEnum.refundMethod) {\n          <h2 class=\"auto_cancellation__header-title\">Select Refund Method</h2>\n          <p class=\"auto_cancellation__header-subtitle\">Choose how you'd like to receive your refund</p>\n        } @else {\n          <h2 class=\"auto_cancellation__header-title\">{{ asideTitle() }}</h2>\n          <p class=\"auto_cancellation__header-subtitle\">Complete your booking cancellation</p>\n        }\n      </div>\n      <button class=\"auto_cancellation__header-close\" (click)=\"onCloseModal()\" type=\"button\">\n        <i class=\"pi pi-times\"></i>\n      </button>\n    </div>\n\n    <div class=\"auto_cancellation__component\" [class.isNusk]=\"isNusk()\">\n      @if (isLoading()) {\n        <div class=\"auto_cancellation__loading\">\n          <app-loader></app-loader>\n        </div>\n      }\n\n      @if (currentStep() === stepEnum.selectRooms && !isLoading()) {\n        <almatar-hotel-auto-cancellation-select-rooms\n          [packages]=\"packages()\"\n          [hotelInfo]=\"hotelInfo()\"\n          [bookingId]=\"selectedHotelBooking()?.bookingId\"\n          [hotelId]=\"selectedHotelBooking()?.hotelId\"\n          [currencyCode]=\"selectedHotelBooking()?.currencyCode || 'SAR'\"\n          (continueToCancel)=\"onContinueToCancel($event)\"\n          (closeModal)=\"onCloseModal()\"\n          (nonRefundableSubmitSuccess)=\"onNonRefundableSubmitSuccess($event)\"\n          (chatWithAgent)=\"onChatWithAgent()\"\n        />\n      }\n\n      @if (currentStep() === stepEnum.refundSummary && !isLoading()) {\n        <almatar-hotel-auto-cancellation-refund-summary\n          [selectedRooms]=\"autoCancellationService.selectedRooms()\"\n          [bookingId]=\"selectedHotelBooking()?.bookingId\"\n          [hotelId]=\"selectedHotelBooking()?.id || selectedHotelBooking()?.hpk\"\n          [hotelInfo]=\"hotelInfo()\"\n          [selectionSkipped]=\"packages().length <= 1\"\n          (keepRoom)=\"onKeepRoom()\"\n          (selectRefundOption)=\"onSelectRefundOption($event)\"\n          (closeModal)=\"onCloseModal()\"\n        />\n      }\n\n      @if (currentStep() === stepEnum.refundMethod && !isLoading()) {\n        <almatar-hotel-auto-cancellation-refund-method\n          [refundDetailsData]=\"refundDetailsData()\"\n          [currencyObj]=\"currentCurrency()\"\n          [refundMethod]=\"refundMethod()\"\n          [isCancelling]=\"isCancelling()\"\n          (methodSelected)=\"onMethodSelected($event)\"\n          (backRequested)=\"onBackFromRefundMethod()\"\n          (confirmRequested)=\"confirmCancellation()\"\n          (closeModal)=\"onCloseModal()\"\n          [bookingId]=\"selectedHotelBooking()?.bookingId\"\n        />\n      }\n    </div>\n  </almatar-aside>\n}\n\n@if (showErrorModal()) {\n  <div\n    almatar-manage-booking-failed-modal\n    [errorMessage]=\"hotelManageError()\"\n    (cancelEvent)=\"closeAllModals()\"\n    (confirmEvent)=\"closeAllModals()\"\n  ></div>\n}\n\n@if (showResultOverlay() && resultOverlayData()) {\n  <app-result-overlay\n    [data]=\"resultOverlayData()!\"\n    [show]=\"showResultOverlay()\"\n    (confirm)=\"onResultOverlayConfirm()\"\n    (cancel)=\"onResultOverlayCancel()\"\n  />\n}\n\n@if (showDetailedResultOverlay() && cancellationApiResponse()) {\n  <almatar-hotel-auto-cancellation-result-overlay\n    [visible]=\"showDetailedResultOverlay()\"\n    [currencyObj]=\"currentCurrency()\"\n    [refundMethod]=\"refundMethod()\"\n    [apiResponse]=\"cancellationApiResponse()\"\n    (done)=\"onDetailedResultOverlayDone()\"\n  />\n}\n", styles: [".auto_cancellation__header{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#fff;border-bottom:1px solid #e2e8f0;flex-shrink:0;gap:16px}.auto_cancellation__header-content{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.auto_cancellation__header-title{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:700;color:#1e293b;margin:0;line-height:1.3}.auto_cancellation__header-subtitle{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:400;color:#64748b;margin:0;line-height:1.4}.auto_cancellation__header-back{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:6px;cursor:pointer;flex-shrink:0;transition:all .2s ease;margin-right:8px}.auto_cancellation__header-back i{font-size:18px;color:#64748b}.auto_cancellation__header-back:hover{background:#f1f5f9}.auto_cancellation__header-back:hover i{color:#1e293b}.auto_cancellation__header-back:active{background:#e2e8f0}.auto_cancellation__header-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:6px;cursor:pointer;flex-shrink:0;transition:all .2s ease}.auto_cancellation__header-close i{font-size:18px;color:#64748b}.auto_cancellation__header-close:hover{background:#f1f5f9}.auto_cancellation__header-close:hover i{color:#1e293b}.auto_cancellation__header-close:active{background:#e2e8f0}.auto_cancellation__component{height:calc(100% - 60px)}.auto_cancellation__loading{display:flex;align-items:center;justify-content:center;height:100%;min-height:200px}.auto_cancellation_wrapper ::ng-deep almatar-hotel-auto-cancellation{display:block;height:100%}.auto_cancellation_wrapper ::ng-deep .p-sidebar-header{display:none!important}.auto_cancellation_wrapper ::ng-deep .p-sidebar-content{padding-top:0!important}.auto_cancellation_wrapper ::ng-deep .p-sidebar-close{display:none!important}.auto_cancellation_wrapper ::ng-deep .almatar_aside .p-dialog-content{background:var(--almatar-neutral-surface-screen-bg)}.auto_cancellation_wrapper ::ng-deep .main_btn,.auto_cancellation_wrapper ::ng-deep .btn{min-height:48px;padding:12px 24px;border-radius:10px;font-size:15px;font-weight:600;border:none;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden}.auto_cancellation_wrapper ::ng-deep .main_btn:disabled,.auto_cancellation_wrapper ::ng-deep .btn:disabled{opacity:.5;cursor:not-allowed}.auto_cancellation_wrapper ::ng-deep .main_btn,.auto_cancellation_wrapper ::ng-deep .btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 2px 8px #3b82f64d}.auto_cancellation_wrapper ::ng-deep .main_btn:hover:not(:disabled),.auto_cancellation_wrapper ::ng-deep .btn--primary:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 4px 12px #3b82f666;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .main_btn:active:not(:disabled),.auto_cancellation_wrapper ::ng-deep .btn--primary:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 6px #3b82f64d}.auto_cancellation_wrapper ::ng-deep .btn--secondary{background:#f1f5f9;color:#1e293b;border:1px solid #e2e8f0}.auto_cancellation_wrapper ::ng-deep .btn--secondary:hover:not(:disabled){background:#e2e8f0;border-color:#cbd5e1;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .btn--secondary:active:not(:disabled){background:#cbd5e1;transform:translateY(0)}.auto_cancellation_wrapper ::ng-deep .btn--danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 2px 8px #ef44444d}.auto_cancellation_wrapper ::ng-deep .btn--danger:hover:not(:disabled){background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 4px 12px #ef444466;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .btn--danger:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 6px #ef44444d}.auto_cancellation_wrapper ::ng-deep .main_btn--chat-with-us{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 2px 8px #10b9814d}.auto_cancellation_wrapper ::ng-deep .main_btn--chat-with-us:hover:not(:disabled){background:linear-gradient(135deg,#059669,#047857);box-shadow:0 4px 12px #10b98166;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .btn__spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.auto_cancellation_wrapper ::ng-deep .isNusk .main_btn,.auto_cancellation_wrapper ::ng-deep .isNusk .btn--primary{background:linear-gradient(135deg,var(--almatar-nusuk-primary),var(--almatar-nusuk-primary))!important;border-radius:33px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: LoaderModule }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["loading", "message"] }, { kind: "component", type: AsideComponent, selector: "almatar-aside", inputs: ["asideTitle", "showHeader", "headerTemplate", "whiteHeader", "showAside", "width", "modal", "closable", "transitionOptions", "interceptClose"], outputs: ["onClose", "closeRequested"] }, { kind: "component", type: AlmatarHotelAutoCancellationSelectRoomsComponent, selector: "almatar-hotel-auto-cancellation-select-rooms", inputs: ["packages", "hotelInfo", "bookingId", "hotelId", "currencyCode"], outputs: ["continueToCancel", "closeModal", "nonRefundableSubmitSuccess", "chatWithAgent"] }, { kind: "component", type: AlmatarHotelAutoCancellationRefundSummaryComponent, selector: "almatar-hotel-auto-cancellation-refund-summary", inputs: ["selectedRooms", "bookingId", "hotelId", "hotelInfo", "selectionSkipped"], outputs: ["keepRoom", "selectRefundOption", "closeModal"] }, { kind: "component", type: AlmatarHotelAutoCancellationRefundMethodComponent, selector: "almatar-hotel-auto-cancellation-refund-method", inputs: ["refundDetailsData", "currencyObj", "refundMethod", "bookingId", "isCancelling", "showBack"], outputs: ["methodSelected", "backRequested", "confirmRequested", "closeModal"] }, { kind: "ngmodule", type: AlmatarIconModule }, { kind: "component", type: ResultOverlayComponent, selector: "app-result-overlay", inputs: ["data", "show"], outputs: ["confirm", "cancel"] }, { kind: "component", type: AlmatarHotelAutoCancellationResultOverlayComponent, selector: "almatar-hotel-auto-cancellation-result-overlay", inputs: ["visible", "currencyObj", "refundMethod", "apiResponse"], outputs: ["done"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "@if (showAside()) {\n  <almatar-aside\n\n    class=\"auto_cancellation_wrapper\"\n    [asideTitle]=\"asideTitle()\"\n    [showAside]=\"showAside()\"\n    [whiteHeader]=\"true\"\n    [showHeader]=\"false\"\n    (onClose)=\"onCloseModal()\"\n  >\n    <!-- Custom Header with 60px height -->\n    <div class=\"auto_cancellation__header\">\n      @if (canGoBack()) {\n        <button class=\"auto_cancellation__header-back\" (click)=\"onGoBack()\" type=\"button\">\n          <i class=\"pi pi-arrow-left\"></i>\n        </button>\n      }\n      <div class=\"auto_cancellation__header-content\">\n        @if (currentStep() === stepEnum.selectRooms) {\n          <h2 class=\"auto_cancellation__header-title\">\n            @if (isSinglePackage()) {\n              Cancel Rooms\n            } @else {\n              Select Rooms\n            }\n          </h2>\n          <p class=\"auto_cancellation__header-subtitle\">\n            @if (isSinglePackage()) {\n              Review and confirm your cancellation\n            } @else {\n              Choose which room(s) you'd like to cancel\n            }\n          </p>\n        } @else if (currentStep() === stepEnum.refundSummary) {\n          <h2 class=\"auto_cancellation__header-title\">Cancel Booking Request</h2>\n          <p class=\"auto_cancellation__header-subtitle\">Review your refund summary and proceed</p>\n        } @else if (currentStep() === stepEnum.refundMethod) {\n          <h2 class=\"auto_cancellation__header-title\">Select Refund Method</h2>\n          <p class=\"auto_cancellation__header-subtitle\">Choose how you'd like to receive your refund</p>\n        } @else {\n          <h2 class=\"auto_cancellation__header-title\">{{ asideTitle() }}</h2>\n          <p class=\"auto_cancellation__header-subtitle\">Complete your booking cancellation</p>\n        }\n      </div>\n      <button class=\"auto_cancellation__header-close\" (click)=\"onCloseModal()\" type=\"button\">\n        <i class=\"pi pi-times\"></i>\n      </button>\n    </div>\n\n    <div class=\"auto_cancellation__component\" [class.isNusk]=\"isNusk()\">\n      @if (isLoading()) {\n        <div class=\"auto_cancellation__loading\">\n          <app-loader></app-loader>\n        </div>\n      }\n\n      @if (currentStep() === stepEnum.selectRooms && !isLoading()) {\n        <almatar-hotel-auto-cancellation-select-rooms\n          [packages]=\"packages()\"\n          [hotelInfo]=\"hotelInfo()\"\n          [bookingId]=\"selectedHotelBooking()?.bookingId\"\n          [hotelId]=\"selectedHotelBooking()?.hotelId\"\n          [currencyCode]=\"selectedHotelBooking()?.currencyCode || 'SAR'\"\n          (continueToCancel)=\"onContinueToCancel($event)\"\n          (closeModal)=\"onCloseModal()\"\n          (nonRefundableSubmitSuccess)=\"onNonRefundableSubmitSuccess($event)\"\n          (chatWithAgent)=\"onChatWithAgent()\"\n        />\n      }\n\n      @if (currentStep() === stepEnum.refundSummary && !isLoading()) {\n        <almatar-hotel-auto-cancellation-refund-summary\n          [selectedRooms]=\"autoCancellationService.selectedRooms()\"\n          [bookingId]=\"selectedHotelBooking()?.bookingId\"\n          [hotelId]=\"selectedHotelBooking()?.id || selectedHotelBooking()?.hpk\"\n          [hotelInfo]=\"hotelInfo()\"\n          [selectionSkipped]=\"packages().length <= 1\"\n          [currency]=\"currentCurrency()\"\n          (keepRoom)=\"onKeepRoom()\"\n          (selectRefundOption)=\"onSelectRefundOption($event)\"\n          (closeModal)=\"onCloseModal()\"\n        />\n      }\n\n      @if (currentStep() === stepEnum.refundMethod && !isLoading()) {\n        <almatar-hotel-auto-cancellation-refund-method\n          [refundDetailsData]=\"refundDetailsData()\"\n          [currencyObj]=\"currentCurrency()\"\n          [refundMethod]=\"refundMethod()\"\n          [isCancelling]=\"isCancelling()\"\n          (methodSelected)=\"onMethodSelected($event)\"\n          (backRequested)=\"onBackFromRefundMethod()\"\n          (confirmRequested)=\"confirmCancellation()\"\n          (closeModal)=\"onCloseModal()\"\n          [bookingId]=\"selectedHotelBooking()?.bookingId\"\n        />\n      }\n    </div>\n  </almatar-aside>\n}\n\n@if (showErrorModal()) {\n  <div\n    almatar-manage-booking-failed-modal\n    [errorMessage]=\"hotelManageError()\"\n    (cancelEvent)=\"closeAllModals()\"\n    (confirmEvent)=\"closeAllModals()\"\n  ></div>\n}\n\n@if (showResultOverlay() && resultOverlayData()) {\n  <app-result-overlay\n    [data]=\"resultOverlayData()!\"\n    [show]=\"showResultOverlay()\"\n    (confirm)=\"onResultOverlayConfirm()\"\n    (cancel)=\"onResultOverlayCancel()\"\n  />\n}\n\n@if (showDetailedResultOverlay() && cancellationApiResponse()) {\n  <almatar-hotel-auto-cancellation-result-overlay\n    [visible]=\"showDetailedResultOverlay()\"\n    [currencyObj]=\"currentCurrency()\"\n    [refundMethod]=\"refundMethod()\"\n    [apiResponse]=\"cancellationApiResponse()\"\n    (done)=\"onDetailedResultOverlayDone()\"\n  />\n}\n", styles: [".auto_cancellation__header{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#fff;border-bottom:1px solid #e2e8f0;flex-shrink:0;gap:16px}.auto_cancellation__header-content{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.auto_cancellation__header-title{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:700;color:#1e293b;margin:0;line-height:1.3}.auto_cancellation__header-subtitle{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:400;color:#64748b;margin:0;line-height:1.4}.auto_cancellation__header-back{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:6px;cursor:pointer;flex-shrink:0;transition:all .2s ease;margin-right:8px}.auto_cancellation__header-back i{font-size:18px;color:#64748b}.auto_cancellation__header-back:hover{background:#f1f5f9}.auto_cancellation__header-back:hover i{color:#1e293b}.auto_cancellation__header-back:active{background:#e2e8f0}.auto_cancellation__header-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:6px;cursor:pointer;flex-shrink:0;transition:all .2s ease}.auto_cancellation__header-close i{font-size:18px;color:#64748b}.auto_cancellation__header-close:hover{background:#f1f5f9}.auto_cancellation__header-close:hover i{color:#1e293b}.auto_cancellation__header-close:active{background:#e2e8f0}.auto_cancellation__component{height:calc(100% - 60px)}.auto_cancellation__loading{display:flex;align-items:center;justify-content:center;height:100%;min-height:200px}.auto_cancellation_wrapper ::ng-deep almatar-hotel-auto-cancellation{display:block;height:100%}.auto_cancellation_wrapper ::ng-deep .p-sidebar-header{display:none!important}.auto_cancellation_wrapper ::ng-deep .p-sidebar-content{padding-top:0!important}.auto_cancellation_wrapper ::ng-deep .p-sidebar-close{display:none!important}.auto_cancellation_wrapper ::ng-deep .almatar_aside .p-dialog-content{background:var(--almatar-neutral-surface-screen-bg)}.auto_cancellation_wrapper ::ng-deep .main_btn,.auto_cancellation_wrapper ::ng-deep .btn{min-height:48px;padding:12px 24px;border-radius:10px;font-size:15px;font-weight:600;border:none;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden}.auto_cancellation_wrapper ::ng-deep .main_btn:disabled,.auto_cancellation_wrapper ::ng-deep .btn:disabled{opacity:.5;cursor:not-allowed}.auto_cancellation_wrapper ::ng-deep .main_btn,.auto_cancellation_wrapper ::ng-deep .btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 2px 8px #3b82f64d}.auto_cancellation_wrapper ::ng-deep .main_btn:hover:not(:disabled),.auto_cancellation_wrapper ::ng-deep .btn--primary:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 4px 12px #3b82f666;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .main_btn:active:not(:disabled),.auto_cancellation_wrapper ::ng-deep .btn--primary:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 6px #3b82f64d}.auto_cancellation_wrapper ::ng-deep .btn--secondary{background:#f1f5f9;color:#1e293b;border:1px solid #e2e8f0}.auto_cancellation_wrapper ::ng-deep .btn--secondary:hover:not(:disabled){background:#e2e8f0;border-color:#cbd5e1;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .btn--secondary:active:not(:disabled){background:#cbd5e1;transform:translateY(0)}.auto_cancellation_wrapper ::ng-deep .btn--danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 2px 8px #ef44444d}.auto_cancellation_wrapper ::ng-deep .btn--danger:hover:not(:disabled){background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 4px 12px #ef444466;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .btn--danger:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 6px #ef44444d}.auto_cancellation_wrapper ::ng-deep .main_btn--chat-with-us{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 2px 8px #10b9814d}.auto_cancellation_wrapper ::ng-deep .main_btn--chat-with-us:hover:not(:disabled){background:linear-gradient(135deg,#059669,#047857);box-shadow:0 4px 12px #10b98166;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .btn__spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.auto_cancellation_wrapper ::ng-deep .isNusk .main_btn,.auto_cancellation_wrapper ::ng-deep .isNusk .btn--primary{background:linear-gradient(135deg,var(--almatar-nusuk-primary),var(--almatar-nusuk-primary))!important;border-radius:33px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: LoaderModule }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["loading", "message"] }, { kind: "component", type: AsideComponent, selector: "almatar-aside", inputs: ["asideTitle", "showHeader", "headerTemplate", "whiteHeader", "showAside", "width", "modal", "closable", "transitionOptions", "interceptClose"], outputs: ["onClose", "closeRequested"] }, { kind: "component", type: AlmatarHotelAutoCancellationSelectRoomsComponent, selector: "almatar-hotel-auto-cancellation-select-rooms", inputs: ["packages", "hotelInfo", "bookingId", "hotelId", "currencyCode"], outputs: ["continueToCancel", "closeModal", "nonRefundableSubmitSuccess", "chatWithAgent"] }, { kind: "component", type: AlmatarHotelAutoCancellationRefundSummaryComponent, selector: "almatar-hotel-auto-cancellation-refund-summary", inputs: ["selectedRooms", "bookingId", "hotelId", "hotelInfo", "selectionSkipped", "currency"], outputs: ["keepRoom", "selectRefundOption", "closeModal"] }, { kind: "component", type: AlmatarHotelAutoCancellationRefundMethodComponent, selector: "almatar-hotel-auto-cancellation-refund-method", inputs: ["refundDetailsData", "currencyObj", "refundMethod", "bookingId", "isCancelling", "showBack"], outputs: ["methodSelected", "backRequested", "confirmRequested", "closeModal"] }, { kind: "ngmodule", type: AlmatarIconModule }, { kind: "component", type: ResultOverlayComponent, selector: "app-result-overlay", inputs: ["data", "show"], outputs: ["confirm", "cancel"] }, { kind: "component", type: AlmatarHotelAutoCancellationResultOverlayComponent, selector: "almatar-hotel-auto-cancellation-result-overlay", inputs: ["visible", "currencyObj", "refundMethod", "apiResponse"], outputs: ["done"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlmatarHotelAutoCancellationComponent, decorators: [{
             type: Component,
@@ -5723,7 +5709,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ], providers: [
                         AlmatarHotelAutoCancellationService,
                         AlmatarHotelAutoCancellationEndpointsService
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showAside()) {\n  <almatar-aside\n\n    class=\"auto_cancellation_wrapper\"\n    [asideTitle]=\"asideTitle()\"\n    [showAside]=\"showAside()\"\n    [whiteHeader]=\"true\"\n    [showHeader]=\"false\"\n    (onClose)=\"onCloseModal()\"\n  >\n    <!-- Custom Header with 60px height -->\n    <div class=\"auto_cancellation__header\">\n      @if (canGoBack()) {\n        <button class=\"auto_cancellation__header-back\" (click)=\"onGoBack()\" type=\"button\">\n          <i class=\"pi pi-arrow-left\"></i>\n        </button>\n      }\n      <div class=\"auto_cancellation__header-content\">\n        @if (currentStep() === stepEnum.selectRooms) {\n          <h2 class=\"auto_cancellation__header-title\">\n            @if (isSinglePackage()) {\n              Cancel Rooms\n            } @else {\n              Select Rooms\n            }\n          </h2>\n          <p class=\"auto_cancellation__header-subtitle\">\n            @if (isSinglePackage()) {\n              Review and confirm your cancellation\n            } @else {\n              Choose which room(s) you'd like to cancel\n            }\n          </p>\n        } @else if (currentStep() === stepEnum.refundSummary) {\n          <h2 class=\"auto_cancellation__header-title\">Cancel Booking Request</h2>\n          <p class=\"auto_cancellation__header-subtitle\">Review your refund summary and proceed</p>\n        } @else if (currentStep() === stepEnum.refundMethod) {\n          <h2 class=\"auto_cancellation__header-title\">Select Refund Method</h2>\n          <p class=\"auto_cancellation__header-subtitle\">Choose how you'd like to receive your refund</p>\n        } @else {\n          <h2 class=\"auto_cancellation__header-title\">{{ asideTitle() }}</h2>\n          <p class=\"auto_cancellation__header-subtitle\">Complete your booking cancellation</p>\n        }\n      </div>\n      <button class=\"auto_cancellation__header-close\" (click)=\"onCloseModal()\" type=\"button\">\n        <i class=\"pi pi-times\"></i>\n      </button>\n    </div>\n\n    <div class=\"auto_cancellation__component\" [class.isNusk]=\"isNusk()\">\n      @if (isLoading()) {\n        <div class=\"auto_cancellation__loading\">\n          <app-loader></app-loader>\n        </div>\n      }\n\n      @if (currentStep() === stepEnum.selectRooms && !isLoading()) {\n        <almatar-hotel-auto-cancellation-select-rooms\n          [packages]=\"packages()\"\n          [hotelInfo]=\"hotelInfo()\"\n          [bookingId]=\"selectedHotelBooking()?.bookingId\"\n          [hotelId]=\"selectedHotelBooking()?.hotelId\"\n          [currencyCode]=\"selectedHotelBooking()?.currencyCode || 'SAR'\"\n          (continueToCancel)=\"onContinueToCancel($event)\"\n          (closeModal)=\"onCloseModal()\"\n          (nonRefundableSubmitSuccess)=\"onNonRefundableSubmitSuccess($event)\"\n          (chatWithAgent)=\"onChatWithAgent()\"\n        />\n      }\n\n      @if (currentStep() === stepEnum.refundSummary && !isLoading()) {\n        <almatar-hotel-auto-cancellation-refund-summary\n          [selectedRooms]=\"autoCancellationService.selectedRooms()\"\n          [bookingId]=\"selectedHotelBooking()?.bookingId\"\n          [hotelId]=\"selectedHotelBooking()?.id || selectedHotelBooking()?.hpk\"\n          [hotelInfo]=\"hotelInfo()\"\n          [selectionSkipped]=\"packages().length <= 1\"\n          (keepRoom)=\"onKeepRoom()\"\n          (selectRefundOption)=\"onSelectRefundOption($event)\"\n          (closeModal)=\"onCloseModal()\"\n        />\n      }\n\n      @if (currentStep() === stepEnum.refundMethod && !isLoading()) {\n        <almatar-hotel-auto-cancellation-refund-method\n          [refundDetailsData]=\"refundDetailsData()\"\n          [currencyObj]=\"currentCurrency()\"\n          [refundMethod]=\"refundMethod()\"\n          [isCancelling]=\"isCancelling()\"\n          (methodSelected)=\"onMethodSelected($event)\"\n          (backRequested)=\"onBackFromRefundMethod()\"\n          (confirmRequested)=\"confirmCancellation()\"\n          (closeModal)=\"onCloseModal()\"\n          [bookingId]=\"selectedHotelBooking()?.bookingId\"\n        />\n      }\n    </div>\n  </almatar-aside>\n}\n\n@if (showErrorModal()) {\n  <div\n    almatar-manage-booking-failed-modal\n    [errorMessage]=\"hotelManageError()\"\n    (cancelEvent)=\"closeAllModals()\"\n    (confirmEvent)=\"closeAllModals()\"\n  ></div>\n}\n\n@if (showResultOverlay() && resultOverlayData()) {\n  <app-result-overlay\n    [data]=\"resultOverlayData()!\"\n    [show]=\"showResultOverlay()\"\n    (confirm)=\"onResultOverlayConfirm()\"\n    (cancel)=\"onResultOverlayCancel()\"\n  />\n}\n\n@if (showDetailedResultOverlay() && cancellationApiResponse()) {\n  <almatar-hotel-auto-cancellation-result-overlay\n    [visible]=\"showDetailedResultOverlay()\"\n    [currencyObj]=\"currentCurrency()\"\n    [refundMethod]=\"refundMethod()\"\n    [apiResponse]=\"cancellationApiResponse()\"\n    (done)=\"onDetailedResultOverlayDone()\"\n  />\n}\n", styles: [".auto_cancellation__header{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#fff;border-bottom:1px solid #e2e8f0;flex-shrink:0;gap:16px}.auto_cancellation__header-content{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.auto_cancellation__header-title{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:700;color:#1e293b;margin:0;line-height:1.3}.auto_cancellation__header-subtitle{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:400;color:#64748b;margin:0;line-height:1.4}.auto_cancellation__header-back{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:6px;cursor:pointer;flex-shrink:0;transition:all .2s ease;margin-right:8px}.auto_cancellation__header-back i{font-size:18px;color:#64748b}.auto_cancellation__header-back:hover{background:#f1f5f9}.auto_cancellation__header-back:hover i{color:#1e293b}.auto_cancellation__header-back:active{background:#e2e8f0}.auto_cancellation__header-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:6px;cursor:pointer;flex-shrink:0;transition:all .2s ease}.auto_cancellation__header-close i{font-size:18px;color:#64748b}.auto_cancellation__header-close:hover{background:#f1f5f9}.auto_cancellation__header-close:hover i{color:#1e293b}.auto_cancellation__header-close:active{background:#e2e8f0}.auto_cancellation__component{height:calc(100% - 60px)}.auto_cancellation__loading{display:flex;align-items:center;justify-content:center;height:100%;min-height:200px}.auto_cancellation_wrapper ::ng-deep almatar-hotel-auto-cancellation{display:block;height:100%}.auto_cancellation_wrapper ::ng-deep .p-sidebar-header{display:none!important}.auto_cancellation_wrapper ::ng-deep .p-sidebar-content{padding-top:0!important}.auto_cancellation_wrapper ::ng-deep .p-sidebar-close{display:none!important}.auto_cancellation_wrapper ::ng-deep .almatar_aside .p-dialog-content{background:var(--almatar-neutral-surface-screen-bg)}.auto_cancellation_wrapper ::ng-deep .main_btn,.auto_cancellation_wrapper ::ng-deep .btn{min-height:48px;padding:12px 24px;border-radius:10px;font-size:15px;font-weight:600;border:none;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden}.auto_cancellation_wrapper ::ng-deep .main_btn:disabled,.auto_cancellation_wrapper ::ng-deep .btn:disabled{opacity:.5;cursor:not-allowed}.auto_cancellation_wrapper ::ng-deep .main_btn,.auto_cancellation_wrapper ::ng-deep .btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 2px 8px #3b82f64d}.auto_cancellation_wrapper ::ng-deep .main_btn:hover:not(:disabled),.auto_cancellation_wrapper ::ng-deep .btn--primary:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 4px 12px #3b82f666;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .main_btn:active:not(:disabled),.auto_cancellation_wrapper ::ng-deep .btn--primary:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 6px #3b82f64d}.auto_cancellation_wrapper ::ng-deep .btn--secondary{background:#f1f5f9;color:#1e293b;border:1px solid #e2e8f0}.auto_cancellation_wrapper ::ng-deep .btn--secondary:hover:not(:disabled){background:#e2e8f0;border-color:#cbd5e1;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .btn--secondary:active:not(:disabled){background:#cbd5e1;transform:translateY(0)}.auto_cancellation_wrapper ::ng-deep .btn--danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 2px 8px #ef44444d}.auto_cancellation_wrapper ::ng-deep .btn--danger:hover:not(:disabled){background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 4px 12px #ef444466;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .btn--danger:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 6px #ef44444d}.auto_cancellation_wrapper ::ng-deep .main_btn--chat-with-us{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 2px 8px #10b9814d}.auto_cancellation_wrapper ::ng-deep .main_btn--chat-with-us:hover:not(:disabled){background:linear-gradient(135deg,#059669,#047857);box-shadow:0 4px 12px #10b98166;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .btn__spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.auto_cancellation_wrapper ::ng-deep .isNusk .main_btn,.auto_cancellation_wrapper ::ng-deep .isNusk .btn--primary{background:linear-gradient(135deg,var(--almatar-nusuk-primary),var(--almatar-nusuk-primary))!important;border-radius:33px!important}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showAside()) {\n  <almatar-aside\n\n    class=\"auto_cancellation_wrapper\"\n    [asideTitle]=\"asideTitle()\"\n    [showAside]=\"showAside()\"\n    [whiteHeader]=\"true\"\n    [showHeader]=\"false\"\n    (onClose)=\"onCloseModal()\"\n  >\n    <!-- Custom Header with 60px height -->\n    <div class=\"auto_cancellation__header\">\n      @if (canGoBack()) {\n        <button class=\"auto_cancellation__header-back\" (click)=\"onGoBack()\" type=\"button\">\n          <i class=\"pi pi-arrow-left\"></i>\n        </button>\n      }\n      <div class=\"auto_cancellation__header-content\">\n        @if (currentStep() === stepEnum.selectRooms) {\n          <h2 class=\"auto_cancellation__header-title\">\n            @if (isSinglePackage()) {\n              Cancel Rooms\n            } @else {\n              Select Rooms\n            }\n          </h2>\n          <p class=\"auto_cancellation__header-subtitle\">\n            @if (isSinglePackage()) {\n              Review and confirm your cancellation\n            } @else {\n              Choose which room(s) you'd like to cancel\n            }\n          </p>\n        } @else if (currentStep() === stepEnum.refundSummary) {\n          <h2 class=\"auto_cancellation__header-title\">Cancel Booking Request</h2>\n          <p class=\"auto_cancellation__header-subtitle\">Review your refund summary and proceed</p>\n        } @else if (currentStep() === stepEnum.refundMethod) {\n          <h2 class=\"auto_cancellation__header-title\">Select Refund Method</h2>\n          <p class=\"auto_cancellation__header-subtitle\">Choose how you'd like to receive your refund</p>\n        } @else {\n          <h2 class=\"auto_cancellation__header-title\">{{ asideTitle() }}</h2>\n          <p class=\"auto_cancellation__header-subtitle\">Complete your booking cancellation</p>\n        }\n      </div>\n      <button class=\"auto_cancellation__header-close\" (click)=\"onCloseModal()\" type=\"button\">\n        <i class=\"pi pi-times\"></i>\n      </button>\n    </div>\n\n    <div class=\"auto_cancellation__component\" [class.isNusk]=\"isNusk()\">\n      @if (isLoading()) {\n        <div class=\"auto_cancellation__loading\">\n          <app-loader></app-loader>\n        </div>\n      }\n\n      @if (currentStep() === stepEnum.selectRooms && !isLoading()) {\n        <almatar-hotel-auto-cancellation-select-rooms\n          [packages]=\"packages()\"\n          [hotelInfo]=\"hotelInfo()\"\n          [bookingId]=\"selectedHotelBooking()?.bookingId\"\n          [hotelId]=\"selectedHotelBooking()?.hotelId\"\n          [currencyCode]=\"selectedHotelBooking()?.currencyCode || 'SAR'\"\n          (continueToCancel)=\"onContinueToCancel($event)\"\n          (closeModal)=\"onCloseModal()\"\n          (nonRefundableSubmitSuccess)=\"onNonRefundableSubmitSuccess($event)\"\n          (chatWithAgent)=\"onChatWithAgent()\"\n        />\n      }\n\n      @if (currentStep() === stepEnum.refundSummary && !isLoading()) {\n        <almatar-hotel-auto-cancellation-refund-summary\n          [selectedRooms]=\"autoCancellationService.selectedRooms()\"\n          [bookingId]=\"selectedHotelBooking()?.bookingId\"\n          [hotelId]=\"selectedHotelBooking()?.id || selectedHotelBooking()?.hpk\"\n          [hotelInfo]=\"hotelInfo()\"\n          [selectionSkipped]=\"packages().length <= 1\"\n          [currency]=\"currentCurrency()\"\n          (keepRoom)=\"onKeepRoom()\"\n          (selectRefundOption)=\"onSelectRefundOption($event)\"\n          (closeModal)=\"onCloseModal()\"\n        />\n      }\n\n      @if (currentStep() === stepEnum.refundMethod && !isLoading()) {\n        <almatar-hotel-auto-cancellation-refund-method\n          [refundDetailsData]=\"refundDetailsData()\"\n          [currencyObj]=\"currentCurrency()\"\n          [refundMethod]=\"refundMethod()\"\n          [isCancelling]=\"isCancelling()\"\n          (methodSelected)=\"onMethodSelected($event)\"\n          (backRequested)=\"onBackFromRefundMethod()\"\n          (confirmRequested)=\"confirmCancellation()\"\n          (closeModal)=\"onCloseModal()\"\n          [bookingId]=\"selectedHotelBooking()?.bookingId\"\n        />\n      }\n    </div>\n  </almatar-aside>\n}\n\n@if (showErrorModal()) {\n  <div\n    almatar-manage-booking-failed-modal\n    [errorMessage]=\"hotelManageError()\"\n    (cancelEvent)=\"closeAllModals()\"\n    (confirmEvent)=\"closeAllModals()\"\n  ></div>\n}\n\n@if (showResultOverlay() && resultOverlayData()) {\n  <app-result-overlay\n    [data]=\"resultOverlayData()!\"\n    [show]=\"showResultOverlay()\"\n    (confirm)=\"onResultOverlayConfirm()\"\n    (cancel)=\"onResultOverlayCancel()\"\n  />\n}\n\n@if (showDetailedResultOverlay() && cancellationApiResponse()) {\n  <almatar-hotel-auto-cancellation-result-overlay\n    [visible]=\"showDetailedResultOverlay()\"\n    [currencyObj]=\"currentCurrency()\"\n    [refundMethod]=\"refundMethod()\"\n    [apiResponse]=\"cancellationApiResponse()\"\n    (done)=\"onDetailedResultOverlayDone()\"\n  />\n}\n", styles: [".auto_cancellation__header{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#fff;border-bottom:1px solid #e2e8f0;flex-shrink:0;gap:16px}.auto_cancellation__header-content{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.auto_cancellation__header-title{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:700;color:#1e293b;margin:0;line-height:1.3}.auto_cancellation__header-subtitle{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:400;color:#64748b;margin:0;line-height:1.4}.auto_cancellation__header-back{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:6px;cursor:pointer;flex-shrink:0;transition:all .2s ease;margin-right:8px}.auto_cancellation__header-back i{font-size:18px;color:#64748b}.auto_cancellation__header-back:hover{background:#f1f5f9}.auto_cancellation__header-back:hover i{color:#1e293b}.auto_cancellation__header-back:active{background:#e2e8f0}.auto_cancellation__header-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:6px;cursor:pointer;flex-shrink:0;transition:all .2s ease}.auto_cancellation__header-close i{font-size:18px;color:#64748b}.auto_cancellation__header-close:hover{background:#f1f5f9}.auto_cancellation__header-close:hover i{color:#1e293b}.auto_cancellation__header-close:active{background:#e2e8f0}.auto_cancellation__component{height:calc(100% - 60px)}.auto_cancellation__loading{display:flex;align-items:center;justify-content:center;height:100%;min-height:200px}.auto_cancellation_wrapper ::ng-deep almatar-hotel-auto-cancellation{display:block;height:100%}.auto_cancellation_wrapper ::ng-deep .p-sidebar-header{display:none!important}.auto_cancellation_wrapper ::ng-deep .p-sidebar-content{padding-top:0!important}.auto_cancellation_wrapper ::ng-deep .p-sidebar-close{display:none!important}.auto_cancellation_wrapper ::ng-deep .almatar_aside .p-dialog-content{background:var(--almatar-neutral-surface-screen-bg)}.auto_cancellation_wrapper ::ng-deep .main_btn,.auto_cancellation_wrapper ::ng-deep .btn{min-height:48px;padding:12px 24px;border-radius:10px;font-size:15px;font-weight:600;border:none;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden}.auto_cancellation_wrapper ::ng-deep .main_btn:disabled,.auto_cancellation_wrapper ::ng-deep .btn:disabled{opacity:.5;cursor:not-allowed}.auto_cancellation_wrapper ::ng-deep .main_btn,.auto_cancellation_wrapper ::ng-deep .btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 2px 8px #3b82f64d}.auto_cancellation_wrapper ::ng-deep .main_btn:hover:not(:disabled),.auto_cancellation_wrapper ::ng-deep .btn--primary:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 4px 12px #3b82f666;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .main_btn:active:not(:disabled),.auto_cancellation_wrapper ::ng-deep .btn--primary:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 6px #3b82f64d}.auto_cancellation_wrapper ::ng-deep .btn--secondary{background:#f1f5f9;color:#1e293b;border:1px solid #e2e8f0}.auto_cancellation_wrapper ::ng-deep .btn--secondary:hover:not(:disabled){background:#e2e8f0;border-color:#cbd5e1;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .btn--secondary:active:not(:disabled){background:#cbd5e1;transform:translateY(0)}.auto_cancellation_wrapper ::ng-deep .btn--danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 2px 8px #ef44444d}.auto_cancellation_wrapper ::ng-deep .btn--danger:hover:not(:disabled){background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 4px 12px #ef444466;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .btn--danger:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 6px #ef44444d}.auto_cancellation_wrapper ::ng-deep .main_btn--chat-with-us{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 2px 8px #10b9814d}.auto_cancellation_wrapper ::ng-deep .main_btn--chat-with-us:hover:not(:disabled){background:linear-gradient(135deg,#059669,#047857);box-shadow:0 4px 12px #10b98166;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .btn__spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.auto_cancellation_wrapper ::ng-deep .isNusk .main_btn,.auto_cancellation_wrapper ::ng-deep .isNusk .btn--primary{background:linear-gradient(135deg,var(--almatar-nusuk-primary),var(--almatar-nusuk-primary))!important;border-radius:33px!important}\n"] }]
         }], ctorParameters: () => [] });
 
 class SbdFlightItineraryCardComponent {
@@ -8241,7 +8227,7 @@ class SbdHotelContentComponent {
             return '—';
         return new Intl.NumberFormat('en-US', {
             style: 'currency',
-            currency: 'SAR',
+            currency: this.bookingData()?.currency?.currencyCode,
             minimumFractionDigits: 2,
         }).format(price);
     }
@@ -8269,7 +8255,7 @@ class SbdHotelContentComponent {
         return String(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdHotelContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdHotelContentComponent, isStandalone: true, selector: "app-sbd-hotel-content", inputs: { bookingData: { classPropertyName: "bookingData", publicName: "bookingData", isSignal: true, isRequired: true, transformFunction: null }, bookingStatus: { classPropertyName: "bookingStatus", publicName: "bookingStatus", isSignal: true, isRequired: true, transformFunction: null }, bookingId: { classPropertyName: "bookingId", publicName: "bookingId", isSignal: true, isRequired: true, transformFunction: null }, dataVerified: { classPropertyName: "dataVerified", publicName: "dataVerified", isSignal: true, isRequired: true, transformFunction: null }, bookingNotes: { classPropertyName: "bookingNotes", publicName: "bookingNotes", isSignal: true, isRequired: true, transformFunction: null }, bookingHistory: { classPropertyName: "bookingHistory", publicName: "bookingHistory", isSignal: true, isRequired: true, transformFunction: null }, historyGroups: { classPropertyName: "historyGroups", publicName: "historyGroups", isSignal: true, isRequired: true, transformFunction: null }, activeContextTab: { classPropertyName: "activeContextTab", publicName: "activeContextTab", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { cancelBooking: "cancelBooking", addNoteRequested: "addNoteRequested", contextTabChanged: "contextTabChanged" }, ngImport: i0, template: "<!-- 2-column layout for hotels -->\n<div class=\"sbd-hotel-content\">\n\n  <!-- Left: booking context -->\n  <aside class=\"sbd-hotel-content__aside\">\n\n    <!-- Data search at the top of the sidebar -->\n    @if (bookingStatus() === 'success') {\n      <app-sbd-data-search [data]=\"bookingData()\" />\n      <app-sbd-hotel-itinerary-card [data]=\"bookingData()\" [verified]=\"dataVerified()\" />\n    }\n\n    <!-- Loading skeleton for aside -->\n    @if (bookingStatus() === 'loading') {\n      <div class=\"sbd-hotel-content__skeleton-card\">\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:60%\"></div>\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:40%\"></div>\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:80%\"></div>\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:50%\"></div>\n      </div>\n    }\n\n  </aside>\n\n  <!-- Right: agent workspace -->\n  <main class=\"sbd-hotel-content__main\">\n\n    <!-- Error state -->\n    @if (bookingStatus() === 'error') {\n      <div class=\"sbd-hotel-content__error\">\n        <i class=\"pi pi-exclamation-circle\"></i>\n        <span>Booking not found. Double-check the ID and product type, then try again.</span>\n      </div>\n    }\n\n    <!-- Content once loaded -->\n    @if (bookingStatus() === 'success') {\n\n      <!-- Quick actions -->\n      <div class=\"sbd-hotel-content__quick-actions\">\n        <span class=\"sbd-hotel-content__quick-label\">Quick actions</span>\n        @if (allPackagesCancelled()) {\n          <div class=\"sbd-hotel-content__cancelled-status\">\n            <i class=\"pi pi-check-circle\"></i>\n            <span>All Packages Cancelled</span>\n          </div>\n        } @else {\n          <button\n            pButton\n            label=\"Cancel Booking\"\n            icon=\"pi pi-times-circle\"\n            class=\"p-button-danger p-button-sm\"\n            (click)=\"onCancelBooking()\">\n          </button>\n        }\n      </div>\n\n      <!-- Modern Data Overview Cards -->\n      <div class=\"sbd-hotel-content__data-overview\">\n        <h3 class=\"sbd-hotel-content__section-title\">Booking Overview</h3>\n\n        <div class=\"sbd-hotel-content__data-grid\">\n          <!-- Booking ID Card -->\n          @if (bookingData()?.bookingId) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--blue\">\n                <i class=\"pi pi-bookmark\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Booking ID</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ bookingData()?.bookingId }}</span>\n              </div>\n            </div>\n          }\n\n          <!-- Hotel Name Card -->\n          @if (bookingData()?.hotelName) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--purple\">\n                <i class=\"pi pi-home\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Hotel</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ bookingData()?.hotelName }}</span>\n              </div>\n            </div>\n          }\n\n          <!-- Check-in Date Card -->\n          @if (bookingData()?.dateFrom) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--green\">\n                <i class=\"pi pi-calendar-plus\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Check-in</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ formatDate(bookingData()?.dateFrom) }}</span>\n                @if (bookingData()?.checkInTime) {\n                  <span class=\"sbd-hotel-content__data-subtext\">{{ bookingData()?.checkInTime }}</span>\n                }\n              </div>\n            </div>\n          }\n\n          <!-- Check-out Date Card -->\n          @if (bookingData()?.dateTo) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--orange\">\n                <i class=\"pi pi-calendar-minus\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Check-out</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ formatDate(bookingData()?.dateTo) }}</span>\n                @if (bookingData()?.checkOutTime) {\n                  <span class=\"sbd-hotel-content__data-subtext\">{{ bookingData()?.checkOutTime }}</span>\n                }\n              </div>\n            </div>\n          }\n\n          <!-- Number of Nights Card -->\n          @if (bookingData()?.numberOfNights) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--indigo\">\n                <i class=\"pi pi-moon\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Duration</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ bookingData()?.numberOfNights }} Nights</span>\n              </div>\n            </div>\n          }\n\n          <!-- Number of Rooms Card -->\n          @if (bookingData()?.rooms) {\n            <div class=\"sbd-hotel-content__data-card sbd-hotel-content__data-card--clickable\" (click)=\"showPackagesDetail()\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--pink\">\n                <i class=\"pi pi-home\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Rooms</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ bookingData()?.rooms }} Room{{ bookingData()?.rooms > 1 ? 's' : '' }}</span>\n                @if (bookingData()?.packages && bookingData()?.packages.length > 0) {\n                  <span class=\"sbd-hotel-content__data-subtext\">Click for details</span>\n                }\n              </div>\n              @if (bookingData()?.packages && bookingData()?.packages.length > 0) {\n                <i class=\"pi pi-chevron-right sbd-hotel-content__data-arrow\"></i>\n              }\n            </div>\n          }\n\n          <!-- Price Card -->\n          @if (bookingData()?.price) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--emerald\">\n                <i class=\"pi pi-wallet\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Total Price</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ formatPrice(bookingData()?.price) }}</span>\n              </div>\n            </div>\n          }\n\n          <!-- Hotel ID Card -->\n          @if (bookingData()?.hotelId) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--teal\">\n                <i class=\"pi pi-id-card\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Hotel ID</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ bookingData()?.hotelId }}</span>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Context: Notes + Changes tabbed -->\n      <div class=\"sbd-hotel-content__context\">\n\n        <!-- Tab bar -->\n        <div class=\"sbd-hotel-content__context-tabs\">\n          <button class=\"sbd-hotel-content__context-tab\"\n            [class.sbd-hotel-content__context-tab--active]=\"activeContextTab() === 'changes'\"\n            (click)=\"onTabChange('changes')\">\n            <i class=\"pi pi-history\"></i>\n            Changes\n            @if (bookingHistory().length > 0) {\n              <span class=\"sbd-hotel-content__context-pill sbd-hotel-content__context-pill--changes\">{{ bookingHistory().length }}</span>\n            }\n          </button>\n          <button class=\"sbd-hotel-content__context-tab\"\n            [class.sbd-hotel-content__context-tab--active]=\"activeContextTab() === 'notes'\"\n            (click)=\"onTabChange('notes')\">\n            <i class=\"pi pi-comments\"></i>\n            Notes\n            <span class=\"sbd-hotel-content__context-pill sbd-hotel-content__context-pill--notes\">{{ bookingNotes().length }}</span>\n          </button>\n          @if (activeContextTab() === 'notes') {\n            <button pButton label=\"Add Note\" icon=\"pi pi-plus\" class=\"p-button-sm p-button-outlined sbd-hotel-content__context-add\"\n              (click)=\"onAddNote()\">\n            </button>\n          }\n        </div>\n\n        <!-- Notes tab -->\n        @if (activeContextTab() === 'notes') {\n          <div class=\"sbd-hotel-content__notes-list\">\n            @if (bookingNotes().length === 0) {\n              <div class=\"sbd-hotel-content__context-empty\">\n                <i class=\"pi pi-inbox\"></i> No notes yet\n              </div>\n            }\n            @for (note of bookingNotes(); track $index) {\n              <div class=\"sbd-hotel-content__note\">\n                <div class=\"sbd-hotel-content__note-top\">\n                  <span class=\"sbd-hotel-content__note-badge sbd-hotel-content__note-badge--{{ note.action | lowercase }}\">\n                    {{ note.action }}\n                  </span>\n                  <span class=\"sbd-hotel-content__note-author\">\n                    {{ note.writtenBy?.firstName }} {{ note.writtenBy?.lastName }}\n                  </span>\n                  <span class=\"sbd-hotel-content__note-date\">{{ fmtNoteDate(note.date) }}</span>\n                </div>\n                <p class=\"sbd-hotel-content__note-msg\">{{ note.message }}</p>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Changes tab -->\n        @if (activeContextTab() === 'changes') {\n          <div class=\"sbd-hotel-content__changes-groups\">\n            @if (historyGroups().length === 0) {\n              <div class=\"sbd-hotel-content__context-empty\">\n                <i class=\"pi pi-check\"></i> No changes recorded\n              </div>\n            }\n            @for (group of historyGroups(); track group.changedAt) {\n              <div class=\"sbd-hotel-content__changes-group\">\n                <div class=\"sbd-hotel-content__changes-meta\">\n                  <i class=\"pi pi-user\"></i>\n                  <strong>{{ group.changedBy }}</strong>\n                  <span class=\"sbd-hotel-content__changes-sep\">\u00B7</span>\n                  <span>{{ fmtDate(group.changedAt) }}</span>\n                </div>\n                <table class=\"sbd-hotel-content__changes-table\">\n                  <thead>\n                    <tr>\n                      <th>Field</th>\n                      <th><i class=\"pi pi-times-circle\"></i> Before</th>\n                      <th><i class=\"pi pi-check-circle\"></i> After</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (entry of group.entries; track entry.field) {\n                      <tr>\n                        <td class=\"sbd-hotel-content__changes-field\">{{ formatField(entry.field) }}</td>\n                        <td class=\"sbd-hotel-content__changes-old\">{{ entry.from }}</td>\n                        <td class=\"sbd-hotel-content__changes-new\">{{ entry.to }}</td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            }\n          </div>\n        }\n\n      </div>\n\n    }\n\n    <!-- Loading skeleton for main -->\n    @if (bookingStatus() === 'loading') {\n      <div class=\"sbd-hotel-content__skeleton-card\">\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:40%\"></div>\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:25%\"></div>\n      </div>\n    }\n\n  </main>\n\n</div>\n\n<!-- Detail Dialog -->\n<p-dialog\n  [(visible)]=\"detailDialogVisible\"\n  [header]=\"selectedDetail()?.title || 'Details'\"\n  [modal]=\"true\"\n  [style]=\"{ width: '600px', maxWidth: '90vw' }\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  styleClass=\"sbd-hotel-content__detail-dialog\">\n\n  @if (selectedDetail()?.type === 'packages' && selectedDetail()?.data) {\n    <div class=\"sbd-hotel-content__packages-detail\">\n      @for (pkg of selectedDetail()?.data; track $index) {\n        <div class=\"sbd-hotel-content__package-card\">\n          <div class=\"sbd-hotel-content__package-header\">\n            <span class=\"sbd-hotel-content__package-title\">Package {{ $index + 1 }}</span>\n            <div class=\"sbd-hotel-content__package-badges\">\n              @if (pkg.isCancelled) {\n                <span class=\"sbd-hotel-content__badge sbd-hotel-content__badge--cancelled\">Cancelled</span>\n              }\n              @if (pkg.isRefundable) {\n                <span class=\"sbd-hotel-content__badge sbd-hotel-content__badge--success\">Refundable</span>\n              } @else {\n                <span class=\"sbd-hotel-content__badge sbd-hotel-content__badge--danger\">Non-Refundable</span>\n              }\n            </div>\n          </div>\n\n          @if (pkg.supplier) {\n            <div class=\"sbd-hotel-content__package-row\">\n              <span class=\"sbd-hotel-content__package-label\">Supplier</span>\n              <span class=\"sbd-hotel-content__package-value\">{{ pkg.supplier }}</span>\n            </div>\n          }\n\n          @if (pkg.rooms && pkg.rooms.length > 0) {\n            <div class=\"sbd-hotel-content__rooms-section\">\n              <h4 class=\"sbd-hotel-content__subsection-title\">Rooms ({{ pkg.rooms.length }})</h4>\n              @for (room of pkg.rooms; track room.roomId || $index) {\n                <div class=\"sbd-hotel-content__room-item\">\n                  <div class=\"sbd-hotel-content__room-icon\">\n                    <i class=\"pi pi-home\"></i>\n                  </div>\n                  <div class=\"sbd-hotel-content__room-details\">\n                    @if (room.roomName) {\n                      <div class=\"sbd-hotel-content__room-name\">{{ room.roomName }}</div>\n                    }\n                    <div class=\"sbd-hotel-content__room-info\">\n                      @if (room.roomType) {\n                        <span class=\"sbd-hotel-content__room-tag\">{{ room.roomType }}</span>\n                      }\n                      @if (room.roomBasis) {\n                        <span class=\"sbd-hotel-content__room-tag\">{{ room.roomBasis }}</span>\n                      }\n                      @if (room.bedType) {\n                        <span class=\"sbd-hotel-content__room-tag\">{{ room.bedType }}</span>\n                      }\n                    </div>\n                    @if (room.adultsNum || room.childrenNum) {\n                      <div class=\"sbd-hotel-content__room-occupancy\">\n                        @if (room.adultsNum) {\n                          <span><i class=\"pi pi-user\"></i> {{ room.adultsNum }} Adult{{ room.adultsNum > 1 ? 's' : '' }}</span>\n                        }\n                        @if (room.childrenNum) {\n                          <span><i class=\"pi pi-users\"></i> {{ room.childrenNum }} Child{{ room.childrenNum > 1 ? 'ren' : '' }}</span>\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n          }\n\n          @if (pkg.refundableUntil) {\n            <div class=\"sbd-hotel-content__package-row\">\n              <span class=\"sbd-hotel-content__package-label\">Refundable Until</span>\n              <span class=\"sbd-hotel-content__package-value\">{{ pkg.refundableUntil }}</span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</p-dialog>\n", styles: [".sbd-hotel-content{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}@media (max-width: 960px){.sbd-hotel-content{grid-template-columns:1fr}}.sbd-hotel-content__error{display:flex;align-items:center;gap:10px;padding:16px 20px;background:#fef2f2;border:1px solid rgba(239,68,68,.2);border-radius:10px;color:#ef4444;font-size:13.5px;font-weight:500}.sbd-hotel-content__error i{font-size:18px}.sbd-hotel-content__aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:20px}.sbd-hotel-content__main{display:flex;flex-direction:column;gap:16px}.sbd-hotel-content__quick-actions{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;flex-wrap:wrap}.sbd-hotel-content__quick-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;flex-shrink:0}.sbd-hotel-content__cancelled-status{display:flex;align-items:center;gap:8px;padding:8px 14px;background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:1px solid rgba(21,128,60,.2);border-radius:8px;color:#15803c;font-size:13px;font-weight:600}.sbd-hotel-content__cancelled-status i{font-size:16px;color:#15803c}.sbd-hotel-content__context{background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.sbd-hotel-content__context-tabs{display:flex;align-items:center;border-bottom:1px solid #e2e8f0;background:#f8fafc}.sbd-hotel-content__context-add{margin-left:auto;margin-right:10px}.sbd-hotel-content__context-tab{display:flex;align-items:center;gap:7px;padding:11px 20px;font-size:13px;font-weight:600;color:#64748b;background:transparent;border:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}.sbd-hotel-content__context-tab .pi{font-size:13px}.sbd-hotel-content__context-tab:hover{color:#334155}.sbd-hotel-content__context-tab--active{color:#1e2e4a;border-bottom-color:var(--sbd-primary, #3b82f6);background:#fff}.sbd-hotel-content__context-pill{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:10px}.sbd-hotel-content__context-pill--notes{background:#e0e7ff;color:#4338ca}.sbd-hotel-content__context-pill--changes{background:#fef3c7;color:#b45309}.sbd-hotel-content__context-empty{display:flex;align-items:center;gap:8px;padding:24px 20px;font-size:13px;color:#94a3b8}.sbd-hotel-content__context-empty .pi{font-size:16px}.sbd-hotel-content__notes-list{display:flex;flex-direction:column}.sbd-hotel-content__note{padding:12px 16px;border-bottom:1px solid #f1f5f9;display:flex;flex-direction:column;gap:6px}.sbd-hotel-content__note:last-child{border-bottom:none}.sbd-hotel-content__note-top{display:flex;align-items:center;gap:8px}.sbd-hotel-content__note-badge{font-size:10px;font-weight:800;letter-spacing:.05em;padding:2px 8px;border-radius:10px;text-transform:uppercase;flex-shrink:0}.sbd-hotel-content__note-badge--general{background:#dbeafe;color:#1d4ed8}.sbd-hotel-content__note-badge--remark{background:#fef3c7;color:#b45309}.sbd-hotel-content__note-badge--feedback{background:#f3e8ff;color:#7e22ce}.sbd-hotel-content__note-author{font-size:12px;font-weight:700;color:#1e2e4a}.sbd-hotel-content__note-date{margin-left:auto;font-size:11px;color:#94a3b8;white-space:nowrap}.sbd-hotel-content__note-msg{margin:0;font-size:13px;color:#334155;line-height:1.55}.sbd-hotel-content__changes-groups{display:flex;flex-direction:column}.sbd-hotel-content__changes-group{border-bottom:1px solid #f1f5f9}.sbd-hotel-content__changes-group:last-child{border-bottom:none}.sbd-hotel-content__changes-meta{display:flex;align-items:center;gap:6px;padding:8px 16px;background:#fafafa;border-bottom:1px solid #f1f5f9;font-size:11.5px;color:#64748b}.sbd-hotel-content__changes-meta strong{font-weight:700;color:#334155}.sbd-hotel-content__changes-meta .pi{font-size:11px;color:#94a3b8}.sbd-hotel-content__changes-sep{color:#cbd5e1}.sbd-hotel-content__changes-table{width:100%;border-collapse:collapse;font-size:12.5px}.sbd-hotel-content__changes-table thead tr{background:#f8fafc;border-bottom:1px solid #e2e8f0}.sbd-hotel-content__changes-table thead th{padding:7px 14px;text-align:left;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#64748b;white-space:nowrap}.sbd-hotel-content__changes-table thead th .pi{margin-right:4px;font-size:10px}.sbd-hotel-content__changes-table thead th:nth-child(2){color:#dc2626}.sbd-hotel-content__changes-table thead th:nth-child(3){color:#16a34a}.sbd-hotel-content__changes-table tbody tr{border-bottom:1px solid #f1f5f9}.sbd-hotel-content__changes-table tbody tr:last-child{border-bottom:none}.sbd-hotel-content__changes-table tbody tr:hover{background:#f8fafc}.sbd-hotel-content__changes-table tbody td{padding:8px 14px;vertical-align:top;word-break:break-word}.sbd-hotel-content__changes-field{font-size:12px;font-weight:600;color:#475569;width:28%}.sbd-hotel-content__changes-old{color:#dc2626;font-weight:500;text-decoration:line-through;opacity:.8;width:36%}.sbd-hotel-content__changes-new{color:#16a34a;font-weight:700;width:36%}.sbd-hotel-content__data-overview{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px}.sbd-hotel-content__section-title{margin:0 0 16px;font-size:15px;font-weight:700;color:#1e293b;letter-spacing:-.01em}.sbd-hotel-content__data-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}@media (max-width: 768px){.sbd-hotel-content__data-grid{grid-template-columns:1fr}}.sbd-hotel-content__data-card{display:flex;align-items:flex-start;gap:12px;padding:14px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;transition:all .2s ease}.sbd-hotel-content__data-card:hover{background:#fff;border-color:#cbd5e1;box-shadow:0 2px 8px #0000000a;transform:translateY(-1px)}.sbd-hotel-content__data-card--clickable{cursor:pointer}.sbd-hotel-content__data-card--clickable:hover{background:#fff;border-color:#3b82f6;box-shadow:0 4px 12px #3b82f626;transform:translateY(-2px)}.sbd-hotel-content__data-arrow{color:#94a3b8;font-size:14px;margin-left:auto;align-self:center;transition:transform .2s ease}.sbd-hotel-content__data-card--clickable:hover .sbd-hotel-content__data-arrow{transform:translate(3px);color:#3b82f6}.sbd-hotel-content__data-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0}.sbd-hotel-content__data-icon i{font-size:18px;color:#fff}.sbd-hotel-content__data-icon--blue{background:linear-gradient(135deg,#3b82f6,#2563eb)}.sbd-hotel-content__data-icon--purple{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.sbd-hotel-content__data-icon--green{background:linear-gradient(135deg,#10b981,#059669)}.sbd-hotel-content__data-icon--orange{background:linear-gradient(135deg,#f59e0b,#d97706)}.sbd-hotel-content__data-icon--indigo{background:linear-gradient(135deg,#6366f1,#4f46e5)}.sbd-hotel-content__data-icon--pink{background:linear-gradient(135deg,#ec4899,#db2777)}.sbd-hotel-content__data-icon--emerald{background:linear-gradient(135deg,#10b981,#059669)}.sbd-hotel-content__data-icon--teal{background:linear-gradient(135deg,#14b8a6,#0d9488)}.sbd-hotel-content__data-content{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.sbd-hotel-content__data-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#64748b}.sbd-hotel-content__data-value{font-size:14px;font-weight:700;color:#1e293b;word-break:break-word}.sbd-hotel-content__data-subtext{font-size:11px;color:#94a3b8;margin-top:2px}.sbd-hotel-content__packages-detail{display:flex;flex-direction:column;gap:16px}.sbd-hotel-content__package-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:12px}.sbd-hotel-content__package-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid #e2e8f0}.sbd-hotel-content__package-title{font-size:15px;font-weight:700;color:#1e293b}.sbd-hotel-content__badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:6px}.sbd-hotel-content__badge--success{background:#dcfce7;color:#16a34a}.sbd-hotel-content__badge--danger{background:#fee2e2;color:#dc2626}.sbd-hotel-content__badge--cancelled{background:#f3f4f6;color:#6b7280;border:1px solid #d1d5db}.sbd-hotel-content__package-badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.sbd-hotel-content__package-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0}.sbd-hotel-content__package-label{font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sbd-hotel-content__package-value{font-size:13px;font-weight:600;color:#1e293b}.sbd-hotel-content__rooms-section{margin-top:8px}.sbd-hotel-content__subsection-title{font-size:13px;font-weight:700;color:#475569;margin:0 0 12px;text-transform:uppercase;letter-spacing:.05em}.sbd-hotel-content__room-item{display:flex;align-items:flex-start;gap:12px;padding:12px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:10px}.sbd-hotel-content__room-item:last-child{margin-bottom:0}.sbd-hotel-content__room-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ec4899,#db2777);border-radius:8px;flex-shrink:0}.sbd-hotel-content__room-icon i{font-size:16px;color:#fff}.sbd-hotel-content__room-details{flex:1;display:flex;flex-direction:column;gap:6px}.sbd-hotel-content__room-name{font-size:14px;font-weight:700;color:#1e293b}.sbd-hotel-content__room-info{display:flex;flex-wrap:wrap;gap:6px}.sbd-hotel-content__room-tag{font-size:11px;font-weight:600;padding:3px 8px;background:#e0e7ff;color:#4f46e5;border-radius:4px}.sbd-hotel-content__room-occupancy{display:flex;gap:12px;font-size:12px;color:#64748b}.sbd-hotel-content__room-occupancy span{display:flex;align-items:center;gap:4px}.sbd-hotel-content__room-occupancy span i{font-size:11px}.sbd-hotel-content__skeleton-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}.sbd-hotel-content__skeleton-row{height:13px;background:#f1f5f9;border-radius:6px;animation:sbd-shimmer 1.4s ease-in-out infinite}@keyframes sbd-shimmer{0%,to{opacity:1}50%{opacity:.45}}\n"], dependencies: [{ kind: "component", type: SbdHotelItineraryCardComponent, selector: "app-sbd-hotel-itinerary-card", inputs: ["data", "verified"] }, { kind: "component", type: SbdDataSearchComponent, selector: "app-sbd-data-search", inputs: ["data"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdHotelContentComponent, isStandalone: true, selector: "app-sbd-hotel-content", inputs: { bookingData: { classPropertyName: "bookingData", publicName: "bookingData", isSignal: true, isRequired: true, transformFunction: null }, bookingStatus: { classPropertyName: "bookingStatus", publicName: "bookingStatus", isSignal: true, isRequired: true, transformFunction: null }, bookingId: { classPropertyName: "bookingId", publicName: "bookingId", isSignal: true, isRequired: true, transformFunction: null }, dataVerified: { classPropertyName: "dataVerified", publicName: "dataVerified", isSignal: true, isRequired: true, transformFunction: null }, bookingNotes: { classPropertyName: "bookingNotes", publicName: "bookingNotes", isSignal: true, isRequired: true, transformFunction: null }, bookingHistory: { classPropertyName: "bookingHistory", publicName: "bookingHistory", isSignal: true, isRequired: true, transformFunction: null }, historyGroups: { classPropertyName: "historyGroups", publicName: "historyGroups", isSignal: true, isRequired: true, transformFunction: null }, activeContextTab: { classPropertyName: "activeContextTab", publicName: "activeContextTab", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { cancelBooking: "cancelBooking", addNoteRequested: "addNoteRequested", contextTabChanged: "contextTabChanged" }, ngImport: i0, template: "<!-- 2-column layout for hotels -->\n<div class=\"sbd-hotel-content\">\n\n  <!-- Left: booking context -->\n  <aside class=\"sbd-hotel-content__aside\">\n\n    <!-- Data search at the top of the sidebar -->\n    @if (bookingStatus() === 'success') {\n      <app-sbd-data-search [data]=\"bookingData()\" />\n      <app-sbd-hotel-itinerary-card [data]=\"bookingData()\" [verified]=\"dataVerified()\" />\n    }\n\n    <!-- Loading skeleton for aside -->\n    @if (bookingStatus() === 'loading') {\n      <div class=\"sbd-hotel-content__skeleton-card\">\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:60%\"></div>\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:40%\"></div>\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:80%\"></div>\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:50%\"></div>\n      </div>\n    }\n\n  </aside>\n\n  <!-- Right: agent workspace -->\n  <main class=\"sbd-hotel-content__main\">\n\n    <!-- Error state -->\n    @if (bookingStatus() === 'error') {\n      <div class=\"sbd-hotel-content__error\">\n        <i class=\"pi pi-exclamation-circle\"></i>\n        <span>Booking not found. Double-check the ID and product type, then try again.</span>\n      </div>\n    }\n\n    <!-- Content once loaded -->\n    @if (bookingStatus() === 'success') {\n\n      <!-- Quick actions -->\n      <div class=\"sbd-hotel-content__quick-actions\">\n        <span class=\"sbd-hotel-content__quick-label\">Quick actions</span>\n        @if (allPackagesCancelled()) {\n          <div class=\"sbd-hotel-content__cancelled-status\">\n            <i class=\"pi pi-check-circle\"></i>\n            <span>All Packages Cancelled</span>\n          </div>\n        } @else {\n          <button\n            pButton\n            label=\"Cancel Booking\"\n            icon=\"pi pi-times-circle\"\n            class=\"p-button-danger p-button-sm\"\n            (click)=\"onCancelBooking()\">\n          </button>\n        }\n      </div>\n\n      <!-- Modern Data Overview Cards -->\n      <div class=\"sbd-hotel-content__data-overview\">\n        <h3 class=\"sbd-hotel-content__section-title\">Booking Overview</h3>\n\n        <div class=\"sbd-hotel-content__data-grid\">\n          <!-- Booking ID Card -->\n          @if (bookingData()?.bookingId) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--blue\">\n                <i class=\"pi pi-bookmark\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Booking ID</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ bookingData()?.bookingId }}</span>\n              </div>\n            </div>\n          }\n\n          <!-- Hotel Name Card -->\n          @if (bookingData()?.hotelName) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--purple\">\n                <i class=\"pi pi-home\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Hotel</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ bookingData()?.hotelName }}</span>\n              </div>\n            </div>\n          }\n\n          <!-- Check-in Date Card -->\n          @if (bookingData()?.dateFrom) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--green\">\n                <i class=\"pi pi-calendar-plus\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Check-in</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ formatDate(bookingData()?.dateFrom) }}</span>\n                @if (bookingData()?.checkInTime) {\n                  <span class=\"sbd-hotel-content__data-subtext\">{{ bookingData()?.checkInTime }}</span>\n                }\n              </div>\n            </div>\n          }\n\n          <!-- Check-out Date Card -->\n          @if (bookingData()?.dateTo) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--orange\">\n                <i class=\"pi pi-calendar-minus\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Check-out</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ formatDate(bookingData()?.dateTo) }}</span>\n                @if (bookingData()?.checkOutTime) {\n                  <span class=\"sbd-hotel-content__data-subtext\">{{ bookingData()?.checkOutTime }}</span>\n                }\n              </div>\n            </div>\n          }\n\n          <!-- Number of Nights Card -->\n          @if (bookingData()?.numberOfNights) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--indigo\">\n                <i class=\"pi pi-moon\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Duration</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ bookingData()?.numberOfNights }} Nights</span>\n              </div>\n            </div>\n          }\n\n          <!-- Number of Rooms Card -->\n          @if (bookingData()?.rooms) {\n            <div class=\"sbd-hotel-content__data-card sbd-hotel-content__data-card--clickable\" (click)=\"showPackagesDetail()\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--pink\">\n                <i class=\"pi pi-home\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Rooms</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ bookingData()?.rooms }} Room{{ bookingData()?.rooms > 1 ? 's' : '' }}</span>\n                @if (bookingData()?.packages && bookingData()?.packages.length > 0) {\n                  <span class=\"sbd-hotel-content__data-subtext\">Click for details</span>\n                }\n              </div>\n              @if (bookingData()?.packages && bookingData()?.packages.length > 0) {\n                <i class=\"pi pi-chevron-right sbd-hotel-content__data-arrow\"></i>\n              }\n            </div>\n          }\n\n          <!-- Price Card -->\n          @if (bookingData()?.price) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--emerald\">\n                <i class=\"pi pi-wallet\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Total Price</span>\n                <span class=\"sbd-hotel-content__data-value\">{{bookingData()?.price + ' ' +  bookingData()?.priceCurrency}}</span>\n              </div>\n            </div>\n          }\n\n          <!-- Hotel ID Card -->\n          @if (bookingData()?.hotelId) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--teal\">\n                <i class=\"pi pi-id-card\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Hotel ID</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ bookingData()?.hotelId }}</span>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Context: Notes + Changes tabbed -->\n      <div class=\"sbd-hotel-content__context\">\n\n        <!-- Tab bar -->\n        <div class=\"sbd-hotel-content__context-tabs\">\n          <button class=\"sbd-hotel-content__context-tab\"\n            [class.sbd-hotel-content__context-tab--active]=\"activeContextTab() === 'changes'\"\n            (click)=\"onTabChange('changes')\">\n            <i class=\"pi pi-history\"></i>\n            Changes\n            @if (bookingHistory().length > 0) {\n              <span class=\"sbd-hotel-content__context-pill sbd-hotel-content__context-pill--changes\">{{ bookingHistory().length }}</span>\n            }\n          </button>\n          <button class=\"sbd-hotel-content__context-tab\"\n            [class.sbd-hotel-content__context-tab--active]=\"activeContextTab() === 'notes'\"\n            (click)=\"onTabChange('notes')\">\n            <i class=\"pi pi-comments\"></i>\n            Notes\n            <span class=\"sbd-hotel-content__context-pill sbd-hotel-content__context-pill--notes\">{{ bookingNotes().length }}</span>\n          </button>\n          @if (activeContextTab() === 'notes') {\n            <button pButton label=\"Add Note\" icon=\"pi pi-plus\" class=\"p-button-sm p-button-outlined sbd-hotel-content__context-add\"\n              (click)=\"onAddNote()\">\n            </button>\n          }\n        </div>\n\n        <!-- Notes tab -->\n        @if (activeContextTab() === 'notes') {\n          <div class=\"sbd-hotel-content__notes-list\">\n            @if (bookingNotes().length === 0) {\n              <div class=\"sbd-hotel-content__context-empty\">\n                <i class=\"pi pi-inbox\"></i> No notes yet\n              </div>\n            }\n            @for (note of bookingNotes(); track $index) {\n              <div class=\"sbd-hotel-content__note\">\n                <div class=\"sbd-hotel-content__note-top\">\n                  <span class=\"sbd-hotel-content__note-badge sbd-hotel-content__note-badge--{{ note.action | lowercase }}\">\n                    {{ note.action }}\n                  </span>\n                  <span class=\"sbd-hotel-content__note-author\">\n                    {{ note.writtenBy?.firstName }} {{ note.writtenBy?.lastName }}\n                  </span>\n                  <span class=\"sbd-hotel-content__note-date\">{{ fmtNoteDate(note.date) }}</span>\n                </div>\n                <p class=\"sbd-hotel-content__note-msg\">{{ note.message }}</p>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Changes tab -->\n        @if (activeContextTab() === 'changes') {\n          <div class=\"sbd-hotel-content__changes-groups\">\n            @if (historyGroups().length === 0) {\n              <div class=\"sbd-hotel-content__context-empty\">\n                <i class=\"pi pi-check\"></i> No changes recorded\n              </div>\n            }\n            @for (group of historyGroups(); track group.changedAt) {\n              <div class=\"sbd-hotel-content__changes-group\">\n                <div class=\"sbd-hotel-content__changes-meta\">\n                  <i class=\"pi pi-user\"></i>\n                  <strong>{{ group.changedBy }}</strong>\n                  <span class=\"sbd-hotel-content__changes-sep\">\u00B7</span>\n                  <span>{{ fmtDate(group.changedAt) }}</span>\n                </div>\n                <table class=\"sbd-hotel-content__changes-table\">\n                  <thead>\n                    <tr>\n                      <th>Field</th>\n                      <th><i class=\"pi pi-times-circle\"></i> Before</th>\n                      <th><i class=\"pi pi-check-circle\"></i> After</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (entry of group.entries; track entry.field) {\n                      <tr>\n                        <td class=\"sbd-hotel-content__changes-field\">{{ formatField(entry.field) }}</td>\n                        <td class=\"sbd-hotel-content__changes-old\">{{ entry.from }}</td>\n                        <td class=\"sbd-hotel-content__changes-new\">{{ entry.to }}</td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            }\n          </div>\n        }\n\n      </div>\n\n    }\n\n    <!-- Loading skeleton for main -->\n    @if (bookingStatus() === 'loading') {\n      <div class=\"sbd-hotel-content__skeleton-card\">\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:40%\"></div>\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:25%\"></div>\n      </div>\n    }\n\n  </main>\n\n</div>\n\n<!-- Detail Dialog -->\n<p-dialog\n  [(visible)]=\"detailDialogVisible\"\n  [header]=\"selectedDetail()?.title || 'Details'\"\n  [modal]=\"true\"\n  [style]=\"{ width: '600px', maxWidth: '90vw' }\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  styleClass=\"sbd-hotel-content__detail-dialog\">\n\n  @if (selectedDetail()?.type === 'packages' && selectedDetail()?.data) {\n    <div class=\"sbd-hotel-content__packages-detail\">\n      @for (pkg of selectedDetail()?.data; track $index) {\n        <div class=\"sbd-hotel-content__package-card\">\n          <div class=\"sbd-hotel-content__package-header\">\n            <span class=\"sbd-hotel-content__package-title\">Package {{ $index + 1 }}</span>\n            <div class=\"sbd-hotel-content__package-badges\">\n              @if (pkg.isCancelled) {\n                <span class=\"sbd-hotel-content__badge sbd-hotel-content__badge--cancelled\">Cancelled</span>\n              }\n              @if (pkg.isRefundable) {\n                <span class=\"sbd-hotel-content__badge sbd-hotel-content__badge--success\">Refundable</span>\n              } @else {\n                <span class=\"sbd-hotel-content__badge sbd-hotel-content__badge--danger\">Non-Refundable</span>\n              }\n            </div>\n          </div>\n\n          @if (pkg.supplier) {\n            <div class=\"sbd-hotel-content__package-row\">\n              <span class=\"sbd-hotel-content__package-label\">Supplier</span>\n              <span class=\"sbd-hotel-content__package-value\">{{ pkg.supplier }}</span>\n            </div>\n          }\n\n          @if (pkg.rooms && pkg.rooms.length > 0) {\n            <div class=\"sbd-hotel-content__rooms-section\">\n              <h4 class=\"sbd-hotel-content__subsection-title\">Rooms ({{ pkg.rooms.length }})</h4>\n              @for (room of pkg.rooms; track room.roomId || $index) {\n                <div class=\"sbd-hotel-content__room-item\">\n                  <div class=\"sbd-hotel-content__room-icon\">\n                    <i class=\"pi pi-home\"></i>\n                  </div>\n                  <div class=\"sbd-hotel-content__room-details\">\n                    @if (room.roomName) {\n                      <div class=\"sbd-hotel-content__room-name\">{{ room.roomName }}</div>\n                    }\n                    <div class=\"sbd-hotel-content__room-info\">\n                      @if (room.roomType) {\n                        <span class=\"sbd-hotel-content__room-tag\">{{ room.roomType }}</span>\n                      }\n                      @if (room.roomBasis) {\n                        <span class=\"sbd-hotel-content__room-tag\">{{ room.roomBasis }}</span>\n                      }\n                      @if (room.bedType) {\n                        <span class=\"sbd-hotel-content__room-tag\">{{ room.bedType }}</span>\n                      }\n                    </div>\n                    @if (room.adultsNum || room.childrenNum) {\n                      <div class=\"sbd-hotel-content__room-occupancy\">\n                        @if (room.adultsNum) {\n                          <span><i class=\"pi pi-user\"></i> {{ room.adultsNum }} Adult{{ room.adultsNum > 1 ? 's' : '' }}</span>\n                        }\n                        @if (room.childrenNum) {\n                          <span><i class=\"pi pi-users\"></i> {{ room.childrenNum }} Child{{ room.childrenNum > 1 ? 'ren' : '' }}</span>\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n          }\n\n          @if (pkg.refundableUntil) {\n            <div class=\"sbd-hotel-content__package-row\">\n              <span class=\"sbd-hotel-content__package-label\">Refundable Until</span>\n              <span class=\"sbd-hotel-content__package-value\">{{ pkg.refundableUntil }}</span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</p-dialog>\n", styles: [".sbd-hotel-content{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}@media (max-width: 960px){.sbd-hotel-content{grid-template-columns:1fr}}.sbd-hotel-content__error{display:flex;align-items:center;gap:10px;padding:16px 20px;background:#fef2f2;border:1px solid rgba(239,68,68,.2);border-radius:10px;color:#ef4444;font-size:13.5px;font-weight:500}.sbd-hotel-content__error i{font-size:18px}.sbd-hotel-content__aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:20px}.sbd-hotel-content__main{display:flex;flex-direction:column;gap:16px}.sbd-hotel-content__quick-actions{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;flex-wrap:wrap}.sbd-hotel-content__quick-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;flex-shrink:0}.sbd-hotel-content__cancelled-status{display:flex;align-items:center;gap:8px;padding:8px 14px;background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:1px solid rgba(21,128,60,.2);border-radius:8px;color:#15803c;font-size:13px;font-weight:600}.sbd-hotel-content__cancelled-status i{font-size:16px;color:#15803c}.sbd-hotel-content__context{background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.sbd-hotel-content__context-tabs{display:flex;align-items:center;border-bottom:1px solid #e2e8f0;background:#f8fafc}.sbd-hotel-content__context-add{margin-left:auto;margin-right:10px}.sbd-hotel-content__context-tab{display:flex;align-items:center;gap:7px;padding:11px 20px;font-size:13px;font-weight:600;color:#64748b;background:transparent;border:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}.sbd-hotel-content__context-tab .pi{font-size:13px}.sbd-hotel-content__context-tab:hover{color:#334155}.sbd-hotel-content__context-tab--active{color:#1e2e4a;border-bottom-color:var(--sbd-primary, #3b82f6);background:#fff}.sbd-hotel-content__context-pill{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:10px}.sbd-hotel-content__context-pill--notes{background:#e0e7ff;color:#4338ca}.sbd-hotel-content__context-pill--changes{background:#fef3c7;color:#b45309}.sbd-hotel-content__context-empty{display:flex;align-items:center;gap:8px;padding:24px 20px;font-size:13px;color:#94a3b8}.sbd-hotel-content__context-empty .pi{font-size:16px}.sbd-hotel-content__notes-list{display:flex;flex-direction:column}.sbd-hotel-content__note{padding:12px 16px;border-bottom:1px solid #f1f5f9;display:flex;flex-direction:column;gap:6px}.sbd-hotel-content__note:last-child{border-bottom:none}.sbd-hotel-content__note-top{display:flex;align-items:center;gap:8px}.sbd-hotel-content__note-badge{font-size:10px;font-weight:800;letter-spacing:.05em;padding:2px 8px;border-radius:10px;text-transform:uppercase;flex-shrink:0}.sbd-hotel-content__note-badge--general{background:#dbeafe;color:#1d4ed8}.sbd-hotel-content__note-badge--remark{background:#fef3c7;color:#b45309}.sbd-hotel-content__note-badge--feedback{background:#f3e8ff;color:#7e22ce}.sbd-hotel-content__note-author{font-size:12px;font-weight:700;color:#1e2e4a}.sbd-hotel-content__note-date{margin-left:auto;font-size:11px;color:#94a3b8;white-space:nowrap}.sbd-hotel-content__note-msg{margin:0;font-size:13px;color:#334155;line-height:1.55}.sbd-hotel-content__changes-groups{display:flex;flex-direction:column}.sbd-hotel-content__changes-group{border-bottom:1px solid #f1f5f9}.sbd-hotel-content__changes-group:last-child{border-bottom:none}.sbd-hotel-content__changes-meta{display:flex;align-items:center;gap:6px;padding:8px 16px;background:#fafafa;border-bottom:1px solid #f1f5f9;font-size:11.5px;color:#64748b}.sbd-hotel-content__changes-meta strong{font-weight:700;color:#334155}.sbd-hotel-content__changes-meta .pi{font-size:11px;color:#94a3b8}.sbd-hotel-content__changes-sep{color:#cbd5e1}.sbd-hotel-content__changes-table{width:100%;border-collapse:collapse;font-size:12.5px}.sbd-hotel-content__changes-table thead tr{background:#f8fafc;border-bottom:1px solid #e2e8f0}.sbd-hotel-content__changes-table thead th{padding:7px 14px;text-align:left;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#64748b;white-space:nowrap}.sbd-hotel-content__changes-table thead th .pi{margin-right:4px;font-size:10px}.sbd-hotel-content__changes-table thead th:nth-child(2){color:#dc2626}.sbd-hotel-content__changes-table thead th:nth-child(3){color:#16a34a}.sbd-hotel-content__changes-table tbody tr{border-bottom:1px solid #f1f5f9}.sbd-hotel-content__changes-table tbody tr:last-child{border-bottom:none}.sbd-hotel-content__changes-table tbody tr:hover{background:#f8fafc}.sbd-hotel-content__changes-table tbody td{padding:8px 14px;vertical-align:top;word-break:break-word}.sbd-hotel-content__changes-field{font-size:12px;font-weight:600;color:#475569;width:28%}.sbd-hotel-content__changes-old{color:#dc2626;font-weight:500;text-decoration:line-through;opacity:.8;width:36%}.sbd-hotel-content__changes-new{color:#16a34a;font-weight:700;width:36%}.sbd-hotel-content__data-overview{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px}.sbd-hotel-content__section-title{margin:0 0 16px;font-size:15px;font-weight:700;color:#1e293b;letter-spacing:-.01em}.sbd-hotel-content__data-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}@media (max-width: 768px){.sbd-hotel-content__data-grid{grid-template-columns:1fr}}.sbd-hotel-content__data-card{display:flex;align-items:flex-start;gap:12px;padding:14px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;transition:all .2s ease}.sbd-hotel-content__data-card:hover{background:#fff;border-color:#cbd5e1;box-shadow:0 2px 8px #0000000a;transform:translateY(-1px)}.sbd-hotel-content__data-card--clickable{cursor:pointer}.sbd-hotel-content__data-card--clickable:hover{background:#fff;border-color:#3b82f6;box-shadow:0 4px 12px #3b82f626;transform:translateY(-2px)}.sbd-hotel-content__data-arrow{color:#94a3b8;font-size:14px;margin-left:auto;align-self:center;transition:transform .2s ease}.sbd-hotel-content__data-card--clickable:hover .sbd-hotel-content__data-arrow{transform:translate(3px);color:#3b82f6}.sbd-hotel-content__data-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0}.sbd-hotel-content__data-icon i{font-size:18px;color:#fff}.sbd-hotel-content__data-icon--blue{background:linear-gradient(135deg,#3b82f6,#2563eb)}.sbd-hotel-content__data-icon--purple{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.sbd-hotel-content__data-icon--green{background:linear-gradient(135deg,#10b981,#059669)}.sbd-hotel-content__data-icon--orange{background:linear-gradient(135deg,#f59e0b,#d97706)}.sbd-hotel-content__data-icon--indigo{background:linear-gradient(135deg,#6366f1,#4f46e5)}.sbd-hotel-content__data-icon--pink{background:linear-gradient(135deg,#ec4899,#db2777)}.sbd-hotel-content__data-icon--emerald{background:linear-gradient(135deg,#10b981,#059669)}.sbd-hotel-content__data-icon--teal{background:linear-gradient(135deg,#14b8a6,#0d9488)}.sbd-hotel-content__data-content{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.sbd-hotel-content__data-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#64748b}.sbd-hotel-content__data-value{font-size:14px;font-weight:700;color:#1e293b;word-break:break-word}.sbd-hotel-content__data-subtext{font-size:11px;color:#94a3b8;margin-top:2px}.sbd-hotel-content__packages-detail{display:flex;flex-direction:column;gap:16px}.sbd-hotel-content__package-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:12px}.sbd-hotel-content__package-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid #e2e8f0}.sbd-hotel-content__package-title{font-size:15px;font-weight:700;color:#1e293b}.sbd-hotel-content__badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:6px}.sbd-hotel-content__badge--success{background:#dcfce7;color:#16a34a}.sbd-hotel-content__badge--danger{background:#fee2e2;color:#dc2626}.sbd-hotel-content__badge--cancelled{background:#f3f4f6;color:#6b7280;border:1px solid #d1d5db}.sbd-hotel-content__package-badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.sbd-hotel-content__package-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0}.sbd-hotel-content__package-label{font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sbd-hotel-content__package-value{font-size:13px;font-weight:600;color:#1e293b}.sbd-hotel-content__rooms-section{margin-top:8px}.sbd-hotel-content__subsection-title{font-size:13px;font-weight:700;color:#475569;margin:0 0 12px;text-transform:uppercase;letter-spacing:.05em}.sbd-hotel-content__room-item{display:flex;align-items:flex-start;gap:12px;padding:12px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:10px}.sbd-hotel-content__room-item:last-child{margin-bottom:0}.sbd-hotel-content__room-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ec4899,#db2777);border-radius:8px;flex-shrink:0}.sbd-hotel-content__room-icon i{font-size:16px;color:#fff}.sbd-hotel-content__room-details{flex:1;display:flex;flex-direction:column;gap:6px}.sbd-hotel-content__room-name{font-size:14px;font-weight:700;color:#1e293b}.sbd-hotel-content__room-info{display:flex;flex-wrap:wrap;gap:6px}.sbd-hotel-content__room-tag{font-size:11px;font-weight:600;padding:3px 8px;background:#e0e7ff;color:#4f46e5;border-radius:4px}.sbd-hotel-content__room-occupancy{display:flex;gap:12px;font-size:12px;color:#64748b}.sbd-hotel-content__room-occupancy span{display:flex;align-items:center;gap:4px}.sbd-hotel-content__room-occupancy span i{font-size:11px}.sbd-hotel-content__skeleton-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}.sbd-hotel-content__skeleton-row{height:13px;background:#f1f5f9;border-radius:6px;animation:sbd-shimmer 1.4s ease-in-out infinite}@keyframes sbd-shimmer{0%,to{opacity:1}50%{opacity:.45}}\n"], dependencies: [{ kind: "component", type: SbdHotelItineraryCardComponent, selector: "app-sbd-hotel-itinerary-card", inputs: ["data", "verified"] }, { kind: "component", type: SbdDataSearchComponent, selector: "app-sbd-data-search", inputs: ["data"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdHotelContentComponent, decorators: [{
             type: Component,
@@ -8280,7 +8266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         NgIf,
                         ButtonModule,
                         DialogModule,
-                    ], template: "<!-- 2-column layout for hotels -->\n<div class=\"sbd-hotel-content\">\n\n  <!-- Left: booking context -->\n  <aside class=\"sbd-hotel-content__aside\">\n\n    <!-- Data search at the top of the sidebar -->\n    @if (bookingStatus() === 'success') {\n      <app-sbd-data-search [data]=\"bookingData()\" />\n      <app-sbd-hotel-itinerary-card [data]=\"bookingData()\" [verified]=\"dataVerified()\" />\n    }\n\n    <!-- Loading skeleton for aside -->\n    @if (bookingStatus() === 'loading') {\n      <div class=\"sbd-hotel-content__skeleton-card\">\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:60%\"></div>\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:40%\"></div>\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:80%\"></div>\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:50%\"></div>\n      </div>\n    }\n\n  </aside>\n\n  <!-- Right: agent workspace -->\n  <main class=\"sbd-hotel-content__main\">\n\n    <!-- Error state -->\n    @if (bookingStatus() === 'error') {\n      <div class=\"sbd-hotel-content__error\">\n        <i class=\"pi pi-exclamation-circle\"></i>\n        <span>Booking not found. Double-check the ID and product type, then try again.</span>\n      </div>\n    }\n\n    <!-- Content once loaded -->\n    @if (bookingStatus() === 'success') {\n\n      <!-- Quick actions -->\n      <div class=\"sbd-hotel-content__quick-actions\">\n        <span class=\"sbd-hotel-content__quick-label\">Quick actions</span>\n        @if (allPackagesCancelled()) {\n          <div class=\"sbd-hotel-content__cancelled-status\">\n            <i class=\"pi pi-check-circle\"></i>\n            <span>All Packages Cancelled</span>\n          </div>\n        } @else {\n          <button\n            pButton\n            label=\"Cancel Booking\"\n            icon=\"pi pi-times-circle\"\n            class=\"p-button-danger p-button-sm\"\n            (click)=\"onCancelBooking()\">\n          </button>\n        }\n      </div>\n\n      <!-- Modern Data Overview Cards -->\n      <div class=\"sbd-hotel-content__data-overview\">\n        <h3 class=\"sbd-hotel-content__section-title\">Booking Overview</h3>\n\n        <div class=\"sbd-hotel-content__data-grid\">\n          <!-- Booking ID Card -->\n          @if (bookingData()?.bookingId) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--blue\">\n                <i class=\"pi pi-bookmark\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Booking ID</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ bookingData()?.bookingId }}</span>\n              </div>\n            </div>\n          }\n\n          <!-- Hotel Name Card -->\n          @if (bookingData()?.hotelName) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--purple\">\n                <i class=\"pi pi-home\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Hotel</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ bookingData()?.hotelName }}</span>\n              </div>\n            </div>\n          }\n\n          <!-- Check-in Date Card -->\n          @if (bookingData()?.dateFrom) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--green\">\n                <i class=\"pi pi-calendar-plus\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Check-in</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ formatDate(bookingData()?.dateFrom) }}</span>\n                @if (bookingData()?.checkInTime) {\n                  <span class=\"sbd-hotel-content__data-subtext\">{{ bookingData()?.checkInTime }}</span>\n                }\n              </div>\n            </div>\n          }\n\n          <!-- Check-out Date Card -->\n          @if (bookingData()?.dateTo) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--orange\">\n                <i class=\"pi pi-calendar-minus\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Check-out</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ formatDate(bookingData()?.dateTo) }}</span>\n                @if (bookingData()?.checkOutTime) {\n                  <span class=\"sbd-hotel-content__data-subtext\">{{ bookingData()?.checkOutTime }}</span>\n                }\n              </div>\n            </div>\n          }\n\n          <!-- Number of Nights Card -->\n          @if (bookingData()?.numberOfNights) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--indigo\">\n                <i class=\"pi pi-moon\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Duration</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ bookingData()?.numberOfNights }} Nights</span>\n              </div>\n            </div>\n          }\n\n          <!-- Number of Rooms Card -->\n          @if (bookingData()?.rooms) {\n            <div class=\"sbd-hotel-content__data-card sbd-hotel-content__data-card--clickable\" (click)=\"showPackagesDetail()\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--pink\">\n                <i class=\"pi pi-home\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Rooms</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ bookingData()?.rooms }} Room{{ bookingData()?.rooms > 1 ? 's' : '' }}</span>\n                @if (bookingData()?.packages && bookingData()?.packages.length > 0) {\n                  <span class=\"sbd-hotel-content__data-subtext\">Click for details</span>\n                }\n              </div>\n              @if (bookingData()?.packages && bookingData()?.packages.length > 0) {\n                <i class=\"pi pi-chevron-right sbd-hotel-content__data-arrow\"></i>\n              }\n            </div>\n          }\n\n          <!-- Price Card -->\n          @if (bookingData()?.price) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--emerald\">\n                <i class=\"pi pi-wallet\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Total Price</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ formatPrice(bookingData()?.price) }}</span>\n              </div>\n            </div>\n          }\n\n          <!-- Hotel ID Card -->\n          @if (bookingData()?.hotelId) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--teal\">\n                <i class=\"pi pi-id-card\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Hotel ID</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ bookingData()?.hotelId }}</span>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Context: Notes + Changes tabbed -->\n      <div class=\"sbd-hotel-content__context\">\n\n        <!-- Tab bar -->\n        <div class=\"sbd-hotel-content__context-tabs\">\n          <button class=\"sbd-hotel-content__context-tab\"\n            [class.sbd-hotel-content__context-tab--active]=\"activeContextTab() === 'changes'\"\n            (click)=\"onTabChange('changes')\">\n            <i class=\"pi pi-history\"></i>\n            Changes\n            @if (bookingHistory().length > 0) {\n              <span class=\"sbd-hotel-content__context-pill sbd-hotel-content__context-pill--changes\">{{ bookingHistory().length }}</span>\n            }\n          </button>\n          <button class=\"sbd-hotel-content__context-tab\"\n            [class.sbd-hotel-content__context-tab--active]=\"activeContextTab() === 'notes'\"\n            (click)=\"onTabChange('notes')\">\n            <i class=\"pi pi-comments\"></i>\n            Notes\n            <span class=\"sbd-hotel-content__context-pill sbd-hotel-content__context-pill--notes\">{{ bookingNotes().length }}</span>\n          </button>\n          @if (activeContextTab() === 'notes') {\n            <button pButton label=\"Add Note\" icon=\"pi pi-plus\" class=\"p-button-sm p-button-outlined sbd-hotel-content__context-add\"\n              (click)=\"onAddNote()\">\n            </button>\n          }\n        </div>\n\n        <!-- Notes tab -->\n        @if (activeContextTab() === 'notes') {\n          <div class=\"sbd-hotel-content__notes-list\">\n            @if (bookingNotes().length === 0) {\n              <div class=\"sbd-hotel-content__context-empty\">\n                <i class=\"pi pi-inbox\"></i> No notes yet\n              </div>\n            }\n            @for (note of bookingNotes(); track $index) {\n              <div class=\"sbd-hotel-content__note\">\n                <div class=\"sbd-hotel-content__note-top\">\n                  <span class=\"sbd-hotel-content__note-badge sbd-hotel-content__note-badge--{{ note.action | lowercase }}\">\n                    {{ note.action }}\n                  </span>\n                  <span class=\"sbd-hotel-content__note-author\">\n                    {{ note.writtenBy?.firstName }} {{ note.writtenBy?.lastName }}\n                  </span>\n                  <span class=\"sbd-hotel-content__note-date\">{{ fmtNoteDate(note.date) }}</span>\n                </div>\n                <p class=\"sbd-hotel-content__note-msg\">{{ note.message }}</p>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Changes tab -->\n        @if (activeContextTab() === 'changes') {\n          <div class=\"sbd-hotel-content__changes-groups\">\n            @if (historyGroups().length === 0) {\n              <div class=\"sbd-hotel-content__context-empty\">\n                <i class=\"pi pi-check\"></i> No changes recorded\n              </div>\n            }\n            @for (group of historyGroups(); track group.changedAt) {\n              <div class=\"sbd-hotel-content__changes-group\">\n                <div class=\"sbd-hotel-content__changes-meta\">\n                  <i class=\"pi pi-user\"></i>\n                  <strong>{{ group.changedBy }}</strong>\n                  <span class=\"sbd-hotel-content__changes-sep\">\u00B7</span>\n                  <span>{{ fmtDate(group.changedAt) }}</span>\n                </div>\n                <table class=\"sbd-hotel-content__changes-table\">\n                  <thead>\n                    <tr>\n                      <th>Field</th>\n                      <th><i class=\"pi pi-times-circle\"></i> Before</th>\n                      <th><i class=\"pi pi-check-circle\"></i> After</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (entry of group.entries; track entry.field) {\n                      <tr>\n                        <td class=\"sbd-hotel-content__changes-field\">{{ formatField(entry.field) }}</td>\n                        <td class=\"sbd-hotel-content__changes-old\">{{ entry.from }}</td>\n                        <td class=\"sbd-hotel-content__changes-new\">{{ entry.to }}</td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            }\n          </div>\n        }\n\n      </div>\n\n    }\n\n    <!-- Loading skeleton for main -->\n    @if (bookingStatus() === 'loading') {\n      <div class=\"sbd-hotel-content__skeleton-card\">\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:40%\"></div>\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:25%\"></div>\n      </div>\n    }\n\n  </main>\n\n</div>\n\n<!-- Detail Dialog -->\n<p-dialog\n  [(visible)]=\"detailDialogVisible\"\n  [header]=\"selectedDetail()?.title || 'Details'\"\n  [modal]=\"true\"\n  [style]=\"{ width: '600px', maxWidth: '90vw' }\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  styleClass=\"sbd-hotel-content__detail-dialog\">\n\n  @if (selectedDetail()?.type === 'packages' && selectedDetail()?.data) {\n    <div class=\"sbd-hotel-content__packages-detail\">\n      @for (pkg of selectedDetail()?.data; track $index) {\n        <div class=\"sbd-hotel-content__package-card\">\n          <div class=\"sbd-hotel-content__package-header\">\n            <span class=\"sbd-hotel-content__package-title\">Package {{ $index + 1 }}</span>\n            <div class=\"sbd-hotel-content__package-badges\">\n              @if (pkg.isCancelled) {\n                <span class=\"sbd-hotel-content__badge sbd-hotel-content__badge--cancelled\">Cancelled</span>\n              }\n              @if (pkg.isRefundable) {\n                <span class=\"sbd-hotel-content__badge sbd-hotel-content__badge--success\">Refundable</span>\n              } @else {\n                <span class=\"sbd-hotel-content__badge sbd-hotel-content__badge--danger\">Non-Refundable</span>\n              }\n            </div>\n          </div>\n\n          @if (pkg.supplier) {\n            <div class=\"sbd-hotel-content__package-row\">\n              <span class=\"sbd-hotel-content__package-label\">Supplier</span>\n              <span class=\"sbd-hotel-content__package-value\">{{ pkg.supplier }}</span>\n            </div>\n          }\n\n          @if (pkg.rooms && pkg.rooms.length > 0) {\n            <div class=\"sbd-hotel-content__rooms-section\">\n              <h4 class=\"sbd-hotel-content__subsection-title\">Rooms ({{ pkg.rooms.length }})</h4>\n              @for (room of pkg.rooms; track room.roomId || $index) {\n                <div class=\"sbd-hotel-content__room-item\">\n                  <div class=\"sbd-hotel-content__room-icon\">\n                    <i class=\"pi pi-home\"></i>\n                  </div>\n                  <div class=\"sbd-hotel-content__room-details\">\n                    @if (room.roomName) {\n                      <div class=\"sbd-hotel-content__room-name\">{{ room.roomName }}</div>\n                    }\n                    <div class=\"sbd-hotel-content__room-info\">\n                      @if (room.roomType) {\n                        <span class=\"sbd-hotel-content__room-tag\">{{ room.roomType }}</span>\n                      }\n                      @if (room.roomBasis) {\n                        <span class=\"sbd-hotel-content__room-tag\">{{ room.roomBasis }}</span>\n                      }\n                      @if (room.bedType) {\n                        <span class=\"sbd-hotel-content__room-tag\">{{ room.bedType }}</span>\n                      }\n                    </div>\n                    @if (room.adultsNum || room.childrenNum) {\n                      <div class=\"sbd-hotel-content__room-occupancy\">\n                        @if (room.adultsNum) {\n                          <span><i class=\"pi pi-user\"></i> {{ room.adultsNum }} Adult{{ room.adultsNum > 1 ? 's' : '' }}</span>\n                        }\n                        @if (room.childrenNum) {\n                          <span><i class=\"pi pi-users\"></i> {{ room.childrenNum }} Child{{ room.childrenNum > 1 ? 'ren' : '' }}</span>\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n          }\n\n          @if (pkg.refundableUntil) {\n            <div class=\"sbd-hotel-content__package-row\">\n              <span class=\"sbd-hotel-content__package-label\">Refundable Until</span>\n              <span class=\"sbd-hotel-content__package-value\">{{ pkg.refundableUntil }}</span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</p-dialog>\n", styles: [".sbd-hotel-content{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}@media (max-width: 960px){.sbd-hotel-content{grid-template-columns:1fr}}.sbd-hotel-content__error{display:flex;align-items:center;gap:10px;padding:16px 20px;background:#fef2f2;border:1px solid rgba(239,68,68,.2);border-radius:10px;color:#ef4444;font-size:13.5px;font-weight:500}.sbd-hotel-content__error i{font-size:18px}.sbd-hotel-content__aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:20px}.sbd-hotel-content__main{display:flex;flex-direction:column;gap:16px}.sbd-hotel-content__quick-actions{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;flex-wrap:wrap}.sbd-hotel-content__quick-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;flex-shrink:0}.sbd-hotel-content__cancelled-status{display:flex;align-items:center;gap:8px;padding:8px 14px;background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:1px solid rgba(21,128,60,.2);border-radius:8px;color:#15803c;font-size:13px;font-weight:600}.sbd-hotel-content__cancelled-status i{font-size:16px;color:#15803c}.sbd-hotel-content__context{background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.sbd-hotel-content__context-tabs{display:flex;align-items:center;border-bottom:1px solid #e2e8f0;background:#f8fafc}.sbd-hotel-content__context-add{margin-left:auto;margin-right:10px}.sbd-hotel-content__context-tab{display:flex;align-items:center;gap:7px;padding:11px 20px;font-size:13px;font-weight:600;color:#64748b;background:transparent;border:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}.sbd-hotel-content__context-tab .pi{font-size:13px}.sbd-hotel-content__context-tab:hover{color:#334155}.sbd-hotel-content__context-tab--active{color:#1e2e4a;border-bottom-color:var(--sbd-primary, #3b82f6);background:#fff}.sbd-hotel-content__context-pill{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:10px}.sbd-hotel-content__context-pill--notes{background:#e0e7ff;color:#4338ca}.sbd-hotel-content__context-pill--changes{background:#fef3c7;color:#b45309}.sbd-hotel-content__context-empty{display:flex;align-items:center;gap:8px;padding:24px 20px;font-size:13px;color:#94a3b8}.sbd-hotel-content__context-empty .pi{font-size:16px}.sbd-hotel-content__notes-list{display:flex;flex-direction:column}.sbd-hotel-content__note{padding:12px 16px;border-bottom:1px solid #f1f5f9;display:flex;flex-direction:column;gap:6px}.sbd-hotel-content__note:last-child{border-bottom:none}.sbd-hotel-content__note-top{display:flex;align-items:center;gap:8px}.sbd-hotel-content__note-badge{font-size:10px;font-weight:800;letter-spacing:.05em;padding:2px 8px;border-radius:10px;text-transform:uppercase;flex-shrink:0}.sbd-hotel-content__note-badge--general{background:#dbeafe;color:#1d4ed8}.sbd-hotel-content__note-badge--remark{background:#fef3c7;color:#b45309}.sbd-hotel-content__note-badge--feedback{background:#f3e8ff;color:#7e22ce}.sbd-hotel-content__note-author{font-size:12px;font-weight:700;color:#1e2e4a}.sbd-hotel-content__note-date{margin-left:auto;font-size:11px;color:#94a3b8;white-space:nowrap}.sbd-hotel-content__note-msg{margin:0;font-size:13px;color:#334155;line-height:1.55}.sbd-hotel-content__changes-groups{display:flex;flex-direction:column}.sbd-hotel-content__changes-group{border-bottom:1px solid #f1f5f9}.sbd-hotel-content__changes-group:last-child{border-bottom:none}.sbd-hotel-content__changes-meta{display:flex;align-items:center;gap:6px;padding:8px 16px;background:#fafafa;border-bottom:1px solid #f1f5f9;font-size:11.5px;color:#64748b}.sbd-hotel-content__changes-meta strong{font-weight:700;color:#334155}.sbd-hotel-content__changes-meta .pi{font-size:11px;color:#94a3b8}.sbd-hotel-content__changes-sep{color:#cbd5e1}.sbd-hotel-content__changes-table{width:100%;border-collapse:collapse;font-size:12.5px}.sbd-hotel-content__changes-table thead tr{background:#f8fafc;border-bottom:1px solid #e2e8f0}.sbd-hotel-content__changes-table thead th{padding:7px 14px;text-align:left;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#64748b;white-space:nowrap}.sbd-hotel-content__changes-table thead th .pi{margin-right:4px;font-size:10px}.sbd-hotel-content__changes-table thead th:nth-child(2){color:#dc2626}.sbd-hotel-content__changes-table thead th:nth-child(3){color:#16a34a}.sbd-hotel-content__changes-table tbody tr{border-bottom:1px solid #f1f5f9}.sbd-hotel-content__changes-table tbody tr:last-child{border-bottom:none}.sbd-hotel-content__changes-table tbody tr:hover{background:#f8fafc}.sbd-hotel-content__changes-table tbody td{padding:8px 14px;vertical-align:top;word-break:break-word}.sbd-hotel-content__changes-field{font-size:12px;font-weight:600;color:#475569;width:28%}.sbd-hotel-content__changes-old{color:#dc2626;font-weight:500;text-decoration:line-through;opacity:.8;width:36%}.sbd-hotel-content__changes-new{color:#16a34a;font-weight:700;width:36%}.sbd-hotel-content__data-overview{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px}.sbd-hotel-content__section-title{margin:0 0 16px;font-size:15px;font-weight:700;color:#1e293b;letter-spacing:-.01em}.sbd-hotel-content__data-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}@media (max-width: 768px){.sbd-hotel-content__data-grid{grid-template-columns:1fr}}.sbd-hotel-content__data-card{display:flex;align-items:flex-start;gap:12px;padding:14px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;transition:all .2s ease}.sbd-hotel-content__data-card:hover{background:#fff;border-color:#cbd5e1;box-shadow:0 2px 8px #0000000a;transform:translateY(-1px)}.sbd-hotel-content__data-card--clickable{cursor:pointer}.sbd-hotel-content__data-card--clickable:hover{background:#fff;border-color:#3b82f6;box-shadow:0 4px 12px #3b82f626;transform:translateY(-2px)}.sbd-hotel-content__data-arrow{color:#94a3b8;font-size:14px;margin-left:auto;align-self:center;transition:transform .2s ease}.sbd-hotel-content__data-card--clickable:hover .sbd-hotel-content__data-arrow{transform:translate(3px);color:#3b82f6}.sbd-hotel-content__data-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0}.sbd-hotel-content__data-icon i{font-size:18px;color:#fff}.sbd-hotel-content__data-icon--blue{background:linear-gradient(135deg,#3b82f6,#2563eb)}.sbd-hotel-content__data-icon--purple{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.sbd-hotel-content__data-icon--green{background:linear-gradient(135deg,#10b981,#059669)}.sbd-hotel-content__data-icon--orange{background:linear-gradient(135deg,#f59e0b,#d97706)}.sbd-hotel-content__data-icon--indigo{background:linear-gradient(135deg,#6366f1,#4f46e5)}.sbd-hotel-content__data-icon--pink{background:linear-gradient(135deg,#ec4899,#db2777)}.sbd-hotel-content__data-icon--emerald{background:linear-gradient(135deg,#10b981,#059669)}.sbd-hotel-content__data-icon--teal{background:linear-gradient(135deg,#14b8a6,#0d9488)}.sbd-hotel-content__data-content{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.sbd-hotel-content__data-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#64748b}.sbd-hotel-content__data-value{font-size:14px;font-weight:700;color:#1e293b;word-break:break-word}.sbd-hotel-content__data-subtext{font-size:11px;color:#94a3b8;margin-top:2px}.sbd-hotel-content__packages-detail{display:flex;flex-direction:column;gap:16px}.sbd-hotel-content__package-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:12px}.sbd-hotel-content__package-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid #e2e8f0}.sbd-hotel-content__package-title{font-size:15px;font-weight:700;color:#1e293b}.sbd-hotel-content__badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:6px}.sbd-hotel-content__badge--success{background:#dcfce7;color:#16a34a}.sbd-hotel-content__badge--danger{background:#fee2e2;color:#dc2626}.sbd-hotel-content__badge--cancelled{background:#f3f4f6;color:#6b7280;border:1px solid #d1d5db}.sbd-hotel-content__package-badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.sbd-hotel-content__package-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0}.sbd-hotel-content__package-label{font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sbd-hotel-content__package-value{font-size:13px;font-weight:600;color:#1e293b}.sbd-hotel-content__rooms-section{margin-top:8px}.sbd-hotel-content__subsection-title{font-size:13px;font-weight:700;color:#475569;margin:0 0 12px;text-transform:uppercase;letter-spacing:.05em}.sbd-hotel-content__room-item{display:flex;align-items:flex-start;gap:12px;padding:12px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:10px}.sbd-hotel-content__room-item:last-child{margin-bottom:0}.sbd-hotel-content__room-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ec4899,#db2777);border-radius:8px;flex-shrink:0}.sbd-hotel-content__room-icon i{font-size:16px;color:#fff}.sbd-hotel-content__room-details{flex:1;display:flex;flex-direction:column;gap:6px}.sbd-hotel-content__room-name{font-size:14px;font-weight:700;color:#1e293b}.sbd-hotel-content__room-info{display:flex;flex-wrap:wrap;gap:6px}.sbd-hotel-content__room-tag{font-size:11px;font-weight:600;padding:3px 8px;background:#e0e7ff;color:#4f46e5;border-radius:4px}.sbd-hotel-content__room-occupancy{display:flex;gap:12px;font-size:12px;color:#64748b}.sbd-hotel-content__room-occupancy span{display:flex;align-items:center;gap:4px}.sbd-hotel-content__room-occupancy span i{font-size:11px}.sbd-hotel-content__skeleton-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}.sbd-hotel-content__skeleton-row{height:13px;background:#f1f5f9;border-radius:6px;animation:sbd-shimmer 1.4s ease-in-out infinite}@keyframes sbd-shimmer{0%,to{opacity:1}50%{opacity:.45}}\n"] }]
+                    ], template: "<!-- 2-column layout for hotels -->\n<div class=\"sbd-hotel-content\">\n\n  <!-- Left: booking context -->\n  <aside class=\"sbd-hotel-content__aside\">\n\n    <!-- Data search at the top of the sidebar -->\n    @if (bookingStatus() === 'success') {\n      <app-sbd-data-search [data]=\"bookingData()\" />\n      <app-sbd-hotel-itinerary-card [data]=\"bookingData()\" [verified]=\"dataVerified()\" />\n    }\n\n    <!-- Loading skeleton for aside -->\n    @if (bookingStatus() === 'loading') {\n      <div class=\"sbd-hotel-content__skeleton-card\">\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:60%\"></div>\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:40%\"></div>\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:80%\"></div>\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:50%\"></div>\n      </div>\n    }\n\n  </aside>\n\n  <!-- Right: agent workspace -->\n  <main class=\"sbd-hotel-content__main\">\n\n    <!-- Error state -->\n    @if (bookingStatus() === 'error') {\n      <div class=\"sbd-hotel-content__error\">\n        <i class=\"pi pi-exclamation-circle\"></i>\n        <span>Booking not found. Double-check the ID and product type, then try again.</span>\n      </div>\n    }\n\n    <!-- Content once loaded -->\n    @if (bookingStatus() === 'success') {\n\n      <!-- Quick actions -->\n      <div class=\"sbd-hotel-content__quick-actions\">\n        <span class=\"sbd-hotel-content__quick-label\">Quick actions</span>\n        @if (allPackagesCancelled()) {\n          <div class=\"sbd-hotel-content__cancelled-status\">\n            <i class=\"pi pi-check-circle\"></i>\n            <span>All Packages Cancelled</span>\n          </div>\n        } @else {\n          <button\n            pButton\n            label=\"Cancel Booking\"\n            icon=\"pi pi-times-circle\"\n            class=\"p-button-danger p-button-sm\"\n            (click)=\"onCancelBooking()\">\n          </button>\n        }\n      </div>\n\n      <!-- Modern Data Overview Cards -->\n      <div class=\"sbd-hotel-content__data-overview\">\n        <h3 class=\"sbd-hotel-content__section-title\">Booking Overview</h3>\n\n        <div class=\"sbd-hotel-content__data-grid\">\n          <!-- Booking ID Card -->\n          @if (bookingData()?.bookingId) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--blue\">\n                <i class=\"pi pi-bookmark\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Booking ID</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ bookingData()?.bookingId }}</span>\n              </div>\n            </div>\n          }\n\n          <!-- Hotel Name Card -->\n          @if (bookingData()?.hotelName) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--purple\">\n                <i class=\"pi pi-home\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Hotel</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ bookingData()?.hotelName }}</span>\n              </div>\n            </div>\n          }\n\n          <!-- Check-in Date Card -->\n          @if (bookingData()?.dateFrom) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--green\">\n                <i class=\"pi pi-calendar-plus\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Check-in</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ formatDate(bookingData()?.dateFrom) }}</span>\n                @if (bookingData()?.checkInTime) {\n                  <span class=\"sbd-hotel-content__data-subtext\">{{ bookingData()?.checkInTime }}</span>\n                }\n              </div>\n            </div>\n          }\n\n          <!-- Check-out Date Card -->\n          @if (bookingData()?.dateTo) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--orange\">\n                <i class=\"pi pi-calendar-minus\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Check-out</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ formatDate(bookingData()?.dateTo) }}</span>\n                @if (bookingData()?.checkOutTime) {\n                  <span class=\"sbd-hotel-content__data-subtext\">{{ bookingData()?.checkOutTime }}</span>\n                }\n              </div>\n            </div>\n          }\n\n          <!-- Number of Nights Card -->\n          @if (bookingData()?.numberOfNights) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--indigo\">\n                <i class=\"pi pi-moon\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Duration</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ bookingData()?.numberOfNights }} Nights</span>\n              </div>\n            </div>\n          }\n\n          <!-- Number of Rooms Card -->\n          @if (bookingData()?.rooms) {\n            <div class=\"sbd-hotel-content__data-card sbd-hotel-content__data-card--clickable\" (click)=\"showPackagesDetail()\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--pink\">\n                <i class=\"pi pi-home\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Rooms</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ bookingData()?.rooms }} Room{{ bookingData()?.rooms > 1 ? 's' : '' }}</span>\n                @if (bookingData()?.packages && bookingData()?.packages.length > 0) {\n                  <span class=\"sbd-hotel-content__data-subtext\">Click for details</span>\n                }\n              </div>\n              @if (bookingData()?.packages && bookingData()?.packages.length > 0) {\n                <i class=\"pi pi-chevron-right sbd-hotel-content__data-arrow\"></i>\n              }\n            </div>\n          }\n\n          <!-- Price Card -->\n          @if (bookingData()?.price) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--emerald\">\n                <i class=\"pi pi-wallet\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Total Price</span>\n                <span class=\"sbd-hotel-content__data-value\">{{bookingData()?.price + ' ' +  bookingData()?.priceCurrency}}</span>\n              </div>\n            </div>\n          }\n\n          <!-- Hotel ID Card -->\n          @if (bookingData()?.hotelId) {\n            <div class=\"sbd-hotel-content__data-card\">\n              <div class=\"sbd-hotel-content__data-icon sbd-hotel-content__data-icon--teal\">\n                <i class=\"pi pi-id-card\"></i>\n              </div>\n              <div class=\"sbd-hotel-content__data-content\">\n                <span class=\"sbd-hotel-content__data-label\">Hotel ID</span>\n                <span class=\"sbd-hotel-content__data-value\">{{ bookingData()?.hotelId }}</span>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Context: Notes + Changes tabbed -->\n      <div class=\"sbd-hotel-content__context\">\n\n        <!-- Tab bar -->\n        <div class=\"sbd-hotel-content__context-tabs\">\n          <button class=\"sbd-hotel-content__context-tab\"\n            [class.sbd-hotel-content__context-tab--active]=\"activeContextTab() === 'changes'\"\n            (click)=\"onTabChange('changes')\">\n            <i class=\"pi pi-history\"></i>\n            Changes\n            @if (bookingHistory().length > 0) {\n              <span class=\"sbd-hotel-content__context-pill sbd-hotel-content__context-pill--changes\">{{ bookingHistory().length }}</span>\n            }\n          </button>\n          <button class=\"sbd-hotel-content__context-tab\"\n            [class.sbd-hotel-content__context-tab--active]=\"activeContextTab() === 'notes'\"\n            (click)=\"onTabChange('notes')\">\n            <i class=\"pi pi-comments\"></i>\n            Notes\n            <span class=\"sbd-hotel-content__context-pill sbd-hotel-content__context-pill--notes\">{{ bookingNotes().length }}</span>\n          </button>\n          @if (activeContextTab() === 'notes') {\n            <button pButton label=\"Add Note\" icon=\"pi pi-plus\" class=\"p-button-sm p-button-outlined sbd-hotel-content__context-add\"\n              (click)=\"onAddNote()\">\n            </button>\n          }\n        </div>\n\n        <!-- Notes tab -->\n        @if (activeContextTab() === 'notes') {\n          <div class=\"sbd-hotel-content__notes-list\">\n            @if (bookingNotes().length === 0) {\n              <div class=\"sbd-hotel-content__context-empty\">\n                <i class=\"pi pi-inbox\"></i> No notes yet\n              </div>\n            }\n            @for (note of bookingNotes(); track $index) {\n              <div class=\"sbd-hotel-content__note\">\n                <div class=\"sbd-hotel-content__note-top\">\n                  <span class=\"sbd-hotel-content__note-badge sbd-hotel-content__note-badge--{{ note.action | lowercase }}\">\n                    {{ note.action }}\n                  </span>\n                  <span class=\"sbd-hotel-content__note-author\">\n                    {{ note.writtenBy?.firstName }} {{ note.writtenBy?.lastName }}\n                  </span>\n                  <span class=\"sbd-hotel-content__note-date\">{{ fmtNoteDate(note.date) }}</span>\n                </div>\n                <p class=\"sbd-hotel-content__note-msg\">{{ note.message }}</p>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Changes tab -->\n        @if (activeContextTab() === 'changes') {\n          <div class=\"sbd-hotel-content__changes-groups\">\n            @if (historyGroups().length === 0) {\n              <div class=\"sbd-hotel-content__context-empty\">\n                <i class=\"pi pi-check\"></i> No changes recorded\n              </div>\n            }\n            @for (group of historyGroups(); track group.changedAt) {\n              <div class=\"sbd-hotel-content__changes-group\">\n                <div class=\"sbd-hotel-content__changes-meta\">\n                  <i class=\"pi pi-user\"></i>\n                  <strong>{{ group.changedBy }}</strong>\n                  <span class=\"sbd-hotel-content__changes-sep\">\u00B7</span>\n                  <span>{{ fmtDate(group.changedAt) }}</span>\n                </div>\n                <table class=\"sbd-hotel-content__changes-table\">\n                  <thead>\n                    <tr>\n                      <th>Field</th>\n                      <th><i class=\"pi pi-times-circle\"></i> Before</th>\n                      <th><i class=\"pi pi-check-circle\"></i> After</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (entry of group.entries; track entry.field) {\n                      <tr>\n                        <td class=\"sbd-hotel-content__changes-field\">{{ formatField(entry.field) }}</td>\n                        <td class=\"sbd-hotel-content__changes-old\">{{ entry.from }}</td>\n                        <td class=\"sbd-hotel-content__changes-new\">{{ entry.to }}</td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            }\n          </div>\n        }\n\n      </div>\n\n    }\n\n    <!-- Loading skeleton for main -->\n    @if (bookingStatus() === 'loading') {\n      <div class=\"sbd-hotel-content__skeleton-card\">\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:40%\"></div>\n        <div class=\"sbd-hotel-content__skeleton-row\" style=\"width:25%\"></div>\n      </div>\n    }\n\n  </main>\n\n</div>\n\n<!-- Detail Dialog -->\n<p-dialog\n  [(visible)]=\"detailDialogVisible\"\n  [header]=\"selectedDetail()?.title || 'Details'\"\n  [modal]=\"true\"\n  [style]=\"{ width: '600px', maxWidth: '90vw' }\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  styleClass=\"sbd-hotel-content__detail-dialog\">\n\n  @if (selectedDetail()?.type === 'packages' && selectedDetail()?.data) {\n    <div class=\"sbd-hotel-content__packages-detail\">\n      @for (pkg of selectedDetail()?.data; track $index) {\n        <div class=\"sbd-hotel-content__package-card\">\n          <div class=\"sbd-hotel-content__package-header\">\n            <span class=\"sbd-hotel-content__package-title\">Package {{ $index + 1 }}</span>\n            <div class=\"sbd-hotel-content__package-badges\">\n              @if (pkg.isCancelled) {\n                <span class=\"sbd-hotel-content__badge sbd-hotel-content__badge--cancelled\">Cancelled</span>\n              }\n              @if (pkg.isRefundable) {\n                <span class=\"sbd-hotel-content__badge sbd-hotel-content__badge--success\">Refundable</span>\n              } @else {\n                <span class=\"sbd-hotel-content__badge sbd-hotel-content__badge--danger\">Non-Refundable</span>\n              }\n            </div>\n          </div>\n\n          @if (pkg.supplier) {\n            <div class=\"sbd-hotel-content__package-row\">\n              <span class=\"sbd-hotel-content__package-label\">Supplier</span>\n              <span class=\"sbd-hotel-content__package-value\">{{ pkg.supplier }}</span>\n            </div>\n          }\n\n          @if (pkg.rooms && pkg.rooms.length > 0) {\n            <div class=\"sbd-hotel-content__rooms-section\">\n              <h4 class=\"sbd-hotel-content__subsection-title\">Rooms ({{ pkg.rooms.length }})</h4>\n              @for (room of pkg.rooms; track room.roomId || $index) {\n                <div class=\"sbd-hotel-content__room-item\">\n                  <div class=\"sbd-hotel-content__room-icon\">\n                    <i class=\"pi pi-home\"></i>\n                  </div>\n                  <div class=\"sbd-hotel-content__room-details\">\n                    @if (room.roomName) {\n                      <div class=\"sbd-hotel-content__room-name\">{{ room.roomName }}</div>\n                    }\n                    <div class=\"sbd-hotel-content__room-info\">\n                      @if (room.roomType) {\n                        <span class=\"sbd-hotel-content__room-tag\">{{ room.roomType }}</span>\n                      }\n                      @if (room.roomBasis) {\n                        <span class=\"sbd-hotel-content__room-tag\">{{ room.roomBasis }}</span>\n                      }\n                      @if (room.bedType) {\n                        <span class=\"sbd-hotel-content__room-tag\">{{ room.bedType }}</span>\n                      }\n                    </div>\n                    @if (room.adultsNum || room.childrenNum) {\n                      <div class=\"sbd-hotel-content__room-occupancy\">\n                        @if (room.adultsNum) {\n                          <span><i class=\"pi pi-user\"></i> {{ room.adultsNum }} Adult{{ room.adultsNum > 1 ? 's' : '' }}</span>\n                        }\n                        @if (room.childrenNum) {\n                          <span><i class=\"pi pi-users\"></i> {{ room.childrenNum }} Child{{ room.childrenNum > 1 ? 'ren' : '' }}</span>\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n          }\n\n          @if (pkg.refundableUntil) {\n            <div class=\"sbd-hotel-content__package-row\">\n              <span class=\"sbd-hotel-content__package-label\">Refundable Until</span>\n              <span class=\"sbd-hotel-content__package-value\">{{ pkg.refundableUntil }}</span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</p-dialog>\n", styles: [".sbd-hotel-content{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}@media (max-width: 960px){.sbd-hotel-content{grid-template-columns:1fr}}.sbd-hotel-content__error{display:flex;align-items:center;gap:10px;padding:16px 20px;background:#fef2f2;border:1px solid rgba(239,68,68,.2);border-radius:10px;color:#ef4444;font-size:13.5px;font-weight:500}.sbd-hotel-content__error i{font-size:18px}.sbd-hotel-content__aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:20px}.sbd-hotel-content__main{display:flex;flex-direction:column;gap:16px}.sbd-hotel-content__quick-actions{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;flex-wrap:wrap}.sbd-hotel-content__quick-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;flex-shrink:0}.sbd-hotel-content__cancelled-status{display:flex;align-items:center;gap:8px;padding:8px 14px;background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:1px solid rgba(21,128,60,.2);border-radius:8px;color:#15803c;font-size:13px;font-weight:600}.sbd-hotel-content__cancelled-status i{font-size:16px;color:#15803c}.sbd-hotel-content__context{background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.sbd-hotel-content__context-tabs{display:flex;align-items:center;border-bottom:1px solid #e2e8f0;background:#f8fafc}.sbd-hotel-content__context-add{margin-left:auto;margin-right:10px}.sbd-hotel-content__context-tab{display:flex;align-items:center;gap:7px;padding:11px 20px;font-size:13px;font-weight:600;color:#64748b;background:transparent;border:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}.sbd-hotel-content__context-tab .pi{font-size:13px}.sbd-hotel-content__context-tab:hover{color:#334155}.sbd-hotel-content__context-tab--active{color:#1e2e4a;border-bottom-color:var(--sbd-primary, #3b82f6);background:#fff}.sbd-hotel-content__context-pill{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:10px}.sbd-hotel-content__context-pill--notes{background:#e0e7ff;color:#4338ca}.sbd-hotel-content__context-pill--changes{background:#fef3c7;color:#b45309}.sbd-hotel-content__context-empty{display:flex;align-items:center;gap:8px;padding:24px 20px;font-size:13px;color:#94a3b8}.sbd-hotel-content__context-empty .pi{font-size:16px}.sbd-hotel-content__notes-list{display:flex;flex-direction:column}.sbd-hotel-content__note{padding:12px 16px;border-bottom:1px solid #f1f5f9;display:flex;flex-direction:column;gap:6px}.sbd-hotel-content__note:last-child{border-bottom:none}.sbd-hotel-content__note-top{display:flex;align-items:center;gap:8px}.sbd-hotel-content__note-badge{font-size:10px;font-weight:800;letter-spacing:.05em;padding:2px 8px;border-radius:10px;text-transform:uppercase;flex-shrink:0}.sbd-hotel-content__note-badge--general{background:#dbeafe;color:#1d4ed8}.sbd-hotel-content__note-badge--remark{background:#fef3c7;color:#b45309}.sbd-hotel-content__note-badge--feedback{background:#f3e8ff;color:#7e22ce}.sbd-hotel-content__note-author{font-size:12px;font-weight:700;color:#1e2e4a}.sbd-hotel-content__note-date{margin-left:auto;font-size:11px;color:#94a3b8;white-space:nowrap}.sbd-hotel-content__note-msg{margin:0;font-size:13px;color:#334155;line-height:1.55}.sbd-hotel-content__changes-groups{display:flex;flex-direction:column}.sbd-hotel-content__changes-group{border-bottom:1px solid #f1f5f9}.sbd-hotel-content__changes-group:last-child{border-bottom:none}.sbd-hotel-content__changes-meta{display:flex;align-items:center;gap:6px;padding:8px 16px;background:#fafafa;border-bottom:1px solid #f1f5f9;font-size:11.5px;color:#64748b}.sbd-hotel-content__changes-meta strong{font-weight:700;color:#334155}.sbd-hotel-content__changes-meta .pi{font-size:11px;color:#94a3b8}.sbd-hotel-content__changes-sep{color:#cbd5e1}.sbd-hotel-content__changes-table{width:100%;border-collapse:collapse;font-size:12.5px}.sbd-hotel-content__changes-table thead tr{background:#f8fafc;border-bottom:1px solid #e2e8f0}.sbd-hotel-content__changes-table thead th{padding:7px 14px;text-align:left;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#64748b;white-space:nowrap}.sbd-hotel-content__changes-table thead th .pi{margin-right:4px;font-size:10px}.sbd-hotel-content__changes-table thead th:nth-child(2){color:#dc2626}.sbd-hotel-content__changes-table thead th:nth-child(3){color:#16a34a}.sbd-hotel-content__changes-table tbody tr{border-bottom:1px solid #f1f5f9}.sbd-hotel-content__changes-table tbody tr:last-child{border-bottom:none}.sbd-hotel-content__changes-table tbody tr:hover{background:#f8fafc}.sbd-hotel-content__changes-table tbody td{padding:8px 14px;vertical-align:top;word-break:break-word}.sbd-hotel-content__changes-field{font-size:12px;font-weight:600;color:#475569;width:28%}.sbd-hotel-content__changes-old{color:#dc2626;font-weight:500;text-decoration:line-through;opacity:.8;width:36%}.sbd-hotel-content__changes-new{color:#16a34a;font-weight:700;width:36%}.sbd-hotel-content__data-overview{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px}.sbd-hotel-content__section-title{margin:0 0 16px;font-size:15px;font-weight:700;color:#1e293b;letter-spacing:-.01em}.sbd-hotel-content__data-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}@media (max-width: 768px){.sbd-hotel-content__data-grid{grid-template-columns:1fr}}.sbd-hotel-content__data-card{display:flex;align-items:flex-start;gap:12px;padding:14px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;transition:all .2s ease}.sbd-hotel-content__data-card:hover{background:#fff;border-color:#cbd5e1;box-shadow:0 2px 8px #0000000a;transform:translateY(-1px)}.sbd-hotel-content__data-card--clickable{cursor:pointer}.sbd-hotel-content__data-card--clickable:hover{background:#fff;border-color:#3b82f6;box-shadow:0 4px 12px #3b82f626;transform:translateY(-2px)}.sbd-hotel-content__data-arrow{color:#94a3b8;font-size:14px;margin-left:auto;align-self:center;transition:transform .2s ease}.sbd-hotel-content__data-card--clickable:hover .sbd-hotel-content__data-arrow{transform:translate(3px);color:#3b82f6}.sbd-hotel-content__data-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0}.sbd-hotel-content__data-icon i{font-size:18px;color:#fff}.sbd-hotel-content__data-icon--blue{background:linear-gradient(135deg,#3b82f6,#2563eb)}.sbd-hotel-content__data-icon--purple{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.sbd-hotel-content__data-icon--green{background:linear-gradient(135deg,#10b981,#059669)}.sbd-hotel-content__data-icon--orange{background:linear-gradient(135deg,#f59e0b,#d97706)}.sbd-hotel-content__data-icon--indigo{background:linear-gradient(135deg,#6366f1,#4f46e5)}.sbd-hotel-content__data-icon--pink{background:linear-gradient(135deg,#ec4899,#db2777)}.sbd-hotel-content__data-icon--emerald{background:linear-gradient(135deg,#10b981,#059669)}.sbd-hotel-content__data-icon--teal{background:linear-gradient(135deg,#14b8a6,#0d9488)}.sbd-hotel-content__data-content{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.sbd-hotel-content__data-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#64748b}.sbd-hotel-content__data-value{font-size:14px;font-weight:700;color:#1e293b;word-break:break-word}.sbd-hotel-content__data-subtext{font-size:11px;color:#94a3b8;margin-top:2px}.sbd-hotel-content__packages-detail{display:flex;flex-direction:column;gap:16px}.sbd-hotel-content__package-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:12px}.sbd-hotel-content__package-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid #e2e8f0}.sbd-hotel-content__package-title{font-size:15px;font-weight:700;color:#1e293b}.sbd-hotel-content__badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:6px}.sbd-hotel-content__badge--success{background:#dcfce7;color:#16a34a}.sbd-hotel-content__badge--danger{background:#fee2e2;color:#dc2626}.sbd-hotel-content__badge--cancelled{background:#f3f4f6;color:#6b7280;border:1px solid #d1d5db}.sbd-hotel-content__package-badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.sbd-hotel-content__package-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0}.sbd-hotel-content__package-label{font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sbd-hotel-content__package-value{font-size:13px;font-weight:600;color:#1e293b}.sbd-hotel-content__rooms-section{margin-top:8px}.sbd-hotel-content__subsection-title{font-size:13px;font-weight:700;color:#475569;margin:0 0 12px;text-transform:uppercase;letter-spacing:.05em}.sbd-hotel-content__room-item{display:flex;align-items:flex-start;gap:12px;padding:12px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:10px}.sbd-hotel-content__room-item:last-child{margin-bottom:0}.sbd-hotel-content__room-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ec4899,#db2777);border-radius:8px;flex-shrink:0}.sbd-hotel-content__room-icon i{font-size:16px;color:#fff}.sbd-hotel-content__room-details{flex:1;display:flex;flex-direction:column;gap:6px}.sbd-hotel-content__room-name{font-size:14px;font-weight:700;color:#1e293b}.sbd-hotel-content__room-info{display:flex;flex-wrap:wrap;gap:6px}.sbd-hotel-content__room-tag{font-size:11px;font-weight:600;padding:3px 8px;background:#e0e7ff;color:#4f46e5;border-radius:4px}.sbd-hotel-content__room-occupancy{display:flex;gap:12px;font-size:12px;color:#64748b}.sbd-hotel-content__room-occupancy span{display:flex;align-items:center;gap:4px}.sbd-hotel-content__room-occupancy span i{font-size:11px}.sbd-hotel-content__skeleton-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}.sbd-hotel-content__skeleton-row{height:13px;background:#f1f5f9;border-radius:6px;animation:sbd-shimmer 1.4s ease-in-out infinite}@keyframes sbd-shimmer{0%,to{opacity:1}50%{opacity:.45}}\n"] }]
         }] });
 
 class SmartBookingDashboardComponent {