/* Hero video custom controls */
.video-custom-controls{
  position:absolute;
  left:0;
  right:0;
  bottom:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0 26px;
  pointer-events:none;
}

.video-controls-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  pointer-events:auto;
}

.video-controls-row.video-volume{
  justify-content:flex-start;
}

.video-controls-hint{
  color:rgba(234,240,255,.74);
  font-weight:650;
  font-size:12px;
  text-align:center;
  pointer-events:none;
}

.vbtn{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:rgba(234,240,255,.95);
  padding:10px 12px;
  font-weight:850;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.vbtn:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(46,230,166,.35);
}
.vbtn:active{ transform:translateY(1px); }
.vbtn:focus{ outline:none; box-shadow:0 0 0 4px rgba(46,230,166,.22); }

.vslider{
  width:190px;
  accent-color: var(--accent);
}

.vlabel{
  color:rgba(234,240,255,.9);
  font-weight:900;
  min-width:58px;
  text-align:center;
}

@media (max-width: 640px){
  .video-custom-controls{ padding:0 18px; bottom:14px; }
  .vslider{ width:140px; }
}