/* =========================== TOAST =========================== */
 .toast{
     position:fixed;
     top:20px;
     right:20px;
     display:flex;
     align-items:flex-start;
     gap:14px;
     min-width:340px;
     max-width:420px;
     padding:16px 18px;
     border-radius:14px;
     color:#fff;
     box-shadow:0 14px 35px rgba(0,0,0,.20);
     z-index:99999;
     animation:toastShow .30s ease;
     overflow:hidden;
}
 .toast::before{
     content:"";
     position:absolute;
     left:0;
     top:0;
     bottom:0;
     width:5px;
     background:rgba(255,255,255,.35);
}
/* =========================== ICON =========================== */
 .toast > i{
     font-size:24px;
     margin-top:2px;
     flex-shrink:0;
}
/* =========================== CONTENT =========================== */
 .toast-content{
     flex:1;
}
 .toast-title{
     font-size:16px;
     font-weight:700;
     margin-bottom:4px;
}
 .toast-message{
     font-size:14px;
     line-height:1.5;
     opacity:.95;
}
/* =========================== CLOSE =========================== */
 .toast-close{
     width:34px;
     height:34px;
     display:flex;
     align-items:center;
     justify-content:center;
     border-radius:8px;
     cursor:pointer;
     flex-shrink:0;
     background:rgba(255,255,255,.18);
     transition:.25s;
}
 .toast-close:hover{
     background:rgba(255,255,255,.28);
}
 .toast-close i{
     font-size:16px;
}
/* =========================== COLORS =========================== */
 .toast-success{
     background:#f82b00;
}
 .toast-error{
     background:#c62828;
}
 .toast-warning{
     background:#f39c12;
}
 .toast-info{
     background:#3498db;
}
/* =========================== ANIMATION =========================== */
 @keyframes toastShow{
     from{
         opacity:0;
         transform:translateX(60px);
    }
     to{
         opacity:1;
         transform:translateX(0);
    }
}
 @keyframes toastHide{
     from{
         opacity:1;
         transform:translateX(0);
    }
     to{
         opacity:0;
         transform:translateX(60px);
    }
}
/* =========================== MOBILE =========================== */
 @media (max-width:576px){
     .toast{
         left:15px;
         right:15px;
         top:15px;
         min-width:auto;
         max-width:none;
    }
}