/* ===== UI UX Pro Max Design System ===== */
/* Product: Restaurant/Food Service · Style: Vibrant & Block-based + Soft UI Evolution */
/* Color: Appetizing Orange #FF6B35 + Fresh Green #22C55E + Warm Cream #FFF7ED */
/* Font: Playfair Display (headings) + Inter (body) — with Chinese system fallback */

/* ===== CSS Variables ===== */
:root {
  --primary: #FF6B35;
  --primary-hover: #e85a2a;
  --primary-light: #fff5f0;
  --secondary: #22C55E;
  --secondary-hover: #16A34A;
  --accent: #2563EB;
  --bg: #FFFCF9;
  --bg-alt: #FFF7ED;
  --bg-card: #FFFFFF;
  --text: #1E293B;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;
  --border: #E2E8F0;
  --border-light: #F1F5F9;
  --danger: #EF4444;
  --success: #22C55E;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.15);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --transition: 200ms ease;
  --transition-slow: 300ms ease;
  --font-heading: 'Georgia', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Segoe UI', sans-serif;
  --nav-height: 64px;
  --max-width: 1100px;
  --header-bg: rgba(255, 252, 249, 0.95);
  --hero-overlay: linear-gradient(135deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25));
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #FF8F5E;
    --primary-hover: #FF6B35;
    --primary-light: #2D1F18;
    --bg: #0F0F12;
    --bg-alt: #1A1A20;
    --bg-card: #1E1E26;
    --text: #E8E8EC;
    --text-secondary: #9CA3AF;
    --text-muted: #6B7280;
    --border: #2D2D35;
    --border-light: #22222A;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.5);
    --header-bg: rgba(15, 15, 18, 0.95);
    --hero-overlay: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(0,0,0,0.4));
  }
  .menu-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.5); }
  .page-hero { background: linear-gradient(135deg, #2D1F18, #3D2A20); }
}

/* ===== Reset ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition-slow), color var(--transition-slow);
}
::selection { background: var(--primary); color: #fff; }

/* Focus states (UI UX Pro Max: WCAG AA+) */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
button { border:none; background:none; cursor:pointer; font:inherit; color:inherit; }
input, select, textarea { font:inherit; }
.container { max-width:var(--max-width); margin:0 auto; padding:0 20px; }

/* ===== Typography ===== */
h1, h2, h3, h4, .logo, .hero-title { font-family: var(--font-heading); font-weight: 700; }
.section-title { font-size:2rem; font-weight:800; text-align:center; margin-bottom:8px; font-family:var(--font-heading); }
.section-desc { text-align:center; color:var(--text-secondary); font-size:15px; margin-bottom:40px; }

/* ===== Header ===== */
.header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--header-bg);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-light);
  transition: background var(--transition-slow);
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-height);
}
.logo { font-size:20px; font-weight:800; color:var(--primary); letter-spacing:-0.5px; font-family:var(--font-heading); }
.nav { display:flex; gap:20px; }
.nav-link { font-size:14px; font-weight:500; color:var(--text-secondary); transition:color var(--transition); padding:4px 0; position:relative; }
.nav-link::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:var(--primary); transform:scaleX(0); transition:transform var(--transition);
}
.nav-link:hover, .nav-link.active { color:var(--primary); }
.nav-link.active::after { transform:scaleX(1); }
.cart-btn {
  position:relative; font-size:20px; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:var(--primary-light); border-radius:50%;
  transition:all var(--transition); min-width:44px; min-height:44px;
}
.cart-btn:hover, .cart-btn:focus-visible { background:var(--primary); color:#fff; }
.cart-badge {
  position:absolute; top:-4px; right:-4px; background:var(--primary); color:#fff;
  font-size:11px; font-weight:700; min-width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-full); padding:0 4px;
  transition:transform var(--transition);
}
.cart-badge:not([style*="display: none"]) { animation: badgePop 300ms ease; }
@keyframes badgePop { 0%{transform:scale(0)} 60%{transform:scale(1.2)} 100%{transform:scale(1)} }
.menu-toggle { display:none; font-size:22px; min-width:44px; min-height:44px; }

/* ===== Hero (UI UX Pro Max: Hero-Centric) ===== */
.hero {
  min-height:100vh; background-size:cover; background-position:center;
  display:flex; align-items:center; padding:120px 0 80px;
  position:relative;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:var(--hero-overlay);
}
.hero-content { text-align:center; color:#fff; position:relative; z-index:1; }
.hero-title { font-size:clamp(2rem, 5vw, 3.25rem); font-weight:900; line-height:1.15; margin-bottom:16px; letter-spacing:-1px; }
.hero-desc { font-size:clamp(1rem, 2vw, 1.2rem); margin-bottom:32px; opacity:0.9; }

/* ===== Page Hero ===== */
.page-hero {
  background:linear-gradient(135deg, var(--primary), var(--primary-hover));
  color:#fff; padding:100px 0 50px; margin-top:var(--nav-height); text-align:center;
}
.page-hero h1 { font-size:clamp(1.5rem, 4vw, 2.25rem); margin-bottom:6px; font-family:var(--font-heading); }
.page-hero p { font-size:15px; opacity:0.9; }

/* ===== Buttons (UI UX Pro Max: 44px min touch target, hover/active states) ===== */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 32px; border-radius:var(--radius-full);
  font-size:15px; font-weight:600; transition:all var(--transition);
  text-decoration:none; cursor:pointer;
  min-height:48px; min-width:48px;
}
.btn-primary {
  background:var(--primary); color:#fff;
  box-shadow:0 4px 14px rgba(255,107,53,0.35);
}
.btn-primary:hover { background:var(--primary-hover); transform:translateY(-2px); box-shadow:0 6px 20px rgba(255,107,53,0.45); }
.btn-primary:active { transform:translateY(0) scale(0.98); }
.btn-outline { background:transparent; color:var(--primary); border:2px solid var(--primary); }
.btn-outline:hover { background:var(--primary); color:#fff; transform:translateY(-2px); }
.btn-outline:active { transform:translateY(0) scale(0.98); }
.btn-secondary { background:var(--secondary); color:#fff; }
.btn-secondary:hover { background:var(--secondary-hover); transform:translateY(-2px); }

/* ===== Sections ===== */
.section { padding:80px 0; }
.section-alt { background:var(--bg-alt); }

/* ===== Menu Grid (UI UX Pro Max: Bento Box Grid inspired) ===== */
.menu-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:24px;
}
.menu-card {
  background:var(--bg-card); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); border:1px solid var(--border-light);
  transition:all var(--transition-slow);
}
.menu-card:hover {
  transform:translateY(-6px); box-shadow:var(--shadow-lg);
}
.menu-img-wrap {
  width:100%; height:200px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  position:relative;
}
.menu-img-wrap .menu-img-emoji {
  font-size:56px; line-height:1; margin-bottom:6px;
  text-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.menu-img-wrap .menu-img-label {
  font-size:16px; font-weight:600; color:white;
  text-shadow:0 1px 4px rgba(0,0,0,0.2);
  font-family:var(--font-heading);
}
.menu-body { padding:16px 18px 18px; }
.menu-name { font-size:17px; font-weight:700; margin-bottom:4px; font-family:var(--font-heading); }
.menu-desc { font-size:13px; color:var(--text-muted); margin-bottom:10px; line-height:1.5; }
.menu-bottom { display:flex; align-items:center; justify-content:space-between; }
.menu-price { font-size:20px; font-weight:800; color:var(--primary); }
.menu-price small { font-size:13px; font-weight:500; color:var(--text-muted); }
.btn-add {
  padding:8px 18px; border-radius:var(--radius-full); background:var(--primary); color:#fff;
  font-size:13px; font-weight:600; transition:all var(--transition);
  min-height:36px;
}
.btn-add:hover { background:var(--primary-hover); transform:scale(1.05); }
.btn-add:active { transform:scale(0.95); }
.btn-add.added { background:var(--secondary); }
.btn-add.added::after { content:' ✓'; }
.btn-add.added:hover { background:var(--secondary-hover); transform:scale(1.05); }
.btn-add-group { display:flex; align-items:center; gap:4px; }
.btn-qty { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#e8f5e9; color:#2e7d32; font-size:15px; font-weight:700; transition:all var(--transition); min-width:40px; min-height:40px; }
.btn-qty:hover { background:var(--secondary); color:#fff; transform:scale(1.1); }

/* ===== Menu Category ===== */
.menu-category { margin-bottom:48px; }
.menu-cat-title { font-size:24px; font-weight:700; font-family:var(--font-heading); margin-bottom:20px; padding-bottom:10px; border-bottom:2px solid var(--primary); display:inline-block; }

/* ===== About (UI UX Pro Max: Soft UI Evolution cards) ===== */
.about-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:20px; }
.about-card {
  text-align:center; padding:36px 20px; background:var(--bg-card);
  border-radius:var(--radius-lg); border:1px solid var(--border-light);
  box-shadow:var(--shadow-sm); transition:all var(--transition-slow);
}
.about-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.about-icon { font-size:36px; margin-bottom:10px; display:block; }
.about-card h3 { font-size:17px; margin-bottom:6px; }
.about-card p { font-size:14px; color:var(--text-muted); }
.about-story { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.about-story-text h2 { font-size:28px; margin-bottom:14px; font-family:var(--font-heading); }
.about-story-text p { font-size:15px; color:var(--text-secondary); margin-bottom:10px; line-height:1.8; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.gallery-grid img { border-radius:var(--radius-md); transition:transform var(--transition-slow); }
.gallery-grid img:hover { transform:scale(1.03); }

/* ===== Contact ===== */
.contact-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:20px; }
.contact-card { text-align:center; padding:28px 20px; background:var(--bg-card); border-radius:var(--radius-lg); border:1px solid var(--border-light); transition:all var(--transition-slow); }
.contact-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.contact-icon { font-size:32px; margin-bottom:8px; display:block; }
.contact-card h3 { font-size:16px; margin-bottom:4px; }
.contact-card p { font-size:14px; color:var(--text-secondary); }
.contact-form-wrap { max-width:520px; margin:0 auto; }

/* ===== Cart Drawer (UI UX Pro Max: Glassmorphism overlay) ===== */
.cart-overlay {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.5); z-index:200;
  opacity:0; pointer-events:none; transition:opacity var(--transition-slow);
  backdrop-filter:blur(4px);
}
.cart-overlay.active { opacity:1; pointer-events:auto; }
.cart-drawer {
  position:fixed; top:0; right:0; bottom:0; width:380px; max-width:90vw;
  background:var(--bg-card); z-index:201; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform var(--transition-slow);
  box-shadow:-10px 0 40px rgba(0,0,0,0.15);
}
.cart-drawer.active { transform:translateX(0); }
.cart-header { display:flex; align-items:center; justify-content:space-between; padding:20px; border-bottom:1px solid var(--border); }
.cart-header h2 { font-size:18px; font-family:var(--font-heading); }
.cart-close { font-size:18px; color:var(--text-muted); min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; }
.cart-close:hover { color:var(--text); }
.cart-items { flex:1; overflow-y:auto; padding:12px 20px; }
.cart-empty { text-align:center; padding:60px 0; color:var(--text-muted); line-height:2; font-size:14px; }
.cart-item { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border-light); }
.cart-item-img { width:44px; height:44px; border-radius:var(--radius-sm); flex-shrink:0; }
.cart-item-emoji { flex-shrink:0; }
.cart-item-info { flex:1; }
.cart-item-name { font-size:14px; font-weight:600; }
.cart-item-price { font-size:13px; color:var(--primary); font-weight:600; }
.cart-item-qty { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.qty-btn { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bg-alt); font-size:13px; font-weight:600; transition:all var(--transition); min-width:44px; min-height:44px; }
.qty-btn:hover { background:var(--border); }
.qty-num { font-size:14px; font-weight:600; min-width:20px; text-align:center; }
.cart-item-remove { color:var(--text-muted); min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; transition:color var(--transition); }
.cart-item-remove:hover { color:var(--danger); }
.cart-footer { padding:14px 20px 20px; border-top:1px solid var(--border); }
.cart-total { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; font-size:15px; }
.cart-total-price { font-size:22px; font-weight:800; color:var(--primary); }
.btn-checkout { width:100%; justify-content:center; }

/* ===== Modal ===== */
.modal-overlay {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.5); z-index:300; backdrop-filter:blur(4px);
}
.modal {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--bg-card); border-radius:var(--radius-xl); width:480px; max-width:90vw;
  max-height:85vh; overflow-y:auto; z-index:301;
  box-shadow:var(--shadow-xl);
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--bg-card); z-index:1;
}
.modal-header h2 { font-size:18px; font-family:var(--font-heading); }
.modal-close { font-size:18px; color:var(--text-muted); min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; }
.modal-close:hover { color:var(--text); }
.order-form { padding:20px 24px 24px; }
.form-label { display:block; font-size:13px; font-weight:600; margin-bottom:4px; color:var(--text-secondary); }
.form-input {
  width:100%; padding:11px 14px; border:1px solid var(--border);
  border-radius:var(--radius-md); font-size:15px; margin-bottom:14px;
  background:var(--bg); color:var(--text);
  transition:border-color var(--transition);
}
.form-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(255,107,53,0.15); }
.form-textarea { resize:vertical; min-height:70px; }
.order-summary { background:var(--bg-alt); border-radius:var(--radius-md); padding:14px; margin-bottom:14px; font-size:14px; line-height:1.8; }
.order-summary strong { display:block; margin-bottom:6px; }
.btn-submit { width:100%; justify-content:center; }
.form-success { text-align:center; padding:50px 24px; }
.form-success .success-icon { font-size:50px; margin-bottom:12px; }
.form-success h3 { font-size:20px; margin-bottom:4px; }
.form-success p { color:var(--text-secondary); margin-bottom:14px; font-size:14px; }

/* ===== Order Tracking ===== */
.track-search { text-align:center; margin-bottom:20px; }
.track-card { background:var(--bg-card); border-radius:var(--radius-lg); padding:28px; border:1px solid var(--border-light); box-shadow:var(--shadow-sm); max-width:560px; margin:0 auto; }
.track-card h3 { font-size:18px; margin-bottom:2px; font-family:var(--font-heading); }
.track-time { font-size:13px; color:var(--text-muted); margin-bottom:14px; }
.track-items { font-size:14px; color:var(--text-secondary); margin-bottom:18px; line-height:1.8; }
.track-steps { position:relative; padding-left:40px; }
.track-steps::before { content:''; position:absolute; left:19px; top:12px; bottom:12px; width:2px; background:var(--border); }
.track-step { position:relative; padding-bottom:22px; }
.track-step:last-child { padding-bottom:0; }
.step-dot {
  position:absolute; left:-34px; top:4px;
  width:16px; height:16px; border-radius:50%;
  background:var(--border); border:3px solid var(--bg-card);
  box-shadow:0 0 0 2px var(--border); z-index:1;
}
.track-step.active .step-dot { background:var(--secondary); box-shadow:0 0 0 2px var(--secondary); }
.step-info strong { display:block; font-size:14px; color:var(--text); }
.step-info span { font-size:13px; color:var(--text-muted); }
.track-step.active .step-info strong { color:var(--secondary); }
.recent-orders { max-width:560px; margin:0 auto; }
.recent-order-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px; background:var(--bg-card); border-radius:var(--radius-md);
  border:1px solid var(--border-light); margin-bottom:8px;
  cursor:pointer; transition:all var(--transition);
  min-height:48px;
}
.recent-order-item:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.recent-order-id { font-weight:600; font-size:14px; }
.recent-order-status { font-size:12px; padding:4px 12px; border-radius:var(--radius-full); font-weight:500; }
.status-1 { background:#FFF3E0; color:#E65100; }
.status-2 { background:#FFF8E1; color:#F57F17; }
.status-3 { background:#E3F2FD; color:#1565C0; }
.status-4 { background:#E8F5E9; color:#2E7D32; }
@media (prefers-color-scheme: dark) {
  .status-1 { background:#3D2A1A; color:#FFB74D; }
  .status-2 { background:#3D3520; color:#FFD54F; }
  .status-3 { background:#1A2A3D; color:#64B5F6; }
  .status-4 { background:#1A3D2A; color:#81C784; }
}

/* ===== Footer ===== */
.footer { background:var(--text); color:var(--text-muted); text-align:center; padding:24px 0; font-size:13px; }

/* ===== Toast ===== */
.toast {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--text); color:#fff; padding:12px 28px;
  border-radius:var(--radius-full); font-size:14px; font-weight:500;
  z-index:999; opacity:0; pointer-events:none;
  transition:all var(--transition-slow);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== SVG Icons (UI UX Pro Max: SVG icons, no emoji) ===== */
.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.icon-lg { width:32px; height:32px; }
.icon-xl { width:40px; height:40px; }

/* ===== Animations (UI UX Pro Max: 200-300ms, GPU-accelerated) ===== */
@media (prefers-reduced-motion: no-preference) {
  .fade-up { opacity:0; transform:translateY(20px); transition:opacity 600ms ease, transform 600ms ease; }
  .fade-up.show { opacity:1; transform:translateY(0); }
  .menu-card { animation: cardIn 500ms ease backwards; }
  .menu-card:nth-child(1) { animation-delay:0ms; }
  .menu-card:nth-child(2) { animation-delay:80ms; }
  .menu-card:nth-child(3) { animation-delay:160ms; }
  .menu-card:nth-child(4) { animation-delay:240ms; }
  .menu-card:nth-child(5) { animation-delay:320ms; }
  .menu-card:nth-child(6) { animation-delay:400ms; }
  .menu-card:nth-child(7) { animation-delay:480ms; }
  .menu-card:nth-child(8) { animation-delay:560ms; }
  @keyframes cardIn {
    from { opacity:0; transform:translateY(24px); }
    to { opacity:1; transform:translateY(0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ===== Responsive ===== */
@media (max-width:768px) {
  .nav { display:none; }
  .nav.open { display:flex; flex-direction:column; position:fixed; top:var(--nav-height); left:0; right:0; background:var(--bg-card); padding:20px; border-bottom:1px solid var(--border); gap:14px; z-index:99; }
  .menu-toggle { display:flex; align-items:center; justify-content:center; }
  .hero-title { font-size:clamp(1.6rem, 8vw, 2.25rem); }
  .hero-desc { font-size:16px; }
  .section { padding:50px 0; }
  .section-title { font-size:1.5rem; }
  .about-story { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:1fr; }
  .modal { width:95vw; }
  .page-hero { padding:80px 0 36px; }
  .page-hero h1 { font-size:1.5rem; }
  .cart-drawer { width:100vw; }
}