#toast-container{
    position:fixed;
    top:20px;
    right:20px;
    z-index:9999;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.toast{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 18px;
    border-radius:10px;
    min-width:280px;
    border:1px solid;
    font-family:Arial;
    color:white;
    backdrop-filter: blur(8px);
    animation:toastSlide .25s ease;
}

.toast-icon{
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.toast-content strong{
    display:block;
    font-size:14px;
}

.toast-content span{
    font-size:13px;
    opacity:.85;
}

.toast.loading{
    background:#EDE4DB15;
    border-color:#EDE4DB;
}

.toast.success{
    background:#b8f18a15;
    border-color:#b8f18a;
}

.toast.error{
    background:#ff660015;
    border-color:#ff6600;
}

.spinner{
    width:18px;
    height:18px;
    border:2px solid rgba(255,255,255,0.3);
    border-top:2px solid white;
    border-radius:50%;
    animation:spin .8s linear infinite;
}

@keyframes spin{
    to{transform:rotate(360deg)}
}

@keyframes toastSlide{
    from{
        transform:translateX(120%);
        opacity:0;
    }
    to{
        transform:translateX(0);
        opacity:1;
    }
    
}
@keyframes toastFade {
    to {
        transform: translateX(120%);
        opacity: 0;
    }
}