/* ═══════════════════════════════════════════════════════════════════════════
   SAYAHAT TRAVEL AGENCY — PROFESSIONAL THEME v3
   A bold, premium, site-wide unified visual layer.
   Loaded LAST on every screen (customer + admin) via base.html so it gives the
   whole system one consistent identity while preserving every existing hook.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
  --v3-ink:        #0b2138;
  --v3-ink-soft:   #35506e;
  --v3-canvas:     #f3f7fb;
  --v3-surface:    rgba(255, 255, 255, .96);
  --v3-surface-2:  #ffffff;
  --v3-line:       rgba(12, 48, 82, .09);
  --v3-line-soft:  rgba(12, 48, 82, .06);
  --v3-navy:       #0b2f4e;
  --v3-teal:       #1282a3;
  --v3-teal-light: #1ba0c4;
  --v3-saffron:    #f0a03a;
  --v3-gold:       #e0b14e;
  --v3-accent:     #e4573b;
  --v3-green:      #17a673;
  --v3-red:        #e5484d;
  --v3-purple:     #7c6cf0;
  --v3-shadow:     0 16px 44px rgba(11, 47, 78, .10);
  --v3-shadow-lg:  0 26px 70px rgba(11, 47, 78, .16);
  --v3-shadow-btn: 0 12px 26px rgba(18, 130, 163, .30);
  --v3-radius:     20px;
  --v3-radius-sm:  14px;
  --v3-font: 'Vazirmatn', 'Inter', 'Segoe UI', Tahoma, sans-serif;
  --v3-navbar-h:   78px;
  --v3-ease:       cubic-bezier(.22, .68, .26, 1);
}

:root[data-theme="dark"] {
  --v3-ink:        #eaf3fc;
  --v3-ink-soft:   #b8cde0;
  --v3-canvas:     #081420;
  --v3-surface:    rgba(17, 34, 54, .94);
  --v3-surface-2:  #12233a;
  --v3-line:       rgba(196, 228, 249, .13);
  --v3-line-soft:  rgba(196, 228, 249, .08);
  --v3-shadow:     0 16px 44px rgba(0, 0, 0, .30);
  --v3-shadow-lg:  0 26px 70px rgba(0, 0, 0, .42);
  --v3-shadow-btn: 0 12px 26px rgba(27, 160, 196, .30);
}

html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--v3-font);
  background-color: var(--v3-canvas);
  color: var(--v3-ink-soft);
  letter-spacing: -.01em;
  background-image:
    radial-gradient(700px 320px at 100% -70px, rgba(18, 130, 163, .10), transparent 70%),
    radial-gradient(560px 300px at -6% 40%, rgba(240, 160, 58, .06), transparent 72%),
    radial-gradient(500px 260px at 55% 110%, rgba(18, 130, 163, .09), transparent 70%);
  background-repeat: no-repeat;
}
body { background-attachment: fixed; }

h1, h2, h3, h4, h5, h6 { color: var(--v3-ink); letter-spacing: -.02em; }

::selection { background: var(--v3-teal); color: #fff; }
:focus-visible { outline: 3px solid rgba(18, 130, 163, .45); outline-offset: 2px; }

/* ── Scrollbar ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--v3-canvas); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--v3-teal-light), var(--v3-teal));
  border-radius: 6px; border: 2px solid var(--v3-canvas);
}
::-webkit-scrollbar-thumb:hover { background: var(--v3-navy); }

/* ── Top bar ───────────────────────────────────────────────────────────── */
.top-bar {
  background: linear-gradient(100deg, #061f36 0%, #0d3d5c 58%, #1282a3 120%);
  letter-spacing: .02em;
}

/* ── Navbar ────────────────────────────────────────────────────────────── */
.main-nav {
  border-bottom: 1px solid var(--v3-line-soft);
  box-shadow: 0 10px 34px rgba(11, 47, 78, .08);
  backdrop-filter: saturate(180%) blur(12px);
  background: rgba(255, 255, 255, .86);
}
:root[data-theme="dark"] .main-nav { background: rgba(10, 24, 40, .9); }

.main-nav .brand { font-weight: 900; letter-spacing: -.03em; }
.main-nav .brand-not { border: none; }

.main-nav .nav-link {
  min-height: 42px; display: inline-flex; align-items: center; gap: .32rem;
  font-weight: 600; color: var(--v3-ink-soft); position: relative;
  padding-inline: .9rem; border-radius: 12px;
  transition: color .22s var(--v3-ease), background .22s var(--v3-ease);
}
.main-nav .nav-link:hover { color: var(--v3-teal); background: rgba(18, 130, 163, .08); }
.main-nav .nav-link.active { color: var(--v3-teal); background: rgba(18, 130, 163, .12); }

.main-nav .btn-accent {
  background: linear-gradient(135deg, #f0a03a, #e0762a);
  box-shadow: 0 10px 24px rgba(224, 118, 42, .34);
  border-radius: 12px; font-weight: 800;
}

.admin-dash-btn {
  background: linear-gradient(135deg, #0b2f4e, #1282a3);
  box-shadow: 0 8px 20px rgba(18, 130, 163, .30);
  border-radius: 12px; font-weight: 700;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero, .page-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 420px at 85% -20%, rgba(18, 130, 163, .32), transparent 62%),
    radial-gradient(720px 380px at 8% 110%, rgba(240, 160, 58, .22), transparent 62%),
    linear-gradient(135deg, #071e33 0%, #0c3a59 55%, #0e5f84 100%);
}
.page-hero { border-radius: 0 0 34px 34px; }
.hero h1, .page-hero h1 {
  color: #fff; font-weight: 900; letter-spacing: -.045em; line-height: 1.15;
}
.hero p, .page-hero p { color: rgba(238, 250, 255, .86); }

/* Section headers */
.section-title, .section-header h2 { color: var(--v3-ink); font-weight: 900; }
.section-title::after, .section-header h2::after {
  content: ""; display: block; width: 56px; height: 4px; margin-top: .7rem;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--v3-teal), var(--v3-saffron));
}

/* ── Cards & surfaces ──────────────────────────────────────────────────── */
.tour-card, .visa-card, .ticket-card, .service-card, .testimonial-card,
.contact-card, .quick-card, .glass-card, .booking-card, .detail-card,
.track-card, .compare-card, .filter-bar, .flight-card {
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-radius);
  box-shadow: var(--v3-shadow);
  background: var(--v3-surface);
  transition: transform .3s var(--v3-ease), box-shadow .3s var(--v3-ease), border-color .3s var(--v3-ease);
}
.tour-card:hover, .visa-card:hover, .ticket-card:hover, .service-card:hover,
.testimonial-card:hover, .contact-card:hover, .quick-card:hover,
.compare-card:hover, .flight-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--v3-shadow-lg);
  border-color: rgba(18, 130, 163, .35);
}

.tour-card { border-radius: 22px; overflow: hidden; }
.tour-card .title, .visa-card .vc-title, .ticket-card .title,
.detail-card h1, .detail-card h2, .detail-card h3 { color: var(--v3-ink); }

/* Feature / service boxes */
.feature-box, .service-box, .why-box {
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-radius-sm);
  background: var(--v3-surface);
  box-shadow: var(--v3-shadow);
  transition: transform .28s var(--v3-ease), box-shadow .28s var(--v3-ease);
}
.feature-box:hover, .service-box:hover, .why-box:hover { transform: translateY(-4px); box-shadow: var(--v3-shadow-lg); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn { border-radius: 13px; font-weight: 800; min-height: 42px; transition: transform .2s var(--v3-ease), box-shadow .2s var(--v3-ease), filter .2s var(--v3-ease); }
.btn-primary {
  background: linear-gradient(135deg, var(--v3-teal-light), var(--v3-teal) 55%, var(--v3-navy));
  border: none; box-shadow: var(--v3-shadow-btn); color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, #27aed4, #0f6f90);
  box-shadow: 0 16px 32px rgba(18, 130, 163, .40);
  transform: translateY(-2px); color: #fff;
}
.btn-accent, .btn-gold {
  background: linear-gradient(135deg, #f0a03a, #e0762a);
  border: none; box-shadow: 0 12px 26px rgba(224, 118, 42, .34); color: #fff;
}
.btn-accent:hover, .btn-gold:hover { filter: brightness(1.05); transform: translateY(-2px); color: #fff; }
.btn-outline-primary { border: 2px solid var(--v3-teal); color: var(--v3-teal); }
.btn-outline-primary:hover { background: var(--v3-teal); color: #fff; }

.btn { transition: transform .2s var(--v3-ease), box-shadow .2s var(--v3-ease), background-color .2s var(--v3-ease); }
.btn:active { transform: translateY(0) scale(.97); }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-control, .form-select, .filter-bar input, .filter-bar select,
.floating-label input, .floating-label select, .floating-label textarea,
.fg input, .fg select, .fg textarea {
  border: 1.5px solid var(--v3-line);
  border-radius: 13px; min-height: 48px;
  background: var(--v3-surface-2); color: var(--v3-ink);
  box-shadow: 0 1px 3px rgba(11, 47, 78, .04);
  transition: border-color .2s var(--v3-ease), box-shadow .2s var(--v3-ease);
}
textarea.form-control, .floating-label textarea, .fg textarea { min-height: 118px; }
.form-control:focus, .form-select:focus, .filter-bar input:focus, .filter-bar select:focus,
.floating-label input:focus, .floating-label select:focus, .floating-label textarea:focus,
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color: var(--v3-teal);
  box-shadow: 0 0 0 4px rgba(18, 130, 163, .16);
  background: var(--v3-surface-2);
}
.form-control::placeholder { color: var(--v3-ink-soft); opacity: .7; }
.form-label, label { color: var(--v3-ink); font-weight: 800; }

/* ── Tables ────────────────────────────────────────────────────────────── */
.table-responsive { border: 1px solid var(--v3-line); border-radius: 16px; background: var(--v3-surface); box-shadow: var(--v3-shadow); }
.table > :not(caption) > * > * { padding: .95rem .9rem; border-bottom-color: var(--v3-line-soft); vertical-align: middle; }
.table thead th {
  color: var(--v3-navy); background: rgba(18, 130, 163, .08);
  font-size: .76rem; font-weight: 900; letter-spacing: .02em; white-space: nowrap;
}
.table tbody tr { transition: background-color .18s ease; }
.table tbody tr:hover { background: rgba(18, 130, 163, .06); }

/* ── Badges ────────────────────────────────────────────────────────────── */
.badge, .badge-price, .badge-seats {
  border-radius: 999px; padding: .4rem .72rem; font-weight: 800; letter-spacing: .01em;
}
.badge.bg-success, .badge.bg-primary, .badge.bg-warning, .badge.bg-danger { color: #fff; }

/* ── Pagination ────────────────────────────────────────────────────────── */
.pagination .page-link { color: var(--v3-teal); background: var(--v3-surface); border-color: var(--v3-line); border-radius: 10px; margin: 0 2px; }
.pagination .page-item.active .page-link { background: linear-gradient(135deg, var(--v3-teal-light), var(--v3-teal)); border-color: var(--v3-teal); color: #fff; box-shadow: 0 8px 18px rgba(18, 130, 163, .30); }

/* ── Alerts / toasts ───────────────────────────────────────────────────── */
.alert { border-radius: 14px; border: 1px solid var(--v3-line); box-shadow: var(--v3-shadow); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.footer { background: linear-gradient(180deg, #061c30, #0a2c47 60%, #0b3452); }
.footer h5 { color: #fff; font-weight: 800; }
.footer .footer-links a { color: rgba(238, 250, 255, .74); }
.footer .footer-links a:hover { color: var(--v3-saffron); transform: translateX(-3px); }

/* ── Admin shell ───────────────────────────────────────────────────────── */
body.admin-shell { background-color: var(--v3-canvas); }

.admin-sidebar {
  background:
    radial-gradient(160% 90% at 0 0, rgba(75, 190, 230, .22), transparent 55%),
    linear-gradient(180deg, #082338 0%, #0c3b5a 58%, #072c46 100%);
}
.admin-nav-link {
  border: 1px solid transparent; border-radius: 12px; font-weight: 600;
  color: rgba(238, 250, 255, .78);
}
.admin-nav-link:hover { color: #fff; border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); }
.admin-nav-link.active {
  background: linear-gradient(135deg, #1282a3, #1ba0c4);
  color: #fff; box-shadow: 0 10px 24px rgba(18, 130, 163, .35);
}

.admin-topbar {
  background: rgba(255, 255, 255, .86);
  border-bottom: 1px solid var(--v3-line);
  box-shadow: 0 4px 20px rgba(11, 47, 78, .06);
  backdrop-filter: saturate(180%) blur(10px);
}
:root[data-theme="dark"] .admin-topbar { background: rgba(12, 28, 46, .9); }

body.admin-shell .err-card, body.admin-shell .admin-card,
body.admin-shell .content-card, body.admin-shell .report-card,
body.admin-shell .settings-card {
  border: 1px solid var(--v3-line); border-radius: var(--v3-radius);
  box-shadow: var(--v3-shadow); background: var(--v3-surface);
}
body.admin-shell .card-header {
  background: linear-gradient(180deg, rgba(18, 130, 163, .07), rgba(255, 255, 255, 0));
  border-bottom: 1px solid var(--v3-line);
}

/* Admin theme toggle, search, buttons */
.admin-search, .admin-top-btn, .admin-lang-btn, .admin-burger {
  border: 1px solid var(--v3-line); border-radius: 12px;
  box-shadow: 0 2px 6px rgba(11, 47, 78, .05);
  background: var(--v3-surface-2);
}
.admin-search:focus-within { border-color: var(--v3-teal); box-shadow: 0 0 0 4px rgba(18, 130, 163, .14); }
.admin-top-btn:hover, .admin-burger:hover, .admin-lang-btn:hover { transform: translateY(-1px); }

/* ── Auth (customer) ───────────────────────────────────────────────────── */
body:has(.auth-page) {
  background: linear-gradient(150deg, #061e34, #0f486c 55%, #1282a3);
  background-attachment: fixed;
}
.auth-layout { border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 36px 100px rgba(2, 15, 30, .55); }
.auth-card .btn-auth {
  background: linear-gradient(135deg, var(--v3-teal-light), var(--v3-teal));
  box-shadow: 0 12px 28px rgba(18, 130, 163, .34);
}
.auth-card .btn-auth:hover { filter: brightness(1.06); transform: translateY(-2px); }

/* ── Filters / chips ───────────────────────────────────────────────────── */
.filter-chips .chip, .filter-chip {
  border: 1.5px solid var(--v3-line); border-radius: 999px;
  background: var(--v3-surface); color: var(--v3-ink-soft); font-weight: 700;
  transition: all .2s var(--v3-ease);
}
.filter-chips .chip:hover, .filter-chip:hover { border-color: var(--v3-teal); color: var(--v3-teal); }
.filter-chips .chip.active, .filter-chip.active {
  background: linear-gradient(135deg, var(--v3-teal-light), var(--v3-teal));
  color: #fff; border-color: transparent; box-shadow: 0 8px 18px rgba(18, 130, 163, .30);
}

/* ── Mileage: shared micro-interactions ────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .btn, .admin-top-btn, .admin-burger, .admin-lang-btn, .nav-link {
    transition: transform .2s var(--v3-ease), box-shadow .2s var(--v3-ease), background-color .2s var(--v3-ease), color .2s var(--v3-ease);
  }
  .btn:hover, .admin-top-btn:hover, .admin-burger:hover, .admin-lang-btn:hover { transform: translateY(-2px); }
}

/* ── Responsive polish ─────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .page-hero { border-radius: 0 0 22px 22px; }
  .main-nav { backdrop-filter: none; }
}
@media (max-width: 575.98px) {
  .page-hero h1, .hero h1 { font-size: clamp(2rem, 11vw, 2.8rem); }
  .tour-card, .visa-card, .ticket-card, .service-card, .testimonial-card,
  .contact-card, .quick-card, .glass-card, .booking-card, .detail-card,
  .track-card, .compare-card, .filter-bar, .flight-card { border-radius: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — PAGE-LEVEL HARDCODED SURFACES & NAVY TEXT
   Many templates ship their own <style> blocks with background:#fff cards and
   color:var(--pri) headings. In dark mode those stay white while the v3 text
   tokens flip light (and navy headings sit on dark v3 surfaces), so the text
   becomes unreadable. This layer runs LAST to fix every such surface site-wide.
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-theme=dark] .bg-navy,
:root[data-theme=dark] .card,
:root[data-theme=dark] .form-card,
:root[data-theme=dark] .fl-form-card,
:root[data-theme=dark] .stat-card,
:root[data-theme=dark] .stat-box,
:root[data-theme=dark] .an-card,
:root[data-theme=dark] .kpi-box,
:root[data-theme=dark] .backup-card,
:root[data-theme=dark] .sched-card,
:root[data-theme=dark] .emp-card,
:root[data-theme=dark] .profile-card,
:root[data-theme=dark] .section-card,
:root[data-theme=dark] .export-card,
:root[data-theme=dark] .ac-card,
:root[data-theme=dark] .as-card,
:root[data-theme=dark] .bg-card,
:root[data-theme=dark] .cat-card,
:root[data-theme=dark] .vc-card,
:root[data-theme=dark] .rep-card,
:root[data-theme=dark] .rates-card,
:root[data-theme=dark] .role-card,
:root[data-theme=dark] .info-card,
:root[data-theme=dark] .ref-card,
:root[data-theme=dark] .fl-card,
:root[data-theme=dark] .notif-card,
:root[data-theme=dark] .notif-stat,
:root[data-theme=dark] .sal-table,
:root[data-theme=dark] .req-card,
:root[data-theme=dark] .app-row,
:root[data-theme=dark] .ev-stat,
:root[data-theme=dark] .app-mini,
:root[data-theme=dark] .lead-card,
:root[data-theme=dark] .wa-card,
:root[data-theme=dark] .rc-compare,
:root[data-theme=dark] .rc-action .btn-inquiry,
:root[data-theme=dark] .gateway-card,
:root[data-theme=dark] .method-card,
:root[data-theme=dark] .vd-nav {
  background: var(--v3-surface) !important;
}

:root[data-theme=dark] .gateway-card.selected {
  background: rgba(18, 130, 163, .16) !important;
  border-color: var(--v3-teal);
}

:root[data-theme=dark] .table thead th {
  color: var(--v3-ink);
  background: rgba(18, 130, 163, .16);
}

:root[data-theme=dark] .card-header,
:root[data-theme=dark] .kpi-box .kval,
:root[data-theme=dark] .stat-box2 .num,
:root[data-theme=dark] .amount-box .amt,
:root[data-theme=dark] .vd-section-title h3,
:root[data-theme=dark] .fee-row.total,
:root[data-theme=dark] .fl-quick-label { color: var(--v3-ink) !important; }

:root[data-theme=dark] .faq-q i { color: var(--v3-teal); }
:root[data-theme=dark] .rc-filter-btn:hover { border-color: var(--v3-teal); color: var(--v3-teal); }
:root[data-theme=dark] .breadcrumb-custom .breadcrumb-item a:hover { color: var(--v3-ink); }

/* Voucher / ticket documents must STAY light even in dark mode (print sheets) */
:root[data-theme=dark] .voucher,
:root[data-theme=dark] .ticket { background: #fff !important; color: #111 !important; }
:root[data-theme=dark] .voucher h1, :root[data-theme=dark] .voucher h2,
:root[data-theme=dark] .voucher h3, :root[data-theme=dark] .voucher h4,
:root[data-theme=dark] .voucher h5, :root[data-theme=dark] .voucher h6,
:root[data-theme=dark] .ticket h1,  :root[data-theme=dark] .ticket h2,
:root[data-theme=dark] .ticket h3,  :root[data-theme=dark] .ticket h4,
:root[data-theme=dark] .ticket h5,  :root[data-theme=dark] .ticket h6 { color: #111 !important; }

/* Floating labels stay readable on dark inputs */
:root[data-theme=dark] .floating-label label {
  background: var(--v3-surface-2);
  color: var(--v3-ink-soft);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — BOOTSTRAP COMPONENT SURFACES
   Bootstrap components (dropdowns, modals, offcanvas, lists, accordions) keep
   their light defaults even when our theme is dark, because the page does not
   toggle data-bs-theme. Flip their surfaces/text here so night mode is coherent.
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-theme=dark] .dropdown-menu,
:root[data-theme=dark] .modal-content,
:root[data-theme=dark] .offcanvas,
:root[data-theme=dark] .popover,
:root[data-theme=dark] .list-group-item,
:root[data-theme=dark] .list-group,
:root[data-theme=dark] .accordion-item,
:root[data-theme=dark] .accordion-button,
:root[data-theme=dark] .accordion-body {
  background: var(--v3-surface-2);
  color: var(--v3-ink);
  border-color: var(--v3-line);
}

:root[data-theme=dark] .dropdown-item {
  color: var(--v3-ink-soft);
}
:root[data-theme=dark] .dropdown-item:hover,
:root[data-theme=dark] .dropdown-item:focus {
  background: rgba(18, 130, 163, .16);
  color: var(--v3-ink);
}
:root[data-theme=dark] .dropdown-divider {
  border-color: var(--v3-line);
}
:root[data-theme=dark] .dropdown-menu.show {
  box-shadow: var(--v3-shadow);
}

:root[data-theme=dark] .modal-header,
:root[data-theme=dark] .modal-footer,
:root[data-theme=dark] .offcanvas-header {
  border-color: var(--v3-line);
  color: var(--v3-ink);
}
:root[data-theme=dark] .modal-backdrop {
  background-color: rgba(2, 8, 16, .72);
}

:root[data-theme=dark] .popover-body,
:root[data-theme=dark] .offcanvas-body {
  color: var(--v3-ink-soft);
}
:root[data-theme=dark] .popover-header {
  background: var(--v3-surface-2);
  color: var(--v3-ink);
  border-color: var(--v3-line);
}

:root[data-theme=dark] .accordion-button:not(.collapsed) {
  background: rgba(18, 130, 163, .16);
  color: var(--v3-ink);
  box-shadow: none;
}
:root[data-theme=dark] .accordion-button::after {
  filter: invert(1);
}

:root[data-theme=dark] .text-muted {
  color: var(--v3-ink-soft) !important;
}

:root[data-theme=dark] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--v3-ink);
  --bs-table-striped-bg: rgba(196, 228, 249, .055);
  --bs-table-hover-bg: rgba(18, 130, 163, .12);
  --bs-table-border-color: var(--v3-line);
  color: var(--v3-ink);
}
:root[data-theme=dark] .table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-bg: rgba(196, 228, 249, .045);
}
:root[data-theme=dark] .table thead th {
  color: var(--v3-ink);
  background: rgba(18, 130, 163, .16);
}

/* ── Offline banner ─────────────────────────────────────────────────────── */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6rem 1rem;
  background: linear-gradient(135deg, #e4462c, #e84630);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(232, 70, 48, .35);
  animation: offlineSlideDown .35s cubic-bezier(.22, .68, .26, 1);
}
.offline-banner i { font-size: 1.05rem; }
@keyframes offlineSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── Offline toast ─────────────────────────────────────────────────────── */
.offline-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translate(-50%, 1rem);
  z-index: 11001;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  border-radius: 50px;
  background: var(--v3-ink, #0b2138);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  box-shadow: var(--v3-shadow, 0 16px 44px rgba(11, 47, 78, .18));
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
  max-width: 92vw;
  text-align: center;
}
.offline-toast i { color: var(--v3-gold, #f0a03a); font-size: 1.05rem; }
.offline-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ── Offline pending notification items ────────────────────────────────── */
.admin-bell-item.offline-pending {
  opacity: .55;
  position: relative;
}
.admin-bell-item.offline-pending::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px dashed var(--v3-accent, #e4573b);
  border-radius: inherit;
}
@media (max-width: 767px) {
  .offline-toast { width: 88vw; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FLIGHT SECTION UPGRADES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Custom Airport Autocomplete ──────────────────────────────────────── */
.fl-autocomplete { position: relative; }
.fl-ac-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 1000;
  background: var(--white, #fff); border: 1px solid var(--gray-200, #e4e7eb);
  border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.12);
  max-height: 260px; overflow-y: auto; display: none;
  margin-top: .35rem;
}
.fl-ac-dropdown.show { display: block; }
.fl-ac-item {
  display: flex; align-items: center; gap: .7rem; padding: .6rem .9rem;
  cursor: pointer; transition: background .15s;
}
.fl-ac-item:hover, .fl-ac-item.active { background: var(--gray-50, #f8f9fa); }
.fl-ac-item .ac-code {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 28px; padding: 0 .45rem; border-radius: 8px;
  background: var(--pri, #0c2d48); color: #fff; font-size: .7rem; font-weight: 800;
}
.fl-ac-item .ac-name { font-weight: 700; font-size: .85rem; color: var(--pri, #0c2d48); }
.fl-ac-item .ac-country { font-size: .7rem; color: var(--gray-400, #9ca3af); }
.fl-ac-empty { padding: .8rem; text-align: center; color: var(--gray-400, #9ca3af); font-size: .82rem; }

/* ── Filter Sidebar ──────────────────────────────────────────────────── */
.fl-filter-wrap {
  display: flex; gap: 1.5rem; align-items: flex-start;
}
.fl-filter-panel {
  flex-shrink: 0; width: 260px; background: var(--white, #fff);
  border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,.06);
  border: 1px solid var(--gray-100, #f0f2f5);
  padding: 1.2rem; position: sticky; top: 100px;
}
.fl-filter-title {
  font-weight: 800; font-size: .95rem; color: var(--pri, #0c2d48);
  display: flex; align-items: center; gap: .4rem; margin-bottom: 1rem;
  padding-bottom: .6rem; border-bottom: 1px solid var(--gray-100, #f0f2f5);
}
.fl-filter-section { margin-bottom: 1rem; }
.fl-filter-section h6 {
  font-size: .78rem; font-weight: 700; color: var(--gray-500, #6b7280);
  text-transform: uppercase; letter-spacing: .3px; margin-bottom: .5rem;
}
.fl-filter-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.fl-filter-chip {
  padding: .3rem .65rem; border-radius: 50px; font-size: .75rem; font-weight: 600;
  border: 1.5px solid var(--gray-200, #e4e7eb); background: var(--white, #fff);
  color: var(--gray-600, #4b5563); cursor: pointer; transition: all .2s;
  user-select: none;
}
.fl-filter-chip:hover { border-color: var(--pri2, #2e86ab); color: var(--pri2, #2e86ab); }
.fl-filter-chip.active {
  background: var(--pri, #0c2d48); color: #fff; border-color: var(--pri, #0c2d48);
}
.fl-range-track { position: relative; height: 6px; background: var(--gray-100, #f0f2f5); border-radius: 3px; margin: .5rem 0; }
.fl-range-labels { display: flex; justify-content: space-between; font-size: .7rem; color: var(--gray-400, #9ca3af); }
.fl-filter-clear {
  display: block; width: 100%; padding: .5rem; border: 1.5px dashed var(--gray-300, #d1d5db);
  border-radius: 10px; background: none; color: var(--gray-500, #6b7280);
  font-size: .78rem; font-weight: 600; cursor: pointer; transition: all .2s; text-align: center;
}
.fl-filter-clear:hover { border-color: var(--acc, #e84630); color: var(--acc, #e84630); }
.fl-results-area { flex: 1; min-width: 0; }
@media (max-width: 991px) {
  .fl-filter-wrap { flex-direction: column; }
  .fl-filter-panel { width: 100%; position: static; }
  .fl-filter-panel.collapsed .fl-filter-body { display: none; }
}

/* ── Comparison Mode ─────────────────────────────────────────────────── */
.fl-compare-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050;
  background: var(--white, #fff); border-top: 2px solid var(--pri, #0c2d48);
  box-shadow: 0 -8px 30px rgba(0,0,0,.12); padding: .8rem 1.5rem;
  display: none; align-items: center; justify-content: space-between;
  animation: flCompareSlideUp .3s ease;
}
.fl-compare-bar.show { display: flex; }
@keyframes flCompareSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.fl-compare-count { font-weight: 800; color: var(--pri, #0c2d48); }
.fl-compare-btn {
  padding: .55rem 1.8rem; border-radius: 12px; border: none;
  background: linear-gradient(135deg, var(--pri, #0c2d48), var(--pri2, #2e86ab));
  color: #fff; font-weight: 700; font-size: .88rem; cursor: pointer;
  transition: all .2s; box-shadow: 0 4px 14px rgba(12,45,72,.25);
}
.fl-compare-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(12,45,72,.35); }
.fl-compare-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.fl-compare-cancel { border: none; background: none; color: var(--gray-500, #6b7280); font-weight: 600; cursor: pointer; font-size: .85rem; }
.fc-compare-check {
  position: absolute; top: .7rem; inset-inline-end: .7rem; z-index: 5;
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--gray-300, #d1d5db);
  background: var(--white, #fff); cursor: pointer; transition: all .2s;
  display: flex; align-items: center; justify-content: center;
}
.fc-compare-check:hover { border-color: var(--pri2, #2e86ab); }
.fc-compare-check.checked {
  background: var(--pri, #0c2d48); border-color: var(--pri, #0c2d48); color: #fff;
}
.fc-compare-check.checked::after { content: '\f272'; font-family: 'bootstrap-icons'; font-size: .7rem; }
.fl-compare-mode .flight-card { transition: all .2s; }
.fl-compare-mode .flight-card.dimmed { opacity: .4; transform: scale(.97); }

/* ── Comparison Table Modal ──────────────────────────────────────────── */
.fl-cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .85rem; }
.fl-cmp-table th {
  background: var(--gray-50, #f8f9fa); font-weight: 700; padding: .6rem .8rem;
  text-align: right; border-bottom: 2px solid var(--gray-200, #e4e7eb);
  color: var(--gray-500, #6b7280); font-size: .72rem; text-transform: uppercase; letter-spacing: .3px;
}
.fl-cmp-table td { padding: .6rem .8rem; border-bottom: 1px solid var(--gray-100, #f0f2f5); vertical-align: middle; }
.fl-cmp-table tr:last-child td { border-bottom: none; }
.fl-cmp-highlight { background: #f0fdf4 !important; font-weight: 800; color: #16a34a; }

/* ── Search History ──────────────────────────────────────────────────── */
.fl-history { margin-bottom: 1.5rem; }
.fl-history-title {
  display: flex; align-items: center; gap: .4rem; font-size: .82rem;
  font-weight: 700; color: var(--gray-500, #6b7280); margin-bottom: .5rem;
}
.fl-history-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.fl-history-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .7rem; border-radius: 50px; font-size: .75rem; font-weight: 600;
  background: var(--gray-50, #f8f9fa); border: 1px solid var(--gray-200, #e4e7eb);
  color: var(--gray-600, #4b5563); cursor: pointer; transition: all .2s;
  text-decoration: none;
}
.fl-history-chip:hover { background: var(--pri, #0c2d48); color: #fff; border-color: var(--pri, #0c2d48); }
.fl-history-chip i { font-size: .65rem; }
.fl-history-clear {
  border: none; background: none; color: var(--gray-400, #9ca3af);
  font-size: .7rem; cursor: pointer; padding: .2rem .4rem;
}
.fl-history-clear:hover { color: var(--acc, #e84630); }

/* ── Weekly Schedule Panel ───────────────────────────────────────────── */
.fl-schedule {
  background: var(--white, #fff); border-radius: 16px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.06); border: 1px solid var(--gray-100, #f0f2f5);
  margin-top: 1.5rem;
}
.fl-schedule-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1.2rem; background: linear-gradient(135deg, #f8fafc, #eef2f7);
  border-bottom: 1px solid var(--gray-100, #f0f2f5);
}
.fl-schedule-head h6 { margin: 0; font-weight: 800; font-size: .88rem; color: var(--pri, #0c2d48); }
.fl-schedule-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 0;
}
.fl-sched-day {
  padding: .6rem .4rem; text-align: center; border-inline-end: 1px solid var(--gray-100, #f0f2f5);
  min-height: 70px;
}
.fl-sched-day:last-child { border-inline-end: none; }
.fl-sched-day.today { background: rgba(46,134,171,.06); }
.fl-sched-day .sd-dow {
  font-size: .65rem; font-weight: 700; color: var(--gray-400, #9ca3af);
  text-transform: uppercase; letter-spacing: .3px;
}
.fl-sched-day .sd-date { font-size: .85rem; font-weight: 800; color: var(--pri, #0c2d48); margin: .15rem 0; }
.fl-sched-day .sd-flights { font-size: .68rem; color: var(--pri2, #2e86ab); font-weight: 600; }
.fl-sched-day .sd-empty { font-size: .62rem; color: var(--gray-400, #9ca3af); }
.fl-sched-day.has-flight { cursor: default; }
.fl-sched-day.has-flight .sd-dow { color: var(--pri2, #2e86ab); }

/* ── Flight Card Upgrades ────────────────────────────────────────────── */
.fc-airline-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .5rem; border-radius: 50px; font-size: .65rem; font-weight: 700;
}
.fc-airline-badge.live { background: #ecfdf5; color: #059669; }
.fc-airline-badge.fixed { background: #eff6ff; color: #2563eb; }
.fc-airline-badge.request { background: #fef3c7; color: #d97706; }
.fc-airline-badge i { font-size: .55rem; }
.fc-stops {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .12rem .45rem; border-radius: 50px; font-size: .62rem; font-weight: 700;
  background: var(--gray-50, #f8f9fa); color: var(--gray-500, #6b7280);
}
.fc-pax-info {
  display: flex; align-items: center; gap: .5rem; font-size: .72rem; color: var(--gray-400, #9ca3af);
  margin-top: .25rem;
}
.fc-pax-info span { display: inline-flex; align-items: center; gap: .2rem; }
.fc-seat-class {
  padding: .12rem .45rem; border-radius: 6px; font-size: .62rem; font-weight: 700;
  background: var(--gray-50, #f8f9fa); color: var(--gray-500, #6b7280);
  display: inline-flex; align-items: center; gap: .2rem;
}
.fc-seat-class.economy { background: #ecfdf5; color: #059669; }
.fc-seat-class.business { background: #fef3c7; color: #d97706; }
.fc-seat-class.first { background: #fce7f3; color: #db2777; }
.fl-card-wrap.hidden { display: none !important; }

/* ── Admin Dashboard Upgrades ────────────────────────────────────────── */
.fl-admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.fl-admin-stat {
  background: var(--white, #fff); border-radius: 16px; padding: 1.2rem;
  border: 1px solid var(--gray-100, #f0f2f5); box-shadow: 0 2px 8px rgba(0,0,0,.04);
  display: flex; align-items: center; gap: 1rem; transition: all .2s;
}
.fl-admin-stat:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.fl-admin-stat .stat-icon {
  width: 48px; height: 48px; border-radius: 14px; display: flex;
  align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0;
}
.fl-admin-stat .stat-value { font-size: 1.6rem; font-weight: 900; color: var(--pri, #0c2d48); line-height: 1; }
.fl-admin-stat .stat-label { font-size: .72rem; color: var(--gray-500, #6b7280); margin-top: .15rem; }
.fl-admin-route-bar {
  display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem;
  border-radius: 10px; background: var(--gray-50, #f8f9fa); margin-bottom: .4rem;
  font-size: .82rem; transition: background .15s;
}
.fl-admin-route-bar:hover { background: var(--gray-100, #f0f2f5); }
.fl-admin-route-bar .rb-route { flex: 1; font-weight: 700; color: var(--pri, #0c2d48); }
.fl-admin-route-bar .rb-count {
  padding: .15rem .5rem; border-radius: 50px; font-size: .68rem; font-weight: 700;
  background: var(--pri, #0c2d48); color: #fff;
}