/* PLZ Autocomplete — Mobile-First Design */
/* Note: the .plz-autocomplete wrapper gets position:relative inline from plz-manager.js. */

/* Dropdown container: sits below the input, scrollable list of suggestions. */
.plz-autocomplete__dropdown {
  background: #ffffff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  max-height: 320px;
  overflow-y: auto;
  /* z-index is also set inline by JS for robustness; CSS value is a fallback. */
  z-index: 1000;
}

/* Single suggestion row. */
.plz-autocomplete__item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  /* Stack the place name above the "PLZ · Bundesland" meta line on EVERY viewport.
     Previously this lived only in the mobile media query, so desktop rendered the two
     spans inline ("München80331 · Bayern") — AP013 desktop fix. */
  display: flex;
  flex-direction: column;
}

.plz-autocomplete__item:last-child {
  border-bottom: none;
}

/* Highlighted item: keyboard navigation or hover.
   Uses --primary-color so both brands (MDL blue, LR orange) are covered. */
.plz-autocomplete__item.is-active,
.plz-autocomplete__item:hover {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

/* Place name (first line): bold per Variante-C design. */
.plz-autocomplete__item-ort {
  font-weight: bold;
  font-size: 0.95rem;
}

/* Secondary info (second line): PLZ · Bundesland — smaller and muted. */
.plz-autocomplete__item-meta {
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 2px;
}

/* Mobile overrides: comfortable touch targets and font sizes that avoid iOS auto-zoom.
   The column stacking now lives in the desktop default above; here we only add the
   mobile-specific touch comfort (min-height + vertical centring). */
@media (max-width: 1023px) {
  .plz-autocomplete__item {
    min-height: 44px;
    justify-content: center;
    padding: 10px 14px;
  }

  .plz-autocomplete__item-ort {
    font-size: 1rem;
  }

  .plz-autocomplete__item-meta {
    font-size: 0.875rem;
  }
}