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

.toast{

    position:fixed;

    right:30px;

    bottom:30px;

    width:380px;

    max-width:calc(100vw - 40px);

    background:#ffffff;

    border-radius:20px;

    box-shadow:0 20px 45px rgba(0,0,0,.18);

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:22px;

    z-index:9999;

    opacity:0;

    visibility:hidden;

    transform:translateY(40px);

    transition:.35s ease;

}

.toast.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.toast__icon{

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    font-size:1.5rem;

    font-weight:bold;

}

.toast__content{

    flex:1;

}

.toast__content h4{

    margin:0 0 8px;

    font-size:1.1rem;

    color:#1F1F1F;

}

.toast__content p{

    margin:0;

    line-height:1.6;

    color:#666;

    font-size:.95rem;

}

.toast button{

    border:none;

    background:none;

    cursor:pointer;

    font-size:1.5rem;

    color:#999;

    transition:.3s;

    padding:0;

}

.toast button:hover{

    color:#222;

}

/*==============================
SUCCESS
==============================*/

.toast.success{

    border-left:6px solid #2F9E44;

}

.toast.success .toast__icon{

    background:#EAF8EE;

    color:#2F9E44;

}

.toast.success .toast__icon::before{

    content:"✓";

}

/*==============================
ERROR
==============================*/

.toast.error{

    border-left:6px solid #D6336C;

}

.toast.error .toast__icon{

    background:#FCEAF0;

    color:#D6336C;

}

.toast.error .toast__icon::before{

    content:"!";

}

/*==============================
INFO
==============================*/

.toast.info{

    border-left:6px solid #6B6E4A;

}

.toast.info .toast__icon{

    background:#ECEBDD;

    color:#6B6E4A;

}

.toast.info .toast__icon::before{

    content:"i";

}

/*==============================
RESPONSIVE
==============================*/

@media (max-width:768px){

    .toast{

        left:15px;

        right:15px;

        bottom:15px;

        width:auto;

        padding:18px;

    }

    .toast__icon{

        width:46px;

        height:46px;

        font-size:1.3rem;

    }

    .toast__content h4{

        font-size:1rem;

    }

    .toast__content p{

        font-size:.9rem;

    }

}