/* 归岑 · 收银台样式（只给 site/pay/ 用；官网自己的 assets/styles.css 不掺进来）
 *
 * 为什么单起一份而不是复用 assets/styles.css：那份是**官网**的（长文排版、视差动效、
 * 1040px 版面），而收银台是个**功能页**——手机上要一屏看完、按钮要大、不能有动效干扰。
 * 共用设计令牌（颜色/字体）以保持同一个牌子，但版式按"一只手能操作"来排。
 */

:root {
  --paper:      #faf8f4;
  --paper-deep: #f3f0e8;
  --ink:        #1a1816;
  --ink-soft:   #4a453f;
  --ink-faint:  #6f6a60;   /* ⚠️ 2026-09-29 从 #8a837a 调深：旧值只有 3.53:1，
                              过不了 WCAG AA 对小字的 4.5:1（官网 assets/styles.css
                              2026-09-23 已改，这份当时漏了）。新值 5.07:1 */
  --line:       #e4ded2;
  --amber:      #b7791f;   /* 会员色（与 App 里的会员徽标同色系） */
  --cinnabar:   #a8453a;
  --font-serif: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
                "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
}

* , *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* 收银台不做暗色/夜灯：这里是一次性动作，跟 App 的主题无关 */
}

.wrap { max-width: 480px; margin: 0 auto; padding: 24px 20px 40px; }

/* ---------- 头部 ---------- */
.head { padding: 8px 0 20px; }
.head h1 {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.head p { margin: 0; font-size: 14px; color: var(--ink-faint); }

/* ---------- 时长选项 ---------- */
.plans { display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; }

.plan {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.plan:hover { border-color: #cbc3b4; }
.plan[aria-pressed="true"] {
  border-color: var(--amber);
  background: #fffdf8;
  box-shadow: 0 0 0 1px var(--amber) inset;
}
.plan-main { display: flex; flex-direction: column; gap: 2px; }
.plan-name { font-size: 17px; font-weight: 600; color: var(--ink); }
.plan-note { font-size: 12px; color: var(--ink-faint); }
.plan-price { display: flex; align-items: baseline; gap: 2px; white-space: nowrap; }
.plan-price .amt { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--ink); }
.plan-price .cur { font-size: 13px; color: var(--ink-soft); }
.plan-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-size: 11px; line-height: 1.6; color: var(--amber);
  border: 1px solid currentColor; border-radius: 4px;
}

/* ---------- 支付按钮 ---------- */
.pays { display: flex; flex-direction: column; gap: 10px; }
.pay {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 54px;
  padding: 12px 16px;
  border: 0; border-radius: 14px;
  font: inherit; font-size: 17px; font-weight: 600;
  color: #fff; background: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pay.alipay { background: #1677ff; }
.pay.wechat { background: #07c160; }
.pay:disabled { opacity: 0.55; cursor: default; }

/* ---------- 说明与页脚 ---------- */
.fine {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-faint);
}
.fine a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }

.msg {
  margin: 16px 0 0; padding: 14px 16px;
  background: var(--paper-deep);
  border-radius: 12px;
  font-size: 14px; line-height: 1.8; color: var(--ink-soft);
}
.msg b { color: var(--ink); font-weight: 600; }
.msg.err { background: #fdf3f1; color: #7d372e; }
.msg.err b { color: #7d372e; }
.msg.ok { background: #f1f7f1; color: #2f5d34; }
.msg.ok b { color: #2f5d34; }

.hide { display: none !important; }

/* ---------- 只读的价目（没有票据时）----------
   这一页同时是官网的「会员价格」页，渠道审核会直接在浏览器里打开它（见 index.html 头注释）。
   没有票据时价目照常显示，但**不是可点的选择**：按下去也开不出单。 */
.plan:disabled { cursor: default; }
.plan:disabled:hover { border-color: var(--line); }

.skeleton {
  height: 64px; border-radius: 14px; background: var(--paper-deep);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ---------- 顶栏 ---------- 
   2026-09-29 加：让这一页不再是一座孤岛（站内可达 + 备案号）。不固定、不做动效——
   收银台是一次性动作，用户不需要一个浮在头上的导航。 */
.topbar .wrap { padding: 20px 20px 0; }

.topbar .brand {
  /* 2026-10-11 产品负责人：「公司名没有和公司 logo 竖直居中对齐」。
     原先这里是 `display: block` —— 32px 的徽记和 13px 的名字挤在同一行、
     按**文字基线**对齐，看着就是"字沉下去、徽记浮着"。
     改成与官网页头同一套写法（inline-flex + align-items:center + gap），
     不依赖图片内部的像素对齐，以后改字号也不会再错位。 */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
}

/* 徽记的高度由 CSS 定（HTML 上那两个 width/height 属性只是兜底），
   与官网页头一致：32 高、宽度自适应 */
.topbar .brand img { display: block; height: 32px; width: auto; }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 13px;
  letter-spacing: 0.06em;
}

.nav a { color: var(--ink-faint); }
.nav a:hover { color: var(--ink); }

/* ---------- 页脚 ---------- */
.footer { margin-top: 34px; border-top: 1px solid var(--line); }

.footer .wrap {
  padding: 18px 20px 36px;
  font-size: 12.5px;
  line-height: 2;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

.footer a { color: var(--ink-faint); text-decoration: underline; text-underline-offset: 3px; }
.footer a:hover { color: var(--ink); }

.footer-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; }

/* 手机上站内链接的热区 ≥44px（与 App 同一条规矩：只有字形是热区，点不中） */
@media (max-width: 520px) {
  .nav a,
  .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
}