/* ====================== LIVE MUSIC TABLE ====================== */

.live-music-table {
  margin-top: 40px !important;
}

.live-music-table td {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* ====================== MAP MARKERS & CLUSTERS ====================== */

/* Single pins */
.custom-marker {
  transition: all 0.25s ease;
}

.custom-marker.marker-hover div,
.custom-marker.marker-highlight div {
  border: 3px solid white !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45) !important;
  transform: scale(1.22);
  transition: all 0.25s ease !important;
}

/* Clusters */
.custom-cluster {
  transition: all 0.25s ease;
  pointer-events: auto;
}

.cluster-icon {
  transition: all 0.25s ease;
}

.cluster-hover .cluster-icon {
  box-shadow: 0 10px 25px rgba(0,0,0,0.45) !important;
  transform: scale(1.12);
}

/* Tooltip (hover) */
.venue-tooltip {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-size: 13.5px;
  white-space: nowrap;
  z-index: 1000;
}

/* Legend */
.map-legend {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Current User Location */
.current-location-marker .user-location-dot {
  width: 16px;
  height: 16px;
  background: #3b82f6;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
  position: relative;
}

.current-location-marker .pulse-ring {
  position: absolute;
  inset: -8px;
  border: 2px solid #3b82f6;
  border-radius: 50%;
  animation: userPulse 2.5s infinite ease-out;
}

@keyframes userPulse {
  0%   { transform: scale(0.6); opacity: 0.8; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(2.3); opacity: 0; }
}

/* General Leaflet improvements */
.leaflet-marker-icon {
  will-change: transform;
  transition: all 0.25s ease;
}

.leaflet-zoom-anim .custom-marker,
.leaflet-zoom-anim .cluster-icon {
  transition: none !important;
}

/* ====================== SCALE BAR ====================== */
.leaflet-bottom.leaflet-left .leaflet-control-scale {
  margin-bottom: 12px !important;
  margin-left: 12px !important;           /* remove the manual margin */
  
  /* Make it match legend width but allow a little breathing room */
  width: 160px !important;             /* slightly wider */
  min-width: 160px !important;
  max-width: 160px !important;
  
  padding: 3px 3px !important;        /* match legend padding */
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  border-radius: 6px !important;
  border: 1px solid #f0f0f0;
  overflow: hidden;                    /* prevents busting out */
}

.leaflet-control-scale-line {
  font-size: 11.5px;
  font-weight: 500;
  border: 2px solid #444 !important;
  border-top: none !important;
  margin: 4px 0 2px 0 !important;
  padding: 0 2px;
}

/* Center text */
.leaflet-control-scale-section {
  text-align: center;
}