/* ══════════════════════════════════════════════════════
   联系我们弹窗  .contact-pop(全站组件,固定右下角)
   触发:任意 href 以 #contact 结尾的链接(导航/页脚),
        交互脚本在 index.html 底部 script 块
   背景全部手写半透明(用户指定零切图),色值采样自蓝湖切片:
   卡体 #201646 a.6 / 行卡与提示条 #353867 a.3;玻璃感靠 backdrop-blur
   设计稿:卡 504×488 圆角30,行卡 428×128,提示条 428×52
   ══════════════════════════════════════════════════════ */

.contact-pop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100; /* 压过导航(1000):用户主动唤起的层 */
  width: 504px;
  max-width: calc(100vw - 32px);
  padding: 30px 38px 38px;
  background: rgba(32, 22, 70, 0.6);
  border: 1px solid rgba(197, 184, 237, 0.22);
  border-radius: 30px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  /* 关闭态:淡出下沉,动画结束后再隐藏 */
  opacity: 0;
  transform: translateY(16px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s;
}
.contact-pop.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.contact-pop__close {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 20px;
  line-height: 32px;
  color: #C5B8ED;
  cursor: pointer;
}
.contact-pop__close:hover { color: #FFFFFF; }

.contact-pop__title {
  font-size: 28px;
  font-weight: 500;
  line-height: 34px;
  color: #FCEEFF;
}

/* ── 信息行卡 ── */
.contact-pop__row {
  margin-top: 34px;
  display: flex;
  align-items: flex-start;
  padding: 20px;
  background: rgba(53, 56, 103, 0.3);
  border-radius: 14px;
}
.contact-pop__row + .contact-pop__row { margin-top: 22px; }
.contact-pop__icon {
  width: 40px;
  height: 40px;
  display: block;
}
.contact-pop__row > div { margin: 2px 0 0 31px; }
.contact-pop__label {
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  color: #C5B8ED;
}
.contact-pop__value {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  color: #FCEEFF; /* 渐变兜底色 */
  background-image: linear-gradient(180deg, #FFFFFF 0%, #F4D5FF 41%, #A574FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contact-pop__hours {
  margin-top: 12px;
  font-size: 16px;
  line-height: 20px;
  color: #C5B8ED;
}

/* ── 底部提示条 ── */
.contact-pop__tip {
  margin-top: 22px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(53, 56, 103, 0.3);
  border-radius: 14px;
  font-size: 16px;
  color: #C5B8ED;
}

/* ── 响应式 ── */
@media (max-width: 560px) {
  .contact-pop {
    right: 16px;
    bottom: 16px;
    padding: 24px 20px 24px;
    border-radius: 24px;
  }
  .contact-pop__title { font-size: 22px; }
  .contact-pop__row > div { margin-left: 16px; }
}