/**
 * 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; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); 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;}
}