/* 🎨 แอพหน้าร้าน ร้านลับในตำนาน · ธีม 2 โหมด (กฎกลาง 20 ต.ค. 69 · สลับใน js/theme.js)
   ☀️ สว่าง = DocuPass ครีม/ทอง (_templates\theme_docupass) + หัวแดงอิฐแบรนด์ร้านลับ #A8332A→#5E140E · ทอง #D4AF37 (RanLub\_NOW 🎨 8 พ.ย. 69)
   🌙 มืด = ธีมใบเสร็จ (แบบสลิปค่าแรง D:\RanLub งานค้าง\สลิปค่าแรง ต.ค. 69) · กระดาษใบเสร็จครีม กรอบทองแทน หัวคาดแดงอิฐ วางบนพื้นมืด
      (บอส 8 พ.ย. 69 *"สีมืดแบบใน fb ไม่สวย"* → *"เอาธีมใบเสร็จไม่ดีกว่าหรอ อารมแบบ docupass ธีมคาดแดง"* · เลิก Everhome + เลิกแบบเพจ FB)
   --text = ตัวหนังสือบนพื้นหน้า · --ink = ตัวหนังสือบนการ์ด (โหมดมืดสองอย่างนี้คนละสี) */
:root{
  --page:#fdfcf8; --text:#2c2416; --panel:#ffffff; --ink:#2c2416; --mute:#7a6a4a;
  --line:#ede1c5; --gold:#d4af37; --gold2:#8a6d2b; --soft:#faf5e6;
  --hero:linear-gradient(135deg,#A8332A 0%,#5E140E 100%); --heroink:#fdf6e3; --herogold:#F0D98A; --heroline:#d4af37;
  --cta:linear-gradient(135deg,#A8332A,#5E140E); --ctaink:#ffffff;
  --tile:linear-gradient(135deg,#A8332A,#5E140E); --tileink:#F0D98A;
  --price:#8a6d2b; --pricebg:transparent;
  --hit:#A8332A; --hitink:#ffffff;
  --chip:#ffffff; --chipink:#6b5a35; --chipline:#d4b97a; --chipon:#8a6d2b; --chiponink:#ffffff;
  --bw:1px; --r:14px; --rs:10px;
  --sh:0 2px 10px rgba(138,109,43,.08); --sh2:0 10px 40px rgba(60,40,10,.22);
  --font:'Mitr','Segoe UI','Leelawadee UI',sans-serif; --brand:'Anuphan','Mitr',sans-serif;
}
html[data-theme="dark"]{
  --page:#241310; --text:#f3e6d3;
  --line:#e8d5b5; --gold:#d6a46f; --soft:#fbf3e6;
  --hero:linear-gradient(135deg,#A8332A 0%,#5E140E 100%); --heroink:#ffffff; --herogold:#F0D98A; --heroline:#d6a46f;
  --price:#8A241C;
  --chip:#fffdf8; --chipink:#5E140E; --chipline:#d6a46f; --chipon:#A8332A; --chiponink:#ffffff;
  --panel:#fffdf8;
  --sh:0 6px 24px rgba(0,0,0,.45); --sh2:0 14px 44px rgba(0,0,0,.6);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{overflow-x:clip}   /* ⚠️ hidden = body กลายเป็นกล่องเลื่อนเอง แถบหมวดไม่ติดหัวจอ (sticky พัง) · clip ตัดขอบเหมือนกันแต่ไม่พัง */
body{margin:0;background:var(--page);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.5;
  padding-bottom:calc(24px + env(safe-area-inset-bottom))}
body.has-bar{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
button{font-family:inherit;cursor:pointer;color:inherit}
/* ⛔ spinner ช่องตัวเลข (กฎกลาง 29 ต.ค. 69) */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.wrap{max-width:640px;margin:0 auto;padding:0 16px}
.en{font-size:12px;color:var(--mute);font-weight:400}

/* ปุ่มกลม ☀️/🌙 มุมขวาบน (มาตรฐานเดียวกับเว็บร้าน Midas / OrderSheet) */
.corner{position:fixed;top:12px;right:12px;z-index:30;width:42px;height:42px;border-radius:50%;padding:0;
  display:grid;place-items:center;font-size:20px;line-height:1;
  background:var(--panel);color:var(--ink);border:2px solid var(--chipline);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.corner:hover{transform:scale(1.06)}

/* หัวร้าน */
.hero{margin:0 -16px;padding:26px 20px 18px;background:var(--hero);color:var(--heroink);text-align:center;
  border-bottom:3px solid var(--heroline)}
.brand{font-family:var(--brand);font-weight:700;font-size:34px;line-height:1.1;color:var(--herogold);letter-spacing:.5px}
.brand small{display:block;font-size:15px;font-weight:600;letter-spacing:4px;margin-top:2px}
.brand.one{font-size:clamp(26px,8vw,34px);white-space:nowrap}   /* หน้าลูกค้า: ชื่อร้านบรรทัดเดียว ขนาดเท่ากันทั้งคำ (บอส 8 พ.ย. 69) */
.tag{margin-top:8px;font-size:14px;opacity:.92}
.proof{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.star{font-size:13px;padding:4px 12px;border-radius:20px;border:1px solid rgba(240,217,138,.55);background:rgba(0,0,0,.14)}
.star b{color:var(--herogold)}
.star i{font-style:normal;opacity:.8}
.badge{display:inline-block;margin-top:10px;font-size:11px;font-weight:600;letter-spacing:1px;padding:3px 12px;
  border-radius:4px;color:#3a2a10;background:linear-gradient(135deg,#F0D98A,#D4AF37)}
.facts{display:flex;gap:6px 14px;justify-content:center;flex-wrap:wrap;margin-top:12px;font-size:13px}
.open{font-weight:600}
.open::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:#9a9a9a;margin-right:6px;vertical-align:1px}
.open.on::before{background:#5fd068}
.addr{margin-top:4px;font-size:12px;opacity:.75}

/* แถบหมวด (ติดบนเวลาเลื่อน) */
.chips{position:sticky;top:0;z-index:20;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  margin:0 -16px;padding:10px 64px 10px 16px;background:var(--page);border-bottom:1px solid var(--line)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;font-size:14px;font-weight:500;padding:6px 16px;border-radius:20px;white-space:nowrap;
  background:var(--chip);color:var(--chipink);border:1.5px solid var(--chipline)}
.chip[aria-pressed="true"]{background:var(--chipon);border-color:var(--chipon);color:var(--chiponink)}

/* หมวด + การ์ดเมนู */
.sec{padding-top:6px}
.sec h2{font-size:17px;font-weight:600;margin:18px 2px 10px;color:var(--text)}
html:not([data-theme="dark"]) .sec h2{color:#5E140E}
.dish{display:flex;gap:12px;align-items:stretch;padding:10px;margin-bottom:10px;cursor:pointer;
  background:var(--panel);color:var(--ink);border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
  transition:box-shadow .15s,transform .1s}
.dish:hover{box-shadow:0 4px 20px rgba(138,109,43,.22)}
.dish:active{transform:scale(.99)}
.dish:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.dish.off{cursor:default;opacity:.55}
.tile{flex:0 0 84px;height:84px;align-self:flex-start;border-radius:calc(var(--r) - 4px);background:var(--tile);color:var(--tileink);
  display:grid;place-items:center;text-align:center;padding:6px;font-family:var(--brand);font-weight:700;font-size:15px;line-height:1.15;
  box-shadow:inset 0 0 0 1.5px rgba(240,217,138,.45)}
.tile.big{flex-basis:76px;height:76px;font-size:14px}
/* 📸 SF4 รูปเมนู = เต็มช่อง ครอปกลาง · ป้ายคำอยู่ใต้รูป (รูปเสีย = tile.js เอารูปออก ป้ายโผล่) */
.tile{position:relative;overflow:hidden}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tile.pic{background:var(--panel)}
.tile.pic span{visibility:hidden}
.info{flex:1;min-width:0;display:flex;flex-direction:column}
.nm{font-weight:600;font-size:15px;line-height:1.35}
.hit{display:inline-block;font-size:11px;font-weight:600;padding:0 8px;border-radius:10px;margin-left:4px;vertical-align:2px;
  background:var(--hit);color:var(--hitink)}
.ds{margin:4px 0 0;font-size:12.5px;color:var(--mute);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:6px}
.pr{font-weight:600;font-size:16px;color:var(--price);background:var(--pricebg);border-radius:4px}
.add{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:22px;line-height:1;font-weight:500;
  background:var(--cta);color:var(--ctaink)}
.soldout{font-size:12px;font-weight:600;color:var(--mute)}
.foot{text-align:center;font-size:12px;color:var(--mute);margin:18px 0 6px}

/* แถบตะกร้าล่างจอ */
.bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));z-index:25;
  width:calc(100% - 32px);max-width:608px;display:flex;align-items:center;gap:12px;padding:12px 18px;
  border:0;border-radius:var(--r);background:var(--cta);color:var(--ctaink);font-size:16px;font-weight:600;box-shadow:var(--sh2)}
.bar[hidden]{display:none}
.bar .b-n{min-width:28px;height:28px;padding:0 8px;border-radius:14px;display:grid;place-items:center;font-size:14px;
  background:rgba(255,255,255,.2)}
.bar .b-t{flex:1;text-align:left}

/* หน้าต่างล่าง (เลือกตัวเลือก · ตะกร้า) */
.sheet{width:100%;max-width:640px;max-height:min(88vh,760px);margin:auto auto 0;padding:0;border:0;
  border-radius:var(--r) var(--r) 0 0;background:var(--panel);color:var(--ink);box-shadow:var(--sh2);
  flex-direction:column;overflow:hidden}
.sheet[open]{display:flex;animation:up .2s ease-out}
.sheet::backdrop{background:rgba(30,20,8,.55)}
@keyframes up{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
@media (min-width:700px){.sheet{margin:auto;border-radius:var(--r);max-width:560px}}
.sh-top{position:relative;display:flex;gap:12px;align-items:flex-start;padding:16px 52px 12px 16px;border-bottom:1px dashed var(--line)}
html:not([data-theme="dark"]) .sh-top{border-top:3px solid var(--gold);background:linear-gradient(135deg,#faf5e6 0%,#ffffff 100%)}
.sh-top h3{margin:0;font-size:18px;font-weight:600;line-height:1.3}
.sh-top .ds{-webkit-line-clamp:4}
.sh-top .pr{display:inline-block;margin-top:4px}
.x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--chipline);
  background:var(--panel);color:var(--ink);font-size:15px;line-height:1}
.sh-body{flex:1;overflow-y:auto;padding:4px 16px 12px;overscroll-behavior:contain}
.sh-body.empty{padding:36px 16px;text-align:center;color:var(--mute)}
.sh-foot{display:flex;gap:12px;align-items:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--panel)}
.sh-foot.col{flex-direction:column;align-items:stretch}
.cta{flex:1;min-height:48px;padding:10px 16px;border:0;border-radius:var(--rs);background:var(--cta);color:var(--ctaink);
  font-size:16px;font-weight:600}
.cta:disabled{opacity:.5;cursor:not-allowed}

/* กลุ่มตัวเลือก */
.grp{border:0;margin:14px 0 0;padding:0}
.grp legend{padding:0;margin-bottom:6px;font-weight:600;font-size:15px;width:100%}
.grp legend em{float:right;font-style:normal;font-size:11px;font-weight:600;padding:1px 8px;border-radius:10px;
  background:var(--soft);color:var(--mute)}
.grp legend em.need{background:var(--hit);color:var(--hitink)}
.grp.miss legend em.need{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.opt{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px dashed var(--line);cursor:pointer}
.opt input{width:19px;height:19px;margin:0;accent-color:#A8332A;flex:0 0 auto}
.o-nm{flex:1}
.o-nm small{color:var(--mute);margin-left:4px}
.o-pr{font-size:13px;color:var(--mute);font-weight:500}
.opt:has(input:checked){background:var(--soft)}
.note{display:block;margin-top:16px;font-weight:600;font-size:15px}
.note textarea{display:block;width:100%;margin-top:6px;padding:9px 12px;font:inherit;font-size:14px;font-weight:400;resize:vertical;
  border:1.5px solid var(--chipline);border-radius:var(--rs);background:var(--page);color:var(--text)}
.note textarea:focus{outline:2px solid var(--gold);outline-offset:1px}

/* ปุ่มจำนวน − / + */
.step{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.step button{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--chipline);background:var(--panel);color:var(--ink);font-size:20px;line-height:1}
.step span{min-width:26px;text-align:center;font-weight:600;font-size:17px}
.step.sm button{width:32px;height:32px;font-size:16px}
.step.sm span{min-width:22px;font-size:15px}

/* แถวในตะกร้า */
.line{display:flex;gap:10px;align-items:center;padding:12px 0;border-bottom:1px dashed var(--line)}
.l-info{flex:1;min-width:0}
.l-opt,.l-note{font-size:12.5px;color:var(--mute)}
.l-pr{flex:0 0 64px;text-align:right;font-weight:600}
.clear{margin:10px 0 0;padding:4px 12px;font-size:12px;font-weight:600;border-radius:12px;background:transparent;
  color:#A8332A;border:1.5px solid #A8332A}
.pick{margin-top:14px;padding:10px 12px;font-size:13px;border-radius:var(--rs);background:var(--soft);color:var(--ink)}
.sum{display:flex;justify-content:space-between;align-items:baseline;font-size:15px}
.sum small{display:block;font-size:11px;color:var(--mute)}
.sum b{font-size:22px}

/* แจ้งเตือนสั้น */
.toast{position:fixed;left:50%;top:16px;transform:translate(-50%,-140%);z-index:40;max-width:calc(100% - 32px);
  padding:10px 18px;border-radius:24px;font-size:14px;font-weight:500;background:#2c2416;color:#fdf6e3;box-shadow:var(--sh2);
  transition:transform .25s;pointer-events:none}
.toast.on{transform:translate(-50%,0)}

/* ── P2 (SF5) ยืนยันออเดอร์ + สถานะ ───────────────────────── */
.fld{display:block;margin-top:14px;font-weight:600;font-size:15px}
.fld input,.opt select{display:block;width:100%;margin-top:6px;padding:10px 12px;font:inherit;font-size:16px;font-weight:400;
  border:1.5px solid var(--chipline);border-radius:var(--rs);background:var(--page);color:var(--text)}
.opt select{width:auto;margin:0;padding:6px 10px;font-size:15px}
.fld input:focus,.opt select:focus{outline:2px solid var(--gold);outline-offset:1px}
.err{min-height:1.2em;margin:10px 0 0;font-size:14px;font-weight:500;color:#A8332A}
.link{align-self:center;margin-top:2px;padding:6px 12px;border:0;background:transparent;font-size:14px;font-weight:500;
  color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.link.danger{color:#A8332A}

/* การ์ดออเดอร์ของฉัน (บนหน้าเมนู) */
.mine{margin:12px 0 0}
.mine[hidden]{display:none}
.mine-card{position:relative;display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:8px;cursor:pointer;
  background:var(--panel);color:var(--ink);border:var(--bw) solid var(--line);border-left:5px solid var(--gold);border-radius:var(--r);box-shadow:var(--sh)}
.mine-card.s-ready{border-left-color:#3f7d3a;animation:pulse 1.6s ease-in-out infinite}
.mine-card.s-cancel{border-left-color:#9a9a9a;opacity:.75}
.mine-card.s-done{border-left-color:#9a9a9a}
.m-no{font-family:var(--brand);font-weight:700;font-size:22px;color:#A8332A}
.m-st{flex:1;font-weight:500;font-size:14px}
.m-go{font-size:13px;color:var(--mute);white-space:nowrap}
.m-x{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--chipline);background:var(--panel);color:var(--ink);font-size:12px}

/* แถบขั้นสถานะ */
.track{display:flex;list-style:none;margin:16px 0 4px;padding:0;counter-reset:s}
.track li{flex:1;position:relative;text-align:center;font-size:12px;color:var(--mute);padding-top:30px}
.track li::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:1;
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;
  background:var(--soft);color:var(--mute);border:2px solid var(--line)}
.track li::after{content:'';position:absolute;top:11px;left:-50%;width:100%;height:3px;background:var(--line)}
.track li:first-child::after{display:none}
.track li.on{color:var(--ink);font-weight:600}
.track li.on::before{content:'✓';background:#3f7d3a;border-color:#3f7d3a;color:#fff}
.track li.on::after{background:#3f7d3a}
.track li.now::before{content:counter(s);color:#fff;background:var(--gold2);border-color:var(--gold2);box-shadow:0 0 0 4px rgba(212,175,55,.3)}
.st-msg{margin:14px 0 0;padding:12px 14px;border-radius:var(--rs);font-weight:600;font-size:16px;text-align:center;background:var(--soft)}
.st-msg.s-ready{background:#3f7d3a;color:#fff}
.st-msg.s-cancel{background:#eee;color:#555}

/* ── 🌙 โหมดมืด = ธีมใบเสร็จคาดแดง (8 พ.ย. 69) · กระดาษ = ค่าเดียวกับโหมดสว่าง · ต่างที่พื้นมืด + กรอบทองแทน + แถบแดง ── */
html[data-theme="dark"] .chips{border-bottom-color:#3d201a}
html[data-theme="dark"] .sec h2{color:#e9c66b}
html[data-theme="dark"] .foot,html[data-theme="dark"] .addr{color:#cdb79a}
html[data-theme="dark"] .dish,html[data-theme="dark"] .mine-card{border:1.5px solid var(--line);border-top:4px solid #A8332A}
html[data-theme="dark"] .mine-card{border-left:5px solid var(--gold)}
html[data-theme="dark"] .mine-card.s-ready{border-left-color:#3f7d3a}
html[data-theme="dark"] .sheet{border:2px solid var(--gold)}
html[data-theme="dark"] .sheet::backdrop{background:rgba(12,5,3,.7)}
html[data-theme="dark"] .sh-top{background:linear-gradient(135deg,#A8332A 0%,#5E140E 100%);color:#fff;border-bottom:3px solid var(--gold)}
html[data-theme="dark"] .sh-top .en,html[data-theme="dark"] .sh-top .ds{color:#f2dcc4}
html[data-theme="dark"] .sh-top .pr{color:#F0D98A}
html[data-theme="dark"] .sh-top .tile{box-shadow:inset 0 0 0 1.5px rgba(240,217,138,.6)}
html[data-theme="dark"] .x{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(240,217,138,.6)}
html[data-theme="dark"] .sh-foot{border-top:1px dashed var(--line)}
html[data-theme="dark"] .pick{border:1px solid var(--line)}
html[data-theme="dark"] .toast{background:#fffdf8;color:#5E140E;border:2px solid var(--gold)}
html[data-theme="dark"] .corner{background:#fffdf8;color:#5E140E}