/* okitoki-v4 — media dialog: hero video, "how it works" clips, v3 tool info cards. */

.v-media-dialog {
    width: min(960px, calc(100vw - 2 * var(--v-space)));
    max-height: calc(100dvh - 2 * var(--v-space));
    padding: 0;
    border: 0;
    border-radius: var(--v-radius-lg);
    background: rgb(var(--v-color-white));
    box-shadow: 0 20px 60px rgba(var(--v-color-black), .35);
    color: rgb(var(--v-color-text));
}
.v-media-dialog::backdrop { background: rgba(var(--v-color-black), .7); }
.v-media-dialog__close {
    position: absolute;
    top: var(--v-space-xs);
    right: var(--v-space-xs);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(var(--v-color-white), .9);
    color: rgb(var(--v-color-text));
}
.v-media-dialog__close .v-icon { width: 22px; height: 22px; }
.v-media-dialog__frame { aspect-ratio: 16 / 9; background: rgb(var(--v-color-black)); }
.v-media-dialog__frame:empty { display: none; }
.v-media-dialog__frame :is(iframe, video) { display: block; width: 100%; height: 100%; border: 0; }
.v-media-dialog__body { padding: var(--v-space-lg); }
.v-media-dialog__body:empty { display: none; }
.v-media-dialog__buttons { display: flex; flex-wrap: wrap; gap: var(--v-space-sm); margin-top: var(--v-space); }