/* UI Video Component Styles */

.ui-video {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Ensure iframe wrapper and iframe span 100% of Bootstrap ratio container */
.ui-video.ratio .ui-video-embed,
.ui-video.ratio video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.ui-video-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Background Mode Full Cover */
.ui-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ui-video-background .ui-video-embed,
.ui-video-background video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ui-video-background iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-height: 100%;
    min-width: 177.77vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Poster Overlay */
.ui-video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    transition: opacity 0.4s ease;
}

.ui-video-poster .ui-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ui-video.is-playing .ui-video-poster {
    opacity: 0;
    pointer-events: none;
}

.ui-video-controls{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 25;
}

/* Play/Pause Control Buttons */

.ui-video.has-control-btn{

}

.ui-video-play-btn {
    position: absolute;
    top: 50%!important;
    left: 50%!important;
    transform: translate(-50%, -50%);
    z-index: 25;
    width: 60px!important;
    height: 60px!important;
    display: none!important; /* Hidden by default unless .has-control-btn is present or hovered */
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease!important;
    border: 0;
    cursor: pointer;
}

.ui-video.has-control-btn .ui-video-play-btn {
    display: flex!important;
    transition: opacity 0.3s ease, transform 0.2s ease!important;
}

/* Control button hover behavior during playback */
.ui-video.control-btn-hover.is-playing .ui-video-play-btn,
.ui-video.has-control-btn.control-btn-hover.is-playing .ui-video-play-btn {
    opacity: 0;
    pointer-events: none;
}

.ui-video.has-control-btn.control-btn-hover.is-playing:hover .ui-video-play-btn {
    opacity: 1;
    pointer-events: auto;
}

.ui-video-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.ui-video.is-playing .ui-video-play-btn .icon-play {
    display: none !important;
}

.ui-video.is-playing .ui-video-play-btn .icon-pause {
    display: inline-block !important;
}

.ui-video.is-paused .ui-video-play-btn .icon-play {
    display: inline-block !important;
}

.ui-video.is-paused .ui-video-play-btn .icon-pause {
    display: none !important;
}

.ui-video-controls-wrapper {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
}