/* flxtv-video-player/assets/player.css
 *
 * This stylesheet ensures that the video player created by the FlixTV plugin scales
 * responsively within its parent container. The video will always occupy the full
 * width of its container while maintaining its aspect ratio.
 */

.flxtv-player {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    /* Apply rounded corners to the player wrapper. Overflow hidden ensures
       that YouTube embeds and the Plyr UI honor the radius. 16px matches
       the FlixTV template. */
    border-radius: 16px;
    overflow: hidden;
}

/* Ensure that the Plyr container itself inherits rounded corners for both
   HTML5 and YouTube players. */
.plyr {
    border-radius: 16px !important;
    overflow: hidden;
    /* Ensure the overlay can be positioned absolutely relative to the player */
    position: relative;
}

/* Pause overlay styles for YouTube videos. When the video is paused or ended,
   this overlay appears to cover YouTube’s default pause screen and recommended
   thumbnails. It includes a play icon centered in the middle and fades
   slightly into view to indicate interactivity. */
/*
 * Pause overlay styles
 *
 * When a YouTube video is paused or ends, we want to display a minimalist play
 * button centered within the player. Instead of covering the entire video
 * with a dark layer, the overlay is a small circle containing a play icon.
 * This matches the FlixTV template design, where pausing a video shows only
 * a discrete play button without any distracting overlays or YouTube UI.
 */
.flxtv-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.8);
    background-color: rgba(39, 94, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.2s ease;
}
.flxtv-overlay.hidden {
    display: none;
}
.flxtv-overlay svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    margin-left: 4px;
}

/* Style Plyr’s built‑in large play button to mirror the FlixTV design. We
   enlarge it slightly, add a semi‑transparent blue background with a white
   border, and make the icon white. */
.plyr--video .plyr__control--overlaid {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.8);
    background-color: rgba(39, 94, 255, 0.8);
    color: #fff;
}