/* Custom Leaflet Map Styling for LiveMaps V2 */

/* Dark Mode Leaflet Popups */
.leaflet-popup-content-wrapper {
  background: rgba(15, 23, 42, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  padding: 0.2rem !important;
}

.leaflet-popup-tip {
  background: rgba(15, 23, 42, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.leaflet-popup-content {
  margin: 12px 16px !important;
  line-height: 1.5 !important;
  font-family: 'Inter', sans-serif !important;
}

.popup-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.popup-meta {
  font-size: 0.78rem;
  color: #94a3b8;
  margin-bottom: 0.6rem;
  display: flex;
  gap: 0.8rem;
}

.popup-desc {
  font-size: 0.85rem;
  color: #cbd5e1;
  margin-bottom: 0.8rem;
}

.popup-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-popup {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: rgba(6, 182, 212, 0.15);
  color: #06b6d4;
  border: 1px solid rgba(6, 182, 212, 0.3);
  transition: all 0.2s ease;
}

.btn-popup:hover {
  background: #06b6d4;
  color: #000;
}

/* Custom Marker Pins & Pulsing Rings */
.live-marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker-pulse {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  opacity: 0.6;
  animation: pulseRing 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.live-marker.accident .marker-pulse { background: rgba(239, 68, 68, 0.4); }
.live-marker.traffic .marker-pulse { background: rgba(249, 115, 22, 0.4); }
.live-marker.works .marker-pulse { background: rgba(245, 158, 11, 0.4); }
.live-marker.weather .marker-pulse { background: rgba(6, 182, 212, 0.4); }
.live-marker.hazard .marker-pulse { background: rgba(244, 63, 94, 0.4); }

.marker-icon-box {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border: 2px solid white;
  z-index: 2;
  transition: transform 0.2s ease;
}

.live-marker:hover .marker-icon-box {
  transform: scale(1.15);
}

.live-marker.accident .marker-icon-box { background: linear-gradient(135deg, #ef4444, #991b1b); }
.live-marker.traffic .marker-icon-box { background: linear-gradient(135deg, #f97316, #c2410c); }
.live-marker.works .marker-icon-box { background: linear-gradient(135deg, #f59e0b, #b45309); }
.live-marker.weather .marker-icon-box { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.live-marker.hazard .marker-icon-box { background: linear-gradient(135deg, #f43f5e, #be123c); }

@keyframes pulseRing {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* User Location Marker Pulsing Beacon */
.user-beacon {
  width: 22px;
  height: 22px;
  background: #06b6d4;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 0 15px #06b6d4;
  position: relative;
}

.user-beacon::after {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border-radius: 50%;
  background: rgba(6, 182, 212, 0.35);
  animation: beaconPulse 1.8s infinite;
}

@keyframes beaconPulse {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}