/* ════════════════════════════════════════════════════════════════════════════
   _fitfac-v3.css — ชุดหน้าตา v3 ที่ "ทุกหน้าลูกค้า" ใช้ร่วม (design handoff รอบแก้ 4)
   ────────────────────────────────────────────────────────────────────────────
   🚦 ทุกกฎ scope ใต้ `html.ffv3` — คลาสนี้ถูกติดโดย _fitfac-v3.js เท่านั้น และติด
      ให้เฉพาะบัญชีแคนารี (ตอนนี้ member 1) ⇒ โหลดไฟล์นี้ทิ้งไว้ในทุกหน้าได้โดยไม่มีผล
      กับลูกค้าคนอื่นเลย · ห้ามเขียนกฎที่ไม่มี prefix `html.ffv3`
   🔑 หัวหน้าย่อยจะซ่อนหัวเดิม (.topbar / .hdr) ก็ต่อเมื่อหน้านั้นเรียก
      FFV3.mountSubHeader() แล้วเท่านั้น (คลาส html.v3-subhdr) — หน้าที่ยังไม่ต่อ
      จะไม่เสียหัวเดิมไปเฉย ๆ
   token ยกจาก design_handoff_member_portal/portal-tokens.css
   ตรงกับ fitfac-member-portal.v3.css (body.v3ui) — ชื่อตัวแปรชุดเดียวกัน
   ════════════════════════════════════════════════════════════════════════════ */

html.ffv3 {
  --v3-r-btn: 5px; --v3-r-box: 0; --v3-cut: 15px;
  --v3-sh-btn: 0 3px 0 rgba(10,10,10,.35);
  --v3-sh-hard: 5px 5px 0 #111111;
  --v3-sh-drop: 4px 4px 0 rgba(10,10,10,.25);
  --v3-sh-float: 0 10px 28px rgba(10,10,10,.35);
  --v3-paper: #F7F5F0; --v3-paper2: #F0EEE9; --v3-paper3: #ECEAE4;
  --v3-ink: #0A0A0A; --v3-line: #111111; --v3-yellow: #FFEE00;
  --v3-red: #E5484D;   --v3-red-t: #B3282D;
  --v3-green: #17A35B; --v3-green-t: #0E7A42;
  --v3-blue: #3B82F6;  --v3-blue-t: #1D5FC2;
  --v3-amber: #F59E0B; --v3-amber-t: #7a4f00;
  --v3-linebrand: #06C755; --v3-sel: #FFFBD6;
  --v3-w: 390px; --v3-pad: 16px;
  --v3-f-th: 'IBM Plex Sans Thai', system-ui, sans-serif;            /* 400/500/600/700 — ไม่มี 800 จริง */
  --v3-f-lat: 'Schibsted Grotesk', 'IBM Plex Sans Thai', sans-serif; /* ต้องมีไทยคั่น ไม่งั้น ฿ หลุดไปฟอนต์ระบบ */
  --v3-fs-head: 19px; --v3-fs-card: 14px; --v3-fs-body: 13px; --v3-fs-min: 12px; --v3-fs-input: 16px;
  --v3-hit: 40px;
  --v3-t-fade: .25s; --v3-t-sheet: .32s;
}
html.ffv3 body { background: var(--v3-paper2) !important; color: var(--v3-ink); font-family: var(--v3-f-th) !important; }

/* แถบหลังนาฬิกา/แบต (iPhone) เป็นสีกระดาษ — หน้าต่าง ๆ ทาเป็น #101010 ไว้ใน <style>
   ของตัวเอง · ชนะด้วย specificity 2 คลาส + !important · สีไอคอนสั่งผ่าน
   FFNativeStatusBar ใน _fitfac-v3.js (CSS สั่งสีไอคอนของระบบไม่ได้) */
html.ffv3.ff-native-ios body::before { background: var(--v3-paper) !important; }

/* ช่องกรอกทุกช่อง ≥ 16px — iPhone ซูมเองค้างเมื่อ < 16px (README A10) */
html.ffv3 input:not([type=checkbox]):not([type=radio]):not([type=range]),
html.ffv3 select, html.ffv3 textarea { font-size: max(16px, 1em) !important; }

/* ════════════════ หัวหน้าย่อย 52px: ← + ชื่อหน้า + ภาษา (README §4) ════════════════ */
html.ffv3.v3-subhdr .topbar,
html.ffv3.v3-subhdr .hdr-top,
html.ffv3.v3-subhdr .hdr-title { display: none !important; }
html.ffv3 .v3-sub {
  position: sticky; top: 0; z-index: 60; box-sizing: border-box;
  display: flex; align-items: center; gap: 6px;
  width: 100%; height: calc(52px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 8px 0;
  background: var(--v3-paper); border-bottom: 1px solid rgba(10,10,10,.1);
  font-family: var(--v3-f-th); color: var(--v3-ink);
}
html.ffv3 .v3-sub-back {
  flex: none; width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--v3-ink);
}
html.ffv3 .v3-sub-back:active { opacity: .6; }
html.ffv3 .v3-sub-mid { flex: 1; min-width: 0; }
html.ffv3 .v3-sub-t {
  font: 700 14.5px/1.3 var(--v3-f-th);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.ffv3 .v3-sub-s {
  font: 500 var(--v3-fs-min)/1.35 var(--v3-f-th); color: rgba(10,10,10,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.ffv3 .v3-sub-r { flex: none; display: flex; align-items: center; gap: 6px; position: relative; }
/* หน้าที่ไม่มีทางย้อน (เปิดจากลิงก์ภายนอกโดยตรง) ยังเว้นซ้ายให้ชื่อไม่ชิดขอบ */
html.ffv3 .v3-sub.noback { padding-left: 16px; }
html.ffv3 .v3-sbtn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 36px; min-width: 36px; padding: 0 9px; cursor: pointer;
  background: #FFFFFF; color: var(--v3-ink);
  border: 1.5px solid var(--v3-line); border-radius: var(--v3-r-btn);
  font: 700 var(--v3-fs-min)/1 var(--v3-f-lat);
}
html.ffv3 .v3-sbtn.open { background: var(--v3-yellow); }
/* ดีไซน์วาดปุ่มหัวหน้าย่อย 36px แต่ README กำหนดพื้นที่แตะ ≥ 40px — คงขนาดที่ตาเห็น
   ไว้ตามดีไซน์ แล้วขยายพื้นที่แตะด้วยชั้นล่องหนรอบปุ่มอีก 2px ทุกด้าน */
html.ffv3 .v3-sbtn { position: relative; }
html.ffv3 .v3-sbtn::after { content: ''; position: absolute; inset: -3px; }

/* เมนูภาษา 8 ภาษา (ชื่อเขียนด้วยอักษรของภาษานั้น) */
html.ffv3 .v3-langmenu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 70;
  min-width: 168px; background: #FFFFFF;
  border: 1.5px solid var(--v3-line); box-shadow: var(--v3-sh-drop);
  animation: v3fade var(--v3-t-fade) both;
}
html.ffv3 .v3-langrow {
  display: flex; align-items: center; gap: 8px;
  min-height: var(--v3-hit); padding: 0 13px; cursor: pointer;
  font: 600 var(--v3-fs-body)/1 var(--v3-f-th); color: var(--v3-ink);
  border-bottom: 1px solid rgba(10,10,10,.08);
}
html.ffv3 .v3-langrow:last-child { border-bottom: 0; }
html.ffv3 .v3-langrow[aria-selected="true"], html.ffv3 .v3-langrow:active { background: var(--v3-paper); }
html.ffv3 .v3-langcode { width: 26px; flex: none; font: 700 var(--v3-fs-min)/1 var(--v3-f-lat); color: rgba(10,10,10,.58); }
html.ffv3 .v3-langname { flex: 1; }

/* ════════════════ ชิ้นส่วนร่วม (หน้าต่าง ๆ ใช้คลาสเหล่านี้ได้เลย) ════════════════ */
html.ffv3 .v3-page { box-sizing: border-box; padding: 14px var(--v3-pad) 32px; }
html.ffv3 .v3-h1 { font: 700 var(--v3-fs-head)/1.3 var(--v3-f-th); margin: 0 0 4px; }
html.ffv3 .v3-eyebrow {
  font: 700 var(--v3-fs-min)/1 var(--v3-f-lat); letter-spacing: .08em; text-transform: uppercase;
  color: rgba(10,10,10,.42); margin: 0 0 8px;
}
html.ffv3 .v3-card {
  box-sizing: border-box; background: #FFFFFF; border: 1px solid rgba(10,10,10,.12);
  border-radius: var(--v3-r-box); padding: 14px; margin: 0 0 10px;
}
html.ffv3 .v3-card.paper { background: var(--v3-paper); }
html.ffv3 .v3-card.hi {
  border: 1.5px solid var(--v3-line); box-shadow: var(--v3-sh-hard); margin-bottom: 15px;
  clip-path: polygon(0 0, calc(100% - var(--v3-cut)) 0, 100% var(--v3-cut), 100% 100%, 0 100%);
}
html.ffv3 .v3-card-hd { font: 700 var(--v3-fs-card)/1.35 var(--v3-f-th); margin: 0 0 4px; }
html.ffv3 .v3-card-sub { font: 400 var(--v3-fs-body)/1.55 var(--v3-f-th); color: rgba(10,10,10,.65); }

html.ffv3 .v3-btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 46px; padding: 12px 14px; cursor: pointer;
  background: var(--v3-ink); color: var(--v3-yellow);
  border: 1.5px solid var(--v3-line); border-radius: var(--v3-r-btn); box-shadow: var(--v3-sh-btn);
  font: 700 var(--v3-fs-card)/1.2 var(--v3-f-th); text-decoration: none; text-align: center;
  transition: transform .1s, box-shadow .1s;
}
html.ffv3 .v3-btn:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(10,10,10,0); }
html.ffv3 .v3-btn.sec { background: #FFFFFF; color: var(--v3-ink); }
html.ffv3 .v3-btn.yellow { background: var(--v3-yellow); color: var(--v3-ink); }
html.ffv3 .v3-btn.red { background: var(--v3-red); color: #FFFFFF; box-shadow: 0 3px 0 rgba(150,30,34,.7); }
html.ffv3 .v3-btn.ghost { background: transparent; color: var(--v3-ink); box-shadow: none; border-color: rgba(10,10,10,.22); }
html.ffv3 .v3-btn.sm { min-height: var(--v3-hit); padding: 9px 12px; font-size: var(--v3-fs-body); }
html.ffv3 .v3-btn.auto { width: auto; }
html.ffv3 .v3-btn[disabled], html.ffv3 .v3-btn.off {
  background: var(--v3-paper3); color: rgba(10,10,10,.42);
  border-color: rgba(10,10,10,.14); box-shadow: none; cursor: not-allowed; transform: none;
}
html.ffv3 .v3-btn-row { display: flex; gap: 8px; margin-top: 10px; }
html.ffv3 .v3-why { margin-top: 6px; text-align: center; font: 500 var(--v3-fs-min)/1.4 var(--v3-f-th); color: rgba(10,10,10,.5); }

html.ffv3 .v3-chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 3px 9px;
  border: 1px solid rgba(10,10,10,.2); border-radius: var(--v3-r-box);
  background: #FFFFFF; font: 600 var(--v3-fs-min)/1.3 var(--v3-f-th); color: var(--v3-ink);
}
/* ชิปตัวเลือก (วัน/สาขา/รอบ/เดือน) — แตะได้ ≥40px · เลือกแล้ว = ดำตัวหนังสือเหลือง */
html.ffv3 .v3-pick {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: var(--v3-hit); padding: 0 13px; cursor: pointer;
  background: #FFFFFF; color: rgba(10,10,10,.7); border: 1.5px solid rgba(10,10,10,.22);
  font: 600 12.5px/1 var(--v3-f-th);
}
html.ffv3 .v3-pick.on, html.ffv3 .v3-chip.on { background: var(--v3-ink); color: var(--v3-yellow); border-color: var(--v3-ink); }
html.ffv3 .v3-chip.red   { background: rgba(229,72,77,.12);  color: var(--v3-red-t);   border-color: rgba(229,72,77,.35); }
html.ffv3 .v3-chip.green { background: rgba(23,163,91,.12);  color: var(--v3-green-t); border-color: rgba(23,163,91,.35); }
html.ffv3 .v3-chip.blue  { background: rgba(59,130,246,.12); color: var(--v3-blue-t);  border-color: rgba(59,130,246,.35); }
html.ffv3 .v3-chip.amber { background: rgba(245,158,11,.15); color: var(--v3-amber-t); border-color: rgba(245,158,11,.4); }

html.ffv3 .v3-field { display: block; margin: 0 0 12px; }
html.ffv3 .v3-label { display: block; margin: 0 0 5px; font: 700 var(--v3-fs-min)/1.3 var(--v3-f-th); color: rgba(10,10,10,.58); }
html.ffv3 .v3-input {
  box-sizing: border-box; width: 100%; height: 46px; padding: 0 12px;
  background: #FFFFFF; color: var(--v3-ink); border: 1.5px solid var(--v3-line); border-radius: var(--v3-r-btn);
  font: 500 16px/1.2 var(--v3-f-th); outline: none;
}
html.ffv3 .v3-input:focus { box-shadow: 0 0 0 3px rgba(255,238,0,.6); }
html.ffv3 .v3-empty {
  padding: 26px 16px; text-align: center; background: var(--v3-paper);
  border: 1px dashed rgba(10,10,10,.2); font: 500 var(--v3-fs-body)/1.6 var(--v3-f-th); color: rgba(10,10,10,.5);
}
html.ffv3 .v3-note {
  padding: 9px 12px; font: 600 var(--v3-fs-min)/1.55 var(--v3-f-th);
  background: rgba(59,130,246,.1); border: 1.5px solid rgba(59,130,246,.4); color: var(--v3-blue-t);
}
html.ffv3 .v3-note.amber { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.5); color: var(--v3-amber-t); }
html.ffv3 .v3-note.red { background: #FFF1F1; border-color: var(--v3-red); color: var(--v3-red-t); }
html.ffv3 .v3-note.green { background: rgba(23,163,91,.1); border-color: rgba(23,163,91,.45); color: var(--v3-green-t); }
html.ffv3 .v3-num { font-family: var(--v3-f-lat); font-weight: 700; }
html.ffv3 .v3-sk { background: var(--v3-paper3); animation: v3shimmer 1.4s ease-in-out infinite; }
html.ffv3 .v3-spin {
  box-sizing: border-box; width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 50%;
  border: 4px solid rgba(10,10,10,.12); border-top-color: var(--v3-ink); animation: v3spin .9s linear infinite;
}
/* ไอคอนสำเร็จ: สี่เหลี่ยมเหลืองตัดมุม 15px */
html.ffv3 .v3-okmark {
  width: 56px; height: 56px; margin: 0 auto; display: flex; align-items: center; justify-content: center;
  background: var(--v3-yellow); border: 2px solid var(--v3-line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
  animation: v3pop .3s both;
}

/* ════════════════ bottom sheet ════════════════ */
html.ffv3 .v3-sheet-ov {
  position: fixed; inset: 0; z-index: 150;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  background: rgba(0,0,0,.45); animation: v3fade var(--v3-t-fade) both;
}
html.ffv3 .v3-sheet {
  position: relative; box-sizing: border-box;
  width: 100%; max-width: var(--v3-w); max-height: 88%; overflow-y: auto;
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  background: #FFFFFF; font-family: var(--v3-f-th); color: var(--v3-ink);
  animation: v3up var(--v3-t-sheet) cubic-bezier(.32,.72,0,1) both;
}
html.ffv3 .v3-sheet-grip { width: 44px; height: 5px; margin: 4px auto 10px; background: rgba(10,10,10,.2); }
html.ffv3 .v3-sheet-x {
  position: absolute; top: 12px; right: 14px; box-sizing: border-box;
  width: var(--v3-hit); height: var(--v3-hit); padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: #FFFFFF; border: 1.5px solid var(--v3-line); border-radius: var(--v3-r-btn);
}
html.ffv3 .v3-sheet-t { padding: 0 44px; text-align: center; font: 700 16px/1.35 var(--v3-f-th); }
html.ffv3 .v3-sheet-s { margin-top: 2px; text-align: center; font: 500 var(--v3-fs-min)/1.5 var(--v3-f-th); color: rgba(10,10,10,.6); }
html.ffv3 .v3-sheet-body { margin-top: 12px; font: 400 var(--v3-fs-body)/1.6 var(--v3-f-th); }
html.ffv3 .v3-sheet-box { background: var(--v3-paper); padding: 13px; margin-top: 12px; }

/* ════════════════ toast + กล่อง error (README A4) ════════════════
   toast สำเร็จ (ดำ) หายเอง 3.2s · กล่อง error (แดง) ค้างจนกดปิด */
html.ffv3 .v3-toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 200;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box; max-width: calc(var(--v3-w) - 32px); width: max-content;
  padding: 11px 15px; background: var(--v3-ink); color: #fff; box-shadow: var(--v3-sh-float);
  font: 600 var(--v3-fs-body)/1.45 var(--v3-f-th); animation: v3toast .25s both;
}
html.ffv3 .v3-err {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 210;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box; width: calc(100% - 32px); max-width: calc(var(--v3-w) - 32px);
  padding: 12px 14px; background: #FFF1F1; color: var(--v3-red-t);
  border: 1.5px solid var(--v3-red); box-shadow: var(--v3-sh-float); animation: v3toast .25s both;
}
html.ffv3 .v3-err-hd { display: flex; align-items: flex-start; gap: 8px; font: 700 var(--v3-fs-card)/1.4 var(--v3-f-th); }
html.ffv3 .v3-err-code { font-family: var(--v3-f-lat); font-weight: 700; }
html.ffv3 .v3-err-tech { margin-top: 5px; word-break: break-word; font: 500 11.5px/1.45 var(--v3-f-lat); color: rgba(10,10,10,.55); }
html.ffv3 .v3-err-x {
  margin-left: auto; flex: none; width: 40px; height: 40px; margin-top: -10px; margin-right: -10px;
  background: none; border: 0; cursor: pointer; color: inherit; font-size: 17px; line-height: 1;
}

@keyframes v3up     { from { transform: translateY(100%) } }
@keyframes v3fade   { from { opacity: 0 } }
@keyframes v3toast  { from { transform: translate(-50%, 12px); opacity: 0 } }
@keyframes v3pop    { from { transform: scale(.55); opacity: 0 } }
@keyframes v3shimmer{ 0% { opacity: .45 } 50% { opacity: .9 } 100% { opacity: .45 } }
@keyframes v3spin   { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) {
  html.ffv3 * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}