/* --- VIDEO MODAL (force overlay behavior on ALL devices) --- */
#videoModal.video-modal{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: none;
  z-index: 999999 !important;
}

#videoModal.video-modal.is-open{
  display: block !important;
}

#videoModal .video-backdrop{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.70) !important;
  z-index: 0 !important;
}

#videoModal .video-panel{
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: min(1100px, 94vw) !important;
  height: 75vh !important;

  background: #000 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

#videoModal .video-frame--modal{
  position: absolute !important;
  inset: 0 !important;
  padding-top: 0 !important;
}

#videoModal iframe{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

#videoModal .video-x{
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  z-index: 2 !important;
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  font-size: 22px !important;
  cursor: pointer !important;
}

/* Mobile sizing */
@media (max-width: 768px){
  #videoModal .video-panel{
    width: 94vw !important;
    height: 70vh !important;
    border-radius: 10px !important;
  }
}