/* ============================================================
   VIDEOSPELER.CSS  –  eigen videospeler (zie js/videospeler.js)
   ============================================================ */

.videospeler {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--donkerblauw);
}
.videospeler video {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
}

/* grote play-knop in het midden (verdwijnt tijdens afspelen) */
.vs-grote-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 88px; height: 88px;
  border: none;
  border-radius: 50%;
  background: var(--blauw);
  color: var(--creme);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s, transform .2s;
}
.vs-grote-play:hover {
  background: var(--lichtblauw);
  transform: translate(-50%, -50%) scale(1.08);
}
.vs-grote-play svg { width: 44px; height: 44px; }
.videospeler.is-spelend .vs-grote-play { display: none; }

/* bedieningsbalk onderaan */
.vs-balk {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 45, .85));
  opacity: 0;
  transition: opacity .25s;
}
.videospeler:hover .vs-balk,
.videospeler:focus-within .vs-balk,
.videospeler:not(.is-spelend) .vs-balk { opacity: 1; }

.vs-knop {
  border: none;
  background: none;
  color: var(--creme);
  cursor: pointer;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.vs-knop:hover { color: var(--lichtblauw); }
.vs-knop svg { width: 24px; height: 24px; }

/* per toestand het juiste icoontje tonen */
.vs-icoon-pauze, .vs-icoon-uit { display: none; }
.videospeler.is-spelend .vs-icoon-play { display: none; }
.videospeler.is-spelend .vs-icoon-pauze { display: block; }
.videospeler.is-gedempt .vs-icoon-aan { display: none; }
.videospeler.is-gedempt .vs-icoon-uit { display: block; }

.vs-tijd {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--creme);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* voortgangsbalk (range-slider) */
.vs-voortgang {
  flex: 1 1 auto;
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  border-radius: 3px;
  background: rgba(238, 225, 205, .35);
  cursor: pointer;
}
.vs-voortgang::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--lichtblauw);
  border: none;
}
.vs-voortgang::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--lichtblauw);
  border: none;
}
.vs-voortgang::-moz-range-progress {
  background: var(--lichtblauw);
  height: 5px;
  border-radius: 3px;
}

/* fullscreen: de hele video tonen (niets bijsnijden), met zwarte
   balken waar nodig in plaats van wegvallende boven- en onderkant */
.videospeler:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--zwart);
}
.videospeler:fullscreen video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media screen and (max-width: 600px) {
  .vs-grote-play { width: 64px; height: 64px; }
  .vs-grote-play svg { width: 32px; height: 32px; }
  .vs-tijd { display: none; }
}