/**
 * WooCommerce notices, restyled to the dark theme.
 *
 * These are output by WooCommerce/the theme, usually OUTSIDE the plugin's
 * .tsd-scope wrapper, so they are targeted by WooCommerce's own class names
 * rather than the .tsd prefix. Themes style these aggressively and add a
 * focus/alert outline, so the properties they force are forced back with
 * !important and the outline is removed.
 *
 * @package TSD_Order_Quote
 */

/* The wrapper WooCommerce puts around a group of notices. */
.woocommerce-notices-wrapper,
.woocommerce .woocommerce-notices-wrapper { margin: 0 0 18px; }

/* All three notice types share the card. WooCommerce uses either <ul> or
   <div> depending on version; cover both, and the message list items. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce ul.woocommerce-error,
.woocommerce ul.woocommerce-message,
.woocommerce ul.woocommerce-info {
	display: flex !important;
	align-items: center !important;
	gap: 13px !important;
	margin: 0 0 12px !important;
	padding: 15px 18px !important;
	list-style: none !important;
	background: var(--tsd-paper-2, #12283F) !important;
	border: 1px solid var(--tsd-line, #1E3247) !important;
	border-radius: var(--tsd-radius-sm, 8px) !important;
	box-shadow: none !important;
	outline: none !important;
	color: var(--tsd-ink, #EAF0F7) !important;
	font-family: var(--tsd-font-b, 'Inter', sans-serif) !important;
	font-size: 14.5px !important;
	line-height: 1.45 !important;
	-webkit-box-shadow: none !important;
}

/* Kill the focus / alert outline the theme or browser adds, in every state. */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus,
.woocommerce-message:focus-visible,
.woocommerce-info:focus-visible,
.woocommerce-error:focus-visible,
.woocommerce-message[tabindex]:focus,
.woocommerce-info[tabindex]:focus,
.woocommerce-error[tabindex]:focus,
[role="alert"].woocommerce-message:focus,
[role="alert"].woocommerce-info:focus,
[role="alert"].woocommerce-error:focus {
	outline: none !important;
	box-shadow: none !important;
	border-color: var(--tsd-line, #1E3247) !important;
}

/* Remove WooCommerce's default top-border accent + its ::before tick, so our
   own icon badge is the only marker. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: "" !important;
	position: static !important;
	display: inline-flex !important;
	flex-shrink: 0 !important;
	width: 26px !important;
	height: 26px !important;
	margin: 0 !important;
	top: auto !important;
	left: auto !important;
	border-radius: 50% !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 16px 16px !important;
	font-family: inherit !important;
	color: transparent !important;
}

/* Type accents: left bar + the icon badge colour, drawn as an inline SVG in
   the ::before background so no markup change is needed. */

.woocommerce-message::before {
	background-color: rgba(62, 207, 106, .15) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233ecf6a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
}

.woocommerce-info::before {
	background-color: rgba(1, 115, 253, .16) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233a90ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") !important;
}

.woocommerce-error::before {
	background-color: rgba(255, 107, 90, .15) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ff6b5a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") !important;
}

/* The message text sits between the icon and any action button. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error { flex-wrap: nowrap !important; }
.woocommerce-message > *:not(.button):not(a.button),
.woocommerce-info > *:not(.button):not(a.button),
.woocommerce-error > *:not(.button):not(a.button) { min-width: 0; }
.woocommerce-message strong,
.woocommerce-info strong,
.woocommerce-error strong { color: #fff !important; font-weight: 600 !important; }

/* The "Undo?" / forward button, restyled from the raw theme link to a small
   bordered button, pushed to the right. */
.woocommerce-message .button,
.woocommerce-message a.button,
.woocommerce-info .button,
.woocommerce-info a.button,
.woocommerce-error .button,
.woocommerce-error a.button,
.woocommerce-message .wc-forward,
.woocommerce-info .wc-forward,
.woocommerce-error .wc-forward,
.woocommerce-message .restore-item,
.woocommerce-info .restore-item,
.woocommerce-error .restore-item {
	margin-left: auto !important;
	flex-shrink: 0 !important;
	order: 9 !important;
	min-height: 0 !important;
	padding: 6px 12px !important;
	background: var(--tsd-paper, #0E2135) !important;
	border: 1px solid var(--tsd-line, #1E3247) !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	color: var(--tsd-green-600, #3a90ff) !important;
	font-family: var(--tsd-font-d, 'Rajdhani', sans-serif) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	text-transform: uppercase !important;
	letter-spacing: .03em !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	transition: border-color .15s, color .15s !important;
}
.woocommerce-message .button:hover,
.woocommerce-message a.button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover,
.woocommerce-message .wc-forward:hover,
.woocommerce-info .wc-forward:hover,
.woocommerce-error .wc-forward:hover,
.woocommerce-message .restore-item:hover,
.woocommerce-info .restore-item:hover,
.woocommerce-error .restore-item:hover {
	border-color: var(--tsd-green, #0173FD) !important;
	color: #fff !important;
	background: var(--tsd-paper, #0E2135) !important;
}
.woocommerce-message .button:focus,
.woocommerce-info .button:focus,
.woocommerce-error .button:focus,
.woocommerce-message .wc-forward:focus,
.woocommerce-info .wc-forward:focus,
.woocommerce-error .wc-forward:focus,
.woocommerce-message .restore-item:focus,
.woocommerce-info .restore-item:focus,
.woocommerce-error .restore-item:focus {
	outline: none !important;
	box-shadow: none !important;
}