/* ==========================================================================
 * 侧栏菜单样式（当云 DangYun 风格：白色背景侧板菜单）
 * 文件：001/css/header.css
 * 说明：仅在 header.tpl 中引用。将左侧侧栏与 Logo 区改为白底深色文字，
 *       覆盖 global.css 中的深色侧栏样式，头部与菜单字体使用思源黑体（SiyuanHei）。
 * ========================================================================== */

/* 字体：思源黑体 */
@font-face {
  font-family: 'SiyuanHei';
  src: url('../font/siyuanhei.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 加粗字重同样映射到思源黑体（复用同一字体文件，浏览器只下载一次，
 * 由字体引擎合成粗体），避免标题/按钮/激活菜单因字重不匹配而回退到系统字体。 */
@font-face {
  font-family: 'SiyuanHei';
  src: url('../font/siyuanhei.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 侧栏与 Logo 区：白色背景（!important 覆盖 global.css 的深色背景） */
.vertical-menu,
.navbar-brand-box {
  background: #ffffff !important;
  width: 220px !important;
}

.main-content{
  margin-left: 220px;
  overflow:auto;
}
/* 全局字体：思源黑体（header.tpl 包裹所有会员中心页面，body 级声明即可全局生效）
 * 注意：app.min.css 中 body 声明了 font-family: Arial, sans-serif !important，
 *       此处必须同样加 !important 才能覆盖（同优先级下 header.css 后加载，故能生效）。 */
body {
  font-family: 'SiyuanHei', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}
/* 侧栏菜单已选择菜单背景颜色 */
.mm-active .active {
  color: #fff !important;
  background-color: #0d83fa !important;
}

.mm-active .active i {
  color: #fff !important;
  background-color: #0d83fa !important;
}

/* --------------------------------------------------------------------------
 * 高级感：侧栏阴影与层次
 * -------------------------------------------------------------------------- */

/* 侧栏：右侧柔和多层投影 + 细分隔线，与内容区形成纵深层次 */
.vertical-menu {
  box-shadow: 6px 0 24px rgba(15, 23, 42, 0.06), 1px 0 0 rgba(15, 23, 42, 0.05);
}

/* 一级菜单项（展开态）：圆角留白，悬停浮现浅灰底与轻投影 */
body:not(.vertical-collpsed) #side-menu > li > a {
  margin: 2px 12px;
  border-radius: 10px;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

body:not(.vertical-collpsed) #side-menu > li > a:hover {
  background-color: #f3f6fc;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* 激活菜单项：圆角 + 品牌蓝光晕投影，强化高级感 */
.mm-active > a,
.mm-active .active {
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}
/* 卡片圆角 */
.card {
  border-radius: 20px;
}
/* <!-- 顶部公告通知横条样式 --> */
/* 红色背景、白色字体、圆角通知横条 */
  .top-notice-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    margin-bottom: 20px;
    border-radius: 20px;
    /* background: #e5484d; */
    background: #05a560;
    color: #fff;
    box-shadow: 0 6px 16px rgba(229, 72, 77, 0.22);
  }

  .top-notice-body {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1.5;
  }

  .top-notice-body i {
    margin-right: 8px;
    font-size: 18px;
  }
  .top-notice-body a {
    color: #fff;
  }

  /* 最右侧关闭按钮 */
  .top-notice-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .top-notice-close:hover {
    background: rgba(255, 255, 255, 0.36);
  }
  .footer {
    left: 220px;
  }
  @media (max-width: 992px) {
  .footer {
    left: 0;
  }
}

.user-center_product_grid {
  display:block;
}

/* --------------------------------------------------------------------------
 * 首页「产品推荐 / 猜你喜欢」卡片徽章（黄色徽章 + 抖动动画）
 * -------------------------------------------------------------------------- */

/* 黄色渐变胶囊徽章，白色加粗文字，营造「猜你喜欢」的活泼推荐感 */
.recommend-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg,#16c4fd 0%, #1878fd 100%);
  box-shadow: 0 4px 10px rgba(13, 131, 250, 0.35);
  animation: recommend-shake 2.6s ease-in-out infinite;
}

/* 抖动动画：先轻微左右摇摆，随后停顿，循环往复（角度较小，避免过于晃眼） */
@keyframes recommend-shake {
  0%, 55%, 100% { transform: rotate(0); }
  10% { transform: rotate(-6deg); }
  20% { transform: rotate(6deg); }
  30% { transform: rotate(-4deg); }
  40% { transform: rotate(4deg); }
  50% { transform: rotate(0); }
}

/* --------------------------------------------------------------------------
 * 首页「产品推荐 / 猜你喜欢」卡片内容：新活动机器推荐列表（全宽横向排布）
 * 说明：整条卡片占满一行，机器横向铺开；配色克制、投影轻柔，避免喧宾夺主。
 * -------------------------------------------------------------------------- */

/* 卡片整体：全宽横向推荐条；height:100% 与同行的推介计划卡片等高。
 * 说明：height:100% 会让卡片填满被拉伸的外层 section，此时若再叠加 .card 自带的
 *       margin-bottom:24px，会使卡片向下溢出并吞掉与下方卡片之间的间距，
 *       故这里将 margin-bottom 归零，垂直间距改由外层 .home-card-col 提供。 */
.recommend-card {
  height: 100%;
  margin-bottom: 0;
  padding: 18px 20px;
}

/* 列表容器：横向排布，宽度不足时自动换行 */
.recommend-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 1px;
}

/* 单个推荐机器卡片：横向紧凑排布，浅底细边框，悬停轻浮，克制不抢眼 */
.recommend-item {
  flex: 1 1 240px;
  min-width: 0;
  display: block;
  padding: 14px 16px;
  border: 1px solid #eef1f6;
  border-radius: 12px;
  background: #fafbfd;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.recommend-item:hover {
  text-decoration: none;
  border-color: #cfe0ff;
  box-shadow: 0 6px 16px rgba(36, 107, 254, 0.10);
  transform: translateY(-2px);
}

/* 顶部：角标标签 + 机器名称 */
.recommend-item-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

/* 角标标签（蓝色系与主题统一：新=蓝、热=红、惠=蓝） */
.recommend-item-tag {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  background: #246bfe;   /* 默认「新」蓝 */
}

.recommend-item-tag.hot {
  background: #f5484d;   /* 「热」红（保留暖色语义） */
}

.recommend-item-tag.discount {
  background: #0d83fa;   /* 「惠」蓝 */
}

.recommend-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1f2937;
  font-size: 14px;
  font-weight: 600;
}

/* 规格说明 */
.recommend-item-spec {
  margin-bottom: 8px;
  color: #8892a6;
  font-size: 12px;
}

/* 底部：价格 + 抢购按钮 */
.recommend-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.recommend-item-price {
  color: #e8930c;
  font-size: 12px;
}

.recommend-item-price em {
  font-size: 16px;
  font-weight: 700;
  font-style: normal;
}

.recommend-item-price i {
  font-style: normal;
  color: #8892a6;
  font-size: 11px;
}

/* 抢购按钮：蓝色描边幽灵样式，悬停转实心蓝，克制不抢眼 */
.recommend-item-btn {
  padding: 3px 12px;
  border: 1px solid #246bfe;
  border-radius: 999px;
  color: #246bfe;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  transition: background 0.2s ease, color 0.2s ease;
}

.recommend-item-btn:hover {
  background: #246bfe;
  color: #fff;
}

/* --------------------------------------------------------------------------
 * 首页「企业微信客服」卡片：绿白拼接色 + 二维码 + 在线时间
 * -------------------------------------------------------------------------- */

/* 卡片：上绿 #4bde80 / 下白 拼接背景，纵向 flex，标题在上、时间在下 */
.wechat-service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 300px;          /* 与相邻 300px 高卡片对齐 */
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(180deg, #16c4fd 0%, #1878fd 50%, #ffffff 50%, #ffffff 100%);
}

/* 顶部绿色区：标题（白字） */
.wechat-service-title {
  width: 100%;
  padding: 16px 12px 0;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

/* 二维码区：居中，白色圆角框跨在绿白拼接线上 */
.wechat-service-qr {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wechat-service-qr-box {
  width: 116px;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  color: #4bde80;
}

.wechat-service-qr-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 未配置二维码时的占位图标 */
.wechat-service-qr-box i {
  font-size: 56px;
}

/* 底部白色区：在线时间 */
.wechat-service-time {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 8px 16px;
  color: #1f2937;
  font-size: 13px;
}

.wechat-service-time i {
  color: #4bde80;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
 * 专属推广工具（affiliates 页）：标题 + 三个操作按钮
 * -------------------------------------------------------------------------- */

/* 卡片内边距微调 */
.promo-tools-card .card-body {
  padding: 18px 20px;
}

/* 卡片头部：图标 + 标题 */
.promo-tools-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: #1f2937;
  font-size: 15px;
  font-weight: 600;
}

.promo-tools-head i {
  color: #0d83fa;
  font-size: 20px;
}

/* 按钮容器：横向排布，小屏自动换行 */
.promo-tools-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 按钮统一基础样式：胶囊圆角 + 悬停上浮 */
.promo-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.promo-tool-btn i {
  font-size: 15px;
}

.promo-tool-btn:hover {
  transform: translateY(-2px);
}

/* 主按钮：品牌蓝实心（生成推广图片） */
.promo-tool-btn-primary {
  border: 1px solid #0d83fa;
  background: linear-gradient(135deg, #0d83fa 0%, #246bfe 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(13, 131, 250, 0.25);
}

.promo-tool-btn-primary:hover {
  color: #fff;
  box-shadow: 0 6px 16px rgba(13, 131, 250, 0.35);
}

/* 次按钮：品牌蓝描边（生成推广文案） */
.promo-tool-btn-outline {
  border: 1px solid #0d83fa;
  background: transparent;
  color: #0d83fa;
}

.promo-tool-btn-outline:hover {
  background: #0d83fa;
  color: #fff;
}

/* 弱化按钮：浅灰描边（一些小技巧，暂未实现，弱化存在感） */
.promo-tool-btn-ghost {
  border: 1px solid #e3e8f0;
  background: transparent;
  color: #8892a6;
}

.promo-tool-btn-ghost:hover {
  border-color: #c6d0de;
  background: #f7f9fc;
  color: #1f2937;
}

/* 推广文案弹窗：提示文字 + 文案输入框 */
.promo-text-tip {
  margin-bottom: 8px;
  color: #8892a6;
  font-size: 13px;
}

.promo-text-area {
  min-height: 160px;
  resize: none;
  color: #1f2937;
  font-size: 13px;
  line-height: 1.7;
}

/* 网页底部推广弹窗：使用说明提示框 + 代码输入框 */
.promo-footer-tip {
  border-radius: 12px;
  border-left: 3px solid #0d83fa;
  color: #1f2937;
  font-size: 13px;
}

.promo-footer-tip i {
  color: #0d83fa;
}

.promo-footer-code {
  min-height: 220px;
  resize: none;
  color: #1f2937;
  font-size: 12px;
  line-height: 1.6;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  background: #f8fafc;
}

/* --------------------------------------------------------------------------
 * 首页「推介计划」卡片（推广计划入口，clientarea.tpl）
 * 说明：卡片在「未开通 / 已开通」两种状态间切换，配色沿用品牌蓝，与全局统一。
 * -------------------------------------------------------------------------- */

/* 卡片：height:100% 与同行的猜你喜欢卡片等高；flex 纵向布局，便于两种状态占满。
 * 说明：与 .recommend-card 同理，取消 .card 自带的 margin-bottom，
 *       垂直间距改由外层 .home-card-col 提供，避免 height:100% 溢出吞掉间距。 */
.referral-card {
  height: 100%;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
}

/* 首页卡片列：为 height:100% 的卡片列提供底部垂直间距。
 * 这些卡片取消了自身 margin-bottom（防止溢出），故在此用外层列补回 24px 间距，
 * 与 Bootstrap .card 默认 margin-bottom 保持一致，避免上下卡片粘连。 */
.home-card-col {
  margin-bottom: 24px;
}

/* 未开通状态：纵向排布；flex:1 + 垂直居中，使未开通/已开通两种状态占满并等高 */
.referral-join {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* padding: 12px 0; */
  text-align: center;
}

/* 礼物图标：蓝色渐变圆形底 */
.referral-join-icon {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  background: linear-gradient(135deg, #0d83fa 0%, #246bfe 100%);
  box-shadow: 0 6px 14px rgba(13, 131, 250, 0.28);
}

/* 提示文案 */
.referral-join-text {
  margin: 0;
  color: #66758f;
  font-size: 14px;
}

/* 已开通状态：推广链接 + 按钮，纵向排布；flex:1 + 垂直居中，与未开通状态等高 */
.referral-active {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

/* 推广链接输入框 */
.referral-link-group .form-control {
  height: 40px;
  border-radius: 8px 0 0 8px;
  color: #1f2937;
  font-size: 13px;
  background: #f8fafc;
}

/* 复制按钮（输入组内，右侧圆角） */
.referral-btn-copy {
  border: 1px solid #0d83fa;
  border-radius: 0 8px 8px 0;
  color: #0d83fa;
  background: #fff;
  font-size: 16px;
}

.referral-btn-copy:hover {
  background: #0d83fa;
  color: #fff;
}

/* 主按钮：品牌蓝（立即申请 / 查看推广数据） */
.referral-btn {
  width: 100%;
  border-radius: 8px;
  font-weight: 600;
}

.referral-btn-primary {
  border: 1px solid #0d83fa;
  background: linear-gradient(135deg, #0d83fa 0%, #246bfe 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(13, 131, 250, 0.25);
}

.referral-btn-primary:hover {
  color: #fff;
  box-shadow: 0 6px 16px rgba(13, 131, 250, 0.35);
}
/* --------------------------------------------------------------------------
 * 顶部导航（header.tpl）：首页 / 产品中心
 * 靠左排布、带图标；移动端（<992px）隐藏，仅保留侧栏菜单。
 * -------------------------------------------------------------------------- */

/* 导航容器：靠左排布；margin-right:auto 把右侧下拉组推到最右 */
.top-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  margin-left: 16px;
  height: 100%;
}

/* 导航项：图标 + 文字，胶囊圆角；悬停/激活态品牌蓝，克制不抢眼 */
.top-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #1f2937;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.top-nav-item i {
  font-size: 16px;
  line-height: 1;
}

.top-nav-item:hover,
.top-nav-item.active {
  color: #0d83fa;
  background-color: #f3f6fc;
  text-decoration: none;
}

/* 移动端：隐藏顶部导航（Bootstrap lg 断点 992px 以下） */
@media (max-width: 991.98px) {
  .top-nav {
    display: none;
  }
}

/* --------------------------------------------------------------------------
 * 右下角客服悬浮按钮 + 二维码小窗（footer.tpl）
 * 原为 footer.tpl 内联样式，此处统一收纳并优化层级，避免二维码被遮挡。
 * 交互：悬停显示、点击固定、点击空白处隐藏（脚本见 footer.tpl）。
 * -------------------------------------------------------------------------- */

/* 悬浮按钮：固定右下角，微信图标上下弹跳提示 */
.kf-float {
  position: fixed;
  right: 16px;
  bottom: 60px;
  width: 60px;
  height: 60px;
  z-index: 1030;      /* 高于页面内容，避免被卡片/侧栏遮挡 */
  cursor: pointer;
}

.kf-float > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
  animation: kf-bounce 1.2s ease-in-out infinite;
}

/* 弹跳动画：轻微上下浮动，吸引注意但不过度晃眼 */
@keyframes kf-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* 二维码小窗：默认隐藏，位于按钮左侧；.show 时淡入显示 */
.kf-popup {
  position: absolute;
  right: 72px;           /* 按钮宽度 60px + 12px 间距，贴按钮左侧 */
  bottom: 0;
  width: 180px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.kf-popup.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* 小窗标题 */
.kf-popup-title {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: #1f2937;
}

/* 小窗二维码图片：居中、固定尺寸 */
.kf-popup-qr {
  display: block;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  object-fit: contain;
}