/* Original vicoteka blue, taken from the actual old site (d:\www\az-lisica.rs\css\vc.css) —
   #336699 was its dominant color (.vic-menu-container, .vicevi-ttl, .smeh-izbor), not the
   #06c placeholder this stub started with. --vc-accent-dark/--vc-accent-soft are derived
   shades in the same hue, since the old site mixed this blue with unrelated yellow/brown
   accents (title text/shadow) that don't map onto this single-hue accent/dark/soft system. */
:root {
  --vc-accent: #336699;
  --vc-accent-dark: #1f3d5c;
  --vc-accent-soft: #d6e4f5;
  /* Softened further, specifically for the share-icon badges — a touch paler than the shared
     --vc-accent-soft used elsewhere (nav, notices, pagination), per explicit request to mute
     just the icon backgrounds without changing those other components. */
  --vc-share-bg: #e0ebf8;
  /* Neutral light gray for .vc-joke-meta's header band, direct request ("probaj sa #F7F7F7") -
     no longer part of the blue accent-hue family the way --vc-share-bg/--vc-accent-soft are. */
  --vc-meta-bg: #F6F9FC;
  --vc-ink: #222;
  --vc-ink-soft: #6b7480;
  --vc-border: #dde3ea;
}

.vc-menu-btn {
  font: normal 12px Oswald;
  background-color: var(--vc-accent);
  color: var(--vc-accent-soft);
}
.vc-menu-btn:hover {
  background-color: var(--vc-accent-soft);
  color: var(--vc-accent);
}
.vc-menu-btn:active, .vc-menu-btn:focus, .vc-menu-btn:target, .vc-menu-btn:active:focus {
  background-color: var(--vc-accent-dark);
  color: #fff;
}

.vc-menu-btn-a, .vc-menu-btn-a:hover, .vc-menu-btn-a:active, .vc-menu-btn-a:focus, .vc-menu-btn-a:target, .vc-menu-btn-a:active:focus {
  font: normal 12px Oswald;
  background-color: var(--vc-accent-soft);
  color: var(--vc-accent-dark);
}
/* Disabled placeholder button (e.g. "Pošalji vic", not built yet) — same treatment as
   .ak-menu-btn-dis/.cn-menu-btn-dis in the other module/shared stylesheets. */
.vc-menu-btn-dis {
  font: normal 12px Oswald;
  background-color: var(--vc-accent-dark);
  color: rgba(255, 255, 255, .5);
  cursor: default;
}

/* Desktop header row (_bs_inc/header.php's aService=='vc' block) — same colors as .vc-menu-btn*
   above, but font/size matched to .top-menu-btn (the service-switcher row right above it in the
   header) rather than reusing .vc-menu-btn's own 12px, which was sized down specifically for the
   in-page sort tabs (_bs_inc/vicoteka/main_index.php) and would look inconsistent here — this
   header row should read like a sibling of the other services' own second-row nav buttons
   (.ak-menu-btn, .rc-menu-btn, .bo-menu-btn, .cn-menu-btn — all .875rem Oswald), just in vicoteka's
   own colors. Padding isn't set here (or on .top-menu-btn) — both rely on the same Bootstrap
   `.btn.btn-sm` classes already in the markup, so it already matches without needing to repeat it. */
.vc-hdr-btn {
  font: normal .875rem Oswald;
  background-color: var(--vc-accent);
  color: var(--vc-accent-soft);
}
.vc-hdr-btn:hover {
  background-color: var(--vc-accent-soft);
  color: var(--vc-accent);
}
.vc-hdr-btn:active, .vc-hdr-btn:focus, .vc-hdr-btn:target, .vc-hdr-btn:active:focus {
  background-color: var(--vc-accent-dark);
  color: #fff;
}
.vc-hdr-btn-a, .vc-hdr-btn-a:hover, .vc-hdr-btn-a:active, .vc-hdr-btn-a:focus, .vc-hdr-btn-a:target, .vc-hdr-btn-a:active:focus {
  font: normal .875rem Oswald;
  background-color: var(--vc-accent-soft);
  color: var(--vc-accent-dark);
}
.vc-hdr-btn-dis {
  font: normal .875rem Oswald;
  background-color: var(--vc-accent-dark);
  color: rgba(255, 255, 255, .5);
  cursor: default;
}

.vc-page {
  background-color: #f7f9fb;
}

/* --- category sidebar (persistent left column, desktop-only) --- */
/* The mobile offcanvas trigger/panel this section used to also style (#vcKatOffcanvas,
   .vc-kat-offcanvas-btn) was removed — the hamburger menu's own Vicoteka submenu now lists every
   category directly, making a page-local mobile category picker redundant. */
/* Custom fixed-width column (replaces Bootstrap's col-lg-3) — 190px measured directly in-browser
   as comfortably above the true minimum: the longest real category name ("Aforizmi i grafiti")
   only needs ~94px of actual glyph width (canvas-measured against .vc-kat-link's real computed
   font), so even after the shared 8px each-side gutter padding below (matching gx-3's own
   calc(var(--bs-gutter-x)*.5) that .vc-content-col/.col-lg-3 siblings still use), 190px leaves
   plenty of slack while giving the freed-up width back to .vc-content-col next to it. */
.vc-kat-col {
  flex: 0 0 190px;
  max-width: 190px;
  padding-right: .5rem;
  padding-left: .5rem;
}
.vc-kat-box {
  background-color: #fff;
  border: 1px solid var(--vc-border);
  border-radius: 8px;
  overflow: hidden;
}
/* Same sticky-column treatment as recepti's ingredients sidebar (.rc-sastojci-sticky) — no
   max-width reset needed to undo it below `lg` the way recepti's has, since this column is
   already fully hidden below `lg` via d-none d-lg-block rather than just repositioned. */
.vc-kat-sticky {
  position: sticky;
  top: 1rem;
}

/* --- ad column (persistent right column, desktop-only) --- */
/* Custom fixed-width column (replaces Bootstrap's col-lg-3), isti obrazac kao .vc-kat-col iznad -
   direktan zahtev da kolona nikad ne bude šira od 300px (širina banner-a). box-sizing:border-box
   znači da 300px OVDE uključuje i padding-left - stvarna spoljna širina kolone nikad ne prelazi
   300px, za razliku od content-box modela gde bi padding dodao širinu preko deklarisane. */
.vc-ad-col {
  box-sizing: border-box;
  flex: 0 0 300px;
  max-width: 300px;
  padding-left: .5rem;
}
/* 3 oglasne zone u koloni. Broj stvarnih banera NIJE fiksan (može ih biti 2, 3, 5...) niti im je
   visina poznata, a u jednoj zoni ih može biti i više od jednog - zato ovde NEMA nijedne zadate
   visine, ni zone ni banera. Zone se sabijaju tačno na visinu svog sadržaja (flex:0 0 auto), pa
   ne postoji "predviđena visina zone" koju bi sadržaj mogao da prelije; sav višak prostora deli
   justify-content:space-between IZMEĐU zona, čime prva zona sama sedne uz vrh, poslednja uz dno,
   a srednja tačno na sredinu - za bilo koji broj banera bilo koje visine.

   height: calc(100% - .25rem) - izmereno, ne pretpostavljeno: paginacija u srednjem stupcu nosi
   Bootstrap-ovu "my-1" klasu (=.25rem donje margine), pa se stubac završava tih 4px NIŽE od
   stvarne donje ivice paginacije - bez ovog oduzimanja poslednji baner visi 4px ispod nje.

   Pomeranje pri skrolovanju (sudar i guranje) radi position:sticky ispod, a ne JS - JS samo upiše
   top offset svakom baneru (zbir visina onih iznad njega), jednom, van skrolovanja. Vidi komentar
   na vrhu _bs_js/vicoteka/vcAds.js za punu podelu posla i zašto se ne sme raditi na scroll event. */
.vc-ad-column {
  /* min-height (ne height): na kratkim stranama zbir visina banera može biti VEĆI od raspoloživog
     stupca - tada vcAds.js podigne min-height na .vc-ad-col da baneri ne pobegnu preko dna. */
  min-height: calc(100% - .25rem);
  position: relative;
}
/* Svaka zona je apsolutno pozicionirana kutija; top/bottom joj upisuje vcAds.js. Zašto baš tako:
   sticky element nikad ne prelazi DONJU ivicu svog containing block-a, i tu granicu koristimo kao
   "kočnicu". Da su zone obične flex-kutije visine svog sadržaja, sticky ne bi imao kuda da pomera
   baner; da su svi baneri u jednom zajedničkom kontejneru (probano), svaki bi se na kraju strane
   nezavisno zakačio za dno stupca pa bi se PREKLOPILI (izmereno: baner 2 i 3 su završavali na
   istom dnu). Ovako se svaka zona završava tačno onoliko iznad dna stupca kolika je ukupna visina
   banera ISPOD nje, pa se svaki zaustavi tačno na svom mestu u nizu, bez preklapanja. */
.vc-ad-zone {
  position: absolute;
  left: 0;
  right: 0;
}
.vc-ad-item {
  position: sticky;
  /* Stvarnu vrednost (razmak + zbir visina banera iznad) upisuje vcAds.js; ovo je samo početna
     vrednost za prvi baner i fallback ako JS ne bi radio. */
  top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Razmak kad u istoj zoni stoji više banera - isti kao GAP u vcAds.js. */
.vc-ad-item + .vc-ad-item {
  margin-top: 10px;
}
/* Jedan stvarni baner (vcAdSlot()/showAds() ga upisuje) - može ih biti i više u istoj zoni ako
   lsAdvertising ikad dobije više od jednog aktivnog reda za isti modul+sektor+zona, otud razmak
   između uzastopnih .vc-ad-unit (isti GAP kao između zona, radi vizuelne doslednosti). Bez
   ikakvog okvira/pozadine - baner nosi sopstveni izgled, ova klasa je čisto layout kontejner.
   max-width na img/ins pokriva slučaj da stvarni baner (npr. 300px slika) bude tačno onoliko širok
   koliko .vc-ad-col-ova stvarno raspoloživa širina (~292px, kolona 300px - .5rem levi padding) -
   bez ovoga bi se fiksnih 300px preliv preko ivice kolone. */
.vc-ad-unit + .vc-ad-unit {
  margin-top: 10px;
}
.vc-ad-unit img,
.vc-ad-unit ins {
  max-width: 100%;
  height: auto;
}
/* Oglasno mesto uglavljeno u sam sadržaj, na ekranima ispod lg gde desnog stupca nema (markup:
   .vc-ad-inline.d-lg-none u _bs_tpl/vicoteka.php i _bs_inc/vicoteka/main_index.php). max-width:300px
   drži baner na njegovoj prirodnoj širini, centriran, sa malo vazduha iznad/ispod da se ne slepi
   sa vicevima - smanjeno sa 1rem na .5rem (direktan zahtev, sve tri zone ujednačene radi
   jednostavnosti umesto da se samo 1. i 3. dira posebnom klasom). */
.vc-ad-inline {
  max-width: 300px;
  margin: .5rem auto;
}
/* Zona 2 (usred liste viceva) je jedina .vc-ad-inline koja je neposredni sused kartice vica
   (zone 1/3 dolaze posle paginacije/na kraju stupca, nikad odmah posle .vc-joke-card) - susedne
   margine se sažimaju na VEĆU od dve (CSS margin collapse), pa je .vc-joke-card-ova sopstvena
   margin-bottom:24px pobeđivala baner-ov margin-top:8px, praveći veći razmak nego što je traženo.
   Cilja samo tu specifičnu karticu (:has), ne dira razmak između običnih kartica nigde drugde.
   Samo ispod lg - iznad lg .vc-ad-inline je i dalje u DOM-u (d-lg-none samo sakriva), ali van toka. */
@media (max-width: 991.98px) {
  .vc-joke-card:has(+ .vc-ad-inline) {
    margin-bottom: .5rem;
  }
}

/* --- main content column --- */
/* Custom flex column (replaces Bootstrap's col-lg-6), paired with .vc-kat-col above — takes
   whatever width is left between the narrowed sidebar and the ad column (still plain col-lg-3,
   fixed at exactly the 300px ad unit's real footprint) rather than a fixed 50% share, so the
   width freed up by narrowing the sidebar goes straight to this column instead of sitting unused. */
.vc-content-col {
  flex: 1 1 0%;
  min-width: 0;
  padding-right: .5rem;
  padding-left: .5rem;
}
.vc-kat-box-ttl {
  background-color: var(--vc-accent);
  color: #fff;
  font: 700 .85rem "Barlow Condensed";
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  padding: .6rem 0;
}
.vc-kat-link, .vc-kat-link:hover {
  padding: .45rem .9rem;
  color: var(--vc-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--vc-border);
  font: 400 .9rem "Barlow Semi Condensed";
}
.vc-kat-link:hover {
  background-color: var(--vc-accent-soft);
  color: var(--vc-accent-dark);
}
.vc-kat-link:last-child {
  border-bottom: none;
}
/* Aktivna kategorija ne menja pozadinu ni u mirovanju ni na mouse-over-u (za razliku od svake
   druge stavke, čija se pozadina menja na hover preko .vc-kat-link:hover) - font (boja + bold) je
   dovoljan signal da je izabrana, dodatno naglašen check ikonicom desno (isti obrazac kao aktivna
   stavka u hamburger meniju, vidi .mnav-check u main_nav.css). background-color: transparent
   ovde mora biti eksplicitno postavljen (ne samo izostavljen) da bi nadjačao .vc-kat-link:hover -
   obe pravila imaju istu specifičnost (klasa + :hover), a .vc-kat-link-a je dole u fajlu pa bi
   inače pobedila samo po redosledu, ali bez sopstvene background-color deklaracije ne bi imala šta
   da nadjača. display:flex mora imati !important - markup nosi Bootstrap-ovu d-block klasu, čije
   je "display: block!important" pravilo inače uvek pobeđivalo (ista specifičnost, samo je
   d-block učitan pre vc_standard.css), pa se check ikonica renderovala kao obično inline
   pored teksta umesto potisnuta na desnu ivicu - potvrđeno uživo (getComputedStyle vraćao
   display:"block"), ne pretpostavljeno. Isti sudar je i uvećavao visinu reda za ~4px (inline
   ikonica od 18px je viša od tekstualnog reda od ~18px unutar block toka, širi line box) - flex
   sa align-items:center to rešava jer se visina reda tada računa preko flex algoritma, ne inline
   line-box-a. */
.vc-kat-link-a, .vc-kat-link-a:hover {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  background-color: transparent;
  color: var(--vc-accent-dark);
  font-weight: 700;
}
.vc-kat-check {
  font-size: 18px;
  color: #C00;
  flex-shrink: 0;
}

/* --- listing / detail titles --- */
/* Naslov (H1) ponavlja poslednju stavku breadcrumb-a odmah iznad njega (SEO zahteva pravi H1, ne
   može da se izbaci) - isprekidana linija ispod daje naslovu svoj "okvir" umesto da samo visi
   ispod breadcrumb-a bez ikakve razdvojenosti. Boja iz Vicotekine sopstvene palete (--vc-accent),
   NE .bcrumb-ova deljena #C96 (odbačeno) - puna traka u --vc-accent-soft/--vc-accent-dark je takođe
   probana i odbačena (previše "teško" pored suptilne linije). */
.vc-listing-ttl {
  font: 700 1.5rem "Barlow Condensed";
  color: var(--vc-ink);
  padding-bottom: .5rem;
  margin-bottom: .75rem;
  border-bottom: 1px dashed var(--vc-accent);
}
.vc-listing-ttl-user {
  color: #0000CC;
}
/* Sort tabs (Najnoviji/Najbolje ocenjeni/Sa najviše glasova) — right-aligned at every width,
   including the narrowest ones (a full-width edge-to-edge treatment was tried for narrow screens
   and rejected as ugly). Set as a plain rule rather than Bootstrap's .justify-content-end utility
   class, which carries !important and would block any future override attempt regardless of
   specificity (same class of bug as other Bootstrap-utility-vs-custom-CSS conflicts already hit
   in this project). */
.vc-sort-tabs {
  justify-content: flex-end;
}
.vc-notice {
  background-color: var(--vc-accent-soft);
  color: var(--vc-accent-dark);
  border-radius: 6px;
  padding: .6rem 1rem;
  font: 400 .9rem "Barlow Semi Condensed";
  margin-bottom: 1rem;
}
.vc-notice-error {
  background-color: #f8d7da;
  color: #842029;
}

/* --- "Pošalji vic" form (vicoteka/posalji.php) --- */
/* Kartica oko forme (samo posalji.php - main_mojiViceviEdit.php deli iste .vc-posalji-row/-buttons
   klase ali BEZ ove kartice). Puna raspoloživa širina stupca (direktan zahtev), ne fiksnih 640px
   kao ranije - .vc-posalji-row/-buttons zadržavaju sopstveni max-width:640px kao BAZNO pravilo
   (edit stranica ga i dalje koristi), ali se ovde eksplicitno poništava (.vc-posalji-card ...)
   tako da polja unutar KARTICE rastegnu na punu širinu, bez uticaja na edit stranicu. */
.vc-posalji-card {
  background-color: #fff;
  border: 1px solid var(--vc-border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  width: 100%;
  box-sizing: border-box;
}
.vc-posalji-card .vc-posalji-row,
.vc-posalji-card .vc-posalji-buttons {
  max-width: none;
}
.vc-posalji-row {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-bottom: 1rem;
  max-width: 640px;
}
/* Checkbox saglasnosti - jedan red, ne label-iznad-polja kao ostali .vc-posalji-row-ovi, pa
   sopstveni flex-direction:row override. Dugme za slanje kreće disabled u markupu i otključava se
   tek na 'change' (main_posalji.php-ov inline <script>) - fail-safe: bez JS-a ostaje zaključano
   umesto da tiho dozvoli slanje bez pročitane saglasnosti. */
.vc-posalji-agree-row {
  flex-direction: row;
  align-items: center;
}
.vc-posalji-agree {
  display: flex;
  align-items: center;
  gap: .5rem;
  font: 400 .95rem "Barlow Semi Condensed";
  color: #333;
  cursor: pointer;
}
.vc-posalji-agree input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  cursor: pointer;
  accent-color: var(--vc-accent);
}
.vc-posalji-agree a {
  color: var(--vc-accent-dark);
  text-decoration: underline;
}
.vc-posalji-agree a:hover {
  color: #CC0000;
}
.vc-search-btn:disabled {
  background-color: var(--vc-border);
  color: var(--vc-ink-soft);
  cursor: not-allowed;
}
.vc-posalji-label {
  font: 700 .85rem "Barlow Condensed";
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vc-ink-soft);
}
.vc-posalji-select,
.vc-posalji-input {
  border: 1px solid var(--vc-border);
  border-radius: 4px;
  padding: .5rem .6rem;
  font: 400 1rem "Barlow Semi Condensed";
  color: var(--vc-ink);
  width: 100%;
  box-sizing: border-box;
}
.vc-posalji-textarea {
  resize: vertical;
}
.vc-posalji-buttons {
  max-width: 640px;
  /* display:flex + gap ne menja ništa dok je unutra samo jedno dugme (posalji.php) - potrebno tek
     na main_mojiViceviEdit.php, gde stoji i "odustani" link pored "sačuvaj izmene" dugmeta. */
  display: flex;
  align-items: center;
  gap: .5rem;
}
/* Propratni tekst (pravila slanja/vlasništvo/anonimizacija) ispod forme - bez pozadine/kartice,
   ink-soft boja, uz isprekidanu liniju iznad kao suptilna razdvojnica, ali NIJE sitno štivo:
   font podignut na 1rem/500 (direktan zahtev "malo krupniji ... malo jači font") i justify
   poravnanje. Samo dok se forma popunjava - NE na "strani zahvalnici" (unutar istog else
   $vcPosaljiSuccess bloka kao forma u main_posalji.php, ne posle njega kao ranije). */
.vc-posalji-info {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-top: 1px dashed var(--vc-border);
  border-bottom: 1px dashed var(--vc-border);
  font: 500 1rem "Barlow Semi Condensed";
  color: #333;
  line-height: 1.6;
}
.vc-posalji-info-ttl {
  font: 700 1.1rem "Barlow Condensed";
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vc-ink);
  margin: 0 0 .75rem 0;
}
.vc-posalji-info ul {
  margin: 0;
  padding-left: 1.25rem;
}
.vc-posalji-info li {
  margin: 0 0 .75rem 0;
  text-align: justify;
}
.vc-posalji-info li:last-child {
  margin-bottom: 0;
}
.vc-posalji-info a {
  color: var(--vc-accent-dark);
  text-decoration: underline;
}
.vc-posalji-info a:hover {
  color: #CC0000;
}

/* --- "Moji vicevi" list (vicoteka/moji-vicevi.php) --- */
.vc-my-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.vc-my-row {
  background-color: #fff;
  border: 1px solid var(--vc-border);
  border-radius: 8px;
  padding: .75rem 1rem;
}
/* NOT display:flex, deliberately - was flex before, which is what caused a real, confirmed bug:
   a long .vc-my-title wraps onto 2+ lines by itself (normal text wrapping inside that one flex
   item's box), but flexbox lays out siblings as separate boxes along the main axis - it has no
   concept of "flow into the leftover space after a sibling's wrapped last line" the way plain
   inline content does, so .vc-my-status got pushed onto its own flex line below the title instead
   of sitting right after it ("u produžetku"). Fixed by going back to normal inline flow instead:
   .vc-my-title/.vc-my-status are plain inline(-block) content that wraps together like text, and
   .vc-my-toggle is floated right (overflow:hidden here gives it a proper containing block so the
   row's height doesn't collapse around the float). */
.vc-my-row-main {
  overflow: hidden;
}
.vc-my-toggle {
  float: right;
}
.vc-my-title {
  font: 700 1rem "Barlow Semi Condensed";
  color: var(--vc-ink);
  text-decoration: none;
}
a.vc-my-title:hover {
  color: var(--vc-accent);
}
.vc-my-status {
  display: inline-block;
  vertical-align: middle;
  margin-left: .5rem;
  font: 700 .7rem "Barlow Condensed";
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .15rem .5rem;
  border-radius: 4px;
}
.vc-my-status-ok {
  background-color: #d1e7dd;
  color: #0f5132;
}
.vc-my-status-wait {
  background-color: #fff3cd;
  color: #664d03;
}
.vc-my-status-no {
  background-color: #f8d7da;
  color: #842029;
}
.vc-my-row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin-top: .3rem;
  font: 400 .85rem "Barlow Semi Condensed";
  color: var(--vc-ink-soft);
}
/* Only the "Razlog:" LABEL reads in the same soft-ink color as the category/date siblings (direct
   request) - the reason VALUE itself keeps its own original distinguishing red (#842029), only the
   label word was ever meant to match. Wrapped together with the delete button in
   .vc-my-reason-wrap so the two move as one unit rather than splitting apart independently -
   .vc-my-row-meta's own flex-wrap has no idea they belong together otherwise. Below 480px this pair
   is forced onto its own line unconditionally (flex-basis: 100%) rather than only wrapping
   opportunistically when it doesn't fit - direct request ("na užim ekranima razlog i button OBRIŠI
   moraju da pređu u naredni red"), a stronger requirement than plain flex-wrap alone provides.
   Same class reused for the "ceka" status row's izmeni+obriši pair (no "reason" text there, but the
   same generic wrap/pair/force-own-line-below-480px behavior is exactly what's needed) - deleting
   while still pending was added later, matching the site text's own promise that a user can edit or
   delete their submission for as long as it's awaiting review. */
.vc-my-reason-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.vc-my-reason {
  color: #842029;
}
.vc-my-reason-label {
  color: var(--vc-ink-soft);
}
@media (max-width: 480px) {
  .vc-my-reason-wrap {
    flex-basis: 100%;
  }
}
/* Expand/collapse arrow revealing a row's full joke text, direct request ("kao što se na
   hamburger meniju otvaraju podmeniji") - "Moji vicevi" only ever showed a title (or, for
   pending/rejected rows with no real title yet, a 60-char excerpt), never the full text, unlike
   the main public listing's cards. Same mechanism as .mnav-toggle in main_nav.css: rotating
   chevron icon + a max-height-transitioned panel, just re-implemented here with this module's own
   class names since it's a different page/stylesheet, not a shared component. Each row toggles
   independently (not a mutually-exclusive accordion like the hamburger menu's submenus) - there's
   no strong reason to force only one open at a time in a list meant for comparing your own jokes. */
.vc-my-toggle {
  /* float: right (see .vc-my-row-main's own comment) does the "push to the right edge" job that
     margin-left: auto used to do back when this was a flex child - display:flex/align-items here
     now only center the icon glyph within the button's own small box, unrelated to the parent's
     layout mode. */
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--vc-ink-soft);
  display: flex;
  align-items: center;
}
.vc-my-toggle .material-symbols-outlined {
  font-size: 22px;
  transition: transform .2s ease;
}
.vc-my-row.is-expanded .vc-my-toggle .material-symbols-outlined {
  transform: rotate(180deg);
}
.vc-my-text-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.vc-my-row.is-expanded .vc-my-text-panel {
  max-height: 600px;
}
.vc-my-text {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px dashed var(--vc-border);
  font: 400 .9rem "Barlow Semi Condensed";
  color: var(--vc-ink);
  white-space: pre-line;
}
/* "Obriši" button on rejected rows, direct request ("na vicevima koji su odbijeni, mora da postoji
   button 'obriši'") - a rejected vcPending row otherwise sits there forever with no way for the
   submitter to clean it up. Small/muted on purpose - a delete action shouldn't visually compete
   with the row's own content. */
.vc-my-delete-btn {
  background: none;
  border: 1px solid #842029;
  color: #842029;
  font: 600 .75rem "Barlow Condensed";
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .15rem .5rem;
  border-radius: 4px;
  cursor: pointer;
}
.vc-my-delete-btn:hover {
  background-color: #842029;
  color: #fff;
}
/* Isti izgled kao .vc-my-delete-btn (dugme za "obriši" na odbijenim vicevima), samo u accent boji
   umesto crvene - "izmeni" link se prikazuje samo dok vic čeka proveru (status "ceka"), pravo
   dugme ne treba jer ne otvara modal, samo vodi na /vicoteka/mojiViceviEdit. */
.vc-my-edit-link {
  display: inline-block;
  background: none;
  border: 1px solid var(--vc-accent);
  color: var(--vc-accent-dark);
  font: 600 .75rem "Barlow Condensed";
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .15rem .5rem;
  border-radius: 4px;
  text-decoration: none;
}
.vc-my-edit-link:hover {
  background-color: var(--vc-accent);
  color: #fff;
}
/* Custom confirm modal - this project deliberately never uses the native confirm()/alert() dialogs
   anywhere (public site or admin), always a real styled modal instead, so this follows the same
   convention rather than being a one-off exception. */
.vc-confirm-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.vc-confirm-box {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 380px;
  width: 90%;
  text-align: center;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .3);
}
.vc-confirm-title {
  font: 700 1.1rem "Barlow Condensed";
  text-transform: uppercase;
  color: #842029;
  margin-bottom: .5rem;
}
.vc-confirm-text {
  font: 400 .95rem "Barlow Semi Condensed";
  color: var(--vc-ink);
  margin-bottom: 1rem;
}
.vc-confirm-buttons {
  display: flex;
  gap: .5rem;
  justify-content: center;
}
.vc-confirm-cancel {
  background: none;
  border: 1px solid var(--vc-border);
  color: var(--vc-ink-soft);
  padding: .375rem 1rem;
  border-radius: 4px;
  font: 600 .9rem "Barlow Condensed";
  cursor: pointer;
}
.vc-confirm-cancel:hover {
  background-color: #f1f1f1;
}
.vc-random-ttl {
  font: 700 1.1rem "Barlow Condensed";
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vc-accent-dark);
  border-top: 2px solid var(--vc-accent);
  padding-top: .75rem;
  margin: 1rem 0;
}
.vc-random-more {
  text-align: center;
  margin: 1rem 0;
}
.vc-random-more a {
  color: var(--vc-accent-dark);
  font: 700 .95rem "Barlow Condensed";
  text-decoration: none;
}

/* --- search --- */
/* .vc-find-form ima 2 direktna deteta (tekstualno polje, .vc-find-row2 omotač oko kategorije i
   dugmeta) - flex-direction:column ispod 768px slaže njih dva jedno ispod drugog (svako puna
   širina preko align-items:stretch-a), flex-direction:row od 768px na gore ih ređa u jedan red
   (samo tekstualno polje raste, ostalo drži svoju prirodnu širinu). Kategorija i dugme su namerno
   u zajedničkom .vc-find-row2 redu na SVIM širinama (ne samo od 768px), isti obrazac kao recepti-
   jevo .rc-find-row2 - jedna padajuća lista i dugme jedno pored drugog čitljivije stoje nego svako
   u svom punom redu na uskom ekranu. Sortiranje unutar pretrage je uklonjeno - kombinovanje sa
   "najbolje ocenjeni" sortom (koji filtrira samo vicove sa 5+ glasova) je unosilo zabunu jer je
   moglo neočekivano da sakrije stvarne rezultate pretrage; pretraga je sad fiksno sortirana po
   najnovijim, kao kod recepti. */
.vc-search-btn {
  background-color: var(--vc-accent);
  color: #fff;
  border: none;
  padding: .375rem 1rem;
  border-radius: 4px;
  font: 600 .9rem "Barlow Condensed";
  white-space: nowrap;
  transition: background-color .15s ease-in-out;
}
.vc-search-btn:hover {
  background-color: var(--vc-accent-dark);
  color: #fff;
}
.vc-search-reset {
  color: var(--vc-accent);
}
.vc-find-form {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.vc-find-row2 {
  display: flex;
  gap: .5rem;
}
/* Explicit flex-GROW ratios (basis:0%, not literal percentage flex-basis) so the split stays
   exact regardless of the row's own gap - a literal "flex-basis: 70%" on both items would sum to
   100% of the content box BEFORE the gap is subtracted, causing a slight overflow since these
   items don't shrink (flex-shrink 0 would be needed, which then breaks on very narrow width).
   Ratios distributed against the post-gap free space sidestep that entirely and hit the requested
   split exactly at any container width. Two rows below (row2 alone = 70/30, req 30%/20% -> ratio
   3:2 of the whole row once combined with the 50% left for the input). */
.vc-find-select {
  /* Explicit non-auto flex-basis (0%, not "auto") — Bootstrap's own .form-select class sets
     width:100%, and "flex: <n> <n> auto" falls back to reading that width as the flex-basis,
     which can throw off sizing inside a flex row in non-obvious ways. flex-basis:0% sidesteps it
     entirely by never consulting the width property at all. */
  flex: 7 1 0%;
  min-width: 0;
}
.vc-find-row2 .vc-search-btn {
  flex: 3 1 0%;
}
@media (min-width: 768px) {
  .vc-find-form {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
  }
  .vc-find-input {
    /* Same flex-basis:0% reasoning as .vc-find-select above — Bootstrap's .form-control also sets
       width:100%. */
    flex: 5 1 0%;
    min-width: 0;
  }
  /* display:contents un-boxes the wrapper so .vc-find-select/.vc-search-btn become direct flex
     items of .vc-find-form itself - their ratio is then computed against the WHOLE row's free
     space (input+select+button, 5:3:2 = 50%/30%/20%) instead of just row2's own box, matching the
     "of available width" wording used for the one-row case specifically (vs. "of the row" for the
     two-row case, which is row2's own width - see the un-nested rule above). Descendant selectors
     below still match through display:contents (it only affects the box/render tree, not the DOM
     the selectors walk). */
  .vc-find-row2 {
    display: contents;
  }
  .vc-find-select {
    flex: 3 1 0%;
  }
  .vc-find-row2 .vc-search-btn {
    flex: 2 1 0%;
  }
}

/* --- pagination --- */
.vc-pages, .vc-pages-dis {
  box-sizing: border-box;
  border: 1px solid transparent;
}
.vc-pages {
  font: normal .875rem Oswald;
  /* Lightened from --vc-ink (near-black, #222) — same neutral color family, just not as harsh
     next to the light-grey disabled links right beside it. Still a dark neutral, not re-colored. */
  background-color: #454545;
  color: #fff;
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.vc-pages:hover {
  background-color: var(--vc-ink);
  color: #fff;
}
.vc-pages-dis {
  font: normal .875em Oswald;
  background-color: #f7f9fb;
  color: #b7bec7;
  /* Darkened from #c9d1da - the original border was nearly invisible against the #f7f9fb
     background it sits on. */
  border-color: #93a1b0;
}
/* Page-info cell ("strana X od Y") only - a stronger, more readable font color than the plain
   disabled nav links (« / prethodna strana) share via .vc-pages-dis above, since this cell
   carries actual information (current page) rather than just being an inert disabled control. */
.vc-pages-info {
  color: #5a6675;
}

/* --- joke card --- */
.vc-joke-card {
  background-color: #fff;
  border: 1px solid #c3cedb;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  /* Was the Bootstrap mb-4 utility class in the markup — moved into plain CSS so the last card's
     margin can actually be zeroed out below (mb-4 carries !important, which a custom override can
     never win against regardless of selector specificity). */
  margin-bottom: 1.5rem;
  /* Establishes a query container so .vc-joke-meta below can react to THIS card's own rendered
     width, not the viewport's — see the container-query note there for why that distinction is
     the whole point. */
  container-type: inline-size;
}
/* The gap above/below pagination used to be inconsistent — collapsing with whatever preceded it
   (this card's own 1.5rem mb-4-equivalent, or the sort-tabs/notice's own mb-3) always produced a
   bigger gap than pagination's own .25rem (my-1) contributes on the OTHER side, where nothing
   competes with it. Zeroing the last card's own bottom margin here (and the equivalent mb-3 cases
   in _bs_inc/vicoteka/main_index.php) lets pagination's own .25rem be the sole, consistent
   contributor on every side of every pagination instance. */
.vc-joke-list > .vc-joke-card:last-child {
  margin-bottom: 0;
}
.vc-joke-meta {
  /* Full-bleed colored header band above the joke text, direct request. .vc-joke-card's own
     padding (1rem 1.25rem) applies uniformly, so a plain background-color here would only tint
     the meta content's own tight box, not reach the card's edges - negative margins pull this
     strip out to the card's own padding edges (top/left/right, matching .vc-joke-card's own
     border-radius on top so the rounded corners stay clean), then padding puts equivalent
     breathing room back so the id/date/share content isn't flush against the new edges. Color is
     --vc-meta-bg, not --vc-accent-soft (too dark per direct follow-up - lighter than even
     --vc-share-bg, the share-icon circles' own background). */
  background-color: var(--vc-meta-bg);
  margin: -1rem -1.25rem .5rem -1.25rem;
  padding: .6rem 1.25rem;
  border-radius: 8px 8px 0 0;
}
/* On narrow (wrapped) screens .vc-joke-meta's content drops the share icons onto their own line
   below this text instead of side by side, with no gap between the two rows otherwise. The extra
   gap is applied ONLY inside the @container wrapped block below (.6rem there), not here as a base
   rule — a base-level increase was tried once and broke vertical centering on wide screens too,
   confirmed live: align-items:center centers each flex item's margin box, so a bigger
   margin-bottom shifts the item's own visual center upward relative to its siblings even in the
   normal side-by-side row layout, not just once wrapped as originally assumed. Base margin-bottom
   here stays at .35rem, the value the top:3px correction below was originally tuned against. */
.vc-joke-idline {
  margin-bottom: .35rem;
  /* Boxes are already mathematically centered against .vc-joke-share (verified via
     getBoundingClientRect - both compute to the same vertical center within .vc-joke-meta), but
     14px text next to 32px icon circles reads visibly high regardless, same root cause as the
     footer icon nudge above. Small manual correction, screenshot-verified. */
  position: relative;
  top: 3px;
}
/* Container query, not a viewport media query — deliberately. .vc-joke-meta's own content
   (id/date/category text + share icons) wraps whenever the CARD's rendered width drops below
   ~538px (measured directly: 535px wraps, 540px doesn't), and the card's width depends on the
   page layout (sidebar visible or not, column width) which is NOT the same thing as the viewport
   width. A viewport media query here was a real, confirmed bug — e.g. a browser window wide
   enough to keep the desktop sidebar visible could still render a card narrow enough to wrap
   (sidebar eats width a mobile layout wouldn't lose), landing in a "wrapped but not centered"
   dead zone the old @media (max-width:480px) rule never covered, since viewport width alone
   never dropped below its own 480px trigger. @container reacts to the card's actual width
   instead, so this can't happen regardless of what shares the row with the joke list. Threshold
   is 550px (not the measured 538px) for a small safety margin so column mode kicks in at/before
   the real wrap point rather than right at it. flex-direction here is a plain rule (no Bootstrap
   utility sets it), so no !important conflict to work around; align-self on each child only
   affects that one child regardless of the parent's own align-items utility class, since
   align-self always wins for the item it's set on. */
@container (max-width: 550px) {
  .vc-joke-meta {
    flex-direction: column;
  }
  .vc-joke-idline {
    align-self: center;
    margin-bottom: .6rem;
  }
  .vc-joke-share {
    align-self: center;
  }
}
.vc-joke-text {
  white-space: pre-line;
  color: var(--vc-ink);
  font-family: Barlow, Tahoma, Helvetica, "sans-serif";
  line-height: 1.5;
  margin-bottom: .75rem;
  text-align: justify;
}
.vc-joke-footer {
  border-top: 1px solid var(--vc-border);
  padding-top: .6rem;
}
/* Boxes are already mathematically centered (verified via getBoundingClientRect - both groups
   compute to the exact same vertical center), but the link/user glyphs' own ink doesn't fill
   their box as symmetrically as the star glyphs do, so they visually read a couple px high next
   to the star row. Small manual nudge to compensate, screenshot-verified. */
.vc-joke-footer-left {
  position: relative;
  top: 2px;
}
.vc-joke-permalink {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: var(--vc-ink-soft);
  text-decoration: none;
}
.vc-joke-permalink:hover {
  color: var(--vc-accent);
}
.vc-joke-permalink-svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: currentColor;
}
.vc-joke-poster {
  line-height: 1;
  color: var(--vc-ink-soft);
  text-decoration: none;
}
.vc-joke-poster:hover {
  color: var(--vc-accent);
}
.vc-joke-poster-svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.vc-joke-votes {
  color: var(--vc-ink-soft);
}

/* --- rating --- */
/* Two stacked copies of the glyph per star (empty background + a gold copy clipped to a % width)
   instead of a single glyph toggled on/off — lets the average render with its actual fractional
   fill (e.g. 3.6 shows a star 60% filled) rather than rounding to the nearest whole star, which
   used to visibly disagree with the numeric average next to it. Matches how the old pre-_bs_ site
   rendered ratings (precise both numerically and visually). */
.vc-rating {
  display: flex;
}
@media (pointer: coarse) {
  /* Stars sit flush against each other by default — fine with a mouse cursor, but on a touch
     screen it's easy to miss and tap the neighboring star. A small gap gives each star its own
     tappable margin without changing how the fill/hover mechanics work (each star is still its
     own separate .vc-star-wrap). Targets touch input directly (pointer: coarse) instead of a
     viewport-width breakpoint — a phone in landscape can be well past any "narrow screen" cutoff
     and still have exactly the same fat-finger problem, since the issue is the input method, not
     how wide the screen happens to be at the moment. */
  .vc-rating {
    gap: .35rem;
  }
}
.vc-star-wrap {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.vc-rating[data-readonly="1"] .vc-star-wrap {
  cursor: default;
}
.vc-star {
  display: block;
  width: 1.3rem;
  height: 1.3rem;
  transition: fill .1s ease-in-out;
}
.vc-star-bg {
  fill: #ddd1cd;
}
.vc-star-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: width .1s ease-in-out;
}
.vc-star-fill .vc-star {
  fill: #d99a2b;
}
/* Already-rated/locked state gets its own color instead of the same gold as the interactive
   widget — sampled directly from the old site's real rateit star.gif sprite (its "preset" row,
   used for exactly this same already-voted/readonly state), not picked arbitrarily. */
.vc-rating[data-readonly="1"] .vc-star-fill .vc-star {
  fill: #ec6b22;
}

/* --- share bar --- */
@media (max-width: 480px) {
  .vc-share-bar {
    gap: .35rem !important;
  }
}
.vc-share-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--vc-share-bg);
  transition: background-color .15s ease-in-out, transform .15s ease-in-out;
}
.vc-share-icon:hover {
  background-color: var(--brand-color, var(--vc-accent));
  transform: translateY(-2px);
}
.vc-share-svg {
  width: 22px;
  height: 22px;
}
/* Mail's source artwork (email.svg) reads slightly flatter/wider than the other icons — a couple
   extra px of height (stretched via preserveAspectRatio="none" on the svg itself) gives it a more
   natural envelope proportion; width stays the same 22px as every other icon. */
.vc-share-icon[data-key="mail"] .vc-share-svg {
  height: 26px;
}
.vc-share-icon:hover .vc-share-svg {
  fill: #fff !important;
}

/* --- footer disclaimer (samo aService=='vc', _bs_inc/footer.php) --- */
/* Isti tekst kao na starom sajtu (d:\www\az-lisica.rs\inc\footer.php, actPage=='6' grana). Boje
   rotirane (direktan zahtev, tamna --vc-accent-dark pozadina je delovala "previše napadno") -
   sad svetla --vc-accent-soft pozadina sa --vc-accent-dark tekstom, obrnuto od prvog pokušaja,
   i dalje Vicotekina sopstvena paleta. 3 <p> (bio je jedan blok sa <br /><br />) da razmak
   između pasusa bude kontrolisan marginom, ne dvostrukim prelomom reda - manji i precizniji
   nego što <br /><br /> daje. */
.ftVcDisclaimer {
  background-color: var(--vc-accent-soft);
  color: var(--vc-accent-dark);
  font: normal 15px "Barlow Semi Condensed";
  line-height: 1.5;
  /* Bio Bootstrap-ov .p-3 (16px sve strane, nosi !important pa scoped override ne bi mogao da ga
     nadjača) - uklonjen iz markupa, padding sad ovde direktno, ISTIH 16px sa svih strana kao pre
     (prvi pokušaj je greškom smanjio ovo umesto spoljašnje margine iznad kutije - vidi
     .ftVcDisclaimerRow niže za taj, ispravan, deo). */
  padding: 16px;
}
/* Spoljašnja margina IZNAD kutije (ne unutrašnji padding - to je gore, vraćeno na staro) -
   .row.gx-3.mt-2.mb-2 pre nje već nosi mb-2 (8px), pa negativna margina ovde efektivno smanjuje
   taj razmak. */
.ftVcDisclaimerRow {
  margin-top: -4px;
}
.ftVcDisclaimer p {
  margin: 0 0 .5rem 0;
  text-align: justify;
}
.ftVcDisclaimer p:last-child {
  margin-bottom: 0;
}
.ftVcDisclaimer strong {
  color: var(--vc-accent);
}