/* Notification container styling */
#notificationContainer {
  position: fixed;
  top: 55px; /* Adjust vertical positioning */
  left: 50%; /* Adjust horizontal positioning */
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width:80%;
  transform:translate(-50%,-50%);
}

/* Default notification styling */
.notification {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 18px;
  color: white !important;
  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: #FFA726; /* Amber for food addition - warm and inviting */
  color: white !important; /* Ensure text is visible */
  font-weight: 500;
}

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

.notification.info {
  background-color: #2196f3; /* Blue for general info */
  color: white !important;
  font-weight: 500;
}

.notification.success {
  background-color: #4caf50; /* Green for success */
  color: white !important;
  font-weight: 500;
}

.notification.error {
  background-color: #f44336; /* Red for errors */
  color: white !important;
  font-weight: 500;
}

/* 确保所有通知内的文字和子元素都是白色 - 防止被其他样式覆盖（info类型除外） */
.notification:not(.info),
.notification:not(.info) *,
.notification:not(.info) font,
.notification:not(.info) span,
.notification:not(.info) div,
.notification:not(.info) p {
  color: white !important;
}

/* 针对每种通知类型再次强化白色文字（info类型除外，它使用深色文字） */
.notification.addFoodInfo,
.notification.addFoodInfo *,
.notification.removeFoodInfo,
.notification.removeFoodInfo *,
.notification.success,
.notification.success *,
.notification.error,
.notification.error * {
  color: white !important;
}