/* =========================================================================
   Informativa cookie — barra, linguetta e informativa estesa
   =========================================================================
   Il markup non cambia: e' quello che genera il framework, con gli stessi
   collegamenti di sempre (Accetta, Rifiuta, Personalizza, Informativa
   completa) e le stesse funzioni appese a onclick. Qui cambia solo come si
   presenta.

   La fascia e' larga quanto lo schermo ma non ci sta appiccicata: galleggia a
   quattordici pixel dai bordi, con gli angoli tondi e un'ombra sotto. E'
   sospesa, quindi si legge come una cosa che sta davanti e che se ne andra' —
   non come un pezzo di pagina inchiodato in fondo.

   Dentro non si spreca larghezza: il testo occupa quello che c'e', i comandi
   stanno in coda, e in mezzo non resta un buco. Prima i collegamenti erano
   impilati a destra dentro un riquadro largo 140 pixel qualunque cosa ci
   finisse dentro, e il contenuto si fermava a 1180: su uno schermo largo
   restavano trecento pixel di fascia vuota per lato.

   Il DOM ha i comandi PRIMA del testo. Non si tocca: l'ordine visivo lo
   rimette a posto il flex, che li manda a destra senza spostare una riga di
   HTML.
   ========================================================================= */

#eps_cookie_info,
#eps_cookie_smart_link,
div.eps_popup_cookie_full {
	/* Un posto solo per colori e misure: un layout che voglia vestire la
	   barra cambia queste, non venti regole sparse. */
	--eps-ck-accent: #e25600;
	--eps-ck-accent-scuro: #c44a00;
	--eps-ck-accent-testo: #ffffff;
	--eps-ck-superficie: #ffffff;
	--eps-ck-testo: #16161a;
	--eps-ck-testo-tenue: #5d5c66;
	/* Il filo segue il colore del testo: su una barra vestita di scuro da un
	   layout diventa una riga chiara invece di sparire nel nero. La riga
	   piena resta come ripiego dove color-mix non si conosce. */
	--eps-ck-filo: rgba(20, 20, 32, .13);
	--eps-ck-filo: color-mix(in srgb, currentColor 14%, transparent);
	--eps-ck-filo-forte: rgba(20, 20, 32, .26);
	--eps-ck-filo-forte: color-mix(in srgb, currentColor 30%, transparent);
	/* Il filo della fascia non e' grigio ma appena arancione: su un sito
	   bianco — che e' quasi sempre — un contorno neutro si confonde col
	   bordo della pagina, e la fascia sembra un pezzo di sfondo. */
	--eps-ck-filo-caldo: rgba(226, 86, 0, .22);
	--eps-ck-filo-caldo: color-mix(in srgb, var(--eps-ck-accent) 24%, transparent);
	--eps-ck-raggio: 16px;
	/* Sospesa: l'ombra sta tutt'attorno e piu' fitta sotto, come sotto una
	   cosa che galleggia. In fondo un velo caldo, cosi' anche l'ombra dice che
	   la fascia e' di casa. */
	--eps-ck-ombra: 0 18px 48px rgba(10, 10, 18, .28), 0 2px 8px rgba(10, 10, 18, .14), 0 10px 26px rgba(226, 86, 0, .10);
	--eps-ck-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* -------------------------------------------------------------------------
   La barra
   ------------------------------------------------------------------------- */
#eps_cookie_info {
	position: fixed;
	left: 14px;
	right: 14px;
	bottom: 14px;
	bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	width: auto;
	z-index: 20000000000;

	/* Vetro fumé invece di una tinta piena: sotto si intravede la pagina, e la
	   fascia pesa meno di quanto sia grande. La tinta piena resta come ripiego
	   dove color-mix o la sfocatura non si conoscono — li' e' solo una fascia
	   opaca, che va benissimo lo stesso. */
	background-color: var(--eps-ck-superficie);
	background-color: color-mix(in srgb, var(--eps-ck-superficie) 88%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	color: var(--eps-ck-testo);
	border-radius: var(--eps-ck-raggio);

	font-family: var(--eps-ck-font);
	font-size: 13.5px;
	line-height: 1.45;
	text-align: left;

	animation: eps-ck-entra 340ms cubic-bezier(.2, .75, .3, 1) both;
}
#eps_cookie_info,
#eps_cookie_info * {
	box-sizing: border-box;
}

/*
 * Il filo e l'ombra si difendono.
 *
 * Diversi layout vestono la barra a mano, e va bene: il colore e' una scelta
 * loro, e la fascia lo prende volentieri. Quel che non deve sopravvivere e'
 * come lo disegnavano: un filo bianco pieno e un alone bianco tutt'attorno,
 * che a schermo diventano una riga dura e un bagliore. Restano un filo che
 * segue il colore del testo e un'ombra che sale dalla fascia. Bastano due
 * parole in piu' nel selettore per arrivare dopo di loro.
 */
html body #eps_cookie_info {
	border: 1px solid var(--eps-ck-filo-caldo);
	box-shadow: var(--eps-ck-ombra);
}

/*
 * La riga d'accento in cima.
 *
 * Tre pixel d'arancione lungo il bordo alto: e' il segno che stacca la fascia
 * dal bianco della pagina senza doverla colorare tutta. Sta dentro il taglio
 * degli angoli — la fascia ritaglia quel che le esce — cosi' segue la curva
 * invece di sporgere ai lati. E' decorazione, e infatti non intercetta il
 * puntatore: sotto ci passa il contenuto, non lei.
 */
#eps_cookie_info { overflow: hidden; }
#eps_cookie_info::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background-image: linear-gradient(90deg,
		var(--eps-ck-accent) 0%,
		#ff8a3d 45%,
		var(--eps-ck-accent) 100%);
	pointer-events: none;
	z-index: 1;
}

/* Sale dal bordo invece di comparire: e' la stessa distanza che percorre un
   pannello di sistema, e dice da dove viene. */
@keyframes eps-ck-entra {
	from { opacity: 0; transform: translateY(calc(100% + 14px)); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	#eps_cookie_info { animation: none; }
}

#eps_cookie_info div.eps_cookie_wrapper {
	position: relative;
	/* Il testo a sinistra, i comandi a destra, e niente incolonnamento al
	   centro: la fascia e' gia' stretta dai suoi margini, e stringerla ancora
	   dentro lascerebbe solo vuoto ai lati. */
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	padding: 16px 18px 15px;
}
/* La croce, dove il framework la stampa, si prende l'angolo: il testo le fa
   posto invece di passarci sotto. */
#eps_cookie_info div.eps_cookie_wrapper:has(> a.rifiuta) {
	padding-right: 54px;
}

/* -------------------------------------------------------------------------
   Il testo
   ------------------------------------------------------------------------- */
#eps_cookie_info .testo {
	order: 1;
	flex: 1 1 auto;
	min-width: 0;
	/* Nessun tetto alla larghezza: il testo prende tutto lo spazio fino ai
	   comandi, che restano appoggiati al bordo destro. Con un tetto le righe
	   si fermavano a meta' fascia e il resto restava vuoto — e su una riga in
	   meno di testo la fascia si alza anche di venti pixel, che e' il modo
	   piu' semplice di darle meno peso. */
	padding-right: 0;
	color: var(--eps-ck-testo-tenue);
}
/* Il primo grassetto e' il titolo dell'informativa, non un'enfasi in mezzo a
   una frase: diventa una riga sua, e si legge come un titolo. */
#eps_cookie_info .testo > b:first-child {
	display: block;
	margin-bottom: 1px;
	color: inherit;
	font-size: 15px;
	font-weight: 650;
	letter-spacing: -.01em;
}
#eps_cookie_info .testo > b:first-child::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 8px;
	border-radius: 50%;
	background-color: var(--eps-ck-accent);
	vertical-align: 1px;
}
#eps_cookie_info b,
#eps_popup_cookie_full b {
	font-weight: 650;
	color: inherit;
}
#eps_cookie_info .testo > b:first-child {
	color: var(--eps-ck-testo);
}
#eps_cookie_info i,
#eps_popup_cookie_full i {
	font-style: italic;
}
/* Il richiamo di legge e' una nota, non un inciso: riga propria, corpo
   minore, e niente corsivo — a undici pixel il corsivo si legge peggio e non
   aggiunge niente. */
#eps_cookie_info .small,
#eps_popup_cookie_full .small {
	display: block;
	margin: 0 0 7px;
	font-size: 11px;
	font-style: normal;
	line-height: 1.45;
	color: var(--eps-ck-testo-tenue);
	vertical-align: baseline;
}

#eps_cookie_info a,
#eps_popup_cookie_full a,
#eps_cookie_full_info a {
	color: var(--eps-ck-accent);
}
#eps_cookie_info .testo a,
#eps_popup_cookie_full .testo a {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
#eps_cookie_info a:hover,
#eps_popup_cookie_full a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   I comandi
   -------------------------------------------------------------------------
   Tre collegamenti, tre pesi diversi: la scelta consigliata piena, l'altra in
   punta di filo, e «Personalizza» in fondo alla riga — e' una terza strada,
   non una terza scelta alla pari. */
#eps_cookie_info .confermo {
	order: 2;
	float: none;
	flex: none;
	width: auto;
	padding-bottom: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	text-align: left;
	z-index: 10;
}
#eps_cookie_info .confermo a.cookie_read,
#eps_cookie_info .confermo a.cookie_full {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 38px;
	margin: 0;
	padding: 0 17px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 120ms ease;
}
#eps_cookie_info .confermo a.cookie_read:active,
#eps_cookie_info .confermo a.cookie_full:active {
	transform: translateY(1px);
}

/* Accetta */
#eps_cookie_info .confermo a.cookie_read:first-child {
	background-color: var(--eps-ck-accent);
	border-color: var(--eps-ck-accent);
	color: var(--eps-ck-accent-testo);
	box-shadow: 0 1px 2px rgba(12, 12, 20, .18);
}
#eps_cookie_info .confermo a.cookie_read:first-child:hover {
	background-color: var(--eps-ck-accent-scuro);
	border-color: var(--eps-ck-accent-scuro);
	color: var(--eps-ck-accent-testo);
	text-decoration: none;
}

/* Rifiuta: stessa forma e stesso peso della prima, senza il pieno. Rifiutare
   dev'essere facile quanto accettare — e visibile allo stesso modo. */
#eps_cookie_info .confermo a.cookie_read + a.cookie_read {
	background-color: transparent;
	border-color: var(--eps-ck-filo-forte);
	color: inherit;
}
#eps_cookie_info .confermo a.cookie_read + a.cookie_read:hover {
	background-color: var(--eps-ck-filo);
	text-decoration: none;
}

/* Personalizza */
#eps_cookie_info .confermo a.cookie_full {
	padding: 0 8px;
	background: none;
	color: var(--eps-ck-testo-tenue);
	font-weight: 550;
	text-decoration: underline;
	text-underline-offset: 3px;
}
#eps_cookie_info .confermo a.cookie_full:hover {
	color: var(--eps-ck-accent);
}

/* La croce di chiusura, dove c'e': dentro la scheda, non appesa al bordo di
   sopra come una linguetta. */
#eps_cookie_info a.rifiuta {
	display: block;
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	padding: 0;
	background-color: transparent;
	border: 1px solid var(--eps-ck-filo);
	border-radius: 50%;
	color: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 28px;
	text-align: center;
	text-decoration: none;
	opacity: .6;
	transition: opacity 180ms ease, background-color 180ms ease;
}
#eps_cookie_info a.rifiuta:hover {
	background-color: var(--eps-ck-filo);
	opacity: 1;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   La linguetta che resta dopo la scelta
   ------------------------------------------------------------------------- */
/* Serve per far posizionare eps_cookie_smart_link in fondo alla pagina per
   davvero: senza, al "bottom:0" del body si piazza in fondo al primo scroll. */
html {
	position: relative;
	min-height: 100%;
	height: auto;
}
div#eps_cookie_smart_link {
	position: absolute;
	right: 12px;
	bottom: 12px;
	min-width: 0;
	/* Un vetro del colore della superficie: sul chiaro e' bianco velato, sul
	   scuro e' scuro velato, e in tutti e due i casi si vede che sotto c'e'
	   la pagina. */
	background-color: rgba(255, 255, 255, .92);
	background-color: color-mix(in srgb, var(--eps-ck-superficie) 92%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid var(--eps-ck-filo-caldo);
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(12, 12, 20, .14);
	color: var(--eps-ck-testo-tenue);
	font-family: var(--eps-ck-font);
	font-size: 11.5px;
	line-height: 1.2;
	text-align: right;
	white-space: nowrap;
	z-index: 111111;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	/* IE10+ */
	#eps_cookie_smart_link { position: fixed; }
}
#eps_cookie_smart_link div.eps_cookie_wrapper {
	height: auto;
	padding: 7px 30px 7px 14px;
	font-family: var(--eps-ck-font);
}
#eps_cookie_smart_link div.eps_cookie_wrapper,
#eps_cookie_smart_link a {
	font-size: 11.5px;
	font-weight: 500;
}
#eps_cookie_smart_link a.close {
	display: block;
	position: absolute;
	top: 50%;
	right: 8px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	padding: 0;
	border-radius: 50%;
	color: var(--eps-ck-testo);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
	opacity: .55;
}
#eps_cookie_smart_link a.close:hover {
	background-color: var(--eps-ck-filo);
	opacity: 1;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   L'informativa estesa
   -------------------------------------------------------------------------
   Il velo era nero pieno all'80%: a schermo diventava una tenda, e la finestra
   dietro spariva del tutto. Adesso e' un vetro scuro — si vede che c'e' una
   pagina sotto, e che aspetta. */
div.eps_popup_cookie_full_container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(10, 10, 16, .62);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	z-index: 100000;
}
div.eps_popup_cookie_full {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 880px;
	max-width: calc(100% - 32px);
	max-height: 86vh;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background-color: var(--eps-ck-superficie);
	color: var(--eps-ck-testo);
	border-radius: 18px;
	box-shadow: var(--eps-ck-ombra);
	font-family: var(--eps-ck-font);
	font-size: 14px;
	line-height: 1.55;
	z-index: 200000;
}
#eps_popup_cookie_full,
#eps_popup_cookie_full * {
	box-sizing: border-box;
}
/* Due identificativi per arrivare dopo lo stile che il framework spedisce
   insieme al contenuto. */
#eps_popup_cookie_full #eps_cookie_full_info {
	padding: 26px 28px 30px;
}
#eps_popup_cookie_full #eps_cookie_full_info > b:first-child {
	display: block;
	position: relative;
	margin-bottom: 2px;
	padding-left: 15px;
	font-size: 19px;
	font-weight: 650;
	letter-spacing: -.015em;
}
/* Lo stesso segno della fascia, un piano piu' su: qui e' una barretta,
   perche' accanto a un titolo di diciannove pixel un punto sparirebbe. */
#eps_popup_cookie_full #eps_cookie_full_info > b:first-child::before {
	content: "";
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 0;
	width: 4px;
	border-radius: 999px;
	background-color: var(--eps-ck-accent);
}
#eps_popup_cookie_full p {
	margin: 0 0 12px;
	color: var(--eps-ck-testo-tenue);
}

#eps_popup_cookie_full table.eps_cookie_full_info {
	width: 100%;
	margin: 6px 0 4px;
	border: 1px solid var(--eps-ck-filo-forte);
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 13px;
}
#eps_popup_cookie_full table.eps_cookie_full_info th,
#eps_popup_cookie_full table.eps_cookie_full_info td {
	padding: 11px 13px;
	border: 0;
	border-top: 1px solid var(--eps-ck-filo);
	vertical-align: middle;
	text-align: left;
}
#eps_popup_cookie_full table.eps_cookie_full_info tr:first-child th,
#eps_popup_cookie_full table.eps_cookie_full_info tr:first-child td {
	border-top: 0;
}
#eps_popup_cookie_full table.eps_cookie_full_info th {
	background-color: rgba(20, 20, 32, .04);
	background-color: color-mix(in srgb, currentColor 6%, transparent);
	font-weight: 650;
	font-size: 11.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--eps-ck-testo-tenue);
}

/* Gli interruttori del consenso, uno per tipologia. Il colore di quello
   scelto lo mette il codice del framework con uno stile in riga: qui si da'
   loro la forma, che e' quel che si puo' dare senza toccarlo. */
#eps_cookie_full_info .cookie_set {
	display: inline-block;
	min-width: 86px;
	margin: 4px 6px 4px 0;
	padding: 7px 14px;
	border: 1px solid var(--eps-ck-filo-forte);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color 180ms ease, border-color 180ms ease;
}
#eps_cookie_full_info .cookie_set:hover {
	background-color: color-mix(in srgb, currentColor 10%, transparent) !important;
	border-color: var(--eps-ck-accent);
}

/* -------------------------------------------------------------------------
   Schermi stretti
   -------------------------------------------------------------------------
   La scheda si allarga da bordo a bordo e i due comandi principali si
   dividono la riga a meta': su un telefono si preme con il pollice, e due
   bersagli larghi mezzo schermo sono piu' onesti di due pastiglie in mezzo. */
@media (max-width: 900px) {
	/* Su una riga sola non ci starebbero: il testo sopra, i comandi sotto. */
	#eps_cookie_info {
		left: 10px;
		right: 10px;
		bottom: 10px;
		bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	}
	#eps_cookie_info div.eps_cookie_wrapper {
		flex-direction: column;
		align-items: stretch;
		gap: 13px;
		padding: 15px 15px;
	}
	@supports (padding: env(safe-area-inset-bottom)) {
		#eps_cookie_info div.eps_cookie_wrapper { padding-bottom: 15px; }
	}
	#eps_cookie_info .testo {
		max-width: none;
	}
	#eps_cookie_info .confermo {
		justify-content: flex-start;
	}
}

@media (max-width: 607px) {
	/*
	 * Da telefono la fascia smette di galleggiare.
	 *
	 * Sospesa costava tre volte: i margini ai lati, gli angoli tondi e l'ombra
	 * tutt'attorno la facevano sembrare piu' grande di quello che e', e su uno
	 * schermo alto e stretto ogni pixel che si prende e' un pixel di sito che
	 * non si vede. Qui va incollata al fondo, da bordo a bordo, senza contorno:
	 * resta la riga d'accento in cima, che basta a dire dove comincia.
	 *
	 * Il fondo lo tocca davvero: l'incavo per la barra di sistema — la tacca
	 * in basso degli iPhone — se lo prende il contenuto come spazio interno,
	 * cosi' la superficie arriva al bordo e le parole restano leggibili.
	 */
	#eps_cookie_info {
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 0;
	}
	html body #eps_cookie_info {
		border: 0;
		box-shadow: 0 -10px 30px rgba(10, 10, 18, .20), 0 -8px 20px rgba(226, 86, 0, .07);
	}
	/* Il richiamo di legge sta attaccato al testo che introduce: sono la
	   stessa cosa, e su una colonna stretta ogni stacco in piu' allunga la
	   fascia di una riga vuota. */
	#eps_cookie_info .small {
		margin-bottom: 0;
		font-size: 10.5px;
	}
	/*
	 * Il corpo scende di un punto.
	 *
	 * Le parole sono quelle che sono e non si toccano: su una colonna da 375
	 * pixel diventano sei righe, e sei righe piu' il titolo piu' i comandi
	 * facevano una fascia alta mezzo schermo. Un punto in meno ne toglie due,
	 * e il testo resta della misura con cui si scrivono le note in fondo a
	 * qualsiasi modulo.
	 */
	#eps_cookie_info {
		font-size: 12.5px;
		line-height: 1.42;
	}
	#eps_cookie_info .testo > b:first-child {
		font-size: 14.5px;
	}

	#eps_cookie_info div.eps_cookie_wrapper:has(> a.rifiuta) {
		padding-right: 16px;
		padding-top: 44px;
	}
	#eps_cookie_info .testo {
		padding-right: 0;
		padding-bottom: 0;
	}
	#eps_cookie_info div.eps_cookie_wrapper {
		gap: 10px;
		padding: 12px 14px;
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}
	/* Due bersagli larghi mezzo schermo: sul telefono si preme col pollice, e
	   due pastiglie strette in mezzo alla riga sono un invito a sbagliare. */
	#eps_cookie_info .confermo {
		position: static;
		float: none;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		width: auto;
		padding-bottom: 0;
		line-height: normal;
	}
	#eps_cookie_info .confermo a.cookie_read,
	#eps_cookie_info .confermo a.cookie_full {
		display: inline-flex;
		margin: 0;
		padding: 0 12px;
		/* Quarantadue: il minimo sotto cui un bersaglio da pollice comincia a
		   far sbagliare. Sotto questa soglia non si scende per guadagnare
		   qualche pixel di fascia. */
		min-height: 42px;
		font-size: 13.5px;
	}
	#eps_cookie_info .confermo a.cookie_full {
		grid-column: 1 / -1;
		min-height: 32px;
		margin-left: 0;
		font-size: 12.5px;
	}

	div.eps_popup_cookie_full {
		width: auto;
		left: 10px;
		right: 10px;
		max-width: none;
		max-height: 88vh;
		transform: translateY(-50%);
		border-radius: 16px;
	}
	#eps_popup_cookie_full #eps_cookie_full_info {
		padding: 20px 16px 24px;
	}
	#eps_popup_cookie_full table.eps_cookie_full_info th,
	#eps_popup_cookie_full table.eps_cookie_full_info td {
		padding: 9px 10px;
	}
}

@media (max-width: 380px) {
	#eps_cookie_info {
		font-size: 13.5px;
	}
	#eps_cookie_info .testo > b:first-child {
		font-size: 15px;
	}
}