/**
 * MP Toast - schwebende Kurzmeldungen oben rechts (Desktop) bzw. als
 * volle Breite oben (Mobile). NUTZT die Farb-/Icon-Klassen von
 * .mp-alert aus mp-base.css 1:1 weiter (mp-alert--success etc.) -
 * hier kommt NUR die Positionierung/Animation dazu, keine neuen
 * Farben, kein Duplikat. z-index folgt der bestehenden "immer oberste
 * Ebene"-Konvention aus mp-notification.css/mp-user-menu.css
 * (2147483000) - Toasts müssen auch über einem offenen Modal liegen.
 *
 * Ablage: wp-content/themes/EUER-CHILD-THEME/assets/css/mp-toast.css
 */

.mp-toast-viewport {
	position: fixed;
	top: var(--mp-space-5);
	right: var(--mp-space-5);
	z-index: 2147483000;
	display: flex;
	flex-direction: column;
	gap: var(--mp-space-3);
	width: min(380px, calc(100vw - var(--mp-space-6)));
	pointer-events: none; /* Klicks nur auf den Toasts selbst, nicht auf die Lücken dazwischen */
}

.mp-toast {
	pointer-events: auto;
	box-shadow: var(--mp-shadow-lg);
	animation: mpToastSlideIn .25s ease;
}

.mp-toast--leaving {
	animation: mpToastSlideOut .2s ease forwards;
}

@keyframes mpToastSlideIn {
	from { opacity: 0; transform: translateX(24px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes mpToastSlideOut {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(24px); }
}

/* Mobile: volle Breite, von oben statt von rechts - gleiches Muster
   wie die Bottom-Sheet-Umschaltung in mp-notification.css/mp-user-menu.css */
@media (max-width: 480px) {
	.mp-toast-viewport {
		top: var(--mp-space-3);
		right: var(--mp-space-3);
		left: var(--mp-space-3);
		width: auto;
	}
	.mp-toast {
		animation-name: mpToastSlideInMobile;
	}
	.mp-toast--leaving {
		animation-name: mpToastSlideOutMobile;
	}
}
@keyframes mpToastSlideInMobile {
	from { opacity: 0; transform: translateY(-12px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes mpToastSlideOutMobile {
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 0; transform: translateY(-12px); }
}