/* =========================================================
   MK LIGHTBOX
   ========================================================= */

/* Lock page scroll while lightbox is open */
html.mk-lightbox-lock{
  overflow:hidden;
}

/* Dialog shell */
dialog.mk-lightbox{
  padding:0 !important;
  border:0 !important;
  background:transparent !important;

  width:100vw;
  height:100vh;
  max-width:100vw;
  max-height:100vh;

  margin:0;
  overflow:hidden;

  opacity:0;
  transform:scale(0.985);
  transition:opacity 180ms ease, transform 180ms ease;
}

/* Smooth appear */
dialog.mk-lightbox.is-open{
  opacity:1;
  transform:scale(1);
}

/* Backdrop */
dialog.mk-lightbox::backdrop{
  background:rgba(0,0,0,.72);
  backdrop-filter:saturate(120%) blur(2px);
}

/* =========================================================
   TOP CONTROLS
   ========================================================= */
.mk-lightbox__chrome{
  position:fixed;
  top:12px;
  right:12px;
  z-index:3;

  display:flex;
  gap:10px;
}

.mk-lightbox__close,
.mk-lightbox__zoom{
  width:44px;
  height:44px;
  border:0;
  border-radius:12px;

  background:rgba(255,255,255,.14);
  color:#fff;

  font-size:22px;
  line-height:44px;
  text-align:center;

  cursor:pointer;
  -webkit-tap-highlight-color:transparent;

  transition:background-color 160ms ease, transform 160ms ease;
}

.mk-lightbox__close:hover,
.mk-lightbox__zoom:hover{
  background:rgba(255,255,255,.22);
  transform:translateY(-1px);
}

/* =========================================================
   VIEWPORT + FIGURE
   ========================================================= */

/* FIT mode (default): no scrollbars */
.mk-lightbox__viewport{
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:64px 16px 16px; /* space for top controls */
  box-sizing:border-box;

  overflow:hidden;
}

/* Figure wrapper */
.mk-lightbox__figure{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;

  max-width:100%;
  max-height:100%;
}

/* Image in FIT mode */
.mk-lightbox__img{
  display:block;
  width:auto;
  height:auto;

  max-width:100%;
  max-height:calc(100vh - 96px);

  object-fit:contain;

  border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.45);

  user-select:none;
  -webkit-user-drag:none;
}

/* Caption */
.mk-lightbox__cap{
  margin:0;
  padding:0 6px;
  color:rgba(255,255,255,.78);
  font-size:13px;
  text-align:center;
}

/* =========================================================
   ZOOM MODE
   ========================================================= */

/*
  Важно: НЕ сбиваем центрирование!
  Раньше тут было align-items/justify-content:flex-start — из-за этого картинка "уезжала" влево/вверх.
*/
dialog.mk-lightbox.is-zoom .mk-lightbox__viewport{
  overflow:auto;          /* включаем прокрутку */
  align-items:center;     /* оставляем центр */
  justify-content:center; /* оставляем центр */
}

/* показываем изображение в натуральном размере (без max-ограничений) */
dialog.mk-lightbox.is-zoom .mk-lightbox__img{
  max-width:none;
  max-height:none;
}

/* drag cursor только в zoom (а zoom-in/out — на самой картинке) */
dialog.mk-lightbox.is-zoom .mk-lightbox__viewport{
  cursor:grab;
}

.mk-lightbox__viewport.is-dragging{
  cursor:grabbing;
}

/* =========================================================
   CURSOR CUES FOR ZOOM
   ========================================================= */

/* в FIT — видно, что можно увеличить кликом */
dialog.mk-lightbox.is-open:not(.is-zoom) .mk-lightbox__img{
  cursor:zoom-in;
}

/* в ZOOM — видно, что можно уменьшить кликом */
dialog.mk-lightbox.is-open.is-zoom .mk-lightbox__img{
  cursor:zoom-out;
}

/* лёгкий hover-намёк без иконок */
@media (hover:hover) and (pointer:fine){
  dialog.mk-lightbox.is-open:not(.is-zoom) .mk-lightbox__img:hover{
    filter:brightness(.98);
  }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:480px){
  .mk-lightbox__chrome{
    top:10px;
    right:10px;
  }

  .mk-lightbox__viewport{
    padding-top:60px;
  }
}