#ap_overlay {
  display: none;
  position: fixed;
  z-index: 99999;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

#ap_overlay.open {
  display: flex;
  align-items: center;
  justify-content: center;
}

#ap_modal {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.ap_slide {
  position: relative;
}

.ap_slide img {
  display: block;
  max-width: var(--ap-max-width, 90vw);
  max-height: 80vh;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

#ap_modal .ap_loading {
  padding: 40px 60px;
  color: #555;
  font-size: 14px;
  font-family: sans-serif;
  background: #fff;
  border-radius: 4px;
}

#ap_close {
  position: absolute;
  top: -18px;
  right: -18px;
  z-index: 10;
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.ap_preview_btn {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 11px;
  color: #fff;
  background: #4267b2;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  vertical-align: middle;
  line-height: 1.6;
  transition: background 0.2s;
}

.ap_preview_btn:hover {
  background: #365899;
  text-decoration: none;
}

#ap_prev, #ap_next {
  position: fixed;
  z-index: 100000;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: 3px solid #fff !important;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#ap_prev { left: 18px; }
#ap_next { right: 18px; }

#ap_prev:hover, #ap_next:hover {
  background: rgba(0, 0, 0, 0.8);
}

#ap_prev::before, #ap_next::before {
  font-size: 26px;
  line-height: 1;
}

#ap_prev::before { content: '\276E'; }
#ap_next::before { content: '\276F'; }

.ap_nav_hidden { display: none !important; }

@keyframes apSlideOutLeft {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-120px); opacity: 0; }
}

@keyframes apSlideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(120px); opacity: 0; }
}

@keyframes apSlideInRight {
  from { transform: translateX(80px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes apSlideInLeft {
  from { transform: translateX(-80px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.ap_slide_out_left {
  animation: apSlideOutLeft 0.2s ease forwards;
}

.ap_slide_out_right {
  animation: apSlideOutRight 0.2s ease forwards;
}

.ap_slide_in_right {
  animation: apSlideInRight 0.25s ease forwards;
}

.ap_slide_in_left {
  animation: apSlideInLeft 0.25s ease forwards;
}