/* ===========================================
   NOTIFICATIONS
   =========================================== */
.notification {
  position: fixed;
  top: 100px;
  right: 20px;
  background: var(--secondary);
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius);
  padding: 16px 20px;
  box-shadow: var(--shadow);
  transform: translateX(400px);
  transition: transform 0.3s ease;
  z-index: 1002;
  max-width: 320px;
}

.notification.show {
  transform: translateX(0);
}

.notification.success {
  border-left: 4px solid var(--success);
}

.notification.error {
  border-left: 4px solid var(--error);
}