/* Custom styles for OpenStreetMap integration */

/* Custom marker styling */
.custom-marker {
  background: transparent !important;
  border: none !important;
}

.marker-pin {
  width: 30px;
  height: 42px;
  position: relative;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.marker-pin:after {
  content: '';
  width: 8px;
  height: 8px;
  margin: 8px 0 0 8px;
  background: rgba(255, 255, 255, 0.9);
  position: absolute;
  border-radius: 50%;
}

.marker-pin i {
  color: white;
  font-size: 16px;
  transform: rotate(45deg);
  z-index: 1;
}

/* Marker bounce animation */
.marker-bounce {
  animation: bounce 0.6s ease-in-out;
}

@keyframes bounce {
  0% { transform: translateY(0px) rotate(-45deg); }
  50% { transform: translateY(-10px) rotate(-45deg); }
  100% { transform: translateY(0px) rotate(-45deg); }
}

/* Marker hover effect */
.custom-marker:hover .marker-pin {
  transform: rotate(-45deg) scale(1.1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

/* Custom popup styling */
.leaflet-popup-content-wrapper {
  border-radius: 8px !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

.leaflet-popup-content {
  margin: 0 !important;
  padding: 0 !important;
}

.custom-popup .leaflet-popup-content-wrapper {
  background: white;
  border: none;
}

.custom-popup .leaflet-popup-tip {
  background: white;
}

.map-popup {
  font-family: inherit;
}

.popup-header h5 {
  font-weight: 600;
  margin: 0;
}

.popup-body p {
  font-size: 0.9rem;
  line-height: 1.4;
}

.popup-body .badge {
  font-size: 0.7rem;
}

/* Map container styling */
#locations-map {
  border: 2px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
}

/* Map controls styling */
.leaflet-control-zoom {
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.leaflet-control-zoom a {
  border-radius: 0 !important;
  font-size: 18px !important;
  line-height: 26px !important;
}

.leaflet-control-scale {
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 4px !important;
  padding: 2px 5px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.map-info-control {
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Attribution styling */
.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.8) !important;
  border-radius: 4px !important;
  font-size: 11px !important;
}

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

/* Loading spinner for map */
.map-loading {
  background: linear-gradient(45deg, #f8f9fa 25%, transparent 25%), 
              linear-gradient(-45deg, #f8f9fa 25%, transparent 25%), 
              linear-gradient(45deg, transparent 75%, #f8f9fa 75%), 
              linear-gradient(-45deg, transparent 75%, #f8f9fa 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  animation: loading-stripes 1s linear infinite;
}

@keyframes loading-stripes {
  0% { background-position: 0 0, 0 10px, 10px -10px, -10px 0px; }
  100% { background-position: 20px 20px, 20px 30px, 30px 10px, 10px 20px; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .marker-pin {
    width: 25px;
    height: 35px;
  }
  
  .marker-pin i {
    font-size: 14px;
  }
  
  .leaflet-popup-content-wrapper {
    min-width: 250px !important;
  }
  
  .popup-body p {
    font-size: 0.85rem;
  }
  
  .popup-body .badge {
    font-size: 0.65rem;
    padding: 0.2em 0.4em;
  }
}

/* Location card hover effects (enhanced) */
.card:hover {
  transition: all 0.3s ease;
}

/* Map full-screen mode button (optional enhancement) */
.leaflet-control-fullscreen {
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

.leaflet-control-fullscreen a {
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  text-decoration: none;
  color: #333;
}

/* Print styles */
@media print {
  #locations-map {
    height: 400px !important;
    page-break-inside: avoid;
  }
  
  .leaflet-control-container {
    display: none !important;
  }
}