/* =========================
   OVERLAY (CENTER)
========================= */
.pcp-popup{
  position:fixed;
  inset:0;
  display:none;

  justify-content:center;
  align-items:center;

  background:rgba(0,0,0,0.85);
  z-index:99999;

  padding:20px;
  box-sizing:border-box;
}

body.admin-bar .pcp-popup{ padding-top:60px; }

/* =========================
   BOX (NO BG / NO SPACE)
========================= */
.pcp-box{
  position:relative;

  max-width:90vw;
  max-height:90vh;

  /* kill any theme bg/shadow/padding */
  background:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
}

/* also kill any inherited bg on children */
.pcp-box *{
  background:transparent !important;
}

/* =========================
   CLOSE (FLOATING)
========================= */
.pcp-close{
  position:absolute;
  top:-14px;
  right:-14px;

  width:36px;
  height:36px;

  background:#353535 !important;
  color:#fff !important;

  border:0;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  z-index:20;
}

/* =========================
   SLIDES WRAPPER (NO PAD)
========================= */
.pcp-slides{
  padding:0 !important;
  margin:0 !important;
}

/* =========================
   IMAGE (ONLY VISIBLE THING)
========================= */
.pcp-slide{
  display:none;

  max-width:100%;
  max-height:90vh;

  width:auto;
  height:auto;

  object-fit:contain;

  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);

  opacity:0;
  transition:opacity .45s ease;
}
.pcp-slide.active{
  display:block;
  opacity:1;
}

/* =========================
   ARROWS
========================= */
.pcp-prev,
.pcp-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);

  width:40px;
  height:40px;

  background:rgba(0,0,0,0.6);
  color:#fff;

  border:0;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  z-index:15;
}

.pcp-prev{ left:-52px; }
.pcp-next{ right:-52px; }

/* =========================
   RESPONSIVE
========================= */
@media (max-width:768px){
  .pcp-prev{ left:6px; }
  .pcp-next{ right:6px; }
  .pcp-close{ top:-10px; right:-10px; width:32px; height:32px; }
}

@media (max-width:480px){
  .pcp-popup{ padding:10px; }
  .pcp-prev, .pcp-next{ width:30px; height:30px; }
}