/* ============================================================
   GETACO UNIVERSAL LOADER
============================================================ */

#universalLoader {

    position: fixed;

    inset: 0;

    z-index: 999999;

    display: flex;

    align-items: center;
    justify-content: center;

    background: rgba(248, 250, 252, 0.72);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;

    cursor: wait;

}


/* ============================================================
   ACTIVE
============================================================ */

#universalLoader.active {

    opacity: 1;

    visibility: visible;

}


/* ============================================================
   LOADER BOX
============================================================ */

.loader-box {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-width: 190px;

    padding: 28px 30px 24px;

    background: rgba(255, 255, 255, .96);

    border: 1px solid rgba(15, 23, 42, .07);

    border-radius: 20px;

    box-shadow:
        0 25px 60px rgba(15, 23, 42, .14),
        0 8px 20px rgba(15, 23, 42, .06);

    transform: translateY(8px) scale(.96);

    transition:
        transform .3s cubic-bezier(.22, .61, .36, 1);

}


/* Active box animation */

#universalLoader.active .loader-box {

    transform:
        translateY(0)
        scale(1);

}


/* ============================================================
   LOGO AREA
============================================================ */

.loader-logo-wrap {

    position: relative;

    width: 68px;
    height: 68px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

}


/* ============================================================
   ANIMATED RING
============================================================ */

.loader-ring {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    border: 3px solid #e2e8f0;

    border-top-color: #0f172a;

    border-right-color: #334155;

    animation:
        getacoLoaderSpin 1s linear infinite;

}


/* ============================================================
   LOGO
============================================================ */

.loader-logo {

    width: 43px;
    height: 43px;

    object-fit: contain;

    border-radius: 12px;

    animation:
        getacoLoaderPulse 1.8s ease-in-out infinite;

}


/* ============================================================
   LOADING TEXT
============================================================ */

.loader-text {

    margin-top: 2px;

    color: #0f172a;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.4;

    text-align: center;

}


/* ============================================================
   BRAND
============================================================ */

.loader-brand {

    margin-top: 5px;

    color: #94a3b8;

    font-family: "Poppins", sans-serif;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: .6px;

}


/* ============================================================
   ANIMATIONS
============================================================ */

@keyframes getacoLoaderSpin {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}


@keyframes getacoLoaderPulse {

    0%,
    100% {

        transform: scale(1);

        opacity: 1;

    }

    50% {

        transform: scale(.92);

        opacity: .82;

    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

    .loader-box {

        min-width: 165px;

        padding: 24px 25px 21px;

        border-radius: 18px;

    }


    .loader-logo-wrap {

        width: 62px;
        height: 62px;

        margin-bottom: 16px;

    }


    .loader-logo {

        width: 39px;
        height: 39px;

    }


    .loader-text {

        font-size: 13px;

    }

}