/* ============================================================================
   简约线框 SVG 图标库 样式 (css/icons.css)
   统一尺寸规范 + 与文字垂直对齐 + 适配各种容器 (logo/tab/entry-icon 等)
   ============================================================================ */

/* ------ 通用 .icon 基础 ------ */
svg.icon {
  display: inline-flex;
  align-self: center;
  vertical-align: -2px;         /* 让 SVG 中轴线 ≈ 文字 x-height 中线 */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  transition: transform .15s ease;
}

/* 兼容老浏览器: 兜底尺寸 */
svg.icon[width="0"], svg.icon[height="0"] { width: 1em; height: 1em; }

/* 跟随 font-size 的比例尺寸预设 */
.icon-xs { width: 12px; height: 12px; vertical-align: -1px; }
.icon-sm { width: 16px; height: 16px; vertical-align: -2px; }
.icon-md { width: 20px; height: 20px; vertical-align: -3px; }
.icon-lg { width: 28px; height: 28px; }
.icon-xl { width: 36px; height: 36px; }
.icon-2xl{ width: 44px; height: 44px; }

/* 被替换的 emoji 图标: 保持和原 emoji 视觉大小相近 */
svg.icon.icon-emoji {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -15%;
  margin-right: 2px;
}

/* ------ 顶部导航栏图标 ------ */
/* .logo-icon: 原先 32px emoji → 现在改为 SVG 大图标容器 */
.logo-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  flex-shrink: 0;
}
.logo-icon svg.icon {
  width: 28px;
  height: 28px;
  vertical-align: middle;
  stroke-width: 1.8;
}

/* 顶栏 .tab 链接里的图标 (字号 14px) */
.tab svg.icon,
.nav-link svg.icon {
  width: 17px;
  height: 17px;
  vertical-align: -3px;
  margin-right: 5px;
  stroke-width: 1.9;
}
/* 移动端紧凑版 */
@media (max-width: 640px) {
  .tab svg.icon,
  .nav-link svg.icon {
    width: 15px;
    height: 15px;
    margin-right: 4px;
  }
}
@media (max-width: 480px) {
  .tab svg.icon,
  .nav-link svg.icon {
    width: 14px;
    height: 14px;
    margin-right: 3px;
  }
}
@media (max-width: 400px) {
  .tab svg.icon,
  .nav-link svg.icon {
    width: 13px;
    height: 13px;
  }
}

/* ------ 子标签 .sub-tab 里的图标 ------ */
.sub-tab svg.icon {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 5px;
  stroke-width: 1.85;
}
@media (max-width: 640px) {
  .sub-tab svg.icon { width: 14px; height: 14px; margin-right: 4px; }
}
@media (max-width: 400px) {
  .sub-tab svg.icon { margin-right: 3px; }
}

/* ------ 首页 4 个入口卡片 .entry-icon (原先大 emoji) ------ */
.entry-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  margin: 0 auto 12px;
  color: var(--primary);
  background: var(--primary-light);
  transition: transform .2s ease;
}
.entry-card:hover .entry-icon { transform: translateY(-2px); }
.entry-icon svg.icon {
  width: 32px;
  height: 32px;
  stroke-width: 1.7;
  vertical-align: middle;
}

/* ------ 空状态 / 大装饰图标 ------ */
/* maintenance / success / auth 保持圆形卡片风格 */
.maintenance-icon,
.modal-icon-success,
.auth-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto 16px;
}
/* empty-icon 不再强制圆形/虚线边框（避免我的记录等处出现"透明圆圈"） */
.empty-icon {
  display: inline-block !important;
  font-size: 56px !important;
  line-height: 1.2 !important;
  margin: 0 auto 12px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  color: #9CA3AF;
}
.empty-icon svg.icon {
  width: 56px !important;
  height: 56px !important;
  stroke-width: 1.75;
}
.maintenance-icon { background: #E0E7FF; color: #6366F1; }
.modal-icon-success { background: #DCFCE7; color: #16A34A; }
.auth-icon      { background: linear-gradient(135deg, var(--primary-light), #FFE4B5); color: var(--primary); }

.maintenance-icon svg.icon,
.modal-icon-success svg.icon,
.auth-icon svg.icon {
  width: 40px;
  height: 40px;
  stroke-width: 1.75;
}

/* ------ 卡片标题 / 步骤徽章 / Filter-tab 里的图标 ------ */
.card-title svg.icon,
.step-badge + svg.icon,
.filter-tab svg.icon {
  width: 17px;
  height: 17px;
  vertical-align: -3px;
  margin-right: 6px;
}
.filter-tab svg.icon { margin-right: 4px; width: 15px; height: 15px; }

/* 尺寸卡片 (大小件) */
.size-card .size-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.size-card svg.icon {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
}

/* ------ 支付方式按钮里的图标 ------ */
.pay-method-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pay-method-inner svg.icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.85;
}

/* 驿站标签里的图标 */
.station-checkbox-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.station-checkbox-inner svg.icon {
  width: 18px;
  height: 18px;
}

/* ------ 按钮里的图标 ------ */
.btn svg.icon {
  width: 17px;
  height: 17px;
  vertical-align: -3px;
  margin-right: 6px;
  stroke-width: 1.9;
}
.btn-sm svg.icon { width: 15px; height: 15px; margin-right: 5px; vertical-align: -2px; }
.btn-ghost svg.icon { opacity: 0.9; }

/* ------ user-dropdown 菜单项里的图标 ------ */
.user-dd-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.user-dd-item svg.icon {
  width: 16px;
  height: 16px;
  stroke-width: 1.85;
}

/* ------ 管理面板 section 标题图标 ------ */
.user-manage-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
}
.user-manage-section-title svg.icon {
  width: 17px;
  height: 17px;
  stroke-width: 1.9;
}

/* ------ 状态标签里的图标 ------ */
.status-tag, .size-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.status-tag svg.icon,
.size-tag svg.icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.1;
}

/* ------ 评论操作按钮图标 ------ */
.reply-btn,
.admin-action-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}
.reply-btn svg.icon,
.admin-action-btn svg.icon {
  width: 14px;
  height: 14px;
  stroke-width: 1.9;
}

/* ------ 私信气泡 / 会话项 图标 ------ */
.quick-pm-tip svg.icon {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -2px;
}

/* ------ FAQ 空状态图标 ------ */
.faq-empty .empty-icon { width: 60px; height: 60px; }
.faq-empty .empty-icon svg.icon { width: 34px; height: 34px; }

/* ------ 评论区已删除徽章图标 ------ */
.comment-deleted-badge,
.comment-deleted {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.comment-deleted-badge svg.icon,
.comment-deleted svg.icon {
  width: 14px;
  height: 14px;
}

/* ------ 已删除评论仅管理员可见提示条 图标 ------ */
.comment-anon-staff-hint {
  display: flex;
  align-items: center;
  gap: 6px;
}
.comment-anon-staff-hint svg.icon { width: 15px; height: 15px; }

/* ------ 回复引用条图标 ------ */
.comment-quote-icon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.comment-quote-icon svg.icon { width: 13px; height: 13px; }

/* ------ 优惠券区图标 ------ */
#couponDiscountText svg.icon {
  width: 15px;
  height: 15px;
  margin-right: 4px;
  vertical-align: -2px;
}

/* ------ 站点标签 (cainiao/jd/postal/sf) 里的图标颜色区分 ------ */
.st-tag-cainiao svg.icon { color: #FF6A00; }
.st-tag-jd      svg.icon { color: #E4393C; }
.st-tag-postal  svg.icon { color: #00A650; }
.st-tag-sf      svg.icon { color: #000; }

/* ------ 支付方式图标颜色区分 ------ */
.icon-wechat-pay { color: #07C160; }
.icon-alipay-pay { color: #1677FF; }

/* ------ VIP 特权列表图标 ------ */
.vip-perk-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.vip-perk-item svg.icon {
  width: 17px;
  height: 17px;
  stroke-width: 1.9;
  margin-top: 2px;
  color: var(--primary);
}

/* ------ 排行榜图标 ------ */
.rank-crown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rank-crown svg.icon { color: #F59E0B; width: 16px; height: 16px; }
.rank-1 svg.icon { color: #F59E0B !important; }
.rank-2 svg.icon { color: #9CA3AF !important; }
.rank-3 svg.icon { color: #B45309 !important; }

/* ------ 工作人员端统计卡片大图标 ------ */
.stats-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
}
.stats-card-icon svg.icon {
  width: 26px;
  height: 26px;
  stroke-width: 1.8;
}

/* ------ 公告列表 评论数 / 字体大小 图标 ------ */
.ann-meta-item svg.icon { width: 14px; height: 14px; margin-right: 3px; vertical-align: -2px; }

/* ------ 订单号 / 地址行 图标 (📍📋 等) ------ */
.record-section-icon svg.icon {
  width: 15px;
  height: 15px;
  margin-right: 5px;
  vertical-align: -2px;
  color: var(--primary);
}

/* ------ 私信页 会话列表里 对方已关闭私信 徽章 ------ */
.pm-peer-badges svg.icon {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 3px;
}

/* ------ 大小件 多📦 场景: 让多个 SVG 并排紧凑显示 ------ */
.size-title .icon + .icon { margin-left: -8px; }

/* ------ 修复: 当图标用于伪 flex 布局时保证 align 正确 ------ */
.tab, .sub-tab, .filter-tab, .btn, .pay-method-inner, .station-checkbox-inner {
  align-items: center;
}