/* I token --re-ink / --re-stone / --re-teal / --re-coral / --re-font-display /
   --re-font-body sono iniettati inline nel template da Impostazioni → RoW
   Explore (class-re-settings.php), cosi' cambiano senza toccare questo file. */

* { box-sizing: border-box; }

button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--re-teal); outline-offset: 2px; }

/* Contenitore condiviso con la pagina mappa (row-explore2.css/page-row-explore.php
   si occupano del resto del reset html/body/tema scuro, questo file resta
   solo le regole marker/cluster/mappa davvero condivise). */
#re-page-shell {
	height: 100%;
	width: 100vw;
}

/* Tema scuro: si scurisce solo lo strato delle tile (le immagini della
   mappa), non l'intera mappa — .leaflet-tile-pane e' un layer indipendente
   dai marker (.leaflet-marker-pane) e dai cluster (.leaflet-overlay-pane),
   fratelli suoi dentro .leaflet-map-pane: il filter si applica solo a lui,
   marker/cluster restano intatti, i marker non seguono mai il tema. */
[data-re-theme="dark"] .leaflet-tile-pane {
	filter: brightness(.9) contrast(1.05) saturate(.9);
}

.leaflet-control-attribution {
	font-family: var(--re-font-body);
	font-size: 10px;
	background: rgba(255, 255, 255, .75) !important;
}

/* Selettore stile marker (rotondi/tonde): stesso linguaggio visivo dei
   controlli zoom di Leaflet (pillola bianca, ombra morbida), angolo
   in alto a destra per non sovrapporsi allo zoom (in alto a sinistra). */
.re-marker-style-switch {
	position: absolute;
	/* Stesso motivo del top su .leaflet-top qui sopra: sotto il topbar
	   fixed (64px), non dietro. */
	top: 80px;
	right: 16px;
	z-index: 15;
	display: flex;
	gap: 2px;
	background: var(--re-surface);
	border-radius: var(--re-radius, 999px);
	padding: 4px;
	box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}

.re-style-btn {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	padding: 0;
	border-radius: var(--re-radius, 999px);
	color: color-mix(in srgb, var(--re-ink) 65%, transparent);
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

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

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

/* L.divIcon: l'elemento radice resta quello che Leaflet posiziona con
   transform inline — nessun transform va mai messo qui sopra (sennò
   sovrascriverebbe quello di Leaflet e il marker sparirebbe dal punto
   giusto sulla mappa), le animazioni stanno sempre su un figlio interno. */
.re-marker-icon {
	background: none;
	border: none;
}

.leaflet-marker-icon.re-marker-selected {
	z-index: 10000 !important;
}

@keyframes re-marker-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

/* ---------- Stile marker "rotondi" (default): palloncino con anelli + freccina ---------- */
/* Cerchio-foto con TRE anelli concentrici (bianco esterno, colore categoria,
   bianco interno — dall'esterno verso l'interno) e una freccina triangolare
   sotto al cerchio che punta il punto esatto. Img e freccina impilate con
   flexbox (non piu' position:absolute con un top calcolato a mano): cosi'
   l'ordine visivo — foto sopra, freccina sotto — e' garantito dal flusso
   normale, non da un calcolo di coordinate che si puo' sbagliare. Niente
   tilt casuale qui (la freccina deve restare sempre verticale). */
body.re-marker-style-round .re-marker-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: visible;
}

/* Wrapper attorno a foto + badge: e' LUI a muoversi in hover/selezionato
   (transform), non piu' l'img direttamente — cosi' il badge (suo figlio,
   posizionato assoluto) si sposta insieme al cerchio invece di restare
   fermo mentre la foto si solleva. */
body.re-marker-style-round .re-marker-photo-wrap {
	position: relative;
	flex: 0 0 auto;
	display: block;
	transform: none;
	transition: transform .25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.re-marker-style-round .re-marker-icon-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 0 0 3px #ffffff90;
	transition: box-shadow .25s ease;
}

/* Badge colore categoria, in alto a destra del cerchio — piccolo pallino
   con un bordo bianco per staccarsi bene dalla foto sotto, qualunque essa
   sia. Dentro lo stesso wrapper della foto, quindi si muove con lei. */
body.re-marker-style-round .re-marker-badge {
	position: absolute;
	top: 1px;
	right: 4px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--re-marker-glow, var(--re-teal)) 90%, transparent);
	box-shadow: 0 0 0 2px #ffffff90, 0px 0px 6px 4px color-mix(in srgb, var(--re-marker-glow, var(--re-teal)) 80%, transparent), 0 2px 5px rgba(0, 0, 0, .35);
}

/* Cuoricino "preferito" (marker.isSaved, RE_Bookmarks) in alto a SINISTRA
   del cerchio — speculare al badge categoria qui sopra, che sta a destra.
   Nessun box-shadow "ad anello" come quello: un'icona invece di un pallino
   pieno, drop-shadow (segue la sagoma reale del cuore, non il riquadro)
   per staccarsi dalla foto sotto qualunque essa sia. */
body.re-marker-style-round .re-marker-fav-badge {
	position: absolute;
	top: 14px;
	left: 48px;
	display: flex;
	color: #fe0556;
	filter: drop-shadow(0 0 2px #ffffffcc) drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
}

body.re-marker-style-round .re-marker-fav-badge svg {
	fill: #ca0020;
	filter: unset;
	width: 17px !important;
	top: -20px !important;
	height: 20px !important;
	left: -10px !important;
}

/* Freccina: stesso bianco dell'anello esterno, cosi' sembra un unico
   "palloncino" continuo invece di due pezzi scollegati. z-index negativo +
   margin-top negativo: resta dietro/sotto il cerchio invece di sovrapporsi
   al suo bordo, cosi' si vede chiaramente attaccata sotto, non sopra. */
body.re-marker-style-round .re-marker-tail {
	flex: 0 0 auto;
	margin-top: -3px;
	width: 0;
	height: 0;
	border-left: 13px solid transparent;
	border-right: 13px solid transparent;
	border-top: 13px solid #ffffff90;
	filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .25));
	z-index: -2;
}

body.re-marker-style-round .re-marker-icon:hover .re-marker-photo-wrap {
	transform: scale(1.12) translateY(-3px) !important;
	z-index: 10;
}

body.re-marker-style-round .re-marker-icon:hover .re-marker-icon-img {
	box-shadow:
		0 0 0 3px color-mix(in srgb, var(--re-marker-glow, var(--re-teal)) 100%, transparent),
		0 0 0px 5px #ffffff90,
		0px 0px 18px 7px color-mix(in srgb, var(--re-marker-glow, var(--re-teal)) 80%, transparent);
}

body.re-marker-style-round .re-marker-selected .re-marker-photo-wrap {
	animation: re-marker-pulse 1.1s ease-in-out infinite;
}

body.re-marker-style-round .re-marker-selected .re-marker-icon-img {
	box-shadow:
		0 0 0 3px color-mix(in srgb, var(--re-marker-glow, var(--re-teal)) 100%, transparent),
		0 0 0px 5px #ffffff90,
		0px 0px 18px 7px color-mix(in srgb, var(--re-marker-glow, var(--re-teal)) 80%, transparent);
}

/* Cluster "rotondi": nessuna foto, un cerchio pieno col numero (colore e
   dimensione crescenti con la quantita' raggruppata — vedi buildClusterIcon
   in row-explore-map.js, che calcola size/percentuale color-mix per marker
   ed espone il colore come --cluster-color, riusato qui anche per il glow
   in hover). Hover sul figlio .re-cluster-solid, MAI sulla radice
   .re-cluster-icon-round: quella e' l'elemento che Leaflet posiziona con un
   transform inline (translate3d), un transform via CSS lo sovrascriverebbe
   e il cluster sparirebbe dal punto giusto sulla mappa. */
.re-cluster-icon-round {
	background: none;
	border: none;
}

.re-cluster-solid {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 2px solid #ffffff80;
	background: var(--cluster-color, var(--re-teal));
	box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
	color: #fff;
	font-family: var(--re-font-body);
	font-weight: 700;
	transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease, border-width .2s ease;
}

.re-cluster-icon-round:hover .re-cluster-solid {
	border-width: 3px;
	transform: scale(1.14);
	box-shadow:
		0 0 0 0px #ffffff80,
		0 0 20px 6px color-mix(in srgb, var(--cluster-color, var(--re-teal)) 75%, transparent),
		0 6px 16px rgba(0, 0, 0, .4);
}

/* Cluster in modalita' "tonde": stessa forma/dimensione dei cluster
   "rotondi" (.re-cluster-solid, sopra), solo un filo di trasparenza in piu'
   sullo sfondo — scoped a body.re-marker-style-dot per non toccare i
   cluster quando lo stile attivo e' "rotondi". */
body.re-marker-style-dot .re-cluster-solid {
	background: color-mix(in srgb, var(--cluster-color, var(--re-teal)) 70%, transparent);
}

/* ---------- Stile marker "tonde" (opzionale, Impostazioni → RoW Explore) ---------- */
/* Pallino 32x32 semitrasparente del colore categoria (--re-marker-glow) con
   bordo pieno 2px dello stesso colore e un'icona bianca dentro — per ora
   un placeholder uguale per tutti (simbolo SVG inline #ic-pin, stesso
   sprite gia' usato per le altre icone della UI — un font esterno tipo
   dashicons non si vedeva affatto, verificato dal vivo), da sostituire
   con l'icona vera per categoria in seguito. Stesso pattern
   degli altri stili: la radice .re-marker-icon (posizionata da Leaflet con
   un transform inline) resta intoccata, il cerchio vero e proprio e' un
   figlio interno (.re-marker-dot) che porta background/bordo/hover/pulsazione —
   mettere un transform sulla radice sovrascriverebbe quello di Leaflet e il
   marker sparirebbe dal punto giusto sulla mappa. Nessun tag/badge/tilt qui.
   Cluster: stesso gruppo (cerchio pieno col numero) dei marker rotondi —
   vedi buildClusterIcon in row-explore-map.js, .re-cluster-icon-round/
   .re-cluster-solid qui sopra, riusati identici senza un ramo dedicato. */
body.re-marker-style-dot .re-marker-icon {
	display: flex;
}

.re-marker-dot {
	position: relative;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: color-mix(in srgb, var(--re-marker-glow, var(--re-teal)) 60%, transparent);
	border: 2px solid var(--re-marker-glow, var(--re-teal));
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	box-shadow: 0px 0px 6px 4px rgba(0, 0, 0, .35);
	transition: transform .2s cubic-bezier(.2, .8, .2, 1), background-color .25s ease, box-shadow .25s ease;
}

/* Preferito (marker.isSaved): niente piu' un marker a forma di cuore
   (provato prima con un <svg> vero — spariva durante il ridisegno di
   Leaflet/markercluster — poi con una sagoma via mask-image: funzionava ma
   era un sistema visivo a se', diverso da come sono fatti tutti gli altri
   marker) — solo un piccolo badge cuore, stessa idea/posizione di
   .re-marker-fav-badge sui marker "rotondi" qui sopra (in alto a sinistra,
   drop-shadow per staccarsi dal pallino sotto qualunque colore abbia). Il
   pallino resta l'IDENTICO .re-marker-dot di sempre in ogni altro senso —
   colore, bordo, glifo, hover/selezionato/pulsazione qui sotto, nessuna
   regola separata per lui. position:relative sul pallino (sopra) serve
   solo a questo badge, per posizionarlo assoluto rispetto a lui. */
body.re-marker-style-dot .re-marker-dot-fav-badge {
	position: absolute;
	top: -5px;
	left: 19px;
	display: flex;
	color: #fe0556;
	filter: drop-shadow(0 0 2px #ffffffcc) drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
}

body.re-marker-style-dot .re-marker-dot-fav-badge svg {
	fill: #ca0020;
	filter: unset;
	width: 17px !important;
	top: -20px !important;
	height: 20px !important;
	left: -10px !important;
}

.re-marker-dot-glyph {
	display: block;
	color: #fff;
}

/* Icona per categoria caricata dall'admin (RE_Category_Icons): qualunque
   colore abbia il file, il filter la forza comunque a bianco puro
   (trasparenza preservata) — brightness(0) porta tutto a nero, invert(1)
   lo ribalta a bianco, cosi' resta coerente col resto anche se qualcuno
   carica per sbaglio un'icona colorata invece che una silhouette. */
.re-marker-dot-glyph-img {
	width: 18px;
	height: 18px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

/* Hover: pallino piu' grande, riempimento piu' "acceso" (opacita' del
   colore categoria alzata) + glow sfumato dello stesso colore attorno. */
body.re-marker-style-dot .re-marker-icon:hover .re-marker-dot {
	transform: scale(1.25);
	background: color-mix(in srgb, var(--re-marker-glow, var(--re-teal)) 85%, transparent);
	box-shadow: 0 0 16px 5px color-mix(in srgb, var(--re-marker-glow, var(--re-teal)) 70%, transparent);
	z-index: 10;
}

/* Selezionato: stessa resa "accesa" dell'hover (richiesto esplicitamente,
   non uno stile diverso) piu' la pulsazione sopra. */
body.re-marker-style-dot .re-marker-selected .re-marker-dot {
	transform: scale(1.25);
	background: color-mix(in srgb, var(--re-marker-glow, var(--re-teal)) 85%, transparent);
	box-shadow: 0 0 16px 5px color-mix(in srgb, var(--re-marker-glow, var(--re-teal)) 70%, transparent);
	animation: re-marker-dot-pulse 1.1s ease-in-out infinite;
	z-index: 10;
}

@keyframes re-marker-dot-pulse {
	0%, 100% { transform: scale(1.25); }
	50% { transform: scale(1.42); }
}