/* Notification container styling */
#notificationContainer {
  position: fixed;
  top: 120px; /* Moved down to avoid blocking session-invalid-banner and refresh button */
  left: 50%; /* Adjust horizontal positioning */
  z-index: 9999; /* Lower than session-invalid-banner (99999) */
  display: flex;
  flex-direction: column;
  gap: 12px;
  width:80%;
  transform:translate(-50%, 0); /* Remove vertical centering to use top positioning */
}

/* Default notification styling */
.notification {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 18px;
  color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.3s ease-out;
  text-align:center;
  z-index:1002;
}

/* Notification types */
.notification.addFoodInfo {
  background-color: #0d9488; /* Teal color - positive but not error-like */
  color: white; /* Ensure text is visible */
  border-left: 4px solid #14b8a6; /* Lighter teal accent */
}

/* Removal notification (previously missing) */
.notification.removeFoodInfo {
  background-color: #555; /* Neutral dark gray */
  color: #fff;
  border-left: 6px solid #f44336; /* Red accent to imply removal */
}

.notification.info {
  background-color: #2196f3; /* Blue for general info */
  color: white;
}

.notification.success {
  background-color: #4caf50; /* Green for success */
  color: white;
}

.notification.error {
  background-color: #f44336; /* Red for errors */
  color: white;
}