/**
 * DP Webshop — Reviews
 *
 * Deze module draait op elk thema, dus de opmaak staat op eigen benen. Waar een
 * site ACSS of eigen tokens heeft, worden die overgenomen via de var()-fallbacks:
 * --dp-rv-* eerst, dan de gangbare ACSS-namen, dan een neutrale waarde.
 *
 * Maatvoering is bewust krap gehouden, in de trant van bol.com en Coolblue: de
 * samenvatting past in één oogopslag, en de ruimte zit in de scheidslijnen
 * tussen de reviews in plaats van in marges eromheen.
 */

/* De tokens staan op beide wortels: de samenvattingsregel staat los van de
   sectie, en zou de sterrenkleur anders niet kennen. */
.dp-rv,
.dp-rv-mini {
	--dp-rv-accent: var(--dp-rv-kleur, var(--primary, #8a5a30));
	--dp-rv-tekst: var(--dp-rv-tekst-kleur, var(--base, #241c16));
	--dp-rv-lijn: var(--dp-rv-lijn-kleur, rgba(0, 0, 0, .12));
	--dp-rv-spoor: var(--dp-rv-spoor-kleur, rgba(0, 0, 0, .08));
	--dp-rv-ster: var(--dp-rv-ster-kleur, #e0a94a);
}

.dp-rv {
	/* display expliciet: ACSS zet op ELKE <section> flex-column met
	   align-items:center en een container-gap. Zonder deze regel staan de
	   samenvatting, de lijst en het formulier gecentreerd in een smalle kolom
	   in plaats van over de volle breedte. Op sites zonder ACSS is het een
	   no-op, want block is toch al de standaard voor een section. */
	display: block;
	color: var(--dp-rv-tekst);
}

.dp-rv__kop {
	margin: 0 0 1.1rem;
}

/* ---------- sterren ---------- */

/* Twee lagen tekst over elkaar: de onderste is de lege reeks, de bovenste wordt
   afgekapt op een percentage. Halve sterren komen er zo vanzelf uit, zonder
   afbeeldingen of een icoonlettertype. */
.dp-rv-stars {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	line-height: 1;
	font-size: 1em;
	letter-spacing: .05em;
}

.dp-rv-stars::before,
.dp-rv-stars__vol::before {
	content: "\2605\2605\2605\2605\2605";
}

.dp-rv-stars::before {
	color: var(--dp-rv-spoor);
}

.dp-rv-stars__vol {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	overflow: hidden;
	color: var(--dp-rv-ster);
}

/* ---------- samenvatting ---------- */

.dp-rv__samenvatting {
	/* Ook hier expliciet: ACSS heeft náást de section-regel een tweede regel
	   voor `section > div`, die elke directe kind-div op flex-column met
	   align-items:flex-start zet. De samenvatting is zo'n div, en zonder deze
	   regel krimpt hij tot de breedte van zijn inhoud — waarna de balkjes van
	   de verdeling nul pixels breed zijn en dus onzichtbaar. */
	display: block;
	max-width: 26rem;
	padding-block-end: 1.35rem;
	border-block-end: 1px solid var(--dp-rv-lijn);
	margin-block-end: .5rem;
}

/* Score, sterren en aantal op één regel — dat is de regel die mensen scannen. */
.dp-rv__cijfer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .2em .55em;
	margin-block-end: .9rem;
}

.dp-rv__gemiddelde {
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.1;
}

.dp-rv__cijfer .dp-rv-stars {
	font-size: 1.15em;
	transform: translateY(.05em);
}

.dp-rv__aantal {
	font-size: .875em;
	opacity: .65;
}

.dp-rv__verdeling {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dp-rv__verdeling-rij {
	display: grid;
	grid-template-columns: 5.25em minmax(0, 1fr) 2.25em;
	align-items: center;
	gap: .55em;
	font-size: .8125em;
	line-height: 1.4;
	margin-block-end: .3em;
}

.dp-rv__verdeling-rij:last-child { margin-block-end: 0; }

.dp-rv__verdeling-label { opacity: .75; }

.dp-rv__balk {
	display: block;
	height: .45em;
	border-radius: 999px;
	background: var(--dp-rv-spoor);
	overflow: hidden;
}

.dp-rv__balk-vol {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--dp-rv-ster);
}

.dp-rv__verdeling-n {
	text-align: end;
	font-variant-numeric: tabular-nums;
	opacity: .65;
}

/* ---------- lijst ---------- */

.dp-rv__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dp-rv__item {
	padding-block: 1.15rem;
	border-block-end: 1px solid var(--dp-rv-lijn);
}

.dp-rv__item-kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25em .6em;
	margin-block-end: .35em;
}

.dp-rv__item-kop .dp-rv-stars { font-size: .95em; }

.dp-rv__item-titel {
	margin: 0;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.35;
}

.dp-rv__item-tekst > :first-child { margin-block-start: 0; }
.dp-rv__item-tekst > :last-child  { margin-block-end: 0; }
.dp-rv__item-tekst p { margin-block: 0 .5em; }

.dp-rv__item-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35em .7em;
	margin: .45em 0 0;
	font-size: .8125em;
	opacity: .7;
}

.dp-rv__auteur { font-weight: 600; opacity: 1; }

.dp-rv__badge {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	padding: .1em .5em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--dp-rv-accent) 12%, transparent);
	color: var(--dp-rv-accent);
	font-weight: 600;
	opacity: 1;
}

.dp-rv__badge::before {
	content: "\2713";
	font-weight: 700;
}

.dp-rv__leeg,
.dp-rv__gesloten {
	margin: 0;
	opacity: .7;
}

/* ---------- meldingen ---------- */

.dp-rv__melding {
	padding: .7em 1em;
	border-radius: .35em;
	border: 1px solid var(--dp-rv-lijn);
	margin: 0 0 1.1rem;
	font-size: .9375em;
}

.dp-rv__melding--ok {
	border-color: color-mix(in srgb, var(--dp-rv-accent) 40%, transparent);
	background: color-mix(in srgb, var(--dp-rv-accent) 8%, transparent);
}

.dp-rv__melding--fout {
	border-color: rgba(190, 60, 50, .5);
	background: rgba(190, 60, 50, .07);
}

/* ---------- formulier ---------- */

.dp-rv__form {
	max-width: 34rem;
	padding-block-start: 1.5rem;
}

.dp-rv__form-kop {
	margin: 0 0 1rem;
	font-size: 1.05em;
	font-weight: 600;
}

.dp-rv__veld { margin: 0 0 .9rem; }

.dp-rv__veld label,
.dp-rv__sterren-veld legend {
	display: block;
	margin-block-end: .3em;
	font-weight: 600;
	font-size: .875em;
}

.dp-rv__veld input[type="text"],
.dp-rv__veld input[type="email"],
.dp-rv__veld textarea {
	width: 100%;
	padding: .55em .7em;
	border: 1px solid var(--dp-rv-lijn);
	border-radius: .3em;
	background: #fff;
	color: inherit;
	font: inherit;
	font-size: .9375em;
}

.dp-rv__veld textarea { resize: vertical; }

.dp-rv__rij {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 .9rem;
}

.dp-rv__hint {
	display: block;
	margin-block-start: .25em;
	font-size: .8125em;
	font-weight: 400;
	opacity: .65;
}

.dp-rv__hint--blok { margin-block-start: .7em; }

.dp-rv__verplicht { color: var(--dp-rv-accent); }

.dp-rv__sterren-veld {
	border: 0;
	padding: 0;
	margin: 0 0 .9rem;
}

/* De radio's staan van 5 naar 1 in de HTML, zodat `:checked ~ label` de lagere
   sterren kan kleuren. row-reverse zet ze visueel weer van 1 naar 5. */
.dp-rv__sterren-keuze {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: .05em;
	font-size: 1.5em;
	line-height: 1;
}

.dp-rv__sterren-keuze input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.dp-rv__sterren-keuze label {
	margin: 0;
	cursor: pointer;
	color: var(--dp-rv-spoor);
	transition: color .12s ease;
}

.dp-rv__sterren-keuze label::before { content: "\2605"; }

.dp-rv__sterren-keuze label:hover,
.dp-rv__sterren-keuze label:hover ~ label,
.dp-rv__sterren-keuze input:checked ~ label {
	color: var(--dp-rv-ster);
}

.dp-rv__sterren-keuze input:focus-visible + label {
	outline: 2px solid var(--dp-rv-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.dp-rv__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .6em 1.5em;
	border: 1px solid var(--dp-rv-accent);
	border-radius: .3em;
	background: var(--dp-rv-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	font-size: .9375em;
	cursor: pointer;
}

.dp-rv__knop:hover { filter: brightness(.92); }

/* ---------- formulier achter een knop ---------- */

/* Tweede knop naast "Plaatsen": omlijnd, zodat hij uitnodigt zonder te schreeuwen. */
.dp-rv__schrijf { padding-block-start: 1.5rem; }
.dp-rv__schrijf > summary { list-style: none; }
.dp-rv__schrijf > summary::-webkit-details-marker { display: none; }
.dp-rv__schrijf-knop {
	gap: .6em;
	background: transparent;
	color: var(--dp-rv-accent);
	transition: background-color .15s ease, color .15s ease;
}
.dp-rv__schrijf-knop:hover { background: var(--dp-rv-accent); color: #fff; filter: none; }
.dp-rv__schrijf-knop:focus-visible { outline: 2px solid var(--dp-rv-accent); outline-offset: 2px; }
/* Pijltje: omlaag dicht, omhoog open. */
.dp-rv__schrijf-knop::after {
	content: "";
	width: .45em;
	height: .45em;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: translateY(-.15em) rotate(45deg);
	transition: transform .2s ease;
}
.dp-rv__schrijf[open] > .dp-rv__schrijf-knop::after { transform: translateY(.1em) rotate(-135deg); }
.dp-rv__schrijf .dp-rv__form { padding-block-start: 1.25rem; }

/* Honeypot: weg voor mensen, wel invulbaar voor een bot. */
.dp-rv__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* AIOS zet zijn antibot-velden in een <p>; die mag geen ruimte innemen. */
.dp-rv__form .comment-form-aios-antibot-keys { margin: 0; }

/* ---------- compacte regel ---------- */

.dp-rv-mini {
	margin: 0;
	font-size: .9375em;
}

.dp-rv-mini a {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	color: inherit;
	text-decoration: none;
}

.dp-rv-mini a:hover { text-decoration: underline; }

.dp-rv-mini__cijfer { font-weight: 700; }
.dp-rv-mini__aantal { opacity: .65; }

.dp-rv-mini--leeg a { opacity: .7; }

@media (max-width: 40rem) {
	.dp-rv__rij { grid-template-columns: minmax(0, 1fr); }
	.dp-rv__verdeling-rij { grid-template-columns: 4.75em minmax(0, 1fr) 2em; }
}

@media (prefers-reduced-motion: reduce) {
	.dp-rv__sterren-keuze label { transition: none; }
}