#imagePopup{
  display:none;
  position:fixed;
  z-index:999999;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.85);
  overflow:auto;
}

/* ================= POPUP CONTAINER ================= */
#imagePopup .popup-content{
  position:relative;
  margin:2% auto;
  width:90%;
  max-width:900px;
  background:#ffffff;
  padding:12px;
  border-radius:12px;
  text-align:center;
  box-shadow:0 0 30px rgba(0,0,0,0.5);
}

/* ================= SLIDES ================= */
#imagePopup .popup-slide{
  display:none;
  text-align:center;
}

#imagePopup .popup-slide.active{
  display:block;
}

/* ================= IMAGE FITTING (MAIN FIX) ================= */
#imagePopup .popup-slide img{
  max-width:100%;
  max-height:80vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:10px;
}

/* ================= CLOSE BUTTON ================= */
#imagePopup .close-btn{
  position:absolute;
  right:15px;
  top:8px;
  font-size:32px;
  cursor:pointer;
  color:#ff0000;
  font-weight:bold;
  z-index:10;
}

/* ================= NAV BUTTONS ================= */
#imagePopup .prev,
#imagePopup .next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.7);
  color:#fff;
  border:none;
  padding:12px 18px;
  cursor:pointer;
  border-radius:6px;
  font-size:18px;
}

#imagePopup .prev{
  left:10px;
}

#imagePopup .next{
  right:10px;
}

#imagePopup .prev:hover,
#imagePopup .next:hover{
  background:#007bff;
}

/* ================= MOBILE VIEW ================= */
@media screen and (max-width:768px){

  /* force flex layout when popup opens */
  #imagePopup.showPopup{
    display:flex !important;
    align-items:center;
    justify-content:center;
    padding:10px;
  }

  /* remove desktop margins causing cut */
  #imagePopup .popup-content{
    margin:0 !important;
    width:100% !important;
    max-width:100% !important;
    max-height:90vh;
    overflow:hidden;
  }

  /* keep image fully visible */
  #imagePopup .popup-slide img{
    width:100%;
    height:auto;
    max-height:75vh;
    object-fit:contain;
  }

  /* arrows inside screen */
  #imagePopup .prev{
    left:4px;
  }
  #imagePopup .next{
    right:4px;
  }

  /* close always visible */
  #imagePopup .close-btn{
    top:4px;
    right:6px;
    font-size:24px;
  }
}