/* ============================================================================
 * FACILITY BOOKING - LOADING STATES & ANIMATIONS
 * File: public/css/facility-booking-loading.css
 * Version: 1.0.0
 * Created: Saturday, December 28, 2025
 * 
 * Purpose: Loading indicators and animations for facility booking UX
 * ============================================================================ */

/* Spinner Animation - Used in buttons and slot indicators */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Slot Loading Indicator - Overlay spinner on time slots */
.slot-loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    animation: spin 1s linear infinite;
    z-index: 10;
    pointer-events: none;
}

/* Loading State for Slots - Applied during async operations */
.time-slot.loading {
    opacity: 0.6;
    pointer-events: none;
    filter: grayscale(30%);
}

/* Button Loading State - Inline spinner in buttons */
button .spinner {
    display: inline-block;
    animation: spin 1s linear infinite;
    margin-right: 4px;
}

/* Success State - Temporary success feedback on buttons */
button.success-state {
    background-color: #4CAF50 !important;
    color: white;
}

/* Optimistic Update Animation - Smooth transitions during updates */
.time-slot {
    transition: all 0.3s ease;
}

.time-slot.optimistic-update {
    animation: pulseSuccess 0.5s ease;
}

@keyframes pulseSuccess {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* Modal Button States - Enhanced feedback in confirmation modals */
.modal-footer button:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.modal-footer button:disabled:hover {
    transform: none;
}

/* ============================================================================
 * USAGE NOTES
 * ============================================================================
 * 
 * The spinner animation is applied inline via style attribute:
 *   <span style="animation:spin 1s linear infinite;">⏳</span>
 * 
 * Slot indicators are created dynamically:
 *   <div class="slot-loading-indicator">⏳</div>
 * 
 * This file should be included in facility-booking-dashboard.html
 * ============================================================================ */