@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-spinner {
  animation: spin 1s linear infinite;
  display: inline-block;
  margin-right: 12px;
}

/* .grad-download-btn:disabled {
    background-color: #f9f9f9 !important;
    border-color: #ccc !important;
    color: #888 !important;
    cursor: not-allowed;
} */

/* Base state (how it looks normally) */
.grad-download-btn {
  transition: all 0.2s ease; /* Makes the color change smooth, not jerky */
}

/* Hover state (when the mouse is over it) */
.grad-download-btn:hover:not(:disabled) {
  background-color: #f0f0f0 !important; /* Slight grey tint */
  border-color: #bbb !important; /* Darker border */
  transform: translateY(-1px); /* Tiny lift effect */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Soft shadow */
}

/* Active state (the moment it is clicked) */
.grad-download-btn:active:not(:disabled) {
  background-color: #e8e8e8 !important;
  transform: translateY(0); /* Pushes back down */
}

/* Disabled state (while spinning) */
.grad-download-btn:disabled {
  cursor: not-allowed;
  background-color: #f9f9f9 !important;
  opacity: 0.7;
}

/* Makes the search button match your download buttons */
.search-submit-btn:hover {
  background-color: #ededed !important; /* Slightly darker grey */
  border-color: #bbb !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.search-submit-btn:active {
  background-color: #e8e8e8 !important;
  transform: translateY(1px);
}

/* Specific styling for the dashicon alignment */
.search-submit-btn .dashicons {
  margin-top: 2px; /* Fine-tuning the vertical alignment */
}

/* Standardizing the select box appearance */
select#course_id {
  outline: none;
  transition: border-color 0.2s;
}

select#course_id:focus {
  border-color: #aaa;
}