/*
 * Cookielier frontend stylesheet: the dialog and the re-open button. Loaded on every page, so it stays
 * small. The defaults of the custom properties are the defaults of the Design tab; the page overrides
 * them with one style block in the head. The defaults and the position of the re-open button carry zero
 * specificity (:where), so a theme or another plugin can override a custom property or a property
 * without a selector fight. Rules of the dialog use two classes, which beats the usual element rules
 * of a theme; everything the dialog needs is set here, nothing is inherited by accident.
 */
:where(:root) {
	--ckl-bg: #ffffff;
	--ckl-text: #1f2937;
	--ckl-accent: #1d4ed8;
	--ckl-accent-text: #ffffff;
	--ckl-radius: 8px;
	--ckl-font-size: 16px;
	--ckl-motion: 180ms;
	--ckl-backdrop: rgb(0 0 0 / 0.5);
	--ckl-reopen-left: 16px;
	--ckl-reopen-right: auto;
	--ckl-reopen-bottom: 16px;
	--ckl-reopen-z: 9998;
}

/* Re-open button. Only the position has zero specificity (so another plugin can move it); the look is set with one class,
   which beats the rules a theme puts on every button (colour, capital letters, letter spacing, shadows). */
:where(.ckl-reopen) {
	position: fixed;
	bottom: var(--ckl-reopen-bottom);
	left: var(--ckl-reopen-left);
	right: var(--ckl-reopen-right);
	z-index: var(--ckl-reopen-z);
}

.ckl-reopen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	box-sizing: border-box;
	min-block-size: calc(44px * var(--ckl-reopen-scale, 1));
	min-inline-size: calc(44px * var(--ckl-reopen-scale, 1));
	max-inline-size: calc(100vw - var(--ckl-reopen-x, 1rem) - 1rem);
	margin: 0;
	padding: 0.5em 1em;
	border: 2px solid var(--ckl-reopen-bg, var(--ckl-accent));
	border-radius: var(--ckl-button-radius, var(--ckl-radius));
	background: var(--ckl-reopen-bg, var(--ckl-accent));
	box-shadow: var(--ckl-reopen-ring, none);
	color: var(--ckl-reopen-fg, var(--ckl-accent-text));
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: calc(var(--ckl-font-size) * var(--ckl-reopen-scale, 1));
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
}

.ckl-reopen[hidden] {
	display: none;
}

/* Own colours, size and ring of the cookie button (OD-55): the custom properties exist only when the Design tab sets them, so without them
   every value here is the one of the dialog buttons. The text colour of the hover follows the own text colour. */
.ckl-reopen:hover {
	border-color: var(--ckl-reopen-hover, var(--ckl-reopen-bg, var(--ckl-accent)));
	background: var(--ckl-reopen-hover, var(--ckl-reopen-bg, var(--ckl-accent)));
	color: var(--ckl-reopen-hover-fg, var(--ckl-reopen-fg, var(--ckl-accent-text)));
}

/* The icon is limited by the box here, whatever size the file has. A size in pixels from the Design tab (OD-70) replaces 1.25 times the text; the box stays at least 44 px times the size step. */
.ckl-reopen .ckl-reopen-icon {
	flex: none;
	width: var(--ckl-reopen-icon-size, 1.25em);
	height: var(--ckl-reopen-icon-size, 1.25em);
	object-fit: contain;
}

.ckl-reopen[data-ckl-display="icon"] {
	padding: 0.5em;
}

.ckl-reopen--slot {
	position: static;
	/* In a slot the button is not positioned, so the distance from the side must not limit its width either (OD-70). */
	--ckl-reopen-x: 1rem;
}

/* A ring in two colours, so the focus stays visible on any page background. */
/* With the element in the selector (0,2,1): a theme rule such as :is(button, a, .button):focus has 0,2,0, comes later and would take the ring away. */
button.ckl-reopen:focus-visible,
a.ckl-open--button:focus-visible {
	outline: 2px solid var(--ckl-text);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--ckl-bg);
}

.ckl-open--button {
	display: inline-block;
	box-sizing: border-box;
	min-block-size: 44px;
	padding: 0.65em 1em;
	border: 2px solid var(--ckl-accent);
	border-radius: var(--ckl-button-radius, var(--ckl-radius));
	background: var(--ckl-accent);
	color: var(--ckl-accent-text);
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.3;
	text-decoration: none;
	text-transform: none;
}

/* Dialog */
html.ckl-scroll-lock {
	overflow: hidden;
}

.ckl-dialog,
.ckl-dialog * {
	box-sizing: border-box;
}

.ckl-dialog {
	position: fixed;
	inset: 0;
	display: none;
	width: min(36rem, calc(100% - 1rem));
	max-height: calc(100% - 1rem);
	margin: auto;
	padding: 1.5rem;
	overflow: auto;
	border: 2px solid var(--ckl-accent);
	border-radius: var(--ckl-radius);
	background: var(--ckl-bg);
	color: var(--ckl-text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: var(--ckl-font-size);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: start;
	text-transform: none;
	overflow-wrap: anywhere;
}

.ckl-dialog[open] {
	display: block;
	animation: ckl-fade var(--ckl-motion) ease-out;
}

.ckl-dialog::backdrop {
	background: var(--ckl-backdrop, rgb(0 0 0 / 0.5));
}

@keyframes ckl-fade {
	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ckl-dialog[open] {
		animation: none;
	}
}

.ckl-dialog .ckl-stage[hidden],
.ckl-dialog .ckl-btn[hidden] {
	display: none;
}

.ckl-dialog .ckl-title {
	margin: 0 0 0.75rem;
	padding: 0;
	border: 0;
	color: inherit;
	font-family: inherit;
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.25;
}

.ckl-dialog .ckl-title:focus {
	outline: none;
}

.ckl-dialog .ckl-text,
.ckl-dialog .ckl-cat-desc,
.ckl-dialog .ckl-service-desc,
.ckl-dialog .ckl-status,
.ckl-dialog .ckl-links {
	margin: 0 0 1rem;
	padding: 0;
	color: inherit;
	font-size: 1em;
	line-height: 1.5;
}

.ckl-dialog .ckl-cat-desc,
.ckl-dialog .ckl-service-desc {
	margin: 0 0 0.5rem;
	font-size: 0.9em;
}

.ckl-dialog .ckl-status {
	margin: 0.75rem 0 0;
	font-size: 0.9em;
	font-weight: 600;
}

.ckl-dialog .ckl-status:empty {
	display: none;
}

.ckl-dialog .ckl-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
}

.ckl-dialog .ckl-link {
	display: inline-block;
	min-block-size: 24px;
	color: var(--ckl-text);
	text-decoration: underline;
}

.ckl-dialog .ckl-link:hover {
	text-decoration-thickness: 2px;
}

.ckl-dialog .ckl-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.25rem 0 0;
	padding: 0;
}

.ckl-dialog .ckl-btn {
	flex: 1 1 9rem;
	min-block-size: 44px;
	margin: 0;
	padding: 0.5em 1em;
	border: 2px solid var(--ckl-accent);
	border-radius: var(--ckl-button-radius, var(--ckl-radius));
	box-shadow: none;
	font-family: inherit;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	appearance: none;
}

.ckl-dialog .ckl-btn--solid {
	background: var(--ckl-accent);
	color: var(--ckl-accent-text);
}

.ckl-dialog .ckl-btn--outline {
	background: var(--ckl-bg);
	color: var(--ckl-text);
}

.ckl-dialog .ckl-btn:focus-visible,
.ckl-dialog .ckl-link:focus-visible,
.ckl-dialog .ckl-powered-link:focus-visible,
.ckl-dialog .ckl-check input:focus-visible {
	outline: 2px solid var(--ckl-accent);
	outline-offset: 2px;
}

/* The credit line of the first layer: a link in the text colour, smaller and lighter than the buttons, with a target of at least 24 px. */
.ckl-dialog .ckl-powered {
	margin: 0.75rem 0 0;
	padding: 0;
	text-align: center;
}

.ckl-dialog .ckl-powered-link {
	display: inline-block;
	padding: 0 0.25em;
	color: var(--ckl-text);
	font-size: 0.8125em;
	font-weight: 400;
	line-height: 24px;
	text-decoration: underline;
}

.ckl-dialog .ckl-sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ckl-dialog .ckl-categories {
	margin: 1rem 0 0;
	padding: 0;
}

.ckl-dialog .ckl-cat {
	margin: 0;
	padding: 0.75rem 0;
	border-top: 1px solid rgb(127 127 127 / 0.4);
}

.ckl-dialog .ckl-cat-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem 0.75rem;
}

.ckl-dialog .ckl-badge {
	font-size: 0.85em;
	font-weight: 600;
}

.ckl-dialog .ckl-services {
	margin: 0.25rem 0 0;
	padding: 0 0 0 1.75rem;
	list-style: none;
}

.ckl-dialog .ckl-service {
	margin: 0;
	padding: 0.25rem 0;
}

.ckl-dialog .ckl-vendor {
	display: block;
	margin: 0 0 0.25rem 2.25rem;
	font-size: 0.85em;
}

.ckl-dialog .ckl-check {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-block-size: 44px;
	margin: 0;
	padding: 0;
	font-weight: 600;
	cursor: pointer;
}

/* The native checkbox, with the states it draws itself (ticked, mixed). Themes often hide it or draw their own, which has no mixed
   state; this puts it back whatever the theme did (found on the test site: appearance none, the mixed state was invisible). */
.ckl-dialog .ckl-check input {
	appearance: auto;
	-webkit-appearance: checkbox;
	position: static;
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	padding: 0;
	border: initial;
	background: initial;
	box-shadow: none;
	opacity: 1;
	clip: auto;
	clip-path: none;
	transform: none;
	accent-color: var(--ckl-accent);
}

.ckl-dialog .ckl-check input:disabled {
	cursor: default;
}

@media (max-width: 30em) {
	.ckl-dialog {
		padding: 1rem;
	}

	.ckl-dialog .ckl-btn {
		flex-basis: 100%;
	}
}

/* The notice on a form whose service is held back (OD-65). It sits inside the form, on the colours of the dialog, and uses two classes
   like the dialog, so a theme rule on every paragraph or every button does not reach it. */
.ckl-form-notice {
	box-sizing: border-box;
	margin: 1rem 0;
	padding: 1rem;
	border: 2px solid var(--ckl-text);
	border-radius: var(--ckl-radius);
	background: var(--ckl-bg);
	color: var(--ckl-text);
	font-size: var(--ckl-font-size);
	line-height: 1.5;
	text-align: start;
}

.ckl-form-notice .ckl-form-notice-text {
	margin: 0 0 0.75rem;
	padding: 0;
	color: inherit;
	font-size: 1em;
	line-height: inherit;
}

.ckl-form-notice,
.ckl-form-notice .ckl-form-notice-text,
.ckl-form-notice .ckl-form-notice-service,
.ckl-form-notice .ckl-form-notice-btn {
	transition: none;
	animation: none;
}

.ckl-form-notice .ckl-form-notice-service {
	color: inherit;
	font-weight: 700;
}

.ckl-form-notice .ckl-form-notice-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
}

.ckl-form-notice .ckl-form-notice-btn {
	flex: 1 1 9rem;
	min-block-size: 44px;
	margin: 0;
	padding: 0.5em 1em;
	border: 2px solid var(--ckl-accent);
	border-radius: var(--ckl-button-radius, var(--ckl-radius));
	box-shadow: none;
	font-family: inherit;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	appearance: none;
}

.ckl-form-notice .ckl-form-notice-btn--solid {
	background: var(--ckl-accent);
	color: var(--ckl-accent-text);
}

.ckl-form-notice .ckl-form-notice-btn--outline {
	background: var(--ckl-bg);
	color: var(--ckl-text);
}

.ckl-form-notice .ckl-form-notice-btn:disabled {
	cursor: default;
	opacity: 0.6;
}

.ckl-form-notice .ckl-form-notice-btn:focus-visible {
	outline: 2px solid var(--ckl-accent);
	outline-offset: 2px;
}