/**
 * Detro Consent – banner.
 *
 * The rule that matters legally is the one on .detro-consent__button: accept
 * and reject are the SAME declaration block. Not similar – the same. Any change
 * that makes one of them larger, darker, bolder or more prominent than the
 * other breaks "Ablehnen so einfach wie Akzeptieren" and makes the consent
 * invalid. Style them together or not at all.
 *
 * The banner is anchored to the bottom and does not cover the page: it is not a
 * cookie wall, so the shop stays usable while the visitor decides.
 */

.detro-consent {
	position: fixed;
	z-index: 99999;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1rem;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.detro-consent[hidden] {
	display: none;
}

.detro-consent__dialog {
	pointer-events: auto;
	box-sizing: border-box;
	width: 100%;
	max-width: 46rem;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	padding: 1.5rem;
	background: var(--wp--preset--color--primary, #ffffff);
	color: var(--wp--preset--color--text-dark, #1c1c1c);
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 14px;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.detro-consent__dialog:focus {
	outline: none;
}

.detro-consent__dialog:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #f4b6c2);
	outline-offset: 3px;
}

.detro-consent__title {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	line-height: 1.3;
	font-weight: 600;
}

.detro-consent__text {
	margin: 0 0 1rem;
}

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

.detro-consent__details {
	margin: 0 0 1rem;
	padding: 0.25rem 0 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.detro-consent__details[hidden] {
	display: none;
}

.detro-consent__category {
	padding: 0.85rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.detro-consent__category:last-child {
	border-bottom: none;
}

.detro-consent__category-label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 600;
	cursor: pointer;
}

.detro-consent__checkbox {
	width: 1.15rem;
	height: 1.15rem;
	flex: 0 0 auto;
	accent-color: var(--wp--preset--color--text-dark, #1c1c1c);
	cursor: pointer;
}

.detro-consent__checkbox:disabled {
	cursor: default;
	opacity: 0.65;
}

.detro-consent__badge {
	margin-left: 0.4rem;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	background: var(--wp--preset--color--neutral, #f2f2f2);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
}

.detro-consent__category-text {
	margin: 0.4rem 0 0 1.75rem;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text-light, #666666);
}

/* --- Actions ---------------------------------------------------------- */

.detro-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 0.9rem;
}

/*
 * Accept and reject. One rule, deliberately: identical size, colour, weight and
 * prominence. See the file header before changing anything here.
 */
.detro-consent__button {
	flex: 1 1 12rem;
	box-sizing: border-box;
	min-height: 2.9rem;
	padding: 0.75rem 1.25rem;
	margin: 0;
	border: 2px solid var(--wp--preset--color--text-dark, #1c1c1c);
	border-radius: 10px;
	background: var(--wp--preset--color--text-dark, #1c1c1c);
	color: #ffffff;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}

.detro-consent__button:hover {
	opacity: 0.88;
}

.detro-consent__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #f4b6c2);
	outline-offset: 3px;
}

.detro-consent__button[hidden] {
	display: none;
}

/* --- Secondary links -------------------------------------------------- */

.detro-consent__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0;
	font-size: 0.875rem;
}

.detro-consent__links a,
.detro-consent__link {
	color: var(--wp--preset--color--text-light, #666666);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.detro-consent__link {
	padding: 0;
	border: none;
	background: none;
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
}

.detro-consent__links a:hover,
.detro-consent__link:hover {
	color: var(--wp--preset--color--text-dark, #1c1c1c);
}

.detro-consent__links a:focus-visible,
.detro-consent__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #f4b6c2);
	outline-offset: 2px;
	border-radius: 2px;
}

/* --- Small screens ---------------------------------------------------- */

@media (max-width: 480px) {
	.detro-consent {
		padding: 0.5rem;
	}

	.detro-consent__dialog {
		padding: 1.15rem;
		max-height: calc(100vh - 1rem);
	}

	/* Full width, stacked – still identical to each other. */
	.detro-consent__button {
		flex: 1 1 100%;
	}
}