/**
 * PokeStasch - "Tillagd i varukorgen"-notis (toast)
 *
 * Diskret bekrafttelse, botten-centrerad, forsvinner sjalv. Ersatter den
 * borttagna auto-oppnande minivarukorgs-panelen (se ARBETSLOGG.md).
 *
 * Farg: temats Primary-farg (theme.json, slug "primary", #381d92) pa vit
 * text - konsekvent med varumarkets ovriga knappar/paletter.
 *
 * Fel-varianten (.pokestasch-toast--error) anvands nar ett tillagg
 * misslyckas (slut i lager, redan max antal i varukorgen m.m.) - se
 * pokestasch-shop-add-to-cart-fix/fix.js. Samma form/position, men rod
 * bakgrund sa den tydligt skiljer sig fran bekraftelse-varianten.
 *
 * OBS: bottenpositionen satts dynamiskt via CSS-variabeln
 * --pokestasch-toast-bottom (se toast.js) for att undvika att overlappa
 * cookie-samtyckesbannern (WPCode-snippet "Cookie Consent Banner", post
 * 1985), som ocksa ar botten-fast och nastan fullbredd pa mobil for
 * besokare som annu inte svarat pa den.
 */

.pokestasch-toast {
	position: fixed;
	left: 50%;
	bottom: 20px;
	bottom: calc(var(--pokestasch-toast-bottom, 20px) + env(safe-area-inset-bottom, 0px));
	transform: translate(-50%, 12px);
	background: #381d92;
	color: #ffffff;
	padding: 12px 22px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	opacity: 0;
	pointer-events: none;
	z-index: 999998; /* strax under cookie-bannerns 999999, kolliderar aldrig positionellt tack vare --pokestasch-toast-bottom */
	max-width: calc(100% - 32px);
	text-align: center;
	white-space: nowrap;
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.15s ease;
}

.pokestasch-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.pokestasch-toast--error {
	background: #b3261e;
}

@media (max-width: 480px) {
	.pokestasch-toast {
		white-space: normal;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pokestasch-toast {
		transition: opacity 0.15s ease;
		transform: translate(-50%, 0);
	}
}