/*
 * MT Notices – toast notifications for WooCommerce.
 */

/* --- Hide the classic notices (JS lifts them into toasts). ------------- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.wc-block-components-notice-banner {
	display: none !important;
}

/* Functional notices that must remain visible in the page flow. */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-no-products-found .woocommerce-info,
.woocommerce-info.cart-empty,
.mtn-keep {
	display: block !important;
}

/* --- Container --------------------------------------------------------- */
.mtn-toast-container {
	position: fixed;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: min(380px, calc(100vw - 32px));
	width: 100%;
	pointer-events: none;
}

.mtn-pos-top-right    { top: 24px; right: 24px; }
.mtn-pos-top-left     { top: 24px; left: 24px; }
.mtn-pos-top-center   { top: 24px; left: 50%; transform: translateX(-50%); }
.mtn-pos-bottom-right { bottom: 24px; right: 24px; flex-direction: column-reverse; }
.mtn-pos-bottom-left  { bottom: 24px; left: 24px; flex-direction: column-reverse; }
.mtn-pos-bottom-center{ bottom: 24px; left: 50%; transform: translateX(-50%); flex-direction: column-reverse; }

/* Keep clear of the WP admin bar. */
body.admin-bar .mtn-pos-top-right,
body.admin-bar .mtn-pos-top-left,
body.admin-bar .mtn-pos-top-center {
	top: 56px;
}

/* --- Toast ------------------------------------------------------------- */
.mtn-toast {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: #fff;
	color: #000;
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
	font-size: 14px;
	line-height: 1.5;
	overflow: hidden;
	pointer-events: auto;
	opacity: 0;
	transform: translateY(-8px) scale(0.98);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.mtn-pos-bottom-right .mtn-toast,
.mtn-pos-bottom-left .mtn-toast,
.mtn-pos-bottom-center .mtn-toast {
	transform: translateY(8px) scale(0.98);
}

.mtn-toast--visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.mtn-toast--leaving {
	opacity: 0;
	transform: translateX(16px);
}

/* Accent bar on the left edge. */
.mtn-toast::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
}

.mtn-toast--success::before { background: #16a34a; }
.mtn-toast--error::before   { background: #dc2626; }
.mtn-toast--warning::before { background: #d97706; }
.mtn-toast--info::before    { background: #2563eb; }

/* --- Icon -------------------------------------------------------------- */
.mtn-toast__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-top: 1px;
}

.mtn-toast__icon svg {
	width: 100%;
	height: 100%;
}

.mtn-toast__icon { color: #000; }

/* --- Content ----------------------------------------------------------- */
.mtn-toast__content {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
}

.mtn-toast__content a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* "View cart" and similar buttons render as plain links inside toasts. */
.mtn-toast__content .button,
.mtn-toast__content .wc-forward,
.mtn-toast__content .wp-element-button {
	display: inline;
	padding: 0;
	margin: 0 0 0 6px;
	background: none;
	border: none;
	box-shadow: none;
	font-size: inherit;
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --- Close button ------------------------------------------------------ */
.mtn-toast__close {
	flex: 0 0 auto;
	appearance: none;
	background: none;
	border: none;
	padding: 0 2px;
	margin: -2px -4px 0 0;
	font-size: 18px;
	line-height: 1;
	color: #9ca3af;
	cursor: pointer;
	transition: color 0.15s ease;
}

.mtn-toast__close:hover {
	color: #000;
	background: none;
}

/* --- Progress bar ------------------------------------------------------ */
.mtn-toast__progress {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: currentColor;
	opacity: 0.25;
	transform-origin: left;
	animation-name: mtn-progress;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.mtn-toast--success .mtn-toast__progress { color: #16a34a; }
.mtn-toast--error .mtn-toast__progress   { color: #dc2626; }
.mtn-toast--warning .mtn-toast__progress { color: #d97706; }
.mtn-toast--info .mtn-toast__progress    { color: #2563eb; }

.mtn-toast--paused .mtn-toast__progress {
	animation-play-state: paused;
}

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

/* --- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mtn-toast {
		transition: opacity 0.15s ease;
		transform: none;
	}
	.mtn-toast--visible,
	.mtn-toast--leaving {
		transform: none;
	}
}