/*
 * Merchant notices — Claude Design "Toasts" comp. docs/design-system.md §9.15.
 *
 * The toast panel's fill, radius, padding and type are NOT here: they are the
 * theme style's native WooCommerce - Notice controls (tools/build-notices.php),
 * so the client can change them in Bricks. This file holds only what Bricks has
 * no control for: glyphs (pseudo-element masks), the stack layout (Bricks drops
 * flex controls on Woo elements), the dismiss control, motion, and the light
 * inline treatment that overrides the theme style outside the toast region.
 */

:root {
	--m-glyph-success: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path transform='translate(1.5 1.5)' d='M 10.5 0 C 4.702 0 0 4.702 0 10.5 C 0 16.298 4.702 21 10.5 21 C 16.298 21 21 16.298 21 10.5 C 21 4.702 16.298 0 10.5 0 Z M 15.035 7.071 L 10.099 13.915 C 10.03 14.011 9.939 14.09 9.834 14.144 C 9.729 14.198 9.612 14.226 9.493 14.226 C 9.375 14.226 9.258 14.198 9.153 14.144 C 9.047 14.09 8.956 14.011 8.888 13.915 L 5.965 9.865 C 5.876 9.741 5.965 9.567 6.117 9.567 L 7.216 9.567 C 7.455 9.567 7.683 9.682 7.823 9.879 L 9.492 12.195 L 13.177 7.085 C 13.317 6.891 13.542 6.773 13.784 6.773 L 14.883 6.773 C 15.035 6.773 15.124 6.947 15.035 7.071 Z'/></svg>");
	--m-glyph-error: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path transform='translate(1.5 1.5)' d='M 10.5 0 C 4.702 0 0 4.702 0 10.5 C 0 16.298 4.702 21 10.5 21 C 16.298 21 21 16.298 21 10.5 C 21 4.702 16.298 0 10.5 0 Z M 14.377 14.489 L 12.83 14.482 L 10.5 11.705 L 8.173 14.48 L 6.623 14.487 C 6.52 14.487 6.436 14.405 6.436 14.299 C 6.436 14.255 6.452 14.213 6.48 14.177 L 9.53 10.545 L 6.48 6.914 C 6.452 6.88 6.436 6.837 6.436 6.792 C 6.436 6.689 6.52 6.605 6.623 6.605 L 8.173 6.612 L 10.5 9.389 L 12.827 6.614 L 14.374 6.607 C 14.477 6.607 14.562 6.689 14.562 6.795 C 14.562 6.839 14.545 6.881 14.517 6.916 L 11.473 10.547 L 14.52 14.18 C 14.548 14.215 14.564 14.257 14.564 14.302 C 14.564 14.405 14.48 14.489 14.377 14.489 Z'/></svg>");
	--m-glyph-warning: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path transform='translate(1.5 1.5)' d='M 10.5 0 C 4.702 0 0 4.702 0 10.5 C 0 16.298 4.702 21 10.5 21 C 16.298 21 21 16.298 21 10.5 C 21 4.702 16.298 0 10.5 0 Z M 9.75 5.438 C 9.75 5.334 9.834 5.25 9.938 5.25 L 11.063 5.25 C 11.166 5.25 11.25 5.334 11.25 5.438 L 11.25 11.813 C 11.25 11.916 11.166 12 11.063 12 L 9.938 12 C 9.834 12 9.75 11.916 9.75 11.813 L 9.75 5.438 Z M 10.5 15.75 C 10.206 15.744 9.925 15.623 9.719 15.412 C 9.513 15.202 9.398 14.919 9.398 14.625 C 9.398 14.331 9.513 14.048 9.719 13.838 C 9.925 13.627 10.206 13.506 10.5 13.5 C 10.794 13.506 11.075 13.627 11.281 13.838 C 11.487 14.048 11.602 14.331 11.602 14.625 C 11.602 14.919 11.487 15.202 11.281 15.412 C 11.075 15.623 10.794 15.744 10.5 15.75 Z'/></svg>");
	--m-glyph-info: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path transform='translate(1.5 1.5)' d='M 10.5 0 C 4.702 0 0 4.702 0 10.5 C 0 16.298 4.702 21 10.5 21 C 16.298 21 21 16.298 21 10.5 C 21 4.702 16.298 0 10.5 0 Z M 10.5 19.219 C 5.686 19.219 1.781 15.314 1.781 10.5 C 1.781 5.686 5.686 1.781 10.5 1.781 C 15.314 1.781 19.219 5.686 19.219 10.5 C 19.219 15.314 15.314 19.219 10.5 19.219 Z'/><path transform='translate(10.875 6.75)' d='M 0 1.125 C 0 1.423 0.119 1.71 0.33 1.92 C 0.54 2.131 0.827 2.25 1.125 2.25 C 1.423 2.25 1.71 2.131 1.92 1.92 C 2.131 1.71 2.25 1.423 2.25 1.125 C 2.25 0.827 2.131 0.54 1.92 0.33 C 1.71 0.119 1.423 0 1.125 0 C 0.827 0 0.54 0.119 0.33 0.33 C 0.119 0.54 0 0.827 0 1.125 Z M 1.688 3.75 L 0.563 3.75 C 0.459 3.75 0.375 3.834 0.375 3.938 L 0.375 10.313 C 0.375 10.416 0.459 10.5 0.563 10.5 L 1.688 10.5 C 1.791 10.5 1.875 10.416 1.875 10.313 L 1.875 3.938 C 1.875 3.834 1.791 3.75 1.688 3.75 Z'/></svg>");
}

/* ── Every notice: glyph slot, kind colours, title/body ─────────────────── */

:is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .m-die-card) {
	--m-accent: var(--c-accent-green, #6adc6e);
	--m-glyph: var(--m-glyph-success);
	position: relative;
	display: block; /* Bricks' Woo CSS lays notices out as a row */
	list-style: none;
}
.woocommerce-info { --m-accent: var(--c-accent-blue, #45afff); --m-glyph: var(--m-glyph-info); }
.woocommerce-info[data-kind="warning"] { --m-accent: var(--c-brand, #f4c76b); --m-glyph: var(--m-glyph-warning); }
:is(.woocommerce-error, .m-die-card) { --m-accent: var(--c-accent-red, #ee8574); --m-glyph: var(--m-glyph-error); }

/* Woo and Bricks both draw their own icon font in ::before — replaced wholesale. */
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .m-die-card)::before {
	content: "";
	position: absolute;
	top: var(--m-glyph-top, 22px);
	left: var(--sp-6, 24px);
	width: 24px;
	height: 24px;
	margin: 0;
	font-family: inherit;
	background: var(--m-accent);
	-webkit-mask: var(--m-glyph) center / contain no-repeat;
	mask: var(--m-glyph) center / contain no-repeat;
}

.m-notice-title { display: block; font-weight: var(--fw-demibold, 600); }
.m-notice-body {
	display: block;
	margin-top: var(--sp-1, 4px);
	font-size: var(--t-sm-size, 14px);
	line-height: var(--t-sm-lh, 20px);
	font-weight: var(--fw-regular, 400);
}
.woocommerce-error li { display: block; list-style: none; margin: 0; padding: 0; } /* Bricks lays these out as a row too */
.woocommerce-error li + li { margin-top: var(--sp-2, 8px); }

/* ── Toasts: the header's Notice element (.m-toasts) ────────────────────── */

.m-toasts {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3, 12px);
	pointer-events: none;
}
.m-toasts:empty { display: none; }
.m-toasts > * {
	pointer-events: auto;
	animation: m-toast-in 180ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.m-toasts > .is-leaving { animation: m-toast-out var(--motion-fast, 150ms) ease both; }
/* Woo focuses a new role="alert" notice for screen readers; the panel is not
   interactive, so no ring. The dismiss button keeps its own. */
.m-toasts [tabindex="-1"]:focus { outline: none; }
.m-toasts .m-notice-body { color: var(--c-border-soft, #d9d9d9); }

/* Woo's button styling on notice links — the theme style's link colour wins. */
.m-toasts a.button {
	display: block;
	float: none;
	width: max-content;
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	background: none;
	min-height: 0;
}

.m-notice-dismiss {
	position: absolute;
	top: var(--sp-5, 20px);
	right: var(--sp-5, 20px);
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill, 9999px);
	background: var(--c-ink-placeholder, #bfbfbf);
	-webkit-mask: var(--m-glyph-error) center / contain no-repeat;
	mask: var(--m-glyph-error) center / contain no-repeat;
	cursor: pointer;
	transition: opacity var(--motion-fast, 150ms) ease;
}
.m-notice-dismiss:hover { opacity: 0.86; }
.m-notice-dismiss:focus-visible { outline: none; background: var(--c-surface, #fff); }
/* 44px target without growing the glyph. */
.m-notice-dismiss::after { content: ""; position: absolute; inset: -10px; }

@keyframes m-toast-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes m-toast-out { to { opacity: 0; transform: translateY(-8px); } }

/* Mobile: full width under the header, one at a time. */
@media (max-width: 767px) {
	.m-toasts > :not(:first-child) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.m-toasts > *, .m-toasts > .is-leaving { animation: none; }
}

/* ── Inline notice: the rule card, anywhere outside the toast region ───────
 * Checkout validation (.woocommerce-NoticeGroup), the coupon element's own
 * notices, Woo's Cart block banners, and the wp_die() screen. The theme style
 * paints every Woo notice dark, so `body` lifts these above its selectors.
 * The checkout coupon toggle is a .woocommerce-info styled by its own element
 * controls, and is left alone.
 */
body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):not(.m-toasts *, .woocommerce-form-coupon-toggle *),
body .m-die-card {
	--m-glyph-top: 21px;
	margin: 0 0 var(--sp-4, 16px);
	padding: var(--sp-5, 20px) var(--sp-6, 24px) var(--sp-5, 20px) 64px;
	background: var(--c-surface-muted, #f2f2f2);
	border: 0;
	border-top: 1px solid var(--c-ink, #000);
	border-left: 2px solid var(--c-ink, #000);
	border-radius: 0;
	box-shadow: none;
	color: var(--c-ink, #000);
	font-size: var(--t-body-size, 16px);
	line-height: var(--t-body-lh, 24px);
	font-weight: var(--fw-demibold, 600);
}
/* Dark accents fail contrast on light grey; the semantic tokens exist for this. */
body .woocommerce-message:not(.m-toasts *) { --m-accent: var(--c-success, #2e7d32); }
body .woocommerce-info[data-kind="warning"]:not(.m-toasts *) { --m-accent: var(--c-warning, #8a6100); }
body :is(.woocommerce-error:not(.m-toasts *), .m-die-card) { --m-accent: var(--c-error, #b3261e); }
body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):not(.m-toasts *) .m-notice-body,
body .m-die-card .m-notice-body { color: var(--c-ink-strong, #262626); }
body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):not(.m-toasts *, .woocommerce-form-coupon-toggle *) a,
body .m-die-card a {
	float: none;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-ink, #000);
	font-size: var(--t-sm-size, 14px);
	font-weight: var(--fw-demibold, 600);
	text-decoration: underline;
}

/* Woo's Cart block draws its own banner component. */
body .wc-block-components-notice-banner {
	padding: var(--sp-5, 20px) var(--sp-6, 24px);
	background: var(--c-surface-muted, #f2f2f2);
	border: 0;
	border-top: 1px solid var(--c-ink, #000);
	border-left: 2px solid var(--c-ink, #000);
	border-radius: 0;
	color: var(--c-ink, #000);
	font-size: var(--t-body-size, 16px);
}
body .wc-block-components-notice-banner > svg { fill: var(--c-ink, #000); background: none; }
body .wc-block-components-notice-banner.is-error > svg { fill: var(--c-error, #b3261e); }
body .wc-block-components-notice-banner.is-success > svg { fill: var(--c-success, #2e7d32); }

/* ── wp_die() screen ─────────────────────────────────────────────────────── */

body.m-die {
	margin: 0;
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: var(--sp-5, 20px);
	box-sizing: border-box;
	background: var(--c-surface, #fff);
	font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
}
body .m-die-card { width: 100%; max-width: 640px; box-sizing: border-box; margin: 0; }
.m-die-card p { margin: 0; }
.m-die-card p + p, .m-die-card ul { margin-top: var(--sp-2, 8px); }
.m-die-card a { display: inline-block; margin-top: var(--sp-3, 12px); }