/**
 * El bàner de cookies: una pestanya just per sobre de la píndola de navegació.
 *
 * Fa servir els tokens del theme amb un valor de recanvi, perquè el plugin no
 * es trenqui si el theme canvia: tinta, superfície, radi 0.
 *
 * ⚠️⚠️ L'amplada i la posició COPIEN les de la píndola
 * (`themes/codina-theme/src/bottom-nav/style.css`): 328 px a partir de 768,
 * `100vw − 2 gutters` per sota, centrada, a `max(19px, zona segura)` del final
 * i 58 px d'alt. Les variables de la píndola viuen dins de `.bottom-nav` i des
 * d'aquí no es poden llegir. Si canvia l'amplada de la píndola, s'ha de canviar
 * aquí, o la pestanya deixarà de quadrar amb ella.
 *
 * ⚠️ Per sota del `z-index` de la navegació (100): quan s'obre el panell, tapa
 * la pestanya, i no al revés.
 */

.codina-consent {
	--codina-consent-width: 328px;

	/* Els 8 px entre la pestanya i la píndola (decisió de l'usuari). */
	--codina-consent-gap: 8px;

	position: fixed;
	z-index: 90;
	inset-inline-start: 50%;
	inset-block-end: calc(max(19px, env(safe-area-inset-bottom, 0px)) + 58px + var(--codina-consent-gap));
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	inline-size: var(--codina-consent-width);
	max-block-size: calc(100svh - 58px - 19px - var(--codina-consent-gap) - 1rem);
	overflow-y: auto;
	padding: 1.5rem;
	font-size: var(--wp--preset--font-size--body, 1rem);
	font-weight: 300;
	line-height: var(--wp--custom--line-height--tagline, 1.25);
	color: var(--codina-ink, #000);
	background-color: var(--codina-surface, #fff);
	border-radius: 0;
	opacity: 0;

	/* Centrada com la píndola, i amb l'entrada de 1 rem cap amunt. */
	transform: translate(-50%, 1rem);
	transition:
		opacity var(--wp--custom--duration--base, 0.4s) cubic-bezier(0.625, 0.05, 0, 1),
		transform var(--wp--custom--duration--base, 0.4s) cubic-bezier(0.625, 0.05, 0, 1);
}

@media (max-width: 767px) {

	.codina-consent {
		--codina-consent-width: calc(100vw - (var(--wp--custom--gutter, 1rem) * 2));
	}
}

.codina-consent.is-open {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* La sortida, més curta i sense arrencada lenta (CLAUDE.md, fase 36). */
.codina-consent.is-closing {
	transition-duration: 0.25s;
	transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

/*
 * L'atribut `hidden` ha de guanyar sempre: l'embolcall de `codina/button` porta
 * `display: flex`, que li passaria per davant.
 */
.codina-consent[hidden],
.codina-consent [hidden] {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * La vora discontínua
 *
 * Un <rect> d'SVG sense `viewBox` (una unitat, un píxel CSS) amb el ritme de
 * la marca, 4 px de traç i 6 de buit, com `codina/dashed-card` i l'anell de
 * `codina/button`. `border: dashed` no deixa triar el ritme. El `pathLength`
 * el posa consent.js perquè el patró tanqui sense cap guió tallat.
 * ---------------------------------------------------------------------- */

/*
 * `inset: 0.5px` i no 0: la pestanya porta `overflow-y: auto` (per a pantalles
 * molt baixes), que retalla el que sobresurt. Amb 0, el traç d'1 px quedaria a
 * cavall de la vora i se'n perdria la meitat de fora; així cau sencer a dins.
 */
.codina-consent__ring {
	position: absolute;
	inset: 0.5px;
	color: var(--codina-ink, #000);
	pointer-events: none;
}

.codina-consent__ring svg {
	display: block;

	/* El traç d'1 px queda a cavall de la vora: sense això en perdria la meitat. */
	overflow: visible;
}

.codina-consent__ring rect {
	fill: none;
	stroke: currentcolor;
	stroke-width: 1;
	stroke-dasharray: 4 6;
}

.codina-consent__text {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Les categories
 * ---------------------------------------------------------------------- */

.codina-consent__prefs {
	display: grid;
	gap: 1rem;
	min-inline-size: 0;
	margin: 0;
	padding: 1.25rem 0 0;
	border: 0;
	border-block-start: 1px solid var(--codina-ink-10, rgba(0, 0, 0, 0.1));
}

.codina-consent__category {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	cursor: pointer;
}

.codina-consent__category strong {
	display: block;
	font-weight: 600;
}

.codina-consent__category input {
	flex: none;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin: 0;
	accent-color: var(--codina-ink, #000);
	cursor: pointer;
}

.codina-consent__category input:disabled {
	cursor: default;
}

/* -------------------------------------------------------------------------
 * Les accions: rebutjar · configurar (o desar la tria) · [acceptar]
 * ---------------------------------------------------------------------- */

.codina-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	align-items: center;
}

/*
 * «acceptar», a la dreta: quadra amb la vora dreta de la pestanya i, per tant,
 * amb la de la píndola. L'anell del botó sobresurt 3,5 px; el farciment de la
 * pestanya ja el conté.
 */
.codina-consent__accept,
button.codina-consent__button {
	margin-inline-start: auto;
}

/* `codina/button` dins d'un <button>: fora els estils del navegador. */
.codina-consent button.codina-button,
.codina-consent__link {
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: 0;
	appearance: none;
}

/*
 * Rebutjar, configurar i desar la tria: text que es prem.
 *
 * ⚠️ Rebutjar ha de ser tan visible com acceptar (AEPD, EDPB): tinta plena,
 * Semibold, la mateixa mida de lletra que el botó i 44 px d'àrea de toc. No
 * se li ha de baixar el contrast ni la mida.
 */
.codina-consent__link {
	min-block-size: 2.75rem;
	font-size: var(--wp--preset--font-size--body, 1rem);
	font-weight: 600;
	color: var(--codina-ink, #000);
	transition: transform var(--wp--custom--duration--press, 0.16s) cubic-bezier(0.23, 1, 0.32, 1);
}

.codina-consent__link:active {
	transform: scale(0.97);
}

/* Sense el theme: un botó negre pla. */
button.codina-consent__button {
	padding: 0.75rem 1rem;
	font: inherit;
	font-weight: 600;
	color: var(--codina-surface, #fff);
	cursor: pointer;
	background: var(--codina-ink, #000);
	border: 0;
	border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {

	.codina-consent,
	.codina-consent.is-open {
		transform: translate(-50%, 0);
		transition-property: opacity;
		transition-duration: 0.15s;
	}

	.codina-consent__link:active {
		transform: none;
	}
}