/* Map and Leaflet Styles */
#map {
  height: 100vh;
  width: 100%;
  background: radial-gradient(ellipse at center, #e1f5fe 0%, #81d4fa 30%, #4fc3f7 60%, #29b6f6 100%);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

/* Custom Leaflet enhancements */
.leaflet-container {
  font-family: inherit;
  background: radial-gradient(ellipse at center, #e1f5fe 0%, #81d4fa 30%, #4fc3f7 60%, #29b6f6 100%) !important;
  z-index: 1;
}

/* Add subtle animated waves effect */
.leaflet-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
  animation: waves 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes waves {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

.leaflet-control-zoom {
  border: none !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(248,250,252,0.9)) !important;
  backdrop-filter: blur(20px) !important;
}

.leaflet-control-zoom a {
  background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(248,250,252,0.85)) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #1e293b !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  backdrop-filter: blur(15px) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

.leaflet-control-zoom a:hover {
  background: linear-gradient(145deg, #ffffff, #f1f5f9) !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255,255,255,0.8) !important;
  color: #0ea5e9 !important;
}

/* Water areas styling */
.leaflet-layer {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Enhanced touch device optimizations */
.leaflet-container {
  -webkit-tap-highlight-color: transparent;
  /* Ensure touch events are not blocked */
  pointer-events: auto !important;
  /* Better touch responsiveness */
  touch-action: pan-x pan-y zoom-pinch;
  /* Prevent text selection on touch */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.leaflet-container .leaflet-interactive {
  cursor: pointer;
  /* Ensure interactive elements receive touch events */
  pointer-events: auto !important;
  /* Optimize touch handling for interactive elements */
  touch-action: manipulation;
  /* Increase minimum touch target size for accessibility */
  min-width: 44px;
  min-height: 44px;
}

/* Ensure country layers are interactive with proper touch handling */
.leaflet-container svg g {
  pointer-events: auto !important;
  /* Allow touch manipulation for countries */
  touch-action: manipulation;
}

.leaflet-container svg g path {
  pointer-events: auto !important;
  cursor: pointer;
  /* Ensure paths respond to touch */
  touch-action: manipulation;
  /* Add subtle transition for visual feedback */
  transition: fill-opacity 0.1s ease;
}

/* Touch device specific optimizations */
@media (hover: none) and (pointer: coarse) {
  .leaflet-container .leaflet-interactive {
    /* Larger touch targets on touch devices */
    min-width: 48px;
    min-height: 48px;
  }
  
  .leaflet-container svg g path {
    /* Slightly larger stroke for better touch detection */
    stroke-width: 2;
  }
}