@keyframes wpjs-toast-in {
from { opacity: 0; transform: translateY(-12px); }
to   { opacity: 1; transform: translateY(0); }
}
.notification_wrapper {
position: fixed;
margin: 0;
padding: 0;
top: 0;
display: grid;
justify-content: center;
border: 0;
width: 100%;
height: 0;
z-index: 2147483647;
background-color: transparent;
.notification {
position: relative;
top: 60px;
background-color: #ffffff;
color: #0f172a;
border: 1px solid #e2e8f0;
border-left-width: 4px;
border-radius: 10px;
box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15),
0 4px 10px -2px rgba(15, 23, 42, 0.08);
padding: 14px 18px 14px 22px;
font-size: 14px;
line-height: 1.4;
min-width: 280px;
max-width: min(420px, calc(100vw - 32px));
animation: wpjs-toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1); &.info    { border-left-color: #2563eb; }
&.success { border-left-color: #16a34a; }
&.error   { border-left-color: #dc2626; }
&.warning { border-left-color: #d97706; }
}
}
[dir="rtl"] .notification_wrapper .notification {
border-left-width: 1px;
border-right-width: 4px;
padding: 14px 22px 14px 18px;
&.info    { border-right-color: #2563eb; border-left-color: #e2e8f0; }
&.success { border-right-color: #16a34a; border-left-color: #e2e8f0; }
&.error   { border-right-color: #dc2626; border-left-color: #e2e8f0; }
&.warning { border-right-color: #d97706; border-left-color: #e2e8f0; }
}
@media (prefers-reduced-motion: reduce) {
.notification_wrapper .notification { animation: none; }
}