/* 官网页脚 · 社交二维码宣传（对标上汽集团页脚：悬停/点击弹出二维码）
 * 由 assets/social-qr.js 注入，图标位于页脚品牌区，弹卡向上浮出。
 */

.sr-social { margin-top: 16px; }
.sr-social__label { font-size: 13px; color: var(--ink-4, #8a857a); margin-bottom: 10px; letter-spacing: .5px; }
.sr-social__icons { display: flex; gap: 12px; align-items: center; }

.sr-soc { position: relative; }
.sr-soc__btn {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-d, #e3e0d6); background: #fff;
  color: var(--ink-2, #2d2a24); font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.sr-soc__btn svg { width: 22px; height: 22px; display: block; }
.sr-soc__btn:hover, .sr-soc.open .sr-soc__btn { background: var(--moss, #578d31); border-color: var(--moss, #578d31); color: #fff; transform: translateY(-2px); }

/* 二维码弹卡（向上浮出，底部带小三角指向图标） */
.sr-qrpop {
  position: absolute; bottom: calc(100% + 14px); left: 50%;
  width: 196px; padding: 14px 14px 10px;
  background: #fff; border-radius: 16px; border: 1px solid var(--line-d, #ece9e0);
  box-shadow: 0 14px 38px rgba(20, 30, 12, .18);
  transform: translateX(-50%) translateY(8px) scale(.9);
  transform-origin: bottom center;
  opacity: 0; pointer-events: none; z-index: 60;
  transition: opacity .18s ease, transform .18s ease;
}
.sr-qrpop::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 9px solid transparent; border-top-color: #fff;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.05));
}
.sr-soc:hover .sr-qrpop, .sr-soc.open .sr-qrpop {
  opacity: 1; transform: translateX(-50%) translateY(0) scale(1); pointer-events: auto;
}
.sr-qrpop__img { width: 100%; height: auto; display: block; border-radius: 10px; background: #fff; }
.sr-qrpop__name { text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-2, #2d2a24); margin-top: 9px; }

/* 移动端：图标一行可横滑，弹卡略窄 */
@media (max-width: 640px) {
  .sr-social__icons { flex-wrap: wrap; }
  .sr-qrpop { width: 168px; }
}