/**
 * Static star-rating styles.
 *
 * Selectors are scoped under #custom-ratings.static-stars -- the id/
 * class bv_fallback_render_static_stars() (includes/render.php)
 * outputs directly on the link/span element it renders in place of
 * the bv.js inline_rating widget.
 */

#custom-ratings .static-stars__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	cursor: pointer;
}

#custom-ratings .static-stars__link:hover {
	text-decoration: none;
}

/*
 * A plain :focus rule comes first so a browser without :focus-visible
 * support still shows a visible indicator on tab -- :hover above
 * already strips text-decoration unconditionally, so without this a
 * keyboard user would otherwise get no focus cue at all. :focus-visible
 * below refines this for keyboard-vs-mouse focus in browsers that
 * support it, rather than replacing it.
 */
#custom-ratings .static-stars__link:focus {
	text-decoration: none;
}
#custom-ratings .static-stars__link:focus:not(:focus-visible) {
	outline: none; /* let :focus-visible below own the indicator in supporting browsers */
}

#custom-ratings .static-stars__link:focus-visible {
	text-decoration: none;
	/*
	 * An explicit color rather than currentColor (#3D4543 via
	 * .static-stars__text) keeps the outline reliably visible
	 * regardless of what background color surrounds it.
	 */
	outline: 2px solid #005fcc;
	outline-offset: 2px;
}

#custom-ratings .static-stars__link--static {
	cursor: default;
}

#custom-ratings .static-stars__icons {
	display: inline-flex;
	align-items: center;
	gap: 1px;
}

#custom-ratings .static-stars__icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	line-height: 0;
}
#custom-ratings .static-stars__icon-stop-fill {
	stop-color: #ffb60f;
	stop-opacity: 1;
}

#custom-ratings .static-stars__icon-stop-empty {
	stop-color: #8f9d9d;
	stop-opacity: 1;
}
#custom-ratings .static-stars__text {
	/*
	 * !important flags intentionally omitted: this rule is already
	 * scoped under the #custom-ratings id selector, which should
	 * out-specificity theme/BV styles without needing !important.
	 * Verify visually against the live Understrap theme after
	 * deploy -- introduce !important only on whichever specific
	 * property(ies) turn out to still be overridden, rather than
	 * blanket-applying it to all of them.
	 */
	padding: .15em 0 0 0;
	color: #3D4543;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	line-height: 19.5px;
	white-space: nowrap;
}
/*
 * NOTE: the container also needs a `bvdiv` class if your theme CSS
 * hooks off of it outside this module -- add class="static-stars
 * bvdiv" at the call site's wrapping markup if so. Not added by
 * bv_fallback_render_static_stars() itself since the id/class
 * (#custom-ratings) is already targeted directly.
 */
#custom-ratings.static-stars {
	display: flex;
}