.sdq-widget {
	--nq-verde: #3a6b52;
	--nq-verde-scuro: #2c5240;
	--nq-verde-chiaro: #e7f0ea;
	--nq-crema: #faf9f5;
	--nq-bordo: #e3e0d6;
	--nq-testo: #2b2f2c;
	--nq-testo-secondario: #6f736e;
	--nq-ombra: 0 2px 10px rgba(30, 40, 30, 0.07), 0 1px 2px rgba(30, 40, 30, 0.05);

	max-width: 720px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--nq-testo);
	box-sizing: border-box;
	background: var(--nq-crema);
	border: 1px solid var(--nq-bordo);
	border-radius: 16px;
	box-shadow: var(--nq-ombra);
	padding: 28px 30px 26px;
}
.sdq-widget * {
	box-sizing: border-box;
}
.sdq-widget .sdq-titolo {
	margin: 0 0 8px;
	font-size: 1.32em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--nq-testo) !important;
}
.sdq-widget h4 {
	color: var(--nq-testo) !important;
}
.sdq-sottotitolo {
	margin: 0 0 16px;
	color: var(--nq-testo-secondario);
	font-size: 0.95em;
	line-height: 1.5;
}
.sdq-conteggi {
	margin: 0 0 18px;
	font-size: 0.9em;
	color: var(--nq-testo);
	font-weight: 600;
}
.sdq-mappa {
	width: 100%;
	height: 420px;
	border-radius: 12px;
	border: 1px solid var(--nq-bordo);
	margin-bottom: 14px;
	background: var(--nq-verde-chiaro);
}
.sdq-legenda {
	list-style: none;
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 26px;
	padding: 14px 16px;
	font-size: 0.85em;
	color: var(--nq-testo-secondario);
	background: #fff;
	border: 1px solid var(--nq-bordo);
	border-radius: 10px;
}
.sdq-legenda li {
	display: flex;
	align-items: center;
	gap: 6px;
}
.sdq-pallino {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	display: inline-block;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.sdq-elenco {
	margin-bottom: 30px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--nq-bordo);
}
.sdq-elenco h4 {
	margin: 0 0 12px;
	font-size: 1em;
	font-weight: 700;
}
.sdq-elenco-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sdq-elenco-voce {
	display: flex;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--nq-bordo);
	border-radius: 12px;
	padding: 12px;
	box-shadow: var(--nq-ombra);
}
.sdq-elenco-foto {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 8px;
	flex: 0 0 auto;
}
.sdq-elenco-testo {
	flex: 1 1 auto;
	min-width: 0;
}
.sdq-badge {
	display: inline-block;
	color: #fff;
	font-size: 0.75em;
	font-weight: 700;
	padding: 2px 9px;
	border-radius: 999px;
	margin-bottom: 4px;
}
.sdq-elenco-titolo {
	display: block;
	font-size: 1em;
	font-weight: 600;
}
.sdq-elenco-meta {
	display: block;
	font-size: 0.82em;
	color: var(--nq-testo-secondario);
	margin: 2px 0 4px;
}
.sdq-elenco-descrizione {
	margin: 0 0 6px;
	font-size: 0.9em;
	color: var(--nq-testo);
}
.sdq-vedi-mappa {
	background: none;
	border: 1px solid var(--nq-bordo);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 0.8em;
	cursor: pointer;
	color: var(--nq-testo);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.sdq-vedi-mappa:hover {
	background: var(--nq-verde-chiaro);
	border-color: var(--nq-verde);
}

.sdq-form-contenitore {
	padding-top: 4px;
}
.sdq-form-contenitore h4 {
	margin: 0 0 8px;
	font-size: 1em;
	font-weight: 700;
}
.sdq-form-istruzioni {
	margin: 0 0 18px;
	color: var(--nq-testo-secondario);
	font-size: 0.92em;
	line-height: 1.5;
}
.sdq-campo {
	margin-bottom: 18px;
}
.sdq-etichetta {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
	font-size: 0.95em;
}
.sdq-campo input[type="text"],
.sdq-campo input[type="email"],
.sdq-campo input[type="file"],
.sdq-campo select,
.sdq-campo textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--nq-bordo);
	border-radius: 10px;
	font-family: inherit;
	font-size: 1em;
	background: #fff;
	color: var(--nq-testo);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sdq-campo input[type="text"]:focus,
.sdq-campo input[type="email"]:focus,
.sdq-campo select:focus,
.sdq-campo textarea:focus {
	outline: none;
	border-color: var(--nq-verde);
	box-shadow: 0 0 0 3px var(--nq-verde-chiaro);
}
.sdq-campo textarea {
	resize: vertical;
}
.sdq-descrizione-campo {
	margin: 6px 0 0;
	font-size: 0.82em;
	color: var(--nq-testo-secondario);
}
.sdq-posizione-stato {
	font-size: 0.88em;
	color: var(--nq-testo);
	background: var(--nq-verde-chiaro);
	border-radius: 10px;
	padding: 10px 14px;
	margin: 0 0 18px;
}
.sdq-nascondi {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.sdq-invia {
	background: var(--nq-verde);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 12px 28px;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.sdq-invia:hover {
	background: var(--nq-verde-scuro);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
.sdq-invia:active {
	transform: translateY(1px);
}
.sdq-invia:disabled {
	opacity: 0.6;
	cursor: default;
	box-shadow: none;
}
.sdq-messaggio {
	margin: 12px 0 0;
	font-size: 0.9em;
	min-height: 1.2em;
}
.sdq-messaggio.sdq-errore {
	color: #b3261e;
}
.sdq-messaggio.sdq-successo {
	color: var(--nq-verde-scuro);
}

/* segnaposto della nuova segnalazione da inviare: un tono neutro scuro,
   distinto di proposito dal terzetto rosso/ambra/verde usato per gli
   stati delle segnalazioni già pubblicate */
.sdq-icona-nuova span {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50% 50% 50% 0;
	background: #3d4a45;
	transform: rotate(-45deg);
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* contenuto dei popup della mappa (Leaflet applica già la propria
   cornice bianca attorno a questo blocco) */
.sdq-popup {
	max-width: 220px;
}
.sdq-popup-badge {
	display: inline-block;
	color: #fff;
	font-size: 0.72em;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
	margin-bottom: 4px;
}
.sdq-popup-titolo {
	display: block;
	margin-bottom: 2px;
	font-weight: 600;
}
.sdq-popup-meta {
	font-size: 0.82em;
	color: var(--nq-testo-secondario);
}
.sdq-popup-foto {
	width: 100%;
	border-radius: 6px;
	margin: 6px 0;
	display: block;
}
.sdq-popup-descrizione {
	margin: 4px 0 0;
	font-size: 0.88em;
	color: var(--nq-testo);
}

@media (max-width: 480px) {
	.sdq-widget {
		padding: 22px 18px 20px;
		border-radius: 12px;
	}
	.sdq-mappa {
		height: 320px;
	}
}

/* Il tema del sito non ha una propria modalità scura: il widget resta
   sempre nella sua palette chiara (coerente col resto della pagina)
   invece di reagire da solo alla preferenza del dispositivo, cosa che
   creerebbe un riquadro scuro isolato su una pagina chiara. */