.toast-container{

    position:fixed;

    top:100px;

    right:20px;

    z-index:5000;

    display:flex;

    flex-direction:column;

    gap:14px;

}

/* TOAST */

.toast{

    min-width:300px;

    max-width:380px;

    padding:18px 20px;

    border-radius:18px;

    color:white;

    display:flex;

    align-items:flex-start;

    gap:14px;

    animation:
    toastIn 0.35s ease;

    backdrop-filter:blur(12px);

    border:
    1px solid rgba(255,255,255,0.08);

    box-shadow:
    var(--shadow-md);

}

/* ICON */

.toast-icon{

    font-size:18px;

    margin-top:2px;

}

/* CONTENT */

.toast-content h4{

    font-size:15px;

    margin-bottom:4px;

}

.toast-content p{

    font-size:13px;

    color:#e0e8ff;

    line-height:1.6;

}

/* TYPES */

.toast-success{

    background:
    rgba(0,210,106,0.16);

    border-left:
    4px solid var(--success);

}

.toast-error{

    background:
    rgba(255,82,82,0.16);

    border-left:
    4px solid var(--danger);

}

.toast-warning{

    background:
    rgba(255,193,7,0.16);

    border-left:
    4px solid var(--warning);

}

.toast-info{

    background:
    rgba(56,182,255,0.16);

    border-left:
    4px solid var(--primary);

}

/* ANIMATION */

@keyframes toastIn{

    from{

        opacity:0;

        transform:
        translateX(50px);

    }

    to{

        opacity:1;

        transform:
        translateX(0);

    }

}

/* MOBILE */

@media(max-width:768px){

    .toast-container{

        right:12px;

        left:12px;

        top:90px;

    }

    .toast{

        min-width:100%;

    }

}