/* ======================================================================
   PAGE LOADER - Loading Spinner for Better UX
   ====================================================================== */

/* Full-page loader overlay */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.page-loader.loaded {
    opacity: 0;
    visibility: hidden;
}

/* Spinner container */
.page-loader-spinner {
    text-align: center;
}

/* Custom spinner animation */
.page-loader-circle {
    width: 60px;
    height: 60px;
    border: 4px solid var(--c-primary-light, #f0e2d0);
    border-top-color: var(--c-primary, #fa7901);
    border-radius: 50%;
    animation: page-loader-spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes page-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Loading text */
.page-loader-text {
    color: var(--c-text-muted, #6b7280);
    font-size: 14px;
    font-weight: 500;
    margin-top: 12px;
}

/* Alternative: Use Bootstrap spinner */
.page-loader .spinner-border {
    width: 3rem;
    height: 3rem;
    color: var(--c-primary, #fa7901);
}

/* Progress dots animation */
.page-loader-dots {
    display: inline-block;
}

.page-loader-dots::after {
    content: '';
    animation: page-loader-dots 1.5s steps(4, end) infinite;
}

@keyframes page-loader-dots {
    0%, 20% {
        content: '';
    }
    40% {
        content: '.';
    }
    60% {
        content: '..';
    }
    80%, 100% {
        content: '...';
    }
}

/* Smooth content fade-in after loading */
.page-content {
    opacity: 0;
    animation: page-content-fade-in 0.4s ease forwards;
    animation-delay: 0.1s;
}

@keyframes page-content-fade-in {
    to {
        opacity: 1;
    }
}

/* Hide content until page is loaded */
body.loading .page-content {
    opacity: 0;
}

body.loaded .page-content {
    animation: page-content-fade-in 0.4s ease forwards;
}