/* Ervaringen of governments: stars, the average rating, the reviews on the fiche and in the community,
   the form to share one and the moderation queue in beheer. ---- */

/* Stars: a deeper gold than --civios-gold, so that they stand out on white (3.8:1). */
.civios-sterren { display: inline-flex; gap: .125rem; color: #A67C00; font-size: .9375rem; line-height: 1; }

/* Average: stars, the value and the number of reviews. */
.civios-beoordeling { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .375rem; font-size: .875rem; color: var(--civios-tekst); }
.civios-beoordeling strong { font-family: var(--civios-font-display); color: var(--civios-teal); }
.civios-beoordeling-aantal { color: var(--civios-muted); }

.civios-productkaart-beoordeling { margin-top: .5rem; }
.civios-productkop-beoordeling,
.civios-vergelijktabel-beoordeling { border-radius: var(--civios-r-md); text-decoration: none; }
.civios-productkop-beoordeling:hover .civios-beoordeling-aantal,
.civios-vergelijktabel-beoordeling:hover .civios-beoordeling-aantal { text-decoration: underline; }

/* The section on the fiche and the queue in beheer: heading with the average or a count. */
.civios-ervaringen-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }

/* A list of reviews. */
.civios-ervaringen { margin-top: 1rem; display: grid; gap: .75rem; }
.civios-community-hoofd .civios-ervaringen { margin-top: 0; gap: 1rem; }
.civios-community-hoofd .civios-ervaringen > li { padding: 1.25rem; }

.civios-ervaring { display: grid; gap: .5rem; min-width: 0; }
.civios-fichesectie .civios-ervaringen > li,
.civios-ervaring-eigen {
  padding: 1rem;
  border: 1px solid var(--civios-line);
  border-radius: var(--civios-r-lg);
  background: var(--civios-paper);
}
.civios-ervaring-kop { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; }
.civios-ervaring-kop > div:first-child { flex: 1 1 14rem; min-width: 0; }
.civios-ervaring-kop .civios-h4 { overflow-wrap: anywhere; }
.civios-ervaring-kop .civios-h4 a { color: var(--civios-teal); text-decoration: none; }
.civios-ervaring-kop .civios-h4 a:hover { text-decoration: underline; }
.civios-ervaring-kop .civios-noot { margin-top: .25rem; font-size: .8125rem; }
.civios-ervaring-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.civios-ervaring .civios-fichetekst { margin-top: 0; overflow-wrap: anywhere; }
.civios-ervaring-duur { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--civios-muted); }

/* The bestuur's own review while it waits or after it was turned down. */
.civios-ervaring-eigen { margin-top: 1rem; display: grid; gap: .75rem; justify-items: start; background: var(--civios-gold-soft); border-color: var(--civios-gold); }
.civios-ervaring-eigen .civios-ervaring { justify-self: stretch; }
.civios-ervaring-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .875rem; color: var(--civios-tekst); }

/* "Deel jouw ervaring". */
.civios-ervaringform { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--civios-line); }
.civios-ervaringform .civios-h4 { display: flex; align-items: center; gap: .5rem; }
.civios-ervaringform > .civios-noot { margin-top: .25rem; }

/* Star rating input: five radio buttons, each a star. A star lights up when it or a later one is chosen,
   or while the pointer is on it or a later one. Unlit stars keep 3.5:1 against white. */
.civios-sterkeuze { display: flex; gap: .25rem; }
.civios-sterkeuze-ster {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--civios-r-md);
  color: #808A84;
  font-size: 1.5rem;
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}
.civios-sterkeuze-ster input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.civios-sterkeuze-ster:has(input:checked),
.civios-sterkeuze-ster:has(~ .civios-sterkeuze-ster input:checked) { color: #A67C00; }
.civios-sterkeuze:hover .civios-sterkeuze-ster { color: #808A84; }
.civios-sterkeuze:hover .civios-sterkeuze-ster:hover,
.civios-sterkeuze:hover .civios-sterkeuze-ster:has(~ .civios-sterkeuze-ster:hover) { color: #A67C00; }
.civios-sterkeuze-ster:hover { transform: scale(1.08); }
.civios-sterkeuze-ster:has(input:focus-visible) { outline: 3px solid var(--civios-gold); outline-offset: 2px; }

/* Moderation queue in beheer. */
.civios-moderatie { display: grid; gap: .75rem; }
.civios-moderatie .civios-knoppen { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .civios-sterkeuze-ster { transition: none; }
  .civios-sterkeuze-ster:hover { transform: none; }
}