/* Cookie banner, settings panel, footer links, policy cookie table and catalogue placeholders.
   Rules are scoped under the component and use two classes, because the theme styles bare elements
   (and forces some heading values with !important). */

:root {
	--ctwb-accent: #1da4d4;
	--ctwb-action: #0f7ba3;
	--ctwb-action-dark: #0b6688;
	--ctwb-ink: #0a0a0a;
	--ctwb-text: #4a4a4a;
	--ctwb-muted: #5b6770;
	--ctwb-line: #e3e8eb;
	--ctwb-soft: #f4f7f9;
	--ctwb-shadow: 0 18px 44px rgba(16, 60, 84, 0.18), 0 2px 6px rgba(16, 60, 84, 0.08);
}

html {
	scroll-padding-bottom: var(--ctwb-consent-height, 0px);
}

.ctwb-consent [hidden],
.ctwb-embed [hidden] {
	display: none !important;
}

.ctwb-consent:focus,
.ctwb-consent button:focus:not(:focus-visible),
.ctwb-embed button:focus:not(:focus-visible),
.ctwb-legal-links button:focus:not(:focus-visible),
.ctwb-cookie-table button:focus:not(:focus-visible) {
	outline: none;
}

/* The theme's reboot shows every dialog; only an open panel should be. */
.ctwb-consent .ctwb-consent-panel:not([open]) {
	display: none;
}

/* Buttons: one style everywhere, Accept and Reject identical. */
.ctwb-consent .ctwb-consent-btn,
.ctwb-embed .ctwb-consent-btn,
.ctwb-cookie-table .ctwb-consent-btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 0;
	padding: 10px 18px;
	border: 2px solid var(--ctwb-action);
	border-radius: 5px;
	background: var(--ctwb-action);
	box-shadow: none;
	color: #fff;
	font: 500 15px/1.2 Poppins, sans-serif;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.ctwb-consent .ctwb-consent-btn:hover,
.ctwb-embed .ctwb-consent-btn:hover,
.ctwb-cookie-table .ctwb-consent-btn:hover {
	border-color: var(--ctwb-action-dark);
	background: var(--ctwb-action-dark);
	color: #fff;
}

.ctwb-consent .ctwb-consent-btn:active,
.ctwb-embed .ctwb-consent-btn:active,
.ctwb-cookie-table .ctwb-consent-btn:active {
	transform: translateY(1px);
}

.ctwb-consent .ctwb-consent-btn-quiet {
	background: #fff;
	color: var(--ctwb-action);
}

.ctwb-consent .ctwb-consent-btn-quiet:hover {
	background: var(--ctwb-soft);
	color: var(--ctwb-action-dark);
}

.ctwb-consent .ctwb-consent-btn:focus,
.ctwb-embed .ctwb-consent-btn:focus,
.ctwb-cookie-table .ctwb-consent-btn:focus {
	outline: none;
}

.ctwb-consent button:focus-visible,
.ctwb-consent a:focus-visible,
.ctwb-consent summary:focus-visible,
.ctwb-consent .ctwb-consent-switch:focus-visible,
.ctwb-embed .ctwb-consent-btn:focus-visible,
.ctwb-cookie-table .ctwb-consent-btn:focus-visible,
.ctwb-legal-links button:focus-visible,
.ctwb-legal-links a:focus-visible {
	outline: 3px solid var(--ctwb-action);
	outline-offset: 2px;
}

/* Text links inside the banner and panel. */
.ctwb-consent .ctwb-consent-link,
.ctwb-consent a {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ctwb-action);
	font: inherit;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.ctwb-consent .ctwb-consent-link:hover,
.ctwb-consent a:hover {
	color: var(--ctwb-action-dark);
}

/* First layer: a strip along the bottom on phones. */
.ctwb-consent .ctwb-consent-banner {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99990;
	box-sizing: border-box;
	max-height: 100vh;
	max-height: 100dvh;
	overflow-y: auto;
	padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
	border-top: 3px solid var(--ctwb-accent);
	background: #fff;
	box-shadow: 0 -10px 30px rgba(16, 60, 84, 0.16);
	color: var(--ctwb-text);
	font: 400 14px/1.5 Poppins, sans-serif;
	text-align: left;
}

.ctwb-consent .ctwb-consent-title {
	margin: 0 0 4px !important;
	padding: 0;
	color: var(--ctwb-ink) !important;
	font-family: Poppins, sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 22px !important;
	letter-spacing: 0;
	text-transform: none;
}

.ctwb-consent .ctwb-consent-text {
	margin: 0 0 12px;
	color: var(--ctwb-text);
	font-size: 14px;
	line-height: 1.5;
}

.ctwb-consent .ctwb-consent-text .ctwb-consent-link,
.ctwb-consent .ctwb-consent-text a {
	margin-right: 10px;
	white-space: nowrap;
}

.ctwb-consent .ctwb-consent-more {
	display: none;
}

.ctwb-consent .ctwb-consent-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

@media (prefers-reduced-motion: no-preference) {
	.ctwb-consent .ctwb-consent-banner:not([hidden]) {
		animation: ctwb-consent-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
	}
}

@keyframes ctwb-consent-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

/* Keeps the end of the page reachable above the strip. */
@media (max-width: 639px) {
	html body {
		padding-bottom: var(--ctwb-consent-height, 0px);
	}
}

/* From 640px: a card in the bottom left, clear of the reCAPTCHA badge and back-to-top button. */
@media (min-width: 640px) {
	.ctwb-consent .ctwb-consent-banner {
		right: auto;
		bottom: 24px;
		left: 24px;
		width: 384px;
		max-height: calc(100vh - 48px);
		max-height: calc(100dvh - 48px);
		padding: 24px;
		border: 1px solid var(--ctwb-line);
		border-radius: 5px;
		box-shadow: var(--ctwb-shadow);
	}

	.ctwb-consent .ctwb-consent-title {
		margin-bottom: 0 !important;
		font-size: 18px !important;
		line-height: 26px !important;
	}

	/* The short rule the site puts under its headings. */
	.ctwb-consent .ctwb-consent-title::after {
		content: "";
		display: block;
		width: 30px;
		height: 3px;
		margin-top: 10px;
		background: var(--ctwb-accent);
	}

	.ctwb-consent .ctwb-consent-text {
		margin: 12px 0 18px;
	}

	.ctwb-consent .ctwb-consent-more {
		display: inline;
	}
}

/* Settings panel. */
.ctwb-consent .ctwb-consent-panel {
	box-sizing: border-box;
	width: min(560px, calc(100% - 24px));
	max-width: none;
	max-height: calc(100vh - 24px);
	max-height: calc(100dvh - 24px);
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: #fff;
	box-shadow: var(--ctwb-shadow);
	color: var(--ctwb-text);
	font: 400 14px/1.55 Poppins, sans-serif;
	text-align: left;
}

.ctwb-consent .ctwb-consent-panel[open] {
	display: flex;
	flex-direction: column;
}

.ctwb-consent .ctwb-consent-panel::backdrop {
	background: rgba(10, 24, 32, 0.55);
}

.ctwb-consent .ctwb-consent-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 16px 14px 24px;
	border-bottom: 1px solid var(--ctwb-line);
}

.ctwb-consent .ctwb-consent-panel-title {
	margin: 0 !important;
	color: var(--ctwb-ink) !important;
	font-family: Poppins, sans-serif !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 28px !important;
	letter-spacing: 0;
	text-transform: none;
}

.ctwb-consent .ctwb-consent-panel-title:focus {
	outline: none;
}

.ctwb-consent .ctwb-consent-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: transparent;
	color: var(--ctwb-ink);
	font: 400 30px/1 Poppins, sans-serif;
	cursor: pointer;
}

.ctwb-consent .ctwb-consent-close:hover {
	background: var(--ctwb-soft);
}

.ctwb-consent .ctwb-consent-panel-body {
	overflow-y: auto;
	padding: 6px 24px 8px;
	overscroll-behavior: contain;
}

.ctwb-consent .ctwb-consent-intro {
	margin: 12px 0 4px;
	color: var(--ctwb-text);
}

.ctwb-consent .ctwb-consent-category {
	padding: 16px 0;
	border-top: 1px solid var(--ctwb-line);
}

.ctwb-consent .ctwb-consent-intro + .ctwb-consent-category {
	margin-top: 12px;
}

.ctwb-consent .ctwb-consent-category-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.ctwb-consent .ctwb-consent-category-title {
	margin: 0 !important;
	color: var(--ctwb-ink) !important;
	font-family: Poppins, sans-serif !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 24px !important;
	letter-spacing: 0;
	text-transform: none;
}

.ctwb-consent .ctwb-consent-category-title label {
	margin: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.ctwb-consent .ctwb-consent-always {
	color: var(--ctwb-action);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
}

.ctwb-consent .ctwb-consent-category-text {
	margin: 6px 0 8px;
	color: var(--ctwb-text);
	font-size: 14px;
	line-height: 1.55;
}

/* Switch: a checkbox with role="switch". */
.ctwb-consent .ctwb-consent-switch {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	flex: none;
	width: 46px;
	height: 26px;
	margin: 0;
	border: 0;
	border-radius: 13px;
	background: #6b7780;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ctwb-consent .ctwb-consent-switch::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease;
}

.ctwb-consent .ctwb-consent-switch:checked {
	background: var(--ctwb-action);
}

.ctwb-consent .ctwb-consent-switch:checked::before {
	transform: translateX(20px);
}

.ctwb-consent .ctwb-consent-cookies summary {
	display: inline-block;
	color: var(--ctwb-action);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}

.ctwb-consent .ctwb-consent-cookie-list {
	margin: 10px 0 0;
	padding: 0;
}

.ctwb-consent .ctwb-consent-cookie-list > div {
	margin: 0 0 6px;
	padding: 8px 12px;
	border-radius: 5px;
	background: var(--ctwb-soft);
}

.ctwb-consent .ctwb-consent-cookie-list dt {
	color: var(--ctwb-ink);
	font-size: 13px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.ctwb-consent .ctwb-consent-cookie-list dd {
	margin: 2px 0 0;
	color: var(--ctwb-text);
	font-size: 13px;
	line-height: 1.5;
}

.ctwb-consent .ctwb-consent-cookie-meta {
	color: var(--ctwb-muted);
}

.ctwb-consent .ctwb-consent-panel-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 14px 24px;
	border-top: 1px solid var(--ctwb-line);
	background: var(--ctwb-soft);
}

.ctwb-consent .ctwb-consent-panel-foot .ctwb-consent-btn {
	flex: 1 1 auto;
}

/* Phones: the panel is a sheet from the bottom. */
@media (max-width: 639px) {
	.ctwb-consent .ctwb-consent-panel {
		width: 100%;
		max-height: calc(100dvh - 32px);
		margin: auto 0 0;
		border-radius: 5px 5px 0 0;
	}

	.ctwb-consent .ctwb-consent-panel-head,
	.ctwb-consent .ctwb-consent-panel-body,
	.ctwb-consent .ctwb-consent-panel-foot {
		padding-right: 16px;
		padding-left: 16px;
	}

	.ctwb-consent .ctwb-consent-panel-foot {
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	}

	.ctwb-consent .ctwb-consent-panel-foot .ctwb-consent-btn-quiet {
		grid-column: 1 / -1;
	}
}

/* Footer: Privacy Policy and Cookie settings inside the copyright block. */
.ctwb-legal-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 20px;
	margin: 6px 0 0;
}

.ctwb-legal-links a,
.ctwb-legal-links .ctwb-legal-link {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

/* Privacy policy cookie table. */
.ctwb-cookie-table .ctwb-cookie-table-scroll {
	margin: 0 0 24px;
	overflow-x: auto;
}

.ctwb-cookie-table table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.5;
}

.ctwb-cookie-table th,
.ctwb-cookie-table td {
	padding: 10px 12px;
	border: 1px solid var(--ctwb-line);
	text-align: left;
	vertical-align: top;
}

.ctwb-cookie-table th {
	background: var(--ctwb-soft);
	color: var(--ctwb-ink);
	font-weight: 600;
}

.ctwb-cookie-table td:first-child {
	overflow-wrap: anywhere;
}

@media (max-width: 600px) {
	.ctwb-cookie-table table { min-width: 0; }
	.ctwb-cookie-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.ctwb-cookie-table tr { display: block; margin: 0 0 12px; border: 1px solid var(--ctwb-line); }
	.ctwb-cookie-table td { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px; border: 0; border-bottom: 1px solid var(--ctwb-line); }
	.ctwb-cookie-table td:last-child { border-bottom: 0; }
	.ctwb-cookie-table td::before { content: attr(data-label); font-weight: 600; color: var(--ctwb-ink); }
}

/* Catalogue placeholder: same box as the catalogue, its height set per page. */
.ctwb-embed {
	position: relative;
}

.ctwb-embed .ctwb-embed-placeholder {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	box-sizing: border-box;
	height: 100%;
	padding: 64px 16px 0;
	background: var(--ctwb-soft);
}

.ctwb-embed .ctwb-embed-card {
	box-sizing: border-box;
	max-width: 460px;
	padding: 28px 28px 24px;
	border-top: 3px solid var(--ctwb-accent);
	border-radius: 5px;
	background: #fff;
	box-shadow: var(--ctwb-shadow);
	text-align: center;
}

.ctwb-embed .ctwb-embed-text {
	margin: 0 0 18px;
	color: var(--ctwb-ink);
	font-size: 15px;
	line-height: 1.6;
}

.ctwb-embed .ctwb-embed-note {
	margin: 14px 0 0;
	color: var(--ctwb-muted);
	font-size: 13px;
	line-height: 1.5;
}

/* Visitors who allowed catalogues see an empty box for the moment before the catalogue is added. */
.ctwb-embeds-on .ctwb-embed .ctwb-embed-card {
	visibility: hidden;
}

/* Matches the old plugin's iframe: full width, top aligned, no border. */
.ctwb-embed .ctwb-embed-frame {
	width: 100%;
	max-width: 100%;
	height: 100%;
	border: 0;
	vertical-align: top;
}