/**
 * 购物车项目填充修复样式
 * 解决图片和按钮没有填充满容器的问题
 */

/* 移动端适配 */
@media (max-width: 768px) {
  /* 购物车商品图片容器 */
  .cart-item-image {
    width: 60px !important;
    height: 60px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f8f9fa !important;
    padding: 0 !important; /* 移除内边距 */
  }

  /* 购物车商品图片 */
  .cart-item-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 确保图片填满容器 */
    display: block !important;
  }

  /* 数量按钮基础样式 */
  .quantity-btn {
    width: 28px !important;
    height: 28px !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    font-size: 0 !important; /* 移除文本 */
    border-radius: 4px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    position: relative !important;
  }

  /* 减号按钮 */
  .minus-btn {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  /* 加号按钮 */
  .plus-btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }

  /* 减号样式 - 使用伪元素创建横线 */
  .minus-btn::after {
    content: '' !important;
    position: absolute !important;
    width: 12px !important;
    height: 2px !important;
    background-color: #333 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  /* 加号样式 - 使用伪元素创建十字 */
  .plus-btn::before,
  .plus-btn::after {
    content: '' !important;
    position: absolute !important;
    background-color: #333 !important;
    top: 50% !important;
    left: 50% !important;
  }

  /* 加号横线 */
  .plus-btn::before {
    width: 12px !important;
    height: 2px !important;
    transform: translate(-50%, -50%) !important;
  }

  /* 加号竖线 */
  .plus-btn::after {
    width: 2px !important;
    height: 12px !important;
    transform: translate(-50%, -50%) !important;
  }

  /* 数量显示 */
  .quantity-display,
  .quantity-input {
    width: 28px !important;
    text-align: center !important;
    font-weight: 600 !important;
    border-top: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
    border-left: none !important;
    border-right: none !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #fff !important;
  }

  /* 超小屏幕设备适配 */
  @media (max-width: 360px) {
    .cart-item-image {
      width: 50px !important;
      height: 50px !important;
      margin-right: 8px !important;
    }

    .quantity-btn {
      width: 26px !important;
      height: 26px !important;
      min-width: 26px !important;
      min-height: 26px !important;
    }

    .quantity-display,
    .quantity-input {
      width: 26px !important;
      height: 26px !important;
      line-height: 26px !important;
      font-size: 13px !important;
    }
  }
}