/* ct24-address-fullscreen.css — Fullscreen-Adresseingabe-Overlay
 *
 * Minimales, fokussiertes UI: Header + Input + (GPS-Row / Recent / Vorschlaege).
 * Layout ist bewusst auf eine Hand getrimmt — alles, was man braucht, liegt
 * in Daumenreichweite, Input liegt immer ueber der Tastatur.
 *
 * Tokens (lokal) — alles in einer Klasse zusammengefasst, damit das Stylesheet
 * fuer sich alleine verstaendlich ist und nicht mit der uebrigen Fahrgast-UI
 * kollidiert.
 */

.ct24-addr-fs {
  --fs-bg: #ffffff;
  --fs-bg-soft: #f8fafc;
  --fs-border: rgba(15, 23, 42, 0.08);
  --fs-border-strong: rgba(15, 23, 42, 0.14);
  --fs-text: #0f172a;
  --fs-muted: #64748b;
  --fs-muted-2: #94a3b8;
  --fs-accent: #0f766e;
  --fs-pickup: #16a34a;
  --fs-drop: #dc2626;
  --fs-wp: #2563eb;

  position: fixed;
  inset: 0;
  z-index: 1200;
  background: var(--fs-bg);
  color: var(--fs-text);
  display: none;
  flex-direction: column;
  /* Flex: Scrollbereich darf schrumpfen (sonst keine/volle Liste unter Header). */
  min-height: 0;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Tastatur-Inset von ct24-kb-inset.js — damit scrollbarer Bereich nicht
     unter der Tastatur verschwindet. */
  padding-bottom: var(--ct24-kb-inset, 0px);
  transition: padding-bottom 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ct24-addr-fs[data-open="1"] {
  display: flex;
  animation: ct24AddrFsIn 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes ct24AddrFsIn {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

body.ct24-addr-fs-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* --- Header --------------------------------------------------------- */
.ct24-addr-fs__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 10px 4px;
  border-bottom: 1px solid var(--fs-border);
  background: var(--fs-bg);
  min-height: 56px;
  flex: 0 0 auto;
  flex-shrink: 0;
  /* iOS-Safe-Area fuer Notch / Dynamic Island. */
  padding-top: max(10px, env(safe-area-inset-top));
}
.ct24-addr-fs__back {
  appearance: none;
  background: transparent;
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fs-text);
  cursor: pointer;
  transition: background 0.15s ease;
}
.ct24-addr-fs__back:active { background: rgba(15, 23, 42, 0.06); }
.ct24-addr-fs__back svg { width: 22px; height: 22px; }

.ct24-addr-fs__titles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ct24-addr-fs__title {
  font: 700 17px/1.2 system-ui, sans-serif;
  color: var(--fs-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct24-addr-fs__subtitle {
  font: 500 12px/1.3 system-ui, sans-serif;
  color: var(--fs-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Farbakzent am Titel: Pickup gruen, Zieladresse rot, Waypoint blau. */
.ct24-addr-fs[data-kind="pickup"]      .ct24-addr-fs__title::before,
.ct24-addr-fs[data-kind="destination"] .ct24-addr-fs__title::before,
.ct24-addr-fs[data-kind="waypoint"]    .ct24-addr-fs__title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--fs-drop);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.ct24-addr-fs[data-kind="pickup"]   .ct24-addr-fs__title::before { background: var(--fs-pickup); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15); }
.ct24-addr-fs[data-kind="waypoint"] .ct24-addr-fs__title::before { background: var(--fs-wp);     box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }

/* --- Input --------------------------------------------------------- */
.ct24-addr-fs__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 14px;
  background: var(--fs-bg);
  flex: 0 0 auto;
  flex-shrink: 0;
}
.ct24-addr-fs__input-wrap::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 1px;
  background: var(--fs-border);
}
.ct24-addr-fs__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--fs-drop);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.ct24-addr-fs[data-kind="pickup"]   .ct24-addr-fs__dot { background: var(--fs-pickup); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15); }
.ct24-addr-fs[data-kind="waypoint"] .ct24-addr-fs__dot { background: var(--fs-wp);     box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }

.ct24-addr-fs__input {
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  border: 0;
  outline: none;
  background: transparent;
  font: 600 17px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--fs-text);
  padding: 8px 0;
  caret-color: var(--fs-accent);
}
.ct24-addr-fs__input::placeholder { color: var(--fs-muted-2); font-weight: 500; }
.ct24-addr-fs__input::-webkit-search-cancel-button,
.ct24-addr-fs__input::-webkit-search-decoration { display: none; }

.ct24-addr-fs__clear {
  appearance: none;
  background: rgba(15, 23, 42, 0.06);
  border: 0;
  color: var(--fs-muted);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.15s ease, color 0.15s ease;
}
.ct24-addr-fs__clear:active { background: rgba(15, 23, 42, 0.12); color: var(--fs-text); }
.ct24-addr-fs__clear svg { width: 14px; height: 14px; }

/* --- Scrollbarer Inhaltsbereich ----------------------------------- */
.ct24-addr-fs__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 16px;
}

/* --- GPS-Row (nur Pickup, wenn Input leer) ------------------------ */
.ct24-addr-fs__gps-row {
  appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  color: var(--fs-text);
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid var(--fs-border);
  transition: background 0.15s ease;
}
.ct24-addr-fs__gps-row:active { background: var(--fs-bg-soft); }
.ct24-addr-fs__gps-row[aria-busy="true"] { opacity: 0.65; pointer-events: none; }
.ct24-addr-fs__gps-ic {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(2, 132, 199, 0.12);
  color: #0284c7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ct24-addr-fs__gps-ic svg { width: 18px; height: 18px; }
.ct24-addr-fs__gps-lbl {
  font: 600 15px/1.2 system-ui, sans-serif;
  color: var(--fs-text);
}

/* --- Zuletzt verwendet -------------------------------------------- */
.ct24-addr-fs__recent[hidden] { display: none !important; }

.ct24-addr-fs__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 6px;
}
.ct24-addr-fs__section-title {
  font: 700 11px/1 system-ui, sans-serif;
  color: var(--fs-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ct24-addr-fs__section-action {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--fs-muted);
  font: 600 12px/1 system-ui, sans-serif;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}
.ct24-addr-fs__section-action:active { background: rgba(15, 23, 42, 0.06); color: var(--fs-text); }

.ct24-addr-fs__recent-list { display: flex; flex-direction: column; }

.ct24-addr-fs__recent-item {
  appearance: none;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  color: var(--fs-text);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid var(--fs-border);
}
.ct24-addr-fs__recent-item:last-child { border-bottom: 0; }
.ct24-addr-fs__recent-item:active { background: var(--fs-bg-soft); }
.ct24-addr-fs__recent-ic {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.06);
  color: var(--fs-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ct24-addr-fs__recent-ic svg { width: 18px; height: 18px; }
.ct24-addr-fs__recent-txt {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ct24-addr-fs__recent-main {
  font: 600 15px/1.25 system-ui, sans-serif;
  color: var(--fs-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct24-addr-fs__recent-sub {
  font: 500 13px/1.3 system-ui, sans-serif;
  color: var(--fs-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct24-addr-fs__recent-sub:empty { display: none; }

/* --- Vorschlagsliste ---------------------------------------------- */
.ct24-addr-fs__list[hidden] { display: none !important; }
.ct24-addr-fs__list {
  display: flex;
  flex-direction: column;
  padding-top: 4px;
}

.ct24-addr-fs__item {
  appearance: none;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  color: var(--fs-text);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid var(--fs-border);
  touch-action: manipulation;
}
.ct24-addr-fs__item:last-child { border-bottom: 0; }
.ct24-addr-fs__item:active { background: var(--fs-bg-soft); }

.ct24-addr-fs__item-ic {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.1);
  color: var(--fs-drop);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ct24-addr-fs[data-kind="pickup"]   .ct24-addr-fs__item-ic { background: rgba(22, 163, 74, 0.1); color: var(--fs-pickup); }
.ct24-addr-fs[data-kind="waypoint"] .ct24-addr-fs__item-ic { background: rgba(37, 99, 235, 0.1); color: var(--fs-wp); }
.ct24-addr-fs__item-ic svg { width: 18px; height: 18px; }

.ct24-addr-fs__item-txt {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ct24-addr-fs__item-main {
  font: 600 15px/1.25 system-ui, sans-serif;
  color: var(--fs-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct24-addr-fs__item-sub {
  font: 500 13px/1.3 system-ui, sans-serif;
  color: var(--fs-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct24-addr-fs__item-sub:empty { display: none; }

/* Nur Hauptzeile (einzeilige Autocomplete-Zeilen). */
.ct24-addr-fs__item--one-line .ct24-addr-fs__item-txt {
  gap: 0;
}

/* --- Empty/Hint --------------------------------------------------- */
.ct24-addr-fs__empty {
  padding: 18px 20px;
  text-align: center;
  color: var(--fs-muted);
  font: 500 13px/1.4 system-ui, sans-serif;
}
.ct24-addr-fs__empty[hidden] { display: none !important; }

/* --- Desktop-Feinschliff (>= 640px): etwas enger zentrieren -------- */
@media (min-width: 640px) {
  .ct24-addr-fs__head,
  .ct24-addr-fs__input-wrap,
  .ct24-addr-fs__scroll {
    max-width: 680px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}
