/* ==========================================================================
   Universal Website Branded Loading Screen (Nutrify Dietcare)
   ========================================================================== */
body.loader-active {
    overflow: hidden !important;
    height: 100vh !important;
}

#web-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.7s ease;
    pointer-events: all;
}

/* Prevent skeleton-loader or any other CSS from corrupting or hiding the branded loader */
html.skeleton-loading #web-loader,
#web-loader {
    display: flex !important;
}

#web-loader img {
    opacity: 1 !important;
    filter: none !important;
    animation: none !important;
    visibility: visible !important;
}

#web-loader span {
    opacity: 1 !important;
    visibility: visible !important;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}

@keyframes loader-halo-pulse {
    0%, 100% {
        box-shadow: 0 25px 60px rgba(4, 120, 87, 0.16), 0 0 0 6px #ecfdf5, 0 0 0 12px rgba(16, 185, 129, 0.25);
    }
    50% {
        box-shadow: 0 30px 70px rgba(4, 120, 87, 0.25), 0 0 0 8px #d1fae5, 0 0 0 18px rgba(16, 185, 129, 0.2);
    }
}

.loader-image-wrapper {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 25px 60px rgba(4, 120, 87, 0.16), 0 0 0 6px #ecfdf5, 0 0 0 10px rgba(16, 185, 129, 0.25);
    border: 4px solid #ffffff;
    position: relative;
    transform: scale(0.85);
    opacity: 0;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
    will-change: transform, opacity;
}

.loader-image-wrapper.reveal {
    opacity: 1 !important;
    transform: scale(1) !important;
    animation: loader-halo-pulse 2s infinite ease-in-out !important;
}

.loader-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.2s;
}

.loader-text-wrapper.reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
}