/* ─────────────────────────────────────────────────────────────────────────
   yaypoints.com — 共用樣式
   數值全部由 design repo (~/Developer/yaypoints_website) 嘅 .dc.html 原文抄。
   改數之前請 grep 返 design 原文對住做，唔好靠估（見 website/README.md）。

   呢個檔淨係擺三類嘢：
     ① design 各版 <helmet><style> 入面嗰啲（tokens、ol.tos、表單）
     ② design 用 style-hover="" 表達、真正 HTML 要用 :hover 寫嘅
     ③ design canvas 有 runtime 幫手、靜態頁要自己做嘅（accordion、focus）
   其餘 layout 一律留返做 inline style，同 design 原文逐行對得返。
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --acc: #c9a96a;
  --acc2: #c9a96a;
  --glow: rgba(233, 231, 226, .14);
  --accInk: #141310;
  --tx: #e9e7e2;
  --tx2: #9a968e;
  --line: rgba(233, 231, 226, .09);
  --card: #16181b;
  --good: #8fb98f;
}

/* ⚠️ 2026-09-04 新版 design：--acc 同 --acc2 **同一隻金色**。以前 member 青／
   merchant 紫嘅分色冇咗，好多 linear-gradient(--acc,--acc2) 實際上係純色。
   兩個 var 照留（design 原文都係留住兩個），下一版想再分色改呢度就得。

   同一版起，landing 同法律／support 頁個 --line / --card 已經統一（.09 / #16181b），
   所以以前嗰個 `.doc` override 冇咗——`class="doc"` 仍然留喺 HTML 度做 hook。 */

/* ⚠️ 特登冇 `* { box-sizing: border-box }`。
   Design 係逐個 element inline 寫 box-sizing，冇寫嗰啲**就係要** content-box
   （例如 download CTA 個 QR 框：88px + 9px padding ×2 = 實際 106px）。
   落個全域 reset 會令嗰啲位細 18px，而且成頁向上飄——中過一次。
   要 border-box 就好似 design 咁逐個寫。 */

body {
  margin: 0;
  background: #101214;
  color: var(--tx);
  font-family: 'Sora', system-ui, sans-serif;
  overflow-x: hidden;
}

a { color: var(--acc); text-decoration: none; }
/* ⚠️ 照抄 design：新版 a 同 a:hover 都係 #c9a96a，即係 link hover 冇任何視覺回饋
   （舊版係青→紫）。已經同 Roy 報告，等 designer 覆。--acc2 同 --acc 同值，
   所以呢行寫 var(--acc2) 同 design 出嚟一模一樣，將來佢哋再分色就自動跟返。 */
a:hover { color: var(--acc2); }

/* 鍵盤 focus 一定要見到。design canvas 冇 model 過（見 README「design 冇嘅嘢」）。 */
:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 跳過導覽——鍵盤／screen reader 用。 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--acc);
  color: var(--accInk);
  padding: 10px 16px;
  font: 700 13px 'Sora', sans-serif;
  border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; color: var(--accInk); }

/* ── NAV ──────────────────────────────────────────────────────────────── */

.nav-link:hover { color: var(--acc); }

/* ── 頁尾 ─────────────────────────────────────────────────────────────────
   Design 每版嘢個頁尾都唔會列返自己嗰條 link（landing 冇「← back to home」）。
   一個 partial 出齊四條，靠 data-path 收起唔啱嗰條，唔使開四個 partial。      */

.footer-links a { color: var(--tx2); }
.footer-links a:hover { color: var(--acc); }
.footer-links[data-path="/"] .footer-home,
.footer-links[data-path="/privacy/"] a[href$="privacy/"],
.footer-links[data-path="/terms/"] a[href$="terms/"],
.footer-links[data-path="/support/"] a[href$="support/"] { display: none; }

/* ── Store 掣 ─────────────────────────────────────────────────────────────
   Design 入面呢舊嘢逐字重複咗八次（hero ×4、download CTA ×4），
   兩個尺寸嘅分別淨係 gap / padding / radius / min-height / 字級。            */

.store-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #000;
  border: 1px solid #a6a6a6;
  border-radius: 9px;
  padding: 8px 16px;
  min-height: 48px;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.15;
  color: #fff;
}
.store-btn:hover { border-color: #fff; color: #fff; }
.store-btn svg { width: 22px; height: 22px; flex: none; }
.store-btn b { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }
.store-btn span { display: block; font-size: 12px; }
.store-btn .caps { letter-spacing: .06em; }

.store-btn--sm { gap: 9px; border-radius: 8px; padding: 7px 14px; min-height: 44px; }
.store-btn--sm svg { width: 20px; height: 20px; }
.store-btn--sm b { font-size: 15px; }

/* 未上架（site.config.json 個 URL 仲係 null）——樣照 design，但撳極都唔會走。 */
.store-btn[href="#download"] { cursor: default; }

/* ── QR ───────────────────────────────────────────────────────────────────
   Design 嘅 QR 係 conic-gradient 砌出嚟嘅裝飾圖案（.qr-art），scan 唔到嘢。
   2026-09-15 起 index.html 四個框已經換咗真 QR <img>（`scripts/make-website-qr.mjs`
   生成，指去 /get/member/、/get/business/ 分流頁）。.qr-art 樣式留住，下一版
   design 照抄入嚟都唔會爛；照抄之後記得再用 <img> 頂走佢。
   2026-09-04 新版 design 拆走咗 pulse 動畫（yaypulse keyframes 都刪埋），
   hero 兩個 QR 改用實陰影，download CTA 兩個乾脆冇陰影冇邊——見 index.html。 */

.qr-box {
  width: var(--qr-size, 96px);
  height: var(--qr-size, 96px);
  border-radius: var(--qr-radius, 18px);
  background: #fff;
  padding: 9px;
  flex: none;
}
.qr-art { position: relative; width: 100%; height: 100%; }
.qr-art i {
  position: absolute;
  width: 26%;
  height: 26%;
  border: 2px solid #000;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-art i::after { content: ''; width: 45%; height: 45%; background: #000; }
.qr-art i:nth-child(1) { top: 0; left: 0; }
.qr-art i:nth-child(2) { top: 0; right: 0; }
.qr-art i:nth-child(3) { bottom: 0; left: 0; }

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

/* ── FAQ accordion ────────────────────────────────────────────────────────
   Design canvas 靠佢個 React runtime 出 open/close。靜態頁自己用 class 做。
   冇 JS 嗰陣答案預設全開（睇得晒），site.js 起手先收埋——即係 no-JS 都用得。 */

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: none; }

.faq-q {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 22px;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
/* 新版 design 兩邊 hover 同色（member 嗰邊由 .04 跟到 .05）。 */
.faq-q:hover { background: rgba(201, 169, 106, .05); }

.faq-num {
  font: 700 12px 'Sora', sans-serif;
  letter-spacing: .1em;
  color: var(--tx2);
  flex: none;
  width: var(--faq-num-w, 34px);
}
.faq-text { font-weight: 600; font-size: 15.5px; flex: 1; color: var(--tx2); }
.faq-chev {
  font: 600 14px 'Sora', sans-serif;
  color: var(--acc);
  flex: none;
  transition: transform .25s;
}
.faq--merchant .faq-chev { color: var(--acc2); }

.faq-item.open .faq-num { color: var(--acc); }
.faq--merchant .faq-item.open .faq-num { color: var(--acc2); }
.faq-item.open .faq-text { color: var(--tx); }
.faq-item.open .faq-chev { transform: rotate(45deg); }

.faq-a-wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s ease; }
.faq-item.collapsed .faq-a-wrap { grid-template-rows: 0fr; }
.faq-a-inner { overflow: hidden; }
.faq-a {
  padding: 0 22px 20px var(--faq-a-pad, 70px);
  font-size: 14.5px;
  color: var(--tx2);
  line-height: 1.7;
  text-wrap: pretty;
  margin: 0;
}

/* ── 法律頁條文（design privacy/terms 個 <style> 原文）─────────────────── */

ol.tos {
  counter-reset: sec;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
ol.tos > li { counter-increment: sec; }
ol.tos > li > h2 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 10px;
  display: flex;
  gap: 12px;
  align-items: baseline;
}
ol.tos > li > h2::before {
  content: counter(sec, decimal-leading-zero);
  font: 700 12px 'Sora', sans-serif;
  color: #141310;
  background: linear-gradient(135deg, #c9a96a, #c9a96a);
  border-radius: 6px;
  padding: 3px 7px;
  flex: none;
}
ol.sub {
  list-style: lower-alpha;
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
ol.sub li { font-size: 15px; line-height: 1.7; color: #9a968e; }
ol.sub li::marker { color: #c9a96a; font: 600 12px 'Sora', sans-serif; }
ol.sub2 {
  list-style: lower-roman;
  margin: 10px 0 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
ol.sub2 li::marker { color: var(--acc2); font: 600 12px 'Sora', sans-serif; }

/* ── 表單（design support 個 <style> 原文 + 送出狀態）────────────────────── */

input, textarea, select { font-family: inherit; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--acc); }
input::placeholder, textarea::placeholder { color: #6a675f; }

.field {
  width: 100%;
  background: rgba(0, 0, 0, .4);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--tx);
  font-size: 14.5px;
  box-sizing: border-box;
}
.field-label {
  font: 600 12px 'Sora', sans-serif;
  letter-spacing: .1em;
  color: var(--tx2);
  margin-bottom: 6px;
  display: block;
  width: 100%;   /* design 用 div 做 label，legend 唔加就會縮到得個字咁闊 */
}

.btn-primary {
  align-self: flex-start;
  border-radius: 999px;
  padding: 11px 24px;
  font: 700 13px 'Sora', sans-serif;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  color: #141310;
}
.btn-primary[disabled] { opacity: .55; cursor: progress; }

/* honeypot：真人睇唔到、螢幕閱讀器唔會讀、tab 唔會去到。bot 填咗就當 spam。 */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 空嗰陣一定要收埋——唔係 form 個 flex gap 會硬多 14px，成截尾飄低。 */
.form-error:empty { display: none; }
/* ⚠️ design 冇 model 過錯誤色。舊版用霓虹粉 #ff6b8a，喺新版暖色盤度好突兀，
   所以照 design 將 --good 由 #4ade80 降做 #8fb98f 嗰種做法，降飽和做 #c98a8a。
   呢個係我揀嘅，唔係 design 原文——designer 有正式版就換返。 */
.form-error {
  font-size: 14px;
  color: #c98a8a;
  line-height: 1.6;
  margin: 0;
}