/**
 * The CSS for the plugin.
 * This should be saved as `style.css` in the same directory as this PHP file.
 */
?>
/*
 * Circular Video Player CSS
 */

/* A wrapper to ensure the container maintains a square aspect ratio */
.circular-video-player-wrapper {
    position: relative;
    width: 100%; /* Ensures it takes up full width of its container on small screens */
    margin: 0 auto; /* Center the player */
}

.circular-video-player-container {
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    padding-bottom: 100%; /* This is a responsive trick to maintain a 1:1 aspect ratio */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Optional shadow for a nicer look */
}
.circular-video-player-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This is the key to filling the circle without letterboxing */
}