/* ============================================================
   CRL PARTS · POPUP DE VIDEO (Off Canvas) · v2
   ------------------------------------------------------------
   Clases reales del DOM: awb-off-canvas / awb-off-canvas-inner
   / off-canvas-content / off-canvas-close
   crl-video-pop esta DENTRO del off-canvas -> se sube con :has()
   ============================================================ */

/* ---- 1. Wrapper del Off Canvas: sin fondo blanco ---- */
html body .awb-off-canvas:has(.crl-video-pop),
html body .awb-off-canvas:has(.crl-video-pop) .awb-off-canvas-inner,
html body .awb-off-canvas:has(.crl-video-pop) .off-canvas-content{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  --awb-background-color: transparent !important;
}

/* ---- 2. Sin scroll propio, centrado vertical ---- */
html body .awb-off-canvas:has(.crl-video-pop) .awb-off-canvas-inner,
html body .awb-off-canvas:has(.crl-video-pop) .off-canvas-content{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-height: 100vh !important;
  height: auto !important;
  overflow: hidden !important;
}

/* ---- 3. Overlay oscuro detras ---- */
html body .awb-off-canvas-bg,
html body .off-canvas-bg,
html body .awb-off-canvas-overlay{
  background: rgba(5, 8, 13, 0.88) !important;
}

/* ---- 4. Container y columna transparentes ---- */
html body .crl-video-pop,
html body .crl-video-pop .fusion-builder-row,
html body .crl-video-pop .fusion-layout-column,
html body .crl-video-pop .fusion-column-wrapper{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  --awb-background-color: transparent !important;
}

/* La columna trae fusion-column-has-shadow */
html body .crl-video-pop .fusion-column-has-shadow{
  box-shadow: none !important;
}

/* Parrafo fantasma que inyecta el editor */
html body .awb-off-canvas:has(.crl-video-pop) .off-canvas-content > p:empty{
  display: none !important;
}

/* ---- 5. Anular el hack de FitVids ---- */
html body .crl-video-pop .fluid-width-video-wrapper,
html body .crl-video-pop .fusion-video,
html body .crl-video-pop .fusion-video-wrapper{
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-height: 88vh !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  text-align: center !important;
}

/* ---- 6. El alto manda, el ancho sigue la proporcion ---- */
html body .crl-video-pop video,
html body .crl-video-pop iframe{
  position: static !important;
  display: block !important;
  height: 88vh !important;
  max-height: 88vh !important;
  width: auto !important;
  max-width: 92vw !important;
  margin: 0 auto !important;
  background: transparent !important;
  object-fit: contain !important;
}

/* ---- 7. Boton de cierre visible sobre fondo oscuro ---- */
html body .awb-off-canvas:has(.crl-video-pop) .off-canvas-close,
html body .awb-off-canvas:has(.crl-video-pop) .awb-icon-close{
  color: #FFFFFF !important;
  background: transparent !important;
  border: none !important;
  opacity: 1 !important;
  z-index: 99 !important;
}

html body .awb-off-canvas:has(.crl-video-pop) .off-canvas-close::before,
html body .awb-off-canvas:has(.crl-video-pop) .off-canvas-close::after{
  color: #FFFFFF !important;
}

/* ---- 8. Movil ---- */
@media only screen and (max-width: 800px){

  html body .crl-video-pop .fluid-width-video-wrapper,
  html body .crl-video-pop .fusion-video,
  html body .crl-video-pop .fusion-video-wrapper{
    max-height: 80vh !important;
  }

  html body .crl-video-pop video,
  html body .crl-video-pop iframe{
    height: 80vh !important;
    max-height: 80vh !important;
    max-width: 96vw !important;
  }
}