/* Stili generali */
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: #111;
  color: #fff;
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

header {
  padding: 0.5rem 1rem;
  background: #222;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 55px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 1000;
  gap: 0.75rem; 
}

.header-left {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-left: auto;
}

header h1 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: bold;
  white-space: nowrap;
  font-family: 'Syne', sans-serif;
}

header h1 a {
  text-decoration: none;
  color: inherit;
}

h4 {
  font-family: 'Space Grotesk', sans-serif;
}

#map {
  width: 100%;
  height: calc(100vh - 55px); /* Sottrai l'altezza dell'header */
  margin-top: 55px; /* Aggiungi margine superiore pari all'altezza dell'header */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}




/* Gesti nativi dove servono */
.leaflet-container, #map { touch-action: pan-x pan-y; }
.leaflet-popup-content { touch-action: pan-y; }

/* Evita il rubber-banding solo sui pannelli che scorrono */
.popup-modal, #saved-events-content, #popupLegenda { -webkit-overflow-scrolling: touch; }


/* Controlli zoom mappa */
.leaflet-control-zoom {
  position: fixed !important;
  right: 0.62rem !important;
  top: 72px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem !important;
  z-index: 10004 !important;
}

.leaflet-control-zoom a {
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  font-size: 16px !important;
  background: #f7f7f7 !important;
  border: 1px solid #c17fff !important;
  color: #482568 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  text-align: center !important;
}

.leaflet-control-zoom a:hover {
  background: #2a1f2d !important;
  color: #fff !important;
  border-color: #d191ff !important;
}

/* Versione mobile */
@media (max-width: 600px) {
  .leaflet-control-zoom {
    top: 97px !important;
    right: 0.32rem !important;
  }

  .leaflet-control-zoom a {
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    font-size: 14px !important;
  }
}

#secret-code {
  position: relative;
  min-width: 180px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
}

#codeInput {
  max-width: 150px;
  width: 100%;
}

button, select, input {
  background-color: #1e1e1e;
  color: #fff;
  border: 1px solid #c17fff;
  border-radius: 10px;
  padding: 0.5rem;
  margin-top: 0;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  transition: all 0.3s ease;
}

#toggleCodeBtn {
    width: 100%;
    min-width: 0;
    height: 35px;
    padding: 8px 12px;
    background: none;
    border: 1px solid #c17fff;
    color: #c17fff;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    font-size: 16px;
    white-space: nowrap; /* Previene il testo su due righe */
}

.secret-code-form {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

/* Stili e animazioni per i pulsanti del form segreto */
#secret-code button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

#secret-code button:hover {
  background-color: #2a1f2d;
  border-color: #d191ff;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(193, 127, 255, 0.2);
}

#secret-code button:active {
  background-color: #431a4b;
  border-color: hsl(281, 82%, 49%);
  transform: scale(0.95);
  box-shadow: 0 0 4px rgba(255, 68, 68, 0.4);
}

#secret-code button.active {
  background-color: #431a4b;
  border-color: hsl(281, 82%, 49%);
  box-shadow: 0 0 12px rgba(255, 68, 68, 0.3);
}

/* Custom Popup Styles */
.leaflet-popup-content-wrapper {
  background: rgba(34, 34, 34, 0.9);
  color: #fff;
  border-radius: 12px;
  padding: 12px;
  min-width: 250px;
  max-width: 300px;
}

.leaflet-popup-content {
  margin: 0;
  line-height: 1.5;
  font-size: 0.75rem;
  position: relative; /* Per posizionare il pulsante hype */
}

.leaflet-popup-tip {
  background: rgba(34, 34, 34, 0.9);
  width: 14px;
  height: 14px;
}

.leaflet-popup-content b {
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1em;
  display: block;
  margin-bottom: 8px;
}

.leaflet-popup-content .popup-description {
  color: rgba(255, 255, 255, 0.9);
  margin: 8px 0;
  line-height: 1.4;
}

.leaflet-popup-content small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1em;
  display: block;
  margin-top: 10px;
}

.leaflet-popup-close-button {
  color: rgba(255, 255, 255, 0.7) !important;
  right: 8px !important;
  top: 8px !important;
  font-size: 18px !important;
  padding: 0 !important;
  transition: all 0.8s ease;
}

.leaflet-popup-close-button:hover {
  color: #7f6cec !important;
  background: transparent !important;
  text-shadow: 0 0 8px rgba(255, 102, 102, 0.3);
}

.leaflet-popup-close-button:active {
  color: #f56942 !important;
  transform: scale(0.95);
  text-shadow: 0 0 8px rgba(193, 127, 255, 0.4);
}

/* Nuovo stile per il pulsante hype */
.hype-button {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: all 0.3s ease;
}

.hype-button img {
    width: 20px;
    height: 20px;
    transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.hype-button:hover img {
    transform: scale(1.15);
}

.hype-count {
    color: #ff9966;
    font-size: 0.85rem;
    font-weight: bold;
    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    display: inline-block;
}

/* Stile per hype già dato */
.hype-button.hyped .hype-count {
    color: #cc3300;
}

/* Animazione al click */
.hype-button.animating .hype-count {
    animation: hypeCountAnimation 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.hype-button.animating img {
    animation: hypeIconAnimation 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes hypeIconAnimation {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@keyframes hypeCountAnimation {
    0% {
        transform: scale(1);
        color: #ff9966;
    }
    45% {
        transform: scale(1.5);
        color: #ff9966;
    }
    100% {
        transform: scale(1);
        color: #cc3300;
    }
}

.fade-out {
  opacity: 0 !important;
  visibility: hidden !important;
}

.fade-in {
  opacity: 1 !important;
  visibility: visible !important;
}

#loadBtn {
  padding: 8px 12px;
  background: none;
  border: 1px solid #c17fff;
  color: #c17fff;
  border-radius: 10px;
  cursor: pointer;
}

#loadBtn:hover {
  background-color: #2d1f2a;
  box-shadow: 0 0 8px rgba(193, 127, 255, 0.4);
}

#loadBtn:active {
  background-color: #ff4444;
  border-color: #ff6666;
  box-shadow: 0 0 12px rgba(255, 68, 68, 0.4);
}


#toggleLegenda {
  font-family: 'Space Grotesk', sans-serif;
  background-color: #222;
  color: white;
  padding: 0.6em 1em;
  border: 1px solid #c17fff;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.81rem;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s ease;
  height: 34px;
  line-height: 1;
  display: flex;
  align-items: center;
  right: 0px;
  justify-content: center;
}

#toggleLegenda:hover {
  background-color: #2a1f2d;
  border-color: #d191ff;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(193, 127, 255, 0.2);
}

#toggleLegenda:active {
  transform: translateY(0);
  box-shadow: none;
}



#popupLegenda h4 {
  color: #151515;
  margin-top: 0;
  margin-bottom: 0.8em;
}



#popupLegenda li {
  display: flex;
  align-items: center;
  margin-bottom: 0.4em;
}

#popupLegenda img {
  width: 20px;
  height: 20px;
  margin-right: 0.5em;
}

.note {
  font-size: 0.75rem;
  color: #555;
  line-height: 1.2;
}

.hidden {
  display: none;
}

#popupLegenda a {
  color: #1d1d1d;
  text-decoration: none;
  transition: all 0.2s ease;
}

#popupLegenda a:hover {
  color: #dc95f8;
}

#popupLegenda {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* Stili per le icone nel footer */
#footer-icons {
  position: fixed;
  bottom: 1.45rem;
  left: 1rem;
  z-index: 9999;
  display: flex;
  gap: 0.6rem;
}

#footer-icons a {
  display: inline-flex;
  background: white;
  border-radius: 50%;
  padding: 8px;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  /* Semplifica la transition combinando tutte le proprietà */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(52, 36, 60, 0.09);
  position: relative;
  overflow: hidden;
  will-change: transform; /* Ottimizza le performance delle animazioni */
}

#footer-icons img {
  width: 20px;
  height: 20px;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

#footer-icons img:hover {
  opacity: 1;
  cursor: pointer;
}

/* Calendario container - MIGLIORATO */
.calendar-container {
  position: relative;
  display: inline-block;
  z-index: 10000;
}

/* Bottoni calendario - stile migliorato e coerente con footer */
.calendar-filter-btn {
  position: fixed;
  bottom: 1.45rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #222;
  color: white;
  border: 1px solid #c17fff;
  border-radius: 10px;
  padding: 0.6em 1em;
  font-size: 0.9rem;
  font-family: 'Space Grotesk', sans-serif;
  cursor: pointer;
  z-index: 9999;
  transition: all 0.3s ease;
  height: 34px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-filter-btn:hover {
  background-color: #2a1f2d;
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Quando è attivo */
.calendar-filter-btn.active {
  background-color: #2d1f2a;
  box-shadow: 0 0 8px rgba(193, 127, 255, 0.4);
}

/* Stili Litepicker compatti - MIGLIORATI */
.litepicker {
  font-family: 'Inter', sans-serif !important;
  background-color: #222 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  color: #fff !important;
  padding: 8px !important;
  min-width: 280px !important;
  max-width: 320px !important;
  position: fixed !important;
  top: 50% !important; /* Posizione centrata verticalmente */
  left: 50% !important;
  transform: translate(-50%, -50%) !important; /* Centra perfettamente */
  z-index: 10001 !important; /* Assicura che sia sopra tutti gli altri elementi */
  display: none; /* Nascosto di default, verrà mostrato via JS */
}

.litepicker.showing {
  display: block !important;
}

.litepicker .container__months {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  background-color: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

.litepicker .container__main {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Riduci l'altezza complessiva del calendario */
.litepicker .container__days {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 2px !important;
  width: 100% !important;
  padding: 5px !important;
  margin: 0 !important;
}

.litepicker .month-item-header {
  padding: 4px 0 !important;
  margin: 0 !important;
  font-size: 0.9rem !important;
}

.litepicker .month-item-weekdays-row {
  padding: 3px 0 !important;
  font-size: 0.8rem !important;
}

.litepicker .day-item {
  padding: 4px 0 !important;
  font-size: 0.85rem !important;
  height: 28px !important;
  width: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 1 !important;
  min-width: 32px !important;
}

/* Fix spaziatura contenitore mese */
.litepicker .container__months .month-item {
  width: 100% !important;
  padding: 5px !important;
}

/* Mantieni l'allineamento della griglia */
.litepicker .container__days > div {
  width: 100% !important;
  text-align: center !important;
}
  
.litepicker .button-reset-container {
  margin-top: 5px !important;
  padding: 0 !important;
}

.litepicker .container__resetbtn {
  color: #7fbfff !important;
  font-size: 0.85rem !important;
  padding: 4px 8px !important;
  cursor: pointer !important;
}

.litepicker .container__months .month-item-name,
.litepicker .container__months .month-item-year {
  color: #fff !important;
  font-size: 0.9rem !important;
}

/* Mantieni gli stili esistenti per hover, selezione, ecc. */
.litepicker .container__days .day-item {
  width: 100% !important;
  height: 32px !important;
  line-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 0.9em !important;
  border-radius: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hover sui giorni */
.litepicker .container__days .day-item:not(.is-locked):not(.is-booked):hover {
  background-color: #2a1f2d !important;
  color: #fff !important;
  border-radius: 3px !important;
}
/* Giorni disabilitati */
.litepicker .container__days .day-item.is-locked,
.litepicker .container__days .day-item.is-booked {
  color: rgba(255, 255, 255, 0.3) !important;
  cursor: default !important;
  background: transparent !important;
}

/* Giorni nell'intervallo selezionato */
.litepicker .container__days .day-item.is-in-range {
  background-color: rgba(193, 127, 255, 0.2) !important;
  border-radius: 0 !important;
}

/* Primo e ultimo giorno dell'intervallo */
.litepicker .container__days .day-item.is-start-date,
.litepicker .container__days .day-item.is-end-date {
  background-color: #c17fff !important;
  color: #fff !important;
  border-radius: 3px !important;
}

.litepicker .container__days .day-item:hover {
  background-color: #444 !important;
  color: #fff !important;
}

.litepicker .container__days .day-item.is-today {
  color: #c17fff !important;
  font-weight: bold !important;
}

.litepicker .container__days .day-item.is-selected {
  background-color: #c17fff !important;
  color: #fff !important;
  font-weight: bold !important;
}


.litepicker .container__days .day-item.is-start-date,
.litepicker .container__days .day-item.is-end-date {
  background-color: #c17fff !important;
  color: #fff !important;
}

.litepicker .container__months .month-item-header {
  color: #fff !important;
}

.litepicker .container__months .button-next-month,
.litepicker .container__months .button-previous-month {
  color: #c17fff !important;
}

.litepicker .container__months .button-next-month:hover,
.litepicker .container__months .button-previous-month:hover {
  color: #d191ff !important;
}

/* Stili responsive per schermi più piccoli */
@media screen and (max-width: 600px) {
  .litepicker {
    max-width: 280px !important;
  }
  
  .litepicker .day-item {
    height: 24px !important;
    width: 24px !important;
    font-size: 0.8rem !important;
  }
}

/* SOSTITUISCI la media query mobile esistente @media screen and (max-width: 600px) */
@media screen and (max-width: 600px) {
  header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    padding: 0.4rem 0.7rem 0.3rem;
    gap: 0.3rem;
    align-items: center;
    min-height: auto;
  }

  .header-left {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    margin-bottom: 0;
  }

  .profile-icons {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    gap: 6px;
    margin: 0;
    position: static; /* RIMUOVE absolute positioning */
  }

  .profile-icon {
    width: 28px;
    height: 28px;
  }

  .profile-icon img {
    width: 23px;
    height: 23px
  }

  .header-right {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
  }

  #city-select-container,
  #search-container,
  #secret-code {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    width: 100%;
    margin: 0;
    height: 32px;
    display: flex;
    align-items: center;
  }

  #city-select,
  #searchInput, 
  #codeInput {
    width: 100%;
    min-width: 0;
    font-size: 14px !important;
    height: 32px;
    padding: 0.3rem;
    border-radius: 6px;
  }

@media screen and (max-width: 600px) {
    #toggleCodeBtn {
        font-size: 13.8px !important;        /* Riduci dimensione font */
        padding: 0.3rem 0.5rem !important;
        height: 35px;           /* Riduci altezza */
        letter-spacing: -0.2px; /* Riduci leggermente lo spazio tra le lettere */
    }

    #secret-code {
        min-width: 105px;      /* Larghezza minima contenuta */
        height: 32px;          /* Mantieni coerente con il pulsante */
    }
}

/* Breakpoint ancora più stretto per schermi molto piccoli */
@media screen and (max-width: 360px) {
    #toggleCodeBtn {
        font-size: 9px;       /* Riduci ulteriormente il font */
        padding: 4px 6px;      /* Riduci ancora il padding */
    }
}
}

@media screen and (min-width: 601px) and (max-width: 768px) {
  header {
    padding: 0.5rem;
  }
  
  .header-right {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

 .time-filters {
    position: fixed;
    top: 71px;
    right: 0.62rem;
    left: auto;
    bottom: auto;
    width: auto;
    background: none;
    max-width: 80vw;
    z-index: 10005;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    border-radius: 18px;
    opacity: 1 !important;
    transition: box-shadow 0.24s;
    text-align: right;
}

.calendar-container:hover + .time-filters,
.time-filters:hover {
  opacity: 1;
}

.time-filter-btn {
   min-width: 70px;
    padding: 0.35em 0.6em;
    font-size: 0.60rem;
    border-radius: 8px;
    background: #f7f7f7;
    border: 1px solid #c17fff;
    color: #c17fff;
    margin: 0;
    box-shadow: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }

 .time-filter-btn:hover {
    background: #2a1f2d;
    color: #fff;
    border-color: #d191ff;
  }

  .time-filter-btn.active {
    background: #c17fff;
    color: #1e1e1e;
    border-color: #f7c7e3;
  }

/* In style.css */
@keyframes shake {
  0% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(6px); }
  75% { transform: translateX(-6px); }
  100% { transform: translateX(0); }
}

#codeInput.shake {
  animation: shake 0.4s;
  border-color: #ff4444 !important;
}

#footer-icons a {
  display: inline-flex;
  background: rgb(28, 28, 28);
  border-radius: 50%;
  border: 1px solid #c17fff;
  padding: 9px;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  transition: 
    transform 0.3s cubic-bezier(.4,.25,.6,1.4),
    box-shadow 0.24s cubic-bezier(.4,.25,.6,1.4),
    background 0.3s cubic-bezier(.4,.25,.6,1.4),
    filter 0.16s;
  box-shadow: 0 2px 4px 0 rgba(52,36,60,0.09);
  position: relative; /* serve per l'effetto ripple */
  overflow: hidden;
  left: 2.5px;
}

#footer-icons a:hover {
  transform: scale(1.15);
  box-shadow: 0 6px 18px rgba(117, 82, 255, 0.25);
  background: #281a36;
}

#footer-icons a:active {
  transform: scale(0.95);
  box-shadow: 0 2px 12px rgba(193, 127, 255, 0.22);
}

/* Effetto icona: glow al passaggio */
#footer-icons img {
  width: 20px;
  height: 20px;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

#footer-icons a:hover img {
  opacity: 1;
}

#footer-icons a:active img {
  filter: drop-shadow(0 0 12px #ff9444cc);
}

#footer-icons a::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(209, 187, 255, 0.2) 0%, transparent 70%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease, opacity 0.2s ease;
}

#footer-icons a:active::after {
  transform: translate(-50%, -50%) scale(2);
  opacity: 1;
}

@media (max-width: 600px) {
  #kofi-container {
    bottom: 80px;
    left: 20px;
    transform: scale(0.9);
    animation: kofipulse 2.8s cubic-bezier(.6,.03,.55,1.1) infinite;
  }
  #kofi-container img {
    height: 32px;
    box-shadow: 0 0 0 0 rgba(193,127,255, 0.24);
    animation: kofi-glow 2.8s cubic-bezier(.6,.03,.55,1.1) infinite;
  }
}

@keyframes kofipulse {
  0% { transform: scale(0.90); }
  15% { transform: scale(0.98); }
  45% { transform: scale(0.92);}
  65% { transform: scale(0.98);}
  100% { transform: scale(0.90);}
}

@keyframes kofi-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(193,127,255, 0.22),
                0 0 0 0 rgba(247,199,227, 0.13);
  }
  25% {
    box-shadow: 0 0 12px 0 rgba(193,127,255, 0.28),
                0 0 20px 2px rgba(247,199,227, 0.17);
  }
  50% {
    box-shadow: 0 0 18px 2px rgba(193,127,255, 0.34),
                0 0 26px 4px rgba(247,199,227, 0.22);
  }
  75% {
    box-shadow: 0 0 12px 0 rgba(193,127,255, 0.24),
                0 0 18px 1px rgba(247,199,227, 0.15);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(193,127,255, 0.22),
                0 0 0 0 rgba(247,199,227, 0.12);
  }
}

@media (max-width: 600px) {
  .time-filters {
    position: fixed;
    top: 97px;
    right: 0.32rem;
    left: auto;
    bottom: auto;
    width: auto;
    max-width: 80vw;
    z-index: 10005;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    border-radius: 18px;
    padding: 0.5rem 0.4rem;
    opacity: 1 !important;
    transition: box-shadow 0.24s;
    text-align: right;
  }
  
  .time-filter-btn {
    min-width: 48px;
    padding: 0.35em 0.6em;
    font-size: 0.50rem;
    border-radius: 8px;
    background: #f7f7f7;
    border: 1px solid #c17fff;
    color: #482568;
    margin: 0;
    box-shadow: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }
  
  .time-filter-btn.active {
    background: #c17fff;
    color: #1e1e1e;
    border-color: #f7c7e3;
  }
  
  .time-filter-btn:hover {
    background: #2a1f2d;
    color: #fff;
    border-color: #d191ff;
  }

  /* Allineamento controlli zoom con time filters */
  .leaflet-control-zoom {
    top: 97px !important;
    left: 11px !important;
  }
}

/* Desktop - allineamento migliorato zoom e time filters */
@media (min-width: 601px) {
  .time-filters {
    position: fixed;
    top: 71px;
    right: 0.62rem;
    left: auto;
    bottom: auto;
    width: auto;
    background: none;
    max-width: 80vw;
    z-index: 10005;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    border-radius: 18px;
    opacity: 1 !important;
    transition: box-shadow 0.24s;
    text-align: right;
  }

  .leaflet-control-zoom {
    top: 71px !important;
    left: 0.62rem !important;
  }
}

/* Controlli zoom mappa - stili unificati */
.leaflet-control-container .leaflet-top.leaflet-left {
  position: fixed !important;
  z-index: 10004 !important;
}

.leaflet-control-zoom {
  border: none !important;
  margin: 0.5rem 0 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem !important;
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  background-color: #f7f7f7 !important;
  color: #482568 !important;
  border: 1px solid #c17fff !important;
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  font-size: 16px !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  border-radius: 8px !important;
  margin: 0 !important;
}

.leaflet-control-zoom a:hover {
  background: #2a1f2d !important;
  color: #fff !important;
  border-color: #d191ff !important;
}

/* Desktop version - dimensioni leggermente maggiori */
@media (min-width: 601px) {
  .leaflet-control-zoom-in,
  .leaflet-control-zoom-out {
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
  }
}

/* Search container and input */
#search-container {
  position: relative;
  min-width: 160px;
  height: 38px;
  display: flex;
  align-items: center;
}

#searchInput {
  max-width: 140px;
  width: 100%;
  background-color: #1e1e1e;
  color: #fff;
  border: 1px solid #c17fff;
  border-radius: 10px;
  padding: 0.5rem;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  transition: all 0.3s ease;
}

#searchInput:focus {
  outline: none;
  border-color: #d191ff;
  box-shadow: 0 0 8px rgba(193, 127, 255, 0.3);
}

#searchInput::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Responsive adjustments for search input */
@media screen and (max-width: 600px) {
  #search-container {
    width: 120px;
  }

  #searchInput {
    max-width: 150px;
    padding: 0.4rem;
    font-size: 14px !important;
    height: 21.34px;
  }
}

/* Adjust header-right layout to accommodate search */
.header-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem; /* Reduced gap to fit search input */
  justify-content: flex-end;
  margin-left: auto;
}

/* Popup styling */
.popup-modal {
  position: fixed;
  inset: 0;
  background: rgba(24,24,24,0.92);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 12000;
  animation: fadeIn 0.18s;
}

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

.popup-content {
  background: #212121;
  color: #d8d8d8;
  border-radius: 1.3em;
  box-shadow: 0 6px 36px 0 rgba(0,0,0,0.22);
  max-width: 98vw;
  max-height: 75vh;
  width: 420px;
  padding: 2em 2em 1.5em 2em;
  position: relative;
  font-family: 'Syne', 'Inter', 'Space Grotesk', sans-serif;
  overflow-y: auto;
  animation: fadeInUp 0.25s;
}

#close-popup {
  position: absolute;
  right: 1.1em;
  top: 1.1em;
  background: transparent;
  color: #c0ade87e;
  border: none;
  font-size: 2em;
  cursor: pointer;
  transition: color 0.2s;
  z-index: 2;
}

#close-popup:hover {
  color: #281a36;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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


@media (max-width: 600px) {
  #map {
    height: calc(100vh - 90px);  /* Aggiornato da 10px a 16px */
    margin-top: 90px;  /* Aggiornato da 70px a 90px */
  }
}

body {
  padding-bottom: 20px;  /* Aggiornato da 13px a 20px */
}

@media (max-width: 600px) {
  body {
    padding-bottom: 16px;  /* Aggiornato da 10px a 16px */
  }
}

/* General container */
#popup-content {
  background-color: #111;
  color: #f3f3f3;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 2rem;
  border-radius: 0.5rem;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

/* Headings */
#popup-content h1,
#popup-content h2,
#popup-content h3 {
  font-family: 'Syne', sans-serif;
  color: #ffffff;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

a {
  color: #c17fff;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul, ol {
  padding-left: 1.5rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

th, td {
  border: 1px solid #666;
  padding: 0.5rem;
  text-align: left;
}

th {
  background-color: #222;
}

button {
  background-color: #c17fff;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  font-family: 'Inter', sans-serif;
}

button:hover {
  background-color: #281a36;
}

/* Stili per l'icona hype salvata */
#saved-hype-icon {
  position: fixed;
  bottom: 75px;
  right: 20px;
  z-index: 9998;
  background: rgba(37, 37, 37, 0.4); /* Ridotta opacità */
  border-radius: 50%;
  border: 1px solid #202020; /* Ridotto spessore */
  padding: 8px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Transizione semplificata */
  transition: transform 0.2s ease;
  box-shadow: 0 2px 4px rgba(255, 153, 102, 0.2);
  cursor: pointer;
}

/* Modifica la classe visible per gestire la visibilità */
#saved-hype-icon.hidden {
  display: none;
}

#saved-hype-icon.visible {
  display: flex;
}

#saved-hype-icon:hover {
  transform: scale(1.1); /* Ridotto da 1.15 */
  /* Rimosso box-shadow animato e border-color */
}

#saved-hype-icon:active {
  transform: scale(0.95); /* Aumentato da 0.60 */
  /* Rimosso box-shadow */
}

#saved-hype-icon img {
  width: 30px;
  height: 30px;
  opacity: 0.9;
  /* Rimossa transizione e filter */
}

#saved-hype-icon:hover img {
  opacity: 1;
  filter: drop-shadow(0 2px 4px rgba(193, 127, 255, 0.3));
}

/* Badge con conteggio eventi salvati */
#saved-hype-icon::after {
  content: attr(data-count);
  position: absolute;
  top: -5px;
  right: -5px;
  background: #c17fff;
  color: white;
  border-radius: 50%;
  border: rgb(35, 35, 35) 1px solid; /* Cambiato colore bordo */
  width: 20px;
  height: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Rimosso box-shadow e border */
}

#saved-hype-icon[data-count="0"]::after {
  display: none;
}


/* Modal lista eventi salvati */
#saved-events-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 12000;
  padding: 1rem;
}

#saved-events-modal.hidden {
  display: none;
}

#saved-events-content {
  background: #1a1a1a; /* Colore solido invece di var() */
  border: 1px solid #333; /* Colore solido */
  border-radius: 12px;
  color: #fff; /* Colore solido */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); /* Ridotto da 32px */
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  padding: 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  /* Rimossa animazione slideInUp */
}

/* Lista eventi scrollabile */
#saved-events-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 0.5rem;
  margin-right: -0.5rem;
  max-height: 60vh;
  scrollbar-width: thin;
  scrollbar-color: rgba(193, 127, 255, 0.3) rgba(255, 255, 255, 0.05);
}

#saved-events-list::-webkit-scrollbar {
  width: 6px;
}

#saved-events-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

#saved-events-list::-webkit-scrollbar-thumb {
  background: rgba(193, 127, 255, 0.3);
  border-radius: 3px;
  transition: background 0.2s ease;
}

#saved-events-list::-webkit-scrollbar-thumb:hover {
  background: rgba(193, 127, 255, 0.5);
}



#saved-events-content h3 {
  margin: 0 0 1.5rem 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text, #fff);
  text-align: center;
}

.saved-event-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  border-left: 3px solid var(--accent, #c17fff);
  position: relative;
  transition: all 0.2s ease;
}

.saved-event-item:hover {
  border-color: var(--accent, #c17fff);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}


/* Fix per iOS */

@supports (-webkit-touch-callout: none) {
    #saved-events-list {
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }
}

/* Responsive per mobile */
@media (max-width: 600px) {
    #saved-events-modal {
        padding: 1rem;
    }
    
    #saved-events-content {
        width: calc(100% - 2rem);
        max-height: 80vh;
        padding: 1rem;
    }
    
    #saved-events-list {
        max-height: none;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }
    
    .saved-event-item {
        padding: 1rem;
        margin-bottom: 0.5rem;
        touch-action: pan-y;
    }
}

/* Stili scrollbar personalizzati */
#saved-events-list::-webkit-scrollbar {
    width: 6px;
}

#saved-events-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

#saved-events-list::-webkit-scrollbar-thumb {
    background: rgba(193, 127, 255, 0.3);
    border-radius: 3px;
}

#saved-events-list::-webkit-scrollbar-thumb:hover {
    background: rgba(193, 127, 255, 0.5);
}


.saved-event-title {
  font-weight: bold;
  margin-bottom: 4px;
  color: #fff;
}

.saved-event-details {
  font-size: 0.85rem;
  color: #ccc;
  margin-bottom: 8px;
}

.saved-event-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-start;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.goto-btn, .remove-btn, .share-btn {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: max-content;
}

.goto-btn {
  color: var(--accent, #c17fff);
  border-color: var(--accent, #c17fff);
}

.goto-btn:hover {
  background: var(--accent, #c17fff);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(193, 127, 255, 0.3);
}

.share-btn {
  color: var(--green, #22c55e);
  border-color: var(--green, #22c55e);
}

.share-btn:hover {
  background: var(--green, #22c55e);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.remove-btn {
  color: var(--red, #ff4444);
  border-color: var(--red, #ff4444);
  margin-left: auto;
}

.remove-btn:hover {
  background: var(--red, #ff4444);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(163, 67, 247, 0.295);
}

#close-saved-events {
  position: absolute;
  right: 1.1em;
  top: 0rem;
  background: transparent;
  color: #fff;
  border: none;
  font-size: 2em;
  cursor: pointer;
  transition: color 0.2s;
  z-index: 2;
}

#close-saved-events:hover {
  color: #6522a3a6;
}

/* Responsive per mobile */
@media (max-width: 600px) {
  #saved-hype-icon {
    bottom: 75px;
    right: 18px;
    width: 32px;
    height: 32px;
    padding: 6px;
  }
  
  #saved-hype-icon img {
    width: 30px;
    height: 30px;
  }
  
  #saved-hype-icon::after {
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
  }
}


/* Hover mobile per condivisione coordinate */
@media (max-width: 600px) {
  .share-btn {
    position: relative;
    overflow: hidden;
  }
  
  /* Effetto touch feedback per mobile */
  .share-btn:active {
    background: #5f3686 !important;
    transform: scale(0.95);
    box-shadow: 0 2px 6px rgba(193, 127, 255, 0.2);
  }
  
  /* Feedback visivo aggiuntivo per mobile */
  .share-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(193, 127, 255, 0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all 0.3s ease;
  }
  
  .share-btn:active::after {
    transform: translate(-50%, -50%) scale(2);
    opacity: 1;
  }
}

/* Feedback visivo per la copia delle coordinate */
.share-btn.copying {
  animation: copyPulse 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: #7f3cbe !important;
  color: #ffffff !important;
  border-color: #d191ff !important;
}

/* Effetto pulse per il feedback di copia */
@keyframes copyPulse {
  0% {
    transform: scale(1);
    background: #7f3cbe;
  }
  50% {
    transform: scale(0.95);
    background: #5f3686;
  }
  100% {
    transform: scale(1);
    background: #7f3cbe;
  }
}

/* Allineamento altezza pulsanti footer mobile */
@media (max-width: 600px) {
  .calendar-filter-btn {
    height: 34px !important;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 0.8em;
    font-size: 0.8rem;
  }

  #toggleLegenda {
    height: 34px !important;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 0.8em;
    font-size: 12px;
  }
}



/* Enable scrolling for popup content */
.leaflet-popup-content {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* Mobile media query */
@media (max-width: 768px) {
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }

  .calendar-filter-btn {
    position: fixed;
    font-size: 0.8rem;
    padding: 0.5em 0.8em;
    z-index: 1001;
  }

  #footer-icons {
    position: fixed;
  }

  #legenda-footer {
    position: fixed;
    z-index: 10006;
  }

  #popupLegenda {
      position: absolute;
  bottom: calc(100% + 15px); /* Sposta sopra il pulsante della legenda */
  right: 0;
    transform: translate(-50%, -50%); /* Centra perfettamente */
    width: 240px; /* Larghezza responsive */
    max-width: 240px;
    max-height: 70vh; /* Altezza massima più contenuta su mobile */
    margin: 0;
    z-index: 10010; /* Assicura che sia sopra altri elementi */
  }

  #saved-hype-icon {
    position: fixed;
    z-index: 1001;
  }

  #kofi-container {
    position: fixed;
    z-index: 1001;
  }
}

@media (max-width: 600px) {
    #legenda-footer {
        bottom: 1.45rem !important; /* Mantiene lo stesso allineamento */
        right: 1rem;
        font-size: 14px !important; /* Mantiene la stessa dimensione del testo */
    }

    #toggleLegenda {
        height: 34px !important; /* Mantiene l'altezza consistente */
        font-size: 12px; /* Mantiene la stessa dimensione del testo */
        padding: 0.5em 0.8em;
    }

    #popupLegenda {
        position: absolute;
        bottom: calc(100% + 15px); /* Mantiene la stessa distanza dal pulsante */
        right: 0;
        width: 240px; /* Mantiene la stessa larghezza del desktop */
        transform: none !important; /* Rimuove trasformazioni non necessarie */
        left: auto !important;
        top: auto !important;
    }
}


/* Reset e riposizionamento controlli zoom */
.leaflet-right {
  right: auto !important;
}

.leaflet-left {
  left: auto !important;
}

/* Assicurati che i controlli zoom siano sempre visibili */
.leaflet-control-container {
  position: static !important;
}

.legend-filter {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.legend-filter:hover {
    color: #c17fff;
}

.legend-filter.active {
    color: #c17fff;
}

 /* Footer principale */
        #site-footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100vw;
            background: #181818;
            color: #fff;
            text-align: center;
            font-family: 'Syne', 'Space Grotesk', 'Inter', sans-serif;
            font-size: 0.72rem;
            z-index: 11000;
            box-shadow: 0 -2px 12px 0 rgba(0,0,0,0.10);
            padding: 0 0;
            letter-spacing: 0.01em;
            min-height: 18px;
            line-height: 18px;
            height: 18px;
            user-select: none;
            overflow: hidden;
        }

        @media (max-width: 600px) {
            #site-footer {
                font-size: 0.59rem;
                min-height: 18px;
                height: 18px;
                line-height: 18px;
                padding: 0 0.3em;
            }
        }

        /* Container per il contenuto del footer */
        .footer-container {
            position: relative;
            width: 100%;
            height: 100%;
        }

        /* Navigazione centrale (sempre visibile) */
        #site-footer nav {
            position: relative;
            display: flex;
            justify-content: center;
            gap: 0.18rem;
            align-items: center;
            height: 100%;
            background: #181818;
            padding: 0 15px;
            z-index: 12000;
            margin: 0 auto;
            width: fit-content;
        }

        @media (max-width: 600px) {
            #site-footer nav {
                padding: 0 8px;
                gap: 0.15rem;
            }
        }

        .footer-link {
            color: #fff;
            text-decoration: none;
            transition: color 0.2s;
            font-weight: 600;
            font-size: 0.97em;
            padding: 0 0.2em;
            position: relative;
            z-index: 12001;
        }

        @media (max-width: 600px) {
            .footer-link {
                font-size: 0.95em;
                padding: 0 0.15em;
            }
        }

        .footer-link:hover {
            color: #ccc;
        }

        .footer-divider {
            color: #6f2ce4ad;
        }

        /* Container per il testo scorrevole */
        .scrolling-text-container {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }

        /* Testo scorrevole */
        .scrolling-text {
            position: absolute;
            top: 0;
            height: 100%;
            display: flex;
            align-items: center;
            white-space: nowrap;
            font-size: 0.65rem;
            font-weight: 500;
            color: #d4d4d4;
            letter-spacing: 0.02em;
            animation: scrollText 40s linear infinite;
        }

        @media (max-width: 600px) {
            .scrolling-text {
                font-size: 0.50rem;
                animation: scrollText 40s linear infinite;
            }
        }

        /* Animazione di scorrimento */
        @keyframes scrollText {
            0% {
                transform: translateX(100vw);
            }
            100% {
                transform: translateX(-100%);
            }
        }

        /* Stili per il demo */
        .demo-content {
            padding: 50px 20px;
            max-width: 800px;
            margin: 0 auto;
        }

        h1 {
            color: #fff;
            text-align: center;
        }

        p {
            line-height: 1.6;
            margin-bottom: 20px;
        }

           /* Container per le particelle magiche */
        .magic-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 10010;
        }

        .sparkle {
    position: absolute;
    width: 4px;          /* Aumentato da 4px */
    height: 4px;         /* Aumentato da 4px */
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 12px rgba(193, 127, 255, 0.8); /* Glow effect più intenso */
}
.sparkle.large {
    width: 6px;          /* Aumentato da 6px */
    height: 6px;         /* Aumentato da 6px */
    box-shadow: 0 0 16px rgba(193, 127, 255, 1); /* Glow più intenso */
}

   .dust-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}


       /* Stili per la legenda footer */
        #legenda-footer {
            position: fixed;
            bottom: 1.45rem !important;
            right: 1rem;
            z-index: 10006  ;
            font-family: 'Space Grotesk', sans-serif;
        }

        @media (max-width: 480px) {
         #legenda-footer {
        bottom: 1.45rem !important; /* Mantiene lo stesso allineamento */
        right: 1rem;
    }
            #toggleLegenda {
        height: 34px !important; /* Mantiene l'altezza consistente */
        font-size: 12px;
        padding: 0.5em 0.8em;
    }


    @media (max-width: 480px) {
  #savedEventsModal {
    width: calc(100vw - 2rem) !important;
    max-height: 72vh !important;
  }
  #savedEventsContent {
    max-height: 62vh !important;
  }
}

    #popupLegenda {
        position: absolute;
        bottom: calc(100% + 15px); /* Mantiene la stessa distanza dal pulsante */
        right: 0;
        width: 240px; /* Mantiene la stessa larghezza del desktop */
        transform: none !important; /* Rimuove trasformazioni non necessarie */
        left: auto !important;
        top: auto !important;
    }
}
        #toggleLegenda {
            background-color: #222;
            color: white;
            padding: 0.6em 1em;
            border: 1px solid #c17fff;
            border-radius: 10px;
            cursor: pointer;
            font-size: 0.81rem;
            font-family: 'Inter', sans-serif;
            transition: all 0.2s ease;
            height: 34px !important;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            white-space: nowrap;
        }

        @media (max-width: 480px) {
            #toggleLegenda {
                font-size: 12px;
                padding: 0.5em 0.8em;
                height: 32px;
            }
        }

        #toggleLegenda:hover {
            background-color: #2a1f2d;
            border-color: #d191ff;
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(193, 127, 255, 0.2);
        }

        #toggleLegenda:active {
            transform: translateY(0);
            box-shadow: none;
        }

        #popupLegenda {
            position: absolute;
            bottom: 3rem;
            right: 0;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(204, 204, 204, 0.3);
            border-radius: 12px;
            padding: 0.9em;
      width: 240px !important; /* Larghezza fissa per tutti i dispositivi */
    max-width: 240px !important;
            max-height: calc(100vh - 6rem);
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            font-size: 0.85rem;
            color: #222;
            opacity: 0;
            transform: translateY(10px) scale(0.95);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow-y: auto;
            overflow-x: hidden;
        }

        /* Responsive breakpoints */
        @media (max-width: 480px) {
            #popupLegenda {
                width: calc(100vw - 2.5rem);
                right: -1rem;
                left: 1rem;
                bottom: 2.5rem;
                font-size: 0.8rem;
                padding: 0.8em;
            }
        }

        @media (max-width: 320px) {
            #popupLegenda {
                width: calc(100vw - 2rem);
                right: -0.5rem;
                left: 0.5rem;
                font-size: 0.75rem;
                padding: 0.7em;
            }
        }

 @media (max-width: 600px) {
    #popupLegenda {
        position: absolute;
        bottom: calc(100% + 15px);
        right: 0;
        width: 240px !important; /* Forza stessa larghezza del desktop */
        max-width: 240px !important;
        transform: none !important;
        left: auto !important;
        padding: 1em;
        font-size: 0.85rem;
    }

    #legenda-footer {
        bottom: 1.45rem !important;
        right: 1rem;;
    }

    /* Contenuto interno della legenda */
    #popupLegenda ul {
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

      #popupLegenda.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

#popupLegenda.hidden {
    display: none;
}

        #popupLegenda h4 {
            color: #151515;
            margin-top: 0;
            margin-bottom: 0.8em;
            font-weight: 600;
        }

       #popupLegenda ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0.3em 0;
    color: #333333;
    overflow: visible; /* Rimuovi scroll della lista */
    max-height: none; /* Rimuovi altezza massima della lista */
}


        #popupLegenda li {
            display: flex;
            align-items: center;
            min-height: 26px;
            margin-bottom: 0.2em;
            margin-right: 0.5em;
            padding: 0.08em 0;
            transition: all 0.2s ease;
            border-radius: 6px;
        }

        #popupLegenda li:hover {
            transform: translateX(5px);
            background-color: rgba(193, 127, 255, 0.05);
            padding-left: 0.3em;
        }

        #popupLegenda img {
            width: 28px;
            height: 28px;
            margin-right: 0.7em;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        @media (max-width: 480px) {
            #popupLegenda img {
                width: 24px;
                height: 24px;
                margin-right: 0.5em;
            }
        }

        @media (max-width: 320px) {
            #popupLegenda img {
                width: 22px;
                height: 22px;
                margin-right: 0.4em;
            }
        }

        #popupLegenda li:hover img {
            transform: scale(1.1);
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
        }

        .note {
            font-size: 0.75rem;
            color: #555;
            line-height: 1.2;
        }

        .hidden {
            display: none !important;
        }

        #popupLegenda a {
            color: #1d1d1d;
            text-decoration: none;
            transition: all 0.2s ease;
        }

        #popupLegenda a:hover {
            color: #dc95f8;
        }

        /* Overlay per i dust particles dentro il popup */
        .dust-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            border-radius: 12px;
            overflow: hidden;
        }

        /* Demo background */
        .demo-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            text-align: center;
            font-size: 1.2em;
            opacity: 0.7;
        }


/* Stili per il modal degli Eventi Salvati */
#savedEventsModal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(204, 204, 204, 0.3);
    border-radius: 12px;
    padding: 1em;
    width: 300px; /* Larghezza fissa, ma responsive */
    max-width: calc(100vw - 2rem);
    max-height: 80vh; /* Limite massimo per il modal intero */
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 10010; /* Sopra altri elementi */
    display: none; /* Nascosto di default, usa .hidden per togglare */
    font-family: 'Inter', sans-serif;
    color: #222;
    -webkit-overflow-scrolling: auto !important;
    overflow: hidden !important; /* Previene scroll del modal intero, scroll solo nel content */
}

#savedEventsModal:not(.hidden) {
    display: block; /* Mostra quando non hidden */
}

#savedEventsContent {
  max-height: min(70vh, 560px) !important;
  overflow-y: auto !important;
  padding-right: 0.5em;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
}
#savedEventsContent h3 {
    margin: 0 0 0.5em;
    font-size: 1.1rem;
    color: #151515;
    font-weight: 600;
}

#savedEventsList {
    list-style: none;
    padding: 0;
    margin: 0;
}

#savedEventsList li {
    padding: 0.5em 0;
    border-bottom: 2px solid transparent; /* Base trasparente, colore applicato via JS */
    font-size: 0.85rem;
    color: #333;
    position: relative;
}

/* Rimuovi i selettori nth-child e lascia il controllo a JS */
#savedEventsList li:last-child {
    border-bottom: 2px solid transparent; /* Evita conflitti, colore applicato via JS */
}

#closeSavedEventsBtn {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #555;
    cursor: pointer;
    transition: color 0.2s ease;
}

#closeSavedEventsBtn:hover {
    color: #dc95f8;
}

/* Media query per mobile - Ottimizzata per scroll responsive */
@media (max-width: 640px) {
    #saved-events-modal {
        padding: 1rem;
    }
    
    #saved-events-content {
        max-height: none;
        padding: 1rem;
        width: calc(100% - 2rem);
    }
    
    #saved-events-list {
        max-height: 70vh;
        -webkit-overflow-scrolling: touch;
    }
}

/* Supporto per schermi molto piccoli (es. iPhone SE, <360px) */
@media (max-width: 360px) {
    #savedEventsModal {
        width: calc(100vw - 1.5rem);
        max-height: 55vh; /* Ancora più compatto */
        padding: 1em;
    }

    #savedEventsContent {
        max-height: 45vh;
        padding-right: 0.6em;
    }

    #savedEventsList li {
        font-size: 0.75rem; /* Testo più piccolo per schermi compatti */
        padding: 0.5em 0;
    }
}

/* Media query per schermi bassi (es. landscape mode o finestre piccole) */
@media (max-height: 600px) {
    #savedEventsModal {
        max-height: 90vh; /* Usa più spazio su schermi bassi */
        top: 10px; /* Sposta verso l'alto per centrare meglio */
        transform: translate(-50%, 0);
    }

    #savedEventsContent {
        max-height: calc(90vh - 4em); /* Adatta al modal */
    }
}

@media (max-height: 400px) {
    #savedEventsModal {
        max-height: 95vh;
        top: 5px;
        transform: translate(-50%, 0);
    }

    #savedEventsContent {
        max-height: calc(95vh - 3em);
    }
}

/* Aggiungi le classi per i colori dei bordi */
.saved-event-item.border-color-0 { border-left-color: #c471f5; } /* Viola-rosa neon principale */
.saved-event-item.border-color-2 { border-left-color: #ff004c; } /* Rosso ciliegia acceso */
.saved-event-item.border-color-3 { border-left-color: #ff9100; } /* Arancione cyber vibrante */
.saved-event-item.border-color-4 { border-left-color: #82e9ff; } /* Azzurro chiaro futuristico */
.saved-event-item.border-color-5 { border-left-color: #ffffff; } /* Bianco puro di contrasto */
.saved-event-item.border-color-6 { border-left-color: #ff77e9; } /* Rosa neon elettrico */
.saved-event-item.border-color-7 { border-left-color: #aaff33; } /* Verde lime acido */
.saved-event-item.border-color-8 { border-left-color: #3949ab; } /* Blu profondo rave */
.saved-event-item.border-color-9 { border-left-color: #ffab91; } /* Rosa pesca caldo */
.saved-event-item.border-color-1 { border-left-color: #00ff99; } /* Verde acqua matrix neon */

/* Fix scroll mobile per popup eventi salvati */
#saved-events-modal,
#saved-events-content,
#savedEventsModal {
  touch-action: auto !important;
  overflow: hidden !important;
}

/* Fix specifico per iOS */
@supports (-webkit-touch-callout: none) {
  #saved-events-list,
  #savedEventsContent {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overflow-y: auto !important;
  }
}

/* Media query mobile ottimizzata per scroll */
@media (max-width: 768px) {
  #saved-events-list,
  #savedEventsContent {
    max-height: 60vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
  }
  
  .saved-event-item {
    min-height: 44px !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
  }
  
  /* Previeni il bounce scroll globale mantenendo scroll locale */
  body {
    overscroll-behavior: none !important;
  }
}


@media (prefers-reduced-motion: reduce) {
  .scrolling-text, .time-filters, .popup-modal, #popupLegenda {
    animation: none !important;
    transition: none !important;
  }
}


/* Fix per Firefox - stili pulsanti */
.saved-event-actions button {
    -moz-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 28px;
    line-height: 1;
    white-space: nowrap;
}

/* Assicura che i pulsanti siano visibili su Firefox */
.saved-event-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    margin-top: 8px;
    flex-wrap: nowrap;
    width: 100%;
}

/* Fix specifico per Firefox */
@-moz-document url-prefix() {
    .saved-event-actions button {
        min-width: max-content;
        background-color: transparent;
    }
    
    .share-btn {
        color: #c17fff !important;
        border: 1px solid #c17fff !important;
        background: transparent !important;
    }
    
    .goto-btn {
        color: #c17fff !important;
        border: 1px solid #c17fff !important;
        background: transparent !important;
    }
    
    .remove-btn {
        color: #b134416f !important;
        border: 2px solid #78787821 !important;
        background: transparent !important;
    }
}



.secret-code-form {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.secret-code-form.visible {
    opacity: 1;
    visibility: visible;
    display: flex;
}

#toggleCodeBtn.active {
    background: #c17fff;
    color: #fff;
    opacity: 1;
    visibility: visible;
    display: flex;
}

/* Fix universale per i pulsanti nel popup eventi salvati */
.saved-event-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    margin-top: 8px;
    width: 100%;
}

.saved-event-actions button,
.saved-event-actions .goto-btn,
.saved-event-actions .share-btn,
.saved-event-actions .remove-btn {
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 0.8rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    height: 28px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    min-width: max-content !important;
}

/* Stili specifici per ogni tipo di pulsante */
.saved-event-actions .goto-btn {
    background: transparent !important;
    color: #c17fff !important;
    border: 1px solid #c17fffa0 !important;
}

.saved-event-actions .share-btn {
    background: transparent !important;
    color: #c17fff !important;
    border: 1px solid #c17fffa0 !important;
    display: inline-flex !important;
}

.saved-event-actions .remove-btn {
    background: transparent !important;
    color: #d24250d5 !important;
    border: 2px solid #ff101029 !important;
}

/* Hover states */
.saved-event-actions .goto-btn:hover,
.saved-event-actions .share-btn:hover {
    background: #281a36 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(193, 127, 255, 0.3) !important;
}

.saved-event-actions .remove-btn:hover {
    background: #281a36 !important;
    color: white !important;
}

/* Fix specifico per Firefox */
@-moz-document url-prefix() {
    .saved-event-actions button,
    .saved-event-actions .goto-btn,
    .saved-event-actions .share-btn,
    .saved-event-actions .remove-btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ====== SituaRadar: icone profilo header ====== */

/* il header fa da riferimento per il posizionamento mobile */
header { position: relative; }

/* cluster icone: in desktop resta “in linea” fra logo e funzioni */

.profile-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  /* RIMUOVI order: 0 se presente */
}

/* AGGIUNGI questa nuova regola per desktop */
@media (min-width: 601px) {
  .profile-icons {
    order: 3; /* Sposta le icone profilo dopo .header-right */
    margin-left: 0.5rem; /* Spazio dal gruppo precedente */
  }
  
  .header-right {
    order: 2; /* Mantiene le funzioni al centro-destra */
  }
  
  .header-left {
    order: 1; /* Logo sempre a sinistra */
  }
}

.profile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 22px;
  transition: all 0.2s ease;
  background: #4d158161;
  border: 1px solid #8f57ba68;
}

.profile-icon:hover {
  background: #a131e731;
  border-color: #8f57bacd;
  transform: translateY(-1px);
}

.profile-icon img {
  width: 44px;  
  height: 44px;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.profile-icon:hover img {
  opacity: 1;
}


/* AGGIUNGI queste regole CSS per nascondere/mostrare icone condizionalmente */

/* Di default nascondi l'icona logout */
#logoutLink {
  display: none;
}

/* Mostra logout quando l'utente è loggato */
body.logged-in #logoutLink {
  display: flex;
}

/* Opzionalmente, nascondi login quando è loggato */
body.logged-in .profile-icon[href*="login"] {
  display: none;
}

/* Assicurati che le icone mantengano il layout corretto */
.profile-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ===== DONATE BUTTON — ghost style SituaRadar ===== */
.donate-button{
  /* Usa le variabili del tema se esistono, altrimenti fallback */
  --stroke: var(--sr-violet, #c471f5);         /* bordo + testo */
  --bg-dark: var(--sr-violet-dark, #4b1f6b);   /* base scura */

  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--bg-dark) 28%, transparent); /* trasparente */
  color: var(--stroke) !important;  /* testo = colore del bordo */
  text-decoration: none;
  font-weight: 400;
  letter-spacing: .15px;
  line-height: 1;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .12s ease,
    box-shadow .15s ease;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.donate-button:hover{
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--bg-dark) 42%, transparent); /* un filo più visibile */
  border-color: color-mix(in oklab, var(--stroke) 85%, white);
  box-shadow: 0 6px 16px rgba(196,113,245,.12);
}

.donate-button:active{
  transform: translateY(0);
  background: color-mix(in oklab, var(--bg-dark) 50%, transparent);
}

.donate-button:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--stroke) 35%, #ffffff),
    0 6px 16px rgba(196,113,245,.18);
}

/* Stato disabilitato */
.donate-button.disabled,
.donate-button[aria-disabled="true"]{
  pointer-events: none;
  opacity: .55;
  filter: grayscale(100%);
  box-shadow: none;
}

/* Contenitore azioni (popup/profile) */
.popup-actions,
.profile-actions{
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .5rem;
  flex-wrap: wrap;
}

/* Mobile compatto */
@media (max-width: 768px){
  .donate-button{
    padding: .45rem .8rem;
    font-size: .9rem;
    border-radius: 10px;
  }
}

/* Rispetto per chi riduce animazioni */
@media (prefers-reduced-motion: reduce){
  .donate-button{ transition: none; }
}


/* Contenitore azioni del POPUP: barra a tutta larghezza in basso */
.leaflet-popup-content .popup-actions{
  display: flex;
  justify-content: space-between;  /* sinistra/destra */
  align-items: center;
  gap: 10px;
  margin-top: 10px;                /* distacco dal contenuto */
  width: 100%;
}

/* DONATE: resta a sinistra (nessun cambio) */
.leaflet-popup-content .popup-actions .donate-button{
  margin: 0;                       /* assicurati nessun auto-centering */
}

/* HYPE: allineato a destra, senza background né posizionamento assoluto */
.leaflet-popup-content .popup-actions .hype-button{
  position: static;                /* override di eventuale absolute globale */
  bottom: auto; right: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: none;
  background: transparent;         /* rimuove background */
  box-shadow: none;
  cursor: pointer;
  transition: transform .18s ease;
  margin-left: auto;               /* spinge il bottone a destra */
}

/* Icona hype compatta e allineata */
.leaflet-popup-content .popup-actions .hype-button img{
  width: 18px; height: 18px; display: block;
  transition: transform .18s cubic-bezier(0.18,0.89,0.32,1.28);
}
.leaflet-popup-content .popup-actions .hype-button:hover img{
  transform: scale(1.08);
}

/* Contatore hype */
.leaflet-popup-content .popup-actions .hype-count{
  color: #ff9966;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  transform: translateY(1px);
}
.leaflet-popup-content .popup-actions .hype-button.hyped .hype-count{
  color: #cc3300;
}

/* Focus accessibile */
.leaflet-popup-content .popup-actions .hype-button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(193,127,255,.45);
  border-radius: 8px;
}

/* Mobile: area clic un filo più generosa */
@media (max-width: 768px){
  .leaflet-popup-content .popup-actions .hype-button{
    padding: 6px 8px;
  }
  .leaflet-popup-content .popup-actions .hype-button img{
    width: 20px; height: 20px;
  }
}

.leaflet-popup-content .popup-actions{ border-top: 1px solid rgba(255,255,255,.08); padding-top: 8px; }


.hype-button .hype-count {
  display: inline-block;
  min-width: 1.2em;
  text-align: center;
  font-weight: 600; /* o normal, a tua scelta */
  line-height: 1;
  margin-left: .35rem;
}
.hype-button.hyped img { transform: scale(1.04); }
.hype-button.animating { pointer-events: none; }


/* === iOS Safari fix + allineamento barra Eventi Segreti === */

/* Evita lo zoom di iOS al focus: 16px minimo */
@media (max-width: 600px) {
  header input,
  header select,
  header button {
    font-size: 16px !important; /* blocca lo zoom */
  }
}

/* Allinea visivamente la form segreta dentro l'header */
#secret-code {
  height: 34px;               /* già presente, qui per chiarezza */
  display: flex;
  align-items: center;
}

#secret-code .secret-code-form {
  align-items: center;        /* centra verticalmente input e freccia */
}

#secret-code .secret-code-form input,
#secret-code .secret-code-form button {
  height: 100%;               /* stessi 34px dell'area contenitore */
  line-height: 1;             /* evita extra-espansioni verticali */
  padding-top: 0;             /* padding compatti per non “spingere” l’header */
  padding-bottom: 0;
  box-sizing: border-box;     /* misure prevedibili */
}

/* L’input prende spazio, il bottone freccia resta compatto */
#secret-code .secret-code-form input#codeInput {
  flex: 1 1 auto;
  min-width: 0;               /* evita overflow orizzontali stretti */
}

#secret-code .secret-code-form button#loadBtn {
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;        /* quadratino gradevole */
  min-width: 34px;            /* stessa altezza: 34px */
}

/* Opzionale: leggero respiro su mobile strettissimo */
@media (max-width: 360px) {
  #secret-code { min-width: 200px; }
}


/* === LEGEND POPUP — MOBILE FIX & COMPACT === */
@media (max-width: 600px) {
  /* Il footer della legenda tiene conto del safe-area iOS */
  #legenda-footer {
    position: fixed;
    right: 1rem;
    bottom: calc(1.45rem + env(safe-area-inset-bottom));
    z-index: 10006;
  }

  /* Popup della legenda: si apre SOPRA al bottone,
     non usa più transform strani e rispetta l'header da 90px */
  #popupLegenda {
    position: absolute;
    right: 0;
    left: auto;                 /* evita allineamenti ambigui */
    bottom: calc(100% + 0.75rem);     /* distanza dal bottone */
    transform: none !important;       /* no translate/scale */
    width: min(360px, calc(100vw - 2rem));
    /* max-height tale da NON sovrastare l'header (90px) + spazio sotto */
    max-height: calc(100vh - 90px - 3rem - env(safe-area-inset-bottom));
    padding: 0.75em 0.85em;
    font-size: 0.88rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Titolo più compatto */
  #popupLegenda h4 {
    margin: 0 0 0.5em 0;
    font-size: 0.95rem;
    line-height: 1.15;
  }

  /* Lista compatta e senza limiti interni conflittuali */
  #popupLegenda ul {
    margin: 0;
    padding: 0;
    max-height: none;           /* lasciamo scorrere il contenuto nel box */
    list-style: none;
  }

  #popupLegenda li {
    display: flex;
    align-items: center;
    min-height: 24px;
    margin: 0 0 0.15em 0;
    padding: 0.08em 0;
    border-radius: 6px;
  }

  #popupLegenda li:hover {
    transform: translateX(4px);
    background-color: rgba(193,127,255,0.05);
    padding-left: 0.25em;
  }

  #popupLegenda img {
    width: 24px;
    height: 24px;
    margin-right: 0.45em;
    flex-shrink: 0;
  }

  #popupLegenda a {
    line-height: 1.2;
    text-decoration: none;
  }
}

/* Micro-stabilizzazioni (anche desktop) */
.leaflet-container { overflow: hidden; }       /* evita spill over durante animazioni */
#popupLegenda { will-change: transform; }      /* render più fluido */


/* evita reflow di elementi complessi durante animazioni/aperture */
#popupLegenda { contain: layout paint; }
.hype-button   { will-change: transform; }


/* Stesso box per icona guest e avatar */
.hdr-user-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;   /* adatta a quello che usi nell’header */
  height: 40px;  /* idem */
  border-radius: 50%;
  overflow: hidden;
}

/* Icona utente "guest" */
.user-icon {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  opacity: 0.9;
}

/* Avatar quando loggati */
.user-avatar {
  width: 100%;
  height: 100%;
  border: rgba(193, 127, 255, 0.8) 2px solid; /* bordo viola-rosa neon */
  display: block;
  object-fit: cover;   /* riempie il cerchio */
  border-radius: 50%;
}

/* Facoltativo: micro-bordo per staccare dal bg */
.hdr-user-slot .user-avatar {
  box-shadow: 0 0 0 1px rgba(255,255,255,.2);
}

.hdr-user-slot:hover {
  transform: translateY(-2px);
  background: #2a1f2d;
  border-color: #d191ff;
  box-shadow: 0 2px 8px rgba(138, 72, 199, 0.2);
}

/* Se usi già body.logged-in, puoi forzare qui il toggle */
body.logged-in #loginLink { display: none !important; }
body.logged-in #avatarLink { display: inline-flex !important; }