/* =======================================================
   LINE Community Order System — Prototype styles
   mobile-first · เน้นปุ่มใหญ่ · คนแก่ใช้ได้
   ======================================================= */
:root{
  --green:#06C755;        /* LINE green */
  --green-d:#04a847;      /* พื้น/ปุ่ม/แบนเนอร์เท่านั้น — ห้ามใช้เป็นสีตัวอักษรบนพื้นสว่าง (3.14:1 ตก AA) */
  --green-text:#1f7a44;   /* AA: เขียวเข้มสำหรับ 'ตัวอักษร' บนพื้นขาว/เขียวอ่อน — 5.08:1 บนขาว (แทน green-d ที่ตก AA) */
  --ink:#1d2129;
  --muted:#5f6770;        /* เข้มขึ้นให้ผ่าน WCAG AA (เดิม #8a9099 ~3:1 อ่านยากกลางแดด) */
  --line:#e7e9ee;
  --bg:#f4f5f7;
  --card:#ffffff;
  --fee:#21707f;          /* id24: สีค่าบริการ — เข้มจาก #2b8a9e (4.01:1) เป็น 5.69:1 บนขาว ผ่าน AA */
  --danger:#e0245e;
  --warn:#e8a13a;                 /* พื้นหลัง/เส้นขอบ/dot เท่านั้น — ห้ามใช้เป็นสีตัวอักษร (contrast ~2.2:1) */
  --warn-text:#9a6512;            /* id16: ตัวอักษรโทนเตือน — 4.95:1 บนขาว / 4.51:1 บน #fff3e0 ผ่าน AA */
  --radius:16px;
  --shadow:0 2px 10px rgba(20,24,31,.06);
  --shadow-lg:0 8px 30px rgba(20,24,31,.16);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* id42: ฟอนต์ทั้งระบบเป็น rem อิง root — iOS ตั้ง "ตัวหนังสือใหญ่" (Dynamic Type) มีผลจริงผ่าน font:-apple-system-body
   (browser อื่นไม่รู้จักค่านี้ = ข้ามบรรทัด → root คง 16px เท่าเดิม) · text-size-adjust กัน WebView inflate เพี้ยนเอง */
html{font:-apple-system-body;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Sukhumvit Set","Helvetica Neue",sans-serif;
  background:var(--bg);color:var(--ink);
  font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;
}
.app{max-width:460px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}

/* โฟกัสด้วยคีย์บอร์ด/แท็บ — วงเขียวชัด เข้าถึงได้ (เดิมไม่มี :focus-visible เลย) · ไม่โผล่ตอนแตะนิ้ว */
:focus-visible{outline:3px solid rgba(6,199,85,.55);outline-offset:2px}
.topbar :focus-visible{outline-color:rgba(255,255,255,.85)}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:30;background:var(--green);color:#fff;
  padding:14px 16px;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow)
}
.topbar .back{background:rgba(255,255,255,.2);border:0;color:#fff;width:44px;height:44px;min-width:44px;min-height:44px;border-radius:10px;font-size:1.25rem;cursor:pointer;flex-shrink:0}
/* ปุ่มย้อนฝั่งลูกค้า: วงกลม + เครื่องหมาย ‹ ล้วน (ไม่มีข้อความ) — เล็ก สะอาด ไม่กินที่หัว · aria-label คงความหมาย "กลับ" ไว้ให้ screen reader · ไม่แตะ .back แอดมิน/คู่มือ */
#backBtn{background:rgba(255,255,255,.22);width:44px;height:44px;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 0 3px;margin-left:0;border-radius:50%;font-size:1.625rem;font-weight:700;line-height:1;flex-shrink:0}
/* A13b: ชื่อร้านยาว clamp 2 บรรทัด (ชื่อเต็มโชว์ซ้ำในการ์ด/story ล่างอยู่แล้ว) — กัน header โตดันเลย์เอาท์ */
.topbar h1{font-size:1.125rem;margin:0;font-weight:700;flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25}
.topbar .sub{font-size:.75rem;opacity:.9;font-weight:400}
/* ปุ่ม "วิธีใช้" มุมขวาบน — ข้อความชัดกว่าไอคอน ? (คนสูงวัยอ่านออกทันที) · เป็น <button> เปิดโมดอลในแอป · ตัวเล็กลงให้ถ่อมตัว ไม่แย่งสายตาชื่อร้าน */
.topbar .help-link{background:rgba(255,255,255,.3);color:#fff;border:1px solid rgba(255,255,255,.5);font-family:inherit;cursor:pointer;text-decoration:none;border-radius:10px;padding:7px 10px;min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;font-size:.78125rem;font-weight:700;white-space:nowrap;flex-shrink:0}
.topbar .help-link:active{background:rgba(255,255,255,.36)}
.topbar h1{cursor:default}
/* ทางลับเจ้าของ — ย้ายมาไว้ "ล่างสุด" ของหน้า (เดิมอยู่บนหัว) · 🌙 จาง ๆ (แตะ 5 ครั้งติดเพื่อปลด) → เผย ⚙ เข้าหลังบ้าน — ลิงก์ไม่พกรหัส ใครกดก็เจอฉากใส่รหัส */
.owner-bar{display:flex;justify-content:center;align-items:center;gap:8px;padding:22px 16px calc(20px + env(safe-area-inset-bottom,0px))}
.owner-bar .ob-moon{color:var(--muted);opacity:.4;font-size:1rem;padding:8px;line-height:1;cursor:default;user-select:none;-webkit-user-select:none}
.owner-bar .ob-gear{color:var(--muted);opacity:.75;text-decoration:none;font-size:1.25rem;padding:8px;line-height:1}
.owner-bar .ob-gear:active{opacity:.4}

/* ---------- round banner ---------- */
.banner{background:linear-gradient(135deg,#06C755,#04a847);color:#fff;margin:12px;padding:16px;border-radius:var(--radius);box-shadow:var(--shadow)}
.banner h2{margin:0 0 4px;font-size:1.125rem}
.banner .route{font-size:.8125rem;opacity:.92}
/* นับถอยหลังปิดรับ: ข้อความเต็มแถวบนสุด + ปุ่มอัปเดตแถวล่าง · ปุ่มอยู่คนละแถวแล้ว → ข้อความได้ความกว้างเต็ม อยู่บรรทัดเดียวเอง (จอแคบมาก ๆ ค่อยตัดบรรทัด ไม่ล้นกรอบ) */
.countdown{margin-top:10px;background:rgba(255,255,255,.18);border-radius:10px;padding:9px 12px;font-size:.875rem;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.countdown .cd-txt{max-width:100%}
.countdown b{font-variant-numeric:tabular-nums;font-size:.9375rem;font-weight:800}
/* FOMO: countdown ทั้งรอบช่วงท้าย (≤15 นาที) — พิลล์แดงพองเตือน + วิ่งวินาที · AA: danger↔ขาว 4.59:1 ทั้งบนแบนเนอร์เขียวและแถบ CTA สว่าง */
.countdown b.cd-urgent{background:#fff;color:var(--danger);padding:3px 10px;border-radius:9px;animation:cdUrgent 1.1s ease-in-out infinite}
.bb-cd b.cd-urgent{background:var(--danger);color:#fff;padding:2px 9px;border-radius:8px;animation:cdUrgent 1.1s ease-in-out infinite}
@keyframes cdUrgent{0%,100%{box-shadow:0 0 0 0 rgba(224,36,94,.5)}70%{box-shadow:0 0 0 7px rgba(224,36,94,0)}}
@media (prefers-reduced-motion:reduce){.cd-urgent{animation:none!important}}

/* ---------- section ---------- */
.section{padding:6px 12px}
.section-title{font-size:.875rem;color:var(--muted);font-weight:700;margin:14px 4px 8px;text-transform:none}

/* ---------- shop card ---------- */
.shop{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;margin-bottom:10px;display:flex;align-items:center;gap:12px;cursor:pointer;border:1px solid var(--line)}
.shop .ic{width:46px;height:46px;border-radius:12px;background:#eafaf0;display:grid;place-items:center;font-size:1.5rem;flex-shrink:0}
.shop .ic-img{object-fit:cover;background:#eef0f3}              /* รูปหน้าร้านแทนอิโมจิ (ข้อ 35) */
/* เลขร้าน — ตัวหนาเขียวเข้ม วงเขียวอ่อน ให้เจ้าของ/ลูกค้าอ้างอิง "ร้านเลขที่ N" ได้ง่าย */
.shop .ic-num{font-size:1.5rem;font-weight:800;color:var(--green-text);font-variant-numeric:tabular-nums;border:2px solid var(--green)}
/* Q4: โชว์เรื่องราวร้านเต็ม (ของฝาก=desire-driven, เรื่องราวคือตัวขาย) — เลิก clamp 2 บรรทัด */
.shop-desc{font-size:.8125rem;color:var(--muted);margin:2px 0 3px;line-height:1.5;overflow-wrap:break-word}
.shop-origin{font-size:.78125rem;font-weight:700;color:var(--green-text);margin:2px 0 1px;line-height:1.4}
.shop-origin b{font-weight:800}
.shop .meta{flex:1;min-width:0}                                  /* min-width:0 = ให้ meta หดได้ ไม่ดัน .eta ตกขอบจอ (รูปของเด่น 4 ชิ้น) */
.shop .meta b{font-size:1rem}
.shop .meta .fee{font-size:.8125rem;color:var(--fee)}
.shop .eta{font-size:.75rem;color:var(--muted);text-align:right;flex-shrink:0;align-self:flex-start;white-space:nowrap}
/* การ์ดร้านเลย์เอาท์ใหม่ (card-v2): ชื่อร้าน = header เต็มกว้างชิดซ้าย → ใต้ลงมา 2 คอลัมน์
   ซ้าย = เลขลำดับร้าน + "เวลาโดยประมาณ" + 🚗 เวลา · ขวา = จังหวัด/บรรยาย/ค่าหิ้ว/ของเด่น */
.shop.card-v2{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
.shop.card-v2 .shop-head{padding:12px 14px 10px;border-bottom:1px solid var(--line)}
.shop.card-v2 .shop-head b{display:block;font-size:1.03125rem;font-weight:800;line-height:1.3}
.shop.card-v2 .shop-cols{display:flex;gap:12px;padding:12px 14px}
.shop.card-v2 .shop-col-l{flex:0 0 86px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.shop.card-v2 .shop-col-r{flex:1;min-width:0}
.shop.card-v2 .shop-col-r .fee{font-size:.8125rem;color:var(--fee)}
.shop.card-v2 .eta-label{font-size:.6875rem;color:var(--muted);font-weight:700;line-height:1.2}
.shop.card-v2 .eta-time{font-size:.8125rem;color:var(--green-text);font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.badge-hidden{font-size:.6875rem;color:var(--danger);border:1px solid var(--danger);border-radius:6px;padding:1px 6px}
/* Q6: ชิปเตือน "ยังไม่จ่าย" การ์ดออเดอร์ลูกค้า (สีส้ม) — ชื่อ .paynudge เลี่ยงชน .paychip ของแท็บแยกรายคนหลังบ้าน (มี .paychip.unpaid สีแดงอยู่แล้ว) */
.paynudge{display:inline-block;border:1px solid #f0c890;background:#fff3e0;color:var(--warn-text);border-radius:9px;padding:2px 9px;font-size:.78125rem;font-weight:700;line-height:1.4}
/* Q3: ยอดเงินสดจ่ายร้าน (หน้าคนขับ + แท็บซื้อรวมหลังบ้าน) */
.drv-sfooter{padding:8px 12px;border-top:1px dashed var(--line);font-weight:800;font-size:.875rem;color:var(--green-text)}
.drv-sfooter small{font-weight:500;color:var(--muted);font-size:.8125rem}
.drv-sfooter.prepaid{color:var(--warn-text)}
/* D-02: แถบเงินสดที่ต้องเตรียมทั้งทริป (รวมร้านที่ยังไม่ผ่าน) */
.drv-cashbar{margin:0 0 10px;background:#fffbea;border:1px solid #f0d9a8;border-radius:12px;padding:11px 14px;font-weight:800;font-size:.9375rem;color:#9a6512;text-align:center}
.drv-cashbar small{display:block;font-weight:500;font-size:.75rem;color:var(--muted);margin-top:2px}
.buy-total{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-weight:800;color:var(--green-text)}
.buy-total small{font-weight:500;color:var(--muted);font-size:.6875rem}
/* Q13: แถบ "เน็ตสะดุด" หน้าคนขับ — แทนการล้างจอเป็นคำสั่ง dev */
.drv-neterr{background:#fff3e0;color:var(--warn-text);border:1px solid #f0c890;border-radius:8px;margin:8px 12px;padding:9px 12px;font-weight:700;font-size:.8125rem;text-align:center}

/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.product{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column}
.product .imgwrap{position:relative;aspect-ratio:1/1;background:#f0f1f4}
.product .imgwrap img{width:100%;height:100%;object-fit:cover;display:block}
.img-edit-btn{position:absolute;right:6px;bottom:6px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:10px;padding:5px 10px;font-size:1.0625rem;line-height:1;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.product .body{padding:10px;display:flex;flex-direction:column;gap:2px;flex:1}
.product .name{font-size:.875rem;font-weight:600;line-height:1.3;min-height:36px}
.product .base{font-size:1.0625rem;font-weight:800}
.product .base small{font-size:.75rem;color:var(--muted);font-weight:500}
.product .feeline{font-size:.8125rem;color:var(--fee);display:flex;align-items:center;gap:4px}
/* ราคาขั้นบันได (tier) บนการ์ดสินค้า */
.product .tier-next{font-size:.75rem;font-weight:700;color:#1f7a44;background:#eafaf0;border:1px solid #bce8cd;border-radius:8px;padding:2px 7px;align-self:flex-start;line-height:1.5}
.product .tier-now{font-size:.75rem;font-weight:800;color:#fff;background:#1f7a44;border-radius:8px;padding:2px 7px;align-self:flex-start;line-height:1.5}
/* Feature B: ป้ายของสด (ราคาอาจขึ้นลงตามตลาด) บนการ์ดสินค้า */
.product .fresh-tag{font-size:.71875rem;font-weight:700;color:#1f7a44;background:#eafaf0;border:1px solid #bce8cd;border-radius:8px;padding:2px 7px;align-self:flex-start;line-height:1.4}
.product .special-tag{font-size:.71875rem;font-weight:700;color:#a8540a;background:#fff3e6;border:1px solid #ffd6a8;border-radius:8px;padding:2px 7px;align-self:flex-start;line-height:1.4}
/* A5: แถบเตือนบนการ์ดสินค้า (แพ้อาหาร/ของเสียง่าย) — ใช้ --warn-text (AA) ไม่ใช่ --warn · word-break กันข้อความยาว owner พิมพ์เอง (ไม่มี maxlength) ล้นการ์ด 375px */
.product .warn-tag{font-size:.71875rem;font-weight:700;color:var(--warn-text);background:#fff3e0;border:1px solid #f0c890;border-radius:8px;padding:2px 7px;align-self:flex-start;line-height:1.4;word-break:break-word;overflow-wrap:anywhere}
.tier-tag{font-size:.75rem;font-weight:800;color:#1f7a44;background:#eafaf0;border-radius:6px;padding:1px 5px;vertical-align:middle}
.product .oos{margin-top:6px;font-size:.75rem;color:var(--muted)}
.product .oos select{font-size:1rem;border:1px solid var(--line);border-radius:8px;padding:8px 4px;width:100%;margin-top:2px;background:#fff}

/* stepper */
.stepper{display:flex;align-items:center;justify-content:space-between;margin-top:8px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.stepper button{width:44px;height:44px;border:0;background:#f4f5f7;font-size:1.375rem;font-weight:700;cursor:pointer;color:var(--green-text)}
.stepper button:active{background:#e6e8ec}
.stepper .q{font-size:1rem;font-weight:700;min-width:28px;text-align:center}
.add-btn{margin-top:8px;background:#1f7a44;color:#fff;border:0;border-radius:12px;padding:10px;font-size:.875rem;font-weight:700;cursor:pointer;width:100%}

/* ---------- info icon ---------- */
/* ตัวไอคอน 24px + ::after ขยายพื้นที่แตะรอบตัวเป็น ~44px (มาตรฐานนิ้วโป้ง) โดยไม่ดัน layout */
.info{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#e7e9ee;color:#5a6270;font-size:.8125rem;font-weight:700;cursor:pointer;flex-shrink:0;line-height:1;position:relative}
.info::after{content:'';position:absolute;inset:-10px}
.info.warn{background:var(--warn-text);color:#fff}
/* shop note strip */
.shop-note{font-size:.75rem;color:#7a5c00;background:#fffbef;border:1px solid #f0d98a;border-radius:10px;padding:7px 10px;margin:0 0 8px;line-height:1.5}
/* 📍 ลิงก์เปิดร้านบน Google Maps — ป้ายความมั่นใจ "มาจากร้านไหน" (maps_url โชว์ชื่อ/รูป/รีวิว) */
.shop-maps{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.875rem;font-weight:700;color:#1a73e8;background:#f1f6ff;border:1px solid #cfe0ff;border-radius:12px;padding:10px 12px;margin:0 0 10px;text-decoration:none;line-height:1.4}
.shop-maps:active{background:#e4eeff}
/* template section */
.tpl-card{background:#f0f7ff;border:1px dashed #90bde0;border-radius:12px;padding:10px 12px;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.tpl-card .tpl-name{flex:1;font-size:.875rem;font-weight:600}

/* ---------- tooltip popover ---------- */
.pop{position:fixed;z-index:100;background:#1d2129;color:#fff;border-radius:12px;padding:12px 14px;font-size:.8125rem;line-height:1.7;box-shadow:var(--shadow-lg);max-width:300px;white-space:pre-line}
.pop .eqline{display:flex;justify-content:space-between;gap:18px}
.pop .eqsum{border-top:1px solid rgba(255,255,255,.25);margin-top:6px;padding-top:6px;font-weight:700}
.pop::after{content:"";position:absolute;width:12px;height:12px;background:#1d2129;transform:rotate(45deg)}
.pop.up::after{bottom:-6px;left:calc(var(--ax,50%) - 6px)}
.pop.down::after{top:-6px;left:calc(var(--ax,50%) - 6px)}

/* ---------- cart line ---------- */
.cartline{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:12px;margin-bottom:8px;border:1px solid var(--line)}
/* ชื่อสินค้า = หัวการ์ดใหญ่สุด ชิดซ้ายบน · ราคาขวาบน */
.cartline .cl-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cartline .cl-name{font-size:1rem;font-weight:800;line-height:1.3;flex:1;min-width:0}
.cartline .cl-sub{font-size:.78125rem;color:var(--muted);margin-top:2px}
.cartline .cl-body{display:flex;align-items:flex-start;gap:10px;margin-top:9px}
.cartline img{width:54px;height:54px;border-radius:10px;object-fit:cover;flex:none}
.cartline .cl-ctl{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px;align-items:stretch}
.cartline .cl-ctl .stepper{align-self:flex-start;margin-top:0;background:#fff}
/* C-17 + feedback: "ถ้าของหมด" = toggle 2 ช่องติดกัน เห็นชัดว่าเลือกอย่างใดอย่างหนึ่ง (ช่องที่เลือก = เขียวเต็ม) */
.oos-seg{display:flex;flex-direction:column;gap:5px}
.oos-seg-lbl{font-size:.8125rem;color:#e8730c;font-weight:700}
.oos-toggle{display:flex;border:1.5px solid var(--line);border-radius:11px;overflow:hidden}
.oos-toggle .oos-opt{flex:1;border:0;border-radius:0;background:#fff;color:var(--ink);font-size:.875rem;font-weight:600;padding:11px 6px;min-height:46px;cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent}
.oos-toggle .oos-opt + .oos-opt{border-left:1.5px solid var(--line)}
.oos-toggle .oos-opt.on{background:#1f7a44;color:#fff}  /* id39: ขาวบน #06C755=2.26:1 → #1f7a44=5.35:1 ผ่าน AA */
.vdriver{font-size:.8125rem;margin-top:4px;font-weight:600}
.vdriver a{color:inherit;text-decoration:underline}
.cartline .price{text-align:right;font-weight:800;font-size:1rem;display:flex;align-items:center;gap:6px;flex:none;white-space:nowrap}
/* การ์ด "พัก" (qty 0) — เทา + ล็อกทุกปุ่มยกเว้น + */
.cartline.paused{background:#f1f3f5;border-color:#e2e6ea}
.cartline.paused .cl-name,.cartline.paused .cl-sub,.cartline.paused .price,.cartline.paused img{opacity:.5}
.cartline.paused .stepper button[disabled]{opacity:.35;cursor:not-allowed;color:var(--muted)}
.cart-shopgroup{margin-bottom:14px}
.cart-shopgroup>h4{margin:0 0 8px 2px;font-size:1.125rem;font-weight:800;color:var(--green-text);display:flex;align-items:center;gap:6px}
/* ค่าหิ้วเหมา (โหมด flat) — โชว์ครั้งเดียวต่อร้านใต้รายการ */
.cart-flatfee{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;font-size:.8125rem;font-weight:700;color:#1f7a44;background:#eafaf0;border:1px solid #bfe6cd;border-radius:10px;padding:8px 12px;margin:0 0 8px}
.cart-flatfee .ff-label{flex:1;min-width:0;line-height:1.45}
.cart-flatfee .ff-sub{font-weight:500;color:var(--muted);font-size:.71875rem}
.cart-flatfee .ff-amt{flex:none;white-space:nowrap}
/* ค่าหิ้วเหมาแบบ "พัก" (ทุกการ์ดในร้านถูกพัก) — เทาให้เข้าชุดกับการ์ด (ทั้งฉากหลัง+ตัวอักษร) แต่ยังโชว์ว่าร้านนี้คิดค่าหิ้วเหมา */
.cart-flatfee.paused{background:#f1f3f5;border-color:#e2e6ea}
.cart-flatfee.paused .ff-label,.cart-flatfee.paused .ff-sub,.cart-flatfee.paused .ff-amt{color:#9aa4ad}

/* ---------- totals ---------- */
.totals{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin:8px 0;border:1px solid var(--line)}
.totals .row{display:flex;justify-content:space-between;font-size:.875rem;padding:3px 0;color:var(--muted)}
.totals .grand{display:flex;justify-content:space-between;align-items:center;font-size:1.25rem;font-weight:800;border-top:2px dashed var(--line);margin-top:8px;padding-top:10px}
.totals .grand > span:first-child{line-height:1.25}
.totals .grand .amt{color:var(--green-text);display:flex;align-items:center;gap:8px}
/* แจ้งยอดเกินเพดาน → โอนก่อน (ตะกร้า + ยืนยัน) */
.payfirst-hi{background:#fff3e0;border:1px solid #f0c890;border-radius:12px;padding:11px 13px;margin:10px 0;font-size:.84375rem;color:#7a5a2a;line-height:1.6}
.payfirst-hi b{color:var(--warn-text)}
/* ลิงก์ตรวจหมุดบ้านบน Google Maps */
.geo-verify{display:block;margin-top:6px;font-size:.8125rem;font-weight:700;color:#1a73e8;text-decoration:none;line-height:1.45}

/* ---------- forms ---------- */
.field{margin:10px 0}
.field label{display:block;font-size:.8125rem;font-weight:600;margin-bottom:4px}
/* font-size:1rem = กัน iOS Safari ซูมหน้าทุกครั้งที่แตะช่องกรอก (คนสูงวัยงงทุกฟอร์ม) + อ่านง่ายขึ้น */
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px;font-size:1rem;background:#fff;font-family:inherit}
.field .hint{font-size:.75rem;color:var(--muted);margin-top:3px}
/* id22: ช่องที่ validate ไม่ผ่าน — กรอบแดงพาสายตาไปถูกช่อง (customer.js _fieldErr ลบให้เมื่อเริ่มพิมพ์) */
.field-err{border-color:var(--danger)!important;box-shadow:0 0 0 2.5px rgba(224,36,94,.18)!important}

/* ---------- buttons ---------- */
.btn{display:block;width:100%;background:var(--green-d);color:#fff;border:0;border-radius:14px;padding:15px;font-size:1.1875rem;font-weight:800;cursor:pointer;text-align:center;box-shadow:var(--shadow)}
.btn:active{background:#03813a}
.btn.secondary{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ghost{background:transparent;color:var(--green-text);box-shadow:none}
.btn[disabled]{opacity:.45;cursor:not-allowed;position:relative}
.btn.is-disabled{opacity:.45;cursor:help}  /* ปุ่มจาง แต่ยังแตะดูเหตุผลได้ */
/* A-07: ปุ่มเซฟ "ยังไม่บันทึก" — ไฮไลต์ส้มเต้นเบา ๆ กันเจ้าของลืมกดเซฟ draft วันส่ง/blackout */
.btn-dirty{background:#e8870c;animation:dirtyPulse 1.4s ease-in-out infinite}
.btn-dirty:active{background:#cf7708}
@keyframes dirtyPulse{0%,100%{box-shadow:0 0 0 2px rgba(232,135,12,.18)}50%{box-shadow:0 0 0 5px rgba(232,135,12,.34)}}
/* ปุ่มบอกต่อ — เล็ก จาง ไม่แย่งความสนใจจากการสั่งของ (ไม่ใช่วัตถุประสงค์หลักของร้าน) */
.share-row{text-align:right;margin:0 2px 6px}
.share-mini{display:inline-block;width:auto;background:transparent;border:0;color:var(--muted);font-size:.78125rem;font-weight:600;padding:4px 4px;cursor:pointer}
.share-mini:active{opacity:.55}

/* QR PromptPay */
.qr-card{display:flex;gap:12px;align-items:center;background:#f3fbf6;border:1px solid #cdeed9;border-radius:14px;padding:13px;margin:8px 0;box-shadow:var(--shadow)}
.qr-card .qrbox{width:132px;height:132px;flex-shrink:0;background:#fff;border-radius:10px;padding:7px;display:grid;place-items:center;box-shadow:0 1px 4px rgba(20,24,31,.1)}
.qr-card .qrbox img{width:100%;height:100%;image-rendering:pixelated}
.qr-card .qrinfo{font-size:.8125rem;line-height:1.5}
.qr-card .qrinfo b{color:#1f7a44}  /* id24: เลข/ยอดในบัตรจ่าย green-d #04a847=2.98:1 บน #f3fbf6 → #1f7a44=5.08:1 ผ่าน AA */
.btn-row{display:flex;gap:10px}
.btn-row .btn{flex:1}

/* ---------- bottom bar (cart) ---------- */
.bottombar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:460px;background:#fff;border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:stretch;gap:7px;z-index:40;box-shadow:0 -2px 12px rgba(0,0,0,.05)}
.bottombar .bb-main{display:flex;align-items:center;gap:12px}
.bottombar .bb-cd{font-size:.78125rem;font-weight:800;color:var(--warn-text);text-align:center;line-height:1.2}   /* C-25: countdown ติด CTA */
.bottombar .info-amt{flex:1;min-width:0}
.bottombar .info-amt .lbl{font-size:.78125rem;color:var(--muted)}
/* id39-fix: ยอดเงินหลักห้ามตกบรรทัด (CTA 19px ที่บีบคอลัมน์แคบลงเคยทำ "285 บาท"→"285"/"บาท") · nowrap คุ้มครองเลขยอด + ลด padding ปุ่มให้พอดี 375px แม้ CTA ยาวสุด "แทนบิลเดิม" */
.bottombar .info-amt .amt{font-size:1.25rem;font-weight:800;display:flex;align-items:center;gap:6px;white-space:nowrap}
.bottombar .btn{width:auto;padding:14px 18px}

/* ---------- confirm summary ---------- */
.summary-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin:8px 0;border:1px solid var(--line)}
.confirm-item{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.confirm-item:last-child{border-bottom:0}
.confirm-item img{width:48px;height:48px;border-radius:10px;object-fit:cover}
.tag{display:inline-block;font-size:.78125rem;padding:2px 8px;border-radius:20px;font-weight:600}
.tag.skip{background:#fdeaea;color:#b3163f}  /* id24: 5.84:1 บน #fdeaea (danger เดิม 3.96:1) */
.tag.call{background:#fff3e0;color:var(--warn-text)}

/* ---------- status timeline ---------- */
.timeline{margin:10px 0}
.tl-step{display:flex;gap:12px;align-items:flex-start;padding-bottom:18px;position:relative}
.tl-step:not(:last-child)::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--line)}
.tl-step .dot{width:28px;height:28px;border-radius:50%;background:var(--line);display:grid;place-items:center;color:#fff;font-size:.875rem;flex-shrink:0;z-index:1}
.tl-step.done .dot{background:var(--green)}
.tl-step.active .dot{background:var(--green);box-shadow:0 0 0 5px rgba(6,199,85,.2)}
.tl-step .tx b{font-size:.9375rem}
.tl-step .tx .sub{font-size:.75rem;color:var(--muted)}
#map{height:220px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin:8px 0;z-index:1}

/* ---------- toast ---------- */
/* z-index:10000 = เหนือ modal overlay (.fpModal/.qaModal z-index 9998) — errToast เซฟพังต้องเด่นเหนือ modal ที่ยังเปิดค้าง (กันเซฟพังเงียบใต้ชีต) */
.toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:#1d2129;color:#fff;padding:12px 18px;border-radius:30px;font-size:.875rem;z-index:10000;box-shadow:var(--shadow-lg);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.toast[hidden]{display:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)}
/* แจ้งเตือนล้มเหลวแบบเด่น+ค้าง (errToast) — แดง อ่านง่าย แตะตัวข้อความหรือกดปุ่มปิดได้ · z-index:10003 = เหนือ .help-modal (10002) ด้วย ไม่งั้นเซฟพังในโมดอลชีตจะเด้งใต้ชีตเงียบ ๆ */
.toast.err{background:#c0392b;z-index:10003;max-width:88vw;border-radius:14px;padding:14px 18px;font-weight:600;line-height:1.45;white-space:normal;text-align:left;pointer-events:auto;cursor:pointer}
.toast-message{min-width:0;overflow-wrap:anywhere}
.toast.err .toast-message{flex:1}
.toast-dismiss{flex:0 0 auto;min-width:44px;min-height:44px;border:1px solid rgba(255,255,255,.65);border-radius:10px;padding:7px 10px;background:rgba(0,0,0,.12);color:#fff;font:inherit;font-size:.75rem;font-weight:700;line-height:1;white-space:nowrap;cursor:pointer}
.toast-dismiss:hover{background:rgba(0,0,0,.22)}
.toast-dismiss:active{background:rgba(0,0,0,.3)}
.toast-dismiss:focus-visible{outline-color:#fff;box-shadow:0 0 0 2px #c0392b}

/* ---------- live vehicle status + refresh (customer) ---------- */
.refresh-mini{background:rgba(255,255,255,.22);border:0;color:#fff;border-radius:9px;padding:6px 11px;font-size:.8125rem;font-weight:700;cursor:pointer;flex-shrink:0}
.refresh-mini:active{background:rgba(255,255,255,.36)}

/* แผนที่ "ช่วง" ฝั่งลูกค้า (customer-zone-map) — คนหิ้ววิ่งถึงไหน หยาบ ๆ ไม่ realtime */
.zone{position:relative;margin:0 12px 12px;padding:12px 12px 10px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.zone-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.zone-tag{font-size:.78125rem;font-weight:800;color:var(--green-text)}
/* ข้อ 7: จุดสถานะตำแหน่ง — วงกลมเล็ก เขียว(สด)/เหลือง(สัญญาณหาย) แตะที่จุดเด้ง popover (data-tip) · ไม่โชว์ข้อความแต่แรก */
.zone-dot{appearance:none;-webkit-appearance:none;border:none;padding:0;width:12px;height:12px;border-radius:50%;position:relative;cursor:pointer;flex:0 0 auto}
.zone-dot::after{content:'';position:absolute;inset:-16px}   /* ขยายพื้นที่แตะ ~44px (สูงวัยแตะง่าย) */
.zone-dot.ok{background:#22c55e;animation:zoneDotPulse 2s infinite}
.zone-dot.warn{background:#eab308;box-shadow:0 0 0 4px rgba(234,179,8,.16)}
@keyframes zoneDotPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@media (prefers-reduced-motion: reduce){.zone-dot.ok{animation:none;box-shadow:0 0 0 4px rgba(34,197,94,.16)}}
.zone-line{font-size:.875rem;font-weight:600;line-height:1.4;margin-bottom:8px}
.zone-line b{font-weight:800}
.zone-line .zcd{color:var(--danger);font-weight:800;font-variant-numeric:tabular-nums}
/* A15b: ป้ายบอกตำแหน่งอาจไม่สด (inline ท้ายบรรทัด zone) — จุด dot บอกอยู่แล้ว นี่เสริมข้อความให้ชัด */
.zone-line .zone-stale{font-size:.78125rem;font-weight:600;color:var(--muted)}
.zone-next{font-size:.78125rem;color:var(--muted);font-weight:600;margin-top:3px}
/* ไทม์ไลน์ร้าน: เลื่อนแนวนอนได้เมื่อร้านเยอะ (ไม่มีสกอร์บาร์) · น. แต่ละสถานีกว้างคงที่ อ่านง่ายไม่ทับกัน */
.zone-track{position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.zone-track::-webkit-scrollbar{display:none;width:0;height:0}
.zone-track-inner{position:relative;display:flex;align-items:flex-start;padding-top:26px;width:max-content;margin:0 auto}
.zone-rail{position:absolute;top:39px;height:4px;background:var(--line);border-radius:3px;overflow:hidden}
.zone-rail i{display:block;height:100%;background:var(--green);border-radius:3px;transition:width .8s ease}
.zone-car{position:absolute;top:2px;transform:translateX(-50%);font-size:1.375rem;line-height:1;transition:left .8s ease;z-index:3;filter:drop-shadow(0 2px 3px rgba(20,24,31,.22))}
.zs{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;flex:0 0 74px;min-width:0;padding:0 3px;z-index:2}
.zs.tappable{cursor:pointer}
.zs.tappable:active .zs-dot{transform:scale(.93)}
.zs-dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.9375rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;background:#eef0f3;border:2px solid var(--line);transition:transform .12s ease}
.zs-name{font-size:.75rem;font-weight:700;line-height:1.2;margin-top:4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.zs-sub{font-size:.75rem;color:var(--muted);font-weight:700;margin-top:1px;font-variant-numeric:tabular-nums}
.zs.passed .zs-dot{opacity:.65}
.zs.passed .zs-name{color:var(--muted)}
.zs.ahead .zs-dot,.zs.home .zs-dot{background:#eafaf0;border-color:#bdebcf}
.zs.closing .zs-dot{background:#fff3e0;border-color:var(--warn)}
.zs.closing .zs-sub,.zs.current .zs-sub{color:var(--danger);font-weight:800}
.zs.current .zs-dot{background:var(--green);border-color:var(--green);color:#fff;animation:zsPulse 1.6s ease-in-out infinite}
@keyframes zsPulse{0%,100%{box-shadow:0 0 0 5px rgba(6,199,85,.18)}50%{box-shadow:0 0 0 9px rgba(6,199,85,.05)}}
.zone-foot{font-size:.71875rem;color:var(--muted);text-align:center;margin-top:8px;line-height:1.4}
/* แจ้งเตือนรถใกล้ถึง — เด่น ตัวใหญ่ คนแก่เห็นชัด */
.near-alert{display:none;align-items:center;gap:12px;margin:0 0 12px;padding:14px 16px;border-radius:var(--radius);
  background:linear-gradient(135deg,#fff6e0,#ffe7c2);border:2px solid var(--warn);
  box-shadow:0 6px 18px rgba(240,160,30,.35);animation:naPulse 1.3s ease-in-out infinite}
.near-alert.show{display:flex}
.near-alert .na-ic{font-size:2.125rem;flex-shrink:0;animation:naBob 1s ease-in-out infinite}
.near-alert .na-tx{font-size:1rem;font-weight:800;line-height:1.3;color:#7a4a00}
.near-alert .na-tx b{color:#b35900}
.near-alert .na-sub{font-size:.8125rem;font-weight:600;color:#8a5a17;margin-top:2px}
@keyframes naPulse{0%,100%{box-shadow:0 6px 18px rgba(240,160,30,.30)}50%{box-shadow:0 7px 26px rgba(240,160,30,.6)}}
@keyframes naBob{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
/* ชิปบอกชื่อผู้สั่งจาก LINE (LIFF) */
.liff-id{background:#eafaf0;border:1px solid #bfe6cf;border-radius:10px;padding:9px 11px;margin-bottom:10px;font-size:.90625rem;color:var(--green-text)}

/* shop card order states */
.shop.is-closing{border-color:#f0d9a8;background:#fffdf6}
.shop.is-closed{opacity:.6;background:#f6f7f9;cursor:not-allowed}
.shop .closing-hint{font-size:.75rem;color:var(--danger);font-weight:700;margin-top:2px}
.shop .closing-hint b{font-variant-numeric:tabular-nums}
.badge-closed{display:inline-block;font-size:.78125rem;font-weight:800;color:#fff;background:var(--danger);border-radius:7px;padding:3px 9px;white-space:nowrap}
.badge-closing{display:inline-block;font-size:.78125rem;font-weight:800;color:#fff;background:var(--warn-text);border-radius:7px;padding:3px 9px;white-space:nowrap}

/* products page strip + locked product */
.shop-strip{margin:12px 12px 0;padding:11px 14px;border-radius:12px;font-size:.84375rem;font-weight:600;line-height:1.45}
.shop-strip b{font-variant-numeric:tabular-nums}
.shop-strip.closing{background:#fff8ec;border:1px solid #f0d9a8;color:#8a6d1f}
.shop-strip.closed{background:#fdeaea;border:1px solid #f3c2c2;color:var(--danger)}
.shop-strip.origin{background:#eafaf0;border:1px solid #bce8cd;color:var(--green-text)}
/* v18: วันส่ง "เผื่อเลือกได้" — chips เลือกวัน (vInfo บังคับเลือก, vStatus เปลี่ยนได้จนล็อก) + กล่อง "ทัก/โทรก่อนส่ง" */
.day-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.day-chip{padding:11px 16px;border-radius:999px;border:1.5px solid #d8e6dc;background:#fff;color:#2c3d33;font-size:.875rem;font-weight:700;cursor:pointer;font-family:inherit;min-height:44px}
.day-chip.on{border-color:#1f7a44;background:#e9f7ef;color:#1f7a44}  /* id39: 4.84:1 บน #e9f7ef */
/* id39: สัญญาณ "เลือกอยู่" ไม่พึ่งสีอย่างเดียว · reserve ที่ ✓ ไว้ทุกชิป (visibility:hidden กินที่เท่าเดิม) → เลือกแล้วไม่ดันชิปกว้างขึ้น/แถวไม่กระโดด */
.day-chip::before{content:"✓";visibility:hidden;margin-right:5px;font-weight:800}
.day-chip.on::before{visibility:visible}
.day-chip:active{background:#e4eeff}
.deliver-reassure{font-size:.8125rem;color:#1f5c3a;background:#eafaf0;border:1px solid #bce8cd;border-radius:12px;padding:10px 12px;margin:0 0 12px;line-height:1.5}
.deliver-reassure b{font-weight:800}
.product.locked{opacity:.66}
.product.locked .imgwrap{filter:grayscale(.5)}
.locked-note{margin-top:8px;text-align:center;font-size:.8125rem;font-weight:800;color:var(--danger);background:#fdeaea;border-radius:10px;padding:9px}

/* cart closed-shop warning */
.cart-warn{font-size:.75rem;color:var(--danger);background:#fdeaea;border:1px solid #f3c2c2;border-radius:10px;padding:8px 10px;margin:0 0 6px}

/* =======================================================
   ADMIN
   ======================================================= */
/* ข้อ 24: grid 2 แถวเห็นครบ 7 แท็บบนจอ ~390px — เลิก overflow-x ที่ทำแท็บท้าย (💰/✈️) ตกขอบแบบมองไม่เห็น */
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:#fff;padding:6px;margin:10px 12px;border-radius:14px;box-shadow:var(--shadow)}
.tabs button{white-space:nowrap;border:0;background:transparent;padding:9px 2px;border-radius:10px;font-size:.78125rem;font-weight:700;color:var(--muted);cursor:pointer;overflow:hidden;text-overflow:ellipsis}
.tabs button.active{background:#1f7a44;color:#fff}  /* id39 */
.panel{padding:0 12px;display:none}
.panel.active{display:block}

.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:12px;border:1px solid var(--line)}
.card h3{margin:0 0 10px;font-size:1rem}

/* paste dropzone */
.dropzone{border:2px dashed var(--green);border-radius:14px;padding:24px;text-align:center;color:var(--green-text);background:#f3fbf6;cursor:pointer;font-weight:600}
.dropzone.hasimg{padding:0;border-style:solid;border-color:var(--line);overflow:hidden}
.dropzone canvas,.dropzone img{max-width:100%;display:block;border-radius:12px}
.preview-wrap{position:relative}

/* buy list */
.buy-shop{margin-bottom:16px}
.buy-shop h4{margin:0 0 6px;font-size:.9375rem;color:var(--green-text);display:flex;justify-content:space-between}
.buy-item{display:flex;align-items:center;gap:10px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:6px}
.buy-item input[type=checkbox]{width:28px;height:28px;accent-color:var(--green);flex-shrink:0}
.buy-item.bought{opacity:.5;text-decoration:line-through}
.buy-item .qty{margin-left:auto;font-weight:800;font-size:1rem}
.buy-item .callnote{font-size:.875rem;color:var(--warn-text)}

/* packing per customer */
.pack-cust{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px;box-shadow:var(--shadow)}
.pack-cust .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.pack-cust .head b{font-size:1rem}
.pack-cust .head .addr{font-size:.75rem;color:var(--muted)}
.pack-shop{margin:6px 0}
.pack-shop .sh{font-size:.75rem;color:var(--green-text);font-weight:700;margin-bottom:2px}
.pack-shop .pi{display:flex;justify-content:space-between;font-size:.875rem;padding:2px 0}
.paychip{font-size:.75rem;font-weight:700;padding:4px 10px;border-radius:20px}
.paychip.unpaid{background:#fdeaea;color:var(--danger)}
.paychip.paid{background:#e7f8ee;color:var(--green-text)}
.paychip.owed{background:#fff3e0;color:var(--warn-text)}

/* A-08: ไฮไลต์ร้านที่คนขับยืนซื้ออยู่ (แท็บซื้อรวม + แยกถุง) */
.buy-shop.cur-shop{border:2px solid var(--green);box-shadow:0 0 0 3px rgba(6,199,85,.12)}
.cur-shop-tag{font-size:.6875rem;font-weight:700;color:#fff;background:var(--green);padding:2px 9px;border-radius:20px;white-space:nowrap;align-self:center}
.pack-shop.cur-shop{background:#f0fbf4;border-left:3px solid var(--green);border-radius:8px;padding:4px 6px;margin-left:-6px}
.pack-shop.cur-shop .sh{color:var(--green-text)}

/* A-09: ปุ่มรองในการ์ดแยกถุง — ยุบหลัง ⋯ (details/summary) */
.pack-more{position:relative}
.pack-more>summary{list-style:none;background:#eef1f5;color:var(--muted);padding:0 16px;min-width:48px}
.pack-more>summary::-webkit-details-marker{display:none}
.pack-more>summary::marker{content:""}
.pack-more[open]>summary{background:#dfe3ea}
.pack-more-menu{position:absolute;right:0;top:calc(100% + 5px);z-index:8;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;min-width:220px}

/* A-10: ป้าย "เก็บปลายทาง" บนบิลที่ยังไม่จ่าย (เงินสดที่คนขับต้องรับ) */
.cod-tag{font-size:.875rem;color:var(--warn-text);font-weight:700;margin-top:3px}

/* telegram message box */
.tg{background:#0f1620;color:#e8edf2;border-radius:14px;padding:14px;font-size:.8125rem;line-height:1.7;white-space:pre-wrap;font-family:ui-monospace,Menlo,monospace;margin-bottom:8px;border:1px solid #223}
.copy-btn{background:#229ED9;color:#fff;border:0;border-radius:10px;padding:11px 16px;font-size:.875rem;font-weight:700;cursor:pointer;display:inline-flex;gap:6px;align-items:center;justify-content:center;min-height:44px}
/* พิกัดช่องเดียว + ปุ่มก๊อป (admin) */
.coord-row{display:flex;gap:8px;align-items:center}
.coord-row input{flex:1;min-width:0}
.coord-copy{flex:0 0 auto;width:48px;height:48px;border:1px solid var(--line);background:#fff;border-radius:12px;font-size:1.25rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.coord-copy:active{background:#eef2ff}
.tg-meta{font-size:.75rem;color:var(--muted);margin:4px 0 8px}

/* journey drive mode */
.jrn-drive-card { text-align: center; padding: 20px 16px 16px; }
.jrn-progress { font-size: .75rem; color: var(--muted); margin-bottom: 10px; font-weight: 700; letter-spacing: .03em; }
.jrn-icon { font-size: 3.5rem; line-height: 1; margin-bottom: 10px; }
.jrn-label { font-size: 1.1875rem; font-weight: 800; margin-bottom: 6px; }
.jrn-cd { font-size: 1.625rem; font-weight: 800; color: var(--danger); font-variant-numeric: tabular-nums; margin: 6px 0 4px; }
.jrn-big-btn { font-size: 1.3125rem !important; padding: 20px 16px 14px !important; border-radius: 20px !important; margin-top: 16px; display: flex !important; flex-direction: column; align-items: center; gap: 4px; }
.jrn-btn-main { font-size: 1.3125rem; font-weight: 800; }
.jrn-btn-hint { font-size: .8125rem; font-weight: 400; opacity: .82; }
/* step list */
.jrn-step-row { display: flex; align-items: center; gap: 8px; padding: 10px 8px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 6px; background: var(--card); }
.jrn-step-row.jrn-cur-row { border-color: var(--green); background: #f0fbf4; }
.jrn-step-row.jrn-done-row { opacity: .45; }
.jrn-num { width: 24px; height: 24px; border-radius: 50%; background: var(--line); display: grid; place-items: center; font-size: .75rem; font-weight: 800; flex-shrink: 0; }
.jrn-cur-row .jrn-num { background: var(--green); color: #fff; }
.jrn-em { font-size: 1.25rem; flex-shrink: 0; }
.jrn-desc { flex: 1; font-size: .875rem; line-height: 1.3; }
.jrn-add-area { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.jrn-note { font-size: .8125rem; color: var(--warn-text); background: #fff8ec; border: 1px solid #f0d9a8; border-radius: 10px; padding: 10px 12px; margin: 10px 0 0; }

/* ---------- live GPS broadcast card (admin) ---------- */
.gps-card{border:2px solid #cdeed9;background:#f3fbf6}
.gps-card .gps-desc{font-size:.8125rem;color:var(--muted);margin:0 0 12px}
.gps-card .jrn-big-btn.gps-stop{background:var(--danger)}
.gps-live{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 2px;font-size:.875rem;font-weight:800;color:var(--green-text)}
.gps-live .dot{width:10px;height:10px;border-radius:50%;background:var(--green);animation:vpulse 1.4s infinite}
.gps-sim{margin-top:10px;font-size:.875rem}

/* ---------- live map markers (emoji divIcon, ไม่ต้องโหลดรูป marker) ---------- */
.mk-wrap{background:transparent !important;border:0 !important}
.mk{position:relative;display:grid;place-items:center;line-height:1;border-radius:50%;background:#fff}
.mk.car{width:46px;height:46px;font-size:1.625rem;border:3px solid var(--green);box-shadow:0 3px 10px rgba(0,0,0,.3)}
.mk.car::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid rgba(6,199,85,.5);animation:carPulse 1.6s ease-out infinite}
@keyframes carPulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.55);opacity:0}}
.mk.car.stale{border-color:var(--muted);filter:grayscale(.6)}
.mk.car.stale::before{display:none}
.mk.home{width:40px;height:40px;font-size:1.4375rem;border:3px solid var(--warn);box-shadow:0 3px 10px rgba(0,0,0,.25)}
.mk.shop{width:38px;height:38px;font-size:1.3125rem;border:3px solid var(--fee);box-shadow:0 2px 8px rgba(0,0,0,.22)}
.mk.shop.cur{border-color:var(--green);box-shadow:0 0 0 5px rgba(6,199,85,.25),0 2px 8px rgba(0,0,0,.25);transform:scale(1.08)}
.mk.shop.done{border-color:var(--line);background:#eef0f3;filter:grayscale(.4);opacity:.9}
/* ลูกศรหัวรถ — ชี้ทิศที่กำลังวิ่ง (หมุนทั้ง layer รอบจุดกลางหมุด) */
.mk.car .cardir-layer{position:absolute;inset:0;pointer-events:none;transition:transform .6s ease}
.mk.car .cardir{position:absolute;top:-8px;left:50%;margin-left:-7px;width:0;height:0;
  border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid var(--green);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.leaflet-control-attribution{font-size:.5625rem;background:rgba(255,255,255,.7)}
#etaText b{color:var(--green-text);font-variant-numeric:tabular-nums}

/* outstanding */
.owe-row{display:flex;justify-content:space-between;align-items:center;padding:12px;background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:6px}
.owe-row .amt{font-weight:800;color:var(--danger)}

/* index hub */
.hub{padding:24px 16px}
.hub h1{font-size:1.5rem;margin:8px 0}
.hub p{color:var(--muted);margin:0 0 20px}
.hub a.card{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.hub a.card .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.75rem}
.hub a.card .ic.c1{background:#eafaf0}
.hub a.card .ic.c2{background:#eef4ff}
.hub a.card b{font-size:1.0625rem;display:block}
.hub a.card span{font-size:.8125rem;color:var(--muted)}
.note-box{background:#fffbe9;border:1px solid #f0e3a8;border-radius:12px;padding:12px;font-size:.8125rem;color:#7a6a1f;margin-top:16px}
small.muted{color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:40px 20px}

/* ===== ใบสรุปคนขับ (driver.html) — จอใหญ่ ปุ่มใหญ่ คนสูงวัยใช้ได้ ===== */
.hub a.card .ic.c3{background:#fff1e8}
.drv-banner{position:sticky;top:0;z-index:6;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;margin:0 0 14px}
.drv-banner .now{font-size:1.25rem;font-weight:800;line-height:1.25}
.drv-banner .sub{font-size:.875rem;color:var(--muted);margin-top:3px}
.drv-banner .sub b{color:var(--danger);font-variant-numeric:tabular-nums}
.drv-adv{margin-top:14px}
.drv-gps{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;margin-top:10px;padding:12px;font-size:.9375rem;font-weight:700;border:1.5px dashed var(--line);border-radius:14px;background:transparent;color:var(--muted);cursor:pointer}
.drv-gps small{font-size:.75rem;font-weight:400}
.drv-gps.on{border-style:solid;border-color:var(--green);background:#eafaf0;color:var(--green-text)}
/* audit 2026-07-06 #10: นำทาง/โทร ≥44px (เดิม 40px) + gap ระหว่างปุ่มแถวส่ง 10px (เดิม 5px) — กัน mis-tap คนละผลลัพธ์ขณะขับ */
.drv-tel{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:700;color:var(--green-text);background:#eafaf0;border:1px solid var(--green);border-radius:20px;padding:8px 14px;margin:3px 4px 0 0;text-decoration:none;white-space:nowrap;min-height:44px}
.drv-acts{flex-shrink:0;display:flex;flex-direction:column;gap:10px;align-items:stretch}
.drv-acts .drv-tel{margin:0;text-align:center}
/* A13a: การ์ด "ส่งของถึงบ้าน" (.deliver) — 2 แถว: บน=check+ชื่อ+ที่อยู่เต็มกว้าง (ที่อยู่ ~299px บน 375px ไม่โดนบีบ) · ล่าง=ปุ่มแนวนอน wrap ≥44px
   scope .deliver เท่านั้น (แถวซื้อของยัง horizontal เดิม) */
.drv-row.deliver{flex-direction:column;align-items:stretch;gap:10px}
.drv-row.deliver .drv-top{display:flex;align-items:flex-start;gap:14px}
.drv-row.deliver .drv-acts{flex-direction:row;flex-wrap:wrap;align-items:stretch}
.drv-row.deliver .drv-acts .drv-tel{flex:0 1 auto}
.shop-teaser{margin-top:8px}
/* ของเยอะ → เลื่อนแนวนอนดูได้ทุกชิ้น ไม่มีสกอร์บาร์ */
.st-scroll{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.st-scroll::-webkit-scrollbar{display:none;width:0;height:0}
.shop-thumb{width:40px;height:40px;border-radius:9px;object-fit:cover;border:1px solid var(--line);flex-shrink:0;background:#f0f1f4}
.shop-count{display:block;font-size:.75rem;color:var(--muted);margin-top:5px;white-space:nowrap}
.drv-shop{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;margin-bottom:12px}
.drv-shop.cur{border:2px solid var(--green);box-shadow:0 0 0 3px #d8f3e2}
.drv-shop.done{opacity:.55}
.drv-shead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.drv-ic{font-size:1.625rem;flex-shrink:0}
.drv-stitle{flex:1;min-width:0}
.drv-stitle b{font-size:1.0625rem}
.drv-smeta{font-size:.75rem;color:var(--muted);margin-top:2px}
.drv-prog{flex-shrink:0;font-size:.875rem;font-weight:800;color:var(--green-text);background:#eafaf0;padding:4px 10px;border-radius:20px;white-space:nowrap}
.drv-chip{font-size:.78125rem;font-weight:700;padding:2px 8px;border-radius:20px}
.drv-chip.open{background:#e7f8ee;color:var(--green-text)}
.drv-chip.closing{background:#fff3e0;color:var(--warn-text)}
.drv-chip.closed{background:#fdeaea;color:var(--danger)}
.drv-row{display:flex;align-items:center;gap:14px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:8px;min-height:60px;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.drv-row:active{background:#f4f7fb}
.drv-row.on{opacity:.5}
.drv-row.on .drv-name{text-decoration:line-through}
.drv-check{flex-shrink:0;width:34px;height:34px;border-radius:9px;border:2.5px solid var(--green);display:grid;place-items:center;font-size:1.375rem;font-weight:900;color:#fff;background:#fff}
.drv-row.on .drv-check{background:var(--green)}
.drv-name{flex:1;min-width:0;font-size:1.0625rem;font-weight:700;line-height:1.3}
.drv-call{font-size:.9375rem;font-weight:600;color:var(--warn-text);margin-top:3px}
/* id17: บรรทัดที่อยู่บ้านลูกค้าในการ์ดส่งของ — ข้อมูลวิกฤตสุดตอนจอดหาบ้าน อ่านได้กลางแดด */
.drv-call.drv-addr{font-size:1rem;font-weight:700}
.drv-qty{flex-shrink:0;font-size:1.375rem;font-weight:800;color:var(--ink);white-space:nowrap}
.drv-qty small{font-size:.75rem;font-weight:600;color:var(--muted);margin-left:3px}
.drv-oos{flex-shrink:0;border:1.5px solid var(--danger);color:var(--danger);background:#fff;border-radius:9px;padding:8px 12px;font-size:.875rem;font-weight:700;min-height:44px;min-width:60px;margin-left:4px}
.drv-row.oos-out .drv-name{text-decoration:line-through;color:var(--muted)}
.drv-row.oos-out .drv-call{text-decoration:none}
/* Feature B: ปุ่มบันทึกราคาจริงของสด (คนขับ) + ป้ายบอกผล แบกให้/เก็บเพิ่ม/คืน */
.drv-fresh{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px}
.drv-fprice{flex-shrink:0;display:inline-flex;align-items:center;border:1.5px solid #1f7a44;color:#1f7a44;background:#fff;border-radius:9px;padding:8px 12px;font-size:.875rem;font-weight:700;min-height:40px;text-decoration:none}
.drv-fprice.set{background:#1f7a44;color:#fff}
.drv-fnote{font-size:.75rem;font-weight:700;border-radius:8px;padding:2px 7px;line-height:1.4}
.drv-fnote.down,.drv-fnote.covered{color:#1f7a44;background:#eafaf0}
.drv-fnote.charge{color:var(--warn-text);background:#fff3e0}
/* D-01: ของสดที่ติ๊กซื้อแล้วแต่ยังไม่ลงราคาจริง → คงปุ่มราคาไว้ ไม่หรี่ทั้งแถว (เดิมซ่อน .drv-fresh ตอน .on) */
.drv-row.on.needs-price{opacity:1;background:#fff8ee;border-color:#f0d9a8}
.drv-paywarn{margin-top:4px;font-size:.875rem;font-weight:700;color:var(--warn-text);background:#fff3e0;border:1px solid #f0c890;border-radius:8px;padding:4px 8px;line-height:1.4}
.drv-empty{text-align:center;color:var(--muted);font-size:.875rem;padding:14px}
.drv-foot{margin-top:18px;text-align:center}
.drv-foot .muted{font-size:.75rem;color:var(--muted);margin:12px 0;line-height:1.5}
.drv-foot .btn.ghost{margin-top:6px}

/* ===== ประวัติเส้นทาง (history.html) ===== */
.hub a.card .ic.c4{background:#eef6ff}
.hist-map{height:62vh;min-height:340px;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.hist-stats{display:flex;gap:10px;flex-wrap:wrap;font-size:.9375rem;font-weight:700;color:var(--green-text);margin-top:8px}
.hist-stats span{background:#eafaf0;padding:6px 12px;border-radius:20px}

/* ===== footer ท้ายแอป: ช่องทางติดต่อ + ปุ่มเฟืองเข้าหลังบ้าน (ซ่อน) ===== */
.app-footer{margin:22px 12px calc(96px + env(safe-area-inset-bottom,0px));text-align:center}
.af-contact{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 12px;margin-bottom:14px}
.af-name{font-size:.9375rem;font-weight:700;margin-top:2px}
.af-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.af-link{display:inline-block;text-decoration:none;font-size:.875rem;font-weight:700;padding:9px 16px;border-radius:12px;border:1px solid var(--line)}
.af-link:active{opacity:.6}
.af-link.call{background:#eafaf0;color:var(--green-text)}
.af-link.line{background:#06C755;color:#fff;border-color:#06C755}
.af-link.fb{background:#1877f2;color:#fff;border-color:#1877f2}

/* =======================================================
   UI/UX polish 2026-06-26 — trust & hierarchy helpers
   ======================================================= */
/* แถบสร้างความมั่นใจ (ข้อ 9: ย้ายลงฟุตเตอร์ รวมกับช่องทางติดต่อ) — "จ่ายสดได้ · ของหมดไม่คิดเงิน · โทรก่อนส่ง" */
.af-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 14px;margin:0 0 14px;padding:12px 14px;background:#f3fbf6;border:1px solid #cdeed9;border-radius:14px;box-shadow:var(--shadow)}
.af-trust .ti{display:flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:700;color:var(--green-text);line-height:1.4}
/* ปุ่มลัด สั่งซ้ำ/ประวัติ — เล็ก ครึ่งจอ ไม่ดันร้านตกขอบล่าง (เป้าหมายหลัก = แตะร้าน) */
.quick-acts{display:flex;gap:8px;margin:2px 0 12px}
.quick-acts .qa{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 6px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-size:.84375rem;font-weight:700;cursor:pointer;box-shadow:var(--shadow)}
.quick-acts .qa:active{background:#f4f7fb}
/* บรรทัดเช็คชื่อบัญชีกันโอนผิดคน — เด่น ไม่จาง (สัญญาณกันสแกมที่สำคัญที่สุด) */
.acct-check{display:flex;align-items:flex-start;gap:8px;background:#eafaf0;border:1px solid #bce8cd;border-radius:10px;padding:9px 11px;margin:8px 0 2px;font-size:.84375rem;font-weight:700;color:#1f7a44;line-height:1.45}
.acct-check b{color:var(--green-text)}

/* =======================================================
   UI/UX polish รอบ 2 (2026-06-26) — skeleton · tag order · field groups · receipt · fresh-price modal
   ======================================================= */
/* โครงหน้าระหว่างโหลด (skeleton) — แทนจอขาวว่างตอน boot ครั้งแรก */
.sk{position:relative;overflow:hidden;background:#e7eaf0;border-radius:8px}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:skshimmer 1.3s infinite}
@keyframes skshimmer{100%{transform:translateX(100%)}}
.sk-banner{height:96px;margin:12px;border-radius:var(--radius)}
.sk-shop{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;margin-bottom:10px;display:flex;align-items:center;gap:12px}
.sk-ic{width:46px;height:46px;border-radius:12px;flex-shrink:0}
.sk-meta{flex:1}
.sk-line{height:13px;margin:7px 0;border-radius:6px}
.sk-line.w70{width:70%}
.sk-line.w45{width:45%}
@media (prefers-reduced-motion:reduce){.sk::after{animation:none}}

/* ป้าย "ชนิดของ" (ของสด/หิ้วพิเศษ) จัดกลุ่มใต้ชื่อก่อนราคา */
.product .prod-tags{display:flex;flex-direction:column;gap:4px;margin:2px 0 1px}

/* หัวข้อย่อยจัดกลุ่มฟิลด์ในฟอร์มข้อมูลจัดส่ง (vInfo) */
.fgroup-title{font-size:.78125rem;font-weight:800;color:var(--green-text);letter-spacing:.01em;margin:14px 0 2px;padding-top:11px;border-top:1px dashed var(--line)}
.summary-card > .fgroup-title:first-of-type{border-top:0;padding-top:0;margin-top:6px}

/* ใบเสร็จย่อหน้า "สั่งสำเร็จ" */
.receipt .receipt-line{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 0;font-size:.90625rem;border-bottom:1px solid var(--line)}
.receipt .receipt-line:last-of-type{border-bottom:0}
.receipt .rl-name{flex:1;min-width:0;font-weight:600;line-height:1.4}
.receipt .rl-qty{flex-shrink:0;font-weight:700;color:var(--green-text);font-variant-numeric:tabular-nums}
.receipt .receipt-line.cut{opacity:.55}
.receipt .receipt-line.cut .rl-name{text-decoration:line-through}

/* ปุ่มปิด (✕) ของ modal — ขยายพื้นที่แตะ ≥44px ตามมาตรฐาน (เดิม ~24px แตะยากบนมือถือ) */
.modal-x{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;line-height:1}

/* modal ราคาจริงของสด (คนขับ) — แทน prompt() ซ้อน */
.fp-hint{font-size:.8125rem;font-weight:600;line-height:1.5;color:var(--muted);min-height:18px;margin:3px 1px}
.fp-hint.up{color:var(--warn-text)}
.fp-hint.down{color:#1f7a44}
.fp-hint.err{color:var(--danger)}
.fp-choice{background:#fff8ee;border:1px solid #f0d9a8;border-radius:12px;padding:11px 12px;margin-top:4px}
.fp-opt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:11px;padding:11px 13px;margin-top:8px;font-size:.9375rem;font-weight:700;cursor:pointer;color:var(--ink);min-height:48px}
.fp-opt small{font-size:.75rem;font-weight:500;color:var(--muted)}
.fp-opt.on{border-color:var(--green);background:#eafaf0;color:var(--green-text)}

/* C-01: ตะกร้าตอนรอบปิด — คงของไว้ ไม่มีปุ่มลบทำลาย */
.cart-roundclosed{background:#eef6ff;border:1px solid #cfe0ff;border-radius:12px;padding:12px 14px;font-size:.875rem;line-height:1.6;color:#2c4a6e;margin-bottom:10px;text-align:center}
/* C-06: บล็อก "ขั้นต่อไป" หน้าสั่งสำเร็จ */
.next-steps .ns-title{font-weight:800;margin-bottom:6px}
.next-steps .ns-row{font-size:.875rem;line-height:1.85}
.next-steps .ns-row + .ns-row{margin-top:2px}

/* C-10: ชิปคนหิ้ว above-the-fold (ใครหิ้วของให้) */
.carrier-chip{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:11px 13px;margin:0 0 10px}
.carrier-chip .cc-emoji{font-size:1.875rem;flex:none}
.carrier-chip .cc-tx{flex:1;min-width:0;line-height:1.3}
.carrier-chip .cc-tx b{font-size:.9375rem}
.carrier-chip .cc-tx small{display:block;color:var(--muted);font-size:.78125rem;margin-top:1px}
.carrier-chip .cc-call{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:#eafaf0;color:var(--green-text);font-size:1.25rem;text-decoration:none;border:1px solid #bfe6cd}
/* A15c: แถบโหมดแก้ไขบิลเดิมในตะกร้า — มีลิงก์ "เลิกแก้ กลับไปดูบิลเดิม" (ไม่ล้าง nav) */
.edit-mode-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;margin:0 0 10px;background:#fff8ec;border:1px solid #f0d9a8;border-radius:11px;padding:9px 12px;font-size:.84375rem;font-weight:700;color:var(--warn-text)}
.edit-mode-bar a{color:var(--green-text);text-decoration:underline;cursor:pointer;font-weight:700}
/* A14: nudge "สั่งครั้งแรก?" ใต้แบนเนอร์ — โผล่ครั้งเดียว แตะเปิดโมดอลวิธีใช้ */
.firsttime-nudge{display:flex;align-items:center;justify-content:center;min-height:44px;margin:0 12px 10px;background:#eef7f1;border:1px solid #bce8cd;border-radius:11px;padding:9px 13px;font-size:.84375rem;font-weight:700;color:var(--green-text);cursor:pointer;text-align:center;line-height:1.4}
.firsttime-nudge:active{background:#e0f2e7}
/* เรื่องราวร้านบนหน้าสินค้า — ตัวอักษรลอย ไม่มีกรอบ/พื้นหลัง */
.shop-story{margin:14px 14px 2px;font-size:.875rem;line-height:1.6;color:var(--muted);font-style:italic;overflow-wrap:break-word}
/* C-21: ชวนทำเป็นของขวัญในตะกร้า */
.gift-hint{display:flex;flex-direction:column;gap:1px;background:linear-gradient(135deg,#fff8ec,#fef2f6);border:1.5px solid #f0c890;border-radius:13px;padding:12px 14px;margin-bottom:10px;cursor:pointer}
.gift-hint b{color:var(--warn-text);font-size:.90625rem}
.gift-hint small{color:#8a6d4a;font-size:.78125rem}
/* บอกเขตส่ง (soft) ใต้ฟอร์มที่อยู่ */
.deliver-area{font-size:.8125rem;color:var(--green-text);background:#eafaf0;border:1px solid #bfe6cd;border-radius:10px;padding:9px 12px;margin:0 0 10px;line-height:1.55}

/* 🔍 lightbox ดูรูปสินค้าเต็มจอ — แตะที่ไหนก็ปิด */
.zoomable{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:20px;animation:lbfade .14s ease}
.lightbox img{max-width:100%;max-height:88vh;border-radius:12px;object-fit:contain;box-shadow:0 8px 40px rgba(0,0,0,.55)}
.lightbox .lb-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:16px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.92);font-size:1.25rem;color:#222;cursor:pointer;display:flex;align-items:center;justify-content:center}
@keyframes lbfade{from{opacity:0}to{opacity:1}}

/* "วิธีสั่งของ" — โมดอลในแอป (เนื้อหาตามหน้าที่อยู่) */
.help-modal{position:fixed;inset:0;z-index:10002;background:rgba(20,24,31,.5);display:flex;align-items:flex-end;justify-content:center;padding:0;animation:lbfade .14s ease}
.help-modal .hm-box{width:100%;max-width:520px;max-height:86vh;display:flex;flex-direction:column;background:var(--card);border-radius:18px 18px 0 0;box-shadow:0 -8px 40px rgba(0,0,0,.3);animation:hmup .2s ease}
@keyframes hmup{from{transform:translateY(24px)}to{transform:translateY(0)}}
.help-modal .hm-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 16px 10px;border-bottom:1px solid var(--line)}
.help-modal .hm-head b{font-size:1.125rem;font-weight:800}
.help-modal .hm-x{width:38px;height:38px;border-radius:50%;border:0;background:#eef0f3;font-size:1.0625rem;color:#444;cursor:pointer;flex-shrink:0}
.help-modal .hm-body{padding:14px 16px calc(20px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain}
/* จัดลำดับร้าน: hm-body แบบ padding-bottom:0 ให้แถบ "บันทึก" sticky เป็น inset ล่างชั้นเดียว (กัน safe-area ซ้ำ + ช่องว่างสีการ์ดใต้ปุ่มตอนเลื่อน) */
.help-modal .ro-body{padding-bottom:0}
.help-modal .hs-step{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.help-modal .hs-step:last-child{margin-bottom:0}
.help-modal .hs-n{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:1rem;font-weight:800}
.help-modal .hs-tx>b{display:block;font-size:.96875rem;font-weight:800;margin-bottom:2px;line-height:1.35}
.help-modal .hs-tx p{margin:0;font-size:.875rem;color:#444;line-height:1.6}
/* "ถัดไป" — บอกว่าหน้าถัดไปจะเจออะไร (ไม่เล่าซ้ำหน้าเดิม) */
.help-modal .hm-next{display:flex;align-items:center;gap:9px;margin-top:16px;background:#eef7f1;border:1px solid #bce8cd;border-radius:12px;padding:11px 13px;line-height:1.5}
.help-modal .hm-next .hn-lbl{flex-shrink:0;font-size:.75rem;font-weight:800;color:#fff;background:var(--green);border-radius:999px;padding:3px 10px}
.help-modal .hm-next .hn-lbl::before{content:"→ "}
.help-modal .hm-next .hn-tx{font-size:.84375rem;font-weight:700;color:var(--green-text)}

/* 📍 จุดรับของ: โมดอลปักหมุด (ถาม "อยู่บ้านไหม" → GPS / แผนที่ลากหมุด) — ใช้โครง .help-modal เดิม */
.pin-q{font-size:1.0625rem;font-weight:800;line-height:1.45;margin:2px 0 6px}
.pin-q .muted2{font-weight:600;color:var(--muted);font-size:.875rem}
.pin-help{font-size:.84375rem;color:#5a6b60;line-height:1.55;margin-bottom:12px}
.pin-a{width:100%;margin-bottom:10px}
.pin-b{width:100%}
.pin-skip{margin-top:14px}  /* id41: escape hatch เป็นปุ่ม .btn secondary เต็มกว้าง ไม่ใช่ลิงก์จิ๋ว */
.pin-map{width:100%;height:300px;border-radius:14px;overflow:hidden;margin:2px 0 12px;border:1px solid var(--line);background:#eef0f3}
.pin-here{width:100%;margin-bottom:12px}
.pin-foot{display:flex;gap:10px}
.pin-foot .btn{flex:1;margin:0}
.pin-foot .ghost{flex:0 0 96px}
.pin-warn{margin-top:7px;color:var(--warn-text);font-size:.78125rem;line-height:1.5;background:#fff6e9;border:1px solid #f0c890;border-radius:8px;padding:6px 9px}
.pin-wait{text-align:center;padding:26px 0;font-size:1rem;font-weight:700}

/* ===== UX audit รอบ checkout (C-08/09/19/23/26) ===== */
/* C-19: ป้าย "ยอดเปลี่ยน" — หน้าแรก (chip) + หน้าสถานะ (flash) */
.amt-changed{display:inline-block;margin-top:3px;font-size:.8125rem;font-weight:800;color:var(--warn-text);background:#fff3e0;border:1px solid #f0c890;border-radius:999px;padding:2px 9px;line-height:1.5}
.amt-flash{margin-top:8px;background:#fff7e6;border:1px solid #f0c890;border-radius:10px;padding:8px 11px;font-size:.84375rem;color:#7a5a2a;line-height:1.5}
/* C-26: ป้ายของสด "คิดตามจริง" ในตะกร้า/ยืนยัน */
.fresh-mini{display:inline-block;font-size:.6875rem;font-weight:700;color:#1f7a44;background:#eafaf0;border:1px solid #bce8cd;border-radius:7px;padding:1px 6px;line-height:1.5;white-space:nowrap}
/* C-23: โน้ตล็อกแก้ไข (ถาวร ไม่ใช่ tooltip) + ปุ่มโทรคนหิ้ว */
.lock-note{margin-top:8px;background:#fff3f2;border:1px solid #f0b9b3;border-radius:12px;padding:11px 13px;font-size:.84375rem;color:#7a3a32;line-height:1.6}
.lock-note .lock-sub{font-size:.78125rem;color:#9a5a52;margin-top:3px}
.lock-note .lock-call{width:auto;display:inline-flex;margin:9px 0 0;padding:9px 16px;text-decoration:none}
/* C-09: ป้าย/คำเตือนร้านโอนก่อนบนหน้าจ่าย */
.pf-note{background:#fff3f2;border:1px solid #f0b9b3;border-radius:10px;padding:9px 12px;margin-bottom:10px;font-size:.84375rem;color:#7a3a32;line-height:1.6}
.pf-badge{display:inline-block;font-size:.71875rem;font-weight:800;color:#c0392b;background:#ffe6e2;border:1px solid #f0b9b3;border-radius:7px;padding:1px 7px;margin:2px 0;line-height:1.6}
/* C-08: ปุ่ม "ฉันโอนแล้ว" + ป้าย optimistic */
.paid-act{margin:12px 0 4px}
.paid-act .paid-btn{margin:0;background:#e8722e}
.paid-act .paid-btn.secondary{background:#fff}
.paid-pill{background:#fff7e6;border:1px solid #f0c890;border-radius:10px;padding:8px 11px;margin-bottom:8px;font-size:.8125rem;font-weight:700;color:var(--warn-text);text-align:center;line-height:1.5}
/* CX id3: จ่ายบนมือถือเครื่องเดียว — ปุ่มบันทึกรูป QR / ก๊อปเลขพร้อมเพย์ ใต้ QR แต่ละใบ (จอแคบ 375px: เรียงลงบรรทัดใหม่ได้) */
.qr-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.qr-acts .copy-btn{padding:9px 11px;font-size:.8125rem;min-height:44px}
.qr-acts .qr-copy{background:#3a7bd5}
.onephone-tip{background:#f3f7ff;border:1px solid #cfe0ff;border-radius:10px;padding:10px 12px;margin:8px 0 2px;font-size:.84375rem;line-height:1.55;color:#2a4a7a}
.onephone-tip b{color:#1d3a66}

/* ===== UX audit รอบ desire (C-20/24/27) ===== */
/* C-27: ป้าย "มีโปร" บนการ์ดร้านหน้าแรก */
.shop-promo{display:inline-block;font-size:.71875rem;font-weight:800;color:#fff;background:linear-gradient(135deg,#ff9a3c,#ff6b6b);border-radius:7px;padding:2px 8px;margin:3px 0 1px;line-height:1.5}
/* C-24: ป้าย "รูปกำลังมา" บนรูป placeholder (สินค้าไม่มีรูปจริง) */
.product .imgwrap .img-soon{position:absolute;left:6px;bottom:6px;font-size:.6875rem;font-weight:700;color:#5a6470;background:rgba(255,255,255,.86);border:1px solid rgba(0,0,0,.06);border-radius:6px;padding:1px 6px;line-height:1.5;pointer-events:none}
/* C-20: การ์ดขอบคุณหน้า "ส่งถึงแล้ว" (ปิด loop + ชวนสั่งซ้ำ/บอกต่อ) */
.delivered-card{text-align:center;background:linear-gradient(135deg,#eafaf0,#fff);border:1px solid #bce8cd}
.delivered-card .dc-emoji{font-size:3rem;line-height:1}
.delivered-card h2{margin:6px 0 4px;font-size:1.25rem;color:var(--green-text)}
.delivered-card p{margin:0 0 12px;font-size:.875rem;color:var(--muted);line-height:1.6}
.delivered-card .btn{margin-top:8px}

/* ===== C-12: แถบ "ของเด่นรอบนี้" (เลื่อนแนวนอน) — เปิด/ปิดที่ HOME_FEED_ENABLED ===== */
.feed-strip{margin:0 0 14px}
.feed-title{font-size:.9375rem;font-weight:800;color:#2c3d33;margin:0 0 8px;padding:0 2px}
.feed-title small{font-size:.75rem;font-weight:600;color:var(--muted)}
.feed-scroll{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 2px 6px;scroll-snap-type:x proximity}
.feed-scroll::-webkit-scrollbar{height:0}
.feed-card{flex:0 0 138px;width:138px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;display:flex;flex-direction:column;gap:5px;scroll-snap-align:start}
.feed-card .fc-tap{cursor:pointer;display:flex;flex-direction:column;gap:4px}
.feed-card .fc-img{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#f0f1f4}
.feed-card .fc-img img{width:100%;height:100%;object-fit:cover;display:block}
.feed-card .fc-img .fc-tag{position:absolute;top:5px;right:5px;font-size:.875rem;background:rgba(255,255,255,.9);border-radius:7px;padding:0 4px;line-height:1.55}
.feed-card .fc-img .img-soon{position:absolute;left:4px;bottom:4px;font-size:.6875rem;padding:0 4px;font-weight:700;color:#5a6470;background:rgba(255,255,255,.86);border:1px solid rgba(0,0,0,.06);border-radius:6px;pointer-events:none;line-height:1.55}
/* A3: ป้าย "ใกล้ปิด" นับถอยหลัง มุมบนซ้ายรูป feed (fc-tag อยู่บนขวา · img-soon อยู่ล่างซ้าย → ไม่ทับกัน) — โชว์เฉพาะร้าน closing */
.feed-card .fc-img .fc-closing{position:absolute;left:4px;top:4px;font-size:.625rem;font-weight:800;color:#fff;background:rgba(224,36,94,.94);border-radius:7px;padding:1px 6px;line-height:1.5;white-space:nowrap;max-width:calc(100% - 8px);overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.feed-card .fc-img .fc-closing b{font-variant-numeric:tabular-nums}
.feed-card .fc-name{font-size:.8125rem;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.feed-card .fc-shop{font-size:.6875rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed-card .fc-price{font-size:.9375rem;font-weight:800;color:var(--green-text)}
.feed-card .fc-add{width:100%;margin:0;padding:10px 0;font-size:.8125rem;border-radius:9px;background:#1f7a44;color:#fff;border:0;font-weight:700;cursor:pointer;min-height:44px}
.feed-card .fc-step{align-self:stretch;justify-content:space-between;margin:0;background:#fff}

/* ===== Mobile admin: accordion + durable dirty state + accessible targets ===== */
.manage-dirty{outline:3px solid #f0a23a;outline-offset:2px}
.manage-dirty-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));z-index:9995;width:calc(100% - 24px);max-width:440px;box-sizing:border-box;background:#1f2933;color:#fff;border-radius:14px;padding:9px 10px 9px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 8px 28px rgba(0,0,0,.28);font-size:.875rem;font-weight:700}
.manage-dirty-bar[hidden]{display:none}
.manage-dirty-bar span{flex:1}
.manage-dirty-bar button{border:0;border-radius:10px;background:#fff;color:#1f5c3a;min-height:44px;padding:8px 12px;font-family:inherit;font-size:.875rem;font-weight:700;cursor:pointer}
.tabs button:focus-visible,.manage-accordion>summary:focus-visible,.drv-row:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #155eef;outline-offset:2px}

@media (max-width:600px){
  .tabs{margin:8px;gap:5px;padding:6px}
  .tabs button{min-height:44px;font-size:.875rem;padding:8px 3px}
  #panel-manage{padding:0 8px 92px}
  #panel-manage input,#panel-manage select,#panel-manage textarea{font-size:1rem!important;min-height:44px;box-sizing:border-box}
  #panel-manage button,#panel-manage a,#panel-manage .copy-btn,#panel-manage label.copy-btn{min-height:44px;min-width:44px;font-size:.875rem!important;box-sizing:border-box}
  #panel-manage label,#panel-manage small,#panel-manage .muted{font-size:.875rem!important;line-height:1.45}
  .manage-accordion{margin:0 0 10px}
  .manage-accordion>summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:48px;padding:10px 14px;box-sizing:border-box;border:1px solid var(--line);border-radius:13px;background:#fff;color:#20352a;font-size:1rem;font-weight:800;box-shadow:var(--shadow);cursor:pointer}
  .manage-accordion>summary::-webkit-details-marker{display:none}
  .manage-accordion>summary::before{content:'›';font-size:1.5rem;line-height:1;transform:rotate(0);transition:transform .15s}
  .manage-accordion[open]>summary::before{transform:rotate(90deg)}
  .manage-accordion[open]>summary{border-radius:13px 13px 0 0;border-bottom-color:transparent}
  .manage-accordion>.card{border-radius:0 0 13px 13px;margin:0;padding:13px;box-shadow:var(--shadow)}
  .manage-accordion>.card>h3:first-child{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}

/* ===== CX id41: ขยายพื้นที่แตะปุ่มเล็กที่ใช้บ่อยเป็น ≥44px ด้วย ::after (pattern เดียวกับ .info/.zone-dot) — ขนาดที่ตาเห็นเท่าเดิม ===== */
.topbar .back,.topbar .help-link,.refresh-mini,.help-modal .hm-x{position:relative}
.topbar .back::after,.topbar .help-link::after,.refresh-mini::after,.help-modal .hm-x::after{content:'';position:absolute;inset:-7px}