/* ==========================================================================
   VERDUGO - Coctelería & Vermutería Nocturna
   Stylesheet: Editorial Luxury / Speakeasy Design System
   ========================================================================== */

:root {
  /* Color Palette: Nocturnal Speakeasy (Velvet Obsidian, Charcoal, Warm Amber & Linen) */
  --bg-deep: #060706;
  --bg-surface: #0d100e;
  --bg-surface-elevated: #131715;
  --bg-surface-card: #101412;
  --bg-glass: rgba(10, 13, 11, 0.88);
  --bg-glass-card: rgba(16, 20, 18, 0.65);

  /* Warm Atmospheric Accents (Subtle Cognac, Amber & Linen - No Gaudy Gold) */
  --accent-amber: #c4824e;
  --accent-amber-light: #df9e68;
  --accent-amber-dim: rgba(196, 130, 78, 0.12);
  --accent-linen: #e8e2d8;
  --accent-linen-muted: #c2bbb0;
  
  /* Herbal & Botanical Accents */
  --accent-sage: #5e7a68;
  --accent-sage-dim: rgba(94, 122, 104, 0.15);

  /* Neutrals & Text */
  --text-primary: #f2efe9;
  --text-secondary: #9ea59f;
  --text-muted: #6e7570;
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-focus: rgba(255, 255, 255, 0.18);
  --border-amber: rgba(196, 130, 78, 0.25);

  /* Fonts */
  --font-serif: "Playfair Display", Georgia, serif;
  --font-display: "Barlow Condensed", sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Radii & Transitions */
  --radius-outer: 1.25rem;
  --radius-inner: 0.95rem;
  --radius-pill: 9999px;
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Base Reset & Smooth Scroll */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  background-color: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-sans);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: var(--bg-deep);
  /* Atmospheric Candlelight & Velvet Night Vignette */
  background-image: 
    radial-gradient(ellipse 90% 40% at 50% 0%, rgba(196, 130, 78, 0.05), transparent 60%),
    radial-gradient(circle 700px at 85% 30%, rgba(94, 122, 104, 0.04), transparent 75%),
    radial-gradient(circle 600px at 15% 75%, rgba(15, 20, 17, 0.5), transparent 70%);
  background-attachment: fixed;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
}

/* Selection */
::selection {
  background-color: rgba(196, 130, 78, 0.25);
  color: #ffffff;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #060706;
}

::-webkit-scrollbar-thumb {
  background: #1e2520;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #344037;
}

/* Hide scrollbar for category horizontal nav */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================================================
   Typography Classes
   ========================================================================== */
.font-serif {
  font-family: var(--font-serif);
}

.font-display {
  font-family: var(--font-display);
}

.font-sans {
  font-family: var(--font-sans);
}

/* Subtle Editorial Glow (Understated Linen) */
.text-linen-gradient {
  background: linear-gradient(135deg, #ffffff 30%, #e8e2d8 80%, #c4baa9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   Double-Bezel Architecture & Cards (Haptic Feel)
   ========================================================================== */
.drink-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  padding: 4px;
  border-radius: var(--radius-outer);
  transition: transform 0.4s var(--ease-spring), border-color 0.3s ease, box-shadow 0.4s ease;
  cursor: pointer;
  outline: none;
}

.drink-card:hover,
.drink-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.9), 0 0 1px 1px rgba(255, 255, 255, 0.06);
}

.drink-card-inner {
  display: flex;
  gap: 1.15rem;
  padding: 0.95rem;
  background: var(--bg-surface-card);
  border-radius: var(--radius-inner);
  border: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  height: 100%;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

.drink-card:hover .drink-card-inner {
  background: #131715;
}

/* Hero Feature Card (Restrained Double Bezel) */
.hero-feature-card {
  position: relative;
  border-radius: 1.5rem;
  padding: 5px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(196, 130, 78, 0.12) 60%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.9);
  transition: transform 0.4s var(--ease-spring), border-color 0.4s ease, box-shadow 0.4s ease;
}

.hero-feature-card:hover {
  transform: translateY(-2px);
  border-color: rgba(196, 130, 78, 0.35);
  box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.95), 0 0 25px -5px rgba(196, 130, 78, 0.12);
}

.hero-feature-inner {
  background: #0d100e;
  border-radius: calc(1.5rem - 5px);
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  position: relative;
}

/* ==========================================================================
   Hero Showcase Carousel
   ========================================================================== */
.hero-carousel-track {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.hero-carousel-slide {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.hero-dot {
  transition: all 0.35s var(--ease-spring);
  cursor: pointer;
  outline: none;
}

.hero-dot.active {
  width: 1.5rem !important;
  background-color: var(--accent-amber) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   Catalog Kickers & Overlines (Editorial, Sobrio & Sin Pills)
   ========================================================================== */
.catalog-tag,
.badge-gold,
.badge-recommended {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-amber);
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.badge-botanical,
.badge-amber,
.catalog-tag-muted {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #a8b0a9;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.garnish-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  padding: 0.2rem 0.55rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   Navigation Glassmorphism & Tabs (Floating Island)
   ========================================================================== */
.nav-island {
  background: var(--bg-glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.9), 0 0 1px 1px rgba(255, 255, 255, 0.04);
}

.category-pill {
  position: relative;
  white-space: nowrap;
  padding: 0.5rem 1.05rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.25s var(--ease-spring);
  cursor: pointer;
}

.category-pill:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.category-pill.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   Interactive Buttons & Inputs
   ========================================================================== */
.btn-gold,
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.3s var(--ease-spring);
  cursor: pointer;
}

.btn-gold:hover,
.btn-primary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.btn-gold:active,
.btn-primary:active {
  transform: scale(0.98);
}

.btn-icon-bubble {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

/* ==========================================================================
   Modal Dialog & Backdrop
   ========================================================================== */
.modal-backdrop-blur {
  background: rgba(4, 5, 4, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.modal-container,
.modal-article {
  background: #0d100e;
  border-radius: var(--radius-outer);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 
    0 25px 60px -15px rgba(0, 0, 0, 0.98),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.modal-content-shell {
  background: #0d100e;
  border-radius: calc(var(--radius-outer) - 2px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Modal Animations */
@keyframes modalEnter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modalExit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}

@keyframes backdropEnter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes backdropExit {
  from { opacity: 1; }
  to { opacity: 0; }
}

.animate-modal-enter {
  animation: modalEnter 0.35s var(--ease-spring) forwards;
}

.animate-modal-exit {
  animation: modalExit 0.22s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.animate-backdrop-in {
  animation: backdropEnter 0.25s ease forwards;
}

.animate-backdrop-out {
  animation: backdropExit 0.2s ease forwards;
}

/* Fade Up Reveal */
.fade-up {
  animation: fadeUp 0.8s var(--ease-spring) forwards;
  opacity: 0;
  transform: translateY(24px);
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}