/**
 * vefm-ratings.css
 *
 * Notes visiteurs — même approche que vefm-frontend.css : variables CSS
 * --vefm-* avec repli raisonnable, jamais de couleur de marque en dur.
 */

.vefm-ratings {
	font-family: var( --vefm-font-family, inherit );
	color: inherit;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba( 0, 0, 0, 0.12 );
}

.vefm-ratings-title {
	margin: 0 0 12px;
}

.vefm-ratings-average {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.vefm-stars {
	color: var( --vefm-accent-color, #f5a623 );
	letter-spacing: 2px;
	font-size: 1.1rem;
}

.vefm-ratings-average-text {
	color: inherit;
	opacity: 0.8;
}

.vefm-ratings-empty {
	opacity: 0.75;
	font-style: italic;
}

.vefm-ratings-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.vefm-ratings-item {
	padding: 12px 16px;
	border-radius: 10px;
	background: rgba( 0, 0, 0, 0.06 );
}

.vefm-ratings-item-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.vefm-ratings-item-author {
	font-weight: 600;
}

.vefm-ratings-item-date {
	opacity: 0.6;
	font-size: 0.85rem;
}

.vefm-ratings-item-comment {
	margin: 6px 0 0;
}

/* ------------------------------------------------------------------ */
/* Formulaire de soumission                                            */
/* ------------------------------------------------------------------ */

.vefm-ratings-form {
	max-width: 480px;
}

.vefm-ratings-form p {
	margin: 0 0 12px;
}

.vefm-ratings-form input[type="text"],
.vefm-ratings-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border-radius: 6px;
	border: 1px solid rgba( 0, 0, 0, 0.2 );
	background: #fff;
	color: #222;
}

/* Piège à robots — masqué visuellement, jamais avec display:none ni
 * visibility:hidden (certains lecteurs de champs les ignorent aussi côté
 * accessibilité, mais un robot basique les repère facilement) : hors
 * écran, comme la classe .vefm-sr-only ci-dessous. */
.vefm-ratings-hp-wrap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

.vefm-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/* Étoiles cliquables : radios déclarés en ordre inverse (5 à 1) dans le
 * HTML + flex row-reverse, pour que ":checked ~ label" et ":hover ~
 * label" sélectionnent naturellement "cette étoile et toutes celles à
 * sa gauche" sans JavaScript dédié au survol. */
.vefm-ratings-stars-input {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	border: 0;
	padding: 0;
	margin: 0 0 16px;
}

.vefm-ratings-stars-input legend {
	width: 100%;
	margin-bottom: 4px;
}

.vefm-ratings-stars-input input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.vefm-ratings-stars-input label {
	cursor: pointer;
	font-size: 1.6rem;
	line-height: 1;
	padding: 0 2px;
	color: var( --vefm-ratings-star-empty, rgba( 0, 0, 0, 0.25 ) );
}

.vefm-ratings-stars-input label::before {
	content: "★";
}

.vefm-ratings-stars-input input[type="radio"]:checked ~ label,
.vefm-ratings-stars-input label:hover,
.vefm-ratings-stars-input label:hover ~ label {
	color: var( --vefm-accent-color, #f5a623 );
}

.vefm-ratings-stars-input input[type="radio"]:focus-visible + label {
	outline: 2px solid var( --vefm-accent-color, #f5a623 );
	outline-offset: 2px;
	border-radius: 4px;
}

.vefm-ratings-submit {
	padding: 10px 20px;
	border-radius: 8px;
	font-weight: 600;
}

.vefm-ratings-feedback {
	margin-top: 10px;
	font-size: 0.9rem;
}

/* ------------------------------------------------------------------ */
/* Compact rating — track row (next to the length) and album header    */
/* ------------------------------------------------------------------ */

.vefm-rate {
	display: inline-flex;
	align-items: center;
	gap: 0.1em;
	font-weight: 400;
	vertical-align: middle;
}

/* Reset: themes style every <button> (background, border, min-height). */
.vefm-rate .vefm-rate-star {
	appearance: none;
	margin: 0;
	padding: 0.15em 0.08em;
	min-width: 0;
	min-height: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	box-shadow: none;
	text-shadow: none;
	font: inherit;
	font-size: var( --wp--preset--font-size--normal, var( --vefm-font-size-normal ) );
	line-height: 1;
	color: currentColor;
	opacity: 0.35;
	cursor: pointer;
}

.vefm-rate .vefm-rate-star.is-on {
	color: var( --vefm-accent-color, #f5a623 );
	opacity: 1;
}

.vefm-rate .vefm-rate-star:hover,
.vefm-rate .vefm-rate-star:focus-visible {
	background: none;
	color: var( --vefm-accent-color, #f5a623 );
	opacity: 1;
}

.vefm-rate .vefm-rate-star:focus-visible {
	outline: 2px solid var( --vefm-accent-color, #f5a623 );
	outline-offset: 1px;
}

/* A star has been clicked: only the chosen stars are lit, not the average. */
.vefm-rate.is-choosing .vefm-rate-star {
	color: currentColor;
	opacity: 0.35;
}

.vefm-rate.is-choosing .vefm-rate-star.is-picked {
	color: var( --vefm-accent-color, #f5a623 );
	opacity: 1;
}

.vefm-rate-summary {
	margin-left: 0.3em;
	font-size: var( --wp--preset--font-size--normal, var( --vefm-font-size-normal ) );
	font-variant-numeric: tabular-nums;
	opacity: 0.65;
}

.vefm-rate-panel {
	margin: 0.5rem 0 0;
	text-align: start;
}

.vefm-rate-form {
	max-width: 420px;
}

.vefm-rate-form p {
	margin: 0 0 8px;
}

.vefm-rate-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.vefm-rate-form .vefm-rate-cancel {
	appearance: none;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.vefm-album-rating {
	margin: 0.25rem 0 0;
}

/* Past show (2.16.20): stars under the title, the form full width below the header. */
.vefm-concert-rating {
	margin: 0.1rem 0 0.15rem;
}

.vefm-concert .vefm-rate-panel {
	margin: 0.25rem 0 0;
}