/* Comment Star Ratings — frontend */

.cstars-svg { display: inline-block; vertical-align: middle; }

/* ---- Rating input (inside the comment form) ---- */
.cstars-input {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin: 0 0 16px;
	padding: 11px 16px;
	background: #fafbfc;
	border: 1px solid #e6e8eb;
	border-radius: 12px;
}
.cstars-input__label { font-weight: 600; color: #1a1a2e; font-size: 15px; }
.cstars-req { color: #e94560; }

.cstars-stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.cstars-radio {
	position: absolute;
	width: 1px; height: 1px;
	opacity: 0;
	margin: 0;
}
.cstars-star {
	color: #d4d8dd;
	cursor: pointer;
	line-height: 0;
	margin: 0;
	padding: 2px;
	transition: color .12s ease, transform .12s ease;
}
.cstars-star .cstars-svg { width: 30px; height: 30px; }

/* checked star + all stars to its left get filled */
.cstars-stars .cstars-radio:checked ~ .cstars-star { color: #f5a623; }
/* hover preview wins over the current selection */
.cstars-stars:hover .cstars-radio:checked ~ .cstars-star { color: #d4d8dd; }
.cstars-stars .cstars-star:hover,
.cstars-stars .cstars-star:hover ~ .cstars-star { color: #f5a623; }
.cstars-stars .cstars-star:hover { transform: scale(1.12); }

.cstars-radio:focus-visible + .cstars-star {
	outline: 2px solid #2271b1;
	outline-offset: 1px;
	border-radius: 4px;
}

.cstars-input.cstars-error { border-color: #e94560; background: #fff5f7; }
.cstars-error-msg { flex-basis: 100%; color: #b32d2e; font-size: 13px; margin-top: 4px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

/* ---- Average display (top of comments) ---- */
.cstars-average {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0 0 20px;
	padding: 13px 18px;
	background: linear-gradient(180deg, #fffdf7 0%, #fafbfc 100%);
	border: 1px solid #eadfbf;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.cstars-average__stars {
	position: relative;
	display: inline-block;
	line-height: 0;
	white-space: nowrap;
	flex: 0 0 auto;
}
.cstars-average__bg { color: #d9dde2; }
.cstars-average__fill {
	position: absolute;
	top: 0; left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: #f5a623;
}
.cstars-average__stars .cstars-svg { width: 26px; height: 26px; }
.cstars-average__text { font-size: 15px; color: #1a1a2e; }
.cstars-average__text strong { font-size: 22px; font-weight: 700; margin-right: 2px; }
.cstars-average__count { color: #6b7280; font-size: 14px; }

/* ---- Per-comment rating (above each comment body) ---- */
.cstars-comment-rating {
	display: inline-flex;
	gap: 1px;
	margin: 0 0 7px;
	line-height: 0;
	vertical-align: middle;
}
.cstars-comment-rating .cstars-cstar { color: #d4d8dd; }
.cstars-comment-rating .cstars-cstar.is-filled { color: #f5a623; }
.cstars-comment-rating .cstars-svg { width: 16px; height: 16px; }

/* ---- Inline comment edit ---- */
.cstars-edit-wrap { margin: 0; }
/* "Edit" trigger sits inline next to the "Reply" link and inherits its look. */
.cstars-edit-link {
	display: inline;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}
.cstars-edit-link:hover { text-decoration: underline; }
.cstars-reply-sep {
	display: inline-block;
	margin: 0 8px;
	opacity: .45;
}

.cstars-edit-form {
	margin-top: 8px;
	padding: 12px 14px;
	background: #fafbfc;
	border: 1px solid #e6e8eb;
	border-radius: 12px;
}
.cstars-edit-form .cstars-input {
	margin: 0 0 10px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}
.cstars-edit-text {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 90px;
	padding: 9px 12px;
	border: 1px solid #d4d8dd;
	border-radius: 10px;
	font: inherit;
	resize: vertical;
}
.cstars-edit-text:focus { outline: 2px solid #2271b1; outline-offset: 1px; border-color: #2271b1; }
.cstars-edit-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}
.cstars-edit-cancel {
	background: none;
	border: 0;
	padding: 6px 4px;
	font: inherit;
	font-size: 13px;
	color: #6b7280;
	cursor: pointer;
}
.cstars-edit-cancel:hover { color: #1a1a2e; text-decoration: underline; }
.cstars-edit-msg { font-size: 13px; font-weight: 600; color: #00794c; }
.cstars-edit-msg.err { color: #b32d2e; }

@media (max-width: 480px) {
	.cstars-average__stars .cstars-svg { width: 22px; height: 22px; }
	.cstars-star .cstars-svg { width: 26px; height: 26px; }
}