/**
 * Elite Portal — WooCommerce notices (the green "Status" bar in the checkout
 * design). Applies to Woo's classic notices wherever they render: shop,
 * product, cart, checkout and My Account.
 *
 * Errors keep the same layout but a red accent, so a problem never reads as a
 * success.
 */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	--elite-notice-accent: #228b49;
	--elite-notice-bg: #eef7e4;
	--elite-notice-ink: #224264;

	position: relative;
	/* Astra makes notices flex rows, which breaks "<strong>SKU</strong> — text" apart. */
	display: block;
	margin: 0 0 32px;
	padding: 15px 32px 16px 56px;
	font-size: 16px;
	line-height: 19.2px;
	color: var(--elite-notice-ink);
	list-style: none;
	background: var(--elite-notice-bg);
	border: 0;
	border-top: 3px solid var(--elite-notice-accent);
	border-radius: 0;
	box-shadow: none;
}

.woocommerce-error,
.woocommerce .woocommerce-error {
	--elite-notice-accent: #b42318;
	--elite-notice-bg: #fdf0ef;
}

/* The icon from the design replaces Woo's icon-font glyph. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
	position: absolute;
	top: 17px;
	left: 24px;
	width: 16px;
	height: 16px;
	content: "";
	background: url("../images/icon-notice.svg") no-repeat center / 16px 16px;
	transform: scaleY(-1);
}

.woocommerce-error::before,
.woocommerce .woocommerce-error::before {
	/* Same icon, tinted red: mask the SVG and fill it with the accent. */
	background: var(--elite-notice-accent);
	-webkit-mask: url("../images/icon-notice.svg") no-repeat center / 16px 16px;
	mask: url("../images/icon-notice.svg") no-repeat center / 16px 16px;
}

.woocommerce-message strong,
.woocommerce-info strong,
.woocommerce-error strong {
	font-weight: 700;
	color: var(--elite-notice-accent);
}

.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
	color: #046bd2;
}

/*
 * Woo moves focus to a new notice (tabindex="-1") so screen readers announce it.
 * That programmatic focus should not draw the browser's outline round the bar.
 */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus {
	outline: none;
}

/* A list of errors renders one li per problem. */
.woocommerce-error li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-error li + li {
	margin-top: 6px;
}