/* =====================================
   GLOBAL TOAST SYSTEM
===================================== */

.toast-container{

    position:fixed;

    right:360px;
    bottom:24px;

    display:flex;
    flex-direction:column;

    gap:12px;

    z-index:999999;

    pointer-events:none;
}

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

.toast{

    position:relative;

    width:290px;

    display:flex;
    align-items:stretch;

    overflow:hidden;

    border-radius:8px;

    background:#050b18;

    border:
    1px solid rgba(255,255,255,.08);

    box-shadow:
    0 18px 45px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,255,255,.03);

    transform:
    translateX(120%);

    opacity:0;

    transition:
    transform .35s ease,
    opacity .35s ease;

    pointer-events:auto;
}

.toast.show{

    transform:
    translateX(0);

    opacity:1;
}

/* =====================================
   COLOR OVERLAY
===================================== */

.toast::before{

    content:'';

    position:absolute;

    top:0;
    left:0;
    bottom:0;

    width:55%;

    pointer-events:none;
}

/* =====================================
   ACCENT BAR
===================================== */

.toast-accent{

    width:5px;

    flex-shrink:0;
}

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

.toast-success{

    border-color:
    rgba(34,197,94,.22);
}

.toast-success .toast-accent{

    background:#22c55e;
}

.toast-success .toast-title{

    color:#4ade80;
}

.toast-success::before{

    background:
    linear-gradient(
        90deg,
        rgba(34,197,94,.55) 0%,
        rgba(34,197,94,.25) 20%,
        rgba(34,197,94,.10) 40%,
        rgba(34,197,94,0) 55%
    );
}

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

.toast-error{

    border-color:
    rgba(239,68,68,.22);
}

.toast-error .toast-accent{

    background:#ef4444;
}

.toast-error .toast-title{

    color:#f87171;
}

.toast-error::before{

    background:
    linear-gradient(
        90deg,
        rgba(239,68,68,.55) 0%,
        rgba(239,68,68,.25) 20%,
        rgba(239,68,68,.10) 40%,
        rgba(239,68,68,0) 55%
    );
}

/* =====================================
   WARNING
===================================== */

.toast-warning{

    border-color:
    rgba(245,158,11,.22);
}

.toast-warning .toast-accent{

    background:#f59e0b;
}

.toast-warning .toast-title{

    color:#fbbf24;
}

.toast-warning::before{

    background:
    linear-gradient(
        90deg,
        rgba(245,158,11,.55) 0%,
        rgba(245,158,11,.25) 20%,
        rgba(245,158,11,.10) 40%,
        rgba(245,158,11,0) 55%
    );
}

/* =====================================
   PURPLE (A2M)
===================================== */

.toast-purple{

    border-color:
    rgba(124,58,237,.25);
}

.toast-purple .toast-accent{

    background:#7c3aed;
}

.toast-purple .toast-title{

    color:#c084fc;
}

.toast-purple::before{

    background:
    linear-gradient(
        90deg,
        rgba(124,58,237,.60) 0%,
        rgba(124,58,237,.30) 20%,
        rgba(124,58,237,.12) 40%,
        rgba(124,58,237,0) 55%
    );
}

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

.toast-body{

    position:relative;

    z-index:2;

    flex:1;

    padding:14px 16px;
}

.toast-title{

    font-size:13px;

    font-weight:800;

    margin-bottom:4px;

    letter-spacing:.2px;
}

.toast-message{

    color:#d1d5db;

    font-size:12px;

    line-height:1.45;
}

/* =====================================
   TABLET
===================================== */

@media (max-width:1400px){

    .toast-container{

        right:320px;
    }

}

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

@media (max-width:980px){

    .toast-container{

        left:16px;
        right:16px;

        bottom:16px;
    }

    .toast{

        width:100%;
    }

}

/* =====================================
   MANITA
===================================== */

.toast-clickable{
    cursor:pointer;
}

.toast-clickable:hover{

    transform:
    translateX(0)
    translateY(-2px);

}