/* =========================================================
   MOOKAN GO : สี ตัวอักษร และชิ้นส่วนที่ใช้ร่วมทุกหน้า
   ========================================================= */
:root{
  --red:#D7141F; --red-dark:#A80F17; --red-deep:#7E0A10; --red-soft:#FFF1EF; --red-line:#F6D5D1;
  --ink:#1A1414; --muted:#5A5050; --line:#ECE6E4; --bg:#FAF7F5; --white:#FFFFFF;
  --green-bg:#E5F3E8; --green:#1B5E2C; --green-strong:#1E7A36;
  --yellow-bg:#FFF2C7; --yellow:#5A4200; --blue-bg:#E7EDFF; --blue:#1B3A8A;
  --shadow-sm:0 1px 2px rgba(60,20,20,.06),0 2px 8px rgba(60,20,20,.06);
  --shadow:0 2px 6px rgba(60,20,20,.06),0 12px 28px rgba(60,20,20,.10);
  --radius:18px; --tap:3.2rem;
}
html{font-size:112.5%}
html.big{font-size:132%}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Sarabun',system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
h1,h2,h3,.display{font-family:'Prompt','Sarabun',sans-serif;line-height:1.2;margin:0;letter-spacing:-.005em}
a{color:var(--red-dark)}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:4px solid #1F5FD6;outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ปุ่ม */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--tap);padding:0 1.15rem;border-radius:14px;border:2px solid transparent;font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer;line-height:1.2;text-align:center;background:var(--white);transition:transform .08s ease,background .15s ease,box-shadow .15s ease}
.btn:active{transform:scale(.97)}
.btn svg{flex:none}
.btn-red{background:var(--red);color:#fff;box-shadow:0 4px 14px rgba(215,20,31,.28)}
.btn-red:hover{background:var(--red-dark)}
.btn-dark{background:var(--ink);color:#fff}
.btn-green{background:var(--green-strong);color:#fff}
.btn-outline{border-color:var(--red);color:var(--red-dark)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-soft{background:var(--red-soft);color:var(--red-dark)}
.btn-lg{min-height:3.8rem;font-size:1.12rem;font-family:'Prompt',sans-serif;font-weight:600}
.btn-block{width:100%}
.btn:disabled{background:#C9C2C0;border-color:#C9C2C0;color:#fff;cursor:not-allowed;box-shadow:none}

/* กล่อง */
.card{background:var(--white);border-radius:var(--radius);padding:1.1rem 1.2rem;box-shadow:var(--shadow-sm)}
.row{display:flex;justify-content:space-between;gap:.8rem}
.tag{display:inline-flex;align-items:center;gap:.3rem;padding:.12rem .75rem;border-radius:999px;font-weight:700;font-size:.9rem;white-space:nowrap}
.tag-red{background:var(--red);color:#fff}
.tag-yellow{background:var(--yellow-bg);color:var(--yellow)}
.tag-green{background:var(--green-bg);color:var(--green)}
.tag-grey{background:#EEE9E8;color:var(--muted)}
.tag-blue{background:var(--blue-bg);color:var(--blue)}
.price{font-family:'Prompt',sans-serif;font-weight:600;color:var(--red-dark)}
.muted{color:var(--muted)}

/* ฟอร์ม */
.input{min-height:3.2rem;padding:.45rem .95rem;border:2px solid #DCD3D1;border-radius:12px;background:#fff;font-size:1.05rem;width:100%}
.input:focus{border-color:var(--red);outline:none;box-shadow:0 0 0 4px rgba(215,20,31,.12)}
textarea.input{min-height:4.5rem;resize:vertical}
.field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.95rem}
.field label{font-weight:700}
.field small{color:var(--muted)}
.error{color:#A10E15;font-weight:700;margin:.3rem 0}
.empty{padding:2.2rem 1rem;text-align:center;color:var(--muted);font-size:1.08rem}

/* ตัวเพิ่ม/ลดจำนวน */
.qty{display:flex;align-items:center;gap:.5rem}
.qty-btn{width:2.9rem;height:2.9rem;border-radius:12px;border:2px solid var(--red);background:#fff;color:var(--red);font-size:1.55rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.qty-btn.plus{background:var(--red);color:#fff}
.qty-num{min-width:1.8rem;text-align:center;font-family:'Prompt',sans-serif;font-weight:700;font-size:1.3rem}

/* หน้าต่างเด้ง (มือถือเป็นแผ่นเลื่อนจากล่าง) */
.modal-bg{position:fixed;inset:0;z-index:50;background:rgba(26,20,20,.55);display:flex;align-items:center;justify-content:center;padding:1rem;animation:fade .15s ease}
.modal{background:#fff;border-radius:24px;padding:1.4rem;width:100%;max-width:32rem;max-height:90vh;overflow:auto;box-shadow:var(--shadow);animation:pop .18s ease}
.modal h2{margin:0 0 .8rem;font-size:1.45rem}
.modal-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.modal-actions .btn{flex:1 1 9rem}
@media (max-width:600px){
  .modal-bg{align-items:flex-end;padding:0}
  .modal{border-radius:24px 24px 0 0;max-height:92vh;padding-bottom:calc(1.4rem + env(safe-area-inset-bottom));animation:up .22s ease}
}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{transform:scale(.96);opacity:0}}
@keyframes up{from{transform:translateY(40px);opacity:.4}}
.toast{position:fixed;left:50%;top:1rem;transform:translateX(-50%);z-index:60;background:var(--ink);color:#fff;padding:.85rem 1.4rem;border-radius:14px;font-weight:700;font-size:1.05rem;max-width:calc(100% - 2rem);text-align:center;box-shadow:var(--shadow);animation:pop .18s ease}
.offline{position:fixed;left:0;right:0;top:0;z-index:70;background:var(--yellow);color:#fff;text-align:center;padding:.45rem;font-weight:700}

/* รูปอาหาร / ภาพแทน */
.ph{background:linear-gradient(135deg,#FFE7E3,#FFD3CC);display:flex;align-items:center;justify-content:center;color:#C4474D}
.ph svg{width:42%;max-width:4.5rem;height:auto;opacity:.85}
.photo{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ดาว / แผนที่ */
.stars{display:inline-flex;align-items:center;gap:.15rem;font-size:.95rem}
.star-ic{color:#E5A100;font-size:1.05em}
.map-box{width:100%;height:20rem;border-radius:14px;overflow:hidden;background:#EEE9E8;z-index:0}
.map-pick{position:relative}
.map-pick .center-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);pointer-events:none;z-index:500}
.leaflet-container{font-family:'Sarabun',sans-serif}
.rate-stars{display:flex;gap:.3rem;justify-content:center;margin:.4rem 0 .8rem}
.rate-stars button{width:3.2rem;height:3.2rem;border:0;background:none;font-size:2.4rem;line-height:1;color:#D9D2D0;cursor:pointer}
.rate-stars button.on{color:#E5A100}

/* ปุ่มเลือก (แทนการพิมพ์) */
.chip-grid{display:flex;flex-wrap:wrap;gap:.5rem}
.chip-btn,.pick{display:inline-flex;align-items:center;gap:.4rem;min-height:2.9rem;padding:0 1rem;border-radius:999px;border:2px solid var(--line);background:#fff;font-weight:700;cursor:pointer;color:var(--ink)}
.pick:has(input:checked),.pick.on,.chip-btn[aria-pressed="true"]{border-color:var(--red);background:var(--red-soft);color:var(--red-dark)}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick:focus-within{outline:4px solid #1F5FD6;outline-offset:2px}
.svc-pick{display:grid;gap:.6rem}
.svc-card{position:relative;display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem;border:3px solid var(--line);border-radius:16px;background:#fff;cursor:pointer}
.svc-card:has(input:checked){border-color:var(--red);background:var(--red-soft)}
.svc-card input{width:1.5rem;height:1.5rem;accent-color:var(--red);flex:none}
.svc-card .ic{flex:none;width:3rem;height:3rem;border-radius:14px;background:#fff;color:var(--red);display:flex;align-items:center;justify-content:center}
.svc-card strong{display:block;font-family:'Prompt',sans-serif;font-size:1.12rem}
.svc-card small{color:var(--muted)}
/* เวลาเปิด-ปิด */
.hours{display:flex;flex-direction:column;gap:.4rem}
.hours-quick{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.4rem}
.hours-quick .chip-btn{min-height:2.5rem;padding:0 .8rem;font-size:.92rem}
.hrow{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;padding:.4rem .6rem;border-radius:12px;background:#F6F1F0}
.hday{display:flex;align-items:center;gap:.5rem;min-width:7.5rem;font-weight:700;cursor:pointer;min-height:2.6rem}
.hday input{width:1.4rem;height:1.4rem;accent-color:var(--red)}
.htimes{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.htimes select{min-height:2.6rem;border:2px solid #DCD3D1;border-radius:10px;padding:0 .4rem;background:#fff;font-size:1rem}
.hclosed{display:none;color:var(--muted);font-weight:700}
.hrow.off .htimes{display:none}.hrow.off .hclosed{display:inline}
/* รูปหน้าร้าน */
.photo-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;aspect-ratio:16/8;border:3px dashed #D9CFCD;border-radius:18px;background:#FBF8F7;color:var(--muted);cursor:pointer;overflow:hidden;text-align:center;font-weight:700}
.photo-drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-drop .lbl{position:relative;z-index:1;background:rgba(255,255,255,.92);border-radius:999px;padding:.4rem 1rem;color:var(--ink)}
.photo-drop svg{color:var(--red)}

/* ปุ่มสั่งซื้อ/ยกเลิก ติดล่างหน้าต่างเสมอ */
.sticky-actions{position:sticky;bottom:-1.4rem;margin:1rem -1.4rem -1.4rem;padding:.8rem 1.4rem calc(.9rem + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);z-index:2}
.sticky-actions + .btn{margin-bottom:0}

/* ---------- กล่องโอนเงิน ---------- */
.qrbox{background:#fff;border:3px solid #113566;border-radius:16px;padding:.8rem;max-width:16rem;margin:.6rem auto}
.qrbox .pp{background:#113566;color:#fff;text-align:center;font-weight:700;border-radius:8px;padding:.2rem;margin-bottom:.5rem;letter-spacing:.05em}
.qrbox svg,.qr-img{display:block;width:100%;height:auto}
.paybox{margin:.4rem 0 .8rem}
.pay-total{text-align:center;font-size:1.1rem}
.pay-total strong{display:block;font-family:Prompt,sans-serif;font-size:2rem;color:var(--red);line-height:1.2}
.pay-tabs{display:flex;gap:.4rem;margin:.7rem 0 .2rem}
.pay-tabs button{flex:1;min-height:3rem;border-radius:12px;border:2px solid var(--line);background:#fff;font:inherit;font-weight:700;cursor:pointer;padding:.3rem}
.pay-tabs button[aria-pressed="true"]{border:3px solid var(--red);background:var(--red-soft);color:var(--red)}
.pay-note{text-align:center;margin:.2rem 0 .7rem}
.bank-card{border:2px solid var(--line);border-radius:14px;padding:1rem;text-align:center;margin:.7rem 0 .5rem;background:#fff}
.bank-no{font-family:Prompt,sans-serif;font-weight:700;font-size:1.8rem;letter-spacing:.06em;margin:.2rem 0;word-break:break-all}
.pay-steps{margin:.9rem 0 0;padding-left:1.4rem;color:var(--muted)}
.pay-steps li{margin:.15rem 0}
.qr-preview{max-width:10rem;border:2px solid var(--line);border-radius:12px;display:block;margin:.4rem 0}

/* ---------- ปุ่มล่างตะกร้า: เรียงแถวเดียว ไม่บังหน้าจอ ---------- */
.sticky-actions{flex-wrap:nowrap;gap:.5rem}
.sticky-actions .btn{flex:1 1 auto;min-height:3.4rem;padding:.5rem .8rem}
.sticky-actions .btn-ghost{flex:0 0 auto;min-width:6rem}
.sticky-actions .btn-red{flex:1 1 auto}
/* ---------- ที่อยู่จัดส่ง ---------- */
.addr-box{border:2px solid var(--line);border-radius:16px;padding:.9rem;margin:.4rem 0 1rem;background:#FFFCFB}
.addr-box h3{display:flex;align-items:center;gap:.4rem;font-size:1.15rem;margin:0 0 .5rem;color:var(--red)}
.addr-box .loc-box{margin:.6rem 0 .8rem}
.addr-saved{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.7rem}
.addr-chip{display:flex;align-items:stretch;border:2px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.addr-chip.on{border-color:var(--red);background:var(--red-soft)}
.addr-chip button{border:0;background:none;font:inherit;cursor:pointer;padding:.6rem .7rem;text-align:left;color:inherit}
.addr-chip button:first-child{flex:1;min-width:0;font-weight:600}
.addr-chip .x{flex:none;width:2.8rem;font-size:1.4rem;color:var(--muted);border-left:1px solid var(--line);text-align:center}
.near-place{display:block;font-size:.9rem;opacity:.85;margin-top:.1rem}

/* ---------- ช่องเลือก "ร้านขายอะไร" ---------- */
.cat-field{display:flex;align-items:center;gap:.5rem;width:100%;min-height:3.4rem;margin-top:.4rem;padding:.5rem .9rem;border:2px solid var(--line);border-radius:14px;background:#fff;font:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.cat-field:hover,.cat-field:focus-visible{border-color:var(--red)}
.cat-tags{flex:1;display:flex;flex-wrap:wrap;gap:.35rem}
.cat-tag{background:var(--red-soft);color:var(--red-dark);border-radius:999px;padding:.2rem .7rem;font-weight:700}
.cat-ph{color:var(--muted)}
.cat-arrow{font-size:1.3rem;color:var(--red)}
.cat-sheet{position:fixed;inset:0;z-index:60;background:rgba(26,20,20,.55);display:flex;align-items:flex-end;justify-content:center}
.cat-sheet[hidden]{display:none}
.cat-panel{background:#fff;width:100%;max-width:36rem;max-height:92vh;display:flex;flex-direction:column;border-radius:24px 24px 0 0;animation:up .22s ease}
@media (min-width:700px){ .cat-sheet{align-items:center} .cat-panel{border-radius:24px} }
.cat-head{padding:1.1rem 1.2rem .6rem;border-bottom:1px solid var(--line)}
.cat-head strong{display:block;font-size:1.3rem;font-family:Prompt,sans-serif}
.cat-body{overflow:auto;padding:.4rem 1.2rem 1rem;flex:1}
.cat-group{margin:1rem 0 .5rem;font-size:1.1rem}
.cat-foot{display:flex;gap:.6rem;padding:.8rem 1.2rem calc(.8rem + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.cat-foot .btn-ghost{flex:0 0 auto}
.cat-foot .btn-red{flex:1}

/* กันหน้าล้นจอมือถือเล็ก (fieldset/grid ไม่ยอมหดตามจอ) */
fieldset{min-width:0}
.set-grid > *,.grid > *{min-width:0}
select.input{max-width:100%}

/* ---------- ร้านเรียกชื่อลูกค้า ---------- */
.call-alert{position:fixed;inset:0;z-index:300;background:rgba(160,10,18,.92);display:flex;align-items:center;justify-content:center;padding:1rem;animation:caFade .2s ease}
@keyframes caFade{from{opacity:0}}
.ca-box{background:#fff;border-radius:28px;max-width:26rem;width:100%;padding:1.6rem 1.3rem;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.ca-ic{width:5.5rem;height:5.5rem;margin:0 auto .6rem;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;animation:caRing 1s ease-in-out infinite}
@keyframes caRing{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(14deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.ca-ic{animation:none}}
.ca-name{font-family:Prompt,sans-serif;font-size:2.6rem;line-height:1.15;margin:.1rem 0 .4rem;color:var(--red);word-break:break-word}
.ca-msg{font-size:1.45rem;font-weight:700;margin:0 0 .6rem}
.ca-small{margin:0 0 .3rem;color:var(--muted);font-size:1.05rem}
.ca-ok{background:var(--green,#1E8E3E);color:#fff;margin-top:.8rem;min-height:4rem;font-size:1.3rem}
.watch-note{position:fixed;left:50%;top:1rem;transform:translateX(-50%);z-index:250;display:flex;align-items:center;gap:.6rem;background:#1A1414;color:#fff;border-radius:16px;padding:.8rem 1.1rem;font-weight:700;font-size:1.1rem;box-shadow:var(--shadow);max-width:calc(100% - 2rem)}
.watch-note svg{width:26px;height:26px;flex:none}