/* =========================================
   SEARCH MODULE (se5) - Dark Neumorphism
   Premium OTA-Grade Widget
========================================= */

:root {
  /* Core Dark Neumorphism Colors */
  --se5-bg: #1e1e24; /* Base dark color */
  --se5-shadow-dark: #16161b;
  --se5-shadow-light: #26262d;
  
  /* Accents */
  --se5-accent: #e63946;
  --se5-accent-dark: #c02a35;
  --se5-accent-shadow-dark: #991f27;
  --se5-accent-shadow-light: #ff5365;

  /* Typography */
  --se5-text-main: #e0e0e0;
  --se5-text-muted: #8b8c91;
  
  /* Neumorphic Shadows */
  --se5-neu-out: 8px 8px 16px var(--se5-shadow-dark), -8px -8px 16px var(--se5-shadow-light);
  --se5-neu-out-sm: 4px 4px 8px var(--se5-shadow-dark), -4px -4px 8px var(--se5-shadow-light);
  --se5-neu-in: inset 6px 6px 12px var(--se5-shadow-dark), inset -6px -6px 12px var(--se5-shadow-light);
  --se5-neu-in-sm: inset 3px 3px 6px var(--se5-shadow-dark), inset -3px -3px 6px var(--se5-shadow-light);
  
  /* Accent Neumorphic Shadows */
  --se5-neu-accent-out: 6px 6px 12px var(--se5-accent-shadow-dark), -6px -6px 12px var(--se5-accent-shadow-light);
  --se5-neu-accent-in: inset 4px 4px 8px var(--se5-accent-shadow-dark), inset -4px -4px 8px var(--se5-accent-shadow-light);

  --se5-radius-lg: 24px;
  --se5-radius-md: 16px;
  --se5-radius-sm: 12px;
  
  --se5-font: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
  --se5-transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.se5 { 
  position: relative; 
  z-index: 100; 
  width: 100%; 
  max-width: 1200px;
  margin: 0 auto;
  font-family: var(--se5-font);
  background: var(--se5-bg);
  padding: 40px;
  border-radius: 32px;
  box-shadow: var(--se5-neu-out);
}

/* ── Trip Type Segmented Control ── */
.se5-tabs { 
  display: flex; 
  justify-content: flex-start;
  margin-bottom: 32px; 
}
.se5-tabs__track { 
  display: inline-flex; 
  position: relative; 
  background: var(--se5-bg); 
  padding: 6px; 
  border-radius: 100px; 
  box-shadow: var(--se5-neu-in);
}
.se5-tabs__track input[type="radio"] { display: none; }
.se5-tabs__tab { 
  position: relative; 
  z-index: 2; 
  padding: 12px 28px; 
  font-size: 14px; 
  font-weight: 600; 
  color: var(--se5-text-muted); 
  cursor: pointer; 
  transition: var(--se5-transition); 
  border-radius: 100px; 
  display: flex; 
  align-items: center; 
  gap: 8px; 
}
.se5-tabs__slider { 
  position: absolute; 
  top: 6px; left: 6px; bottom: 6px; 
  width: calc(33.33% - 4px); 
  background: var(--se5-bg); 
  border-radius: 100px; 
  z-index: 1; 
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: var(--se5-neu-out-sm);
}
#tt1:checked ~ .se5-tabs__slider { transform: translateX(0); width: 120px; }
#tt2:checked ~ .se5-tabs__slider { transform: translateX(120px); width: 132px; }
#tt3:checked ~ .se5-tabs__slider { transform: translateX(252px); width: 125px; }

#tt1:checked ~ label[for="tt1"], 
#tt2:checked ~ label[for="tt2"], 
#tt3:checked ~ label[for="tt3"] { 
  color: var(--se5-accent); 
  font-weight: 700;
  text-shadow: 0 0 8px rgba(230, 57, 70, 0.4);
}

/* ── Primary Search Fields Layout ── */
.se5-fields { 
  display: flex; 
  background: var(--se5-bg); 
  border-radius: var(--se5-radius-md); 
  padding: 16px; 
  gap: 16px; 
  align-items: center; 
  position: relative;
  box-shadow: var(--se5-neu-out);
}

.se5-field { 
  position: relative; 
  flex: 1; 
  background: var(--se5-bg); 
  border-radius: var(--se5-radius-sm); 
  padding: 14px 20px; 
  transition: var(--se5-transition); 
  cursor: text; 
  box-shadow: var(--se5-neu-in);
}
.se5-field:hover, .se5-field:focus-within { 
  box-shadow: var(--se5-neu-in-sm);
  z-index: 50;
}

/* Explicit top-down stacking to prevent dropdowns from going behind subsequent fields */
.se5-field--from { z-index: 40; }
.se5-field--to   { z-index: 30; }
.se5-field--date { z-index: 20; }
.se5-field--pax  { z-index: 10; }

.se5-field__label { 
  display: block; 
  font-size: 11px; 
  font-weight: 700; 
  color: var(--se5-text-muted); 
  margin-bottom: 8px; 
  text-transform: uppercase; 
  letter-spacing: 0.5px; 
}

.se5-field__well { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
}
.se5-field__icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--se5-bg);
  box-shadow: var(--se5-neu-out-sm);
  color: var(--se5-accent);
}
.se5-field__icon i { 
  font-size: 14px; 
}

.se5-field__body { 
  flex: 1; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
}

.se5-field__input { 
  background: transparent; 
  border: none; 
  color: var(--se5-text-main); 
  font-size: 16px; 
  font-weight: 700; 
  width: 100%; 
  outline: none; 
  font-family: inherit; 
  padding: 0;
}
.se5-field__input::placeholder { color: var(--se5-text-muted); font-weight: 500; }
.se5-field__input--date { cursor: pointer; }

.se5-field__iata { 
  font-size: 14px; 
  font-weight: 800; 
  color: var(--se5-text-muted); 
}

/* ── Swap Button ── */
.se5-swap-wrap { 
  position: relative; 
  width: 0; 
  height: 48px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  z-index: 10; 
}
.se5-swap { 
  position: absolute; 
  width: 48px; 
  height: 48px; 
  border-radius: 50%; 
  background: var(--se5-bg); 
  border: none;
  color: var(--se5-accent); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  cursor: pointer; 
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 
  box-shadow: var(--se5-neu-out);
  font-size: 18px;
}
.se5-swap:hover { 
  box-shadow: var(--se5-neu-in-sm);
  transform: rotate(180deg) scale(0.95); 
}
.se5-swap--spin {
  animation: swapSpin 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes swapSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}

/* ── Divider ── */
.se5-divider {
  width: 4px;
  height: 40px;
  border-radius: 2px;
  background: var(--se5-bg);
  box-shadow: var(--se5-neu-in-sm);
  margin: 0 4px;
}

/* ── Pax Trigger & Panel ── */
.se5-field--pax { cursor: pointer; }
.se5-field__body--pax { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
.se5-pax-summary { font-size: 15px; font-weight: 700; color: var(--se5-text-main); }
.se5-pax-cabin { font-size: 12px; color: var(--se5-text-muted); font-weight: 500; }
.se5-pax-arrow { color: var(--se5-text-muted); font-size: 18px; transition: var(--se5-transition); }
.se5-pax-panel--open ~ .se5-field__well--pax .se5-pax-arrow { transform: rotate(180deg); color: var(--se5-accent); }

.se5-pax-panel { 
  position: absolute; 
  top: calc(100% + 20px); 
  right: 0; 
  width: 320px; 
  background: var(--se5-bg);
  border-radius: var(--se5-radius-md); 
  box-shadow: var(--se5-neu-out); 
  display: none; 
  z-index: 200; 
  padding: 24px;
  transform-origin: top right;
  animation: popIn 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@keyframes popIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.se5-pax-panel.se5-pax-panel--open { display: block; }

.se5-pax-row { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  margin-bottom: 24px; 
}
.se5-pax-info strong { display: block; font-size: 15px; color: var(--se5-text-main); margin-bottom: 4px; font-weight: 700; }
.se5-pax-info span { font-size: 12px; color: var(--se5-text-muted); }

.se5-stepper { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  background: var(--se5-bg); 
  border-radius: 12px; 
  padding: 6px; 
  box-shadow: var(--se5-neu-in-sm);
}
.se5-stepper__btn { 
  width: 32px; height: 32px; 
  border-radius: 8px; border: none; 
  background: var(--se5-bg); 
  color: var(--se5-text-main); cursor: pointer; 
  display: flex; align-items: center; justify-content: center; 
  transition: var(--se5-transition); 
  font-size: 18px;
  box-shadow: var(--se5-neu-out-sm);
}
.se5-stepper__btn:active { box-shadow: var(--se5-neu-in-sm); color: var(--se5-accent); }
.se5-stepper__val { font-weight: 700; font-size: 15px; width: 24px; text-align: center; color: var(--se5-text-main); }

.se5-cabin-row { margin-bottom: 24px; padding-top: 20px; border-top: 2px solid var(--se5-shadow-dark); }
.se5-cabin-row strong { display: block; font-size: 13px; color: var(--se5-text-main); margin-bottom: 16px; font-weight: 700; }
.se5-cabin-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.se5-cabin-pill { display: block; cursor: pointer; }
.se5-cabin-pill input { display: none; }
.se5-cabin-pill span { 
  display: block; 
  padding: 12px; 
  text-align: center; 
  background: var(--se5-bg); 
  border-radius: 10px; 
  font-size: 13px; 
  font-weight: 600;
  color: var(--se5-text-muted);
  box-shadow: var(--se5-neu-out-sm);
  transition: var(--se5-transition);
}
.se5-cabin-pill input:checked + span {
  box-shadow: var(--se5-neu-in-sm);
  color: var(--se5-accent);
}

.se5-pax-done { 
  width: 100%; 
  background: var(--se5-accent); 
  color: #fff; 
  border: none; 
  padding: 16px; 
  border-radius: 12px; 
  font-weight: 700; 
  font-size: 15px;
  cursor: pointer; 
  transition: var(--se5-transition);
  box-shadow: var(--se5-neu-accent-out);
}
.se5-pax-done:active {
  box-shadow: var(--se5-neu-accent-in);
}

/* ── Disabled States ── */
.se5-field__well--disabled { opacity: 0.3; pointer-events: none; }

/* ── Autocomplete ── */
.se5-ac { 
  position: absolute; 
  top: calc(100% + 20px); left: 0; 
  width: 100%; min-width: 340px; 
  background: var(--se5-bg);
  border-radius: var(--se5-radius-md); 
  box-shadow: var(--se5-neu-out); 
  display: none; 
  z-index: 200; 
  overflow: hidden; 
  animation: popIn 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.se5-ac.se5-ac--open { display: block; }
.se5-ac__item { 
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; cursor: pointer; transition: background 0.2s; 
  border-bottom: 2px solid var(--se5-shadow-dark); 
}
.se5-ac__item:last-child { border-bottom: none; }
.se5-ac__item:hover { background: var(--se5-shadow-dark); }
.se5-ac__left { display: flex; align-items: center; }
.se5-ac__icon { 
  width: 36px; height: 36px; border-radius: 50%; 
  background: var(--se5-bg); 
  box-shadow: var(--se5-neu-in-sm);
  display: flex; align-items: center; justify-content: center; 
  margin-right: 16px; color: var(--se5-accent); 
}
.se5-ac__city { font-weight: 700; font-size: 15px; color: var(--se5-text-main); }
.se5-ac__airport { font-size: 12px; color: var(--se5-text-muted); font-weight: 500; }
.se5-ac__code { font-weight: 700; color: var(--se5-text-muted); font-size: 13px; background: var(--se5-bg); padding: 6px 10px; border-radius: 8px; box-shadow: var(--se5-neu-in-sm); }

/* ── Bottom Section (Fares & CTA) ── */
.se5-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  flex-wrap: wrap;
  gap: 24px;
}

/* Fare Types */
.se5-fares {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.se5-fare { cursor: pointer; }
.se5-fare input { display: none; }
.se5-fare span {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 100px;
  background: var(--se5-bg);
  box-shadow: var(--se5-neu-out-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--se5-text-muted);
  transition: var(--se5-transition);
}
.se5-fare input:checked + span {
  box-shadow: var(--se5-neu-in-sm);
  color: var(--se5-accent);
}

/* Flagship CTA */
.se5-cta {
  background: var(--se5-accent);
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 0 48px;
  height: 64px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: var(--se5-transition);
  box-shadow: var(--se5-neu-accent-out);
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.se5-cta:active {
  box-shadow: var(--se5-neu-accent-in);
  transform: scale(0.98);
}
.se5-cta__icon { font-size: 24px; }

/* ── Multi-City adjustments ── */
.se5-mc-panel { background: var(--se5-bg); border-radius: var(--se5-radius-md); box-shadow: var(--se5-neu-in); margin-top: 24px; padding: 24px; }
.se5-mc-input { background: var(--se5-bg); box-shadow: var(--se5-neu-in-sm); border: none; border-radius: var(--se5-radius-sm); font-family: inherit; padding: 16px 20px; color: var(--se5-text-main); font-weight: 600; }
.se5-mc-input:focus { outline: none; box-shadow: var(--se5-neu-in); }
.se5-mc-seg { padding: 16px 0; border-bottom: 2px solid var(--se5-shadow-dark); }
.se5-mc-seg:last-child { border-bottom: none; }
.se5-mc-seg__num { font-size: 12px; font-weight: 800; color: var(--se5-text-muted); text-transform: uppercase; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
.se5-mc-add { background: var(--se5-bg); color: var(--se5-accent); box-shadow: var(--se5-neu-out-sm); border: none; padding: 12px 24px; border-radius: 12px; font-weight: 700; cursor: pointer; transition: var(--se5-transition); display: flex; align-items: center; gap: 8px; }
.se5-mc-add:active { box-shadow: var(--se5-neu-in-sm); }

/* ── Responsive ── */
@media (max-width: 992px) {
  .se5 { padding: 24px; border-radius: 24px; }
  .se5-tabs { overflow-x: auto; padding-bottom: 12px; margin-bottom: 24px; }
  .se5-tabs::-webkit-scrollbar { display: none; }
  .se5-fields { flex-direction: column; background: transparent; padding: 0; box-shadow: none; gap: 16px; }
  .se5-field { width: 100%; box-shadow: var(--se5-neu-out); }
  .se5-divider { display: none; }
  
  .se5-swap-wrap { width: 100%; height: 0; margin: 0; }
  .se5-swap { top: -28px; right: 24px; transform: rotate(90deg); }
  .se5-swap:hover { transform: rotate(270deg) scale(0.95); }
  
  .se5-bottom { flex-direction: column; align-items: stretch; margin-top: 24px; gap: 24px; }
  .se5-cta { justify-content: center; width: 100%; }
  
  .se5-pax-panel, .se5-ac { 
    position: absolute; 
    top: calc(100% + 8px); 
    left: 0; 
    width: 100%; 
    min-width: 100%; 
    border-radius: var(--se5-radius-md); 
  }
}