/**
 * Abreise-Bestätigung + Gästebewertungen — lädt (wie jedes andere
 * Shortcode-CSS in diesem Plugin) unconditional auf jeder Frontend-Seite.
 * Deshalb ist JEDER Selektor bewusst unter .fwb-abreise-seite,
 * .fwb-bewertung-formular oder .fwb-bewertungen-liste verschachtelt — nie
 * eine geteilte Basis-Klasse wie .fwb-card/.fwb-formular global neu
 * definieren (siehe die deswegen bereits behobene CSS-Leck-Problematik in
 * fwb-gastportal.css).
 */

/* Sterne-Eingabe (Abgabe-Formular) — reines CSS, keine JS nötig: Radios
 * liegen in absteigender Werte-Reihenfolge im DOM, per row-reverse optisch
 * wieder aufsteigend dargestellt; :checked ~ label und :hover ~ label
 * markieren dank der Reihenfolge alle Sterne bis zum gewählten/gehoverten. */
.fwb-bewertung-formular .fwb-sterne-eingabe {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 4px;
}

.fwb-bewertung-formular .fwb-sterne-eingabe input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.fwb-bewertung-formular .fwb-sterne-eingabe label {
	font-size: 32px;
	line-height: 1;
	color: var( --fwb-border );
	cursor: pointer;
	transition: color 0.1s ease;
}

.fwb-bewertung-formular .fwb-sterne-eingabe label:hover,
.fwb-bewertung-formular .fwb-sterne-eingabe label:hover ~ label,
.fwb-bewertung-formular .fwb-sterne-eingabe input:checked ~ label {
	color: var( --fwb-primary );
}

/* Sterne-Anzeige (öffentliche Liste, nur lesend) */
.fwb-bewertungen-liste {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
	gap: 16px;
}

.fwb-bewertungen-liste .fwb-review-card {
	background: var( --fwb-surface );
	padding: 20px 24px;
	border-radius: var( --fwb-radius );
	box-shadow: var( --fwb-shadow );
	border-top: 4px solid var( --fwb-primary );
}

.fwb-bewertungen-liste .fwb-sterne-anzeige {
	font-size: 18px;
	letter-spacing: 2px;
}

.fwb-bewertungen-liste .fwb-stern {
	color: var( --fwb-border );
}

.fwb-bewertungen-liste .fwb-stern.ist-voll {
	color: var( --fwb-primary );
}

.fwb-bewertungen-liste .fwb-review-text {
	margin: 10px 0;
	color: var( --fwb-text );
}

.fwb-bewertungen-liste .fwb-review-name {
	margin: 0;
	font-weight: 600;
	color: var( --fwb-text-muted );
}