/* UXFB MicroModal styles (replaces Fancybox CSS)
 * Scoped to #uxfb-fancybox-modal to avoid affecting the rest of the site.
 */
#uxfb-fancybox-modal{display:none;}
#uxfb-fancybox-modal.is-open{display:block;}

#uxfb-fancybox-modal .modal__overlay{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.72);
}

#uxfb-fancybox-modal .modal__container{
  position:relative;
  width:min(960px, 100%);
  max-height:min(85vh, 100%);
  overflow:auto;
  border-radius:14px;
  background:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}

#uxfb-fancybox-modal .modal__header{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding:12px 12px 0 12px;
}

#uxfb-fancybox-modal .modal__close{
  appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  width:44px;
  height:44px;
  position:relative;
}

#uxfb-fancybox-modal .modal__close:before,
#uxfb-fancybox-modal .modal__close:after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:22px;
  height:2px;
  background:currentColor;
  transform-origin:center;
}

#uxfb-fancybox-modal .modal__close:before{transform:translate(-50%,-50%) rotate(45deg);}
#uxfb-fancybox-modal .modal__close:after{transform:translate(-50%,-50%) rotate(-45deg);}

#uxfb-fancybox-modal .modal__content{
  padding:12px 18px 18px 18px;
}

#uxfb-fancybox-modal #uxfb-fancybox-modal-content .uxfb-mm-media{
  display:flex;
  align-items:center;
  justify-content:center;
}

#uxfb-fancybox-modal #uxfb-fancybox-modal-content .uxfb-mm-image img{
  display:block;
  max-width:100%;
  height:auto;
}

#uxfb-fancybox-modal #uxfb-fancybox-modal-content iframe,
#uxfb-fancybox-modal #uxfb-fancybox-modal-content video{
  width:100%;
  aspect-ratio:16/9;
  border:0;
  display:block;
}

/* Simple open/close animation */
@media (prefers-reduced-motion: no-preference){
  #uxfb-fancybox-modal .modal__overlay{opacity:0; transition:opacity .18s ease;}
  #uxfb-fancybox-modal.is-open .modal__overlay{opacity:1;}
  #uxfb-fancybox-modal .modal__container{transform:translateY(10px); transition:transform .18s ease;}
  #uxfb-fancybox-modal.is-open .modal__container{transform:translateY(0);}
}
