/* =========================================================
   ExtraVote rating — visual rescue only.
   The plugin (extravote.php / extravote.js / ajax.php) and its markup
   are untouched. We render our own 5-icon star row (built by
   initRatingStars() in article-blog.js) as an absolutely positioned
   overlay with pointer-events:none, so it never interferes with the
   plugin's own invisible clickable anchors underneath. Voting/AJAX
   keeps working exactly as before.

   IMPORTANT: we do NOT touch the z-index of .extravote-star a here.
   The plugin's own extravote.css already gives each anchor its own
   z-index (12 down to 3, smaller width = higher z-index) so the
   half-star-precision click zones layer correctly. Overriding that
   with one flat z-index breaks click accuracy — every hover would
   register on the widest (5-star) zone instead of the one actually
   under the cursor.
   ========================================================= */

.blog-article__rating .extravote,
.blog-article__rating .extravote-small {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'Roboto', sans-serif;
	margin: 0 !important;
}

.blog-article__rating .extravote-stars {
	background: none !important;
	background-image: none !important;
	position: relative;
	width: 140px !important; /* a little extra room so 5 icons never edge-clip */
	height: 24px !important;
	overflow: visible !important;
}

/* Hide the plugin's own fill indicator visually — we read its width via
   JS (to know the saved average) but render our own icon row instead. */
.blog-article__rating .extravote-stars .current-rating {
	background: none !important;
	background-image: none !important;
	opacity: 0;
	pointer-events: none;
}

/* Strip the outdated sprite from the click-target anchors. z-index is
   intentionally left alone — see note above. */
.blog-article__rating .extravote-star a,
.blog-article__rating .extravote-star a:hover,
.blog-article__rating .extravote-star a:focus,
.blog-article__rating .extravote-star a:active {
	background: none !important;
	background-image: none !important;
}

/* Our own visual star row, built by initRatingStars() in article-blog.js.
   pointer-events:none so hover/click always reach the real anchors below,
   regardless of paint order. */
.blog-article__rating .extravote-rating-display {
	position: absolute;
	left: 0;
	top: 0;
	height: 24px;
	display: flex;
	align-items: center;
	gap: 2px;
	pointer-events: none;
	z-index: 1;
}

.blog-article__rating .extravote-rating-display i {
	font-size: 20px;
	line-height: 1;
	color: #f5a623; /* saved/current rating — gold, standard rating convention */
	border: none;
	padding: 0;
}

.blog-article__rating .extravote-rating-display i.bi-star {
	color: #dcdfe6; /* empty */
}

/* Hover/preview state: distinct colour so it reads clearly as "about to
   select" rather than the confirmed rating. */
.blog-article__rating .extravote-rating-display.is-hover i:not(.bi-star) {
	color: #0A2753;
}

.blog-article__rating .extravote-info {
	font-size: 14px !important;
	color: #666;
}

.blog-article__rating .extravote-small .extravote-stars {
	height: 20px !important;
}

.blog-article__rating .extravote-small .extravote-rating-display {
	height: 20px !important;
}

.blog-article__rating .extravote-small .extravote-rating-display i {
	font-size: 16px;
}