/* ===========================
   CENTRALIZED MAP MARKER STYLES
   =========================== */

/* Base marker styles for all map components */
.map-marker {
  cursor: pointer;
  transition: transform 0.2s ease;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* White logo filter for image-based markers */
.map-marker.white-logo {
  filter: brightness(0) invert(1);
}

/* Hover effect */
.map-marker:hover {
  transform: scale(1.1);
  z-index: 10;
}

/* Mapbox specific overrides */
.mapboxgl-marker .map-marker {
  display: block;
}

/* Popup styles */
.map-popup .mapboxgl-popup-content {
  padding: 10px !important;
  font-family: "DINRegular", sans-serif;
  background-color: rgb(33, 37, 41);
  color: #f3f3f3;
  border-radius: 5px;
  min-width: 150px !important;
}

.map-popup .mapboxgl-popup-close-button {
  position: unset !important;
  color: #f5484d;
  font-size: 20px;
}

.map-popup .mapboxgl-popup-tip {
  border-top-color: rgb(33, 37, 41) !important;
}

/* Z-index management */
.map-popup .mapboxgl-popup {
  z-index: 1000 !important;
}

/* SVG-based markers (from MainMap) */
.marker-container {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s;
  position: relative;
  /* Blur removed from here - applied selectively to clusters only */
}

.marker-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 20px;
  color: white;
  position: relative;
}

/* Map type specific styles */
.dark-map .map-marker {
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
}

.dark-map .map-marker:hover {
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.3);
}

/* Apply to existing components */
.sector-boulder-map .marker,
.sector-boulder-map .map-marker {
  cursor: pointer;
  transition: transform 0.2s ease;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  position: relative;
  filter: brightness(0) invert(1);
}

.sector-boulder-map .marker:hover,
.sector-boulder-map .map-marker:hover {
  transform: scale(1.1);
  z-index: 10;
}

/* ===========================
   LIVE EVENT MARKER STYLES
   =========================== */

/* Live marker info container */
.marker-info {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 10;
}

/* Base marker label styles */
.marker-label {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: bold;
  font-family: "DINBold", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Live label specific styles */
.live-label {
  background: linear-gradient(135deg, #ff4458 0%, #ff6b6b 100%);
  color: white;
  animation: pulse-live 2s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(255, 68, 88, 0.4);
}

/* Pulse animation for live events */
@keyframes pulse-live {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

/* ===========================
   DEFAULT RUMBLE MARKER
   =========================== */

/* Default Rumble marker with red background */
.rumble-default-marker {
  width: 40px;
  height: 40px;
  background: #ff4d4d;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.rumble-default-marker svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Custom marker with logo image */
.rumble-custom-marker-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  cursor: pointer;
}

/* For SectorMap which uses DOM elements directly */
.sector-map-default-marker {
  width: 32px;
  height: 32px;
  background: #ff4d4d;
  border-radius: 50%;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.sector-map-default-marker svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ===========================
   PREMIUM GYM MARKERS
   =========================== */

.premium-marker {
  width: 56px;
  height: 56px;
  z-index: 5000 !important;
}

.premium-marker .marker-content {
  border: 2px solid #ffd700;
  background: linear-gradient(135deg, #2a2a2a, #3a3a3a) !important;
}

.premium-marker .marker-content::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid #ffd700;
  opacity: 0.5;
  animation: premiumPulse 3s ease-in-out infinite;
}

.premium-marker:hover .gym-logo {
  filter: none;
}

.premium-marker:has(.gym-logo) {
  top: -14px;
}

/* ===========================
   GYM LOGO STYLES
   =========================== */

.gym-logo-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gym-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  border-radius: 50%;
}

/* Premium gym custom marker image (league style) */
.premium-custom-marker-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ===========================
   EVENT COUNT BADGE
   =========================== */

.event-count-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: #f5484d;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  border: 2px solid #262626;
  z-index: 10;
}

.event-count-badge:not(.no-pulse)::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: #f5484d;
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
  z-index: -1;
}

.event-count-badge.no-pulse::after {
  animation: none;
}

/* ===========================
   MARKER TYPE BACKGROUNDS
   =========================== */

.marker-bg-indoor {
  background: linear-gradient(135deg, #F5484D, #dc2626) !important;
}

.marker-bg-outdoor {
  background: linear-gradient(135deg, #9AD746, #7FB935) !important;
}

.marker-bg-board,
.marker-bg-virtual {
  background: linear-gradient(135deg, #6366F1, #4F46E5) !important;
}

.marker-bg-default {
  background: #ff4d4d !important; /* Red - standard Rumble color for markers without event type */
}

.marker-bg-premium-gym {
  background: linear-gradient(135deg, #6366F1, #4F46E5) !important;
}

/* ===========================
   ANIMATIONS
   =========================== */

@keyframes premiumPulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}

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

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

/* ===========================
   CLUSTER STYLES
   =========================== */

/* Base cluster marker styles */
.cluster-marker {
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 700 !important;
  will-change: transform;
  aspect-ratio: 1 !important;
  overflow: visible !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Blur effect for cluster wrapper container */
.cluster-blur {
  backdrop-filter: blur(15px) saturate(120%);
  -webkit-backdrop-filter: blur(15px) saturate(120%);
  border-radius: 50%;
}

.cluster-marker.repositioning {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cluster-marker:hover {
  transform: scale(1.1);
  z-index: 1400 !important;
}

.cluster-marker > div {
  animation: pulse 2s ease-in-out infinite;
  box-shadow: 0 4px 15px rgba(245, 72, 77, 0.4);
  will-change: transform;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.cluster-marker:hover > div {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(245, 72, 77, 0.6);
}

.cluster-marker[data-zoom-level="5"],
.cluster-marker[data-zoom-level="6"] {
  transform: scale(1.1);
}

/* Override default marker-container styles for clusters */
.marker-container.cluster-marker {
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

.cluster-marker .marker-content {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure SVG logos in clusters maintain aspect ratio */
.cluster-marker svg {
  width: 60% !important;
  height: 60% !important;
  object-fit: contain !important;
  mix-blend-mode: multiply;
}

/* Dynamic cluster sizes based on marker count */
.cluster-marker.cluster-small {
  width: 40px !important;
  height: 40px !important;
}

.cluster-marker.cluster-small > div {
  font-size: 12px !important;
}

.cluster-marker.cluster-medium {
  width: 50px !important;
  height: 50px !important;
}

.cluster-marker.cluster-medium > div {
  font-size: 14px !important;
}

.cluster-marker.cluster-large {
  width: 60px !important;
  height: 60px !important;
}

.cluster-marker.cluster-large > div {
  font-size: 16px !important;
}

.cluster-marker.cluster-xlarge {
  width: 70px !important;
  height: 70px !important;
}

.cluster-marker.cluster-xlarge > div {
  font-size: 18px !important;
  box-shadow: 0 6px 25px rgba(245, 72, 77, 0.5) !important;
}

/* Cluster number badge */
.cluster-number {
  z-index: 10 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  border: 2px solid #f5484d !important;
}

/* Adjust cluster number badge position based on size */
.cluster-marker.cluster-small .cluster-number {
  right: -6px !important;
  top: -6px !important;
  font-size: 10px !important;
  width: 18px !important;
  height: 18px !important;
}

.cluster-marker.cluster-medium .cluster-number {
  right: -8px !important;
  top: -8px !important;
  font-size: 11px !important;
  width: 20px !important;
  height: 20px !important;
}

.cluster-marker.cluster-large .cluster-number {
  right: -10px !important;
  top: -10px !important;
  font-size: 12px !important;
  width: 22px !important;
  height: 22px !important;
}

.cluster-marker.cluster-xlarge .cluster-number {
  right: -12px !important;
  top: -12px !important;
  font-size: 13px !important;
  width: 24px !important;
  height: 24px !important;
}

/* Anti-collision adjusted clusters */
.cluster-marker.position-adjusted::after {
  height: 10px;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.1)
  );
}

/* ===========================
   ORBITAL MARKER STYLES
   =========================== */

/* Orbital marker - special marker type */
.orbital-marker {
  transition: none !important;
}

.orbital-marker:hover .marker-content {
  transform: scale(1.1);
}

.orbital-marker:hover .virtual-marker-pulse {
  animation-play-state: paused;
}

.virtual-marker.orbital-marker {
  z-index: 2500 !important;
}

/* ===========================
   MARKER PRIORITIES
   =========================== */

/* Marker priorities for z-index management */
.marker-priority-high {
  z-index: 1000 !important;
}

.marker-priority-medium {
  z-index: 900 !important;
}

.marker-priority-low {
  z-index: 800 !important;
}

/* Anti-collision position adjustment */
.marker-container.position-adjusted::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 1px;
}

/* ===========================
   MARKER PERFORMANCE STATES
   =========================== */

/* Disable transitions during map movement */
.mapboxgl-moving .marker-container:not(.premium-marker),
.mapboxgl-moving .cluster-marker,
.mapboxgl-moving .participant-marker {
  transition: none !important;
}

.mapboxgl-moving .premium-marker {
  transition: opacity 0.3s ease !important;
}

/* Smooth transitions when map is idle */
.mapboxgl-idle .marker-container,
.mapboxgl-idle .cluster-marker {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hide/reduce animations during movement */
.mapboxgl-moving .marker-live-indicator,
.mapboxgl-moving .virtual-marker-pulse {
  opacity: 0;
}

.mapboxgl-moving .marker-content {
  box-shadow: none !important;
}

/* Pause animations during map movement */
.mapboxgl-moving .premium-marker .marker-content::before,
.mapboxgl-moving .event-count-badge::after,
.mapboxgl-moving .marker-label.live-label,
.mapboxgl-moving .marker-info::after {
  animation-play-state: paused !important;
}

/* Disable animations during rapid updates */
.map-updating .marker-container {
  transition: none !important;
  animation: none !important;
  transition-duration: 0s !important;
}

/* Prevent flickering during zoom */
.map-updating .cluster-marker {
  transition: none !important;
  animation: none !important;
}

/* Live events with pulse */
.marker-container:not(.premium-marker) .marker-content.live::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: inherit;
  animation: pingSmall 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
  z-index: -1;
}