/**
 * 购物车提醒位置修复
 * 将成功添加产品至购物车的提醒移动到页面顶部中央位置
 */

/* 购物车提醒容器 */
.cart-notification,
.add-to-cart-notification,
.product-added-notification,
.toast-notification,
.notification-container,
.notification-message,
.success-notification,
.alert-notification {
  position: fixed !important;
  top: 70px !important; /* 位于顶部导航栏下方 */
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10000 !important; /* 确保显示在最上层 */
  width: auto !important;
  max-width: 80% !important;
  min-width: 200px !important;
  text-align: center !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  background: linear-gradient(135deg, #ffd1dc, #c2e0f7) !important; /* 粉蓝渐变色背景 */
  color: #333 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  animation: fadeInDown 0.5s ease, fadeOut 0.5s ease 1.5s forwards !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* 成功提醒样式 */
.success-notification,
.cart-notification.success,
.add-to-cart-notification.success,
.product-added-notification.success,
.toast-notification.success,
.notification-container.success,
.notification-message.success,
.alert-notification.success {
  background: linear-gradient(135deg, #d4f8d4, #c2e0f7) !important; /* 成功提醒使用绿色渐变 */
  color: #1a5d1a !important;
}

/* 错误提醒样式 */
.error-notification,
.cart-notification.error,
.add-to-cart-notification.error,
.product-added-notification.error,
.toast-notification.error,
.notification-container.error,
.notification-message.error,
.alert-notification.error {
  background: linear-gradient(135deg, #ffcccb, #ffd1dc) !important; /* 错误提醒使用红色渐变 */
  color: #a02020 !important;
}

/* 提醒图标 */
.notification-icon,
.cart-notification i,
.add-to-cart-notification i,
.product-added-notification i,
.toast-notification i,
.notification-container i,
.notification-message i,
.success-notification i,
.alert-notification i {
  margin-right: 8px !important;
  font-size: 16px !important;
}

/* 动画效果 */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .cart-notification,
  .add-to-cart-notification,
  .product-added-notification,
  .toast-notification,
  .notification-container,
  .notification-message,
  .success-notification,
  .alert-notification {
    top: 60px !important; /* 移动端导航栏较低 */
    max-width: 90% !important;
    font-size: 13px !important;
    padding: 8px 15px !important;
  }
}