/*
---------------------------------------------------
Overlay
---------------------------------------------------
*/

#epc-video-overlay{

    position:fixed;

    inset:0;

    background:black;

    z-index:2147483647;

    display:none;

    justify-content:center;

    align-items:center;

}

/*
---------------------------------------------------
Contenedor del reproductor
---------------------------------------------------
*/

#epc-video-player{

    width:100%;

    max-width:500px;

    aspect-ratio:9/16;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*
---------------------------------------------------
YouTube
---------------------------------------------------
*/

#epc-video-player iframe{

    width:100%;

    height:100%;

    border:none;

}

/*
---------------------------------------------------
TikTok / Instagram
---------------------------------------------------
*/

#epc-social-player{

    width:100%;

    height:100%;

    border:none;

}

/*
---------------------------------------------------
Cerrar
---------------------------------------------------
*/

#epc-video-close{

    position:absolute;

    top:20px;

    right:20px;

    width:50px;

    height:50px;

    border-radius:50%;

    background:white;

    color:black;

    border:2px solid black;

    font-size:30px;

    cursor:pointer;

    z-index:2147483647;

}

/*
---------------------------------------------------
Anterior / siguiente
---------------------------------------------------
*/

#epc-video-prev,
#epc-video-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    color:white;

    font-size:60px;

    font-weight:bold;

    cursor:pointer;

    user-select:none;

    z-index:2147483647;

    line-height:1;

    /* Borde negro */
    text-shadow:
        -2px -2px 0 #000,
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,
        -3px  0px 0 #000,
         3px  0px 0 #000,
         0px -3px 0 #000,
         0px  3px 0 #000;

}

#epc-video-prev{

    left:30px;

}

#epc-video-next{

    right:30px;

}

/*
---------------------------------------------------
Contador
---------------------------------------------------
*/

#epc-video-counter{

    position:absolute;

    top:20px;

    left:20px;

    color:white;

    font-size:20px;

    font-weight:bold;

    z-index:2147483647;

    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;

}

/*
---------------------------------------------------
Responsive
---------------------------------------------------
*/

@media(max-width:768px){

    #epc-video-player{

        max-width:100%;

        height:100vh;

    }

    #epc-video-prev{

        left:10px;

    }

    #epc-video-next{

        right:10px;

    }

    #epc-video-prev,
    #epc-video-next{

        font-size:45px;

    }
}

.epc-video-thumb{

    position:relative;

    width:100%;

    aspect-ratio:9/16;

    overflow:hidden;

    border-radius:12px;

    background:#111;

}

.epc-video-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.epc-video-play{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:80px;
    height:80px;
    border-radius:50%;
    background:rgba(0,0,0,.45);
    border:4px solid #0082f1;
    box-shadow:0 0 12px rgba(0,130,241,.7);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10;
}

.epc-video-play::before{

    content:'';

    width:0;
    height:0;

    border-top:14px solid transparent;
    border-bottom:14px solid transparent;
    border-left:24px solid #fff;

    margin-left:6px;

}