/*
 * Badge styling.
 *
 * The star row is two copies of the same five glyphs, one clipped to the
 * rating's percentage and laid over the other. That renders a genuine partial
 * star for 4.3 or 4.8 with no images, no icon font, and no extra request —
 * which matters on a site running with no page cache.
 */

:root {
	--xyz-rating-accent: #f5a623;
	--xyz-rating-muted: #d9d9d9;
}

.xyz-rating-stars {
	position: relative;
	display: inline-block;
	line-height: 1;
	font-size: 1em;
	letter-spacing: 0.08em;
	white-space: nowrap;
	vertical-align: middle;
}

.xyz-rating-stars-base {
	color: var(--xyz-rating-muted);
}

.xyz-rating-stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: var(--xyz-rating-fill, 0%);
	color: var(--xyz-rating-accent);
	white-space: nowrap;
	letter-spacing: 0.08em;
}

/*
 * Overlay: pinned to the bottom-left corner of the product gallery.
 *
 * The offset parent is Flatsome's .product-images, which already ships with the
 * `relative` class — so this needs no wrapper of its own. On the stock
 * WooCommerce gallery the offset parent is .woocommerce-product-gallery, which
 * WooCommerce's own stylesheet makes relative.
 *
 * pointer-events:none matters more than it looks: the gallery underneath is a
 * Flickity slider with a lightbox, and a badge that captured clicks would break
 * opening the full-size image with no visible error.
 */

.xyz-rating-overlay {
	position: absolute;
	left: 10px;
	bottom: 10px;
	/* Above Flatsome's own corner slots: .badge-container is z-1 and the two
	   .image-tools boxes are z-3, and one of those sits in this same corner. */
	z-index: 10;

	/* Not flush to the edge, on purpose. The site's custom CSS rounds every
	   product image (img { border-radius: 11px !important }), so a badge at
	   0,0 would poke out past the curve. A 10px inset clears the arc. */
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 6px;
	background: rgba(20, 20, 20, 0.88);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	/* Two shadows: a tight dark one so the pill separates from a busy photo,
	   and a soft wide one so it still reads against a near-black image. */
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 12px rgba(0, 0, 0, 0.3);
}

.xyz-rating-overlay .xyz-rating-stars {
	font-size: 14px;
}

/* Unfilled stars are a translucent white here, not the light grey used on
   white backgrounds, so they stay legible against a dark pill. */
.xyz-rating-overlay .xyz-rating-stars-base {
	color: rgba(255, 255, 255, 0.35);
}

.xyz-rating-overlay .xyz-rating-value {
	font-weight: 700;
}

.xyz-rating-overlay .xyz-rating-count {
	font-size: 12px;
	opacity: 0.8;
}

/* Phones: the gallery is much smaller, so the pill shrinks with it rather than
   covering a third of the image. */
@media (max-width: 549px) {
	.xyz-rating-overlay {
		left: 7px;
		bottom: 7px;
		gap: 4px;
		padding: 4px 7px;
		font-size: 12px;
	}

	.xyz-rating-overlay .xyz-rating-stars {
		font-size: 12px;
	}

	.xyz-rating-overlay .xyz-rating-count {
		font-size: 11px;
	}
}

/* Full badge: single product page, or [xyz_rating_badge] */

.xyz-rating-badge {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	margin: 10px 0;
}

.xyz-rating-badge__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.7;
}

.xyz-rating-badge__body {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	line-height: 1;
}

.xyz-rating-value {
	font-weight: 700;
}

.xyz-rating-sep,
.xyz-rating-best {
	opacity: 0.55;
}

.xyz-rating-count {
	font-size: 0.85em;
	opacity: 0.7;
}

/* Compact badge: shop and category cards */

.xyz-rating-badge--compact {
	flex-direction: row;
	align-items: center;
	gap: 5px;
	margin: 2px 0 4px;
	font-size: 13px;
	line-height: 1;
}

.xyz-rating-badge--compact .xyz-rating-stars {
	font-size: 13px;
}