/* =========================================================
   ShineUp Lightbox (FB-like, clean) + ZOOM/PAN
   - black backdrop
   - close / prev / next
   - date label
   - image fits viewport
   - zoom: buttons + pinch + double tap + pan
   ========================================================= */

.su-lb{
  position:fixed;
  inset:0;
  display:none;
  background:rgba(0,0,0,.92);
  touch-action:none;              /* JS kontroluje gesty */
  z-index:2147483647;
}

.su-lb.is-open{ display:block; }

/* click outside closes */
.su-lb__backdrop{
  position:absolute;
  inset:0;
  z-index:0;
}

/* =========================================================
   TOP BAR
   ========================================================= */
.su-lb__top{
  position:absolute;
  z-index:5;
  left:0; right:0; top:0;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
  background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
  pointer-events:auto;
}

.su-lb__left,
.su-lb__right{
  display:flex;
  align-items:center;
  gap:8px;
  pointer-events:auto;
}

.su-lb__date{
  font-size:12px;
  color:rgba(255,255,255,.78);
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  user-select:none;
}

/* buttons */
.su-lb__btn{
  position:relative;
  z-index:1;
  width:40px;
  height:40px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.96) !important;
  color:#151515 !important;
  border:1px solid #fff !important;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  pointer-events:auto !important;
  opacity:1 !important;
  box-shadow:0 4px 16px rgba(0,0,0,.42), inset 0 0 0 1px rgba(0,0,0,.2);
  transition:color .16s ease,background .16s ease,border-color .16s ease,transform .12s ease;
}

.su-lb__btn:hover{
  color:#101316 !important;
  background:var(--gold,#e9c889) !important;
  border-color:var(--gold-bright,#f3dcae) !important;
}
.su-lb__btn:active{ transform:scale(.96); }
.su-lb__btn:focus{ outline:none; box-shadow:0 0 0 2px color-mix(in srgb,var(--gold,#e9c889) 28%,transparent); }

.su-lb__btn svg{
  width:20px; height:20px;
  fill:currentColor;
}

/* =========================================================
   STAGE
   ========================================================= */
.su-lb__stage{
  position:absolute;
  z-index:1;
  inset:52px 0 0 0;              /* top bar height */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px 14px;

  overflow:hidden;                /* ważne dla pan/zoom */
  -webkit-overflow-scrolling:auto;

  /* żeby tap/drag nie zaznaczał tła */
  user-select:none;
}

/* image */
.su-lb__img{
  max-width:100%;
  max-height:calc(100vh - 80px);
  object-fit:contain;
  border-radius:10px;
  background:rgba(255,255,255,.02);

  user-select:none;
  -webkit-user-drag:none;

  /* zoom/pan */
  touch-action:none;              /* pinch/pan kontroluje JS */
  cursor:grab;
  will-change:transform;
  transform:translate3d(0,0,0) scale(1);
}

/* when zoomed */
.su-lb.is-zoomed .su-lb__img{
  cursor:grabbing;
}

/* =========================================================
   NAV (FB-like side buttons)
   ========================================================= */
.su-lb__nav{
  position:absolute;
  z-index:4;
  top:52px;
  bottom:0;
  width:18%;
  min-width:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;            /* gesty idą na stage */
}

.su-lb__nav--prev{ left:0; }
.su-lb__nav--next{ right:0; }

.su-lb__navbtn{
  position:relative;
  z-index:8;
  pointer-events:auto !important;
  width:54px;
  height:54px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.92) !important;
  background:rgba(255,255,255,.96) !important;
  color:#17130d !important;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:1 !important;
  box-shadow:0 8px 28px rgba(0,0,0,.48),0 0 0 1px rgba(0,0,0,.14) inset;
  -webkit-tap-highlight-color:transparent;
  transition:color .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .12s ease;
}

.su-lb__navbtn svg{
  width:25px;
  height:25px;
  fill:currentColor;
}

.su-lb__navbtn:hover{
  color:#101316 !important;
  background:var(--gold,#e9c889) !important;
  border-color:var(--gold-bright,#f3dcae) !important;
  box-shadow:0 10px 32px rgba(0,0,0,.55),0 0 0 3px color-mix(in srgb,var(--gold,#e9c889) 20%,transparent);
}

.su-lb__navbtn:active{ transform:scale(.96); }
.su-lb__navbtn:focus-visible{ outline:3px solid var(--gold,#e9c889); outline-offset:3px; }

.su-lb__navbtn[disabled]{
  opacity:.58 !important;
  cursor:default;
  background:rgba(255,255,255,.82) !important;
  box-shadow:0 6px 20px rgba(0,0,0,.38);
}

/* kiedy zoom > 1, wyłącz “strefy” nawigacji (żeby pan był łatwiejszy)
   przyciski nadal działają, bo mają pointer-events:auto */
.su-lb.is-zoomed .su-lb__nav{
  width:12%;
}

/* =========================================================
   HINT (text overlay)
   ========================================================= */
.su-lb__hint{
  position:absolute;
  left:50%;
  top:70px;
  transform:translateX(-50%);
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  line-height:1.2;
  color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  pointer-events:none;
}

/* =========================================================
   BOTTOM COUNTER BADGE: "1 z 300"
   ========================================================= */
.su-lb__bottom{
  position:absolute;
  z-index:3;
  left:0; right:0; bottom:0;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
}

.su-lb__count{
  pointer-events:none;
  font-size:12px;
  color:rgba(255,255,255,.85);
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  user-select:none;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:700px){
  .su-lb__top{ height:50px; }
  .su-lb__stage{ inset:50px 0 0 0; }
  .su-lb__btn{ width:38px; height:38px; }
  /* Na telefonie zostają kontrolki obrazu i zamknięcie. Ukrywamy
     wyłącznie boczną nawigację galerii — zmianę zdjęcia obsługuje swipe. */
  .su-lb__right{
    display:flex !important;
    gap:6px;
  }
  .su-lb__right .su-lb__btn{
    display:flex !important;
    pointer-events:auto !important;
    opacity:1 !important;
  }
  .su-lb__nav{
    display:none !important;
    pointer-events:none !important;
  }
}

/* helper: używane w sidepanelu */
.conversMedia.no-snap{ scroll-snap-type:none !important; }