/**
 * Cookie Care consent banner styles.
 *
 * Everything is scoped to the #cookiecare-banner root so theme styles are
 * untouched. Colors and the border radius come from inline CSS custom
 * properties printed on the root element by the PHP renderer, so admin
 * color settings work without a build step. Logical properties keep the
 * layouts RTL-safe.
 *
 * @package CookieCare
 */

#cookiecare-banner {
	--cc-bg: #ffffff;
	--cc-text: #1d2327;
	--cc-btn-bg: #2271b1;
	--cc-btn-text: #ffffff;
	--cc-radius: 4px;
	font-size: var(--cc-fs-base, 14px);
	line-height: 1.5;
}

/* The PHP shell prints every piece hidden; JS reveals what is needed. */
#cookiecare-banner [hidden],
#cookiecare-banner[hidden] {
	display: none !important;
}

#cookiecare-banner *,
#cookiecare-banner *::before,
#cookiecare-banner *::after {
	box-sizing: border-box;
}

/* Keep plugin typography consistent against aggressive theme resets. */
#cookiecare-banner p,
#cookiecare-banner h2,
#cookiecare-banner h3 {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
}

#cookiecare-banner button {
	font-family: inherit;
}

/*
 * Refined link underlines: browser-default underlines (thickness/offset
 * "auto") look clumsy in heavy display fonts adopted from the theme — a thin,
 * offset, semi-transparent line reads much cleaner. Hover restores full
 * strength so the affordance stays obvious.
 */
#cookiecare-banner a {
	color: var(--cc-btn-bg);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

#cookiecare-banner a:hover,
#cookiecare-banner a:focus-visible {
	text-decoration-color: currentColor;
}

/* Focus is always visible, never removed. */
#cookiecare-banner button:focus-visible,
#cookiecare-banner a:focus-visible,
#cookiecare-banner [tabindex]:focus-visible {
	outline: 2px solid var(--cc-btn-bg);
	outline-offset: 2px;
}

/* Visually hidden, still available to assistive technology. */
#cookiecare-banner .cookiecare-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* -----------------------------------------------------------------------
 * Overlay (popup layout with overlay_enabled, block_page, open modal).
 * -------------------------------------------------------------------- */

#cookiecare-banner .cookiecare-overlay {
	position: fixed;
	inset: 0;
	z-index: 999998;
	background: rgba(0, 0, 0, 0.55);
}

/* Scroll lock while a forced choice or the modal is open. */
html.cookiecare-lock-scroll {
	overflow: hidden;
}

/* -----------------------------------------------------------------------
 * Banner panel.
 * -------------------------------------------------------------------- */

#cookiecare-banner .cookiecare-panel {
	position: fixed;
	z-index: 999999;
	display: block;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: var(--cc-pad, 20px);
	background: var(--cc-bg);
	background-image: var(--cc-bg-img, none);
	background-position: center;
	background-size: cover;
	color: var(--cc-text);
	border-radius: var(--cc-radius);
	/* A dark drop shadow is invisible on a dark page, and a consent window that
	   shares its background with the site behind it reads as part of the page
	   rather than as a question. This hairline is derived from the text color, so
	   it darkens on light panels and lightens on dark ones, and the window keeps
	   an edge whatever the theme does. The plain rgba line is the fallback for
	   browsers without color-mix. */
	border: 1px solid rgba(128, 128, 128, 0.35);
	border: 1px solid color-mix(in srgb, var(--cc-text) 22%, transparent);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

#cookiecare-banner .cookiecare-title {
	margin-block-end: 8px;
	font-family: var(--cc-font-heading, inherit);
	font-size: var(--cc-fs-title, 16px);
	font-weight: 600;
}

#cookiecare-banner .cookiecare-message {
	margin-block-end: 4px;
	font-size: inherit;
}

/*
 * The action buttons must always share one row — wrapping "Anpassen" onto a
 * second line was explicitly ruled out. The panel is a size container, and a
 * container-query clamp shrinks the button font/padding fluidly when the
 * configured font size would overflow the current banner width (the admin
 * setting acts as the upper bound). Browsers without cq units keep the
 * configured size; `white-space: normal` on the buttons is the last-resort
 * safety net there.
 */
#cookiecare-banner .cookiecare-panel {
	container-type: inline-size;
}

#cookiecare-banner .cookiecare-actions {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin-block-start: 12px;
}

@supports (font-size: 1cqw) {
	#cookiecare-banner .cookiecare-actions .cookiecare-btn {
		font-size: min(var(--cc-fs-btn, 14px), 3.4cqw);
		padding-inline: clamp(9px, 2.2cqw, 16px);
	}
}

/*
 * The --cc-btn-font/-weight/-transform/-tracking/-radius variables are unset
 * by default (every var() falls back to the previous fixed values). When the
 * "Adopt site design" setting is on, adopt.js probes a theme button at
 * runtime and fills them in, so the banner buttons match the site without
 * any manual configuration.
 */
#cookiecare-banner .cookiecare-btn {
	flex: 0 1 auto;
	min-width: 0;
	padding: 8px 16px;
	border: 1px solid transparent;
	border-radius: var(--cc-btn-radius, var(--cc-radius));
	background: none;
	font-family: var(--cc-btn-font, inherit);
	font-size: var(--cc-fs-btn, 14px);
	font-weight: var(--cc-btn-weight, 600);
	letter-spacing: var(--cc-btn-tracking, normal);
	line-height: 1.4;
	text-transform: var(--cc-btn-transform, none);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

#cookiecare-banner .cookiecare-btn-primary {
	background: var(--cc-btn-bg);
	border-color: var(--cc-btn-bg);
	color: var(--cc-btn-text);
}

#cookiecare-banner .cookiecare-btn-secondary {
	border-color: var(--cc-text);
	color: var(--cc-text);
}

#cookiecare-banner .cookiecare-btn-link {
	padding-inline: 4px;
	border-color: transparent;
	color: var(--cc-btn-bg);
	text-decoration: underline;
}

/* Permanent legal links (privacy policy / imprint) under the actions. */
#cookiecare-banner .cookiecare-legal {
	margin-block-start: 10px;
	font-size: 12px;
	opacity: 0.85;
}

#cookiecare-banner .cookiecare-legal a {
	color: inherit;
	text-decoration: underline;
}

/* In the modal the legal links sit in the footer row, pushed to the end. */
#cookiecare-banner .cookiecare-modal-footer .cookiecare-legal {
	margin-block-start: 0;
	margin-inline-start: auto;
}

/*
 * Modal footer buttons share the panel's one-row rule: the modal is its own
 * size container and the buttons live in a `.cookiecare-actions` group, so
 * the container-query clamp below shrinks them instead of wrapping. The
 * legal links wrap onto their own line when the row is full.
 */
#cookiecare-banner .cookiecare-modal {
	container-type: inline-size;
}

#cookiecare-banner .cookiecare-modal-footer .cookiecare-actions {
	margin-block-start: 0;
}

@supports (font-size: 1cqw) {
	#cookiecare-banner .cookiecare-modal-footer .cookiecare-actions .cookiecare-btn {
		font-size: min(var(--cc-fs-btn, 14px), 2.6cqw);
	}
}

/* --- Box layout: floating card. --- */

/*
 * Clamped rather than fixed: the narrow-screen overrides below cannot win on
 * specificity against the `.cookiecare-pos-*` rules, so the width itself has to
 * stay inside the viewport. Without the clamp the panel overflowed the right
 * edge on small phones (380px box + a 16px inset > 390px viewport).
 */
#cookiecare-banner.cookiecare-layout-box .cookiecare-panel {
	width: min(380px, calc(100vw - 32px));
}

#cookiecare-banner.cookiecare-layout-box.cookiecare-pos-top-left .cookiecare-panel {
	inset-block-start: 16px;
	inset-inline-start: 16px;
}

#cookiecare-banner.cookiecare-layout-box.cookiecare-pos-top-right .cookiecare-panel {
	inset-block-start: 16px;
	inset-inline-end: 16px;
}

#cookiecare-banner.cookiecare-layout-box.cookiecare-pos-bottom-left .cookiecare-panel {
	inset-block-end: 16px;
	inset-inline-start: 16px;
}

#cookiecare-banner.cookiecare-layout-box.cookiecare-pos-bottom-right .cookiecare-panel {
	inset-block-end: 16px;
	inset-inline-end: 16px;
}

#cookiecare-banner.cookiecare-layout-box.cookiecare-pos-top .cookiecare-panel {
	inset-block-start: 16px;
	inset-inline: 0;
	margin-inline: auto;
}

#cookiecare-banner.cookiecare-layout-box.cookiecare-pos-bottom .cookiecare-panel {
	inset-block-end: 16px;
	inset-inline: 0;
	margin-inline: auto;
}

#cookiecare-banner.cookiecare-layout-box.cookiecare-pos-center .cookiecare-panel {
	inset-block-start: 50%;
	inset-inline: 0;
	margin-inline: auto;
	transform: translateY(-50%);
}

/* --- Bar layout: full-width strip docked to an edge. --- */

#cookiecare-banner.cookiecare-layout-bar .cookiecare-panel {
	inset-inline: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	width: auto;
	max-width: none;
	padding-block: 14px;
	border-radius: 0;
}

#cookiecare-banner.cookiecare-layout-bar.cookiecare-pos-top .cookiecare-panel {
	inset-block-start: 0;
}

#cookiecare-banner.cookiecare-layout-bar.cookiecare-pos-bottom .cookiecare-panel {
	inset-block-end: 0;
}

#cookiecare-banner.cookiecare-layout-bar .cookiecare-panel-body {
	flex: 1 1 22em;
}

#cookiecare-banner.cookiecare-layout-bar .cookiecare-title {
	margin-block-end: 4px;
}

#cookiecare-banner.cookiecare-layout-bar .cookiecare-message {
	margin: 0;
}

#cookiecare-banner.cookiecare-layout-bar .cookiecare-actions {
	margin-block-start: 0;
}

/* --- Popup layout: centered modal-like card. --- */

#cookiecare-banner.cookiecare-layout-popup .cookiecare-panel {
	inset-block-start: 50%;
	inset-inline: 0;
	width: min(520px, calc(100vw - 32px));
	margin-inline: auto;
	transform: translateY(-50%);
}

/* -----------------------------------------------------------------------
 * Preference-center modal.
 * -------------------------------------------------------------------- */

#cookiecare-banner .cookiecare-modal {
	position: fixed;
	inset-block-start: 50%;
	inset-inline: 0;
	z-index: 999999;
	display: flex;
	width: 640px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 64px);
	margin-inline: auto;
	background: var(--cc-bg);
	background-image: var(--cc-modal-bg-img, none);
	background-position: center;
	background-size: cover;
	color: var(--cc-text);
	border-radius: var(--cc-radius);
	border: 1px solid rgba(128, 128, 128, 0.35);
	border: 1px solid color-mix(in srgb, var(--cc-text) 22%, transparent);
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
	transform: translateY(-50%);
}

#cookiecare-banner .cookiecare-modal-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: inherit;
}

#cookiecare-banner .cookiecare-modal:focus,
#cookiecare-banner .cookiecare-modal-inner:focus {
	outline: none;
}

#cookiecare-banner .cookiecare-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-block-end: 1px solid rgba(0, 0, 0, 0.1);
}

#cookiecare-banner .cookiecare-modal-heading {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Decision-progress ring. Fill = categories decided (on OR off), driven by
 * banner.js via stroke-dashoffset (circumference 2π·20 ≈ 125.66).
 */
#cookiecare-banner .cookiecare-ring {
	position: relative;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
}

#cookiecare-banner .cookiecare-ring svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

#cookiecare-banner .cookiecare-ring circle {
	fill: none;
	stroke-width: 4;
}

#cookiecare-banner .cookiecare-ring-track {
	stroke: rgba(0, 0, 0, 0.12);
}

#cookiecare-banner .cookiecare-ring-bar {
	stroke: var(--cc-btn-bg);
	stroke-linecap: round;
	stroke-dasharray: 125.66;
	stroke-dashoffset: 125.66;
	transition: stroke-dashoffset 0.35s ease;
}

#cookiecare-banner .cookiecare-ring-count {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
}

#cookiecare-banner .cookiecare-ring-total {
	margin-inline-start: 1px;
	font-size: 10px;
	font-weight: 400;
	opacity: 0.7;
}

#cookiecare-banner .cookiecare-modal-status {
	margin: 2px 0 0;
	font-size: 12px;
	opacity: 0.75;
}

#cookiecare-banner .cookiecare-modal-title {
	font-family: var(--cc-font-heading, inherit);
	font-size: calc(var(--cc-fs-title, 16px) + 2px);
	font-weight: 600;
}

#cookiecare-banner .cookiecare-modal-close {
	padding: 4px 8px;
	border: 0;
	background: none;
	color: inherit;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

#cookiecare-banner .cookiecare-modal-body {
	padding: 16px 20px;
	overflow-y: auto;
}

#cookiecare-banner .cookiecare-modal-intro {
	margin-block-end: 16px;
	font-size: 13px;
}

#cookiecare-banner .cookiecare-modal-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 16px 20px;
	border-block-start: 1px solid rgba(0, 0, 0, 0.1);
}

#cookiecare-banner .cookiecare-withdraw {
	margin-inline-start: auto;
}

/* --- Categories. --- */

#cookiecare-banner .cookiecare-category {
	margin-block-end: 10px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: var(--cc-radius);
}

#cookiecare-banner .cookiecare-category-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
}

#cookiecare-banner .cookiecare-category-name {
	flex: 1 1 auto;
	font-size: 14px;
	font-weight: 600;
}

#cookiecare-banner .cookiecare-always-active {
	flex: none;
	font-size: 12px;
	opacity: 0.75;
}

#cookiecare-banner .cookiecare-category-toggle {
	flex: none;
	padding: 4px;
	border: 0;
	background: none;
	color: var(--cc-btn-bg);
	font-size: 13px;
	cursor: pointer;
	text-decoration: underline;
}

#cookiecare-banner .cookiecare-category-body {
	padding: 0 14px 12px;
	font-size: 13px;
}

#cookiecare-banner .cookiecare-category-description {
	margin-block-end: 8px;
}

/* --- Toggle switches (button[role="switch"]). --- */

#cookiecare-banner .cookiecare-switch {
	position: relative;
	flex: none;
	width: 40px;
	height: 22px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.15);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

#cookiecare-banner .cookiecare-switch-track {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

#cookiecare-banner .cookiecare-switch-track::after {
	content: "";
	position: absolute;
	inset-block-start: 2px;
	inset-inline-start: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #ffffff;
	transition: inset-inline-start 0.15s ease;
}

#cookiecare-banner .cookiecare-switch[aria-checked="true"] {
	border-color: var(--cc-btn-bg);
	background: var(--cc-btn-bg);
}

#cookiecare-banner .cookiecare-switch[aria-checked="true"] .cookiecare-switch-track::after {
	inset-inline-start: calc(100% - 18px);
}

#cookiecare-banner .cookiecare-switch:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

/* --- Per-category cookie table. --- */

#cookiecare-banner .cookiecare-cookie-table {
	width: 100%;
	margin-block-start: 8px;
	border-collapse: collapse;
	font-size: 12px;
}

#cookiecare-banner .cookiecare-cookie-table th,
#cookiecare-banner .cookiecare-cookie-table td {
	padding: 6px 8px;
	border-block-end: 1px solid rgba(0, 0, 0, 0.08);
	text-align: start;
	vertical-align: top;
}

#cookiecare-banner .cookiecare-cookie-table th {
	font-weight: 600;
	opacity: 0.8;
}

/* -----------------------------------------------------------------------
 * Revisit widget.
 * -------------------------------------------------------------------- */

#cookiecare-banner .cookiecare-revisit {
	position: fixed;
	inset-block-end: var(--cc-rv-y, 16px);
	z-index: 999998;
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--cc-btn-bg);
	color: var(--cc-btn-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

#cookiecare-banner .cookiecare-revisit-bottom-left {
	inset-inline-start: var(--cc-rv-x, 16px);
}

#cookiecare-banner .cookiecare-revisit-bottom-right {
	inset-inline-end: var(--cc-rv-x, 16px);
}

/* -----------------------------------------------------------------------
 * Responsive & motion preferences.
 * -------------------------------------------------------------------- */

@media (max-width: 600px) {
	/*
	 * Keep a viewport-relative clamp here. `max-width: none` used to drop the
	 * base-rule safety net while the layout `width` survived on specificity,
	 * which is what let the panel run off-screen.
	 */
	#cookiecare-banner .cookiecare-panel,
	#cookiecare-banner .cookiecare-modal {
		width: auto;
		max-width: calc(100vw - 24px);
	}

	/* Full-width on small screens, regardless of the configured position. */
	#cookiecare-banner.cookiecare-layout-box .cookiecare-panel,
	#cookiecare-banner.cookiecare-layout-popup .cookiecare-panel {
		inset-inline: 12px;
		margin-inline: 0;
	}

	#cookiecare-banner .cookiecare-modal {
		inset-inline: 12px;
		max-height: calc(100vh - 48px);
	}

	#cookiecare-banner.cookiecare-layout-bar .cookiecare-panel {
		padding: 14px;
	}

	/*
	 * Three long labels can never share one row on a phone-width modal —
	 * stack them full-width instead (the standard CMP pattern). The banner
	 * panel keeps its one-row clamp; only the modal footer stacks.
	 */
	#cookiecare-banner .cookiecare-modal-footer .cookiecare-actions {
		flex-wrap: wrap;
	}

	#cookiecare-banner .cookiecare-modal-footer .cookiecare-actions .cookiecare-btn {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	#cookiecare-banner *,
	#cookiecare-banner *::before,
	#cookiecare-banner *::after {
		transition: none !important;
	}
}

/* -----------------------------------------------------------------------
 * RTL ([dir="rtl"]): logical properties above already flip layout; these
 * cover text alignment and the remaining asymmetric pieces.
 * -------------------------------------------------------------------- */

[dir="rtl"] #cookiecare-banner {
	text-align: right;
}

[dir="rtl"] #cookiecare-banner .cookiecare-cookie-table th,
[dir="rtl"] #cookiecare-banner .cookiecare-cookie-table td {
	text-align: right;
}

[dir="rtl"] #cookiecare-banner .cookiecare-modal-close {
	margin-inline-start: auto;
}

/* --------------------------------------------------------------------------
 * Motion: a short entrance so the banner does not pop in, a press response on
 * the buttons, and a fade-out once a choice is made. Only opacity/transform
 * are animated, so nothing reflows and no layout shift is introduced.
 * Everything below is disabled under prefers-reduced-motion.
 * ----------------------------------------------------------------------- */

#cookiecare-banner .cookiecare-btn:active {
	transform: translateY(1px);
}

@keyframes cookiecare-enter {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

#cookiecare-banner .cookiecare-panel:not([hidden]),
#cookiecare-banner .cookiecare-modal:not([hidden]),
#cookiecare-banner .cookiecare-revisit:not([hidden]) {
	animation: cookiecare-enter 0.24s ease-out both;
}

/* Center layouts carry their own translate; animating it would fight them. */
#cookiecare-banner.cookiecare-pos-center .cookiecare-panel:not([hidden]),
#cookiecare-banner .cookiecare-modal:not([hidden]) {
	animation-name: cookiecare-fade-in;
}

@keyframes cookiecare-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

#cookiecare-banner .cookiecare-panel.cookiecare-leaving,
#cookiecare-banner .cookiecare-modal.cookiecare-leaving,
#cookiecare-banner .cookiecare-revisit.cookiecare-leaving {
	animation: none;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

#cookiecare-banner .cookiecare-panel.cookiecare-leaving,
#cookiecare-banner .cookiecare-revisit.cookiecare-leaving {
	transform: translateY(8px);
}

@media (prefers-reduced-motion: reduce) {
	#cookiecare-banner .cookiecare-panel:not([hidden]),
	#cookiecare-banner .cookiecare-modal:not([hidden]),
	#cookiecare-banner .cookiecare-revisit:not([hidden]) {
		animation: none;
	}

	#cookiecare-banner .cookiecare-btn:active {
		transform: none;
	}

	#cookiecare-banner .cookiecare-panel.cookiecare-leaving,
	#cookiecare-banner .cookiecare-modal.cookiecare-leaving,
	#cookiecare-banner .cookiecare-revisit.cookiecare-leaving {
		transition: none;
		transform: none;
	}
}