/* ==========================================================================
   LightGallery Thumbnail Plugin
   File: /Content/lg-thumbnail.css
   Works with LightGallery v1/v2 (class names umum)
   ========================================================================== */

/* ---- Theme tokens ------------------------------------------------------- */
:root{
    --lg-thumb-bg: rgba(15,23,42,.86);        /* panel background */
    --lg-thumb-border: rgba(148,163,184,.25); /* garis pemisah/panel */
    --lg-thumb-item-bg: #0b1220;              /* fallback bg item */
    --lg-thumb-radius: 8px;
    --lg-thumb-gap: 8px;                      /* jarak antar thumb */
    --lg-thumb-height: 96px;                  /* tinggi panel horizontal */
    --lg-thumb-width: 120px;                  /* lebar panel vertikal */
    --lg-thumb-active: #3b82f6;               /* ring aktif */
    --lg-thumb-focus: #94c0ff;                /* focus outline */
    --lg-thumb-shadow: 0 2px 10px rgba(2,6,23,.18);
    --lg-thumb-overlay: rgba(2,6,23,.18);
  }
  
  html[data-theme="dark"], body.theme-dark{
    --lg-thumb-bg: rgba(2,6,23,.86);
    --lg-thumb-border: rgba(255,255,255,.08);
    --lg-thumb-item-bg: #0b1220;
    --lg-thumb-active: #7db0ff;
    --lg-thumb-focus: #7db0ff;
    --lg-thumb-shadow: 0 2px 12px rgba(0,0,0,.45);
    --lg-thumb-overlay: rgba(255,255,255,.10);
  }
  
  /* ---- Container (bottom horizontal – default) --------------------------- */
  .lg-outer .lg-thumb-outer,
  .lg-components .lg-thumb-outer{
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    height: var(--lg-thumb-height);
    background: var(--lg-thumb-bg);
    border-top: 1px solid var(--lg-thumb-border);
    display: none;                  /* akan di-show oleh plugin */
    z-index: 1080;                  /* di atas caption */
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-x;
    backdrop-filter: blur(4px);
  }
  
  .lg-outer.lg-has-thumb .lg-thumb-outer,
  .lg-outer.lg-gallery .lg-thumb-outer,
  .lg-show-thumb .lg-thumb-outer{
    display: block;
  }
  
  /* ---- Vertical variant (kiri/kanan) ------------------------------------- */
  .lg-thumb-outer.lg-thumb-vertical,
  .lg-outer.lg-vertical .lg-thumb-outer{
    top: 0; bottom: 0;
    width: var(--lg-thumb-width);
    height: auto;
    border-top: 0;
    border-right: 1px solid var(--lg-thumb-border);
    touch-action: pan-y;
  }
  
  .lg-thumb-outer.lg-thumb-right{
    left: auto; right: 0;
    border-right: 0;
    border-left: 1px solid var(--lg-thumb-border);
  }
  
  /* ---- Track / scroller --------------------------------------------------- */
  .lg-thumb-outer .lg-thumb{
    position: relative;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: var(--lg-thumb-border) transparent;
    padding: 8px;                        /* ruang sisi */
    gap: var(--lg-thumb-gap);
    display: inline-flex;
    align-items: center;
  }
  
  .lg-thumb-outer.lg-thumb-vertical .lg-thumb{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    flex-direction: column;
    align-items: stretch;
  }
  
  /* WebKit scrollbar */
  .lg-thumb::-webkit-scrollbar{ height: 8px; width: 8px; }
  .lg-thumb::-webkit-scrollbar-track{ background: transparent; }
  .lg-thumb::-webkit-scrollbar-thumb{
    background: var(--lg-thumb-border);
    border-radius: 999px;
  }
  
  /* ---- Item --------------------------------------------------------------- */
  .lg-thumb-outer .lg-thumb-item{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lg-thumb-item-bg);
    border-radius: var(--lg-thumb-radius);
    box-shadow: var(--lg-thumb-shadow);
    overflow: hidden;
    margin-right: var(--lg-thumb-gap);
    outline: none;
    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
    /* ukuran default (plugin dapat override via style inline) */
    width: 120px;
    height: calc(var(--lg-thumb-height) - 16px);
  }
  
  .lg-thumb-outer.lg-thumb-vertical .lg-thumb-item{
    width: calc(var(--lg-thumb-width) - 16px);
    height: 80px;
    margin: 0 0 var(--lg-thumb-gap) 0;
  }
  
  .lg-thumb-outer .lg-thumb-item:last-child{ margin-right: 0; }
  
  /* Gambar di dalam thumb */
  .lg-thumb-outer .lg-thumb-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    display: block;
    transform: translateZ(0);
  }
  
  /* Hover / Active / Focus */
  .lg-thumb-outer .lg-thumb-item:hover::after{
    content:"";
    position:absolute; inset:0;
    background: var(--lg-thumb-overlay);
  }
  
  .lg-thumb-outer .lg-thumb-item.active{
    box-shadow: 0 0 0 2px var(--lg-thumb-active) inset, var(--lg-thumb-shadow);
  }
  
  .lg-thumb-outer .lg-thumb-item:focus-visible{
    outline: 2px solid var(--lg-thumb-focus);
    outline-offset: 2px;
  }
  
  /* Sedikit scale saat hover */
  .lg-thumb-outer .lg-thumb-item:hover{
    transform: translateY(-2px);
  }
  
  /* Disabled state (saat belum load) */
  .lg-thumb-outer .lg-thumb-item.is-loading{
    opacity: .6;
  }
  
  /* ---- Grab/drag cursor --------------------------------------------------- */
  .lg-outer.lg-grab .lg-thumb-outer .lg-thumb{ cursor: grab; }
  .lg-outer.lg-grabbing .lg-thumb-outer .lg-thumb{ cursor: grabbing; }
  
  /* ---- Arrows (opsional – beberapa versi plugin punya) ------------------- */
  .lg-thumb-outer .lg-thumb-left,
  .lg-thumb-outer .lg-thumb-right{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    border-radius: 999px;
    background: rgba(0,0,0,.35);
    color: #fff;
    border: 1px solid var(--lg-thumb-border);
    display: grid; place-items: center;
    cursor: pointer;
    z-index: 2;
    backdrop-filter: blur(2px);
  }
  .lg-thumb-outer .lg-thumb-left{ left: 8px; }
  .lg-thumb-outer .lg-thumb-right{ right: 8px; }
  .lg-thumb-outer .lg-thumb-left:hover,
  .lg-thumb-outer .lg-thumb-right:hover{ filter: brightness(1.1); }
  
  /* Vertical arrows */
  .lg-thumb-outer.lg-thumb-vertical .lg-thumb-left,
  .lg-thumb-outer.lg-thumb-vertical .lg-thumb-right{
    left: 50%; transform: translateX(-50%);
    top: auto;
    width: 32px; height: 32px;
  }
  .lg-thumb-outer.lg-thumb-vertical .lg-thumb-left{ top: 8px; }
  .lg-thumb-outer.lg-thumb-vertical .lg-thumb-right{ bottom: 8px; }
  
  /* ---- With caption area -------------------------------------------------- */
  .lg-outer.lg-pull-caption-up.lg-has-thumb .lg-sub-html{
    bottom: var(--lg-thumb-height);
  }
  .lg-outer.lg-vertical.lg-has-thumb .lg-sub-html{
    left: var(--lg-thumb-width);
  }
  
  /* ---- Space for stage (hindari overlap) --------------------------------- */
  .lg-outer.lg-has-thumb .lg-inner{
    bottom: var(--lg-thumb-height);
  }
  .lg-outer.lg-vertical.lg-has-thumb .lg-inner{
    left: var(--lg-thumb-width);
  }
  
  /* ---- RTL --------------------------------------------------------------- */
  [dir="rtl"] .lg-thumb-outer .lg-thumb{
    direction: rtl;
  }
  [dir="rtl"] .lg-thumb-outer .lg-thumb-item{
    margin-left: var(--lg-thumb-gap);
    margin-right: 0;
  }
  [dir="rtl"] .lg-thumb-outer .lg-thumb-left{ right: 8px; left: auto; }
  [dir="rtl"] .lg-thumb-outer .lg-thumb-right{ left: 8px; right: auto; }
  
  /* ---- Reduced motion ----------------------------------------------------- */
  @media (prefers-reduced-motion: reduce){
    .lg-thumb-outer .lg-thumb-item{ transition: none !important; }
  }
  
  /* ---- Small screens tweak ----------------------------------------------- */
  @media (max-width: 520px){
    :root{ --lg-thumb-height: 76px; }
    .lg-thumb-outer .lg-thumb-item{
      height: calc(var(--lg-thumb-height) - 14px);
      width: 92px;
    }
  }