/**
 * Banner di consenso ai cookie — DAU Design Arredo Ufficio.
 *
 * Palette e carattere sono quelli del sito: #212121 sul bianco, grigio #ececec
 * per i bordi, expresswayregular come tutto il resto.
 * Mobile first: la finestra parte a tutta larghezza in basso e da 600px in su
 * diventa un riquadro centrato.
 */

:root {
	--dau-consent-testo: #212121;
	--dau-consent-testo-tenue: #666666;
	--dau-consent-sfondo: #ffffff;
	--dau-consent-bordo: #ececec;
	--dau-consent-spazio: 20px;
}

.dau-consent {
	position: fixed;
	z-index: 99999;
	right: 0;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	max-height: 90vh;
	overflow-y: auto;
	padding: var(--dau-consent-spazio);
	border-top: 3px solid var(--dau-consent-testo);
	background: var(--dau-consent-sfondo);
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
	color: var(--dau-consent-testo);
	font-family: "expresswayregular", sans-serif;
	font-size: 15px;
	line-height: 1.55;
}

.dau-consent *,
.dau-consent *::before,
.dau-consent *::after {
	box-sizing: border-box;
}

.dau-consent h2 {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.dau-consent p {
	margin: 0 0 var(--dau-consent-spazio);
}

.dau-consent a {
	color: var(--dau-consent-testo);
	text-decoration: underline;
}

.dau-consent a:hover,
.dau-consent a:focus {
	text-decoration: none;
}

/* --- Bottoni --------------------------------------------------------------
   "Accetta" e "Rifiuta" hanno lo stesso identico peso visivo: il Garante
   chiede che rifiutare non sia più faticoso che accettare. Non è una scelta
   estetica, è un requisito. Non modificarne uno solo. */

.dau-consent__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.dau-consent__btn {
	flex: 1 1 100%;
	padding: 13px 22px;
	border: 2px solid var(--dau-consent-testo);
	border-radius: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.dau-consent__btn--primario {
	background: var(--dau-consent-testo);
	color: var(--dau-consent-sfondo);
}

.dau-consent__btn--primario:hover {
	background: var(--dau-consent-sfondo);
	color: var(--dau-consent-testo);
}

.dau-consent__btn--secondario {
	background: var(--dau-consent-sfondo);
	color: var(--dau-consent-testo);
}

.dau-consent__btn--secondario:hover {
	background: var(--dau-consent-bordo);
}

/* Contorno di messa a fuoco sempre visibile: chi naviga da tastiera deve
   sapere dove si trova. Non rimuoverlo. */
.dau-consent__btn:focus-visible,
.dau-consent input:focus-visible,
.dau-consent a:focus-visible {
	outline: 3px solid var(--dau-consent-testo);
	outline-offset: 2px;
}

/* --- Pannello delle preferenze ------------------------------------------- */

.dau-consent__categoria {
	padding: 14px 0;
	border-bottom: 1px solid var(--dau-consent-bordo);
}

.dau-consent__riga {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-weight: bold;
}

.dau-consent__riga input[type="checkbox"] {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	accent-color: var(--dau-consent-testo);
	cursor: pointer;
}

.dau-consent__riga input[type="checkbox"]:disabled {
	cursor: not-allowed;
}

.dau-consent__nome em {
	font-style: normal;
	font-weight: normal;
	color: var(--dau-consent-testo-tenue);
}

.dau-consent__descrizione {
	margin: 8px 0 0 30px;
	color: var(--dau-consent-testo-tenue);
	font-size: 14px;
}

.dau-consent__pannello .dau-consent__azioni {
	margin-top: var(--dau-consent-spazio);
}

.dau-consent__note {
	margin: 14px 0 0;
	color: var(--dau-consent-testo-tenue);
	font-size: 13px;
}

/* --- Link "Preferenze cookie" nel footer ---------------------------------- */

.dau-preferenze-cookie {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.dau-preferenze-cookie:hover,
.dau-preferenze-cookie:focus {
	text-decoration: none;
}

/* --- Da tablet in su ------------------------------------------------------ */

@media (min-width: 600px) {
	.dau-consent {
		right: auto;
		left: 50%;
		bottom: 24px;
		width: 620px;
		max-width: calc(100% - 48px);
		transform: translateX(-50%);
		padding: 28px;
		border: 3px solid var(--dau-consent-testo);
	}

	.dau-consent__btn {
		flex: 0 1 auto;
	}
}

/* Chi ha chiesto meno animazioni non le riceve. */
@media (prefers-reduced-motion: reduce) {
	.dau-consent__btn {
		transition: none;
	}
}