/**
 * Cart Badge — structural positioning only.
 *
 * Visual overrides (colours, fonts, sizes) should be set in
 * Avada > Custom CSS using:
 *   #header-cart-icon .desire-cart-badge { ... }
 */

/* Ensure the icon wrapper is a positioning context and allows overflow */
#header-cart-icon {
	position: relative !important;
	overflow: visible !important;
}

/* Badge pill */
.desire-cart-badge {
	position: absolute;
	top: -6px;
	right: 0;
	transform: translateX(75%);
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	font-family: var(--body_typography-font-family, inherit);
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	pointer-events: none;
	box-sizing: border-box;
	z-index: 1;

	/* Sensible defaults — designer overrides via #header-cart-icon .desire-cart-badge */
	background-color: var(--primary_color, #e2401c);
	color: #fff;
}

/* Hidden when cart is empty (no "0" shown) */
.desire-cart-badge-hidden {
	display: none;
}

/* Pop animation */
@keyframes desire-badge-pop {
	0%   { transform: translateX(75%) scale(1); }
	50%  { transform: translateX(75%) scale(1.3); }
	100% { transform: translateX(75%) scale(1); }
}

.desire-cart-badge-pop {
	animation: desire-badge-pop 300ms ease-in-out;
}