/*
 * WooCommerce notices, in the house style.
 *
 * The stock notices are a grey slab with square corners, a coloured top rule
 * and grey body text - nothing like the rest of the site, and they appear at
 * exactly the moments that matter: password reset, login failure, account
 * updates, checkout.
 *
 * Measured before this file (login error, 2026-09-13):
 *   background #F6F5F8 · border-top 3px #B81C23 · radius 0 · text #515151
 *
 * These now match the card language used everywhere else - white, 10px radius,
 * 1px #E7E9F3 border - with a 4px left accent carrying the state colour, the
 * same device as the quote totals panel.
 *
 * ---------------------------------------------------------------------------
 * MARKUP, VERIFIED NOT ASSUMED
 *
 *   <div class="woocommerce-notices-wrapper">
 *     <ul class="woocommerce-error" role="alert"><li>…</li></ul>
 *   </div>
 *
 * WooCommerce emits these as <ul> for errors and <div> or <ul> for messages
 * depending on the call site, so both are selected. It is the classic notice
 * system, NOT the newer block notice banner, on WooCommerce 11.1.
 *
 * CASCADE: loaded by includes/assets/custom-css.php at wp_head priority 101,
 * alongside tm-custom.css and after WooCommerce's own stylesheet. Same
 * specificity therefore wins on source order. !important is used only where
 * WooCommerce sets a property this has to unset outright - the top rule.
 *
 * CONTRAST: the state colours are deliberately NOT the brand orange. #F57B20
 * measures 2.71:1 against white, well under the 4.5:1 needed for body text.
 * The greens and reds below all clear 4.5:1 on white.
 * ---------------------------------------------------------------------------
 */

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info,
ul.woocommerce-error,
ul.woocommerce-message,
ul.woocommerce-info,
div.woocommerce-message,
div.woocommerce-error,
div.woocommerce-info {
	background: #FFFFFF;
	border: 1px solid #E7E9F3;
	border-top: 1px solid #E7E9F3 !important;
	border-left-width: 4px;
	border-left-style: solid;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(40, 48, 113, .06);
	color: #283071;
	font-family: Poppins, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.55;
	list-style: none;
	margin: 0 0 20px;
	padding: 16px 22px 16px 54px;
}

.woocommerce-notices-wrapper .woocommerce-message li,
.woocommerce-notices-wrapper .woocommerce-error li,
.woocommerce-notices-wrapper .woocommerce-info li,
ul.woocommerce-error li,
ul.woocommerce-message li,
ul.woocommerce-info li {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.woocommerce-error li + li,
ul.woocommerce-message li + li,
ul.woocommerce-info li + li {
	margin-top: 6px;
}

/* State accents. Left border and icon only - the text stays navy so it is
   readable at full contrast rather than tinted.
   
   These selectors MUST carry the same specificity as the base block above.
   The base sets the 'border' shorthand from a descendant selector
   (.woocommerce-notices-wrapper .woocommerce-error, 0-2-0), and a shorthand
   writes border-left-color too - so a lower-specificity accent rule silently
   loses and the accent renders grey. Measured that exact failure on the first
   deploy of this file. */
.woocommerce-notices-wrapper .woocommerce-message,
div.woocommerce-message,
ul.woocommerce-message {
	border-left-color: #1E8E3E;
}

.woocommerce-notices-wrapper .woocommerce-error,
div.woocommerce-error,
ul.woocommerce-error {
	border-left-color: #C62828;
}

.woocommerce-notices-wrapper .woocommerce-info,
div.woocommerce-info,
ul.woocommerce-info {
	border-left-color: #283071;
}

/* WooCommerce draws its icon in ::before and reserves the left padding for it.
   Keep the glyph, recolour it per state, and line it up with the new padding. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
	top: 18px;
	left: 20px;
	font-size: 18px;
	line-height: 1;
}

.woocommerce-message::before {
	color: #1E8E3E;
}

.woocommerce-error::before {
	color: #C62828;
}

.woocommerce-info::before {
	color: #283071;
}

/* Notices can carry an action button - "View cart", "Login". Match the site
   button rather than WooCommerce's default pill. */
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
	background: #F57B20;
	border: 0;
	border-radius: 999px;
	color: #FFFFFF;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 9px 22px;
	transition: background .18s ease;
}

.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover {
	background: #DD6A12;
	color: #FFFFFF;
}

@media (max-width: 600px) {
	.woocommerce-notices-wrapper .woocommerce-message,
	.woocommerce-notices-wrapper .woocommerce-error,
	.woocommerce-notices-wrapper .woocommerce-info,
	ul.woocommerce-error,
	ul.woocommerce-message,
	ul.woocommerce-info,
	div.woocommerce-message,
	div.woocommerce-error,
	div.woocommerce-info {
		font-size: 14.5px;
		padding: 14px 16px 14px 46px;
	}

	.woocommerce-message::before,
	.woocommerce-error::before,
	.woocommerce-info::before {
		top: 16px;
		left: 16px;
	}
}