/* Videos em paginas - v2 */

.page-video-zone{
    width:100%;
    margin:28px 0;
    min-height:12px;
}

.page-video-item{
    position:relative;
    margin:0 auto 32px;
}

.page-video-item iframe{
    display:block;
    width:100%;
    height:auto;
    border:0;
}

.page-video-horizontal{
    width:100%;
}

.page-video-horizontal iframe{
    aspect-ratio:16/9;
}

.page-video-vertical{
    width:50%;
}

.page-video-vertical iframe{
    aspect-ratio:9/16;
}

/* Editor */
.editor-on .page-video-item{
    cursor:grab;
    user-select:none;
}

.editor-on .page-video-item:active{
    cursor:grabbing;
}

/*
O iframe captura o mouse e impede o drag do elemento pai.
Quando o editor esta logado, desativamos os eventos do iframe.
O visitante continua podendo usar normalmente os controles do player.
*/
.editor-on .page-video-item iframe{
    pointer-events:none;
}

.editor-on .page-video-item.dragging{
    opacity:.30;
}

.page-video-zone.drag-over{
    outline:2px dashed currentColor;
    outline-offset:8px;
}

.page-video-remove{
    position:absolute;
    right:8px;
    top:8px;
    z-index:5;
    width:30px;
    height:30px;
    border:0;
    border-radius:50%;
    background:rgba(0,0,0,.82);
    color:#fff;
    font-size:20px;
    line-height:30px;
    cursor:pointer;
}

.page-video-drag{
    position:absolute;
    left:8px;
    top:8px;
    z-index:5;
    background:rgba(0,0,0,.72);
    color:#fff;
    padding:4px 7px;
    font-size:12px;
    pointer-events:none;
}

.page-video-editor{
    margin:70px 0 100px;
    padding-top:24px;
    border-top:1px solid currentColor;
}

.page-video-editor h2{
    font-size:14px;
    margin:0 0 18px;
}

.page-video-editor label{
    display:block;
    font-size:11px;
    font-weight:700;
}

.page-video-editor textarea,
.page-video-editor select{
    display:block;
    width:100%;
    box-sizing:border-box;
    margin-top:5px;
    padding:9px;
}

.page-video-editor-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin:16px 0;
}

.page-video-editor button[type=submit]{
    padding:9px 14px;
}

#page-video-message{
    margin-left:10px;
    font-size:12px;
}

@media(max-width:700px){
    .page-video-vertical{
        width:70%;
    }

    .page-video-editor-row{
        grid-template-columns:1fr;
    }
}