/**
 * Stili della mappa pubblica AdverTrieste.
 *
 * @package AdverTrieste
 */

.advtr-map-wrap {
	margin: 1em 0;
}

.advtr-map {
	width: 100%;
	min-height: 300px;
	border: 1px solid #dcdcde;
	border-radius: 6px;
}

.advtr-map-filtri {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.advtr-filtro-btn {
	cursor: pointer;
	border: 1px solid #c3c4c7;
	background: #fff;
	/* Esplicito: senza, su un tema con testo chiaro l'etichetta sparisce
	   (bianco su bianco) perché il colore viene ereditato dal tema. */
	color: #1d2327;
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 14px;
	line-height: 1.6;
}

.advtr-filtro-btn.attivo {
	background: #1d2327;
	color: #fff;
	border-color: #1d2327;
}

/* Marker come pin/cerchio: nessuna dipendenza da immagini Leaflet. */
.advtr-marker {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
	background: #2271b1;
}

.advtr-marker.tipo-poi {
	background: #3a7d44;
}

.advtr-marker.in-evidenza {
	background: #d4a017;
	width: 22px;
	height: 22px;
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.4 ), 0 0 8px rgba( 212, 160, 23, 0.8 );
}

/* Marker della mappa QR riservata. */
.advtr-marker.tipo-qr {
	background: #8034eb;
}

/* Locale collegato a un grande evento in corso: anello dorato. */
.advtr-marker.in-evento {
	box-shadow: 0 0 0 2px #fff, 0 0 0 5px #d4a017, 0 0 10px rgba( 212, 160, 23, 0.7 );
}

.advtr-badge-evento {
	display: inline-block;
	background: #b32d2e;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 1px 6px;
	border-radius: 3px;
	margin-left: 4px;
}

/* Area riservata. */
.advtr-area-riservata {
	margin: 1em 0;
}

.advtr-area-riservata .advtr-benvenuto {
	font-weight: 600;
}

.advtr-qr-section {
	margin-top: 1em;
}

.advtr-popup-title {
	font-weight: 600;
	margin-bottom: 4px;
}

/* Il logo di chi ospita l'espositore, nel fumetto degli espositori (mappa
   riservata e mappa pubblica di «Diventa Partner», che dal 20 agosto 2026
   usano lo stesso). `contain` e non `cover`: un logo tagliato non è più quel
   logo. */
.advtr-popup-logo-link {
	display: inline-block;
	text-decoration: none;
}

.advtr-popup-logo {
	display: block;
	max-width: 120px;
	max-height: 60px;
	width: auto;
	height: auto;
	object-fit: contain;
	margin: 4px 0 6px;
}

/* Le azioni del fumetto: pulsanti, non due link di seguito.
 *
 * Erano due scritte sottolineate una accanto all'altra, e su una mappa —
 * dove si tocca col dito e si legge di corsa — un link testuale di dieci
 * pixel è la cosa più difficile da centrare. Da qui in poi: il primo è pieno
 * (è quello che si vuole premere), il secondo è contornato.
 *
 * ⚠️ I colori sono presi dai token CON un ripiego scritto a mano. Questo
 * foglio serve tre pelli diverse — sito pubblico, area clienti e console — e
 * `var(--ap-azione)` dentro la console non esiste: un token che non risolve
 * non eredita, SPARISCE, e il pulsante resterebbe lì trasparente e
 * illeggibile. È l'inciampo già pagato con il bottone «Accedi».
 */
.advtr-popup-azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

/* Il contenitore nel selettore SERVE: `.ap-contenuto a` del guscio pubblico è
   (0,1,1) e batte una classe sola — è la regola che in passato ha rubato il
   colore ai bottoni e reso un link nero su fondo nero. */
.advtr-popup .advtr-popup-btn {
	flex: 1 1 auto;
	display: inline-block;
	box-sizing: border-box;
	padding: 9px 12px;
	border: 1.5px solid var(--ap-azione, #fe9903);
	border-radius: 9px;
	background: var(--ap-azione, #fe9903);
	color: var(--ap-azione-testo, #0c0e0b);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.advtr-popup .advtr-popup-btn:hover {
	border-color: var(--ap-azione-premuta, #d97f00);
	background: var(--ap-azione-premuta, #d97f00);
	color: var(--ap-azione-testo, #0c0e0b);
}

.advtr-popup .advtr-popup-btn:focus-visible {
	outline: 3px solid var(--ap-fuoco, #fe9903);
	outline-offset: 2px;
}

.advtr-popup .advtr-popup-btn:active {
	transform: translateY( 1px );
}

/* Il secondo: stessa forma, senza il pieno. Due pulsanti arancioni affiancati
   chiedono la stessa cosa due volte e non si sceglie più. */
.advtr-popup .advtr-popup-btn-neutro {
	border-color: var(--ap-bordo, #d8d8d8);
	background: var(--ap-carta, #ffffff);
	color: var(--ap-testo, #0c0e0b);
}

.advtr-popup .advtr-popup-btn-neutro:hover {
	border-color: var(--ap-azione, #fe9903);
	background: var(--ap-carta, #ffffff);
	color: var(--ap-testo, #0c0e0b);
}

.advtr-badge-novita {
	display: inline-block;
	background: #d4a017;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 1px 6px;
	border-radius: 3px;
}

/* La foto del totem nel fumetto degli espositori: si guarda per capire com'è
   messo l'espositore, quindi deve entrare tutta invece che essere ritagliata.
   Larghezza piena del fumetto, altezza a scendere. */

.advtr-popup-foto {
	display: block;

	/* La larghezza la fissa `minWidth` sul fumetto, lato JavaScript: vedi la
	   nota in `qr-fumetto.js`. */
	width: 100%;
	height: auto;
	margin-top: 8px;
	border-radius: 8px;
}