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

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

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, Injectable, input, model, output, Component, computed, signal, effect, EventEmitter, Inject, Optional, Input, Output, NgModule, ChangeDetectionStrategy, DestroyRef, Pipe, HostListener } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, Injectable, input, model, output, Component, computed, signal, effect, EventEmitter, Inject, Optional, Input, Output, NgModule, ChangeDetectionStrategy, DestroyRef, Pipe, untracked, Injector, runInInjectionContext, HostListener } from '@angular/core';
 import * as i1$2 from '@angular/common';
 import { NgTemplateOutlet, NgClass, DOCUMENT, CommonModule, LowerCasePipe, UpperCasePipe, NgIf } from '@angular/common';
 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 } from 'rxjs/operators';
+import { map, filter, 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';
@@ -19,9 +19,8 @@ import * as i1$1 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i1$3 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
-import * as i4 from 'primeng/sidebar';
-import { SidebarModule } from 'primeng/sidebar';
-import { of, BehaviorSubject, Subject, catchError, map as map$1, throwError } from 'rxjs';
+import { of, BehaviorSubject, Subject, catchError, map as map$1, throwError, EMPTY, isObservable, firstValueFrom } from 'rxjs';
+import * as i2$2 from 'primeng/api';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$4 from '@angular/router';
 import { ActivatedRoute, RouterModule } from '@angular/router';
@@ -32,11 +31,12 @@ import { TagModule } from 'primeng/tag';
 import * as i5$1 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { trigger, transition, style, animate } from '@angular/animations';
-import * as i2$2 from 'primeng/api';
 
 const SBD_DEFAULT_CONFIG = {
     apiBase: '/api',
     platform: 'BO',
+    webBaseUrl: '',
+    reissueEnabled: false,
 };
 const SBD_CONFIG = new InjectionToken('SBD_CONFIG', {
     providedIn: 'root',
@@ -113,14 +113,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+const SBD_TOAST_HANDLER = new InjectionToken('SBD_TOAST_HANDLER');
 class SbdToastService {
     constructor() {
-        this.toastr = inject(ToastrService);
+        // The host's handler wins; ngx-toastr is the fallback and is optional, so a host that never configured it still works.
+        this.handler = inject(SBD_TOAST_HANDLER, { optional: true }) ?? inject(ToastrService, { optional: true });
+    }
+    success(msg) { this.show('success', msg); }
+    error(msg) { this.show('error', msg); }
+    info(msg) { this.show('info', msg); }
+    warning(msg) { this.show('warning', msg); }
+    show(kind, msg) {
+        if (this.handler)
+            this.handler[kind](msg);
+        else
+            console.warn(`[smart-booking-dashboard] ${kind}: ${msg}`);
     }
-    success(msg) { this.toastr.success(msg); }
-    error(msg) { this.toastr.error(msg); }
-    info(msg) { this.toastr.info(msg); }
-    warning(msg) { this.toastr.warning(msg); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdToastService, providedIn: 'root' }); }
 }
@@ -1216,14 +1224,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class SbdWorkflowActionsComponent {
     constructor() {
         this.bookingId = input.required();
+        this.showReissue = input(false);
         this.cancelBooking = output();
+        this.reissue = output();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdWorkflowActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: SbdWorkflowActionsComponent, isStandalone: true, selector: "app-sbd-workflow-actions", inputs: { bookingId: { classPropertyName: "bookingId", publicName: "bookingId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { cancelBooking: "cancelBooking" }, ngImport: i0, template: "<div class=\"sbd-workflow-actions\">\n  <button pButton label=\"Cancel Booking\" icon=\"pi pi-times-circle\"\n    class=\"p-button-danger p-button-outlined p-button-sm\"\n    (click)=\"cancelBooking.emit()\">\n  </button>\n\n  <button pButton label=\"Send Ticket\" icon=\"pi pi-send\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Flight Status\" icon=\"pi pi-chart-bar\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Select Seat\" icon=\"pi pi-th-large\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Add Baggage\" icon=\"pi pi-briefcase\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Add Service\" icon=\"pi pi-plus-circle\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n</div>\n", styles: [".sbd-workflow-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdWorkflowActionsComponent, isStandalone: true, selector: "app-sbd-workflow-actions", inputs: { bookingId: { classPropertyName: "bookingId", publicName: "bookingId", isSignal: true, isRequired: true, transformFunction: null }, showReissue: { classPropertyName: "showReissue", publicName: "showReissue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancelBooking: "cancelBooking", reissue: "reissue" }, ngImport: i0, template: "<div class=\"sbd-workflow-actions\">\n  <button pButton label=\"Cancel Booking\" icon=\"pi pi-times-circle\"\n    class=\"p-button-danger p-button-outlined p-button-sm\"\n    (click)=\"cancelBooking.emit()\">\n  </button>\n\n  @if (showReissue()) {\n    <button pButton label=\"Reissue Booking\" icon=\"pi pi-refresh\"\n      class=\"p-button-outlined p-button-sm\"\n      (click)=\"reissue.emit()\">\n    </button>\n  }\n\n  <button pButton label=\"Send Ticket\" icon=\"pi pi-send\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Flight Status\" icon=\"pi pi-chart-bar\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Select Seat\" icon=\"pi pi-th-large\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Add Baggage\" icon=\"pi pi-briefcase\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Add Service\" icon=\"pi pi-plus-circle\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n</div>\n", styles: [".sbd-workflow-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdWorkflowActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-sbd-workflow-actions', standalone: true, imports: [ButtonModule, TooltipModule], template: "<div class=\"sbd-workflow-actions\">\n  <button pButton label=\"Cancel Booking\" icon=\"pi pi-times-circle\"\n    class=\"p-button-danger p-button-outlined p-button-sm\"\n    (click)=\"cancelBooking.emit()\">\n  </button>\n\n  <button pButton label=\"Send Ticket\" icon=\"pi pi-send\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Flight Status\" icon=\"pi pi-chart-bar\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Select Seat\" icon=\"pi pi-th-large\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Add Baggage\" icon=\"pi pi-briefcase\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Add Service\" icon=\"pi pi-plus-circle\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n</div>\n", styles: [".sbd-workflow-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}\n"] }]
+            args: [{ selector: 'app-sbd-workflow-actions', standalone: true, imports: [ButtonModule, TooltipModule], template: "<div class=\"sbd-workflow-actions\">\n  <button pButton label=\"Cancel Booking\" icon=\"pi pi-times-circle\"\n    class=\"p-button-danger p-button-outlined p-button-sm\"\n    (click)=\"cancelBooking.emit()\">\n  </button>\n\n  @if (showReissue()) {\n    <button pButton label=\"Reissue Booking\" icon=\"pi pi-refresh\"\n      class=\"p-button-outlined p-button-sm\"\n      (click)=\"reissue.emit()\">\n    </button>\n  }\n\n  <button pButton label=\"Send Ticket\" icon=\"pi pi-send\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Flight Status\" icon=\"pi pi-chart-bar\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Select Seat\" icon=\"pi pi-th-large\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Add Baggage\" icon=\"pi pi-briefcase\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Add Service\" icon=\"pi pi-plus-circle\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n</div>\n", styles: [".sbd-workflow-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}\n"] }]
         }] });
 
 class SbdActionCardComponent {
@@ -2880,11 +2890,11 @@ class AsideComponent {
         this.document.body.style.overflow = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AsideComponent, deps: [{ token: SharedService }, { token: DOCUMENT }, { token: AsideBackButtonService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AsideComponent, isStandalone: true, selector: "almatar-aside", inputs: { asideTitle: "asideTitle", showHeader: "showHeader", headerTemplate: "headerTemplate", whiteHeader: "whiteHeader", showAside: "showAside", width: "width", modal: "modal", closable: "closable", transitionOptions: "transitionOptions", closeIconTemplate: "closeIconTemplate", interceptClose: "interceptClose" }, outputs: { onClose: "onClose", closeRequested: "closeRequested" }, ngImport: i0, template: "<!-- `position=\"right\"` is intentional for both directions: PrimeNG's flex\n     positioning is writing-direction aware, so under dir=\"rtl\" (Arabic) it\n     mirrors to the visual left on its own. Passing \"left\" for Arabic\n     double-flips it back to the right. -->\n<p-sidebar\n  class=\"almatar_aside\"\n  [ngClass]=\"{ 'almatar_aside--white-header': isWhiteHeader }\"\n  (onShow)=\"onDialogShow()\"\n  [showCloseIcon]=\"closable && !isInAppView\"\n  (onHide)=\"onCloseModal()\"\n  [visible]=\"showAside\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  position=\"right\"\n  [style]=\"{ width: width || (isWhiteHeader ? '580px' : '490px') }\"\n  [transitionOptions]=\"transitionOptions\"\n  [modal]=\"modal\"\n>\n  @if (showHeader) {\n    @if (showBackButton) {\n      <!-- Rendered into the header's leading content, alongside (not instead\n           of) PrimeNG's own close (X) button \u2014 so both are visible together,\n           and the X keeps its normal close behavior untouched. -->\n      <ng-template pTemplate=\"header\">\n        <!-- One flex group, not two separate header children \u2014 otherwise\n             `.p-sidebar-header`'s `justify-content: space-between` spreads the\n             arrow and title apart instead of keeping them side by side. -->\n        <div class=\"almatar-aside__back-header\">\n          <i\n            class=\"almatar-aside__back-icon\"\n            [class]=\"backIconClass\"\n            (click)=\"onBackIconClick($event)\"\n          ></i>\n          <span class=\"p-sidebar-header-content\">{{ asideTitle }}</span>\n        </div>\n      </ng-template>\n    } @else if (headerTemplate) {\n      <ng-template pTemplate=\"header\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-template pTemplate=\"header\">\n        <span class=\"p-sidebar-header-content\">{{ asideTitle }}</span>\n      </ng-template>\n    }\n  }\n\n  @if (closeIconTemplate) {\n    <!-- Custom close icon template -->\n    <ng-template pTemplate=\"closeicon\">\n      <ng-container *ngTemplateOutlet=\"closeIconTemplate\"></ng-container>\n    </ng-template>\n  } @else if (isWhiteHeader) {\n    <ng-template pTemplate=\"closeicon\">\n      <img src=\"/assets/icons/close-dark.svg\" alt=\"\" width=\"24\" height=\"24\" />\n    </ng-template>\n  }\n\n  <ng-content></ng-content>\n</p-sidebar>\n", styles: [".almatar_aside ::ng-deep .p-sidebar{margin:0!important;height:100svh;max-height:100svh!important;border-radius:0;border:none;transform:unset}@media (max-width: 768px){.almatar_aside ::ng-deep .p-sidebar{width:100vw!important;margin:auto!important}}.almatar_aside ::ng-deep .p-sidebar-content{height:100vh}.almatar_aside ::ng-deep .p-sidebar-mask{background-color:#0000008a}.almatar_aside ::ng-deep .p-sidebar-header{background:var(--almatar-secondary-surface);border:none}.almatar_aside ::ng-deep .p-sidebar-header .p-sidebar-header-content,.almatar_aside ::ng-deep .p-sidebar-header .p-sidebar-close-icon{color:var(--almatar-neutral-icon-secondary-static)}.almatar_aside ::ng-deep .p-sidebar-header .p-sidebar-header-content{color:var(--almatar-secondary-text-on-surface);font-size:calc(21 * var(--almatar-font-size-ratio, 1) * 1px);margin:0;font-weight:var(--almatar-font-weight-regular)}.almatar_aside ::ng-deep .p-sidebar-header .almatar-aside__back-header{display:flex;align-items:center;gap:12px}.almatar_aside ::ng-deep .p-sidebar-header .almatar-aside__back-icon{cursor:pointer;font-size:1.25rem;color:var(--almatar-neutral-icon-secondary-static)}.almatar_aside ::ng-deep .p-sidebar-close-icon{font-size:1.5rem!important}.almatar_aside ::ng-deep .p-sidebar-content{background-color:var(--almatar-neutral-surface-card);padding:0}.almatar_aside--white-header ::ng-deep .p-sidebar-header{background:var(--almatar-neutral-surface-card);border-bottom:1px solid var(--almatar-primary-border-disabled)}.almatar_aside--white-header ::ng-deep .p-sidebar-header .p-sidebar-close-icon{color:var(--almatar-neutral-icon-primary-static)}.almatar_aside--white-header ::ng-deep .p-sidebar-header .p-sidebar-header-content{color:var(--almatar-neutral-text-primary-static);font-weight:var(--almatar-font-weight-regular)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SidebarModule }, { kind: "component", type: i4.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AsideComponent, isStandalone: true, selector: "almatar-aside", inputs: { asideTitle: "asideTitle", showHeader: "showHeader", headerTemplate: "headerTemplate", whiteHeader: "whiteHeader", showAside: "showAside", width: "width", modal: "modal", closable: "closable", transitionOptions: "transitionOptions", interceptClose: "interceptClose" }, outputs: { onClose: "onClose", closeRequested: "closeRequested" }, ngImport: i0, template: "<!-- A side panel built on `p-dialog` with `position=\"right\"`, not on PrimeNG's sidebar/drawer: `p-dialog` exists with\n     the same name in PrimeNG 14 (the backoffice) and 20 (Helix), while `primeng/sidebar` was removed in 20 and\n     `primeng/drawer` does not exist in 14.\n     `position=\"right\"` is intentional for both directions: the flex positioning is writing-direction aware, so\n     under dir=\"rtl\" (Arabic) it mirrors to the visual left on its own. Passing \"left\" for Arabic double-flips it\n     back to the right. -->\n<p-dialog\n  class=\"almatar_aside\"\n  [ngClass]=\"{ 'almatar_aside--white-header': isWhiteHeader }\"\n  position=\"right\"\n  [visible]=\"showAside\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  (onShow)=\"onDialogShow()\"\n  (onHide)=\"onCloseModal()\"\n  [modal]=\"modal\"\n  [closable]=\"closable && !isInAppView\"\n  [showHeader]=\"showHeader\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  [style]=\"{ width: width || (isWhiteHeader ? '580px' : '490px') }\"\n  [transitionOptions]=\"transitionOptions\"\n>\n  @if (showHeader) {\n    @if (showBackButton) {\n      <!-- Rendered into the header's leading content, alongside (not instead of) the dialog's own close (X)\n           button, so both are visible together and the X keeps its normal close behavior untouched. -->\n      <ng-template pTemplate=\"header\">\n        <!-- One flex group, not two separate header children: the header's `justify-content: space-between`\n             would otherwise spread the arrow and the title apart. -->\n        <div class=\"almatar-aside__back-header\">\n          <i\n            class=\"almatar-aside__back-icon\"\n            [class]=\"backIconClass\"\n            (click)=\"onBackIconClick($event)\"\n          ></i>\n          <span class=\"almatar-aside__title\">{{ asideTitle }}</span>\n        </div>\n      </ng-template>\n    } @else if (headerTemplate) {\n      <ng-template pTemplate=\"header\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-template pTemplate=\"header\">\n        <span class=\"almatar-aside__title\">{{ asideTitle }}</span>\n      </ng-template>\n    }\n  }\n\n  <ng-content></ng-content>\n</p-dialog>\n", styles: [".almatar_aside ::ng-deep .p-dialog{margin:0!important;height:100svh;max-height:100svh!important;border-radius:0;border:none;transform:unset}@media (max-width: 768px){.almatar_aside ::ng-deep .p-dialog{width:100vw!important}}.almatar_aside ::ng-deep .p-dialog-mask.p-component-overlay,.almatar_aside ::ng-deep .p-dialog-mask.p-overlay-mask{background-color:#0000008a}.almatar_aside ::ng-deep .p-dialog-header{background:var(--almatar-secondary-surface);border:none;border-radius:0;padding:1rem 1.25rem}.almatar_aside ::ng-deep .p-dialog-header .almatar-aside__title,.almatar_aside ::ng-deep .p-dialog-header .p-dialog-header-close-icon,.almatar_aside ::ng-deep .p-dialog-header .p-dialog-close-icon{color:var(--almatar-neutral-icon-secondary-static)}.almatar_aside ::ng-deep .p-dialog-header .almatar-aside__title{color:var(--almatar-secondary-text-on-surface);font-size:calc(21 * var(--almatar-font-size-ratio, 1) * 1px);margin:0;font-weight:var(--almatar-font-weight-regular)}.almatar_aside ::ng-deep .p-dialog-header .almatar-aside__back-header{display:flex;align-items:center;gap:12px}.almatar_aside ::ng-deep .p-dialog-header .almatar-aside__back-icon{cursor:pointer;font-size:1.25rem;color:var(--almatar-neutral-icon-secondary-static)}.almatar_aside ::ng-deep .p-dialog-header-close-icon,.almatar_aside ::ng-deep .p-dialog-close-icon{font-size:1.5rem!important}.almatar_aside ::ng-deep .p-dialog-content{height:100%;flex-grow:1;background-color:var(--almatar-neutral-surface-card);padding:0}.almatar_aside--white-header ::ng-deep .p-dialog-header{background:var(--almatar-neutral-surface-card);border-bottom:1px solid var(--almatar-primary-border-disabled)}.almatar_aside--white-header ::ng-deep .p-dialog-header .p-dialog-header-close-icon,.almatar_aside--white-header ::ng-deep .p-dialog-header .p-dialog-close-icon{color:var(--almatar-neutral-icon-primary-static)}.almatar_aside--white-header ::ng-deep .p-dialog-header .almatar-aside__title{color:var(--almatar-neutral-text-primary-static);font-weight:var(--almatar-font-weight-regular)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AsideComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'almatar-aside', standalone: true, imports: [CommonModule, SidebarModule], template: "<!-- `position=\"right\"` is intentional for both directions: PrimeNG's flex\n     positioning is writing-direction aware, so under dir=\"rtl\" (Arabic) it\n     mirrors to the visual left on its own. Passing \"left\" for Arabic\n     double-flips it back to the right. -->\n<p-sidebar\n  class=\"almatar_aside\"\n  [ngClass]=\"{ 'almatar_aside--white-header': isWhiteHeader }\"\n  (onShow)=\"onDialogShow()\"\n  [showCloseIcon]=\"closable && !isInAppView\"\n  (onHide)=\"onCloseModal()\"\n  [visible]=\"showAside\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  position=\"right\"\n  [style]=\"{ width: width || (isWhiteHeader ? '580px' : '490px') }\"\n  [transitionOptions]=\"transitionOptions\"\n  [modal]=\"modal\"\n>\n  @if (showHeader) {\n    @if (showBackButton) {\n      <!-- Rendered into the header's leading content, alongside (not instead\n           of) PrimeNG's own close (X) button \u2014 so both are visible together,\n           and the X keeps its normal close behavior untouched. -->\n      <ng-template pTemplate=\"header\">\n        <!-- One flex group, not two separate header children \u2014 otherwise\n             `.p-sidebar-header`'s `justify-content: space-between` spreads the\n             arrow and title apart instead of keeping them side by side. -->\n        <div class=\"almatar-aside__back-header\">\n          <i\n            class=\"almatar-aside__back-icon\"\n            [class]=\"backIconClass\"\n            (click)=\"onBackIconClick($event)\"\n          ></i>\n          <span class=\"p-sidebar-header-content\">{{ asideTitle }}</span>\n        </div>\n      </ng-template>\n    } @else if (headerTemplate) {\n      <ng-template pTemplate=\"header\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-template pTemplate=\"header\">\n        <span class=\"p-sidebar-header-content\">{{ asideTitle }}</span>\n      </ng-template>\n    }\n  }\n\n  @if (closeIconTemplate) {\n    <!-- Custom close icon template -->\n    <ng-template pTemplate=\"closeicon\">\n      <ng-container *ngTemplateOutlet=\"closeIconTemplate\"></ng-container>\n    </ng-template>\n  } @else if (isWhiteHeader) {\n    <ng-template pTemplate=\"closeicon\">\n      <img src=\"/assets/icons/close-dark.svg\" alt=\"\" width=\"24\" height=\"24\" />\n    </ng-template>\n  }\n\n  <ng-content></ng-content>\n</p-sidebar>\n", styles: [".almatar_aside ::ng-deep .p-sidebar{margin:0!important;height:100svh;max-height:100svh!important;border-radius:0;border:none;transform:unset}@media (max-width: 768px){.almatar_aside ::ng-deep .p-sidebar{width:100vw!important;margin:auto!important}}.almatar_aside ::ng-deep .p-sidebar-content{height:100vh}.almatar_aside ::ng-deep .p-sidebar-mask{background-color:#0000008a}.almatar_aside ::ng-deep .p-sidebar-header{background:var(--almatar-secondary-surface);border:none}.almatar_aside ::ng-deep .p-sidebar-header .p-sidebar-header-content,.almatar_aside ::ng-deep .p-sidebar-header .p-sidebar-close-icon{color:var(--almatar-neutral-icon-secondary-static)}.almatar_aside ::ng-deep .p-sidebar-header .p-sidebar-header-content{color:var(--almatar-secondary-text-on-surface);font-size:calc(21 * var(--almatar-font-size-ratio, 1) * 1px);margin:0;font-weight:var(--almatar-font-weight-regular)}.almatar_aside ::ng-deep .p-sidebar-header .almatar-aside__back-header{display:flex;align-items:center;gap:12px}.almatar_aside ::ng-deep .p-sidebar-header .almatar-aside__back-icon{cursor:pointer;font-size:1.25rem;color:var(--almatar-neutral-icon-secondary-static)}.almatar_aside ::ng-deep .p-sidebar-close-icon{font-size:1.5rem!important}.almatar_aside ::ng-deep .p-sidebar-content{background-color:var(--almatar-neutral-surface-card);padding:0}.almatar_aside--white-header ::ng-deep .p-sidebar-header{background:var(--almatar-neutral-surface-card);border-bottom:1px solid var(--almatar-primary-border-disabled)}.almatar_aside--white-header ::ng-deep .p-sidebar-header .p-sidebar-close-icon{color:var(--almatar-neutral-icon-primary-static)}.almatar_aside--white-header ::ng-deep .p-sidebar-header .p-sidebar-header-content{color:var(--almatar-neutral-text-primary-static);font-weight:var(--almatar-font-weight-regular)}\n"] }]
+            args: [{ selector: 'almatar-aside', standalone: true, imports: [CommonModule, DialogModule], template: "<!-- A side panel built on `p-dialog` with `position=\"right\"`, not on PrimeNG's sidebar/drawer: `p-dialog` exists with\n     the same name in PrimeNG 14 (the backoffice) and 20 (Helix), while `primeng/sidebar` was removed in 20 and\n     `primeng/drawer` does not exist in 14.\n     `position=\"right\"` is intentional for both directions: the flex positioning is writing-direction aware, so\n     under dir=\"rtl\" (Arabic) it mirrors to the visual left on its own. Passing \"left\" for Arabic double-flips it\n     back to the right. -->\n<p-dialog\n  class=\"almatar_aside\"\n  [ngClass]=\"{ 'almatar_aside--white-header': isWhiteHeader }\"\n  position=\"right\"\n  [visible]=\"showAside\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  (onShow)=\"onDialogShow()\"\n  (onHide)=\"onCloseModal()\"\n  [modal]=\"modal\"\n  [closable]=\"closable && !isInAppView\"\n  [showHeader]=\"showHeader\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  [style]=\"{ width: width || (isWhiteHeader ? '580px' : '490px') }\"\n  [transitionOptions]=\"transitionOptions\"\n>\n  @if (showHeader) {\n    @if (showBackButton) {\n      <!-- Rendered into the header's leading content, alongside (not instead of) the dialog's own close (X)\n           button, so both are visible together and the X keeps its normal close behavior untouched. -->\n      <ng-template pTemplate=\"header\">\n        <!-- One flex group, not two separate header children: the header's `justify-content: space-between`\n             would otherwise spread the arrow and the title apart. -->\n        <div class=\"almatar-aside__back-header\">\n          <i\n            class=\"almatar-aside__back-icon\"\n            [class]=\"backIconClass\"\n            (click)=\"onBackIconClick($event)\"\n          ></i>\n          <span class=\"almatar-aside__title\">{{ asideTitle }}</span>\n        </div>\n      </ng-template>\n    } @else if (headerTemplate) {\n      <ng-template pTemplate=\"header\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-template pTemplate=\"header\">\n        <span class=\"almatar-aside__title\">{{ asideTitle }}</span>\n      </ng-template>\n    }\n  }\n\n  <ng-content></ng-content>\n</p-dialog>\n", styles: [".almatar_aside ::ng-deep .p-dialog{margin:0!important;height:100svh;max-height:100svh!important;border-radius:0;border:none;transform:unset}@media (max-width: 768px){.almatar_aside ::ng-deep .p-dialog{width:100vw!important}}.almatar_aside ::ng-deep .p-dialog-mask.p-component-overlay,.almatar_aside ::ng-deep .p-dialog-mask.p-overlay-mask{background-color:#0000008a}.almatar_aside ::ng-deep .p-dialog-header{background:var(--almatar-secondary-surface);border:none;border-radius:0;padding:1rem 1.25rem}.almatar_aside ::ng-deep .p-dialog-header .almatar-aside__title,.almatar_aside ::ng-deep .p-dialog-header .p-dialog-header-close-icon,.almatar_aside ::ng-deep .p-dialog-header .p-dialog-close-icon{color:var(--almatar-neutral-icon-secondary-static)}.almatar_aside ::ng-deep .p-dialog-header .almatar-aside__title{color:var(--almatar-secondary-text-on-surface);font-size:calc(21 * var(--almatar-font-size-ratio, 1) * 1px);margin:0;font-weight:var(--almatar-font-weight-regular)}.almatar_aside ::ng-deep .p-dialog-header .almatar-aside__back-header{display:flex;align-items:center;gap:12px}.almatar_aside ::ng-deep .p-dialog-header .almatar-aside__back-icon{cursor:pointer;font-size:1.25rem;color:var(--almatar-neutral-icon-secondary-static)}.almatar_aside ::ng-deep .p-dialog-header-close-icon,.almatar_aside ::ng-deep .p-dialog-close-icon{font-size:1.5rem!important}.almatar_aside ::ng-deep .p-dialog-content{height:100%;flex-grow:1;background-color:var(--almatar-neutral-surface-card);padding:0}.almatar_aside--white-header ::ng-deep .p-dialog-header{background:var(--almatar-neutral-surface-card);border-bottom:1px solid var(--almatar-primary-border-disabled)}.almatar_aside--white-header ::ng-deep .p-dialog-header .p-dialog-header-close-icon,.almatar_aside--white-header ::ng-deep .p-dialog-header .p-dialog-close-icon{color:var(--almatar-neutral-icon-primary-static)}.almatar_aside--white-header ::ng-deep .p-dialog-header .almatar-aside__title{color:var(--almatar-neutral-text-primary-static);font-weight:var(--almatar-font-weight-regular)}\n"] }]
         }], ctorParameters: () => [{ type: SharedService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -2908,8 +2918,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], transitionOptions: [{
                 type: Input
-            }], closeIconTemplate: [{
-                type: Input
             }], interceptClose: [{
                 type: Input
             }], onClose: [{
@@ -3157,6 +3165,7 @@ function resolveMyTripsViewedEntrySourceFromQueryParams(params) {
 class AlmatarHotelAutoCancellationEndpointsService {
     constructor() {
         this.api = inject(ApiService);
+        this.apiBase = inject(SBD_CONFIG).apiBase;
         this.route = inject(ActivatedRoute);
         this.hotelManageBookingService = inject(HotelManageBookingService);
         this._almatarBookingId = signal('');
@@ -3179,8 +3188,15 @@ class AlmatarHotelAutoCancellationEndpointsService {
             }
         });
     }
+    /**
+     * Full URL of an endpoint from the enum. The enum paths start with `/api/`, which is the default `apiBase`; a host
+     * that serves the API somewhere else (Helix: its own API origin) sets `apiBase`, so that part is swapped for it.
+     */
+    resolveEndpoint(path) {
+        return `${this.apiBase.replace(/\/+$/, '')}/${path.replace(/^\/?api\//, '')}`;
+    }
     getRefundDetails(packageIds = []) {
-        const endpoint = AlmatarHotelAutoCancellationEndpointsEnum.getRefundDetails;
+        const endpoint = this.resolveEndpoint(AlmatarHotelAutoCancellationEndpointsEnum.getRefundDetails);
         const payload = {
             bookingId: `${this.hotelManageBookingService.selectedHotelBooking.value?.bookingId ||
                 ''}`,
@@ -3472,7 +3488,7 @@ class AlmatarHotelAutoCancellationEndpointsService {
         return allRooms;
     }
     processAutoCancellation(packageIds, refundOption = 'originalPaymentMethod') {
-        const endpoint = AlmatarHotelAutoCancellationEndpointsEnum.processAutoCancellation;
+        const endpoint = this.resolveEndpoint(AlmatarHotelAutoCancellationEndpointsEnum.processAutoCancellation);
         const uniquePackageIds = [...new Set(packageIds)]; // Ensure unique package IDs
         const payload = {
             bookingId: `${this.hotelManageBookingService.selectedHotelBooking.value?.bookingId ||
@@ -3482,35 +3498,34 @@ 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: 750,
-        //         mokafa: 200,
-        //         qitaf: 100,
-        //         card: 0,
-        //         tabby: 0,
-        //         tamara: 0,
-        //       },
-        //     },
-        //   },
-        //   status: 200,
-        //   errors: null,
-        // });
+        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,
@@ -3522,7 +3537,7 @@ class AlmatarHotelAutoCancellationEndpointsService {
         }), catchError((error) => this.handleError(error, 'Failed to process cancellation')));
     }
     processNonRefundableCancellation(packageId, attachmentUrl, language = 'en') {
-        const endpoint = AlmatarHotelAutoCancellationEndpointsEnum.processAutoCancellation;
+        const endpoint = this.resolveEndpoint(AlmatarHotelAutoCancellationEndpointsEnum.processAutoCancellation);
         const payload = {
             bookingId: `${this.hotelManageBookingService.selectedHotelBooking.value?.bookingId ||
                 ''}`,
@@ -3798,7 +3813,7 @@ class AlmatarHotelAutoCancellationNonRefundableRoomComponent {
         this.uploadedFileUrl.set(null);
         const formData = new FormData();
         formData.append('file', file);
-        const req = new HttpRequest('POST', AlmatarHotelAutoCancellationEndpointsEnum.uploadAttachment, formData, {
+        const req = new HttpRequest('POST', this.endpointsService.resolveEndpoint(AlmatarHotelAutoCancellationEndpointsEnum.uploadAttachment), formData, {
             reportProgress: true,
             responseType: 'json',
         });
@@ -3953,11 +3968,11 @@ class AlmatarHotelAutoCancellationNonRefundableRoomComponent {
         return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlmatarHotelAutoCancellationNonRefundableRoomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AlmatarHotelAutoCancellationNonRefundableRoomComponent, isStandalone: true, selector: "almatar-hotel-auto-cancellation-non-refundable-room", inputs: { package: { classPropertyName: "package", publicName: "package", isSignal: true, isRequired: true, transformFunction: null }, allPackages: { classPropertyName: "allPackages", publicName: "allPackages", isSignal: true, isRequired: false, transformFunction: null }, hotelInfo: { classPropertyName: "hotelInfo", publicName: "hotelInfo", isSignal: true, isRequired: false, transformFunction: null }, hotelId: { classPropertyName: "hotelId", publicName: "hotelId", isSignal: true, isRequired: false, transformFunction: null }, currencyCode: { classPropertyName: "currencyCode", publicName: "currencyCode", isSignal: true, isRequired: false, transformFunction: null }, allPackagesNonRefundable: { classPropertyName: "allPackagesNonRefundable", publicName: "allPackagesNonRefundable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeModal: "closeModal", nonRefundableSubmitSuccess: "nonRefundableSubmitSuccess" }, providers: [DialogService], ngImport: i0, template: "@if (!package().isCancelled) {\n  <div class=\"package-item package-item--non-refundable\">\n    <div class=\"package-item__header\">\n      <div class=\"package-item__content\">\n        <div class=\"package-item__info\">\n          <h4 class=\"package-item__name\">{{ package().packageName }}</h4>\n          @if (package().boardBasis) {\n            <span class=\"package-item__board-basis\">{{\n              package().boardBasis\n            }}</span>\n          }\n        </div>\n\n        <span\n          class=\"package-item__refund-badge package-item__refund-badge--non-refundable\"\n        >\n          @if (\n            allPackagesNonRefundable() ||\n            (!package()?.isRefundable && !package()?.isCancelled)\n          ) {\n            NON-REFUNDABLE\n          }\n          @if (package()?.isCancelled) {\n            PREVIOUS CANCELLATION\n          }\n        </span>\n      </div>\n    </div>\n\n    @if (groupedRooms().length) {\n      <div class=\"package-item__rooms\">\n        @for (group of groupedRooms(); track i; let i = $index) {\n          <div class=\"package-item__room\">\n            <h5 class=\"package-item__room-name\">\n              @if (group.count > 1) {\n                {{ group.count }}x\n                @if (group.bedTypeOrRoomType) {\n                  {{ group.bedTypeOrRoomType }}\n                }\n              } @else {\n                Room\n                {{ i + 1 }}\n                @if (group.bedTypeOrRoomType) {\n                  <span class=\"package-item__separator\">\u2022</span>\n                  {{ group.bedTypeOrRoomType }}\n                }\n              }\n            </h5>\n            @if (group.roomBasis) {\n              <span class=\"package-item__room-basis\">{{\n                group.roomBasis\n              }}</span>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    @if (!package()?.isCancelled && !allPackagesNonRefundable()) {\n      <div class=\"package-item__non-refundable-content\">\n        <div class=\"info-message\">\n          <almatar-icon [name]=\"'exclamation-circle'\"> </almatar-icon>\n          <p\n            class=\"info-message__text\"\n            (click)=\"$event.preventDefault(); onOpenCancellationPolicy()\"\n            [innerHTML]=\"\n              'We can\\'t process automatic cancellation with this room. Check the <a class=&quot;info-message__link&quot;>cancellation policy</a> for details'\n            \"\n          ></p>\n        </div>\n\n        @if (uploadSuccess()) {\n          <div class=\"upload-success\">\n            <span class=\"upload-success__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=\"M13.4697 8.20112C13.7626 7.90822 14.2373 7.90822 14.5302 8.20112C14.8231 8.49401 14.8231 8.96877 14.5302 9.26166L7.53022 16.2617C7.23732 16.5546 6.76256 16.5546 6.46967 16.2617L3.46967 13.2617C3.17678 12.9688 3.17678 12.494 3.46967 12.2011C3.74427 11.9265 4.17899 11.909 4.47358 12.1494L4.53022 12.2011L6.99994 14.6708L13.4697 8.20112Z\"\n                  fill=\"#1B1A1F\"\n                />\n                <path\n                  d=\"M19.4697 8.20112C19.7626 7.90822 20.2373 7.90822 20.5302 8.20112C20.8231 8.49401 20.8231 8.96877 20.5302 9.26166L13.5302 16.2617C13.2639 16.5279 12.8415 16.5556 12.5429 16.3261L11.5429 15.5576L11.4843 15.5078C11.2079 15.2468 11.1686 14.8137 11.4052 14.5058C11.6418 14.198 12.0703 14.1245 12.3935 14.3242L12.457 14.3681L12.9345 14.7353L19.4697 8.20112Z\"\n                  fill=\"#1B1A1F\"\n                />\n              </svg>\n            </span>\n            <div class=\"upload-success__info\">\n              <p class=\"upload-success__filename\">{{ filePicked()?.name }}</p>\n              <p class=\"upload-success__meta\">\n                {{ formatFileSize(filePicked()?.size) }} \u2022\n                Uploaded\n              </p>\n            </div>\n            <input\n              type=\"file\"\n              #fileInput\n              (change)=\"onFileSelected($event)\"\n              style=\"display: none\"\n              accept=\".pdf,.jpg,.jpeg,.png,.doc,.docx\"\n            />\n            <button\n              type=\"button\"\n              class=\"upload-success__change-btn\"\n              (click)=\"fileInput.click()\"\n            >\n              Change\n            </button>\n          </div>\n        } @else {\n          <div class=\"upload-section\">\n            <almatar-icon [name]=\"'arrow-up-on-square'\"></almatar-icon>\n            <div style=\"flex: 1\">\n              <h5 class=\"upload-section__title\">\n                Upload a document to support your request\n              </h5>\n              <p class=\"upload-section__subtitle\">\n                Required to submit and track your request\n              </p>\n              @if (filePicked() && !uploadSuccess()) {\n                <p class=\"upload-section__filename\">\n                  {{ filePicked()?.name }}\n                </p>\n              }\n              @if (isUploading()) {\n                <div class=\"upload-progress\">\n                  <div class=\"upload-progress__bar\">\n                    <div\n                      class=\"upload-progress__fill\"\n                      [style.width.%]=\"uploadProgress()\"\n                    ></div>\n                  </div>\n                  <span class=\"upload-progress__text\"\n                    >{{ uploadProgress() }}%</span\n                  >\n                </div>\n              }\n            </div>\n            <input\n              type=\"file\"\n              #fileInput\n              (change)=\"onFileSelected($event)\"\n              style=\"display: none\"\n              accept=\".pdf,.jpg,.jpeg,.png,.doc,.docx\"\n            />\n            <button\n              type=\"button\"\n              class=\"upload-section__button\"\n              [disabled]=\"isUploading()\"\n              (click)=\"fileInput.click()\"\n            >\n              Upload file\n            </button>\n          </div>\n        }\n\n        @if (submitError()) {\n          <div class=\"submit-result submit-result--error\">\n            <almatar-icon [name]=\"'exclamation-circle'\"></almatar-icon>\n            <p class=\"submit-result__text\">{{ submitError() }}</p>\n            <button\n              type=\"button\"\n              class=\"submit-result__retry-btn\"\n              (click)=\"onRetry()\"\n            >\n              Try Again\n            </button>\n          </div>\n        } @else if (!submitSuccess()) {\n          <button\n            type=\"button\"\n            class=\"submit-request-btn\"\n            [disabled]=\"!uploadSuccess() || isSubmitting()\"\n            (click)=\"onSubmitRequest()\"\n          >\n            @if (isSubmitting()) {\n              Submitting...\n            } @else {\n              Submit my request\n            }\n          </button>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [".package-item{display:flex;flex-direction:column;gap:12px;padding:12px;background:#fff;border:1px solid rgb(217,217,222);border-radius:16px;transition:border-color .2s ease,background-color .2s ease}.package-item--non-refundable{cursor:default}.package-item__header{display:flex;align-items:flex-start;gap:8px;width:100%}.package-item__content{flex:1;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.package-item__info{display:flex;flex-direction:column;gap:4px}.package-item__name{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#1b1a1f;margin:0}.package-item__board-basis{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583}.package-item__refund-badge{font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);text-transform:uppercase;padding:6px 8px;flex-shrink:0;border-radius:999px}.package-item__refund-badge--refundable{color:#15803c;background:#f0fdf5}.package-item__refund-badge--non-refundable{color:#6b7280;background:#f3f4f6}.package-item__rooms{display:flex;flex-direction:column;gap:8px}.package-item__room{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:16px;border:1px solid rgb(217,217,222)}.package-item__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;gap:0;margin:0}.package-item__separator{margin:0 4px;color:#1f2937;font-weight:var(--almatar-font-weight-regular)}.package-item__room-basis{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583}.package-item__non-refundable-content{display:flex;flex-direction:column;gap:8px;width:100%}.info-message{display:flex;gap:8px;padding:12px;background:#f7f7f8;border:1px solid rgb(217,217,222);border-radius:12px;align-items:center}.info-message__icon{flex-shrink:0;width:24px;height:24px;color:#1b1a1f}.info-message__text{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;line-height:15.6px;margin:0;cursor:pointer}.info-message__text ::ng-deep a{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;text-decoration:underline;cursor:pointer}.info-message__text ::ng-deep a:focus,.info-message__text ::ng-deep a:hover{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;text-decoration:underline!important;cursor:pointer}.info-message__link{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;text-decoration:underline;cursor:pointer}.info-message__link:focus,.info-message__link:hover{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;text-decoration:underline;cursor:pointer}.upload-success{display:flex;align-items:center;gap:12px;padding:12px;border:1px dashed rgb(217,217,222);border-radius:12px;background:#fff}.upload-success__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.upload-success__info{flex:1;min-width:0}.upload-success__filename{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#1b1a1f;margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.upload-success__meta{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583;margin:0}.upload-success__change-btn{flex-shrink:0;padding:8px 14px;background:#fff;border:1.5px solid rgb(217,217,222);border-radius:8px;color:#7c3aed;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);cursor:pointer;transition:all .2s ease;white-space:nowrap}.upload-success__change-btn:hover:not(:disabled){background:#7c3aed;color:#fff}.upload-success__change-btn:disabled{opacity:.5;cursor:not-allowed}.upload-section{display:flex;align-items:center;gap:12px;padding:12px;border:1px dashed rgb(217,217,222);border-radius:12px;background:#fff}.upload-section__icon{flex-shrink:0;width:24px;height:24px;color:#1b1a1f}.upload-section__title{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#1b1a1f;margin:0 0 2px}.upload-section__subtitle{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583;margin:0;line-height:1.4}.upload-section__button{flex-shrink:0;padding:8px 14px;background:#fff;border:1.5px solid rgb(217,217,222);border-radius:8px;color:#7c3aed;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);cursor:pointer;transition:all .2s ease;white-space:nowrap}.upload-section__button:hover:not(:disabled){background:#7c3aed;color:#fff}.upload-section__button:disabled{opacity:.5;cursor:not-allowed}.upload-section__filename{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583;margin:8px 0 0;font-weight:var(--almatar-font-weight-medium)}.upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.upload-progress__bar{flex:1;height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden}.upload-progress__fill{height:100%;background:#7c3aed;border-radius:3px;transition:width .2s ease}.upload-progress__text{font-size:calc(11 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#7c3aed;min-width:36px;text-align:right}.submit-request-btn{width:100%;padding:8px 0;background:#f7f7f8;border:none;border-radius:12px;color:#7c3aed;cursor:pointer;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);transition:all .2s ease;letter-spacing:.2px}.submit-request-btn:disabled{background:#f7f7f8;color:#b8b9c1;cursor:not-allowed}.submit-request-btn:disabled:hover{background:#f7f7f8;color:#b8b9c1}.submit-request-btn:hover{background:#f7f7f8;color:#7c3aed}.submit-result{display:flex;align-items:center;gap:8px;padding:12px;border-radius:12px}.submit-result--error{background:#fef2f2;border:1px solid rgba(220,38,38,.2);flex-wrap:wrap}.submit-result--error almatar-icon{color:#dc2626}.submit-result__text{flex:1;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);margin:0;line-height:1.4;color:#dc2626}.submit-result__retry-btn{width:100%;margin-top:8px;padding:8px 16px;background:#dc2626;border:none;border-radius:8px;color:#fff;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);cursor:pointer;transition:all .2s ease}.submit-result__retry-btn:hover{background:#b91c1c}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AlmatarIconModule }, { kind: "component", type: AlmatarIconComponent, selector: "almatar-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AlmatarHotelAutoCancellationNonRefundableRoomComponent, isStandalone: true, selector: "almatar-hotel-auto-cancellation-non-refundable-room", inputs: { package: { classPropertyName: "package", publicName: "package", isSignal: true, isRequired: true, transformFunction: null }, allPackages: { classPropertyName: "allPackages", publicName: "allPackages", isSignal: true, isRequired: false, transformFunction: null }, hotelInfo: { classPropertyName: "hotelInfo", publicName: "hotelInfo", isSignal: true, isRequired: false, transformFunction: null }, hotelId: { classPropertyName: "hotelId", publicName: "hotelId", isSignal: true, isRequired: false, transformFunction: null }, currencyCode: { classPropertyName: "currencyCode", publicName: "currencyCode", isSignal: true, isRequired: false, transformFunction: null }, allPackagesNonRefundable: { classPropertyName: "allPackagesNonRefundable", publicName: "allPackagesNonRefundable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeModal: "closeModal", nonRefundableSubmitSuccess: "nonRefundableSubmitSuccess" }, providers: [DialogService], ngImport: i0, template: "<div\n  class=\"package-item package-item--non-refundable\"\n>\n  <div class=\"package-item__header\">\n    <div class=\"package-item__content\">\n      <div class=\"package-item__info\">\n        <h4 class=\"package-item__name\">{{ package().packageName }}</h4>\n        @if (package().boardBasis) {\n          <span class=\"package-item__board-basis\">{{\n            package().boardBasis\n          }}</span>\n        }\n      </div>\n\n      @if (package()?.isCancelled) {\n        <span\n          class=\"package-item__refund-badge package-item__refund-badge--cancelled\"\n        >\n          PREVIOUS CANCELLATION\n        </span>\n      } @else {\n        <span\n          class=\"package-item__refund-badge package-item__refund-badge--non-refundable\"\n        >\n          NON-REFUNDABLE\n        </span>\n      }\n    </div>\n  </div>\n\n    @if (groupedRooms().length) {\n      <div class=\"package-item__rooms\">\n        @for (group of groupedRooms(); track i; let i = $index) {\n          <div class=\"package-item__room\">\n            <h5 class=\"package-item__room-name\">\n              @if (group.count > 1) {\n                {{ group.count }}x\n                @if (group.bedTypeOrRoomType) {\n                  {{ group.bedTypeOrRoomType }}\n                }\n              } @else {\n                Room\n                {{ i + 1 }}\n                @if (group.bedTypeOrRoomType) {\n                  <span class=\"package-item__separator\">\u2022</span>\n                  {{ group.bedTypeOrRoomType }}\n                }\n              }\n            </h5>\n            @if (group.roomBasis) {\n              <span class=\"package-item__room-basis\">{{\n                group.roomBasis\n              }}</span>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    @if (!package()?.isCancelled && !allPackagesNonRefundable()) {\n      <div class=\"package-item__non-refundable-content\">\n        <div class=\"info-message\">\n          <almatar-icon [name]=\"'exclamation-circle'\"> </almatar-icon>\n          <p\n            class=\"info-message__text\"\n            (click)=\"$event.preventDefault(); onOpenCancellationPolicy()\"\n            [innerHTML]=\"\n              'We can\\'t process automatic cancellation with this room. Check the <a class=&quot;info-message__link&quot;>cancellation policy</a> for details'\n            \"\n          ></p>\n        </div>\n\n        @if (uploadSuccess()) {\n          <div class=\"upload-success\">\n            <span class=\"upload-success__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=\"M13.4697 8.20112C13.7626 7.90822 14.2373 7.90822 14.5302 8.20112C14.8231 8.49401 14.8231 8.96877 14.5302 9.26166L7.53022 16.2617C7.23732 16.5546 6.76256 16.5546 6.46967 16.2617L3.46967 13.2617C3.17678 12.9688 3.17678 12.494 3.46967 12.2011C3.74427 11.9265 4.17899 11.909 4.47358 12.1494L4.53022 12.2011L6.99994 14.6708L13.4697 8.20112Z\"\n                  fill=\"#1B1A1F\"\n                />\n                <path\n                  d=\"M19.4697 8.20112C19.7626 7.90822 20.2373 7.90822 20.5302 8.20112C20.8231 8.49401 20.8231 8.96877 20.5302 9.26166L13.5302 16.2617C13.2639 16.5279 12.8415 16.5556 12.5429 16.3261L11.5429 15.5576L11.4843 15.5078C11.2079 15.2468 11.1686 14.8137 11.4052 14.5058C11.6418 14.198 12.0703 14.1245 12.3935 14.3242L12.457 14.3681L12.9345 14.7353L19.4697 8.20112Z\"\n                  fill=\"#1B1A1F\"\n                />\n              </svg>\n            </span>\n            <div class=\"upload-success__info\">\n              <p class=\"upload-success__filename\">{{ filePicked()?.name }}</p>\n              <p class=\"upload-success__meta\">\n                {{ formatFileSize(filePicked()?.size) }} \u2022\n                Uploaded\n              </p>\n            </div>\n            <input\n              type=\"file\"\n              #fileInput\n              (change)=\"onFileSelected($event)\"\n              style=\"display: none\"\n              accept=\".pdf,.jpg,.jpeg,.png,.doc,.docx\"\n            />\n            <button\n              type=\"button\"\n              class=\"upload-success__change-btn\"\n              (click)=\"fileInput.click()\"\n            >\n              Change\n            </button>\n          </div>\n        } @else {\n          <div class=\"upload-section\">\n            <almatar-icon [name]=\"'arrow-up-on-square'\"></almatar-icon>\n            <div style=\"flex: 1\">\n              <h5 class=\"upload-section__title\">\n                Upload a document to support your request\n              </h5>\n              <p class=\"upload-section__subtitle\">\n                Required to submit and track your request\n              </p>\n              @if (filePicked() && !uploadSuccess()) {\n                <p class=\"upload-section__filename\">\n                  {{ filePicked()?.name }}\n                </p>\n              }\n              @if (isUploading()) {\n                <div class=\"upload-progress\">\n                  <div class=\"upload-progress__bar\">\n                    <div\n                      class=\"upload-progress__fill\"\n                      [style.width.%]=\"uploadProgress()\"\n                    ></div>\n                  </div>\n                  <span class=\"upload-progress__text\"\n                    >{{ uploadProgress() }}%</span\n                  >\n                </div>\n              }\n            </div>\n            <input\n              type=\"file\"\n              #fileInput\n              (change)=\"onFileSelected($event)\"\n              style=\"display: none\"\n              accept=\".pdf,.jpg,.jpeg,.png,.doc,.docx\"\n            />\n            <button\n              type=\"button\"\n              class=\"upload-section__button\"\n              [disabled]=\"isUploading()\"\n              (click)=\"fileInput.click()\"\n            >\n              Upload file\n            </button>\n          </div>\n        }\n\n        @if (submitError()) {\n          <div class=\"submit-result submit-result--error\">\n            <almatar-icon [name]=\"'exclamation-circle'\"></almatar-icon>\n            <p class=\"submit-result__text\">{{ submitError() }}</p>\n            <button\n              type=\"button\"\n              class=\"submit-result__retry-btn\"\n              (click)=\"onRetry()\"\n            >\n              Try Again\n            </button>\n          </div>\n        } @else if (!submitSuccess()) {\n          <button\n            type=\"button\"\n            class=\"submit-request-btn\"\n            [disabled]=\"!uploadSuccess() || isSubmitting()\"\n            (click)=\"onSubmitRequest()\"\n          >\n            @if (isSubmitting()) {\n              Submitting...\n            } @else {\n              Submit my request\n            }\n          </button>\n        }\n      </div>\n    }\n</div>\n", styles: [".package-item{display:flex;flex-direction:column;gap:12px;padding:12px;background:#fff;border:1px solid rgb(217,217,222);border-radius:16px;transition:border-color .2s ease,background-color .2s ease}.package-item--non-refundable{cursor:default}.package-item__header{display:flex;align-items:flex-start;gap:8px;width:100%}.package-item__content{flex:1;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.package-item__info{display:flex;flex-direction:column;gap:4px}.package-item__name{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#1b1a1f;margin:0}.package-item__board-basis{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583}.package-item__refund-badge{font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);text-transform:uppercase;padding:6px 8px;flex-shrink:0;border-radius:999px}.package-item__refund-badge--refundable{color:#15803c;background:#f0fdf5}.package-item__refund-badge--non-refundable{color:#6b7280;background:#f3f4f6}.package-item__refund-badge--cancelled{color:#6b7280;background:#f3f4f6;border:1px solid #d1d5db}.package-item__rooms{display:flex;flex-direction:column;gap:8px}.package-item__room{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:16px;border:1px solid rgb(217,217,222)}.package-item__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;gap:0;margin:0}.package-item__separator{margin:0 4px;color:#1f2937;font-weight:var(--almatar-font-weight-regular)}.package-item__room-basis{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583}.package-item__non-refundable-content{display:flex;flex-direction:column;gap:8px;width:100%}.info-message{display:flex;gap:8px;padding:12px;background:#f7f7f8;border:1px solid rgb(217,217,222);border-radius:12px;align-items:center}.info-message__icon{flex-shrink:0;width:24px;height:24px;color:#1b1a1f}.info-message__text{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;line-height:15.6px;margin:0;cursor:pointer}.info-message__text ::ng-deep a{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;text-decoration:underline;cursor:pointer}.info-message__text ::ng-deep a:focus,.info-message__text ::ng-deep a:hover{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;text-decoration:underline!important;cursor:pointer}.info-message__link{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;text-decoration:underline;cursor:pointer}.info-message__link:focus,.info-message__link:hover{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;text-decoration:underline;cursor:pointer}.upload-success{display:flex;align-items:center;gap:12px;padding:12px;border:1px dashed rgb(217,217,222);border-radius:12px;background:#fff}.upload-success__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.upload-success__info{flex:1;min-width:0}.upload-success__filename{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#1b1a1f;margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.upload-success__meta{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583;margin:0}.upload-success__change-btn{flex-shrink:0;padding:8px 14px;background:#fff;border:1.5px solid rgb(217,217,222);border-radius:8px;color:#7c3aed;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);cursor:pointer;transition:all .2s ease;white-space:nowrap}.upload-success__change-btn:hover:not(:disabled){background:#7c3aed;color:#fff}.upload-success__change-btn:disabled{opacity:.5;cursor:not-allowed}.upload-section{display:flex;align-items:center;gap:12px;padding:12px;border:1px dashed rgb(217,217,222);border-radius:12px;background:#fff}.upload-section__icon{flex-shrink:0;width:24px;height:24px;color:#1b1a1f}.upload-section__title{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#1b1a1f;margin:0 0 2px}.upload-section__subtitle{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583;margin:0;line-height:1.4}.upload-section__button{flex-shrink:0;padding:8px 14px;background:#fff;border:1.5px solid rgb(217,217,222);border-radius:8px;color:#7c3aed;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);cursor:pointer;transition:all .2s ease;white-space:nowrap}.upload-section__button:hover:not(:disabled){background:#7c3aed;color:#fff}.upload-section__button:disabled{opacity:.5;cursor:not-allowed}.upload-section__filename{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583;margin:8px 0 0;font-weight:var(--almatar-font-weight-medium)}.upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.upload-progress__bar{flex:1;height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden}.upload-progress__fill{height:100%;background:#7c3aed;border-radius:3px;transition:width .2s ease}.upload-progress__text{font-size:calc(11 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#7c3aed;min-width:36px;text-align:right}.submit-request-btn{width:100%;padding:8px 0;background:#f7f7f8;border:none;border-radius:12px;color:#7c3aed;cursor:pointer;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);transition:all .2s ease;letter-spacing:.2px}.submit-request-btn:disabled{background:#f7f7f8;color:#b8b9c1;cursor:not-allowed}.submit-request-btn:disabled:hover{background:#f7f7f8;color:#b8b9c1}.submit-request-btn:hover{background:#f7f7f8;color:#7c3aed}.submit-result{display:flex;align-items:center;gap:8px;padding:12px;border-radius:12px}.submit-result--error{background:#fef2f2;border:1px solid rgba(220,38,38,.2);flex-wrap:wrap}.submit-result--error almatar-icon{color:#dc2626}.submit-result__text{flex:1;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);margin:0;line-height:1.4;color:#dc2626}.submit-result__retry-btn{width:100%;margin-top:8px;padding:8px 16px;background:#dc2626;border:none;border-radius:8px;color:#fff;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);cursor:pointer;transition:all .2s ease}.submit-result__retry-btn:hover{background:#b91c1c}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AlmatarIconModule }, { kind: "component", type: AlmatarIconComponent, selector: "almatar-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlmatarHotelAutoCancellationNonRefundableRoomComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'almatar-hotel-auto-cancellation-non-refundable-room', standalone: true, imports: [CommonModule, AlmatarIconModule], providers: [DialogService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!package().isCancelled) {\n  <div class=\"package-item package-item--non-refundable\">\n    <div class=\"package-item__header\">\n      <div class=\"package-item__content\">\n        <div class=\"package-item__info\">\n          <h4 class=\"package-item__name\">{{ package().packageName }}</h4>\n          @if (package().boardBasis) {\n            <span class=\"package-item__board-basis\">{{\n              package().boardBasis\n            }}</span>\n          }\n        </div>\n\n        <span\n          class=\"package-item__refund-badge package-item__refund-badge--non-refundable\"\n        >\n          @if (\n            allPackagesNonRefundable() ||\n            (!package()?.isRefundable && !package()?.isCancelled)\n          ) {\n            NON-REFUNDABLE\n          }\n          @if (package()?.isCancelled) {\n            PREVIOUS CANCELLATION\n          }\n        </span>\n      </div>\n    </div>\n\n    @if (groupedRooms().length) {\n      <div class=\"package-item__rooms\">\n        @for (group of groupedRooms(); track i; let i = $index) {\n          <div class=\"package-item__room\">\n            <h5 class=\"package-item__room-name\">\n              @if (group.count > 1) {\n                {{ group.count }}x\n                @if (group.bedTypeOrRoomType) {\n                  {{ group.bedTypeOrRoomType }}\n                }\n              } @else {\n                Room\n                {{ i + 1 }}\n                @if (group.bedTypeOrRoomType) {\n                  <span class=\"package-item__separator\">\u2022</span>\n                  {{ group.bedTypeOrRoomType }}\n                }\n              }\n            </h5>\n            @if (group.roomBasis) {\n              <span class=\"package-item__room-basis\">{{\n                group.roomBasis\n              }}</span>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    @if (!package()?.isCancelled && !allPackagesNonRefundable()) {\n      <div class=\"package-item__non-refundable-content\">\n        <div class=\"info-message\">\n          <almatar-icon [name]=\"'exclamation-circle'\"> </almatar-icon>\n          <p\n            class=\"info-message__text\"\n            (click)=\"$event.preventDefault(); onOpenCancellationPolicy()\"\n            [innerHTML]=\"\n              'We can\\'t process automatic cancellation with this room. Check the <a class=&quot;info-message__link&quot;>cancellation policy</a> for details'\n            \"\n          ></p>\n        </div>\n\n        @if (uploadSuccess()) {\n          <div class=\"upload-success\">\n            <span class=\"upload-success__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=\"M13.4697 8.20112C13.7626 7.90822 14.2373 7.90822 14.5302 8.20112C14.8231 8.49401 14.8231 8.96877 14.5302 9.26166L7.53022 16.2617C7.23732 16.5546 6.76256 16.5546 6.46967 16.2617L3.46967 13.2617C3.17678 12.9688 3.17678 12.494 3.46967 12.2011C3.74427 11.9265 4.17899 11.909 4.47358 12.1494L4.53022 12.2011L6.99994 14.6708L13.4697 8.20112Z\"\n                  fill=\"#1B1A1F\"\n                />\n                <path\n                  d=\"M19.4697 8.20112C19.7626 7.90822 20.2373 7.90822 20.5302 8.20112C20.8231 8.49401 20.8231 8.96877 20.5302 9.26166L13.5302 16.2617C13.2639 16.5279 12.8415 16.5556 12.5429 16.3261L11.5429 15.5576L11.4843 15.5078C11.2079 15.2468 11.1686 14.8137 11.4052 14.5058C11.6418 14.198 12.0703 14.1245 12.3935 14.3242L12.457 14.3681L12.9345 14.7353L19.4697 8.20112Z\"\n                  fill=\"#1B1A1F\"\n                />\n              </svg>\n            </span>\n            <div class=\"upload-success__info\">\n              <p class=\"upload-success__filename\">{{ filePicked()?.name }}</p>\n              <p class=\"upload-success__meta\">\n                {{ formatFileSize(filePicked()?.size) }} \u2022\n                Uploaded\n              </p>\n            </div>\n            <input\n              type=\"file\"\n              #fileInput\n              (change)=\"onFileSelected($event)\"\n              style=\"display: none\"\n              accept=\".pdf,.jpg,.jpeg,.png,.doc,.docx\"\n            />\n            <button\n              type=\"button\"\n              class=\"upload-success__change-btn\"\n              (click)=\"fileInput.click()\"\n            >\n              Change\n            </button>\n          </div>\n        } @else {\n          <div class=\"upload-section\">\n            <almatar-icon [name]=\"'arrow-up-on-square'\"></almatar-icon>\n            <div style=\"flex: 1\">\n              <h5 class=\"upload-section__title\">\n                Upload a document to support your request\n              </h5>\n              <p class=\"upload-section__subtitle\">\n                Required to submit and track your request\n              </p>\n              @if (filePicked() && !uploadSuccess()) {\n                <p class=\"upload-section__filename\">\n                  {{ filePicked()?.name }}\n                </p>\n              }\n              @if (isUploading()) {\n                <div class=\"upload-progress\">\n                  <div class=\"upload-progress__bar\">\n                    <div\n                      class=\"upload-progress__fill\"\n                      [style.width.%]=\"uploadProgress()\"\n                    ></div>\n                  </div>\n                  <span class=\"upload-progress__text\"\n                    >{{ uploadProgress() }}%</span\n                  >\n                </div>\n              }\n            </div>\n            <input\n              type=\"file\"\n              #fileInput\n              (change)=\"onFileSelected($event)\"\n              style=\"display: none\"\n              accept=\".pdf,.jpg,.jpeg,.png,.doc,.docx\"\n            />\n            <button\n              type=\"button\"\n              class=\"upload-section__button\"\n              [disabled]=\"isUploading()\"\n              (click)=\"fileInput.click()\"\n            >\n              Upload file\n            </button>\n          </div>\n        }\n\n        @if (submitError()) {\n          <div class=\"submit-result submit-result--error\">\n            <almatar-icon [name]=\"'exclamation-circle'\"></almatar-icon>\n            <p class=\"submit-result__text\">{{ submitError() }}</p>\n            <button\n              type=\"button\"\n              class=\"submit-result__retry-btn\"\n              (click)=\"onRetry()\"\n            >\n              Try Again\n            </button>\n          </div>\n        } @else if (!submitSuccess()) {\n          <button\n            type=\"button\"\n            class=\"submit-request-btn\"\n            [disabled]=\"!uploadSuccess() || isSubmitting()\"\n            (click)=\"onSubmitRequest()\"\n          >\n            @if (isSubmitting()) {\n              Submitting...\n            } @else {\n              Submit my request\n            }\n          </button>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [".package-item{display:flex;flex-direction:column;gap:12px;padding:12px;background:#fff;border:1px solid rgb(217,217,222);border-radius:16px;transition:border-color .2s ease,background-color .2s ease}.package-item--non-refundable{cursor:default}.package-item__header{display:flex;align-items:flex-start;gap:8px;width:100%}.package-item__content{flex:1;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.package-item__info{display:flex;flex-direction:column;gap:4px}.package-item__name{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#1b1a1f;margin:0}.package-item__board-basis{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583}.package-item__refund-badge{font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);text-transform:uppercase;padding:6px 8px;flex-shrink:0;border-radius:999px}.package-item__refund-badge--refundable{color:#15803c;background:#f0fdf5}.package-item__refund-badge--non-refundable{color:#6b7280;background:#f3f4f6}.package-item__rooms{display:flex;flex-direction:column;gap:8px}.package-item__room{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:16px;border:1px solid rgb(217,217,222)}.package-item__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;gap:0;margin:0}.package-item__separator{margin:0 4px;color:#1f2937;font-weight:var(--almatar-font-weight-regular)}.package-item__room-basis{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583}.package-item__non-refundable-content{display:flex;flex-direction:column;gap:8px;width:100%}.info-message{display:flex;gap:8px;padding:12px;background:#f7f7f8;border:1px solid rgb(217,217,222);border-radius:12px;align-items:center}.info-message__icon{flex-shrink:0;width:24px;height:24px;color:#1b1a1f}.info-message__text{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;line-height:15.6px;margin:0;cursor:pointer}.info-message__text ::ng-deep a{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;text-decoration:underline;cursor:pointer}.info-message__text ::ng-deep a:focus,.info-message__text ::ng-deep a:hover{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;text-decoration:underline!important;cursor:pointer}.info-message__link{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;text-decoration:underline;cursor:pointer}.info-message__link:focus,.info-message__link:hover{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;text-decoration:underline;cursor:pointer}.upload-success{display:flex;align-items:center;gap:12px;padding:12px;border:1px dashed rgb(217,217,222);border-radius:12px;background:#fff}.upload-success__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.upload-success__info{flex:1;min-width:0}.upload-success__filename{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#1b1a1f;margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.upload-success__meta{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583;margin:0}.upload-success__change-btn{flex-shrink:0;padding:8px 14px;background:#fff;border:1.5px solid rgb(217,217,222);border-radius:8px;color:#7c3aed;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);cursor:pointer;transition:all .2s ease;white-space:nowrap}.upload-success__change-btn:hover:not(:disabled){background:#7c3aed;color:#fff}.upload-success__change-btn:disabled{opacity:.5;cursor:not-allowed}.upload-section{display:flex;align-items:center;gap:12px;padding:12px;border:1px dashed rgb(217,217,222);border-radius:12px;background:#fff}.upload-section__icon{flex-shrink:0;width:24px;height:24px;color:#1b1a1f}.upload-section__title{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#1b1a1f;margin:0 0 2px}.upload-section__subtitle{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583;margin:0;line-height:1.4}.upload-section__button{flex-shrink:0;padding:8px 14px;background:#fff;border:1.5px solid rgb(217,217,222);border-radius:8px;color:#7c3aed;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);cursor:pointer;transition:all .2s ease;white-space:nowrap}.upload-section__button:hover:not(:disabled){background:#7c3aed;color:#fff}.upload-section__button:disabled{opacity:.5;cursor:not-allowed}.upload-section__filename{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583;margin:8px 0 0;font-weight:var(--almatar-font-weight-medium)}.upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.upload-progress__bar{flex:1;height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden}.upload-progress__fill{height:100%;background:#7c3aed;border-radius:3px;transition:width .2s ease}.upload-progress__text{font-size:calc(11 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#7c3aed;min-width:36px;text-align:right}.submit-request-btn{width:100%;padding:8px 0;background:#f7f7f8;border:none;border-radius:12px;color:#7c3aed;cursor:pointer;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);transition:all .2s ease;letter-spacing:.2px}.submit-request-btn:disabled{background:#f7f7f8;color:#b8b9c1;cursor:not-allowed}.submit-request-btn:disabled:hover{background:#f7f7f8;color:#b8b9c1}.submit-request-btn:hover{background:#f7f7f8;color:#7c3aed}.submit-result{display:flex;align-items:center;gap:8px;padding:12px;border-radius:12px}.submit-result--error{background:#fef2f2;border:1px solid rgba(220,38,38,.2);flex-wrap:wrap}.submit-result--error almatar-icon{color:#dc2626}.submit-result__text{flex:1;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);margin:0;line-height:1.4;color:#dc2626}.submit-result__retry-btn{width:100%;margin-top:8px;padding:8px 16px;background:#dc2626;border:none;border-radius:8px;color:#fff;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);cursor:pointer;transition:all .2s ease}.submit-result__retry-btn:hover{background:#b91c1c}\n"] }]
+            args: [{ selector: 'almatar-hotel-auto-cancellation-non-refundable-room', standalone: true, imports: [CommonModule, AlmatarIconModule], providers: [DialogService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"package-item package-item--non-refundable\"\n>\n  <div class=\"package-item__header\">\n    <div class=\"package-item__content\">\n      <div class=\"package-item__info\">\n        <h4 class=\"package-item__name\">{{ package().packageName }}</h4>\n        @if (package().boardBasis) {\n          <span class=\"package-item__board-basis\">{{\n            package().boardBasis\n          }}</span>\n        }\n      </div>\n\n      @if (package()?.isCancelled) {\n        <span\n          class=\"package-item__refund-badge package-item__refund-badge--cancelled\"\n        >\n          PREVIOUS CANCELLATION\n        </span>\n      } @else {\n        <span\n          class=\"package-item__refund-badge package-item__refund-badge--non-refundable\"\n        >\n          NON-REFUNDABLE\n        </span>\n      }\n    </div>\n  </div>\n\n    @if (groupedRooms().length) {\n      <div class=\"package-item__rooms\">\n        @for (group of groupedRooms(); track i; let i = $index) {\n          <div class=\"package-item__room\">\n            <h5 class=\"package-item__room-name\">\n              @if (group.count > 1) {\n                {{ group.count }}x\n                @if (group.bedTypeOrRoomType) {\n                  {{ group.bedTypeOrRoomType }}\n                }\n              } @else {\n                Room\n                {{ i + 1 }}\n                @if (group.bedTypeOrRoomType) {\n                  <span class=\"package-item__separator\">\u2022</span>\n                  {{ group.bedTypeOrRoomType }}\n                }\n              }\n            </h5>\n            @if (group.roomBasis) {\n              <span class=\"package-item__room-basis\">{{\n                group.roomBasis\n              }}</span>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    @if (!package()?.isCancelled && !allPackagesNonRefundable()) {\n      <div class=\"package-item__non-refundable-content\">\n        <div class=\"info-message\">\n          <almatar-icon [name]=\"'exclamation-circle'\"> </almatar-icon>\n          <p\n            class=\"info-message__text\"\n            (click)=\"$event.preventDefault(); onOpenCancellationPolicy()\"\n            [innerHTML]=\"\n              'We can\\'t process automatic cancellation with this room. Check the <a class=&quot;info-message__link&quot;>cancellation policy</a> for details'\n            \"\n          ></p>\n        </div>\n\n        @if (uploadSuccess()) {\n          <div class=\"upload-success\">\n            <span class=\"upload-success__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=\"M13.4697 8.20112C13.7626 7.90822 14.2373 7.90822 14.5302 8.20112C14.8231 8.49401 14.8231 8.96877 14.5302 9.26166L7.53022 16.2617C7.23732 16.5546 6.76256 16.5546 6.46967 16.2617L3.46967 13.2617C3.17678 12.9688 3.17678 12.494 3.46967 12.2011C3.74427 11.9265 4.17899 11.909 4.47358 12.1494L4.53022 12.2011L6.99994 14.6708L13.4697 8.20112Z\"\n                  fill=\"#1B1A1F\"\n                />\n                <path\n                  d=\"M19.4697 8.20112C19.7626 7.90822 20.2373 7.90822 20.5302 8.20112C20.8231 8.49401 20.8231 8.96877 20.5302 9.26166L13.5302 16.2617C13.2639 16.5279 12.8415 16.5556 12.5429 16.3261L11.5429 15.5576L11.4843 15.5078C11.2079 15.2468 11.1686 14.8137 11.4052 14.5058C11.6418 14.198 12.0703 14.1245 12.3935 14.3242L12.457 14.3681L12.9345 14.7353L19.4697 8.20112Z\"\n                  fill=\"#1B1A1F\"\n                />\n              </svg>\n            </span>\n            <div class=\"upload-success__info\">\n              <p class=\"upload-success__filename\">{{ filePicked()?.name }}</p>\n              <p class=\"upload-success__meta\">\n                {{ formatFileSize(filePicked()?.size) }} \u2022\n                Uploaded\n              </p>\n            </div>\n            <input\n              type=\"file\"\n              #fileInput\n              (change)=\"onFileSelected($event)\"\n              style=\"display: none\"\n              accept=\".pdf,.jpg,.jpeg,.png,.doc,.docx\"\n            />\n            <button\n              type=\"button\"\n              class=\"upload-success__change-btn\"\n              (click)=\"fileInput.click()\"\n            >\n              Change\n            </button>\n          </div>\n        } @else {\n          <div class=\"upload-section\">\n            <almatar-icon [name]=\"'arrow-up-on-square'\"></almatar-icon>\n            <div style=\"flex: 1\">\n              <h5 class=\"upload-section__title\">\n                Upload a document to support your request\n              </h5>\n              <p class=\"upload-section__subtitle\">\n                Required to submit and track your request\n              </p>\n              @if (filePicked() && !uploadSuccess()) {\n                <p class=\"upload-section__filename\">\n                  {{ filePicked()?.name }}\n                </p>\n              }\n              @if (isUploading()) {\n                <div class=\"upload-progress\">\n                  <div class=\"upload-progress__bar\">\n                    <div\n                      class=\"upload-progress__fill\"\n                      [style.width.%]=\"uploadProgress()\"\n                    ></div>\n                  </div>\n                  <span class=\"upload-progress__text\"\n                    >{{ uploadProgress() }}%</span\n                  >\n                </div>\n              }\n            </div>\n            <input\n              type=\"file\"\n              #fileInput\n              (change)=\"onFileSelected($event)\"\n              style=\"display: none\"\n              accept=\".pdf,.jpg,.jpeg,.png,.doc,.docx\"\n            />\n            <button\n              type=\"button\"\n              class=\"upload-section__button\"\n              [disabled]=\"isUploading()\"\n              (click)=\"fileInput.click()\"\n            >\n              Upload file\n            </button>\n          </div>\n        }\n\n        @if (submitError()) {\n          <div class=\"submit-result submit-result--error\">\n            <almatar-icon [name]=\"'exclamation-circle'\"></almatar-icon>\n            <p class=\"submit-result__text\">{{ submitError() }}</p>\n            <button\n              type=\"button\"\n              class=\"submit-result__retry-btn\"\n              (click)=\"onRetry()\"\n            >\n              Try Again\n            </button>\n          </div>\n        } @else if (!submitSuccess()) {\n          <button\n            type=\"button\"\n            class=\"submit-request-btn\"\n            [disabled]=\"!uploadSuccess() || isSubmitting()\"\n            (click)=\"onSubmitRequest()\"\n          >\n            @if (isSubmitting()) {\n              Submitting...\n            } @else {\n              Submit my request\n            }\n          </button>\n        }\n      </div>\n    }\n</div>\n", styles: [".package-item{display:flex;flex-direction:column;gap:12px;padding:12px;background:#fff;border:1px solid rgb(217,217,222);border-radius:16px;transition:border-color .2s ease,background-color .2s ease}.package-item--non-refundable{cursor:default}.package-item__header{display:flex;align-items:flex-start;gap:8px;width:100%}.package-item__content{flex:1;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.package-item__info{display:flex;flex-direction:column;gap:4px}.package-item__name{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#1b1a1f;margin:0}.package-item__board-basis{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583}.package-item__refund-badge{font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);text-transform:uppercase;padding:6px 8px;flex-shrink:0;border-radius:999px}.package-item__refund-badge--refundable{color:#15803c;background:#f0fdf5}.package-item__refund-badge--non-refundable{color:#6b7280;background:#f3f4f6}.package-item__refund-badge--cancelled{color:#6b7280;background:#f3f4f6;border:1px solid #d1d5db}.package-item__rooms{display:flex;flex-direction:column;gap:8px}.package-item__room{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:16px;border:1px solid rgb(217,217,222)}.package-item__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;gap:0;margin:0}.package-item__separator{margin:0 4px;color:#1f2937;font-weight:var(--almatar-font-weight-regular)}.package-item__room-basis{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583}.package-item__non-refundable-content{display:flex;flex-direction:column;gap:8px;width:100%}.info-message{display:flex;gap:8px;padding:12px;background:#f7f7f8;border:1px solid rgb(217,217,222);border-radius:12px;align-items:center}.info-message__icon{flex-shrink:0;width:24px;height:24px;color:#1b1a1f}.info-message__text{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;line-height:15.6px;margin:0;cursor:pointer}.info-message__text ::ng-deep a{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;text-decoration:underline;cursor:pointer}.info-message__text ::ng-deep a:focus,.info-message__text ::ng-deep a:hover{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;text-decoration:underline!important;cursor:pointer}.info-message__link{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;text-decoration:underline;cursor:pointer}.info-message__link:focus,.info-message__link:hover{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;text-decoration:underline;cursor:pointer}.upload-success{display:flex;align-items:center;gap:12px;padding:12px;border:1px dashed rgb(217,217,222);border-radius:12px;background:#fff}.upload-success__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.upload-success__info{flex:1;min-width:0}.upload-success__filename{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#1b1a1f;margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.upload-success__meta{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583;margin:0}.upload-success__change-btn{flex-shrink:0;padding:8px 14px;background:#fff;border:1.5px solid rgb(217,217,222);border-radius:8px;color:#7c3aed;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);cursor:pointer;transition:all .2s ease;white-space:nowrap}.upload-success__change-btn:hover:not(:disabled){background:#7c3aed;color:#fff}.upload-success__change-btn:disabled{opacity:.5;cursor:not-allowed}.upload-section{display:flex;align-items:center;gap:12px;padding:12px;border:1px dashed rgb(217,217,222);border-radius:12px;background:#fff}.upload-section__icon{flex-shrink:0;width:24px;height:24px;color:#1b1a1f}.upload-section__title{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:#1b1a1f;margin:0 0 2px}.upload-section__subtitle{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583;margin:0;line-height:1.4}.upload-section__button{flex-shrink:0;padding:8px 14px;background:#fff;border:1.5px solid rgb(217,217,222);border-radius:8px;color:#7c3aed;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);cursor:pointer;transition:all .2s ease;white-space:nowrap}.upload-section__button:hover:not(:disabled){background:#7c3aed;color:#fff}.upload-section__button:disabled{opacity:.5;cursor:not-allowed}.upload-section__filename{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583;margin:8px 0 0;font-weight:var(--almatar-font-weight-medium)}.upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.upload-progress__bar{flex:1;height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden}.upload-progress__fill{height:100%;background:#7c3aed;border-radius:3px;transition:width .2s ease}.upload-progress__text{font-size:calc(11 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#7c3aed;min-width:36px;text-align:right}.submit-request-btn{width:100%;padding:8px 0;background:#f7f7f8;border:none;border-radius:12px;color:#7c3aed;cursor:pointer;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);transition:all .2s ease;letter-spacing:.2px}.submit-request-btn:disabled{background:#f7f7f8;color:#b8b9c1;cursor:not-allowed}.submit-request-btn:disabled:hover{background:#f7f7f8;color:#b8b9c1}.submit-request-btn:hover{background:#f7f7f8;color:#7c3aed}.submit-result{display:flex;align-items:center;gap:8px;padding:12px;border-radius:12px}.submit-result--error{background:#fef2f2;border:1px solid rgba(220,38,38,.2);flex-wrap:wrap}.submit-result--error almatar-icon{color:#dc2626}.submit-result__text{flex:1;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);margin:0;line-height:1.4;color:#dc2626}.submit-result__retry-btn{width:100%;margin-top:8px;padding:8px 16px;background:#dc2626;border:none;border-radius:8px;color:#fff;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);cursor:pointer;transition:all .2s ease}.submit-result__retry-btn:hover{background:#b91c1c}\n"] }]
         }] });
 
 class AlmatarHotelAutoCancellationSelectRoomsComponent {
@@ -4028,7 +4043,7 @@ class AlmatarHotelAutoCancellationSelectRoomsComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlmatarHotelAutoCancellationSelectRoomsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AlmatarHotelAutoCancellationSelectRoomsComponent, isStandalone: true, selector: "almatar-hotel-auto-cancellation-select-rooms", inputs: { packages: { classPropertyName: "packages", publicName: "packages", isSignal: true, isRequired: true, transformFunction: null }, hotelInfo: { classPropertyName: "hotelInfo", publicName: "hotelInfo", 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 }, currencyCode: { classPropertyName: "currencyCode", publicName: "currencyCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { continueToCancel: "continueToCancel", closeModal: "closeModal", nonRefundableSubmitSuccess: "nonRefundableSubmitSuccess", chatWithAgent: "chatWithAgent" }, ngImport: i0, 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) {\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AlmatarHotelAutoCancellationRefundableRoomComponent, selector: "almatar-hotel-auto-cancellation-refundable-room", inputs: ["package", "hideCheckbox"], outputs: ["togglePackage"] }, { kind: "component", type: AlmatarHotelAutoCancellationNonRefundableRoomComponent, selector: "almatar-hotel-auto-cancellation-non-refundable-room", inputs: ["package", "allPackages", "hotelInfo", "hotelId", "currencyCode", "allPackagesNonRefundable"], outputs: ["closeModal", "nonRefundableSubmitSuccess"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AlmatarHotelAutoCancellationSelectRoomsComponent, isStandalone: true, selector: "almatar-hotel-auto-cancellation-select-rooms", inputs: { packages: { classPropertyName: "packages", publicName: "packages", isSignal: true, isRequired: true, transformFunction: null }, hotelInfo: { classPropertyName: "hotelInfo", publicName: "hotelInfo", 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 }, currencyCode: { classPropertyName: "currencyCode", publicName: "currencyCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { continueToCancel: "continueToCancel", closeModal: "closeModal", nonRefundableSubmitSuccess: "nonRefundableSubmitSuccess", chatWithAgent: "chatWithAgent" }, ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AlmatarHotelAutoCancellationRefundableRoomComponent, selector: "almatar-hotel-auto-cancellation-refundable-room", inputs: ["package", "hideCheckbox"], outputs: ["togglePackage"] }, { kind: "component", type: AlmatarHotelAutoCancellationNonRefundableRoomComponent, selector: "almatar-hotel-auto-cancellation-non-refundable-room", inputs: ["package", "allPackages", "hotelInfo", "hotelId", "currencyCode", "allPackagesNonRefundable"], outputs: ["closeModal", "nonRefundableSubmitSuccess"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlmatarHotelAutoCancellationSelectRoomsComponent, decorators: [{
             type: Component,
@@ -4036,7 +4051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         CommonModule,
                         AlmatarHotelAutoCancellationRefundableRoomComponent,
                         AlmatarHotelAutoCancellationNonRefundableRoomComponent,
-                    ], 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) {\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"] }]
+                    ], 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
@@ -4265,6 +4280,12 @@ class AlmatarHotelAutoCancellationRefundSummaryComponent {
         this.responseData = signal(null);
         this.rooms = computed(() => this.refundSummary()?.rooms ?? []);
         this.packages = computed(() => this.refundSummary()?.packages ?? []);
+        this.allPackagesCancelled = computed(() => {
+            const packages = this.packages();
+            if (packages.length === 0)
+                return false;
+            return packages.every((pkg) => pkg.cancelledBefore === true);
+        });
         this.currentRefundRoomsNumber = computed(() => {
             const packages = this.packages();
             return packages
@@ -4481,7 +4502,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\n                  }}\n                  {{ currentCurrency()?.code }}\n                  @if (currentCurrency()) {\n                    <app-currency-code-icon\n                      [currency]=\"currentCurrency()\"\n                    ></app-currency-code-icon>\n                  }\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\n                      }}\n                      {{ currentCurrency()?.code }}\n                      @if (currentCurrency()) {\n                        <app-currency-code-icon\n                          [currency]=\"currentCurrency()\"\n                        ></app-currency-code-icon>\n                      }\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\n                      }}\n                      {{ currentCurrency()?.code }}\n                      @if (currentCurrency()) {\n                        <app-currency-code-icon\n                          [currency]=\"currentCurrency()\"\n                        ></app-currency-code-icon>\n                      }\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()\n                      }}\n                      {{ currentCurrency()?.code }}\n                      @if (currentCurrency()) {\n                        <app-currency-code-icon\n                          [currency]=\"currentCurrency()\"\n                        ></app-currency-code-icon>\n                      }\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\n                              | exchange_round\n                                : baseCurrencyCode()\n                                : currentCurrency()\n                          }}\n                          @if (currentCurrency()) {\n                            <app-currency-code-icon\n                              [currency]=\"currentCurrency()\"\n                            ></app-currency-code-icon>\n                          }\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\n                    }}\n                    {{ currentCurrency()?.code }}\n                    @if (currentCurrency()) {\n                      <app-currency-code-icon\n                        [currency]=\"currentCurrency()\"\n                      ></app-currency-code-icon>\n                    }\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\n                    }}\n                    {{ currentCurrency()?.code }}\n                    @if (currentCurrency()) {\n                      <app-currency-code-icon\n                        [currency]=\"currentCurrency()\"\n                      ></app-currency-code-icon>\n                    }\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()\n            }}\n            {{ currentCurrency()?.code }}\n            @if (currentCurrency()) {\n              <app-currency-code-icon\n                [currency]=\"currentCurrency()\"\n              ></app-currency-code-icon>\n            }\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()\n              }}\n              {{ currentCurrency()?.code }}\n              @if (currentCurrency()) {\n                <app-currency-code-icon\n                  [currency]=\"currentCurrency()\"\n                ></app-currency-code-icon>\n              }\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()\n            }}\n            {{ currentCurrency()?.code }}\n            @if (currentCurrency()) {\n              <app-currency-code-icon\n                [currency]=\"currentCurrency()\"\n              ></app-currency-code-icon>\n            }\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 (totalRefund()) {\n        <button class=\"btn btn--secondary\" type=\"button\" (click)=\"onKeepRoom()\">\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    </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)}}\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 } }, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlmatarHotelAutoCancellationRefundSummaryComponent, decorators: [{
             type: Component,
@@ -4493,7 +4514,7 @@ 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\n                  }}\n                  {{ currentCurrency()?.code }}\n                  @if (currentCurrency()) {\n                    <app-currency-code-icon\n                      [currency]=\"currentCurrency()\"\n                    ></app-currency-code-icon>\n                  }\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\n                      }}\n                      {{ currentCurrency()?.code }}\n                      @if (currentCurrency()) {\n                        <app-currency-code-icon\n                          [currency]=\"currentCurrency()\"\n                        ></app-currency-code-icon>\n                      }\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\n                      }}\n                      {{ currentCurrency()?.code }}\n                      @if (currentCurrency()) {\n                        <app-currency-code-icon\n                          [currency]=\"currentCurrency()\"\n                        ></app-currency-code-icon>\n                      }\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()\n                      }}\n                      {{ currentCurrency()?.code }}\n                      @if (currentCurrency()) {\n                        <app-currency-code-icon\n                          [currency]=\"currentCurrency()\"\n                        ></app-currency-code-icon>\n                      }\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\n                              | exchange_round\n                                : baseCurrencyCode()\n                                : currentCurrency()\n                          }}\n                          @if (currentCurrency()) {\n                            <app-currency-code-icon\n                              [currency]=\"currentCurrency()\"\n                            ></app-currency-code-icon>\n                          }\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\n                    }}\n                    {{ currentCurrency()?.code }}\n                    @if (currentCurrency()) {\n                      <app-currency-code-icon\n                        [currency]=\"currentCurrency()\"\n                      ></app-currency-code-icon>\n                    }\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\n                    }}\n                    {{ currentCurrency()?.code }}\n                    @if (currentCurrency()) {\n                      <app-currency-code-icon\n                        [currency]=\"currentCurrency()\"\n                      ></app-currency-code-icon>\n                    }\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()\n            }}\n            {{ currentCurrency()?.code }}\n            @if (currentCurrency()) {\n              <app-currency-code-icon\n                [currency]=\"currentCurrency()\"\n              ></app-currency-code-icon>\n            }\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()\n              }}\n              {{ currentCurrency()?.code }}\n              @if (currentCurrency()) {\n                <app-currency-code-icon\n                  [currency]=\"currentCurrency()\"\n                ></app-currency-code-icon>\n              }\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()\n            }}\n            {{ currentCurrency()?.code }}\n            @if (currentCurrency()) {\n              <app-currency-code-icon\n                [currency]=\"currentCurrency()\"\n              ></app-currency-code-icon>\n            }\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 (totalRefund()) {\n        <button class=\"btn btn--secondary\" type=\"button\" (click)=\"onKeepRoom()\">\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    </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)}}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [] });
 
 // Flight refund details interfaces
@@ -4685,15 +4706,15 @@ class HotelRefundMethodSelectorComponent {
          */
         this.originalPaymentLabel = computed(() => {
             if (this.isMadaMethod()) {
-                return this.translateService.instant('manage-booking.smart-cancel.result.mada-card');
+                return 'Mada Card';
             }
             return (this.customerPaymentLabel() ||
-                this.walletOrLoyaltyLabel(this._data(), 'manage-booking.smart-cancel.refund-method.original'));
+                this.walletOrLoyaltyLabel(this._data(), 'Original Payment Method'));
         });
         // Wallet card's own name always reads "Almatar Wallet" — the loyalty
         // program name (e.g. "Qitaf") is surfaced via the note below instead of
         // replacing the card's title.
-        this.walletLabel = computed(() => this.translateService.instant('manage-booking.smart-cancel.refund-method.wallet'));
+        this.walletLabel = computed(() => 'Almatar Wallet');
         /**
          * Part of the refund came from converting external loyalty points into
          * wallet funds — surfaced as a note under the wallet destination so the
@@ -4759,7 +4780,7 @@ class HotelRefundMethodSelectorComponent {
                 // (e.g. Wala) gets its own dedicated row below via
                 // `forfeitedLoyaltyPointsFallback`, so the two stay visually distinct.
                 rows.push({
-                    label: this.translateService.instant('manage-booking.smart-cancel.refund-method.wallet'),
+                    label: 'Almatar Wallet',
                     value: wallet,
                     instant: true,
                     isLoyalty: false,
@@ -4772,9 +4793,9 @@ class HotelRefundMethodSelectorComponent {
                     // card/original-payment-method portion — don't relabel it with the
                     // loyalty program name too.
                     label: this.isMadaMethod()
-                        ? this.translateService.instant('manage-booking.smart-cancel.result.mada-card')
+                        ? 'Mada Card'
                         : (!this.isLoyaltyMethod() && this.customerPaymentLabel()) ||
-                            this.translateService.instant('manage-booking.smart-cancel.refund-method.original'),
+                            'Original Payment Method',
                     value: card,
                     instant: false,
                     isLoyalty: false,
@@ -4785,7 +4806,7 @@ class HotelRefundMethodSelectorComponent {
             if (loyalty > 0) {
                 rows.push({
                     // when paying with card and loyalty program all backed as card
-                    label: this.walletOrLoyaltyLabel(d, 'manage-booking.smart-cancel.refunds.loyalty'),
+                    label: this.walletOrLoyaltyLabel(d, 'Loyalty Points Refund'),
                     value: loyalty,
                     instant: true,
                     isLoyalty: true,
@@ -4819,7 +4840,7 @@ class HotelRefundMethodSelectorComponent {
      * amount is actually a loyalty-program redemption rather than a plain
      * wallet balance.
      */
-    walletOrLoyaltyLabel(d, fallbackKey = 'manage-booking.smart-cancel.refund-method.wallet') {
+    walletOrLoyaltyLabel(d, fallbackKey = 'Almatar Wallet') {
         const loyalty = d?.loyaltyPaymentType;
         const entry = loyalty ? PAYMENT_GATEWAY_LABELS[loyalty] : undefined;
         if (entry) {
@@ -4827,7 +4848,7 @@ class HotelRefundMethodSelectorComponent {
                 ? entry.ar
                 : entry.en;
         }
-        return this.translateService.instant(fallbackKey);
+        return fallbackKey;
     }
     /**
      * `totalLoyaltyPoints` is normally the forfeited-at-booking points count
@@ -4857,26 +4878,28 @@ class HotelRefundMethodSelectorComponent {
     }
     /** Format an amount without the currency suffix (for interpolated copy). */
     fmtAmount(value) {
-        return Number(value || 0).toLocaleString(undefined, {
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2,
+        return Math.round(Number(value || 0)).toLocaleString(undefined, {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
         });
     }
     /** Get the description for the original payment method */
     getOriginalPaymentDescription() {
-        const key = this.isInstallmentMethod()
-            ? 'manage-booking.smart-cancel.refund-method.installment-desc'
-            : this.showAsLoyalty()
-                ? 'manage-booking.smart-cancel.refund-method.loyalty-desc'
-                : 'manage-booking.smart-cancel.refund-method.original-desc';
-        return this.translateService.instant(key, { method: this.originalPaymentLabel() });
+        const method = this.originalPaymentLabel();
+        if (this.isInstallmentMethod()) {
+            return `Returned to your ${method} installment plan`;
+        }
+        if (this.showAsLoyalty()) {
+            return 'Refunded to your Almatar Wallet';
+        }
+        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      @if (currencyObj) {\n        <app-currency-code-icon\n          [size]=\"currencySizeEnum\"\n          [currency]=\"currencyObj\"\n        ></app-currency-code-icon>\n      }\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        @if (currencyObj) {\n          <app-currency-code-icon\n            [currency]=\"currencyObj\"\n          ></app-currency-code-icon>\n        }\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              @if (currencyObj) {\n                <app-currency-code-icon\n                  [currency]=\"currencyObj\"\n                ></app-currency-code-icon>\n              }\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    </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"] }] }); }
 }
 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      @if (currencyObj) {\n        <app-currency-code-icon\n          [size]=\"currencySizeEnum\"\n          [currency]=\"currencyObj\"\n        ></app-currency-code-icon>\n      }\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        @if (currencyObj) {\n          <app-currency-code-icon\n            [currency]=\"currencyObj\"\n          ></app-currency-code-icon>\n        }\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              @if (currencyObj) {\n                <app-currency-code-icon\n                  [currency]=\"currencyObj\"\n                ></app-currency-code-icon>\n              }\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    </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"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], bookingId: [{
@@ -4982,6 +5005,203 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ selector: 'app-result-overlay', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (show()) {\n  <div class=\"result-overlay\">\n    <div class=\"result-overlay__backdrop\" (click)=\"onCancel()\"></div>\n\n    <div class=\"result-overlay__content\">\n      <div class=\"result-overlay__icon-wrapper\" [ngClass]=\"getIconClass()\">\n        <i [class]=\"getIcon()\" class=\"result-overlay__icon\"></i>\n      </div>\n\n      <h2 class=\"result-overlay__title\">{{ data().title }}</h2>\n\n      <p class=\"result-overlay__message\">{{ data().message }}</p>\n\n      <div class=\"result-overlay__actions\">\n        <button\n          type=\"button\"\n          class=\"result-overlay__btn result-overlay__btn--primary\"\n          (click)=\"onConfirm()\"\n        >\n          {{ data().confirmText || 'OK' }}\n        </button>\n\n        @if (data().showCancel) {\n          <button\n            type=\"button\"\n            class=\"result-overlay__btn result-overlay__btn--secondary\"\n            (click)=\"onCancel()\"\n          >\n            {{ data().cancelText || 'Cancel' }}\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [".result-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .3s ease-out}.result-overlay__backdrop{position:absolute;inset:0;background:#0009;backdrop-filter:blur(4px)}.result-overlay__content{position:relative;background:#fff;border-radius:24px;padding:48px 40px 40px;max-width:480px;width:100%;box-shadow:0 24px 48px #0003,0 8px 16px #0000001a;text-align:center;animation:slideUp .4s cubic-bezier(.34,1.56,.64,1)}.result-overlay__icon-wrapper{width:80px;height:80px;margin:0 auto 24px;border-radius:50%;display:flex;align-items:center;justify-content:center;animation:scaleIn .5s cubic-bezier(.34,1.56,.64,1) .1s backwards}.result-overlay__icon-wrapper.icon--success{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 8px 24px #10b9814d}.result-overlay__icon-wrapper.icon--error{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 8px 24px #ef44444d}.result-overlay__icon-wrapper.icon--warning{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 8px 24px #f59e0b4d}.result-overlay__icon-wrapper.icon--info{background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 8px 24px #3b82f64d}.result-overlay__icon{font-size:40px;color:#fff}.result-overlay__title{font-size:28px;font-weight:700;color:#1f2937;margin:0 0 16px;line-height:1.3;animation:fadeInUp .5s ease-out .2s backwards}.result-overlay__message{font-size:16px;color:#6b7280;margin:0 0 32px;line-height:1.6;animation:fadeInUp .5s ease-out .3s backwards}.result-overlay__actions{display:flex;gap:12px;justify-content:center;animation:fadeInUp .5s ease-out .4s backwards}.result-overlay__btn{padding:14px 32px;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;min-width:120px;outline:none}.result-overlay__btn:active{transform:scale(.98)}.result-overlay__btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 4px 12px #3b82f64d}.result-overlay__btn--primary:hover{box-shadow:0 6px 16px #3b82f666;transform:translateY(-1px)}.result-overlay__btn--primary:active{transform:translateY(0) scale(.98)}.result-overlay__btn--secondary{background:#f3f4f6;color:#4b5563;box-shadow:0 2px 8px #0000001a}.result-overlay__btn--secondary:hover{background:#e5e7eb;transform:translateY(-1px)}.result-overlay__btn--secondary:active{transform:translateY(0) scale(.98)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes scaleIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fadeInUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width: 640px){.result-overlay{padding:16px}.result-overlay__content{padding:36px 24px 28px;border-radius:20px}.result-overlay__icon-wrapper{width:64px;height:64px;margin-bottom:20px}.result-overlay__icon{font-size:32px}.result-overlay__title{font-size:24px;margin-bottom:12px}.result-overlay__message{font-size:14px;margin-bottom:24px}.result-overlay__actions{flex-direction:column;width:100%}.result-overlay__btn{width:100%;padding:12px 24px}}\n"] }]
         }] });
 
+class AlmatarHotelAutoCancellationResultOverlayComponent {
+    constructor() {
+        this.translateService = inject(TranslationService);
+        this.store = inject(Store);
+        this.sharedService = inject(SharedService);
+        this.destroyRef = inject(DestroyRef);
+        // Currency
+        this.baseCurrencyCode = signal('SAR');
+        this.currentCurrency = signal(null);
+        this.visible = input(false);
+        this.currencyObj = input(null);
+        this.refundMethod = input('wallet');
+        this.apiResponse = input(null);
+        this.done = output();
+        this.isNilRefund = computed(() => {
+            const response = this.apiResponse();
+            if (response?.data?.refund) {
+                return response.data.refund.amount === 0;
+            }
+            return true;
+        });
+        this.displayCurrency = computed(() => {
+            const response = this.apiResponse();
+            if (response?.data?.refund?.currency) {
+                return { code: response.data.refund.currency };
+            }
+            return this.currencyObj();
+        });
+        this.refundRows = computed(() => {
+            const response = this.apiResponse();
+            if (!response?.data?.refund?.breakdown) {
+                return [];
+            }
+            return this.buildRowsFromApiResponse(response);
+        });
+    }
+    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))
+            .subscribe((currency) => {
+            this.baseCurrencyCode.set(currency.code);
+        });
+    }
+    buildRowsFromApiResponse(response) {
+        const rows = [];
+        const breakdown = response.data.refund.breakdown;
+        const preferredMethod = response.data.preferredPaymentMethod;
+        // Collect loyalty programs dynamically
+        const loyaltyPrograms = this.getLoyaltyPrograms(breakdown);
+        const hasLoyaltyPrograms = loyaltyPrograms.length > 0;
+        const loyaltyTotal = loyaltyPrograms.reduce((sum, item) => sum + item.value, 0);
+        // Wallet refund (combined with loyalty programs if any)
+        if (breakdown.wallet > 0 || hasLoyaltyPrograms) {
+            const walletTotal = breakdown.wallet + loyaltyTotal;
+            const loyaltySubItems = [];
+            // Add wallet points as first sub-item if there are loyalty programs
+            if (hasLoyaltyPrograms && breakdown.wallet > 0) {
+                loyaltySubItems.push({
+                    label: this.translateService.instant('manage-booking.smart-cancel.result.wallet-points-label'),
+                    value: breakdown.wallet,
+                });
+            }
+            // Add all loyalty programs as sub-items
+            loyaltySubItems.push(...loyaltyPrograms);
+            rows.push({
+                label: this.translateService.instant('manage-booking.smart-cancel.result.your-wallet'),
+                value: walletTotal,
+                instant: true,
+                badgeKey: 'Ready Now',
+                isWallet: true,
+                hasLoyaltyNote: hasLoyaltyPrograms,
+                loyaltySubItems: loyaltySubItems.length > 1 ? loyaltySubItems : undefined,
+            });
+        }
+        // Card refund
+        if (breakdown.card > 0) {
+            rows.push({
+                label: this.translateService.instant('manage-booking.smart-cancel.refund-method.original'),
+                value: breakdown.card,
+                instant: false,
+                badgeKey: '5-7 business days',
+                isWallet: false,
+                isInstallment: false,
+            });
+        }
+        // Tabby refund
+        if (breakdown.tabby > 0) {
+            rows.push({
+                label: this.getPaymentMethodLabel(PaymentGatewayCode.Tabby) || 'Tabby',
+                value: breakdown.tabby,
+                instant: false,
+                badgeKey: '3-5 business days',
+                isWallet: false,
+                isInstallment: true,
+            });
+        }
+        // Tamara refund
+        if (breakdown.tamara > 0) {
+            rows.push({
+                label: this.getPaymentMethodLabel(PaymentGatewayCode.Tamara) || 'Tamara',
+                value: breakdown.tamara,
+                instant: false,
+                badgeKey: '7-10 business days',
+                isWallet: false,
+                isInstallment: true,
+            });
+        }
+        // If no breakdown rows but we have a total amount, show single row
+        if (rows.length === 0 && response.data.refund.amount > 0) {
+            const isWallet = preferredMethod === 'wallet';
+            rows.push({
+                label: isWallet
+                    ? this.translateService.instant('manage-booking.smart-cancel.result.your-wallet')
+                    : this.translateService.instant('manage-booking.smart-cancel.refund-method.original'),
+                value: response.data.refund.amount,
+                instant: isWallet,
+                badgeKey: isWallet
+                    ? 'Ready Now'
+                    : '5-7 business days',
+                isWallet,
+            });
+        }
+        return rows;
+    }
+    getLoyaltyPrograms(breakdown) {
+        const loyaltyPrograms = [];
+        // Mokafa (Al Rajhi) points
+        if (breakdown.mokafa > 0) {
+            loyaltyPrograms.push({
+                label: this.getLoyaltyProgramLabel(PaymentGatewayCode.AlRajhiMokafaa, "Mokafa'a"),
+                value: breakdown.mokafa,
+            });
+        }
+        // Qitaf points
+        if (breakdown.qitaf > 0) {
+            loyaltyPrograms.push({
+                label: this.getLoyaltyProgramLabel(PaymentGatewayCode.Qitaf, 'Qitaf'),
+                value: breakdown.qitaf,
+            });
+        }
+        // Add more loyalty programs here as needed
+        // Example: if (breakdown.newLoyalty > 0) { ... }
+        return loyaltyPrograms;
+    }
+    getLoyaltyProgramLabel(code, fallbackName) {
+        const isArabic = this.translateService.currentLang?.startsWith('ar');
+        const pointsLabel = isArabic ? 'نقاط' : 'points';
+        const gatewayLabel = this.getPaymentMethodLabel(code);
+        const programName = gatewayLabel || fallbackName;
+        return `${programName} ${pointsLabel}`;
+    }
+    getPaymentMethodLabel(code) {
+        if (!code) {
+            return '';
+        }
+        const entry = PAYMENT_GATEWAY_LABELS[code];
+        if (!entry) {
+            return '';
+        }
+        return this.translateService.currentLang?.startsWith('ar')
+            ? entry.ar
+            : entry.en;
+    }
+    isWalletRow(row) {
+        return row.isWallet === true;
+    }
+    fmtAmount(value) {
+        return Number(value || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        });
+    }
+    onDone() {
+        this.done.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlmatarHotelAutoCancellationResultOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AlmatarHotelAutoCancellationResultOverlayComponent, isStandalone: true, selector: "almatar-hotel-auto-cancellation-result-overlay", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, currencyObj: { classPropertyName: "currencyObj", publicName: "currencyObj", isSignal: true, isRequired: false, transformFunction: null }, refundMethod: { classPropertyName: "refundMethod", publicName: "refundMethod", isSignal: true, isRequired: false, transformFunction: null }, apiResponse: { classPropertyName: "apiResponse", publicName: "apiResponse", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { done: "done" }, ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ExchangePipeModule }, { kind: "pipe", type: ExchangeRoundPipe, name: "exchange_round" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlmatarHotelAutoCancellationResultOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'almatar-hotel-auto-cancellation-result-overlay', standalone: true, imports: [
+                        CommonModule,
+                        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"] }]
+        }] });
+
 class AlmatarHotelAutoCancellationComponent {
     constructor() {
         this.hotelManageBookingService = inject(HotelManageBookingService);
@@ -5006,6 +5226,8 @@ class AlmatarHotelAutoCancellationComponent {
         this.isNusk = signal(false);
         this.showResultOverlay = signal(false);
         this.resultOverlayData = signal(null);
+        this.showDetailedResultOverlay = signal(false);
+        this.cancellationApiResponse = signal(null);
         this.rooms = signal([]);
         this.packages = signal([]);
         this.hotelInfo = signal(null);
@@ -5304,6 +5526,7 @@ class AlmatarHotelAutoCancellationComponent {
             totalLoyaltyPoints: loyaltyPointsValue,
             bookingId: this.selectedHotelBooking()?.bookingId
         });
+        console.log('Refund details data set:', this.refundDetailsData());
         // Default to wallet if allowed, otherwise originalPaymentMethod
         if (isFullWalletAllowed && walletRefund > 0) {
             this.refundMethod.set('wallet');
@@ -5403,14 +5626,9 @@ class AlmatarHotelAutoCancellationComponent {
                     this.hotelManageBookingService.setActiveAsideTab(HotelManageBookingAsideTabEnum.whatsAppAgent);
                     return;
                 }
-                // Show success overlay
-                this.resultOverlayData.set({
-                    type: 'success',
-                    title: 'Cancellation Successful!',
-                    message: 'Your booking has been cancelled successfully. The refund will be processed according to your selected method.',
-                    confirmText: 'Done'
-                });
-                this.showResultOverlay.set(true);
+                // Store API response and show detailed result overlay
+                this.cancellationApiResponse.set(response);
+                this.showDetailedResultOverlay.set(true);
                 // Also emit for parent component if needed
                 this.cancellationSuccess.emit(response);
             },
@@ -5478,11 +5696,16 @@ class AlmatarHotelAutoCancellationComponent {
         this.showResultOverlay.set(false);
         this.resultOverlayData.set(null);
     }
+    onDetailedResultOverlayDone() {
+        this.showDetailedResultOverlay.set(false);
+        this.cancellationApiResponse.set(null);
+        this.closed.emit();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlmatarHotelAutoCancellationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     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", 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", "closeIconTemplate", "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"] }], 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          (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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlmatarHotelAutoCancellationComponent, decorators: [{
             type: Component,
@@ -5495,11 +5718,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         AlmatarHotelAutoCancellationRefundSummaryComponent,
                         AlmatarHotelAutoCancellationRefundMethodComponent,
                         AlmatarIconModule,
-                        ResultOverlayComponent
+                        ResultOverlayComponent,
+                        AlmatarHotelAutoCancellationResultOverlayComponent
                     ], 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", 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          (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 {
@@ -6058,17 +6282,1898 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ selector: 'app-sbd-add-note-dialog', standalone: true, imports: [DialogModule, ButtonModule, FormsModule, NgSelectModule], template: "<p-dialog\n  [visible]=\"visible()\"\n  (visibleChange)=\"$event ? null : closed.emit()\"\n  [modal]=\"true\"\n  [blockScroll]=\"true\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  [style]=\"{ width: '480px' }\"\n  styleClass=\"sbd-add-note-dialog-wrapper\"\n  header=\"Add Note\">\n\n  <div class=\"and\">\n\n    <!-- Note type -->\n    <div class=\"and__field\">\n      <label class=\"and__label\">Note type</label>\n      <div class=\"and__type-group\">\n        @for (opt of actionOptions; track opt.value) {\n          <button\n            type=\"button\"\n            class=\"and__type-btn\"\n            [class.and__type-btn--active]=\"action() === opt.value\"\n            (click)=\"action.set(opt.value)\">\n            <i class=\"{{ opt.icon }}\"></i>\n            {{ opt.label }}\n          </button>\n        }\n      </div>\n    </div>\n\n    <!-- Message -->\n    <div class=\"and__field\">\n      <label class=\"and__label\">\n        Message\n        <span class=\"and__char-count\">{{ message().length }} / 1000</span>\n      </label>\n      <textarea\n        class=\"and__textarea\"\n        [ngModel]=\"message()\"\n        (ngModelChange)=\"message.set($event)\"\n        placeholder=\"Write your note here...\"\n        rows=\"6\"\n        maxlength=\"1000\"\n        [disabled]=\"submitting()\">\n      </textarea>\n    </div>\n\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <button pButton label=\"Cancel\" icon=\"pi pi-times\"\n      class=\"p-button-outlined p-button-secondary p-button-sm\"\n      [disabled]=\"submitting()\"\n      (click)=\"closed.emit()\">\n    </button>\n    <button pButton label=\"Submit Note\"\n      [icon]=\"submitting() ? 'pi pi-spin pi-spinner' : 'pi pi-check'\"\n      class=\"p-button-sm sbd-note-submit\"\n      [disabled]=\"!message().trim() || submitting()\"\n      (click)=\"submit()\">\n    </button>\n  </ng-template>\n\n</p-dialog>\n", styles: [".and{display:flex;flex-direction:column;gap:20px;padding:4px 0}.and__field{display:flex;flex-direction:column;gap:8px}.and__label{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b}.and__char-count{font-size:11px;font-weight:500;text-transform:none;letter-spacing:0;color:#94a3b8}.and__type-group{display:flex;gap:8px}.and__type-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f8fafc;color:#64748b;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .15s ease}.and__type-btn .pi{font-size:13px}.and__type-btn:hover{border-color:#94a3b8;background:#f1f5f9;color:#334155}.and__type-btn--active{border-color:var(--sbd-primary, #3b82f6);background:#eff6ff;color:#1d4ed8}.and__type-btn--active:hover{border-color:#2563eb;background:#dbeafe}.and__textarea{width:100%;resize:vertical;padding:10px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13.5px;font-family:inherit;color:#1e2e4a;background:#fff;line-height:1.55;transition:border-color .15s ease;box-sizing:border-box}.and__textarea::placeholder{color:#94a3b8}.and__textarea:focus{outline:none;border-color:var(--sbd-primary, #3b82f6);box-shadow:0 0 0 3px color-mix(in srgb,var(--sbd-primary, #3b82f6) 10%,transparent)}.and__textarea:disabled{background:#f8fafc;color:#94a3b8;cursor:not-allowed}.sbd-note-submit{background:var(--sbd-primary, #007ad9);border-color:var(--sbd-primary, #007ad9)}.sbd-note-submit:enabled:hover{background:color-mix(in srgb,var(--sbd-primary, #007ad9) 88%,#000);border-color:color-mix(in srgb,var(--sbd-primary, #007ad9) 88%,#000)}\n"] }]
         }], ctorParameters: () => [] });
 
-class SbdHotelContentComponent {
+/**
+ * Port of the web's `FlightManageBookingService.navigateToOnlineBooking()`
+ * (almatar-consumer-apps) — builds the query params of
+ * `/flights/manage-booking/list`, where the web continues the reissue
+ * (search -> view-price -> choose-flight -> payment).
+ * Keep the param names/values identical to the web.
+ */
+const REISSUE_WEB_PATH = '/flights/manage-booking/list/';
+/** Same strings as the web's `FlightManageBookingAsideTabEnum`. */
+const SERVICE_NAME = {
+    change_date: 'change-travel-date-time',
+    change_route: 'change-flight-route',
+};
+// ── date helpers ────────────────────────────────────────────────────────────
+/** `moment.utc(str).valueOf()` — strings without a timezone are read as UTC. */
+function utcMs(value) {
+    const hasTz = /[zZ]$|[+-]\d{2}:?\d{2}$/.test(value);
+    return new Date(hasTz ? value : `${value}Z`).getTime();
+}
+/** Web's `getAbsoluteDate(date)` -> `YYYY-MM-DD` of the date part. */
+function dateOnly(value) {
+    return value.slice(0, 10);
+}
+/** Web's `getAbsoluteDate(date, true)` -> UTC midnight of that calendar day. */
+function absoluteMs(value) {
+    const [y, m, d] = dateOnly(value).split('-').map(Number);
+    return Date.UTC(y, m - 1, d);
+}
+function capitalize(value) {
+    return value ? value.charAt(0).toUpperCase() + value.slice(1).toLowerCase() : value;
+}
+// ── booking_info -> context ─────────────────────────────────────────────────
+function inferTripType(bi, legs) {
+    const explicit = bi?.IteneraryTripType;
+    if (explicit === 'OneWay' || explicit === 'RoundTrip' || explicit === 'MultiCity')
+        return explicit;
+    if (legs.length <= 1)
+        return 'OneWay';
+    if (legs.length === 2 && legs[1].direction === 'Return')
+        return 'RoundTrip';
+    return 'MultiCity';
+}
+function countPassengers(bi, type) {
+    const list = bi?.passenger_info?.passengers ?? [];
+    return list.filter(p => p?.type === type).length;
+}
+/**
+ * Normalizes the dashboard's `booking_info` (from `/v1/fcr/booking/information`)
+ * into what the URL builder needs. Reads defensively: any field missing in the
+ * BO response falls back to an empty value.
+ */
+function buildReissueBookingContext(bookingData, bookingId) {
+    const bi = bookingData?.data?.booking_info;
+    const legsRaw = bi?.leg_info ?? [];
+    if (!legsRaw.length)
+        return null;
+    const airline = bi?.airline_info ?? [];
+    const legs = legsRaw.map((l, i) => {
+        const segs = airline[i]?.Segments ?? [];
+        const first = segs[0] ?? {};
+        const last = segs[segs.length - 1] ?? first;
+        // Some bookings come back with a sparse `leg_info` — fall back to the
+        // first/last segment (airline_info, then duration/terminal) for the route and times.
+        const durSegs = bi?.duration?.legs?.[i]?.Segments ?? [];
+        const termSegs = bi?.terminal?.[i]?.Segments ?? [];
+        const firstAny = { ...(termSegs[0] ?? {}), ...(durSegs[0] ?? {}), ...first };
+        const lastAny = {
+            ...(termSegs[termSegs.length - 1] ?? {}),
+            ...(durSegs[durSegs.length - 1] ?? {}),
+            ...last,
+        };
+        const originCode = l.LegDepartureAirportCode ?? firstAny.DepartureAirportCode ?? firstAny.SegmentDepartureAirportCode ?? '';
+        const destinationCode = l.LegArrivalAirportCode ?? lastAny.ArrivalAirportCode ?? lastAny.SegmentArrivalAirportCode ?? '';
+        return {
+            // No id in the response -> a positional placeholder so the dialog still works.
+            legId: l.LegID ?? l.legId ?? l.LegId ?? `leg-${i}`,
+            direction: l.LegDirectionality ?? '',
+            originCode,
+            originName: l.LegDepartureAirportName ?? firstAny.DepartureAirportName ?? '',
+            originCityName: l.LegDepartureCityName ?? firstAny.SegmentDepartureCityName ?? firstAny.DepartureAirportName ?? originCode,
+            originCountryName: l.LegDepartureCountryName ?? firstAny.SegmentDepartureCountryName ?? '',
+            destinationCode,
+            destinationName: l.LegArrivalAirportName ?? lastAny.ArrivalAirportName ?? '',
+            destinationCityName: l.LegArrivalCityName ?? lastAny.SegmentArrivalCityName ?? lastAny.ArrivalAirportName ?? destinationCode,
+            destinationCountryName: l.LegArrivalCountryName ?? lastAny.SegmentArrivalCountryName ?? '',
+            departure: l.LegDepartureDateTime ?? firstAny.DepartureDateTime ?? firstAny.SegmentDepartureDateTime ?? firstAny.DepartureTime ?? '',
+            arrival: l.LegArrivalDateTime ?? lastAny.ArrivalDateTime ?? lastAny.SegmentArrivalDateTime ?? lastAny.ArrivalTime ?? '',
+            airline: (l.LegAirlinesNames ?? [])[0] ?? first.AirlineName ?? '',
+            stops: (l.Stops ?? []).length,
+            flightNo: first.AirlineCode ? `${first.AirlineCode}${first.FlightNumber ?? ''}` : '',
+        };
+    });
+    const firstLegRaw = legsRaw[0];
+    const firstSeg = airline[0]?.Segments?.[0] ?? {};
+    return {
+        bookingId: String(bookingId),
+        tripType: inferTripType(bi, legs),
+        legs,
+        adults: countPassengers(bi, 'ADT'),
+        children: countPassengers(bi, 'CNN'),
+        infants: countPassengers(bi, 'INF'),
+        // The BO response may carry no cabin at all (sparse bookings) — default so the web search still gets a class.
+        cabinName: firstLegRaw.LegCabins?.[0]?.Name ?? 'Economy',
+        cabinCode: firstLegRaw.LegCabins?.[0]?.Code ?? 'Y',
+        currency: bi?.currency ?? bi?.payment_status?.currency ?? '',
+        airlineCode: firstSeg.AirlineCode ?? '',
+        flightNumber: String(firstSeg.FlightNumber ?? ''),
+        airlineName: (firstLegRaw.LegAirlinesNames ?? [])[0] ?? firstSeg.AirlineName ?? '',
+        totalStops: (firstLegRaw.Stops ?? []).length,
+    };
+}
+// ── URL builder ─────────────────────────────────────────────────────────────
+function airportCityLabel(name, country, code) {
+    return `${name || code}${country ? ', ' + country : ''}(${code})`;
+}
+function otherLegOf(ctx, legId) {
+    const other = ctx.legs.find(l => l.legId !== legId);
+    return other
+        ? {
+            legId: other.legId,
+            departDateTime: other.departure,
+            destinationCode: other.destinationCode,
+            originCode: other.originCode,
+            isReturn: other.direction === 'Return',
+        }
+        : undefined;
+}
+function buildReissueSearchParams(rawCtx, selection, postBookingId) {
+    // The BO booking information may carry no leg dates at all. Without an original date the
+    // web's `departure` / `return` / `updatingLegs` would be NaN, so fall back to the date the
+    // agent picked (or today) — only affects sparse bookings; real ones have `LegDepartureDateTime`.
+    const fallbackDate = `${selection.legs.find(c => c.departDate)?.departDate ?? new Date().toLocaleDateString('en-CA')}T00:00:00`;
+    const ctx = {
+        ...rawCtx,
+        legs: rawCtx.legs.map(l => (l.departure ? l : { ...l, departure: fallbackDate })),
+    };
+    const isDate = selection.service === 'change_date';
+    const leg0 = ctx.legs[0];
+    const changes = selection.legs;
+    const legOf = (c) => ctx.legs.find(l => l.legId === c.legId) ?? leg0;
+    // `config.legs` in the web.
+    const legsPayload = changes.map(c => {
+        const orig = legOf(c);
+        if (isDate) {
+            return {
+                legId: c.legId,
+                ...(ctx.tripType === 'MultiCity' ? { touched: true } : {}),
+                departDateTime: dateOnly(c.departDate ?? orig.departure),
+                destinationCode: orig.destinationCode,
+                originCode: orig.originCode,
+            };
+        }
+        return {
+            legId: c.legId,
+            originCode: c.origin?.id ?? orig.originCode,
+            originCityName: c.origin?.city_name || c.origin?.name || orig.originCityName,
+            destinationCode: c.destination?.id ?? orig.destinationCode,
+            destinationCityName: c.destination?.city_name || c.destination?.name || orig.destinationCityName,
+            departDateTime: orig.departure,
+        };
+    });
+    // `routeConfig` in the web.
+    const first = changes[0];
+    const routeOrigin = !isDate ? first?.origin : undefined;
+    const routeDest = !isDate ? first?.destination : undefined;
+    const routeDeparture = isDate ? `${dateOnly(changes[0].departDate ?? leg0.departure)}T00:00:00` : undefined;
+    const routeReturn = isDate && changes.length > 1
+        ? `${dateOnly(changes[1].departDate ?? ctx.legs[1]?.departure ?? '')}T00:00:00`
+        : undefined;
+    const origin = routeOrigin?.id ?? leg0.originCode;
+    const destination = routeDest?.id ?? leg0.destinationCode;
+    const className = ctx.cabinName.toUpperCase().includes('ECONOMY')
+        ? capitalize(ctx.cabinName.replace(/\s+/g, ''))
+        : ctx.cabinName;
+    const params = {
+        flightSearchId: ctx.bookingId,
+        category: 'flights',
+        id: `${ctx.airlineCode}-${ctx.flightNumber}`,
+        origin,
+        originCity: routeOrigin
+            ? routeOrigin.name || `${routeOrigin.city_name}, ${routeOrigin.country_name}`
+            : airportCityLabel(leg0.originName, leg0.originCountryName, leg0.originCode),
+        originCityName: routeOrigin?.city_name ?? leg0.originCityName,
+        originCountryName: routeOrigin?.country_name ?? leg0.originCountryName,
+        destinationCityName: routeDest?.city_name ?? leg0.destinationCityName,
+        destinationCity: routeDest
+            ? routeDest.name || `${routeDest.city_name}, ${routeDest.country_name}`
+            : airportCityLabel(leg0.destinationName, leg0.destinationCountryName, leg0.destinationCode),
+        destinationCountryName: routeDest?.country_name ?? leg0.destinationCountryName,
+        destination,
+        departureFlightAirlines: ctx.airlineName,
+        adult: ctx.adults,
+        child: ctx.children,
+        lapinfant: ctx.infants,
+        class: className,
+        className: ctx.cabinCode,
+        departure: utcMs(routeDeparture ?? leg0.departure),
+        infantonchair: 0,
+        originType: routeOrigin?.type ?? 'city',
+        destinationType: routeDest?.type ?? 'city',
+        isDirect: 'false',
+        serviceName: SERVICE_NAME[selection.service],
+        currency: ctx.currency,
+        classType: ctx.cabinCode,
+        connection: ctx.tripType,
+        directFlights: ctx.totalStops === 0,
+        flexibleDates: false,
+        legs: JSON.stringify(legsPayload),
+        // Lets the results page show an "UPDATING NOW" banner per changed leg.
+        updatingLegs: JSON.stringify(changes.map(c => {
+            const o = legOf(c);
+            return {
+                legId: o.legId,
+                direction: o.direction,
+                originCode: o.originCode,
+                destinationCode: o.destinationCode,
+                originCityName: o.originCityName,
+                destinationCityName: o.destinationCityName,
+                originalDeparture: utcMs(o.departure),
+            };
+        })),
+    };
+    if (ctx.tripType === 'RoundTrip') {
+        const secondLeg = ctx.legs[1];
+        params['return'] = routeReturn
+            ? utcMs(routeReturn)
+            : secondLeg
+                ? utcMs(secondLeg.departure) // the web parses this one in the customer's timezone; read as UTC here so it doesn't depend on the agent's timezone
+                : utcMs(String(legsPayload[0].departDateTime));
+        if (changes.length === 1) {
+            const other = otherLegOf(ctx, changes[0].legId);
+            if (isDate && other && !other.isReturn) {
+                params['departure'] = utcMs(other.departDateTime);
+                params['return'] = utcMs(String(legsPayload[0].departDateTime));
+            }
+            if (other)
+                params['extraLeg'] = JSON.stringify(other);
+        }
+    }
+    if (ctx.tripType === 'MultiCity') {
+        let cities;
+        if (isDate) {
+            const changedDate = new Map(changes.map(c => [c.legId, c.departDate]));
+            cities = ctx.legs.map(l => ({
+                departure: absoluteMs(changedDate.get(l.legId) || l.departure),
+                destination: l.destinationCode,
+                destinationType: l.destinationCode,
+                origin: l.originCode,
+                originType: l.originCode,
+                destinationCity: l.destinationCityName,
+                destinationCityName: l.destinationCityName,
+                destinationName: l.destinationCityName,
+                destinationCountryName: l.destinationCountryName,
+                originCity: l.originCityName,
+                originCityName: l.originCityName,
+                originName: l.originCityName,
+                originCountryName: l.originCountryName,
+            }));
+        }
+        else {
+            cities = changes.map(c => {
+                const o = legOf(c);
+                const from = c.origin;
+                const to = c.destination;
+                return {
+                    departure: utcMs(o.departure),
+                    destination: to?.id ?? o.destinationCode,
+                    destinationType: to?.type ?? o.destinationCode,
+                    origin: from?.id ?? o.originCode,
+                    originType: from?.id ?? o.originCode,
+                    destinationCity: to?.name ?? o.destinationCityName,
+                    destinationCityName: to?.name ?? o.destinationCityName,
+                    destinationName: to?.name ?? o.destinationCityName,
+                    destinationCountryName: to?.country_name ?? o.destinationCountryName,
+                    originCity: from?.name ?? o.originCityName,
+                    originCityName: from?.name ?? o.originCityName,
+                    originName: from?.name ?? o.originCityName,
+                    originCountryName: from?.country_name ?? o.originCountryName,
+                };
+            });
+        }
+        params['departure'] = cities[0].departure;
+        params['cities'] = JSON.stringify(cities);
+    }
+    params['bookingId'] = ctx.bookingId;
+    params['postBookingId'] = postBookingId;
+    return Object.fromEntries(Object.entries(params)
+        .filter(([, v]) => v !== undefined && v !== null)
+        .map(([k, v]) => [k, String(v)]));
+}
+function buildReissueSearchUrl(webBaseUrl, ctx, selection, postBookingId) {
+    const qs = new URLSearchParams(buildReissueSearchParams(ctx, selection, postBookingId));
+    return `${webBaseUrl.replace(/\/+$/, '')}${REISSUE_WEB_PATH}?${qs.toString()}`;
+}
+/**
+ * Adds the host's auth parameters (for example its token) to the web link: in the query string, or in the `#fragment`
+ * (which browsers do not send to servers or in the Referer). Empty values are skipped.
+ */
+function appendAuthParams(url, params, where = 'query') {
+    const entries = Object.entries(params ?? {}).filter(([, value]) => !!value);
+    if (!entries.length)
+        return url;
+    const target = new URL(url);
+    if (where === 'hash') {
+        const hash = new URLSearchParams(target.hash.replace(/^#/, ''));
+        entries.forEach(([name, value]) => hash.set(name, value));
+        target.hash = hash.toString();
+    }
+    else {
+        entries.forEach(([name, value]) => target.searchParams.set(name, value));
+    }
+    return target.toString();
+}
+
+/**
+ * Query params the web always sends on `create-post-booking` (`getEntrySourceDeviceBrand()`): where the flow started
+ * and on which device. Same defaults as the web; ask the backend which values BO should send.
+ */
+const POST_BOOKING_PARAMS = { entrySource: 'navigation bar', device: 'web' };
+/**
+ * Reissue APIs — the same endpoints the consumer web uses (the backend opens them for BO).
+ */
+class SbdReissueService {
     constructor() {
-        // Inputs
-        this.bookingData = input.required();
-        this.bookingStatus = input.required();
-        this.bookingId = input.required();
-        this.dataVerified = input.required();
-        this.bookingNotes = input.required();
-        this.bookingHistory = input.required();
-        this.historyGroups = input.required();
-        this.activeContextTab = input.required();
+        this.http = inject(HttpClient);
+        this.config = inject(SBD_CONFIG);
+        this.base = this.config.apiBase;
+    }
+    get headers() {
+        return { platform: this.config.platform };
+    }
+    /** `POST /v2/manage-booking/flight/create-post-booking/{bookingId}` -> `postBookingId`. */
+    createPostBooking(bookingId) {
+        return this.http
+            .post(`${this.base}/v2/manage-booking/flight/create-post-booking/${bookingId}`, null, // the web sends no body on this call
+        { headers: this.headers, params: POST_BOOKING_PARAMS })
+            .pipe(map(res => res?.data?.postBookingId ?? ''));
+    }
+    /** `GET /v3/manage-booking/flight/reissue/availability/{bookingId}/{postBookingId}` -> `data.legs[]`. */
+    getAvailability(bookingId, postBookingId, ctx) {
+        return this.http.get(`${this.base}/v3/manage-booking/flight/reissue/availability/${bookingId}/${postBookingId}`, { headers: this.headers });
+    }
+    /**
+     * `POST /v3/manage-booking/flight/reissue/upgrade-class/{bookingId}/{postBookingId}` — same call (and body) the
+     * web makes to decide whether the "Upgrade Class" option is shown. Returns the unwrapped `data`.
+     */
+    getUpgradeClassOptions(bookingId, postBookingId, ctx) {
+        const body = {
+            serviceName: 'change-flight-class',
+            legs: ctx.legs.map(l => ({
+                legId: l.legId,
+                legDepartureAirportCode: l.originCode,
+                legArrivalAirportCode: l.destinationCode,
+                legDepartureDate: l.departure,
+            })),
+        };
+        return this.http
+            .post(`${this.base}/v3/manage-booking/flight/reissue/upgrade-class/${bookingId}/${postBookingId}`, body, { headers: this.headers })
+            .pipe(map(res => (res?.data ?? res) ?? null));
+    }
+    /** Same rule as the web's `hasUpgradeOptions()`: at least one option in any section. */
+    hasUpgradeOptions(data) {
+        if (!data)
+            return false;
+        if (data.fareOptionScope === 'leg')
+            return (data.legs ?? []).some(l => (l.options?.length ?? 0) > 0);
+        return (data.options?.length ?? 0) > 0;
+    }
+    /**
+     * Airport picker for Change Route. Same typeahead endpoint the web and the backoffice already use
+     * (`StaticDataService.getAirports`) — no extra backend work needed. Response: `data[].items[].items[]`.
+     * An empty term makes no request (the dialog lists the booking's own airports meanwhile).
+     */
+    searchAirports(term) {
+        const q = term.trim();
+        if (!q)
+            return of([]);
+        return this.http
+            .get(`${this.base}/v1/typeahead-search-service/suggestion/suggest/flights`, { params: { q }, headers: this.headers })
+            .pipe(map(res => {
+            const out = [];
+            for (const group of res?.data ?? []) {
+                for (const item of group.items ?? []) {
+                    if (item.items)
+                        out.push(...item.items);
+                }
+            }
+            return out.map(a => ({
+                id: a.id,
+                name: a.name,
+                city_name: a.city_name,
+                country_name: a.country_name,
+                type: a.type === 'airport' ? 'airport' : 'city',
+            }));
+        }), catchError$1(() => of([])));
+    }
+    // ── Upgrade Class ──────────────────────────────────────────────────────────
+    /**
+     * `POST /v3/manage-booking/flight/reissue/choose-flight/{bookingId}/{postBookingId}` — prices the chosen upgrade
+     * option. Same endpoint/body the web uses; response `data` carries `itineraryAvailable`, `priceChanged`, `price`, `currency`.
+     */
+    chooseFlight(bookingId, postBookingId, body) {
+        return this.http
+            .post(`${this.base}/v3/manage-booking/flight/reissue/choose-flight/${bookingId}/${postBookingId}`, body, { headers: this.headers })
+            .pipe(map(res => res?.data ?? {}));
+    }
+    /** `POST /v2/manage-booking/flight/book-now` — places a zero-total reissue (no payment needed). */
+    bookNow(postBookingId) {
+        return this.http.post(`${this.base}/v2/manage-booking/flight/book-now`, { postBookingId }, { headers: this.headers });
+    }
+    /**
+     * Payment link of a reissue with an amount to pay. There is no separate API: the backend puts the link in the
+     * cart of the post-booking (`GET /v2/manage-booking/flight/cart/{postBookingId}`, the call the web checkout reads).
+     * The name of the field is not final yet: the first of the names below that exists is used, and the call fails
+     * with a clear message when the cart has none.
+     */
+    getPaymentLink(postBookingId, amount = 0, currency = '') {
+        return this.http
+            .get(`${this.base}/v2/manage-booking/flight/cart/${postBookingId}`, {
+            headers: this.headers,
+        })
+            .pipe(map(res => {
+            const cart = res?.data ?? {};
+            let url = cart['paymentLink'] ?? cart['link'] ?? cart['payment']?.link ?? cart['payment']?.paymentLink ?? cart['payment']?.url;
+            if (!url)
+                throw new Error('The cart has no payment link yet.');
+            // The cart returns only a path ("/<paymentId>"): the customer page base comes from the host config.
+            if (!/^https?:\/\//i.test(url)) {
+                const linkBase = this.config.paymentLinkBase?.replace(/\/+$/, '');
+                if (!linkBase) {
+                    throw new Error(`The cart returned a relative link (${url}) and no paymentLinkBase is configured.`);
+                }
+                url = `${linkBase}${url.startsWith('/') ? '' : '/'}${url}`;
+            }
+            return {
+                url,
+                amount: cart['payment']?.amount ?? amount,
+                currency: cart['payment']?.currency ?? currency,
+                expiresAt: cart['payment']?.expiryDate ?? cart['expiryDate'],
+            };
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** Today as `YYYY-MM-DD` in the agent's timezone (what `<input type="date">` compares against). */
+function todayIso() {
+    return new Date().toLocaleDateString('en-CA');
+}
+function formatReissueDate(value) {
+    if (!value)
+        return '—';
+    const date = new Date(value);
+    return Number.isNaN(date.getTime())
+        ? value
+        : date.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
+}
+/**
+ * Expiry of the payment link as epoch ms. The backend sends `YYYY-MM-DD HH:mm:ss` with no timezone, read as UTC (to
+ * be confirmed with the backend); a value that carries `Z` or an offset is read as it is. `null` when missing/invalid.
+ */
+function parseLinkExpiry(value) {
+    if (!value)
+        return null;
+    const hasZone = /(Z|[+-]\d{2}:?\d{2})$/i.test(value.trim());
+    const ms = Date.parse(hasZone ? value : `${value.trim().replace(' ', 'T')}Z`);
+    return Number.isNaN(ms) ? null : ms;
+}
+/** `mm:ss` (or `h:mm:ss` from one hour up) for a countdown. */
+function formatCountdown(ms) {
+    const total = Math.max(0, Math.floor(ms / 1000));
+    const h = Math.floor(total / 3600);
+    const m = Math.floor((total % 3600) / 60);
+    const s = total % 60;
+    const pad = (n) => String(n).padStart(2, '0');
+    return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;
+}
+function legTitle(leg) {
+    return `${leg.direction || 'Leg'} · ${leg.originCode} → ${leg.destinationCode}`;
+}
+function airportOf(id, name, city, country) {
+    return { id, name: name || city || id, city_name: city || id, country_name: country, type: 'airport' };
+}
+const originAirport = (l) => airportOf(l.originCode, l.originName, l.originCityName, l.originCountryName);
+const destinationAirport = (l) => airportOf(l.destinationCode, l.destinationName, l.destinationCityName, l.destinationCountryName);
+const compareAirports = (a, b) => a?.id === b?.id;
+function formatMoney(amount, currency) {
+    return `${amount.toLocaleString('en-US', { maximumFractionDigits: 2 })} ${currency}`.trim();
+}
+/** `21 Oct` — same short date the cancel dialog shows on a leg card. */
+function formatShortDate(value) {
+    if (!value)
+        return '—';
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? value : date.toLocaleDateString('en-GB', { day: '2-digit', month: 'short' });
+}
+/** `01:55` straight from the `YYYY-MM-DDTHH:mm:ss` string (no timezone conversion). */
+function formatTime(value) {
+    return value && value.length >= 16 && value[10] === 'T' ? value.slice(11, 16) : '—';
+}
+/**
+ * The leg already departed. The booking gives no timezone for `LegDepartureDateTime` (airport local time), so this
+ * compares with the agent's clock: it can be off by a few hours on the day of the flight, never by a day.
+ */
+function isLegFlown(leg) {
+    const time = leg.departure ? Date.parse(leg.departure) : NaN;
+    return !Number.isNaN(time) && time < Date.now();
+}
+
+function buildLegRow(leg, available, selected, unavailableReason = 'offline') {
+    const flown = isLegFlown(leg);
+    return {
+        leg,
+        direction: leg.direction,
+        from: leg.originCode,
+        to: leg.destinationCode,
+        dateLabel: formatShortDate(leg.departure),
+        depTime: formatTime(leg.departure),
+        arrTime: formatTime(leg.arrival),
+        stopsLabel: leg.stops > 0 ? `${leg.stops} stop${leg.stops > 1 ? 's' : ''}` : 'Direct',
+        airlineLine: [leg.airline, leg.flightNo].filter(Boolean).join(' · '),
+        flown,
+        available: available && !flown,
+        reason: flown ? 'flown' : available ? null : unavailableReason,
+        selected: selected && !flown,
+    };
+}
+const START_ERROR = 'Could not start the reissue request.';
+const AVAILABILITY_ERROR = 'Could not check availability for this booking.';
+/** `base (HTTP 500: message from the backend)` — so the agent (and we, while the APIs are new) can see why it failed. */
+function describeHttpError(base, e) {
+    const err = e;
+    // The backend sends both: `error` (the real reason, e.g. "Unauthorized!") and a generic `message`.
+    const body = typeof err?.error === 'string' ? [err.error] : [err?.error?.error, err?.error?.message];
+    const text = body.filter(Boolean).join(' — ').slice(0, 200);
+    const detail = [err?.status ? `HTTP ${err.status}` : '', text].filter(Boolean).join(': ');
+    return detail ? `${base} (${detail})` : base;
+}
+/**
+ * State + rules of the Reissue dialog (one instance per dialog, provided by the dialog component).
+ * The step components are presentational: they get view models from here through the dialog shell.
+ */
+class SbdReissueStore {
+    constructor() {
+        this.api = inject(SbdReissueService);
+        this.config = inject(SBD_CONFIG);
+        this.today = todayIso();
+        // ── state ─────────────────────────────────────────────────────────────────
+        this.booking = signal(null);
+        this.step = signal('service');
+        this.loading = signal(false);
+        this.error = signal(null);
+        this.postBookingId = signal('');
+        this.service = signal(null);
+        /** Raw upgrade-class response; `null` when not loaded / not offered. Read by `SbdReissueUpgradeStore`. */
+        this.upgradeOptions = signal(null);
+        this.upgradeAvailable = computed(() => this.api.hasUpgradeOptions(this.upgradeOptions()));
+        this.availableIds = signal(new Set());
+        /** The availability call answered (so "no leg available" is a real answer, not "still loading"). */
+        this.availabilityLoaded = signal(false);
+        this.selectedLegIds = signal([]);
+        /** The "select flight" step was skipped (one-way): Back from the edit step returns to the service list. */
+        this.legsStepSkipped = signal(false);
+        this.dateEdits = signal({});
+        this.routeEdits = signal({});
+        this.searchedAirports = signal([]);
+        this.load$ = new Subject();
+        this.airportTerm$ = new Subject();
+        // ── derived ───────────────────────────────────────────────────────────────
+        this.ctx = computed(() => {
+            const b = this.booking();
+            return b ? buildReissueBookingContext(b.data, b.id) : null;
+        });
+        this.legs = computed(() => this.ctx()?.legs ?? []);
+        this.selectedSet = computed(() => new Set(this.selectedLegIds()));
+        this.selectedLegs = computed(() => this.legs().filter(l => this.selectedSet().has(l.legId)));
+        this.legRows = computed(() => this.legs().map(leg => buildLegRow(leg, this.availableIds().has(leg.legId), this.selectedSet().has(leg.legId))));
+        /** `false` = a round trip must be upgraded as a whole (availability's `allowCustomerToSelectSingleLeg`). */
+        this.allowSingleLegSelection = signal(true);
+        this.anyAvailable = computed(() => this.legRows().some(r => r.available));
+        /**
+         * No leg can be reissued online (offline, or already flown): the dialog shows this message instead of the options,
+         * like the cancel dialog does for a booking it cannot auto-cancel. `null` while loading or when any leg is available.
+         */
+        this.blocked = computed(() => {
+            const rows = this.legRows();
+            if (!this.availabilityLoaded() || !rows.length || rows.some(r => r.available))
+                return null;
+            return rows.every(r => r.flown)
+                ? { title: 'All flights of this booking have already departed.', text: 'There is nothing left to reissue.' }
+                : {
+                    title: 'This booking doesn’t support online reissue.',
+                    text: 'Please escalate to the relevant team for manual handling.',
+                };
+        });
+        this.canContinue = computed(() => this.selectedLegIds().length > 0);
+        /** A leg's date after the change: the new one when the agent is changing it, the original otherwise. */
+        this.dateRows = computed(() => {
+            const legs = this.legs();
+            const selected = this.selectedSet();
+            const edits = this.dateEdits();
+            const effective = (l) => (selected.has(l.legId) ? (edits[l.legId] ?? '') : l.departure.slice(0, 10));
+            return legs.flatMap((leg, i) => {
+                if (!selected.has(leg.legId))
+                    return [];
+                const prev = i > 0 ? effective(legs[i - 1]) : '';
+                return [
+                    {
+                        leg,
+                        title: legTitle(leg),
+                        current: formatReissueDate(leg.departure),
+                        value: edits[leg.legId] ?? '',
+                        // Never before today or the previous leg; never after the next leg (same day is fine).
+                        min: prev > this.today ? prev : this.today,
+                        max: i < legs.length - 1 ? effective(legs[i + 1]) : '',
+                    },
+                ];
+            });
+        });
+        this.routeRows = computed(() => {
+            const edits = this.routeEdits();
+            return this.selectedLegs().map(leg => ({
+                leg,
+                title: legTitle(leg),
+                current: formatReissueDate(leg.departure),
+                origin: edits[leg.legId]?.origin ?? originAirport(leg),
+                destination: edits[leg.legId]?.destination ?? destinationAirport(leg),
+            }));
+        });
+        this.airportOptions = computed(() => {
+            const byId = new Map();
+            // Order matters (later wins): the booking's own airports, the search results, then what is already picked.
+            for (const l of this.legs()) {
+                byId.set(l.originCode, originAirport(l));
+                byId.set(l.destinationCode, destinationAirport(l));
+            }
+            for (const a of this.searchedAirports())
+                byId.set(a.id, a);
+            for (const e of Object.values(this.routeEdits())) {
+                byId.set(e.origin.id, e.origin);
+                byId.set(e.destination.id, e.destination);
+            }
+            return [...byId.values()].map(a => ({ ...a, label: `${a.city_name} (${a.id}) – ${a.name}` }));
+        });
+        this.validationError = computed(() => {
+            const service = this.service();
+            if (!service || !this.selectedLegIds().length)
+                return 'Select at least one leg.';
+            if (service === 'change_date') {
+                for (const { leg, value, min, max } of this.dateRows()) {
+                    const who = leg.direction || 'This leg';
+                    if (!value)
+                        return 'Pick a new date for every selected leg.';
+                    if (value < this.today)
+                        return 'The new date cannot be in the past.';
+                    if (value < min)
+                        return `${who} cannot depart before the previous flight (${min}).`;
+                    if (max && value > max)
+                        return `${who} cannot depart after the next flight (${max}).`;
+                }
+                return null;
+            }
+            let changed = false;
+            for (const { leg, origin, destination } of this.routeRows()) {
+                if (origin.id === destination.id)
+                    return 'Origin and destination must be different.';
+                if (origin.id !== leg.originCode || destination.id !== leg.destinationCode)
+                    changed = true;
+            }
+            return changed ? null : 'Change at least one airport.';
+        });
+        this.load$.pipe(switchMap(() => this.loadFlow()), takeUntilDestroyed()).subscribe();
+        // Debounced typeahead: one request per pause in typing, older in-flight ones are dropped.
+        this.airportTerm$
+            .pipe(debounceTime(250), distinctUntilChanged(), switchMap(term => this.api.searchAirports(term)), takeUntilDestroyed())
+            .subscribe(list => this.searchedAirports.set(list));
+    }
+    /** The leg came back online from the availability check. */
+    isLegOnline(legId) {
+        return this.availableIds().has(legId);
+    }
+    // ── actions ───────────────────────────────────────────────────────────────
+    /** (Re)starts the dialog for a booking: clears every choice, then loads post-booking + availability. */
+    open(data, id) {
+        this.booking.set({ data, id });
+        this.step.set('service');
+        this.service.set(null);
+        this.selectedLegIds.set([]);
+        this.dateEdits.set({});
+        this.routeEdits.set({});
+        this.searchedAirports.set([]);
+        this.postBookingId.set('');
+        this.availableIds.set(new Set());
+        this.availabilityLoaded.set(false);
+        this.upgradeOptions.set(null);
+        this.load();
+    }
+    load() {
+        this.load$.next();
+    }
+    chooseService(service) {
+        if (this.loading() || this.error())
+            return;
+        this.service.set(service);
+        // A one-way with its only leg online has nothing to choose: skip "select flight" and go straight to editing.
+        // (An offline one-way still shows the step, so the agent sees why it cannot be changed.)
+        const rows = this.legRows();
+        if (rows.length === 1 && rows[0].available) {
+            this.selectedLegIds.set([rows[0].leg.legId]);
+            this.legsStepSkipped.set(true);
+            this.goToEdit();
+            return;
+        }
+        this.legsStepSkipped.set(false);
+        this.selectedLegIds.set([]);
+        this.step.set('legs');
+    }
+    toggleLeg(legId) {
+        if (!this.availableIds().has(legId))
+            return;
+        this.selectedLegIds.update(ids => (ids.includes(legId) ? ids.filter(i => i !== legId) : [...ids, legId]));
+    }
+    /** Legs -> edit: seed each selected leg with its current date / airports. */
+    goToEdit() {
+        if (!this.canContinue())
+            return;
+        if (this.service() === 'change_date') {
+            this.dateEdits.update(edits => {
+                const next = { ...edits };
+                for (const l of this.selectedLegs())
+                    next[l.legId] ??= l.departure.slice(0, 10);
+                return next;
+            });
+        }
+        else {
+            this.routeEdits.update(edits => {
+                const next = { ...edits };
+                for (const l of this.selectedLegs()) {
+                    next[l.legId] ??= { origin: originAirport(l), destination: destinationAirport(l) };
+                }
+                return next;
+            });
+        }
+        this.step.set('edit');
+    }
+    goTo(step) {
+        this.step.set(step);
+    }
+    back() {
+        const previous = {
+            service: 'service',
+            legs: 'service',
+            edit: this.legsStepSkipped() ? 'service' : 'legs',
+            'upgrade-legs': 'service',
+            upgrade: 'service', // the upgrade store overrides this when the leg step was shown
+            confirm: 'upgrade',
+        };
+        this.step.update(s => previous[s]);
+    }
+    setDate(legId, date) {
+        this.dateEdits.update(edits => ({ ...edits, [legId]: date }));
+    }
+    setAirport(legId, side, airport) {
+        if (!airport)
+            return;
+        const current = this.routeRows().find(r => r.leg.legId === legId);
+        if (!current)
+            return;
+        this.routeEdits.update(edits => ({
+            ...edits,
+            [legId]: { origin: current.origin, destination: current.destination, [side]: airport },
+        }));
+    }
+    /** Swaps a leg's origin and destination (the arrow between the two pickers). */
+    swapAirports(legId) {
+        const current = this.routeRows().find(r => r.leg.legId === legId);
+        if (!current)
+            return;
+        this.routeEdits.update(edits => ({
+            ...edits,
+            [legId]: { origin: current.destination, destination: current.origin },
+        }));
+    }
+    searchAirports(term) {
+        this.airportTerm$.next(term ?? '');
+    }
+    /** The web search URL for the current choices, or `null` when they are not valid yet. */
+    searchUrl() {
+        const ctx = this.ctx();
+        const service = this.service();
+        if (!ctx || !service || service === 'upgrade_class' || this.validationError())
+            return null;
+        const selection = {
+            service,
+            legs: service === 'change_date'
+                ? this.dateRows().map(r => ({ legId: r.leg.legId, departDate: r.value }))
+                : this.routeRows().map(r => ({ legId: r.leg.legId, origin: r.origin, destination: r.destination })),
+        };
+        return buildReissueSearchUrl(this.config.webBaseUrl, ctx, selection, this.postBookingId());
+    }
+    // ── loading: post-booking -> availability -> upgrade options (once per dialog visit) ─────────
+    loadFlow() {
+        const ctx = this.ctx();
+        if (!ctx) {
+            this.error.set('This booking has no leg data to reissue.');
+            return EMPTY;
+        }
+        this.loading.set(true);
+        this.error.set(null);
+        return this.api.createPostBooking(ctx.bookingId).pipe(switchMap(postBookingId => {
+            if (!postBookingId)
+                return throwError(() => START_ERROR);
+            this.postBookingId.set(postBookingId);
+            return this.api.getAvailability(ctx.bookingId, postBookingId, ctx).pipe(catchError$1(e => throwError(() => describeHttpError(AVAILABILITY_ERROR, e))), tap(res => {
+                // A leg that already flew can never be changed, whatever availability says: treat it as offline.
+                const flown = new Set(ctx.legs.filter(isLegFlown).map(l => l.legId));
+                this.availableIds.set(new Set((res?.data?.legs ?? []).filter(l => l.available && !flown.has(l.legId)).map(l => l.legId)));
+                this.allowSingleLegSelection.set(res?.data?.allowCustomerToSelectSingleLeg ?? true);
+                this.availabilityLoaded.set(true);
+            }), switchMap(() => this.offersUpgrade(ctx.tripType, ctx.legs, postBookingId)));
+        }), tap(options => {
+            this.upgradeOptions.set(options);
+            this.loading.set(false);
+        }), catchError$1((e) => {
+            this.error.set(typeof e === 'string' ? e : describeHttpError(START_ERROR, e));
+            this.loading.set(false);
+            return EMPTY;
+        }));
+    }
+    /**
+     * The upgrade-class options (same rule as the web for listing "Upgrade Class"): skipped for a one-way whose
+     * only leg is offline; a failing call just yields `null` (option hidden) instead of blocking the dialog.
+     */
+    offersUpgrade(tripType, legs, postBookingId) {
+        const ctx = this.ctx();
+        const oneWayOffline = tripType === 'OneWay' && !this.availableIds().has(legs[0]?.legId);
+        if (!ctx || !legs.length || oneWayOffline)
+            return of(null);
+        return this.api
+            .getUpgradeClassOptions(ctx.bookingId, postBookingId, ctx)
+            .pipe(catchError$1(() => of(null)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueStore }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueStore, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+const extraOf = (o) => o.fareDetails?.totalAdditionalFare ?? o.priceDifference ?? 0;
+const routeOf = (l) => `${l.origin} → ${l.destination}`;
+const currentOf = (l) => {
+    if (!l)
+        return '';
+    const cabin = [l.class, l.fareBrand?.name].filter(Boolean).join(' · ');
+    return cabin ? `Current: ${cabin}` : '';
+};
+/**
+ * Upgrade Class flow: pick the new class -> price it (choose-flight) -> confirm (book-now when nothing to pay,
+ * otherwise a backend-generated payment link). Reads the options the main store already loaded.
+ */
+class SbdReissueUpgradeStore {
+    constructor() {
+        this.main = inject(SbdReissueStore);
+        this.api = inject(SbdReissueService);
+        this.destroyRef = inject(DestroyRef);
+        this.submitting = signal(false);
+        this.error = signal(null);
+        this.priceChanged = signal(false);
+        /** `book-now` succeeded (nothing to pay): the reissue is being placed with the supplier. */
+        this.booked = signal(false);
+        this.paymentLink = signal(null);
+        this.selected = signal({}); // sectionId -> referenceKey
+        this.unavailableKeys = signal(new Set());
+        /** Legs the agent chose to upgrade (the "select leg" step; a one-way preselects its only leg). */
+        this.legIds = signal([]);
+        /** Options fetched for a partial leg selection; `null` = the options loaded when the dialog opened (all legs) apply. */
+        this.freshOptions = signal(null);
+        this.legsStepSkipped = signal(false);
+        // ── derived ───────────────────────────────────────────────────────────────
+        this.currency = computed(() => this.main.ctx()?.currency ?? '');
+        /** The options to show: for a partial leg selection the fresh response, otherwise the one loaded with the dialog. */
+        this.options = computed(() => this.freshOptions() ?? this.main.upgradeOptions());
+        this.legRows = computed(() => {
+            const chosen = new Set(this.legIds());
+            return this.main
+                .legs()
+                .map((leg, i) => buildLegRow(leg, this.legUpgradable(leg.legId, i), chosen.has(leg.legId), this.main.isLegOnline(leg.legId) ? 'no-options' : 'offline'));
+        });
+        this.anyLegUpgradable = computed(() => this.legRows().some(r => r.available));
+        this.canContinueFromLegs = computed(() => this.legIds().length > 0 && !this.submitting());
+        /** Legs the options on screen were requested for (all of them, or just the selected ones after a partial fetch). */
+        this.optionLegs = computed(() => {
+            const all = this.main.legs();
+            return this.freshOptions() ? all.filter(l => this.legIds().includes(l.legId)) : all;
+        });
+        this.rawSections = computed(() => {
+            const data = this.options();
+            if (!data)
+                return [];
+            if (data.fareOptionScope === 'leg') {
+                return (data.legs ?? []).map(leg => ({
+                    id: String(leg.legIndex),
+                    title: routeOf({ origin: leg.origin ?? leg.existingLeg.origin, destination: leg.destination ?? leg.existingLeg.destination }),
+                    current: currentOf(leg.existingLeg),
+                    options: leg.options ?? [],
+                }));
+            }
+            const originals = data.existingLegs ?? data.originalLegs ?? [];
+            return [
+                {
+                    id: 'booking',
+                    title: originals.map(routeOf).join(' · ') || 'Whole booking',
+                    current: currentOf(originals[0]),
+                    options: data.options ?? [],
+                },
+            ];
+        });
+        this.sections = computed(() => {
+            const selected = this.selected();
+            const unavailable = this.unavailableKeys();
+            const currency = this.currency();
+            return this.rawSections().map(s => ({
+                id: s.id,
+                title: s.title,
+                current: s.current,
+                options: s.options.map(o => {
+                    const extra = extraOf(o);
+                    return {
+                        key: o.referenceKey,
+                        name: o.name,
+                        code: o.code,
+                        extraLabel: extra > 0 ? `+${formatMoney(extra, currency)}` : 'No extra cost',
+                        selected: selected[s.id] === o.referenceKey,
+                        unavailable: unavailable.has(o.referenceKey),
+                    };
+                }),
+            }));
+        });
+        this.picks = computed(() => {
+            const selected = this.selected();
+            return this.rawSections().flatMap(section => {
+                const option = section.options.find(o => o.referenceKey === selected[section.id]);
+                return option ? [{ section, option }] : [];
+            });
+        });
+        this.canContinue = computed(() => this.picks().length > 0 && !this.submitting());
+        /**
+         * Amount to pay: the sum of the picked options' additional fare (same as the web's `getTotalToPay`).
+         * choose-flight's own `price` is deliberately not used — it is not known whether it is the difference or the full fare.
+         */
+        this.total = computed(() => this.picks().reduce((sum, p) => sum + extraOf(p.option), 0));
+        this.totalLabel = computed(() => (this.total() > 0 ? formatMoney(this.total(), this.currency()) : 'Nothing to pay'));
+        this.summary = computed(() => this.picks().map(({ section, option }) => ({
+            title: section.title,
+            from: section.current.replace(/^Current:\s*/, ''),
+            to: option.name,
+            extraLabel: extraOf(option) > 0 ? `+${formatMoney(extraOf(option), this.currency())}` : 'No extra cost',
+        })));
+        this.action = computed(() => {
+            if (this.booked() || this.paymentLink())
+                return 'done';
+            return this.total() > 0 ? 'link' : 'book';
+        });
+        /** Nothing can be changed any more once the upgrade is placed or a link was generated. */
+        this.locked = computed(() => this.booked() || !!this.paymentLink() || this.submitting());
+        // A fresh options response (new dialog visit / retry) starts the flow over.
+        effect(() => {
+            this.main.upgradeOptions();
+            untracked(() => this.reset());
+        }, { allowSignalWrites: true });
+    }
+    // ── leg selection ─────────────────────────────────────────────────────────
+    /** A leg can be upgraded only if it is online AND has upgrade options (per leg for leg scope; booking scope applies to all). */
+    legUpgradable(legId, index) {
+        if (!this.main.isLegOnline(legId))
+            return false;
+        const data = this.main.upgradeOptions();
+        if (!data)
+            return false;
+        if (data.fareOptionScope === 'leg') {
+            return (data.legs?.find(l => l.legIndex === index)?.options?.length ?? 0) > 0;
+        }
+        return (data.options?.length ?? 0) > 0;
+    }
+    // ── actions ───────────────────────────────────────────────────────────────
+    /**
+     * Service picked: go to "select leg", unless there is nothing to choose (one-way with its only leg upgradable),
+     * which goes straight to the options like the web.
+     */
+    start() {
+        if (this.main.loading() || this.main.error())
+            return;
+        this.main.service.set('upgrade_class');
+        this.freshOptions.set(null);
+        this.selected.set({});
+        this.error.set(null);
+        const upgradable = this.legRows().filter(r => r.available);
+        if (this.legRows().length === 1 && upgradable.length === 1) {
+            this.legIds.set([upgradable[0].leg.legId]);
+            this.legsStepSkipped.set(true);
+            this.main.goTo('upgrade');
+            return;
+        }
+        this.legsStepSkipped.set(false);
+        // "Upgrade as a whole" bookings: every upgradable leg is preselected and cannot be unticked.
+        this.legIds.set(this.main.allowSingleLegSelection() ? [] : upgradable.map(r => r.leg.legId));
+        this.main.goTo('upgrade-legs');
+    }
+    toggleLeg(legId) {
+        const row = this.legRows().find(r => r.leg.legId === legId);
+        if (!row?.available || !this.main.allowSingleLegSelection())
+            return;
+        this.error.set(null);
+        this.legIds.update(ids => (ids.includes(legId) ? ids.filter(i => i !== legId) : [...ids, legId]));
+    }
+    /**
+     * Select leg -> options. All legs selected: reuse the options loaded with the dialog. A subset: fetch the options
+     * again for just those legs (the earlier response covers the whole booking, so it would price the wrong legs).
+     */
+    continueFromLegs() {
+        const ctx = this.main.ctx();
+        const chosen = this.main.legs().filter(l => this.legIds().includes(l.legId));
+        if (!ctx || !chosen.length || !this.canContinueFromLegs())
+            return;
+        this.selected.set({});
+        this.unavailableKeys.set(new Set());
+        if (chosen.length === this.main.legs().length) {
+            this.freshOptions.set(null);
+            this.main.goTo('upgrade');
+            return;
+        }
+        this.submitting.set(true);
+        this.error.set(null);
+        this.api
+            .getUpgradeClassOptions(ctx.bookingId, this.main.postBookingId(), { ...ctx, legs: chosen })
+            .pipe(finalize(() => this.submitting.set(false)), takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: data => {
+                if (!this.api.hasUpgradeOptions(data)) {
+                    this.error.set('No upgrade is available for the selected flight(s).');
+                    return;
+                }
+                this.freshOptions.set(data);
+                this.main.goTo('upgrade');
+            },
+            error: () => this.error.set('Could not load the upgrade options for the selected flight(s).'),
+        });
+    }
+    /** Back from the options: to "select leg" when that step was shown, otherwise to the service list. */
+    back() {
+        this.main.goTo(this.legsStepSkipped() ? 'service' : 'upgrade-legs');
+    }
+    select(sectionId, key) {
+        if (this.unavailableKeys().has(key))
+            return;
+        this.error.set(null);
+        this.selected.update(s => ({ ...s, [sectionId]: key }));
+    }
+    /** Options -> confirm: prices the pick(s) with choose-flight (same body the web sends). */
+    continue() {
+        const ctx = this.main.ctx();
+        const picks = this.picks();
+        if (!ctx || !picks.length || !this.canContinue())
+            return;
+        this.submitting.set(true);
+        this.error.set(null);
+        this.api
+            .chooseFlight(ctx.bookingId, this.main.postBookingId(), this.chooseBody(picks))
+            .pipe(finalize(() => this.submitting.set(false)), takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: res => {
+                if (res?.itineraryAvailable === false) {
+                    this.unavailableKeys.update(keys => new Set([...keys, ...picks.map(p => p.option.referenceKey)]));
+                    this.selected.set({});
+                    this.error.set('This option is no longer available. Please choose another one.');
+                    return;
+                }
+                this.priceChanged.set(res?.priceChanged === true);
+                this.main.goTo('confirm');
+            },
+            error: () => this.error.set('Could not price the selected upgrade. Please try again.'),
+        });
+    }
+    /** Confirm step primary action: place the free upgrade, or generate the payment link. */
+    confirm() {
+        const action = this.action();
+        if (action === 'done' || this.submitting())
+            return;
+        const postBookingId = this.main.postBookingId();
+        this.submitting.set(true);
+        this.error.set(null);
+        const request$ = action === 'book'
+            ? this.api.bookNow(postBookingId)
+            : this.api.getPaymentLink(postBookingId, this.total(), this.currency());
+        request$
+            .pipe(finalize(() => this.submitting.set(false)), takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: res => {
+                // The dialog does not follow the result (no confirmation-status): after `book-now`, or once the link is
+                // sent, the agent follows the booking from the dashboard.
+                if (action === 'book')
+                    this.booked.set(true);
+                else
+                    this.paymentLink.set(res);
+            },
+            error: (err) => this.error.set(action === 'book'
+                ? 'Could not place the upgrade. Please try again.'
+                : err instanceof Error && err.message.startsWith('The cart ')
+                    ? err.message
+                    : 'Could not get the payment link. Please try again.'),
+        });
+    }
+    reset() {
+        this.selected.set({});
+        this.unavailableKeys.set(new Set());
+        this.legIds.set([]);
+        this.freshOptions.set(null);
+        this.legsStepSkipped.set(false);
+        this.submitting.set(false);
+        this.error.set(null);
+        this.priceChanged.set(false);
+        this.booked.set(false);
+        this.paymentLink.set(null);
+    }
+    /** Booking scope: one itinerary. Leg scope: each picked leg as onwardLeg / returnLeg (by the real leg direction). */
+    chooseBody(picks) {
+        const scope = this.options()?.fareOptionScope ?? 'booking';
+        if (scope !== 'leg')
+            return { fareOptionScope: 'booking', ItineraryId: picks[0].option.referenceKey };
+        // A partial fetch re-indexes the sections from 0, so resolve the direction from the legs the options were requested for.
+        const legs = this.optionLegs();
+        const toLeg = (p) => (p ? { legId: p.option.referenceKey, providerType: p.option.providerType } : undefined);
+        const isReturn = (p) => legs[Number(p.section.id)]?.direction === 'Return';
+        return {
+            fareOptionScope: 'leg',
+            onwardLeg: toLeg(picks.find(p => !isReturn(p))),
+            returnLeg: toLeg(picks.find(isReturn)),
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueUpgradeStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueUpgradeStore }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueUpgradeStore, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+/** Icon + message box used for the info callout, loading / error states and the validation hint. */
+class SbdReissueNoticeComponent {
+    constructor() {
+        this.icon = input('pi pi-info-circle');
+        this.tone = input('info');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueNoticeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: SbdReissueNoticeComponent, isStandalone: true, selector: "app-sbd-reissue-notice", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "\"sbd-notice sbd-notice--\" + tone()" } }, ngImport: i0, template: `<i [class]="icon()"></i><span class="sbd-notice__text"><ng-content /></span><ng-content select="[action]" />`, isInline: true, styles: [":host{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.5}:host i{flex-shrink:0;margin-top:1px}:host .sbd-notice__text{flex:1}:host(.sbd-notice--info){background:#eaf2ff;border:1px solid #b9d6ff;color:#1a5fd6}:host(.sbd-notice--warn){background:#fdf3e3;border:1px solid #f3d9a4;color:#8a5a1e}:host(.sbd-notice--warn) i{color:#b98a3e}:host(.sbd-notice--error){background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}:host(.sbd-notice--success){background:#f0fdf4;border:1px solid #bbf7d0;color:#166534}:host(.sbd-notice--muted){align-items:center;color:#64748b}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueNoticeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-reissue-notice', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': '"sbd-notice sbd-notice--" + tone()' }, template: `<i [class]="icon()"></i><span class="sbd-notice__text"><ng-content /></span><ng-content select="[action]" />`, styles: [":host{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.5}:host i{flex-shrink:0;margin-top:1px}:host .sbd-notice__text{flex:1}:host(.sbd-notice--info){background:#eaf2ff;border:1px solid #b9d6ff;color:#1a5fd6}:host(.sbd-notice--warn){background:#fdf3e3;border:1px solid #f3d9a4;color:#8a5a1e}:host(.sbd-notice--warn) i{color:#b98a3e}:host(.sbd-notice--error){background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}:host(.sbd-notice--success){background:#f0fdf4;border:1px solid #bbf7d0;color:#166534}:host(.sbd-notice--muted){align-items:center;color:#64748b}\n"] }]
+        }] });
+
+/** New-class options as radio cards, in the look of the cancel dialog's refund-method options. */
+class SbdReissueUpgradeStepComponent {
+    constructor() {
+        this.sections = input.required();
+        this.error = input(null);
+        this.picked = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueUpgradeStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdReissueUpgradeStepComponent, isStandalone: true, selector: "app-sbd-reissue-upgrade-step", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: true, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { picked: "picked" }, host: { classAttribute: "sbd-rup" }, ngImport: i0, template: `
+    @if (error()) {
+      <app-sbd-reissue-notice tone="error" icon="pi pi-exclamation-circle">{{ error() }}</app-sbd-reissue-notice>
+    }
+
+    @for (section of sections(); track section.id) {
+      <section class="sbd-rup__section">
+        <div class="sbd-rup__head">
+          <span class="sbd-rup__route">{{ section.title }}</span>
+          @if (section.current) { <span class="sbd-rup__current">{{ section.current }}</span> }
+        </div>
+
+        @if (!section.options.length) {
+          <span class="sbd-rup__empty">No upgrade available for this flight.</span>
+        }
+
+        @for (option of section.options; track option.key) {
+          <button type="button" class="sbd-rup__option"
+            [class.sbd-rup__option--active]="option.selected"
+            [disabled]="option.unavailable"
+            (click)="picked.emit({ sectionId: section.id, key: option.key })">
+            <span class="sbd-rup__radio" [class.sbd-rup__radio--on]="option.selected"></span>
+            <span class="sbd-rup__text">
+              <strong>{{ option.name }}</strong>
+              <small>{{ option.code }}</small>
+            </span>
+            @if (option.unavailable) {
+              <span class="sbd-rup__unavailable">Not available</span>
+            } @else {
+              <span class="sbd-rup__price">{{ option.extraLabel }}</span>
+            }
+          </button>
+        }
+      </section>
+    }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:14px}.sbd-rup__section{display:flex;flex-direction:column;gap:10px}.sbd-rup__head{display:flex;flex-direction:column;gap:2px}.sbd-rup__route{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-rup__current,.sbd-rup__empty{font-size:13px;color:#64748b}.sbd-rup__option{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;display:flex;align-items:center;gap:12px;width:100%;padding:16px;text-align:left;font-family:inherit;cursor:pointer}.sbd-rup__option--active{border-color:var(--sbd-accent, #6d4aff);box-shadow:0 0 0 1px var(--sbd-accent, #6d4aff)}.sbd-rup__option:disabled{opacity:.5;cursor:not-allowed}.sbd-rup__option:hover:not(:disabled):not(.sbd-rup__option--active){border-color:#cbd5e1}.sbd-rup__radio{flex-shrink:0;width:20px;height:20px;border-radius:50%;border:2px solid #cbd5e1;background:#fff}.sbd-rup__radio--on{border-color:var(--sbd-accent, #6d4aff);box-shadow:inset 0 0 0 4px #fff;background:var(--sbd-accent, #6d4aff)}.sbd-rup__text{flex:1;display:flex;flex-direction:column;gap:2px}.sbd-rup__text strong{font-size:14px;font-weight:700;color:#1e2e4a}.sbd-rup__text small{font-size:12.5px;color:#64748b}.sbd-rup__price{font-size:14px;font-weight:800;color:#1e2e4a;white-space:nowrap;font-variant-numeric:tabular-nums}.sbd-rup__unavailable{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#64748b;background:#f8fafc;box-shadow:inset 0 0 0 1px #e2e8f0;border-radius:20px;padding:3px 12px;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SbdReissueNoticeComponent, selector: "app-sbd-reissue-notice", inputs: ["icon", "tone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueUpgradeStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-reissue-upgrade-step', standalone: true, imports: [SbdReissueNoticeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (error()) {
+      <app-sbd-reissue-notice tone="error" icon="pi pi-exclamation-circle">{{ error() }}</app-sbd-reissue-notice>
+    }
+
+    @for (section of sections(); track section.id) {
+      <section class="sbd-rup__section">
+        <div class="sbd-rup__head">
+          <span class="sbd-rup__route">{{ section.title }}</span>
+          @if (section.current) { <span class="sbd-rup__current">{{ section.current }}</span> }
+        </div>
+
+        @if (!section.options.length) {
+          <span class="sbd-rup__empty">No upgrade available for this flight.</span>
+        }
+
+        @for (option of section.options; track option.key) {
+          <button type="button" class="sbd-rup__option"
+            [class.sbd-rup__option--active]="option.selected"
+            [disabled]="option.unavailable"
+            (click)="picked.emit({ sectionId: section.id, key: option.key })">
+            <span class="sbd-rup__radio" [class.sbd-rup__radio--on]="option.selected"></span>
+            <span class="sbd-rup__text">
+              <strong>{{ option.name }}</strong>
+              <small>{{ option.code }}</small>
+            </span>
+            @if (option.unavailable) {
+              <span class="sbd-rup__unavailable">Not available</span>
+            } @else {
+              <span class="sbd-rup__price">{{ option.extraLabel }}</span>
+            }
+          </button>
+        }
+      </section>
+    }
+  `, host: { class: 'sbd-rup' }, styles: [":host{display:flex;flex-direction:column;gap:14px}.sbd-rup__section{display:flex;flex-direction:column;gap:10px}.sbd-rup__head{display:flex;flex-direction:column;gap:2px}.sbd-rup__route{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-rup__current,.sbd-rup__empty{font-size:13px;color:#64748b}.sbd-rup__option{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;display:flex;align-items:center;gap:12px;width:100%;padding:16px;text-align:left;font-family:inherit;cursor:pointer}.sbd-rup__option--active{border-color:var(--sbd-accent, #6d4aff);box-shadow:0 0 0 1px var(--sbd-accent, #6d4aff)}.sbd-rup__option:disabled{opacity:.5;cursor:not-allowed}.sbd-rup__option:hover:not(:disabled):not(.sbd-rup__option--active){border-color:#cbd5e1}.sbd-rup__radio{flex-shrink:0;width:20px;height:20px;border-radius:50%;border:2px solid #cbd5e1;background:#fff}.sbd-rup__radio--on{border-color:var(--sbd-accent, #6d4aff);box-shadow:inset 0 0 0 4px #fff;background:var(--sbd-accent, #6d4aff)}.sbd-rup__text{flex:1;display:flex;flex-direction:column;gap:2px}.sbd-rup__text strong{font-size:14px;font-weight:700;color:#1e2e4a}.sbd-rup__text small{font-size:12.5px;color:#64748b}.sbd-rup__price{font-size:14px;font-weight:800;color:#1e2e4a;white-space:nowrap;font-variant-numeric:tabular-nums}.sbd-rup__unavailable{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#64748b;background:#f8fafc;box-shadow:inset 0 0 0 1px #e2e8f0;border-radius:20px;padding:3px 12px;white-space:nowrap}\n"] }]
+        }] });
+
+class SbdReissueUpgradeConfirmStepComponent {
+    constructor() {
+        this.rows = input.required();
+        this.total = input(0);
+        this.totalLabel = input('');
+        this.priceChanged = input(false);
+        /** `book-now` was sent. */
+        this.booked = input(false);
+        this.link = input(null);
+        this.error = input(null);
+        /** The link expired and the agent chose to redo the upgrade from the beginning. */
+        this.restart = output();
+        this.copied = signal(false);
+        /** Ticks every second so the countdown (and the expired state) update on their own. */
+        this.now = signal(Date.now());
+        this.remainingMs = computed(() => {
+            const expiry = parseLinkExpiry(this.link()?.expiresAt);
+            return expiry == null ? null : expiry - this.now();
+        });
+        this.expired = computed(() => {
+            const left = this.remainingMs();
+            return left != null && left <= 0;
+        });
+        /** `mm:ss` until the link expires; empty when the backend sent no (valid) expiry. */
+        this.countdown = computed(() => {
+            const left = this.remainingMs();
+            return left == null || left <= 0 ? '' : formatCountdown(left);
+        });
+        /** Last two minutes: highlight the countdown. */
+        this.soon = computed(() => (this.remainingMs() ?? Infinity) <= 2 * 60 * 1000);
+        const timer = setInterval(() => this.now.set(Date.now()), 1000);
+        inject(DestroyRef).onDestroy(() => clearInterval(timer));
+    }
+    async copy(url) {
+        try {
+            await navigator.clipboard.writeText(url);
+            this.copied.set(true);
+            setTimeout(() => this.copied.set(false), 1500);
+        }
+        catch {
+            // Clipboard blocked (e.g. insecure context): the input is selectable, so the agent can still copy by hand.
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueUpgradeConfirmStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdReissueUpgradeConfirmStepComponent, isStandalone: true, selector: "app-sbd-reissue-upgrade-confirm-step", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, totalLabel: { classPropertyName: "totalLabel", publicName: "totalLabel", isSignal: true, isRequired: false, transformFunction: null }, priceChanged: { classPropertyName: "priceChanged", publicName: "priceChanged", isSignal: true, isRequired: false, transformFunction: null }, booked: { classPropertyName: "booked", publicName: "booked", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { restart: "restart" }, host: { classAttribute: "sbd-rconf" }, ngImport: i0, template: `
+    @if (priceChanged()) {
+      <app-sbd-reissue-notice tone="warn" icon="pi pi-exclamation-triangle">
+        The price changed since the options were loaded. Check the total below.
+      </app-sbd-reissue-notice>
+    }
+    @if (error()) {
+      <app-sbd-reissue-notice tone="error" icon="pi pi-exclamation-circle">{{ error() }}</app-sbd-reissue-notice>
+    }
+
+    <div class="sbd-rconf__summary">
+      @for (row of rows(); track row.title) {
+        <div class="sbd-rconf__row">
+          <span class="sbd-rconf__row-main">
+            <b>{{ row.title }}</b>
+            <small>{{ row.from ? row.from + ' → ' : '' }}{{ row.to }}</small>
+          </span>
+          <strong>{{ row.extraLabel }}</strong>
+        </div>
+      }
+      <div class="sbd-rconf__total">
+        <span>Total to pay</span>
+        <strong>{{ totalLabel() }}</strong>
+      </div>
+    </div>
+
+    @if (link(); as link) {
+      @if (expired()) {
+        <app-sbd-reissue-notice tone="error" icon="pi pi-clock">
+          The payment link expired. Start the upgrade again from the beginning.
+          <button action pButton type="button" class="p-button-sm p-button-outlined p-button-secondary" label="Start again"
+            (click)="restart.emit()"></button>
+        </app-sbd-reissue-notice>
+      } @else {
+        <div class="sbd-rconf__link">
+          <div class="sbd-rconf__link-head"><b>Payment link</b><small>Send it to the customer</small></div>
+          <div class="sbd-rconf__link-row">
+            <input class="sbd-rconf__link-input" readonly [value]="link.url" (focus)="$any($event.target).select()" />
+            <button pButton type="button" class="p-button-sm p-button-outlined p-button-secondary"
+              [icon]="copied() ? 'pi pi-check' : 'pi pi-copy'" [label]="copied() ? 'Copied' : 'Copy'" (click)="copy(link.url)"></button>
+          </div>
+          @if (countdown(); as left) {
+            <small class="sbd-rconf__expiry" [class.sbd-rconf__expiry--soon]="soon()">Link expires in {{ left }}</small>
+          } @else if (link.expiresAt) {
+            <small class="sbd-rconf__expiry">Expires {{ link.expiresAt.slice(0, 16).replace('T', ' ') }}</small>
+          }
+        </div>
+      }
+    }
+
+    <!-- The dialog does not follow the result: after book-now, or once the link is sent, the agent follows the booking. -->
+    @if (booked()) {
+      <app-sbd-reissue-notice tone="success" icon="pi pi-check-circle">
+        The upgrade request was sent. Check the booking for the result.
+      </app-sbd-reissue-notice>
+    } @else if (link()) {
+      @if (!expired()) {
+        <app-sbd-reissue-notice tone="success" icon="pi pi-check-circle">
+          Copy the link and send it to the customer. The upgrade is placed once they pay: check the booking then.
+        </app-sbd-reissue-notice>
+      }
+    } @else {
+      <app-sbd-reissue-notice icon="pi pi-info-circle">
+        {{ total() > 0
+          ? 'A payment link will be generated for the customer to pay the difference.'
+          : 'Nothing to pay: confirming places the upgrade straight away.' }}
+      </app-sbd-reissue-notice>
+    }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:14px}.sbd-rconf__summary{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:12px}.sbd-rconf__row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px}.sbd-rconf__row strong{font-size:14px;font-weight:800;color:#1e2e4a;font-variant-numeric:tabular-nums;white-space:nowrap}.sbd-rconf__row-main{display:flex;flex-direction:column;gap:2px;min-width:0}.sbd-rconf__row-main b{font-weight:700;color:#1e2e4a}.sbd-rconf__row-main small{font-size:12.5px;color:#64748b}.sbd-rconf__total{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e2e8f0;padding-top:12px}.sbd-rconf__total span{font-size:14.5px;font-weight:700;color:#1e2e4a}.sbd-rconf__total strong{font-size:17px;font-weight:800;color:#1e2e4a;font-variant-numeric:tabular-nums}.sbd-rconf__link{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;padding:16px;display:flex;flex-direction:column;gap:10px}.sbd-rconf__link-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#1e2e4a}.sbd-rconf__link-head small{color:#94a3b8;font-size:12.5px}.sbd-rconf__link-row{display:flex;gap:8px}.sbd-rconf__link-input{height:40px;padding:0 12px;border:1.5px solid #e2e8f0;border-radius:10px;background:#fff;font-size:13px;font-family:inherit;color:#1e2e4a}.sbd-rconf__link-input:focus{outline:none;border-color:var(--sbd-accent, #6d4aff)}.sbd-rconf__link-input{flex:1;min-width:0;height:36px;font-size:12px;color:#334155}.sbd-rconf__expiry{color:#94a3b8;font-size:12.5px;font-variant-numeric:tabular-nums}.sbd-rconf__expiry--soon{color:#b45309;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: SbdReissueNoticeComponent, selector: "app-sbd-reissue-notice", inputs: ["icon", "tone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueUpgradeConfirmStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-reissue-upgrade-confirm-step', standalone: true, imports: [ButtonModule, SbdReissueNoticeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (priceChanged()) {
+      <app-sbd-reissue-notice tone="warn" icon="pi pi-exclamation-triangle">
+        The price changed since the options were loaded. Check the total below.
+      </app-sbd-reissue-notice>
+    }
+    @if (error()) {
+      <app-sbd-reissue-notice tone="error" icon="pi pi-exclamation-circle">{{ error() }}</app-sbd-reissue-notice>
+    }
+
+    <div class="sbd-rconf__summary">
+      @for (row of rows(); track row.title) {
+        <div class="sbd-rconf__row">
+          <span class="sbd-rconf__row-main">
+            <b>{{ row.title }}</b>
+            <small>{{ row.from ? row.from + ' → ' : '' }}{{ row.to }}</small>
+          </span>
+          <strong>{{ row.extraLabel }}</strong>
+        </div>
+      }
+      <div class="sbd-rconf__total">
+        <span>Total to pay</span>
+        <strong>{{ totalLabel() }}</strong>
+      </div>
+    </div>
+
+    @if (link(); as link) {
+      @if (expired()) {
+        <app-sbd-reissue-notice tone="error" icon="pi pi-clock">
+          The payment link expired. Start the upgrade again from the beginning.
+          <button action pButton type="button" class="p-button-sm p-button-outlined p-button-secondary" label="Start again"
+            (click)="restart.emit()"></button>
+        </app-sbd-reissue-notice>
+      } @else {
+        <div class="sbd-rconf__link">
+          <div class="sbd-rconf__link-head"><b>Payment link</b><small>Send it to the customer</small></div>
+          <div class="sbd-rconf__link-row">
+            <input class="sbd-rconf__link-input" readonly [value]="link.url" (focus)="$any($event.target).select()" />
+            <button pButton type="button" class="p-button-sm p-button-outlined p-button-secondary"
+              [icon]="copied() ? 'pi pi-check' : 'pi pi-copy'" [label]="copied() ? 'Copied' : 'Copy'" (click)="copy(link.url)"></button>
+          </div>
+          @if (countdown(); as left) {
+            <small class="sbd-rconf__expiry" [class.sbd-rconf__expiry--soon]="soon()">Link expires in {{ left }}</small>
+          } @else if (link.expiresAt) {
+            <small class="sbd-rconf__expiry">Expires {{ link.expiresAt.slice(0, 16).replace('T', ' ') }}</small>
+          }
+        </div>
+      }
+    }
+
+    <!-- The dialog does not follow the result: after book-now, or once the link is sent, the agent follows the booking. -->
+    @if (booked()) {
+      <app-sbd-reissue-notice tone="success" icon="pi pi-check-circle">
+        The upgrade request was sent. Check the booking for the result.
+      </app-sbd-reissue-notice>
+    } @else if (link()) {
+      @if (!expired()) {
+        <app-sbd-reissue-notice tone="success" icon="pi pi-check-circle">
+          Copy the link and send it to the customer. The upgrade is placed once they pay: check the booking then.
+        </app-sbd-reissue-notice>
+      }
+    } @else {
+      <app-sbd-reissue-notice icon="pi pi-info-circle">
+        {{ total() > 0
+          ? 'A payment link will be generated for the customer to pay the difference.'
+          : 'Nothing to pay: confirming places the upgrade straight away.' }}
+      </app-sbd-reissue-notice>
+    }
+  `, host: { class: 'sbd-rconf' }, styles: [":host{display:flex;flex-direction:column;gap:14px}.sbd-rconf__summary{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:12px}.sbd-rconf__row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px}.sbd-rconf__row strong{font-size:14px;font-weight:800;color:#1e2e4a;font-variant-numeric:tabular-nums;white-space:nowrap}.sbd-rconf__row-main{display:flex;flex-direction:column;gap:2px;min-width:0}.sbd-rconf__row-main b{font-weight:700;color:#1e2e4a}.sbd-rconf__row-main small{font-size:12.5px;color:#64748b}.sbd-rconf__total{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e2e8f0;padding-top:12px}.sbd-rconf__total span{font-size:14.5px;font-weight:700;color:#1e2e4a}.sbd-rconf__total strong{font-size:17px;font-weight:800;color:#1e2e4a;font-variant-numeric:tabular-nums}.sbd-rconf__link{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;padding:16px;display:flex;flex-direction:column;gap:10px}.sbd-rconf__link-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#1e2e4a}.sbd-rconf__link-head small{color:#94a3b8;font-size:12.5px}.sbd-rconf__link-row{display:flex;gap:8px}.sbd-rconf__link-input{height:40px;padding:0 12px;border:1.5px solid #e2e8f0;border-radius:10px;background:#fff;font-size:13px;font-family:inherit;color:#1e2e4a}.sbd-rconf__link-input:focus{outline:none;border-color:var(--sbd-accent, #6d4aff)}.sbd-rconf__link-input{flex:1;min-width:0;height:36px;font-size:12px;color:#334155}.sbd-rconf__expiry{color:#94a3b8;font-size:12.5px;font-variant-numeric:tabular-nums}.sbd-rconf__expiry--soon{color:#b45309;font-weight:600}\n"] }]
+        }], ctorParameters: () => [] });
+
+const OPTIONS = [
+    { key: 'change_date', icon: 'pi pi-calendar', title: 'Change Flight Date', description: 'Move one or more flights to a new date' },
+    { key: 'change_route', icon: 'pi pi-map', title: 'Change Route', description: 'Change the origin or destination airport' },
+    { key: 'upgrade_class', icon: 'pi pi-arrow-up', title: 'Upgrade Class', description: 'Move to a higher cabin or fare class' },
+];
+class SbdReissueServiceStepComponent {
+    constructor() {
+        this.upgradeAvailable = input(false);
+        this.chosen = output();
+        /** Upgrade Class is listed only when the upgrade-class API returned options. */
+        this.options = computed(() => OPTIONS.filter(o => o.key !== 'upgrade_class' || this.upgradeAvailable()));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueServiceStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdReissueServiceStepComponent, isStandalone: true, selector: "app-sbd-reissue-service-step", inputs: { upgradeAvailable: { classPropertyName: "upgradeAvailable", publicName: "upgradeAvailable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chosen: "chosen" }, host: { classAttribute: "sbd-rsvc" }, ngImport: i0, template: `
+    @for (option of options(); track option.key) {
+      <button type="button" class="sbd-rsvc__option" (click)="chosen.emit(option.key)">
+        <span class="sbd-rsvc__icon"><i [class]="option.icon"></i></span>
+        <span class="sbd-rsvc__text">
+          <strong>{{ option.title }}</strong>
+          <small>{{ option.description }}</small>
+        </span>
+        <i class="pi pi-chevron-right sbd-rsvc__arrow"></i>
+      </button>
+    }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:12px}.sbd-rsvc__option{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;display:flex;align-items:center;gap:12px;width:100%;padding:16px;text-align:left;font-family:inherit;cursor:pointer}.sbd-rsvc__option:hover{border-color:var(--sbd-accent, #6d4aff)}.sbd-rsvc__icon{flex-shrink:0;width:44px;height:44px;border-radius:10px;border:1px solid #e2e8f0;color:#1e2e4a;display:flex;align-items:center;justify-content:center}.sbd-rsvc__icon .pi{font-size:16px}.sbd-rsvc__text{flex:1;display:flex;flex-direction:column;gap:2px}.sbd-rsvc__text strong{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-rsvc__text small{font-size:12.5px;color:#64748b}.sbd-rsvc__arrow{color:#94a3b8;font-size:12px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueServiceStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-reissue-service-step', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @for (option of options(); track option.key) {
+      <button type="button" class="sbd-rsvc__option" (click)="chosen.emit(option.key)">
+        <span class="sbd-rsvc__icon"><i [class]="option.icon"></i></span>
+        <span class="sbd-rsvc__text">
+          <strong>{{ option.title }}</strong>
+          <small>{{ option.description }}</small>
+        </span>
+        <i class="pi pi-chevron-right sbd-rsvc__arrow"></i>
+      </button>
+    }
+  `, host: { class: 'sbd-rsvc' }, styles: [":host{display:flex;flex-direction:column;gap:12px}.sbd-rsvc__option{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;display:flex;align-items:center;gap:12px;width:100%;padding:16px;text-align:left;font-family:inherit;cursor:pointer}.sbd-rsvc__option:hover{border-color:var(--sbd-accent, #6d4aff)}.sbd-rsvc__icon{flex-shrink:0;width:44px;height:44px;border-radius:10px;border:1px solid #e2e8f0;color:#1e2e4a;display:flex;align-items:center;justify-content:center}.sbd-rsvc__icon .pi{font-size:16px}.sbd-rsvc__text{flex:1;display:flex;flex-direction:column;gap:2px}.sbd-rsvc__text strong{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-rsvc__text small{font-size:12.5px;color:#64748b}.sbd-rsvc__arrow{color:#94a3b8;font-size:12px}\n"] }]
+        }] });
+
+/** Leg cards in the cancel dialog's "Select Leg" design: checkbox overlay, outline badge, times row. */
+class SbdReissueLegsStepComponent {
+    constructor() {
+        this.rows = input.required();
+        this.anyAvailable = input(true);
+        this.unavailableText = input('None of these flights can be changed online. Handle this booking manually.');
+        /** Extra info line, e.g. "these flights must be upgraded together". */
+        this.note = input(null);
+        this.error = input(null);
+        this.toggled = output();
+    }
+    /** The note under a disabled leg. */
+    reasonText(reason) {
+        switch (reason) {
+            case 'flown': return 'This flight has already departed.';
+            case 'no-options': return 'No upgrade options are available for this flight.';
+            default: return 'This flight doesn’t support online reissue.';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueLegsStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdReissueLegsStepComponent, isStandalone: true, selector: "app-sbd-reissue-legs-step", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, anyAvailable: { classPropertyName: "anyAvailable", publicName: "anyAvailable", isSignal: true, isRequired: false, transformFunction: null }, unavailableText: { classPropertyName: "unavailableText", publicName: "unavailableText", isSignal: true, isRequired: false, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled" }, host: { classAttribute: "sbd-rlegs" }, ngImport: i0, template: `
+    @if (!anyAvailable()) {
+      <app-sbd-reissue-notice tone="warn" icon="pi pi-exclamation-triangle">{{ unavailableText() }}</app-sbd-reissue-notice>
+    }
+    @if (note()) {
+      <app-sbd-reissue-notice icon="pi pi-info-circle">{{ note() }}</app-sbd-reissue-notice>
+    }
+    @if (error()) {
+      <app-sbd-reissue-notice tone="error" icon="pi pi-exclamation-circle">{{ error() }}</app-sbd-reissue-notice>
+    }
+
+    @for (row of rows(); track row.leg.legId) {
+      <div class="sbd-rlegs__card" role="checkbox" tabindex="0"
+        [attr.aria-checked]="row.selected" [attr.aria-disabled]="!row.available"
+        [class.sbd-rlegs__card--selected]="row.selected"
+        [class.sbd-rlegs__card--disabled]="!row.available"
+        (click)="toggled.emit(row.leg.legId)"
+        (keydown.enter)="toggled.emit(row.leg.legId)"
+        (keydown.space)="$event.preventDefault(); toggled.emit(row.leg.legId)">
+
+        <span class="sbd-rlegs__checkbox" [class.sbd-rlegs__checkbox--on]="row.selected" [class.sbd-rlegs__checkbox--off]="!row.available">
+          <i class="pi pi-check"></i>
+        </span>
+
+        <div class="sbd-rlegs__content">
+          <div class="sbd-rlegs__top">
+            <div>
+              <span class="sbd-rlegs__name">{{ row.from }} to {{ row.to }}</span>
+              <div class="sbd-rlegs__date">{{ row.direction ? row.direction + ' · ' : '' }}{{ row.dateLabel }}</div>
+            </div>
+            <span class="sbd-rlegs__badge" [class.sbd-rlegs__badge--green]="row.available">
+              {{ row.reason === 'flown' ? 'Used Flight' : row.reason === 'offline' ? 'Not supported' : row.reason ? 'Not available' : 'Available' }}
+            </span>
+          </div>
+
+          <div class="sbd-rlegs__times">
+            <span class="sbd-rlegs__time">{{ row.depTime }}</span>
+            <span class="sbd-rlegs__line">
+              <span class="sbd-rlegs__stops">{{ row.stopsLabel }}</span>
+              <i class="pi pi-arrow-right sbd-rlegs__arrow"></i>
+            </span>
+            <span class="sbd-rlegs__time">{{ row.arrTime }}</span>
+          </div>
+
+          @if (row.airlineLine) { <span class="sbd-rlegs__airline">{{ row.airlineLine }}</span> }
+
+          @if (!row.available) {
+            <div class="sbd-rlegs__notice">
+              <i class="pi pi-info-circle"></i>
+              <span>{{ reasonText(row.reason) }}</span>
+            </div>
+          }
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:12px}.sbd-rlegs__card{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;position:relative;padding:16px 16px 16px 48px;cursor:pointer}.sbd-rlegs__card:focus-visible{outline:2px solid var(--sbd-accent, #6d4aff);outline-offset:2px}.sbd-rlegs__card--selected{border-color:var(--sbd-accent, #6d4aff)}.sbd-rlegs__card--disabled{opacity:.7;cursor:not-allowed}.sbd-rlegs__checkbox{position:absolute;top:16px;left:16px;width:22px;height:22px;border-radius:6px;border:1.5px solid #cbd5e1;background:#fff;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}.sbd-rlegs__checkbox--on{background:var(--sbd-accent, #6d4aff);border-color:var(--sbd-accent, #6d4aff)}.sbd-rlegs__checkbox--off{background:#f1f5f9;border-color:#e2e8f0}.sbd-rlegs__content{display:flex;flex-direction:column;gap:8px}.sbd-rlegs__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.sbd-rlegs__name{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-rlegs__date{font-size:13px;color:#64748b;margin-top:2px}.sbd-rlegs__badge{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border-radius:20px;padding:4px 14px;width:max-content;background:#f8fafc;color:#64748b;box-shadow:inset 0 0 0 1px #e2e8f0}.sbd-rlegs__badge--green{background:transparent;color:#16a34a;box-shadow:inset 0 0 0 1.5px currentColor}.sbd-rlegs__times{display:flex;align-items:center;gap:8px}.sbd-rlegs__time{font-size:18px;font-weight:700;color:#1e2e4a;font-variant-numeric:tabular-nums}.sbd-rlegs__line{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 16px 0 8px}.sbd-rlegs__line:before{content:\"\";position:absolute;left:0;right:14px;top:50%;height:2px;background:#cbd5e1;z-index:1}.sbd-rlegs__stops{font-size:12px;color:#64748b;background:#fff;padding:0 6px;z-index:2}.sbd-rlegs__arrow{position:absolute;right:4px;top:51%;transform:translateY(-50%);font-size:11px;color:#64748b}.sbd-rlegs__airline{font-size:12.5px;color:#64748b}.sbd-rlegs__notice{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:10px;background:#fdf1e0;color:#6b4a16;font-size:12.5px;line-height:1.4}.sbd-rlegs__notice i{flex-shrink:0;margin-top:1px;color:#b98a3e}\n"], dependencies: [{ kind: "component", type: SbdReissueNoticeComponent, selector: "app-sbd-reissue-notice", inputs: ["icon", "tone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueLegsStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-reissue-legs-step', standalone: true, imports: [SbdReissueNoticeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (!anyAvailable()) {
+      <app-sbd-reissue-notice tone="warn" icon="pi pi-exclamation-triangle">{{ unavailableText() }}</app-sbd-reissue-notice>
+    }
+    @if (note()) {
+      <app-sbd-reissue-notice icon="pi pi-info-circle">{{ note() }}</app-sbd-reissue-notice>
+    }
+    @if (error()) {
+      <app-sbd-reissue-notice tone="error" icon="pi pi-exclamation-circle">{{ error() }}</app-sbd-reissue-notice>
+    }
+
+    @for (row of rows(); track row.leg.legId) {
+      <div class="sbd-rlegs__card" role="checkbox" tabindex="0"
+        [attr.aria-checked]="row.selected" [attr.aria-disabled]="!row.available"
+        [class.sbd-rlegs__card--selected]="row.selected"
+        [class.sbd-rlegs__card--disabled]="!row.available"
+        (click)="toggled.emit(row.leg.legId)"
+        (keydown.enter)="toggled.emit(row.leg.legId)"
+        (keydown.space)="$event.preventDefault(); toggled.emit(row.leg.legId)">
+
+        <span class="sbd-rlegs__checkbox" [class.sbd-rlegs__checkbox--on]="row.selected" [class.sbd-rlegs__checkbox--off]="!row.available">
+          <i class="pi pi-check"></i>
+        </span>
+
+        <div class="sbd-rlegs__content">
+          <div class="sbd-rlegs__top">
+            <div>
+              <span class="sbd-rlegs__name">{{ row.from }} to {{ row.to }}</span>
+              <div class="sbd-rlegs__date">{{ row.direction ? row.direction + ' · ' : '' }}{{ row.dateLabel }}</div>
+            </div>
+            <span class="sbd-rlegs__badge" [class.sbd-rlegs__badge--green]="row.available">
+              {{ row.reason === 'flown' ? 'Used Flight' : row.reason === 'offline' ? 'Not supported' : row.reason ? 'Not available' : 'Available' }}
+            </span>
+          </div>
+
+          <div class="sbd-rlegs__times">
+            <span class="sbd-rlegs__time">{{ row.depTime }}</span>
+            <span class="sbd-rlegs__line">
+              <span class="sbd-rlegs__stops">{{ row.stopsLabel }}</span>
+              <i class="pi pi-arrow-right sbd-rlegs__arrow"></i>
+            </span>
+            <span class="sbd-rlegs__time">{{ row.arrTime }}</span>
+          </div>
+
+          @if (row.airlineLine) { <span class="sbd-rlegs__airline">{{ row.airlineLine }}</span> }
+
+          @if (!row.available) {
+            <div class="sbd-rlegs__notice">
+              <i class="pi pi-info-circle"></i>
+              <span>{{ reasonText(row.reason) }}</span>
+            </div>
+          }
+        </div>
+      </div>
+    }
+  `, host: { class: 'sbd-rlegs' }, styles: [":host{display:flex;flex-direction:column;gap:12px}.sbd-rlegs__card{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;position:relative;padding:16px 16px 16px 48px;cursor:pointer}.sbd-rlegs__card:focus-visible{outline:2px solid var(--sbd-accent, #6d4aff);outline-offset:2px}.sbd-rlegs__card--selected{border-color:var(--sbd-accent, #6d4aff)}.sbd-rlegs__card--disabled{opacity:.7;cursor:not-allowed}.sbd-rlegs__checkbox{position:absolute;top:16px;left:16px;width:22px;height:22px;border-radius:6px;border:1.5px solid #cbd5e1;background:#fff;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}.sbd-rlegs__checkbox--on{background:var(--sbd-accent, #6d4aff);border-color:var(--sbd-accent, #6d4aff)}.sbd-rlegs__checkbox--off{background:#f1f5f9;border-color:#e2e8f0}.sbd-rlegs__content{display:flex;flex-direction:column;gap:8px}.sbd-rlegs__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.sbd-rlegs__name{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-rlegs__date{font-size:13px;color:#64748b;margin-top:2px}.sbd-rlegs__badge{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border-radius:20px;padding:4px 14px;width:max-content;background:#f8fafc;color:#64748b;box-shadow:inset 0 0 0 1px #e2e8f0}.sbd-rlegs__badge--green{background:transparent;color:#16a34a;box-shadow:inset 0 0 0 1.5px currentColor}.sbd-rlegs__times{display:flex;align-items:center;gap:8px}.sbd-rlegs__time{font-size:18px;font-weight:700;color:#1e2e4a;font-variant-numeric:tabular-nums}.sbd-rlegs__line{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 16px 0 8px}.sbd-rlegs__line:before{content:\"\";position:absolute;left:0;right:14px;top:50%;height:2px;background:#cbd5e1;z-index:1}.sbd-rlegs__stops{font-size:12px;color:#64748b;background:#fff;padding:0 6px;z-index:2}.sbd-rlegs__arrow{position:absolute;right:4px;top:51%;transform:translateY(-50%);font-size:11px;color:#64748b}.sbd-rlegs__airline{font-size:12.5px;color:#64748b}.sbd-rlegs__notice{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:10px;background:#fdf1e0;color:#6b4a16;font-size:12.5px;line-height:1.4}.sbd-rlegs__notice i{flex-shrink:0;margin-top:1px;color:#b98a3e}\n"] }]
+        }] });
+
+class SbdReissueDateStepComponent {
+    constructor() {
+        this.rows = input.required();
+        this.changed = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueDateStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdReissueDateStepComponent, isStandalone: true, selector: "app-sbd-reissue-date-step", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changed: "changed" }, host: { classAttribute: "sbd-rdate" }, ngImport: i0, template: `
+    @for (row of rows(); track row.leg.legId) {
+      <div class="sbd-rdate__card">
+        <div class="sbd-rdate__head">
+          <span class="sbd-rdate__name">{{ row.leg.originCode }} to {{ row.leg.destinationCode }}</span>
+          <span class="sbd-rdate__current">Currently {{ row.current }}</span>
+        </div>
+        <label class="sbd-rdate__field">
+          <span>New departure date</span>
+          <input type="date" class="sbd-rdate__input"
+            [value]="row.value" [min]="row.min" [attr.max]="row.max || null"
+            (input)="changed.emit({ legId: row.leg.legId, date: $any($event.target).value })" />
+        </label>
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:12px}.sbd-rdate__card{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;padding:16px;display:flex;flex-direction:column;gap:14px}.sbd-rdate__head{display:flex;flex-direction:column;gap:2px}.sbd-rdate__name{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-rdate__current{font-size:13px;color:#64748b}.sbd-rdate__field{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:12.5px;font-weight:600;color:#475569}.sbd-rdate__input{height:40px;padding:0 12px;border:1.5px solid #e2e8f0;border-radius:10px;background:#fff;font-size:13px;font-family:inherit;color:#1e2e4a}.sbd-rdate__input:focus{outline:none;border-color:var(--sbd-accent, #6d4aff)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueDateStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-reissue-date-step', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @for (row of rows(); track row.leg.legId) {
+      <div class="sbd-rdate__card">
+        <div class="sbd-rdate__head">
+          <span class="sbd-rdate__name">{{ row.leg.originCode }} to {{ row.leg.destinationCode }}</span>
+          <span class="sbd-rdate__current">Currently {{ row.current }}</span>
+        </div>
+        <label class="sbd-rdate__field">
+          <span>New departure date</span>
+          <input type="date" class="sbd-rdate__input"
+            [value]="row.value" [min]="row.min" [attr.max]="row.max || null"
+            (input)="changed.emit({ legId: row.leg.legId, date: $any($event.target).value })" />
+        </label>
+      </div>
+    }
+  `, host: { class: 'sbd-rdate' }, styles: [":host{display:flex;flex-direction:column;gap:12px}.sbd-rdate__card{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;padding:16px;display:flex;flex-direction:column;gap:14px}.sbd-rdate__head{display:flex;flex-direction:column;gap:2px}.sbd-rdate__name{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-rdate__current{font-size:13px;color:#64748b}.sbd-rdate__field{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:12.5px;font-weight:600;color:#475569}.sbd-rdate__input{height:40px;padding:0 12px;border:1.5px solid #e2e8f0;border-radius:10px;background:#fff;font-size:13px;font-family:inherit;color:#1e2e4a}.sbd-rdate__input:focus{outline:none;border-color:var(--sbd-accent, #6d4aff)}\n"] }]
+        }] });
+
+class SbdReissueRouteStepComponent {
+    constructor() {
+        this.rows = input.required();
+        this.options = input.required();
+        this.airportChanged = output();
+        this.searched = output();
+        this.swapped = output();
+        this.compare = compareAirports;
+        this.sides = [
+            { key: 'origin', label: 'From' },
+            { key: 'destination', label: 'To' },
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueRouteStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdReissueRouteStepComponent, isStandalone: true, selector: "app-sbd-reissue-route-step", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { airportChanged: "airportChanged", searched: "searched", swapped: "swapped" }, host: { classAttribute: "sbd-rroute" }, ngImport: i0, template: `
+    @for (row of rows(); track row.leg.legId) {
+      <div class="sbd-rroute__card">
+        <div class="sbd-rroute__head">
+          <span class="sbd-rroute__name">{{ row.leg.originCode }} to {{ row.leg.destinationCode }}</span>
+          <span class="sbd-rroute__current">Currently {{ row.current }}</span>
+        </div>
+
+        <div class="sbd-rroute__pair">
+          @for (side of sides; track side.key) {
+            <label class="sbd-rroute__field">
+              <span>{{ side.label }}</span>
+              <ng-select class="sbd-rroute__select" bindLabel="label" [clearable]="false"
+                [items]="options()" [compareWith]="compare" [ngModel]="row[side.key]"
+                (ngModelChange)="airportChanged.emit({ legId: row.leg.legId, side: side.key, airport: $event })"
+                (search)="searched.emit($event.term)">
+                <ng-template ng-label-tmp let-item="item">{{ item.city_name }} ({{ item.id }})</ng-template>
+                <ng-template ng-option-tmp let-item="item">
+                  <div class="sbd-rroute__opt"><b>{{ item.city_name }} ({{ item.id }})</b><small>{{ item.name }}</small></div>
+                </ng-template>
+              </ng-select>
+            </label>
+
+            <!-- Swap arrow, between From and To -->
+            @if ($first) {
+              <button type="button" class="sbd-rroute__swap" aria-label="Swap origin and destination"
+                (click)="swapped.emit(row.leg.legId)">
+                <!-- Inline SVG: primeicons 4.x has no horizontal swap arrows. -->
+                <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6"
+                  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M2 5.5h11M10.5 3l2.5 2.5-2.5 2.5M14 10.5H3M5.5 8 3 10.5 5.5 13" />
+                </svg>
+              </button>
+            }
+          }
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:12px}.sbd-rroute__card{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;padding:16px;display:flex;flex-direction:column;gap:14px}.sbd-rroute__head{display:flex;flex-direction:column;gap:2px}.sbd-rroute__name{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-rroute__current{font-size:13px;color:#64748b}.sbd-rroute__field{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:12.5px;font-weight:600;color:#475569}.sbd-rroute__pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:end}.sbd-rroute__swap{width:32px;height:32px;margin-bottom:4px;border-radius:50%;border:1.5px solid #e2e8f0;background:#fff;color:#1e2e4a;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s}.sbd-rroute__swap .pi{font-size:13px}.sbd-rroute__swap:hover{background:#f8fafc;border-color:var(--sbd-accent, #6d4aff)}.sbd-rroute__opt{display:flex;flex-direction:column;line-height:1.3;min-width:0}.sbd-rroute__opt b{font-size:13px;font-weight:600;color:#1e2e4a}.sbd-rroute__opt small{font-size:11px;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .sbd-rroute__select{font-size:13px;font-weight:400;color:#1e2e4a}:host ::ng-deep .sbd-rroute__select .ng-select-container{min-height:40px;border-radius:10px;border:1.5px solid #e2e8f0}:host ::ng-deep .sbd-rroute__select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:var(--sbd-accent, #6d4aff);box-shadow:none}:host ::ng-deep .sbd-rroute__select .ng-value-container .ng-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}:host ::ng-deep .sbd-rroute__select .ng-dropdown-panel{min-width:100%;z-index:1100;border-radius:10px}:host ::ng-deep .sbd-rroute__select .ng-dropdown-panel .ng-dropdown-panel-items{max-height:220px}:host ::ng-deep .sbd-rroute__select .ng-dropdown-panel .ng-option{padding:8px 12px;font-size:13px;white-space:normal}:host ::ng-deep .sbd-rroute__select .ng-dropdown-panel .ng-option.ng-option-selected,:host ::ng-deep .sbd-rroute__select .ng-dropdown-panel .ng-option.ng-option-marked{background:var(--sbd-accent-soft, #ede9fe)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i5$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueRouteStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-reissue-route-step', standalone: true, imports: [FormsModule, NgSelectModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @for (row of rows(); track row.leg.legId) {
+      <div class="sbd-rroute__card">
+        <div class="sbd-rroute__head">
+          <span class="sbd-rroute__name">{{ row.leg.originCode }} to {{ row.leg.destinationCode }}</span>
+          <span class="sbd-rroute__current">Currently {{ row.current }}</span>
+        </div>
+
+        <div class="sbd-rroute__pair">
+          @for (side of sides; track side.key) {
+            <label class="sbd-rroute__field">
+              <span>{{ side.label }}</span>
+              <ng-select class="sbd-rroute__select" bindLabel="label" [clearable]="false"
+                [items]="options()" [compareWith]="compare" [ngModel]="row[side.key]"
+                (ngModelChange)="airportChanged.emit({ legId: row.leg.legId, side: side.key, airport: $event })"
+                (search)="searched.emit($event.term)">
+                <ng-template ng-label-tmp let-item="item">{{ item.city_name }} ({{ item.id }})</ng-template>
+                <ng-template ng-option-tmp let-item="item">
+                  <div class="sbd-rroute__opt"><b>{{ item.city_name }} ({{ item.id }})</b><small>{{ item.name }}</small></div>
+                </ng-template>
+              </ng-select>
+            </label>
+
+            <!-- Swap arrow, between From and To -->
+            @if ($first) {
+              <button type="button" class="sbd-rroute__swap" aria-label="Swap origin and destination"
+                (click)="swapped.emit(row.leg.legId)">
+                <!-- Inline SVG: primeicons 4.x has no horizontal swap arrows. -->
+                <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6"
+                  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M2 5.5h11M10.5 3l2.5 2.5-2.5 2.5M14 10.5H3M5.5 8 3 10.5 5.5 13" />
+                </svg>
+              </button>
+            }
+          }
+        </div>
+      </div>
+    }
+  `, host: { class: 'sbd-rroute' }, styles: [":host{display:flex;flex-direction:column;gap:12px}.sbd-rroute__card{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;padding:16px;display:flex;flex-direction:column;gap:14px}.sbd-rroute__head{display:flex;flex-direction:column;gap:2px}.sbd-rroute__name{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-rroute__current{font-size:13px;color:#64748b}.sbd-rroute__field{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:12.5px;font-weight:600;color:#475569}.sbd-rroute__pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:end}.sbd-rroute__swap{width:32px;height:32px;margin-bottom:4px;border-radius:50%;border:1.5px solid #e2e8f0;background:#fff;color:#1e2e4a;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s}.sbd-rroute__swap .pi{font-size:13px}.sbd-rroute__swap:hover{background:#f8fafc;border-color:var(--sbd-accent, #6d4aff)}.sbd-rroute__opt{display:flex;flex-direction:column;line-height:1.3;min-width:0}.sbd-rroute__opt b{font-size:13px;font-weight:600;color:#1e2e4a}.sbd-rroute__opt small{font-size:11px;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .sbd-rroute__select{font-size:13px;font-weight:400;color:#1e2e4a}:host ::ng-deep .sbd-rroute__select .ng-select-container{min-height:40px;border-radius:10px;border:1.5px solid #e2e8f0}:host ::ng-deep .sbd-rroute__select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:var(--sbd-accent, #6d4aff);box-shadow:none}:host ::ng-deep .sbd-rroute__select .ng-value-container .ng-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}:host ::ng-deep .sbd-rroute__select .ng-dropdown-panel{min-width:100%;z-index:1100;border-radius:10px}:host ::ng-deep .sbd-rroute__select .ng-dropdown-panel .ng-dropdown-panel-items{max-height:220px}:host ::ng-deep .sbd-rroute__select .ng-dropdown-panel .ng-option{padding:8px 12px;font-size:13px;white-space:normal}:host ::ng-deep .sbd-rroute__select .ng-dropdown-panel .ng-option.ng-option-selected,:host ::ng-deep .sbd-rroute__select .ng-dropdown-panel .ng-option.ng-option-marked{background:var(--sbd-accent-soft, #ede9fe)}\n"] }]
+        }] });
+
+/**
+ * Reissue dialog shell: owns the p-dialog, the loading / error states and the footer, and swaps the step
+ * components. All state and rules live in `SbdReissueStore`; the steps only render and emit.
+ */
+class SbdReissueDialogComponent {
+    constructor() {
+        this.store = inject(SbdReissueStore);
+        this.upgrade = inject(SbdReissueUpgradeStore);
+        this.config = inject(SBD_CONFIG);
+        this.injector = inject(Injector);
+        this.visible = input(false);
+        this.bookingId = input('');
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.bookingData = input(null);
+        this.closed = output();
+        /** Header title per screen, like the cancel dialog's "Select Leg to Cancel" / "Refund Method". */
+        this.title = computed(() => {
+            switch (this.store.step()) {
+                case 'legs': return 'Select Flight to Change';
+                case 'edit': return this.store.service() === 'change_date' ? 'Choose New Date' : 'Choose New Route';
+                case 'upgrade-legs': return 'Select Flight to Upgrade';
+                case 'upgrade': return 'Choose New Class';
+                case 'confirm': return 'Review Upgrade';
+                default: return 'Reissue Booking';
+            }
+        });
+        /** Gray hint above the footer (cancel's "Select at least one flight to continue"), or why Search is disabled. */
+        this.hint = computed(() => {
+            switch (this.store.step()) {
+                case 'legs':
+                    return this.store.anyAvailable() && !this.store.canContinue() ? 'Select at least one flight to continue' : null;
+                case 'edit':
+                    return this.store.validationError();
+                case 'upgrade-legs':
+                    return this.upgrade.anyLegUpgradable() && !this.upgrade.canContinueFromLegs() && !this.upgrade.submitting()
+                        ? 'Select at least one flight to continue'
+                        : null;
+                case 'upgrade':
+                    return this.upgrade.sections().some(s => s.options.length) && !this.upgrade.canContinue() && !this.upgrade.submitting()
+                        ? 'Select a class to continue'
+                        : null;
+                default:
+                    return null;
+            }
+        });
+        // Depends only on these three inputs; whatever the store reads while opening must not retrigger it.
+        effect(() => {
+            const [visible, data, id] = [this.visible(), this.bookingData(), this.bookingId()];
+            if (visible)
+                untracked(() => this.store.open(data, id));
+        }, { allowSignalWrites: true });
+    }
+    onServiceChosen(service) {
+        if (service === 'upgrade_class')
+            this.upgrade.start();
+        else
+            this.store.chooseService(service);
+    }
+    /** Back from the options returns to "select leg" only when that step was shown (the upgrade store knows). */
+    onBack() {
+        if (this.store.step() === 'upgrade')
+            this.upgrade.back();
+        else
+            this.store.back();
+    }
+    /** The payment link expired: redo the whole reissue from the start (a new post-booking, the service list again). */
+    restartFlow() {
+        this.store.open(this.bookingData(), this.bookingId());
+    }
+    /** Redirects to the web search (new tab: the agent keeps the dashboard open next to the web flow). */
+    async searchFlights() {
+        const url = this.store.searchUrl();
+        if (!url)
+            return;
+        // Open the tab now, inside the click, so the browser does not block it while the host's token is awaited.
+        const tab = window.open('about:blank', '_blank');
+        const finalUrl = appendAuthParams(url, await this.redirectAuthParams(), this.config.redirectAuthIn);
+        if (tab) {
+            tab.opener = null; // same protection as `noopener`
+            tab.location.href = finalUrl;
+        }
+        else {
+            window.open(finalUrl, '_blank', 'noopener');
+        }
+        this.closed.emit();
+    }
+    /** The host's auth parameters for the web link; `{}` when it has none or it fails (the web then asks to log in). */
+    async redirectAuthParams() {
+        const provide = this.config.redirectAuthParams;
+        if (!provide)
+            return {};
+        try {
+            const result = runInInjectionContext(this.injector, provide);
+            return (isObservable(result) ? await firstValueFrom(result) : await result) ?? {};
+        }
+        catch {
+            return {};
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdReissueDialogComponent, isStandalone: true, selector: "app-sbd-reissue-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, bookingId: { classPropertyName: "bookingId", publicName: "bookingId", isSignal: true, isRequired: false, transformFunction: null }, bookingData: { classPropertyName: "bookingData", publicName: "bookingData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, providers: [SbdReissueStore, SbdReissueUpgradeStore], ngImport: i0, template: "<p-dialog [visible]=\"visible()\" (visibleChange)=\"$event ? null : closed.emit()\"\n  [modal]=\"true\" [blockScroll]=\"true\" [draggable]=\"false\" [resizable]=\"false\"\n  [showHeader]=\"false\" [style]=\"{ width: '560px', padding: '0' }\" styleClass=\"sbd-reissue-dialog-wrapper\">\n\n  <div class=\"sbd-reissue\">\n\n    <!-- Header: same layout as the cancel dialog (round close button, centered title + booking id) -->\n    <div class=\"sbd-reissue__header\">\n      <button type=\"button\" class=\"sbd-reissue__close\" (click)=\"closed.emit()\" aria-label=\"Close\">\n        <i class=\"pi pi-times\"></i>\n      </button>\n      <div class=\"sbd-reissue__header-text\">\n        <h3 class=\"sbd-reissue__title\">{{ title() }}</h3>\n        <span class=\"sbd-reissue__sub\">Booking ID #{{ bookingId() }}</span>\n      </div>\n    </div>\n\n    @if (store.loading()) {\n      <div class=\"sbd-reissue__state\">\n        <div class=\"sbd-reissue__state-icon\"><i class=\"pi pi-spin pi-spinner\"></i></div>\n        <div class=\"sbd-reissue__state-text\">Checking availability\u2026</div>\n        <div class=\"sbd-reissue__dots\"><span></span><span></span><span></span></div>\n      </div>\n    } @else if (store.error()) {\n      <div class=\"sbd-reissue__state\">\n        <div class=\"sbd-reissue__state-icon sbd-reissue__state-icon--warn\"><i class=\"pi pi-exclamation-triangle\"></i></div>\n        <div class=\"sbd-reissue__state-text\">{{ store.error() }}</div>\n        <button pButton type=\"button\" label=\"Retry\" class=\"p-button-outlined p-button-secondary\" (click)=\"store.load()\"></button>\n      </div>\n    } @else if (store.blocked()) {\n      <!-- No leg can be reissued online: same idea as the cancel dialog's \"not eligible, escalate\" notice. -->\n      <div class=\"sbd-reissue__body\">\n        <app-sbd-reissue-notice tone=\"warn\" icon=\"pi pi-exclamation-triangle\">\n          <strong>{{ store.blocked()?.title }}</strong><br>{{ store.blocked()?.text }}\n        </app-sbd-reissue-notice>\n      </div>\n      <div class=\"sbd-reissue__footer\">\n        <button pButton type=\"button\" label=\"Close\" class=\"p-button-outlined p-button-secondary sbd-reissue__btn\"\n          (click)=\"closed.emit()\"></button>\n      </div>\n    } @else {\n      <div class=\"sbd-reissue__body\">\n        @switch (store.step()) {\n          @case ('service') {\n            <app-sbd-reissue-notice>Change requests are subject to availability from the airline.</app-sbd-reissue-notice>\n            <app-sbd-reissue-service-step\n              [upgradeAvailable]=\"store.upgradeAvailable()\"\n              (chosen)=\"onServiceChosen($event)\" />\n          }\n          @case ('legs') {\n            <app-sbd-reissue-legs-step\n              [rows]=\"store.legRows()\"\n              [anyAvailable]=\"store.anyAvailable()\"\n              (toggled)=\"store.toggleLeg($event)\" />\n          }\n          @case ('edit') {\n            @if (store.service() === 'change_date') {\n              <app-sbd-reissue-date-step\n                [rows]=\"store.dateRows()\"\n                (changed)=\"store.setDate($event.legId, $event.date)\" />\n            } @else {\n              <app-sbd-reissue-route-step\n                [rows]=\"store.routeRows()\"\n                [options]=\"store.airportOptions()\"\n                (airportChanged)=\"store.setAirport($event.legId, $event.side, $event.airport)\"\n                (searched)=\"store.searchAirports($event)\"\n                (swapped)=\"store.swapAirports($event)\" />\n            }\n          }\n          @case ('upgrade-legs') {\n            <app-sbd-reissue-legs-step\n              unavailableText=\"None of these flights can be upgraded online. Handle this booking manually.\"\n              [rows]=\"upgrade.legRows()\"\n              [anyAvailable]=\"upgrade.anyLegUpgradable()\"\n              [note]=\"store.allowSingleLegSelection() ? null : 'These flights must be upgraded together.'\"\n              [error]=\"upgrade.error()\"\n              (toggled)=\"upgrade.toggleLeg($event)\" />\n          }\n          @case ('upgrade') {\n            <app-sbd-reissue-upgrade-step\n              [sections]=\"upgrade.sections()\"\n              [error]=\"upgrade.error()\"\n              (picked)=\"upgrade.select($event.sectionId, $event.key)\" />\n          }\n          @case ('confirm') {\n            <app-sbd-reissue-upgrade-confirm-step\n              [rows]=\"upgrade.summary()\"\n              [total]=\"upgrade.total()\"\n              [totalLabel]=\"upgrade.totalLabel()\"\n              [priceChanged]=\"upgrade.priceChanged()\"\n              [booked]=\"upgrade.booked()\"\n              [link]=\"upgrade.paymentLink()\"\n              [error]=\"upgrade.error()\"\n              (restart)=\"restartFlow()\" />\n          }\n        }\n      </div>\n\n      @if (hint(); as text) {\n        <div class=\"sbd-reissue__hint\">{{ text }}</div>\n      }\n\n      @if (store.step() !== 'service') {\n        <div class=\"sbd-reissue__footer\">\n          <button pButton type=\"button\" label=\"Back\" class=\"p-button-outlined p-button-secondary sbd-reissue__btn\"\n            [disabled]=\"store.step() === 'confirm' && upgrade.locked()\" (click)=\"onBack()\"></button>\n\n          @switch (store.step()) {\n            @case ('legs') {\n              <button pButton type=\"button\" label=\"Continue\" class=\"sbd-reissue__btn\"\n                [disabled]=\"!store.canContinue()\" (click)=\"store.goToEdit()\"></button>\n            }\n            @case ('edit') {\n              <button pButton type=\"button\" icon=\"pi pi-search\" label=\"Search flights\" class=\"sbd-reissue__btn\"\n                [disabled]=\"!!store.validationError()\" (click)=\"searchFlights()\"></button>\n            }\n            @case ('upgrade-legs') {\n              <button pButton type=\"button\" label=\"Continue\" class=\"sbd-reissue__btn\" [loading]=\"upgrade.submitting()\"\n                [disabled]=\"!upgrade.canContinueFromLegs()\" (click)=\"upgrade.continueFromLegs()\"></button>\n            }\n            @case ('upgrade') {\n              <button pButton type=\"button\" label=\"Continue\" class=\"sbd-reissue__btn\" [loading]=\"upgrade.submitting()\"\n                [disabled]=\"!upgrade.canContinue()\" (click)=\"upgrade.continue()\"></button>\n            }\n            @case ('confirm') {\n              @switch (upgrade.action()) {\n                @case ('done') {\n                  <button pButton type=\"button\" label=\"Close\" class=\"sbd-reissue__btn\" (click)=\"closed.emit()\"></button>\n                }\n                @case ('book') {\n                  <button pButton type=\"button\" label=\"Confirm upgrade\" class=\"sbd-reissue__btn\"\n                    [loading]=\"upgrade.submitting()\" (click)=\"upgrade.confirm()\"></button>\n                }\n                @case ('link') {\n                  <button pButton type=\"button\" icon=\"pi pi-link\" label=\"Generate payment link\" class=\"sbd-reissue__btn\"\n                    [loading]=\"upgrade.submitting()\" (click)=\"upgrade.confirm()\"></button>\n                }\n              }\n            }\n          }\n        </div>\n      }\n    }\n  </div>\n</p-dialog>\n", styles: [":host ::ng-deep .sbd-reissue-dialog-wrapper{border-radius:16px;box-shadow:0 24px 60px #0f172a38}:host ::ng-deep .sbd-reissue-dialog-wrapper .p-dialog-content{padding:0;border-radius:16px;overflow:visible}.sbd-reissue{font-family:inherit;position:relative}.sbd-reissue__header{display:flex;align-items:flex-start;gap:12px;padding:20px 20px 0}.sbd-reissue__close{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:#f8fafc;border:none;color:#1e2e4a;display:flex;align-items:center;justify-content:center;cursor:pointer}.sbd-reissue__close .pi{font-size:13px}.sbd-reissue__close:hover{background:#e2e8f0}.sbd-reissue__header-text{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;margin-right:32px}.sbd-reissue__title{font-size:19px;font-weight:800;color:#1e2e4a;margin:0}.sbd-reissue__sub{font-size:12.5px;color:#94a3b8}.sbd-reissue__body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:12px}.sbd-reissue__hint{text-align:center;padding:0 20px 12px;font-size:13px;color:#94a3b8}.sbd-reissue__footer{display:flex;justify-content:flex-end;gap:10px;align-items:stretch;padding:14px 20px;border-top:1px solid #e2e8f0;background:#fff;border-radius:0 0 16px 16px}.sbd-reissue__btn{flex:1 1 0;justify-content:center}.sbd-reissue__state{padding:36px 24px 28px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}.sbd-reissue__state-icon{width:56px;height:56px;border-radius:50%;background:#fff7ed;border:2px solid #fed7aa;display:flex;align-items:center;justify-content:center}.sbd-reissue__state-icon .pi{font-size:24px;color:#f97316}.sbd-reissue__state-icon--warn{background:#fef2f2;border-color:#fecaca}.sbd-reissue__state-icon--warn .pi{color:#ef4444}.sbd-reissue__state-text{font-size:13px;color:#64748b;min-height:20px}.sbd-reissue__dots{display:flex;gap:6px}.sbd-reissue__dots span{width:7px;height:7px;border-radius:50%;background:#f97316;opacity:.3;animation:sbd-reissue-dot 1.2s ease-in-out infinite}.sbd-reissue__dots span:nth-child(2){animation-delay:.2s}.sbd-reissue__dots span:nth-child(3){animation-delay:.4s}@keyframes sbd-reissue-dot{0%,to{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}\n"], dependencies: [{ 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"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: SbdReissueNoticeComponent, selector: "app-sbd-reissue-notice", inputs: ["icon", "tone"] }, { kind: "component", type: SbdReissueServiceStepComponent, selector: "app-sbd-reissue-service-step", inputs: ["upgradeAvailable"], outputs: ["chosen"] }, { kind: "component", type: SbdReissueLegsStepComponent, selector: "app-sbd-reissue-legs-step", inputs: ["rows", "anyAvailable", "unavailableText", "note", "error"], outputs: ["toggled"] }, { kind: "component", type: SbdReissueDateStepComponent, selector: "app-sbd-reissue-date-step", inputs: ["rows"], outputs: ["changed"] }, { kind: "component", type: SbdReissueRouteStepComponent, selector: "app-sbd-reissue-route-step", inputs: ["rows", "options"], outputs: ["airportChanged", "searched", "swapped"] }, { kind: "component", type: SbdReissueUpgradeStepComponent, selector: "app-sbd-reissue-upgrade-step", inputs: ["sections", "error"], outputs: ["picked"] }, { kind: "component", type: SbdReissueUpgradeConfirmStepComponent, selector: "app-sbd-reissue-upgrade-confirm-step", inputs: ["rows", "total", "totalLabel", "priceChanged", "booked", "link", "error"], outputs: ["restart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-reissue-dialog', standalone: true, imports: [
+                        DialogModule,
+                        ButtonModule,
+                        SbdReissueNoticeComponent,
+                        SbdReissueServiceStepComponent,
+                        SbdReissueLegsStepComponent,
+                        SbdReissueDateStepComponent,
+                        SbdReissueRouteStepComponent,
+                        SbdReissueUpgradeStepComponent,
+                        SbdReissueUpgradeConfirmStepComponent,
+                    ], providers: [SbdReissueStore, SbdReissueUpgradeStore], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-dialog [visible]=\"visible()\" (visibleChange)=\"$event ? null : closed.emit()\"\n  [modal]=\"true\" [blockScroll]=\"true\" [draggable]=\"false\" [resizable]=\"false\"\n  [showHeader]=\"false\" [style]=\"{ width: '560px', padding: '0' }\" styleClass=\"sbd-reissue-dialog-wrapper\">\n\n  <div class=\"sbd-reissue\">\n\n    <!-- Header: same layout as the cancel dialog (round close button, centered title + booking id) -->\n    <div class=\"sbd-reissue__header\">\n      <button type=\"button\" class=\"sbd-reissue__close\" (click)=\"closed.emit()\" aria-label=\"Close\">\n        <i class=\"pi pi-times\"></i>\n      </button>\n      <div class=\"sbd-reissue__header-text\">\n        <h3 class=\"sbd-reissue__title\">{{ title() }}</h3>\n        <span class=\"sbd-reissue__sub\">Booking ID #{{ bookingId() }}</span>\n      </div>\n    </div>\n\n    @if (store.loading()) {\n      <div class=\"sbd-reissue__state\">\n        <div class=\"sbd-reissue__state-icon\"><i class=\"pi pi-spin pi-spinner\"></i></div>\n        <div class=\"sbd-reissue__state-text\">Checking availability\u2026</div>\n        <div class=\"sbd-reissue__dots\"><span></span><span></span><span></span></div>\n      </div>\n    } @else if (store.error()) {\n      <div class=\"sbd-reissue__state\">\n        <div class=\"sbd-reissue__state-icon sbd-reissue__state-icon--warn\"><i class=\"pi pi-exclamation-triangle\"></i></div>\n        <div class=\"sbd-reissue__state-text\">{{ store.error() }}</div>\n        <button pButton type=\"button\" label=\"Retry\" class=\"p-button-outlined p-button-secondary\" (click)=\"store.load()\"></button>\n      </div>\n    } @else if (store.blocked()) {\n      <!-- No leg can be reissued online: same idea as the cancel dialog's \"not eligible, escalate\" notice. -->\n      <div class=\"sbd-reissue__body\">\n        <app-sbd-reissue-notice tone=\"warn\" icon=\"pi pi-exclamation-triangle\">\n          <strong>{{ store.blocked()?.title }}</strong><br>{{ store.blocked()?.text }}\n        </app-sbd-reissue-notice>\n      </div>\n      <div class=\"sbd-reissue__footer\">\n        <button pButton type=\"button\" label=\"Close\" class=\"p-button-outlined p-button-secondary sbd-reissue__btn\"\n          (click)=\"closed.emit()\"></button>\n      </div>\n    } @else {\n      <div class=\"sbd-reissue__body\">\n        @switch (store.step()) {\n          @case ('service') {\n            <app-sbd-reissue-notice>Change requests are subject to availability from the airline.</app-sbd-reissue-notice>\n            <app-sbd-reissue-service-step\n              [upgradeAvailable]=\"store.upgradeAvailable()\"\n              (chosen)=\"onServiceChosen($event)\" />\n          }\n          @case ('legs') {\n            <app-sbd-reissue-legs-step\n              [rows]=\"store.legRows()\"\n              [anyAvailable]=\"store.anyAvailable()\"\n              (toggled)=\"store.toggleLeg($event)\" />\n          }\n          @case ('edit') {\n            @if (store.service() === 'change_date') {\n              <app-sbd-reissue-date-step\n                [rows]=\"store.dateRows()\"\n                (changed)=\"store.setDate($event.legId, $event.date)\" />\n            } @else {\n              <app-sbd-reissue-route-step\n                [rows]=\"store.routeRows()\"\n                [options]=\"store.airportOptions()\"\n                (airportChanged)=\"store.setAirport($event.legId, $event.side, $event.airport)\"\n                (searched)=\"store.searchAirports($event)\"\n                (swapped)=\"store.swapAirports($event)\" />\n            }\n          }\n          @case ('upgrade-legs') {\n            <app-sbd-reissue-legs-step\n              unavailableText=\"None of these flights can be upgraded online. Handle this booking manually.\"\n              [rows]=\"upgrade.legRows()\"\n              [anyAvailable]=\"upgrade.anyLegUpgradable()\"\n              [note]=\"store.allowSingleLegSelection() ? null : 'These flights must be upgraded together.'\"\n              [error]=\"upgrade.error()\"\n              (toggled)=\"upgrade.toggleLeg($event)\" />\n          }\n          @case ('upgrade') {\n            <app-sbd-reissue-upgrade-step\n              [sections]=\"upgrade.sections()\"\n              [error]=\"upgrade.error()\"\n              (picked)=\"upgrade.select($event.sectionId, $event.key)\" />\n          }\n          @case ('confirm') {\n            <app-sbd-reissue-upgrade-confirm-step\n              [rows]=\"upgrade.summary()\"\n              [total]=\"upgrade.total()\"\n              [totalLabel]=\"upgrade.totalLabel()\"\n              [priceChanged]=\"upgrade.priceChanged()\"\n              [booked]=\"upgrade.booked()\"\n              [link]=\"upgrade.paymentLink()\"\n              [error]=\"upgrade.error()\"\n              (restart)=\"restartFlow()\" />\n          }\n        }\n      </div>\n\n      @if (hint(); as text) {\n        <div class=\"sbd-reissue__hint\">{{ text }}</div>\n      }\n\n      @if (store.step() !== 'service') {\n        <div class=\"sbd-reissue__footer\">\n          <button pButton type=\"button\" label=\"Back\" class=\"p-button-outlined p-button-secondary sbd-reissue__btn\"\n            [disabled]=\"store.step() === 'confirm' && upgrade.locked()\" (click)=\"onBack()\"></button>\n\n          @switch (store.step()) {\n            @case ('legs') {\n              <button pButton type=\"button\" label=\"Continue\" class=\"sbd-reissue__btn\"\n                [disabled]=\"!store.canContinue()\" (click)=\"store.goToEdit()\"></button>\n            }\n            @case ('edit') {\n              <button pButton type=\"button\" icon=\"pi pi-search\" label=\"Search flights\" class=\"sbd-reissue__btn\"\n                [disabled]=\"!!store.validationError()\" (click)=\"searchFlights()\"></button>\n            }\n            @case ('upgrade-legs') {\n              <button pButton type=\"button\" label=\"Continue\" class=\"sbd-reissue__btn\" [loading]=\"upgrade.submitting()\"\n                [disabled]=\"!upgrade.canContinueFromLegs()\" (click)=\"upgrade.continueFromLegs()\"></button>\n            }\n            @case ('upgrade') {\n              <button pButton type=\"button\" label=\"Continue\" class=\"sbd-reissue__btn\" [loading]=\"upgrade.submitting()\"\n                [disabled]=\"!upgrade.canContinue()\" (click)=\"upgrade.continue()\"></button>\n            }\n            @case ('confirm') {\n              @switch (upgrade.action()) {\n                @case ('done') {\n                  <button pButton type=\"button\" label=\"Close\" class=\"sbd-reissue__btn\" (click)=\"closed.emit()\"></button>\n                }\n                @case ('book') {\n                  <button pButton type=\"button\" label=\"Confirm upgrade\" class=\"sbd-reissue__btn\"\n                    [loading]=\"upgrade.submitting()\" (click)=\"upgrade.confirm()\"></button>\n                }\n                @case ('link') {\n                  <button pButton type=\"button\" icon=\"pi pi-link\" label=\"Generate payment link\" class=\"sbd-reissue__btn\"\n                    [loading]=\"upgrade.submitting()\" (click)=\"upgrade.confirm()\"></button>\n                }\n              }\n            }\n          }\n        </div>\n      }\n    }\n  </div>\n</p-dialog>\n", styles: [":host ::ng-deep .sbd-reissue-dialog-wrapper{border-radius:16px;box-shadow:0 24px 60px #0f172a38}:host ::ng-deep .sbd-reissue-dialog-wrapper .p-dialog-content{padding:0;border-radius:16px;overflow:visible}.sbd-reissue{font-family:inherit;position:relative}.sbd-reissue__header{display:flex;align-items:flex-start;gap:12px;padding:20px 20px 0}.sbd-reissue__close{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:#f8fafc;border:none;color:#1e2e4a;display:flex;align-items:center;justify-content:center;cursor:pointer}.sbd-reissue__close .pi{font-size:13px}.sbd-reissue__close:hover{background:#e2e8f0}.sbd-reissue__header-text{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;margin-right:32px}.sbd-reissue__title{font-size:19px;font-weight:800;color:#1e2e4a;margin:0}.sbd-reissue__sub{font-size:12.5px;color:#94a3b8}.sbd-reissue__body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:12px}.sbd-reissue__hint{text-align:center;padding:0 20px 12px;font-size:13px;color:#94a3b8}.sbd-reissue__footer{display:flex;justify-content:flex-end;gap:10px;align-items:stretch;padding:14px 20px;border-top:1px solid #e2e8f0;background:#fff;border-radius:0 0 16px 16px}.sbd-reissue__btn{flex:1 1 0;justify-content:center}.sbd-reissue__state{padding:36px 24px 28px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}.sbd-reissue__state-icon{width:56px;height:56px;border-radius:50%;background:#fff7ed;border:2px solid #fed7aa;display:flex;align-items:center;justify-content:center}.sbd-reissue__state-icon .pi{font-size:24px;color:#f97316}.sbd-reissue__state-icon--warn{background:#fef2f2;border-color:#fecaca}.sbd-reissue__state-icon--warn .pi{color:#ef4444}.sbd-reissue__state-text{font-size:13px;color:#64748b;min-height:20px}.sbd-reissue__dots{display:flex;gap:6px}.sbd-reissue__dots span{width:7px;height:7px;border-radius:50%;background:#f97316;opacity:.3;animation:sbd-reissue-dot 1.2s ease-in-out infinite}.sbd-reissue__dots span:nth-child(2){animation-delay:.2s}.sbd-reissue__dots span:nth-child(3){animation-delay:.4s}@keyframes sbd-reissue-dot{0%,to{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}\n"] }]
+        }], ctorParameters: () => [] });
+
+class SbdHotelContentComponent {
+    constructor() {
+        // Inputs
+        this.bookingData = input.required();
+        this.bookingStatus = input.required();
+        this.bookingId = input.required();
+        this.dataVerified = input.required();
+        this.bookingNotes = input.required();
+        this.bookingHistory = input.required();
+        this.historyGroups = input.required();
+        this.activeContextTab = input.required();
+        // Computed: Check if all packages are cancelled
+        this.allPackagesCancelled = computed(() => {
+            const packages = this.bookingData()?.packages;
+            if (!packages || packages.length === 0)
+                return false;
+            return packages.every((pkg) => pkg.isCancelled === true);
+        });
         // Outputs
         this.cancelBooking = output();
         this.addNoteRequested = output();
@@ -6164,7 +8269,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        <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      </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-building\"></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            @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\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__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__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\">{{ 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdHotelContentComponent, decorators: [{
             type: Component,
@@ -6175,13 +8280,15 @@ 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        <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      </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-building\"></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            @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\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__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__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\">{{ 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"] }]
         }] });
 
 class SmartBookingDashboardComponent {
     constructor() {
         this.bookingService = inject(SbdBookingService);
         this.toast = inject(SbdToastService);
+        /** The Reissue button is shown for flights only, and only when the host enabled the feature. */
+        this.reissueEnabled = inject(SBD_CONFIG).reissueEnabled;
         this.product = signal('flight');
         this.bookingId = signal('');
         this.bookingStatus = signal('idle');
@@ -6190,6 +8297,7 @@ class SmartBookingDashboardComponent {
         this.hotelAutoCancelDialogOpen = signal(false);
         this.actionDialogOpen = signal(false);
         this.addNoteDialogOpen = signal(false);
+        this.reissueDialogOpen = signal(false);
         this.selectedActionKey = signal(null);
         this.activeContextTab = signal('changes');
         this.availableActions = computed(() => (this.product() === 'flight' ? FLIGHT_ACTIONS : HOTEL_ACTIONS).filter(a => !a.hidden));
@@ -6295,7 +8403,7 @@ class SmartBookingDashboardComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SmartBookingDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SmartBookingDashboardComponent, isStandalone: true, selector: "app-smart-booking-dashboard", host: { listeners: { "document:keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div class=\"sbd-page\">\n\n  <!-- Search bar full-width at top -->\n  <div class=\"sbd-page__search\">\n    <app-sbd-booking-input\n      [(product)]=\"product\"\n      [(bookingId)]=\"bookingId\"\n      [loading]=\"bookingStatus() === 'loading'\"\n      (lookup)=\"lookupBooking()\"\n    />\n  </div>\n\n  <!-- Hotel: Use dedicated component -->\n  @if (product() === 'hotel') {\n    <app-sbd-hotel-content\n      [bookingData]=\"bookingData()\"\n      [bookingStatus]=\"bookingStatus()\"\n      [bookingId]=\"bookingId()\"\n      [dataVerified]=\"dataVerified()\"\n      [bookingNotes]=\"bookingNotes()\"\n      [bookingHistory]=\"bookingHistory()\"\n      [historyGroups]=\"historyGroups()\"\n      [activeContextTab]=\"activeContextTab()\"\n      (cancelBooking)=\"cancelDialogOpen.set(true)\"\n      (addNoteRequested)=\"addNoteDialogOpen.set(true)\"\n      (contextTabChanged)=\"activeContextTab.set($event)\"\n    />\n  }\n\n  <!-- Flight: Keep original 2-column layout -->\n  @if (product() === 'flight') {\n    <div class=\"sbd-page__content\">\n\n      <!-- Left: booking context -->\n      <aside class=\"sbd-page__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-flight-itinerary-card [product]=\"product()\" [data]=\"bookingData()\" [verified]=\"dataVerified()\" />\n        }\n\n        <!-- Loading skeleton for aside -->\n        @if (bookingStatus() === 'loading') {\n          <div class=\"sbd-page__skeleton-card\">\n            <div class=\"sbd-page__skeleton-row\" style=\"width:60%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:40%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:80%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:50%\"></div>\n          </div>\n        }\n\n      </aside>\n\n      <!-- Right: agent workspace -->\n      <main class=\"sbd-page__main\">\n\n        <!-- Error state -->\n        @if (bookingStatus() === 'error') {\n          <div class=\"sbd-page__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-page__quick-actions\">\n            <span class=\"sbd-page__quick-label\">Quick actions</span>\n            <app-sbd-workflow-actions\n              [bookingId]=\"bookingId()\"\n              (cancelBooking)=\"cancelDialogOpen.set(true)\"\n            />\n          </div>\n\n          <!-- Action grid -->\n          <app-sbd-action-grid\n            [actions]=\"availableActions()\"\n            [activeKey]=\"selectedActionKey()\"\n            (actionSelected)=\"openAction($event)\"\n          />\n\n          <!-- Context: Notes + Changes tabbed -->\n          <div class=\"sbd-page__context\">\n\n            <!-- Tab bar -->\n            <div class=\"sbd-page__context-tabs\">\n              <button class=\"sbd-page__context-tab\"\n                [class.sbd-page__context-tab--active]=\"activeContextTab() === 'changes'\"\n                (click)=\"activeContextTab.set('changes')\">\n                <i class=\"pi pi-history\"></i>\n                Changes\n                @if (bookingHistory().length > 0) {\n                  <span class=\"sbd-page__context-pill sbd-page__context-pill--changes\">{{ bookingHistory().length }}</span>\n                }\n              </button>\n              <button class=\"sbd-page__context-tab\"\n                [class.sbd-page__context-tab--active]=\"activeContextTab() === 'notes'\"\n                (click)=\"activeContextTab.set('notes')\">\n                <i class=\"pi pi-comments\"></i>\n                Notes\n                <span class=\"sbd-page__context-pill sbd-page__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-page__context-add\"\n                  (click)=\"addNoteDialogOpen.set(true)\">\n                </button>\n              }\n            </div>\n\n            <!-- Notes tab -->\n            @if (activeContextTab() === 'notes') {\n              <div class=\"sbd-page__notes-list\">\n                @if (bookingNotes().length === 0) {\n                  <div class=\"sbd-page__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-page__note\">\n                    <div class=\"sbd-page__note-top\">\n                      <span class=\"sbd-page__note-badge sbd-page__note-badge--{{ note.action | lowercase }}\">\n                        {{ note.action }}\n                      </span>\n                      <span class=\"sbd-page__note-author\">\n                        {{ note.writtenBy?.firstName }} {{ note.writtenBy?.lastName }}\n                      </span>\n                      <span class=\"sbd-page__note-date\">{{ fmtNoteDate(note.date) }}</span>\n                    </div>\n                    <p class=\"sbd-page__note-msg\">{{ note.message }}</p>\n                  </div>\n                }\n              </div>\n            }\n\n            <!-- Changes tab -->\n            @if (activeContextTab() === 'changes') {\n              <div class=\"sbd-page__changes-groups\">\n                @if (historyGroups().length === 0) {\n                  <div class=\"sbd-page__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-page__changes-group\">\n                    <div class=\"sbd-page__changes-meta\">\n                      <i class=\"pi pi-user\"></i>\n                      <strong>{{ group.changedBy }}</strong>\n                      <span class=\"sbd-page__changes-sep\">\u00B7</span>\n                      <span>{{ fmtDate(group.changedAt) }}</span>\n                    </div>\n                    <table class=\"sbd-page__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-page__changes-field\">{{ formatField(entry.field) }}</td>\n                            <td class=\"sbd-page__changes-old\">{{ entry.from }}</td>\n                            <td class=\"sbd-page__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-page__skeleton-card\">\n            <div class=\"sbd-page__skeleton-row\" style=\"width:40%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:25%\"></div>\n          </div>\n        }\n\n      </main>\n\n    </div>\n  }\n\n</div>\n\n<app-sbd-cancel-dialog\n  [visible]=\"cancelDialogOpen() && product() === 'flight'\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  [pnrInfo]=\"cancelPnrInfo()\"\n  [bookingInfo]=\"bookingData()\"\n  (closed)=\"cancelDialogOpen.set(false)\"\n  (confirmed)=\"bookingStatus.set('idle'); bookingData.set(null)\"\n/>\n\n<almatar-hotel-auto-cancellation\n  *ngIf=\"cancelDialogOpen() && product() === 'hotel'\"\n  [selectedHotelBooking]=\"bookingData()\"\n  (closed)=\"cancelDialogOpen.set(false)\"\n  (cancellationSuccess)=\"bookingStatus.set('idle'); bookingData.set(null)\"\n/>\n\n<app-sbd-action-dialog\n  [visible]=\"actionDialogOpen()\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  [actions]=\"availableActions()\"\n  [initialKey]=\"selectedActionKey()\"\n  [preloadedData]=\"bookingData()\"\n  (closed)=\"actionDialogOpen.set(false)\"\n/>\n\n<app-sbd-add-note-dialog\n  [visible]=\"addNoteDialogOpen()\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  (closed)=\"addNoteDialogOpen.set(false)\"\n/>\n", styles: [".sbd-page{display:flex;flex-direction:column;gap:20px;padding:24px;max-width:1400px;min-height:100%}.sbd-page__search{width:100%}.sbd-page__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-page__error i{font-size:18px}.sbd-page__content{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}@media (max-width: 960px){.sbd-page__content{grid-template-columns:1fr}}.sbd-page__aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:20px}.sbd-page__main{display:flex;flex-direction:column;gap:16px}.sbd-page__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-page__quick-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;flex-shrink:0}.sbd-page__context{background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.sbd-page__context-tabs{display:flex;align-items:center;border-bottom:1px solid #e2e8f0;background:#f8fafc}.sbd-page__context-add{margin-left:auto;margin-right:10px}.sbd-page__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-page__context-tab .pi{font-size:13px}.sbd-page__context-tab:hover{color:#334155}.sbd-page__context-tab--active{color:#1e2e4a;border-bottom-color:var(--sbd-primary, #3b82f6);background:#fff}.sbd-page__context-pill{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:10px}.sbd-page__context-pill--notes{background:#e0e7ff;color:#4338ca}.sbd-page__context-pill--changes{background:#fef3c7;color:#b45309}.sbd-page__context-empty{display:flex;align-items:center;gap:8px;padding:24px 20px;font-size:13px;color:#94a3b8}.sbd-page__context-empty .pi{font-size:16px}.sbd-page__notes-list{display:flex;flex-direction:column}.sbd-page__note{padding:12px 16px;border-bottom:1px solid #f1f5f9;display:flex;flex-direction:column;gap:6px}.sbd-page__note:last-child{border-bottom:none}.sbd-page__note-top{display:flex;align-items:center;gap:8px}.sbd-page__note-badge{font-size:10px;font-weight:800;letter-spacing:.05em;padding:2px 8px;border-radius:10px;text-transform:uppercase;flex-shrink:0}.sbd-page__note-badge--general{background:#dbeafe;color:#1d4ed8}.sbd-page__note-badge--remark{background:#fef3c7;color:#b45309}.sbd-page__note-badge--feedback{background:#f3e8ff;color:#7e22ce}.sbd-page__note-author{font-size:12px;font-weight:700;color:#1e2e4a}.sbd-page__note-date{margin-left:auto;font-size:11px;color:#94a3b8;white-space:nowrap}.sbd-page__note-msg{margin:0;font-size:13px;color:#334155;line-height:1.55}.sbd-page__changes-groups{display:flex;flex-direction:column}.sbd-page__changes-group{border-bottom:1px solid #f1f5f9}.sbd-page__changes-group:last-child{border-bottom:none}.sbd-page__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-page__changes-meta strong{font-weight:700;color:#334155}.sbd-page__changes-meta .pi{font-size:11px;color:#94a3b8}.sbd-page__changes-sep{color:#cbd5e1}.sbd-page__changes-table{width:100%;border-collapse:collapse;font-size:12.5px}.sbd-page__changes-table thead tr{background:#f8fafc;border-bottom:1px solid #e2e8f0}.sbd-page__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-page__changes-table thead th .pi{margin-right:4px;font-size:10px}.sbd-page__changes-table thead th:nth-child(2){color:#dc2626}.sbd-page__changes-table thead th:nth-child(3){color:#16a34a}.sbd-page__changes-table tbody tr{border-bottom:1px solid #f1f5f9}.sbd-page__changes-table tbody tr:last-child{border-bottom:none}.sbd-page__changes-table tbody tr:hover{background:#f8fafc}.sbd-page__changes-table tbody td{padding:8px 14px;vertical-align:top;word-break:break-word}.sbd-page__changes-field{font-size:12px;font-weight:600;color:#475569;width:28%}.sbd-page__changes-old{color:#dc2626;font-weight:500;text-decoration:line-through;opacity:.8;width:36%}.sbd-page__changes-new{color:#16a34a;font-weight:700;width:36%}.sbd-page__content--loading{opacity:.6;pointer-events:none}.sbd-page__skeleton-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}.sbd-page__skeleton-row{height:13px;background:#f1f5f9;border-radius:6px;animation:sbd-shimmer 1.4s ease-in-out infinite}.sbd-page__skeleton-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:8px}.sbd-page__skeleton-chip{height:56px;background:#f1f5f9;border-radius:8px;animation:sbd-shimmer 1.4s ease-in-out infinite}@keyframes sbd-shimmer{0%,to{opacity:1}50%{opacity:.45}}@keyframes sbd-fadein{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "component", type: SbdBookingInputComponent, selector: "app-sbd-booking-input", inputs: ["loading", "product", "bookingId"], outputs: ["productChange", "bookingIdChange", "lookup"] }, { kind: "component", type: SbdWorkflowActionsComponent, selector: "app-sbd-workflow-actions", inputs: ["bookingId"], outputs: ["cancelBooking"] }, { kind: "component", type: SbdActionGridComponent, selector: "app-sbd-action-grid", inputs: ["actions", "activeKey", "loadingKey"], outputs: ["actionSelected"] }, { kind: "component", type: SbdCancelDialogComponent, selector: "app-sbd-cancel-dialog", inputs: ["visible", "bookingId", "product", "pnrInfo", "bookingInfo"], outputs: ["closed", "confirmed"] }, { kind: "component", type: AlmatarHotelAutoCancellationComponent, selector: "almatar-hotel-auto-cancellation", inputs: ["selectedHotelBooking"], outputs: ["closed", "cancellationSuccess", "nonRefundableSubmitSuccess", "chatWithAgent"] }, { kind: "component", type: SbdFlightItineraryCardComponent, selector: "app-sbd-flight-itinerary-card", inputs: ["data", "product", "verified"] }, { kind: "component", type: SbdDataSearchComponent, selector: "app-sbd-data-search", inputs: ["data"] }, { kind: "component", type: SbdActionDialogComponent, selector: "app-sbd-action-dialog", inputs: ["visible", "bookingId", "product", "actions", "initialKey", "preloadedData"], outputs: ["closed"] }, { kind: "component", type: SbdAddNoteDialogComponent, selector: "app-sbd-add-note-dialog", inputs: ["visible", "bookingId", "product"], outputs: ["closed"] }, { kind: "component", type: SbdHotelContentComponent, selector: "app-sbd-hotel-content", inputs: ["bookingData", "bookingStatus", "bookingId", "dataVerified", "bookingNotes", "bookingHistory", "historyGroups", "activeContextTab"], outputs: ["cancelBooking", "addNoteRequested", "contextTabChanged"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SmartBookingDashboardComponent, isStandalone: true, selector: "app-smart-booking-dashboard", host: { listeners: { "document:keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div class=\"sbd-page\">\n\n  <!-- Search bar full-width at top -->\n  <div class=\"sbd-page__search\">\n    <app-sbd-booking-input\n      [(product)]=\"product\"\n      [(bookingId)]=\"bookingId\"\n      [loading]=\"bookingStatus() === 'loading'\"\n      (lookup)=\"lookupBooking()\"\n    />\n  </div>\n\n  <!-- Hotel: Use dedicated component -->\n  @if (product() === 'hotel') {\n    <app-sbd-hotel-content\n      [bookingData]=\"bookingData()\"\n      [bookingStatus]=\"bookingStatus()\"\n      [bookingId]=\"bookingId()\"\n      [dataVerified]=\"dataVerified()\"\n      [bookingNotes]=\"bookingNotes()\"\n      [bookingHistory]=\"bookingHistory()\"\n      [historyGroups]=\"historyGroups()\"\n      [activeContextTab]=\"activeContextTab()\"\n      (cancelBooking)=\"cancelDialogOpen.set(true)\"\n      (addNoteRequested)=\"addNoteDialogOpen.set(true)\"\n      (contextTabChanged)=\"activeContextTab.set($event)\"\n    />\n  }\n\n  <!-- Flight: Keep original 2-column layout -->\n  @if (product() === 'flight') {\n    <div class=\"sbd-page__content\">\n\n      <!-- Left: booking context -->\n      <aside class=\"sbd-page__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-flight-itinerary-card [product]=\"product()\" [data]=\"bookingData()\" [verified]=\"dataVerified()\" />\n        }\n\n        <!-- Loading skeleton for aside -->\n        @if (bookingStatus() === 'loading') {\n          <div class=\"sbd-page__skeleton-card\">\n            <div class=\"sbd-page__skeleton-row\" style=\"width:60%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:40%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:80%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:50%\"></div>\n          </div>\n        }\n\n      </aside>\n\n      <!-- Right: agent workspace -->\n      <main class=\"sbd-page__main\">\n\n        <!-- Error state -->\n        @if (bookingStatus() === 'error') {\n          <div class=\"sbd-page__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-page__quick-actions\">\n            <span class=\"sbd-page__quick-label\">Quick actions</span>\n            <app-sbd-workflow-actions\n              [bookingId]=\"bookingId()\"\n              [showReissue]=\"reissueEnabled && product() === 'flight'\"\n              (cancelBooking)=\"cancelDialogOpen.set(true)\"\n              (reissue)=\"reissueDialogOpen.set(true)\"\n            />\n          </div>\n\n          <!-- Action grid -->\n          <app-sbd-action-grid\n            [actions]=\"availableActions()\"\n            [activeKey]=\"selectedActionKey()\"\n            (actionSelected)=\"openAction($event)\"\n          />\n\n          <!-- Context: Notes + Changes tabbed -->\n          <div class=\"sbd-page__context\">\n\n            <!-- Tab bar -->\n            <div class=\"sbd-page__context-tabs\">\n              <button class=\"sbd-page__context-tab\"\n                [class.sbd-page__context-tab--active]=\"activeContextTab() === 'changes'\"\n                (click)=\"activeContextTab.set('changes')\">\n                <i class=\"pi pi-history\"></i>\n                Changes\n                @if (bookingHistory().length > 0) {\n                  <span class=\"sbd-page__context-pill sbd-page__context-pill--changes\">{{ bookingHistory().length }}</span>\n                }\n              </button>\n              <button class=\"sbd-page__context-tab\"\n                [class.sbd-page__context-tab--active]=\"activeContextTab() === 'notes'\"\n                (click)=\"activeContextTab.set('notes')\">\n                <i class=\"pi pi-comments\"></i>\n                Notes\n                <span class=\"sbd-page__context-pill sbd-page__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-page__context-add\"\n                  (click)=\"addNoteDialogOpen.set(true)\">\n                </button>\n              }\n            </div>\n\n            <!-- Notes tab -->\n            @if (activeContextTab() === 'notes') {\n              <div class=\"sbd-page__notes-list\">\n                @if (bookingNotes().length === 0) {\n                  <div class=\"sbd-page__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-page__note\">\n                    <div class=\"sbd-page__note-top\">\n                      <span class=\"sbd-page__note-badge sbd-page__note-badge--{{ note.action | lowercase }}\">\n                        {{ note.action }}\n                      </span>\n                      <span class=\"sbd-page__note-author\">\n                        {{ note.writtenBy?.firstName }} {{ note.writtenBy?.lastName }}\n                      </span>\n                      <span class=\"sbd-page__note-date\">{{ fmtNoteDate(note.date) }}</span>\n                    </div>\n                    <p class=\"sbd-page__note-msg\">{{ note.message }}</p>\n                  </div>\n                }\n              </div>\n            }\n\n            <!-- Changes tab -->\n            @if (activeContextTab() === 'changes') {\n              <div class=\"sbd-page__changes-groups\">\n                @if (historyGroups().length === 0) {\n                  <div class=\"sbd-page__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-page__changes-group\">\n                    <div class=\"sbd-page__changes-meta\">\n                      <i class=\"pi pi-user\"></i>\n                      <strong>{{ group.changedBy }}</strong>\n                      <span class=\"sbd-page__changes-sep\">\u00B7</span>\n                      <span>{{ fmtDate(group.changedAt) }}</span>\n                    </div>\n                    <table class=\"sbd-page__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-page__changes-field\">{{ formatField(entry.field) }}</td>\n                            <td class=\"sbd-page__changes-old\">{{ entry.from }}</td>\n                            <td class=\"sbd-page__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-page__skeleton-card\">\n            <div class=\"sbd-page__skeleton-row\" style=\"width:40%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:25%\"></div>\n          </div>\n        }\n\n      </main>\n\n    </div>\n  }\n\n</div>\n\n<app-sbd-cancel-dialog\n  [visible]=\"cancelDialogOpen() && product() === 'flight'\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  [pnrInfo]=\"cancelPnrInfo()\"\n  [bookingInfo]=\"bookingData()\"\n  (closed)=\"cancelDialogOpen.set(false)\"\n  (confirmed)=\"bookingStatus.set('idle'); bookingData.set(null)\"\n/>\n\n<almatar-hotel-auto-cancellation\n  *ngIf=\"cancelDialogOpen() && product() === 'hotel'\"\n  [selectedHotelBooking]=\"bookingData()\"\n  (closed)=\"cancelDialogOpen.set(false)\"\n  (cancellationSuccess)=\"bookingStatus.set('idle'); bookingData.set(null)\"\n/>\n\n<app-sbd-action-dialog\n  [visible]=\"actionDialogOpen()\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  [actions]=\"availableActions()\"\n  [initialKey]=\"selectedActionKey()\"\n  [preloadedData]=\"bookingData()\"\n  (closed)=\"actionDialogOpen.set(false)\"\n/>\n\n<app-sbd-add-note-dialog\n  [visible]=\"addNoteDialogOpen()\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  (closed)=\"addNoteDialogOpen.set(false)\"\n/>\n\n<app-sbd-reissue-dialog\n  [visible]=\"reissueDialogOpen()\"\n  [bookingId]=\"bookingId()\"\n  [bookingData]=\"bookingData()\"\n  (closed)=\"reissueDialogOpen.set(false)\"\n/>\n", styles: [".sbd-page{display:flex;flex-direction:column;gap:20px;padding:24px;max-width:1400px;min-height:100%}.sbd-page__search{width:100%}.sbd-page__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-page__error i{font-size:18px}.sbd-page__content{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}@media (max-width: 960px){.sbd-page__content{grid-template-columns:1fr}}.sbd-page__aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:20px}.sbd-page__main{display:flex;flex-direction:column;gap:16px}.sbd-page__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-page__quick-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;flex-shrink:0}.sbd-page__context{background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.sbd-page__context-tabs{display:flex;align-items:center;border-bottom:1px solid #e2e8f0;background:#f8fafc}.sbd-page__context-add{margin-left:auto;margin-right:10px}.sbd-page__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-page__context-tab .pi{font-size:13px}.sbd-page__context-tab:hover{color:#334155}.sbd-page__context-tab--active{color:#1e2e4a;border-bottom-color:var(--sbd-primary, #3b82f6);background:#fff}.sbd-page__context-pill{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:10px}.sbd-page__context-pill--notes{background:#e0e7ff;color:#4338ca}.sbd-page__context-pill--changes{background:#fef3c7;color:#b45309}.sbd-page__context-empty{display:flex;align-items:center;gap:8px;padding:24px 20px;font-size:13px;color:#94a3b8}.sbd-page__context-empty .pi{font-size:16px}.sbd-page__notes-list{display:flex;flex-direction:column}.sbd-page__note{padding:12px 16px;border-bottom:1px solid #f1f5f9;display:flex;flex-direction:column;gap:6px}.sbd-page__note:last-child{border-bottom:none}.sbd-page__note-top{display:flex;align-items:center;gap:8px}.sbd-page__note-badge{font-size:10px;font-weight:800;letter-spacing:.05em;padding:2px 8px;border-radius:10px;text-transform:uppercase;flex-shrink:0}.sbd-page__note-badge--general{background:#dbeafe;color:#1d4ed8}.sbd-page__note-badge--remark{background:#fef3c7;color:#b45309}.sbd-page__note-badge--feedback{background:#f3e8ff;color:#7e22ce}.sbd-page__note-author{font-size:12px;font-weight:700;color:#1e2e4a}.sbd-page__note-date{margin-left:auto;font-size:11px;color:#94a3b8;white-space:nowrap}.sbd-page__note-msg{margin:0;font-size:13px;color:#334155;line-height:1.55}.sbd-page__changes-groups{display:flex;flex-direction:column}.sbd-page__changes-group{border-bottom:1px solid #f1f5f9}.sbd-page__changes-group:last-child{border-bottom:none}.sbd-page__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-page__changes-meta strong{font-weight:700;color:#334155}.sbd-page__changes-meta .pi{font-size:11px;color:#94a3b8}.sbd-page__changes-sep{color:#cbd5e1}.sbd-page__changes-table{width:100%;border-collapse:collapse;font-size:12.5px}.sbd-page__changes-table thead tr{background:#f8fafc;border-bottom:1px solid #e2e8f0}.sbd-page__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-page__changes-table thead th .pi{margin-right:4px;font-size:10px}.sbd-page__changes-table thead th:nth-child(2){color:#dc2626}.sbd-page__changes-table thead th:nth-child(3){color:#16a34a}.sbd-page__changes-table tbody tr{border-bottom:1px solid #f1f5f9}.sbd-page__changes-table tbody tr:last-child{border-bottom:none}.sbd-page__changes-table tbody tr:hover{background:#f8fafc}.sbd-page__changes-table tbody td{padding:8px 14px;vertical-align:top;word-break:break-word}.sbd-page__changes-field{font-size:12px;font-weight:600;color:#475569;width:28%}.sbd-page__changes-old{color:#dc2626;font-weight:500;text-decoration:line-through;opacity:.8;width:36%}.sbd-page__changes-new{color:#16a34a;font-weight:700;width:36%}.sbd-page__content--loading{opacity:.6;pointer-events:none}.sbd-page__skeleton-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}.sbd-page__skeleton-row{height:13px;background:#f1f5f9;border-radius:6px;animation:sbd-shimmer 1.4s ease-in-out infinite}.sbd-page__skeleton-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:8px}.sbd-page__skeleton-chip{height:56px;background:#f1f5f9;border-radius:8px;animation:sbd-shimmer 1.4s ease-in-out infinite}@keyframes sbd-shimmer{0%,to{opacity:1}50%{opacity:.45}}@keyframes sbd-fadein{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "component", type: SbdBookingInputComponent, selector: "app-sbd-booking-input", inputs: ["loading", "product", "bookingId"], outputs: ["productChange", "bookingIdChange", "lookup"] }, { kind: "component", type: SbdWorkflowActionsComponent, selector: "app-sbd-workflow-actions", inputs: ["bookingId", "showReissue"], outputs: ["cancelBooking", "reissue"] }, { kind: "component", type: SbdActionGridComponent, selector: "app-sbd-action-grid", inputs: ["actions", "activeKey", "loadingKey"], outputs: ["actionSelected"] }, { kind: "component", type: SbdCancelDialogComponent, selector: "app-sbd-cancel-dialog", inputs: ["visible", "bookingId", "product", "pnrInfo", "bookingInfo"], outputs: ["closed", "confirmed"] }, { kind: "component", type: AlmatarHotelAutoCancellationComponent, selector: "almatar-hotel-auto-cancellation", inputs: ["selectedHotelBooking"], outputs: ["closed", "cancellationSuccess", "nonRefundableSubmitSuccess", "chatWithAgent"] }, { kind: "component", type: SbdFlightItineraryCardComponent, selector: "app-sbd-flight-itinerary-card", inputs: ["data", "product", "verified"] }, { kind: "component", type: SbdDataSearchComponent, selector: "app-sbd-data-search", inputs: ["data"] }, { kind: "component", type: SbdActionDialogComponent, selector: "app-sbd-action-dialog", inputs: ["visible", "bookingId", "product", "actions", "initialKey", "preloadedData"], outputs: ["closed"] }, { kind: "component", type: SbdAddNoteDialogComponent, selector: "app-sbd-add-note-dialog", inputs: ["visible", "bookingId", "product"], outputs: ["closed"] }, { kind: "component", type: SbdReissueDialogComponent, selector: "app-sbd-reissue-dialog", inputs: ["visible", "bookingId", "bookingData"], outputs: ["closed"] }, { kind: "component", type: SbdHotelContentComponent, selector: "app-sbd-hotel-content", inputs: ["bookingData", "bookingStatus", "bookingId", "dataVerified", "bookingNotes", "bookingHistory", "historyGroups", "activeContextTab"], outputs: ["cancelBooking", "addNoteRequested", "contextTabChanged"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SmartBookingDashboardComponent, decorators: [{
             type: Component,
@@ -6310,11 +8418,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         SbdDataSearchComponent,
                         SbdActionDialogComponent,
                         SbdAddNoteDialogComponent,
+                        SbdReissueDialogComponent,
                         SbdHotelContentComponent,
                         LowerCasePipe,
                         NgIf,
                         ButtonModule,
-                    ], template: "<div class=\"sbd-page\">\n\n  <!-- Search bar full-width at top -->\n  <div class=\"sbd-page__search\">\n    <app-sbd-booking-input\n      [(product)]=\"product\"\n      [(bookingId)]=\"bookingId\"\n      [loading]=\"bookingStatus() === 'loading'\"\n      (lookup)=\"lookupBooking()\"\n    />\n  </div>\n\n  <!-- Hotel: Use dedicated component -->\n  @if (product() === 'hotel') {\n    <app-sbd-hotel-content\n      [bookingData]=\"bookingData()\"\n      [bookingStatus]=\"bookingStatus()\"\n      [bookingId]=\"bookingId()\"\n      [dataVerified]=\"dataVerified()\"\n      [bookingNotes]=\"bookingNotes()\"\n      [bookingHistory]=\"bookingHistory()\"\n      [historyGroups]=\"historyGroups()\"\n      [activeContextTab]=\"activeContextTab()\"\n      (cancelBooking)=\"cancelDialogOpen.set(true)\"\n      (addNoteRequested)=\"addNoteDialogOpen.set(true)\"\n      (contextTabChanged)=\"activeContextTab.set($event)\"\n    />\n  }\n\n  <!-- Flight: Keep original 2-column layout -->\n  @if (product() === 'flight') {\n    <div class=\"sbd-page__content\">\n\n      <!-- Left: booking context -->\n      <aside class=\"sbd-page__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-flight-itinerary-card [product]=\"product()\" [data]=\"bookingData()\" [verified]=\"dataVerified()\" />\n        }\n\n        <!-- Loading skeleton for aside -->\n        @if (bookingStatus() === 'loading') {\n          <div class=\"sbd-page__skeleton-card\">\n            <div class=\"sbd-page__skeleton-row\" style=\"width:60%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:40%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:80%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:50%\"></div>\n          </div>\n        }\n\n      </aside>\n\n      <!-- Right: agent workspace -->\n      <main class=\"sbd-page__main\">\n\n        <!-- Error state -->\n        @if (bookingStatus() === 'error') {\n          <div class=\"sbd-page__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-page__quick-actions\">\n            <span class=\"sbd-page__quick-label\">Quick actions</span>\n            <app-sbd-workflow-actions\n              [bookingId]=\"bookingId()\"\n              (cancelBooking)=\"cancelDialogOpen.set(true)\"\n            />\n          </div>\n\n          <!-- Action grid -->\n          <app-sbd-action-grid\n            [actions]=\"availableActions()\"\n            [activeKey]=\"selectedActionKey()\"\n            (actionSelected)=\"openAction($event)\"\n          />\n\n          <!-- Context: Notes + Changes tabbed -->\n          <div class=\"sbd-page__context\">\n\n            <!-- Tab bar -->\n            <div class=\"sbd-page__context-tabs\">\n              <button class=\"sbd-page__context-tab\"\n                [class.sbd-page__context-tab--active]=\"activeContextTab() === 'changes'\"\n                (click)=\"activeContextTab.set('changes')\">\n                <i class=\"pi pi-history\"></i>\n                Changes\n                @if (bookingHistory().length > 0) {\n                  <span class=\"sbd-page__context-pill sbd-page__context-pill--changes\">{{ bookingHistory().length }}</span>\n                }\n              </button>\n              <button class=\"sbd-page__context-tab\"\n                [class.sbd-page__context-tab--active]=\"activeContextTab() === 'notes'\"\n                (click)=\"activeContextTab.set('notes')\">\n                <i class=\"pi pi-comments\"></i>\n                Notes\n                <span class=\"sbd-page__context-pill sbd-page__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-page__context-add\"\n                  (click)=\"addNoteDialogOpen.set(true)\">\n                </button>\n              }\n            </div>\n\n            <!-- Notes tab -->\n            @if (activeContextTab() === 'notes') {\n              <div class=\"sbd-page__notes-list\">\n                @if (bookingNotes().length === 0) {\n                  <div class=\"sbd-page__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-page__note\">\n                    <div class=\"sbd-page__note-top\">\n                      <span class=\"sbd-page__note-badge sbd-page__note-badge--{{ note.action | lowercase }}\">\n                        {{ note.action }}\n                      </span>\n                      <span class=\"sbd-page__note-author\">\n                        {{ note.writtenBy?.firstName }} {{ note.writtenBy?.lastName }}\n                      </span>\n                      <span class=\"sbd-page__note-date\">{{ fmtNoteDate(note.date) }}</span>\n                    </div>\n                    <p class=\"sbd-page__note-msg\">{{ note.message }}</p>\n                  </div>\n                }\n              </div>\n            }\n\n            <!-- Changes tab -->\n            @if (activeContextTab() === 'changes') {\n              <div class=\"sbd-page__changes-groups\">\n                @if (historyGroups().length === 0) {\n                  <div class=\"sbd-page__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-page__changes-group\">\n                    <div class=\"sbd-page__changes-meta\">\n                      <i class=\"pi pi-user\"></i>\n                      <strong>{{ group.changedBy }}</strong>\n                      <span class=\"sbd-page__changes-sep\">\u00B7</span>\n                      <span>{{ fmtDate(group.changedAt) }}</span>\n                    </div>\n                    <table class=\"sbd-page__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-page__changes-field\">{{ formatField(entry.field) }}</td>\n                            <td class=\"sbd-page__changes-old\">{{ entry.from }}</td>\n                            <td class=\"sbd-page__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-page__skeleton-card\">\n            <div class=\"sbd-page__skeleton-row\" style=\"width:40%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:25%\"></div>\n          </div>\n        }\n\n      </main>\n\n    </div>\n  }\n\n</div>\n\n<app-sbd-cancel-dialog\n  [visible]=\"cancelDialogOpen() && product() === 'flight'\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  [pnrInfo]=\"cancelPnrInfo()\"\n  [bookingInfo]=\"bookingData()\"\n  (closed)=\"cancelDialogOpen.set(false)\"\n  (confirmed)=\"bookingStatus.set('idle'); bookingData.set(null)\"\n/>\n\n<almatar-hotel-auto-cancellation\n  *ngIf=\"cancelDialogOpen() && product() === 'hotel'\"\n  [selectedHotelBooking]=\"bookingData()\"\n  (closed)=\"cancelDialogOpen.set(false)\"\n  (cancellationSuccess)=\"bookingStatus.set('idle'); bookingData.set(null)\"\n/>\n\n<app-sbd-action-dialog\n  [visible]=\"actionDialogOpen()\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  [actions]=\"availableActions()\"\n  [initialKey]=\"selectedActionKey()\"\n  [preloadedData]=\"bookingData()\"\n  (closed)=\"actionDialogOpen.set(false)\"\n/>\n\n<app-sbd-add-note-dialog\n  [visible]=\"addNoteDialogOpen()\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  (closed)=\"addNoteDialogOpen.set(false)\"\n/>\n", styles: [".sbd-page{display:flex;flex-direction:column;gap:20px;padding:24px;max-width:1400px;min-height:100%}.sbd-page__search{width:100%}.sbd-page__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-page__error i{font-size:18px}.sbd-page__content{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}@media (max-width: 960px){.sbd-page__content{grid-template-columns:1fr}}.sbd-page__aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:20px}.sbd-page__main{display:flex;flex-direction:column;gap:16px}.sbd-page__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-page__quick-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;flex-shrink:0}.sbd-page__context{background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.sbd-page__context-tabs{display:flex;align-items:center;border-bottom:1px solid #e2e8f0;background:#f8fafc}.sbd-page__context-add{margin-left:auto;margin-right:10px}.sbd-page__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-page__context-tab .pi{font-size:13px}.sbd-page__context-tab:hover{color:#334155}.sbd-page__context-tab--active{color:#1e2e4a;border-bottom-color:var(--sbd-primary, #3b82f6);background:#fff}.sbd-page__context-pill{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:10px}.sbd-page__context-pill--notes{background:#e0e7ff;color:#4338ca}.sbd-page__context-pill--changes{background:#fef3c7;color:#b45309}.sbd-page__context-empty{display:flex;align-items:center;gap:8px;padding:24px 20px;font-size:13px;color:#94a3b8}.sbd-page__context-empty .pi{font-size:16px}.sbd-page__notes-list{display:flex;flex-direction:column}.sbd-page__note{padding:12px 16px;border-bottom:1px solid #f1f5f9;display:flex;flex-direction:column;gap:6px}.sbd-page__note:last-child{border-bottom:none}.sbd-page__note-top{display:flex;align-items:center;gap:8px}.sbd-page__note-badge{font-size:10px;font-weight:800;letter-spacing:.05em;padding:2px 8px;border-radius:10px;text-transform:uppercase;flex-shrink:0}.sbd-page__note-badge--general{background:#dbeafe;color:#1d4ed8}.sbd-page__note-badge--remark{background:#fef3c7;color:#b45309}.sbd-page__note-badge--feedback{background:#f3e8ff;color:#7e22ce}.sbd-page__note-author{font-size:12px;font-weight:700;color:#1e2e4a}.sbd-page__note-date{margin-left:auto;font-size:11px;color:#94a3b8;white-space:nowrap}.sbd-page__note-msg{margin:0;font-size:13px;color:#334155;line-height:1.55}.sbd-page__changes-groups{display:flex;flex-direction:column}.sbd-page__changes-group{border-bottom:1px solid #f1f5f9}.sbd-page__changes-group:last-child{border-bottom:none}.sbd-page__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-page__changes-meta strong{font-weight:700;color:#334155}.sbd-page__changes-meta .pi{font-size:11px;color:#94a3b8}.sbd-page__changes-sep{color:#cbd5e1}.sbd-page__changes-table{width:100%;border-collapse:collapse;font-size:12.5px}.sbd-page__changes-table thead tr{background:#f8fafc;border-bottom:1px solid #e2e8f0}.sbd-page__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-page__changes-table thead th .pi{margin-right:4px;font-size:10px}.sbd-page__changes-table thead th:nth-child(2){color:#dc2626}.sbd-page__changes-table thead th:nth-child(3){color:#16a34a}.sbd-page__changes-table tbody tr{border-bottom:1px solid #f1f5f9}.sbd-page__changes-table tbody tr:last-child{border-bottom:none}.sbd-page__changes-table tbody tr:hover{background:#f8fafc}.sbd-page__changes-table tbody td{padding:8px 14px;vertical-align:top;word-break:break-word}.sbd-page__changes-field{font-size:12px;font-weight:600;color:#475569;width:28%}.sbd-page__changes-old{color:#dc2626;font-weight:500;text-decoration:line-through;opacity:.8;width:36%}.sbd-page__changes-new{color:#16a34a;font-weight:700;width:36%}.sbd-page__content--loading{opacity:.6;pointer-events:none}.sbd-page__skeleton-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}.sbd-page__skeleton-row{height:13px;background:#f1f5f9;border-radius:6px;animation:sbd-shimmer 1.4s ease-in-out infinite}.sbd-page__skeleton-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:8px}.sbd-page__skeleton-chip{height:56px;background:#f1f5f9;border-radius:8px;animation:sbd-shimmer 1.4s ease-in-out infinite}@keyframes sbd-shimmer{0%,to{opacity:1}50%{opacity:.45}}@keyframes sbd-fadein{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+                    ], template: "<div class=\"sbd-page\">\n\n  <!-- Search bar full-width at top -->\n  <div class=\"sbd-page__search\">\n    <app-sbd-booking-input\n      [(product)]=\"product\"\n      [(bookingId)]=\"bookingId\"\n      [loading]=\"bookingStatus() === 'loading'\"\n      (lookup)=\"lookupBooking()\"\n    />\n  </div>\n\n  <!-- Hotel: Use dedicated component -->\n  @if (product() === 'hotel') {\n    <app-sbd-hotel-content\n      [bookingData]=\"bookingData()\"\n      [bookingStatus]=\"bookingStatus()\"\n      [bookingId]=\"bookingId()\"\n      [dataVerified]=\"dataVerified()\"\n      [bookingNotes]=\"bookingNotes()\"\n      [bookingHistory]=\"bookingHistory()\"\n      [historyGroups]=\"historyGroups()\"\n      [activeContextTab]=\"activeContextTab()\"\n      (cancelBooking)=\"cancelDialogOpen.set(true)\"\n      (addNoteRequested)=\"addNoteDialogOpen.set(true)\"\n      (contextTabChanged)=\"activeContextTab.set($event)\"\n    />\n  }\n\n  <!-- Flight: Keep original 2-column layout -->\n  @if (product() === 'flight') {\n    <div class=\"sbd-page__content\">\n\n      <!-- Left: booking context -->\n      <aside class=\"sbd-page__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-flight-itinerary-card [product]=\"product()\" [data]=\"bookingData()\" [verified]=\"dataVerified()\" />\n        }\n\n        <!-- Loading skeleton for aside -->\n        @if (bookingStatus() === 'loading') {\n          <div class=\"sbd-page__skeleton-card\">\n            <div class=\"sbd-page__skeleton-row\" style=\"width:60%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:40%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:80%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:50%\"></div>\n          </div>\n        }\n\n      </aside>\n\n      <!-- Right: agent workspace -->\n      <main class=\"sbd-page__main\">\n\n        <!-- Error state -->\n        @if (bookingStatus() === 'error') {\n          <div class=\"sbd-page__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-page__quick-actions\">\n            <span class=\"sbd-page__quick-label\">Quick actions</span>\n            <app-sbd-workflow-actions\n              [bookingId]=\"bookingId()\"\n              [showReissue]=\"reissueEnabled && product() === 'flight'\"\n              (cancelBooking)=\"cancelDialogOpen.set(true)\"\n              (reissue)=\"reissueDialogOpen.set(true)\"\n            />\n          </div>\n\n          <!-- Action grid -->\n          <app-sbd-action-grid\n            [actions]=\"availableActions()\"\n            [activeKey]=\"selectedActionKey()\"\n            (actionSelected)=\"openAction($event)\"\n          />\n\n          <!-- Context: Notes + Changes tabbed -->\n          <div class=\"sbd-page__context\">\n\n            <!-- Tab bar -->\n            <div class=\"sbd-page__context-tabs\">\n              <button class=\"sbd-page__context-tab\"\n                [class.sbd-page__context-tab--active]=\"activeContextTab() === 'changes'\"\n                (click)=\"activeContextTab.set('changes')\">\n                <i class=\"pi pi-history\"></i>\n                Changes\n                @if (bookingHistory().length > 0) {\n                  <span class=\"sbd-page__context-pill sbd-page__context-pill--changes\">{{ bookingHistory().length }}</span>\n                }\n              </button>\n              <button class=\"sbd-page__context-tab\"\n                [class.sbd-page__context-tab--active]=\"activeContextTab() === 'notes'\"\n                (click)=\"activeContextTab.set('notes')\">\n                <i class=\"pi pi-comments\"></i>\n                Notes\n                <span class=\"sbd-page__context-pill sbd-page__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-page__context-add\"\n                  (click)=\"addNoteDialogOpen.set(true)\">\n                </button>\n              }\n            </div>\n\n            <!-- Notes tab -->\n            @if (activeContextTab() === 'notes') {\n              <div class=\"sbd-page__notes-list\">\n                @if (bookingNotes().length === 0) {\n                  <div class=\"sbd-page__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-page__note\">\n                    <div class=\"sbd-page__note-top\">\n                      <span class=\"sbd-page__note-badge sbd-page__note-badge--{{ note.action | lowercase }}\">\n                        {{ note.action }}\n                      </span>\n                      <span class=\"sbd-page__note-author\">\n                        {{ note.writtenBy?.firstName }} {{ note.writtenBy?.lastName }}\n                      </span>\n                      <span class=\"sbd-page__note-date\">{{ fmtNoteDate(note.date) }}</span>\n                    </div>\n                    <p class=\"sbd-page__note-msg\">{{ note.message }}</p>\n                  </div>\n                }\n              </div>\n            }\n\n            <!-- Changes tab -->\n            @if (activeContextTab() === 'changes') {\n              <div class=\"sbd-page__changes-groups\">\n                @if (historyGroups().length === 0) {\n                  <div class=\"sbd-page__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-page__changes-group\">\n                    <div class=\"sbd-page__changes-meta\">\n                      <i class=\"pi pi-user\"></i>\n                      <strong>{{ group.changedBy }}</strong>\n                      <span class=\"sbd-page__changes-sep\">\u00B7</span>\n                      <span>{{ fmtDate(group.changedAt) }}</span>\n                    </div>\n                    <table class=\"sbd-page__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-page__changes-field\">{{ formatField(entry.field) }}</td>\n                            <td class=\"sbd-page__changes-old\">{{ entry.from }}</td>\n                            <td class=\"sbd-page__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-page__skeleton-card\">\n            <div class=\"sbd-page__skeleton-row\" style=\"width:40%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:25%\"></div>\n          </div>\n        }\n\n      </main>\n\n    </div>\n  }\n\n</div>\n\n<app-sbd-cancel-dialog\n  [visible]=\"cancelDialogOpen() && product() === 'flight'\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  [pnrInfo]=\"cancelPnrInfo()\"\n  [bookingInfo]=\"bookingData()\"\n  (closed)=\"cancelDialogOpen.set(false)\"\n  (confirmed)=\"bookingStatus.set('idle'); bookingData.set(null)\"\n/>\n\n<almatar-hotel-auto-cancellation\n  *ngIf=\"cancelDialogOpen() && product() === 'hotel'\"\n  [selectedHotelBooking]=\"bookingData()\"\n  (closed)=\"cancelDialogOpen.set(false)\"\n  (cancellationSuccess)=\"bookingStatus.set('idle'); bookingData.set(null)\"\n/>\n\n<app-sbd-action-dialog\n  [visible]=\"actionDialogOpen()\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  [actions]=\"availableActions()\"\n  [initialKey]=\"selectedActionKey()\"\n  [preloadedData]=\"bookingData()\"\n  (closed)=\"actionDialogOpen.set(false)\"\n/>\n\n<app-sbd-add-note-dialog\n  [visible]=\"addNoteDialogOpen()\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  (closed)=\"addNoteDialogOpen.set(false)\"\n/>\n\n<app-sbd-reissue-dialog\n  [visible]=\"reissueDialogOpen()\"\n  [bookingId]=\"bookingId()\"\n  [bookingData]=\"bookingData()\"\n  (closed)=\"reissueDialogOpen.set(false)\"\n/>\n", styles: [".sbd-page{display:flex;flex-direction:column;gap:20px;padding:24px;max-width:1400px;min-height:100%}.sbd-page__search{width:100%}.sbd-page__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-page__error i{font-size:18px}.sbd-page__content{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}@media (max-width: 960px){.sbd-page__content{grid-template-columns:1fr}}.sbd-page__aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:20px}.sbd-page__main{display:flex;flex-direction:column;gap:16px}.sbd-page__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-page__quick-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;flex-shrink:0}.sbd-page__context{background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.sbd-page__context-tabs{display:flex;align-items:center;border-bottom:1px solid #e2e8f0;background:#f8fafc}.sbd-page__context-add{margin-left:auto;margin-right:10px}.sbd-page__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-page__context-tab .pi{font-size:13px}.sbd-page__context-tab:hover{color:#334155}.sbd-page__context-tab--active{color:#1e2e4a;border-bottom-color:var(--sbd-primary, #3b82f6);background:#fff}.sbd-page__context-pill{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:10px}.sbd-page__context-pill--notes{background:#e0e7ff;color:#4338ca}.sbd-page__context-pill--changes{background:#fef3c7;color:#b45309}.sbd-page__context-empty{display:flex;align-items:center;gap:8px;padding:24px 20px;font-size:13px;color:#94a3b8}.sbd-page__context-empty .pi{font-size:16px}.sbd-page__notes-list{display:flex;flex-direction:column}.sbd-page__note{padding:12px 16px;border-bottom:1px solid #f1f5f9;display:flex;flex-direction:column;gap:6px}.sbd-page__note:last-child{border-bottom:none}.sbd-page__note-top{display:flex;align-items:center;gap:8px}.sbd-page__note-badge{font-size:10px;font-weight:800;letter-spacing:.05em;padding:2px 8px;border-radius:10px;text-transform:uppercase;flex-shrink:0}.sbd-page__note-badge--general{background:#dbeafe;color:#1d4ed8}.sbd-page__note-badge--remark{background:#fef3c7;color:#b45309}.sbd-page__note-badge--feedback{background:#f3e8ff;color:#7e22ce}.sbd-page__note-author{font-size:12px;font-weight:700;color:#1e2e4a}.sbd-page__note-date{margin-left:auto;font-size:11px;color:#94a3b8;white-space:nowrap}.sbd-page__note-msg{margin:0;font-size:13px;color:#334155;line-height:1.55}.sbd-page__changes-groups{display:flex;flex-direction:column}.sbd-page__changes-group{border-bottom:1px solid #f1f5f9}.sbd-page__changes-group:last-child{border-bottom:none}.sbd-page__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-page__changes-meta strong{font-weight:700;color:#334155}.sbd-page__changes-meta .pi{font-size:11px;color:#94a3b8}.sbd-page__changes-sep{color:#cbd5e1}.sbd-page__changes-table{width:100%;border-collapse:collapse;font-size:12.5px}.sbd-page__changes-table thead tr{background:#f8fafc;border-bottom:1px solid #e2e8f0}.sbd-page__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-page__changes-table thead th .pi{margin-right:4px;font-size:10px}.sbd-page__changes-table thead th:nth-child(2){color:#dc2626}.sbd-page__changes-table thead th:nth-child(3){color:#16a34a}.sbd-page__changes-table tbody tr{border-bottom:1px solid #f1f5f9}.sbd-page__changes-table tbody tr:last-child{border-bottom:none}.sbd-page__changes-table tbody tr:hover{background:#f8fafc}.sbd-page__changes-table tbody td{padding:8px 14px;vertical-align:top;word-break:break-word}.sbd-page__changes-field{font-size:12px;font-weight:600;color:#475569;width:28%}.sbd-page__changes-old{color:#dc2626;font-weight:500;text-decoration:line-through;opacity:.8;width:36%}.sbd-page__changes-new{color:#16a34a;font-weight:700;width:36%}.sbd-page__content--loading{opacity:.6;pointer-events:none}.sbd-page__skeleton-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}.sbd-page__skeleton-row{height:13px;background:#f1f5f9;border-radius:6px;animation:sbd-shimmer 1.4s ease-in-out infinite}.sbd-page__skeleton-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:8px}.sbd-page__skeleton-chip{height:56px;background:#f1f5f9;border-radius:8px;animation:sbd-shimmer 1.4s ease-in-out infinite}@keyframes sbd-shimmer{0%,to{opacity:1}50%{opacity:.45}}@keyframes sbd-fadein{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], propDecorators: { onKeydown: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
@@ -6353,5 +8462,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SBD_CONFIG, SBD_DEFAULT_CONFIG, SmartBookingDashboardComponent, SmartBookingDashboardModule, provideSmartBookingDashboard, smartBookingDashboardRoutes };
+export { SBD_CONFIG, SBD_DEFAULT_CONFIG, SBD_TOAST_HANDLER, SmartBookingDashboardComponent, SmartBookingDashboardModule, appendAuthParams, buildReissueBookingContext, buildReissueSearchParams, buildReissueSearchUrl, provideSmartBookingDashboard, smartBookingDashboardRoutes };
 //# sourceMappingURL=almatar-smart-booking-dashboard.mjs.map