.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notification {
  padding: 15px 20px;
  border-radius: 5px;
  color: white;
  min-width: 200px;
  max-width: 300px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  animation: slideIn 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification.success { background-color: #28a745; }
.notification.error { background-color: #dc3545; }
.notification.info { background-color: #17a2b8; }

.notification .close-btn {
  cursor: pointer;
  margin-left: 10px;
  font-size: 16px;
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

function showNotification(message, type = 'info', duration = 3000) {
  // Create notification element
  const notification = document.createElement('div');
  notification.className = `notification ${type}`;

  // Add message
  const messageSpan = document.createElement('span');
  messageSpan.textContent = message;
  notification.appendChild(messageSpan);

  // Add close button
  const closeBtn = document.createElement('span');
  closeBtn.className = 'close-btn';
  closeBtn.textContent = '×';
  closeBtn.onclick = () => removeNotification(notification);
  notification.appendChild(closeBtn);

  // Add to container
  const container = document.getElementById('notificationContainer');
  container.appendChild(notification);

  // Auto-remove after duration
  setTimeout(() => removeNotification(notification), duration);
}

function removeNotification(notification) {
  notification.style.animation = 'slideOut 0.3s ease';
  setTimeout(() => {
    if (notification.parentNode) {
      notification.parentNode.removeChild(notification);
    }
  }, 300);
}