/**
 * Cartzilla Child - Unified Notification / Toast System
 * ------------------------------------------------------
 * Sitewide, modern replacement for every ad-hoc notice/toast implementation
 * previously scattered across login-register-shortcodes.php, wishlist-enhancements.js
 * and modern-cart.js. Colors are taken 1:1 from the theme's compiled
 * .alert-success / .alert-danger / .alert-info / .alert-warning rules
 * (style.css) so the look stays 100% on-brand while the presentation
 * (motion, spacing, elevation, stacking) is fully redesigned.
 *
 * Works together with /assets/js/notifications.js
 */

:root {
	--cz-toast-radius: 1rem;
	--cz-toast-gap: .625rem;
	--cz-toast-width: 23.5rem;
	--cz-toast-duration: 5000ms;

	/* Success - matches .alert-success */
	--cz-toast-success-color: #29bc7d;
	--cz-toast-success-bg: #f0fcf7;
	--cz-toast-success-border: #d2f5e6;
	--cz-toast-success-icon-bg: #e1f8ee;

	/* Danger / error - matches .alert-danger / .woocommerce-error */
	--cz-toast-danger-color: #e04167;
	--cz-toast-danger-bg: #fef0f4;
	--cz-toast-danger-border: #fcd3dd;
	--cz-toast-danger-icon-bg: #fde2e8;

	/* Info - matches .alert-info */
	--cz-toast-info-color: #3699fe;
	--cz-toast-info-bg: #f3f9ff;
	--cz-toast-info-border: #dbedff;
	--cz-toast-info-icon-bg: #e7f3ff;

	/* Warning - matches .alert-warning */
	--cz-toast-warning-color: #ea9861;
	--cz-toast-warning-bg: #fff8f3;
	--cz-toast-warning-border: #ffe9db;
	--cz-toast-warning-icon-bg: #fff1e7;
}

/* ---------------------------------------------------------------------
   Viewport / stack
   ------------------------------------------------------------------ */
#cz-toast-viewport {
	position: fixed;
	z-index: 1090;
	bottom: 1.25rem;
	right: 1.25rem;
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-end;
	gap: var(--cz-toast-gap);
	width: var(--cz-toast-width);
	max-width: calc(100vw - 1.5rem);
	pointer-events: none;
}

html[dir="rtl"] #cz-toast-viewport {
	right: auto;
	left: 1.25rem;
	align-items: flex-start;
}

@media (max-width: 575.98px) {
	#cz-toast-viewport {
		right: .75rem;
		left: .75rem;
		bottom: .75rem;
		width: auto;
		max-width: none;
		align-items: stretch;
	}
	html[dir="rtl"] #cz-toast-viewport {
		left: .75rem;
		right: .75rem;
	}
}

/* ---------------------------------------------------------------------
   Toast card
   ------------------------------------------------------------------ */
.cz-toast {
	--cz-toast-color: var(--cz-toast-info-color);
	--cz-toast-bg: var(--cz-toast-info-bg);
	--cz-toast-border: var(--cz-toast-info-border);
	--cz-toast-icon-bg: var(--cz-toast-info-icon-bg);

	position: relative;
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	width: 100%;
	pointer-events: auto;
	overflow: hidden;
	background: #fff;
	color: #4b566b;
	border: 1px solid var(--cz-toast-border);
	border-radius: var(--cz-toast-radius);
	box-shadow: 0 1.25rem 2.5rem rgba(23, 28, 55, .12), 0 .25rem .75rem rgba(23, 28, 55, .06);
	padding: .875rem 1rem;
	transform: translateX(calc(100% + 1.25rem));
	opacity: 0;
	transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
	will-change: transform, opacity;
}

html[dir="rtl"] .cz-toast {
	transform: translateX(calc(-100% - 1.25rem));
}

.cz-toast::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--cz-toast-bg);
	opacity: .55;
	z-index: 0;
}

.cz-toast > * {
	position: relative;
	z-index: 1;
}

.cz-toast.cz-toast-visible {
	transform: translateX(0);
	opacity: 1;
}

.cz-toast.cz-toast-leaving {
	transform: translateX(calc(100% + 1.25rem)) scale(.96);
	opacity: 0;
	margin-top: calc(-1 * var(--cz-toast-gap));
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-width: 0;
	transition: transform .35s ease, opacity .3s ease, max-height .35s ease .05s,
		margin-top .35s ease .05s, padding .35s ease .05s, border-width .35s ease .05s;
}

html[dir="rtl"] .cz-toast.cz-toast-leaving {
	transform: translateX(calc(-100% - 1.25rem)) scale(.96);
}

@media (max-width: 575.98px) {
	.cz-toast,
	.cz-toast.cz-toast-leaving {
		transform: translateY(.75rem);
	}
	.cz-toast.cz-toast-visible {
		transform: translateY(0);
	}
	.cz-toast.cz-toast-leaving {
		transform: translateY(.5rem) scale(.98);
	}
}

.cz-toast-success { --cz-toast-color: var(--cz-toast-success-color); --cz-toast-bg: var(--cz-toast-success-bg); --cz-toast-border: var(--cz-toast-success-border); --cz-toast-icon-bg: var(--cz-toast-success-icon-bg); }
.cz-toast-error   { --cz-toast-color: var(--cz-toast-danger-color);  --cz-toast-bg: var(--cz-toast-danger-bg);  --cz-toast-border: var(--cz-toast-danger-border);  --cz-toast-icon-bg: var(--cz-toast-danger-icon-bg); }
.cz-toast-info    { --cz-toast-color: var(--cz-toast-info-color);    --cz-toast-bg: var(--cz-toast-info-bg);    --cz-toast-border: var(--cz-toast-info-border);    --cz-toast-icon-bg: var(--cz-toast-info-icon-bg); }
.cz-toast-warning { --cz-toast-color: var(--cz-toast-warning-color); --cz-toast-bg: var(--cz-toast-warning-bg); --cz-toast-border: var(--cz-toast-warning-border); --cz-toast-icon-bg: var(--cz-toast-warning-icon-bg); }

.cz-toast-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: .75rem;
	background: var(--cz-toast-icon-bg);
	color: var(--cz-toast-color);
	font-size: 1.1875rem;
}

.cz-toast-body {
	flex: 1 1 auto;
	min-width: 0;
	font-size: .875rem;
	line-height: 1.45;
	color: #4b566b;
	padding-top: .3125rem;
	padding-right: 1.25rem;
	word-wrap: break-word;
}

html[dir="rtl"] .cz-toast-body {
	padding-right: 0;
	padding-left: 1.25rem;
}

.cz-toast-body a {
	color: var(--cz-toast-color);
	font-weight: 500;
	text-decoration: underline;
}
.cz-toast-body a:hover { text-decoration: none; }

.cz-toast-body p:last-child,
.cz-toast-body ul:last-child { margin-bottom: 0; }

.cz-toast-close {
	position: absolute;
	top: .625rem;
	right: .625rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.625rem;
	height: 1.625rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #9ca6b8;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
html[dir="rtl"] .cz-toast-close { right: auto; left: .625rem; }
.cz-toast-close:hover,
.cz-toast-close:focus-visible {
	background: rgba(0, 0, 0, .06);
	color: #4b566b;
	outline: none;
}

/* Progress bar - shows remaining time before auto-dismiss */
.cz-toast-progress {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: rgba(0, 0, 0, .06);
	overflow: hidden;
}
.cz-toast-progress > span {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--cz-toast-color);
	transform-origin: left center;
	animation: cz-toast-shrink var(--cz-toast-duration) linear forwards;
}
html[dir="rtl"] .cz-toast-progress > span { transform-origin: right center; }
.cz-toast.cz-toast-paused .cz-toast-progress > span { animation-play-state: paused; }
.cz-toast-no-timer .cz-toast-progress { display: none; }

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

@media (prefers-reduced-motion: reduce) {
	.cz-toast,
	.cz-toast.cz-toast-leaving {
		transition: opacity .2s linear;
		transform: none !important;
	}
	.cz-toast-progress > span { animation: none; }
}

/*
 * Progressive enhancement / graceful fallback:
 * the original WooCommerce notice markup is visually hidden once it has
 * been picked up and re-rendered as a toast by notifications.js. If, for
 * any reason, JavaScript fails to run, nothing gets this class and the
 * theme's original (already on-brand) notice styling is shown instead -
 * so the site never ends up without visible notifications.
 */
.cz-notice-consumed {
	display: none !important;
}