/* Basic reset for overlay */
.wpeg-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.92);
  z-index: 999999;
  overflow: hidden;
}

.wpeg-stage {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.wpeg-slide {
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 300ms ease;
  will-change: transform;
}

.wpeg-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
}

.wpeg-track {
  display: flex;
  height: 100%;
  width: 100%;
}

/* Controls */
.wpeg-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  border: none;
  color: #fff;
  font-size: 32px;
  padding: 12px 14px;
  cursor: pointer;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}

.wpeg-btn:focus { outline: 2px solid rgba(255,255,255,0.15); }

.wpeg-prev { left: 14px; }
.wpeg-next { right: 14px; }

.wpeg-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(0,0,0,0.4);
  border: none;
  color: #fff;
  font-size: 22px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}

/* Caption area (optional) */
.wpeg-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 12px 20px;
  box-sizing: border-box;
  color: #fff;
  font-size: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);
}

/* Small screens tweak */
@media (max-width: 700px) {
  .wpeg-btn { font-size: 26px; padding: 10px; }
}

/* Hide overlay until created */