/**
 * GLightbox (clean skin): default CSS keeps .gprev/.gnext at top:-100% until min-width 769px,
 * so mobile nav is off-screen. These overrides fix placement and refine control chrome.
 */

.glightbox-clean .gprev,
.glightbox-clean .gnext,
.glightbox-clean .gclose {
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.2s ease,
    opacity 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.glightbox-clean .gprev,
.glightbox-clean .gnext {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.38) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.glightbox-clean .gprev svg,
.glightbox-clean .gnext svg {
  width: 22px;
  opacity: 0.92;
}

.glightbox-clean .gclose {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.38) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.glightbox-clean .gclose svg {
  width: 18px;
  opacity: 0.92;
}

@media (max-width: 768px) {
  .glightbox-clean .gprev,
  .glightbox-clean .gnext {
    top: 50% !important;
    transform: translateY(-50%);
  }

  .glightbox-clean .gprev {
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
  }

  .glightbox-clean .gnext {
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }

  .glightbox-clean .gclose {
    top: max(12px, env(safe-area-inset-top, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }

  body.admin-bar.glightbox-mobile .glightbox-clean .gclose {
    top: max(52px, calc(env(safe-area-inset-top, 0px) + 46px)) !important;
  }
}

@media (min-width: 769px) {
  .glightbox-clean .gprev,
  .glightbox-clean .gnext {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    top: 50% !important;
    transform: translateY(-50%);
  }

  .glightbox-clean .gprev {
    left: max(20px, env(safe-area-inset-left, 0px)) !important;
  }

  .glightbox-clean .gnext {
    right: max(20px, env(safe-area-inset-right, 0px)) !important;
  }

  .glightbox-clean .gclose {
    top: max(16px, env(safe-area-inset-top, 0px)) !important;
    right: max(16px, env(safe-area-inset-right, 0px)) !important;
    opacity: 0.88;
  }

  .glightbox-clean .gprev:not(.disabled):hover,
  .glightbox-clean .gnext:not(.disabled):hover,
  .glightbox-clean .gclose:not(.disabled):hover,
  .glightbox-clean .gprev:not(.disabled):focus-visible,
  .glightbox-clean .gnext:not(.disabled):focus-visible,
  .glightbox-clean .gclose:not(.disabled):focus-visible {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.55) !important;
    box-shadow:
      0 2px 12px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}

/* Desktop wheel zoom (see project-card-lightbox.js): cursor hints */
@media (min-width: 769px) {
  .glightbox-container .gslide-image img.insaat-lb-wheel-zoom {
    cursor: zoom-in;
  }

  .glightbox-container .gslide-image img.insaat-lb-zoom-active {
    cursor: grab;
  }

  .glightbox-container .gslide-image img.insaat-lb-dragging-pan {
    cursor: grabbing;
  }
}