@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

:root {
  /* === COLORS === */
  --navy: #1B2A4A;
  --navy-deep: #0F1B33;
  --navy-light: #243556;
  --pink: #E91E8C;
  --pink-hover: #FF69B4;
  --pink-dark: #C4166F;
  --gold: #FFD700;
  --gold-end: #FFA500;
  
  /* === TEXT COLORS === */
  --text-dark: #2D2D2D;
  --text-heading: #1B2A4A;
  --text-sec: #555;
  --text-muted: #666;
  --text-light: #FAF6F0;
  --text-white: #FFF;
  --text-light-sec: #B0B8C8;
  
  /* === BACKGROUNDS === */
  --bg-white: #FFF;
  --bg-cream: #FAF6F0;
  --bg-light: #F5F5F5;
  
  /* === SHADOWS === */
  --shadow: 0 2px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
  
  /* === BORDERS & LAYOUT === */
  --radius: 12px;
  --max-width: 1200px;
  
  /* === SPACING === */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  
  /* === NEU: ERWEITERTE RUNDUNGEN === */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 50px;
  
  /* === NEU: ERWEITERTE SCHATTEN === */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg-extended: 0 16px 48px rgba(0, 0, 0, 0.16);
  --shadow-hover: 0 20px 40px rgba(27, 42, 74, 0.2);
  --shadow-glow-pink: 0 8px 24px rgba(233, 30, 140, 0.3);
  
  /* === NEU: TRANSITIONS === */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.2s var(--ease-out);
  --transition-medium: 0.3s var(--ease-out);
  
  /* === NEU: GRADIENTS === */
  --gradient-pink: linear-gradient(135deg, #E91E8C, #FF6B6B);
  --gradient-night: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  --gradient-overlay: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
  
  /* === NEU: GENRE-GRADIENTS === */
  --genre-techno: linear-gradient(135deg, #7C3AED, #4338CA);
  --genre-house: linear-gradient(135deg, #0891B2, #1E40AF);
  --genre-reggaeton: linear-gradient(135deg, #EC4899, #F97316);
  --genre-rock: linear-gradient(135deg, #DC2626, #7C2D12);
  --genre-jazz: linear-gradient(135deg, #D97706, #92400E);
  --genre-latin: linear-gradient(135deg, #E11D48, #BE185D);
  --genre-indie: linear-gradient(135deg, #059669, #0D9488);
  --genre-chill: linear-gradient(135deg, #6366F1, #8B5CF6);
  --genre-electronic: linear-gradient(135deg, #7C3AED, #2563EB);
  --genre-hiphop: linear-gradient(135deg, #3B5BDB, #5B4FE6);
  --genre-pop: linear-gradient(135deg, #F472B6, #A78BFA);
  --genre-salsa: linear-gradient(135deg, #EF4444, #F97316);
  --genre-live: linear-gradient(135deg, #B91C1C, #F59E0B);
  --genre-standup: linear-gradient(135deg, #F59E0B, #D97706);
  --genre-default: linear-gradient(135deg, #4B5563, #6B7280);

  /* === LEGACY WEED VARIABLES (used in fallas/san-juan pages) === */
  --weed-purple: #1B2A4A;
  --weed-burgundy: #2D1B4A;
  --weed-coral: #E91E8C;
  --weed-cream: rgba(255,255,255,.06);
  --weed-green: #059669;
  --weed-pink: #E91E8C;

  /* === FONT VARIABLES === */
  --font-headline: 'Inter', sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;line-height:1.7;color:var(--text-dark);background:var(--bg-white);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Inter',sans-serif;font-weight:800;line-height:1.2;color:var(--text-heading)}
h4,h5,h6{font-weight:700;color:var(--text-dark)}
h1{font-size:2.5rem;margin-bottom:1rem}h2{font-size:2rem;margin-bottom:1rem}h3{font-size:1.5rem;margin-bottom:.75rem}
p{color:var(--text-dark);margin-bottom:1rem}
a{color:var(--pink);text-decoration:none;transition:color 150ms}a:hover{color:var(--pink-dark)}
ul,ol{padding-left:1.5rem;margin-bottom:1rem}li{color:var(--text-dark)}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--spacing-xl)}
.skip-link{position:absolute;top:-40px;left:0;z-index:9999}

/* === STICKY NAV === */
.sticky-nav{background:var(--navy-deep);position:sticky;top:0;z-index:1000;box-shadow:0 4px 20px rgba(0,0,0,.25);padding:0}
.sticky-nav .container{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;height:56px}
.nav-brand{flex-shrink:0}
.nav-logo{color:var(--text-white)!important;font-family:'Inter',sans-serif;font-weight:800;font-size:1.15rem;display:flex;align-items:center;gap:0.4rem;white-space:nowrap}
.nav-logo span{color:var(--text-white)!important}
.nav-links{display:flex;align-items:center;gap:0.1rem;flex-wrap:nowrap;overflow:visible}
.nav-link{color:rgba(255,255,255,.85)!important;font-size:0.82rem;font-weight:500;padding:0.4rem 0.6rem;border-radius:6px;transition:all 150ms;white-space:nowrap;letter-spacing:-0.01em}
.nav-link:hover{color:#FFFFFF!important;background:rgba(255,255,255,.1)}
.fallas-link{color:var(--gold)!important;font-weight:600}
.nav-secondary{opacity:0.6;font-size:0.78rem}
.nav-dropdown{position:relative}
.nav-dropdown-toggle{background:none;border:none;cursor:pointer;font-family:inherit}
.nav-dropdown-content{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--navy-deep);border-radius:12px;padding:0.5rem;min-width:200px;box-shadow:0 12px 40px rgba(0,0,0,.4);z-index:100;border:1px solid rgba(255,255,255,.08)}
.nav-dropdown:hover .nav-dropdown-content,.nav-dropdown.open .nav-dropdown-content{display:block}
.nav-dropdown-content a{color:rgba(255,255,255,.85)!important;display:block;padding:0.55rem 0.85rem;border-radius:8px;font-size:0.84rem;font-weight:500;transition:all 150ms}
.nav-dropdown-content a:hover{background:rgba(255,255,255,.1);color:#fff!important}
.nav-lang{display:flex;gap:3px;flex-shrink:0}
.lang-btn{background:transparent;color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.25);padding:3px 9px;border-radius:6px;font-size:0.72rem;font-weight:700;cursor:pointer;transition:all 150ms}
.lang-btn:hover{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.8)}
.lang-btn.active{background:var(--pink);color:var(--text-white);border-color:var(--pink)}
.cart-badge{background:var(--pink);color:var(--text-white);border-radius:50%;font-size:0.65rem;padding:1px 5px}
/* Nav: hide cart link on desktop to save space */
.cart-link{font-size:0.78rem;padding:0.4rem 0.4rem}

/* === PAGE HERO (sub-pages like Events, Guides, Barrios, FAQ) === */
.page-hero {
  background: linear-gradient(135deg, #0F1B33 0%, #1B2A4A 40%, #2D1B4A 100%);
  padding: 3.5rem 0 2.5rem;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 0%, rgba(233, 30, 140, 0.08) 0%, transparent 60%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #FFFFFF !important;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.page-hero-subtitle {
  font-size: 1.05rem;
  color: rgba(255,255,255,.85) !important;
  margin-bottom: 0;
  font-weight: 400;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

/* Also style .site-header for pages still using inline styles */
.site-header {
  background: linear-gradient(135deg, #0F1B33 0%, #1B2A4A 40%, #2D1B4A 100%);
  padding: 3.5rem 0 2.5rem;
  position: relative;
}
.site-header h1 { color: #FFFFFF !important; }
.site-header p { color: rgba(255,255,255,.8); }

/* === HERO === */
/* ========== HERO — REDESIGN ========== */
.hero-header {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--gradient-night);
}

/* Animierter Hintergrund-Effekt */
.hero-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(233, 30, 140, 0.15) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
              radial-gradient(ellipse at 50% 80%, rgba(6, 182, 212, 0.08) 0%, transparent 50%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 40px 20px;
  max-width: 800px;
  margin: 0 auto;
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hero-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 36px;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-header h1,
.hero-header .hero-title {
  color: #FFFFFF !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Hero Buttons */
.hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.btn-hero-primary {
  padding: 16px 36px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 1rem;
  background: var(--gradient-pink);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-glow-pink);
  transition: all var(--transition-medium);
  text-decoration: none;
  cursor: pointer;
}

.btn-hero-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(233, 30, 140, 0.45);
}

.btn-hero-secondary {
  padding: 16px 36px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  transition: all var(--transition-medium);
  text-decoration: none;
  cursor: pointer;
}

.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.35);
}

/* Hero Stats */
.hero-stats {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-stat {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  padding: 14px 28px;
  text-align: center;
  transition: background var(--transition-fast);
}

.hero-stat:hover {
  background: rgba(255, 255, 255, 0.14);
}

.hero-stat-number {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  display: block;
  line-height: 1.2;
}

.hero-stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.6);
  display: block;
  margin-top: 2px;
}

/* === BUTTONS === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;font-family:'Inter',sans-serif;font-weight:700;font-size:0.9rem;padding:0.75rem 1.75rem;border-radius:50px;border:none;cursor:pointer;transition:all 200ms;text-decoration:none}
.btn-primary{background:var(--pink)!important;color:var(--text-white)!important}
.btn-primary:hover{background:var(--pink-dark)!important}

/* === SEO INTRO === */
.seo-intro{background:var(--bg-cream);padding:1.5rem 0;text-align:center}
.seo-intro .intro-content{max-width:700px;margin:0 auto}
.seo-intro p{color:var(--text-dark);font-size:0.95rem;line-height:1.6}

/* Language-specific content visibility */
html[lang="en"] .intro-spanish,
html[lang="en"] .content-es,
html[lang="en"] .lang-es {
  display: none !important;
}

html[lang="es"] .intro-en,
html[lang="es"] .content-en,
html[lang="es"] .lang-en {
  display: none !important;
}

/* ========== SEARCH — REDESIGN ========== */
.search-section {
  padding: 40px 20px;
  display: flex;
  justify-content: center;
}

.search-wrapper {
  display: flex;
  gap: 12px;
  max-width: 650px;
  width: 100%;
  padding: 8px;
  background: #fff;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--transition-fast);
}

.search-wrapper:focus-within {
  box-shadow: var(--shadow-lg), 0 0 0 3px rgba(233, 30, 140, 0.15);
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 20px;
  font-size: 1rem;
  background: transparent;
  color: var(--navy);
  border-radius: var(--radius-full);
}

.search-input::placeholder {
  color: #999;
}

/* Falls der Search-Button ein .btn ist: */
.search-wrapper .btn,
.search-wrapper button {
  padding: 12px 28px;
  border-radius: var(--radius-full);
  background: var(--gradient-pink);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.search-wrapper .btn:hover,
.search-wrapper button:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-glow-pink);
}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ========== SECTION STYLES — REDESIGN ========== */
.section-heading {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 8px;
  line-height: 1.2;
}

.section-subtitle {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 40px;
  opacity: 0.7;
}

/* Dunkle Sektionen */
.featured-section,
.tonight-section,
.thisweek-section,
.popular-section {
  padding: 80px 0;
}

.featured-section .section-heading,
.tonight-section .section-heading,
.thisweek-section .section-heading,
.popular-section .section-heading {
  color: #fff;
}

.featured-section .section-subtitle,
.tonight-section .section-subtitle,
.thisweek-section .section-subtitle,
.popular-section .section-subtitle {
  color: rgba(255, 255, 255, 0.6);
}

/* Helle Sektionen */
.categories-section,
.guide-section,
.guides-section,
.faq-section,
.events-section {
  padding: 80px 0;
}

.categories-section .section-heading,
.guide-section .section-heading,
.guides-section .section-heading,
.faq-section .section-heading,
.events-section .section-heading {
  color: var(--navy);
}

/* Sektion Hintergründe mit sanfteren Übergängen */
.tonight-section {
  background: var(--navy);
}

.thisweek-section {
  background: #162038;
}

.popular-section {
  background: #1e2d4d;
}

.featured-section {
  background: linear-gradient(180deg, #1a1a2e 0%, #1B2A4A 100%);
}

/* Gold variant for better contrast */
.featured-section-gold .section-heading {
  color: #1a1a2e !important;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
}

.featured-section-gold .section-subtitle,
.featured-section-gold p {
  color: rgba(26, 26, 46, 0.85) !important;
}

.featured-section-gold .event-thumbnail-link {
  background: rgba(26, 26, 46, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.featured-section-gold .event-thumbnail-link:hover {
  background: rgba(26, 26, 46, 0.85);
}

/* Ensure text is readable on dark backgrounds in gold section */
.featured-section-gold .event-thumbnail-title {
  color: #fff !important;
}

.featured-section-gold .event-thumbnail-meta,
.featured-section-gold .event-thumbnail-meta span {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ========== EVENT-THUMBNAIL (Featured & Popular Sektionen) ========== */
.event-grid-thumbnails {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.event-thumbnail {
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.event-thumbnail:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.event-thumbnail-link {
  display: block;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
}

.event-thumbnail-image {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  position: relative;
  overflow: hidden;
}

/* Genre-basierte Hintergründe für Thumbnail-Images via data-emoji */
.event-thumbnail-image.placeholder-emoji {
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

/* Spezifische Gradient-Hintergründe je nach Emoji/Genre */
.event-thumbnail-image[data-emoji="🎧"],
.event-thumbnail-image[data-emoji="🎹"] {
  background: var(--genre-techno);
}

.event-thumbnail-image[data-emoji="💃"],
.event-thumbnail-image[data-emoji="🎺"] {
  background: var(--genre-reggaeton);
}

.event-thumbnail-image[data-emoji="🎸"],
.event-thumbnail-image[data-emoji="🤘"] {
  background: var(--genre-rock);
}

.event-thumbnail-image[data-emoji="🎷"],
.event-thumbnail-image[data-emoji="🍷"] {
  background: var(--genre-jazz);
}

.event-thumbnail-image[data-emoji="🔥"],
.event-thumbnail-image[data-emoji="⭐"],
.event-thumbnail-image[data-emoji="🌟"] {
  background: linear-gradient(135deg, #F59E0B, #EF4444);
}

.event-thumbnail-image[data-emoji="🌅"],
.event-thumbnail-image[data-emoji="🏖️"] {
  background: var(--genre-chill);
}

.event-thumbnail-image[data-emoji="🎤"],
.event-thumbnail-image[data-emoji="🎙️"] {
  background: var(--genre-hiphop);
}

.event-thumbnail-image[data-emoji="🎵"],
.event-thumbnail-image[data-emoji="🎶"] {
  background: var(--genre-default);
}

.event-thumbnail-image[data-emoji="🌿"],
.event-thumbnail-image[data-emoji="🌈"] {
  background: var(--genre-indie);
}

.event-thumbnail-image[data-emoji="💿"],
.event-thumbnail-image[data-emoji="⚡"] {
  background: var(--genre-electronic);
}

.event-thumbnail-image[data-emoji="🎪"],
.event-thumbnail-image[data-emoji="✨"] {
  background: linear-gradient(135deg, #D97706, #FBBF24);
}

.event-thumbnail-image[data-emoji="🎭"],
.event-thumbnail-image[data-emoji="🤣"] {
  background: var(--genre-standup);
}

.event-thumbnail-image[data-emoji="💃"],
.event-thumbnail-image[data-emoji="💄"] {
  background: var(--genre-salsa);
}

.event-thumbnail-content {
  padding: 20px;
}

.event-thumbnail-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.3;
}

.event-thumbnail-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.event-thumbnail-meta span {
  color: rgba(255, 255, 255, 0.7);
}

/* ========== EVENT-ITEM (Tonight & This Week Sektionen) ========== */
.event-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.event-item {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.event-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.event-link {
  display: flex;
  flex-direction: column;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  height: 100%;
  flex: 1;
}

.event-date-badge {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.event-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy) !important;
  margin-bottom: 10px;
  line-height: 1.3;
}

/* Force dark text on event cards even in dark sections */
.tonight-section .event-item .event-title,
.thisweek-section .event-item .event-title,
.popular-section .event-item .event-title {
  color: var(--navy) !important;
}

.event-details {
  margin-bottom: 12px;
}

.event-details p {
  font-size: 0.9rem;
  color: #555 !important;
  margin: 0;
}

/* Force dark text on event card details even in dark sections */
.tonight-section .event-item .event-details p,
.thisweek-section .event-item .event-details p,
.popular-section .event-item .event-details p,
.tonight-section .event-item .event-date,
.tonight-section .event-item .event-time,
.tonight-section .event-item .event-location,
.tonight-section .event-item .event-music,
.thisweek-section .event-item .event-date,
.thisweek-section .event-item .event-time,
.thisweek-section .event-item .event-location,
.thisweek-section .event-item .event-music,
.popular-section .event-item .event-date,
.popular-section .event-item .event-time,
.popular-section .event-item .event-location,
.popular-section .event-item .event-music {
  color: #555 !important;
}

.event-music-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(233, 30, 140, 0.08);
  color: var(--pink);
}

/* Hover-Effekt auf Titel */
.event-item:hover .event-title {
  color: var(--pink);
}

/* Legacy fields (for compatibility) */
.event-date, .event-time, .event-location, .event-music {
  color: var(--text-sec) !important;
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}

.event-header {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-direction: column;
}

/* Responsive Grids für Thumbnails & Items */
@media (max-width: 1024px) {
  .event-grid-thumbnails {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .event-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .event-grid-thumbnails {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .event-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  /* Categories Mobile */
  .category-card {
    padding: 12px 20px;
    font-size: 0.85rem;
  }
  
  .categories-grid {
    gap: 10px;
  }
}

/* ========== EVENT CARD — REDESIGN ========== */
.event-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.event-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

/* Card Image Area — Genre-Gradient wenn kein Bild */
.event-card-image {
  position: relative;
  height: 160px;
  overflow: hidden;
  background: var(--genre-default);
}

.event-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-medium);
}

.event-card:hover .event-card-image img {
  transform: scale(1.08);
}

/* Badges auf dem Bild */
.event-card-live-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(239, 68, 68, 0.9);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  z-index: 2;
}

.event-card-genre {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 2;
}

.event-card-date-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 2;
}

/* Featured Badge */
.event-card-featured-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(245,158,11,0.4);
}

/* Like Button */
.like-btn {
  position: absolute;
  top: -8px;
  right: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.95);
  border: none;
  border-radius: var(--radius-full);
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.85rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.like-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.like-btn.liked {
  background: linear-gradient(135deg, #ec4899, #f472b6);
  color: #fff;
}

.like-btn-small {
  padding: 4px 10px;
  font-size: 0.75rem;
}

.like-icon {
  font-size: 1rem;
}

.like-btn-small .like-icon {
  font-size: 0.85rem;
}

.like-count {
  font-weight: 600;
  font-size: 0.8rem;
}

.like-animate {
  animation: likePopAnim 0.3s ease;
}

@keyframes likePopAnim {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Card Content */
.event-card-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.event-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
  line-height: 1.3;
}

.event-card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.event-card-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #555;
}

.event-card-meta-item .icon {
  font-size: 0.9rem;
  width: 20px;
  text-align: center;
}

/* Genre Tags */
.event-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.event-card-tag {
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}

.event-card-tag.music {
  background: rgba(233, 30, 140, 0.1);
  color: var(--pink);
}

/* CTA */
.event-card-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: auto;
}

.event-card-cta-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pink);
  transition: color var(--transition-fast);
}

.event-card:hover .event-card-cta-text {
  color: #C41E3A;
}

.event-card-price {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy);
}

.event-card-price.free {
  color: #059669;
}

/* Card Link Reset */
.event-card a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ========== EVENT GRID LAYOUTS ========== */
.event-grid-thumbnails,
.event-list,
.event-list-featured {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .event-grid-thumbnails,
  .event-list,
  .event-list-featured {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .event-grid-thumbnails,
  .event-list,
  .event-list-featured {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* === EVENT DETAIL PAGE === */
.event-detail-section{background:var(--bg-white);padding:2rem 0;min-height:60vh;color:var(--text-dark)!important}
.event-detail-card{background:var(--bg-white);color:var(--text-dark)!important;border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow-lg);margin-bottom:2rem}
.event-detail-header{margin-bottom:2rem;border-bottom:2px solid var(--bg-cream);padding-bottom:1rem}
.event-detail-title{color:var(--text-heading)!important;font-size:2rem;margin-bottom:0.5rem}
.event-detail-actions{display:flex;gap:1rem;align-items:center;margin-top:1rem}
.event-detail-info{margin-bottom:2rem}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2rem}
.info-item{display:flex;gap:0.75rem;align-items:flex-start;padding:1rem;background:var(--bg-cream);border-radius:var(--radius)}
.info-icon{font-size:1.5rem;flex-shrink:0}
.info-content{flex:1}
.info-content strong{display:block;color:var(--text-heading)!important;font-size:0.875rem;margin-bottom:0.25rem;text-transform:uppercase;letter-spacing:0.5px}
.info-content p{color:var(--text-dark)!important;margin:0;font-size:1rem}
.event-detail-description{margin-bottom:2rem}
.event-detail-description h2{color:var(--text-heading)!important;font-size:1.5rem;margin-bottom:1rem}
.event-detail-description p{color:var(--text-dark)!important;line-height:1.8}
.back-link-wrapper{margin-top:2rem;text-align:center}
.back-link{color:var(--pink)!important;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:0.5rem;transition:all 200ms}
.back-link:hover{color:var(--pink-dark)!important;transform:translateX(-4px)}
.reservation-section{background:var(--bg-cream);padding:2rem;border-radius:var(--radius);margin-bottom:2rem}
.reservation-section h2{color:var(--text-heading)!important;font-size:1.5rem;margin-bottom:1rem}
.reservation-form{max-width:500px}
.form-group{margin-bottom:1rem}
.form-group label{display:block;color:var(--text-dark)!important;font-weight:600;margin-bottom:0.5rem}
.form-group input,.form-group textarea{width:100%;padding:0.75rem;border:2px solid #E5E5E5;border-radius:var(--radius);font-family:inherit;font-size:1rem;color:var(--text-dark)!important;background:var(--bg-white)}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--pink)}
.form-group textarea{min-height:100px;resize:vertical}
.popularity-badge{display:inline-flex;align-items:center;gap:0.25rem;background:var(--bg-cream);color:var(--text-dark)!important;padding:0.5rem 1rem;border-radius:50px;font-size:0.875rem;font-weight:600}
.popularity-badge.hot{background:var(--pink);color:var(--text-white)!important}

/* === EVENTS SECTION (light bg) === */
.events-section{background:var(--bg-light)}

/* ========== CATEGORIES / GENRES — REDESIGN ========== */
.categories-section {
  padding: 64px 0;
  text-align: center;
  background: var(--bg-white);
}

.categories-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
}

a.category-card,
.category-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff !important;
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 8px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.02em;
}

.category-card:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-md);
}

.category-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.05));
  z-index: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
  border-radius: inherit;
}

.category-card:hover::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.05));
}

.category-icon {
  font-size: 1.2rem;
  position: relative;
  z-index: 1;
}

.category-card > * {
  position: relative;
  z-index: 1;
}

/* Genre-spezifische Farben via nth-child */
.category-card:nth-child(1) {
  background: var(--genre-techno);
}

.category-card:nth-child(2) {
  background: var(--genre-reggaeton);
}

.category-card:nth-child(3) {
  background: var(--genre-live);
}

.category-card:nth-child(4) {
  background: var(--genre-indie);
}

.category-card:nth-child(5) {
  background: var(--genre-hiphop);
}

.category-card:nth-child(6) {
  background: var(--genre-default);
}

/* Falls es MEHR als 6 Kategorien gibt: */
.category-card:nth-child(n+7) {
  background: var(--genre-default);
}

/* Legacy h3/p elements (falls vorhanden) */
.category-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  color: #fff;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.category-card p {
  display: none;
}

/* ========== FILTERS — REDESIGN ========== */
.filter-section {
  background: var(--bg-white);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  position: sticky;
  top: 56px;
  z-index: 100;
  padding: 0.75rem 0;
}

/* Search row */
.filter-search-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.filter-search-wrap {
  flex: 1;
  position: relative;
}
.filter-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
}
.filter-search-input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: 9999px;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--navy);
  background: #fff;
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}
.filter-search-input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(233,30,140,0.08);
}
.filter-search-input::placeholder { color: #aaa; }

/* Pills row */
.filter-pills-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.filter-pills-scroll {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1;
}

/* Filter toggle button (visible on all sizes for consistency) */
.filter-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 9999px;
  background: #fff;
  color: #555;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms;
  white-space: nowrap;
  flex-shrink: 0;
}
.filter-toggle-btn:hover {
  border-color: var(--pink);
  color: var(--pink);
}
.filter-toggle-btn.active {
  background: var(--pink);
  color: #fff;
  border-color: var(--pink);
}
.filter-toggle-btn svg {
  flex-shrink: 0;
}

/* Advanced filters panel */
.filter-advanced {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease, opacity 200ms ease, margin 200ms ease;
  opacity: 0;
}
.filter-advanced.open {
  max-height: 300px;
  opacity: 1;
  margin-top: 0.75rem;
}
.filter-advanced-grid {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.filter-group-compact {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.filter-group-compact label {
  font-size: 0.68rem;
  text-transform: uppercase;
  font-weight: 600;
  color: #888;
  letter-spacing: 0.3px;
}
.filter-input-compact,
.filter-select-compact {
  padding: 0.45rem 0.75rem;
  border: 1.5px solid #ddd;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--navy);
  background: #fff;
  outline: none;
  transition: border-color 150ms;
  min-width: 140px;
}
.filter-input-compact:focus,
.filter-select-compact:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(233,30,140,0.08);
}
.filter-clear-link {
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--pink);
  font-weight: 500;
  padding-bottom: 0.5rem;
  white-space: nowrap;
}

/* Legacy compat */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 10px 20px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  color: #555;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-btn:hover {
  border-color: var(--pink);
  color: var(--pink);
  background: rgba(233, 30, 140, 0.04);
}

.filter-btn.active {
  background: var(--gradient-pink);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
  box-shadow: var(--shadow-glow-pink);
}

.date-input {
  padding: 10px 16px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 0.9rem;
  color: var(--navy);
  background: #fff;
  outline: none;
  transition: border-color var(--transition-fast);
}

.date-input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.1);
}

.music-select {
  padding: 10px 16px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 0.9rem;
  color: var(--navy);
  background: #fff;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.music-select:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.1);
}

/* Legacy */
.filter-select,
.filter-input {
  padding: 10px 16px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 0.9rem;
  font-family: inherit;
}

.filter-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ========== FAQ — REDESIGN ========== */
.faq-section {
  background: var(--bg-cream);
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.faq-item:hover {
  box-shadow: var(--shadow-md);
}

/* Aktives FAQ-Item */
.faq-item.active {
  border-left: 3px solid var(--pink);
  box-shadow: var(--shadow-md);
}

.faq-question {
  padding: 20px 24px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  transition: color var(--transition-fast);
}

.faq-question:hover {
  color: var(--pink);
}

.faq-icon {
  font-size: 1.2rem;
  transition: transform var(--transition-medium);
  flex-shrink: 0;
  color: var(--pink);
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 24px 20px;
  color: #555;
  line-height: 1.7;
  font-size: 0.95rem;
  display: none;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
  display: block;
  opacity: 1;
  max-height: 500px;
  padding: 0 24px 20px;
}

/* ========== GUIDES — REDESIGN ========== */
.guides-section {
  padding: 80px 0;
  background: var(--bg-white);
}

.guide-section {
  background: var(--bg-cream);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
}

.guide-content {
  color: var(--text-dark);
}

.guide-content h3 {
  color: var(--text-heading);
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Jede Guide-Card als visuelles Element */
.guide-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 200px;
  padding: 24px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.guide-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25), 0 6px 12px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Guide-Card Hintergründe — nth-child für verschiedene Farben */
.guide-card:nth-child(1) {
  background: linear-gradient(135deg, #1a1a2e, #2d1b69);
}

.guide-card:nth-child(2) {
  background: linear-gradient(135deg, #7C2D12, #DC2626);
}

.guide-card:nth-child(3) {
  background: linear-gradient(135deg, #6B21A8, #EC4899);
}

.guide-card:nth-child(4) {
  background: linear-gradient(135deg, #312E81, #6366F1);
}

.guide-card:nth-child(5) {
  background: linear-gradient(135deg, #92400E, #F59E0B);
}

/* Licht-Overlay auf Hover */
.guide-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background 0.3s ease;
  border-radius: var(--radius-lg);
  pointer-events: none;
}

.guide-card:hover::after {
  background: rgba(255, 255, 255, 0.12);
}

/* Subtle glow effect on hover */
.guide-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
  border-radius: var(--radius-lg);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

.guide-card:hover::before {
  opacity: 1;
}

/* Text in Guide-Cards */
.guide-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  position: relative;
  z-index: 2;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.guide-card h3::after {
  content: '→';
  font-size: 1.4rem;
  opacity: 0.7;
  transform: translateX(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
  margin-left: auto;
}

.guide-card:hover h3::after {
  opacity: 1;
  transform: translateX(6px);
}

.guide-card p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  z-index: 2;
  margin: 0;
  line-height: 1.5;
}

/* "Tap to explore" indicator */
.guide-card p::after {
  content: 'Tap to explore';
  display: block;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.guide-card:hover p::after {
  color: rgba(255, 255, 255, 0.9);
}


.guide-content p{color:var(--text-dark);line-height:1.6;font-size:0.875rem}

/* Dark gradient sections inside guide-content need white text */
.guide-content section[style*="linear-gradient"],
.guide-content div[style*="linear-gradient"],
.guide-content section[style*="var(--navy"],
.guide-content section[style*="var(--weed"] {
  color: #fff !important;
}
.guide-content section[style*="linear-gradient"] h2,
.guide-content section[style*="linear-gradient"] h3,
.guide-content section[style*="linear-gradient"] h4,
.guide-content section[style*="linear-gradient"] li,
.guide-content section[style*="linear-gradient"] p,
.guide-content section[style*="linear-gradient"] strong,
.guide-content div[style*="linear-gradient"] h2,
.guide-content div[style*="linear-gradient"] h3,
.guide-content div[style*="linear-gradient"] li,
.guide-content div[style*="linear-gradient"] p,
.guide-content div[style*="linear-gradient"] strong {
  color: #fff !important;
}

/* === FOOTER === */
.site-footer{background:var(--navy-deep)!important;padding:var(--spacing-3xl) 0 var(--spacing-xl);color:var(--text-light-sec)}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-xl)}
.footer-section h3{color:var(--text-white)!important;font-family:'Inter',sans-serif;font-size:0.9rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--spacing-md)}
.footer-company{color:var(--text-light-sec)!important;font-size:0.85rem;line-height:1.8}
.footer-company strong{color:var(--text-white)!important}
.footer-links{list-style:none;padding:0}
.footer-links li{margin-bottom:0.5rem}
.footer-links a{color:var(--text-light-sec)!important;font-size:0.85rem}
.footer-links a:hover{color:var(--pink)!important}
.site-footer small{color:#8A93A8!important;display:block;text-align:center;margin-top:var(--spacing-xl);padding-top:var(--spacing-xl);border-top:1px solid rgba(255,255,255,.1)}

/* === LOADING / ERROR === */
.loading{color:var(--text-muted);text-align:center;padding:var(--spacing-xl);font-style:italic}
.error{color:#C41E3A;text-align:center;padding:var(--spacing-xl)}

/* === BREADCRUMBS === */
.breadcrumbs{background:var(--bg-cream);padding:var(--spacing-md) 0;border-bottom:1px solid rgba(0,0,0,.05)}
.breadcrumbs-list{display:flex;flex-wrap:nowrap;gap:0.5rem;align-items:center;max-width:var(--max-width);margin:0 auto;padding:0 var(--spacing-xl);list-style:none}
.breadcrumb-item{color:var(--text-muted);font-size:0.875rem}
.breadcrumb-item a{color:var(--text-sec);text-decoration:none;transition:color 150ms}
.breadcrumb-item a:hover{color:var(--pink)}
.breadcrumb-item:not(:last-child)::after{content:"›";margin-left:0.5rem;color:var(--text-muted);font-weight:700}
.breadcrumb-item[aria-current="page"]{color:var(--text-dark);font-weight:600}

/* === SOCIAL SHARE === */
.social-share{margin:var(--spacing-xl) 0;padding:var(--spacing-lg);background:var(--bg-cream);border-radius:var(--radius);border-left:4px solid var(--pink)}
.share-label{margin:0 0 var(--spacing-sm);color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:1px;font-size:0.75rem}
.share-buttons{display:flex;gap:var(--spacing-sm);flex-wrap:nowrap}
.share-button{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:var(--bg-white);border:2px solid #E5E5E5;border-radius:50px;font-size:0.875rem;font-weight:600;text-decoration:none;color:var(--text-dark);transition:all 200ms}
.share-button:hover{border-color:var(--pink);background:var(--pink);color:var(--text-white);transform:translateY(-2px);box-shadow:var(--shadow)}
.share-button span{display:none}

/* === FAVORITES === */
.btn-favorite{background:transparent;border:2px solid var(--pink);color:var(--pink);padding:0.5rem 1rem;border-radius:50px;font-size:0.875rem;font-weight:700;cursor:pointer;transition:all 200ms;font-family:inherit;display:inline-flex;align-items:center;gap:0.25rem}
.btn-favorite:hover{background:var(--pink);color:var(--text-white);transform:scale(1.05)}
.btn-favorite.is-favorite{background:var(--pink);color:var(--text-white);border-color:var(--pink-dark)}
.btn-favorite.is-favorite:hover{background:var(--pink-dark)}

/* === PWA INSTALL BANNER === */
.pwa-install-banner{position:fixed;bottom:0;left:0;right:0;background:var(--navy-deep);color:var(--text-white);padding:var(--spacing-lg);box-shadow:0 -4px 12px rgba(0,0,0,.3);z-index:1001;transition:opacity 300ms;animation:slideUp 400ms ease-out}
.pwa-install-content{max-width:var(--max-width);margin:0 auto}
.pwa-install-content p{color:var(--text-light)!important}
.btn-install{background:var(--pink);color:var(--text-white);border:none;padding:0.75rem 1.5rem;border-radius:50px;font-weight:700;cursor:pointer;transition:all 200ms}
.btn-install:hover{background:var(--pink-dark);transform:translateY(-2px)}
.btn-dismiss{background:transparent;color:var(--text-light);border:2px solid rgba(255,255,255,.3);padding:0.75rem 1.5rem;border-radius:50px;font-weight:700;cursor:pointer;transition:all 200ms}
.btn-dismiss:hover{background:rgba(255,255,255,.1)}

@keyframes slideUp{
  from{transform:translateY(100%);opacity:0}
  to{transform:translateY(0);opacity:1}
}

@media(min-width:640px){
  .share-button span{display:inline}
}

/* ========== BACK TO TOP — REDESIGN ========== */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient-pink);
  color: #fff;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-medium);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow-pink);
}

/* ========== SKELETON LOADING ========== */
.event-card.loading {
  background: #f0f0f0;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ========== SELECTION COLOR ========== */
::selection {
  background: rgba(233, 30, 140, 0.2);
  color: var(--navy);
}

/* === SITE-HEADER (non-hero pages) === */
.site-header:not(.hero-header){background:var(--navy);padding:var(--spacing-2xl) 0;text-align:center}
.site-header:not(.hero-header) h1{color:var(--text-white)!important;font-size:2.5rem}
.site-header:not(.hero-header) p{color:var(--text-light)!important}

/* === CONTENT PAGES (blog, barrios, guides etc) === */
/* NOTE: Do NOT use bare 'article' or 'main' — too generic, breaks event cards & dashboards */
.guide-content,.blog-content,.article-content,.content{max-width:var(--max-width);margin:0 auto;padding:var(--spacing-xl);color:var(--text-dark)!important}
.guide-content h1,.guide-content h2,.guide-content h3,.blog-content h1,.blog-content h2,.blog-content h3,.article-content h1,.article-content h2,.article-content h3{color:var(--text-heading)!important}
.guide-content p,.guide-content li,.blog-content p,.blog-content li,.article-content p,.article-content li{color:var(--text-dark)!important;line-height:1.8}
.guide-content a,.blog-content a,.article-content a{color:var(--pink)!important;font-weight:600}

/* === BLOG/ARTICLE STYLES === */
.article-hero,.article-hero-modern{background:var(--bg-cream);padding:2rem 0;text-align:center;color:var(--text-dark)!important}
.article-hero h1,.article-hero-modern h1,.article-title{color:var(--text-heading)!important;font-size:2rem;margin-bottom:1rem}
.article-meta,.article-meta-modern{color:var(--text-muted)!important;font-size:0.875rem;margin-bottom:1rem}
.article-category,.article-tag{display:inline-block;background:var(--pink);color:var(--text-white)!important;padding:0.25rem 0.75rem;border-radius:50px;font-size:0.75rem;font-weight:600;margin-right:0.5rem}
.article-intro{font-size:1.125rem;line-height:1.8;color:var(--text-dark)!important;margin-bottom:2rem;font-weight:500}
.article-body{color:var(--text-dark)!important;line-height:1.8}
.article-body h2,.article-body h3{color:var(--text-heading)!important;margin-top:2rem;margin-bottom:1rem}
.article-body p{color:var(--text-dark)!important;margin-bottom:1rem}
.article-body ul,.article-body ol{color:var(--text-dark)!important;margin-bottom:1rem}
.article-body li{color:var(--text-dark)!important}
/* Article Layout: sidebar TOC + main content */
.article-layout{background:var(--bg-white);min-height:60vh;display:flex;max-width:var(--max-width);margin:0 auto;gap:0;position:relative}

/* === STICKY TOC SIDEBAR === */
.toc-sidebar{position:sticky;top:80px;align-self:flex-start;width:260px;min-width:260px;max-height:calc(100vh - 100px);overflow-y:auto;padding:1.5rem 0 1.5rem 1.5rem;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,0.15) transparent}
.toc-sidebar::-webkit-scrollbar{width:3px}
.toc-sidebar::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);border-radius:3px}

.toc-title{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted)!important;margin-bottom:1rem;padding-left:16px}
.toc-list{list-style:none!important;padding:0!important;margin:0!important}
.toc-item{margin:0;padding:0}
.toc-link{display:block;padding:8px 16px;font-size:0.85rem;color:var(--text-sec)!important;text-decoration:none!important;font-weight:500;border-left:2px solid transparent;transition:all 0.2s ease;line-height:1.4}
.toc-link:hover{color:var(--pink)!important;background:rgba(233,30,140,0.04);border-left-color:rgba(233,30,140,0.3)}
.toc-link.active{color:var(--pink)!important;font-weight:600;border-left-color:var(--pink);background:rgba(233,30,140,0.06)}

/* Mobile TOC */
@media(max-width:1024px){
  .article-layout{flex-direction:column}
  .toc-sidebar{position:relative;top:0;width:100%;min-width:100%;max-height:none;padding:1rem 1.5rem;border-bottom:1px solid rgba(0,0,0,0.08);background:var(--bg-cream);border-radius:var(--radius) var(--radius) 0 0}
  .toc-title{margin-bottom:0.75rem}
  .toc-link{padding:6px 12px;font-size:0.8rem}
}
.article-cta{background:var(--bg-cream);padding:2rem;border-radius:var(--radius);text-align:center;margin-top:2rem}
.article-cta h3{color:var(--text-heading)!important}
.article-cta p{color:var(--text-dark)!important}
.article-links{margin-top:2rem;padding-top:2rem;border-top:2px solid var(--bg-cream)}
.article-links a{color:var(--pink)!important;display:inline-flex;align-items:center;gap:0.5rem}

/* === BLOG HERO === */
.blog-hero {
  background: linear-gradient(135deg, #0F1B33 0%, #1B2A4A 40%, #2D1B4A 100%);
  padding: 3.5rem 0 2.5rem;
  position: relative;
  overflow: hidden;
}
.blog-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(233, 30, 140, 0.1) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, rgba(99, 102, 241, 0.06) 0%, transparent 50%);
  pointer-events: none;
}
.blog-hero .container { position: relative; z-index: 1; }
.blog-hero h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: #FFFFFF !important;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}
.blog-hero p {
  color: rgba(255,255,255,.6);
  font-size: 1.05rem;
  margin-bottom: 0;
  max-width: 600px;
}

/* === BLOG CARDS === */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1rem;
}

.blog-card {
  background: var(--bg-white);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: all 0.3s var(--ease-out);
  border: 1px solid rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.blog-card a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: row;
  height: 100%;
  padding: 0;
  text-align: left;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(27, 42, 74, 0.12);
  border-color: rgba(233, 30, 140, 0.15);
}

.blog-card-image {
  font-size: 2.2rem;
  line-height: 1;
  width: 80px;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(27,42,74,0.04), rgba(233,30,140,0.04));
  flex-shrink: 0;
}

.blog-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem;
  min-height: 0;
  gap: 0.4rem;
}

.blog-card-date {
  color: var(--pink) !important;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 0;
}

.blog-card-title,
.blog-card-content h2,
.blog-card-content h3 {
  color: var(--text-heading) !important;
  margin: 0;
  font-size: 1.05rem !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-card-excerpt,
.blog-card-content p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-sec) !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.blog-card-tag {
  display: inline-block !important;
  background: rgba(233, 30, 140, 0.08);
  color: var(--pink) !important;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  width: fit-content;
  margin-top: auto;
}

.blog-card-footer {
  margin-top: auto;
  padding-top: 0.75rem;
  color: var(--pink);
  font-size: 0.75rem;
  font-weight: 600;
  transition: color 0.2s ease;
}

.blog-card:hover .blog-card-footer {
  color: var(--pink-dark);
}

@media (max-width: 900px) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (max-width: 500px) {
  .blog-card a {
    flex-direction: column;
  }
  .blog-card-image {
    width: 100%;
    min-height: auto;
    padding: 1rem;
  }
}

/* === GUIDES CATEGORY SECTION === */
.guides-category-section {
  padding: 4rem 0;
  background: linear-gradient(135deg, #0F1B33 0%, #1B2A4A 50%, #2D1B4A 100%);
}
.guides-category-heading {
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  color: #FFFFFF !important;
  font-weight: 800;
}
.guides-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
.guides-category-card {
  display: block;
  background: rgba(255,255,255,0.06);
  padding: 1.75rem;
  border-radius: 16px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.1);
  transition: all 0.3s var(--ease-out);
  backdrop-filter: blur(8px);
}
.guides-category-card:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(233, 30, 140, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}
.guides-category-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.75rem;
}
.guides-category-card h3 {
  color: #FFFFFF !important;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.guides-category-card p {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.9rem;
  margin: 0;
}

/* === GUIDES TIPS SECTION === */
.guides-tips-section {
  padding: 4rem 0;
  background: var(--navy-deep);
}
.guides-tip-card {
  background: rgba(255,255,255,0.04);
  border-left: 4px solid var(--pink);
  padding: 1.5rem 2rem;
  border-radius: 0 12px 12px 0;
  margin-bottom: 1rem;
}
.guides-tip-card h3 {
  color: #FFFFFF !important;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.guides-tip-card p {
  color: rgba(255,255,255,0.7) !important;
  line-height: 1.6;
  margin: 0;
}

/* === CART PAGE === */
.cart-page {
  min-height: 60vh;
  padding: 3rem 0;
  background: var(--bg-cream);
}
.cart-page h1 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-heading);
  margin-bottom: 2rem;
}
.cart-empty {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--bg-white);
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.cart-empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.4;
}
.cart-empty h2 {
  font-size: 1.4rem;
  color: var(--text-heading);
  margin-bottom: 0.5rem;
}
.cart-empty p {
  color: var(--text-sec);
  margin-bottom: 1.5rem;
}

/* === BARRIOS/NEIGHBORHOODS === */
.neighborhood-card{background:var(--bg-white);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);color:var(--text-dark)!important}
.neighborhood-card h2,.neighborhood-card h3{color:var(--text-heading)!important}
.neighborhood-card p{color:var(--text-dark)!important}

/* === GUIDES === */
.guide-hero{background:var(--bg-cream);padding:2rem 0;text-align:center;color:var(--text-dark)!important}
.guide-hero h1{color:var(--text-heading)!important}

/* === INFO/TIP/TRADITION BOXES === */
.info-box,.tip-box,.tradition-box,.highlight-box,.list-box{background:var(--bg-cream);border-radius:var(--radius);padding:var(--spacing-lg) var(--spacing-xl);margin:var(--spacing-lg) 0}
.info-box h3,.tip-box h3,.tradition-box h3{color:var(--text-heading)!important}
.info-box p,.tip-box p,.tradition-box p,.info-box li,.tip-box li{color:var(--text-dark)!important}

/* === MOBILE MENU === */
.nav-mobile-toggle{display:none;background:transparent;border:none;color:var(--text-white);font-size:1.5rem;cursor:pointer;padding:0.75rem;width:44px;height:44px;flex-direction:column;gap:4px;align-items:center;justify-content:center;border-radius:4px;transition:background 200ms;z-index:10001;position:relative;-webkit-tap-highlight-color:rgba(255,255,255,0.1);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.nav-mobile-toggle span{display:block;width:24px;height:2px;background:var(--text-white);transition:all 200ms;border-radius:2px;pointer-events:none}
.nav-mobile-toggle:hover{background:rgba(255,255,255,.1)}
.nav-mobile-toggle.active span:nth-child(1){transform:rotate(45deg) translateY(9px)}
.nav-mobile-toggle.active span:nth-child(2){opacity:0}
.nav-mobile-toggle.active span:nth-child(3){transform:rotate(-45deg) translateY(-9px)}

/* Mobile menu open state */
.sticky-nav.menu-open{position:fixed;top:0;left:0;right:0;width:100%;z-index:1000}
.sticky-nav.menu-open .nav-links{display:flex!important;position:fixed;top:56px;left:0;right:0;bottom:0;background:var(--navy-deep);flex-direction:column;align-items:center;padding:1.5rem 1.5rem 2rem;gap:0;overflow-y:auto;z-index:9998;-webkit-overflow-scrolling:touch}
.sticky-nav.menu-open .nav-links a{width:100%;max-width:400px;font-size:1.1rem;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.08);text-align:center;text-decoration:none;color:rgba(255,255,255,.9)!important;transition:color 200ms}
.sticky-nav.menu-open .nav-links a:hover,.sticky-nav.menu-open .nav-links a:active{color:#fff!important;background:none}
.sticky-nav.menu-open .nav-links .nav-dropdown{width:100%;max-width:400px;border-bottom:1px solid rgba(255,255,255,.08)}
.sticky-nav.menu-open .nav-links .nav-dropdown-toggle{width:100%;font-size:1.1rem;padding:1rem 0;text-align:center;color:rgba(255,255,255,.9)!important}
.sticky-nav.menu-open .nav-dropdown-content{position:static;transform:none;left:auto;box-shadow:none;border:none;background:rgba(255,255,255,.04);border-radius:12px;margin:0 0 0.5rem;padding:0.5rem 0;min-width:auto;width:100%}
.sticky-nav.menu-open .nav-dropdown-content a{font-size:0.95rem;padding:0.7rem 1rem;border-bottom:none;color:rgba(255,255,255,.65)!important;text-align:center}
.sticky-nav.menu-open .nav-dropdown-content a:hover{color:#fff!important;background:rgba(255,255,255,.06)}
.sticky-nav.menu-open .nav-lang{display:none}

/* === RESPONSIVE === */
@media (max-width: 1200px) {
  .sticky-nav .container { gap: 0.25rem; }
  .nav-links { gap: 0; }
  .nav-link { font-size: 0.76rem; padding: 0.35rem 0.45rem; }
  .nav-logo { font-size: 1rem; }
}

@media(max-width:768px){
  /* Typography */
  html{font-size:15px}
  h1,.hero-title{font-size:1.75rem!important;line-height:1.3}
  h2,.section-heading{font-size:1.5rem!important}
  h3{font-size:1.25rem}
  p{font-size:1rem;line-height:1.7}
  
  /* Layout */
  .container{padding:0 1rem;max-width:100%}
  
  /* Page Hero compact on mobile */
  .page-hero { padding: 1.5rem 0 1rem; }
  .page-hero-title { font-size: 1.4rem !important; }
  .page-hero-subtitle { font-size: 0.9rem; }

  /* Hero Mobile */
  .hero-header {
    min-height: 80vh;
  }
  
  .hero-stats {
    gap: 12px;
  }
  
  .hero-stat {
    padding: 10px 18px;
  }
  
  .hero-stat-number {
    font-size: 1.3rem;
  }
  
  .hero-ctas {
    flex-direction: column;
    align-items: center;
  }
  
  .btn-hero-primary,
  .btn-hero-secondary {
    width: 100%;
    max-width: 300px;
    text-align: center;
  }
  
  /* Navigation */
  .sticky-nav{padding:0.5rem 0}
  .nav-logo{font-size:1.125rem}
  .nav-links{display:none!important}
  .nav-mobile-toggle{display:flex!important}
  .nav-secondary{display:none}
  .nav-lang{order:2}
  
  /* Sections Mobile */
  .featured-section,
  .tonight-section,
  .thisweek-section,
  .popular-section,
  .categories-section,
  .guide-section,
  .guides-section,
  .faq-section,
  .events-section {
    padding: 48px 0;
  }
  
  /* Events - Thumbnail Grid Responsive */
  .event-grid-thumbnails {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  /* Events - List Grid Responsive */
  .event-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  /* Event Card Legacy Fields Mobile */
  .event-date, .event-time, .event-location, .event-music {
    font-size: 0.8rem;
  }
  
  /* Buttons */
  .btn{font-size:0.9rem;padding:0.75rem 1.5rem}
  
  /* Search Mobile */
  .search-wrapper {
    flex-direction: column;
    border-radius: var(--radius-lg);
    padding: 12px;
  }
  
  .search-wrapper .btn,
  .search-wrapper button {
    width: 100%;
    text-align: center;
  }
  
  /* Footer */
  .footer-content{grid-template-columns:1fr;gap:2rem;text-align:left}
  .site-footer{padding:2rem 0 1rem}
  
  /* Filters Mobile — compact sticky bar */
  .filter-section {
    padding: 0.5rem 0;
    top: 52px;
  }
  .filter-search-row { margin-bottom: 0.35rem; }
  .filter-search-input { font-size: 0.82rem; padding: 0.4rem 0.65rem 0.4rem 2rem; }
  .filter-search-icon { left: 0.6rem; }
  .filter-pills-row {
    gap: 0.5rem;
  }
  .filter-pills-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .filter-pills-scroll::-webkit-scrollbar { display: none; }
  .filter-btn {
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
    flex-shrink: 0;
  }
  .filter-toggle-btn span { display: none; }
  .filter-toggle-btn { padding: 0.5rem; }
  .filter-advanced.open { margin-top: 0.5rem; }
  .filter-advanced-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .filter-input-compact,
  .filter-select-compact {
    min-width: auto;
    width: 100%;
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }
  .filter-group-compact label { font-size: 0.62rem; }
  .filter-clear-link {
    grid-column: 1 / -1;
    text-align: center;
    padding: 0.25rem 0;
  }

  /* Legacy compat */
  .filters { flex-direction: column; gap: 12px; }
  .filter-buttons { justify-content: center; }
  .filter-row { flex-direction: column; align-items: stretch; }
  .filter-group { flex-direction: column; width: 100%; }
  .filter-select,.filter-input,.date-input,.music-select { width: 100%; }
  
  /* Guides Mobile */
  .guide-grid {
    grid-template-columns: 1fr;
  }
  
  .guide-card {
    padding: 1.25rem;
    min-height: 180px;
  }
  
  .guide-card h3 {
    font-size: 1.125rem;
  }
  
  .guide-card p {
    font-size: 0.9rem;
  }
  
  .grid-3,.grid-2{grid-template-columns:1fr;gap:1rem}
  
  /* Back to Top Mobile */
  .back-to-top {
    bottom: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }
  
  /* Blog / Content */
  .guide-content,.blog-content,.article-content,.content{padding:1rem}
  .guide-content img,.blog-content img,.article-content img{margin:1rem 0;border-radius:8px}
  
  /* FAQ Mobile */
  .faq-question {
    padding: 16px 20px;
    font-size: 0.95rem;
  }
  
  .faq-answer {
    padding: 0 20px 16px;
  }
  
  /* Prevent horizontal scroll */
  body{overflow-x:hidden}
  img{max-width:100%;height:auto}
  
  /* Better tap targets */
  a,button,.btn,.nav-link,.filter-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  
  /* Info boxes on mobile */
  .info-box,.tip-box,.tradition-box,.highlight-box{padding:1rem;margin:1rem 0}
}

/* === UTILITY CLASSES === */
/* Text */
.text-center{text-align:center}
.text-white{color:var(--text-white)!important}
.text-light{color:var(--text-light)!important}
.text-dark{color:var(--text-dark)!important}
.text-sm{font-size:0.875rem}
.text-no-decoration{text-decoration:none}
.line-height-relaxed{line-height:1.8}
.line-height-normal{line-height:1.7}

/* Backgrounds */
.bg-gradient-gold{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-end) 100%)!important}
.bg-gradient-purple{background:linear-gradient(135deg,#6B46C1 0%,#7C2D5E 100%)!important}
.bg-navy{background:var(--navy)!important}
.bg-white{background:var(--bg-white)!important}
.bg-page{background:#FFFFFF;padding:var(--spacing-3xl) 0;min-height:100vh}

/* Layout */
.relative{position:relative}
.z-1{z-index:1}
.hidden{display:none}
.block{display:block}

/* Opacity */
.opacity-70{opacity:0.7}

/* List */
.list-none{list-style:none}
.list-none-muted{list-style:none;opacity:0.7}

/* Margins */
.m-0{margin:0}
.mb-xs{margin-bottom:var(--spacing-xs)}
.mb-sm{margin-bottom:var(--spacing-sm)}
.mb-md{margin-bottom:var(--spacing-md)}
.mb-lg{margin-bottom:var(--spacing-lg)}
.mb-xl{margin-bottom:var(--spacing-xl)}
.mb-2xl{margin-bottom:var(--spacing-2xl)}
.mb-3xl{margin-bottom:var(--spacing-3xl)}
.mb-0-5{margin-bottom:0.5rem}
.mb-1{margin-bottom:1rem}
.mb-1-5{margin-bottom:1.5rem}
.mb-3{margin-bottom:3rem}

/* Padding */
.p-md{padding:var(--spacing-md)}
.p-lg{padding:var(--spacing-lg)}
.p-xl{padding:var(--spacing-xl)}
.p-1-5{padding:1.5rem}
.py-3xl{padding-top:var(--spacing-3xl);padding-bottom:var(--spacing-3xl)}

/* Cards */
.card-white{background:white;border-radius:var(--radius);padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 2px 10px rgba(0,0,0,0.05)}
.card-link{display:block;padding:var(--spacing-md);background:var(--bg-white);border:2px solid #E5E5E5;border-radius:var(--radius);text-decoration:none;transition:all 200ms}
.card-link:hover{border-color:var(--pink);box-shadow:var(--shadow)}

/* Headline Font */
.font-headline{font-family:'Inter',sans-serif;font-weight:800}
.headline-1-5{font-family:'Inter',sans-serif;font-weight:800;font-size:1.5rem;margin-bottom:1rem}
.headline-md{font-family:'Inter',sans-serif;font-weight:800;margin-bottom:var(--spacing-md)}
.headline-sm{font-family:'Inter',sans-serif;font-weight:800;margin-bottom:var(--spacing-sm)}

/* === DARK SECTION TEXT OVERRIDE === */
/* Exclude .featured-section-gold from global white text override */
.featured-section:not(.featured-section-gold) *:not(.btn):not(.event-item):not(.event-item *),
.tonight-section *:not(.btn):not(.event-item):not(.event-item *),
.popular-section *:not(.btn):not(.event-item):not(.event-item *),
.thisweek-section *:not(.btn):not(.event-item):not(.event-item *),
.site-footer *:not(.btn){color:var(--text-light)!important}

/* Ensure headings on dark backgrounds are bright white */
.featured-section h1,.featured-section h2,.featured-section h3,
.tonight-section h1,.tonight-section h2,.tonight-section h3,
.popular-section h1,.popular-section h2,.popular-section h3,
.thisweek-section h1,.thisweek-section h2,.thisweek-section h3,
.site-footer h1,.site-footer h2,.site-footer h3{color:var(--text-white)!important}

/* === GRID UTILITIES === */
.grid-3{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid-2{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(350px,1fr))}

/* === ENHANCED EVENT DETAIL PAGE === */
.event-detail-header-enhanced{margin-bottom:1.5rem}
.event-detail-title-enhanced{color:var(--text-heading)!important;font-size:clamp(1.5rem,4vw,2.25rem);font-weight:800;line-height:1.2;margin:0}

/* Date/Time Prominent */
.event-datetime-prominent{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.event-datetime-item{flex:1;min-width:180px;display:flex;align-items:center;gap:0.75rem;background:linear-gradient(135deg,rgba(233,30,140,0.06),rgba(233,30,140,0.02));border:1px solid rgba(233,30,140,0.15);border-radius:var(--radius);padding:1rem 1.25rem}
.event-datetime-icon{font-size:1.5rem;flex-shrink:0}
.event-datetime-label{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted)!important;font-weight:600;margin-bottom:0.15rem}
.event-datetime-value{font-size:1rem;font-weight:700;color:var(--text-heading)!important}

/* CTA Hint */
.cta-hint{background:linear-gradient(135deg,var(--pink),#FF69B4);border-radius:var(--radius);padding:1rem 1.5rem;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;transition:transform 150ms,box-shadow 150ms}
.cta-hint:hover{transform:translateY(-1px);box-shadow:var(--shadow-glow-pink)}
.cta-hint-text{color:#fff!important;font-weight:600;font-size:0.95rem;margin:0}
.cta-hint-button{background:#fff;color:var(--pink)!important;border:none;padding:0.5rem 1.25rem;border-radius:var(--radius-full);font-weight:700;font-size:0.85rem;cursor:pointer;white-space:nowrap}

/* Info Grid Enhanced */
.info-grid-enhanced{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:2rem}
.info-item-enhanced{display:flex;gap:0.75rem;align-items:flex-start;padding:1rem;background:var(--bg-cream);border-radius:var(--radius);transition:background 150ms}
.info-item-enhanced:hover{background:#F0EDE8}
.info-item-icon{font-size:1.5rem;flex-shrink:0}
.info-item-content{flex:1}
.info-item-label{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted)!important;font-weight:600;margin-bottom:0.15rem}
.info-item-value{font-size:1rem;font-weight:600;color:var(--text-heading)!important}

/* Share Actions */
.share-actions{display:flex;flex-wrap:wrap;gap:0.75rem}
.btn-share{font-size:0.85rem;padding:0.6rem 1.2rem}

/* CTA Bar (fixed bottom) */
.cta-bar{position:fixed;bottom:0;left:0;right:0;background:rgba(15,27,51,0.97);backdrop-filter:blur(10px);padding:0.75rem 0;z-index:999;transform:translateY(100%);transition:transform 300ms var(--ease-out);box-shadow:0 -4px 20px rgba(0,0,0,0.2)}
.cta-bar.visible{transform:translateY(0)}
.cta-bar-inner{display:flex;gap:0.75rem;justify-content:center}
.cta-bar-btn{flex:1;max-width:220px;font-size:0.9rem;padding:0.75rem 1rem;border-radius:var(--radius-full)}

/* Listing-Only Event Info Box */
.listing-only-info{background:var(--color-gray-100,#f5f5f5);border:2px solid var(--color-gray-200,#e5e5e5);border-radius:var(--radius-lg);padding:var(--spacing-xl);text-align:center;margin:var(--spacing-lg) 0}
.listing-only-icon{font-size:2rem;margin-bottom:var(--spacing-sm)}
.listing-only-text{color:var(--text-dark,#333);font-size:1rem;line-height:1.6;margin-bottom:var(--spacing-xs)}
.listing-only-price{color:var(--text-dark,#333);font-size:1.125rem;margin-top:var(--spacing-sm)}

/* Loading Skeleton */
.loading-skeleton{padding:2rem}
.skeleton-header{height:40px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius);margin-bottom:1.5rem}
.skeleton-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2rem}
.skeleton-info-item{height:60px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius)}
.skeleton-description{height:120px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Error Box */
.error-box{text-align:center;padding:4rem 2rem;max-width:500px;margin:0 auto}
.error-box-icon{font-size:4rem;margin-bottom:1rem}
.error-box-title{font-size:1.5rem;font-weight:700;color:var(--text-heading)!important;margin-bottom:0.75rem}
.error-box-message{color:var(--text-sec)!important;margin-bottom:2rem;line-height:1.6}

/* Ticket Section */
.ticket-section{margin-bottom:2rem}
.ticket-section h2{color:var(--text-heading)!important;font-size:1.5rem;margin-bottom:1rem}
.ticket-card{background:var(--bg-cream);border-radius:var(--radius);overflow:hidden}
.ticket-link{display:block;padding:1.25rem;text-decoration:none;color:inherit;transition:background 150ms}
.ticket-link:hover{background:rgba(0,0,0,0.02)}
.ticket-source{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem}
.source-icon{font-size:1.25rem}
.source-name{font-weight:600;color:var(--text-heading)!important}
.ticket-price{display:block;font-size:1.25rem;font-weight:800;color:var(--pink)!important;margin-bottom:0.5rem}
.ticket-cta{display:inline-block;background:var(--pink);color:#fff!important;padding:0.5rem 1.5rem;border-radius:var(--radius-full);font-weight:700;font-size:0.875rem}
.ticket-attribution{padding:0.75rem 1.25rem;border-top:1px solid rgba(0,0,0,0.05)}
.ticket-attribution small{color:var(--text-muted)!important;font-size:0.75rem}

/* === CHECKOUT PAGE === */
.checkout-section {
  min-height: 80vh;
  padding: 2rem 0;
  background: linear-gradient(180deg, #f8f5f0 0%, #fff 100%);
}

.checkout-container {
  max-width: 720px;
  margin: 0 auto;
}

.checkout-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Steps */
.checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 2rem;
}

.checkout-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: rgba(0,0,0,0.05);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.checkout-step.active {
  background: var(--pink);
  color: #fff;
}

.checkout-step.completed {
  background: #059669;
  color: #fff;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  font-size: 0.75rem;
  font-weight: 700;
}

.checkout-step-line {
  width: 40px;
  height: 2px;
  background: rgba(0,0,0,0.1);
  margin: 0 8px;
}

/* Panel */
.checkout-panel {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  margin-bottom: 1.5rem;
}

.checkout-panel h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1.5rem;
}

/* Cart Items */
.cart-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-item-info {
  flex: 1;
}

.cart-item-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 4px 0;
}

.cart-item-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.qty-btn:hover {
  border-color: var(--pink);
  color: var(--pink);
}

.qty-value {
  font-weight: 700;
  font-size: 1rem;
  min-width: 24px;
  text-align: center;
}

.cart-item-price {
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  min-width: 80px;
  text-align: right;
}

.cart-item-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 4px;
  transition: color 0.2s;
}

.cart-item-remove:hover {
  color: #ef4444;
}

/* Coupon */
.coupon-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.coupon-section label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--navy);
  display: block;
  margin-bottom: 8px;
}

.coupon-row {
  display: flex;
  gap: 8px;
}

.coupon-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
}

.coupon-input:focus {
  outline: none;
  border-color: var(--pink);
}

.coupon-btn {
  white-space: nowrap;
}

.coupon-message {
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 600;
}

.coupon-message.success {
  color: #059669;
}

.coupon-message.error {
  color: #ef4444;
}

/* Totals */
.checkout-totals {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid rgba(0,0,0,0.06);
}

.total-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.95rem;
  color: var(--text-sec);
}

.total-row.discount-row {
  color: #059669;
}

.total-row.total-final {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--navy);
  padding-top: 12px;
  margin-top: 8px;
  border-top: 2px solid var(--navy);
}

/* Actions */
.checkout-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* Login Prompt */
.login-prompt {
  text-align: center;
  padding: 2rem 0;
}

.login-prompt h2 {
  text-align: center;
}

.login-prompt p {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.login-prompt-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Checkout Form */
.checkout-form .form-group {
  margin-bottom: 1.25rem;
}

.checkout-form .form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--navy);
  margin-bottom: 6px;
}

.checkout-form .form-group input,
.checkout-form .form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.checkout-form .form-group input:focus,
.checkout-form .form-group textarea:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(233,30,140,0.1);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 480px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* Payment Summary */
.payment-summary-card {
  background: var(--bg-cream);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.payment-summary-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 4px 0;
}

.payment-summary-card p {
  margin: 4px 0;
  font-size: 0.9rem;
  color: var(--text-sec);
}

.payment-summary-card hr {
  border: none;
  border-top: 1px solid rgba(0,0,0,0.08);
  margin: 1rem 0;
}

.payment-item-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.9rem;
  color: var(--text-sec);
}

.payment-item-row.discount {
  color: #059669;
}

.payment-item-row.total-row {
  font-size: 1.1rem;
  padding-top: 10px;
  margin-top: 8px;
  border-top: 2px solid var(--navy);
  color: var(--navy);
}

.btn-pay {
  font-size: 1.1rem;
  padding: 14px 28px;
}

.payment-secure-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 1rem;
}

/* === AUTH PAGE === */
.auth-main{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem;background:linear-gradient(135deg,#0F1B33 0%,#1B2A4A 40%,#2D1B4A 100%)}
.auth-container{width:100%;max-width:480px}
.auth-box{background:#fff;border-radius:var(--radius-md);padding:2.5rem;box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.auth-box h1{font-size:1.75rem;font-weight:800;color:var(--text-heading);text-align:center;margin-bottom:0.25rem}
.auth-subtitle{text-align:center;color:var(--text-sec);margin-bottom:1.5rem;font-size:0.95rem}

/* Auth Mode Toggle (Login / Sign Up) */
.auth-mode-toggle{display:flex;background:var(--bg-light);border-radius:var(--radius);padding:4px;margin-bottom:1.5rem;gap:4px}
.auth-mode-btn{flex:1;padding:0.65rem 1rem;border:none;background:transparent;border-radius:calc(var(--radius) - 2px);font-weight:600;font-size:0.9rem;color:var(--text-muted);cursor:pointer;transition:all 200ms}
.auth-mode-btn.active{background:#fff;color:var(--text-heading);box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.auth-mode-btn:hover:not(.active){color:var(--text-dark)}

/* User Type Selector */
.user-type-selector{margin-bottom:1.5rem}
.user-type-selector.hidden{display:none}
.user-type-label{font-size:0.85rem;font-weight:600;color:var(--text-sec);margin-bottom:0.75rem;text-transform:uppercase;letter-spacing:0.5px}
.user-type-buttons{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
.user-type-btn{display:flex;flex-direction:column;align-items:center;gap:0.25rem;padding:1rem 0.75rem;border:2px solid #E5E5E5;border-radius:var(--radius);background:#fff;cursor:pointer;transition:all 200ms;text-align:center}
.user-type-btn.active{border-color:var(--pink);background:rgba(233,30,140,0.04)}
.user-type-btn:hover:not(.active){border-color:#ccc}
.user-type-icon{font-size:1.5rem}
.user-type-name{font-weight:700;font-size:0.9rem;color:var(--text-heading)}
.user-type-desc{font-size:0.75rem;color:var(--text-muted)}

/* Auth Forms */
.auth-form{display:flex;flex-direction:column;gap:0}
.auth-form.hidden{display:none}
.auth-form .form-row{display:flex;gap:0.75rem;margin-bottom:0}
.auth-form .form-group-half{flex:1;min-width:0}
.auth-form .form-group{margin-bottom:1rem}
.auth-form .form-group label{display:block;font-size:0.85rem;font-weight:600;color:var(--text-dark);margin-bottom:0.4rem}
.auth-form .form-group input{width:100%;padding:0.75rem 1rem;border:2px solid #E5E5E5;border-radius:var(--radius);font-family:inherit;font-size:0.95rem;color:var(--text-dark);background:#fff;transition:border-color 200ms;box-sizing:border-box}
.auth-form .form-group input:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px rgba(233,30,140,0.1)}
.auth-form .form-group input::placeholder{color:#bbb}
.required{color:var(--pink)}
.optional{color:var(--text-muted);font-weight:400;font-size:0.8rem}
.form-hint{font-size:0.75rem;color:var(--text-muted);margin-top:0.25rem}
.password-match-error{color:#e53e3e;font-size:0.8rem}

/* Auth Checkboxes */
.form-checkbox{display:flex;align-items:flex-start;gap:0.5rem;margin-bottom:1rem}
.form-checkbox input[type="checkbox"]{width:18px;height:18px;margin-top:2px;flex-shrink:0;accent-color:var(--pink);cursor:pointer}
.form-checkbox label{font-size:0.85rem;color:var(--text-sec);line-height:1.4;cursor:pointer}
.form-checkbox label a{color:var(--pink);text-decoration:underline}

/* Auth Button */
.btn-auth{width:100%;padding:0.85rem 1.5rem;font-size:1rem;font-weight:700;border-radius:var(--radius);margin-top:0.5rem;cursor:pointer}

/* Forgot Password */
.forgot-password{text-align:right;margin-bottom:0.5rem;margin-top:-0.5rem}
.forgot-password a{font-size:0.825rem;color:var(--pink);text-decoration:none}
.forgot-password a:hover{text-decoration:underline}

/* Auth Messages */
.auth-message{padding:0.75rem 1rem;border-radius:var(--radius);font-size:0.875rem;margin-bottom:1rem;display:none}
.auth-message.show{display:block}
.auth-message.error{background:rgba(229,62,62,0.08);color:#e53e3e;border:1px solid rgba(229,62,62,0.2)}
.auth-message.success{background:rgba(5,150,105,0.08);color:#059669;border:1px solid rgba(5,150,105,0.2)}
.required{color:#e53e3e;font-weight:600}
.required-legend{font-size:0.8rem;color:var(--text-medium);margin-bottom:1rem}
.required-legend .required{font-size:0.9rem}

/* Auth Footer */
.auth-footer{text-align:center;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #E5E5E5}
.auth-footer a{color:var(--pink);text-decoration:none;font-weight:600;font-size:0.9rem}
.auth-footer a:hover{text-decoration:underline}

/* Organizer CTA */
.organizer-cta{text-align:center;margin-top:1rem;font-size:0.85rem;color:var(--text-sec)}
.organizer-cta a{color:var(--pink);font-weight:600;text-decoration:none}

/* Reset Instructions */
.reset-instructions{color:var(--text-sec);font-size:0.9rem;line-height:1.5;margin-bottom:1.25rem}

/* Auth responsive */
@media(max-width:480px){
  .auth-box{padding:1.5rem;border-radius:var(--radius)}
  .user-type-buttons{grid-template-columns:1fr}
}

/* === ORGANIZERS PAGE === */

/* Hero */
.org-hero{background:linear-gradient(135deg,var(--navy-deep) 0%,#1a0a2e 50%,#2d1b4e 100%);color:#fff;padding:5rem 0 4rem;text-align:center;position:relative;overflow:hidden}
.org-hero::before{content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;background:radial-gradient(circle,rgba(233,30,140,0.15) 0%,transparent 70%);pointer-events:none}
.org-hero::after{content:'';position:absolute;bottom:-30%;left:-10%;width:400px;height:400px;background:radial-gradient(circle,rgba(99,102,241,0.12) 0%,transparent 70%);pointer-events:none}
.org-hero .container{position:relative;z-index:1;max-width:720px}
.org-hero-badge{display:inline-block;background:rgba(233,30,140,0.15);border:1px solid rgba(233,30,140,0.3);color:var(--pink);font-size:0.8rem;font-weight:600;padding:0.4rem 1rem;border-radius:99px;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:1.5rem}
.org-hero-title{font-size:clamp(2.2rem,6vw,3.5rem);font-weight:800;line-height:1.1;margin:0 0 1.25rem;letter-spacing:-0.02em;color:#fff!important}
.org-hero-title br{display:block}
.org-hero-sub{font-size:1.1rem;line-height:1.6;color:rgba(255,255,255,0.7);margin:0 auto 2rem;max-width:560px}
.org-hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:3rem}
.btn-org-primary{display:inline-flex;align-items:center;gap:0.5rem;background:var(--pink);color:#fff!important;font-weight:700;font-size:1rem;padding:0.9rem 2rem;border-radius:99px;text-decoration:none;transition:all 200ms;border:none;cursor:pointer}
.btn-org-primary:hover{background:#d4187c;transform:translateY(-2px);box-shadow:0 8px 25px rgba(233,30,140,0.3)}
.btn-org-ghost{display:inline-flex;align-items:center;gap:0.5rem;background:transparent;color:rgba(255,255,255,0.8)!important;font-weight:600;font-size:1rem;padding:0.9rem 2rem;border-radius:99px;text-decoration:none;border:1px solid rgba(255,255,255,0.2);transition:all 200ms}
.btn-org-ghost:hover{background:rgba(255,255,255,0.08);color:#fff!important;border-color:rgba(255,255,255,0.4)}
.org-hero-stats{display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap}
.org-hero-stat{font-size:0.9rem;color:rgba(255,255,255,0.75)}
.org-hero-stat strong{display:block;font-size:1.5rem;color:#fff;font-weight:800;margin-bottom:0.15rem}

/* Section title */
.org-section-title{font-size:clamp(1.5rem,4vw,2.25rem);font-weight:800;color:var(--text-heading);text-align:center;margin:0 0 3rem;letter-spacing:-0.02em}

/* Benefits */
.org-benefits{padding:5rem 0;background:#fff}
.org-benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.org-benefit{padding:2rem;border-radius:16px;border:1px solid #f0f0f0;transition:all 250ms}
.org-benefit:hover{border-color:rgba(233,30,140,0.2);box-shadow:0 8px 30px rgba(0,0,0,0.06);transform:translateY(-4px)}
.org-benefit-num{font-size:0.75rem;font-weight:800;color:var(--pink);letter-spacing:0.1em;margin-bottom:1rem;font-family:monospace}
.org-benefit h3{font-size:1.1rem;font-weight:700;color:var(--text-heading);margin:0 0 0.75rem}
.org-benefit p{font-size:0.92rem;line-height:1.65;color:var(--text-muted);margin:0}

/* Steps */
.org-steps{padding:5rem 0;background:var(--bg-warm)}
.org-steps-grid{display:flex;align-items:flex-start;gap:1rem;justify-content:center}
.org-step{flex:1;max-width:280px;text-align:center;padding:2rem 1.5rem;background:#fff;border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,0.04)}
.org-step-icon{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,rgba(233,30,140,0.1),rgba(99,102,241,0.1));display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;color:var(--pink)}
.org-step-label{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--pink);margin-bottom:0.5rem}
.org-step-content h3{font-size:1.05rem;font-weight:700;color:var(--text-heading);margin:0 0 0.5rem}
.org-step-content p{font-size:0.88rem;line-height:1.6;color:var(--text-muted);margin:0}
.org-step-arrow{font-size:1.5rem;color:var(--pink);align-self:center;margin-top:2rem;font-weight:300}

/* Pricing */
.org-pricing{padding:5rem 0;background:#fff}
.org-pricing-card{max-width:420px;margin:0 auto;background:#fff;border:2px solid var(--pink);border-radius:20px;padding:2.5rem;text-align:center;position:relative;box-shadow:0 12px 40px rgba(233,30,140,0.1)}
.org-pricing-tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--pink);color:#fff;font-size:0.75rem;font-weight:700;padding:0.35rem 1.25rem;border-radius:99px;text-transform:uppercase;letter-spacing:0.05em}
.org-pricing-amount{font-size:3.5rem;font-weight:900;color:var(--text-heading);margin:1rem 0 0.5rem;letter-spacing:-0.03em}
.org-pricing-amount span{font-size:1rem;font-weight:500;color:var(--text-muted)}
.org-pricing-desc{font-size:0.95rem;color:var(--text-muted);margin-bottom:2rem}
.org-pricing-list{list-style:none;padding:0;margin:0 0 2rem;text-align:left}
.org-pricing-list li{padding:0.6rem 0;border-bottom:1px solid #f5f5f5;font-size:0.92rem;color:var(--text-dark);display:flex;align-items:center;gap:0.75rem}
.org-pricing-list li::before{content:'✓';display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(233,30,140,0.1);color:var(--pink);font-size:0.75rem;font-weight:700;flex-shrink:0}

/* FAQ */
.org-faq{padding:5rem 0;background:var(--bg-warm)}
.org-faq-list{max-width:680px;margin:0 auto}
.org-faq-item{border-bottom:1px solid #e5e5e5;margin-bottom:0}
.org-faq-item summary{padding:1.25rem 0;font-size:1rem;font-weight:600;color:var(--text-heading);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.org-faq-item summary::-webkit-details-marker{display:none}
.org-faq-item summary::after{content:'+';font-size:1.4rem;font-weight:300;color:var(--pink);transition:transform 200ms}
.org-faq-item[open] summary::after{content:'−'}
.org-faq-item p{padding:0 0 1.25rem;font-size:0.92rem;line-height:1.7;color:var(--text-muted);margin:0}

/* CTA */
.org-cta{padding:5rem 0;background:linear-gradient(135deg,var(--navy-deep),#1a0a2e);color:#fff;text-align:center}
.org-cta h2{font-size:clamp(1.5rem,4vw,2.25rem);font-weight:800;margin:0 0 1rem;letter-spacing:-0.02em}
.org-cta p{font-size:1.05rem;color:rgba(255,255,255,0.6);margin:0 0 2rem;max-width:480px;margin-left:auto;margin-right:auto}

/* Fallas CTA */
section.fallas-cta{background:linear-gradient(135deg,var(--weed-burgundy) 0%,var(--weed-purple) 100%) !important;padding:var(--spacing-2xl);border-radius:var(--radius-lg);margin-top:var(--spacing-2xl);text-align:center;color:#fff !important}
section.fallas-cta h2{border:none;margin-top:0;color:#fff !important;font-size:clamp(1.5rem,4vw,2.25rem);font-weight:800}
section.fallas-cta p{font-size:1.125rem;max-width:600px;margin:var(--spacing-md) auto var(--spacing-xl);color:rgba(255,255,255,0.85) !important}
a.btn-fallas-cta{display:inline-block;background:var(--weed-coral) !important;color:#fff !important;padding:15px 30px;border-radius:30px;font-weight:700;text-transform:uppercase;text-decoration:none;transition:transform 0.2s,box-shadow 0.2s;font-size:1rem}
a.btn-fallas-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(233,30,140,0.4)}

/* Nights List (barrio pages - Best Nights to Go Out) */
.nights-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.night-item {
  padding: 1rem 1.25rem;
  border-radius: 10px;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.night-item strong {
  color: #fff;
}

.night-green {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

.night-coral {
  background: linear-gradient(135deg, #e91e8c 0%, #f472b6 100%);
}

.night-pink {
  background: linear-gradient(135deg, #ec4899 0%, #f97316 100%);
}

.night-purple {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

/* Barrio CTA (dark gradient sections at bottom of barrio pages) */
section.barrio-cta{color:#fff !important;text-align:center;padding:2rem;border-radius:var(--radius-lg)}
section.barrio-cta h2{color:#fff !important;border:none;margin-top:0}
section.barrio-cta p{color:rgba(255,255,255,0.9) !important}
section.barrio-cta a{color:#fff !important;display:inline-block;background:var(--weed-coral) !important;padding:0.75rem 2rem;border-radius:9999px;text-decoration:none;font-weight:600;transition:transform 0.2s,box-shadow 0.2s}
section.barrio-cta a:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(233,30,140,0.4)}

/* Responsive */
@media(max-width:900px){
    .org-benefits-grid{grid-template-columns:repeat(2,1fr)}
    .org-steps-grid{flex-direction:column;align-items:center}
    .org-step{max-width:400px;width:100%}
    .org-step-arrow{transform:rotate(90deg);margin:0}
    .org-hero-stats{gap:1.5rem}
}
@media(max-width:600px){
    .org-benefits-grid{grid-template-columns:1fr}
    .org-hero{padding:3rem 0 2.5rem}
    .org-hero-actions{flex-direction:column;align-items:center}
    .org-hero-stats{flex-direction:column;gap:0.75rem}
    .org-pricing-card{padding:2rem 1.5rem}
}

/* === DASHBOARD STYLES === */

/* Dashboard Body & Layout */
.dashboard-body {
  background-color: #0f0f23;
  color: #e0e0f0;
  font-family: 'Inter', sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* Dashboard text overrides: global h1-h3 and label rules use dark colors,
   so we must override them for the dark dashboard background.
   White-bg cards (.account-action-item, .notification-item, .activity-log)
   have their own dark text CSS and don't need overrides here. */
.dashboard-body h1,.dashboard-body h2,.dashboard-body h3,.dashboard-body h4{color:#fff!important}
.dashboard-body p,.dashboard-body label,.dashboard-body .section-desc,.dashboard-body .tagline{color:rgba(255,255,255,0.8)!important}
.dashboard-body .form-hint{color:rgba(255,255,255,0.6)!important}

/* Dashboard form inputs: override global .form-group rules that force dark text */
.dashboard-body .form-group label{color:rgba(255,255,255,0.85)!important}
.dashboard-body .form-group input,
.dashboard-body .form-group textarea,
.dashboard-body .form-group select{color:#e0e0f0!important;background:rgba(255,255,255,0.06)!important;border-color:rgba(255,255,255,0.12)!important}
.dashboard-body .form-group input::placeholder,
.dashboard-body .form-group textarea::placeholder{color:rgba(255,255,255,0.35)!important}
.dashboard-body .form-group input:focus,
.dashboard-body .form-group textarea:focus,
.dashboard-body .form-group select:focus{border-color:var(--pink)!important;box-shadow:0 0 0 3px rgba(233,30,140,0.1)}
.dashboard-body .filter-select{color:#e0e0f0!important;background:rgba(255,255,255,0.06)!important;border-color:rgba(255,255,255,0.12)!important}

/* White-background elements inside dashboard: revert to dark text */
.dashboard-body .account-action-item h3,.dashboard-body .account-action-item h4,.dashboard-body .account-action-info h3,.dashboard-body .account-action-info h4{color:#1a1a2e!important}
.dashboard-body .account-action-item p,.dashboard-body .account-action-info p{color:var(--text-muted)!important}
.dashboard-body .notification-item h4{color:#1a1a2e!important}
.dashboard-body .notification-item p,.dashboard-body .notification-item span,.dashboard-body .notification-item label{color:var(--text-dark)!important}
.dashboard-body .activity-content p,.dashboard-body .activity-content strong{color:#333!important}
.dashboard-body .activity-time{color:var(--text-muted)!important}
.dashboard-body .activity-log .form-hint{color:var(--text-muted)!important}
.dashboard-body .activity-log p{color:#333!important}
.dashboard-body .danger-actions p{color:#991b1b!important}
.dashboard-body .warning-text{color:rgba(255,255,255,0.85)!important}

.dashboard-layout {
  display: flex;
  flex: 1;
  gap: 0;
  min-height: calc(100vh - 60px);
  background: #0f0f23;
}

.dashboard-header {
  background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2e 100%);
  color: #fff;
  padding: 0 var(--spacing-lg);
  height: 50px;
  border-bottom: 2px solid rgba(233, 30, 140, 0.3);
  position: relative;
  z-index: 50;
}

.dashboard-header > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 100%;
  padding: 0;
}

.dashboard-header .header-left,
.dashboard-header .header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.dashboard-header .header-left {
  flex: 1;
}

.dashboard-header .header-right {
  justify-content: flex-end;
}

.dashboard-header .nav-logo {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
}

.dashboard-header .user-name {
  color: rgba(255,255,255,0.9);
  font-size: 0.9rem;
}

.dashboard-header .btn-secondary {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  border-radius: 6px;
}

.dashboard-header .btn-secondary:hover {
  background: rgba(255,255,255,0.2);
}

/* Sidebar */
.dashboard-sidebar {
  width: 240px;
  min-width: 240px;
  background: linear-gradient(180deg, #0a0a1a 0%, #1a0a2e 100%);
  color: #fff;
  padding: var(--spacing-lg) 0;
  overflow-y: auto;
  border-right: 1px solid rgba(233, 30, 140, 0.15);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: sticky;
  top: 50px;
  transition: transform 0.3s ease;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.sidebar-link:hover {
  color: #fff;
  background: rgba(233, 30, 140, 0.1);
}

.sidebar-link.active {
  color: #fff;
  background: rgba(233, 30, 140, 0.15);
  border-left-color: #e91e8c;
  font-weight: 600;
}

.sidebar-icon {
  font-size: 1.3rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-footer {
  padding: var(--spacing-lg);
  border-top: 1px solid rgba(255,255,255,.1);
}

.sidebar-cta {
  display: block;
  background: linear-gradient(135deg, var(--pink) 0%, #ff69b4 100%);
  color: #fff;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  text-decoration: none;
  text-align: center;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
  cursor: pointer;
}

.sidebar-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(233,30,140,.3);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.5);
  z-index: 99;
}

.sidebar-overlay.active {
  display: block;
}

/* Main Content */
.dashboard-main {
  flex: 1;
  padding: var(--spacing-2xl);
  overflow-y: auto;
  background: linear-gradient(180deg, #0f0f23 0%, #1a1a35 50%, #12122a 100%);
  color: #e0e0f0;
}

/* Dashboard Sections */
.dashboard-section {
  display: none;
  animation: fadeIn 0.3s ease;
}

.dashboard-section.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Section Header */
.section-header {
  margin-bottom: var(--spacing-2xl);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}

.section-header-left,
.section-header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.section-header-right {
  justify-content: flex-end;
}

.section-header h1 {
  font-size: 1.875rem;
  font-weight: 700;
  margin: 0;
  color: #fff;
}

.section-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  color: #fff;
}

.section-desc {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.5);
  margin: var(--spacing-sm) 0 0 0;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
}

.stats-grid.large {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.stat-card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
  transition: all 0.3s ease;
  border-left: 4px solid var(--pink);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 4px solid var(--pink);
}

.stat-card:hover {
  box-shadow: 0 8px 24px rgba(233,30,140,.15);
  transform: translateY(-4px);
  background: rgba(255,255,255,0.08);
}

.stat-card:nth-child(2) {
  border-left-color: var(--weed-purple, #7b2ff7);
}

.stat-card:nth-child(3) {
  border-left-color: #06b6d4;
}

.stat-card:nth-child(4) {
  border-left-color: #10b981;
}

.stat-icon {
  font-size: 2rem;
  margin-bottom: var(--spacing-md);
}

.stat-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.stat-value {
  font-size: 1.875rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.stat-label {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}

/* Tables */
.data-table,
.users-table-container,
.events-table-container,
.reservations-table-container {
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}

.users-table-container,
.events-table-container,
.reservations-table-container {
  overflow: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.data-table thead {
  background-color: rgba(255,255,255,0.06);
  border-bottom: 2px solid rgba(255,255,255,0.08);
}

.data-table thead th {
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: left;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

.data-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background-color 0.2s ease;
}

.data-table tbody tr:hover {
  background-color: rgba(255,255,255,0.06);
}

.data-table tbody tr:nth-child(even) {
  background-color: rgba(255,255,255,0.02);
}

.data-table tbody td {
  padding: var(--spacing-md) var(--spacing-lg);
  vertical-align: middle;
  color: #e0e0f0;
}

.filter-bar {
  background: rgba(255,255,255,0.04);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.filter-select {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  background-color: rgba(255,255,255,0.06);
  color: #e0e0f0;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.filter-select:hover,
.filter-select:focus {
  border-color: var(--pink);
  outline: none;
}

.filter-bar input[type="text"],
.filter-bar input[type="search"] {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #e0e0f0;
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
}

.filter-bar input::placeholder {
  color: rgba(255,255,255,0.4);
}

/* Forms */
.form-card {
  background: rgba(255,255,255,0.04);
  padding: var(--spacing-xl);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
  margin-bottom: var(--spacing-lg);
  border: 1px solid rgba(255,255,255,0.06);
  color: #e0e0f0;
}

.form-card.danger {
  border-left: 4px solid #ef4444;
}

.form-group {
  margin-bottom: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.form-group label {
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  font-size: 0.95rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
  padding: var(--spacing-md);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  background-color: rgba(255,255,255,0.06);
  color: #e0e0f0;
  transition: border-color 0.2s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="date"]:focus,
.form-group input[type="number"]:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(233,30,140,.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 400;
}

.form-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: var(--spacing-xl);
}

.form-message {
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-lg);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.form-message.success {
  background-color: rgba(22,163,74,0.15);
  color: #4ade80;
  border: 1px solid rgba(74,222,128,0.3);
}

.form-message.error {
  background-color: rgba(239,68,68,0.15);
  color: #fca5a5;
  border: 1px solid rgba(252,165,165,0.3);
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--pink);
}

.form-checkbox label {
  margin: 0;
  cursor: pointer;
}

.settings-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
}

/* Account section cards need full width — the action items with buttons don't fit in narrow columns */
#account .settings-cards {
  grid-template-columns: 1fr;
  max-width: 700px;
}

.settings-form {
  background: rgba(255,255,255,0.04);
  padding: var(--spacing-xl);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,0.06);
  color: #e0e0f0;
}

/* Status & Badges */
.dashboard-badge {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dashboard-badge.admin {
  background-color: #fce7f3;
  color: var(--pink);
}

.dashboard-badge.organizer {
  background-color: #ede9fe;
  color: var(--weed-purple, #7b2ff7);
}

.dashboard-badge.participant {
  background-color: #cffafe;
  color: #0891b2;
}

.status-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.status-badge.active {
  background-color: #dcfce7;
  color: #166534;
}

.status-badge.inactive {
  background-color: #f3f4f6;
  color: #6b7280;
}

.status-badge.pending {
  background-color: #fef3c7;
  color: #92400e;
}

.status-badge.featured {
  background-color: #fce7f3;
  color: #831843;
}

.status-badge.participant {
  background-color: #cffafe;
  color: #0891b2;
}

.status-badge.organizer {
  background-color: #ede9fe;
  color: #5b21b6;
}

.status-badge.admin {
  background-color: #fee2e2;
  color: #7f1d1d;
}

.status-badge.confirmed {
  background-color: #d1fae5;
  color: #065f46;
}

.status-badge.cancelled {
  background-color: #fed7aa;
  color: #92400e;
}

/* Action Buttons */
.action-buttons {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.action-buttons-inline {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.action-btn {
  padding: var(--spacing-xs) var(--spacing-md);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-sm);
  background-color: #fff;
  color: #333;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.action-btn:hover {
  background-color: #f5f5f5;
  border-color: #ccc;
}

.action-btn.edit {
  color: #2563eb;
  border-color: #2563eb;
}

.action-btn.edit:hover {
  background-color: #eff6ff;
}

.action-btn.delete {
  color: #ef4444;
  border-color: #ef4444;
}

.action-btn.delete:hover {
  background-color: #fef2f2;
}

.action-btn.toggle {
  color: var(--pink);
  border-color: var(--pink);
}

.action-btn.toggle:hover {
  background-color: #fce7f3;
}

.action-btn.active {
  background-color: var(--pink);
  color: #fff;
  border-color: var(--pink);
}

.action-btn.active:hover {
  background-color: var(--pink-dark);
  border-color: var(--pink-dark);
}

.action-btn.duplicate {
  color: #8b5cf6;
  border-color: #8b5cf6;
}

.action-btn.duplicate:hover {
  background-color: #faf5ff;
}

.quick-actions {
  background: #fff;
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  color: #1a1a2e;
}

.quick-actions h3 {
  color: #1a1a2e;
}

/* Activity Log */
.activity-log {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.activity-item {
  padding: var(--spacing-lg);
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  gap: var(--spacing-lg);
  transition: background-color 0.2s ease;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-item:hover {
  background-color: #fafafa;
}

.activity-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.activity-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.activity-content p {
  margin: 0;
  color: #333;
  font-weight: 500;
}

.activity-time {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Loading & Empty States */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3xl) var(--spacing-lg);
  gap: var(--spacing-md);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e0e0e0;
  border-top-color: var(--pink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.empty-state {
  text-align: center;
  padding: var(--spacing-3xl) var(--spacing-lg);
  color: rgba(255,255,255,0.5);
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: var(--spacing-lg);
}

.empty-state p {
  margin: 0;
  font-size: 1rem;
  color: rgba(255,255,255,0.5);
}

.empty-state h3 {
  color: rgba(255,255,255,0.7);
}

/* Modals */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
}

.modal-overlay.active {
  display: flex;
}

.modal-content {
  background: #fff;
  border-radius: var(--radius-lg);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 25px rgba(0,0,0,.2);
}

.modal-header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a2e;
}

.modal-body {
  padding: var(--spacing-lg);
}

.modal-footer {
  padding: var(--spacing-lg);
  border-top: 1px solid #e0e0e0;
  display: flex;
  gap: var(--spacing-md);
  justify-content: flex-end;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.modal-close:hover {
  color: #1a1a2e;
}

.modal-message {
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
  font-size: 0.9rem;
}

.modal-message.success {
  background-color: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.modal-message.error {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Account Settings */
.account-actions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.account-action-item {
  background: #fff;
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  border: 1px solid #e0e0e0;
  transition: all 0.2s ease;
  cursor: pointer;
}

.account-action-item .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.account-action-item:hover {
  border-color: var(--pink);
  box-shadow: 0 4px 12px rgba(233,30,140,.1);
}

.account-action-info {
  flex: 1;
}

.account-action-info h3 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a2e;
}

.account-action-info p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.danger-actions {
  background: #fef2f2;
  padding: var(--spacing-xl);
  border-radius: var(--radius-md);
  border: 1px solid #fee2e2;
}

.danger-actions h3 {
  margin: 0 0 var(--spacing-lg) 0;
  color: #991b1b;
  font-size: 1.1rem;
}

.delete-warning {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-lg);
  color: #991b1b;
  font-size: 0.9rem;
}

.delete-step {
  display: none;
  padding: var(--spacing-lg);
  background: #fff;
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-lg);
}

.delete-step.active {
  display: block;
}

.warning-text {
  color: #ef4444;
  font-weight: 600;
  font-size: 0.95rem;
}

/* Notifications */
.notification-settings {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.notification-item {
  background: #fff;
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e0e0e0;
}

.notification-item h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a1a2e;
}

.notification-item p {
  margin: var(--spacing-xs) 0 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 28px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--pink);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

/* Mobile Navigation */
.burger-menu {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  gap: var(--spacing-sm);
}

.burger-icon {
  width: 24px;
  height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.burger-icon span {
  width: 100%;
  height: 3px;
  background-color: #1a1a2e;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.burger-menu.active .burger-icon span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.burger-menu.active .burger-icon span:nth-child(2) {
  opacity: 0;
}

.burger-menu.active .burger-icon span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

.dashboard-mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #e0e0e0;
  z-index: 99;
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  justify-content: space-around;
  align-items: center;
  height: 70px;
  padding-bottom: 0;
}

@media (max-width: 1024px) {
  .dashboard-mobile-nav {
    display: flex;
  }
}

.mobile-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--spacing-sm);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  transition: color 0.2s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  color: var(--pink);
}

.mobile-nav-icon {
  font-size: 1.5rem;
}

/* Password Input */
.password-input-group {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1rem;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.password-toggle:hover {
  color: var(--pink);
}

/* User Menu */
.user-menu {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.user-name {
  font-weight: 600;
  color: #e0e0f0;
  font-size: 0.95rem;
}

/* Cards & Grid Items */
.reservations-grid,
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
}

.reservation-card,
.event-card-mini {
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  color: #e0e0f0;
}

.reservation-card:hover,
.event-card-mini:hover {
  box-shadow: 0 8px 24px rgba(233,30,140,.15);
  transform: translateY(-4px);
  border-color: var(--pink);
  background: rgba(255,255,255,0.08);
}

.card-actions {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-top: 1px solid rgba(255,255,255,0.08);
  justify-content: flex-end;
}

/* Info List */
.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.info-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--spacing-lg);
}

.info-label {
  font-weight: 600;
  color: #555;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-value {
  color: #1a1a2e;
  word-break: break-word;
  font-weight: 500;
}

/* Utility Classes */
.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.dashboard-section:not(.active) {
  display: none;
}

.hidden {
  display: none;
}

.hide-mobile {
  display: block;
}

.optional {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.btn-sm {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid #e0e0e0;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.btn-sm:hover {
  background-color: #f5f5f5;
  border-color: #ccc;
}

.btn-danger {
  background-color: #ef4444;
  color: #fff;
  border-color: #ef4444;
}

.btn-danger:hover {
  background-color: #dc2626;
  border-color: #dc2626;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .dashboard-layout {
    min-height: calc(100vh - 60px - 70px);
  }

  .dashboard-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    border-radius: 0;
    box-shadow: 2px 0 12px rgba(0,0,0,.3);
  }

  .dashboard-sidebar.active {
    transform: translateX(0);
  }

  .sidebar-overlay.active {
    display: block;
    z-index: 999;
  }

  .burger-menu {
    display: flex;
  }

  .dashboard-main {
    padding: var(--spacing-lg);
    padding-bottom: 90px;
  }

  .hide-mobile {
    display: none;
  }
}

@media (max-width: 768px) {
  .dashboard-main {
    padding: var(--spacing-md);
    padding-bottom: 90px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-select {
    width: 100%;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions button,
  .form-actions a {
    width: 100%;
  }

  .settings-cards {
    grid-template-columns: 1fr;
  }

  .reservations-grid,
  .events-grid {
    grid-template-columns: 1fr;
  }

  .modal-content {
    max-width: 100%;
    border-radius: 12px 12px 0 0;
  }

  .section-header h1,
  .section-header h2 {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .dashboard-header {
    padding: var(--spacing-sm) var(--spacing-md);
    height: auto;
    min-height: 50px;
  }

  .header-left,
  .header-right {
    gap: var(--spacing-sm);
  }

  .dashboard-sidebar {
    width: 100%;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .data-table {
    font-size: 0.85rem;
  }

  .data-table thead th,
  .data-table tbody td {
    padding: var(--spacing-sm);
  }

  .action-buttons {
    flex-direction: column;
    width: 100%;
  }

  .action-buttons button,
  .action-buttons a {
    width: 100%;
    justify-content: center;
  }

  .info-item {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .modal-footer {
    flex-direction: column;
  }

  .modal-footer button,
  .modal-footer a {
    width: 100%;
  }
}

/* === PRINT STYLES === */
@media print {
  /* Hide navigation and footer */
  .sticky-nav,
  .site-footer,
  .back-to-top,
  nav,
  .nav-mobile-toggle,
  .nav-dropdown,
  .nav-dropdown-content,
  .lang-btn,
  .btn-dismiss,
  [role="navigation"] {
    display: none !important;
  }

  /* Hide interactive buttons */
  .btn,
  button,
  [onclick],
  .share-buttons,
  .filter-btn,
  .btn-primary,
  .btn-secondary,
  .btn-tertiary,
  a[href*="javascript"] {
    display: none !important;
  }

  /* Basic print styles */
  body {
    color: #000 !important;
    background: #fff !important;
    font-size: 12pt;
    line-height: 1.5;
  }

  /* Remove shadows, borders, and decorative elements */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Keep links underlined in print */
  a {
    text-decoration: underline;
    color: #000;
  }

  /* Headings and text */
  h1, h2, h3, h4, h5, h6 {
    color: #000 !important;
    page-break-after: avoid;
  }

  /* Avoid page breaks in content */
  .event-card,
  .blog-card,
  .guides-category-card {
    page-break-inside: avoid;
  }

  /* Remove background images and colors on print */
  .hero,
  .section-hero,
  [style*="background-image"] {
    background-image: none !important;
    background-color: transparent !important;
  }

  /* Print-friendly margins */
  body {
    margin: 0;
    padding: 0;
  }

  main,
  article,
  section {
    margin: 0;
    padding: 1cm;
  }
}

/* ==========================================================================
   404 Error Page
   ========================================================================== */
.error-container{min-height:calc(100vh - 200px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;background:linear-gradient(135deg,#FAF6F0 0%,#FFF 100%)}
.error-emoji{font-size:5rem;margin-bottom:1.5rem;display:block;animation:bounce 2s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
.error-title{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;margin-bottom:0.5rem;color:#1B2A4A}
.error-code{font-size:1.25rem;color:#E91E8C;font-weight:700;margin-bottom:1rem}
.error-message{font-size:1.05rem;color:#555;max-width:500px;text-align:center;margin-bottom:2.5rem;line-height:1.6}
.error-links{display:flex;flex-direction:column;gap:1rem;max-width:400px;width:100%;margin-bottom:3rem}
.error-suggestions{background:#FFF;border:1px solid rgba(27,42,74,0.1);border-radius:16px;padding:2rem;max-width:600px;margin-top:2rem}
.error-suggestions h3{font-size:1.1rem;color:#1B2A4A;margin-bottom:1.25rem;font-weight:700}
.suggestions-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;list-style:none;padding:0;margin:0}
.suggestions-list li{padding:0}
.suggestions-list a{display:inline-flex;align-items:center;gap:0.5rem;color:#1B2A4A;text-decoration:none;font-weight:500;padding:0.75rem 1rem;background:rgba(233,30,140,0.08);border-radius:8px;transition:all 200ms}
.suggestions-list a:hover{background:rgba(233,30,140,0.15);color:#E91E8C;transform:translateX(4px)}
@media(max-width:600px){.error-links{flex-direction:column}.error-emoji{font-size:3rem}.error-suggestions{padding:1.5rem}}

/* ==========================================================================
   Offline Page
   ========================================================================== */
.offline-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center;padding:2rem;background:linear-gradient(135deg,#1B2A4A 0%,#2D1B4E 100%);color:#FAF6F0}
.offline-icon{font-size:4rem;margin-bottom:1rem}
.offline-title{font-size:2rem;font-weight:700;margin-bottom:1rem;color:#fff}
.offline-text{font-size:1.125rem;opacity:0.9;max-width:500px;margin-bottom:2rem}
.btn-retry{background:#E91E8C;color:#fff;padding:0.875rem 2rem;border-radius:50px;border:none;font-weight:700;font-size:1rem;cursor:pointer;transition:all 200ms}
.btn-retry:hover{background:#C4166F;transform:translateY(-2px)}

/* ==========================================================================
   Order Confirmation Page
   ========================================================================== */
/* order-confirmation bounce uses the shared @keyframes bounce above */
.order-confirmation{min-height:calc(100vh - 300px);display:flex;flex-direction:column;justify-content:flex-start}
@media(max-width:640px){.order-success{padding:40px 24px 35px!important}#success-title{font-size:32px!important}#success-subtitle{font-size:16px!important}.order-number{font-size:24px!important}.order-actions{flex-direction:column!important}.order-actions .btn{width:100%!important}}

/* ==========================================================================
   Payouts & Finances Dashboard
   ========================================================================== */

/* Finance Warning Banner */
.finance-warning{display:flex;align-items:center;gap:16px;padding:16px 20px;background:linear-gradient(135deg,rgba(245,158,11,0.15),rgba(245,158,11,0.08));border:1px solid rgba(245,158,11,0.3);border-radius:12px;margin-bottom:24px}
.finance-warning-icon{font-size:2rem;flex-shrink:0}
.finance-warning p{margin:4px 0 0;font-size:0.875rem;opacity:0.85}
.finance-warning .btn{flex-shrink:0;white-space:nowrap}

/* Payout Status Badge */
.payout-status-badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:20px;font-size:0.75rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:0.5px}

/* Cycle Amount in activity items */
.cycle-amount{font-weight:700;font-size:1rem;color:#10b981;white-space:nowrap;margin-left:auto}
.activity-item{display:flex;align-items:center;gap:12px}

/* Payout Info Steps */
.payout-info-list{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.payout-info-item{display:flex;align-items:flex-start;gap:16px}
.payout-info-step{display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;border-radius:50%;background:linear-gradient(135deg,#E91E8C,#FF6B6B);color:#fff;font-weight:800;font-size:0.875rem}
.payout-info-item p{margin:4px 0 0;font-size:0.875rem;opacity:0.75}

/* Organizer Finance Card (Admin view) */
.organizer-finance-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:20px;margin-bottom:16px;transition:border-color 200ms}
.organizer-finance-card:hover{border-color:rgba(233,30,140,0.3)}
.org-fin-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;gap:12px;flex-wrap:wrap}
.org-fin-header h4{margin:0;font-size:1rem}
.org-fin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.org-fin-stat{text-align:center;padding:10px;background:rgba(255,255,255,0.04);border-radius:8px}
.org-fin-label{display:block;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.5px;opacity:0.6;margin-bottom:4px}
.org-fin-value{display:block;font-size:1rem;font-weight:700}

/* Dashboard body text colors for finance elements */
.dashboard-body .finance-warning strong{color:#f59e0b!important}
.dashboard-body .finance-warning p{color:rgba(255,255,255,0.7)!important}
.dashboard-body .payout-info-item strong{color:#fff!important}
.dashboard-body .payout-info-item p{color:rgba(255,255,255,0.6)!important}
.dashboard-body .organizer-finance-card h4{color:#fff!important}
.dashboard-body .org-fin-label{color:rgba(255,255,255,0.5)!important}
.dashboard-body .org-fin-value{color:#fff!important}
.dashboard-body .cycle-amount{color:#10b981!important}

/* Mobile responsive */
@media(max-width:768px){
    .org-fin-stats{grid-template-columns:repeat(2,1fr)}
    .finance-warning{flex-direction:column;text-align:center}
    .org-fin-header{flex-direction:column}
}

/* ============================================
   DARK TIP/INFO BOXES (Guide & Blog pages)
   These boxes have dark gradient backgrounds
   and need white text to be readable.
   Overrides .guide-content color rules.
   ============================================ */
.dark-tip-box{background:linear-gradient(135deg,var(--weed-purple) 0%,var(--weed-burgundy) 100%);padding:var(--spacing-xl);border-radius:var(--radius-lg);margin-bottom:var(--spacing-3xl);color:#fff!important}
.dark-tip-box h2,.dark-tip-box h3,.dark-tip-box h4{color:#fff!important;font-family:var(--font-headline);text-transform:uppercase}
.dark-tip-box p,
.dark-tip-box li,
.dark-tip-box span{color:rgba(255,255,255,0.9)!important}
.dark-tip-box strong{color:#fff!important}
.dark-tip-box a{color:var(--pink-hover)!important}
.dark-tip-box ul{padding-left:var(--spacing-lg)}
.dark-tip-box li::marker{color:var(--pink-hover)}

/* ============================================
   ORGANIZER EVENT MANAGEMENT — MODERN STYLES
   ============================================ */

/* Form row for side-by-side fields */
.event-form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:600px){.event-form-row{grid-template-columns:1fr}}

/* Section divider */
.event-section-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);margin:2.5rem 0}

/* Event list header */
.event-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:0.75rem}
.event-list-header h3{margin:0;font-size:1.1rem}

/* Form actions */
.event-form-actions{display:flex;gap:1rem;margin-top:1.5rem;flex-wrap:wrap}
.event-form-actions .btn-lg{padding:0.875rem 2rem;font-size:1rem}
.btn-icon{margin-right:0.35rem}

/* Event management cards */
.event-manage-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:1.25rem;margin-bottom:0.75rem;transition:all 0.2s ease}
.event-manage-card:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.15);transform:translateY(-1px)}
.event-manage-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.event-manage-card-info{flex:1;min-width:0}
.event-manage-card-title{font-size:1.05rem;font-weight:700;color:#fff;margin:0 0 0.5rem 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.event-manage-card-meta{display:flex;flex-wrap:wrap;gap:0.75rem;margin-bottom:0.625rem}
.event-manage-meta-item{font-size:0.8rem;color:rgba(255,255,255,0.6)}
.event-manage-card-tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:0.75rem}
.event-manage-tag{display:inline-block;font-size:0.7rem;padding:0.2rem 0.6rem;border-radius:20px;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.7);font-weight:500}
.event-manage-tag.genre{background:rgba(233,30,140,0.15);color:var(--pink-hover)}

/* Event card status accents */
.event-manage-card.event-card-today{border-left:3px solid #ef4444}
.event-manage-card.event-card-soon{border-left:3px solid #f59e0b}
.event-manage-card.event-card-upcoming{border-left:3px solid #10b981}
.event-manage-card.event-card-past{border-left:3px solid rgba(255,255,255,0.15);opacity:0.65}

/* Event card actions */
.event-manage-card-actions{display:flex;flex-wrap:wrap;gap:0.5rem;padding-top:0.75rem;border-top:1px solid rgba(255,255,255,0.06)}
.event-manage-card-actions .btn-sm{padding:0.35rem 0.75rem;font-size:0.75rem;border-radius:8px}

/* Danger outline button */
.btn-danger-outline{background:transparent!important;border:1px solid rgba(239,68,68,0.4)!important;color:#ef4444!important}
.btn-danger-outline:hover{background:rgba(239,68,68,0.1)!important;border-color:#ef4444!important}

/* Toast notification */
.organizer-toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);padding:0.875rem 1.5rem;border-radius:12px;font-size:0.9rem;font-weight:500;z-index:10000;opacity:0;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);pointer-events:none;box-shadow:0 8px 32px rgba(0,0,0,0.3)}
.organizer-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.organizer-toast-success{background:linear-gradient(135deg,#10b981,#059669);color:#fff}
.organizer-toast-error{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}

/* Modal styling in dashboard context — hidden by default, shown with .active */
.dashboard-body .modal-overlay{background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;padding:1rem}
.dashboard-body .modal-overlay.active{display:flex}
.dashboard-body .modal-content{background:var(--navy);border:1px solid rgba(255,255,255,0.1);border-radius:16px;max-width:700px;width:100%;max-height:90vh;overflow-y:auto;color:#fff}
.dashboard-body .modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(255,255,255,0.08)}
.dashboard-body .modal-header h3{margin:0;font-size:1.1rem;color:#fff}
.dashboard-body .modal-close{background:none;border:none;color:rgba(255,255,255,0.5);font-size:1.5rem;cursor:pointer;padding:0.25rem}
.dashboard-body .modal-close:hover{color:#fff}
.dashboard-body .modal-body{padding:1.5rem}
.dashboard-body .modal-footer{padding:1rem 1.5rem;border-top:1px solid rgba(255,255,255,0.08);display:flex;justify-content:flex-end;gap:0.75rem}

/* Mobile responsive for event cards */
@media(max-width:768px){
    .event-manage-card-header{flex-direction:column}
    .event-manage-card-actions{justify-content:stretch}
    .event-manage-card-actions .btn-sm{flex:1;text-align:center;min-width:auto}
    .event-form-actions{flex-direction:column}
    .event-form-actions .btn{width:100%;justify-content:center}
}

/* ============================================
   ADMIN EVENT EDITOR — MODERN STYLES
   ============================================ */

/* Admin badge */
.dashboard-badge.admin{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;font-size:0.7rem;padding:0.2rem 0.6rem;border-radius:20px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}

/* Status bar */
.admin-event-status-bar{display:flex;flex-wrap:wrap;gap:1.5rem;padding:1rem;background:rgba(255,255,255,0.04);border-radius:10px;margin-bottom:1.25rem}
.admin-status-item{display:flex;flex-direction:column;gap:0.25rem}
.admin-status-label{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.5px;color:rgba(255,255,255,0.45);font-weight:600}
.admin-event-id{font-size:0.7rem;color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.06);padding:0.2rem 0.5rem;border-radius:4px;font-family:monospace}

/* Status badges */
.status-badge{display:inline-block;padding:0.25rem 0.75rem;border-radius:20px;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
.status-badge.status-approved,.status-badge.approved{background:rgba(16,185,129,0.15);color:#10b981}
.status-badge.status-pending,.status-badge.pending{background:rgba(245,158,11,0.15);color:#f59e0b}
.status-badge.status-rejected,.status-badge.rejected{background:rgba(239,68,68,0.15);color:#ef4444}

/* Admin control row (toggles) */
.admin-control-row{padding:0.75rem 0;border-top:1px solid rgba(255,255,255,0.06)}
.admin-toggle-label{display:flex;align-items:center;gap:0.75rem;cursor:pointer;flex-wrap:wrap}
.admin-toggle-label input[type="checkbox"]{width:18px;height:18px;accent-color:var(--pink);cursor:pointer}
.admin-toggle-text{font-weight:600;color:#fff;font-size:0.9rem}

/* Admin action buttons */
.admin-action-buttons{display:flex;gap:0.75rem;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,0.06)}
.btn-approve{background:linear-gradient(135deg,#10b981,#059669)!important;color:#fff!important;border:none!important;padding:0.6rem 1.25rem;border-radius:10px;font-weight:600;cursor:pointer;transition:all 0.2s}
.btn-approve:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(16,185,129,0.3)}
.btn-reject{background:linear-gradient(135deg,#ef4444,#dc2626)!important;color:#fff!important;border:none!important;padding:0.6rem 1.25rem;border-radius:10px;font-weight:600;cursor:pointer;transition:all 0.2s}
.btn-reject:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(239,68,68,0.3)}

/* Error/Success messages */
.dashboard-body .error-message{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#fca5a5;padding:0.75rem 1rem;border-radius:10px;margin-bottom:1rem;font-size:0.875rem}
.dashboard-body .success-message{background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.3);color:#6ee7b7;padding:0.75rem 1rem;border-radius:10px;margin-bottom:1rem;font-size:0.875rem}

@media(max-width:768px){
    .admin-event-status-bar{flex-direction:column;gap:0.75rem}
    .admin-action-buttons{flex-direction:column}
    .admin-action-buttons .btn{width:100%;text-align:center}
}

/* ============================================
   COUPON MANAGEMENT — ADMIN DASHBOARD
   ============================================ */

/* Coupon modal */
.coupon-modal-content{background:var(--navy);border:1px solid rgba(255,255,255,0.1);border-radius:16px;max-width:640px;width:100%;max-height:90vh;overflow-y:auto;color:#fff;box-shadow:0 24px 64px rgba(0,0,0,0.5)}
.coupon-modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(255,255,255,0.08)}
.coupon-modal-header h2{margin:0;font-size:1.1rem;color:#fff;font-weight:600}
.coupon-modal-header .modal-close-btn{background:none;border:none;color:rgba(255,255,255,0.5);font-size:1.5rem;cursor:pointer;padding:0.25rem;line-height:1;transition:color 0.2s}
.coupon-modal-header .modal-close-btn:hover{color:#fff}

/* Coupon form grid */
.coupon-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1.5rem}
.coupon-form-group{display:flex;flex-direction:column;gap:0.35rem}
.coupon-form-group label{font-size:0.8rem;font-weight:600;color:rgba(255,255,255,0.7);text-transform:uppercase;letter-spacing:0.3px}
.coupon-form-group input,.coupon-form-group select{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:8px;padding:0.6rem 0.75rem;color:#fff;font-size:0.9rem;transition:border-color 0.2s}
.coupon-form-group input:focus,.coupon-form-group select:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px rgba(233,30,140,0.15)}
.coupon-form-group input::placeholder{color:rgba(255,255,255,0.3)}
.coupon-form-group select option{background:var(--navy);color:#fff}
.coupon-form-group .input-with-btn{display:flex;gap:0.5rem}
.coupon-form-group .btn-generate{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:8px;padding:0.5rem 0.75rem;color:rgba(255,255,255,0.7);cursor:pointer;font-size:0.8rem;white-space:nowrap;transition:all 0.2s}
.coupon-form-group .btn-generate:hover{background:rgba(255,255,255,0.12);color:#fff}
.coupon-form-group .date-range{display:flex;gap:0.5rem;align-items:center}
.coupon-form-group .date-range span{color:rgba(255,255,255,0.4);font-size:0.85rem}
.coupon-form-group .checkbox-label{display:flex;align-items:center;gap:0.5rem;cursor:pointer;font-size:0.9rem;color:rgba(255,255,255,0.8)}

/* Coupon form actions */
.coupon-form-actions{display:flex;justify-content:flex-end;gap:0.75rem;padding:1rem 1.5rem;border-top:1px solid rgba(255,255,255,0.08)}

/* Coupon code monospace in table */
.coupon-code{font-family:'SF Mono',Monaco,Consolas,monospace;font-size:0.85rem;font-weight:600;color:var(--pink);background:rgba(233,30,140,0.1);padding:0.2rem 0.5rem;border-radius:4px;letter-spacing:0.5px}

/* Coupon usage progress bar */
.coupon-usage{display:flex;flex-direction:column;gap:0.25rem;min-width:80px}
.coupon-usage-bar{height:4px;background:rgba(255,255,255,0.08);border-radius:2px;overflow:hidden}
.coupon-usage-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,#10b981,#059669);transition:width 0.3s}
.coupon-usage-fill.warning{background:linear-gradient(90deg,#f59e0b,#d97706)}
.coupon-usage-fill.danger{background:linear-gradient(90deg,#ef4444,#dc2626)}
.coupon-usage-text{font-size:0.75rem;color:rgba(255,255,255,0.5)}

/* Coupon status badges */
.coupon-status{display:inline-block;padding:0.2rem 0.6rem;border-radius:12px;font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.3px}
.coupon-status.active{background:rgba(16,185,129,0.15);color:#10b981}
.coupon-status.inactive{background:rgba(239,68,68,0.15);color:#ef4444}
.coupon-status.expired{background:rgba(107,114,128,0.2);color:#9ca3af}

/* Coupon table actions */
.coupon-actions{display:flex;gap:0.4rem;flex-wrap:wrap}
.coupon-actions button{padding:0.3rem 0.6rem;border-radius:6px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.7);cursor:pointer;font-size:0.78rem;transition:all 0.2s;white-space:nowrap}
.coupon-actions button:hover{background:rgba(255,255,255,0.1);color:#fff}
.coupon-actions .btn-toggle-active{border-color:rgba(16,185,129,0.3)}
.coupon-actions .btn-toggle-active:hover{background:rgba(16,185,129,0.15);color:#10b981}
.coupon-actions .btn-delete{border-color:rgba(239,68,68,0.3)}
.coupon-actions .btn-delete:hover{background:rgba(239,68,68,0.15);color:#ef4444}

/* Coupons filter bar */
.coupons-filter-bar{display:flex;gap:0.75rem;margin-bottom:1rem;flex-wrap:wrap}
.coupons-filter-bar input,.coupons-filter-bar select{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:8px;padding:0.5rem 0.75rem;color:#fff;font-size:0.85rem}
.coupons-filter-bar input{flex:1;min-width:200px}
.coupons-filter-bar input::placeholder{color:rgba(255,255,255,0.3)}
.coupons-filter-bar select option{background:var(--navy);color:#fff}

@media(max-width:768px){
    .coupon-form-grid{grid-template-columns:1fr;padding:1rem}
    .coupon-form-group[style*="grid-column"]{grid-column:auto!important}
    .coupon-form-actions{flex-direction:column;padding:1rem}
    .coupon-form-actions button{width:100%;text-align:center}
    .coupons-filter-bar{flex-direction:column}
    .coupons-filter-bar input{min-width:auto}
    .coupon-actions{flex-direction:column}
}

/* ============================================
   CONTACT PAGE — MODERN REDESIGN
   ============================================ */

/* Event context banner */
.contact-event-banner {
  background: linear-gradient(135deg, rgba(233,30,140,0.08), rgba(233,30,140,0.03));
  border-bottom: 1px solid rgba(233,30,140,0.15);
  padding: 0.65rem 0;
}
.contact-event-banner p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--pink);
  text-align: center;
}
.contact-event-banner strong {
  color: var(--navy);
}

/* Contact section */
.contact-section {
  padding: 3rem 0 4rem;
  background: var(--bg-cream);
}

/* Grid: info left, form right */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: start;
}

/* Left info column */
.contact-info-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
}
.contact-info-text {
  font-size: 1rem;
  color: var(--text-sec);
  line-height: 1.65;
  margin-bottom: 1.75rem;
}

/* Contact info cards */
.contact-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  transition: all 200ms;
  text-decoration: none;
  color: inherit;
}
a.contact-card:hover {
  border-color: var(--pink);
  box-shadow: 0 4px 16px rgba(233,30,140,0.08);
  transform: translateY(-1px);
}
.contact-card-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(233,30,140,0.06);
  border-radius: 10px;
}
.contact-card-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: #999;
  margin-bottom: 0.1rem;
}
.contact-card-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
}
.contact-card-detail {
  font-size: 0.82rem;
  color: var(--text-sec);
  line-height: 1.5;
  margin-top: 0.15rem;
}

/* Right form column */
.contact-form-wrap {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.05);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.contact-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.contact-form-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
}
.contact-form-field .required {
  color: var(--pink);
}
.contact-form-field input,
.contact-form-field textarea,
.contact-form-field select {
  padding: 0.7rem 0.9rem;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  font-size: 0.92rem;
  font-family: inherit;
  color: var(--navy);
  background: #fff;
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
  width: 100%;
  box-sizing: border-box;
}
.contact-form-field input:focus,
.contact-form-field textarea:focus,
.contact-form-field select:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(233,30,140,0.08);
}
.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder {
  color: #bbb;
}
.contact-form-field textarea {
  resize: vertical;
  min-height: 100px;
}
.contact-form-field select {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.25rem;
}

/* Checkbox */
.contact-form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.contact-form-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--pink);
  cursor: pointer;
}
.contact-form-checkbox label {
  font-size: 0.82rem;
  color: var(--text-sec);
  line-height: 1.4;
  cursor: pointer;
}
.contact-form-checkbox label a {
  color: var(--pink);
  text-decoration: underline;
}

/* Submit button */
.contact-submit-btn {
  width: 100%;
  padding: 0.85rem;
  background: var(--gradient-pink);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 200ms;
  box-shadow: 0 4px 16px rgba(233,30,140,0.2);
}
.contact-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(233,30,140,0.3);
}
.contact-submit-btn:active {
  transform: translateY(0);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .contact-section { padding: 2rem 0 3rem; }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .contact-form-wrap {
    padding: 1.5rem;
    border-radius: 12px;
  }
  .contact-form-row {
    grid-template-columns: 1fr;
  }
  .contact-info-title { font-size: 1.3rem; }
  .contact-cards { gap: 0.5rem; }
  .contact-card { padding: 0.85rem; }
}

/* ========================================
   ADMIN USER DETAIL PAGE
   ======================================== */

.user-detail-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 100px 1.5rem 3rem;
}

.back-to-dashboard {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 150ms;
}
.back-to-dashboard:hover { color: #fff; }

/* User Header Card */
.user-detail-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.user-avatar-large {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pink), var(--weed-coral));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.user-header-info {
    flex: 1;
    min-width: 200px;
}

.user-header-info h1 {
    font-size: 1.6rem;
    margin: 0 0 0.4rem;
    color: #fff;
}

.user-header-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.user-meta-text {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}

.user-email-display {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
    margin-top: 0.3rem;
}

.user-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Tabs */
.user-detail-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid rgba(255,255,255,0.1);
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.tab-btn {
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 200ms;
    white-space: nowrap;
}

.tab-btn:hover {
    color: rgba(255,255,255,0.8);
}

.tab-btn.active {
    color: #fff;
    border-bottom-color: var(--pink);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Detail Grid */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .detail-grid { grid-template-columns: 1fr; }
    .user-detail-header { padding: 1rem 1.25rem; }
    .user-avatar-large { width: 56px; height: 56px; font-size: 1.2rem; }
    .user-header-info h1 { font-size: 1.3rem; }
}

/* Detail Rows */
.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.detail-row:last-child { border-bottom: none; }

.detail-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}

.detail-value {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.9);
    text-align: right;
}

.detail-value.monospace {
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    word-break: break-all;
    max-width: 220px;
}

/* Card Header with Action */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.card-header h3 { margin: 0; }

.badge-count {
    font-size: 0.8rem;
    background: rgba(255,255,255,0.08);
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    color: rgba(255,255,255,0.6);
}

/* Mini Stats */
.mini-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.mini-stat {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
}

.mini-stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    display: block;
}

.mini-stat-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
    display: block;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 2rem;
    color: rgba(255,255,255,0.4);
    font-size: 0.9rem;
}

/* Danger Zone */
.danger-zone {
    border: 1px solid rgba(239,68,68,0.3) !important;
    background: rgba(239,68,68,0.05) !important;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 200ms;
}

.btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239,68,68,0.3);
}

/* Payment Status Badges */
.status-badge.paid { background: rgba(34,197,94,0.15); color: #22c55e; }
.status-badge.pending { background: rgba(234,179,8,0.15); color: #eab308; }
.status-badge.failed { background: rgba(239,68,68,0.15); color: #ef4444; }
.status-badge.refunded { background: rgba(168,85,247,0.15); color: #a855f7; }

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
}

.modal-overlay.hidden { display: none; }

.modal-content {
    background: #1e2d4d;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 1.5rem;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.modal-header h3 { margin: 0; color: #fff; }

.modal-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

.modal-close:hover { color: #fff; }

/* Toast Notification */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    z-index: 10000;
    transform: translateY(20px);
    opacity: 0;
    transition: all 300ms;
    pointer-events: none;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast-success { background: #22c55e; }
.toast-error { background: #ef4444; }
.toast-info { background: #3b82f6; }

/* Clickable user rows in admin dashboard */
.data-table tbody tr.clickable-row {
    cursor: pointer;
    transition: background 150ms;
}

.data-table tbody tr.clickable-row:hover {
    background: rgba(255,255,255,0.08);
}

/* Error state */
.error-state {
    text-align: center;
    padding: 4rem 2rem;
}

.error-state h2 {
    color: #ef4444;
    margin-bottom: 0.5rem;
}

.error-state p {
    color: rgba(255,255,255,0.5);
    margin-bottom: 1.5rem;
}

/* Order detail grid in modal */
.order-detail-grid .detail-row {
    padding: 0.5rem 0;
}

/* =============================================
   VENUES / CLUBS — Listing & Detail Pages
   ============================================= */

/* === Venue Grid (Listing Page) === */
.venue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.venue-card-item {
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-white);
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.venue-card-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.venue-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.venue-card-cover {
    height: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 1rem;
}

.venue-card-logo {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    border: 2px solid white;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.venue-featured-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--gold);
    color: var(--navy);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
}

.venue-verified-small {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: #10b981;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.venue-card-body {
    padding: 1.25rem;
}

.venue-card-name {
    font-family: var(--font-headline);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 0.4rem;
}

.venue-card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

.venue-card-type {
    background: var(--bg-light);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.venue-card-desc {
    font-size: 0.88rem;
    color: var(--text-sec);
    line-height: 1.5;
    margin-bottom: 0.6rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.venue-card-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}

.venue-genre-tag {
    font-size: 0.72rem;
    background: rgba(233, 30, 140, 0.08);
    color: var(--pink);
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-weight: 600;
}

.venue-card-price {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* === Venue Detail Page — Hero === */
.venue-hero {
    position: relative;
    min-height: 320px;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 2rem 0;
}

.venue-hero.has-cover {
    min-height: 380px;
}

.venue-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15,27,51,0.95) 0%, rgba(15,27,51,0.4) 50%, rgba(15,27,51,0.2) 100%);
}

.venue-hero-content {
    position: relative;
    z-index: 1;
    color: white;
}

.venue-hero-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.venue-type-badge {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.venue-verified-badge {
    background: #10b981;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
}

.venue-hero h1 {
    font-family: var(--font-headline);
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 0.3rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    color: #FFFFFF !important;
}

.venue-hero-location {
    font-size: 1.05rem;
    opacity: 0.85;
    margin-bottom: 0.75rem;
    color: rgba(255,255,255,0.9) !important;
}

.venue-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.venue-hero-tag {
    background: rgba(233, 30, 140, 0.25);
    backdrop-filter: blur(4px);
    color: #ffb3d9;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
}

/* === Venue Detail — Info Grid === */
.venue-info-section {
    background: var(--bg-cream);
    padding: 2.5rem 0 4rem;
}

.venue-info-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 2rem;
    align-items: start;
}

.venue-card {
    background: var(--bg-white);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}

.venue-card h2 {
    font-family: var(--font-headline);
    font-size: 1.3rem;
    color: var(--text-heading);
    margin-bottom: 1rem;
}

.venue-card h3 {
    font-family: var(--font-headline);
    font-size: 1.1rem;
    color: var(--text-heading);
    margin-bottom: 0.75rem;
}

/* === Quick Info Sidebar === */
.venue-quick-info .venue-info-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--bg-light);
}

.venue-quick-info .venue-info-row:last-child {
    border-bottom: none;
}

.venue-info-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.venue-info-label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 0.1rem;
}

.venue-info-value {
    display: block;
    font-size: 0.92rem;
    color: var(--text-dark);
    font-weight: 500;
}

/* === Opening Hours === */
.venue-hours-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bg-light);
    font-size: 0.88rem;
}

.venue-hours-row:last-child {
    border-bottom: none;
}

.venue-hours-day {
    font-weight: 600;
    color: var(--text-dark);
}

.venue-hours-time {
    color: var(--text-sec);
}

.venue-hours-row.today {
    background: rgba(233, 30, 140, 0.05);
    border-radius: 6px;
    padding: 0.5rem 0.5rem;
    margin: 0 -0.5rem;
}

.venue-hours-row.today .venue-hours-day {
    color: var(--pink);
}

.venue-hours-row.closed .venue-hours-time {
    color: #999;
    font-style: italic;
}

/* === Contact & Social === */
.venue-contact-links,
.venue-social-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.venue-social-links {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bg-light);
}

.venue-contact-item,
.venue-social-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    font-size: 0.88rem;
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.15s;
}

.venue-contact-item:hover,
.venue-social-item:hover {
    color: var(--pink);
}

/* === Map Button === */
.venue-map-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-light);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.15s;
}

.venue-map-btn:hover {
    background: var(--bg-cream);
    color: var(--pink);
}

/* === Venue Event Cards === */
.venue-event-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem;
    border-radius: 10px;
    background: var(--bg-light);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, transform 0.15s;
    margin-bottom: 0.5rem;
}

.venue-event-card:hover {
    background: var(--bg-cream);
    transform: translateX(4px);
}

.venue-event-card.past {
    opacity: 0.6;
}

.venue-event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    padding: 0.4rem;
    background: var(--bg-white);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.venue-event-day {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-heading);
    line-height: 1;
}

.venue-event-month {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
}

.venue-event-info {
    flex: 1;
    min-width: 0;
}

.venue-event-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.venue-event-time {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.venue-event-price {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--pink);
    white-space: nowrap;
}

/* === Gallery === */
.venue-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
}

.venue-gallery-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.15s;
}

.venue-gallery-item img:hover {
    opacity: 0.85;
}

.gallery-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gallery-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    cursor: default;
}

.gallery-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: rgba(255,255,255,0.2);
    color: white;
    border: none;
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === Venue Profile Form (Organizer) === */
.venue-form-section {
    background: var(--bg-cream);
    padding: 2rem;
    border-radius: 12px;
    margin-top: 1.5rem;
}

.venue-form-section h3 {
    font-family: var(--font-headline);
    color: var(--text-heading);
    margin-bottom: 1rem;
}

.venue-name-locked {
    background: var(--bg-light);
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.venue-name-locked .lock-icon {
    font-size: 0.85rem;
    opacity: 0.5;
}

.input-locked {
    background: #f0ede8 !important;
    color: #555 !important;
    cursor: not-allowed;
    border: 1px dashed #ccc !important;
}

/* === Approval Status Banners === */
.approval-banner {
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}
.approval-banner strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
}
.approval-banner p {
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.85;
}
.approval-pending {
    background: #fef3cd;
    border: 1px solid #ffc107;
    color: #856404;
}
.approval-rejected {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}
.approval-archived {
    background: #e2e3e5;
    border: 1px solid #d6d8db;
    color: #383d41;
}

/* === Venue Hours Form (Organizer) === */
.venue-hours-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.venue-hours-form-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    gap: 0.75rem;
}

.venue-hours-form-row label {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-dark);
}

.venue-hours-form-row input {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.88rem;
}

/* === Responsive === */
@media (max-width: 900px) {
    .venue-grid {
        grid-template-columns: 1fr;
    }

    .venue-info-grid {
        grid-template-columns: 1fr;
    }

    .venue-hero h1 {
        font-size: 1.8rem;
    }

    .venue-hero {
        min-height: 260px;
    }

    .venue-card-cover {
        height: 150px;
    }
}

@media (max-width: 600px) {
    .venue-grid {
        grid-template-columns: 1fr;
    }

    .venue-hero h1 {
        font-size: 1.5rem;
    }
}

/* =====================================================
   TARDEO / NOCHE SECTION — Homepage Quick Filter Buttons
   ===================================================== */
.tardeo-noche-section {
    padding: 2rem 0 1rem;
}

.tardeo-noche-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    max-width: 700px;
    margin: 0 auto;
}

.tn-btn {
    position: relative;
    flex: 1;
    max-width: 320px;
    padding: 1.5rem 2rem;
    border-radius: var(--radius-lg);
    text-decoration: none !important;
    color: #fff !important;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.tn-btn:hover {
    transform: translateY(-4px) scale(1.02);
}

.tn-btn-tardeo {
    background: linear-gradient(135deg, #FF8C00 0%, #FFB347 40%, #FF6B35 100%);
    box-shadow: 0 8px 28px rgba(255, 140, 0, 0.35);
}

.tn-btn-tardeo:hover {
    box-shadow: 0 12px 36px rgba(255, 140, 0, 0.5);
}

.tn-btn-noche {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
    box-shadow: 0 8px 28px rgba(15, 52, 96, 0.4);
}

.tn-btn-noche:hover {
    box-shadow: 0 12px 36px rgba(15, 52, 96, 0.6);
}

.tn-btn-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.tn-btn-tardeo .tn-btn-glow {
    background: radial-gradient(circle, rgba(255, 220, 100, 0.3) 0%, transparent 70%);
}

.tn-btn-noche .tn-btn-glow {
    background: radial-gradient(circle, rgba(100, 150, 255, 0.2) 0%, transparent 70%);
}

.tn-btn:hover .tn-btn-glow {
    opacity: 1;
}

.tn-btn-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tn-btn-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.tn-btn-label {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.tn-btn-sub {
    font-size: 0.8rem;
    opacity: 0.85;
    font-weight: 500;
    margin-top: 0.2rem;
}

@media (max-width: 600px) {
    .tardeo-noche-buttons {
        gap: 0.75rem;
    }

    .tn-btn {
        padding: 1.2rem 1rem;
        border-radius: var(--radius-md);
    }

    .tn-btn-icon {
        font-size: 2rem;
    }

    .tn-btn-label {
        font-size: 1.2rem;
    }

    .tn-btn-sub {
        font-size: 0.72rem;
    }
}

/* =====================================================
   TARDEO / NOCHE EVENT TYPE FILTER PILLS
   ===================================================== */
.filter-btn-tardeo,
.filter-btn-noche {
    position: relative;
    font-weight: 600 !important;
}

.filter-btn-tardeo {
    border-color: #FF8C00 !important;
    color: #FF8C00 !important;
}

.filter-btn-tardeo.active {
    background: linear-gradient(135deg, #FF8C00, #FFB347) !important;
    color: #fff !important;
    border-color: #FF8C00 !important;
}

.filter-btn-noche {
    border-color: #1a1a2e !important;
    color: #1a1a2e !important;
}

.filter-btn-noche.active {
    background: linear-gradient(135deg, #1a1a2e, #0f3460) !important;
    color: #fff !important;
    border-color: #1a1a2e !important;
}