.mapContainer {
  width: 100%;
  height: 100%;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.map {
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  z-index: 1;
}

.popup {
  padding: var(--spacing-1);
  font-family: var(--font-family-base);
}

.popup strong {
  display: block;
  margin-bottom: var(--spacing-1);
  color: var(--foreground);
}

.popup div {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.routeHighlight {
  z-index: 400;
}

/* Scoped overrides for Leaflet’s global classes */
.mapContainer :global(.leaflet-container) {
  font-family: var(--font-family-base);
}

.mapContainer :global(.leaflet-popup-content-wrapper) {
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.mapContainer :global(.leaflet-popup-content) {
  margin: var(--spacing-2) var(--spacing-3);
  line-height: 1.5;
}

.mapContainer :global(.leaflet-popup-tip) {
  background-color: var(--card);
}

.mapContainer :global(.leaflet-popup-content-wrapper) {
  background-color: var(--card);
  color: var(--card-foreground);
}

.mapContainer :global(.leaflet-control-zoom) {
  border: none !important;
  box-shadow: var(--shadow-md) !important;
}

.mapContainer :global(.leaflet-control-zoom-in),
.mapContainer :global(.leaflet-control-zoom-out) {
  background-color: var(--card) !important;
  color: var(--card-foreground) !important;
  border: 1px solid var(--border) !important;
}

.mapContainer :global(.leaflet-control-zoom-in:hover),
.mapContainer :global(.leaflet-control-zoom-out:hover) {
  background-color: var(--muted) !important;
}

.mapContainer :global(.dark) :global(.leaflet-popup-content-wrapper),
.mapContainer :global(.dark) :global(.leaflet-popup-tip) {
  background-color: var(--card);
  color: var(--card-foreground);
}

.mapContainer :global(.dark) :global(.leaflet-control-zoom-in),
.mapContainer :global(.dark) :global(.leaflet-control-zoom-out) {
  background-color: var(--card) !important;
  color: var(--card-foreground) !important;
}