:root {}
.wlvp-wrapper {
  --plyr-color-main: var(--wlvp-primary, #10b981);
  --plyr-video-controls-background: transparent;
  --plyr-control-icon-size: 18px;
}
/* Frame shape presets */
.wlvp-wrapper[data-theme="square"] .plyr {
  border-radius: 0 !important;
}

.wlvp-wrapper[data-theme="rounded"] .plyr {
  border-radius: 16px !important;
}




.wlvp-title {
  font-weight: 600;
  margin: 8px 0;
}
/* Progress color tweak */
.plyr__progress input[type=range]::-webkit-slider-thumb {
  background: var(--wlvp-progress,#10b981);
}

/* Controls Color override */
.wlvp-wrapper .plyr__controls .plyr__control,
.wlvp-wrapper .plyr__menu .plyr__control,
.wlvp-wrapper .plyr__controls button {
  color: var(--wlvp-controls, #ffffff) !important;
}
.wlvp-wrapper .plyr__controls .plyr__control svg,
.wlvp-wrapper .plyr__menu .plyr__control svg {
  fill: currentColor !important;
}

/* Play-only preset: hide bottom controls bar entirely */
.wlvp-wrapper[data-controls-preset="playonly"] .plyr__controls { display:none !important; }

/* Tap-to-toggle overlay for play-only preset (mobile & desktop) */
.wlvp-wrapper[data-controls-preset="playonly"] { position: relative; }
.wlvp-wrapper .wlvp-tap-toggle {
  position: absolute;
  inset: 0;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  z-index: 6; /* above video, below Plyr's big play icon (z ~ 7) */
  cursor: pointer;
}


/* === WLVP dynamic color bindings (appended) === */
.wlvp-wrapper .plyr {
  /* Primary accent used by Plyr */
  --plyr-color-main: var(--wlvp-primary, #10b981);
  /* Progress fill color override if provided */
  --plyr-range-fill-background: var(--wlvp-progress, var(--plyr-color-main));
}

/* Controls foreground (icons/text) */
.wlvp-wrapper .plyr__controls,
.wlvp-wrapper .plyr__menu .plyr__control,
.wlvp-wrapper .plyr__time,
.wlvp-wrapper .plyr__tooltip {
  color: var(--wlvp-controls, #ffffff);
}
.wlvp-wrapper .plyr__controls .plyr__control svg,
.wlvp-wrapper .plyr__menu .plyr__control svg {
  fill: currentColor !important;
}

/* Provide a visible progress fill color across browsers */
.wlvp-wrapper .plyr__progress input[type=range]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--wlvp-progress, var(--plyr-color-main)) var(--value, 0%), rgba(255,255,255,0.2) var(--value, 0%));
}
.wlvp-wrapper .plyr__progress input[type=range]::-moz-range-progress {
  background-color: var(--wlvp-progress, var(--plyr-color-main));
}
.wlvp-wrapper .plyr__progress input[type=range]::-ms-fill-lower {
  background-color: var(--wlvp-progress, var(--plyr-color-main));
}