/* Storefront notice toasts (MMG-287). Tokens come from .mmg-sf (MMG_SF_Theme). The toasts scope adds --mmg-sf-error, -bg and -line; a theme value declared later wins. */

/* No inline flash: Woo notices inside Woo's own notice containers stay hidden while the toast script converts them.
   An inline guard in <head> removes the body class if the script never starts. FunnelKit forces display:block, hence !important.
   The :not() lists are the converter's never-converted list (mmg-sf-toasts.js INLINE, CONTROLS). */
body.mmg-sf-toasts-on :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup-checkout, .woocommerce-NoticeGroup-updateOrderReview, .woocommerce-NoticeGroup, .wfacp-notices-wrapper)
	:is(.woocommerce-error, .woocommerce-message, .woocommerce-info):not(.mmg-sf-coupon-pending, [data-mmg-sf-inline], .wfacp_coupon_msg, .wfacp_coupon_success, .fkcart-slider-body, .fkcart-preview-ui, .fkcart-coupon-code-wrapper, .form-row, .wfacp-form-control-wrapper):not(:has(button, input, select)):not(:is(.mmg-sf-coupon-pending, [data-mmg-sf-inline], .wfacp_coupon_msg, .wfacp_coupon_success, .fkcart-slider-body, .fkcart-preview-ui, .fkcart-coupon-code-wrapper, .form-row, .wfacp-form-control-wrapper) *) {
	display: none !important;
}

.mmg-sf-toasts {
	--mmg-sf-error: #a32d2d;
	--mmg-sf-error-bg: #fcebeb;
	--mmg-sf-error-line: #f0b9b9;
	position: fixed;
	z-index: 100000;
	/* mmg-sf-toasts.js sets --mmg-sf-toast-top from the header it measures; these are the fallbacks. */
	top: var(--mmg-sf-toast-top, calc(env(safe-area-inset-top, 0px) + 72px));
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: min(calc(100vw - 24px), 420px);
	font-family: inherit;
	pointer-events: none;
}

.mmg-sf-toasts__region {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Success and info: a white card with a soft shadow and a coloured round icon. */
.mmg-sf-toast {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--mmg-sf-line, #e6ded3);
	border-radius: var(--mmg-sf-radius, 14px);
	background: var(--mmg-sf-surface, #fff);
	color: var(--mmg-sf-text, #2e2a26);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	font-size: 14px;
	line-height: 1.45;
	pointer-events: auto;
	animation: mmg-sf-toast-in 0.18s ease-out;
}

/* Errors: light red card, red border, red text and icon. */
.mmg-sf-toast--error {
	border-color: var(--mmg-sf-error-line);
	background: var(--mmg-sf-error-bg);
	color: var(--mmg-sf-error);
}

.mmg-sf-toast__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border-radius: 50%;
	background: #3d6a99;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

.mmg-sf-toast--success .mmg-sf-toast__icon {
	background: #2f7d4f;
}

.mmg-sf-toast--error .mmg-sf-toast__icon {
	background: var(--mmg-sf-error);
}

.mmg-sf-toast__body {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Several errors: "N things to fix", then one row per error under a thin red divider. */
.mmg-sf-toast--list {
	display: block;
}

.mmg-sf-toast__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

.mmg-sf-toast__title {
	font-weight: 600;
}

.mmg-sf-toast__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mmg-sf-toast__list li {
	margin: 0;
	padding: 7px 0 5px 28px;
	border-top: 1px solid var(--mmg-sf-error-line);
	font-size: 13px;
	overflow-wrap: anywhere;
}

/* A link inside a toast is a plain inline text link. Woo's "View cart" is a.button.wc-forward, which themes draw as a
   pill: the pill-making properties are !important so a theme's own !important .button rules lose too. */
.mmg-sf-toasts .mmg-sf-toast a,
.mmg-sf-toasts .mmg-sf-toast a.button,
.mmg-sf-toasts .mmg-sf-toast a.wc-forward {
	display: inline;
	float: none;
	width: auto;
	height: auto;
	min-height: 0 !important;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: inherit !important;
	font: inherit;
	font-weight: 600;
	letter-spacing: inherit;
	line-height: inherit;
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mmg-sf-toasts .mmg-sf-toast a::before,
.mmg-sf-toasts .mmg-sf-toast a::after {
	content: none !important;
}

.mmg-sf-toast .mmg-sf-toast__row,
.mmg-sf-toast .mmg-sf-toast__close {
	appearance: none;
	margin: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.mmg-sf-toast .mmg-sf-toast__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 0;
	text-align: left;
}

.mmg-sf-toast__chevron {
	flex: none;
}

.mmg-sf-toast .mmg-sf-toast__close {
	flex: none;
	width: 28px;
	height: 28px;
	margin: -5px -6px -5px auto;
	border-radius: 50%;
	color: var(--mmg-sf-muted, #5f574e);
	font-size: 20px;
	line-height: 1;
}

.mmg-sf-toast--error .mmg-sf-toast__close {
	color: var(--mmg-sf-error);
}

.mmg-sf-toast .mmg-sf-toast__close:hover {
	background: rgba(28, 26, 23, 0.08);
}

.mmg-sf-toast .mmg-sf-toast__row:focus-visible,
.mmg-sf-toast .mmg-sf-toast__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* The field a tapped row points to: Woo's invalid state gets a visible red outline. */
body.mmg-sf-toasts-on .woocommerce-invalid :is(input, select, textarea):not([type="checkbox"], [type="radio"]) {
	border-color: var(--mmg-sf-error, #a32d2d);
	outline: 1px solid var(--mmg-sf-error, #a32d2d);
}

@keyframes mmg-sf-toast-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

@media (min-width: 768px) {
	.mmg-sf-toasts {
		top: var(--mmg-sf-toast-top, 96px);
		right: 24px;
		left: auto;
		width: 380px;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mmg-sf-toast {
		animation: none;
	}
}

@media print {
	.mmg-sf-toasts {
		display: none;
	}
}