/* ============================================
   /portal/assets/css/portal.cart.mobile.css
   手机端底部导航栏购物车组件专用
   由 PC 版 portal.cart.css 映射而来
   ============================================ */ 

/* ============================================
     购物车：极简一笔线条（修复版，手机端）
   =========================================== */

/* 原 .portal-cart → 手机端图标容器 */
.cart-icon-wrapper { 
  position: relative; 
  display: flex; 
  align-items: center; 
  margin-left: 0; 
}

/* 原 .portal-cart-link → 这里同样作用在容器上（手机端没有单独 link） */
.cart-icon-wrapper { 
  display:inline-flex; 
  align-items:center; 
  color:var(--portal-text-main); 
  text-decoration:none; 
  padding:0px; 
  border-radius:8px; 
  transition:background .12s ease; 
}

/* ❌ 关闭 hover 背景 */
.cart-icon-wrapper:hover { 
  background: none;
}

/* SVG 基础（原 .portal-cart-icon） */
.cart-icon-mini { 
  width: 24px;  /* ← 必须改成这个 */
  height: 24px; 
  display: block; 
  color: #666;   /* ← 必须改成这个 */
  /*color: var(--portal-text-main);这条是电脑端用的，所以注销 */
  transition: color .12s, transform .12s; 
  transform-origin: center; 
}

/* 线条样式（丝滑）（原 .portal-cart-icon .cart-stroke） */
.cart-icon-mini .cart-stroke { 
  stroke: currentColor; 
  stroke-width: 1.9;  /* 原来是2.5电脑端这样 */
  fill: none; 
  stroke-linecap: round; 
  stroke-linejoin: round; 
  vector-effect: non-scaling-stroke; 
}

/* 购物车轮子（原 .portal-cart-icon .wheel） */
.cart-icon-mini .wheel {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.9; /* ← 和车身一样粗 *//* 原来是2.5电脑端这样 */
}

/* 凹槽内购物车数量（原 .portal-cart-icon .cart-count） */
.cart-icon-mini .cart-count {
  fill: #f08804;    /* ← 想自定义颜色就改这里，例如 fill:#111;不想要颜色，就改成： currentColor; */
  font-size: 20px;      /* ← 控制数字大小，10px 太小了，可以改 12~16px */
  font-weight: 700;     /* 数字粗细（700 = 加粗） */
  pointer-events: none;  /* 禁止鼠标事件（避免挡住点击） */
}

/* ⭐ 图标 + 文字横向排列（这里在手机端其实用不到，但保留逻辑） */
.cart-icon-wrapper {
  display: flex;
  align-items: center;
  gap: 6px; /* 图标与文字的间距 */
  color: var(--portal-text-main);
}

/* ⭐ “购物车”文字样式（原 .cart-text → 手机端用 .tab-text） */
.tab-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

/* ❌ 关闭 hover 颜色变化与上移（原 .portal-cart-link:hover .portal-cart-icon） */
.cart-icon-wrapper:hover .cart-icon-mini { 
  color: inherit; 
  transform: none;
}

/* 徽标（在 SVG 内部）——如果你未来要用，可以在 SVG 里加对应元素 */
.cart-icon-mini .cart-badge-bg { 
  fill: #f08804; 
  stroke: rgba(0,0,0,0.06); 
  stroke-width: 0.3; 
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.06)); 
}

.cart-icon-mini .cart-badge-text { 
  fill: #111; 
  font-size: 8.4px; 
  font-weight: 700; 
  font-family: "Helvetica Neue", Arial, sans-serif; 
}

/* 0 件时灰色样式（可选） */
.cart-icon-mini.zero .cart-badge-bg { 
  fill: rgba(0,0,0,0.06); 
}

.cart-icon-mini.zero .cart-badge-text { 
  fill: rgba(0,0,0,0.6); 
}

/* 响应式（原 @media） */
@media (max-width: 900px) {
  .cart-icon-mini { width: 30px; height: 24px; }
  .cart-icon-mini .cart-badge-text { font-size: 7px; }
}