/*
 * Badges (Phase 3A — docs/COMPONENT-LIBRARY.md), per docs/DESIGN-SYSTEM.md §7:
 * sale, new, refurbished/brand-new (condition), out-of-stock, low-stock,
 * warranty, featured. Tints are computed from tokens via color-mix() rather
 * than hardcoded as separate hex values, so there is exactly one source of
 * truth per colour.
 */

.bholats-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-sm);
	font-size: var(--text-xs);
	font-weight: var(--font-weight-semibold);
	line-height: 1.2;
	white-space: nowrap;
}

/* Sale — never brand-blue, so it never competes with the primary CTA colour */
.bholats-badge--sale {
	background: color-mix(in srgb, var(--color-sale) 12%, white);
	color: var(--color-sale);
}

/* New arrival */
.bholats-badge--new {
	background: color-mix(in srgb, var(--color-brand-bright) 16%, white);
	color: var(--color-brand-deep);
}

/* Condition: Certified Refurbished */
.bholats-badge--refurbished {
	background: color-mix(in srgb, var(--color-brand-deep) 8%, white);
	color: var(--color-brand-deep);
}

/* Condition: Brand New */
.bholats-badge--brand-new {
	background: var(--color-success-bg);
	color: var(--color-success);
}

/* Out of stock — --color-text-secondary, not --color-text-muted (only 3.06:1
   on this background, fails WCAG AA) — found via axe-core, Phase 3A,
   docs/COMPONENT-LIBRARY.md §14 */
.bholats-badge--out-of-stock {
	background: var(--color-surface-muted);
	color: var(--color-text-secondary);
}

/* Low stock */
.bholats-badge--low-stock {
	background: var(--color-warning-bg);
	color: var(--color-warning);
}

/* Warranty — neutral/informational, outlined rather than filled so it never
   reads as a status/urgency badge the way sale/stock badges do */
.bholats-badge--warranty {
	background: transparent;
	color: var(--color-text-secondary);
	border: var(--border-width-sm) solid var(--color-border-strong);
}

/* Featured — text uses --color-brand-deep, not --color-brand-blue (only
   4.04:1 on this tint, fails WCAG AA) — found via axe-core, Phase 3A,
   docs/COMPONENT-LIBRARY.md §14. The tint background can still reference
   brand-blue; only the foreground text colour needed correcting. */
.bholats-badge--featured {
	background: color-mix(in srgb, var(--color-brand-blue) 12%, white);
	color: var(--color-brand-deep);
}

.bholats-badge svg { width: var(--icon-xs); height: var(--icon-xs); }

/* --- Positioning helper for badges placed on media (product card corners) ---
   Sale badge (top-right) and condition badge (top-left) never occupy the same
   corner, per docs/DESIGN-SYSTEM.md's product-card spec. max-width + wrap
   keeps a long label (e.g. "Certified Refurbished") from overflowing a
   narrow 2-column mobile card — it wraps to two lines instead of being
   clipped by the card's overflow:hidden (found in the Phase 3A screenshot
   loop, docs/COMPONENT-LIBRARY.md). */
.bholats-badge--corner-tl,
.bholats-badge--corner-tr {
	/* display:inline-block (not inline-flex) so a definite max-width actually
	   forces the text to wrap onto a second line instead of overflowing its
	   own box — see docs/COMPONENT-LIBRARY.md. Fine here since corner badges
	   never combine an icon with text. */
	display: inline-block;
	position: absolute;
	top: var(--space-2);
	z-index: var(--z-raised);
	white-space: normal;
	line-height: var(--leading-snug);
}

/* The wishlist button always sits top-right (~36px + gap). A long top-left
   condition badge ("Certified Refurbished") on a narrow mobile card was
   found visually overlapping it — the wishlist button's opaque white circle
   rendered on top of the badge's trailing letters (Phase 3A screenshot
   loop). Reserving that width forces the badge to wrap instead of collide. */
.bholats-badge--corner-tl { left: var(--space-2); max-width: calc(100% - var(--space-4) - 44px); }
.bholats-badge--corner-tr { right: var(--space-2); text-align: right; max-width: calc(100% - var(--space-4)); }