/**
 * Custom Video Player Styles
 */
.custom-video-container { position:relative; width:100%; height:0; padding-bottom:56.25%; overflow:hidden; background-color:#000;}
.custom-video-player { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.video-control-button { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:12px 24px; background-color:rgba(0, 0, 0, 0.7); color:#fff; border:none; border-radius:4px; font-size: 16px; cursor: pointer; transition:opacity 0.3s ease; z-index: 10;}
.video-control-button:hover { background-color: rgba(0, 0, 0, 0.9); }
.video-controls { position:absolute; bottom:0; left:0; width:100%; padding:15px; display:flex; align-items:center; justify-content:space-between; opacity:0; transition:opacity 0.3s ease; z-index:5; }
.video-controls.active { opacity:1; }
.control-item { opacity:0; transform:translateY(10px); transition:opacity 0.3s ease, transform 0.3s ease; }
.control-item.active { opacity:1; transform:translateY(0); }
.play-pause-button,
.mute-button,
.fullscreen-button { background:transparent; color:#fff !important; border:none; cursor:pointer; padding:5px; margin:0 5px; }
.progress-container { flex-grow:1; height:5px; background-color:rgba(255, 255, 255, 0.3); border-radius:2.5px; margin:0 15px; cursor:pointer; }
.progress-fill { height:100%; background-color:#fff; border-radius:2.5px; width:0%; }
.pause-icon,
.unmute-icon { display:none; }
.is-playing .play-icon,
.is-muted .mute-icon { display:none; }
.is-playing .pause-icon,
.is-muted .unmute-icon { display:inline; color:#ffffff; }
@media (max-width: 768px) {
    .video-controls { padding:10px;}
    .video-control-button { padding:8px 16px; font-size:14px;}
}