/* =========================================
   VANBERT — Flights Marketplace
   SkyAccess-style full-width table layout
   Brand: charcoal + gold (matches rest of site)
   ========================================= */

:root {
  --fl-bg: #0E0E10;
  --fl-surface: #141416;
  --fl-surface-2: #1C1C1E;
  --fl-surface-3: #F5F5F5;           /* light table surface when on top of dark bg */
  --fl-border: rgba(255,255,255,0.08);
  --fl-border-strong: rgba(255,255,255,0.18);
  --fl-text: #E8E6E0;
  --fl-text-muted: rgba(232,230,224,0.55);
  --fl-text-dim: rgba(232,230,224,0.35);
  --fl-accent: #C9A96E;
  --fl-accent-hover: #D4B889;
  --fl-on-accent: #0E0E10;
  --fl-live: #7BC69E;
  --fl-radius: 10px;
}

/* ====== Search section (SkyAccess-style pill) ====== */
.fl-search-section {
  max-width: 1360px; margin: 36px auto 14px; padding: 0 24px;
}
.fl-search {
  display: flex; align-items: stretch; gap: 0;
  background: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.fl-field {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 22px;
  background: transparent;
  border-radius: 999px;
  transition: background .2s ease;
  min-width: 0;
  position: relative;
}
.fl-field + .fl-field::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 1px; background: var(--fl-border);
}
.fl-field:focus-within { background: rgba(255,255,255,0.04); }
.fl-field:focus-within::before,
.fl-field:focus-within + .fl-field::before { opacity: 0; }
.fl-field svg { color: var(--fl-text-dim); flex-shrink: 0; }
.fl-field input,
.fl-field select {
  background: transparent; border: none; outline: none;
  color: var(--fl-text); font-family: 'DM Sans', sans-serif;
  font-size: 14px; width: 100%; min-width: 0; padding: 0;
}
.fl-field input::placeholder { color: var(--fl-text-dim); }
.fl-field input[type=date]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }

.fl-swap-btn {
  background: transparent; border: 1px solid var(--fl-border);
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  color: var(--fl-text-muted); display: flex; align-items: center; justify-content: center;
  align-self: center;
  flex-shrink: 0;
  transition: all .2s ease;
}
.fl-swap-btn:hover { color: var(--fl-accent); border-color: var(--fl-accent); transform: rotate(180deg); }

.fl-btn-clear {
  padding: 0 22px; border-radius: 999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; letter-spacing: 0.3px;
  cursor: pointer; border: none; background: transparent; color: var(--fl-text-muted);
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .2s ease;
  flex-shrink: 0;
}
.fl-btn-clear:hover { color: var(--fl-text); }

.fl-btn-search {
  padding: 12px 32px; border-radius: 999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500;
  cursor: pointer; border: none;
  background: var(--fl-accent); color: var(--fl-on-accent);
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  transition: all .2s ease;
}
.fl-btn-search:hover { background: var(--fl-accent-hover); }

@media (max-width: 960px) {
  .fl-search { flex-direction: column; border-radius: 16px; padding: 6px; gap: 4px; }
  .fl-field { border-radius: 12px; padding: 14px 18px; }
  .fl-field + .fl-field::before { display: none; }
  .fl-swap-btn { align-self: center; margin: 4px auto; transform: rotate(90deg); }
  .fl-swap-btn:hover { transform: rotate(270deg); }
  .fl-btn-clear, .fl-btn-search { width: 100%; justify-content: center; padding: 14px; border-radius: 10px; }
}

/* ====== Filter pills ====== */
.fl-pills { max-width: 1360px; margin: 10px auto; padding: 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.fl-pill {
  background: var(--fl-surface); border: 1px solid var(--fl-border);
  color: var(--fl-text); padding: 8px 16px; border-radius: 999px;
  font-size: 13px; cursor: default; font-family: 'DM Sans', sans-serif;
  display: inline-flex; align-items: center; gap: 8px;
}
.fl-pill[data-clear] { cursor: pointer; transition: background .15s ease; }
.fl-pill[data-clear]:hover { background: var(--fl-surface-2); }
.fl-pill span { color: var(--fl-text-dim); font-size: 11px; margin-left: 4px; }

/* ====== Stats bar ====== */
.fl-stats {
  max-width: 1360px; margin: 8px auto 20px; padding: 16px 24px;
  background: var(--fl-surface); border: 1px solid var(--fl-border); border-radius: var(--fl-radius);
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.fl-live {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--fl-live); font-size: 13px; font-weight: 500;
}
.fl-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--fl-live); position: relative;
}
.fl-live-dot::before {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  background: var(--fl-live); opacity: 0.3; animation: flLivePulse 2s ease infinite;
}
@keyframes flLivePulse { 0%,100% { transform: scale(0.5); opacity: 0.3; } 50% { transform: scale(1.4); opacity: 0; } }
.fl-stat { color: var(--fl-text-muted); font-size: 13px; }
.fl-stat strong { color: var(--fl-text); font-weight: 500; }
.fl-sep { color: var(--fl-text-dim); }
.fl-stat-note { color: var(--fl-text-dim); font-style: italic; font-size: 13px; }
.fl-notify {
  margin-left: auto; padding: 8px 16px; border-radius: 999px;
  background: transparent; border: 1px solid var(--fl-border);
  color: var(--fl-text); font-size: 12px; letter-spacing: 0.5px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-family: 'DM Sans', sans-serif;
  transition: all .2s ease;
}
.fl-notify:hover { border-color: var(--fl-accent); color: var(--fl-accent); }

/* ====== Full-width table (NO sidebar, SkyAccess-style) ====== */
.fl-table-wrap {
  max-width: 1360px; margin: 0 auto 100px; padding: 0 24px;
}
.fl-table-inner {
  background: var(--fl-surface-3);                 /* light surface like SkyAccess */
  border-radius: var(--fl-radius);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}
.fl-table {
  width: 100%; border-collapse: collapse; font-family: 'DM Sans', sans-serif;
  color: #1a1a1a;                                   /* dark text on light table */
}
.fl-table thead th {
  background: #FFFFFF; text-align: left;
  padding: 18px 20px; font-size: 12px;
  color: #666; font-weight: 500;
  border-bottom: 1px solid #E5E5E5;
  cursor: pointer; user-select: none; white-space: nowrap;
}
.fl-table thead th:not([data-sort]) { cursor: default; }
.fl-table thead th[data-sort]:hover { color: #1a1a1a; }
.fl-table thead th[data-sort]::after {
  content: ' ↕'; opacity: 0.35; font-size: 10px;
}
.fl-table thead th[data-sort][data-sorted="asc"]::after { content: ' ↑'; opacity: 1; color: #1a1a1a; }
.fl-table thead th[data-sort][data-sorted="desc"]::after { content: ' ↓'; opacity: 1; color: #1a1a1a; }
.fl-table tbody tr {
  border-bottom: 1px solid #EEE;
  transition: background .12s ease;
  background: #FFFFFF;
}
.fl-table tbody tr:hover { background: #FAFAFA; }
.fl-table tbody tr:last-child { border-bottom: none; }
.fl-table td { padding: 16px 20px; vertical-align: middle; font-size: 14px; color: #1a1a1a; }

/* Aircraft thumbnail */
.fl-c-aircraft { width: 88px; padding-right: 8px; }
.fl-c-aircraft img {
  width: 72px; height: 48px; object-fit: cover; border-radius: 6px;
  display: block;
}

/* Airport columns */
.fl-c-airport { min-width: 180px; line-height: 1.3; }
.fl-icao {
  color: #888; font-weight: 500;
  margin-right: 4px; font-size: 14px;
}
.fl-loc { color: #1a1a1a; font-weight: 600; font-size: 14px; }

/* Time column */
.fl-c-time { min-width: 170px; position: relative; padding-left: 28px !important; }
.fl-day-time { line-height: 1.4; }
.fl-day { font-size: 14px; color: #1a1a1a; font-weight: 500; }
.fl-time { font-size: 14px; color: #1a1a1a; font-weight: 500; }
.fl-soon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: #4A90E2;
  animation: flSoonPulse 1.8s ease infinite;
}
@keyframes flSoonPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; box-shadow: 0 0 0 4px rgba(74,144,226,0.2); } }

.fl-c-dur { color: #1a1a1a; font-size: 14px; }
.fl-c-model { font-size: 14px; max-width: 180px; color: #1a1a1a; }
.fl-c-seats { text-align: left; font-size: 15px; color: #1a1a1a; font-weight: 500; }

/* Price column */
.fl-c-price { min-width: 120px; }
.fl-price-num { font-size: 17px; color: #1a1a1a; font-weight: 600; line-height: 1; }
.fl-badge {
  display: inline-block; margin-top: 6px; font-size: 11px;
  padding: 3px 9px; border-radius: 3px; font-weight: 500;
  border: 1px solid transparent;
}
.fl-badge-choice {
  background: #E8F5EC; color: #1B7F3A; border-color: #C9E7D2;
  display: inline-flex; align-items: center; gap: 4px;
}
.fl-badge-instant {
  background: #FFF4E5; color: #A85A00; border-color: #FFE4C4;
  margin-left: 4px;
  display: inline-flex; align-items: center; gap: 4px;
}

/* Actions column */
.fl-c-actions { text-align: right; white-space: nowrap; padding-right: 16px !important; }
.fl-btn-ghost, .fl-btn-primary {
  padding: 8px 14px; border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; cursor: pointer;
  font-weight: 500; transition: all .15s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.fl-btn-ghost {
  background: #FFFFFF; border: 1px solid #DDD; color: #1a1a1a;
}
.fl-btn-ghost:hover { border-color: #999; background: #FAFAFA; }
.fl-btn-primary {
  background: var(--fl-accent); color: var(--fl-on-accent); border: 1px solid var(--fl-accent);
  margin-left: 6px; font-weight: 600;
}
.fl-btn-primary:hover { background: var(--fl-accent-hover); border-color: var(--fl-accent-hover); }
.fl-btn-fav {
  background: transparent; border: none; padding: 6px; margin-left: 6px;
  color: #999; cursor: pointer; vertical-align: middle;
  transition: color .15s ease, transform .15s ease;
}
.fl-btn-fav:hover { color: #E74C3C; transform: scale(1.1); }
.fl-btn-fav.active { color: #E74C3C; }

/* Empty state */
.fl-empty {
  padding: 80px 24px; text-align: center; color: #666;
  background: #FFFFFF;
}
.fl-empty h3 { color: #1a1a1a; font-size: 24px; margin: 0 0 8px; font-family: 'Cormorant Garamond', serif; font-weight: 300; }
.fl-empty p { max-width: 440px; margin: 0 auto 16px; line-height: 1.6; font-size: 14px; }
.fl-empty a { color: var(--fl-accent); text-decoration: underline; }

/* Responsive: horizontal scroll on narrow screens */
@media (max-width: 1100px) {
  .fl-table-inner { overflow-x: auto; }
  .fl-table { min-width: 1020px; }
}

/* ====== Booking modal ====== */
.fl-modal {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(0,0,0,0.82); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.fl-modal[hidden] { display: none !important; }
.fl-modal-card {
  background: var(--fl-surface); border: 1px solid var(--fl-border);
  border-radius: 14px; max-width: 520px; width: 100%; padding: 36px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6);
  max-height: 92vh; overflow-y: auto;
}
.fl-modal-close {
  float: right; background: transparent; border: 1px solid var(--fl-border);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  color: var(--fl-text-muted); margin: -12px -12px 0 0;
}
.fl-modal-close:hover { color: var(--fl-accent); border-color: var(--fl-accent); }
.fl-modal h2 { font-family: 'Cormorant Garamond', serif; font-size: 28px; color: var(--fl-text); margin: 0 0 6px; font-weight: 400; }
.fl-modal .fl-modal-route { color: var(--fl-text); font-size: 14px; margin-bottom: 2px; }
.fl-modal .fl-modal-meta { color: var(--fl-text-muted); font-size: 12px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--fl-border); }
.fl-modal-form .f-row { margin-bottom: 14px; }
.fl-modal-form label {
  display: block; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--fl-text-dim); margin-bottom: 6px;
}
.fl-modal-form input, .fl-modal-form textarea {
  width: 100%; padding: 12px 14px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--fl-border); border-radius: 8px;
  color: var(--fl-text); font-family: 'DM Sans', sans-serif; font-size: 14px;
}
.fl-modal-form input:focus, .fl-modal-form textarea:focus { outline: none; border-color: var(--fl-accent); }
.fl-modal-form textarea { resize: vertical; min-height: 72px; }
.fl-modal-form button {
  width: 100%; padding: 14px; background: var(--fl-accent); color: var(--fl-on-accent);
  border: none; border-radius: 999px; font-family: 'DM Sans', sans-serif;
  font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600;
  cursor: pointer; margin-top: 8px;
}
.fl-modal-form button:hover { background: var(--fl-accent-hover); }
.fl-modal-success {
  text-align: center; padding: 20px 0;
}
.fl-modal-success-icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 18px;
  background: rgba(201,169,110,0.12); color: var(--fl-accent);
  display: flex; align-items: center; justify-content: center;
}
.fl-modal-success h3 { font-family: 'Cormorant Garamond', serif; font-size: 28px; color: var(--fl-text); margin: 0 0 10px; font-weight: 300; }
.fl-modal-success p { color: var(--fl-text-muted); font-size: 14px; line-height: 1.6; margin: 0; }

/* ====== Above-table info bar ====== */
.fl-info-bar {
  max-width: 1360px; margin: 0 auto; padding: 0 24px 14px;
  color: var(--fl-text-dim); font-size: 12px; line-height: 1.5;
}
.fl-info-bar a { color: var(--fl-accent); }

/* Hide the sidebar that existed before */
.fl-sidebar { display: none !important; }
.fl-layout { display: block !important; }