/* ===== Fonts ===== */
/* Fonts imported in HTML for performance */
html,
body {
overflow-x: hidden;
width: 100%;
}
body {
font-family: 'Inter', sans-serif;
font-size: 1rem;
background: #f9fafc;
color: #111827;
transition: background .4s ease, color .4s ease;
}
body.dark-mode {
background: #0a0b0f;
color: #e5e5e5;
}
/* ===== Accent System ===== */
:root {
--accent: linear-gradient(135deg, #6366f1, #06b6d4);
/* Indigo-500 to Cyan-500 */
--accent-glow: 0 0 20px rgba(99, 102, 241, 0.4);
--glass-bg: rgba(255, 255, 255, 0.7);
--glass-border: 1px solid rgba(255, 255, 255, 0.5);
--glass-blur: blur(12px);
}
body.dark-mode {
--accent: linear-gradient(135deg, #38bdf8, #818cf8);
/* Sky-400 to Indigo-400 */
--accent-glow: 0 0 25px rgba(56, 189, 248, 0.5);
--glass-bg: rgba(18, 18, 18, 0.7);
--glass-border: 1px solid rgba(255, 255, 255, 0.1);
}
/* ===== Navbar ===== */
/* ===== Navbar ===== */
.navbar {
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
background: var(--glass-bg) !important;
border-bottom: var(--glass-border);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
padding-top: calc(0.5rem + env(safe-area-inset-top, 0px)) !important;
}
body.dark-mode .navbar {
background: var(--glass-bg) !important;
border-bottom: var(--glass-border);
}
.navbar-brand {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: clamp(1.1rem, 3vw, 1.6rem);
/* π Responsive text size */
background: var(--accent);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
/* Standard property */
text-shadow: var(--accent-glow);
/* Allow breaking for mobile stack */
white-space: normal;
text-align: start;
}
/* Brand title adjustments */
#brand-title {
display: inline-flex !important;
align-items: center;
line-height: 1.1;
height: auto;
white-space: nowrap !important;
}
#brand-title .brand-main,
#brand-title .brand-sep,
#brand-title .brand-sub,
.premium-nav-brand .brand-main,
.premium-nav-brand .brand-sep,
.premium-nav-brand .brand-sub {
font-size: inherit !important;
font-weight: inherit !important;
}
/* Mobile responsive adjustments for navbar brand to keep it strictly on a single line */
@media (max-width: 991px) {
#brand-title {
font-size: clamp(0.95rem, 3.2vw, 1.3rem) !important;
}
#brand-title img {
height: 30px !important;
margin-right: 4px !important;
}
#brand-title .brand-sep {
margin-left: 2px !important;
margin-right: 2px !important;
}
}
/* ===== Hero Section ===== */
@keyframes heroOrbFloat {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(22px, -28px) scale(1.07); }
66% { transform: translate(-14px, 16px) scale(0.95); }
}
@keyframes heroBadgePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.55); }
50% { box-shadow: 0 0 0 5px rgba(6, 182, 212, 0); }
}
.hero-section {
position: relative;
overflow: hidden;
padding: clamp(3rem, 6vw, 4.5rem) 0;
/* Light mode: clean mesh */
background: #f8f9ff;
background-image:
radial-gradient(ellipse 70% 60% at 15% 0%, rgba(99, 102, 241, 0.12) 0%, transparent 100%),
radial-gradient(ellipse 60% 55% at 85% 105%, rgba(6, 182, 212, 0.10) 0%, transparent 100%),
radial-gradient(ellipse 45% 45% at 50% 50%, rgba(139, 92, 246, 0.06) 0%, transparent 100%);
}
/* Subtle noise grain */
.hero-section::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.022;
pointer-events: none;
z-index: 0;
}
/* Bottom shimmer line */
.hero-section::after {
content: '';
position: absolute;
bottom: 0;
left: 8%;
right: 8%;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(99, 102, 241, 0.35) 30%,
rgba(6, 182, 212, 0.35) 70%,
transparent
);
}
/* Ambient glow orbs */
.hero-orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.hero-orb-1 {
width: clamp(260px, 38vw, 520px);
height: clamp(260px, 38vw, 520px);
background: radial-gradient(circle, rgba(99, 102, 241, 0.18), transparent 70%);
top: -35%;
left: -8%;
filter: blur(64px);
animation: heroOrbFloat 10s ease-in-out infinite;
}
.hero-orb-2 {
width: clamp(200px, 28vw, 420px);
height: clamp(200px, 28vw, 420px);
background: radial-gradient(circle, rgba(6, 182, 212, 0.15), transparent 70%);
bottom: -25%;
right: -4%;
filter: blur(60px);
animation: heroOrbFloat 13s ease-in-out infinite reverse;
animation-delay: -5s;
}
/* Live badge */
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 15px 5px 11px;
background: rgba(99, 102, 241, 0.07);
border: 1px solid rgba(99, 102, 241, 0.22);
border-radius: 50px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #5558e3;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
user-select: none;
}
.hero-badge-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: #06b6d4;
flex-shrink: 0;
animation: heroBadgePulse 2.2s ease-in-out infinite;
}
.hero-section h1 {
font-family: 'Space Grotesk', sans-serif;
font-weight: 800;
font-size: clamp(2rem, 5vw, 3.5rem);
letter-spacing: -0.025em;
line-height: 1.15;
background: linear-gradient(135deg, #4338ca 0%, #6366f1 45%, #0891b2 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-section p {
font-size: clamp(1rem, 2.5vw, 1.15rem);
color: var(--t-ink2);
line-height: 1.75;
max-width: 760px;
margin-inline: auto;
}
/* ---- Dark mode ---- */
body.dark-mode .hero-section {
background: #060912;
background-image:
radial-gradient(ellipse 70% 60% at 15% 0%, rgba(99, 102, 241, 0.24) 0%, transparent 100%),
radial-gradient(ellipse 60% 55% at 85% 105%, rgba(6, 182, 212, 0.20) 0%, transparent 100%),
radial-gradient(ellipse 45% 45% at 50% 50%, rgba(139, 92, 246, 0.13) 0%, transparent 100%);
}
body.dark-mode .hero-orb-1 {
background: radial-gradient(circle, rgba(99, 102, 241, 0.38), transparent 70%);
}
body.dark-mode .hero-orb-2 {
background: radial-gradient(circle, rgba(6, 182, 212, 0.30), transparent 70%);
}
body.dark-mode .hero-section::before { opacity: 0.04; }
body.dark-mode .hero-section::after {
background: linear-gradient(90deg,
transparent,
rgba(99, 102, 241, 0.5) 30%,
rgba(6, 182, 212, 0.5) 70%,
transparent
);
}
body.dark-mode .hero-badge {
background: rgba(99, 102, 241, 0.14);
border-color: rgba(99, 102, 241, 0.35);
color: #a5b4fc;
}
body.dark-mode .hero-section h1 {
background: linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 45%, #67e8f9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
body.dark-mode .hero-section p {
color: #94a3b8;
}
/* ===== CTA Buttons ===== */
.btn-cta {
background: var(--accent);
color: #fff;
border: none;
border-radius: 50px;
padding: .65rem 1.5rem;
font-weight: 600;
font-size: 1rem;
box-shadow: var(--accent-glow);
transition: transform .25s ease;
}
.btn-cta:hover {
transform: translateY(-3px) scale(1.05);
}
.btn-cta-outline {
background: transparent;
border: 2px solid rgba(124, 58, 237, .4);
border-radius: 50px;
padding: .65rem 1.5rem;
font-weight: 600;
font-size: 1rem;
color: #7c3aed;
transition: all .25s ease;
}
.btn-cta-outline:hover {
background: rgba(124, 58, 237, .1);
transform: translateY(-3px);
}
body.dark-mode .btn-cta-outline {
color: #22d3ee;
border-color: rgba(34, 211, 238, .5);
}
body.dark-mode .btn-cta-outline:hover {
background: rgba(34, 211, 238, .12);
}
/* ===== Cards ===== */
.card {
border-radius: 1.25rem;
background: rgba(255, 255, 255, .65);
backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, .25);
box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
}
body.dark-mode .card {
background: rgba(18, 18, 18, .7);
border: 1px solid rgba(255, 255, 255, .08);
box-shadow: 0 4px 16px rgba(0, 0, 0, .7);
}
/* ===== Chips ===== */
.airline-chip {
display: inline-block;
padding: .22rem .65rem;
border-radius: 999px;
background: rgba(124, 58, 237, .12);
border: 1px solid rgba(124, 58, 237, .35);
font-size: .78rem;
font-weight: 500;
margin: 3px;
transition: all .3s ease;
color: inherit;
animation: floatIn 0.5s ease forwards;
animation-delay: calc(var(--chip-index, 0) * 0.05s);
/* optional stagger */
opacity: 0;
/* so animation kicks in */
}
.airline-chip:hover {
background: var(--accent) !important;
color: #fff !important;
transform: scale(1.1) translateY(-2px);
box-shadow: var(--accent-glow);
transition: all 0.3s ease, box-shadow 0.4s ease;
}
.lowcost-dot {
display: inline-block;
width: 8px;
height: 8px;
background-color: #ef4444;
/* red-500 */
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
animation: pulse-red 2s infinite;
}
@keyframes pulse-red {
0% {
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
}
70% {
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
}
}
.codeshare-dot {
display: inline-block;
width: 8px;
height: 8px;
background-color: #6366f1;
/* indigo-500 */
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
box-shadow: 0 0 6px rgba(99, 102, 241, 0.6);
animation: pulse-indigo 2s infinite;
}
@keyframes pulse-indigo {
0% {
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
}
70% {
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
}
}
.legacy-dot {
display: inline-block;
width: 8px;
height: 8px;
background-color: #16a34a;
/* green-600 β full-service / legacy carrier */
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
box-shadow: 0 0 6px rgba(124, 58, 237, 0.6);
animation: pulse-violet 2s infinite;
}
@keyframes pulse-violet {
0% {
box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.7);
}
70% {
box-shadow: 0 0 0 4px rgba(124, 58, 237, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);
}
}
/* ===== Table ===== */
#airports-table {
width: 100% !important;
table-layout: auto;
/* OR fixed if you want consistent column widths */
border-radius: 1rem;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
body.dark-mode #airports-table {
background: #16171b;
box-shadow: 0 4px 14px rgba(0, 0, 0, .7);
}
#airports-table thead {
background: var(--accent);
color: #fff;
font-weight: 600;
letter-spacing: .6px;
}
#airports-table tbody tr:hover {
background: rgba(124, 58, 237, .1);
transition: all .25s ease;
}
body.dark-mode #airports-table tbody tr:hover {
background: rgba(34, 211, 238, .12);
}
#airports-table thead th {
text-align: center;
vertical-align: middle;
}
#airports-table td {
vertical-align: middle;
}
td.dtr-control {
cursor: pointer;
}
/* ===== DataTables Row Details Arrows ===== */
td.dtr-control:before {
content: "\25B6" !important;
font-size: 1rem !important;
font-weight: bold !important;
margin-right: 6px !important;
color: #7c3aed !important;
transition: color .3s ease, transform .2s ease;
}
[dir="rtl"] td.dtr-control:before {
content: "\25C0" !important;
margin-right: 0 !important;
margin-left: 6px !important;
}
tr.parent td.dtr-control:before {
content: "\25BC" !important;
color: #22d3ee !important;
}
body.dark-mode td.dtr-control:before {
color: #22d3ee !important;
text-shadow: 0 0 6px rgba(34, 211, 238, .6);
}
body.dark-mode tr.parent td.dtr-control:before {
color: #818cf8 !important;
text-shadow: 0 0 8px rgba(129, 140, 248, .6);
}
#airports-table tbody tr:hover td.dtr-control:before {
transform: scale(1.2);
text-shadow: 0 0 10px rgba(124, 58, 237, .6);
}
/* Hide the old buttons logic just in case it leaks */
.btn-container-hidden {
display: none !important;
}
@keyframes gradient-flow {
0% {
background-position: left center;
}
50% {
background-position: right center;
}
100% {
background-position: left center;
}
}
/* ===== Footer ===== */
footer.footer {
background-color: #2563eb !important;
color: #fff !important;
padding: 1rem 0;
margin-top: 2rem;
}
body.dark-mode footer.footer {
background-color: #1f1f1f !important;
color: #aaa !important;
}
.footer-bottom {
background: #f3f4f6;
color: #111827;
}
body.dark-mode .footer-bottom {
background: #0a0b0f;
color: #aaa;
}
/* ===== Export Chip ===== */
.export-chip {
display: inline-block;
padding: .35rem .9rem;
border-radius: 999px;
background: rgba(124, 58, 237, .12);
border: 1px solid rgba(124, 58, 237, .35);
font-size: .85rem;
font-weight: 500;
margin: 3px 0;
color: inherit;
transition: all .3s ease;
white-space: nowrap;
}
.export-chip i {
font-size: 1rem;
margin-right: .35rem;
}
.export-chip:hover {
background: var(--accent);
color: #fff !important;
box-shadow: var(--accent-glow);
transform: scale(1.05) translateY(-2px);
}
/* ===== Last Update Badge ===== */
.last-update-badge {
display: inline-flex;
align-items: center;
gap: .35rem;
margin-top: .25rem;
font-size: 0.85rem;
color: #676E7C;
background: rgba(124, 58, 237, .08);
border: 1px solid rgba(124, 58, 237, .35);
border-radius: 999px;
padding: .25rem .75rem;
transition: all .3s ease;
}
body.dark-mode .last-update-badge {
color: #aaa;
background: rgba(34, 211, 238, .08);
border: 1px solid rgba(34, 211, 238, .4);
}
.last-update-badge strong {
color: #111827;
}
body.dark-mode .last-update-badge strong {
color: #e5e5e5;
}
/* ===== IATA Badge ===== */
.iata-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.65rem;
border-radius: 6px;
background: rgba(99, 102, 241, 0.1);
/* Indigo tint */
color: #4f46e5;
/* Indigo 600 */
font-family: 'Space Grotesk', 'Consolas', monospace;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.5px;
border: 1px solid rgba(99, 102, 241, 0.2);
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5);
transition: all 0.2s ease-in-out;
}
.iata-badge:hover {
background: rgba(99, 102, 241, 0.15);
color: #4338ca;
border-color: rgba(99, 102, 241, 0.3);
transform: translateY(-1px);
}
body.dark-mode .iata-badge {
background: rgba(56, 189, 248, 0.1);
color: #38bdf8;
border: 1px solid rgba(56, 189, 248, 0.2);
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05);
}
body.dark-mode .iata-badge:hover {
background: rgba(56, 189, 248, 0.15);
color: #7dd3fc;
border-color: rgba(56, 189, 248, 0.3);
}
/* ===== Metric Badges (Distance & Time) ===== */
.metric-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.6rem;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 500;
white-space: nowrap;
transition: all 0.2s ease;
}
.live-dot {
display: inline-block;
width: 8px;
height: 8px;
background-color: #22c55e;
border-radius: 50%;
position: relative;
box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}
.live-dot.pulse-green::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: inherit;
animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
0% {
transform: scale(1);
opacity: 0.8;
}
70% {
transform: scale(2.5);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 0;
}
}
/* White variant, for the "live" dot on a saturated card (the Live Flight
Dashboard widget sits on emerald, where the green dot is invisible).
`background: inherit` on ::after picks up the green from .live-dot, so the
dot colour has to be restated here as well as on the ring. */
.live-dot.pulse-white {
background-color: #ffffff;
box-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
}
.live-dot.pulse-white::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: inherit;
animation: pulse-white 2s infinite;
}
@keyframes pulse-white {
0% {
transform: scale(1);
opacity: 0.8;
}
70% {
transform: scale(2.5);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 0;
}
}
.metric-badge i {
font-size: 0.95rem;
}
/* Distance Badge */
.distance-badge {
background: rgba(16, 185, 129, 0.1);
/* Emerald 500 */
color: #047F59;
/* Emerald 600 */
border: 1px solid rgba(16, 185, 129, 0.2);
}
.distance-badge:hover {
background: rgba(16, 185, 129, 0.15);
border-color: rgba(16, 185, 129, 0.35);
transform: translateY(-1px);
}
body.dark-mode .distance-badge {
background: rgba(52, 211, 153, 0.1);
/* Emerald 400 */
color: #34d399;
border-color: rgba(52, 211, 153, 0.2);
}
/* Time Badge */
.time-badge {
background: rgba(245, 158, 11, 0.1);
/* Amber 500 */
color: #A95C04;
/* Amber 600 */
border: 1px solid rgba(245, 158, 11, 0.2);
}
.time-badge:hover {
background: rgba(245, 158, 11, 0.15);
border-color: rgba(245, 158, 11, 0.35);
transform: translateY(-1px);
}
body.dark-mode .time-badge {
background: rgba(251, 191, 36, 0.1);
/* Amber 400 */
color: #fbbf24;
border-color: rgba(251, 191, 36, 0.2);
}
/* --- Filters offcanvas --- */
@media (max-width: 768px) {
#filtersCanvas {
width: min(92vw, 420px);
}
#filtersCanvas .offcanvas-header {
position: sticky;
top: 0;
z-index: 3;
background: var(--bs-body-bg);
border-bottom: 1px solid rgba(0, 0, 0, .06);
}
#filtersCanvas .offcanvas-body {
padding: 12px 12px 20px;
max-height: calc(100dvh - 64px);
overflow-y: auto;
}
}
/* π« Hide ads on mobile for all pages by default */
@media (max-width: 768px) {
.adsbygoogle,
[aria-label="Advertisement"],
.card[aria-label="Advertisement"] {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
}
/* ===== DataTables Responsive Child Rows (Mobile Folding) ===== */
table.dataTable>tbody>tr.child {
background: transparent !important;
}
table.dataTable>tbody>tr.child td.child {
padding: 0 !important;
}
table.dataTable>tbody>tr.child ul.dtr-details {
display: flex;
flex-direction: column;
gap: .35rem;
padding: .75rem 1.25rem;
margin: 0;
list-style: none;
background: rgba(124, 58, 237, .05);
border-top: 1px solid rgba(124, 58, 237, 0.1);
border-bottom: 1px solid rgba(124, 58, 237, 0.1);
width: 100%;
}
body.dark-mode table.dataTable>tbody>tr.child ul.dtr-details {
background: rgba(34, 211, 238, .05);
border-top-color: rgba(34, 211, 238, 0.15);
border-bottom-color: rgba(34, 211, 238, 0.15);
}
table.dataTable>tbody>tr.child ul.dtr-details li {
font-size: .9rem;
color: #374151;
/* gray-700 */
display: flex;
justify-content: space-between;
border-bottom: 1px dashed rgba(0, 0, 0, .1);
padding-bottom: .25rem;
}
table.dataTable>tbody>tr.child ul.dtr-details li:last-child {
border-bottom: none;
}
table.dataTable>tbody>tr.child ul.dtr-details li span.dtr-title {
font-weight: 600;
margin-right: .5rem;
color: #4b0082;
/* indigo */
}
body.dark-mode table.dataTable>tbody>tr.child ul.dtr-details li {
color: #ddd;
border-bottom: 1px dashed rgba(255, 255, 255, .15);
}
body.dark-mode table.dataTable>tbody>tr.child ul.dtr-details li span.dtr-title {
color: #22d3ee;
}
@media (max-width: 768px) {
.export-buttons {
display: none !important;
}
}
@media (min-width: 769px) {
.dataTables_paginate {
text-align: right !important;
justify-content: flex-end !important;
display: flex !important;
}
}
/* π± Mobile-friendly DataTables Pagination */
@media (max-width: 768px) {
.dataTables_wrapper .dataTables_paginate {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: flex-start;
overflow-x: auto !important;
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE/Edge */
-webkit-overflow-scrolling: touch;
gap: 6px;
margin-top: 0.5rem;
padding: 0.25rem 0.5rem;
}
/* Hide scrollbar on Webkit (Chrome/Safari) */
.dataTables_wrapper .dataTables_paginate::-webkit-scrollbar {
display: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
font-size: 12px !important;
padding: 4px 10px !important;
min-width: 28px !important;
height: 28px !important;
border-radius: 999px !important;
/* pill style */
background: rgba(124, 58, 237, 0.08) !important;
color: #4f46e5 !important;
border: none !important;
flex: 0 0 auto;
/* prevent shrinking */
transition: background 0.2s ease, color 0.2s ease;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: rgba(124, 58, 237, 0.18) !important;
color: #3730a3 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
background: #7c3aed !important;
color: #fff !important;
font-weight: 600 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
font-size: 12px !important;
padding: 4px 10px !important;
height: 28px !important;
border-radius: 999px !important;
background: transparent !important;
border: 1px solid rgba(124, 58, 237, 0.25) !important;
color: #7c3aed !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled {
opacity: 0.4 !important;
cursor: not-allowed !important;
}
}
.dataTables_wrapper .dataTables_paginate {
display: flex;
justify-content: center;
/* center horizontally */
gap: 1rem;
margin-top: 1rem;
}
/* === Force Prev/Next gradient pills === */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 90px;
height: 40px;
margin: 0 8px;
padding: 0 1.25rem;
font-size: 0.95rem;
font-weight: 600;
border-radius: 999px;
background: var(--accent) !important;
/* gradient */
color: #fff !important;
border: none !important;
box-shadow: var(--accent-glow);
cursor: pointer;
transition: all .25s ease;
}
/* Hover */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 0 20px rgba(124, 58, 237, .55);
background: var(--accent) !important;
color: #fff !important;
}
/* Disabled */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled {
opacity: 0.4 !important;
cursor: not-allowed !important;
background: rgba(124, 58, 237, .25) !important;
color: #5C5C5C !important;
box-shadow: none !important;
}
/* === DataTables Info Chip (Auto-sizing) === */
.dataTables_wrapper .dataTables_info {
display: inline-block;
/* shrink/grow to fit text */
padding: .45rem 1rem;
border-radius: 999px;
/* pill shape */
font-size: 0.9rem;
font-weight: 500;
background: rgba(124, 58, 237, .08);
border: 1px solid rgba(124, 58, 237, .25);
color: #374151;
box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
margin-top: .5rem;
white-space: nowrap;
/* keep all text in one line */
width: auto !important;
/* π force auto width */
min-width: unset !important;
/* remove any DT defaults */
max-width: 100%;
/* prevent overflow */
}
body.dark-mode .dataTables_wrapper .dataTables_info {
background: rgba(34, 211, 238, .08);
border: 1px solid rgba(34, 211, 238, .35);
color: #e5e5e5;
box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
/* β Remove background on all inner elements */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous *,
.dataTables_wrapper .dataTables_paginate .paginate_button.next *,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous::before,
.dataTables_wrapper .dataTables_paginate .paginate_button.next::before,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous::after,
.dataTables_wrapper .dataTables_paginate .paginate_button.next::after {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
/* π₯ Kill the white box completely */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
background: var(--accent) !important;
background-clip: padding-box !important;
color: #fff !important;
border: none !important;
box-shadow: var(--accent-glow);
padding: 0 1.5rem !important;
border-radius: 999px !important;
overflow: hidden !important;
/* π₯ Force clip overflow (kills square) */
position: relative;
z-index: 1;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
color: #fff !important;
}
/* Optional: force nested elements too (if any) */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous *,
.dataTables_wrapper .dataTables_paginate .paginate_button.next * {
color: #fff !important;
}
@media (min-width: 992px) {
.row.stretch-content {
display: flex;
flex-wrap: nowrap;
}
.row.stretch-content>.col-lg-3 {
width: auto;
flex: 0 0 auto;
}
.row.stretch-content>.col-lg-9 {
flex: 1 1 auto;
max-width: none;
}
}
/* β
Remove thick black line below mobile expanded row */
table.dataTable>tbody>tr.child td.child {
border: none !important;
border-bottom: none !important;
box-shadow: none !important;
}
.footer-nav {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
justify-content: center;
/* center for small screens */
}
.footer-link {
color: #2563eb !important;
/* Brand blue */
text-decoration: none;
font-weight: 500;
transition: color 0.2s, text-decoration 0.2s;
padding: 0.2rem 0.4rem;
}
.footer-link:hover,
.footer-link:focus {
color: #1e40af;
/* brand blue */
text-decoration: underline;
}
.separator {
color: var(--t-ink3);
margin: 0 0.3rem;
}
/* β
Mobile: 2 links per row, hide separators */
@media (max-width: 768px) {
.footer-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 4%;
}
.footer-link {
flex: 0 0 46%;
text-align: center;
font-size: 0.95rem;
text-decoration: none;
padding: 0.3rem 0;
}
/* Hide separators on mobile completely */
.footer-nav .separator {
display: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
}
.footer-bg {
position: relative;
z-index: 1;
background-color: #f8f9fa;
overflow: hidden;
}
/* Skyline background across full footer */
.footer-bg::after {
content: "";
position: absolute;
inset: 0;
/* shorthand for top/left/right/bottom */
/* background-image: url('/static/og/footer_airport.webp'); */
display: none;
background-repeat: no-repeat;
background-size: cover;
background-position: center bottom;
opacity: 0.38;
z-index: 0;
pointer-events: none;
filter: grayscale(100%) contrast(120%);
}
/* Gradient overlay for readability */
.footer-bg::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(255, 255, 255, 0.85) 0%,
rgba(255, 255, 255, 0.3) 60%,
transparent 100%);
z-index: 1;
pointer-events: none;
}
/* Ensure ALL footer content (nav + bottom) stays above overlays */
.footer-bg>*,
.footer-bottom {
position: relative;
z-index: 2;
}
/* Optional: give footer-bottom the same background context */
.footer-bottom {
background: transparent;
/* allow ::after to show through */
}
/* Dark Mode */
body.dark-mode .navbar-nav .nav-link.active {
color: #fff !important;
font-weight: 700;
}
/* Breadcrumbs Dark Mode */
body.dark-mode .breadcrumb-item {
color: #e5e5e5;
}
body.dark-mode .breadcrumb-item.active {
color: #fff;
font-weight: 600;
}
body.dark-mode .breadcrumb-item+.breadcrumb-item::before {
color: #a3a3a3;
/* Separator color */
}
body.dark-mode .breadcrumb-item a {
color: #6366f1;
/* Light Indigo for links */
}
body.dark-mode .breadcrumb-item a:hover {
color: #818cf8;
text-decoration: underline;
}
/* β
RTL Breadcrumb Fix */
[dir="rtl"] .breadcrumb-item+.breadcrumb-item::before {
float: right;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
/* Fix Language Button Text Color */
body.dark-mode #lang-toggle span {
color: inherit !important;
}
body.dark-mode .footer-link {
color: #60a5fa !important;
/* Bright blue for dark backgrounds */
}
body.dark-mode .footer-link:hover {
color: #93c5fd !important;
/* Even brighter on hover */
}
body.dark-mode .separator {
color: #666;
}
#footer-marketing {
max-width: none !important;
width: 100% !important;
line-height: 1.55;
font-size: 0.9rem;
color: #4b5563;
/* neutral gray-700 */
}
#footer-marketing strong {
color: #111827;
/* darker emphasis */
}
body.dark-mode #footer-marketing {
color: #d1d5db;
/* gray-300 */
}
body.dark-mode #footer-marketing strong {
color: #fff;
/* keep strong really bold */
}
/* Accent separator above marketing block */
#footer-marketing::before {
content: "";
display: block;
width: 60px;
height: 3px;
margin: 0.75rem 0;
background: linear-gradient(135deg, #7c3aed, #22d3ee);
border-radius: 6px;
opacity: 0.85;
}
/* π Dark mode footer base */
body.dark-mode .footer-bg {
position: relative;
z-index: 1;
background-color: #0a0a0a;
overflow: hidden;
}
/* π Skyline background across full footer */
body.dark-mode .footer-bg::after {
content: "";
position: absolute;
inset: 0;
/* background-image: url('/static/og/footer_airport.webp'); */
display: none;
background-repeat: no-repeat;
background-size: cover;
background-position: center bottom;
opacity: 0.38;
z-index: 0;
pointer-events: none;
filter: grayscale(100%) contrast(120%);
}
/* π Gradient overlay for readability */
body.dark-mode .footer-bg::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(0, 0, 0, 0.85) 0%,
rgba(0, 0, 0, 0.4) 60%,
transparent 100%);
z-index: 1;
pointer-events: none;
}
/* π Ensure content stays above overlays */
body.dark-mode .footer-bg>*,
body.dark-mode .footer-bottom {
position: relative;
z-index: 2;
}
/* π Footer-bottom background stays transparent */
body.dark-mode .footer-bottom {
background: transparent;
}
/* β
Stronger override with increased specificity */
body.dark-mode button.btn-outline-primary {
color: #60a5fa !important;
border-color: #60a5fa !important;
background-color: transparent !important;
font-weight: 400 !important;
}
body.dark-mode button.btn-outline-primary:hover {
color: #fff !important;
background-color: #2563eb !important;
border-color: #2563eb !important;
}
/* π Match rounded shape in both light and dark modes */
.btn-outline-primary {
border-radius: 999px !important;
padding: 0.5rem 1.25rem;
font-weight: 400;
transition: all 0.5s ease-in-out;
}
@media (max-width: 576px) {
.navbar .btn-outline-primary {
padding: 0.2rem 0.6rem;
font-size: 0.65rem;
gap: 0.25rem;
}
.navbar .btn-outline-primary i {
font-size: 0.9rem;
}
#lang-label {
font-size: 0.65rem;
}
}
body.dark-mode a:hover {
color: #3b82f6;
/* Stronger blue on hover */
}
body.dark-mode #airports-table a {
color: inherit !important;
text-decoration: none !important;
}
body.dark-mode #airports-table a:hover {
color: #ffffff !important;
}
#install-app-btn:hover {
transform: scale(1.05);
}
/* β
Apply blue to table links, EXCLUDING airline-chip */
body.dark-mode #airports-table td a:not(.airline-chip) {
color: #60a5fa !important;
text-decoration: none !important;
}
body.dark-mode #airports-table td a:not(.airline-chip):hover {
color: #ffffff !important;
text-decoration: underline !important;
}
@keyframes floatIn {
0% {
opacity: 0;
transform: translateY(12px) scale(0.95);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
#footer-marketing a {
color: #2563eb;
/* blue-600 */
text-decoration: none;
}
#footer-marketing a:hover {
color: #1d4ed8;
/* blue-700 */
text-decoration: underline;
}
/* π Dark Mode Override */
body.dark-mode #footer-marketing a {
color: #60a5fa;
/* blue-400 */
}
body.dark-mode #footer-marketing a:hover {
color: #93c5fd;
/* blue-300 */
}
.footer-bottom p {
font-family: 'Inter', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', 'EmojiOne Color', sans-serif;
}
@media (max-width: 576px) {
#footer-marketing {
font-size: 0.75rem;
/* smaller font for mobile */
}
}
@media (max-width: 576px) {
#footer-brand {
font-size: 0.9rem;
}
#footer-tagline {
font-size: 0.75rem;
}
}
@media (max-width: 576px) {
.footer-nav .footer-link,
.footer-nav .separator {
font-size: 0.75rem;
}
}
@media (max-width: 576px) {
.footer-bottom .fw-bold.text-muted {
font-size: 0.8rem !important;
}
}
@media (max-width: 576px) {
.pagination {
font-size: 0.75rem;
gap: 0.25rem;
}
.pagination .page-link {
padding: 0.25rem 0.5rem !important;
font-size: 0.75rem !important;
line-height: 1 !important;
border-radius: 999px !important;
}
.pagination .page-item {
margin: 0 2px;
}
}
@media (max-width: 576px) {
.dataTables_info {
font-size: 0.75rem;
text-align: center;
display: block;
width: 100%;
margin-top: 0.5rem;
}
}
#install-app-container {
position: fixed;
bottom: 15px;
left: 50%;
transform: translateX(-50%) translateY(20px);
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
justify-content: center;
}
#install-app-container.show {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.install-app-inner {
display: inline-flex;
align-items: center;
gap: 0.65rem;
border-radius: 999px;
padding: 0.25rem 0.75rem 0.25rem 0.6rem;
overflow: hidden;
background: transparent !important;
box-shadow: none !important;
}
#install-app-btn {
background: linear-gradient(135deg, #22d3ee, #818cf8);
color: #fff;
border: none;
border-radius: 999px;
padding: 0.5rem 1.4rem;
font-weight: 600;
font-size: 0.8rem;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
white-space: nowrap;
}
#install-app-btn:hover {
transform: scale(1.05);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
body.dark-mode .install-app-inner {
background: rgba(18, 18, 18, 0.9);
}
/* Center the switch + label horizontally */
.direction-toggle {
display: flex;
align-items: center;
/* Vertically center the text and switch */
justify-content: center;
/* Center them in the container */
gap: 1rem;
/* Space between switch and label */
width: 100%;
margin-top: 0.5rem;
}
/* Keep your beautiful existing toggle styling intact */
.toggle-border {
border: 2px solid #f0ebeb;
border-radius: 130px;
padding: 1px 2px;
background: linear-gradient(to bottom right, white, rgba(220, 220, 220, .5)), white;
box-shadow: 0 0 0 2px #fbfbfb;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
/* ensures proper centering inside */
margin-bottom: 0 !important;
/* prevent offset */
overflow: visible;
/* β
allow handle to move outside */
touch-action: manipulation;
/* β
ensures smooth touch toggle */
}
.toggle-border input[type="checkbox"] {
display: none;
}
.toggle-border label {
position: relative;
display: inline-block;
width: 65px;
height: 20px;
border-radius: 80px;
cursor: pointer;
background: linear-gradient(90deg, #8e2de2, #4a00e0);
box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.25);
transition: background 0.4s ease, box-shadow 0.3s ease;
}
.toggle-border input[type="checkbox"]:checked+label {
background: linear-gradient(90deg, #00c6ff, #0072ff);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3), 0 0 8px 2px rgba(0, 114, 255, 0.5);
}
.handle {
pointer-events: none;
position: absolute;
top: -8px;
left: -10px;
width: 35px;
height: 35px;
border: 1px solid #d0d0d0;
background:
repeating-radial-gradient(circle at 50% 50%, rgba(180, 180, 180, .2) 0%, rgba(180, 180, 180, .2) 2%, transparent 2%, transparent 3%, rgba(180, 180, 180, .2) 3%, transparent 3%),
conic-gradient(from 0deg,
#ffffff 0%, #dfe6f7 15%, #c5d4f2 25%, #ffffff 45%,
#bfcde8 55%, #e6edff 70%, #c5d4f2 85%, #ffffff 100%);
border-radius: 50%;
box-shadow: 3px 5px 10px 0 rgba(0, 0, 0, .35);
transition: left .4s, box-shadow .3s, background .5s;
}
.toggle-border input[type="checkbox"]:checked+label>.handle {
left: calc(100% - 35px + 10px);
box-shadow: 3px 5px 12px 0 rgba(0, 114, 255, 0.45);
background:
repeating-radial-gradient(circle at 50% 50%, rgba(190, 220, 255, .25) 0%, rgba(190, 220, 255, .25) 2%, transparent 2%, transparent 3%, rgba(190, 220, 255, .25) 3%, transparent 3%),
conic-gradient(from 0deg,
#ffffff 0%, #eaf3ff 20%, #d6e8ff 45%, #ffffff 65%, #cfe4ff 80%, #ffffff 100%);
}
/* Text label next to switch */
#direction-switch-label {
font-size: 1.05rem;
font-weight: 600;
color: #333;
text-align: left;
user-select: none;
min-width: 80px;
white-space: nowrap;
/* keeps βTLV Departuresβ on one line */
}
body.dark-mode #direction-switch-label {
color: #f1f1f1 !important;
}
@media (max-width: 576px) {
.direction-toggle {
flex-direction: row;
/* β
keep label beside switch (not stacked) */
justify-content: center;
/* β
center horizontally */
align-items: center;
gap: 0.5rem;
}
#direction-switch-label {
font-size: 0.9rem;
text-align: center;
}
}
@media (max-width: 576px) {
.toggle-border label {
width: 55px;
height: 18px;
}
.handle {
width: 30px;
height: 30px;
top: -6px;
left: -8px;
}
.toggle-border input[type="checkbox"]:checked+label>.handle {
left: calc(100% - 30px + 8px);
}
}
@media (max-width: 768px) {
.mobile-small-btn {
padding: 1px 4px !important;
font-size: 9px !important;
line-height: 1 !important;
border-radius: 3px !important;
min-width: auto !important;
display: inline-flex;
align-items: center;
gap: 1px;
height: auto !important;
white-space: nowrap;
}
.mobile-small-btn i {
font-size: 10px !important;
margin-right: 2px !important;
}
/* Nuke spacing between buttons */
.mobile-small-btn {
margin: 0 !important;
}
}
@media (max-width: 768px) {
div.container-fluid {
text-align: center;
}
div.container-fluid>* {
margin-left: auto;
margin-right: auto;
}
}
.card {
transition: all 0.35s ease-in-out;
border: 1px solid transparent;
border-radius: 1rem;
overflow: hidden;
position: relative;
}
.card:hover {
border-color: #008bf8;
box-shadow: 0 0 0 2px rgba(0, 139, 248, 0.4),
0 0 12px rgba(0, 139, 248, 0.25),
0 4px 18px rgba(0, 0, 0, 0.25);
transition: all 0.35s ease;
}
.card:hover .card-body {
background-color: rgba(0, 139, 248, 0.035);
transition: background-color 0.3s ease;
}
.card:hover .card-button {
transform: translate(-50%, 50%);
opacity: 1;
}
/* π Dark Mode via body.dark-mode toggle.
#161C29 not #1e1e1e: the dark page ground is #080D16, which is blue-tinted,
so a neutral grey card reads as a foreign patch on it. Same raised surface
as the header and the route ticker. */
body.dark-mode .card {
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: #161C29;
}
body.dark-mode .card:hover {
border-color: #3ea6ff;
box-shadow: 0 0 0 2px rgba(62, 166, 255, 0.4),
0 0 12px rgba(62, 166, 255, 0.3),
0 4px 18px rgba(0, 0, 0, 0.55);
}
body.dark-mode .card:hover .card-body {
background-color: rgba(62, 166, 255, 0.06);
}
/* π± Mobile: Display footer links in 3 columns */
@media (max-width: 576px) {
.footer-nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem 0.75rem;
justify-items: center;
text-align: center;
padding: 1rem 0;
}
.footer-link {
font-size: 0.75rem;
padding: 0.25rem;
display: inline-block;
}
}
.toggle-details {
background: none;
border: none;
color: inherit;
font-size: 1rem;
transition: transform 0.2s ease;
}
.toggle-details[aria-expanded="true"] i {
transform: rotate(180deg);
}
@media (max-width: 768px) {
.dt-buttons {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
}
.mobile-small-btn {
font-size: 0.55rem;
padding: 4px 10px !important;
line-height: 1.3;
border-radius: 999px;
background: linear-gradient(to right, #7f00ff, #00c6ff);
color: white !important;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease;
min-width: 90px;
/* Keep consistent width across buttons */
flex: 0 0 auto;
/* Prevent stretching */
}
.mobile-small-btn:hover {
transform: scale(1.05);
opacity: 0.95;
}
}
/* Desktop: remove custom styles */
@media (min-width: 769px) {
.mobile-small-btn {
all: unset;
font-size: 1rem;
padding: 0.375rem 0.75rem;
border-radius: 0.25rem;
background: var(--bs-primary);
color: white !important;
display: inline-block;
line-height: 1.5;
}
.mobile-small-btn i {
margin-right: 0.5rem;
}
}
.footer-link[aria-current="page"] {
font-weight: 600;
color: var(--bs-primary) !important;
text-decoration: underline;
}
/* ===== πΊ Triangle pulsing until user interacts (mobile only) ===== */
@media (max-width: 768px) {
td.dtr-control {
cursor: pointer;
position: relative;
}
/* Default: always pulsing */
td.dtr-control:before {
animation: pulseTriangle 2s ease-in-out infinite;
}
/* When user opens one (we add .user-learned) β stop animation */
body.user-learned td.dtr-control:before {
animation: none !important;
}
@keyframes pulseTriangle {
0%,
100% {
transform: scale(1);
opacity: 1;
filter: drop-shadow(0 0 0 rgba(124, 58, 237, 0));
}
50% {
transform: scale(1.35);
opacity: 0.75;
filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.8));
}
}
}
@media (max-width: 768px) {
.last-update-badge {
font-size: 0.65rem !important;
padding: 0.25rem 0.75rem !important;
margin: 0.25rem auto !important;
/* β
centers horizontally */
display: block !important;
width: 50% !important;
/* β
slightly smaller width */
text-align: center;
border-radius: 999px !important;
/* keep pill shape */
}
}
@media (max-width: 768px) {
.row.g-3.align-items-start.stretch-content {
margin-top: 0 !important;
padding-top: 0 !important;
}
.row.g-3.align-items-start.stretch-content>* {
margin-top: 0 !important;
padding-top: 0 !important;
}
}
/* π Fix outline secondary buttons in dark mode */
body.dark-mode .btn-outline-secondary {
color: #e5e7eb !important;
/* light gray text */
border-color: #9ca3af !important;
/* mid-gray border */
background-color: transparent !important;
}
body.dark-mode .btn-outline-secondary:hover,
body.dark-mode .btn-outline-secondary:focus {
color: #fff !important;
border-color: #60a5fa !important;
/* your accent blue */
background-color: rgba(96, 165, 250, 0.15) !important;
/* faint blue glow */
box-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
}
.custom-animated-input {
border: 2px solid transparent;
background-color: #1e1e1e;
/* optional dark style */
color: #fff;
border-radius: 8px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.custom-animated-input:focus {
border-color: #3f51b5;
box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.3);
background-color: #1e1e1e;
color: #fff;
}
body.dark-mode select.form-select {
background-color: #1f2937;
/* dark gray */
color: #e5e7eb;
/* light text */
border-color: #374151;
/* subtle border */
}
body.dark-mode select.form-select:focus {
background-color: #111827;
/* darker when focused */
border-color: #60a5fa;
/* accent blue border */
box-shadow: 0 0 0 0.15rem rgba(96, 165, 250, 0.35);
}
body.dark-mode select.form-select option {
background-color: #1f2937;
/* dark option background */
color: #e5e7eb;
/* readable text */
}
body.dark-mode input.form-control {
background-color: #1f2937;
/* dark gray */
color: #e5e7eb;
/* light text */
border-color: #374151;
/* subtle border */
}
body.dark-mode input.form-control::placeholder {
color: #9ca3af;
/* muted placeholder */
opacity: 1;
/* Firefox fix */
}
body.dark-mode input.form-control:focus {
background-color: #111827;
color: #fff;
border-color: #60a5fa;
/* accent blue */
box-shadow: 0 0 0 0.15rem rgba(96, 165, 250, 0.35);
}
.badge-change-up {
background-color: #28a745 !important;
}
.badge-change-down {
background-color: #dc3545 !important;
}
.badge-change-flat {
background-color: #6c757d !important;
}
/* ===========================================
PREMIUM GLOSSY WIDGETS (WOW)
=========================================== */
.filter-wow {
background: var(--glass-bg, rgba(255, 255, 255, 0.75)) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.4)) !important;
border-radius: 1.5rem !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.wow-header-text {
background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 5px rgba(99, 102, 241, 0.2));
font-weight: 800;
}
.icon-glow {
filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.4));
}
.glossy-list {
background: transparent !important;
}
.glossy-item {
background: rgba(255, 255, 255, 0.2) !important;
backdrop-filter: blur(5px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
border-radius: 0 !important;
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
}
.glossy-item:hover {
background: rgba(255, 255, 255, 0.8) !important;
transform: translateX(4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
z-index: 2;
}
body.dark-mode .glossy-item {
background: rgba(30, 41, 59, 0.2) !important;
}
body.dark-mode .glossy-item:hover {
background: rgba(30, 41, 59, 0.6) !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.destination-icon {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(99, 102, 241, 0.06);
border-radius: 8px;
font-size: 0.85rem;
}
.city-name {
font-size: 0.85rem;
letter-spacing: -0.01em;
}
.extra-small {
font-size: 0.65rem;
font-weight: 600;
}
.tracking-wider {
letter-spacing: 0.05em;
}
.analytics-badge .badge {
font-weight: 700;
font-size: 0.7rem;
letter-spacing: 0.02em;
min-width: 42px;
padding: 0.4rem 0.6rem !important;
}
#deals-city-select {
width: auto !important;
min-width: 90px;
font-size: 0.75rem;
line-height: 1.1;
padding: 0 0.3rem;
border: none;
background-color: #f8f9fa;
/* Hide native arrow */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: none;
}
/* TICKER CARD WRAPPER */
#route-ticker {
white-space: nowrap;
overflow: hidden;
}
/* INNER SCROLLING ROW */
#route-ticker .ticker-wrapper {
overflow: hidden;
position: relative;
width: 100%;
}
/* ITEMS */
#route-ticker .ticker-item {
display: inline-flex;
align-items: center;
font-size: 0.75rem;
gap: 6px;
padding: 0 4px;
}
/* Colors. The whole line used to be 600, so the around the flight
number, airline and destination emphasised nothing β colour already says
added or cancelled. The line is regular; only those three are bold. */
#route-ticker .added {
color: #51A85A;
font-weight: 400;
}
#route-ticker .removed {
color: #dc3545;
/* red */
font-weight: 400;
}
/* the markup wraps flight number, airline AND destination in , which
is most of the sentence β at 600 the whole ticker read as bold */
#route-ticker .ticker-item strong {
font-weight: 500;
}
/* Smooth marquee */
@keyframes ticker-scroll {
/* --ticker-start is set from JS to the wrapper's pixel width so the content
begins just off the right edge of the visible strip. Without it, a bare
translateX(100%) resolves against .ticker-inner's own width (which is the
full length of every item combined, often 15000px+), leaving the ticker
blank for minutes before the first item scrolls into view. */
from {
transform: translateX(var(--ticker-start, 100%));
}
to {
transform: translateX(-100%);
}
}
#route-ticker .ticker-inner {
display: inline-flex;
gap: 24px;
animation: ticker-scroll 100s linear infinite;
}
/* Hide ticker on mobile */
@media (max-width: 768px) {
#route-ticker {
display: none !important;
}
}
/* Dark Mode β Route Ticker.
#1e1e1e / #2b2b2b are neutral greys, but the dark page ground is #080D16 β
blue-tinted. The card read as a grey patch on a navy page. These are the same
raised-surface values the header uses, so the two sit in the same family. */
body.dark-mode #route-ticker {
background: #161C29 !important;
border: 1px solid rgba(255,255,255,.09) !important;
}
/* TITLE ALWAYS WHITE */
body.dark-mode #route-ticker .ticker-title {
color: #ffffff !important;
}
.ticker-title {
font-size: 0.76rem;
}
.header-title-mobile {
color: var(--bs-primary);
}
body.dark-mode .card-header.header-title-mobile {
--bs-card-color: #ffffff;
color: #ffffff;
}
body.dark-mode .card-header.header-title-mobile i {
color: #ffffff;
}
/* REMOVE ALL NEUTRAL OVERRIDES β CRITICAL FIX */
body.dark-mode #route-ticker .ticker-item,
body.dark-mode #route-ticker .update-date {
color: inherit !important;
/* FOLLOW PARENT COLOR */
}
/* ADDED ROUTES = FULL GREEN */
body.dark-mode #route-ticker .ticker-item.added {
color: #2ecc71 !important;
}
/* REMOVED ROUTES = FULL RED */
body.dark-mode #route-ticker .ticker-item.removed {
color: #ff3b30 !important;
}
body.dark-mode #route-ticker strong {
color: inherit !important;
}
#route-ticker:hover .ticker-inner {
animation-play-state: paused;
}
.header-title-desktop {
color: var(--bs-primary);
}
body.dark-mode .card-header.header-title-desktop {
--bs-card-color: #ffffff;
color: #ffffff;
}
body.dark-mode .card-header.header-title-desktop i {
color: #ffffff;
}
.ltr {
direction: ltr;
text-align: left;
}
.rtl {
direction: rtl;
text-align: right;
}
/* β
Show on mobile, hide on desktop */
@media (min-width: 992px) {
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control::before {
content: none !important;
}
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control {
padding-left: 0 !important;
}
}
@media (min-width: 992px) {
#airports-table td.dtr-control::before {
display: none !important;
}
}
/* Fix for IATA breadcrumb background in dark mode */
.accent-header .breadcrumb {
background: transparent !important;
padding-left: 0;
margin-bottom: 0.25rem;
}
/* =========================================
UI/UX IMPROVEMENTS (About & Accessibility)
========================================= */
/* Gradient Text Utility */
.text-gradient {
background: var(--accent);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% auto;
animation: shine 4s linear infinite;
}
@keyframes shine {
to {
background-position: 200% center;
}
}
/* Glass Card Utility */
.glass-card {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
border-radius: 1.5rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
body.dark-mode .glass-card {
background: rgba(30, 30, 30, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}
.glass-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.15);
}
body.dark-mode .glass-card:hover {
box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5);
}
/* Icon Glow Utility */
.icon-glow {
filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.4));
transition: all 0.3s ease;
}
body.dark-mode .icon-glow {
filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.5));
}
.feature-item:hover .icon-glow {
transform: scale(1.1) rotate(5deg);
filter: drop-shadow(0 0 15px rgba(124, 58, 237, 0.6));
}
/* Icon Large Utility */
.icon-lg {
font-size: 2.5rem;
margin-bottom: 1rem;
display: inline-block;
background: var(--accent);
-webkit-background-clip: text;
background-clip: text;
/* Standard property */
-webkit-text-fill-color: transparent;
}
/* Clean Accordion (Glass Style) */
.glass-accordion .accordion-item {
background: transparent !important;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 1rem;
margin-bottom: 0.75rem;
overflow: hidden;
transition: all 0.2s ease;
}
body.dark-mode .glass-accordion .accordion-item {
border-color: rgba(255, 255, 255, 0.1);
}
.glass-accordion .accordion-button {
background: rgba(255, 255, 255, 0.5) !important;
backdrop-filter: blur(5px);
border: none;
box-shadow: none;
font-weight: 500;
border-radius: 1rem !important;
}
body.dark-mode .glass-accordion .accordion-button {
background: rgba(255, 255, 255, 0.05) !important;
color: #fff !important;
}
.glass-accordion .accordion-button:not(.collapsed) {
background: rgba(124, 58, 237, 0.1) !important;
color: #7c3aed !important;
box-shadow: none !important;
}
body.dark-mode .glass-accordion .accordion-button:not(.collapsed) {
background: rgba(34, 211, 238, 0.15) !important;
color: #22d3ee !important;
}
.glass-accordion .accordion-body {
background: rgba(255, 255, 255, 0.3) !important;
font-size: 0.95rem;
line-height: 1.6;
}
body.dark-mode .glass-accordion .accordion-body {
background: transparent !important;
color: #d1d5db !important;
}
/* Hero Section for Inner Pages */
.page-hero {
text-align: center;
padding: 3rem 1rem;
background: radial-gradient(circle at center, rgba(124, 58, 237, 0.05) 0%, transparent 70%);
margin-bottom: 2rem;
border-radius: 2rem;
}
body.dark-mode .page-hero {
background: radial-gradient(circle at center, rgba(34, 211, 238, 0.08) 0%, transparent 70%);
}
/* --- CHAT UI (AI Bot) --- */
.chat-container {
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 24px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
height: 85vh;
min-height: 600px;
max-width: 900px;
margin: 1rem auto;
position: relative;
overflow: hidden;
}
.chat-header {
padding: 1.5rem;
background: rgba(255, 255, 255, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
justify-content: space-between;
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 1.5rem;
scroll-behavior: smooth;
display: flex;
flex-direction: column;
gap: 1rem;
}
.message {
max-width: 85%;
padding: 1rem 1.25rem;
border-radius: 18px;
font-size: 1rem;
line-height: 1.6;
position: relative;
animation: messageSlideIn 0.3s ease-out forwards;
word-wrap: break-word;
}
@keyframes messageSlideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.message.user {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white;
align-self: flex-end;
border-bottom-right-radius: 4px;
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}
.message.ai {
background: rgba(255, 255, 255, 0.85);
color: #1f2937;
align-self: flex-start;
border-bottom-left-radius: 4px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(255, 255, 255, 0.5);
}
.chat-footer {
padding: 1rem 1.5rem;
background: rgba(255, 255, 255, 0.6);
border-top: 1px solid rgba(255, 255, 255, 0.3);
display: flex;
gap: 0.75rem;
align-items: center;
}
.chat-input {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50px;
padding: 0.75rem 1.5rem;
flex: 1;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
resize: none;
min-height: 50px;
max-height: 120px;
}
.chat-input:focus {
background: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
outline: none;
border-color: #8b5cf6;
}
.suggestion-scroll-wrapper {
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(5px);
display: flex;
align-items: center;
gap: 0.5rem;
}
.suggestion-chips {
display: flex;
gap: 0.75rem;
overflow-x: auto;
padding: 0.5rem;
scrollbar-width: none;
scroll-behavior: smooth;
}
.suggestion-chips::-webkit-scrollbar {
display: none;
}
.chip {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(139, 92, 246, 0.2);
color: #6d28d9;
padding: 0.5rem 1.25rem;
border-radius: 50px;
font-size: 0.9rem;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.chip:hover {
background: #8b5cf6;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
/* Copy & Feedback for AI Messages */
.message-body {
margin-bottom: 0.5rem;
}
.copy-btn {
background: transparent;
border: none;
font-size: 0.9rem;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.2s;
float: right;
}
.copy-btn:hover {
opacity: 1;
}
.feedback-box {
border-top: 1px solid rgba(0, 0, 0, 0.05);
margin-top: 0.75rem;
padding-top: 0.5rem;
font-size: 0.85rem;
color: #6b7280;
}
.feedback-btn {
cursor: pointer;
margin-left: 0.5rem;
font-size: 1.1rem;
transition: transform 0.2s;
display: inline-block;
}
.feedback-btn:hover {
transform: scale(1.2);
}
/* --- DARK MODE CHAT --- */
body.dark-mode .chat-container {
background: rgba(30, 41, 59, 0.7);
border-color: rgba(255, 255, 255, 0.05);
}
body.dark-mode .chat-header {
background: rgba(15, 23, 42, 0.6);
border-bottom-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .chat-footer {
background: rgba(15, 23, 42, 0.6);
border-top-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .message.ai {
background: rgba(51, 65, 85, 0.9);
color: #f3f4f6;
border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .chat-input {
background: rgba(30, 41, 59, 0.8);
color: white;
border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .chat-input:focus {
background: #1e293b;
border-color: #8b5cf6;
}
body.dark-mode .suggestion-scroll-wrapper {
background: rgba(15, 23, 42, 0.4);
}
body.dark-mode .chip {
background: rgba(30, 41, 59, 0.8);
color: #a78bfa;
border-color: rgba(139, 92, 246, 0.3);
}
body.dark-mode .chip:hover {
background: #8b5cf6;
color: white;
}
/*
FLIGHTS PAGE & GENERIC TABLE STYLES
*/
/* Table Structure & Rounding */
.styled-table {
border-collapse: separate !important;
border-spacing: 0;
overflow: hidden;
/* ensures rounding is visible */
width: 100%;
}
.styled-table td,
.styled-table thead th {
text-align: center;
vertical-align: middle;
}
/* Top corners */
.styled-table thead th:first-child {
border-top-left-radius: 12px;
}
.styled-table thead th:last-child {
border-top-right-radius: 12px;
}
/* Bottom corners */
.styled-table tbody tr:last-child td:first-child {
border-bottom-left-radius: 12px;
}
.styled-table tbody tr:last-child td:last-child {
border-bottom-right-radius: 12px;
}
/* Remove bottom borders to look clean */
.styled-table tbody tr:last-child td {
border-bottom: none !important;
}
.dataTables_wrapper {
border-bottom: none !important;
box-shadow: none !important;
}
/* Flight Status Badges */
.flight-status-badge {
display: inline-block;
min-width: 90px;
padding: 0.5em 1em;
font-size: 0.85rem;
font-weight: 600;
border-radius: 999px;
/* pill shape */
text-align: center;
white-space: nowrap;
}
/* Filter Sections */
.dt-filters label {
margin-right: 0.5rem;
font-weight: 600;
}
.dt-filters select {
display: inline-block;
width: auto;
}
/* Responsive Table Adjustments */
@media (max-width: 768px) {
/* Stack wrapper rows */
.dataTables_wrapper .row.mb-3 {
flex-direction: column;
align-items: stretch;
text-align: center;
gap: 1rem;
}
/* Filters grid on mobile */
.dt-filters .d-flex {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.dt-filters label {
font-size: 0.875rem;
margin-bottom: 0.25rem;
text-align: left;
}
.dt-filters select {
width: 100%;
}
/* Center info text */
.dataTables_info {
text-align: center;
}
}
/* Hebrew specific direction fix for mobile rows */
html[lang="he"] .row.mt-2 {
flex-direction: row-reverse;
justify-content: space-between;
}
/* Dark Mode Table overrides */
/* Blue-tinted to match the page ground; #1a1a1a/#333 were neutral greys that
sat on the navy background as a visibly different colour family. */
body.dark-mode .styled-table,
body.dark-mode .styled-table td,
body.dark-mode .styled-table th {
color: #e5e5e5 !important;
background-color: #161C29 !important;
border-color: rgba(255, 255, 255, 0.09) !important;
}
body.dark-mode .styled-table thead th {
background-color: #1D2536 !important;
color: #fff !important;
}
body.dark-mode .styled-table tbody tr:nth-child(even) {
background-color: #1f1f1f !important;
}
/* This blanket rule predates theme.css's input system and outranked it on
specificity, so every text input, search box and form-select in dark mode was
repainted #111 with a #555 border -- a pure grey sitting on the navy-tinted
surfaces, which read as a black pill inside the filter bars. The selector is
kept because it also catches inputs that carry no class, but the values now
come from the theme tokens and the background defers to the container. */
body.dark-mode input[type="search"],
body.dark-mode input[type="text"],
body.dark-mode select.form-select {
background-color: transparent !important;
color: var(--t-ink) !important;
border-color: var(--t-line) !important;
}
body.dark-mode input[type="search"]::placeholder {
color: var(--t-ink3) !important;
}
/*
TRAVEL WARNINGS SPECIFIC STYLES
*/
.section-title {
text-align: center;
font-weight: 700;
font-size: 2rem;
margin-bottom: 1.5rem;
position: relative;
display: inline-block;
padding-bottom: 0.5rem;
}
.section-title::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 60px;
height: 4px;
border-radius: 2px;
background: var(--accent);
/* Use global accent */
}
/* Warnings Table Specifics */
#warnings-table td:nth-child(4) {
white-space: normal !important;
word-break: break-word;
min-width: 250px;
/* Ensure readability for recommendations */
}
/* Custom DataTables Buttons Colors */
.buttons-csv {
background-color: #0B855C !important;
border-color: #0B855C !important;
color: white !important;
}
.buttons-csv:hover {
background-color: #059669 !important;
border-color: #059669 !important;
}
.buttons-colvis {
color: white !important;
border-color: #3b82f6 !important;
background-color: #3b82f6 !important;
}
.buttons-colvis:hover {
background-color: #2563eb !important;
border-color: #2563eb !important;
}
/* RTL Button Spacing */
html[dir="rtl"] .dt-buttons .btn {
margin-left: 0.5rem !important;
margin-right: 0 !important;
}
/* Responsive Table Mobile View Wrap */
#warnings-table tr.child td,
#warnings-table tr.child td * {
white-space: normal !important;
word-break: break-word !important;
}
/* Promo Card Gradient */
.promo-card-bg {
background: linear-gradient(90deg, #c2e9fb 0%, #a1c4fd 100%);
color: #111827;
}
.promo-card-bg h5,
.promo-card-bg p {
color: #111827 !important;
}
/* Dark Mode Promo Card */
body.dark-mode .promo-card-bg {
background: var(--accent);
/* β¨ Matches site theme (Sky -> Indigo) */
color: #fff;
}
body.dark-mode .promo-card-bg h5,
body.dark-mode .promo-card-bg p {
color: #fff !important;
}
/*
MISSING DARK MODE OVERRIDES (Essential due to Litera theme lock)
*/
/* Modals β same raised surface as the cards behind them, not neutral grey */
body.dark-mode .modal-content {
background-color: #161C29;
color: #e5e5e5;
border: 1px solid rgba(255, 255, 255, 0.1);
}
body.dark-mode .modal-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
body.dark-mode .modal-footer {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
body.dark-mode .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
/* Navbar Toggler (Hamburger) - Invert dark icon to white */
body.dark-mode .navbar-toggler-icon {
filter: invert(1) grayscale(100%) brightness(200%);
}
body.dark-mode .navbar-toggler {
border-color: rgba(255, 255, 255, 0.5);
}
/*
GLOBAL DARK MODE TEXT RESETS (Overrides Litera default colors)
*/
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode span,
body.dark-mode li,
body.dark-mode label,
body.dark-mode .card,
body.dark-mode .list-group-item {
color: #e5e5e5;
}
/* Force white on specific strong/bold elements if needed */
body.dark-mode strong,
body.dark-mode b {
color: #fff;
}
/* Ensure card backgrounds don't conflict, but allow text to be light */
body.dark-mode .card-body {
color: #e5e5e5;
}
/* Fix muted text brightness */
body.dark-mode .text-muted {
color: #a3a3a3 !important;
}
/*
DARK MODE TABLES
Overrides Bootstrap Litera table styles
*/
body.dark-mode .table {
color: #e5e5e5;
border-color: rgba(255, 255, 255, 0.1);
--bs-table-color: #e5e5e5;
--bs-table-bg: transparent;
--bs-table-border-color: rgba(255, 255, 255, 0.1);
--bs-table-striped-bg: rgba(255, 255, 255, 0.05);
--bs-table-striped-color: #e5e5e5;
--bs-table-active-bg: rgba(255, 255, 255, 0.1);
--bs-table-active-color: #fff;
--bs-table-hover-bg: rgba(255, 255, 255, 0.075);
--bs-table-hover-color: #fff;
}
body.dark-mode .table> :not(caption)>*>* {
background-color: transparent;
/* Ensure cells don't have white bg */
border-bottom-color: rgba(255, 255, 255, 0.1);
color: inherit;
}
body.dark-mode .table-striped>tbody>tr:nth-of-type(odd)>* {
background-color: var(--bs-table-striped-bg);
color: var(--bs-table-striped-color);
box-shadow: none;
/* Fix for some bootstrap versions adding shadow */
}
body.dark-mode .table-hover>tbody>tr:hover>* {
background-color: var(--bs-table-hover-bg);
color: var(--bs-table-hover-color);
}
/* DataTables specific fixes */
body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_filter,
body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_processing,
body.dark-mode .dataTables_wrapper .dataTables_paginate {
color: #e5e5e5 !important;
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
color: #e5e5e5 !important;
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
color: #666 !important;
}
/*
DARK MODE LIST GROUPS (Analytics Widgets)
Overrides Bootstrap Litera list-group styles
*/
body.dark-mode .list-group-item {
background-color: transparent;
/* Remove white background */
border-color: rgba(255, 255, 255, 0.1);
color: #e5e5e5;
}
body.dark-mode .list-group-item a {
color: #fff !important;
/* Make destination links white */
}
/* Specific Badge Tweaks for Dark Mode */
body.dark-mode .badge-change-flat {
background-color: #6c757d;
color: #fff;
}
/*
DARK MODE FORMS & FILTERS (Flights Page)
Overrides Bootstrap default form styles and bg-light-subtle
*/
body.dark-mode .bg-light-subtle {
background-color: rgba(255, 255, 255, 0.05) !important;
color: #e5e5e5;
}
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input-group-text {
background-color: var(--glass-bg);
/* Use glass background matching theme */
border-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
body.dark-mode .form-control::placeholder {
color: #a3a3a3;
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
background-color: rgba(255, 255, 255, 0.1);
border-color: var(--accent);
color: #fff;
box-shadow: 0 0 0 0.25rem rgba(129, 140, 248, 0.25);
}
/* Fix dropdown arrow color in dark mode */
body.dark-mode .form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
/* Remove table responsive scrollbar entirely to fix user complaint "scroller - remove it" */
.table-responsive {
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE/Edge */
}
.table-responsive::-webkit-scrollbar {
display: none;
/* Chrome/Safari */
}
/* Ensure no override interferes */
body.dark-mode .table-responsive::-webkit-scrollbar {
display: none;
}
/*
DARK MODE CARD HEADERS
Ensure headers blend in and don't look like light blocks
*/
body.dark-mode .card-header {
background-color: rgba(255, 255, 255, 0.05);
border-bottom-color: rgba(255, 255, 255, 0.1);
color: #fff;
}
/* Fix for user request: */
body.dark-mode .card-header .text-primary {
color: #fff !important;
}
/* Fix table text specifically */
body.dark-mode .table {
color: #e5e5e5;
}
/* Premium AI Button - Slick 2026 */
.btn-gradient-primary {
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%) !important;
/* Vivid Violet-Purple */
border: none !important;
color: #ffffff !important;
font-weight: 600 !important;
letter-spacing: 0.5px;
padding: 12px 32px;
/* Larger touch target */
border-radius: 50rem !important;
/* Full pill shape */
position: relative;
overflow: hidden;
z-index: 1;
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
background-size: 200% auto !important;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
/* Bouncy elastic transition */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* Hover Effect - Shine & Scale */
.btn-gradient-primary:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6), 0 0 0 4px rgba(99, 102, 241, 0.1);
/* Glow ring */
background-position: right center !important;
/* Animate gradient */
color: #ffffff !important;
}
/* Shine Animation Element */
.btn-gradient-primary::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: 0.5s;
z-index: 2;
}
.btn-gradient-primary:hover::after {
left: 100%;
transition: 0.7s ease-in-out;
}
/* Active State */
.btn-gradient-primary:active {
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(99, 102, 241, 0.3);
}
/* π Dark Mode Specific Overrides */
body.dark-mode .btn-gradient-primary {
background: linear-gradient(135deg, #818cf8 0%, #c084fc 100%) !important;
/* Lighter gradient for dark mode */
color: #ffffff !important;
box-shadow: 0 4px 20px rgba(139, 92, 246, 0.5);
/* Stronger glow in dark */
}
body.dark-mode .btn-gradient-primary:hover {
box-shadow: 0 8px 30px rgba(139, 92, 246, 0.7), 0 0 0 4px rgba(139, 92, 246, 0.2);
}
/* Route Ticker Colors */
.ticker-item.added {
color: #177D4E;
/* Green */
}
.ticker-item.removed {
color: #dc3545;
/* Red */
}
/* Dark Mode Ticker */
body.dark-mode .ticker-item.added {
color: #4ade80;
/* Light Green */
}
body.dark-mode .ticker-item.removed {
color: #ef4444;
/* Light Red */
}
/* Fix Attractions Text Visibility in LIGHT MODE */
body:not(.dark-mode) #attractions-list .text-muted,
body:not(.dark-mode) #attractions-list .text-secondary {
color: #2c3e50 !important;
/* Deep dark blue-gray (readable) */
font-weight: 500;
}
body:not(.dark-mode) #attractions-list h6 {
color: #000 !important;
font-weight: 800 !important;
}
/* Fix Wikipedia Link Color (Blue in both modes) */
#attractions-list a.text-primary {
color: #2563eb !important;
}
/* Fix Wikipedia About Card Text (Must generally match dark mode card style) */
body.dark-mode #city-overview {
background-color: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: #e5e5e5 !important;
}
body.dark-mode #city-overview * {
color: #e5e5e5 !important;
}
/* Fix Travel Details Card in Dark Mode */
body.dark-mode .travel-details-card {
background-color: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: #e5e5e5 !important;
}
body.dark-mode .travel-details-card .text-muted {
color: #a3a3a3 !important;
}
body.dark-mode .travel-details-card h6 {
color: #fff !important;
}
/* =========================================
GLOBAL DARK MODE SCROLLBAR
Fixes white scrollbar in Chat & other pages
========================================= */
body.dark-mode ::-webkit-scrollbar {
width: 12px;
}
body.dark-mode ::-webkit-scrollbar-track {
background: #0f1116;
}
body.dark-mode ::-webkit-scrollbar-thumb {
background-color: #475569;
border-radius: 6px;
border: 3px solid #0f1116;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
background-color: var(--t-ink2);
}
/* Firefox */
body.dark-mode {
scrollbar-width: thin;
scrollbar-color: #475569 #0f1116;
}
/* =========================================
π 2026 NAVIGATION REDESIGN
========================================= */
/* Navbar Container */
.navbar {
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
background: rgba(255, 255, 255, 0.85) !important;
transition: all 0.3s ease;
}
body.dark-mode .navbar {
background: rgba(15, 23, 42, 0.85) !important;
/* Slate-900 with opacity */
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
/* Nav Links - Desktop */
.navbar-nav .nav-link {
color: #334155;
/* Slate-700 */
transition: color 0.2s ease;
position: relative;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.show {
color: #2563eb;
/* Blue-600 */
}
body.dark-mode .navbar-nav .nav-link {
color: #94a3b8;
/* Slate-400 */
}
body.dark-mode .navbar-nav .nav-link:hover,
body.dark-mode .navbar-nav .nav-link.show {
color: #38bdf8;
/* Sky-400 */
}
/* Dropdown Menu - Glassmorphism */
.dropdown-menu {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.4);
margin-top: 10px !important;
/* Spacing from nav */
border-radius: 16px;
box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
display: block;
/* Prepare for animation */
visibility: hidden;
opacity: 0;
transform: translateY(10px);
transition: all 0.2s ease;
}
.dropdown-menu.show {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
body.dark-mode .dropdown-menu {
background: rgba(30, 41, 59, 0.95);
/* Slate-800 */
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
}
/* Dropdown Items */
.dropdown-item {
color: #475569;
/* Slate-600 */
font-weight: 500;
transition: all 0.2s ease;
margin-bottom: 2px;
}
.dropdown-item:hover {
background: rgba(37, 99, 235, 0.08);
/* Blue tint */
color: #2563eb;
transform: translateX(4px);
}
body.dark-mode .dropdown-item {
color: #cbd5e1;
/* Slate-300 */
}
body.dark-mode .dropdown-item:hover {
background: rgba(56, 189, 248, 0.1);
/* Sky tint */
color: #38bdf8;
}
/* Animations */
@keyframes slideInUpFade {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate.slideIn {
animation: slideInUpFade 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
/* Offcanvas styles removed: Reverted to simple button navigation for mobile */
/* Highlight Active Dropdown Parent */
.nav-item.dropdown:hover>.nav-link {
color: #2563eb;
}
body.dark-mode .nav-item.dropdown:hover>.nav-link {
color: #38bdf8;
}
/* Mobile Nav Item Sizing */
@media (max-width: 991.98px) {
.dropdown-menu {
border: none;
background: transparent;
box-shadow: none;
padding-left: 1rem;
margin-top: 0 !important;
visibility: visible;
opacity: 1;
transform: none;
}
body.dark-mode .dropdown-menu {
background: transparent;
border: none;
box-shadow: none;
}
.nav-link {
padding: 12px 0;
font-size: 1.15rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.nav-item:last-child .nav-link {
border-bottom: none;
}
body.dark-mode .nav-link {
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
}
/* =========================================
Navigation Redesign (Task 24) - Amazing UX
========================================= */
/* 1. Mobile Divider Fix (The "Upper Line") */
@media (max-width: 991.98px) {
.nav-actions {
margin-top: 1rem;
padding-top: 1rem;
/* Explicitly remove border as requested */
border-top: none !important;
}
}
/* 2. Desktop "Slick" Pill Navigation */
@media (min-width: 992px) {
.navbar-nav {
gap: 0.25rem;
}
.navbar-nav .nav-link {
padding: 0.6rem 1.2rem !important;
border-radius: 50rem;
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
color: #4b5563;
/* Gray-600 */
font-weight: 600;
/* Bolder */
letter-spacing: 0.01em;
}
/* Hover & Active State */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.navbar-nav .nav-item.show .nav-link {
background-color: rgba(99, 102, 241, 0.1);
/* Indigo-light */
color: #4f46e5 !important;
/* Indigo-600 */
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
/* Soft shadow */
}
/* Dark Mode Desktop */
body.dark-mode .navbar-nav .nav-link {
color: #cbd5e1;
/* Slate-300 */
}
body.dark-mode .navbar-nav .nav-link:hover,
body.dark-mode .navbar-nav .nav-link.active,
body.dark-mode .navbar-nav .nav-item.show .nav-link {
background-color: rgba(99, 102, 241, 0.2);
color: #818cf8 !important;
/* Indigo-400 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Icons Animation */
.navbar-nav .nav-link i {
font-size: 1.1em;
vertical-align: -2px;
margin-right: 6px;
transition: transform 0.3s ease;
}
.navbar-nav .nav-link:hover i {
transform: rotate(-10deg) scale(1.1);
}
}
/* 3. Mobile "Amazing" List Styling */
@media (max-width: 991.98px) {
/* Override existing simple styles */
.offcanvas-body .nav-link {
padding: 0.8rem 1rem !important;
border-radius: 12px;
margin-bottom: 0.5rem;
border-bottom: none !important;
/* Remove old lines */
background: transparent;
transition: all 0.2s ease;
font-weight: 500;
}
.offcanvas-body .nav-link:hover,
.offcanvas-body .nav-item.show .nav-link {
background-color: rgba(99, 102, 241, 0.08);
color: #4f46e5 !important;
padding-left: 1.5rem !important;
/* Slide effect */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
body.dark-mode .offcanvas-body .nav-link:hover,
body.dark-mode .offcanvas-body .nav-item.show .nav-link {
background-color: rgba(255, 255, 255, 0.05);
color: #fff !important;
}
}
/* Force glow and gradient on mobile buttons */
.btn-mobile-glow {
background: var(--accent) !important;
box-shadow: var(--accent-glow) !important;
border: none !important;
color: #fff !important;
}
.btn-mobile-glow:hover,
.btn-mobile-glow:active,
.btn-mobile-glow:focus {
transform: translateY(-1px);
box-shadow: 0 0 15px rgba(99, 102, 241, 0.6) !important;
color: #fff !important;
}
/* π± Extra compact buttons for narrow mobile screens */
@media (max-width: 400px) {
.btn-mobile-glow {
padding: 0.3rem 0.6rem !important;
font-size: 0.72rem !important;
}
.theme-switch.switch-sm {
width: 45px !important;
height: 24px !important;
}
.theme-switch.switch-sm .switch-thumb {
width: 20px !important;
height: 20px !important;
}
}
/* ===== Premium Select2 Skinning (WOW Design) ===== */
.select2-container--default .select2-selection--single {
height: 3.2rem !important;
border-radius: 0.85rem !important;
border: var(--glass-border) !important;
background: var(--glass-bg) !important;
display: flex !important;
align-items: center !important;
padding: 0 1rem !important;
font-size: 1rem !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
color: inherit !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: inherit !important;
font-weight: 500 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 100% !important;
right: 1rem !important;
}
/* Premium Select2 Dropdown Styling - Light Mode */
.select2-container--default .select2-dropdown {
background-color: #ffffff !important;
border: 1px solid #e2e8f0 !important; /* slate-200 */
border-radius: 12px !important;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
overflow: hidden !important;
padding: 6px !important;
}
/* Base Option Styling */
.select2-container--default .select2-results__option {
padding: 8px 12px !important;
border-radius: 8px !important;
margin: 3px 0 !important;
font-size: 0.9rem !important;
transition: background-color 0.15s ease, color 0.15s ease !important;
background-color: transparent !important;
color: #334155 !important; /* slate-700 */
}
/* Selected Option (Not hovered - Light Mode) */
.select2-container--default .select2-results__option[aria-selected="true"] {
background-color: #eff6ff !important; /* Solid premium light blue (blue-50) */
color: #2563eb !important; /* Solid blue-600 */
font-weight: 600 !important;
}
/* Hovered / Highlighted Option (Light Mode) - DEFINED AFTER SELECTED TO WIN CASCADE */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected="true"] {
background: linear-gradient(135deg, #4f46e5, #06b6d4) !important; /* Indigo to Cyan */
color: #ffffff !important; /* Force pure white text */
font-weight: 500 !important;
}
/* --- Dark Mode Styles --- */
body.dark-mode .select2-container--default .select2-dropdown {
background-color: #15171e !important;
border: 1px solid #2d3748 !important; /* slate-700 */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}
body.dark-mode .select2-container--default .select2-results__option {
color: #cbd5e1 !important; /* slate-300 */
background-color: transparent !important;
}
/* Selected Option (Not hovered - Dark Mode) */
body.dark-mode .select2-container--default .select2-results__option[aria-selected="true"] {
background-color: #1e293b !important; /* Solid slate-800 */
color: #38bdf8 !important; /* Solid sky-400 */
font-weight: 600 !important;
}
/* Hovered / Highlighted Option (Dark Mode) - DEFINED AFTER SELECTED TO WIN CASCADE */
body.dark-mode .select2-container--default .select2-results__option--highlighted,
body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected],
body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected="true"] {
background: linear-gradient(135deg, #38bdf8, #818cf8) !important; /* Sky to Indigo */
color: #ffffff !important; /* Force pure white text */
font-weight: 500 !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border-radius: 0.5rem !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
padding: 0.5rem !important;
}
body.dark-mode .select2-search--dropdown .select2-search__field {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: white !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #9ca3af !important;
}
/* Mobile Select2 Tweaks */
@media (max-width: 991px) {
.select2-container--default .select2-selection--single {
height: 2.8rem !important;
font-size: 0.9rem !important;
}
}
@keyframes premium-active-pulse {
0% {
box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.2), 0 0 0 0 rgba(99, 102, 241, 0.2);
}
50% {
box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.4), 0 0 15px 2px rgba(99, 102, 241, 0.15);
}
100% {
box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.2), 0 0 0 0 rgba(99, 102, 241, 0.2);
}
}
.nav-item.active .premium-nav-link {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.08) 100%);
color: #6366f1 !important;
animation: premium-active-pulse 3s infinite ease-in-out;
}
body.dark-mode .nav-item.active .premium-nav-link {
color: #818cf8 !important;
background: rgba(99, 102, 241, 0.2);
animation: premium-active-pulse 3s infinite ease-in-out;
}
/* Wow focus effect */
.select2-container--default.select2-container--focus .select2-selection--single {
border-color: #6366f1 !important;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
transform: translateY(-1px);
}
/* ===== Premium Search Box Styling (WOW Design) ===== */
.query-wrapper {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.premium-input {
height: 3.2rem !important;
border-radius: 0.85rem !important;
border: var(--glass-border) !important;
background: var(--glass-bg) !important;
padding-left: 2.8rem !important;
padding-right: 2.8rem !important;
font-size: 1rem !important;
font-weight: 500 !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
color: inherit !important;
}
.premium-input:focus {
background: var(--glass-bg) !important;
border-color: #6366f1 !important;
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15) !important;
transform: translateY(-1px);
}
.search-icon-inner {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
font-size: 1.1rem;
pointer-events: none;
transition: color 0.3s ease;
z-index: 5;
}
.premium-input:focus~.search-icon-inner {
color: #6366f1;
}
.btn-clear-search {
position: absolute;
right: 0.8rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #9ca3af;
padding: 4px;
font-size: 1.2rem;
transition: all 0.2s ease;
cursor: pointer;
z-index: 5;
line-height: 1;
}
.btn-clear-search:hover {
color: #ef4444;
transform: translateY(-50%) scale(1.1);
}
/* Fix for RTL */
[dir='rtl'] .premium-input {
padding-left: 2.8rem !important;
padding-right: 2.8rem !important;
}
[dir='rtl'] .search-icon-inner {
left: auto;
right: 1rem;
}
[dir='rtl'] .btn-clear-search {
right: auto;
left: 0.8rem;
}
@media (max-width: 991px) {
.premium-input {
height: 2.8rem !important;
font-size: 0.9rem !important;
}
}
/* ===== Premium Low-Cost Toggle (WOW Design) ===== */
.premium-switch-container {
background: var(--glass-bg);
border: var(--glass-border);
border-radius: 0.85rem;
padding: 0.75rem 1rem;
transition: all 0.3s ease;
}
.premium-switch-container:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
body.dark-mode .premium-switch-container:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.form-switch .form-check-input {
width: 2.8rem !important;
height: 1.5rem !important;
margin-top: 0 !important;
cursor: pointer !important;
background-image: url('data:image/svg+xml,') !important;
background-color: rgba(0, 0, 0, 0.05) !important;
border-color: rgba(0, 0, 0, 0.1) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.form-switch .form-check-input:checked {
background-color: #6366f1 !important;
border-color: #6366f1 !important;
background-image: url('data:image/svg+xml,') !important;
box-shadow: 0 0 10px rgba(99, 102, 241, 0.4) !important;
}
body.dark-mode .form-switch .form-check-input {
background-color: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode .form-switch .form-check-input:checked {
background-color: #38bdf8 !important;
border-color: #38bdf8 !important;
box-shadow: 0 0 15px rgba(56, 189, 248, 0.5) !important;
}
/* ===== Theme Toggle Switch (Clean & Modern) ===== */
.theme-switch {
width: 52px;
height: 28px;
background: #cbd5e1;
/* Subtle slate gray for light mode */
border-radius: 30px;
position: relative;
cursor: pointer;
border: none;
padding: 0;
outline: none;
display: inline-block;
transition: background 0.3s ease;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
body.dark-mode .theme-switch {
background: var(--accent, #6366f1);
}
.theme-switch .switch-thumb {
width: 22px;
height: 22px;
background: #fff;
border-radius: 50%;
position: absolute;
top: 3px;
inset-inline-start: 3px;
/* RTL aware (Left in LTR, Right in RTL) */
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
/* LTR Default */
body.dark-mode .theme-switch .switch-thumb {
transform: translateX(24px);
}
/* RTL Override */
html[dir="rtl"] body.dark-mode .theme-switch .switch-thumb {
transform: translateX(-24px);
}
.theme-switch .switch-thumb i {
font-size: 11px;
color: var(--t-ink2);
transition: transform 0.5s ease, color 0.3s ease;
}
body.dark-mode .theme-switch .switch-thumb i {
color: #f59e0b;
transform: rotate(360deg);
}
/* For mobile menu */
.theme-switch.switch-sm {
width: 44px;
height: 24px;
}
.theme-switch.switch-sm .switch-thumb {
width: 18px;
height: 18px;
top: 3px;
inset-inline-start: 3px;
}
/* Mobile LTR */
body.dark-mode .theme-switch.switch-sm .switch-thumb {
transform: translateX(20px);
}
/* Mobile RTL */
html[dir="rtl"] body.dark-mode .theme-switch.switch-sm .switch-thumb {
transform: translateX(-20px);
}
.theme-switch.switch-sm .switch-thumb i {
font-size: 10px;
}
/* ===== Refined Table Aesthetics (Airlines, IATA, Headers) ===== */
.iata-badge {
font-weight: 800;
color: var(--bs-primary);
background: rgba(99, 102, 241, 0.08);
padding: 0.25rem 0.6rem;
border-radius: 8px;
font-size: 0.85rem;
border: 1px solid rgba(99, 102, 241, 0.1);
text-transform: uppercase;
letter-spacing: 0.02em;
}
body.dark-mode .iata-badge {
background: rgba(99, 102, 241, 0.15);
color: #a5b4fc;
border-color: rgba(99, 102, 241, 0.2);
}
.airport-link {
color: var(--bs-primary);
font-size: 1rem;
transition: all 0.3s ease;
}
.airport-link:hover {
color: #4f46e5;
text-decoration: underline !important;
}
body.dark-mode .airport-link {
color: #e0e7ff;
}
/* Airline Chips Refinement */
.airline-chip {
text-decoration: none;
display: inline-block;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.airline-chip-inner {
display: flex;
align-items: center;
padding: 0.35rem 0.75rem;
background: rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 50px;
font-size: 0.8rem;
font-weight: 600;
color: #4b5563;
transition: all 0.3s ease;
}
body.dark-mode .airline-chip-inner {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
color: #d1d5db;
}
.airline-chip:hover .airline-chip-inner {
background: rgba(99, 102, 241, 0.1);
border-color: rgba(99, 102, 241, 0.3);
color: var(--bs-primary);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}
.airline-chip-inner img {
height: 14px;
width: auto;
margin-right: 6px;
filter: grayscale(0.2);
transition: all 0.3s ease;
}
.airline-chip:hover img {
filter: grayscale(0);
transform: scale(1.1);
}
.airline-chip-inner i {
font-size: 0.75rem;
margin-left: 6px;
opacity: 0.5;
}
/* Hide DataTables Sort Icons and Add Premium Ones */
#airports-table thead th.sorting::after,
#airports-table thead th.sorting::before,
#airports-table thead th.sorting_asc::after,
#airports-table thead th.sorting_desc::after {
display: none !important;
}
#airports-table thead th {
cursor: pointer;
position: relative;
transition: all 0.3s ease;
}
#airports-table thead th:hover {
background: rgba(99, 102, 241, 0.15) !important;
}
#airports-table thead th::after {
content: '';
position: absolute;
right: 12px;
opacity: 0.2;
font-size: 0.8rem;
transition: all 0.3s ease;
}
#airports-table thead th.sorting_asc::after {
content: '';
opacity: 1;
color: var(--bs-primary);
}
#airports-table thead th.sorting_desc::after {
content: '';
opacity: 1;
color: var(--bs-primary);
}
/* Light Mode Table Row Background */
body:not(.dark-mode) #airports-table tbody tr:nth-child(even) {
background-color: rgba(0, 0, 0, 0.015);
}
/* =========================================
Mobile Filter Premium UI Update
========================================= */
.filter-wow {
background: linear-gradient(135deg, #e0f2fe 0%, #f0fdf4 100%);
border: 1px solid rgba(14, 165, 233, 0.15);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(14, 165, 233, 0.1) !important;
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
body.dark-mode .filter-wow {
background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
border: 1px solid rgba(56, 189, 248, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}
/* Subtle glow effect behind the card */
.filter-wow::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.6) 0%, transparent 50%);
opacity: 0.7;
pointer-events: none;
z-index: 0;
}
body.dark-mode .filter-wow::before {
background: radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.05) 0%, transparent 50%);
}
.filter-wow .card-header,
.filter-wow .card-body {
position: relative;
z-index: 1;
}
/* Refined inputs within the new wow filter */
.filter-wow .form-select,
.filter-wow .form-control {
background-color: rgba(255, 255, 255, 0.6) !important;
border: 1px solid rgba(14, 165, 233, 0.2);
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(4px);
}
.filter-wow .form-select:focus,
.filter-wow .form-control:focus {
background-color: #fff !important;
border-color: #0ea5e9;
box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15);
transform: translateY(-1px);
}
body.dark-mode .filter-wow .form-select,
body.dark-mode .filter-wow .form-control {
background-color: rgba(30, 41, 59, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.1);
color: #f8fafc !important;
}
body.dark-mode .filter-wow .form-select:focus,
body.dark-mode .filter-wow .form-control:focus {
background-color: #1e293b !important;
border-color: #38bdf8;
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.2);
}
.filter-wow .form-label {
font-weight: 600;
color: #334155;
letter-spacing: -0.01em;
}
body.dark-mode .filter-wow .form-label {
color: #cbd5e1;
}
/* Pop for the "Search & Filter" text */
.wow-header-text {
font-weight: 700 !important;
background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent !important;
/* fallback */
text-shadow: 0 2px 4px rgba(255, 255, 255, 0.3);
}
body.dark-mode .wow-header-text {
background: linear-gradient(135deg, #38bdf8 0%, #60a5fa 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
/* The clear button inside the filter */
.btn-wow-clear {
border-radius: 20px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.05);
font-weight: 600;
color: #475569;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.btn-wow-clear:hover {
background: #fff;
color: #0f172a;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
border-color: rgba(14, 165, 233, 0.3);
}
body.dark-mode .btn-wow-clear {
background: rgba(30, 41, 59, 0.8);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #cbd5e1;
}
body.dark-mode .btn-wow-clear:hover {
background: #334155;
color: #f8fafc;
border-color: rgba(56, 189, 248, 0.4);
}
/* Export Buttons */
.btn-wow-copy,
.btn-wow-csv,
.btn-wow-excel {
border-radius: 20px;
font-weight: 600;
padding: 0.5rem 1.25rem !important;
min-width: 90px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.btn-wow-copy {
background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
color: #0284c7;
}
.btn-wow-copy:hover {
background: linear-gradient(135deg, #bae6fd 0%, #7dd3fc 100%);
color: #0c4a6e;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(2, 132, 199, 0.15);
}
.btn-wow-csv {
background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
color: #7e22ce;
}
.btn-wow-csv:hover {
background: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%);
color: #581c87;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(126, 34, 206, 0.15);
}
.btn-wow-excel {
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
color: #16a34a;
}
.btn-wow-excel:hover {
background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%);
color: #14532d;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(22, 163, 74, 0.15);
}
body.dark-mode .btn-wow-copy,
body.dark-mode .btn-wow-csv,
body.dark-mode .btn-wow-excel {
border: 1px solid rgba(255, 255, 255, 0.1);
}
body.dark-mode .btn-wow-copy {
background: linear-gradient(135deg, rgba(2, 132, 199, 0.4) 0%, rgba(3, 105, 161, 0.4) 100%);
color: #38bdf8;
}
body.dark-mode .btn-wow-copy:hover {
background: linear-gradient(135deg, rgba(2, 132, 199, 0.6) 0%, rgba(3, 105, 161, 0.6) 100%);
color: #bae6fd;
}
body.dark-mode .btn-wow-csv {
background: linear-gradient(135deg, rgba(107, 33, 168, 0.4) 0%, rgba(88, 28, 135, 0.4) 100%);
color: #c084fc;
}
body.dark-mode .btn-wow-csv:hover {
background: linear-gradient(135deg, rgba(107, 33, 168, 0.6) 0%, rgba(88, 28, 135, 0.6) 100%);
color: #e9d5ff;
}
body.dark-mode .btn-wow-excel {
background: linear-gradient(135deg, rgba(21, 128, 61, 0.4) 0%, rgba(22, 101, 52, 0.4) 100%);
color: #4ade80;
}
body.dark-mode .btn-wow-excel:hover {
background: linear-gradient(135deg, rgba(21, 128, 61, 0.6) 0%, rgba(22, 101, 52, 0.6) 100%);
color: #86efac;
}
/* ===== WOW 2026 Flight Number Badge ===== */
.wow-flight-badge {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.65rem;
font-weight: 700;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 0.82rem;
letter-spacing: 0.03em;
color: #0c4a6e;
background: linear-gradient(135deg, rgba(56, 189, 248, 0.12) 0%, rgba(2, 132, 199, 0.08) 100%);
border: 1px solid rgba(14, 165, 233, 0.25);
border-radius: 6px;
box-shadow: 0 2px 6px rgba(14, 165, 233, 0.05);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
}
.wow-flight-badge i {
font-size: 0.8rem;
margin-right: 0.2rem;
opacity: 0.6;
}
html[dir="rtl"] .wow-flight-badge i {
margin-right: 0;
margin-left: 0.2rem;
}
.wow-flight-badge:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
border-color: rgba(14, 165, 233, 0.4);
background: linear-gradient(135deg, rgba(56, 189, 248, 0.18) 0%, rgba(2, 132, 199, 0.12) 100%);
}
body.dark-mode .wow-flight-badge {
color: #e0f2fe;
background: linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(2, 132, 199, 0.15) 100%);
border-color: rgba(14, 165, 233, 0.3);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.05);
}
body.dark-mode .wow-flight-badge:hover {
border-color: rgba(56, 189, 248, 0.5);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 8px rgba(56, 189, 248, 0.15);
background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(2, 132, 199, 0.2) 100%);
}
/* ===== Last Update Badge ===== */
.last-update-badge {
padding: 0.4rem 1rem;
font-size: 0.85rem;
border-radius: 50px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: all 0.3s ease;
}
body.dark-mode .last-update-badge {
background-color: rgba(255, 255, 255, 0.05) !important;
color: rgba(255, 255, 255, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
backdrop-filter: blur(12px);
}
body.dark-mode .last-update-badge strong {
color: #ffffff !important;
font-weight: 700;
}
body.dark-mode .last-update-badge i {
color: rgba(255, 255, 255, 0.5) !important;
}
.last-update-badge i {
opacity: 0.8;
}
.last-update-badge strong {
font-weight: 700;
}
/* ===== Airline Stats Widget ===== */
/* The card sits between "Most Popular Destinations" and "Trending Today",
which are plain .card.filter-wow.mb-3 β a 1.25rem radius and a 0.75rem
bottom margin made it visibly the odd one out. It now takes the same
geometry as its neighbours; only the hover transition is its own. */
.airline-stats-card {
overflow: hidden;
transition: all 0.3s ease;
}
.airline-stats-list {
list-style: none;
padding: 0;
margin: 0;
}
.airline-stats-item {
display: flex;
align-items: center;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
}
.airline-stats-item:last-child {
border-bottom: none;
}
.airline-stats-item:hover {
background: rgba(var(--bs-primary-rgb), 0.04);
}
.airline-stats-logo-wrapper {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
margin-inline-end: 0.75rem;
background: #fff;
border-radius: 6px;
padding: 3px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
flex-shrink: 0;
}
.airline-stats-logo {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.airline-stats-info {
flex-grow: 1;
min-width: 0;
}
.airline-stats-name {
font-weight: 600;
font-size: 0.88rem;
margin-bottom: 0;
color: #334155;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.airline-stats-iata {
font-size: 0.75rem;
color: #94a3b8;
font-weight: 400;
}
.airline-stats-count {
text-align: end;
font-size: 0.78rem;
color: var(--t-ink2);
font-weight: 500;
flex-shrink: 0;
margin-inline-start: 10px;
}
/* --- Aviation Dashboard: Premium Filter Bar --- */
@media (min-width: 992px) {
.premium-filter-bar {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(15px) saturate(180%);
-webkit-backdrop-filter: blur(15px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 100px;
/* Pill shape */
padding: 6px 10px 6px 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
white-space: nowrap;
z-index: 10;
align-items: stretch !important;
}
body.dark-mode .premium-filter-bar {
background: rgba(15, 23, 42, 0.7);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.filter-unit {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 110px;
flex-shrink: 0;
border-right: 1px solid rgba(0, 0, 0, 0.05);
padding: 2px 12px;
transition: all 0.2s ease;
border-radius: 12px;
}
.filter-unit:hover,
.filter-unit:focus-within {
background: rgba(37, 99, 235, 0.04);
}
body.dark-mode .filter-unit:hover,
body.dark-mode .filter-unit:focus-within {
background: rgba(255, 255, 255, 0.03);
}
.filter-unit-airline {
min-width: 180px !important;
}
.filter-unit-country {
min-width: 150px !important;
}
.filter-unit-city {
min-width: 170px !important;
}
/* Select2 Clear Button (the small x) */
.premium-filter-bar .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
width: 14px;
height: 14px;
background-color: rgba(0, 0, 0, 0.05);
border-radius: 50%;
font-size: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 6px;
margin-right: 8px;
color: var(--t-ink2);
}
body.dark-mode .filter-unit {
border-right-color: rgba(255, 255, 255, 0.05);
}
.unit-label {
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
color: var(--t-ink2);
margin-bottom: -2px;
letter-spacing: 0.04em;
display: flex;
align-items: center;
gap: 4px;
}
.unit-select {
border: none !important;
background: transparent !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
padding: 0 !important;
cursor: pointer;
color: #0f172a !important;
box-shadow: none !important;
width: 100%;
}
body.dark-mode .unit-select {
color: #f1f5f9 !important;
}
/* Select2 Reset for Bar - Remove Triangles & Clean up */
.premium-filter-bar .select2-container--bootstrap-5 .select2-selection {
background: transparent !important;
border: none !important;
padding: 0 !important;
min-height: auto !important;
box-shadow: none !important;
}
/* Hide the gray triangle (dropdown arrow) - AGGRESSIVE */
.premium-filter-bar .select2-container .select2-selection--single .select2-selection__arrow,
.premium-filter-bar .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow,
.premium-filter-bar .select2-selection__arrow b {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
.premium-filter-bar .select2-container--bootstrap-5 .select2-selection--single {
background-image: none !important;
padding-right: 0 !important;
}
.premium-filter-bar .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
padding: 0 !important;
line-height: 1.1 !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
}
.filter-unit-toggle {
border-right: 1px solid rgba(0, 0, 0, 0.05);
padding-right: 15px;
flex-shrink: 0;
}
body.dark-mode .filter-unit-toggle {
border-right-color: rgba(255, 255, 255, 0.05);
}
.unit-label-small {
font-size: 0.68rem;
font-weight: 600;
color: var(--t-ink2);
}
.filter-unit-search {
width: 110px;
flex-grow: 0;
border-right: 1px solid rgba(0, 0, 0, 0.05);
padding-right: 8px;
margin-right: 2px;
}
body.dark-mode .filter-unit-search {
border-right-color: rgba(255, 255, 255, 0.05);
}
.search-wrapper {
position: relative;
display: flex;
align-items: center;
height: 100%;
}
.search-icon {
position: absolute;
left: 0;
color: #94a3b8;
font-size: 0.85rem;
}
/* Aggressive Border Removal for Search */
#query-filter,
#query-filter:focus,
.search-wrapper,
.search-wrapper input {
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
font-size: 0.82rem;
font-weight: 500;
}
#query-filter {
padding-left: 20px !important;
color: #1e293b;
width: 100%;
}
body.dark-mode #query-filter {
color: #f1f5f9;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
}
/* Integrated Actions - Ultra Compact */
.filter-actions-integrated {
flex-shrink: 0;
display: flex !important;
flex-direction: row !important;
direction: ltr !important;
align-items: center !important;
gap: 8px !important;
}
.export-icon-group .dt-buttons {
display: flex !important;
flex-direction: row !important;
direction: ltr !important;
gap: 8px !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
/* ββ Base export button ββ */
.export-icon-group .btn {
margin: 0 !important;
padding: 0 14px 0 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
height: 36px !important;
width: auto !important;
min-width: fit-content !important;
max-width: none !important;
overflow: visible !important;
border-radius: 24px !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
white-space: nowrap !important;
border: none !important;
cursor: pointer;
transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1),
filter 0.18s ease !important;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) !important;
}
.export-icon-group .btn i {
font-size: 0.95rem !important;
line-height: 1 !important;
flex-shrink: 0 !important;
}
.export-icon-group .btn span {
display: inline !important;
visibility: visible !important;
opacity: 1 !important;
}
/* ββ Per-action gradient colours ββ */
.export-icon-group .btn.buttons-copy {
background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
color: #fff !important;
}
.export-icon-group .btn.buttons-excel {
background: linear-gradient(135deg, #22c55e, #16a34a) !important;
color: #fff !important;
}
.export-icon-group .btn.buttons-pdf {
background: linear-gradient(135deg, #f87171, #dc2626) !important;
color: #fff !important;
}
.export-icon-group .btn.buttons-print {
background: linear-gradient(135deg, #64748b, #475569) !important;
color: #fff !important;
}
/* ββ Hover β lift + glow ββ */
.export-icon-group .btn:hover {
transform: translateY(-2px) scale(1.04) !important;
filter: brightness(1.1) !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22) !important;
}
/* ββ Dark mode toning ββ */
body.dark-mode .export-icon-group .btn {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode .export-icon-group .btn:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}
.action-divider {
width: 1px;
height: 18px;
background: rgba(0, 0, 0, 0.08);
}
body.dark-mode .action-divider {
background: rgba(255, 255, 255, 0.1);
}
.btn-clear-minimal {
border: 1px solid rgba(239, 68, 68, 0.15);
background: rgba(239, 68, 68, 0.05);
color: #CF3B3B;
width: 26px;
height: 26px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
cursor: pointer;
font-size: 0.75rem;
}
.btn-clear-minimal:hover {
background: #ef4444;
color: white;
transform: rotate(90deg);
}
.airline-stats-count strong {
color: #0f172a;
font-weight: 700;
font-size: 0.85rem;
}
/* Dark Mode Overrides */
body.dark-mode .airline-stats-item {
border-color: rgba(255, 255, 255, 0.06);
}
body.dark-mode .airline-stats-item:hover {
background: rgba(255, 255, 255, 0.03);
}
body.dark-mode .airline-stats-name {
color: #f1f5f9;
}
body.dark-mode .airline-stats-count strong {
color: #f8fafc;
}
body.dark-mode .airline-stats-logo-wrapper {
background: #1e293b;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.05);
}
body.dark-mode .airline-stats-count {
color: #94a3b8;
}
/* Mobile Navigation Optimization */
.btn-mobile-compact {
padding: 4px 10px !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2) !important;
border: none !important;
transition: all 0.2s ease !important;
}
.btn-mobile-compact i {
font-size: 0.85rem !important;
}
/* Global: Hide native select arrow triangles (as requested) */
select,
.form-select,
.unit-select,
.form-select-sm {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-image: none !important;
/* Removes Bootstrap background arrow */
padding-right: 0.5rem !important;
/* Reset padding since arrow is gone */
}
/* Hide arrow for IE */
select::-ms-expand {
display: none;
}
/* Ensure consistent look in RTL */
[dir="rtl"] select,
[dir="rtl"] .form-select,
[dir="rtl"] .unit-select {
padding-left: 0.5rem !important;
padding-right: 0 !important;
}
/* π Dark Mode Fixes for New Mobile Filter */
body.dark-mode .card.shadow-sm.border-0.rounded-4.overflow-hidden {
background: rgba(30, 41, 59, 0.7) !important;
/* slate-800 with opacity */
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode .p-2.rounded-3[style*="background: rgba(0,0,0,0.03)"] {
background: rgba(255, 255, 255, 0.05) !important;
}
body.dark-mode #query-filter-mobile {
color: #f8fafc !important;
}
body.dark-mode #query-filter-mobile::placeholder {
color: rgba(255, 255, 255, 0.4);
}
body.dark-mode .bg-light.rounded-pill {
background: rgba(255, 255, 255, 0.1) !important;
}
/* β Select2 Triangle Removal & Dark Mode */
.select2-container--default .select2-selection--single .select2-selection__arrow {
display: none !important;
}
.select2-container--default .select2-selection--single {
background-color: transparent !important;
border: none !important;
}
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #f8fafc !important;
}
/* Specific fix for mobile filter selects in dark mode */
body.dark-mode .filter-unit-mobile select {
color: #f8fafc !important;
}
/* π Final Polish for Mobile Filter Search & Dark Mode */
#query-filter-mobile,
#query-filter-mobile:focus,
#query-filter-mobile:active {
background-color: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
color: inherit !important;
appearance: none !important;
-webkit-appearance: none !important;
}
/* Remove any background from the search wrapper in dark mode */
body.dark-mode .bg-light.rounded-pill {
background-color: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* Remove border from select2 containers in mobile filter */
.filter-unit-mobile .select2-container--default .select2-selection--single {
border: none !important;
background: transparent !important;
}
/* Remove the dark background from Select2 search if applied */
.select2-search__field {
background-color: transparent !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
body.dark-mode .select2-search__field {
border-color: rgba(255, 255, 255, 0.1) !important;
color: #f8fafc !important;
}
/* ===== Cancellation Stats Widget Fixes ===== */
body.dark-mode #cancellation-stats-container .card {
background: rgba(15, 23, 42, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode #cancellation-stats-container .bg-light {
background-color: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: #f8fafc !important;
}
body.dark-mode #cancellation-stats-container .bg-white {
background-color: rgba(255, 255, 255, 0.08) !important;
color: #f8fafc !important;
border-color: rgba(255, 255, 255, 0.15) !important;
}
body.dark-mode #cancellation-stats-container .text-muted {
color: rgba(255, 255, 255, 0.5) !important;
}
body.dark-mode #cancellation-stats-container .fw-bold:not(.text-danger) {
color: #f8fafc !important;
}
/* ===== Delay Stats Widget Dark Mode ===== */
body.dark-mode #delay-stats-container .card {
background: rgba(15, 23, 42, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode #delay-stats-container .bg-light {
background-color: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: #f8fafc !important;
}
body.dark-mode #delay-stats-container .bg-white {
background-color: rgba(255, 255, 255, 0.08) !important;
color: #f8fafc !important;
border-color: rgba(255, 255, 255, 0.15) !important;
}
body.dark-mode #delay-stats-container .text-muted {
color: rgba(255, 255, 255, 0.5) !important;
}
body.dark-mode #delay-stats-container .fw-bold:not(.text-warning) {
color: #f8fafc !important;
}
/* ==========================================================================
β
RTL FIXES: Navbar & Dropdown Menus
Ensures icons are leading (on the right) in Hebrew mode.
========================================================================== */
[dir="rtl"] .dropdown-menu {
text-align: right !important;
direction: rtl !important;
}
[dir="rtl"] .dropdown-item {
display: flex !important;
flex-direction: row !important;
/* In RTL flex, row is right-to-left */
align-items: center !important;
justify-content: flex-start !important;
text-align: right !important;
}
[dir="rtl"] .dropdown-item i {
margin-right: 0 !important;
margin-left: 0.6rem !important;
/* Space icon on right from text on left */
}
/* Desktop Navbar Icons */
[dir="rtl"] .premium-nav-link {
display: flex !important;
align-items: center !important;
flex-direction: row !important;
}
[dir="rtl"] .premium-nav-link i {
margin-right: 0 !important;
margin-left: 0.5rem !important;
}
/* Mobile Navbar Buttons */
[dir="rtl"] .btn-mobile-compact {
flex-direction: row !important;
}
[dir="rtl"] .btn-mobile-compact i {
margin-right: 0 !important;
margin-left: 0.4rem !important;
}
/* Remove carets (triangles) from dropdown menus */
.dropdown-toggle::after {
display: none !important;
}
/* β
RTL Select Fix: Move arrow to the left */
[dir="rtl"] select,
[dir="rtl"] .form-select,
[dir="rtl"] .unit-select,
[dir="rtl"] .form-select-sm {
background-position: left 0.75rem center !important;
padding-left: 2.25rem !important;
padding-right: 0.75rem !important;
text-align: right !important;
}
/* Ticker Expander Icon Transition */
.collapse-icon {
transition: transform 0.3s ease;
}
[aria-expanded='false'] .collapse-icon {
transform: rotate(-90deg);
}
[dir='rtl'] [aria-expanded='false'] .collapse-icon {
transform: rotate(90deg);
}
/* β
Dark Mode Fixes for Lowcost Switch & Labels */
body.dark-mode .unit-label-small {
color: #94a3b8 !important;
}
body.dark-mode .text-primary-emphasis {
color: #7dd3fc !important;
/* Lighter sky blue for dark mode visibility */
}
body.dark-mode .form-check-input {
background-color: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.25) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255, 255, 255, 0.6)'/%3e%3c/svg%3e") !important;
}
body.dark-mode .form-check-input:checked {
background-color: #38bdf8 !important;
border-color: #38bdf8 !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
/* ==========================================================================
HOMEPAGE (INDEX.HTML) SPECIFIC STYLES
========================================================================== */
#live-radar-container {
height: 220px;
width: 100%;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.05);
}
#live-radar-container iframe {
width: 100%;
height: 100%;
border: none;
}
#mini-map {
height: 200px;
width: 100%;
border-radius: 8px;
z-index: 1;
}
body.dark-mode .leaflet-tile {
filter: brightness(0.8) contrast(1.2);
}
.mini-map-card {
overflow: hidden;
transition: transform 0.2s;
}
.mini-map-card:hover {
transform: translateY(-3px);
}
/* Fixed Sidebar Size for Desktop to prevent pushing main content or squishing widgets */
@media (min-width: 992px) {
.filters-col {
flex: 0 0 320px !important;
width: 320px !important;
}
.main-content-col {
flex: 1 !important;
width: calc(100% - 320px) !important;
}
}
/* Allow advertisements on mobile ONLY for bottom ads on index.html */
@media (max-width: 768px) {
.col-lg-9 [aria-label="Advertisement"],
.col-lg-9 .card[aria-label="Advertisement"] {
display: block !important;
visibility: visible !important;
height: auto !important;
margin: initial !important;
padding: initial !important;
}
}
/* Prevent FOUC of native selects before Select2 initializes */
select.select2-pre-init {
opacity: 0;
visibility: hidden;
height: 38px;
/* Appx height of rendered select2 to prevent major layout shift */
}
[dir="rtl"] td.dtr-control:before {
content: "\25C0" !important;
margin-right: 0 !important;
margin-left: 6px !important;
}
/* RTL Table Header Alignment */
[dir="rtl"] #airports-table thead th {
text-align: right !important;
}
/* Prevent FOUC of table before DataTables initializes */
table.dataTable-pre-init {
opacity: 0;
animation: revealTable 0.5s ease-in 0.8s forwards;
/* Fallback to reveal after 800ms if JS fails */
}
@keyframes revealTable {
to {
opacity: 1;
visibility: visible;
}
}
/* Airline chip filtering */
#airports-table.filter-isr-TLV .airline-chip:not(.isr-TLV) {
display: none !important;
}
#airports-table.filter-isr-HFA .airline-chip:not(.isr-HFA) {
display: none !important;
}
#airports-table.filter-isr-ETM .airline-chip:not(.isr-ETM) {
display: none !important;
}
#airports-table.filter-lowcost .airline-chip:not(:has(.lowcost-dot)) {
display: none !important;
}
#airports-table.filter-codeshare .airline-chip:not(:has(.codeshare-dot)) {
display: none !important;
}
#airports-table.filter-legacy .airline-chip:not(:has(.legacy-dot)) {
display: none !important;
}
/* Airline type dot selector */
.filter-unit-type {
min-width: 180px !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px;
}
.filter-unit-type .unit-label {
border-right: 1px solid rgba(0, 0, 0, 0.1);
padding-right: 8px;
white-space: nowrap;
flex-shrink: 0;
}
body.dark-mode .filter-unit-type .unit-label {
border-right-color: rgba(255, 255, 255, 0.1);
}
.type-dot-group {
display: flex;
gap: 6px;
align-items: center;
}
.type-dot {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid transparent;
background: rgba(0, 0, 0, 0.04);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.type-dot:hover {
transform: scale(1.15);
background: rgba(0, 0, 0, 0.07);
}
.type-dot-label {
font-size: 0.65rem;
font-weight: 700;
color: var(--t-ink2);
line-height: 1;
}
.type-dot-marker {
width: 10px !important;
height: 10px !important;
margin: 0 !important;
flex-shrink: 0;
}
/* Active states */
.type-dot-all.active {
background: rgba(14, 165, 233, 0.12);
border-color: #0ea5e9;
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
.type-dot-all.active .type-dot-label {
color: #0ea5e9;
}
.type-dot.active[data-type="lowcost"] {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
background: rgba(239, 68, 68, 0.08);
}
.type-dot.active[data-type="codeshare"] {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
background: rgba(99, 102, 241, 0.08);
}
.type-dot.active[data-type="legacy"] {
border-color: #0B855C;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
background: rgba(16, 185, 129, 0.08);
}
body.dark-mode .type-dot {
background: rgba(255, 255, 255, 0.06);
}
body.dark-mode .type-dot-label {
color: #94a3b8;
}
/* AI Assistant Card - Light Blue Theme */
.ai-assistant-card {
background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 60%, #7dd3fc 100%) !important;
color: #0369a1 !important;
}
.ai-assistant-card .card-header,
.ai-assistant-card h6,
.ai-assistant-card p {
color: #0369a1 !important;
}
.ai-assistant-card .btn-ai-chat {
background: rgba(3, 105, 161, 0.1) !important;
color: #0369a1 !important;
border: 1px solid rgba(3, 105, 161, 0.2) !important;
}
/* Dark Mode Overrides */
body.dark-mode .ai-assistant-card {
background: linear-gradient(135deg, #0c4a6e 0%, #075985 60%, #0369a1 100%) !important;
color: white !important;
}
body.dark-mode .ai-assistant-card .card-header,
body.dark-mode .ai-assistant-card h6,
body.dark-mode .ai-assistant-card p {
color: white !important;
}
body.dark-mode .ai-assistant-card .btn-ai-chat {
background: rgba(255, 255, 255, 0.1) !important;
color: white !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
/* Travel Guide Card - Plum Bordo Theme */
.travel-guide-card {
background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 60%, #f9a8d4 100%) !important;
color: #831843 !important;
}
.travel-guide-card .card-header,
.travel-guide-card h5,
.travel-guide-card p {
color: #831843 !important;
}
.travel-guide-card .btn-travel-guide {
background: rgba(131, 24, 67, 0.1) !important;
color: #831843 !important;
border: 1px solid rgba(131, 24, 67, 0.2) !important;
}
/* Dark Mode Overrides - Travel Guide */
body.dark-mode .travel-guide-card {
background: linear-gradient(135deg, #831843 0%, #701a75 60%, #4c1d95 100%) !important;
color: white !important;
}
body.dark-mode .travel-guide-card .card-header,
body.dark-mode .travel-guide-card h5,
body.dark-mode .travel-guide-card p {
color: white !important;
}
body.dark-mode .travel-guide-card .btn-travel-guide {
background: rgba(255, 255, 255, 0.1) !important;
color: white !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
/* Flights Dashboard Widget - Emerald Glossy Theme */
.flights-dashboard-card {
background: linear-gradient(135deg, #0d9488 0%, #0B855C 60%, #34d399 100%) !important;
color: white !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
box-shadow: 0 10px 30px rgba(16, 185, 129, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.1) !important;
}
.flights-dashboard-card .card-header,
.flights-dashboard-card h5,
.flights-dashboard-card p {
color: white !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.flights-dashboard-card .btn-flights-live {
background: rgba(255, 255, 255, 0.2) !important;
color: white !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
backdrop-filter: blur(5px);
}
/* Dark Mode Overrides - Flights Dashboard */
body.dark-mode .flights-dashboard-card {
background: linear-gradient(135deg, #064e3b 0%, #065f46 60%, #047857 100%) !important;
}
/* Telegram Bot Card */
.telegram-bot-card {
background: linear-gradient(135deg, #0088cc 0%, #00a2ed 60%, #32afed 100%) !important;
position: relative;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.telegram-bot-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0, 136, 204, 0.4) !important;
}
.btn-telegram-cta {
background: white !important;
color: #007DBB !important; /* #0088cc was 3.89:1 on white */
border: none !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
}
.btn-telegram-cta:hover {
background: #f8f9fa !important;
transform: scale(1.05);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}
body.dark-mode .telegram-bot-card {
background: linear-gradient(135deg, #00334d 0%, #004e73 60%, #006699 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}
body.dark-mode .telegram-bot-card .btn-telegram-cta {
background: rgba(255, 255, 255, 0.1) !important;
color: white !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
backdrop-filter: blur(5px);
}
body.dark-mode .telegram-bot-card .btn-telegram-cta:hover {
background: rgba(255, 255, 255, 0.2) !important;
}
/* Sienna Accessibility Menu Position */
.asw-menu-btn {
left: auto !important;
right: 30px !important;
transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease !important;
}
@media (min-width: 768px) {
.asw-menu-btn {
transform: scale(0.65) !important;
transform-origin: bottom right !important;
}
}
html[lang="he"] .asw-menu-btn,
[dir="rtl"] .asw-menu-btn {
left: 30px !important;
right: auto !important;
}
@media (min-width: 768px) {
html[lang="he"] .asw-menu-btn,
[dir="rtl"] .asw-menu-btn {
transform-origin: bottom left !important;
}
}
/* Global Dark Mode overrides for Cookie Consent Banner */
body.dark-mode #cookie-banner {
background: rgba(30, 41, 59, 0.92) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #f3f4f6 !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}
body.dark-mode .cookie-text {
color: #d1d5db !important;
}
body.dark-mode #cookie-reject-btn {
background-color: rgba(255, 255, 255, 0.08) !important;
color: #e5e7eb !important;
}
body.dark-mode #cookie-reject-btn:hover {
background-color: rgba(255, 255, 255, 0.12) !important;
}
body.dark-mode #cookie-customize-btn {
color: #818cf8 !important;
border: 1px solid rgba(129, 140, 248, 0.3) !important;
}
body.dark-mode #cookie-customize-btn:hover {
background-color: rgba(129, 140, 248, 0.08) !important;
border-color: #818cf8 !important;
}
/* ==========================================================================
Chrome Extension Premium Card Styles
========================================================================== */
.chrome-extension-card {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 60%, #db2777 100%) !important;
position: relative;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.chrome-extension-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(124, 58, 237, 0.4) !important;
}
.btn-chrome-cta {
background: white !important;
color: #7c3aed !important;
border: none !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
}
.btn-chrome-cta:hover {
background: #f8f9fa !important;
transform: scale(1.05);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}
/* Dark Mode Support */
body.dark-mode .chrome-extension-card {
background: linear-gradient(135deg, #1e1b4b 0%, #311042 60%, #4c0519 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}
body.dark-mode .chrome-extension-card .btn-chrome-cta {
background: rgba(255, 255, 255, 0.1) !important;
color: white !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
backdrop-filter: blur(5px);
}
body.dark-mode .chrome-extension-card .btn-chrome-cta:hover {
background: rgba(255, 255, 255, 0.2) !important;
}
/* ==========================================================================
Featured Travel Guides & Insights Overrides (index.html)
========================================================================== */
body.dark-mode [aria-label="Travel Guides"] h6 {
color: #ffffff !important;
}
body.dark-mode [aria-label="Travel Guides"] .card {
background: rgba(30, 41, 59, 0.7) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode [aria-label="Travel Guides"] .card-header,
body.dark-mode [aria-label="Travel Guides"] .card-body {
background: transparent !important;
}
/* ==========================================================================
Mobile-First Explore Cards and Portal
========================================================================== */
.mobile-explore-portal {
padding: 0 4px;
}
.mobile-cards-scroll-container {
max-height: 650px;
max-height: calc(100vh - 265px);
overflow-y: auto;
padding: 4px;
margin-top: 8px;
-webkit-overflow-scrolling: touch;
/* Custom thin scrollbar */
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
body.dark-mode .mobile-cards-scroll-container {
scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
/* For Webkit browser styles */
.mobile-cards-scroll-container::-webkit-scrollbar {
width: 6px;
}
.mobile-cards-scroll-container::-webkit-scrollbar-track {
background: transparent;
}
.mobile-cards-scroll-container::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.15);
border-radius: 3px;
}
body.dark-mode .mobile-cards-scroll-container::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.15);
}
.mobile-search-wrapper {
position: relative;
margin-bottom: 0.75rem;
}
.mobile-search-input {
width: 100%;
padding: 14px 16px 14px 44px;
font-size: 0.95rem;
font-weight: 600;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: #ffffff;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
transition: all 0.25s ease;
outline: none;
}
.mobile-search-input:focus {
border-color: #0ea5e9;
box-shadow: 0 4px 20px rgba(14, 165, 233, 0.12);
}
.mobile-search-wrapper i {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
font-size: 1.15rem;
}
/* RTL Search Icon positioning */
[dir="rtl"] .mobile-search-input {
padding: 14px 44px 14px 16px;
}
[dir="rtl"] .mobile-search-wrapper i {
left: auto;
right: 16px;
}
/* Single scrollable filter strip (chips + direction + selects) */
.mobile-filter-strip {
display: flex;
align-items: center;
gap: 8px;
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 10px;
margin-bottom: 0.75rem;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.mobile-filter-strip::-webkit-scrollbar {
display: none;
}
/* Legacy: kept for any residual references */
.mobile-filter-chips {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 12px;
margin-bottom: 0.75rem;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.mobile-filter-chips::-webkit-scrollbar {
display: none;
}
.mobile-chip {
flex: 0 0 auto;
padding: 8px 16px;
font-size: 0.8rem;
font-weight: 700;
color: #475569;
background: #f1f5f9;
border: 1px solid rgba(0, 0, 0, 0.03);
border-radius: 20px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
user-select: none;
text-decoration: none;
}
.mobile-chip.active {
color: #323232;
background: #0ea5e9;
border-color: #0ea5e9;
box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
}
.mobile-chip-clear {
color: #ef4444;
border-color: rgba(239, 68, 68, 0.3);
padding: 8px 12px;
}
.mobile-chip-clear:hover {
background: rgba(239, 68, 68, 0.08);
border-color: #ef4444;
}
/* Card layout */
.mobile-destination-card {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 16px;
padding: 16px;
margin-bottom: 1rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
text-decoration: none !important;
color: inherit !important;
display: block;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.mobile-destination-card:active {
transform: scale(0.98);
background: #f8fafc;
}
.mobile-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.mobile-card-title {
font-size: 1.4rem;
font-weight: 700;
color: #0f172a;
margin: 0;
}
.mobile-card-subtitle {
font-size: 1rem;
color: var(--t-ink2);
margin-top: 1px;
}
.mobile-iata-badge {
background: rgba(14, 165, 233, 0.08);
color: #0A76A7;
font-size: 1rem;
font-weight: 800;
padding: 4px 12px;
border-radius: 8px;
letter-spacing: 0.02em;
}
/* Card middle: Direct carrier logos list */
.mobile-card-airlines {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.mobile-airline-tag {
display: inline-flex;
align-items: center;
background: #f8fafc;
border: 1px solid rgba(0, 0, 0, 0.03);
padding: 5px 11px;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 600;
color: #475569;
}
.mobile-airline-tag img {
height: 18px;
width: auto;
margin-right: 5px;
}
[dir="rtl"] .mobile-airline-tag img {
margin-right: 0;
margin-left: 4px;
}
/* Card bottom row: Pills details */
.mobile-card-footer {
display: flex;
align-items: center;
gap: 8px;
border-top: 1px solid rgba(0, 0, 0, 0.03);
padding-top: 10px;
}
.mobile-card-footer .mobile-card-action {
margin-left: auto;
}
.mobile-pill {
display: inline-flex;
align-items: center;
gap: 4px;
background: #f1f5f9;
padding: 5px 11px;
border-radius: 20px;
font-size: 0.83rem;
font-weight: 700;
color: #475569;
}
.mobile-pill.pill-distance {
background: rgba(99, 102, 241, 0.06);
color: #5E60E4;
}
.mobile-pill.pill-time {
background: rgba(16, 185, 129, 0.06);
color: #0B815A;
}
.mobile-pill.pill-dir {
background: rgba(100, 116, 139, 0.06);
color: var(--t-ink2);
}
/* flytlv.app deal button (rendered only when a live deal exists for the
card's destination). A real button next to Details β the card itself is
not a link, every action is explicit. Amber so it can never be confused
with the blue Details button. */
/* Mirrors .mobile-card-action exactly (size, radius, weight) so the two read
as one button family β amber vs blue is the only difference. The
text-fill-color guard keeps the label white even against theme.css's
!important link colour (it is also excluded there by :not(.mobile-deal-btn)). */
.mobile-deal-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 0.86rem;
font-weight: 700;
padding: 6px 12px;
border-radius: 999px;
box-shadow: 0 4px 10px rgba(245, 158, 11, 0.25);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255, 255, 255, 0.1);
letter-spacing: 0.01em;
text-decoration: none !important;
white-space: nowrap;
}
.mobile-deal-btn:hover {
background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
color: #ffffff !important;
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(245, 158, 11, 0.4);
}
/* Arrow indicator inside card */
.mobile-card-arrow {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.95);
transition: transform 0.2s ease;
}
[dir="rtl"] .mobile-card-arrow {
transform: scaleX(-1);
}
/* Premium Details Button call-to-action */
.mobile-card-action {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
color: #ffffff !important;
text-decoration: none !important; /* it is an now β kill the underline */
font-size: 0.86rem;
font-weight: 700;
padding: 6px 15px;
border-radius: 999px;
box-shadow: 0 4px 10px rgba(14, 165, 233, 0.18);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255, 255, 255, 0.1);
letter-spacing: 0.01em;
}
/* Hover and active micro-animations */
.mobile-destination-card:hover .mobile-card-action {
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(14, 165, 233, 0.32);
background: linear-gradient(135deg, #0284c7 0%, #1d4ed8 100%);
}
.mobile-destination-card:hover .mobile-card-arrow {
transform: translateX(3px);
}
[dir="rtl"] .mobile-destination-card:hover .mobile-card-arrow {
transform: translateX(-3px) scaleX(-1);
}
/* Dark Mode - Premium Details Button styling */
body.dark-mode .mobile-card-action {
background: linear-gradient(135deg, #38bdf8 0%, #0369a1 100%);
box-shadow: 0 4px 10px rgba(56, 189, 248, 0.15);
border-color: rgba(255, 255, 255, 0.05);
}
body.dark-mode .mobile-destination-card:hover .mobile-card-action {
background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
box-shadow: 0 6px 14px rgba(56, 189, 248, 0.28);
}
/* Reposition Sienna / NagishLi accessibility floating widget on mobile to float cleanly above explore card bottom */
@media (max-width: 991.98px) {
.asw-menu-btn {
bottom: 25px !important;
right: 8px !important;
}
}
/* ==========================================================================
Dark Mode Support for Mobile Cards
========================================================================== */
body.dark-mode .mobile-search-input {
background: #1e293b;
border-color: rgba(255, 255, 255, 0.08);
color: #f1f5f9;
}
body.dark-mode .mobile-search-input:focus {
border-color: #38bdf8;
box-shadow: 0 4px 20px rgba(56, 189, 248, 0.15);
}
body.dark-mode .mobile-chip {
color: #94a3b8;
background: #1e293b;
border-color: rgba(255, 255, 255, 0.05);
}
body.dark-mode .mobile-chip.active {
color: #0f172a;
background: #38bdf8;
border-color: #38bdf8;
box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25);
}
body.dark-mode .mobile-destination-card {
background: #1e293b;
border-color: rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
body.dark-mode .mobile-destination-card:active {
background: #1e293b;
opacity: 0.85;
}
body.dark-mode .mobile-card-title {
color: #f1f5f9;
}
body.dark-mode .mobile-card-subtitle {
color: #94a3b8;
}
body.dark-mode .mobile-iata-badge {
background: rgba(56, 189, 248, 0.12);
color: #38bdf8;
}
body.dark-mode .mobile-airline-tag {
background: #0f172a;
border-color: rgba(255, 255, 255, 0.05);
color: #94a3b8;
}
body.dark-mode .mobile-card-footer {
border-top-color: rgba(255, 255, 255, 0.05);
}
body.dark-mode .mobile-pill.pill-distance {
background: rgba(129, 140, 248, 0.12);
color: #818cf8;
}
body.dark-mode .mobile-pill.pill-time {
background: rgba(52, 211, 153, 0.12);
color: #34d399;
}
body.dark-mode .mobile-pill.pill-dir {
background: rgba(148, 163, 184, 0.12);
color: #94a3b8;
}
body.dark-mode .mobile-deal-btn {
background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
}
/* Mobile board density (2026-09-01): tighter cells, unwrapped times, and a
hidden date half (.dt-date β the boards' scheduled renderer wraps it) so
three columns (City Β· Scheduled Β· Status) fit on a phone. The old collapse
left only the airline column visible, which showed nothing a flights board
is for. Applies to every DataTables board (flights, cargo, historical). */
@media (max-width: 576px) {
table.dataTable td,
table.dataTable th {
padding-left: .45rem;
padding-right: .45rem;
font-size: .85rem;
}
/* Date + time stay together on one line ("Sep 01, 22:50") β owner wants
the full timestamp visible; the .dt-date span the renderers emit is
NOT hidden (it once was, to squeeze in a third column β reverted). */
table.dataTable td time { white-space: nowrap; }
/* The three pinned columns must genuinely fit 320β390px wrappers:
slim the expand-control column, the header labels and the status
badges β otherwise the table overflows its card and Status clips. */
table.dataTable thead th { font-size: .72rem; }
table.dataTable td.dtr-control,
table.dataTable th.dtr-control {
width: 26px;
min-width: 26px;
padding-left: .3rem;
padding-right: .3rem;
}
table.dataTable .flight-status-badge {
font-size: .68rem;
padding: .28rem .5rem;
white-space: nowrap;
}
/* Owner call (2026-09-01): the "Last update" chip is noise on phones β
hidden site-wide (all heroes carry the same class). */
.last-update-badge { display: none !important; }
}
/* flytlv.app brand credit (partials/flytlv_powered.html) β on every deals
surface. Small, quiet, always logo + link. */
.flytlv-powered {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.75rem;
font-weight: 500;
}
.flytlv-powered img {
width: 14px;
height: 14px;
border-radius: 3px;
}
.mobile-pill.pill-dir {
background: rgba(71, 85, 105, 0.08);
color: #475569;
}
/* ===== Mobile Filter Units (desktop-style cards) ===== */
.mobile-dropdown-filters {
display: flex;
gap: 10px;
margin-bottom: 0.75rem;
}
.mobile-filter-unit {
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.88);
border: 1px solid rgba(0, 0, 0, 0.07);
border-radius: 14px;
padding: 9px 14px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
min-width: 0;
cursor: pointer;
transition: border-color 0.15s;
}
.mobile-filter-unit:focus-within {
border-color: #0ea5e9;
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.mobile-unit-label {
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--t-ink2);
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 3px;
white-space: nowrap;
}
.mobile-unit-select {
border: none;
background: transparent;
font-size: 0.85rem;
font-weight: 600;
color: #1e293b;
padding: 0;
outline: none;
width: 100%;
cursor: pointer;
appearance: auto;
}
body.dark-mode .mobile-filter-unit {
background: rgba(15, 23, 42, 0.75);
border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .mobile-filter-unit:focus-within {
border-color: #38bdf8;
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}
body.dark-mode .mobile-unit-label {
color: #94a3b8;
}
body.dark-mode .mobile-unit-select {
color: #f1f5f9;
}
/* Mobile portal Select2 β borderless inside the card */
.mobile-unit-s2.select2-container--default .select2-selection--single {
height: auto !important;
min-height: 26px !important;
border: none !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
.mobile-unit-s2.select2-container--default .select2-selection--single .select2-selection__rendered {
font-size: 0.85rem !important;
font-weight: 600 !important;
color: #1e293b !important;
padding: 0 22px 0 0 !important;
line-height: 1.5 !important;
}
.mobile-unit-s2.select2-container--default .select2-selection--single .select2-selection__arrow {
top: 50% !important;
transform: translateY(-50%) !important;
right: 0 !important;
height: 20px !important;
width: 18px !important;
}
.mobile-unit-s2-drop.select2-dropdown {
border-radius: 14px !important;
overflow: hidden !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.13) !important;
border: 1px solid rgba(0, 0, 0, 0.07) !important;
margin-top: 6px !important;
}
body.dark-mode .mobile-unit-s2.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #f1f5f9 !important;
}
body.dark-mode .mobile-unit-s2-drop.select2-dropdown {
border-color: rgba(255, 255, 255, 0.08) !important;
}
.mobile-select {
border-radius: 20px !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
padding: 0.4rem 2rem 0.4rem 0.75rem !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
background-color: rgba(255, 255, 255, 0.8) !important;
color: #4b5563 !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
transition: all 0.2s ease !important;
outline: none !important;
}
body.dark-mode .mobile-select {
background-color: rgba(30, 41, 59, 0.7) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
color: #e2e8f0 !important;
}
.mobile-select:focus {
border-color: var(--accent, #6366f1) !important;
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15) !important;
}
/* ===== Direction Toggle Pill ===== */
.dir-toggle-wrap {
flex: 0 0 auto;
}
.dir-toggle {
display: inline-flex;
align-items: center;
background: #f1f5f9;
border-radius: 24px;
padding: 3px;
gap: 0;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}
.dir-toggle-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 13px;
font-size: 0.77rem;
font-weight: 700;
line-height: 1;
border: none;
border-radius: 20px;
background: transparent;
color: var(--t-ink2);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.dir-toggle-btn i {
font-size: 0.8rem;
}
.dir-toggle-btn:hover:not(.active) {
color: #334155;
background: rgba(0, 0, 0, 0.04);
}
.dir-toggle-btn.active {
background: #0ea5e9;
color: #323232;
box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35);
}
.dir-toggle-btn.active[data-dir="arrival"] {
background: #8b5cf6;
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
}
/* Dark mode */
body.dark-mode .dir-toggle {
background: #1e293b;
border-color: rgba(255, 255, 255, 0.06);
}
body.dark-mode .dir-toggle-btn {
color: #94a3b8;
}
body.dark-mode .dir-toggle-btn:hover:not(.active) {
color: #e2e8f0;
background: rgba(255, 255, 255, 0.05);
}
body.dark-mode .dir-toggle-btn.active {
background: #38bdf8;
color: #0f172a;
box-shadow: 0 2px 8px rgba(56, 189, 248, 0.3);
}
body.dark-mode .dir-toggle-btn.active[data-dir="arrival"] {
background: #a78bfa;
color: #0f172a;
box-shadow: 0 2px 8px rgba(167, 139, 250, 0.3);
}
/* ============================================================
βοΈ PREMIUM MOBILE NAV β Hamburger + Offcanvas Drawer
============================================================ */
/* --- Animated Hamburger Button --- */
.premium-hamburger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 36px;
height: 36px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
border-radius: 8px;
transition: background 0.2s ease;
}
.premium-hamburger:hover {
background: rgba(99, 102, 241, 0.1);
}
.ham-bar {
display: block;
width: 22px;
height: 2px;
background: #4f46e5;
border-radius: 2px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
body.dark-mode .ham-bar {
background: #818cf8;
}
/* --- Premium Offcanvas Drawer --- */
.premium-mobile-nav {
width: min(88vw, 360px) !important;
background: rgba(255, 255, 255, 0.96) !important;
backdrop-filter: blur(24px) !important;
-webkit-backdrop-filter: blur(24px) !important;
border-left: 1px solid rgba(99, 102, 241, 0.15) !important;
box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12) !important;
}
body.dark-mode .premium-mobile-nav {
background: rgba(10, 11, 15, 0.97) !important;
border-left: 1px solid rgba(99, 102, 241, 0.2) !important;
box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5) !important;
}
/* RTL: drawer slides from left */
[dir="rtl"] .premium-mobile-nav {
border-left: none !important;
border-right: 1px solid rgba(99, 102, 241, 0.15) !important;
}
/* --- Offcanvas Header --- */
.premium-nav-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid rgba(99, 102, 241, 0.12);
background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(6, 182, 212, 0.04) 100%);
flex-shrink: 0;
}
body.dark-mode .premium-nav-header {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(56, 189, 248, 0.06) 100%);
border-bottom-color: rgba(99, 102, 241, 0.2);
}
.premium-nav-brand {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: clamp(0.72rem, 2.5vw, 1rem) !important;
background: linear-gradient(135deg, #6366f1, #06b6d4);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
white-space: nowrap !important;
display: inline-flex !important;
align-items: center;
}
.premium-nav-close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: rgba(99, 102, 241, 0.1);
color: #5B5DDD;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s ease;
}
.premium-nav-close:hover {
background: rgba(99, 102, 241, 0.2);
transform: rotate(90deg);
}
body.dark-mode .premium-nav-close {
background: rgba(99, 102, 241, 0.2);
color: #818cf8;
}
/* --- Offcanvas Body --- */
.premium-nav-body {
padding: 12px 12px 24px !important;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(99, 102, 241, 0.2) transparent;
}
.premium-nav-body::-webkit-scrollbar {
width: 4px;
}
.premium-nav-body::-webkit-scrollbar-thumb {
background: rgba(99, 102, 241, 0.2);
border-radius: 4px;
}
/* --- Home Quick Link --- */
.pm-nav-home {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
margin-bottom: 8px;
border-radius: 12px;
font-weight: 600;
font-size: 0.9rem;
color: #4f46e5;
background: rgba(99, 102, 241, 0.08);
border: 1px solid rgba(99, 102, 241, 0.12);
text-decoration: none;
transition: all 0.2s ease;
}
.pm-nav-home:hover {
background: rgba(99, 102, 241, 0.15);
color: #4338ca;
transform: translateX(3px);
}
body.dark-mode .pm-nav-home {
color: #818cf8;
background: rgba(99, 102, 241, 0.15);
border-color: rgba(99, 102, 241, 0.25);
}
[dir="rtl"] .pm-nav-home:hover {
transform: translateX(-3px);
}
/* --- Accordion Wrapper --- */
.pm-accordion {
display: flex;
flex-direction: column;
gap: 4px;
}
/* --- Section Toggle Button --- */
.pm-section {
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.05);
}
body.dark-mode .pm-section {
border-color: rgba(255, 255, 255, 0.06);
}
.pm-section-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 11px 14px;
background: rgba(248, 250, 252, 0.8);
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 0.88rem;
color: #374151;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
}
.pm-section-toggle:hover {
background: rgba(99, 102, 241, 0.07);
color: #4f46e5;
}
body.dark-mode .pm-section-toggle {
background: rgba(255, 255, 255, 0.04);
color: #cbd5e1;
}
body.dark-mode .pm-section-toggle:hover {
background: rgba(99, 102, 241, 0.15);
color: #818cf8;
}
/* Expanded state */
.pm-section-toggle[aria-expanded="true"] {
background: rgba(99, 102, 241, 0.1);
color: #4f46e5;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
body.dark-mode .pm-section-toggle[aria-expanded="true"] {
background: rgba(99, 102, 241, 0.2);
color: #818cf8;
}
/* Chevron rotation animation */
.pm-chevron {
font-size: 0.75rem;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: #9ca3af;
}
.pm-section-toggle[aria-expanded="true"] .pm-chevron {
transform: rotate(180deg);
color: #6366f1;
}
body.dark-mode .pm-section-toggle[aria-expanded="true"] .pm-chevron {
color: #818cf8;
}
/* --- 2-Column Grid of Links --- */
.pm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
padding: 8px;
background: rgba(248, 250, 252, 0.5);
border-radius: 0 0 12px 12px;
}
body.dark-mode .pm-grid {
background: rgba(255, 255, 255, 0.02);
}
/* --- Individual Nav Item --- */
.pm-item {
display: flex;
align-items: center;
gap: 7px;
padding: 8px 10px;
border-radius: 9px;
font-size: 0.78rem;
font-weight: 500;
color: #374151;
text-decoration: none;
background: transparent;
transition: all 0.18s ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pm-item i {
font-size: 0.95rem;
flex-shrink: 0;
}
.pm-item span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pm-item:hover {
background: rgba(99, 102, 241, 0.1);
color: #4f46e5;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12);
}
body.dark-mode .pm-item {
color: #cbd5e1;
}
body.dark-mode .pm-item:hover {
background: rgba(99, 102, 241, 0.18);
color: #818cf8;
}
/* RTL alignment for section header */
[dir="rtl"] .pm-section-toggle {
text-align: right;
}
/* Global Codeshare Item Pill styling */
.codeshare-item-pill {
display: inline-flex;
align-items: center;
gap: 4px;
background: #f1f5f9;
border: 1px solid #cbd5e1;
border-radius: 4px;
padding: 2px 6px;
font-size: 11px;
font-weight: 500;
}
body.dark-mode .codeshare-item-pill {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
}
/* --- Expandable Airline Stats Widget Styling --- */
.airline-stats-item {
cursor: pointer;
}
.airline-stats-item[aria-expanded="true"] {
background: rgba(var(--bs-primary-rgb), 0.04);
}
body.dark-mode .airline-stats-item[aria-expanded="true"] {
background: rgba(255, 255, 255, 0.03);
}
.airline-stats-item .collapse-chevron {
transition: transform 0.2s ease;
}
.airline-stats-item:not(.collapsed) .collapse-chevron {
transform: rotate(180deg);
}
.airline-destinations-collapse {
background: #f8fafc;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
body.dark-mode .airline-destinations-collapse {
background: #0f172a;
border-color: rgba(255, 255, 255, 0.06);
}
.airline-dest-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.72rem;
font-weight: 500;
padding: 0.35rem 0.65rem;
border-radius: 50px;
transition: all 0.2s ease;
text-decoration: none !important;
}
.airline-dest-badge-link {
background-color: rgba(99, 102, 241, 0.1);
color: #4f46e5;
border: 1px solid rgba(99, 102, 241, 0.2);
}
.airline-dest-badge-link:hover {
background-color: #4f46e5;
color: #ffffff;
transform: translateY(-1px);
}
.airline-dest-badge-static {
background-color: #f1f5f9;
color: #475569;
border: 1px solid #e2e8f0;
}
body.dark-mode .airline-dest-badge-link {
background-color: rgba(129, 140, 248, 0.15);
color: #818cf8;
border-color: rgba(129, 140, 248, 0.3);
}
body.dark-mode .airline-dest-badge-link:hover {
background-color: #818cf8;
color: #0f172a;
}
body.dark-mode .airline-dest-badge-static {
background-color: #1e293b;
color: #cbd5e1;
border-color: #334155;
}
/* ===== Airline Reliability & On-Time Performance Index Styling ===== */
.reliability-card {
border-radius: 1.25rem;
overflow: hidden;
transition: all 0.3s ease;
}
.reliability-stars {
color: #fbbf24;
font-size: 0.95rem;
}
.reliability-otp-badge {
font-size: 0.82rem;
font-weight: 700;
padding: 0.4rem 0.8rem;
border-radius: 50px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.otp-excellent {
background-color: rgba(34, 197, 94, 0.1);
color: #0F7634;
border: 1px solid rgba(34, 197, 94, 0.2);
}
.otp-good {
background-color: rgba(245, 158, 11, 0.1);
color: #A95C04;
border: 1px solid rgba(245, 158, 11, 0.2);
}
.otp-poor {
background-color: rgba(239, 68, 68, 0.1);
color: #D32424;
border: 1px solid rgba(239, 68, 68, 0.2);
}
/* Dark Mode support for Reliability Index */
body.dark-mode .otp-excellent {
background-color: rgba(74, 222, 128, 0.15);
color: #4ade80;
border-color: rgba(74, 222, 128, 0.25);
}
body.dark-mode .otp-good {
background-color: rgba(251, 191, 36, 0.15);
color: #fbbf24;
border-color: rgba(251, 191, 36, 0.25);
}
body.dark-mode .otp-poor {
background-color: rgba(248, 113, 113, 0.15);
color: #f87171;
border-color: rgba(248, 113, 113, 0.25);
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
PREMIUM NAVBAR 2026 β .ftlv-nav
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* βββ NAV SHELL βββββββββββββββββββββββββββββββββββββββ */
.ftlv-nav {
position: sticky; top: 0; z-index: 1030;
overflow: visible;
height: 74px;
background: rgba(255,255,255,0.84);
backdrop-filter: blur(22px) saturate(1.7);
-webkit-backdrop-filter: blur(22px) saturate(1.7);
border-bottom: 1px solid rgba(99,102,241,0.16);
box-shadow: 0 2px 14px rgba(99,102,241,0.09);
transition: background .3s, border-color .3s, box-shadow .3s;
}
body.dark-mode .ftlv-nav {
background: rgba(9,9,17,0.90);
border-bottom-color: rgba(99,102,241,0.22);
}
.ftlv-nav::after {
content: "";
position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(99,102,241,.5) 30%, rgba(6,182,212,.5) 70%, transparent);
opacity: 0; transition: opacity .3s;
}
.ftlv-nav.scrolled::after { opacity: 1; }
/* βββ CONDENSED HEADER βββββββββββββββββββββββββββββββ
Past the fold the tagline has done its job, so the bar tightens to give the
content more room. Rides the .scrolled class the navbar script already sets.
Heights are transitioned, not swapped, so the sticky bar never jumps. */
.ftlv-nav.scrolled {
height: 58px;
background: rgba(255,255,255,0.92);
box-shadow: 0 4px 20px rgba(99,102,241,0.13);
}
body.dark-mode .ftlv-nav.scrolled { background: rgba(9,9,17,0.95); }
.ftlv-nav,
.ftlv-nav .nav-brand img,
.ftlv-nav .nav-brand-sub {
transition: height .28s cubic-bezier(.4,0,.2,1),
background .3s, border-color .3s, box-shadow .3s,
opacity .2s ease, max-height .28s cubic-bezier(.4,0,.2,1),
transform .25s;
}
.ftlv-nav.scrolled .nav-brand img { height: 38px; }
/* Collapse rather than display:none β the height has to animate, and a hard
toggle would snap the brand block and reflow the whole bar. */
.nav-brand-sub { max-height: 2rem; opacity: 1; }
.ftlv-nav.scrolled .nav-brand-sub { max-height: 0; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.ftlv-nav, .ftlv-nav .nav-brand img, .ftlv-nav .nav-brand-sub { transition: none; }
}
/* βββ HEADER: ONE ACCENT, TWO THEMES ββββββββββββββββββββββββββββββββββ
The bar used to carry three accents at once β indigo #6366f1 in the border
and shadow, blue #1F6FEB in the buttons, and an indigo-to-cyan gradient on
the active underline β all left over from an older palette. It also painted
the dark header *darker* than the page behind it, which reads as a mistake
rather than elevation, and the active item announced itself three ways at
once (pill background, gradient underline, colour change).
These tokens give the header a single accent and a raised surface in both
themes, so light and dark are the same design in two palettes. */
.ftlv-nav {
--h-accent: #1F6FEB;
--h-ink: #1E293B;
--h-ink-2: #64748B;
--h-surface: rgba(255,255,255,.92);
--h-line: rgba(15,23,42,.09);
--h-hover: rgba(31,111,235,.07);
}
body.dark-mode .ftlv-nav {
--h-accent: #6BA6FF;
--h-ink: #E6EDF7;
--h-ink-2: #94A3B8;
/* lighter than the page, not darker β that is how elevation reads in dark UI */
--h-surface: rgba(22,28,41,.94);
--h-line: rgba(255,255,255,.09);
--h-hover: rgba(107,166,255,.13);
}
/* Floating card, not a full-bleed bar: inset from the edges and rounded to
match the site's cards, so the header belongs to the same family as the
content beneath it. Shorter too β 64px instead of 74 β which hands ten
pixels back to the page on every screen. */
.ftlv-nav, body.dark-mode .ftlv-nav {
height: 64px;
top: 10px;
width: calc(100% - 24px);
margin: 10px auto 0;
border-radius: 1rem;
background: var(--h-surface);
backdrop-filter: blur(16px) saturate(1.3);
-webkit-backdrop-filter: blur(16px) saturate(1.3);
border: 1px solid var(--h-line);
box-shadow: 0 4px 16px rgba(15,23,42,.07);
}
body.dark-mode .ftlv-nav { box-shadow: 0 4px 16px rgba(0,0,0,.45); }
.ftlv-nav.scrolled, body.dark-mode .ftlv-nav.scrolled { height: 52px; }
.ftlv-nav.scrolled { box-shadow: 0 8px 26px rgba(15,23,42,.12); }
body.dark-mode .ftlv-nav.scrolled { box-shadow: 0 8px 26px rgba(0,0,0,.6); }
.ftlv-nav .nav-brand img { height: 38px; }
.ftlv-nav.scrolled .nav-brand img { height: 30px; }
/* Phones gave the mark 38px inside a 64px bar, which left it looking incidental
next to the controls. The bar grows with the logo so the optical padding above
and below stays even, and the wordmark moves up with it. The scrolled state
keeps the same ratio so the shrink still reads as one motion. */
@media (max-width: 575.98px) {
.ftlv-nav, body.dark-mode .ftlv-nav { height: 74px; }
.ftlv-nav.scrolled, body.dark-mode .ftlv-nav.scrolled { height: 60px; }
.ftlv-nav .nav-brand img { height: 50px; }
.ftlv-nav.scrolled .nav-brand img { height: 40px; }
.ftlv-nav .nav-brand { gap: 10px; }
.ftlv-nav .nav-brand-main { font-size: 1.4rem; }
}
@media (max-width: 991px) {
.ftlv-nav, body.dark-mode .ftlv-nav {
width: calc(100% - 16px);
margin-top: 8px;
top: 8px;
border-radius: .85rem;
}
}
/* the indigo shimmer was the third accent; the border already does this job */
.ftlv-nav::after { display: none; }
.ftlv-nav .nav-brand-sub, body.dark-mode .ftlv-nav .nav-brand-sub {
color: var(--h-ink-2); font-weight: 400;
}
/* Links: one weight, one colour. The child selectors are deliberate β they
outrank theme.css's global anchor rule so Home matches its siblings. */
.ftlv-nav .nav-links > li > .nlk,
.ftlv-nav .nav-links > li > .nlk span,
.ftlv-nav .nav-links > li > .nlk i {
color: var(--h-ink);
-webkit-text-fill-color: var(--h-ink);
}
.ftlv-nav .nav-links > li > .nlk { font-size: .94rem; font-weight: 500; border-radius: 8px; }
.ftlv-nav .nav-links > li > .nlk i:not(.dd-caret) { opacity: .5; font-size: .95rem; }
.ftlv-nav .nav-links > li > .nlk:hover { background: var(--h-hover); }
.ftlv-nav .nav-links > li > .nlk:hover,
.ftlv-nav .nav-links > li > .nlk:hover span,
.ftlv-nav .nav-links > li > .nlk:hover i {
color: var(--h-accent);
-webkit-text-fill-color: var(--h-accent);
}
/* active = accent + underline, and nothing else */
.ftlv-nav .nav-links > li > .nlk.active,
.ftlv-nav .nav-links > li > .nlk.active span,
.ftlv-nav .nav-links > li > .nlk.active i {
color: var(--h-accent);
-webkit-text-fill-color: var(--h-accent);
}
.ftlv-nav .nav-links > li > .nlk.active { background: transparent; font-weight: 600; }
.ftlv-nav .nav-links > li > .nlk.active i:not(.dd-caret) { opacity: 1; }
.ftlv-nav .nlk::after {
background: var(--h-accent);
height: 2px; bottom: -2px; border-radius: 2px;
inset-inline-start: 14px; inset-inline-end: 14px;
}
.ftlv-nav .dd-caret { opacity: .4; font-size: .64rem; }
.ftlv-nav .nav-dd, body.dark-mode .ftlv-nav .nav-dd {
background: var(--h-surface);
border: 1px solid var(--h-line);
border-radius: 12px;
box-shadow: 0 18px 50px rgba(15,23,42,.14);
}
body.dark-mode .ftlv-nav .nav-dd { box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.ftlv-nav .dd-head, body.dark-mode .ftlv-nav .dd-head {
background: transparent; border-bottom: 1px solid var(--h-line);
}
.ftlv-nav .dd-head a { color: var(--h-accent); -webkit-text-fill-color: var(--h-accent); }
.ftlv-nav .dd-item, body.dark-mode .ftlv-nav .dd-item,
.ftlv-nav .dd-item span {
color: var(--h-ink); -webkit-text-fill-color: var(--h-ink); border-radius: 8px;
}
.ftlv-nav .dd-item:hover, body.dark-mode .ftlv-nav .dd-item:hover { background: var(--h-hover); }
.ftlv-nav .mob-hamburger, body.dark-mode .ftlv-nav .mob-hamburger {
background: transparent;
color: var(--h-ink); -webkit-text-fill-color: var(--h-ink);
border: 1px solid var(--h-line); box-shadow: none;
}
.nav-inner {
display: flex; align-items: center; height: 100%;
padding: 0 clamp(.75rem, 3vw, 1.5rem);
max-width: 1440px; margin: 0 auto; gap: .25rem;
overflow: visible;
}
/* βββ BRAND βββββββββββββββββββββββββββββββββββββββββββ */
.nav-brand {
display: flex; align-items: center; gap: 12px;
text-decoration: none; flex: 0 0 auto; min-width: 0;
margin-inline-end: auto;
}
.nav-brand img {
height: 50px; width: auto; flex-shrink: 0;
filter: drop-shadow(0 2px 5px rgba(83,82,228,.22));
transition: transform .25s;
}
.nav-brand:hover img { transform: scale(1.07) rotate(-2deg); }
.nav-brand-text { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; min-width: 0; }
.nav-brand-main {
/* Deliberately NOT Space Grotesk. That webfont has no 800 face and loads under
display=optional, so a cold cache rendered the fallback and a warm cache
rendered Space Grotesk 700 β two different brands depending on the cache.
system-ui has a real 800, is already resident, and never flickers. */
font-family: system-ui, sans-serif;
font-weight: 800; font-size: clamp(1.25rem, 2.5vw, 1.5rem);
background: linear-gradient(120deg,#4338ca 0%,#6366f1 52%,#0891b2 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
letter-spacing: -.02em; white-space: nowrap;
}
body.dark-mode .nav-brand-main {
background: linear-gradient(120deg,#c7d2fe 0%,#a5b4fc 52%,#67e8f9 100%);
-webkit-background-clip: text; background-clip: text;
}
.nav-brand-sub {
font-size: .82rem; font-weight: 500; color: var(--t-ink2);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: none;
}
body.dark-mode .nav-brand-sub { color: #94a3b8; }
@media (min-width: 480px) { .nav-brand-sub { display: block; } }
/* βββ DESKTOP LINKS βββββββββββββββββββββββββββββββββββ */
.nav-links {
display: none; align-items: center; list-style: none;
gap: 4px; flex-shrink: 0; margin: 0; padding: 0; height: 100%;
}
@media (min-width: 992px) { .nav-links { display: flex; } }
.nav-links > li { position: relative; display: flex; align-items: center; height: 100%; }
.nlk {
display: flex; align-items: center; gap: 6px;
padding: 8px 16px; border-radius: 8px;
font-size: 1rem; font-weight: 500; color: #374151;
background: none; border: none; cursor: pointer;
text-decoration: none; white-space: nowrap;
position: relative; transition: background .17s, color .17s;
font-family: inherit;
}
body.dark-mode .nlk { color: #c8d3e8; }
.nlk::after {
content: ""; position: absolute; bottom: 2px;
inset-inline-start: 11px; inset-inline-end: 11px;
height: 2px; border-radius: 2px;
background: linear-gradient(120deg,#4338ca,#6366f1 52%,#0891b2);
transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
[dir="rtl"] .nlk::after { transform-origin: right; }
.nlk:hover, .nlk.active { color: #4338ca; background: rgba(99,102,241,0.07); }
body.dark-mode .nlk:hover, body.dark-mode .nlk.active { color: #a5b4fc; background: rgba(99,102,241,0.12); }
.nlk:hover::after, .nlk.active::after { transform: scaleX(1); }
.dd-caret { font-size: .68rem; opacity: .6; transition: transform .22s; }
.nav-links > li.open .dd-caret { transform: rotate(180deg); }
/* βββ DROPDOWN MENUS βββββββββββββββββββββββββββββββββββ */
.nav-dd {
position: absolute; top: calc(100% + 10px);
left: 50%; transform: translateX(-50%) translateY(-6px);
min-width: 560px;
background: rgba(255,255,255,0.97);
backdrop-filter: blur(24px) saturate(1.7);
-webkit-backdrop-filter: blur(24px) saturate(1.7);
border: 1px solid rgba(99,102,241,0.13); border-radius: 16px;
box-shadow: 0 18px 52px rgba(30,27,75,0.13), 0 2px 8px rgba(0,0,0,0.05);
padding: 14px; opacity: 0; pointer-events: none;
transition: opacity .18s, transform .18s; z-index: 9999;
}
body.dark-mode .nav-dd {
background: rgba(14,14,26,0.98); border-color: rgba(99,102,241,0.20);
box-shadow: 0 18px 52px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3);
}
[dir="rtl"] .nav-dd { left: auto; right: 50%; transform: translateX(50%) translateY(-6px); }
.nav-links > li:nth-last-child(-n+2) .nav-dd {
left: auto; right: 0; transform: translateY(-6px); min-width: 220px;
}
[dir="rtl"] .nav-links > li:nth-last-child(-n+2) .nav-dd { right: auto; left: 0; }
.nav-links > li.open .nav-dd { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); }
[dir="rtl"] .nav-links > li.open .nav-dd { transform: translateX(50%) translateY(0); }
.nav-links > li:nth-last-child(-n+2).open .nav-dd { transform: translateY(0); }
.dd-head {
display: flex; align-items: center; gap: 8px;
padding-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px solid rgba(99,102,241,0.13);
}
body.dark-mode .dd-head { border-bottom-color: rgba(99,102,241,0.20); }
.dd-head a {
font-weight: 700; font-size: .9rem; color: #5558e3;
text-decoration: none; display: flex; align-items: center; gap: 6px;
}
body.dark-mode .dd-head a { color: #a5b4fc; }
.dd-head a:hover { text-decoration: underline; }
.dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.nav-dd.sm .dd-grid { grid-template-columns: 1fr; }
.nav-dd.wide { min-width: 720px; }
.nav-dd.wide .dd-grid { grid-template-columns: repeat(4, 1fr); }
.dd-item {
display: flex; align-items: center; gap: 9px;
padding: 8px 12px; border-radius: 9px;
text-decoration: none; font-size: .9rem; font-weight: 500; color: #374151;
transition: background .15s, color .15s;
}
body.dark-mode .dd-item { color: #c8d3e8; }
.dd-item:hover { background: rgba(99,102,241,0.07); color: #4338ca; }
body.dark-mode .dd-item:hover { background: rgba(99,102,241,0.12); color: #a5b4fc; }
.dd-item i { font-size: .88rem; flex-shrink: 0; width: 18px; text-align: center; }
/* βββ DESKTOP ACTIONS ββββββββββββββββββββββββββββββββββ */
.nav-actions {
display: none; align-items: center; gap: 8px;
flex-shrink: 0; margin-inline-start: 8px;
}
@media (min-width: 992px) { .nav-actions { display: flex; } }
.theme-pill {
width: 44px; height: 24px; border-radius: 50px;
background: #dde2f0; border: none; cursor: pointer;
position: relative; flex-shrink: 0; transition: background .25s;
}
body.dark-mode .theme-pill { background: #2d3a52; }
.theme-pill .tp-thumb {
position: absolute; top: 3px; left: 3px;
width: 18px; height: 18px; border-radius: 50%;
background: #fff; display: flex; align-items: center; justify-content: center;
font-size: .65rem; box-shadow: 0 1px 4px rgba(0,0,0,.18); transition: left .25s;
}
body.dark-mode .theme-pill .tp-thumb { left: 23px; background: #1e293b; color: #cbd5e1; }
.lang-btn {
display: flex; align-items: center; gap: 5px;
padding: 5px 13px; border-radius: 50px;
background: linear-gradient(135deg,#4338ca,#6366f1);
color: #fff; font-size: .78rem; font-weight: 700;
border: none; cursor: pointer; white-space: nowrap;
box-shadow: 0 2px 8px rgba(99,102,241,.35);
transition: box-shadow .18s, transform .18s;
}
.lang-btn:hover { box-shadow: 0 4px 16px rgba(99,102,241,.5); transform: translateY(-1px); }
/* βββ MOBILE CONTROLS ββββββββββββββββββββββββββββββββββ */
.mob-controls {
display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}
@media (min-width: 992px) { .mob-controls { display: none; } }
.mob-lang {
padding: 4px 9px; border-radius: 50px;
background: linear-gradient(135deg,#4338ca,#6366f1);
color: #fff; font-size: .72rem; font-weight: 700;
border: none; cursor: pointer; white-space: nowrap;
display: flex; align-items: center; gap: 4px;
}
.mob-lang .mob-lang-label { display: none; }
@media (min-width: 380px) { .mob-lang .mob-lang-label { display: inline; } }
/* .mob-theme class β fallback only */
.mob-theme { flex-shrink: 0; cursor: pointer; touch-action: manipulation; }
/* ID-scoped: immune to class stripping by accessibility widgets */
#theme-toggle {
width: 44px; height: 24px; border-radius: 50px;
background: #dde2f0; border: none; cursor: pointer;
position: relative; flex-shrink: 0;
transition: background .25s;
box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
display: inline-block;
padding: 0; outline: none; vertical-align: middle;
forced-color-adjust: none;
}
body.dark-mode #theme-toggle { background: #2d3a52; }
#theme-toggle .tp-thumb {
position: absolute; top: 3px; left: 3px;
width: 18px; height: 18px; border-radius: 50%;
background: #fff; color: var(--t-ink2);
display: flex; align-items: center; justify-content: center;
font-size: .65rem; box-shadow: 0 1px 4px rgba(0,0,0,.18);
transition: left .25s, background .25s, color .25s;
pointer-events: none;
}
body.dark-mode #theme-toggle .tp-thumb { left: 23px; background: #1e293b; color: #cbd5e1; }
#theme-toggle-mobile {
width: 40px; height: 22px; border-radius: 50px;
background: #dde2f0; border: none; cursor: pointer;
position: relative; flex-shrink: 0;
transition: background .25s;
box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
display: inline-block;
touch-action: manipulation;
padding: 0; outline: none; vertical-align: middle;
forced-color-adjust: none;
}
body.dark-mode #theme-toggle-mobile { background: #4f46e5; }
#theme-toggle-mobile .tp-thumb {
position: absolute; top: 3px; left: 3px;
width: 16px; height: 16px; border-radius: 50%;
background: #fff; color: var(--t-ink2);
display: flex; align-items: center; justify-content: center;
font-size: .6rem; box-shadow: 0 1px 4px rgba(0,0,0,.22);
transition: left .25s, background .25s, color .25s;
pointer-events: none;
}
/* matches #theme-toggle above β this used to be an amber thumb, so the same
switch looked like two different controls on desktop and mobile */
body.dark-mode #theme-toggle-mobile .tp-thumb { left: 21px; background: #1e293b; color: #cbd5e1; }
.mob-hamburger {
display: flex; align-items: center; gap: 4px;
padding: 5px 9px; border-radius: 8px;
background: rgba(99,102,241,0.07); border: 1px solid rgba(99,102,241,0.16);
color: #5558e3; font-size: .75rem; font-weight: 600;
cursor: pointer; transition: background .15s; white-space: nowrap; font-family: inherit;
}
body.dark-mode .mob-hamburger { background: rgba(99,102,241,0.12); color: #a5b4fc; }
.mob-hamburger:hover { background: rgba(99,102,241,0.12); }
.mob-hamburger i { font-size: .95rem; }
.mob-hamburger .ham-label { display: none; }
@media (min-width: 380px) { .mob-hamburger .ham-label { display: inline; } }
/* βββ DRAWER BACKDROP ββββββββββββββββββββββββββββββββββ */
.drawer-backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,.38); backdrop-filter: blur(2px);
z-index: 1998; opacity: 0; pointer-events: none; transition: opacity .28s;
}
.drawer-backdrop.open { opacity: 1; pointer-events: all; }
/* βββ MOBILE DRAWER ββββββββββββββββββββββββββββββββββββ */
.mob-drawer {
position: fixed; top: 0; inset-inline-end: 0;
width: min(320px, 90vw); height: 100dvh;
background: rgba(255,255,255,0.97);
backdrop-filter: blur(28px) saturate(1.8);
-webkit-backdrop-filter: blur(28px) saturate(1.8);
border-inline-start: 1px solid rgba(99,102,241,0.13);
z-index: 1999; display: flex; flex-direction: column;
transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
overflow: hidden;
}
body.dark-mode .mob-drawer {
background: rgba(14,14,26,0.98);
border-inline-start-color: rgba(99,102,241,0.20);
}
[dir="rtl"] .mob-drawer {
inset-inline-end: 0; inset-inline-start: auto;
border-inline-end: none;
border-inline-start: 1px solid rgba(99,102,241,0.13);
transform: translateX(-100%);
}
.mob-drawer.open { transform: translateX(0); }
.drawer-hd {
display: flex; align-items: center; justify-content: space-between;
padding: 16px; border-bottom: 1px solid rgba(99,102,241,0.13);
background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(6,182,212,.04));
flex-shrink: 0;
}
body.dark-mode .drawer-hd { border-bottom-color: rgba(99,102,241,0.20); }
.drawer-brand { display: flex; align-items: center; gap: 10px; }
.drawer-brand img { height: 30px; }
.drawer-brand-name {
font-family: "Space Grotesk", sans-serif; font-weight: 800; font-size: 1.05rem;
background: linear-gradient(120deg,#4338ca 0%,#6366f1 52%,#0891b2 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
body.dark-mode .drawer-brand-name {
background: linear-gradient(120deg,#c7d2fe 0%,#a5b4fc 52%,#67e8f9 100%);
-webkit-background-clip: text; background-clip: text;
}
.drawer-close {
width: 36px; height: 36px; border-radius: 10px;
border: 1px solid rgba(99,102,241,0.13); background: transparent; color: var(--t-ink2);
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 1rem; transition: background .15s, color .15s;
}
.drawer-close:hover { background: rgba(239,68,68,.1); color: #C63838; }
body.dark-mode .drawer-close { border-color: rgba(99,102,241,0.20); color: #94a3b8; }
.drawer-bd {
flex: 1; overflow-y: auto; overflow-x: hidden;
padding: 14px; -webkit-overflow-scrolling: touch;
}
/* Top-level rows are the whole menu when everything is collapsed, so they
must carry the panel: generous type + tap targets, and a tinted icon chip
per section (2026-09-01 redesign β the old .83rem rows floated in a big
empty white sheet). */
.drawer-home {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px; border-radius: 14px; text-decoration: none;
font-weight: 700; font-size: 1.02rem; color: #4338ca;
background: rgba(99,102,241,0.08); margin-bottom: 10px; transition: background .15s;
}
body.dark-mode .drawer-home { color: #a5b4fc; background: rgba(99,102,241,0.12); }
.drawer-home:hover { background: rgba(99,102,241,0.14); }
.drawer-home i {
width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 1.15rem; color: #fff;
background: linear-gradient(135deg, #6366f1, #4338ca);
}
.dsec { margin-bottom: 8px; }
.dsec-toggle {
width: 100%; display: flex; align-items: center; gap: 12px;
padding: 11px 14px; border-radius: 14px;
background: rgba(100,116,139,0.05); border: 1px solid rgba(99,102,241,0.08);
color: #1f2937; font-weight: 700; font-size: 1.02rem; cursor: pointer;
transition: background .15s, color .15s; text-align: start; font-family: inherit;
}
body.dark-mode .dsec-toggle {
color: #c8d3e8; background: rgba(99,102,241,0.07);
border-color: rgba(99,102,241,0.14);
}
.dsec-toggle:hover { background: rgba(99,102,241,0.09); color: #4338ca; }
body.dark-mode .dsec-toggle:hover { background: rgba(99,102,241,0.14); color: #a5b4fc; }
.dsec-toggle.active { color: #4338ca; background: rgba(99,102,241,0.09); }
body.dark-mode .dsec-toggle.active { color: #a5b4fc; }
/* Section icon chips β the markup's me-2 spacing is replaced by the flex gap */
.dsec-toggle > i:first-child {
width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 1.15rem; margin: 0 !important;
}
.dsec-toggle[data-target="dm-tools"] > i:first-child { color: #4f46e5; background: rgba(99,102,241,0.13); }
.dsec-toggle[data-target="dm-flights"] > i:first-child { color: #0e7490; background: rgba(6,182,212,0.13); }
.dsec-toggle[data-target="dm-articles"] > i:first-child { color: #AC4F07; background: rgba(245,158,11,0.15); }
.dsec-toggle[data-target="dm-about"] > i:first-child { color: #475569; background: rgba(100,116,139,0.13); }
body.dark-mode .dsec-toggle[data-target="dm-tools"] > i:first-child { color: #a5b4fc; }
body.dark-mode .dsec-toggle[data-target="dm-flights"] > i:first-child { color: #67e8f9; }
body.dark-mode .dsec-toggle[data-target="dm-articles"] > i:first-child { color: #fcd34d; }
body.dark-mode .dsec-toggle[data-target="dm-about"] > i:first-child { color: #94a3b8; }
.dsec-caret { font-size: .8rem; opacity: .55; transition: transform .22s; margin-inline-start: auto; }
.dsec-toggle.active .dsec-caret { transform: rotate(180deg); }
.dsec-body { display: none; padding: 6px 2px 10px; }
.dsec-body.open { display: block; }
.dgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.d-item {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px; padding: 10px 4px; border-radius: 11px;
text-decoration: none; font-size: .75rem; font-weight: 500;
color: #475569; text-align: center; min-height: 64px;
transition: background .14s, color .14s;
}
body.dark-mode .d-item { color: #94a3b8; }
.d-item:hover { background: rgba(99,102,241,0.07); color: #4338ca; }
body.dark-mode .d-item:hover { background: rgba(99,102,241,0.12); color: #a5b4fc; }
.d-item i { font-size: 1.3rem; }
.drawer-ft {
padding: 10px 12px; border-top: 1px solid rgba(99,102,241,0.13);
display: flex; gap: 7px; flex-shrink: 0;
}
body.dark-mode .drawer-ft { border-top-color: rgba(99,102,241,0.20); }
.drawer-lang-btn {
flex: 1; padding: 9px; border-radius: 9px;
background: linear-gradient(135deg,#4338ca,#6366f1);
color: #fff; border: none; font-weight: 700; font-size: .8rem;
cursor: pointer; display: flex; align-items: center; justify-content: center;
gap: 6px; font-family: inherit;
}
.drawer-theme-btn {
padding: 9px 12px; border-radius: 9px;
background: rgba(99,102,241,0.07); border: 1px solid rgba(99,102,241,0.13);
color: #374151; font-size: .8rem; cursor: pointer;
display: flex; align-items: center; gap: 5px;
font-weight: 500; white-space: nowrap; font-family: inherit; transition: background .15s;
}
body.dark-mode .drawer-theme-btn {
background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.20); color: #c8d3e8;
}
.drawer-theme-btn:hover { background: rgba(99,102,241,0.14); }
/* ==========================================================================
Reduced motion
--------------------------------------------------------------------------
The site ships 15 keyframe animations, several of them infinite (heroOrbFloat,
ticker-scroll, shine, gradient-flow and the four pulse-* rings). Nothing honoured
prefers-reduced-motion, so users who ask the OS for less motion still got all of it β
a WCAG 2.3.3 problem and a nausea trigger for vestibular disorders.
Durations collapse to ~0 rather than `animation: none` so entrance animations still
land on their final frame instead of leaving elements stuck at opacity 0.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
DataTables FixedHeader β keep the accent gradient on the floating header
--------------------------------------------------------------------------
FixedHeader clones the table into a detached container appended to and
drops the element id. Every rule keyed to #airports-table therefore stops
matching on the clone β including
#airports-table thead { background: var(--accent); color: #fff; }
body.dark-mode #airports-table { background: #16171b; }
so on scroll the sticky header fell back to fixedHeader.bootstrap5.css's white
while its th text stayed #fff. White on white: contrast ratio 1, header
unreadable. This happened in BOTH themes β it was merely less obvious in light
mode, where the page behind it is also white.
Re-apply by the FixedHeader class, which survives the clone. --accent is
inherited from :root / body.dark-mode and the clone is a child of , so
this single rule resolves to the correct gradient in both themes.
========================================================================== */
table.fixedHeader-floating,
table.fixedHeader-floating thead {
background: var(--accent);
}
table.fixedHeader-floating thead th {
color: #fff;
}