/**
 * 移动端购物车滚动修复
 * 确保购物车在移动端可以垂直滚动查看完整内容
 */

/* 移动端适配 */
@media (max-width: 768px) {
  /* 购物车模态框 - 确保可以滚动 */
  .cart-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* 整体容器不滚动 */
    z-index: 10000 !important;
    background-color: #f8f9fa !important;
  }
  
  /* 购物车内容容器 */
  .cart-content, .cart-content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important; /* 内容容器不滚动 */
    position: relative !important;
  }
  
  /* 购物车页面 */
  .cart-page {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important; /* 页面容器不滚动 */
    position: relative !important;
  }
  
  /* 购物车商品列表 - 这里是关键，确保可以滚动 */
  .cart-items {
    flex: 1 !important;
    overflow-y: auto !important; /* 启用垂直滚动 */
    -webkit-overflow-scrolling: touch !important; /* 增强iOS的滚动体验 */
    padding: 10px !important;
    padding-bottom: 150px !important; /* 为底部结算区域留出空间 */
    width: 100% !important;
    position: relative !important;
    display: block !important; /* 确保正确显示 */
    height: auto !important; /* 自动高度 */
    min-height: 100px !important; /* 最小高度 */
    max-height: none !important; /* 移除最大高度限制 */
  }
  
  /* 显示滚动条 */
  .cart-items::-webkit-scrollbar {
    width: 4px !important; /* 滚动条宽度 */
    background: transparent !important;
  }
  
  .cart-items::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2) !important; /* 滚动条颜色 */
    border-radius: 4px !important;
  }
  
  /* 购物车底部结算区域 - 固定在底部 */
  .cart-footer, .checkout-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: #fff !important;
    border-top: 1px solid #eee !important;
    padding: 15px !important;
    z-index: 10001 !important; /* 确保在内容之上 */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05) !important;
  }
  
  /* 购物车头部 - 固定在顶部 */
  .cart-header {
    position: sticky !important;
    top: 0 !important;
    background-color: #fff !important;
    padding: 15px !important;
    border-bottom: 1px solid #eee !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    z-index: 10001 !important; /* 确保在内容之上 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
  }
  
  /* 购物车商品项 */
  .cart-item {
    margin-bottom: 10px !important;
    background-color: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    padding: 10px !important;
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* 空购物车提示 */
  .empty-cart {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px !important;
    text-align: center !important;
  }
}