.bo-menu-btn {
  font: normal 14px Oswald;
  background-color: #f83d3d;
  color: white;
}
.bo-menu-btn:hover {
  background-color: #fdb;
  color: #900;
}
.bo-menu-btn:active, .bo-menu-btn:focus, .bo-menu-btn:target, .bo-menu-btn:active:focus {
  background-color: #900;
  color: #ffd800;
}

.bo-menu-btn-a, .bo-menu-btn-a:hover, .bo-menu-btn-a:active, .bo-menu-btn-a:focus, .bo-menu-btn-a:target, .bo-menu-btn-a:active:focus {
  font: normal 14px Oswald;
  background-color: #ffd800;
  color: black;
}

/* Per-category color system, ported straight from the old site's css/bo.css
   (bo-ctg0..6) — kept as real functional identity (category recognition at a
   glance), not a single section-wide accent like recepti/vicoteka. */
:root {
  --bo-ctg0: #369;
  --bo-ctg1: #036;
  --bo-ctg2: #3797f7;
  --bo-ctg3: #c33;
  --bo-ctg4: #96f;
  --bo-ctg5: #6a0;
  --bo-ctg6: #ff59ac;
  --bo-ctg0-bg: #f5f7f9;
  --bo-ctg1-bg: #e9f7ff;
  --bo-ctg2-bg: #f3fcfc;
  --bo-ctg3-bg: #fff5f0;
  --bo-ctg4-bg: #faf5ff;
  --bo-ctg5-bg: #f0ffe1;
  --bo-ctg6-bg: #fff0f9;
  --bo-ink: #222;
  --bo-ink-soft: #666;
  --bo-border: #dde3ea;
  /* Pozadina spoljnog breadcrumb "rama" (.bcrumb-outer, standard.css) - #fff5f0 (--bo-ctg3-bg)
     malo potamnjeno po zahtevu. Prethodno probano: #dbe9f5 (plava), #EDE4FB (ljubičasta). */
  --bcrumb-outer-bg: #F5E8DE;
}

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

.bo-ctg0, .bo-ctg1, .bo-ctg2, .bo-ctg3, .bo-ctg4, .bo-ctg5, .bo-ctg6 {
  color: #fff;
}
.bo-ctg0 { background-color: var(--bo-ctg0); }
.bo-ctg1 { background-color: var(--bo-ctg1); }
.bo-ctg2 { background-color: var(--bo-ctg2); }
.bo-ctg3 { background-color: var(--bo-ctg3); }
.bo-ctg4 { background-color: var(--bo-ctg4); }
.bo-ctg5 { background-color: var(--bo-ctg5); }
.bo-ctg6 { background-color: var(--bo-ctg6); }

.bo-bg-ctg0 { background-color: var(--bo-ctg0-bg); }
.bo-bg-ctg1 { background-color: var(--bo-ctg1-bg); }
.bo-bg-ctg2 { background-color: var(--bo-ctg2-bg); }
.bo-bg-ctg3 { background-color: var(--bo-ctg3-bg); }
.bo-bg-ctg4 { background-color: var(--bo-ctg4-bg); }
.bo-bg-ctg5 { background-color: var(--bo-ctg5-bg); }
.bo-bg-ctg6 { background-color: var(--bo-ctg6-bg); }

.bo-ctg-badge {
  display: inline-block;
  padding: .3rem .75rem;
  border-radius: 4px;
  font: 700 .8rem "Barlow Condensed";
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* --- article grid card (homepage + category listing + related-articles block) --- */
a.bo-article-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--bo-border);
  border-radius: 8px;
  overflow: hidden;
  transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
}
a.bo-article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -12px rgba(0,0,0,.25);
}
.bo-article-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.bo-article-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease-in-out;
}
.bo-article-card-comments {
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: flex;
  align-items: center;
  line-height: 1;
  gap: .35rem;
  padding: .25rem .75rem;
  border-radius: 100px;
  background-color: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font: 700 .78rem "Barlow Condensed";
}
.bo-article-card-comments .material-symbols-outlined {
  font-size: 1rem;
  line-height: 1;
}
.bo-article-card-comments-num {
  /* Barlow Condensed's baseline sits noticeably lower in its line box than
     the Material Symbols glyph next to it — nudge up to visually align. */
  display: inline-block;
  font-size: calc(.78rem + 1px);
  transform: translateY(-1px);
}
a.bo-article-card:hover .bo-article-card-img img {
  transform: scale(1.04);
}
.bo-article-card-body {
  padding: .75rem 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.bo-article-card-meta {
  margin-bottom: .5rem;
}
.bo-article-card-date {
  font: 400 .8rem "Barlow Condensed";
  color: var(--bo-ink-soft);
}
.bo-article-card-date-mobile {
  display: none;
  font: 400 .9rem "Barlow Condensed";
  color: var(--bo-ink-soft);
  /* Pushes it to the bottom of .bo-article-card-body's flex column regardless of how many lines
     the title above it wraps to, instead of sitting directly under the title (which made it land
     at a different height card-to-card depending on title length). */
  margin-top: auto;
}
.bo-article-card-title {
  font: 700 1.05rem "Barlow Condensed";
  color: var(--bo-ink);
  margin-bottom: .4rem;
}
.bo-article-card-short {
  font: 400 .88rem "Barlow Semi Condensed";
  color: var(--bo-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 480px) {
  /* The card's own internal padding wasn't the main source of the leftover left/right
     whitespace — Bootstrap's row applies its own default 1.5rem gutter (.75rem padding on each
     column) on top of it, and that gutter is what actually dominates once cards are down to
     2-per-row. Shrinking it here is what actually narrows the empty space around the title. */
  .bo-article-grid {
    --bs-gutter-x: .75rem;
    --bs-gutter-y: .75rem;
  }
  .bo-article-card-body {
    padding-left: .5rem;
    padding-right: .5rem;
  }
  .bo-article-card .bo-ctg-badge {
    padding-left: .5rem;
    padding-right: .5rem;
    font-size: .7rem;
  }
  .bo-article-card-title {
    margin-bottom: .25rem;
    /* line-clamp alone only caps the MAXIMUM height (long titles get truncated) — it does not
       reserve that height for SHORTER titles, so a 1-line title still only took up 1 line's
       worth of space and left its date sitting right underneath instead of at the card's bottom.
       min-height is what actually forces every title to occupy the same space regardless of its
       real length, so the date's margin-top: auto has the same room to push into on every card.
       Reserved for 2 lines (not 3) — most titles are 1-2 lines, so a 3-line reservation left a
       block of empty space under most of them; the rare 3-line title just clamps/truncates. */
    line-height: 1.3;
    min-height: calc(1.05rem * 1.3 * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Category badge + date no longer reliably fit on one line once cards are 2-per-row — instead
     of wrapping them in place, the date's own copy (see .bo-article-card-date-mobile below)
     takes over here and this one steps aside, leaving just the badge in the meta row. */
  .bo-article-card-meta .bo-article-card-date {
    display: none;
  }
  .bo-article-card-date-mobile {
    display: block;
  }
}

/* --- compact card variant (detail-page "najnovije iz kategorije" mini-grid) --- */
.bo-article-card-compact .bo-article-card-body {
  padding: .5rem .6rem;
}
.bo-article-card-compact .bo-article-card-meta {
  margin-bottom: .3rem;
  flex-wrap: wrap;
  gap: .25rem;
}
.bo-article-card-compact .bo-ctg-badge {
  padding: .15rem .5rem;
  font-size: .65rem;
}
.bo-article-card-compact .bo-article-card-date {
  font-size: .7rem;
}
.bo-article-card-compact .bo-article-card-title {
  font-size: .85rem;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bo-article-card-compact .bo-article-card-comments {
  top: .35rem;
  right: .35rem;
  padding: .15rem .4rem;
  gap: .2rem;
}
.bo-article-card-compact .bo-article-card-comments .material-symbols-outlined {
  font-size: .8rem;
}
.bo-article-card-compact .bo-article-card-comments-num {
  font-size: calc(.65rem + 1px);
}

/* --- hero card (homepage "boHome" istaknuti članak) --- */
.bo-hero {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--bo-ink);
  text-decoration: none;
  color: inherit;
  display: block;
  height: 420px;
}
.bo-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .85;
  transition: transform .4s ease-in-out, opacity .2s ease-in-out;
}
.bo-hero:hover .bo-hero-img {
  transform: scale(1.03);
  opacity: .92;
}
.bo-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,20,20,0) 35%, rgba(20,20,20,.86) 100%);
  pointer-events: none;
}
.bo-hero-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem;
  color: #fff;
}
.bo-hero-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .5rem;
}
.bo-hero-date {
  font: 400 .85rem "Barlow Condensed";
  color: #eee;
}
.bo-hero-title {
  font: 700 1.9rem "Barlow Condensed";
  text-wrap: balance;
  margin-bottom: .35rem;
}
.bo-hero-desc {
  font: 400 .95rem "Barlow Semi Condensed";
  color: #eee;
  max-width: 60ch;
}

/* --- pagination --- */
/* Istorija ove klase (dva promašena pokušaja pre ovog, redom):
   1) max-width:100% !important na ins.adsbygoogle unutar .bo-article-grid - NIJE upalilo, jer
      .bo-pagination-row uopšte nije unutar tog grida (zaseban red ispod njega).
   2) flex-wrap:nowrap + flex-shrink:1/min-width:0 na SVIH pet naših .col-N stavki - potpuno
      pogrešan pravac, potvrđeno screenshot-om ("katastrofa"): Google-ov REMIKS in-feed oglas se
      ubacuje kao 6. dete UNUTAR ovog istog reda (potvrđeno drugim screenshot-om - «/prethodna/
      strana X od Y/sledeća strana u jednom redu, pa ogroman REMIKS blok, pa "»" samo ispod).
      Kad se i REMIKS i naših 5 stavki podjednako smeju smanjivati (flex-shrink:1 na svima), REMIKS
      (ogroman, ali njegov SOPSTVENI min-content skoro da se ne smanjuje - Google-ov unutrašnji
      raspored 5 proizvoda je kruto zadat) je "pobedio" nadmetanje za prostor, a browser je preostalo
      stiskanje preneo na NAŠE pill-ove - min-width:0 im je eksplicitno ukinuo prirodnu zaštitu od
      smanjivanja ispod čitljive veličine sadržaja, pa se tekst sveo na par piksela (slova poređana
      vertikalno, jedno ispod drugog).
   3) TREĆI, konačan pristup - potpuno obrnuta logika: NAŠIH pet .col-N stavki se VRAĆA na
      flex-shrink:0 (Bootstrap-ov default - "nikad se ne smanjuj", eksplicitno ponovljeno ovde radi
      jasnoće da je namerno, ne propust), tako da UVEK zadrže svoju punu, čitljivu širinu bez obzira
      na sve. flex-wrap:nowrap ostaje (sprečava prelazak u novi red). Sav pritisak sabijanja je
      prebačen ISKLJUČIVO na bilo šta DRUGO što se nađe u ovom redu (Google-ov ubačeni element, koji
      nikad ne nosi našu .col-N klasu) preko :not() selektora - flex:1 1 0% (nema sopstvenu osnovnu
      širinu, uzima samo ono što eventualno ostane) + min-width:0 + overflow:hidden ga tera da se
      smanji do praktično nevidljive širine, dok naših 5 stavki (koje već same po sebi popunjavaju
      celih 12/12 kolona) ne ostavljaju ama baš ništa da se REMIKS-u dodeli - efektivno kolabira na
      0px, nevidljiv, umesto da razbije ili sabije naš pravi sadržaj. */
.bo-pagination-row {
  flex-wrap: nowrap;
}
.bo-pagination-row > [class^="col-"] {
  flex-shrink: 0;
}
.bo-pagination-row > *:not([class^="col-"]) {
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
}
.bo-pages, .bo-pages-dis {
  box-sizing: border-box;
  border: 1px solid transparent;
}
.bo-pages {
  font: normal .875rem Oswald;
  background-color: var(--bo-ink);
  color: #ffd800;
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.bo-pages:hover {
  background-color: #f83d3d;
  color: #fff;
}
.bo-pages-dis {
  font: normal .875em Oswald;
  background-color: #f7f9fb;
  color: #b7bec7;
  border-color: #c9d1da;
}

/* --- article detail page --- */
.bo-news-title {
  font: 700 clamp(1.4rem, 1rem + 1.8vw, 2rem) "Barlow Condensed";
  color: var(--bo-ink);
  text-align: center;
  margin: .5rem 0 1rem;
}
.bo-news-shortdesc {
  font: 700 1rem "Barlow Semi Condensed";
  text-align: justify;
  margin-bottom: 1rem;
}
.bo-news-info-container {
  padding: .4rem 0;
  border-top: 1px dotted var(--bo-border);
  border-bottom: 1px dotted var(--bo-border);
  margin-bottom: 1rem;
}
.bo-news-info-datum {
  font: 400 .85rem "Barlow Condensed";
  color: var(--bo-ink-soft);
}
/* Comment/answer-activity badge — sits next to the category badge (not the date, on the other
   side of the same row) so "this article has an active discussion" reads as an attribute of the
   article itself. Same chat_bubble icon AND same size/font metrics as .bo-article-card-comments
   (the equivalent badge on listing thumbnails) for a consistent "this means comments" visual
   language across the module — only background/border/color differ, since this one is a plain
   inline pill rather than an absolute-positioned image overlay (this row has no image behind it). */
.bo-news-comments-badge {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  gap: .35rem;
  padding: .25rem .75rem;
  border-radius: 100px;
  background-color: var(--bo-ctg0-bg);
  border: 1px solid var(--bo-border);
  color: var(--bo-ink-soft);
  font: 700 .78rem "Barlow Condensed";
  text-decoration: none;
  transition: background-color .15s ease-in-out;
}
a.bo-news-comments-badge:hover {
  background-color: var(--bo-border);
  color: var(--bo-ink);
}
.bo-news-comments-badge .material-symbols-outlined {
  font-size: 1rem;
  line-height: 1;
}
.bo-news-comments-badge-num {
  /* Same baseline nudge as .bo-article-card-comments-num — Barlow Condensed sits noticeably
     lower in its line box than the Material Symbols glyph next to it. */
  display: inline-block;
  font-size: calc(.78rem + 1px);
  transform: translateY(-1px);
}
.bo-najnovije-label {
  font-size: 1.05rem;
}
.bo-news-image {
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.bo-news-image img {
  width: 100%;
  height: auto;
  display: block;
}
.bo-news-text {
  font: 400 1.05rem "Barlow Semi Condensed";
  text-align: justify;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.bo-news-text a {
  color: #06c;
}

.bo-ttl-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .35rem .75rem;
  padding-bottom: .4rem;
  border-bottom: 1px dotted var(--bo-border);
  margin: 1.25rem 0 .75rem;
}
/* "koristan link" - postojalo na staroj verziji sajta (boAR_Domen/boAR_Link), izostavljeno pri
   izradi nove responzivne verzije, sad vraćeno na direktan zahtev - iste dve kolone, samo preneseno
   na deljeni --bo-ink(-soft) sistem boja umesto stare crvene (#a00), da se uklopi sa ostatkom bloga.
   flex:1 1 auto na .bo-news-source - kad stane pored bedža "Tagovi", raste da popuni preostali
   prostor u redu (isti vizuelni rezultat kao justify-content:space-between na roditelju); kad NE
   stane pa .bo-ttl-container-ov flex-wrap prebaci ga u sopstveni red, taj isti flex-grow ga širi na
   PUNU širinu tog reda. Unutar sebe, .bo-news-source je TAKOĐE flex+wrap+justify-content:flex-end -
   dok "koristan link:" i sam link zajedno staju, ostaju u jednom redu (desno poravnati zbog
   flex-end); tek kad ni na punoj širini ne stanu zajedno, link se sam prebacuje u naredni red,
   opet desno poravnat - direktan zahtev ("samo ako ne može da stane u jedan red"). */
.bo-news-source {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: .35rem;
  font: 400 .85rem "Barlow Condensed";
  color: var(--bo-ink-soft);
}
.bo-news-source a {
  color: var(--bo-ink);
  text-decoration: none;
}
.bo-news-source a:hover {
  text-decoration: underline;
}

.bo-article-actions {
  flex-direction: column;
  align-items: center;
  margin-bottom: 1rem;
  gap: .75rem;
}
@media (min-width: 768px) {
  .bo-article-actions {
    flex-direction: row;
    justify-content: space-between;
  }
}

.bo-news-tags-container {
  gap: .4rem;
  margin-bottom: .5rem;
}
.bo-news-tag {
  padding: .3rem .6rem;
  background-color: #FFD800;
  color: #222;
  font: 700 .7rem "Barlow Semi Condensed";
  text-decoration: none;
}
.bo-news-tag:hover {
  background-color: #990000;
  color: #FFFFFF;
}

.bo-other-container {
  padding-top: .5rem;
  border-top: 1px dotted var(--bo-border);
  margin-bottom: 1rem;
}
.bo-other-container a {
  color: #a00;
  font-style: italic;
}

/* --- rate widget (article/comment/answer like-dislike) --- */
.bo-rate-container {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.bo-rate-count {
  display: inline-block;
  font: 700 1.1rem "Barlow Condensed";
  line-height: 1;
  color: var(--bo-ink-soft);
  min-width: 1.2rem;
  text-align: center;
}
.bo-rate-like, .bo-rate-dislike {
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  font-variation-settings: 'FILL' 0;
  color: var(--bo-ink-soft);
}
.bo-rate-like:hover, .bo-rate-liked { color: #06c; }
.bo-rate-dislike:hover, .bo-rate-disliked { color: #c33; }
.bo-rate-liked, .bo-rate-disliked {
  /* Pre ovoga .bo-rate-liked/.bo-rate-disliked (odvojene klase, ne .bo-rate-like sa modifikatorom -
     zamenjuju je celu, vidi boRateWidget()) nisu imale SVOJE font-size pravilo uopšte, pa su
     nasleđivale ambijentalnih 24px (podrazumevana veličina .material-symbols-outlined glifa) - dok
     je .bo-rate-like/.bo-rate-dislike (interaktivno, još neglasano stanje) bilo eksplicitno 1.3rem
     (20.8px). Otud vidljiva razlika u veličini (potvrđeno uživo, getBoundingClientRect: 24px vs
     20.8px) - direktan zahtev da se izjednače na veću (24px = 1.5rem) vrednost. */
  font-variation-settings: 'FILL' 1;
  font-size: 1.5rem;
}
.bo-rate-liked, .bo-rate-disliked {
  cursor: default;
}

/* --- share bar --- */
.bo-share-bar {
  justify-content: center;
}
/* Isti "invert" tretman kao Vicoteka/Kuhinja (vc_standard.css, "--- share bar ---" - pun komentar/
   rezonovanje tamo): krug beo, glif u --brand-color, hover vraća u normalu (obojen krug, beo glif).
   :not(.share-icon-invert) namerno izostavlja X/Threads iz ovog opšteg pravila - njihovo mirno
   stanje već izgleda identično (postojeći .share-icon-invert mehanizam u standard.css, netaknut),
   dobijaju samo dodatnu hover-inverziju. */
.bo-share-bar .share-icon:not(.share-icon-invert) {
  background-color: #fff;
}
.bo-share-bar .share-icon:not(.share-icon-invert) .share-icon-svg {
  fill: var(--brand-color, #666) !important;
}
.bo-share-bar .share-icon:not(.share-icon-invert):hover {
  background-color: var(--brand-color, #666);
}
.bo-share-bar .share-icon:not(.share-icon-invert):hover .share-icon-svg {
  fill: #fff !important;
}
.bo-share-bar .share-icon-invert:hover {
  background-color: #000;
}
.bo-share-bar .share-icon-invert:hover .share-icon-svg {
  fill: #fff !important;
}

/* --- comments / answers --- */
.bo-comment-container, .bo-answer-container {
  border-radius: 6px;
  padding: .75rem 1rem;
  margin-top: .75rem;
}
.bo-comment-container {
  border: 1px solid #fbeaea;
  background-color: #fffbfb;
}
.bo-answer-container {
  margin-left: 2rem;
  border: 1px solid #f8dcdc;
  background-color: #fef4f4;
}
.bo-comment-info-container, .bo-answer-info-container {
  font: 400 .8rem "Barlow Condensed";
  color: #39c;
  border-bottom: 1px dotted #9cf;
  padding-bottom: .3rem;
  margin-bottom: .5rem;
}
.bo-comment-text, .bo-answer-text {
  font: 400 1rem "Barlow Semi Condensed";
  margin-bottom: .5rem;
}
.bo-comment-service-container, .bo-answer-service-container {
  gap: .5rem;
}
.bo-comment-answer-btn {
  border: none;
  background: none;
  padding: 0;
  color: #06c;
  font: 400 .85rem "Barlow Condensed";
  text-decoration: underline;
  cursor: pointer;
}

/* --- comment / reply form (modernized) --- */
.bo-comment-form-card {
  background-color: #fff;
  border: 1px solid var(--bo-border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-top: .75rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.bo-comment-form-card-nested {
  display: none;
  margin-left: 2rem;
}
.bo-errComment {
  display: none;
  padding: .75rem 1rem;
  margin-top: .5rem;
  border-radius: 8px;
  background-color: #fef1f1;
  color: #900;
  font: 400 .9rem "Barlow Semi Condensed";
  text-align: center;
}
.bo-form-label {
  display: block;
  font: 700 .85rem "Barlow Condensed";
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--bo-ink);
  margin-bottom: .3rem;
}
.bo-optional-note {
  font-weight: 400;
  color: var(--bo-ink-soft);
  font-size: .68rem;
}
.bo-form-input {
  border-radius: 8px;
  border: 1px solid var(--bo-border);
  padding: .55rem .8rem;
  background-color: #fafbfc;
}
.bo-form-input:focus {
  border-color: #f83d3d;
  background-color: #fff;
}
.bo-form-textarea {
  min-height: 90px;
  resize: vertical;
}
.bo-form-rules-panel {
  height: 100%;
  background-color: #fafbfc;
  border: 1px solid var(--bo-border);
  border-radius: 8px;
  padding: .85rem 1rem;
  font-size: .78rem;
  color: var(--bo-ink-soft);
}
.bo-form-rules-panel-title {
  font: 700 .8rem "Barlow Condensed";
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--bo-ink);
  margin-bottom: .4rem;
}
.bo-form-submit {
  display: inline-block;
  border: none;
  border-radius: 100px;
  padding: .5rem 1.5rem;
  background-color: #f83d3d;
  color: #fff;
  font: 700 .9rem "Barlow Condensed";
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.bo-form-submit:hover {
  background-color: #900;
  color: #ffd800;
}

/* --- poll (modernized) --- */
.bo-poll-container {
  border: 1px solid var(--bo-border);
  border-radius: 12px;
  padding: 1.25rem;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  margin-bottom: 1rem;
}
.bo-poll-question {
  display: flex;
  align-items: center;
  gap: .5rem;
  font: 700 1.1rem "Barlow Condensed";
  color: var(--bo-ink);
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--bo-border);
  margin-bottom: .9rem;
}
.bo-poll-question .material-symbols-outlined {
  color: #f83d3d;
  font-size: 1.3rem;
}
.bo-poll-option-row {
  display: flex;
  border: 1px solid var(--bo-border);
  border-radius: 8px;
  padding: .6rem .9rem;
  margin-bottom: .5rem;
  font: 400 .95rem "Barlow Semi Condensed";
  color: var(--bo-ink);
  cursor: pointer;
  transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}
.bo-poll-option-row:hover {
  border-color: #f83d3d;
  background-color: #fff8f8;
}
.bo-poll-radio {
  accent-color: #f83d3d;
  width: 1.05rem;
  height: 1.05rem;
  cursor: pointer;
}
.bo-poll-result-row {
  margin-bottom: .75rem;
}
.bo-poll-option-voted {
  font: 400 .92rem "Barlow Semi Condensed";
  color: var(--bo-ink);
}
.bo-poll-votes {
  font: 700 .88rem "Barlow Condensed";
  color: var(--bo-ink);
}
.bo-poll-votes-n {
  font-weight: 400;
  color: var(--bo-ink-soft);
}
.bo-poll-bar-track {
  height: 8px;
  background-color: #f0f1f3;
  border-radius: 4px;
  overflow: hidden;
  margin-top: .3rem;
}
.bo-poll-bar {
  height: 100%;
  transition: width .4s ease-in-out;
}
.bo-poll-ukupno-container {
  margin-top: .75rem;
  padding-top: .6rem;
  border-top: 1px solid var(--bo-border);
}
.bo-poll-ukupno-label {
  font: 400 .8rem "Barlow Condensed";
  color: var(--bo-ink-soft);
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* --- search --- */
/* Isti obrazac kao Vicoteka/Kuhinja (vc-find-form/rc-find-row2) - tekstualno polje samo za sebe,
   kategorija+dugme uparene u .bo-find-row2 red na SVIM širinama, cela forma prelazi u red tek od
   768px. Boja dugmeta/reset linka je #f83d3d - blog nema jedinstven "accent" kao rc/vc (koristi
   per-kategoriju boje umesto toga), pa je uzeta postojeća crvena koja se već koristi za
   .bo-menu-btn pozadinu i .bo-pages hover, ne nova boja izmišljena samo za ovo. */
.bo-search-btn {
  background-color: #f83d3d;
  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;
}
.bo-search-btn:hover {
  background-color: #900;
  color: #fff;
}
.bo-search-reset {
  color: #f83d3d;
}
.bo-find-form {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.bo-find-row2 {
  display: flex;
  gap: .5rem;
}
.bo-find-select {
  flex: 7 1 0%;
  min-width: 0;
}
.bo-find-row2 .bo-search-btn {
  flex: 3 1 0%;
}
@media (min-width: 768px) {
  .bo-find-form {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
  }
  .bo-find-input {
    flex: 5 1 0%;
    min-width: 0;
  }
  .bo-find-row2 {
    display: contents;
  }
  .bo-find-select {
    flex: 3 1 0%;
  }
  .bo-find-row2 .bo-search-btn {
    flex: 2 1 0%;
  }
}

/* --- layout: content column + right ad column (desktop-only) --- */
/* Isti mehanizam kao Vicoteka (.vc-content-col/.vc-ad-col/.vc-ad-column/.vc-ad-zone/.vc-ad-item) -
   Blog nema levi kategorija-sidebar (nije traženo), pa je ovo samo dvostubačna mreža: sadržaj +
   oglasi. Vidi js/blog/boAds.js za JS deo (raspored zona, "sudar i guranje" pri skrolu) i
   vc_standard.css-ov originalni komentar (identičan mehanizam) za punu mehaniku ako zatreba. */
.bo-content-col {
  flex: 1 1 0%;
  min-width: 0;
  padding-right: .5rem;
  padding-left: .5rem;
}
.bo-ad-col {
  box-sizing: border-box;
  flex: 0 0 300px;
  max-width: 300px;
  padding-left: .5rem;
}
.bo-ad-column {
  min-height: calc(100% - .25rem);
  position: relative;
}
.bo-ad-zone {
  position: absolute;
  left: 0;
  right: 0;
}
.bo-ad-item {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Ista zaštita od širenja preko granica kontejnera kao .bo-ad-inline (komentar niže u ovom
     fajlu) - dosad primenjena samo na uklopljena/mobilna mesta, ne i na ovaj, desni sticky stubac
     - direktan izveštaj ("desni stubac iskače udesno") potvrdio da isti problem (spoljni oglasni
     servis čija je unutrašnja širina vezana za viewport, ne za pravog roditelja) pogađa i sticky
     stubac, ne samo uklopljena mesta. */
  overflow: hidden;
}
.bo-ad-item + .bo-ad-item {
  margin-top: 10px;
}
.bo-ad-unit + .bo-ad-unit {
  margin-top: 10px;
}
.bo-ad-unit img,
.bo-ad-unit ins {
  max-width: 100%;
  height: auto;
}
/* Direktan izveštaj, potvrđen screenshot-om sa produkcije: donja paginacija (col-1/3/4/3/1 red,
   boShowPagination()) se ponekad lomi u novi red na PUNOJ širini ekrana ("desktop"), nasumično -
   uzrok NIJE bilo koja od naših sopstvenih oglasnih zona (.bo-ad-item/.bo-ad-inline, obe već imaju
   overflow:hidden zaštitu, vidi niže) - uzrok su Google-ovi "Auto ads"/in-feed oglasi (aktivirani
   sajt-šire preko GTM-a, vidi [[lisica-vicoteka-noadsense-production]] za potvrdu da su GTM Auto
   Ads stvarno aktivni na ovom sajtu), koji SAMOSTALNO, van naše kontrole, ubacuju čitave lažne
   "kartice" (<div class="google-auto-placed">) DIREKTNO kao sestrinske stavke unutar
   .bo-article-grid, mimo boAdSlot()/boAdInline() sistema u potpunosti - potvrđeno na priloženom
   screenshot-u (kartica "REMIKS" patike, kartica-visoka-reklama za bioskop). Google-ov <ins
   class="adsbygoogle"> tu često nosi INLINE width preko sopstvenog JS-a (viša specifičnost od
   običnog CSS pravila), pa običan max-width:100% ne bi pobedio - otud !important, isto rešenje
   koje Google-ova sopstvena dokumentacija preporučuje za tačno ovaj problem (oglas širi od
   kontejnera). NIJE nezavisno reprodukovano na dev-u (dev domen ne dobija stvarne Auto ads, isti
   razlog kao ostale zone) - probaj na produkciji i javi da li se paginacija posle ovoga i dalje
   lomi u novi red. */
.bo-article-grid > .google-auto-placed {
  max-width: 100%;
  overflow: hidden;
}
.bo-article-grid ins.adsbygoogle {
  max-width: 100% !important;
}
/* Oglasno mesto uglavljeno u sam sadržaj, ispod lg gde desnog stupca nema - isti obrazac kao
   .vc-ad-inline. */
/* max-width je NAMERNO 100% (bilo fiksnih 300px) - direktan zahtev da širina prati ono što je
   dostupno na uskim ekranima ("negde 300px, a negde može i više"), umesto tvrdog gornjeg limita.
   max-height je PROBAN (100px, pa 250px) i KONAČNO ODBAČEN - potvrđeno dva puta na produkciji
   (lisica.rs/blog, ne dev, jer dev domen nikad ne dobija stvarne oglase) da CSS max-height na ovom
   kontejneru UOPŠTE NE UTIČE na to koju veličinu AdSense-ov responsive algoritam bira (isti ~100px
   <ins> i pored max-height:250px), a kad stvarno isporučeni oglas (npr. "matched content" stil,
   više redova) preraste taj max-height, BEZ overflow:hidden (namerno, da se oglas ne bi sekao) se
   samo vizuelno preklapa preko sledećeg elementa (uočeno uživo - pokrio je paginaciju ispod). Pošto
   max-height ionako ne ograničava ono što se servira, uklonjen je potpuno - kontejner sada prati
   stvarnu visinu oglasa, pa se paginacija ispod normalno pomera umesto da se preklapa. Ako ubuduće
   treba tačna kontrola visine, jedini pouzdan put (potvrđeno danas) je Google Ad Manager size
   mapping, isti mehanizam kao header-top slot - ne AdSense responsive format/CSS. */
/* text-align:center dodat direktnim zahtevom ("adsense oglas nije horizontalno centriran, već je
   skroz levo") - margin:auto na samom .bo-ad-inline ne centrira ništa dok mu je max-width:100%
   (nema viška prostora da se raspodeli), a stvarni oglas (<ins style="display:inline-block;
   width:300px...">) je uži od punog kontejnera - text-align:center na roditelju centrira takav
   inline-block sadržaj.
   overflow:hidden dodat direktnim zahtevom, primenjeno na SVE uklopljene zone - AdSense-ov "u
   članku"/"matched content" stil ume da probije širinu svog kontejnera (interna širina vezana za
   viewport, ne za pravog roditelja) - uočeno uživo na zoni 4 ("širi je od samog sajta"), popravljeno
   tamo i sada primenjeno ovde na svih pet uklopljenih mesta odjednom, umesto posebne klase po zoni.
   Ne seče/skriva sam oglas (i dalje je pun i vidljiv unutar ove širine) - samo sprečava vizuelni
   probijaj van kolone sadržaja. */
.bo-ad-inline {
  max-width: 100%;
  margin: .5rem auto;
  text-align: center;
  overflow: hidden;
}
/* Kad je .bo-ad-inline ISTOVREMENO i .col-12 red-stavka unutar .row.g-4 grida (zona 2M na glavnoj
   listi, posle 6. kartice) - sopstvena margina iznad NIJE potrebna, Bootstrap-ov row-gutter
   (margin-top na SVAKOJ stavci reda, uključujući i ovu) već obezbeđuje razmak. Potvrđeno uživo na
   produkciji: bez ovog override-a, sopstvena margin:.5rem (8px, iste specifičnosti kao Bootstrap-
   ovo pravilo ali kasnije u CSS redosledu pa pobeđuje) je NADJAČAVALA Bootstrap-ov
   margin-top:var(--bs-gutter-y) (izmereno uživo, 12px) - iznad je ostajalo samo 8px (prethodna
   kartica nema svoju donju marginu), a ispod 8px+12px=20px (sledeća kartica i dalje nosi svoj
   Bootstrap margin-top, netaknut) - vidljivo neravnomeran razmak. Uklanjanjem margine ovde, i
   iznad i ispod ostaje isključivo Bootstrap-ov gutter (12px), simetrično. */
.col-12.bo-ad-inline {
  /* var(--bs-gutter-y), NE "revert"/"unset" - oba ta keyword-a bi preskočila SVA author-nivo
     pravila (uključujući i Bootstrap-ovo .row>*{margin-top:var(--bs-gutter-y)}) i pala nazad na
     browser-ov default (0px) - probano uživo, rezultat je bio RAZMAK IZNAD potpuno ugašen (0px,
     kartica se lepi direktno na zonu). Ponavljanjem iste custom property vrednosti (nasleđuje se
     sa .row.g-4, trenutno .75rem/12px, ali prati šta god gutter klasa bude) postiže se identičan
     razmak kao između svaka dva reda kartica na ostatku grida - simetrično i iznad i ispod zone,
     bez hardkodovanog broja. margin-bottom:0 je no-op (Bootstrap ionako ne dodaje donju marginu
     na kolone), zadržano radi jasnoće. */
  margin-top: var(--bs-gutter-y);
  margin-bottom: 0;
}

/* --- ankete listing (blog/ankete.php) --- */
.bo-ankete-ttl {
  font: 700 1.6rem "Barlow Condensed";
  color: var(--bo-ink);
  margin: .5rem 0 1rem;
}
/* Generička "nema šta da se prikaže" poruka - koristi se i za praznu listu članaka
   (main_index.php: prazna kategorija/pretraga) i za praznu listu anketa (main_ankete.php).
   Paginacija OSTAJE vidljiva i dalje iznad/ispod ove poruke (direktan zahtev) - ovo samo
   zamenjuje grid sa člancima/anketama, ne dira paginaciju koja ga okružuje. */
.bo-empty-message {
  font: 400 1rem "Barlow Condensed";
  color: var(--bo-ink-soft);
  padding: 2rem 0;
  text-align: center;
}
.bo-ankete-item {
  background-color: #fff;
  border: 1px solid var(--bo-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.bo-ankete-item:last-child {
  margin-bottom: 0;
}
.bo-ankete-article-row {
  display: inline-block;
  margin-top: .75rem;
  padding-top: .6rem;
  border-top: 1px solid var(--bo-border);
  font: 600 .85rem "Barlow Condensed";
}
.bo-ankete-article-label {
  color: #000;
}
.bo-ankete-article-link {
  color: #f83d3d;
  text-decoration: none;
}
.bo-ankete-article-link:hover {
  text-decoration: underline;
}