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

.toast-wrap{

    position:fixed;

    top:24px;

    right:24px;

    z-index:9999;

    display:flex;

    flex-direction:column;

    gap:14px;

    pointer-events:none;

}

.toast{

    display:flex;

    align-items:flex-start;

    gap:14px;

    width:min(360px,calc(100vw - 48px));

    padding:18px 20px;

    border-radius:18px;

    background:#fff;

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

    border:1px solid var(--line);

    pointer-events:auto;

    overflow:hidden;

    position:relative;

    transform:translateX(420px);

    opacity:0;

    animation:

        toastIn .5s cubic-bezier(.34,1.56,.64,1) forwards,

        toastOut .4s ease forwards;

    animation-delay:0s,4.6s;

}

.toast::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    height:100%;

    width:5px;

}

.toast.success::before{

    background:linear-gradient(
        180deg,
        var(--purple),
        var(--blue)
    );

}

.toast.error::before{

    background:linear-gradient(
        180deg,
        var(--red),
        #F97316
    );

}

.toast-icon{

    flex-shrink:0;

    width:38px;

    height:38px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

}

.toast.success .toast-icon{

    background:var(--purple-light);

    color:var(--purple);

}

.toast.error .toast-icon{

    background:var(--red-light);

    color:var(--red);

}

.toast-body{

    flex:1;

    min-width:0;

}

.toast-body strong{

    display:block;

    margin-bottom:4px;

    font-family:"Fraunces",serif;

    font-size:16px;

    color:var(--navy);

}

.toast-body p{

    margin:0;

    color:var(--slate);

    font-size:13px;

    line-height:1.6;

}

.toast-close{

    flex-shrink:0;

    width:26px;

    height:26px;

    border:none;

    background:var(--mist);

    color:var(--fog);

    border-radius:50%;

    font-size:14px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.2s;

}

.toast-close:hover{

    background:var(--red-light);

    color:var(--red);

}

@keyframes toastIn{

    to{

        transform:translateX(0);

        opacity:1;

    }

}

@keyframes toastOut{

    from{

        transform:translateX(0);

        opacity:1;

    }

    to{

        transform:translateX(420px);

        opacity:0;

    }

}

@media(max-width:600px){

    .toast-wrap{

        top:auto;

        bottom:20px;

        right:16px;

        left:16px;

    }

    .toast{

        width:100%;

        transform:translateY(120px);

    }

    @keyframes toastIn{

        to{

            transform:translateY(0);

            opacity:1;

        }

    }

    @keyframes toastOut{

        from{

            transform:translateY(0);

            opacity:1;

        }

        to{

            transform:translateY(120px);

            opacity:0;

        }

    }

}