/*
 * Maps the banner onto the active style. Everything is taken from the style's
 * own variables, so a dark scheme or a custom palette carries over without
 * further work.
 */
#cc-main {
	--cc-font-family: inherit;
	--cc-modal-border-radius: var(--wcfBorderRadius, 8px);
	--cc-btn-border-radius: var(--wcfBorderRadius, 4px);
	--cc-z-index: 2147483000;

	--cc-bg: var(--wcfContentContainerBackground);
	--cc-primary-color: var(--wcfContentHeadlineText);
	--cc-secondary-color: var(--wcfContentText);
	--cc-link-color: var(--wcfContentLink);

	--cc-btn-primary-bg: var(--wcfButtonPrimaryBackground);
	--cc-btn-primary-color: var(--wcfButtonPrimaryText);
	--cc-btn-primary-border-color: var(--wcfButtonPrimaryBackground);
	--cc-btn-primary-hover-bg: var(--wcfButtonPrimaryBackgroundActive);
	--cc-btn-primary-hover-color: var(--wcfButtonPrimaryTextActive);
	--cc-btn-primary-hover-border-color: var(--wcfButtonPrimaryBackgroundActive);

	--cc-btn-secondary-bg: var(--wcfButtonBackground);
	--cc-btn-secondary-color: var(--wcfButtonText);
	--cc-btn-secondary-border-color: var(--wcfButtonBackground);
	--cc-btn-secondary-hover-bg: var(--wcfButtonBackgroundActive);
	--cc-btn-secondary-hover-color: var(--wcfButtonTextActive);
	--cc-btn-secondary-hover-border-color: var(--wcfButtonBackgroundActive);

	--cc-separator-border-color: var(--wcfContentBorderInner);

	--cc-toggle-on-bg: var(--wcfButtonPrimaryBackground);
	--cc-toggle-off-bg: var(--wcfContentDimmedText);
	--cc-toggle-on-knob-bg: var(--wcfButtonPrimaryText);
	--cc-toggle-off-knob-bg: var(--wcfContentContainerBackground);
	--cc-toggle-enabled-icon-color: var(--wcfButtonPrimaryBackground);
	--cc-toggle-disabled-icon-color: var(--wcfContentDimmedText);
	--cc-toggle-readonly-bg: var(--wcfContentBorderInner);
	--cc-toggle-readonly-knob-bg: var(--wcfContentContainerBackground);
	--cc-toggle-readonly-knob-icon-color: var(--wcfContentBorderInner);

	--cc-section-category-border: var(--wcfContentContainerBorder);
	--cc-cookie-category-block-bg: var(--wcfContentBackground);
	--cc-cookie-category-block-border: var(--wcfContentContainerBorder);
	--cc-cookie-category-block-hover-bg: var(--wcfContentBackground);
	--cc-cookie-category-block-hover-border: var(--wcfContentContainerBorder);
	--cc-cookie-category-expanded-block-bg: transparent;
	--cc-cookie-category-expanded-block-hover-bg: var(--wcfContentBackground);

	--cc-footer-bg: var(--wcfContentBackground);
	--cc-footer-color: var(--wcfContentDimmedText);
	--cc-footer-border-color: var(--wcfContentBorderInner);
}

#cc-main .cm,
#cc-main .pm {
	border: 1px solid var(--wcfContentContainerBorder);
}

/*
 * Consent modal layout. The library stacks three full-width buttons, which
 * makes the box tall and heavy. Accept and decline sit side by side instead —
 * same size, same colour, so neither is favoured — and "settings" steps back
 * to a text button. On narrow screens the library stacks them again.
 */
#cc-main .cm {
	box-shadow: 0 12px 40px rgb(0 0 0 / 22%);
}

/*
 * Only the plain box gets the wider width. "Cloud", "bar" and "wide box" keep
 * the library's own widths, otherwise their text is squeezed into a column.
 */
#cc-main .cm--box:not(.cm--wide) {
	max-width: 27rem;
}

#cc-main .cm__body {
	padding-bottom: 0.25rem;
}

#cc-main .cm__title {
	font-size: 1.1rem;
	line-height: 1.3;
}

#cc-main .cm__desc {
	font-size: 0.85rem;
	line-height: 1.55;
	max-height: none;
}

#cc-main .cm--box .cm__btns {
	border-top: 0;
	padding-top: 1rem;
}

#cc-main .cm--box .cm__btn-group:first-child {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: 1fr 1fr;
}

#cc-main .cm--box .cm__btn-group:first-child .cm__btn {
	margin: 0;
}

#cc-main .cm__btn {
	font-size: 0.85rem;
	min-height: 40px;
	padding: 0.55em 1em;
}

#cc-main .cm__btn--secondary {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--wcfContentLink) !important;
	font-weight: 500;
	min-height: 32px;
}

#cc-main .cm__btn--secondary:hover {
	text-decoration: underline;
}

#cc-main .cm__footer {
	padding: 0.6rem 1.3rem;
}

/* Long German words must wrap as a whole, never in the middle. */
#cc-main .cm__link-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1rem;
	justify-content: flex-start;
}

#cc-main .cm__link-group a {
	font-size: 0.75rem;
	font-weight: 400;
	margin: 0;
	white-space: nowrap;
}

#cc-main .pm__table-td small {
	color: var(--wcfContentDimmedText);
}

.ampConsentFooterLink {
	text-align: center;
	margin-bottom: 10px;
}