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

/* 700 Milles — tema visual basat en bonritmo/bidean, selectors body.organizer-700milles / .organizer-700milles */

/* Tipografia (override): Inter a tot el tema. */
/* Color principal (adaptable): --color-primary. */
body.organizer-700milles {
  --color-primary: #e6352d !important;
  --color-secondary: #2e7d32 !important;
  --color-accent: #ffffff !important;
  --color-dark: #1a1a1a !important;
  --color-text-muted: #8a9394 !important;
  /* CTA / marca (700 Milles) */
  --brand-hover: #beb181 !important;
  --brand-text: #000000 !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: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
}

/* Titulars — mantenim estils, però amb Inter */
body.organizer-700milles main h1,
body.organizer-700milles main h2,
body.organizer-700milles main h3 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !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.
 *
 * IMPORTANT (700 Milles): aquí el volem visible.
 * Si només vols amagar el patró de punts, usa:
 *   body.organizer-700milles .organizer-home .organizer-hero-pattern { display: none !important; }
 */
body.organizer-700milles .organizer-page-hero {
  min-height: 640px !important;
  background-image: url('https://700milles.cat/wp-content/uploads/2026/02/Disseny-sense-titol-scaled-e1772041475373.png') !important;
  /* Ajusta a l’amplada (sense retallar); l’alçada es calcula automàticament */
  background-size: 100% auto !important;
  /* Alinea al bottom: X% Y% */
  background-position: 50% 100% !important;
  background-repeat: no-repeat !important;
  /* Evita que el gradient de Tailwind domini el fons */
  background-color: transparent !important;
}

/* Filtre fosc sobre la imatge del Hero (700 Milles) */
body.organizer-700milles .organizer-page-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.35) !important;
  pointer-events: none !important;
}

/* Assegura que el contingut del Hero quedi per sobre del filtre */
body.organizer-700milles .organizer-page-hero > div.relative {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 640px) {
  body.organizer-700milles .organizer-page-hero {
    min-height: 420px !important;
  }
}

/* Treu el text del Hero (només per 700 Milles) */
body.organizer-700milles .organizer-page-hero h1 {
  display: none !important;
}

/* Tagline del Hero (700 Milles) */
body.organizer-700milles .organizer-page-hero .organizer-700milles-hero-tagline {
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6) !important;
  font-family: 'Spectral', serif !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

@media (max-width: 640px) {
  body.organizer-700milles .organizer-page-hero .organizer-700milles-hero-tagline {
    font-size: 20px !important;
  }
}

/* Treu capes decoratives (punts + blobs animats) */
body.organizer-700milles .organizer-page-hero .organizer-hero-pattern,
body.organizer-700milles .organizer-page-hero > div.absolute {
  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-700milles .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-700milles .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;
}

/* Layout organitzador: <main class="min-h-screen"> (organizer/[id]/layout.tsx) */
body.organizer-700milles main.min-h-screen {
  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-700milles .organizer-700milles-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-700milles .organizer-700milles-top-bar {
    display: none !important;
  }
}

body.organizer-700milles .organizer-700milles-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-700milles .organizer-700milles-top-bar__left {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Espai entre telèfon i adreça (margin widget 30px a Elementor) */
body.organizer-700milles .organizer-700milles-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-700milles .organizer-700milles-top-bar__item:last-child {
  margin-right: 0 !important;
}

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

body.organizer-700milles .organizer-700milles-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-700milles .organizer-700milles-top-bar__item-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  fill: currentColor !important;
}

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

body.organizer-700milles .organizer-700milles-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-700milles .organizer-700milles-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-700milles .organizer-700milles-top-bar__contact:hover,
body.organizer-700milles .organizer-700milles-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-700milles .elementor-element-6e85c17,
body.organizer-700milles .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-700milles .elementor-element-6e85c17.e-con-boxed,
body.organizer-700milles .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-700milles .elementor-element-6e85c17.elementor-hidden-tablet,
  body.organizer-700milles .elementor-element[data-id='6e85c17'].elementor-hidden-tablet {
    display: none !important;
  }
}

@media (max-width: 767px) {
  body.organizer-700milles .elementor-element-6e85c17.elementor-hidden-mobile,
  body.organizer-700milles .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-700milles #wrap {
  width: 100% !important;
  box-sizing: border-box !important;
}

body.organizer-700milles #wrap > header#header,
body.organizer-700milles #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-700milles #wrap > header#header .elementor-6309,
body.organizer-700milles #wrap header#header .elementor-6309 {
  width: 100% !important;
}

body.organizer-700milles .elementor-element-635e3022,
body.organizer-700milles .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-700milles .elementor-element-635e3022 .e-con-inner,
body.organizer-700milles .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-700milles .elementor-element-635e3022 .btn-txt,
body.organizer-700milles .elementor-element[data-id='635e3022'] .btn-txt,
body.organizer-700milles #wrap header#header .btn-txt {
  color: #ffffff !important;
  font-weight: 600 !important;
}

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

body.organizer-700milles #wrap header#header a.elementor-button.btn-solid,
body.organizer-700milles #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-700milles #wrap header#header a.elementor-button.btn-solid:hover,
body.organizer-700milles #wrap header#header .elementor-button.btn-solid:hover {
  background-color: var(--color-text-muted) !important;
  color: #ffffff !important;
}

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

/* Spacer sota la capçalera Elementor (256873d / .elementor-spacer-inner) */
body.organizer-700milles .elementor-element-256873d .elementor-spacer-inner,
body.organizer-700milles .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-700milles .elementor-element-635e3022.elementor-hidden-tablet,
  body.organizer-700milles .elementor-element[data-id='635e3022'].elementor-hidden-tablet {
    display: none !important;
  }
}

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

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

body.organizer-700milles button:hover,
body.organizer-700milles .btn-primary:hover,
body.organizer-700milles a.bg-primary:hover,
body.organizer-700milles 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-700milles header {
  background: #ffffff !important;
  color: #000000 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !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-700milles header a img,
body.organizer-700milles footer img {
  filter: none !important;
  -webkit-filter: none !important;
}

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

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

body.organizer-700milles header .text-foreground {
  color: #000000 !important;
}

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

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

body.organizer-700milles header nav.hidden.md\\:flex {
  gap: 2rem !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-700milles 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-700milles header nav a {
  display: inline-block !important;
  padding: 0.25rem 0 !important;
}

/* Selector d’idioma (ES / CA / …): contrast sobre header blanc */
body.organizer-700milles header select {
  color: #000000 !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-color: #000000 !important;
  font-family: 'Work Sans', 'Roboto', sans-serif !important;
  font-size: 14px !important;
}

/* Focus/hover del selector d’idioma: negre (no vermell) */
body.organizer-700milles header select:focus {
  border-color: #000000 !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35) !important;
}

body.organizer-700milles header select:hover {
  border-color: rgba(0, 0, 0, 0.6) !important;
}

/* Fletxa del select en negre (sobreescriu el data-uri de Tailwind) */
body.organizer-700milles header select#language-selector {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

/* Icones (SVG) del header en negre */
body.organizer-700milles header svg,
body.organizer-700milles header [data-icon],
body.organizer-700milles header .text-muted-foreground {
  color: #000000 !important;
  /* NO forcem fill aquí: molts SVG del header són d'stroke i s'han de veure "outline" */
}

/* Botó del carret (icona) en negre sobre fons blanc */
body.organizer-700milles header button[aria-label='Carret de compra'] {
  background-color: transparent !important;
  color: #000000 !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0.75rem !important;
}

body.organizer-700milles header button[aria-label='Carret de compra']:hover,
body.organizer-700milles header button[aria-label='Carret de compra']:focus,
body.organizer-700milles header button[aria-label='Carret de compra']:focus-visible {
  background-color: rgba(0, 0, 0, 0.06) !important;
  color: #000000 !important;
  box-shadow: none !important;
}

body.organizer-700milles header button[aria-label='Carret de compra'] svg {
  color: #000000 !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

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

body.organizer-700milles .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-700milles .bg-card {
  color: #ffffff !important;
}

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

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

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

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

body.organizer-700milles 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-700milles .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-700milles .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-700milles .bg-yellow-500 {
  background: var(--color-primary) !important;
  color: #ffffff !important;
}

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

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

body.organizer-700milles 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-700milles footer#contact .max-w-7xl > div:first-child {
  display: none !important;
}

body.organizer-700milles 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-700milles footer#contact .max-w-7xl > div:nth-child(2),
body.organizer-700milles 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-700milles .bg-card,
body.organizer-700milles .event-card {
  background: var(--color-primary);
  color: #000000 !important;
}

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

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

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

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

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

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

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

body.organizer-700milles .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-700milles .text-foreground {
  color: white !important;
}

/* ===== 700 Milles: tema CLAR (override final) ===== */
body.organizer-700milles {
  background: #ffffff !important;
  color: #000000 !important;
}

/* Seccions i superfícies */
body.organizer-700milles .bg-muted\/30,
body.organizer-700milles section.bg-muted\/30 {
  background-color: #ffffff !important;
  color: #000000 !important;
}

body.organizer-700milles .bg-card {
  background-color: #ffffff !important;
  color: #000000 !important;
}

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

body.organizer-700milles .text-muted-foreground {
  color: rgba(0, 0, 0, 0.65) !important;
}

/* Cercador (FeaturedEvents) en clar */
body.organizer-700milles input.bg-card {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  color: #000000 !important;
}

body.organizer-700milles input.bg-card::placeholder {
  color: rgba(0, 0, 0, 0.45) !important;
}

/* Evita que el @layer utilities (copiat) torni a enfosquir textos */
body.organizer-700milles .text-card,
body.organizer-700milles .text-white,
body.organizer-700milles .text-gray-800 {
  color: #000000 !important;
}

/* Pàgina d'entrades: fons com el badge de data (#sessions-section / cards home) */
body.organizer-700milles .bg-background {
  background-color: #e7e5d9 !important;
}

/* Checkout: envoltori principal (CheckoutPage) — mateix fons que .bg-background (tickets) */
body.organizer-700milles div.flex.flex-col.bg-gray-50 {
  background-color: #e7e5d9 !important;
}

/* Footer: amaga la franja legal (copyright + links) */
body.organizer-700milles footer#contact .max-w-7xl {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.organizer-700milles footer#contact .max-w-7xl > div.border-t.border-border,
body.organizer-700milles footer#contact .max-w-7xl > div:nth-child(2),
body.organizer-700milles footer#contact .max-w-7xl > div.py-16 {
  display: none !important;
}

/* Footer wrapper: treu la línia superior (border-t de Tailwind) */
body.organizer-700milles footer#contact {
  border-top: none !important;
  border-top-width: 0 !important;
}

/* Botons de compra (cards d'esdeveniments) */
body.organizer-700milles .organizer-home button.bg-primary-dark {
  background-color: #beb181 !important;
}
body.organizer-700milles .organizer-home button.bg-primary-dark:hover {
  background-color: #a99b6a !important;
  filter: none !important;
}

/*
 * Pàgina d'entrades (PurchaseSummary): botó "Comprar ara" com enllaç "Comprar entrades" (EventDetails).
 * El component només usa aquest wrapper: .bg-white.rounded-lg.shadow-md.p-6.sticky.top-6
 */
body.organizer-700milles div.bg-white.rounded-lg.shadow-md.p-6.sticky.top-6 > button.w-full {
  background-color: var(--brand-hover) !important;
  color: var(--brand-text) !important;
  transition:
    opacity 0.15s ease,
    background-color 0.15s ease !important;
}
body.organizer-700milles div.bg-white.rounded-lg.shadow-md.p-6.sticky.top-6 > button.w-full:hover:not(:disabled) {
  opacity: 0.9 !important;
  background-color: var(--brand-hover) !important;
}
body.organizer-700milles div.bg-white.rounded-lg.shadow-md.p-6.sticky.top-6 > button.w-full:disabled:hover {
  background-color: var(--brand-hover) !important;
  opacity: 0.5 !important;
}

/*
 * Carret (drawer lateral): botó "Procedir al pagament" amb els colors de 700 Milles.
 * El botó ve amb style inline background-color: var(--brand-text); aquí el sobreescrivim.
 */
body.organizer-700milles
  div.fixed.right-0.top-0.h-full.w-full.max-w-md.bg-white
  > div.border-t.border-gray-200.p-4.bg-gray-50
  > button.w-full.py-3 {
  background-color: var(--brand-hover) !important;
  color: var(--brand-text) !important;
}

/*
 * Pàgina d'entrades (TicketSelector): capçalera de zona (bg-gray-200) — mateix fons i text
 * que el botó "Comprar ara" (var(--brand-hover) / var(--brand-text)). No afecta zona esgotada (bg-red-100).
 */
body.organizer-700milles
  div.bg-background
  .lg\\:col-span-2
  > div.max-w-4xl.mx-auto
  > div.space-y-6
  > div.bg-white.rounded-lg.shadow-md.overflow-hidden
  > div.px-6.py-4.border-b.border-gray-300.bg-gray-200 {
  background-color: var(--brand-hover) !important;
  border-bottom-color: rgba(0, 0, 0, 0.15) !important;
}
body.organizer-700milles
  div.bg-background
  .lg\\:col-span-2
  > div.max-w-4xl.mx-auto
  > div.space-y-6
  > div.bg-white.rounded-lg.shadow-md.overflow-hidden
  > div.px-6.py-4.border-b.border-gray-300.bg-gray-200
  h3.text-gray-900,
body.organizer-700milles
  div.bg-background
  .lg\\:col-span-2
  > div.max-w-4xl.mx-auto
  > div.space-y-6
  > div.bg-white.rounded-lg.shadow-md.overflow-hidden
  > div.px-6.py-4.border-b.border-gray-300.bg-gray-200
  .text-gray-500 {
  color: var(--brand-text) !important;
}

/* Fallback robust: mateixa capçalera de zona, però amb selector menys estricte */
body.organizer-700milles .bg-background .bg-white.rounded-lg.shadow-md.overflow-hidden > .bg-gray-200 {
  background-color: var(--brand-hover) !important;
  border-bottom-color: rgba(0, 0, 0, 0.15) !important;
}
body.organizer-700milles .bg-background .bg-white.rounded-lg.shadow-md.overflow-hidden > .bg-gray-200 h3,
body.organizer-700milles .bg-background .bg-white.rounded-lg.shadow-md.overflow-hidden > .bg-gray-200 .text-gray-500 {
  color: var(--brand-text) !important;
}

/* EventDetails: barra sticky (INFORMACIÓN / SESIONES / Comprar entradas) */
body.organizer-700milles div.bg-muted.border-b.border-border.sticky.top-16 {
  background-color: #beb181 !important;
  border-bottom-color: rgba(0, 0, 0, 0.12) !important;
  color: #000000 !important;
}

body.organizer-700milles div.bg-muted.border-b.border-border.sticky.top-16 a,
body.organizer-700milles div.bg-muted.border-b.border-border.sticky.top-16 button {
  color: #000000 !important;
}

/* EventDetails: targetes de sessions (tot el text en negre) */
body.organizer-700milles #sessions-section .bg-card {
  color: #000000 !important;
}
body.organizer-700milles #sessions-section .bg-card * {
  color: #000000 !important;
}
body.organizer-700milles #sessions-section .bg-card a,
body.organizer-700milles #sessions-section .bg-card button,
body.organizer-700milles #sessions-section .bg-card .text-foreground,
body.organizer-700milles #sessions-section .bg-card .text-muted-foreground {
  color: #000000 !important;
}

/* EventDetails: badge data de sessió (mateix fons que a les cards de la home) */
body.organizer-700milles #sessions-section .bg-white\/20.rounded-lg.p-4.text-center {
  background-color: #e7e5d9 !important;
}

/* Cards d'esdeveniments: badge data (Vie 24 ABR 2026) */
body.organizer-700milles .organizer-home .bg-white\/20.rounded-lg.p-4.text-center {
  background-color: #e7e5d9 !important;
}