/**
 * 桌面端WhatsApp结账按钮样式优化
 * 确保桌面端的WhatsApp结账按钮样式正确应用
 */

/* 桌面端特定样式 - 使用!important确保最高优先级 */
@media (min-width: 769px) {
  .checkout-whatsapp-btn,
  .whatsapp-checkout-btn,
  button[class*="whatsapp"],
  [class*="checkout"][class*="whatsapp"] {
    background-color: #25D366 !important; /* WhatsApp绿色 */
    background-image: linear-gradient(to right, #25D366, #128C7E) !important; /* 渐变背景 */
    color: white !important;
    border: none !important;
    border-radius: 10px !important; /* 增大圆角 */
    font-weight: 700 !important; /* 加粗字体 */
    font-size: 18px !important; /* 增大字体 */
    letter-spacing: 0.5px !important; /* 增加字间距 */
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important; /* 增加图标和文字间距 */
    margin: 25px auto 10px !important; /* 增加上下边距 */
    width: 100% !important;
    height: 56px !important; /* 固定高度 */
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 12px rgba(37, 211, 102, 0.4) !important; /* 增强阴影效果 */
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; /* 增强文字阴影 */
    max-width: 100% !important; /* 确保按钮不会超出容器 */
  }

  /* 悬停效果 */
  .checkout-whatsapp-btn:hover,
  .whatsapp-checkout-btn:hover,
  button[class*="whatsapp"]:hover,
  [class*="checkout"][class*="whatsapp"]:hover {
    background-image: linear-gradient(to right, #128C7E, #075E54) !important; /* 悬停时更深的渐变 */
    transform: translateY(-3px) !important; /* 增加悬停时的上移效果 */
    box-shadow: 0 8px 16px rgba(37, 211, 102, 0.5) !important; /* 增强悬停时的阴影 */
  }

  /* 点击效果 */
  .checkout-whatsapp-btn:active,
  .whatsapp-checkout-btn:active,
  button[class*="whatsapp"]:active,
  [class*="checkout"][class*="whatsapp"]:active {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(37, 211, 102, 0.3) !important;
  }

  /* 图标样式 */
  .checkout-whatsapp-btn i,
  .whatsapp-checkout-btn i,
  button[class*="whatsapp"] i,
  [class*="checkout"][class*="whatsapp"] i {
    font-size: 24px !important; /* 增大图标 */
  }
}