/* Mama Pump — แอปลูกค้า (มือถือ) · design system (plain CSS, เขียนเอง — ห้าม Tailwind)
 * โทนเดียวกับ web/assets/app.css (Clay) แต่ layout เป็นมือถือ: header บาง + bottom tab bar 5 ปุ่ม
 */
:root {
  /* ── โทนแบรนด์ Mama Pump (6 ส.ค. พี่ส่งภาพแบรนด์มา: ลายเส้นน้ำตาล + ครีม + พีช + มินต์) ──
     ⭐ สีทั้งระบบมาจากตัวแปรชุดนี้ที่เดียว — เปลี่ยนโทนทีหลังแก้ตรงนี้จุดเดียว ห้ามฝังสีลงในหน้าใดหน้าหนึ่ง
     ⭐ คู่สีที่เลือกผ่านการวัดค่าคอนทราสต์แล้ว (ตัวอักษรต้องอ่านออกจริง ไม่ใช่แค่ดูน่ารัก):
        ตัวหนังสือหลักบนพื้นครีม = 10.8:1 · ตัวหนังสือขาวบนปุ่มน้ำตาลแบรนด์ = 4.8:1 (ผ่านเกณฑ์ 4.5:1)
        พีช/แซลมอน/มินต์ ใช้เป็นพื้นป้ายเท่านั้น ตัวหนังสือบนป้ายเป็นสีเข้มเสมอ ห้ามใช้ตัวขาว */
  --c-ink: 74 54 44;         /* น้ำตาลเข้ม = ตัวหนังสือหลัก (โทนเดียวกับลายเส้นในโลโก้) */
  --c-muted: 124 101 83;     /* ตัวหนังสือรอง */
  --c-faint: 126 113 103;    /* ตัวหนังสือจาง (เข้มพอให้อ่านออกบนพื้นครีม — 4.5:1) */
  --c-line: 122 90 70;       /* เส้นขอบ (ใช้กับ alpha ต่ำ) */
  --c-surface: 255 249 240;  /* พื้นหน้า = ครีม */
  --c-card: 255 255 255;     /* พื้นการ์ด */
  --c-accent: 139 107 87;    /* น้ำตาลแบรนด์ (ตัวเดียวกับโลโก้ MAMA PUMP) = ปุ่มหลัก ตัวหนังสือขาวอ่านออก */
  --c-peach: 249 201 180;    /* พีช (แก้มหมี) */
  --c-salmon: 240 147 139;   /* ชมพูส้ม (ชุดหมี) */
  --c-mint: 190 227 218;     /* มินต์ (หมวกหมี) */
  --c-cream: 253 240 216;    /* ครีมเข้ม (ตัวหมี) */
  /* สีความหมาย (สถานะ) — ปรับให้เข้าโทนแบรนด์แต่ยังแยกออกจากกันชัด · ตัวหนังสือบนป้ายเป็นสีเข้มเสมอ */
  --c-ok: 45 117 100;        /* เขียวอมมินต์ = ผ่าน/ใช้งาน */
  --c-warn: 144 87 50;      /* ส้มอมน้ำตาล = รอดำเนินการ */
  --c-danger: 178 70 62;     /* แดงอิฐ = ผิดพลาด/ตีกลับ */
  --shadow-sm: 0 1px 2px rgb(74 54 44 / 0.05), 0 1px 1px rgb(74 54 44 / 0.03);
  --shadow-md: 0 4px 14px -4px rgb(74 54 44 / 0.10), 0 2px 6px -2px rgb(74 54 44 / 0.06);
  --bottombar-h: 4.2rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Anuphan", system-ui, -apple-system, sans-serif;
  background-color: rgb(var(--c-surface));
  color: rgb(var(--c-ink));
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom));
}
h1, h2, h3, h4 { margin: 0; font-family: "Bai Jamjuree", "Anuphan", system-ui, sans-serif; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }

/* ── header บาง ────────────────────────────────────────────── */
.m-topbar {
  position: sticky; top: 0; z-index: 30; height: 3.4rem; display: flex; align-items: center; gap: 0.6rem;
  padding: 0 1rem; background: rgb(var(--c-card) / 0.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid rgb(var(--c-line) / 0.10);
}
.m-topbar .brand-mark { width: 1.9rem; height: 1.9rem; border-radius: 0.5rem; border: 1.5px solid rgb(var(--c-ink)); display: grid; place-items: center; background: rgb(var(--c-card)); }
.m-topbar .brand-mark svg { width: 15px; height: 15px; }
.m-topbar b { font-family: "Bai Jamjuree"; font-size: 0.9rem; }
.m-topbar .m-greeting { margin-left: auto; font-size: 0.78rem; color: rgb(var(--c-muted)); }

/* ── หน้า login (นอก m-topbar/bottom-nav — ใช้เอง ไม่ผ่าน nav.js) ─── */
.brand-mark { width: 2.1rem; height: 2.1rem; border-radius: 0.8rem; border: 1.5px solid rgb(var(--c-ink)); display: grid; place-items: center; background: rgb(var(--c-card)); }
.brand-mark svg { width: 18px; height: 18px; }
.m-form-error { margin: 0 0 0.9rem; font-size: 0.8rem; color: rgb(var(--c-danger, 220 38 38)); }

/* ── เนื้อหา ───────────────────────────────────────────────── */
.m-content { max-width: 480px; margin: 0 auto; padding: 1.25rem 1rem 2.5rem; }
.page-eyebrow { font-family: "Bai Jamjuree"; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--c-accent)); font-weight: 600; margin-bottom: 0.4rem; }
.page-title { font-weight: 700; font-size: 1.35rem; line-height: 1.25; }
.page-desc { margin-top: 0.5rem; color: rgb(var(--c-muted)); font-size: 0.9rem; }
.page-head { margin-bottom: 1.5rem; }

/* ── bottom tab bar (5 ปุ่ม) ──────────────────────────────── */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: var(--bottombar-h);
  display: flex; background: rgb(var(--c-card)); border-top: 1px solid rgb(var(--c-line) / 0.10);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 14px -6px rgb(74 54 44 / 0.10);
}
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
  font-size: 0.68rem; color: rgb(var(--c-faint));
}
.bottom-nav a svg { width: 20px; height: 20px; }
.bottom-nav a.active { color: rgb(var(--c-accent)); font-weight: 600; }

/* ── card / empty state ───────────────────────────────────── */
.cf-card { background: rgb(var(--c-card)); border: 1px solid rgb(var(--c-line) / 0.10); border-radius: 1rem; box-shadow: var(--shadow-sm); padding: 1.1rem; }
.cf-empty {
  border: 1px dashed rgb(var(--c-line) / 0.22); border-radius: 1rem; padding: 2.25rem 1.25rem;
  text-align: center; color: rgb(var(--c-faint)); font-size: 0.88rem; background: rgb(var(--c-ink) / 0.015);
}
.cf-stat { position: relative; background: rgb(var(--c-card)); border: 1px solid rgb(var(--c-line) / 0.10); border-radius: 1rem; padding: 0.9rem 1rem; box-shadow: var(--shadow-sm); overflow: hidden; }
.cf-stat-top { font-size: 0.72rem; color: rgb(var(--c-muted)); }
.cf-stat-num { font-family: "Bai Jamjuree"; font-weight: 700; font-size: 1.6rem; margin-top: 0.35rem; font-variant-numeric: tabular-nums; }

/* ── chips / buttons / forms (เหมือนฝั่งแอดมิน) ───────────── */
/* ⭐ house style: ป้ายสถานะ/ชิป ต้องอยู่บรรทัดเดียวเสมอ — คำไทยไม่มีเว้นวรรค เบราว์เซอร์จะตัดกลางคำ
   ("รอส่งของ" กลายเป็น "รอส่ง / ของ") อ่านยากและป้ายเบี้ยวทั้งตาราง · ชิปสั้นอยู่แล้ว ปล่อยล้นดีกว่าตัดคำ */
.cf-chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; padding: 0.22rem 0.58rem; border-radius: 9999px; border: 1px solid rgb(var(--c-line) / 0.14); color: rgb(var(--c-muted)); background: rgb(var(--c-card)); white-space: nowrap; }
.cf-chip svg { width: 12px; height: 12px; }
.cf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 0.875rem; font-weight: 500; padding: 0.65rem 1.05rem; border-radius: 0.7rem; border: 1px solid rgb(var(--c-line) / 0.16); color: rgb(var(--c-ink)); background: rgb(var(--c-card)); width: 100%; }
.cf-btn svg { width: 16px; height: 16px; }
.cf-btn-primary { background: rgb(var(--c-ink)); color: #fff; border-color: rgb(var(--c-ink)); }
.cf-label { display: block; font-size: 0.75rem; color: rgb(var(--c-muted)); margin-bottom: 0.3rem; }
.cf-input { width: 100%; border: 1px solid rgb(var(--c-line) / 0.18); border-radius: 0.7rem; padding: 0.65rem 0.8rem; font-size: 0.9rem; background: #fff; color: rgb(var(--c-ink)); }
.cf-input:focus { outline: none; border-color: rgb(var(--c-accent)); box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.14); }
.cf-field { margin-bottom: 1rem; }
.num { font-variant-numeric: tabular-nums; }

.grid { display: grid; gap: 0.8rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* ── C4: badge สถานะ (ยกจาก web/assets/app.css โทนเดียวกัน) ──────── */
/* ⭐ house style: ป้ายสถานะ/ชิป ต้องอยู่บรรทัดเดียวเสมอ — คำไทยไม่มีเว้นวรรค เบราว์เซอร์จะตัดกลางคำ
   ("รอส่งของ" กลายเป็น "รอส่ง / ของ") อ่านยากและป้ายเบี้ยวทั้งตาราง · ชิปสั้นอยู่แล้ว ปล่อยล้นดีกว่าตัดคำ */
.cf-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 500; padding: 0.2rem 0.55rem; border-radius: 9999px; white-space: nowrap; }
.cf-badge-on { background: rgb(var(--c-mint) / 0.55); color: rgb(var(--c-ok)); }
.cf-badge-off { background: rgb(var(--c-line) / 0.10); color: rgb(var(--c-faint)); }
.cf-badge-warn { background: rgb(var(--c-peach) / 0.55); color: rgb(var(--c-warn)); }

/* ── C4: สับแท็บในหน้า (ตลาด / ขายของฉัน / ซื้อของฉัน) ─────────── */
.mkt-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.1rem; overflow-x: auto; }
.mkt-tab {
  flex: 1; text-align: center; font-size: 0.82rem; font-weight: 500; padding: 0.55rem 0.5rem;
  border-radius: 0.7rem; border: 1px solid rgb(var(--c-line) / 0.14); background: rgb(var(--c-card)); color: rgb(var(--c-muted));
  white-space: nowrap;
}
.mkt-tab.active { background: rgb(var(--c-ink)); color: #fff; border-color: rgb(var(--c-ink)); }

/* ── C4: การ์ดฟีดตลาด — รูปสี่เหลี่ยมจัตุรัส + ชื่อ + ราคา ────────── */
.mkt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
.mkt-thumb-box { width: 100%; aspect-ratio: 1 / 1; border-radius: 0.8rem; overflow: hidden; background: rgb(var(--c-ink) / 0.05); margin-bottom: 0.55rem; display: grid; place-items: center; }
.mkt-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkt-thumb-box svg { width: 22px; height: 22px; color: rgb(var(--c-faint)); }

/* ── C5: คอมมูนิตี้ — ปุ่มจิ๋วใต้โพสต์/คอมเมนต์ (แก้ไข/report) ────── */
.community-mini-btn { width: auto; padding: 0.4rem 0.75rem; font-size: 0.74rem; }
.community-photo-img { display: block; }

/* โลโก้จริงของแบรนด์ (PNG พื้นใส) — ใช้แทนวงกลมไอคอนเดิม */
.brand-mark-img { height: 2.4rem; width: auto; flex: none; display: block; }
.brand-wordmark-img { height: 1.2rem; width: auto; display: block; }

/* 17 ต.ค. 2569 ตรวจจอมือถือ — ช่องกรอก <16px iPhone ซูมเอง · ปุ่มต่ำกว่า 44px กดยาก
   · ลูก grid ไม่มี min-width:0 = ตารางข้างในดันการ์ดล้นจอ · ตารางกว้างกว่าจอต้องมีเงาบอกว่าเลื่อนได้ */
.grid > * { min-width: 0; }
.cf-table-wrap {
  background:
    linear-gradient(to right, rgb(var(--c-card)) 30%, rgb(var(--c-card) / 0)) left / 2rem 100% no-repeat local,
    linear-gradient(to left, rgb(var(--c-card)) 30%, rgb(var(--c-card) / 0)) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.16), transparent) left / 0.75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.16), transparent) right / 0.75rem 100% no-repeat scroll;
}
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .cf-input { font-size: 16px; }
  .cf-btn { min-height: 44px; }
  .cf-table td { min-width: 6.5rem; }
  .cf-table td:has(> input[type="checkbox"]) { min-width: 0; }
}
@media (max-width: 640px) {
  .cf-chip.m-term, .mkt-tab { min-height: 44px; }
}

/* หน้าเติมเงิน — กล่องเลขบัญชี/QR ของช่องทางที่เลือก */
.m-pay-account { margin: -0.2rem 0 1rem; padding: 0.9rem; border-radius: 0.9rem; background: rgb(var(--c-surface-2, 250 245 238)); border: 1px solid rgb(var(--c-line, 233 224 212)); text-align: center; }
.m-pay-bank { font-size: 0.85rem; color: rgb(var(--c-muted)); }
.m-pay-no-row { display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.3rem 0; }
.m-pay-no { font-family: 'Bai Jamjuree', sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.03em; word-break: break-all; }
.m-pay-no-row .cf-btn { width: auto; min-height: 44px; padding: 0 0.9rem; }
.m-pay-name { font-size: 0.9rem; font-weight: 600; }
.m-pay-qr { display: block; width: 100%; max-width: 240px; margin: 0.8rem auto 0.6rem; border-radius: 0.6rem; background: #fff; }
#btn-save-qr { display: inline-flex; width: auto; min-height: 44px; padding: 0 1rem; }