/* ==========================================================
   1. DESIGN TOKENS & BASE
   ========================================================== */
:root {
  /* --- Core Palette --- */
  --brand-50: #eef2ff; --brand-100: #e0e7ff; --brand-200: #c7d2fe;
  --brand-300: #a5b4fc; --brand-400: #818cf8; --brand-500: #6366f1; /* Primary */
  --brand-600: #5850ec; --brand-700: #4f46e5; --brand-800: #4338ca; --brand-900: #3730a3;
  
  --accent-500: #22d3ee;    /* Cyan */
  --highlight-500: #f43f5e; /* Rose/Red */
  
  /* --- Surfaces & Text --- */
  --surface-0: #0b0b12;   /* App bg */
  --surface-1: #11111a;   /* Cards/Nav */
  --surface-2: #171826;   /* Hover/Raised */
  --text-1: #f5f7ff;      /* High contrast */
  --text-2: #b9c0d4;      /* Secondary */

  /* --- Auth / Extra Tokens --- */
  --bg-1: #0b0c12;
  --bg-2: #12132a;
  --field-bg: rgba(255, 255, 255, .04);
  --field-bd: rgba(255, 255, 255, .12);
  --focus: rgba(99, 102, 241, .45);

  /* --- Borders & Shadows --- */
  --radius-lg: 1rem; --radius-md: .75rem; --radius-sm: .5rem;
  --ring: 0 0 0 .25rem rgba(99, 102, 241, .25);
  --shadow-1: 0 6px 30px rgba(0, 0, 0, .35);
  --shadow-2: 0 10px 50px rgba(35, 35, 95, .45);

  /* --- Gradients --- */
  --app-bg-gradient: linear-gradient(135deg, #0b0c12 0%, #1a1e4a 60%, #20227a 100%);
  --logo-grad: linear-gradient(180deg, #6C2BD9 0%, #8B5CF6 25%, #F59E0B 70%, #FDE047 100%);
  --grad-hero:
    radial-gradient(1200px 600px at 10% 0%, rgba(99,102,241,.25), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(34,211,238,.18), transparent 60%),
    linear-gradient(180deg, #0b0b12 0%, #0b0b12 100%);
}

/* --- Reset & Utilities --- */
html, body { background: var(--surface-0); color: var(--text-1); }

/* Typography & Colors */
.text-soft { color: var(--text-2) !important; } /* Unificada: color secundario */
.bg-surface-1 { background: var(--surface-1) !important; }
.bg-surface-2 { background: var(--surface-2) !important; }
.bg-dark-subtle { background-color: rgba(10,12,28,0.4); }

/* Radius & Shadows */
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.shadow-1 { box-shadow: var(--shadow-1); }
.shadow-2 { box-shadow: var(--shadow-2); }
.ring-focus:focus { outline: none; box-shadow: var(--ring); }
.object-fit-cover { object-fit: cover; }
.object-fit-contain { object-fit: contain; }
.object-cover { object-fit: cover; object-position: center; display: block; }

/* Special Text Styles */
.fuente-primaria {
  background: linear-gradient(90deg, #8B2FFF, #A855F7, #7B2FF7, #C084FC);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* Chips & Pills */
.chip {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .7rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px; color: var(--text-1); cursor: pointer; transition: .2s;
}
.chip.active { background: rgba(99,102,241,.15); border-color: rgba(99,102,241,.45); }
.chip:hover { transform: translateY(-1px); }

/* Base Badge Soft (Unificada) */
.badge-soft {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
}

/* ==========================================================
   2. NAVBAR & BUTTONS
   ========================================================== */
.navbar-brand b { color: var(--brand-400); }

.nav-glass {
  backdrop-filter: saturate(160%) blur(10px);
  background: rgba(17,17,26,.55) !important;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.logo-img {
  height: 45px; width: auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
  transition: transform .2s ease;
}
.navbar-brand:hover .logo-img { transform: scale(1.05); }

/* Navbar Buttons Auth */
.navbar .btn-auth {
  padding: .5rem 1rem; border-radius: .6rem;
  font-weight: 600; line-height: 1.25;
}
.navbar .btn-auth i { line-height: 0; }

/* Botones Brand & Ghost */
.btn-brand {
  --bs-btn-bg: var(--brand-500); --bs-btn-border-color: var(--brand-500);
  --bs-btn-hover-bg: var(--brand-600); --bs-btn-hover-border-color: var(--brand-600);
}
.btn-ghost {
  --bs-btn-color: var(--text-1); --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent; --bs-btn-hover-bg: rgba(255,255,255,.06);
}
.btn-pill { border-radius: 2rem; }

/* User Menu & Dropdown */
.user-btn {
  background: transparent; border: 1px solid rgba(255,255,255,.1);
  border-radius: .5rem; color: var(--text-1); padding: .35rem .7rem;
  font-size: .9rem; transition: background .2s ease, border-color .2s ease;
}
.user-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.user-name { color: var(--text-1); white-space: nowrap; }
.user-icon { font-size: 1.1rem; color: var(--brand-400); }

.user-menu {
  background: var(--surface-1); border: 1px solid rgba(255,255,255,.08);
  border-radius: .6rem; min-width: 12rem; padding: .4rem 0;
}
.user-menu .dropdown-item { color: var(--text-1); font-size: .9rem; padding: .55rem 1rem; }
.user-menu .dropdown-item:hover { background: var(--surface-2); color: var(--brand-400); }
.user-menu .dropdown-divider { border-top: 1px solid rgba(255,255,255,.1); }

/* ==========================================================
   3. HERO SECTIONS
   ========================================================== */
/* Generic Hero */
.hero { background: var(--grad-hero); }
.hero-title { letter-spacing: .2px; }
.tagline { color: var(--brand-300); }
.hero-logo {
  max-width: 420px; width: 100%; height: auto;
  display: block; margin: 0 auto 1rem;
}

/* Choice Hero */
.choice-hero {
  min-height: calc(100vh - 120px); display: flex; align-items: center; justify-content: center;
  background: #0b0c12;
  background-image: radial-gradient(800px 600px at 10% 10%, rgba(80,80,255,.18), transparent 60%),
                    linear-gradient(120deg, #0b0c12 0%, #12132a 50%, #2726c7 100%);
  color: #fff;
}
.choice-title { letter-spacing: .28em; font-weight: 700; }
.choice-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 768px) { .choice-grid { grid-template-columns: 1fr; } }

.choice-card { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.choice-card img { width: 100%; height: 360px; object-fit: cover; display: block; }
.choice-card::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); transition: background .25s; }
.choice-card:hover::after { background: rgba(0,0,0,.15); }
.choice-label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: clamp(2rem, 6vw, 4rem); font-weight: 800;
  letter-spacing: .35em; text-transform: uppercase; color: #fff;
}
.choice-link { position: absolute; inset: 0; z-index: 2; }
.choice-note { color: #cfd3ff; opacity: .85; }

/* Venue Hero (Unificado y Corregido) */
.hero-venue { 
  position: relative; 
  padding: clamp(64px, 7vw, 110px) 0 18px; 
}
.hero-venue__media { position: absolute; inset: 0; }
.hero-venue__media img, #heroCoverImg {
  width: 100%; height: 100%; object-fit: cover; 
  object-position: center; display: block; filter: brightness(.45);
}
.hero-venue__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.45));
}
.hero-venue__content { position: relative; z-index: 1; display: flex; align-items: end; }

/* Panel Venue */
.hero-venue__panel {
  backdrop-filter: blur(6px); background: rgba(18,18,22,.6);
  border: 1px solid rgba(255,255,255,.08);
  position: relative; z-index: 2;
}
.venue-title {
  font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  font-size: clamp(1.35rem, 2.2vw + .6rem, 2rem);
}
.hero-venue__logo { width: 72px; height: 72px; }
@media (min-width: 768px) { .hero-venue__logo { width: 100px; height: 100px; } }

/* Botonera Venue Mobile */
@media (max-width: 575.98px) {
  .hero-venue__panel .btn { font-size: .95rem; padding: .6rem 1rem; }
}
.navbar-logo {
  height: 32px;         /* tamaño ideal para navbar */
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

/* ==========================================================
   4. CARDS & LISTS
   ========================================================== */

/* --- Card Trend (Upgrade Pack Unificado) --- */
.card-trend {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.card-trend:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: rgba(99,102,241,.35); }

.card-trend .cover {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: radial-gradient(800px 400px at 90% 10%, rgba(34,211,238,.10), transparent 60%),
              radial-gradient(800px 400px at 10% 10%, rgba(99,102,241,.12), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.card-trend .cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1); transition: transform .6s ease, filter .6s ease;
  filter: saturate(1.05) contrast(1.04);
}
.card-trend:hover .cover img { transform: scale(1.05); }
.card-trend .cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.38) 100%); pointer-events: none;
}
/* Badge específico de Trend */
.card-trend .badge-soft {
  position: absolute; top: .6rem; left: .6rem;
  background: rgba(17,17,26,.55); border: 1px solid rgba(255,255,255,.18);
  padding: .28rem .55rem; border-radius: .5rem;
  backdrop-filter: blur(6px) saturate(140%);
  font-weight: 600; letter-spacing: .02em;
}
.card-trend .body { padding: .95rem 1rem 1.05rem; }
.card-trend .title {
  font-size: 1.02rem; font-weight: 800; margin: 0 0 .28rem;
  color: var(--text-1); letter-spacing: .2px;
}
.card-trend .meta {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  font-size: .92rem; color: var(--text-2); opacity: .95;
}
.card-trend a:focus-visible { outline: none; box-shadow: 0 0 0 .25rem rgba(99,102,241,.35); border-radius: var(--radius-lg); }
@media (prefers-reduced-motion: reduce) { .card-trend, .card-trend .cover img { transition: none; } }

/* --- Card Hero (Universal / Elegant) --- */
.card-hero {
  position: relative; display: block; overflow: hidden;
  border-radius: 1rem; background-color: #0b0d20;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: transform 0.4s ease, box-shadow 0.4s ease; cursor: pointer;
}
.card-hero:hover { transform: scale(1.04); box-shadow: 0 14px 32px rgba(0,0,0,0.4); }
.card-hero__img { position: relative; aspect-ratio: 1 / 1; background: #111; }
.card-hero__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.card-hero:hover .card-hero__img img { transform: scale(1.1); }
.card-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(255, 115, 0, 0.85), rgba(255, 115, 0, 0));
  transform: translateY(100%); transition: transform 0.5s ease; z-index: 1;
}
.card-hero:hover::before { transform: translateY(0); }
.card-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.8) 100%);
  z-index: 2; pointer-events: none;
}
.card-hero__meta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem; z-index: 3;
  text-align: center; transition: color 0.3s ease, transform 0.3s ease;
}
.card-hero__meta h3 { margin: .5rem 0 0; font-size: 1.05rem; font-weight: 600; color: #fff; letter-spacing: .4px; }
.card-hero__meta .small { color: rgba(255,255,255,.75); font-size: 0.9rem; }
.card-hero:hover .card-hero__meta { color: #fff; transform: translateY(-2px); }

/* --- Event Card (Con Overlay Naranja) --- */
.event-card__wrap {
  position: relative; aspect-ratio: 4 / 5; border-radius: 0.75rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.event-card:hover .event-card__wrap { transform: translateY(-4px); }
.event-card__media { position: absolute; inset: 0; }
.event-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.event-card:hover .event-card__media img { transform: scale(1.05); }
.event-card__gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 55%); pointer-events: none;
}
.event-card__wrap .card-body { color: #fff; z-index: 2; }
.event-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(255,136,0,.95), rgba(255,136,0,.85));
  color: #fff; display: flex; justify-content: center; align-items: end;
  opacity: 0; transform: translateY(100%); transition: all .4s ease;
  padding: 1rem; z-index: 3;
}
.event-card:hover .event-overlay { opacity: 1; transform: translateY(0); }
.overlay-content { animation: slideUpText .45s ease forwards; }
@keyframes slideUpText { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* --- Marketplace Compact Card --- */
.ml-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--surface-1); border: 1px solid rgba(255,255,255,.08);
  border-radius: .5rem; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ml-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: rgba(99,102,241,.35); }
.ml-thumb { position: relative; background: var(--surface-2); }
.ml-thumb img { width: 100%; height: 150px; object-fit: cover; display: block; }
.ml-body { padding: .6rem .7rem .75rem; }
.ml-title {
  color: var(--text-1); font-weight: 700; font-size: .95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ml-meta {
  color: var(--text-2); font-size: .82rem; margin-top: .15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Card Simple (Legacy) --- */
.card-event {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-event:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: rgba(99,102,241,.35); }
.card-cover {
  position: relative; overflow: hidden; border-radius: calc(var(--radius-lg) - 2px);
  background: linear-gradient(135deg, rgba(99,102,241,.35), rgba(34,211,238,.3));
  aspect-ratio: 16/9;
}
.card-cover img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.05); }

/* --- List Items --- */
.list-timeline .item { display: flex; gap: .9rem; padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.list-timeline .time { min-width: 92px; color: var(--text-2); font-size: .92rem; }
.list-timeline .title { font-weight: 600; }
.divider { height: 1px; background: rgba(255,255,255,.08); }

/* ==========================================================
   5. LAYOUTS, GRIDS & CAROUSELS
   ========================================================== */

/* Carousel Grids (Unificados) */
.carousel-item .grid,
#trendCarouselInner .grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .carousel-item .grid, #trendCarouselInner .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .carousel-item .grid { grid-template-columns: repeat(4, 1fr); }
  #trendCarouselInner .grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* Marketplace Grid */
.ml-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .ml-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .ml-grid { grid-template-columns: repeat(5, 1fr); } }

/* Indicators */
#trendIndicators button {
  width: .56rem; height: .56rem; border-radius: 50%;
  background: rgba(255,255,255,.28); border: 0;
}
#trendIndicators .active { background: var(--brand-500); }
#relacionadosCarousel .carousel-indicators [data-bs-target] {
  width: .55rem; height: .55rem; border-radius: 50%; background: rgba(255,255,255,.35);
}
#relacionadosCarousel .carousel-indicators .active { background: var(--brand-500); }

/* Featured / Hero de Listados */
.featured-slide, .featured-media { position: relative; }
.featured-media img { width: 100%; height: clamp(280px, 38vw, 460px); object-fit: cover; display: block; }
.featured-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35) 60%, rgba(0,0,0,.55)),
              radial-gradient(900px 420px at 10% 20%, rgba(99,102,241,.18), transparent 60%);
}
.featured-content {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1rem, 4vw, 2rem);
}
.featured-eyebrow { font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.featured-title {
  font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; margin: .15rem 0 .25rem;
  color: var(--text-1); text-shadow: 0 2px 16px rgba(0,0,0,.35);
}
.featured-meta { max-width: 60ch; }
.featured-content .btn { align-self: flex-start; box-shadow: 0 6px 20px rgba(0,0,0,.25); }

/* Flyers */
.flyer { position: relative; }
.flyer img { width: 100%; height: clamp(280px, 34vw, 460px); object-fit: cover; display: block; }
.flyer__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: 1rem; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45) 55%, rgba(0,0,0,.65));
  opacity: 0; transition: opacity .2s ease;
}
.flyer:hover .flyer__overlay { opacity: 1; }
.flyer__meta { display: flex; flex-wrap: wrap; gap: 4rem; }

/* ==========================================================
   6. SUBNAV & PILLS
   ========================================================== */
.subnav-sticky { position: sticky; top: 64px; z-index: 1020; margin-top: .75rem; }

/* Subnav Wrapper & Scroll (Mobile Optimized) */
.subnav-shell {
  background: rgba(18,18,22,.7); border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px; overflow: hidden;
}
.subnav-scroll { flex-wrap: wrap; }

@media (max-width: 575.98px) {
  .subnav-shell { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .subnav-shell::-webkit-scrollbar { display: none; }
  .subnav-scroll {
    flex-wrap: nowrap; justify-content: flex-start !important;
    width: max-content; gap: .5rem; padding: .4rem .5rem;
  }
  .subnav-scroll > * { flex: 0 0 auto; }
}

.pill-link {
  --_bg: rgba(255,255,255,.06); --_bd: rgba(255,255,255,.10);
  display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem;
  border-radius: 999px; background: var(--_bg); border: 1px solid var(--_bd);
  color: var(--text-1); text-decoration: none; font-size: .95rem;
}
.pill-link:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }

/* ==========================================================
   7. FORMS, AUTH & UTILS
   ========================================================== */
.form-control, .form-select {
  background-color: rgba(255,255,255,.04) !important; color: var(--text-1) !important;
  border: 1px solid rgba(255,255,255,.12) !important; border-radius: var(--radius-md) !important;
}
.form-control:focus, .form-select:focus { box-shadow: var(--ring) !important; }

/* Auth Pages */
.auth-shell {
  min-height: 100vh; display: grid; place-items: center;
  background: radial-gradient(1200px 800px at 20% 10%, rgba(70,68,255,.18), transparent 50%),
              linear-gradient(110deg, var(--bg-1) 0%, #0d0e1a 35%, var(--bg-2) 100%);
  color: var(--text-1);
}
.auth-card { width: min(640px, 92vw); }
.auth-title { font-weight: 800; letter-spacing: .4px; }
.auth-sub { color: var(--text-2); }
.auth-form label { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.auth-input {
  background: var(--field-bg); border: 1px solid var(--field-bd); color: var(--text-1);
  padding: .9rem 1rem; width: 100%;
}
.auth-input:focus { outline: 2px solid var(--focus); border-color: transparent; }
.help { font-size: .72rem; color: #9aa0b4; text-transform: uppercase; }
.btn-cta { background: #fff; color: #0b0c12; border: 0; padding: .9rem 1.2rem; font-weight: 700; width: 210px; }
.errorlist { color: #ff7a7a; margin: .25rem 0 0; font-size: .85rem; list-style: none; padding: 0; }

/* Background with Parallax */
.section-with-bg {
  position: relative; background-image: var(--section-bg);
  background-size: cover; background-position: center;
  background-repeat: no-repeat; background-attachment: fixed;
  isolation: isolate;
}
.section-with-bg::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(1200px 600px at 10% 0%, rgba(99,102,241,.28), transparent 60%),
              linear-gradient(180deg, rgba(11,11,18,.75), rgba(11,11,18,.9));
  z-index: -1;
}
.section-with-bg > .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .section-with-bg { background-attachment: scroll; } }
@supports (-webkit-touch-callout: none) { .section-with-bg { background-attachment: scroll; } }

/* Map Placeholder */
.map-shell {
  height: 420px;
  background: radial-gradient(500px 200px at 70% 20%, rgba(99,102,241,.15), transparent 60%), #0e0f18;
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg);
}

.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border-radius: var(--radius-md); }
.menu-table td { padding: .4rem .2rem; border-color: rgba(255,255,255,.08) !important; }
.note { font-size: .9rem; color: var(--text-2); }
.section-title { font-weight: 600; }
.section-sub { color: var(--text-2); }
.footer { border-top: 1px solid rgba(255,255,255,.08); }
.active { color: var(--brand-50); }
.bg-glass {
  background: rgba(255, 255, 255, 0.01); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 1rem; transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* ==========================================================
   8. VENDOR OVERRIDES (Choices, Tag Picker)
   ========================================================== */

/* Choices.js Dark Theme */
.choices .choices__inner {
  background: var(--app-bg-gradient) !important; color: white !important;
  border: 1px solid rgba(255,255,255,.18) !important; border-radius: .75rem !important;
  min-height: 46px;
}
.choices .choices__placeholder { color: #6c757d !important; }
.choices.is-focused .choices__inner {
  border-color: #6366f1 !important; box-shadow: 0 0 0 .25rem rgba(99,102,241,.25) !important;
}
.choices .choices__list--dropdown {
  background: #fff !important; color: #111 !important;
  border: 1px solid rgba(0,0,0,.15) !important; border-radius: .75rem !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.25) !important; z-index: 2000;
}
.choices .choices__list--dropdown .choices__item { color: #111 !important; }
.choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: #e7f0ff !important; color: #111 !important;
}
.choices[data-type*="select-one"]::after { border-color: #6c6cf1 transparent transparent transparent !important; }
.choices, .choices * { color: inherit; }

/* Native Selects override */
select { background-color: #111; color: white; border: 1px solid #444; padding: 5px; border-radius: 5px; }
option { background-color: #111; color: white; }

/* Tag Picker */
.tag-picker { display: flex; flex-wrap: wrap; gap: .5rem .6rem; }
.tag-chip { display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
.tag-chip input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.tag-chip > span {
  display: inline-block; padding: .38rem .75rem;
  border: 1px solid rgba(255,255,255,.25); border-radius: 9999px;
  font-size: .875rem; line-height: 1;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
  background: rgba(255,255,255,.06); color: #eaeaea;
}
.tag-chip:hover > span { border-color: rgba(255,255,255,.5); box-shadow: 0 0 0 3px rgba(13,110,253,.2); }
.tag-chip input[type="checkbox"]:checked + span {
  background: #0d6efd; border-color: #0d6efd; color: #fff;
  box-shadow: 0 0 0 3px rgba(13,110,253,.25);
}
.theme-light .tag-chip label { background: #f6f7f9; color: #1d1d1f; border-color: #d0d4db; }
.theme-light .tag-chip input[type="checkbox"]:checked + label { background: #0d6efd; border-color: #0d6efd; color: #fff; }

.modal .form-control {
  background: var(--surface-2, #1b1b22); border: 1px solid rgba(255,255,255,.12); color: var(--text-1, #fff);
}
.modal .form-control:focus { border-color: rgba(255,255,255,.22); box-shadow: none; }