﻿/* ============================================
   /portal/assets/css/portal.cart.css
   ============================================ */ 
/* ============================================
     购物车：极简一笔线条（修复版）
   =========================================== */

.portal-cart { 
  position: relative; 
  display: flex; 
  align-items: center; 
  margin-left: 0; 
}

.portal-cart-link { 
  display: inline-flex;      /* 保持 inline-flex，和第一层导航栏一致 */
  align-items: center;
  gap: 6px;                  /* 图标与文字间距 */
  color: var(--topbar-text); /* ← 改成第一层导航栏颜色变量 */
  text-decoration: none;
  padding: 6px;              /* 胶囊 hover 的基础 */
  border-radius: 999px;      /* 胶囊形状 */
  transition: background .12s ease, color .12s ease;
}

/* ❌ 关闭 hover 背景 */
/*.portal-cart-link:hover { */
/*  background: none;*/
/*}*/

/* SVG 基础 */
.portal-cart-icon { 
  width: 36px; 
  height: 28px; 
  display: block; 
  color: var(--topbar-text); 
  transition: color .12s, transform .12s; 
  transform-origin: center; 
}

/* 线条样式（丝滑） */
.portal-cart-icon .cart-stroke { 
  stroke: currentColor; 
  stroke-width: 2.5; 
  fill: none; 
  stroke-linecap: round; 
  stroke-linejoin: round; 
  vector-effect: non-scaling-stroke; 
}

/* 购物车轮子 */
.portal-cart-icon .wheel {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2.5; /* ← 和车身一样粗 */
}

/* 凹槽内购物车数量 */
/* 凹槽内购物车数量（数字样式） */
.portal-cart-icon .cart-count {
  fill: #f08804;    /* ← 想自定义颜色就改这里，例如 fill:#111;不想要颜色，就改成： currentColor; */
  font-size: 20px;      /* ← 控制数字大小，10px 太小了，可以改 12~16px */
  font-weight: 700;     /* 数字粗细（700 = 加粗） */
  pointer-events: none;  /* 禁止鼠标事件（避免挡住点击） */
}

/* ⭐ “购物车”文字样式 */
.cart-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}


/* ❌ 关闭 hover 颜色变化与上移 */
.portal-cart-link:hover .portal-cart-icon { 
  /*color: inherit;*/
  color: currentColor;   
  transform: none;
}

/* 徽标（在 SVG 内部） */
.portal-cart-icon .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)); 
}

.portal-cart-icon .cart-badge-text { 
  fill: #111; 
  font-size: 8.4px; 
  font-weight: 700; 
  font-family: "Helvetica Neue", Arial, sans-serif; 
}

/* 0 件时灰色样式（可选） */
.portal-cart-icon.zero .cart-badge-bg { 
  fill: rgba(0,0,0,0.06); 
}

.portal-cart-icon.zero .cart-badge-text { 
  fill: rgba(0,0,0,0.6); 
}

/* 响应式 */
@media (max-width: 900px) {
  .portal-cart-icon { width: 30px; height: 24px; }
  .portal-cart-icon .cart-badge-text { font-size: 7px; }
}

/* 购物车 hover 字体颜色（组件级控制） */
.portal-cart-link:hover,
.portal-cart-link:hover .cart-text,
.portal-cart-link:hover .portal-cart-icon {
    color: var(--topbar-hover-text) !important;
}
