/* =========================================================
   STUDIO ART ESSENTIEL
   PROCESSING OVERLAY V2
========================================================= */

/* =========================================================
   OVERLAY
========================================================= */

.ae-processing-overlay{

    position:fixed;

    inset:0;

    z-index:999999;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:
    rgba(255,255,255,0.78);

    backdrop-filter:
    blur(10px);

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

    opacity:0;

    visibility:hidden;

    transition:
    all 0.28s ease;

}

.ae-processing-overlay.ae-active{

    opacity:1;

    visibility:visible;

}

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

.ae-processing-box{

    width:100%;

    max-width:420px;

    background:#ffffff;

    border:1px solid #dde6ef;

    border-radius:5px;

    box-shadow:
    0 18px 45px rgba(15,23,42,0.10);

    padding:40px 35px;

    text-align:center;

    position:relative;

    overflow:hidden;

}

/* =========================================================
   TOP LIGHT
========================================================= */

.ae-processing-box::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:
    linear-gradient(
        90deg,
        #0b84d8,
        #3ba7f5,
        #0b84d8
    );

    background-size:200% 100%;

    animation:
    aeProcessingBar 2s linear infinite;

}

/* =========================================================
   SPINNER
========================================================= */

.ae-processing-spinner{

    width:68px;

    height:68px;

    margin:0 auto 25px auto;

    position:relative;

}

.ae-processing-spinner::before{

    content:'';

    position:absolute;

    inset:0;

    border-radius:50%;

    border:3px solid
    rgba(11,132,216,0.12);

}

.ae-processing-spinner::after{

    content:'';

    position:absolute;

    inset:0;

    border-radius:50%;

    border:3px solid transparent;

    border-top-color:#0b84d8;

    border-right-color:#0b84d8;

    animation:
    aeProcessingSpin 0.9s linear infinite;

}

/* =========================================================
   INNER DOT
========================================================= */

.ae-processing-dot{

    position:absolute;

    top:50%;
    left:50%;

    width:10px;
    height:10px;

    margin-left:-5px;
    margin-top:-5px;

    border-radius:50%;

    background:#0b84d8;

    animation:
    aeProcessingPulse 1.6s ease infinite;

}

/* =========================================================
   TITLE
========================================================= */

.ae-processing-title{

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

    font-size:24px;

    font-weight:600;

    color:#111827;

    margin-bottom:10px;

}

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

.ae-processing-text{

    font-size:15px;

    line-height:1.6;

    color:#6b7280;

    margin-bottom:22px;

}

/* =========================================================
   STATUS
========================================================= */

.ae-processing-status{

    font-size:14px;

    color:#0b84d8;

    font-weight:600;

    min-height:22px;

}

/* =========================================================
   PROGRESS
========================================================= */

.ae-processing-progress{

    width:100%;

    height:6px;

    background:#eef4fa;

    border-radius:999px;

    overflow:hidden;

    margin-top:28px;

}

.ae-processing-progress-bar{

    width:0%;

    height:100%;

    background:
    linear-gradient(
        90deg,
        #0b84d8,
        #3ba7f5
    );

    border-radius:999px;

    transition:
    width 0.25s ease;

}

/* =========================================================
   FLOATING LIGHT
========================================================= */

.ae-processing-light{

    position:absolute;

    width:160px;
    height:160px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(11,132,216,0.10),
        transparent 70%
    );

    pointer-events:none;

}

.ae-processing-light.light-1{

    top:-60px;
    right:-60px;

}

.ae-processing-light.light-2{

    bottom:-70px;
    left:-70px;

}

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

@keyframes aeProcessingSpin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes aeProcessingPulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.35);

        opacity:0.6;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

@keyframes aeProcessingBar{

    0%{
        background-position:0% 50%;
    }

    100%{
        background-position:200% 50%;
    }

}

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

@media(max-width:640px){

    .ae-processing-box{

        padding:30px 22px;

    }

    .ae-processing-title{

        font-size:20px;

    }

    .ae-processing-text{

        font-size:14px;

    }

}