/* Button styling */
.view-map-button {
  background-color: #0082B7 !important;
  border-color: #0082B7 !important;
  color: white !important;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  text-decoration: none;
  font-size: 14px !important; /* Smaller text */
  line-height: 1.5 !important;
  height: auto !important;
  display: inline-block;
  vertical-align: middle;
}
.view-map-button:hover {
  background-color: #006a96 !important; /* Darker shade on hover */
  border-color: #006a96 !important;
  color: white !important;
  text-decoration: none;
}
/* Match the height of the dropdowns */
.view-filters .view-map-button {
  height: 48px !important; /* Adjust this value to match your dropdowns exactly */
  padding: 0.66rem 1rem !important;
  font-size: 16px !important;
}
/* Modal styling */
.teams-map-dialog {
  max-width: 95vw !important;
  z-index: 10000 !important; /* High z-index to appear above header */
}

/* Modal overlay (backdrop) */
.ui-widget-overlay {
  z-index: 9999 !important; /* Just below the dialog */
  background: rgba(0, 0, 0, 0.5) !important; /* Semi-transparent black overlay */
}

.teams-map-dialog .ui-dialog-content {
  padding: 15px;
  overflow: auto;
}
.teams-map-modal-content {
  width: 100%;
  min-height: 500px;
  position: relative;
}
/* Ensure map displays properly */
.teams-map-modal-content .view {
  width: 100%;
}

/* Water wave loader */
.teams-map-modal-content::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border-radius: 50%;
  background: #0082B7;
  opacity: 0.6;
  animation: wave 2s ease-in-out infinite;
  z-index: 1000;
}

.teams-map-modal-content::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border-radius: 50%;
  background: #0082B7;
  opacity: 0.4;
  animation: wave 2s ease-in-out infinite;
  animation-delay: 1s;
  z-index: 999;
}

.teams-map-modal-content.map-loaded::before,
.teams-map-modal-content.map-loaded::after {
  display: none;
}

@keyframes wave {
  0% {
    transform: scale(0.5);
    opacity: 0.6;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Reduce flash of unzoomed map */
.teams-map-dialog .leaflet-container {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.teams-map-dialog .leaflet-container.map-ready {
  opacity: 1;
}

/* Fix close button */
.teams-map-dialog .ui-dialog-titlebar-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0 !important;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 10px !important;
  top: 10px !important;
  z-index: 10001 !important; /* Ensure close button is clickable */
}
.teams-map-dialog .ui-dialog-titlebar-close .ui-icon {
  display: none; /* Hide the broken icon */
}
/* Create a proper X using CSS */
.teams-map-dialog .ui-dialog-titlebar-close:before,
.teams-map-dialog .ui-dialog-titlebar-close:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background-color: #333;
}
.teams-map-dialog .ui-dialog-titlebar-close:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.teams-map-dialog .ui-dialog-titlebar-close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.teams-map-dialog .ui-dialog-titlebar-close:hover:before,
.teams-map-dialog .ui-dialog-titlebar-close:hover:after {
  background-color: #000;
}
/* Alternative: Use a text X */
.teams-map-dialog .ui-dialog-titlebar-close span {
  display: none;
}
.teams-map-dialog .ui-dialog-titlebar-close {
  text-align: center;
  line-height: 20px;
  font-size: 20px;
  font-weight: bold;
}

/* Triple wave ripples loader */
.teams-map-modal-content {
  position: relative;
}

.teams-map-modal-content::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: #0082B7;
  box-shadow: 
    0 0 0 0 rgba(0, 130, 183, 0.6),
    0 0 0 20px rgba(0, 130, 183, 0.4),
    0 0 0 40px rgba(0, 130, 183, 0.2);
  animation: ripple 2s ease-out infinite;
  z-index: 1000;
}

.teams-map-modal-content.map-loaded::before {
  display: none;
}

@keyframes ripple {
  0% {
    box-shadow: 
      0 0 0 0 rgba(0, 130, 183, 0.6),
      0 0 0 0 rgba(0, 130, 183, 0.4),
      0 0 0 0 rgba(0, 130, 183, 0.2);
  }
  100% {
    box-shadow: 
      0 0 0 20px rgba(0, 130, 183, 0),
      0 0 0 40px rgba(0, 130, 183, 0),
      0 0 0 60px rgba(0, 130, 183, 0);
  }
}

/* Hide default Drupal AJAX loader for the map button */
.view-map-button ~ .ajax-progress {
  display: none !important;
}

.view-map-button.is-active ~ .ajax-progress {
  display: none !important;
}

/* Alternative: hide all ajax progress in the exposed form if needed */
.view-filters .ajax-progress {
  display: none !important;
}