/* ===== Stop background scroll ===== */
body.noscroll{
  overflow:hidden;
}

/* ===== Overlay ===== */
.popup-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

/* ===== Popup Box ===== */
.popup-box{
  position:relative;
  animation:popupFade .35s ease-in-out;
  display:inline-block;
}

/* ===== IMAGE (MAIN FIX) ===== */
.popup-img{
  width:auto;
  height:auto;
  object-fit:contain;

  /* ⭐ MAKE POPUP SMALLER */
  max-width:55vw;
  max-height:55vh;

  border-radius:10px;
  display:block;
}

/* ===== Close Button ===== */
.popup-close{
  position:absolute;
  top:-10px;
  right:-10px;
  font-size:22px;
  background:rgba(0,0,0,.9);
  color:white;
  border-radius:50%;
  width:32px;
  height:32px;
  line-height:30px;
  text-align:center;
  cursor:pointer;
}

/* Animation */
@keyframes popupFade{
  from{transform:scale(.9);opacity:0;}
  to{transform:scale(1);opacity:1;}
}

/* ===== Tablet ===== */
@media(max-width:900px){
  .popup-img{
    max-width:60vw;
    max-height:55vh;
  }
}

/* ===== Mobile ===== */
@media(max-width:480px){
  .popup-img{
    max-width:78vw;   /* small popup */
    max-height:55vh;
  }

  .popup-close{
    width:28px;
    height:28px;
    line-height:26px;
    font-size:18px;
  }
}

/* ===== Landscape safety ===== */
@media(orientation:landscape){
  .popup-img{
    max-width:50vw;
    max-height:50vh;
  }
}