@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@400;500;600;700&family=Work+Sans:wght@400;500;600&display=swap');

/* Buen Ritmo — mateix tema visual que bidean.css, selectors body.organizer-buenritmo / .organizer-buenritmo */

/* Tipografia buenritmo.es (Elementor kit 6298): cos Work Sans 14px; primària Roboto 600; titulars Bebas Neue. */
/* Vermell marca: --e-global-color-6f00ff6 (#E6352D). Text botó franja: --e-global-color-text (#8A9394). */
body.organizer-buenritmo {
  --color-primary: #e6352d !important;
  --color-secondary: #2e7d32 !important;
  --color-accent: #ffffff !important;
  --color-dark: #1a1a1a !important;
  --color-text-muted: #8a9394 !important;
  --tw-primary: 230 53 45 !important;
  --tw-secondary: 46 125 50 !important;
  --tw-accent: 255 255 255 !important;
  --tw-dark: 26 26 26 !important;
  background: #000000 !important;
  color: #ffffff !important;
  font-family: 'Work Sans', 'Roboto', system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
}

/* Titulars com al web (Bebas Neue, majúscules) — només a main per no trencar UI secundària */
body.organizer-buenritmo main h1,
body.organizer-buenritmo main h2,
body.organizer-buenritmo main h3 {
  font-family: 'Bebas Neue', 'Roboto', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/*
 * Hero només a pàgina d’organitzador: el <section> del component Hero té .organizer-page-hero
 * quan es passa `organizer` (veure organizer/[id]/page.tsx). La home principal usa <Hero /> sense prop → sense aquesta classe.
 *
 * Per amagar només el patró de punts però deixar el títol: comenta el bloc de sota i descomenta:
 *   .organizer-home .organizer-hero-pattern { display: none !important; }
 */
.organizer-home .organizer-page-hero {
  display: none !important;
}

/*
 * Secció d’esdeveniments (FeaturedEvents) i opcional custom HTML: sense espai inferior del py-16 de Tailwind.
 * organizer/[id]/page.tsx → section.py-16.px-4 dins .organizer-home
 */
body.organizer-buenritmo .organizer-home > section.py-16.px-4 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/*
 * FeaturedEvents: arrel <section class="py-20 bg-muted/30"> (dins page organizer → max-w-7xl).
 */
body.organizer-buenritmo .organizer-home > section.py-16.px-4 > .max-w-7xl > section.py-20 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* FeaturedEvents: treu el marge inferior extra de la graella (mb-12) */
body.organizer-buenritmo .organizer-home section.py-20 .grid.mb-12 {
  margin-bottom: 4rem !important;
}

/* Layout organitzador: <main class="min-h-screen"> (organizer/[id]/layout.tsx) */
body.organizer-buenritmo main.min-h-screen {
  min-height: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/*
 * Franja vermella — paritat amb Elementor post 6309 (635e3022): padding 12px 35px, margin-bottom 10px,
 * enllaços btn-naked (Work Sans, blanc, hover #000), botó Contacto blanc pill (#8A9394 text, ombra).
 * Al web original: elementor-hidden-tablet / -mobile (amagada ≤1024px).
 */
body.organizer-buenritmo .organizer-buenritmo-top-bar {
  background: var(--color-primary) !important;
  color: #ffffff !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 99980 !important;
  margin-bottom: 10px !important;
}

@media (max-width: 1024px) {
  body.organizer-buenritmo .organizer-buenritmo-top-bar {
    display: none !important;
  }
}

body.organizer-buenritmo .organizer-buenritmo-top-bar__inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px 0 !important;
  max-width: 1170px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 20px 40px !important;
  min-height: 72px !important;
  box-sizing: border-box !important;
}

body.organizer-buenritmo .organizer-buenritmo-top-bar__left {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Més espai a l'esquerra només per l'adreça (2n ítem) */
body.organizer-buenritmo .organizer-buenritmo-top-bar__item-wrap:nth-child(2) {
  margin-left: 28px !important;
}

/* Espai entre telèfon i adreça (margin widget 30px a Elementor) */
body.organizer-buenritmo .organizer-buenritmo-top-bar__item {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  text-decoration: none !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  margin: 0 30px 0 0 !important;
}

body.organizer-buenritmo .organizer-buenritmo-top-bar__item:last-child {
  margin-right: 0 !important;
}

body.organizer-buenritmo .organizer-buenritmo-top-bar__item:hover,
body.organizer-buenritmo .organizer-buenritmo-top-bar__item:focus {
  color: #000000 !important;
  fill: #000000 !important;
}

body.organizer-buenritmo .organizer-buenritmo-top-bar__item-icon {
  display: inline-flex !important;
  flex-shrink: 0 !important;
  width: 1.15em !important;
  height: 1.15em !important;
  margin-inline-end: 10px !important;
}

body.organizer-buenritmo .organizer-buenritmo-top-bar__item-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  fill: currentColor !important;
}

body.organizer-buenritmo .organizer-buenritmo-top-bar__item-txt {
  white-space: normal !important;
}

body.organizer-buenritmo .organizer-buenritmo-top-bar__right {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* Botó solid Contacto (47fbf82): fons blanc, text gris, pill, ombra */
body.organizer-buenritmo .organizer-buenritmo-top-bar__contact {
  display: inline-block !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
  color: var(--color-text-muted) !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  padding: 10px 24px !important;
  border-radius: 5em !important;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16) !important;
  border: none !important;
  transition:
    background-color 0.2s ease,
    color 0.2s ease !important;
}

body.organizer-buenritmo .organizer-buenritmo-top-bar__contact:hover,
body.organizer-buenritmo .organizer-buenritmo-top-bar__contact:focus {
  background-color: var(--color-text-muted) !important;
  color: #ffffff !important;
}

/*
 * HTML tipus WordPress + Elementor + Liquid (p.ex. incrustat a custom_content).
 * Contenidor: .elementor-element-6e85c17 / data-id="6e85c17" (e-flex, e-con-boxed, e-parent).
 */
body.organizer-buenritmo .elementor-element-6e85c17,
body.organizer-buenritmo .elementor-element[data-id='6e85c17'][data-element_type='container'] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 119px;
  box-sizing: border-box !important;
}

body.organizer-buenritmo .elementor-element-6e85c17.e-con-boxed,
body.organizer-buenritmo .elementor-element[data-id='6e85c17'].e-con-boxed {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Mateix criteri que Elementor: amaga a tauleta / mòbil quan porten aquestes classes */
@media (max-width: 1024px) {
  body.organizer-buenritmo .elementor-element-6e85c17.elementor-hidden-tablet,
  body.organizer-buenritmo .elementor-element[data-id='6e85c17'].elementor-hidden-tablet {
    display: none !important;
  }
}

@media (max-width: 767px) {
  body.organizer-buenritmo .elementor-element-6e85c17.elementor-hidden-mobile,
  body.organizer-buenritmo .elementor-element[data-id='6e85c17'].elementor-hidden-mobile {
    display: none !important;
  }
}

/*
 * Franja superior WordPress/Elementor (telèfon, adreça, botó Contacte) — #wrap > header#header,
 * plantilla elementor-6309, contenidor 635e3022. Colors alineats amb --color-primary.
 * Només aplica si incrustes aquest HTML (p.ex. custom_content); z-index per sota del header Musticket.
 */
body.organizer-buenritmo #wrap {
  width: 100% !important;
  box-sizing: border-box !important;
}

body.organizer-buenritmo #wrap > header#header,
body.organizer-buenritmo #wrap header#header {
  background: var(--color-primary) !important;
  color: #ffffff !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 99980 !important;
  margin-bottom: 10px !important;
}

body.organizer-buenritmo #wrap > header#header .elementor-6309,
body.organizer-buenritmo #wrap header#header .elementor-6309 {
  width: 100% !important;
}

body.organizer-buenritmo .elementor-element-635e3022,
body.organizer-buenritmo .elementor-element[data-id='635e3022'] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
  min-height: 0 !important;
  padding: 12px 35px !important;
  box-sizing: border-box !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

body.organizer-buenritmo .elementor-element-635e3022 .e-con-inner,
body.organizer-buenritmo .elementor-element[data-id='635e3022'] .e-con-inner {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 1170px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 0 !important;
}

body.organizer-buenritmo .elementor-element-635e3022 .btn-txt,
body.organizer-buenritmo .elementor-element[data-id='635e3022'] .btn-txt,
body.organizer-buenritmo #wrap header#header .btn-txt {
  color: #ffffff !important;
  font-weight: 600 !important;
}

body.organizer-buenritmo #wrap header#header a.elementor-button,
body.organizer-buenritmo #wrap header#header .elementor-button {
  color: #ffffff !important;
  text-decoration: none !important;
}

body.organizer-buenritmo #wrap header#header a.elementor-button.btn-solid,
body.organizer-buenritmo #wrap header#header .elementor-button.btn-solid {
  background-color: #ffffff !important;
  color: var(--color-text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: 5em !important;
  padding: 8px 22px !important;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16) !important;
}

body.organizer-buenritmo #wrap header#header a.elementor-button.btn-solid:hover,
body.organizer-buenritmo #wrap header#header .elementor-button.btn-solid:hover {
  background-color: var(--color-text-muted) !important;
  color: #ffffff !important;
}

body.organizer-buenritmo #wrap header#header a.elementor-button.btn-naked:hover,
body.organizer-buenritmo #wrap header#header .elementor-button.btn-naked:hover {
  color: #000000 !important;
}

/* Spacer sota la capçalera Elementor (256873d / .elementor-spacer-inner) */
body.organizer-buenritmo .elementor-element-256873d .elementor-spacer-inner,
body.organizer-buenritmo .elementor-element[data-id='256873d'] .elementor-spacer-inner {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {
  body.organizer-buenritmo .elementor-element-635e3022.elementor-hidden-tablet,
  body.organizer-buenritmo .elementor-element[data-id='635e3022'].elementor-hidden-tablet {
    display: none !important;
  }
}

@media (max-width: 767px) {
  body.organizer-buenritmo .elementor-element-635e3022.elementor-hidden-mobile,
  body.organizer-buenritmo .elementor-element[data-id='635e3022'].elementor-hidden-mobile {
    display: none !important;
  }
}

body.organizer-buenritmo button,
body.organizer-buenritmo .btn-primary,
body.organizer-buenritmo a.bg-primary,
body.organizer-buenritmo button.bg-primary {
  transition: all 0.3s ease !important;
}

body.organizer-buenritmo button:hover,
body.organizer-buenritmo .btn-primary:hover,
body.organizer-buenritmo a.bg-primary:hover,
body.organizer-buenritmo button.bg-primary:hover {
  transform: translateY(-3px) !important;
}

/*
 * Header Musticket per sobre de contingut incrustat (Elementor / barres fixed amb z-index alt).
 * El component porta sticky z-50; si no es veu “a dalt”, normalment és un overlay que el tapa.
 */
body.organizer-buenritmo header {
  background: #000000 !important;
  color: #ffffff !important;
  border-bottom: 0px solid #ffffff !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100000 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Treu el drop-shadow de Tailwind al logo (es mostra tal qual el PNG) */
body.organizer-buenritmo header a img,
body.organizer-buenritmo footer img {
  filter: none !important;
  -webkit-filter: none !important;
}

body.organizer-buenritmo header a.text-foreground,
body.organizer-buenritmo header nav a.text-foreground,
body.organizer-buenritmo header a,
body.organizer-buenritmo header span,
body.organizer-buenritmo header nav a {
  color: #ffffff !important;
  font-family: 'Roboto', 'Work Sans', sans-serif !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  text-decoration: none !important;
}

body.organizer-buenritmo header a.text-foreground:hover,
body.organizer-buenritmo header nav a.text-foreground:hover,
body.organizer-buenritmo header a:hover,
body.organizer-buenritmo header nav a:hover {
  color: var(--color-primary) !important;
}

body.organizer-buenritmo header .text-foreground {
  color: #ffffff !important;
}

body.organizer-buenritmo header .text-foreground:hover {
  color: var(--color-primary) !important;
}

body.organizer-buenritmo header .hover\\:text-primary:hover {
  color: var(--color-primary) !important;
}

body.organizer-buenritmo header nav.hidden.md\\:flex {
  gap: 1.25rem !important;
}

/*
 * Nav d’escriptori: el component usa `hidden md:flex`; si algun CSS extern deixa display:none,
 * aquí es força flex des de 768px perquè “Inicio” i enllaços es vegin.
 */
@media (min-width: 768px) {
  body.organizer-buenritmo header > div > div > nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    visibility: visible !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    opacity: 1 !important;
  }
}

body.organizer-buenritmo header nav a {
  display: inline-block !important;
  padding: 0.25rem 0 !important;
}

/* Selector d’idioma (ES / CA / …): contrast sobre header negre */
body.organizer-buenritmo header select {
  color: #ffffff !important;
  background-color: #2a2a2a !important;
  border-color: var(--color-primary) !important;
  font-family: 'Work Sans', 'Roboto', sans-serif !important;
  font-size: 14px !important;
}

/* Secció Events destacats */
body.organizer-buenritmo .bg-muted\/30,
body.organizer-buenritmo section.bg-muted\/30 {
  background-color: #000000 !important;
  color: #ffffff !important;
}

body.organizer-buenritmo .bg-gradient-to-r.from-primary.via-secondary.to-accent {
  background: #ffffff !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body.organizer-buenritmo .bg-card {
  color: #ffffff !important;
}

body.organizer-buenritmo .text-foreground {
  color: #ffffff !important;
}

body.organizer-buenritmo .text-muted-foreground {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Cerca */
body.organizer-buenritmo input.bg-card {
  background: rgba(42, 42, 42, 0.9) !important;
  border: 2px solid var(--color-primary) !important;
  color: #ffffff !important;
}

body.organizer-buenritmo input.bg-card::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

body.organizer-buenritmo input.bg-card:focus {
  border-color: #2e7d32 !important;
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.3) !important;
}

/* Botó “Ver todos” */
body.organizer-buenritmo .bg-gradient-to-r.from-primary.to-secondary {
  background: linear-gradient(to right, var(--color-primary), var(--color-primary)) !important;
  color: #ffffff !important;
  border: none !important;
}

body.organizer-buenritmo .bg-gradient-to-r.from-primary.to-secondary:hover {
  background: linear-gradient(to right, #2e7d32, var(--color-primary)) !important;
  transform: scale(1.05) !important;
}

body.organizer-buenritmo .bg-yellow-500 {
  background: var(--color-primary) !important;
  color: #ffffff !important;
}

/* Footer */
body.organizer-buenritmo footer {
  background: var(--color-primary) !important;
  color: #000000 !important;
  padding: 3rem 0 !important;
  margin-top: 0 !important;
}

body.organizer-buenritmo footer a {
  color: #000000 !important;
}

body.organizer-buenritmo footer a:hover {
  color: #ff0080 !important;
}

/*
 * Amaga tota la fila superior del footer (logo + descripció + columna contacte).
 * Footer.tsx: primer fill de .max-w-7xl és el grid de 2 columnes; el segon és la franja legal (border-t).
 */
body.organizer-buenritmo footer#contact .max-w-7xl > div:first-child {
  display: block !important;
  height: 0 !important;
  overflow: visible !important;
}

/* Posiciona la columna "Legal" del theme a la barra inferior */
body.organizer-buenritmo footer#contact .max-w-7xl {
  position: relative !important;
}

body.organizer-buenritmo footer#contact .max-w-7xl > div:first-child > div:nth-child(1),
body.organizer-buenritmo footer#contact .max-w-7xl > div:first-child > div:nth-child(2) {
  display: none !important;
}

body.organizer-buenritmo footer#contact .max-w-7xl > div:first-child > div:nth-child(3) {
  position: absolute !important;
  right: 0 !important;
  bottom: 2rem !important;
  text-align: right !important;
  transform: translateY(-30px) !important;
}

body.organizer-buenritmo footer#contact .max-w-7xl > div:first-child > div:nth-child(3) > h3 {
  display: none !important;
}

body.organizer-buenritmo footer#contact .max-w-7xl > div:first-child > div:nth-child(3) > ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 1.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.organizer-buenritmo footer#contact .max-w-7xl > div:first-child > div:nth-child(3) > ul > li {
  margin: 0 !important;
}

body.organizer-buenritmo footer#contact .max-w-7xl {
  padding-top: 0 !important;
  padding-bottom: 4rem !important;
}

/* Franja legal: sense mt-12 / pt-8 de Tailwind (marge i padding superior) */
body.organizer-buenritmo footer#contact .max-w-7xl > div:nth-child(2),
body.organizer-buenritmo footer#contact .max-w-7xl > div.border-t.border-border {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
  border-top-width: 0 !important;
}

/* Targetes */
body.organizer-buenritmo .bg-card,
body.organizer-buenritmo .event-card {
  background: var(--color-primary);
  color: #000000 !important;
}

/* Inputs generals */
body.organizer-buenritmo input,
body.organizer-buenritmo select,
body.organizer-buenritmo textarea {
  color: #000000 !important;
}

body.organizer-buenritmo input:focus,
body.organizer-buenritmo select:focus,
body.organizer-buenritmo textarea:focus {
  outline: none !important;
}

body.organizer-buenritmo input::placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
}

body.organizer-buenritmo .text-muted-foreground {
  color: rgba(0, 0, 0, 0.7) !important;
}

body.organizer-buenritmo .text-foreground {
  color: #000000 !important;
}

body.organizer-buenritmo .text-primary {
  color: white !important;
}

body.organizer-buenritmo .text-secondary {
  color: #00ff80 !important;
}

body.organizer-buenritmo .text-accent {
  color: #8000ff !important;
}

@layer utilities {
  .text-card {
    color: white;
  }
  .text-white {
    color: white;
  }
  .text-gray-800 {
    color: white;
  }
  .bg-primary {
    background-color: white;
    color: black;
  }
  .bg-muted {
    background-color: var(--color-primary);
  }
  .bg-blue-600 {
    background-color: var(--color-primary);
  }
  .bg-red-600 {
    background-color: var(--color-primary);
  }
}

body.organizer-buenritmo .text-foreground {
  color: white !important;
}