.rvp-video-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 56.25%; /* 9/16 = 0.5625 for 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    background: #000; /* Black background for letterboxing */
}

.rvp-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* Changed to cover to ensure poster fills container */
    object-position: center; /* Ensure poster is centered */
    transform: translate(-50%, -50%); /* Center vertically and horizontally */
    display: block;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.rvp-video[poster] {
    background-size: cover; /* Ensure poster image covers the video element */
    background-position: center; /* Center the poster image */
}

/* Specific styles for Safari full-screen mode */
:-webkit-full-screen .rvp-video,
:-webkit-full-screen .rvp-video[poster] {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    object-fit: cover; /* Ensure poster fills full-screen */
    transform: none; /* Remove transform in full-screen */
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
}

/* Non-Safari full-screen mode */
:fullscreen .rvp-video,
:fullscreen .rvp-video[poster] {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    object-fit: cover; /* Ensure poster fills full-screen */
    transform: none; /* Remove transform in full-screen */
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
}

.rvp-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
    opacity: 0; /* Hidden by default */
}

.rvp-video-container:hover .rvp-overlay,
.rvp-overlay:not(.playing) {
    opacity: 0.8; /* Show on hover or when paused */
}

.rvp-overlay.playing {
    opacity: 0; /* Always hidden when playing */
}

.rvp-play-icon {
    width: 48px;
    height: 48px;
    fill: #fff;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}

.rvp-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
    pointer-events: none; /* Prevent interaction with spinner */
}

.rvp-loading.buffering {
    opacity: 0.8; /* Show when buffering */
}

.rvp-loading .fa-spinner {
    color: #fff;
    font-size: 48px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5));
}

.rvp-custom-controls {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    flex-direction: row; /* Single row layout */
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px;
    border-radius: 4px;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
}

.rvp-video-container:hover .rvp-custom-controls,
.rvp-custom-controls:not(.playing) {
    opacity: 1; /* Show on hover or when paused */
}

.rvp-play-pause,
.rvp-forward,
.rvp-backward,
.rvp-fullscreen {
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    padding: 5px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rvp-play-pause svg,
.rvp-forward svg,
.rvp-backward svg,
.rvp-fullscreen svg {
    width: 16px;
    height: 16px;
    fill: #fff;
}

.rvp-play-pause:hover svg,
.rvp-forward:hover svg,
.rvp-backward:hover svg,
.rvp-fullscreen:hover svg {
    fill: #ccc;
}

.rvp-progress-bar {
    flex-grow: 1; /* Take available space */
    height: 8px;
    background: #333;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
    position: relative; /* Ensure proper positioning */
    transform: none; /* Remove any transform that might offset alignment */
    left: 0; /* Explicitly start from the left */
}

.rvp-progress-filled {
    width: 0;
    height: 100%;
    background: #0073aa;
    transition: width 0.1s linear;
    position: absolute;
    left: 0; /* Ensure progress starts from the left */
    top: 0;
}

.rvp-time-display {
    color: #fff;
    font-size: 14px;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5));
    flex-shrink: 0;
    white-space: nowrap;
}

@media screen and (max-width: 600px) {
    .rvp-video-container {
        max-width: 100%;
        padding-bottom: 56.25%;
    }
    .rvp-video,
    .rvp-video[poster] {
        object-fit: cover; /* Ensure poster fills container on mobile */
        background-size: cover;
        background-position: center;
    }
    .rvp-play-icon {
        width: 36px;
        height: 36px;
    }
    .rvp-loading .fa-spinner {
        font-size: 36px;
    }
    .rvp-progress-bar {
        height: 6px;
        transform: none; /* Ensure no transform on mobile */
        left: 0; /* Explicitly start from the left */
    }
    .rvp-progress-filled {
        left: 0; /* Ensure progress starts from the left on mobile */
    }
    .rvp-time-display {
        font-size: 12px;
    }
    .rvp-play-pause,
    .rvp-forward,
    .rvp-backward,
    .rvp-fullscreen {
        font-size: 14px;
        padding: 3px;
    }
    .rvp-play-pause svg,
    .rvp-forward svg,
    .rvp-backward svg,
    .rvp-fullscreen svg {
        width: 14px;
        height: 14px;
    }
    .rvp-custom-controls {
        gap: 5px; /* Tighter spacing on mobile */
    }
}