/* ── Custom styles beyond Tailwind ── */

* { -webkit-tap-highlight-color: transparent; }
body { background: #0a0704; color: #fff; font-family: 'Inter', system-ui, sans-serif; overflow-x: hidden; }

/* Category badge colours */
[data-cat="beer"]     { background: #78350f; color: #fde68a; }
[data-cat="wine"]     { background: #4c1d95; color: #ddd6fe; }
[data-cat="spirits"]  { background: #1e3a5f; color: #bae6fd; }
[data-cat="cocktail"] { background: #134e4a; color: #99f6e4; }
[data-cat="soft"]     { background: #064e3b; color: #6ee7b7; }

/* Active nav */
.active-nav { color: #d4a017 !important; }
.active-nav svg { stroke: #d4a017; }

/* Active category filter */
.active-cat { background: #d4a017 !important; color: #000 !important; border-color: #d4a017 !important; }

/* Drink card hover lift */
.drink-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(212,160,23,0.15); }
.drink-card { transition: transform 0.2s, box-shadow 0.2s; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #d4a017; border-radius: 4px; }

/* Age gate backdrop */
#age-gate { backdrop-filter: blur(16px); }

/* Custom spinner */
.spinner {
  width: 32px; height: 32px;
  border: 3px solid #333;
  border-top-color: #d4a017;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Offline banner */
#offline-banner { background: linear-gradient(90deg, #78350f, #92400e); }

/* Bottom nav */
#bottom-nav { box-shadow: 0 -4px 24px rgba(0,0,0,0.5); }

/* Smooth page transitions */
.page { animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Line clamp utilities */
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Gold gradient text */
.gold-text {
  background: linear-gradient(135deg, #d4a017, #f0c040, #b8860b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Frosted glass cards */
.glass {
  background: rgba(26, 17, 10, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 160, 23, 0.15);
}

/* Pulse for badge */
@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
.pulse { animation: pulse-badge 0.3s ease; }