/* modal-detail.css: ported 1:1 from foodforjoe.es CSS modules (hash suffixes removed). */

/* ── ModalDetail ── */
.ModalDetail_overlay {
  position:fixed;
  height:100%;
  width:100%;
  left:0;
  top:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,.4);
  opacity:0;
  transition:opacity .9s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
  z-index:20;
}

.ModalDetail_modal {
  background:var(--color-light-beige);
  right:0;
  position:absolute;
  width:100%;
  height:100%;
  transform:translateX(100%);
  transition:all .9s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  overflow-y:scroll;
  overflow-x:hidden;
}

.ModalDetail_modalSwipping {
  transition:none;
}

.ModalDetail_overlayVisible {
  opacity:1;
  pointer-events:all;
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}

.ModalDetail_modalVisible {
  transform:translateX(0);
}

.ModalDetail_imageWrapper {
  background-color:white;
  width:100%;
}

.ModalDetail_image {
  position:relative;
  width:calc(100% - 40px);
  height:0;
  padding-bottom:calc(66% - 26.4px);
  margin:20px;
  background-size:contain;
  background-position:50%;
  background-repeat:no-repeat;
  cursor:zoom-in;
  transition:background-size .3s ease;
}

.ModalDetail_imageZoomed {
  background-size:200%;
  cursor:zoom-out;
}

.ModalDetail_children {
  position:relative;
}

.ModalDetail_closeButton {
  position:fixed;
  right:22px;
  top:22px;
  border:none;
  cursor:pointer;
  background:transparent;
  padding:0;
  z-index:1;
}

.ModalDetail_content {
  padding:30px 20px;
}

.ModalDetail_title {
  margin-bottom:12px;
}

@media (min-width:960px) {
  .ModalDetail_modal {
    max-width:490px;
    border-radius:var(--border-radius-modal) 0 0 var(--border-radius-modal);
  }
}

@media (min-width:960px) {
  .ModalDetail_content {
    padding:50px 40px;
  }
}