/* ============================================================
   VLIG Focus Carousel — Frontend Styles v1.1.0
   ============================================================ */

.vfc-wrapper {
    position: relative;
    width: 100%;
    user-select: none;
}

/* Viewport — clips bočne slajdove */
.vfc-viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Track — sadrži sve apsolutno pozicionirane slajdove */
.vfc-track {
    position: relative;
    width: 100%;
}

/* Slajd */
.vfc-slide {
    position: absolute;
    top: 0;
    transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1),
                width    0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.vfc-image-wrap {
    width: 100%;
    aspect-ratio: var(--vfc-ratio, 4/3);
    overflow: hidden;
    transition: opacity 0.35s ease;
}

.vfc-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* nema zoom hover */
}

.vfc-no-img {
    width: 100%;
    height: 100%;
    background: #d0dde5;
}

/* === Info bar ================================================== */
.vfc-info-bar {
    margin-top: 18px;
}

/* Unutrašnji kontejner — JS ga poravna sa centralnim slajdom */
.vfc-info-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* width i margin-left postavljaju JS */
}

.vfc-info-left {
    flex: 1;
    min-width: 0;
}

/* Naslov */
.vfc-title {
    color: var(--vfc-title-color, #1a1a1a);
    font-size: var(--vfc-title-size, 1.4rem);
    font-weight: 700;
    margin: 0 0 5px 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vfc-title:hover {
    opacity: 0.75;
}

/* Link "Uvećaj" */
.vfc-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--vfc-link-color, #0A7AAE);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: gap 0.2s ease, opacity 0.2s ease;
    text-decoration: none;
}
.vfc-link:hover {
    opacity: 0.75;
    gap: 6px;
}
.vfc-link-arrow {
    font-size: 1rem;
    line-height: 1;
}

/* Strelice */
.vfc-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.vfc-prev,
.vfc-next {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--vfc-accent, #0A7AAE);
    background: transparent;
    color: var(--vfc-accent, #0A7AAE);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    padding: 0;
    flex-shrink: 0;
}
.vfc-prev:hover,
.vfc-next:hover {
    background: var(--vfc-accent, #0A7AAE);
    color: #fff;
    transform: scale(1.08);
}
.vfc-prev svg,
.vfc-next svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Mobilni — manji gap i manje strelice */
@media (max-width: 767px) {
    .vfc-title {
        font-size: calc(var(--vfc-title-size, 1.4rem) * 0.85);
        white-space: normal;
    }
    .vfc-prev, .vfc-next {
        width: 34px;
        height: 34px;
    }
    .vfc-prev svg, .vfc-next svg {
        width: 16px;
        height: 16px;
    }
    .vfc-info-bar {
        margin-top: 12px;
    }
}

@media (max-width: 480px) {
    /* Na veoma malim ekranima sakrijemo bocne slajdove potpuno */
    .vfc-link {
        font-size: 0.8rem;
    }
}

/* ============================================================
   Lightbox
   ============================================================ */
.vfc-lb-overlay{position:fixed;inset:0;z-index:999999;display:none;flex-direction:column;background:rgba(0,0,0,0.92);}
.vfc-lb-overlay.vfc-lb-active{display:flex;}
.vfc-lb-backdrop{position:absolute;inset:0;z-index:0;}
.vfc-lb-stage{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding-bottom:90px;}
.vfc-lb-img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;object-fit:contain;opacity:0;transition:opacity .25s ease,transform .15s ease;transform-origin:center center;user-select:none;will-change:transform;}
.vfc-lb-spinner{position:absolute;display:flex;align-items:center;gap:6px;}
.vfc-lb-spinner div{width:10px;height:10px;background:rgba(255,255,255,.7);border-radius:50%;animation:vfc-bounce 1.2s infinite ease-in-out;}
.vfc-lb-spinner div:nth-child(1){animation-delay:-.32s}.vfc-lb-spinner div:nth-child(2){animation-delay:-.16s}.vfc-lb-spinner div:nth-child(3){animation-delay:0s}.vfc-lb-spinner div:nth-child(4){animation-delay:.16s}
@keyframes vfc-bounce{0%,80%,100%{transform:scale(0);opacity:.3}40%{transform:scale(1);opacity:1}}
.vfc-lb-btn{position:absolute;z-index:10;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);border:none;border-radius:50%;color:#fff;cursor:pointer;padding:0;line-height:1;transition:background .2s ease,transform .15s ease;}
.vfc-lb-btn:hover{background:rgba(0,0,0,.85);transform:scale(1.08)}
.vfc-lb-btn:disabled{opacity:.3;pointer-events:none}
.vfc-lb-btn svg{display:block}
.vfc-lb-close{top:16px;right:16px;width:44px;height:44px}.vfc-lb-close svg{width:22px;height:22px}
.vfc-lb-prev,.vfc-lb-next{top:50%;transform:translateY(-50%);width:52px;height:52px;margin-top:-45px}
.vfc-lb-prev:hover,.vfc-lb-next:hover{transform:translateY(-50%) scale(1.08)}
.vfc-lb-prev{left:16px}.vfc-lb-next{right:16px}
.vfc-lb-prev svg,.vfc-lb-next svg{width:26px;height:26px}
.vfc-lb-zoom-bar{position:absolute;top:16px;left:16px;z-index:10;display:flex;gap:6px;}
.vfc-lb-zoom-bar .vfc-lb-btn{position:relative;top:auto;left:auto;right:auto;bottom:auto;width:40px;height:40px}
.vfc-lb-zoom-bar .vfc-lb-btn svg{width:20px;height:20px}
.vfc-lb-counter{position:absolute;top:20px;left:50%;transform:translateX(-50%);z-index:10;color:rgba(255,255,255,.8);font-size:.875rem;font-family:sans-serif;background:rgba(0,0,0,.45);padding:4px 12px;border-radius:20px;pointer-events:none;white-space:nowrap;}
.vfc-lb-thumbs{position:absolute;bottom:0;left:0;right:0;z-index:10;height:90px;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 60px;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;flex-shrink:0;}
.vfc-lb-thumbs::-webkit-scrollbar{height:3px}.vfc-lb-thumbs::-webkit-scrollbar-track{background:transparent}.vfc-lb-thumbs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:2px}
.vfc-lb-thumb-item{flex-shrink:0;cursor:pointer;border-radius:4px;overflow:hidden;border:2px solid transparent;opacity:.45;transition:opacity .2s ease,border-color .2s ease,transform .2s ease;}
.vfc-lb-thumb-item:hover{opacity:.8;transform:translateY(-2px)}.vfc-lb-thumb-item.vfc-lb-thumb-active{opacity:1;border-color:#fff;transform:translateY(-3px)}
.vfc-lb-thumb-item img{display:block;width:72px;height:54px;object-fit:cover;pointer-events:none}
@media(max-width:600px){.vfc-lb-thumbs{height:70px;padding:8px 16px}.vfc-lb-thumb-item img{width:54px;height:40px}.vfc-lb-stage{padding-bottom:70px}.vfc-lb-prev,.vfc-lb-next{width:40px;height:40px}.vfc-lb-prev svg,.vfc-lb-next svg{width:20px;height:20px}}