/* =========================
   OVERLAY + MODAL ANIMATION
========================= */

.vb-popup-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.9);
  z-index:999999;

  /* animation */
  display:none;
  opacity:0;
  transition:opacity .22s ease;
}
.vb-popup-overlay.is-open{ display:block; }
.vb-popup-overlay.is-open.is-active{ opacity:1; }

.vb-popup-modal{
  position:fixed;
  inset:0;
  z-index:1000000;

  display:none;
  padding: var(--space-6);
  overflow:auto;

  /* animation */
  opacity:0;
  transition:opacity .22s ease;
}
.vb-popup-modal.is-open{
  display:flex;
  align-items:center;
  justify-content:center;
}
.vb-popup-modal.is-open.is-active{
  opacity:1;
}

/* =========================
   POPUP BOX (video in edge)
========================= */

.vb-popup-box{
  width: auto;
  max-width: min(1000px, 100%);
  background:#fff;
  border-radius: var(--r-md);
  box-shadow:0 10px 40px rgba(0,0,0,.25);
  position:relative;
  overflow:visible; /* allow close button outside */

  /* animation */
  transform:translateY(14px) scale(.98);
  opacity:0;
  transition:transform .22s ease, opacity .22s ease;
  will-change:transform, opacity;
}
.vb-popup-modal.is-open.is-active .vb-popup-box{
  transform:translateY(0) scale(1);
  opacity:1;
}

.vb-popup-box__body{
  padding:0;
  margin:0;
}

/* =========================
   CLOSE BUTTON (on corner)
========================= */

.vb-popup-close{
  position:absolute;
  top: calc(-1 * var(--space-4));
  right: calc(-1 * var(--space-4));

  width:35px;
  height:35px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size: var(--text-lg);

  border-radius: var(--r-pill);
  border:0;
  cursor:pointer;

  background:#fff;
  color: var(--c-title);
  font-family: var(--font-first);

  z-index:1000001;
  transition:background .2s ease, color .2s ease, transform .2s ease, opacity .2s ease;
}
.vb-popup-close:hover{
  background:var(--c-primary);
  color:#000;
  transform:scale(1.05);
}

/* =========================
   IFRAME
========================= */

.vb-iframe-holder{ width:100%; }
.vb-iframe-holder iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

/* =========================
   VIDEO (local MP4)
========================= */

.vb-popup-box__body video{
  display:block;
  width:100%;
  max-width: min(1000px, 100%);
  height: auto;
  border-radius: var(--r-md);
  vertical-align: top;
}

/* =========================
   REDUCED MOTION
========================= */

@media (prefers-reduced-motion: reduce){
  .vb-popup-overlay,
  .vb-popup-modal,
  .vb-popup-box{
    transition:none !important;
  }
  .vb-popup-box{
    transform:none !important;
  }
}