/* 1. Keyframes: Define the animation steps */
@keyframes pulse {
  0% {
    opacity: 1; /* Start fully visible */
  }
  50% {
    opacity: 0.5; /* Fade to 50% transparency */
  }
  100% {
    opacity: 1; /* Fade back to fully visible */
  }
}

/* 2. The class to apply when the loop is running */
.is-loading {
  animation: pulse 1s infinite alternate; /* Apply the pulse animation */
  /* - pulse: The name of the @keyframes rule
     - 1s: Duration of one animation cycle (1 second)
     - infinite: Makes it repeat forever
     - alternate: Makes it transition smoothly back and forth (0% -> 100% -> 0%)
  */
  
  /* Optional: Change the button color while loading for a better visual cue */
  background-color: #3498db !important; /* A noticeable blue */
  color: white !important;
  border-color: #2980b9 !important;
}