.sm-video-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s;
    background: rgba(10, 10, 10, 0.4);
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    cursor: url('data:image/svg+xml;utf8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 12L28 28M28 12L12 28" stroke="white" stroke-width="1.5"/></svg>') 20 20, pointer;
}

.sm-video-modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.sm-video-modal-content {
    position: relative;
    width: 85%;
    max-width: 1100px;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    transform: scale(0.96) translateY(20px);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
    cursor: auto; /* Restores normal cursor for interacting with the video controls */
}

/* Vertical video support */
.sm-video-modal-content.is-vertical {
    aspect-ratio: 9 / 16;
    width: auto;
    height: 85vh;
    max-width: 85vw;
}

.sm-video-modal-overlay.is-active .sm-video-modal-content {
    transform: scale(1) translateY(0);
}

.sm-video-modal-content iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #000;
    display: block;
}

@media (max-width: 768px) {
    .sm-video-modal-content.is-vertical {
      width:auto;
        height: auto;
        max-height: 85vh; /* but don't overflow screen */
    }
}
.sm-video-modal-content video {
    width: 100%;
    height: 100%;
    border: none;
    background: #000;
    display: block;
    object-fit: cover; /* cover removes black bars */
    border-radius: 16px;
}
.sm-video-modal-content video,
.sm-video-modal-content iframe,
.sm-video-modal-content:hover video,
.sm-video-modal-content:hover iframe,
.sm-video-modal-overlay video:hover,
.sm-video-modal-overlay iframe:hover {
    opacity: 1 !important;
    filter: brightness(1) !important;
    background: #000 !important;
    mix-blend-mode: normal !important;
}


/* Strip Chrome/Safari native video dimming gradients */
.sm-video-modal-content video::-webkit-media-controls-panel,
.sm-video-modal-content video::-webkit-media-controls-enclosure,
.sm-video-modal-content video::-webkit-media-controls-overlay-enclosure {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Optional: Make the controls themselves a bit more elegant and modern */
.sm-video-modal-content video::-webkit-media-controls-panel {
    padding-bottom: 10px;
}