/* =========================================================================
   ระบบจองคิว & สั่งอาหาร — Design tokens
   แนวคิด: "ใบสั่งอาหาร / ตั๋วคิว" (order ticket) ฝั่งลูกค้า
           "บอร์ดครัว" (kitchen expo board) ฝั่งร้านค้า
   ========================================================================= */

:root{
  --ink:        #20241F;
  --ink-soft:   #6E7268;
  --paper:      #F5F3EC;
  --paper-alt:  #EBE7DA;
  --card:       #FFFFFF;
  --line:       rgba(32,36,31,0.12);
  --line-strong:rgba(32,36,31,0.22);

  --chili:      #D8471F;
  --chili-dark: #B23A18;
  --chili-soft: rgba(216,71,31,0.12);

  --turmeric:   #E0932E;
  --turmeric-soft: rgba(224,147,46,0.15);

  --jade:       #2A7D5F;
  --jade-dark:  #1F5F47;
  --jade-soft:  rgba(42,125,95,0.13);

  --kitchen-bg:   #14171A;
  --kitchen-card: #1D2124;
  --kitchen-card-alt: #23282B;
  --kitchen-line: rgba(255,255,255,0.09);
  --kitchen-text: #F1EFE7;
  --kitchen-text-soft: #9AA09B;

  --font-display: 'Kanit', 'Noto Sans Thai', sans-serif;
  --font-body: 'Sarabun', 'Noto Sans Thai', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --shadow-card: 0 1px 2px rgba(32,36,31,0.06), 0 8px 24px -12px rgba(32,36,31,0.18);
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
}

body.kitchen{ background: var(--kitchen-bg); color: var(--kitchen-text); }

h1,h2,h3,h4{ font-family: var(--font-display); margin: 0 0 .4em; line-height: 1.25; font-weight: 600; }
p{ margin: 0 0 1em; }
a{ color: inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- layout shells ---------- */

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky; top:0; z-index: 20;
}
body.kitchen .topbar{ background: var(--kitchen-bg); border-color: var(--kitchen-line); }

.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color: var(--ink); }
body.kitchen .brand{ color: var(--kitchen-text); }
.brand-mark{
  font-family: var(--font-mono); font-weight:700; font-size: 13px;
  background: var(--chili); color:#fff; padding: 5px 9px; border-radius: 6px;
  letter-spacing: .04em;
}
.brand-text{ font-family: var(--font-display); font-weight:600; font-size: 17px; }

.topbar-right{ display:flex; align-items:center; gap: 14px; font-size: 14px; color: var(--ink-soft); }
body.kitchen .topbar-right{ color: var(--kitchen-text-soft); }

.page{ max-width: 980px; margin: 0 auto; padding: 28px 20px 80px; }
.page.wide{ max-width: 1200px; }

.flash-stack{ position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 50; display:flex; flex-direction:column; gap:8px; width: min(92vw, 420px); }
.flash{
  padding: 12px 16px; border-radius: var(--radius-s); font-size: 14.5px; font-weight:500;
  box-shadow: var(--shadow-card); animation: flash-in .25s ease-out;
  background: var(--ink); color: #fff;
}
.flash-success{ background: var(--jade); }
.flash-error{ background: var(--chili); }
@keyframes flash-in{ from{ opacity:0; transform: translateY(-8px);} to{opacity:1; transform:translateY(0);} }

/* ---------- buttons & forms ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-body); font-weight:600; font-size: 15px;
  min-height: 44px;
  padding: 12px 20px; border-radius: 999px; border: none; cursor:pointer;
  text-decoration:none; transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  background: var(--ink); color: #fff; touch-action: manipulation;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn:focus-visible{ outline: 3px solid var(--turmeric); outline-offset: 2px; }
.btn-primary{ background: var(--chili); }
.btn-primary:hover{ background: var(--chili-dark); }
.btn-success{ background: var(--jade); }
.btn-success:hover{ background: var(--jade-dark); }
.btn-outline{ background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); }
body.kitchen .btn-outline{ color: var(--kitchen-text); border-color: var(--kitchen-line); }
.btn-ghost{ background: transparent; color: var(--ink-soft); padding: 8px 12px; min-height:auto; }
.btn-sm{ padding: 8px 14px; font-size: 13.5px; min-height: 38px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

label{ display:block; font-size: 13.5px; font-weight:600; color: var(--ink-soft); margin-bottom:6px; }
input[type=text], input[type=number], input[type=time], input[type=password], input[type=file], select, textarea{
  width:100%; font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-s);
  padding: 12px 14px; transition: border-color .15s ease;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color: var(--chili); }
textarea{ resize: vertical; min-height: 70px; }
.field{ margin-bottom: 18px; }
.field-row{ display:flex; gap:14px; flex-wrap: wrap; }
.field-row > .field{ flex:1; min-width: 180px; }

/* ---------- index: name + shop select ---------- */

.hero-intro{ text-align:center; max-width: 560px; margin: 10px auto 36px; }
.hero-intro .eyebrow{
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--chili); font-weight: 700; margin-bottom: 10px; display:block;
}
.hero-intro h1{ font-size: clamp(28px, 4vw, 38px); }
.hero-intro p{ color: var(--ink-soft); font-size: 16.5px; }

.shop-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 14px; margin: 10px 0 26px; }
.shop-card{
  position:relative; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-m);
  padding: 18px; cursor:pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.shop-card:hover{ box-shadow: var(--shadow-card); }
.shop-card input{ position:absolute; opacity:0; }
.shop-card .shop-name{ font-family: var(--font-display); font-weight:600; font-size: 17px; margin-bottom:4px; }
.shop-card .shop-desc{ color: var(--ink-soft); font-size: 13.5px; }
.shop-card .shop-prep{ margin-top:10px; font-family: var(--font-mono); font-size: 12px; color: var(--chili); }
.shop-card:has(input:checked){ border-color: var(--chili); background: var(--chili-soft); box-shadow: 0 0 0 3px var(--chili-soft); }

.form-card{ background: var(--card); border-radius: var(--radius-l); padding: 26px; border: 1.5px solid var(--line); }

/* ---------- menu page ---------- */

.menu-header{ display:flex; justify-content: space-between; align-items:flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.menu-header h1{ font-size: 26px; margin-bottom: 2px; }
.menu-header .subtitle{ color: var(--ink-soft); font-size: 14px; }

.cart-pill{
  display:flex; align-items:center; gap:10px; background: var(--ink); color:#fff;
  padding: 10px 18px; border-radius: 999px; text-decoration:none; font-weight:600; font-size: 14.5px;
  transition: transform .12s ease;
}
.cart-pill:hover{ transform: translateY(-1px); }
.cart-pill .badge{
  background: var(--chili); border-radius: 999px; padding: 2px 9px; font-family: var(--font-mono); font-size: 12.5px;
}

.menu-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 16px; }
.menu-card{
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-m);
  overflow:hidden; display:flex; flex-direction:column; transition: box-shadow .15s ease, transform .15s ease;
}
.menu-card:hover{ box-shadow: var(--shadow-card); }
.menu-card.out-of-stock{ opacity: .62; }
.menu-card-img{ height: 132px; background: linear-gradient(135deg, var(--paper-alt), var(--paper)); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.menu-card-img img{ width:100%; height:100%; object-fit:cover; }
.menu-card-img .placeholder-icon{ font-family: var(--font-mono); font-size: 34px; color: var(--line-strong); }
.menu-card-body{ padding: 14px 16px 16px; display:flex; flex-direction:column; gap: 8px; flex:1; }
.menu-card-name{ font-family: var(--font-display); font-weight:600; font-size: 16.5px; }
.menu-card-price{ font-family: var(--font-mono); font-weight:700; color: var(--chili); font-size: 15px; }
.stock-badge{
  display:inline-flex; align-items:center; gap:5px; font-size: 12px; font-weight:600; width:fit-content;
  padding: 4px 10px; border-radius: 999px; background: var(--jade-soft); color: var(--jade-dark);
}
.stock-badge.out{ background: var(--chili-soft); color: var(--chili-dark); }
.stock-badge .dot{ width:6px; height:6px; border-radius:50%; background: currentColor; }
.menu-card-footer{ margin-top:auto; }

/* modal (เพิ่มรายการ + ท็อปปิ้ง) */
.modal-overlay{
  position: fixed; inset:0; background: rgba(20,22,18,0.55); display:none;
  align-items:flex-end; justify-content:center; z-index: 60; padding: 0;
}
.modal-overlay:target, .modal-overlay.open{ display:flex; }
.modal-sheet{
  background: var(--paper); width:100%; max-width: 480px; max-height: 88vh; overflow-y:auto;
  border-radius: 20px 20px 0 0; padding: 24px 22px 26px; animation: sheet-up .22s ease-out;
}
@media (min-width: 640px){
  .modal-overlay{ align-items:center; }
  .modal-sheet{ border-radius: var(--radius-l); animation: sheet-pop .18s ease-out; }
}
@keyframes sheet-up{ from{ transform: translateY(16px); opacity:0;} to{transform:translateY(0); opacity:1;} }
@keyframes sheet-pop{ from{ transform: scale(.96); opacity:0;} to{transform:scale(1); opacity:1;} }
.modal-close{ position:absolute; top:10px; right:10px; text-decoration:none; color: var(--ink-soft); font-size:22px; line-height:1; width:40px; height:40px; display:flex; align-items:center; justify-content:center; touch-action: manipulation; }
.modal-sheet{ position:relative; }
.topping-row{ display:flex; align-items:center; justify-content:space-between; padding: 10px 0; border-bottom: 1px solid var(--line); gap: 10px;}
.topping-row:last-child{ border-bottom:none; }
.topping-row label{ display:flex; align-items:center; gap:10px; font-weight:500; color: var(--ink); font-size: 15px; margin:0; cursor:pointer; }
.topping-row input[type=checkbox]{ width:20px; height:20px; accent-color: var(--chili); flex-shrink:0; }
.topping-row .t-price{ font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }
.topping-row.disabled label{ color: var(--ink-soft); text-decoration: line-through; cursor:not-allowed; }
.qty-stepper{ display:flex; align-items:center; gap: 14px; }
.qty-stepper button{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line-strong); background:var(--card); font-size:20px; cursor:pointer; touch-action: manipulation; }
.qty-stepper span{ font-family: var(--font-mono); font-weight:700; font-size: 18px; min-width: 22px; text-align:center; }

/* ---------- cart / checkout ---------- */

.cart-line{ display:flex; gap:14px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items:flex-start; }
.cart-line-info{ flex:1; }
.cart-line-name{ font-weight:600; font-family: var(--font-display); font-size: 15.5px; }
.cart-line-meta{ font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.cart-line-comment{ font-size: 13px; color: var(--ink-soft); font-style: italic; margin-top: 4px; }
.cart-line-price{ font-family: var(--font-mono); font-weight:700; white-space:nowrap; }
.cart-total-row{ display:flex; justify-content:space-between; align-items:center; padding-top: 16px; font-family: var(--font-display); font-size: 20px; font-weight:600; }
.cart-total-row .amount{ font-family: var(--font-mono); color: var(--chili); }
.empty-state{ text-align:center; padding: 50px 20px; color: var(--ink-soft); }

/* ---------- ticket / order status ---------- */

.ticket-wrap{ max-width: 460px; margin: 0 auto; }
.ticket{
  background: var(--card); border-radius: var(--radius-l); padding: 28px 26px 22px;
  box-shadow: var(--shadow-card); position: relative; text-align:center;
  animation: ticket-print .45s cubic-bezier(.2,.8,.2,1);
}
@keyframes ticket-print{ from{ transform: translateY(-14px); opacity:0;} to{ transform:translateY(0); opacity:1; } }
.ticket-shop{ font-size: 13px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-mono); }
.ticket-label{ font-size: 13.5px; color: var(--ink-soft); margin: 14px 0 2px; }
.ticket-number{
  font-family: var(--font-mono); font-weight:700; font-size: clamp(52px, 16vw, 76px); line-height: 1; color: var(--ink);
  letter-spacing: -.02em;
}
.ticket-perforation{
  height: 0; border-top: 2px dashed var(--line-strong); margin: 20px -26px; position: relative;
}
.ticket-perforation::before, .ticket-perforation::after{
  content:''; position:absolute; top:-11px; width:22px; height:22px; border-radius:50%; background: var(--paper);
}
.ticket-perforation::before{ left:-11px; }
.ticket-perforation::after{ right:-11px; }
.ticket-meta{ display:flex; justify-content:space-between; text-align:left; font-size: 14px; padding: 3px 0; }
.ticket-meta .k{ color: var(--ink-soft); }
.ticket-meta .v{ font-weight:600; }

.status-track{ display:flex; justify-content:space-between; margin: 22px 0 6px; position: relative; }
.status-track::before{ content:''; position:absolute; top:13px; left:5%; right:5%; height:2px; background: var(--line); z-index:0; }
.status-step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; }
.status-step .dot{ width:26px; height:26px; border-radius:50%; background: var(--card); border: 2.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-size:13px; transition: all .2s ease; }
.status-step .lbl{ font-size: 11.5px; color: var(--ink-soft); text-align:center; max-width: 66px; }
.status-step.done .dot{ background: var(--jade); border-color: var(--jade); color:#fff; }
.status-step.active .dot{ background: var(--chili); border-color: var(--chili); color:#fff; animation: pulse-ring 1.6s infinite; }
.status-step.active .lbl{ color: var(--chili); font-weight:700; }
@keyframes pulse-ring{ 0%{ box-shadow: 0 0 0 0 var(--chili-soft);} 70%{ box-shadow: 0 0 0 9px rgba(216,71,31,0);} 100%{ box-shadow: 0 0 0 0 rgba(216,71,31,0);} }

.wait-banner{
  margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-m); background: var(--paper-alt);
  font-size: 14.5px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap: 10px;
}
.wait-banner .num{ font-family: var(--font-mono); font-weight:700; font-size: 17px; color: var(--chili); }

.ready-banner{
  margin-top:18px; padding: 18px; border-radius: var(--radius-m); background: var(--jade); color:#fff;
  text-align:center; font-family: var(--font-display); font-weight:600; font-size: 17px;
  animation: ready-pop .5s ease;
}
@keyframes ready-pop{ 0%{ transform: scale(.9); opacity:0;} 60%{ transform: scale(1.03);} 100%{ transform: scale(1); opacity:1;} }

.pay-box{ margin-top: 20px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-m); padding: 20px; text-align:center; }
.pay-box.paid{ border-style: solid; border-color: var(--jade); background: var(--jade-soft); }
.paid-bar{
  display:flex; align-items:center; justify-content:center; gap:8px; background: var(--jade); color:#fff;
  border-radius: 999px; padding: 10px 18px; font-weight:700; font-size: 14.5px; margin-bottom: 4px;
}
#qr-holder{ display:flex; justify-content:center; margin: 14px 0; }
#qr-holder canvas, #qr-holder img{ border-radius: 10px; border: 6px solid #fff; box-shadow: var(--shadow-card); }

.items-summary{ text-align:left; margin-top: 22px; }
.items-summary h3{ font-size: 15px; }
.item-row{ display:flex; justify-content:space-between; font-size: 14px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.item-row .name{ font-weight:600; }
.item-row .sub{ color: var(--ink-soft); font-size: 12.5px; }

/* ---------- pay page ---------- */

.pay-screen{ max-width: 420px; margin: 0 auto; text-align:center; }
.pay-amount{ font-family: var(--font-mono); font-weight:700; font-size: 44px; color: var(--chili); margin: 6px 0 18px; }
.pay-success-icon{ width:64px; height:64px; border-radius:50%; background: var(--jade); color:#fff; display:flex; align-items:center; justify-content:center; font-size:30px; margin: 0 auto 16px; }

/* ---------- admin login ---------- */

.login-wrap{ max-width: 380px; margin: 60px auto; }

/* ---------- admin dashboard (kitchen board) ---------- */

body.kitchen .page{ padding-top: 22px; }
.board-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 20px; flex-wrap:wrap; gap:12px; }
.shop-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.shop-tab{
  padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--kitchen-line); text-decoration:none;
  font-size: 13.5px; font-weight:600; color: var(--kitchen-text-soft);
}
.shop-tab.active{ background: var(--chili); border-color: var(--chili); color:#fff; }

.board{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items:start; }
@media (max-width: 900px){ .board{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .board{ grid-template-columns: 1fr; } }

.board-col{ background: var(--kitchen-card-alt); border-radius: var(--radius-m); padding: 12px; min-height: 120px; }
.board-col h2{ font-size: 14px; display:flex; justify-content:space-between; align-items:center; padding: 4px 6px 10px; color: var(--kitchen-text-soft); }
.board-col h2 .count{ font-family: var(--font-mono); background: var(--kitchen-line); padding: 1px 8px; border-radius: 999px; font-size:12px; }

.order-card{
  background: var(--kitchen-card); border: 1px solid var(--kitchen-line); border-radius: var(--radius-s);
  padding: 13px 14px; margin-bottom: 10px; animation: card-in .25s ease;
}
@keyframes card-in{ from{ opacity:0; transform: translateY(6px);} to{opacity:1; transform:translateY(0);} }
.order-card .q{ font-family: var(--font-mono); font-weight:700; font-size: 20px; color: var(--turmeric); }
.order-card .name{ font-weight:600; font-size: 14.5px; margin: 2px 0 8px; }
.order-card .paid-tag{ display:inline-block; font-size: 11px; font-weight:700; padding: 2px 8px; border-radius: 999px; margin-bottom:8px; }
.order-card .paid-tag.yes{ background: var(--jade-soft); color: #6FE0B4; }
.order-card .paid-tag.no{ background: rgba(216,71,31,0.18); color: #FF8F66; }
.order-card ul{ list-style:none; margin: 0 0 10px; padding:0; font-size: 13px; color: var(--kitchen-text-soft); }
.order-card ul li{ padding: 2px 0; }
.order-card ul li .tp{ font-size: 11.5px; opacity: .85; }
.order-card .comment{ font-size: 12px; font-style: italic; color: var(--turmeric); }
.order-card .foot{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; gap:6px; flex-wrap:wrap; }
.order-card .total{ font-family: var(--font-mono); font-size: 13px; color: var(--kitchen-text-soft); }
.order-card .pickup{ font-size: 11.5px; color: var(--kitchen-text-soft); }

.empty-col{ color: var(--kitchen-text-soft); font-size: 13px; text-align:center; padding: 20px 8px; }

.completed-strip{ margin-top: 26px; border-top: 1px solid var(--kitchen-line); padding-top: 16px; }
.completed-strip h3{ font-size: 13px; color: var(--kitchen-text-soft); }
.completed-strip .chips{ display:flex; flex-wrap:wrap; gap:8px; }
.completed-strip .chip{ font-family: var(--font-mono); font-size: 12px; background: var(--kitchen-card-alt); padding: 5px 10px; border-radius: 8px; color: var(--kitchen-text-soft); }

/* ---------- admin menu management ---------- */

.menu-manage-item{ background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-m); padding: 16px 18px; margin-bottom: 14px; }
.menu-manage-item .row-top{ display:flex; justify-content:space-between; align-items:center; gap: 10px; flex-wrap:wrap; }
.menu-manage-item .row-top .name{ font-family: var(--font-display); font-weight:600; font-size: 16px; }
.topping-manage-row{ display:flex; align-items:center; justify-content:space-between; padding: 7px 0; font-size: 13.5px; border-top: 1px dashed var(--line); }
.inline-form{ display:flex; gap:8px; align-items:center; flex-wrap: wrap; }
.inline-form input{ width: auto; }
.toggle-btn{
  font-size: 12px; font-weight:700; padding: 5px 12px; border-radius: 999px; border: none; cursor:pointer;
  background: var(--jade-soft); color: var(--jade-dark);
}
.toggle-btn.off{ background: var(--chili-soft); color: var(--chili-dark); }

.section-title{ display:flex; justify-content:space-between; align-items:center; margin: 30px 0 14px; }

.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 22px; }
.chip-link{ text-decoration:none; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line-strong); font-size: 13.5px; font-weight:600; color: var(--ink-soft); }
.chip-link.active{ background: var(--ink); color:#fff; border-color: var(--ink); }

footer.sitefoot{ text-align:center; padding: 30px 20px; font-size: 12.5px; color: var(--ink-soft); }

/* ---------- small phone tightening ---------- */
@media (max-width: 400px){
  .page{ padding: 20px 14px 70px; }
  .topbar{ padding: 12px 16px; }
  .brand-text{ font-size: 14.5px; }
  .ticket{ padding: 22px 16px 18px; }
  .ticket-perforation{ margin: 18px -16px; }
  .form-card{ padding: 18px 16px; }
  .menu-header{ gap: 10px; }
  .cart-pill{ padding: 9px 14px; font-size: 13.5px; }
  .hero-intro h1{ font-size: 24px; }
}

@media (max-width: 360px){
  .status-track .lbl{ display:none; }
}