:root {
  --bg-dark: #0d0f12;
  --bg-light: #f6f6f4;
  --text-dark: #0f1115;
  --text-light: #ffffff;
  --text-muted: #9fa4ad;
  --accent: #c9a14a; /* 高级金色点缀 */
  --radius: 18px;
  --max-width: 1200px;
}

/* Reset */
* { box-sizing: border-box; margin:0; padding:0;}
body { font-family:'Inter',sans-serif; background:var(--bg-light); color:var(--text-dark); line-height:1.7; padding-top:72px; }

/* ---------------- NAV ---------------- */
.site-header { position: fixed; top:0; width:100%; z-index:9998; background: rgba(8,8,8,0.85); backdrop-filter: blur(10px); border-bottom:1px solid rgba(255,215,150,0.12);}
.nav-container { max-width: var(--max-width); margin:auto; padding:14px 24px; display:flex; justify-content:space-between; align-items:center;}
.nav a { margin-left:28px; text-decoration:none; font-weight:500; color:#eee; position:relative;}
.nav a.active { color:#d62828;}
.nav a.active::after { content:""; position:absolute; bottom:-6px; left:0; width:100%; height:2px; background:linear-gradient(90deg,#d62828,#fcbf49);}

/* ---------------- HERO ---------------- */
.hero-section { min-height:100vh; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.75)), url("../images/hero.jpg") center/cover no-repeat; color:var(--text-light); display:flex; flex-direction:column;}
.hero-text { max-width: var(--max-width); margin:auto; padding:0 24px 80px;}
.hero-text h1 { font-family:'Playfair Display',serif; font-size:clamp(2.6rem,5vw,4rem); line-height:1.2; margin-bottom:24px;}
.hero-text p { max-width:520px; font-size:1.05rem; color:rgba(255,255,255,.8); margin-bottom:40px;}

/* Open Status */
.open-status { display:inline-block; margin-bottom:24px; padding:6px 14px; border-radius:12px; font-weight:600; font-size:.95rem; color:#fff; background:#999; transition: background .3s ease, transform .3s ease;}
.open-status.open { background:#2ecc71; animation: pulseOpen 2s infinite;}
.open-status.closed { background:#e74c3c;}
@keyframes pulseOpen {0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}

/* Buttons */
.btn-main, .btn-secondary { display:inline-block; padding:14px 34px; border-radius:999px; font-size:.9rem; letter-spacing:.12em; margin-right:16px;}
.btn-main { background:var(--accent); color:#000;}
.btn-secondary { border:1px solid rgba(255,255,255,.5); color:#fff;}
.btn-main:hover{ filter:brightness(1.1);}
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent);}

/* Sections */
section{ max-width:var(--max-width); margin:auto; padding:120px 24px;}
.section-title{ font-family:'Playfair Display',serif; font-size:2.2rem; margin-bottom:48px; text-align:center;}

/* About */
.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start; /* 左右顶部对齐 */
}

.about-image img {
  width: 100%;
  border-radius: 18px;
  object-fit: cover;
}

.about-text h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  margin-bottom: 16px;
}

.about-text h3 {
  font-size: 1.2rem;
  margin-top: 12px;
  margin-bottom: 6px;
}

.about-text p {
  color: #555;
  font-size: 1.05rem;
  margin-bottom: 6px;
}

/* 节假日信息 */
.holiday-hours h3 {
  margin-top: 12px;
  margin-bottom: 4px;
  font-weight: 600;
}


/* Menu */
.menu-section{ background:var(--bg-light);}
.menu-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:32px;}
.menu-card{ overflow:hidden; border-radius:var(--radius); background:#fff; transition:transform .4s ease, box-shadow .4s ease;}
.menu-card img{ width:100%; height:260px; object-fit:cover;}
.menu-card h3{ padding:18px; font-size:1.05rem; text-align:center; letter-spacing:.08em;}
.menu-card:hover{ transform:translateY(-8px); box-shadow:0 30px 60px rgba(0,0,0,.12);}

/* Gallery */
.gallery-section{ background:#fff;}
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px;}
.gallery-grid img{ width:100%; height:280px; object-fit:cover; border-radius:var(--radius);}

/* Contact */
.contact-section{ background:var(--bg-dark); color:var(--text-light); text-align:center;}
.contact-section p{ color:rgba(255,255,255,.8); margin-top:16px;}
.contact-info{ margin-top:24px; letter-spacing:.08em;}

/* Footer */
.footer-section{ background:#07090c; color:rgba(255,255,255,.5); text-align:center; padding:36px 24px; font-size:.85rem;}

/* Floating Online Order Button */
.order-float{ position:fixed; right:24px; bottom:24px; z-index:9999; display:flex; align-items:center; gap:10px; background:linear-gradient(135deg,#d62828,#8b0000); color:#fff; padding:14px 22px; border-radius:999px; font-weight:600; text-decoration:none; box-shadow:0 0 0 rgba(214,40,40,.7); animation:pulse 2.5s infinite; opacity:1;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(214,40,40,.6);}70%{box-shadow:0 0 0 18px rgba(214,40,40,0);}100%{box-shadow:0 0 0 0 rgba(214,40,40,0);}}
.order-float .order-text{ display:inline; }
@media(max-width:768px){ .order-text{ display:none; } .order-float::after{ content:"Tap to Order"; font-size:14px; font-weight:600; } }

/* Scroll Fade Anim */
.fade-init{ opacity:0; transform:translateY(40px); transition:opacity 1s ease, transform 1s ease; }
.is-visible{ opacity:1; transform:translateY(0); }

/* Responsive */
@media (max-width: 900px){ .about-content{ grid-template-columns:1fr;} .nav { display:none; } section{ padding:90px 24px; } }



/* Google Map */
.map-container {
  margin-top: 24px;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}

.map-directions {
  margin-top: 16px;
  text-align: center;
}

.map-directions .btn-main {
  background: linear-gradient(135deg,#d62828,#8b0000);
  color: #fff;
  padding: 12px 28px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.map-directions .btn-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(214,40,40,0.35);
}

/* 响应式 */
@media (max-width: 768px) {
  .map-container iframe { height: 300px; }
  .map-directions .btn-main { font-size: 14px; padding: 10px 22px; }
}

