/* ===================================================================
   Frigo Menadžment — alatke sajta
   Stil je preslikan 1:1 sa HTML predloška (components.css → SCROLL
   PROGRESS / MOBILNA TRAKA / COOKIE / LIGHTBOX, base.css → Reveal).

   Svaka boja je zapisana kao `var(--token, #fallback)`. Uz FRIGO temu
   alatke prate dizajn sistem; bez teme rezervne vrednosti drže isti
   izgled.
   =================================================================== */

/* ---------- TRAKA NAPRETKA ----------
   Visina i boja se podešavaju u panelu; promenljive postavlja PHP na
   :root, pa ovde stoji samo rezerva. */
.scroll-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--fm-progress-h, 1px);
    z-index: 320;
    pointer-events: none;
}
.scroll-progress i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--fm-progress-c, var(--red, #B01F26));
}

/* ---------- MOBILNA TRAKA ---------- */
.mobile-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 280;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--night, #101315);
    border-top: 1px solid var(--line-d, rgba(242, 245, 246, 0.13));
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(110%);
    transition: transform 0.45s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.mobile-bar.is-visible { transform: none; }
@media (min-width: 861px) { .mobile-bar { display: none; } }

/* Jedno dugme umesto dva — kada je upisan samo telefon ili samo adresa. */
.mobile-bar:has(> a:only-child) { grid-template-columns: 1fr; }

.mobile-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px;
    text-align: center;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    color: var(--tx-light, #F2F5F6);
}
.mobile-bar a svg { width: 16px; height: 16px; flex: 0 0 auto; }
.mobile-bar a + a { background: var(--red, #B01F26); color: #fff; }

/* ---------- KOLAČIĆI ---------- */
.cookie-bar {
    position: fixed;
    left: 20px; bottom: 20px;
    z-index: 350;
    max-width: 420px;
    background: var(--night, #101315);
    color: var(--tx-mute-l, #98A1A7);
    border: 1px solid var(--line-d-2, rgba(242, 245, 246, 0.26));
    padding: 22px 24px;
    display: grid;
    gap: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
@media (max-width: 860px) {
    /* Iznad mobilne trake, da je ne pokrije. */
    .cookie-bar { bottom: 68px; right: 20px; }
}
.cookie-bar p { margin: 0; font-size: 13px; line-height: 1.6; }
.cookie-bar p a {
    color: var(--red-tx, #E45C62);
    border-bottom: 1px solid currentColor;
    text-decoration: none;
}
.cookie-bar[hidden] { display: none; }

.cookie-bar .row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}
.cookie-bar .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 9px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--r-int, 2px);
    cursor: pointer;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.cookie-bar .btn--red {
    background: var(--red, #B01F26);
    color: #fff;
}
.cookie-bar .btn--red:hover { background: var(--red-lt, #D2323A); }
.cookie-bar .btn--outline-l {
    background: none;
    border-color: var(--line-d-2, rgba(242, 245, 246, 0.26));
    color: var(--tx-light, #F2F5F6);
}
.cookie-bar .btn--outline-l:hover {
    border-color: var(--tx-light, #F2F5F6);
    background: rgba(255, 255, 255, 0.07);
}

/* ---------- LIGHTBOX (sopstveni, bez biblioteke) ---------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(20, 18, 15, 0.97);
    display: grid;
    place-items: center;
    padding: 56px 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s, visibility 0.35s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
    max-width: min(1300px, 92vw);
    max-height: 80vh;
    object-fit: contain;
    display: block;
}
.lightbox button {
    position: absolute;
    width: 48px; height: 48px;
    padding: 0;
    background: none;
    border: 1px solid var(--line-d-2, rgba(242, 245, 246, 0.26));
    color: var(--tx-light, #F2F5F6);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s;
}
.lightbox button:hover {
    background: var(--red, #B01F26);
    border-color: var(--red, #B01F26);
}
.lightbox button svg { width: 20px; height: 20px; }
.lb-close { top: 22px; right: 22px; }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
/* `display: grid` odozgo je jači od podrazumevanog ponašanja atributa
   `hidden`, pa strelice bez ovoga ostanu na ekranu i kod jedne slike. */
.lightbox button[hidden] { display: none; }
.lb-cap {
    position: absolute;
    bottom: 20px; left: 0; right: 0;
    margin: 0;
    text-align: center;
    font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--tx-mute-l, #98A1A7);
}
body.is-locked { overflow: hidden; }

/* ---------- ANIMACIJA ULASKA ----------
   Skriveno stanje važi samo pod html.js-motion, a tu klasu postavlja
   skripta. Bez JavaScripta je sve vidljivo od prvog frejma — sadržaj
   nikada ne sme da ostane trajno providan. */
.js-motion .rv {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
                transform 0.7s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.js-motion .rv.is-in { opacity: 1; transform: none; }

.js-motion .stagger > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
                transform 0.7s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.js-motion .stagger.is-in > * { opacity: 1; transform: none; }
.js-motion .stagger.is-in > *:nth-child(1) { transition-delay: 0.00s; }
.js-motion .stagger.is-in > *:nth-child(2) { transition-delay: 0.07s; }
.js-motion .stagger.is-in > *:nth-child(3) { transition-delay: 0.14s; }
.js-motion .stagger.is-in > *:nth-child(4) { transition-delay: 0.21s; }
.js-motion .stagger.is-in > *:nth-child(5) { transition-delay: 0.28s; }
.js-motion .stagger.is-in > *:nth-child(6) { transition-delay: 0.35s; }

/* Slika se otkriva zavesom odozdo */
.js-motion .clip-rv img {
    clip-path: inset(0 0 100% 0);
    transform: scale(1.05);
    transition: clip-path 0.9s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
                transform 1.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.js-motion .clip-rv.is-in img { clip-path: inset(0 0 0 0); transform: none; }

/* ---------- ELEMENTOR EDITOR ----------
   Druga brana, nezavisna od PHP-a. U editoru sadržaj nikada ne sme da
   krene iz providnog stanja: svaka izmena vraća svežu kopiju elementa
   bez klase `is-in`, pa bi ostala trajno nevidljiva. Animacija je ukras
   koji uredniku ništa ne znači — na gotovoj strani i dalje radi. */
body.elementor-editor-active .rv,
body.elementor-editor-active .stagger > *,
body.elementor-editor-active .clip-rv img {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
}

/* ---------- SMANJENO KRETANJE ----------
   Animacija ulaska je ukras. Ko je u sistemu tražio manje pokreta, dobija
   sadržaj odmah — ne kasnije i ne uz pomeranje. */
@media (prefers-reduced-motion: reduce) {
    .js-motion .rv,
    .js-motion .stagger > * { opacity: 1 !important; transform: none !important; }
    .js-motion .clip-rv img { clip-path: none !important; transform: none !important; }
    .mobile-bar { transition-duration: 0.01ms; }
}

/* ---------- ŠTAMPA ---------- */
@media print {
    .scroll-progress,
    .mobile-bar,
    .cookie-bar,
    .lightbox { display: none !important; }
}