@charset "utf-8";
/* ============================================================
   全站微信咨询弹窗 / 浮动探头 / 页面内探头条
   参考 kstaibao.com 的交互，重做视觉以匹配整站设计系统
   ============================================================ */

/* ---------- 浮动探头（右侧竖标签） ---------- */
.wxfab{
  position:fixed;right:14px;bottom:calc(clamp(84px,10vw,110px) + 4px);z-index:41;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  width:46px;padding:11px 0 12px;border:1px solid var(--line);border-radius:3px;
  background:#fff;color:#0B0E12;box-shadow:0 12px 28px -16px rgba(11,14,18,.5);
  cursor:pointer;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s;
}
.wxfab svg{width:20px;height:20px;color:#09BB07;}
.wxfab .tx{writing-mode:vertical-rl;font-size:11.5px;font-weight:700;letter-spacing:.16em;line-height:1;}
.wxfab::before{
  content:"";position:absolute;inset:-1px;border-radius:3px;border:1px solid #09BB07;
  opacity:0;animation:wxpulse 2.8s ease-out infinite;pointer-events:none;
}
@keyframes wxpulse{0%{opacity:.55;transform:scale(1)}70%{opacity:0;transform:scale(1.14)}100%{opacity:0}}
.wxfab:hover{background:#0B0E12;color:#fff;border-color:#0B0E12;transform:translateY(-2px);}
.wxfab:hover svg{color:#3ddc3d;}

/* ---------- 遮罩与卡片 ---------- */
.wxm{position:fixed;inset:0;z-index:100;display:none;}
.wxm.on{display:block;}
.wxm .mask{position:absolute;inset:0;background:rgba(6,8,10,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:wxfade .22s ease;}
@keyframes wxfade{from{opacity:0}to{opacity:1}}
.wxm .card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(94vw,720px);max-height:90vh;overflow:auto;background:#fff;
  box-shadow:0 40px 100px -40px rgba(0,0,0,.7);animation:wxin .3s var(--ease);
  border-radius:3px;
}
@keyframes wxin{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
.wxm .x{
  position:absolute;right:10px;top:10px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  color:#8A97A6;font-size:22px;line-height:1;border-radius:50%;transition:.2s;z-index:2;
}
.wxm .x:hover{background:rgba(11,14,18,.06);color:#0B0E12;}

/* 头部 */
.wxm .hd{padding:clamp(22px,3.4vw,34px) clamp(20px,3.4vw,36px) 0;}
.wxm .eb{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.14em;color:#09BB07;text-transform:uppercase;}
.wxm .eb::before{content:"";width:6px;height:6px;border-radius:50%;background:#09BB07;box-shadow:0 0 0 4px rgba(9,187,7,.14);}
.wxm h3{margin:12px 0 0;font-size:clamp(19px,2vw,26px);line-height:1.35;letter-spacing:-.01em;color:#0B0E12;}
.wxm .hd p{margin-top:10px;font-size:13.6px;line-height:1.8;color:#5A6672;}
.wxm .hd p b{color:#0B0E12;font-weight:800;}

/* 主体 */
.wxm .bd{display:grid;grid-template-columns:216px 1fr;gap:clamp(18px,3vw,34px);padding:clamp(18px,2.6vw,26px) clamp(20px,3.4vw,36px) 0;align-items:start;}
.wxm .qr{text-align:center;}
.wxm .qr .box{position:relative;border:1px solid var(--line);padding:10px;background:#fff;cursor:pointer;}
.wxm .qr .box img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block;}
.wxm .qr .box::after{
  content:"点击复制微信号";position:absolute;left:0;right:0;bottom:0;background:rgba(11,14,18,.78);color:#fff;
  font-size:11px;padding:5px 0;opacity:0;transition:.2s;
}
.wxm .qr .box:hover::after{opacity:1;}
.wxm .qr .cap{font-size:11.5px;color:#8A97A6;margin-top:8px;letter-spacing:.02em;}
.wxm .qr .tel{
  display:flex;align-items:center;justify-content:center;gap:7px;margin-top:10px;height:38px;
  border:1px solid var(--line);font-size:13px;font-weight:700;color:#0B0E12;border-radius:2px;
}
.wxm .qr .tel svg{width:15px;height:15px;color:var(--accent);}
.wxm .qr .tel:hover{border-color:var(--accent);color:var(--accent);}

.wxm .steps{counter-reset:s;}
.wxm .steps li{
  position:relative;padding:0 0 16px 34px;font-size:13.4px;line-height:1.7;color:#4A5563;
}
.wxm .steps li:last-child{padding-bottom:0;}
.wxm .steps li::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;
  background:#0B0E12;color:#fff;font-family:var(--num-font);font-size:11.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.wxm .steps li b{display:block;color:#0B0E12;font-weight:800;font-size:13.6px;margin-bottom:2px;}
.wxm .steps li em{font-style:normal;color:#8A97A6;}

/* 底部 */
.wxm .ft{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:clamp(18px,2.6vw,26px);padding:16px clamp(20px,3.4vw,36px);background:#F4F5F7;border-top:1px solid var(--line);
}
.wxm .copy{
  display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;background:#0B0E12;color:#fff;
  border-radius:2px;font-weight:700;font-size:13.8px;transition:.22s;
}
.wxm .copy:hover{background:var(--accent);}
.wxm .copy small{font-size:10.5px;font-weight:400;color:rgba(255,255,255,.55);display:block;line-height:1.2;letter-spacing:.04em;}
.wxm .copy .id{font-family:var(--num-font);font-size:15.5px;letter-spacing:.04em;}
.wxm .go{
  display:inline-flex;align-items:center;gap:7px;height:46px;padding:0 18px;background:#09BB07;color:#fff;
  border-radius:2px;font-weight:700;font-size:13.8px;transition:.22s;
}
.wxm .go:hover{background:#07a006;}
.wxm .go svg{width:17px;height:17px;}
.wxm .nt{font-size:11.5px;color:#8A97A6;line-height:1.6;}

/* toast */
.wxtoast{
  position:fixed;left:50%;bottom:110px;transform:translate(-50%,10px);z-index:110;
  background:rgba(11,14,18,.94);color:#fff;font-size:13px;padding:10px 18px;border-radius:3px;
  opacity:0;pointer-events:none;transition:.28s;max-width:80vw;text-align:center;line-height:1.6;
}
.wxtoast.on{opacity:1;transform:translate(-50%,0);}

/* ---------- 页面内探头条 ---------- */
.wxprobe{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2.4vw,28px);align-items:center;
  padding:clamp(14px,2vw,22px) clamp(16px,2.4vw,28px);background:var(--band);color:#fff;
  position:relative;overflow:hidden;isolation:isolate;
}
.wxprobe::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(90% 140% at 92% 8%,rgba(9,187,7,.22),transparent 58%);
}
.wxprobe .q{width:clamp(64px,8vw,86px);height:clamp(64px,8vw,86px);background:#fff;padding:5px;flex:none;}
.wxprobe .q img{width:100%;height:100%;object-fit:contain;}
.wxprobe .t .k{font-size:11px;letter-spacing:.14em;color:#3ddc3d;font-weight:700;text-transform:uppercase;}
.wxprobe .t h4{color:#fff;font-size:clamp(15px,1.2vw+10px,19px);margin-top:6px;line-height:1.4;}
.wxprobe .t p{color:rgba(255,255,255,.6);font-size:12.6px;line-height:1.7;margin-top:5px;}
.wxprobe .b{display:flex;gap:8px;flex-wrap:wrap;}
.wxprobe .b a,.wxprobe .b button{
  display:inline-flex;align-items:center;gap:7px;height:43px;padding:0 16px;font-size:13px;font-weight:700;
  border:1px solid rgba(255,255,255,.26);border-radius:2px;color:#fff;white-space:nowrap;
}
.wxprobe .b .p{background:#09BB07;border-color:#09BB07;}
.wxprobe .b a:hover,.wxprobe .b button:hover{background:#fff;color:#0B0E12;border-color:#fff;}

/* 侧栏版 */
.wxside{background:#fff;border:1px solid var(--line);padding:16px;text-align:center;}
.wxside img{width:120px;height:120px;object-fit:contain;margin:0 auto;border:1px solid var(--line);padding:5px;}
.wxside .t{font-size:13.4px;font-weight:800;margin-top:10px;}
.wxside .s{font-size:11.8px;color:#8A97A6;line-height:1.6;margin-top:4px;}
.wxside .btn{width:100%;margin-top:10px;height:42px;min-height:42px;font-size:12.6px;}

/* ---------- 移动端：底部抽屉 ---------- */
@media(max-width:640px){
  .wxfab{right:8px;bottom:auto;top:44%;transform:translateY(-50%);width:42px;padding:9px 0;}
  .wxfab .tx{font-size:10.5px;letter-spacing:.1em;}
  .wxfab:hover{transform:translateY(-50%);}
  .wxm .card{
    left:0;right:0;top:auto;bottom:0;transform:none;width:100%;max-height:88vh;border-radius:14px 14px 0 0;
    animation:wxup .3s var(--ease);padding-bottom:env(safe-area-inset-bottom);
  }
  @keyframes wxup{from{transform:translateY(100%)}to{transform:translateY(0)}}
  .wxm .x{right:8px;top:8px;width:40px;height:40px;}
  .wxm .bd{grid-template-columns:1fr;gap:18px;}
  .wxm .qr{display:grid;grid-template-columns:132px 1fr;gap:14px;text-align:left;align-items:center;}
  .wxm .qr .box{padding:7px;}
  .wxm .qr .cap{display:none;}
  .wxm .qr .tel{margin-top:10px;justify-content:flex-start;border:0;height:auto;padding:0;}
  .wxm .ft{flex-direction:column;align-items:stretch;gap:10px;}
  .wxm .copy,.wxm .go{justify-content:center;width:100%;}
  .wxprobe{grid-template-columns:auto 1fr;gap:14px;}
  .wxprobe .b{grid-column:1/-1;}
  .wxprobe .b a,.wxprobe .b button{flex:1;justify-content:center;}
  .wxtoast{bottom:88px;}
}
@media(hover:none){
  .wxm .qr .box::after{opacity:1;background:rgba(11,14,18,.6);}
}

/* ---------- 弹窗内表单（二维码 + 表单双栏） ---------- */
.wxm .bd.has-form{grid-template-columns:196px minmax(0,1fr);}
.wxf{display:grid;gap:9px;}
.wxf .r2{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.wxm .wxf .fd>span{display:block;font-size:11px;letter-spacing:.06em;color:#8A97A6;margin-bottom:4px;}
.wxm .wxf input[type=text],.wxm .wxf input[type=tel],.wxm .wxf select,.wxm .wxf textarea{
  width:100%;height:38px;padding:0 11px;font-size:13.2px;color:#0B0E12;background:#fff;
  border:1px solid #DDE2E8;border-radius:2px;font-family:inherit;transition:.18s;
}
.wxm .wxf textarea{height:auto;padding:8px 11px;line-height:1.65;resize:vertical;min-height:66px;}
.wxm .wxf input:focus,.wxm .wxf select:focus,.wxm .wxf textarea:focus{
  outline:none;border-color:#09BB07;box-shadow:0 0 0 3px rgba(9,187,7,.12);}
.wxm .wxf input::placeholder,.wxm .wxf textarea::placeholder{color:#A9B3BE;}
.wxm .wxf .ck{display:flex;align-items:flex-start;gap:7px;font-size:11.4px;color:#8A97A6;line-height:1.5;cursor:pointer;}
.wxm .wxf .ck input{position:absolute;opacity:0;width:0;height:0;}
.wxm .wxf .ck i{flex:none;width:14px;height:14px;border:1px solid #C9D1D9;border-radius:2px;margin-top:1px;
  position:relative;transition:.18s;}
.wxm .wxf .ck input:checked+i{background:#09BB07;border-color:#09BB07;}
.wxm .wxf .ck input:checked+i::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);}
.wxm .wxf .wf-btn{width:100%;height:42px;min-height:42px;justify-content:center;gap:8px;font-size:13.6px;border:0;}
.wxm .wxf .wfn{font-size:11px;color:#7C8894;text-align:center;line-height:1.5;}
.wxm .wxf .err{font-size:11.4px;color:#D93A2B;min-height:0;}
.wxm .wxd{display:none;text-align:center;padding:26px 8px;}
.wxm .wxd.on{display:block;}
.wxm .wxd .ok{width:52px;height:52px;border-radius:50%;background:rgba(9,187,7,.1);color:#09BB07;
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.wxm .wxd .ok svg{width:26px;height:26px;}
.wxm .wxd h4{margin:0 0 8px;font-size:17px;color:#0B0E12;}
.wxm .wxd p{margin:0;font-size:12.8px;line-height:1.75;color:#5A6672;}
.wxm .wxd .re{display:inline-block;margin-top:14px;font-size:12.4px;color:#09BB07;
  border-bottom:1px solid currentColor;cursor:pointer;}
@media(max-width:640px){
  .wxm .bd.has-form{grid-template-columns:1fr;gap:16px;}
  .wxm .qr{grid-template-columns:112px 1fr;gap:12px;}
  .wxm .wxf .r2{grid-template-columns:1fr;}
}