/* Подсказки поля населённого пункта. Общие для сайта и панели, поэтому
   цвета берутся из токенов обеих тем с запасным значением. */

.city-search {
  position: relative;
  display: block;
}

.city-search > input[type="text"] {
  width: 100%;
}

.city-search-list {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 18rem;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--color-field-bg, var(--p-surface-hi, #fff));
  border: 1px solid var(--color-field, var(--p-line, #e6e1d6));
  border-radius: 10px;
  box-shadow: 0 8px 24px rgb(20 32 28 / 0.12);
}

.city-search-option {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.city-search-option:hover,
.city-search-option[aria-selected="true"] {
  background: var(--color-brand-tint, var(--p-accent-soft, #e2eee6));
}

.city-search-title {
  font-weight: 600;
  color: var(--color-ink, var(--p-ink, #14201c));
}

/* Место — второй строкой и мельче: по нему различают тёзок, но читают его
   после названия. */
.city-search-place {
  font-size: 0.85em;
  color: var(--color-dim, var(--p-muted, #6b6960));
}

.city-search-empty {
  padding: 8px 10px;
  color: var(--color-dim, var(--p-muted, #6b6960));
}