/* ---------------------------------------------------------------------------
   MicroBite POS — [sfc2] site-wide cart badge.

   Drops into a theme header via [mbpos_cart_badge], so it must NOT assume a
   background, a font, or a text colour: it inherits all three. currentColor
   throughout for the same reason — the icon follows whatever the header sets.

   No fixed positioning anywhere in this file. The header's own stickiness is
   the header's business; a second fixed element competing with an Elementor or
   Bricks sticky header is a collision this plugin cannot resolve from inside.
   --------------------------------------------------------------------------- */

[data-mbpos].mbpos-cart-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;

	/* Tap floor, same as the sticky bar's controls. An icon plus one digit is
	   small enough to miss without it. */
	min-width: 44px;
	min-height: 44px;
	padding: 0 8px;
	box-sizing: border-box;

	color: inherit;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
}

[data-mbpos].mbpos-cart-badge[hidden] {
	/* The theme may set a display on anchors, which beats the UA sheet's
	   [hidden] rule. An empty cart must stay invisible regardless. */
	display: none !important;
}

[data-mbpos] .mbpos-cart-badge__icon {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

[data-mbpos] .mbpos-cart-badge__count {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* The visible text is a bare number; this carries the word for a screen reader
   that ignores aria-label, and is clipped rather than display:none so it stays
   in the accessibility tree. */
[data-mbpos] .mbpos-cart-badge__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}