/* ==========================================================================
   I CONSIGLI MENTRE SI SCRIVE — assets/js/suggerimenti.js

   COMPITO 1, workflow 23/9. Fino a oggi questa regola viveva ricopiata in
   coda a `cerca.css` e a `mappa.css` (commento lì: «le due pagine con la
   barra caricano l'uno o l'altro, mai tutti e due»), perché solo home e
   mappa avevano il campo. Ora `template-parts/barra-ricerca.php` lo mette
   anche su Immobili e Professionisti, che non caricano né l'uno né l'altro
   foglio: un foglio SOLO per la tendina, accodato da chi ha il campo
   (`inc/mappa.php` §radar_mappa_risorse_suggerimenti — home, mappa, Immobili,
   Professionisti). Le due copie vecchie in `cerca.css`/`mappa.css` restano
   (ridondanti ma innocue, byte per byte identiche): toglierle è un altro
   giro, non necessario per far funzionare questo.

   La tendina sotto la capsula della barra: stessa larghezza (la scrive il
   JS, dal riquadro vero della capsula), vetro satinato come la barra — i
   gettoni `--vetro-*` di ossatura.css, che hanno già il loro scuro —,
   angoli 20px, 8px di respiro, righe da 44px. Vive in `<body>` a posizione
   fissa, così non la taglia nessun contenitore con `overflow`.
   ========================================================================== */
.sugg {
	position: fixed;
	z-index: 45;
	box-sizing: border-box;
	margin: 0;
	padding: 8px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--vetro-bordo);
	border-radius: 20px;
	background: var(--vetro-forte);
	-webkit-backdrop-filter: var(--vetro-sfocatura);
	backdrop-filter: var(--vetro-sfocatura);
	box-shadow: var(--vetro-ombra);
	color: var(--radar-testo);
	font: 500 15px/1.3 var(--radar-font);
	text-align: left;
}

.sugg[hidden] { display: none; }

.sugg__gruppo + .sugg__gruppo {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px solid color-mix(in srgb, var(--radar-testo) 10%, transparent);
}

.sugg__etichetta {
	padding: 6px 12px 2px;
	color: var(--radar-testo-secondario);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.sugg__voce {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 12px;
	cursor: pointer;
}

.sugg__voce[aria-selected="true"] {
	background: color-mix(in srgb, var(--radar-testo) 9%, transparent);
}

.sugg__testo {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 400;
}

.sugg__testo b { font-weight: 700; }

.sugg__dettaglio {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--radar-testo-secondario);
	font-size: 13px;
}

.sugg__conta {
	flex: 0 0 auto;
	min-width: 1.6em;
	padding: 2px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--radar-testo) 8%, transparent);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

@media (max-width: 30rem) {
	.sugg__dettaglio { display: none; }
}

/* 15/9/2026 (voce 114) — la voce «Vicino a me» nei consigli della barra. */
.sugg__segno {
	flex: 0 0 28px;
	height: 28px;
	border-radius: 50%;
	background: color-mix(in srgb, #0A84FF 14%, transparent);
	position: relative;
}

.sugg__segno::after {
	content: "";
	position: absolute;
	inset: 7px;
	background: #0A84FF;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M21%203%203%2010.5l7.5%203L14%2021z%22%20fill%3D%22%23000%22/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M21%203%203%2010.5l7.5%203L14%2021z%22%20fill%3D%22%23000%22/%3E%3C/svg%3E") center / contain no-repeat;
}

.sugg__voce--vicino .sugg__testo {
	font-weight: 600;
}