/* 11, meldingen: het balkje van WooCommerce als zwevend kaartje */

/* ---------------------------------------------------------------------------
   Waar het kaartje staat
   ---------------------------------------------------------------------------

   WooCommerce zet zijn meldingen in .woocommerce-notices-wrapper, en op deze
   site staat dat blok als eerste in de pagina. Dat is precies de plek die we
   niet willen: het duwt de hele site omlaag. Vandaar los van de pagina,
   rechtsboven, net onder de header.

   Alle regels hieronder staan binnen die wrapper. De foutmeldingen die
   WooCommerce tijdens het afrekenen in het formulier zelf zet horen daar te
   blijven staan en blijven dus zoals ze zijn. */

.woocommerce-notices-wrapper {
	position: fixed;

	/* Voor een beheerder staat de zwarte balk van WordPress bovenin en zakt de
	   hele site 32 pixels. Die maat zet WordPress zelf in een variabele; voor
	   een gewone bezoeker bestaat hij niet en is hij nul. Zo staat het kaartje
	   in allebei de gevallen even ver onder de header. */
	top: calc( var(--swipe-melding-top, 110px) + var(--wp-admin--admin-bar--height, 0px) );
	right: 24px;
	z-index: 900;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min(370px, calc(100vw - 48px));
	margin: 0;
	padding: 0;

	/* Het lege vlak eromheen mag geen klikken opvangen; het kaartje zelf wel. */
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Het kaartje
   --------------------------------------------------------------------------- */

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
	position: relative;
	display: grid;
	grid-template-columns: 17px 1fr;
	gap: 6px 12px;
	align-items: start;
	margin: 0;
	padding: 16px 40px 16px 18px;
	background: var(--swipe-melding-vlak, rgba(251, 248, 242, .88));
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--swipe-melding-lijn, rgba(29, 29, 27, .25));
	border-radius: var(--swipe-radius, 0);
	color: var(--swipe-tekst, #1d1d1b);
	font-size: 14px;
	line-height: 1.5;
	list-style: none;
	pointer-events: auto;
	animation: swipe-melding-in .3s ease both;
}

/* Woo hangt er aan alle kanten iets omheen: een gekleurde bovenrand, een
   grijs vlak, een eigen letterkleur. Dat wordt hier allemaal hetzelfde. */
.woocommerce-notices-wrapper .woocommerce-message {
	border-top-color: var(--swipe-melding-lijn, rgba(29, 29, 27, .25));
}

/* Een foutmelding is een lijstje; de punten horen in de tekstkolom. */
.woocommerce-notices-wrapper .woocommerce-error li,
.woocommerce-notices-wrapper .woocommerce-info li,
.woocommerce-notices-wrapper .woocommerce-message li {
	grid-column: 2;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------------------------------------------------------------------------
   Het tekentje ervoor
   ---------------------------------------------------------------------------

   WooCommerce zet hier een rond groen vinkje neer uit zijn eigen icoonletter.
   Daarvoor in de plaats komt een dun lijntekeningetje in de tekstkleur, in
   dezelfde stijl als het hartje van de verlanglijst. Het staat als plaatje in
   de regel zelf, niet los erboven, want het kaartje is een grid. */

.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before {
	content: "";
	position: static;
	display: block;
	width: 17px;
	height: 17px;
	margin: 3px 0 0;
	padding: 0;
	font-size: 0;

	/* Woo geeft dit tekentje zijn eigen groen mee; het moet de tekstkleur van
	   het kaartje aannemen, want daar wordt de tekening mee ingekleurd. */
	color: inherit;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Gelukt: een vinkje. */
.woocommerce-notices-wrapper .woocommerce-message::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.8 9.4 18 20 6.6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.8 9.4 18 20 6.6'/%3E%3C/svg%3E");
}

/* Melding of fout: een rondje met een uitroepteken. */
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 7.2v6.4'/%3E%3Cpath d='M12 16.6v.6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 7.2v6.4'/%3E%3Cpath d='M12 16.6v.6'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   De link erin
   ---------------------------------------------------------------------------

   "Bekijk winkelwagen" is bij WooCommerce een grote grijze knop. Hier wordt het
   een gewone regel tekst met een dun streepje eronder, op de volgende regel
   zodat de melding zelf de hoofdzaak blijft. */

.woocommerce-notices-wrapper .woocommerce-message .button,
.woocommerce-notices-wrapper .woocommerce-info .button,
.woocommerce-notices-wrapper .woocommerce-error .button,
.woocommerce-notices-wrapper a.wc-forward {
	grid-column: 2;
	justify-self: start;
	width: auto;
	min-height: 0;
	margin: 2px 0 0;
	padding: 0 0 2px;
	background: none;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	color: inherit;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: .01em;
	text-decoration: none;
	text-transform: none;
	transition: opacity .2s ease;
}

.woocommerce-notices-wrapper .woocommerce-message .button:hover,
.woocommerce-notices-wrapper .woocommerce-message .button:focus,
.woocommerce-notices-wrapper a.wc-forward:hover,
.woocommerce-notices-wrapper a.wc-forward:focus {
	background: none;
	border-bottom-color: currentColor;
	color: inherit;
	opacity: .6;
}

/* ---------------------------------------------------------------------------
   Het kruisje
   ---------------------------------------------------------------------------

   Komt van assets/js/11-meldingen.js. Staat javascript uit, dan is er geen
   kruisje en blijft het kaartje staan tot de volgende pagina. */

.swipe-melding__sluit {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 26px;
	height: 26px;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	opacity: .55;
	transition: opacity .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Hello Elementor geeft elke knop zonder eigen achtergrond een roze vlak bij
   hover. Diezelfde vlek als bij het hartje, dus dezelfde tegenregel. */
button.swipe-melding__sluit:hover,
button.swipe-melding__sluit:focus,
button.swipe-melding__sluit:active {
	background: none;
	border: 0;
	color: inherit;
	opacity: 1;
}

.swipe-melding__sluit svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.3;
	stroke-linecap: round;
}

/* ---------------------------------------------------------------------------
   Komen en gaan
   --------------------------------------------------------------------------- */

@keyframes swipe-melding-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
}

.woocommerce-notices-wrapper .is-weg {
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .3s ease, transform .3s ease;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-notices-wrapper .woocommerce-message,
	.woocommerce-notices-wrapper .woocommerce-info,
	.woocommerce-notices-wrapper .woocommerce-error {
		animation: none;
	}

	.woocommerce-notices-wrapper .is-weg {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Smal scherm: over de volle breedte, onder de kleinere header
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.woocommerce-notices-wrapper {
		top: calc( var(--swipe-melding-top-mobiel, 96px) + var(--wp-admin--admin-bar--height, 0px) );
		right: 16px;
		left: 16px;
		width: auto;
	}
}