.video-module .wp-block-video {
  position: relative;
  display: inline-block;
}

/* Controls container overlaying the video */
.video-module .wp-video-controls {
  position: absolute;
  height: 80px;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 8px var(--wp--preset--spacing--medium);
  background: hsl(from var(--wp--preset--color--base) h s l / 0.7);
  color: var(--wp--preset--color--foreground);
}

/* Generic button style */
.video-module .wp-video-controls button {
  display: flex;
  background: none;
  border: none;
  color: var(--wp--preset--color--primary);
  cursor: pointer;
  font-size: 16px;
  padding: 6px 10px;
  align-content: center;
}

.video-module .wp-video-controls svg {
  fill: var(--wp--preset--color--primary);
}
/* AUDIO CONTROL WRAPPER */
.video-module .audio-control {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-right: 1rem;
}

/* Volume slider (hidden by default) */
.video-module .audio-control input[type="range"] {
  position: absolute;
  left: 100%;
  opacity: 0;
  transform: translateX(-10px);
  width: 0;
  transition:
    opacity 0.25s ease,
    width 0.25s ease,
    transform 0.25s ease;
}

/* Close button (top-right or bottom-right inside controls bar) */
.video-module .vc-btn.vc-close {
  position: absolute;
  top: var(--wp--preset--spacing--medium);
  left: var(--wp--preset--spacing--medium);
  height: 2rem;
  width: 2rem;
  fill: var(--wp--preset--color--primary);
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

.vc-hidden-range {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.vc-slider {
  position: relative;
  width: 69px;
  height: 20px;
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.vc-slider-track {
  position: relative;
  width: 100%;
  height: 20px;
  background: none;
  border-radius: 2px;
  cursor: pointer;
}

.vc-slider-visible-track {
  position: absolute;
  top: 50%;
  height: 3px;
  width: 100%;
  background: hsl(from var(--wp--preset--color--primary) h s l / 0.3);
  border-radius: 69px;
  transform: translateY(-50%);
}
.vc-slider-fill {
  position: absolute;
  background: var(--wp--preset--color--primary);
  height: 3px;
  top: 50%;
  border-radius: 69px;
  width: 100%;
  transform: translateY(-50%);
  border-radius: 69px;
}

.vc-slider-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background: var(--wp--preset--color--primary);
  border-radius: 50%;
  pointer-events: none;
}