/* ==========================================
   MANGO TOAST ENGINE
========================================== */

.mango-toast-container{

    position:fixed;

    top:22px;

    left:50%;

    transform:translateX(-50%);

    width:min(92vw,420px);

    display:flex;

    flex-direction:column;

    gap:14px;

    z-index:100000;

    pointer-events:none;

}

.mango-toast{

    display:flex;

    align-items:center;

    gap:14px;

    overflow:hidden;

    border-radius:22px;

    padding:15px 18px;

    color:#fff;

    backdrop-filter:blur(20px);

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

    border:1px solid rgba(255,255,255,.16);

    background:rgba(25,25,25,.70);

    box-shadow:

        0 12px 40px rgba(0,0,0,.35),

        inset 0 1px rgba(255,255,255,.08);

    transform:translateY(-25px) scale(.92);

    opacity:0;

    transition:

        transform .30s cubic-bezier(.22,1,.36,1),

        opacity .30s ease;

}

.mango-toast.show{

    opacity:1;

    transform:

        translateY(0)

        scale(1);

}
/* ==========================================
   TOAST CONTENT
========================================== */

.toast-icon{

    width:46px;

    height:46px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

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

    border:1px solid rgba(255,255,255,.10);

}

.toast-content{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:10px;

    min-width:0;

}

.toast-message{

    font-size:15px;

    font-weight:600;

    line-height:1.45;

    word-break:break-word;

}

.toast-progress{

    width:100%;

    height:4px;

    border-radius:999px;

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

    transform-origin:left center;

}
/* ==========================================
   TOAST THEMES
========================================== */

.mango-toast.success{

    border-color:rgba(0,255,120,.30);

}

.mango-toast.success .toast-icon{

    background:rgba(0,255,120,.16);

    color:#55ff9d;

}

.mango-toast.success .toast-progress{

    background:#2bff88;

}

.mango-toast.error{

    border-color:rgba(255,70,70,.30);

}

.mango-toast.error .toast-icon{

    background:rgba(255,70,70,.16);

    color:#ff7070;

}

.mango-toast.error .toast-progress{

    background:#ff5555;

}

.mango-toast.warning{

    border-color:rgba(255,190,0,.30);

}

.mango-toast.warning .toast-icon{

    background:rgba(255,190,0,.16);

    color:#ffd65a;

}

.mango-toast.warning .toast-progress{

    background:#ffc83d;

}

.mango-toast.info{

    border-color:rgba(255,255,255,.20);

}

.mango-toast.info .toast-progress{

    background:#ffffff;

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

@media (max-width:640px){

    .mango-toast-container{

        top:14px;

        width:94vw;

    }

    .mango-toast{

        padding:14px;

        border-radius:18px;

    }

    .toast-icon{

        width:40px;

        height:40px;

        font-size:18px;

    }

    .toast-message{

        font-size:14px;

    }

}