/* 2025 - DPG - CUSTOM STYLES ONLY FOR FILM POSTS */

/*    COMMON  STYLES    */

/* COMMON - Efecto - Neon Glow Border for Buttons */
.glow-on-hover {
    border: none; outline: none; color: #222 !important; cursor: pointer; position: relative; z-index: 0;  border-radius: 5px;
}
.glow-on-hover:before, .single-format-video #respond #commentform > div > div:nth-child(2) > button.btn:before  {
    content: ''; background: linear-gradient(45deg, #08348C, #4D59FA, #0B8AD9, #23B7D9, #59CCD9, #23B7D9, #0B8AD9, #4D59FA, #08348C);
    position: absolute; top: -2px; left:-2px; background-size: 400%; z-index: -1; filter: blur(5px); width: calc(100% + 4px);
    height: calc(100% + 4px); animation: glowing 20s linear infinite; opacity: 0; transition: opacity .3s ease-in-out; border-radius: 5px;
}
.glow-on-hover:active, .single-format-video #respond #commentform > div > div:nth-child(2) > button.btn:active {
    color: #000 !important;
}
.glow-on-hover:active:after, .single-format-video #respond #commentform > div > div:nth-child(2) > button.btn:active:after  {
    background: transparent;
}
.glow-on-hover:hover:before, .single-format-video #respond #commentform > div > div:nth-child(2) > button.btn:hover:before {
    opacity: 1;
}
.glow-on-hover:after, .single-format-video #respond #commentform > div > div:nth-child(2) > button.btn:after {
    z-index: -1; content: ''; position: absolute; width: 100%; height: 100%; /*background: white;*/ left: 0; top: 0; border-radius: 5px;
}
@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/* COMMON - Modal - Oculta por defecto */
.single-format-video .modal {
  display: none; position: fixed; inset: 0; justify-content: center; align-items: center; z-index: 1000;
}
/* COMMON - Modal - muestra contenido */
.single-format-video .show {
  display: flex !important;
}
/* COMMON - Modal - Overlay semitransparente */
.single-format-video .modal__overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.6); cursor: pointer;
}
/* COMMON - Modal - Contenido del popup */
.single-format-video .modal__content {
    position: relative; background: #fff; border-radius: 6px;
    overflow: auto; box-shadow: 0 2px 10px rgba(0,0,0,0.3); z-index: 1;
}
/* COMMON - Modal - Titulo del popup */
.single-format-video .modal__content > h4 { color: #222 !important; text-align: center;
}
/* COMMON - Modal - Botón de cerrar (la X) */
.single-format-video .modal__content .close {
    position: absolute; top: 0.5em; right: 0.75em; font-size: 1.5em; color: #666; cursor: pointer;
}
.single-format-video .modal__content .close:hover { color: #000;
}

/* COMMON - Oculta elementos */
.single-format-video .post-category-list,
.single-format-video .tags-list { display: none; 
}

    /*  **  CONTENEDORES  **  */

/* COMMON - Contenedor principal */
.single-format-video #content { 
    margin: 0 0 40px 0 !important; 
}
/* COMMON - Subcontenedor principal */
.single-format-video #primary { 
    padding-right: 0px; padding-left: 0px; 
}
/* COMMON - Subcontenedor contenido articulo */
.single-format-video .post-content-wrap { 
    margin: 0 !important; background-color: white; border-radius: 0px 0px 5px 5px !important; 
}
/* COMMON - Contenido articulo */
.single-format-video .post-content { 
    margin-top: -40px; margin-bottom: -3px; padding: 10px 10px 15px 10px !important; 
}
/* COMMON - Subcontenedor controles video */
.single-format-video .video-controls {
    margin-top: -7px;
}
/* COMMON - Subcontenedor controles video popup */
.single-format-video .video-controls .modal-body {
    margin-bottom: -10px;
}

    /*  **  PANTALLA  **  */

.single-format-video #pantalla {
    border-radius: 0px 0px 5px 5px !important; 
}

    /*  **  BOTONES  **  */

/* COMMON - Envoltorio botones reproductor */
.single-format-video #video-player .crum-button { 
    display: inline !important;
}
.single-format-video #video-player .crum-button a:after { 
    background: white !important;
}
/* COMMON - Envoltorio botones reproductor - alineacion */
#buttonsContainer1 > div:nth-child(2),#buttonsContainer1 > div:nth-child(3),
#buttonsContainer2 > div:nth-child(2),#buttonsContainer2 > div:nth-child(3) { 
    text-align: center; 
}
/* COMMON - Envoltorio botones reproductor - alineacion */
#buttonsContainer1 > div:nth-child(4), #buttonsContainer2 > div:nth-child(4) { 
    text-align: right; 
}
/* COMMON - Botones reproductor */
.single-format-video #video-player .crum-button a.btn,
.single-format-video #video-player .track-item { 
    border: 3px solid #222; border-radius: 5px; 
    background-color: transparent !important;
    transition: opacity 1.5s ease;
}
.single-format-video #video-player .track-item { 
    line-height: 2;
}
.single-format-video #video-player .track-item.active { 
    border: 3px solid #222; border-radius: 5px; 
    background-color: transparent !important;
}
.single-format-video #video-player .track-item:after { 
    background: white !important;
}
.single-format-video #video-player .track-item:hover,
.single-format-video #video-player .track-item:active,
.single-format-video #video-player .crum-button a.btn:hover i,
.single-format-video #video-player .crum-button a.btn:active i {  
    color: #000 !important; opacity: 1 !important;
}

/* COMMON - iconos botones */
.single-format-video #video-player .crum-button i.olympus-icon-Play-Icon-Big {
    padding: 8px 9px 8px 10px; font-size: 18px;
}
.single-format-video #video-player .crum-button i.olympus-icon-Pause-Icon {
    padding: 8px 10px; font-size: 18px;
}
.single-format-video #video-player .crum-button i.olympus-icon-Popup-Left-Arrow-1,
.single-format-video #video-player .crum-button i.olympus-icon-Popup-Right-Arrow-1 {
    padding: 8px 11px; font-size: 18px;
}
.single-format-video #video-player .crum-button i.olympus-icon-Sound-Icon {
    padding: 8px 2px 8px 3px; font-size: 18px;
    }
.single-format-video #video-player .crum-button i.olympus-icon-No-Sound-Icon {
    padding: 8px 3px; font-size: 18px;
}
.single-format-video #video-player .crum-button i.olympus-icon-Info-Icon {
    padding: 8px 6px 5px 7px; font-size: 21px;
}
.single-format-video #video-player .crum-button i.olympus-icon-Photo-Icon { 
    padding: 8px 5px 5px 7px; font-size: 21px;
}
.single-format-video #video-player .crum-button i.olympus-icon-Downloads-Icon {
    padding: 6px 6px 7px 6px; font-size: 21px;
}
.single-format-video #video-player .crum-button i.olympus-icon-Fullscreen-Icon {
    padding: 8px 7px 7px 7px; margin-right: 0px; font-size: 19px;
}

/*  **  TEXTOS  **  */

/* COMMON - Subtitulo */
.single-format-video #video-player #track-subtitle { 
    margin-bottom: 0px; font-size:1.5em; font-weight:500; color: #222; font-family: 'Noto Sans' !important; ; 
}
/* COMMON - Subtitulo Mirror */
    .single-format-video #video-player #track-artist { 
    margin-top: 5px; font-weight:500; color: #222; font-family: 'Noto Sans' !important; 
}
/* COMMON - Popup Sinopsis */
.single-format-video .sinopModal { 
    color:#222!important; padding: 0px 10px 20px 10px; text-align:justify !important; font-size:1.2em; margin: -10px 10px 0px 10px; 
}
.single-format-video .sinopModal2 { 
    background-color: #D1EBFF !important; color:#222; padding: 10px; text-align:justify !important; 
    font-size:1.2em; margin: -10px 15px 10px 15px; border-radius:3px; 
}

/*  **  ACORDEON  **  */

/* COMMON - Acordeon - Contenedor general */
.single-format-video .acocon { 
    margin-top:40px; margin-bottom: -24px !important; 
}
.single-format-video .acocon:hover::after { 
    background: white !important;
}
/* COMMON - Acordeon - Subcontenedor general */
.single-format-video .review-accordion {
    margin-top: -6px !important; font-weight:600; font-size: 1.5em; color: #222; font-family: 'Noto Sans' !important; line-height: 1;
    border: 3px solid #222; border-radius: 5px; background-color: transparent; margin: 1em 0; overflow: hidden;
}
/* COMMON - Acordeon - El encabezado (summary) */
.single-format-video .review-accordion summary {
    background: transparent; padding: 0.75em 1em; cursor: pointer; font-size:0.9em; font-weight: bold; list-style: none; position: relative;
}
/* COMMON - Acordeon - Triangulo indicador */
.single-format-video .review-accordion summary::marker {
      display: none;
}
.single-format-video .review-accordion summary::after {
    content: '\276F'; position: absolute; right: 1em; transition: transform 0.4s ease;
}
.single-format-video .review-accordion[open] summary::after {
    transform: rotate(90deg);
}
/* COMMON - Acordeon - El contenido oculto por defecto */
.single-format-video .review-accordion .content {
    padding: 0 1em 1em; line-height: 1.5 !important; background: transparent; font-weight:400; font-size: 0.8em; 
}
/* COMMON - Acordeon - Estrellas valoraciones */
.single-format-video .starsreview > h5 {
    position: relative; margin-bottom:-75px !important; text-align:center; color:#222;
}
.single-format-video .starsreview > h5 > i { margin-top:11px; 
}
/* COMMON - Reviews - Bolas de colores */
.single-format-video article.category-video .fa-circle.pos { color: #4CAF50 !important; }
.single-format-video article.category-video .fa-circle.neu { color: #FFBF00 !important; }
.single-format-video article.category-video .fa-circle.neg { color: #d33221 !important; }

    /* SINGLE POST REACTIONS */ 

/* COMMON - Reactions - Contenedor */
.single-format-video article.category-video .choose-reaction { 
    background-color: #38a9ff; border-color: hsl(206, 100%, 61%); 
    margin-top:15px !important; padding-top: 0 !important;
}

    /* SINGLE POST RRSS */ 

/* COMMON - Contenedor - RRSS */
.single-format-video article.category-video .socials-shared { 
    width: 150%; margin: auto -25%; background-color: #2687d0 !important; 
}

    /* SINGLE POST COMENTARIOS */ 

/* COMMON - Comentarios - Contenedor */
.single-format-video #respond { 
    background-color: #2687d0 !important; width: 150%; 
    margin: auto -25% -60px -25% !important; 
}
/* COMMON - Comentarios - Titulos */
.single-format-video #respond .more-comments {
    font-size:1.4em; font-weight:600; color:#fff; padding-top: 20px;
}
/* COMMON - Comentarios - Formulario */
.single-format-video #respond #commentform {
    margin: auto 20% auto 20% !important;
}
/* COMMON - Comentarios - Formulario Textarea */
.single-format-video textarea#comment {
    background-color: #fff;
}
/* COMMON - Comentarios - Label form */
.single-format-video label, 
.single-format-video .comment-notes { 
    color: #fff; font-size: 1.2em;
}
.single-format-video #respond #commentform > p.logged-in-as > span.required-field-message { 
    display:none; 
}
.single-format-video #respond #commentform > p.logged-in-as  { 
    color: #222; 
}
.single-format-video #respond #commentform > p.logged-in-as > a:nth-child(1) { 
    color:#fff;
} 
.single-format-video #respond #commentform > p.logged-in-as > a:nth-child(2) { 
    display:none;
}
/* COMMON - Comentarios - Boton */
.single-format-video #respond #commentform > div > div:nth-child(2) > button.btn { 
    font-size:1.1em; background:transparent; border: 3px solid #fff; color:#fff; 
    transition: all 0.3s ease-in; margin-bottom:25px;
}
.single-format-video #respond #commentform > div > div:nth-child(2) > button.btn:hover { 
    background-color:#fff !important; color:#fff !important; 
}
/* COMMON - Comentarios - Respuestas */
.single-format-video #main > .ui-block { background-color: #2687d0; 
}
.single-format-video #main > .ui-block > .container li.comment {
    margin-bottom: 3rem; margin: auto 7% 30px 7%; color: #555; background: #f0f0f0;
}
.single-format-video #main > .ui-block > .container .post__author-name {
    color: #2687d0; font-weight: 600;
}
.single-format-video #main > .ui-block > .container li.comment p {
    color: #222;
}

/* SINGLE POST RELATED POSTS */

/* COMMON - Related - Contenedor */
.single-format-video #main > .related-posts { display:none;
}

/*     MEDIA  QUERIES    */

/* Estilos para vista PC */

@media screen and (min-width: 641px) {

    /* PC - Layers */
    .grid3 {display: grid; grid-template-columns: 24% auto 24%;}
    .grid4 {display: grid; grid-template-columns: 24% 26% 26% 24%; }

    /* PC - Subcontenedor articulo */
    .single-format-video article.blog-post { 
        background-color: #38a9ff; padding: 30px 15% 0px 15% !important;
    }
    /* PC - Envoltorio titulos */
    .single-format-video #video-player .track-info { 
        display: flex; flex-direction: column; text-align: center; 
    }
    /* PC - Envoltorio mirrors */
    .single-format-video #video-player .track-list { 
        margin-top: -88px; 
    }
    /* PC - Titulo */
    .single-format-video #video-player #track-title { 
        margin-top: 7px; margin-bottom: 2px; font-weight:600; font-size: 1.8em; color: #222; font-family: 'Noto Sans' !important; 
    }
    /* PC - Modal content */
    .single-format-video .modal__content {
    max-width: 50%; max-height: 80%;
    }
}

/* Estilos para vista Mobile */

@media screen and (max-width: 640px) {

    /* MV - Layers */
    .grid3 {display: block; }
    .grid4 { display:flex; justify-content:center; align-items:center; text-align:center;}

    /* MV - Subcontenedor articulo */
    .single-format-video article.blog-post { 
        background-color: #38a9ff; padding: 30px 5% 0px 5% !important;
    }
    /* MV - Envoltorio titulos */
    .single-format-video #video-player .track-info { 
        display: flex; flex-direction: column; text-align: center; padding-top: 0px; margin-bottom: 30px;
    }
    /* MV - Envoltorio mirrors */
    .single-format-video #video-player .track-list { 
        margin-top: 25px; margin-bottom: 22px; display: flex; justify-content:center; align-items:center !important;
    }
    .single-format-video #video-player .track-list div:nth-child(1) { 
        margin-right: 2%; width: 48%;
    }
    .single-format-video #video-player .track-list div:nth-child(3) { 
        margin-left: 2%; width: 48%;
    }
    /* MV - Envoltorio botones reproductor - alineacion */
    #buttonsContainer1 { 
        margin-top: 120px; margin-bottom: -160px;
    }
    /* MV - Envoltorio botones reproductor - alineacion */
    #buttonsContainer2 { 
        margin-bottom: -10px; padding-top: 30px;
    }
    /* MV - Envoltorio botones reproductor - alineacion 
    #buttonsContainer2 div:nth-child(4) { 
        padding-bottom: 14px; 
    } */
    /* MV - Envoltorio botones reproductor */
    .single-format-video #video-player .crum-button { 
        display: inline !important;  padding-left: 2%;  padding-right: 2%;
    }
    /* MV - Titulo */
    .single-format-video #video-player #track-title { 
        margin-top: 7px; margin-bottom: 2px; font-weight:600; font-size: 1.5em; color: #222; font-family: 'Noto Sans' !important; 
    }
    /* MV - Modal content */
    .single-format-video .modal__content {
    max-width: 90%; max-height: 90%;
    }
    /* MV - Comentarios - Respuestas */
    .single-format-video #comments { padding-top: 30px; }
   
}