/* ===========================================================
   黄伟版落地页（BF-5833）— 站点级补充样式
   页面主体布局全部由模版自带 CSS（assets/vendor/）负责，
   这里只放：果冻按钮 / 吸底胶囊 / 语言切换 / 页脚，
   以及后台可增删的「普通图片块 / 信息条 / 文字卡片」的样式。
   =========================================================== */

/* 整页可点（与原模版一致） */
html, body { height: 100%; cursor: pointer; }
body { min-height: 100vh; }

/* ---------------- WhatsApp 果冻按钮（取自原页内联样式） ---------------- */
.btn-jelly {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: jelly 1.5s infinite ease-in-out;
  transform-origin: center;
  font-size: 1.1rem;
}
.btn-jelly .wa-ic {
  margin-right: 5px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
}
.wa-ic svg { width: 1.2em; height: 1.2em; }
.btn-disabled { opacity: .6; cursor: not-allowed; pointer-events: none; }
@keyframes jelly {
  0%, 100% { transform: scale(1, 1); }
  25% { transform: scale(1.1, 0.9); }
  35% { transform: scale(0.9, 1.1); }
  45% { transform: scale(1.05, 0.95); }
  55% { transform: scale(0.98, 1.02); }
  65% { transform: scale(1, 1); }
}
@media (prefers-reduced-motion: reduce) { .btn-jelly { animation: none; } }

/* ---------------- 轮播兜底（owl 加载失败时显示第一张并淡入切换） ---------------- */
.no-owl .single-testimonial-2 { display: none; }
.no-owl .single-testimonial-2.active { display: block; animation: carFade .6s ease both; }
@keyframes carFade { from { opacity: .25; } to { opacity: 1; } }

/* ---------------- 语言切换按钮（右上角固定） ---------------- */
.lang-switch {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 999;
  display: flex;
  gap: 6px;
}
.lang-btn {
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(0, 0, 0, .28);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
}
.lang-btn.active { background: #27d045; border-color: #27d045; }

/* ---------------- 底部吸底胶囊 ---------------- */
.wa-sticky {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 998;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #27d045;
  color: #fff;
  font-weight: 700;
  padding: 11px 26px;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
  max-width: calc(100vw - 24px);
}
.wa-sticky svg { width: 1.2em; height: 1.2em; }

/* ---------------- 页脚（原模版没有页脚，做一条极简的） ---------------- */
.site-footer {
  text-align: center;
  color: #9a9a9a;
  font-size: 13px;
  padding: 24px 12px 40px;
}
.site-footer a { text-decoration: underline; }

/* ---------------- 中屏（768–1199px）布局修正 ----------------
   模版在这段宽度会清掉标题的 mt-90 上边距，标题换成两行后
   正好叠进右上角的挂饰装饰图（桌面版不会有这个问题）。
   这里恢复桌面版的间距与字号、并按比例缩小挂饰图，
   让中屏窗口下的观感与桌面版（参考截图）一致。 */
@media (min-width: 768px) and (max-width: 1199px) {
  .funfact-content.mt-90 { margin-top: 90px; }
  .funfact-content.funfact-res h2 { font-size: 26px; }
  .bg-png-2 img { width: 150px; height: auto; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .funfact-content.funfact-res h2 { font-size: 40px; }
  .bg-png-2 img { width: 170px; height: auto; }
}

/* ---------------- 后台可增删的其它内容块 ----------------
   （普通图片块 / 信息条 / 文字卡片；模版四个主区块之外的补充） */
.site-section { padding: 30px 0; }
.site-section > .container { max-width: 1140px; }
.site-card {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 22px 24px;
  max-width: 880px;
  margin: 0 auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}
.site-card h2 { font-size: 22px; margin-bottom: 12px; }
.site-section img { max-width: 100%; }
.plain-img-wrap { max-width: 980px; margin: 0 auto; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 980px; margin: 0 auto; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; max-width: 980px; margin: 0 auto; }
@media (max-width: 767px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
.fit-square img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.hl-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px dashed #ececec; }
.hl-row:last-child { border-bottom: 0; }
.hl-icon { flex: 0 0 30px; width: 30px; height: 30px; margin-top: 3px; }
.hl-icon svg, .hl-icon img { width: 100%; height: 100%; object-fit: contain; }
.hl-text { flex: 1; }
.list-item { display: flex; gap: 10px; padding: 6px 0; }
.list-item .tick { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 5px; color: #27d045; }
.list-item .tick svg { width: 18px; height: 18px; }