/**
 * 购物车移动端修复覆盖样式
 * 这个文件的目的是覆盖所有其他样式，确保修复生效
 * 放在所有其他CSS文件之后加载
 */

/* 移动端适配 */
@media (max-width: 768px) {
  /* 优惠券模态框向下移动 */
  .user-coupons-modal-overlay {
    align-items: flex-start !important;
    padding-top: 60px !important; /* 向下移动模态框 */
  }

  /* 产品图与数量框对齐 */
  .cart-item-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important; /* 垂直居中 */
  }

  .cart-item-details {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  /* WhatsApp支付按钮样式 - 基础样式，详细样式在mobile-whatsapp-checkout-btn.css中 */
  .checkout-whatsapp-btn {
    background-color: #25D366 !important; /* WhatsApp绿色 */
    color: white !important;
    box-shadow: 0 2px 6px rgba(37, 211, 102, 0.4) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    height: 48px !important; /* 保持当前大小 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* 超小屏幕设备 */
@media (max-width: 360px) {
  .cart-item-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important; /* 垂直居中 */
  }
}