.modal-content-video video {
    width: 100%;
    height: auto;
    max-height: 80vh;
    display: block;
    object-fit: contain;
    border-radius: 10px;
}

.modal-content-video.vertical-video {
    max-width: 400px;
    width: 80vw;
    aspect-ratio: 9 / 16;
}

    .modal-content-video.vertical-video video {
        max-height: 75vh;
    }

/* Removes default browser borders and perfectly centers the dialog */
.custom-native-modal {
    padding: 0;
    border: none;
    border-radius: 15px;
    background: transparent;
    overflow: visible;
    /* THE CENTERING FIX: Restores the centering that * { margin: 0; } removed */
    margin: auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: fit-content;
    height: fit-content;
}

    /* This replaces your .modal-overlay! */
    .custom-native-modal::backdrop {
        background-color: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(10px); /* Blurs the entire website */
    }

.modal-content-video video {
    width: 100%;
    height: auto;
    max-height: 80vh;
    display: block;
    object-fit: contain;
    border-radius: 10px;
}

.modal-content-video.vertical-video {
    max-width: 400px;
    width: 80vw;
    aspect-ratio: 9 / 16;
}

    .modal-content-video.vertical-video video {
        max-height: 75vh;
    }

.modal-content-video.vertical-video {
    max-height: 90vh; /* The height will be at most 90% of the screen's height */
    width: auto; /* The width will adjust automatically */
    aspect-ratio: 9 / 16; /* Maintains the correct vertical video aspect ratio */
}