/*
 * etchWoo toast notifications.
 *
 * One toast stack (.etchwoo-toast-container), shared by classic WooCommerce
 * notices, internal etchwoo:toast events, and Cart/Checkout block notices
 * (mirrored from the hidden native banners — see the hide rules at the bottom).
 *
 * Each toast is: an icon, a body (title + description), a close button and a
 * countdown progress bar. Colours, spacing and radius pull from AutomaticCSS
 * variables (--success, --warning, --info, --danger, --white, --black,
 * --space-*, --radius, --text-*). AutomaticCSS is a hard dependency — these
 * vars are referenced without fallbacks.
 */

.etchwoo-toast-container {
	--etchwoo-toast-width: 360px;
	--etchwoo-toast-gap: var(--space-s);
	--etchwoo-toast-z: 100000;

	position: fixed;
	z-index: var(--etchwoo-toast-z);
	display: flex;
	flex-direction: column;
	gap: var(--etchwoo-toast-gap);
	width: min(var(--etchwoo-toast-width), calc(100vw - var(--space-l)));
	pointer-events: none;
}

/* Corner placement (default top-right). */
.etchwoo-toast-container[data-pos="bottom-right"] {
	right: var(--space-m);
	bottom: var(--space-m);
	align-items: flex-end;
}

.etchwoo-toast-container[data-pos="bottom-left"] {
	left: var(--space-m);
	bottom: var(--space-m);
	align-items: flex-start;
}

.etchwoo-toast-container[data-pos="top-right"] {
	right: var(--space-m);
	top: var(--space-m);
	align-items: flex-end;
}

.etchwoo-toast-container[data-pos="top-left"] {
	left: var(--space-m);
	top: var(--space-m);
	align-items: flex-start;
}

.etchwoo-toast {
	/* Default (info). Per-type overrides below swap --etchwoo-toast-bg. */
	--etchwoo-toast-bg: var(--info);
	--etchwoo-toast-color: var(--white);

	position: relative;
	overflow: hidden;
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: var(--space-s);
	width: 100%;
	padding: var(--space-s);
	border-radius: var(--radius);
	background: var(--etchwoo-toast-bg);
	color: var(--etchwoo-toast-color);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

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

.etchwoo-toast-icon {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.1rem;
}

.etchwoo-toast-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.etchwoo-toast-title {
	font-size: var(--text-s);
	font-weight: 500;
	line-height: 1.2;
}

.etchwoo-toast-desc {
	font-size: var(--text-s);
	line-height: 1.2;
	opacity: 0.95;
}

.etchwoo-toast-action {
	align-self: flex-start;
	margin-top: 0.35rem;
	background: none;
	border: 1px solid currentColor;
	color: inherit;
	padding: 0.2rem 0.55rem;
	border-radius: var(--radius);
	font: inherit;
	font-size: var(--text-xs);
	font-weight: 500;
	cursor: pointer;
	opacity: 0.9;
}

.etchwoo-toast-action:hover {
	opacity: 1;
}

.etchwoo-toast-close {
	flex-shrink: 0;
	background: none;
	border: none;
	color: inherit;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.7;
}

.etchwoo-toast-close:hover {
	opacity: 1;
}

.etchwoo-toast-progress {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: currentColor;
	opacity: 0.4;
}

/*
 * Per-type colours. STANDALONE selectors keyed off the data-type attribute set
 * by toasts.js (native CSS nesting does not concatenate `&`). Internal type
 * "error" is rendered as data-type="danger".
 */
.etchwoo-toast[data-type="success"] {
	--etchwoo-toast-bg: var(--success);
}

.etchwoo-toast[data-type="danger"] {
	--etchwoo-toast-bg: var(--danger);
}

.etchwoo-toast[data-type="warning"] {
	--etchwoo-toast-bg: var(--warning);
	/* Warning yellows fail AA with white text — use dark text on this one. */
	--etchwoo-toast-color: var(--black);
}

.etchwoo-toast[data-type="info"] {
	--etchwoo-toast-bg: var(--info);
}

/*
 * Hide the Cart/Checkout Block's own inline notice banners so the toast is the
 * only surface. toasts.js (Source 3) mirrors each hidden banner into a toast
 * via a MutationObserver, so hiding them here does not lose any message.
 *
 * .wc-block-components-notice-banner is the individual banner (confirmed Woo
 * 10.9.1); the container/legacy selectors are kept for older markup. If notices
 * reappear on a future Woo version, verify these class names still match.
 */
.wc-block-components-notice-banner,
.wc-block-components-notices,
.wp-block-woocommerce-checkout .wc-block-components-notices__notice,
.wc-block-store-notice {
	display: none !important;
}

/* Respect reduced-motion: toasts appear/disappear instantly. */
@media (prefers-reduced-motion: reduce) {
	.etchwoo-toast {
		transition: none;
	}
}