/*
 * NeXeN Consenso — banner, pannello preferenze, segnaposto.
 *
 * Autosufficiente: nessun font, nessuna icona, nessun colore da un host
 * esterno. `--nexen-consenso-colore` arriva da un <style> inline scritto dal
 * PHP (v. frontend_assets() in nexen-consenso.php), impostabile dal pannello
 * per ogni sito.
 *
 * ⚠ Scritto ripetitivo invece che astuto di proposito: due regole simili
 * comprimono peggio di una sola regola compatta, ma il CSS in linea di
 * un tema denso si comprime già poco (misurato ~4:1 contro il 7,4:1 di un
 * markup ripetitivo) — quindi qui la brevità del sorgente non è la sola
 * cosa che conta, conta il numero di byte che restano dopo gzip. Questo
 * blocco è comunque piccolo: il tetto di peso si verifica a bocce ferme,
 * sul sito vero (v. rapporto — non misurato in questa consegna).
 */

.nexen-consenso-banner,
.nexen-consenso-modale,
.nexen-consenso-riapri,
.nexen-consenso-blocco {
	box-sizing: border-box;
	font-family: var( --nexen-consenso-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif );
	font-size: 15px;
	line-height: 1.5;
	color: var( --nexen-consenso-testo, #1a1a1a );
}
.nexen-consenso-banner *,
.nexen-consenso-modale *,
.nexen-consenso-blocco * {
	box-sizing: border-box;
}

/* ---------- il banner: una barra in fondo, mai una finestra modale ---------- */
/* R10: niente fondo scurito, niente overflow:hidden sul body — la pagina
 * sotto resta leggibile e scorribile con il banner aperto. */

.nexen-consenso-banner {
	position: fixed;
	left: 0;
	right: 0;
	/* Il tema puo' alzare il banner sopra una sua barra fissa (--nexen-consenso-sopra) senza coprirla. */
	bottom: var( --nexen-consenso-sopra, 0px );
	z-index: 99990;
	background: var( --nexen-consenso-fondo, #fff );
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.16);
	padding: 16px max(16px, env(safe-area-inset-left)) calc(16px + var( --nexen-consenso-area, env(safe-area-inset-bottom) ));
}
.nexen-consenso-banner[hidden] {
	display: none;
}
.nexen-consenso-interno {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
}
.nexen-consenso-testo {
	flex: 1 1 420px;
	min-width: 0;
}
.nexen-consenso-testo p {
	margin: 0 0 6px;
}
.nexen-consenso-testo p:last-child {
	margin-bottom: 0;
}
.nexen-consenso-testo a,
.nexen-consenso-link-informativa {
	color: var( --nexen-consenso-colore, #1a1a1a );
}

/* ---------- pulsanti: Accetta e Rifiuta condividono LA STESSA classe ----------
 * R2: nessuna classe primario/secondario fra i due — differiscono solo per
 * il testo e per l'azione (data-nexen-azione). Preferenze può essere più
 * leggero: non è una scelta, è una porta (v. .nexen-consenso-link-preferenze). */

.nexen-consenso-azioni {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}
.nexen-consenso-btn-principale {
	appearance: none;
	font-family: inherit;
	background: #fff;
	border-radius: 999px;
	padding: 11px 22px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	border: 2px solid var( --nexen-consenso-colore, #1a1a1a );
	color: var( --nexen-consenso-colore, #1a1a1a );
	min-width: 150px;
	text-align: center;
	text-transform: none;
}
.nexen-consenso-btn-principale:hover,
.nexen-consenso-btn-principale:focus-visible {
	background: rgba(0, 0, 0, 0.05);
}
.nexen-consenso-btn-principale:focus-visible {
	outline: 3px solid #ffb703;
	outline-offset: 2px;
}

.nexen-consenso-link-preferenze,
.nexen-consenso-link-informativa {
	appearance: none;
	font-family: inherit;
	background: none;
	border: 0;
	padding: 8px 4px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}
.nexen-consenso-link-preferenze {
	color: var( --nexen-consenso-testo, #1a1a1a );
}
.nexen-consenso-link-preferenze:focus-visible,
.nexen-consenso-link-informativa:focus-visible {
	outline: 3px solid #ffb703;
	outline-offset: 2px;
}

@media (max-width: 640px) {
	/* ⚠ Lezione tenuta da un difetto reale trovato costruendo questo motore:
	 * `flex: 1 1 420px` fissa la base sull'ASSE PRINCIPALE, che in riga è la
	 * larghezza e in colonna diventa l'altezza. Sotto ai 640px il layout
	 * passa a colonna, e senza `flex-basis: auto` quel 420 si legge come
	 * "420px di altezza minima": il banner arriva a occupare oltre metà
	 * schermo di un telefono, quasi tutto bianco. La riga sotto è la
	 * correzione, non un'aggiunta cosmetica. */
	.nexen-consenso-interno {
		flex-direction: column;
		align-items: stretch;
	}
	.nexen-consenso-testo {
		flex-basis: auto;
	}
	.nexen-consenso-azioni {
		flex-direction: column;
		align-items: stretch;
	}
	.nexen-consenso-btn-principale,
	.nexen-consenso-link-preferenze {
		width: 100%;
	}
}

/* ---------- il pannello preferenze (e il pannello "zero cookie") ---------- */
/* Qui SÌ che c'è un fondo scurito: è un pannello che l'utente ha aperto
 * apposta (dal biscotto o da «Preferenze»), non un ostacolo davanti alla
 * pagina — R10 lo consente esplicitamente su questa parte sola. */

.nexen-consenso-modale[hidden] {
	display: none;
}
.nexen-consenso-modale {
	position: fixed;
	inset: 0;
	z-index: 99995;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
@media (min-width: 640px) {
	.nexen-consenso-modale {
		align-items: center;
	}
}
.nexen-consenso-modale-sfondo {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}
.nexen-consenso-modale-interno {
	position: relative;
	background: var( --nexen-consenso-fondo, #fff );
	width: 100%;
	max-width: 620px;
	max-height: 88vh;
	overflow-y: auto;
	border-radius: 12px 12px 0 0;
	padding: 24px max(24px, env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom));
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
}
@media (min-width: 640px) {
	.nexen-consenso-modale-interno {
		border-radius: 12px;
	}
}
.nexen-consenso-modale-testata {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 8px;
}
/* 0.1.3 — il titolo della finestra è un `<p>` con questa classe, non più un
   `<h2>`: stesso aspetto (peso e interlinea erano quelli di un `h2`). */
.nexen-consenso-modale-interno h2,
.nexen-consenso-modale-titolo {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}
.nexen-consenso-chiudi {
	appearance: none;
	background: none;
	border: 0;
	width: 44px;
	height: 44px;
	margin: -8px -8px 0 0;
	flex: 0 0 auto;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: var( --nexen-consenso-testo, #1a1a1a );
}
.nexen-consenso-chiudi:focus-visible {
	outline: 3px solid #ffb703;
	outline-offset: 2px;
}
/* R3: il testo obbligatorio su cosa succede chiudendo senza scegliere —
 * non configurabile, non si toglie da un'impostazione. */
.nexen-consenso-nota-chiusura {
	margin: 0 0 16px;
	font-size: 13px;
	color: var( --nexen-consenso-nota, #555 );
}

.nexen-consenso-categoria {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding: 14px 0;
}
.nexen-consenso-categoria:first-of-type {
	border-top: 0;
}
.nexen-consenso-categoria-testata {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.nexen-consenso-categoria-nome {
	font-weight: 700;
}
.nexen-consenso-categoria-testo {
	margin-top: 6px;
	font-size: 13.5px;
	color: var( --nexen-consenso-nota, #444 );
}
.nexen-consenso-categoria-testo p {
	margin: 0 0 6px;
}
.nexen-consenso-categoria-testo p:last-child {
	margin-bottom: 0;
}

.nexen-consenso-toggle-fisso {
	font-size: 12.5px;
	font-weight: 600;
	color: var( --nexen-consenso-nota, #666 );
	background: rgba(0, 0, 0, 0.06);
	padding: 4px 10px;
	border-radius: 999px;
}

/* interruttore */
.nexen-consenso-switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 26px;
	flex: 0 0 auto;
}
.nexen-consenso-input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}
.nexen-consenso-switch-corsa {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.25);
	border-radius: 999px;
	transition: background-color 0.15s ease;
	pointer-events: none;
}
.nexen-consenso-switch-corsa::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.15s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.nexen-consenso-input:checked + .nexen-consenso-switch-corsa {
	background: var( --nexen-consenso-colore, #1a1a1a );
}
.nexen-consenso-input:checked + .nexen-consenso-switch-corsa::before {
	transform: translateX(18px);
}
.nexen-consenso-input:focus-visible + .nexen-consenso-switch-corsa {
	outline: 3px solid #ffb703;
	outline-offset: 2px;
}

.nexen-consenso-link-policy {
	margin: 16px 0 0;
	font-size: 13.5px;
}
.nexen-consenso-link-policy a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var( --nexen-consenso-colore, #1a1a1a );
}

.nexen-consenso-stato-testo {
	font-size: 14px;
}
.nexen-consenso-stato-testo p {
	margin: 0 0 10px;
}

.nexen-consenso-modale .nexen-consenso-azioni {
	margin-top: 20px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding-top: 16px;
	justify-content: flex-end;
}
@media (max-width: 640px) {
	.nexen-consenso-modale .nexen-consenso-azioni {
		flex-direction: column-reverse;
		align-items: stretch;
	}
	.nexen-consenso-modale .nexen-consenso-btn-principale {
		width: 100%;
	}
}

/* ---------- il tasto per ripensarci — SOLO se il tema non dichiara un suo
   biscotto (add_theme_support('nexen-consenso-maniglia')): v. §9 della
   specifica. 42×42: soglia comoda per un tocco, non un vezzo estetico. ---------- */

.nexen-consenso-riapri {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 99980;
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 50%;
	border: 0;
	background: var( --nexen-consenso-colore, #1a1a1a );
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.nexen-consenso-riapri[hidden] {
	display: none;
}
.nexen-consenso-riapri:hover,
.nexen-consenso-riapri:focus-visible {
	filter: brightness(1.15);
}
.nexen-consenso-riapri:focus-visible {
	outline: 3px solid #ffb703;
	outline-offset: 2px;
}

/* ---------- segnaposto di un contenuto bloccato (video, mappa, audio, post) ----------
 * UN SOLO disegno per ogni servizio, uguale a quello che nexen-social mette sotto i video di
 * YouTube (assets/youtube.css, stesse misure): una striscia con la frase (15 px), «Guarda»
 * (44 px di altezza, almeno 88 di larghezza) e «Informativa» (44 px di altezza di tocco). */

.nexen-consenso-blocco {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 0;
	padding: 12px 16px;
	text-align: left;
	background: var( --nexen-consenso-blocco-fondo, #f5f3f0 );
	border: 0;
	border-top: 1px solid #e4e0db;
	color: var( --nexen-consenso-blocco-testo, #3a3631 );
}
.nexen-consenso-blocco p {
	flex: 1 1 260px;
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
}
.nexen-consenso-blocco .nexen-consenso-apri-preferenze,
.nexen-consenso-blocco .nexen-consenso-guarda {
	appearance: none;
	border: 0;
	border-radius: 8px;
	min-height: 44px;
	min-width: 88px;
	padding: 0 20px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	background: var( --nexen-consenso-guarda, var( --nexen-consenso-colore, #1a1a1a ) );
	color: #fff;
}
.nexen-consenso-blocco .nexen-consenso-apri-preferenze:hover,
.nexen-consenso-blocco .nexen-consenso-apri-preferenze:focus-visible,
.nexen-consenso-blocco .nexen-consenso-guarda:hover,
.nexen-consenso-blocco .nexen-consenso-guarda:focus-visible {
	filter: brightness( 0.82 );
}
.nexen-consenso-blocco .nexen-consenso-blocco-info {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 8px;
	font-size: 15px;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.nexen-consenso-servizi strong {
	color: inherit;
}

/* ---------- senza JavaScript: il testo che lo dice ---------- */

.nexen-consenso-nojs {
	margin: 8px 0 0;
	font-size: 13px;
	color: var( --nexen-consenso-nota, #555 );
}

@media (prefers-reduced-motion: reduce) {
	.nexen-consenso-switch-corsa,
	.nexen-consenso-switch-corsa::before,
	.nexen-consenso-btn-principale,
	.nexen-consenso-riapri {
		transition: none !important;
	}
}

@media (prefers-color-scheme: dark) {
	.nexen-consenso-banner,
	.nexen-consenso-modale-interno {
		background: #1c1c1e;
		color: #f2f2f2;
	}
	.nexen-consenso-banner,
	.nexen-consenso-modale,
	.nexen-consenso-blocco {
		color: #f2f2f2;
	}
	.nexen-consenso-btn-principale {
		background: #1c1c1e;
	}
	.nexen-consenso-btn-principale:hover,
	.nexen-consenso-btn-principale:focus-visible {
		background: rgba(255, 255, 255, 0.08);
	}
	.nexen-consenso-categoria-testo,
	.nexen-consenso-nota-chiusura,
	.nexen-consenso-nojs {
		color: #cfcfcf;
	}
	.nexen-consenso-blocco {
		background: #262626;
	}
	.nexen-consenso-toggle-fisso {
		background: rgba(255, 255, 255, 0.12);
		color: #ccc;
	}
	.nexen-consenso-chiudi {
		color: #f2f2f2;
	}
}

/* ---------- banner (a scelta e informativo): bersagli di tocco da 44 px ---------- */
.nexen-consenso-banner .nexen-consenso-link-preferenze,
.nexen-consenso-banner .nexen-consenso-link-informativa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}
.nexen-consenso-banner .nexen-consenso-btn-principale {
	min-height: 44px;
}

/* ---------- a telefono il banner (a scelta e informativo) e' compatto: tasti affiancati, collegamenti su una riga ---------- */
@media (max-width: 640px) {
	.nexen-consenso-banner {
		padding-top: 12px;
	}
	.nexen-consenso-banner .nexen-consenso-interno {
		gap: 8px;
	}
	.nexen-consenso-banner .nexen-consenso-testo p {
		font-size: 15px;
		line-height: 1.4;
	}
	.nexen-consenso-banner .nexen-consenso-azioni {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px 8px;
	}
	.nexen-consenso-banner .nexen-consenso-btn-principale {
		flex: 1 1 calc(50% - 4px);
		min-width: 0;
		width: auto;
		padding-left: 8px;
		padding-right: 8px;
	}
	.nexen-consenso-banner .nexen-consenso-link-preferenze,
	.nexen-consenso-banner .nexen-consenso-link-informativa {
		flex: 1 1 0;
		width: auto;
		padding: 0 4px;
		font-size: 15px;
		white-space: nowrap;
	}
}

/* ---------- banner informativo: pieno come «Entra», compatto a telefono ---------- */
.nexen-consenso-banner-info .nexen-consenso-btn-principale {
	background: var( --nexen-consenso-colore, #1a1a1a );
	color: #fff;
}
.nexen-consenso-banner-info .nexen-consenso-btn-principale:hover,
.nexen-consenso-banner-info .nexen-consenso-btn-principale:focus-visible {
	background: var( --nexen-consenso-colore, #1a1a1a );
	filter: brightness( 1.25 );
}
@media (max-width: 640px) {
	.nexen-consenso-banner-info {
		padding-top: 12px;
	}
	.nexen-consenso-banner-info .nexen-consenso-interno {
		gap: 8px;
	}
	.nexen-consenso-banner-info .nexen-consenso-testo p {
		font-size: 15px;
		line-height: 1.4;
	}
	.nexen-consenso-banner-info .nexen-consenso-azioni {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px 8px;
	}
	.nexen-consenso-banner-info .nexen-consenso-btn-principale {
		flex: 1 0 100%;
		width: 100%;
	}
	.nexen-consenso-banner-info .nexen-consenso-link-preferenze,
	.nexen-consenso-banner-info .nexen-consenso-link-informativa {
		flex: 1 1 0;
		width: auto;
		padding: 0 4px;
		font-size: 15px;
		white-space: nowrap;
	}
}

/* ---------- tabella dei cookie nel pannello: aria fra le colonne ---------- */
.nexen-consenso-modale .nexen-consenso-tabella-elenco {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0 0;
	font-size: 13.5px;
	text-align: left;
}
.nexen-consenso-modale .nexen-consenso-tabella-elenco th,
.nexen-consenso-modale .nexen-consenso-tabella-elenco td {
	padding: 8px 12px 8px 0;
	vertical-align: top;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	overflow-wrap: anywhere;
}
.nexen-consenso-modale .nexen-consenso-tabella-elenco th {
	font-weight: 700;
}

/* ---------- a telefono il testo del banner si legge TUTTO (19/10, banner a 375) ----------
 * Prima (0.1.4-0.1.5) il testo stava in un riquadro di quattro righe con `overflow-y:auto` e una sfumatura: a 375 il
 * riquadro era alto 84 px per 167 px di testo, meta' restava nascosto e l'ultima riga visibile usciva tagliata dai tasti.
 * Ora il riquadro cresce quanto il testo (niente max-height, niente scorrimento interno, niente maschera). Il testo e' piu'
 * corto: la frase sull'indirizzo IP sta nel paragrafo principale, e la durata della scelta (lo `<span>` del dettaglio) a
 * telefono si nasconde perche' resta intera nel pannello «Preferenze cookie». */
@media (max-width: 640px) {
	.nexen-consenso-banner .nexen-consenso-dettaglio {
		display: none;
	}
}

/* ---------- tabella dei cookie: a telefono ogni cookie è una scheda, mai parole spezzate a metà ---------- */
.nexen-consenso-modale .nexen-consenso-tabella-elenco th,
.nexen-consenso-modale .nexen-consenso-tabella-elenco td {
	overflow-wrap: break-word;
}
@media (max-width: 640px) {
	.nexen-consenso-modale .nexen-consenso-tabella-elenco thead {
		display: none;
	}
	.nexen-consenso-modale .nexen-consenso-tabella-elenco,
	.nexen-consenso-modale .nexen-consenso-tabella-elenco tbody,
	.nexen-consenso-modale .nexen-consenso-tabella-elenco tr {
		display: block;
	}
	.nexen-consenso-modale .nexen-consenso-tabella-elenco tr {
		padding: 10px 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}
	.nexen-consenso-modale .nexen-consenso-tabella-elenco td {
		display: block;
		padding: 2px 0;
		border: 0;
	}
	.nexen-consenso-modale .nexen-consenso-tabella-elenco td::before {
		content: attr(data-label) ": ";
		font-weight: 700;
	}
	.nexen-consenso-modale .nexen-consenso-tabella-elenco td:first-child {
		font-weight: 700;
	}
	.nexen-consenso-modale .nexen-consenso-tabella-elenco td:first-child::before {
		content: "";
	}
}

/* ---------- pannello a scelta: i tasti restano sempre in vista (non solo dopo aver scorso) ---------- */
@media (min-width: 641px) {
	.nexen-consenso-modale .nexen-consenso-azioni {
		position: sticky;
		bottom: calc(-24px - env(safe-area-inset-bottom));
		margin-bottom: calc(-24px - env(safe-area-inset-bottom));
		padding-bottom: calc(24px + env(safe-area-inset-bottom));
		background: var( --nexen-consenso-fondo, #fff );
	}
}

/* ---------- a telefono ogni testo del pannello è almeno a 15 px (soglia del sito) ---------- */
@media (max-width: 640px) {
	.nexen-consenso-modale .nexen-consenso-nota-chiusura,
	.nexen-consenso-modale .nexen-consenso-categoria-testo,
	.nexen-consenso-modale .nexen-consenso-categoria-testo p,
	.nexen-consenso-modale .nexen-consenso-toggle-fisso,
	.nexen-consenso-modale .nexen-consenso-stato-testo,
	.nexen-consenso-modale .nexen-consenso-link-policy,
	.nexen-consenso-modale .nexen-consenso-tabella-elenco,
	.nexen-consenso-modale .nexen-consenso-nojs {
		font-size: 15px;
	}
}

/* Mentre il banner e' aperto la pagina guadagna sotto lo spazio che il banner occupa: l'ultima riga resta raggiungibile. */
/* `html body`: un `body{padding:0}` di una pagina (registrazione, accedi) vinceva a parita' di peso. */
html body {
	padding-bottom: var( --nexen-consenso-altezza, 0px );
}

/* ---------- il messaggio del momento (dopo «Guarda» su un video): una riga, sopra la barra del tema ---------- */
.nexen-consenso-avviso {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc(var( --nexen-consenso-sopra, 0px ) + 12px);
	z-index: 99991;
	max-width: 640px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	padding: 12px 16px;
	border-radius: 12px;
	background: #1b1d1a;
	color: #fff;
	font-family: var( --nexen-consenso-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif );
	font-size: 15px;
	line-height: 1.4;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}
.nexen-consenso-avviso-tasto {
	appearance: none;
	background: none;
	border: 0;
	padding: 8px 4px;
	min-height: 44px;
	color: #fff;
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}
.nexen-consenso-avviso-tasto:focus-visible {
	outline: 3px solid #ffb703;
	outline-offset: 2px;
}
.nexen-consenso-modale .nexen-consenso-titolo-elenco {
	margin: 16px 0 0;
}

.nexen-consenso-banner:focus {
	outline: none;
}

/* ---------- Giro 5 (9/10): il banner e' IDENTICO su ogni pagina ----------
 * Le regole larghe di un tema (`body.pagina-testo p` 18 px / interlinea 29, `body.pagina-testo :focus-visible`
 * con doppio anello e angoli a 0) entravano nel banner solo sulle pagine di testo, informativa, accedi e localita':
 * a 1920 il testo era 15 px su home/registrazione e 18 px altrove (banner alto 123 contro 178 px). Qui le stesse
 * proprieta' si ridichiarano con `html body` davanti: piu' peso di qualunque `body.classe p` del tema, nessun !important. */
html body .nexen-consenso-banner .nexen-consenso-testo p {
	font-family: var( --nexen-consenso-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif );
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	color: inherit;
	text-wrap: wrap;
	font-variant-numeric: normal;
	margin: 0 0 6px;
}
html body .nexen-consenso-banner .nexen-consenso-testo p:last-child {
	margin-bottom: 0;
}
html body .nexen-consenso-banner .nexen-consenso-testo a {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}
@media (max-width: 640px) {
	html body .nexen-consenso-banner .nexen-consenso-testo p {
		line-height: 1.4;
	}
}
/* Il banner e' preso a fuoco da codice (tabindex): nessun anello del tema sul riquadro, l'ombra resta la sua. */
html body .nexen-consenso-banner,
html body .nexen-consenso-banner:focus,
html body .nexen-consenso-banner:focus-visible {
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.16);
	outline: none;
}
/* I tasti tengono il loro anello giallo (3 px, distanza 2) e le loro curve anche dove il tema ne disegna un altro:
 * giro 6 (G-2), `body.pagina-testo :focus-visible` vinceva sull'outline e dava grigio 2 px su 4 pagine di testo. */
html body .nexen-consenso-banner .nexen-consenso-btn-principale:focus-visible {
	outline: 3px solid #ffb703;
	outline-offset: 2px;
	box-shadow: none;
	border-radius: 999px;
}
html body .nexen-consenso-banner .nexen-consenso-link-preferenze:focus-visible,
html body .nexen-consenso-banner .nexen-consenso-link-informativa:focus-visible {
	outline: 3px solid #ffb703;
	outline-offset: 2px;
	box-shadow: none;
	border-radius: 0;
}


/* ---------- Giro 6 (G-1): telefono in orizzontale, il banner si abbassa ----------
 * Con 360-430 px di altezza il banner (183-206 px) piu' la testata (111) e la barra del tema (64) riempivano
 * tutto lo schermo: la tendina della ricerca restava di 18 px, 0 righe. In orizzontale basso il testo e' un
 * po' piu' stretto (13 px, interlinea 1,3), il testo sta su tutta la riga e i tasti sotto, in fila: il banner
 * resta uguale su tutte le pagine (stessa regola, stessi valori) ma ruba meno altezza. Tasti sempre a 44 px. */
@media (orientation: landscape) and (max-height: 430px) {
	html body .nexen-consenso-banner {
		padding: 8px max(12px, env(safe-area-inset-left)) calc(8px + var( --nexen-consenso-area, env(safe-area-inset-bottom) ));
	}
	html body .nexen-consenso-banner .nexen-consenso-interno {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px 12px;
	}
	html body .nexen-consenso-banner .nexen-consenso-testo {
		flex: 1 1 100%;
	}
	html body .nexen-consenso-banner .nexen-consenso-testo p,
	html body .nexen-consenso-banner.nexen-consenso-banner-info .nexen-consenso-testo p {
		font-size: 13px;
		line-height: 1.3;
		margin: 0 0 2px;
	}
	html body .nexen-consenso-banner .nexen-consenso-azioni {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-start;
		gap: 4px 10px;
		width: 100%;
	}
	html body .nexen-consenso-banner .nexen-consenso-btn-principale,
	html body .nexen-consenso-banner.nexen-consenso-banner-info .nexen-consenso-btn-principale {
		flex: 0 1 auto;
		width: auto;
		min-width: 0;
		padding: 8px 16px;
		font-size: 14px;
	}
	html body .nexen-consenso-banner .nexen-consenso-link-preferenze,
	html body .nexen-consenso-banner .nexen-consenso-link-informativa,
	html body .nexen-consenso-banner.nexen-consenso-banner-info .nexen-consenso-link-preferenze,
	html body .nexen-consenso-banner.nexen-consenso-banner-info .nexen-consenso-link-informativa {
		flex: 0 0 auto;
		width: auto;
		padding: 0 6px;
		font-size: 14px;
		white-space: nowrap;
	}
}

/* ---------- Giro 10 (9/10): a telefono i tasti del pannello restano in vista ----------
 * Con il pannello aperto a 390 px «Accetta tutti» stava a 2321 px dentro un riquadro alto 743: bisognava scorrere
 * ~1600 px per trovarlo (a 375x667 uguale). Lo stesso gancio che sopra vale da 641 px in su: ora vale anche sotto. */
@media (max-width: 640px) {
	.nexen-consenso-modale .nexen-consenso-azioni {
		position: sticky;
		bottom: calc(-24px - env(safe-area-inset-bottom));
		margin-bottom: calc(-24px - env(safe-area-inset-bottom));
		padding-bottom: calc(16px + env(safe-area-inset-bottom));
		gap: 8px;
		background: var( --nexen-consenso-fondo, #fff );
		z-index: 1;
	}
}

/* ---------- 14/10 (G6): tema scuro, i tasti si vedono ----------
 * Nel blocco scuro piu' su i tasti restavano col colore del sito (scuro) su fondo #1c1c1e: testo e bordo invisibili.
 * Qui, dopo tutte le regole chiare (stessa o piu' specificita'), i tasti prendono il chiaro #f2f2f2 su #1c1c1e (15:1);
 * il tasto pieno dell'informativo si inverte (#1c1c1e su #f2f2f2, 15:1). Collegamenti e fascia dei tasti del pannello idem. */
@media (prefers-color-scheme: dark) {
	.nexen-consenso-banner .nexen-consenso-btn-principale,
	.nexen-consenso-modale .nexen-consenso-btn-principale {
		background: #1c1c1e;
		color: #f2f2f2;
		border-color: #f2f2f2;
	}
	.nexen-consenso-banner .nexen-consenso-btn-principale:hover,
	.nexen-consenso-banner .nexen-consenso-btn-principale:focus-visible,
	.nexen-consenso-modale .nexen-consenso-btn-principale:hover,
	.nexen-consenso-modale .nexen-consenso-btn-principale:focus-visible {
		background: rgba(255, 255, 255, 0.14);
	}
	.nexen-consenso-banner.nexen-consenso-banner-info .nexen-consenso-btn-principale {
		background: #f2f2f2;
		color: #1c1c1e;
		border-color: #f2f2f2;
	}
	.nexen-consenso-banner.nexen-consenso-banner-info .nexen-consenso-btn-principale:hover,
	.nexen-consenso-banner.nexen-consenso-banner-info .nexen-consenso-btn-principale:focus-visible {
		background: #fff;
		filter: none;
	}
	.nexen-consenso-banner .nexen-consenso-link-preferenze,
	.nexen-consenso-banner .nexen-consenso-link-informativa,
	.nexen-consenso-banner .nexen-consenso-testo a,
	.nexen-consenso-modale .nexen-consenso-link-policy a {
		color: #f2f2f2;
	}
	.nexen-consenso-modale .nexen-consenso-azioni {
		background: #1c1c1e;
	}
}

/* ---------- 19/10: «Preferenze cookie» e «Informativa estesa» alti almeno 44 px anche sopra il foglio del tema ----------
 * Il tema di cimiteri.online li chiude a 36-38 px con `html body #nexen-consenso-banner ... { min-height: 38px !important }`
 * (A-020 / A-040, sistema-v2.css). Questo selettore ha un nome di classe in piu': a parita' di !important vince, in
 * qualunque ordine di caricamento. Accetta e Rifiuta restano identici (stessa classe, nessuna regola per uno solo). */
html body #nexen-consenso-banner .nexen-consenso-azioni .nexen-consenso-link-preferenze,
html body #nexen-consenso-banner .nexen-consenso-azioni .nexen-consenso-link-informativa {
	min-height: 44px !important;
}