/* Waving Flag Styles */
.map-flag-container {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  /* Ensure flags are above the map but below tooltips if any */
}

.map-flag {
  position: absolute;
  width: 30px;
  height: 20px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  animation: wave 3s ease-in-out infinite;
  transform-origin: left center;
  /* Optional: Add a small pole */
  border-left: 2px solid #fff;
}

@keyframes wave {
  0% {
    transform: rotate(0deg) skewY(0deg);
  }

  25% {
    transform: rotate(5deg) skewY(2deg);
  }

  50% {
    transform: rotate(0deg) skewY(0deg);
  }

  75% {
    transform: rotate(-5deg) skewY(-2deg);
  }

  100% {
    transform: rotate(0deg) skewY(0deg);
  }
}

/* Ensure the animation container is relative for absolute positioning of flags */
#animation_container {
  position: relative !important;
}