/* Scoped styles to .ibg-wrap to avoid conflicts */
.ibg-wrap{--ibg-primary:#111827;--ibg-secondary:#D1D5DB;--ibg-caption:#fff;--ibg-thumb-border:2px;--ibg-h-size:20px;--ibg-c-size:14px}
.ibg-wrap{font-family:inherit; position:relative; width:100%; box-sizing:border-box}
.ibg-wrap *{box-sizing:border-box}
.ibg-main{position:relative; width:100%; overflow:hidden; border-radius:8px}
.ibg-main-img{display:block; width:100%; height:auto; object-fit:cover}
.ibg-caption{position:absolute; padding:10px 12px; background:var(--ibg-primary); color:var(--ibg-caption); border-radius:6px; max-width:90%; line-height:1.35}
.ibg-caption .ibg-h{display:block; font-weight:600; font-size:var(--ibg-h-size); margin-bottom:4px}
.ibg-caption .ibg-c{display:block; font-size:var(--ibg-c-size)}
.ibg-pos-top-left{top:12px; left:12px}
.ibg-pos-top-right{top:12px; right:12px}
.ibg-pos-bottom-left{bottom:12px; left:12px}
.ibg-pos-bottom-right{bottom:12px; right:12px}
.ibg-pos-center-top{left:50%; transform:translateX(-50%); top:12px}
.ibg-pos-center-center{left:50%; top:50%; transform:translate(-50%,-50%)}
.ibg-pos-center-bottom{left:50%; transform:translateX(-50%); bottom:12px}

.ibg-thumbs{display:flex; align-items:center; gap:8px; margin-top:10px}
.ibg-thumbs .ibg-strip{display:flex; gap:8px; overflow:auto; scroll-behavior:smooth; scrollbar-width:thin; padding:2px}
.ibg-thumbs .ibg-thumb{border:3px solid var(--ibg-secondary); padding:0; background:#fff; border-radius:6px; cursor:pointer; line-height:0; transition:transform .15s}
.ibg-thumbs .ibg-thumb img{display:block; width:80px; height:60px; object-fit:cover; border-radius:4px}
.ibg-thumbs .ibg-thumb.active{border-color:var(--ibg-primary); transform:scale(1.02)}
.ibg-arrow{border:none; background:var(--ibg-primary); color:#fff; width:60px; height:60px; padding: 5px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center}
.ibg-arrow:disabled{opacity:.5; cursor:not-allowed}

/* Layout variations */
.ibg-thumbs-left, .ibg-thumbs-right{display:grid; grid-template-columns:160px 1fr; gap:12px}
.ibg-thumbs-right{grid-template-columns:1fr 160px}
.ibg-thumbs-left .ibg-main, .ibg-thumbs-right .ibg-main{order:2}
.ibg-thumbs-right .ibg-main{order:1}
.ibg-thumbs-left .ibg-thumbs, .ibg-thumbs-right .ibg-thumbs{flex-direction:column; margin-top:0}
.ibg-thumbs-left .ibg-strip, .ibg-thumbs-right .ibg-strip{flex-direction:column; max-height:420px}
.ibg-thumbs-left .ibg-thumb img, .ibg-thumbs-right .ibg-thumb img{width:120px; height:90px}

/* Arrow placement modifiers */
.ibg-arrows-center .ibg-arrow{align-self:center}
.ibg-arrows-top-right .ibg-thumbs{justify-content:flex-end}
.ibg-arrows-bottom-right .ibg-thumbs{justify-content:flex-end}

/* custom css */
.ibg-arrow-section ul li{display: inline-block !important;}
button.ibg-arrow.ibg-prev svg {transform: rotate(180deg) !important;}
@media (max-width: 640px){
  .ibg-thumbs-left, .ibg-thumbs-right{grid-template-columns:1fr}
  .ibg-thumbs-left .ibg-thumbs, .ibg-thumbs-right .ibg-thumbs{flex-direction:row}
  .ibg-thumbs-left .ibg-strip, .ibg-thumbs-right .ibg-strip{flex-direction:row; max-height:none}
  .ibg-thumbs-left .ibg-thumb img, .ibg-thumbs-right .ibg-thumb img{width:80px; height:60px}
}