/* ===== FINAL VIDEO POPUP CSS ===== */

#videoPopup{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  display: none;                 /* hidden until .is-open */
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 2147483647;           /* always on top */
}

#videoPopup.is-open{ display: flex; }

#videoPopup .popup-content{
  width: min(420px, 92vw);
  max-height: 90vh;
  position: relative;
}

#videoPopup .video-wrap{
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 90vh;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
}

/* iframe/video fills container */
#videoPopup iframe,
#videoPopup video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* use contain if you want no crop */
}

/* close button */
#videoPopup .popup-close{
  position: absolute;
  top: -12px;
  right: -12px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  z-index: 2;
}

/* lock scroll when open */
body.popup-lock{ overflow: hidden; }