/* =========================================================
   FLIGHT SEARCH — Modern UI (Golden Ratio layout)
   Komplett neu gestaltet: bündig, leicht, fokus-stark
   ========================================================= */

:root{
  /* Proportionen (≈ goldener Schnitt) */
  --phi: 1.618;
  --s-1: 6px;
  --s0: 8px;
  --s1: 13px;                  /* s0 * φ ≈ 12.9 */
  --s2: 21px;                  /* s1 * φ ≈ 21 */
  --s3: 34px;                  /* s2 * φ ≈ 34 */
  --field-h: 52px;

  /* Optik */
  --card-radius: 22px;
  --field-radius: 14px;
  --ring: 3px;
}

/* Karte / Container */
.pro-card{
  position: relative;
  padding: var(--s3);
  border-radius: var(--card-radius);
  background:
    radial-gradient(1200px 400px at 20% -20%, color-mix(in oklab, var(--primary) 8%, transparent), transparent),
    radial-gradient(1000px 600px at 120% 10%, color-mix(in oklab, var(--primary) 8%, transparent), transparent),
    var(--surface);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  box-shadow:
    0 20px 40px -20px color-mix(in oklab, var(--primary) 16%, transparent),
    0 6px 18px -8px color-mix(in oklab, black 12%, transparent),
    inset 0 0 0 1px color-mix(in oklab, var(--border) 40%, transparent);
  overflow: visible; /* Autocomplete darf überstehen */
}

/* Formular-Raster */
#searchForm.stack{ display:grid; gap: var(--s2); }

/* Oberste Zeile: 2 Spalten im goldenen Verhältnis */
.form-top{
  display:grid;
  grid-template-columns: 1.618fr 1fr;     /* links etwas breiter */
  gap: var(--s2);
  align-items:end;                        /* Unterkanten bündig */
}

/* Rechte Spalte: Zielflughafen + Ziel-Select nebeneinander */
.dest-row{
  display:grid;
  grid-template-columns: 1fr clamp(160px, 22vw, 240px);
  gap: var(--s1);
  align-items:end;
}

/* Zweite Zeile: Daten / Optionen */
.grid-2{ display:grid; gap: var(--s2); grid-template-columns: 1.382fr 1fr; align-items:end; }
.grid-3{ display:grid; gap: var(--s1); grid-template-columns: repeat(3, minmax(0,1fr)); align-items:end; }

.label{
  font-weight: 700;
  font-size: 14px;
  letter-spacing:.2px;
  margin: 0 0 var(--s-1);
  color: var(--text);
}

/* Felder */
.input,.select{
  width:100%;
  height:var(--field-h);
  padding: 12px 14px;
  border-radius: var(--field-radius);
  border:1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--elev) 92%, transparent), var(--elev));
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.input:hover,.select:hover{ border-color: color-mix(in oklab, var(--primary) 38%, var(--border)); }
.input:focus,.select:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 var(--ring) color-mix(in oklab, var(--primary) 24%, transparent);
}

/* Select Pfeil */
.select-wrap{ position:relative; }
.select-wrap::after{
  content:'▾';
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  pointer-events:none; opacity:.55; font-weight:700;
}
select.select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; }

/* Stepper */
.stepper{
  display:inline-grid; grid-auto-flow:column; align-items:center;
  border:1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: var(--field-radius);
  background: linear-gradient(180deg, color-mix(in oklab, var(--elev) 92%, transparent), var(--elev));
  height:var(--field-h);
  overflow:hidden;
}
.stepper button{
  width:48px; height:100%;
  border:0; background:transparent; font-weight:800; cursor:pointer;
  transition: background .15s ease, transform .05s ease;
}
.stepper button:hover{ background: color-mix(in oklab, var(--primary) 12%, transparent); }
.stepper button:active{ transform: scale(.98); }
.stepper output{
  min-width:56px; text-align:center; font-variant-numeric: tabular-nums;
}

/* Autocomplete */
.autocomplete{ position:relative; }
.suggestions{
  position:absolute; inset-inline:0; top: calc(100% + var(--s-1));
  background: var(--surface);
  border:1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: 16px;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.25), 0 10px 18px -12px rgba(0,0,0,.15);
  max-height: 320px; overflow:auto; z-index: 50; display:none;
}
.suggestions.visible{ display:block; }
.sug-item{ padding: 12px var(--s2); display:flex; gap: var(--s1); align-items:center; cursor:pointer; }
.sug-item:hover, .sug-item[aria-selected="true"]{ background: color-mix(in oklab, var(--primary) 10%, var(--surface)); }
.iata-pill{
  min-width:52px; height:28px; border-radius:14px;
  background: var(--elev);
  border:1px solid color-mix(in oklab, var(--border) 70%, transparent);
  display:flex; align-items:center; justify-content:center; font-weight:800;
}

/* „Weitere Optionen“ elegant in Karte integriert */
#opts{ margin-top: var(--s-1); }
#opts[open] > summary{ display:none; }
#opts .actions{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: var(--s1);
  align-items:center;
  padding-top: var(--s1);
  border-top: 1px dashed color-mix(in oklab, var(--border) 60%, transparent);
}
.checkbox.inline{ display:flex; align-items:center; gap: var(--s1); height:var(--field-h); }

/* Hilfe-Text */
.hint{ color: var(--muted); font-size: 13px; line-height:1.35; }

/* Aktionen unten */
.actions{ display:flex; align-items:center; gap: var(--s1); }

/* Flatpickr – an Look angepasst */
.flatpickr-calendar{
  border-radius: 16px;
  border:1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: var(--surface); color: var(--text);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.25), 0 10px 18px -12px rgba(0,0,0,.15);
  max-width: calc(100vw - var(--s3));
}
.flatpickr-day.selected, .flatpickr-day.startRange,
.flatpickr-day.endRange, .flatpickr-day.inRange{
  background: color-mix(in oklab, var(--primary) 22%, var(--elev));
  border-color: var(--primary);
  color: var(--text);
}
.flatpickr-months, .flatpickr-weekdays{ background: var(--elev); }

@media (max-width: 980px){
  .form-top{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .dest-row{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  :root{ --field-h: 48px; }
  .grid-3{ grid-template-columns: 1fr 1fr; }
}