#city-list .city-item {
  background: var(--bs-body-bg); /* se adapta ao tema (dark/light) */
  padding: 10px;
  border-radius: 0.5rem;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  position: relative; /* Para garantir que z-index funcione */
  z-index: 1;
  border: 1px solid var(--bs-border-color, #dee2e6);
}

#city-list .city-item:hover {
  background: var(--bs-secondary-bg);
  transform: translateY(-2px);
  z-index: 10; /* Garante que o item fique sobre os outros */
}

#city-list .city-item.active {
  border: 2px solid var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.1);
}

#city-list .city-item h3 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: var(--bs-body-color);
}

#city-list .city-item p {
  font-size: 0.85rem;
  color: var(--bs-secondary-color, #6c757d);
}
#city-list {
  padding-top: 5px;
}