/* Cookie consent (S26): the banner on every page and the choice block on /legal/cookies. Behaviour: consent.js */

.ckb {
	position: fixed;
	inset-inline: var(--sp-16);
	inset-block-end: var(--sp-16);
	z-index: 500;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-12) var(--sp-24);
	max-inline-size: 960px;
	margin-inline: auto;
	padding: var(--sp-16) var(--sp-24);
	background: var(--surface-solid);
	color: var(--fg);
	border: var(--hairline) solid var(--ln-ctl);
	border-inline-start: 3px solid var(--hi);
}

.ckb[hidden] {
	display: none;
}

.ckb-t {
	flex: 1 1 320px;
	font-size: var(--fs-b);
	color: var(--fg);
}

.ckb-a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-12) var(--sp-16);
}

.ckb-a .btn,
.ckp-act .btn {
	min-inline-size: 168px;
	justify-content: center;
}

.ckb-s {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--fg);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* The motion banner and the toasts rise above the cookie banner while it shows. */
.rmn {
	inset-block-end: calc(16px + var(--ckb-h, 0px));
}

.toasts {
	inset-block-end: calc(var(--sp-24) + var(--ckb-h, 0px));
}

/* Choice block */
.ckp {
	max-inline-size: 72ch;
	margin-block-end: var(--sp-48);
	padding: var(--sp-24);
	border: var(--hairline) solid var(--ln-s);
	border-inline-start: 3px solid var(--hi);
}

.ckp h2 {
	margin-block-end: var(--sp-16);
	font-size: var(--fs-h3);
}

.ckp-rows {
	display: grid;
	gap: var(--sp-16);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ckp-row p {
	margin-block-start: var(--sp-4);
	padding-inline-start: 76px;
	color: var(--fg2);
	font-size: var(--fs-b);
}

.ckp-sw {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--sp-16);
	min-block-size: 44px;
	cursor: pointer;
}

.ckp-sw input {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0;
	inline-size: 60px;
	block-size: 34px;
	margin: 0;
	opacity: 0;
	transform: translateY(-50%);
	cursor: inherit;
}

.ckp-sw i {
	position: relative;
	flex: none;
	inline-size: 60px;
	block-size: 34px;
	border: var(--hairline) solid var(--ln-ctl);
	border-radius: 17px;
	background: var(--field-bg);
	transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}

.ckp-sw i::after {
	content: '';
	position: absolute;
	inset-block-start: 4px;
	inset-inline-start: 4px;
	inline-size: 24px;
	block-size: 24px;
	border-radius: 50%;
	background: var(--fg);
	transition: inset-inline-start var(--d-fast) var(--ease);
}

.ckp-sw input:checked + i {
	background: var(--hi);
	border-color: var(--hi);
}

.ckp-sw input:checked + i::after {
	inset-inline-start: 30px;
	background: var(--ink-900);
}

.ckp-sw input:disabled + i {
	opacity: 0.7;
}

.ckp-sw input:disabled,
.ckp-sw:has(input:disabled) {
	cursor: not-allowed;
}

.ckp-sw input:focus-visible + i {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
}

.ckp-nm {
	font-weight: 700;
}

.ckp-nm b {
	margin-inline-start: var(--sp-8);
	color: var(--fg2);
	font-weight: 400;
	font-size: var(--fs-b);
}

.ckp-none {
	margin-block-start: var(--sp-16);
	color: var(--fg2);
}

.ckp-h3 {
	margin-block: var(--sp-24) var(--sp-12);
	color: var(--fg2);
	font-size: 13px;
	letter-spacing: 0.04em;
}

.ckp-list {
	display: grid;
	gap: var(--sp-12);
	margin: 0;
}

.ckp-list dt {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4) var(--sp-12);
	font-weight: 700;
}

.ckp-list dt bdi {
	text-transform: none;
}

.ckp-list dt span {
	color: var(--fg2);
	font-weight: 400;
}

.ckp-list dd {
	margin: 0;
	color: var(--fg2);
	font-size: var(--fs-b);
}

.ckp-act {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-12);
	margin-block-start: var(--sp-24);
}

.ckp-status {
	margin-block-start: var(--sp-16);
	color: var(--fg2);
	font-size: 13px;
}

.rm .ckp-sw i,
.rm .ckp-sw i::after {
	transition: none;
}

@media (max-width: 600px) {
	.ckb {
		inset-inline: var(--sp-8);
		inset-block-end: var(--sp-8);
		padding: var(--sp-12) var(--sp-16);
	}

	.ckp {
		padding: var(--sp-16);
	}

	.ckp-row p {
		padding-inline-start: 0;
	}
}