/* =========================================================
   YAQEEN — App Loading Screen
   ========================================================= */

.yaqeen-loading{
    position:fixed;
    inset:0;
    z-index:99999;

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

    background:#ffffff;

    opacity:1;
    visibility:visible;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.yaqeen-loading.is-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.yaqeen-loading-inner{
    width:100%;
    max-width:300px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;
}

/* Logo */

.yaqeen-loading-logo{
    width:76px;
    height:76px;

    display:grid;
    place-items:center;

    margin-bottom:18px;

    border-radius:24px;

    background:#20aec8;
    color:#fff;

    font-family:inherit;
    font-size:39px;
    line-height:1;

    box-shadow:0 12px 30px rgba(32,174,200,.16);
}

/* Name */

.yaqeen-loading-name{
    margin:0;

    color:#123b4a;

    font-size:29px;
    line-height:1.2;
    font-weight:900;

    letter-spacing:-.5px;
}

.yaqeen-loading-en{
    margin-top:5px;

    color:#20aec8;

    font-size:10px;
    font-weight:800;

    letter-spacing:3px;
    direction:ltr;
}

/* Loading line */

.yaqeen-loading-line{
    width:90px;
    height:3px;

    margin-top:27px;

    overflow:hidden;

    border-radius:10px;

    background:#e8f4f6;
}

.yaqeen-loading-line::after{
    content:"";

    display:block;

    width:35%;
    height:100%;

    border-radius:10px;

    background:#20aec8;

    animation:yaqeen-loading-progress 1.15s ease-in-out infinite;
}

@keyframes yaqeen-loading-progress{
    0%{
        transform:translateX(-280%);
    }

    50%{
        transform:translateX(120%);
    }

    100%{
        transform:translateX(280%);
    }
}

/* Small text */

.yaqeen-loading-status{
    margin-top:13px;

    color:#9aadb3;

    font-size:10px;
    font-weight:600;
}

/* Mobile */

@media (max-width:520px){

    .yaqeen-loading-logo{
        width:70px;
        height:70px;
        border-radius:22px;
        font-size:35px;
    }

    .yaqeen-loading-name{
        font-size:27px;
    }
}

@media (prefers-reduced-motion:reduce){

    .yaqeen-loading,
    .yaqeen-loading-line::after{
        transition:none;
        animation:none;
    }
}

/* =========================================================
   FINAL — FULL PHONE SCREEN LOADING
   ========================================================= */

.yaqeen-loading{
    position:fixed !important;

    top:0 !important;
    right:auto !important;
    bottom:auto !important;
    left:0 !important;

    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;

    max-width:none !important;
    max-height:none !important;

    margin:0 !important;
    padding:
        env(safe-area-inset-top)
        env(safe-area-inset-right)
        env(safe-area-inset-bottom)
        env(safe-area-inset-left) !important;

    box-sizing:border-box !important;

    overflow:hidden !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    background:#fff !important;
}

.yaqeen-loading-inner{
    width:min(100% - 40px, 320px) !important;
    max-width:320px !important;
}

@media (max-width:520px){

    .yaqeen-loading{
        width:100vw !important;
        min-width:100vw !important;
        height:100dvh !important;
        min-height:100dvh !important;
    }

    .yaqeen-loading-inner{
        width:calc(100vw - 40px) !important;
        max-width:320px !important;
    }
}