/* ============================================================
   在线咨询弹窗（微信二维码）— 独立样式
   用途：首页 index.html 为自包含样式，不引入 site.css，
   因此弹窗样式单列一份，供全站（含首页）统一引入。
   依赖变量：--c-red / --c-white / --c-bg / --c-text / --c-text-2
             --c-line / --c-black / --f-serif / --s-2 / --s-3
   首页 :root 未定义 --s-* 间距变量，故在此补齐（与 site.css 同值）。
   ============================================================ */
:root {
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px;
}

.consult-mask {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(15,16,20,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
  padding: 24px;
}
.consult-mask.open { opacity: 1; pointer-events: auto; }
.consult-dialog {
  position: relative; background: var(--c-white); border-radius: 16px;
  width: 380px; max-width: 100%; padding: 40px 36px 36px; text-align: center;
  transform: translateY(24px) scale(0.96); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 32px 80px rgba(0,0,0,0.25);
}
.consult-mask.open .consult-dialog { transform: translateY(0) scale(1); }
.consult-dialog::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--c-red), #E63950); border-radius: 16px 16px 0 0;
}
.consult-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  border: none; background: var(--c-bg); border-radius: 50%;
  font-size: 16px; color: var(--c-text-2); transition: all 0.3s; line-height: 1;
}
.consult-close:hover { background: var(--c-red); color: var(--c-white); transform: rotate(90deg); }
.consult-title { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.consult-title .accent { color: var(--c-red); }
.consult-sub { font-size: 12px; color: var(--c-text-2); letter-spacing: 1px; margin-bottom: var(--s-3); }
.consult-qr-wrap {
  position: relative; display: inline-block; padding: 12px;
  border: 1px solid var(--c-line); border-radius: 12px; margin-bottom: var(--s-3);
}
.consult-qr-wrap img { width: 200px; height: 200px; }
.consult-qr-wrap::after {
  content: ''; position: absolute; top: -5px; right: -5px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--c-red);
  animation: dotPulse 2.2s ease-out infinite;
}
@keyframes dotPulse {
  0% { box-shadow: 0 0 0 0 rgba(200,16,46,0.45); }
  70% { box-shadow: 0 0 0 12px rgba(200,16,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,16,46,0); }
}
.consult-tip { font-size: 13px; color: var(--c-text); line-height: 1.8; }
.consult-tip b { color: var(--c-red); }
.consult-hotline {
  margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px dashed var(--c-line);
  font-size: 12px; color: var(--c-text-2);
}
.consult-hotline b {
  font-family: var(--f-serif); font-size: 18px; color: var(--c-black); font-weight: 700;
}
@media (max-width: 680px) {
  .consult-dialog { padding: 32px 24px 28px; }
  .consult-qr-wrap img { width: 170px; height: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .consult-qr-wrap::after { animation: none; }
}