/* ═══════════════════════════════════════════
   Bela Lightbox — Core component
   Works across all modules automatically.
   ═══════════════════════════════════════════ */

/* ─── Overlay ─── */
.bela-lb {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(10, 10, 8, 0);
    backdrop-filter: blur(0px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease, background .4s ease, backdrop-filter .4s ease;
}
.bela-lb.is-open {
    opacity: 1; pointer-events: auto;
    background: rgba(10, 10, 8, .92);
    backdrop-filter: blur(12px);
}

/* ─── Image container ─── */
.bela-lb__stage {
    position: relative;
    max-width: 92vw; max-height: 88vh;
    display: flex; align-items: center; justify-content: center;
    transform: scale(.92); opacity: 0;
    transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.bela-lb.is-open .bela-lb__stage {
    transform: scale(1); opacity: 1;
    transition-delay: .05s;
}

.bela-lb__img {
    max-width: 92vw; max-height: 88vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
    opacity: 0;
    transition: opacity .25s ease;
    user-select: none;
    -webkit-user-drag: none;
}
.bela-lb__img.is-loaded { opacity: 1; }

/* ─── Loading spinner ─── */
.bela-lb__loader {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
}
.bela-lb__spinner {
    width: 36px; height: 36px;
    border: 3px solid rgba(255,255,255,.15);
    border-top-color: rgba(255,255,255,.8);
    border-radius: 50%;
    animation: bela-lb-spin .7s linear infinite;
}
@keyframes bela-lb-spin { to { transform: rotate(360deg); } }
.bela-lb__img.is-loaded ~ .bela-lb__loader { display: none; }

/* ─── Controls ─── */
.bela-lb__close {
    position: absolute; top: 16px; right: 16px; z-index: 10;
    width: 44px; height: 44px;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    color: #fff; font-size: 20px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, transform .2s;
}
.bela-lb__close:hover { background: rgba(255,255,255,.2); transform: scale(1.1); }

.bela-lb__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
    width: 48px; height: 48px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    color: #fff; font-size: 22px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, transform .2s;
    opacity: .7;
}
.bela-lb__nav:hover { background: rgba(255,255,255,.2); opacity: 1; transform: translateY(-50%) scale(1.1); }
.bela-lb__prev { left: 16px; }
.bela-lb__next { right: 16px; }

/* ─── Counter + caption ─── */
.bela-lb__info {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
}
.bela-lb__counter {
    font-size: 13px; color: rgba(255,255,255,.6);
    font-family: var(--bela-font-mono, monospace);
    margin-bottom: 4px;
}
.bela-lb__caption {
    font-size: 14px; color: rgba(255,255,255,.85);
    max-width: 60vw;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ─── Single-image mode: hide nav + counter ─── */
.bela-lb--single .bela-lb__nav,
.bela-lb--single .bela-lb__counter { display: none; }

/* ─── Thumbnail grid enhancements (universal) ─── */
[data-bela-lightbox] {
    cursor: zoom-in;
}
[data-bela-lightbox] img {
    transition: transform .25s ease, opacity .3s ease;
}
[data-bela-lightbox]:hover img {
    transform: scale(1.04);
}

/* ─── Lazy load shimmer for thumbnails ─── */
.bela-img-loading {
    background: linear-gradient(90deg, var(--bela-bg-alt, #f0ece3) 25%, var(--bela-border, #e8e4dc) 50%, var(--bela-bg-alt, #f0ece3) 75%);
    background-size: 200% 100%;
    animation: bela-shimmer 1.5s infinite;
}
@keyframes bela-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .bela-lb__nav { width: 40px; height: 40px; font-size: 18px; }
    .bela-lb__prev { left: 8px; }
    .bela-lb__next { right: 8px; }
    .bela-lb__close { top: 8px; right: 8px; width: 38px; height: 38px; font-size: 18px; }
    .bela-lb__caption { max-width: 80vw; font-size: 13px; }
}