/* Magic Shop — menu-mobile.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold: #c9a227; --gold-light: #e8c45a; --gold-dim: #8a6b14;
  --purple-deep: #0c0618; --purple-mid: #1a0933; --purple-glow: #7B3FA0;
  --neon: #cc44ff; --text-light: #f0e8d0; --text-muted: #a89060;
  --border-gold: rgba(201,162,39,0.25); --radius: 14px;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  background: var(--purple-deep); color: var(--text-light);
  min-height: 100vh; overflow-x: hidden;
}

/* ── Stars ── */
.stars-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.star {
  position: absolute; border-radius: 50%;
  background: rgba(240,230,200,0.8);
  animation: twinkle ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: 0.1; } to { opacity: 0.9; } }

/* ── Header ── */
.menu-header {
  position: relative; z-index: 2;
  text-align: center;
  padding: 2.5rem 1.5rem 1.5rem;
  background: linear-gradient(180deg, rgba(20,5,40,0.98) 0%, rgba(12,6,24,0.9) 100%);
  border-bottom: 1px solid var(--border-gold);
}
.header-moon { font-size: 2.2rem; margin-bottom: 0.4rem; animation: sway 5s ease-in-out infinite; display: block; }
@keyframes sway { 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(5deg)} }

.header-brand {
  font-family: 'UnifrakturMaguntia', serif; font-weight: 400;
  font-size: 2.6rem; line-height: 1;
  background: linear-gradient(180deg,#f5e07a 0%,#e8c45a 25%,#c9a227 50%,#a07c10 70%,#c9a227 85%,#f0d060 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 16px rgba(201,162,39,0.4));
}
.header-sub {
  font-family: 'Cinzel', serif; font-size: 0.72rem;
  letter-spacing: 0.3em; color: var(--gold); margin-top: 0.3rem; opacity: 0.9;
}
.header-tagline {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 0.82rem; color: var(--text-muted); margin-top: 0.6rem; letter-spacing: 0.05em;
}

/* ── Tabs ── */
.tab-nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; overflow-x: auto; gap: 0;
  background: rgba(10,4,24,0.97);
  border-bottom: 1px solid var(--border-gold);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar { display: none; }

.tab-btn {
  flex: 1; min-width: 80px;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-muted); font-family: 'Cinzel', serif;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.9rem 0.5rem; cursor: pointer; transition: all 0.25s; white-space: nowrap;
}
.tab-btn:hover { color: var(--gold-light); }
.tab-btn.active {
  color: var(--gold); border-bottom-color: var(--gold);
  background: rgba(201,162,39,0.06);
}

/* ── Menu body ── */
.menu-body { position: relative; z-index: 2; padding: 1rem 1rem 6rem; }

.menu-tab { display: none; animation: fadeIn 0.3s ease; }
.menu-tab.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.tab-intro {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 0 0.75rem;
  border-bottom: 1px solid var(--border-gold);
  margin-bottom: 0.75rem;
}
.tab-icon { font-size: 1.4rem; }
.tab-intro p { font-style: italic; font-size: 0.88rem; color: var(--text-muted); line-height: 1.4; }

/* ── Menu items ── */
.menu-item {
  padding: 1rem 0.25rem;
  border-bottom: 1px solid rgba(201,162,39,0.08);
  animation: cardIn 0.4s ease both;
}
.menu-item:last-child { border-bottom: none; }
@keyframes cardIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.item-top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.5rem; margin-bottom: 0.3rem;
}
.item-name {
  font-family: 'Cinzel', serif; font-size: 0.95rem; font-weight: 600;
  color: var(--text-light); letter-spacing: 0.03em; line-height: 1.3;
}
.item-price {
  font-family: 'Cinzel', serif; font-size: 0.9rem; font-weight: 700;
  color: var(--gold); flex-shrink: 0;
}
.item-desc {
  font-style: italic; font-size: 0.85rem;
  color: var(--text-muted); line-height: 1.5;
}

/* ── Order bar (futura) ── */
.order-bar {
  position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  z-index: 20; background: var(--purple-glow);
  border: 1px solid rgba(201,162,39,0.4); border-radius: 50px;
  padding: 0.8rem 2rem; cursor: pointer;
  box-shadow: 0 4px 24px rgba(123,63,160,0.5);
}
.order-bar-inner { display: flex; align-items: center; gap: 0.6rem; }
.order-text { font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 0.1em; color: #fff; }
.order-badge {
  background: var(--gold); color: #000; border-radius: 50%;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-size: 0.7rem; font-weight: 700;
}

/* ── Footer ── */
.menu-footer {
  position: relative; z-index: 2;
  text-align: center; padding: 2rem 1rem 3rem;
  border-top: 1px solid var(--border-gold);
  background: rgba(5,2,16,0.8);
}
.footer-divider { color: var(--gold); font-size: 0.8rem; margin-bottom: 1rem; letter-spacing: 0.5em; opacity: 0.6; }
.footer-address { font-family: 'Cinzel', serif; font-size: 0.75rem; color: var(--gold); letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.footer-note { font-style: italic; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 1rem; }
.footer-back {
  font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--text-muted); text-decoration: none;
  border-bottom: 1px solid var(--border-gold); padding-bottom: 2px;
}
.footer-back:hover { color: var(--gold); }

/* ── S ibrida IM Fell English nel menù mobile ── */
.mobile-s {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 1.12em;
  display: inline-block;
  vertical-align: baseline;
  line-height: 1;
}