@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);

    /* Default (info) — blue accent bar */
    &.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; }
}