/* ============================================================
   漂浮客服组件 · 4 种可选样式（后台「漂浮客服」切换）
   样式 a：右侧竖排快捷条  b：右下角圆形按钮组
   样式 c：底部通栏        d：气泡欢迎卡
   ============================================================ */
#rc-float{position:fixed;z-index:990;font-family:inherit}

/* ---------- 通用圆形按钮 ---------- */
.rf-btn{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  background:#fff;color:#c7000b;border:1px solid #eee;box-shadow:0 4px 14px rgba(0,0,0,.12);
  cursor:pointer;text-decoration:none;transition:transform .2s,background .2s,color .2s;position:relative}
.rf-btn svg{width:22px;height:22px;fill:currentColor}
.rf-btn:hover{background:#c7000b;color:#fff;transform:translateY(-2px)}
.rf-btn .rf-tip{position:absolute;right:54px;top:50%;transform:translateY(-50%);white-space:nowrap;
  background:#222;color:#fff;font-size:12px;padding:5px 10px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .2s}
.rf-btn:hover .rf-tip{opacity:1}

/* ---------- 样式 a：右侧竖排快捷条 ---------- */
#rc-float.rf-a{right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px}
#rc-float.rf-a .rf-tel{background:#c7000b;color:#fff;border-color:#c7000b}
#rc-float.rf-a .rf-tel:hover{background:#a50009}
.rf-wechat-pop{position:absolute;right:56px;top:50%;transform:translateY(-50%);background:#fff;border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);padding:14px;text-align:center;display:none;width:170px}
.rf-wechat-pop.show{display:block}
.rf-wechat-pop b{display:block;font-size:14px;color:#333;margin-bottom:4px}
.rf-wechat-pop span{font-size:12px;color:#86909c;word-break:break-all}

/* ---------- 样式 b：右下角圆形按钮组（FAB） ---------- */
#rc-float.rf-b{right:18px;bottom:24px;display:flex;flex-direction:column-reverse;align-items:center;gap:10px}
#rc-float.rf-b .rf-sub{opacity:0;transform:translateY(14px) scale(.8);pointer-events:none;transition:.25s}
#rc-float.rf-b.open .rf-sub{opacity:1;transform:none;pointer-events:auto}
#rc-float.rf-b .rf-main{width:56px;height:56px;background:#c7000b;color:#fff;border-color:#c7000b;box-shadow:0 6px 18px rgba(199,0,11,.35)}
#rc-float.rf-b.open .rf-main svg.icon-service{display:none}
#rc-float.rf-b .rf-main svg.icon-close{display:none}
#rc-float.rf-b.open .rf-main svg.icon-close{display:block}
#rc-float.rf-b .rf-badge{position:absolute;top:-4px;right:-4px;background:#ffb400;color:#fff;font-size:11px;
  border-radius:10px;padding:1px 6px;font-style:normal}

/* ---------- 样式 c：底部通栏 ---------- */
#rc-float.rf-c{left:0;right:0;bottom:0;transform:none;display:flex;background:#fff;
  box-shadow:0 -4px 18px rgba(0,0,0,.1);border-radius:0;padding:0}
#rc-float.rf-c .rf-citem{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 4px 10px;font-size:12px;color:#333;text-decoration:none;border:0;background:none;cursor:pointer}
#rc-float.rf-c .rf-citem svg{width:21px;height:21px;fill:#c7000b}
#rc-float.rf-c .rf-citem.hot{background:#c7000b;color:#fff;font-size:14px;font-weight:600;flex:1.4}
#rc-float.rf-c .rf-citem.hot svg{fill:#fff}
#rc-float.rf-c .rf-citem.hot small{font-weight:400;opacity:.85}

/* ---------- 样式 d：气泡欢迎卡 ---------- */
#rc-float.rf-d{right:20px;bottom:26px}
.rf-d-card{width:240px;background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.18);
  padding:16px;margin-bottom:12px;position:relative;animation:rf-pop .35s ease}
@keyframes rf-pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rf-d-card::after{content:'';position:absolute;right:26px;bottom:-8px;width:16px;height:16px;background:#fff;transform:rotate(45deg)}
.rf-d-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.rf-d-avatar{width:40px;height:40px;border-radius:50%;background:#c7000b;color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:18px;flex:none}
.rf-d-head b{font-size:14px;color:#222;display:block}
.rf-d-head small{font-size:12px;color:#27bf6d}
.rf-d-body{font-size:13px;color:#555;line-height:1.6;margin-bottom:12px}
.rf-d-acts{display:flex;gap:8px}
.rf-d-acts a{flex:1;text-align:center;padding:8px 0;border-radius:8px;font-size:13px;text-decoration:none}
.rf-d-acts .rf-call{background:#c7000b;color:#fff}
.rf-d-acts .rf-book{background:#fff3f3;color:#c7000b;border:1px solid #f3c1c1}
.rf-d-close{position:absolute;top:8px;right:10px;border:0;background:none;color:#bbb;font-size:16px;cursor:pointer;line-height:1}
.rf-d-close:hover{color:#666}

/* ---------- 图集点击放大 ---------- */
.rf-lightbox{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.86);display:none;
  align-items:center;justify-content:center;padding:4vh 4vw}
.rf-lightbox.show{display:flex}
.rf-lightbox img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.rf-lightbox .rf-lb-close{position:absolute;top:18px;right:22px;color:#fff;font-size:34px;cursor:pointer;line-height:1}
.rf-lightbox .rf-lb-cap{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#ddd;font-size:14px}

/* ---------- 移动端适配 ---------- */
@media (max-width:768px){
  #rc-float.rf-a{right:8px;gap:8px}
  #rc-float.rf-a .rf-btn{width:38px;height:38px}
  #rc-float.rf-a .rf-btn .rf-tip{display:none}
  #rc-float.rf-b{right:12px;bottom:16px}
  #rc-float.rf-d{right:12px;bottom:14px}
  .rf-d-card{width:calc(100vw - 60px)}
  /* 底部通栏样式时给页面留出高度，避免遮挡页脚 */
  body.rf-has-c{padding-bottom:58px}
}