/* ┌────────────────────────────────────────────┐
 * │ 8.3  中间关注区（社交图标）— 保留原始实现    │
 * └────────────────────────────────────────────┘ */

.contact-center {
  text-align: left;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 250px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition:
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s ease;
}

.contact-center h3 {
  font-size: 26px;
  margin-bottom: 8px;
  color: #ffffff;
}

.social-icons {
  display: flex;
  justify-content: flex-start;
  gap: 25px;
}

.social-icon {
  --icon-accent: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  /* ★ 彩色毛玻璃底板 */
  background: color-mix(in srgb, var(--icon-accent) 18%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  /* ★ 双层边框：内圈实色 + 外圈微光 */
  border: 1.5px solid color-mix(in srgb, var(--icon-accent) 80%, transparent);
  /* ★ 内发光 + 顶部高光，模拟玻璃质感 */
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.15),
    inset 0 -1px 2px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  transition: all 0.35s ease;
}

.social-icon:hover {
  transform: translateY(-3px) translateZ(0);
  background: color-mix(in srgb, var(--icon-accent) 30%, transparent);
  border-color: var(--icon-accent);
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.2),
    inset 0 -1px 2px rgba(0, 0, 0, 0.1),
    0 6px 20px color-mix(in srgb, var(--icon-accent) 35%, transparent);
}

/* ── 社交图标 SVG ── */
.social-icon svg {
  width: 25px;
  height: 25px;
  display: block;
  transition: fill 0.3s ease;
}

/* ── 各平台专属色 ── */
.social-icon.qq {
  --icon-accent: #12b8f588;
} /* QQ 蓝 */
.social-icon.wechat {
  --icon-accent: #07c16160;
} /* 微信绿 */
.social-icon.bilibili {
  --icon-accent: #fb72997e;
} /* B站粉 */
.social-icon.tiktok {
  --icon-accent: #8a5cf677;
} /* 抖音紫 */
.social-icon.weibo {
  --icon-accent: #f5610b8f;
} /* 微博橙 */
.social-icon.rednote {
  --icon-accent: #e6162e83;
} /* 小红书红 */

/* ── 强制所有 SVG 子元素继承主题色 ── */
.social-icon svg,
.social-icon svg path,
.social-icon svg g,
.social-icon svg circle,
.social-icon svg rect,
.social-icon svg polygon {
  fill: var(--icon-accent) !important;
}

/* ┌────────────────────────────────────────────┐
 * │ 8.4  社交图标悬停二维码弹窗 — 保留原始实现  │
 * └────────────────────────────────────────────┘ */

/* ── 图标包裹层 ── */
.icon-wrapper {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  transform: translateY(4px);
  transition:
    transform 0.3s ease,
    z-index 0s;
}

.icon-wrapper:hover {
  transform: translateY(-3px);
  z-index: 100;
}

/* ── 隐形桥接区域（防止鼠标移向弹窗时弹窗消失） ── */
.icon-wrapper::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 20px;
  pointer-events: none;
}

.icon-wrapper:hover::before {
  pointer-events: auto;
}

/* ── 弹窗容器（只负责定位和可见性开关） ── */
.qrcode-popup {
  position: absolute;
  bottom: calc(100% + 15px);
  left: 50%;
  transform: translateX(-50%); /* ★ 补上这一行，水平居中 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.35s;
  z-index: 9999;
}

.icon-wrapper:hover .qrcode-popup {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s; /* 打开时：立即显示 */
}

/* ── 毛玻璃卡片（负责动画 + 模糊效果） ── */
.qrcode-popup-card {
  /* ── 动画（transform + opacity 在这层做） ── */
  transform: translateY(10px) scale(0.9);
  opacity: 0;
  transition:
    opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  /* ── 毛玻璃核心 ── */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(20px);
  /* ── 外观 ── */
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  /* ── 布局 ── */
  padding: 4px 4px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  white-space: nowrap;
}

/* ── hover 时：卡片弹出 + 变清晰 ── */
.icon-wrapper:hover .qrcode-popup-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ── 二维码图片 ── */
.qrcode-popup-card img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}

/* ── 标签文字 ── */
.qrcode-popup-card p {
  margin: 0;
  padding: 0;
  transform: translateY(-4px);
  font-size: 12px;
  line-height: 1;
  color: #fff;
  font-weight: 600;
}