/* =======================
  POPUP BASE
  ======================= */
body.ml-popup-open {
  overflow: hidden;
}

.ml-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  width: 100%;
  height: 100%;
}
.ml-popup.ml-is-open { display: block; }

.ml-popup__overlay {
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
}

.ml-popup__panel {
  top: 50%;
  transform: translateY(-50%);
  position: relative;
  width: 90%;
  height: 80vh;
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  overflow: hidden;
}

.ml-popup__topbar{
  position:absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
}

.ml-popup__close{
  width: 97px;
  height: 30px;
  line-height: 30px;
  appearance: none;
  border: 1px solid #000000;
  background: #fff;
  padding: 0px 12px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* =======================
  GRID 65/35
  ======================= */
.ml-popup__grid{
  height: 100%;
  display: flex;
}

.ml-popup__left{
  width: 65%;
  position: relative;
  background: #f3f3f3;
}
.ml-popup__left.ml-popup__left--controls-hidden .owl-nav,
.ml-popup__left.ml-popup__left--controls-hidden .ml-popup__counter{
  display: none;
}
.ml-popup__left.ml-popup__left--placeholder{
  background-image: url("../images/portfolio/sample-image.png");
  background-size: cover;
  background-position: center;
}

.ml-popup__right{
  width: 35%;
  padding: 36px 34px;
  overflow: auto;
}

/* =======================
  SLIDER
  ======================= */
.ml-popup__slider,
.ml-popup__slide,
.ml-popup__img{
  height: 100%;
}

.ml-popup__slider .owl-stage-outer,
.ml-popup__slider .owl-stage,
.ml-popup__slider .owl-item{
  height: 100%;
}

.ml-popup__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Owl nav (frecce + contatore) */
.ml-popup .owl-nav{
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  pointer-events: none;
  z-index: 6;
}
.ml-popup .owl-nav button{
  pointer-events: auto;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  border: 0;
  background-color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* contatore 1/6 (posizionato tra le frecce) */
.ml-popup__counter{
  font-size: 16px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background-color: #fff;
  padding: 0;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  width: 100px;
  height: 50px;
}

.ml-popup__counter span {
  display: block;
}

/* Icone PNG */
.ml-popup__slider.owl-carousel .owl-nav button.owl-prev,
.ml-popup__slider.owl-carousel .owl-nav button.owl-next {
  background-color: #fff;
}

.ml-popup__nav-icon{
  width: 18px;
  height: 18px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ml-popup__nav-icon-prev{
  background-image: url("../images/icons/left-arrow.png");
}

.ml-popup__nav-icon-next{
  background-image: url("../images/icons/right-arrow.png");
}
/* =======================
  RIGHT CONTENT
  ======================= */
.ml-popup__meta{
  display:flex;
  align-items:center;
  gap: 8px;
  color:#000;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}
.ml-popup__meta-icon{
  width: 24px;
  height: 24px;
  display: inline-block;
  flex: 0 0 24px;
  border: solid 1px #000;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}
.ml-popup__meta-icon.is-hidden{
  display: none;
}
.ml-popup__btn.is-hidden{
  display: none;
}

.ml-portfolio-section-container .ml-popup__title{
  margin: 0 0 14px 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.5px;
  word-wrap: break-word;
}
.ml-popup__desc,
.ml-popup__desc p {
  line-height: 1.6em;
  color:#535862;
  font-size: 15px;
  font-weight: 400;
}
.ml-popup__desc p:first-of-type {
  margin-top: 0;
}

.ml-popup__desc p:last-of-type {
  margin-bottom: 0;
}
.ml-popup__cta{
  margin-top: 25px;
  margin-bottom: 25px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ml-popup__info{
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 25px;
}

.ml-popup__info.is-hidden,
.ml-popup__info-item.is-hidden{
  display: none;
}

.ml-popup__info-title,
.ml-popup__desc-title{
  margin: 0 0 8px 0;
  padding-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
  border-bottom:solid 1px #000
}

p.ml-popup__info-text {
  margin: 0;
  color:#535862;
  line-height: 1.6;
  font-size: 15px;
  font-weight: 400;
  white-space: pre-line;
}
.ml-popup__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 149px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  border-radius: 5px;
  border: 1px solid #000;
  text-decoration:none;
  color:#000;
  font-size: 12px;
  background:#fff;
	-webkit-transition: color .3s ease, border-color .3s ease;
	-moz-transition: color .3s ease, border-color .3s ease;
	-o-transition: color .3s ease, border-color .3s ease;
	transition: color .3s ease, border-color .3s ease;
}

.ml-popup__btn:hover ,
.ml-popup__btn:active ,
.ml-popup__btn:focus {
  border-color:#6E9FFF
}

.ml-popup__btn--full{
  width: 100%;
  flex: 1 1 100%;
  font-weight: bold;
}

.ml-popup__btn b {
  margin-left: 4px;
}

/* =======================
  RESPONSIVE
  ======================= */
@media (max-width: 980px){

  .ml-popup__panel{
    top: 50px;
    transform: none;
    height: calc(100vh - 100px);
    margin: 0 auto;
  }
  .ml-popup__grid{
    flex-direction: column;
    height: 100%;
  }
  .ml-popup__left,
  .ml-popup__right{
    width: 100%;
  }
  .ml-popup__right{
    width: calc(100% - 68px);
    max-height: none;
    overflow: auto;
    flex: 1 1 auto;
  }
  .ml-popup__cta{
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .ml-popup__btn{
    width: 100%;
    max-width: 180px;
    margin-bottom: 10px;
  }
  .ml-popup__btn--full{
    max-width: none;
  }
  .ml-popup__btn:last-child{
    margin-bottom: 0;
  }
  .ml-popup__title{
    font-size: 34px;
  }
}

@media (max-width: 600px) {

  .ml-popup__panel {
    max-width: 352px;
  }

  .ml-popup__left{
    height: 335px;
  }

}

@media (min-width: 981px) and (max-width: 1024px) {

  .ml-popup__panel {
    max-width: 600px;
  }

  .ml-popup__left{
    height: 600px;
  }

}

@media (min-width: 1025px) {

  .ml-popup__panel {
    max-width: 800px;
    max-height: 480px;
  }

}

@media screen and ( min-width: 1600px ) and ( min-height: 780px )  {

  .ml-popup__panel {
    max-width: 1300px;
    max-height: 780px;
  }

}

@media screen and ( min-width: 1920px ) {

  .ml-popup__panel {
    max-width: 1600px;
    max-height: 960px;
  }

}

@media (min-resolution: 2dppx) {
    .ml-popup__panel {
      max-width: 1920px;
      max-height: 1152px;
    }
}