/* ============================================================
   main.css – Customer-facing menu page styles
   ============================================================ */

/* Page layout */
.page-wrapper { min-height: 100vh; padding-bottom: calc(var(--cart-bar-h) + 16px); }

/* Hero header */
.site-header {
  background: var(--grad-hero);
  padding: var(--sp-8) var(--sp-6) var(--sp-10);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.site-header::before {
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M0 0h20v20H0zm20 20h20v20H20z'/%3E%3C/g%3E%3C/svg%3E");
}
.header-logo { font-family:var(--font-display); font-size:1rem; color:rgba(255,255,255,0.7); margin-bottom:var(--sp-2); letter-spacing:0.1em; text-transform:uppercase; }
.header-title { font-family:var(--font-display); font-size:clamp(2rem,7vw,3rem); color:#fff; line-height:1.1; margin-bottom:var(--sp-2); }
.header-subtitle { color:rgba(255,255,255,0.65); font-size:0.95rem; }

/* Search */
.search-wrap { padding:var(--sp-4) var(--sp-4) 0; max-width:640px; margin:0 auto; }
.search-inner {
  display:flex; align-items:center; gap:var(--sp-3);
  background:var(--clr-surface); border:2px solid var(--clr-border);
  border-radius:var(--radius-full); padding:var(--sp-2) var(--sp-5);
  box-shadow:var(--shadow-sm); transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
}
.search-inner:focus-within { border-color:var(--clr-primary); box-shadow:0 0 0 3px rgba(99,102,241,0.12); }
.search-icon { color:var(--clr-text-muted); flex-shrink:0; }
.search-input { flex:1; font-size:0.95rem; color:var(--clr-text); background:transparent; }
.search-input::placeholder { color:var(--clr-text-light); }

/* Category tabs */
.category-tabs { display:flex; gap:var(--sp-2); padding:var(--sp-4); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.category-tabs::-webkit-scrollbar { display:none; }
.cat-tab {
  scroll-snap-align:start; flex-shrink:0; padding:var(--sp-2) var(--sp-5);
  border-radius:var(--radius-full); font-size:0.85rem; font-weight:600;
  background:var(--clr-surface); color:var(--clr-text-muted); border:2px solid var(--clr-border);
  transition:all var(--dur-normal) var(--ease-out); cursor:pointer; white-space:nowrap;
}
.cat-tab:hover { border-color:var(--clr-primary-light); color:var(--clr-primary); }
.cat-tab.active { background:var(--grad-primary); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(99,102,241,0.35); }

/* Section heading */
.section-heading { padding:var(--sp-4) var(--sp-4) var(--sp-2); font-size:1.2rem; font-weight:700; display:flex; align-items:center; gap:var(--sp-3); }
.section-heading::after { content:''; flex:1; height:1px; background:var(--clr-border); }

/* Menu grid */
.menu-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:var(--sp-4); padding:0 var(--sp-4) var(--sp-4); max-width:900px; margin:0 auto; }

/* Menu card */
.menu-card { background:var(--clr-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column; transition:transform var(--dur-normal) var(--ease-out),box-shadow var(--dur-normal) var(--ease-out); }
.menu-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.menu-card.unavailable { opacity:0.5; pointer-events:none; }
.menu-card-img { width:100%; height:175px; object-fit:cover; background:var(--clr-surface-2); }
.menu-card-gallery { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; width:100%; height:175px; scroll-behavior:smooth; -ms-overflow-style:none; scrollbar-width:none; }
.menu-card-gallery::-webkit-scrollbar { display:none; }
.menu-card-gallery .menu-card-img { flex:0 0 100%; width:100%; height:100%; scroll-snap-align:start; }
.menu-card-img-placeholder { width:100%; height:175px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,hsl(220,20%,92%),hsl(220,20%,86%)); font-size:3rem; }
.menu-card-body { padding:var(--sp-4); flex:1; display:flex; flex-direction:column; gap:var(--sp-1); }
.menu-card-cat { font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--clr-primary); }
.menu-card-name { font-size:1rem; font-weight:700; }
.menu-card-desc { font-size:0.83rem; color:var(--clr-text-muted); line-height:1.5; flex:1; }
.menu-card-footer { display:flex; align-items:center; justify-content:space-between; padding:var(--sp-3) var(--sp-4) var(--sp-4); }
.menu-card-price { font-size:1.1rem; font-weight:800; }
.unavail-label { font-size:0.72rem; font-weight:600; padding:2px 8px; border-radius:var(--radius-full); background:hsl(4,80%,95%); color:var(--clr-new); }

/* Add & qty controls */
.add-btn { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--radius-full); background:var(--grad-primary); color:#fff; font-size:1.4rem; box-shadow:0 4px 12px rgba(99,102,241,0.3); transition:all var(--dur-fast) var(--ease-spring); }
.add-btn:hover { transform:scale(1.15); }
.add-btn:active { transform:scale(0.92); }
.qty-ctrl { display:flex; align-items:center; gap:var(--sp-3); animation:fadeIn var(--dur-normal) var(--ease-out); }
@keyframes fadeIn { from{opacity:0;transform:scale(0.8)} to{opacity:1;transform:scale(1)} }
.qty-btn { width:32px; height:32px; border-radius:var(--radius-full); border:2px solid var(--clr-border); display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:700; color:var(--clr-text); transition:all var(--dur-fast); }
.qty-btn:hover { border-color:var(--clr-primary); color:var(--clr-primary); }
.qty-num { font-size:1rem; font-weight:700; min-width:20px; text-align:center; }

/* Cart bar */
.cart-bar { position:fixed; bottom:0; left:0; right:0; height:var(--cart-bar-h); background:var(--grad-primary); display:flex; align-items:center; justify-content:space-between; padding:0 var(--sp-5); z-index:700; box-shadow:0 -4px 24px rgba(99,102,241,0.3); cursor:pointer; transform:translateY(100%); transition:transform var(--dur-normal) var(--ease-out); }
.cart-bar.visible { transform:translateY(0); }
.cart-bar-left { display:flex; align-items:center; gap:var(--sp-3); }
.cart-bubble { width:32px; height:32px; border-radius:var(--radius-full); background:var(--clr-accent); color:#1a1a2e; font-weight:800; font-size:0.9rem; display:flex; align-items:center; justify-content:center; }
.cart-label { color:#fff; font-size:0.95rem; font-weight:600; }
.cart-total { color:#fff; font-size:1.1rem; font-weight:800; }
.cart-bar-cta { color:rgba(255,255,255,0.8); font-size:0.82rem; }

/* Cart modal */
.cart-modal { position:fixed; bottom:0; left:0; right:0; max-height:92vh; background:var(--clr-surface); border-radius:var(--radius-xl) var(--radius-xl) 0 0; z-index:900; transform:translateY(100%); transition:transform var(--dur-slow) var(--ease-out); display:flex; flex-direction:column; overflow:hidden; box-shadow:0 -8px 40px rgba(0,0,0,0.18); }
.cart-modal.open { transform:translateY(0); }
.cart-modal-handle { width:42px; height:5px; background:var(--clr-border); border-radius:var(--radius-full); margin:var(--sp-3) auto var(--sp-4); flex-shrink:0; }
.cart-modal-header { padding:0 var(--sp-5) var(--sp-4); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--clr-border); flex-shrink:0; }
.cart-close-btn { width:32px; height:32px; border-radius:var(--radius-full); background:var(--clr-surface-2); font-size:1.1rem; display:flex; align-items:center; justify-content:center; color:var(--clr-text-muted); transition:background var(--dur-fast); }
.cart-close-btn:hover { background:var(--clr-border); }
.cart-items { flex:1; overflow-y:auto; padding:var(--sp-3) var(--sp-5); }
.cart-item { display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-3) 0; border-bottom:1px solid var(--clr-surface-2); }
.cart-item:last-child { border-bottom:none; }
.cart-item-name { flex:1; font-weight:600; font-size:0.95rem; }
.cart-item-price { font-weight:700; color:var(--clr-primary); }
.cart-footer { padding:var(--sp-4) var(--sp-5); border-top:1px solid var(--clr-border); flex-shrink:0; }
.cart-total-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--sp-4); }
.cart-total-label { font-size:1rem; font-weight:600; color:var(--clr-text-muted); }
.cart-total-amt { font-size:1.5rem; font-weight:800; }

/* Table number input */
.table-input-wrap { background:var(--clr-bg); border-radius:var(--radius-lg); padding:var(--sp-4); margin-bottom:var(--sp-4); }
.table-input-label { font-size:0.9rem; font-weight:700; margin-bottom:var(--sp-2); display:flex; align-items:center; gap:var(--sp-2); }
.table-input-label .req { color:var(--clr-new); }
.table-number-input { width:100%; padding:var(--sp-3) var(--sp-4); border:2px solid var(--clr-border); border-radius:var(--radius-md); font-size:1.1rem; font-weight:700; text-align:center; color:var(--clr-text); transition:border-color var(--dur-fast),box-shadow var(--dur-fast); }
.table-number-input:focus { border-color:var(--clr-primary); box-shadow:0 0 0 3px rgba(99,102,241,0.15); }
.table-number-input.error { border-color:var(--clr-new); }
.table-error-msg { font-size:0.8rem; color:var(--clr-new); margin-top:var(--sp-1); display:none; }
.table-error-msg.show { display:block; }

/* Order success */
.order-success { text-align:center; padding:var(--sp-16) var(--sp-6); display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); animation:fadeIn var(--dur-slow) var(--ease-out); }
.success-icon { width:80px; height:80px; border-radius:var(--radius-full); background:hsl(142,60%,92%); display:flex; align-items:center; justify-content:center; font-size:2.5rem; animation:popIn 0.5s var(--ease-spring); }
@keyframes popIn { from{transform:scale(0)} to{transform:scale(1)} }
.success-title { font-size:1.4rem; font-weight:700; color:var(--clr-ready); }
.success-msg { color:var(--clr-text-muted); }

/* Empty / no results */
.empty-state { text-align:center; padding:var(--sp-16) var(--sp-6); color:var(--clr-text-muted); }
.empty-state-icon { font-size:3rem; margin-bottom:var(--sp-3); }