/* ============================================================
   BDT Departures-Board Loader Overlay
   Full-screen airport departures board shown during flight search.
   Scoped under .bdt-loader-overlay / body.bdt-loader-active so it
   cannot affect any existing site styling.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* --- Hide the real page behind the overlay --- */
body.bdt-loader-active .main-container.loader-sec,
body.bdt-loader-active header,
body.bdt-loader-active nav,
body.bdt-loader-active footer,
body.bdt-loader-active .modern-footer { display: none !important; }
body.bdt-loader-active { overflow: hidden !important; }

/* --- Overlay shell --- */
.bdt-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: radial-gradient(ellipse at top, #0f1f3d 0%, #0a1428 55%, #060d1c 100%);
    color: #fcd34d;
    font-family: 'DM Sans', system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(18px, 4vh, 48px) 16px;
    overflow-y: auto;
    -webkit-font-smoothing: antialiased;
    animation: bdt-fade-in 0.5s ease both;
}

@keyframes bdt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- Brand / logo --- */
.bdt-loader-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: clamp(14px, 3vh, 28px);
    text-align: center;
}

.bdt-loader-brand img {
    max-height: 52px;
    width: auto;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.bdt-loader-brand .bdt-brand-fallback {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #fbbf24;
    letter-spacing: 1px;
}

.bdt-loader-tagline {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.05rem, 2.4vw, 1.5rem);
    font-weight: 500;
    color: #cbd5e1;
    letter-spacing: 0.5px;
}

/* --- Animated plane --- */
.bdt-loader-plane {
    margin: 6px 0 clamp(10px, 2.5vh, 22px);
}

.bdt-loader-plane svg {
    width: 64px;
    height: 64px;
    color: #fbbf24;
    animation: bdt-plane-float 3s ease-in-out infinite;
}

@keyframes bdt-plane-float {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50%      { transform: translateY(-10px) rotate(-2deg); }
}

/* --- Departures card --- */
.bdt-departures-card {
    width: 100%;
    max-width: 920px;
    background: linear-gradient(160deg, #1e3a8a 0%, #1e40af 100%);
    border: 1.5px solid rgba(212, 175, 55, 0.45);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

/* --- Card header --- */
.bdt-departures-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px clamp(16px, 3vw, 28px);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.05));
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

.bdt-departures-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.4rem, 4vw, 2.1rem);
    font-weight: 700;
    letter-spacing: 3px;
    color: #fbbf24;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 12px;
}

.bdt-departures-title .bdt-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
    animation: bdt-pulse 1.6s infinite;
}

@keyframes bdt-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); }
    70%  { box-shadow: 0 0 0 12px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.bdt-departures-clock {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(1rem, 3vw, 1.5rem);
    font-weight: 700;
    color: #fcd34d;
    letter-spacing: 1px;
    text-align: right;
}

.bdt-departures-clock .bdt-clock-label {
    display: block;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 2px;
    color: #93c5fd;
    text-transform: uppercase;
}

/* --- Table --- */
.bdt-departures-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'DM Sans', sans-serif;
}

.bdt-departures-table thead th {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #93c5fd;
    text-align: left;
    padding: 12px clamp(10px, 2vw, 18px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
    background: rgba(0, 0, 0, 0.18);
}

.bdt-departures-table tbody td {
    padding: 14px clamp(10px, 2vw, 18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 0.95rem;
    color: #e2e8f0;
    vertical-align: middle;
}

.bdt-departures-table tbody tr {
    opacity: 0;
    transform: translateY(8px);
    animation: bdt-row-reveal 0.6s ease forwards;
}

.bdt-departures-table tbody tr:nth-child(1) { animation-delay: 0.4s; }
.bdt-departures-table tbody tr:nth-child(2) { animation-delay: 1.2s; }
.bdt-departures-table tbody tr:nth-child(3) { animation-delay: 2.0s; }
.bdt-departures-table tbody tr:nth-child(4) { animation-delay: 2.8s; }
.bdt-departures-table tbody tr:nth-child(5) { animation-delay: 3.6s; }

@keyframes bdt-row-reveal {
    to { opacity: 1; transform: translateY(0); }
}

.bdt-col-step {
    font-family: 'JetBrains Mono', monospace;
    color: #fcd34d;
    font-weight: 700;
    white-space: nowrap;
}

.bdt-col-step .bdt-check {
    color: #34d399;
    margin-right: 6px;
}

.bdt-col-flight { font-weight: 600; color: #f1f5f9; }

.bdt-col-route {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #fbbf24;
    white-space: nowrap;
}

.bdt-col-route .bdt-route-arrow { color: #93c5fd; margin: 0 6px; }

.bdt-col-time {
    font-family: 'JetBrains Mono', monospace;
    color: #cbd5e1;
    white-space: nowrap;
}

.bdt-col-status {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 1px;
    color: #34d399;
    text-transform: uppercase;
    white-space: nowrap;
}

/* --- Progress section --- */
.bdt-progress-wrap {
    padding: clamp(16px, 3vw, 26px);
    background: rgba(0, 0, 0, 0.18);
    border-top: 1px solid rgba(212, 175, 55, 0.25);
}

.bdt-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 1px;
    color: #93c5fd;
    text-transform: uppercase;
}

.bdt-progress-meta .bdt-progress-pct { color: #fcd34d; font-weight: 700; }

.bdt-progress-track {
    position: relative;
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: visible;
}

.bdt-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #d4af37, #fbbf24, #fcd34d);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.6);
    transition: width 0.25s linear;
}

.bdt-progress-plane {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    color: #fcd34d;
    transition: left 0.25s linear;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.8));
}

.bdt-progress-plane svg { width: 22px; height: 22px; display: block; }

/* --- Still searching bar --- */
.bdt-still-searching {
    margin: clamp(16px, 3vh, 26px) auto 8px;
    max-width: 920px;
    width: 100%;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #fcd34d;
    text-transform: uppercase;
    padding: 12px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 10px;
    background: rgba(30, 58, 138, 0.35);
    animation: bdt-still-pulse 1.8s ease-in-out infinite;
}

@keyframes bdt-still-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* --- Footer note --- */
.bdt-loader-footnote {
    margin-top: clamp(10px, 2vh, 18px);
    font-size: 0.8rem;
    color: #94a3b8;
    text-align: center;
    letter-spacing: 0.5px;
}

/* --- Mobile responsive --- */
@media (max-width: 768px) {
    .bdt-departures-table thead th.bdt-col-route-h,
    .bdt-departures-table thead th.bdt-col-time-h,
    .bdt-departures-table tbody td.bdt-col-route,
    .bdt-departures-table tbody td.bdt-col-time { display: none; }

    .bdt-departures-title { letter-spacing: 1.5px; }
    .bdt-departures-table tbody td { font-size: 0.85rem; padding: 12px 10px; }
    .bdt-loader-plane svg { width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
    .bdt-loader-overlay,
    .bdt-loader-plane svg,
    .bdt-departures-table tbody tr,
    .bdt-departures-title .bdt-dot,
    .bdt-still-searching { animation: none !important; }
    .bdt-departures-table tbody tr { opacity: 1; transform: none; }
}
