/*
 * Cart-add confirmation — a viewport toast kept clear of the header controls,
 * plus a brief pulse on the cart icon itself. assets/js/cart-feedback.js shows
 * both in response to classic AJAX add-to-cart (jQuery "added_to_cart" on
 * document.body) and the WooCommerce Blocks add-to-cart event
 * ("wc-blocks_added_to_cart" on document.body), already bridged to
 * wc-cart-fragments.js by WooCommerce core for Toga_Navigation's header
 * badge. The transition lives entirely inside
 * prefers-reduced-motion: no-preference, so a visitor who has asked for
 * reduced motion gets the same instant show/hide with no motion added —
 * the same pattern as mega-menu.css.
 */

.toga-cart-toast {
	position: fixed;
	inset-block-end: max(var(--toga-space-4), env(safe-area-inset-bottom));
	inset-inline-end: max(var(--toga-gutter), env(safe-area-inset-right));
	z-index: var(--toga-z-modal);
	max-width: min(90vw, 22rem);
	padding: var(--toga-space-3) var(--toga-space-4);
	background: var(--toga-ink);
	color: var(--toga-surface);
	border-radius: var(--toga-radius-md);
	box-shadow: var(--toga-shadow-md);
	opacity: 0;
	pointer-events: none;
}

.toga-cart-toast[hidden] {
	display: none;
}

.toga-cart-toast.is-visible {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.toga-cart-toast {
		transform: translateY(8px);
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	.toga-cart-toast.is-visible {
		transform: translateY(0);
	}
}

.toga-cart-toast__message {
	font-size: var(--toga-text-small);
}

.toga-header-action--cart.is-added {
	color: var(--toga-terracotta);
}

@media (prefers-reduced-motion: no-preference) {
	.toga-header-action--cart.is-added {
		transition: color 0.2s ease;
	}
}