/* ══════════════════════════════════════════════════════════
   THEME DARK — Override globale Events InfoSardinya
   Ispirato al tema Vidence  (Dark & Electric Blue)
   Branch: restyle-dark-blue
   ══════════════════════════════════════════════════════════ */

/* ── 1. VARIABILI ─────────────────────────────────────────── */
:root {
  --color-primary:          #000000;
  --color-sardegna-blue:    #2D5BFF;   /* blu elettrico */
  --color-sardegna-yellow:  #F9B233;   /* oro — invariato */
  --color-sardegna-sand:    #0D0D18;   /* sabbia → card dark */
  --color-text:             #9CA3AF;   /* grigio chiaro */
  --color-text-secondary:   #6B7280;
  --color-accent-red:       #2D5BFF;   /* rosso → blu nel dark theme */
  --color-white:            #FFFFFF;

  /* Nuovi token dark */
  --dk-bg:          #000000;
  --dk-surface:     #0D0D18;   /* card / contenitori */
  --dk-surface-2:   #111127;   /* hover card */
  --dk-section:     #03030A;   /* sezioni di sfondo */
  --dk-border:      rgba(45, 91, 255, 0.18);
  --dk-border-hov:  rgba(45, 91, 255, 0.65);
  --dk-blue:        #2D5BFF;
  --dk-blue-hov:    #4A76FF;
  --dk-blue-dim:    rgba(45, 91, 255, 0.12);
}

/* ── 2. RESET BASE ────────────────────────────────────────── */
html { background: var(--dk-bg) !important; }

body,
body.bg-white {
  background: var(--dk-bg) !important;
  color: var(--color-white) !important;
  /* Compensazione altezza header fixed (h-20 = 80px) */
  padding-top: 80px !important;
}

/* Scrollbar personalizzata */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: var(--dk-blue); border-radius: 3px; }

/* ── 3. NAVBAR ────────────────────────────────────────────── */
/* La navbar è già bg-black — cambiamo solo l'accento rosso → blu */
header .text-red-500                 { color: var(--dk-blue) !important; }
.hover\:text-red-500:hover           { color: var(--dk-blue) !important; }
header                               { border-bottom: 1px solid var(--dk-border) !important; }

.navbar-mob-link:hover,
.navbar-mob-link:active {
  background: var(--dk-blue-dim) !important;
  color: var(--dk-blue) !important;
}

/* Pulsanti auth nella navbar */
header a[href="login.html"],
header a[href="register.html"] {
  border-color: var(--dk-blue) !important;
  color: var(--dk-blue) !important;
}
header a[href="login.html"]:hover,
header a[href="register.html"]:hover {
  background: var(--dk-blue) !important;
  color: #fff !important;
}

/* ── 4. HERO SECTIONS ─────────────────────────────────────── */
.page-hero {
  position: relative !important;
}
/* Overlay scuro-blu sul hero senza rimuovere l'immagine */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    150deg,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(13, 13, 40, 0.85) 60%,
    rgba(45, 91, 255, 0.2) 100%
  );
  z-index: 0;
  pointer-events: none;
}
.page-hero-content { position: relative; z-index: 1 !important; }
.page-hero h1 { color: #fff !important; }
.page-hero p  { color: rgba(255,255,255,0.88) !important; }

/* Hero dettaglio evento */
.event-hero {
  position: relative !important;
}
.event-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(0,0,0,0.8) 0%, rgba(45,91,255,0.15) 100%);
  z-index: 0;
  pointer-events: none;
}
.event-hero > * { position: relative; z-index: 1; }

/* ── 5. SEZIONI DI CONTENUTO ──────────────────────────────── */
.events-content-section,
.locations-content-section,
.categories-content-section,
.categories-content,         /* categorie.html */
.categories-section,         /* home — "Cosa Stai Cercando?" */
.highlight-section,          /* home — "Trending Ora" */
.cta-section,                /* home — Newsletter */
.packages-section,
.contact-section,
.content-section,
.chi-siamo-section,
.values-section {
  background: var(--dk-section) !important;
  color: var(--color-white) !important;
}
/* Pannello eventi per categoria in categorie.html (inline style bg) */
#category-events-section { background: var(--dk-section) !important; }

/* Nota: .cal-hero NON viene toccato — calendario.html ha il suo dark theme nativo */

/* Fix specifico per Tailwind bg-gray-* usati inline */
.bg-gray-50,
.bg-gray-100,
.bg-white { background-color: var(--dk-section) !important; }

/* ── 6. TITOLI SEZIONE ────────────────────────────────────── */
.section-title {
  color: #fff !important;
}
.section-title::after {
  background: var(--dk-blue) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #fff !important;
}

p, li, span, label {
  color: var(--color-text) !important;
}

/* Link generici */
a { color: var(--color-white) !important; }
a:hover { color: var(--dk-blue) !important; }

/* ── 7. CARD EVENTI ───────────────────────────────────────── */
.event-card {
  background: #232345 !important;
  border: 1px solid rgba(45, 91, 255, 0.32) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
  position: relative !important;
  overflow: hidden !important;
}
.event-card:hover {
  background: #2d2d55 !important;
  border-color: var(--dk-border-hov) !important;
  box-shadow: 0 12px 40px rgba(45, 91, 255, 0.2) !important;
  transform: translateY(-6px) !important;
}
/* Boost "In Evidenza" visibile anche in dark mode */
.event-card.boosted {
  overflow: visible !important;
  border: 3px solid #F9B233 !important;
  box-shadow: 0 0 0 3px rgba(249,178,51,0.25), 0 8px 32px rgba(249,178,51,0.40) !important;
  animation: boosted-pulse-dk 2.5s ease-in-out infinite;
  background: #13134E !important;
}
.event-card.boosted .event-image {
  border-radius: 9px 9px 0 0;
}
@keyframes boosted-pulse-dk {
  0%, 100% { box-shadow: 0 0 0 3px rgba(249,178,51,0.25), 0 8px 32px rgba(249,178,51,0.40) !important; }
  50% { box-shadow: 0 0 0 5px rgba(249,178,51,0.40), 0 10px 40px rgba(249,178,51,0.65) !important; }
}
.event-card.boosted:hover {
  box-shadow: 0 0 0 4px rgba(249,178,51,0.45), 0 16px 48px rgba(249,178,51,0.55) !important;
  transform: translateY(-8px) scale(1.02) !important;
  animation: none;
}

/* Overlay rimosso: nascondeva le immagini con un filtro azzurrino indesiderato */

/* Boost: override del color forzato su span/div (riga 145) */
.boost-bar   { color: #fff !important; }
.boost-badge { color: #FFD970 !important; }

.event-body,
.event-info,
.event-date,
.event-title {
  background: transparent !important;
}
.event-title   { color: #fff !important; font-weight: 700 !important; }
.event-date    { color: var(--dk-blue) !important; }
.event-location { color: var(--color-text) !important; }

/* Badge categorie nella card */
.event-badge {
  background: var(--dk-blue) !important;
  color: #fff !important;
}

/* CTA card */
.event-cta {
  background: var(--dk-blue) !important;
  color: #fff !important;
  border: none !important;
}
.event-cta:hover {
  background: var(--dk-blue-hov) !important;
  transform: translateY(-2px) !important;
}

/* ── 8. CARD LUOGHI ───────────────────────────────────────── */
.location-card {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important;
  position: relative !important;
}
.location-card:hover {
  background: var(--dk-surface-2) !important;
  border-color: var(--dk-border-hov) !important;
  box-shadow: 0 12px 40px rgba(45,91,255,0.2) !important;
}

/* Overlay sull'immagine della card luogo — rimosso */

.location-body { background: transparent !important; }
.location-title { color: #fff !important; font-weight: 700 !important; }
.location-category { color: var(--dk-blue) !important; }
.location-info { border-top-color: rgba(255,255,255,0.08) !important; }

.event-count-badge {
  background: var(--dk-blue) !important;
  color: #fff !important;
}

.location-cta {
  background: var(--dk-blue) !important;
  color: #fff !important;
}
.location-cta:hover { background: #F9B233 !important; color: #151515 !important; box-shadow: 0 4px 15px rgba(249, 178, 51, 0.4) !important; }

.location-btn-esplora { background: var(--dk-blue) !important; color: #fff !important; }
.location-btn-esplora:hover { background: #F9B233 !important; color: #151515 !important; box-shadow: 0 6px 20px rgba(249, 178, 51, 0.4) !important; }

/* Preview eventi nella card luogo */
.events-preview { border-top-color: rgba(255,255,255,0.06) !important; }
.events-preview-title { color: var(--dk-blue) !important; }
.events-preview-list li {
  border-bottom-color: rgba(255,255,255,0.05) !important;
  color: var(--color-text) !important;
}
.preview-event-title { color: var(--color-text) !important; }
.preview-event-date  { color: var(--dk-blue) !important; }

/* ── 9. CARD CATEGORIE (grandi — categorie.html) ─────────── */
.category-card-large {
  background: #232345 !important;
  border: 1px solid rgba(45, 91, 255, 0.25) !important;
}
.category-card-large:hover {
  border-color: var(--dk-border-hov) !important;
  box-shadow: 0 12px 40px rgba(45,91,255,0.25) !important;
}
.category-card-content { background: transparent !important; }
.category-card-btn {
  background: var(--dk-blue) !important;
  color: #fff !important;
  border-color: var(--dk-blue) !important;
}
.category-card-btn:hover { background: var(--dk-blue-hov) !important; }

/* Card categorie piccole — home "Cosa Stai Cercando?" */
.category-card {
  background: #232345 !important;
  border: 1px solid rgba(45, 91, 255, 0.25) !important;
  color: var(--color-white) !important;
}
.category-card:hover {
  border-color: var(--dk-border-hov) !important;
  box-shadow: 0 20px 40px rgba(45,91,255,0.2) !important;
  transform: translateY(-8px) !important;
}
/* Titoli generici categoria (home) */
.category-title { color: #fff !important; font-weight: 700 !important; }
.category-desc  { color: var(--color-text) !important; }
/* Link "Esplora →" nelle card categoria home */
.category-card a { color: var(--dk-blue) !important; }
.category-card a:hover { color: var(--dk-blue-hov) !important; }

/* Titoli e testi card categoria GRANDI — categorie.html
   La classe è .category-card-title (div, non heading → sfugge alla regola h1-h6) */
.category-card-title {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.category-card-desc {
  color: #b0b8c8 !important;   /* grigio chiaro leggibile su dark */
}
.category-card-content {
  background: transparent !important;
}

/* ── 10. CARD PACCHETTI ───────────────────────────────────── */
.package-card {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border) !important;
  border-top: 4px solid var(--dk-blue) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important;
}
.package-card.featured {
  border-top-color: var(--color-sardegna-yellow) !important;
  box-shadow: 0 16px 50px rgba(45,91,255,0.3) !important;
}
.package-header {
  background: linear-gradient(135deg, #0D0D30 0%, #1a1a3a 100%) !important;
}
.package-name    { color: #fff !important; }
.package-price   { color: var(--dk-blue) !important; }
.package-period  { color: var(--color-text) !important; }
.package-feature { color: var(--color-text) !important; }
.package-feature::before { color: var(--dk-blue) !important; }
.package-features li { color: var(--color-text) !important; }
.package-badge {
  background: var(--color-sardegna-yellow) !important;
  color: #000 !important;
}
.package-cta {
  background: var(--dk-blue) !important;
  color: #fff !important;
}
.package-cta:hover { background: var(--dk-blue-hov) !important; }
.package-card.featured .package-cta {
  background: var(--color-sardegna-yellow) !important;
  color: #000 !important;
}
/* Feature list checkmark */
.package-features li::before { color: var(--dk-blue) !important; }

/* ── 11. FILTRI EVENTI ────────────────────────────────────── */
.filters-section {
  background: #0a0a1a !important;
  border-top: 3px solid var(--dk-blue) !important;
  border-bottom: 1px solid var(--dk-border) !important;
  padding: 1.75rem 1rem !important;
}
.filter-label {
  color: #fff !important;
  font-size: 1rem !important;
  letter-spacing: 0.03em !important;
}
.filter-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1.5px solid rgba(255,255,255,0.18) !important;
  color: #e5e7eb !important;
  border-radius: 10px !important;
  padding: 1rem 1.25rem !important;
  min-width: 90px !important;
}
.filter-btn:hover {
  border-color: var(--dk-blue) !important;
  color: var(--dk-blue) !important;
  background: var(--dk-blue-dim) !important;
  transform: translateY(-2px) !important;
}
.filter-btn.active {
  background: var(--dk-blue) !important;
  border-color: var(--dk-blue) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(45,91,255,0.4) !important;
}

/* ── 12. PAGINA CHI SIAMO ─────────────────────────────────── */
.value-card {
  background: var(--dk-surface) !important;
  border-left-color: var(--dk-blue) !important;
}
.value-title { color: #fff !important; }
.value-desc  { color: var(--color-text) !important; }

/* Sezione timeline / storia */
.timeline-item,
.story-block { background: var(--dk-surface) !important; }

/* ── 13. PAGINA CONTATTI ──────────────────────────────────── */
.contact-section { background: var(--dk-section) !important; }

.info-card {
  background: var(--dk-surface) !important;
  border-left-color: var(--dk-blue) !important;
}
.info-card h3 { color: #fff !important; }
.info-card p  { color: var(--color-text) !important; }

.contact-form {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border) !important;
}
.contact-form h2,
.contact-form h3 { color: #fff !important; }

.form-label  { color: rgba(255,255,255,0.85) !important; }
.form-input,
.form-textarea,
.form-select {
  background: #0a0a16 !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--color-text-secondary) !important; }
.form-input:focus,
.form-textarea:focus {
  border-color: var(--dk-blue) !important;
  box-shadow: 0 0 0 3px rgba(45,91,255,0.2) !important;
  outline: none !important;
}

.form-submit {
  background: var(--dk-blue) !important;
  border-color: var(--dk-blue) !important;
  color: #fff !important;
}
.form-submit:hover {
  background: var(--dk-blue-hov) !important;
  box-shadow: 0 4px 20px rgba(45,91,255,0.4) !important;
}

/* ── 14. PAGINA DETTAGLIO EVENTO ──────────────────────────── */

/* Breadcrumb */
.breadcrumb-section {
  background: var(--dk-section) !important;
  border-bottom-color: rgba(45,91,255,0.15) !important;
}
.breadcrumb a     { color: var(--dk-blue) !important; }
.breadcrumb a:hover { color: var(--dk-blue-hov) !important; }
.breadcrumb span  { color: var(--color-text) !important; }

/* Sezione contenuto principale */
.event-detail-section {
  background: var(--dk-section) !important;
}
.event-detail-content,
.event-detail-container > * {
  background: transparent !important;
  color: var(--color-white) !important;
}

/* Immagine evento (sfondo placeholder) */
.event-image-full {
  background: var(--dk-surface) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.5) !important;
}

/* Titoli sezione */
.event-section-title {
  color: #fff !important;
  border-bottom-color: var(--dk-blue) !important;
}

/* Descrizione testo */
.event-description { color: #b0b8c8 !important; }

/* Highlight cards */
.highlight-card {
  background: var(--dk-surface) !important;
  border-left-color: var(--dk-blue) !important;
}
.highlight-title { color: #fff !important; }
.highlight-text  { color: var(--color-text) !important; }

/* Sidebar info-box */
.info-box {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border) !important;
}
.info-label { color: var(--color-text) !important; }
.info-value { color: #fff !important; font-weight: 700 !important; }

/* CTA principale */
.cta-button {
  background: var(--dk-blue) !important;
  color: #fff !important;
  border: none !important;
}
.cta-button:hover {
  background: var(--dk-blue-hov) !important;
  box-shadow: 0 8px 25px rgba(45,91,255,0.4) !important;
}

/* Pulsanti condivisione social — colori brand ufficiali */
.social-btn {
  border: none !important;
  color: white !important;
}
.social-btn.btn-facebook {
  background: #1877F2 !important;
}
.social-btn.btn-facebook:hover {
  background: #1466d4 !important;
  box-shadow: 0 4px 12px rgba(24, 119, 242, 0.4) !important;
}
.social-btn.btn-instagram {
  background: linear-gradient(45deg, #F56040, #E1306C, #833AB4, #405DE6) !important;
}
.social-btn.btn-instagram:hover {
  box-shadow: 0 4px 12px rgba(225, 48, 108, 0.4) !important;
}
.social-btn.btn-x {
  background: #000000 !important;
}
.social-btn.btn-x:hover {
  background: #222222 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Pannello geolocalizzazione */
#geo-result {
  background: var(--dk-surface) !important;
  border-color: var(--dk-border) !important;
}
.geo-stat        { color: var(--dk-blue) !important; }
.geo-stat .label { color: var(--color-text) !important; }
.geo-nav-link.apple { background: #1a1a2e !important; }

/* Bottone "Calcola percorso" */
#btn-geolocate {
  background: var(--dk-blue) !important;
}
#btn-geolocate:hover    { background: var(--dk-blue-hov) !important; }
#btn-geolocate:disabled { background: rgba(45,91,255,0.3) !important; }

/* ── 15. FOOTER ───────────────────────────────────────────── */
.footer {
  background: #000 !important;
  border-top: 1px solid var(--dk-border) !important;
}
/* Intestazioni footer: bianco puro al posto del giallo/senape */
.footer-section h3 { color: #ffffff !important; font-weight: 700 !important; }
.footer-section a  { color: rgba(255,255,255,0.6) !important; }
.footer-section a:hover { color: var(--dk-blue) !important; }
.footer-divider {
  border-top-color: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.35) !important;
}

/* ── 16. PULSANTI ROSSI → BLU ─────────────────────────────── */
/* Label categoria nelle card (hardcoded #FF2122 nel CSS inline) */
.event-category { color: #fff !important; background: var(--dk-blue) !important; }
.event-badge-raw { color: #1a1a2e !important; background: #F9B233 !important; border-color: #d4962a !important; }

/* Pulsante "🔴 Oggi" nella mappa — inline style rosso */
.filtro-mappa-btn { color: var(--color-text) !important; border-color: var(--dk-border) !important; }
.filtro-mappa-btn[data-cats="OGGI"],
.filtro-mappa-btn[data-cats="OGGI"]:hover { color: var(--dk-blue) !important; border-color: var(--dk-blue) !important; }
.filtro-mappa-btn.active { background: var(--dk-blue) !important; color: #fff !important; border-color: var(--dk-blue) !important; }

/* Qualsiasi elemento con colore accento-rosso → blu */
[style*="color:#FF2122"],
[style*="color: #FF2122"],
[style*="color:rgb(255, 33, 34)"] { color: var(--dk-blue) !important; }
[style*="background:#FF2122"],
[style*="background: #FF2122"] { background: var(--dk-blue) !important; }
[style*="border-color:#FF2122"],
[style*="border-color: #FF2122"] { border-color: var(--dk-blue) !important; }

/* Testo card evento in categorie.html (inline #151515 → bianco) */
.event-title    { color: #fff !important; }
.event-info     { border-top-color: rgba(255,255,255,0.08) !important; color: var(--color-text) !important; }
.event-info-item { color: var(--color-text) !important; }

/* Hover pulsanti generici con sfondo blu */
button:not([class*="filtro"]):not([class*="filter"]):hover,
.btn:hover {
  background: var(--dk-blue-hov) !important;
  color: #fff !important;
}

/* ── 17. BADGE & LABEL VARIE ──────────────────────────────── */
/* Mantieni il rosso solo per "Sold Out" */
[class*="sold-out"],
[class*="soldout"] { color: #FF2122 !important; }

/* Badge testo (tipo IN EVIDENZA, MUSICA, ecc.) */
.badge,
.event-tag,
.category-tag {
  background: var(--dk-blue-dim) !important;
  color: var(--dk-blue) !important;
  border: 1px solid var(--dk-border) !important;
}

/* ── 18. ELEMENTI GENERICI TAILWIND OVERRIDE ──────────────── */
.text-gray-900,
.text-gray-800,
.text-gray-700 { color: #fff !important; }
.text-gray-600,
.text-gray-500 { color: var(--color-text) !important; }
.bg-gray-50,
.bg-gray-100,
.bg-white      { background-color: var(--dk-section) !important; }
.border-gray-200,
.border-gray-300 { border-color: var(--dk-border) !important; }
.shadow-md,
.shadow-lg { box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important; }

/* ── 18. INPUT / SELECT TAILWIND GENERICI ─────────────────── */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  background-color: #0a0a16 !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
input::placeholder,
textarea::placeholder { color: #6B7280 !important; }
input:focus,
textarea:focus,
select:focus {
  border-color: var(--dk-blue) !important;
  box-shadow: 0 0 0 3px rgba(45,91,255,0.2) !important;
}

/* ── 19. MESSAGGI DI STATO ────────────────────────────────── */
.loading-state,
.empty-state,
.error-state { color: var(--color-text) !important; }

/* ── 20. MOBILE-FIRST ADJUSTMENTS ─────────────────────────── */
@media (max-width: 768px) {
  .event-card::before,
  .location-card::before { height: 200px; }

  .filters-section {
    padding: 1rem 0.75rem !important;
  }
  .filter-btn {
    font-size: 0.72rem !important;
    padding: 0.75rem 0.9rem !important;
    min-width: 75px !important;
  }
  .filter-btn img {
    width: 30px !important;
    height: 30px !important;
  }

  .section-title { font-size: 1.75rem !important; }

  .contact-form { padding: 1.5rem !important; }

  /* Aumenta contrasto testo su mobile per leggibilità */
  p, li, .location-info-item { color: #b0b8c8 !important; }
}