/* Seconda skin della mappa — carica DOPO row-explore.css (dipendenza, vedi
   RE_Assets::enqueue_map2()), che contiene tutte le regole marker/cluster/
   icone invariate, e DOPO row-explore-topbar.css (stesso menu classico
   della mappa/articolo). Qui solo il "guscio" attorno: pannello filtri
   floating, toolbar, scheda marker v2, tab "N luoghi in quest'area".
   Tutto ridisegnato con i token --re-* del tema (Impostazioni → Aspetto),
   MAI colori scuri fissi — il pannello segue il tema chiaro/scuro come il
   resto del plugin (prima era "vetro sempre scuro" a prescindere, cambiato
   apposta in questa sessione). */

* { box-sizing: border-box; }

html, body.re2-body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	font-family: var(--re-font-body);
	color: var(--re-ink);
	-webkit-font-smoothing: antialiased;
}

/* Da loggati, WordPress applica "margin-top: 32px" a <html> per fare
   spazio alla barra admin in alto — ma la nostra altezza resta 100% del
   viewport, quindi il fondo della pagina (angolo dell'attribuzione
   Leaflet incluso) finiva 32px sotto al bordo visibile, irraggiungibile
   perche' lo scroll e' disattivato (overflow:hidden qui sopra). Si
   compensa accorciando BODY di altrettanto — body.admin-bar e' la stessa
   classe gia' usata per spostare giu' il topbar (row-explore-topbar.css). */
body.admin-bar.re2-body {
	height: calc(100% - 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar.re2-body {
		height: calc(100% - 46px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.re2-body * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* .re-topbar e' position:fixed e non riserva spazio (galleggia sopra la
   mappa, stesso comportamento della mappa originale) — #re-page-shell resta
   semplicemente alto quanto il viewport. */
#re-page-shell { height: 100%; width: 100vw; }

.re2-map-wrapper {
	position: relative;
	/* Senza uno z-index qui .re2-map-wrapper resta "auto" e non crea un suo
	   stacking context: i pannelli interni di Leaflet (.leaflet-pane a 400,
	   .leaflet-top/.leaflet-control-container a 1000) finiscono a competere
	   direttamente con .re-topbar (z-index 50) nello stacking context comune
	   e vincono loro, coprendo il topbar. Con questo, tutto cio' che sta
	   dentro resta contenuto sotto quota 1 — vedi anche il commento su
	   .re2-map .leaflet-bottom piu' sotto in questo file, stesso principio. */
	z-index: 1;
	height: 100%;
	width: 100%;
}

.re2-map {
	width: 100%;
	height: 100%;
	background: var(--re-stone);
}

/* Stesso scurimento delle tile in tema scuro della mappa originale — vale
   anche qui perche' row-explore.css (dipendenza) definisce gia' la regola
   su .leaflet-tile-pane, non serve ripeterla. */

/* ---------- Superficie "vetro" condivisa dai pannelli floating ---------- */
.re2-glass {
	background: color-mix(in srgb, var(--re-surface) 94%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .35);
	border: 1px solid color-mix(in srgb, var(--re-ink) 8%, transparent);
}

/* ---------- Pannello filtri floating ---------- */
.re2-filters-panel {
	position: absolute;
	top: 84px;
	left: 16px;
	z-index: 65;
	width: 290px;
	max-width: calc(100% - 32px);
	/* height fissa (non max-height): prima si allungava un po' ogni volta
	   che si espandeva un paese/una regione dentro (piu' contenuto = piu'
	   alto, fino al tetto) — non e' quello che si vuole, il pannello deve
	   restare sempre della stessa altezza, con lo scroll interno di
	   .re2-filters-body ad assorbire il contenuto in eccesso. Stessa
	   formula riusata anche dal pannello luoghi qui sotto (stessa altezza)
	   e dal chip piccolo (stesso bordo basso, .re2-places-chip). */
	height: calc(100% - 104px);
	display: flex;
	flex-direction: column;
	border-radius: var(--re-radius, 18px);
	overflow: hidden;
	background: color-mix(in srgb, var(--re-surface) 74%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .35);
	border: 1px solid color-mix(in srgb, var(--re-ink) 8%, transparent);
	transition: transform .25s ease, opacity .2s ease;
}

.re2-filters-panel.is-closed {
	transform: translateX(calc(-100% - 30px));
	opacity: 0;
	pointer-events: none;
}

.re2-filters-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 16px 10px;
	flex: 0 0 auto;
}

.re2-filters-header h3 {
	margin: 0;
	font-family: var(--re-font-display);
	font-size: 1.05rem;
	color: var(--re-ink);
}

.re2-filters-close {
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	background: color-mix(in srgb, var(--re-ink) 8%, transparent);
	color: var(--re-ink);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.re2-filters-close:hover { background: color-mix(in srgb, var(--re-ink) 15%, transparent); }

/* Riepilogo "cosa sto filtrando davvero" (row-explore2-app.js,
   renderFilterSummary) — vuoto/collassato se non c'e' nessun filtro
   attivo, altrimenti una pillola per gruppo (Tipo di contenuto/Categorie/
   Località) separate da un "+" per rendere visibile che tra i gruppi e'
   un E, non un O (dentro lo stesso gruppo invece e' un O, vedi virgole
   dentro la pillola). */
.re2-filters-summary {
	display: none;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	margin: 6px 16px 10px;
	padding: 8px 10px;
	border-radius: var(--re-radius, 10px);
	background: color-mix(in srgb, var(--re-teal) 10%, transparent);
	font-size: 0.76rem;
	line-height: 1.3;
}

.re2-filters-summary.is-visible {
	display: flex;
}

.re2-filters-summary-group {
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--re-surface);
	color: var(--re-ink);
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.re2-filters-summary-plus {
	flex: 0 0 auto;
	color: var(--re-teal);
	font-weight: 800;
}

.re2-filters-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 4px 16px 10px;
	/* Riserva sempre lo spazio della scrollbar (anche quando il contenuto
	   non scorre ancora): senza, la sua comparsa restringe il contenuto di
	   qualche pixel invece di occupare uno spazio gia' previsto. */
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--re-ink) 30%, transparent) transparent;
}

.re2-filters-body::-webkit-scrollbar {
	width: 8px;
}

.re2-filters-body::-webkit-scrollbar-track {
	background: transparent;
}

.re2-filters-body::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--re-ink) 25%, transparent);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
}

.re2-filters-body::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--re-ink) 45%, transparent);
	background-clip: padding-box;
}

.re2-filters-section + .re2-filters-section { margin-top: 16px; }

/* Riga titolo sezione: freccia apri/chiudi (occupa lo spazio restante,
   cliccabile su tutta l'etichetta) + switch E/O a destra (row-explore2-app.js,
   toggleSectionCollapse()/toggleFacetMode()). */
.re2-filters-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.re2-filters-collapse-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	flex: 1 1 auto;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	text-align: left;
}

.re2-filters-chevron {
	flex: 0 0 auto;
	color: color-mix(in srgb, var(--re-ink) 45%, transparent);
	transition: transform 0.2s ease;
}

.re2-filters-collapse-btn[aria-expanded="false"] .re2-filters-chevron {
	transform: rotate(-90deg);
}

.re2-filters-section.is-collapsed .re2-check-list { display: none; }

.re2-filters-label {
	margin: 0;
	font-family: var(--re-font-body);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--re-ink) 45%, transparent);
}

/* Switch globale +/(/) di come si combinano i gruppi selezionati: di
   default + (rotellina a sinistra, comportamento storico "tutto insieme"),
   un click la sposta su / ("basta uno qualsiasi") — simboli invece di
   lettere E/O perche' le traduzioni diventavano parole lunghe che non
   stavano nella pillola. Rotellina sempre circolare (dimensione fissa in
   px, non piu' legata a meta' larghezza del track: prima con track stretto
   veniva ovale/storta), le due etichette sono testo statico ai due
   capi del track invece che "dentro" meta' pillola ciascuna. */
.re2-filters-mode-btn {
	position: relative;
	flex: 0 0 auto;
	width: 60px;
	height: 32px;
	border-radius: 999px;
	border: none;
	padding: 0;
	background: color-mix(in srgb, var(--re-ink) 12%, transparent);
	cursor: pointer;
	font-family: var(--re-font-body);
	transition: background-color 0.2s ease;
}

.re2-filters-mode-btn-and,
.re2-filters-mode-btn-or {
	position: absolute;
	top: 50%;
	z-index: 0;
	transform: translateY(-50%);
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
	color: color-mix(in srgb, var(--re-ink) 40%, transparent);
	transition: color 0.2s ease;
	pointer-events: none;
}

.re2-filters-mode-btn-and { left: 11px; }
.re2-filters-mode-btn-or { right: 11px; }

.re2-filters-mode-btn::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--re-coral);
	transition: transform 0.2s ease;
}

.re2-filters-mode-btn[aria-pressed="true"]::before {
	transform: translateX(28px);
}

/* L'opzione attiva resta sempre a piena leggibilita', quella non attiva e'
   piu' spenta finche' non ci passi sopra col mouse. */
.re2-filters-mode-btn[aria-pressed="false"] .re2-filters-mode-btn-and,
.re2-filters-mode-btn[aria-pressed="true"] .re2-filters-mode-btn-or {
	color: var(--re-ink);
}

/* Hover: si illumina l'ALTRA opzione, quella su cui cliccando passeresti —
   stesso linguaggio di anteprima degli altri bottoni della mappa
   (.re2-toolbar-btn:hover), accento secondario per farla notare. */
.re2-filters-mode-btn:hover {
	background: color-mix(in srgb, var(--re-ink) 18%, transparent);
}

.re2-filters-mode-btn[aria-pressed="false"]:hover .re2-filters-mode-btn-or,
.re2-filters-mode-btn[aria-pressed="true"]:hover .re2-filters-mode-btn-and {
	color: var(--re-coral);
}

.re2-check-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.re2-check-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	border-radius: var(--re-radius, 10px);
	cursor: pointer;
	user-select: none;
	font-family: var(--re-font-body);
	transition: background-color .2s ease;
}

.re2-check-row:hover { background: color-mix(in srgb, var(--re-ink) 6%, transparent); }

/* "I miei preferiti": stessa riga/stile delle categorie, ma fuori dai
   gruppi apri/chiudi (un interruttore a se', non una lista) — un filo di
   spazio e una riga sottile sotto per separarla visivamente dai gruppi
   categoria che seguono. */
#re2-filter-favorites {
	margin-bottom: 10px;
	padding-bottom: 12px;
	border-bottom: 1px solid color-mix(in srgb, var(--re-ink) 10%, transparent);
}

.re2-check-row.is-active { background: color-mix(in srgb, var(--row-color, var(--re-teal)) 12%, transparent); }

.re2-check-box {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: var(--re-radius, 5px);
	border: 1.5px solid color-mix(in srgb, var(--re-ink) 30%, transparent);
	display: grid;
	place-items: center;
	color: transparent;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.re2-check-row.is-active .re2-check-box {
	background: var(--row-color, var(--re-teal));
	border-color: var(--row-color, var(--re-teal));
	color: #fff;
}

/* Stesso linguaggio visivo dei marker "Tonde" sulla mappa (row-explore.css,
   .re-marker-dot): cerchio del colore categoria al 30% di opacita', bordo
   pieno 2px, icona bianca dentro — presa dal campo icona categoria
   (RE_Category_Icons), o la bandiera per i paesi, o il segnaposto SVG
   generico se la categoria non ne ha ancora una. */
.re2-check-badge {
	flex: 0 0 auto;
	width: 25px;
	height: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: color-mix(in srgb, var(--row-color, var(--re-teal)) 85%, transparent);
	border: 2px solid var(--row-color, var(--re-teal));
}

.re2-check-badge-img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	/* Forza il bianco a prescindere dal colore reale del file caricato,
	   stessa regola di .re-marker-dot-glyph-img in row-explore.css. */
	filter: brightness(0) invert(1);
}

.re2-check-badge svg {
	color: #fff;
	/* #ic-pin (fallback) e' gia' outline per conto suo (fill="none" sul
	   <symbol>) — #ic-heart no (il suo fill va lasciato libero altrove per
	   poterlo riempire quando "salvato"), qui invece serve sempre e solo il
	   contorno bianco, mai pieno nero (fill SVG di default). */
	fill: none;
}

.re2-check-badge-flag {
	font-size: 0.7rem;
	line-height: 1;
}

.re2-check-label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.86rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.re2-check-count {
	flex: 0 0 auto;
	min-width: 20px;
	padding: 1px 7px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--re-ink) 8%, transparent);
	color: color-mix(in srgb, var(--re-ink) 55%, transparent);
	font-family: var(--re-font-body);
	font-size: 0.7rem;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* ---------- Località: paesi + regioni espandibili ---------- */
.re2-loc-country-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.re2-loc-country-row .re2-check-row { flex: 1 1 auto; }

.re2-loc-expand {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 1.5px solid color-mix(in srgb, var(--re-ink) 25%, transparent);
	border-radius: 50%;
	background: none;
	color: color-mix(in srgb, var(--re-ink) 60%, transparent);
	font-family: var(--re-font-body);
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.re2-loc-expand:hover { border-color: var(--re-teal); color: var(--re-teal); }

.re2-loc-region-wrap {
	padding-left: 24px;
}

.re2-loc-region-wrap .re2-check-label { font-size: 0.82rem; }

/* Riga in fondo al pannello: "Pulisci filtri" + switch globale +/ affiancati
   (prima c'era solo il primo, occupava lui il margine verso il pannello). */
.re2-filters-footer {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 16px 16px;
}

.re2-filters-clear {
	flex: 1 1 auto;
	padding: 9px;
	border: none;
	border-radius: var(--re-radius, 10px);
	background: color-mix(in srgb, var(--re-ink) 6%, transparent);
	color: var(--re-teal);
	font-family: var(--re-font-body);
	font-weight: 700;
	font-size: 0.82rem;
	cursor: pointer;
}

.re2-filters-clear:hover { background: color-mix(in srgb, var(--re-ink) 10%, transparent); }

/* Pulsante "Filtri" per riaprire il pannello dopo averlo chiuso. */
.re2-filters-toggle {
	position: absolute;
	top: 84px;
	left: 16px;
	z-index: 64;
	display: none;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid color-mix(in srgb, var(--re-ink) 8%, transparent);
	border-radius: var(--re-radius);
	background: color-mix(in srgb, var(--re-surface) 74%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .3);
	color: var(--re-ink);
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
}

.re2-filters-panel.is-closed ~ .re2-filters-toggle { display: flex; }

/* Numero di filtri attivi (row-explore2-app.js, updateFiltersToggleBadge) —
   niente badge se non c'e' nessun filtro attivo (span vuoto, :empty lo
   nasconde da solo). Accento secondario richiesto esplicitamente. */
.re2-filters-toggle-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--re-coral);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.re2-filters-toggle-badge:empty { display: none; }

/* ---------- Toolbar verticale a destra: stile marker + satellite/standard + zoom ---------- */
/* Un unico gruppo impilato dall'alto in basso, stesso linguaggio "vetro"
   per i tre sotto-gruppi (stile marker, basemap, zoom) — niente piu' angoli
   separati per ciascuno. */
.re2-toolbar {
	position: absolute;
	top: 84px;
	right: 16px;
	z-index: 60;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

/* I 3 gruppi della toolbar verticale (basemap, zoom, stile marker) sono lo
   STESSO componente visivo (pillola "vetro" + pulsanti tondi dentro) — unico
   punto dove sono definiti insieme, cosi' una modifica (radius, colori,
   misure) vale per tutti e 3 invece di doverla ripetere. */
.re2-layers-wrap,
.re2-zoom-switch,
.re2-marker-style-switch.re2-marker-style-switch {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 3px;
	border-radius: var(--re-radius);
	background: color-mix(in srgb, var(--re-surface) 74%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid color-mix(in srgb, var(--re-ink) 8%, transparent);
	box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .3);
}

.re2-marker-style-switch.re2-marker-style-switch { position: static; }

/* Pulsanti dentro i 3 gruppi qui sopra — .re2-toolbar-btn (basemap/zoom) e
   .re-style-btn (stile marker, row-explore.css) erano due classi separate
   con stili leggermente diversi nonostante fossero visivamente lo stesso
   pulsante: unificati qui in un'unica regola, cosi' restano davvero
   identici e si modificano in un colpo solo. */
.re2-toolbar-btn,
.re-style-btn {
	width: 34px;
	height: 34px;
	border: none;
	border-radius: var(--re-radius);
	display: grid;
	place-items: center;
	background: none;
	padding: 0;
	color: var(--re-ink);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.re2-toolbar-btn:hover,
.re-style-btn:hover { background: color-mix(in srgb, var(--re-ink) 8%, transparent); }

.re2-toolbar-btn.is-active,
.re-style-btn.is-active { background: var(--re-teal); color: #fff; }

/* ---------- Pannello "Livelli mappa" (basemap + overlay) ---------- */
.re2-layers-wrap {
	position: relative;
}

.re2-layers-panel {
	position: absolute;
	top: 0;
	/* Si apre a sinistra del pulsante che lo ha aperto: la toolbar vive
	   incollata al bordo destro dello schermo (.re2-toolbar, right:16px),
	   aprirlo verso destra lo taglierebbe fuori dal viewport. */
	right: calc(100% + 12px);
	width: 220px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* Stessi identici valori delle altre schede della mappa (.re2-filters-
	   panel, .re2-marker-card, .re2-places-panel) — non bastava la classe
	   .re2-glass nel markup: quella ha un'opacita' di sfondo diversa (94%
	   invece di 74%) e niente border-radius suo, risultava visibilmente
	   diverso dal resto (angoli squadrati, meno "vetro"). */
	border-radius: var(--re-radius, 18px);
	background: color-mix(in srgb, var(--re-surface) 74%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .35);
	/* Nascosto di default (non "hidden" nel markup: serve poter animare
	   apertura/chiusura, un attributo hidden salterebbe la transizione). */
	opacity: 0;
	pointer-events: none;
	transform: translateX(6px);
	transition: opacity .18s ease, transform .18s ease;
}

.re2-layers-panel.is-open {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(0);
}

.re2-layers-panel-label {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: color-mix(in srgb, var(--re-ink) 55%, transparent);
}

.re2-layers-divider {
	height: 1px;
	background: color-mix(in srgb, var(--re-ink) 10%, transparent);
	margin: 2px 0;
}

.re2-layers-options {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.re2-layers-option {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 7px 8px;
	border: none;
	border-radius: calc(var(--re-radius, 12px) - 4px);
	background: none;
	color: var(--re-ink);
	font-size: 0.86rem;
	text-align: left;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.re2-layers-option svg { flex: 0 0 auto; }

.re2-layers-option:hover {
	background: color-mix(in srgb, var(--re-ink) 8%, transparent);
}

.re2-layers-option.is-active {
	background: var(--re-teal);
	color: #fff;
}

.re2-layers-overlays {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.re2-layers-overlay {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	border-radius: calc(var(--re-radius, 12px) - 4px);
	font-size: 0.86rem;
	color: var(--re-ink);
	cursor: pointer;
	transition: background-color .2s ease;
}

.re2-layers-overlay:hover {
	background: color-mix(in srgb, var(--re-ink) 8%, transparent);
}

.re2-layers-overlay svg { flex: 0 0 auto; }

.re2-layers-overlay i {
	flex: 0 0 auto;
	width: 18px;
	font-size: 15px;
	text-align: center;
}

.re2-layers-overlay input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--re-coral);
	flex: 0 0 auto;
	cursor: pointer;
}

/* z-index: stessa scala ridotta usata per .re-mini-map in
   row-explore-article.css — lo z-index:1 su .re2-map-wrapper isola un suo
   stacking context ma non basta da solo (probabilmente il vecchio snippet
   CSS ora rimosso abbassava anche direttamente i pannelli interni di
   Leaflet, non solo il contenitore). !important vince sulle regole proprie
   di Leaflet senza toccare l'ordine relativo tra i pannelli, che restano
   nell'ordine giusto perche' Leaflet li crea cosi' nel DOM. La riga
   .leaflet-bottom qui sotto (gia' presente prima per lo stesso motivo,
   sulla card marker) resta ridondante ma innocua. */
.re2-map .leaflet-pane { z-index: 2 !important; }
.re2-map .leaflet-top,
.re2-map .leaflet-bottom { z-index: 3 !important; }

.re2-map .leaflet-control-attribution {
	background: color-mix(in srgb, var(--re-surface) 80%, transparent) !important;
	color: var(--re-ink);
}

.re2-map .leaflet-control-attribution a { color: var(--re-ink); }

/* ---------- Tab "N luoghi in quest'area" ---------- */
.re2-places-chip {
	position: absolute;
	/* Stesso bordo basso del pannello filtri (.re2-filters-panel, top:84px +
	   height calc(100% - 104px) = 20px di margine dal fondo). */
	bottom: 20px;
	right: 16px;
	z-index: 58;
	width: 250px;
	max-width: calc(100% - 32px);
	padding: 14px 16px 16px;
	border-radius: var(--re-radius, 16px);
	background: color-mix(in srgb, var(--re-surface) 74%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .35);
	border: 1px solid color-mix(in srgb, var(--re-ink) 8%, transparent);
	transition: transform .25s ease, opacity .2s ease;
}

.re2-places-chip.is-hidden,
.re2-places-chip.is-empty {
	transform: translateY(12px);
	opacity: 0;
	pointer-events: none;
}

.re2-places-chip-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 50%;
	background: color-mix(in srgb, var(--re-ink) 8%, transparent);
	color: var(--re-ink);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.re2-places-chip-row { padding-right: 20px; }

.re2-places-chip-count {
	font-size: 0.86rem;
	font-weight: 700;
}

.re2-places-preview {
	display: flex;
	gap: 6px;
	margin: 10px 0 12px;
}

.re2-places-preview-thumb {
	flex: 1 1 0;
	height: 44px;
	border-radius: var(--re-radius, 8px);
	background-size: cover;
	background-position: center;
	background-color: color-mix(in srgb, var(--re-teal) 20%, var(--re-stone) 80%);
}

.re2-places-viewall {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 9px;
	border: none;
	border-radius: var(--re-radius, 10px);
	background: var(--re-teal);
	color: #fff;
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: .02em;
	text-transform: uppercase;
	cursor: pointer;
}

.re2-places-viewall:hover { background: color-mix(in srgb, var(--re-teal) 85%, black); }

/* ---------- Pannello elenco completo (tab verticale da destra) ---------- */
/* Stessa "forma" degli altri pannelli vetro (angoli arrotondati, stesso
   sfondo/blur) ma si apre scivolando da fuori schermo sul lato destro,
   come una scheda che esce — non piu' "cresce" dal chip piccolo. Stessa
   posizione/altezza FISSA del pannello filtri (top:84px, height
   calc(100% - 104px), non max-height: stessa identica formula, cosi' sono
   sempre alti uguale, non solo "al massimo uguale") — sotto al menu in
   alto. Lista di nuovo verticale (thumb a sinistra, testo a destra), non
   piu' le card orizzontali a scorrimento. */
.re2-places-panel {
	position: absolute;
	top: 84px;
	right: 16px;
	z-index: 80;
	width: 300px;
	max-width: calc(100% - 32px);
	height: calc(100% - 104px);
	display: flex;
	flex-direction: column;
	border-radius: var(--re-radius, 18px);
	overflow: hidden;
	background: color-mix(in srgb, var(--re-surface) 74%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .35);
	border: 1px solid color-mix(in srgb, var(--re-ink) 8%, transparent);
	transform: translateX(calc(100% + 30px));
	opacity: 0;
	pointer-events: none;
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
}

.re2-places-panel.open {
	transform: translateX(0);
	opacity: 1;
	pointer-events: auto;
}

.re2-places-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px 10px;
	flex: 0 0 auto;
}

.re2-places-panel-header h3 {
	margin: 0;
	font-family: var(--re-font-display);
	font-size: 1rem;
}

.re2-places-panel-close {
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	background: color-mix(in srgb, var(--re-ink) 8%, transparent);
	color: var(--re-ink);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.re2-places-panel-list {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 4px 12px 16px;
	/* Stessa scrollbar (verticale) del pannello filtri. */
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--re-ink) 30%, transparent) transparent;
}

.re2-places-panel-list::-webkit-scrollbar {
	width: 8px;
}

.re2-places-panel-list::-webkit-scrollbar-track {
	background: transparent;
}

.re2-places-panel-list::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--re-ink) 25%, transparent);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
}

.re2-places-panel-list::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--re-ink) 45%, transparent);
	background-clip: padding-box;
}

/* Riga luogo: di nuovo thumb a sinistra, testo a destra. */
.re2-places-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 8px;
	margin-bottom: 4px;
	border: none;
	border-radius: var(--re-radius, 12px);
	background: none;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	color: var(--re-ink);
	transition: background-color .2s ease, box-shadow .2s ease;
}

.re2-places-row:hover { background: color-mix(in srgb, var(--re-ink) 6%, transparent); }

/* Luogo mostrato ora nella scheda (row-explore2-app.js, updateActivePlaceRow) —
   resta evidenziato anche sfogliando la lista o dopo un pan/zoom che la
   ricostruisce. */
.re2-places-row.is-active {
	background: color-mix(in srgb, var(--row-color, var(--re-teal)) 14%, transparent);
	box-shadow: inset 0 0 0 2px var(--row-color, var(--re-teal));
}

.re2-places-row-thumb {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: var(--re-radius, 10px);
	background-size: cover;
	background-position: center;
	background-color: color-mix(in srgb, var(--re-teal) 20%, var(--re-stone) 80%);
}

.re2-places-row-body { flex: 1 1 auto; min-width: 0; }

.re2-places-row-title {
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.re2-places-row-cat {
	display: block;
	margin-top: 2px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--row-color, var(--re-teal));
}

.re2-places-panel-empty {
	padding: 20px 16px 24px;
	text-align: center;
	color: color-mix(in srgb, var(--re-ink) 55%, transparent);
	font-size: 0.88rem;
}

/* ---------- Scheda marker (stile hero orizzontale) ---------- */
/* Tornata un pannello fisso in basso a sinistra (non piu' un popup Leaflet
   ancorato al marker — spostava la scheda in giro per lo schermo seguendo
   il marker, l'utente la vuole invece sempre nello stesso angolo, come
   prima). Allineata al pannello filtri (stesso left:16px) — quando i
   filtri sono aperti la regola qui sotto (basata sull'ordine nel DOM: il
   pannello filtri viene prima nell'HTML) la sposta a destra abbastanza da
   non coprirli, invece di stare semplicemente sopra. */
.re2-marker-card {
	position: absolute;
	left: 16px;
	bottom: 20px;
	z-index: 70;
	width: 580px;
	max-width: calc(100% - 32px);
	border-radius: var(--re-radius, 18px);
	overflow: hidden;
	box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .4);
	/* --re-card-hide-shift e' impostata via JS (syncCardToFilters, stesso
	   punto che allinea "bottom" ai filtri): la scheda si allinea a
	   un'altezza VARIABILE (quella reale del pannello filtri), quindi un
	   translateY fisso (100% + 20px) non basta piu' a nasconderla del
	   tutto quando il pannello e' corto — verificato dal vivo: restava un
	   bordo visibile in alto. Sommando lo stesso "gap" qui, lo spostamento
	   verso il basso lo annulla sempre (gap - gap = 0) e resta solo
	   l'altezza propria + un margine di sicurezza, a prescindere da quanto
	   la scheda sia alta da terra in quel momento. */
	transform: translateY(calc(100% + var(--re-card-hide-shift, 20px)));
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), left .25s ease;
}

.re2-marker-card.open {
	transform: translateY(0);
}

/* Pannello filtri aperto (niente classe is-closed) e viene prima nel DOM:
   290px = larghezza del pannello (.re2-filters-panel), + 16px del suo
   offset da sinistra, + 16px di margine, cosi' la scheda inizia subito
   dopo il bordo destro del pannello invece di sovrapporlo. */
#re2-filters-panel:not(.is-closed) ~ .re2-marker-card {
	left: calc(16px + 290px + 16px);
}

.re2-marker-card-hero {
	position: relative;
	height: 310px;
	overflow: hidden;
	font-family: var(--re-font-body);
}

.re2-marker-card-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-color: color-mix(in srgb, var(--row-color, var(--re-teal)) 30%, var(--re-stone) 70%);
}

/* --re-card-overlay (Impostazioni → Aspetto → "Sfumatura schede articolo"),
   non --re-hero-overlay: stessa sfumatura usata sulle card della griglia
   blog/categoria, cosi' le due schede restano coerenti tra loro anche se
   l'hero ha un colore diverso. */
.re2-marker-card-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		color-mix(in srgb, var(--re-card-overlay) 92%, transparent) 0%,
		color-mix(in srgb, var(--re-card-overlay) 70%, transparent) 42%,
		transparent 72%);
}

/* Calendarietto "Eventi" — aspetto/markup condivisi con blog/categoria in
   row-explore-components.css (componente identico su piu' pagine). Vive
   in flusso dentro .re2-marker-card-info (sopra al titolo, sotto la
   pillola categoria), non piu' sovrapposto in un punto fisso sulla foto:
   eredita gia' il colore crema del pannello testo, qui resta solo
   l'ombra per il contrasto sulla foto sotto. */
.re2-marker-card-info .rw-event-calendar-icon {
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
}

.re2-marker-card-close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, .45);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.re2-marker-card-close:hover { background: rgba(0, 0, 0, .65); }

/* Bottone "Meteo": stesso stile/angolo del bottone chiudi qui sopra, subito
   alla sua sinistra (il pallino chiudi resta il piu' esterno, come sempre
   in alto a destra). Apre #re2-weather-popup, vedi row-explore2-app.js. */
.re2-marker-card-weather-btn {
	position: absolute;
	top: 10px;
	right: 46px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 5px;
	height: 28px;
	padding: 0 10px;
	border: none;
	border-radius: 999px;
	background: rgba(0, 0, 0, .45);
	color: #fff;
	font-family: var(--re-font-body);
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.re2-marker-card-weather-btn:hover { background: rgba(0, 0, 0, .65); }

.re2-marker-card-weather-btn svg { flex: 0 0 auto; }

.re2-marker-card-info {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 66%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 8px;
	padding: 22px 16px 22px 22px;
	color: #fbf6ee;
}

/* Tolta dal flusso della colonna (che ora e' ancorata in basso,
   justify-content:flex-end su .re2-marker-card-info): resta fissa in alto
   a sinistra a prescindere da quanto testo c'e' sotto. Il calendarietto
   evento (se c'e') e' invece in flusso subito dopo, dentro
   .re2-marker-card-info — vedi .rw-event-calendar-icon piu' sotto. */
.re2-marker-card-badge {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 2;
	border-radius: 5px;
}

.re2-marker-card-title {
	display: block;
	font-family: var(--re-font-display);
	font-size: 1.3rem;
	line-height: 1.15;
	margin: 0;
	color: #fbf6ee;
}

/* Localita' + visite + preferiti + minutaggio in un'unica riga (era solo
   la localita', .re2-marker-card-location) — stesso ordine/trattamento
   della riga info delle card blog/categoria, un'unica riga qui invece di
   due: sulla scheda mappa non c'e' la seconda riga ambienti/esperienze che
   giustificherebbe due righe separate. */
.re2-marker-card-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0;
	font-size: 0.8rem;
	font-weight: 600;
	color: color-mix(in srgb, #fbf6ee 82%, transparent);
}

.re2-marker-card-meta-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* fill:none esplicito: gli altri glifi dello sprite (pin/eye/clock) ce
   l'hanno gia' di suo, solo ic-heart (conteggio preferiti) ne e' privo —
   senza questa riga arriverebbe sempre pieno. */
.re2-marker-card-meta-item svg { flex: 0 0 auto; fill: none; }

.re2-marker-card-excerpt {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.45;
	color: color-mix(in srgb, #fbf6ee 88%, transparent);
	/* Nascosto su richiesta, non tolto dal markup (serve per eventuali usi
	   futuri): display:none invece di -webkit-line-clamp/overflow, che
	   qui non servono piu' a niente se il testo non si vede. */
	display: none;
}

.re2-marker-card-actions {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}

/* Stesso "vetro" per entrambe le CTA (bordo/colore/blur condivisi qui,
   prima solo la secondaria li' aveva — la primaria era piena
   var(--re-teal), richiesto esplicitamente di renderla uguale) — cambia
   solo il colore di sfondo tra le due, vedi le due varianti piu' sotto. */
.re2-marker-card-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	border-radius: var(--re-radius, 10px);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: opacity .2s ease;
	border: 1.5px solid color-mix(in srgb, #fbf6ee 45%, transparent);
	color: #fbf6ee;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.re2-marker-card-cta:hover { opacity: .85; }

.re2-marker-card-cta-primary {
	background: color-mix(in srgb, #fbf6ee 15%, transparent);
}

/* Colore della categoria "RoW Originals" (--re-originals-color, iniettata
   inline da row-explore2-app.js) invece del "vetro" chiaro della primaria
   qui sopra — un po' trasparente (70%, non piena) cosi' la foto sotto resta
   visibile attraverso il blur. var(--re-teal) di fallback se la categoria
   non ha un colore impostato. */
.re2-marker-card-cta-secondary {
	background: color-mix(in srgb, var(--re-originals-color, var(--re-teal)) 70%, transparent);
}

/* Cuore "salva" sulla scheda popup — stessa classe/JS (.re-blog-card-like,
   initCardLike()) delle card blog, qui solo dimensione/colore per il
   contesto (accanto alle due pillole CTA, sopra la foto): stesso
   trattamento "outline chiaro" della CTA secondaria qui sopra, pieno
   corallo quando salvato — non var(--re-teal) come le CTA, il cuore resta
   sempre corallo ovunque compaia in tutto il plugin. */
.re2-marker-card-like {
	flex: 0 0 auto;
	/* Spinto tutto a destra (le due CTA restano a sinistra, vicine tra
	   loro) invece di stare semplicemente in coda a loro con lo stesso
	   gap. */
	margin-left: auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: color-mix(in srgb, #fbf6ee 15%, transparent);
	border: 1.5px solid color-mix(in srgb, #fbf6ee 45%, transparent);
	color: #fbf6ee;
	cursor: pointer;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: color .2s ease, transform .15s ease, background-color .2s ease, border-color .2s ease;
}

.re2-marker-card-like:hover { transform: scale(1.08); }
.re2-marker-card-like svg { fill: none; }

.re2-marker-card-like.is-active {
	background: color-mix(in srgb, var(--re-favorite, #fe0556) 20%, transparent);
	border-color: var(--re-favorite, #fe0556);
	color: var(--re-favorite, #fe0556);
}
/* Fill sempre vuoto (.re2-marker-card-like svg sopra) anche da salvato —
   solo il colore/sfondo del bottone cambia. */

/* Cerchio trasparente con blur (prima bianco pieno) — dentro, il logo
   della categoria "RoW Originals" (row-explore2-app.js, originalsIcon)
   invece della generica icona play, se caricato in Impostazioni categoria. */
.re2-marker-card-play {
	position: absolute;
	top: 50%;
	right: 26px;
	z-index: 1;
	transform: translateY(-50%);
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
	color: #fff;
	display: grid;
	place-items: center;
	transition: transform .2s ease, background-color .2s ease;
}

.re2-marker-card-play:hover {
	background: rgba(255, 255, 255, .3);
	transform: translateY(-50%) scale(1.08);
}

.re2-marker-card-play svg { margin-left: 3px; }
.re2-marker-card-play img { width: 26px; height: 26px; object-fit: contain; }

/* ---------- Popup meteo (row-explore-map-weather.js) ----------
   Si apre SOPRA la scheda marker (stesso angolo, z-index piu' alto) quando
   si preme il bottone "Meteo" nella scheda — copia visiva del widget meteo
   dell'articolo (row-explore-article.css, .re-weather-*) ma con classi
   proprie (.re2-mapweather-*, non .re-weather-*): vedi commento nel
   template per il perche'. */
.re2-weather-popup {
	position: absolute;
	left: 16px;
	bottom: 20px;
	z-index: 85;
	width: 380px;
	max-width: calc(100% - 32px);
	max-height: calc(100% - 40px);
	overflow-y: auto;
	border-radius: var(--re-radius, 18px);
	background: color-mix(in srgb, var(--re-surface) 94%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .4);
	border: 1px solid color-mix(in srgb, var(--re-ink) 8%, transparent);
	transform: translateY(calc(100% + 20px));
	opacity: 0;
	pointer-events: none;
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
}

.re2-weather-popup.is-open {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

/* Stesso spostamento a destra della scheda marker quando i filtri sono
   aperti (vedi #re2-filters-panel:not(.is-closed) ~ .re2-marker-card piu'
   sopra) — stessa logica, elemento diverso. */
#re2-filters-panel:not(.is-closed) ~ #re2-weather-popup {
	left: calc(16px + 290px + 16px);
}

.re2-weather-popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px 0;
}

.re2-weather-popup-title {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--re-font-display);
	font-size: 1rem;
	color: var(--re-ink);
}

.re2-weather-popup-close {
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
	border: none;
	border-radius: 50%;
	background: color-mix(in srgb, var(--re-ink) 8%, transparent);
	color: var(--re-ink);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

/* ---------- Widget meteo — copia di .re-weather-* (row-explore-article.css),
   classi rinominate apposta (vedi commento nel template). ---------- */
.re2-mapweather {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px 16px 16px;
}

.re2-mapweather-now {
	display: flex;
	align-items: center;
	gap: 12px;
}

.re2-mapweather-icon-wrap {
	flex: 0 0 auto;
	display: flex;
	width: 70px;
	align-items: center;
}

.re2-mapweather-icon-img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.re2-mapweather-temp {
	display: block;
	font-family: var(--re-font-display);
	font-size: 2.3rem;
	font-weight: 700;
	line-height: 1;
	color: var(--re-ink);
}

.re2-mapweather-location {
	font-family: var(--re-font-display);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--re-ink);
	line-height: 1.2;
}

.re2-mapweather-region {
	display: block;
	font-family: var(--re-font-body);
	font-size: 0.8rem;
	font-weight: 400;
	color: color-mix(in srgb, var(--re-ink) 55%, transparent);
}

.re2-mapweather-stats-bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	color: var(--re-ink);
}

.re2-mapweather-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 0;
}

.re2-mapweather-stat-value {
	font-size: 0.82rem;
	font-weight: 700;
	white-space: nowrap;
}

.re2-mapweather-stat-label {
	font-size: 0.6rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: color-mix(in srgb, var(--re-ink) 55%, transparent);
	white-space: nowrap;
}

.re2-mapweather-stat img { width: 30px; height: 18px; }

.re2-mapweather-stat-sep {
	align-self: stretch;
	width: 1px;
	background: color-mix(in srgb, var(--re-ink) 12%, transparent);
}

.re2-mapweather-chart-wrap {
	width: 100%;
}

.re2-mapweather-chart-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.re2-mapweather-chart-area {
	fill: url(#re2-mapweather-chart-fade);
	stroke: none;
}

.re2-mapweather-chart-guide {
	stroke: color-mix(in srgb, var(--re-ink) 16%, transparent);
	stroke-width: 1;
	stroke-dasharray: 2 3;
}

.re2-mapweather-chart-line {
	fill: none;
	stroke: var(--re-teal);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.re2-mapweather-chart-dot {
	fill: var(--re-surface);
	stroke: var(--re-teal);
	stroke-width: 2;
}

.re2-mapweather-chart-temp {
	font-family: var(--re-font-body);
	font-size: 9px;
	font-weight: 700;
	fill: var(--re-ink);
}

.re2-mapweather-chart-points {
	display: flex;
	margin-top: 4px;
}

.re2-mapweather-chart-point {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.re2-mapweather-chart-point img { width: 26px; height: 26px; }

.re2-mapweather-chart-point-time {
	font-size: 0.66rem;
	color: color-mix(in srgb, var(--re-ink) 55%, transparent);
}

.re2-mapweather-forecast {
	display: flex;
	justify-content: space-between;
	gap: 4px;
}

.re2-mapweather-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex: 1;
	min-width: 0;
	padding: 4px 4px;
	border: none;
	border-radius: var(--re-radius, 10px);
	background: color-mix(in srgb, var(--re-ink) 5%, transparent);
	font: inherit;
	cursor: pointer;
	transition: background-color .2s ease;
}

.re2-mapweather-day:hover {
	background: color-mix(in srgb, var(--re-ink) 9%, transparent);
}

.re2-mapweather-day.is-active {
	background: color-mix(in srgb, var(--re-teal) 16%, transparent);
}

.re2-mapweather-day-label {
	font-size: 0.66rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: color-mix(in srgb, var(--re-ink) 55%, transparent);
}

.re2-mapweather-day-icon { width: 47px; height: 30px; }

.re2-mapweather-day-temps { font-size: 0.76rem; display: flex; gap: 4px; }
.re2-mapweather-day-temps strong { color: var(--re-ink); }
.re2-mapweather-day-temps small { color: color-mix(in srgb, var(--re-ink) 50%, transparent); }

.re2-mapweather-error {
	margin: 0;
	font-size: 0.78rem;
	color: var(--re-coral);
}

.re2-mapweather-credit {
	margin: 0;
	text-align: right;
	font-size: 0.62rem;
}

.re2-mapweather-credit a {
	color: color-mix(in srgb, var(--re-ink) 45%, transparent);
	text-decoration: none;
}

.re2-mapweather-credit a:hover { text-decoration: underline; }

/* ---------- Overlay video (row-explore2-app.js, openVideoLightbox()) ----------
   Aperto cliccando "Guarda il video"/il cerchio play sulla scheda popup —
   invece di aprire YouTube in un'altra scheda, resta sul sito senza perdere
   lo stato della mappa. Scuro trasparente con blur, video centrato. */
.re2-video-lightbox {
	position: fixed;
	inset: 0;
	z-index: 3000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .7);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.re2-video-lightbox.is-open { display: flex; }

/* Grosso su desktop ma non a piena pagina (min(), non width fisso: si
   restringe da solo sotto i ~1280px senza bisogno di un'altra media query
   apposta) — 16:9 fisso, l'altezza segue la larghezza invece di uno dei
   due valori scelto a caso. */
.re2-video-lightbox-frame {
	position: relative;
	width: min(1100px, 86vw);
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--re-radius, 16px);
	overflow: hidden;
	box-shadow: 0 30px 80px -10px rgba(0, 0, 0, .6);
}

.re2-video-lightbox-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.re2-video-lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 1;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease;
}

.re2-video-lightbox-close:hover { background: rgba(255, 255, 255, .3); }

@media (max-width: 640px) {
	/* Niente bordi laterali sul telefono (richiesto esplicitamente): a
	   piena larghezza invece che centrato con margine, l'altezza segue
	   comunque il 16:9 quindi resta spazio sopra/sotto, non e' a piena
	   pagina neanche qui. border-radius:0 perche' arriva fino al bordo,
	   un angolo arrotondato si vedrebbe tagliato a meta'. */
	.re2-video-lightbox-frame {
		width: 100vw;
		border-radius: 0;
	}
	.re2-video-lightbox-close { top: 12px; right: 12px; }
}

@media (max-width: 560px) {
	/* Piu' larga (94vw, prima 88vw) e piu' alta (260px, prima 220px) — il
	   pannello testo (.re2-marker-card-info, sotto) aveva troppo poco
	   spazio per titolo+due CTA+cuore, il cuore (spinto a destra con
	   margin-left:auto) finiva tagliato fuori dal bordo della card
	   (overflow:hidden su .re2-marker-card-hero). */
	.re2-marker-card { width: min(94vw, 380px); }
	.re2-marker-card-hero { height: 260px; }
	/* Piu' largo (78%, prima 72%) e meno padding (era lo stesso del
	   desktop, 22px/16px/22px/22px — "parecchio padding" per uno spazio
	   gia' stretto qui) — piu' spazio vero per il contenuto. */
	.re2-marker-card-info { width: 78%; padding: 16px 12px 16px 16px; }
	.re2-marker-card-title { font-size: 1.25rem; }
	/* Pulsanti piu' piccoli (CTA + cuore): sulla larghezza stretta di un
	   telefono le due CTA a piena dimensione desktop lasciavano al cuore
	   pochissimo spazio, da qui sparire fuori dal bordo. */
	.re2-marker-card-actions { gap: 6px; }
	.re2-marker-card-cta { padding: 7px 10px; font-size: 0.66rem; }
	.re2-marker-card-like { width: 32px; height: 32px; }
	.re2-marker-card-like svg { width: 14px; height: 14px; }
	/* Meno padding e senza testo (solo icona, come il bottone chiudi
	   accanto): sulla larghezza di un telefono non c'e' spazio per la
	   scritta "Meteo" senza toccare il pallino chiudi. */
	.re2-marker-card-weather-btn { width: 28px; padding: 0; justify-content: center; }
	.re2-marker-card-weather-btn-label { display: none; }
}

@media (max-width: 782px) {
	.re2-filters-panel,
	.re2-filters-toggle { left: 12px; top: 76px; }
	/* height fissa anche qui (stesso motivo del desktop, vedi
	   .re2-filters-panel sopra): 76px di top + 20px di margine dal fondo.
	   Larghezza ridotta al minimo che lascia ancora leggibili i nomi
	   categoria (era quasi a piena larghezza schermo, "calc(100% - 24px)",
	   molto piu' di quanto serva) — vicina a quella desktop (290px). */
	.re2-filters-panel { width: min(78vw, 280px); height: calc(100% - 96px); }
	.re2-toolbar { top: 76px; right: 12px; }
	.re2-places-chip { right: 12px; bottom: 20px; width: 200px; }
	/* Meno della meta' schermo (non quasi piena altezza come sopra i
	   782px): sennò quando la apri copre troppo, l'articolo/la mappa sotto
	   restano schiacciati. */
	.re2-places-panel { top: 76px; right: 12px; width: calc(100% - 24px); height: 46vh; }
	/* Prova: a tutta larghezza/attaccata al fondo, niente margini da
	   sx/dx/basso — angoli arrotondati solo sopra, dato che tocca i bordi
	   dello schermo sugli altri 3 lati. */
	.re2-marker-card {
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		max-width: 100%;
		border-radius: var(--re-radius, 18px) var(--re-radius, 18px) 0 0;
	}
	/* Sotto i 782px il pannello filtri e' quasi a piena larghezza (sopra):
	   spostare la scheda a destra la butterebbe quasi fuori schermo, meglio
	   lasciarla dov'e' — l'overlap resta minimo in pratica perche' i filtri
	   occupano il 60% in alto, la scheda sta in fondo. */
	#re2-filters-panel:not(.is-closed) ~ .re2-marker-card { left: 0; }

	/* Stesso trattamento "attaccato al fondo, tutta larghezza" della scheda
	   marker qui sopra — coerente, dato che le appare sempre incollata
	   sopra. */
	.re2-weather-popup {
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		max-width: 100%;
		max-height: 70vh;
		border-radius: var(--re-radius, 18px) var(--re-radius, 18px) 0 0;
	}
	#re2-filters-panel:not(.is-closed) ~ #re2-weather-popup { left: 0; }
}