/* zanziBAR Lounge & Coffe - Posh Art-Deco Inspired (RO) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  /* Core Palette */
  --green-deep: #0a3323;
  --green-dark: #0f4130;
  --maroon: #4a0e15;
  --maroon-dark: #360911;
  --gold: #d4af37;
  --gold-soft: #e2c86a;
  --cream: #f8f4e3;
  --charcoal: #1a1a1a;
  --ink: #0c0c0c;
  --text-main: #f8f4e3;
  --text-soft: #dcd5c1;

  --shadow-sm: 0 8px 24px rgba(0,0,0,0.14);
  --shadow-md: 0 14px 40px rgba(0,0,0,0.22);
  --shadow-lg: 0 24px 70px rgba(0,0,0,0.30);
  --glow-gold: 0 0 42px rgba(212,175,55,0.35);

  /* Button accents pulled from example image */
  --btn-ink: #1f2220;
  --btn-maroon: #45151f;
  --btn-gold: #d4af37;
  --btn-gold-soft: #e2c86a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  background: linear-gradient(180deg, #0a3323 0%, #0f4130 20%, #0a3323 40%, #0b1010 100%);
  color: var(--text-main);
  line-height: 1.65;
  font-size: 16px;
}

h1,h2,h3,h4,h5,h6 { font-family: 'Playfair Display', Georgia, serif; line-height: 1.2; }

/* NAV */
.zanzibar-nav {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  background: rgba(10,51,35,0.82);
  border-bottom: 1px solid rgba(212,175,55,0.28);
  backdrop-filter: blur(18px) saturate(160%);
  transition: all .3s ease;
  overflow:hidden;
}
.zanzibar-nav::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,51,35,0.8) 0%, rgba(69,21,31,0.45) 60%, rgba(10,10,10,0.7) 100%),
    url('/images/1000006960.jpg') center/cover no-repeat;
  filter: saturate(1.15) brightness(0.75);
  opacity: 0.55;
}
.nav-container { max-width: 1500px; margin:0 auto; padding: 0 3rem; height: 90px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap: 1rem; text-decoration:none; }
.nav-logo img { height:56px; width:auto; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45)); }
.nav-brand { color: var(--gold); letter-spacing: 2px; font-size: 1.4rem; font-weight: 700; text-transform: uppercase; }
.nav-menu { list-style:none; display:flex; gap: 2.5rem; align-items:center; }
.nav-menu a {
  color: var(--cream);
  text-decoration:none;
  font-size: 0.9rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 6px;
  transition: all .25s ease;
}
.nav-menu a::after {
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background: linear-gradient(90deg, var(--gold), var(--maroon));
  transform: scaleX(0); transform-origin:left;
  transition: transform .25s ease;
}
.nav-menu a:hover { color: var(--gold-soft); }
.nav-menu a:hover::after { transform: scaleX(1); }

/* Art-Deco CTA in nav */
.nav-menu a.nav-cta {
  padding: 0.9rem 1.9rem !important;
  padding-bottom: 0;
  color: var(--cream) !important;
  border: 1px solid rgba(212,175,55,0.65);
  font-weight: 700;
  letter-spacing: 1.6px;
  box-shadow: var(--shadow-md);
  background:
    linear-gradient(135deg, rgba(212,175,55,0.28), rgba(69,21,31,0.55)),
    linear-gradient(180deg, rgba(31,34,32,0.95), rgba(10,10,10,0.85));
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.nav-menu a.nav-cta::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(900px 220px at -20% 40%, rgba(255,255,255,0.25), transparent 45%),
    linear-gradient(90deg, rgba(212,175,55,0.12), transparent 35%, rgba(212,175,55,0.12));
  opacity: .7;
}
.nav-menu a.nav-cta::after{
  content:"";
  position:absolute; inset: 3px; z-index:0;
  border: 1px solid rgba(226,200,106,0.45);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  transform: none;
  transition: opacity .25s ease;
}
.nav-menu a.nav-cta > * { position:relative; z-index:1; }
.nav-menu a.nav-cta:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: var(--shadow-lg), var(--glow-gold); }

/* Mobile toggle */
.menu-toggle {
  display:none;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(212,175,55,0.45);
  width: 54px;
  height: 54px;
  border-radius: 999px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-direction:column;
}
.menu-toggle::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(500px 160px at 30% 0%, rgba(255,255,255,0.22), transparent 55%),
    url('/images/1000006947.jpg') center/cover no-repeat;
  filter: saturate(1.1) brightness(0.7);
  opacity: .35;
}
.menu-toggle span { width:26px; height:2px; background: var(--gold); display:block; transition: transform .25s ease, opacity .25s ease; transform-origin: center; }
.menu-toggle.active span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.menu-toggle.active span:nth-child(2){ opacity:0; }
.menu-toggle.active span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* HERO */
.zanzibar-hero {
  margin-top: 90px;
  min-height: 90vh;
  background:
    linear-gradient(135deg, rgba(10,51,35,0.82) 0%, rgba(74,14,21,0.78) 60%, rgba(10,10,10,0.82) 100%),
    url('/images/1000006980.png') center/cover;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding: 6rem 2rem; position:relative;
  overflow:hidden;
}
.hero-content { max-width: 1050px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:0.65rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(212,175,55,0.35);
  padding: 0.6rem 1.1rem;
  color: var(--gold);
  letter-spacing: 1.2px; text-transform: uppercase;
  font-size: 0.78rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.hero-title {
  margin-top: 1.6rem;
  font-size: clamp(3.4rem, 7vw, 6rem);
  color: var(--gold);
  letter-spacing: -0.5px;
  text-shadow: 0 10px 42px rgba(0,0,0,0.45);
}
.hero-subtitle {
  margin: 1.4rem auto 2.4rem;
  max-width: 780px;
  font-size: 1.08rem;
  color: var(--text-soft);
  line-height: 1.8;
}
.hero-meta { display:flex; justify-content:center; gap:1.5rem; color: var(--text-soft); font-size:0.95rem; letter-spacing:0.5px; flex-wrap:wrap; }
.hero-buttons { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }

/* Elegant buttons */
.btn-primary, .btn-secondary {
  padding: 1rem 2.4rem;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration:none;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  border:none;
  cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  font-family: 'Montserrat', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  position: relative;
  overflow: hidden;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
.btn-primary {
  background:
    linear-gradient(135deg, rgba(212,175,55,0.32), rgba(69,21,31,0.68)),
    linear-gradient(180deg, rgba(31,34,32,0.96), rgba(10,10,10,0.86));
  color: var(--cream);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(212,175,55,0.75);
}
.btn-primary::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1200px 220px at -20% 45%, rgba(255,255,255,0.22), transparent 45%),
    linear-gradient(90deg, rgba(212,175,55,0.10), transparent 35%, rgba(212,175,55,0.10)),
    url('/images/1000006947.jpg') center/cover no-repeat;
  mix-blend-mode: overlay;
  opacity: .20;
  transition: opacity .25s ease, transform .25s ease;
}
.btn-primary::after{
  content:""; position:absolute; inset: 4px; z-index:0;
  border: 1px solid rgba(226,200,106,0.45);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.btn-primary > * { position:relative; z-index:1; }
.btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg), var(--glow-gold); }
.btn-primary:hover::before{ opacity:.32; transform: scale(1.02); }

.btn-secondary {
  background: linear-gradient(180deg, rgba(12,12,12,0.38), rgba(12,12,12,0.12));
  color: var(--cream);
  border: 1px solid rgba(212,175,55,0.55);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}
.btn-secondary::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1000px 240px at 20% 0%, rgba(255,255,255,0.18), transparent 50%),
    url('/images/1000006948.jpg') center/cover no-repeat;
  filter: saturate(1.05) brightness(0.72);
  opacity: .22;
  transition: opacity .25s ease;
}
.btn-secondary::after{
  content:""; position:absolute; inset: 4px; z-index:0;
  border: 1px solid rgba(226,200,106,0.28);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.btn-secondary > * { position:relative; z-index:1; }
.btn-secondary:hover { transform: translateY(-3px); box-shadow: var(--shadow-md), 0 0 26px rgba(212,175,55,0.18); border-color: rgba(212,175,55,0.8); }
.btn-secondary:hover::before { opacity: .30; }

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.nav-menu a.nav-cta:focus-visible,
.tab-btn:focus-visible,
.menu-toggle:focus-visible {
  outline: 2px solid rgba(226,200,106,0.8);
  outline-offset: 3px;
}

/* SECTIONS */
.section { padding: 6.5rem 2rem; position: relative; }
.section-alt { background: linear-gradient(180deg, rgba(69,21,31,0.92) 0%, rgba(26,26,26,0.92) 100%); color: var(--cream); }
.container { max-width: 1450px; margin: 0 auto; }
.section-header { text-align:center; margin-bottom: 3.5rem; }
.section-title { font-size: clamp(2.2rem, 4vw, 3.4rem); color: var(--gold); }
.section-subtitle { max-width: 820px; margin: 1rem auto 0; color: var(--text-soft); font-size: 1rem; line-height: 1.8; }

/* Tabs */
.tabs { display:flex; gap: 1rem; justify-content:center; margin-bottom: 2rem; flex-wrap: wrap; }
.tab-btn {
  padding: 0.85rem 1.5rem;
  border: 1px solid rgba(212,175,55,0.35);
  background: linear-gradient(180deg, rgba(31,34,32,0.55), rgba(10,10,10,0.2));
  color: var(--cream);
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .25s ease;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.tab-btn.active, .tab-btn:hover {
  background:
    linear-gradient(135deg, rgba(212,175,55,0.28), rgba(69,21,31,0.60)),
    linear-gradient(180deg, rgba(31,34,32,0.95), rgba(10,10,10,0.85));
  border-color: rgba(212,175,55,0.65);
  box-shadow: var(--shadow-sm), 0 0 22px rgba(212,175,55,0.16);
}
.tab-panel { display:none; }
.tab-panel.active { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 2rem; }

/* Menu item photo cards */
.menu-item { background:#0f4130; border:1px solid rgba(212,175,55,0.18); box-shadow: var(--shadow-sm); transition: all .35s ease; overflow:hidden; position:relative; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
.menu-item:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.menu-item.photo-skin::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(14,14,14,0.35) 0%, rgba(10,10,10,0.78) 100%),
    var(--bg);
  background-size: cover; background-position: center;
  opacity:.92;
}
.menu-item .menu-item-content, .menu-item .menu-item-header, .menu-item .menu-item-description, .menu-item .menu-item-tags { position:relative; z-index:1; }
.menu-item-content { padding: 1.8rem; }
.menu-item-header { display:flex; justify-content:space-between; align-items:flex-start; gap: 1rem; margin-bottom: 1rem; border-bottom:1px solid rgba(255,255,255,0.08); padding-bottom: 0.8rem; }
.menu-item-title { font-size: 1.1rem; color: var(--gold); }
.menu-item-price { font-family: 'Playfair Display', serif; font-size: 1.35rem; color: var(--cream); }
.menu-item-description { color: var(--text-soft); line-height: 1.65; }
.menu-item-tags { display:flex; gap:0.5rem; flex-wrap:wrap; margin-top: 0.8rem; }
.tag { padding: 0.35rem 0.9rem; background: rgba(17,17,17,0.85); color: var(--gold); font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; }

/* CATEGORY CARDS with images */
.category-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.8rem; }
.category-card {
  background: #0f4130;
  border: 1px solid rgba(212,175,55,0.18);
  box-shadow: var(--shadow-sm);
  transition: all .35s ease;
  overflow:hidden;
  position:relative;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}
.category-card::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(212,175,55,0.10), rgba(69,21,31,0.16));
  opacity:0; transition: opacity .35s ease;
}
.category-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: rgba(212,175,55,0.35); }
.category-card:hover::before { opacity:1; }
.category-media{
  position:relative;
  height: 180px;
  overflow:hidden;
  border-bottom: 1px solid rgba(212,175,55,0.18);
}
.category-media img{
  width:100%; height:100%; object-fit: cover;
  filter: saturate(0.98) contrast(1.12) brightness(0.86);
  transform: scale(1.04);
}
.category-media::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, rgba(212,175,55,0.16), rgba(69,21,31,0.30)),
    radial-gradient(900px 220px at 20% 0%, rgba(255,255,255,0.20), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
  opacity: .72;
}
.category-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,10,10,0.18) 0%, rgba(10,10,10,0.72) 100%);
}
.category-badge{
  position:absolute;
  left: 14px;
  bottom: 14px;
  width: 54px;
  height: 54px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--cream);
  border: 1px solid rgba(212,175,55,0.7);
  background:
    linear-gradient(135deg, rgba(212,175,55,0.22), rgba(69,21,31,0.58)),
    linear-gradient(180deg, rgba(31,34,32,0.95), rgba(10,10,10,0.85));
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.category-badge i{ font-size: 1.25rem; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45)); }
.category-content { padding: 2rem 1.8rem 2.3rem; text-align:center; position:relative; z-index:1; color: var(--cream); }
.category-title { font-size: 1.35rem; color: var(--gold); margin-bottom: 0.75rem; }
.category-description { color: var(--text-soft); font-size: 0.98rem; line-height: 1.7; }

/* Info cards */
.info-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.info-card { background: rgba(12,12,12,0.9); border: 1px solid rgba(212,175,55,0.18); padding: 2.5rem 2rem; text-align:center; box-shadow: var(--shadow-sm); transition: all .3s ease; color: var(--cream); position:relative; overflow:hidden; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
.info-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.info-card.photo-skin::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(14,14,14,0.4) 0%, rgba(10,10,10,0.8) 100%),
    var(--bg);
  background-size: cover; background-position: center; filter: saturate(1.1);
}
.info-card > * { position:relative; z-index:1; }
.info-icon { width: 88px; height: 88px; margin: 0 auto 1.6rem; border-radius: 18px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--maroon), var(--gold)); color: #111; box-shadow: var(--shadow-md); }
.info-title { font-size: 1.25rem; color: var(--gold); margin-bottom: 0.6rem; }
.info-text { color: var(--text-soft); }

/* Mood gallery */
.mood-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.mood-card { position:relative; overflow:hidden; box-shadow: var(--shadow-md); border: 1px solid rgba(212,175,55,0.18); }
.mood-card img { width:100%; height: 100%; object-fit: cover; filter: brightness(0.9); transition: transform .4s ease, filter .4s ease; }
.mood-card::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 100%); opacity:0.55; transition: opacity .35s ease; }
.mood-card:hover img { transform: scale(1.05); filter: brightness(1.02); }
.mood-card:hover::after { opacity:0.75; }
.mood-label { position:absolute; left:14px; bottom:14px; color: var(--cream); font-weight: 600; letter-spacing: 0.6px; }

/* FOOTER */
.zanzibar-footer { position:relative; background: linear-gradient(180deg, var(--charcoal) 0%, var(--ink) 100%); color: var(--text-soft); padding: 4.5rem 2rem 2rem; border-top: 1px solid rgba(212,175,55,0.2); overflow:hidden; }
.zanzibar-footer::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(26,26,26,0.65) 0%, rgba(12,12,12,0.9) 100%),
    url('/images/1000006963.jpg') center/cover no-repeat;
  filter: saturate(1.05);
}
.footer-content { max-width: 1450px; margin:0 auto; display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 3rem; margin-bottom: 3rem; position:relative; z-index:1; }
.footer-section h3 { color: var(--gold); margin-bottom: 1.4rem; letter-spacing: 1px; text-transform: uppercase; font-size: 1.05rem; }
.footer-logo { max-width: 180px; margin-bottom: 1.6rem; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35)); }
.footer-section p, .footer-links li { color: rgba(233,227,218,0.82); line-height: 1.7; }
.footer-links { list-style:none; }
.footer-links a { color: rgba(233,227,218,0.82); text-decoration:none; }
.footer-links a:hover { color: var(--gold); }
.social-links { display:flex; gap:0.8rem; }
.social-link { width:44px; height:44px; border-radius:50%; border:1px solid rgba(212,175,55,0.35); display:flex; align-items:center; justify-content:center; color: var(--gold); }
.footer-bottom { border-top:1px solid rgba(212,175,55,0.15); padding-top: 1.6rem; text-align:center; color: rgba(233,227,218,0.7); position:relative; z-index:1; }

/* RESPONSIVE */
@media (max-width: 1100px) {
  .nav-container { padding: 0 1.5rem; }
  .nav-menu {
    position: fixed; top:90px; left:0; right:0;
    background: rgba(10,51,35,0.96);
    flex-direction: column; padding: 2.5rem 1.5rem;
    transform: translateX(-100%);
    transition: transform .3s ease;
    box-shadow: var(--shadow-lg);
  }
  .nav-menu.active { transform: translateX(0); }
  .menu-toggle { display:flex; }
}
@media (max-width: 640px) {
  .zanzibar-hero { min-height: 78vh; padding: 4rem 1.4rem; }
  .hero-buttons { flex-direction: column; }
  .btn-primary, .btn-secondary { width: 100%; }
  .section { padding: 4.5rem 1.4rem; }
}

/* ANIMATIONS */
@keyframes fadeInUp { from { opacity:0; transform: translateY(24px); } to { opacity:1; transform: translateY(0); } }
.animate-fade-in-up { animation: fadeInUp .7s ease forwards; }

/* UTIL */
.text-center { text-align:center; }
.mb-2 { margin-bottom: 2rem; }