/* ==========================================================================
   WhatsApp 客服落地页 — 仅首屏
   视觉参照：参考/layout-reference.jpg
   卡片内容为一张占位图（assets/support-card.png），换稿时直接替换图片即可
   ========================================================================== */

:root {
  --cream:      #FBF7EB;   /* 卡片底色（参考图实测 #FBF7EB） */
  --green:      #1FD064;   /* 按钮默认主色（后台可改，改后由 --cta-bg 覆盖） */

  --radius-card: 14px;
  --radius-pill: 999px;
  --shadow-card: 0 8px 26px rgba(120, 95, 30, .08), 0 1px 3px rgba(120, 95, 30, .04);
  /* 按钮投影不写死颜色：它跟着按钮色走，由 index.php 输出的 --cta-rgb 决定（见 .cta） */

  --font: "Poppins", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: #FFFFFF;
  font-family: var(--font);
  text-align: center;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* ==========================================================================
   首屏
   ========================================================================== */

/* 区块间距全部由后台「间距调整」控制，index.php 输出成 --sp-* 变量。
   .hero 用 flex 纵向排列：相邻区块的 margin 不会折叠，
   这样「上面的下间距」和「下面的上间距」是相加的，所见即所得。
   括号里的第二个值是后台没配置时的兜底，与 wa_spacing_defaults() 一致。 */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 默认竖向贴顶对齐。
     justify-content 显式写出（而不是靠默认值），
     这样即使以后有人给容器加 align-content 之类的规则，默认行为也不会漂。
     「垂直居中」由后台「间距与对齐」决定，index.php 输出成 data-valign，
     规则在下面 @media (min-width:520px) 里，手机端不会命中。 */
  justify-content: flex-start;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--sp-page-top, 10px) 0 var(--sp-page-bottom, 40px);
}

/* ---- 奶油色卡片：内部就是一张图 ---- */
.hero-card {
  position: relative;
  width: calc(100% - 20px);
  max-width: 460px;
  margin: var(--sp-card-top, 0px) auto var(--sp-card-bottom, 0px);
  background: var(--cream);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  line-height: 0;          /* 消除 img 底部行内间隙 */
}

.hero-art {
  display: block;
  width: 100%;
  height: auto;
  /* 兜底：图片未加载时也保持与参考图一致的方形比例，避免布局跳动 */
  aspect-ratio: 780 / 782;
}

/* ---- 主按钮 ----
   颜色全部走 CSS 变量，由后台「主按钮」维护，index.php 输出到 <main> 上：
     --cta-bg / --cta-fg / --cta-rgb 以及换色后才生成的 --cta-top / --cta-bot
   括号里的兜底值就是默认色，未设置过时与改造前逐像素一致。
   rgba(var(--cta-rgb, ...), .32) 这种拼法兼容性比 color-mix() 好得多，
   而且换色时渐变、投影、聚焦描边会一起跟着变，不会剩下一圈绿边。 */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: calc(100% - 48px);
  max-width: 432px;
  height: 54px;
  margin: var(--sp-cta-top, 26px) auto var(--sp-cta-bottom, 0px);
  padding: 0 18px;
  /* 卡片是 position:relative，会盖住后面的静态元素。
     这里抬高按钮与文案的层级，负间距时是「压在卡片上」而不是被卡片裁掉一截。 */
  position: relative;
  z-index: 1;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg,
              var(--cta-top, #26D96D) 0%,
              var(--cta-bg, var(--green)) 55%,
              var(--cta-bot, #19C258) 100%);
  box-shadow: 0 10px 24px rgba(var(--cta-rgb, 31, 208, 100), .32),
              0 2px 6px rgba(var(--cta-rgb, 31, 208, 100), .18);
  color: var(--cta-fg, #FFFFFF);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.cta:hover {
  filter: brightness(1.04);
  box-shadow: 0 12px 28px rgba(var(--cta-rgb, 31, 208, 100), .38),
              0 2px 6px rgba(var(--cta-rgb, 31, 208, 100), .18);
}

.cta:active {
  transform: scale(.985);
  box-shadow: 0 5px 14px rgba(var(--cta-rgb, 31, 208, 100), .3),
              0 2px 6px rgba(var(--cta-rgb, 31, 208, 100), .18);
}

.cta:focus-visible {
  outline: 3px solid rgba(var(--cta-rgb, 31, 208, 100), .45);
  outline-offset: 3px;
}

.cta-ico { width: 21px; height: 21px; flex: 0 0 auto; }

/* 文字很长时省略，而不是把固定 54px 高的胶囊撑破。
   .cta 是 flex 容器，span 必须给 min-width:0 才肯收缩。 */
.cta > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- 按钮下方说明（后台「底部文案」） ---- */
.foot-note {
  width: calc(100% - 48px);
  max-width: 432px;
  margin: var(--sp-foot-top, 18px) auto var(--sp-foot-bottom, 0px);
  position: relative;
  z-index: 1;
  color: #6B6659;
  /* 兜底字号：后台设了字号时 index.php 会在元素上内联 font-size 覆盖这里。
     值必须与 wa_content_size_default() 一致，否则未设置过的页面视觉会跳一下。 */
  font-size: 13px;
  line-height: 1.7;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.foot-left   { text-align: left; }
.foot-center { text-align: center; }
.foot-right  { text-align: right; }

/* html 模式下的常见元素给一套基础排版，避免贴进来后挤成一团 */
.foot-note p { margin: 0 0 8px; }
.foot-note p:last-child { margin-bottom: 0; }
.foot-note h1,
.foot-note h2,
.foot-note h3,
.foot-note h4 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #26241E;
}
.foot-note ul,
.foot-note ol { margin: 0 0 8px; padding-left: 20px; text-align: left; }
.foot-note li { margin: 2px 0; }
.foot-note strong,
.foot-note b { color: #26241E; font-weight: 700; }
.foot-note a { color: #12A84C; text-decoration: underline; text-underline-offset: 2px; }
.foot-note img { max-width: 100%; height: auto; border-radius: 8px; }
.foot-note iframe,
.foot-note video { max-width: 100%; border: 0; }
.foot-note hr {
  height: 1px;
  margin: 12px 0;
  border: 0;
  background: #EDE6D6;
}
.foot-note small { font-size: 12px; }

/* ==========================================================================
   断点
   ========================================================================== */

@media (min-width: 520px) {
  /* 大屏只放大「底部」留白。
     顶部保持后台设定的原值：桌面端默认是贴顶对齐，顶部留白放大 1.6 倍会让
     「设 50px 实际 80px」，调间距时对不上，也与顶对齐的直觉相反。
     底部写在 calc 里而不是另写固定值，设成 0 时大屏也是 0。 */
  .hero {
    padding-bottom: calc(var(--sp-page-bottom, 40px) * 1.4);
  }

  /* 垂直居中（后台可切换）。
     两点需要注意：
     1) 居中时把底部留白还原成 1 倍 —— 否则下边比上边多 40%，
        内容会被顶偏上，看着「居中但偏上」，调间距也永远调不准。
     2) justify-content 用 safe center：内容比视口高时（比如竖长图）
        自动退回贴顶，不会把卡片顶部推到可视区之外且滚不回来。
        先写 center 给老浏览器兜底，再写 safe center 覆盖，不支持的会忽略第二行。 */
  .hero[data-valign="center"] {
    justify-content: center;
    justify-content: safe center;
    padding-bottom: var(--sp-page-bottom, 40px);
  }
}

/* 桌面端：整块收窄居中，与移动端保持同样的比例关系 */
@media (min-width: 900px) {
  .hero-card { max-width: 440px; }
  .cta { max-width: 392px; }
  .foot-note { max-width: 392px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .001ms !important;
  }
}