/* plan-a.css — หน้า Plan A (ราคา · แพ็กเกจ · ชำระเงิน · ธูปของฉัน · ใส่รหัสแพ็กเกจ) จาก UI v10 (design-refs/plan-a-ui-1017 · HANDOFF-v10 · CI-v10)
 * ยกค่าจาก mockup-v4/v9/v10.css มาแบบจำกัดขอบเขตใต้ body.pa (ไม่กระทบหน้าอื่น) · ไม่มีค่าสีใหม่นอก CI-v10
 * แก้บั๊กต้นแบบ (PO 17 ต.ค.): ห้าม position:fixed ในการ์ดที่มี backdrop-filter — ปุ่มหลักอยู่แถบล่าง .pa-bar นอกการ์ดเสมอ
 */
body.pa{--page:100%;width:100%;max-width:none;--paper:#FBF6EE;--wash-blue:#DCEBFF;--wash-pink:#FFE1E9;--wash-peach:#FBDCC4;--wash-lavender:#E7DEFB;--wash-cream:#FFF8EE;--tier-silver:#B3B3B3;--tier-gold:#C99850;--wash:var(--wash-blue);
  margin:0;color:var(--ink);font-family:'IBM Plex Sans Thai',system-ui,sans-serif;font-size:1rem;line-height:1.75;
  background:
    radial-gradient(150% 30% at 50% -6%,  rgba(168,176,186,.30) 0%, rgba(168,176,186,0) 70%),
    radial-gradient(70% 16% at 18% 6%,    rgba(120,130,142,.22) 0%, rgba(120,130,142,0) 72%),
    radial-gradient(60% 13% at 82% 11%,   rgba(120,130,142,.17) 0%, rgba(120,130,142,0) 74%),
    radial-gradient(135% 48% at -14% -4%, #DCEBFF 0%, rgba(220,235,255,0) 72%),
    radial-gradient(118% 38% at 110% 2%,  #FFE1E9 0%, rgba(255,225,233,0) 74%),
    radial-gradient(150% 54% at -16% 104%,#FBDCC4 0%, rgba(251,220,196,0) 76%),
    radial-gradient(132% 46% at 116% 92%, #E7DEFB 0%, rgba(231,222,251,0) 76%),
    radial-gradient(96% 30% at 50% 58%,   #FFF8EE 0%, rgba(255,248,238,0) 70%),
    #FBF6EE;
  background-attachment:fixed}
body.pa[data-bg="00"]{--bg-image:url("plan-a/bg-00-home-v10.webp")}
body.pa[data-bg="01"]{--bg-image:url("plan-a/bg-01-pricing-v10.webp")}
body.pa[data-bg="02"]{--bg-image:url("plan-a/bg-02-membership-v10.webp");--wash:var(--wash-cream)}
body.pa[data-bg="07"]{--bg-image:url("plan-a/bg-07-payment-v10.webp");--wash:var(--wash-cream)}
body.pa[data-bg="08"]{--bg-image:url("plan-a/bg-08-incense-wallet-v10.webp");--wash:var(--wash-peach)}
body.pa[data-bg="09"]{--bg-image:url("plan-a/bg-09-redeem-v10.webp");--wash:var(--wash-pink)}
.pa *{box-sizing:border-box}
.pa main{position:relative;isolation:isolate;max-width:430px;margin:auto;min-height:100dvh;padding:16px 18px 130px;overflow-wrap:break-word}
.pa main::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(251,246,238,.90),rgba(251,246,238,.90)),var(--bg-image);background-size:100% 100%,100% auto;background-repeat:no-repeat;background-color:var(--paper);border-radius:28px}
.pa .pa-hero{display:block;height:104px;margin:0 -18px 18px;background-image:linear-gradient(to bottom,rgba(251,246,238,.15),rgba(251,246,238,.15) 65%,var(--paper)),var(--bg-image);background-position:center,center 44%;background-size:cover;border-radius:24px 24px 0 0}
.pa h1{font-family:Mitr,sans-serif;font-weight:300;font-size:2rem;line-height:1.2;margin:12px 0 18px;overflow-wrap:anywhere}
.pa h2{font-family:Mitr,sans-serif;font-weight:500;font-size:1.25rem;line-height:1.34;margin:0 0 12px;overflow-wrap:anywhere}
.pa h3{font-family:Mitr,sans-serif;font-weight:500;font-size:1rem;line-height:1.6;margin:0 0 8px}
.pa p{margin:0;min-width:0}.pa p+p{margin-top:10px}
.pa .sm{font-size:0.875rem;line-height:1.6}
.pa .panel,.pa .sheet{background:rgba(255,255,255,.60);backdrop-filter:blur(30px) saturate(1.35);-webkit-backdrop-filter:blur(30px) saturate(1.35);border:0;border-top:6px solid var(--wash);border-radius:28px;
  box-shadow:0 1px 1px rgba(74,53,36,.04),0 10px 20px -16px rgba(74,53,36,.30),0 34px 60px -40px rgba(74,53,36,.38),inset 0 1px 0 rgba(255,255,255,.85);padding:18px;margin:14px 0}
.pa #welcome-offer{border-top-color:var(--wash-pink)}
.pa .membership-status{border:0;border-top:6px solid var(--tier-silver);border-bottom:1px solid var(--hair);padding:20px 16px;margin:20px 0;background:rgba(255,255,255,.60);border-radius:0}
.pa .membership-status[data-tier="inner"]{border-top-color:var(--tier-gold)}
.pa .price{font-size:2rem;font-weight:600;line-height:1.4}
.pa .metric{font-size:1.875rem;font-weight:600;line-height:1.4}
.pa .packs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pa .pack{padding:14px 12px;border:1px solid var(--line);border-radius:16px;background:var(--wash-cream)}
.pa .pack .price{font-size:1.5625rem}
.pa .value-note{margin-top:18px!important;padding:12px;border-radius:10px;background:var(--wash)}
.pa .status{background:var(--wash);color:var(--ink);border-radius:10px;padding:10px 12px;font-size:0.875rem;margin-top:12px}
.pa .positive{background:var(--ci-sprout);color:var(--dark);padding:12px;border-radius:12px;margin-top:12px}
.pa .comparison{display:grid;gap:12px;margin:16px 0}
.pa .comparison>div{border-radius:12px;padding:14px;background:var(--paper);border-top:6px solid var(--tier-silver)}.pa .comparison>div+div{border-top-color:var(--tier-gold)}
.pa .history{list-style:none;padding:0;margin:0}.pa .history li{padding:14px 0;border-bottom:1px solid var(--hair)}.pa .history li:last-child{border-bottom:0}
.pa .history .when{display:block;font-size:0.875rem;color:var(--ink-2)}
.pa details summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.pa .feedback:empty{display:none}.pa .feedback:not(:empty){margin-top:16px}
.pa .err{color:var(--seal);font-weight:600}
.pa label.fld{display:block;margin-top:12px;font-weight:600}
.pa input.code{display:block;width:100%;min-height:52px;font:inherit;font-size:1rem;line-height:1.75;padding:10px 12px;border:1px solid #cabba9;border-radius:12px;background:#fffdf9;color:var(--ink);margin:8px 0 12px;text-transform:uppercase;letter-spacing:.04em}
.pa .pa-btn{width:100%;margin-top:14px;white-space:normal;overflow-wrap:anywhere}
.pa .pa-btn.inline{width:auto;margin-top:8px}
.pa a.link{display:flex;min-height:44px;align-items:center;color:var(--ink);text-underline-offset:4px;margin-top:8px}
.pa :is(button,a,input,summary):focus-visible{outline:3px solid var(--seal);outline-offset:3px}
/* แถบล่างนอกการ์ด (แบบ .thumb-bar) — ที่เดียวของปุ่มหลักที่ติดล่างจอ */
.pa .pa-bar{position:fixed;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;margin:0 auto;width:calc(100% - 28px);max-width:402px;padding:8px 12px;border-radius:25px;
  background:rgba(255,252,244,.93);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid #E2D8CA;box-shadow:0 8px 24px rgba(74,53,36,.15)}
.pa .pa-bar .pa-btn{margin:0}.pa .pa-bar .pa-btn+.pa-btn{margin-top:8px}
.pa .qhd{margin-bottom:4px}
@media(prefers-reduced-motion:reduce){.pa *,.pa *::before,.pa *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:359px){.pa .packs{grid-template-columns:1fr}.pa h1{font-size:1.75rem}}
.pa .upgrade-heading{margin-top:24px}.pa .membership-status .pa-btn{margin-top:12px}.pa .handle{width:36px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 16px}
/* หน้า Plan A: แถบล่างเป็นของปุ่มหลัก (.pa-bar) — ซ่อนแถบเมนูหลักและปุ่มลอยถามซินแสไม่ให้ทับปุ่มจ่าย/ข้อความ (กลับด้วยปุ่มกลับบนหัว) */
body.pa nav.tabbar,body.pa .qz-ai{display:none!important}

/* Folk cleanup 18 Oct: card heading > price, nowrap; existing ink-2 keeps footnote contrast. */
.pa .price,.pa .pack .price{font-size:1.125rem;line-height:1.5;white-space:nowrap;overflow-wrap:normal}
.pa .fn{font-size:.875rem;line-height:1.6;color:var(--ink-2)}
.pa .pa-incense-intro .pa-icon{float:left;margin-right:10px}
.pa .pa-incense-intro p{font-size:.875rem;line-height:1.6}
/* Static approved v10 three-stick bowl illustration; header retains its compact three-stick icon. */
.pa .pa-incense-art{display:block;width:112px;margin:0 auto 16px;padding:0;--ss-frac:1}
.pa-incense-art .ss-incense-smoke path{animation:none;opacity:.25}

/* Funnel: prices share emphasis and wrap at phone widths; existing CTA colours remain. */
.pa .price.pa-offer-price{white-space:normal;overflow-wrap:anywhere}
.pa .pa-renewal{display:flex;align-items:center;gap:12px;min-height:44px;margin-top:16px;cursor:pointer}
.pa .pa-renewal input{flex:0 0 auto;width:22px;height:22px;margin:0}