/* ==========================================
Notification Toast
========================================== */

.notification-container{

position:fixed;

top:25px;

right:25px;

z-index:99999;

display:flex;

flex-direction:column;

gap:15px;

pointer-events:none;

}

.notification{

min-width:340px;

max-width:420px;

padding:18px 22px;

border-radius:16px;

background:#ffffff;

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

display:flex;

align-items:flex-start;

gap:15px;

transform:translateX(120%);

opacity:0;

transition:.35s ease;

pointer-events:auto;

border-left:5px solid #2563eb;

}

.notification.show{

transform:translateX(0);

opacity:1;

}

.notification.hide{

transform:translateX(120%);

opacity:0;

}

.notification-icon{

font-size:24px;

line-height:1;

margin-top:2px;

}

.notification-content{

flex:1;

}

.notification-title{

font-weight:700;

margin-bottom:3px;

}

.notification-message{

font-size:14px;

color:#64748b;

}

.notification-close{

background:none;

border:none;

font-size:18px;

cursor:pointer;

color:#94a3b8;

padding:0;

line-height:1;

}

.notification-success{

border-color:#16a34a;

}

.notification-success .notification-icon{

color:#16a34a;

}

.notification-error{

border-color:#dc2626;

}

.notification-error .notification-icon{

color:#dc2626;

}

.notification-warning{

border-color:#f59e0b;

}

.notification-warning .notification-icon{

color:#f59e0b;

}

.notification-info{

border-color:#2563eb;

}

.notification-info .notification-icon{

color:#2563eb;

}

@media(max-width:768px){

.notification-container{

left:15px;

right:15px;

top:15px;

}

.notification{

min-width:100%;

max-width:100%;

}

}