:root{
  --night: #1A1815;
  --night-2: #241F1A;
  --card: #2A2521;
  --chili: #E8452C;
  --chili-dark: #a8291a;
  --turmeric: #F2B705;
  --leaf: #4A7C59;
  --paper: #F5EFE0;
  --paper-dim: #C9C0AC;
  --smoke: #8A8478;
  --radius: 18px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--night);
  color:var(--paper);
  font-family:'Mitr', sans-serif;
  overflow-x:hidden;
  padding-bottom:0;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--chili); color:var(--paper);}
:focus-visible{outline:3px solid var(--turmeric); outline-offset:3px;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

/* ---------- NAV ---------- */
nav{
  position:sticky; top:0; z-index:60;
  background:rgba(26,24,21,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(245,239,224,0.1);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:72px; gap:20px;}
.brand{font-family:'Kanit',sans-serif; font-weight:800; font-size:1.25rem; display:flex; align-items:center; gap:8px; flex-shrink:0;}
.brand-dot{width:10px; height:10px; border-radius:50%; background:var(--chili); box-shadow:0 0 12px var(--chili);}
.nav-links{display:flex; gap:30px; font-size:0.92rem; font-weight:500; list-style:none;}
.nav-links a{opacity:0.85; transition:opacity .2s;}
.nav-links a:hover{opacity:1;}
@media (max-width:780px){ .nav-links{display:none;} }

.cart-btn{
  position:relative; display:flex; align-items:center; gap:8px;
  background:var(--chili); color:var(--paper); font-family:'Kanit',sans-serif; font-weight:600;
  padding:10px 18px; border-radius:100px; font-size:0.9rem; border:none;
  box-shadow:0 4px 0 var(--chili-dark);
  transition:transform .12s;
}
.cart-btn:hover{transform:translateY(-1px);}
.cart-count{
  background:var(--night); color:var(--turmeric); font-family:'Space Mono',monospace; font-weight:700;
  font-size:0.75rem; min-width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}

/* ---------- HERO ---------- */
.hero{
  position:relative; padding:64px 0 60px;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center 65%;
}
.hero-bg::after{
  content:'';position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,24,21,0.55) 0%, rgba(26,24,21,0.88) 65%, var(--night) 100%);
}
.bulbs{position:absolute; top:0; left:0; right:0; height:44px; display:flex; justify-content:space-around; z-index:2;}
.bulb{
  width:12px; height:16px; border-radius:50% 50% 45% 45%;
  background:radial-gradient(circle at 35% 30%, #fff6cf, var(--turmeric) 70%);
  box-shadow:0 0 12px 3px rgba(242,183,5,0.5);
  margin-top:12px; animation:flicker 3.4s ease-in-out infinite;
}
.bulb:nth-child(2n){animation-delay:.6s;} .bulb:nth-child(3n){animation-delay:1.2s;} .bulb:nth-child(4n){animation-delay:1.8s;}
@keyframes flicker{0%,100%{opacity:1;}48%{opacity:1;}50%{opacity:.55;}52%{opacity:1;}}

.hero-content{position:relative; z-index:3; max-width:640px; padding-top:36px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-family:'Space Mono',monospace; font-size:0.75rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--turmeric);
  border:1px solid rgba(242,183,5,0.4); padding:6px 14px; border-radius:100px; margin-bottom:22px;
}
.hero h1{
  font-family:'Kanit',sans-serif; font-weight:800; font-size:clamp(2.2rem, 5vw, 3.6rem);
  line-height:1.1; margin-bottom:18px;
}
.hero h1 span{color:var(--chili);}
.hero p{font-size:1.05rem; color:var(--paper-dim); line-height:1.7; margin-bottom:30px; max-width:480px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.btn-primary{
  background:var(--chili); color:var(--paper); font-family:'Kanit',sans-serif; font-weight:700;
  padding:14px 28px; border-radius:100px; font-size:0.95rem; border:none; box-shadow:0 5px 0 var(--chili-dark);
  transition:transform .15s;
}
.btn-primary:hover{transform:translateY(-2px);}
.btn-secondary{
  border:1px solid rgba(245,239,224,0.3); color:var(--paper); font-family:'Kanit',sans-serif; font-weight:600;
  padding:14px 28px; border-radius:100px; font-size:0.95rem; background:transparent;
  transition:border-color .2s, background .2s;
}
.btn-secondary:hover{border-color:var(--turmeric); background:rgba(242,183,5,0.08);}

/* ---------- MARQUEE ---------- */
.marquee{background:var(--turmeric); color:var(--night); overflow:hidden; white-space:nowrap; padding:12px 0;}
.marquee-track{display:inline-block; animation:scroll 26s linear infinite;}
.marquee span{font-family:'Kanit',sans-serif; font-weight:700; font-size:0.92rem; margin:0 22px;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- SECTION HEADS ---------- */
.section{padding:76px 0;}
.section-head{margin-bottom:40px; max-width:620px;}
.section-eyebrow{
  font-family:'Space Mono',monospace; font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--chili); margin-bottom:12px; display:block;
}
.section-head h2{font-family:'Kanit',sans-serif; font-weight:800; font-size:clamp(1.8rem, 3.4vw, 2.5rem); line-height:1.15;}
.section-head p{color:var(--paper-dim); margin-top:12px; font-size:1rem; line-height:1.7;}

/* ---------- CATEGORY TABS ---------- */
.tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
.tab{
  background:var(--card); border:1px solid rgba(245,239,224,0.1); color:var(--paper-dim);
  font-family:'Kanit',sans-serif; font-weight:600; font-size:0.88rem;
  padding:10px 20px; border-radius:100px; transition:all .2s; border-width:1px; border-style:solid;
}
.tab:hover{color:var(--paper); border-color:rgba(245,239,224,0.25);}
.tab.active{background:var(--chili); color:var(--paper); border-color:var(--chili);}

/* ---------- MENU GRID ---------- */
.menu-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:22px;}
.dish-card{
  background:var(--card); border-radius:var(--radius); overflow:hidden;
  border:1px solid rgba(245,239,224,0.08); display:flex; flex-direction:column;
  transition:transform .18s, box-shadow .18s;
}
.dish-card:hover{transform:translateY(-4px); box-shadow:0 16px 30px -12px rgba(0,0,0,0.5);}
.dish-img{width:100%; aspect-ratio:4/3; overflow:hidden; position:relative; background:#111;}
.dish-img img{width:100%; height:100%; object-fit:cover; transition:transform .35s;}
.dish-card:hover .dish-img img{transform:scale(1.06);}
.spicy-badge{
  position:absolute; top:10px; left:10px; background:rgba(26,24,21,0.85); color:var(--chili);
  font-size:0.78rem; padding:4px 10px; border-radius:100px; font-family:'Space Mono',monospace; font-weight:700;
}
.dish-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; flex:1;}
.dish-name{font-family:'Kanit',sans-serif; font-weight:700; font-size:1.05rem;}
.dish-desc{font-size:0.85rem; color:var(--smoke); line-height:1.55; flex:1;}
.dish-foot{display:flex; align-items:center; justify-content:space-between; margin-top:10px;}
.dish-price{font-family:'Space Mono',monospace; font-weight:700; font-size:1.1rem; color:var(--paper);}
.dish-price::before{content:'฿'; color:var(--turmeric); margin-right:1px;}
.add-btn{
  background:var(--turmeric); color:var(--night); border:none; font-family:'Kanit',sans-serif; font-weight:700;
  font-size:0.85rem; padding:9px 16px; border-radius:100px; transition:transform .12s, background .2s;
}
.add-btn:hover{transform:translateY(-1px);}
.add-btn.added{background:var(--leaf); color:var(--paper);}

/* qty stepper shown after adding */
.qty-stepper{display:flex; align-items:center; gap:10px; background:var(--night); border-radius:100px; padding:4px 6px;}
.qty-stepper button{
  width:26px; height:26px; border-radius:50%; border:none; background:var(--chili); color:var(--paper);
  font-weight:700; font-size:1rem; display:flex; align-items:center; justify-content:center;
}
.qty-stepper span{font-family:'Space Mono',monospace; font-weight:700; min-width:16px; text-align:center;}

/* ---------- ABOUT ---------- */
.about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center;}
@media (max-width:900px){ .about-grid{grid-template-columns:1fr;} }
.cart-sign{
  position:relative; background:linear-gradient(165deg,#2A2521,#141210);
  border-radius:20px; padding:36px 32px; border:1px solid rgba(245,239,224,0.08);
}
.cart-sign::before{
  content:'ป้ายแขวนหน้าร้าน'; position:absolute; top:-13px; left:32px; background:var(--leaf); color:var(--paper);
  font-family:'Space Mono',monospace; font-size:0.66rem; padding:5px 12px; border-radius:6px;
}
.cart-sign h3{font-family:'Kanit',sans-serif; font-weight:800; font-size:1.5rem; margin-bottom:14px; color:var(--turmeric);}
.cart-sign p{color:var(--paper-dim); line-height:1.8; font-size:0.95rem;}
.cart-sign ul{list-style:none; margin-top:18px;}
.cart-sign li{display:flex; gap:12px; font-size:0.9rem; padding:8px 0; border-top:1px dashed rgba(245,239,224,0.12);}
.cart-sign li:first-of-type{border-top:none;}
.dot-leaf{width:7px;height:7px;border-radius:50%;background:var(--leaf); flex-shrink:0; margin-top:6px;}

/* ---------- FIND ---------- */
.find{background:var(--night-2);}
.find-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px;}
@media (max-width:820px){ .find-grid{grid-template-columns:1fr;} }
.find-card{background:linear-gradient(165deg,#2A2521,#17140F); border-radius:20px; padding:30px; border:1px solid rgba(245,239,224,0.08);}
.find-card h3{font-family:'Kanit',sans-serif; font-weight:700; font-size:1.1rem; margin-bottom:16px;}
.find-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dotted rgba(245,239,224,0.14); font-size:0.92rem; gap:12px;}
.find-row:last-child{border-bottom:none;}
.find-row span:first-child{color:var(--smoke); font-family:'Space Mono',monospace; font-size:0.82rem; flex-shrink:0;}
.find-row span:last-child{font-weight:500; text-align:right;}
.today{color:var(--turmeric) !important; font-weight:700 !important;}

/* ---------- FOOTER ---------- */
footer{padding:44px 0 30px; border-top:1px solid rgba(245,239,224,0.08);}
.footer-grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
footer p{color:var(--smoke); font-size:0.82rem; margin-top:4px;}
.footer-links{display:flex; gap:22px; list-style:none; font-size:0.88rem;}
.footer-links a{opacity:0.8;}
.footer-links a:hover{opacity:1; color:var(--turmeric);}
.credit{font-size:0.72rem; color:#5c574c; margin-top:18px;}

/* ---------- CART DRAWER ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:90; opacity:0; pointer-events:none;
  transition:opacity .25s;
}
.overlay.show{opacity:1; pointer-events:auto;}

.drawer{
  position:fixed; top:0; right:0; height:100%; width:400px; max-width:92vw; z-index:100;
  background:var(--night-2); border-left:1px solid rgba(245,239,224,0.1);
  transform:translateX(100%); transition:transform .3s ease;
  display:flex; flex-direction:column;
}
.drawer.open{transform:translateX(0);}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:22px 22px 18px; border-bottom:1px solid rgba(245,239,224,0.1);}
.drawer-head h3{font-family:'Kanit',sans-serif; font-weight:700; font-size:1.15rem;}
.close-btn{background:none; border:none; color:var(--paper-dim); font-size:1.4rem; line-height:1;}
.close-btn:hover{color:var(--paper);}

.drawer-body{flex:1; overflow-y:auto; padding:18px 22px;}
.empty-cart{text-align:center; padding:60px 10px; color:var(--smoke);}
.empty-cart .emoji{font-size:2.4rem; margin-bottom:14px;}

.cart-item{display:flex; gap:12px; padding:14px 0; border-bottom:1px dotted rgba(245,239,224,0.12);}
.cart-item img{width:60px; height:60px; border-radius:10px; object-fit:cover; flex-shrink:0;}
.ci-info{flex:1; display:flex; flex-direction:column; gap:6px;}
.ci-name{font-family:'Kanit',sans-serif; font-weight:600; font-size:0.92rem;}
.ci-price{font-family:'Space Mono',monospace; font-size:0.82rem; color:var(--smoke);}
.ci-row{display:flex; align-items:center; justify-content:space-between;}
.ci-remove{background:none; border:none; color:var(--chili); font-size:0.78rem; font-family:'Space Mono',monospace;}

.drawer-foot{padding:20px 22px 26px; border-top:1px solid rgba(245,239,224,0.1);}
.total-row{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px;}
.total-row span:first-child{font-family:'Kanit',sans-serif; font-weight:600; color:var(--paper-dim);}
.total-row span:last-child{font-family:'Space Mono',monospace; font-weight:700; font-size:1.4rem; color:var(--turmeric);}
.total-row span:last-child::before{content:'฿'; font-size:1rem; margin-right:2px;}
.checkout-btn{
  width:100%; background:var(--chili); color:var(--paper); border:none; font-family:'Kanit',sans-serif; font-weight:700;
  padding:15px; border-radius:100px; font-size:1rem; box-shadow:0 5px 0 var(--chili-dark);
}
.checkout-btn:disabled{background:#4a463f; box-shadow:none; color:var(--smoke); cursor:not-allowed;}

/* ---------- CHECKOUT MODAL ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:110; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s; padding:20px;
}
.modal-overlay.show{opacity:1; pointer-events:auto;}
.modal{
  background:var(--night-2); border-radius:22px; max-width:460px; width:100%; max-height:88vh; overflow-y:auto;
  border:1px solid rgba(245,239,224,0.1); padding:30px 26px;
}
.modal h3{font-family:'Kanit',sans-serif; font-weight:800; font-size:1.3rem; margin-bottom:6px;}
.modal .sub{color:var(--smoke); font-size:0.86rem; margin-bottom:22px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:0.82rem; color:var(--paper-dim); margin-bottom:7px; font-family:'Space Mono',monospace;}
.field input, .field textarea{
  width:100%; background:var(--night); border:1px solid rgba(245,239,224,0.15); border-radius:12px;
  padding:12px 14px; color:var(--paper); font-family:'Mitr',sans-serif; font-size:0.94rem;
}
.field input:focus, .field textarea:focus{border-color:var(--turmeric);}
.field textarea{resize:vertical; min-height:70px;}

.toggle-group{display:flex; gap:10px; margin-bottom:18px;}
.toggle-opt{
  flex:1; text-align:center; padding:12px; border-radius:12px; border:1px solid rgba(245,239,224,0.15);
  font-family:'Kanit',sans-serif; font-weight:600; font-size:0.88rem; color:var(--paper-dim); background:var(--night);
}
.toggle-opt.active{border-color:var(--turmeric); color:var(--turmeric); background:rgba(242,183,5,0.08);}

.modal-summary{background:var(--night); border-radius:14px; padding:14px 16px; margin-bottom:20px; font-size:0.86rem; color:var(--paper-dim); max-height:140px; overflow-y:auto;}
.modal-summary .ms-row{display:flex; justify-content:space-between; padding:5px 0;}
.modal-total{
  display:flex; justify-content:space-between; align-items:baseline; padding-top:12px; margin-top:10px;
  border-top:1px dashed rgba(245,239,224,0.18);
}
.modal-total span:first-child{font-family:'Kanit',sans-serif; font-weight:700;}
.modal-total span:last-child{font-family:'Space Mono',monospace; font-weight:700; color:var(--turmeric); font-size:1.15rem;}
.modal-total span:last-child::before{content:'฿'; font-size:0.9rem;}

.modal-actions{display:flex; flex-direction:column; gap:10px;}
.line-btn{
  background:#06C755; color:#fff; border:none; font-family:'Kanit',sans-serif; font-weight:700; font-size:0.95rem;
  padding:14px; border-radius:100px; display:flex; align-items:center; justify-content:center; gap:8px;
}
.cancel-btn{background:none; border:none; color:var(--smoke); font-size:0.86rem; padding:8px; text-align:center;}
.cancel-btn:hover{color:var(--paper);}

/* ---------- TOAST ---------- */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(120%);
  background:var(--leaf); color:var(--paper); padding:14px 26px; border-radius:100px;
  font-family:'Kanit',sans-serif; font-weight:600; font-size:0.9rem; z-index:200; transition:transform .3s ease;
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
}
.toast.show{transform:translateX(-50%) translateY(0);}