/*
 * Feedback components (Phase 3A — docs/COMPONENT-LIBRARY.md): alert/notice,
 * toast, spinner, skeleton loader, empty state, error state.
 *
 * Alert also styles WooCommerce's own native notice markup
 * (.woocommerce-message / .woocommerce-error / .woocommerce-info) directly,
 * so real WooCommerce notices render correctly without a template override —
 * per docs/THEME-ARCHITECTURE.md's "override only when visually necessary".
 */

/* --- Alert / Notice --- */

.bholats-alert,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
ul.woocommerce-error {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-4);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	list-style: none;
	margin: 0 0 var(--space-4);
}

.bholats-alert__icon { width: var(--icon-md); height: var(--icon-md); flex-shrink: 0; }
.bholats-alert__content { flex: 1; }

/* Phase 3K.2 QA fix: WooCommerce core ships its own icon-font glyph on
   `.woocommerce-message/-error/-info::before` (font-family: WooCommerce,
   content: "\e028", position: absolute, left: 1.5em, top: 1em), sized to sit
   inside core's own 3.5em left padding gutter. The flex layout above
   replaces that padding with a uniform var(--space-4), but never suppressed
   the icon itself — so it now renders absolutely positioned directly on top
   of the notice's first line of text (confirmed via getComputedStyle: a
   14px WooCommerce-icon-font glyph landing at 1.5em/1em, overlapping "No
   downloads available yet." on the empty Downloads state, and present on
   every other native notice site-wide since all three classes share the
   same core rule). Suppressed here rather than re-adding the 3.5em gutter,
   since every notice already in this design system uses its own real inline
   SVG icon (.bholats-alert__icon) when an icon is wanted — matching the
   precedent already set in account.css for a different WooCommerce
   pseudo-element bug (the `.woocommerce::before/::after` grid clearfix
   issue). Same fix, same reasoning, different selector. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
	content: none;
	display: none;
}
.bholats-alert__title { font-weight: var(--font-weight-semibold); display: block; margin-bottom: var(--space-1); }

.bholats-alert--info,
.woocommerce-info {
	background: color-mix(in srgb, var(--color-brand-blue) 8%, white);
	color: var(--color-brand-deep);
}

.bholats-alert--success,
.woocommerce-message {
	background: var(--color-success-bg);
	color: var(--color-success);
}

.bholats-alert--warning {
	background: var(--color-warning-bg);
	color: var(--color-warning);
}

.bholats-alert--error,
.woocommerce-error,
ul.woocommerce-error {
	background: var(--color-error-bg);
	color: var(--color-error);
}

.bholats-alert__dismiss {
	background: none;
	border: none;
	color: inherit;
	opacity: 0.7;
	cursor: pointer;
	padding: var(--space-1);
	flex-shrink: 0;
}
.bholats-alert__dismiss:hover { opacity: 1; }
.bholats-alert__dismiss svg { width: var(--icon-sm); height: var(--icon-sm); }

/* --- Toast ---
   Fixed-position, stacked, self-dismissing (see assets/js/toast.js).
   role="status"/aria-live="polite" set in markup so screen readers announce
   it without stealing focus. */

.bholats-toast-region {
	position: fixed;
	bottom: var(--space-6);
	right: var(--space-6);
	z-index: var(--z-toast);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 360px;
}

.bholats-toast {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	background: var(--color-brand-ink);
	color: var(--color-text-on-brand);
	padding: var(--space-4);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	font-size: var(--text-sm);
	animation: bholats-fade-in var(--duration-base) var(--ease-out);
}

.bholats-toast--success { border-left: 3px solid var(--color-success); }
.bholats-toast--error { border-left: 3px solid var(--color-error); }

.bholats-toast__dismiss {
	background: none;
	border: none;
	color: var(--color-text-on-brand);
	opacity: 0.7;
	cursor: pointer;
	flex-shrink: 0;
}
.bholats-toast__dismiss:hover { opacity: 1; }

/* --- Spinner --- */

.bholats-spinner {
	display: inline-block;
	width: var(--bholats-spinner-size, 20px);
	height: var(--bholats-spinner-size, 20px);
	border-radius: var(--radius-full);
	border: 2px solid var(--color-border);
	border-top-color: var(--color-brand-blue);
	animation: bholats-spin 700ms linear infinite;
}

.bholats-spinner--sm { --bholats-spinner-size: 14px; }
.bholats-spinner--lg { --bholats-spinner-size: 32px; }

@media (prefers-reduced-motion: reduce) {
	.bholats-spinner { animation-duration: 1.4s; }
}

/* --- Skeleton loader ---
   A subtle brand-blue-tinted sweep rather than a generic grey pulse — the
   loading-state expression of the signature "trace" motif
   (docs/DESIGN-SYSTEM.md §6). */

.bholats-skeleton {
	background-color: var(--color-surface-muted);
	background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-brand-blue) 12%, transparent), transparent);
	background-size: 200% 100%;
	animation: bholats-shimmer 1.6s ease-in-out infinite;
	border-radius: var(--radius-sm);
}

.bholats-skeleton-line { height: 12px; margin-bottom: var(--space-2); }
.bholats-skeleton-line:last-child { margin-bottom: 0; width: 60%; }

.bholats-skeleton-block { aspect-ratio: 1; width: 100%; }

@media (prefers-reduced-motion: reduce) {
	.bholats-skeleton { animation: none; background-image: none; }
}

/* --- Empty state --- */

.bholats-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-3);
	padding: var(--space-12) var(--space-6);
	color: var(--color-text-secondary);
}

.bholats-empty-state__icon {
	width: 48px;
	height: 48px;
	color: var(--color-text-muted);
}

.bholats-empty-state__title {
	font-size: var(--text-h4);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	font-family: var(--font-body);
}

.bholats-empty-state__text { font-size: var(--text-sm); max-width: 40ch; }

/* --- Error state (distinguished from empty state by icon/tint only — same
   layout, since both are "nothing to show, here's why and what to do") --- */

.bholats-error-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-3);
	padding: var(--space-12) var(--space-6);
}

.bholats-error-state__icon { width: 48px; height: 48px; color: var(--color-error); }
.bholats-error-state__title { font-size: var(--text-h4); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); font-family: var(--font-body); }
.bholats-error-state__text { font-size: var(--text-sm); color: var(--color-text-secondary); max-width: 40ch; }