.notification {
  pointer-events: auto !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  max-width: 384px;
  width: 100%;
  transition: all 0.3s ease-in-out;
  margin-bottom: 0.5rem;
}

.notification.show {
  transform: translateX(0) !important;
  opacity: 1 !important;
}

.notification.hide {
  transform: translateX(100%) !important;
  opacity: 0 !important;
}

.notification-progress {
  height: 4px;
  background-color: currentColor;
  opacity: 0.2;
  transform-origin: left;
  transition: width 0.05s ease;
}

#notification-container {
  position: fixed !important;
  top: 1rem !important;
  right: 1rem !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  max-width: 384px;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}