@import url('https://unpkg.com/leaflet@1.9.4/dist/leaflet.css');

/* Leaflet Map Styles */
.leaflet-container {
  height: 100%;
  width: 100%;
  z-index: 1;
}

.leaflet-popup-content-wrapper {
  border-radius: 8px;
}

.leaflet-popup-tip {
  border-radius: 2px;
}

.leaflet-control-zoom {
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.leaflet-control-zoom a {
  border-radius: 4px !important;
  color: #333 !important;
  font-weight: bold !important;
}

.leaflet-control-zoom a:hover {
  background-color: #f0f0f0 !important;
}


/* Styling for route polyline tooltips */
.leaflet-tooltip.route-polyline-tooltip {
  background-color: #2C7EFE !important;
  border: 1.5px solid #FFF !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  color: #FFF !important;
  font-family: 'Roboto', 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  white-space: nowrap !important;
}

/* Hide the tooltip arrow since it is centered on the polyline */
.leaflet-tooltip.route-polyline-tooltip::before {
  display: none !important;
}

/* Styling for route point hover tooltips */
.leaflet-tooltip.route-point-hover-tooltip {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  color: #f8fafc !important;
  font-family: 'Roboto', 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 6px !important;
  white-space: nowrap !important;
}

.leaflet-tooltip-top.route-point-hover-tooltip::before {
  border-top-color: rgba(15, 23, 42, 0.95) !important;
}