/* --- 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;
}

/* --- SAFARI FIX FOR VIDEO MODAL --- */
#videoModal .video-panel{
  position: fixed !important;

  /* Instead of top:50% + transform */
  top: 12.5% !important;          /* centers 75% height */
  bottom: 12.5% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: min(1100px, 94vw) !important;
  height: auto !important;        /* Safari-safe */

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

@media (max-width: 768px){
  #videoModal .video-panel{
    top: 14% !important;
    bottom: 14% !important;
    width: 94vw !important;
    border-radius: 10px !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;
  }
}