/**
 * DSGVO Cookie Consent – Banner Styling
 *
 * Alle Farben, Abstände und Radien laufen über CSS-Variablen (--dcc-*).
 * Zum Anpassen an das eigene Theme reicht es, diese Variablen in einem
 * Child-Theme, Customizer-Snippet oder späteren Backend-Einstellungen
 * zu überschreiben – z. B.:
 *
 * :root {
 *   --dcc-primary-color: #ff5a5f;
 * }
 */

:root {
	--dcc-bg: #ffffff;
	--dcc-text-color: #2b2b2b;
	--dcc-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--dcc-font-size: 14px;

	--dcc-border-radius: 14px;
	--dcc-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
	--dcc-max-width: 400px;
	--dcc-gap: 14px;
	--dcc-padding: 20px;

	--dcc-offset-bottom: 20px;
	--dcc-z-index: 999999;

	--dcc-link-color: #4d7ea8;

	--dcc-primary-bg: #7c9a3a;
	--dcc-primary-bg-hover: #6c8632;
	--dcc-primary-text: #ffffff;

	--dcc-secondary-bg: #eef3e2;
	--dcc-secondary-bg-hover: #e3ebd2;
	--dcc-secondary-text: #5c7a2e;
	--dcc-secondary-border: transparent;

	--dcc-btn-radius: 8px;
}

.dcc-banner {
	position: fixed;
	left: 50%;
	bottom: var(--dcc-offset-bottom);
	z-index: var(--dcc-z-index);
	max-width: var(--dcc-max-width);
	width: calc(100% - 40px);

	font-family: var(--dcc-font-family);
	font-size: var(--dcc-font-size);
	color: var(--dcc-text-color);

	opacity: 0;
	transform: translate(-50%, 12px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}

.dcc-banner[hidden] {
	display: none;
}

.dcc-banner--visible {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}

.dcc-banner__inner {
	background: var(--dcc-bg);
	border-radius: var(--dcc-border-radius);
	box-shadow: var(--dcc-shadow);
	padding: var(--dcc-padding);
	display: flex;
	flex-direction: column;
	gap: var(--dcc-gap);
}

.dcc-banner__text {
	margin: 0;
	line-height: 1.5;
}

.dcc-banner__title {
	font-weight: 700;
}

.dcc-banner__link {
	color: var(--dcc-link-color);
	text-decoration: underline;
}

.dcc-banner__link:hover {
	text-decoration: none;
}

.dcc-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.dcc-btn {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	border: 1px solid transparent;
	border-radius: var(--dcc-btn-radius);
	padding: 11px 18px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	flex: 1 1 auto;
	text-align: center;
	white-space: nowrap;
}

.dcc-btn:focus-visible {
	outline: 2px solid var(--dcc-link-color);
	outline-offset: 2px;
}

.dcc-btn--primary {
	background-color: var(--dcc-primary-bg);
	color: var(--dcc-primary-text);
}

.dcc-btn--primary:hover {
	background-color: var(--dcc-primary-bg-hover);
}

.dcc-btn--secondary {
	background-color: var(--dcc-secondary-bg);
	color: var(--dcc-secondary-text);
	border-color: var(--dcc-secondary-border);
}

.dcc-btn--secondary:hover {
	background-color: var(--dcc-secondary-bg-hover);
}

.dcc-embed-placeholder {
	background: var(--dcc-bg);
	border-radius: var(--dcc-border-radius);
	box-shadow: var(--dcc-shadow);
	font-family: var(--dcc-font-family);
	color: var(--dcc-text-color);
}

.dcc-embed-placeholder__inner {
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.dcc-embed-placeholder__text {
	margin: 0;
	line-height: 1.5;
	font-size: var(--dcc-font-size);
}

.dcc-embed-placeholder__load {
	min-width: 160px;
}

.dcc-modal {
	position: fixed;
	inset: 0;
	z-index: calc(var(--dcc-z-index) + 1);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	font-family: var(--dcc-font-family);
	font-size: var(--dcc-font-size);
	color: var(--dcc-text-color);
}

.dcc-modal[hidden] {
	display: none;
}

.dcc-modal--visible {
	opacity: 1;
	pointer-events: auto;
}

.dcc-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.dcc-modal__dialog {
	position: relative;
	background: var(--dcc-bg);
	border-radius: var(--dcc-border-radius);
	box-shadow: var(--dcc-shadow);
	max-width: 480px;
	width: calc(100% - 40px);
	max-height: calc(100vh - 60px);
	overflow-y: auto;
	padding: 28px;
}

.dcc-modal__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
}

.dcc-modal__intro {
	margin: 0 0 16px;
	line-height: 1.5;
}

.dcc-modal__category {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding: 14px 0;
}

.dcc-modal__category-header {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	cursor: pointer;
}

.dcc-modal__category-header input {
	width: 18px;
	height: 18px;
	accent-color: var(--dcc-primary-bg);
}

.dcc-modal__category-desc {
	margin: 6px 0 0 28px;
	font-size: 13px;
	opacity: 0.8;
	line-height: 1.5;
}

.dcc-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

.dcc-revoke-consent-link {
	display: inline;
	color: var(--dcc-link-color);
	text-decoration: underline;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font-family: var(--dcc-font-family);
	font-size: inherit;
	line-height: inherit;
}

.dcc-revoke-consent-link:hover {
	text-decoration: none;
}

@media (max-width: 480px) {
	.dcc-banner {
		left: 50%;
		bottom: 12px;
		width: calc(100% - 24px);
		max-width: none;
	}

	.dcc-banner__actions {
		flex-direction: column;
	}
}