/*
* FooGallery Custom CSS
* This file is created by adding custom CSS on FooGallery Settings page in wp-admin
* Created : 30 Sep 2026, 8:27 pm
*/

/* počas inicializácie zabránime preblikávaniu */
.fg-image-viewer.zl-thumbs-building .fiv-inner-container {
    opacity: 0;
}

.fg-image-viewer .fiv-inner-container {
    transition: opacity 0.15s ease;
}


/* po vytvorení thumbnailov schováme
   pôvodnú navigáciu */
.fg-image-viewer.zl-thumbs-ready .fiv-ctrls {
    display: none !important;
}


/* ========================================
   THUMBNAILS
   ======================================== */

.zl-gallery-thumbs {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 10px;

    width: 100%;

    margin-top: 16px;
}


/* jeden náhľad */
.zl-gallery-thumb {
    flex: 0 0 64px;

    width: 64px;
    height: 64px;

    padding: 0 !important;
    margin: 0 !important;

    border: 1px solid transparent !important;
    border-radius: 0 !important;

    background: transparent !important;

    opacity: 0.5;

    overflow: hidden;
    cursor: pointer;

    transition:
        opacity 0.2s ease,
        border-color 0.2s ease;
}


/* samotná fotografia */
.zl-gallery-thumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* hover */
.zl-gallery-thumb:hover {
    opacity: 0.8;
}


/* aktívny obrázok */
.zl-gallery-thumb.is-active {
    opacity: 1;

    border-color: #1559ed !important;
}


/* MOBILE */
@media (max-width: 689px) {

    .zl-gallery-thumbs {
        justify-content: flex-start;

        gap: 8px;

        overflow-x: auto;

        padding-bottom: 4px;

        scrollbar-width: none;
    }

    .zl-gallery-thumbs::-webkit-scrollbar {
        display: none;
    }

    .zl-gallery-thumb {
        flex-basis: 54px;

        width: 54px;
        height: 54px;
    }
}