/* Universal Lightbox Styling */
.ulb {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.92);
  display: none; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s ease;
}
.ulb.show { display: flex; }
.ulb.visible { opacity: 1; }

.ulb-img {
  max-width: 92vw; max-height: 84vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  transition: transform 0.15s ease;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}
.ulb-img.dragging { cursor: grabbing; transition: none; }

.ulb-close {
  position: fixed; top: 18px; right: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.15);
  color: #fff; font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.ulb-close:hover { background: rgba(255,69,58,0.7); }

.ulb-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.55);
  color: #fff; font-size: 24px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.ulb-nav:hover { background: rgba(0,0,0,0.8); }
.ulb-prev { left: 14px; }
.ulb-next { right: 14px; }

.ulb-toolbar {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px;
  background: rgba(0,0,0,0.6); padding: 8px 12px; border-radius: 12px;
  backdrop-filter: blur(10px);
}
.ulb-toolbar button {
  width: 38px; height: 38px; border: none; border-radius: 8px;
  background: rgba(255,255,255,0.15); color: #fff;
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.1s;
}
.ulb-toolbar button:hover { background: rgba(255,255,255,0.28); }
.ulb-toolbar button:active { transform: scale(0.92); }

.ulb-counter {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.65); font-size: 13px;
  background: rgba(0,0,0,0.5); padding: 4px 10px; border-radius: 6px;
}
