/**
 * FILE 4 of 4: assets/css/rg-video-facade.css (REPLACE ENTIRE FILE)
 *
 * Ratna Gems - Upgraded YouTube Video Facade Styles
 * Based on the modern, light-themed "About Us" page implementation.
 */

.rg-video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Modern way to handle aspect ratio */
    height: auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(0, 78, 129, 0.1);
    margin: 2rem auto; /* Provide some default spacing */
}

/* Ensure the wrapper is not too wide on large screens */
.single-product .entry-content .rg-video-wrapper {
    max-width: 700px;
}


.rg-video-facade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    border-radius: 12px; /* Match parent */
    z-index: 1;
}

.rg-video-wrapper .rg-video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    z-index: 0;
}

/* Accessibility focus ring */
.rg-video-wrapper:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 6px #004E81;
}

.rg-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.rg-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    transition: transform 0.2s ease;
    pointer-events: none; /* Allows clicks to go to the parent */
}

.rg-video-wrapper:hover .rg-play-button {
    transform: translate(-50%, -50%) scale(1.1);
}

.rg-play-button-fill {
    fill: #D32F2F; /* Accent Red */
    transition: fill 0.2s ease;
}

.rg-video-wrapper:hover .rg-play-button-fill {
    fill: #E53935; /* Lighter Accent Red on hover */
}

/* Hide the play button once the video is active */
.rg-video-wrapper.video-activated .rg-play-button {
    display: none;
}

.rg-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}