/*
/  Styles for Video Controls 
*/
.player-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    border-radius: 0;
}
.controls { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 8px 12px; 
    background: var(--white); 
    border-top: 1px solid var(--light-grey);
    padding-left: 40px;
}
.play-btn { 
    position: relative; 
    flex-shrink: 0; 
    width: 32px; 
    height: 32px; 
    border-radius: 50%; 
    border: 1px solid var(--grey-button-color);
    color: var(--font-color);
    background: transparent; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
}
.play-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
}
.time { font-size: 12px; color: var(--dark-grey); flex-shrink: 0; min-width: 80px; font-variant-numeric: tabular-nums; }
.progress-wrap { flex: 1; height: 20px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.progress-track { width: 100%; height: 4px; border-radius: 2px; background: var(--light-grey); position: relative; overflow: hidden; }
.progress-fill { height: 100%; background: var(--teal); border-radius: 2px; width: 0%; opacity: 0.7; }