/* =========================================================
   ASENRA Universal Lightbox
   ========================================================= */
.alb-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background:
        radial-gradient(circle at 30% 0%, rgba(47,93,58,.35), transparent 60%),
        rgba(14,12,8,.85);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: none;
    opacity: 0;
    transition: opacity .3s ease;
    user-select: none;
    touch-action: pan-y;
    overscroll-behavior: contain;
}
.alb-overlay.is-open { display: block; opacity: 1; animation: albFade .3s ease; }
@keyframes albFade { from { opacity: 0; } to { opacity: 1; } }
body.alb-locked { overflow: hidden; }

.alb-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(50px, 8vh, 80px) clamp(50px, 6vw, 100px);
}

.alb-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alb-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    background: #111;
    opacity: 0;
    transition: opacity .25s ease, transform .35s ease;
    cursor: zoom-in;
}
.alb-img.is-loaded { opacity: 1; }
.alb-img.is-zoom { cursor: zoom-out; max-width: none; max-height: none; }

.alb-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s ease, transform .2s ease;
    z-index: 2;
}
.alb-btn:hover { background: rgba(255,255,255,.25); transform: translateY(-50%) scale(1.05); }
.alb-prev { left: 14px; }
.alb-next { right: 14px; }

.alb-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    font-size: 22px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 3;
    transition: background .2s ease;
}
.alb-close:hover { background: rgba(255,80,60,.7); }

.alb-counter {
    position: absolute;
    top: 18px; left: 18px;
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    padding: 6px 14px; border-radius: 999px;
    font-size: 13px;
    z-index: 3;
}

.alb-caption {
    position: absolute;
    left: 50%; bottom: 18px;
    transform: translateX(-50%);
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    padding: 8px 16px; border-radius: 999px;
    font-size: 13px;
    max-width: calc(100% - 60px);
    text-align: center;
    z-index: 3;
}

.alb-thumbs {
    position: absolute;
    left: 0; right: 0; bottom: 60px;
    display: flex; justify-content: center; gap: 6px;
    padding: 0 14px;
    overflow-x: auto;
    z-index: 3;
    scroll-behavior: smooth;
}
.alb-thumb {
    width: 56px; height: 42px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid transparent;
    cursor: pointer;
    background: #222;
    opacity: .6;
    transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}
.alb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.alb-thumb:hover { opacity: .95; }
.alb-thumb.is-active { opacity: 1; border-color: #c9a45c; transform: translateY(-3px); box-shadow: 0 8px 16px -6px rgba(201,164,92,.6); }

.alb-loader {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    border: 3px solid rgba(255,255,255,.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: alb-spin 1s linear infinite;
    display: none;
}
.alb-overlay.is-loading .alb-loader { display: block; }
@keyframes alb-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* Mobile */
@media (max-width: 720px) {
    .alb-stage { padding: 70px 14px 90px; }
    .alb-btn { width: 42px; height: 42px; font-size: 20px; }
    .alb-prev { left: 6px; } .alb-next { right: 6px; }
    .alb-thumbs { bottom: 80px; }
    .alb-thumb { width: 46px; height: 34px; }
    .alb-caption { bottom: 12px; font-size: 12px; padding: 6px 12px; }
}