.coverage-wrap { display: grid; gap: 12px; }
.city-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.city-btn {
  background: #1A1A1A; color: #E6DCD6; padding: 8px 17px;
  font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; font-size: 14px; border: 0; cursor: pointer;
  transition: all .2s ease;
}
.city-btn:hover, .city-btn.active { background: transparent; color: #1A1A1A; border: 1px solid #1A1A1A; }

.map-card { background: #0f0f10; padding: 5px; border-radius: 0px;width:450px; }
.map-title { color: #d0d0d0; font-size: 14px; margin: 0 0 10px; opacity: .9; }

#coverage-map {
  width: 100%;
  height: 50vh;        /* ensure it has real height */
  min-height: 400px;
  border-radius: 0px;  /* fixed typo: was 0x */
  overflow: hidden;
}

/* Stabilize Leaflet on some mobile GPUs */
.leaflet-container {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.map-popup h4 { margin: 0 0 4px; font-size: 15px; }
.map-popup p { margin: 0; font-size: 13px; line-height: 1.4; }

/* Optional: subtle pulse on active dot */
.leaflet-interactive.dot-active { animation: dotPulse 0.4s ease-out 1; transform-origin: center; }
@keyframes dotPulse { 0% { transform: scale(0.85); } 100% { transform: scale(1); } }
@media (max-width: 768px) {
	.map-card{width:360px;}
	
}