/* ==========================================================================
   LIGHTBOX — просмотр картинки на весь экран
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  background: rgba(6, 6, 10, 0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  cursor: zoom-out;
  padding: 40px;
}
.lightbox.open { display: flex; animation: lbFade .25s ease; }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }

.lightbox img {
  max-width: 90vw; max-height: 85vh;
  border-radius: 20px;
  border: 1px solid rgba(139, 92, 246, 0.5);
  box-shadow: 0 20px 80px rgba(139, 92, 246, 0.35), 0 0 0 1px rgba(255,255,255,0.04);
  animation: lbZoom .3s var(--ease);
  cursor: zoom-out;
}
@keyframes lbZoom {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

.lightbox-close {
  position: absolute; top: 24px; right: 28px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--glass-strong);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  color: var(--text); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit;
  transition: all .2s ease;
}
.lightbox-close:hover {
  border-color: var(--accent-2);
  background: var(--accent-soft);
  color: var(--accent-2);
  transform: scale(1.05);
}

.lightbox-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--glass-strong);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  color: var(--text); font-size: 26px; line-height: 1;
  cursor: pointer; display: none;
  align-items: center; justify-content: center;
  font-family: inherit;
  transition: all .2s ease;
  z-index: 2;
}
.lightbox.multi .lightbox-arrow { display: flex; }
.lightbox-arrow:hover {
  border-color: var(--accent-2);
  background: var(--accent-soft);
  color: var(--accent-2);
  transform: translateY(-50%) scale(1.05);
}
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-dots {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 2;
}
.lightbox-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.lightbox-dot.active { background: var(--accent-2); transform: scale(1.25); box-shadow: 0 0 8px var(--accent-2); }

@media (max-width: 640px) {
  .lightbox-arrow { width: 42px; height: 42px; font-size: 20px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}