/* ==========================================================================
   LightGallery – Themeable CSS (Light + Dark)
   Compatible selectors: .lg-outer .lg-backdrop .lg-inner .lg-item .lg-img-wrap
   .lg-toolbar .lg-close .lg-download .lg-fullscreen .lg-zoom-in .lg-zoom-out
   .lg-actual-size .lg-prev .lg-next .lg-counter .lg-progress-bar
   .lg-sub-html .lg-thumb-outer .lg-thumb .lg-thumb-item .lg-toogle-thumb
   ========================================================================== */

/* ---------- Color system & tokens ---------- */
:root {
    /* Surfaces & text */
    --lg-surface: #ffffff;
    --lg-surface-2: #f7f8fa;
    --lg-backdrop: rgba(10, 14, 22, 0.92);
    --lg-text: #0b1020;
    --lg-text-subtle: #4a5164;
    --lg-border: rgba(15, 19, 28, 0.12);
  
    /* Controls */
    --lg-ctrl-bg: rgba(255, 255, 255, 0.88);
    --lg-ctrl-bg-hover: rgba(255, 255, 255, 1);
    --lg-ctrl-icon: #0b1020;
    --lg-ctrl-border: rgba(11, 16, 32, 0.08);
    --lg-ctrl-shadow: 0 4px 16px rgba(13, 20, 38, 0.16);
  
    /* Accent (brand-ish blue from markup) */
    --lg-accent: #2938c4;
  
    /* Thumbs / progress / active states */
    --lg-thumb-bg: rgba(0, 0, 0, 0.35);
    --lg-thumb-border: rgba(255, 255, 255, 0.35);
    --lg-thumb-active: #ffffff;
    --lg-progress-track: rgba(255, 255, 255, 0.28);
    --lg-progress-fill: var(--lg-accent);
  
    /* Radius & sizes */
    --lg-radius: 14px;
    --lg-radius-sm: 10px;
    --lg-spacing: 12px;
    --lg-toolbar-h: 56px;
    --lg-thumb-h: 90px;
  
    /* Transitions */
    --lg-tr-fast: 150ms ease;
    --lg-tr: 240ms cubic-bezier(.2,.7,.2,1);
  }
  
  /* Dark scheme (auto) */
  @media (prefers-color-scheme: dark) {
    :root {
      --lg-surface: #0c1020;
      --lg-surface-2: #0f1428;
      --lg-backdrop: rgba(0, 0, 0, 0.96);
      --lg-text: #e9edf7;
      --lg-text-subtle: #b5bed6;
      --lg-border: rgba(255, 255, 255, 0.08);
  
      --lg-ctrl-bg: rgba(20, 26, 45, 0.75);
      --lg-ctrl-bg-hover: rgba(23, 30, 52, 0.9);
      --lg-ctrl-icon: #e9edf7;
      --lg-ctrl-border: rgba(255, 255, 255, 0.06);
      --lg-ctrl-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  
      --lg-thumb-bg: rgba(255, 255, 255, 0.08);
      --lg-thumb-border: rgba(255, 255, 255, 0.18);
      --lg-thumb-active: #ffffff;
  
      --lg-progress-track: rgba(255, 255, 255, 0.2);
    }
  }
  
  /* Manual theme overrides */
  html[data-theme="dark"], body.theme-dark {
    --lg-surface: #0c1020;
    --lg-surface-2: #0f1428;
    --lg-backdrop: rgba(0, 0, 0, 0.96);
    --lg-text: #e9edf7;
    --lg-text-subtle: #b5bed6;
    --lg-border: rgba(255, 255, 255, 0.08);
  
    --lg-ctrl-bg: rgba(20, 26, 45, 0.75);
    --lg-ctrl-bg-hover: rgba(23, 30, 52, 0.9);
    --lg-ctrl-icon: #e9edf7;
    --lg-ctrl-border: rgba(255, 255, 255, 0.06);
    --lg-ctrl-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  
    --lg-thumb-bg: rgba(255, 255, 255, 0.08);
    --lg-thumb-border: rgba(255, 255, 255, 0.18);
    --lg-thumb-active: #ffffff;
  
    --lg-progress-track: rgba(255, 255, 255, 0.2);
  }
  
  html[data-theme="light"], body.theme-light {
    /* keep default :root (light) */
  }
  
  /* ---------- Base layout ---------- */
  .lg-backdrop {
    position: fixed;
    inset: 0;
    background: var(--lg-backdrop);
    opacity: 0;
    transition: opacity var(--lg-tr);
    will-change: opacity;
    z-index: 9998;
  }
  
  .lg-outer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    color: var(--lg-text);
    -webkit-tap-highlight-color: transparent;
  }
  
  .lg-outer.lg-visible {
    opacity: 1;
    pointer-events: auto;
  }
  
  .lg-inner {
    position: absolute;
    inset: 0;
    /* space for toolbar */
    padding-top: var(--lg-toolbar-h);
  }
  
  .lg-item,
  .lg-img-wrap {
    position: absolute;
    inset: 0;
  }
  
  .lg-object {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100%;
    max-height: calc(100% - var(--lg-toolbar-h) - var(--lg-thumb-h) - 24px);
    transform: translate(-50%, -50%);
    border-radius: var(--lg-radius);
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
    object-fit: contain;
    background: #000; /* helps avoid white flash while loading */
  }
  
  /* ---------- Toolbar ---------- */
  .lg-toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--lg-toolbar-h);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0));
    pointer-events: none; /* buttons will reset */
  }
  
  .lg-toolbar .lg-icon,
  .lg-prev, .lg-next {
    pointer-events: auto;
  }
  
  /* Counter (left) */
  .lg-counter {
    margin-left: 8px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1;
    color: var(--lg-text);
    background: var(--lg-ctrl-bg);
    border: 1px solid var(--lg-ctrl-border);
    border-radius: var(--lg-radius-sm);
    box-shadow: var(--lg-ctrl-shadow);
  }
  
  /* ---------- Control buttons (icon masks) ---------- */
  .lg-icon,
  .lg-prev,
  .lg-next {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--lg-ctrl-bg);
    border: 1px solid var(--lg-ctrl-border);
    box-shadow: var(--lg-ctrl-shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--lg-tr-fast), transform var(--lg-tr-fast), border-color var(--lg-tr-fast), opacity var(--lg-tr-fast);
    cursor: pointer;
  }
  
  .lg-icon:hover,
  .lg-prev:hover,
  .lg-next:hover {
    background: var(--lg-ctrl-bg-hover);
    border-color: color-mix(in oklab, var(--lg-ctrl-border), var(--lg-accent) 20%);
    transform: translateY(-1px);
  }
  
  .lg-icon:active,
  .lg-prev:active,
  .lg-next:active {
    transform: translateY(0);
  }
  
  /* Visually hidden label support (if any text present) */
  .lg-icon,
  .lg-prev,
  .lg-next {
    color: transparent;
    text-indent: -9999px;
    overflow: hidden;
  }
  
  /* Generic icon renderer */
  .lg-icon::before,
  .lg-prev::before,
  .lg-next::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background: var(--lg-ctrl-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 22px 22px;
    mask-size: 22px 22px;
  }
  
  /* Icons (SVG data URIs) */
  :root {
    --lg-ico-close: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path fill='%23000' d='M6.4 4.98 12 10.6l5.6-5.62 1.4 1.4L13.4 12l5.6 5.6-1.4 1.42L12 13.4l-5.6 5.6-1.4-1.4L10.6 12 5 6.4z'/></svg>");
    --lg-ico-download: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path fill='%23000' d='M5 20h14v-2H5v2zm7-16v9.17l3.59-3.58L17 11l-5 5-5-5 1.41-1.41L11 13.17V4h2z'/></svg>");
    --lg-ico-full: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path fill='%23000' d='M7 14H5v5h5v-2H7v-3zm12 5h-5v-2h3v-3h2v5zM7 7h3V5H5v5h2V7zm12 0v3h-3v2h5V5h-2v2z'/></svg>");
    --lg-ico-zoom-in: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path fill='%23000' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/><path fill='%23000' d='M10 8V7H9v1H8v1h1v1h1V9h1V8z'/></svg>");
    --lg-ico-zoom-out: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path fill='%23000' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zM9.5 14C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/><path fill='%23000' d='M7.5 9h4v1h-4z'/></svg>");
    --lg-ico-actual: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path fill='%23000' d='M21 3H3v18h18V3zM5 5h14v14H5V5zm6 3H8v6h3v2l4-5-4-5v2z'/></svg>");
    --lg-ico-prev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path fill='%23000' d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/></svg>");
    --lg-ico-next: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path fill='%23000' d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/></svg>");
    --lg-ico-play: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path fill='%23000' d='M8 5v14l11-7z'/></svg>");
    --lg-ico-pause: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path fill='%23000' d='M6 5h4v14H6zM14 5h4v14h-4z'/></svg>");
  }
  
  /* Ensure icon color respects theme (re-color mask) */
  .lg-icon::before,
  .lg-prev::before,
  .lg-next::before {
    background: var(--lg-ctrl-icon);
  }
  
  /* Specific buttons (LightGallery class names) */
  .lg-close::before { -webkit-mask-image: var(--lg-ico-close); mask-image: var(--lg-ico-close); }
  .lg-download::before { -webkit-mask-image: var(--lg-ico-download); mask-image: var(--lg-ico-download); }
  .lg-fullscreen::before { -webkit-mask-image: var(--lg-ico-full); mask-image: var(--lg-ico-full); }
  .lg-zoom-in::before { -webkit-mask-image: var(--lg-ico-zoom-in); mask-image: var(--lg-ico-zoom-in); }
  .lg-zoom-out::before { -webkit-mask-image: var(--lg-ico-zoom-out); mask-image: var(--lg-ico-zoom-out); }
  .lg-actual-size::before { -webkit-mask-image: var(--lg-ico-actual); mask-image: var(--lg-ico-actual); }
  .lg-autoplay-button::before { -webkit-mask-image: var(--lg-ico-play); mask-image: var(--lg-ico-play); }
  .lg-autoplay-button.lg-on::before { -webkit-mask-image: var(--lg-ico-pause); mask-image: var(--lg-ico-pause); }
  
  .lg-prev::before { -webkit-mask-image: var(--lg-ico-prev); mask-image: var(--lg-ico-prev); }
  .lg-next::before { -webkit-mask-image: var(--lg-ico-next); mask-image: var(--lg-ico-next); }
  
  /* Prev/Next positioning */
  .lg-prev,
  .lg-next {
    position: absolute;
    top: calc(50% + 12px);
    transform: translateY(-50%);
  }
  
  .lg-prev { left: 12px; }
  .lg-next { right: 12px; }
  
  /* ---------- Progress bar (top) ---------- */
  .lg-progress-bar {
    position: absolute;
    left: 0; right: 0; top: var(--lg-toolbar-h);
    height: 3px;
    background: var(--lg-progress-track);
    overflow: hidden;
  }
  .lg-progress-bar .lg-progress {
    height: 100%;
    width: 0%;
    background: var(--lg-progress-fill);
    transition: width linear;
  }
  
  /* ---------- Sub HTML (caption) ---------- */
  .lg-sub-html {
    position: absolute;
    left: 0; right: 0; bottom: calc(var(--lg-thumb-h) + 8px);
    margin: 0 auto;
    max-width: min(960px, 92vw);
    padding: 10px 14px;
    color: var(--lg-text);
    background: var(--lg-ctrl-bg);
    border: 1px solid var(--lg-ctrl-border);
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-ctrl-shadow);
    font-size: 14px;
    line-height: 1.45;
  }
  
  /* ---------- Thumbnails ---------- */
  .lg-thumb-outer {
    position: absolute;
    left: 0; right: 0; bottom: 8px;
    height: var(--lg-thumb-h);
    display: grid;
    place-items: center;
    pointer-events: none;
  }
  
  .lg-thumb {
    pointer-events: auto;
    display: flex;
    gap: 8px;
    padding: 8px;
    background: var(--lg-thumb-bg);
    border: 1px solid var(--lg-thumb-border);
    border-radius: var(--lg-radius);
    backdrop-filter: blur(6px);
    max-width: min(100%, 1080px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .lg-thumb-item {
    position: relative;
    flex: 0 0 auto;
    width: 120px;
    height: calc(var(--lg-thumb-h) - 24px);
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    border: 1px solid transparent;
    opacity: .75;
    transition: transform var(--lg-tr-fast), opacity var(--lg-tr-fast), border-color var(--lg-tr-fast);
  }
  
  .lg-thumb-item img,
  .lg-thumb-item .lg-thumb-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .lg-thumb-item:hover {
    opacity: .95;
    transform: translateY(-2px);
  }
  
  .lg-thumb-item.active,
  .lg-thumb-item.lg-active {
    opacity: 1;
    border-color: var(--lg-thumb-active);
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
  }
  
  /* Toggle thumbs button (if used by plugin) */
  .lg-toogle-thumb, .lg-toggle-thumb {
    position: absolute;
    bottom: calc(var(--lg-thumb-h) + 16px);
    right: 16px;
  }
  
  /* ---------- States & helpers ---------- */
  .lg-hide-items .lg-toolbar,
  .lg-hide-items .lg-prev,
  .lg-hide-items .lg-next,
  .lg-hide-items .lg-sub-html,
  .lg-hide-items .lg-thumb-outer {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--lg-tr);
  }
  
  .lg-current .lg-object {
    animation: lgFadeIn var(--lg-tr);
  }
  
  @keyframes lgFadeIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.985); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  
  /* ---------- Responsive ---------- */
  @media (max-width: 1024px) {
    :root { --lg-toolbar-h: 54px; --lg-thumb-h: 84px; }
    .lg-thumb-item { width: 108px; }
    .lg-icon, .lg-prev, .lg-next { width: 38px; height: 38px; }
  }
  
  @media (max-width: 768px) {
    :root { --lg-toolbar-h: 52px; --lg-thumb-h: 78px; }
    .lg-sub-html { font-size: 13px; padding: 9px 12px; }
    .lg-thumb-item { width: 96px; }
  }
  
  @media (max-width: 560px) {
    .lg-sub-html { display: none; }
    .lg-thumb-outer { height: 72px; }
    .lg-thumb-item { width: 86px; }
    .lg-counter { display: none; }
  }
  
  @media (max-width: 420px) {
    .lg-thumb-outer { display: none; }
    .lg-object { max-height: calc(100% - var(--lg-toolbar-h) - 16px); }
  }
  
  /* ---------- Reduced motion & accessibility ---------- */
  @media (prefers-reduced-motion: reduce) {
    .lg-backdrop,
    .lg-outer,
    .lg-object,
    .lg-icon,
    .lg-prev, .lg-next,
    .lg-thumb-item,
    .lg-progress-bar .lg-progress {
      transition: none !important;
      animation: none !important;
    }
  }
  
  .lg-outer :focus-visible {
    outline: 2px solid var(--lg-accent);
    outline-offset: 2px;
    border-radius: 10px;
  }
  
  /* ---------- Z-index layering ---------- */
  .lg-backdrop { z-index: 10000; }
  .lg-outer { z-index: 10001; }
  .lg-toolbar { z-index: 10002; }
  .lg-prev, .lg-next { z-index: 10002; }
  .lg-sub-html, .lg-thumb-outer { z-index: 10002; }
  
  /* ---------- Misc plugin hooks (safe no-ops if unused) ---------- */
  .lg-pager, .lg-pager-thumb-cont { display: none; }
  .lg-actions { display: contents; }