/* TrueMetric - tweaks on top of Klaro */

/*
 * Design tokens. Klaro colors are --dark1 (background), --dark2 (borders), --light1 (text) and --light2. The light
 * theme sets them, the dark theme leaves them undefined, so the fallbacks below are the Klaro dark values and
 * everything follows the chosen theme. Browsers with color-mix() get borders as a soft tint of the text color.
 */
.klaro {
	--tmet-gap: 5px;
	--tmet-pad: 0.55em 0.9em;
	--tmet-pad-primary: 0.7em 1.3em;
	--tmet-pad-primary-compact: 0.7em 1.1em;
	--tmet-pad-secondary: 0.5em 0.8em;
	--tmet-pad-footer: 0.6em 0.9em;
	--tmet-space-window: 1.5em;
	--tmet-space-banner: 1.2em;
	--tmet-border: var(--dark2, #5c5c5c);
}

@supports (color: color-mix(in srgb, red, blue)) {
	.klaro {
		--tmet-border: color-mix(in srgb, var(--light1, #fafafa) 17%, transparent);
	}
}

/* Keep the consent UI above themes, sticky headers and chat widgets (the banner above the settings window). */
.klaro .cookie-modal,
.klaro .cookie-notice {
	z-index: 2147483000;
}

.klaro .cookie-notice:not(.cookie-modal-notice) {
	z-index: 2147483001;
}

/*
 * Themes often style generic elements (label, button, input, p, li...).
 * Neutralize what breaks the Klaro layout: the switch is positioned relative to the list item,
 * so the label must not become a positioning context.
 */
.klaro .cookie-modal .cm-list-label,
.klaro .cookie-notice .cm-list-label,
.klaro .context-notice .cm-list-label {
	position: static;
	display: inline;
	float: none;
	margin: 0;
	padding: 0;
	width: auto;
	height: auto;
	line-height: inherit;
}

.klaro .cookie-modal .cm-list-label .cm-switch,
.klaro .cookie-notice .cm-list-label .cm-switch,
.klaro .context-notice .cm-list-label .cm-switch {
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
	height: 30px;
	margin: 0;
}

.klaro .cookie-modal .cm-list-label .slider,
.klaro .cookie-notice .cm-list-label .slider,
.klaro .context-notice .cm-list-label .slider {
	box-sizing: border-box;
	height: 30px;
}

.klaro .cookie-modal .cm-list-input {
	margin: 0;
	padding: 0;
}

/* Headings: themes size h1/h2 for page content (36px); here they stay compact. */
.klaro .cookie-modal .cm-modal .cm-header h1,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2 {
	line-height: 1.2;
}

.klaro .cookie-notice h1,
.klaro .cookie-notice h2 {
	margin: 0 0 0.5em;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

/* Settings window: spacing and borders. */
.klaro .cookie-modal .cm-modal .cm-header {
	padding: var(--tmet-space-window);
}

.klaro .cookie-modal .cm-modal .cm-header,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose,
.klaro .cookie-modal .cm-modal .cm-footer {
	border-color: var(--tmet-border) !important;
}

/* "Enable or disable all services": Klaro gives this row a top padding, the switch must follow it. */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose.cm-toggle-all,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service.cm-toggle-all {
	padding-top: 14px;
}

.klaro .cookie-modal .cm-toggle-all .cm-list-label .cm-switch {
	top: 14px;
}

/* Cookie names: neutral instead of the theme's <code> styling. */
.klaro .cookie-modal code {
	color: inherit;
	background: none;
	padding: 0;
	border: 0;
	font-size: 0.95em;
}

/*
 * Buttons: stable size and spacing whatever the theme does to <button>.
 * The margin needs !important because themes style "button" with more specific selectors.
 */
.klaro .cookie-modal .cm-btn,
.klaro .cookie-notice .cm-btn,
.klaro .context-notice .cm-btn {
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	height: auto;
	padding: var(--tmet-pad);
	font-size: 1em;
	line-height: 1.25;
	text-transform: none;
	letter-spacing: normal;
	white-space: normal;
	box-shadow: none;
	margin: 0 !important;
}

/* Button hierarchy: the buttons that accept are a bit larger and bolder than the ones that decline. */
.klaro .cookie-modal .cm-btn.cm-btn-accept-all,
.klaro .cookie-notice .cm-btn.cm-btn-success:not(.cm-btn-accept) {
	padding: var(--tmet-pad-primary);
	font-size: 1em;
	font-weight: 600;
}

.klaro .cookie-modal .cm-btn.cn-decline,
.klaro .cookie-notice .cm-btn.cn-decline {
	padding: var(--tmet-pad-secondary);
	font-size: 0.9em;
	font-weight: 400;
}

/* Banner: the customize link and the two buttons must stay in one row, so the buttons are a bit narrower. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
	padding: var(--tmet-space-banner);
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--tmet-gap);
	margin: 0 !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
	justify-content: space-between;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
	display: flex;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more {
	margin: 0 !important;
}

.klaro .cookie-notice .cm-btn.cm-btn-success:not(.cm-btn-accept) {
	padding: var(--tmet-pad-primary-compact);
}

/*
 * Settings window footer: "Accept selected" and "Reject" sit together on the left, "Accept all" on the right edge.
 * "Reject" is as wide as its text, "Accept selected" keeps a comfortable minimum width.
 */
.klaro .cookie-modal .cm-modal .cm-footer-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: var(--tmet-gap);
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn.cn-decline,
.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn.cm-btn-accept {
	padding: var(--tmet-pad-footer);
	font-size: 0.95em;
	font-weight: 500;
	text-align: center;
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn.cm-btn-accept {
	min-width: 11em;
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn.cm-btn-accept-all {
	margin-inline-start: auto !important;
}

/* Embedded content wrapper (blocked until consent). */
.tmet-embed {
	position: relative;
	display: block;
	max-width: 100%;
}

.tmet-embed iframe {
	max-width: 100%;
}

.tmet-embed > template {
	display: none;
}

/*
 * Placeholder shown instead of a blocked embed. Klaro sets its theme colors only on the banner container, not
 * on the placeholders inside the page content, so the placeholder has its own neutral colors.
 */
.klaro.cm-as-context-notice {
	--tmet-ctx-bg: #fff;
	--tmet-ctx-text: #333;
	--tmet-ctx-border: #c8c8c8;
	height: auto;
	margin: 0 0 1em;
}

.klaro.cm-as-context-notice .context-notice {
	box-sizing: border-box;
	padding: 24px;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: var(--tmet-ctx-text);
	border: 1px solid var(--tmet-ctx-border);
	border-radius: 8px;
	background: var(--tmet-ctx-bg);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.klaro.cm-as-context-notice .context-notice p {
	max-width: 560px;
	margin-top: 0;
	text-align: center;
	color: inherit;
}

.klaro.cm-as-context-notice .context-notice p.cm-buttons {
	margin-top: 16px;
}

.klaro.cm-as-context-notice .context-notice .cm-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.klaro.cm-as-context-notice .context-notice .ccn-description-empty-store {
	font-size: 0.85em;
}

/* Link that re-opens the settings. */
.tmet-open-settings {
	cursor: pointer;
}

/*
 * Klaro moves the focus to the banner when it opens (for screen readers), which draws the browser focus ring
 * around the whole banner. The banner itself must not show it, buttons and links inside still do.
 */
.klaro .cookie-notice:focus,
.klaro .cookie-notice:focus-visible {
	outline: none;
}