/* ====== Inline player di area gambar utama ====== */
#krpv-inline{
  margin:0 0 12px 0;
}
#krpv-inline video{
  width:100%;
  height:auto;
  display:block;
  background:#000;
}

/* ====== Layout thumbnail di blok “GALERIE:” ======
   Paksa 5 kolom seperti galeri lama (100x100 + gap 18px) */
#kundenbilder_gallery{
  display:grid !important;
  grid-template-columns: repeat(5, 80px);
  gap:2px;
  align-items:start;
  justify-content:start;
}

/* Ukuran konsisten untuk SEMUA item (gambar & video) */
#kundenbilder_gallery .woocommerce-product-gallery__image,
#kundenbilder_gallery .krpv-thumb{
  width:100px !important;
  height:100px !important;
  margin:0 !important;
}

#kundenbilder_gallery .woocommerce-product-gallery__image a{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:2px;
}

#kundenbilder_gallery .woocommerce-product-gallery__image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ====== Badge “play” di TENGAH untuk thumb video ====== */
.krpv-thumb a::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:0; height:0;
  border-left:16px solid #fff;           /* warna ikon */
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));
  pointer-events:none;
  opacity:.9;
}
.krpv-thumb a::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.10);
  opacity:0;
  transition:opacity .15s ease;
  pointer-events:none;
}


/* ====== Ikon zoom bawaan Woo agar tidak mengganggu ====== */
.woocommerce-product-gallery__trigger{ z-index:2; }

/* ====== Responsif (opsional) ======
   Atur turun kolom di layar kecil agar tidak overflow */
@media (max-width: 991px){
  #kundenbilder_gallery{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px){
  #kundenbilder_gallery{ grid-template-columns: repeat(3, 1fr); }
}


/* ===================== LIGHTBOX VIDEO CUSTOM ===================== */
.krpv-lb{ position:fixed; inset:0; background:rgba(0,0,0,var(--krpv-bgalpha,1)); z-index:999999; display:none; cursor:zoom-out; }
.krpv-lb__inner{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; touch-action:none; user-select:none; }
.krpv-lb__stage{ width:min(92vw,1100px); height:min(88vh,720px); display:flex; align-items:center; justify-content:center; pointer-events:none; }
.krpv-lb__stage img, .krpv-lb__stage video{ max-width:100%; max-height:100%; display:block; background:#000; pointer-events:auto; }

/* Counter kiri atas */
.krpv-lb__counter{
  position:absolute; left:16px; top:10px; color:rgba(255,255,255,.8);
  font:500 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  user-select:none; transition:opacity .2s ease;
}

/* Tombol – TANPA background. Hanya warna ikon yang berubah */
.krpv-lb__close, .krpv-lb__fs{
  position:absolute; top:10px; border:0; width:40px; height:40px;
  color:rgba(255,255,255,.72); display:flex; align-items:center; justify-content:center;
  cursor:pointer; background:transparent !important; transition:color .15s ease, opacity .2s ease;
  outline:none !important; box-shadow:none !important; -webkit-tap-highlight-color:transparent;
}
.krpv-lb__close{ right:16px; font-size:24px; line-height:1; }
.krpv-lb__fs{ right:64px; line-height:0; }
.krpv-lb__fs .material-icons{ font-size:24px; line-height:1; color:currentColor; font-feature-settings:"liga"; }

/* Panah navigasi — ikon saja */
.krpv-lb__nav{
  position:absolute; top:50%; width:100%; display:flex; justify-content:space-between;
  transform:translateY(-50%); pointer-events:none;
}
.krpv-lb__btn{
  pointer-events:auto; background:transparent !important; border:0; width:56px; height:56px;
  color:rgba(255,255,255,.72); font-size:78px; line-height:1; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:color .15s ease, transform .1s ease, opacity .2s ease;
  outline:none !important; box-shadow:none !important; -webkit-tap-highlight-color:transparent;
}
.krpv-lb__btn:hover, .krpv-lb__close:hover, .krpv-lb__fs:hover{ color:#fff; }
.krpv-lb__btn:active{ transform:scale(.98); }

/* Hilangkan outline fokus di semua tombol lightbox (desktop & mobile) */
.krpv-lb button:focus,
.krpv-lb button:focus-visible{ outline:none !important; box-shadow:none !important; }

/* Elemen kontrol tidak memakai cursor zoom-out */
.krpv-lb__stage, .krpv-lb__btn, .krpv-lb__close, .krpv-lb__fs{ cursor:auto; }

/* Swipe feedback */
.krpv-lb__stage.is-dragging{ transform:translateY(var(--krpv-dy,0)); transition:none; }

/* Auto-hide UI saat idle */
.krpv-lb.is-idle .krpv-lb__btn,
.krpv-lb.is-idle .krpv-lb__close,
.krpv-lb.is-idle .krpv-lb__fs,
.krpv-lb.is-idle .krpv-lb__counter{
  opacity:0; pointer-events:none;
}