*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── THEME VARS ── */
[data-theme="dark"] {
  --bg: #08101e;
  --glass: rgba(10, 16, 36, 0.78);
  --glass-border: rgba(255,255,255,0.11);
  --input-bg: rgba(255,255,255,0.07);
  --input-border: rgba(255,255,255,0.13);
  --label: rgba(255,255,255,0.55);
  --text: rgba(255,255,255,0.92);
  --text-muted: rgba(255,255,255,0.4);
  --blue: #1a73e8;
  --blue-hover: #1557b0;
  --swap-bg: rgba(26,115,232,0.35);
  --ac-bg: #0c1428;
  --ac-hover: rgba(26,115,232,0.25);
  --info-bg: rgba(26,115,232,0.12);
  --info-border: rgba(26,115,232,0.3);
  --tab-bg: rgba(255,255,255,0.07);
  --tab-border: rgba(255,255,255,0.1);
  --option-bg: #0c1428;
}
[data-theme="light"] {
  --bg: #e8edf5;
  --glass: rgba(255,255,255,0.82);
  --glass-border: rgba(0,0,0,0.1);
  --input-bg: rgba(0,0,0,0.04);
  --input-border: rgba(0,0,0,0.12);
  --label: rgba(0,0,0,0.5);
  --text: rgba(0,0,0,0.88);
  --text-muted: rgba(0,0,0,0.4);
  --blue: #1a73e8;
  --blue-hover: #1557b0;
  --swap-bg: rgba(26,115,232,0.15);
  --ac-bg: #ffffff;
  --ac-hover: rgba(26,115,232,0.1);
  --info-bg: rgba(26,115,232,0.07);
  --info-border: rgba(26,115,232,0.2);
  --tab-bg: rgba(0,0,0,0.05);
  --tab-border: rgba(0,0,0,0.1);
  --option-bg: #fff;
}

html, body {
  height: 100%; overflow: hidden;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ── MAP ── */
#map { position: fixed; inset: 0; z-index: 0; filter: brightness(0.42) saturate(1.3); }
#map-overlay {
  position: fixed; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at 50% 55%, transparent 25%, rgba(4,7,18,0.7) 100%);
}
[data-theme="light"] #map { filter: brightness(0.55) saturate(1.1); }
[data-theme="light"] #map-overlay {
  background: radial-gradient(ellipse at 50% 55%, rgba(255,255,255,0.15) 0%, rgba(180,200,240,0.55) 100%);
}

/* ── HEADER ── */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  padding: 14px 28px; display: flex; align-items: center; justify-content: space-between;
}
.logo {
  display: flex; align-items: center; gap: 9px;
  color: white; font-size: 19px; font-weight: 700; letter-spacing: 0.3px;
}
.theme-toggle {
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: white; transition: background 0.2s;
}
.theme-toggle:hover { background: rgba(255,255,255,0.22); }

/* ── SEARCH WRAPPER ── */
.search-wrapper {
  position: fixed; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  padding: 72px 16px 16px; overflow-y: auto;
}
.search-card {
  width: 100%; max-width: 880px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  padding: 28px 30px 24px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
  transition: background 0.3s, border-color 0.3s;
}

/* ── CARD TOP ── */
.card-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.card-top h2 { color: var(--text); font-size: 20px; font-weight: 600; }

/* ── MODE TABS ── */
.mode-tabs { display: flex; gap: 6px; }
.mode-tab {
  display: flex; align-items: center; gap: 6px;
  background: var(--tab-bg); border: 1px solid var(--tab-border);
  border-radius: 20px; padding: 6px 14px;
  font-size: 13px; font-weight: 500; color: var(--label);
  cursor: pointer; transition: all 0.18s;
}
.mode-tab:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }
.mode-tab.active { background: var(--blue); border-color: var(--blue); color: white; }

/* ── ROWS ── */
.search-row {
  display: flex; gap: 10px; align-items: flex-end;
  flex-wrap: wrap; margin-bottom: 12px;
}
.dates-panel { margin-bottom: 0; }
.dates-panel .search-row { margin-bottom: 0; }

/* ── FIELD GROUP ── */
.field-group { flex: 1; min-width: 155px; position: relative; }
.field-small  { flex: 0 0 148px; min-width: 128px; }

.field-group label {
  display: block; color: var(--label);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.7px;
  text-transform: uppercase; margin-bottom: 5px;
}
.optional { text-transform: none; font-weight: 400; font-size: 9.5px; opacity: 0.7; }

.input-icon-wrap {
  position: relative; display: flex; align-items: center;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 10px;
  transition: border-color 0.2s, background 0.2s;
}
.input-icon-wrap:focus-within {
  border-color: rgba(100,160,255,0.65);
  background: rgba(100,160,255,0.07);
}
.field-icon {
  position: absolute; left: 11px; width: 15px; height: 15px;
  color: var(--text-muted); pointer-events: none;
}
.input-icon-wrap input,
.input-icon-wrap select {
  width: 100%; background: transparent; border: none; outline: none;
  color: var(--text); font-size: 13.5px; padding: 11px 11px 11px 34px;
  -webkit-appearance: none; appearance: none;
}
.input-icon-wrap select { cursor: pointer; }
.input-icon-wrap input::placeholder { color: var(--text-muted); }
.input-icon-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: 0.5; filter: var(--cal-filter, invert(0.8));
}
[data-theme="light"] .input-icon-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none; opacity: 0.6;
}
option { background: var(--option-bg); color: var(--text); }

/* ── SWAP BUTTON ── */
.swap-btn {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: var(--swap-bg); border: 1px solid rgba(26,115,232,0.35);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: white; align-self: flex-end; margin-bottom: 1px;
  transition: background 0.2s, transform 0.25s;
}
.swap-btn:hover { background: var(--blue); transform: rotate(180deg); }

/* ── AUTOCOMPLETE ── */
.autocomplete-list {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 200;
  list-style: none; background: var(--ac-bg);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
  display: none;
}
[data-theme="light"] .autocomplete-list { border-color: rgba(0,0,0,0.1); box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
.autocomplete-list.open { display: block; }
.autocomplete-list li {
  padding: 10px 13px; cursor: pointer; color: var(--text);
  font-size: 13px; display: flex; align-items: center; gap: 9px;
  transition: background 0.12s;
}
.autocomplete-list li:hover, .autocomplete-list li.active { background: var(--ac-hover); }
.ac-iata {
  background: rgba(26,115,232,0.3); color: #64b0ff;
  font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 5px; flex-shrink: 0;
}
.ac-label { flex: 1; }

/* ── FLEX INFO ── */
.flex-info {
  display: flex; align-items: center; gap: 7px;
  background: var(--info-bg); border: 1px solid var(--info-border);
  border-radius: 8px; padding: 8px 12px;
  font-size: 12px; color: #64b0ff; margin-bottom: 12px;
}
[data-theme="light"] .flex-info { color: #1a73e8; }

/* ── SEARCH BUTTON ── */
.search-btn {
  width: 100%; margin-top: 14px;
  background: var(--blue); color: white; border: none;
  border-radius: 11px; padding: 13px 24px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.2px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 4px 22px rgba(26,115,232,0.42);
}
.search-btn:hover { background: var(--blue-hover); box-shadow: 0 6px 28px rgba(26,115,232,0.58); }
.search-btn:active { transform: scale(0.99); }

/* ── BOEING LOADING ── */
#loading-screen {
  position: fixed; inset: 0; z-index: 50;
  background: linear-gradient(180deg, #080f28 0%, #152050 40%, #1e3a7a 70%, #3060b0 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px;
}
#loading-screen.hidden { display: none; }
.clouds-wrapper { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cloud {
  position: absolute; background: white; border-radius: 50px; opacity: 0.1;
  animation: floatCloud linear infinite;
}
.cloud::before,.cloud::after { content:''; position:absolute; background:white; border-radius:50%; }
.c1{width:200px;height:50px;top:18%;animation-duration:22s}
.c1::before{width:80px;height:80px;top:-40px;left:30px}
.c1::after{width:60px;height:60px;top:-30px;left:80px}
.c2{width:300px;height:60px;top:33%;animation-duration:30s;animation-delay:-8s;opacity:.07}
.c2::before{width:100px;height:100px;top:-55px;left:50px}
.c2::after{width:80px;height:80px;top:-45px;left:130px}
.c3{width:180px;height:45px;top:52%;animation-duration:25s;animation-delay:-5s}
.c3::before{width:70px;height:70px;top:-35px;left:20px}
.c3::after{width:55px;height:55px;top:-25px;left:70px}
.c4{width:250px;height:55px;top:68%;animation-duration:35s;animation-delay:-15s;opacity:.08}
.c4::before{width:90px;height:90px;top:-48px;left:40px}
.c4::after{width:70px;height:70px;top:-38px;left:110px}
@keyframes floatCloud{from{transform:translateX(-420px)}to{transform:translateX(110vw)}}
.plane-track{position:relative;width:100%;height:80px}
#boeing{
  position:absolute;width:160px;height:54px;
  top:50%;transform:translateY(-50%);
  animation:flyPlane 3.4s ease-in-out infinite;
  filter:drop-shadow(0 4px 18px rgba(100,160,255,0.55));
}
@keyframes flyPlane{0%{left:-200px;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:106%;opacity:0}}
.loading-text{color:white;font-size:17px;font-weight:400;opacity:.88;letter-spacing:.4px}
.dots::after{content:'';animation:dotAnim 1.5s steps(4,end) infinite}
@keyframes dotAnim{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

/* ── SKELETON SCREEN ── */
#skeleton-screen {
  position: fixed; inset: 0; z-index: 50;
  background: #080e1f;
  display: flex; align-items: center; justify-content: center;
}
#skeleton-screen.hidden { display: none; }
.sk-screen-inner { width: 100%; max-width: 800px; padding: 0 20px; }
.sk-bar {
  height: 52px; border-radius: 12px; margin-bottom: 20px;
  background: linear-gradient(90deg,#111827 25%,#1a2540 50%,#111827 75%);
  background-size: 600px 100%; animation: shimmer 1.5s infinite;
}
.sk-card {
  height: 84px; border-radius: 12px; margin-bottom: 10px;
  background: linear-gradient(90deg,#111827 25%,#1a2540 50%,#111827 75%);
  background-size: 600px 100%; animation: shimmer 1.5s infinite;
}
.sk-card:nth-child(2){animation-delay:.15s}
.sk-card:nth-child(3){animation-delay:.3s}
@keyframes shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}

.hidden { display: none !important; }

@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ── RESPONSIVE ── */
@media (max-width:620px){
  .search-card{padding:20px 14px 18px}
  .swap-btn{display:none}
  .field-small{flex:1;min-width:120px}
  .card-top{flex-direction:column;align-items:flex-start}
}