.city-modal-content {
  border: 1px solid var(--bs-border-color, #dee2e6);
  overflow: hidden;
}

.city-modal-header {
  background:
    radial-gradient(circle at top right, rgba(13, 110, 253, .16), transparent 42%),
    linear-gradient(135deg, rgba(13, 110, 253, .08), transparent);
  padding: 1.25rem 1.25rem .75rem;
}

.city-modal-kicker {
  color: var(--bs-primary, #0d6efd);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .25rem;
}

.city-modal-subtitle {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .92rem;
}

.city-modal-search {
  position: relative;
  margin-bottom: 1rem;
}

.city-modal-search i {
  position: absolute;
  left: .95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bs-secondary-color, #6c757d);
  pointer-events: none;
}

.city-modal-search .form-control {
  border-radius: 999px;
  padding-left: 2.45rem;
}

.city-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .65rem;
  max-height: min(56vh, 430px);
  overflow-y: auto;
  padding: 4px 4px 8px;
}

.city-section-header {
  grid-column: 1 / -1;
  padding: .65rem 0 .25rem;
  border-bottom: 1px solid var(--bs-border-color, #333);
  margin: .35rem 0 .15rem;
}

.city-section-header strong {
  font-size: .84rem;
}

.city-section-header span {
  color: var(--bs-secondary-color, #888);
  font-size: .74rem;
  margin-left: .5rem;
}

.city-soon-chip {
  display: inline-block;
  padding: .08rem .42rem;
  border-radius: 999px;
  background: rgba(255,193,7,.18);
  color: #ffc107;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-left: .35rem;
  vertical-align: 1px;
  white-space: nowrap;
}

#city-list .city-item {
  background: var(--bs-body-bg); /* se adapta ao tema (dark/light) */
  padding: 12px;
  border-radius: 0.85rem;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, border-color .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: .98rem;
  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;
}

[data-bs-theme="dark"] .city-modal-content {
  background: #15191f;
  border-color: #2b3038;
}

[data-bs-theme="dark"] .city-modal-header {
  background:
    radial-gradient(circle at top right, rgba(20, 184, 166, .16), transparent 42%),
    linear-gradient(135deg, rgba(13, 110, 253, .12), transparent);
}

[data-bs-theme="dark"] #city-list .city-item {
  background: #1c2229;
  border-color: #333b45;
}

[data-bs-theme="dark"] #city-list .city-item:hover {
  background: #242b34;
  border-color: rgba(20, 184, 166, .5);
}

@media (max-width: 576px) {
  .city-list-grid {
    grid-template-columns: 1fr;
    max-height: 58vh;
  }
}