/**
 * @file
 * Cookie consent banner styles.
 *
 * Overrides the vendored vanilla-cookieconsent stylesheet, which is loaded
 * first. Colours come from CSS custom properties with neutral fallbacks, so the
 * banner is usable out of the box; set these on :root in the theme to match the
 * site:
 *
 *   --cookie-consent-btn-bg                 primary button background
 *   --cookie-consent-btn-bg-hover           primary button background, hover
 *   --cookie-consent-btn-color              primary button text
 *   --cookie-consent-btn-secondary          secondary button text and icons
 *   --cookie-consent-btn-secondary-hover    secondary button text and icons, hover
 *   --cookie-consent-toggle-on              category toggle, accepted
 *   --cookie-consent-toggle-on-border       category toggle outline, accepted
 *   --cookie-consent-toggle-off             category toggle, rejected
 *   --cookie-consent-toggle-off-border      category toggle outline, rejected
 */
/* :root {
	--cookie-consent-btn-bg: #hex;
	--cookie-consent-btn-bg-hover: #hex;
	--cookie-consent-btn-color: #hex;
	--cookie-consent-btn-secondary: #hex;
	--cookie-consent-btn-secondary-hover: #hex;
	--cookie-consent-toggle-on: #hex;
	--cookie-consent-toggle-on-border: #hex;
	--cookie-consent-toggle-off: #hex;
	--cookie-consent-toggle-off-border: #hex;
} */

#cc-main {
	font-family: inherit !important;
}
#cc-main button.cm__btn,
#cc-main button.pm__btn {
	display: inline-flex;
	justify-content: center;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	white-space: nowrap;
	background-color: var(--cookie-consent-btn-bg, #222222);
	border: 1px solid var(--cookie-consent-btn-bg, #222222);
	color: var(--cookie-consent-btn-color, #ffffff);
	transition: all 0.2s ease;
	border-radius: 24px;
	text-align: center;
	padding: 8px 16px;
	min-height: unset;
}
#cc-main button.cm__btn:hover,
#cc-main button.pm__btn:hover {
	box-shadow: 0px 2px 4px 0px rgba(22, 26, 29, 0.32);
	background-color: var(--cookie-consent-btn-bg-hover, #000000);
	border-color: var(--cookie-consent-btn-bg-hover, #000000);
}
#cc-main button.cm__btn.pm__btn--secondary, #cc-main button.cm__btn.cm__btn--secondary,
#cc-main button.pm__btn.pm__btn--secondary,
#cc-main button.pm__btn.cm__btn--secondary {
	color: var(--cookie-consent-btn-secondary, #222222);
	background-color: transparent;
}
#cc-main button.cm__btn.pm__btn--secondary:hover, #cc-main button.cm__btn.cm__btn--secondary:hover,
#cc-main button.pm__btn.pm__btn--secondary:hover,
#cc-main button.pm__btn.cm__btn--secondary:hover {
	color: var(--cookie-consent-btn-secondary-hover, #000000);
	box-shadow: 0px 2px 4px 0px rgba(22, 26, 29, 0.32);
	border-color: var(--cookie-consent-btn-secondary-hover, #000000);
}
#cc-main .cm-wrapper .cm.cm--box {
	border-radius: 24px;
}
#cc-main .cm-wrapper .cm.cm--box .cm__body .cm__texts {
	padding: 16px 0 0 0;
}
#cc-main .cm-wrapper .cm.cm--box .cm__body .cm__texts .cm__title {
	font-size: 20px;
	line-height: 26px;
	font-weight: 600;
	padding: 0 16px;
}
#cc-main .cm-wrapper .cm.cm--box .cm__body .cm__texts .cm__desc {
	font-size: 16px;
	line-height: 24px;
	padding: 0 16px 16px;
	margin: 16px 0 0 0;
}
#cc-main .cm-wrapper .cm.cm--box .cm__body .cm__btns {
	padding: 16px;
}
#cc-main .cm-wrapper .cm.cm--box .cm__body > .cm__btn--close {
	width: 30px;
	height: 30px;
	background: unset;
	border: none;
	right: 16px;
	top: 16px;
}
#cc-main .cm-wrapper .cm.cm--box .cm__body > .cm__btn--close svg {
	display: block;
	margin: 0;
	stroke: var(--cookie-consent-btn-secondary-hover, #000000);
	transform: scale(0.7);
}
#cc-main .cm-wrapper .cm.cm--box .cm__body > .cm__btn--close:hover {
	box-shadow: none;
}
#cc-main .cm-wrapper .cm.cm--box .cm__footer .cm__link-group {
	justify-content: center;
	gap: 16px;
}
#cc-main .cm-wrapper .cm.cm--box .cm__footer .cm__link-group > * + * {
	margin: 0;
}
#cc-main .pm-wrapper .pm.pm--box {
	border-radius: 24px;
}
#cc-main .pm-wrapper .pm.pm--box .pm__header {
	padding: 16px;
}
#cc-main .pm-wrapper .pm.pm--box .pm__header .pm__title {
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
}
#cc-main .pm-wrapper .pm.pm--box .pm__header .pm__close-btn {
	background: unset;
	border-radius: 12px;
	border-color: var(--cookie-consent-btn-bg, #222222);
}
#cc-main .pm-wrapper .pm.pm--box .pm__header .pm__close-btn svg {
	display: block;
	margin: 0;
	stroke: var(--cookie-consent-btn-secondary, #222222);
}
#cc-main .pm-wrapper .pm.pm--box .pm__header .pm__close-btn:hover {
	border-color: var(--cookie-consent-btn-secondary-hover, #000000);
}
#cc-main .pm-wrapper .pm.pm--box .pm__header .pm__close-btn:hover svg {
	stroke: var(--cookie-consent-btn-secondary-hover, #000000);
}
#cc-main .pm-wrapper .pm.pm--box .pm__body {
	padding: 16px;
}
#cc-main .pm-wrapper .pm.pm--box .pm__body .pm__section-toggles {
	display: flex;
	flex-flow: column;
	gap: 8px;
}
#cc-main .pm-wrapper .pm.pm--box .pm__body .pm__section-toggles .pm__section--toggle {
	margin: 0;
}
#cc-main .pm-wrapper .pm.pm--box .pm__body .pm__section-toggles .pm__section--toggle .pm__section-title-wrapper .pm__section-title {
	font-size: 16px;
	font-weight: 400;
	padding: 16px 0 16px 50px;
}
#cc-main .pm-wrapper .pm.pm--box .pm__body .pm__section-toggles .pm__section--toggle .pm__section-title-wrapper .pm__section-arrow {
	background-color: unset;
}
#cc-main .pm-wrapper .pm.pm--box .pm__body .pm__section-toggles .pm__section--toggle .pm__section-title-wrapper .section__toggle ~ .toggle__icon {
	background-color: var(--cookie-consent-toggle-off, #e80000);
	box-shadow: 0 0 0 1px var(--cookie-consent-toggle-off-border, darkred);
}
#cc-main .pm-wrapper .pm.pm--box .pm__body .pm__section-toggles .pm__section--toggle .pm__section-title-wrapper .section__toggle ~ .toggle__icon .toggle__icon-circle > span {
	display: none;
}
#cc-main .pm-wrapper .pm.pm--box .pm__body .pm__section-toggles .pm__section--toggle .pm__section-title-wrapper .section__toggle:checked ~ .toggle__icon {
	background-color: var(--cookie-consent-toggle-on, green);
	box-shadow: 0 0 0 1px var(--cookie-consent-toggle-on-border, #015f01);
}
#cc-main .pm-wrapper .pm.pm--box .pm__body .pm__section-toggles .pm__section--toggle .pm__section-title-wrapper .section__toggle:disabled ~ .toggle__icon {
	filter: grayscale(1);
}
#cc-main .pm-wrapper .pm.pm--box .pm__footer {
	padding: 16px;
}
#cc-main .pm-wrapper .pm.pm--box .pm__footer .pm__btn-group {
	gap: 16px;
}
#cc-main .pm-wrapper .pm.pm--box .pm__footer .pm__btn-group .pm__btn + .pm__btn {
	margin: 0;
}