/*
 * Bàner de cookies (Complianz) — retocs de marca.
 * Només toquem el que el plugin no deixa configurar des del seu panell.
 * La resta (colors, mides, textos) es configura a Complianz i es regenera
 * sol al fitxer /uploads/complianz/css/banner-1-optin.css.
 *
 * El CSS del plugin s'injecta després que el nostre, així que aquí guanyem
 * per especificitat (mai amb !important).
 */

/* El verd de "Sempre actiu" venia del verd per defecte del navegador.
   El passem al verd de la marca, que ja té el contrast validat. */
.cmplz-cookiebanner {
	--cmplz_category_header_always_active_color: #13612e;
}

/* Complianz amaga el títol per sota de 425 px. En mòbil el bàner queda
   com un bloc de text sense encapçalament i costa saber de què va,
   així que el tornem a mostrar. */
@media (max-width: 425px) {
	.cmplz-cookiebanner .cmplz-header .cmplz-title.cmplz-title {
		display: block;
	}
}

/*
 * Pàgina de la política de galetes.
 * Complianz la fixa a 800 px alineats a l'esquerra i a 14 px, cosa que
 * desquadra respecte de la resta de pàgines legals. Mantenim l'amplada
 * de lectura (que es llegeix millor que la caixa sencera) però la centrem
 * i li tornem la mida de text del lloc.
 * El CSS del plugin va amb #id, així que hi afegim `body` per guanyar.
 */
body #cmplz-document {
	max-width: 68ch;
	margin-inline: auto;
	font-size: inherit;
}

/*
 * Els interruptors de la secció «Gestiona la teva configuració de consentiment»
 * de la política (10/9/2026).
 *
 * Aquests controls són els de veritat: serveixen perquè qui hi arribi pugui
 * canviar el que va acceptar sense haver de tornar a obrir el bàner (retirar el
 * consentiment ha de ser tan fàcil com donar-lo). El JS de Complianz clona el
 * mateix HTML del bàner dins del document, però tot el seu CSS està lligat a
 * `.cmplz-cookiebanner`, així que fora del bàner es queden en caselles del
 * navegador, sense estil.
 *
 * Aquí els tornem la forma d'interruptor, reutilitzant les seves pròpies
 * variables perquè segueixin els colors de la marca sense duplicar-los.
 */
#cmplz-manage-consent-container .cmplz-banner-checkbox {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* La casella real: hi és i és clicable, però no es veu. */
#cmplz-manage-consent-container .cmplz-banner-checkbox input.cmplz-consent-checkbox {
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 15px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

#cmplz-manage-consent-container .cmplz-banner-checkbox .cmplz-label {
	position: relative;
	display: inline-block;
	height: 15px;
	width: 28px;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

/* El carril */
#cmplz-manage-consent-container .cmplz-banner-checkbox .cmplz-label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 15px;
	border-radius: 10px;
	background-color: var(--cmplz_slider_inactive_color, #8a8a8a);
	transition: background-color 0.3s;
}

/* La bola */
#cmplz-manage-consent-container .cmplz-banner-checkbox .cmplz-label::after {
	content: "";
	position: absolute;
	left: 2px;
	top: 2px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--cmplz_slider_bullet_color, #fff);
	transition: left 0.3s;
}

#cmplz-manage-consent-container .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::before {
	background-color: var(--cmplz_slider_active_color, #4c1b69);
}
#cmplz-manage-consent-container .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::after {
	left: 15px;
}
#cmplz-manage-consent-container .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus-visible + .cmplz-label::before {
	box-shadow: 0 0 0 2px var(--global-palette1, #4c1b69);
}

/* Les necessàries no es poden desactivar: al bàner no hi surt interruptor i
   aquí tampoc n'hi ha de sortir. Queda el text «Sempre actiu». */
#cmplz-manage-consent-container .cmplz-always-active .cmplz-banner-checkbox {
	display: none;
}