/* Article Star Ratings — frontend widget styles */

.djr-rating {
	margin: 1.5em 0;
	font-family: inherit;
	line-height: 1.4;
}

.djr-rating__stars {
	display: inline-flex;
	gap: 4px;
}

.djr-rating__star-wrap {
	display: inline-flex;
	line-height: 0;
	outline: none;
}

.djr-rating[data-can-vote="1"] .djr-rating__star-wrap {
	cursor: pointer;
}

.djr-rating__star-wrap:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
	border-radius: 2px;
}

.djr-star {
	width: 24px;
	height: 24px;
}

.djr-star path {
	transition: fill 120ms ease, stroke 120ms ease, fill-opacity 120ms ease;
}

.djr-star--full path {
	fill: #f5a623;
	stroke: #f5a623;
}

.djr-star--half path {
	fill: #f5a623;
	fill-opacity: 0.5;
	stroke: #f5a623;
}

.djr-star--empty path {
	fill: none;
	stroke: #c9c9c9;
	stroke-width: 1.5;
}

.djr-rating[data-can-vote="1"] .djr-rating__star-wrap:hover .djr-star--empty path,
.djr-rating[data-can-vote="1"] .djr-rating__star-wrap:focus-visible .djr-star--empty path {
	stroke: #f5a623;
}

.djr-rating__summary {
	margin: 0.5em 0 0;
	font-size: 0.9em;
	color: #555;
}

.djr-rating__notice {
	margin: 0.25em 0 0;
	font-size: 0.85em;
	color: #777;
	font-style: italic;
}

.djr-rating__feedback {
	margin: 0.25em 0 0;
	font-size: 0.85em;
	color: #2a6b2a;
}

.djr-rating__feedback:empty {
	display: none;
}

/* Read-only average display ([devjam_rating_average]) */
.djr-rating-average {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	line-height: 1.2;
}

.djr-rating-average .djr-rating__stars {
	gap: 2px;
}

.djr-rating-average__value {
	font-weight: 600;
}

.djr-rating-average__count,
.djr-rating-average__empty {
	font-size: 0.9em;
	color: #777;
}

/* Below-threshold "why" reason box */
.djr-rating-comment {
	margin: 0.75em 0 0;
	max-width: 32em;
}

.djr-rating-comment[hidden] {
	display: none;
}

.djr-rating-comment__label {
	display: block;
	font-size: 0.9em;
	margin-bottom: 0.35em;
}

.djr-rating-comment__text {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 0.95em;
	padding: 0.5em;
	border: 1px solid #c9c9c9;
	border-radius: 3px;
	resize: vertical;
}

.djr-rating-comment__send {
	margin-top: 0.5em;
	padding: 0.45em 1.1em;
	font-size: 0.9em;
	cursor: pointer;
	color: #fff;
	background: #2271b1;
	border: 0;
	border-radius: 3px;
}

.djr-rating-comment__send:hover {
	background: #135e96;
}

@media (prefers-reduced-motion: reduce) {
	.djr-star path {
		transition: none;
	}
}