@charset "UTF-8";

/*
    Name: YouTubePopUp | Style
    Description: jQuery plugin to display YouTube, Vimeo, and MP4 video in a pop-up. Responsive, retina ready, and easy to use.
    Version: 1.1.2
    Written By: Alobaidi
    Live Demo: https://wp-plugins.in/VP-Live-Demos
    Copyright 2020 Alobaidi (email: wp-plugins@outlook.com)
*/

.YouTubePopUp-Wrap{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 2147483647;
}

.Video-PopUp-Content{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 32px;
    box-sizing: border-box;
}

.vp-flex{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    height: fit-content;
    max-width: 92vw;
    max-height: 88vh;

    margin: 0 auto;
    line-height: 0;
    background: #000;
    border-radius: 16px;
    overflow: visible;

    box-shadow:
        0 18px 40px rgba(0,0,0,0.45);
}

/* bordo elegante */
/* DOPPIO BORDO */
.vp-flex::before,
.vp-flex::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    pointer-events: none;
}

/* bordo interno (scuro/spento) */
.vp-flex::before {
    inset: 0;
    border: 3px solid #4C0134;
}

/* bordo esterno (acceso) */
.vp-flex::after {
    inset: -5px;
    border: 5px solid #4C0134;
    opacity: 0.9;
}

.vp-flex video,
.vp-flex iframe{
    display: block;
    width: auto;
    height: auto;
    max-width: 92vw;
    max-height: 88vh;
    margin: 0 !important;
    padding: 0 !important;
    outline: none !important;
    border: 0 !important;
    border-radius: 14px;
    background: #000;
    box-sizing: border-box;
}

.vp-flex.vp-horizontal{
    width: fit-content;
    max-width: 92vw;
}

.vp-flex.vp-vertical{
    width: fit-content;
    max-width: min(92vw, 500px);
}

.vp-vt-locally.vp-horizontal video{
    width: auto !important;
    height: auto !important;
    max-width: 92vw !important;
    max-height: 88vh !important;
}

/* opzione senza bordo */
.vp-flex.vp-flex-no-border::before{
    display: none !important;
}

.vp-flex.vp-flex-no-border iframe,
.vp-flex.vp-flex-no-border video{
    border: 0 !important;
    border-radius: 12px !important;
}

/* close fuori dal video */
.YouTubePopUp-Close{
    position: absolute;
    top: 0;
    left: -42px;
    width: 28px;
    height: 28px;
    display: block;
    cursor: pointer;
    z-index: 30;
    opacity: 0.95;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.YouTubePopUp-Close:before{
    font-family: 'vp-close-icon' !important;
    speak: none !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    content: "\61";
    font-size: 28px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.YouTubePopUp-Close:hover{
    opacity: 0.7;
    transform: scale(1.05);
}

.vp-flex.vp-flex-no-border.vp-vt-locally,
.vp-flex.vp-flex-no-border.vp-vt-vimeo{
    box-shadow: none;
}

/* tablet/mobile */
@media all and (max-width: 782px){
    .Video-PopUp-Content{
        padding: 18px;
    }

    .vp-flex,
    .vp-flex.vp-horizontal,
    .vp-flex.vp-vertical{
        max-width: 92vw !important;
        max-height: 84vh !important;
    }

    .vp-flex video,
    .vp-flex iframe{
        max-width: 92vw !important;
        max-height: 84vh !important;
    }

    .YouTubePopUp-Close{
        left: -34px;
        width: 24px;
        height: 24px;
    }

    .YouTubePopUp-Close:before{
        font-size: 24px;
    }
}

@media all and (max-width: 480px){
    .Video-PopUp-Content{
        padding: 12px;
    }

    .vp-flex{
        border-radius: 14px;
    }

    .vp-flex::before{
        border-radius: 14px;
    }

    .vp-flex video,
    .vp-flex iframe{
        border-radius: 12px;
    }

    .YouTubePopUp-Close{
        left: -28px;
    }

    .YouTubePopUp-Close:before{
        font-size: 22px;
    }
}