/* ==========================================================================
   LightGallery Zoom plugin CSS
   Works alongside /Content/lightgallery.css
   Theme-aware via :root tokens (light/dark)
   ========================================================================== */

/* Fallback tokens if lightgallery.css belum termuat (tidak menimpa kalau sudah ada) */
:root {
    --lg-accent: #2938c4;
    --lg-ctrl-bg: rgba(255,255,255,.88);
    --lg-ctrl-bg-hover: #fff;
    --lg-ctrl-icon: #0b1020;
    --lg-ctrl-border: rgba(11,16,32,.08);
    --lg-ctrl-shadow: 0 4px 16px rgba(13,20,38,.16);
    --lg-toolbar-h: 56px;
    --lg-tr-fast: 150ms ease;
  }
  
  /* ------------------------------------------------
     Zoom controls (icons already styled in lightgallery.css)
     ------------------------------------------------ */
  .lg-outer .lg-zoom-in,
  .lg-outer .lg-zoom-out,
  .lg-outer .lg-actual-size {
    /* Ensure visible and clickable */
    pointer-events: auto;
  }
  
  /* Disabled state (plugin menambah .lg-disabled) */
  .lg-outer .lg-zoom-in.lg-disabled,
  .lg-outer .lg-zoom-out.lg-disabled,
  .lg-outer .lg-actual-size.lg-disabled,
  .lg-outer .lg-zoom-in.disabled,
  .lg-outer .lg-zoom-out.disabled,
  .lg-outer .lg-actual-size.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(40%);
  }
  
  /* ------------------------------------------------
     Zoomable/zoomed states & cursors
     ------------------------------------------------ */
  .lg-outer .lg-img-wrap {
    /* biar drag mulus di perangkat sentuh/desktop */
    touch-action: none;
    -ms-touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
  }
  
  /* Saat gambar bisa di-zoom (plugin biasanya menambah class) */
  .lg-outer.lg-zoomable .lg-img-wrap,
  .lg-outer .lg-current .lg-img-wrap {
    cursor: zoom-in;
  }
  
  /* Setelah di-zoom */
  .lg-outer.lg-zoomed .lg-img-wrap,
  .lg-outer .lg-zoomed .lg-img-wrap,
  .lg-zoomed .lg-img-wrap {
    cursor: grab;
  }
  
  /* Saat drag */
  .lg-outer .lg-img-wrap.lg-grabbing,
  .lg-outer.lg-zoomed .lg-img-wrap.lg-grabbing {
    cursor: grabbing;
  }
  
  /* ------------------------------------------------
     Transition & performance untuk objek gambar
     ------------------------------------------------ */
  .lg-outer .lg-object {
    will-change: transform;
    transition: transform var(--lg-tr-fast);
    backface-visibility: hidden;
  }
  
  /* Saat zoom aktif, hilangkan transisi agar drag responsif */
  .lg-outer.lg-zoomed .lg-object,
  .lg-zoomed .lg-object {
    transition: none;
  }
  
  /* ------------------------------------------------
     Optional: indikator level zoom (kalau dipakai via JS)
     ------------------------------------------------ */
  .lg-zoom-level {
    position: absolute;
    top: calc(var(--lg-toolbar-h) + 8px);
    right: 10px;
    z-index: 10003;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1;
    background: var(--lg-ctrl-bg);
    color: var(--lg-ctrl-icon);
    border: 1px solid var(--lg-ctrl-border);
    border-radius: 999px;
    box-shadow: var(--lg-ctrl-shadow);
    pointer-events: none;
    opacity: .95;
  }
  
  /* ------------------------------------------------
     Buttons layout tweak (kalau toolbar padat)
     ------------------------------------------------ */
  .lg-toolbar .lg-zoom-in,
  .lg-toolbar .lg-zoom-out,
  .lg-toolbar .lg-actual-size {
    margin-left: 6px;
  }
  
  /* Hover feel selaras dengan tombol lain */
  .lg-toolbar .lg-zoom-in:hover,
  .lg-toolbar .lg-zoom-out:hover,
  .lg-toolbar .lg-actual-size:hover {
    background: var(--lg-ctrl-bg-hover);
    border-color: color-mix(in oklab, var(--lg-ctrl-border), var(--lg-accent) 20%);
  }
  
  /* ------------------------------------------------
     Reduced motion
     ------------------------------------------------ */
  @media (prefers-reduced-motion: reduce) {
    .lg-outer .lg-object { transition: none !important; }
  }
  
  /* ------------------------------------------------
     Dark theme manual override (jaga-jaga bila lightgallery.css belum ada)
     ------------------------------------------------ */
  html[data-theme="dark"], body.theme-dark {
    --lg-ctrl-bg: rgba(20,26,45,.75);
    --lg-ctrl-bg-hover: rgba(23,30,52,.9);
    --lg-ctrl-icon: #e9edf7;
    --lg-ctrl-border: rgba(255,255,255,.06);
    --lg-ctrl-shadow: 0 6px 18px rgba(0,0,0,.45);
  }