/**
 * Molekül: Hinweise (WooCommerce-Meldungen)
 *
 * Erfolg/Info/Fehler unterscheiden sich durch Farbe UND Icon-Form
 * (nicht nur Farbe – WCAG 1.4.1). Fehlerlisten sind role="alert".
 */
.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.boasd-notice {
	--notice-color: var(--theme-notice-info);

	/* Block statt Flex: Text mit Inline-Links bleibt ein Fließtext
	   (Flex machte jeden Textknoten zu einem eigenen Element mit Lücke). */
	background: var(--theme-bg);
	border: var(--border-width-medium) solid var(--notice-color);
	border-radius: var(--radius-lg);
	color: var(--theme-text);
	display: flow-root;
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	list-style: none;
	margin: 0 0 var(--space-8);
	padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 1.5rem + var(--space-4)); /* Icon-Abstand + Icon + Luft */
	position: relative;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	background: var(--notice-color);
	block-size: 1.5rem;
	content: "";
	inline-size: 1.5rem;
	inset-block-start: 1.0625rem;
	inset-inline-start: var(--space-5);
	-webkit-mask: var(--notice-icon) center / contain no-repeat;
	mask: var(--notice-icon) center / contain no-repeat;
	position: absolute;
}

.woocommerce-message {
	--notice-color: var(--theme-notice-success);
	--notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 14.2-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7Z'/%3E%3C/svg%3E");
}

.woocommerce-info {
	--notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-6h2v6Zm0-8h-2V7h2v2Z'/%3E%3C/svg%3E");
}

.woocommerce-error {
	--notice-color: var(--theme-notice-error);
	--notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2Zm1 16h-2v-2h2v2Zm0-4h-2v-4h2v4Z'/%3E%3C/svg%3E");
	display: grid;
	gap: var(--space-2);
}

.woocommerce-error li {
	margin: 0;
}

.woocommerce-message .button,
.woocommerce-info .button {
	float: inline-end;
	margin-block: calc(-1 * var(--space-2));
	margin-inline-start: var(--space-5);
}

/* WooCommerce setzt den Fokus nur für Screenreader auf den Hinweis
   (tabindex="-1", nicht bedienbar) – kein sichtbarer Fokusrahmen. */
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error)[tabindex="-1"]:focus {
	outline: none;
}

/* Schmal: Button unter dem Text in voller Breite statt daneben */
@media (max-width: 48.75em) {
	.woocommerce-message .button,
	.woocommerce-info .button {
		display: flex;
		float: none;
		inline-size: 100%;
		margin: var(--space-4) 0 0;
	}
}

.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
	color: inherit;
	font-weight: var(--font-weight-medium);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

@media (prefers-reduced-motion: no-preference) {
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error {
		animation: notice-in var(--duration-base) var(--ease-out);
	}
}

@keyframes notice-in {
	from {
		opacity: 0;
		translate: 0 -0.5rem;
	}
}