/* ==========================================================================
   WooCommerce notice toasts.

   Styles for the toast widget driven by assets/woo/notices.js. Self-contained:
   all selectors are prefixed `.nomon-toast` and the variable layer maps to the
   theme's WP preset CSS vars (theme.json single source of truth) with literal
   fallbacks, so this module carries no dependency on the cart drawer's styles.

   Fixed bottom-centre stack, above the cart drawer so an error raised while the
   drawer is open stays visible. Each toast carries a left accent border in the
   danger colour, mirroring the account-screen notice styling in main.css.
   ========================================================================== */

:root {
	--nomon-toast-z-index: 2000010; /* above the cart drawer (2000000) */
	--nomon-toast-bg: var(--wp--preset--color--background, #ffffff);
	--nomon-toast-border: var(--wp--preset--color--border, #dbdbdb);
	--nomon-toast-text: var(--wp--preset--color--foreground, #000000);
	--nomon-toast-text-light: var(--wp--preset--color--muted, #6c6c6c);
	--nomon-toast-accent: var(--wp--preset--color--accent, #0032cc);
	--nomon-toast-danger: var(--wp--preset--color--danger, #cc3300);
	--nomon-toast-success: var(--wp--preset--color--success, #1a5e2a);
	--nomon-toast-transition: 0.3s ease;
	--nomon-toast-gap-sm: 6px;
	--nomon-toast-gap-md: 12px;
	--nomon-toast-gap-lg: 16px;
}

.nomon-toasts {
	position: fixed;
	left: 50%;
	bottom: var(--nomon-toast-gap-lg);
	transform: translateX(-50%);
	z-index: var(--nomon-toast-z-index);
	display: flex;
	flex-direction: column;
	gap: var(--nomon-toast-gap-sm);
	width: min(420px, calc(100vw - 2 * var(--nomon-toast-gap-lg)));
	pointer-events: none; /* container is click-through; toasts re-enable it */
}

.nomon-toast {
	display: flex;
	align-items: flex-start;
	gap: var(--nomon-toast-gap-md);
	padding: var(--nomon-toast-gap-md) var(--nomon-toast-gap-lg);
	background: var(--nomon-toast-bg);
	border: 1px solid var(--nomon-toast-border);
	border-left: 4px solid var(--nomon-toast-danger);
	box-shadow: 0 6px 24px rgb(0 0 0 / 0.18);
	color: var(--nomon-toast-text);
	font-size: 14px;
	line-height: 1.4;
	pointer-events: auto;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--nomon-toast-transition), transform var(--nomon-toast-transition);
}

.nomon-toast--success {
	border-left-color: var(--nomon-toast-success);
}

.nomon-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.nomon-toast.is-leaving {
	opacity: 0;
	transform: translateY(12px);
}

.nomon-toast__message {
	flex: 1 1 auto;
	min-width: 0;
}

.nomon-toast__close {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: -2px -4px 0 0;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	color: var(--nomon-toast-text-light);
	transition: color var(--nomon-toast-transition);
}

.nomon-toast__close svg {
	width: 16px;
	height: 16px;
}

.nomon-toast__close:hover {
	color: var(--nomon-toast-text);
}

.nomon-toast__close:focus-visible {
	outline: 2px solid var(--nomon-toast-accent);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Reduced motion — no slide-in/fade.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.nomon-toast {
		transition: none;
	}
}