/* 1. The Glass Container */
html[data-load-mode="instant"] #page-loading-overlay {
    display: none !important;
}

.loader {
    position: relative;
    width: 40px;
    height: 80px;
    border: 4px solid #001760;
    border-top: none;
    border-radius: 0 0 25px 25px;
    background: transparent;
    margin: 20px auto;
}

/* 2. The Rim of the Tube */
.loader::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -8px;
    right: -8px;
    height: 6px;
    background: #001760;
    border-radius: 4px;
}

/* 3. The Wavy, Bubbling Liquid */
.loader::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 2px;
    right: 2px;
    border-radius: 0 0 18px 18px;

    /* REMOVED: background-color: #A6D1F0;
       We must remove the solid background so the transparent parts of our wave show through */

    /* Stacked Backgrounds: Bubbles -> Wave SVG -> Solid Liquid Base */
    background-image:
        /* Bubbles */
            radial-gradient(circle, #fff 2px, transparent 3px),
            radial-gradient(circle, #fff 1.5px, transparent 2px),
            radial-gradient(circle, #fff 1px, transparent 2px),
                /* The Wavy Top (Inline SVG for perfect pure CSS curves) */
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='10' viewBox='0 0 30 10'%3E%3Cpath d='M0,5 Q7.5,0 15,5 T30,5 L30,10 L0,10 Z' fill='%23A6D1F0'/%3E%3C/svg%3E"),
                /* The Solid Liquid Body */
            linear-gradient(#A6D1F0, #A6D1F0);

    /* Size each layer appropriately */
    background-size:
            20px 30px, 15px 25px, 10px 20px, /* bubbles */
            30px 10px, /* The wave is exactly 30px wide and 10px tall */
            100% calc(100% - 9px); /* Base fills the height, leaving the top 9px for the wave */

    /* Tell the wave to repeat horizontally, but keep the base static */
    background-repeat:
            repeat, repeat, repeat,
            repeat-x,
            no-repeat;

    /* Combine filling animation with the internal motion */
    animation:
            fillLiquid 1s ease-in-out forwards,
            liquidMotion 1s linear infinite;
}

/* --- Animations --- */

@keyframes fillLiquid {
    0% { height: 15%; }
    100% { height: 85%; }
}

/* We combine the bubble rise and the wave movement into one animation */
@keyframes liquidMotion {
    0% {
        background-position:
                8px 30px, 24px 25px, 32px 20px, /* bubbles start */
                0px 0px, /* wave starts at X=0 */
                0px 9px; /* base stays anchored below the wave */
    }
    100% {
        background-position:
                8px 0px, 24px 0px, 32px 0px, /* bubbles move up */
                30px 0px, /* wave moves right by EXACTLY its width (30px) to loop seamlessly */
                0px 9px; /* base stays anchored */
    }
}