/**
 * Frontend Styles for WooCommerce Order Threshold & Pincode Shipping.
 *
 * @package WooCommerce_Order_Threshold_Shipping
 */

/* Default custom property fallbacks */
:root {
	--cwd-order-notice-bg: #4EC12E;
	--cwd-order-notice-text: #FFFFFF;
	--cwd-order-notice-speed: 20s;
	--cwd-order-notice-color: #4EC12E;
	--cwd-order-notice-tint: rgba(78, 193, 46, 0.08);
}

/* ==========================================================================
   1. Full-Width Top Announcement Bar
   ========================================================================== */

.cwd-order-notice-bar {
	width: 100%;
	background-color: var(--cwd-order-notice-bg, #4EC12E);
	color: var(--cwd-order-notice-text, #FFFFFF);
	height: 40px;
	overflow: hidden;
	position: relative;
	z-index: 99999;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding: 0;
	margin: 0;
}

@media (max-width: 768px) {
	.cwd-order-notice-bar {
		height: 36px;
	}
}

/* Track container holding content duplicates */
.cwd-order-notice-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	align-items: center;
	will-change: transform;
}

/* Continuous right-to-left marquee animation */
.cwd-order-notice-track.is-scrolling {
	animation: cwd_order_notice_marquee var(--cwd-order-notice-speed, 20s) linear infinite;
}

/* Pause marquee on hover for readability */
.cwd-order-notice-track.is-scrolling:hover {
	animation-play-state: paused;
}

/* Static centered track if scrolling disabled */
.cwd-order-notice-track.is-static {
	width: 100%;
	justify-content: center;
	animation: none;
}

/* Content block */
.cwd-order-notice-content {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Individual announcement text item - uses inline-block & pre-wrap to strictly preserve intentional spaces around placeholders */
.cwd-order-notice-item {
	display: inline-block;
	vertical-align: middle;
	padding: 0 36px;
	font-size: 14px;
	font-weight: 500;
	line-height: 40px;
	color: var(--cwd-order-notice-text, #FFFFFF);
	letter-spacing: 0.2px;
	white-space: pre-wrap;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.cwd-order-notice-item {
		padding: 0 20px;
		font-size: 13px;
		line-height: 36px;
	}
}

/* Ensure price symbols, amounts, and bdi inside announcement bar stay inline and preserve spaces */
.cwd-order-notice-item .woocommerce-Price-amount,
.cwd-order-notice-item .woocommerce-Price-currencySymbol,
.cwd-order-notice-item bdi,
.cwd-order-notice-item span {
	display: inline !important;
	white-space: inherit !important;
}

/* Keyframe for 100% seamless infinite translate without gaps or jumps */
@keyframes cwd_order_notice_marquee {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(-50%, 0, 0);
	}
}

/* Accessibility: Respect user reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.cwd-order-notice-track {
		animation: none !important;
		transform: none !important;
		width: 100% !important;
		justify-content: center !important;
	}
	.cwd-order-notice-content[aria-hidden="true"] {
		display: none !important;
	}
}

/* ==========================================================================
   2. Inline Minimum Order Notice (Cart & Checkout)
   ========================================================================== */

/* Brand styled error notice box */
.woocommerce-error.cwd-womt-error-notice,
.woocommerce-error:has(li[data-cwd-womt-notice="true"]) {
	background-color: var(--cwd-order-notice-tint, rgba(78, 193, 46, 0.08)) !important;
	border-top: none !important;
	border-right: none !important;
	border-bottom: none !important;
	border-left: 4px solid var(--cwd-order-notice-color, #4EC12E) !important;
	color: #222222 !important;
	border-radius: 6px !important;
	padding: 14px 20px !important;
	margin: 15px 0 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.woocommerce-error.cwd-womt-error-notice::before,
.woocommerce-error:has(li[data-cwd-womt-notice="true"])::before {
	color: var(--cwd-order-notice-color, #4EC12E) !important;
}

.woocommerce-error.cwd-womt-error-notice li,
.woocommerce-error li[data-cwd-womt-notice="true"] {
	display: block !important;
	color: #222222 !important;
	font-size: 14.5px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	white-space: pre-wrap !important;
}

.woocommerce-error.cwd-womt-error-notice .woocommerce-Price-amount,
.woocommerce-error li[data-cwd-womt-notice="true"] .woocommerce-Price-amount,
.woocommerce-error.cwd-womt-error-notice .woocommerce-Price-currencySymbol,
.woocommerce-error li[data-cwd-womt-notice="true"] .woocommerce-Price-currencySymbol,
.woocommerce-error.cwd-womt-error-notice bdi,
.woocommerce-error li[data-cwd-womt-notice="true"] bdi,
.woocommerce-error.cwd-womt-error-notice span,
.woocommerce-error li[data-cwd-womt-notice="true"] span {
	display: inline !important;
	white-space: inherit !important;
}

/* ==========================================================================
   3. Checkout Button & Shipping Badges
   ========================================================================== */

.cwd-womt-threshold-unmet .checkout-button.button.disabled,
.cwd-womt-threshold-unmet .checkout-button.button[aria-disabled="true"] {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
	filter: grayscale(40%);
	transition: opacity 0.3s ease, filter 0.3s ease;
}

.cwd-womt-free-shipping-rate label {
	font-weight: 600;
}

.cwd-womt-free-badge {
	display: inline-block;
	background: var(--cwd-order-notice-color, #4EC12E);
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 3px;
	margin-left: 6px;
	vertical-align: middle;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* ==========================================================================
   4. Zero-Popup Enforcement & Modal Suppression
   ========================================================================== */

/* Force hide Side Cart WooCommerce markup notice popups for minimum order */
.xoo-wsc-markup-notices.cwd-womt-suppressed,
.xoo-wsc-notice-container.cwd-womt-suppressed,
.xoo-wsc-markup-notices[style*="display: none"] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Modern :has() selectors to automatically suppress popup containers containing our notice */
@supports selector(:has(*)) {
	.xoo-wsc-markup-notices:has([data-cwd-womt-notice="true"]),
	.xoo-wsc-markup-notices:has(.cwd-womt-error-notice),
	.swal2-container:has([data-cwd-womt-notice="true"]),
	.swal2-container:has(.cwd-womt-error-notice),
	.modal:has([data-cwd-womt-notice="true"]),
	.modal:has(.cwd-womt-error-notice),
	div[role="dialog"]:has([data-cwd-womt-notice="true"]) {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}
}

/* Also style disabled state on side-cart checkout button */
.cwd-womt-threshold-unmet .xoo-wsc-ft-btn-checkout,
.xoo-wsc-ft-btn-checkout.cwd-womt-disabled {
	opacity: 0.6 !important;
	filter: grayscale(40%) !important;
	cursor: not-allowed !important;
}

/* ==========================================================================
   5. Sticky Header Safe Clearance (Mobile & Desktop)
   ========================================================================== */

/* Set global viewport scroll padding for sticky header clearance */
html {
	scroll-padding-top: 220px !important;
}

/* Provide generous scroll margin so sticky headers never cover the notice */
.woocommerce-error.cwd-womt-error-notice,
.woocommerce-error:has(li[data-cwd-womt-notice="true"]),
.woocommerce-NoticeGroup-checkout,
.woocommerce-NoticeGroup-checkout .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-error.cwd-womt-error-notice,
.wc-block-components-notice-banner.is-error {
	scroll-margin-top: 220px !important;
	scroll-margin-bottom: 30px !important;
	position: relative !important;
	z-index: 100 !important;
}

/* Eye-catching pulse animation when the error notice appears */
@keyframes cwdNoticePulse {
	0% {
		box-shadow: 0 0 0 0 rgba(78, 193, 46, 0.4);
		transform: scale(0.99);
	}
	50% {
		box-shadow: 0 0 0 6px rgba(78, 193, 46, 0.15);
		transform: scale(1);
	}
	100% {
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
		transform: scale(1);
	}
}

.woocommerce-error.cwd-womt-error-notice {
	animation: cwdNoticePulse 0.4s ease-out;
}

/* Mobile & Tablet viewports (where headers are sticky and vertical viewport space is tight) */
@media screen and (max-width: 991px) {
	html {
		scroll-padding-top: 220px !important;
	}

	.woocommerce-error.cwd-womt-error-notice,
	.woocommerce-error:has(li[data-cwd-womt-notice="true"]),
	.woocommerce-NoticeGroup-checkout,
	.woocommerce-NoticeGroup-checkout .woocommerce-error,
	.wc-block-components-notice-banner.is-error {
		scroll-margin-top: 220px !important;
		margin-top: 30px !important;
		margin-bottom: 25px !important;
		padding: 16px 20px !important;
		border-left-width: 5px !important;
		font-size: 15px !important;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
	}

	/* Provide generous spacing at the top of checkout form for the notice */
	body.woocommerce-checkout .woocommerce-NoticeGroup-checkout,
	body.woocommerce-checkout form.checkout .woocommerce-error.cwd-womt-error-notice,
	body.woocommerce-checkout .woocommerce-notices-wrapper {
		margin-top: 30px !important;
		display: block !important;
		clear: both !important;
	}
}

@media screen and (max-width: 767px) {
	.woocommerce-error.cwd-womt-error-notice,
	.woocommerce-error:has(li[data-cwd-womt-notice="true"]),
	.woocommerce-NoticeGroup-checkout,
	.woocommerce-NoticeGroup-checkout .woocommerce-error,
	.wc-block-components-notice-banner.is-error {
		scroll-margin-top: 220px !important;
		margin-top: 25px !important;
		margin-bottom: 20px !important;
		padding: 15px 16px !important;
	}

	body.woocommerce-checkout .woocommerce-NoticeGroup-checkout {
		margin-top: 25px !important;
	}
}

/* ==========================================================================
   6. Remove Close Sign Button
   ========================================================================== */

/* Simply hide the close / dismiss button without altering notice styles */
.wc-block-components-notice-banner__dismiss,
.wc-block-components-notice-banner button.wc-block-components-notice-banner__dismiss,
.wc-block-components-notice-banner [aria-label*="Dismiss" i],
.wc-block-components-notice-banner [aria-label*="Close" i],
.woocommerce-error .notice-dismiss,
.woocommerce-error .close,
.woocommerce-error .notice-close,
.cwd-womt-error-notice .notice-dismiss,
.cwd-womt-error-notice .close,
.cwd-womt-error-notice .wc-block-components-notice-banner__dismiss {
	display: none !important;
}