/* =============================================
   PRELOADER - Full screen logo + loading bar
   Works on both desktop and mobile
   ============================================= */

/* Preloader container - covers full screen */
#preloader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 9999999 !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Smooth fade out */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Fade-out state added by JS when page loads */
#preloader.fade-out {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Logo via background-image (more reliable on mobile than <img>) */
#preloader .preloader-logo {
    display: block !important;
    width: 200px !important;
    height: 110px !important;
    background-image: url('../images/DZ-logo.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin: 0 0 28px 0 !important;
    padding: 0 !important;
    animation: preloader-pulse 2s infinite ease-in-out;
}

/* Loading bar wrapper */
#preloader .loading-bar-container {
    display: block !important;
    width: 220px !important;
    height: 5px !important;
    background-color: #ebebeb !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* The animated green bar */
#preloader .loading-bar {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 0;
    height: 100% !important;
    background-color: #38B349 !important;
    border-radius: 10px !important;
    animation: preloader-loading 1.8s infinite ease-in-out;
}

/* Animations */
@keyframes preloader-pulse {
    0%   { transform: scale(1);    opacity: 0.85; }
    50%  { transform: scale(1.04); opacity: 1;    }
    100% { transform: scale(1);    opacity: 0.85; }
}

@keyframes preloader-loading {
    0%   { width: 0%;   left: 0;   }
    40%  { width: 60%;  left: 0;   }
    60%  { width: 80%;  left: 10%; }
    80%  { width: 60%;  left: 30%; }
    100% { width: 0%;   left: 100%;}
}

/* ---- Mobile adjustments ---- */
@media (max-width: 767px) {
    #preloader .preloader-logo {
        width: 160px !important;
        height: 90px !important;
    }

    #preloader .loading-bar-container {
        width: 180px !important;
    }
}