/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
}
::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.3);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 158, 11, 0.6);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Custom Leaflet Map Customizations */
.leaflet-container {
  background: #090d12 !important;
  font-family: 'Tajawal', sans-serif !important;
}

.leaflet-popup-content-wrapper {
  background: #161b22 !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: 1rem !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5) !important;
  padding: 0 !important;
  overflow: hidden;
}

.leaflet-popup-content {
  margin: 0 !important;
  line-height: 1.5 !important;
}

.leaflet-popup-tip {
  background: #161b22 !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.leaflet-control-zoom a {
  background-color: #161b22 !important;
  color: #fbbf24 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Custom Pin Pulse Marker */
.custom-pin-marker {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pin-icon-wrap {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: 2px solid #ffffff;
  box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.5);
  display: flex;
  align-items: center;
  justify-content: justify-center;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pin-icon-wrap:hover {
  transform: scale(1.15) translateY(-4px);
}

.pin-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid #f59e0b;
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  opacity: 0.75;
}

@keyframes ping {
  75%, 100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* Keyframe Animations */
@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes popIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-slide-up {
  animation: slideUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.animate-pop-in {
  animation: popIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* User GPS Marker */
.user-gps-marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-gps-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #10b981;
  color: white;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: justify-center;
  font-size: 14px;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.6);
  z-index: 2;
}

.user-gps-pulse {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.35);
  animation: gpsPulse 1.8s infinite ease-out;
  z-index: 1;
}

@keyframes gpsPulse {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Custom Navigation Hazard Markers */
.hazard-map-pin {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1e293b;
  border: 2px solid #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
  cursor: pointer;
  animation: pulse 1.5s infinite;
}

.hazard-map-pin.bump-pin {
  border-color: #f59e0b;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
}

.hazard-map-pin.camera-pin {
  border-color: #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.8);
}

/* Route Mode Buttons */
.route-mode-btn {
  transition: all 0.2s ease;
}

/* HUD Overlay Windshield Mirror Flip Effect */
#hud-overlay {
  transform: scaleX(-1);
}
#hud-overlay * {
  user-select: none;
}

/* Prevent accidental text select */
button, .nav-tab, .filter-chip {
  user-select: none;
  -webkit-user-select: none;
}