.zolar-video-block {
    position: relative;
    padding: 0;
    margin: 0;
    
    /* Full bleed */
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}

.zolar-video-container {
    position: relative;
    width: 100%;
    height: 80vh; /* Adjust as needed */
    min-height: 500px;
    background-color: #000;
    cursor: none; /* Hide default cursor when hovering over video */
    overflow: hidden;
}

.zolar-video-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures video fills container without stretching */
    pointer-events: none; /* Let the container handle mouse events */
}

/* Custom Interactive Cursor */
.zolar-video-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: rgba(200, 232, 107, 0.7); /* Accent color #c8e86b with opacity */
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* VERY IMPORTANT: so it doesn't block mouse events on the container */
    z-index: 9999; /* Ensure it stays on top */
    
    /* Center the cursor on the mouse */
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    
    /* Smooth transition for hover states */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

.zolar-video-cursor.is-visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.zolar-video-cursor.is-clicking {
    transform: translate(-50%, -50%) scale(0.8);
}

.zolar-video-cursor svg {
    width: 32px;
    height: 32px;
    fill: #161616;
}

/* Fallback for mobile devices without a mouse */
@media (hover: none) and (pointer: coarse) {
    .zolar-video-container {
        cursor: pointer;
    }
    
    .zolar-video-cursor {
        display: none !important;
    }
}

/* Iframe Support (YouTube/Vimeo) */
.zolar-video-container.is-iframe {
    cursor: auto;
}
.zolar-video-iframe-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.zolar-video-iframe-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}