/**
 * La mappa.
 *
 * Leaflet porta il suo CSS; qui c'è solo quello che è nostro: il riquadro,
 * il segnaposto disegnato e la finestrella.
 */

.qlist-map-view {
	box-sizing: border-box;
	position: relative;
	margin: 0 0 1.5rem;
}

.qlist-map-view *,
.qlist-map-view *::before,
.qlist-map-view *::after {
	box-sizing: border-box;
}

.qlist-map-view__canvas {
	width: 100%;
	height: var( --qlist-map-height, 420px );
	border-radius: 10px;
	overflow: hidden;
	background: #eceff3;
}

/*
 * Finché non si clicca, la tela non esiste come spazio: il riquadro della
 * richiesta ne prende il posto, così la pagina non ha un buco grigio alto
 * quattrocento pixel.
 */
.qlist-map-view--click .qlist-map-view__canvas:empty {
	display: none;
}

.qlist-map-view__ask {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 180px;
	padding: 1.5rem;
	text-align: center;
	border: 1px dashed #c7ced8;
	border-radius: 10px;
	background: #f7f9fb;
}

.qlist-map-view__note,
.qlist-map-view__left {
	margin: 0;
	font-size: 0.85em;
	line-height: 1.45;
	opacity: 0.75;
}

.qlist-map-view__left {
	margin-top: 0.6rem;
}

/* --- il segnaposto ---------------------------------------------------- */

/*
 * Una goccia disegnata con i bordi arrotondati e ruotata di 45 gradi: niente
 * immagine da scaricare, e il colore lo decide la directory.
 */
.qlist-pin-wrap {
	position: relative;
	width: 30px;
	height: 38px;
	background: none;
	border: 0;
}

.qlist-pin {
	position: absolute;
	top: 2px;
	left: 3px;
	display: block;
	width: 24px;
	height: 24px;
	border-radius: 50% 50% 50% 0;
	transform: rotate( -45deg );
	background: var( --qlist-pin-color, #2b6cb0 );
	box-shadow: 0 2px 5px rgba( 0, 0, 0, 0.35 );
}

/*
 * Il clic è del contenitore, non del disegno. Ruotato di 45 gradi, il
 * quadrato della goccia ha un rettangolo di ingombro più largo di sé: su una
 * mappa fitta quel rettangolo copriva il segnaposto accanto, e cliccando su
 * un locale si apriva la finestrella di quello sotto. Leaflet i suoi eventi
 * li attacca al contenitore, che è grande esattamente quanto il segnaposto:
 * togliendo il puntatore ai figli, ogni segnaposto risponde solo per sé.
 */
.qlist-pin,
.qlist-pin__glyph {
	pointer-events: none;
}

/*
 * L'icona sta al centro VISIVO della goccia, non al centro del contenitore:
 * la goccia è alta 24 su un contenitore di 38, e la punta è la coda in basso.
 * Centro della goccia = (3 + 12, 2 + 12), quindi l'icona da 16 parte 8 più
 * indietro su tutti e due gli assi.
 */
.qlist-pin__glyph {
	position: absolute;
	top: 6px;
	left: 7px;
	width: 16px;
	height: 16px;
	color: #fff;
}

.qlist-pin__glyph svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* --- la finestrella --------------------------------------------------- */

.qlist-pin-popup {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 170px;
}

.qlist-pin-popup__title {
	font-weight: 600;
	font-size: 1.02em;
	text-decoration: none;
}

.qlist-pin-popup__address {
	font-size: 0.9em;
	opacity: 0.8;
}

.qlist-pin-popup__approx {
	font-size: 0.8em;
	font-style: italic;
	opacity: 0.65;
}