.notification {
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  box-shadow: var(--shadow-lg);
  border: 1px solid;
  transition: all var(--duration-normal, 0.3s) ease-out;
}

.notification-icon {
  min-width: 20px;
  height: 20px;
}

.notification-icon i {
  color: currentColor !important;
}

.notification-success {
  background: var(--color-success-light, #dcfce7);
  color: var(--color-success-dark, #15803d);
  border-color: var(--color-success, #22c55e);
}

.notification-warning {
  background: var(--color-warning-light, #fef3c7);
  color: var(--color-warning-dark, #92400e);
  border-color: var(--color-warning, #f59e0b);
}

.notification-error {
  background: var(--color-danger-light, #fecaca);
  color: var(--color-danger-dark, #dc2626);
  border-color: var(--color-danger, #ef4444);
}

.notification-info {
  background: var(--color-primary-50, #f0f9ff);
  color: var(--color-primary-800, #1e40af);
  border-color: var(--color-primary-200, #bfdbfe);
}

/* Fallback colors if CSS variables are not available */
.notification-success {
  background: #dcfce7;
  color: #15803d;
  border-color: #22c55e;
}

.notification-warning {
  background: #fef3c7;
  color: #92400e;
  border-color: #f59e0b;
}

.notification-error {
  background: #fecaca;
  color: #dc2626;
  border-color: #ef4444;
}

.notification-info {
  background: #f0f9ff;
  color: #1e40af;
  border-color: #bfdbfe;
}

/* Animation for fade out */
.flash-messages-container .notification.opacity-0 {
  opacity: 0;
  transform: translateY(-10px);
}