/* Hide content but not the spinner */
body:not(.styles-loaded) > *:not(#initial-loader) {
    opacity: 0;
}

body {
    transition: opacity 0.3s ease-in;
}

body.styles-loaded {
    opacity: 1;
}

body.styles-loaded > * {
    opacity: 1;
}

/* Ensure initial loader is always visible */
#initial-loader {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s ease-out;
}

#initial-loader.loader-fading {
    opacity: 0 !important;
}

#initial-loader.loader-hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Make spinner visible even when body is hidden */
body .preloader.loading-active {
    opacity: 1 !important;
}

.app-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 18px;
    color: #666;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

body.styles-loaded .app-loading {
    opacity: 0;
    pointer-events: none;
}

.loading-dots::after {
    content: '';
    animation: loading-dots 1.5s infinite;
}

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

/* Application loading spinner - theme-based */
.preloader {
    display: none !important;
}

.preloader.loading-active {
    display: flex !important;
}

body.styles-loaded .preloader {
    display: none !important;
}

/* Make spinner visible even when body is hidden */
body .preloader.loading-active {
    opacity: 1 !important;
}

/* Ensure spinner dots are visible */
body .preloader.loading-active .spinner-dots {
    display: flex !important;
}

body .preloader.loading-active .spinner-text {
    display: block !important;
}