/* ============================================================
   VBS Portal - zajednicke animacije (v1.5.8)
   Ukljucuje se na svim stranama posle stilova strane:
     <link rel="stylesheet" href="/vbs-anim.css">  (pred </head>)
     <script src="/vbs-anim.js" defer></script>    (uz ostale /vbs-*.js)
   Pravila: kratko (80-200 ms), bez poskakivanja, postuje
   prefers-reduced-motion. Bez emotikona.
   ============================================================ */
:root{--va-ease:cubic-bezier(.22,.61,.36,1);--va-brzo:80ms;--va-kratko:140ms;--va-srednje:180ms}

/* ---- 1. pretraga bez skakanja ---- */
.va-drzi{transition:min-height .26s var(--va-ease)}
.va-dim{opacity:.45!important;transition:opacity .16s var(--va-ease)}
.va-dim *{pointer-events:none}
.va-spin{position:relative}
.va-spin::after{content:"";position:absolute;right:36px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--accent,#4AC2C6) 25%,transparent);border-top-color:var(--accent,#4AC2C6);
  animation:vaVrti .7s linear infinite;pointer-events:none;z-index:2}
.va-spin.ima::after{right:42px}
@keyframes vaVrti{to{transform:rotate(360deg)}}

/* ---- 2. prelazi prikaza i sekcija ---- */
@keyframes vaIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes vaFade{from{opacity:0}to{opacity:1}}
.va-in{animation:vaIn var(--va-srednje) var(--va-ease) both}
.va-fade{animation:vaFade var(--va-kratko) var(--va-ease) both}
.va-sekcija{overflow:hidden;transition:height .22s var(--va-ease),opacity .22s var(--va-ease)}
.va-sekcija.va-zatvorena{height:0!important;opacity:0}
.va-strelica{transition:transform .2s var(--va-ease)}
.va-strelica.otvoreno{transform:rotate(180deg)}

/* ---- 3. kostur (skeleton) i ekran ucitavanja sa logom ---- */
@keyframes vaSjaj{from{background-position:-600px 0}to{background-position:600px 0}}
.va-skel{display:block;height:14px;margin:9px 0;border-radius:8px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--text,#e6edf1) 7%,transparent) 25%,color-mix(in srgb,var(--text,#e6edf1) 13%,transparent) 37%,color-mix(in srgb,var(--text,#e6edf1) 7%,transparent) 63%);
  background-size:1200px 100%;animation:vaSjaj 1.3s linear infinite}
.va-skel.n{height:22px}.va-skel.red{height:40px;border-radius:10px;margin:6px 0}.va-skel.kart{height:84px;border-radius:14px;margin:12px 0}
.va-skel.s{width:35%}.va-skel.m{width:60%}.va-skel.l{width:85%}
.va-skelet{padding:6px 2px}

.vbs-loader{display:flex!important;align-items:center;justify-content:center;flex-direction:column;gap:18px}
.vbs-loader img{display:block!important;height:92px;width:auto;max-width:60vw;object-fit:contain;filter:none;opacity:1;
  animation:vaLogo 1.6s var(--va-ease) infinite!important}
@keyframes vaLogo{0%{transform:scale(.94);opacity:.55}50%{transform:scale(1);opacity:1}100%{transform:scale(.94);opacity:.55}}
.vbs-loader::after{content:"";width:132px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--accent,#4AC2C6),transparent);background-size:50% 100%;background-repeat:no-repeat;
  animation:vaTraka 1.1s var(--va-ease) infinite}
@keyframes vaTraka{from{background-position:-70% 0}to{background-position:170% 0}}
.vbs-loader.hide{opacity:0;pointer-events:none}

/* ---- 4. sitne reakcije ---- */
button:not(:disabled),.btn:not(:disabled),.btn2,.portalbtn,.menu-btn,.backbtn,.tab,.tabs a{transition:transform var(--va-brzo) var(--va-ease),background-color .16s var(--va-ease),border-color .16s var(--va-ease),color .16s var(--va-ease),box-shadow .16s var(--va-ease),filter .16s var(--va-ease)}
button:not(:disabled):active,.btn:not(:disabled):active,.btn2:active,.portalbtn:active,.menu-btn:active,.backbtn:active,.tab:active,.tabs a:active{transform:scale(.96)}
.toast{transition:opacity .22s var(--va-ease),transform .26s var(--va-ease)!important;transform:translate(-50%,10px)!important}
.toast.show{transform:translate(-50%,0)!important}
.vbs-zv{animation:vaIn var(--va-srednje) var(--va-ease) both}
.vbs-zv-bg{animation:vaFade var(--va-kratko) var(--va-ease) both}
.vbs-zv-btn .n:not(:empty){animation:vaPulsN .4s var(--va-ease) both}
@keyframes vaPulsN{from{transform:scale(.5)}60%{transform:scale(1.15)}to{transform:scale(1)}}
.overlay,.modal-bg{animation:vaFade var(--va-kratko) var(--va-ease) both}
.modal,.pw-modal{animation:vaModal .2s var(--va-ease) both}
@keyframes vaModal{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.vbs-zv .it,.vbs-zv .ur{animation:vaFade var(--va-kratko) var(--va-ease) both}

/* ---- 5. manje pokreta ---- */
@media(prefers-reduced-motion:reduce){
  .va-in,.va-fade,.vbs-zv,.vbs-zv-bg,.overlay,.modal-bg,.modal,.pw-modal,.vbs-zv .it,.vbs-zv .ur,.vbs-zv-btn .n{animation:none!important}
  .va-drzi,.va-sekcija,.va-strelica,.va-dim,.toast,button,.btn,.btn2,.portalbtn,.menu-btn,.backbtn,.tab,.tabs a{transition:none!important}
  .va-dim{opacity:.6!important}
  .toast,.toast.show{transform:translate(-50%,0)!important}
  .vbs-loader img{animation:none!important;opacity:1}
  .vbs-loader::after{animation:none;background-size:100% 100%;background-position:0 0}
  .va-skel{animation:none}
  button:active,.btn:active,.btn2:active,.portalbtn:active,.menu-btn:active,.backbtn:active,.tab:active,.tabs a:active{transform:none}
}