/* Stable CSS */
.dpsc{
  position: relative;
  width: var(--slider-w, 640px);
  height: var(--slider-h, 400px);
  background: transparent;
  overflow: hidden;
  box-sizing: border-box;
  cursor: zoom-in;
}
.dpsc, .dpsc * { box-sizing: border-box; }
.dpsc button { margin:0; padding:0; border:0; background: transparent; }

/* Stage area reserves space based on mode */
.dpsc .dpsc-stage{
  position: absolute;
  top: var(--pad, 10px);
  left: var(--pad-left, var(--pad, 10px));
  right: var(--pad-right, var(--pad, 10px));
  bottom: var(--pad-bottom, var(--pad, 10px));
  display: flex;
  align-items: center;
  justify-content: center;
}
.dpsc .dpsc-stage img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity .2s ease-in-out;
}

/* ARROWS MODE */
.dpsc--arrows .dpsc-arrow{
  position: absolute;
  top: 0; bottom: 0;
  width: var(--side-w, 40px);
  cursor: pointer;
}
.dpsc--arrows .dpsc-prev{ left: 0; }
.dpsc--arrows .dpsc-next{ right: 0; }

/* CSS triangles pinned at 0px edge */
.dpsc--arrows .dpsc-arrow::before{
  content:"";
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:0; height:0;
  border-style: solid;
}
.dpsc--arrows .dpsc-prev::before{
  left:0;
  border-width: calc(var(--chev-side, 24px) / 2) calc(var(--chev-side, 24px)) calc(var(--chev-side, 24px) / 2) 0;
  border-color: transparent var(--nav-color, #444) transparent transparent;
}
.dpsc--arrows .dpsc-next::before{
  right:0;
  border-width: calc(var(--chev-side, 24px) / 2) 0 calc(var(--chev-side, 24px) / 2) calc(var(--chev-side, 24px));
  border-color: transparent transparent transparent var(--nav-color, #444);
}

/* Reserve image spacing in arrows mode: side-w + gutter */
.dpsc--arrows{
  --pad-left:  calc(var(--side-w, 40px) + var(--gutter, 10px));
  --pad-right: calc(var(--side-w, 40px) + var(--gutter, 10px));
  --pad-bottom: var(--pad, 10px);
}

/* BARS MODE */
.dpsc--bars .dpsc-bottom{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--bar-h, 32px);
  background: transparent;
}
.dpsc--bars .dpsc-bottom-arrow{
  position: absolute;
  top: 0; bottom: 0;
  width: var(--bottom-arrow-w, 40px);
  cursor: pointer;
}
.dpsc--bars .dpsc-bottom-prev{ left: 0; }
.dpsc--bars .dpsc-bottom-next{ right: 0; }

.dpsc--bars .dpsc-bottom-arrow::before{
  content:"";
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:0; height:0;
  border-style: solid;
}
.dpsc--bars .dpsc-bottom-prev::before{
  left:0;
  border-width: calc(var(--chev-bar, 18px) / 2) calc(var(--chev-bar, 18px)) calc(var(--chev-bar, 18px) / 2) 0;
  border-color: transparent var(--nav-color, #444) transparent transparent;
}
.dpsc--bars .dpsc-bottom-next::before{
  right:0;
  border-width: calc(var(--chev-bar, 18px) / 2) 0 calc(var(--chev-bar, 18px) / 2) calc(var(--chev-bar, 18px));
  border-color: transparent transparent transparent var(--nav-color, #444);
}

.dpsc--bars .dpsc-bars{
  position: absolute;
  left: var(--bottom-arrow-w, 40px);
  right: var(--bottom-arrow-w, 40px);
  top: 0; bottom: 0;
  display: flex; gap: 6px;
  align-items: center; justify-content: center;
}
.dpsc--bars .dpsc-bar{
  width: var(--bar-w, calc(var(--bar-h, 32px) * 0.25));
  height: calc(var(--bar-h, 32px) * 0.4);
  background: var(--nav-color, #444);
  opacity: .45; border-radius: 2px;
  cursor: pointer; transition: opacity .15s ease;
}
.dpsc--bars .dpsc-bar.active{ opacity: 1; }

/* Reserve image spacing in bars mode: bar-h + gutter */
.dpsc--bars{
  --pad-left: var(--pad, 10px);
  --pad-right: var(--pad, 10px);
  --pad-bottom: calc(var(--bar-h, 32px) + var(--gutter, 10px));
}

/* Zoom overlay */
.dpsc-zoom{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  display: none;
  align-items: center; justify-content: center;
  z-index: 99999;
  cursor: zoom-out;
}
.dpsc-zoom.active{ display: flex; }
.dpsc-zoom img{
  max-width: 95vw; max-height: 95vh;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}

.dpsc-warn{
  padding:8px 10px; background:#fff3cd; border:1px solid #ffeeba; color:#856404; border-radius:4px;
}


/* v1.2.3 — When there is no navigation (single image), do not reserve space for side/bottom controls */
.dpsc.dpsc--no-nav{
  --pad-left: var(--pad, 10px) !important;
  --pad-right: var(--pad, 10px) !important;
  --pad-bottom: var(--pad, 10px) !important;
}