{{-- ═══════════════════════════════════════════════════════════════════════
     Partial: flights/partials/_bundle-modal.blade.php
     Shows BEFORE entering the 4-step wizard (triggered after getPrice call).
     Mimics AirArabia's Basic / Value / Ultimate columns (Screenshot 1).
     ═══════════════════════════════════════════════════════════════════════ --}}
<div id="bundleModalBackdrop" class="bm-backdrop hidden">
    <div class="bm-sheet" id="bundleSheet">

        {{-- Header --}}
        <div class="bm-hdr">
            <div>
                <div class="bm-hdr-route">
                    <i class="bi bi-airplane-fill" style="transform:rotate(33deg);"></i>
                    <span id="bmRouteText">Select Your Fare</span>
                </div>
                <div class="bm-hdr-sub" id="bmHeaderSub">
                    Choose a bundle that suits your travel needs
                </div>
            </div>
            <button class="bm-x" onclick="Bundle.close()"><i class="bi bi-x-lg"></i></button>
        </div>

        {{-- OND direction tabs (only shown for round-trips) --}}
        <div class="bm-tabs" id="bmTabs" style="display:none;"></div>

        {{-- Bundle columns per OND --}}
        <div class="bm-body" id="bmBody">
            <div class="bm-loading">
                <div class="bm-spinner"></div>
                <div>Loading fare options…</div>
            </div>
        </div>

        {{-- Footer --}}
        <div class="bm-footer">
            <span class="bm-footer-note">
                <i class="bi bi-info-circle me-1"></i>
                Additional fees shown are per person
            </span>
            <button class="bm-skip" onclick="Bundle.skip()">
                <i class="bi bi-dash-circle me-1"></i> No Bundle — Skip
            </button>
        </div>
    </div>
</div>

<style>
/* ── Bundle Modal ──────────────────────────────────────────────────────────── */
.bm-backdrop {
    position:fixed; inset:0;
    background:rgba(10,18,35,.55); backdrop-filter:blur(4px);
    z-index:8000; display:flex; align-items:center; justify-content:center;
    padding:16px; animation:fadeIn .2s ease;
}
.bm-backdrop.hidden { display:none; }

.bm-sheet {
    background:#fff; border-radius:14px;
    width:100%; max-width:960px; max-height:90vh;
    display:flex; flex-direction:column;
    box-shadow:0 24px 80px rgba(0,0,0,.28); overflow:hidden;
}

/* Header */
.bm-hdr {
    padding:18px 24px; border-bottom:1px solid #e2e8f0;
    display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.bm-hdr-route {
    display:flex; align-items:center; gap:8px;
    font-size:1rem; font-weight:800; color:#1e293b;
}
.bm-hdr-sub { font-size:.8rem; color:#64748b; margin-top:3px; }
.bm-x {
    background:#f1f5f9; border:none; width:34px; height:34px;
    border-radius:50%; font-size:1rem; color:#64748b; cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:all .2s;
}
.bm-x:hover { background:#e2e8f0; color:#1e293b; }

/* OND Tabs */
.bm-tabs {
    display:flex; border-bottom:1px solid #e2e8f0; flex-shrink:0;
    background:#f8fafc;
}
.bm-tab {
    flex:1; padding:10px 16px; text-align:center;
    font-size:.78rem; font-weight:700; color:#94a3b8;
    border:none; border-bottom:3px solid transparent;
    background:none; cursor:pointer; transition:all .2s;
}
.bm-tab.active { color:#003580; border-bottom-color:#003580; background:#fff; }

/* Body / bundle columns */
.bm-body { flex:1; overflow-y:auto; padding:20px 24px; }
.bm-loading { display:flex; flex-direction:column; align-items:center; gap:14px; padding:40px; color:#94a3b8; font-weight:600; }
.bm-spinner { width:36px; height:36px; border:3px solid #e2e8f0; border-top-color:#0071c2; border-radius:50%; animation:spin .7s linear infinite; }

/* Columns layout (AirArabia style: Basic / Value / Ultimate) */
.bm-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0; border:1px solid #e2e8f0; border-radius:10px; overflow:hidden; }

/* Single bundle column */
.bm-col { display:flex; flex-direction:column; border-right:1px solid #e2e8f0; }
.bm-col:last-child { border-right:none; }
.bm-col.popular { outline:2px solid #0071c2; outline-offset:-1px; position:relative; z-index:1; }

.bm-col-hdr {
    padding:16px; text-align:center; border-bottom:1px solid #e2e8f0;
}
.bm-col-hdr.basic  { background:#6b7280; color:#fff; }
.bm-col-hdr.value  { background:#4b5563; color:#fff; }
.bm-col-hdr.ultimate { background:#374151; color:#fff; }
.bm-col-hdr-name { font-size:1.1rem; font-weight:800; }
.bm-col-hdr-sub  { font-size:.72rem; opacity:.85; margin-top:3px; }

.bm-col-body { flex:1; padding:14px 16px; }

/* Feature rows */
.bm-feat-section { margin-bottom:12px; }
.bm-feat-label {
    font-size:.62rem; font-weight:800; text-transform:uppercase;
    letter-spacing:.6px; color:#059669; margin-bottom:6px;
}
.bm-feat-label.chargeable { color:#d97706; }
.bm-feat-item {
    display:flex; align-items:flex-start; gap:8px;
    font-size:.78rem; color:#475569; margin-bottom:5px; line-height:1.4;
}
.bm-feat-item i { flex-shrink:0; margin-top:1px; font-size:.82rem; }
.bm-feat-item i.ok { color:#059669; }
.bm-feat-item i.no { color:#94a3b8; }
.bm-feat-item.greyed { color:#94a3b8; }

/* Policy rows */
.bm-policy { padding:10px 16px; border-top:1px solid #f1f5f9; font-size:.72rem; color:#64748b; display:flex; align-items:flex-start; gap:6px; }
.bm-policy i { flex-shrink:0; margin-top:1px; }

/* Footer of column: price + select button */
.bm-col-foot {
    padding:14px 16px; border-top:1px solid #e2e8f0;
    display:flex; align-items:center; justify-content:space-between;
    background:#fafafa;
}
.bm-col-price { font-size:1.2rem; font-weight:900; color:#dc2626; }
.bm-col-price.addon::before { content:'+ '; }
.bm-col-price small { font-size:.65rem; color:#94a3b8; font-weight:500; display:block; }
.bm-select-btn {
    padding:8px 20px; border-radius:20px; border:1.5px solid #1e293b;
    background:#fff; color:#1e293b; font-weight:700; font-size:.8rem;
    cursor:pointer; transition:all .2s; white-space:nowrap;
}
.bm-select-btn:hover { background:#1e293b; color:#fff; }
.bm-col.selected .bm-select-btn { background:#059669; border-color:#059669; color:#fff; }

/* Footer */
.bm-footer {
    padding:12px 24px; border-top:1px solid #e2e8f0;
    display:flex; align-items:center; justify-content:space-between;
    background:#f8fafc; flex-shrink:0; flex-wrap:wrap; gap:8px;
}
.bm-footer-note { font-size:.75rem; color:#94a3b8; }
.bm-skip {
    padding:8px 18px; border-radius:6px; border:1.5px solid #e2e8f0;
    background:#fff; color:#94a3b8; font-size:.78rem; font-weight:700;
    cursor:pointer; transition:all .2s;
}
.bm-skip:hover { border-color:#94a3b8; color:#64748b; }
</style>