/**
 * Spark Minimum Order Amount: front-end notices.
 *
 * Styled to the shop, not to wp-admin: it borrows the theme's own design tokens
 * (Breakdance --bde-* custom properties) with hard fallbacks, so it keeps
 * matching the shop if those tokens are retuned.
 *
 * Two parts:
 *   1. .sparkcore-moa-notice          this plugin's own notice (always styled).
 *   2. .sparkcore-moa-styled-notices  the same card applied to WooCommerce's own
 *                                    notices. Only active when the body carries
 *                                    that class, i.e. when the setting is on.
 */

/* ------------------------------------------------------------------ *
 * Shared tokens
 * ------------------------------------------------------------------ */

.sparkcore-moa-notice,
body.sparkcore-moa-styled-notices {
	--sparkcore-moa-red: #ef4444;
	--sparkcore-moa-green: var(--bde-brand-primary-color, #71bb40);
	--sparkcore-moa-line: #e5e7eb;
	--sparkcore-moa-radius: var(--bde-woo-wrappers__border-radius, 4px);
	--sparkcore-moa-shadow: rgba(0, 0, 0, 0.05) 0 1px 3px, rgba(0, 0, 0, 0.05) 0 1px 2px;
}

/* ------------------------------------------------------------------ *
 * 1. This plugin's notice
 * ------------------------------------------------------------------ */

.sparkcore-moa-notice {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 24px;
	padding: 16px 20px;
	background: #fff;
	border: 1px solid var(--sparkcore-moa-line);
	border-left: 3px solid var(--sparkcore-moa-red);
	border-radius: var(--sparkcore-moa-radius);
	box-shadow: var(--sparkcore-moa-shadow);
	font-family: var(--bde-body-font-family, "Inter", sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--bde-body-text-color, #404040);
	text-align: left;
}

.sparkcore-moa-notice__icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--sparkcore-moa-red);
}

.sparkcore-moa-notice__icon svg {
	display: block;
	width: 22px;
	height: 22px;
}

.sparkcore-moa-notice__text {
	min-width: 0;
	padding-top: 1px;
}

/* The message is built from wc_price(), which returns markup the theme may set
   to display:block, which pushes each amount onto its own line. Pin them
   inline, in the shop's heading colour, and keep each price unbreakable. */
.sparkcore-moa-notice .woocommerce-Price-amount,
.sparkcore-moa-notice .woocommerce-Price-amount bdi,
.sparkcore-moa-notice .amount {
	display: inline;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	line-height: inherit;
	color: var(--bde-headings-color, #673b12);
	white-space: nowrap;
}

.sparkcore-moa-notice strong,
.sparkcore-moa-notice b {
	font-weight: 700;
	color: var(--bde-headings-color, #673b12);
}

.sparkcore-moa-notice a {
	color: var(--sparkcore-moa-green);
	font-weight: 600;
	text-decoration: underline;
}

/* Inside the cart drawer: tighter, and a smaller bottom margin because the
   buttons follow immediately underneath. */
.sparkcore-moa-notice--mini-cart {
	margin: 0 0 12px;
	padding: 12px 14px;
	gap: 10px;
	font-size: 14px;
	line-height: 1.4;
}

.sparkcore-moa-notice--mini-cart .sparkcore-moa-notice__icon svg {
	width: 19px;
	height: 19px;
}

/* ------------------------------------------------------------------ *
 * 1b. Hiding the mini cart's checkout button
 *
 * remove_action() on woocommerce_widget_shopping_cart_buttons only works when
 * the mini cart template calls that hook. Breakdance's drawer prints the two
 * links itself, so the PHP removal silently does nothing there. This rule is
 * the backstop: inside any cart drawer that currently shows our notice, the
 * checkout link is hidden.
 *
 * Keyed on the notice rather than on a server-rendered state class, so it stays
 * right on a fully cached page and after every AJAX fragment refresh. Requires
 * :has(); on a browser without it the button stays visible and the customer is
 * simply stopped at the checkout instead, which is server-side anyway.
 * ------------------------------------------------------------------ */

.sparkcore-moa-block-checkout .widget_shopping_cart_content:has(.sparkcore-moa-notice) a.checkout,
.sparkcore-moa-block-checkout .woocommerce-mini-cart__buttons:has(~ .sparkcore-moa-notice) a.checkout,
.sparkcore-moa-block-checkout .bde-mini-cart-offcanvas-body:has(.sparkcore-moa-notice) a.checkout,
.sparkcore-moa-block-checkout .bde-mini-cart-offcanvas-footer:has(.sparkcore-moa-notice) a.checkout,
.sparkcore-moa-block-checkout .widget_shopping_cart:has(.sparkcore-moa-notice) a.checkout {
	display: none !important;
}

/* ------------------------------------------------------------------ *
 * 2. WooCommerce's own notices, in the same card
 *
 * Two layers, on purpose:
 *
 *   a. Retune the theme's OWN custom properties. Breakdance drives its notices
 *      entirely from --bde-woo-notices__* and the --*-svg-icon-color pair, so
 *      changing those recolours its notices without any specificity fight, and
 *      keeps working if it reshuffles its selectors.
 *   b. A few structural rules the variables cannot express (border, shadow,
 *      rail). Those are prefixed with `body`, because the theme's own rules are
 *      `.breakdance-woocommerce .woocommerce-error`, the same 0-2-0 weight as
 *      a bare `.sparkcore-moa-styled-notices .woocommerce-error`, and its
 *      stylesheet loads later, so a tie would silently lose.
 *
 * All of it hangs off the body class, so the whole thing can be switched off in
 * the plugin settings.
 * ------------------------------------------------------------------ */

body.sparkcore-moa-styled-notices {
	--bde-woo-notices__error-background: #fff;
	--bde-woo-notices__error-text: var(--bde-body-text-color, #404040);
	--bde-woo-notices__error-link-text: var(--bde-brand-primary-color, #71bb40);
	--bde-woo-notices__error-link-text-hover: var(--bde-brand-primary-color, #71bb40);
	--bde-woo-notices__info-background: #fff;
	--bde-woo-notices__info-text: var(--bde-body-text-color, #404040);
	--bde-woo-notices__success-background: #fff;
	--bde-woo-notices__success-text: var(--bde-body-text-color, #404040);
	--bde-woo-notices__success-link-text: var(--bde-brand-primary-color, #71bb40);
	--bde-woo-notices__success-link-text-hover: var(--bde-brand-primary-color, #71bb40);
	--bde-woo-notices__border-radius: var(--bde-woo-wrappers__border-radius, 4px);
	--bde-woo-notices__padding: 16px;
	--bde-woo-notices__icon-size: 22px;
	/* The theme paints its icons as a CSS mask, so the colour is a
	   background-color and the shape comes from the SVG's opaque area. The "i"
	   is punched out with fill-rule="evenodd", otherwise the mask would render
	   as a plain filled disc. */
	--error-svg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 3.9a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm-1.35 4.6h2.7v7.1h-2.7z'/%3E%3C/svg%3E");
	--info-svg-icon: var(--error-svg-icon);
	--error-svg-icon-color: #ef4444;
	--info-svg-icon-color: #ef4444;
	--success-svg-icon-color: var(--bde-brand-primary-color, #71bb40);
}

body.sparkcore-moa-styled-notices .woocommerce-error,
body.sparkcore-moa-styled-notices .woocommerce-info,
body.sparkcore-moa-styled-notices .woocommerce-message {
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 24px;
	border: 1px solid var(--sparkcore-moa-line);
	/* Red by default: on a WooCommerce shop both .woocommerce-error and
	   .woocommerce-info carry blockers ("there are problems with the items in
	   your cart", "your cart is empty"). Only .woocommerce-message is positive. */
	border-left: 3px solid var(--sparkcore-moa-red);
	box-shadow: var(--sparkcore-moa-shadow);
	font-family: var(--bde-body-font-family, "Inter", sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	list-style: none;
}

/* Success is the only positive one. */
body.sparkcore-moa-styled-notices .woocommerce-message {
	border-left-color: var(--sparkcore-moa-green);
}

/* .woocommerce-error is a <ul> and the theme hangs the icon off its <li>, not
   the container, and sets the <li> to inline-block, which collapses several
   errors onto one line. Stack them, and keep the icon aligned per row. */
body.sparkcore-moa-styled-notices .woocommerce-error > li {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.sparkcore-moa-styled-notices .woocommerce-error > li + li {
	margin-top: 8px;
}

/* Prices must stay inline; the theme sets .woocommerce-Price-amount to block,
   which is what broke the amounts onto their own lines. */
body.sparkcore-moa-styled-notices .woocommerce-error .woocommerce-Price-amount,
body.sparkcore-moa-styled-notices .woocommerce-info .woocommerce-Price-amount,
body.sparkcore-moa-styled-notices .woocommerce-message .woocommerce-Price-amount,
body.sparkcore-moa-styled-notices .woocommerce-error .woocommerce-Price-amount bdi,
body.sparkcore-moa-styled-notices .woocommerce-info .woocommerce-Price-amount bdi,
body.sparkcore-moa-styled-notices .woocommerce-message .woocommerce-Price-amount bdi {
	display: inline;
	font-weight: 700;
	color: var(--bde-headings-color, #673b12);
	white-space: nowrap;
}

body.sparkcore-moa-styled-notices .woocommerce-error strong,
body.sparkcore-moa-styled-notices .woocommerce-info strong,
body.sparkcore-moa-styled-notices .woocommerce-message strong {
	font-weight: 700;
	color: var(--bde-headings-color, #673b12);
}

/* ------------------------------------------------------------------ *
 * Small screens
 *
 * The notice sits in the page flow, so it inherits whatever width its
 * container has. These rules only make sure it never causes sideways scroll:
 * long words and the non-breaking prices are allowed to wrap, and the card
 * cannot grow past its container.
 * ------------------------------------------------------------------ */

.sparkcore-moa-notice,
body.sparkcore-moa-styled-notices .woocommerce-error,
body.sparkcore-moa-styled-notices .woocommerce-info,
body.sparkcore-moa-styled-notices .woocommerce-message {
	max-width: 100%;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

@media (max-width: 600px) {
	.sparkcore-moa-notice {
		padding: 13px 15px;
		gap: 11px;
		font-size: 14px;
		line-height: 1.4;
	}

	.sparkcore-moa-notice__icon svg {
		width: 20px;
		height: 20px;
	}

	/* A price is kept on one line on wide screens, but on a narrow column that
	   can push the card past the viewport. Let it wrap instead. */
	.sparkcore-moa-notice .woocommerce-Price-amount,
	body.sparkcore-moa-styled-notices .woocommerce-error .woocommerce-Price-amount,
	body.sparkcore-moa-styled-notices .woocommerce-info .woocommerce-Price-amount,
	body.sparkcore-moa-styled-notices .woocommerce-message .woocommerce-Price-amount {
		white-space: normal;
	}

	body.sparkcore-moa-styled-notices {
		--bde-woo-notices__padding: 14px;
		--bde-woo-notices__icon-size: 20px;
	}

	body.sparkcore-moa-styled-notices .woocommerce-error,
	body.sparkcore-moa-styled-notices .woocommerce-info,
	body.sparkcore-moa-styled-notices .woocommerce-message {
		font-size: 14px;
		line-height: 1.4;
	}

	/* WooCommerce sometimes puts a button inside a notice. Floating it right
	   overlaps the text once the column is this narrow. */
	body.sparkcore-moa-styled-notices .woocommerce-error .button,
	body.sparkcore-moa-styled-notices .woocommerce-info .button,
	body.sparkcore-moa-styled-notices .woocommerce-message .button {
		float: none;
		display: block;
		margin: 10px 0 0;
		text-align: center;
	}
}