:root {}

/* Overlay a schermo intero */
.ncpg-lb-overlay{
  position:fixed; inset:0; z-index:999999;
  background:rgba(0,0,0,.92);
  display:none;
}

/* Variabili di layout responsive */
.ncpg-lb-overlay{
  --pad-v:min(5vh,48px);
  --pad-h:min(5vw,48px);
  --toolbar-h:64px;            /* altezza riservata per la toolbar */
}

/* Contenitore */
.ncpg-lb-inner{
  position:absolute; inset:0;
  padding:var(--pad-v) var(--pad-h);
  box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
}

/* Area immagine: riserva spazio alla toolbar in basso */
.ncpg-lb-stage{
  position:relative;
  width:100%;
  height:calc(100% - var(--toolbar-h));
  display:block;
}

/* BOX immagine: riempie lo stage */
.ncpg-lb-img{
  width:100%;
  height:100%;
  object-fit:contain;          /* 🔑 adatta sempre al viewport */
  display:block;
  border-radius:6px;
  image-rendering:auto;
}

/* Frecce e chiudi: ancorate ai bordi del viewport */
.ncpg-lb-btn,.ncpg-lb-close{
  position:absolute;
  z-index:2;
  background:rgba(255,255,255,.16);
  color:#fff; border:0; border-radius:999px;
  width:44px; height:44px; display:grid; place-items:center;
  cursor:pointer; line-height:1; backdrop-filter:blur(2px);
}
.ncpg-lb-btn:hover,.ncpg-lb-close:hover{ background:rgba(255,255,255,.24); }

.ncpg-lb-prev{ left:clamp(8px,2vw,24px); top:50%; transform:translateY(-50%); }
.ncpg-lb-next{ right:clamp(8px,2vw,24px); top:50%; transform:translateY(-50%); }
.ncpg-lb-close{ top:clamp(8px,2vh,24px); right:clamp(8px,2vw,24px); font-size:18px; }

/* Toolbar in basso (fuori dallo stage, non copre l’immagine) */
.ncpg-lb-toolbar{
  position:absolute; left:0; right:0;
  bottom:clamp(8px,2vh,24px);
  display:flex; gap:12px; align-items:center; justify-content:center;
  color:#fff; font-size:14px;
  pointer-events:none;
}
.ncpg-lb-toolbar > *{ pointer-events:auto; }

.ncpg-lb-tbtn{
  background:rgba(255,255,255,.16);
  border:0; color:#fff; border-radius:999px;
  padding:10px 14px; cursor:pointer;
}
.ncpg-lb-tbtn:hover{ background:rgba(255,255,255,.24); }

.ncpg-lb-counter{
  padding:8px 12px; background:rgba(255,255,255,.12); border-radius:999px;
}

/* Stato aperto */
.ncpg-lb-overlay.is-open{ display:block; }

/* Mobile: target più grande e toolbar più compatta */
@media (max-width:640px){
  .ncpg-lb-overlay{ --toolbar-h:56px; }
  .ncpg-lb-btn,.ncpg-lb-close{ width:48px; height:48px; }
}