/* Forza colore lilla sui link dentro il popup — sovrascrive Leaflet default */
.tal-popup .leaflet-popup-content a,
.tal-popup .leaflet-popup-content a:visited,
.tal-popup .leaflet-popup-content a:hover {
  color: #7c3aed !important;
  text-decoration: none;
}


/* Popup sopra TUTTO — al primo piano assoluto */
.tal-popup.leaflet-popup { z-index: 99999 !important; }
.leaflet-pane.leaflet-popup-pane { z-index: 99999 !important; }

.tal-popup .leaflet-popup-content-wrapper {
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(124,58,237,0.35);
  background: #7c3aed;
  border: none;
  padding: 0;
  overflow: hidden;
  font-family: system-ui,-apple-system,sans-serif;
}
.tal-popup .leaflet-popup-content { margin: 0; width: auto !important; }
.tal-popup .leaflet-popup-tip { background: #7c3aed; }
.tal-popup .leaflet-popup-close-button { color: rgba(255,255,255,0.7) !important; }
.tal-popup .leaflet-popup-close-button:hover { color: #fff !important; }

.map-popup__img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  margin: 0;
}
.map-popup__body {
  padding: 0.65rem 0.9rem 0.6rem;
}
.map-popup { padding: 0.75rem 0.9rem 0.65rem; min-width: 210px; }
.map-popup__title { margin: 0 0 0.25rem; font-size: 0.88rem; font-weight: 700; color: #ffffff; line-height: 1.3; }
.map-popup__meta  { margin: 0 0 0.65rem; font-size: 0.73rem; color: rgba(255,255,255,0.7); line-height: 1.3; }

.map-popup__actions { display: flex; gap: 0.4rem; }

.map-popup__btn {
  flex: 1;
  text-align: center;
  padding: 0.42rem 0.5rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  display: block;
  line-height: 1;
}
.map-popup__btn--article { border: 0; background: #ffffff; color: #7c3aed; }
.map-popup__btn--article:hover { background: rgba(255,255,255,0.9); }
.map-popup__btn--detail { border: 0; background: #ffffff; color: #7c3aed; }
.map-popup__btn--detail:hover { background: rgba(255,255,255,0.9); }

.app-body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: var(--text);
  font-family: var(--font);
}

.app-top {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.65rem 1rem;
  background: #7c3aed;   /* lilla scuro */
  z-index: 1000;
}

.app-brand {
  display: flex;
  align-items: center;
}

.app-brand__logo {
  height: 42px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.app-tabs {
  display: flex;
  gap: 0.25rem;
}

.app-tabs button {
  border: 0;
  background: transparent;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s, background 0.15s;
}

.app-tabs button.is-active {
  background: rgba(255, 255, 255, 0.18);
  opacity: 1;
}

.app-tab__icon {
  height: 36px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

/* Icona cuore (PNG in assets), stessa altezza delle altre tab */
.app-tab__icon--cuore {
  height: 36px;
  width: auto;
  max-width: 40px;
  display: block;
  object-fit: contain;
}

.app-tab-saved-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
}

.app-tab-saved-count {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.22rem;
  box-sizing: border-box;
  border-radius: 999px;
  background: #ffffff;
  color: #7c3aed;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.15rem;
  text-align: center;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.app-tab-saved-count[hidden] {
  display: none !important;
}


.app-tabs button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

.app-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Filtri + data + banner: visibili sia su Mappa sia su Eventi salvati */
.app-shared-controls {
  flex: 0 0 auto;
  width: 100%;
}

.app-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.app-panel[hidden] {
  display: none !important;
}

/* ─── Tab Salvati — feed a colonna (stile card come popup mappa) ─────── */
[data-app-panel="saved"] {
  background: #faf5ff;
}

.saved-panel {
  --saved-feed-inset: 20px;
  /* stesso valore per colonne e righe: come lo spazio orizzontale tra box, così anche in verticale */
  --saved-feed-gap: 22px;
  /* Altezza fissa box = immagine + corpo (padding) + titolo 2 righe + meta 1 riga + descrizione 4 righe + azioni */
  --saved-box-img-h: 120px;
  --saved-box-body-pad-y: calc(0.75rem + 1rem);
  --saved-box-title-block: calc(2 * 1.3 * 0.95rem + 0.25rem);
  --saved-box-meta-block: calc(0.78rem * 1.35 + 0.75rem);
  --saved-box-preview-block: calc(4 * 1.45 * 0.78rem + 0.7rem);
  --saved-box-actions-block: 3.15rem;
  --saved-box-total-h: calc(
    var(--saved-box-img-h) + var(--saved-box-body-pad-y) + var(--saved-box-title-block) +
      var(--saved-box-meta-block) + var(--saved-box-preview-block) + var(--saved-box-actions-block)
  );
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* margini laterali delegati alla lista scrollabile, allineati al gap tra i box */
  padding: 12px 0 16px;
}

/* Tab salvati: filtri + strip visibili; viewport bloccato così scorre solo la griglia sotto */
.app-body--saved-tab {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.app-body--saved-tab #panel-saved {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.app-body--saved-tab .saved-panel {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.app-body--saved-tab .saved-feed-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tab Impostazioni: niente filtri/data/banner; area principale tutta lilla */
.app-body--settings-tab {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.app-body--settings-tab .app-shared-controls {
  display: none !important;
}

.app-body--settings-tab #panel-settings {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #7c3aed;
}

.app-body--settings-tab #panel-settings .settings-page {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  box-sizing: border-box;
  position: relative;
}

.settings-page__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  text-align: center;
  max-width: 100%;
}

.settings-page__account {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
}

.settings-page__email {
  font-weight: 800;
  word-break: break-all;
}

.settings-page__logout {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.55rem 1.35rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.settings-page__logout:hover {
  background: rgba(255, 255, 255, 0.28);
}

.settings-page__logout:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

.settings-page__credits {
  position: absolute;
  bottom: 1.5rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.settings-page__credits-text {
  font-family: var(--font);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
  text-align: center;
}

.settings-page__credits-text strong {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
}

.settings-page__credits-link {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.settings-page__credits-logo {
  height: 28px;
  width: auto;
  opacity: 0.6;
}

/*
 * Salvati: flex-wrap + larghezza calc (no CSS grid): su WebKit la griglia + gap
 * a volte “mangia” lo spazio tra righe; il flex posiziona ogni riga sotto la precedente.
 * Larghezze: (100% − (n−1)·gap) / n — stesso gap orizzontale e verticale.
 */
.saved-feed-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--saved-feed-gap, 22px);
  padding: var(--saved-feed-inset, 20px);
  width: 100%;
  box-sizing: border-box;
}

.saved-feed-list > .saved-feed-box {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
}

@media (min-width: 520px) {
  .saved-feed-list > .saved-feed-box {
    width: calc((100% - 1 * var(--saved-feed-gap)) / 2);
    max-width: calc((100% - 1 * var(--saved-feed-gap)) / 2);
  }
}

@media (min-width: 900px) {
  .saved-feed-list > .saved-feed-box {
    width: calc((100% - 2 * var(--saved-feed-gap)) / 3);
    max-width: calc((100% - 2 * var(--saved-feed-gap)) / 3);
  }
}

@media (min-width: 1200px) {
  .saved-feed-list > .saved-feed-box {
    width: calc((100% - 3 * var(--saved-feed-gap)) / 4);
    max-width: calc((100% - 3 * var(--saved-feed-gap)) / 4);
  }
}

.saved-panel__empty {
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  color: #7c3aed;
  opacity: 0.88;
  padding: 1.5rem var(--saved-feed-inset);
  box-sizing: border-box;
}

.saved-panel__empty[hidden] {
  display: none !important;
}

.saved-feed-box {
  position: relative;
  background: #7c3aed;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.28);
  display: block;
  height: var(--saved-box-total-h, 380px);
  min-height: var(--saved-box-total-h, 380px);
  max-height: var(--saved-box-total-h, 380px);
}

.app-body--saved-tab .saved-feed-box {
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.2);
}

.saved-feed-box__scroll {
  max-height: min(560px, 82vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Lista salvati: box ad altezza fissa, interno flex (immagine + corpo) */
.saved-feed-list > .saved-feed-box .saved-feed-box__scroll {
  max-height: none;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.saved-feed-list > .saved-feed-box .saved-feed-box__scroll > .marker-overlay__img,
.saved-feed-list > .saved-feed-box .saved-feed-box__scroll > .saved-feed-box__img-placeholder {
  flex: 0 0 var(--saved-box-img-h, 120px);
  min-height: var(--saved-box-img-h, 120px);
}

.saved-feed-box__img[hidden] {
  display: none !important;
}

.saved-feed-box__remove {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: #ffffff;
  color: #7c3aed;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.saved-feed-box__remove:hover {
  background: rgba(255, 255, 255, 0.92);
}

.saved-feed-box .marker-overlay__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
  padding-right: 2.35rem;
  box-sizing: border-box;
}

.saved-feed-box .marker-overlay__title {
  padding-right: 0;
  flex: 0 0 auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  min-height: calc(2 * 1.3 * 0.95rem);
  max-height: calc(2 * 1.3 * 0.95rem);
}

.saved-feed-box .marker-overlay__meta {
  flex: 0 0 auto;
  min-height: calc(0.78rem * 1.35);
  max-height: calc(0.78rem * 1.35);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-feed-box .marker-overlay__meta.saved-feed-box__meta--empty {
  color: transparent;
  user-select: none;
}

.saved-feed-box__preview {
  flex: 0 0 auto;
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  min-height: calc(4 * 1.45em);
  max-height: calc(4 * 1.45em);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.saved-feed-list > .saved-feed-box .marker-overlay__actions {
  flex: 0 0 auto;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
}

.saved-feed-box__preview.is-empty {
  font-style: italic;
  opacity: 0.72;
}

.saved-feed-box__img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.saved-feed-box__img-placeholder[hidden] {
  display: none !important;
}

/* ─── Zona superiore unificata — solo lilla e bianco ─────────────────── */
.map-filters {
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  background: #7c3aed;
}

.map-filters__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.65);
  margin-bottom: 0.35rem;
}

.map-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.map-filters__chip {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.5);
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.map-filters__chip:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.8);
}

/* Filtro premuto: bianco pieno, testo lilla */
.map-filters__chip.is-active {
  background: #ffffff;
  border-color: #ffffff;
  color: #7c3aed;
}

.map-filters__chip:focus-visible {
  outline: 2px solid rgba(255,255,255,0.8);
  outline-offset: 2px;
}

/* Tab Eventi salvati: il chip "Eventi salvati" è ridondante */
.app-body--saved-tab .map-filters__chip[data-event-filter="saved"] {
  display: none !important;
}

/* Tab salvati: niente calendario (data mappa), rotella caricamento né riga luogo osservato */
.app-body--saved-tab .map-events-strip__mini,
.app-body--saved-tab #events-loading-spinner,
.app-body--saved-tab .map-events-strip__place {
  display: none !important;
}

.app-body--saved-tab .map-events-strip__row {
  flex-wrap: wrap;
}

.app-body--saved-tab .ad-banner-strip {
  margin-left: 0;
  flex: 1 1 100%;
  min-width: 0;
}

.map-events-strip {
  flex: 0 0 auto;
  padding: 0.45rem 1rem 0.55rem;
  background: #7c3aed;
}

.map-events-strip__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0 0.6rem;
}

.map-events-strip__place {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.35;
}

.map-events-strip__mini {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;   /* il calendario non si stringe */
}

.map-events-strip__mini input {
  padding: 0.4rem 0.45rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.5);
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-size: 0.88rem;
}

/* Rotella di caricamento bianca accanto al calendario */
.events-top-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #ffffff;
  animation: tal-spin 0.7s linear infinite;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 0.45rem;
}

/* ── Banner eventi — slot affiancati, ognuno cicla in modo indipendente ── */
.ad-banner-strip {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-left: 0.6rem;
  box-sizing: border-box;
}

@media (min-width: 600px) {
  .ad-banner-strip {
    min-height: 50px;
  }
}

@media (min-width: 1024px) {
  .ad-banner-strip {
    min-height: 52px;
  }
}

@media (min-width: 1280px) {
  .ad-banner-strip {
    min-height: 48px;
  }
}

/* Ogni slot è un contenitore che cicla */
.ad-slot {
  flex: 1;
  min-width: 0;
  transition: opacity 0.45s;
}

/* Slot vuoti all’avvio / in attesa immagini: stessa altezza delle .ad-banner-img */
.ad-slot--placeholder {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  box-sizing: border-box;
}

@media (min-width: 600px) {
  .ad-slot--placeholder {
    min-height: 50px;
  }
}

@media (min-width: 1024px) {
  .ad-slot--placeholder {
    min-height: 52px;
  }
}

@media (min-width: 1280px) {
  .ad-slot--placeholder {
    min-height: 48px;
  }
}

.ad-banner-link {
  display: block;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.15s;
}

.ad-banner-link:hover { transform: scale(1.02); }

.ad-banner-img {
  display: block;
  width: 100%;
  height: 38px;          /* mobile: compatto */
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}

/* Tablet: banner un po' più alti */
@media (min-width: 600px) {
  .ad-banner-img  { height: 50px; }
}

/* Desktop (3 slot): altezza media */
@media (min-width: 1024px) {
  .ad-banner-img  { height: 52px; }
}

/* Schermo grande (4 slot): un filo più bassi così restano proporzionati in riga */
@media (min-width: 1280px) {
  .ad-banner-img  { height: 48px; }
}

/* Icona calendario del date picker — resa bianca */
.map-events-strip__mini input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(2);
  opacity: 0.85;
  cursor: pointer;
}

.map-events-strip__mini input::placeholder { color: rgba(255,255,255,0.5); }

.map-events-strip__mini input:focus {
  outline: none;
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.2);
}

/* Strip orizzontale a altezza FISSA */
.events-list {
  flex: 0 0 auto;
  height: 152px;
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-top: 1px solid rgba(15, 20, 25, 0.06);
  background: #fafbfc;
  /* Slide down/up: quando nascosta scivola fuori e libera spazio alla mappa */
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              margin-bottom 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.18s ease;
}
.events-list::-webkit-scrollbar { display: none; }

/* Strip nascosta: scivola giù e si comprime (la mappa prende tutto lo spazio) */
.events-list--hidden {
  transform: translateY(100%);
  margin-bottom: -152px;
  pointer-events: none;
}

.events-list--loading {
  opacity: 0.4;
  pointer-events: none;
}

/* Nessun risultato: barra compatta visibile (non slide fuori come --hidden) */
.events-list.events-list--empty {
  transform: none;
  margin-bottom: 0;
  pointer-events: auto;
  height: auto;
  min-height: 3rem;
  max-height: 4.5rem;
  padding: 0.65rem 1rem;
  align-items: center;
  justify-content: center;
}
.events-list.events-list--empty .events-list__empty {
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  color: rgba(15, 20, 25, 0.65);
}

/* Card nello strip orizzontale */
.event-card {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  border: 1px solid rgba(15, 20, 25, 0.1);
  background: #fff;
  scroll-snap-align: start;
  min-width: 0;
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.event-card--interactive { cursor: pointer; }

.event-card--interactive:hover {
  border-color: #a78bfa;
  box-shadow: 0 2px 10px rgba(167, 139, 250, 0.18);
}

.event-card--interactive:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Immagine in cima alla card (solo se presente) */
.event-card__media {
  flex: 0 0 auto;
  width: 100%;
  height: 76px;
  overflow: hidden;
  background: var(--surface-2, #f1f5f9);
}

.event-card__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Contenuto testuale sotto l'immagine (o da solo se non c'è immagine) */
.event-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.5rem 0.65rem 0.5rem;
  min-height: 0;
}

/* Badge data lilla */
.event-card__date-badge {
  display: inline-block;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a78bfa;
  margin-bottom: 0.22rem;
  flex-shrink: 0;
}

.event-card__title {
  margin: 0 0 0.2rem;
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1.25;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card senza immagine: striscia lilla in cima + titolo su 3 righe */
.event-card--no-image {
  border-top: 3px solid #a78bfa;
}
.event-card--no-image .event-card__body {
  justify-content: flex-start;
  gap: 0.3rem;
}
.event-card--no-image .event-card__title {
  -webkit-line-clamp: 3;
}

.event-card__meta {
  margin: 0;
  font-size: 0.71rem;
  color: var(--muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

/* Nascosti nello strip */
.event-card__source,
.event-card__link { display: none; }

/* Messaggi vuoto / loading centrati */
.events-list__empty,
.events-list__loading {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Rotella di caricamento — sostituire con <img src="...png"> quando disponibile */
.events-list__spinner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.events-list__spinner::after {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(167, 139, 250, 0.2);
  border-top-color: #a78bfa;
  animation: tal-spin 0.75s linear infinite;
}

@keyframes tal-spin {
  to { transform: rotate(360deg); }
}

.map-canvas {
  flex: 1;
  min-height: 200px;
  width: 100%;
  z-index: 0;
  /* Evita che il pinch ingrandisca la pagina: il gesto resta sulla mappa (Leaflet touchZoom). */
  touch-action: none;
  overscroll-behavior: contain;
}

.agent-status {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.75);
}

.agent-status--bar {
  flex: 0 0 auto;
  padding: 0.3rem 1rem;
  background: #7c3aed;
}

.agent-status--ok      { color: rgba(255,255,255,0.95); }
.agent-status--err     { color: #fca5a5; }   /* rosso chiaro leggibile su lilla */
.agent-status--pending { color: rgba(255,255,255,0.75); }

/* Dettaglio evento: pannello a schermo intero sopra la mappa */
.event-sheet {
  position: fixed;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
}

.event-sheet:not([hidden]) {
  pointer-events: auto;
}

.event-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 25, 0.35);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.event-sheet--open .event-sheet__backdrop {
  opacity: 1;
}

.event-sheet__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  max-height: 100dvh;
  height: 100dvh;
  background: #7c3aed;
  border-radius: 0;
  box-shadow: none;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.event-sheet--open .event-sheet__panel {
  transform: translateY(0);
}

.event-sheet__toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: calc(0.35rem + env(safe-area-inset-top, 0px)) 0.5rem 0.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  position: relative;
}

.event-sheet__handle {
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.3);
}

.event-sheet__close {
  position: relative;
  z-index: 1;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0.15rem 0.25rem 0 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 1.65rem;
  line-height: 1;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
}

.event-sheet__close:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.15);
}

.event-sheet__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.event-sheet__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
}

.event-sheet__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(40vh, 380px);
  object-fit: cover;
  border-radius: 10px;
  margin-top: 0.35rem;
  background: var(--surface-2);
}

.event-sheet__title {
  margin: 0.85rem 0 0.5rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.event-sheet__info {
  list-style: none;
  margin: 0;
  padding: 0;
}

.event-sheet__info li {
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.event-sheet__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.65);
}

.event-sheet__value {
  font-size: 0.95rem;
  color: #ffffff;
}

.event-sheet__desc {
  margin: 0.9rem 0 0;
  font-size: 0.93rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.8);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.event-sheet__actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  background: transparent;
}

.event-sheet__btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  box-sizing: border-box;
}

.event-sheet__btn--primary {
  background: #ffffff;
  color: #7c3aed;
  border-color: #7c3aed;
  transition: background 0.15s, color 0.15s;
}

.event-sheet__btn--primary:hover {
  background: rgba(124, 58, 237, 0.07);
}

/* Salvato: bottone bianco, scritta lilla (come primary) */
.event-sheet__btn--secondary.is-saved {
  background: #ffffff;
  color: #7c3aed;
  border-color: #7c3aed;
}

.event-sheet__btn--secondary.is-saved:hover {
  background: rgba(255, 255, 255, 0.92);
  color: #6d28d9;
  border-color: #6d28d9;
}

.event-sheet__btn--secondary {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255,255,255,0.45);
}

.event-sheet__btn--secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.8);
  color: #ffffff;
}

@media (min-width: 768px) {
  .app-top {
    padding: 0.75rem 1.25rem;
  }

  .app-tabs button {
    padding: 0.5rem 1rem;
  }

  .event-sheet__panel {
    inset: 0;
    max-height: 100dvh;
    height: 100dvh;
    transform: translateY(100%);
  }

  .event-sheet--open .event-sheet__panel {
    transform: translateY(0);
  }
}

/* ── Overlay popup marker — posizione fissa, sopra TUTTO ──────────────── */
.marker-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
}

.marker-overlay[hidden] { display: none !important; }

.marker-overlay__backdrop {
  position: absolute;
  inset: 0;
  pointer-events: all;
}

.marker-overlay__card {
  position: fixed;          /* posizionato via JS vicino al pallino */
  width: min(300px, 88vw);
  background: #7c3aed;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(124,58,237,0.4);
  pointer-events: all;
  animation: overlayPop 0.2s cubic-bezier(0.22,1,0.36,1);
}

@keyframes overlayPop {
  from { transform: scale(0.88); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* Immagine: se nascosta non occupa spazio */
.marker-overlay__img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
}
.marker-overlay__img[hidden] { display: none !important; }

.marker-overlay__body {
  padding: 0.75rem 1rem 1rem;
}

.marker-overlay__title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
}

.marker-overlay__meta {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
}

.marker-overlay__actions {
  display: flex;
  gap: 0.5rem;
}

.marker-overlay__btn {
  flex: 1;
  text-align: center;
  padding: 0.5rem 0.5rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  background: #ffffff;
  color: #7c3aed;
  border: 0;
  font-family: inherit;
  transition: background 0.15s;
  display: block;
}

.marker-overlay__btn:hover { background: rgba(255,255,255,0.88); }
.marker-overlay__btn[hidden] { display: none !important; }

.marker-overlay__btn--muted,
button.marker-overlay__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.marker-overlay__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: #ffffff;
  color: #7c3aed;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: background 0.15s;
}
.marker-overlay__close:hover { background: rgba(255,255,255,0.88); }

/* ── Cuore salva evento ──────────────────────────────────────────────── */
.save-heart { font-style: normal; }

.marker-overlay__btn--save {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.5rem 0.7rem;
  background: #ffffff;
  color: #7c3aed;
  border: 0;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.marker-overlay__btn--save.is-saved { background: #7c3aed; color: #fff; }
.marker-overlay__btn--save:hover { background: rgba(255,255,255,0.88); }
.marker-overlay__btn--save.is-saved:hover { background: #6d28d9; }

.save-count {
  font-size: 0.78rem;
  font-weight: 700;
  min-width: 14px;
  text-align: center;
}