/*
 * DS WooCommerce Notices – "Zara" brutalist editorial style
 * Global styling for WooCommerce notices (errors, messages, info)
 * Loaded from DS-page -> all so it applies site-wide.
 */

/* --- 1. THE CONTAINER (Invisible Wrapper) --- */
/* Fixed, full-width wrapper that perfectly centers the alert card */
.woocommerce-NoticeGroup {
	position: fixed;
	top: 20px; /* Distance from top of screen */
	left: 0;
	width: 100%; /* Span full width of screen */
	height: 0; /* Avoid blocking clicks underneath */
	z-index: 999999;

	display: flex;
	justify-content: center; /* Horizontal centering */
	align-items: flex-start; /* Align card to top of wrapper */
	pointer-events: none; /* Let clicks pass through empty space */
}

/* Checkout-specific group uses the same centering */
.woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout {
	top: 20px;
}

/* --- 2. THE ALERT BOX BASE (Visible Card) --- */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info:not(#yith-par-message-reward-cart) {
	/* Reset defaults */
	margin: 0 !important;
	box-sizing: border-box;
	list-style: none !important;
	pointer-events: auto; /* Re-enable clicks on the box itself */

	/* Zara editorial typography */
	text-transform: uppercase;
	font-size: 9px !important;
	letter-spacing: 1px;
	font-weight: 600;
	text-align: center;

	/* Card look */
	background: #ffffff !important;
	border: 1px solid #000000;
	color: #000000 !important;
	border-radius: 0; /* Sharp edges */
	padding: 5px 25px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Subtle premium shadow */

	/* Animation */
	animation: slideDownFade 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;

	/* When Woo outputs notices outside .woocommerce-NoticeGroup, still center them */
	margin-left: auto !important;
	margin-right: auto !important;
}

/* --- 3. RESPONSIVE WIDTHS --- */

/* Mobile (phones) – wide with breathing room on sides */
@media only screen and (max-width: 767px) {
	.woocommerce-error,
	.woocommerce-message,
	.woocommerce-info {
		width: 92%;
		min-width: 300px;
	}
}

/* Tablet & desktop – compact, fixed card width */
@media only screen and (min-width: 768px) {
	.woocommerce-error,
	.woocommerce-message,
	.woocommerce-info {
		width: auto; /* Content defines width */
		min-width: 340px;
		max-width: 500px;
	}
}

/* --- 4. COLOR VARIATIONS (Zara-style) --- */

/* ERROR: White box, red text, red border */
.woocommerce-error {
	border-color: #d32f2f !important;
	color: #d32f2f !important;
	background-color: #ffffff !important;
}

/* SUCCESS: Solid black box, white text */
.woocommerce-message {
	border-color: #000000 !important;
	background-color: #000000 !important;
	color: #ffffff !important;
}

/* INFO: Light grey box, black text */
.woocommerce-info:not(#yith-par-message-reward-cart)  {
	border-color: #000000 !important;
	background-color: #f4f4f4 !important;
	color: #000000 !important;
}

/* --- 5. CLEANUP INSIDE THE BOX --- */

/* Remove default Woo icons/dots from all notice types */
.woocommerce-error::before,
.woocommerce-error::after,
.woocommerce-message::before,
.woocommerce-message::after,
.woocommerce-info::before,
.woocommerce-info::after {
	display: none !important;
	content: none !important;
}

/* Style the list items so multiple messages look like one editorial line */
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px; /* Space between text and link */
	margin: 0;
	padding: 0;
}

/* Style the links (e.g. "View Cart", "View Bag") */
.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a {
	text-decoration: underline;
	text-underline-offset: 3px; /* Modern underline */
	font-weight: 700;
    font-size: 9px !important;
	color: inherit; /* Take parent color */
	background: none;
	border-radius: 0;
}

/* If theme wraps message link in a button, flatten it */
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
	background: transparent !important;
	color: inherit !important;
	border: 1px solid currentColor;
	padding: 5px 15px;
	margin-left: 15px;
	border-radius: 0;
	font-size: 10px;
	line-height: 1.4;
}

/* Reset any legacy float-based layout on message links */
.woocommerce-message > a,
.woocommerce-info > a,
.woocommerce-error > a {
	float: none !important;
}

/* --- 6. ANIMATION KEYFRAME --- */
@keyframes slideDownFade {
	0% {
		transform: translateY(-30px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}