/*
 * De cookiemelding van de plugin GDPR Cookie Compliance, in de huisstijl.
 *
 * Een wit venster linksonder, geen balk over de volle breedte. Accepteren en
 * weigeren zijn even groot en even zichtbaar, zoals de Autoriteit Persoonsgegevens
 * vraagt; "Zelf kiezen" opent het venster met de keuzes per soort cookie.
 *
 * In de plugin staan Positie op linksonder en Kleurenschema op licht. De plugin
 * schrijft zijn regels met een id en een rij klassen, ook per positie; de
 * selectors hieronder volgen die opbouw, zodat ze minstens zo zwaar zijn en door
 * de volgorde winnen. Kiest iemand in de plugin een andere positie of het donkere
 * schema, dan valt de melding terug op de opmaak van de plugin.
 */

:root {
	--moove-gdpr-primary-colour: var(--sm-petrol);
	--moove-gdpr-button-bg: var(--sm-petrol);
	--moove-gdpr-button-hover-bg: var(--sm-petrol-tint-1);
	--moove-gdpr-button-font: var(--sm-text-on-brand);
}

/* Het venster */

#moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom_left:not(.gdpr-full-screen-infobar).moove-gdpr-light-scheme {
	--cookie-gap: var(--space-md);
	top: auto;
	right: var(--cookie-gap);
	bottom: var(--cookie-gap);
	left: var(--cookie-gap);
	width: auto;
	min-height: 0;
	max-height: calc(100dvh - 2 * var(--cookie-gap));
	overflow-y: auto;
	border: 0;
	border-radius: 0;
	background: var(--sm-bg-default);
	box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--sm-petrol) 20%, transparent);
	color: var(--sm-text-primary);
	font-family: var(--sm-font);
	text-align: left;
	transition: transform 0.3s ease;
}

/* Verborgen schuift het venster omlaag uit beeld, en is het ook met de tab niet te bereiken. */
#moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom_left:not(.gdpr-full-screen-infobar).moove-gdpr-light-scheme.moove-gdpr-info-bar-hidden {
	bottom: var(--cookie-gap);
	visibility: hidden;
	transform: translateY(calc(100% + 2 * var(--cookie-gap)));
	transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

@media (min-width: 48rem) {
	#moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom_left:not(.gdpr-full-screen-infobar).moove-gdpr-light-scheme {
		--cookie-gap: var(--space-lg);
		right: auto;
		width: 27.5rem;
		max-width: calc(100vw - 2 * var(--cookie-gap));
	}
}

#moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom_left:not(.gdpr-full-screen-infobar).moove-gdpr-light-scheme .moove-gdpr-info-bar-container {
	display: block;
	padding: var(--space-lg);
}

@media (min-width: 48rem) {
	#moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom_left:not(.gdpr-full-screen-infobar).moove-gdpr-light-scheme .moove-gdpr-info-bar-container {
		padding: var(--space-xl);
	}
}

#moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom_left:not(.gdpr-full-screen-infobar).moove-gdpr-light-scheme .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-lg);
	padding: 0;
}

/* Titel en tekst */

#moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom_left:not(.gdpr-full-screen-infobar).moove-gdpr-light-scheme .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content .moove-gdpr-cookie-notice {
	margin: 0;
	padding: 0;
}

#moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom_left:not(.gdpr-full-screen-infobar).moove-gdpr-light-scheme .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content h3 {
	margin: 0 0 var(--space-sm);
	color: var(--sm-text-brand);
	font-size: var(--sm-kop-m-size);
	font-weight: 300;
	line-height: var(--sm-kop-m-line-height);
	letter-spacing: var(--sm-kop-m-letter-spacing);
	text-transform: uppercase;
}

#moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom_left:not(.gdpr-full-screen-infobar).moove-gdpr-light-scheme .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p {
	margin: 0;
	color: var(--sm-text-primary);
	font-size: var(--sm-body-size);
	font-weight: 400;
	line-height: var(--sm-body-line-height);
}

#moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom_left:not(.gdpr-full-screen-infobar).moove-gdpr-light-scheme .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p a {
	color: var(--sm-text-brand);
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

#moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom_left:not(.gdpr-full-screen-infobar).moove-gdpr-light-scheme .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p a:hover {
	text-decoration-thickness: 2px;
}

/* Knoppen: accepteren en weigeren naast elkaar, op een smal scherm onder elkaar */

#moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom_left:not(.gdpr-full-screen-infobar).moove-gdpr-light-scheme .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content .moove-gdpr-button-holder {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
	gap: var(--space-sm);
	padding: 0;
}

#moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom_left:not(.gdpr-full-screen-infobar).moove-gdpr-light-scheme .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.75rem;
	margin: 0;
	padding: var(--space-sm) var(--space-md);
	border: 0;
	border-radius: 0;
	background: var(--sm-bg-brand);
	box-shadow: none;
	color: var(--sm-text-on-brand);
	font-size: var(--sm-knop-size);
	font-weight: 700;
	line-height: 1.25rem;
	letter-spacing: var(--sm-tussenkop-letter-spacing);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: normal;
	opacity: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

#moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom_left:not(.gdpr-full-screen-infobar).moove-gdpr-light-scheme .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton:hover {
	background: var(--sm-petrol-tint-1);
	color: var(--sm-text-on-brand);
}

/* Zelf kiezen: een tekstlink over de volle breedte, onder de twee knoppen */

#moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom_left:not(.gdpr-full-screen-infobar).moove-gdpr-light-scheme .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton.moove-gdpr-infobar-settings-btn {
	grid-column: 1 / -1;
	min-height: 3rem;
	padding: 0;
	background: transparent;
	color: var(--sm-text-brand);
	font-size: var(--sm-body-size);
	font-weight: 400;
	letter-spacing: normal;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-transform: none;
}

#moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom_left:not(.gdpr-full-screen-infobar).moove-gdpr-light-scheme .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton.moove-gdpr-infobar-settings-btn:hover {
	background: transparent;
	color: var(--sm-text-brand);
	text-decoration-thickness: 2px;
}

/* Het venster Zelf kiezen, met de keuzes per soort cookie */

.gdpr_lightbox {
	background: color-mix(in srgb, var(--sm-petrol) 85%, transparent);
}

#moove_gdpr_cookie_modal {
	font-family: var(--sm-font);
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content {
	border-radius: 0;
	color: var(--sm-text-primary);
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content {
	border-radius: 0;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content {
	background: var(--sm-grijs-50);
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content::before {
	background: var(--sm-border-default);
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content.logo-position-left .moove-gdpr-company-logo-holder {
	text-align: center;
}

/* Op desktop een smallere linkerkolom, zodat de uitleg meer ruimte krijgt. */
@media (min-width: 64rem) {
	#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content {
		width: 35%;
	}

	#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content {
		width: 65%;
	}
}

/* Sluiten: een petrol vlak met een wit kruis, in de hoek van het venster */

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-close {
	top: 0;
	right: 0;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-close span.gdpr-icon {
	border-color: var(--sm-bg-brand);
	border-radius: 0;
	background: var(--sm-bg-brand);
	color: var(--sm-text-on-brand);
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-close:hover span.gdpr-icon {
	border-color: var(--sm-petrol-tint-1);
	background: var(--sm-petrol-tint-1);
	color: var(--sm-text-on-brand);
}

/* Soorten cookies in de linkerkolom; de gekozen soort is petrol */

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li button {
	min-height: 3rem;
	border-color: var(--sm-grijs-50);
	border-radius: 0;
	background: var(--sm-grijs-50);
	color: var(--sm-text-brand);
	font-size: var(--sm-knop-size);
	font-weight: 700;
	line-height: 1.25rem;
	letter-spacing: var(--sm-knop-letter-spacing);
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li:not(.menu-item-selected) button:hover {
	border-color: var(--sm-bg-warm);
	background: var(--sm-bg-warm);
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li.menu-item-selected button {
	border-color: var(--sm-bg-brand);
	background: var(--sm-bg-brand);
	color: var(--sm-text-on-brand);
}

/* Uitleg per soort */

/* Op mobiel en tablet zijn de titels de knoppen van een uitklaplijst: klein, zoals een tussenkop. */
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main div.tab-title {
	color: var(--sm-text-brand);
	font-size: var(--sm-tussenkop-size);
	font-weight: 700;
	line-height: var(--sm-tussenkop-line-height);
	letter-spacing: var(--sm-tussenkop-letter-spacing);
	text-transform: uppercase;
}

@media (min-width: 64rem) {
	#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main div.tab-title {
		font-size: var(--sm-kop-m-size);
		font-weight: 300;
		line-height: var(--sm-kop-m-line-height);
		letter-spacing: var(--sm-kop-m-letter-spacing);
	}
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main .moove-gdpr-tab-main-content p,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main .moove-gdpr-tab-main-content li {
	color: var(--sm-text-primary);
	font-size: var(--sm-body-size);
	line-height: var(--sm-body-line-height);
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main .moove-gdpr-tab-main-content a {
	color: var(--sm-text-brand);
}

/* Schakelaars: grijs is uit, teal is aan. De tekst ernaast staat in petrol of grijs, voor genoeg contrast. */

#moove_gdpr_cookie_modal .cookie-switch .cookie-slider {
	background-color: var(--sm-grijs-400);
}

#moove_gdpr_cookie_modal .cookie-switch input:checked + .cookie-slider {
	background-color: var(--sm-teal);
}

#moove_gdpr_cookie_modal .cookie-switch .cookie-slider::after,
#moove_gdpr_cookie_modal .cookie-switch .gdpr-sr-label,
#moove_gdpr_cookie_modal .cookie-switch .gdpr-sr-disable {
	color: var(--sm-text-secondary);
}

#moove_gdpr_cookie_modal .cookie-switch input:checked + .cookie-slider::after,
#moove_gdpr_cookie_modal .cookie-switch .gdpr-sr-enable {
	color: var(--sm-text-brand);
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main .moove-gdpr-status-bar .gdpr-cc-form-wrap .gdpr-cc-form-fieldset:hover label {
	color: inherit;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main .moove-gdpr-status-bar.gdpr-checkbox-disabled .cookie-switch input:checked + .cookie-slider {
	background-color: var(--sm-grijs-600);
}

/* Knoppen onderaan: alle drie petrol, even groot */

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder button.mgbutton {
	border-color: var(--sm-bg-brand);
	border-radius: 0;
	background: var(--sm-bg-brand);
	color: var(--sm-text-on-brand);
	font-weight: 700;
	transition: background-color 0.15s ease;
}

/*
 * Pas vanaf desktop de letter van de knoppen van de site. Het venster van de
 * plugin rekent met een vaste hoogte voor de voet; grotere knoppen schuiven
 * dan over de tekst. Daarom ook iets lager dan de knoppen op de pagina.
 */
@media (min-width: 64rem) {
	#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder {
		padding: 0 1.875rem;
	}

	#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder button.mgbutton {
		min-height: 3rem;
		padding: 0.9375rem 1.25rem;
		font-size: var(--sm-knop-size);
		line-height: 1.25rem;
		letter-spacing: var(--sm-tussenkop-letter-spacing);
		text-transform: uppercase;
	}
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder button.mgbutton:hover,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder button.mgbutton.moove-gdpr-modal-save-settings:hover {
	border-color: var(--sm-petrol-tint-1);
	background: var(--sm-petrol-tint-1);
	color: var(--sm-text-on-brand);
}

/*
 * Focus: de rand van de site. De plugin zet een zwarte rand met !important;
 * alleen met !important komt de eigen rand daaroverheen.
 */

#moove_gdpr_cookie_info_bar :is(a, button):focus-visible,
#moove_gdpr_cookie_modal :is(a, button, [tabindex="0"]):focus-visible,
#moove_gdpr_cookie_modal .cookie-switch input:focus-visible + .cookie-slider {
	outline: 3px solid var(--color-focus) !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
}