/**
 * WooCommerce notices — The7 "popup" message style, fixed up.
 *
 * The7 (body.popup-message-style, wc-dt-custom.css) turns every WC notice into
 * a fixed toast at mid-height, flush against the right edge, all at the SAME
 * position — several notices overlap and only the last one is readable. Here:
 *  - toasts sit top-right with a margin, below the header;
 *  - assets/js/notices.js stacks them (sets --un-toast-top per toast);
 *  - notices inside the Elementor My Account widget stay inline, like The7
 *    already does for the classic .woocommerce-MyAccount-content wrapper.
 *
 * Layout and motion only — colours, icons and the close button stay The7's.
 * Selectors repeat The7's own (prefixed with `body`) to win on specificity.
 */

body.popup-message-style div:not(.wc-coupon-wrap):not(.wc-login-wrap):not(.woocommerce-MyAccount-content) > .woocommerce-message,
body.popup-message-style .woocommerce-error,
body.popup-message-style div:not(.wc-coupon-wrap):not(.wc-login-wrap):not(.woocommerce-MyAccount-content) > .woocommerce-info {
	top: var(--un-toast-top, 24px);
	right: 24px;
	left: auto;
	width: min(400px, calc(100vw - 48px));
	max-width: none;
	transform: translate3d(calc(100% + 48px), 0, 0);
	animation-name: un-toast-in, un-toast-out;
	animation-duration: .5s, .5s;
	animation-delay: .3s, 9s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out, ease-in;
	transition: top .3s ease;
}

/* The7 staggers these pairs (9s / 18s) because they overlapped; stacked, they
   can show together. */
body.popup-message-style .woocommerce-error + .woocommerce-message,
body.popup-message-style .woocommerce-message + .cart-empty {
	animation-delay: .3s, 9s;
}

/* Keep a toast on screen while it is hovered. */
body.popup-message-style div:not(.wc-coupon-wrap):not(.wc-login-wrap):not(.woocommerce-MyAccount-content) > .woocommerce-message:hover,
body.popup-message-style .woocommerce-error:hover,
body.popup-message-style div:not(.wc-coupon-wrap):not(.wc-login-wrap):not(.woocommerce-MyAccount-content) > .woocommerce-info:hover {
	animation-play-state: paused;
}

body.popup-message-style .un-toast--gone {
	display: none !important;
}

@media (max-width: 600px) {
	body.popup-message-style div:not(.wc-coupon-wrap):not(.wc-login-wrap):not(.woocommerce-MyAccount-content) > .woocommerce-message,
	body.popup-message-style .woocommerce-error,
	body.popup-message-style div:not(.wc-coupon-wrap):not(.wc-login-wrap):not(.woocommerce-MyAccount-content) > .woocommerce-info {
		right: 12px;
		width: calc(100vw - 24px);
	}
}

@keyframes un-toast-in {
	from { opacity: 0; transform: translate3d(calc(100% + 48px), 0, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes un-toast-out {
	from { opacity: 1; transform: translate3d(0, 0, 0); }
	to   { opacity: 0; transform: translate3d(calc(100% + 48px), 0, 0); visibility: hidden; }
}

/* Elementor's My Account widget wraps content in .woocommerce-MyAccount-content-wrapper*
   (…-no-data when empty), which escapes The7's inline exception: "no orders
   yet" became a toast that vanished after 9s. Back in the flow.
   :not(#un-notice) only lifts specificity above the toast rules. */
body.popup-message-style [class*="woocommerce-MyAccount-content-wrapper"] > .woocommerce-info:not(#un-notice),
body.popup-message-style [class*="woocommerce-MyAccount-content-wrapper"] > .woocommerce-message:not(#un-notice) {
	position: relative;
	top: auto;
	right: auto;
	left: auto;
	width: 100%;
	max-height: none;
	margin: 0 0 16px !important;
	transform: none;
	animation: none;
	opacity: 1;
	box-shadow: none;
	z-index: auto;
}