.map-card.leaflet-container {
  height: 300px;
  background: #e9ede5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.leaflet-popup-content strong {
  font-size: 12px;
}

.leaflet-popup-content small {
  color: #777b74;
}

.demand-legend {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  color: #454941;
  font-size: 10px;
}

.demand-legend strong {
  color: #151515;
  font-size: 11px;
  margin-bottom: 2px;
}

.demand-legend span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.demand-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.demand-legend .normal { background: #78a929; }
.demand-legend .driver { background: #287a4b; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #287a4b; }
.demand-legend .busy { background: #f2c84b; }
.demand-legend .high { background: #f08c3e; }
.demand-legend .very-busy { background: #d9463e; }

.google-demand-legend {
  margin: 0 10px 28px 0;
}

.google-map-popup {
  display: grid;
  gap: 4px;
  min-width: 130px;
  color: #151515;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.google-map-popup small {
  color: #777b74;
}

.demand-very-busy {
  animation: demand-pulse 1.8s ease-in-out infinite;
}

@keyframes demand-pulse {
  0%, 100% { fill-opacity: 0.35; }
  50% { fill-opacity: 0.58; }
}