.kev-toast-region {
	position: fixed;
	top: clamp(5rem, 8vw, 7rem);
	right: max(1rem, env(safe-area-inset-right));
	z-index: 99990;
	display: grid;
	gap: 0.75rem;
	width: min(26rem, calc(100vw - 2rem));
	pointer-events: none;
	direction: rtl;
}

/* Prevent one raw browser paint before JavaScript promotes public notices. */
:where(
	.woocommerce-message,
	.woocommerce-error,
	.woocommerce-info,
	.wc-block-components-notice-banner,
	[data-kevira-notice-type]:not([data-kevira-notice-type="loading"]),
	[data-kevira-checkout-message]:not([data-kevira-notice-type="loading"]),
	[data-kevira-coupon-status]:not([data-kevira-notice-type="loading"])
) {
	display: none !important;
}

.kev-toast__body > :where(
	.woocommerce-message,
	.woocommerce-error,
	.woocommerce-info,
	.wc-block-components-notice-banner,
	[data-kevira-notice-type],
	[data-kevira-checkout-message],
	[data-kevira-coupon-status]
) {
	display: block !important;
}

.kev-toast {
	--kev-toast-color: var(--kev-integration-accent);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 2rem;
	align-items: start;
	gap: 0.75rem;
	min-height: 4.25rem;
	padding: 1rem;
	overflow: hidden;
	color: var(--kev-integration-text);
	background: color-mix(in srgb, var(--kev-integration-surface) 94%, var(--kev-toast-color));
	border: 1px solid color-mix(in srgb, var(--kev-toast-color) 38%, var(--kev-integration-border));
	border-radius: var(--kev-integration-card-radius);
	box-shadow: 0 1.25rem 3.5rem rgb(0 0 0 / 48%);
	font: inherit;
	line-height: 1.75;
	pointer-events: auto;
	opacity: 0;
	transform: translateX(1rem);
	transition: opacity 180ms ease, transform 180ms ease;
}

.kev-toast::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 0.2rem;
	background: var(--kev-toast-color);
	transform-origin: right center;
	animation: kev-toast-progress var(--kev-toast-duration) linear forwards;
}

.kev-toast.is-visible { opacity: 1; transform: translateX(0); }
.kev-toast.is-leaving { opacity: 0; transform: translateX(0.75rem); }
.kev-toast.is-paused::after { animation-play-state: paused; }
.kev-toast--success { --kev-toast-color: var(--kev-integration-success); }
.kev-toast--error { --kev-toast-color: var(--kev-integration-error); }
.kev-toast--warning { --kev-toast-color: #e0a65b; }

.kev-toast__body,
.kev-toast__body > * {
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	color: inherit !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	list-style: none;
}

.kev-toast__body :where(a, .button) {
	display: inline-flex;
	margin-inline-start: 0.45rem;
	color: var(--kev-toast-color) !important;
	background: transparent !important;
	border: 0 !important;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.kev-toast__close {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	color: var(--kev-integration-muted);
	background: transparent;
	border: 0;
	border-radius: 50%;
	font: inherit;
	font-size: 1.4rem;
	cursor: pointer;
}

.kev-toast__close:hover,
.kev-toast__close:focus-visible {
	color: var(--kev-integration-heading);
	background: var(--kev-integration-field-surface);
	outline: none;
}

.kev-toast-source {
	display: none !important;
}

@keyframes kev-toast-progress {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}

@media (max-width: 47.99rem) {
	.kev-toast-region {
		top: max(4.5rem, calc(env(safe-area-inset-top) + 4rem));
		right: 50%;
		width: min(22rem, calc(100vw - 2rem));
		transform: translateX(50%);
	}

	.kev-toast {
		grid-template-columns: minmax(0, 1fr) 1.5rem;
		gap: 0.5rem;
		min-height: 3.5rem;
		padding: 0.7rem 0.75rem;
		border-radius: var(--kev-integration-mobile-card-radius);
		font-size: 0.82rem;
		line-height: 1.6;
	}

	.kev-toast__close { width: 1.5rem; height: 1.5rem; font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
	.kev-toast { transition-duration: var(--kev-integration-reduced-motion-duration); }
	.kev-toast::after { animation: none; }
}
