@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;
}