/**
 * Alerts and inline notices — info / success / warning / error.
 *
 * Markup pattern:
 *
 *   <div class="nbf-alert nbf-alert--info" role="status">
 *     <svg class="nbf-alert__icon" …>
 *     <div class="nbf-alert__content">
 *       <p class="nbf-alert__title">…</p>
 *       <p>…</p>
 *     </div>
 *   </div>
 *
 * Use role="alert" only for urgent interruptions (errors appearing
 * dynamically); role="status" for polite notices.
 */

.nbf-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--nbf-space-3);
	padding: var(--nbf-space-4);
	border-radius: var(--nbf-radius-md);
	border: 1px solid transparent;
	font-size: var(--nbf-fs-sm);
	line-height: var(--nbf-lh-body);
}

.nbf-alert__icon {
	flex-shrink: 0;
	margin-block-start: 0.2em;
}

.nbf-alert__content {
	flex: 1;
	min-inline-size: 0;
}

.nbf-alert__content > :last-child {
	margin-block-end: 0;
}

.nbf-alert__title {
	font-weight: var(--nbf-fw-bold);
	margin-block-end: var(--nbf-space-1);
}

.nbf-alert--info {
	background: var(--nbf-color-info-bg);
	border-color: var(--nbf-color-primary-200);
	color: var(--nbf-color-primary-800);
}

.nbf-alert--success {
	background: var(--nbf-color-success-bg);
	border-color: #bfe8d3;
	color: #0e6b41;
}

.nbf-alert--warning {
	background: var(--nbf-color-warning-bg);
	border-color: #f3ddb0;
	color: #8a5a06;
}

.nbf-alert--error {
	background: var(--nbf-color-error-bg);
	border-color: #f5c4cb;
	color: #a72938;
}

/* Compact single-line notice (e.g. hold countdown strip) */
.nbf-alert--compact {
	padding-block: var(--nbf-space-2);
	align-items: center;
}

/* ------------------------------------------------------------------
 * WooCommerce notices → theme toast look
 *
 * WooCommerce prints .woocommerce-error/-message/-info as bare full-width
 * bars outside any container. Restyled here so every notice — add-to-cart
 * confirmations, booking validation errors, "no orders yet" info — sits
 * centered on the container grid and reads exactly like the theme's own
 * add-to-cart toast: a white card with a soft colored icon circle, dark
 * text and a primary action button. Unlike the toast these are inline
 * page content, so they never auto-dismiss.
 * ---------------------------------------------------------------- */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	box-sizing: border-box;
	position: relative;
	inline-size: calc(100% - 2 * var(--nbf-container-pad));
	max-inline-size: calc(var(--nbf-container-max) - 2 * var(--nbf-container-pad));
	margin: var(--nbf-space-4) auto;
	padding: var(--nbf-space-3) var(--nbf-space-4);
	/* Reserved room for the icon circle at the inline start — WooCommerce
	 * core positions its icon-font glyph absolutely and relies on padding
	 * it sets itself; once the theme owns the padding, that glyph lands on
	 * the first characters unless the space is reserved here. */
	padding-inline-start: calc(var(--nbf-space-4) + 2.25rem + var(--nbf-space-3));
	min-block-size: calc(2.25rem + 2 * var(--nbf-space-3));
	list-style: none;
	background: var(--nbf-color-surface);
	border: 1px solid var(--nbf-color-border);
	border-radius: var(--nbf-radius-lg);
	box-shadow: var(--nbf-shadow-sm);
	color: var(--nbf-color-text);
	font-size: var(--nbf-fs-sm);
	font-weight: var(--nbf-fw-medium);
	line-height: 2.8;
	display: flow-root;
	align-content: center;
}

/* The toast's icon badge: a soft colored circle with the status glyph,
 * replacing WooCommerce's icon-font glyph outright (content is
 * re-declared, so the core glyph and its positioning never render).
 * Stroke colors are literal because a data URI cannot read tokens; they
 * mirror --nbf-color-success/-error/-primary-600 on their -bg fills. */
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	inset-inline-start: var(--nbf-space-4);
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border-radius: var(--nbf-radius-full);
	background: var(--nbf-notice-icon-bg) var(--nbf-notice-icon) center / 1.25rem no-repeat;
}

.woocommerce-message::before {
	--nbf-notice-icon-bg: var(--nbf-color-success-bg);
	--nbf-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7a49' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.woocommerce-error::before {
	--nbf-notice-icon-bg: var(--nbf-color-error-bg);
	--nbf-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d63b4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7.5V13'/%3E%3Cpath d='M12 16.5h.01'/%3E%3C/svg%3E");
}

.woocommerce-info::before {
	--nbf-notice-icon-bg: var(--nbf-color-primary-50);
	--nbf-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231565d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.5h.01'/%3E%3C/svg%3E");
}

/* WooCommerce moves focus to fresh notices (tabindex="-1", role="alert");
 * the card itself is not interactive, so the UA focus ring would only
 * read as a second border around it. */
.woocommerce-error:focus,
.woocommerce-message:focus,
.woocommerce-info:focus {
	outline: none;
}

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

/* Action links WooCommerce embeds in notices ("View cart", "Browse
 * products") become the toast's primary CTA at the far edge. The element
 * in the selector out-ranks WooCommerce core's gray `.woocommerce
 * a.button` painting. */
:is(.woocommerce-error, .woocommerce-message, .woocommerce-info) :is(a, button).button {
	float: inline-end;
	display: inline-flex;
	align-items: center;
	min-block-size: 2.5rem;
	margin-inline-start: var(--nbf-space-3);
	padding: 0.25rem var(--nbf-space-4);
	border: 0;
	border-radius: var(--nbf-radius-sm);
	background: var(--nbf-color-primary-600);
	color: #fff;
	font-size: var(--nbf-fs-sm);
	font-weight: var(--nbf-fw-bold);
	line-height: var(--nbf-lh-tight);
	text-decoration: none;
	cursor: pointer;
}

:is(.woocommerce-error, .woocommerce-message, .woocommerce-info) :is(a, button).button:hover {
	background: var(--nbf-color-primary-700);
	color: #fff;
	text-decoration: none;
}