/**
 * Pre-Login Loader Styles
 * ========================
 * Animated loading overlay with 8-step rotation spinner
 * Matches ucLoader.css styling for consistency
 * 
 * Usage:
 * - Include this CSS file in your page
 * - Add the #loadingOverlay element to your page
 * - Show/hide via JavaScript: element.style.display = 'flex' / 'none'
 */

/* ==========================================================================
   Loader Container
   ========================================================================== */

#loadingOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 477px;
    padding: 152px;
    background: rgba(255, 255, 255, 1); /* Solid white background */
    display: none; /* Hidden by default, use flex to show */
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 99999 !important;
}

/* ==========================================================================
   Spinner Container
   ========================================================================== */

.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.loading-spinner svg {
    width: 67px;
    height: 67px;
    animation: trs-loader-spin 1s steps(8) infinite;
}

/* ==========================================================================
   Animation
   ========================================================================== */

/**
 * 8-step rotation animation
 * Each step rotates 45 degrees (360 / 8 = 45)
 * Using steps(8) makes the animation jump between positions
 * instead of smoothly rotating, creating the "growing" effect
 */
@keyframes trs-loader-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    #loadingOverlay {
        display: none !important;
    }
}