/*==================================================
    TOAST CONTAINER
==================================================*/

.toast-container{

    position:fixed;

    top:20px;

    right:20px;

    width:360px;

    display:flex;

    flex-direction:column;

    gap:15px;

    z-index:99999;

    pointer-events:none;

}

/*==================================================
    TOAST
==================================================*/

.toast{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:18px;

    border-radius:16px;

    background:#ffffff;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

    border-left:5px solid #111;

    animation:toastIn .35s ease;

    pointer-events:auto;

}

.toast.success{

    border-left-color:#22c55e;

}

.toast.error{

    border-left-color:#ef4444;

}

.toast.warning{

    border-left-color:#f59e0b;

}

.toast.info{

    border-left-color:#3b82f6;

}

/*==================================================
    ICON
==================================================*/

.toast-icon{

    font-size:22px;

    margin-top:2px;

}

.toast.success .toast-icon{

    color:#22c55e;

}

.toast.error .toast-icon{

    color:#ef4444;

}

.toast.warning .toast-icon{

    color:#f59e0b;

}

.toast.info .toast-icon{

    color:#3b82f6;

}

/*==================================================
    CONTENT
==================================================*/

.toast-content{

    flex:1;

}

.toast-title{

    font-size:15px;

    font-weight:700;

    margin-bottom:4px;

}

.toast-message{

    font-size:14px;

    color:#666;

    line-height:1.5;

}

/*==================================================
    CLOSE
==================================================*/

.toast-close{

    cursor:pointer;

    border:none;

    background:none;

    font-size:18px;

    color:#999;

}

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

.toast-progress{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:4px;

    background:#111;

    animation:progress 4s linear forwards;

}

.toast.success .toast-progress{

    background:#22c55e;

}

.toast.error .toast-progress{

    background:#ef4444;

}

.toast.warning .toast-progress{

    background:#f59e0b;

}

.toast.info .toast-progress{

    background:#3b82f6;

}

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

@keyframes toastIn{

    from{

        opacity:0;

        transform:translateX(100%);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes toastOut{

    to{

        opacity:0;

        transform:translateX(120%);

    }

}

@keyframes progress{

    from{

        width:100%;

    }

    to{

        width:0;

    }

}

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

@media(max-width:600px){

    .toast-container{

        left:15px;

        right:15px;

        width:auto;

    }

}