/* ===== RESET & BASE ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --green-50:#f0fdf4; --green-100:#dcfce7; --green-200:#bbf7d0;
  --green-500:#22c55e; --green-600:#16a34a; --green-700:#15803d;
  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb;
  --gray-500:#6b7280; --gray-700:#374151; --gray-900:#111827;
  --amber-400:#fbbf24; --amber-500:#f59e0b;
  --red-500:#ef4444; --blue-500:#3b82f6;
  --radius:14px;
  --shadow:0 4px 24px rgba(0,0,0,.06);
  --shadow-lg:0 8px 40px rgba(0,0,0,.12);
  --header-h:130px;
}
html { -webkit-text-size-adjust:100%; }
body {
  font-family:'Inter','Noto Sans Khmer',sans-serif;
  background:var(--gray-50); color:var(--gray-900);
  line-height:1.6; padding-bottom:80px;
  overscroll-behavior-y:none;
}
button { font-family:inherit; cursor:pointer; border:none; background:none; }
img { max-width:100%; display:block; }

/* ===== HEADER ===== */
#header {
  position:sticky; top:0; z-index:100;
  background:linear-gradient(135deg,var(--green-600),var(--green-500));
  color:#fff; box-shadow:0 2px 16px rgba(22,163,74,.2);
}
.header-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px 8px;
}
.header-brand { display:flex; align-items:center; gap:10px; }
.logo { font-size:2rem; line-height:1; }
.brand-name { font-size:1.15rem; font-weight:800; line-height:1.2; }
.brand-sub { font-size:.8rem; opacity:.85; }
.header-actions { display:flex; align-items:center; gap:10px; }
.table-badge {
  background:rgba(255,255,255,.2);
  padding:5px 12px; border-radius:20px;
  font-size:.82rem; font-weight:600;
  display:flex; align-items:center; gap:4px;
}
.lang-btn {
  background:rgba(255,255,255,.2);
  color:#fff; padding:6px 14px;
  border-radius:20px; font-weight:700; font-size:.82rem;
  transition:.2s;
}
.lang-btn:active { transform:scale(.95); }

/* ===== CATEGORY TABS ===== */
.cat-tabs {
  display:flex; gap:8px; overflow-x:auto; padding:6px 16px 10px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.cat-tabs::-webkit-scrollbar { display:none; }
.cat-tab {
  flex-shrink:0; padding:7px 18px;
  background:rgba(255,255,255,.18); color:#fff;
  border-radius:20px; font-size:.85rem; font-weight:600;
  white-space:nowrap; transition:.2s;
}
.cat-tab.active {
  background:#fff; color:var(--green-700);
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}

/* ===== MENU GRID ===== */
.menu-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  padding:16px 14px; max-width:600px; margin:0 auto;
}
@media(min-width:480px) { .menu-grid { grid-template-columns:repeat(3,1fr); } }

/* ===== DRINK CARD ===== */
.drink-card {
  background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
  transition:.2s; cursor:pointer; position:relative;
}
.drink-card:active { transform:scale(.97); }
.drink-card.sold-out { opacity:.5; pointer-events:none; }
.drink-emoji {
  width:100%; aspect-ratio:1; display:flex;
  align-items:center; justify-content:center;
  font-size:3rem; background:var(--green-50);
}
.drink-body { padding:10px 12px; }
.drink-name { font-size:.9rem; font-weight:700; line-height:1.3; margin-bottom:4px; }
.drink-desc { font-size:.72rem; color:var(--gray-500); line-height:1.4; margin-bottom:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.drink-footer { display:flex; align-items:center; justify-content:space-between; }
.drink-price { font-size:.95rem; font-weight:800; color:var(--green-700); }
.drink-price-khr { font-size:.68rem; color:var(--gray-500); }
.drink-cal { font-size:.68rem; color:var(--amber-500); font-weight:600; }
.add-btn {
  background:var(--green-600); color:#fff;
  width:32px; height:32px; border-radius:50%;
  font-size:1.3rem; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:.2s;
}
.add-btn:active { transform:scale(.88); }

/* ===== SKELETON ===== */
.skeleton-card {
  background:#fff; border-radius:var(--radius);
  overflow:hidden; animation:shimmer 1.5s infinite;
}
.skeleton-card .sk-img { width:100%; aspect-ratio:1; background:var(--gray-100); }
.skeleton-card .sk-line { height:12px; background:var(--gray-100); margin:8px 12px; border-radius:4px; }
.skeleton-card .sk-line.short { width:60%; }
@keyframes shimmer {
  0%{opacity:1} 50%{opacity:.5} 100%{opacity:1}
}

/* ===== CART BAR ===== */
.cart-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:90;
  background:var(--gray-900); color:#fff;
  display:flex; align-items:center; gap:12px;
  padding:14px 20px; transform:translateY(100%);
  transition:transform .3s ease; max-width:600px; margin:0 auto;
}
.cart-bar.show { transform:translateY(0); }
.cart-bar-info { display:flex; align-items:center; gap:4px; }
.cart-bar-count {
  background:var(--green-500); min-width:24px; height:24px;
  border-radius:12px; padding:0 7px; font-size:.78rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.cart-bar-label { font-size:.82rem; opacity:.8; }
.cart-bar-total { margin-left:auto; text-align:right; }
.cart-bar-total span:first-child { font-size:1.1rem; font-weight:800; }
.cart-bar-total-khr { font-size:.72rem; opacity:.6; display:block; }
.cart-bar-btn {
  background:var(--green-500); color:#fff;
  padding:10px 20px; border-radius:10px;
  font-weight:700; font-size:.88rem; transition:.2s;
}
.cart-bar-btn:active { transform:scale(.95); }

/* ===== OVERLAY ===== */
.overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  z-index:100; opacity:0; pointer-events:none; transition:.3s;
}
.overlay.show { opacity:1; pointer-events:auto; }

/* ===== CART SHEET ===== */
.cart-sheet {
  position:fixed; bottom:0; left:0; right:0; z-index:110;
  background:#fff; border-radius:20px 20px 0 0;
  max-height:85vh; display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform .35s cubic-bezier(.32,.72,.0,1);
  max-width:600px; margin:0 auto;
}
.cart-sheet.show { transform:translateY(0); }
.cart-handle {
  width:40px; height:4px; background:var(--gray-200);
  border-radius:2px; margin:10px auto 4px;
}
.cart-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 20px 12px; border-bottom:1px/1px solid var(--gray-100);
}
.cart-header h2 { font-size:1.1rem; font-weight:700; }
.cart-close {
  width:32px; height:32px; font-size:1.1rem;
  color:var(--gray-500); border-radius:50%; transition:.2s;
}
.cart-close:active { background:var(--gray-100); }
.cart-items { flex:1; overflow-y:auto; padding:12px 20px; }
.cart-empty { text-align:center; color:var(--gray-500); padding:40px 0; font-size:.9rem; }

/* ===== CART ITEM ===== */
.cart-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--gray-100);
}
.cart-item-emoji { font-size:1.8rem; flex-shrink:0; }
.cart-item-info { flex:1; min-width:0; }
.cart-item-name { font-size:.88rem; font-weight:600; }
.cart-item-note { font-size:.72rem; color:var(--gray-500); font-style:italic; }
.cart-item-price { font-size:.82rem; color:var(--green-700); font-weight:700; margin-top:2px; }
.cart-qty { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.qty-btn {
  width:28px; height:28px; border-radius:50%;
  background:var(--gray-100); font-size:1.1rem; font-weight:700;
  color:var(--gray-700); transition:.2s;
}
.qty-btn:active { background:var(--gray-200); }
.qty-val { font-size:.88rem; font-weight:700; min-width:20px; text-align:center; }

/* ===== CART SUMMARY ===== */
.cart-summary { padding:16px 20px 20px; border-top:1px solid var(--gray-100); }
.cart-summary-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px; font-size:1rem; font-weight:700;
}
.cart-summary-prices { text-align:right; }
.cart-summary-prices .price-usd { font-size:1.2rem; font-weight:800; color:var(--green-700); }
.cart-summary-prices .price-khr { font-size:.75rem; color:var(--gray-500); display:block; }
.cart-note {
  width:100%; padding:10px 14px; border:1.5px solid var(--gray-200);
  border-radius:10px; font-size:.82rem; margin-bottom:12px;
  font-family:inherit; resize:none; height:44px; transition:.2s;
}
.cart-note:focus { outline:none; border-color:var(--green-500); }
.checkout-btn {
  width:100%; padding:14px; background:var(--green-600);
  color:#fff; border-radius:12px; font-size:1rem; font-weight:700;
  transition:.2s;
}
.checkout-btn:active { transform:scale(.98); }

/* ===== MODAL ===== */
.modal {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; pointer-events:none; transition:.3s;
}
.modal.show { opacity:1; pointer-events:auto; }
.modal-content {
  background:#fff; border-radius:20px; padding:28px 24px;
  max-width:380px; width:100%; text-align:center;
  transform:scale(.9); transition:.3s; position:relative;
  max-height:90vh; overflow-y:auto;
}
.modal.show .modal-content { transform:scale(1); }
.success-icon { font-size:3rem; margin-bottom:8px; }
.modal-content h2 { font-size:1.2rem; font-weight:700; margin-bottom:4px; }
.order-number { font-size:1.6rem; font-weight:800; color:var(--green-700); margin:8px 0; }
.order-detail { font-size:.85rem; color:var(--gray-500); margin-bottom:16px; }
.order-summary-box {
  background:var(--gray-50); border-radius:12px;
  padding:14px; margin-bottom:16px; text-align:left;
}
.order-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:5px 0; font-size:.85rem;
}
.order-row span:first-child { color:var(--gray-500); }
.order-row span:last-child { font-weight:600; }
.done-btn {
  width:100%; padding:14px; background:var(--green-600);
  color:#fff; border-radius:12px; font-size:1rem; font-weight:700;
}

/* ===== DRINK DETAIL MODAL ===== */
.modal-close {
  position:absolute; top:12px; right:12px;
  width:32px; height:32px; font-size:1.1rem;
  color:var(--gray-500); border-radius:50%; background:var(--gray-100);
}
.drink-detail-content { text-align:left; }
.drink-detail-img {
  width:100%; aspect-ratio:2; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:4.5rem; background:var(--green-50); margin-bottom:14px;
}
.drink-detail-content h2 { text-align:left; font-size:1.2rem; margin-bottom:6px; }
.drink-detail-desc { font-size:.85rem; color:var(--gray-500); margin-bottom:12px; line-height:1.5; }
.drink-detail-info {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.drink-calories { font-size:.82rem; color:var(--amber-500); font-weight:600; }
.drink-price { font-size:1.2rem; font-weight:800; color:var(--green-700); }
.drink-note-input {
  width:100%; padding:10px 14px; border:1.5px solid var(--gray-200);
  border-radius:10px; font-size:.85rem; margin-bottom:14px;
  font-family:inherit;
}
.drink-note-input:focus { outline:none; border-color:var(--green-500); }
.drink-detail-actions {
  display:flex; align-items:center; gap:12px;
}
.qty-control { display:flex; align-items:center; gap:10px; }
.drink-detail-actions .qty-btn {
  width:36px; height:36px;
}
.drink-detail-actions .qty-val { font-size:1rem; }
.add-to-cart-btn {
  flex:1; padding:12px; background:var(--green-600);
  color:#fff; border-radius:10px; font-weight:700; font-size:.9rem;
  transition:.2s;
}
.add-to-cart-btn:active { transform:scale(.97); }

/* ===== UTILITY ===== */
.price-usd { font-weight:700; color:var(--green-700); }
.price-khr { color:var(--gray-500); }
.hidden { display:none !important; }

/* ===== SCROLLBAR ===== */
.cart-items::-webkit-scrollbar { width:4px; }
.cart-items::-webkit-scrollbar-thumb { background:var(--gray-200); border-radius:2px; }