/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}

/* Base Body Modifications for Mobile Safari Viewports */
body {
  touch-action: pan-x pan-y;
  -webkit-tap-highlight-color: transparent;
}

/* Glassmorphism Classes */
.glass-panel {
  background: rgba(9, 9, 11, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(39, 39, 42, 0.6);
}

/* Dark Mode Leaflet Filter */
.leaflet-container {
  background: #09090b !important;
}

.leaflet-tile-container img {
  filter: invert(100%) hue-rotate(180deg) brightness(80%) contrast(95%) !important;
}

/* Leaflet Zoom Bar Styling */
.leaflet-bar {
  border: 1px solid rgba(39, 39, 42, 0.8) !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important;
}

.leaflet-bar a {
  background-color: rgba(9, 9, 11, 0.95) !important;
  color: #a1a1aa !important;
  border-bottom: 1px solid rgba(39, 39, 42, 0.8) !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  transition: all 0.2s ease;
}

.leaflet-bar a:hover {
  background-color: #27272a !important;
  color: #f4f4f5 !important;
}

.leaflet-control-attribution {
  background: rgba(9, 9, 11, 0.9) !important;
  color: #52525b !important;
  font-size: 8px !important;
  border-radius: 4px;
}

.leaflet-control-attribution a {
  color: #71717a !important;
}

/* Pulsing Leaflet DivIcons */
.pulse-marker-self {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pulse-marker-self::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.4);
  animation: marker-pulse 2.2s infinite;
}

.pulse-marker-self::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #38bdf8;
  border: 2px solid #ffffff;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.8);
}

.pulse-marker-seeker {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pulse-marker-seeker::before {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(236, 72, 153, 0.4);
  animation: marker-pulse 1.8s infinite;
}

.pulse-marker-seeker::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ec4899;
  border: 2px solid #ffffff;
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.9);
}

.pulse-marker-hider {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pulse-marker-hider::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.4);
  animation: marker-pulse 2.4s infinite;
}

.pulse-marker-hider::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #ffffff;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.8);
}

.pulse-marker-sonar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pulse-marker-sonar::before {
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.5);
  animation: marker-pulse 1s infinite;
}

.pulse-marker-sonar::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #a855f7;
  border: 2px solid #ffffff;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.9);
}

@keyframes marker-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}