/* ---------------------------------------------------------
   KAKSAMTYCKE

   En smal list längst ned, inte en overlay. Den som just har
   förlorat någon ska kunna läsa sidan utan att först behöva
   besvara en fråga om kakor.

   Listen ligger över innehållet men blockerar det inte, och
   sidan går att scrolla och klicka i som vanligt.
   --------------------------------------------------------- */
.ca-samtycke {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 60;
	background: var(--ca-vit);
	border-top: 3px solid var(--ca-bla);
	box-shadow: 0 -6px 24px rgba(35, 38, 45, 0.12);
}

.ca-samtycke[hidden] {
	display: none;
}

.ca-samtycke__inner {
	max-width: var(--ca-bredd);
	margin-inline: auto;
	padding: var(--ca-rum-5) var(--ca-rum-6);
	display: flex;
	gap: var(--ca-rum-6);
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.ca-samtycke__text {
	margin: 0;
	max-width: 62ch;
	font-size: var(--ca-text-sm);
	line-height: 1.55;
	color: var(--ca-text);
}

.ca-samtycke__text strong {
	display: block;
	color: var(--ca-bla);
}

/* Knapparna är avsiktligt IDENTISKA i storlek och form. Att neka
   ska vara exakt lika lätt som att godkänna, annars är samtycket
   inte giltigt. Enda skillnaden är fyllnadsfärg, som skiljer dem
   åt utan att rangordna dem. */
.ca-samtycke__knappar {
	display: flex;
	gap: var(--ca-rum-3);
	flex-shrink: 0;
}

.ca-samtycke__knappar .ca-knapp {
	min-width: 11rem;
	justify-content: center;
	text-align: center;
}

@media (max-width: 720px) {
	.ca-samtycke__inner {
		gap: var(--ca-rum-4);
	}

	.ca-samtycke__knappar {
		width: 100%;
	}

	.ca-samtycke__knappar .ca-knapp {
		flex: 1;
		min-width: 0;
	}
}

/* Knappen i sidfotsmenyn som öppnar rutan igen. Ska se ut som de
   andra länkarna i raden, inte som en knapp, eftersom den står i
   en länklista. */
.ca-samtycke__oppna {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	text-underline-offset: 0.2em;
}

.ca-samtycke__oppna:hover,
.ca-samtycke__oppna:focus-visible {
	text-decoration-thickness: 2px;
}

/* Listen ligger fast i nederkanten och skulle annars täcka det
   som råkar hamna där. Uppmätt: på sidan om anmälan till
   minnesstund låg den över formulärets skicka-knapp.

   Höjden mäts i JavaScript och skrivs till --ca-samtycke-hojd,
   eftersom texten radbryts olika på olika skärmbredder och en
   gissad siffra hade blivit fel på någon av dem. */
body.ca-har-samtyckesruta {
	padding-bottom: var(--ca-samtycke-hojd, 0px);
}

/* Liten skarm: listen far inte ata halva skarmen.
   Uppmatt pa iPhone 13 innan detta: 440 px av 844, alltsa 52
   procent av ytan, pa en list som enligt briefen ska vara diskret.

   Den sista meningen ar en trygghetsrad och inget upplysningskrav.
   Det som maste sta kvar ar vad som satts och av vem, plus lanken
   till hela policyn. Det gor det. */
@media (max-width: 600px) {
	.ca-samtycke__inner {
		padding: var(--ca-rum-4) var(--ca-rum-5);
		gap: var(--ca-rum-3);
	}

	.ca-samtycke__detalj {
		display: none;
	}

	.ca-samtycke__text {
		font-size: 0.875rem;
		line-height: 1.45;
	}

	.ca-samtycke__knappar .ca-knapp {
		padding-block: 0.7rem;
	}
}

/* Valpanelen, 2026-09-17. En rad per kategori, inga förkryssade. */
.ca-samtycke__val {
	flex: 1 0 100%;
	display: grid;
	gap: var(--ca-rum-2);
	padding: var(--ca-rum-3) 0 0;
	border-top: 1px solid var(--ca-line);
}

.ca-samtycke__val[hidden] { display: none; }

.ca-samtycke__rad {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 10px;
	align-items: start;
	font-size: var(--ca-text-sm);
	line-height: 1.45;
	color: var(--ca-text);
	cursor: pointer;
}

.ca-samtycke__rad input { margin-top: 3px; width: 18px; height: 18px; }
.ca-samtycke__rad--last { cursor: default; opacity: .8; }
.ca-samtycke__val .ca-knapp { justify-self: start; }

.ca-samtycke__knappar { flex-wrap: wrap; }
.ca-samtycke__knappar .ca-knapp { min-width: 9rem; }