/* ============================================================================
   揽德官网 · V4 右侧浮栏（PC 专用）  2026-10-13
   ----------------------------------------------------------------------------
   QQ咨询 / 微信二维码弹层 / 回顶部（滚动一定距离后出现）
   落点：footer.html 内 <link>（随 footer 在全站模板生效；老模板页同样生效）
   设计：冰蓝 V4 —— 白底描边卡 + 柔和投影 + 悬停上浮；与 53kf 浮球水平错开
   ========================================================================== */
#v4rail { display: none; }

@media (min-width: 1237px) {
  #v4rail {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    position: fixed;
    right: 16px;
    top: 64%; /* 中线下移：整栏落在 53kf 咨询浮球（含尾翼，约 26%-54% 高度带）下方安全区 */
    transform: translateY(-50%);
    z-index: 920;
  }
}

/* ---------- 按钮 ---------- */
.vr-btn {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #dbeefe;
  box-shadow: 0 8px 22px rgba(2, 132, 199, .12), 0 2px 6px rgba(2, 132, 199, .06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  color: #0284c7;
  text-decoration: none;
  padding: 0;
  font-family: inherit;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
  -webkit-tap-highlight-color: transparent;
}
.vr-btn svg { width: 19px; height: 19px; flex: none; }
.vr-btn span {
  font-size: 10px;
  line-height: 1;
  letter-spacing: .5px;
  color: #475569;
  transition: color .22s ease;
}
.vr-btn:hover {
  background: linear-gradient(160deg, #eaf6ff, #d8ecfd);
  border-color: #bae6fd;
  transform: translateX(-4px);
  box-shadow: 0 12px 26px rgba(2, 132, 199, .18);
}
.vr-btn:hover span { color: #0369a1; }
.vr-btn:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }

/* 微信激活态（弹层开启时） */
.vr-btn.on {
  background: linear-gradient(160deg, #38bdf8, #0284c7);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(2, 132, 199, .28);
}
.vr-btn.on span { color: #ffffff; }

/* ---------- 回顶部按钮：默认隐藏，滚动后出现 ---------- */
.vr-top {
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
}
.vr-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.vr-top.show:hover { transform: translateX(-4px); }

/* ---------- 微信二维码弹层 ---------- */
.vr-pop {
  position: absolute;
  right: 64px;
  top: 50%;
  width: 186px;
  padding: 14px 14px 12px;
  background: #ffffff;
  border: 1px solid #dbeefe;
  border-radius: 16px;
  box-shadow: 0 18px 46px rgba(2, 132, 199, .18), 0 4px 12px rgba(2, 132, 199, .08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) scale(.94);
  transform-origin: right center;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  pointer-events: none;
}
.vr-pop.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
  pointer-events: auto;
}
.vr-pop::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  background: #ffffff;
  border-right: 1px solid #dbeefe;
  border-top: 1px solid #dbeefe;
  transform: rotate(45deg);
}
.vr-pop-t {
  font-size: 12.5px;
  font-weight: 700;
  color: #0c4a6e;
  text-align: center;
  margin-bottom: 9px;
  letter-spacing: .5px;
}
.vr-pop img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #f8fafc;
}
.vr-pop-s {
  margin-top: 9px;
  font-size: 10.5px;
  line-height: 1.6;
  color: #64748b;
  text-align: center;
}
.vr-pop-s b {
  color: #0284c7;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
}