/* =============================================================
   ENSOUL GALLERY LIGHTBOX
   Custom lightbox with thumbnail strip — no dependencies beyond jQuery
   ============================================================= */

/* Overlay */
.eg-overlay {
    position:         fixed;
    inset:            0;
    z-index:          9000;
    display:          flex;
    flex-direction:   column;
    background:       rgba(30, 36, 42, 0.97);
    opacity:          0;
    transition:       opacity 0.25s ease;
    pointer-events:   none;
    font-family:      'Lato', sans-serif;
}

.eg-overlay.is-open {
    opacity:        1;
    pointer-events: all;
}

/* ── Top bar ─────────────────────────────────────────────── */
.eg-topbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0.75rem 1rem;
    flex-shrink:     0;
}

.eg-counter {
    color:          rgba(255,255,255,0.5);
    font-size:      12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    min-width:      60px;
}

/* Utility buttons cluster */
.eg-utils {
    display:    flex;
    align-items: center;
    gap:        4px;
}

.eg-btn {
    width:           40px;
    height:          40px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      none;
    border:          none;
    color:           rgba(255,255,255,0.6);
    cursor:          pointer;
    padding:         0;
    transition:      color 0.2s ease, background 0.2s ease;
    border-radius:   3px;
}

.eg-btn:hover          { color: #fff; background: rgba(255,255,255,0.08); }
.eg-btn.is-active      { color: #fce061; }
.eg-btn svg            { display: block; flex-shrink: 0; }

/* ── Main image area ─────────────────────────────────────── */
.eg-main {
    flex:            1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    position:        relative;
    overflow:        hidden;
    padding:         0.75rem 5rem;
    min-height:      0;
}

.eg-main img {
    max-width:      100%;
    max-height:     100%;
    object-fit:     contain;
    display:        block;
    opacity:        0;
    transition:     opacity 0.2s ease;
    border-radius:  2px;
}

.eg-main img.is-loaded { opacity: 1; }

/* Prev / Next arrows */
.eg-prev,
.eg-next {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    width:           44px;
    height:          44px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      #fce061;
    color:           #424242;
    border:          none;
    cursor:          pointer;
    z-index:         10;
    transition:      background 0.2s ease;
    padding:         0;
}

.eg-prev { left: 0.75rem; }
.eg-next { right: 0.75rem; }

.eg-prev:hover,
.eg-next:hover { background: #e3c438; }

.eg-prev svg,
.eg-next svg { display: block; flex-shrink: 0; }

/* Loading spinner */
.eg-spinner {
    position:      absolute;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    width:         32px;
    height:        32px;
    border:        3px solid rgba(255,255,255,0.12);
    border-top-color: #fce061;
    border-radius: 50%;
    animation:     eg-spin 0.7s linear infinite;
}

@keyframes eg-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* ── Thumbnail strip ─────────────────────────────────────── */
.eg-thumbs {
    display:         flex;
    gap:             5px;
    padding:         8px 1rem 10px;
    overflow-x:      auto;
    justify-content: center;
    flex-shrink:     0;
    scrollbar-width: thin;
    scrollbar-color: #fce061 transparent;
    /* animate show/hide */
    max-height:      90px;
    overflow-y:      hidden;
    transition:      max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
    opacity:         1;
}

.eg-thumbs.is-hidden {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

.eg-thumbs::-webkit-scrollbar        { height: 3px; }
.eg-thumbs::-webkit-scrollbar-track  { background: transparent; }
.eg-thumbs::-webkit-scrollbar-thumb  { background: #fce061; border-radius: 2px; }

.eg-thumb {
    width:         64px;
    height:        64px;
    flex-shrink:   0;
    cursor:        pointer;
    overflow:      hidden;
    border-radius: 2px;
    opacity:       0.4;
    transition:    opacity 0.2s ease, outline 0.15s ease;
    outline:       2px solid transparent;
    outline-offset: 2px;
}

.eg-thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.eg-thumb:hover     { opacity: 0.72; }
.eg-thumb.is-active { opacity: 1; outline-color: #fce061; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
    .eg-main  { padding: 0.5rem 3rem; }
    .eg-prev  { left: 0.25rem; }
    .eg-next  { right: 0.25rem; }
    .eg-prev,
    .eg-next  { width: 36px; height: 36px; }
    .eg-thumb { width: 50px; height: 50px; }
    .eg-thumbs { max-height: 70px; }
}