/* [2026-09-02] v46 由 OnlineService.cshtml 页内 <style> 抽取归拢到 2026814（样式内容未改动） */
/* ============================================================
   客服中心：双入口 + 服务承诺 + 金牌顾问横滑 + FAQ + 联系方式
   [2026-09-01] v42 图标全部换 Phosphor Duotone 内嵌 SVG（256 viewBox，fill=currentColor，
   第一层 path opacity=.2 双色底层更有质感），替换原 remixicon 字体图标
   ============================================================ */
/* 服务承诺条 */
.cs-promise{
  display:flex;margin:0.120rem 0.140rem 0;
  background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  padding:0.110rem 0.060rem;border:0.010rem solid var(--line);
}
.cs-promise .cp{flex:1;text-align:center}
.cs-promise .cp + .cp{border-left:0.010rem solid var(--line)}
/* [2026-09-01] v42 字体图标改 SVG：font-size 改 width/height */
.cs-promise .cp svg{width:0.190rem;height:0.190rem;color:var(--brand);display:block;margin:0 auto}
.cs-promise .cp b{display:block;font-size:0.130rem;font-weight:700;margin-top:0.050rem}
.cs-promise .cp span{font-size:0.120rem;color:var(--ink-3);display:block;margin-top:0.020rem}

/* 区块 */
.block{margin:0.120rem 0.140rem 0;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:0.140rem;border:0.010rem solid var(--line)}
.b-title{display:flex;align-items:center;gap:0.080rem;font-size:0.170rem;font-weight:700;margin-bottom:0.130rem}
.b-title .bt-ic{
  width:0.240rem;height:0.240rem;border-radius:0.070rem;flex-shrink:0;
  background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
}
/* [2026-09-01] v42 SVG 尺寸 */
.b-title .bt-ic svg{width:0.150rem;height:0.150rem;display:block}
.b-title .bt-more{margin-left:auto;font-size:0.130rem;color:var(--ink-3);font-weight:500;display:flex;align-items:center;gap:0.010rem}
.b-title .bt-more svg{width:0.140rem;height:0.140rem;display:block}

/* 金牌顾问两列网格 */
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.100rem}
.guide-card{
  background:var(--bg);border-radius:0.120rem;padding:0.120rem 0.100rem;
  text-align:center;border:0.010rem solid var(--line);
  transition:transform .2s;
}
.guide-card:active{transform:scale(.96)}
.guide-avatar{
  position:relative;width:0.460rem;height:0.460rem;border-radius:50%;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  font-size:0.190rem;font-weight:800;color:#fff;
}
/* [2026-09-01] v41 业务员头像：优先真实头像图（/files/thumb），无图回落字母色块 */
.guide-avatar img{
  position:absolute;inset:0;width:100%;height:100%;
  border-radius:50%;object-fit:cover;display:block;
}
.guide-avatar::after{
  content:"";position:absolute;right:0;bottom:0;width:0.100rem;height:0.100rem;
  border-radius:50%;background:var(--green);border:0.020rem solid #fff;
}
.guide-card b{display:block;font-size:0.140rem;font-weight:700;margin-top:0.090rem}
.guide-card .g-tag{
  display:inline-block;font-size:0.120rem;color:var(--gold);background:var(--gold-soft);
  border-radius:0.040rem;padding:0.010rem 0.060rem;margin-top:0.040rem;font-weight:600;
}
.guide-card .g-exp{font-size:0.120rem;color:var(--ink-3);margin-top:0.060rem;display:block}
.guide-card .g-call{
  display:flex;align-items:center;justify-content:center;gap:0.030rem;
  font-size:0.130rem;font-weight:700;color:#fff;
  background:var(--brand);
  border-radius:0.250rem;min-height:0.320rem;padding:0.050rem 0;margin-top:0.080rem;   /* [2026-09-01] v45d 用户要求圆角 0.25rem */
}
/* [2026-09-01] v42 按钮内微信图标换自家 Phosphor SVG */
.guide-card .g-call svg{width:0.150rem;height:0.150rem;display:block}

/* [2026-09-01] v40 售后专员卡：整行横条式，绿色系区别于业务员卡 */
.after-card{
  display:flex;align-items:center;gap:0.100rem;
  margin-top:0.120rem;padding:0.120rem 0.120rem;
  background:linear-gradient(135deg,#f2fbf6,#e8f7ef);
  border:0.010rem solid #cdeedb;border-radius:0.120rem;
}
.after-card .ac-avatar{
  flex-shrink:0;width:0.460rem;height:0.460rem;border-radius:50%;position:relative;overflow:hidden;
  background:linear-gradient(145deg,#5ecb8f,#2fa86e);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
/* [2026-09-01] v41 售后专员头像：同业务员，真实头像图优先，无图回落盾牌图标 */
.after-card .ac-avatar img{
  position:absolute;inset:0;width:100%;height:100%;
  border-radius:50%;object-fit:cover;display:block;
}
/* [2026-09-01] v42 无头像时盾牌 SVG 尺寸 */
.after-card .ac-avatar svg{width:0.220rem;height:0.220rem;display:block}
.after-card .ac-info{flex:1;min-width:0}
.after-card .ac-info b{font-size:0.150rem;font-weight:700;color:#1c6b45;display:block}
.after-card .ac-info b em{
  font-style:normal;font-size:0.110rem;font-weight:600;color:#fff;
  background:#2fa86e;border-radius:0.040rem;padding:0.012rem 0.060rem;margin-left:0.060rem;vertical-align:0.010rem;
}
.after-card .ac-info > span{font-size:0.120rem;color:#5a8a72;display:block;margin-top:0.040rem}
.after-card .ac-go{
  flex-shrink:0;display:flex;align-items:center;gap:0.030rem;
  font-size:0.130rem;font-weight:700;color:#fff;background:var(--green);
  border-radius:0.250rem;min-height:0.320rem;padding:0.050rem 0.120rem;   /* [2026-09-01] v45e 用户要求圆角 0.25rem */
}
/* [2026-09-01] v42 按钮内微信图标换自家 Phosphor SVG */
.after-card .ac-go svg{width:0.150rem;height:0.150rem;display:block}

/* FAQ */
.faq-item{border-bottom:0.010rem dashed var(--line)}
.faq-item:last-child{border-bottom:none}
.faq-q{
  display:flex;align-items:center;gap:0.080rem;
  padding:0.140rem 0;cursor:pointer;font-size:0.140rem;font-weight:600;
}
.faq-q .fq-ic{
  flex-shrink:0;width:0.220rem;height:0.220rem;border-radius:0.070rem;
  background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
}
/* [2026-09-01] v42 SVG 尺寸 */
.faq-q .fq-ic svg{width:0.140rem;height:0.140rem;display:block}
.faq-q .fq-text{flex:1}
.faq-q .fq-arrow{color:var(--ink-3);transition:transform .25s}
.faq-q .fq-arrow svg{width:0.160rem;height:0.160rem;display:block}
.faq-item.open .fq-arrow{transform:rotate(180deg)}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .3s ease-out;
  font-size:0.140rem;color:var(--ink-2);line-height:1.7;padding-left:0.310rem;
}
.faq-item.open .faq-a{max-height:3.000rem;padding-bottom:0.120rem}

/* 联系方式 */
.contact-item{
  display:flex;align-items:center;gap:0.110rem;padding:0.110rem 0;
}
.contact-item + .contact-item{border-top:0.010rem dashed var(--line)}
.contact-item .ci-ic{
  width:0.340rem;height:0.340rem;border-radius:0.100rem;flex-shrink:0;
  background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
}
/* [2026-09-01] v42 SVG 尺寸 */
.contact-item .ci-ic svg{width:0.190rem;height:0.190rem;display:block}
.contact-item:nth-child(2) .ci-ic{background:var(--blue-soft);color:var(--blue)}
.contact-item:nth-child(3) .ci-ic{background:var(--green-soft);color:var(--green)}
.contact-item:nth-child(4) .ci-ic{background:var(--gold-soft);color:var(--gold)}
.contact-item .ci-txt{flex:1;min-width:0}
.contact-item .ci-txt b{font-size:0.140rem;font-weight:700;display:block}
.contact-item .ci-txt span{font-size:0.130rem;color:var(--ink-3);display:block;margin-top:0.030rem}
.contact-item .ci-go{color:var(--ink-3);display:flex;align-items:center}
.contact-item .ci-go svg{width:0.170rem;height:0.170rem;display:block}

/* [2026-09-01] v44 顶栏图标恢复 remixicon 字体（v42 误换 Phosphor SVG）：字号对齐其他 2026814 页面 */
.page-bar .pb-back .ic,.page-bar .pb-more .ic{font-size:0.190rem}
/* [2026-09-01] v45e 消除顶部空隙：base.css 的 sticky 在 .phone{overflow-x:hidden} 内失效产生异常间隙，
   对齐详情页 v31 方案改 fixed + .phone padding-top 补偿（顶栏高 = 0.12×2 内边距 + 0.32 按钮 + 0.01 边线 ≈ 0.570rem） */
.page-bar{position:fixed;top:0;left:0;right:0;margin:0 auto;max-width:430px;z-index:100}
.phone{padding-top:0.570rem}
/* [2026-09-01] v45f 用户反馈顶栏与首卡间距太高：首个区块上边距 0.120→0.020rem；v45g 再收拢 0.020→0.006rem */
.phone > .block:first-of-type{margin-top:0.006rem}

/* 悬浮客服球 */
.float-kf{
  position:fixed;right:0.140rem;bottom:calc(0.840rem + env(safe-area-inset-bottom));z-index:80;
  width:0.520rem;height:0.520rem;border-radius:50%;
  background:linear-gradient(135deg,#ff8a3d,#f15500);
  box-shadow:0 0.060rem 0.180rem rgba(241,85,0,.4);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.250rem;
  animation:kf-float 2.4s ease-in-out infinite;
}
.float-kf::after{
  content:"";position:absolute;inset:-0.060rem;border-radius:50%;
  border:0.020rem solid rgba(241,85,0,.35);
  animation:kf-ripple 2.4s ease-out infinite;
}
.float-kf .fk-dot{
  position:absolute;right:0.020rem;top:0.020rem;width:0.110rem;height:0.110rem;border-radius:50%;
  background:var(--green);border:0.020rem solid #fff;
}
@keyframes kf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-0.060rem)}}
@keyframes kf-ripple{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.5);opacity:0}}

/* 底部固定 CTA */