/* ===== FLOAT_WECHAT_UNIFIED_V1 =====
 * 全站统一微信咨询浮标（方案A · 单文件真源）
 * 覆盖 4 种既有 DOM 形态，统一为「右侧垂直居中 · 微信绿胶囊 · 左侧展开二维码卡」：
 *   ① .float-wechat        （shiziku / kecheng / shizililiang / aboutus / anli 共 5028 页）
 *   ② .wechat-float        （ppxm 5 子站 + zdsyz 共 41 页，原有 SVG 图标 + .w-tip 弹层）
 *   ③ .float-contact       （站点根 2 页 + ppxm 首页 + 优课良师页）
 *   ④ [data-open-booking]  （tttcase 72 页，抽取既有按钮）
 * 资源路径按「本样式表自身位置」解析：本文件位于 /assets/，故图标写 wechat-icon.svg。
 * ============================================================ */

/* ---------- 归一变量 ---------- */
:root {
  --fw-green-1: #07C160;
  --fw-green-2: #059A4A;
  --fw-shadow: 0 8px 22px rgba(7,193,96,.42), 0 2px 6px rgba(0,0,0,.14);
}

/* ============ ① 主形态 .float-wechat ============ */
.float-wechat {
  position: fixed; right: 22px; top: 50%; z-index: 9900;
  display: inline-flex; align-items: center; gap: 9px;
  height: 54px; padding: 0 20px 0 17px; border-radius: 27px;
  background: linear-gradient(135deg, var(--fw-green-1) 0%, var(--fw-green-2) 100%);
  color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .3px; line-height: 1;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  box-shadow: var(--fw-shadow);
  transform: translateY(-50%); transition: transform .22s ease;
  animation: fw-halo 2.8s ease-out infinite;
}
.float-wechat > img { display: none !important; }
.float-wechat::before {
  content: ""; flex: 0 0 auto; width: 23px; height: 23px;
  background: url("wechat-icon.svg") center / contain no-repeat;
}
.float-wechat::after { content: "微信咨询"; }
.float-wechat:hover { transform: translateY(calc(-50% - 3px)); animation-duration: 1.3s; }
.float-wechat-qrcode {
  position: absolute; right: calc(100% + 14px); top: 50%; transform: translateY(-50%);
  width: 168px; padding: 12px 12px 14px; background: #fff; border-radius: 14px;
  box-shadow: 0 14px 38px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
  display: none; text-align: center;
}
.float-wechat-qrcode::before {
  content: ""; position: absolute; right: -6px; top: 50%;
  width: 14px; height: 14px; background: #fff;
  transform: translateY(-50%) rotate(45deg); border-radius: 2px;
}
.float-wechat-qrcode::after {
  content: ""; position: absolute; right: -20px; top: 0; bottom: 0; width: 20px;
}
.float-wechat:hover .float-wechat-qrcode { display: block; animation: fw-pop .24s ease-out; }
.float-wechat:active .float-wechat-qrcode { display: block; }
.float-wechat-qrcode img {
  display: block; width: 100% !important; height: auto !important; border-radius: 10px;
}
.float-wechat-qrcode p {
  text-align: center; font-size: 12px; color: #3F4161; margin-top: 9px; font-weight: 600;
}
.float-wechat-qrcode p::after {
  content: "135-9036-1178"; display: block; margin-top: 3px;
  font-size: 13px; font-weight: 700; color: #0B988C; letter-spacing: .5px;
}

/* ============ ② .wechat-float（ppxm 子站 / zdsyz 原有圆按钮）============ */
.wechat-float {
  position: fixed; right: 22px; top: 50%; bottom: auto; z-index: 9900;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 9px;
  width: auto !important; height: 54px !important;
  min-width: 0 !important; padding: 0 20px 0 17px !important;
  border-radius: 27px !important; border: 0 !important;
  background: linear-gradient(135deg, var(--fw-green-1) 0%, var(--fw-green-2) 100%) !important;
  color: #fff !important; font-size: 15px; font-weight: 600; letter-spacing: .3px;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  box-shadow: var(--fw-shadow);
  transform: translateY(-50%); transition: transform .22s ease;
  animation: fw-halo 2.8s ease-out infinite;
}
.wechat-float:hover { transform: translateY(calc(-50% - 3px)); animation-duration: 1.3s; }
.wechat-float::before {
  content: ""; flex: 0 0 auto; width: 23px; height: 23px;
  background: url("wechat-icon.svg") center / contain no-repeat;
}
.wechat-float::after { content: "微信咨询"; }
/* 原 SVG 图标隐藏（已由 ::before 接管） */
.wechat-float > svg { display: none !important; }
.wechat-float .w-tip {
  position: absolute; right: calc(100% + 14px); top: 50% !important;
  bottom: auto !important; left: auto !important;
  transform: translateY(-50%);
  width: 168px !important; padding: 12px 12px 14px !important;
  background: #fff; border-radius: 14px;
  box-shadow: 0 14px 38px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
  display: none; text-align: center;
}
.wechat-float:hover .w-tip { display: block; animation: fw-pop .24s ease-out; }
.wechat-float:active .w-tip { display: block; }
.wechat-float .w-tip img {
  display: block; width: 100% !important; height: auto !important; border-radius: 10px;
}
.wechat-float .w-tip p, .wechat-float .w-tip span { font-size: 12px; color: #3F4161; }
/* zdsyz 侧 .w-tip 里是占位 SVG（images/qrcode-placeholder.svg）——
   统一换成罗老师真实二维码。content:url() 相对本样式表(/assets/)解析。 */
.wechat-float .w-tip img[src*="qrcode-placeholder"] {
  content: url("wechat-qrcode.png");
}

/* ============ ③ .float-contact（根首页 / ppxm 首页 / 优课良师页）============ */
.float-contact {
  position: fixed; right: 22px; top: 50%; bottom: auto !important; z-index: 9900;
  transform: translateY(-50%);
}
.float-contact__btn {
  display: inline-flex !important; align-items: center; gap: 9px;
  height: 54px !important; width: auto !important; padding: 0 20px 0 17px !important;
  border-radius: 27px !important; border: 0 !important;
  background: linear-gradient(135deg, var(--fw-green-1) 0%, var(--fw-green-2) 100%) !important;
  color: #fff !important; font-size: 15px !important; font-weight: 600 !important;
  letter-spacing: .3px; white-space: nowrap; cursor: pointer; text-decoration: none;
  box-shadow: var(--fw-shadow);
  animation: fw-halo 2.8s ease-out infinite;
}
.float-contact__btn::before {
  content: ""; flex: 0 0 auto; width: 23px; height: 23px;
  background: url("wechat-icon.svg") center / contain no-repeat;
}
.float-contact__btn > * { display: none !important; }
.float-contact__btn::after { content: "微信咨询"; }
.float-contact:hover .float-contact__btn { transform: translateY(-3px); }
/* 面板：JS 通过 .float-contact__panel--open 类切换显示（click），
   同时保留 :hover 兜底 —— 两条都要写，缺一不可。 */
.float-contact__panel {
  position: absolute; right: calc(100% + 14px); top: 50%; transform: translateY(-50%);
  width: 200px; padding: 12px 12px 14px; background: #fff; border-radius: 14px;
  box-shadow: 0 14px 38px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
  display: none; text-align: center; z-index: 9901;
}
.float-contact__panel--open,
.float-contact:hover .float-contact__panel { display: block !important; animation: fw-pop .24s ease-out; }
.float-contact__panel img,
.float-contact__panel .float-contact__qr-img {
  display: block !important; width: 100% !important; height: auto !important; border-radius: 10px;
}
.float-contact__panel p, .float-contact__panel span,
.float-contact__panel-desc { font-size: 12px; color: #3F4161; }
/* 关闭按钮：原面板带 × 关闭键，保留可用并重排到右上角 */
.float-contact__panel-head {
  position: relative; padding-right: 20px; margin-bottom: 8px;
  font-size: 13px; font-weight: 600; color: #0B1B33; text-align: left;
}
.float-contact__panel-close {
  position: absolute; right: -2px; top: -2px; width: 20px; height: 20px;
  border: 0; border-radius: 50%; background: #F1F3F6; color: #66708A;
  font-size: 14px; line-height: 1; cursor: pointer; padding: 0;
}
.float-contact__panel-close:hover { background: #E3E7EE; color: #333; }

/* ============ ④ [data-open-booking]（tttcase 抽取既有按钮）============ */
a[data-open-booking].fw-as-float,
button[data-open-booking].fw-as-float,
[data-open-booking].fw-as-float {
  position: fixed; right: 22px; top: 50%; z-index: 9900;
  display: inline-flex !important; align-items: center; gap: 9px;
  height: 54px !important; width: auto !important; padding: 0 20px 0 17px !important;
  border-radius: 27px !important; border: 0 !important;
  background: linear-gradient(135deg, var(--fw-green-1) 0%, var(--fw-green-2) 100%) !important;
  color: #fff !important; font-size: 0 !important; font-weight: 600 !important;
  letter-spacing: .3px; white-space: nowrap; cursor: pointer;
  box-shadow: var(--fw-shadow);
  transform: translateY(-50%); transition: transform .22s ease;
  animation: fw-halo 2.8s ease-out infinite;
}
[data-open-booking].fw-as-float:hover { transform: translateY(calc(-50% - 3px)); }
[data-open-booking].fw-as-float::before {
  content: ""; flex: 0 0 auto; width: 23px; height: 23px;
  background: url("wechat-icon.svg") center / contain no-repeat;
}
[data-open-booking].fw-as-float::after { content: "微信咨询"; font-size: 15px; }

/* ---------- 关键帧 ---------- */
@keyframes fw-halo {
  0%   { box-shadow: 0 8px 22px rgba(7,193,96,.42), 0 0 0 0 rgba(7,193,96,.50); }
  70%  { box-shadow: 0 8px 22px rgba(7,193,96,.42), 0 0 0 15px rgba(7,193,96,0); }
  100% { box-shadow: 0 8px 22px rgba(7,193,96,.42), 0 0 0 0 rgba(7,193,96,0); }
}
@keyframes fw-pop {
  from { opacity: 0; transform: translateY(-50%) translateX(10px) scale(.97); }
  to   { opacity: 1; transform: translateY(-50%); }
}

/* ---------- 窄屏 ---------- */
@media (max-width: 640px) {
  .float-wechat, .wechat-float, .float-contact__btn, [data-open-booking].fw-as-float {
    height: 48px !important; padding: 0 17px 0 14px !important;
    gap: 7px; font-size: 14px !important; right: 14px !important; border-radius: 24px !important;
  }
  .float-wechat::before, .wechat-float::before,
  .float-contact__btn::before, [data-open-booking].fw-as-float::before {
    width: 20px; height: 20px;
  }
  [data-open-booking].fw-as-float::after { font-size: 14px; }
  .float-wechat-qrcode, .wechat-float .w-tip, .float-contact__panel {
    width: 152px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .float-wechat, .wechat-float, .float-contact__btn, [data-open-booking].fw-as-float {
    animation: none;
  }
}

/* ===== /FLOAT_WECHAT_UNIFIED_V1 ===== */