@almatar/smart-booking-dashboard 0.0.1

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

@@ -0,0 +1,3259 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, Injectable, input, model, output, Component, computed, signal, effect, HostListener, NgModule } from '@angular/core';
+import { NgTemplateOutlet, NgClass, LowerCasePipe, UpperCasePipe } from '@angular/common';
+import * as i3$1 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import { HttpClient } from '@angular/common/http';
+import { map, catchError } from 'rxjs/operators';
+import { ToastrService } from 'ngx-toastr';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i2 from 'primeng/selectbutton';
+import { SelectButtonModule } from 'primeng/selectbutton';
+import * as i3 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+import * as i5 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
+import * as i1$1 from 'primeng/dialog';
+import { DialogModule } from 'primeng/dialog';
+import * as i1$2 from 'primeng/skeleton';
+import { SkeletonModule } from 'primeng/skeleton';
+import { TagModule } from 'primeng/tag';
+import * as i5$1 from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { of } from 'rxjs';
+import { trigger, transition, style, animate } from '@angular/animations';
+import * as i2$1 from 'primeng/api';
+import * as i1$3 from '@angular/router';
+import { RouterModule } from '@angular/router';
+
+const SBD_DEFAULT_CONFIG = {
+    apiBase: '/api',
+    platform: 'BO',
+};
+const SBD_CONFIG = new InjectionToken('SBD_CONFIG', {
+    providedIn: 'root',
+    factory: () => SBD_DEFAULT_CONFIG,
+});
+/** Optional: call in the host app's providers to override the defaults. */
+function provideSmartBookingDashboard(config = {}) {
+    return makeEnvironmentProviders([
+        { provide: SBD_CONFIG, useValue: { ...SBD_DEFAULT_CONFIG, ...config } },
+    ]);
+}
+
+class SbdBookingService {
+    constructor() {
+        this.http = inject(HttpClient);
+        this.config = inject(SBD_CONFIG);
+        this.base = this.config.apiBase;
+    }
+    getBooking(id, product, fields = 'all', language = 'en') {
+        const start = performance.now();
+        const fieldsParam = Array.isArray(fields) ? fields.join(',') : fields;
+        const productParam = product === 'flight' ? 'flights' : 'hotels';
+        const headers = { platform: this.config.platform, 'Accept-Language': language };
+        return this.http
+            .get(`${this.base}/v1/fcr/booking/information/${id}`, {
+            params: { product: productParam, fields: fieldsParam, addAirlineStamp: 'true' },
+            headers,
+        })
+            .pipe(map(data => ({ data, elapsedMs: performance.now() - start })));
+    }
+    resendTicket(id) {
+        return this.http.post(`${this.base}/v1/fcr/booking/${id}/resend`, {});
+    }
+    getRefundDetails(id, product = 'flight', language = 'en') {
+        const productParam = product === 'flight' ? 'flights' : 'hotels';
+        const headers = { platform: this.config.platform };
+        if (language === 'ar')
+            headers['Accept-Language'] = 'ar';
+        return this.http.post(`${this.base}/v1/fcr/refund/details`, {
+            bookingId: id,
+            product: productParam,
+        }, { headers });
+    }
+    addNote(id, product = 'flight', message, action = 'GENERAL') {
+        const productParam = product === 'flight' ? 'flight' : 'hotel';
+        return this.http.put(`${this.base}/v1/back-office/booking/${productParam}/addNote/${id}`, { notes: [{ message, action }] });
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    confirmCancel(id, product = 'flight', legInfo, selectedSource, preferredRefundMethod, splitAmounts) {
+        const productParam = product === 'flight' ? 'flights' : 'hotels';
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const body = { bookingId: String(id), product: productParam };
+        if (legInfo && legInfo.length > 0)
+            body.legInfo = legInfo;
+        if (selectedSource)
+            body.selectedSource = selectedSource;
+        if (preferredRefundMethod)
+            body.preferredRefundMethod = preferredRefundMethod;
+        if (preferredRefundMethod === 'split' && splitAmounts) {
+            body.walletRefundAmount = splitAmounts.walletRefundAmount;
+            body.totalCardRefundAmount = splitAmounts.totalCardRefundAmount;
+        }
+        return this.http.post(`${this.base}/v1/fcr/refund`, body, { headers: { platform: this.config.platform } });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdBookingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdBookingService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdBookingService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class SbdToastService {
+    constructor() {
+        this.toastr = inject(ToastrService);
+    }
+    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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const na$1 = (v) => v != null && v !== '' ? String(v) : 'Not available';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const bi = (data) => data?.data?.booking_info;
+const fmtMins = (mins) => mins != null ? `${Math.floor(mins / 60)}h ${mins % 60}m` : 'Not available';
+const fmtDate = (dt) => {
+    if (!dt)
+        return 'Not available';
+    try {
+        return new Date(dt).toLocaleString('en-GB', {
+            day: '2-digit', month: 'short', year: 'numeric',
+            hour: '2-digit', minute: '2-digit',
+        });
+    }
+    catch {
+        return dt;
+    }
+};
+const dirIcon = (dir) => (dir === 'Return' || dir === 'return') ? '←' : '→';
+/**
+ * Format a baggage allowance object (CabinBaggage / CheckedBaggage / UnderSeatBaggage).
+ * Negative values (-1) indicate the allowance is not applicable.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const fmtBag = (bag) => {
+    if (!bag)
+        return 'Not included';
+    const { Pieces, Weight, Unit, Dimension, Remark } = bag;
+    // Negative Pieces = not applicable (e.g. Pieces: -1, Weight: -1)
+    if (Pieces != null && Pieces < 0 && (Weight == null || Weight < 0))
+        return 'Not included';
+    // Zero across the board = not included
+    if (Pieces === 0 && (Weight === 0 || Weight == null))
+        return 'Not included';
+    const parts = [];
+    if (Pieces != null && Pieces > 0)
+        parts.push(`${Pieces} pc${Pieces > 1 ? 's' : ''}`);
+    if (Weight != null && Weight > 0)
+        parts.push(`${Weight} ${Unit ?? 'KG'}`);
+    if (Dimension)
+        parts.push(Dimension);
+    if (Remark)
+        parts.push(Remark);
+    return parts.length > 0 ? parts.join(' · ') : 'Not available';
+};
+/**
+ * Resolve pnr_info to a flat array regardless of shape.
+ * New BE format: [{pnr, LegDirectionality}, ...]
+ * Legacy format: {pnr: '...'} or null
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const resolvePnrList = (pnrRaw) => {
+    if (Array.isArray(pnrRaw))
+        return pnrRaw;
+    if (pnrRaw?.pnr)
+        return [{ pnr: pnrRaw.pnr, LegDirectionality: 'Departure' }];
+    return [];
+};
+const FLIGHT_ACTIONS = [
+    // ── Booking Overview ──────────────────────────────────────────────────────
+    {
+        key: 'booking_info',
+        type: 'flight',
+        label: 'Booking Overview',
+        subtitle: 'Route · Class · Fare',
+        icon: 'pi pi-file',
+        apiField: 'booking_info',
+        formatter: (data) => {
+            const d = bi(data);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const legs = d?.leg_info ?? [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const airlines = d?.airline_info ?? [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const passengers = d?.passenger_info?.passengers ?? [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const baggage = d?.baggage;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const dur = d?.duration;
+            const ps = d?.payment_status;
+            const cp = d?.cancellation_policy;
+            const pnrList = resolvePnrList(d?.pnr_info);
+            const pnrDep = pnrList.find((p) => p.LegDirectionality === 'Departure')?.pnr ?? pnrList[0]?.pnr;
+            const pnrRet = pnrList.find((p) => p.LegDirectionality === 'Return')?.pnr;
+            const origin = legs[0]?.LegDepartureAirportCode;
+            const dest = legs[legs.length - 1]?.LegArrivalAirportCode;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const sections = [];
+            // ── Booking Reference ────────────────────────────────────────────────
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const refRows = [];
+            if (pnrList.length > 1) {
+                pnrList.forEach((p) => refRows.push({ label: `PNR (${p.LegDirectionality})`, value: na$1(p.pnr) }));
+            }
+            else {
+                refRows.push({ label: 'PNR', value: na$1(pnrDep) });
+            }
+            refRows.push({ label: 'Booking ID', value: na$1(cp?.bookingId) }, { label: 'Supplier ref', value: na$1(cp?.supplierBookingId) }, { label: 'Supplier', value: na$1(cp?.supplierName ?? legs[0]?.supplierName) });
+            sections.push({ title: 'Booking Reference', rows: refRows });
+            // ── Per-leg sections ─────────────────────────────────────────────────
+            legs.forEach((l, i) => {
+                const dir = l.LegDirectionality ?? '';
+                const from = l.LegDepartureAirportCode;
+                const to = l.LegArrivalAirportCode;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const segs = airlines[i]?.Segments ?? [];
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const durSegs = dur?.legs?.[i]?.Segments ?? [];
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const stops = l.Stops ?? [];
+                const legDurMins = durSegs.reduce((sum, s) => sum + (s.SegmentElapsedTimeMinutes ?? 0), 0);
+                const flightNos = segs.map((s) => `${s.AirlineCode}${s.FlightNumber}`).filter(Boolean).join(', ');
+                sections.push({
+                    title: `${dirIcon(dir)} ${dir || `Leg ${i + 1}`} · ${from} → ${to}`,
+                    rows: [
+                        { label: 'Departure', value: fmtDate(l.LegDepartureDateTime) },
+                        { label: 'Arrival', value: fmtDate(l.LegArrivalDateTime) },
+                        { label: 'Duration', value: legDurMins > 0 ? fmtMins(legDurMins) : na$1(null) },
+                        { label: 'Airline(s)', value: na$1(l.LegAirlinesNames?.join(', ')) },
+                        { label: 'Flight no.', value: na$1(flightNos) },
+                        { label: 'Cabin', value: na$1(l.LegCabins?.[0]?.Name) },
+                        { label: 'Fare brand', value: na$1(l.fareBrand?.name) },
+                        {
+                            label: 'Stops',
+                            value: stops.length === 0
+                                ? 'Non-stop'
+                                : stops.map((s) => `${s.StopAirportCity ?? s.StopAirport} (${fmtMins(s.LayoverDuration)})`).join(', '),
+                        },
+                    ],
+                });
+            });
+            // ── Passengers ───────────────────────────────────────────────────────
+            const paxTypeLabel = { ADT: 'Adult', CNN: 'Child', INF: 'Infant' };
+            passengers.forEach((p, i) => {
+                const fullName = [p?.name?.prefix, p?.name?.givenName, p?.name?.surName].filter(Boolean).join(' ');
+                const phone = p?.phone ?? (p?.contactNumber?.phoneNumber
+                    ? `${p.contactNumber.countryCode ?? ''}${p.contactNumber.phoneNumber}` : null);
+                sections.push({
+                    title: `Passenger ${i + 1} · ${fullName || na$1(null)}`,
+                    rows: [
+                        { label: 'Type', value: na$1(paxTypeLabel[p?.type] ?? p?.type) },
+                        { label: 'Gender', value: na$1(p?.gender) },
+                        { label: 'Date of birth', value: na$1(p?.dateOfBirth) },
+                        { label: 'Passport', value: na$1(p?.identity?.number) },
+                        { label: 'Nationality', value: na$1(p?.identity?.nationality) },
+                        { label: 'Passport exp.', value: na$1(p?.identity?.expirationDate) },
+                        { label: 'Issue country', value: na$1(p?.identity?.issueCountry) },
+                        { label: 'Doc type', value: na$1(p?.identity?.type) },
+                        { label: 'Email', value: na$1(p?.email) },
+                        { label: 'Phone', value: na$1(phone) },
+                    ],
+                });
+            });
+            // ── Payment ──────────────────────────────────────────────────────────
+            if (ps) {
+                const statusName = ps?.status?.name ?? ps?.status?.key;
+                const paid = ps?.amountInPaidCurrency != null && ps?.paidCurrency
+                    ? `${ps.amountInPaidCurrency} ${ps.paidCurrency}` : null;
+                sections.push({
+                    title: 'Payment',
+                    rows: [
+                        { label: 'Status', value: na$1(statusName) },
+                        { label: 'Amount', value: ps?.amount != null ? `${ps.amount} ${na$1(ps.currency)}` : 'Not available' },
+                        { label: 'Paid amount', value: na$1(paid) },
+                        { label: 'Payment method', value: na$1(ps?.method) },
+                        { label: 'Date', value: fmtDate(ps?.date) },
+                    ],
+                });
+            }
+            // ── Baggage per route (full detail) ──────────────────────────────────
+            const baggageInfo = baggage?.baggage_info ?? [];
+            baggageInfo.forEach((entry) => {
+                const route = Object.keys(entry)[0];
+                if (!route)
+                    return;
+                const paxTypes = entry[route] ?? {};
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const rows = [];
+                Object.entries(paxTypes).forEach(([paxType, pd]) => {
+                    const label = paxType === 'ADT' ? 'Adult' : paxType === 'CNN' ? 'Child' : paxType === 'INF' ? 'Infant' : paxType;
+                    const cabin = pd.CabinBaggage;
+                    const checked = pd.CheckedBaggage;
+                    const underSeat = pd.UnderSeatBaggage;
+                    rows.push({ label: `${label} · Cabin`, value: fmtBag(cabin) }, { label: `${label} · Checked`, value: fmtBag(checked) });
+                    if (underSeat)
+                        rows.push({ label: `${label} · Under Seat`, value: fmtBag(underSeat) });
+                });
+                sections.push({ title: `Baggage · ${route}`, rows });
+            });
+            // ── Terminal Info summary ────────────────────────────────────────────
+            const terminalData = d?.terminal ?? [];
+            terminalData.forEach((tl, li) => {
+                const legMeta = legs[li];
+                const legLabel = legMeta
+                    ? `Terminal · ${legMeta.LegDepartureAirportCode} → ${legMeta.LegArrivalAirportCode}`
+                    : `Terminal · Leg ${li + 1}`;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const termRows = [];
+                (tl.Segments ?? []).forEach((s, si) => {
+                    const airlineSeg = airlines[li]?.Segments?.[si];
+                    const flightNo = airlineSeg ? `${airlineSeg.AirlineCode}${airlineSeg.FlightNumber}` : `Seg ${si + 1}`;
+                    const depTerm = s.DepartureAirportTerminalID ? `T${s.DepartureAirportTerminalID}` : '—';
+                    const arrTerm = s.ArrivalAirportTerminalID ? `T${s.ArrivalAirportTerminalID}` : '—';
+                    termRows.push({
+                        label: flightNo,
+                        value: `${na$1(s.DepartureAirportCode)} ${depTerm} → ${na$1(s.ArrivalAirportCode)} ${arrTerm}`,
+                    });
+                });
+                if (termRows.length > 0)
+                    sections.push({ title: legLabel, rows: termRows });
+            });
+            // ── Cancellation Policy summary ──────────────────────────────────────
+            const cpLegs = cp?.legs ?? [];
+            cpLegs.forEach((leg) => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const cpRows = [];
+                (leg.passengerPenalties ?? []).forEach((pp) => {
+                    const typeLabel = pp.type === 'ADT' ? 'Adult' : pp.type === 'CNN' ? 'Child' : 'Infant';
+                    const bDep = pp.penalties?.beforeDeparture;
+                    const refund = bDep?.refund;
+                    const exchange = bDep?.exchange;
+                    const refundStr = refund?.isActionable ? `Refund: ${refund.fee} ${refund.currency}` : 'No refund';
+                    const exchangeStr = exchange?.isActionable ? `Exchange: ${exchange.fee} ${exchange.currency}` : 'No exchange';
+                    cpRows.push({ label: typeLabel, value: `${refundStr}  ·  ${exchangeStr}` });
+                });
+                if (cpRows.length > 0) {
+                    sections.push({
+                        title: `Cancellation and Change Policy · ${leg.direction} (${leg.from} → ${leg.to})`,
+                        rows: cpRows,
+                    });
+                }
+            });
+            return {
+                title: origin ? `${origin} → ${dest}` : 'Flight Booking',
+                subtitle: pnrDep
+                    ? `PNR: ${pnrDep}${pnrRet ? ' / ' + pnrRet : ''} · ${legs.length} leg${legs.length !== 1 ? 's' : ''} · ${passengers.length} pax`
+                    : `${legs.length} leg${legs.length !== 1 ? 's' : ''} · ${passengers.length} pax`,
+                sections,
+            };
+        },
+    },
+    // ── Terminal Info ─────────────────────────────────────────────────────────
+    {
+        key: 'terminal',
+        type: 'flight',
+        label: 'Terminal Info',
+        subtitle: 'Gate · Check-in',
+        icon: 'pi pi-send',
+        apiField: 'booking_info',
+        formatter: (data) => {
+            const d = bi(data);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const terminalLegs = d?.terminal ?? [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const legInfos = d?.leg_info ?? [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const airlines = d?.airline_info ?? [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const sections = [];
+            terminalLegs.forEach((tl, li) => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const segs = tl.Segments ?? [];
+                const legMeta = legInfos[li];
+                const legLabel = legMeta
+                    ? `${dirIcon(legMeta.LegDirectionality)} ${legMeta.LegDepartureAirportCode} → ${legMeta.LegArrivalAirportCode}`
+                    : `Leg ${li + 1}`;
+                // Leg-level times as fallback when segment-level times are absent
+                const legDepTime = legMeta?.LegDepartureDateTime;
+                const legArrTime = legMeta?.LegArrivalDateTime;
+                segs.forEach((s, si) => {
+                    const airlineSeg = airlines[li]?.Segments?.[si];
+                    // Resolve flight number: terminal seg → airline_info seg
+                    const flightNo = s.FlightNumber
+                        ? `${s.AirlineCode ?? ''}${s.FlightNumber}`
+                        : airlineSeg ? `${airlineSeg.AirlineCode}${airlineSeg.FlightNumber}` : null;
+                    // Resolve times: terminal seg → airline_info seg → leg-level fallback
+                    const depTime = s.DepartureDateTime
+                        ?? airlineSeg?.DepartureDateTime
+                        ?? (si === 0 ? legDepTime : null);
+                    const arrTime = s.ArrivalDateTime
+                        ?? airlineSeg?.ArrivalDateTime
+                        ?? (si === segs.length - 1 ? legArrTime : null);
+                    sections.push({
+                        title: `${legLabel} · ${flightNo ?? `Seg ${si + 1}`}`,
+                        rows: [
+                            { label: 'Departure airport', value: s.DepartureAirportName ? `${s.DepartureAirportName} (${s.DepartureAirportCode})` : na$1(s.DepartureAirportCode) },
+                            { label: 'Dep. terminal', value: na$1(s.DepartureAirportTerminalID) },
+                            { label: 'Arrival airport', value: s.ArrivalAirportName ? `${s.ArrivalAirportName} (${s.ArrivalAirportCode})` : na$1(s.ArrivalAirportCode) },
+                            { label: 'Arr. terminal', value: na$1(s.ArrivalAirportTerminalID) },
+                            { label: 'Flight', value: na$1(flightNo) },
+                            { label: 'Departure time', value: fmtDate(depTime) },
+                            { label: 'Arrival time', value: fmtDate(arrTime) },
+                        ],
+                    });
+                });
+            });
+            const totalSegs = sections.length;
+            return {
+                title: 'Terminal Details',
+                subtitle: `${totalSegs} segment${totalSegs !== 1 ? 's' : ''}`,
+                sections: sections.length
+                    ? sections
+                    : [{ title: 'Info', rows: [{ label: 'Status', value: 'No terminal data available' }] }],
+            };
+        },
+    },
+    // ── Payment Status ────────────────────────────────────────────────────────
+    {
+        key: 'payment_status',
+        type: 'flight',
+        hidden: true,
+        label: 'Payment Status',
+        subtitle: 'Charges · Receipt',
+        icon: 'pi pi-credit-card',
+        apiField: 'booking_info',
+        formatter: (data) => {
+            const ps = bi(data)?.payment_status;
+            const statusName = ps?.status?.name ?? ps?.status?.key;
+            const paid = ps?.amountInPaidCurrency != null && ps?.paidCurrency
+                ? `${ps.amountInPaidCurrency} ${ps.paidCurrency}` : null;
+            const isSuccess = ps?.status?.key === 'SUCCESS';
+            return {
+                title: 'Payment Details',
+                subtitle: na$1(statusName),
+                sections: [
+                    {
+                        title: 'Transaction',
+                        rows: [
+                            { label: 'Status', value: na$1(statusName), valueClass: isSuccess ? 'positive' : 'neutral' },
+                            { label: 'Amount', value: ps?.amount != null ? `${ps.amount} ${na$1(ps.currency)}` : 'Not available' },
+                            { label: 'Paid amount', value: na$1(paid) },
+                            { label: 'Payment method', value: na$1(ps?.method) },
+                            { label: 'Transaction ref', value: na$1(ps?.transactionRef ?? ps?.reference) },
+                            { label: 'Date', value: fmtDate(ps?.date) },
+                            { label: 'Currency', value: na$1(ps?.currency) },
+                        ],
+                    },
+                ],
+            };
+        },
+    },
+    // ── Passenger Info ────────────────────────────────────────────────────────
+    {
+        key: 'passenger_info',
+        type: 'flight',
+        hidden: true,
+        label: 'Passenger Info',
+        subtitle: 'Names · Docs',
+        icon: 'pi pi-users',
+        apiField: 'booking_info',
+        formatter: (data) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const passengers = bi(data)?.passenger_info?.passengers ?? [];
+            const typeLabel = { ADT: 'Adult', CNN: 'Child', INF: 'Infant' };
+            return {
+                title: 'Passenger Details',
+                subtitle: `${passengers.length} traveller${passengers.length !== 1 ? 's' : ''}`,
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                sections: passengers.map((p, i) => {
+                    const fullName = [p?.name?.prefix, p?.name?.givenName, p?.name?.surName].filter(Boolean).join(' ');
+                    const phone = p?.phone ?? (p?.contactNumber?.phoneNumber
+                        ? `${p.contactNumber.countryCode ?? ''}${p.contactNumber.phoneNumber}` : null);
+                    return {
+                        title: `Passenger ${i + 1} · ${fullName || na$1(null)}`,
+                        rows: [
+                            { label: 'Type', value: na$1(typeLabel[p?.type] ?? p?.type) },
+                            { label: 'Gender', value: na$1(p?.gender) },
+                            { label: 'Date of birth', value: na$1(p?.dateOfBirth) },
+                            { label: 'Passport', value: na$1(p?.identity?.number) },
+                            { label: 'Nationality', value: na$1(p?.identity?.nationality) },
+                            { label: 'Passport exp.', value: na$1(p?.identity?.expirationDate) },
+                            { label: 'Issue country', value: na$1(p?.identity?.issueCountry) },
+                            { label: 'Doc type', value: na$1(p?.identity?.type) },
+                            { label: 'Email', value: na$1(p?.email) },
+                            { label: 'Phone', value: na$1(phone) },
+                        ],
+                    };
+                }),
+            };
+        },
+    },
+    // ── Passenger Count ───────────────────────────────────────────────────────
+    {
+        key: 'passenger_count',
+        type: 'flight',
+        hidden: true,
+        label: 'Passenger Count',
+        subtitle: 'Adults · Children · Infants',
+        icon: 'pi pi-users',
+        apiField: 'booking_info',
+        formatter: (data) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const passengers = bi(data)?.passenger_info?.passengers ?? [];
+            const adults = passengers.filter(p => p?.type === 'ADT');
+            const children = passengers.filter(p => p?.type === 'CNN');
+            const infants = passengers.filter(p => p?.type === 'INF');
+            return {
+                title: 'Traveller Breakdown',
+                subtitle: `${passengers.length} total`,
+                sections: [
+                    {
+                        title: 'Summary',
+                        rows: [
+                            { label: 'Total', value: String(passengers.length) },
+                            { label: 'Adults (ADT)', value: String(adults.length) },
+                            { label: 'Children (CNN)', value: String(children.length) },
+                            { label: 'Infants (INF)', value: String(infants.length) },
+                        ],
+                    },
+                    ...adults.map((p, i) => ({
+                        title: `Adult ${i + 1} · ${[p?.name?.prefix, p?.name?.givenName, p?.name?.surName].filter(Boolean).join(' ') || 'N/A'}`,
+                        rows: [
+                            { label: 'Passport', value: na$1(p?.identity?.number) },
+                            { label: 'Email', value: na$1(p?.email) },
+                        ],
+                    })),
+                    ...children.map((p, i) => ({
+                        title: `Child ${i + 1} · ${[p?.name?.prefix, p?.name?.givenName, p?.name?.surName].filter(Boolean).join(' ') || 'N/A'}`,
+                        rows: [
+                            { label: 'Passport', value: na$1(p?.identity?.number) },
+                            { label: 'DOB', value: na$1(p?.dateOfBirth) },
+                        ],
+                    })),
+                    ...infants.map((p, i) => ({
+                        title: `Infant ${i + 1} · ${[p?.name?.prefix, p?.name?.givenName, p?.name?.surName].filter(Boolean).join(' ') || 'N/A'}`,
+                        rows: [
+                            { label: 'DOB', value: na$1(p?.dateOfBirth) },
+                        ],
+                    })),
+                ],
+            };
+        },
+    },
+    // ── Airline Info ──────────────────────────────────────────────────────────
+    {
+        key: 'airline_info',
+        type: 'flight',
+        hidden: true,
+        label: 'Airline Info',
+        subtitle: 'Carrier · Flight no.',
+        icon: 'pi pi-send',
+        apiField: 'booking_info',
+        formatter: (data) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const airlines = bi(data)?.airline_info ?? [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const legInfos = bi(data)?.leg_info ?? [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const durLegs = bi(data)?.duration?.legs ?? [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const sections = [];
+            airlines.forEach((a, li) => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const segs = a.Segments ?? [];
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const durSegs = durLegs[li]?.Segments ?? [];
+                const legMeta = legInfos[li];
+                const legLabel = legMeta
+                    ? `${dirIcon(legMeta.LegDirectionality)} ${legMeta.LegDepartureAirportCode} → ${legMeta.LegArrivalAirportCode}`
+                    : `Leg ${li + 1}`;
+                // Leg-level times as fallback for first/last segment
+                const legDepTime = legMeta?.LegDepartureDateTime;
+                const legArrTime = legMeta?.LegArrivalDateTime;
+                segs.forEach((s, si) => {
+                    // Use segment-level times if available, fall back to leg times
+                    const depTime = s.DepartureDateTime ?? (si === 0 ? legDepTime : null);
+                    const arrTime = s.ArrivalDateTime ?? (si === segs.length - 1 ? legArrTime : null);
+                    sections.push({
+                        title: `${legLabel} · ${s.AirlineCode}${s.FlightNumber} (Seg ${si + 1})`,
+                        rows: [
+                            { label: 'Airline', value: na$1(s.AirlineName) },
+                            { label: 'IATA code', value: na$1(s.AirlineCode) },
+                            { label: 'Flight no.', value: s.FlightNumber ? `${s.AirlineCode}${s.FlightNumber}` : 'Not available' },
+                            { label: 'Route', value: `${na$1(s.DepartureAirportCode)} → ${na$1(s.ArrivalAirportCode)}` },
+                            { label: 'Departure', value: fmtDate(depTime) },
+                            { label: 'Arrival', value: fmtDate(arrTime) },
+                            { label: 'Duration', value: durSegs[si]?.SegmentElapsedTimeMinutes ? fmtMins(durSegs[si].SegmentElapsedTimeMinutes) : 'Not available' },
+                            { label: 'Aircraft', value: na$1(s.AircraftType ?? s.Equipment) },
+                            { label: 'Operating code', value: na$1(s.OperatingAirlineCode) },
+                        ],
+                    });
+                });
+            });
+            const totalSegs = sections.length;
+            return {
+                title: airlines[0]?.Segments?.[0]?.AirlineName ?? 'Airline Info',
+                subtitle: `${totalSegs} segment${totalSegs !== 1 ? 's' : ''}`,
+                sections,
+            };
+        },
+    },
+    // ── Leg Info ──────────────────────────────────────────────────────────────
+    {
+        key: 'leg_info',
+        type: 'flight',
+        hidden: true,
+        label: 'Leg Info',
+        subtitle: 'Route · Stops · Cabin',
+        icon: 'pi pi-map-marker',
+        apiField: 'booking_info',
+        formatter: (data) => {
+            const d = bi(data);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const legs = d?.leg_info ?? [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const airlines = d?.airline_info ?? [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const durLegs = d?.duration?.legs ?? [];
+            return {
+                title: 'Flight Legs',
+                subtitle: `${legs.length} leg${legs.length !== 1 ? 's' : ''}`,
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                sections: legs.map((l, i) => {
+                    const dir = l.LegDirectionality ?? '';
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const stops = l.Stops ?? [];
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const segs = airlines[i]?.Segments ?? [];
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const durSegs = durLegs[i]?.Segments ?? [];
+                    const legDurMins = durSegs.reduce((sum, s) => sum + (s.SegmentElapsedTimeMinutes ?? 0), 0);
+                    const flightNos = segs.map((s) => `${s.AirlineCode}${s.FlightNumber}`).filter(Boolean).join(', ');
+                    return {
+                        title: `${dirIcon(dir)} ${dir || `Leg ${i + 1}`} · ${l.LegDepartureAirportCode} → ${l.LegArrivalAirportCode}`,
+                        rows: [
+                            { label: 'Direction', value: na$1(dir) },
+                            { label: 'Departure', value: fmtDate(l.LegDepartureDateTime) },
+                            { label: 'Arrival', value: fmtDate(l.LegArrivalDateTime) },
+                            { label: 'Duration', value: legDurMins > 0 ? fmtMins(legDurMins) : na$1(null) },
+                            { label: 'Airline(s)', value: na$1(l.LegAirlinesNames?.join(', ')) },
+                            { label: 'Flight no.', value: na$1(flightNos) },
+                            { label: 'Cabin', value: na$1(l.LegCabins?.[0]?.Name) },
+                            { label: 'Fare brand', value: na$1(l.fareBrand?.name) },
+                            { label: 'Supplier', value: na$1(l.supplierName) },
+                            {
+                                label: 'Stops',
+                                value: stops.length === 0
+                                    ? 'Non-stop'
+                                    : stops.map((s) => `${s.StopAirportCity ?? s.StopAirport} (${na$1(s.StopAirport)}) – ${fmtMins(s.LayoverDuration)} layover`).join(' · '),
+                            },
+                        ],
+                    };
+                }),
+            };
+        },
+    },
+    // ── PNR Info ──────────────────────────────────────────────────────────────
+    {
+        key: 'pnr_info',
+        type: 'flight',
+        label: 'PNR Info',
+        subtitle: 'PNR · Booking ref',
+        icon: 'pi pi-tag',
+        apiField: 'booking_info',
+        formatter: (data) => {
+            const d = bi(data);
+            const pnrList = resolvePnrList(d?.pnr_info);
+            const pnrDep = pnrList.find((p) => p.LegDirectionality === 'Departure')?.pnr ?? pnrList[0]?.pnr;
+            const pnrRet = pnrList.find((p) => p.LegDirectionality === 'Return')?.pnr;
+            const cp = d?.cancellation_policy;
+            const isCrossSeller = pnrList.length > 1
+                || cp?.supplierName?.toLowerCase().includes('cross')
+                || false;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const pnrRows = [];
+            if (pnrList.length > 1) {
+                pnrList.forEach((p) => {
+                    pnrRows.push({ label: `PNR (${p.LegDirectionality})`, value: na$1(p.pnr) });
+                });
+            }
+            else {
+                pnrRows.push({ label: 'PNR', value: na$1(pnrDep) });
+            }
+            pnrRows.push({ label: 'Booking ID', value: na$1(cp?.bookingId) }, { label: 'Supplier ref', value: na$1(cp?.supplierBookingId) }, { label: 'Supplier', value: na$1(cp?.supplierName) }, { label: 'Cross-seller', value: isCrossSeller ? 'Yes' : 'No' });
+            return {
+                title: pnrDep ? `PNR: ${pnrDep}${pnrRet ? ' / ' + pnrRet : ''}` : 'PNR Info',
+                subtitle: isCrossSeller ? 'Cross-seller booking — two PNRs' : 'Global Distribution System reference',
+                sections: [{ title: 'References', rows: pnrRows }],
+            };
+        },
+    },
+    // ── Baggage Policy ────────────────────────────────────────────────────────
+    {
+        key: 'baggage',
+        type: 'flight',
+        label: 'Baggage Policy',
+        subtitle: 'Cabin · Checked · Add-ons',
+        icon: 'pi pi-briefcase',
+        apiField: 'booking_info',
+        formatter: (data) => {
+            const baggage = bi(data)?.baggage;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const infoArray = baggage?.baggage_info ?? [];
+            const addOns = baggage?.add_on_baggage ?? [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const sections = [];
+            const routeNames = [];
+            infoArray.forEach((entry) => {
+                const route = Object.keys(entry)[0];
+                if (!route)
+                    return;
+                routeNames.push(route);
+                const paxTypes = entry[route] ?? {};
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const rows = [];
+                Object.entries(paxTypes).forEach(([paxType, pd]) => {
+                    const label = paxType === 'ADT' ? 'Adult' : paxType === 'CNN' ? 'Child' : paxType === 'INF' ? 'Infant' : paxType;
+                    const cabin = pd.CabinBaggage;
+                    const checked = pd.CheckedBaggage;
+                    const underSeat = pd.UnderSeatBaggage;
+                    rows.push({ label: `${label} · Cabin`, value: fmtBag(cabin) }, { label: `${label} · Checked`, value: fmtBag(checked) });
+                    if (underSeat) {
+                        rows.push({ label: `${label} · Under Seat`, value: fmtBag(underSeat) });
+                    }
+                });
+                sections.push({ title: `Baggage · ${route}`, rows });
+            });
+            if (addOns.length > 0) {
+                sections.push({
+                    title: 'Add-on Baggage',
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    rows: addOns.map((a, i) => ({
+                        label: `Add-on ${i + 1}`,
+                        value: [a.weight, a.unit, a.route].filter(Boolean).join(' · ') || 'See booking details',
+                    })),
+                });
+            }
+            return {
+                title: 'Baggage Allowance',
+                subtitle: routeNames.length > 0 ? routeNames.join('  ·  ') : 'All baggage types',
+                sections: sections.length > 0
+                    ? sections
+                    : [{ title: 'Info', rows: [{ label: 'Status', value: 'No baggage data available' }] }],
+            };
+        },
+    },
+    // ── Flight Timings ────────────────────────────────────────────────────────
+    {
+        key: 'flight_timings',
+        type: 'flight',
+        hidden: true,
+        label: 'Flight Timings',
+        subtitle: 'Departure · Arrival',
+        icon: 'pi pi-clock',
+        apiField: 'booking_info',
+        formatter: (data) => {
+            const d = bi(data);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const legs = d?.leg_info ?? [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const airlines = d?.airline_info ?? [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const durLegs = d?.duration?.legs ?? [];
+            return {
+                title: 'Flight Timings',
+                subtitle: legs.length > 0
+                    ? `${legs[0].LegDepartureAirportCode} → ${legs[legs.length - 1].LegArrivalAirportCode}`
+                    : 'All legs',
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                sections: legs.map((l, li) => {
+                    const dir = l.LegDirectionality ?? '';
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const segs = airlines[li]?.Segments ?? [];
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const durSegs = durLegs[li]?.Segments ?? [];
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const stops = l.Stops ?? [];
+                    const legDurMins = durSegs.reduce((sum, s) => sum + (s.SegmentElapsedTimeMinutes ?? 0), 0);
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const rows = [
+                        { label: 'Departure', value: fmtDate(l.LegDepartureDateTime) },
+                        { label: 'Arrival', value: fmtDate(l.LegArrivalDateTime) },
+                        { label: 'Duration', value: legDurMins > 0 ? fmtMins(legDurMins) : na$1(null) },
+                    ];
+                    // Interleave segment rows with layover rows
+                    segs.forEach((s, si) => {
+                        const segDur = durSegs[si]?.SegmentElapsedTimeMinutes;
+                        rows.push({
+                            label: `Seg ${si + 1} · ${s.AirlineCode}${s.FlightNumber}`,
+                            value: `${na$1(s.DepartureAirportCode)} → ${na$1(s.ArrivalAirportCode)}${segDur ? ' · ' + fmtMins(segDur) : ''}`,
+                        });
+                        // Layover after this segment (if there is a stop at arrival airport)
+                        if (si < segs.length - 1) {
+                            const stop = stops.find((st) => st.StopAirport === s.ArrivalAirportCode);
+                            if (stop) {
+                                rows.push({ label: `Layover · ${stop.StopAirport}`, value: fmtMins(stop.LayoverDuration) });
+                            }
+                        }
+                    });
+                    return {
+                        title: `${dirIcon(dir)} ${dir || `Leg ${li + 1}`} · ${l.LegDepartureAirportCode} → ${l.LegArrivalAirportCode}`,
+                        rows,
+                    };
+                }),
+            };
+        },
+    },
+    // ── Duration ──────────────────────────────────────────────────────────────
+    {
+        key: 'duration',
+        type: 'flight',
+        hidden: true,
+        label: 'Duration',
+        subtitle: 'Total flight time',
+        icon: 'pi pi-refresh',
+        apiField: 'booking_info',
+        formatter: (data) => {
+            const d = bi(data);
+            const dur = d?.duration;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const legs = d?.leg_info ?? [];
+            const total = fmtMins(dur?.totalMinutes);
+            return {
+                title: total,
+                subtitle: 'Total journey duration including layovers',
+                sections: [
+                    {
+                        title: 'Total',
+                        rows: [{ label: 'Journey duration', value: total }],
+                    },
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    ...(dur?.legs ?? []).map((leg, li) => {
+                        const legMeta = legs[li];
+                        const dir = legMeta?.LegDirectionality ?? '';
+                        const from = legMeta?.LegDepartureAirportCode;
+                        const to = legMeta?.LegArrivalAirportCode;
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        const rows = [];
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        (leg.Segments ?? []).forEach((s) => {
+                            rows.push({ label: `${s.DepartureAirportCode} → ${s.ArrivalAirportCode}`, value: fmtMins(s.SegmentElapsedTimeMinutes) });
+                        });
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        (leg.Stops ?? []).forEach((s) => {
+                            rows.push({ label: `Layover · ${s.StopAirport}`, value: fmtMins(s.LayoverDuration) });
+                        });
+                        return {
+                            title: `${dirIcon(dir)} ${dir || `Leg ${li + 1}`}${from && to ? ` · ${from} → ${to}` : ''}`,
+                            rows,
+                        };
+                    }),
+                ],
+            };
+        },
+    },
+    // ── Cancellation Policy ───────────────────────────────────────────────────
+    {
+        key: 'cancellation_policy',
+        type: 'flight',
+        label: 'Cancellation Policy',
+        subtitle: 'Refund · Fees · Legs',
+        icon: 'pi pi-ban',
+        apiField: 'booking_info',
+        formatter: (data) => {
+            const d = bi(data);
+            const cp = d?.cancellation_policy;
+            if (!cp) {
+                return {
+                    title: 'Cancellation Policy',
+                    subtitle: 'No data available',
+                    sections: [{ title: 'Info', rows: [{ label: 'Status', value: 'No cancellation policy data available' }] }],
+                };
+            }
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const sections = [];
+            const pnrList = resolvePnrList(d?.pnr_info);
+            const isCrossSeller = pnrList.length > 1 || cp?.supplierName?.toLowerCase().includes('cross');
+            const legs = cp?.legs ?? [];
+            sections.push({
+                title: 'Booking Reference',
+                rows: [
+                    { label: 'Booking ID', value: na$1(cp.bookingId) },
+                    { label: 'Supplier ref', value: na$1(cp.supplierBookingId) },
+                    { label: 'Supplier', value: na$1(cp.supplierName) },
+                    { label: 'Cross-seller', value: isCrossSeller ? 'Yes' : 'No' },
+                ],
+            });
+            const fmtFee = (fee, currency) => fee != null ? `${fee} ${currency ?? 'SAR'}` : '0';
+            legs.forEach((leg) => {
+                const title = `Cancellation and Change Policy · ${leg.direction} (${leg.from} → ${leg.to})`;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const rows = [];
+                (leg.passengerPenalties ?? []).forEach((pp) => {
+                    const typeLabel = pp.type === 'ADT' ? 'Adult' : pp.type === 'CNN' ? 'Child' : 'Infant';
+                    const bDep = pp.penalties?.beforeDeparture;
+                    const aDep = pp.penalties?.afterDeparture;
+                    const bRefund = bDep?.refund;
+                    const bExchange = bDep?.exchange;
+                    const aRefund = aDep?.refund;
+                    const aExchange = aDep?.exchange;
+                    rows.push({
+                        label: `${typeLabel} · Before dep.`,
+                        value: [
+                            bRefund?.isActionable ? `Refund: ${fmtFee(bRefund.fee, bRefund.currency)}` : 'No refund',
+                            bExchange?.isActionable ? `Exchange: ${fmtFee(bExchange.fee, bExchange.currency)}` : 'No exchange',
+                        ].join('  ·  '),
+                        valueClass: bRefund?.isActionable || bExchange?.isActionable ? 'neutral' : 'negative',
+                    }, {
+                        label: `${typeLabel} · After dep.`,
+                        value: [
+                            aRefund?.isActionable ? `Refund: ${fmtFee(aRefund.fee, aRefund.currency)}` : 'No refund',
+                            aExchange?.isActionable ? `Exchange: ${fmtFee(aExchange.fee, aExchange.currency)}` : 'No exchange',
+                        ].join('  ·  '),
+                        valueClass: aRefund?.isActionable || aExchange?.isActionable ? 'neutral' : 'negative',
+                    });
+                });
+                sections.push({ title, rows });
+            });
+            return {
+                title: `${cp.supplierName ?? 'Cancellation'} Policy`,
+                subtitle: isCrossSeller ? 'Cross-seller booking · contact supplier for refund' : `Booking ${cp.bookingId ?? ''}`,
+                sections,
+                callout: isCrossSeller
+                    ? { type: 'info', message: 'Cross-seller booking — refund is processed by the partner and may take additional time.' }
+                    : undefined,
+            };
+        },
+    },
+    // ── Flight Status ─────────────────────────────────────────────────────────
+    {
+        key: 'flight_status',
+        type: 'flight',
+        hidden: true,
+        label: 'Flight Status',
+        subtitle: 'Live · Delays',
+        icon: 'pi pi-chart-bar',
+        apiField: 'booking_info',
+        formatter: (data) => {
+            const d = bi(data);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const legs = d?.leg_info ?? [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const airlines = d?.airline_info ?? [];
+            const origin = legs[0]?.LegDepartureAirportCode;
+            const dest = legs[legs.length - 1]?.LegArrivalAirportCode;
+            return {
+                title: origin ? `${origin} → ${dest}` : 'Flight Status',
+                subtitle: `${legs.length} leg${legs.length !== 1 ? 's' : ''} · Scheduled times from booking`,
+                sections: legs.map((l, li) => {
+                    const dir = l.LegDirectionality ?? '';
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const segs = airlines[li]?.Segments ?? [];
+                    return {
+                        title: `${dirIcon(dir)} ${dir || `Leg ${li + 1}`} · ${l.LegDepartureAirportCode} → ${l.LegArrivalAirportCode}`,
+                        rows: [
+                            { label: 'Departure', value: fmtDate(l.LegDepartureDateTime) },
+                            { label: 'Arrival', value: fmtDate(l.LegArrivalDateTime) },
+                            { label: 'Airline(s)', value: na$1(l.LegAirlinesNames?.join(', ')) },
+                            { label: 'Cabin', value: na$1(l.LegCabins?.[0]?.Name) },
+                            { label: 'Fare brand', value: na$1(l.fareBrand?.name) },
+                            ...segs.map((s, si) => ({
+                                label: `Flight ${si + 1}`,
+                                value: `${s.AirlineCode}${s.FlightNumber} · ${s.DepartureAirportCode} → ${s.ArrivalAirportCode}`,
+                            })),
+                        ],
+                    };
+                }),
+                callout: { type: 'info', message: 'Live status not available — check the airline app or airport boards for real-time updates.' },
+            };
+        },
+    },
+    // ── Wi-Fi & Extras ────────────────────────────────────────────────────────
+    {
+        key: 'wifi',
+        type: 'flight',
+        hidden: true,
+        label: 'Wi-Fi & Extras',
+        subtitle: 'Onboard services',
+        icon: 'pi pi-info-circle',
+        apiField: 'booking_info',
+        formatter: (data) => {
+            const d = bi(data);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const legs = d?.leg_info ?? [];
+            const addOns = d?.baggage?.add_on_baggage ?? [];
+            return {
+                title: 'Onboard Extras',
+                subtitle: `${legs.length} leg${legs.length !== 1 ? 's' : ''}`,
+                sections: [
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    ...legs.map((l, li) => {
+                        const dir = l.LegDirectionality ?? '';
+                        return {
+                            title: `${dirIcon(dir)} ${dir || `Leg ${li + 1}`} · ${l.LegDepartureAirportCode} → ${l.LegArrivalAirportCode}`,
+                            rows: [
+                                { label: 'Cabin', value: na$1(l.LegCabins?.[0]?.Name) },
+                                { label: 'Fare brand', value: na$1(l.fareBrand?.name) },
+                                { label: 'Airline(s)', value: na$1(l.LegAirlinesNames?.join(', ')) },
+                            ],
+                        };
+                    }),
+                    ...(addOns.length > 0 ? [{
+                            title: 'Add-on Baggage',
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            rows: addOns.map((a, i) => ({
+                                label: `Add-on ${i + 1}`,
+                                value: [a.weight, a.unit, a.route].filter(Boolean).join(' · ') || 'See booking details',
+                            })),
+                        }] : []),
+                ],
+                callout: { type: 'info', message: 'Detailed onboard amenities depend on the operating airline and fare class.' },
+            };
+        },
+    },
+];
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const na = (v) => v ?? 'Not available';
+const HOTEL_ACTIONS = [
+    { key: 'booking_info', type: 'hotel', label: 'Booking Overview', subtitle: 'Summary · Status', icon: 'pi pi-file',
+        apiField: 'booking_info',
+        formatter: (data) => ({ title: `Booking ${na(data?.booking_info?.reference)}`, subtitle: `Created ${na(data?.booking_info?.created_at)}`,
+            points: [{ label: 'Status', value: na(data?.booking_info?.status) }, { label: 'Total paid', value: na(data?.booking_info?.total) }, { label: 'Source', value: na(data?.booking_info?.source) }, { label: 'Currency', value: na(data?.booking_info?.currency) }] }) },
+    { key: 'room_information', type: 'hotel', label: 'Room Information', subtitle: 'Type · Beds · View', icon: 'pi pi-home',
+        apiField: 'room_information',
+        formatter: (data) => ({ title: na(data?.room_information?.type), subtitle: na(data?.room_information?.description),
+            points: [{ label: 'Room type', value: na(data?.room_information?.type) }, { label: 'Beds', value: na(data?.room_information?.beds) }, { label: 'View', value: na(data?.room_information?.view) }, { label: 'Floor', value: na(data?.room_information?.floor) }, { label: 'Size', value: na(data?.room_information?.size) }] }) },
+    { key: 'checkin_checkout', type: 'hotel', label: 'Check-in / Check-out', subtitle: 'Dates · Times', icon: 'pi pi-calendar',
+        apiField: 'checkin_checkout',
+        formatter: (data) => ({ title: `${na(data?.checkin_checkout?.checkin_date)} → ${na(data?.checkin_checkout?.checkout_date)}`, subtitle: 'Stay dates and times',
+            points: [{ label: 'Check-in date', value: na(data?.checkin_checkout?.checkin_date) }, { label: 'Check-in time', value: na(data?.checkin_checkout?.checkin_time) }, { label: 'Check-out date', value: na(data?.checkin_checkout?.checkout_date) }, { label: 'Check-out time', value: na(data?.checkin_checkout?.checkout_time) }, { label: 'Nights', value: na(data?.checkin_checkout?.nights) }] }) },
+    { key: 'hotel_information', type: 'hotel', label: 'Hotel Information', subtitle: 'Name · Stars · Contact', icon: 'pi pi-building',
+        apiField: 'hotel_information',
+        formatter: (data) => ({ title: na(data?.hotel_information?.name), subtitle: `${na(data?.hotel_information?.stars)}★ · ${na(data?.hotel_information?.city)}`,
+            points: [{ label: 'Hotel', value: na(data?.hotel_information?.name) }, { label: 'Stars', value: na(data?.hotel_information?.stars) }, { label: 'Phone', value: na(data?.hotel_information?.phone) }, { label: 'Email', value: na(data?.hotel_information?.email) }, { label: 'Website', value: na(data?.hotel_information?.website) }] }) },
+    { key: 'location_info', type: 'hotel', label: 'Location Info', subtitle: 'Address · Map', icon: 'pi pi-map-marker',
+        apiField: 'location_info',
+        formatter: (data) => ({ title: na(data?.location_info?.address), subtitle: na(data?.location_info?.city),
+            points: [{ label: 'Address', value: na(data?.location_info?.address) }, { label: 'City', value: na(data?.location_info?.city) }, { label: 'Country', value: na(data?.location_info?.country) }, { label: 'Zip code', value: na(data?.location_info?.zip) }, { label: 'Landmark', value: na(data?.location_info?.landmark) }] }) },
+    { key: 'hotel_amenities', type: 'hotel', label: 'Hotel Amenities', subtitle: 'Pool · Gym · Wi-Fi', icon: 'pi pi-star',
+        apiField: 'hotel_amenities',
+        formatter: (data) => { const amenities = data?.hotel_amenities?.list ?? []; return { title: 'Amenities', subtitle: `${amenities.length} amenities available`, points: amenities.length > 0 ? amenities.map((a) => ({ label: '✓', value: a })) : [{ label: 'Amenities', value: 'Not available' }] }; } },
+    { key: 'nearby_places', type: 'hotel', label: 'Nearby Places', subtitle: 'Airport · Attractions', icon: 'pi pi-compass',
+        apiField: 'nearby_places',
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        formatter: (data) => { const places = data?.nearby_places?.places ?? []; return { title: 'Nearby Places', points: places.length > 0 ? places.flatMap((p) => [{ label: na(p?.type), value: `${na(p?.name)} (${na(p?.distance)})` }]) : [{ label: 'Places', value: 'Not available' }] }; } },
+    { key: 'experiences', type: 'hotel', label: 'Experiences', subtitle: 'Tours · Activities', icon: 'pi pi-star-fill',
+        apiField: 'experiences',
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        formatter: (data) => { const items = data?.experiences?.list ?? []; return { title: 'Available Experiences', points: items.length > 0 ? items.map((e) => ({ label: na(e?.name), value: na(e?.price) })) : [{ label: 'Experiences', value: 'Not available' }] }; } },
+    { key: 'payment_status', type: 'hotel', label: 'Payment Status', subtitle: 'Charges · Receipt', icon: 'pi pi-credit-card',
+        apiField: 'payment_status',
+        formatter: (data) => ({ title: 'Payment Details', subtitle: na(data?.payment_status?.method),
+            points: [{ label: 'Status', value: na(data?.payment_status?.status) }, { label: 'Amount paid', value: na(data?.payment_status?.amount) }, { label: 'Currency', value: na(data?.payment_status?.currency) }, { label: 'Transaction', value: na(data?.payment_status?.transaction_id) }, { label: 'Date', value: na(data?.payment_status?.date) }] }) },
+    { key: 'wallet', type: 'hotel', label: 'Wallet & Credits', subtitle: 'Balance · Cashback', icon: 'pi pi-wallet',
+        apiField: 'wallet',
+        formatter: (data) => ({ title: 'Wallet Summary',
+            points: [{ label: 'Balance', value: na(data?.wallet?.balance) }, { label: 'Cashback', value: na(data?.wallet?.cashback) }, { label: 'Promo credit', value: na(data?.wallet?.promo_credit) }, { label: 'Last updated', value: na(data?.wallet?.updated_at) }] }) },
+    { key: 'cancellation_policy', type: 'hotel', label: 'Cancellation Policy', subtitle: 'Fees · Deadline', icon: 'pi pi-ban',
+        apiField: 'cancellation_policy',
+        formatter: (data) => ({ title: 'Cancellation Rules', subtitle: data?.cancellation_policy?.refundable ? 'Refundable' : 'Non-refundable',
+            points: [{ label: 'Refundable', value: data?.cancellation_policy?.refundable ? 'Yes' : 'No' }, { label: 'Cancel fee', value: na(data?.cancellation_policy?.fee) }, { label: 'Deadline', value: na(data?.cancellation_policy?.deadline) }, { label: 'Policy', value: na(data?.cancellation_policy?.description) }],
+            callout: { type: 'warning', message: data?.cancellation_policy?.warning ?? 'Always verify cancellation terms with the hotel.' } }) },
+    { key: 'breakfast', type: 'hotel', label: 'Meals & Breakfast', subtitle: 'Board basis', icon: 'pi pi-list',
+        apiField: 'meals',
+        formatter: (data) => ({ title: na(data?.meals?.board_basis), subtitle: 'Meal inclusions',
+            points: [{ label: 'Board basis', value: na(data?.meals?.board_basis) }, { label: 'Breakfast', value: na(data?.meals?.breakfast) }, { label: 'Lunch', value: na(data?.meals?.lunch) }, { label: 'Dinner', value: na(data?.meals?.dinner) }] }) },
+];
+
+class SbdBookingInputComponent {
+    constructor() {
+        this.loading = input(false);
+        this.product = model('flight');
+        this.bookingId = model('');
+        this.lookup = output();
+        this.productOptions = [
+            { label: '✈ Flight', value: 'flight' },
+        ];
+        this.demoIds = [
+            { label: 'Demo Flight: ALM-20481', value: 'ALM-20481' },
+            { label: 'Demo Hotel: ALM-HTL-9921', value: 'ALM-HTL-9921' },
+        ];
+    }
+    fillDemo(id) {
+        const product = id.includes('HTL') ? 'hotel' : 'flight';
+        this.product.set(product);
+        this.bookingId.set(id);
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter')
+            this.lookup.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdBookingInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: SbdBookingInputComponent, isStandalone: true, selector: "app-sbd-booking-input", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, bookingId: { classPropertyName: "bookingId", publicName: "bookingId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { product: "productChange", bookingId: "bookingIdChange", lookup: "lookup" }, ngImport: i0, template: "<div class=\"sbd-booking-input\">\n  <p-selectButton\n    [(ngModel)]=\"product\"\n    [options]=\"productOptions\"\n    optionLabel=\"label\"\n    optionValue=\"value\"\n    optionDisabled=\"disabled\">\n    <ng-template pTemplate=\"item\" let-item>\n      <span\n        [pTooltip]=\"item.disabled ? 'Coming soon' : null\"\n        tooltipPosition=\"bottom\"\n        style=\"pointer-events: auto; display: inline-block;\">\n        {{ item.label }}\n      </span>\n    </ng-template>\n  </p-selectButton>\n  <div class=\"sbd-booking-input__row\">\n    <div class=\"sbd-booking-input__field-wrap\">\n      <i class=\"pi pi-search sbd-booking-input__icon\"></i>\n      <input pInputText class=\"sbd-booking-input__field\" placeholder=\"Enter Booking ID\"\n        [(ngModel)]=\"bookingId\" (keydown)=\"onKeydown($event)\" autocomplete=\"off\" spellcheck=\"false\" />\n    </div>\n    <button pButton label=\"Lookup \u2192\" [disabled]=\"!bookingId().trim()\" (click)=\"lookup.emit()\" class=\"sbd-booking-input__btn\"></button>\n  </div>\n</div>\n", styles: [".sbd-booking-input{background:#fff;border-radius:12px;border:1px solid #e2e8f0;padding:20px;display:flex;flex-direction:column;gap:14px}.sbd-booking-input__row{display:flex;gap:10px;align-items:center}.sbd-booking-input__field-wrap{flex:1;position:relative;display:flex;align-items:center}.sbd-booking-input__icon{position:absolute;left:12px;color:#94a3b8;font-size:14px;pointer-events:none;z-index:1}.sbd-booking-input__field{width:100%!important;padding-left:36px!important;height:44px;font-size:14px!important}.sbd-booking-input__btn{height:44px;white-space:nowrap}.sbd-booking-input__demos{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.sbd-booking-input__demos-label{font-size:11.5px;color:#94a3b8}.sbd-booking-input__chip{padding:4px 10px;border-radius:20px;border:1px solid #e2e8f0;background:#f8fafc;color:#1e2e4a;font-size:11.5px;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s}.sbd-booking-input__chip:hover{border-color:#3b82f6;background:#eff6ff;color:#3b82f6}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: 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: SelectButtonModule }, { kind: "component", type: i2.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "tabindex", "multiple", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3$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: SbdBookingInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-booking-input', standalone: true, imports: [FormsModule, SelectButtonModule, InputTextModule, ButtonModule, TooltipModule], template: "<div class=\"sbd-booking-input\">\n  <p-selectButton\n    [(ngModel)]=\"product\"\n    [options]=\"productOptions\"\n    optionLabel=\"label\"\n    optionValue=\"value\"\n    optionDisabled=\"disabled\">\n    <ng-template pTemplate=\"item\" let-item>\n      <span\n        [pTooltip]=\"item.disabled ? 'Coming soon' : null\"\n        tooltipPosition=\"bottom\"\n        style=\"pointer-events: auto; display: inline-block;\">\n        {{ item.label }}\n      </span>\n    </ng-template>\n  </p-selectButton>\n  <div class=\"sbd-booking-input__row\">\n    <div class=\"sbd-booking-input__field-wrap\">\n      <i class=\"pi pi-search sbd-booking-input__icon\"></i>\n      <input pInputText class=\"sbd-booking-input__field\" placeholder=\"Enter Booking ID\"\n        [(ngModel)]=\"bookingId\" (keydown)=\"onKeydown($event)\" autocomplete=\"off\" spellcheck=\"false\" />\n    </div>\n    <button pButton label=\"Lookup \u2192\" [disabled]=\"!bookingId().trim()\" (click)=\"lookup.emit()\" class=\"sbd-booking-input__btn\"></button>\n  </div>\n</div>\n", styles: [".sbd-booking-input{background:#fff;border-radius:12px;border:1px solid #e2e8f0;padding:20px;display:flex;flex-direction:column;gap:14px}.sbd-booking-input__row{display:flex;gap:10px;align-items:center}.sbd-booking-input__field-wrap{flex:1;position:relative;display:flex;align-items:center}.sbd-booking-input__icon{position:absolute;left:12px;color:#94a3b8;font-size:14px;pointer-events:none;z-index:1}.sbd-booking-input__field{width:100%!important;padding-left:36px!important;height:44px;font-size:14px!important}.sbd-booking-input__btn{height:44px;white-space:nowrap}.sbd-booking-input__demos{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.sbd-booking-input__demos-label{font-size:11.5px;color:#94a3b8}.sbd-booking-input__chip{padding:4px 10px;border-radius:20px;border:1px solid #e2e8f0;background:#f8fafc;color:#1e2e4a;font-size:11.5px;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s}.sbd-booking-input__chip:hover{border-color:#3b82f6;background:#eff6ff;color:#3b82f6}\n"] }]
+        }] });
+
+class SbdWorkflowActionsComponent {
+    constructor() {
+        this.bookingId = input.required();
+        this.cancelBooking = 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: i3$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"] }]
+        }] });
+
+class SbdActionCardComponent {
+    constructor() {
+        this.action = input.required();
+        this.active = input(false);
+        this.loading = input(false);
+        this.selected = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdActionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdActionCardComponent, isStandalone: true, selector: "app-sbd-action-card", inputs: { action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "<button class=\"sbd-action-card\" [class.sbd-action-card--active]=\"active()\"\n  [class.sbd-action-card--loading]=\"loading()\" [pTooltip]=\"action().subtitle\"\n  tooltipPosition=\"top\" (click)=\"selected.emit(action().key)\" type=\"button\">\n  @if (active()) { <span class=\"sbd-action-card__dot\"></span> }\n  <div class=\"sbd-action-card__icon-tile\">\n    <i [class]=\"action().icon\"></i>\n  </div>\n  <div class=\"sbd-action-card__body\">\n    <span class=\"sbd-action-card__label\">{{ action().label }}</span>\n    <span class=\"sbd-action-card__sub\">{{ action().subtitle }}</span>\n  </div>\n</button>\n", styles: [".sbd-action-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;background:#fff;border:1.5px solid #e2e8f0;border-radius:10px;cursor:pointer;text-align:left;width:100%;transition:transform .15s,box-shadow .15s,border-color .15s;font-family:inherit}.sbd-action-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px #00000014;border-color:#1e2e4a}.sbd-action-card--active{border-color:#3b82f6!important;background:#eff6ff!important}.sbd-action-card--active .sbd-action-card__icon-tile{background:#3b82f61f;color:#3b82f6}.sbd-action-card--active .sbd-action-card__label{color:#3b82f6}.sbd-action-card--loading{pointer-events:none;opacity:.7}.sbd-action-card__dot{position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:#3b82f6}.sbd-action-card__icon-tile{width:38px;height:38px;border-radius:8px;background:#f1f5f9;color:#1e2e4a;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sbd-action-card__icon-tile i{font-size:18px}.sbd-action-card__body{display:flex;flex-direction:column;gap:2px;min-width:0;width:100%}.sbd-action-card__label{font-size:12.5px;font-weight:700;color:#1e2e4a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sbd-action-card__sub{font-size:11px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ 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: SbdActionCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-action-card', standalone: true, imports: [TooltipModule], template: "<button class=\"sbd-action-card\" [class.sbd-action-card--active]=\"active()\"\n  [class.sbd-action-card--loading]=\"loading()\" [pTooltip]=\"action().subtitle\"\n  tooltipPosition=\"top\" (click)=\"selected.emit(action().key)\" type=\"button\">\n  @if (active()) { <span class=\"sbd-action-card__dot\"></span> }\n  <div class=\"sbd-action-card__icon-tile\">\n    <i [class]=\"action().icon\"></i>\n  </div>\n  <div class=\"sbd-action-card__body\">\n    <span class=\"sbd-action-card__label\">{{ action().label }}</span>\n    <span class=\"sbd-action-card__sub\">{{ action().subtitle }}</span>\n  </div>\n</button>\n", styles: [".sbd-action-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;background:#fff;border:1.5px solid #e2e8f0;border-radius:10px;cursor:pointer;text-align:left;width:100%;transition:transform .15s,box-shadow .15s,border-color .15s;font-family:inherit}.sbd-action-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px #00000014;border-color:#1e2e4a}.sbd-action-card--active{border-color:#3b82f6!important;background:#eff6ff!important}.sbd-action-card--active .sbd-action-card__icon-tile{background:#3b82f61f;color:#3b82f6}.sbd-action-card--active .sbd-action-card__label{color:#3b82f6}.sbd-action-card--loading{pointer-events:none;opacity:.7}.sbd-action-card__dot{position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:#3b82f6}.sbd-action-card__icon-tile{width:38px;height:38px;border-radius:8px;background:#f1f5f9;color:#1e2e4a;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sbd-action-card__icon-tile i{font-size:18px}.sbd-action-card__body{display:flex;flex-direction:column;gap:2px;min-width:0;width:100%}.sbd-action-card__label{font-size:12.5px;font-weight:700;color:#1e2e4a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sbd-action-card__sub{font-size:11px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }] });
+
+class SbdActionGridComponent {
+    constructor() {
+        this.actions = input.required();
+        this.activeKey = input(null);
+        this.loadingKey = input(null);
+        this.actionSelected = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdActionGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdActionGridComponent, isStandalone: true, selector: "app-sbd-action-grid", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, loadingKey: { classPropertyName: "loadingKey", publicName: "loadingKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelected: "actionSelected" }, ngImport: i0, template: "<div class=\"sbd-action-grid\">\n  <div class=\"sbd-action-grid__header\">\n    <h3 class=\"sbd-action-grid__title\">Booking Details</h3>\n  </div>\n  <div class=\"sbd-action-grid__grid\">\n    @for (action of actions(); track action.key) {\n      <app-sbd-action-card [action]=\"action\" [active]=\"activeKey() === action.key\"\n        [loading]=\"loadingKey() === action.key\" (selected)=\"actionSelected.emit($event)\" />\n    }\n  </div>\n</div>\n", styles: [".sbd-action-grid{background:#fff;border-radius:12px;border:1px solid #e2e8f0;padding:20px}.sbd-action-grid__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.sbd-action-grid__title{font-size:13.5px;font-weight:700;color:#1e2e4a;margin:0}.sbd-action-grid__count{font-size:11.5px;color:#94a3b8;background:#f8fafc;border:1px solid #e2e8f0;border-radius:20px;padding:2px 10px}.sbd-action-grid__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}@media (max-width: 1200px){.sbd-action-grid__grid{grid-template-columns:repeat(4,1fr)}}@media (max-width: 900px){.sbd-action-grid__grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 640px){.sbd-action-grid__grid{grid-template-columns:repeat(2,1fr)}}\n"], dependencies: [{ kind: "component", type: SbdActionCardComponent, selector: "app-sbd-action-card", inputs: ["action", "active", "loading"], outputs: ["selected"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdActionGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-action-grid', standalone: true, imports: [SbdActionCardComponent], template: "<div class=\"sbd-action-grid\">\n  <div class=\"sbd-action-grid__header\">\n    <h3 class=\"sbd-action-grid__title\">Booking Details</h3>\n  </div>\n  <div class=\"sbd-action-grid__grid\">\n    @for (action of actions(); track action.key) {\n      <app-sbd-action-card [action]=\"action\" [active]=\"activeKey() === action.key\"\n        [loading]=\"loadingKey() === action.key\" (selected)=\"actionSelected.emit($event)\" />\n    }\n  </div>\n</div>\n", styles: [".sbd-action-grid{background:#fff;border-radius:12px;border:1px solid #e2e8f0;padding:20px}.sbd-action-grid__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.sbd-action-grid__title{font-size:13.5px;font-weight:700;color:#1e2e4a;margin:0}.sbd-action-grid__count{font-size:11.5px;color:#94a3b8;background:#f8fafc;border:1px solid #e2e8f0;border-radius:20px;padding:2px 10px}.sbd-action-grid__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}@media (max-width: 1200px){.sbd-action-grid__grid{grid-template-columns:repeat(4,1fr)}}@media (max-width: 900px){.sbd-action-grid__grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 640px){.sbd-action-grid__grid{grid-template-columns:repeat(2,1fr)}}\n"] }]
+        }] });
+
+const DEDUCTION_DEFS = [
+    { key: 'totalPenaltyPoints', label: 'Airline Cancellation Fee', badge: '' },
+    { key: 'handlingFee', label: 'Handling Fee', badge: '' },
+    { key: 'totalNonRefundableServiceCharge', label: 'Service Charge', badge: '' },
+    { key: 'totalAncillaryRefundAmount', label: 'Ancillary Fee', badge: '' },
+    { key: 'totalGiftAmount', label: 'Add on Fee', badge: '' },
+    // `totalLoyaltyPoints` (points spent at booking time, now forfeited) is
+    // intentionally not listed here — it's already surfaced under its own
+    // program name (e.g. "Qitaf") in the "Total Paid" breakdown, so listing it
+    // again here would double up the same amount under two different sections.
+];
+const REFUND_DEFS = [
+    { key: 'totalCardRefundAmount', label: 'Refund Amount' },
+    { key: 'totalCreditRefundAmount', label: 'Credit Shell Refund' },
+    { key: 'walletRefundAmount', label: 'Almatar Wallet' },
+    { key: 'totalLoyaltyPointsRefundAmount', label: 'Loyalty Points Refund' },
+];
+/** Labels for `paymentMethodCustomerUsed` gateway codes returned by the backend. */
+const PAYMENT_GATEWAY_LABELS = {
+    CH: 'Card',
+    HP: 'Hyperpay',
+    MF: 'My Fatoora',
+    WT: 'Wire Transfer',
+    STC: 'STC',
+    TM: 'Tamara',
+    TB: 'Tabby',
+    RAJHI: 'Al Rajhi Mokafaa',
+    PPB: 'Customer Balance',
+    PP: 'Postpay',
+    TAMAM: 'Tamam',
+    QITAF: 'Qitaf',
+    MIS: 'MIS Pay',
+    MATAR: 'Almatar Pay',
+    CB: 'Company Balance',
+    ANB: 'ANB',
+    AMWAL: 'Amwal',
+    WALA: 'Wala',
+    YGG: 'YGG',
+};
+/** Gateway codes that refund to an installment plan rather than the original card. */
+const INSTALLMENT_GATEWAY_CODES = ['TM', 'TB'];
+/** Gateway codes that refund to a loyalty-program account rather than the original card. */
+const LOYALTY_GATEWAY_CODES = ['RAJHI', 'QITAF', 'STC', 'WALA'];
+/**
+ * Internal payment-processor/gateway names, never customer-recognizable
+ * brands — must not be surfaced verbatim (e.g. a card refund processed
+ * through Hyperpay must read as "Card"/"Original Payment Method", never
+ * "Hyperpay"). Callers fall back to a generic label whenever the normalized
+ * lookup returns ''.
+ */
+const INTERNAL_GATEWAY_CODES = ['HP', 'MF', 'WT', 'PPB', 'PP', 'TAMAM'];
+/**
+ * Result/confirmation-screen-only override: these gateways process card
+ * payments through Mada — shown specifically as "Mada Card" instead of
+ * falling back to the generic "Original Payment Method" label used
+ * everywhere else `INTERNAL_GATEWAY_CODES` applies.
+ */
+const MADA_GATEWAY_CODES = ['HP', 'CH'];
+const CREDIT_SHELL_SUFFIX = 'It can be used only for future booking on the airline website.';
+const GIFT_HINT = 'Please note: If you cancel either leg of your round-trip booking, the add-on/gift service will be cancelled automatically.';
+class SbdCancelDialogComponent {
+    /**
+     * The return leg is matched by an explicit 'Return' direction; the onward
+     * leg is whatever's left (some bookings don't tag the outbound leg with an
+     * explicit 'Departure' value), falling back to the first entry.
+     */
+    itineraryLeg(kind) {
+        const legs = this.itineraryLegs();
+        if (!legs.length)
+            return null;
+        const returnLeg = legs.find((l) => (l.direction ?? '').toLowerCase() === 'return') ?? null;
+        if (kind === 'return')
+            return returnLeg;
+        return (legs.find((l) => (l.direction ?? '').toLowerCase() === 'departure') ??
+            legs.find((l) => l !== returnLeg) ??
+            legs[0] ??
+            null);
+    }
+    fmtTime(dt) {
+        if (!dt)
+            return '—';
+        try {
+            return new Date(dt).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
+        }
+        catch {
+            return dt;
+        }
+    }
+    fmtShortDate(dt) {
+        if (!dt)
+            return '—';
+        try {
+            return new Date(dt).toLocaleDateString('en-GB', { weekday: 'short', day: '2-digit', month: 'short' });
+        }
+        catch {
+            return dt;
+        }
+    }
+    fmtMins(mins) {
+        if (mins == null)
+            return '';
+        return `${Math.floor(mins / 60)}h ${mins % 60}m`;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    applySourceOverride(base, breakdown) {
+        const sel = this.selectedSource();
+        if (!sel || !breakdown || !breakdown[sel])
+            return this.reconcileSoleDestination(base);
+        const src = breakdown[sel];
+        const sourceRefundable = src.isRefundable !== false; // default true if not set
+        if (!sourceRefundable) {
+            // Source cannot process refund — zero out financial fields
+            return this.reconcileSoleDestination({
+                ...base,
+                isRefundable: false,
+                totalPenaltyPoints: 0,
+                totalSupplierPenaltyPoints: 0,
+                totalCancellationFee: 0,
+                totalRefundAmount: 0,
+                totalCardRefundAmount: 0,
+                handlingFee: 0,
+            });
+        }
+        // Prefer the source's own walletRefundAmount/totalCardRefundAmount when
+        // the API provides them (they're already net of each other for this
+        // source) — only fall back to deriving cardRefund when the API doesn't.
+        const newTotal = Number(src.totalRefundAmount || 0);
+        const walletRefund = src.walletRefundAmount !== undefined
+            ? Number(src.walletRefundAmount || 0)
+            : Number(base.walletRefundAmount || 0);
+        const cardRefund = src.totalCardRefundAmount !== undefined
+            ? Number(src.totalCardRefundAmount || 0)
+            : Math.max(0, newTotal -
+                Number(base.totalCreditRefundAmount || 0) -
+                walletRefund -
+                Number(base.totalLoyaltyPointsRefundAmount || 0));
+        return this.reconcileSoleDestination({
+            ...base,
+            isRefundable: true,
+            totalPenaltyPoints: Number(src.totalSupplierPenaltyPoints || 0),
+            totalSupplierPenaltyPoints: Number(src.totalSupplierPenaltyPoints || 0),
+            totalCancellationFee: Number(src.totalCancellationFee || 0),
+            totalRefundAmount: newTotal,
+            walletRefundAmount: walletRefund,
+            totalCardRefundAmount: cardRefund,
+            handlingFee: Number(src.handlingFee || 0),
+        });
+    }
+    /**
+     * When exactly one of the four refund-destination fields (wallet / card /
+     * credit / loyalty) is non-zero, the backend has occasionally sent that
+     * field as a pre-deduction value that disagrees with the declared total
+     * (e.g. wallet = total + cancellation fee) — there's no ambiguity about
+     * *where* the money goes, only a stale number in that one field, so trust
+     * the declared total and correct the sole destination to match rather
+     * than surfacing a false discrepancy.
+     */
+    reconcileSoleDestination(d) {
+        if (!d?.isRefundable)
+            return d;
+        const wallet = Number(d.walletRefundAmount ?? 0);
+        const card = Number(d.totalCardRefundAmount ?? 0);
+        const credit = Number(d.totalCreditRefundAmount ?? 0);
+        const loyalty = Number(d.totalLoyaltyPointsRefundAmount ?? 0);
+        // A forfeited-points destination (e.g. Qitaf points funded separately
+        // from the card refund) also counts as a real destination here — without
+        // this, a legitimately split card+loyalty-points refund (e.g. 918 card +
+        // 50 Qitaf points = 968 total) looks like a single stale "card" field to
+        // this heuristic, which then force-overwrites the correct 918 with the
+        // full 968 total and silently erases the split.
+        const forfeitedLoyalty = this.forfeitedLoyaltyPointsFallback(d);
+        const nonZero = [wallet, card, credit, loyalty, forfeitedLoyalty].filter((v) => v > 0);
+        if (nonZero.length !== 1)
+            return d;
+        const total = Number(d.totalRefundAmountBeforeCeil ?? d.totalRefundAmount ?? 0);
+        if (wallet > 0 && Math.abs(wallet - total) >= 0.01)
+            return { ...d, walletRefundAmount: total };
+        if (card > 0 && Math.abs(card - total) >= 0.01)
+            return { ...d, totalCardRefundAmount: total };
+        if (credit > 0 && Math.abs(credit - total) >= 0.01)
+            return { ...d, totalCreditRefundAmount: total };
+        if (loyalty > 0 && Math.abs(loyalty - total) >= 0.01)
+            return { ...d, totalLoyaltyPointsRefundAmount: total };
+        return d;
+    }
+    /**
+     * Per-leg refund view (independent of the checkbox inclusion state) — used
+     * to render both legs' own breakdown cards simultaneously.
+     */
+    legAdjustedData(legType) {
+        const root = this.refundData();
+        const leg = root?.legInfo?.[legType];
+        if (!root || !leg)
+            return null;
+        const base = this.buildLegData(root, leg, legType);
+        return this.applySourceOverride(base, leg.sourceBreakdown ?? null);
+    }
+    /** Deduction rows for a single leg's card. */
+    legDeductions(legType) {
+        return this.deductionRows(this.legAdjustedData(legType));
+    }
+    /**
+     * Refundable pool ("Fare") for a leg — that leg's own paid amount
+     * (`totalSupplierBookingAmount`). `totalRefundAmount + totalCancellationFee`
+     * isn't reliable: `totalCancellationFee` doesn't include every deduction
+     * (e.g. `handlingFee`), which produced a Fare that didn't reconcile with
+     * Total Refund + the shown deductions.
+     */
+    legRefundPool(legType) {
+        const d = this.legAdjustedData(legType);
+        if (!d)
+            return 0;
+        return Number(d.totalSupplierBookingAmount || 0);
+    }
+    /** True once a leg's own departure time has passed. */
+    legAlreadyFlown(legType) {
+        const depTime = this.itineraryLeg(legType)?.depTime;
+        if (!depTime)
+            return false;
+        const t = new Date(depTime).getTime();
+        return !Number.isNaN(t) && t < Date.now();
+    }
+    /**
+     * Toggle a leg's inclusion. A non-refundable leg can't be checked, and the
+     * last checked leg can't be unchecked. Used on both the select-leg screen
+     * and the round-trip leg cards.
+     */
+    toggleLeg(legType) {
+        const refundable = legType === 'onward' ? this.onwardRefundable() : this.returnRefundable();
+        if (!refundable)
+            return;
+        const self = legType === 'onward' ? this.onwardChecked : this.returnChecked;
+        const other = legType === 'onward' ? this.returnChecked : this.onwardChecked;
+        if (self() && !other())
+            return;
+        const isTurningOff = self();
+        if (isTurningOff &&
+            this.isRoundTrip() &&
+            !this.isCrossSeller() &&
+            !this.legAlreadyFlown(legType)) {
+            // Airline doesn't allow cancelling this leg on its own — block the
+            // uncheck, keep it checked+frozen, and surface the note.
+            this.forcedLegType.set(legType);
+            return;
+        }
+        this.forcedLegType.set(null);
+        self.set(!self());
+        // A leg may carry its own source list — re-resolve the selection.
+        const breakdown = this.activeSourceBreakdown() ?? {};
+        const sources = Object.keys(breakdown);
+        if (sources.length && !breakdown[this.selectedSource()]) {
+            this.selectedSource.set(sources[0]);
+        }
+    }
+    /** Toggle a leg card's expanded/collapsed state. */
+    toggleLegExpanded(legType) {
+        const sig = legType === 'onward' ? this.onwardExpanded : this.returnExpanded;
+        sig.set(!sig());
+    }
+    /**
+     * Itemized refundable rows ("Fare" + named refundable add-ons/ancillaries)
+     * from `refundBreakdown.refundable`. Empty when the backend hasn't sent a
+     * breakdown yet — callers fall back to the single aggregate Fare row.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    refundableBreakdownRows(d) {
+        const b = d?.refundBreakdown?.refundable;
+        if (!b)
+            return [];
+        // Fare always shows from refundBreakdown.refundable.fare, even when 0 —
+        // never falls back to originalAmount.
+        const rows = [{ label: 'Fare', value: Number(b.fare ?? 0) }];
+        [...(b.addOns ?? []), ...(b.ancillaries ?? [])]
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .filter((item) => Number(item.amount) > 0)
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .forEach((item) => rows.push({ label: item.name, value: Number(item.amount) }));
+        return rows;
+    }
+    /** Named refundable add-ons/ancillaries only (excludes Fare) — drives the "processed separately" note. */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    refundableAddonItems(d) {
+        // Only `addOns` need manual Customer Service processing — `ancillaries`
+        // (baggage, seat, auto check-in, …) are already itemized/refunded
+        // automatically as part of the total, no separate note needed for them.
+        const b = d?.refundBreakdown?.refundable;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return (b?.addOns ?? []).filter((item) => Number(item.amount) > 0);
+    }
+    /** Whether to show the "add-on refund processed separately by Customer Service" note. */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    hasRefundableAddonNote(d) {
+        return this.refundableAddonItems(d).length > 0;
+    }
+    /**
+     * Deduction rows for the "Not Refunded" section. When an itemized
+     * breakdown is present, its named add-ons/ancillaries replace the
+     * aggregate `totalAncillaryRefundAmount`/`totalGiftAmount` rows (same
+     * money, named instead of lumped); the other generic rows (cancellation
+     * fee, handling fee, service charge) are unaffected.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    deductionRows(d) {
+        if (!d)
+            return [];
+        const b = d.refundBreakdown?.nonRefundable;
+        if (!b) {
+            return DEDUCTION_DEFS
+                .filter(def => Number(d[def.key]) > 0)
+                .map(def => ({ label: def.label, value: Number(d[def.key]), badge: def.badge }));
+        }
+        const itemRows = [...(b.addOns ?? []), ...(b.ancillaries ?? [])]
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .filter((item) => Number(item.amount) > 0)
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .map((item) => ({ label: item.name, value: Number(item.amount), badge: '' }));
+        const aggregateRows = DEDUCTION_DEFS
+            .filter(def => def.key !== 'totalAncillaryRefundAmount' && def.key !== 'totalGiftAmount')
+            .filter(def => Number(d[def.key]) > 0)
+            .map(def => ({ label: def.label, value: Number(d[def.key]), badge: def.badge }));
+        return [...itemRows, ...aggregateRows];
+    }
+    // Resolve the PNR for the currently selected leg from the booking's pnr_info list.
+    resolvePnr() {
+        const list = this.pnrInfo() ?? [];
+        if (!list.length)
+            return '';
+        const sel = this.selectedLeg();
+        const byDir = (dir) => list.find(p => p.LegDirectionality === dir)?.pnr;
+        if (sel === 'return')
+            return byDir('Return') ?? list[0]?.pnr ?? '';
+        if (sel === 'onward')
+            return byDir('Departure') ?? list[0]?.pnr ?? '';
+        return byDir('Departure') ?? list[0]?.pnr ?? '';
+    }
+    /** Rows that land in the wallet — plain wallet, wallet+loyalty combined, or loyalty-only — share the wallet icon/layout on the result screen. */
+    isWalletDestinationRow(r) {
+        return r.key === 'walletRefundAmount' || r.key === 'totalLoyaltyPoints';
+    }
+    fmtResult(value) {
+        const cur = this.cancelResult()?.currency ?? this.refundData()?.currency ?? 'SAR';
+        return `${Number(value || 0).toLocaleString('en-SA', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${cur}`;
+    }
+    /**
+     * `totalLoyaltyPoints` is normally the forfeited-at-booking points count
+     * (no refund destination of its own). But when the backend never
+     * populates `totalLoyaltyPointsRefundAmount` for a `loyaltyPaymentType`
+     * booking, this is the only signal that a loyalty program was involved,
+     * so it doubles as a split-refund row (alongside Card/Wallet) rather than
+     * disappearing from the refund breakdown entirely. Always shown as its
+     * own row under the program name (e.g. "Wala") — never merged into the
+     * generic Wallet row, even when `walletRefundAmount` is also non-zero.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    forfeitedLoyaltyPointsFallback(d) {
+        if (!d?.loyaltyPaymentType)
+            return 0;
+        if (Number(d.totalLoyaltyPointsRefundAmount ?? 0) > 0)
+            return 0;
+        return Number(d.totalLoyaltyPoints ?? 0);
+    }
+    /**
+     * Some `/confirm` responses for a single-leg (non-cross-seller) booking
+     * put `walletRefundAmount`/`totalLoyaltyPoints` on the wrong side at the
+     * root — e.g. root reads `walletRefundAmount: 40, totalLoyaltyPoints: 0`
+     * while the single leg (which should mirror root exactly here) reads
+     * `walletRefundAmount: 0, totalLoyaltyPoints: 40`. Detected narrowly: root
+     * shows no forfeited loyalty despite `loyaltyPaymentType` being set, the
+     * root wallet amount exactly equals the leg's loyalty points, and the
+     * leg's own wallet amount disagrees — in that specific case the leg's
+     * values are trusted instead, since with only one leg they're unambiguous.
+     *
+     * A second, more common shape: root doesn't swap at all, it folds the
+     * points straight into `walletRefundAmount` as one opaque lump sum (e.g.
+     * root wallet 340 = the leg's own cash wallet 300 + the leg's forfeited
+     * loyalty points 40). Split that back into the two parts the leg already
+     * tells us about too, so the result screen can show a combined wallet card
+     * with the program named instead of one unexplained total.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    correctedConfirmWalletAndLoyalty(d) {
+        const rootWallet = Number(d.walletRefundAmount ?? 0);
+        const forfeitedFromRoot = this.forfeitedLoyaltyPointsFallback(d);
+        if (forfeitedFromRoot > 0 || !d.loyaltyPaymentType) {
+            return { wallet: rootWallet, forfeitedLoyalty: forfeitedFromRoot };
+        }
+        const onward = d.legInfo?.onward;
+        const ret = d.legInfo?.return;
+        const leg = onward && !ret ? onward : ret && !onward ? ret : null;
+        if (!leg)
+            return { wallet: rootWallet, forfeitedLoyalty: 0 };
+        const legLoyalty = Number(leg.totalLoyaltyPoints ?? 0);
+        const legWallet = Number(leg.walletRefundAmount ?? 0);
+        // Full swap: root reads the leg's loyalty amount where its wallet should be.
+        if (legLoyalty > 0 &&
+            rootWallet === legLoyalty &&
+            legWallet !== rootWallet &&
+            Number(d.totalLoyaltyPointsRefundAmount ?? 0) === 0) {
+            return { wallet: legWallet, forfeitedLoyalty: legLoyalty };
+        }
+        // Lump sum: root wallet = leg's cash wallet + leg's forfeited loyalty.
+        if (legLoyalty > 0 &&
+            legWallet > 0 &&
+            Math.abs(rootWallet - (legWallet + legLoyalty)) < 1 &&
+            Number(d.totalLoyaltyPointsRefundAmount ?? 0) === 0) {
+            return { wallet: legWallet, forfeitedLoyalty: legLoyalty };
+        }
+        // Newer `/confirm` responses drop the loyalty portion from both root and
+        // leg totals — `walletRefundAmount` arrives as one opaque lump that's the
+        // cash-wallet portion (`totalWalletAmount`) plus a loyalty-program amount.
+        // When `loyaltyPaymentType` is set, the lump exceeds the cash-wallet
+        // portion, and it's a genuine card+wallet split (not a "send everything to
+        // the wallet" refund), the difference is that loyalty amount.
+        const cashWallet = Number(d.totalWalletAmount ?? 0);
+        const impliedLoyalty = rootWallet - cashWallet;
+        if (impliedLoyalty > 0.01 &&
+            cashWallet > 0 &&
+            Number(d.totalCardRefundAmount ?? 0) > 0 &&
+            Number(d.totalLoyaltyPointsRefundAmount ?? 0) === 0) {
+            return { wallet: cashWallet, forfeitedLoyalty: impliedLoyalty };
+        }
+        // The whole wallet refund is the loyalty-program balance — no cash-wallet
+        // portion (`totalWalletAmount` 0) and no card portion, but
+        // `loyaltyPaymentType` is set. Attribute all of it to the program so the
+        // popup names it (e.g. "Wala") with the permanent-points note.
+        if (cashWallet === 0 &&
+            rootWallet > 0 &&
+            Number(d.totalCardRefundAmount ?? 0) === 0 &&
+            Number(d.totalLoyaltyPointsRefundAmount ?? 0) === 0) {
+            return { wallet: 0, forfeitedLoyalty: rootWallet };
+        }
+        return { wallet: rootWallet, forfeitedLoyalty: 0 };
+    }
+    togglePaidSummary() {
+        this.paidSummaryExpanded.set(!this.paidSummaryExpanded());
+    }
+    /**
+     * The backend has sent `paymentMethodCustomerUsed` as both a short code
+     * (`"CH"`) and a full gateway name (`"Card"`) at different times — match
+     * either, case-insensitively, against the known codes/labels rather than
+     * assuming one format.
+     */
+    normalizeGatewayCode(raw) {
+        if (!raw)
+            return '';
+        const needle = raw.trim().toLowerCase();
+        const codes = Object.keys(PAYMENT_GATEWAY_LABELS);
+        const byCode = codes.find((code) => code.toLowerCase() === needle);
+        if (byCode)
+            return byCode;
+        return codes.find((code) => PAYMENT_GATEWAY_LABELS[code].toLowerCase() === needle) ?? '';
+    }
+    /**
+     * Wallet-row label for a loyalty-program redemption — `loyaltyPaymentType`
+     * (e.g. Wala, Qitaf) names the program that redeemed into the wallet
+     * balance and applies regardless of `paymentMethodCustomerUsed`; the
+     * backend can report an unrelated original payment gateway (e.g. Tabby)
+     * alongside a wallet portion that's actually a loyalty redemption.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    walletOrLoyaltyLabel(d) {
+        const loyalty = d?.loyaltyPaymentType ?? '';
+        return PAYMENT_GATEWAY_LABELS[loyalty] ?? '';
+    }
+    constructor() {
+        this.bookingService = inject(SbdBookingService);
+        this.toast = inject(SbdToastService);
+        this.visible = input(false);
+        this.bookingId = input('');
+        this.product = input('flight');
+        this.pnrInfo = input([]);
+        /** Same `booking_info` payload the dashboard already fetches (getBooking(..., 'booking_info')) — reused here to render real route/time details on the select-leg cards, instead of a second API call. */
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.bookingInfo = input(null);
+        this.closed = output();
+        this.confirmed = output();
+        /** Per-leg route/time details, mirroring app-sbd-flight-itinerary-card's mapping of booking_info.leg_info. */
+        this.itineraryLegs = computed(() => {
+            const bi = this.bookingInfo()?.data?.booking_info;
+            if (!bi)
+                return [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return (bi.leg_info ?? []).map((leg, i) => ({
+                direction: leg.LegDirectionality,
+                airlineName: (leg.LegAirlinesNames ?? []).join(', '),
+                cabin: leg.LegCabins?.[0]?.Name ?? '',
+                from: leg.LegDepartureAirportCode,
+                to: leg.LegArrivalAirportCode,
+                depTime: leg.LegDepartureDateTime,
+                arrTime: leg.LegArrivalDateTime,
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                stops: (leg.Stops ?? []),
+                totalMinutes: bi.duration?.legs?.[i]?.Segments
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    ?.reduce((sum, s) => sum + (s.SegmentElapsedTimeMinutes ?? 0), 0) ?? null,
+                operatedBy: leg.supplierName ? [leg.supplierName] : [],
+            }));
+        });
+        this.refundData = signal(null);
+        this.cancelResult = signal(null);
+        this.loading = signal(false);
+        this.cancelling = signal(false);
+        this.confirming = signal(false);
+        /**
+         * 'select-leg' shown once the refund preview resolves, for round-trip
+         * bookings the backend hasn't already restricted to a single leg — mirrors
+         * almatar-b2c's select-leg screen. Skipped straight to 'details' otherwise.
+         */
+        this.step = signal('loading');
+        /** Per-leg inclusion (checkbox) and expand/collapse state — round-trip only. */
+        this.onwardChecked = signal(true);
+        this.returnChecked = signal(true);
+        this.onwardExpanded = signal(true);
+        this.returnExpanded = signal(true);
+        this.selectedSource = signal('');
+        this.cancelHint = signal('');
+        this.paidSummaryExpanded = signal(false);
+        this.preferredRefundMethod = signal('originalPaymentMethod');
+        this.CANCEL_HINTS = [
+            'Loading your data...',
+            'Fetching Sabre data...',
+            'Fetching ATC data...',
+            'Calculating refund amount...',
+            'We are almost done, please wait...',
+        ];
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.hintTimer = null;
+        this.hasOnward = computed(() => !!this.refundData()?.legInfo?.onward);
+        this.hasReturn = computed(() => !!this.refundData()?.legInfo?.return);
+        this.isRoundTrip = computed(() => this.hasOnward() && this.hasReturn());
+        /** Which leg(s) the backend allows cancelling, from the refund preview response. */
+        this.legDirectionality = computed(() => this.refundData()?.legDirectionality);
+        /**
+         * Whether to render the round-trip "two leg cards" UI. Only when the
+         * backend explicitly allows cancelling both legs — otherwise (ONWARD-only /
+         * RETURN-only) show a single card for that leg, same as a one-way booking.
+         */
+        this.showRoundTripLegCards = computed(() => this.isRoundTrip() && (this.legDirectionality() ?? 'BOTH') === 'BOTH');
+        /** Derived from the per-leg checkboxes — 'both' unless exactly one is unchecked. */
+        this.selectedLeg = computed(() => {
+            if (!this.isRoundTrip())
+                return 'both';
+            const dir = this.legDirectionality();
+            if (dir === 'ONWARD')
+                return 'onward';
+            if (dir === 'RETURN')
+                return 'return';
+            const onward = this.onwardChecked();
+            const ret = this.returnChecked();
+            if (onward && ret)
+                return 'both';
+            return onward ? 'onward' : 'return';
+        });
+        // Returns the sourceBreakdown for the currently selected leg (or root for "both")
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.activeSourceBreakdown = computed(() => {
+            const sel = this.selectedLeg();
+            const root = this.refundData();
+            if (!root)
+                return null;
+            // A leg-scoped view (single leg, or both legs summed) must not fall back
+            // to root.sourceBreakdown — its totals are for the whole/original
+            // itinerary, not scoped to the leg(s) actually shown, and applying it
+            // would clobber the correctly leg-scoped totals computed in
+            // `currentData()`.
+            if (sel === 'onward')
+                return root.legInfo?.onward?.sourceBreakdown ?? null;
+            if (sel === 'return')
+                return root.legInfo?.return?.sourceBreakdown ?? null;
+            if (root.legInfo?.onward && root.legInfo?.return)
+                return null;
+            return root.sourceBreakdown ?? null;
+        });
+        this.availableSources = computed(() => Object.keys(this.activeSourceBreakdown() ?? {}));
+        this.currentData = computed(() => {
+            const root = this.refundData();
+            if (!root)
+                return null;
+            const sel = this.selectedLeg();
+            if (sel === 'onward' && root.legInfo?.onward)
+                return this.buildLegData(root, root.legInfo.onward, 'onward');
+            if (sel === 'return' && root.legInfo?.return)
+                return this.buildLegData(root, root.legInfo.return, 'return');
+            // Payment/refund figures come from `legInfo`, never root (root isn't
+            // reliably scoped to whichever leg(s) ended up selected) — combine both
+            // legs when both are in play, otherwise use whichever one exists.
+            const onward = root.legInfo?.onward;
+            const ret = root.legInfo?.return;
+            if (onward && ret)
+                return this.buildCombinedLegData(root, onward, ret);
+            if (onward && !ret)
+                return this.buildLegData(root, onward, 'onward');
+            if (ret && !onward)
+                return this.buildLegData(root, ret, 'return');
+            return root;
+        });
+        // currentData with source-specific penalty/refund/refundability overrides applied
+        this.adjustedData = computed(() => {
+            const base = this.currentData();
+            if (!base)
+                return null;
+            return this.applySourceOverride(base, this.activeSourceBreakdown());
+        });
+        /**
+         * Non-CrossSeller airlines require the whole round-trip/multicity
+         * itinerary to be cancelled together — a leg can't be excluded on its own
+         * unless it has already flown (which naturally degrades to a one-way
+         * cancellation of just the remaining leg). Set when an uncheck attempt was
+         * blocked for this reason, so the leg's checkbox can be frozen (locked)
+         * and the note shown.
+         */
+        this.forcedLegType = signal(null);
+        this.sourceNonRefundableHint = computed(() => {
+            const sel = this.selectedSource();
+            if (!sel)
+                return '';
+            const src = (this.activeSourceBreakdown() ?? {})[sel];
+            if (!src || src.isRefundable !== false)
+                return '';
+            return `Cancellation via ${sel} is not eligible for a refund. Please select a different source.`;
+        });
+        this.deductions = computed(() => this.deductionRows(this.adjustedData()));
+        this.refunds = computed(() => {
+            const d = this.adjustedData();
+            if (!d)
+                return [];
+            const isLoyalty = this.isLoyaltyMethod();
+            const paymentLabel = this.customerPaymentLabel();
+            const rows = REFUND_DEFS
+                .filter(def => Number(d[def.key]) > 0)
+                .map(def => ({
+                // Wallet row always reads "Almatar Wallet" (def.label) — the loyalty
+                // program that funded it gets its own dedicated row below via
+                // `forfeitedLoyaltyPointsFallback`, so the two stay visually
+                // distinct instead of merging into one label.
+                // Card row: card/loyalty stay distinct — don't relabel the card
+                // portion with the loyalty program name too, and never surface an
+                // internal processor name (empty `paymentLabel` falls back to the
+                // generic def.label, e.g. "Refund Amount").
+                label: def.key === 'totalCardRefundAmount' && !isLoyalty && paymentLabel
+                    ? `${def.label} ${paymentLabel}`
+                    : def.label,
+                value: Number(d[def.key]),
+            }));
+            const forfeitedLoyalty = this.forfeitedLoyaltyPointsFallback(d);
+            if (forfeitedLoyalty > 0) {
+                rows.push({ label: this.walletOrLoyaltyLabel(d), value: forfeitedLoyalty });
+            }
+            return rows;
+        });
+        this.creditShellNote = computed(() => {
+            // Golden Guarantee overrides credit-shell messaging entirely — the
+            // dedicated success notice (`goldenGuaranteeNote`) is shown instead.
+            if (this.hasGoldenGuaranteeGift())
+                return '';
+            const d = this.currentData();
+            if (!d)
+                return '';
+            const legInfo = d.legInfo ?? {};
+            const hasO = !!legInfo.onward;
+            const hasR = !!legInfo.return;
+            const oShell = legInfo.onward?.isCreditShell === true;
+            const rShell = legInfo.return?.isCreditShell === true;
+            const isShell = (hasO && hasR && oShell && rShell) ||
+                (hasO && !hasR && oShell) ||
+                (!hasO && hasR && rShell) ||
+                (hasO && hasR && (oShell || rShell));
+            if (!isShell)
+                return '';
+            const amount = this.fmt(Number(this.adjustedData()?.totalRefundAmount ?? d.totalRefundAmount ?? 0));
+            const pnr = this.resolvePnr();
+            const pnrText = pnr ? `the same PNR (${pnr})` : 'the same PNR';
+            return `The refund of ${amount} will be issued as airline credit under ${pnrText}. ${CREDIT_SHELL_SUFFIX}`;
+        });
+        /**
+         * Booking includes a Golden Guarantee gift ("Cancel for any reason") —
+         * overrides all credit-shell handling below, since a Golden Guarantee
+         * cancellation always refunds 100% through the standard payment method
+         * rather than the airline credit shell. May be carried on either the
+         * preview (`refundData`) or the confirm (`cancelResult`) response — both
+         * share the same shape, and either one may set it independently of the
+         * other.
+         */
+        this.hasGoldenGuaranteeGift = computed(() => this.refundData()?.hasGoldenGuaranteeGift === true ||
+            this.cancelResult()?.hasGoldenGuaranteeGift === true);
+        // Whether the refund is a credit-shell refund (whole booking or either leg).
+        // Such refunds can only return to the airline credit shell, so the
+        // refund-method picker is replaced with a single read-only credit notice.
+        // A Golden Guarantee gift overrides this to `false` — that portion needs an
+        // actual destination choice, so the booking falls back to the standard
+        // refund-method flow despite being flagged credit-shell.
+        this.isCreditShell = computed(() => {
+            if (this.hasGoldenGuaranteeGift())
+                return false;
+            const d = this.refundData();
+            return (d?.isCreditShell === true ||
+                d?.legInfo?.onward?.isCreditShell === true ||
+                d?.legInfo?.return?.isCreditShell === true);
+        });
+        /**
+         * Refundable ancillaries (baggage, seats, …) that carry their own
+         * `isCreditShell` flag, independent of the booking-level flag — rendered
+         * as individual cards on the credit-shell refund-method screen so each
+         * one can show either the credit-shell card style or the normal wallet
+         * card style (both include the same nested credit-shell note when true).
+         */
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.creditShellAncillaryItems = computed(() => (this.adjustedData()?.refundBreakdown?.refundable?.ancillaries ?? [])
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .filter((item) => Number(item.amount) > 0));
+        // Airline that issues the credit shell, for the "<supplier> website credit" card.
+        this.creditShellSupplierName = computed(() => {
+            const d = this.refundData();
+            return (d?.legInfo?.onward?.supplierName ??
+                d?.legInfo?.return?.supplierName ??
+                d?.supplierName ??
+                d?.appliedSource ??
+                '');
+        });
+        // Header title reflecting the refund type for the active selection.
+        this.refundTypeLabel = computed(() => {
+            if (!this.refundData()?.isRefundable)
+                return 'Refund Details';
+            return this.creditShellNote() ? 'Credit Shell Refund' : 'Refund Details';
+        });
+        this.currency = computed(() => this.refundData()?.currency ?? 'SAR');
+        // Self-consistency check between the paid amount, deductions and the system refund.
+        // Surfaced to the agent so mismatched/over-deducted refunds can be caught before confirming.
+        this.discrepancyNote = computed(() => {
+            const d = this.adjustedData();
+            if (!d || !d.isRefundable)
+                return '';
+            const paid = Number(d.originalAmount || 0);
+            const deduction = Number(d.totalCancellationFee || 0);
+            const refund = Number(d.totalRefundAmount || 0);
+            const issues = [];
+            if (deduction > paid + 0.01)
+                issues.push(`Total deduction (${this.fmt(deduction)}) exceeds the paid amount (${this.fmt(paid)}).`);
+            if (Math.abs((paid - deduction) - refund) > 0.01)
+                issues.push(`Computed refund (${this.fmt(paid - deduction)}) doesn't match the system refund (${this.fmt(refund)}).`);
+            return issues.join(' ');
+        });
+        /** Real per-booking CrossSeller flag from the refund preview — CrossSeller suppliers allow cancelling either leg independently. */
+        this.isCrossSeller = computed(() => this.refundData()?.isCrossSeller === true);
+        // Non-CrossSeller round trips are one itinerary sold as a single fare —
+        // both legs share the same refundability, sourced from root, even when
+        // the backend's legInfo entry for a leg is missing or inconsistent.
+        // CrossSeller legs are independently sellable, so each leg's own field
+        // still governs there.
+        this.onwardRefundable = computed(() => {
+            if (!this.hasOnward())
+                return false;
+            return this.isCrossSeller()
+                ? this.refundData()?.legInfo?.onward?.isRefundable === true
+                : this.refundData()?.isRefundable === true;
+        });
+        this.returnRefundable = computed(() => {
+            if (!this.hasReturn())
+                return false;
+            return this.isCrossSeller()
+                ? this.refundData()?.legInfo?.return?.isRefundable === true
+                : this.refundData()?.isRefundable === true;
+        });
+        this.isMixed = computed(() => this.isRoundTrip() && this.onwardRefundable() !== this.returnRefundable());
+        /** Both legs present and BOTH non-refundable — nothing can be refunded for this booking. */
+        this.allLegsNonRefundable = computed(() => this.isRoundTrip() && !this.onwardRefundable() && !this.returnRefundable());
+        this.mixedHint = computed(() => {
+            // Only relevant when agent is about to cancel both legs together —
+            // individual leg tabs already show their own non-refundable notice.
+            if (!this.isMixed() || this.selectedLeg() !== 'both')
+                return '';
+            if (!this.onwardRefundable())
+                return '⚠️ Onward leg is not eligible for refund. Please contact customer service if you want to cancel it.';
+            if (!this.returnRefundable())
+                return '⚠️ Return leg is not eligible for refund. Please contact customer service if you want to cancel it.';
+            return '';
+        });
+        this.giftHint = computed(() => {
+            const root = this.refundData();
+            if (!root || !this.isRoundTrip())
+                return '';
+            const hasGift = Number(root.totalGiftAmount || 0) > 0 ||
+                Number(root.legInfo?.onward?.totalGiftAmount || 0) > 0 ||
+                Number(root.legInfo?.return?.totalGiftAmount || 0) > 0;
+            return hasGift ? GIFT_HINT : '';
+        });
+        this.selectionHint = computed(() => {
+            if (!this.isRoundTrip())
+                return '';
+            const map = {
+                onward: 'You are about to cancel: Onward leg only',
+                return: 'You are about to cancel: Return leg only',
+                both: 'You are about to cancel: Both legs',
+            };
+            return map[this.selectedLeg()];
+        });
+        this.confirmDeductions = computed(() => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const d = this.cancelResult();
+            if (!d)
+                return [];
+            return DEDUCTION_DEFS.filter(def => Number(d[def.key]) > 0).map(def => ({ label: def.label, value: Number(d[def.key]) }));
+        });
+        this.confirmRefunds = computed(() => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const d = this.cancelResult();
+            if (!d)
+                return [];
+            const code = this.normalizeGatewayCode(d.paymentMethodCustomerUsed);
+            const isLoyalty = LOYALTY_GATEWAY_CODES.includes(code);
+            const isMada = this.confirmIsMadaMethod();
+            const paymentLabel = code && !INTERNAL_GATEWAY_CODES.includes(code) ? PAYMENT_GATEWAY_LABELS[code] : '';
+            const rows = [];
+            const { wallet, forfeitedLoyalty } = this.correctedConfirmWalletAndLoyalty(d);
+            // Golden Guarantee overrides credit-shell handling on the result screen
+            // too — whatever landed as a credit-shell amount folds into the normal
+            // original-payment-method row instead of getting its own "airline
+            // credit" card, so the confirmation reads like an ordinary Sabre/Amadeus
+            // refund.
+            const goldenGuaranteeOverride = this.hasGoldenGuaranteeGift();
+            // Credit-shell row goes first — matches the design (airline credit above
+            // the wallet row) — before the card and wallet rows below.
+            if (!goldenGuaranteeOverride) {
+                const credit = Number(d.totalCreditRefundAmount ?? 0);
+                if (credit > 0) {
+                    const supplier = d.appliedSource || this.creditShellSupplierName();
+                    rows.push({
+                        key: 'totalCreditRefundAmount',
+                        label: supplier ? `${supplier} website credit` : 'Credit Shell Refund',
+                        value: credit,
+                    });
+                }
+            }
+            const cardAmount = Number(d.totalCardRefundAmount ?? 0) +
+                (goldenGuaranteeOverride ? Number(d.totalCreditRefundAmount ?? 0) : 0);
+            if (cardAmount > 0) {
+                rows.push({
+                    key: 'totalCardRefundAmount',
+                    label: isMada
+                        ? 'Mada Card'
+                        : !isLoyalty && paymentLabel
+                            ? `Refund Amount ${paymentLabel}`
+                            : 'Refund Amount',
+                    value: cardAmount,
+                });
+            }
+            if (wallet > 0 && forfeitedLoyalty > 0) {
+                // Wallet cash + a loyalty program's points both landed in the wallet —
+                // shown as one combined card with the two sources broken out as named
+                // sub-rows, rather than two separate top-level cards.
+                rows.push({
+                    key: 'walletRefundAmount',
+                    label: 'Almatar Wallet',
+                    value: wallet + forfeitedLoyalty,
+                    subRows: [
+                        { label: 'Almatar wallet points', value: wallet },
+                        { label: `${this.walletOrLoyaltyLabel(d)} points`, value: forfeitedLoyalty },
+                    ],
+                    hasLoyaltyNote: true,
+                });
+            }
+            else if (wallet > 0) {
+                rows.push({ key: 'walletRefundAmount', label: 'Almatar Wallet', value: wallet });
+            }
+            else if (forfeitedLoyalty > 0) {
+                // Loyalty-only — no wallet cash involved, still lands as permanent
+                // wallet points, so it keeps the wallet-style card + note.
+                rows.push({
+                    key: 'totalLoyaltyPoints',
+                    label: this.walletOrLoyaltyLabel(d),
+                    value: forfeitedLoyalty,
+                    hasLoyaltyNote: true,
+                });
+            }
+            REFUND_DEFS
+                .filter((def) => def.key !== 'walletRefundAmount' &&
+                def.key !== 'totalCardRefundAmount' &&
+                def.key !== 'totalCreditRefundAmount' &&
+                Number(d[def.key]) > 0)
+                .forEach((def) => {
+                rows.push({ key: def.key, label: def.label, value: Number(d[def.key]) });
+            });
+            return rows;
+        });
+        /**
+         * The result screen's "issued as an Airline Credit Shell" note. Golden
+         * Guarantee overrides this to '' — the confirmation renders like a
+         * standard Sabre/Amadeus refund instead (see `confirmRefunds`' folding
+         * of any credit-shell amount into the normal payment-method row).
+         */
+        this.confirmCreditShellNote = computed(() => {
+            if (this.hasGoldenGuaranteeGift())
+                return '';
+            const d = this.cancelResult();
+            if (!d)
+                return '';
+            const legInfo = d.legInfo ?? {};
+            const hasO = !!legInfo.onward;
+            const hasR = !!legInfo.return;
+            const oShell = legInfo.onward?.isCreditShell === true;
+            const rShell = legInfo.return?.isCreditShell === true;
+            const topShell = d.isCreditShell === true;
+            if ((hasO && hasR && oShell && rShell) || (hasO && !hasR && oShell) || (!hasO && hasR && rShell) || topShell)
+                return 'The refund has been issued as an Airline Credit Shell and can be used for future bookings on the airline website.';
+            if (hasO && hasR) {
+                if (oShell)
+                    return 'The refund for the onward flight has been issued as an Airline Credit Shell.';
+                if (rShell)
+                    return 'The refund for the return flight has been issued as an Airline Credit Shell.';
+            }
+            return '';
+        });
+        /**
+         * The customer-facing total (ceiled) must match the pre-rounding total the
+         * refund is actually computed from — i.e. `totalRefundAmount` must be
+         * `totalRefundAmountBeforeCeil` rounded up to a whole currency unit (e.g.
+         * 1454.5 → 1455). A mismatch here means the supplier response itself is
+         * internally inconsistent and must block confirmation.
+         */
+        this.refundReconciles = computed(() => {
+            const d = this.adjustedData();
+            if (!d || !d.isRefundable)
+                return true;
+            const beforeCeil = Number(d.totalRefundAmountBeforeCeil ?? d.totalRefundAmount ?? 0);
+            const total = Number(d.totalRefundAmount ?? beforeCeil);
+            return Math.abs(Math.ceil(beforeCeil) - total) < 1;
+        });
+        this.canConfirm = computed(() => {
+            const d = this.adjustedData();
+            return !!d?.isRefundable && this.refundReconciles() && !this.cancelling();
+        });
+        /** How many of {wallet, card, loyalty} the refund is actually split across. */
+        this.splitPartsCount = computed(() => {
+            const d = this.adjustedData();
+            if (!d)
+                return 0;
+            return [
+                d.walletRefundAmount,
+                d.totalCardRefundAmount,
+                d.totalLoyaltyPointsRefundAmount,
+                this.forfeitedLoyaltyPointsFallback(d),
+            ].filter((v) => Number(v ?? 0) > 0).length;
+        });
+        /**
+         * A portion of the refund is forced to the wallet (e.g. loyalty points used)
+         * — in that case offer a "Split Refund" option instead of a pure
+         * original-payment-method option, since the whole amount can't go to card.
+         */
+        this.hasSplitRefund = computed(() => Number(this.adjustedData()?.totalRefundAmount ?? 0) > 0 && this.splitPartsCount() >= 2);
+        /**
+         * Wallet covers the whole refund (no card or loyalty portion at all) — show
+         * the wallet option alone rather than a "split" with empty other sides.
+         */
+        this.isWalletOnlyRefund = computed(() => {
+            const d = this.adjustedData();
+            return (Number(d?.walletRefundAmount ?? 0) > 0 &&
+                Number(d?.totalCardRefundAmount ?? 0) === 0 &&
+                Number(d?.totalLoyaltyPointsRefundAmount ?? 0) === 0 &&
+                this.forfeitedLoyaltyPointsFallback(d) === 0);
+        });
+        /**
+         * The entire refund is forfeited loyalty points (e.g. Wala) landing back as
+         * wallet balance — no cash-wallet, card, credit or real
+         * loyalty-points-refund portion at all. Without this the picker falls
+         * through to the "Original Payment Method" card and mislabels the
+         * destination as the original gateway (e.g. "Tabby"), even though
+         * `totalCardRefundAmount` is 0 and nothing goes back to that card.
+         */
+        this.isLoyaltyOnlyRefund = computed(() => {
+            const d = this.adjustedData();
+            return (this.forfeitedLoyaltyPointsFallback(d) > 0 &&
+                Number(d?.walletRefundAmount ?? 0) === 0 &&
+                Number(d?.totalCardRefundAmount ?? 0) === 0 &&
+                Number(d?.totalCreditRefundAmount ?? 0) === 0 &&
+                Number(d?.totalLoyaltyPointsRefundAmount ?? 0) === 0);
+        });
+        /** A real cash-wallet portion is part of the refund (distinct from forfeited loyalty points landing in the wallet). */
+        this.hasCashWalletRefund = computed(() => Number(this.adjustedData()?.walletRefundAmount ?? 0) > 0);
+        /**
+         * Wallet card's title — normally "Almatar Wallet", but the loyalty program
+         * name (Wala, Qitaf, …) when the whole refund is that program's forfeited
+         * balance landing back in the wallet.
+         */
+        this.walletCardLabel = computed(() => this.isLoyaltyOnlyRefund()
+            ? this.walletOrLoyaltyLabel(this.adjustedData()) || 'Almatar Wallet'
+            : '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
+         * agent knows those points land as permanent wallet balance, not cash.
+         */
+        this.hasLoyaltyPointsRefund = computed(() => Number(this.adjustedData()?.totalLoyaltyPoints ?? 0) > 0);
+        /**
+         * The booking is refundable but nets to 0.00 after deductions — a
+         * dedicated NIL Refund state, distinct from "not refundable": no refund
+         * method to choose between, just confirmation that nothing is owed back.
+         */
+        this.isNilRefund = computed(() => {
+            const d = this.adjustedData();
+            return !!d?.isRefundable && Number(d.totalRefundAmount ?? 0) === 0;
+        });
+        /** Same as `isNilRefund`, scoped to the confirmed cancellation result — drives the result screen's title. */
+        this.confirmIsNilRefund = computed(() => {
+            const d = this.cancelResult();
+            return !!d?.isRefundable && Number(d.totalRefundAmount ?? 0) === 0;
+        });
+        /** Whether the customer may send the whole refund to their Almatar Wallet. */
+        this.isFullWalletRefundAllowed = computed(() => !!this.adjustedData()?.isFullWalletRefundAllowed);
+        /** Whether the customer paid via an installment gateway (Tamara, Tabby, …). */
+        this.isInstallmentMethod = computed(() => INSTALLMENT_GATEWAY_CODES.includes(this.normalizeGatewayCode(this.adjustedData()?.paymentMethodCustomerUsed)));
+        /** Whether the customer paid via a loyalty-program gateway (Al Rajhi Mokafaa, …). */
+        this.isLoyaltyMethod = computed(() => LOYALTY_GATEWAY_CODES.includes(this.normalizeGatewayCode(this.adjustedData()?.paymentMethodCustomerUsed)));
+        /** Any gateway that refunds somewhere other than a plain card — used for the wallet-style icon. */
+        this.isSpecialGatewayMethod = computed(() => this.isInstallmentMethod() || this.isLoyaltyMethod());
+        /**
+         * Card-refund settlement-timeline badge — Tabby and Tamara each have their
+         * own processing window, distinct from a plain card's generic bank policy.
+         */
+        this.cardBadgeText = computed(() => {
+            const code = this.normalizeGatewayCode(this.adjustedData()?.paymentMethodCustomerUsed);
+            if (code === 'TB')
+                return 'From 5-7 business days';
+            if (code === 'TM')
+                return 'Up to 10 business days';
+            if (this.isLoyaltyMethod())
+                return 'Loyalty Program Policy';
+            return 'Up to 15 business days, bank policy';
+        });
+        /** Same as `cardBadgeText`, scoped to the confirmed cancellation result. */
+        this.confirmCardBadgeText = computed(() => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const d = this.cancelResult();
+            const code = this.normalizeGatewayCode(d?.paymentMethodCustomerUsed);
+            if (code === 'TB')
+                return 'From 5-7 business days';
+            if (code === 'TM')
+                return 'Up to 10 business days';
+            if (LOYALTY_GATEWAY_CODES.includes(code))
+                return 'Loyalty Program Policy';
+            return 'Up to 15 business days, bank policy';
+        });
+        /**
+         * Per-method breakdown of the "Total paid" amount. The backend doesn't
+         * (yet) expose a dedicated original-payment breakdown, so the known
+         * refund-destination fields (card / wallet / loyalty) are used as a proxy
+         * for how the booking was originally paid, and whatever's left over after
+         * those (e.g. a non-refundable leg/fee that never shows up in any refund
+         * field) is folded into the primary payment method — so the rows always
+         * add up to the full `originalAmount` shown above them, instead of only
+         * covering the refundable portion.
+         */
+        this.paidBreakdownRows = computed(() => {
+            const d = this.adjustedData();
+            if (!d)
+                return [];
+            // Card and loyalty stay distinct labels (same categorization as
+            // `refunds`) so a gateway like Al Rajhi Mokafaa doesn't swallow an
+            // actual separate card portion under one label.
+            const cardLabel = (!this.isLoyaltyMethod() && this.customerPaymentLabel()) || 'Original Payment Method';
+            // The wallet destination row always reads "Almatar Wallet" — unlike
+            // `refunds`/`confirmRefunds`, this row never swaps to the loyalty
+            // program name, since `forfeitedLoyaltyLabel` below is that program's
+            // own dedicated row and the two must stay visually distinct here.
+            const walletLabel = 'Almatar Wallet';
+            const forfeitedLoyaltyLabel = this.walletOrLoyaltyLabel(d) || 'Loyalty Points';
+            const loyaltyLabel = this.customerPaymentLabel() || 'Loyalty Points Refund';
+            const amounts = new Map();
+            const add = (label, value) => {
+                if (value <= 0)
+                    return;
+                amounts.set(label, (amounts.get(label) ?? 0) + value);
+            };
+            add(cardLabel, Number(d.totalCardRefundAmount ?? 0));
+            // This row shows how much of the *original* payment went through the
+            // wallet — `totalWalletAmount`, not `walletRefundAmount` (a refund
+            // destination amount that can differ, e.g. only part of the wallet
+            // payment is refundable after deductions).
+            add(walletLabel, Number(d.totalWalletAmount ?? 0));
+            add(loyaltyLabel, Number(d.totalLoyaltyPointsRefundAmount ?? 0));
+            // `totalLoyaltyPoints` is the portion of the *original* payment made with
+            // loyalty points (now forfeited/deducted, not refunded) — distinct from
+            // `totalLoyaltyPointsRefundAmount` above and from `walletRefundAmount`
+            // (an unrelated refund-destination amount). Always shown as its own row
+            // under the program name (e.g. "Qitaf"/"Wala") rather than merged into
+            // the generic Wallet row or silently folded into the leftover remainder.
+            add(forfeitedLoyaltyLabel, Number(d.totalLoyaltyPoints ?? 0));
+            const total = Number(d.originalAmount ?? 0);
+            const known = [...amounts.values()].reduce((a, b) => a + b, 0);
+            const remainder = total - known;
+            if (remainder > 0.01) {
+                // Unaccounted leftover (e.g. a non-refundable portion) is folded into
+                // the primary/default payment channel rather than a fabricated 4th row.
+                add(cardLabel, remainder);
+            }
+            return [...amounts.entries()].map(([label, value]) => ({ label, value }));
+        });
+        /** The "Total paid" row always expands — there's always at least one method to show. */
+        this.hasPaidBreakdown = computed(() => this.paidBreakdownRows().length > 0);
+        /**
+         * Display label for `paymentMethodCustomerUsed`, or '' if unknown/internal.
+         * Never surfaces an internal processor name (e.g. Hyperpay) to the agent —
+         * callers fall back to a generic "Original Payment Method" label whenever
+         * this returns ''.
+         */
+        this.customerPaymentLabel = computed(() => {
+            const code = this.normalizeGatewayCode(this.adjustedData()?.paymentMethodCustomerUsed);
+            if (code && INTERNAL_GATEWAY_CODES.includes(code))
+                return '';
+            return code ? PAYMENT_GATEWAY_LABELS[code] : '';
+        });
+        /** Whether the confirmed cancellation's card refund settles via Mada. */
+        this.isMadaMethod = computed(() => {
+            const code = this.normalizeGatewayCode(this.adjustedData()?.paymentMethodCustomerUsed);
+            return !!code && MADA_GATEWAY_CODES.includes(code);
+        });
+        /**
+         * Label for the standalone "Original Payment Method" option card (shown
+         * when the whole refund goes to one destination). Mada wins over
+         * everything else, reading "Mada Card" instead of the generic gateway
+         * name or the "Original Payment Method" fallback.
+         */
+        this.originalPaymentLabel = computed(() => {
+            if (this.isMadaMethod())
+                return 'Mada Card';
+            return this.customerPaymentLabel() || 'Original Payment Method';
+        });
+        /** Same as `isMadaMethod`, scoped to the confirmed cancellation result. */
+        this.confirmIsMadaMethod = computed(() => {
+            const code = this.normalizeGatewayCode(this.cancelResult()?.paymentMethodCustomerUsed);
+            return !!code && MADA_GATEWAY_CODES.includes(code);
+        });
+        /**
+         * Split-refund destination rows — up to four: Almatar Wallet (generic
+         * label), the original payment method (card/installment gateway), a
+         * separate loyalty-points-refund row when the backend sends one, and a
+         * dedicated loyalty-program row (Wala, Qitaf, …) for forfeited points
+         * (`forfeitedLoyaltyPointsFallback`) — kept distinct from the Wallet row
+         * even when both are non-zero.
+         */
+        this.splitRefundRows = computed(() => {
+            const d = this.adjustedData();
+            if (!d)
+                return [];
+            const rows = [];
+            const wallet = Number(d.walletRefundAmount ?? 0);
+            if (wallet > 0) {
+                rows.push({ label: 'Almatar Wallet', value: wallet, instant: true, isLoyalty: false, badgeText: 'Instant' });
+            }
+            const card = Number(d.totalCardRefundAmount ?? 0);
+            if (card > 0) {
+                const badgeText = this.cardBadgeText();
+                rows.push({
+                    label: this.isMadaMethod()
+                        ? 'Mada Card'
+                        : (!this.isLoyaltyMethod() && this.customerPaymentLabel()) || 'Original Payment Method',
+                    value: card,
+                    instant: false,
+                    isLoyalty: false,
+                    badgeText,
+                    isMada: this.isMadaMethod(),
+                });
+            }
+            const loyalty = Number(d.totalLoyaltyPointsRefundAmount ?? 0);
+            if (loyalty > 0) {
+                rows.push({
+                    label: this.customerPaymentLabel() || 'Loyalty Points Refund',
+                    value: loyalty,
+                    instant: true,
+                    isLoyalty: true,
+                    badgeText: 'Instant',
+                });
+            }
+            const forfeitedLoyalty = this.forfeitedLoyaltyPointsFallback(d);
+            if (forfeitedLoyalty > 0) {
+                rows.push({
+                    label: this.walletOrLoyaltyLabel(d) || 'Loyalty Points',
+                    value: forfeitedLoyalty,
+                    instant: true,
+                    isLoyalty: true,
+                    badgeText: 'Instant',
+                });
+            }
+            return rows;
+        });
+        effect(() => {
+            if (this.visible() && this.bookingId()) {
+                this.loadRefund();
+            }
+            else {
+                this.stopHints();
+                this.refundData.set(null);
+                this.cancelResult.set(null);
+                this.onwardChecked.set(true);
+                this.returnChecked.set(true);
+                this.forcedLegType.set(null);
+                this.onwardExpanded.set(true);
+                this.returnExpanded.set(true);
+                this.selectedSource.set('');
+                this.preferredRefundMethod.set('originalPaymentMethod');
+                this.confirming.set(false);
+                this.cancelling.set(false);
+                this.step.set('loading');
+            }
+        }, { allowSignalWrites: true });
+    }
+    loadRefund() {
+        this.loading.set(true);
+        this.startHints();
+        this.bookingService.getRefundDetails(this.bookingId(), this.product()).subscribe({
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            next: (raw) => {
+                let data = raw?.data ?? raw;
+                this.stopHints();
+                this.refundData.set(data);
+                // Auto-select source: prefer appliedSource, otherwise pick first available
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const breakdown = data?.sourceBreakdown ?? {};
+                const sources = Object.keys(breakdown);
+                if (sources.length > 0) {
+                    const applied = data?.appliedSource;
+                    this.selectedSource.set(applied && breakdown[applied] ? applied : sources[0]);
+                }
+                this.loading.set(false);
+                // Only show the leg picker for a genuine round-trip the backend hasn't
+                // already restricted to a single leg — otherwise go straight to details.
+                if (this.showRoundTripLegCards()) {
+                    // Pre-check whichever legs are actually refundable, matching the
+                    // consumer app's "non-refundable legs can't be selected" behavior.
+                    this.onwardChecked.set(this.onwardRefundable());
+                    this.returnChecked.set(this.returnRefundable());
+                    this.step.set('select-leg');
+                }
+                else {
+                    this.step.set('details');
+                }
+            },
+            error: () => { this.stopHints(); this.loading.set(false); this.toast.error('Could not load refund details.'); },
+        });
+    }
+    /**
+     * Both legs in play — sum each leg's own figures instead of trusting root
+     * (root isn't reliably scoped to the picked alternatives, e.g. rounding
+     * can drift between leg totals and the combined root total).
+     */
+    buildCombinedLegData(root, onward, ret) {
+        const onwardData = this.buildLegData(root, onward, 'onward');
+        const returnData = this.buildLegData(root, ret, 'return');
+        const sum = (key) => Number(onwardData[key] || 0) + Number(returnData[key] || 0);
+        return {
+            ...root,
+            isRefundable: onward.isRefundable === true && ret.isRefundable === true,
+            totalRefundAmount: sum('totalRefundAmount'),
+            totalRefundAmountBeforeCeil: sum('totalRefundAmountBeforeCeil'),
+            totalCardRefundAmount: sum('totalCardRefundAmount'),
+            totalCreditRefundAmount: sum('totalCreditRefundAmount'),
+            totalNonRefundableServiceCharge: sum('totalNonRefundableServiceCharge'),
+            totalCouponAmount: sum('totalCouponAmount'),
+            walletRefundAmount: sum('walletRefundAmount'),
+            totalPenaltyPoints: sum('totalPenaltyPoints'),
+            totalSupplierPenaltyPoints: sum('totalSupplierPenaltyPoints'),
+            totalLoyaltyPoints: sum('totalLoyaltyPoints'),
+            totalGiftAmount: sum('totalGiftAmount'),
+            totalAncillaryRefundAmount: sum('totalAncillaryRefundAmount'),
+            totalLoyaltyPointsRefundAmount: sum('totalLoyaltyPointsRefundAmount'),
+            totalCancellationFee: sum('totalCancellationFee'),
+            totalSupplierBookingAmount: sum('totalSupplierBookingAmount'),
+            originalAmount: Number(root.originalAmount || 0),
+            refundBreakdown: this.mergeBreakdowns(onwardData.refundBreakdown, returnData.refundBreakdown),
+            legInfo: { onward, return: ret },
+        };
+    }
+    /** Combine two legs' itemized breakdowns for the "both legs" combined view. */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    mergeBreakdowns(a, b) {
+        if (!a && !b)
+            return undefined;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const mergeSide = (sa, sb) => ({
+            fare: Number(sa?.fare || 0) + Number(sb?.fare || 0) || undefined,
+            addOns: [...(sa?.addOns ?? []), ...(sb?.addOns ?? [])],
+            ancillaries: [...(sa?.ancillaries ?? []), ...(sb?.ancillaries ?? [])],
+            serviceFee: Number(sa?.serviceFee || 0) + Number(sb?.serviceFee || 0) || undefined,
+            handlingFee: Number(sa?.handlingFee || 0) + Number(sb?.handlingFee || 0) || undefined,
+            cancellationPenalty: Number(sa?.cancellationPenalty || 0) + Number(sb?.cancellationPenalty || 0) || undefined,
+        });
+        return {
+            refundable: mergeSide(a?.refundable, b?.refundable),
+            nonRefundable: mergeSide(a?.nonRefundable, b?.nonRefundable),
+        };
+    }
+    buildLegData(root, leg, legType) {
+        // When this leg has no sibling in `legInfo` (a genuine one-way booking,
+        // or a narrowed CrossSeller selection where the API only ever sent the
+        // one leg), root necessarily describes this same single leg — so a
+        // destination total the leg's own object left at 0 can safely fall back
+        // to root's figure instead of silently zeroing out a real refund
+        // destination. With a sibling leg present, root aggregates both legs and
+        // is not trustworthy per-leg, so the leg's own value (even 0) wins.
+        const hasSiblingLeg = legType === 'onward' ? !!root.legInfo?.return : !!root.legInfo?.onward;
+        const fallback = (value, rootValue) => Number(value || (hasSiblingLeg ? 0 : rootValue) || 0);
+        const isCreditShell = leg.isCreditShell === true;
+        const legRefund = Number(leg.totalRefundAmount ?? 0);
+        const cardRefund = isCreditShell ? 0 : fallback(leg.totalCardRefundAmount, root.totalCardRefundAmount);
+        const creditRefund = isCreditShell ? legRefund : fallback(leg.totalCreditRefundAmount, root.totalCreditRefundAmount);
+        // The backend sometimes omits `isRefundable` on a single-leg booking's
+        // leg object entirely (not `false`, just absent) while the root/source
+        // breakdown both say the booking is refundable — trust the root flag
+        // rather than defaulting a missing field to "not eligible for a refund".
+        const legIsRefundable = leg.isRefundable === undefined ? root.isRefundable === true : leg.isRefundable === true;
+        return {
+            ...root,
+            isRefundable: legIsRefundable,
+            totalRefundAmount: legRefund,
+            // Pre-rounding total — the backend ceils `totalRefundAmount` to a whole
+            // currency unit, so wallet+card+credit+loyalty legitimately fall a few
+            // cents short of it; reconciliation must compare against this instead.
+            totalRefundAmountBeforeCeil: Number(leg.totalRefundAmountBeforeCeil ?? leg.totalRefundAmount ?? 0),
+            totalCardRefundAmount: cardRefund,
+            totalCreditRefundAmount: creditRefund,
+            totalNonRefundableServiceCharge: Number(leg.totalNonRefundableServiceCharge || 0),
+            totalCouponAmount: Number(leg.totalCouponAmount || 0),
+            walletRefundAmount: fallback(leg.walletRefundAmount, root.walletRefundAmount),
+            totalPenaltyPoints: Number(leg.totalPenaltyPoints || 0),
+            totalSupplierPenaltyPoints: Number(leg.totalSupplierPenaltyPoints || 0),
+            totalLoyaltyPoints: Number(leg.totalLoyaltyPoints || 0),
+            totalGiftAmount: Number(leg.totalGiftAmount || 0),
+            totalAncillaryRefundAmount: Number(leg.totalAncillaryRefundAmount || 0),
+            totalLoyaltyPointsRefundAmount: fallback(leg.totalLoyaltyPointsRefundAmount, root.totalLoyaltyPointsRefundAmount),
+            totalCancellationFee: Number(leg.totalCancellationFee ?? leg.totalPenaltyPoints ?? 0),
+            totalSupplierBookingAmount: Number(leg.totalSupplierBookingAmount || 0),
+            originalAmount: Number(root.originalAmount || 0),
+            // Leg-scoped breakdown wins when the backend sends one; a single-leg
+            // booking may only carry it at the root instead.
+            refundBreakdown: leg.refundBreakdown ?? root.refundBreakdown,
+            legInfo: legType === 'onward' ? { onward: leg } : { return: leg },
+        };
+    }
+    startHints() {
+        let i = 0;
+        this.cancelHint.set(this.CANCEL_HINTS[0]);
+        this.hintTimer = setInterval(() => {
+            if (i < this.CANCEL_HINTS.length - 1) {
+                i++;
+                this.cancelHint.set(this.CANCEL_HINTS[i]);
+            }
+            else {
+                clearInterval(this.hintTimer);
+                this.hintTimer = null;
+            }
+        }, 1800);
+    }
+    stopHints() {
+        if (this.hintTimer) {
+            clearInterval(this.hintTimer);
+            this.hintTimer = null;
+        }
+        this.cancelHint.set('');
+    }
+    fmt(value, currency) {
+        const cur = currency ?? this.refundData()?.currency ?? 'SAR';
+        return `${this.fmtNum(value)} ${cur}`;
+    }
+    // Plain formatted number without a currency suffix (used by the calc divider / formula box).
+    fmtNum(value) {
+        return Number(value || 0).toLocaleString('en-SA', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+    }
+    fmtNeg(value, currency) {
+        const n = Number(value || 0);
+        const str = this.fmt(n, currency);
+        return n > 0 ? `− ${str}` : str;
+    }
+    fmtNegResult(value) {
+        const n = Number(value || 0);
+        const str = this.fmtResult(n);
+        return n > 0 ? `− ${str}` : str;
+    }
+    // Entry point from the details screen: always goes to the refund-method
+    // step. For credit-shell refunds that step shows a single read-only credit
+    // notice instead of a picker, since the refund can only go to the shell —
+    // but the agent still sees it before confirming, same as the standard flow.
+    requestCancel() {
+        // NIL refund: nothing to refund at all — skip the refund-method popup
+        // and cancel directly.
+        if (this.isNilRefund()) {
+            this.confirm();
+        }
+        else {
+            this.confirming.set(true);
+        }
+    }
+    confirm() {
+        const sel = this.selectedLeg();
+        // Build legInfo array: omit when cancelling both (backend treats absence as both)
+        const legInfo = sel === 'onward' ? ['onward'] :
+            sel === 'return' ? ['return'] :
+                undefined; // both legs — omit the field
+        const source = this.selectedSource() || undefined;
+        const preferredRefundMethod = this.preferredRefundMethod();
+        const splitAmounts = preferredRefundMethod === 'split'
+            ? {
+                walletRefundAmount: Number(this.adjustedData()?.walletRefundAmount ?? 0),
+                totalCardRefundAmount: Number(this.adjustedData()?.totalCardRefundAmount ?? 0),
+            }
+            : undefined;
+        this.confirming.set(false);
+        this.stopHints();
+        this.cancelling.set(true);
+        this.bookingService.confirmCancel(this.bookingId(), this.product(), legInfo, source, preferredRefundMethod, splitAmounts).subscribe({
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            next: (raw) => {
+                this.stopHints();
+                this.cancelling.set(false);
+                this.cancelResult.set(raw?.data ?? raw);
+                this.confirmed.emit(sel);
+            },
+            error: () => {
+                this.stopHints();
+                this.cancelling.set(false);
+                this.toast.error('Cancellation failed. Please try again.');
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdCancelDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdCancelDialogComponent, isStandalone: true, selector: "app-sbd-cancel-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, bookingId: { classPropertyName: "bookingId", publicName: "bookingId", isSignal: true, isRequired: false, transformFunction: null }, product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, pnrInfo: { classPropertyName: "pnrInfo", publicName: "pnrInfo", isSignal: true, isRequired: false, transformFunction: null }, bookingInfo: { classPropertyName: "bookingInfo", publicName: "bookingInfo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", confirmed: "confirmed" }, 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-cancel-dialog-wrapper\">\n\n  <div class=\"sbd-cancel\">\n\n    <!-- Loading refund details \u2014 shows cycling hints -->\n    @if (loading()) {\n      <div class=\"sbd-cancel__are-you-sure\">\n        <button type=\"button\" class=\"sbd-cancel__close-btn sbd-cancel__close-btn--floating\" (click)=\"closed.emit()\" aria-label=\"Close\">\n          <i class=\"pi pi-times\"></i>\n        </button>\n        <div class=\"sbd-cancel__ays-icon\">\n          <i class=\"pi pi-spin pi-spinner\"></i>\n        </div>\n        @for (h of [cancelHint()]; track h) {\n          <div class=\"sbd-cancel__ays-hint\">{{ h }}</div>\n        }\n        <div class=\"sbd-cancel__ays-dots\">\n          <span></span><span></span><span></span>\n        </div>\n      </div>\n    }\n\n    <!-- Select leg \u2014 shown once the refund preview has fully loaded, before the\n         refund breakdown, for round-trip bookings the backend hasn't already\n         restricted to a single leg. Same card design as almatar-b2c's\n         select-leg screen (checkbox overlay, refundable badge, disclaimer). -->\n    @else if (step() === 'select-leg') {\n      <div class=\"sbd-cancel__method-header\">\n        <button type=\"button\" class=\"sbd-cancel__method-close\" (click)=\"closed.emit()\" aria-label=\"Close\">\n          <i class=\"pi pi-times\"></i>\n        </button>\n        <div class=\"sbd-cancel__method-header-text\">\n          <h3 class=\"sbd-cancel__method-title\">Select Leg to Cancel</h3>\n          <span class=\"sbd-cancel__method-sub\">Booking ID #{{ bookingId() }}</span>\n        </div>\n      </div>\n\n      <div class=\"sbd-cancel__select-leg-body\">\n        @if (forcedLegType(); as forced) {\n          <div class=\"sbd-cancel__single-leg-note\">\n            <i class=\"pi pi-info-circle\"></i>\n            <span>This airline doesn't allow cancelling a single flight \u2014 {{ itineraryLeg(forced)?.from }} to {{ itineraryLeg(forced)?.to }} will be included automatically.</span>\n          </div>\n        }\n        @if (allLegsNonRefundable()) {\n          <div class=\"sbd-cancel__all-non-refundable-note\">\n            <i class=\"pi pi-exclamation-triangle\"></i>\n            <span>Sorry, we're unable to provide a refund for this booking, as both flights are non-refundable based on airline rules.</span>\n          </div>\n        }\n        <!-- Onward -->\n        <div class=\"sbd-cancel__leg-select-card\"\n          [ngClass]=\"{\n            'sbd-cancel__leg-select-card--selected': onwardChecked() && onwardRefundable(),\n            'sbd-cancel__leg-select-card--disabled': !onwardRefundable(),\n            'sbd-cancel__leg-select-card--frozen': forcedLegType() === 'onward'\n          }\">\n          @if (forcedLegType() !== 'onward') {\n            <label class=\"sbd-cancel__leg-select-checkbox\">\n              <input type=\"checkbox\" [checked]=\"onwardChecked()\" [disabled]=\"!onwardRefundable()\"\n                (change)=\"toggleLeg('onward')\" />\n              <span class=\"sbd-cancel__leg-select-icon\"><i class=\"pi pi-check\"></i></span>\n            </label>\n          } @else {\n            <i class=\"pi pi-lock sbd-cancel__leg-select-lock\"></i>\n          }\n          <div class=\"sbd-cancel__leg-select-content\">\n            @if (itineraryLeg('onward'); as leg) {\n              <div class=\"sbd-cancel__leg-select-top\">\n                <div>\n                  <span class=\"sbd-cancel__leg-select-name\">{{ leg.from }} to {{ leg.to }}</span>\n                  <div class=\"sbd-cancel__leg-select-date\">{{ fmtShortDate(leg.depTime) }}</div>\n                </div>\n                <span class=\"sbd-cancel__badge sbd-cancel__badge--outline\"\n                  [ngClass]=\"onwardRefundable() && forcedLegType() !== 'onward' ? 'sbd-cancel__badge--green' : 'sbd-cancel__badge--muted'\">\n                  {{ onwardRefundable() ? 'Refundable' : 'Non-Refundable' }}\n                </span>\n              </div>\n              <div class=\"sbd-cancel__leg-select-times\">\n                <span class=\"sbd-cancel__leg-select-time\">{{ fmtTime(leg.depTime) }}</span>\n                <span class=\"sbd-cancel__leg-select-line\">\n                  <span class=\"sbd-cancel__leg-select-line-stops\">{{ leg.stops.length > 0 ? (leg.stops.length + ' stop' + (leg.stops.length > 1 ? 's' : '')) : 'Direct' }}</span>\n                  @if (fmtMins(leg.totalMinutes)) { <span class=\"sbd-cancel__leg-select-line-dur\">{{ fmtMins(leg.totalMinutes) }}</span> }\n                  <i class=\"pi pi-arrow-right sbd-cancel__leg-select-line-arrow\"></i>\n                </span>\n                <span class=\"sbd-cancel__leg-select-time\">{{ fmtTime(leg.arrTime) }}</span>\n              </div>\n              @if (leg.airlineName || leg.cabin) {\n                <span class=\"sbd-cancel__leg-select-airline\">\n                  {{ leg.airlineName }}{{ leg.airlineName && leg.cabin ? ' \u00B7 ' : '' }}{{ leg.cabin }}\n                </span>\n              }\n              <div class=\"sbd-cancel__leg-select-footer\">\n                @if (leg.operatedBy.length) {\n                  <span class=\"sbd-cancel__leg-select-operated-by\">Operated by {{ leg.operatedBy.join(', ') }}</span>\n                }\n                <!-- <i class=\"pi pi-chevron-down sbd-cancel__leg-select-chevron\"></i> -->\n              </div>\n            } @else {\n              <div class=\"sbd-cancel__leg-select-top\">\n                <span class=\"sbd-cancel__leg-select-name\">Onward</span>\n                <span class=\"sbd-cancel__badge sbd-cancel__badge--outline\"\n                  [ngClass]=\"onwardRefundable() && forcedLegType() !== 'onward' ? 'sbd-cancel__badge--green' : 'sbd-cancel__badge--muted'\">\n                  {{ onwardRefundable() ? 'Refundable' : 'Non-Refundable' }}\n                </span>\n              </div>\n            }\n            @if (!onwardRefundable()) {\n              <div class=\"sbd-cancel__leg-select-notice\">\n                <i class=\"pi pi-info-circle\"></i>\n                <span>This flight type doesn't allow refunds on cancellation, based on the airline's fare rules.</span>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Return -->\n        <div class=\"sbd-cancel__leg-select-card\"\n          [ngClass]=\"{\n            'sbd-cancel__leg-select-card--selected': returnChecked() && returnRefundable(),\n            'sbd-cancel__leg-select-card--disabled': !returnRefundable(),\n            'sbd-cancel__leg-select-card--frozen': forcedLegType() === 'return'\n          }\">\n          @if (forcedLegType() !== 'return') {\n            <label class=\"sbd-cancel__leg-select-checkbox\">\n              <input type=\"checkbox\" [checked]=\"returnChecked()\" [disabled]=\"!returnRefundable()\"\n                (change)=\"toggleLeg('return')\" />\n              <span class=\"sbd-cancel__leg-select-icon\"><i class=\"pi pi-check\"></i></span>\n            </label>\n          } @else {\n            <i class=\"pi pi-lock sbd-cancel__leg-select-lock\"></i>\n          }\n          <div class=\"sbd-cancel__leg-select-content\">\n            @if (itineraryLeg('return'); as leg) {\n              <div class=\"sbd-cancel__leg-select-top\">\n                <div>\n                  <span class=\"sbd-cancel__leg-select-name\">{{ leg.from }} to {{ leg.to }}</span>\n                  <div class=\"sbd-cancel__leg-select-date\">{{ fmtShortDate(leg.depTime) }}</div>\n                </div>\n                <span class=\"sbd-cancel__badge sbd-cancel__badge--outline\"\n                  [ngClass]=\"returnRefundable() && forcedLegType() !== 'return' ? 'sbd-cancel__badge--green' : 'sbd-cancel__badge--muted'\">\n                  {{ returnRefundable() ? 'Refundable' : 'Non-Refundable' }}\n                </span>\n              </div>\n              <div class=\"sbd-cancel__leg-select-times\">\n                <span class=\"sbd-cancel__leg-select-time\">{{ fmtTime(leg.depTime) }}</span>\n                <span class=\"sbd-cancel__leg-select-line\">\n                  <span class=\"sbd-cancel__leg-select-line-stops\">{{ leg.stops.length > 0 ? (leg.stops.length + ' stop' + (leg.stops.length > 1 ? 's' : '')) : 'Direct' }}</span>\n                  @if (fmtMins(leg.totalMinutes)) { <span class=\"sbd-cancel__leg-select-line-dur\">{{ fmtMins(leg.totalMinutes) }}</span> }\n                  <i class=\"pi pi-arrow-right sbd-cancel__leg-select-line-arrow\"></i>\n                </span>\n                <span class=\"sbd-cancel__leg-select-time\">{{ fmtTime(leg.arrTime) }}</span>\n              </div>\n              @if (leg.airlineName || leg.cabin) {\n                <span class=\"sbd-cancel__leg-select-airline\">\n                  {{ leg.airlineName }}{{ leg.airlineName && leg.cabin ? ' \u00B7 ' : '' }}{{ leg.cabin }}\n                </span>\n              }\n              <div class=\"sbd-cancel__leg-select-footer\">\n                @if (leg.operatedBy.length) {\n                  <span class=\"sbd-cancel__leg-select-operated-by\">Operated by {{ leg.operatedBy.join(', ') }}</span>\n                }\n                <!-- <i class=\"pi pi-chevron-down sbd-cancel__leg-select-chevron\"></i> -->\n              </div>\n            } @else {\n              <div class=\"sbd-cancel__leg-select-top\">\n                <span class=\"sbd-cancel__leg-select-name\">Return</span>\n                <span class=\"sbd-cancel__badge sbd-cancel__badge--outline\"\n                  [ngClass]=\"returnRefundable() && forcedLegType() !== 'return' ? 'sbd-cancel__badge--green' : 'sbd-cancel__badge--muted'\">\n                  {{ returnRefundable() ? 'Refundable' : 'Non-Refundable' }}\n                </span>\n              </div>\n            }\n            @if (!returnRefundable()) {\n              <div class=\"sbd-cancel__leg-select-notice\">\n                <i class=\"pi pi-info-circle\"></i>\n                <span>This flight type doesn't allow refunds on cancellation, based on the airline's fare rules.</span>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n\n      @if (!allLegsNonRefundable() && !onwardChecked() && !returnChecked()) {\n        <div class=\"sbd-cancel__leg-select-hint\">Select at least one flight to continue</div>\n      }\n\n      <div class=\"sbd-cancel__footer\">\n        <button pButton\n          styleClass=\"sbd-cancel__btn-primary\"\n          label=\"Continue\"\n          [disabled]=\"allLegsNonRefundable() || (!onwardChecked() && !returnChecked())\"\n          (click)=\"step.set('details')\"></button>\n      </div>\n    }\n\n    <!-- Refund method \u2014 replaces the old are-you-sure + radio picker.\n         Stays mounted (dimmed) behind the result overlay once confirmed. -->\n    @else if (confirming() || cancelResult()) {\n      <div class=\"sbd-cancel__method-header\">\n        <button type=\"button\" class=\"sbd-cancel__method-close\" (click)=\"confirming.set(false)\" aria-label=\"Close\">\n          <i class=\"pi pi-times\"></i>\n        </button>\n        <div class=\"sbd-cancel__method-header-text\">\n          <h3 class=\"sbd-cancel__method-title\">Refund Method</h3>\n          <span class=\"sbd-cancel__method-sub\">Booking ID #{{ bookingId() }}</span>\n        </div>\n      </div>\n\n      <div class=\"sbd-cancel__method-body\">\n        <div class=\"sbd-cancel__method-amount\">\n          <span>You will get back</span>\n          <strong>{{ fmt(adjustedData()?.totalRefundAmount) }}</strong>\n        </div>\n\n        @if (isCreditShell()) {\n        <!-- Credit-shell refunds have exactly one destination \u2014 the airline\n             credit shell \u2014 so show it as a read-only card, not a picker. -->\n        <div class=\"sbd-cancel__method-option sbd-cancel__method-option--active\">\n          <span class=\"sbd-cancel__method-icon\"><i class=\"pi pi-wallet\"></i></span>\n          <span class=\"sbd-cancel__method-body-text\">\n            <span class=\"sbd-cancel__method-name\">{{ creditShellSupplierName() }} website credit</span>\n            <span class=\"sbd-cancel__method-desc\">Your refund will be issued instantly by {{ creditShellSupplierName() }}.</span>\n            <span class=\"sbd-cancel__method-badge sbd-cancel__method-badge--instant\">\n              <svg width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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        </div>\n\n        <div class=\"sbd-cancel__notice sbd-cancel__notice--credit\">\n          <i class=\"pi pi-info-circle\"></i>\n          <span>\n            Your refund will be issued as airline credit under the same PNR.\n            It can be used only for future booking on {{ creditShellSupplierName() }} website.\n          </span>\n        </div>\n\n        <!-- Refundable ancillaries (baggage, seats, \u2026) can independently be\n             flagged credit-shell or not \u2014 each renders as its own card,\n             matching either the credit-shell style above or the normal\n             wallet style, both with the same nested note when credit-shell. -->\n        @for (item of creditShellAncillaryItems(); track item.name) {\n          <div class=\"sbd-cancel__method-option sbd-cancel__method-option--active\">\n            <span class=\"sbd-cancel__method-icon\"><i class=\"pi pi-wallet\"></i></span>\n            <span class=\"sbd-cancel__method-body-text\">\n              <span class=\"sbd-cancel__method-name\">\n                {{ item.isCreditShell ? (creditShellSupplierName() + ' website credit') : 'Almatar Wallet' }}\n                \u2014 {{ item.name }}\n              </span>\n              <span class=\"sbd-cancel__method-desc\">\n                @if (item.isCreditShell) {\n                  Your refund will be issued instantly by {{ creditShellSupplierName() }}.\n                } @else {\n                  Usable for future bookings\n                }\n              </span>\n              <span class=\"sbd-cancel__method-badge sbd-cancel__method-badge--instant\">\n                <svg width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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              @if (item.isCreditShell) {\n                <span class=\"sbd-cancel__notice sbd-cancel__notice--info\">\n                  <i class=\"pi pi-info-circle\"></i>\n                  <span>Your refund will be issued as airline credit under the same PNR. It can be used only for future booking on {{ creditShellSupplierName() }} website.</span>\n                </span>\n              }\n            </span>\n            <strong>{{ fmt(item.amount) }}</strong>\n          </div>\n        }\n        } @else {\n\n        @if (isFullWalletRefundAllowed() || isWalletOnlyRefund() || isLoyaltyOnlyRefund()) {\n        <button type=\"button\" class=\"sbd-cancel__method-option\"\n          [ngClass]=\"{ 'sbd-cancel__method-option--active': preferredRefundMethod() === 'wallet' }\"\n          (click)=\"preferredRefundMethod.set('wallet')\">\n          <span class=\"sbd-cancel__method-icon\"><i class=\"pi pi-wallet\"></i></span>\n          <span class=\"sbd-cancel__method-body-text\">\n            <span class=\"sbd-cancel__method-name\">{{ walletCardLabel() }}</span>\n            <span class=\"sbd-cancel__method-desc\">Usable for future bookings</span>\n            <span class=\"sbd-cancel__method-badge sbd-cancel__method-badge--instant\">\n              <svg width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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 Refund\n            </span>\n            @if (hasLoyaltyPointsRefund() && !hasCashWalletRefund()) {\n              <span class=\"sbd-cancel__notice sbd-cancel__notice--info\">\n                <i class=\"pi pi-info-circle\"></i>\n                <span>External loyalty points are refunded to your almatar Wallet as permanent points and ready to use in your next booking.</span>\n              </span>\n            }\n          </span>\n          <span class=\"sbd-cancel__method-radio\"></span>\n        </button>\n        }\n\n        <!-- Original payment method \u2014 replaced with a \"Split Refund\" card whenever\n             part of the refund is forced to the wallet (e.g. loyalty points used),\n             since the total can't go 100% to the original payment method.\n             Name/desc/badge/icon become gateway-specific for installment (Tamara,\n             Tabby) and loyalty (Al Rajhi Mokafaa) payment methods. -->\n        @if (!hasSplitRefund() && !isWalletOnlyRefund() && !isLoyaltyOnlyRefund()) {\n        <button type=\"button\" class=\"sbd-cancel__method-option\"\n          [ngClass]=\"{ 'sbd-cancel__method-option--active': preferredRefundMethod() === 'originalPaymentMethod' }\"\n          (click)=\"preferredRefundMethod.set('originalPaymentMethod')\">\n          <span class=\"sbd-cancel__method-icon\">\n            <i class=\"pi\" [ngClass]=\"isSpecialGatewayMethod() ? 'pi-wallet' : 'pi-credit-card'\"></i>\n          </span>\n          <span class=\"sbd-cancel__method-body-text\">\n            <span class=\"sbd-cancel__method-name\">{{ originalPaymentLabel() }}</span>\n            <span class=\"sbd-cancel__method-desc\">\n              @if (isInstallmentMethod()) {\n                Returned to your {{ customerPaymentLabel() }} installment plan\n              } @else if (isLoyaltyMethod()) {\n                Refunded to your {{ customerPaymentLabel() }} account\n              } @else {\n                Returned to your original payment method\n              }\n            </span>\n            <span class=\"sbd-cancel__method-badge\" [ngClass]=\"isLoyaltyMethod() ? 'sbd-cancel__method-badge--loyalty' : 'sbd-cancel__method-badge--days'\">\n              @if (!isLoyaltyMethod()) {\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"#0B54C2\" stroke-width=\"1.2\" />\n                  <path d=\"M6 5.5v3M6 3.9v.01\" stroke=\"#0B54C2\" stroke-width=\"1.2\" stroke-linecap=\"round\" />\n                </svg>\n              }\n              {{ cardBadgeText() }}\n            </span>\n          </span>\n          <span class=\"sbd-cancel__option-end\">\n            @if (isMadaMethod()) {\n              <span class=\"sbd-cancel__mada-logo\" aria-hidden=\"true\">\n                <ng-container *ngTemplateOutlet=\"madaLogo\"></ng-container>\n              </span>\n            }\n            <span class=\"sbd-cancel__method-radio\"></span>\n          </span>\n        </button>\n        }\n\n        <!-- Split Refund -->\n        @if (hasSplitRefund()) {\n        <button type=\"button\" class=\"sbd-cancel__method-option sbd-cancel__method-option--split\"\n          [ngClass]=\"{ 'sbd-cancel__method-option--active': preferredRefundMethod() === 'split' }\"\n          (click)=\"preferredRefundMethod.set('split')\">\n          <span class=\"sbd-cancel__method-icon\"><i class=\"pi pi-wallet\"></i></span>\n          <span class=\"sbd-cancel__method-body-text\">\n            <span class=\"sbd-cancel__method-name\">Split Refund</span>\n            <span class=\"sbd-cancel__method-desc\">Returned to your original payment method</span>\n          </span>\n          <strong class=\"sbd-cancel__method-split-total\">{{ fmt(adjustedData()?.totalRefundAmount) }}</strong>\n          <span class=\"sbd-cancel__method-radio\"></span>\n\n          <span class=\"sbd-cancel__method-split-breakdown\">\n            @for (row of splitRefundRows(); track row.label) {\n              <span class=\"sbd-cancel__method-split-row\">\n                <span class=\"sbd-cancel__method-split-label\">\n                  {{ row.label }}\n                  @if (row.isMada) {\n                    <span class=\"sbd-cancel__mada-logo\" aria-hidden=\"true\">\n                      <ng-container *ngTemplateOutlet=\"madaLogo\"></ng-container>\n                    </span>\n                  }\n                </span>\n                <strong>{{ fmt(row.value) }}</strong>\n              </span>\n              <span class=\"sbd-cancel__method-badge\"\n                [ngClass]=\"row.instant ? 'sbd-cancel__method-badge--instant' : (isLoyaltyMethod() ? 'sbd-cancel__method-badge--loyalty' : 'sbd-cancel__method-badge--days')\">\n                {{ row.badgeText }}\n              </span>\n              @if (row.isLoyalty) {\n                <span class=\"sbd-cancel__notice sbd-cancel__notice--info\">\n                  <i class=\"pi pi-info-circle\"></i>\n                  <span>External loyalty points are refunded to your almatar Wallet as permanent points and ready to use in your next booking.</span>\n                </span>\n              }\n            }\n          </span>\n        </button>\n        }\n        }\n      </div>\n\n      <div class=\"sbd-cancel__footer\">\n        <button pButton\n          styleClass=\"sbd-cancel__btn-danger-pill\"\n          [label]=\"cancelling() ? 'Cancelling...' : 'Confirm Cancellation'\"\n          [disabled]=\"cancelling()\" (click)=\"confirm()\"></button>\n      </div>\n    }\n\n    <!-- Main card -->\n    @else if (refundData() && step() === 'details') {\n      <!-- Card header -->\n      <div class=\"sbd-cancel__header sbd-cancel__header--stack\">\n        <div class=\"sbd-cancel__header-titles\">\n          <span class=\"sbd-cancel__header-title\">Cancel Booking Request</span>\n          <span class=\"sbd-cancel__header-sub\">#{{ refundData()?.bookingId ?? bookingId() }}</span>\n        </div>\n        <button type=\"button\" class=\"sbd-cancel__close-btn\" (click)=\"closed.emit()\" aria-label=\"Close\">\n          <i class=\"pi pi-times\"></i>\n        </button>\n      </div>\n\n      <div class=\"sbd-cancel__body\">\n\n        <!-- Non-refundable -->\n        @if (!refundData()?.isRefundable) {\n          <div class=\"sbd-cancel__notice sbd-cancel__notice--warning\">\n            <i class=\"pi pi-exclamation-triangle\"></i>\n            <div>\n              <strong>This booking is not eligible for a refund.</strong>\n              @if (refundData()?.cause) {\n                <p>{{ refundData()?.cause }}</p>\n              } @else {\n                <p>Please escalate to the relevant team for manual handling.</p>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Refundable flow -->\n        @else {\n\n          <!-- Top summary: paid / get back -->\n          <div class=\"sbd-cancel__summary\">\n            <div class=\"sbd-cancel__summary-row\"\n              [ngClass]=\"{ 'sbd-cancel__summary-row--toggle': hasPaidBreakdown() && !!adjustedData()?.totalWalletAmount }\"\n              (click)=\"hasPaidBreakdown() && !!adjustedData()?.totalWalletAmount && togglePaidSummary()\">\n              <span class=\"sbd-cancel__summary-label\"><i class=\"pi pi-wallet\"></i> Total paid</span>\n              <span class=\"sbd-cancel__summary-value\">\n                <strong>{{ fmt(adjustedData()?.originalAmount) }}</strong>\n                @if (hasPaidBreakdown() && !!adjustedData()?.totalWalletAmount) {\n                  <button type=\"button\" class=\"sbd-cancel__leg-chevron\"\n                    [ngClass]=\"{ 'sbd-cancel__leg-chevron--collapsed': !paidSummaryExpanded() }\"\n                    aria-label=\"Toggle paid breakdown\">\n                    <i class=\"pi pi-chevron-up\"></i>\n                  </button>\n                }\n              </span>\n            </div>\n\n            @if (hasPaidBreakdown() && paidSummaryExpanded() && !!adjustedData()?.totalWalletAmount) {\n              <div class=\"sbd-cancel__summary-breakdown\">\n                @for (row of paidBreakdownRows(); track row.label) {\n                  @if (row.label === 'Almatar Wallet') {\n                    <div class=\"sbd-cancel__summary-breakdown-row\">\n                      <span>{{ row.label }}</span>\n                      <span>{{ fmt(row.value) }}</span>\n                    </div>\n                  }\n                }\n              </div>\n            }\n\n            <div class=\"sbd-cancel__summary-row sbd-cancel__summary-row--refund\">\n              <span class=\"sbd-cancel__summary-label\"><i class=\"pi pi-dollar\"></i> You will get back</span>\n              <strong>{{ fmt(adjustedData()?.totalRefundAmount) }}</strong>\n            </div>\n          </div>\n\n          <!-- Golden Guarantee gift \u2014 overrides credit-shell messaging below -->\n          @if (hasGoldenGuaranteeGift()) {\n            <div class=\"sbd-cancel__notice sbd-cancel__notice--success\">\n              <i class=\"pi pi-shield\"></i>\n              <span>You're covered by Cancel for any reason service, you'll get 100% refund, minus any applicable fees. See the breakdown below.</span>\n            </div>\n          }\n\n          <!-- One-way (or a round-trip restricted to a single leg): single card -->\n          @if (!showRoundTripLegCards()) {\n            <!-- Source selector (multiple suppliers) -->\n            @if (availableSources().length > 1) {\n              <div class=\"sbd-cancel__source-selector\">\n                <span class=\"sbd-cancel__source-label\">Cancel via</span>\n                @for (src of availableSources(); track src) {\n                  <button class=\"sbd-cancel__source-chip\"\n                    [ngClass]=\"{\n                      'sbd-cancel__source-chip--active':    selectedSource() === src,\n                      'sbd-cancel__source-chip--no-refund': activeSourceBreakdown()?.[src]?.isRefundable === false\n                    }\"\n                    (click)=\"selectedSource.set(src)\">\n                    {{ src }}\n                    @if (activeSourceBreakdown()?.[src]?.isRefundable === false) {\n                      <i class=\"pi pi-ban\" style=\"font-size:10px; margin-left:4px;\"></i>\n                    }\n                  </button>\n                }\n              </div>\n              @if (sourceNonRefundableHint()) {\n                <div class=\"sbd-cancel__notice sbd-cancel__notice--warning\">\n                  <i class=\"pi pi-ban\"></i>\n                  <span>{{ sourceNonRefundableHint() }}</span>\n                </div>\n              }\n            }\n\n            <!-- Not refundable -->\n            @if (!currentData()?.isRefundable) {\n              <div class=\"sbd-cancel__notice sbd-cancel__notice--warning\">\n                <i class=\"pi pi-ban\"></i>\n                <div>\n                  <strong>This leg is not eligible for a refund.</strong>\n                  <p>Please escalate to the relevant team for manual handling.</p>\n                </div>\n              </div>\n            } @else {\n              <div class=\"sbd-cancel__section-title\">Refund Details</div>\n\n              <div class=\"sbd-cancel__refund-card\">\n                <span class=\"sbd-cancel__badge sbd-cancel__badge--outline sbd-cancel__badge--green\">Refundable</span>\n\n                @if (refundableBreakdownRows(adjustedData()).length) {\n                  @for (r of refundableBreakdownRows(adjustedData()); track r.label) {\n                    <div class=\"sbd-cancel__refund-card-row\">\n                      <span>{{ r.label }}</span>\n                      <strong>{{ fmt(r.value) }}</strong>\n                    </div>\n                  }\n                } @else {\n                  <div class=\"sbd-cancel__refund-card-row\">\n                    <span>Fare</span>\n                    <strong>{{ fmt(adjustedData()?.originalAmount) }}</strong>\n                  </div>\n                }\n\n                <!-- hide addon note new CR from CX -->\n                <!-- @if (hasRefundableAddonNote(adjustedData())) {\n                  <div class=\"sbd-cancel__notice sbd-cancel__notice--neutral\">\n                    <i class=\"pi pi-info-circle\"></i>\n                    <span>Your add-on service/s refund will be processed separately by our Customer Service team shortly.</span>\n                  </div>\n                } -->\n\n                <!-- Deductions -->\n                @if (deductions().length) {\n                  <div class=\"sbd-cancel__refund-card-divider\"></div>\n                  <span class=\"sbd-cancel__badge sbd-cancel__badge--outline sbd-cancel__badge--muted\">Not Refunded - Deductions</span>\n                  @for (d of deductions(); track d.label) {\n                    <div class=\"sbd-cancel__refund-card-line\">\n                      <span>\n                        {{ d.label }}\n                        @if (d.badge) { <span class=\"sbd-cancel__tag\">{{ d.badge }}</span> }\n                      </span>\n                      <span class=\"sbd-cancel__refund-card-line--neg\">{{ fmtNeg(d.value) }}</span>\n                    </div>\n                  }\n                }\n\n                <div class=\"sbd-cancel__refund-card-divider sbd-cancel__refund-card-divider--dashed\"></div>\n                <div class=\"sbd-cancel__refund-card-total\">\n                  <span>Total Refund</span>\n                  <strong>{{ fmt(adjustedData()?.totalRefundAmount) }}</strong>\n                </div>\n              </div>\n\n              <!-- Credit shell -->\n              @if (creditShellNote()) {\n                <div class=\"sbd-cancel__notice sbd-cancel__notice--credit\">\n                  <i class=\"pi pi-wallet\"></i>\n                  <span>\u2139\uFE0F {{ creditShellNote() }}</span>\n                </div>\n              }\n            }\n          }\n\n          <!-- Round trip: one collapsible card per leg (only when both legs are cancellable) -->\n          @if (showRoundTripLegCards()) {\n            <!-- Gift hint -->\n            @if (giftHint()) {\n              <div class=\"sbd-cancel__notice sbd-cancel__notice--tip\">\n                <i class=\"pi pi-info-circle\"></i>\n                <span>{{ giftHint() }}</span>\n              </div>\n            }\n\n            <!-- Mixed hint -->\n            @if (mixedHint()) {\n              <div class=\"sbd-cancel__notice sbd-cancel__notice--warning\">\n                <i class=\"pi pi-exclamation-triangle\"></i>\n                <span>{{ mixedHint() }}</span>\n              </div>\n            }\n\n            <!-- Source selector (multiple suppliers) -->\n            @if (availableSources().length > 1) {\n              <div class=\"sbd-cancel__source-selector\">\n                <span class=\"sbd-cancel__source-label\">Cancel via</span>\n                @for (src of availableSources(); track src) {\n                  <button class=\"sbd-cancel__source-chip\"\n                    [ngClass]=\"{\n                      'sbd-cancel__source-chip--active':    selectedSource() === src,\n                      'sbd-cancel__source-chip--no-refund': activeSourceBreakdown()?.[src]?.isRefundable === false\n                    }\"\n                    (click)=\"selectedSource.set(src)\">\n                    {{ src }}\n                    @if (activeSourceBreakdown()?.[src]?.isRefundable === false) {\n                      <i class=\"pi pi-ban\" style=\"font-size:10px; margin-left:4px;\"></i>\n                    }\n                  </button>\n                }\n              </div>\n              @if (sourceNonRefundableHint()) {\n                <div class=\"sbd-cancel__notice sbd-cancel__notice--warning\">\n                  <i class=\"pi pi-ban\"></i>\n                  <span>{{ sourceNonRefundableHint() }}</span>\n                </div>\n              }\n            }\n\n            <!-- Onward leg card -->\n            @if (onwardChecked()) {\n              <div class=\"sbd-cancel__leg-card\">\n                <div class=\"sbd-cancel__leg-card-header\" (click)=\"toggleLegExpanded('onward')\">\n                  <span class=\"sbd-cancel__leg-checkbox\">Onward</span>\n                  <button type=\"button\" class=\"sbd-cancel__leg-chevron\"\n                    [ngClass]=\"{ 'sbd-cancel__leg-chevron--collapsed': !onwardExpanded() }\"\n                    aria-label=\"Toggle\">\n                    <i class=\"pi pi-chevron-up\"></i>\n                  </button>\n                </div>\n\n                @if (onwardExpanded()) {\n                  <div class=\"sbd-cancel__leg-card-body\">\n                    <span class=\"sbd-cancel__badge sbd-cancel__badge--outline\"\n                      [ngClass]=\"legAdjustedData('onward')?.isRefundable ? 'sbd-cancel__badge--green' : 'sbd-cancel__badge--red'\">\n                      {{ legAdjustedData('onward')?.isRefundable ? 'Refundable' : 'Non-Refundable' }}\n                    </span>\n\n                    @if (legAdjustedData('onward')?.isRefundable) {\n                      @if (refundableBreakdownRows(legAdjustedData('onward')).length) {\n                        @for (r of refundableBreakdownRows(legAdjustedData('onward')); track r.label) {\n                          <div class=\"sbd-cancel__refund-card-row\">\n                            <span>{{ r.label }}</span>\n                            <strong>{{ fmt(r.value) }}</strong>\n                          </div>\n                        }\n                      } @else {\n                        <div class=\"sbd-cancel__refund-card-row\">\n                          <span>Fare</span>\n                          <strong>{{ fmt(legRefundPool('onward')) }}</strong>\n                        </div>\n                      }\n\n                      <!-- hide addon note new CR from CX -->\n                      <!-- @if (hasRefundableAddonNote(legAdjustedData('onward'))) {\n                        <div class=\"sbd-cancel__notice sbd-cancel__notice--neutral\">\n                          <i class=\"pi pi-info-circle\"></i>\n                          <span>Your add-on service/s refund will be processed separately by our Customer Service team shortly.</span>\n                        </div>\n                      } -->\n\n                      @if (legDeductions('onward').length && !isCreditShell()) {\n                        <div class=\"sbd-cancel__refund-card-divider\"></div>\n                        <span class=\"sbd-cancel__badge sbd-cancel__badge--outline sbd-cancel__badge--muted\">Not Refunded - Deductions</span>\n                        @for (d of legDeductions('onward'); track d.label) {\n                          <div class=\"sbd-cancel__refund-card-line\">\n                            <span>\n                              {{ d.label }}\n                              @if (d.badge) { <span class=\"sbd-cancel__tag\">{{ d.badge }}</span> }\n                            </span>\n                            <span class=\"sbd-cancel__refund-card-line--neg\">{{ fmtNeg(d.value) }}</span>\n                          </div>\n                        }\n                      }\n\n                      <div class=\"sbd-cancel__refund-card-divider sbd-cancel__refund-card-divider--dashed\"></div>\n                      <div class=\"sbd-cancel__refund-card-total\">\n                        <span>Departure Total Refund</span>\n                        <strong>{{ fmt(legAdjustedData('onward')?.totalRefundAmount) }}</strong>\n                      </div>\n\n                      @if (refundData()?.legInfo?.onward?.isCreditShell && !hasGoldenGuaranteeGift()) {\n                        <div class=\"sbd-cancel__notice sbd-cancel__notice--credit\">\n                          <i class=\"pi pi-wallet\"></i>\n                          <span>\u2139\uFE0F The refund for the onward flight has been issued as an Airline Credit Shell.</span>\n                        </div>\n                      }\n                    } @else {\n                      <div class=\"sbd-cancel__notice sbd-cancel__notice--warning\">\n                        <i class=\"pi pi-ban\"></i>\n                        <span>This leg is not eligible for a refund.</span>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n\n            <!-- Return leg card -->\n            @if (returnChecked()) {\n              <div class=\"sbd-cancel__leg-card\">\n                <div class=\"sbd-cancel__leg-card-header\" (click)=\"toggleLegExpanded('return')\">\n                  <span class=\"sbd-cancel__leg-checkbox\">Return</span>\n                  <button type=\"button\" class=\"sbd-cancel__leg-chevron\"\n                    [ngClass]=\"{ 'sbd-cancel__leg-chevron--collapsed': !returnExpanded() }\"\n                    aria-label=\"Toggle\">\n                    <i class=\"pi pi-chevron-up\"></i>\n                  </button>\n                </div>\n\n                @if (returnExpanded()) {\n                  <div class=\"sbd-cancel__leg-card-body\">\n                    <span class=\"sbd-cancel__badge sbd-cancel__badge--outline\"\n                      [ngClass]=\"legAdjustedData('return')?.isRefundable ? 'sbd-cancel__badge--green' : 'sbd-cancel__badge--red'\">\n                      {{ legAdjustedData('return')?.isRefundable ? 'Refundable' : 'Non-Refundable' }}\n                    </span>\n\n                    @if (legAdjustedData('return')?.isRefundable) {\n                      @if (refundableBreakdownRows(legAdjustedData('return')).length) {\n                        @for (r of refundableBreakdownRows(legAdjustedData('return')); track r.label) {\n                          <div class=\"sbd-cancel__refund-card-row\">\n                            <span>{{ r.label }}</span>\n                            <strong>{{ fmt(r.value) }}</strong>\n                          </div>\n                        }\n                      } @else {\n                        <div class=\"sbd-cancel__refund-card-row\">\n                          <span>Fare</span>\n                          <strong>{{ fmt(legRefundPool('return')) }}</strong>\n                        </div>\n                      }\n\n                      <!-- hide addon note new CR from CX -->\n                      <!-- @if (hasRefundableAddonNote(legAdjustedData('return'))) {\n                        <div class=\"sbd-cancel__notice sbd-cancel__notice--neutral\">\n                          <i class=\"pi pi-info-circle\"></i>\n                          <span>Your add-on service/s refund will be processed separately by our Customer Service team shortly.</span>\n                        </div>\n                      } -->\n\n                      @if (legDeductions('return').length && !isCreditShell()) {\n                        <div class=\"sbd-cancel__refund-card-divider\"></div>\n                        <span class=\"sbd-cancel__badge sbd-cancel__badge--outline sbd-cancel__badge--muted\">Not Refunded - Deductions</span>\n                        @for (d of legDeductions('return'); track d.label) {\n                          <div class=\"sbd-cancel__refund-card-line\">\n                            <span>\n                              {{ d.label }}\n                              @if (d.badge) { <span class=\"sbd-cancel__tag\">{{ d.badge }}</span> }\n                            </span>\n                            <span class=\"sbd-cancel__refund-card-line--neg\">{{ fmtNeg(d.value) }}</span>\n                          </div>\n                        }\n                      }\n\n                      <div class=\"sbd-cancel__refund-card-divider sbd-cancel__refund-card-divider--dashed\"></div>\n                      <div class=\"sbd-cancel__refund-card-total\">\n                        <span>Return Total Refund</span>\n                        <strong>{{ fmt(legAdjustedData('return')?.totalRefundAmount) }}</strong>\n                      </div>\n\n                      @if (refundData()?.legInfo?.return?.isCreditShell && !hasGoldenGuaranteeGift()) {\n                        <div class=\"sbd-cancel__notice sbd-cancel__notice--credit\">\n                          <i class=\"pi pi-wallet\"></i>\n                          <span>\u2139\uFE0F The refund for the return flight has been issued as an Airline Credit Shell.</span>\n                        </div>\n                      }\n                    } @else {\n                      <div class=\"sbd-cancel__notice sbd-cancel__notice--warning\">\n                        <i class=\"pi pi-ban\"></i>\n                        <span>This leg is not eligible for a refund.</span>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          }\n\n          <!-- Instant refund notice -->\n          @if (currentData()?.isRefundable) {\n            <div class=\"sbd-cancel__notice sbd-cancel__notice--shield\">\n              <i class=\"pi pi-shield\"></i>\n              <span>\n                @if (isNilRefund()) {\n                  We're sorry, as per airline policy, no refund applies because the cancellation fees equal or exceed your refundable fare amount.\n                } @else {\n                  @if (isWalletOnlyRefund() || isLoyaltyOnlyRefund()) {\n                    Your refund is instant to the customer's almatar Wallet.\n                  } @else {\n                    Your refund is instant from our side, your bank may take up to 15 business days to reflect it.\n                  }\n                }\n                @if (!isNilRefund() && !isCreditShell()) {\n                  <strong>You can select refund option in the next step</strong>\n                }\n              </span>\n            </div>\n          }\n        }\n\n      </div>\n\n      <!-- Footer -->\n      <div class=\"sbd-cancel__footer\">\n        @if (refundData()?.isRefundable) {\n          <button pButton label=\"Keep booking\" styleClass=\"p-button-outlined p-button-secondary sbd-cancel__btn-keep\" (click)=\"closed.emit()\"></button>\n          @if (currentData()?.isRefundable) {\n            <button pButton\n              styleClass=\"sbd-cancel__btn-primary\"\n              [label]=\"isCreditShell() ? 'Continue Cancellation' : 'Select refund option'\"\n              [disabled]=\"!canConfirm()\" (click)=\"requestCancel()\"></button>\n          }\n        } @else {\n          <button pButton label=\"Close\" styleClass=\"p-button-outlined p-button-secondary\" (click)=\"closed.emit()\"></button>\n        }\n      </div>\n    }\n\n    <!-- \u2500\u2500 Result overlay: floating modal over the dimmed refund-method screen (scoped to this dialog, not the whole viewport) \u2500\u2500 -->\n    @if (cancelResult()) {\n      <div class=\"sbd-cancel__result-overlay\">\n        <div class=\"sbd-cancel__result-backdrop\"></div>\n        <div class=\"sbd-cancel__result-modal\">\n          <div class=\"sbd-cancel__result-hero\">\n            <span class=\"sbd-cancel__result-icon sbd-cancel__result-icon--green\">\n              <i class=\"pi pi-check\"></i>\n            </span>\n            <h3 class=\"sbd-cancel__result-title\">{{ confirmIsNilRefund() ? 'Cancel Confirmed' : 'Refund Confirmed' }}</h3>\n          </div>\n\n          @for (r of confirmRefunds(); track r.label) {\n            <div class=\"sbd-cancel__result-row\">\n              <span class=\"sbd-cancel__method-icon\">\n                <i class=\"pi\" [ngClass]=\"isWalletDestinationRow(r) ? 'pi-wallet' : 'pi-credit-card'\"></i>\n              </span>\n              <span class=\"sbd-cancel__result-body-text\">\n                <span class=\"sbd-cancel__method-name\">{{ r.label }}</span>\n                @if (r.subRows?.length) {\n                  <span class=\"sbd-cancel__result-sub-rows\">\n                    @for (sub of r.subRows; track sub.label) {\n                      <span class=\"sbd-cancel__result-sub-row\">\n                        <span>{{ sub.label }}</span>\n                        <strong>{{ fmtResult(sub.value) }}</strong>\n                      </span>\n                    }\n                  </span>\n                }\n                <span class=\"sbd-cancel__method-badge\"\n                  [ngClass]=\"isWalletDestinationRow(r) ? 'sbd-cancel__method-badge--instant' : 'sbd-cancel__method-badge--days'\">\n                  {{ isWalletDestinationRow(r) ? 'Ready Now' : (r.key === 'totalCardRefundAmount' ? confirmCardBadgeText() : 'Up to 15 business days, bank policy') }}\n                </span>\n                @if (r.hasLoyaltyNote) {\n                  <span class=\"sbd-cancel__notice sbd-cancel__notice--info\">\n                    <i class=\"pi pi-info-circle\"></i>\n                    <span>External loyalty points are refunded to your almatar Wallet as permanent points and ready to use in your next booking.</span>\n                  </span>\n                }\n              </span>\n              <strong class=\"sbd-cancel__result-amount\">{{ fmtResult(r.value) }}</strong>\n            </div>\n          }\n\n          @if (confirmCreditShellNote()) {\n            <div class=\"sbd-cancel__notice sbd-cancel__notice--credit\">\n              <i class=\"pi pi-wallet\"></i>\n              <span>\u2139\uFE0F {{ confirmCreditShellNote() }}</span>\n            </div>\n          }\n\n          <button pButton styleClass=\"sbd-cancel__btn-primary sbd-cancel__result-done\" label=\"Close\" (click)=\"closed.emit()\"></button>\n        </div>\n      </div>\n    }\n\n  </div>\n\n</p-dialog>\n\n<ng-template #madaLogo>\n  <svg width=\"43\" height=\"15\" viewBox=\"0 0 43 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <g clip-path=\"url(#clip0_sbd_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_sbd_mada\">\n        <rect width=\"43\" height=\"15\" fill=\"white\" />\n      </clipPath>\n    </defs>\n  </svg>\n</ng-template>\n", styles: [":host ::ng-deep .sbd-cancel-dialog-wrapper{border-radius:16px;overflow:hidden;box-shadow:0 24px 60px #0f172a38}:host ::ng-deep .sbd-cancel-dialog-wrapper .p-dialog-content{padding:0;border-radius:16px;overflow-y:auto;overflow-x:hidden}.sbd-cancel{font-family:inherit;border-radius:16px;overflow:visible;position:relative}.sbd-cancel__loading{padding:24px}.sbd-cancel__loading-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.sbd-cancel__loading-rows{display:flex;flex-direction:column;gap:10px;margin-top:20px}.sbd-cancel__loading-row{display:flex;justify-content:space-between}.sbd-cancel__are-you-sure{padding:36px 24px 28px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;border-top:1px solid #e2e8f0}.sbd-cancel__ays-icon{width:56px;height:56px;border-radius:50%;background:#fff7ed;border:2px solid #fed7aa;display:flex;align-items:center;justify-content:center}.sbd-cancel__ays-icon .pi{font-size:24px;color:#f97316}.sbd-cancel__ays-icon--warn{background:#fef2f2;border-color:#fecaca}.sbd-cancel__ays-icon--warn .pi{color:#ef4444}.sbd-cancel__ays-hint{font-size:13px;color:#64748b;min-height:20px;animation:sbd-hint-fade .35s ease-out}.sbd-cancel__ays-dots{display:flex;gap:6px}.sbd-cancel__ays-dots span{width:7px;height:7px;border-radius:50%;background:#f97316;opacity:.3;animation:sbd-dot-pulse 1.2s ease-in-out infinite}.sbd-cancel__ays-dots span:nth-child(2){animation-delay:.2s}.sbd-cancel__ays-dots span:nth-child(3){animation-delay:.4s}@keyframes sbd-hint-fade{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes sbd-dot-pulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}.sbd-cancel__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.sbd-cancel__header-left{display:flex;align-items:center;gap:10px}.sbd-cancel__header-icon{font-size:18px;color:#475569}.sbd-cancel__header-title{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-cancel__header--stack{align-items:flex-start}.sbd-cancel__header-titles{display:flex;flex-direction:column;gap:2px}.sbd-cancel__header-sub{font-size:12.5px;font-weight:600;color:#94a3b8;font-variant-numeric:tabular-nums}.sbd-cancel__badge{font-size:11.5px;font-weight:700;border-radius:20px;padding:3px 12px;letter-spacing:.03em;width:max-content;text-transform:uppercase}.sbd-cancel__badge--green{background:#dcfce7;color:#166534}.sbd-cancel__badge--red{background:#fee2e2;color:#991b1b}.sbd-cancel__badge--orange{background:#fff7ed;color:#9a3412}.sbd-cancel__badge--outline{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;padding:4px 14px}.sbd-cancel__badge--outline.sbd-cancel__badge--green{color:#16a34a}.sbd-cancel__badge--outline.sbd-cancel__badge--red{color:#dc2626}.sbd-cancel__badge--muted{background:#f8fafc;color:#64748b;box-shadow:inset 0 0 0 1px #e2e8f0}.sbd-cancel__close-btn{width:30px;height:30px;border-radius:8px;border:none;background:transparent;color:#64748b;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s}.sbd-cancel__close-btn .pi{font-size:14px}.sbd-cancel__close-btn:hover{background:#e2e8f0;color:#1e2e4a}.sbd-cancel__close-btn--floating{position:absolute;top:12px;inset-inline-end:12px}.sbd-cancel__summary{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}.sbd-cancel__summary-row{display:flex;align-items:center;justify-content:space-between;font-size:13.5px}.sbd-cancel__summary-row strong{font-size:15px;font-weight:800;color:#1e2e4a;font-variant-numeric:tabular-nums}.sbd-cancel__summary-row--refund .sbd-cancel__summary-label,.sbd-cancel__summary-row--refund strong{color:#16a34a}.sbd-cancel__summary-row--toggle{cursor:pointer}.sbd-cancel__summary-label{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:#475569}.sbd-cancel__summary-label .pi{font-size:13px}.sbd-cancel__summary-value{display:flex;align-items:center;gap:4px}.sbd-cancel__summary-breakdown{display:flex;flex-direction:column;gap:6px;padding:2px 0 2px 22px}.sbd-cancel__summary-breakdown-row{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:#64748b}.sbd-cancel__summary-breakdown-row span:last-child{font-variant-numeric:tabular-nums;font-weight:600;color:#475569}.sbd-cancel__section-title{font-size:14px;font-weight:700;color:#1e2e4a}.sbd-cancel__refund-card{border:1px solid #e2e8f0;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:4px}.sbd-cancel__refund-card-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:14px}.sbd-cancel__refund-card-row span{color:#334155;font-weight:600}.sbd-cancel__refund-card-row strong{color:#1e2e4a;font-weight:700;font-variant-numeric:tabular-nums}.sbd-cancel__refund-card-divider{border-top:1px solid #e2e8f0;margin:10px 0}.sbd-cancel__refund-card-divider--dashed{border-top-style:dashed}.sbd-cancel__refund-card-line{display:flex;align-items:center;justify-content:space-between;padding:5px 0;font-size:13px}.sbd-cancel__refund-card-line span:first-child{color:#64748b;display:inline-flex;align-items:center}.sbd-cancel__refund-card-line--neg{color:#64748b;font-weight:600;font-variant-numeric:tabular-nums}.sbd-cancel__refund-card-total{display:flex;align-items:center;justify-content:space-between}.sbd-cancel__refund-card-total span{font-size:14.5px;font-weight:700;color:#1e2e4a}.sbd-cancel__refund-card-total strong{font-size:17px;font-weight:800;color:#1e2e4a;font-variant-numeric:tabular-nums}.sbd-cancel__btn-keep{flex:1 1 0}.sbd-cancel__btn-primary{flex:1 1 0;background:#6d4aff!important;border-color:#6d4aff!important;color:#fff!important}.sbd-cancel__btn-primary:hover:not(:disabled){background:#5c3ce6!important;border-color:#5c3ce6!important}.sbd-cancel__btn-primary:disabled{opacity:.5}.sbd-cancel__paid{display:flex;align-items:center;justify-content:space-between;margin:0 -20px;padding:14px 20px;border-radius:0;background:#f1f0fb;border-top:1px solid #e7e5f7;border-bottom:1px solid #e7e5f7}.sbd-cancel__paid span{font-size:13.5px;font-weight:600;color:#4b4670}.sbd-cancel__paid strong{font-size:18px;font-weight:800;color:#2b2747;font-variant-numeric:tabular-nums;letter-spacing:.01em}.sbd-cancel__group{display:flex;flex-direction:column}.sbd-cancel__group-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px}.sbd-cancel__group-label--deduct{color:#e05656}.sbd-cancel__group-label--refund{color:#16a34a}.sbd-cancel__line{display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-size:13.5px;border-bottom:1px dashed #e5e7eb}.sbd-cancel__line:last-child{border-bottom:none}.sbd-cancel__line-label{display:inline-flex;align-items:center;color:#334155}.sbd-cancel__line-val{font-weight:700;font-variant-numeric:tabular-nums}.sbd-cancel__line-val--neg{color:#dc2626}.sbd-cancel__line-val--pos{color:#16a34a}.sbd-cancel__tag{margin-left:8px;font-size:10px;font-weight:700;line-height:1;padding:3px 8px;border-radius:6px;background:#ede9fe;color:#6d28d9;letter-spacing:.02em}.sbd-cancel__total-deduct{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-radius:10px;background:#fdf2f2;border:1px solid #f6c9c9}.sbd-cancel__total-deduct span{font-size:14px;font-weight:700;color:#b3344a}.sbd-cancel__total-deduct strong{font-size:15px;font-weight:800;color:#dc2626;font-variant-numeric:tabular-nums}.sbd-cancel__calc{display:flex;align-items:center;gap:12px;margin:2px 0;color:#94a3b8;font-size:13px;font-variant-numeric:tabular-nums}.sbd-cancel__calc:before,.sbd-cancel__calc:after{content:\"\";flex:1;height:1px;background:#e5e7eb}.sbd-cancel__refund-total{display:flex;align-items:center;justify-content:space-between}.sbd-cancel__refund-total span{font-size:16px;font-weight:800;color:#1e2e4a}.sbd-cancel__refund-total strong{font-size:26px;font-weight:800;color:#16a34a;font-variant-numeric:tabular-nums;letter-spacing:.01em}.sbd-cancel__formula{text-align:center;padding:14px 16px;border-radius:10px;background:#1f2438;color:#f1f5f9;font-family:SFMono-Regular,ui-monospace,Menlo,Consolas,monospace;font-size:14px;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums}.sbd-cancel__discrepancy{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:8px;font-size:12.5px;line-height:1.45;background:#fffbeb;border:1px solid #fde68a;color:#92400e}.sbd-cancel__discrepancy i{flex-shrink:0;margin-top:1px;font-size:14px;color:#d97706}.sbd-cancel__body{padding:16px 20px;display:flex;flex-direction:column;gap:12px}.sbd-cancel__leg-card{width:100%;border-radius:12px;border:1px solid #e2e8f0;background:#fff;overflow:hidden}.sbd-cancel__leg-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;cursor:pointer}.sbd-cancel__leg-checkbox{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:#1e2e4a;cursor:pointer}.sbd-cancel__leg-checkbox input[type=checkbox]{width:17px;height:17px;accent-color:#6d4aff;cursor:pointer}.sbd-cancel__leg-chevron{flex-shrink:0;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:#64748b;cursor:pointer;transition:transform .15s}.sbd-cancel__leg-chevron i{font-size:13px}.sbd-cancel__leg-chevron--collapsed{transform:rotate(180deg)}.sbd-cancel__leg-card-body{display:flex;flex-direction:column;gap:4px;padding:0 16px 16px}.sbd-cancel__leg-card-body--excluded{opacity:.5}.sbd-cancel__notice{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:8px;font-size:12.5px}.sbd-cancel__notice i{flex-shrink:0;margin-top:1px;font-size:14px}.sbd-cancel__notice p{margin:2px 0 0;font-size:12px;opacity:.8}.sbd-cancel__notice strong{display:block;font-weight:700}.sbd-cancel__notice--warning{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412}.sbd-cancel__notice--warning i{color:#f97316}.sbd-cancel__notice--info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}.sbd-cancel__notice--info i{color:#3b82f6}.sbd-cancel__notice--neutral{background:#f7f7f8;border:1px solid #e5e7eb;color:#111827}.sbd-cancel__notice--neutral i{color:#111827}.sbd-cancel__notice--tip{background:#f0fdf4;border:1px solid #bbf7d0;color:#14532d}.sbd-cancel__notice--tip i{color:#22c55e}.sbd-cancel__notice--success{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803c}.sbd-cancel__notice--success i{color:#16a34a}.sbd-cancel__notice--credit{background:#faf5ff;border:1px solid #e9d5ff;color:#5b21b6;font-size:12px}.sbd-cancel__notice--credit i{color:#a855f7}.sbd-cancel__notice--shield{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}.sbd-cancel__notice--shield strong{display:inline;font-weight:700}.sbd-cancel__notice--shield i{color:#3b82f6}.sbd-cancel__source-selector{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 0}.sbd-cancel__source-label{font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;margin-right:2px}.sbd-cancel__source-chip{font-size:12px;font-weight:600;padding:4px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#f8fafc;color:#475569;cursor:pointer;transition:border-color .15s,color .15s,background .15s;display:inline-flex;align-items:center}.sbd-cancel__source-chip:hover{border-color:#94a3b8;color:#475569;background:#f1f5f9}.sbd-cancel__source-chip--active{background:#eff6ff;color:#1d4ed8;border-color:#93c5fd}.sbd-cancel__source-chip--active:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}.sbd-cancel__source-chip--no-refund{border-color:#fecaca;color:#b91c1c;background:#fff5f5}.sbd-cancel__source-chip--no-refund:hover{border-color:#fca5a5;background:#fee2e2;color:#b91c1c}.sbd-cancel__source-chip--active.sbd-cancel__source-chip--no-refund{background:#fee2e2;color:#991b1b;border-color:#fca5a5}.sbd-cancel__source-chip--active.sbd-cancel__source-chip--no-refund:hover{background:#fecaca}.sbd-cancel__footer{display:flex;justify-content:flex-end;gap:10px;align-items:stretch;padding:14px 20px;border-top:1px solid #e2e8f0;background:#fff}.sbd-cancel__btn-danger-pill{flex:1 1 0;border-radius:999px!important;background:#fee2e2!important;border-color:#fee2e2!important;color:#dc2626!important;font-weight:700!important}.sbd-cancel__btn-danger-pill:hover:not(:disabled){background:#fecaca!important;border-color:#fecaca!important}.sbd-cancel__btn-danger-pill:disabled{opacity:.5}.sbd-cancel__method-header{display:flex;align-items:flex-start;gap:12px;padding:20px 20px 0}.sbd-cancel__method-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-cancel__method-close .pi{font-size:13px}.sbd-cancel__method-close:hover{background:#e2e8f0}.sbd-cancel__method-header-text{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;margin-right:32px}.sbd-cancel__method-title{font-size:19px;font-weight:800;color:#1e2e4a;margin:0}.sbd-cancel__method-sub{font-size:12.5px;color:#94a3b8}.sbd-cancel__method-body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:14px}.sbd-cancel__select-leg-body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:12px}.sbd-cancel__leg-select-card{position:relative;border:1.5px solid #e2e8f0;border-radius:16px;padding:16px 16px 16px 48px;transition:border-color .15s}.sbd-cancel__leg-select-card--selected:not(.sbd-cancel__leg-select-card--frozen){border-color:#6d4aff}.sbd-cancel__leg-select-card--disabled{opacity:.7}.sbd-cancel__leg-select-card--frozen{opacity:.6;border-color:#e2e8f0}.sbd-cancel__leg-select-lock{position:absolute;top:16px;left:16px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#94a3b8}.sbd-cancel__single-leg-note{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;background:#eaf2ff;border:1px solid #b9d6ff;color:#1a5fd6;font-size:13px;line-height:1.5}.sbd-cancel__single-leg-note i{flex-shrink:0;margin-top:1px}.sbd-cancel__all-non-refundable-note{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;background:#fdf3e3;border:1px solid #f3d9a4;color:#8a5a1e;font-size:13px;line-height:1.5}.sbd-cancel__all-non-refundable-note i{flex-shrink:0;margin-top:1px;color:#b98a3e}.sbd-cancel__leg-select-checkbox{position:absolute;top:16px;left:16px;width:22px;height:22px;cursor:pointer}.sbd-cancel__leg-select-checkbox input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}.sbd-cancel__leg-select-checkbox input:disabled{cursor:not-allowed}.sbd-cancel__leg-select-icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;border:1.5px solid #cbd5e1;background:#fff;color:#fff;font-size:12px}input:checked+.sbd-cancel__leg-select-icon{background:#6d4aff;border-color:#6d4aff}input:disabled+.sbd-cancel__leg-select-icon{background:#f1f5f9;border-color:#e2e8f0}.sbd-cancel__leg-select-content{display:flex;flex-direction:column;gap:8px}.sbd-cancel__leg-select-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.sbd-cancel__leg-select-name{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-cancel__leg-select-date{font-size:13px;color:#64748b;margin-top:2px}.sbd-cancel__leg-select-times{display:flex;align-items:center;gap:8px}.sbd-cancel__leg-select-time{font-size:18px;font-weight:700;color:#1e2e4a;font-variant-numeric:tabular-nums}.sbd-cancel__leg-select-line{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 16px 0 8px}.sbd-cancel__leg-select-line:before{content:\"\";position:absolute;left:0;right:14px;top:50%;height:2px;background:#cbd5e1;z-index:1}.sbd-cancel__leg-select-line-stops{font-size:12px;color:#64748b}.sbd-cancel__leg-select-line-dur{font-size:11px;color:#94a3b8}.sbd-cancel__leg-select-line-arrow{position:absolute;right:4px;top:51%;transform:translateY(-50%);font-size:11px;color:#64748b}.sbd-cancel__leg-select-footer{display:flex;align-items:center;gap:8px}.sbd-cancel__leg-select-airline{font-size:12.5px;color:#64748b}.sbd-cancel__leg-select-operated-by{font-size:12px;color:#94a3b8}.sbd-cancel__leg-select-chevron{font-size:12px;color:#94a3b8;margin-inline-start:auto}.sbd-cancel__leg-select-hint{text-align:center;padding:8px 20px 0;font-size:13px;color:#94a3b8}.sbd-cancel__leg-select-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-cancel__leg-select-notice i{flex-shrink:0;margin-top:1px;color:#b98a3e}.sbd-cancel__method-amount{display:flex;align-items:center;justify-content:space-between}.sbd-cancel__method-amount span{font-size:14px;color:#1e2e4a}.sbd-cancel__method-amount strong{font-size:22px;font-weight:800;color:#1e2e4a;font-variant-numeric:tabular-nums}.sbd-cancel__method-option{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:16px;border-radius:16px;border:1.5px solid #e2e8f0;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s}.sbd-cancel__method-option--active{border-color:#6d4aff;box-shadow:0 0 0 1px #6d4aff}.sbd-cancel__method-option:disabled{opacity:.5;cursor:not-allowed}.sbd-cancel__method-icon{flex-shrink:0;width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;border:1px solid #e2e8f0;color:#1e2e4a}.sbd-cancel__method-icon .pi{font-size:16px}.sbd-cancel__method-body-text{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.sbd-cancel__method-name{font-size:16px;font-weight:700;color:#1e2e4a;display:inline-flex;align-items:center;gap:6px}.sbd-cancel__method-desc{font-size:13px;color:#64748b}.sbd-cancel__method-badge{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:4px 10px;border-radius:20px}.sbd-cancel__method-badge svg{flex-shrink:0}.sbd-cancel__method-badge--instant{background:#dcfce7;color:#166534}.sbd-cancel__method-badge--days,.sbd-cancel__method-badge--loyalty{background:#eff6ff;color:#1e40af}.sbd-cancel__option-end{flex-shrink:0;display:flex;align-items:center;gap:8px}.sbd-cancel__method-radio{flex-shrink:0;width:18px;height:18px;margin-top:2px;border-radius:50%;border:2px solid #7c3aed;position:relative}.sbd-cancel__method-option--active .sbd-cancel__method-radio{border-color:#6d4aff}.sbd-cancel__method-option--active .sbd-cancel__method-radio:after{content:\"\";position:absolute;inset:3px;border-radius:50%;background:#6d4aff}.sbd-cancel__method-option--split{flex-wrap:wrap}.sbd-cancel__method-split-total{flex-shrink:0;font-size:16px;font-weight:700;color:#1e2e4a;font-variant-numeric:tabular-nums}.sbd-cancel__method-split-breakdown{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:12px;padding-top:12px;border-top:1px solid #e2e8f0}.sbd-cancel__method-split-row{flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;font-size:14px;color:#1e2e4a}.sbd-cancel__method-split-row strong{font-weight:700;font-variant-numeric:tabular-nums}.sbd-cancel__method-split-label{color:#64748b;display:inline-flex;align-items:center;gap:6px}.sbd-cancel__mada-logo{display:inline-flex;align-items:center;flex-shrink:0}.sbd-cancel__mada-logo svg{display:block}.sbd-cancel__result-hero{display:flex;flex-direction:column;align-items:center;gap:18px;padding:28px 0 8px}.sbd-cancel__result-icon{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center}.sbd-cancel__result-icon .pi{font-size:30px;color:#fff}.sbd-cancel__result-icon--green{background:#4ade80}.sbd-cancel__result-icon--orange{background:#fb923c}.sbd-cancel__result-title{font-size:19px;font-weight:800;color:#1e2e4a;margin:0;text-align:center}.sbd-cancel__result-row{display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px 14px;border-radius:14px;background:#f8fafc}.sbd-cancel__result-body-text{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}.sbd-cancel__result-body-text .sbd-cancel__method-badge{text-transform:none;letter-spacing:normal;line-height:1.35;white-space:normal}.sbd-cancel__result-sub-rows{display:flex;flex-direction:column;gap:2px;width:100%}.sbd-cancel__result-sub-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;font-size:12.5px;color:#64748b}.sbd-cancel__result-sub-row strong{font-weight:700;color:#64748b;font-variant-numeric:tabular-nums}.sbd-cancel__result-amount{font-size:16px;font-weight:800;color:#1e2e4a;font-variant-numeric:tabular-nums;white-space:nowrap}.sbd-cancel__result-overlay{position:absolute;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}.sbd-cancel__result-backdrop{position:absolute;inset:0;background:#0000008c}.sbd-cancel__result-modal{position:relative;width:100%;max-width:400px;max-height:90%;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding:24px 20px;border-radius:20px;background:#fff;box-shadow:0 24px 60px #00000059}.sbd-cancel__result-done{width:100%}\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: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdCancelDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-cancel-dialog', standalone: true, imports: [DialogModule, ButtonModule, SkeletonModule, NgTemplateOutlet, NgClass], 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-cancel-dialog-wrapper\">\n\n  <div class=\"sbd-cancel\">\n\n    <!-- Loading refund details \u2014 shows cycling hints -->\n    @if (loading()) {\n      <div class=\"sbd-cancel__are-you-sure\">\n        <button type=\"button\" class=\"sbd-cancel__close-btn sbd-cancel__close-btn--floating\" (click)=\"closed.emit()\" aria-label=\"Close\">\n          <i class=\"pi pi-times\"></i>\n        </button>\n        <div class=\"sbd-cancel__ays-icon\">\n          <i class=\"pi pi-spin pi-spinner\"></i>\n        </div>\n        @for (h of [cancelHint()]; track h) {\n          <div class=\"sbd-cancel__ays-hint\">{{ h }}</div>\n        }\n        <div class=\"sbd-cancel__ays-dots\">\n          <span></span><span></span><span></span>\n        </div>\n      </div>\n    }\n\n    <!-- Select leg \u2014 shown once the refund preview has fully loaded, before the\n         refund breakdown, for round-trip bookings the backend hasn't already\n         restricted to a single leg. Same card design as almatar-b2c's\n         select-leg screen (checkbox overlay, refundable badge, disclaimer). -->\n    @else if (step() === 'select-leg') {\n      <div class=\"sbd-cancel__method-header\">\n        <button type=\"button\" class=\"sbd-cancel__method-close\" (click)=\"closed.emit()\" aria-label=\"Close\">\n          <i class=\"pi pi-times\"></i>\n        </button>\n        <div class=\"sbd-cancel__method-header-text\">\n          <h3 class=\"sbd-cancel__method-title\">Select Leg to Cancel</h3>\n          <span class=\"sbd-cancel__method-sub\">Booking ID #{{ bookingId() }}</span>\n        </div>\n      </div>\n\n      <div class=\"sbd-cancel__select-leg-body\">\n        @if (forcedLegType(); as forced) {\n          <div class=\"sbd-cancel__single-leg-note\">\n            <i class=\"pi pi-info-circle\"></i>\n            <span>This airline doesn't allow cancelling a single flight \u2014 {{ itineraryLeg(forced)?.from }} to {{ itineraryLeg(forced)?.to }} will be included automatically.</span>\n          </div>\n        }\n        @if (allLegsNonRefundable()) {\n          <div class=\"sbd-cancel__all-non-refundable-note\">\n            <i class=\"pi pi-exclamation-triangle\"></i>\n            <span>Sorry, we're unable to provide a refund for this booking, as both flights are non-refundable based on airline rules.</span>\n          </div>\n        }\n        <!-- Onward -->\n        <div class=\"sbd-cancel__leg-select-card\"\n          [ngClass]=\"{\n            'sbd-cancel__leg-select-card--selected': onwardChecked() && onwardRefundable(),\n            'sbd-cancel__leg-select-card--disabled': !onwardRefundable(),\n            'sbd-cancel__leg-select-card--frozen': forcedLegType() === 'onward'\n          }\">\n          @if (forcedLegType() !== 'onward') {\n            <label class=\"sbd-cancel__leg-select-checkbox\">\n              <input type=\"checkbox\" [checked]=\"onwardChecked()\" [disabled]=\"!onwardRefundable()\"\n                (change)=\"toggleLeg('onward')\" />\n              <span class=\"sbd-cancel__leg-select-icon\"><i class=\"pi pi-check\"></i></span>\n            </label>\n          } @else {\n            <i class=\"pi pi-lock sbd-cancel__leg-select-lock\"></i>\n          }\n          <div class=\"sbd-cancel__leg-select-content\">\n            @if (itineraryLeg('onward'); as leg) {\n              <div class=\"sbd-cancel__leg-select-top\">\n                <div>\n                  <span class=\"sbd-cancel__leg-select-name\">{{ leg.from }} to {{ leg.to }}</span>\n                  <div class=\"sbd-cancel__leg-select-date\">{{ fmtShortDate(leg.depTime) }}</div>\n                </div>\n                <span class=\"sbd-cancel__badge sbd-cancel__badge--outline\"\n                  [ngClass]=\"onwardRefundable() && forcedLegType() !== 'onward' ? 'sbd-cancel__badge--green' : 'sbd-cancel__badge--muted'\">\n                  {{ onwardRefundable() ? 'Refundable' : 'Non-Refundable' }}\n                </span>\n              </div>\n              <div class=\"sbd-cancel__leg-select-times\">\n                <span class=\"sbd-cancel__leg-select-time\">{{ fmtTime(leg.depTime) }}</span>\n                <span class=\"sbd-cancel__leg-select-line\">\n                  <span class=\"sbd-cancel__leg-select-line-stops\">{{ leg.stops.length > 0 ? (leg.stops.length + ' stop' + (leg.stops.length > 1 ? 's' : '')) : 'Direct' }}</span>\n                  @if (fmtMins(leg.totalMinutes)) { <span class=\"sbd-cancel__leg-select-line-dur\">{{ fmtMins(leg.totalMinutes) }}</span> }\n                  <i class=\"pi pi-arrow-right sbd-cancel__leg-select-line-arrow\"></i>\n                </span>\n                <span class=\"sbd-cancel__leg-select-time\">{{ fmtTime(leg.arrTime) }}</span>\n              </div>\n              @if (leg.airlineName || leg.cabin) {\n                <span class=\"sbd-cancel__leg-select-airline\">\n                  {{ leg.airlineName }}{{ leg.airlineName && leg.cabin ? ' \u00B7 ' : '' }}{{ leg.cabin }}\n                </span>\n              }\n              <div class=\"sbd-cancel__leg-select-footer\">\n                @if (leg.operatedBy.length) {\n                  <span class=\"sbd-cancel__leg-select-operated-by\">Operated by {{ leg.operatedBy.join(', ') }}</span>\n                }\n                <!-- <i class=\"pi pi-chevron-down sbd-cancel__leg-select-chevron\"></i> -->\n              </div>\n            } @else {\n              <div class=\"sbd-cancel__leg-select-top\">\n                <span class=\"sbd-cancel__leg-select-name\">Onward</span>\n                <span class=\"sbd-cancel__badge sbd-cancel__badge--outline\"\n                  [ngClass]=\"onwardRefundable() && forcedLegType() !== 'onward' ? 'sbd-cancel__badge--green' : 'sbd-cancel__badge--muted'\">\n                  {{ onwardRefundable() ? 'Refundable' : 'Non-Refundable' }}\n                </span>\n              </div>\n            }\n            @if (!onwardRefundable()) {\n              <div class=\"sbd-cancel__leg-select-notice\">\n                <i class=\"pi pi-info-circle\"></i>\n                <span>This flight type doesn't allow refunds on cancellation, based on the airline's fare rules.</span>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Return -->\n        <div class=\"sbd-cancel__leg-select-card\"\n          [ngClass]=\"{\n            'sbd-cancel__leg-select-card--selected': returnChecked() && returnRefundable(),\n            'sbd-cancel__leg-select-card--disabled': !returnRefundable(),\n            'sbd-cancel__leg-select-card--frozen': forcedLegType() === 'return'\n          }\">\n          @if (forcedLegType() !== 'return') {\n            <label class=\"sbd-cancel__leg-select-checkbox\">\n              <input type=\"checkbox\" [checked]=\"returnChecked()\" [disabled]=\"!returnRefundable()\"\n                (change)=\"toggleLeg('return')\" />\n              <span class=\"sbd-cancel__leg-select-icon\"><i class=\"pi pi-check\"></i></span>\n            </label>\n          } @else {\n            <i class=\"pi pi-lock sbd-cancel__leg-select-lock\"></i>\n          }\n          <div class=\"sbd-cancel__leg-select-content\">\n            @if (itineraryLeg('return'); as leg) {\n              <div class=\"sbd-cancel__leg-select-top\">\n                <div>\n                  <span class=\"sbd-cancel__leg-select-name\">{{ leg.from }} to {{ leg.to }}</span>\n                  <div class=\"sbd-cancel__leg-select-date\">{{ fmtShortDate(leg.depTime) }}</div>\n                </div>\n                <span class=\"sbd-cancel__badge sbd-cancel__badge--outline\"\n                  [ngClass]=\"returnRefundable() && forcedLegType() !== 'return' ? 'sbd-cancel__badge--green' : 'sbd-cancel__badge--muted'\">\n                  {{ returnRefundable() ? 'Refundable' : 'Non-Refundable' }}\n                </span>\n              </div>\n              <div class=\"sbd-cancel__leg-select-times\">\n                <span class=\"sbd-cancel__leg-select-time\">{{ fmtTime(leg.depTime) }}</span>\n                <span class=\"sbd-cancel__leg-select-line\">\n                  <span class=\"sbd-cancel__leg-select-line-stops\">{{ leg.stops.length > 0 ? (leg.stops.length + ' stop' + (leg.stops.length > 1 ? 's' : '')) : 'Direct' }}</span>\n                  @if (fmtMins(leg.totalMinutes)) { <span class=\"sbd-cancel__leg-select-line-dur\">{{ fmtMins(leg.totalMinutes) }}</span> }\n                  <i class=\"pi pi-arrow-right sbd-cancel__leg-select-line-arrow\"></i>\n                </span>\n                <span class=\"sbd-cancel__leg-select-time\">{{ fmtTime(leg.arrTime) }}</span>\n              </div>\n              @if (leg.airlineName || leg.cabin) {\n                <span class=\"sbd-cancel__leg-select-airline\">\n                  {{ leg.airlineName }}{{ leg.airlineName && leg.cabin ? ' \u00B7 ' : '' }}{{ leg.cabin }}\n                </span>\n              }\n              <div class=\"sbd-cancel__leg-select-footer\">\n                @if (leg.operatedBy.length) {\n                  <span class=\"sbd-cancel__leg-select-operated-by\">Operated by {{ leg.operatedBy.join(', ') }}</span>\n                }\n                <!-- <i class=\"pi pi-chevron-down sbd-cancel__leg-select-chevron\"></i> -->\n              </div>\n            } @else {\n              <div class=\"sbd-cancel__leg-select-top\">\n                <span class=\"sbd-cancel__leg-select-name\">Return</span>\n                <span class=\"sbd-cancel__badge sbd-cancel__badge--outline\"\n                  [ngClass]=\"returnRefundable() && forcedLegType() !== 'return' ? 'sbd-cancel__badge--green' : 'sbd-cancel__badge--muted'\">\n                  {{ returnRefundable() ? 'Refundable' : 'Non-Refundable' }}\n                </span>\n              </div>\n            }\n            @if (!returnRefundable()) {\n              <div class=\"sbd-cancel__leg-select-notice\">\n                <i class=\"pi pi-info-circle\"></i>\n                <span>This flight type doesn't allow refunds on cancellation, based on the airline's fare rules.</span>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n\n      @if (!allLegsNonRefundable() && !onwardChecked() && !returnChecked()) {\n        <div class=\"sbd-cancel__leg-select-hint\">Select at least one flight to continue</div>\n      }\n\n      <div class=\"sbd-cancel__footer\">\n        <button pButton\n          styleClass=\"sbd-cancel__btn-primary\"\n          label=\"Continue\"\n          [disabled]=\"allLegsNonRefundable() || (!onwardChecked() && !returnChecked())\"\n          (click)=\"step.set('details')\"></button>\n      </div>\n    }\n\n    <!-- Refund method \u2014 replaces the old are-you-sure + radio picker.\n         Stays mounted (dimmed) behind the result overlay once confirmed. -->\n    @else if (confirming() || cancelResult()) {\n      <div class=\"sbd-cancel__method-header\">\n        <button type=\"button\" class=\"sbd-cancel__method-close\" (click)=\"confirming.set(false)\" aria-label=\"Close\">\n          <i class=\"pi pi-times\"></i>\n        </button>\n        <div class=\"sbd-cancel__method-header-text\">\n          <h3 class=\"sbd-cancel__method-title\">Refund Method</h3>\n          <span class=\"sbd-cancel__method-sub\">Booking ID #{{ bookingId() }}</span>\n        </div>\n      </div>\n\n      <div class=\"sbd-cancel__method-body\">\n        <div class=\"sbd-cancel__method-amount\">\n          <span>You will get back</span>\n          <strong>{{ fmt(adjustedData()?.totalRefundAmount) }}</strong>\n        </div>\n\n        @if (isCreditShell()) {\n        <!-- Credit-shell refunds have exactly one destination \u2014 the airline\n             credit shell \u2014 so show it as a read-only card, not a picker. -->\n        <div class=\"sbd-cancel__method-option sbd-cancel__method-option--active\">\n          <span class=\"sbd-cancel__method-icon\"><i class=\"pi pi-wallet\"></i></span>\n          <span class=\"sbd-cancel__method-body-text\">\n            <span class=\"sbd-cancel__method-name\">{{ creditShellSupplierName() }} website credit</span>\n            <span class=\"sbd-cancel__method-desc\">Your refund will be issued instantly by {{ creditShellSupplierName() }}.</span>\n            <span class=\"sbd-cancel__method-badge sbd-cancel__method-badge--instant\">\n              <svg width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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        </div>\n\n        <div class=\"sbd-cancel__notice sbd-cancel__notice--credit\">\n          <i class=\"pi pi-info-circle\"></i>\n          <span>\n            Your refund will be issued as airline credit under the same PNR.\n            It can be used only for future booking on {{ creditShellSupplierName() }} website.\n          </span>\n        </div>\n\n        <!-- Refundable ancillaries (baggage, seats, \u2026) can independently be\n             flagged credit-shell or not \u2014 each renders as its own card,\n             matching either the credit-shell style above or the normal\n             wallet style, both with the same nested note when credit-shell. -->\n        @for (item of creditShellAncillaryItems(); track item.name) {\n          <div class=\"sbd-cancel__method-option sbd-cancel__method-option--active\">\n            <span class=\"sbd-cancel__method-icon\"><i class=\"pi pi-wallet\"></i></span>\n            <span class=\"sbd-cancel__method-body-text\">\n              <span class=\"sbd-cancel__method-name\">\n                {{ item.isCreditShell ? (creditShellSupplierName() + ' website credit') : 'Almatar Wallet' }}\n                \u2014 {{ item.name }}\n              </span>\n              <span class=\"sbd-cancel__method-desc\">\n                @if (item.isCreditShell) {\n                  Your refund will be issued instantly by {{ creditShellSupplierName() }}.\n                } @else {\n                  Usable for future bookings\n                }\n              </span>\n              <span class=\"sbd-cancel__method-badge sbd-cancel__method-badge--instant\">\n                <svg width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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              @if (item.isCreditShell) {\n                <span class=\"sbd-cancel__notice sbd-cancel__notice--info\">\n                  <i class=\"pi pi-info-circle\"></i>\n                  <span>Your refund will be issued as airline credit under the same PNR. It can be used only for future booking on {{ creditShellSupplierName() }} website.</span>\n                </span>\n              }\n            </span>\n            <strong>{{ fmt(item.amount) }}</strong>\n          </div>\n        }\n        } @else {\n\n        @if (isFullWalletRefundAllowed() || isWalletOnlyRefund() || isLoyaltyOnlyRefund()) {\n        <button type=\"button\" class=\"sbd-cancel__method-option\"\n          [ngClass]=\"{ 'sbd-cancel__method-option--active': preferredRefundMethod() === 'wallet' }\"\n          (click)=\"preferredRefundMethod.set('wallet')\">\n          <span class=\"sbd-cancel__method-icon\"><i class=\"pi pi-wallet\"></i></span>\n          <span class=\"sbd-cancel__method-body-text\">\n            <span class=\"sbd-cancel__method-name\">{{ walletCardLabel() }}</span>\n            <span class=\"sbd-cancel__method-desc\">Usable for future bookings</span>\n            <span class=\"sbd-cancel__method-badge sbd-cancel__method-badge--instant\">\n              <svg width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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 Refund\n            </span>\n            @if (hasLoyaltyPointsRefund() && !hasCashWalletRefund()) {\n              <span class=\"sbd-cancel__notice sbd-cancel__notice--info\">\n                <i class=\"pi pi-info-circle\"></i>\n                <span>External loyalty points are refunded to your almatar Wallet as permanent points and ready to use in your next booking.</span>\n              </span>\n            }\n          </span>\n          <span class=\"sbd-cancel__method-radio\"></span>\n        </button>\n        }\n\n        <!-- Original payment method \u2014 replaced with a \"Split Refund\" card whenever\n             part of the refund is forced to the wallet (e.g. loyalty points used),\n             since the total can't go 100% to the original payment method.\n             Name/desc/badge/icon become gateway-specific for installment (Tamara,\n             Tabby) and loyalty (Al Rajhi Mokafaa) payment methods. -->\n        @if (!hasSplitRefund() && !isWalletOnlyRefund() && !isLoyaltyOnlyRefund()) {\n        <button type=\"button\" class=\"sbd-cancel__method-option\"\n          [ngClass]=\"{ 'sbd-cancel__method-option--active': preferredRefundMethod() === 'originalPaymentMethod' }\"\n          (click)=\"preferredRefundMethod.set('originalPaymentMethod')\">\n          <span class=\"sbd-cancel__method-icon\">\n            <i class=\"pi\" [ngClass]=\"isSpecialGatewayMethod() ? 'pi-wallet' : 'pi-credit-card'\"></i>\n          </span>\n          <span class=\"sbd-cancel__method-body-text\">\n            <span class=\"sbd-cancel__method-name\">{{ originalPaymentLabel() }}</span>\n            <span class=\"sbd-cancel__method-desc\">\n              @if (isInstallmentMethod()) {\n                Returned to your {{ customerPaymentLabel() }} installment plan\n              } @else if (isLoyaltyMethod()) {\n                Refunded to your {{ customerPaymentLabel() }} account\n              } @else {\n                Returned to your original payment method\n              }\n            </span>\n            <span class=\"sbd-cancel__method-badge\" [ngClass]=\"isLoyaltyMethod() ? 'sbd-cancel__method-badge--loyalty' : 'sbd-cancel__method-badge--days'\">\n              @if (!isLoyaltyMethod()) {\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"#0B54C2\" stroke-width=\"1.2\" />\n                  <path d=\"M6 5.5v3M6 3.9v.01\" stroke=\"#0B54C2\" stroke-width=\"1.2\" stroke-linecap=\"round\" />\n                </svg>\n              }\n              {{ cardBadgeText() }}\n            </span>\n          </span>\n          <span class=\"sbd-cancel__option-end\">\n            @if (isMadaMethod()) {\n              <span class=\"sbd-cancel__mada-logo\" aria-hidden=\"true\">\n                <ng-container *ngTemplateOutlet=\"madaLogo\"></ng-container>\n              </span>\n            }\n            <span class=\"sbd-cancel__method-radio\"></span>\n          </span>\n        </button>\n        }\n\n        <!-- Split Refund -->\n        @if (hasSplitRefund()) {\n        <button type=\"button\" class=\"sbd-cancel__method-option sbd-cancel__method-option--split\"\n          [ngClass]=\"{ 'sbd-cancel__method-option--active': preferredRefundMethod() === 'split' }\"\n          (click)=\"preferredRefundMethod.set('split')\">\n          <span class=\"sbd-cancel__method-icon\"><i class=\"pi pi-wallet\"></i></span>\n          <span class=\"sbd-cancel__method-body-text\">\n            <span class=\"sbd-cancel__method-name\">Split Refund</span>\n            <span class=\"sbd-cancel__method-desc\">Returned to your original payment method</span>\n          </span>\n          <strong class=\"sbd-cancel__method-split-total\">{{ fmt(adjustedData()?.totalRefundAmount) }}</strong>\n          <span class=\"sbd-cancel__method-radio\"></span>\n\n          <span class=\"sbd-cancel__method-split-breakdown\">\n            @for (row of splitRefundRows(); track row.label) {\n              <span class=\"sbd-cancel__method-split-row\">\n                <span class=\"sbd-cancel__method-split-label\">\n                  {{ row.label }}\n                  @if (row.isMada) {\n                    <span class=\"sbd-cancel__mada-logo\" aria-hidden=\"true\">\n                      <ng-container *ngTemplateOutlet=\"madaLogo\"></ng-container>\n                    </span>\n                  }\n                </span>\n                <strong>{{ fmt(row.value) }}</strong>\n              </span>\n              <span class=\"sbd-cancel__method-badge\"\n                [ngClass]=\"row.instant ? 'sbd-cancel__method-badge--instant' : (isLoyaltyMethod() ? 'sbd-cancel__method-badge--loyalty' : 'sbd-cancel__method-badge--days')\">\n                {{ row.badgeText }}\n              </span>\n              @if (row.isLoyalty) {\n                <span class=\"sbd-cancel__notice sbd-cancel__notice--info\">\n                  <i class=\"pi pi-info-circle\"></i>\n                  <span>External loyalty points are refunded to your almatar Wallet as permanent points and ready to use in your next booking.</span>\n                </span>\n              }\n            }\n          </span>\n        </button>\n        }\n        }\n      </div>\n\n      <div class=\"sbd-cancel__footer\">\n        <button pButton\n          styleClass=\"sbd-cancel__btn-danger-pill\"\n          [label]=\"cancelling() ? 'Cancelling...' : 'Confirm Cancellation'\"\n          [disabled]=\"cancelling()\" (click)=\"confirm()\"></button>\n      </div>\n    }\n\n    <!-- Main card -->\n    @else if (refundData() && step() === 'details') {\n      <!-- Card header -->\n      <div class=\"sbd-cancel__header sbd-cancel__header--stack\">\n        <div class=\"sbd-cancel__header-titles\">\n          <span class=\"sbd-cancel__header-title\">Cancel Booking Request</span>\n          <span class=\"sbd-cancel__header-sub\">#{{ refundData()?.bookingId ?? bookingId() }}</span>\n        </div>\n        <button type=\"button\" class=\"sbd-cancel__close-btn\" (click)=\"closed.emit()\" aria-label=\"Close\">\n          <i class=\"pi pi-times\"></i>\n        </button>\n      </div>\n\n      <div class=\"sbd-cancel__body\">\n\n        <!-- Non-refundable -->\n        @if (!refundData()?.isRefundable) {\n          <div class=\"sbd-cancel__notice sbd-cancel__notice--warning\">\n            <i class=\"pi pi-exclamation-triangle\"></i>\n            <div>\n              <strong>This booking is not eligible for a refund.</strong>\n              @if (refundData()?.cause) {\n                <p>{{ refundData()?.cause }}</p>\n              } @else {\n                <p>Please escalate to the relevant team for manual handling.</p>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Refundable flow -->\n        @else {\n\n          <!-- Top summary: paid / get back -->\n          <div class=\"sbd-cancel__summary\">\n            <div class=\"sbd-cancel__summary-row\"\n              [ngClass]=\"{ 'sbd-cancel__summary-row--toggle': hasPaidBreakdown() && !!adjustedData()?.totalWalletAmount }\"\n              (click)=\"hasPaidBreakdown() && !!adjustedData()?.totalWalletAmount && togglePaidSummary()\">\n              <span class=\"sbd-cancel__summary-label\"><i class=\"pi pi-wallet\"></i> Total paid</span>\n              <span class=\"sbd-cancel__summary-value\">\n                <strong>{{ fmt(adjustedData()?.originalAmount) }}</strong>\n                @if (hasPaidBreakdown() && !!adjustedData()?.totalWalletAmount) {\n                  <button type=\"button\" class=\"sbd-cancel__leg-chevron\"\n                    [ngClass]=\"{ 'sbd-cancel__leg-chevron--collapsed': !paidSummaryExpanded() }\"\n                    aria-label=\"Toggle paid breakdown\">\n                    <i class=\"pi pi-chevron-up\"></i>\n                  </button>\n                }\n              </span>\n            </div>\n\n            @if (hasPaidBreakdown() && paidSummaryExpanded() && !!adjustedData()?.totalWalletAmount) {\n              <div class=\"sbd-cancel__summary-breakdown\">\n                @for (row of paidBreakdownRows(); track row.label) {\n                  @if (row.label === 'Almatar Wallet') {\n                    <div class=\"sbd-cancel__summary-breakdown-row\">\n                      <span>{{ row.label }}</span>\n                      <span>{{ fmt(row.value) }}</span>\n                    </div>\n                  }\n                }\n              </div>\n            }\n\n            <div class=\"sbd-cancel__summary-row sbd-cancel__summary-row--refund\">\n              <span class=\"sbd-cancel__summary-label\"><i class=\"pi pi-dollar\"></i> You will get back</span>\n              <strong>{{ fmt(adjustedData()?.totalRefundAmount) }}</strong>\n            </div>\n          </div>\n\n          <!-- Golden Guarantee gift \u2014 overrides credit-shell messaging below -->\n          @if (hasGoldenGuaranteeGift()) {\n            <div class=\"sbd-cancel__notice sbd-cancel__notice--success\">\n              <i class=\"pi pi-shield\"></i>\n              <span>You're covered by Cancel for any reason service, you'll get 100% refund, minus any applicable fees. See the breakdown below.</span>\n            </div>\n          }\n\n          <!-- One-way (or a round-trip restricted to a single leg): single card -->\n          @if (!showRoundTripLegCards()) {\n            <!-- Source selector (multiple suppliers) -->\n            @if (availableSources().length > 1) {\n              <div class=\"sbd-cancel__source-selector\">\n                <span class=\"sbd-cancel__source-label\">Cancel via</span>\n                @for (src of availableSources(); track src) {\n                  <button class=\"sbd-cancel__source-chip\"\n                    [ngClass]=\"{\n                      'sbd-cancel__source-chip--active':    selectedSource() === src,\n                      'sbd-cancel__source-chip--no-refund': activeSourceBreakdown()?.[src]?.isRefundable === false\n                    }\"\n                    (click)=\"selectedSource.set(src)\">\n                    {{ src }}\n                    @if (activeSourceBreakdown()?.[src]?.isRefundable === false) {\n                      <i class=\"pi pi-ban\" style=\"font-size:10px; margin-left:4px;\"></i>\n                    }\n                  </button>\n                }\n              </div>\n              @if (sourceNonRefundableHint()) {\n                <div class=\"sbd-cancel__notice sbd-cancel__notice--warning\">\n                  <i class=\"pi pi-ban\"></i>\n                  <span>{{ sourceNonRefundableHint() }}</span>\n                </div>\n              }\n            }\n\n            <!-- Not refundable -->\n            @if (!currentData()?.isRefundable) {\n              <div class=\"sbd-cancel__notice sbd-cancel__notice--warning\">\n                <i class=\"pi pi-ban\"></i>\n                <div>\n                  <strong>This leg is not eligible for a refund.</strong>\n                  <p>Please escalate to the relevant team for manual handling.</p>\n                </div>\n              </div>\n            } @else {\n              <div class=\"sbd-cancel__section-title\">Refund Details</div>\n\n              <div class=\"sbd-cancel__refund-card\">\n                <span class=\"sbd-cancel__badge sbd-cancel__badge--outline sbd-cancel__badge--green\">Refundable</span>\n\n                @if (refundableBreakdownRows(adjustedData()).length) {\n                  @for (r of refundableBreakdownRows(adjustedData()); track r.label) {\n                    <div class=\"sbd-cancel__refund-card-row\">\n                      <span>{{ r.label }}</span>\n                      <strong>{{ fmt(r.value) }}</strong>\n                    </div>\n                  }\n                } @else {\n                  <div class=\"sbd-cancel__refund-card-row\">\n                    <span>Fare</span>\n                    <strong>{{ fmt(adjustedData()?.originalAmount) }}</strong>\n                  </div>\n                }\n\n                <!-- hide addon note new CR from CX -->\n                <!-- @if (hasRefundableAddonNote(adjustedData())) {\n                  <div class=\"sbd-cancel__notice sbd-cancel__notice--neutral\">\n                    <i class=\"pi pi-info-circle\"></i>\n                    <span>Your add-on service/s refund will be processed separately by our Customer Service team shortly.</span>\n                  </div>\n                } -->\n\n                <!-- Deductions -->\n                @if (deductions().length) {\n                  <div class=\"sbd-cancel__refund-card-divider\"></div>\n                  <span class=\"sbd-cancel__badge sbd-cancel__badge--outline sbd-cancel__badge--muted\">Not Refunded - Deductions</span>\n                  @for (d of deductions(); track d.label) {\n                    <div class=\"sbd-cancel__refund-card-line\">\n                      <span>\n                        {{ d.label }}\n                        @if (d.badge) { <span class=\"sbd-cancel__tag\">{{ d.badge }}</span> }\n                      </span>\n                      <span class=\"sbd-cancel__refund-card-line--neg\">{{ fmtNeg(d.value) }}</span>\n                    </div>\n                  }\n                }\n\n                <div class=\"sbd-cancel__refund-card-divider sbd-cancel__refund-card-divider--dashed\"></div>\n                <div class=\"sbd-cancel__refund-card-total\">\n                  <span>Total Refund</span>\n                  <strong>{{ fmt(adjustedData()?.totalRefundAmount) }}</strong>\n                </div>\n              </div>\n\n              <!-- Credit shell -->\n              @if (creditShellNote()) {\n                <div class=\"sbd-cancel__notice sbd-cancel__notice--credit\">\n                  <i class=\"pi pi-wallet\"></i>\n                  <span>\u2139\uFE0F {{ creditShellNote() }}</span>\n                </div>\n              }\n            }\n          }\n\n          <!-- Round trip: one collapsible card per leg (only when both legs are cancellable) -->\n          @if (showRoundTripLegCards()) {\n            <!-- Gift hint -->\n            @if (giftHint()) {\n              <div class=\"sbd-cancel__notice sbd-cancel__notice--tip\">\n                <i class=\"pi pi-info-circle\"></i>\n                <span>{{ giftHint() }}</span>\n              </div>\n            }\n\n            <!-- Mixed hint -->\n            @if (mixedHint()) {\n              <div class=\"sbd-cancel__notice sbd-cancel__notice--warning\">\n                <i class=\"pi pi-exclamation-triangle\"></i>\n                <span>{{ mixedHint() }}</span>\n              </div>\n            }\n\n            <!-- Source selector (multiple suppliers) -->\n            @if (availableSources().length > 1) {\n              <div class=\"sbd-cancel__source-selector\">\n                <span class=\"sbd-cancel__source-label\">Cancel via</span>\n                @for (src of availableSources(); track src) {\n                  <button class=\"sbd-cancel__source-chip\"\n                    [ngClass]=\"{\n                      'sbd-cancel__source-chip--active':    selectedSource() === src,\n                      'sbd-cancel__source-chip--no-refund': activeSourceBreakdown()?.[src]?.isRefundable === false\n                    }\"\n                    (click)=\"selectedSource.set(src)\">\n                    {{ src }}\n                    @if (activeSourceBreakdown()?.[src]?.isRefundable === false) {\n                      <i class=\"pi pi-ban\" style=\"font-size:10px; margin-left:4px;\"></i>\n                    }\n                  </button>\n                }\n              </div>\n              @if (sourceNonRefundableHint()) {\n                <div class=\"sbd-cancel__notice sbd-cancel__notice--warning\">\n                  <i class=\"pi pi-ban\"></i>\n                  <span>{{ sourceNonRefundableHint() }}</span>\n                </div>\n              }\n            }\n\n            <!-- Onward leg card -->\n            @if (onwardChecked()) {\n              <div class=\"sbd-cancel__leg-card\">\n                <div class=\"sbd-cancel__leg-card-header\" (click)=\"toggleLegExpanded('onward')\">\n                  <span class=\"sbd-cancel__leg-checkbox\">Onward</span>\n                  <button type=\"button\" class=\"sbd-cancel__leg-chevron\"\n                    [ngClass]=\"{ 'sbd-cancel__leg-chevron--collapsed': !onwardExpanded() }\"\n                    aria-label=\"Toggle\">\n                    <i class=\"pi pi-chevron-up\"></i>\n                  </button>\n                </div>\n\n                @if (onwardExpanded()) {\n                  <div class=\"sbd-cancel__leg-card-body\">\n                    <span class=\"sbd-cancel__badge sbd-cancel__badge--outline\"\n                      [ngClass]=\"legAdjustedData('onward')?.isRefundable ? 'sbd-cancel__badge--green' : 'sbd-cancel__badge--red'\">\n                      {{ legAdjustedData('onward')?.isRefundable ? 'Refundable' : 'Non-Refundable' }}\n                    </span>\n\n                    @if (legAdjustedData('onward')?.isRefundable) {\n                      @if (refundableBreakdownRows(legAdjustedData('onward')).length) {\n                        @for (r of refundableBreakdownRows(legAdjustedData('onward')); track r.label) {\n                          <div class=\"sbd-cancel__refund-card-row\">\n                            <span>{{ r.label }}</span>\n                            <strong>{{ fmt(r.value) }}</strong>\n                          </div>\n                        }\n                      } @else {\n                        <div class=\"sbd-cancel__refund-card-row\">\n                          <span>Fare</span>\n                          <strong>{{ fmt(legRefundPool('onward')) }}</strong>\n                        </div>\n                      }\n\n                      <!-- hide addon note new CR from CX -->\n                      <!-- @if (hasRefundableAddonNote(legAdjustedData('onward'))) {\n                        <div class=\"sbd-cancel__notice sbd-cancel__notice--neutral\">\n                          <i class=\"pi pi-info-circle\"></i>\n                          <span>Your add-on service/s refund will be processed separately by our Customer Service team shortly.</span>\n                        </div>\n                      } -->\n\n                      @if (legDeductions('onward').length && !isCreditShell()) {\n                        <div class=\"sbd-cancel__refund-card-divider\"></div>\n                        <span class=\"sbd-cancel__badge sbd-cancel__badge--outline sbd-cancel__badge--muted\">Not Refunded - Deductions</span>\n                        @for (d of legDeductions('onward'); track d.label) {\n                          <div class=\"sbd-cancel__refund-card-line\">\n                            <span>\n                              {{ d.label }}\n                              @if (d.badge) { <span class=\"sbd-cancel__tag\">{{ d.badge }}</span> }\n                            </span>\n                            <span class=\"sbd-cancel__refund-card-line--neg\">{{ fmtNeg(d.value) }}</span>\n                          </div>\n                        }\n                      }\n\n                      <div class=\"sbd-cancel__refund-card-divider sbd-cancel__refund-card-divider--dashed\"></div>\n                      <div class=\"sbd-cancel__refund-card-total\">\n                        <span>Departure Total Refund</span>\n                        <strong>{{ fmt(legAdjustedData('onward')?.totalRefundAmount) }}</strong>\n                      </div>\n\n                      @if (refundData()?.legInfo?.onward?.isCreditShell && !hasGoldenGuaranteeGift()) {\n                        <div class=\"sbd-cancel__notice sbd-cancel__notice--credit\">\n                          <i class=\"pi pi-wallet\"></i>\n                          <span>\u2139\uFE0F The refund for the onward flight has been issued as an Airline Credit Shell.</span>\n                        </div>\n                      }\n                    } @else {\n                      <div class=\"sbd-cancel__notice sbd-cancel__notice--warning\">\n                        <i class=\"pi pi-ban\"></i>\n                        <span>This leg is not eligible for a refund.</span>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n\n            <!-- Return leg card -->\n            @if (returnChecked()) {\n              <div class=\"sbd-cancel__leg-card\">\n                <div class=\"sbd-cancel__leg-card-header\" (click)=\"toggleLegExpanded('return')\">\n                  <span class=\"sbd-cancel__leg-checkbox\">Return</span>\n                  <button type=\"button\" class=\"sbd-cancel__leg-chevron\"\n                    [ngClass]=\"{ 'sbd-cancel__leg-chevron--collapsed': !returnExpanded() }\"\n                    aria-label=\"Toggle\">\n                    <i class=\"pi pi-chevron-up\"></i>\n                  </button>\n                </div>\n\n                @if (returnExpanded()) {\n                  <div class=\"sbd-cancel__leg-card-body\">\n                    <span class=\"sbd-cancel__badge sbd-cancel__badge--outline\"\n                      [ngClass]=\"legAdjustedData('return')?.isRefundable ? 'sbd-cancel__badge--green' : 'sbd-cancel__badge--red'\">\n                      {{ legAdjustedData('return')?.isRefundable ? 'Refundable' : 'Non-Refundable' }}\n                    </span>\n\n                    @if (legAdjustedData('return')?.isRefundable) {\n                      @if (refundableBreakdownRows(legAdjustedData('return')).length) {\n                        @for (r of refundableBreakdownRows(legAdjustedData('return')); track r.label) {\n                          <div class=\"sbd-cancel__refund-card-row\">\n                            <span>{{ r.label }}</span>\n                            <strong>{{ fmt(r.value) }}</strong>\n                          </div>\n                        }\n                      } @else {\n                        <div class=\"sbd-cancel__refund-card-row\">\n                          <span>Fare</span>\n                          <strong>{{ fmt(legRefundPool('return')) }}</strong>\n                        </div>\n                      }\n\n                      <!-- hide addon note new CR from CX -->\n                      <!-- @if (hasRefundableAddonNote(legAdjustedData('return'))) {\n                        <div class=\"sbd-cancel__notice sbd-cancel__notice--neutral\">\n                          <i class=\"pi pi-info-circle\"></i>\n                          <span>Your add-on service/s refund will be processed separately by our Customer Service team shortly.</span>\n                        </div>\n                      } -->\n\n                      @if (legDeductions('return').length && !isCreditShell()) {\n                        <div class=\"sbd-cancel__refund-card-divider\"></div>\n                        <span class=\"sbd-cancel__badge sbd-cancel__badge--outline sbd-cancel__badge--muted\">Not Refunded - Deductions</span>\n                        @for (d of legDeductions('return'); track d.label) {\n                          <div class=\"sbd-cancel__refund-card-line\">\n                            <span>\n                              {{ d.label }}\n                              @if (d.badge) { <span class=\"sbd-cancel__tag\">{{ d.badge }}</span> }\n                            </span>\n                            <span class=\"sbd-cancel__refund-card-line--neg\">{{ fmtNeg(d.value) }}</span>\n                          </div>\n                        }\n                      }\n\n                      <div class=\"sbd-cancel__refund-card-divider sbd-cancel__refund-card-divider--dashed\"></div>\n                      <div class=\"sbd-cancel__refund-card-total\">\n                        <span>Return Total Refund</span>\n                        <strong>{{ fmt(legAdjustedData('return')?.totalRefundAmount) }}</strong>\n                      </div>\n\n                      @if (refundData()?.legInfo?.return?.isCreditShell && !hasGoldenGuaranteeGift()) {\n                        <div class=\"sbd-cancel__notice sbd-cancel__notice--credit\">\n                          <i class=\"pi pi-wallet\"></i>\n                          <span>\u2139\uFE0F The refund for the return flight has been issued as an Airline Credit Shell.</span>\n                        </div>\n                      }\n                    } @else {\n                      <div class=\"sbd-cancel__notice sbd-cancel__notice--warning\">\n                        <i class=\"pi pi-ban\"></i>\n                        <span>This leg is not eligible for a refund.</span>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          }\n\n          <!-- Instant refund notice -->\n          @if (currentData()?.isRefundable) {\n            <div class=\"sbd-cancel__notice sbd-cancel__notice--shield\">\n              <i class=\"pi pi-shield\"></i>\n              <span>\n                @if (isNilRefund()) {\n                  We're sorry, as per airline policy, no refund applies because the cancellation fees equal or exceed your refundable fare amount.\n                } @else {\n                  @if (isWalletOnlyRefund() || isLoyaltyOnlyRefund()) {\n                    Your refund is instant to the customer's almatar Wallet.\n                  } @else {\n                    Your refund is instant from our side, your bank may take up to 15 business days to reflect it.\n                  }\n                }\n                @if (!isNilRefund() && !isCreditShell()) {\n                  <strong>You can select refund option in the next step</strong>\n                }\n              </span>\n            </div>\n          }\n        }\n\n      </div>\n\n      <!-- Footer -->\n      <div class=\"sbd-cancel__footer\">\n        @if (refundData()?.isRefundable) {\n          <button pButton label=\"Keep booking\" styleClass=\"p-button-outlined p-button-secondary sbd-cancel__btn-keep\" (click)=\"closed.emit()\"></button>\n          @if (currentData()?.isRefundable) {\n            <button pButton\n              styleClass=\"sbd-cancel__btn-primary\"\n              [label]=\"isCreditShell() ? 'Continue Cancellation' : 'Select refund option'\"\n              [disabled]=\"!canConfirm()\" (click)=\"requestCancel()\"></button>\n          }\n        } @else {\n          <button pButton label=\"Close\" styleClass=\"p-button-outlined p-button-secondary\" (click)=\"closed.emit()\"></button>\n        }\n      </div>\n    }\n\n    <!-- \u2500\u2500 Result overlay: floating modal over the dimmed refund-method screen (scoped to this dialog, not the whole viewport) \u2500\u2500 -->\n    @if (cancelResult()) {\n      <div class=\"sbd-cancel__result-overlay\">\n        <div class=\"sbd-cancel__result-backdrop\"></div>\n        <div class=\"sbd-cancel__result-modal\">\n          <div class=\"sbd-cancel__result-hero\">\n            <span class=\"sbd-cancel__result-icon sbd-cancel__result-icon--green\">\n              <i class=\"pi pi-check\"></i>\n            </span>\n            <h3 class=\"sbd-cancel__result-title\">{{ confirmIsNilRefund() ? 'Cancel Confirmed' : 'Refund Confirmed' }}</h3>\n          </div>\n\n          @for (r of confirmRefunds(); track r.label) {\n            <div class=\"sbd-cancel__result-row\">\n              <span class=\"sbd-cancel__method-icon\">\n                <i class=\"pi\" [ngClass]=\"isWalletDestinationRow(r) ? 'pi-wallet' : 'pi-credit-card'\"></i>\n              </span>\n              <span class=\"sbd-cancel__result-body-text\">\n                <span class=\"sbd-cancel__method-name\">{{ r.label }}</span>\n                @if (r.subRows?.length) {\n                  <span class=\"sbd-cancel__result-sub-rows\">\n                    @for (sub of r.subRows; track sub.label) {\n                      <span class=\"sbd-cancel__result-sub-row\">\n                        <span>{{ sub.label }}</span>\n                        <strong>{{ fmtResult(sub.value) }}</strong>\n                      </span>\n                    }\n                  </span>\n                }\n                <span class=\"sbd-cancel__method-badge\"\n                  [ngClass]=\"isWalletDestinationRow(r) ? 'sbd-cancel__method-badge--instant' : 'sbd-cancel__method-badge--days'\">\n                  {{ isWalletDestinationRow(r) ? 'Ready Now' : (r.key === 'totalCardRefundAmount' ? confirmCardBadgeText() : 'Up to 15 business days, bank policy') }}\n                </span>\n                @if (r.hasLoyaltyNote) {\n                  <span class=\"sbd-cancel__notice sbd-cancel__notice--info\">\n                    <i class=\"pi pi-info-circle\"></i>\n                    <span>External loyalty points are refunded to your almatar Wallet as permanent points and ready to use in your next booking.</span>\n                  </span>\n                }\n              </span>\n              <strong class=\"sbd-cancel__result-amount\">{{ fmtResult(r.value) }}</strong>\n            </div>\n          }\n\n          @if (confirmCreditShellNote()) {\n            <div class=\"sbd-cancel__notice sbd-cancel__notice--credit\">\n              <i class=\"pi pi-wallet\"></i>\n              <span>\u2139\uFE0F {{ confirmCreditShellNote() }}</span>\n            </div>\n          }\n\n          <button pButton styleClass=\"sbd-cancel__btn-primary sbd-cancel__result-done\" label=\"Close\" (click)=\"closed.emit()\"></button>\n        </div>\n      </div>\n    }\n\n  </div>\n\n</p-dialog>\n\n<ng-template #madaLogo>\n  <svg width=\"43\" height=\"15\" viewBox=\"0 0 43 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <g clip-path=\"url(#clip0_sbd_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_sbd_mada\">\n        <rect width=\"43\" height=\"15\" fill=\"white\" />\n      </clipPath>\n    </defs>\n  </svg>\n</ng-template>\n", styles: [":host ::ng-deep .sbd-cancel-dialog-wrapper{border-radius:16px;overflow:hidden;box-shadow:0 24px 60px #0f172a38}:host ::ng-deep .sbd-cancel-dialog-wrapper .p-dialog-content{padding:0;border-radius:16px;overflow-y:auto;overflow-x:hidden}.sbd-cancel{font-family:inherit;border-radius:16px;overflow:visible;position:relative}.sbd-cancel__loading{padding:24px}.sbd-cancel__loading-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.sbd-cancel__loading-rows{display:flex;flex-direction:column;gap:10px;margin-top:20px}.sbd-cancel__loading-row{display:flex;justify-content:space-between}.sbd-cancel__are-you-sure{padding:36px 24px 28px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;border-top:1px solid #e2e8f0}.sbd-cancel__ays-icon{width:56px;height:56px;border-radius:50%;background:#fff7ed;border:2px solid #fed7aa;display:flex;align-items:center;justify-content:center}.sbd-cancel__ays-icon .pi{font-size:24px;color:#f97316}.sbd-cancel__ays-icon--warn{background:#fef2f2;border-color:#fecaca}.sbd-cancel__ays-icon--warn .pi{color:#ef4444}.sbd-cancel__ays-hint{font-size:13px;color:#64748b;min-height:20px;animation:sbd-hint-fade .35s ease-out}.sbd-cancel__ays-dots{display:flex;gap:6px}.sbd-cancel__ays-dots span{width:7px;height:7px;border-radius:50%;background:#f97316;opacity:.3;animation:sbd-dot-pulse 1.2s ease-in-out infinite}.sbd-cancel__ays-dots span:nth-child(2){animation-delay:.2s}.sbd-cancel__ays-dots span:nth-child(3){animation-delay:.4s}@keyframes sbd-hint-fade{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes sbd-dot-pulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}.sbd-cancel__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.sbd-cancel__header-left{display:flex;align-items:center;gap:10px}.sbd-cancel__header-icon{font-size:18px;color:#475569}.sbd-cancel__header-title{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-cancel__header--stack{align-items:flex-start}.sbd-cancel__header-titles{display:flex;flex-direction:column;gap:2px}.sbd-cancel__header-sub{font-size:12.5px;font-weight:600;color:#94a3b8;font-variant-numeric:tabular-nums}.sbd-cancel__badge{font-size:11.5px;font-weight:700;border-radius:20px;padding:3px 12px;letter-spacing:.03em;width:max-content;text-transform:uppercase}.sbd-cancel__badge--green{background:#dcfce7;color:#166534}.sbd-cancel__badge--red{background:#fee2e2;color:#991b1b}.sbd-cancel__badge--orange{background:#fff7ed;color:#9a3412}.sbd-cancel__badge--outline{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;padding:4px 14px}.sbd-cancel__badge--outline.sbd-cancel__badge--green{color:#16a34a}.sbd-cancel__badge--outline.sbd-cancel__badge--red{color:#dc2626}.sbd-cancel__badge--muted{background:#f8fafc;color:#64748b;box-shadow:inset 0 0 0 1px #e2e8f0}.sbd-cancel__close-btn{width:30px;height:30px;border-radius:8px;border:none;background:transparent;color:#64748b;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s}.sbd-cancel__close-btn .pi{font-size:14px}.sbd-cancel__close-btn:hover{background:#e2e8f0;color:#1e2e4a}.sbd-cancel__close-btn--floating{position:absolute;top:12px;inset-inline-end:12px}.sbd-cancel__summary{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}.sbd-cancel__summary-row{display:flex;align-items:center;justify-content:space-between;font-size:13.5px}.sbd-cancel__summary-row strong{font-size:15px;font-weight:800;color:#1e2e4a;font-variant-numeric:tabular-nums}.sbd-cancel__summary-row--refund .sbd-cancel__summary-label,.sbd-cancel__summary-row--refund strong{color:#16a34a}.sbd-cancel__summary-row--toggle{cursor:pointer}.sbd-cancel__summary-label{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:#475569}.sbd-cancel__summary-label .pi{font-size:13px}.sbd-cancel__summary-value{display:flex;align-items:center;gap:4px}.sbd-cancel__summary-breakdown{display:flex;flex-direction:column;gap:6px;padding:2px 0 2px 22px}.sbd-cancel__summary-breakdown-row{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:#64748b}.sbd-cancel__summary-breakdown-row span:last-child{font-variant-numeric:tabular-nums;font-weight:600;color:#475569}.sbd-cancel__section-title{font-size:14px;font-weight:700;color:#1e2e4a}.sbd-cancel__refund-card{border:1px solid #e2e8f0;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:4px}.sbd-cancel__refund-card-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:14px}.sbd-cancel__refund-card-row span{color:#334155;font-weight:600}.sbd-cancel__refund-card-row strong{color:#1e2e4a;font-weight:700;font-variant-numeric:tabular-nums}.sbd-cancel__refund-card-divider{border-top:1px solid #e2e8f0;margin:10px 0}.sbd-cancel__refund-card-divider--dashed{border-top-style:dashed}.sbd-cancel__refund-card-line{display:flex;align-items:center;justify-content:space-between;padding:5px 0;font-size:13px}.sbd-cancel__refund-card-line span:first-child{color:#64748b;display:inline-flex;align-items:center}.sbd-cancel__refund-card-line--neg{color:#64748b;font-weight:600;font-variant-numeric:tabular-nums}.sbd-cancel__refund-card-total{display:flex;align-items:center;justify-content:space-between}.sbd-cancel__refund-card-total span{font-size:14.5px;font-weight:700;color:#1e2e4a}.sbd-cancel__refund-card-total strong{font-size:17px;font-weight:800;color:#1e2e4a;font-variant-numeric:tabular-nums}.sbd-cancel__btn-keep{flex:1 1 0}.sbd-cancel__btn-primary{flex:1 1 0;background:#6d4aff!important;border-color:#6d4aff!important;color:#fff!important}.sbd-cancel__btn-primary:hover:not(:disabled){background:#5c3ce6!important;border-color:#5c3ce6!important}.sbd-cancel__btn-primary:disabled{opacity:.5}.sbd-cancel__paid{display:flex;align-items:center;justify-content:space-between;margin:0 -20px;padding:14px 20px;border-radius:0;background:#f1f0fb;border-top:1px solid #e7e5f7;border-bottom:1px solid #e7e5f7}.sbd-cancel__paid span{font-size:13.5px;font-weight:600;color:#4b4670}.sbd-cancel__paid strong{font-size:18px;font-weight:800;color:#2b2747;font-variant-numeric:tabular-nums;letter-spacing:.01em}.sbd-cancel__group{display:flex;flex-direction:column}.sbd-cancel__group-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px}.sbd-cancel__group-label--deduct{color:#e05656}.sbd-cancel__group-label--refund{color:#16a34a}.sbd-cancel__line{display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-size:13.5px;border-bottom:1px dashed #e5e7eb}.sbd-cancel__line:last-child{border-bottom:none}.sbd-cancel__line-label{display:inline-flex;align-items:center;color:#334155}.sbd-cancel__line-val{font-weight:700;font-variant-numeric:tabular-nums}.sbd-cancel__line-val--neg{color:#dc2626}.sbd-cancel__line-val--pos{color:#16a34a}.sbd-cancel__tag{margin-left:8px;font-size:10px;font-weight:700;line-height:1;padding:3px 8px;border-radius:6px;background:#ede9fe;color:#6d28d9;letter-spacing:.02em}.sbd-cancel__total-deduct{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-radius:10px;background:#fdf2f2;border:1px solid #f6c9c9}.sbd-cancel__total-deduct span{font-size:14px;font-weight:700;color:#b3344a}.sbd-cancel__total-deduct strong{font-size:15px;font-weight:800;color:#dc2626;font-variant-numeric:tabular-nums}.sbd-cancel__calc{display:flex;align-items:center;gap:12px;margin:2px 0;color:#94a3b8;font-size:13px;font-variant-numeric:tabular-nums}.sbd-cancel__calc:before,.sbd-cancel__calc:after{content:\"\";flex:1;height:1px;background:#e5e7eb}.sbd-cancel__refund-total{display:flex;align-items:center;justify-content:space-between}.sbd-cancel__refund-total span{font-size:16px;font-weight:800;color:#1e2e4a}.sbd-cancel__refund-total strong{font-size:26px;font-weight:800;color:#16a34a;font-variant-numeric:tabular-nums;letter-spacing:.01em}.sbd-cancel__formula{text-align:center;padding:14px 16px;border-radius:10px;background:#1f2438;color:#f1f5f9;font-family:SFMono-Regular,ui-monospace,Menlo,Consolas,monospace;font-size:14px;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums}.sbd-cancel__discrepancy{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:8px;font-size:12.5px;line-height:1.45;background:#fffbeb;border:1px solid #fde68a;color:#92400e}.sbd-cancel__discrepancy i{flex-shrink:0;margin-top:1px;font-size:14px;color:#d97706}.sbd-cancel__body{padding:16px 20px;display:flex;flex-direction:column;gap:12px}.sbd-cancel__leg-card{width:100%;border-radius:12px;border:1px solid #e2e8f0;background:#fff;overflow:hidden}.sbd-cancel__leg-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;cursor:pointer}.sbd-cancel__leg-checkbox{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:#1e2e4a;cursor:pointer}.sbd-cancel__leg-checkbox input[type=checkbox]{width:17px;height:17px;accent-color:#6d4aff;cursor:pointer}.sbd-cancel__leg-chevron{flex-shrink:0;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:#64748b;cursor:pointer;transition:transform .15s}.sbd-cancel__leg-chevron i{font-size:13px}.sbd-cancel__leg-chevron--collapsed{transform:rotate(180deg)}.sbd-cancel__leg-card-body{display:flex;flex-direction:column;gap:4px;padding:0 16px 16px}.sbd-cancel__leg-card-body--excluded{opacity:.5}.sbd-cancel__notice{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:8px;font-size:12.5px}.sbd-cancel__notice i{flex-shrink:0;margin-top:1px;font-size:14px}.sbd-cancel__notice p{margin:2px 0 0;font-size:12px;opacity:.8}.sbd-cancel__notice strong{display:block;font-weight:700}.sbd-cancel__notice--warning{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412}.sbd-cancel__notice--warning i{color:#f97316}.sbd-cancel__notice--info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}.sbd-cancel__notice--info i{color:#3b82f6}.sbd-cancel__notice--neutral{background:#f7f7f8;border:1px solid #e5e7eb;color:#111827}.sbd-cancel__notice--neutral i{color:#111827}.sbd-cancel__notice--tip{background:#f0fdf4;border:1px solid #bbf7d0;color:#14532d}.sbd-cancel__notice--tip i{color:#22c55e}.sbd-cancel__notice--success{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803c}.sbd-cancel__notice--success i{color:#16a34a}.sbd-cancel__notice--credit{background:#faf5ff;border:1px solid #e9d5ff;color:#5b21b6;font-size:12px}.sbd-cancel__notice--credit i{color:#a855f7}.sbd-cancel__notice--shield{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}.sbd-cancel__notice--shield strong{display:inline;font-weight:700}.sbd-cancel__notice--shield i{color:#3b82f6}.sbd-cancel__source-selector{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 0}.sbd-cancel__source-label{font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;margin-right:2px}.sbd-cancel__source-chip{font-size:12px;font-weight:600;padding:4px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#f8fafc;color:#475569;cursor:pointer;transition:border-color .15s,color .15s,background .15s;display:inline-flex;align-items:center}.sbd-cancel__source-chip:hover{border-color:#94a3b8;color:#475569;background:#f1f5f9}.sbd-cancel__source-chip--active{background:#eff6ff;color:#1d4ed8;border-color:#93c5fd}.sbd-cancel__source-chip--active:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}.sbd-cancel__source-chip--no-refund{border-color:#fecaca;color:#b91c1c;background:#fff5f5}.sbd-cancel__source-chip--no-refund:hover{border-color:#fca5a5;background:#fee2e2;color:#b91c1c}.sbd-cancel__source-chip--active.sbd-cancel__source-chip--no-refund{background:#fee2e2;color:#991b1b;border-color:#fca5a5}.sbd-cancel__source-chip--active.sbd-cancel__source-chip--no-refund:hover{background:#fecaca}.sbd-cancel__footer{display:flex;justify-content:flex-end;gap:10px;align-items:stretch;padding:14px 20px;border-top:1px solid #e2e8f0;background:#fff}.sbd-cancel__btn-danger-pill{flex:1 1 0;border-radius:999px!important;background:#fee2e2!important;border-color:#fee2e2!important;color:#dc2626!important;font-weight:700!important}.sbd-cancel__btn-danger-pill:hover:not(:disabled){background:#fecaca!important;border-color:#fecaca!important}.sbd-cancel__btn-danger-pill:disabled{opacity:.5}.sbd-cancel__method-header{display:flex;align-items:flex-start;gap:12px;padding:20px 20px 0}.sbd-cancel__method-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-cancel__method-close .pi{font-size:13px}.sbd-cancel__method-close:hover{background:#e2e8f0}.sbd-cancel__method-header-text{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;margin-right:32px}.sbd-cancel__method-title{font-size:19px;font-weight:800;color:#1e2e4a;margin:0}.sbd-cancel__method-sub{font-size:12.5px;color:#94a3b8}.sbd-cancel__method-body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:14px}.sbd-cancel__select-leg-body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:12px}.sbd-cancel__leg-select-card{position:relative;border:1.5px solid #e2e8f0;border-radius:16px;padding:16px 16px 16px 48px;transition:border-color .15s}.sbd-cancel__leg-select-card--selected:not(.sbd-cancel__leg-select-card--frozen){border-color:#6d4aff}.sbd-cancel__leg-select-card--disabled{opacity:.7}.sbd-cancel__leg-select-card--frozen{opacity:.6;border-color:#e2e8f0}.sbd-cancel__leg-select-lock{position:absolute;top:16px;left:16px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#94a3b8}.sbd-cancel__single-leg-note{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;background:#eaf2ff;border:1px solid #b9d6ff;color:#1a5fd6;font-size:13px;line-height:1.5}.sbd-cancel__single-leg-note i{flex-shrink:0;margin-top:1px}.sbd-cancel__all-non-refundable-note{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;background:#fdf3e3;border:1px solid #f3d9a4;color:#8a5a1e;font-size:13px;line-height:1.5}.sbd-cancel__all-non-refundable-note i{flex-shrink:0;margin-top:1px;color:#b98a3e}.sbd-cancel__leg-select-checkbox{position:absolute;top:16px;left:16px;width:22px;height:22px;cursor:pointer}.sbd-cancel__leg-select-checkbox input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}.sbd-cancel__leg-select-checkbox input:disabled{cursor:not-allowed}.sbd-cancel__leg-select-icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;border:1.5px solid #cbd5e1;background:#fff;color:#fff;font-size:12px}input:checked+.sbd-cancel__leg-select-icon{background:#6d4aff;border-color:#6d4aff}input:disabled+.sbd-cancel__leg-select-icon{background:#f1f5f9;border-color:#e2e8f0}.sbd-cancel__leg-select-content{display:flex;flex-direction:column;gap:8px}.sbd-cancel__leg-select-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.sbd-cancel__leg-select-name{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-cancel__leg-select-date{font-size:13px;color:#64748b;margin-top:2px}.sbd-cancel__leg-select-times{display:flex;align-items:center;gap:8px}.sbd-cancel__leg-select-time{font-size:18px;font-weight:700;color:#1e2e4a;font-variant-numeric:tabular-nums}.sbd-cancel__leg-select-line{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 16px 0 8px}.sbd-cancel__leg-select-line:before{content:\"\";position:absolute;left:0;right:14px;top:50%;height:2px;background:#cbd5e1;z-index:1}.sbd-cancel__leg-select-line-stops{font-size:12px;color:#64748b}.sbd-cancel__leg-select-line-dur{font-size:11px;color:#94a3b8}.sbd-cancel__leg-select-line-arrow{position:absolute;right:4px;top:51%;transform:translateY(-50%);font-size:11px;color:#64748b}.sbd-cancel__leg-select-footer{display:flex;align-items:center;gap:8px}.sbd-cancel__leg-select-airline{font-size:12.5px;color:#64748b}.sbd-cancel__leg-select-operated-by{font-size:12px;color:#94a3b8}.sbd-cancel__leg-select-chevron{font-size:12px;color:#94a3b8;margin-inline-start:auto}.sbd-cancel__leg-select-hint{text-align:center;padding:8px 20px 0;font-size:13px;color:#94a3b8}.sbd-cancel__leg-select-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-cancel__leg-select-notice i{flex-shrink:0;margin-top:1px;color:#b98a3e}.sbd-cancel__method-amount{display:flex;align-items:center;justify-content:space-between}.sbd-cancel__method-amount span{font-size:14px;color:#1e2e4a}.sbd-cancel__method-amount strong{font-size:22px;font-weight:800;color:#1e2e4a;font-variant-numeric:tabular-nums}.sbd-cancel__method-option{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:16px;border-radius:16px;border:1.5px solid #e2e8f0;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s}.sbd-cancel__method-option--active{border-color:#6d4aff;box-shadow:0 0 0 1px #6d4aff}.sbd-cancel__method-option:disabled{opacity:.5;cursor:not-allowed}.sbd-cancel__method-icon{flex-shrink:0;width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;border:1px solid #e2e8f0;color:#1e2e4a}.sbd-cancel__method-icon .pi{font-size:16px}.sbd-cancel__method-body-text{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.sbd-cancel__method-name{font-size:16px;font-weight:700;color:#1e2e4a;display:inline-flex;align-items:center;gap:6px}.sbd-cancel__method-desc{font-size:13px;color:#64748b}.sbd-cancel__method-badge{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:4px 10px;border-radius:20px}.sbd-cancel__method-badge svg{flex-shrink:0}.sbd-cancel__method-badge--instant{background:#dcfce7;color:#166534}.sbd-cancel__method-badge--days,.sbd-cancel__method-badge--loyalty{background:#eff6ff;color:#1e40af}.sbd-cancel__option-end{flex-shrink:0;display:flex;align-items:center;gap:8px}.sbd-cancel__method-radio{flex-shrink:0;width:18px;height:18px;margin-top:2px;border-radius:50%;border:2px solid #7c3aed;position:relative}.sbd-cancel__method-option--active .sbd-cancel__method-radio{border-color:#6d4aff}.sbd-cancel__method-option--active .sbd-cancel__method-radio:after{content:\"\";position:absolute;inset:3px;border-radius:50%;background:#6d4aff}.sbd-cancel__method-option--split{flex-wrap:wrap}.sbd-cancel__method-split-total{flex-shrink:0;font-size:16px;font-weight:700;color:#1e2e4a;font-variant-numeric:tabular-nums}.sbd-cancel__method-split-breakdown{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:12px;padding-top:12px;border-top:1px solid #e2e8f0}.sbd-cancel__method-split-row{flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;font-size:14px;color:#1e2e4a}.sbd-cancel__method-split-row strong{font-weight:700;font-variant-numeric:tabular-nums}.sbd-cancel__method-split-label{color:#64748b;display:inline-flex;align-items:center;gap:6px}.sbd-cancel__mada-logo{display:inline-flex;align-items:center;flex-shrink:0}.sbd-cancel__mada-logo svg{display:block}.sbd-cancel__result-hero{display:flex;flex-direction:column;align-items:center;gap:18px;padding:28px 0 8px}.sbd-cancel__result-icon{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center}.sbd-cancel__result-icon .pi{font-size:30px;color:#fff}.sbd-cancel__result-icon--green{background:#4ade80}.sbd-cancel__result-icon--orange{background:#fb923c}.sbd-cancel__result-title{font-size:19px;font-weight:800;color:#1e2e4a;margin:0;text-align:center}.sbd-cancel__result-row{display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px 14px;border-radius:14px;background:#f8fafc}.sbd-cancel__result-body-text{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}.sbd-cancel__result-body-text .sbd-cancel__method-badge{text-transform:none;letter-spacing:normal;line-height:1.35;white-space:normal}.sbd-cancel__result-sub-rows{display:flex;flex-direction:column;gap:2px;width:100%}.sbd-cancel__result-sub-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;font-size:12.5px;color:#64748b}.sbd-cancel__result-sub-row strong{font-weight:700;color:#64748b;font-variant-numeric:tabular-nums}.sbd-cancel__result-amount{font-size:16px;font-weight:800;color:#1e2e4a;font-variant-numeric:tabular-nums;white-space:nowrap}.sbd-cancel__result-overlay{position:absolute;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}.sbd-cancel__result-backdrop{position:absolute;inset:0;background:#0000008c}.sbd-cancel__result-modal{position:relative;width:100%;max-width:400px;max-height:90%;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding:24px 20px;border-radius:20px;background:#fff;box-shadow:0 24px 60px #00000059}.sbd-cancel__result-done{width:100%}\n"] }]
+        }], ctorParameters: () => [] });
+
+class SbdFlightItineraryCardComponent {
+    constructor() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.data = input(null);
+        this.product = input.required();
+        this.verified = input(false);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.bi = computed(() => this.data()?.data?.booking_info);
+        this.legs = computed(() => {
+            const d = this.bi();
+            if (!d)
+                return [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return (d.leg_info ?? []).map((leg, i) => ({
+                direction: leg.LegDirectionality,
+                airlineName: (leg.LegAirlinesNames ?? []).join(', '),
+                cabin: leg.LegCabins?.[0]?.Name ?? '',
+                fareBrand: leg.fareBrand?.name ?? '',
+                from: leg.LegDepartureAirportCode,
+                to: leg.LegArrivalAirportCode,
+                depTime: leg.LegDepartureDateTime,
+                arrTime: leg.LegArrivalDateTime,
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                stops: (leg.Stops ?? []),
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                segments: (d.airline_info?.[i]?.Segments ?? []),
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                durationSegments: (d.duration?.legs?.[i]?.Segments ?? []),
+            }));
+        });
+        this.passengers = computed(() => 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (this.bi()?.passenger_info?.passengers ?? []));
+        this.payment = computed(() => this.bi()?.payment_status);
+        this.typeLabel = { ADT: 'Adult', CNN: 'Child', INF: 'Infant' };
+    }
+    fmtTime(dt) {
+        if (!dt)
+            return '—';
+        try {
+            return new Date(dt).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
+        }
+        catch {
+            return dt;
+        }
+    }
+    fmtShortDate(dt) {
+        if (!dt)
+            return '—';
+        try {
+            return new Date(dt).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' });
+        }
+        catch {
+            return dt;
+        }
+    }
+    fmtMins(mins) {
+        if (mins == null)
+            return '—';
+        return `${Math.floor(mins / 60)}h ${mins % 60}m`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdFlightItineraryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdFlightItineraryCardComponent, isStandalone: true, selector: "app-sbd-flight-itinerary-card", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: true, transformFunction: null }, verified: { classPropertyName: "verified", publicName: "verified", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"fic\">\n  @if (product() === 'flight') {\n\n    <!-- \u2500\u2500 Verified pill \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (verified()) {\n      <div class=\"fic__verified-bar\">\n        <span class=\"fic__verified-pill\">\n          <i class=\"pi pi-verified\"></i> Verified with Airlines\n        </span>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Legs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @for (leg of legs(); track leg.direction + $index; let li = $index) {\n      <div class=\"fic__leg\" [class.fic__leg--return]=\"leg.direction === 'Return'\">\n\n        <!-- Leg header -->\n        <div class=\"fic__leg-header\">\n          <div class=\"fic__leg-direction\">\n            <i class=\"pi\" [class.pi-arrow-right]=\"leg.direction !== 'Return'\" [class.pi-arrow-left]=\"leg.direction === 'Return'\"></i>\n            <span>{{ leg.direction }}</span>\n          </div>\n          <div class=\"fic__leg-chips\">\n            @if (leg.cabin) {\n              <span class=\"fic__chip fic__chip--cabin\">{{ leg.cabin }}</span>\n            }\n            @if (leg.fareBrand) {\n              <span class=\"fic__chip fic__chip--fare\">{{ leg.fareBrand }}</span>\n            }\n          </div>\n        </div>\n\n        <!-- Airline row -->\n        @if (leg.airlineName) {\n          <div class=\"fic__airline\">\n            <i class=\"pi pi-send\"></i>\n            <span>{{ leg.airlineName }}</span>\n          </div>\n        }\n\n        <!-- Route timeline -->\n        <div class=\"fic__route\">\n\n          <!-- Origin -->\n          <div class=\"fic__airport\">\n            <div class=\"fic__airport-code\">{{ leg.from }}</div>\n            <div class=\"fic__airport-time\">{{ fmtTime(leg.depTime) }}</div>\n            <div class=\"fic__airport-date\">{{ fmtShortDate(leg.depTime) }}</div>\n          </div>\n\n          <!-- Segments + stops -->\n          <div class=\"fic__timeline\">\n\n            <!-- Top row: all labels -->\n            <div class=\"fic__tl-top\">\n              @for (seg of leg.durationSegments; track seg.DepartureAirportCode; let si = $index) {\n                <div class=\"fic__tl-seg\">\n                  <span class=\"fic__tl-flt\">{{ leg.segments[si]?.AirlineCode }}{{ leg.segments[si]?.FlightNumber }}</span>\n                  <span class=\"fic__tl-dur\">{{ fmtMins(seg.SegmentElapsedTimeMinutes) }}</span>\n                </div>\n                @if (si < leg.stops.length) {\n                  <div class=\"fic__tl-stop\">\n                    <span class=\"fic__stop-dot\"></span>\n                    <span class=\"fic__stop-code\">{{ leg.stops[si].StopAirport }}</span>\n                    <span class=\"fic__stop-sep\">\u00B7</span>\n                    <span class=\"fic__stop-dur\">{{ fmtMins(leg.stops[si].LayoverDuration) }}</span>\n                  </div>\n                }\n              }\n            </div>\n\n            <!-- Bottom row: single continuous line + one arrow -->\n            <div class=\"fic__tl-track\">\n              <div class=\"fic__tl-line\"></div>\n              <i class=\"pi pi-send fic__tl-plane\"></i>\n            </div>\n\n          </div>\n\n          <!-- Destination -->\n          <div class=\"fic__airport fic__airport--right\">\n            <div class=\"fic__airport-code\">{{ leg.to }}</div>\n            <div class=\"fic__airport-time\">{{ fmtTime(leg.arrTime) }}</div>\n            <div class=\"fic__airport-date\">{{ fmtShortDate(leg.arrTime) }}</div>\n          </div>\n\n        </div>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Passengers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (passengers().length > 0) {\n      <div class=\"fic__section\">\n        <div class=\"fic__section-label\">\n          <i class=\"pi pi-users\"></i> Passengers\n          <span class=\"fic__section-count\">{{ passengers().length }}</span>\n        </div>\n        <div class=\"fic__pax-list\">\n          @for (p of passengers(); track p.passengerId) {\n            <div class=\"fic__pax\">\n              <div class=\"fic__pax-top\">\n                <span class=\"fic__pax-badge fic__pax-badge--{{ p.type | lowercase }}\">{{ typeLabel[p.type] ?? p.type }}</span>\n                <span class=\"fic__pax-name\">{{ p.name?.prefix }} {{ p.name?.givenName }} {{ p.name?.surName }}</span>\n              </div>\n              <div class=\"fic__pax-bottom\">\n                @if (p.identity?.number) {\n                  <span class=\"fic__pax-doc\"><i class=\"pi pi-id-card\"></i> {{ p.identity?.number }}</span>\n                }\n                @if (p.email) {\n                  <span class=\"fic__pax-email\">{{ p.email }}</span>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Payment \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (payment()) {\n      <div class=\"fic__payment\">\n        <div class=\"fic__payment-main\">\n          <i class=\"pi pi-credit-card fic__payment-icon\"></i>\n          <span class=\"fic__payment-amount\">{{ payment()?.amount }} {{ payment()?.currency }}</span>\n          <span class=\"fic__payment-status\" [class.fic__payment-status--ok]=\"payment()?.status?.key === 'SUCCESS'\">\n            <i class=\"pi\" [class.pi-check-circle]=\"payment()?.status?.key === 'SUCCESS'\" [class.pi-clock]=\"payment()?.status?.key !== 'SUCCESS'\"></i>\n            {{ payment()?.status?.name }}\n          </span>\n        </div>\n        @if (payment()?.method || payment()?.date) {\n          <div class=\"fic__payment-sub\">\n            @if (payment()?.method) { <span>{{ payment()?.method }}</span> }\n            @if (payment()?.method && payment()?.date) { <span class=\"fic__dot\">\u00B7</span> }\n            @if (payment()?.date) { <span>{{ payment()?.date }}</span> }\n          </div>\n        }\n      </div>\n    }\n\n\n  }\n</div>\n", styles: [".fic{background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;font-family:inherit}.fic__leg{padding:16px 16px 18px;border-bottom:1px solid #e2e8f0}.fic__leg--return{background:#fafbff}.fic__leg-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.fic__leg-direction{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#1e2e4a}.fic__leg-direction .pi{font-size:10px;color:#475569}.fic__leg-chips{display:flex;gap:5px}.fic__chip{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:12px;letter-spacing:.02em}.fic__chip--cabin{background:#eff6ff;color:#1d4ed8}.fic__chip--fare{background:#fef9c3;color:#854d0e}.fic__airline{display:flex;align-items:center;gap:5px;font-size:12px;color:#64748b;margin-bottom:14px}.fic__airline .pi{font-size:11px;color:#94a3b8;transform:rotate(45deg)}.fic__route{display:flex;align-items:flex-start;gap:0}.fic__airport{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0}.fic__airport--right{align-items:flex-end}.fic__airport-code{font-size:26px;font-weight:800;color:#1e2e4a;line-height:1}.fic__airport-time{font-size:13px;font-weight:600;color:#334155;margin-top:3px}.fic__airport-date{font-size:10.5px;color:#94a3b8;margin-top:1px}.fic__timeline{flex:1;display:flex;flex-direction:column;gap:4px;margin:0 4px}.fic__tl-top{display:flex;align-items:flex-end;gap:0}.fic__tl-seg{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px}.fic__tl-flt{font-size:10px;font-weight:700;color:#1e2e4a;background:#f1f5f9;padding:1px 5px;border-radius:4px;white-space:nowrap}.fic__tl-dur{font-size:9.5px;color:#94a3b8;white-space:nowrap}.fic__tl-stop{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;padding:0 8px 1px}.fic__tl-track{display:flex;align-items:center;height:22px}.fic__tl-line{flex:1;height:2px;background:#cbd5e1}.fic__tl-plane{font-size:13px;color:#475569;transform:rotate(45deg);flex-shrink:0;margin-left:-2px}.fic__stop-dot{width:7px;height:7px;border-radius:50%;background:#94a3b8;flex-shrink:0}.fic__stop-code{font-size:11px;font-weight:700;color:#334155}.fic__stop-sep{font-size:11px;color:#cbd5e1}.fic__stop-dur{font-size:11px;font-weight:600;color:#f59e0b}.fic__section{padding:14px 16px;border-bottom:1px solid #e2e8f0}.fic__section-label{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#64748b;margin-bottom:10px}.fic__section-label .pi{font-size:11px}.fic__section-count{margin-left:auto;background:#f1f5f9;color:#475569;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px}.fic__pax-list{display:flex;flex-direction:column;gap:8px}.fic__pax{background:#f8fafc;border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:5px}.fic__pax-top{display:flex;align-items:center;gap:7px}.fic__pax-badge{font-size:9.5px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:10px;flex-shrink:0;text-transform:uppercase}.fic__pax-badge--adt{background:#dbeafe;color:#1d4ed8}.fic__pax-badge--cnn{background:#dcfce7;color:#15803d}.fic__pax-badge--inf{background:#fce7f3;color:#9d174d}.fic__pax-name{font-size:12.5px;font-weight:600;color:#1e2e4a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fic__pax-bottom{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.fic__pax-doc{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-family:monospace;color:#475569;background:#f1f5f9;padding:1px 6px;border-radius:4px}.fic__pax-doc .pi{font-size:10px}.fic__pax-email{font-size:11px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.fic__payment{padding:12px 16px;background:#f8fafc;display:flex;flex-direction:column;gap:4px}.fic__payment-main{display:flex;align-items:center;gap:8px}.fic__payment-icon{font-size:14px;color:#64748b}.fic__payment-amount{font-size:14px;font-weight:700;color:#1e2e4a}.fic__payment-status{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:#64748b;margin-left:auto}.fic__payment-status .pi{font-size:12px}.fic__payment-status--ok{color:#16a34a}.fic__payment-sub{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#94a3b8;padding-left:22px}.fic__dot{color:#cbd5e1}.fic__verified-bar{display:flex;align-items:center;padding:8px 12px;background:#f0fdf4;border-bottom:1px solid #bbf7d0}.fic__verified-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 7px;background:#16a34a;color:#fff;font-size:11px;font-weight:700;border-radius:20px;letter-spacing:.02em}.fic__verified-pill .pi{font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdFlightItineraryCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-flight-itinerary-card', standalone: true, imports: [TagModule, UpperCasePipe, LowerCasePipe], template: "<div class=\"fic\">\n  @if (product() === 'flight') {\n\n    <!-- \u2500\u2500 Verified pill \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (verified()) {\n      <div class=\"fic__verified-bar\">\n        <span class=\"fic__verified-pill\">\n          <i class=\"pi pi-verified\"></i> Verified with Airlines\n        </span>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Legs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @for (leg of legs(); track leg.direction + $index; let li = $index) {\n      <div class=\"fic__leg\" [class.fic__leg--return]=\"leg.direction === 'Return'\">\n\n        <!-- Leg header -->\n        <div class=\"fic__leg-header\">\n          <div class=\"fic__leg-direction\">\n            <i class=\"pi\" [class.pi-arrow-right]=\"leg.direction !== 'Return'\" [class.pi-arrow-left]=\"leg.direction === 'Return'\"></i>\n            <span>{{ leg.direction }}</span>\n          </div>\n          <div class=\"fic__leg-chips\">\n            @if (leg.cabin) {\n              <span class=\"fic__chip fic__chip--cabin\">{{ leg.cabin }}</span>\n            }\n            @if (leg.fareBrand) {\n              <span class=\"fic__chip fic__chip--fare\">{{ leg.fareBrand }}</span>\n            }\n          </div>\n        </div>\n\n        <!-- Airline row -->\n        @if (leg.airlineName) {\n          <div class=\"fic__airline\">\n            <i class=\"pi pi-send\"></i>\n            <span>{{ leg.airlineName }}</span>\n          </div>\n        }\n\n        <!-- Route timeline -->\n        <div class=\"fic__route\">\n\n          <!-- Origin -->\n          <div class=\"fic__airport\">\n            <div class=\"fic__airport-code\">{{ leg.from }}</div>\n            <div class=\"fic__airport-time\">{{ fmtTime(leg.depTime) }}</div>\n            <div class=\"fic__airport-date\">{{ fmtShortDate(leg.depTime) }}</div>\n          </div>\n\n          <!-- Segments + stops -->\n          <div class=\"fic__timeline\">\n\n            <!-- Top row: all labels -->\n            <div class=\"fic__tl-top\">\n              @for (seg of leg.durationSegments; track seg.DepartureAirportCode; let si = $index) {\n                <div class=\"fic__tl-seg\">\n                  <span class=\"fic__tl-flt\">{{ leg.segments[si]?.AirlineCode }}{{ leg.segments[si]?.FlightNumber }}</span>\n                  <span class=\"fic__tl-dur\">{{ fmtMins(seg.SegmentElapsedTimeMinutes) }}</span>\n                </div>\n                @if (si < leg.stops.length) {\n                  <div class=\"fic__tl-stop\">\n                    <span class=\"fic__stop-dot\"></span>\n                    <span class=\"fic__stop-code\">{{ leg.stops[si].StopAirport }}</span>\n                    <span class=\"fic__stop-sep\">\u00B7</span>\n                    <span class=\"fic__stop-dur\">{{ fmtMins(leg.stops[si].LayoverDuration) }}</span>\n                  </div>\n                }\n              }\n            </div>\n\n            <!-- Bottom row: single continuous line + one arrow -->\n            <div class=\"fic__tl-track\">\n              <div class=\"fic__tl-line\"></div>\n              <i class=\"pi pi-send fic__tl-plane\"></i>\n            </div>\n\n          </div>\n\n          <!-- Destination -->\n          <div class=\"fic__airport fic__airport--right\">\n            <div class=\"fic__airport-code\">{{ leg.to }}</div>\n            <div class=\"fic__airport-time\">{{ fmtTime(leg.arrTime) }}</div>\n            <div class=\"fic__airport-date\">{{ fmtShortDate(leg.arrTime) }}</div>\n          </div>\n\n        </div>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Passengers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (passengers().length > 0) {\n      <div class=\"fic__section\">\n        <div class=\"fic__section-label\">\n          <i class=\"pi pi-users\"></i> Passengers\n          <span class=\"fic__section-count\">{{ passengers().length }}</span>\n        </div>\n        <div class=\"fic__pax-list\">\n          @for (p of passengers(); track p.passengerId) {\n            <div class=\"fic__pax\">\n              <div class=\"fic__pax-top\">\n                <span class=\"fic__pax-badge fic__pax-badge--{{ p.type | lowercase }}\">{{ typeLabel[p.type] ?? p.type }}</span>\n                <span class=\"fic__pax-name\">{{ p.name?.prefix }} {{ p.name?.givenName }} {{ p.name?.surName }}</span>\n              </div>\n              <div class=\"fic__pax-bottom\">\n                @if (p.identity?.number) {\n                  <span class=\"fic__pax-doc\"><i class=\"pi pi-id-card\"></i> {{ p.identity?.number }}</span>\n                }\n                @if (p.email) {\n                  <span class=\"fic__pax-email\">{{ p.email }}</span>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Payment \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (payment()) {\n      <div class=\"fic__payment\">\n        <div class=\"fic__payment-main\">\n          <i class=\"pi pi-credit-card fic__payment-icon\"></i>\n          <span class=\"fic__payment-amount\">{{ payment()?.amount }} {{ payment()?.currency }}</span>\n          <span class=\"fic__payment-status\" [class.fic__payment-status--ok]=\"payment()?.status?.key === 'SUCCESS'\">\n            <i class=\"pi\" [class.pi-check-circle]=\"payment()?.status?.key === 'SUCCESS'\" [class.pi-clock]=\"payment()?.status?.key !== 'SUCCESS'\"></i>\n            {{ payment()?.status?.name }}\n          </span>\n        </div>\n        @if (payment()?.method || payment()?.date) {\n          <div class=\"fic__payment-sub\">\n            @if (payment()?.method) { <span>{{ payment()?.method }}</span> }\n            @if (payment()?.method && payment()?.date) { <span class=\"fic__dot\">\u00B7</span> }\n            @if (payment()?.date) { <span>{{ payment()?.date }}</span> }\n          </div>\n        }\n      </div>\n    }\n\n\n  }\n</div>\n", styles: [".fic{background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;font-family:inherit}.fic__leg{padding:16px 16px 18px;border-bottom:1px solid #e2e8f0}.fic__leg--return{background:#fafbff}.fic__leg-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.fic__leg-direction{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#1e2e4a}.fic__leg-direction .pi{font-size:10px;color:#475569}.fic__leg-chips{display:flex;gap:5px}.fic__chip{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:12px;letter-spacing:.02em}.fic__chip--cabin{background:#eff6ff;color:#1d4ed8}.fic__chip--fare{background:#fef9c3;color:#854d0e}.fic__airline{display:flex;align-items:center;gap:5px;font-size:12px;color:#64748b;margin-bottom:14px}.fic__airline .pi{font-size:11px;color:#94a3b8;transform:rotate(45deg)}.fic__route{display:flex;align-items:flex-start;gap:0}.fic__airport{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0}.fic__airport--right{align-items:flex-end}.fic__airport-code{font-size:26px;font-weight:800;color:#1e2e4a;line-height:1}.fic__airport-time{font-size:13px;font-weight:600;color:#334155;margin-top:3px}.fic__airport-date{font-size:10.5px;color:#94a3b8;margin-top:1px}.fic__timeline{flex:1;display:flex;flex-direction:column;gap:4px;margin:0 4px}.fic__tl-top{display:flex;align-items:flex-end;gap:0}.fic__tl-seg{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px}.fic__tl-flt{font-size:10px;font-weight:700;color:#1e2e4a;background:#f1f5f9;padding:1px 5px;border-radius:4px;white-space:nowrap}.fic__tl-dur{font-size:9.5px;color:#94a3b8;white-space:nowrap}.fic__tl-stop{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;padding:0 8px 1px}.fic__tl-track{display:flex;align-items:center;height:22px}.fic__tl-line{flex:1;height:2px;background:#cbd5e1}.fic__tl-plane{font-size:13px;color:#475569;transform:rotate(45deg);flex-shrink:0;margin-left:-2px}.fic__stop-dot{width:7px;height:7px;border-radius:50%;background:#94a3b8;flex-shrink:0}.fic__stop-code{font-size:11px;font-weight:700;color:#334155}.fic__stop-sep{font-size:11px;color:#cbd5e1}.fic__stop-dur{font-size:11px;font-weight:600;color:#f59e0b}.fic__section{padding:14px 16px;border-bottom:1px solid #e2e8f0}.fic__section-label{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#64748b;margin-bottom:10px}.fic__section-label .pi{font-size:11px}.fic__section-count{margin-left:auto;background:#f1f5f9;color:#475569;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px}.fic__pax-list{display:flex;flex-direction:column;gap:8px}.fic__pax{background:#f8fafc;border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:5px}.fic__pax-top{display:flex;align-items:center;gap:7px}.fic__pax-badge{font-size:9.5px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:10px;flex-shrink:0;text-transform:uppercase}.fic__pax-badge--adt{background:#dbeafe;color:#1d4ed8}.fic__pax-badge--cnn{background:#dcfce7;color:#15803d}.fic__pax-badge--inf{background:#fce7f3;color:#9d174d}.fic__pax-name{font-size:12.5px;font-weight:600;color:#1e2e4a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fic__pax-bottom{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.fic__pax-doc{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-family:monospace;color:#475569;background:#f1f5f9;padding:1px 6px;border-radius:4px}.fic__pax-doc .pi{font-size:10px}.fic__pax-email{font-size:11px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.fic__payment{padding:12px 16px;background:#f8fafc;display:flex;flex-direction:column;gap:4px}.fic__payment-main{display:flex;align-items:center;gap:8px}.fic__payment-icon{font-size:14px;color:#64748b}.fic__payment-amount{font-size:14px;font-weight:700;color:#1e2e4a}.fic__payment-status{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:#64748b;margin-left:auto}.fic__payment-status .pi{font-size:12px}.fic__payment-status--ok{color:#16a34a}.fic__payment-sub{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#94a3b8;padding-left:22px}.fic__dot{color:#cbd5e1}.fic__verified-bar{display:flex;align-items:center;padding:8px 12px;background:#f0fdf4;border-bottom:1px solid #bbf7d0}.fic__verified-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 7px;background:#16a34a;color:#fff;font-size:11px;font-weight:700;border-radius:20px;letter-spacing:.02em}.fic__verified-pill .pi{font-size:12px}\n"] }]
+        }] });
+
+class SbdDataSearchComponent {
+    constructor() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.data = input(null);
+        this.query = signal('');
+        this.allEntries = computed(() => {
+            const d = this.data()?.data?.booking_info;
+            if (!d)
+                return [];
+            return this.flatten(d);
+        });
+        this.results = computed(() => {
+            const q = this.query().trim().toLowerCase();
+            if (q.length < 2)
+                return [];
+            return this.allEntries()
+                .filter(e => e.key.toLowerCase().includes(q) ||
+                e.rawValue.toLowerCase().includes(q) ||
+                e.displayValue.toLowerCase().includes(q))
+                .slice(0, 50);
+        });
+        this.totalCount = computed(() => {
+            const q = this.query().trim().toLowerCase();
+            if (q.length < 2)
+                return 0;
+            return this.allEntries().filter(e => e.key.toLowerCase().includes(q) ||
+                e.rawValue.toLowerCase().includes(q) ||
+                e.displayValue.toLowerCase().includes(q)).length;
+        });
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    flatten(obj, pathParts = []) {
+        if (obj === null || obj === undefined)
+            return [];
+        if (typeof obj !== 'object') {
+            const raw = String(obj);
+            const key = pathParts[pathParts.length - 1] ?? '';
+            const { display, type } = this.formatEntry(key, raw);
+            return [{ path: pathParts.slice(0, -1).join(' › '), key, rawValue: raw, displayValue: display, type }];
+        }
+        if (Array.isArray(obj)) {
+            return obj.flatMap((item, i) => this.flatten(item, [...pathParts, `[${i}]`]));
+        }
+        return Object.entries(obj).flatMap(([k, v]) => this.flatten(v, [...pathParts, k]));
+    }
+    formatEntry(key, raw) {
+        if (/minutes|duration/i.test(key)) {
+            const n = Number(raw);
+            if (!isNaN(n) && raw !== '') {
+                return { display: `${Math.floor(n / 60)}h ${n % 60}m`, type: 'duration' };
+            }
+        }
+        if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(raw)) {
+            try {
+                return { display: new Date(raw).toLocaleString('en-GB', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' }), type: 'date' };
+            }
+            catch { /* fall through */ }
+        }
+        if (/^\d{4}-\d{2}-\d{2}$/.test(raw)) {
+            try {
+                return { display: new Date(raw + 'T00:00:00').toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }), type: 'date' };
+            }
+            catch { /* fall through */ }
+        }
+        if (raw === 'true' || raw === 'false')
+            return { display: raw, type: 'bool' };
+        if (raw !== '' && !isNaN(Number(raw)))
+            return { display: raw, type: 'number' };
+        return { display: raw, type: 'text' };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdDataSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdDataSearchComponent, isStandalone: true, selector: "app-sbd-data-search", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"sbd-data-search\">\n  <div class=\"sbd-data-search__input-wrap\">\n    <i class=\"pi pi-search sbd-data-search__icon\"></i>\n    <input pInputText class=\"sbd-data-search__input\"\n      placeholder=\"Search any field or value from this booking\u2026\"\n      [ngModel]=\"query()\" (ngModelChange)=\"query.set($event)\" />\n    @if (query().length >= 2) {\n      <span class=\"sbd-data-search__count\">{{ totalCount() }} match{{ totalCount() !== 1 ? 'es' : '' }}</span>\n    }\n  </div>\n\n  @if (query().length >= 2 && results().length > 0) {\n    <div class=\"sbd-data-search__results\">\n      @for (entry of results(); track entry.path + entry.key) {\n        <div class=\"sbd-data-search__result\">\n          <div class=\"sbd-data-search__result-left\">\n            <div class=\"sbd-data-search__result-path\">\n              @if (entry.path) { <span class=\"sbd-data-search__result-pathtext\">{{ entry.path }} \u203A</span> }\n              <span class=\"sbd-data-search__result-key\">{{ entry.key }}</span>\n            </div>\n          </div>\n          <div class=\"sbd-data-search__result-right\">\n            <span class=\"sbd-data-search__type-badge sbd-data-search__type-badge--{{ entry.type }}\">{{ entry.type }}</span>\n            <span class=\"sbd-data-search__result-value\">{{ entry.displayValue }}</span>\n          </div>\n        </div>\n      }\n      @if (totalCount() > 50) {\n        <div class=\"sbd-data-search__more\">+{{ totalCount() - 50 }} more \u2014 refine your search</div>\n      }\n    </div>\n  }\n\n  @if (query().length >= 2 && results().length === 0) {\n    <div class=\"sbd-data-search__empty\">\n      <i class=\"pi pi-inbox\"></i> No fields or values match \"{{ query() }}\"\n    </div>\n  }\n</div>\n", styles: [".sbd-data-search{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.sbd-data-search__input-wrap{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid transparent;transition:border-color .15s}.sbd-data-search__input-wrap:focus-within{border-bottom-color:#e2e8f0}.sbd-data-search__icon{color:#94a3b8;font-size:15px;flex-shrink:0}.sbd-data-search__input{flex:1;border:none!important;outline:none!important;box-shadow:none!important;padding:0!important;font-size:14px;background:transparent!important;color:#1e2e4a}.sbd-data-search__input::placeholder{color:#94a3b8}.sbd-data-search__count{font-size:12px;font-weight:600;color:#6366f1;background:#eef2ff;padding:2px 8px;border-radius:10px;white-space:nowrap}.sbd-data-search__results{max-height:320px;overflow-y:auto}.sbd-data-search__result{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 16px;border-bottom:1px solid #f1f5f9;cursor:default;transition:background .1s}.sbd-data-search__result:last-child{border-bottom:none}.sbd-data-search__result:hover{background:#f8fafc}.sbd-data-search__result-left{min-width:0;flex:1;overflow:hidden}.sbd-data-search__result-right{display:flex;align-items:center;gap:8px;flex-shrink:0;max-width:55%}.sbd-data-search__result-path{font-size:11px;color:#94a3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sbd-data-search__result-pathtext{color:#cbd5e1}.sbd-data-search__result-key{font-weight:600;color:#475569}.sbd-data-search__result-value{font-size:13px;font-weight:600;color:#1e2e4a;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:monospace}.sbd-data-search__type-badge{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:4px;white-space:nowrap;flex-shrink:0}.sbd-data-search__type-badge--date{background:#eff6ff;color:#3b82f6}.sbd-data-search__type-badge--duration{background:#fff7ed;color:#f97316}.sbd-data-search__type-badge--bool{background:#f0fdf4;color:#22c55e}.sbd-data-search__type-badge--number{background:#faf5ff;color:#a855f7}.sbd-data-search__type-badge--text{background:#f8fafc;color:#64748b}.sbd-data-search__more{padding:10px 16px;font-size:12px;color:#94a3b8;text-align:center;font-style:italic}.sbd-data-search__empty{display:flex;align-items:center;gap:8px;padding:16px;font-size:13px;color:#94a3b8}.sbd-data-search__empty .pi{font-size:16px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: 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: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdDataSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-data-search', standalone: true, imports: [FormsModule, InputTextModule], template: "<div class=\"sbd-data-search\">\n  <div class=\"sbd-data-search__input-wrap\">\n    <i class=\"pi pi-search sbd-data-search__icon\"></i>\n    <input pInputText class=\"sbd-data-search__input\"\n      placeholder=\"Search any field or value from this booking\u2026\"\n      [ngModel]=\"query()\" (ngModelChange)=\"query.set($event)\" />\n    @if (query().length >= 2) {\n      <span class=\"sbd-data-search__count\">{{ totalCount() }} match{{ totalCount() !== 1 ? 'es' : '' }}</span>\n    }\n  </div>\n\n  @if (query().length >= 2 && results().length > 0) {\n    <div class=\"sbd-data-search__results\">\n      @for (entry of results(); track entry.path + entry.key) {\n        <div class=\"sbd-data-search__result\">\n          <div class=\"sbd-data-search__result-left\">\n            <div class=\"sbd-data-search__result-path\">\n              @if (entry.path) { <span class=\"sbd-data-search__result-pathtext\">{{ entry.path }} \u203A</span> }\n              <span class=\"sbd-data-search__result-key\">{{ entry.key }}</span>\n            </div>\n          </div>\n          <div class=\"sbd-data-search__result-right\">\n            <span class=\"sbd-data-search__type-badge sbd-data-search__type-badge--{{ entry.type }}\">{{ entry.type }}</span>\n            <span class=\"sbd-data-search__result-value\">{{ entry.displayValue }}</span>\n          </div>\n        </div>\n      }\n      @if (totalCount() > 50) {\n        <div class=\"sbd-data-search__more\">+{{ totalCount() - 50 }} more \u2014 refine your search</div>\n      }\n    </div>\n  }\n\n  @if (query().length >= 2 && results().length === 0) {\n    <div class=\"sbd-data-search__empty\">\n      <i class=\"pi pi-inbox\"></i> No fields or values match \"{{ query() }}\"\n    </div>\n  }\n</div>\n", styles: [".sbd-data-search{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.sbd-data-search__input-wrap{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid transparent;transition:border-color .15s}.sbd-data-search__input-wrap:focus-within{border-bottom-color:#e2e8f0}.sbd-data-search__icon{color:#94a3b8;font-size:15px;flex-shrink:0}.sbd-data-search__input{flex:1;border:none!important;outline:none!important;box-shadow:none!important;padding:0!important;font-size:14px;background:transparent!important;color:#1e2e4a}.sbd-data-search__input::placeholder{color:#94a3b8}.sbd-data-search__count{font-size:12px;font-weight:600;color:#6366f1;background:#eef2ff;padding:2px 8px;border-radius:10px;white-space:nowrap}.sbd-data-search__results{max-height:320px;overflow-y:auto}.sbd-data-search__result{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 16px;border-bottom:1px solid #f1f5f9;cursor:default;transition:background .1s}.sbd-data-search__result:last-child{border-bottom:none}.sbd-data-search__result:hover{background:#f8fafc}.sbd-data-search__result-left{min-width:0;flex:1;overflow:hidden}.sbd-data-search__result-right{display:flex;align-items:center;gap:8px;flex-shrink:0;max-width:55%}.sbd-data-search__result-path{font-size:11px;color:#94a3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sbd-data-search__result-pathtext{color:#cbd5e1}.sbd-data-search__result-key{font-weight:600;color:#475569}.sbd-data-search__result-value{font-size:13px;font-weight:600;color:#1e2e4a;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:monospace}.sbd-data-search__type-badge{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:4px;white-space:nowrap;flex-shrink:0}.sbd-data-search__type-badge--date{background:#eff6ff;color:#3b82f6}.sbd-data-search__type-badge--duration{background:#fff7ed;color:#f97316}.sbd-data-search__type-badge--bool{background:#f0fdf4;color:#22c55e}.sbd-data-search__type-badge--number{background:#faf5ff;color:#a855f7}.sbd-data-search__type-badge--text{background:#f8fafc;color:#64748b}.sbd-data-search__more{padding:10px 16px;font-size:12px;color:#94a3b8;text-align:center;font-style:italic}.sbd-data-search__empty{display:flex;align-items:center;gap:8px;padding:16px;font-size:13px;color:#94a3b8}.sbd-data-search__empty .pi{font-size:16px}\n"] }]
+        }] });
+
+const AR_LABELS = {
+    'PNR': 'رقم الحجز',
+    'Booking ID': 'معرف الحجز',
+    'Supplier ref': 'مرجع المورد',
+    'Supplier': 'المورد',
+    'Cross-seller': 'حجز متقاطع',
+    'Departure': 'المغادرة',
+    'Arrival': 'الوصول',
+    'Duration': 'المدة',
+    'Direction': 'الاتجاه',
+    'Departure time': 'وقت المغادرة',
+    'Arrival time': 'وقت الوصول',
+    'Stops': 'التوقفات',
+    'Journey duration': 'مدة الرحلة',
+    'Airline(s)': 'شركة الطيران',
+    'Flight no.': 'رقم الرحلة',
+    'Flight': 'الرحلة',
+    'IATA code': 'رمز IATA',
+    'Aircraft': 'نوع الطائرة',
+    'Operating code': 'رمز التشغيل',
+    'Route': 'المسار',
+    'Cabin': 'درجة المقصورة',
+    'Fare brand': 'نوع التعرفة',
+    'Fare desc.': 'وصف التعرفة',
+    'Departure airport': 'مطار المغادرة',
+    'Dep. terminal': 'صالة المغادرة',
+    'Arrival airport': 'مطار الوصول',
+    'Arr. terminal': 'صالة الوصول',
+    'Type': 'النوع',
+    'Gender': 'الجنس',
+    'Date of birth': 'تاريخ الميلاد',
+    'Passport': 'جواز السفر',
+    'Nationality': 'الجنسية',
+    'Passport exp.': 'انتهاء الجواز',
+    'Issue country': 'بلد الإصدار',
+    'Doc type': 'نوع الوثيقة',
+    'Email': 'البريد الإلكتروني',
+    'Phone': 'الهاتف',
+    'Total': 'الإجمالي',
+    'Adults (ADT)': 'بالغون',
+    'Children (CNN)': 'أطفال',
+    'Infants (INF)': 'رضع',
+    'Status': 'الحالة',
+    'Amount': 'المبلغ',
+    'Paid amount': 'المبلغ المدفوع',
+    'Payment method': 'طريقة الدفع',
+    'Date': 'التاريخ',
+    'Currency': 'العملة',
+    'Transaction ref': 'مرجع المعاملة',
+    'Amount paid': 'المبلغ المدفوع',
+    'Source': 'المصدر',
+    'Total paid': 'إجمالي المدفوع',
+    'Adult · Cabin': 'بالغ · حقيبة مقصورة',
+    'Adult · Checked': 'بالغ · حقيبة مسجلة',
+    'Child · Cabin': 'طفل · حقيبة مقصورة',
+    'Child · Checked': 'طفل · حقيبة مسجلة',
+    'Infant · Cabin': 'رضيع · حقيبة مقصورة',
+    'Infant · Checked': 'رضيع · حقيبة مسجلة',
+    'Checked': 'حقيبة مسجلة',
+    'Original amount': 'المبلغ الأصلي',
+    'Cancellation fee': 'رسوم الإلغاء',
+    'Total refund': 'إجمالي الاسترداد',
+    'Refundable': 'قابل للاسترداد',
+    'Cancel fee': 'رسوم الإلغاء',
+    'Deadline': 'الموعد النهائي',
+    'Policy': 'السياسة',
+    'Penalty': 'الغرامة',
+    'Non-refundable charge': 'رسوم غير قابلة للاسترداد',
+    'Non-refundable ancillary': 'خدمات إضافية غير قابلة للاسترداد',
+    'Gift deduction': 'خصم الهدية',
+    'Coupon deduction': 'خصم القسيمة',
+    'Loyalty deduction': 'خصم نقاط الولاء',
+    'Card refund': 'استرداد البطاقة',
+    'Credit refund': 'استرداد الرصيد',
+    'Wallet refund': 'استرداد المحفظة',
+    'Loyalty points refund': 'استرداد نقاط الولاء',
+    'Leg total refund': 'إجمالي استرداد هذا الاتجاه',
+    'Room type': 'نوع الغرفة',
+    'Beds': 'الأسرّة',
+    'View': 'الإطلالة',
+    'Floor': 'الطابق',
+    'Size': 'المساحة',
+    'Check-in date': 'تاريخ الوصول',
+    'Check-in time': 'وقت الوصول',
+    'Check-out date': 'تاريخ المغادرة',
+    'Check-out time': 'وقت المغادرة',
+    'Nights': 'عدد الليالي',
+    'Hotel': 'الفندق',
+    'Stars': 'النجوم',
+    'Address': 'العنوان',
+    'City': 'المدينة',
+    'Country': 'الدولة',
+    'Zip code': 'الرمز البريدي',
+    'Landmark': 'معلم قريب',
+    'Balance': 'الرصيد',
+    'Cashback': 'كاش باك',
+    'Promo credit': 'رصيد ترويجي',
+    'Last updated': 'آخر تحديث',
+    'Board basis': 'أساس الإقامة',
+    'Breakfast': 'الإفطار',
+    'Lunch': 'الغداء',
+    'Dinner': 'العشاء',
+};
+const AR_SECTION_TITLES = {
+    'Booking Reference': 'مرجع الحجز',
+    'Payment': 'الدفع',
+    'Summary': 'ملخص',
+    'Transaction': 'المعاملة',
+    'References': 'المراجع',
+    'Total': 'الإجمالي',
+    'Info': 'معلومات',
+    'Status': 'الحالة',
+    'Add-on Baggage': 'أمتعة إضافية',
+    'Change History': 'سجل التغييرات',
+};
+
+class SbdResultPanelComponent {
+    constructor() {
+        this.toast = inject(SbdToastService);
+        this.actionLabel = input('');
+        this.elapsedMs = input(0);
+        this.status = input('idle');
+        this.result = input(null);
+        this.feedbackGiven = output();
+    }
+    get elapsedSeconds() { return (this.elapsedMs() / 1000).toFixed(2); }
+    copy() {
+        const r = this.result();
+        if (!r)
+            return;
+        const lines = [r.title, r.subtitle ?? '', '', ...r.points.map(p => `${p.label}: ${p.value}`), r.callout ? `\nNote: ${r.callout.message}` : ''].filter(Boolean);
+        navigator.clipboard.writeText(lines.join('\n')).then(() => this.toast.success('Copied to clipboard'));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdResultPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdResultPanelComponent, isStandalone: true, selector: "app-sbd-result-panel", inputs: { actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, elapsedMs: { classPropertyName: "elapsedMs", publicName: "elapsedMs", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { feedbackGiven: "feedbackGiven" }, ngImport: i0, template: "<div class=\"sbd-result-panel\">\n  @if (status() === 'loading') {\n    <div class=\"sbd-result-panel__loading\">\n      <div class=\"sbd-result-panel__loading-header\">\n        <p-skeleton width=\"200px\" height=\"18px\" /><p-skeleton width=\"80px\" height=\"18px\" />\n      </div>\n      <p-skeleton width=\"60%\" height=\"28px\" styleClass=\"mt-3 mb-2\" />\n      <p-skeleton width=\"40%\" height=\"16px\" styleClass=\"mb-4\" />\n      <div class=\"sbd-result-panel__loading-points\">\n        @for (i of [1,2,3,4]; track i) {\n          <div class=\"sbd-result-panel__loading-row\">\n            <p-skeleton width=\"100px\" height=\"13px\" /><p-skeleton width=\"160px\" height=\"13px\" />\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (status() === 'success' && result()) {\n    <div @fadeInUp>\n      <div class=\"sbd-result-panel__header\">\n        <div class=\"sbd-result-panel__header-left\">\n          <i class=\"pi pi-check-circle sbd-result-panel__check-icon\"></i>\n          <span class=\"sbd-result-panel__header-label\">Result \u00B7 {{ actionLabel() }}</span>\n        </div>\n        <span class=\"sbd-result-panel__elapsed\">Found in {{ elapsedSeconds }}s</span>\n      </div>\n      <div class=\"sbd-result-panel__body\">\n        <h2 class=\"sbd-result-panel__title\">{{ result()!.title }}</h2>\n        @if (result()!.subtitle) { <p class=\"sbd-result-panel__subtitle\">{{ result()!.subtitle }}</p> }\n\n        <!-- Sectioned layout (refund breakdown etc.) -->\n        @if (result()!.sections?.length) {\n          <div class=\"sbd-result-panel__sections\">\n            @for (section of result()!.sections!; track section.title) {\n              <div class=\"sbd-result-panel__section\">\n                <div class=\"sbd-result-panel__section-title\">{{ section.title }}</div>\n                @for (row of section.rows; track row.label) {\n                  @if (row.value) {\n                    <div class=\"sbd-result-panel__section-row\">\n                      <span class=\"sbd-result-panel__section-row-label\">{{ row.label }}</span>\n                      <span class=\"sbd-result-panel__section-row-value sbd-result-panel__section-row-value--{{ row.valueClass ?? 'neutral' }}\">{{ row.value }}</span>\n                    </div>\n                  } @else {\n                    <div class=\"sbd-result-panel__section-divider\">{{ row.label }}</div>\n                  }\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Flat points layout (all other actions) -->\n        @else if (result()!.points?.length) {\n          <ul class=\"sbd-result-panel__points\">\n            @for (point of result()!.points!; track point.label) {\n              <li class=\"sbd-result-panel__point\">\n                <span class=\"sbd-result-panel__point-label\">{{ point.label }}</span>\n                <span class=\"sbd-result-panel__point-value\">{{ point.value }}</span>\n              </li>\n            }\n          </ul>\n        }\n\n        @if (result()!.callout) {\n          <div class=\"sbd-result-panel__callout sbd-result-panel__callout--{{ result()!.callout!.type }}\">\n            <i class=\"pi pi-info-circle\"></i><span>{{ result()!.callout!.message }}</span>\n          </div>\n        }\n      </div>\n      <div class=\"sbd-result-panel__footer\">\n        <div class=\"sbd-result-panel__feedback\">\n          <span class=\"sbd-result-panel__feedback-label\">Helpful?</span>\n          <button class=\"sbd-result-panel__feedback-btn sbd-result-panel__feedback-btn--up\" (click)=\"feedbackGiven.emit('up')\">\n            <i class=\"pi pi-thumbs-up\"></i>\n          </button>\n          <button class=\"sbd-result-panel__feedback-btn sbd-result-panel__feedback-btn--down\" (click)=\"feedbackGiven.emit('down')\">\n            <i class=\"pi pi-thumbs-down\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n  @if (status() === 'error') {\n    <div class=\"sbd-result-panel__error\" @fadeInUp>\n      <i class=\"pi pi-exclamation-triangle\"></i><span>Could not load this information. Please try again.</span>\n    </div>\n  }\n  @if (status() === 'idle') {\n    <div class=\"sbd-result-panel__idle\">\n      <i class=\"pi pi-arrow-up-left\"></i><span>Select an action above to see results here</span>\n    </div>\n  }\n</div>\n", styles: [".sbd-result-panel{background:#fff;border-radius:12px;border:1px solid #e2e8f0;overflow:hidden}.sbd-result-panel__loading{padding:20px}.sbd-result-panel__loading-header{display:flex;justify-content:space-between;margin-bottom:14px}.sbd-result-panel__loading-points{display:flex;flex-direction:column;gap:10px}.sbd-result-panel__loading-row{display:flex;gap:24px}.sbd-result-panel__header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:#00b67a12;border-bottom:1px solid rgba(0,182,122,.15)}.sbd-result-panel__header-left{display:flex;align-items:center;gap:8px}.sbd-result-panel__check-icon{color:#00b67a;font-size:15px}.sbd-result-panel__header-label{font-size:13px;font-weight:600;color:#1e2e4a}.sbd-result-panel__elapsed{font-size:11.5px;font-weight:600;color:#00b67a;background:#00b67a1a;border-radius:20px;padding:2px 10px}.sbd-result-panel__body{padding:20px}.sbd-result-panel__title{font-size:20px;font-weight:800;color:#1e2e4a;margin:0 0 4px}.sbd-result-panel__subtitle{font-size:13px;color:#94a3b8;margin:0 0 14px}.sbd-result-panel__points{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column}.sbd-result-panel__point{display:flex;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid #f1f5f9}.sbd-result-panel__point:last-child{border-bottom:none}.sbd-result-panel__point:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#3b82f6;flex-shrink:0;margin-top:5px;align-self:flex-start}.sbd-result-panel__point-label{font-size:12px;color:#94a3b8;font-weight:500;width:140px;flex-shrink:0}.sbd-result-panel__point-value{font-size:13px;font-weight:600;color:#1e2e4a;flex:1}.sbd-result-panel__sections{display:flex;flex-direction:column;gap:14px;margin-bottom:14px}.sbd-result-panel__section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.sbd-result-panel__section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b;background:#f8fafc;padding:7px 12px;border-bottom:1px solid #e2e8f0}.sbd-result-panel__section-row{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;border-bottom:1px solid #f1f5f9;font-size:13px}.sbd-result-panel__section-row:last-child{border-bottom:none}.sbd-result-panel__section-row-label{color:#64748b;font-size:12.5px}.sbd-result-panel__section-row-value{font-weight:600;font-size:13px}.sbd-result-panel__section-row-value--positive{color:#16a34a}.sbd-result-panel__section-row-value--negative{color:#ef4444}.sbd-result-panel__section-row-value--neutral{color:#1e2e4a}.sbd-result-panel__section-divider{padding:5px 12px;font-size:10.5px;font-weight:700;letter-spacing:.05em;color:#94a3b8;background:#f8fafc;border-bottom:1px solid #f1f5f9;text-align:center}.sbd-result-panel__callout{display:flex;align-items:flex-start;gap:8px;padding:12px;border-radius:8px;font-size:12.5px;font-weight:500;border-left:3px solid #6366f1;background:#f8f9ff;color:#1e2e4a}.sbd-result-panel__callout--warning{border-left-color:#f97316;background:#f973160f}.sbd-result-panel__callout--tip{border-left-color:#0ea5e9;background:#0ea5e912}.sbd-result-panel__callout i{font-size:14px;margin-top:1px}.sbd-result-panel__footer{display:flex;align-items:center;justify-content:flex-end;padding:10px 20px;border-top:1px solid #f1f5f9;background:#f8fafc;gap:10px}.sbd-result-panel__feedback{display:flex;align-items:center;gap:6px}.sbd-result-panel__feedback-label{font-size:12px;color:#94a3b8;margin-right:2px}.sbd-result-panel__feedback-btn{background:none;border:1px solid #e2e8f0;border-radius:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}.sbd-result-panel__feedback-btn .pi{font-size:14px;color:#94a3b8}.sbd-result-panel__feedback-btn:hover{border-color:#cbd5e1;background:#f1f5f9}.sbd-result-panel__feedback-btn:hover .pi{color:#475569}.sbd-result-panel__feedback-btn--up:hover{border-color:#86efac;background:#f0fdf4}.sbd-result-panel__feedback-btn--up:hover .pi{color:#16a34a}.sbd-result-panel__feedback-btn--down:hover{border-color:#fca5a5;background:#fef2f2}.sbd-result-panel__feedback-btn--down:hover .pi{color:#ef4444}.sbd-result-panel__error{display:flex;align-items:center;gap:8px;padding:24px;color:#ef4444;font-size:13.5px;font-weight:500}.sbd-result-panel__error i{font-size:18px}.sbd-result-panel__idle{display:flex;align-items:center;gap:8px;padding:24px;color:#94a3b8;font-size:13px}.sbd-result-panel__idle i{font-size:16px}\n"], dependencies: [{ kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: ButtonModule }], animations: [
+            trigger('fadeInUp', [
+                transition(':enter', [
+                    style({ opacity: 0, transform: 'translateY(8px)' }),
+                    animate('200ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
+                ]),
+            ]),
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdResultPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-result-panel', standalone: true, imports: [SkeletonModule, ButtonModule], animations: [
+                        trigger('fadeInUp', [
+                            transition(':enter', [
+                                style({ opacity: 0, transform: 'translateY(8px)' }),
+                                animate('200ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
+                            ]),
+                        ]),
+                    ], template: "<div class=\"sbd-result-panel\">\n  @if (status() === 'loading') {\n    <div class=\"sbd-result-panel__loading\">\n      <div class=\"sbd-result-panel__loading-header\">\n        <p-skeleton width=\"200px\" height=\"18px\" /><p-skeleton width=\"80px\" height=\"18px\" />\n      </div>\n      <p-skeleton width=\"60%\" height=\"28px\" styleClass=\"mt-3 mb-2\" />\n      <p-skeleton width=\"40%\" height=\"16px\" styleClass=\"mb-4\" />\n      <div class=\"sbd-result-panel__loading-points\">\n        @for (i of [1,2,3,4]; track i) {\n          <div class=\"sbd-result-panel__loading-row\">\n            <p-skeleton width=\"100px\" height=\"13px\" /><p-skeleton width=\"160px\" height=\"13px\" />\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (status() === 'success' && result()) {\n    <div @fadeInUp>\n      <div class=\"sbd-result-panel__header\">\n        <div class=\"sbd-result-panel__header-left\">\n          <i class=\"pi pi-check-circle sbd-result-panel__check-icon\"></i>\n          <span class=\"sbd-result-panel__header-label\">Result \u00B7 {{ actionLabel() }}</span>\n        </div>\n        <span class=\"sbd-result-panel__elapsed\">Found in {{ elapsedSeconds }}s</span>\n      </div>\n      <div class=\"sbd-result-panel__body\">\n        <h2 class=\"sbd-result-panel__title\">{{ result()!.title }}</h2>\n        @if (result()!.subtitle) { <p class=\"sbd-result-panel__subtitle\">{{ result()!.subtitle }}</p> }\n\n        <!-- Sectioned layout (refund breakdown etc.) -->\n        @if (result()!.sections?.length) {\n          <div class=\"sbd-result-panel__sections\">\n            @for (section of result()!.sections!; track section.title) {\n              <div class=\"sbd-result-panel__section\">\n                <div class=\"sbd-result-panel__section-title\">{{ section.title }}</div>\n                @for (row of section.rows; track row.label) {\n                  @if (row.value) {\n                    <div class=\"sbd-result-panel__section-row\">\n                      <span class=\"sbd-result-panel__section-row-label\">{{ row.label }}</span>\n                      <span class=\"sbd-result-panel__section-row-value sbd-result-panel__section-row-value--{{ row.valueClass ?? 'neutral' }}\">{{ row.value }}</span>\n                    </div>\n                  } @else {\n                    <div class=\"sbd-result-panel__section-divider\">{{ row.label }}</div>\n                  }\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Flat points layout (all other actions) -->\n        @else if (result()!.points?.length) {\n          <ul class=\"sbd-result-panel__points\">\n            @for (point of result()!.points!; track point.label) {\n              <li class=\"sbd-result-panel__point\">\n                <span class=\"sbd-result-panel__point-label\">{{ point.label }}</span>\n                <span class=\"sbd-result-panel__point-value\">{{ point.value }}</span>\n              </li>\n            }\n          </ul>\n        }\n\n        @if (result()!.callout) {\n          <div class=\"sbd-result-panel__callout sbd-result-panel__callout--{{ result()!.callout!.type }}\">\n            <i class=\"pi pi-info-circle\"></i><span>{{ result()!.callout!.message }}</span>\n          </div>\n        }\n      </div>\n      <div class=\"sbd-result-panel__footer\">\n        <div class=\"sbd-result-panel__feedback\">\n          <span class=\"sbd-result-panel__feedback-label\">Helpful?</span>\n          <button class=\"sbd-result-panel__feedback-btn sbd-result-panel__feedback-btn--up\" (click)=\"feedbackGiven.emit('up')\">\n            <i class=\"pi pi-thumbs-up\"></i>\n          </button>\n          <button class=\"sbd-result-panel__feedback-btn sbd-result-panel__feedback-btn--down\" (click)=\"feedbackGiven.emit('down')\">\n            <i class=\"pi pi-thumbs-down\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n  @if (status() === 'error') {\n    <div class=\"sbd-result-panel__error\" @fadeInUp>\n      <i class=\"pi pi-exclamation-triangle\"></i><span>Could not load this information. Please try again.</span>\n    </div>\n  }\n  @if (status() === 'idle') {\n    <div class=\"sbd-result-panel__idle\">\n      <i class=\"pi pi-arrow-up-left\"></i><span>Select an action above to see results here</span>\n    </div>\n  }\n</div>\n", styles: [".sbd-result-panel{background:#fff;border-radius:12px;border:1px solid #e2e8f0;overflow:hidden}.sbd-result-panel__loading{padding:20px}.sbd-result-panel__loading-header{display:flex;justify-content:space-between;margin-bottom:14px}.sbd-result-panel__loading-points{display:flex;flex-direction:column;gap:10px}.sbd-result-panel__loading-row{display:flex;gap:24px}.sbd-result-panel__header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:#00b67a12;border-bottom:1px solid rgba(0,182,122,.15)}.sbd-result-panel__header-left{display:flex;align-items:center;gap:8px}.sbd-result-panel__check-icon{color:#00b67a;font-size:15px}.sbd-result-panel__header-label{font-size:13px;font-weight:600;color:#1e2e4a}.sbd-result-panel__elapsed{font-size:11.5px;font-weight:600;color:#00b67a;background:#00b67a1a;border-radius:20px;padding:2px 10px}.sbd-result-panel__body{padding:20px}.sbd-result-panel__title{font-size:20px;font-weight:800;color:#1e2e4a;margin:0 0 4px}.sbd-result-panel__subtitle{font-size:13px;color:#94a3b8;margin:0 0 14px}.sbd-result-panel__points{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column}.sbd-result-panel__point{display:flex;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid #f1f5f9}.sbd-result-panel__point:last-child{border-bottom:none}.sbd-result-panel__point:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#3b82f6;flex-shrink:0;margin-top:5px;align-self:flex-start}.sbd-result-panel__point-label{font-size:12px;color:#94a3b8;font-weight:500;width:140px;flex-shrink:0}.sbd-result-panel__point-value{font-size:13px;font-weight:600;color:#1e2e4a;flex:1}.sbd-result-panel__sections{display:flex;flex-direction:column;gap:14px;margin-bottom:14px}.sbd-result-panel__section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.sbd-result-panel__section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b;background:#f8fafc;padding:7px 12px;border-bottom:1px solid #e2e8f0}.sbd-result-panel__section-row{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;border-bottom:1px solid #f1f5f9;font-size:13px}.sbd-result-panel__section-row:last-child{border-bottom:none}.sbd-result-panel__section-row-label{color:#64748b;font-size:12.5px}.sbd-result-panel__section-row-value{font-weight:600;font-size:13px}.sbd-result-panel__section-row-value--positive{color:#16a34a}.sbd-result-panel__section-row-value--negative{color:#ef4444}.sbd-result-panel__section-row-value--neutral{color:#1e2e4a}.sbd-result-panel__section-divider{padding:5px 12px;font-size:10.5px;font-weight:700;letter-spacing:.05em;color:#94a3b8;background:#f8fafc;border-bottom:1px solid #f1f5f9;text-align:center}.sbd-result-panel__callout{display:flex;align-items:flex-start;gap:8px;padding:12px;border-radius:8px;font-size:12.5px;font-weight:500;border-left:3px solid #6366f1;background:#f8f9ff;color:#1e2e4a}.sbd-result-panel__callout--warning{border-left-color:#f97316;background:#f973160f}.sbd-result-panel__callout--tip{border-left-color:#0ea5e9;background:#0ea5e912}.sbd-result-panel__callout i{font-size:14px;margin-top:1px}.sbd-result-panel__footer{display:flex;align-items:center;justify-content:flex-end;padding:10px 20px;border-top:1px solid #f1f5f9;background:#f8fafc;gap:10px}.sbd-result-panel__feedback{display:flex;align-items:center;gap:6px}.sbd-result-panel__feedback-label{font-size:12px;color:#94a3b8;margin-right:2px}.sbd-result-panel__feedback-btn{background:none;border:1px solid #e2e8f0;border-radius:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}.sbd-result-panel__feedback-btn .pi{font-size:14px;color:#94a3b8}.sbd-result-panel__feedback-btn:hover{border-color:#cbd5e1;background:#f1f5f9}.sbd-result-panel__feedback-btn:hover .pi{color:#475569}.sbd-result-panel__feedback-btn--up:hover{border-color:#86efac;background:#f0fdf4}.sbd-result-panel__feedback-btn--up:hover .pi{color:#16a34a}.sbd-result-panel__feedback-btn--down:hover{border-color:#fca5a5;background:#fef2f2}.sbd-result-panel__feedback-btn--down:hover .pi{color:#ef4444}.sbd-result-panel__error{display:flex;align-items:center;gap:8px;padding:24px;color:#ef4444;font-size:13.5px;font-weight:500}.sbd-result-panel__error i{font-size:18px}.sbd-result-panel__idle{display:flex;align-items:center;gap:8px;padding:24px;color:#94a3b8;font-size:13px}.sbd-result-panel__idle i{font-size:16px}\n"] }]
+        }] });
+
+class SbdActionDialogComponent {
+    constructor() {
+        this.bookingService = inject(SbdBookingService);
+        this.toast = inject(SbdToastService);
+        this.visible = input(false);
+        this.bookingId = input('');
+        this.product = input('flight');
+        this.actions = input([]);
+        this.initialKey = input(null);
+        // Pre-fetched booking data from the parent — avoids a redundant API call
+        // when the action's apiField is already satisfied by the initial lookup.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.preloadedData = input(null);
+        this.closed = output();
+        this.selectedAction = signal(null);
+        this.actionStatus = signal('idle');
+        this.actionData = signal(null);
+        this.elapsedMs = signal(0);
+        this.copying = signal(false);
+        this.resultContent = computed(() => {
+            const a = this.selectedAction();
+            const d = this.actionData();
+            return a && d ? a.formatter(d) : null;
+        });
+        effect(() => {
+            if (this.visible()) {
+                const key = this.initialKey();
+                const action = key ? this.actions().find(a => a.key === key) ?? null : null;
+                if (action) {
+                    this.onActionSelect(action);
+                }
+            }
+            else {
+                this.selectedAction.set(null);
+                this.actionStatus.set('idle');
+                this.actionData.set(null);
+                this.elapsedMs.set(0);
+            }
+        }, { allowSignalWrites: true });
+    }
+    copyResult(mode) {
+        const enResult = this.resultContent();
+        const action = this.selectedAction();
+        if (!enResult || !action)
+            return;
+        if (mode === 'en') {
+            const text = this.buildBilingualText(enResult, null);
+            navigator.clipboard.writeText(text).then(() => this.toast.success('Copied EN'));
+            return;
+        }
+        this.copying.set(true);
+        const arData$ = action.apiField === '$refund_details'
+            ? this.bookingService.getRefundDetails(this.bookingId(), this.product(), 'ar').pipe(map((data) => data), catchError(() => of(null)))
+            : this.bookingService.getBooking(this.bookingId(), this.product(), action.apiField, 'ar').pipe(map(({ data }) => data), catchError(() => of(null)));
+        arData$.subscribe(arRaw => {
+            const arResult = arRaw ? action.formatter(arRaw) : null;
+            const text = mode === 'ar'
+                ? this.buildBilingualText(null, arResult)
+                : this.buildBilingualText(enResult, arResult);
+            const msg = mode === 'ar' ? 'Copied AR' : 'Copied EN + AR';
+            navigator.clipboard.writeText(text)
+                .then(() => this.toast.success(msg))
+                .catch(() => this.toast.success('Copied to clipboard'))
+                .finally(() => this.copying.set(false));
+        });
+    }
+    buildBilingualText(en, ar) {
+        const LTR = '‎';
+        const RTL = '‏';
+        const divider = `${LTR}${'─'.repeat(40)}`;
+        const formatEn = (r) => {
+            const lines = [`${LTR}${r.title}`];
+            if (r.subtitle)
+                lines.push(`${LTR}${r.subtitle}`);
+            lines.push('');
+            if (r.sections?.length) {
+                for (const s of r.sections) {
+                    lines.push(`${LTR}── ${s.title} ──`);
+                    for (const row of s.rows) {
+                        lines.push(row.value ? `${LTR}${row.label}: ${row.value}` : `${LTR}· ${row.label}`);
+                    }
+                    lines.push('');
+                }
+            }
+            else if (r.points?.length) {
+                for (const p of r.points)
+                    lines.push(`${LTR}${p.label}: ${p.value}`);
+            }
+            if (r.callout)
+                lines.push(`${LTR}Note: ${r.callout.message}`);
+            return lines;
+        };
+        const formatAr = (r) => {
+            const tl = (label) => AR_LABELS[label] ?? label;
+            const ts = (title) => AR_SECTION_TITLES[title] ?? title;
+            const lines = [`${RTL}${r.title}`];
+            if (r.subtitle)
+                lines.push(`${RTL}${r.subtitle}`);
+            lines.push('');
+            if (r.sections?.length) {
+                for (const s of r.sections) {
+                    lines.push(`${RTL}── ${ts(s.title)} ──`);
+                    for (const row of s.rows) {
+                        lines.push(row.value ? `${RTL}${tl(row.label)}: ${row.value}` : `${RTL}· ${tl(row.label)}`);
+                    }
+                    lines.push('');
+                }
+            }
+            else if (r.points?.length) {
+                for (const p of r.points)
+                    lines.push(`${RTL}${tl(p.label)}: ${p.value}`);
+            }
+            if (r.callout)
+                lines.push(`${RTL}ملاحظة: ${r.callout.message}`);
+            return lines;
+        };
+        if (!en && ar)
+            return formatAr(ar).join('\r\n');
+        if (en && !ar)
+            return formatEn(en).join('\r\n');
+        return [...formatEn(en), '', divider, '', ...formatAr(ar)].join('\r\n');
+    }
+    onActionSelect(action) {
+        if (!action)
+            return;
+        this.selectedAction.set(action);
+        this.actionStatus.set('loading');
+        this.actionData.set(null);
+        // Use pre-fetched data when available and the action doesn't need its own
+        // endpoint (i.e. not the special $refund_details POST).
+        const cached = this.preloadedData();
+        if (action.apiField !== '$refund_details' && cached) {
+            this.actionData.set(cached);
+            this.elapsedMs.set(0);
+            this.actionStatus.set('success');
+            return;
+        }
+        const start = performance.now();
+        const source$ = action.apiField === '$refund_details'
+            ? this.bookingService.getRefundDetails(this.bookingId(), this.product()).pipe(map((data) => ({ data, elapsedMs: performance.now() - start })))
+            : this.bookingService.getBooking(this.bookingId(), this.product(), action.apiField);
+        source$.subscribe({
+            next: ({ data, elapsedMs }) => {
+                this.actionData.set(data);
+                this.elapsedMs.set(elapsedMs);
+                this.actionStatus.set('success');
+            },
+            error: () => {
+                this.actionStatus.set('error');
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdActionDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: SbdActionDialogComponent, isStandalone: true, selector: "app-sbd-action-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, bookingId: { classPropertyName: "bookingId", publicName: "bookingId", isSignal: true, isRequired: false, transformFunction: null }, product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, initialKey: { classPropertyName: "initialKey", publicName: "initialKey", isSignal: true, isRequired: false, transformFunction: null }, preloadedData: { classPropertyName: "preloadedData", publicName: "preloadedData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, 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: '720px', maxHeight: '90vh' }\"\n  styleClass=\"sbd-action-dialog-wrapper\"\n  header=\"Browse Actions\">\n\n  <div class=\"sad\">\n\n    <!-- ng-select dropdown -->\n    <div class=\"sad__picker\">\n      <ng-select\n        [items]=\"actions()\"\n        [ngModel]=\"selectedAction()\"\n        (change)=\"onActionSelect($event)\"\n        [searchable]=\"true\"\n        [clearable]=\"false\"\n        bindLabel=\"label\"\n        placeholder=\"Search actions...\"\n        class=\"sad__select\">\n\n        <!-- Selected value display -->\n        <ng-template ng-label-tmp let-item=\"item\">\n          <div class=\"sad__option\">\n            <i class=\"{{ item.icon }} sad__option-icon\"></i>\n            <div class=\"sad__option-text\">\n              <span class=\"sad__option-label\">{{ item.label }}</span>\n              <span class=\"sad__option-sub\">{{ item.subtitle }}</span>\n            </div>\n          </div>\n        </ng-template>\n\n        <!-- Dropdown list item -->\n        <ng-template ng-option-tmp let-item=\"item\" let-search=\"searchTerm\">\n          <div class=\"sad__option\">\n            <i class=\"{{ item.icon }} sad__option-icon\"></i>\n            <div class=\"sad__option-text\">\n              <span class=\"sad__option-label\">{{ item.label }}</span>\n              <span class=\"sad__option-sub\">{{ item.subtitle }}</span>\n            </div>\n          </div>\n        </ng-template>\n\n      </ng-select>\n    </div>\n\n    <!-- Result area -->\n    <div class=\"sad__result\">\n      <app-sbd-result-panel\n        [actionLabel]=\"selectedAction()?.label ?? ''\"\n        [elapsedMs]=\"elapsedMs()\"\n        [status]=\"actionStatus()\"\n        [result]=\"resultContent()\"\n      />\n    </div>\n\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <button pButton label=\"Copy EN\" icon=\"pi pi-copy\"\n      class=\"p-button-outlined p-button-sm\"\n      [disabled]=\"actionStatus() !== 'success' || copying()\"\n      (click)=\"copyResult('en')\">\n    </button>\n    <button pButton label=\"Copy AR\" icon=\"pi pi-copy\"\n      class=\"p-button-outlined p-button-sm\"\n      [disabled]=\"actionStatus() !== 'success' || copying()\"\n      (click)=\"copyResult('ar')\">\n    </button>\n    <button pButton label=\"Copy EN + AR\"\n      [icon]=\"copying() ? 'pi pi-spin pi-spinner' : 'pi pi-copy'\"\n      class=\"p-button-outlined p-button-sm\"\n      [disabled]=\"actionStatus() !== 'success' || copying()\"\n      (click)=\"copyResult('both')\">\n    </button>\n    <button pButton label=\"Close\" icon=\"pi pi-times\" class=\"p-button-outlined p-button-secondary p-button-sm\" (click)=\"closed.emit()\"></button>\n  </ng-template>\n\n</p-dialog>\n", styles: [".sad{display:flex;flex-direction:column;font-family:inherit}.sad__picker{padding:16px 20px;border-bottom:1px solid #e2e8f0}.sad__select{width:100%}.sad__select ::ng-deep .ng-select-container{height:56px}.sad__option{display:flex;align-items:center;gap:10px;padding:2px 0}.sad__option-icon{font-size:14px;color:#64748b;flex-shrink:0;width:20px;text-align:center}.sad__option-text{display:flex;flex-direction:column;gap:2px;min-width:0}.sad__option-label{font-size:13.5px;font-weight:600;color:#1e2e4a}.sad__option-sub{font-size:11.5px;color:#94a3b8}.sad__result{overflow-y:auto;max-height:calc(90vh - 200px)}.sad__result::-webkit-scrollbar{width:4px}.sad__result::-webkit-scrollbar-track{background:transparent}.sad__result::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:4px}.sad__result ::ng-deep .sbd-result-panel{border:none;border-radius:0;box-shadow:none}.sad__select.ng-select .ng-select-container{border:1px solid #e2e8f0;border-radius:8px;min-height:48px;font-family:inherit;box-shadow:none}.sad__select.ng-select .ng-select-container:hover{border-color:#94a3b8}.sad__select.ng-select .ng-select-container .ng-value-container{padding:0 12px}.sad__select.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:13.5px}.sad__select.ng-select .ng-select-container .ng-value-container .ng-value{font-size:13.5px}.sad__select.ng-select .ng-select-container .ng-arrow-wrapper{padding-right:10px}.sad__select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow{border-color:#94a3b8 transparent transparent}.sad__select.ng-select.ng-select-focused .ng-select-container{border-color:#94a3b8;box-shadow:0 0 0 3px #94a3b826}.sad__select.ng-select.ng-select-opened .ng-select-container{border-color:#94a3b8;border-radius:8px 8px 0 0}.sad__select.ng-select.ng-select-opened .ng-select-container .ng-arrow{border-color:transparent transparent #94a3b8}.sad__select .ng-dropdown-panel{border:1px solid #e2e8f0;border-top:none;border-radius:0 0 8px 8px;box-shadow:0 8px 24px #00000014}.sad__select .ng-dropdown-panel .ng-dropdown-panel-items{max-height:520px}.sad__select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:8px 12px;color:#1e2e4a;font-size:13.5px;background:#fff}.sad__select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:hover,.sad__select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#f8fafc}.sad__select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background:#f1f5f9;font-weight:500}.sad__select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .sad__option-label{color:#1e2e4a}.sad__select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .sad__option-icon{color:#475569}.sad__select .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #f1f5f9;padding:8px 12px}\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: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { 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]" }, { kind: "component", type: SbdResultPanelComponent, selector: "app-sbd-result-panel", inputs: ["actionLabel", "elapsedMs", "status", "result"], outputs: ["feedbackGiven"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdActionDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-action-dialog', standalone: true, imports: [DialogModule, ButtonModule, FormsModule, NgSelectModule, SbdResultPanelComponent], 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: '720px', maxHeight: '90vh' }\"\n  styleClass=\"sbd-action-dialog-wrapper\"\n  header=\"Browse Actions\">\n\n  <div class=\"sad\">\n\n    <!-- ng-select dropdown -->\n    <div class=\"sad__picker\">\n      <ng-select\n        [items]=\"actions()\"\n        [ngModel]=\"selectedAction()\"\n        (change)=\"onActionSelect($event)\"\n        [searchable]=\"true\"\n        [clearable]=\"false\"\n        bindLabel=\"label\"\n        placeholder=\"Search actions...\"\n        class=\"sad__select\">\n\n        <!-- Selected value display -->\n        <ng-template ng-label-tmp let-item=\"item\">\n          <div class=\"sad__option\">\n            <i class=\"{{ item.icon }} sad__option-icon\"></i>\n            <div class=\"sad__option-text\">\n              <span class=\"sad__option-label\">{{ item.label }}</span>\n              <span class=\"sad__option-sub\">{{ item.subtitle }}</span>\n            </div>\n          </div>\n        </ng-template>\n\n        <!-- Dropdown list item -->\n        <ng-template ng-option-tmp let-item=\"item\" let-search=\"searchTerm\">\n          <div class=\"sad__option\">\n            <i class=\"{{ item.icon }} sad__option-icon\"></i>\n            <div class=\"sad__option-text\">\n              <span class=\"sad__option-label\">{{ item.label }}</span>\n              <span class=\"sad__option-sub\">{{ item.subtitle }}</span>\n            </div>\n          </div>\n        </ng-template>\n\n      </ng-select>\n    </div>\n\n    <!-- Result area -->\n    <div class=\"sad__result\">\n      <app-sbd-result-panel\n        [actionLabel]=\"selectedAction()?.label ?? ''\"\n        [elapsedMs]=\"elapsedMs()\"\n        [status]=\"actionStatus()\"\n        [result]=\"resultContent()\"\n      />\n    </div>\n\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <button pButton label=\"Copy EN\" icon=\"pi pi-copy\"\n      class=\"p-button-outlined p-button-sm\"\n      [disabled]=\"actionStatus() !== 'success' || copying()\"\n      (click)=\"copyResult('en')\">\n    </button>\n    <button pButton label=\"Copy AR\" icon=\"pi pi-copy\"\n      class=\"p-button-outlined p-button-sm\"\n      [disabled]=\"actionStatus() !== 'success' || copying()\"\n      (click)=\"copyResult('ar')\">\n    </button>\n    <button pButton label=\"Copy EN + AR\"\n      [icon]=\"copying() ? 'pi pi-spin pi-spinner' : 'pi pi-copy'\"\n      class=\"p-button-outlined p-button-sm\"\n      [disabled]=\"actionStatus() !== 'success' || copying()\"\n      (click)=\"copyResult('both')\">\n    </button>\n    <button pButton label=\"Close\" icon=\"pi pi-times\" class=\"p-button-outlined p-button-secondary p-button-sm\" (click)=\"closed.emit()\"></button>\n  </ng-template>\n\n</p-dialog>\n", styles: [".sad{display:flex;flex-direction:column;font-family:inherit}.sad__picker{padding:16px 20px;border-bottom:1px solid #e2e8f0}.sad__select{width:100%}.sad__select ::ng-deep .ng-select-container{height:56px}.sad__option{display:flex;align-items:center;gap:10px;padding:2px 0}.sad__option-icon{font-size:14px;color:#64748b;flex-shrink:0;width:20px;text-align:center}.sad__option-text{display:flex;flex-direction:column;gap:2px;min-width:0}.sad__option-label{font-size:13.5px;font-weight:600;color:#1e2e4a}.sad__option-sub{font-size:11.5px;color:#94a3b8}.sad__result{overflow-y:auto;max-height:calc(90vh - 200px)}.sad__result::-webkit-scrollbar{width:4px}.sad__result::-webkit-scrollbar-track{background:transparent}.sad__result::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:4px}.sad__result ::ng-deep .sbd-result-panel{border:none;border-radius:0;box-shadow:none}.sad__select.ng-select .ng-select-container{border:1px solid #e2e8f0;border-radius:8px;min-height:48px;font-family:inherit;box-shadow:none}.sad__select.ng-select .ng-select-container:hover{border-color:#94a3b8}.sad__select.ng-select .ng-select-container .ng-value-container{padding:0 12px}.sad__select.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:13.5px}.sad__select.ng-select .ng-select-container .ng-value-container .ng-value{font-size:13.5px}.sad__select.ng-select .ng-select-container .ng-arrow-wrapper{padding-right:10px}.sad__select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow{border-color:#94a3b8 transparent transparent}.sad__select.ng-select.ng-select-focused .ng-select-container{border-color:#94a3b8;box-shadow:0 0 0 3px #94a3b826}.sad__select.ng-select.ng-select-opened .ng-select-container{border-color:#94a3b8;border-radius:8px 8px 0 0}.sad__select.ng-select.ng-select-opened .ng-select-container .ng-arrow{border-color:transparent transparent #94a3b8}.sad__select .ng-dropdown-panel{border:1px solid #e2e8f0;border-top:none;border-radius:0 0 8px 8px;box-shadow:0 8px 24px #00000014}.sad__select .ng-dropdown-panel .ng-dropdown-panel-items{max-height:520px}.sad__select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:8px 12px;color:#1e2e4a;font-size:13.5px;background:#fff}.sad__select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:hover,.sad__select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#f8fafc}.sad__select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background:#f1f5f9;font-weight:500}.sad__select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .sad__option-label{color:#1e2e4a}.sad__select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .sad__option-icon{color:#475569}.sad__select .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #f1f5f9;padding:8px 12px}\n"] }]
+        }], ctorParameters: () => [] });
+
+class SbdAddNoteDialogComponent {
+    constructor() {
+        this.bookingService = inject(SbdBookingService);
+        this.toast = inject(SbdToastService);
+        this.visible = input(false);
+        this.bookingId = input('');
+        this.product = input('flight');
+        this.closed = output();
+        this.message = signal('');
+        this.action = signal('GENERAL');
+        this.submitting = signal(false);
+        this.actionOptions = [
+            { label: 'General', value: 'GENERAL', icon: 'pi pi-comment' },
+            { label: 'Feedback', value: 'FEEDBACK', icon: 'pi pi-thumbs-up' },
+            { label: 'Remark', value: 'REMARK', icon: 'pi pi-exclamation-circle' },
+        ];
+        effect(() => {
+            if (!this.visible())
+                this.reset();
+        }, { allowSignalWrites: true });
+    }
+    submit() {
+        const msg = this.message().trim();
+        if (!msg)
+            return;
+        this.submitting.set(true);
+        this.bookingService.addNote(this.bookingId(), this.product(), msg, this.action()).subscribe({
+            next: () => {
+                this.toast.success('Note added successfully');
+                this.closed.emit();
+            },
+            error: () => {
+                this.toast.error('Failed to add note. Please try again.');
+                this.submitting.set(false);
+            },
+        });
+    }
+    reset() {
+        this.message.set('');
+        this.action.set('GENERAL');
+        this.submitting.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdAddNoteDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdAddNoteDialogComponent, isStandalone: true, selector: "app-sbd-add-note-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, bookingId: { classPropertyName: "bookingId", publicName: "bookingId", isSignal: true, isRequired: false, transformFunction: null }, product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, 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\"\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:#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:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.and__textarea:disabled{background:#f8fafc;color:#94a3b8;cursor:not-allowed}\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: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdAddNoteDialogComponent, decorators: [{
+            type: Component,
+            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\"\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:#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:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.and__textarea:disabled{background:#f8fafc;color:#94a3b8;cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [] });
+
+class SmartBookingDashboardComponent {
+    constructor() {
+        this.bookingService = inject(SbdBookingService);
+        this.toast = inject(SbdToastService);
+        this.product = signal('flight');
+        this.bookingId = signal('');
+        this.bookingStatus = signal('idle');
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.bookingData = signal(null);
+        this.cancelDialogOpen = signal(false);
+        this.actionDialogOpen = signal(false);
+        this.addNoteDialogOpen = signal(false);
+        this.selectedActionKey = signal(null);
+        this.activeContextTab = signal('changes');
+        this.availableActions = computed(() => (this.product() === 'flight' ? FLIGHT_ACTIONS : HOTEL_ACTIONS).filter(a => !a.hidden));
+        // Handle both correct spelling (dataVerified) and BE typo (dataVerfied)
+        this.dataVerified = computed(() => {
+            const bi = this.bookingData()?.data?.booking_info;
+            return bi?.dataVerified === true || bi?.dataVerfied === true;
+        });
+        // PNR list for the active booking, normalized to a flat array regardless of BE shape.
+        this.cancelPnrInfo = computed(() => {
+            const raw = this.bookingData()?.data?.booking_info?.pnr_info;
+            if (Array.isArray(raw))
+                return raw;
+            if (raw?.pnr)
+                return [{ pnr: raw.pnr, LegDirectionality: 'Departure' }];
+            return [];
+        });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.bookingHistory = computed(() => (this.bookingData()?.data?.booking_info?.history ?? []));
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.bookingNotes = computed(() => (this.bookingData()?.data?.booking_info?.notes ?? []));
+        this.historyGroups = computed(() => {
+            const groups = new Map();
+            for (const e of this.bookingHistory()) {
+                if (!groups.has(e.changedAt))
+                    groups.set(e.changedAt, { changedBy: e.changedBy, changedAt: e.changedAt, entries: [] });
+                const rawField = e.field.split('.').pop() ?? e.field;
+                groups.get(e.changedAt).entries.push({
+                    field: rawField.replace(/\[.*?\]/g, ''),
+                    from: e.previousValue,
+                    to: e.newValue,
+                });
+            }
+            return [...groups.values()];
+        });
+    }
+    fmtNoteDate(date) {
+        if (!date?.sec)
+            return '—';
+        try {
+            return new Date(date.sec * 1000).toLocaleString('en-GB', {
+                day: '2-digit', month: 'short', year: 'numeric',
+                hour: '2-digit', minute: '2-digit',
+            });
+        }
+        catch {
+            return '—';
+        }
+    }
+    formatField(field) {
+        return field
+            .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
+            .replace(/([a-z\d])([A-Z])/g, '$1 $2')
+            .trim();
+    }
+    fmtDate(dt) {
+        if (!dt)
+            return '—';
+        try {
+            return new Date(dt).toLocaleString('en-GB', {
+                day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit',
+            });
+        }
+        catch {
+            return dt;
+        }
+    }
+    openAction(key) {
+        this.selectedActionKey.set(key);
+        this.actionDialogOpen.set(true);
+    }
+    onKeydown(event) {
+        if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+            event.preventDefault();
+            document.querySelector('.sbd-booking-input__field')?.focus();
+        }
+    }
+    lookupBooking() {
+        const id = this.bookingId().trim();
+        if (!id)
+            return;
+        this.bookingStatus.set('loading');
+        this.bookingService.getBooking(id, this.product(), 'booking_info').subscribe({
+            next: ({ data }) => {
+                this.bookingData.set(data);
+                this.bookingStatus.set('success');
+            },
+            error: () => {
+                this.bookingStatus.set('error');
+                this.bookingData.set(null);
+                this.toast.error('Booking not found. Check the ID and try again.');
+            },
+        });
+    }
+    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  <!-- 2-column layout -->\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</div>\n\n<app-sbd-cancel-dialog\n  [visible]=\"cancelDialogOpen()\"\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<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:#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: 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: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3$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,
+            args: [{ selector: 'app-smart-booking-dashboard', standalone: true, imports: [
+                        SbdBookingInputComponent,
+                        SbdWorkflowActionsComponent,
+                        SbdActionGridComponent,
+                        SbdCancelDialogComponent,
+                        SbdFlightItineraryCardComponent,
+                        SbdDataSearchComponent,
+                        SbdActionDialogComponent,
+                        SbdAddNoteDialogComponent,
+                        LowerCasePipe,
+                        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  <!-- 2-column layout -->\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</div>\n\n<app-sbd-cancel-dialog\n  [visible]=\"cancelDialogOpen()\"\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<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:#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']]
+            }] } });
+
+var smartBookingDashboard_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SmartBookingDashboardComponent: SmartBookingDashboardComponent
+});
+
+const smartBookingDashboardRoutes = [
+    {
+        path: '',
+        loadComponent: () => Promise.resolve().then(function () { return smartBookingDashboard_component; }).then(c => c.SmartBookingDashboardComponent),
+    },
+];
+
+class SmartBookingDashboardModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SmartBookingDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SmartBookingDashboardModule, imports: [i1$3.RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SmartBookingDashboardModule, imports: [RouterModule.forChild(smartBookingDashboardRoutes)] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SmartBookingDashboardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(smartBookingDashboardRoutes)],
+                }]
+        }] });
+
+/*
+ * Public API of the Smart Booking Dashboard.
+ * Host apps should import only from this file.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SBD_CONFIG, SBD_DEFAULT_CONFIG, SmartBookingDashboardComponent, SmartBookingDashboardModule, provideSmartBookingDashboard, smartBookingDashboardRoutes };
+//# sourceMappingURL=almatar-smart-booking-dashboard.mjs.map