/* ==========================================================================
   Mojegazdinstvo — Agro Design System
   Custom CSS (agro-* prefix + BEM, nula konflikata sa WoWonder)
   20 sekcija po PRD specifikaciji
   ========================================================================== */

/* ==========================================================================
   1. Design Tokens (:root + .agro-night) + Focus/Disabled stanja
   ========================================================================== */

:root {
  /* Primarni brend */
  --agro-primary:         #2e7d32;
  --agro-primary-dark:    #1b5e20;
  --agro-primary-light:   #4caf50;
  --agro-primary-bg:      #f0f7f0;
  /* „Moje“ u headeru na braon traci: mešavina brend zelene + topli krem (zemlja/list), čitljivo i psihološki mekše od čistog #4caf50 */
  --agro-brand-moje-on-brown: color-mix(in srgb, var(--agro-primary-light) 58%, #efe8dc 42%);

  /* Povrsine — topla bez */
  --agro-surface:         #fafaf8;
  --agro-surface-alt:     #f5f0e8;
  --agro-surface-card:    #fefcf9;
  --agro-surface-input:   #f0f2f5;
  --agro-border:          #e0d8c8;

  /* Akcenti — narandzasta za CTA */
  --agro-accent:          #e67e22;
  --agro-accent-hover:    #d35400;
  --agro-wheat:           #f9a825;

  /* Braon tonovi */
  --agro-brown:           #5d4037;
  --agro-brown-light:     #8d6e63;
  --agro-text:            #1a2e1a;
  --agro-text-secondary:  #3a4e3a;  /* 5.2:1 na #fafaf8 — WCAG AA */
  --agro-text-muted:      #4a5e55;  /* 4.6:1 na #fafaf8 — WCAG AA */

  /* Sistemske */
  --agro-danger:          #c62828;
  --agro-danger-text:     #b71c1c;  /* AA tekst-on-light ≥4.5:1 (FAZA 14.1 K9.5) */
  --agro-error:           #c62828;
  --agro-warning:         #f57f17;
  --agro-success:         #2e7d32;
  --agro-info:            #1565c0;

  /* Tier indikatori */
  --agro-tier-free:       #78909c;
  --agro-tier-premium:    #f9a825;

  /* Premium gold gradient (FAZA 12.5) — za "Otključaj oglašavanje" / "Obnovi premium" CTA */
  --agro-premium-gold-light: #F4C430;
  --agro-premium-gold:       #D4A017;
  --agro-premium-gold-dark:  #B8860B;

  /* Spacing, radius, shadows */
  --agro-radius:          8px;
  --agro-radius-sm:       4px;
  --agro-radius-lg:       12px;
  --agro-radius-pill:     999px;
  --agro-shadow-sm:       0 1px 3px rgba(46,125,50,0.08);
  --agro-shadow-md:       0 4px 16px rgba(46,125,50,0.12);
  --agro-shadow-lg:       0 8px 32px rgba(46,125,50,0.16);

  /* Soft / strong variants (Offers redesign — Faza 7) */
  --agro-primary-soft:    #d8ead9;
  --agro-border-strong:   #c8bfa8;

  /* Stanja */
  --agro-disabled-bg:     #e8e8e8;
  --agro-disabled-text:   #9e9e9e;
  --agro-focus-ring:      0 0 0 3px rgba(46,125,50,0.55);
  --agro-focus-border:    #2e7d32;

  /* Tranzicije */
  --agro-transition-fast: 100ms ease;
  --agro-transition:      200ms ease;
  --agro-transition-slow: 300ms ease;

  /* Border sirine */
  --agro-border-width:    1px;
  --agro-border-width-md: 2px;
  --agro-border-width-lg: 3px;

  /* Razmaci */
  --agro-space-xs:        4px;
  --agro-space-sm:        8px;
  --agro-space-md:        16px;
  --agro-space-lg:        24px;
  --agro-space-xl:        32px;

  /* Z-index (WoWonder navbar = 1030) */
  --agro-z-dropdown:      1031;
  --agro-z-modal:         1060;
  --agro-z-toast:         9000;
  --agro-z-bottom-nav:    1040;

  /* ========================================================================
     Profile widgets v2 (PRD_PROFILE_RIGHT_WIDGETS v1.1) — topla/organska
     Dodaje sage/amber/terra/soil skale + card radius/shadow
     ====================================================================== */

  /* Cream — soft warm card pozadina (toplija od --agro-surface-card) */
  --agro-cream:           #FAF6EE;

  /* Sage — list/zemlja zelena, 3 nivoa */
  --agro-sage-50:         #EEF4EC;  /* subtle wash bg */
  --agro-sage-100:        #DCE8D8;  /* hover/selected bg */
  --agro-sage-700:        #4A6B45;  /* text on cream — 7.1:1 WCAG AAA */

  /* Amber — žito/sunce, 3 nivoa (--agro-wheat = amber-500 alias) */
  --agro-amber-50:        #FEF7E6;  /* tint */
  --agro-amber-500:       var(--agro-wheat);  /* alias na postojeći #f9a825 */
  --agro-amber-700:       #B6781E;  /* text/border na cream — 4.7:1 WCAG AA */

  /* Terra — terracotta accent (warning/premium) */
  --agro-terra-500:       #C46A4A;

  /* Soil — heading dark (toplija od --agro-brown #5d4037) */
  --agro-soil-700:        #5C4836;

  /* Card radius i shadow — soil-tinted (umesto primary-tinted) */
  --agro-radius-card:        14px;
  --agro-shadow-card:        0 2px 8px rgba(70, 60, 40, 0.06);
  --agro-shadow-card-hover:  0 4px 14px rgba(70, 60, 40, 0.10);
}

/* Dark mode */
body.agro-night {
  --agro-surface:         #1a2e1a;
  --agro-surface-alt:     #142514;
  --agro-surface-card:    #1e3a1e;
  --agro-surface-input:   #2a3a2a;
  --agro-text:            #e0e0e0;
  --agro-text-secondary:  #9e9e9e;
  --agro-text-muted:      #8fad9f;  /* 5.1:1 na #1e231e — WCAG AA */
  --agro-border:          #2a4a2a;
  --agro-primary-bg:      #0d1f0d;

  /* Profile widgets v2 dark overrides */
  --agro-cream:           #1e3320;  /* warm-tinted dark surface */
  --agro-sage-50:         #1a2a18;
  --agro-sage-100:        #243a22;
  --agro-sage-700:        #b5cfae;  /* light sage text na dark cream */
  --agro-amber-50:        #2a2418;
  --agro-amber-700:       #f0c878;
  --agro-soil-700:        #d4c5a9;  /* light beige za heading na dark */
  --agro-shadow-card:        0 2px 8px rgba(0, 0, 0, 0.30);
  --agro-shadow-card-hover:  0 4px 14px rgba(0, 0, 0, 0.40);
}

/* Focus stanja — globalno */
*:focus-visible {
  outline: none;
  box-shadow: var(--agro-focus-ring);
  border-color: var(--agro-focus-border);
}

/* Disabled stanja */
.agro-disabled,
[disabled] {
  background-color: var(--agro-disabled-bg) !important;
  color: var(--agro-disabled-text) !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   2. Tipografija + Google Fonts
   ========================================================================== */

:root {
  --agro-font-body:     'Nunito Sans', 'Open Sans', -apple-system, sans-serif;
  --agro-font-heading:  'Roboto Slab', serif;
  --agro-font-size:     16px;
  --agro-font-size-base: 16px;
  --agro-font-size-sm:  14px;
  --agro-font-size-xs:  13px;
  --agro-font-size-h1:  26px;
  --agro-font-size-h2:  22px;
  --agro-font-size-h3:  18px;
  --agro-line-height:   1.65;
}

/* A1 — Tipografija baza */
body {
  font-family: var(--agro-font-body);
  font-size: var(--agro-font-size);
  line-height: var(--agro-line-height);
  color: var(--agro-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--agro-font-heading);
  color: var(--agro-text);
  line-height: 1.3;
}

h1 { font-size: var(--agro-font-size-h1); }
h2 { font-size: var(--agro-font-size-h2); }
h3 { font-size: var(--agro-font-size-h3); }

a {
  color: var(--agro-primary);
  transition: color var(--agro-transition);
}

@media (hover: hover) {
  a:hover {
    color: var(--agro-primary-dark);
  }
}

/* ==========================================================================
   3. WoWonder globalni overrides (btn, link, panel boje, form inputs)
   ========================================================================== */

/* --- BODY & PAGE BACKGROUND --- */
body {
  background: var(--agro-surface) !important;
  font-family: var(--agro-font-body) !important;
  font-size: var(--agro-font-size) !important;
  color: var(--agro-text) !important;
}

/* --- CHAT PANEL LEGACY PADDING OVERRIDE ---
 * WoWonder default `layout/style.phtml` adds `padding-right: 250px` na body i .navbar-default
 * kad je chatSystem == 1, da rezerviše prostor za legacy desni chat sidebar.
 * Mojegazdinstvo koristi custom .agro-chat-panel (fixed overlay, ne sidebar sa rezerviranim prostorom),
 * pa je ova 250px rezervacija "mrtav" prostor koji guši header i glavni sadržaj udesno.
 * Override: nula padding-right — `.agro-chat-panel` stoji kao overlay iznad sadržaja. */
html body,
body,
.navbar-default,
.navbar.navbar-default,
.wo_about_wrapper_parent {
  padding-right: 0 !important;
}

.wow_main_float_head {
  right: 0 !important;
}

/* --- NAVBAR COMPLETE RESTYLE — Agro braon stil (modernized) --- */
.navbar-default,
.navbar.navbar-default,
body .navbar-default {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.06) 100%),
    var(--agro-brown) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 1px 3px rgba(45, 30, 20, 0.18),
    0 6px 20px rgba(45, 30, 20, 0.12) !important;
  height: 56px !important;
  min-height: 56px !important;
  backdrop-filter: saturate(1.08);
  -webkit-backdrop-filter: saturate(1.08);
}

/* Header container — prati istu širinu kao .container ispod (page-content align) */
.header-fixed1000,
.header-fixed1200 {
  max-width: 1400px !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Header flex layout — Logo | Nav | Search | Icons (Facebook/LinkedIn pattern)
   Padding 15px (match Bootstrap .container default) za piksel-preciznu alignment sa sadržajem. */
.header-fixed1000 > .container-fluid {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  padding: 0 15px !important;
  height: 56px;
}

/* Leva zona: Logo + Home/Create */
.wow_hdr_innr_left {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px;
  height: 56px;
}

/* Logo — agro brend (mark + MojeGazdinstvo): veći mark, heading font, čitljivo na braon */
.wow_hdr_innr_left .brand.header-brand {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 0 2px !important;
  margin-right: 6px !important;
  height: 56px;
  flex-shrink: 0;
  min-width: min-content;
  text-decoration: none !important;
  transition: opacity var(--agro-transition), transform var(--agro-transition-fast);
}

.wow_hdr_innr_left .brand.header-brand:hover,
.wow_hdr_innr_left .brand.header-brand:focus-visible {
  opacity: 0.98;
}

.wow_hdr_innr_left .brand.header-brand:focus-visible {
  outline: 2px solid var(--agro-primary-light);
  outline-offset: 3px;
  border-radius: var(--agro-radius-sm);
}

/* Logo mark — ista boja kao „Moje“: mask (PNG oblik) + background var(--agro-brand-moje-on-brown) */
.header-brand__mark {
  display: block;
  box-sizing: border-box;
  flex: 0 0 auto;
  flex-shrink: 0;
  width: auto;
  aspect-ratio: 1;
  max-height: 52px;
  min-height: 44px;
  max-width: min(240px, 100%);
  background-color: var(--agro-brand-moje-on-brown);
  /* Celobrojni px visine → manje mutno skaliranje mask PNG-a (fallback bez round) */
  height: clamp(44px, 2vw + 38px, 52px);
  height: round(nearest, clamp(44px, 2vw + 38px, 52px), 1px);
  transform: translateZ(0);
  backface-visibility: hidden;
  isolation: isolate;
  mask-image: var(--header-brand-mask, url("../../img/brand/mojegazdinstvo-logo-mark.svg"));
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: left center;
  mask-mode: alpha;
  -webkit-mask-image: var(--header-brand-mask, url("../../img/brand/mojegazdinstvo-logo-mark.svg"));
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* Ciste konture — bez drop-shadow / glow / sijanja. Boja iz background-color daje rez kroz mask alpha. */
  filter: none;
  transition: background-color var(--agro-transition-fast);
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .header-brand__mark {
    mask-image: var(--header-brand-mask-2x, var(--header-brand-mask));
    -webkit-mask-image: var(--header-brand-mask-2x, var(--header-brand-mask));
  }
}

/* Samo širina !important — visinu određuju pravila ispod + breakpointi (visina !important bi ih pregazila) */
.navbar-default .navbar-brand .header-brand__mark,
.wow_hdr_innr_left a.brand.header-brand .header-brand__mark {
  width: auto !important;
  max-width: min(240px, 100%) !important;
}

.wow_hdr_innr_left .brand.header-brand:hover .header-brand__mark {
  filter: brightness(1.06);
}

/* Jedan font (Roboto Slab), jedna težina — oba dela vizuelno „jedna reč“, boja nosi akcenat brenda */
.header-brand__wordmark {
  font-family: var(--agro-font-heading);
  font-weight: 800;
  font-style: normal;
  /* px-based zato sto je html root 10px (62.5% hack); clamp ide na efektivnu velicinu */
  font-size: clamp(22px, 1vw + 18px, 30px);
  letter-spacing: 0.025em;
  line-height: 1;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.header-brand__moje,
.header-brand__gazdinstvo {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  font-style: inherit;
  letter-spacing: inherit;
}

.header-brand__moje {
  /* Fallback ako pregledač nema color-mix */
  color: #c4d6a8;
  color: var(--agro-brand-moje-on-brown);
  /* Bez text-shadow — ciste konture na braon, boja sama nosi kontrast */
  text-shadow: none;
}

.header-brand__gazdinstvo {
  color: #ffffff;
  text-shadow: none;
}

/* Leva navigacija (Home, Create) — kompaktni icon-only stil */
.wow_hdr_innr_left .nav.navbar-nav {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  height: 56px;
}

.wow_hdr_innr_left .nav.navbar-nav > li {
  display: flex;
  align-items: center;
  height: 56px;
}

.wow_hdr_innr_left .nav.navbar-nav > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  height: 40px;
  min-width: 40px;
  padding: 0 10px !important;
  border-radius: 10px !important;
  color: #f5ede6 !important;
  transition: background 160ms cubic-bezier(0.2, 0, 0, 1),
              color 160ms cubic-bezier(0.2, 0, 0, 1),
              transform 120ms cubic-bezier(0.2, 0, 0, 1) !important;
}

.wow_hdr_innr_left .nav.navbar-nav > li > a:hover,
.wow_hdr_innr_left .nav.navbar-nav > li > a:focus {
  background: rgba(255, 255, 255, 0.14) !important;
}

.wow_hdr_innr_left .nav.navbar-nav > li > a:active {
  background: rgba(0, 0, 0, 0.14) !important;
  transform: scale(0.97);
}

.wow_hdr_innr_left .nav.navbar-nav > li > a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

/* Home/Create tekst label — sakrij na < 1200px, prikaži samo ikonu */
.wow_hdr_innr_left .nav.navbar-nav > li > a > span {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 6px;
}

@media (max-width: 1199px) {
  .wow_hdr_innr_left .nav.navbar-nav > li > a > span {
    display: none !important;
  }
}

/* Home/Create SVG ikone — uniformna veličina */
.wow_hdr_innr_left .nav.navbar-nav > li > a > svg {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0;
}

/*
 * Leva nav: .navbar-default pravilo postavlja fill na <svg> sa !important;
 * fill se nasleđuje na path/line — outline (stroke) ikone bi bile puna ispuna.
 * Create (.head_name_links) zadržava popunjenu ikonu — isključen iz override-a.
 */
.wow_hdr_innr_left .nav.navbar-nav > li:not(.head_name_links) > a > svg path,
.wow_hdr_innr_left .nav.navbar-nav > li:not(.head_name_links) > a > svg line,
.wow_hdr_innr_left .nav.navbar-nav > li:not(.head_name_links) > a > svg polyline,
.wow_hdr_innr_left .nav.navbar-nav > li:not(.head_name_links) > a > svg circle,
.wow_hdr_innr_left .nav.navbar-nav > li:not(.head_name_links) > a > svg rect {
  fill: none !important;
}

/* Centralna zona: Search bar — flex-grow popunjava prostor */
#wo_home_search {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 520px !important;
  margin: 0 !important;
}

#wo_home_search > li {
  width: 100%;
  min-width: 0;
}

#wo_home_search .navbar-form {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#wo_home_search .search-input {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 10px !important;
  color: #fff !important;
  padding: 7px 16px 7px 36px !important;
  height: 36px !important;
  font-size: 14px !important;
  width: 100% !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 160ms cubic-bezier(0.2, 0, 0, 1),
              border-color 160ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 160ms cubic-bezier(0.2, 0, 0, 1) !important;
}

#wo_home_search .search-input::placeholder {
  color: rgba(245, 237, 230, 0.62) !important;
}

#wo_home_search .search-input:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

#wo_home_search .search-input:focus,
#wo_home_search .search-input:focus-visible {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12) !important;
  outline: none !important;
}

#wo_home_search .inner-addon .glyphicon,
#wo_home_search .inner-addon .feather-search {
  color: rgba(245, 237, 230, 0.6) !important;
  top: 50%;
  transform: translateY(-50%);
}

/* Desna zona: Action ikone — uniforman spacing */
#head_menu_rght {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  float: none !important;
  height: 56px;
  padding: 0 !important;
  list-style: none;
}

/* Svaka ikona u desnom meniju — uniforman 40x40 touch target */
#head_menu_rght > li {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 56px;
}

#head_menu_rght > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  transition: background 160ms cubic-bezier(0.2, 0, 0, 1),
              transform 120ms cubic-bezier(0.2, 0, 0, 1) !important;
}

#head_menu_rght > li > a:hover,
#head_menu_rght > li > a:focus {
  background: rgba(255, 255, 255, 0.14) !important;
}

#head_menu_rght > li > a:active {
  background: rgba(0, 0, 0, 0.14) !important;
  transform: scale(0.94);
}

#head_menu_rght > li > a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

/* SVG ikone u desnom meniju — uniformna veličina 22px */
#head_menu_rght > li > a > svg {
  width: 22px !important;
  height: 22px !important;
}

/* User avatar u desnom meniju — absolute + object-fit (img u flex-u često ostaje uz levi gornji ugao) */
#head_menu_rght .user-avatar {
  position: relative;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  flex-shrink: 0;
}

#head_menu_rght .user-avatar img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  display: block;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  max-height: none !important;
}

/* Profil meni: Bootstrap caret (::after) pravi offset i veću visinu — skloni ga */
#head_menu_rght .user-menu-combination.dropdown-toggle::after {
  display: none !important;
  margin: 0 !important;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
}

#head_menu_rght .user-menu-combination {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Notification badge — pozicioniran relativno prema ikoni */
#head_menu_rght .new-update-alert {
  position: absolute !important;
  top: 6px !important;
  right: 0 !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-align: center !important;
  background: var(--agro-danger) !important;
  color: #fff !important;
  border-radius: 9px !important;
  padding: 0 5px !important;
  z-index: 2;
  border: 2px solid var(--agro-brown) !important;
}

/* Mobilni search toggle (<992px). Desktop: uvek skriveno — specifičnije od #head_menu_rght > li { display:flex!important } */
#head_menu_rght > li.wow_new_search_bbtn {
  display: none !important;
}

/* WoWonder fix: Create dropdown ".head_name_links" — ukloni button stil, koristi isti kao nav ikone */
.head_name_links {
  margin-left: 0 !important;
}

.head_name_links .btn-main {
  height: 40px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border-radius: var(--agro-radius) !important;
  background: transparent !important;
  border: none !important;
}

/* Kreiraj premešten u desni nav (head_menu_rght) — pill button (icon + label), NIJE 40x40 kružić kao ostale ikone.
   Dropdown-menu desno-poravnat da ne preliva preko viewporta. */
#head_menu_rght .head_name_links--right {
  order: -1;
  margin-right: 6px;
}
#head_menu_rght .head_name_links--right > a.dropdown-toggle,
#head_menu_rght .head_name_links--right > a.btn-main {
  width: auto !important;
  min-width: 0 !important;
  height: 44px !important;
  padding: 0 18px 0 14px !important;
  border-radius: 999px !important;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1;
}
#head_menu_rght .head_name_links--right > a.dropdown-toggle:hover,
#head_menu_rght .head_name_links--right > a.btn-main:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}
#head_menu_rght .head_name_links--right > a.dropdown-toggle > svg:not(.hide_fill_svg),
#head_menu_rght .head_name_links--right > a.btn-main > svg:not(.hide_fill_svg) {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px;
  stroke-width: 2 !important;
}
#head_menu_rght .head_name_links--right .agro-create-menu__toggle-label {
  margin-left: 2px;
  font-size: 1.02rem;
  white-space: nowrap;
  line-height: 1;
}
#head_menu_rght .dropdown-menu.agro-create-menu.toright,
#head_menu_rght .dropdown-menu.create_head_menu {
  left: auto !important;
  right: 0 !important;
}

/* Pod 992px — sakriti labelu, zadržati ikonu (kompaktno) */
@media (max-width: 991px) {
  #head_menu_rght .head_name_links--right .agro-create-menu__toggle-label {
    display: none;
  }
  #head_menu_rght .head_name_links--right > a.dropdown-toggle,
  #head_menu_rght .head_name_links--right > a.btn-main {
    padding: 0 10px !important;
  }
}

/* WoWonder default brand override */
.navbar-default .navbar-brand {
  padding: 8px 0 !important;
  height: auto !important;
  margin: 0 !important;
}

.navbar-default .navbar-brand img:not(.header-brand__mark) {
  max-height: 28px !important;
  width: auto !important;
}

/* Nav ikone — svetle na braon pozadini (samo direktne nav linkove, NE dropdown menije) */
.navbar-default > nav .navbar-nav > li > a > svg,
.navbar-default > nav .navbar-nav > li > a > .icon,
.navbar-default #head_menu_rght > li > a > svg,
.navbar-default #head_menu_rght .sixteen-font-size > svg,
.navbar-default .wow_new_search_bbtn svg {
  color: #f5ede6 !important;
  fill: #f5ede6 !important;
}

.navbar-default > nav .navbar-nav > li > a:hover > svg,
.navbar-default > nav .navbar-nav > li > a:focus > svg,
.navbar-default > nav .navbar-nav > li.active > a > svg,
.navbar-default #head_menu_rght > li > a:hover > svg,
.navbar-default #head_menu_rght .sixteen-font-size:hover > svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Nav tekst (Home, Create labele) — svetao na braon */
.navbar-default > nav .navbar-nav > li > a,
.navbar-default > nav .navbar-nav > li > a > span {
  color: #f5ede6 !important;
}

.navbar-default > nav .navbar-nav > li > a:hover,
.navbar-default > nav .navbar-nav > li > a:hover > span {
  color: #ffffff !important;
}

/* ---- RESPONSIVE HEADER OVERRIDES ---- */

/* 992-1199px: Sakrij tekst labele, kompaktniji header */
@media (max-width: 1199px) {
  .header-fixed1000 > .container-fluid {
    padding: 0 12px !important;
  }
  #wo_home_search {
    max-width: 400px !important;
  }
  .header-brand__wordmark {
    font-size: clamp(20px, 0.8vw + 17px, 26px);
  }
  .header-brand__mark {
    height: clamp(42px, 1.2vw + 34px, 50px);
    height: round(nearest, clamp(42px, 1.2vw + 34px, 50px), 1px);
    max-height: 50px;
    min-height: 42px;
    max-width: min(220px, 100%) !important;
  }
}

/* <992px (Bootstrap collapse breakpoint): Search postaje toggle, search bar postaje fixed dropdown */
@media (max-width: 991px) {
  #head_menu_rght > li.wow_new_search_bbtn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #wo_home_search {
    display: none;
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    background: var(--agro-brown) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    z-index: 1029;
  }
  #wo_home_search .search-input {
    background: rgba(255, 255, 255, 0.2) !important;
  }
}

/* <768px: Još kompaktnije */
@media (max-width: 767px) {
  .header-fixed1000 > .container-fluid {
    padding: 0 8px !important;
    gap: 4px;
  }
  .header-brand__mark {
    height: clamp(38px, 2.5vw + 22px, 48px);
    height: round(nearest, clamp(38px, 2.5vw + 22px, 48px), 1px);
    max-height: 48px;
    min-height: 38px;
    max-width: min(200px, 100%) !important;
  }

  .header-brand__wordmark {
    font-size: clamp(18px, 1.2vw + 14px, 23px);
  }
  /* Sakrij Home/Create nav na mobilnom — bottom-nav preuzima */
  .wow_hdr_innr_left .nav.navbar-nav {
    display: none !important;
  }
  #head_menu_rght > li > a {
    width: 36px !important;
    height: 36px !important;
  }
  #head_menu_rght .user-menu-combination {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
  }
  #head_menu_rght > li > a > svg {
    width: 20px !important;
    height: 20px !important;
  }
  #head_menu_rght .user-avatar {
    width: 28px !important;
    height: 28px !important;
  }
}

/* Logo UVEK vidljiv — override WoWonder display:none na 530px */
.header-brand,
.wow_hdr_innr_left .brand.header-brand {
  display: flex !important;
}

/* Dropdown menus — agro stil */
.navbar-default .dropdown-menu {
  border: var(--agro-border-width) solid var(--agro-border) !important;
  border-radius: var(--agro-radius-lg) !important;
  box-shadow: var(--agro-shadow-lg) !important;
  background: var(--agro-surface-card) !important;
  overflow: hidden;
}

.navbar-default .dropdown-menu > li > a,
.navbar-default .dropdown-menu .notification-list a {
  color: var(--agro-text) !important;
  padding: 10px 16px !important;
  font-size: var(--agro-font-size-sm) !important;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.navbar-default .dropdown-menu > li > a:hover,
.navbar-default .dropdown-menu .notification-list a:hover {
  background-color: var(--agro-primary-bg) !important;
  color: var(--agro-primary-dark) !important;
}

/* Account menu */
.navbar-default .dropdown-menu.ani-acc-menu .wo_user_name {
  background: linear-gradient(135deg, var(--agro-primary-bg) 0%, var(--agro-surface-card) 100%) !important;
  border-bottom: 1px solid var(--agro-border) !important;
  padding: 12px 16px !important;
}

/* Hover bug fix: WoWonder default (stylesheet/style.css:361) postavlja
   `.wow_hdr_menu_usr_lnk:hover b { color: #fff }` — beli tekst na svetlozelenoj
   agro pozadini = nečitljivo. Override sa primary-dark za WCAG kontrast. */
.navbar-default .dropdown-menu.ani-acc-menu .wo_user_name .wow_hdr_menu_usr_lnk:hover b,
.navbar-default .dropdown-menu.ani-acc-menu .wo_user_name .wow_hdr_menu_usr_lnk:focus b {
  color: var(--agro-primary-dark) !important;
}
.navbar-default .dropdown-menu.ani-acc-menu .wo_user_name .wow_hdr_menu_usr_lnk:hover {
  background: color-mix(in srgb, var(--agro-primary) 8%, var(--agro-primary-bg)) !important;
}

/* Kreiraj toggle label — razmak između ikone i teksta putem CSS, ne &nbsp; */
.agro-create-menu__toggle-label {
  margin-left: 4px;
}

/* Kreiraj (header) — outline plus, u skladu sa ostalim nav ikonama */
.navbar-default > nav .navbar-nav > li.head_name_links > a > svg,
.navbar-default > nav .navbar-nav > li.head_name_links > a > svg circle,
.navbar-default > nav .navbar-nav > li.head_name_links > a > svg line {
  fill: none !important;
  stroke: currentColor !important;
}

/* ==========================================================================
   Kreiraj padajući meni — Agro Grid + Staggered Animations
   ========================================================================== */

/* Dropdown entrance animation */
@keyframes agro-menu-slide-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Individual item stagger animation */
@keyframes agro-item-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Icon pulse on appear */
@keyframes agro-icon-pulse {
  0%   { transform: scale(0.8); opacity: 0.4; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Subtle shimmer on icon background */
@keyframes agro-shimmer {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

.navbar-default .dropdown-menu.agro-create-menu {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(88px, 1fr));
  grid-auto-rows: auto;
  gap: 6px !important;
  padding: 12px !important;
  min-width: 260px !important;
  min-width: min(100%, 312px) !important;
  max-width: min(calc(100vw - 16px), 360px);
  width: auto !important;
  box-sizing: border-box !important;
  border-radius: var(--agro-radius-lg) !important;
  border: var(--agro-border-width) solid var(--agro-border) !important;
  box-shadow: var(--agro-shadow-lg), 0 0 0 1px rgba(46, 125, 50, 0.05) !important;
  animation: agro-menu-slide-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .navbar-default .dropdown-menu.agro-create-menu,
  .navbar-default .dropdown-menu.agro-create-menu > li,
  .navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__icon {
    animation: none !important;
    transition-duration: 0s !important;
  }
}

.navbar-default .dropdown-menu.agro-create-menu > li {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  animation: agro-item-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Stagger: svaki item ulazi sa zakašnjenjem */
.navbar-default .dropdown-menu.agro-create-menu > li:nth-child(1) { animation-delay: 0.04s; }
.navbar-default .dropdown-menu.agro-create-menu > li:nth-child(2) { animation-delay: 0.08s; }
.navbar-default .dropdown-menu.agro-create-menu > li:nth-child(3) { animation-delay: 0.12s; }
.navbar-default .dropdown-menu.agro-create-menu > li:nth-child(4) { animation-delay: 0.16s; }
.navbar-default .dropdown-menu.agro-create-menu > li:nth-child(5) { animation-delay: 0.20s; }
.navbar-default .dropdown-menu.agro-create-menu > li:nth-child(6) { animation-delay: 0.24s; }

.navbar-default .dropdown-menu.agro-create-menu > li > a.agro-create-menu__link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 12px 8px 10px !important;
  margin: 0 !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  border-radius: var(--agro-radius-lg) !important;
  border: var(--agro-border-width) solid transparent !important;
  border-bottom: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  color: var(--agro-text-secondary) !important;
  position: relative;
  overflow: hidden;
  transition:
    background-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.22s ease,
    color 0.22s ease,
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease;
}

.navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: var(--agro-radius-lg);
  background: rgba(0, 0, 0, 0.05);
  color: var(--agro-text-muted);
  position: relative;
  animation: agro-icon-pulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: inherit;
  transition:
    background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.25s ease,
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease;
}

/* Boje po tipu (BEM modifikator na <li>) — agro paleta sa gradijentom */
.navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__item--album .agro-create-menu__icon {
  color: var(--agro-primary);
  background: linear-gradient(135deg, rgba(46, 125, 50, 0.10), rgba(76, 175, 80, 0.16));
}

.navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__item--ad .agro-create-menu__icon {
  color: var(--agro-accent-hover);
  background: linear-gradient(135deg, rgba(230, 126, 34, 0.10), rgba(243, 156, 18, 0.15));
}

.navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__item--blog .agro-create-menu__icon {
  color: var(--agro-info);
  background: linear-gradient(135deg, rgba(21, 101, 160, 0.08), rgba(33, 150, 243, 0.14));
}

.navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__item--event .agro-create-menu__icon {
  color: #c17900;
  background: linear-gradient(135deg, rgba(249, 168, 37, 0.10), rgba(255, 193, 7, 0.18));
}

.navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__item--group .agro-create-menu__icon {
  color: #00695c;
  background: linear-gradient(135deg, rgba(0, 105, 92, 0.09), rgba(0, 150, 136, 0.15));
}

.navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__item--page .agro-create-menu__icon {
  color: var(--agro-brown-light);
  background: linear-gradient(135deg, rgba(93, 64, 55, 0.08), rgba(141, 110, 99, 0.14));
}

.navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__icon svg {
  flex-shrink: 0;
  width: 22px !important;
  height: 22px !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__icon svg path,
.navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__icon svg line,
.navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__icon svg circle,
.navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__icon svg polyline,
.navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__icon svg rect {
  fill: none !important;
  stroke: currentColor !important;
}

.navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__go svg path,
.navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__go svg polyline {
  fill: none !important;
  stroke: currentColor !important;
}

.navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__label {
  flex: 0 1 auto;
  min-width: 0;
  width: 100%;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  hyphens: auto;
  transition: color 0.2s ease;
}

.navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__go {
  display: none !important;
}

/* Hover — lift + border glow + icon scale */
@media (hover: hover) {
  .navbar-default .dropdown-menu.agro-create-menu > li > a.agro-create-menu__link:hover {
    background-color: var(--agro-primary-bg) !important;
    border-color: rgba(46, 125, 50, 0.2) !important;
    color: var(--agro-text) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.1);
  }

  .navbar-default .dropdown-menu.agro-create-menu > li > a.agro-create-menu__link:hover .agro-create-menu__icon {
    transform: scale(1.1) rotate(-3deg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .navbar-default .dropdown-menu.agro-create-menu > li > a.agro-create-menu__link:hover .agro-create-menu__icon svg {
    transform: scale(1.05);
  }

  .navbar-default .dropdown-menu.agro-create-menu > li > a.agro-create-menu__link:hover .agro-create-menu__label {
    color: var(--agro-text) !important;
  }

  /* Per-type hover: jači gradijenti + glow boja */
  .navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__item--album > a:hover .agro-create-menu__icon {
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.18), rgba(76, 175, 80, 0.25));
    color: var(--agro-primary-dark);
    box-shadow: 0 3px 10px rgba(46, 125, 50, 0.2);
  }

  .navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__item--ad > a:hover .agro-create-menu__icon {
    background: linear-gradient(135deg, rgba(230, 126, 34, 0.2), rgba(243, 156, 18, 0.28));
    box-shadow: 0 3px 10px rgba(230, 126, 34, 0.18);
  }

  .navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__item--blog > a:hover .agro-create-menu__icon {
    background: linear-gradient(135deg, rgba(21, 101, 160, 0.16), rgba(33, 150, 243, 0.24));
    box-shadow: 0 3px 10px rgba(21, 101, 160, 0.15);
  }

  .navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__item--event > a:hover .agro-create-menu__icon {
    background: linear-gradient(135deg, rgba(249, 168, 37, 0.2), rgba(255, 193, 7, 0.3));
    box-shadow: 0 3px 10px rgba(249, 168, 37, 0.2);
  }

  .navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__item--group > a:hover .agro-create-menu__icon {
    background: linear-gradient(135deg, rgba(0, 105, 92, 0.16), rgba(0, 150, 136, 0.24));
    box-shadow: 0 3px 10px rgba(0, 105, 92, 0.18);
  }

  .navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__item--page > a:hover .agro-create-menu__icon {
    background: linear-gradient(135deg, rgba(93, 64, 55, 0.14), rgba(141, 110, 99, 0.22));
    box-shadow: 0 3px 10px rgba(93, 64, 55, 0.15);
  }
}

/* Active/pressed state — press down feedback */
.navbar-default .dropdown-menu.agro-create-menu > li > a.agro-create-menu__link:active {
  transform: translateY(0) scale(0.97) !important;
  transition-duration: 0.08s !important;
}

/* Focus (keyboard nav) */
.navbar-default .dropdown-menu.agro-create-menu > li > a.agro-create-menu__link:focus {
  outline: 2px solid var(--agro-primary);
  outline-offset: 2px;
  border-color: var(--agro-primary) !important;
}
.navbar-default .dropdown-menu.agro-create-menu > li > a.agro-create-menu__link:focus:not(:focus-visible) {
  outline: none;
  border-color: transparent !important;
}

/* --- Night mode: Kreiraj meni --- */
.agro-night .navbar-default .dropdown-menu.agro-create-menu {
  border-color: var(--agro-border) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(46, 125, 50, 0.1) !important;
}

.agro-night .navbar-default .dropdown-menu.agro-create-menu > li > a.agro-create-menu__link {
  color: var(--agro-text-secondary) !important;
}

.agro-night .navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__item--album .agro-create-menu__icon {
  background: linear-gradient(135deg, rgba(129, 199, 132, 0.10), rgba(129, 199, 132, 0.18));
  color: #81c784;
}

.agro-night .navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__item--ad .agro-create-menu__icon {
  background: linear-gradient(135deg, rgba(255, 183, 77, 0.08), rgba(255, 183, 77, 0.15));
  color: #ffb74d;
}

.agro-night .navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__item--blog .agro-create-menu__icon {
  background: linear-gradient(135deg, rgba(100, 181, 246, 0.10), rgba(100, 181, 246, 0.18));
  color: #64b5f6;
}

.agro-night .navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__item--event .agro-create-menu__icon {
  background: linear-gradient(135deg, rgba(255, 213, 79, 0.08), rgba(255, 213, 79, 0.16));
  color: #ffd54f;
}

.agro-night .navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__item--group .agro-create-menu__icon {
  background: linear-gradient(135deg, rgba(77, 182, 172, 0.10), rgba(77, 182, 172, 0.18));
  color: #4db6ac;
}

.agro-night .navbar-default .dropdown-menu.agro-create-menu .agro-create-menu__item--page .agro-create-menu__icon {
  background: linear-gradient(135deg, rgba(188, 170, 164, 0.08), rgba(188, 170, 164, 0.16));
  color: #bcaaa4;
}

@media (hover: hover) {
  .agro-night .navbar-default .dropdown-menu.agro-create-menu > li > a.agro-create-menu__link:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--agro-text) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
}

/* Responsive: 2 kolone na uskim ekranima */
@media (max-width: 420px) {
  .navbar-default .dropdown-menu.agro-create-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-width: min(100%, 240px) !important;
    max-width: calc(100vw - 12px);
    padding: 10px !important;
  }
}

/* --- LEFT SIDEBAR — AGRO NAV REDESIGN --- */
.left-sidebar {
  background: transparent !important;
}

.agro-left-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Sekcija naslovi --- */
.agro-nav-section-title {
  font-family: var(--agro-font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--agro-text-muted) !important;
  margin: 0 0 4px 14px;
  padding: 0;
  line-height: 1.2;
  user-select: none;
}

/* --- Sekcija kartica (ul) --- */
.left-sidebar .agro-nav-section-block > ul {
  background: var(--agro-surface-card) !important;
  border-radius: var(--agro-radius-lg) !important;
  border: var(--agro-border-width) solid var(--agro-border) !important;
  box-shadow: var(--agro-shadow-sm) !important;
  padding: 4px !important;
  list-style: none;
  margin: 0;
}

/* --- Nav stavka link --- */
.left-sidebar .agro-nav-section-block > ul > li > a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-family: var(--agro-font-body) !important;
  font-size: 13px !important;
  font-weight: 500;
  color: var(--agro-text) !important;
  text-decoration: none !important;
  border-radius: var(--agro-radius) !important;
  padding: 7px 10px !important;
  margin: 1px 0 !important;
  position: relative;
  transition: background var(--agro-transition), color var(--agro-transition) !important;
}

/* Levi akcenat za aktivnu stavku — zelena linija */
.left-sidebar .agro-nav-section-block > ul > li > a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  border-radius: 0 3px 3px 0;
  background: var(--agro-primary);
  transition: transform var(--agro-transition);
}

/* Hover */
@media (hover: hover) {
  .left-sidebar .agro-nav-section-block > ul > li > a:hover {
    background: var(--agro-primary-bg) !important;
    color: var(--agro-primary-dark) !important;
  }
}

/* Focus-visible */
.left-sidebar .agro-nav-section-block > ul > li > a:focus-visible {
  outline: none;
  box-shadow: var(--agro-focus-ring);
}

/* --- Aktivna stavka --- */
.left-sidebar .agro-nav-section-block > ul > li.agro-nav-active > a,
.left-sidebar .agro-nav-section-block > ul > li > a.active {
  background: var(--agro-primary-bg) !important;
  color: var(--agro-primary-dark) !important;
  font-weight: 600;
}

.left-sidebar .agro-nav-section-block > ul > li.agro-nav-active > a::before,
.left-sidebar .agro-nav-section-block > ul > li > a.active::before {
  transform: translateY(-50%) scaleY(1);
}

/* --- SVG ikone — stroke stil, monohromne --- */
.left-sidebar .agro-nav-section-block > ul > li > a > svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--agro-text-muted);
  opacity: 0.85;
  transition: color var(--agro-transition), opacity var(--agro-transition), transform var(--agro-transition-fast);
}

/* Hover: ikona se blago pomeri i promeni boju */
@media (hover: hover) {
  .left-sidebar .agro-nav-section-block > ul > li > a:hover > svg {
    color: var(--agro-primary);
    opacity: 1;
    transform: translateX(1px);
  }
}

/* Aktivna stavka: ikona tamno zelena */
.left-sidebar .agro-nav-section-block > ul > li.agro-nav-active > a > svg,
.left-sidebar .agro-nav-section-block > ul > li > a.active > svg {
  color: var(--agro-primary-dark);
  opacity: 1;
}

/* Tekst u span-u: sprečava prelom */
.left-sidebar .agro-nav-section-block > ul > li > a > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Feed filter strelica --- */
.left-sidebar .agro-nav-section-block .wow_side_post_fltr > .order_by > svg {
  color: var(--agro-text-muted);
  opacity: 0.7;
  transition: color var(--agro-transition);
}

.left-sidebar .agro-nav-section-block .wow_side_post_fltr > .order_by:hover > svg {
  color: var(--agro-primary);
  opacity: 1;
}

/* --- DESNI SIDEBAR --- */
.sidebar-conatnier {
  background: transparent;
}

.sidebar-conatnier .sidebar,
.sidebar-conatnier > div {
  background: var(--agro-surface-card) !important;
  border-radius: var(--agro-radius-lg) !important;
  border: var(--agro-border-width) solid var(--agro-border) !important;
  box-shadow: var(--agro-shadow-sm) !important;
  margin-bottom: 12px !important;
  overflow: hidden;
}

/* Desna kolona — bez spoljašnje kartice; .agro-widget, .wow_content i ostalo zadržavaju svoje */
.sidebar-conatnier .sidebar.rightcol {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  overflow: visible;
}

/* Dropup u sidebar footer-u — kad je meni otvoren */
.sidebar-conatnier .sidebar.rightcol:has(.sun_foot_drop_menu.open),
.sidebar-conatnier .sidebar.rightcol.has-open-menu {
  overflow: visible !important;
}

/* --- CONTENT AREA — wow_content kartice --- */
.wow_content,
body .wow_content {
  background-color: var(--agro-surface-card) !important;
  border: var(--agro-border-width) solid var(--agro-border) !important;
  border-radius: var(--agro-radius-lg) !important;
  box-shadow: var(--agro-shadow-sm) !important;
  padding: 16px !important;
}

.wow_sett_content {
  padding: 4px 20px 20px !important;
}

/* --- FORME — wow_form_fields, create-page form --- */
.wow_form_fields {
  margin-bottom: 16px !important;
}

.wow_form_fields label {
  font-family: var(--agro-font-body) !important;
  font-size: var(--agro-font-size-sm) !important;
  font-weight: 600 !important;
  color: var(--agro-text) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.wow_form_fields input[type="text"],
.wow_form_fields input[type="email"],
.wow_form_fields input[type="tel"],
.wow_form_fields input[type="url"],
.wow_form_fields input[type="number"],
.wow_form_fields input[type="password"],
.wow_form_fields select,
.wow_form_fields textarea {
  width: 100% !important;
  border: var(--agro-border-width) solid var(--agro-border) !important;
  border-radius: var(--agro-radius) !important;
  padding: 10px 14px !important;
  font-size: 16px !important;
  font-family: var(--agro-font-body) !important;
  color: var(--agro-text) !important;
  background-color: var(--agro-surface-card) !important;
  transition: border-color var(--agro-transition), box-shadow var(--agro-transition) !important;
  min-height: 44px !important;
}

.wow_form_fields input:focus,
.wow_form_fields select:focus,
.wow_form_fields textarea:focus {
  border-color: var(--agro-primary) !important;
  box-shadow: var(--agro-focus-ring) !important;
  outline: none !important;
}

.wow_form_fields .help-block {
  font-size: var(--agro-font-size-xs) !important;
  color: var(--agro-text-muted) !important;
  margin-top: 4px !important;
}

.wow_form_fields.invite-user-combine {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin-bottom: 0 !important;
}

.wow_form_fields.invite-user-combine .form-control {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}

.wow_form_fields.invite-user-combine .btn {
  position: static !important;
  top: auto !important;
  right: auto !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  min-width: 44px !important;
  height: auto !important;
  line-height: 1 !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.wow_form_fields.invite-user-combine .btn svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
}

/* Input group addon — za URL prefiks */
.input-group-addon {
  background: var(--agro-surface-alt) !important;
  border-color: var(--agro-border) !important;
  color: var(--agro-text-muted) !important;
  font-size: var(--agro-font-size-sm) !important;
  border-radius: var(--agro-radius) 0 0 var(--agro-radius) !important;
}

.input-group .form-control:last-child,
.input-group-addon + .form-control,
.input-group-addon + input {
  border-radius: 0 var(--agro-radius) var(--agro-radius) 0 !important;
}

/* --- PAGE HEADING — wo_page_hdng (Glass card: gradient + glow, moderan) ---
   Spec: docs/design-specs/profile-shell.md (FAZA 12.x — section header redesign)
   Vizuelni paterni: diagonal gradient surface + rounded-square icon sa glow,
   mixed-case heading, pill action chip desno. */
.wo_page_hdng {
  position: relative;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--agro-primary-bg) 65%, transparent) 0%,
      var(--agro-surface-card) 55%,
      color-mix(in srgb, var(--agro-primary-bg) 35%, transparent) 100%) !important;
  color: var(--agro-text) !important;
  border: 1px solid color-mix(in srgb, var(--agro-primary) 14%, transparent) !important;
  border-radius: var(--agro-radius-lg) !important;
  padding: 16px 20px !important;
  margin-bottom: 14px !important;
  box-shadow:
    0 1px 2px rgba(46, 125, 50, 0.04),
    0 8px 24px -10px rgba(46, 125, 50, 0.12) !important;
  overflow: hidden;
}
/* Suptilan dekorativni glow blob u gornjem desnom uglu — daje "glass" feel. */
.wo_page_hdng::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, color-mix(in srgb, var(--agro-primary) 14%, transparent) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.wo_page_hdng .wo_page_hdng_innr {
  position: relative;
  z-index: 1;
  color: var(--agro-text) !important;
  font-family: var(--agro-font-heading) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  display: flex;
  align-items: center;
  gap: 14px;
}

.wo_page_hdng .wo_page_hdng_innr a,
.wo_page_hdng .wo_page_hdng_innr div {
  color: var(--agro-text) !important;
}

/* Ikona u zaobljenom kvadratu — sa primary-bg pozadinom, primary ikon i suptilan glow.
   Resetuje legacy "border-radius: 50%" iz WoWonder default stylesheet-a. */
.wo_page_hdng .wo_page_hdng_innr > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  margin-right: 0 !important;
  background: linear-gradient(135deg, var(--agro-surface-card) 0%, var(--agro-primary-bg) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--agro-primary) 18%, transparent) !important;
  border-radius: 11px !important;
  color: var(--agro-primary) !important;
  flex-shrink: 0;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.7) inset,
    0 4px 10px -3px rgba(46, 125, 50, 0.18);
}

.wo_page_hdng .wo_page_hdng_innr svg {
  color: var(--agro-primary-dark) !important;
  fill: var(--agro-primary-dark) !important;
  width: 18px !important;
  height: 18px !important;
}

/* Familly-list-link (npr. "Članovi porodice" pored Pratioci/Following) — tonal chip.
   Reset WoWonder default (stylesheet/style.css:504 daje rgba(0,0,0,0.07) outer
   container koji bi se duplirao sa našim chipom). */
.wo_page_hdng .familly-list-link {
  margin-left: auto;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--agro-font-body) !important;
  font-size: var(--agro-font-size-xs) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  position: relative;
  z-index: 1;
}
.wo_page_hdng .familly-list-link a {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: var(--agro-primary-bg) !important;
  border: 0 !important;
  border-radius: 999px;
  color: var(--agro-primary-dark) !important;
  text-decoration: none;
  transition: background var(--agro-transition), color var(--agro-transition);
  box-shadow: none;
  line-height: 1.4;
}
.wo_page_hdng .familly-list-link a:hover,
.wo_page_hdng .familly-list-link a:focus {
  background: color-mix(in srgb, var(--agro-primary) 18%, var(--agro-primary-bg)) !important;
  color: var(--agro-primary-dark) !important;
  text-decoration: none;
}

/* Pag_neg_padd — heading "sedi" na vrhu wow_content kartice (negativni margin
   prekriva 15px wow_content padding gore i bočno). U novom dizajnu radius
   ostaje gore, dno je ravno (heading se vizualno spaja sa sadržajem ispod). */
.pag_neg_padd {
  margin: -15px -15px 16px !important;
  border-top-width: 0 !important;
  border-left-width: 0 !important;
  border-right-width: 0 !important;
  border-radius: var(--agro-radius-lg) var(--agro-radius-lg) 0 0 !important;
}
/* Pag_alone modifikator (samostalna kartica, bez susednog sadržaja) — pun border */
.wo_page_hdng.pag_alone:not(.pag_neg_padd) {
  border: 1px solid color-mix(in srgb, var(--agro-primary) 14%, transparent) !important;
}

/* --- TABS — navigacija unutar stranica --- */
.nav-tabs,
.wo_content_tabs,
.page-tabs,
.page_link_list {
  border-bottom: 2px solid var(--agro-border) !important;
  background: transparent !important;
}

.nav-tabs > li > a,
.wo_content_tabs > li > a,
.page_link_list > li > a {
  font-family: var(--agro-font-body) !important;
  font-weight: 600 !important;
  font-size: var(--agro-font-size-sm) !important;
  color: var(--agro-text-secondary) !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  padding: 10px 16px !important;
  transition: all var(--agro-transition) !important;
  margin-bottom: -2px !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li > a.active,
.wo_content_tabs > li.active > a,
.page_link_list > li.active > a,
.page_link_list > li > a.active {
  color: var(--agro-primary) !important;
  border-bottom-color: var(--agro-primary) !important;
  background: transparent !important;
}

.nav-tabs > li > a:hover,
.wo_content_tabs > li > a:hover,
.page_link_list > li > a:hover {
  color: var(--agro-primary) !important;
  border-bottom-color: var(--agro-primary-light) !important;
  background: transparent !important;
}

/* --- PROFIL stranice --- */
.wo_user_profile_cover,
.cover_photo_wrap {
  border-radius: var(--agro-radius-lg) !important;
  overflow: hidden !important;
}

.wo_user_profile .user-meta,
.user_info_card {
  font-family: var(--agro-font-body) !important;
}

.wo_user_profile .user-meta .user-name a,
.user_info_card .user-name {
  font-family: var(--agro-font-heading) !important;
  font-size: var(--agro-font-size-h2) !important;
  color: var(--agro-text) !important;
  font-weight: 700 !important;
}

/* --- ALERT BOKSOVI --- */
.alert-warning {
  background-color: rgba(249, 168, 37, 0.12) !important;
  border-color: var(--agro-wheat) !important;
  color: var(--agro-brown) !important;
  border-radius: var(--agro-radius) !important;
}

.alert-danger {
  background-color: rgba(198, 40, 40, 0.08) !important;
  border-color: var(--agro-danger) !important;
  color: var(--agro-danger) !important;
  border-radius: var(--agro-radius) !important;
}

.alert-success {
  background-color: rgba(46, 125, 50, 0.08) !important;
  border-color: var(--agro-primary) !important;
  color: var(--agro-primary-dark) !important;
  border-radius: var(--agro-radius) !important;
}

.alert-info {
  background-color: rgba(21, 101, 192, 0.08) !important;
  border-color: var(--agro-info) !important;
  color: var(--agro-info) !important;
  border-radius: var(--agro-radius) !important;
}

/* --- BADGE — bg-main WoWonder klasa --- */
.bg-main {
  background-color: var(--agro-primary) !important;
  color: #ffffff !important;
}

a.bg-main:hover {
  background-color: var(--agro-primary-dark) !important;
}

/* --- btn-mat WoWonder material dugme --- */
.btn-mat {
  font-family: var(--agro-font-body) !important;
  border-radius: var(--agro-radius) !important;
}

.btn-main.btn-mat,
.btn-primary.btn-mat {
  background-color: var(--agro-primary) !important;
  color: #ffffff !important;
}

.btn-main.btn-mat:hover,
.btn-primary.btn-mat:hover {
  background-color: var(--agro-primary-dark) !important;
}

/* --- SECOND FOOTER (glavni podnožni pravac; sidebar ima poseban karticu-stil) --- */
.second-footer,
.footer-wrapper {
  background: var(--agro-surface-alt) !important;
  border-top: var(--agro-border-width) solid var(--agro-border) !important;
  font-family: var(--agro-font-body) !important;
}

.footer-wrapper-sidebar {
  font-family: var(--agro-font-body) !important;
}

/* --- MODALI — WoWonder popup dialozi --- */
.wow_pops,
.modal-content {
  border-radius: var(--agro-radius-lg) !important;
  border: none !important;
  box-shadow: var(--agro-shadow-lg) !important;
}

.wow_pops .wow_pops_head,
.modal-header {
  background: linear-gradient(135deg, var(--agro-primary) 0%, var(--agro-primary-dark) 100%) !important;
  color: #ffffff !important;
  border-radius: var(--agro-radius-lg) var(--agro-radius-lg) 0 0 !important;
  padding: 14px 20px !important;
}

.wow_pops .wow_pops_head h4,
.wow_pops .wow_pops_head .close,
.modal-header .modal-title,
.modal-header .close {
  color: #ffffff !important;
}

/* Modal izbor jezika — kolona ilustracije kao header (braon brend) */
#select-language .lang_select_modal .modal-content {
  background: var(--agro-surface-card) !important;
}

#select-language .lang_select_modal .modal-body {
  background: var(--agro-surface-card) !important;
}

#select-language .modal-dialog.lang_select_modal .language_info,
#select-language .wow_mat_mdl.lang_select_modal .language_info,
#select-language .lang_select_modal .language_info {
  background: var(--agro-brown) !important;
  border: var(--agro-border-width) solid var(--agro-brown-light);
  border-radius: var(--agro-radius-sm);
  padding: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#select-language .lang_select_modal .language_info .agro-lang-modal__title {
  color: #f5ede6 !important;
  font-family: var(--agro-font-heading);
  font-weight: 700;
  margin: 0 0 10px;
  text-align: center;
  width: 100%;
}

#select-language .lang_select_modal .language_info svg {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 220px;
  margin: 0 auto;
}

#select-language .lang_select_modal .modal-body .row > .col-md-4:first-child {
  background: transparent !important;
  border-right: var(--agro-border-width) solid rgba(93, 64, 55, 0.35);
}

@media (max-width: 991px) {
  #select-language .lang_select_modal .modal-body .row > .col-md-4:first-child {
    border-right: none;
    border-bottom: var(--agro-border-width) solid rgba(93, 64, 55, 0.35);
  }
}

/* Modal jezici — kartice; Srpski pun red na vrhu (veci box) */
#select-language .lang_modal.agro-lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

#select-language .lang_modal .language_select {
  margin: 0;
  padding: 0;
  min-width: 0;
}

#select-language .lang_modal .language_select--featured {
  grid-column: 1 / -1;
  order: -1;
}

#select-language .lang_modal .agro-lang-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: var(--agro-radius);
  border: var(--agro-border-width) solid var(--agro-border);
  background: var(--agro-surface-card);
  color: var(--agro-text) !important;
  font-size: var(--agro-font-size-sm);
  font-weight: 600;
  text-decoration: none !important;
  text-align: center;
  line-height: 1.25;
  transition: border-color var(--agro-transition), background-color var(--agro-transition), box-shadow var(--agro-transition), color var(--agro-transition);
  box-sizing: border-box;
  width: 100%;
}

@media (hover: hover) {
  #select-language .lang_modal .agro-lang-box:hover {
    border-color: var(--agro-primary);
    background: var(--agro-primary-bg);
    color: var(--agro-primary-dark) !important;
  }
}

#select-language .lang_modal .agro-lang-box:focus-visible {
  outline: none;
  box-shadow: var(--agro-focus-ring);
}

#select-language .lang_modal .agro-lang-box--featured {
  min-height: 68px;
  padding: 16px 20px;
  font-size: var(--agro-font-size);
  font-weight: 700;
  letter-spacing: 0.02em;
  border-width: var(--agro-border-width-md);
  border-color: var(--agro-primary);
  background: linear-gradient(135deg, var(--agro-primary-bg) 0%, var(--agro-surface-card) 100%);
  box-shadow: var(--agro-shadow-sm);
}

#select-language .lang_modal .language_initial img {
  width: 24px;
  height: 18px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

#select-language .lang_modal .agro-lang-box--featured .language_initial img {
  width: 36px;
  height: 26px;
}

/* --- TOOLTIP & POPOVER --- */
.tooltip-inner {
  background: var(--agro-text) !important;
  border-radius: var(--agro-radius-sm) !important;
  font-family: var(--agro-font-body) !important;
  font-size: var(--agro-font-size-xs) !important;
}

/* --- SCROLLBAR custom (WebKit) --- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--agro-surface);
}

::-webkit-scrollbar-thumb {
  background: var(--agro-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--agro-text-muted);
}

/* --- SELECTION highlight --- */
::selection {
  background-color: rgba(46, 125, 50, 0.2);
  color: var(--agro-text);
}

/* A2 + A7 — Dugmad (WoWonder overrides) */
.btn-main,
.btn-primary {
  background-color: var(--agro-primary) !important;
  border-color: var(--agro-primary) !important;
  color: #ffffff !important;
  border-radius: var(--agro-radius) !important;
  min-height: 44px;
  font-family: var(--agro-font-body);
  font-weight: 600;
  transition: background-color var(--agro-transition), border-color var(--agro-transition), box-shadow var(--agro-transition);
}

@media (hover: hover) {
  .btn-main:hover,
  .btn-primary:hover {
    background-color: var(--agro-primary-dark) !important;
    border-color: var(--agro-primary-dark) !important;
  }
}

.btn-main:focus,
.btn-primary:focus,
.btn-main:focus-visible,
.btn-primary:focus-visible {
  background-color: var(--agro-primary-dark) !important;
  border-color: var(--agro-primary-dark) !important;
  box-shadow: var(--agro-focus-ring) !important;
  outline: none !important;
}

.btn-main:active,
.btn-primary:active {
  background-color: var(--agro-primary-dark) !important;
  border-color: var(--agro-primary-dark) !important;
}

/* Panel + kartice */
.panel,
.wow_content {
  background-color: var(--agro-surface-card) !important;
  border-color: var(--agro-border) !important;
  border-radius: var(--agro-radius) !important;
}

.panel > .panel-heading {
  border-bottom-color: var(--agro-border);
  border-radius: var(--agro-radius) var(--agro-radius) 0 0;
}

/* Form inputs */
.form-control {
  border-color: var(--agro-border) !important;
  border-radius: var(--agro-radius) !important;
  font-size: 16px !important; /* sprečava iOS zoom */
  padding: 12px 16px !important;
  color: var(--agro-text) !important;
  background-color: var(--agro-surface-card) !important;
  transition: border-color var(--agro-transition), box-shadow var(--agro-transition);
}

.form-control:focus {
  border-color: var(--agro-primary) !important;
  box-shadow: var(--agro-focus-ring) !important;
  outline: none !important;
}

.form-control::placeholder {
  color: var(--agro-text-muted);
  opacity: 1;
}

/*
 * Native <select> + .form-control: Bootstrap fiksira height (~34px), a padding 12px vertikalno
 * ostavlja ~10px za tekst — u Chrome/Windows vidljiv je samo vrh slova. height: auto + min-height.
 */
select.form-control {
  height: auto !important;
  min-height: 44px;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  line-height: 1.45 !important;
  vertical-align: middle;
}

/* Dropdown meni */
.dropdown-menu {
  border-color: var(--agro-border) !important;
  border-radius: var(--agro-radius) !important;
  box-shadow: var(--agro-shadow-md) !important;
}

.dropdown-menu > li > a {
  color: var(--agro-text) !important;
  transition: background-color var(--agro-transition), color var(--agro-transition);
}

@media (hover: hover) {
  .dropdown-menu > li > a:hover {
    color: var(--agro-primary) !important;
    background-color: var(--agro-primary-bg) !important;
  }
}

/* Linkovi unutar panela */
.panel a,
.wow_content a {
  color: var(--agro-text);
}

@media (hover: hover) {
  .panel a:hover,
  .wow_content a:hover {
    color: var(--agro-primary);
  }
}

/* Checkbox + radio */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--agro-primary);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Agro form komponente — custom klase */
.agro-input,
.agro-select,
.agro-textarea {
  display: block;
  width: 100%;
  border: var(--agro-border-width) solid var(--agro-border);
  border-radius: var(--agro-radius);
  font-size: 16px;
  font-family: var(--agro-font-body);
  color: var(--agro-text);
  background-color: var(--agro-surface-card);
  padding: 12px 16px;
  line-height: 1.5;
  transition: border-color var(--agro-transition), box-shadow var(--agro-transition);
}

.agro-input:focus,
.agro-select:focus,
.agro-textarea:focus {
  border-color: var(--agro-primary);
  box-shadow: var(--agro-focus-ring);
  outline: none;
}

.agro-textarea {
  min-height: 100px;
  resize: vertical;
}

.agro-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232e7d32' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* ==========================================================================
   4a. Social Core — Post card + publisher box
   ========================================================================== */

/* A3 — Post kartice — bazni stil za sve .post elemente */
.post {
  background: var(--agro-surface-card) !important;
  border-radius: var(--agro-radius) !important;
  border: var(--agro-border-width) solid var(--agro-border) !important;
  box-shadow: var(--agro-shadow-sm) !important;
  margin-bottom: 12px;
}

/* ── Feed kontejner ── */
#posts {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.2vw, 28px);
}

/* Nuliranje margin-bottom jer gap kontroliše razmak */
#posts > .post.panel,
#posts > .post {
  margin-bottom: 0 !important;
}

/* ── Kartica u feedu — okvir + senka (flow-root umesto isolation) ── */
#posts > .post.panel,
#posts > .post:not(.publisher-box) {
  position: relative;
  /* display: flow-root — kreira novi Block Formatting Context.
     Svi interni floatovi (pull-left/right) se čiste UNUTAR kartice
     BEZ klipovanja dropdown menija, tooltipova i reaction popup-a.
     Ovo je ključna razlika od overflow:hidden koji bi sekao menije. */
  display: flow-root;
  border: 1px solid var(--agro-border) !important;
  box-shadow:
    var(--agro-shadow-sm),
    0 14px 28px -14px rgba(46, 125, 50, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  border-radius: calc(var(--agro-radius) + 1px) calc(var(--agro-radius) + 2px) var(--agro-radius) calc(var(--agro-radius) + 1px);
  /* Donja ivica kartice — pojačava vizuelno odvajanje prema sledećem postu */
  border-bottom: 2px solid rgba(46, 125, 50, 0.12) !important;
}

body.agro-night #posts > .post.panel,
body.agro-night #posts > .post:not(.publisher-box) {
  border-color: rgba(255, 255, 255, 0.08) !important;
  border-bottom-color: rgba(76, 175, 80, 0.18) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.35),
    0 12px 28px -12px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  border-radius: var(--agro-radius);
}

/* Feed — kompaktan responsive okvir: zaglavlje + sadržaj jasno odvojeni unutar kartice */
#posts > .post:not(.publisher-box) .post-heading {
  padding: 10px clamp(12px, 3vw, 18px) 8px;
  margin: 0;
  border-bottom: 1px solid var(--agro-border);
}

#posts > .post:not(.publisher-box) .post-description {
  padding-left: clamp(12px, 3vw, 18px);
  padding-right: clamp(12px, 3vw, 18px);
}

@media (max-width: 575px) {
  #posts > .post:not(.publisher-box) .post-heading {
    padding-top: 8px;
    padding-bottom: 6px;
  }
}

/* ── Post heading — flexbox, jedna linija ──
   Pattern: [Avatar ⬌ centar]  Ime · 2h · 🌐   [⋯]
   Avatar vertikalno centriran spram teksta. */
.post .post-heading {
  display: flex !important;
  align-items: center;
  height: auto !important;
  gap: 10px;
}

.post .post-heading > .image,
.post .post-heading > .pull-left.image,
.post .post-heading > [class*="pull-"].image {
  float: none !important;
  flex-shrink: 0;
  order: 0;
}

.post .post-heading > .meta {
  flex: 1;
  min-width: 0;
  order: 1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 6px;
}

.post .post-heading > .pull-right,
.post .post-heading > [class*="pull-right"] {
  float: none !important;
  flex-shrink: 0;
  order: 2;
}

/* Avatar — 40px krug, centriran.
   margin-top:0 override-uje legacy `.wow_post_usr_ava { margin-top: -3px }`
   (stylesheet/style.css linija 4856) koji vuče avatar 3px gore i čini da
   parent .image ima visinu 41 umesto 44. */
.post .post-heading .avatar,
.post .post-heading .avatar.wow_post_usr_ava {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  margin-top: 0;
  vertical-align: middle;
}

.post .post-heading .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  vertical-align: middle;
}

/* Parent .image kontejner mora da ima dovoljno visine za avatar (default
   bootstrap pull-left + sadržaj može da kolaboriše ispod 44). */
.post .post-heading > .image,
.post .post-heading > .pull-left.image {
  min-height: 40px;
  display: flex;
  align-items: center;
}

/* ── .title i h6 na istoj liniji (.meta = inline flex) ── */

/* Ime + bedževi — inline, bez margine */
.post .post-heading .meta .title {
  display: inline;
  margin: 0 !important;
  padding: 0;
  line-height: 1.4;
}

.post .post-heading .meta .title a {
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text) !important;
  font-weight: 600;
  text-decoration: none;
}

.post .post-heading .meta .title a:hover {
  color: var(--agro-primary) !important;
  text-decoration: underline;
}

/* Timestamp + privacy — isti red, inline */
.post .post-heading .meta h6 {
  display: inline;
  margin: 0 !important;
  padding: 0;
  font-size: var(--agro-font-size-xs) !important;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
}

/* Dot separator izmedju imena i vremena */
.post .post-heading .meta h6::before {
  content: '·';
  margin-right: 4px;
  color: var(--agro-text-muted);
  font-weight: 700;
}

.post .post-heading .meta h6 > .time,
.post .post-heading .meta h6 > span,
.post .post-heading .meta h6 > .dropdown {
  display: inline;
  vertical-align: baseline;
}

/* Privacy ikona — manji za inline */
.post .post-heading .meta h6 .post-privacy svg.feather,
.post .post-heading .meta h6 svg.feather {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
}

/* Caret skrivanje */
.post .post-heading .meta h6 .caret {
  display: none;
}

/* Dropdown trigger (⋯ meni) — kružni, hover efekat */
.post .post-heading > .pull-right .dropdown-toggle,
.post .post-heading > [class*="pull-right"] .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--agro-text-muted);
  transition: background var(--agro-transition), color var(--agro-transition);
  padding: 0;
  line-height: 1;
}

.post .post-heading > .pull-right .dropdown-toggle:hover,
.post .post-heading > [class*="pull-right"] .dropdown-toggle:hover {
  background: var(--agro-primary-bg);
  color: var(--agro-text-secondary);
}

.post .post-heading > .pull-right .dropdown-toggle svg,
.post .post-heading > [class*="pull-right"] .dropdown-toggle svg {
  width: 20px;
  height: 20px;
}

/* Shared post heading */
.post .wow_shared_posts .post-heading {
  height: auto !important;
  gap: 10px;
}

/* Mobile — wrap na drugi red ako je predugačko ime */
@media (max-width: 420px) {
  .post .post-heading .meta .title a b {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
  }
}

/* Razmak ispod trake akcija */
#posts .post #wo_post_stat_button {
  margin-bottom: 0 !important;
  padding-bottom: var(--agro-space-xs) !important;
}

/* ── Reakcije popup — ostaje vidljiv zahvaljujući display:flow-root na kartici ──
   (nema overflow:hidden koji bi ga klipovao) */
#posts .post .post-footer .comments-list {
  overflow: visible;
}

/* ── Komentar blok — čišćenje float-ova ── */
.post-footer.post-comments {
  clear: both;
  box-sizing: border-box;
}

/* Prazni .post-footer divovi (likes/wonders/shared/reacted) — kolapsiranje */
.post-footer.post-likes:empty,
.post-footer.post-wonders:empty,
.post-footer.post-shared:empty,
.post-footer.post-reacted:empty {
  display: none !important;
}

/* ── Clearfix za .post — hvata SVE float-ove unutar kartice ── */
.post::after {
  content: '';
  display: table;
  clear: both;
}

/* Svaki .clear div unutar posta — pojačan clearfix */
.post > .clear,
.post .post-footer > .clear {
  clear: both !important;
  display: block;
  height: 0;
}

.post .post-heading .user-name,
.post .post-heading .user-name a {
  color: var(--agro-text) !important;
  font-weight: 600;
}

.post .post-heading .time,
.post .post-heading time {
  color: var(--agro-text-muted) !important;
  font-size: var(--agro-font-size-xs) !important;
}

.post .post-footer a {
  color: var(--agro-text-secondary) !important;
  transition: color var(--agro-transition);
}

@media (hover: hover) {
  .post .post-footer a:hover {
    color: var(--agro-primary) !important;
  }
}

.post .post-footer a:focus,
.post .post-footer a:focus-visible {
  color: var(--agro-primary) !important;
}

/* Tap target za akcije */
.post .post-actions .btn,
.post .post-footer .btn,
.post .post-footer a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Publisher box */
.publisher-box,
.new_post {
  background: var(--agro-surface-card) !important;
  border: var(--agro-border-width) solid var(--agro-border) !important;
  border-radius: var(--agro-radius) !important;
  box-shadow: var(--agro-shadow-sm);
}

.publisher-box textarea,
.new_post textarea,
.publisher-box .form-control,
.new_post .form-control {
  border-color: var(--agro-border) !important;
  background-color: var(--agro-surface-card) !important;
  font-size: 16px !important;
  color: var(--agro-text) !important;
}

.publisher-box textarea:focus,
.new_post textarea:focus,
.publisher-box .form-control:focus,
.new_post .form-control:focus {
  border-color: var(--agro-primary) !important;
  box-shadow: var(--agro-focus-ring) !important;
  outline: none !important;
}

/* Publisher: ime iznad textarea ne sme da ostane preko teksta kada je polje popunjeno (npr. posle zatvaranja overlay) */
.publisher-box .wo_pub_txtara_combo.agro-pub-has-text .sun_pub_name {
  display: none !important;
}

.publisher-box .wo_pub_txtara_combo:has(textarea.postText:not(:placeholder-shown)) .sun_pub_name {
  display: none !important;
}

.publisher-box #post-textarea .wo_pub_txtara_combo {
  position: relative;
  box-sizing: border-box;
  --agro-pub-avatar-size: 48px;
  --agro-pub-avatar-gap: 6px;
  --agro-pub-edge: 12px;
  display: grid;
  grid-template-columns: var(--agro-pub-avatar-size) minmax(0, 1fr);
  grid-template-rows: auto minmax(52px, auto);
  column-gap: var(--agro-pub-avatar-gap);
  row-gap: 4px;
  padding: var(--agro-pub-edge) 44px 8px var(--agro-pub-edge);
  align-items: start;
}

.publisher-box .wo_pub_txtara_combo .post-avatar {
  grid-column: 1;
  grid-row: 1 / 3;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: var(--agro-pub-avatar-size);
  height: var(--agro-pub-avatar-size);
  max-width: none;
  margin: 0 !important;
  border-radius: 50%;
  object-fit: cover;
  justify-self: start;
  align-self: start;
  z-index: 1;
}

.publisher-box .wo_pub_txtara_combo .sun_pub_name {
  grid-column: 2;
  grid-row: 1;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  /* Blago vertikalno poravnanje sa kružnim avatarom */
  transform: translateY(-2px);
  min-width: 0;
  max-width: 100%;
  padding-right: 36px;
  overflow-wrap: anywhere;
  word-break: break-word;
  z-index: 0;
}

.publisher-box .wo_pub_txtara_combo .sun_pub_name span {
  margin: 0 !important;
  padding: 0 !important;
}

.publisher-box .wo_pub_txtara_combo #loading_indicator {
  position: absolute;
  top: calc(var(--agro-pub-edge) + 2px);
  right: 40px;
  z-index: 2;
}

.publisher-box .wo_pub_txtara_combo textarea.postText {
  grid-column: 2;
  grid-row: 2;
  display: block;
  width: 100% !important;
  max-width: 100%;
  min-height: 52px;
  box-sizing: border-box;
}

.publisher-box .wo_pub_txtara_combo .add-emoticons {
  position: absolute;
  top: var(--agro-pub-edge);
  right: var(--agro-pub-edge);
  z-index: 3;
}

/* I8 — Agro brzi tagovi u publisher box-u */
.agro-quick-tags {
  display: none;
  padding: 8px 0 0;
  gap: 8px;
  flex-wrap: wrap;
}

.agro-quick-tags__btn {
  background: var(--agro-primary-bg);
  color: var(--agro-primary);
  border: 1px solid var(--agro-primary-light);
  border-radius: 16px;
  padding: 6px 14px;
  font-size: var(--agro-font-size-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--agro-transition), color var(--agro-transition);
  min-height: 44px;
  line-height: 1.4;
}

.agro-quick-tags__btn:hover,
.agro-quick-tags__btn:focus {
  background: var(--agro-primary);
  color: #ffffff;
  outline: none;
}

.agro-night .agro-quick-tags__btn {
  background: rgba(46, 125, 50, 0.15);
  border-color: rgba(46, 125, 50, 0.3);
}

/* ==========================================================================
   4b. Social Core — Komentari + reakcije + stories
   ========================================================================== */

/* A4 — Komentari */
.comment_wrap,
.comments-area .comment,
.comments_list .comment_item {
  background: var(--agro-surface);
  border-radius: var(--agro-radius-sm);
  transition: background-color var(--agro-transition-fast);
}

@media (hover: hover) {
  .comment_wrap:hover,
  .comments-area .comment:hover,
  .comments_list .comment_item:hover {
    background: var(--agro-surface-alt);
  }
}

/* Ugnjezdeni odgovori — uvlačenje sa zelenim levim bordom */
.comment_wrap .comment_wrap,
.comments-area .comment .comment,
.comments_list .comment_item .comment_item,
.reply-comment,
.comments_area .reply {
  border-left: var(--agro-border-width-md) solid var(--agro-primary-light) !important;
  padding-left: 12px;
  margin-left: 20px;
}

/* Reakcije popup */
.reactions-box,
.reaction-list,
.emojiPicker,
.reactions_popup {
  background: var(--agro-surface-card) !important;
  border: var(--agro-border-width) solid var(--agro-border) !important;
  border-radius: var(--agro-radius) !important;
  box-shadow: var(--agro-shadow-md) !important;
}

/* Aktivni like */
.post .post-footer .like-btn.liked,
.post .post-footer .like_link.active,
.post_like.liked,
.btn-like.active {
  color: var(--agro-primary) !important;
}

/* Stories prsten — nevidjene */
.stories-list .story-item .story-avatar,
.story-circle,
.stories .story .story-img {
  border: var(--agro-border-width-lg) solid var(--agro-primary);
  border-radius: 50%;
}

/* Stories prsten — vidjene */
.stories-list .story-item.seen .story-avatar,
.story-circle.seen,
.stories .story.seen .story-img {
  border-color: var(--agro-border);
}

/* Dugme za kreiranje storija — + ikona u akcentu */
.add-story-btn,
.create-story .add-icon,
.stories .story.add-story .icon {
  color: #ffffff !important;
  background-color: var(--agro-accent) !important;
  border-radius: 50%;
}

.create-story-btn,
.add-story-wrap {
  border: var(--agro-border-width-md) dashed var(--agro-accent);
}

/* ==========================================================================
   5a. Social Core — Chat bubbles + notifikacije
   ========================================================================== */

/* A5 — Chat mehurići */
/* Poslate poruke */
.message-row.sent .message-content,
.message.sent .msg-text,
.chat-message.outgoing .bubble,
.chat-right .chat-body,
.direct-message.mine .message-text {
  background-color: var(--agro-primary) !important;
  color: #ffffff !important;
  border-radius: var(--agro-radius) var(--agro-radius-sm) var(--agro-radius-sm) var(--agro-radius) !important;
}

/* Primljene poruke */
.message-row.received .message-content,
.message.received .msg-text,
.chat-message.incoming .bubble,
.chat-left .chat-body,
.direct-message:not(.mine) .message-text {
  background-color: var(--agro-surface-alt) !important;
  color: var(--agro-text) !important;
  border-radius: var(--agro-radius-sm) var(--agro-radius) var(--agro-radius) var(--agro-radius-sm) !important;
}

/* Online tačka */
.online-dot,
.user-online-badge,
.chat-status.online,
.status-online {
  background-color: var(--agro-success) !important;
  border: 2px solid var(--agro-surface-card);
}

/* Chat header */
.chat-header,
.message-header,
.chat-top-bar {
  background-color: var(--agro-primary-dark) !important;
  color: #ffffff !important;
}

.chat-header a,
.message-header a,
.chat-top-bar a {
  color: #ffffff !important;
}

/* Nepročitani bedž */
.unread-badge,
.chat-badge,
.messages-count,
.notification-count {
  background-color: var(--agro-accent) !important;
  color: #ffffff !important;
  border-radius: 50%;
  font-size: var(--agro-font-size-xs);
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Notifikacije — nepročitane */
.notification-item.unread,
.notif-item.not-seen,
.notifications-list .item.unread {
  background-color: var(--agro-primary-bg) !important;
  border-left: var(--agro-border-width-md) solid var(--agro-primary);
}

/* ==========================================================================
   5b. Social Core — User dugmad (follow, friend, message)
   ========================================================================== */

/* A6 — User akcija dugmad */
/* Follow dugme */
.wo_follow_btn,
.follow-btn,
.btn-follow {
  background-color: var(--agro-primary) !important;
  color: #ffffff !important;
  border-color: var(--agro-primary) !important;
  border-radius: var(--agro-radius) !important;
  font-family: var(--agro-font-body);
  font-weight: 600;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--agro-transition), border-color var(--agro-transition), box-shadow var(--agro-transition);
}

@media (hover: hover) {
  .wo_follow_btn:hover,
  .follow-btn:hover,
  .btn-follow:hover {
    background-color: var(--agro-primary-dark) !important;
    border-color: var(--agro-primary-dark) !important;
    color: #ffffff !important;
  }
}

.wo_follow_btn:focus,
.follow-btn:focus,
.btn-follow:focus {
  box-shadow: var(--agro-focus-ring) !important;
  outline: none !important;
}

/* Unfollow / Unfriend stanje */
.wo_follow_btn.following,
.follow-btn.active,
.btn-unfollow,
.btn-unfriend {
  background-color: transparent !important;
  color: var(--agro-text-muted) !important;
  border-color: var(--agro-border) !important;
}

@media (hover: hover) {
  .wo_follow_btn.following:hover,
  .btn-unfollow:hover,
  .btn-unfriend:hover {
    background-color: var(--agro-surface-alt) !important;
    color: var(--agro-danger) !important;
    border-color: var(--agro-danger) !important;
  }
}

/* Default dugmad (sekundarni stil) */
.btn-default {
  border-color: var(--agro-border) !important;
  color: var(--agro-text) !important;
  background-color: var(--agro-surface-card) !important;
  border-radius: var(--agro-radius) !important;
  min-height: 44px;
  min-width: 44px;
  font-family: var(--agro-font-body);
  transition: background-color var(--agro-transition), color var(--agro-transition), box-shadow var(--agro-transition);
}

@media (hover: hover) {
  .btn-default:hover {
    background-color: var(--agro-primary-bg) !important;
    color: var(--agro-primary) !important;
    border-color: var(--agro-primary) !important;
  }
}

.btn-default:focus {
  box-shadow: var(--agro-focus-ring) !important;
  outline: none !important;
}

/* Prihvatanje zahteva za prijateljstvo */
.btn-accept-friend,
.friend-request-accept {
  background-color: var(--agro-primary) !important;
  color: #ffffff !important;
  border-color: var(--agro-primary) !important;
  border-radius: var(--agro-radius) !important;
  min-height: 44px;
  font-weight: 600;
}

/* Odbijanje zahteva / Uklanjanje */
.btn-decline-friend,
.friend-request-decline {
  background-color: transparent !important;
  color: var(--agro-text-muted) !important;
  border-color: var(--agro-border) !important;
  border-radius: var(--agro-radius) !important;
  min-height: 44px;
}

/* Globalni min tap target za sve klase dugmadi */
.btn,
[role="button"],
button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   6. Header + Desktop Nav
   ========================================================================== */

/* Logo link — svetlo na braon pozadini */
.navbar-header .navbar-brand,
.navbar-header .navbar-brand:hover,
.navbar-header .navbar-brand:focus {
  text-decoration: none;
  color: #ffffff;
}

/* Search — flex fill, responsive (samo desktop — mobilni koristi toggle) */
@media (min-width: 992px) {
  #wo_home_search {
    flex: 1 1 auto !important;
    display: flex !important;
    min-width: 0;
    max-width: 600px;
    margin: 0 auto;
  }
}

#wo_home_search > li.search-container {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

#wo_home_search .navbar-form {
  flex: 1 1 auto;
  padding: 0 !important;
  margin: 11px 0 !important;
}

#wo_home_search .navbar-form .form-group {
  width: 100%;
  margin: 0;
}

/* Pun širinski lanac: li → form → grupa → input (Bootstrap navbar-form često daje form-control width:auto) */
#wo_home_search #navbar-searchbox {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

#wo_home_search .navbar-form .form-group.inner-addon {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  box-sizing: border-box;
}

#wo_home_search .navbar-form .form-control.search-input {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  box-sizing: border-box !important;
  display: block !important;
}

/* Search input — compact pill, centriran tekst */
#wo_home_search input[type="text"],
.search-container .search-input {
  background-color: var(--agro-surface) !important;
  border: 1px solid var(--agro-border);
  border-radius: 20px;
  color: var(--agro-text) !important;
  font-size: 13px;
  padding: 0 16px 0 36px;
  height: 34px;
  min-height: 34px;
  line-height: 34px;
  width: 100% !important;
  text-align: center;
  transition: border-color var(--agro-transition), box-shadow var(--agro-transition);
}

#wo_home_search input[type="text"]::placeholder,
.search-container .search-input::placeholder {
  color: var(--agro-text-muted) !important;
  font-size: 13px;
  text-align: center;
}

#wo_home_search input[type="text"]:focus,
.search-container .search-input:focus {
  background-color: #ffffff !important;
  border-color: var(--agro-primary);
  box-shadow: var(--agro-focus-ring);
  outline: none;
  color: var(--agro-text) !important;
  text-align: left;
  padding-left: 36px;
}

#wo_home_search input[type="text"]:focus::placeholder {
  text-align: left;
  opacity: 0.5;
}

/* Search ikona — minimalistička, pozicionirana levo */
.search-container .inner-addon .glyphicon,
.search-container .inner-addon .feather-search {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--agro-text-muted) !important;
  stroke: var(--agro-text-muted);
  opacity: 0.6;
  pointer-events: none;
  z-index: 2;
}

/* Inner addon relativan za apsolutnu ikonu */
.search-container .inner-addon {
  position: relative;
}

/* Dropdown rezultati — prati širinu inputa */
.search-dropdown-container {
  width: 100% !important;
  min-width: 280px !important;
  max-width: 500px;
}

/* Navigacioni linkovi — svetli na braon pozadini (samo header navbar) */
.navbar-default .navbar-nav > li > a {
  font-weight: 600;
  color: #f5ede6 !important;
  transition: color var(--agro-transition);
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Aktivna stranica — bela ivica dole */
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active > a:hover,
.navbar-default .navbar-nav > li.active > a:focus {
  color: #ffffff !important;
  background-color: transparent !important;
  border-bottom: var(--agro-border-width-lg) solid #ffffff;
}

/* Desne ikone — hover efekat na braon pozadini */
#head_menu_rght .sixteen-font-size {
  padding: 8px 10px !important;
  border-radius: var(--agro-radius);
  transition: background var(--agro-transition);
}

#head_menu_rght .sixteen-font-size:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* User avatar u headeru — hover na jednom prstenu */
#head_menu_rght .user-menu-combination:hover .user-avatar,
#head_menu_rght .user-menu-combination:focus .user-avatar {
  border-color: rgba(255, 255, 255, 0.6) !important;
}

/* Notifikacioni badge — crveni za vidljivost na braon pozadini */
.new-update-alert {
  background-color: #d32f2f !important;
  color: #fff !important;
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 12px;
  font-weight: 700;
  padding: 0 4px;
}

/* Avatar — 32px krug (van header kompakt dugmeta) */
.user-avatar img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
}

/* Premium korisnik — zelena ivica na header wrapperu (ne na img) */
body[data-tier="premium"] #head_menu_rght .user-avatar {
  border-color: var(--agro-primary) !important;
}

.agro-avatar--premium img {
  border-color: var(--agro-primary);
}

/* Mobile header slim (<992px): logo + search ikona + notifikacije */
@media (max-width: 991px) {
  .navbar-nav.navbar-left,
  #head_menu_left {
    display: none !important;
  }

  .navbar {
    min-height: 52px;
  }

  /* Sakrij stavke koje nisu search/notifikacije/poruke */
  #head_menu_rght > li:not(.wow_new_search_bbtn):not(.notification-container):not(.agro-chat-toggle-li) {
    display: none !important;
  }

  /* Search box — smanji flex na tabletu/mobilnom */
  #wo_home_search {
    flex: 0 1 180px !important;
  }

  /* Mobilna search ikona — vidljiva na braon */
  .wow_new_search_bbtn > a svg {
    color: #f5ede6 !important;
    fill: #f5ede6 !important;
  }

  /* Prostor dnu stranice zbog bottom nav */
  body {
    padding-bottom: 72px;
  }
}


/* ==========================================================================
   7a. Bottom Nav (mobilni — fixed, <992px)
   ========================================================================== */

.agro-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--agro-z-bottom-nav);
  background: var(--agro-surface-card);
  border-top: var(--agro-border-width) solid var(--agro-border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  height: 64px;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 991px) {
  .agro-bottom-nav {
    display: flex;
  }
}

@media (min-width: 992px) {
  .agro-bottom-nav {
    display: none !important;
  }
}

/* Stavka navigacije */
.agro-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 48px;
  min-height: 48px;
  padding: 4px 8px;
  color: var(--agro-text-muted);
  text-decoration: none;
  border-radius: var(--agro-radius-sm);
  transition: color var(--agro-transition);
  -webkit-tap-highlight-color: transparent;
}

.agro-bottom-nav__item:hover,
.agro-bottom-nav__item:focus {
  color: var(--agro-primary);
  text-decoration: none;
  outline: none;
}

.agro-bottom-nav__item:focus-visible {
  box-shadow: var(--agro-focus-ring);
}

/* Aktivna stavka */
.agro-bottom-nav__item--active {
  color: var(--agro-primary) !important;
}

/* Active ikona — bele konture u zelenom krugu (Material 3 / iOS pattern).
   Stroke=white override-uje SVG fill="none" stroke="currentColor".
   Background+border-radius pravi okrugli accent badge oko line-art ikone.
   Padding=6px daje 24+12=36px total bez deformacije SVG path-ova (content-box).
   Inset 1px box-shadow daje meku ivicu na svetloj bottom-nav pozadini. */
.agro-bottom-nav__item--active .agro-bottom-nav__icon {
  background: var(--agro-primary);
  border-radius: 50%;
  padding: 6px;
  stroke: #fff;
  fill: none;
  box-sizing: content-box;
  box-shadow: 0 1px 3px rgba(46, 125, 50, 0.25);
}

/* Ikona */
.agro-bottom-nav__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: background var(--agro-transition), stroke var(--agro-transition), padding var(--agro-transition);
}

/* Labela */
.agro-bottom-nav__label {
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}


/* ==========================================================================
   7b. Bottom Nav — Center CTA dugme
   ========================================================================== */

/* Centralni "+" element — izdignut iznad trake */
.agro-bottom-nav__item--center {
  position: relative;
  top: -12px;
  min-width: 56px;
  min-height: 56px;
  padding: 0;
  color: transparent !important;
}

/* CTA krug — braon pozadina (token), bela hamburger ikona.
   Funkcija: otvara agro-main-nav-sheet sa left-sidebar sadržajem. */
.agro-bottom-nav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--agro-brown);
  color: #fff;
  box-shadow: var(--agro-shadow-md);
  transition: background-color var(--agro-transition), transform var(--agro-transition), box-shadow var(--agro-transition);
}

.agro-bottom-nav__item--center:hover .agro-bottom-nav__cta,
.agro-bottom-nav__item--center:focus .agro-bottom-nav__cta {
  background-color: var(--agro-brown-light);
  transform: scale(1.08);
  box-shadow: var(--agro-shadow-lg);
}

.agro-bottom-nav__item--center:active .agro-bottom-nav__cta {
  transform: scale(0.96);
}

.agro-bottom-nav__item--center:focus-visible {
  box-shadow: none;
}

.agro-bottom-nav__item--center:focus-visible .agro-bottom-nav__cta {
  box-shadow: var(--agro-shadow-md), var(--agro-focus-ring);
}


/* ==========================================================================
   7c. "Uskoro" badge — Pijaca Coming Soon indikatori u navigaciji
   ========================================================================== */

/* Sidebar pill — stavka u levom agro-nav-section bloku */
.agro-nav-soon-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6e4a00;
  background-color: var(--agro-wheat);
  border-radius: var(--agro-radius-pill);
  line-height: 1.45;
  vertical-align: middle;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(110, 74, 0, 0.12);
}

/* Kad link ima soon badge, tekst ne sme da zauzme sav slobodan prostor —
   inace bi badge bio gurnut skroz desno (jer span za tekst ima flex:1). */
.left-sidebar .agro-nav-section-block > ul > li > a:has(> .agro-nav-soon-badge) > span:not(.agro-nav-soon-badge) {
  flex: 0 0 auto;
}

/* Badge sedi tik uz tekst — mali negativni margin otkida visak od gap-a.
   Takodje override flex:1 koji default sidebar span rule primenjuje na sve span-ove. */
.left-sidebar .agro-nav-section-block > ul > li > a > .agro-nav-soon-badge {
  flex: 0 0 auto;
  margin-left: -4px;
  min-width: 0;
  overflow: visible;
  width: auto;
}

/* Inline varijanta — u user dropdownu headera (kompaktnija) */
.agro-nav-soon-badge--inline {
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 9px;
  letter-spacing: 0.05em;
}

/* Bottom nav — wrap oko ikone + gold tacka u gornjem desnom uglu */
.agro-bottom-nav__icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.agro-bottom-nav__soon-dot {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 8px;
  height: 8px;
  background-color: var(--agro-wheat);
  border: 2px solid var(--agro-surface, #fff);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(110, 74, 0, 0.15);
  pointer-events: none;
}

/* Top nav (desktop horizontalni) — isti indikator kao bottom nav */
.agro-top-nav-item--has-soon {
  position: relative;
}

.agro-top-nav-link--has-soon {
  position: relative;
}

.agro-top-nav-soon-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background-color: var(--agro-wheat);
  border: 2px solid var(--agro-surface, #fff);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(110, 74, 0, 0.15);
  pointer-events: none;
}

/* Reduced motion — nema potrebe za animacijom ovde, ali držimo consistency */
@media (prefers-reduced-motion: reduce) {
  .agro-nav-soon-badge,
  .agro-bottom-nav__soon-dot,
  .agro-top-nav-soon-dot {
    transition: none;
  }
}


/* ==========================================================================
   8. Levi Sidebar
   ========================================================================== */

/* Aktivna stavka + hover — delegirano na agro-nav sekciju gore (626+) */
/* Legacy selektori za non-agro-nav delove sidebara */
.left-sidebar ul:not(.agro-nav-section-block ul) li a.active,
.left-sidebar ul:not(.agro-nav-section-block ul) li.active > a {
  border-left: var(--agro-border-width-lg) solid var(--agro-primary);
  background-color: var(--agro-primary-bg);
  color: var(--agro-primary-dark) !important;
  padding-left: calc(1em - 3px);
}

.left-sidebar ul:not(.agro-nav-section-block ul) li a:hover,
.left-sidebar ul:not(.agro-nav-section-block ul) li a:focus {
  background-color: var(--agro-surface-alt);
  color: var(--agro-primary) !important;
  text-decoration: none;
}

/* Razdjelnici sekcija */
.left-sidebar ul li hr,
.left-sidebar hr {
  border: none;
  border-top: var(--agro-border-width) solid var(--agro-border);
  margin: 4px 0;
}

/* Premium CTA pri dnu — narandzasta, bijeli tekst */
.left-sidebar .agro-sidebar-cta,
.agro-premium-upgrade,
.agro-sidebar__premium-cta {
  background-color: var(--agro-accent);
  color: #fff !important;
  border-radius: var(--agro-radius);
  padding: 12px 16px;
  margin: 8px;
  display: block;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  min-height: 48px;
  line-height: 1.4;
  transition: background-color var(--agro-transition), transform var(--agro-transition);
}

.left-sidebar .agro-sidebar-cta:hover,
.agro-premium-upgrade:hover,
.agro-sidebar__premium-cta:hover {
  background-color: var(--agro-accent-hover);
  color: #fff !important;
  text-decoration: none;
  transform: translateY(-1px);
}

.left-sidebar .agro-sidebar-cta:focus,
.agro-premium-upgrade:focus,
.agro-sidebar__premium-cta:focus {
  color: #fff !important;
  text-decoration: none;
  box-shadow: var(--agro-focus-ring);
  outline: none;
}


/* ==========================================================================
   9a. Desni Sidebar — Widget layout grid + scroll
   ========================================================================== */

/* Bazna kartica widgeta */
.agro-widget {
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  padding: 16px;
  margin-bottom: 16px;
}

/* Header widgeta — ikona + naslov */
.agro-widget__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.agro-widget__title {
  font-family: var(--agro-font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--agro-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

/* "Pogledajte sve" link */
.agro-widget__more {
  display: block;
  text-align: right;
  font-size: var(--agro-font-size-xs);
  color: var(--agro-primary-dark);
  font-weight: 600;
  margin-top: 12px;
  text-decoration: none;
  transition: color var(--agro-transition-fast);
}

.agro-widget__more:hover,
.agro-widget__more:focus {
  color: var(--agro-primary);
  text-decoration: underline;
}

/* Reset liste unutar widgeta */
.agro-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}


/* ==========================================================================
   9b. Desni Sidebar — Individualni widget stilovi
   ========================================================================== */

/* --- C1: Sezonski podsetnik --- */
.agro-widget--season {
  background: var(--agro-primary-bg);
  border-left: 3px solid var(--agro-primary);
}

.agro-widget--season__heading {
  font-family: var(--agro-font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--agro-primary-dark);
  margin: 0 0 6px;
  line-height: 1.3;
}

.agro-widget--season__text {
  font-size: 13px;
  color: var(--agro-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* --- C2: Savet dana --- */
.agro-widget--tip {
  border-left: 3px solid var(--agro-wheat);
}

.agro-widget--tip__text {
  font-size: 13px;
  font-style: italic;
  color: var(--agro-text);
  margin: 0;
  line-height: 1.6;
}

/* --- C3: Moje zadruge --- */
.agro-widget--my-coops__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agro-widget--my-coops__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.agro-widget--my-coops__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--agro-border);
}

.agro-widget--my-coops__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.agro-widget--my-coops__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--agro-primary-dark);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.agro-widget--my-coops__name:hover,
.agro-widget--my-coops__name:focus {
  text-decoration: underline;
  color: var(--agro-primary);
}

.agro-widget--my-coops__count {
  font-size: 11px;
  color: var(--agro-text-muted);
  line-height: 1.2;
}

/* --- C4: Aktivni oglasi --- */
.agro-widget--listings__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agro-widget--listings__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.agro-widget--listings__img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--agro-radius-sm);
  flex-shrink: 0;
  border: 1px solid var(--agro-border);
}

.agro-widget--listings__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.agro-widget--listings__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--agro-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.agro-widget--listings__name:hover,
.agro-widget--listings__name:focus {
  color: var(--agro-primary-dark);
  text-decoration: underline;
}

.agro-widget--listings__price {
  font-size: 13px;
  font-weight: 700;
  color: var(--agro-accent);
  line-height: 1.2;
}

/* --- C9: Premium CTA --- */
.agro-widget--premium-cta {
  background: linear-gradient(135deg, var(--agro-primary-dark) 0%, var(--agro-primary) 100%);
  border-color: var(--agro-primary-dark);
}

.agro-widget--premium-cta__title {
  font-family: var(--agro-font-heading);
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px;
  line-height: 1.3;
}

.agro-widget--premium-cta__text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 10px;
  line-height: 1.5;
}

.agro-widget--premium-cta__price {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--agro-wheat);
  margin-bottom: 14px;
  line-height: 1.2;
}

.agro-widget--premium-cta__btn.agro-btn {
  background: var(--agro-accent) !important;
  color: #ffffff !important;
  border: none;
  text-align: center;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--agro-radius-sm);
  text-decoration: none;
  transition: background var(--agro-transition-fast);
}

.agro-widget--premium-cta__btn.agro-btn:hover,
.agro-widget--premium-cta__btn.agro-btn:focus {
  background: var(--agro-accent-hover) !important;
  color: #ffffff !important;
  text-decoration: none;
}


/* ==========================================================================
   10. Kartice (product, user, zadruga, gazdinstvo, firma, blog, event)
   ========================================================================== */

/* D1 — Product card */
.agro-product-card {
  background: var(--agro-surface-card);
  border: var(--agro-border-width) solid var(--agro-border);
  border-radius: var(--agro-radius);
  overflow: hidden;
  transition: transform var(--agro-transition), box-shadow var(--agro-transition);
}

@media (hover: hover) {
  .agro-product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--agro-shadow-md);
  }
}

.agro-product-card:focus-within {
  box-shadow: var(--agro-shadow-md);
}

.agro-product-card__image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.agro-product-card__body {
  padding: 12px 16px;
}

.agro-product-card__title {
  font-family: var(--agro-font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--agro-text);
  margin: 0 0 4px;
  line-height: 1.3;
}

.agro-product-card__price {
  font-size: 18px;
  font-weight: 700;
  color: var(--agro-accent);
  margin: 0;
}

.agro-product-card__meta {
  font-size: var(--agro-font-size-xs);
  color: var(--agro-text-muted);
  margin-top: 8px;
  line-height: 1.5;
}

/* Modifikatori statusa */
.agro-product-card--premium {
  border-color: var(--agro-tier-premium);
}

.agro-product-card--expiring {
  border-left: var(--agro-border-width-lg) solid var(--agro-warning);
}

.agro-product-card--expired {
  opacity: 0.6;
}

.agro-product-card--sold {
  opacity: 0.5;
}

/* D2 — User card */
.agro-user-card {
  background: var(--agro-surface-card);
  border: var(--agro-border-width) solid var(--agro-border);
  border-radius: var(--agro-radius);
  padding: 16px;
  text-align: center;
}

.agro-user-card__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 12px;
  object-fit: cover;
  display: block;
}

.agro-user-card__avatar--gazdinstvo {
  border: var(--agro-border-width-lg) solid var(--agro-primary);
  border-radius: 50%;
}

.agro-user-card__avatar--firma {
  border: var(--agro-border-width-lg) solid var(--agro-brown);
  border-radius: var(--agro-radius);
}

.agro-user-card__name {
  font-weight: 600;
  color: var(--agro-text);
  font-size: var(--agro-font-size-sm);
  margin: 0 0 4px;
}

.agro-user-card__type {
  font-size: var(--agro-font-size-xs);
  color: var(--agro-text-muted);
  margin: 0;
}

/* D3 — Zadruga card */
.agro-zadruga-card {
  background: var(--agro-surface-card);
  border: var(--agro-border-width) solid var(--agro-border);
  border-radius: var(--agro-radius);
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  transition: box-shadow var(--agro-transition);
}

@media (hover: hover) {
  .agro-zadruga-card:hover {
    box-shadow: var(--agro-shadow-sm);
  }
}

.agro-zadruga-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--agro-radius);
  object-fit: cover;
  flex-shrink: 0;
}

.agro-zadruga-card__info {
  flex: 1;
  min-width: 0;
}

.agro-zadruga-card__name {
  font-weight: 600;
  color: var(--agro-text);
  font-size: var(--agro-font-size-sm);
  margin: 0 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agro-zadruga-card__members {
  font-size: var(--agro-font-size-xs);
  color: var(--agro-text-muted);
  margin: 0;
}

/* Modifikatori zadruge — leva ivica po statusu ulaska */
.agro-zadruga-card--open {
  border-left: var(--agro-border-width-lg) solid var(--agro-primary);
}

.agro-zadruga-card--closed {
  border-left: var(--agro-border-width-lg) solid var(--agro-text-muted);
}

.agro-zadruga-card--pending {
  border-left: var(--agro-border-width-lg) solid var(--agro-warning);
}

/* D3b — Gazdinstvo card */
.agro-gazdinstvo-card {
  background: var(--agro-surface-card);
  border: var(--agro-border-width) solid var(--agro-border);
  border-left: var(--agro-border-width-lg) solid var(--agro-primary);
  border-radius: var(--agro-radius);
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: box-shadow var(--agro-transition);
}

@media (hover: hover) {
  .agro-gazdinstvo-card:hover {
    box-shadow: var(--agro-shadow-sm);
  }
}

.agro-gazdinstvo-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--agro-radius);
  object-fit: cover;
  flex-shrink: 0;
  border: var(--agro-border-width-md) solid var(--agro-primary);
}

.agro-gazdinstvo-card__info {
  flex: 1;
  min-width: 0;
}

.agro-gazdinstvo-card__name {
  font-weight: 700;
  color: var(--agro-text);
  font-size: var(--agro-font-size-sm);
  margin: 0 0 4px;
}

.agro-gazdinstvo-card__location {
  font-size: var(--agro-font-size-xs);
  color: var(--agro-text-muted);
  margin: 0 0 4px;
}

.agro-gazdinstvo-card__crops {
  font-size: var(--agro-font-size-xs);
  color: var(--agro-text-secondary);
  margin: 0;
}

/* D3c — Firma card */
.agro-firma-card {
  background: var(--agro-surface-card);
  border: var(--agro-border-width) solid var(--agro-border);
  border-left: var(--agro-border-width-lg) solid var(--agro-brown);
  border-radius: var(--agro-radius);
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: box-shadow var(--agro-transition);
}

@media (hover: hover) {
  .agro-firma-card:hover {
    box-shadow: var(--agro-shadow-sm);
  }
}

.agro-firma-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--agro-radius);
  object-fit: cover;
  flex-shrink: 0;
  border: var(--agro-border-width-md) solid var(--agro-brown);
}

.agro-firma-card__info {
  flex: 1;
  min-width: 0;
}

.agro-firma-card__name {
  font-weight: 700;
  color: var(--agro-text);
  font-size: var(--agro-font-size-sm);
  margin: 0 0 4px;
}

.agro-firma-card__pib {
  font-size: var(--agro-font-size-xs);
  color: var(--agro-text-muted);
  margin: 0 0 4px;
}

.agro-firma-card__delatnost {
  font-size: var(--agro-font-size-xs);
  color: var(--agro-text-secondary);
  margin: 0;
}

/* D3d — Blog card */
.agro-blog-card {
  background: var(--agro-surface-card);
  border: var(--agro-border-width) solid var(--agro-border);
  border-radius: var(--agro-radius);
  overflow: hidden;
  transition: transform var(--agro-transition), box-shadow var(--agro-transition);
}

@media (hover: hover) {
  .agro-blog-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--agro-shadow-md);
  }
}

.agro-blog-card__image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.agro-blog-card__body {
  padding: 12px 16px;
}

.agro-blog-card__category {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--agro-primary);
  margin: 0 0 6px;
}

.agro-blog-card__title {
  font-family: var(--agro-font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--agro-text);
  margin: 0 0 8px;
  line-height: 1.3;
}

.agro-blog-card__meta {
  font-size: var(--agro-font-size-xs);
  color: var(--agro-text-muted);
  margin: 0;
}

/* D3e — Event card */
.agro-event-card {
  background: var(--agro-surface-card);
  border: var(--agro-border-width) solid var(--agro-border);
  border-radius: var(--agro-radius);
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.agro-event-card__date {
  flex-shrink: 0;
  width: 48px;
  background: var(--agro-primary-bg);
  border: var(--agro-border-width) solid var(--agro-primary);
  border-radius: var(--agro-radius-sm);
  text-align: center;
  padding: 6px 4px;
}

.agro-event-card__day {
  display: block;
  font-family: var(--agro-font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--agro-primary-dark);
  line-height: 1;
}

.agro-event-card__month {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--agro-primary);
  margin-top: 2px;
}

.agro-event-card__info {
  flex: 1;
  min-width: 0;
}

.agro-event-card__title {
  font-weight: 600;
  color: var(--agro-text);
  font-size: var(--agro-font-size-sm);
  margin: 0 0 4px;
}

.agro-event-card__location {
  font-size: var(--agro-font-size-xs);
  color: var(--agro-text-muted);
  margin: 0;
}

/* ==========================================================================
   11. Badge-ovi (tier, status, kategorija, region, verified)
   ========================================================================== */

/* D4 — Bazni badge */
.agro-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

/* Tier */
.agro-badge--premium {
  background: var(--agro-tier-premium);
  color: #3e2723;  /* 4.6:1 na #f9a825 — WCAG AA */
}

.agro-badge--free {
  background: var(--agro-tier-free);
  color: #ffffff;
}

/* Zadruga — outlined */
.agro-badge--zadruga {
  background: transparent;
  border: var(--agro-border-width) solid var(--agro-primary);
  color: var(--agro-primary-dark);
}

/* Entiteti */
.agro-badge--gazdinstvo {
  background: var(--agro-primary-bg);
  color: var(--agro-primary-dark);
}

.agro-badge--firma {
  background: #efebe9;
  color: var(--agro-brown);
}

/* Verifikacija */
.agro-badge--verified {
  background: var(--agro-primary);
  color: #ffffff;
}

/* FAZA 12.4 — zadruga privacy badges (Javna / Privatna). Neutralni surface-alt
   umesto brend boje jer je privacy sekundarna meta-informacija, ne primarni signal. */
.agro-badge--public,
.agro-badge--private {
  background: var(--agro-surface-alt);
  color: var(--agro-text-muted);
  border: var(--agro-border-width) solid var(--agro-border);
}

/* Oglas statusi */
.agro-badge--new {
  background: var(--agro-accent);
  color: #ffffff;
}

.agro-badge--expiring {
  background: #e65100;
  color: #ffffff;
}

.agro-badge--expired {
  background: #9e9e9e;
  color: #ffffff;
}

.agro-badge--sold {
  background: #9e9e9e;
  color: #ffffff;
}

/* Zahtev na čekanju — outlined narandzasta */
.agro-badge--pending {
  background: transparent;
  border: var(--agro-border-width) solid var(--agro-warning);
  color: #e65100;
}

/* Klasifikatori */
.agro-badge--category {
  background: var(--agro-surface-alt);
  color: var(--agro-text-secondary);
}

.agro-badge--region {
  background: var(--agro-surface-alt);
  color: var(--agro-text-secondary);
}

/* ==========================================================================
   12. Premium Gate + Upgrade + Free teaser
   ========================================================================== */

/* --- H1: Premium gate overlay --- */
.agro-premium-gate {
  position: relative;
  border-radius: var(--agro-radius);
  overflow: hidden;
}

.agro-premium-gate__blur {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
  opacity: 0.5;
}

.agro-premium-gate__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  z-index: 10;
  padding: 24px;
  text-align: center;
  border-radius: var(--agro-radius);
}

.agro-night .agro-premium-gate__overlay {
  background: rgba(30, 35, 30, 0.9);
}

.agro-premium-gate__icon {
  width: 48px;
  height: 48px;
  color: var(--agro-tier-premium);
  margin-bottom: 12px;
}

.agro-premium-gate__icon svg { width: 100%; height: 100%; }

.agro-premium-gate__title {
  font-family: var(--agro-font-heading);
  font-size: var(--agro-font-size-h3);
  color: var(--agro-text);
  margin-bottom: 8px;
}

.agro-premium-gate__text {
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text-muted);
  margin-bottom: 16px;
  max-width: 320px;
}

.agro-premium-gate__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--agro-tier-premium);
  color: #ffffff;
  font-weight: 700;
  border-radius: var(--agro-radius);
  text-decoration: none;
  font-size: var(--agro-font-size-base);
  min-height: 48px;
  transition: background-color var(--agro-transition), transform var(--agro-transition);
}

@media (hover: hover) {
  .agro-premium-gate__cta:hover {
    background: var(--agro-accent);
    transform: translateY(-1px);
  }
}

.agro-premium-gate__cta:focus,
.agro-premium-gate__cta:focus-visible {
  box-shadow: var(--agro-focus-ring);
  outline: none;
}

/* --- H2: Upgrade page --- */
.agro-upgrade { max-width: 800px; margin: 0 auto; padding: 24px 16px; }

.agro-upgrade__hero {
  background: linear-gradient(135deg, var(--agro-primary-dark), var(--agro-primary));
  color: #ffffff;
  border-radius: var(--agro-radius-lg);
  padding: 40px 32px;
  text-align: center;
  margin-bottom: 24px;
}

.agro-upgrade__hero-title {
  font-family: var(--agro-font-heading);
  font-size: var(--agro-font-size-h1);
  margin: 0 0 8px;
}

.agro-upgrade__hero-title span {
  background: var(--agro-tier-premium);
  padding: 2px 12px;
  border-radius: 4px;
  font-size: 0.8em;
}

.agro-upgrade__hero-subtitle {
  font-size: var(--agro-font-size-base);
  opacity: 0.9;
  margin: 0;
}

.agro-upgrade__card {
  background: var(--agro-surface-card);
  border: var(--agro-border-width) solid var(--agro-border);
  border-radius: var(--agro-radius);
  padding: 24px;
  margin-bottom: 20px;
}

.agro-upgrade__card--alt {
  background: var(--agro-surface);
}

.agro-upgrade__price-highlight {
  color: var(--agro-primary);
  font-weight: 700;
}

.agro-upgrade__card-title {
  font-family: var(--agro-font-heading);
  font-size: var(--agro-font-size-h3);
  color: var(--agro-text);
  margin: 0 0 16px;
}

.agro-upgrade__price {
  font-family: var(--agro-font-heading);
  font-size: var(--agro-font-size-h2);
  color: var(--agro-primary);
  margin: 0 0 4px;
}

.agro-upgrade__price-sub {
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text-muted);
  margin: 0 0 20px;
}

.agro-upgrade__benefits {
  list-style: none;
  padding: 0;
  margin: 0;
}

.agro-upgrade__benefits li {
  padding: 10px 0;
  border-bottom: 1px solid var(--agro-border);
  font-size: var(--agro-font-size-base);
  color: var(--agro-text);
  display: flex;
  align-items: center;
  gap: 12px;
}

.agro-upgrade__benefits li:last-child { border-bottom: none; }

.agro-upgrade__benefits li::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: var(--agro-primary);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink: 0;
}

.agro-upgrade__bank-table {
  width: 100%;
  border-collapse: collapse;
}

.agro-upgrade__bank-table td {
  padding: 8px 0;
  font-size: var(--agro-font-size-base);
  color: var(--agro-text);
}

.agro-upgrade__bank-table td:first-child {
  font-weight: 700;
  width: 40%;
  color: var(--agro-text-muted);
}

.agro-upgrade__bank-note {
  margin-top: 16px;
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text-muted);
}

.agro-upgrade__form-group {
  margin-bottom: 16px;
}

.agro-upgrade__form-group > .agro-upgrade__form-label,
.agro-upgrade__form-group > label:not(.agro-upgrade__upload-zone) {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text);
}

.agro-upgrade__form-group .required {
  color: var(--agro-error);
}

.agro-upgrade__form-group input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: var(--agro-border-width) solid var(--agro-border);
  border-radius: var(--agro-radius);
  font-size: var(--agro-font-size-base);
  color: var(--agro-text);
  background: var(--agro-surface);
  box-sizing: border-box;
}

.agro-upgrade__form-group input[type="text"]:focus {
  border-color: var(--agro-primary);
  box-shadow: var(--agro-focus-ring);
  outline: none;
}

/* ------------------------------------------------------------------------- */
/* Upload zone — drag&drop + preview (isti pattern kao agro-ps__upload-zone) */
/* ------------------------------------------------------------------------- */
.agro-upgrade__upload-zone {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 88px;
  padding: 16px 20px;
  margin: 0;
  background: var(--agro-surface-alt);
  border: 2px dashed var(--agro-border);
  border-radius: var(--agro-radius);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.15s ease;
  box-sizing: border-box;
}
.agro-upgrade__upload-zone:hover {
  border-color: var(--agro-primary);
  background: var(--agro-surface);
}
.agro-upgrade__upload-zone:focus-within {
  outline: 2px solid var(--agro-primary);
  outline-offset: 2px;
}
.agro-upgrade__upload-zone.is-dragover {
  border-color: var(--agro-primary);
  background: rgba(46, 125, 50, 0.08);
  transform: scale(1.005);
}
.agro-upgrade__upload-zone-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.agro-upgrade__upload-zone-empty[hidden],
.agro-upgrade__upload-zone-preview[hidden] {
  display: none !important;
}

.agro-upgrade__upload-zone-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.agro-upgrade__upload-zone-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px dashed var(--agro-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--agro-text-muted);
  background: var(--agro-surface);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.agro-upgrade__upload-zone:hover .agro-upgrade__upload-zone-icon,
.agro-upgrade__upload-zone.is-dragover .agro-upgrade__upload-zone-icon {
  border-color: var(--agro-primary);
  color: var(--agro-primary);
}
.agro-upgrade__upload-zone-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.agro-upgrade__upload-zone-text strong {
  font-size: var(--agro-font-size-base);
  font-weight: 600;
  color: var(--agro-text);
}
.agro-upgrade__upload-zone-text span {
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text-muted);
}
.agro-upgrade__upload-zone-meta {
  font-size: 12px;
  color: var(--agro-text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.agro-upgrade__upload-zone.is-filled {
  border-style: solid;
  border-color: var(--agro-primary);
  background: var(--agro-surface);
}
.agro-upgrade__upload-zone-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.agro-upgrade__upload-zone-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid var(--agro-border);
  background: var(--agro-surface-alt);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--agro-primary);
}
.agro-upgrade__upload-zone-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.agro-upgrade__upload-zone-thumb-pdf[hidden] { display: none; }
.agro-upgrade__upload-zone-preview-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.agro-upgrade__upload-zone-preview-info strong {
  font-size: var(--agro-font-size-base);
  font-weight: 600;
  color: var(--agro-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agro-upgrade__upload-zone-preview-info span {
  font-size: 12px;
  color: var(--agro-text-muted);
}
.agro-upgrade__upload-zone-remove {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--agro-border);
  background: var(--agro-surface);
  color: var(--agro-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.agro-upgrade__upload-zone-remove:hover {
  border-color: var(--agro-danger);
  color: var(--agro-danger);
  background: rgba(198, 40, 40, 0.06);
}

@media (max-width: 600px) {
  .agro-upgrade__upload-zone-empty {
    flex-wrap: wrap;
  }
  .agro-upgrade__upload-zone-meta {
    width: 100%;
    margin-left: 64px;
  }
}

.agro-upgrade__msg {
  padding: 12px 16px;
  border-radius: var(--agro-radius);
  margin-bottom: 16px;
  font-size: var(--agro-font-size-sm);
}

.agro-upgrade__msg--success { background: rgba(46, 125, 50, 0.1); color: var(--agro-primary); }
.agro-upgrade__msg--error { background: rgba(198, 40, 40, 0.1); color: var(--agro-error); }

.agro-upgrade__form-actions {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.agro-upgrade__expiry-notice {
  padding: 12px 16px;
  border-radius: var(--agro-radius);
  background: rgba(46, 125, 50, 0.08);
  border: 1px solid rgba(46, 125, 50, 0.2);
  color: var(--agro-text);
  margin-bottom: 20px;
  font-size: var(--agro-font-size-sm);
}

/* --- H6: Free teaser --- */
.agro-free-teaser {
  position: relative;
  border-radius: var(--agro-radius);
  overflow: hidden;
  margin-top: 16px;
}

.agro-free-teaser__content {
  filter: blur(3px);
  pointer-events: none;
  user-select: none;
  padding: 16px;
  background: var(--agro-surface-card);
  border: var(--agro-border-width) solid var(--agro-border);
  border-radius: var(--agro-radius);
}

.agro-free-teaser__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  z-index: 5;
  text-align: center;
  padding: 16px;
}

.agro-night .agro-free-teaser__overlay {
  background: rgba(30, 35, 30, 0.85);
}

.agro-free-teaser__text {
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text-muted);
  margin-bottom: 12px;
}

/* --- H4: Chat rate limit indicator --- */
.agro-chat-limit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(245, 166, 35, 0.1);
  border-radius: var(--agro-radius);
  margin: 8px 0;
  font-size: 12px;
  color: var(--agro-text-muted);
}

.agro-chat-limit--reached {
  background: rgba(198, 40, 40, 0.08);
  color: var(--agro-error);
}

.agro-chat-limit__counter { font-weight: 700; }

.agro-chat-limit__upgrade {
  color: var(--agro-tier-premium);
  font-weight: 700;
  text-decoration: none;
  font-size: 12px;
}

/* --- H5: Premium forum badge --- */
.agro-forum-premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--agro-tier-premium);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 6px;
}

.agro-forum-premium-badge svg { width: 12px; height: 12px; fill: currentColor; }

.agro-forum-locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.agro-forum-locked:hover {
  opacity: 0.6;
}


/* ==========================================================================
   13. Trznica (filteri, category pills, urgentnost, lista vs grid)
   ========================================================================== */

/* D5 — Category pills */
.agro-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 0;
  list-style: none;
}

.agro-pills__item {
  padding: 8px 16px;
  border-radius: 20px;
  border: var(--agro-border-width) solid var(--agro-border);
  background: var(--agro-surface-card);
  color: var(--agro-text);
  font-size: var(--agro-font-size-sm);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--agro-transition), color var(--agro-transition), border-color var(--agro-transition);
  display: inline-block;
  min-height: 44px;
  line-height: 28px;
  white-space: nowrap;
}

.agro-pills__item--active {
  background: var(--agro-primary);
  color: #ffffff;
  border-color: var(--agro-primary);
}

@media (hover: hover) {
  .agro-pills__item:hover {
    background: var(--agro-primary);
    color: #ffffff;
    border-color: var(--agro-primary);
  }
}

.agro-pills__item:focus,
.agro-pills__item:focus-visible {
  background: var(--agro-primary);
  color: #ffffff;
  border-color: var(--agro-primary);
  box-shadow: var(--agro-focus-ring);
  outline: none;
}

/* D5b — Filter sidebar */
.agro-filter-sidebar {
  background: var(--agro-surface-card);
  border: var(--agro-border-width) solid var(--agro-border);
  border-radius: var(--agro-radius);
  padding: 16px;
}

.agro-filter-sidebar__title {
  font-family: var(--agro-font-heading);
  font-size: var(--agro-font-size-h3);
  color: var(--agro-text);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: var(--agro-border-width) solid var(--agro-border);
}

.agro-filter-sidebar__section {
  margin-bottom: 20px;
}

.agro-filter-sidebar__section-title {
  font-weight: 700;
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 10px;
}

.agro-filter-sidebar__reset {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: var(--agro-border-width) solid var(--agro-border);
  border-radius: var(--agro-radius);
  background: transparent;
  color: var(--agro-text-muted);
  font-size: var(--agro-font-size-sm);
  font-family: var(--agro-font-body);
  text-align: center;
  cursor: pointer;
  min-height: 44px;
  transition: background-color var(--agro-transition), color var(--agro-transition);
}

@media (hover: hover) {
  .agro-filter-sidebar__reset:hover {
    background: var(--agro-surface-alt);
    color: var(--agro-text);
  }
}

/* D5c — Price range filter */
.agro-price-range {
  display: flex;
  gap: 8px;
  align-items: center;
}

.agro-price-range__input {
  flex: 1;
  padding: 8px 10px;
  border: var(--agro-border-width) solid var(--agro-border);
  border-radius: var(--agro-radius-sm);
  font-size: var(--agro-font-size-sm);
  font-family: var(--agro-font-body);
  color: var(--agro-text);
  background: var(--agro-surface-card);
  min-height: 44px;
  transition: border-color var(--agro-transition), box-shadow var(--agro-transition);
}

.agro-price-range__input:focus {
  border-color: var(--agro-primary);
  box-shadow: var(--agro-focus-ring);
  outline: none;
}

.agro-price-range__sep {
  color: var(--agro-text-muted);
  font-size: var(--agro-font-size-xs);
  flex-shrink: 0;
}

/* D5d — Sort options */
.agro-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.agro-sort__label {
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text-muted);
  white-space: nowrap;
  font-weight: 600;
}

.agro-sort__select {
  padding: 8px 36px 8px 12px;
  border: var(--agro-border-width) solid var(--agro-border);
  border-radius: var(--agro-radius);
  background: var(--agro-surface-card);
  color: var(--agro-text);
  font-size: var(--agro-font-size-sm);
  font-family: var(--agro-font-body);
  min-height: 44px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232e7d32' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition: border-color var(--agro-transition), box-shadow var(--agro-transition);
}

.agro-sort__select:focus {
  border-color: var(--agro-primary);
  box-shadow: var(--agro-focus-ring);
  outline: none;
}

/* D6 — Urgency color coding */
.agro-urgency--safe {
  color: var(--agro-text-muted);
}

.agro-urgency--warning {
  color: var(--agro-warning);
  font-weight: 600;
}

.agro-urgency--urgent {
  color: #e65100;
  font-weight: 700;
  border-left: var(--agro-border-width-lg) solid #e65100;
  padding-left: 8px;
}

.agro-urgency--critical {
  color: var(--agro-danger);
  font-weight: 700;
  border-left: var(--agro-border-width-lg) solid var(--agro-danger);
  padding-left: 8px;
}

/* D7 — Marketplace page layout */
.agro-marketplace {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}

.agro-marketplace__filters {
  position: sticky;
  top: 80px;
  align-self: start;
}

.agro-marketplace__content {
  min-width: 0;
}

.agro-marketplace__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.agro-marketplace__count {
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text-muted);
}

/* Grid prikaz — desktop: 3-4 kolone */
.agro-marketplace__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

/* Tablet — filter sidebar ide gore, 1 kolona za layout */
@media (max-width: 991px) {
  .agro-marketplace {
    grid-template-columns: 1fr;
  }

  .agro-marketplace__filters {
    position: static;
  }

  /* Na tabletu pills umesto sidebar filtera */
  .agro-marketplace__grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
  }
}

/* Mobilni (<768px) — lista umesto grid, slika levo */
@media (max-width: 767px) {
  .agro-marketplace__grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .agro-product-card {
    display: flex;
    flex-direction: row;
  }

  .agro-product-card__image {
    width: 120px;
    height: auto;
    min-height: 100px;
    flex-shrink: 0;
    border-radius: var(--agro-radius) 0 0 var(--agro-radius);
  }

  .agro-product-card__body {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
  }

  .agro-product-card__title {
    font-size: var(--agro-font-size-sm);
    /* Ograniči na 2 reda na mobilnom */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .agro-product-card__price {
    font-size: 16px;
  }

  /* Mobilni pills — horizontalni scroll umesto wrap */
  .agro-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .agro-pills::-webkit-scrollbar {
    display: none;
  }
}

/* D8 — Ponude (oglasi) browse: „pijaca tabla“ bez zelenog wo_page_hdng */
.agro-offers-hub {
  margin-bottom: 24px;
}

.agro-offers-hub__masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 24px 22px;
  margin-bottom: 20px;
  border-radius: var(--agro-radius-lg);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--agro-surface-alt) 88%, var(--agro-accent) 12%) 0%, var(--agro-surface-card) 42%, var(--agro-surface-alt) 100%);
  border: var(--agro-border-width) solid var(--agro-border);
  box-shadow: var(--agro-shadow-sm);
  position: relative;
  overflow: hidden;
}

.agro-offers-hub__masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--agro-brown) 14%, transparent) 0.8px, transparent 0.8px);
  background-size: 14px 14px;
  opacity: 0.35;
  pointer-events: none;
}

.agro-offers-hub__masthead::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  border-radius: var(--agro-radius-lg) 0 0 var(--agro-radius-lg);
  background: linear-gradient(180deg, var(--agro-accent) 0%, color-mix(in srgb, var(--agro-brown) 70%, var(--agro-accent) 30%) 100%);
}

.agro-offers-hub__masthead-text,
.agro-offers-hub__masthead-actions {
  position: relative;
  z-index: 1;
}

.agro-offers-hub__eyebrow {
  margin: 0 0 6px;
  font-size: var(--agro-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--agro-brown-light);
}

.agro-offers-hub__title {
  margin: 0 0 10px;
  font-family: var(--agro-font-heading);
  font-size: clamp(1.5rem, 2.6vw, 1.85rem);
  font-weight: 700;
  color: var(--agro-text);
  line-height: 1.2;
}

.agro-offers-hub__lede {
  margin: 0;
  max-width: 38rem;
  font-size: var(--agro-font-size-sm);
  line-height: 1.55;
  color: var(--agro-text-secondary);
}

.agro-offers-hub__masthead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.agro-offers-hub__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--agro-font-size-sm);
  text-decoration: none !important;
  border: var(--agro-border-width-md) solid transparent;
  transition: background var(--agro-transition), color var(--agro-transition), border-color var(--agro-transition), box-shadow var(--agro-transition);
  min-height: 44px;
}

/* Ista zelena kao .btn-main / .btn-primary na platformi */
.agro-offers-hub__btn--primary {
  background-color: var(--agro-primary) !important;
  border-color: var(--agro-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--agro-primary) 42%, transparent);
}

@media (hover: hover) {
  .agro-offers-hub__btn--primary:hover,
  .agro-offers-hub__btn--primary:focus {
    color: #fff !important;
    background-color: var(--agro-primary-dark) !important;
    border-color: var(--agro-primary-dark) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--agro-primary) 48%, transparent);
  }
}

.agro-offers-hub__btn--primary:focus-visible {
  background-color: var(--agro-primary-dark) !important;
  border-color: var(--agro-primary-dark) !important;
  box-shadow: var(--agro-focus-ring) !important;
  outline: none !important;
}

.agro-offers-hub__btn--primary:active {
  background-color: var(--agro-primary-dark) !important;
  border-color: var(--agro-primary-dark) !important;
}

.agro-offers-hub__btn--ghost {
  background: color-mix(in srgb, var(--agro-surface-card) 88%, transparent);
  color: var(--agro-brown) !important;
  border-color: var(--agro-border);
}

.agro-offers-hub__btn--ghost:hover,
.agro-offers-hub__btn--ghost:focus {
  border-color: color-mix(in srgb, var(--agro-brown) 35%, var(--agro-border));
  background: var(--agro-surface-card);
  color: var(--agro-text) !important;
}

/* Counter badge na masthead action buttonima (npr. Sacuvani oglasi). */
.agro-offers-hub__btn-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  background: var(--agro-primary);
  color: #fff;
  letter-spacing: 0.2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.agro-offers-hub__btn--ghost:hover .agro-offers-hub__btn-count,
.agro-offers-hub__btn--ghost:focus .agro-offers-hub__btn-count {
  background: var(--agro-primary-dark);
}

/* Premium Upgrade CTA — gold gradient sa lock ikonom (FAZA 12.5) */
.agro-offers-hub__btn--premium {
  background: linear-gradient(135deg, var(--agro-premium-gold-light) 0%, var(--agro-premium-gold) 50%, var(--agro-premium-gold-dark) 100%) !important;
  color: #fff !important;
  border-color: var(--agro-premium-gold-dark) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--agro-premium-gold) 40%, transparent), inset 0 -2px 0 rgba(0, 0, 0, 0.08);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.agro-offers-hub__btn--premium .agro-offers-hub__btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@media (hover: hover) {
  .agro-offers-hub__btn--premium:hover,
  .agro-offers-hub__btn--premium:focus {
    color: #fff !important;
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--agro-premium-gold) 48%, transparent), inset 0 -2px 0 rgba(0, 0, 0, 0.1);
    text-decoration: none !important;
  }
}

.agro-offers-hub__btn--premium:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--agro-premium-gold), inset 0 -2px 0 rgba(0, 0, 0, 0.1);
}

.agro-offers-hub__btn--premium:active {
  transform: translateY(1px);
  filter: brightness(0.95);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--agro-premium-gold) 40%, transparent), inset 0 2px 0 rgba(0, 0, 0, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .agro-offers-hub__btn--premium {
    transition: none;
  }
  .agro-offers-hub__btn--premium:hover,
  .agro-offers-hub__btn--premium:active {
    transform: none;
  }
}

/* Mobile — skrati tekst (ikona ostaje, __btn-text--full sakriven, __btn-text--short vidljiv) */
.agro-offers-hub__btn-text--short {
  display: none;
}

@media (max-width: 480px) {
  .agro-offers-hub__btn-text--full {
    display: none;
  }
  .agro-offers-hub__btn-text--short {
    display: inline;
  }
}

/* Horizontalna traka filtera odmah ispod masthead-a */
.agro-offers-hub__toolbar {
  margin-top: 18px;
  margin-bottom: 20px;
  padding: 16px 18px 18px;
  border-radius: var(--agro-radius-lg);
  background: var(--agro-surface-card);
  border: var(--agro-border-width) solid var(--agro-border);
  box-shadow: var(--agro-shadow-sm);
  position: sticky;
  top: 68px;
  z-index: 5;
}

.agro-offers-hub__toolbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 14px;
}

.agro-offers-hub__toolbar .agro-offers-hub__search {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.agro-offers-hub__search--toolbar {
  flex: 1 1 260px;
  min-width: 220px;
  max-width: 440px;
}

.agro-offers-hub__field--toolbar {
  margin-top: 0;
  flex: 1 1 148px;
  min-width: 132px;
  max-width: 220px;
}

.agro-offers-hub__field--toolbar.agro-offers-hub__field--prices {
  flex: 1 1 200px;
  min-width: 176px;
  max-width: 280px;
}

.agro-offers-hub__label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--agro-font-size-xs);
  font-weight: 700;
  color: var(--agro-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.agro-offers-hub__field {
  margin-top: 14px;
}

.agro-offers-hub__field .form-control {
  border-radius: var(--agro-radius);
  border-color: var(--agro-border);
  font-size: var(--agro-font-size-sm);
}

.agro-offers-hub__field .form-control:focus {
  border-color: var(--agro-focus-border);
  box-shadow: var(--agro-focus-ring);
}

.agro-offers-hub__price-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}

.agro-offers-hub__price-sep {
  color: var(--agro-text-muted);
  font-size: 12px;
}

.agro-offers-hub__search {
  margin-bottom: 6px;
  padding-bottom: 16px;
  border-bottom: 1px dashed color-mix(in srgb, var(--agro-border) 85%, var(--agro-brown) 15%);
}

/* Jedan okvir + overflow:hidden — dugme ostaje unutra, ne „beži“ izvan zaobljenja inputa */
.agro-offers-hub__search-row {
  display: flex;
  align-items: stretch;
  position: relative;
  min-height: 44px;
  border: var(--agro-border-width) solid var(--agro-border);
  border-radius: var(--agro-radius);
  background: var(--agro-surface-card);
  overflow: hidden;
  transition: border-color var(--agro-transition), box-shadow var(--agro-transition);
}

.agro-offers-hub__search-row:focus-within {
  border-color: var(--agro-focus-border);
  box-shadow: var(--agro-focus-ring);
}

.agro-offers-hub__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  color: var(--agro-text-muted);
  pointer-events: none;
  display: flex;
}

.agro-offers-hub__search-input {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding-left: 40px !important;
  padding-right: 44px !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.agro-offers-hub__search-input:focus {
  outline: none !important;
  box-shadow: none !important;
}

.agro-offers-hub__search-submit {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  border-left: var(--agro-border-width) solid var(--agro-border);
  background: color-mix(in srgb, var(--agro-surface-alt) 88%, var(--agro-accent) 12%);
  color: var(--agro-brown);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--agro-transition);
}

.agro-offers-hub__search-submit:hover,
.agro-offers-hub__search-submit:focus {
  background: color-mix(in srgb, var(--agro-accent) 18%, var(--agro-surface-alt) 82%);
  outline: none;
}

.agro-offers-hub__main {
  min-width: 0;
}

.agro-offers-hub__market {
  min-height: 120px;
}

/* Reset filtera — diskretan link u filter-bar-u (zamenjuje select sortiranja) */
.agro-offers-hub__field--reset {
  flex: 0 1 auto;
  min-width: 120px;
  max-width: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.agro-offers-hub__reset-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 10px;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--agro-text-muted);
  font-size: var(--agro-font-size-sm);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--agro-transition);
}

.agro-offers-hub__reset-link:hover,
.agro-offers-hub__reset-link:focus {
  color: var(--agro-primary);
  outline: none;
}

/* Aktivni filter chips — prikazuju se samo kad ima aktivnih filtera (JS puni) */
.agro-offer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
}

.agro-offer-chips:empty {
  display: none;
}

.agro-offer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px 0 12px;
  border-radius: var(--agro-radius-pill);
  background: var(--agro-primary-soft);
  border: 1px solid color-mix(in srgb, var(--agro-primary) 22%, var(--agro-border));
  color: var(--agro-primary-dark, var(--agro-text));
  font-size: var(--agro-font-size-sm);
  font-weight: 600;
  white-space: nowrap;
}

.agro-offer-chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  transition: background var(--agro-transition), opacity var(--agro-transition);
}

.agro-offer-chip__x:hover,
.agro-offer-chip__x:focus {
  background: color-mix(in srgb, var(--agro-primary) 20%, transparent);
  opacity: 1;
  outline: none;
}

/* ───────────────────────────────────────────────────────────
   FAZA 13.x — Chips + Popover filter bar (nova toolbar traka)
   Redosled: [Pretraga] [Kategorija] [Stanje] [Opstina] [Cena] [Reset]
   Dizajn: kompaktan (40px chip, 14px gap), outline stil, primary tint
   za aktivne chipove. URL sync radi preko pushState.
   ─────────────────────────────────────────────────────────── */
.agro-offer-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 14px;
  padding: 10px 12px;
  background: var(--agro-surface-card, #ffffff);
  border: var(--agro-border-width) solid var(--agro-border);
  /* Pill-zaobljen okvir bara — prati radius chipova unutar (radius-pill) */
  border-radius: var(--agro-radius-pill);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  /* Sticky scroll-anchor: ostaje centriran na vrhu kolone tokom skrola */
  position: sticky;
  top: 70px;
  z-index: 20;
  /* Skupi do najsireg reda (search 260 + 4 chip-a + reset) i centriraj */
  width: fit-content;
  max-width: 100%;
  /* Ojacaj backdrop kada bar postane sticky pa ispod njega prolaze card-i */
  backdrop-filter: saturate(140%);
  -webkit-backdrop-filter: saturate(140%);
}

.agro-offer-bar__search {
  position: relative;
  /* Fiksiran flex-basis bez grow — kombinovano sa width: fit-content na baru
     daje skupljeno-na-sadrzaj ponasanje (KP-stil) sa centriranjem. */
  flex: 0 0 240px;
  min-width: 180px;
  max-width: 280px;
}

.agro-offer-bar__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--agro-text-muted);
  pointer-events: none;
}

.agro-offer-bar__search-input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 36px;
  background: var(--agro-surface-alt);
  border: var(--agro-border-width) solid var(--agro-border);
  border-radius: var(--agro-radius-pill);
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text);
  transition: border-color var(--agro-transition), background var(--agro-transition);
}

.agro-offer-bar__search-input:focus {
  outline: none;
  border-color: var(--agro-primary);
  background: #ffffff;
}

.agro-offer-bar__search-input::-webkit-search-cancel-button {
  cursor: pointer;
}

.agro-offer-bar__chip-wrap {
  position: relative;
  flex: 0 0 auto;
}

.agro-offer-bar__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  background: var(--agro-surface-alt);
  border: var(--agro-border-width) solid var(--agro-border);
  border-radius: var(--agro-radius-pill);
  font-size: var(--agro-font-size-sm);
  font-weight: 600;
  color: var(--agro-text);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--agro-transition), background var(--agro-transition), color var(--agro-transition);
  max-width: 220px;
}

.agro-offer-bar__chip:hover,
.agro-offer-bar__chip:focus {
  border-color: var(--agro-primary);
  outline: none;
  color: var(--agro-primary-dark, var(--agro-primary));
}

.agro-offer-bar__chip--active {
  background: var(--agro-primary-soft);
  border-color: color-mix(in srgb, var(--agro-primary) 45%, var(--agro-border));
  color: var(--agro-primary-dark, var(--agro-primary));
}

.agro-offer-bar__chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.agro-offer-bar__chip-caret {
  flex: 0 0 auto;
  opacity: 0.7;
  transition: transform var(--agro-transition);
}

.agro-offer-bar__chip[aria-expanded="true"] .agro-offer-bar__chip-caret {
  transform: rotate(180deg);
}

/* Toggle chip "Sa slikom" — nema popover ni caret, koristi aria-pressed.
   Aktivno stanje koristi .agro-offer-bar__chip--active (primary-soft fill). */
.agro-offer-bar__chip--toggle .agro-offer-bar__chip-icon {
  flex: 0 0 auto;
  color: var(--agro-text-muted);
  transition: color var(--agro-transition);
}

.agro-offer-bar__chip--toggle.agro-offer-bar__chip--active .agro-offer-bar__chip-icon {
  color: var(--agro-primary-dark, var(--agro-primary));
}

/* Reset link — centriran ispod filter bara, tekstualni stil bez border-a.
   Vidljiv samo kad ima aktivnih filtera. Ne ulazi u fit-content racun bara. */
.agro-offer-reset-wrap {
  display: flex;
  justify-content: center;
  margin: -6px 0 14px;
}

.agro-offer-reset-wrap--hidden {
  display: none !important;
}

.agro-offer-reset-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: var(--agro-radius-pill);
  font-size: var(--agro-font-size-sm);
  font-weight: 600;
  color: var(--agro-text-muted);
  cursor: pointer;
  transition: color var(--agro-transition), background var(--agro-transition);
}

.agro-offer-reset-link:hover,
.agro-offer-reset-link:focus {
  color: var(--agro-danger, #c0392b);
  background: rgba(192, 57, 43, 0.06);
  outline: none;
}

/* Popover (dropdown panel ispod chip-a) */
.agro-offer-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  max-width: 320px;
  background: #ffffff;
  border: var(--agro-border-width) solid var(--agro-border);
  border-radius: var(--agro-radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 50;
  padding: 6px 0;
  animation: agroOfferPopIn 0.12s ease-out;
}

@keyframes agroOfferPopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.agro-offer-popover[hidden] { display: none; }

.agro-offer-popover--scroll .agro-offer-popover__list {
  max-height: 280px;
  overflow-y: auto;
}

.agro-offer-popover--price {
  min-width: 300px;
  padding: 12px;
  box-sizing: border-box;
}

/* Cena — predefinisani opsezi (chip grid, 1-klik filter) */
.agro-offer-popover__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.agro-offer-popover__preset {
  flex: 0 1 auto;
  height: 32px;
  padding: 0 12px;
  background: var(--agro-surface-alt);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-pill);
  font-size: var(--agro-font-size-sm);
  font-weight: 500;
  color: var(--agro-text);
  cursor: pointer;
  transition: background var(--agro-transition), border-color var(--agro-transition), color var(--agro-transition);
}

.agro-offer-popover__preset:hover,
.agro-offer-popover__preset:focus {
  background: #ffffff;
  border-color: var(--agro-primary);
  color: var(--agro-primary-dark, var(--agro-primary));
  outline: none;
}

.agro-offer-popover__preset--active {
  background: var(--agro-primary);
  border-color: var(--agro-primary);
  color: #ffffff;
  font-weight: 600;
}

.agro-offer-popover__preset--active:hover,
.agro-offer-popover__preset--active:focus {
  background: var(--agro-primary-dark, var(--agro-primary));
  color: #ffffff;
}

/* Cena — collapsible custom raspon (details/summary) */
.agro-offer-popover__custom {
  border-top: 1px dashed var(--agro-border);
  padding-top: 10px;
}

.agro-offer-popover__custom-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: var(--agro-font-size-sm);
  font-weight: 500;
  color: var(--agro-text-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.agro-offer-popover__custom-toggle::-webkit-details-marker { display: none; }

.agro-offer-popover__custom-toggle:hover {
  color: var(--agro-primary-dark, var(--agro-primary));
}

.agro-offer-popover__custom-caret {
  transition: transform var(--agro-transition);
}

.agro-offer-popover__custom[open] .agro-offer-popover__custom-caret {
  transform: rotate(180deg);
}

.agro-offer-popover__custom .agro-offer-popover__price-row {
  margin-top: 10px;
}

.agro-offer-popover__search {
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--agro-border);
}

.agro-offer-popover__search-input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-pill);
  font-size: var(--agro-font-size-sm);
}

.agro-offer-popover__search-input:focus {
  outline: none;
  border-color: var(--agro-primary);
}

.agro-offer-popover__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.agro-offer-popover__list li { margin: 0; }

.agro-offer-popover__opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  background: transparent;
  border: none;
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text);
  cursor: pointer;
  transition: background var(--agro-transition);
}

.agro-offer-popover__opt:hover,
.agro-offer-popover__opt:focus {
  background: var(--agro-surface-alt);
  outline: none;
}

.agro-offer-popover__opt--active {
  background: var(--agro-primary-soft);
  color: var(--agro-primary-dark, var(--agro-primary));
  font-weight: 600;
}

.agro-offer-popover__price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  width: 100%;
  box-sizing: border-box;
}

.agro-offer-popover__price-input {
  /* min-width: 0 obavezan da number input shrinkuje unutar flex containera
     (browser default min-width za <input type=number> je ~150px). */
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-sm, 6px);
  font-size: var(--agro-font-size-sm);
  box-sizing: border-box;
}

.agro-offer-popover__price-input:focus {
  outline: none;
  border-color: var(--agro-primary);
}

.agro-offer-popover__price-sep {
  color: var(--agro-text-muted);
  font-weight: 600;
}

.agro-offer-popover__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.agro-offer-popover__btn {
  height: 32px;
  padding: 0 14px;
  border-radius: var(--agro-radius-pill);
  font-size: var(--agro-font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--agro-transition), color var(--agro-transition);
}

.agro-offer-popover__btn--secondary {
  background: transparent;
  border: 1px solid var(--agro-border);
  color: var(--agro-text-muted);
}

.agro-offer-popover__btn--secondary:hover,
.agro-offer-popover__btn--secondary:focus {
  color: var(--agro-text);
  border-color: var(--agro-text-muted);
  outline: none;
}

.agro-offer-popover__btn--primary {
  background: var(--agro-primary);
  border: 1px solid var(--agro-primary);
  color: #ffffff;
}

.agro-offer-popover__btn--primary:hover,
.agro-offer-popover__btn--primary:focus {
  background: var(--agro-primary-dark, var(--agro-primary));
  outline: none;
}

/* Responsive: tablet → search puna sirina + chip red, mobile → kompakt */
@media (max-width: 1024px) {
  .agro-offer-bar {
    /* Na tabletu razvuci na punu sirinu kontejnera (centriranje fit-content
       gubi smisao kada chip red wrappuje). Sticky offset ostaje. */
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    top: 64px;
    /* Wrap → vise redova → pill radius zaokrugljuje uglove previse;
       koristi medium radius umesto pill. */
    border-radius: var(--agro-radius-lg);
  }
  .agro-offer-bar__search {
    flex: 1 1 100%;
    max-width: 100%;
    order: -1;
  }
}

@media (max-width: 600px) {
  .agro-offer-bar {
    padding: 8px 10px;
    gap: 6px;
    /* Mobile: ostaje sticky ali sa manjim offset-om (header tigh) */
    top: 56px;
    flex-wrap: wrap;
  }
  .agro-offer-bar__chip {
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
    max-width: 160px;
  }
  .agro-offer-bar__chip-label { max-width: 130px; }
  .agro-offer-bar__search-input { height: 36px; }
  .agro-offer-popover {
    min-width: 180px;
    max-width: calc(100vw - 40px);
  }
  .agro-offer-popover--price { min-width: 240px; }
  .agro-offer-popover__preset { height: 30px; padding: 0 10px; font-size: 13px; }

  /* FIX: na mobile-u Cena (price) i Opstina (municipality_id) chipovi su u desnoj
     polovini reda — popover sa left:0 prelazi preko desne ivice viewport-a.
     Anchor-uj popover desno (right:0) umesto levo. */
  .agro-offer-bar__chip-wrap[data-filter="price"] .agro-offer-popover,
  .agro-offer-bar__chip-wrap[data-filter="municipality_id"] .agro-offer-popover {
    left: auto;
    right: 0;
  }

  /* ─── Mobile filter bar layout ───
     Red 1: search (full width, postojeci order: -1).
     Red 2: 4 dropdown chip-a — jednako dele prostor (flex: 1 1 0).
     Red 3: "Samo sa slikom" — sopstveni red, centriran.
     ─────────────────────────────── */
  .agro-offer-bar__chip-wrap:not([data-filter="with_images"]) {
    flex: 1 1 0;
    min-width: 0;
  }
  .agro-offer-bar__chip-wrap:not([data-filter="with_images"]) .agro-offer-bar__chip {
    width: 100%;
    padding: 0 6px;
    min-width: 0;
    max-width: none;
    /* Centriraj label + caret kao grupu (umesto space-between koji rastura
       tekst u stranu sa praznim prostorom). Label se moze skupiti ali ne raste. */
    justify-content: center;
    gap: 4px;
    font-size: 12px;
  }
  .agro-offer-bar__chip-wrap:not([data-filter="with_images"]) .agro-offer-bar__chip-label {
    flex: 0 1 auto;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
  .agro-offer-bar__chip-wrap:not([data-filter="with_images"]) .agro-offer-bar__chip-caret {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
  }
  /* "Samo sa slikom" — forsiran u novi red, centriran */
  .agro-offer-bar__chip-wrap[data-filter="with_images"] {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    margin-top: 2px;
  }
  .agro-offer-bar__chip-wrap[data-filter="with_images"] .agro-offer-bar__chip {
    width: auto;
    max-width: none;
  }
}

/* Vrlo uski telefoni (≤340px) — sakrij caret strelicu, dodatni prostor labelama */
@media (max-width: 340px) {
  .agro-offer-bar__chip-wrap:not([data-filter="with_images"]) .agro-offer-bar__chip-caret {
    display: none;
  }
  .agro-offer-bar__chip-wrap:not([data-filter="with_images"]) .agro-offer-bar__chip {
    justify-content: center;
    padding: 0 4px;
  }
}

/* Sort tabs red — count levo, segmented control desno */
.agro-offer-sort-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 16px;
  padding: 10px 2px;
}

.agro-offer-sort-count {
  margin: 0;
  font-size: var(--agro-font-size-sm);
  font-weight: 600;
  color: var(--agro-text-muted);
}

.agro-offer-sort-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px;
  background: var(--agro-surface-alt);
  border: var(--agro-border-width) solid var(--agro-border);
  border-radius: var(--agro-radius-pill);
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}

.agro-offer-sort-tabs::-webkit-scrollbar {
  display: none;
}

.agro-offer-sort-tab {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: var(--agro-text-secondary);
  font-size: var(--agro-font-size-sm);
  font-weight: 600;
  border-radius: var(--agro-radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--agro-transition), color var(--agro-transition);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.agro-offer-sort-tab__arrow {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.agro-offer-sort-tab:hover,
.agro-offer-sort-tab:focus {
  color: var(--agro-text);
  outline: none;
}

.agro-offer-sort-tab--active,
.agro-offer-sort-tab[aria-selected="true"] {
  background: var(--agro-primary);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.agro-offer-sort-tab--active:hover,
.agro-offer-sort-tab[aria-selected="true"]:hover {
  color: #ffffff;
}

@media (max-width: 600px) {
  .agro-offer-sort-row {
    flex-direction: column;
    /* center — tabs pill skuplja na sadrzaj i centrira u redu */
    align-items: center;
    gap: 10px;
  }
  .agro-offer-sort-count {
    text-align: center;
  }
  /* Pill skuplja na sadrzaj — display:inline-flex eksplicitno
     (override parent flex pressure) + align-self:center za centriranje. */
  .agro-offer-sort-tabs {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    align-self: center;
    justify-content: center;
  }
  /* Tightniji tab padding na mobilu — manje praznog prostora unutar piluja */
  .agro-offer-sort-tab {
    padding: 6px 10px;
  }
}

.agro-offers-hub__empty {
  margin-top: 8px;
  padding: 36px 20px;
  border-radius: var(--agro-radius-lg);
  border: 2px dashed color-mix(in srgb, var(--agro-border) 70%, var(--agro-accent) 30%);
  background: color-mix(in srgb, var(--agro-surface-card) 92%, var(--agro-surface-alt) 8%);
  text-align: center;
}

.agro-offers-hub__empty-inner svg {
  color: var(--agro-brown-light);
  margin-bottom: 12px;
  opacity: 0.85;
}

.agro-offers-hub__empty-text {
  margin: 0;
  font-size: var(--agro-font-size-base);
  font-weight: 600;
  color: var(--agro-text-secondary);
}

.agro-offers-hub__loadmore {
  margin-top: 8px;
}

.agro-offers-hub__load-btn {
  border-radius: var(--agro-radius) !important;
}

@media (max-width: 991px) {
  .agro-offers-hub__masthead {
    padding: 20px 18px 18px;
  }

  .agro-offers-hub__toolbar {
    top: 56px;
  }
}

@media (max-width: 767px) {
  .agro-offers-hub__toolbar {
    position: static;
  }

  .agro-offers-hub__search--toolbar,
  .agro-offers-hub__field--toolbar {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
  }
}

@media (max-width: 575px) {
  .agro-offers-hub__masthead-actions {
    width: 100%;
  }

  .agro-offers-hub__btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Fix mobilnog horizontal scroll-a: Bootstrap .row -15px margin overflow-uje
   u offers gridu. Neutralizuj sa gutter:0 + kompenzacija paddinga na karticama.
   Flex-wrap resava "stair-step" rupe kad cards imaju razlicite visine
   (owner akcije, price drop pill, is_negotiable, duzina naslova) — sve kolone
   u istom redu stretch-uju na jednaku visinu. */
.agro-offers-hub__grid {
  margin-left: 0;
  margin-right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.agro-offers-hub__grid > [class*="col-"] {
  padding-left: 6px;
  padding-right: 6px;
  display: flex;
  float: none;
}
.agro-offers-hub__grid > [class*="col-"] > .agro-offer-card {
  width: 100%;
}
/* ROOT-CAUSE FIX: WoWonder koristi Bootstrap 3 float-grid; cim smo postavili
   display:flex i float:none, izgubili smo BS3 width:100% pravilo, pa col-ovi
   sada nasledjuju intrinsic width od sadrzaja (col-sm-12 sa REAL slikom
   se prosirio do prirodne sirine slike, dok je col sa SVG default cover-om
   ostao uzi). Eksplicitno postavljamo flex-basis po breakpoint-u — ovo je
   ekvivalent Bootstrap 3 grid pravila ali za flex parent. */
@media (max-width: 767.98px) {
  .agro-offers-hub__grid > .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .agro-offers-hub__grid > .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (min-width: 992px) {
  .agro-offers-hub__grid > .col-lg-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}
/* ─────────────────────────────────────────────────────────────
 * MOBILE (≤767.98px) — single column oglas grid:
 *   • Karta zauzima maksimalnu sirinu viewporta (gutter sveden na 4px).
 *   • Sve karte imaju IDENTICNE dimenzije bez obzira na sadrzaj
 *     (min-height enforce — flex stretch ne radi izmedju row-ova).
 *   • Vertikalni razmak medju kartama smanjen na 10px (gusce listanje).
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .page-margin:has(.agro-offers-hub) > .row {
    margin-left: 0;
    margin-right: 0;
  }
  .page-margin:has(.agro-offers-hub) > .row > [class*="col-"] {
    padding-left: 4px;
    padding-right: 4px;
  }
  .agro-offers-hub__grid {
    margin-left: 0;
    margin-right: 0;
  }
  .agro-offers-hub__grid > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }
  .agro-offers-hub__grid > .offer-card {
    margin-bottom: 10px;
  }
}

/* ─────────────────────────────────────────────────────────────
 * Equal-height reservacije (mobile + tablet, single + 2-col):
 * Single-column row-ovi ne nasledjuju height stretch iz flex parenta,
 * pa svaki segment koji moze izostati MORA da rezervise svoju visinu.
 *   • __top — uvek 17px (rezervisano i kada time fali)
 *   • __mid — uvek min 86px (price 26 + pills 22 + gap + loc 18 + pb 10)
 *   • __loc — vec ima min-height 18px (postojeci stil)
 * Time ovo karte sa/bez municipality, sa/bez time, sa/bez negotiable
 * imaju IDENTICNE ukupne visine.
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .agro-offer-card__top {
    min-height: 17px;
  }
  .agro-offer-card__mid {
    min-height: 86px;
  }
}

/* ─────────────────────────────────────────────────────────────
 * TABLET (768-991.98px) — 2-kolone:
 *   • Maksimizovana sirina karte (gutter sveden na 8px izmedju).
 *   • Equal-height vec radi preko flex stretch (siblings u redu).
 * ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
  .page-margin:has(.agro-offers-hub) > .row {
    margin-left: 0;
    margin-right: 0;
  }
  .page-margin:has(.agro-offers-hub) > .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
  }
  .agro-offers-hub__grid {
    margin-left: -4px;
    margin-right: -4px;
  }
  .agro-offers-hub__grid > [class*="col-"] {
    padding-left: 4px;
    padding-right: 4px;
  }
  .agro-offers-hub__grid > .offer-card {
    margin-bottom: 8px;
  }
}

.agro-night .agro-offers-hub__masthead {
  background: linear-gradient(145deg, #1e2420 0%, #252b26 50%, #1a1f1b 100%);
  border-color: var(--agro-border);
}

.agro-night .agro-offers-hub__masthead::before {
  opacity: 0.2;
}

.agro-night .agro-offers-hub__title {
  color: var(--agro-text);
}

.agro-night .agro-offers-hub__lede {
  color: var(--agro-text-muted);
}

.agro-night .agro-offers-hub__toolbar {
  background: var(--agro-surface-card);
  border-color: var(--agro-border);
}

.agro-night .agro-offers-hub__empty {
  border-color: var(--agro-border);
  background: rgba(0, 0, 0, 0.2);
}

.agro-night .agro-offers-hub__search-row {
  background: var(--agro-surface);
  border-color: var(--agro-border);
}

.agro-night .agro-offers-hub__search-submit {
  border-left-color: var(--agro-border);
}

/* D8c — Objavi oglas (isti vizuelni jezik kao browse Ponude) */
.agro-offers-create__body {
  margin-top: 0;
  padding: 24px 24px 28px;
  border-radius: var(--agro-radius-lg);
  background: var(--agro-surface-card);
  border: var(--agro-border-width) solid var(--agro-border);
  box-shadow: var(--agro-shadow-sm);
}

.agro-offers-create__group {
  margin-bottom: 22px;
}

.agro-offers-create__group .agro-offers-hub__label {
  margin-bottom: 8px;
}

.agro-offers-create__textarea {
  min-height: 140px;
  resize: vertical;
}

.agro-offers-create__hint {
  display: block;
  margin-top: 6px;
  font-size: var(--agro-font-size-xs);
  color: var(--agro-text-muted);
}

.agro-offers-create__row {
  margin-left: -8px;
  margin-right: -8px;
}

.agro-offers-create__row > [class*='col-'] {
  padding-left: 8px;
  padding-right: 8px;
}

.agro-offers-create__radios {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
  align-items: center;
}

.agro-offers-create__radios .radio-inline {
  margin: 0;
  font-weight: 500;
  color: var(--agro-text);
}

.agro-offers-create__dropzone {
  margin-top: 8px;
}

.agro-offers-create__dropzone-text {
  margin: 10px 0 12px;
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text-secondary);
}

.agro-offers-create__browse-btn {
  border-radius: var(--agro-radius) !important;
}

.agro-offers-create__entity-stack {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agro-offers-create__entity-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--agro-radius);
  border: var(--agro-border-width) solid var(--agro-border);
  background: color-mix(in srgb, var(--agro-surface-alt) 65%, var(--agro-surface-card) 35%);
  cursor: pointer;
  transition: border-color var(--agro-transition), background var(--agro-transition);
}

.agro-offers-create__entity-option:hover {
  border-color: color-mix(in srgb, var(--agro-accent) 45%, var(--agro-border));
}

.agro-offers-create__entity-option input {
  margin-top: 3px;
}

.agro-offers-create__entity-text {
  flex: 1;
  font-weight: 500;
  line-height: 1.4;
}

.agro-offers-create__entity-note {
  display: block;
  margin-top: 2px;
  color: var(--agro-text-muted);
  font-weight: 400;
}

.agro-offers-create__alert {
  margin-top: 16px;
  border-radius: var(--agro-radius);
}

.agro-offers-create__progress {
  margin-top: 16px;
}

.agro-offers-create__submit {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
  min-height: 48px;
  font-size: var(--agro-font-size-base);
}

.agro-offers-create .offer-dropzone.agro-offers-create__dropzone {
  border-color: color-mix(in srgb, var(--agro-border) 80%, var(--agro-accent) 20%);
  background: color-mix(in srgb, var(--agro-surface-alt) 55%, var(--agro-surface-card) 45%);
}

.agro-offers-create .offer-dropzone.agro-offers-create__dropzone svg {
  color: var(--agro-brown-light);
  opacity: 0.9;
}

.agro-night .agro-offers-create__body {
  background: var(--agro-surface-card);
  border-color: var(--agro-border);
}

.agro-night .agro-offers-create__entity-option {
  background: rgba(0, 0, 0, 0.15);
  border-color: var(--agro-border);
}

.agro-night .agro-offers-create .offer-dropzone.agro-offers-create__dropzone {
  background: rgba(0, 0, 0, 0.12);
}

/* D8d — Moji oglasi (stat kartice + ista hijerarhija kao Ponude) */
.agro-offers-my__masthead-actions {
  flex-wrap: wrap;
}

.agro-offers-my__panel {
  margin-bottom: 22px;
  padding: 16px 18px 18px;
  border-radius: var(--agro-radius-lg);
  background: var(--agro-surface-card);
  border: var(--agro-border-width) solid var(--agro-border);
  box-shadow: var(--agro-shadow-sm);
}

.agro-offers-my__panel-hint {
  margin: 0 0 14px;
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text-secondary);
  line-height: 1.45;
}

/* WoWonder ponekad slama grid na nav/a — eksplicitno */
section.agro-offers-my nav.agro-offers-my__stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

section.agro-offers-my nav.agro-offers-my__stats > a.agro-offers-my__stat {
  display: block !important;
  border-radius: var(--agro-radius-lg);
  border: var(--agro-border-width) solid var(--agro-border);
  background: color-mix(in srgb, var(--agro-surface-alt) 50%, var(--agro-surface-card) 50%);
  color: inherit;
  text-decoration: none !important;
  box-shadow: var(--agro-shadow-sm);
  transition:
    border-color var(--agro-transition),
    box-shadow var(--agro-transition),
    background var(--agro-transition),
    transform var(--agro-transition-fast);
}

.agro-offers-my__stat-inner {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 112px;
  padding: 14px 10px 18px;
  overflow: hidden;
}

.agro-offers-my__stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 8px;
  border-radius: 50%;
  transition: transform 0.25s ease, background 0.25s ease;
}

.agro-offers-my__stat--all .agro-offers-my__stat-icon {
  background: color-mix(in srgb, var(--agro-brown) 18%, transparent);
  color: var(--agro-brown);
}

.agro-offers-my__stat--active .agro-offers-my__stat-icon {
  background: color-mix(in srgb, var(--agro-success) 22%, transparent);
  color: var(--agro-success);
}

.agro-offers-my__stat--expired .agro-offers-my__stat-icon {
  background: color-mix(in srgb, var(--agro-warning) 24%, transparent);
  color: var(--agro-warning);
}

.agro-offers-my__stat--sold .agro-offers-my__stat-icon {
  background: color-mix(in srgb, var(--agro-accent) 26%, transparent);
  color: var(--agro-accent-hover);
}

@media (hover: hover) {
  section.agro-offers-my nav.agro-offers-my__stats > a.agro-offers-my__stat:hover {
    border-color: color-mix(in srgb, var(--agro-accent) 55%, var(--agro-border));
    transform: translateY(-3px);
    box-shadow: var(--agro-shadow-md);
  }

  section.agro-offers-my nav.agro-offers-my__stats > a.agro-offers-my__stat:hover .agro-offers-my__stat-icon {
    transform: scale(1.06);
  }
}

section.agro-offers-my nav.agro-offers-my__stats > a.agro-offers-my__stat:active {
  transform: translateY(0) scale(0.99);
}

section.agro-offers-my nav.agro-offers-my__stats > a.agro-offers-my__stat:focus-visible {
  outline: none;
}

section.agro-offers-my nav.agro-offers-my__stats > a.agro-offers-my__stat:focus-visible .agro-offers-my__stat-inner {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--agro-accent) 45%, transparent);
  border-radius: calc(var(--agro-radius-lg) - 2px);
}

.agro-offers-my__stat.is-active {
  border-color: var(--agro-accent);
  background: color-mix(in srgb, var(--agro-accent) 12%, var(--agro-surface-card) 88%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--agro-accent) 40%, transparent),
    var(--agro-shadow-sm);
}

.agro-offers-my__stat.is-active .agro-offers-my__stat-icon {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--agro-accent) 35%, transparent);
}

/* Udio u ukupnom broju oglasa — animirana traka */
.agro-offers-my__stat-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  max-width: 100%;
  border-radius: 0 6px 0 var(--agro-radius-lg);
  transition: width 0.45s ease;
}

.agro-offers-my__stat--all .agro-offers-my__stat-bar {
  background: linear-gradient(90deg, var(--agro-brown-light), var(--agro-brown));
}

.agro-offers-my__stat--active .agro-offers-my__stat-bar {
  background: linear-gradient(90deg, color-mix(in srgb, var(--agro-success) 65%, #fff), var(--agro-success));
}

.agro-offers-my__stat--expired .agro-offers-my__stat-bar {
  background: linear-gradient(90deg, #ffb74d, var(--agro-warning));
}

.agro-offers-my__stat--sold .agro-offers-my__stat-bar {
  background: linear-gradient(90deg, var(--agro-accent), var(--agro-accent-hover));
}

@media (prefers-reduced-motion: reduce) {
  .agro-offers-my__stat-bar {
    transition: none;
  }

  section.agro-offers-my nav.agro-offers-my__stats > a.agro-offers-my__stat:hover {
    transform: none;
  }
}

.agro-offers-my__stat-value {
  font-family: var(--agro-font-heading);
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--agro-text);
}

.agro-offers-my__stat-label {
  margin-top: 6px;
  font-size: var(--agro-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--agro-text-secondary);
  text-align: center;
  line-height: 1.25;
  max-width: 11em;
}

.agro-offers-my__main {
  min-width: 0;
}

.agro-offers-my__empty .agro-offers-hub__empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.agro-offers-my__empty .agro-offers-hub__empty-text {
  text-align: center;
  max-width: 28rem;
}

.agro-offers-my__empty-cta {
  margin-top: 4px;
}

@media (max-width: 767px) {
  section.agro-offers-my nav.agro-offers-my__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .agro-offers-my__stat-inner {
    min-height: 104px;
  }
}

@media (max-width: 400px) {
  section.agro-offers-my nav.agro-offers-my__stats {
    grid-template-columns: 1fr !important;
  }
}

.agro-night .agro-offers-my__panel {
  background: var(--agro-surface-card);
  border-color: var(--agro-border);
}

.agro-night section.agro-offers-my nav.agro-offers-my__stats > a.agro-offers-my__stat {
  background: rgba(0, 0, 0, 0.22);
  border-color: var(--agro-border);
}

.agro-night section.agro-offers-my nav.agro-offers-my__stats > a.agro-offers-my__stat.is-active {
  background: color-mix(in srgb, var(--agro-accent) 16%, rgba(0, 0, 0, 0.35));
}

/* D8e — Kartica oglasa u mreži (Ponude / Moji oglasi) */
.offer-card {
  margin-bottom: 18px;
}

/* ──────────────────────────────────────────────────────────────
 * KP-stil vertikalni oglas card (Faza 8.1, spec §2)
 * ────────────────────────────────────────────────────────────── */
/* Sve karte — suptilan zeleni okvir (brand identitet Pijace).
   Mesa se sa neutralnim border tokenom da bude osetan ali ne agresivan. */
.agro-offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--agro-radius-lg);
  border: var(--agro-border-width) solid color-mix(in srgb, var(--agro-success) 35%, var(--agro-border));
  background: var(--agro-surface-card);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--agro-success) 10%, transparent),
    var(--agro-shadow-sm);
  overflow: hidden;
  height: 100%;
  transition:
    border-color var(--agro-transition),
    box-shadow var(--agro-transition),
    transform var(--agro-transition-fast);
}

@media (hover: hover) {
  .agro-offer-card:hover {
    border-color: color-mix(in srgb, var(--agro-success) 55%, var(--agro-border));
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--agro-success) 25%, transparent),
      var(--agro-shadow-md);
    transform: translateY(-2px);
  }
}

.agro-offer-card--featured {
  border-color: color-mix(in srgb, var(--agro-accent) 55%, var(--agro-border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--agro-accent) 15%, transparent),
    0 1px 3px rgba(230, 126, 34, 0.12);
}

/* "Moj oglas" marker — POJACAN zeleni ring + glow za vlastite oglase
   (NE u "Moji oglasi" kontekstu — tamo su svi vlasnikovi).
   box-shadow spread cuva originalne dimenzije kartice — grid ostaje konzistentan. */
.agro-offer-card--mine {
  border-color: var(--agro-success);
  box-shadow:
    0 0 0 2px var(--agro-success),
    0 0 0 4px color-mix(in srgb, var(--agro-success) 18%, transparent),
    0 2px 8px color-mix(in srgb, var(--agro-success) 22%, transparent);
}

@media (hover: hover) {
  .agro-offer-card--mine:hover {
    border-color: var(--agro-primary-dark);
    box-shadow:
      0 0 0 2px var(--agro-primary-dark),
      0 0 0 5px color-mix(in srgb, var(--agro-success) 25%, transparent),
      0 6px 16px color-mix(in srgb, var(--agro-success) 30%, transparent);
    transform: translateY(-2px);
  }
}

/* Featured + mine kombinacija — zeleni marker ima prioritet (vlasnički signal je vazniji
   od promocionog, a zeleno/narandzasto kombinacija bi bila vizuelno haoticna). */
.agro-offer-card--mine.agro-offer-card--featured {
  border-color: var(--agro-success);
  box-shadow:
    0 0 0 2px var(--agro-success),
    0 0 0 4px color-mix(in srgb, var(--agro-success) 18%, transparent),
    0 2px 8px color-mix(in srgb, var(--agro-success) 22%, transparent);
}

.agro-offer-card--sold .agro-offer-card__img,
.agro-offer-card--sold .agro-offer-card__media-shade {
  filter: grayscale(60%);
}

.agro-offer-card--expired {
  opacity: 0.72;
}

.agro-offer-card--expired .agro-offer-card__img {
  filter: grayscale(80%);
}

.agro-offer-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: color-mix(in srgb, var(--agro-surface-alt) 80%, var(--agro-border) 20%);
}

.agro-offer-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

@media (hover: hover) {
  .agro-offer-card:hover .agro-offer-card__img {
    transform: scale(1.04);
  }
}

.agro-offer-card__media-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, transparent 42%, rgba(0, 0, 0, 0.06) 100%);
  pointer-events: none;
}

/* Badge kontejneri — pozicionirani preko media */
.agro-offer-card__badges {
  position: absolute;
  display: flex;
  gap: 6px;
  z-index: 2;
  pointer-events: none;
}

.agro-offer-card__badges--top-left {
  top: 10px;
  left: 10px;
  flex-direction: column;
  align-items: flex-start;
}

.agro-offer-card__badges--bottom-left {
  bottom: 10px;
  left: 10px;
  flex-direction: column;
  align-items: flex-start;
}

.agro-offer-card__badges--bottom-right {
  bottom: 10px;
  right: 10px;
  flex-direction: column;
  align-items: flex-end;
}

.agro-offer-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--agro-radius-pill);
  line-height: 1.2;
  white-space: nowrap;
}

.agro-offer-card__pill--cond {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.agro-offer-card__pill--novo {
  background: var(--agro-primary-soft);
  color: var(--agro-primary-dark);
  border: 1px solid color-mix(in srgb, var(--agro-primary) 30%, transparent);
}

.agro-offer-card__pill--polovno {
  background: var(--agro-surface-alt);
  color: var(--agro-text-muted);
  border: 1px solid var(--agro-border);
}

.agro-offer-card__pill--featured {
  background: var(--agro-accent);
  color: #fff;
  border: 1px solid var(--agro-accent-hover);
  box-shadow: 0 2px 6px rgba(230, 126, 34, 0.35);
}

.agro-offer-card__pill--negotiable {
  background: transparent;
  color: var(--agro-text-muted);
  border: 1px solid var(--agro-border-strong);
  text-transform: none;
  letter-spacing: 0;
  padding: 3px 8px;
  font-size: 11px;
}

.agro-offer-card__pill--price-drop {
  background: color-mix(in srgb, var(--agro-danger) 12%, transparent);
  color: var(--agro-danger);
  border: 1px solid color-mix(in srgb, var(--agro-danger) 40%, transparent);
  text-transform: none;
  letter-spacing: 0;
  padding: 3px 8px;
  font-size: 11px;
}

.agro-offer-card__pill--price-rise {
  background: color-mix(in srgb, var(--agro-success) 12%, transparent);
  color: var(--agro-success);
  border: 1px solid color-mix(in srgb, var(--agro-success) 40%, transparent);
  text-transform: none;
  letter-spacing: 0;
  padding: 3px 8px;
  font-size: 11px;
}

/* Views mini-badge (bottom-right overlay) */
.agro-offer-card__views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--agro-radius-pill);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

/* Favorite (heart) dugme — top-right iznad media */
.agro-offer-card__fav {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--agro-text-muted);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition:
    background var(--agro-transition),
    color var(--agro-transition),
    transform var(--agro-transition-fast);
}

.agro-offer-card__fav:hover,
.agro-offer-card__fav:focus-visible {
  background: #fff;
  color: var(--agro-danger);
  outline: none;
}

.agro-offer-card__fav--active {
  color: var(--agro-danger);
}

/* Read-only heart za vlasnika — bez hover/cursor efekta */
.agro-offer-card__fav--readonly {
  color: var(--agro-danger);
  cursor: default;
  pointer-events: none;
}

/* Javni counter ukupnih cuvanja ovog oglasa (badge preko heart dugmeta) */
.agro-offer-card__fav-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--agro-danger);
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  transition: transform var(--agro-transition-fast);
  box-sizing: border-box;
}

.agro-offer-card__fav-count--empty {
  display: none;
}

.agro-offer-card__fav:hover .agro-offer-card__fav-count,
.agro-offer-card__fav:focus-visible .agro-offer-card__fav-count {
  transform: scale(1.08);
}

/* Sticky-bar varijanta — isto vizuelno, namespace razlicit */
.agro-offer-stickybar__fav {
  position: relative;
}

.agro-offer-stickybar__fav-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--agro-danger);
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  box-sizing: border-box;
}

.agro-offer-stickybar__fav-count--empty {
  display: none;
}

.agro-offer-card__fav:active {
  transform: scale(0.92);
}

/* Sold diagonal ribbon (top-right preko media) */
.agro-offer-card__sold-ribbon {
  position: absolute;
  top: 16px;
  right: -36px;
  z-index: 2;
  width: 140px;
  padding: 6px 0;
  text-align: center;
  background: var(--agro-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(35deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* ─── Card body — tight marketplace card layout (prva slika = cilj) ─
   Vertikalni ritam: 14px outer, 6-10px inter-section (kompaktno).
   Tipografska hijerarhija: meta(11) < loc(13) < title(15) < price(22).
   Sekcije: [meta] [title] [price+pills] [location] [dashed] [seller]
   Equal-height: naslov 2-line reserve + loc/seller min-height,
                 seller koristi margin-top: auto (jedini spacer).
----------------------------------------------------------------- */
.agro-offer-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 14px;
  gap: 0;
  background: transparent;
}

/* Meta row — category + time (small, muted, unobtrusive) */
.agro-offer-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.agro-offer-card__category {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--agro-text-muted);
  max-width: 65%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agro-offer-card__time {
  font-size: 11px;
  font-weight: 500;
  color: var(--agro-text-muted);
  white-space: nowrap;
}

/* Title — primary content anchor (2-line clamp, reserved height) */
.agro-offer-card__title {
  margin: 0 0 8px;
  font-family: var(--agro-font-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.005em;
  min-height: calc(15px * 1.4 * 2);
}

.agro-offer-card__title a {
  color: var(--agro-text);
  text-decoration: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (hover: hover) {
  .agro-offer-card__title a:hover {
    color: var(--agro-primary-dark);
  }
}

/* Mid section — price + location u tight ritmu (6px razmak). Bez auto margina
   ovde — seller preuzima expand duznost preko sopstvenog margin-top: auto. */
.agro-offer-card__mid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 10px;
}

/* Price block — uvek 2 reda: [1] cena, [2] pill-ovi (ili rezervisan prazan prostor).
   Time sve kartice imaju identicnu visinu price sekcije bez obzira na sadrzaj pill-ova. */
.agro-offer-card__price-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.agro-offer-card__price-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-height: 26px;
}

.agro-offer-card__pills-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-height: 22px;
}

.agro-offer-card__price {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--agro-accent);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.agro-offer-card__price-old {
  font-size: 13px;
  font-weight: 600;
  color: var(--agro-text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  font-variant-numeric: tabular-nums;
}

/* Location — icon + text, slight breathing room, muted but legible.
   Uvek ima rezervisanu visinu: oglasi bez opstine zadrzavaju isti vertikalni ritam. */
.agro-offer-card__loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--agro-text-secondary);
  max-width: 100%;
  min-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agro-offer-card__loc svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  opacity: 0.75;
  color: var(--agro-text-muted);
}

/* Seller section — bottom-anchored (margin-top: auto = single spacer u telu kartice),
   dashed separator (agro brand touch). */
.agro-offer-card__seller {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--agro-border) 85%, var(--agro-brown) 15%);
  font-size: 13px;
  color: var(--agro-text-secondary);
  min-height: 36px;
}

.agro-offer-card__avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.agro-offer-card__avatar--g {
  background: color-mix(in srgb, var(--agro-success) 22%, transparent);
  color: var(--agro-primary-dark);
  border: 1px solid color-mix(in srgb, var(--agro-success) 45%, transparent);
}

.agro-offer-card__avatar--f {
  background: color-mix(in srgb, var(--agro-info) 22%, transparent);
  color: var(--agro-info);
  border: 1px solid color-mix(in srgb, var(--agro-info) 40%, transparent);
}

.agro-offer-card__avatar--u {
  background: var(--agro-surface-alt);
  color: var(--agro-brown-light);
  border: 1px solid var(--agro-border);
}

.agro-offer-card__avatar--u svg {
  opacity: 0.9;
}

.agro-offer-card__seller-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--agro-text-secondary);
}

.agro-offer-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.agro-offer-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--agro-radius-sm);
  border: 1px solid var(--agro-border);
  background: var(--agro-surface-alt);
  color: var(--agro-text);
  cursor: pointer;
  transition: background var(--agro-transition), border-color var(--agro-transition), color var(--agro-transition);
}

.agro-offer-card__btn--ghost:hover,
.agro-offer-card__btn--ghost:focus {
  border-color: color-mix(in srgb, var(--agro-primary) 35%, var(--agro-border));
  background: color-mix(in srgb, var(--agro-primary-bg) 65%, var(--agro-surface-card));
  color: var(--agro-primary-dark);
  outline: none;
}

.agro-offer-card__btn--danger {
  border-color: color-mix(in srgb, var(--agro-danger) 45%, var(--agro-border));
  background: color-mix(in srgb, var(--agro-danger) 8%, var(--agro-surface-card));
  color: var(--agro-danger);
}

.agro-offer-card__btn--danger:hover,
.agro-offer-card__btn--danger:focus {
  background: color-mix(in srgb, var(--agro-danger) 16%, var(--agro-surface-card));
  outline: none;
}

@media (max-width: 360px) {
  .agro-offer-card__body {
    padding: 12px;
  }

  .agro-offer-card__title {
    font-size: 14px;
    min-height: calc(14px * 1.4 * 2);
  }

  .agro-offer-card__price {
    font-size: 20px;
  }

  .agro-offer-card__fav {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agro-offer-card:hover .agro-offer-card__img {
    transform: none;
  }
}

.agro-night .agro-offer-card {
  background: var(--agro-surface-card);
  border-color: var(--agro-border);
}

.agro-night .agro-offer-card__seller {
  border-top-color: var(--agro-border);
}

.agro-night .agro-offer-card__btn {
  background: rgba(0, 0, 0, 0.2);
  border-color: var(--agro-border);
  color: var(--agro-text-muted);
}

/* D8b — Offer detail (single oglas) — agro-offer-detail — REDESIGN v2 */

/* ── Base container ─────────────────────────────────────────── */
/* CURSOR-NOTE: Galerija je u markup-u ispod body, odmah iznad slicnih oglasa (detail.phtml). */
.agro-offer-detail {
  margin-bottom: var(--agro-space-lg);
  /* FAZA 12.5 safety net — clip ne kreira scroll kontekst (za razliku od hidden),
     pa sticky child (.agro-offer-stickybar) i dalje nasleđuje viewport. */
  overflow-x: clip;
  overflow-y: visible;
}

@supports not (overflow: clip) {
  .agro-offer-detail {
    overflow-x: hidden;
  }
}

/* Razmak izmedju dve kolone (naslov/CTA) i galerije ispod */
.agro-offer-detail__body + .agro-offer-detail__gallery {
  margin-top: var(--agro-space-xl);
}

.agro-offer-detail--mobile-cta {
  padding-bottom: 90px;
}

/* ── Back link — sada u headeru, desno-gore (FAZA 13.x) ────── */
.agro-offer-detail__back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  background: var(--agro-surface-alt);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-pill);
  font-size: var(--agro-font-size-sm);
  font-weight: 600;
  color: var(--agro-text-secondary) !important;
  text-decoration: none !important;
  transition: background var(--agro-transition), color var(--agro-transition), border-color var(--agro-transition);
  white-space: nowrap;
}

.agro-offer-detail__back-link:hover,
.agro-offer-detail__back-link:focus {
  background: var(--agro-primary-soft);
  border-color: color-mix(in srgb, var(--agro-primary) 35%, var(--agro-border));
  color: var(--agro-primary-dark, var(--agro-primary)) !important;
  outline: none;
  text-decoration: none !important;
}

.agro-offer-detail__back-icon {
  transition: transform var(--agro-transition);
}

.agro-offer-detail__back-link:hover .agro-offer-detail__back-icon {
  transform: translateX(-2px);
}

.agro-offer-detail__back-link--header {
  flex-shrink: 0;
  align-self: flex-start;
}

@media (max-width: 600px) {
  .agro-offer-detail__back-link { padding: 6px 10px 6px 6px; font-size: 13px; }
}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.agro-offer-detail__crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 var(--agro-space-md);
  padding: 0;
  font-size: var(--agro-font-size-sm);
  font-family: var(--agro-font-body);
  list-style: none;
}

.agro-offer-detail__crumb a {
  color: var(--agro-primary-dark);
  font-weight: 600;
  text-decoration: none !important; /* override WoWonder defaults */
  transition: color var(--agro-transition);
}

.agro-offer-detail__crumb a:hover,
.agro-offer-detail__crumb a:focus {
  color: var(--agro-accent);
  text-decoration: underline !important;
}

.agro-offer-detail__crumb-sep {
  margin: 0 4px;
  color: var(--agro-text-muted);
  font-weight: 400;
  user-select: none;
}

.agro-offer-detail__crumb-current {
  color: var(--agro-text-muted);
  font-weight: 400;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Hero gallery — full-width immersive ────────────────────── */
.agro-offer-detail__gallery {
  position: relative;
  border-radius: var(--agro-radius-lg);
  overflow: hidden;
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  box-shadow: var(--agro-shadow-sm);
  margin-bottom: var(--agro-space-lg);
}

.agro-offer-detail__gallery:focus {
  outline: none;
  box-shadow: var(--agro-focus-ring), var(--agro-shadow-sm);
}

/* Stage = main image area */
.agro-offer-detail__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--agro-primary) 6%, transparent) 0%, transparent 55%),
    linear-gradient(165deg, var(--agro-surface-alt) 0%, var(--agro-surface) 100%);
  min-height: 300px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.agro-offer-detail__figure {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agro-offer-detail__main-img {
  max-height: min(60vh, 560px);
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity var(--agro-transition);
}

.agro-offer-detail__main-img.agro-offer-detail__img--loading {
  opacity: 0.4;
}

/* Skeleton placeholder while image loads */
.agro-offer-detail__skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--agro-surface-alt) 25%, var(--agro-surface) 50%, var(--agro-surface-alt) 75%);
  background-size: 200% 100%;
  animation: agro-skeleton-pulse 1.5s ease-in-out infinite;
  z-index: 0;
}

@keyframes agro-skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Overlay controls on stage */
.agro-offer-detail__stage-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--agro-space-md);
}

.agro-offer-detail__stage-overlay > * {
  pointer-events: auto;
}

/* Photo counter badge — overlay on image */
.agro-offer-detail__photo-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--agro-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  padding: 6px 14px;
  border-radius: 999px;
}

.agro-offer-detail__photo-count svg {
  opacity: 0.85;
}

/* Zoom button — overlay top-right */
.agro-offer-detail__stage-actions {
  display: flex;
  gap: var(--agro-space-sm);
}

.agro-offer-detail__zoom-btn,
.agro-offer-detail__share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  color: #fff;
  cursor: pointer;
  transition: background var(--agro-transition), transform var(--agro-transition);
}

.agro-offer-detail__zoom-btn:hover,
.agro-offer-detail__zoom-btn:focus,
.agro-offer-detail__share-btn:hover,
.agro-offer-detail__share-btn:focus {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.08);
  outline: none;
}

/* Nav arrows */
.agro-offer-detail__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--agro-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: background var(--agro-transition), transform var(--agro-transition), box-shadow var(--agro-transition);
  opacity: 0;
}

.agro-offer-detail__gallery:hover .agro-offer-detail__nav,
.agro-offer-detail__nav:focus {
  opacity: 1;
}

.agro-offer-detail__nav:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.agro-offer-detail__nav:focus {
  outline: none;
  box-shadow: var(--agro-focus-ring), 0 2px 8px rgba(0, 0, 0, 0.15);
}

.agro-offer-detail__nav--prev { left: 12px; }
.agro-offer-detail__nav--next { right: 12px; }

/* Thumbnail strip */
.agro-offer-detail__thumbs {
  display: flex;
  gap: var(--agro-space-sm);
  padding: var(--agro-space-sm) var(--agro-space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--agro-border) transparent;
  background: var(--agro-surface);
  border-top: 1px solid var(--agro-border);
}

.agro-offer-detail__thumbs::-webkit-scrollbar {
  height: 4px;
}

.agro-offer-detail__thumbs::-webkit-scrollbar-thumb {
  background: var(--agro-border);
  border-radius: 2px;
}

.agro-offer-detail__thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--agro-radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: var(--agro-surface-alt);
  scroll-snap-align: start;
  transition: border-color var(--agro-transition), opacity var(--agro-transition);
  opacity: 0.7;
}

.agro-offer-detail__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.agro-offer-detail__thumb:hover,
.agro-offer-detail__thumb:focus {
  opacity: 1;
  border-color: var(--agro-primary-light);
  outline: none;
}

.agro-offer-detail__thumb.active {
  opacity: 1;
  border-color: var(--agro-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--agro-accent) 30%, transparent);
}

/* ── Main content layout — two columns ──────────────────────── */
.agro-offer-detail__body {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--agro-space-lg);
  align-items: start;
}

/* ── Left column — title, tabs ──────────────────────────────── */
.agro-offer-detail__content {
  min-width: 0;
}

/* Title block — flex row: title/meta levo, back button gore-desno */
.agro-offer-detail__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--agro-space-md);
  margin-bottom: var(--agro-space-lg);
}

.agro-offer-detail__header-main {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 600px) {
  .agro-offer-detail__header {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--agro-space-sm);
  }
  .agro-offer-detail__back-link--header {
    align-self: flex-start;
  }
}

.agro-offer-detail__title {
  margin: 0 0 var(--agro-space-sm);
  font-family: var(--agro-font-heading);
  font-size: var(--agro-font-size-h1);
  font-weight: 800;
  color: var(--agro-text);
  line-height: 1.25;
  word-break: break-word;
}

.agro-offer-detail__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--agro-space-sm) var(--agro-space-md);
}

.agro-offer-detail__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text-secondary);
}

.agro-offer-detail__meta-item svg {
  color: var(--agro-primary);
  flex-shrink: 0;
}

.agro-offer-detail__meta-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--agro-text-muted);
  flex-shrink: 0;
}

/* Pills — condition, category, status */
.agro-offer-detail__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--agro-space-sm);
  margin-top: var(--agro-space-sm);
}

.agro-offer-detail__pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: var(--agro-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.agro-offer-detail__pill--novo {
  background: color-mix(in srgb, var(--agro-primary) 14%, transparent);
  color: var(--agro-primary-dark);
  border: 1px solid color-mix(in srgb, var(--agro-primary) 30%, transparent);
}

.agro-offer-detail__pill--polovno {
  background: color-mix(in srgb, var(--agro-brown) 10%, transparent);
  color: var(--agro-brown);
  border: 1px solid color-mix(in srgb, var(--agro-brown) 20%, transparent);
}

.agro-offer-detail__pill--cat {
  background: var(--agro-surface-alt);
  color: var(--agro-text-secondary);
  border: 1px solid var(--agro-border);
}

.agro-offer-detail__pill--sold {
  background: color-mix(in srgb, var(--agro-danger) 12%, transparent);
  color: var(--agro-danger);
  border: 1px solid color-mix(in srgb, var(--agro-danger) 30%, transparent);
}

.agro-offer-detail__pill--expired {
  background: color-mix(in srgb, var(--agro-text-muted) 14%, transparent);
  color: var(--agro-text-secondary);
  border: 1px solid var(--agro-border);
}

/* ── Tabs ────────────────────────────────────────────────────── */
.agro-offer-detail__tabs {
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-lg);
  background: var(--agro-surface-card);
  box-shadow: var(--agro-shadow-sm);
  overflow: hidden;
}

.agro-offer-detail__tab-nav {
  display: flex;
  border-bottom: 1px solid var(--agro-border);
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--agro-surface);
}

.agro-offer-detail__tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px var(--agro-space-md);
  border: none;
  background: transparent;
  color: var(--agro-text-muted);
  font-family: var(--agro-font-body);
  font-size: var(--agro-font-size-sm);
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: color var(--agro-transition), background var(--agro-transition);
  min-height: 48px;
}

.agro-offer-detail__tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
  transition: background var(--agro-transition);
}

.agro-offer-detail__tab-btn:hover {
  color: var(--agro-text);
  background: color-mix(in srgb, var(--agro-primary) 4%, transparent);
}

.agro-offer-detail__tab-btn:focus {
  outline: none;
  box-shadow: inset var(--agro-focus-ring);
}

.agro-offer-detail__tab-btn[aria-selected="true"] {
  color: var(--agro-primary-dark);
  background: var(--agro-surface-card);
}

.agro-offer-detail__tab-btn[aria-selected="true"]::after {
  background: var(--agro-primary);
}

.agro-offer-detail__tab-panel {
  padding: var(--agro-space-lg);
  animation: agro-tab-fadein 250ms ease;
}

.agro-offer-detail__tab-panel[hidden] {
  display: none;
}

@keyframes agro-tab-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tab: Opis */
.agro-offer-detail__description {
  line-height: var(--agro-line-height);
  color: var(--agro-text);
  font-size: var(--agro-font-size);
  position: relative;
  word-break: break-word;
}

#agro-offer-desc:not(.agro-offer-detail__desc--expanded) {
  max-height: 280px;
  overflow: hidden;
}

#agro-offer-desc.agro-offer-detail__desc--fade:not(.agro-offer-detail__desc--expanded)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--agro-surface-card));
}

#agro-offer-desc.agro-offer-detail__desc--expanded::after {
  display: none;
}

.agro-offer-detail__desc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--agro-space-md);
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--agro-border);
  background: var(--agro-surface);
  color: var(--agro-primary-dark);
  font-weight: 600;
  font-size: var(--agro-font-size-sm);
  cursor: pointer;
  min-height: 44px;
  transition: background var(--agro-transition), border-color var(--agro-transition), color var(--agro-transition);
}

.agro-offer-detail__desc-toggle:hover,
.agro-offer-detail__desc-toggle:focus {
  border-color: var(--agro-primary);
  background: var(--agro-primary-bg);
  outline: none;
}

/* Tab: Detalji */
.agro-offer-detail__facts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.agro-offer-detail__fact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--agro-border) 60%, transparent);
  font-size: var(--agro-font-size);
  color: var(--agro-text);
  line-height: 1.45;
}

.agro-offer-detail__fact:last-child {
  border-bottom: none;
}

.agro-offer-detail__fact-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--agro-radius-sm);
  background: var(--agro-primary-bg);
  color: var(--agro-primary);
}

.agro-offer-detail__fact-label {
  font-weight: 400;
  color: var(--agro-text-muted);
  min-width: 80px;
  font-size: var(--agro-font-size-sm);
}

.agro-offer-detail__fact-value {
  font-weight: 600;
  color: var(--agro-text);
}

/* Tab: Prodavac */
.agro-offer-detail__seller-card {
  display: flex;
  align-items: center;
  gap: var(--agro-space-md);
  padding: var(--agro-space-md);
  border-radius: var(--agro-radius);
  background: var(--agro-surface);
  border: 1px solid var(--agro-border);
}

.agro-offer-detail__seller-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--agro-primary-bg);
  flex-shrink: 0;
}

.agro-offer-detail__seller-info {
  flex: 1;
  min-width: 0;
}

.agro-offer-detail__seller-name {
  display: flex;
  align-items: center;
  gap: var(--agro-space-sm);
  font-weight: 700;
  font-size: var(--agro-font-size-h3);
  color: var(--agro-text);
  text-decoration: none;
  transition: color var(--agro-transition);
}

.agro-offer-detail__seller-name:hover {
  color: var(--agro-primary-dark);
}

.agro-offer-detail__seller-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.agro-offer-detail__seller-badge--gazdinstvo {
  background: color-mix(in srgb, var(--agro-primary) 14%, transparent);
  color: var(--agro-primary-dark);
}

.agro-offer-detail__seller-badge--firma {
  background: color-mix(in srgb, var(--agro-info) 14%, transparent);
  color: var(--agro-info);
}

.agro-offer-detail__seller-since {
  margin-top: 4px;
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text-muted);
}

.agro-offer-detail__seller-link {
  margin-top: var(--agro-space-md);
}

.agro-offer-detail__seller-link .btn {
  min-height: 44px;
}

/* ── Right column — sticky aside ────────────────────────────── */
.agro-offer-detail__aside {
  position: sticky;
  top: 76px;
  z-index: 4;
}

.agro-offer-detail__aside-card {
  border-radius: var(--agro-radius-lg);
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  box-shadow: var(--agro-shadow-md);
  padding: var(--agro-space-lg);
}

/* Price block */
.agro-offer-detail__price-block {
  margin-bottom: var(--agro-space-md);
  padding-bottom: var(--agro-space-md);
  border-bottom: 1px solid var(--agro-border);
}

.agro-offer-detail__price-label {
  margin: 0 0 2px;
  font-size: var(--agro-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--agro-text-muted);
}

.agro-offer-detail__price {
  margin: 0;
  font-family: var(--agro-font-heading);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 800;
  color: var(--agro-accent);
  line-height: 1.15;
}

/* Aside seller mini row */
.agro-offer-detail__aside-seller {
  display: flex;
  align-items: center;
  gap: var(--agro-space-sm);
  margin-bottom: var(--agro-space-md);
  padding-bottom: var(--agro-space-md);
  border-bottom: 1px solid var(--agro-border);
}

.agro-offer-detail__aside-seller-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--agro-border);
}

.agro-offer-detail__aside-seller-name {
  font-weight: 600;
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text);
  text-decoration: none;
  transition: color var(--agro-transition);
}

.agro-offer-detail__aside-seller-name:hover {
  color: var(--agro-primary-dark);
}

/* CTA primary */
.agro-offer-detail__cta-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--agro-space-sm);
  width: 100%;
  min-height: 52px;
  padding: 12px var(--agro-space-lg);
  border: none;
  border-radius: var(--agro-radius);
  background: var(--agro-accent);
  color: #fff;
  font-family: var(--agro-font-body);
  font-size: var(--agro-font-size);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--agro-transition), transform var(--agro-transition-fast), box-shadow var(--agro-transition);
  box-shadow: 0 2px 8px rgba(230, 126, 34, 0.25);
}

.agro-offer-detail__cta-primary:hover,
.agro-offer-detail__cta-primary:focus {
  background: var(--agro-accent-hover);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(230, 126, 34, 0.35);
  outline: none;
}

.agro-offer-detail__cta-primary:active {
  transform: translateY(0);
}

/* Share button in aside */
.agro-offer-detail__share-row {
  margin-top: var(--agro-space-md);
}

.agro-offer-detail__share-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--agro-space-sm);
  width: 100%;
  min-height: 44px;
  padding: 10px var(--agro-space-md);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  background: var(--agro-surface);
  color: var(--agro-text-secondary);
  font-size: var(--agro-font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--agro-transition), border-color var(--agro-transition), color var(--agro-transition);
}

.agro-offer-detail__share-action:hover,
.agro-offer-detail__share-action:focus {
  border-color: var(--agro-primary);
  background: var(--agro-primary-bg);
  color: var(--agro-primary-dark);
  outline: none;
}

.agro-offer-detail__share-toast {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: var(--agro-space-sm);
  padding: 8px 12px;
  border-radius: var(--agro-radius-sm);
  background: color-mix(in srgb, var(--agro-primary) 12%, transparent);
  color: var(--agro-primary-dark);
  font-size: var(--agro-font-size-sm);
  font-weight: 600;
  animation: agro-tab-fadein 200ms ease;
}

.agro-offer-detail__share-toast.show {
  display: flex;
}

/* Owner actions */
.agro-offer-detail__owner-actions {
  display: flex;
  flex-direction: column;
  gap: var(--agro-space-sm);
  margin-top: var(--agro-space-md);
}

.agro-offer-detail__owner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--agro-space-sm);
  min-height: 44px;
  padding: 10px var(--agro-space-md);
  border-radius: var(--agro-radius);
  font-weight: 600;
  font-size: var(--agro-font-size-sm);
  cursor: pointer;
  transition: background var(--agro-transition), border-color var(--agro-transition);
}

.agro-offer-detail__owner-btn--edit {
  background: var(--agro-primary);
  color: #fff;
  border: none;
}

.agro-offer-detail__owner-btn--edit:hover {
  background: var(--agro-primary-dark);
  color: #fff;
}

.agro-offer-detail__owner-btn--sold {
  background: transparent;
  color: var(--agro-accent);
  border: 1px solid var(--agro-accent);
}

.agro-offer-detail__owner-btn--sold:hover {
  background: color-mix(in srgb, var(--agro-accent) 10%, transparent);
}

.agro-offer-detail__owner-btn--delete {
  background: transparent;
  color: var(--agro-danger);
  border: 1px solid color-mix(in srgb, var(--agro-danger) 40%, transparent);
}

.agro-offer-detail__owner-btn--delete:hover {
  background: color-mix(in srgb, var(--agro-danger) 8%, transparent);
  border-color: var(--agro-danger);
}

/* ── Sticky scroll header ───────────────────────────────────── */
.agro-offer-detail__scroll-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10010;
  transform: translateY(-100%);
  transition: transform var(--agro-transition-slow);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--agro-border);
  box-shadow: var(--agro-shadow-sm);
  padding: 10px var(--agro-space-md);
}

.agro-offer-detail__scroll-header.visible {
  transform: translateY(0);
}

.agro-offer-detail__scroll-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--agro-space-md);
  max-width: 1200px;
  margin: 0 auto;
}

.agro-offer-detail__scroll-title {
  font-family: var(--agro-font-heading);
  font-size: var(--agro-font-size);
  font-weight: 700;
  color: var(--agro-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.agro-offer-detail__scroll-price {
  font-family: var(--agro-font-heading);
  font-weight: 800;
  color: var(--agro-accent);
  font-size: var(--agro-font-size-h3);
  white-space: nowrap;
}

.agro-offer-detail__scroll-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border: none;
  border-radius: var(--agro-radius);
  background: var(--agro-accent);
  color: #fff;
  font-weight: 700;
  font-size: var(--agro-font-size-sm);
  text-decoration: none;
  min-height: 40px;
  flex-shrink: 0;
  transition: background var(--agro-transition);
}

.agro-offer-detail__scroll-cta:hover {
  background: var(--agro-accent-hover);
  color: #fff;
  text-decoration: none;
}

/* ── Similar offers carousel ────────────────────────────────── */
.agro-offer-detail__similar {
  margin-top: var(--agro-space-xl);
}

.agro-offer-detail__similar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--agro-space-md);
}

.agro-offer-detail__similar-title {
  margin: 0;
  font-family: var(--agro-font-heading);
  font-size: var(--agro-font-size-h2);
  font-weight: 700;
  color: var(--agro-text);
}

.agro-offer-detail__similar-nav {
  display: flex;
  gap: var(--agro-space-sm);
}

.agro-offer-detail__similar-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--agro-border);
  background: var(--agro-surface-card);
  color: var(--agro-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--agro-transition), background var(--agro-transition), color var(--agro-transition);
}

.agro-offer-detail__similar-arrow:hover {
  border-color: var(--agro-primary);
  background: var(--agro-primary-bg);
  color: var(--agro-primary-dark);
}

.agro-offer-detail__similar-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.agro-offer-detail__similar-track {
  display: flex;
  gap: var(--agro-space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-bottom: var(--agro-space-sm);
  scrollbar-width: none;
}

.agro-offer-detail__similar-track::-webkit-scrollbar {
  display: none;
}

.agro-offer-detail__similar-track > .offer-card {
  flex: 0 0 280px;
  max-width: 280px;
  scroll-snap-align: start;
  padding: 0;
}

/* ── Mobile bottom bar ──────────────────────────────────────── */
.agro-offer-detail__mobile-bar {
  display: none;
}

/* ── Lightbox modal ─────────────────────────────────────────── */
.agro-offer-detail__lightbox-modal .modal-dialog {
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: 100vh;
}

.agro-offer-detail__lightbox-sheet {
  background: rgba(0, 0, 0, 0.96);
  border: none;
  border-radius: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.agro-offer-detail__lightbox-close {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 5;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  transition: background var(--agro-transition);
  opacity: 1;
}

.agro-offer-detail__lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.agro-offer-detail__lightbox-body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: var(--agro-space-xl);
}

.agro-offer-detail__lightbox-img {
  max-width: 90%;
  max-height: 85vh;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.agro-offer-detail__lightbox-body .agro-offer-detail__nav {
  opacity: 1;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.agro-offer-detail__lightbox-body .agro-offer-detail__nav:hover {
  background: rgba(255, 255, 255, 0.3);
}

.agro-offer-detail__lightbox-body .agro-offer-detail__nav--prev { left: 16px; }
.agro-offer-detail__lightbox-body .agro-offer-detail__nav--next { right: 16px; }

.agro-offer-detail__lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--agro-font-size-sm);
  font-weight: 600;
}

/* ── Responsive: Tablet ─────────────────────────────────────── */
@media (max-width: 991px) {
  .agro-offer-detail__body {
    grid-template-columns: 1fr;
  }

  .agro-offer-detail__aside {
    position: relative;
    top: auto;
  }

  .agro-offer-detail__scroll-header {
    display: none !important;
  }

  .agro-offer-detail__mobile-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10020;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--agro-border);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  }

  .agro-offer-detail__mobile-bar-inner {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .agro-offer-detail__mobile-price {
    flex: 1;
    font-family: var(--agro-font-heading);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--agro-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .agro-offer-detail__mobile-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    padding: 10px 24px;
    border: none;
    border-radius: var(--agro-radius);
    background: var(--agro-accent);
    color: #fff;
    font-weight: 700;
    font-size: var(--agro-font-size);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(230, 126, 34, 0.3);
    transition: background var(--agro-transition);
  }

  .agro-offer-detail__mobile-cta:hover {
    background: var(--agro-accent-hover);
    color: #fff;
    text-decoration: none;
  }

  /* ── StickyBar (spec §3.2 mobile + §3.5 show-after-scroll) ── */
  .agro-offer-stickybar {
    transform: translateY(0);
    opacity: 1;
    transition: transform 220ms ease, opacity 220ms ease;
  }

  .agro-offer-stickybar[hidden] {
    display: none;
  }

  .agro-offer-stickybar--revealing {
    transform: translateY(100%);
    opacity: 0;
  }

  .agro-offer-stickybar__price-block {
    flex: 1;
    min-width: 0;
  }

  .agro-offer-stickybar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .agro-offer-stickybar__fav {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--agro-border);
    border-radius: 50%;
    background: #fff;
    color: var(--agro-text-muted);
    cursor: pointer;
    transition: color var(--agro-transition), border-color var(--agro-transition), background var(--agro-transition);
    padding: 0;
  }

  .agro-offer-stickybar__fav:hover {
    color: var(--agro-error, #d9534f);
    border-color: var(--agro-error, #d9534f);
  }

  .agro-offer-stickybar__fav--active {
    color: var(--agro-error, #d9534f);
    border-color: var(--agro-error, #d9534f);
    background: color-mix(in srgb, var(--agro-error, #d9534f) 10%, #fff);
  }

  .agro-offer-stickybar__phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--agro-primary);
    border-radius: var(--agro-radius);
    background: #fff;
    color: var(--agro-primary);
    font-weight: 600;
    font-size: var(--agro-font-size-sm);
    cursor: pointer;
    transition: background var(--agro-transition), color var(--agro-transition);
  }

  .agro-offer-stickybar__phone:hover {
    background: var(--agro-primary-soft);
  }

  .agro-offer-stickybar__phone--revealed {
    border-color: var(--agro-success, #2e7d32);
    color: var(--agro-success, #2e7d32);
    background: color-mix(in srgb, var(--agro-success, #2e7d32) 8%, #fff);
  }
}

/* ── StickyBar: phone label hidden na uzim ekranima ────────── */
@media (max-width: 480px) {
  .agro-offer-stickybar__phone-label {
    display: none;
  }

  .agro-offer-stickybar__phone {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }

  .agro-offer-stickybar__actions {
    gap: 6px;
  }

  .agro-offer-stickybar__cta {
    padding: 10px 16px !important;
  }
}

/* ── Responsive: Phone ──────────────────────────────────────── */
@media (max-width: 768px) {
  .agro-offer-detail__stage {
    aspect-ratio: 4 / 3;
    min-height: 220px;
  }

  .agro-offer-detail__nav {
    width: 40px;
    height: 40px;
    opacity: 1;
  }

  .agro-offer-detail__nav--prev { left: 6px; }
  .agro-offer-detail__nav--next { right: 6px; }

  .agro-offer-detail__title {
    font-size: var(--agro-font-size-h2);
  }

  .agro-offer-detail__tab-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .agro-offer-detail__tab-btn {
    white-space: nowrap;
    padding: 12px var(--agro-space-md);
    font-size: var(--agro-font-size-xs);
  }

  .agro-offer-detail__tab-panel {
    padding: var(--agro-space-md);
  }

  .agro-offer-detail__lightbox-body {
    padding: var(--agro-space-md);
  }

  .agro-offer-detail__lightbox-img {
    max-width: 100%;
    max-height: 80vh;
  }

  .agro-offer-detail__similar-track > .offer-card {
    flex: 0 0 240px;
    max-width: 240px;
  }
}

@media (max-width: 480px) {
  .agro-offer-detail__stage {
    aspect-ratio: 1 / 1;
    min-height: 200px;
    border-radius: 0;
  }

  /* FAZA 12.5 fix: nullify negative margin na 360px — bio je izvor horizontal overflow */
  .agro-offer-detail__gallery {
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .agro-offer-detail__thumb {
    width: 56px;
    height: 56px;
  }

  .agro-offer-detail__aside-card {
    padding: var(--agro-space-md);
  }

  .agro-offer-detail__crumb-current {
    max-width: 120px;
  }
}

@media (max-width: 360px) {
  .agro-offer-detail__title {
    font-size: 20px;
  }

  .agro-offer-detail__similar-track > .offer-card {
    flex: 0 0 200px;
    max-width: 200px;
  }
}

/* Touch device: always show nav arrows */
@media (hover: none) {
  .agro-offer-detail__nav {
    opacity: 0.85;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .agro-offer-detail__main-img,
  .agro-offer-detail__tab-panel,
  .agro-offer-detail__scroll-header,
  .agro-offer-detail__cta-primary {
    transition: none;
    animation: none;
  }

  @keyframes agro-skeleton-pulse {
    from, to { background-position: 0 0; }
  }
}

/* ── Dark mode ──────────────────────────────────────────────── */
.agro-night .agro-offer-detail__gallery {
  background: var(--agro-surface-card);
  border-color: var(--agro-border);
}

.agro-night .agro-offer-detail__stage {
  background:
    radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--agro-primary) 4%, transparent) 0%, transparent 55%),
    linear-gradient(165deg, var(--agro-surface-alt) 0%, var(--agro-surface-card) 100%);
}

.agro-night .agro-offer-detail__tabs {
  background: var(--agro-surface-card);
  border-color: var(--agro-border);
}

.agro-night .agro-offer-detail__tab-nav {
  background: var(--agro-surface);
}

.agro-night .agro-offer-detail__aside-card {
  background: var(--agro-surface-card);
  border-color: var(--agro-border);
}

.agro-night .agro-offer-detail__scroll-header {
  background: rgba(30, 30, 30, 0.96);
}

.agro-night .agro-offer-detail__mobile-bar {
  background: rgba(30, 30, 30, 0.96);
}

.agro-night .agro-offer-detail__nav {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}

.agro-night #agro-offer-desc.agro-offer-detail__desc--fade:not(.agro-offer-detail__desc--expanded)::after {
  background: linear-gradient(to bottom, transparent, var(--agro-surface-card));
}

/* Legacy klase za kompatibilnost */
.offer-detail__description {
  line-height: 1.65;
}

.offer-detail__thumb {
  cursor: pointer;
  transition: border-color var(--agro-transition);
}

.offer-detail__thumb:hover,
.offer-detail__thumb.active {
  border-color: var(--agro-accent);
}

.offer-dropzone {
  border: 2px dashed var(--agro-border);
  border-radius: var(--agro-radius);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  background: var(--agro-surface-alt);
  transition: border-color var(--agro-transition);
}

.offer-dropzone:hover,
.offer-dropzone--active {
  border-color: var(--agro-accent);
}

.offer-img-preview {
  position: relative;
  display: inline-block;
  margin: 4px;
}

.offer-img-preview img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--agro-radius-sm);
}

.offer-img-preview__remove {
  position: absolute;
  top: 0;
  right: 0;
}

/* J1 — Brzi kontakt sa prodavcem */
.agro-quick-contact {
  background: var(--agro-surface-card);
  border: var(--agro-border-width) solid var(--agro-border);
  border-radius: var(--agro-radius);
  padding: 16px;
  margin-top: 16px;
}

.agro-quick-contact__title {
  font-family: var(--agro-font-heading);
  font-size: var(--agro-font-size-base);
  color: var(--agro-text);
  margin: 0 0 12px;
}

.agro-quick-contact__buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agro-quick-contact__btn {
  background: var(--agro-primary-bg);
  color: var(--agro-primary);
  border: 1px solid var(--agro-primary-light);
  border-radius: var(--agro-radius);
  padding: 10px 14px;
  font-size: var(--agro-font-size-sm);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background-color var(--agro-transition), color var(--agro-transition);
  min-height: 44px;
}

.agro-quick-contact__btn:hover,
.agro-quick-contact__btn:focus {
  background: var(--agro-primary);
  color: #ffffff;
  outline: none;
}

.agro-quick-contact__btn--sent {
  background: var(--agro-success) !important;
  color: #ffffff !important;
  cursor: default;
  border-color: var(--agro-success) !important;
}

.agro-quick-contact__note {
  font-size: 12px;
  color: var(--agro-text-muted);
  margin: 10px 0 0;
}

/* J2 — Slicni oglasi */
.agro-similar-products {
  margin-top: 24px;
}

.agro-similar-products__title {
  font-family: var(--agro-font-heading);
  font-size: var(--agro-font-size-h3);
  color: var(--agro-text);
  margin: 0 0 12px;
}

.agro-similar-products__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 768px) {
  .agro-similar-products__grid { grid-template-columns: repeat(4, 1fr); }
}

.agro-similar-products__item {
  background: var(--agro-surface-card);
  border: var(--agro-border-width) solid var(--agro-border);
  border-radius: var(--agro-radius);
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow var(--agro-transition), transform var(--agro-transition);
}

@media (hover: hover) {
  .agro-similar-products__item:hover {
    box-shadow: var(--agro-shadow-md);
    transform: translateY(-2px);
  }
}

.agro-similar-products__img {
  width: 100%;
  height: 90px;
  object-fit: cover;
}

.agro-similar-products__info {
  padding: 8px 10px;
}

.agro-similar-products__name {
  display: block;
  font-size: 13px;
  color: var(--agro-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agro-similar-products__price {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--agro-accent);
  margin-top: 2px;
}

/* ==========================================================================
   14. Profili (gazdinstvo vs firma, cover, statistika, tabovi)
   ========================================================================== */

/* --- Cover fotografija profila --- */
.agro-profile-cover {
  position: relative;
  height: 280px;
  background-size: cover;
  background-position: center;
  border-radius: var(--agro-radius-lg) var(--agro-radius-lg) 0 0;
  overflow: hidden;
}
.agro-profile-cover--gazdinstvo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(46, 125, 50, 0.15);
  border-radius: inherit;
  pointer-events: none;
}
.agro-profile-cover--firma::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(93, 64, 55, 0.15);
  border-radius: inherit;
  pointer-events: none;
}
/* FAZA 12.4 — zadruga cover tint (ista zelena kao gazdinstvo,
   zajednički agro signal zemljoradničke zajednice). */
.agro-profile-cover--zadruga::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(46, 125, 50, 0.15);
  border-radius: inherit;
  pointer-events: none;
}

/* --- Avatar profila ---
   img.agro-profile-avatar (specifičnost 0,0,1,1) potreban je da pobedi pravilo
   `.user-avatar img` (linija 2920, 32px header avatar) koje deli istog roditelja
   .user-avatar i ima istu specifičnost. CSS source order rešava — agro pravilo
   dolazi kasnije u fajlu pa pobeđuje pri istoj specifičnosti. */
img.agro-profile-avatar {
  width: 120px;
  height: 120px;
  border: 4px solid var(--agro-surface-card);
  object-fit: cover;
  margin-top: -60px;
  position: relative;
  z-index: 2;
  display: block;
}

/* --- Override legacy WoWonder profile shell pozicioniranja ---
   stylesheet/style.css ima dva sukobljena seta `.pic-info-cont` pravila
   (linije 3056-3062 i 7446-7447). Drugi set pobeđuje source order-om i
   postavlja avatar van pozicije: parent .user-avatar = 140x140 sa margin:-65px,
   top:-15px, a img unutar njega dobija width:100% (= 140px) dok visinu uzima
   iz img.agro-profile-avatar (120px) → razvučen 140x120 i izgura van cover-a.

   Specifičnost ovog override-a: 0,0,4,1 — ista kao legacy, source order pobeđuje
   (custom/css/style.css se loaduje POSLE stylesheet/style.css u container.phtml). */
/* Flex layout — avatar levo, info (ime + dugmad) desno; vertikalno poravnati
   po dnu da bi ime/dugmad bili paralelni sa donjim delom avatara. Ovo zatvara
   prazan vertikalni prostor gde su nekada stajale stats (pre integracije u tabove).

   Specifičnost .agro-profile-shell .card.hovercard .pic-info-cont .user-avatar
   (0,0,4,1) potrebna je da pobedi legacy `.container .wo_user_profile .pic-info-cont
   .user-avatar` (0,0,4,0) koji forsira display:inline-block (descender gap +20px). */
.agro-profile-shell .pic-info-cont {
  position: static;
  width: auto;
  height: auto;
  bottom: auto;
  display: flex;
  align-items: flex-end;
  gap: 20px;
  text-align: left;
  padding: 0 24px 8px;
}
/* Razmak između info bloka (ime + dugmad) i tabs row-a — minimalan ali vidljiv.
   Legacy `.row` ima inline `margin: -33px 0 20px` za float tabs preko cover-a;
   u agro shell-u tabs su ispod imena pa override 0px (samo padding na info
   pravi razmak ~8px). */
.agro-profile-shell .row.user-bottom-nav-row,
.agro-profile-shell .card.hovercard + .row,
.agro-profile-shell .card.hovercard ~ .row {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}
.agro-profile-shell .card.hovercard .pic-info-cont .user-avatar {
  position: relative;
  width: 120px;
  height: 120px;
  bottom: auto;
  top: 0;
  margin: -60px 0 0 0;
  display: block;
  flex: 0 0 120px;
  z-index: 2;
  /* Ukloni unseen_story padding/background koji u nekim stanjima dodaje
     vizuelni belo-prsten oko avatara (gradient ::after). Avatar ostaje bez
     story-frame jer se story dostupnost vidi na drugim mestima. */
  padding: 0 !important;
  background: transparent !important;
  overflow: visible;
}
.agro-profile-shell .card.hovercard .pic-info-cont .user-avatar::after,
.agro-profile-shell .card.hovercard .pic-info-cont .user-avatar::before {
  display: none !important;
}
/* Sakri avatar editing UI (kameru/oko/crop ikone) sa profilne stranice.
   Avatar se menja iz Settings → Avatar i naslovna (per user preference). */
.agro-profile-shell .pic-info-cont .profile-avatar-changer,
.agro-profile-shell .pic-info-cont .wo_profile_pic_hover,
.agro-profile-shell .pic-info-cont .profile_avatar {
  display: none !important;
}

/* .info — flex row da Uredi/Aktivnosti dugmad budu inline pored imena,
   ne ispod njega. Wrap dozvoljen za dugačka imena ili više dugmadi. */
.agro-profile-shell .pic-info-cont .info {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
/* Reset legacy `.profile-container .card.hovercard .info .title` (linija 798
   stylesheet/style.css) koji postavlja: position:absolute, width:100%,
   text-shadow: 0 1px 3px #111, color:#fff, left:180px. To je iz WoWonder
   dizajna gde je ime bilo overlay na cover-u sa belim tekstom + dark shadow
   radi čitljivosti. U agro shell-u ime je u normalnom flow-u ispod cover-a
   sa agro-text bojom — legacy efekti moraju da budu poništeni. */
.agro-profile-shell .card.hovercard .pic-info-cont .info .agro-profile-name,
.agro-profile-shell .card.hovercard .pic-info-cont .info h1.title {
  position: relative;
  left: auto;
  top: auto;
  margin: 0;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  word-break: break-word;
  color: var(--agro-text);
  text-shadow: none;
  font-size: var(--agro-font-size-h2);
  font-family: var(--agro-font-heading);
  line-height: 1.3;
  vertical-align: baseline;
  z-index: auto;
}
/* Inner <a> link u h1 (template wrappuje ime u link ka timeline) takođe je
   color:#fff iz legacy CSS-a — override na agro-text. */
.agro-profile-shell .card.hovercard .pic-info-cont .info .agro-profile-name a,
.agro-profile-shell .card.hovercard .pic-info-cont .info h1.title a {
  color: var(--agro-text);
  text-shadow: none;
  text-decoration: none;
}
.agro-profile-shell .card.hovercard .pic-info-cont .info .agro-profile-name a:hover,
.agro-profile-shell .card.hovercard .pic-info-cont .info h1.title a:hover {
  color: var(--agro-primary);
  text-decoration: none;
}
/* options-buttons NE sme imati flex-grow:1 — to ga prebaci u novi red preko cele
   širine. Postaviti flex: 0 1 auto da deli horizontalni prostor sa imenom.
   Specifičnost 0,0,5,0 (sa .card.hovercard) potrebna da pobedi legacy
   `.container .wo_user_profile .card.hovercard .info .options-buttons` (linija 3079). */
.agro-profile-shell .card.hovercard .pic-info-cont .info .options-buttons,
.agro-profile-shell .pic-info-cont .info .options-buttons.agro-profile-identity__actions {
  flex: 0 1 auto;
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  width: auto;
  max-width: 100%;
  position: relative;
}
/* Sva dugmad u options-buttons treba da budu kompaktna i poravnana */
.agro-profile-shell .card.hovercard .pic-info-cont .info .options-buttons > * {
  margin: 0;
}
.agro-profile-shell .pic-info-cont .user-avatar img.agro-profile-avatar {
  width: 120px;
  height: 120px;
  margin-top: 0;
  border: 4px solid var(--agro-surface-card);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  object-fit: cover;
}

/* Mobile responsive overrides — manji avatar */
@media (max-width: 767px) {
  .agro-profile-shell .pic-info-cont {
    padding: 0 16px 12px;
  }
  .agro-profile-shell .pic-info-cont .user-avatar,
  .agro-profile-shell .pic-info-cont .user-avatar img.agro-profile-avatar {
    width: 80px;
    height: 80px;
  }
  .agro-profile-shell .pic-info-cont .user-avatar {
    margin-top: -40px;
  }
}
@media (max-width: 479px) {
  .agro-profile-shell .pic-info-cont .user-avatar,
  .agro-profile-shell .pic-info-cont .user-avatar img.agro-profile-avatar {
    width: 72px;
    height: 72px;
  }
  .agro-profile-shell .pic-info-cont .user-avatar {
    margin-top: -36px;
  }
  .agro-profile-shell .pic-info-cont .user-avatar img.agro-profile-avatar {
    border-width: 3px;
  }
}
.agro-profile-avatar--gazdinstvo {
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--agro-primary);
}
.agro-profile-avatar--firma {
  border-radius: var(--agro-radius);
  box-shadow: 0 0 0 3px var(--agro-brown);
}
/* FAZA 12.4 — zadruga avatar: rounded-square 8px (razlika od --gazdinstvo
   kruga — zadruga je pravno lice / kolektiv, ne individualac) + zelena ivica. */
.agro-profile-avatar--zadruga {
  border-radius: 8px;
  box-shadow: 0 0 0 3px var(--agro-primary);
}

/* --- Ime i tip profila --- */
.agro-profile-name {
  font-family: var(--agro-font-heading);
  font-size: var(--agro-font-size-h2);
  color: var(--agro-text);
  margin: 8px 0 4px;
  line-height: 1.3;
}
/* Inline @username u h1 — desno od imena i verified ikonice. */
.page_username--inline {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  font-family: var(--agro-font-body, inherit);
  font-size: var(--agro-font-size-sm);
  font-weight: 400;
  color: var(--agro-text-muted);
}
.agro-profile-type {
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text-muted);
  margin-top: 4px;
}

/* --- Statistike (prijatelji, objave, pregledi) --- */
.agro-profile-stats {
  display: flex;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--agro-border);
  border-bottom: 1px solid var(--agro-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.agro-profile-stats__item {
  text-align: center;
  flex-shrink: 0;
}
.agro-profile-stats__number {
  font-family: var(--agro-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--agro-primary);
  display: block;
  line-height: 1.2;
}
.agro-profile-stats__label {
  font-size: 12px;
  color: var(--agro-text-muted);
  display: block;
  margin-top: 2px;
}

/* --- Tabovi profila (Objave, O meni, Fotografije...) --- */
.agro-profile-tabs {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid var(--agro-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.agro-profile-tabs::-webkit-scrollbar {
  display: none;
}
.agro-profile-tabs > ul[role="tablist"] {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Inline statistike (Oglasi, Pratitelji, Umreženi) u tab nav-u, desno --- */
.agro-profile-tabs__stats {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
  padding: 0 8px;
  flex-shrink: 0;
}
.agro-profile-tabs__stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.agro-profile-tabs__stat-num {
  font-family: var(--agro-font-heading);
  font-size: var(--agro-font-size-md, 16px);
  font-weight: 700;
  color: var(--agro-primary);
  line-height: 1;
}
.agro-profile-tabs__stat-label {
  font-size: 12px;
  color: var(--agro-text-muted);
  letter-spacing: 0.2px;
}
.agro-profile-tabs__item {
  padding: 12px 20px;
  font-weight: 600;
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  text-decoration: none;
  white-space: nowrap;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  transition: color var(--agro-transition), border-color var(--agro-transition);
}
@media (hover: hover) {
  .agro-profile-tabs__item:hover {
    color: var(--agro-text);
    text-decoration: none;
  }
}
.agro-profile-tabs__item:focus-visible {
  outline: none;
  box-shadow: var(--agro-focus-ring);
}
.agro-profile-tabs__item--active {
  color: var(--agro-text);
  border-bottom-color: var(--agro-primary);
}

/* --- Count badge u tabovima ---
   Stats (Objave, Pratitelji, Prati) integrisani u tabove kao mali notification
   dot u gornjem-desnom uglu IKONE. Badge je u template-u stavljen UNUTAR
   .split-link (ikon wrapper), pa može da bude position:absolute relativno
   na njega — ne utiče na centriranje teksta ispod ikone.

   Idle: agro-primary-bg + agro-primary-dark; Aktivan/Hover: solid primary + beli. */
.agro-profile-tabs__item .split-link {
  position: relative;
  display: inline-block;
}
.agro-profile-tabs__count {
  position: absolute;
  top: -6px;
  right: -14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 6px;
  min-width: 20px;
  height: 18px;
  font-family: var(--agro-font-heading);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--agro-primary-dark);
  background: var(--agro-primary-bg);
  border: 1px solid var(--agro-surface-card, #fff);
  border-radius: 10px;
  letter-spacing: 0.2px;
  pointer-events: none;
  transition: background var(--agro-transition), color var(--agro-transition);
}
.agro-profile-tabs__item--active .agro-profile-tabs__count {
  background: var(--agro-primary);
  color: #fff;
}
@media (hover: hover) {
  .agro-profile-tabs__item:hover .agro-profile-tabs__count {
    background: var(--agro-primary);
    color: #fff;
  }
}

/* --- problackback (legacy WoWonder dark gradient overlay) ---
   Nije potreban u agro shell-u jer su avatar/ime u normal flow ispod cover-a,
   a ne preko cover-a sa belim tekstom. Stvara prazan tamni sloj 100-200px
   ispod cover-a. */
.agro-profile-shell .problackback {
  display: none;
}

/* --- Traka popunjenosti profila --- */
.agro-profile-completion {
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  padding: 16px;
  margin-bottom: 16px;
}
.agro-profile-completion__bar {
  height: 8px;
  background: var(--agro-border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.agro-profile-completion__fill {
  height: 100%;
  background: var(--agro-primary);
  border-radius: 4px;
  transition: width var(--agro-transition-slow);
}
.agro-profile-completion__text {
  font-size: var(--agro-font-size-xs);
  color: var(--agro-text-muted);
}
.agro-profile-completion__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.agro-profile-completion__step {
  font-size: var(--agro-font-size-xs);
  padding: 4px 12px;
  border-radius: 12px;
  background: var(--agro-surface-alt);
  color: var(--agro-text-secondary);
}
.agro-profile-completion__step--done {
  background: var(--agro-primary-bg);
  color: var(--agro-primary-dark);
  text-decoration: line-through;
}

/* --- Sekcije na tabu "O meni" + Create page form --- */
.agro-profile-section {
  margin-bottom: 24px;
}
.agro-profile-section__divider {
  border-top: var(--agro-border-width) solid var(--agro-border);
  margin: 20px 0 16px;
}
.agro-profile-section__heading {
  font-family: var(--agro-font-heading);
  font-size: var(--agro-font-size-h3);
  font-weight: 600;
  color: var(--agro-primary-dark);
  margin-bottom: 16px;
}
/* Checkbox grupe u formama */
.agro-checkbox-col {
  margin-bottom: 6px;
}
.agro-checkbox-label {
  font-weight: normal !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.agro-input--full {
  width: 100% !important;
}
.agro-profile-section__title {
  font-family: var(--agro-font-heading);
  font-size: var(--agro-font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--agro-text-muted);
  margin-bottom: 12px;
}
.agro-profile-section__content {
  color: var(--agro-text);
  font-size: var(--agro-font-size);
  line-height: var(--agro-line-height);
}

/* --- Tagovi kultura/kategorija --- */
.agro-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: var(--agro-font-size-xs);
  background: var(--agro-primary-bg);
  color: var(--agro-primary-dark);
  margin: 2px 4px 2px 0;
  text-decoration: none;
}
@media (hover: hover) {
  .agro-tag:hover {
    background: var(--agro-primary);
    color: #fff;
    text-decoration: none;
  }
}

/* --- Profile shell — FAZA 12.2 Korak 2 ---
   Root wrapper + identity row + entity badge + owner controls.
   Spec: docs/design-specs/profile-shell.md DEO D.3.
   Cover/avatar modifier klase (--gazdinstvo / --firma) postoje iznad
   i primenjuju se direktno na elemente; shell drži data-profile-type
   za buduce JS ciljanje i aria konteksts. */
.agro-profile-shell {
  position: relative;
  background: var(--agro-surface-card);
  border-radius: var(--agro-radius-lg);
  overflow: hidden;
  margin-bottom: var(--agro-space-md);
}
.agro-profile-shell[data-profile-type="user"] {
  /* Nema overlay — cover se pojavljuje netnut. */
}
.agro-profile-shell[data-profile-type="gazdinstvo"] {
  /* Modifier klase se primenjuju direktno na cover/avatar; shell
     samo nosi data-atribut radi semantike. */
}
.agro-profile-shell[data-profile-type="firma"] {
}

/* Identity row: avatar + textblock + owner/visitor CTA */
.agro-profile-identity {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  padding: 0 24px 16px;
  flex-wrap: wrap;
}
.agro-profile-identity__text {
  flex: 1 1 auto;
  min-width: 0;
}
.agro-profile-identity__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Entity badge u cover-u — gornji desni ugao. Pokazuje
   "Gazdinstvo" ili "Firma" na entity profilu. */
.agro-profile-cover__entity-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
}

/* Vlasnicko dugme "Promenite naslovnu fotografiju" — stoji
   u donjem-desnom uglu cover-a. Legacy `.profile-cover-changer`
   se zadrzava na istom elementu radi Wo_UpdateProfileCover() JS. */
.agro-profile-cover__change-btn {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  min-height: 40px;
  border-radius: var(--agro-radius);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: var(--agro-font-size-sm);
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--agro-transition);
}
@media (hover: hover) {
  .agro-profile-cover__change-btn:hover {
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    text-decoration: none;
  }
}
.agro-profile-cover__change-btn:focus-visible {
  outline: none;
  box-shadow: var(--agro-focus-ring);
}

/* Badges container u identity__text (Gazdinstvo/Firma + Premium + verified) */
.agro-profile-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* Inline edit dugme uz badges (vlasnik zadruge/entiteta) */
.agro-profile-badges__edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--agro-primary-bg);
  color: var(--agro-primary-dark);
  border: var(--agro-border-width) solid var(--agro-primary);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.agro-profile-badges__edit:hover,
.agro-profile-badges__edit:focus {
  background: var(--agro-primary);
  color: #ffffff;
  text-decoration: none;
}
.agro-profile-badges__edit svg {
  flex-shrink: 0;
}

/* Tab counter — mali broj uz tab labelu (npr. "Oglasi 3").
   Koristi se kada je tab vidljiv i ima neprazan count. */
.agro-profile-tabs__counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 6px;
  background: var(--agro-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  border-radius: 10px;
  vertical-align: middle;
}

/* Deprecation alias — `.agro-entity-tabs` iz FAZE 11.2 ostaje u
   upotrebi do Koraka 4 (page/content.phtml konsolidacija); nakon
   migracije markupa sve mesta koriste `.agro-profile-tabs`. Stil
   ostaje netnut — ovo je samo napomena za Korak 4. */

/* --- Responsive profil --- */

/* Tablet 768-991: identity se suzava ali ostaje row */
@media (min-width: 768px) and (max-width: 991px) {
  .agro-profile-identity {
    padding: 0 16px 16px;
    gap: 16px;
  }
  .agro-profile-identity__actions {
    flex-basis: 100%;
    justify-content: flex-start;
  }
  .agro-profile-stats {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .agro-profile-cover {
    height: 160px;
  }
  img.agro-profile-avatar {
    width: 80px;
    height: 80px;
    margin-top: -40px;
  }
  .agro-profile-name {
    font-size: var(--agro-font-size-h3);
  }
  .agro-profile-stats {
    gap: 16px;
    scroll-snap-type: x mandatory;
  }
  .agro-profile-stats__item {
    scroll-snap-align: start;
    min-width: 80px;
  }
  .agro-profile-tabs__item {
    padding: 10px 14px;
  }
  .agro-profile-identity {
    padding: 0 12px 12px;
    gap: 12px;
  }
  .agro-profile-identity__actions {
    flex-basis: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .agro-profile-identity__actions > * {
    width: 100%;
  }
  /* Entity badge prelazi u identity blok na mobile — izvuci iz cover-a */
  .agro-profile-cover__entity-badge {
    top: 12px;
    right: 12px;
  }
  .agro-profile-cover__change-btn {
    bottom: 12px;
    right: 12px;
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* Ultra-small 360-479: avatar 72, name h3, badge prelazi u identity */
@media (max-width: 479px) {
  .agro-profile-cover {
    height: 140px;
  }
  img.agro-profile-avatar {
    width: 72px;
    height: 72px;
    margin-top: -36px;
    border-width: 3px;
  }
  .agro-profile-name {
    font-size: var(--agro-font-size-h3);
    word-wrap: break-word;
  }
  /* Entity badge prelazi iz cover-a u identity blok radi citljivosti */
  .agro-profile-cover__entity-badge {
    display: none;
  }
  .agro-profile-badges--with-entity-fallback {
    /* Markup u Koraku 4 dodaje duplikat badge ovde (samo display:flex na <480) */
  }
  .agro-profile-identity {
    padding: 0 10px 10px;
    gap: 10px;
  }
}

/* FAZA 12.4 — Pending zahtevi lista (admin tab "Zahtevi" na zadruga profilu).
   Red po red: avatar + ime/meta + akcije desno. Koristi Profile sekcijine
   tokene (surface-card, border, text-muted) radi konzistentnosti. */
.agro-pending-request {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--agro-border);
  background: var(--agro-surface-card);
}
.agro-pending-request:last-child {
  border-bottom: none;
}
.agro-pending-request__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.agro-pending-request__info {
  flex: 1 1 auto;
  min-width: 0;
}
.agro-pending-request__name {
  font-weight: 600;
  color: var(--agro-text);
  font-size: var(--agro-font-size-base);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agro-pending-request__meta {
  color: var(--agro-text-muted);
  font-size: var(--agro-font-size-sm);
  margin-top: 2px;
}
.agro-pending-request__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.agro-pending-request__actions .btn {
  min-height: 40px;
}
.agro-pending-request__empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--agro-text-muted);
}
.agro-pending-request--removed {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}
@media (max-width: 479px) {
  .agro-pending-request {
    flex-wrap: wrap;
  }
  .agro-pending-request__actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* FAZA 12.4 Korak 6 — Gate-locked dugme (free korisnik vidi Premium-only
   join CTA). Vizuelni signal: lock ikona pre teksta + suptilna transparencija.
   Klik redirekt na /upgrade (handler u content.phtml inline JS). */
.agro-gate-locked {
  position: relative;
  opacity: 0.88;
  padding-left: 2.4em;
}
.agro-gate-locked::before {
  content: '';
  position: absolute;
  left: 0.9em;
  top: 50%;
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z'/></svg>") no-repeat center / contain;
  pointer-events: none;
}
.agro-gate-locked:hover,
.agro-gate-locked:focus {
  opacity: 1;
}

/* ==========================================================================
   15. Landing / Welcome Hero + Register/Login + Auth flows
   ========================================================================== */

/* --- Hero sekcija (dobrodošlica za neregistrovane) --- */
.agro-hero {
  background: var(--agro-primary-dark);
  color: #fff;
  padding: 80px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.agro-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  filter: saturate(0.7);
  pointer-events: none;
}
.agro-hero__content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}
.agro-hero__title {
  font-family: var(--agro-font-heading);
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #fff;
  line-height: 1.25;
}
.agro-hero__subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 32px;
  line-height: 1.5;
}
.agro-hero__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Primarna CTA (akcent narandzasta — kontrast 4.56:1 na tamnozelenoj) */
.agro-hero__btn-primary {
  background: var(--agro-accent);
  color: #fff;
  border: none;
  border-radius: var(--agro-radius);
  padding: 0 32px;
  min-height: 52px;
  font-family: var(--agro-font-body);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--agro-transition);
}
@media (hover: hover) {
  .agro-hero__btn-primary:hover {
    background: var(--agro-accent-hover);
    color: #fff;
    text-decoration: none;
  }
}
.agro-hero__btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

/* Sekundarna CTA (bela bordura na tamnozelenoj) */
.agro-hero__btn-secondary {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  border-radius: var(--agro-radius);
  padding: 0 32px;
  min-height: 52px;
  font-family: var(--agro-font-body);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--agro-transition);
}
@media (hover: hover) {
  .agro-hero__btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
  }
}
.agro-hero__btn-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

/* --- Socijalni dokaz (brojevi korisnika, gazdinstava...) --- */
.agro-social-proof {
  display: flex;
  justify-content: center;
  gap: 48px;
  padding: 40px 24px;
  background: var(--agro-surface);
  flex-wrap: wrap;
}
.agro-social-proof__item {
  text-align: center;
}
.agro-social-proof__number {
  font-family: var(--agro-font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--agro-primary-dark);
  display: block;
  line-height: 1.2;
}
.agro-social-proof__label {
  font-size: 14px;
  color: var(--agro-text-muted);
  display: block;
  margin-top: 4px;
}

/* --- Sekcija sa prednostima (3 kolone) --- */
.agro-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 60px 24px;
  max-width: 960px;
  margin: 0 auto;
}
.agro-features__item {
  text-align: center;
}
.agro-features__icon {
  width: 48px;
  height: 48px;
  color: var(--agro-primary);
  margin: 0 auto 16px;
  display: block;
}
.agro-features__title {
  font-family: var(--agro-font-heading);
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--agro-text);
}
.agro-features__text {
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text-secondary);
  line-height: var(--agro-line-height);
}

/* --- Kako funkcioniše (3 koraka) --- */
.agro-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 60px 24px;
  background: var(--agro-surface-alt);
  max-width: 960px;
  margin: 0 auto;
}
.agro-steps__item {
  text-align: center;
}
.agro-steps__number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--agro-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--agro-font-heading);
  margin-bottom: 12px;
}
.agro-steps__title {
  font-family: var(--agro-font-heading);
  font-size: var(--agro-font-size-h3);
  color: var(--agro-text);
  margin-bottom: 8px;
}
.agro-steps__text {
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text-secondary);
  line-height: var(--agro-line-height);
}

/* --- Cenovnik (Besplatno vs. Premium) --- */
.agro-pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 60px 24px;
  max-width: 800px;
  margin: 0 auto;
}
.agro-pricing__card {
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-lg);
  padding: 32px 24px;
}
.agro-pricing__card--premium {
  border-color: var(--agro-tier-premium);
  box-shadow: var(--agro-shadow-md);
  position: relative;
}
.agro-pricing__title {
  font-family: var(--agro-font-heading);
  font-size: var(--agro-font-size-h3);
  margin-bottom: 16px;
  color: var(--agro-text);
}
.agro-pricing__price {
  font-family: var(--agro-font-heading);
  font-size: var(--agro-font-size-h1);
  color: var(--agro-accent);
  margin-bottom: 24px;
  line-height: 1;
}
.agro-pricing__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.agro-pricing__list li {
  padding: 6px 0;
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text-secondary);
  line-height: 1.5;
}
.agro-pricing__list li::before {
  content: '\2713\00a0';
  color: var(--agro-primary);
  font-weight: 700;
}
.agro-pricing__list li.agro-pricing__disabled::before {
  content: '\2717\00a0';
  color: var(--agro-text-muted);
}
.agro-pricing__list li.agro-pricing__disabled {
  color: var(--agro-text-muted);
  text-decoration: line-through;
}

/* --- Auth kartice (registracija / prijava) --- */
.agro-auth-card {
  background: var(--agro-surface-card);
  border-radius: var(--agro-radius-lg);
  box-shadow: var(--agro-shadow-md);
  padding: 32px 24px;
  max-width: 400px;
  margin: 0 auto;
}
.agro-auth-card__title {
  font-family: var(--agro-font-heading);
  font-size: var(--agro-font-size-h2);
  color: var(--agro-text);
  margin-bottom: 24px;
  text-align: center;
}
.agro-auth-card__field {
  margin-bottom: 16px;
}
.agro-auth-card__label {
  display: block;
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text);
  margin-bottom: 6px;
  font-weight: 600;
}

/* --- Landing footer (sirok, tamnozelen) --- */
.agro-landing-footer {
  background: var(--agro-primary-dark);
  color: rgba(255, 255, 255, 0.8);
  padding: 48px 24px 24px;
}
.agro-landing-footer a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color var(--agro-transition);
}
@media (hover: hover) {
  .agro-landing-footer a:hover {
    color: #fff;
  }
}
.agro-landing-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 960px;
  margin: 0 auto 32px;
}
.agro-landing-footer__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 12px;
}
.agro-landing-footer__copyright {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  max-width: 960px;
  margin: 0 auto;
}

/* --- Responsive landing --- */
@media (max-width: 767px) {
  .agro-hero {
    padding: 48px 16px;
  }
  .agro-hero__title {
    font-size: 24px;
  }
  .agro-hero__subtitle {
    font-size: 16px;
  }
  .agro-features,
  .agro-steps {
    grid-template-columns: 1fr;
    padding: 40px 16px;
  }
  .agro-pricing {
    grid-template-columns: 1fr;
    padding: 40px 16px;
  }
  .agro-social-proof {
    flex-direction: column;
    gap: 16px;
    padding: 32px 16px;
  }
  .agro-landing-footer__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 479px) {
  .agro-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .agro-hero__btn-primary,
  .agro-hero__btn-secondary {
    width: 100%;
    justify-content: center;
  }
}


/* ==========================================================================
   16. Modali + Lightbox
   ========================================================================== */

/* Modal overlay */
.modal-backdrop,
.modal-backdrop.in {
  background: rgba(26, 46, 26, 0.6) !important;
  backdrop-filter: blur(4px);
}

/* Modal dialog */
.modal .modal-content {
  background: var(--agro-surface-card) !important;
  border-radius: var(--agro-radius-lg) !important;
  box-shadow: var(--agro-shadow-lg) !important;
  border: none !important;
}

.modal .modal-header {
  font-family: var(--agro-font-heading);
  border-bottom: 1px solid var(--agro-border);
  padding: 20px 24px 16px;
}

.modal .modal-header .modal-title,
.modal .modal-header h4,
.modal .wow_pops_head h4 {
  font-family: var(--agro-font-heading);
  font-size: var(--agro-font-size-h3);
  color: var(--agro-text);
}

.modal .modal-body {
  padding: 16px 24px;
  color: var(--agro-text);
}

.modal .modal-footer {
  border-top: 1px solid var(--agro-border);
  padding: 16px 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Modal close dugme */
.modal .close,
.modal .modal-header .close {
  color: var(--agro-text-muted);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

@media (hover: hover) {
  .modal .close:hover,
  .modal .modal-header .close:hover {
    color: var(--agro-text);
    opacity: 1;
  }
}

.modal .close:focus,
.modal .modal-header .close:focus {
  color: var(--agro-text);
  opacity: 1;
  box-shadow: var(--agro-focus-ring);
  outline: none;
}

/* Modal dugmad — BEM varijante */
.agro-modal__btn-primary {
  background: var(--agro-primary);
  color: #ffffff;
  border: none;
  border-radius: var(--agro-radius);
  min-height: 44px;
  padding: 0 24px;
  font-weight: 600;
  font-family: var(--agro-font-body);
  cursor: pointer;
  transition: background-color var(--agro-transition), box-shadow var(--agro-transition);
}

@media (hover: hover) {
  .agro-modal__btn-primary:hover {
    background: var(--agro-primary-dark);
  }
}

.agro-modal__btn-primary:focus {
  background: var(--agro-primary-dark);
  box-shadow: var(--agro-focus-ring);
  outline: none;
}

.agro-modal__btn-danger {
  background: var(--agro-danger);
  color: #ffffff;
  border: none;
  border-radius: var(--agro-radius);
  min-height: 44px;
  padding: 0 24px;
  font-weight: 600;
  font-family: var(--agro-font-body);
  cursor: pointer;
  transition: background-color var(--agro-transition), box-shadow var(--agro-transition);
}

@media (hover: hover) {
  .agro-modal__btn-danger:hover {
    background: #b71c1c;
  }
}

.agro-modal__btn-danger:focus {
  background: #b71c1c;
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.3);
  outline: none;
}

.agro-modal__btn-secondary {
  background: transparent;
  border: 1px solid var(--agro-border);
  color: var(--agro-text);
  border-radius: var(--agro-radius);
  min-height: 44px;
  padding: 0 24px;
  font-weight: 600;
  font-family: var(--agro-font-body);
  cursor: pointer;
  transition: background-color var(--agro-transition), border-color var(--agro-transition), box-shadow var(--agro-transition);
}

@media (hover: hover) {
  .agro-modal__btn-secondary:hover {
    background: var(--agro-surface-alt);
    border-color: var(--agro-text-muted);
  }
}

.agro-modal__btn-secondary:focus {
  background: var(--agro-surface-alt);
  box-shadow: var(--agro-focus-ring);
  outline: none;
}

/* Responsive modal — 360px+ */
@media (max-width: 767px) {
  .modal .modal-dialog {
    width: 90vw !important;
    margin: 10vh auto !important;
    max-height: 80vh;
  }

  .modal .modal-body {
    max-height: 60vh;
    overflow-y: auto;
  }
}

/* WoWonder specific modal overrides */
.wow_mat_pops .modal-content,
.wow_mat_pops .modal-dialog {
  border-radius: var(--agro-radius-lg) !important;
}

.wow_pops_head {
  background: var(--agro-primary) !important;
  border-radius: var(--agro-radius-lg) var(--agro-radius-lg) 0 0 !important;
}

.wow_pops_head h4 {
  color: #ffffff !important;
}

/* Premium modal ("Aktivirajte Premium") */
#pay-go-pro .wow_pops_head {
  background: linear-gradient(135deg, var(--agro-primary-dark), var(--agro-primary)) !important;
}

/* Lightbox overlay */
.wo_lightbox_overlay,
.fancybox-overlay {
  background: rgba(26, 46, 26, 0.85) !important;
}

.wo_lightbox_close,
.fancybox-close {
  min-width: 44px;
  min-height: 44px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ==========================================================================
   17. Search rezultati
   ========================================================================== */

/* Search input (zaglavlje) */
.agro-search {
  position: relative;
}

.agro-search__input {
  background: var(--agro-surface);
  border: 1px solid var(--agro-border);
  border-radius: 20px;
  padding: 8px 16px 8px 40px;
  font-size: var(--agro-font-size-sm);
  color: var(--agro-text);
  width: 100%;
  transition: border-color var(--agro-transition), box-shadow var(--agro-transition);
}

.agro-search__input:focus {
  border-color: var(--agro-primary);
  box-shadow: var(--agro-shadow-sm);
  outline: none;
}

.agro-search__input::placeholder {
  color: var(--agro-text-muted);
}

.agro-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--agro-text-muted);
  width: 18px;
  height: 18px;
  pointer-events: none;
}

/* Tabovi search rezultata */
.agro-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--agro-border);
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.agro-tabs::-webkit-scrollbar {
  display: none;
}

.agro-tabs__item {
  padding: 12px 20px;
  font-size: var(--agro-font-size-sm);
  font-weight: 600;
  color: var(--agro-text-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color var(--agro-transition), border-color var(--agro-transition);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.agro-tabs__item--active {
  color: var(--agro-text);
  border-bottom-color: var(--agro-primary);
}

@media (hover: hover) {
  .agro-tabs__item:hover {
    color: var(--agro-text);
    border-bottom-color: var(--agro-primary);
  }
}

.agro-tabs__item:focus {
  color: var(--agro-text);
  border-bottom-color: var(--agro-primary);
  outline: none;
  box-shadow: inset var(--agro-focus-ring);
}

/* Kartice search rezultata */
.agro-search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--agro-border);
  transition: background var(--agro-transition);
}

@media (hover: hover) {
  .agro-search-result:hover {
    background: var(--agro-surface-alt);
  }
}

.agro-search-result:focus-within {
  background: var(--agro-surface-alt);
}

.agro-search-result__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.agro-search-result__info {
  flex: 1;
  min-width: 0;
}

.agro-search-result__name {
  font-weight: 600;
  color: var(--agro-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agro-search-result__meta {
  font-size: var(--agro-font-size-xs);
  color: var(--agro-text-muted);
}

.agro-search-result__action {
  flex-shrink: 0;
}

/* WoWonder search bar override — compact, centriran */
.navbar-default .container .navbar-header .Wo_SearchForm input,
.search_input_form input {
  background: var(--agro-surface) !important;
  border: 1px solid var(--agro-border) !important;
  border-radius: 20px !important;
  color: var(--agro-text) !important;
  font-size: 13px !important;
  height: 34px !important;
  padding: 0 16px 0 36px !important;
  text-align: center;
}

.navbar-default .container .navbar-header .Wo_SearchForm input::placeholder {
  color: var(--agro-text-muted) !important;
  font-size: 13px !important;
  text-align: center;
}

.navbar-default .container .navbar-header .Wo_SearchForm input:focus,
.search_input_form input:focus {
  background: #ffffff !important;
  border-color: var(--agro-primary) !important;
  box-shadow: var(--agro-focus-ring) !important;
  text-align: left;
}

/* Paginacija */
.agro-pagination {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin: 24px 0;
  flex-wrap: wrap;
}

.agro-pagination__item {
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--agro-radius-sm);
  border: 1px solid var(--agro-border);
  color: var(--agro-text);
  font-size: var(--agro-font-size-sm);
  text-decoration: none;
  transition: background-color var(--agro-transition), border-color var(--agro-transition), color var(--agro-transition);
}

.agro-pagination__item--active {
  background: var(--agro-primary);
  color: #ffffff;
  border-color: var(--agro-primary);
}

@media (hover: hover) {
  .agro-pagination__item:not(.agro-pagination__item--active):hover {
    background: var(--agro-primary-bg);
    border-color: var(--agro-primary);
    color: var(--agro-primary);
  }
}

.agro-pagination__item:focus {
  box-shadow: var(--agro-focus-ring);
  outline: none;
}


/* ==========================================================================
   18. Sidebar footer — kompaktna micro-bar (malo mesta u koloni)
   ========================================================================== */

.rightcol .agro-sidebar-footer-outer.page-margin {
  margin: 0 !important;
  padding: 0 !important;
}

.rightcol .footer-wrapper-sidebar.agro-sidebar-footer--compact {
  background: linear-gradient(180deg, var(--agro-surface-alt) 0%, var(--agro-surface-card) 100%) !important;
  border: var(--agro-border-width) solid var(--agro-border) !important;
  border-radius: var(--agro-radius-sm);
  box-shadow: none;
  padding: 8px 10px;
  margin-top: 8px;
  margin-bottom: 4px;
}

.agro-sidebar-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px 8px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: var(--agro-border-width) solid var(--agro-border);
}

.agro-sidebar-footer__copy {
  flex: 1 1 120px;
  min-width: 0;
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--agro-text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.agro-sidebar-footer__lang {
  flex: 0 0 auto;
}

.agro-sidebar-footer__lang-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 600;
  line-height: 1.2;
  color: var(--agro-text-secondary) !important;
  text-decoration: none !important;
  background: var(--agro-surface-card);
  border: var(--agro-border-width) solid var(--agro-border) !important;
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  transition: background-color var(--agro-transition), border-color var(--agro-transition), color var(--agro-transition);
}

.agro-sidebar-footer__lang-btn:hover,
.agro-sidebar-footer__lang-btn:focus {
  color: var(--agro-primary) !important;
  background: var(--agro-primary-bg);
  border-color: var(--agro-primary-light) !important;
}

.agro-sidebar-footer__lang-btn:focus-visible {
  box-shadow: var(--agro-focus-ring);
  outline: none;
}

.agro-sidebar-footer__lang-icon {
  flex-shrink: 0;
  opacity: 0.88;
}

.agro-sidebar-footer__lang-text {
  white-space: nowrap;
}

.agro-sidebar-footer__nav {
  margin: 0;
}

.agro-sidebar-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0;
  row-gap: 2px;
}

.agro-sidebar-footer__links > li {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.agro-sidebar-footer__links > li:not(:last-child)::after {
  content: '\00b7';
  margin: 0 5px;
  color: var(--agro-border);
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
  opacity: 0.85;
}

.agro-sidebar-footer__links > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 1px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--agro-text-muted) !important;
  text-decoration: none !important;
  transition: color var(--agro-transition);
}

@media (hover: hover) {
  .agro-sidebar-footer__links > li > a:hover {
    color: var(--agro-primary) !important;
  }
}

.agro-sidebar-footer__links > li > a:focus {
  color: var(--agro-primary) !important;
}

.agro-sidebar-footer__links > li > a:focus-visible {
  border-radius: var(--agro-radius-sm);
  box-shadow: var(--agro-focus-ring);
  outline: none;
}

.agro-sidebar-footer__more .agro-sidebar-footer__more-toggle {
  display: inline-flex !important;
  align-items: center;
  min-height: 26px;
  padding: 1px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--agro-text-secondary) !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.agro-sidebar-footer__more-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  vertical-align: middle;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 3px solid currentColor;
  opacity: 0.65;
}

.dropup .agro-sidebar-footer__more-caret {
  border-top: 0;
  border-bottom: 3px solid currentColor;
}

@media (hover: hover) {
  .agro-sidebar-footer__more .agro-sidebar-footer__more-toggle:hover {
    color: var(--agro-primary) !important;
  }
}

.agro-sidebar-footer__more .agro-sidebar-footer__more-toggle:focus-visible {
  border-radius: var(--agro-radius-sm);
  box-shadow: var(--agro-focus-ring);
  outline: none;
}

.agro-sidebar-footer .sun_foot_drop_menu {
  position: relative;
  z-index: 2;
}

.agro-sidebar-footer .sun_foot_drop_menu.open {
  z-index: 1050;
}

.agro-sidebar-footer .sun_foot_drop_menu .dropdown-menu {
  min-width: 188px;
  margin-bottom: 4px;
  padding: 4px 0;
  font-size: 12px;
  border: var(--agro-border-width) solid var(--agro-border);
  border-radius: var(--agro-radius-sm);
  box-shadow: var(--agro-shadow-md);
  z-index: 1050 !important;
}

.agro-sidebar-footer .sun_foot_drop_menu .dropdown-menu > li > a {
  padding: 6px 12px;
  color: var(--agro-text) !important;
  font-weight: 500;
  transition: background-color var(--agro-transition), color var(--agro-transition);
}

@media (hover: hover) {
  .agro-sidebar-footer .sun_foot_drop_menu .dropdown-menu > li > a:hover {
    background: var(--agro-primary-bg);
    color: var(--agro-primary-dark) !important;
  }
}

.agro-sidebar-footer .sun_foot_drop_menu .dropdown-menu > li > a:focus {
  background: var(--agro-primary-bg);
  color: var(--agro-primary-dark) !important;
}

/* Kompatibilnost: stari list-inline / footer-powered */
.footer-wrapper-sidebar .list-inline li a,
.footer-powered a {
  color: var(--agro-text-muted);
  font-size: 11px;
  text-decoration: none;
  transition: color var(--agro-transition);
}

.footer-wrapper-sidebar .list-inline li a:hover,
.footer-powered a:hover,
.footer-wrapper-sidebar .list-inline li a:focus,
.footer-powered a:focus {
  color: var(--agro-primary);
  text-decoration: none;
}

.footer-powered p {
  font-size: 11px;
  color: var(--agro-text-muted);
  margin-bottom: 0;
  line-height: 1.35;
}


/* ==========================================================================
   19. Feedback (toast, alert, empty state, skeleton loader, error pages)
   ========================================================================== */

/* Empty states */
.agro-empty-state { text-align: center; padding: 48px 24px; }
.agro-empty-state__icon { width: 64px; height: 64px; color: var(--agro-text-muted); opacity: 0.5; margin: 0 auto 16px; }
.agro-empty-state__icon svg { width: 100%; height: 100%; }
.agro-empty-state__title { font-family: var(--agro-font-heading); font-size: var(--agro-font-size-h3); color: var(--agro-text); margin-bottom: 8px; }
.agro-empty-state__text { font-size: var(--agro-font-size-sm); color: var(--agro-text-muted); margin-bottom: 24px; max-width: 360px; margin-left: auto; margin-right: auto; }

/* Skeleton loaderi */
.agro-skeleton {
  background: linear-gradient(90deg, var(--agro-surface-alt) 25%, var(--agro-surface) 50%, var(--agro-surface-alt) 75%);
  background-size: 200% 100%;
  animation: agro-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--agro-radius-sm);
}
@keyframes agro-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.agro-skeleton--circle  { border-radius: 50%; }
.agro-skeleton--text    { height: 14px; margin-bottom: 8px; }
.agro-skeleton--title   { height: 18px; width: 60%; margin-bottom: 12px; }
.agro-skeleton--image   { height: 200px; }
.agro-skeleton--avatar  { width: 40px; height: 40px; }
.agro-skeleton--button  { height: 36px; width: 80px; }

/* Toast notifikacije */
/* Container — block bez transform/filter/perspective tako da position:fixed
   toast-ovi se pozicioniraju relativno viewport-u (a ne containeru). Ako su
   ovi propery-i set, browser uspostavlja novi containing block i fixed dete
   se gleda relativno container-u koji ima width 0 → pozicija out-of-place. */
.agro-toast-container {
  position: static;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
  will-change: auto !important;
}
.agro-toast {
  position: fixed; top: 20px; right: 20px;
  z-index: var(--agro-z-toast);
  min-width: 300px; max-width: 400px;
  padding: 16px 20px;
  border-radius: var(--agro-radius);
  box-shadow: var(--agro-shadow-lg);
  font-family: var(--agro-font-body);
  font-size: var(--agro-font-size-sm);
  animation: agro-toast-in 300ms ease forwards;
  display: flex; align-items: center; gap: 12px;
}
@keyframes agro-toast-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.agro-toast--success { background: var(--agro-success); color: #fff; }
.agro-toast--warning { background: var(--agro-warning); color: #fff; }
.agro-toast--error   { background: var(--agro-danger);  color: #fff; }
.agro-toast--info    { background: var(--agro-info);    color: #fff; }

/* Keyframes za bottom slide-up animation (mobile + tablet toast). Mora van media
   query da bi animation reference radio pouzdano kroz sve renderere. */
@keyframes agro-toast-in-bottom {
  from { transform: translateY(120%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Mobile + tablet (≤991px) — toast u dnu iznad bottom-nav-a, slide-up animacija.
   Pokriva sve viewport-e <992px za konzistentnost. */
@media (max-width: 991px) {
  .agro-toast {
    min-width: 0 !important;
    left: 16px !important;
    right: 16px !important;
    width: calc(100vw - 32px) !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    top: auto !important;
    bottom: calc(80px + var(--agro-safe-bottom, 0px)) !important;
    animation: agro-toast-in-bottom 300ms ease forwards !important;
  }
}

/* Toast undo button (P2 K9) */
.agro-toast__undo {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  margin-left: 8px;
  min-height: 32px;
}
.agro-toast__undo:hover,
.agro-toast__undo:focus-visible {
  background: rgba(255, 255, 255, 0.28);
}
.agro-toast__close {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.85);
  padding: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

/* Inline alert */
.agro-alert { padding: 12px 16px; border-radius: var(--agro-radius); font-size: var(--agro-font-size-sm); margin-bottom: 16px; border-left: var(--agro-border-width-lg) solid; }
.agro-alert--info    { background: #e3f2fd; border-color: var(--agro-info);    color: #0d47a1; }
.agro-alert--success { background: var(--agro-primary-bg); border-color: var(--agro-success); color: var(--agro-primary-dark); }
.agro-alert--warning { background: #fff8e1; border-color: var(--agro-warning); color: #e65100; }
.agro-alert--danger  { background: #ffebee; border-color: var(--agro-danger);  color: #b71c1c; }

/* Agro buttons (koristiti u empty states + error pages) */
.agro-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 24px;
  border: none; border-radius: var(--agro-radius);
  font-family: var(--agro-font-body); font-weight: 600; font-size: var(--agro-font-size-sm);
  cursor: pointer; text-decoration: none;
  transition: background-color var(--agro-transition), box-shadow var(--agro-transition);
}
.agro-btn > svg { flex-shrink: 0; }
/* Legacy reset — kad .agro-btn nasledi i .btn-call-action ili druge legacy modifiere
   iz wowonder/stylesheet/style.css, ne dozvoli da gaze agro paletu. */
.wo_page_profile .options-buttons .btn.btn-call-action.agro-btn--primary,
.btn-call-action.agro-btn--primary {
  color: #fff;
  background: var(--agro-primary);
  min-width: 0;
  margin: 0;
}
.btn-call-action.agro-btn--primary:hover,
.btn-call-action.agro-btn--primary:focus {
  color: #fff;
  background: var(--agro-primary-dark);
}
.agro-btn--primary   { background: var(--agro-primary);      color: #fff; }
.agro-btn--primary:hover,
.agro-btn--primary:focus  { background: var(--agro-primary-dark); color: #fff; text-decoration: none; }
.agro-btn--accent    { background: var(--agro-accent);        color: #fff; }
.agro-btn--accent:hover,
.agro-btn--accent:focus   { background: var(--agro-accent-hover);  color: #fff; text-decoration: none; }
.agro-btn--secondary { background: transparent; border: 1px solid var(--agro-border); color: var(--agro-text); }
.agro-btn--secondary:hover,
.agro-btn--secondary:focus { background: var(--agro-surface-alt); text-decoration: none; }
.agro-btn--danger    { background: var(--agro-danger);        color: #fff; }
.agro-btn--ghost     { background: transparent;               color: var(--agro-primary); }
.agro-btn--ghost:hover,
.agro-btn--ghost:focus {
  background: var(--agro-primary-bg);
  color: var(--agro-primary-dark);
  text-decoration: none;
}
.agro-btn--block     { width: 100%; }
.agro-btn--sm        { min-height: 36px; padding: 0 16px; font-size: var(--agro-font-size-xs); }
.agro-btn--lg        { min-height: 52px; padding: 0 32px; font-size: 16px; }

/* Loading spinner */
.agro-loader {
  width: 32px; height: 32px;
  border: 3px solid var(--agro-border);
  border-top-color: var(--agro-primary);
  border-radius: 50%;
  animation: agro-spin 0.8s linear infinite;
}
@keyframes agro-spin {
  to { transform: rotate(360deg); }
}

/* --- Error / Status stranice (404, banned, oops, maintenance) --- */
.agro-error-page {
  text-align: center;
  padding: 80px 24px;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--agro-surface);
}
.agro-error-page--maintenance {
  min-height: 100vh;
  padding: 60px 24px;
}
.agro-error-page__logo { margin-bottom: 40px; }
.agro-error-page__icon--maintenance { margin-bottom: 24px; opacity: 0.85; }
.agro-error-page__code {
  font-family: var(--agro-font-heading);
  font-size: 72px;
  color: var(--agro-primary);
  margin: 16px 0 8px;
  line-height: 1;
}
.agro-error-page__code--danger  { color: var(--agro-danger); }
.agro-error-page__code--warning { color: var(--agro-warning); }
.agro-error-page__title {
  font-family: var(--agro-font-heading);
  font-size: 24px;
  color: var(--agro-text);
  margin-bottom: 12px;
}
.agro-error-page__text {
  font-size: var(--agro-font-size);
  color: var(--agro-text-secondary);
  margin-bottom: 32px;
  max-width: 400px;
  line-height: 1.6;
}
.agro-error-page__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.agro-error-page .agro-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
}
/* Layout overrides za full-page error stranice */
.agro-error-page ~ .chat-container,
.agro-error-page ~ footer,
.agro-error-page ~ .second-footer {
  display: none;
}

/* ==========================================================================
   20. Responsive (@media) + Dark Mode + Animacije + prefers-reduced-motion
   ========================================================================== */

/* --- I5: Animacije --- */

/* Hover lift kartice — samo na desktop hover */
@media (hover: hover) {
  .agro-card:hover,
  .agro-product-card:hover,
  .agro-widget:hover {
    transform: translateY(-2px);
    box-shadow: var(--agro-shadow-lg);
  }
}

/* Page fade-in */
@keyframes agro-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.agro-fade-in {
  animation: agro-fade-in 200ms ease-out forwards;
}

/* Sidebar active item — zeleni levi border */
.agro-sidebar .active-side,
.left-sidebar .side_links a.active-side {
  border-left: 3px solid var(--agro-primary);
  background: var(--agro-primary-bg);
}

/* Notification badge bounce */
@keyframes agro-badge-bounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.agro-badge--new,
.badge-counter[data-count]:not([data-count="0"]) {
  animation: agro-badge-bounce 0.15s ease;
}

/* Modal fade-in */
.modal.in .modal-dialog {
  animation: agro-modal-in 200ms ease-out;
}

@keyframes agro-modal-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bottom nav icon tap */
.agro-bottom-nav__link:active {
  transform: scale(0.9);
  transition: transform 100ms ease;
}

/* --- I6: Dark mode za sve agro komponente --- */
.agro-night {
  /* Kartice */
  --agro-surface-card: #1e231e;
  --agro-surface-alt: #252a25;
  --agro-border: #3a3f3a;
}

.agro-night .agro-card,
.agro-night .agro-product-card,
.agro-night .agro-widget,
.agro-night .agro-upgrade__card,
.agro-night .agro-filter-sidebar {
  background: var(--agro-surface-card);
  border-color: var(--agro-border);
}

.agro-night .agro-upgrade__hero {
  background: linear-gradient(135deg, #1a3a1a, #2e5d2e);
}

.agro-night .agro-pills__item {
  background: var(--agro-surface-card);
  border-color: var(--agro-border);
  color: var(--agro-text);
}

.agro-night .agro-pills__item--active {
  background: var(--agro-primary);
  color: #ffffff;
}

.agro-night .agro-upgrade__bank-table td:first-child {
  color: var(--agro-text-muted);
}

.agro-night .agro-upgrade__benefits li {
  border-bottom-color: var(--agro-border);
}

.agro-night .agro-alert--info    { background: #0d2137; color: #64b5f6; }
.agro-night .agro-alert--success { background: #1a331a; color: #81c784; }
.agro-night .agro-alert--warning { background: #332a1a; color: #ffb74d; }
.agro-night .agro-alert--danger  { background: #331a1a; color: #ef9a9a; }

.agro-night .agro-empty-state__title { color: var(--agro-text); }
.agro-night .agro-empty-state__text  { color: var(--agro-text-muted); }

.agro-night .agro-search__input {
  background: var(--agro-surface-card);
  border-color: var(--agro-border);
  color: var(--agro-text);
}

.agro-night .agro-tabs__item { color: var(--agro-text-muted); }
.agro-night .agro-tabs__item--active { color: var(--agro-text); border-bottom-color: var(--agro-primary); }

.agro-night .agro-upgrade__msg--success { background: rgba(46, 125, 50, 0.2); }
.agro-night .agro-upgrade__msg--error   { background: rgba(198, 40, 40, 0.2); }

.agro-night .agro-chat-limit {
  background: rgba(245, 166, 35, 0.15);
}

.agro-night .agro-chat-limit--reached {
  background: rgba(198, 40, 40, 0.15);
}

/* Dark mode: profili */
.agro-night .agro-profile-cover__overlay {
  background: linear-gradient(transparent 40%, rgba(0,0,0,0.7));
}

.agro-night .agro-profile-stats__item { border-color: var(--agro-border); }

/* Dark mode: bottom nav */
.agro-night .agro-bottom-nav {
  background: #1a1f1a;
  border-top-color: var(--agro-border);
}

.agro-night .agro-bottom-nav__label { color: var(--agro-text-muted); }
.agro-night .agro-bottom-nav__link--active .agro-bottom-nav__label { color: var(--agro-primary); }

/* Dark mode: WoWonder navbar override — tamniji braon */
.agro-night .navbar-default,
.agro-night.agro-night .navbar.navbar-default,
body.agro-night .navbar-default {
  background: #3e2723 !important;
  border-bottom-color: #5d4037 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}

.agro-night .navbar-default .dropdown-menu {
  background: var(--agro-surface-card) !important;
  border-color: var(--agro-border) !important;
}

.agro-night .navbar-default .dropdown-menu > li > a {
  color: var(--agro-text) !important;
}

.agro-night .navbar-default .dropdown-menu > li > a:hover {
  background: rgba(46,125,50,0.15) !important;
}

/* Dark mode: header */
.agro-night .agro-header,
.agro-night .main_header {
  background: #1a1f1a;
  border-bottom-color: var(--agro-border);
}

/* Dark mode: left sidebar */
.agro-night .left-sidebar .agro-nav-section-block > ul {
  background: var(--agro-surface-card) !important;
  border-color: var(--agro-border) !important;
  box-shadow: none !important;
}

.agro-night .left-sidebar .agro-nav-section-block > ul > li > a {
  color: var(--agro-text) !important;
}

.agro-night .left-sidebar .agro-nav-section-block > ul > li > a:hover {
  background: rgba(46,125,50,0.15) !important;
  color: var(--agro-primary-light) !important;
}

.agro-night .left-sidebar .agro-nav-section-block > ul > li.agro-nav-active > a,
.agro-night .left-sidebar .agro-nav-section-block > ul > li > a.active {
  background: rgba(46,125,50,0.18) !important;
  color: var(--agro-primary-light) !important;
}

.agro-night .left-sidebar .agro-nav-section-block > ul > li > a > svg {
  color: var(--agro-text-secondary);
}

.agro-night .left-sidebar .agro-nav-section-block > ul > li > a:hover > svg,
.agro-night .left-sidebar .agro-nav-section-block > ul > li.agro-nav-active > a > svg {
  color: var(--agro-primary-light);
}

.agro-night .agro-nav-section-title {
  color: var(--agro-text-secondary) !important;
}

/* Dark mode: sidebar */
.agro-night .left-sidebar,
.agro-night .agro-sidebar {
  background: transparent;
}

.agro-night .sidebar-conatnier .sidebar,
.agro-night .sidebar-conatnier > div {
  background: var(--agro-surface-card) !important;
  border-color: var(--agro-border) !important;
}

.agro-night .sidebar-conatnier .sidebar.rightcol {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Dark mode: wow_content + forms */
.agro-night .wow_content,
body.agro-night .wow_content {
  background: var(--agro-surface-card) !important;
  border-color: var(--agro-border) !important;
}

.agro-night .wow_form_fields input,
.agro-night .wow_form_fields select,
.agro-night .wow_form_fields textarea,
.agro-night .form-control {
  background: var(--agro-surface) !important;
  border-color: var(--agro-border) !important;
  color: var(--agro-text) !important;
}

.agro-night .input-group-addon {
  background: #1a231a !important;
  border-color: var(--agro-border) !important;
  color: var(--agro-text-muted) !important;
}

/* Dark mode: page heading (Glass card — tamniji gradient + glow) */
.agro-night .wo_page_hdng {
  background:
    linear-gradient(135deg,
      rgba(76, 175, 80, 0.10) 0%,
      var(--agro-surface-card) 55%,
      rgba(76, 175, 80, 0.06) 100%) !important;
  border-color: rgba(76, 175, 80, 0.18) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 8px 24px -10px rgba(76, 175, 80, 0.18) !important;
}
.agro-night .wo_page_hdng::before {
  background: radial-gradient(circle, rgba(76, 175, 80, 0.18) 0%, transparent 70%);
}
.agro-night .wo_page_hdng .wo_page_hdng_innr,
.agro-night .wo_page_hdng .wo_page_hdng_innr a,
.agro-night .wo_page_hdng .wo_page_hdng_innr div {
  color: var(--agro-text) !important;
}
.agro-night .wo_page_hdng .wo_page_hdng_innr > span {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.16) 0%, rgba(76, 175, 80, 0.06) 100%) !important;
  border-color: rgba(76, 175, 80, 0.28) !important;
}
.agro-night .wo_page_hdng .wo_page_hdng_innr svg {
  color: var(--agro-primary-light) !important;
  fill: var(--agro-primary-light) !important;
}
.agro-night .wo_page_hdng .familly-list-link a {
  background: rgba(76, 175, 80, 0.14) !important;
  color: var(--agro-primary-light) !important;
}
.agro-night .wo_page_hdng .familly-list-link a:hover,
.agro-night .wo_page_hdng .familly-list-link a:focus {
  background: rgba(76, 175, 80, 0.22) !important;
  color: var(--agro-primary-light) !important;
}

/* Dark mode: tabs */
.agro-night .nav-tabs,
.agro-night .page_link_list {
  border-bottom-color: var(--agro-border) !important;
}

.agro-night .nav-tabs > li > a,
.agro-night .page_link_list > li > a {
  color: var(--agro-text-muted) !important;
}

.agro-night .nav-tabs > li.active > a,
.agro-night .page_link_list > li.active > a {
  color: var(--agro-text) !important;
}

/* Dark mode: alerts */
.agro-night .alert-warning { background: rgba(249,168,37,0.15) !important; border-color: #8a6d1b !important; color: #ffb74d !important; }
.agro-night .alert-danger  { background: rgba(198,40,40,0.15) !important; border-color: #7f1d1d !important; color: #ef9a9a !important; }
.agro-night .alert-success { background: rgba(46,125,50,0.15) !important; border-color: #1b5e20 !important; color: #81c784 !important; }
.agro-night .alert-info    { background: rgba(21,101,192,0.15) !important; border-color: #0d47a1 !important; color: #64b5f6 !important; }

/* Dark mode: profile section divider */
.agro-night .agro-profile-section__divider { border-color: var(--agro-border); }
.agro-night .agro-profile-section__heading { color: var(--agro-primary-light); }

/* Dark mode: scrollbar */
.agro-night ::-webkit-scrollbar-track { background: #1a1f1a; }
.agro-night ::-webkit-scrollbar-thumb { background: #3a3f3a; }

/* Dark mode: modali */
.agro-night .modal-content,
.agro-night .wow_pops {
  background: var(--agro-surface-card);
  border-color: var(--agro-border);
}

/* Dark mode: error pages */
.agro-night .agro-error-page {
  background: var(--agro-surface);
}

/* Dark mode: sidebar footer compact */
.agro-night .rightcol .footer-wrapper-sidebar.agro-sidebar-footer--compact {
  background: var(--agro-surface-card) !important;
  border-color: var(--agro-border) !important;
  box-shadow: none;
}

.agro-night .agro-sidebar-footer .sun_foot_drop_menu .dropdown-menu {
  background: var(--agro-surface-card);
  border-color: var(--agro-border);
}

.agro-night .agro-sidebar-footer__lang-btn {
  box-shadow: none;
}

/* Dark mode: skeleton */
.agro-night .agro-skeleton {
  background: linear-gradient(90deg, #252a25 25%, #2d322d 50%, #252a25 75%);
  background-size: 200% 100%;
}

/* Dark mode: forum premium */
.agro-night .agro-forum-premium-badge {
  background: var(--agro-tier-premium);
}

/* Dark mode: landing */
.agro-night .agro-landing-hero {
  background: linear-gradient(135deg, #0f1a0f, #1a331a);
}

.agro-night .agro-landing-features,
.agro-night .agro-landing-steps {
  background: var(--agro-surface-card);
}

/* --- I7: Responsive audit v2 — breakpoints 360px-1920px ---
   Audit: 20 problema identifikovano i rešeno
   ========================================================================== */

/* ===== GLOBAL: Text overflow prevention (FIX #7) ===== */
.post .post-body p,
.post .post-body .record-text,
.post .post-heading .meta .title,
.comment-body .comment-text,
.wow_content,
.agro-product-card__title,
.agro-zadruga-card__name,
.agro-gazdinstvo-card__name,
.agro-widget--tip__text,
.agro-widget--season__text,
.messages-text,
.sidebar-title-back,
.page_link_list > li > a {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

/* Komentari: prilog slike — ograničena širina; HTML zaglavlje odvojeno od teksta/slike u šablonu */
.comment-body .comment-image,
.reply .comment-image {
  display: block;
  margin-top: 6px;
  max-width: 100%;
  clear: both;
}
.comment-image .comment-image__link {
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}
.comment-image .comment-image__img {
  max-width: min(100%, 520px);
  width: auto !important;
  height: auto !important;
  display: block;
  border-radius: 8px;
  object-fit: contain;
}
.comment-options .agro-comment-action-icon {
  display: inline-block;
  vertical-align: middle;
}

/* Avatar u komentarima — izvorna slika može biti velika (npr. 400px); thumb u feed koloni */
.comment.comment-container img.avatar,
.reply.reply-container img.avatar {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}
.comment.comment-container > a.pull-left,
.reply.reply-container > a.pull-left {
  display: block;
  width: 40px;
  max-width: 40px;
}

.live_comments > a.pull-left img.live_avatar {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  object-fit: cover;
  border-radius: 50%;
}
.live_comments > a.pull-left {
  width: 40px;
  max-width: 40px;
}

/* ===== GLOBAL: Tab nav horizontal scroll (FIX #11) ===== */
.nav-tabs,
.page_link_list,
.wo_content_tabs {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap !important;
  white-space: nowrap;
}
.nav-tabs::-webkit-scrollbar,
.page_link_list::-webkit-scrollbar,
.wo_content_tabs::-webkit-scrollbar {
  display: none;
}
.nav-tabs > li,
.page_link_list > li,
.wo_content_tabs > li {
  flex-shrink: 0;
}

/* ===== GLOBAL: Navbar SVG icon duplication fix (FIX #1) ===== */
/* WoWonder shows both outline + filled SVGs; hide the duplicate */
.navbar-default .dropdown-toggle .hide_fill_svg {
  display: none !important;
}
.navbar-default .dropdown.open .dropdown-toggle svg {
  display: inline-block !important;
}
.navbar-default .dropdown.open .dropdown-toggle .hide_fill_svg {
  display: none !important;
}

/* ===== GLOBAL: Featured users flex-wrap (FIX #18) ===== */
.wo_pro_users {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px;
  padding: 8px !important;
  list-style: none !important;
}
.wo_pro_users > li {
  flex: 0 0 auto;
}

/* ===== GLOBAL: Weather forecast flex fix (FIX #12) ===== */
.wow_weather_forecast {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px;
}
.wow_weather_forecast .fivedays {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== GLOBAL: Product grid responsive (FIX #9) ===== */
.wo_market .market_bottom #products.row {
  display: flex !important;
  flex-wrap: wrap !important;
}
.wo_market .market_bottom .product {
  box-sizing: border-box;
}

/* ===== Ultra-small screens (≤400px) ===== */
@media (max-width: 400px) {
  .agro-upgrade__hero { padding: 24px 16px; }
  .agro-upgrade__hero-title { font-size: 1.4rem; }
  .agro-upgrade__card { padding: 16px; }
  .agro-upgrade__bank-table td { font-size: 13px; }

  .agro-product-card__image { height: 140px; }
  .agro-widget { padding: 12px; }
  .agro-bottom-nav__label { font-size: 10px; }

  .agro-landing-hero__title { font-size: 1.6rem; }
  .agro-landing-hero__subtitle { font-size: 0.9rem; }

  /* Ultra-small (≤400) — kept here for shadowing; main mobile/tablet pravilo iznad. */

  /* Navbar padding tighter */
  .navbar-nav > li > a,
  #head_menu_rght .sixteen-font-size {
    padding: 10px 6px !important;
  }

  /* Post publisher kompaktniji */
  .publisher-box .btn-default { padding: 4px 6px !important; }
}

/* ===== Small mobile (≤530px) ===== */
@media (max-width: 530px) {
  /* FIX #10 partial: Navbar search below brand */
  .header-brand__wordmark {
    font-size: clamp(16px, 1.4vw + 9px, 19px);
  }
  .header-brand__mark {
    height: clamp(36px, 4vw + 18px, 44px);
    height: round(nearest, clamp(36px, 4vw + 18px, 44px), 1px);
    max-height: 44px;
    min-height: 36px;
    max-width: min(180px, 100%) !important;
  }

  /* FIX #8: Publisher box footer — stack icons cleanly */
  .sun_pub_mid_foot {
    flex-wrap: wrap !important;
    gap: 4px;
    margin: 0 4px !important;
  }
  .sun_pub_mid_foot .poster-left-buttons {
    width: 48% !important;
    max-width: 48% !important;
    padding: 3px !important;
    margin: 0 !important;
  }

  /* Product cards — 1 kolona */
  .wo_market .market_bottom .product {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Zadruga/gazdinstvo cards — stack vertically */
  .agro-zadruga-card,
  .agro-gazdinstvo-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===== Mobile (≤767px) ===== */
@media (max-width: 767px) {
  /* FIX P4: Sidebar hiding — samo na telefonu, tablet ima left sidebar */
  .left-sidebar,
  .leftcol {
    display: none !important;
  }
  .agro-sidebar-right,
  .sidebar-content-right,
  .rightcol {
    display: none !important;
  }
  .middlecol {
    width: 100% !important;
    padding: 0 !important;
    float: none !important;
  }
  .singlecol,
  .singlecol-guest {
    width: 100% !important;
  }
  /* Fluid container na telefonu */
  .container,
  .header-fixed1000,
  .header-fixed1200 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Header na mobile: outer .header-fixed1000 već ima 12px padding —
     container-fluid unutra ne sme dodavati dodatne 15px jer bi razbio alignment. */
  .header-fixed1000 > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .content-container {
    max-width: none;
  }

  /* Prostor za fiksni bottom nav — samo na telefonu */
  body {
    padding-bottom: 64px;
  }

  /* Forme na mobile — full width + manji padding */
  .wow_content,
  body .wow_content {
    padding: 12px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
  .wow_form_fields input,
  .wow_form_fields select,
  .wow_form_fields textarea {
    padding: 12px !important;
  }
  .wo_page_hdng {
    border-radius: 0 !important;
  }
  .wo_page_hdng .wo_page_hdng_innr {
    font-size: 15px !important;
    gap: 10px;
  }
  /* Mobile: skloni dekorativni glow blob (zauzima prostor i deluje glasno) */
  .wo_page_hdng::before {
    display: none;
  }
  .wo_page_hdng .wo_page_hdng_innr > span {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
  }
  .wo_page_hdng .wo_page_hdng_innr svg {
    width: 16px !important;
    height: 16px !important;
  }

  .agro-profile-cover { height: 180px; }
  .agro-profile-stats { flex-wrap: wrap; justify-content: center; }
  .agro-profile-stats__item { min-width: 33%; }

  /* Inline tab stats — na mobile-u sakrivamo (statistika je redundantna sa Brzim činjenicama / drugim widgetima u sidebaru). */
  .agro-profile-tabs__stats { display: none; }

  .agro-upgrade { padding: 16px 12px; }

  .agro-card--horizontal {
    flex-direction: column;
  }

  .agro-search-results { padding: 12px; }

  .agro-landing-pricing { flex-direction: column; gap: 16px; }
  .agro-landing-features__grid { grid-template-columns: 1fr; }

  /* FIX #14: Profile buttons — wrap instead of truncate */
  .wo_page_profile .options-buttons,
  .wo_user_profile .btn-glossy {
    flex-wrap: wrap !important;
    gap: 6px;
    justify-content: center !important;
  }
  .wo_page_profile .options-buttons .btn,
  .wo_page_profile .options-buttons a,
  .wo_page_profile .options-buttons button {
    font-size: 13px !important;
    padding: 6px 10px !important;
    white-space: nowrap;
  }

  /* FIX #19: Story status list — horizontal scroll without page scroll */
  .user-status-home ul.status-list {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .user-status-home ul.status-list::-webkit-scrollbar { display: none; }
  .user-status-home ul.status-list li {
    flex-shrink: 0;
  }

  /* Forum table — tighter cells */
  .wow_forum_sections table td,
  .wow_forum_sections table th {
    padding: 8px 6px !important;
    font-size: 13px !important;
  }

  /* Product cards — 2 kolone */
  .wo_market .market_bottom .product {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* FIX #15: Messages panel — account for bottom nav (samo telefon) */
  .mobileleftpane {
    height: calc(100vh - 48px - 64px) !important;
  }
  .text-sender-container .messagejoint {
    height: calc(100vh - 110px - 64px) !important;
  }

  /* FIX #20: Settings sidebar — scroll-friendly */
  .wo_setting_sidebar ul {
    scrollbar-width: none;
  }
  .wo_setting_sidebar ul::-webkit-scrollbar { display: none; }
}

/* ===== Tablet (768px-991px) ===== */
@media (min-width: 768px) and (max-width: 991px) {
  .agro-profile-cover { height: 220px; }

  .agro-landing-features__grid { grid-template-columns: repeat(2, 1fr); }
  .agro-landing-steps__grid { grid-template-columns: repeat(2, 1fr); }

  /* Bottom-nav OSTAJE vidljiv na tabletu — konzistentna navigacija sa mobile-om
     (user zahtev 2026-05-13). Ranije skriven, ali user zeli isto iskustvo do 991px. */

  /* FIX P4: Tablet — prikaži left sidebar, sakrij right sidebar */
  .container,
  .header-fixed1000,
  .header-fixed1200 {
    width: 95% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Header na tabletu: outer je već centriran 95% — container-fluid prati default .container padding. */
  .header-fixed1000 > .container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .content-container {
    max-width: none;
    width: 100%;
  }

  .leftcol,
  .left-sidebar {
    display: block !important;
    width: 180px !important;
    min-width: 180px !important;
    float: left !important;
  }

  .middlecol {
    width: calc(100% - 180px) !important;
    float: left !important;
    padding-left: 15px !important;
    padding-right: 0 !important;
  }

  .rightcol,
  .agro-sidebar-right,
  .sidebar-content-right {
    display: none !important;
  }

  .singlecol {
    width: calc(100% - 180px) !important;
    float: left !important;
  }

  .singlecol-guest {
    width: 100% !important;
  }

  /* Left sidebar kompakt na tabletu (180px) */
  .agro-left-nav { gap: 8px; }
  .agro-nav-section-title { font-size: 9px !important; margin-left: 8px; }
  .left-sidebar .agro-nav-section-block > ul { padding: 3px !important; }
  .left-sidebar .agro-nav-section-block > ul > li > a {
    padding: 5px 8px !important;
    font-size: 12px !important;
    gap: 7px;
  }
  .left-sidebar .agro-nav-section-block > ul > li > a > svg {
    width: 18px;
    height: 18px;
  }

  /* Search — ostatak reda između leve zone i ikona (input width:100% unutar ovog prostora) */
  #wo_home_search {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  #wo_home_search input[type="text"],
  .search-container .search-input {
    width: 100% !important;
    font-size: 12px;
  }

  /* Product cards — 3 kolone na tabletu */
  .wo_market .market_bottom .product {
    width: 33.333% !important;
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
  }

  /* Settings page tablet */
  .wo_new_sett_sidee {
    width: 200px !important;
    min-width: 200px !important;
  }
  .wo_new_sett_pagee {
    width: calc(100% - 200px) !important;
  }

  /* Profile/group page — main content + sidebar kolone */
  .page-margin > .row > .col-md-8,
  .wo_page_profile > .profile-container ~ .col-md-8,
  .wo_page_profile .col-md-8,
  .wo_group_profile ~ .col-md-8 {
    width: 60%;
    float: left;
  }
  .page-margin > .row > .col-md-4,
  .wo_page_profile .col-md-4,
  .wo_group_profile ~ .col-md-4 {
    width: 40%;
    float: left;
  }
}

/* ===== A8: Touch targets + layout na mobilnom (≤991px) ===== */
@media (max-width: 991px) {

  /* FIX #3: Touch targeti — SAMO na prave klikabilne elemente, ne na sve */
  .btn-main,
  .btn-primary,
  .btn-mat,
  .wo_follow_btn,
  .agro-btn,
  .agro-bottom-nav__item,
  a.btn,
  button.btn {
    min-height: 44px;
  }

  /* Post footer linkovi — normalna visina, ne 48px */
  .post .post-footer a {
    min-height: 36px;
    min-width: 36px;
  }

  /* FIX #3b: Notification badge ikone, dropdown toggle — normalna veličina */
  .navbar-nav > li > a,
  .notification-container a,
  .dropdown-toggle,
  .btn-default,
  .btn-sm,
  .btn-xs,
  .close,
  button.close,
  .comment-body button,
  .post-options button,
  [role="button"]:not(.btn-main):not(.btn-primary):not(.agro-btn) {
    min-height: auto;
    min-width: auto;
  }

  /* Sprečava iOS zoom na focus inputa */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* FIX P4: Sidebar hiding SAMO na telefonu (≤767px) — tablet ima left sidebar.
     Ovo je override koji sprečava da se sidebar sakrije na tabletu (768-991px).
     Tablet pravila su u zasebnom @media bloku iznad. */

  /* Page heading kompaktniji */
  .wo_page_hdng {
    padding: 12px 16px !important;
  }

  /* Error stranice */
  .agro-error-page__code { font-size: 48px; }
  .agro-error-page__title { font-size: 20px; }

  /* FIX #13: Forum table — hide low-priority columns on tablet/mobile */
  .wow_forum_sections table .forum-meta-d.small {
    display: none !important;
  }

  /* FIX #15: Messages panel — na tabletu nema bottom nav, normalna visina */
  .mobileleftpane {
    top: 48px !important;
    height: calc(100vh - 48px) !important;
  }
  .text-sender-container .messagejoint {
    height: calc(100vh - 110px) !important;
  }

  /* FIX #6: sidebar-conatnier card styling — prevent invisible styled divs */
  .sidebar-conatnier .sidebar,
  .sidebar-conatnier > div {
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
  }

  /* FIX #4: Container responsive width — premešten u ≤767px.
     Tablet (768-991px) koristi svoju širinu definisanu u tablet bloku. */

  /* Agro features/steps grids — stack */
  .agro-features {
    grid-template-columns: 1fr !important;
    padding: 32px 16px !important;
    gap: 24px !important;
  }
  .agro-steps {
    grid-template-columns: 1fr !important;
    padding: 32px 16px !important;
    gap: 24px !important;
  }
  .agro-pricing {
    grid-template-columns: 1fr !important;
    padding: 32px 16px !important;
    gap: 16px !important;
  }

  /* Horizontal overflow prevention — catch-all */
  html, body {
    overflow-x: hidden;
  }
}

/* ===== Desktop (992px+) ===== */
@media (min-width: 992px) {
  /* Sakrij bottom nav na desktopu */
  .agro-bottom-nav { display: none; }

  /* FIX P1: Uklonjen max-width: 680px — content-container treba da prati .container širinu */
  .content-container {
    max-width: none;
    width: 100%;
  }

  /* FIX P2: Override WoWonder fixed container widths (890px/800px) — fluid layout */
  .container,
  .header-fixed1000,
  .header-fixed1200 {
    width: 95% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* FIX P5: Header širina da prati container */
  .header-fixed1000 {
    max-width: 1280px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Desktop column widths — širi middle content */
  .leftcol {
    width: 200px !important;
    min-width: 200px !important;
    float: left !important;
  }
  .middlecol {
    width: calc(100% - 200px - 280px) !important;
    float: left !important;
  }
  .rightcol {
    width: 280px !important;
    min-width: 280px !important;
    float: right !important;
  }
  /* Singlecol (stranice bez desnog sidebara) */
  .singlecol {
    width: calc(100% - 200px) !important;
    float: left !important;
  }
  .singlecol-guest {
    width: 100% !important;
  }

  /* Product cards — 4 kolone */
  .wo_market .market_bottom .product {
    width: 25% !important;
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }

  /* Settings page — šire kolone */
  .wo_new_sett_sidee {
    width: 240px !important;
    min-width: 240px !important;
  }
  .wo_new_sett_pagee {
    width: calc(100% - 240px) !important;
  }
}

/* ===== Large desktop (1200px+) ===== */
@media (min-width: 1200px) {
  .agro-landing-features__grid { grid-template-columns: repeat(3, 1fr); }
  .agro-landing-steps__grid { grid-template-columns: repeat(4, 1fr); }

  /* Širi container na velikim monitorima */
  .container,
  .header-fixed1000,
  .header-fixed1200 {
    max-width: 1400px !important;
  }

  /* Širi sidebari za više prostora */
  .leftcol {
    width: 220px !important;
    min-width: 220px !important;
  }
  .middlecol {
    width: calc(100% - 220px - 300px) !important;
  }
  .rightcol {
    width: 300px !important;
    min-width: 300px !important;
  }
  .singlecol {
    width: calc(100% - 220px) !important;
  }
}

/* ===== Ultra-wide (1920px+) ===== */
@media (min-width: 1920px) {
  .container,
  .header-fixed1000,
  .header-fixed1200 {
    max-width: 1600px !important;
  }

  .leftcol {
    width: 240px !important;
    min-width: 240px !important;
  }
  .middlecol {
    width: calc(100% - 240px - 340px) !important;
  }
  .rightcol {
    width: 340px !important;
    min-width: 340px !important;
  }
  .singlecol {
    width: calc(100% - 240px) !important;
  }
}

/* ==========================================================================
   21. Responsive Fixes — Audit 2026-04-08
   ========================================================================== */

/* Skip to content link (WCAG 2.4.1) */
.agro-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -1;
}
.agro-skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  padding: 12px 20px;
  background: var(--agro-primary);
  color: #ffffff;
  z-index: 10000;
  border-radius: var(--agro-radius);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

/* Focus visible — stronger for buttons (WCAG 2.4.7) */
.btn-mat:focus-visible,
.btn-main:focus-visible,
.btn-primary:focus-visible,
.agro-btn:focus-visible {
  outline: 3px solid var(--agro-primary) !important;
  outline-offset: 2px !important;
}

/* Sidebar premium upgrade CTA — BEM classes instead of inline styles */
.agro-sidebar-upgrade {
  margin: 12px 8px 4px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #f1f8f2, #e8f5e9);
  border: 1px solid #c8e6c9;
  border-radius: 10px;
}
.agro-sidebar-upgrade__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.agro-sidebar-upgrade__icon {
  color: var(--agro-primary);
  font-size: 13px;
}
.agro-sidebar-upgrade__title {
  color: var(--agro-primary-dark);
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}
.agro-sidebar-upgrade__text {
  font-size: 13px;
  color: var(--agro-text-secondary);
  line-height: 1.5;
  margin: 0 0 10px;
}
.agro-sidebar-upgrade__btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 8px 14px;
  background: var(--agro-primary);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  line-height: 28px;
  transition: background-color var(--agro-transition);
}
.agro-sidebar-upgrade__btn:hover,
.agro-sidebar-upgrade__btn:focus {
  background: var(--agro-primary-dark);
  color: #ffffff;
  text-decoration: none;
}

/* Footer dropdown — minimum readable font (V11) */
.agro-footer-dropdown {
  font-size: var(--agro-font-size-sm) !important;
}

/* Lightbox — remove fixed min-width for mobile (K3) */
.wo_image_lightbox .story-img {
  min-width: 0 !important;
  width: 100%;
  max-width: 900px;
}

/* Upgrade bank table overflow (K7) */
.agro-upgrade__bank-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Cover image object-fit (V6) */
.wo_user_profile_cover img,
.cover_photo_wrap img,
.agro-profile-cover img {
  object-fit: cover;
  object-position: center;
}

/* ===== Phone (≤767px) ===== */
@media (max-width: 767px) {
  /* Chat sidebar fullwidth (K4) */
  .chat-container,
  .chat-opacity {
    width: 100% !important;
  }

  /* Chat popup fullwidth (K5) */
  .chat_main,
  .chat-messages-wrapper {
    width: calc(100vw - 16px) !important;
    right: 8px !important;
    left: 8px !important;
  }

  /* Nested comments overflow (V5) */
  .comment_wrap .comment_wrap .comment_wrap {
    margin-left: 8px !important;
    padding-left: 8px !important;
  }

  /* Modals — ensure responsive on tablet too (V7) */
  .modal .modal-dialog:not(.modal-sm):not(.modal-xs) {
    width: 90vw !important;
    margin: 10vh auto !important;
  }

  /* Social proof gap reduction (S7) */
  .agro-social-proof { gap: 24px; }
}

/* ===== Small phone (≤479px) ===== */
@media (max-width: 479px) {
  /* Logo — ostaje čitljiv na uskim ekranima (ne smanjivati ispod ~12px efektivno) */
  .header-brand__mark {
    height: clamp(36px, 5vw + 16px, 42px);
    height: round(nearest, clamp(36px, 5vw + 16px, 42px), 1px);
    max-height: 42px;
    min-height: 36px;
    max-width: min(160px, 100%) !important;
  }

  .header-brand__wordmark {
    font-size: clamp(15px, 2.6vw + 9px, 19px);
    letter-spacing: 0.02em;
  }

  /* Notification + requests dropdown — viewport-aligned na mobile (V8.1).
     Bez position:fixed, `left:8px` se racuna relativno parent <li> u krajnjem
     desnom delu header-a, pa dropdown ostane offset i seca se. Fixed positions
     ga uvek po viewport-u, ispod header-a. */
  .notifications-dropdown {
    position: fixed !important;
    top: calc(56px + env(safe-area-inset-top, 0px) + 4px) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 80px - env(safe-area-inset-top, 0px)) !important;
    overflow-y: auto !important;
    z-index: 1051;
  }

  /* Search input overflow (K2) */
  .search-container .search-input,
  .search-dropdown-container {
    width: calc(100vw - 120px) !important;
    max-width: 280px;
  }
}

/* ===== Tablet modal fix (768-991px) (V7) ===== */
@media (min-width: 768px) and (max-width: 991px) {
  .modal .modal-dialog:not(.modal-sm):not(.modal-xs) {
    width: 85vw !important;
    margin: 10vh auto !important;
  }
}

/* ===== Prefers reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .agro-skeleton,
  .agro-skeleton__item {
    animation: none !important;
  }
}

/* =============================================================
   AGRO CHAT DROPDOWN PANEL — Header integration
   Desktop: dropdown panel sa slide animacijom
   Mobile: fullscreen overlay sa slide-up animacijom
   ============================================================= */

/* --- Header chat toggle button --- */
.agro-chat-toggle-li {
  position: relative;
}
.agro-chat-toggle-li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.agro-chat-toggle-li > a:hover {
  opacity: 0.7;
}
.agro-chat-toggle-li.agro-chat-active > a {
  color: #4caf50;
}
.agro-chat-toggle-li > a svg {
  width: 24px;
  height: 24px;
}

/* --- Dropdown panel (desktop) --- */
.agro-chat-dropdown-panel {
  position: fixed;
  top: 45px;
  right: 0;
  width: 320px;
  max-height: calc(100vh - 55px);
  z-index: 999;
  overflow: hidden;
  border-radius: 0 0 0 12px;
  box-shadow: -2px 4px 24px rgba(0, 0, 0, 0.15);
  /* Animation state — starts collapsed */
  transform: translateY(-10px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.agro-chat-dropdown-panel.agro-panel-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Override the old fixed sidebar inside the panel */
.agro-chat-dropdown-panel .chat-all-container {
  position: static !important;
}
.agro-chat-dropdown-panel .chat-container {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  max-height: calc(100vh - 55px);
  padding-top: 0 !important;
  box-shadow: none !important;
  overflow-y: auto;
}
.agro-chat-dropdown-panel .chat-container .online-toggle {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
  border-bottom: 1px solid #f0f0f0;
}
.agro-chat-dropdown-panel .online-content-toggler {
  display: block !important;
  max-height: none !important;
  overflow-y: auto;
  flex: 1;
}

/* Chat tabs inside dropdown */
.agro-chat-dropdown-panel .chat-tab {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1000;
}

/* --- Body expansion: content always full-width since chat is now a dropdown overlay ---
   FIX: scope na desktop (>=992px) da bi mobile/tablet zadrzao simetricni padding —
   na uzem viewport-u nemamo chat sidebar pa nema potrebe za asimetricnim padding-om. */
@media (min-width: 992px) {
  body,
  .content-container {
    padding-right: 0 !important;
  }
}

/* --- Backdrop overlay when panel open --- */
.agro-chat-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.agro-chat-backdrop.agro-backdrop-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ===== Tablet (≤1140px) — panel adjusts ===== */
@media (max-width: 1140px) {
  .agro-chat-dropdown-panel {
    width: 300px;
  }
}

/* ===== Mobile (≤767px) — fullscreen slide-up overlay ===== */
@media (max-width: 767px) {
  .agro-chat-dropdown-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.2);
    /* Slide up from bottom */
    transform: translateY(100%);
    opacity: 1;
  }
  .agro-chat-dropdown-panel.agro-panel-visible {
    transform: translateY(0);
  }

  /* Drag handle indicator */
  .agro-chat-dropdown-panel::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: #ccc;
    border-radius: 2px;
    margin: 8px auto 4px;
  }

  .agro-chat-dropdown-panel .chat-container {
    max-height: calc(85vh - 16px);
    border-radius: 16px 16px 0 0;
  }

  /* Chat tabs overlay full screen on mobile */
  .agro-chat-dropdown-panel .chat-tab {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1001;
  }

  /* Backdrop darker on mobile */
  .agro-chat-backdrop.agro-backdrop-visible {
    opacity: 1;
    background: rgba(0, 0, 0, 0.35);
  }
}

/* ===== Small phone (≤479px) ===== */
@media (max-width: 479px) {
  .agro-chat-dropdown-panel {
    max-height: 90vh;
  }
  .agro-chat-dropdown-panel .chat-container {
    max-height: calc(90vh - 16px);
  }
}

/* ==========================================================================
   COMMENT SECTION REDESIGN — Feed komentari
   Facebook/Instagram stil: chat baloni, hover akcije, cist layout
   ========================================================================== */

/* --- Komentar kontejner: flexbox, avatar centriran vertikalno --- */
.post .post-footer .comments-list .comment.comment-container {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 !important;
  padding: 0 !important;
  position: relative;
}

/* Avatar link + slika */
.comment.comment-container > a.pull-left,
.comment.comment-container > img.avatar {
  flex-shrink: 0;
  float: none !important;
  margin: 0 !important;
}

/* Comment body — flex-grow pored avatara; anchor za reaction popup */
.post .post-footer .comments-list .comment .comment-body,
.post .post-footer .comments-list .comment > .comments-list {
  margin-left: 0 !important;
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: visible;
}

/* --- Heading balon: ime + vreme u JEDNOJ liniji (FB stil) --- */
.post .post-footer .comments-list .comment .comment-heading {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 6px;
  background: var(--agro-surface-input) !important;
  border-radius: 18px !important;
  padding: 6px 12px !important;
  max-width: calc(100% - 40px);
  width: auto;
  min-width: 0;
  position: relative;
  margin-left: 0 !important;
  line-height: 1.4;
  vertical-align: top;
}

body.agro-night .post .post-footer .comments-list .comment .comment-heading {
  background: var(--agro-surface-alt) !important;
}

/* Ime korisnika — inline, ista linija sa vremenom */
.post .post-footer .comments-list .comment .comment-heading .user {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--agro-text) !important;
  margin: 0 !important;
  line-height: 1.4;
  display: inline;
}

.post .post-footer .comments-list .comment .comment-heading .user-popover,
.post .post-footer .comments-list .comment .comment-heading .user-popover a {
  display: inline;
}

/* Vreme — ista linija, dot separator */
.post .post-footer .comments-list .comment .comment-heading .time,
.post .post-footer .comments-list .comment .comment-heading .time.ajax-time {
  font-size: 12px !important;
  color: var(--agro-text-muted) !important;
  display: inline !important;
  margin: 0;
  white-space: nowrap;
}

/* Dot separator izmedju imena i vremena */
.post .post-footer .comments-list .comment .comment-heading .time::before {
  content: '·';
  margin-right: 4px;
  font-weight: 700;
  color: var(--agro-text-muted);
}

/* Tekst komentara — ispod heading balona */
.post .post-footer .comment-body .comment-text {
  font-size: 14px !important;
  color: var(--agro-text) !important;
  line-height: 1.45;
  margin-top: 4px;
  padding: 0 4px;
}

/* Tekst odmah ispod balona sa imenom */
.post .post-footer .comments-list .comment .comment-heading + .comment-text {
  margin-top: 6px;
}

/* --- Edit/delete akcije — sakrivene, hover prikaz, pored balona --- */
.post .post-footer .comments-list .comment .comment-heading .comment_edele_options {
  visibility: hidden !important;
  opacity: 0;
  transition: opacity var(--agro-transition-fast), visibility var(--agro-transition-fast);
  position: absolute !important;
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--agro-surface-card);
  border-radius: 16px;
  padding: 2px 6px;
  box-shadow: var(--agro-shadow-sm);
  z-index: 2;
  white-space: nowrap;
}

.post .post-footer .comments-list .comment.comment-container:hover .comment_edele_options,
.post .post-footer .comments-list .comment .comment-heading:hover .comment_edele_options {
  visibility: visible !important;
  opacity: 1;
}

/* Ikone u akcijama — manje, diskretnije */
.comment-container .comment_edele_options svg.feather,
.comment-container .comment-options svg.feather {
  width: 14px !important;
  height: 14px !important;
  color: var(--agro-text-muted);
  transition: color var(--agro-transition-fast);
}

.comment-container .comment_edele_options .pointer:hover svg.feather {
  color: var(--agro-primary) !important;
}

.comment-container .comment_edele_options #deleteComment:hover svg.feather {
  color: var(--agro-danger) !important;
}

/* --- Reaction count ikone iznad comment akcija --- */
.comment-body #comment_reacted {
  position: relative !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  padding: 0;
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--agro-text-muted);
}

.comment-body #comment_reacted .like-emo {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.comment-body #comment_reacted .like-emo img,
.comment-body #comment_reacted .like-emo .how_reacted img {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

/* --- Reakcije i akcije ispod komentara --- */
.comment-container .comment-options {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding-left: 4px;
  flex-wrap: wrap;
}

.comment-container .comment-options .stat-item {
  font-size: 12px !important;
  color: var(--agro-text-muted) !important;
}

/* Like/Reaction dugme u komentaru — override core .wo-reaction padding:0 60px */
.comment-container .wo-reaction.wo-reaction-comment,
.comment-container .wo-reaction.wo-reaction-replay {
  display: inline-flex !important;
  align-items: center;
  padding: 0 !important;
  margin: 0;
  position: relative;
}

.comment-container .wo-reaction .like-btn {
  display: inline-flex !important;
  align-items: center;
}

.comment-container .like-btn svg.feather {
  width: 16px !important;
  height: 16px !important;
}

/* Separator tačka između akcija */
.comment-container .comment-options > .wo-reaction + span:not(.comment-reply-trigger):not(.comment-replies-count):not(.like-btn)::before {
  content: none;
}

/* Reply dugme — inline sa reaction */
.comment-container .comment-reply-trigger {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: var(--agro-text-muted);
  padding: 2px 4px;
  border-radius: 4px;
  transition: color var(--agro-transition-fast);
}

.comment-container .comment-reply-trigger:hover {
  color: var(--agro-primary);
}

.comment-container .comment-reply-trigger svg {
  width: 14px !important;
  height: 14px !important;
  margin-right: 2px;
}

/* Replies count */
.comment-container .comment-replies-count {
  font-size: 12px;
  color: var(--agro-text-muted);
}

/* --- Reply kontejner --- */
.reply.reply-container {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0 !important;
  padding: 0 !important;
  padding-left: 8px !important;
  position: relative;
}

.reply.reply-container > a.pull-left,
.reply.reply-container > img.avatar {
  flex-shrink: 0;
  float: none !important;
  margin: 0 !important;
}

/* Reply avatar manji */
.reply.reply-container img.avatar {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
}

.reply.reply-container > a.pull-left {
  width: 28px !important;
  max-width: 28px !important;
}

/* Reply body */
.post .post-footer .comments-list .reply .comment-body {
  margin-left: 0 !important;
  margin-top: 0 !important;
  flex: 1;
  min-width: 0;
}

/* Reply heading balon — ime + vreme u jednoj liniji */
.reply.reply-container .comment-heading,
.reply.reply-container .reply-heading {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 6px;
  background: var(--agro-surface-input) !important;
  border-radius: 18px !important;
  padding: 6px 12px !important;
  position: relative;
  line-height: 1.4;
  max-width: calc(100% - 40px);
  width: auto;
  min-width: 0;
  vertical-align: top;
}

body.agro-night .reply.reply-container .comment-heading,
body.agro-night .reply.reply-container .reply-heading {
  background: var(--agro-surface-alt) !important;
}

/* Reply ime — inline */
.reply.reply-container .reply-heading .user {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--agro-text) !important;
  display: inline;
  margin: 0 !important;
}

.reply.reply-container .reply-heading .user-popover,
.reply.reply-container .reply-heading .user-popover a {
  display: inline;
}

/* Reply vreme — ista linija, dot separator */
.reply.reply-container .reply-heading .time {
  font-size: 12px !important;
  color: var(--agro-text-muted) !important;
  display: inline !important;
  white-space: nowrap;
}

.reply.reply-container .reply-heading .time::before {
  content: '·';
  margin-right: 4px;
  font-weight: 700;
  color: var(--agro-text-muted);
}

/* Reply text */
.reply.reply-container .reply-text {
  font-size: 13.5px;
  color: var(--agro-text);
  line-height: 1.4;
  padding: 0 4px;
  margin-top: -2px;
}

/* Reply edit/delete — isto hover pattern */
.reply.reply-container .comment_edele_options {
  visibility: hidden !important;
  opacity: 0;
  transition: opacity var(--agro-transition-fast), visibility var(--agro-transition-fast);
  position: absolute !important;
  right: 0;
  top: 2px;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--agro-surface-card);
  border-radius: 16px;
  padding: 2px 6px;
  box-shadow: var(--agro-shadow-sm);
  z-index: 2;
}

.reply.reply-container:hover .comment_edele_options {
  visibility: visible !important;
  opacity: 1;
}

/* --- Slika u komentaru --- */
.comment-body .comment-image {
  margin-top: 6px !important;
  margin-bottom: 4px;
}

.comment-image .comment-image__img {
  max-width: min(100%, 280px) !important;
  border-radius: 12px !important;
  border: 1px solid var(--agro-border);
}

/* --- Comment edit textarea --- */
.comment-edit {
  margin-top: 6px;
}

.comment-edit .edit-box,
div[data-post-comm-reply-edit] .edit-box {
  border: 1px solid var(--agro-border) !important;
  border-radius: 18px !important;
  padding: 8px 14px !important;
  font-size: 13.5px !important;
  background: var(--agro-surface) !important;
  resize: none;
  min-height: 36px;
  transition: border-color var(--agro-transition-fast);
}

.comment-edit .edit-box:focus,
div[data-post-comm-reply-edit] .edit-box:focus {
  border-color: var(--agro-primary) !important;
  box-shadow: var(--agro-focus-ring);
}

/* --- Reply input area --- */
.comment-reply .wo_commreply_combo {
  display: flex !important;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px !important;
  position: relative;
}

.comment-reply .wo_commreply_combo img.avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
}

.comment-reply .wo_commreply_combo .textarea,
.comment-reply .wo_commreply_combo textarea.form-control {
  border-radius: 18px !important;
  padding: 8px 120px 8px 14px !important;
  font-size: 13px !important;
  background: var(--agro-surface-input) !important;
  border: none !important;
  min-height: 36px !important;
  height: 36px !important;
  resize: none;
  transition: background var(--agro-transition-fast);
}

body.agro-night .comment-reply .wo_commreply_combo .textarea,
body.agro-night .comment-reply .wo_commreply_combo textarea.form-control {
  background: var(--agro-surface-alt) !important;
}

.comment-reply .wo_commreply_combo .textarea:focus,
.comment-reply .wo_commreply_combo textarea.form-control:focus {
  background: #fff !important;
  border: 1px solid var(--agro-border) !important;
  box-shadow: none;
}

/* Image comment toolbar — apsolutno pozicioniran u reply inputu */
.comment-reply .wo_commreply_combo .image-comment {
  position: absolute !important;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
}

.comment-reply .wo_commreply_combo .image-comment .btn-file {
  padding: 2px 4px !important;
  background: transparent !important;
  border: none;
}

.comment-reply .wo_commreply_combo .image-comment svg.feather {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.5;
  transition: opacity var(--agro-transition-fast);
}

.comment-reply .wo_commreply_combo .image-comment svg.feather:hover {
  opacity: 0.8;
}

/* --- View more replies link --- */
.view-more-replies {
  font-size: 12.5px;
  color: var(--agro-text-muted);
  padding: 4px 8px;
  margin-left: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color var(--agro-transition-fast);
}

.view-more-replies:hover {
  color: var(--agro-primary);
}

.view-more-replies svg {
  width: 14px;
  height: 14px;
}

/* Sakrij odgovore link */
.hide-replies {
  font-size: 12.5px;
  color: var(--agro-text-muted);
  padding: 4px 8px;
  margin-left: 36px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.hide-replies:hover {
  color: var(--agro-primary);
}

.hide-replies svg {
  width: 14px;
  height: 14px;
}

/* Edit textarea za reply komentare */
.reply .comment-body [data-post-comm-reply-edit] textarea.edit-box {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-md, 8px);
  resize: vertical;
  transition: border-color 0.15s ease;
  margin-top: 6px;
}

.reply .comment-body [data-post-comm-reply-edit] textarea.edit-box:focus {
  border-color: var(--agro-primary);
  outline: none;
}

/* --- Komentar textarea kontejner: pravilno ograničenje unutar kartice --- */
.post .post-commet-textarea {
  padding: 10px 12px 14px !important;
  box-sizing: border-box;
  margin-top: 4px;
  /* Poslednji element u kartici — čist završetak pre gap-a prema sledećem postu */
  margin-bottom: 0;
}

/* Feed: dodatni vazduh iznad polja za komentar (ispod liste / iznad combo-a) */
#posts .post .post-footer.post-comments .post-commet-textarea {
  margin-top: clamp(8px, 1.5vw, 14px) !important;
}

/* --- wo_comment_combo: textarea red + footer toolbar layout --- */
#wo_comment_combo {
  margin: 0 !important;
  padding: 0 !important;
  border-top: none !important;
}

/* Avatar + textarea red */
#wo_comment_combo > div[style*="display: flex"],
#wo_comment_combo > div:first-child {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

#wo_comment_combo .avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ==========================================================================
   COMMENT TOOLBAR REDESIGN — Mojegazdinstvo agro brend
   Footer ispod comment textarea: loader, char count, ikone, send dugme
   ========================================================================== */

/* Footer toolbar kontejner */
#wo_comment_combo .comment_combo_footer {
  margin: 6px 0 0 !important;
  padding: 6px 4px 2px !important;
  border-top: 1px solid var(--agro-border);
  background: transparent !important;
  position: relative;
}

/* Toolbar flex layout — leva strana (status) | desna strana (akcije + send) */
#wo_comment_combo .comment_combo_footer .wo_comment_fopt.wo_feed_post_comments {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  flex-wrap: nowrap;
}

/* Obe strane: inline-flex grupe */
#wo_comment_combo .comment_combo_footer .wo_feed_post_comments > div {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}

/* Svako toolbar dugme — touch-friendly min 36px, vizuelno 32px sa paddingom */
#wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn:not(.btn-main) {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  min-height: 32px;
  border-radius: var(--agro-radius) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background var(--agro-transition-fast), transform 0.1s ease;
  cursor: pointer;
  position: relative;
}

/* Hover — suptilni agro zeleni pozadinski tint */
#wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn:not(.btn-main):hover {
  background: var(--agro-primary-bg) !important;
  transform: scale(1.05);
}

/* Active/pressed — malo tamniji */
#wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn:not(.btn-main):active {
  background: rgba(46, 125, 50, 0.15) !important;
  transform: scale(0.96);
}

/* SVG ikone — Feather stroke-based, fill mora biti none */
#wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn:not(.btn-main) svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: var(--agro-text-secondary);
  stroke-width: 2;
  color: var(--agro-text-secondary);
  opacity: 0.65;
  margin: 0 !important;
  transition: opacity var(--agro-transition-fast), stroke var(--agro-transition-fast);
}

#wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn:not(.btn-main):hover svg {
  opacity: 1;
  fill: none !important;
  stroke: var(--agro-primary);
  color: var(--agro-primary);
}

/* ── Send dugme — primarni CTA, ističe se od ostalih ── */
#wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn.sendbtn {
  background: var(--agro-primary) !important;
  color: #fff !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px;
  min-height: 34px;
  border-radius: 50% !important;
  border: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(46, 125, 50, 0.25);
  transition: background var(--agro-transition-fast),
              box-shadow var(--agro-transition-fast),
              transform 0.15s ease;
  cursor: pointer;
  margin-left: 4px;
}

#wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn.sendbtn:hover {
  background: var(--agro-primary-dark) !important;
  box-shadow: 0 3px 10px rgba(46, 125, 50, 0.35);
  transform: scale(1.1);
}

#wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn.sendbtn:active {
  transform: scale(0.95);
  box-shadow: 0 1px 3px rgba(46, 125, 50, 0.2);
}

#wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn.sendbtn svg {
  width: 15px !important;
  height: 15px !important;
  fill: none !important;
  color: #fff !important;
  stroke: #fff !important;
  opacity: 1 !important;
  margin: 0 !important;
}

/* ── Image comment wrapper ── */
#wo_comment_combo .comment_combo_footer .image-comment {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
}

#wo_comment_combo .comment_combo_footer .image-comment .comment-btn-wrapper {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
}

/* ── Char count — diskretno, desno poravnato ── */
#wo_comment_combo .comment_combo_footer .charsLeft-post {
  font-size: 11px;
  font-weight: 500;
  color: var(--agro-text-muted);
  min-width: 22px;
  text-align: center;
  line-height: 1;
  opacity: 0.7;
}

/* ── Ball pulse loader — manji, agro zeleni ── */
#wo_comment_combo .comment_combo_footer .ball-pulse div {
  width: 5px !important;
  height: 5px !important;
  background-color: var(--agro-primary-light) !important;
}

/* ── Audio record dugme — isti stil kao ostale ikone ── */
#wo_comment_combo .comment_combo_footer .record-comment-audio {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: var(--agro-radius) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  transition: background var(--agro-transition-fast);
}

#wo_comment_combo .comment_combo_footer .record-comment-audio:hover {
  background: var(--agro-primary-bg) !important;
}

#wo_comment_combo .comment_combo_footer .record-comment-audio svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  color: var(--agro-text-secondary);
  stroke: var(--agro-text-secondary);
  opacity: 0.65;
}

#wo_comment_combo .comment_combo_footer .record-comment-audio:hover svg {
  color: var(--agro-primary);
  stroke: var(--agro-primary);
  opacity: 1;
}

/* Recording active state — crveni puls */
#wo_comment_combo .comment_combo_footer .record-comment-audio[data-record="1"] {
  background: rgba(211, 47, 47, 0.1) !important;
}

#wo_comment_combo .comment_combo_footer .record-comment-audio[data-record="1"] svg {
  color: #d32f2f !important;
  stroke: #d32f2f !important;
  fill: none !important;
  opacity: 1;
  animation: agro-pulse-record 1.2s ease-in-out infinite;
}

@keyframes agro-pulse-record {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Night mode ── */
body.agro-night #wo_comment_combo .comment_combo_footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}

body.agro-night #wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn:not(.btn-main):hover {
  background: rgba(76, 175, 80, 0.12) !important;
}

body.agro-night #wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn.sendbtn {
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

body.agro-night #wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn:not(.btn-main) svg {
  color: var(--agro-text-muted);
  fill: none !important;
  stroke: var(--agro-text-muted);
}

body.agro-night #wo_comment_combo .comment_combo_footer .charsLeft-post {
  color: var(--agro-text-muted);
}

/* ── Responsive: tablet (768-1024px) ── */
@media (max-width: 1024px) and (min-width: 768px) {
  #wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn:not(.btn-main) {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
    min-height: 30px;
  }

  #wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn.sendbtn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    min-height: 32px;
  }
}

/* ── Responsive: mobilni (<768px) — min 44px touch targets (WCAG 2.5.5) ── */
@media (max-width: 767px) {
  .post .post-commet-textarea {
    padding: 8px 10px 10px !important;
  }

  #wo_comment_combo .comment_combo_footer {
    padding: 8px 2px 4px !important;
  }

  #wo_comment_combo .comment_combo_footer .wo_feed_post_comments > div {
    gap: 2px;
  }

  /* Veći touch target na mobilnom — min 36px (kompromis prostor/pristupačnost) */
  #wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn:not(.btn-main) {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    min-height: 36px;
  }

  #wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn:not(.btn-main) svg {
    width: 16px !important;
    height: 16px !important;
  }

  #wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn.sendbtn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
    min-height: 38px;
  }

  #wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn.sendbtn svg {
    width: 16px !important;
    height: 16px !important;
  }

  #wo_comment_combo .comment_combo_footer .record-comment-audio {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
  }
}

/* ── Responsive: mali mobilni (<480px) — kompaktniji ali i dalje touch-safe ── */
@media (max-width: 480px) {
  #wo_comment_combo .comment_combo_footer .wo_feed_post_comments {
    gap: 0 !important;
  }

  #wo_comment_combo .comment_combo_footer .wo_feed_post_comments > div {
    gap: 1px;
  }

  #wo_comment_combo .comment_combo_footer .charsLeft-post {
    font-size: 10px;
    min-width: 18px;
  }
}

/* --- Post footer - komentar unos na dnu posta --- */
.post .post-footer .textarea,
.post .post-footer input.comment-textarea {
  border-radius: 20px !important;
  padding: 8px 140px 8px 14px !important;
  font-size: 13.5px !important;
  background: var(--agro-surface-input) !important;
  border: none !important;
  height: 38px !important;
  transition: background var(--agro-transition-fast);
  width: 100% !important;
  box-sizing: border-box !important;
}

body.agro-night .post .post-footer .textarea,
body.agro-night .post .post-footer input.comment-textarea {
  background: var(--agro-surface-alt) !important;
}

.post .post-footer .textarea:focus,
.post .post-footer input.comment-textarea:focus {
  background: #fff !important;
  border: 1px solid var(--agro-border) !important;
  outline: none;
}

/* --- Post actions bar (Svidja mi se / Komentar / Podeli) --- */
.post .post-description .post-actions {
  display: flex !important;
  align-items: center;
  justify-content: space-around;
  padding: 4px 0 !important;
  border-top: 1px solid var(--agro-border);
  border-bottom: 1px solid var(--agro-border);
  margin: 0 !important;
}

.post .post-description .post-actions .stat-item {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 16px !important;
  border-radius: 8px;
  font-size: 13.5px !important;
  font-weight: 500;
  color: var(--agro-text-secondary) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: background var(--agro-transition-fast), color var(--agro-transition-fast);
  cursor: pointer;
  flex: 1;
  justify-content: center;
  margin: 0 !important;
  touch-action: manipulation;
}

.post .post-description .post-actions .stat-item:hover {
  background: var(--agro-primary-bg) !important;
  color: var(--agro-primary) !important;
}

.post .post-description .post-actions .stat-item svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
}

.post .stats.post-actions .stat-item .agro-post-stat-icon {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
}

/* --- Post footer container --- */
.post .post-footer {
  background: var(--agro-surface-card) !important;
  border-top: none !important;
  padding: 8px 12px !important;
  /* Svaki footer blok čisti float-ove iz prethodnog sadržaja */
  clear: both;
}

/* .post .post-footer hr — konsolidovano u sekciji COMMENT SECTION REDESIGN (~L7726) */

/* --- Zona komentara: full-width unutar post kartice --- */
#posts .post .post-footer.post-comments {
  position: relative;
  margin: 0;
  padding: 12px clamp(12px, 3vw, 18px) 14px !important;
  overflow: visible;
  border: none;
  border-top: 1px solid var(--agro-border);
  border-radius: 0;
  box-shadow: none;
  background: var(--agro-surface-card) !important;
}

body.agro-night #posts .post .post-footer.post-comments {
  border-top-color: rgba(255, 255, 255, 0.08);
  background: var(--agro-surface-card) !important;
}

/* ::before talas uklonjen — komentar zona je sada full-width, border-top je separator */

/* --- Reaction popup (iznad balona; važi i za reply) --- */
.comment-body {
  position: relative;
}

/* Reactions popup — horizontalni red kao na postu */
.post .post-footer .comments-list .comment-body .reactions-box {
  position: absolute !important;
  z-index: 10 !important;
  top: auto !important;
  bottom: calc(100% + 4px) !important;
  left: 0;
  background: var(--agro-surface-card) !important;
  border-radius: 24px !important;
  padding: 4px 8px !important;
  box-shadow: var(--agro-shadow-md) !important;
  display: none;
  list-style: none !important;
  margin: 0 !important;
  gap: 2px;
}

/* Samo kad je otvoren (jQuery fadeIn postavlja inline display: block — inline pobeđuje display:none iznad) */
.post .post-footer .comments-list .comment-body .reactions-box[style*="display"]:not([style*="display: none"]):not([style*="display:none"]) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

.post .post-footer .comments-list .comment .comment-body .reactions-box li {
  animation: none !important;
  padding: 4px !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

.post .post-footer .comments-list .comment .comment-body .reactions-box li:hover {
  transform: scale(1.3);
  transition: transform 0.15s ease;
}

/* --- Delete modal stilovi --- */
.comment-container .modal .modal-content,
.reply-container .modal .modal-content {
  border-radius: var(--agro-radius-lg) !important;
  border: none !important;
  box-shadow: var(--agro-shadow-lg) !important;
}

.comment-container .modal .modal-header,
.reply-container .modal .modal-header {
  border-bottom: 1px solid var(--agro-border) !important;
  padding: 12px 16px !important;
}

.comment-container .modal .modal-footer .btn.main,
.reply-container .modal .modal-footer .btn.main {
  background: var(--agro-danger) !important;
  border: none !important;
  border-radius: var(--agro-radius) !important;
  color: #fff !important;
  padding: 8px 20px !important;
  font-weight: 500;
}

.comment-container .modal .modal-footer .btn.main:hover,
.reply-container .modal .modal-footer .btn.main:hover {
  background: #b71c1c !important;
}

/* --- Ugnjezdeni replies border --- */
.comment-replies {
  margin-left: 8px;
  padding-left: 12px;
  border-left: 2px solid var(--agro-border);
}

/* Ukloni stari reply-comment border iz agro sekcije */
.reply-comment,
.comments_area .reply {
  border-left: none !important;
}

/* --- Like count na komentarima --- */
.comment-container .like-stat,
.reply-container .like-stat {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
}

/* --- Action buttons bar (Svidja mi se / Komentar / Podeli) --- */
#wo_post_stat_button {
  display: flex !important;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  padding: 2px 0 !important;
  float: none !important;
}

#wo_post_stat_button .stat-item,
#wo_post_stat_button .wo-reaction {
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px !important;
  margin: 0 2px !important;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--agro-text-secondary) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background var(--agro-transition-fast), color var(--agro-transition-fast);
  text-align: center;
  white-space: nowrap;
}

#wo_post_stat_button .stat-item:hover,
#wo_post_stat_button .wo-reaction:hover {
  background: var(--agro-primary-bg) !important;
  color: var(--agro-primary) !important;
}

#wo_post_stat_button .stat-item svg,
#wo_post_stat_button .wo-reaction svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
}

/* Active like/reaction state */
#wo_post_stat_button .active-like,
#wo_post_stat_button .active-wonder {
  color: var(--agro-primary) !important;
}

/* Reaction popup na postu */
#wo_post_stat_button .reactions-box {
  z-index: 10;
}

/* --- Comment count badge (zeleni rounded badge sa belim brojem) --- */
.agro-comment-count,
span.agro-comment-count,
.stat-item .agro-comment-count,
.stat-item span#comments.agro-comment-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 10px !important;
  background: var(--agro-primary) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-left: 2px !important;
}

/* Komentari isključeni — bez zelenog broja na „Komentar“ (data-comments-status na #post-N) */
#posts .post[data-comments-status="0"] #wo_post_stat_button .agro-comment-count {
  display: none !important;
}

/* Stats row iznad dugmadi (like count, comment count) */
.post .post-footer .stats.post-actions {
  padding: 6px 0 2px !important;
}

.post .post-footer .stats.post-actions .stat-item {
  font-size: 13px !important;
  color: var(--agro-text-muted) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 8px !important;
}

.post .post-footer .stats.post-actions .like-stat {
  display: inline-flex;
  align-items: center;
}

/* HR separator between stats and buttons */
.post .post-footer hr {
  margin: 4px 0 !important;
  border-color: var(--agro-border) !important;
  opacity: 0.4;
}

/* --- Responsive: mobilni komentari --- */
@media (max-width: 767px) {
  .post .post-footer .comments-list .comment .comment-heading {
    max-width: calc(100% - 50px) !important;
    padding: 6px 10px !important;
  }

  .post .post-description .post-actions .stat-item {
    padding: 8px 8px !important;
    font-size: 12px !important;
    gap: 4px;
  }

  .comment.comment-container img.avatar {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }

  .comment.comment-container > a.pull-left {
    width: 32px !important;
    max-width: 32px !important;
  }

  .comment-reply .wo_commreply_combo .textarea,
  .comment-reply .wo_commreply_combo textarea.form-control {
    padding-right: 90px !important;
  }

  /* Edit/delete uvek vidljivo na mobile (nema hover) */
  .post .post-footer .comments-list .comment.comment-container .comment_edele_options,
  .reply.reply-container .comment_edele_options {
    visibility: visible !important;
    opacity: 1;
    position: static !important;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
}

@media (max-width: 479px) {
  .comment-image .comment-image__img {
    max-width: 100% !important;
  }

  .view-more-replies {
    margin-left: 0;
  }
}


/* ==========================================================================
   AGRO-TECH SKIN — WoWonder originalni layout + Mojegazdinstvo boje
   Minimalan override: samo boje, tipografija, border-radius, senke.
   WoWonder-ov float/clear/hr layout ostaje netaknut.
   ========================================================================== */

/* --- 1. Post kartica: surface + border + shadow --- */
.post.panel-white {
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  box-shadow: var(--agro-shadow-sm);
}

body.agro-night .post.panel-white {
  background: var(--agro-surface-card);
  border-color: var(--agro-border);
}

/* --- 2. Post heading: text boje --- */
.post .post-heading .meta h4 a {
  color: var(--agro-text);
  font-weight: 600;
}

.post .post-heading .meta h4 a:hover {
  color: var(--agro-primary);
}

.post .post-heading .meta h6,
.post .post-heading .meta h6 a,
.post .post-heading .meta h6 span {
  color: var(--agro-text-muted);
}

body.agro-night .post .post-heading .meta h4 a {
  color: var(--agro-text);
}

body.agro-night .post .post-heading .meta h6,
body.agro-night .post .post-heading .meta h6 a,
body.agro-night .post .post-heading .meta h6 span {
  color: var(--agro-text-muted);
}

/* --- 3. Post body text --- */
.post .post-description p,
.post .post-description .content-inner {
  color: var(--agro-text);
  line-height: 1.5;
}

body.agro-night .post .post-description p,
body.agro-night .post .post-description .content-inner {
  color: var(--agro-text);
}

/* --- 4. Stats/reactions bar --- */
.post .stats {
  color: var(--agro-text-muted);
}

.post .stats a {
  color: var(--agro-text-secondary);
}

.post .stats a:hover {
  color: var(--agro-primary);
}

body.agro-night .post .stats {
  color: var(--agro-text-muted);
}

body.agro-night .post .stats a {
  color: var(--agro-text-secondary);
}

/* --- 5. Action buttons (Like/Comment/Share) --- */
.post .stats .stat-item a,
.post .stats .btn-link {
  color: var(--agro-text-secondary);
  transition: color 0.15s ease;
}

.post .stats .stat-item a:hover,
.post .stats .btn-link:hover {
  color: var(--agro-primary);
}

/* Active like state */
.post .stats .stat-item a.active,
.post .stats .stat-item a[data-liked="true"] {
  color: var(--agro-primary);
}

/* --- 6. HR separator: agro border boja --- */
.post hr {
  border-top-color: var(--agro-border);
  margin: 0;
  opacity: 0.6;
}

body.agro-night .post hr {
  border-top-color: var(--agro-border);
}

/* --- 7. Comment section --- */
.post .post-comments .comment .comment-heading {
  color: var(--agro-text);
}

.post .post-comments .comment .comment-heading a {
  color: var(--agro-text);
  font-weight: 600;
}

.post .post-comments .comment .comment-heading a:hover {
  color: var(--agro-primary);
}

.post .post-comments .comment p,
.post .post-comments .comment .comment-text {
  color: var(--agro-text);
}

body.agro-night .post .post-comments .comment .comment-heading a {
  color: var(--agro-text);
}

body.agro-night .post .post-comments .comment p,
body.agro-night .post .post-comments .comment .comment-text {
  color: var(--agro-text);
}

/* --- 8. Comment input --- */
.post .post-comments .comment-reply-textarea,
.post .post-comments textarea.form-control {
  background: var(--agro-surface-input);
  border: 1px solid var(--agro-border);
  border-radius: 20px;
  color: var(--agro-text);
  overflow-y: auto;
  scrollbar-width: none;
}

.post .post-comments .comment-reply-textarea::-webkit-scrollbar,
.post .post-comments textarea.form-control::-webkit-scrollbar {
  display: none;
  transition: border-color 0.15s ease;
}

.post .post-comments .comment-reply-textarea:focus,
.post .post-comments textarea.form-control:focus {
  border-color: var(--agro-primary);
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.15);
}

body.agro-night .post .post-comments .comment-reply-textarea,
body.agro-night .post .post-comments textarea.form-control {
  background: var(--agro-surface-input);
  border-color: var(--agro-border);
  color: var(--agro-text);
}

/* --- 9. View more comments/replies link --- */
.post .post-comments .view-more a,
.post .post-comments .view-more-replies a {
  color: var(--agro-text-muted);
  font-size: 13px;
}

.post .post-comments .view-more a:hover,
.post .post-comments .view-more-replies a:hover {
  color: var(--agro-primary);
}

/* --- 10. agro-muted-text helper (zamena za inline style color:#9197a3) --- */
.agro-muted-text {
  color: var(--agro-text-muted) !important;
}

body.agro-night .agro-muted-text {
  color: var(--agro-text-muted) !important;
}

/* --- 11. Send button: agro zelena --- */
.post .post-comments .comment-send-btn,
.post .post-comments .send-comment-btn {
  color: var(--agro-primary);
}

.post .post-comments .comment-send-btn:hover,
.post .post-comments .send-comment-btn:hover {
  color: var(--agro-primary-dark);
}

/* --- 12. Post dropdown menu --- */
.post .post-heading .dropdown-menu {
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  box-shadow: var(--agro-shadow-md);
  z-index: 1060;
}

/* Pozicioniranje meni ispod chevrona — bez preklapanja, kompaktnija sirina.
   margin-top 14px: parent .dropdown span ima visinu samo 22px (line-box),
   a <a> chevron ima 44px (padding hit area) — pa za 6px gap ispod chevrona
   treba 14px margin-top. Empirijski tested.
   max-height + overflow-y: scroll fallback ako meni ne staje u viewport. */
.post .post-heading .dropdown-menu.post-options,
.post .post-heading .dropdown-menu.post-privacy-menu {
  top: 100% !important;
  margin-top: 14px !important;
  left: auto !important;
  right: 0 !important;
  min-width: 240px !important;
  max-width: 260px !important;
  width: 260px !important;
  max-height: min(420px, calc(100vh - 120px)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* Kompaktnije stavke — bilo 44px min-height i 2-redne opise (~50px each = 350px za 7),
   sad 38px + tighter opise (~40px each = ~280px za 7). 20% kraci meni. */
.post .post-heading .dropdown-menu.post-options > li > div.pointer,
.post .post-heading .dropdown-menu.post-options > li > a {
  min-height: 38px !important;
  padding: 7px 12px !important;
  align-items: center !important;
}
.post .post-heading .dropdown-menu.post-options > li > div.pointer > div b,
.post .post-heading .dropdown-menu.post-options > li > div.pointer > div p,
.post .post-heading .dropdown-menu.post-options > li > a > div b,
.post .post-heading .dropdown-menu.post-options > li > a > div p {
  font-size: 12.5px;
  line-height: 1.25;
}
.post .post-heading .dropdown-menu.post-options > li > div.pointer > div p,
.post .post-heading .dropdown-menu.post-options > li > a > div p {
  margin: 1px 0 0 !important;
  font-size: 11.5px;
  opacity: 0.7;
}

/* Kad je dropdown otvoren, ukloni content-visibility: auto containment
   (inace paint containment clip-uje dropdown na granicu kartice). */
#posts > .post:has(.post-heading .dropdown.open),
.post.agro-post-card:has(.post-heading .dropdown.open) {
  position: relative;
  z-index: 60;
  content-visibility: visible;
  contain: none;
  overflow: visible;
}

/* Post meni — veći klik/touch target, jasan hover */
.post .post-heading .dropdown-menu.post-options > li > div.pointer,
.post .post-heading .dropdown-menu.post-options > li > a {
  min-height: 44px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}
.post .post-heading .dropdown-menu.post-options > li > a {
  display: flex;
  gap: 10px;
  color: inherit;
}
.post .post-heading .dropdown-menu.post-options > li > a:hover,
.post .post-heading .dropdown-menu.post-options > li > a:focus {
  color: inherit;
  text-decoration: none;
}

body.agro-night .post .post-heading .dropdown-menu {
  background: var(--agro-surface-card);
  border-color: var(--agro-border);
}

/* --- 13. Action bar (#wo_post_stat_button) — agro-tech dugmad --- */
#wo_post_stat_button .stat-item {
  color: var(--agro-text-secondary);
  background: var(--agro-surface-card);
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#wo_post_stat_button .stat-item:hover {
  background-color: var(--agro-primary-bg);
  color: var(--agro-primary);
}

#wo_post_stat_button .stat-item:active {
  background-color: rgba(46, 125, 50, 0.12);
}

#wo_post_stat_button .stat-item svg {
  color: var(--agro-text-muted);
  transition: color 0.15s ease;
}

#wo_post_stat_button .stat-item:hover svg {
  color: var(--agro-primary);
}

body.agro-night #wo_post_stat_button .stat-item {
  color: var(--agro-text-secondary);
  background: var(--agro-surface-card);
}

body.agro-night #wo_post_stat_button .stat-item:hover {
  background-color: var(--agro-primary-bg);
  color: var(--agro-primary-light);
}

/* --- 14. Reaction dugme: active stanja (agro zelena umesto plavo/roze) --- */
.wo-reaction .like-btn .active-like {
  color: var(--agro-primary);
}

.wo-reaction .like-btn .active-like svg {
  color: var(--agro-primary);
}

/* Reakcije zadržavaju originalne boje (love=crvena, haha=žuta, itd) */
/* Ali default Like i liked override-ujemo na agro zelenu */
.active-like {
  color: var(--agro-primary);
}

/* --- 15. Reactions popup box --- */
.reactions-box {
  border-radius: var(--agro-radius-lg);
  box-shadow: var(--agro-shadow-md);
  border: 1px solid var(--agro-border);
}

body.agro-night .reactions-box {
  background: var(--agro-surface-card);
  border-color: var(--agro-border);
}

/* --- 16. Post actions stat bar (likes/shares counts - gornja linija) --- */
.post .post-actions.pull-left .stat-item,
.post .post-actions.pull-right .stat-item {
  color: var(--agro-text-muted);
}

.post .post-actions .stat-item svg {
  color: var(--agro-text-muted);
}

/* --- 17. Comment section: combo footer dugmad (dopunski selektori) ---
   Glavni stilovi su u sekciji COMMENT TOOLBAR REDESIGN (~L7501).
   Ovi selektori pokrivaju .post context gde #wo_comment_combo nije prisutan. */
.post .comment_combo_footer .btn-file,
.post .comment_combo_footer .btngif {
  color: var(--agro-text-muted);
  transition: color var(--agro-transition-fast), transform 0.1s ease;
}

.post .comment_combo_footer .btn-file svg,
.post .comment_combo_footer .btngif svg {
  fill: none !important;
  stroke: currentColor;
}

.post .comment_combo_footer .btn-file:hover,
.post .comment_combo_footer .btngif:hover {
  color: var(--agro-primary);
  transform: scale(1.05);
}

.post .comment_combo_footer .sendbtn {
  color: #fff;
  background: var(--agro-primary);
  border-radius: 50%;
  transition: background var(--agro-transition-fast), transform 0.1s ease;
}

.post .comment_combo_footer .sendbtn:hover {
  background: var(--agro-primary-dark);
  transform: scale(1.08);
}

.post .comment_combo_footer .sendbtn svg {
  stroke: #fff;
  fill: none;
}

body.agro-night .post .comment_combo_footer .btn-file,
body.agro-night .post .comment_combo_footer .btngif {
  color: var(--agro-text-muted);
}

body.agro-night .post .comment_combo_footer .sendbtn {
  background: var(--agro-primary-light);
}

/* --- 18. Comment actions (like/reply ikonice unutar komentara) --- */
.comment .comment-options .comment-icons,
.comment .comment-options .pointer {
  color: var(--agro-text-muted);
  transition: color 0.15s ease;
}

.comment .comment-options .comment-icons:hover,
.comment .comment-options .pointer:hover {
  color: var(--agro-primary);
}

.comment .comment-options .comment-icons svg,
.comment .comment-options .pointer svg {
  transition: color 0.15s ease;
}

/* Active like u komentarima */
.comment .active-like {
  color: var(--agro-primary);
}

.comment .active-wonder {
  color: var(--agro-accent);
}

/* --- 19. Reply section stilizacija --- */
.comment-reply .wo_commreply_combo .textarea {
  background: var(--agro-surface-input);
  border: 1px solid var(--agro-border);
  color: var(--agro-text);
}

.comment-reply .wo_commreply_combo .textarea:focus {
  border-color: var(--agro-primary);
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.15);
}

.comment-reply .image-comment .btn-file {
  color: var(--agro-text-muted);
  transition: color 0.15s ease;
  padding: 2px 4px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
}

.comment-reply .image-comment .btn-file:hover {
  color: var(--agro-primary);
}

.comment-reply .image-comment .btn-file svg {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.comment-reply .image-comment .btn-file:hover svg {
  opacity: 1;
}

/* Reply send button — agro zeleni krug, identičan sa comment send */
.comment-reply .image-comment .btn.sendbtn {
  background: var(--agro-primary) !important;
  color: #fff !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  min-height: 28px;
  border-radius: 50% !important;
  border: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(46, 125, 50, 0.25);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
  margin-left: 4px;
}

.comment-reply .image-comment .btn.sendbtn:hover {
  background: var(--agro-primary-dark) !important;
  box-shadow: 0 3px 10px rgba(46, 125, 50, 0.35);
  transform: scale(1.1);
}

.comment-reply .image-comment .btn.sendbtn:active {
  transform: scale(0.95);
  box-shadow: 0 1px 3px rgba(46, 125, 50, 0.2);
}

.comment-reply .image-comment .btn.sendbtn svg {
  width: 13px !important;
  height: 13px !important;
  fill: none !important;
  color: #fff !important;
  stroke: #fff !important;
  opacity: 1 !important;
  margin: 0 !important;
}

body.agro-night .comment-reply .image-comment .btn.sendbtn {
  background: var(--agro-primary-light) !important;
}

body.agro-night .comment-reply .wo_commreply_combo .textarea {
  background: var(--agro-surface-input);
  border-color: var(--agro-border);
  color: var(--agro-text);
}

/* --- 20. View more comments/replies links --- */
.view-more-comments span,
.view-more-wrapper span,
.view-more-replies {
  color: var(--agro-text-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}

.view-more-comments span:hover,
.view-more-wrapper span:hover,
.view-more-replies:hover {
  color: var(--agro-primary);
}

.post-footer.post-comments {
  position: relative;
}

.post-comments .agro-comment-sort-toolbar.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.post-comments .agro-comment-sort-toolbar.page-margin {
  margin-top: 0;
  margin-bottom: 4px;
  padding-left: 0;
  padding-right: 0;
}

.agro-comment-sort-toolbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
  gap: 6px 10px;
  min-height: 0;
  padding: 0 0 4px;
}

.agro-comment-sort-toolbar__row--with-more,
.agro-comment-sort-toolbar__row:has(.agro-view-more-comments-link) {
  justify-content: space-between;
}

.agro-view-more-comments-link {
  align-self: center;
  padding-top: 2px;
}

.agro-comment-sort-toolbar__right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  margin-inline-start: auto;
  min-height: 26px;
}

.agro-comment-sort.order-by {
  float: none !important;
}

.agro-comment-sort--minimal.dropdown {
  display: inline-block;
}

.agro-comment-sort__btn.dropdown-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  min-height: 0 !important;
  height: auto !important;
  padding: 3px 6px !important;
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em;
  color: var(--agro-text-muted, #6b6b6b) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  vertical-align: middle;
  white-space: nowrap;
}

.agro-comment-sort__icon {
  flex-shrink: 0;
  opacity: 0.55;
}

.agro-comment-sort__label {
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agro-comment-sort__btn:hover,
.agro-comment-sort__btn:focus {
  color: var(--agro-text-secondary, #424242) !important;
  background: rgba(0, 0, 0, 0.05) !important;
  outline: none !important;
}

.agro-comment-sort__btn:focus-visible {
  outline: 2px solid var(--agro-primary, #2e7d32) !important;
  outline-offset: 1px !important;
}

.agro-comment-sort__chev {
  flex-shrink: 0;
  opacity: 0.45;
  margin-top: 1px;
}

.agro-comment-sort__btn:hover .agro-comment-sort__icon,
.agro-comment-sort__btn:hover .agro-comment-sort__chev {
  opacity: 0.85;
}

.agro-comment-sort .agro-comment-sort__menu.dropdown-menu {
  min-width: 9.5rem;
  padding: 4px 0;
  margin-top: 4px;
  font-size: 12px;
  border-radius: 10px;
  border: 1px solid var(--agro-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 10020;
}

.agro-comment-sort .agro-comment-sort__menu > li > a {
  padding: 6px 12px;
  color: var(--agro-text);
}

.agro-comment-sort__pulse {
  float: none !important;
  align-self: center;
}

body.agro-night .agro-comment-sort__btn.dropdown-toggle {
  color: var(--agro-text-muted, #a0a0a0) !important;
}

body.agro-night .agro-comment-sort__btn:hover,
body.agro-night .agro-comment-sort__btn:focus {
  color: var(--agro-text) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

body.agro-night .agro-comment-sort .agro-comment-sort__menu.dropdown-menu {
  background: var(--agro-surface-card);
  border-color: var(--agro-border);
}

/* --- 21. Share dropdown --- */
.post .share-dropdown .dropdown-menu {
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  box-shadow: var(--agro-shadow-md);
}

body.agro-night .post .share-dropdown .dropdown-menu {
  background: var(--agro-surface-card);
  border-color: var(--agro-border);
}

/* --- 22. Comment edit textarea --- */
.comment .comment-edit .edit-box {
  background: var(--agro-surface-input);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  color: var(--agro-text);
}

.comment .comment-edit .edit-box:focus {
  border-color: var(--agro-primary);
}

/* --- 23. GIF/Sticker popup --- */
.gif_post_comment,
.sticker_post_comment_innr,
.sticker_post_reply_innr {
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  box-shadow: var(--agro-shadow-sm);
}

body.agro-night .gif_post_comment,
body.agro-night .sticker_post_comment_innr,
body.agro-night .sticker_post_reply_innr {
  background: var(--agro-surface-card);
  border-color: var(--agro-border);
}

/* --- 24. Audio u publisheru / reels duplikat / komentari — MVP; video (#publisher-video) ponovo vidljiv --- */
/* Reels/music: skriven jer je duplikat video uploada; :has() skriva ceo wrapper */
.record-comment-audio,
[data-comment-rtime],
.comment-btn-wrapper .record-comment-audio,
#wo_comment_combo .comment_combo_footer .record-comment-audio,
#recordPostAudioWrapper,
#publisher-box-focus .sun_pub_more_items:has(#publisher-reels),
#publisher-box-focus .sun_pub_more_items:has(#publisher-music) {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* --- 24a. Dropdown caret u comment combo sekciji --- */
.post-commet-textarea.dropdown > .caret,
.post-commet-textarea.dropdown > a > .caret,
.post-commet-textarea .caret {
  display: none !important;
}

/* --- 25. Comment count badge — uklonjen stari override, koristi se .agro-comment-count --- */

/* --- 26. Boosted post indikator --- */
.post.boosted {
  border-color: var(--agro-primary);
}

/* --- 27. Reaction counter u dugmetu --- */
.agro-reaction-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--agro-text-secondary, #616161);
  margin-left: 4px;
  vertical-align: middle;
}
.wo-reaction-post .agro-reaction-count,
.wo-reaction-lightbox .agro-reaction-count {
  display: inline-block;
  min-width: 10px;
}

.wo-reaction-comment > .like-btn svg.feather,
.wo-reaction-replay > .like-btn svg.feather {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  display: inline-block;
}
.wo-reaction-comment .agro-comment-reaction-count,
.wo-reaction-replay .agro-comment-reaction-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--agro-text-secondary, #757575);
  margin-left: 3px;
  vertical-align: middle;
  line-height: 1;
}

/* --- 28. Reaction icon wrapper (comment/reply/JS) --- */
.agro-reaction-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
}
.agro-reaction-icon img {
  width: 18px;
  height: 18px;
}

/* --- Agro emoji picker (zamena za legacy /emoji/ HTML) --- */
.dropdown-menu.wo_emoji_post.publisher-box-emooji,
.dropdown-menu.wo_emoji_post[class*="emo-comment-container-"] {
  min-width: 272px;
  max-width: min(100vw - 24px, 300px);
  max-height: min(70vh, 320px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 6px 10px;
  border-radius: var(--agro-radius, 10px);
  border: 1px solid var(--agro-border, #e0e0e0);
  box-shadow: var(--agro-shadow-md, 0 4px 18px rgba(0, 0, 0, 0.08));
  background: var(--agro-surface, #fff);
}

.agro-emoji-picker__section {
  list-style: none;
  padding: 6px 6px 4px;
  margin: 0;
}

.agro-emoji-picker__block--classic {
  padding-top: 2px;
}

/* Razdvajanje legacy reda od agro sekcije (isti redosled kao /emoji/, drugačiji izgled) */
.agro-emoji-picker__block--classic + .agro-emoji-picker__section {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--agro-border, #e0e0e0);
}

body.agro-night .agro-emoji-picker__block--classic + .agro-emoji-picker__section {
  border-top-color: var(--agro-border, #424242);
}

.agro-emoji-picker__section:first-child {
  padding-top: 2px;
}

.agro-emoji-picker__label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--agro-text-secondary, #757575);
  line-height: 1.2;
}

.agro-emoji-picker__block {
  list-style: none;
  padding: 0 4px 8px;
  margin: 0;
}

.agro-emoji-picker__grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 2px;
}

.agro-emoji-picker__emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  min-width: 32px;
  min-height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.agro-emoji-picker__emoji:hover,
.agro-emoji-picker__emoji:focus {
  background: rgba(46, 125, 50, 0.08);
  outline: none;
}

.agro-emoji-picker__emoji:active {
  transform: scale(0.94);
}

body.agro-night .dropdown-menu.wo_emoji_post.publisher-box-emooji,
body.agro-night .dropdown-menu.wo_emoji_post[class*="emo-comment-container-"] {
  background: var(--agro-surface-card, #1e1e1e);
  border-color: var(--agro-border, #424242);
}

body.agro-night .agro-emoji-picker__label {
  color: var(--agro-text-secondary, #9e9e9e);
}

body.agro-night .agro-emoji-picker__emoji:hover,
body.agro-night .agro-emoji-picker__emoji:focus {
  background: rgba(129, 199, 132, 0.12);
}

@media (max-width: 480px) {
  .agro-emoji-picker__grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

/* --- Feed: sakriven WoWonder „Filtriraj objave” filter --- */
#filterby-post {
  display: none !important;
}

/* --- Sidebar: lock ikona za gated stavke (free tier) --- */
.agro-lock-icon {
  margin-left: 6px;
  vertical-align: middle;
  flex-shrink: 0;
  opacity: 0.7;
}
.agro-left-nav a:hover .agro-lock-icon {
  opacity: 1;
}

/* --- Entity list na create-page --- */
.agro-entity-list__items {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}
.agro-entity-list__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  margin-bottom: 6px;
}
.agro-entity-list__item--inactive {
  opacity: 0.6;
}
.agro-entity-list__name {
  font-weight: 500;
}
.agro-entity-list__type {
  color: #6B7280;
  font-size: 0.85em;
}
.agro-entity-list__badge--inactive {
  background: #FEF3C7;
  color: #92400E;
  font-size: 0.75em;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: auto;
}
.agro-entity-list__limit {
  color: #6B7280;
  font-size: 0.85em;
  margin-top: 4px;
}

/* --- Entity switcher u header dropdown-u --- */
.agro-entity-switcher-section {
  padding: 8px 16px !important;
}
.agro-entity-switcher__label {
  font-size: 0.8em;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.agro-entity-switcher__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}
.agro-entity-switcher__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9em;
  color: var(--agro-text);
  transition: background var(--agro-transition), color var(--agro-transition), transform var(--agro-transition);
}
.agro-entity-switcher__option svg {
  flex-shrink: 0;
  color: var(--agro-text-muted);
  transition: color var(--agro-transition);
}
.agro-entity-switcher__option:hover {
  background: var(--agro-primary-bg);
  color: var(--agro-primary-dark);
}
.agro-entity-switcher__option:hover svg {
  color: var(--agro-primary);
}
.agro-entity-switcher__option--active {
  background: color-mix(in srgb, var(--agro-primary) 12%, var(--agro-primary-bg));
  color: var(--agro-primary-dark);
  font-weight: 600;
}
.agro-entity-switcher__option--active svg {
  color: var(--agro-primary);
}
.agro-entity-switcher__option--inactive {
  opacity: 0.5;
  cursor: not-allowed;
}
.agro-entity-switcher__option input[type="radio"] {
  display: none;
}
.agro-entity-switcher__badge {
  background: #F3F4F6;
  color: #6B7280;
  font-size: 0.7em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: auto;
}
.agro-entity-switcher__badge--readonly {
  background: #FEF3C7;
  color: #92400E;
}
.agro-entity-switcher__option--readonly {
  color: #92400E;
}
.agro-entity-switcher__actions {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --- Add entity card (zamenjuje 2 stara linka "Dodaj gazdinstvo/firmu") ---
   Moderna, kompaktna, responsive kartica koja vodi na my-pages?openWizard=1.
   Vizual: dashed border + svetla pozadina, ikona u krugu, naslov + sub. Hover
   menja border u solid + lift. */
.agro-entity-switcher__add-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--agro-surface-card) 0%, var(--agro-primary-bg) 100%);
  border: 1.5px dashed color-mix(in srgb, var(--agro-primary) 32%, transparent);
  border-radius: 10px;
  color: var(--agro-primary-dark);
  text-decoration: none;
  transition: border-color var(--agro-transition), box-shadow var(--agro-transition), transform var(--agro-transition);
  cursor: pointer;
}
.agro-entity-switcher__add-card:hover,
.agro-entity-switcher__add-card:focus-visible {
  border-style: solid;
  border-color: var(--agro-primary);
  box-shadow: 0 4px 12px -3px rgba(46, 125, 50, 0.22);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--agro-primary-dark);
}
.agro-entity-switcher__add-card-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: var(--agro-primary);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px -1px rgba(46, 125, 50, 0.35);
  transition: transform var(--agro-transition);
}
/* Reset WoWonder default (stylesheet/style.css:332):
   `.navbar-default .dropdown-menu li a svg { margin:-3px 15px 0 2px }` —
   gurao bi naš + ikon van centra. */
.agro-entity-switcher__add-card-icon svg,
.navbar-default .dropdown-menu li a.agro-entity-switcher__add-card svg {
  display: block;
  flex-shrink: 0;
  margin: 0 !important;
  vertical-align: middle;
}
.agro-entity-switcher__add-card:hover .agro-entity-switcher__add-card-icon {
  transform: rotate(90deg);
}
.agro-entity-switcher__add-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.agro-entity-switcher__add-card-title {
  font-family: var(--agro-font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--agro-text);
  line-height: 1.2;
}
.agro-entity-switcher__add-card-sub {
  font-size: 11px;
  color: var(--agro-text-muted);
  line-height: 1.3;
}

/* Free user (gate) varijanta — amber tint umesto zelene */
.agro-entity-switcher__add-card--gate {
  background: linear-gradient(135deg, var(--agro-surface-card) 0%, #fff8e6 100%);
  border-color: color-mix(in srgb, #d97706 35%, transparent);
  color: #92400e;
}
.agro-entity-switcher__add-card--gate:hover,
.agro-entity-switcher__add-card--gate:focus-visible {
  border-color: #d97706;
  box-shadow: 0 4px 12px -3px rgba(217, 119, 6, 0.22);
  color: #92400e;
}
.agro-entity-switcher__add-card--gate .agro-entity-switcher__add-card-icon {
  background: #d97706;
  box-shadow: 0 2px 6px -1px rgba(217, 119, 6, 0.35);
}
.agro-entity-switcher__add-card--gate:hover .agro-entity-switcher__add-card-icon {
  transform: scale(1.05);
}

/* Mobile / uzak dropdown — manja kartica */
@media (max-width: 480px) {
  .agro-entity-switcher__add-card {
    padding: 10px 12px;
    gap: 10px;
  }
  .agro-entity-switcher__add-card-icon {
    width: 32px;
    height: 32px;
  }
  .agro-entity-switcher__add-card-icon svg {
    width: 16px;
    height: 16px;
  }
  .agro-entity-switcher__add-card-title {
    font-size: 13px;
  }
}
.agro-entity-switcher__add--gate:hover {
  background: #FEF3C7;
  color: #78350F;
}
.agro-entity-switcher__lock {
  margin-left: auto;
  opacity: 0.6;
}
.agro-entity-switcher__limit {
  font-size: 0.75em;
  color: #9CA3AF;
  margin-top: 4px;
  padding: 0 8px;
}
.agro-entity-switcher__limit-reached {
  font-size: 0.8em;
  color: #DC2626;
  padding: 4px 8px;
}
.agro-entity-switcher__empty {
  padding: 4px 8px;
}
.agro-entity-switcher__empty p {
  font-size: 0.85em;
  color: #6B7280;
  margin: 0;
}
.agro-entity-switcher__free-teaser {
  padding: 8px;
  background: linear-gradient(135deg, #FEF3C7 0%, #FFFBEB 100%);
  border-radius: 8px;
  text-align: center;
}
.agro-entity-switcher__free-teaser p {
  font-size: 0.82em;
  color: #78350F;
  margin: 0 0 8px;
}
.agro-entity-switcher__upgrade-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #2E7D32;
  color: #fff !important;
  border-radius: 6px;
  font-size: 0.82em;
  font-weight: 500;
  transition: background 0.2s;
  text-decoration: none !important;
}
.agro-entity-switcher__upgrade-btn:hover {
  background: #1B5E20;
}

/* ======================================================================
   21. ENTITY DASHBOARD — /pages (Moji Entiteti)
   ====================================================================== */

.agro-dashboard {
  padding: 0;
}

.agro-dashboard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
  background: var(--agro-surface-card, #fefcf9);
  border-bottom: 1px solid var(--agro-border, #e0d8c8);
  border-radius: 8px 8px 0 0;
}

.agro-dashboard__header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.agro-dashboard__title {
  font-family: var(--agro-font-heading, 'Roboto Slab', serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--agro-text, #1a2e1a);
  margin: 0;
  line-height: 1.3;
}

.agro-dashboard__counter {
  font-size: 14px;
  color: var(--agro-text-muted, #4a5e55);
}

.agro-dashboard__cta {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.agro-dashboard__progress {
  padding: 0 24px 16px;
  background: var(--agro-surface-card, #fefcf9);
}

.agro-dashboard__progress-bar {
  height: 6px;
  background: var(--agro-border, #e0d8c8);
  border-radius: 3px;
  overflow: hidden;
}

.agro-dashboard__progress-fill {
  height: 100%;
  background: var(--agro-primary, #2e7d32);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.agro-dashboard__grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px;
}

/* Empty state */
.agro-dashboard__empty {
  text-align: center;
  padding: 48px 24px;
}

.agro-dashboard__empty-icon {
  color: var(--agro-text-muted, #4a5e55);
  opacity: 0.4;
  margin-bottom: 16px;
}

.agro-dashboard__empty-title {
  font-family: var(--agro-font-heading, 'Roboto Slab', serif);
  font-size: 18px;
  color: var(--agro-text, #1a2e1a);
  margin: 0 0 8px;
}

.agro-dashboard__empty-text {
  font-size: 14px;
  color: var(--agro-text-muted, #4a5e55);
  margin: 0 0 20px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Entity Card */
.agro-entity-card {
  background: var(--agro-surface-card, #fefcf9);
  border: 1px solid var(--agro-border, #e0d8c8);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.agro-entity-card:hover {
  box-shadow: var(--agro-shadow-sm, 0 1px 3px rgba(46,125,50,0.08));
}

.agro-entity-card--current {
  border-color: var(--agro-primary, #2e7d32);
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(46,125,50,0.1);
}

.agro-entity-card--inactive {
  opacity: 0.65;
  background: var(--agro-surface-alt, #f5f0e8);
}

.agro-entity-card__top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 16px 12px;
  position: relative;
}

.agro-entity-card__avatar-link {
  flex-shrink: 0;
}

.agro-entity-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid var(--agro-border, #e0d8c8);
}

.agro-entity-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.agro-entity-card__name {
  font-family: var(--agro-font-heading, 'Roboto Slab', serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--agro-text, #1a2e1a);
  text-decoration: none;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agro-entity-card__name:hover {
  color: var(--agro-primary, #2e7d32);
}

.agro-entity-card__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: fit-content;
}

.agro-entity-card__badge--gazdinstvo {
  background: rgba(46,125,50,0.12);
  color: var(--agro-primary, #2e7d32);
}

.agro-entity-card__badge--firma {
  background: rgba(93,64,55,0.12);
  color: #5d4037;
}

.agro-entity-card__location {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--agro-text-secondary, #3a4e3a);
}

.agro-entity-card__location svg {
  color: var(--agro-text-muted, #4a5e55);
}

.agro-entity-card__subtitle {
  font-size: 13px;
  color: var(--agro-text-muted, #4a5e55);
}

.agro-entity-card__active-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--agro-primary, #2e7d32);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
}

.agro-entity-card__inactive-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #78909c;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
}

/* Stats row */
.agro-entity-card__stats {
  display: flex;
  gap: 0;
  padding: 0 16px;
  border-top: 1px solid var(--agro-border, #e0d8c8);
  border-bottom: 1px solid var(--agro-border, #e0d8c8);
}

.agro-entity-card__stat {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  font-size: 13px;
  color: var(--agro-text-secondary, #3a4e3a);
}

.agro-entity-card__stat:not(:last-child) {
  border-right: 1px solid var(--agro-border, #e0d8c8);
}

.agro-entity-card__stat svg {
  color: var(--agro-text-muted, #4a5e55);
  flex-shrink: 0;
}

.agro-entity-card__stat-value {
  font-weight: 700;
  color: var(--agro-text, #1a2e1a);
}

.agro-entity-card__stat-label {
  color: var(--agro-text-muted, #4a5e55);
}

/* Actions row */
.agro-entity-card__actions {
  display: flex;
  gap: 0;
  padding: 0;
}

.agro-entity-card__action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--agro-text-secondary, #3a4e3a);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  border-top: none;
  min-height: 44px;
}

.agro-entity-card__action:not(:last-child) {
  border-right: 1px solid var(--agro-border, #e0d8c8);
}

.agro-entity-card__action:hover {
  background: var(--agro-surface-alt, #f5f0e8);
  color: var(--agro-text, #1a2e1a);
  text-decoration: none;
}

.agro-entity-card__action--manage:hover {
  color: var(--agro-primary, #2e7d32);
}

.agro-entity-card__action--stats:hover {
  color: #1565c0;
}

.agro-entity-card__action--switch:hover {
  color: var(--agro-primary, #2e7d32);
  background: rgba(46,125,50,0.06);
}

.agro-entity-card__action--personal:hover {
  color: #5d4037;
}

.agro-entity-card__action--deactivate:hover {
  color: #c62828;
  background: rgba(198,40,40,0.04);
}

.agro-entity-card__action--reactivate:hover {
  color: var(--agro-primary, #2e7d32);
  background: rgba(46,125,50,0.06);
}

/* Footer */
.agro-entity-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--agro-surface-alt, #f5f0e8);
  font-size: 12px;
  color: var(--agro-text-muted, #4a5e55);
}

.agro-entity-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.agro-entity-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.agro-entity-card__dot--active {
  background: var(--agro-primary, #2e7d32);
}

.agro-entity-card__dot--inactive {
  background: #78909c;
}

/* Empty slot CTA */
.agro-dashboard__empty-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  border: 2px dashed var(--agro-border, #e0d8c8);
  border-radius: 8px;
  color: var(--agro-text-muted, #4a5e55);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.agro-dashboard__empty-slot:hover {
  border-color: var(--agro-primary, #2e7d32);
  background: rgba(46,125,50,0.03);
  color: var(--agro-primary, #2e7d32);
  text-decoration: none;
}

.agro-dashboard__empty-slot svg {
  opacity: 0.5;
}

.agro-dashboard__empty-slot:hover svg {
  opacity: 1;
}

.agro-dashboard__empty-slot-text {
  font-size: 15px;
  font-weight: 600;
}

.agro-dashboard__empty-slot-sub {
  font-size: 13px;
  opacity: 0.7;
}

/* Summary bar */
.agro-dashboard__summary {
  display: flex;
  gap: 0;
  margin: 0 24px 20px;
  background: var(--agro-surface-card, #fefcf9);
  border: 1px solid var(--agro-border, #e0d8c8);
  border-radius: 8px;
  overflow: hidden;
}

.agro-dashboard__summary-stat {
  flex: 1;
  text-align: center;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.agro-dashboard__summary-stat:not(:last-child) {
  border-right: 1px solid var(--agro-border, #e0d8c8);
}

.agro-dashboard__summary-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--agro-primary, #2e7d32);
  font-family: var(--agro-font-heading, 'Roboto Slab', serif);
}

.agro-dashboard__summary-label {
  font-size: 12px;
  color: var(--agro-text-muted, #4a5e55);
}

/* ======================================================================
   21b. ENTITY DASHBOARD — Responsive
   ====================================================================== */

@media (max-width: 767px) {
  .agro-dashboard__header {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    align-items: flex-start;
  }

  .agro-dashboard__cta {
    width: 100%;
    justify-content: center;
  }

  .agro-dashboard__progress {
    padding: 0 16px 12px;
  }

  .agro-dashboard__grid {
    padding: 12px 16px;
    gap: 12px;
  }

  .agro-entity-card__top {
    padding: 12px;
  }

  .agro-entity-card__avatar {
    width: 48px;
    height: 48px;
  }

  .agro-entity-card__stats {
    padding: 0 12px;
    flex-wrap: wrap;
  }

  .agro-entity-card__stat {
    padding: 8px 6px;
    font-size: 12px;
    gap: 4px;
  }

  .agro-entity-card__stat-label {
    display: none;
  }

  .agro-entity-card__actions {
    flex-wrap: wrap;
  }

  .agro-entity-card__action {
    font-size: 12px;
    padding: 10px 6px;
    min-height: 48px;
  }

  .agro-entity-card__action span {
    display: none;
  }

  .agro-entity-card__footer {
    padding: 8px 12px;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }

  .agro-dashboard__summary {
    margin: 0 16px 16px;
    flex-direction: column;
  }

  .agro-dashboard__summary-stat:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--agro-border, #e0d8c8);
  }

  .agro-dashboard__summary-stat {
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 16px;
  }
}

@media (max-width: 479px) {
  .agro-entity-card__active-badge,
  .agro-entity-card__inactive-badge {
    font-size: 10px;
    padding: 2px 8px;
  }

  .agro-entity-card__name {
    font-size: 15px;
  }
}

/* ======================================================================
   22. CREATE-PAGE WIZARD — /create-page (Stepper Form)
   ====================================================================== */

/* Entity pills (existing entities) */
.agro-wizard__entities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--agro-border, #e0d8c8);
  margin-bottom: 20px;
}

.agro-wizard__entity-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 16px;
  background: rgba(46,125,50,0.1);
  color: var(--agro-primary, #2e7d32);
}

.agro-wizard__entity-pill--firma {
  background: rgba(93,64,55,0.1);
  color: #5d4037;
}

.agro-wizard__entity-pill--inactive {
  opacity: 0.5;
  text-decoration: line-through;
}

.agro-wizard__entity-counter {
  font-size: 13px;
  font-weight: 700;
  color: var(--agro-text-muted, #4a5e55);
  margin-left: auto;
}

/* Progress bar */
.agro-wizard__progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 20px 16px;
  margin-bottom: 8px;
}

.agro-wizard__progress-step {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
}

.agro-wizard__progress-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: var(--agro-border, #e0d8c8);
  color: var(--agro-text-muted, #4a5e55);
  transition: background 0.2s ease, color 0.2s ease;
}

.agro-wizard__progress-step--active .agro-wizard__progress-num {
  background: var(--agro-primary, #2e7d32);
  color: #fff;
}

.agro-wizard__progress-step--done .agro-wizard__progress-num {
  background: var(--agro-primary, #2e7d32);
  color: #fff;
  opacity: 0.7;
}

.agro-wizard__progress-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--agro-text-muted, #4a5e55);
}

.agro-wizard__progress-step--active .agro-wizard__progress-label {
  color: var(--agro-text, #1a2e1a);
  font-weight: 600;
}

.agro-wizard__progress-step--done .agro-wizard__progress-label {
  color: var(--agro-primary, #2e7d32);
}

.agro-wizard__progress-line {
  flex: 1;
  height: 2px;
  background: var(--agro-border, #e0d8c8);
  margin: 0 12px;
  max-width: 80px;
}

/* Steps */
.agro-wizard__step {
  display: none;
  padding: 4px 0 0;
}

.agro-wizard__step--visible {
  display: block;
}

.agro-wizard__step-title {
  font-family: var(--agro-font-heading, 'Roboto Slab', serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--agro-text, #1a2e1a);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--agro-border, #e0d8c8);
}

/* Type selector cards */
.agro-type-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.agro-type-selector__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  border: 2px solid var(--agro-border, #e0d8c8);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  text-align: center;
}

.agro-type-selector__card:hover {
  border-color: var(--agro-text-muted, #4a5e55);
}

.agro-type-selector__card--selected.agro-type-selector__card--gazdinstvo {
  border-color: var(--agro-primary, #2e7d32);
  background: rgba(46,125,50,0.04);
  box-shadow: 0 0 0 3px rgba(46,125,50,0.12);
}

.agro-type-selector__card--selected.agro-type-selector__card--firma {
  border-color: #5d4037;
  background: rgba(93,64,55,0.04);
  box-shadow: 0 0 0 3px rgba(93,64,55,0.12);
}

.agro-type-selector__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.agro-type-selector__icon {
  color: var(--agro-text-muted, #4a5e55);
  transition: color 0.2s ease;
}

.agro-type-selector__card--selected .agro-type-selector__icon {
  color: var(--agro-primary, #2e7d32);
}

.agro-type-selector__card--selected.agro-type-selector__card--firma .agro-type-selector__icon {
  color: #5d4037;
}

.agro-type-selector__label {
  font-family: var(--agro-font-heading, 'Roboto Slab', serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--agro-text, #1a2e1a);
}

.agro-type-selector__desc {
  font-size: 13px;
  color: var(--agro-text-muted, #4a5e55);
}

/* Form fields */
.agro-wizard__field {
  margin-bottom: 16px;
}

.agro-wizard__field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--agro-text, #1a2e1a);
  margin-bottom: 6px;
}

.agro-wizard__required {
  color: #c62828;
}

.agro-wizard__hint {
  display: block;
  font-size: 12px;
  color: #6b7c6b;
  margin-top: 4px;
  line-height: 1.4;
}

.agro-wizard__error {
  display: none;
  font-size: 12px;
  color: #c62828;
  margin-top: 4px;
  line-height: 1.4;
}

.agro-wizard__field--has-error .form-control,
.agro-wizard__field--has-error .input-group .form-control {
  border-color: #c62828;
}

.agro-wizard__field--has-error .agro-wizard__error {
  display: block;
}

.agro-wizard__field--has-error .agro-wizard__hint {
  display: none;
}

.agro-wizard__field-row {
  display: flex;
  gap: 16px;
}

.agro-wizard__field--half {
  flex: 1;
  min-width: 0;
}

.agro-wizard__field-row--thirds {
  display: flex;
  gap: 12px;
}

.agro-wizard__field-row--thirds .agro-wizard__field {
  flex: 1;
  min-width: 0;
}

/* Checkbox grid */
.agro-wizard__checkbox-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 16px;
}

.agro-wizard__checkbox-grid .agro-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  padding: 4px 0;
  cursor: pointer;
}

/* Navigation */
.agro-wizard__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  margin-top: 20px;
  border-top: 1px solid var(--agro-border, #e0d8c8);
}

.agro-wizard__btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Summary */
.agro-wizard__summary {
  margin-top: 24px;
  padding: 16px;
  background: var(--agro-surface-alt, #f5f0e8);
  border-radius: 8px;
  border: 1px solid var(--agro-border, #e0d8c8);
}

.agro-wizard__summary-title {
  font-family: var(--agro-font-heading, 'Roboto Slab', serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--agro-text, #1a2e1a);
  margin: 0 0 12px;
}

.agro-wizard__summary-row {
  font-size: 14px;
  color: var(--agro-text-secondary, #3a4e3a);
  padding: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.agro-wizard__summary-row:last-child {
  border-bottom: none;
}

.agro-wizard__summary-row strong {
  color: var(--agro-text, #1a2e1a);
  margin-right: 4px;
}

/* Category tree (hierarchical checkboxes) */
.agro-wizard__category-tree {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
}

.agro-wizard__category-group {
  break-inside: avoid;
}

.agro-checkbox-label--root {
  font-weight: 600;
  font-size: 14px;
  color: var(--agro-text, #1a2e1a);
}

.agro-checkbox-label--root i.fa {
  color: var(--agro-primary, #2d5016);
  margin-right: 4px;
  width: 16px;
  text-align: center;
}

/* Inline SVG paradajz (povrtarstvo) — FA nema ikonu povrća */
.agro-checkbox-label--root .agro-wizard__root-icon--paradajz {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 4px;
  width: 16px;
  height: 16px;
  line-height: 0;
}

.agro-checkbox-label--root .agro-wizard__root-icon--paradajz svg {
  display: block;
  width: 16px;
  height: 16px;
}

.agro-wizard__category-subs {
  padding-left: 24px;
  margin-top: 2px;
  margin-bottom: 6px;
}

.agro-checkbox-label--sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--agro-text-secondary, #3a4e3a);
  padding: 2px 0;
}

/* Certification custom field */
.agro-wizard__cert-custom {
  margin-top: 8px;
}

.agro-wizard__cert-custom input {
  max-width: 400px;
}

/* ======================================================================
   22b. CREATE-PAGE WIZARD — Responsive
   ====================================================================== */

@media (max-width: 767px) {
  .agro-wizard__progress {
    padding: 16px 8px;
  }

  .agro-wizard__progress-label {
    display: none;
  }

  .agro-wizard__progress-line {
    max-width: 40px;
    margin: 0 8px;
  }

  .agro-type-selector {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .agro-type-selector__card {
    padding: 16px;
    flex-direction: row;
    gap: 12px;
    text-align: left;
  }

  .agro-type-selector__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }

  .agro-wizard__field-row {
    flex-direction: column;
    gap: 0;
  }

  .agro-wizard__field-row--thirds {
    flex-direction: column;
    gap: 0;
  }

  .agro-wizard__checkbox-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .agro-wizard__category-tree {
    grid-template-columns: 1fr;
  }

  .agro-wizard__nav {
    flex-direction: column-reverse;
    gap: 12px;
  }

  .agro-wizard__nav .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 479px) {
  .agro-wizard__checkbox-grid {
    grid-template-columns: 1fr;
  }

  .agro-type-selector__desc {
    display: none;
  }
}

/* ==========================================================================
   23. MY PAGES — dashboard entiteta (link1=pages)
   ========================================================================== */
.agro-dashboard-head__title-row {
  display: flex;
  align-items: flex-start;
  gap: var(--agro-space-md);
  flex-wrap: wrap;
}

.agro-dashboard-head__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--agro-radius);
  background: var(--agro-primary-bg);
  color: var(--agro-primary-dark);
}

.agro-dashboard-head__text {
  flex: 1;
  min-width: 200px;
}

.agro-dashboard-head__kicker {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--agro-text-muted);
  margin-bottom: 4px;
}

.agro-dashboard-head__h1 {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--agro-text);
  line-height: 1.25;
}

.agro-dashboard-head__lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--agro-text-secondary);
  max-width: 42em;
}

.agro-dashboard-head__actions {
  width: 100%;
  margin-top: var(--agro-space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--agro-space-sm);
}

.agro-dashboard-head__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.agro-dashboard-head__limit {
  font-size: 13px;
  color: var(--agro-warning);
  font-weight: 600;
}

.agro-entity-dashboard-wrap .agro-empty-state {
  margin: var(--agro-space-lg) 0;
}

.agro-entity-dashboard__banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--agro-space-md);
  padding: var(--agro-space-md) var(--agro-space-lg);
  margin-bottom: var(--agro-space-lg);
  border-radius: var(--agro-radius-lg);
  border: var(--agro-border-width) solid var(--agro-border);
  background: linear-gradient(135deg, var(--agro-surface-card) 0%, var(--agro-primary-bg) 100%);
  box-shadow: var(--agro-shadow-sm);
}

.agro-entity-dashboard__banner-text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--agro-text-secondary);
  flex: 1;
  min-width: 220px;
}

.agro-entity-dashboard__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: var(--agro-space-md);
}

.agro-entity-dashboard__count {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--agro-primary-dark);
}

.agro-entity-dashboard__meta-label {
  font-size: 13px;
  color: var(--agro-text-muted);
}

.agro-entity-dashboard__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--agro-space-lg);
}

.agro-entity-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--agro-radius-lg);
  border: var(--agro-border-width) solid var(--agro-border);
  background: var(--agro-surface-card);
  box-shadow: var(--agro-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--agro-transition), transform var(--agro-transition);
}

.agro-entity-card:hover {
  box-shadow: var(--agro-shadow-md);
}

.agro-entity-card--active {
  border-color: var(--agro-primary);
  box-shadow: var(--agro-shadow-md);
}

.agro-entity-card--inactive {
  opacity: 0.92;
}

.agro-entity-card__cover {
  height: 72px;
  background-size: cover;
  background-position: center;
}

.agro-entity-card__cover--placeholder {
  background: linear-gradient(120deg, var(--agro-primary-bg), var(--agro-surface-alt));
}

.agro-entity-card__body {
  position: relative;
  padding: var(--agro-space-md) var(--agro-space-lg) var(--agro-space-lg);
  padding-top: 0;
}

.agro-entity-card__avatar-wrap {
  margin-top: -36px;
  margin-bottom: var(--agro-space-sm);
}

.agro-entity-card__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid var(--agro-surface-card);
  object-fit: cover;
  background: var(--agro-surface);
}

.agro-entity-card__avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--agro-primary-dark);
  background: var(--agro-primary-bg);
}

.agro-entity-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.agro-entity-card__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--agro-text);
  line-height: 1.3;
  flex: 1 1 100%;
}

.agro-entity-card__slug {
  margin: 4px 0 var(--agro-space-sm);
  font-size: 13px;
  color: var(--agro-text-muted);
}

.agro-entity-card__pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  line-height: 1.2;
}

.agro-entity-card__pill--on {
  background: rgba(46, 125, 50, 0.12);
  color: var(--agro-primary-dark);
}

.agro-entity-card__pill--off {
  background: rgba(120, 144, 156, 0.2);
  color: var(--agro-text-secondary);
}

.agro-entity-card__stats {
  display: flex;
  gap: var(--agro-space-lg);
  margin: 0 0 var(--agro-space-sm);
  padding: var(--agro-space-sm) 0;
  border-top: 1px solid var(--agro-border);
  border-bottom: 1px solid var(--agro-border);
}

.agro-entity-card__stat dt {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--agro-text-muted);
}

.agro-entity-card__stat dd {
  margin: 2px 0 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--agro-text);
}

.agro-entity-card__loc {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--agro-text-secondary);
  line-height: 1.4;
}

.agro-entity-card__loc svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--agro-primary);
}

.agro-entity-card__extra {
  margin: 0 0 var(--agro-space-md);
  font-size: 13px;
  color: var(--agro-text-secondary);
  line-height: 1.4;
}

.agro-entity-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--agro-space-sm);
}

.agro-entity-card__btn {
  flex: 1 1 auto;
  min-width: 120px;
  justify-content: center;
}

@media (max-width: 767px) {
  .agro-entity-dashboard__grid {
    grid-template-columns: 1fr;
  }

  .agro-entity-card__actions {
    flex-direction: column;
  }

  .agro-entity-card__btn {
    width: 100%;
  }
}

/* ==========================================================================
   Entity Badge — gazdinstvo/firma oznaka na postovima
   ========================================================================== */
.agro-entity-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 2px 8px;
  border-radius: 10px;
  vertical-align: middle;
  margin-left: 4px;
  letter-spacing: 0.02em;
}

.agro-entity-badge--gazdinstvo {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.agro-entity-badge--firma {
  background-color: #e3f2fd;
  color: #1565c0;
}

/* AgroSocial: Notification entity filter tabs */
.agro-notif-filter {
  padding: 6px 10px;
  border-bottom: 1px solid #e8e8e8;
  background: #fafafa;
}
.agro-notif-filter__tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.agro-notif-filter__tabs::-webkit-scrollbar {
  display: none;
}
.agro-notif-filter__tab {
  flex-shrink: 0;
  padding: 4px 10px;
  border: 1px solid #ddd;
  border-radius: 16px;
  background: #fff;
  color: #555;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  line-height: 1.4;
}
.agro-notif-filter__tab:hover {
  background: #f0f0f0;
  border-color: #bbb;
}
.agro-notif-filter__tab--active {
  background: #2e7d32;
  color: #fff;
  border-color: #2e7d32;
}
.agro-notif-filter__tab--active:hover {
  background: #256829;
  border-color: #256829;
}

/* Entity action buttons — shared */
.agro-entity-follow-btn,
.agro-network-btn {
  display: inline-block;
  margin-left: 4px;
}
.agro-entity-follow-btn button,
.agro-network-btn button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.agro-entity-follow-btn svg,
.agro-network-btn svg {
  vertical-align: middle;
}

/* Entity follow (jednosmerno praćenje) */
.agro-entity-follow--following {
  background: #1565c0 !important;
  color: #fff !important;
  border-color: #1565c0 !important;
}
.agro-entity-follow--following:hover {
  background: #c62828 !important;
  border-color: #c62828 !important;
}

/* Entity networking (umrežavanje — bidirekciono) */
.agro-network-btn-connected {
  background: #2e7d32 !important;
  color: #fff !important;
  border-color: #2e7d32 !important;
}
.agro-network-btn-connected:hover {
  background: #c62828 !important;
  border-color: #c62828 !important;
}
.agro-network-btn-pending {
  color: #fff !important;
}
.agro-network-btn-accept {
  color: #fff !important;
}

/* ═══ Offer Feed Card (story/includes/offer.phtml) ═══ */
.agro-offer-feed {
  border-radius: var(--agro-radius);
  border: 1px solid var(--agro-border);
  overflow: hidden;
  background: var(--agro-surface-card);
  margin-top: 4px;
}
.agro-offer-feed__link {
  display: flex;
  text-decoration: none;
  color: inherit;
}
.agro-offer-feed__link:hover {
  text-decoration: none;
  color: inherit;
}
.agro-offer-feed__link:hover .agro-offer-feed__cta {
  color: var(--agro-primary);
}
.agro-offer-feed__image {
  position: relative;
  flex: 0 0 220px;
  min-height: 160px;
  overflow: hidden;
  background: var(--agro-surface-alt);
}
.agro-offer-feed__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.agro-offer-feed__status {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 10px;
  border-radius: var(--agro-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
}
.agro-offer-feed__status--sold {
  background: var(--agro-danger);
}
.agro-offer-feed__status--expired {
  background: var(--agro-text-muted);
}
.agro-offer-feed__body {
  flex: 1;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.agro-offer-feed__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--agro-text);
  line-height: 1.35;
}
.agro-offer-feed__price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--agro-primary);
}
.agro-offer-feed__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.agro-offer-feed__pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--agro-radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--agro-surface-alt);
  color: var(--agro-text-secondary);
}
.agro-offer-feed__pill--novo {
  background: var(--agro-primary-bg);
  color: var(--agro-primary);
}
.agro-offer-feed__pill--polovno {
  background: var(--agro-surface-alt);
  color: var(--agro-brown-light);
}
.agro-offer-feed__loc {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  color: var(--agro-text-muted);
}
.agro-offer-feed__cta {
  margin-top: auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--agro-primary-light);
  transition: color 0.15s;
}

/* Responsive: stack vertically on mobile */
@media (max-width: 575.98px) {
  .agro-offer-feed__link {
    flex-direction: column;
  }
  .agro-offer-feed__image {
    flex: none;
    max-height: 200px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   FAZA 8.5 — Offer Wizard (.agro-wizard__*)
   Sticky header (progress) + step content + sticky footer (actions)
   Spec § 4.2 Korak 1-5.
   ════════════════════════════════════════════════════════════════════════════ */

.agro-wizard {
  --wizard-step-pad: 24px;
  --wizard-gap: 16px;
  /* Legacy WoWonder CSS sets html { font-size: 10px }. Fix base tako da em jedinice
     ispod .agro-wizard racunaju od 16px umesto 10px — spreci 9px tekst. */
  font-size: 16px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--agro-surface);
  color: var(--agro-text);
}
/* Bootstrap / WoWonder globalno postavljaju label { font-size: 13px }.
   Prisili sve wizard label elemente da naslede roditeljsku (16px) bazu. */
.agro-wizard label,
.agro-wizard .agro-wizard__cat-card,
.agro-wizard .agro-wizard__check,
.agro-wizard .agro-wizard__radio,
.agro-wizard .agro-wizard__label {
  font-size: 1em;
}
.agro-wizard__body {
  flex: 1 1 auto;
  padding: calc(72px + 16px) 0 calc(80px + 16px);
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}

/* ── Progress header (sticky top) ────────────────────────────────────────── */
.agro-wizard__progress {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--agro-surface-card);
  border-bottom: 1px solid var(--agro-border);
  box-shadow: var(--agro-shadow-sm);
}
.agro-wizard__progress-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}
.agro-wizard__close {
  width: 36px;
  height: 36px;
  border-radius: var(--agro-radius);
  border: 1px solid var(--agro-border);
  background: var(--agro-surface);
  color: var(--agro-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.agro-wizard__close:hover {
  background: var(--agro-surface-alt);
  color: var(--agro-text);
}
.agro-wizard__progress-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.agro-wizard__progress-text {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--agro-text);
}
.agro-wizard__autosave {
  font-size: 0.72em;
  color: var(--agro-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.agro-wizard__autosave--pending { color: var(--agro-warning); }
.agro-wizard__autosave-icon { display: inline-flex; }
.agro-wizard__progress-bar {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  grid-column: 1 / -1;
}
.agro-wizard__progress-bar > li {
  flex: 1;
  display: flex;
}
.agro-wizard__step-label {
  font-weight: 500;
  color: var(--agro-text-secondary);
}
.agro-wizard__dot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
  border-radius: var(--agro-radius-sm);
  background: transparent;
  border: 0;
  color: var(--agro-text-muted);
  font: inherit;
  cursor: default;
  width: 100%;
}
.agro-wizard__dot:disabled { cursor: not-allowed; }
.agro-wizard__dot-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--agro-surface-alt);
  border: 1px solid var(--agro-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75em;
  font-weight: 600;
}
.agro-wizard__dot-label {
  font-size: 0.7em;
  text-align: center;
  line-height: 1.1;
}
.agro-wizard__dot--completed { color: var(--agro-primary-dark); }
.agro-wizard__dot--completed .agro-wizard__dot-num {
  background: var(--agro-primary);
  border-color: var(--agro-primary);
  color: #fff;
}
.agro-wizard__dot--active { color: var(--agro-text); }
.agro-wizard__dot--active .agro-wizard__dot-num {
  background: var(--agro-primary-bg);
  border-color: var(--agro-primary);
  color: var(--agro-primary-dark);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--agro-primary) 20%, transparent);
}
.agro-wizard__dot--clickable { cursor: pointer; }
.agro-wizard__dot--clickable:hover .agro-wizard__dot-num {
  background: var(--agro-primary-soft);
}

/* ── Step container ──────────────────────────────────────────────────────── */
.agro-wizard__step {
  display: block; /* override stari pattern na liniji 13298 koji ima display:none */
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-lg);
  padding: var(--wizard-step-pad);
  margin: 0 16px;
  box-shadow: var(--agro-shadow-sm);
}
.agro-wizard__step[hidden] { display: none; }
.agro-wizard__step-head { margin-bottom: 20px; }
.agro-wizard__step-heading {
  font-size: 1.25em;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--agro-text);
}
.agro-wizard__step-help {
  font-size: 0.85em;
  color: var(--agro-text-secondary);
  margin: 0;
}

/* ── Form primitives ─────────────────────────────────────────────────────── */
.agro-wizard__group { margin-bottom: var(--wizard-gap); }
.agro-wizard__label {
  display: block;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--agro-text);
  margin-bottom: 6px;
}
.agro-wizard__req {
  color: var(--agro-error);
  margin-left: 2px;
}
.agro-wizard__input,
.agro-wizard__textarea,
.agro-wizard__select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  background: var(--agro-surface);
  color: var(--agro-text);
  font-size: 0.95em;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.agro-wizard__input:focus,
.agro-wizard__textarea:focus,
.agro-wizard__select:focus {
  outline: none;
  border-color: var(--agro-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--agro-primary) 18%, transparent);
}
.agro-wizard__input--error,
.agro-wizard__textarea.agro-wizard__input--error {
  border-color: var(--agro-error);
}
.agro-wizard__input--error:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--agro-error) 18%, transparent);
}
.agro-wizard__textarea { resize: vertical; min-height: 96px; }
.agro-wizard__textarea--small { min-height: 48px; }
.agro-wizard__input-suffix {
  position: relative;
  display: flex;
  align-items: center;
}
.agro-wizard__input-suffix .agro-wizard__input { padding-right: 56px; }
.agro-wizard__suffix {
  position: absolute;
  right: 12px;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--agro-text-muted);
  pointer-events: none;
}
.agro-wizard__field-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  gap: 8px;
}
.agro-wizard__hint {
  font-size: 0.75em;
  color: var(--agro-text-muted);
}
.agro-wizard__counter {
  font-size: 0.75em;
  color: var(--agro-text-muted);
  font-variant-numeric: tabular-nums;
}
.agro-wizard__error {
  display: block;
  font-size: 0.78em;
  color: var(--agro-error);
  margin-top: 4px;
}
.agro-wizard__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 0.9em;
  cursor: pointer;
  color: var(--agro-text);
}
.agro-wizard__check input[type="checkbox"] { accent-color: var(--agro-primary); width: 18px; height: 18px; }
.agro-wizard__check--inline { padding: 4px 0; }
.agro-wizard__check--terms { align-items: flex-start; }
.agro-wizard__check--terms a { color: var(--agro-primary); text-decoration: underline; }
.agro-wizard__radio-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.agro-wizard__radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-pill);
  background: var(--agro-surface);
  cursor: pointer;
  font-size: 0.9em;
  transition: background 0.15s, border-color 0.15s;
}
.agro-wizard__radio input[type="radio"] { accent-color: var(--agro-primary); margin: 0; }
.agro-wizard__radio:has(input:checked) {
  background: var(--agro-primary-bg);
  border-color: var(--agro-primary);
  color: var(--agro-primary-dark);
}
.agro-wizard__fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--wizard-gap);
}
.agro-wizard__fieldset--inline { margin-top: 8px; }
.agro-wizard__legend {
  font-size: 0.85em;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--agro-text);
}
.agro-wizard__grid { display: grid; gap: 12px; }
.agro-wizard__grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── Korak 1: Category grid ──────────────────────────────────────────────── */
.agro-wizard__prefill { margin-bottom: 16px; }
.agro-wizard__cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.agro-wizard__cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  border: 2px solid var(--agro-border);
  border-radius: var(--agro-radius-lg);
  background: var(--agro-surface);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.agro-wizard__cat-card:hover {
  border-color: var(--agro-primary-light);
  background: var(--agro-surface-alt);
}
.agro-wizard__cat-card--selected {
  border-color: var(--agro-primary);
  background: var(--agro-primary-bg);
}
.agro-wizard__cat-radio {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  z-index: 2;
}
.agro-wizard__cat-icon {
  color: var(--agro-primary);
  pointer-events: none;
}
.agro-wizard__cat-name {
  font-size: 0.9em;
  font-weight: 600;
  color: var(--agro-text);
  pointer-events: none;
}
.agro-wizard__cat-meta {
  font-size: 0.72em;
  color: var(--agro-text-muted);
  pointer-events: none;
}

/* ── Korak 3: Image dropzone + grid ──────────────────────────────────────── */
.agro-wizard__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  border: 2px dashed var(--agro-border-strong);
  border-radius: var(--agro-radius-lg);
  background: var(--agro-surface-alt);
  color: var(--agro-text-secondary);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.agro-wizard__dropzone:hover,
.agro-wizard__dropzone:focus-visible {
  border-color: var(--agro-primary);
  background: var(--agro-primary-bg);
  outline: none;
}
.agro-wizard__dropzone--dragging {
  border-color: var(--agro-primary);
  background: var(--agro-primary-bg);
}
.agro-wizard__dropzone-title {
  font-size: 0.95em;
  font-weight: 600;
  margin: 0;
  color: var(--agro-text);
}
.agro-wizard__dropzone-hint {
  font-size: 0.78em;
  margin: 0;
}
.agro-wizard__file-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0);
  overflow: hidden;
}
.agro-wizard__image-meta {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0;
}
.agro-wizard__image-counter {
  font-size: 0.78em;
  color: var(--agro-text-muted);
}
.agro-wizard__image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.agro-wizard__image-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--agro-radius);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--agro-surface-alt);
  cursor: grab;
}
.agro-wizard__image-item:active { cursor: grabbing; }
.agro-wizard__image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.agro-wizard__image-item--primary { border-color: var(--agro-primary); }
.agro-wizard__image-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--agro-primary);
  color: #fff;
  font-size: 0.65em;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--agro-radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.agro-wizard__image-action {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.agro-wizard__image-action:hover { background: rgba(0, 0, 0, 0.85); }
.agro-wizard__image-action--primary { top: 4px; right: 4px; }
.agro-wizard__image-action--remove { bottom: 4px; right: 4px; }

/* ── Korak 3: "Nemam slike" toggle + banner ─────────────────────────────── */
.agro-wizard__no-images-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  background: var(--agro-surface);
  cursor: pointer;
  font-size: 0.85em;
  color: var(--agro-text-secondary);
  transition: border-color 0.15s, background 0.15s;
}
.agro-wizard__no-images-toggle:hover {
  border-color: var(--agro-primary);
  background: var(--agro-primary-bg);
}
.agro-wizard__no-images-toggle input[type="checkbox"] {
  margin: 0;
  accent-color: var(--agro-primary);
  cursor: pointer;
}
.agro-wizard__no-images-banner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--agro-warning-border, #e5c07b);
  border-radius: var(--agro-radius);
  background: var(--agro-warning-bg, #fff8e6);
  color: var(--agro-text);
}
.agro-wizard__no-images-banner[hidden] { display: none; }
.agro-wizard__no-images-banner svg {
  color: var(--agro-warning, #b8860b);
  margin-top: 2px;
}
.agro-wizard__no-images-banner strong {
  display: block;
  font-size: 0.9em;
  margin-bottom: 2px;
}
.agro-wizard__no-images-banner p {
  margin: 0;
  font-size: 0.8em;
  color: var(--agro-text-secondary);
  line-height: 1.4;
}
.agro-wizard__images-area[hidden] { display: none; }

/* ── Korak 4: Premium promo box ──────────────────────────────────────────── */
.agro-wizard__promo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 14px;
  margin-top: var(--wizard-gap);
  border: 1px solid var(--agro-warning);
  border-radius: var(--agro-radius);
  background: color-mix(in srgb, var(--agro-warning) 8%, var(--agro-surface));
}
.agro-wizard__promo-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--agro-warning);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.agro-wizard__promo-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.95em;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--agro-text);
}
.agro-wizard__promo-price {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--agro-warning);
  background: color-mix(in srgb, var(--agro-warning) 15%, transparent);
  padding: 2px 8px;
  border-radius: var(--agro-radius-sm);
}
.agro-wizard__promo-desc {
  font-size: 0.8em;
  color: var(--agro-text-secondary);
  margin: 0 0 8px;
}

/* ── Korak 5: Split layout + autocomplete + preview ──────────────────────── */
.agro-wizard__split {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
}
.agro-wizard__autocomplete { position: relative; }
.agro-wizard__autocomplete-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  box-shadow: var(--agro-shadow-md);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  z-index: 20;
}
.agro-wizard__autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.9em;
  color: var(--agro-text);
}
.agro-wizard__autocomplete-item:hover,
.agro-wizard__autocomplete-item--highlighted {
  background: var(--agro-primary-bg);
  color: var(--agro-primary-dark);
}
.agro-wizard__autocomplete-item--selected {
  background: var(--agro-primary-soft);
  font-weight: 600;
}
.agro-wizard__preview-col {
  background: var(--agro-surface);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-lg);
  padding: 12px;
  align-self: start;
}
.agro-wizard__preview-head { margin-bottom: 8px; }
.agro-wizard__preview-title {
  font-size: 0.85em;
  font-weight: 600;
  margin: 0;
  color: var(--agro-text-secondary);
}
.agro-wizard__preview-card {
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  overflow: hidden;
  background: var(--agro-surface-card);
}
.agro-wizard__preview-card--promoted {
  border-color: var(--agro-warning);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--agro-warning) 25%, transparent);
}
.agro-wizard__preview-image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--agro-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.agro-wizard__preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.agro-wizard__preview-image-placeholder { color: var(--agro-text-muted); }
.agro-wizard__preview-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7em;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--agro-radius-sm);
  text-transform: uppercase;
}
.agro-wizard__preview-badge--promo {
  background: var(--agro-warning);
  color: #fff;
}
.agro-wizard__preview-body { padding: 10px 12px; }
.agro-wizard__preview-name {
  font-size: 0.9em;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--agro-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.agro-wizard__preview-price {
  font-size: 1.05em;
  font-weight: 700;
  color: var(--agro-primary-dark);
  margin-bottom: 6px;
}
.agro-wizard__preview-currency {
  font-size: 0.75em;
  font-weight: 500;
  color: var(--agro-text-muted);
}
.agro-wizard__preview-negotiable {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.7em;
  font-weight: 500;
  color: var(--agro-text-muted);
}
.agro-wizard__preview-empty {
  font-size: 0.85em;
  font-weight: 400;
  color: var(--agro-text-muted);
}
.agro-wizard__preview-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.75em;
  color: var(--agro-text-muted);
}
.agro-wizard__preview-meta li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── Footer (sticky bottom) ──────────────────────────────────────────────── */
.agro-wizard__footer {
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: var(--agro-surface-card);
  border-top: 1px solid var(--agro-border);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}
.agro-wizard__footer-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.agro-wizard__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--agro-radius);
  font-size: 0.9em;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, opacity 0.15s;
  font-family: inherit;
}
.agro-wizard__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.agro-wizard__btn--primary {
  background: var(--agro-primary);
  color: #fff;
  min-width: 140px;
}
.agro-wizard__btn--primary:hover:not(:disabled) {
  background: var(--agro-primary-dark);
  transform: translateY(-1px);
}
.agro-wizard__btn--ghost {
  background: transparent;
  color: var(--agro-text-secondary);
  border-color: var(--agro-border);
}
.agro-wizard__btn--ghost:hover:not(:disabled) {
  background: var(--agro-surface-alt);
  color: var(--agro-text);
}
.agro-wizard__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: agro-wizard-spin 0.7s linear infinite;
}
@keyframes agro-wizard-spin {
  to { transform: rotate(360deg); }
}

/* ── Responsive: <768px stack preview pod formom + manje paddings ────────── */
@media (max-width: 767.98px) {
  .agro-wizard__step {
    margin: 0 8px;
    padding: 16px;
    border-radius: var(--agro-radius);
  }
  .agro-wizard__split {
    grid-template-columns: 1fr;
  }
  .agro-wizard__cat-grid {
    grid-template-columns: 1fr;
  }
  .agro-wizard__grid--2col {
    grid-template-columns: 1fr;
  }
  .agro-wizard__dot-label { display: none; }
  .agro-wizard__progress-inner { padding: 10px 12px; }
  .agro-wizard__footer-inner { padding: 10px 12px; }
  .agro-wizard__btn { padding: 12px 16px; flex: 1; }
  .agro-wizard__btn--primary { min-width: 0; }
}

@media (max-width: 480px) {
  .agro-wizard__cat-card { padding: 14px 8px; }
  .agro-wizard__image-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
}

/* Reduced-motion: disable transforms/animations */
@media (prefers-reduced-motion: reduce) {
  .agro-wizard__btn--primary:hover:not(:disabled) { transform: none; }
  .agro-wizard__cat-card,
  .agro-wizard__btn,
  .agro-wizard__input,
  .agro-wizard__textarea,
  .agro-wizard__radio { transition: none; }
  .agro-wizard__spinner { animation: none; }
}

/* ============================================================
   FAZA 9.5 — Category Landing stranica oglasa
   Breadcrumb + cross-sell + empty state
   ============================================================ */

/* ── Breadcrumb ─────────────────────────────────────────── */
.agro-breadcrumb {
  margin: 0 0 var(--agro-space-md);
}
.agro-breadcrumb__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--agro-space-xs);
  font-family: var(--agro-font-body);
  font-size: 14px;
  color: var(--agro-text-secondary);
}
.agro-breadcrumb__item {
  display: inline-flex;
  align-items: center;
}
.agro-breadcrumb__sep {
  color: var(--agro-text-muted);
  margin: 0 var(--agro-space-xs);
}
.agro-breadcrumb__link {
  color: var(--agro-primary-dark);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: var(--agro-radius-sm);
  transition: color 120ms ease, background-color 120ms ease;
}
@media (hover: hover) {
  .agro-breadcrumb__link:hover {
    color: var(--agro-primary);
    text-decoration: underline;
  }
}
.agro-breadcrumb__link:focus-visible {
  outline: 2px solid var(--agro-primary);
  outline-offset: 2px;
}
.agro-breadcrumb__current {
  color: var(--agro-text);
  font-weight: 600;
}

/* ── Category hub tip (savet uz H1) ─────────────────────── */
.agro-offers-hub--category .agro-offers-hub__tip {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--agro-space-sm);
  margin: var(--agro-space-sm) 0 0;
  padding: var(--agro-space-sm) var(--agro-space-md);
  background: var(--agro-primary-bg);
  border-left: 3px solid var(--agro-accent);
  border-radius: var(--agro-radius);
  font-family: var(--agro-font-body);
  font-size: 14px;
  color: var(--agro-text-secondary);
  line-height: 1.5;
  max-width: 720px;
}
.agro-offers-hub--category .agro-offers-hub__tip-icon {
  font-size: 16px;
  line-height: 1.4;
  flex-shrink: 0;
}

/* ── Cross-sell (ostale kategorije) ─────────────────────── */
.agro-category-crosssell {
  margin-top: var(--agro-space-xl);
  padding: var(--agro-space-lg);
  background: var(--agro-surface-alt);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-lg);
}
.agro-category-crosssell__heading {
  margin: 0 0 var(--agro-space-md);
  font-family: var(--agro-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--agro-text);
}
.agro-category-crosssell__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--agro-space-md);
}
@media (max-width: 991px) {
  .agro-category-crosssell__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .agro-category-crosssell__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 360px) {
  .agro-category-crosssell__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Cross-sell tile ────────────────────────────────────── */
.agro-category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--agro-space-xs);
  padding: var(--agro-space-md);
  min-height: 120px;
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-lg);
  text-decoration: none;
  color: var(--agro-text);
  text-align: center;
  transition: transform 180ms ease, border-color 180ms ease,
              background-color 180ms ease, box-shadow 180ms ease;
}
@media (hover: hover) {
  .agro-category-tile:hover {
    border-color: var(--agro-primary);
    background: var(--agro-primary-bg);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.12);
    color: var(--agro-text);
    text-decoration: none;
  }
}
.agro-category-tile:focus-visible {
  outline: 2px solid var(--agro-primary);
  outline-offset: 2px;
  border-color: var(--agro-primary);
  background: var(--agro-primary-bg);
}
.agro-category-tile:active {
  transform: translateY(0);
  box-shadow: none;
}
.agro-category-tile__icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: var(--agro-space-xs);
}
.agro-category-tile__name {
  font-family: var(--agro-font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--agro-text);
  line-height: 1.3;
}
.agro-category-tile__count {
  font-family: var(--agro-font-body);
  font-size: 13px;
  color: var(--agro-text-secondary);
}

/* ── Empty state (0 oglasa u kategoriji) ────────────────── */
.agro-category-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--agro-space-xl) var(--agro-space-lg);
  background: var(--agro-surface-card);
  border: 1px dashed var(--agro-border);
  border-radius: var(--agro-radius-lg);
  margin: var(--agro-space-md) 0;
}
.agro-category-empty__inner {
  max-width: 480px;
  text-align: center;
}
.agro-category-empty__icon {
  font-size: 56px;
  line-height: 1;
  display: inline-block;
  margin-bottom: var(--agro-space-md);
}
.agro-category-empty__heading {
  margin: 0 0 var(--agro-space-sm);
  font-family: var(--agro-font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--agro-text);
  line-height: 1.3;
}
.agro-category-empty__body {
  margin: 0 0 var(--agro-space-lg);
  font-family: var(--agro-font-body);
  font-size: 15px;
  color: var(--agro-text-secondary);
  line-height: 1.55;
}
.agro-category-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--agro-space-sm);
  justify-content: center;
}
.agro-category-empty__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--agro-radius);
  font-family: var(--agro-font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease,
              border-color 180ms ease, transform 180ms ease;
}
.agro-category-empty__cta--primary {
  background: var(--agro-primary);
  color: #fff;
  border: 1px solid var(--agro-primary);
}
@media (hover: hover) {
  .agro-category-empty__cta--primary:hover {
    background: var(--agro-primary-dark);
    border-color: var(--agro-primary-dark);
    color: #fff;
  }
}
.agro-category-empty__cta--primary:focus-visible {
  outline: 2px solid var(--agro-primary-dark);
  outline-offset: 2px;
}
.agro-category-empty__cta--ghost {
  background: transparent;
  color: var(--agro-primary-dark);
  border: 1px solid var(--agro-border);
}
@media (hover: hover) {
  .agro-category-empty__cta--ghost:hover {
    background: var(--agro-primary-bg);
    border-color: var(--agro-primary);
    color: var(--agro-primary-dark);
  }
}
.agro-category-empty__cta--ghost:focus-visible {
  outline: 2px solid var(--agro-primary);
  outline-offset: 2px;
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .agro-category-tile,
  .agro-category-empty__cta,
  .agro-breadcrumb__link {
    transition: none;
  }
  .agro-category-tile:hover {
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════
 * 11. Entity profile tabs + Oglasi panel (FAZA 11.2 Korak 3)
 *     Spec: docs/design-specs/entity-offers-tab.md §§ 4, 5, 6, 8
 * ════════════════════════════════════════════════════════════ */

/* ── Tab nav ────────────────────────────────────────────── */
.agro-entity-tabs {
  margin: 0 0 var(--agro-space-md) 0;
  border-bottom: 1px solid var(--agro-surface-alt);
  background: var(--agro-surface);
}
.agro-entity-tabs ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--agro-space-xs);
  flex-wrap: wrap;
}
.agro-entity-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--agro-space-xs);
  min-height: 44px;
  padding: 12px var(--agro-space-md);
  color: var(--agro-text-muted);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
@media (hover: hover) {
  .agro-entity-tab:hover {
    color: var(--agro-text);
    background: var(--agro-surface-alt);
    text-decoration: none;
  }
}
.agro-entity-tab:focus-visible {
  outline: 3px solid var(--agro-focus-border);
  outline-offset: 2px;
}
.agro-entity-tab--active,
.agro-entity-tab[aria-selected="true"] {
  color: var(--agro-primary-dark);
  background: var(--agro-surface-card);
  border-bottom-color: var(--agro-primary);
}
.agro-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  margin-left: var(--agro-space-xs);
  background: var(--agro-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  border-radius: 11px;
}

/* ── Offers panel wrapper ───────────────────────────────── */
.agro-entity-offers-panel {
  padding: var(--agro-space-md) 0 var(--agro-space-lg) 0;
}
.agro-entity-offers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--agro-space-md);
  flex-wrap: wrap;
  margin-bottom: var(--agro-space-md);
}
.agro-entity-offers-heading {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--agro-text);
}
.agro-entity-offers-heading-count {
  color: var(--agro-text-muted);
  font-weight: 500;
}
.agro-entity-offers-subheading {
  margin: 4px 0 0 0;
  color: var(--agro-text-muted);
  font-size: 14px;
  flex-basis: 100%;
}
.agro-entity-offers-cta {
  min-height: 48px;
  padding: 0 var(--agro-space-md);
  display: inline-flex;
  align-items: center;
  gap: var(--agro-space-xs);
}

/* ── Owner mini stats ───────────────────────────────────── */
.agro-entity-offers-stats {
  display: flex;
  gap: var(--agro-space-md);
  margin: 0 0 var(--agro-space-md) 0;
  padding: var(--agro-space-sm) var(--agro-space-md);
  background: var(--agro-surface-alt);
  border-radius: 8px;
  list-style: none;
  flex-wrap: wrap;
}
.agro-entity-offers-stats li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--agro-text-muted);
}
.agro-entity-offers-stat-value {
  color: var(--agro-text);
  font-weight: 600;
}

/* ── Read-only banner (premium expired) ─────────────────── */
.agro-entity-offers-readonly {
  display: flex;
  align-items: flex-start;
  gap: var(--agro-space-sm);
  padding: var(--agro-space-md);
  margin-bottom: var(--agro-space-md);
  background: color-mix(in srgb, var(--agro-warning) 12%, var(--agro-surface));
  border-left: 4px solid var(--agro-warning);
  color: var(--agro-text);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
}
.agro-entity-offers-readonly svg {
  color: var(--agro-warning);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Grid (responsive: 1 col mobile, 2 col desktop u col-md-8) ─ */
.agro-entity-offers-grid {
  display: grid;
  gap: var(--agro-space-md);
  grid-template-columns: 1fr;
  margin: 0 0 var(--agro-space-md) 0;
}
.agro-entity-offers-grid > .offer-card {
  width: 100%;
  padding: 0;
  float: none;
}
@media (min-width: 768px) {
  .agro-entity-offers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--agro-space-lg);
  }
}

/* ── Load more ──────────────────────────────────────────── */
.agro-entity-offers-load-more {
  display: flex;
  justify-content: center;
  margin-top: var(--agro-space-xl);
}
.agro-entity-offers-load-more-btn {
  min-height: 48px;
  padding: 0 var(--agro-space-lg);
  border: 1px solid var(--agro-primary);
  color: var(--agro-primary-dark);
  background: var(--agro-surface-card);
  display: inline-flex;
  align-items: center;
}
.agro-entity-offers-load-more-btn:focus-visible {
  outline: 3px solid var(--agro-focus-border);
  outline-offset: 2px;
}
.agro-entity-offers-end {
  text-align: center;
  margin-top: var(--agro-space-lg);
  color: var(--agro-text-muted);
  font-size: 14px;
}
.agro-entity-offers-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Empty state ────────────────────────────────────────── */
.agro-entity-offers-empty {
  padding: var(--agro-space-xl) var(--agro-space-md);
  background: var(--agro-surface);
  border: 1px dashed var(--agro-surface-alt);
  border-radius: 8px;
}
.agro-entity-offers-empty-icon {
  color: var(--agro-primary-light);
  margin-bottom: var(--agro-space-md);
}
.agro-entity-offers-empty-text {
  color: var(--agro-text);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 var(--agro-space-md) 0;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.agro-entity-offers-empty-cta {
  min-height: 48px;
  padding: 0 var(--agro-space-lg);
  display: inline-flex;
  align-items: center;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .agro-entity-tab {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Feed Widget — "Istaknuti oglasi" (FAZA 11.3)
   Spec: docs/design-specs/feed-widget-offers.md (v2)
   Prikazuje se ispod story/no-stories.phtml na home feed empty-state
   za free tier korisnike.
   ═══════════════════════════════════════════════════════════════════ */

.agro-feed-widget {
  background: var(--agro-surface);
  border: 1px solid var(--agro-border);
  border-left: 3px solid var(--agro-accent);
  border-radius: var(--agro-radius);
  padding: 20px;
  margin-top: 16px;
  box-shadow: var(--agro-shadow-sm);
}

.agro-feed-widget__header {
  margin-bottom: 16px;
}

.agro-feed-widget__title {
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--agro-text);
  margin: 0 0 4px 0;
}

.agro-feed-widget__subtitle {
  font-size: 13px;
  color: var(--agro-text-muted);
  margin: 0;
}

.agro-feed-widget__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.agro-feed-widget__card-wrap {
  list-style: none;
}

.agro-feed-widget__card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  overflow: hidden;
  background: var(--agro-surface-card);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.agro-feed-widget__card:hover {
  border-color: var(--agro-border-strong);
  transform: translateY(-1px);
  box-shadow: var(--agro-shadow-md);
  text-decoration: none;
  color: inherit;
}

.agro-feed-widget__card:focus-visible {
  outline: 2px solid var(--agro-primary);
  outline-offset: 2px;
  border-color: var(--agro-border-strong);
}

.agro-feed-widget__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--agro-surface-alt);
  overflow: hidden;
}

.agro-feed-widget__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.agro-feed-widget__body {
  padding: 10px 12px 12px;
}

.agro-feed-widget__card-title {
  font-family: 'Roboto Slab', serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 4px;
  color: var(--agro-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.agro-feed-widget__price {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--agro-primary-dark);
  margin: 0;
}

.agro-feed-widget__footer {
  margin-top: 16px;
  text-align: right;
}

.agro-feed-widget__view-all {
  font-size: 14px;
  font-weight: 600;
  color: var(--agro-primary);
  text-decoration: none;
}

.agro-feed-widget__view-all:hover,
.agro-feed-widget__view-all:focus-visible {
  color: var(--agro-primary-dark);
  text-decoration: underline;
}

.agro-feed-widget__view-all:focus-visible {
  outline: 2px solid var(--agro-primary);
  outline-offset: 2px;
}

/* L breakpoint — col-md-7 ~670px, 3 col je pretesno → 2 col (Faza B review fix) */
@media (max-width: 991px) {
  .agro-feed-widget__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .agro-feed-widget {
    padding: 16px;
  }
  .agro-feed-widget__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .agro-feed-widget__card-title {
    font-size: 15px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .agro-feed-widget__card {
    transition: none;
  }
  .agro-feed-widget__card:hover {
    transform: none;
  }
}

/* Print — widget je marketinski, ne treba u print */
@media print {
  .agro-feed-widget {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Feed Timeline Redesign (FAZA 12.1)
   Spec: docs/design-specs/feed-timeline.md
   De-branding + agro identitet + mobile usability + performance
   Cilj: 40-65g korisnik, mobilni 375px, kontrast AA+, LCP < 2.5s
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Agro Greet ─────────────────────────────────────────────────── */

.agro-greet {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 0 0 16px;
  background: var(--agro-primary-bg, #f0f7f0);
  border: 1px solid var(--agro-primary-light, #4caf50);
  border-left: 4px solid var(--agro-primary, #2e7d32);
  border-radius: var(--agro-radius, 8px);
  box-shadow: var(--agro-shadow-sm, 0 1px 3px rgba(46, 125, 50, 0.08));
}

.agro-greet__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--agro-primary-dark, #1b5e20);
  background: #fff;
  border-radius: 50%;
  border: 1px solid var(--agro-primary-light, #4caf50);
}

.agro-greet__text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.agro-greet__hello {
  font-family: 'Roboto Slab', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--agro-primary-dark, #1b5e20);
  line-height: 1.3;
}

.agro-greet__season {
  font-size: 14px;
  color: var(--agro-text-secondary, #4a5e4a);
  line-height: 1.4;
  margin-top: 2px;
}

.agro-greet__close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--agro-text-muted, #546e63);
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 150ms ease, color 150ms ease;
}

.agro-greet__close:hover,
.agro-greet__close:focus-visible {
  background: rgba(46, 125, 50, 0.08);
  color: var(--agro-primary-dark, #1b5e20);
}

.agro-greet__close:focus-visible {
  outline: 2px solid var(--agro-primary, #2e7d32);
  outline-offset: 2px;
}

/* ─── Agro Feed Filter Tabs ──────────────────────────────────────── */

.agro-feed-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

/* Na uzim ekranima (<= 480) — sa 2 taba (Svi + Gazdinstva koja pratim) staju
   u viewport, pa centriramo umesto horizontalnog scroll-a. */
@media (max-width: 480px) {
  .agro-feed-filter {
    flex-wrap: nowrap;
    justify-content: center;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
}

.agro-feed-filter::-webkit-scrollbar {
  display: none;
}

.agro-feed-filter__tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito Sans', -apple-system, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--agro-text-secondary, #4a5e4a);
  background: transparent;
  border: 1px solid var(--agro-border, #e0d8c8);
  border-radius: 999px;
  cursor: pointer;
  scroll-snap-align: start;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  white-space: nowrap;
}

.agro-feed-filter__tab:hover:not(:disabled) {
  background: var(--agro-primary-bg, #f0f7f0);
  border-color: var(--agro-primary-light, #4caf50);
  color: var(--agro-primary-dark, #1b5e20);
}

.agro-feed-filter__tab:focus-visible {
  outline: 2px solid var(--agro-primary, #2e7d32);
  outline-offset: 2px;
}

.agro-feed-filter__tab--active {
  background: var(--agro-primary, #2e7d32);
  border-color: var(--agro-primary, #2e7d32);
  color: #fff;
}

.agro-feed-filter__tab--active:hover {
  background: var(--agro-primary-dark, #1b5e20);
  border-color: var(--agro-primary-dark, #1b5e20);
  color: #fff;
}

.agro-feed-filter__tab--disabled,
.agro-feed-filter__tab:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: transparent;
  color: var(--agro-text-muted, #546e63);
}

.agro-feed-filter__tab--disabled:hover {
  background: transparent;
  border-color: var(--agro-border, #e0d8c8);
  color: var(--agro-text-muted, #546e63);
}

.agro-feed-filter__badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--agro-wheat, #f9a825);
  color: #3e2e00;
  border-radius: 4px;
}

/* Empty state za "Gazdinstva koja pratim" filter (kad korisnik ne prati nijednu stranicu) */
.agro-feed-empty {
  text-align: center;
  padding: 32px 20px;
  background: var(--agro-surface-card, #fefcf9);
  border: 1px solid var(--agro-border, #e0d8c8);
  border-radius: var(--agro-radius-lg, 12px);
  margin: 16px 0;
}
.agro-feed-empty p {
  margin: 0;
  color: var(--agro-text-secondary, #4a5e4a);
  font-size: 14px;
  line-height: 1.5;
}

/* ─── Agro Post Skeleton (loader) ────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.agro-post-skeleton {
  background: var(--agro-surface-card, #fefcf9);
  border: 1px solid var(--agro-border, #e0d8c8);
  border-radius: var(--agro-radius-lg, 12px);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--agro-shadow-sm, 0 1px 3px rgba(46, 125, 50, 0.08));
}

.agro-post-skeleton__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.agro-post-skeleton__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: linear-gradient(
    90deg,
    var(--agro-surface, #fafaf8) 0%,
    var(--agro-surface-alt, #f5f0e8) 50%,
    var(--agro-surface, #fafaf8) 100%
  );
  background-size: 200% 100%;
  animation: agro-shimmer 1.4s ease-in-out infinite;
}

.agro-post-skeleton__meta {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.agro-post-skeleton__line {
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--agro-surface, #fafaf8) 0%,
    var(--agro-surface-alt, #f5f0e8) 50%,
    var(--agro-surface, #fafaf8) 100%
  );
  background-size: 200% 100%;
  animation: agro-shimmer 1.4s ease-in-out infinite;
}

.agro-post-skeleton__line--30 { width: 30%; }
.agro-post-skeleton__line--60 { width: 60%; }
.agro-post-skeleton__line--80 { width: 80%; }
.agro-post-skeleton__line--100 { width: 100%; }

.agro-post-skeleton__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.agro-post-skeleton__media {
  height: 220px;
  border-radius: var(--agro-radius, 8px);
  background: linear-gradient(
    90deg,
    var(--agro-surface, #fafaf8) 0%,
    var(--agro-surface-alt, #f5f0e8) 50%,
    var(--agro-surface, #fafaf8) 100%
  );
  background-size: 200% 100%;
  animation: agro-shimmer 1.4s ease-in-out infinite;
}

@keyframes agro-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .agro-post-skeleton__avatar,
  .agro-post-skeleton__line,
  .agro-post-skeleton__media {
    animation: none;
    background: var(--agro-surface-alt, #f5f0e8);
  }
}

/* ─── Post Panel Override (agro look za .panel.panel-white unutar feed-a) ── */

#posts-laoded .panel.panel-white,
.posts_load .panel.panel-white {
  background: var(--agro-surface-card, #fefcf9);
  border: 1px solid var(--agro-border, #e0d8c8);
  border-radius: var(--agro-radius-lg, 12px);
  box-shadow: var(--agro-shadow-sm, 0 1px 3px rgba(46, 125, 50, 0.08));
  margin-bottom: 16px;
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
  transition: box-shadow 200ms ease;
}

#posts-laoded .panel.panel-white:hover,
.posts_load .panel.panel-white:hover {
  box-shadow: var(--agro-shadow-md, 0 4px 16px rgba(46, 125, 50, 0.12));
}

/* ─── Post Entity Badge (Gazdinstvo/Firma) ───────────────────────── */

.agro-post-entity-badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.2px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}

.agro-post-entity-badge--gazdinstvo {
  background: var(--agro-primary-bg, #f0f7f0);
  color: var(--agro-primary-dark, #1b5e20);
  border: 1px solid var(--agro-primary-light, #4caf50);
}

.agro-post-entity-badge--firma {
  background: rgba(249, 168, 37, 0.15);
  color: #8b6f00;
  border: 1px solid var(--agro-wheat, #f9a825);
}

/* ─── Post Reaction Bar (48x48 tap targets) ──────────────────────── */

#posts-laoded .post-footer-opts,
.posts_load .post-footer-opts {
  border-top: 1px solid var(--agro-border, #e0d8c8);
  padding-top: 12px;
  margin-top: 12px;
}

#posts-laoded .post-footer-opts .btn,
#posts-laoded .post-footer-opts button,
.posts_load .post-footer-opts .btn,
.posts_load .post-footer-opts button {
  min-width: 48px;
  min-height: 48px;
  color: var(--agro-text-muted, #546e63);
  border-radius: var(--agro-radius, 8px);
  transition: background-color 150ms ease, color 150ms ease;
}

#posts-laoded .post-footer-opts .btn:hover,
#posts-laoded .post-footer-opts button:hover,
.posts_load .post-footer-opts .btn:hover,
.posts_load .post-footer-opts button:hover {
  background: var(--agro-primary-bg, #f0f7f0);
  color: var(--agro-primary-dark, #1b5e20);
}

/* ─── Mobilna optimizacija (<= 640px) ────────────────────────────── */

@media (max-width: 640px) {
  .agro-greet {
    padding: 10px 12px;
    gap: 10px;
  }

  .agro-greet__icon {
    width: 36px;
    height: 36px;
  }

  .agro-greet__hello {
    font-size: 15px;
  }

  .agro-greet__season {
    font-size: 13px;
  }

  .agro-feed-filter__tab {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
  }

  #posts-laoded .panel.panel-white,
  .posts_load .panel.panel-white {
    border-radius: var(--agro-radius, 8px);
    margin-left: -4px;
    margin-right: -4px;
  }

  .agro-post-skeleton {
    border-radius: var(--agro-radius, 8px);
  }

  .agro-post-skeleton__media {
    height: 180px;
  }
}

/* ─── Print — feed nije za print ─────────────────────────────────── */

@media print {
  .agro-greet,
  .agro-feed-filter,
  .agro-post-skeleton {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Publisher Agro Unified Actions (FAZA 12.1 Korak 5)
   Jedan red sa svim opcijama: Foto / Video / Anketa / GIF / Osećanja /
   Fajlovi / Pijaca / Lokacija. Legacy sun_pub_more red je sakriven preko
   .agro-legacy-hidden — dugmad triggeruju iste legacy JS handlere.
   pub-footer-bottom (Share + privacy) ostaje vidljiv.
   Spec: docs/design-specs/feed-timeline.md (sekcija 3 + 14.2).
   ═══════════════════════════════════════════════════════════════════ */

/* Unified red — 4 agro dugmad (Foto/Video/Anketa/Osećanja), centrirano */
.agro-publisher-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--agro-border, #e0d8c8);
  background: var(--agro-surface-card, #fefcf9);
}

.agro-publisher-actions__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--agro-radius, 8px);
  color: var(--agro-primary, #2e7d32);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  position: relative;
}

.agro-publisher-actions__btn:hover,
.agro-publisher-actions__btn:focus-visible {
  background: rgba(46, 125, 50, 0.08);
  border-color: var(--agro-border, #e0d8c8);
  outline: none;
}

.agro-publisher-actions__btn:focus-visible {
  box-shadow: 0 0 0 2px var(--agro-primary, #2e7d32);
}

.agro-publisher-actions__btn svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.agro-publisher-actions__label {
  white-space: nowrap;
}

/* Pijaca locked (free korisnici) — wheat boja, lock ikona, premium tooltip */
.agro-publisher-actions__btn--locked {
  color: var(--agro-text-muted, #6c6c6c);
  cursor: not-allowed;
}

.agro-publisher-actions__btn--locked:hover,
.agro-publisher-actions__btn--locked:focus-visible {
  background: rgba(249, 168, 37, 0.1);
  border-color: var(--agro-wheat, #f9a825);
}

.agro-publisher-actions__lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  color: var(--agro-wheat, #f9a825);
}

/* Premium tooltip (pseudo-element preko data-agro-premium-tooltip) */
.agro-publisher-actions__btn--locked::after {
  content: attr(data-agro-premium-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  max-width: 280px;
  padding: 8px 12px;
  background: #1f1f1f;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  border-radius: var(--agro-radius, 8px);
  box-shadow: var(--agro-shadow-md, 0 4px 12px rgba(0,0,0,0.15));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 10;
  white-space: normal;
}

.agro-publisher-actions__btn--locked:hover::after,
.agro-publisher-actions__btn--locked:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* Legacy sun_pub_more red (GIF/Fajlovi/Osećanja/... duplikati) — skriven */
.agro-legacy-hidden {
  display: none !important;
}

/* Mobilna optimizacija — manji padding, ikona-only na ekstremno uskim */
@media (max-width: 640px) {
  .agro-publisher-actions {
    padding: 10px 12px;
    gap: 4px;
  }

  .agro-publisher-actions__btn {
    flex: 1 1 auto;
    justify-content: center;
    padding: 8px 10px;
    font-size: 14px;
  }

  .agro-publisher-actions__btn--locked::after {
    min-width: 180px;
    max-width: 240px;
    font-size: 12px;
  }
}

@media (max-width: 400px) {
  .agro-publisher-actions__label {
    display: none;
  }

  .agro-publisher-actions__btn {
    padding: 8px;
    min-width: 48px;
  }
}

/* Print — publisher nije za print */
@media print {
  .agro-publisher-actions {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Publisher: Anketa (#poll-form) + Osećanja (#emo-form) redesign
   Override legacy WoWonder stylesheet (#poll-form .create-poll plava,
   .feelings-type-to plavi badge, .feeling-type bez padding-a) sa agro
   tokenima. HTML strukturu NE menjamo — samo prezentacija.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Zajednički okvir oba panela ─────────────────────────────────── */
.publisher-box #poll-form,
.publisher-box #emo-form {
  margin: 12px 16px 4px;
  padding: 14px;
  background: var(--agro-surface-alt, #f5f0e8);
  border: 1px solid var(--agro-border, #e0d8c8);
  border-radius: var(--agro-radius-lg, 12px);
  box-shadow: var(--agro-shadow-sm, 0 1px 3px rgba(46,125,50,0.08));
}

/* ───────────────────────────────────────────────────────────────────
   Anketa — #poll-form
   ─────────────────────────────────────────────────────────────────── */
.publisher-box #poll-form .publisher-hidden-option.answers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

.publisher-box #poll-form .publisher-hidden-option.answers > input,
.publisher-box #poll-form .publisher-hidden-option.answers > span {
  position: relative;
  display: block;
  margin: 0;
}

.publisher-box #poll-form .publisher-hidden-option.answers input[type="text"] {
  width: 100%;
  height: auto;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--agro-surface-card, #fefcf9);
  border: 1px solid var(--agro-border, #e0d8c8);
  border-radius: var(--agro-radius, 8px);
  color: var(--agro-text, #1a2e1a);
  font-size: 15px;
  line-height: 1.3;
  box-shadow: none;
  transition: border-color var(--agro-transition, 200ms ease),
              box-shadow var(--agro-transition, 200ms ease),
              background var(--agro-transition, 200ms ease);
}

.publisher-box #poll-form .publisher-hidden-option.answers > span input[type="text"] {
  /* Mesto za X dugme desno (svg width 24 + 12px padding) */
  padding-right: 44px;
}

.publisher-box #poll-form .publisher-hidden-option.answers input[type="text"]::placeholder {
  color: var(--agro-text-muted, #4a5e55);
  opacity: 0.85;
}

.publisher-box #poll-form .publisher-hidden-option.answers input[type="text"]:hover {
  border-color: var(--agro-border-strong, #c8bfa8);
  background: #fff;
}

.publisher-box #poll-form .publisher-hidden-option.answers input[type="text"]:focus,
.publisher-box #poll-form .publisher-hidden-option.answers input[type="text"]:focus-visible {
  outline: none;
  border-color: var(--agro-primary, #2e7d32);
  background: #fff;
  box-shadow: var(--agro-focus-ring, 0 0 0 3px rgba(46,125,50,0.25));
}

/* X dugme za uklanjanje dodatog odgovora (Wo_AddAnswer ubacuje <svg>) */
.publisher-box #poll-form .publisher-hidden-option.answers > span > svg {
  position: absolute;
  top: 50%;
  right: 8px;
  left: auto;
  width: 28px;
  height: 28px;
  margin: -14px 0 0;
  padding: 4px;
  color: var(--agro-text-muted, #4a5e55);
  background: transparent;
  border-radius: var(--agro-radius-pill, 999px);
  cursor: pointer;
  transition: background var(--agro-transition-fast, 100ms ease),
              color var(--agro-transition-fast, 100ms ease);
}

.publisher-box #poll-form .publisher-hidden-option.answers > span > svg:hover {
  color: var(--agro-danger, #c62828);
  background: rgba(198, 40, 40, 0.1);
}

/* "Dodaj odgovor" — agro outline pill umesto WoWonder plave kocke */
.publisher-box #poll-form .create-poll,
.publisher-box #poll-form #add_answer.create-poll {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 16px 8px 12px;
  background: var(--agro-surface-card, #fefcf9);
  color: var(--agro-primary, #2e7d32);
  border: 1px solid var(--agro-primary, #2e7d32);
  border-radius: var(--agro-radius-pill, 999px);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--agro-transition, 200ms ease),
              color var(--agro-transition, 200ms ease),
              box-shadow var(--agro-transition, 200ms ease);
  text-decoration: none;
}

.publisher-box #poll-form .create-poll::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.publisher-box #poll-form .create-poll .create-text {
  display: inline-block;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.publisher-box #poll-form .create-poll:hover {
  background: var(--agro-primary, #2e7d32);
  color: #fff;
}

.publisher-box #poll-form .create-poll:focus-visible {
  outline: none;
  box-shadow: var(--agro-focus-ring, 0 0 0 3px rgba(46,125,50,0.25));
}

/* ───────────────────────────────────────────────────────────────────
   Osećanja — #emo-form
   ─────────────────────────────────────────────────────────────────── */
.publisher-box #emo-form > .publisher-hidden-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0 0 10px;
  background: transparent;
  border-top: none;
}

/* Type-to badge ("Osećanje", "Putuje u" ...) — agro chip umesto plavog */
.publisher-box #emo-form .feelings-type-to {
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--agro-primary-dark, #1b5e20);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.publisher-box #emo-form .feelings-type-to:not(:empty) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  background: var(--agro-primary-bg, #f0f7f0);
  border: 1px solid var(--agro-primary-soft, #d8ead9);
  border-radius: var(--agro-radius-pill, 999px);
  cursor: pointer;
}

.publisher-box #emo-form .feelings-type-to:not(:empty)::after {
  content: "✕";
  font-size: 11px;
  font-weight: 700;
  color: var(--agro-text-muted, #4a5e55);
  margin-left: 2px;
}

.publisher-box #emo-form .feelings-type-to:not(:empty):hover {
  background: var(--agro-primary-soft, #d8ead9);
}

.publisher-box #emo-form .feelings-value {
  position: static;
  padding: 0;
  background: transparent;
  color: var(--agro-text, #1a2e1a);
  font-size: 14px;
  line-height: 1.3;
}

.publisher-box #emo-form .feelings-value:not(:empty) {
  padding: 4px 8px;
  background: var(--agro-surface-card, #fefcf9);
  border: 1px solid var(--agro-border, #e0d8c8);
  border-radius: var(--agro-radius-pill, 999px);
}

/* Input "Šta radite?" */
.publisher-box #emo-form #feelings-text {
  flex: 1 1 auto;
  width: auto;
  height: auto;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--agro-surface-card, #fefcf9);
  border: 1px solid var(--agro-border, #e0d8c8);
  border-radius: var(--agro-radius, 8px);
  color: var(--agro-text, #1a2e1a);
  font-size: 15px;
  line-height: 1.3;
  box-shadow: none;
  transition: border-color var(--agro-transition, 200ms ease),
              box-shadow var(--agro-transition, 200ms ease),
              background var(--agro-transition, 200ms ease);
}

.publisher-box #emo-form #feelings-text::placeholder {
  color: var(--agro-text-muted, #4a5e55);
  opacity: 0.85;
}

.publisher-box #emo-form #feelings-text:focus,
.publisher-box #emo-form #feelings-text:focus-visible {
  outline: none;
  border-color: var(--agro-primary, #2e7d32);
  background: #fff;
  box-shadow: var(--agro-focus-ring, 0 0 0 3px rgba(46,125,50,0.25));
}

/* Lista tipova (Osećanje / Putuje u / Gleda / Igra / Sluša) i lista emoji-ja —
   bez sopstvenog card-within-card okvira; sede direktno u krem panelu sa
   border-top separatorom od input reda. */
.publisher-box #emo-form .feeling-type {
  max-height: 280px;
  overflow-y: auto;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--agro-border, #e0d8c8);
  border-radius: 0;
  box-shadow: none;
  padding: 6px 0 0;
  margin: 6px 0 0;
}

.publisher-box #emo-form .feeling-type ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: none;
}

.publisher-box #emo-form .feeling-type li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 0;
  color: var(--agro-text, #1a2e1a);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  border-radius: var(--agro-radius, 8px);
  cursor: pointer;
  transition: background var(--agro-transition-fast, 100ms ease);
}

.publisher-box #emo-form .feeling-type li:hover,
.publisher-box #emo-form .feeling-type li:focus-visible {
  background: var(--agro-primary-bg, #f0f7f0);
  outline: none;
}

/* Lista tipova prati input red u flow-u (inline panel umesto plavog absolute dropdown-a) */
.publisher-box #emo-form .feeling-type.feeling-types {
  position: static;
  width: 100%;
}

.publisher-box #emo-form .feeling-type.feeling-types li {
  display: flex;
}

.publisher-box #emo-form .feeling-type.feeling-types li svg.feather,
.publisher-box #emo-form .feeling-type.feeling-types li > svg {
  display: inline-flex;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
}

.publisher-box #emo-form .feeling-type.feeling-types li span {
  display: inline-flex;
  width: auto;
  vertical-align: baseline;
  font-size: 15px;
  font-weight: 600;
  color: var(--agro-text, #1a2e1a);
}

/* Emoji lista — grid layout umesto plain ul */
.publisher-box #emo-form .feeling-type.feelings ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 4px;
}

.publisher-box #emo-form .feeling-type.feelings li {
  padding: 8px 10px;
  font-size: 14px;
}

.publisher-box #emo-form .feeling-type.feelings li i.twa {
  margin-top: 0;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Mobilna optimizacija (poll + emo) */
@media (max-width: 640px) {
  .publisher-box #poll-form,
  .publisher-box #emo-form {
    margin: 10px 12px 4px;
    padding: 12px;
  }

  .publisher-box #poll-form .publisher-hidden-option.answers input[type="text"],
  .publisher-box #emo-form #feelings-text {
    font-size: 16px; /* iOS auto-zoom guard */
  }

  .publisher-box #emo-form .feeling-type.feelings ul {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

/* Dark mode adjustments — agro-night već menja --agro-* tokene,
   ali fokus-ring i bg overrides treba da budu vidljivi */
body.agro-night .publisher-box #poll-form .publisher-hidden-option.answers input[type="text"]:focus,
body.agro-night .publisher-box #emo-form #feelings-text:focus {
  background: var(--agro-surface-card, #1e3a1e);
}

/* ═══════════════════════════════════════════════════════════════════
   Feed Post Card — shell + header + footer (FAZA 12.1 Korak 6)
   .agro-post-card override za .panel.panel-white.panel-shadow
   .agro-post-reactions__btn 48×48 tap target sa srce/komentar/share
   Spec: docs/design-specs/feed-timeline.md sekcije 4 (post kartica)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Post card shell ────────────────────────────────────────────── */

.post.panel.panel-white.agro-post-card {
  background: var(--agro-surface-card, #fefcf9);
  border: 1px solid var(--agro-border, #e0d8c8);
  border-radius: var(--agro-radius-lg, 12px);
  box-shadow: var(--agro-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
  padding: 16px;
  margin-bottom: 16px;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
  content-visibility: auto;
  contain-intrinsic-size: 0 420px;
}

.post.panel.panel-white.agro-post-card:hover {
  box-shadow: var(--agro-shadow-md, 0 4px 12px rgba(0,0,0,0.10));
  border-color: var(--agro-border-strong, #c9bfa8);
}

.post.panel.panel-white.agro-post-card:focus-within {
  outline: 2px solid var(--agro-primary, #2e7d32);
  outline-offset: 2px;
}

/* Boost (istaknuto) varijanta — wheat akcent */
.post.panel.panel-white.agro-post-card.boosted {
  border-color: var(--agro-wheat, #f9a825);
  box-shadow: 0 1px 3px rgba(249, 168, 37, 0.15);
}

/* ─── Post header (ime + entity badge + vreme) ───────────────────── */

.agro-post-card .post-heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

/* Border premešten sa img-a na wrapper (.avatar/.wow_post_usr_ava). Razlog:
   img sa border:2px + width:44 + default box-sizing:content-box = 48x48 ukupno,
   što prelivi parent (44x44 overflow:hidden) i clipuje sliku iznutra
   (deo cartoon farmera ostaje van vidljivog kruga). */
.agro-post-card .post-heading .image .avatar,
.agro-post-card .post-heading .wow_post_usr_ava {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--agro-border, #e0d8c8);
  box-sizing: border-box;
  overflow: hidden;
  display: block;
  background: var(--agro-surface-card, #fff);
}
.agro-post-card .post-heading .image .avatar img,
.agro-post-card .post-heading img.avatar,
.agro-post-card .post-heading .wow_post_usr_ava img {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0;
  padding: 0;
}

.agro-post-card .post-heading .meta {
  flex: 1 1 auto;
  min-width: 0;
}

.agro-post-card .post-heading .title.h5 {
  font-family: 'Roboto Slab', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--agro-text, #1a2e1a);
  margin: 0 0 2px 0;
}

.agro-post-card .post-heading .title.h5 a {
  color: var(--agro-text, #1a2e1a);
  text-decoration: none;
}

.agro-post-card .post-heading .title.h5 a:hover,
.agro-post-card .post-heading .title.h5 a:focus-visible {
  color: var(--agro-primary-dark, #1b5e20);
  text-decoration: underline;
}

.agro-post-card .post-heading h6 {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.agro-post-card .post-heading .time .agro-muted-text,
.agro-post-card .post-heading .time .ajax-time {
  color: var(--agro-text-muted, #546e63);
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
}

/* Options menu (⋮) — 44×44 tap target */
.agro-post-card .post-heading > div .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  color: var(--agro-text-muted, #546e63);
  transition: background 0.15s ease, color 0.15s ease;
}

.agro-post-card .post-heading > div .dropdown-toggle:hover,
.agro-post-card .post-heading > div .dropdown-toggle:focus-visible {
  background: var(--agro-primary-bg, #f0f7f0);
  color: var(--agro-primary-dark, #1b5e20);
  outline: none;
}

/* ─── Post body (tekst + media) ──────────────────────────────────── */

.agro-post-card .post-description {
  font-family: 'Nunito Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--agro-text, #1a2e1a);
  margin-bottom: 12px;
  word-wrap: break-word;
}

.agro-post-card .post-description a:not(.btn) {
  color: var(--agro-primary-dark, #1b5e20);
  text-decoration: none;
}

.agro-post-card .post-description a:not(.btn):hover,
.agro-post-card .post-description a:not(.btn):focus-visible {
  text-decoration: underline;
}

.agro-post-card .post-file img,
.agro-post-card .post-file video {
  border-radius: var(--agro-radius, 8px);
  max-height: 520px;
  object-fit: cover;
}

.agro-post-card .post-file img {
  loading: lazy;
}

/* ─── Reaction bar separator iznad footer-a ──────────────────────── */

.agro-post-card hr {
  margin: 12px 0;
  border: 0;
  border-top: 1px solid var(--agro-border, #e0d8c8);
}

/* ─── Reaction bar (komentari + podeli) ───────────────────────────── */

.agro-post-reactions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* Specificity boost — pobedi .post .post-description .post-actions .stat-item (0,4,0) */
.post.panel.agro-post-card .agro-post-reactions .agro-post-reactions__btn,
.post.panel.agro-post-card .agro-post-reactions__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 8px 14px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--agro-radius, 8px) !important;
  color: var(--agro-text-muted, #546e63) !important;
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  flex: 0 0 auto !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.post.panel.agro-post-card .agro-post-reactions .agro-post-reactions__btn:hover,
.post.panel.agro-post-card .agro-post-reactions .agro-post-reactions__btn:focus-visible {
  background: var(--agro-primary-bg, #f0f7f0) !important;
  color: var(--agro-primary-dark, #1b5e20) !important;
  border-color: var(--agro-border, #e0d8c8) !important;
  outline: none;
}

.post.panel.agro-post-card .agro-post-reactions .agro-post-reactions__btn:focus-visible {
  box-shadow: 0 0 0 2px var(--agro-primary, #2e7d32);
}

.post.panel.agro-post-card .agro-post-reactions__btn svg,
.post.panel.agro-post-card .agro-post-reactions__btn .feather {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0;
}

.post.panel.agro-post-card .agro-post-reactions__btn .agro-comment-count {
  font-size: 13px;
  font-weight: 600;
  color: inherit;
}

/* ── Save bookmark button ─────────────────────────────────────────── */
.post.panel.agro-post-card .agro-post-reactions__btn--save.is-saved {
  color: var(--agro-primary-dark, #1b5e20) !important;
}

.post.panel.agro-post-card .agro-post-reactions__btn--save.is-saved .agro-save-icon {
  fill: currentColor !important;
  stroke: currentColor !important;
}

.post.panel.agro-post-card .agro-post-reactions__btn--save.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.post.panel.agro-post-card .agro-post-reactions__btn--save .agro-save-label {
  font-size: 13px;
  font-weight: 500;
  color: inherit;
}

/* Override core CSS L2418 `#wo_post_stat_button .stat-item { width: 100% }`
   koji u kombinaciji sa `flex-wrap: wrap` slamao dugmad na zasebne redove.
   Eksplicitno vraćamo horizontalni layout za sve children u reaction baru. */
.post.panel.agro-post-card .agro-post-reactions {
  flex-wrap: nowrap;
  justify-content: space-around;
}

.post.panel.agro-post-card .agro-post-reactions > .wo-reaction,
.post.panel.agro-post-card .agro-post-reactions > .stat-item,
.post.panel.agro-post-card .agro-post-reactions > .agro-post-reactions__btn {
  width: auto !important;
  flex: 1 1 auto !important;
}

/* Stats counter row (post-actions) — gore iznad reaction bar-a */
.agro-post-card .agro-post-stats {
  margin-bottom: 4px;
}

.agro-post-card .agro-post-stats .stat-item {
  color: var(--agro-text-muted, #546e63);
  font-size: 13px;
  padding: 4px 8px;
}

.agro-post-card .agro-post-stats .stat-item:hover {
  color: var(--agro-primary-dark, #1b5e20);
}

/* ─── Mobile responsive ──────────────────────────────────────────── */

@media (max-width: 640px) {
  .post.panel.panel-white.agro-post-card {
    padding: 14px;
    margin-bottom: 12px;
    border-radius: var(--agro-radius, 8px);
  }

  .agro-post-card .post-heading .image .avatar,
  .agro-post-card .post-heading img.avatar,
  .agro-post-card .post-heading .wow_post_usr_ava img {
    width: 40px;
    height: 40px;
  }

  .agro-post-card .post-description {
    font-size: 15px;
  }

  .post.panel.agro-post-card .agro-post-reactions .agro-post-reactions__btn,
  .post.panel.agro-post-card .agro-post-reactions__btn {
    padding: 8px 10px !important;
    font-size: 13px !important;
    min-height: 48px !important;
    min-width: 48px !important;
  }
}

/* ─── Reduced motion ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .post.panel.panel-white.agro-post-card,
  .agro-post-reactions__btn {
    transition: none;
  }
}

/* ─── Print ──────────────────────────────────────────────────────── */

@media print {
  .agro-post-card .agro-post-reactions,
  .agro-post-card .agro-post-stats,
  .agro-post-card .post-heading > div .dropdown-toggle {
    display: none;
  }

  .post.panel.panel-white.agro-post-card {
    box-shadow: none;
    border: 1px solid #ccc;
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   Offer delete confirmation modal
   ========================================================================== */
#delete-offer-modal .modal-body > p {
  margin: 0 0 14px;
  color: #333;
  font-size: 14px;
}
.agro-offer-delete-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin: 0 0 18px;
  background: #fff4f2;
  border: 1px solid #f3b6ac;
  border-radius: 10px;
  color: #9b2c1a;
}
.agro-offer-delete-warning > svg {
  flex-shrink: 0;
  color: #c0392b;
  margin-top: 1px;
}
.agro-offer-delete-warning strong {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
  color: #9b2c1a;
}
.agro-offer-delete-warning span {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: #6d3123;
}
.agro-offer-delete-label {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 500;
  color: #4a4a4a;
}
.agro-offer-delete-label strong {
  font-weight: 700;
  color: #c0392b;
  letter-spacing: 0.5px;
  margin: 0 3px;
}
.agro-offer-delete-input {
  width: 100%;
  letter-spacing: 3px;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
}
.agro-offer-delete-input::placeholder {
  letter-spacing: 3px;
  opacity: 0.4;
  font-weight: 500;
}
.agro-offer-delete-input:focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}
#delete_offer_confirm_btn[disabled],
#delete_offer_confirm_btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Mark-as-sold variant — amber/warning instead of red/danger */
#mark-sold-offer-modal .modal-body > p {
  margin: 0 0 14px;
  color: #333;
  font-size: 14px;
}
.agro-offer-delete-warning--sold {
  background: #fff8e6;
  border-color: #f2c870;
  color: #7a4f0a;
}
.agro-offer-delete-warning--sold > svg {
  color: #c97a11;
}
.agro-offer-delete-warning--sold strong {
  color: #7a4f0a;
}
.agro-offer-delete-warning--sold span {
  color: #5c3d0a;
}
.agro-offer-delete-label__token--sold {
  color: #c97a11 !important;
}
#mark_sold_confirm:focus {
  border-color: #c97a11;
  box-shadow: 0 0 0 3px rgba(201, 122, 17, 0.12);
}
#mark_sold_confirm_btn[disabled],
#mark_sold_confirm_btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
/* ==========================================================================
   Edit Offer Modal — napredni 2-kolonski layout (desktop) + akordeon (mobile)
   .agro-edit-offer BEM, koristi :root --agro-* tokene
   ========================================================================== */

/* Modal wrapper override — wider + clean header */
#edit-offer-modal .modal-dialog {
  max-width: 1040px;
  width: calc(100vw - 32px);
  margin: 24px auto;
}
#edit-offer-modal .modal-content {
  border-radius: var(--agro-radius-lg);
  border: 1px solid var(--agro-border);
  background: var(--agro-surface);
  overflow: hidden;
}
#edit-offer-modal .modal-header {
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--agro-primary) 0%, var(--agro-primary-dark) 100%);
  color: #fff;
  border-bottom: none;
}
#edit-offer-modal .modal-header .close {
  color: #fff;
  opacity: 0.9;
  text-shadow: none;
  font-size: 28px;
  line-height: 1;
}
#edit-offer-modal .modal-header .close:hover { opacity: 1; }
#edit-offer-modal .modal-title {
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
}
#edit-offer-modal .modal-body {
  padding: 0;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}

/* Root container */
.agro-edit-offer {
  font-family: inherit;
  color: var(--agro-text);
}
.agro-edit-offer__form {
  display: flex;
  flex-direction: column;
}

/* ─── STATUS STRIP ──────────────────────────────────────────── */
.agro-edit-offer__status-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px;
  background: var(--agro-surface-card);
  border-bottom: 1px solid var(--agro-border);
}
.agro-edit-offer__status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--agro-radius-pill);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.agro-edit-offer__status-badge--active {
  background: #e8f5e9;
  color: var(--agro-primary-dark);
}
.agro-edit-offer__status-badge--expired {
  background: #fff3e0;
  color: #b76200;
}
.agro-edit-offer__status-badge--sold {
  background: #eceff1;
  color: #455a64;
}
.agro-edit-offer__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.agro-edit-offer__status-badge--active .agro-edit-offer__status-dot {
  animation: agro-edit-pulse 1.8s ease-in-out infinite;
}
@keyframes agro-edit-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.agro-edit-offer__status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--agro-radius-pill);
  font-size: 11px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--agro-premium-gold-light), var(--agro-premium-gold));
  color: #6b4c00;
}
.agro-edit-offer__status-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--agro-text-secondary);
  margin-left: auto;
}
.agro-edit-offer__status-expires {
  color: var(--agro-primary-dark);
  font-weight: 600;
}

/* ─── STATS ROW ─────────────────────────────────────────────── */
.agro-edit-offer__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--agro-border);
  border-bottom: 1px solid var(--agro-border);
}
.agro-edit-offer__stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--agro-surface);
}
.agro-edit-offer__stat-icon {
  flex: none;
  color: var(--agro-primary);
  opacity: 0.85;
}
.agro-edit-offer__stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--agro-text);
  line-height: 1;
}
.agro-edit-offer__stat-label {
  font-size: 12px;
  color: var(--agro-text-muted);
  text-transform: lowercase;
}

/* ─── GRID LAYOUT (desktop = 2-kol, mobile = 1-kol) ────────── */
.agro-edit-offer__grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  padding: 20px;
}
.agro-edit-offer__form-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* ─── SECTIONS (details/summary) ───────────────────────────── */
.agro-edit-offer__sec {
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.agro-edit-offer__sec[open] {
  border-color: color-mix(in srgb, var(--agro-primary) 18%, var(--agro-border) 82%);
}
.agro-edit-offer__sec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  background: var(--agro-surface-card);
  user-select: none;
}
.agro-edit-offer__sec-head::-webkit-details-marker { display: none; }
.agro-edit-offer__sec-head::marker { display: none; }
.agro-edit-offer__sec-head:hover {
  background: color-mix(in srgb, var(--agro-primary) 4%, var(--agro-surface-card) 96%);
}
.agro-edit-offer__sec-icon {
  flex: none;
  color: var(--agro-primary);
}
.agro-edit-offer__sec-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--agro-text);
  flex: 1;
}
.agro-edit-offer__sec-badge {
  padding: 2px 9px;
  border-radius: var(--agro-radius-pill);
  background: var(--agro-primary-bg);
  color: var(--agro-primary-dark);
  font-size: 11px;
  font-weight: 700;
}
.agro-edit-offer__sec-chevron {
  color: var(--agro-text-muted);
  transition: transform 0.2s ease;
  flex: none;
}
.agro-edit-offer__sec[open] .agro-edit-offer__sec-chevron {
  transform: rotate(180deg);
}
.agro-edit-offer__sec-body {
  padding: 4px 16px 16px;
  border-top: 1px solid color-mix(in srgb, var(--agro-border) 70%, transparent);
}
.agro-edit-offer__sec--danger {
  border-color: #f3b6ac;
  background: #fff8f6;
}
.agro-edit-offer__sec--danger .agro-edit-offer__sec-head {
  background: #fff8f6;
}
.agro-edit-offer__sec--danger .agro-edit-offer__sec-icon {
  color: #c0392b;
}
.agro-edit-offer__sec--danger[open] {
  border-color: #c0392b;
}

/* ─── FIELDS ───────────────────────────────────────────────── */
.agro-edit-offer__field {
  margin-top: 14px;
}
.agro-edit-offer__field:first-child { margin-top: 10px; }
.agro-edit-offer__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.agro-edit-offer__field--half { margin-top: 14px; }
.agro-edit-offer__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.agro-edit-offer__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--agro-text-secondary);
  margin-bottom: 6px;
}
.agro-edit-offer__counter {
  font-size: 11px;
  font-weight: 600;
  color: var(--agro-text-muted);
  font-variant-numeric: tabular-nums;
}
.agro-edit-offer__counter--warn { color: var(--agro-warning); }
.agro-edit-offer__counter--danger { color: var(--agro-danger); }

.agro-edit-offer__input,
.agro-edit-offer__select,
.agro-edit-offer__textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--agro-surface);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-sm);
  font-size: 14px;
  color: var(--agro-text);
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.agro-edit-offer__textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}
.agro-edit-offer__input:focus,
.agro-edit-offer__select:focus,
.agro-edit-offer__textarea:focus {
  outline: none;
  border-color: var(--agro-primary);
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);
}
.agro-edit-offer__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a5e55' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* ─── PRICE INPUT (sa RSD sufiksom) ───────────────────────── */
.agro-edit-offer__price-wrap {
  position: relative;
}
.agro-edit-offer__input--price { padding-right: 52px; }
.agro-edit-offer__price-suffix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 700;
  color: var(--agro-text-muted);
  pointer-events: none;
  letter-spacing: 0.3px;
}

/* ─── RADIO GROUP (novo/polovno) ──────────────────────────── */
.agro-edit-offer__radio-group {
  display: flex;
  gap: 8px;
}
.agro-edit-offer__radio {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--agro-surface);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--agro-text);
  transition: all 0.15s ease;
  user-select: none;
}
.agro-edit-offer__radio:hover {
  border-color: color-mix(in srgb, var(--agro-primary) 40%, var(--agro-border) 60%);
}
.agro-edit-offer__radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.agro-edit-offer__radio-dot {
  width: 16px;
  height: 16px;
  border: 2px solid var(--agro-border);
  border-radius: 50%;
  position: relative;
  transition: all 0.15s ease;
  flex: none;
}
.agro-edit-offer__radio.is-active,
.agro-edit-offer__radio:has(input:checked) {
  border-color: var(--agro-primary);
  background: var(--agro-primary-bg);
  color: var(--agro-primary-dark);
  font-weight: 600;
}
.agro-edit-offer__radio.is-active .agro-edit-offer__radio-dot,
.agro-edit-offer__radio:has(input:checked) .agro-edit-offer__radio-dot {
  border-color: var(--agro-primary);
  background: var(--agro-primary);
  box-shadow: inset 0 0 0 3px var(--agro-surface);
}

/* ─── TOGGLE SWITCH (is_negotiable) ───────────────────────── */
.agro-edit-offer__toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: var(--agro-surface);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 22px;
}
.agro-edit-offer__toggle:hover {
  border-color: color-mix(in srgb, var(--agro-primary) 40%, var(--agro-border) 60%);
}
.agro-edit-offer__toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.agro-edit-offer__toggle-track {
  width: 36px;
  height: 20px;
  border-radius: 20px;
  background: var(--agro-border);
  position: relative;
  transition: background 0.2s ease;
  flex: none;
  margin-top: 2px;
}
.agro-edit-offer__toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.agro-edit-offer__toggle:has(input:checked) {
  border-color: var(--agro-primary);
  background: var(--agro-primary-bg);
}
.agro-edit-offer__toggle:has(input:checked) .agro-edit-offer__toggle-track {
  background: var(--agro-primary);
}
.agro-edit-offer__toggle:has(input:checked) .agro-edit-offer__toggle-thumb {
  transform: translateX(16px);
}
.agro-edit-offer__toggle-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}
.agro-edit-offer__toggle-text strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--agro-text);
}
.agro-edit-offer__toggle-text small {
  font-size: 11px;
  color: var(--agro-text-muted);
}

/* ─── HINT TEXT ───────────────────────────────────────────── */
.agro-edit-offer__hint {
  font-size: 12px;
  color: var(--agro-text-muted);
  margin: 8px 0 12px;
  line-height: 1.4;
}

/* ─── GALLERY ─────────────────────────────────────────────── */
.agro-edit-offer__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.agro-edit-offer__tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--agro-radius-sm);
  overflow: hidden;
  background: var(--agro-surface-input);
  border: 2px solid transparent;
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.agro-edit-offer__tile:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}
.agro-edit-offer__tile:active { cursor: grabbing; }
.agro-edit-offer__tile.is-dragging {
  opacity: 0.45;
  transform: scale(0.95);
}
.agro-edit-offer__tile.is-drop-target {
  border-color: var(--agro-primary);
  box-shadow: 0 0 0 3px var(--agro-primary-bg);
}
.agro-edit-offer__tile--primary {
  border-color: var(--agro-premium-gold);
  box-shadow: 0 0 0 1px var(--agro-premium-gold);
}
.agro-edit-offer__tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.agro-edit-offer__tile-drag {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--agro-radius-sm);
  background: rgba(0,0,0,0.55);
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.agro-edit-offer__tile:hover .agro-edit-offer__tile-drag { opacity: 1; }
.agro-edit-offer__tile-star,
.agro-edit-offer__tile-del {
  position: absolute;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--agro-radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}
.agro-edit-offer__tile-star {
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,0.55);
  color: #fff;
}
.agro-edit-offer__tile-star:hover {
  background: var(--agro-premium-gold);
}
.agro-edit-offer__tile-star[aria-pressed="true"] {
  background: var(--agro-premium-gold);
  color: #fff;
}
.agro-edit-offer__tile-del {
  bottom: 4px;
  right: 4px;
  background: rgba(198, 40, 40, 0.85);
  color: #fff;
}
.agro-edit-offer__tile-del:hover { background: var(--agro-danger); }
.agro-edit-offer__tile-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  padding: 2px 7px;
  background: var(--agro-premium-gold);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--agro-radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Upload tile */
.agro-edit-offer__upload {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: var(--agro-surface-input);
  border: 2px dashed var(--agro-border);
  border-radius: var(--agro-radius-sm);
  cursor: pointer;
  color: var(--agro-text-muted);
  transition: all 0.15s ease;
  text-align: center;
}
.agro-edit-offer__upload:hover {
  border-color: var(--agro-primary);
  background: var(--agro-primary-bg);
  color: var(--agro-primary-dark);
}
.agro-edit-offer__upload-label {
  font-size: 12px;
  font-weight: 600;
}
.agro-edit-offer__upload-hint {
  font-size: 10px;
  line-height: 1.3;
  opacity: 0.75;
}
.agro-edit-offer__upload-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ─── DANGER ZONE ACTIONS ─────────────────────────────────── */
.agro-edit-offer__danger-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.agro-edit-offer__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--agro-radius-sm);
  border: 1px solid;
  background: var(--agro-surface);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.agro-edit-offer__action--sold {
  border-color: #f2c870;
  color: #7a4f0a;
}
.agro-edit-offer__action--sold:hover {
  background: #fff8e6;
  border-color: #c97a11;
}
.agro-edit-offer__action--renew {
  border-color: var(--agro-primary);
  color: var(--agro-primary-dark);
}
.agro-edit-offer__action--renew:hover {
  background: var(--agro-primary-bg);
}
.agro-edit-offer__action--delete {
  border-color: #f3b6ac;
  color: #9b2c1a;
}
.agro-edit-offer__action--delete:hover {
  background: #fff4f2;
  border-color: var(--agro-danger);
}

/* ─── PREVIEW COLUMN ──────────────────────────────────────── */
.agro-edit-offer__preview-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.agro-edit-offer__preview-wrap {
  position: sticky;
  top: 0;
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  padding: 14px;
}
.agro-edit-offer__preview-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--agro-text-muted);
  margin-bottom: 10px;
}
.agro-edit-offer__preview-card {
  background: var(--agro-surface);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  overflow: hidden;
  box-shadow: var(--agro-shadow-sm);
}
.agro-edit-offer__preview-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--agro-surface-input);
  overflow: hidden;
}
.agro-edit-offer__preview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s ease;
}
.agro-edit-offer__preview-cond {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  background: rgba(255,255,255,0.95);
  border-radius: var(--agro-radius-pill);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--agro-text);
}
.agro-edit-offer__preview-body {
  padding: 10px 12px 12px;
}
.agro-edit-offer__preview-cat {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--agro-text-muted);
  font-weight: 700;
}
.agro-edit-offer__preview-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--agro-text);
  line-height: 1.3;
  margin: 4px 0 6px;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.agro-edit-offer__preview-price-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.agro-edit-offer__preview-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--agro-primary-dark);
}
.agro-edit-offer__preview-negot {
  padding: 1px 7px;
  background: var(--agro-accent);
  color: #fff;
  border-radius: var(--agro-radius-pill);
  font-size: 10px;
  font-weight: 700;
}
.agro-edit-offer__preview-loc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--agro-text-muted);
}
.agro-edit-offer__preview-note {
  margin: 10px 0 0;
  font-size: 10px;
  color: var(--agro-text-muted);
  text-align: center;
  line-height: 1.4;
}

/* Tips box */
.agro-edit-offer__tips {
  background: var(--agro-primary-bg);
  border: 1px solid color-mix(in srgb, var(--agro-primary) 18%, var(--agro-border) 82%);
  border-radius: var(--agro-radius);
  padding: 12px 14px;
}
.agro-edit-offer__tips-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--agro-primary-dark);
  margin-bottom: 8px;
  font-size: 12px;
}
.agro-edit-offer__tips-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--agro-text-secondary);
}
.agro-edit-offer__tips-list li {
  margin-bottom: 4px;
}
.agro-edit-offer__tips-list li:last-child { margin-bottom: 0; }

/* ─── FOOTER ──────────────────────────────────────────────── */
.agro-edit-offer__alert {
  margin: 0 20px 12px;
  padding: 10px 14px;
  background: #fff4f2;
  border: 1px solid #f3b6ac;
  border-radius: var(--agro-radius-sm);
  color: #9b2c1a;
  font-size: 13px;
}
.agro-edit-offer__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  background: var(--agro-surface-card);
  border-top: 1px solid var(--agro-border);
  position: sticky;
  bottom: 0;
  z-index: 2;
}
.agro-edit-offer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--agro-radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  min-width: 100px;
}
.agro-edit-offer__btn--ghost {
  background: transparent;
  border-color: var(--agro-border);
  color: var(--agro-text-secondary);
}
.agro-edit-offer__btn--ghost:hover {
  background: var(--agro-surface);
  border-color: var(--agro-text-muted);
}
.agro-edit-offer__btn--primary {
  background: var(--agro-primary);
  color: #fff;
}
.agro-edit-offer__btn--primary:hover {
  background: var(--agro-primary-dark);
  box-shadow: var(--agro-shadow-sm);
}
.agro-edit-offer__btn--primary:disabled {
  opacity: 0.6;
  cursor: wait;
}
.agro-edit-offer__btn-spinner svg {
  animation: agro-edit-spin 0.9s linear infinite;
}
@keyframes agro-edit-spin {
  to { transform: rotate(360deg); }
}

/* ─── RESPONSIVE (mobile accordion) ───────────────────────── */
@media (max-width: 860px) {
  #edit-offer-modal .modal-dialog {
    margin: 0;
    width: 100vw;
    max-width: 100vw;
  }
  #edit-offer-modal .modal-content {
    border-radius: 0;
    min-height: 100vh;
  }
  #edit-offer-modal .modal-body {
    max-height: calc(100vh - 56px);
  }
  .agro-edit-offer__grid {
    grid-template-columns: 1fr;
    padding: 14px;
    gap: 14px;
  }
  .agro-edit-offer__preview-col {
    order: -1; /* preview kartica iznad forme */
  }
  .agro-edit-offer__preview-wrap {
    position: static;
  }
  .agro-edit-offer__stats {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .agro-edit-offer__stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 12px;
  }
  .agro-edit-offer__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .agro-edit-offer__toggle { margin-top: 8px; }
  .agro-edit-offer__status-meta {
    margin-left: 0;
    flex-basis: 100%;
  }
  .agro-edit-offer__footer {
    padding: 12px 14px;
  }
  .agro-edit-offer__btn { flex: 1; }
}

@media (max-width: 480px) {
  .agro-edit-offer__gallery {
    grid-template-columns: repeat(3, 1fr);
  }
  .agro-edit-offer__stats {
    grid-template-columns: 1fr;
  }
  .agro-edit-offer__stat {
    flex-direction: row;
    align-items: center;
  }
}

/* ==========================================================================
   Media Hub (Moji mediji) — unifikovani hub za albume, video i sacuvane objave.
   Spec: docs/design-specs/media-hub-redesign.md
   ========================================================================== */

.media-hub {
  background: var(--agro-surface);
  border-radius: var(--agro-radius-lg);
  padding: var(--agro-space-lg);
  margin-bottom: var(--agro-space-lg);
}

.media-hub__masthead {
  margin-bottom: var(--agro-space-lg);
}

.media-hub__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--agro-text);
  margin: 0 0 var(--agro-space-xs) 0;
}

.media-hub__lede {
  font-size: 14px;
  color: var(--agro-text-secondary);
  margin: 0;
}

/* ── Tabs ────────────────────────────────────────────────── */
.media-hub__tabs {
  display: flex;
  gap: var(--agro-space-xs);
  border-bottom: 2px solid var(--agro-border);
  margin-bottom: var(--agro-space-md);
  overflow-x: auto;
  scrollbar-width: none;
}

.media-hub__tabs::-webkit-scrollbar {
  display: none;
}

.media-hub__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--agro-space-xs);
  padding: 12px 16px;
  min-height: 44px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--agro-text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--agro-transition), border-color var(--agro-transition);
  white-space: nowrap;
}

.media-hub__tab:hover {
  color: var(--agro-primary);
}

.media-hub__tab.is-active {
  color: var(--agro-primary);
  border-bottom-color: var(--agro-primary);
}

.media-hub__tab:focus-visible {
  outline: none;
  box-shadow: var(--agro-focus-ring);
  border-radius: var(--agro-radius-sm);
}

.media-hub__tab-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  background: var(--agro-primary-soft);
  color: var(--agro-primary-dark);
  border-radius: var(--agro-radius-pill);
  font-size: 12px;
  font-weight: 700;
}

.media-hub__tab.is-active .media-hub__tab-counter {
  background: var(--agro-primary);
  color: #fff;
}

/* ── Filter chip-ovi (video tab) ─────────────────────────── */
.media-hub__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--agro-space-xs);
  margin-bottom: var(--agro-space-md);
}

.media-hub__chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius-pill);
  color: var(--agro-text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--agro-transition);
}

.media-hub__chip:hover {
  border-color: var(--agro-primary);
  color: var(--agro-primary);
}

.media-hub__chip.is-active {
  background: var(--agro-primary);
  border-color: var(--agro-primary);
  color: #fff;
}

.media-hub__chip:focus-visible {
  outline: none;
  box-shadow: var(--agro-focus-ring);
}

/* ── Grid ────────────────────────────────────────────────── */
.media-hub__panel {
  min-height: 200px;
}

.media-hub__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--agro-space-md);
}

/* ── Card ────────────────────────────────────────────────── */
.media-hub__card {
  position: relative;
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  overflow: hidden;
  transition: box-shadow var(--agro-transition), transform var(--agro-transition);
}

.media-hub__card:hover {
  box-shadow: var(--agro-shadow-md);
  transform: translateY(-2px);
}

.media-hub__card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.media-hub__card-link:hover,
.media-hub__card-link:focus {
  color: inherit;
  text-decoration: none;
}

.media-hub__card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--agro-surface-alt);
  overflow: hidden;
}

.media-hub__card-media img,
.media-hub__card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-hub__card-media-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
}

.media-hub__card-body {
  padding: var(--agro-space-sm) var(--agro-space-md);
}

.media-hub__card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--agro-text);
  margin: 0 0 4px 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.media-hub__card-meta {
  font-size: 12px;
  color: var(--agro-text-muted);
  margin: 0;
}

.media-hub__card-author {
  font-size: 12px;
  color: var(--agro-text-muted);
  margin: 0 0 4px 0;
}

.media-hub__card-snippet {
  font-size: 13px;
  color: var(--agro-text-secondary);
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.media-hub__card-action {
  position: absolute;
  top: var(--agro-space-xs);
  right: var(--agro-space-xs);
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--agro-border);
  border-radius: 50%;
  color: var(--agro-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--agro-transition);
  z-index: 1;
}

.media-hub__card-action:hover {
  background: var(--agro-primary);
  color: #fff;
  border-color: var(--agro-primary);
}

.media-hub__card-action:focus-visible {
  outline: none;
  box-shadow: var(--agro-focus-ring);
}

/* ── Empty state ─────────────────────────────────────────── */
.media-hub__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--agro-space-xl) var(--agro-space-md);
  text-align: center;
  color: var(--agro-text-muted);
}

.media-hub__empty-icon {
  color: var(--agro-border);
  margin-bottom: var(--agro-space-md);
}

.media-hub__empty-text {
  font-size: 14px;
  color: var(--agro-text-secondary);
  max-width: 320px;
  margin: 0;
}

/* ── Load more + skeleton ────────────────────────────────── */
.media-hub__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--agro-space-sm);
  margin-top: var(--agro-space-lg);
}

.media-hub__load-more {
  min-height: 44px;
  padding: 0 var(--agro-space-lg);
  background: var(--agro-surface-card);
  border: 1px solid var(--agro-primary);
  border-radius: var(--agro-radius);
  color: var(--agro-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--agro-transition);
}

.media-hub__load-more:hover {
  background: var(--agro-primary);
  color: #fff;
}

.media-hub__load-more:focus-visible {
  outline: none;
  box-shadow: var(--agro-focus-ring);
}

.media-hub__load-error {
  color: var(--agro-danger);
  font-size: 13px;
  margin: 0;
}

.media-hub__skeleton {
  background: linear-gradient(90deg, var(--agro-surface-alt) 0%, var(--agro-surface-card) 50%, var(--agro-surface-alt) 100%);
  background-size: 200% 100%;
  animation: agro-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--agro-radius);
  aspect-ratio: 4 / 3;
}

/* ── Modal (Izmeni video) — dopuna za .agro-modal base ────── */
.agro-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: var(--agro-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--agro-space-md);
}

.agro-modal[hidden] {
  display: none;
}

.agro-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.agro-modal__panel {
  position: relative;
  background: var(--agro-surface-card);
  border-radius: var(--agro-radius-lg);
  max-width: 480px;
  width: 100%;
  max-height: calc(100vh - var(--agro-space-xl));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--agro-shadow-lg);
}

.agro-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--agro-space-md) var(--agro-space-lg);
  border-bottom: 1px solid var(--agro-border);
}

.agro-modal__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--agro-text);
  margin: 0;
}

.agro-modal__close {
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--agro-text-muted);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--agro-radius-sm);
}

.agro-modal__close:hover {
  color: var(--agro-text);
  background: var(--agro-surface-alt);
}

.agro-modal__body {
  padding: var(--agro-space-lg);
  overflow-y: auto;
}

.agro-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--agro-space-sm);
  padding: var(--agro-space-md) var(--agro-space-lg);
  border-top: 1px solid var(--agro-border);
}

/* Media hub modal specifike */
.media-hub__modal-thumb {
  margin: 0 0 var(--agro-space-md) 0;
  text-align: center;
}

.media-hub__modal-thumb img {
  max-width: 100%;
  max-height: 200px;
  border-radius: var(--agro-radius);
  background: var(--agro-surface-alt);
}

.media-hub__modal-thumb-label {
  display: block;
  font-size: 12px;
  color: var(--agro-text-muted);
  margin-bottom: var(--agro-space-xs);
}

.media-hub__modal-field {
  display: flex;
  flex-direction: column;
  gap: var(--agro-space-xs);
}

.media-hub__modal-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--agro-text-secondary);
}

.media-hub__modal-select {
  min-height: 44px;
  padding: 0 var(--agro-space-md);
  background: var(--agro-surface-input);
  border: 1px solid var(--agro-border);
  border-radius: var(--agro-radius);
  color: var(--agro-text);
  font-size: 14px;
  width: 100%;
}

.media-hub__modal-select:focus-visible {
  outline: none;
  box-shadow: var(--agro-focus-ring);
  border-color: var(--agro-focus-border);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 992px) {
  .media-hub__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .media-hub { padding: var(--agro-space-md); }
  .media-hub__grid { grid-template-columns: repeat(2, 1fr); gap: var(--agro-space-sm); }
  .media-hub__title { font-size: 20px; }
}

@media (max-width: 480px) {
  .media-hub__grid { grid-template-columns: repeat(2, 1fr); }
  .media-hub__card-body { padding: var(--agro-space-xs) var(--agro-space-sm); }
}

@media (max-width: 360px) {
  .media-hub__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Sačuvane objave — page-level masthead u stilu platforme (Moji mediji family).
   ========================================================================== */

.agro-saved {
  background: var(--agro-surface);
  border-radius: var(--agro-radius-lg);
  padding: var(--agro-space-lg);
  margin-bottom: var(--agro-space-lg);
}

.agro-saved__masthead {
  margin-bottom: var(--agro-space-lg);
  padding-bottom: var(--agro-space-md);
  border-bottom: 1px solid var(--agro-border);
}

.agro-saved__headline {
  display: flex;
  align-items: center;
  gap: var(--agro-space-sm);
  margin-bottom: var(--agro-space-xs);
}

.agro-saved__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--agro-radius-md);
  background: var(--agro-primary-soft);
  color: var(--agro-primary-dark);
  flex-shrink: 0;
}

.agro-saved__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--agro-text);
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.agro-saved__counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 26px;
  padding: 0 10px;
  background: var(--agro-primary);
  color: #fff;
  border-radius: var(--agro-radius-pill);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.agro-saved__lede {
  font-size: 14px;
  color: var(--agro-text-secondary);
  margin: 0;
  padding-left: calc(40px + var(--agro-space-sm));
}

.agro-saved__panel {
  min-height: 120px;
}

.agro-saved__list {
  display: flex;
  flex-direction: column;
  gap: var(--agro-space-md);
}

.agro-saved__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--agro-space-sm);
  padding: var(--agro-space-xl) var(--agro-space-md);
  text-align: center;
  color: var(--agro-text-secondary);
}

.agro-saved__empty-icon {
  color: var(--agro-text-muted, var(--agro-text-secondary));
  opacity: 0.6;
}

.agro-saved__empty-text {
  font-size: 15px;
  margin: 0;
  max-width: 480px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .agro-saved { padding: var(--agro-space-md); }
  .agro-saved__title { font-size: 20px; }
  .agro-saved__lede { padding-left: 0; }
}

@media (max-width: 480px) {
  .agro-saved__icon { width: 36px; height: 36px; }
  .agro-saved__counter { min-width: 28px; height: 22px; font-size: 12px; }
}

/* =============================================================================
   Migration 149: Članovi tima entiteta (entity_members invite/accept/decline)
   PRD: docs/PRD_ENTITY_MEMBERS_INVITE.md v1.1
   Spec: docs/design-specs/entity-members.md
   ============================================================================= */

:root {
  /* Pastelne info nijanse za info-only notif kartice (entity_invite_accepted/declined) */
  --agro-info-bg:           #e3f2fd;
  --agro-info-bg-strong:    #bbdefb;
  --agro-info-text:         #0d47a1;
  /* Pending badge pastel (sekcija 9 dizajn spec — fix kontrast za PENDING badge) */
  --agro-bg-pending:        #fff3e0;
  --agro-text-pending:      #e65100;
}

/* ============== Tim tab kartica (page-setting/members.phtml) ============== */

.agro-team-tab__invite-card {
  background: var(--agro-bg-section, #f5f1e8);
  border: 1px solid var(--agro-border, #d7cfb8);
  border-radius: var(--agro-radius-md, 12px);
  padding: 20px;
  margin-bottom: 20px;
}
.agro-team-tab__subtitle {
  font-size: 16px;
  font-weight: 600;
  color: var(--agro-text, #1a2e1a);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.agro-team-tab__count {
  color: var(--agro-text-muted, #5a6a5a);
  font-weight: 400;
}
.agro-team-tab__search-row {
  position: relative;
}
.agro-team-tab__search-results {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agro-team-tab__search-results:empty {
  display: none;
}
.agro-team-tab__list-section {
  margin-top: 24px;
}
.agro-team-tab__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agro-team-tab__empty {
  text-align: center;
  padding: 32px 16px;
  background: var(--agro-bg-section, #f5f1e8);
  border-radius: var(--agro-radius-md, 12px);
  color: var(--agro-text-muted, #5a6a5a);
}
.agro-team-tab__empty svg {
  margin-bottom: 8px;
  opacity: 0.6;
}
.agro-team-tab__empty p {
  margin: 0;
  font-size: 15px;
}
.agro-team-tab__empty--small {
  padding: 16px;
}

/* ============== Member row (kartica člana / pending) ============== */

.agro-member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--agro-surface, #ffffff);
  border: 1px solid var(--agro-border, #d7cfb8);
  border-radius: var(--agro-radius-md, 12px);
  min-height: 72px;
}
.agro-member-row__avatar {
  flex: 0 0 auto;
  display: block;
  width: 48px;
  height: 48px;
}
.agro-member-row__avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.agro-member-row__info {
  flex: 1 1 auto;
  min-width: 0;
}
.agro-member-row__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.agro-member-row__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--agro-text, #1a2e1a);
  text-decoration: none;
}
.agro-member-row__name:hover {
  color: var(--agro-primary, #2e7d32);
  text-decoration: underline;
}
.agro-member-row__meta {
  font-size: 13px;
  color: var(--agro-text-muted, #5a6a5a);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.agro-member-row__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--agro-radius-sm, 6px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.agro-member-row__badge--pending {
  background: var(--agro-bg-pending);
  color: var(--agro-text-pending);
}
.agro-member-row__action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--agro-radius-md, 12px);
  background: transparent;
  border: 1px solid;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.agro-member-row__action--remove {
  border-color: var(--agro-danger, #c62828);
  color: var(--agro-danger-text, #b71c1c);
}
.agro-member-row__action--remove:hover {
  background: var(--agro-danger, #c62828);
  color: #fff;
}
.agro-member-row__action--invite {
  background: var(--agro-primary, #2e7d32);
  border-color: var(--agro-primary, #2e7d32);
  color: #fff;
}
.agro-member-row__action--invite:hover {
  background: var(--agro-primary-dark, #1b5e20);
}
.agro-member-row__action.is-disabled,
.agro-member-row__action[disabled] {
  background: var(--agro-bg-section, #f5f1e8);
  border-color: var(--agro-border, #d7cfb8);
  color: var(--agro-text-muted, #5a6a5a);
  cursor: not-allowed;
}
.agro-member-row--search-result {
  background: var(--agro-surface, #ffffff);
}
.agro-member-row--pending {
  background: var(--agro-bg-section, #f5f1e8);
}

@media (max-width: 480px) {
  .agro-member-row {
    flex-wrap: wrap;
  }
  .agro-member-row__action {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }
  .agro-member-row__info {
    flex: 1 1 calc(100% - 60px);
  }
}

/* ============== Tim sekcija na javnom profilu (team-section.phtml) ============== */

.agro-team-section .agro-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.agro-team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px;
  background: var(--agro-surface, #ffffff);
  border: 1px solid var(--agro-border, #d7cfb8);
  border-radius: var(--agro-radius-md, 12px);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.agro-team-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.agro-team-card__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 8px;
}
.agro-team-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--agro-text, #1a2e1a);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.agro-team-card__handle {
  font-size: 12px;
  color: var(--agro-text-muted, #5a6a5a);
  margin-top: 2px;
}
.agro-profile-section__count {
  font-size: 14px;
  font-weight: 400;
  color: var(--agro-text-muted, #5a6a5a);
  margin-left: 4px;
}

/* ============== Notif dropdown — inline Prihvati/Odbij dugmad ============== */

.notification-list__actions {
  display: inline-flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.notification-list__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: var(--agro-radius-sm, 6px);
  border: 1px solid;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
.notification-list__action:focus-visible {
  outline: 2px solid var(--agro-primary, #2e7d32);
  outline-offset: 2px;
}
.notification-list__action--accept {
  background: var(--agro-primary, #2e7d32);
  border-color: var(--agro-primary, #2e7d32);
  color: #ffffff;
}
.notification-list__action--accept:hover {
  background: var(--agro-primary-dark, #1b5e20);
}
.notification-list__action--decline {
  background: transparent;
  border-color: var(--agro-border, #d7cfb8);
  color: var(--agro-text-muted, #5a6a5a);
}
.notification-list__action--decline:hover {
  background: var(--agro-bg-section, #f5f1e8);
  color: var(--agro-text, #1a2e1a);
}
.notification-list__action[disabled] {
  cursor: wait;
  opacity: 0.6;
}
.notification-list__resolved {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: var(--agro-radius-sm, 6px);
  font-size: 13px;
  font-weight: 500;
  background: var(--agro-info-bg);
  color: var(--agro-info-text);
}
.notification-list__resolved--declined {
  background: var(--agro-bg-section, #f5f1e8);
  color: var(--agro-text-muted, #5a6a5a);
}

/* ============== My-pages invitation cards (Pozivnice za vas + Pridružen sam u) ============== */

.agro-mg-invitations {
  margin: 24px 0;
  padding: 0 16px;
}
.agro-mg-invitations__section + .agro-mg-invitations__section {
  margin-top: 28px;
}
.agro-mg-invitations__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--agro-text, #1a2e1a);
  margin: 0 0 12px 0;
}
.agro-mg-invitations__count {
  font-size: 14px;
  font-weight: 400;
  color: var(--agro-text-muted, #5a6a5a);
}
.agro-mg-invitations__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agro-mg-invitation-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--agro-surface, #ffffff);
  border: 1px solid var(--agro-border, #d7cfb8);
  border-radius: var(--agro-radius-md, 12px);
}
.agro-mg-invitation-card__avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.agro-mg-invitation-card__body {
  flex: 1 1 auto;
  min-width: 0;
}
.agro-mg-invitation-card__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--agro-text, #1a2e1a);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.agro-mg-invitation-card__title a {
  color: inherit;
  text-decoration: none;
}
.agro-mg-invitation-card__title a:hover {
  color: var(--agro-primary, #2e7d32);
}
.agro-mg-invitation-card__type-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--agro-radius-sm, 6px);
  background: var(--agro-bg-section, #f5f1e8);
  color: var(--agro-text-muted, #5a6a5a);
}
.agro-mg-invitation-card__meta {
  font-size: 13px;
  color: var(--agro-text-muted, #5a6a5a);
  margin: 4px 0 0 0;
}
.agro-mg-invitation-card__actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.agro-mg-invitation-card__btn {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--agro-radius-md, 12px);
  border: 1px solid;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.agro-mg-invitation-card__btn--accept {
  background: var(--agro-primary, #2e7d32);
  border-color: var(--agro-primary, #2e7d32);
  color: #fff;
}
.agro-mg-invitation-card__btn--accept:hover {
  background: var(--agro-primary-dark, #1b5e20);
}
.agro-mg-invitation-card__btn--decline {
  background: transparent;
  border-color: var(--agro-border, #d7cfb8);
  color: var(--agro-text, #1a2e1a);
}
.agro-mg-invitation-card__btn--decline:hover {
  background: var(--agro-bg-section, #f5f1e8);
}
.agro-mg-invitation-card__btn--leave {
  background: transparent;
  border-color: var(--agro-danger, #c62828);
  color: var(--agro-danger-text, #b71c1c);
}
.agro-mg-invitation-card__btn--leave:hover {
  background: var(--agro-danger, #c62828);
  color: #fff;
}
.agro-mg-invitation-card[disabled],
.agro-mg-invitation-card[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

@media (max-width: 480px) {
  .agro-mg-invitation-card {
    flex-wrap: wrap;
  }
  .agro-mg-invitation-card__actions {
    width: 100%;
    justify-content: stretch;
  }
  .agro-mg-invitation-card__btn {
    flex: 1 1 0;
  }
}

/* sr-only utility (ako nije već definisana) */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Subscription upgrade slide-in panel
   Desktop: 50% sa desne strane | Mobile (≤768px): bottom-sheet ~95% visine
   ========================================================================== */
.wow_sub_panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 15, 0.62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 1;
  pointer-events: auto;
  transition: opacity 220ms ease;
  z-index: calc(var(--agro-z-modal, 1000) - 1);
}
.wow_sub_panel-backdrop.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.wow_sub_panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 30vw;
  min-width: 420px;
  max-width: 100vw;
  height: 100vh;
  background: var(--agro-surface);
  box-shadow: -8px 0 32px rgba(26, 46, 26, 0.22);
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: var(--agro-z-modal, 1000);
  overflow: hidden;
}
.wow_sub_panel.is-hidden {
  transform: translateX(100%);
  pointer-events: none;
}

.wow_sub_panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--agro-border);
  background: var(--agro-surface-card);
  flex-shrink: 0;
}
.wow_sub_panel__title {
  margin: 0;
  font-family: var(--agro-font-heading);
  font-size: var(--agro-font-size-h3);
  font-weight: 700;
  color: var(--agro-text);
  line-height: 1.2;
}
.wow_sub_panel__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: var(--agro-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.wow_sub_panel__close:hover {
  background: rgba(0, 0, 0, 0.10);
}

.wow_sub_panel__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 24px;
  background: var(--agro-surface);
}

.wow_sub_panel__loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--agro-text-muted);
  font-size: var(--agro-font-size-sm);
}
.wow_sub_panel__loader[hidden] { display: none; }
.wow_sub_panel__spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--agro-border);
  border-top-color: var(--agro-primary);
  animation: wow_sub_panel_spin 0.8s linear infinite;
}
@keyframes wow_sub_panel_spin {
  to { transform: rotate(360deg); }
}

.wow_sub_panel__content[hidden] { display: none; }
/* Reset upgrade page chrome — u panelu nema potrebe za dodatnim padding/max-width */
.wow_sub_panel__content .agro-upgrade {
  margin: 0;
  padding: 0;
  max-width: 100%;
}
.wow_sub_panel__content .agro-upgrade__hero {
  margin-top: 0;
}

.wow_sub_panel__error {
  padding: 60px 20px;
  text-align: center;
  color: var(--agro-text-muted);
}
.wow_sub_panel__error[hidden] { display: none; }
.wow_sub_panel__error p {
  margin: 0 0 16px;
  font-size: var(--agro-font-size-sm);
}

@media (max-width: 768px) {
  .wow_sub_panel {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100vw;
    min-width: 0;
    height: 95vh;
    max-height: 95vh;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    transform: translateY(0);
    box-shadow: 0 -8px 32px rgba(26, 46, 26, 0.22);
  }
  .wow_sub_panel.is-hidden {
    transform: translateY(100%);
  }
  .wow_sub_panel__header {
    padding: 14px 18px;
  }
  .wow_sub_panel__body {
    padding: 16px 18px;
  }
  .wow_sub_panel__title {
    font-size: 18px;
  }
}

/* ============================================================================
   MOBILE P0 — U-101 Globalni horizontal overflow fix
   ----------------------------------------------------------------------------
   Verifikovan root cause (Playwright DOM inspect 2026-05-12):
     div.row w=393, left=-3, right=390, mr=-15px na 375vp = overflow +15-19px
   Uzrok: Bootstrap 3 .row { margin-left:-15px; margin-right:-15px } koji
   ne kompenzuje na mobile-u (nije u kontejneru sa odgovarajucim paddingom).
   Pogodjeno 23 od 25 ekrana — vidi docs/mobile-audit/BUGS-CATALOG.md (U-101)
   ============================================================================ */
@media (max-width: 991px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Neutralisi Bootstrap 3 negativni row margin koji curi na mobile */
  .content-container .row,
  .main_container_inner .row,
  .wow_content .row {
    margin-left: 0;
    margin-right: 0;
  }

  /* Bootstrap 3 col padding nije potreban kad row nema negative margin */
  .content-container .row > [class^="col-"],
  .content-container .row > [class*=" col-"],
  .main_container_inner .row > [class^="col-"],
  .main_container_inner .row > [class*=" col-"] {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ============================================================================
   MOBILE P0 — B-004 Cookie consent banner reposition
   ----------------------------------------------------------------------------
   Trenutno: banner sticky-bottom, visok 70px, BLOKIRA tap-ove na CTA
   (Playwright potvrdio: "subtree intercepts pointer events" na bottom-nav FAB).
   Pogadja: register, upgrade, settings, home (FAB) — sve gde je banner aktivan.
   Fix: premestiti na TOP, kompaktnije, body padding-top kompenzuje.
   ============================================================================ */
@media (max-width: 991px) {
  .cc-window.cc-bottom {
    /* Override default cookieconsent.js positioning — premesti na top */
    top: 0 !important;
    bottom: auto !important;
    /* Kompaktnije */
    padding: 8px 12px !important;
    /* Iznad postojeceg header-a */
    z-index: 9995 !important;
    font-size: 13px;
    line-height: 1.35;
    /* Ne dozvoli content overflow */
    overflow: hidden;
  }

  .cc-window.cc-banner .cc-message {
    margin: 0 8px 0 0 !important;
    flex: 1;
    font-size: 13px !important;
  }

  .cc-window .cc-link {
    padding: 4px 0 !important;
    text-decoration: underline;
    display: inline;
  }

  .cc-window.cc-banner .cc-btn {
    margin: 0 0 0 6px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    min-width: 0 !important;
    min-height: 36px;
    height: 36px;
    line-height: 1;
    border-radius: 6px;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* Kad je banner aktivan (ne-invisible), push content dole — koristi marker klasu */
  body.agro-cc-banner-active {
    padding-top: 52px;
  }

  /* Header takodje pomeren ispod banner-a */
  body.agro-cc-banner-active .header-container,
  body.agro-cc-banner-active .navbar.navbar-fixed-top {
    top: 52px !important;
  }
}

/* Manji telefoni (320px) — banner može potrajati 2 linije */
@media (max-width: 360px) {
  .cc-window.cc-bottom {
    padding: 6px 10px !important;
    flex-wrap: wrap !important;
  }
  .cc-window.cc-banner .cc-message {
    font-size: 12px !important;
    flex: 1 0 100%;
    margin-bottom: 4px !important;
  }
  body.agro-cc-banner-active {
    padding-top: 78px;
  }
  body.agro-cc-banner-active .header-container,
  body.agro-cc-banner-active .navbar.navbar-fixed-top {
    top: 78px !important;
  }
}

/* ============================================================================
   MOBILE P1 — I-401 Safe-area svestan layout (env() insets)
   ----------------------------------------------------------------------------
   container.phtml: viewport-fit=cover + theme-color + apple-* meta tagovi
   CSS: design tokeni + primena na sve sticky/fixed elemente
   Vidi docs/PRD_MOBILE_P1_POLISH.md (I-401) i 00-PATTERNS.md
   ============================================================================ */
:root {
  /* Safe-area insets — fallback 0 ako env() nije podržan */
  --agro-safe-top: env(safe-area-inset-top, 0px);
  --agro-safe-bottom: env(safe-area-inset-bottom, 0px);
  --agro-safe-left: env(safe-area-inset-left, 0px);
  --agro-safe-right: env(safe-area-inset-right, 0px);

  /* Mobile dimension tokeni */
  --agro-app-bar-height: 56px;
  --agro-tab-bar-height: 64px;
  --agro-fab-size: 56px;
  --agro-touch-target-min: 44px;
  --agro-touch-target-comfortable: 48px;
  --agro-sheet-radius: 20px;
  --agro-sheet-handle: 36px;
  --agro-sheet-backdrop: rgba(0, 0, 0, 0.4);

  /* Motion tokeni (P2 K10) */
  --agro-duration-fast: 150ms;
  --agro-duration-normal: 250ms;
  --agro-duration-slow: 350ms;
  --agro-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --agro-ease-in: cubic-bezier(0.4, 0.0, 1, 1);
  --agro-ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --agro-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Reduced motion respect — disable sve animacije za korisnike koji preferiraju */
@media (prefers-reduced-motion: reduce) {
  :root {
    --agro-duration-fast: 0ms;
    --agro-duration-normal: 0ms;
    --agro-duration-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Generic pulse animacija (P2.2 K8) — reuse na save heart, like, RSVP, etc. */
@keyframes agro-pulse-anim {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  70%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
.agro-pulse {
  animation: agro-pulse-anim var(--agro-duration-slow) var(--agro-ease-spring);
}

/* PWA Install Prompt Banner */
.agro-install-banner {
  position: fixed;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  right: 16px;
  background: var(--agro-elevated, #fff);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 95;
  transform: translateY(120%);
  opacity: 0;
  transition: transform var(--agro-duration-slow) var(--agro-ease-spring),
              opacity var(--agro-duration-normal) var(--agro-ease-out);
}
.agro-install-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.agro-install-banner img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.agro-install-banner__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.agro-install-banner__content strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--agro-text, #1f2937);
}
.agro-install-banner__content span {
  font-size: 13px;
  color: var(--agro-text-muted, #64748b);
}
.agro-install-banner__install {
  background: var(--agro-primary, #2e7d32);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  min-height: 36px;
  flex-shrink: 0;
}
.agro-install-banner__install:hover,
.agro-install-banner__install:focus-visible {
  background: var(--agro-primary-dark, #1b5e20);
}
.agro-install-banner__close {
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  font-size: 22px;
  line-height: 1;
  color: var(--agro-text-muted, #64748b);
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.agro-install-banner__close:hover,
.agro-install-banner__close:focus-visible {
  color: var(--agro-text, #1f2937);
}

/* MOBILE P2.3 — Vrati avatar u header (zatamljen od strane :not() rule iznad).
   Identity sheet (agro-header-identity-sheet.js) ga koristi kao trigger.
   Specificnost: parent .navbar-default + double class da pobedimo :not():not():not() rule. */
@media (max-width: 991px) {
  .navbar-default #head_menu_rght > li.dropdown.agro-header-identity {
    display: flex !important;
    align-items: center;
    height: 56px;
    width: auto !important;
    min-width: 40px !important;
  }
  .navbar-default #head_menu_rght > li.agro-header-identity > a.dropdown-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
  }
  /* Avatar krug u header-u (mobile) — parent je vizuelni krug sa border-om,
     img popunjava 100% parenta sa object-fit: cover.
     Bez ovih reset-a desktop pravilo (style.css:610) zadrži box-sizing
     border-box + border 2px → img od 32px se preliva ispod overflow:hidden
     i deluje pomereno. */
  .navbar-default #head_menu_rght .agro-header-identity .user-avatar {
    display: block;
    position: relative;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    overflow: hidden;
    border: 0;
    box-sizing: border-box;
    flex-shrink: 0;
    background: transparent;
    /* Anti-alias za circular crop — mask-image daje glatku ivicu,
       overflow:hidden + border-radius proizvodi jagged ivice na tamnoj pozadini. */
    -webkit-mask-image: radial-gradient(circle, #000 calc(50% - 0.5px), transparent 50%);
            mask-image: radial-gradient(circle, #000 calc(50% - 0.5px), transparent 50%);
    /* GPU compositing — eliminiše sub-pixel render artefakte */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
  .navbar-default #head_menu_rght .agro-header-identity .user-avatar img {
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px) !important;
    height: calc(100% + 2px) !important;
    border-radius: 0 !important;
    border: 0 !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    display: block;
    margin: 0 !important;
    max-width: none !important;
    max-height: none !important;
  }
}

/* Comment textarea polish (P2.3 mobile) */
@media (max-width: 991px) {
  .comment-textarea,
  .form-control.comment-textarea {
    /* Veca touch area + lakse za citanje na mobile */
    min-height: 48px;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.4;
    border-radius: 22px;
    background: var(--agro-surface, #f1f5f9);
    border: 1px solid var(--agro-border, #e5e7eb);
    transition: border-color var(--agro-duration-fast) var(--agro-ease-out),
                background var(--agro-duration-fast) var(--agro-ease-out);
  }
  .comment-textarea:focus,
  .form-control.comment-textarea:focus {
    background: var(--agro-elevated, #fff);
    border-color: var(--agro-primary, #2e7d32);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15);
  }
}

/* Events Filter FAB (P2.3 — mobile only) */
.agro-events-filter-fab {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  min-height: 48px;
  background: var(--agro-primary, #2e7d32);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(46, 125, 50, 0.35);
  transition: transform var(--agro-duration-fast) var(--agro-ease-out),
              box-shadow var(--agro-duration-fast) var(--agro-ease-out);
}
.agro-events-filter-fab:hover,
.agro-events-filter-fab:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(46, 125, 50, 0.45);
}
.agro-events-filter-fab:active {
  transform: translateY(0);
}

/* Sakrij FAB na desktop */
@media (min-width: 992px) {
  .agro-events-filter-fab { display: none !important; }
}

/* Pull-to-refresh indikator (P2.2 K7) */
.agro-ptr-indicator {
  height: 0;
  opacity: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--agro-primary, #2e7d32);
  pointer-events: none;
  will-change: height, opacity;
}
.agro-ptr-indicator__spinner {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--agro-duration-fast) var(--agro-ease-out);
}
.agro-ptr-indicator.is-ready .agro-ptr-indicator__spinner {
  transform: rotate(180deg);
}
.agro-ptr-indicator.is-refreshing .agro-ptr-indicator__spinner {
  animation: agro-ptr-spin 800ms linear infinite;
}
@keyframes agro-ptr-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 991px) {
  /* Composer / messages composer — donji safe-area inset (iznad gesture bar-a) */
  .agro-messages-composer,
  .agro-comment-composer,
  .text-sender-container {
    padding-bottom: max(8px, var(--agro-safe-bottom));
  }

  /* Sticky save bar (settings, edit forms) */
  .agro-sticky-save-bar,
  .sticky-save-bar {
    padding-bottom: max(8px, var(--agro-safe-bottom));
  }

  /* FAB (postojeci floating action buttons) */
  .agro-fab,
  .floating-action-button {
    bottom: calc(72px + var(--agro-safe-bottom));
  }

  /* Levi/desni safe-area za content na devices sa lateralnim notch-em */
  .content-container,
  .main_container_inner {
    padding-left: max(0px, var(--agro-safe-left));
    padding-right: max(0px, var(--agro-safe-right));
  }
}

/* ============================================================================
   MOBILE P1 — U-102 Touch targets 48x48 Material Design
   ----------------------------------------------------------------------------
   Audit nalaz: 30+ small targets na home, 90+ na settings, slicno drugde.
   Strategija: max-width 991px (mobile/tablet) + per-component padding za known
   offenders. NE globalni min-height (lomi tight layout).
   Cilj: 48x48 min hit area (Material Design), 44x44 min vidljiv (Apple HIG).
   Napomena: koristimo max-width umesto pointer:coarse jer touch detection nije
   uvek pouzdano (Surface, hybridni laptop-i, Playwright default).
   ============================================================================ */
@media (max-width: 991px) {
  /* Composer action ikone (camera, video, gif, smile, audio) — uvecaj hit area */
  .post-content-actions a,
  .post-content-actions button,
  .text-sender-container .sixteen-font-size,
  .publisher-content-actions a,
  .publisher-content-actions button,
  form.publisher-box .icons-list a,
  form.publisher-box .icons-list button {
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
  }

  /* Header desne ikone (search/chat/notif) — komotno za thumb */
  #head_menu_rght > li > a,
  #head_menu_rght .sixteen-font-size {
    min-width: 48px !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* 3-dot menu trigger-i (postova, eventova, threadova) */
  .agro-event-card__menu-trigger,
  .agro-post-menu-trigger,
  .post-options-menu,
  .dropdown-toggle.three-dots,
  .more-options-trigger {
    min-width: 48px;
    min-height: 48px;
    padding: 12px;
  }

  /* Cookie banner linkovi i dugmici */
  .cc-link {
    padding: 6px 4px !important;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  /* .cc-btn vec dimenzionisan u B-004 fix-u (36px min) */

  /* Footer linkovi */
  footer a,
  .copyright-info a,
  .footer-links a {
    padding: 10px 6px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Chip-ovi (filter, hashtag, kategorija) — kompromis 40px za density */
  .agro-chip,
  .filter-chip,
  .agro-feed-filter__item,
  .agro-conv-list__tab,
  .hashtag-chip {
    min-height: 40px;
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Settings tab/sub-menu linkovi */
  .agro-settings-tab,
  .agro-settings-tab-link,
  .settings-side-menu a,
  .settings-side-menu li {
    min-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
  }

  /* Cover photo upload trigger-i */
  .add-cover-photo,
  .change-cover-btn,
  .cover-upload-trigger,
  .agro-entity-cover__edit-btn {
    min-width: 48px;
    min-height: 48px;
    padding: 12px;
  }

  /* Avatar mini badge edit ikone */
  .change-avatar-btn,
  .agro-avatar-edit {
    width: 48px;
    height: 48px;
  }

  /* Save heart / RSVP / like buttons */
  .agro-event-card__save,
  .agro-offer-card__save,
  .post-like-btn,
  .reaction-trigger {
    min-width: 48px;
    min-height: 48px;
  }

  /* Modal close button (X) — povecaj hit area */
  .modal-header .close,
  .agro-modal__close,
  button[data-dismiss="modal"] {
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
  }

  /* Header panels — unified viewport-aligned tretman (V8.2).
     Sve 4 header panela (search, requests, messages, notifications) imaju
     iste position/dimension/z-index pravila na mobile-u (<=991px).
     position:fixed da se uvek anchor-uje po viewport-u, ne po parent <li>.
     Bez ovoga panel ostane offset prema krajnjem desnom delu header-a. */
  .notifications-dropdown,
  .request-list,
  .agro-chat-dropdown-panel,
  #wo_home_search {
    position: fixed !important;
    top: calc(56px + env(safe-area-inset-top, 0px) + 4px) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 80px - env(safe-area-inset-top, 0px)) !important;
    overflow-y: auto !important;
    z-index: 1051 !important;
    box-sizing: border-box !important;
  }

  /* ========================================================================
     SEARCH PANEL — MODERAN KOMPAKTAN REDIZAJN.
     Force visible input, explicit dimensions, modern styling konzistentan
     sa ostalim header panelima. Override WoWonder default Bootstrap grid/navbar
     pravila koja su kolapsirala input na 0 visini. */
  #wo_home_search {
    padding: 10px !important;
    background: var(--agro-surface-card, #fff) !important;
    border: 1px solid var(--agro-border, #e0d8c8) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14) !important;
    margin: 0 !important;
    list-style: none !important;
  }
  /* Container li — full width, no float/grid behavior */
  #wo_home_search > li,
  #wo_home_search .search-container {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  /* Form — reset Bootstrap navbar-form */
  #wo_home_search .navbar-form,
  #wo_home_search #navbar-searchbox {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    width: 100% !important;
    float: none !important;
    box-shadow: none !important;
  }
  #wo_home_search .form-group {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  /* Input wrapper — icon-prefix layout */
  #wo_home_search .inner-addon {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }
  #wo_home_search .inner-addon .feather-search,
  #wo_home_search .inner-addon .glyphicon,
  #wo_home_search .inner-addon svg {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    color: var(--agro-text-muted, #64748b) !important;
    pointer-events: none !important;
    margin: 0 !important;
    z-index: 2 !important;
  }
  /* Search input — explicit size, modern style */
  #wo_home_search .search-input,
  #wo_home_search input[type="text"] {
    width: 100% !important;
    height: 42px !important;
    line-height: 42px !important;
    padding: 0 14px 0 40px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: var(--agro-text, #1f2937) !important;
    background: var(--agro-surface, #f9fafb) !important;
    border: 1px solid var(--agro-border, #e5e7eb) !important;
    border-radius: 10px !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    display: block !important;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
  }
  #wo_home_search .search-input::placeholder {
    color: var(--agro-text-muted, #64748b) !important;
    opacity: 1 !important;
  }
  #wo_home_search .search-input:focus,
  #wo_home_search .search-input:focus-visible {
    border-color: var(--agro-primary, #2e7d32) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15) !important;
    outline: none !important;
  }
  /* Search dropdown rezultati — inline ispod input-a, ne Bootstrap floating */
  #wo_home_search .search-dropdown-container {
    position: static !important;
    display: block !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
    list-style: none !important;
    float: none !important;
    transform: none !important;
  }
  #wo_home_search .search-dropdown-container > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #wo_home_search .search-dropdown-result {
    display: block !important;
    width: 100% !important;
  }
  #wo_home_search .search-dropdown-result:empty {
    display: none !important;
  }
  /* Recent search items */
  #wo_home_search .search-dropdown-result a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    color: var(--agro-text, #1f2937) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: background 0.15s ease !important;
  }
  #wo_home_search .search-dropdown-result a:hover {
    background: var(--agro-surface, #f1f5f9) !important;
  }
  #wo_home_search .search-dropdown-result img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
  }
  /* Advanced search link — call-to-action ispod rezultata */
  #wo_home_search .search-advanced-container {
    display: block !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--agro-border, #e5e7eb) !important;
  }
  #wo_home_search .search-advanced-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--agro-primary-dark, #1b5e20) !important;
    background: var(--agro-primary-bg, #f0f7f0) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
  }
  #wo_home_search .search-advanced-link:hover {
    background: color-mix(in srgb, var(--agro-primary) 12%, var(--agro-primary-bg, #f0f7f0)) !important;
    text-decoration: none !important;
  }
  #wo_home_search .search-advanced-link .feather-svg-parent svg {
    width: 14px !important;
    height: 14px !important;
    color: currentColor !important;
  }

  /* Chat panel — kad je otvoren, eksplicitno display:flex + min-height
     da pobedi sve potencijalno hidden state inherit od mojih agro-sheet[hidden] pravila.
     Pojavljuje se samo sa agro-panel-visible klasom — ako te klase nema, hidden HTML
     atribut + display:none iz agro-messaging.css drze panel sakriven. */
  .agro-chat-dropdown-panel.agro-panel-visible {
    display: flex !important;
    flex-direction: column !important;
    min-height: 320px !important;
    background: var(--agro-surface-card, #fff) !important;
    border: 1px solid var(--agro-border, #e0d8c8) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14) !important;
    overflow: hidden !important;
  }

  /* ========================================================================
     NOTIFICATION + REQUESTS DROPDOWN — MODERAN KOMPAKTAN REDIZAJN (mobile).
     Stil: cista bela kartica, kompaktni 12px redovi, 40×40 avatari sa
     fallback bg, suptilan hover, tanak unread tint, bez chunky divider-a.
     ======================================================================== */

  /* Container — kartica sa border + shadow */
  .notifications-dropdown,
  .request-list {
    background: var(--agro-surface-card, #fff) !important;
    border: 1px solid var(--agro-border, #e5e7eb) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14) !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* SOUND TOGGLE — kompaktan, neutralna boja, ne crveni alarm */
  .notifications-dropdown li.turn-off-sound,
  .notifications-dropdown > li.turn-off-sound {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--agro-border, #e5e7eb) !important;
  }
  .notifications-dropdown li.turn-off-sound > span,
  .notifications-dropdown li.turn-off-sound {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    color: var(--agro-text-secondary, #4a5e4a) !important;
    cursor: pointer !important;
    background: transparent !important;
  }
  .notifications-dropdown li.turn-off-sound svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    color: var(--agro-text-muted, #64748b) !important;
  }
  .notifications-dropdown li.turn-off-sound:hover {
    background: var(--agro-surface, #f1f5f9) !important;
  }

  /* FILTER TABS — segmented pill style (iOS-style), identican messages tabovima.
     Container ima cream/beige bg, aktivan tab solid zeleni, neaktivni samo ikone. */
  .notifications-dropdown .agro-notif-filter {
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--agro-border, #e5e7eb) !important;
    background: var(--agro-surface-card, #fff) !important;
  }
  .notifications-dropdown .agro-notif-filter__tabs {
    display: flex !important;
    gap: 2px !important;
    padding: 3px !important;
    background: var(--agro-surface-input, #f3f2ea) !important;
    border: 1px solid var(--agro-border, #e0d8c8) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  .notifications-dropdown .agro-notif-filter__tab {
    position: relative !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-height: 32px !important;
    padding: 4px 8px !important;
    background: transparent !important;
    color: var(--agro-text-muted, #64748b) !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: flex-grow .22s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  /* Aktivan tab — expand + zeleni bg sa label-om */
  .notifications-dropdown .agro-notif-filter__tab--active {
    flex-grow: 2.2 !important;
    background: var(--agro-primary, #2e7d32) !important;
    color: #fff !important;
    box-shadow: 0 1px 4px rgba(46, 125, 50, .28) !important;
  }
  /* Neaktivni tabovi — sakri label, samo ikona */
  .notifications-dropdown .agro-notif-filter__tab:not(.agro-notif-filter__tab--active) .agro-notif-filter__tab-label {
    display: none !important;
  }
  .notifications-dropdown .agro-notif-filter__tab:hover {
    background: var(--agro-surface-card, #fff) !important;
    color: var(--agro-text, #1f2937) !important;
  }
  .notifications-dropdown .agro-notif-filter__tab--active:hover {
    background: var(--agro-primary, #2e7d32) !important;
    color: #fff !important;
  }
  .notifications-dropdown .agro-notif-filter__tab:focus-visible {
    outline: 2px solid var(--agro-primary-light, #4caf50) !important;
    outline-offset: 2px !important;
  }
  .notifications-dropdown .agro-notif-filter__tab-icon {
    flex: 0 0 auto !important;
    width: 14px !important;
    height: 14px !important;
    color: currentColor !important;
  }
  .notifications-dropdown .agro-notif-filter__tab-label {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* NESTED <li> reset — notifikacije se ubacuju AJAX-om kao nested unutar
     <li id="notification-list">, browseri ih ne wrap-uju u <ul>. */
  .notifications-dropdown li,
  .request-list li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* DIVIDER — ne renderuj (border-bottom na .notification-list daje vizuelnu separaciju) */
  .notifications-dropdown li.divider,
  .request-list li.divider {
    display: none !important;
  }

  /* #notification-list container — bez padding-a */
  .notifications-dropdown #notification-list,
  .request-list #notification-list {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* NOTIFICATION ROW — kompaktan 12px sa border-bottom umesto divider */
  .notifications-dropdown .notification-list,
  .request-list .notification-list {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    background: transparent !important;
    border-bottom: 1px solid var(--agro-border, #e5e7eb) !important;
    transition: background 0.15s ease !important;
  }
  .notifications-dropdown .notification-list:hover,
  .request-list .notification-list:hover {
    background: var(--agro-surface, #f9fafb) !important;
  }
  .notifications-dropdown .notification-list:last-child,
  .request-list .notification-list:last-child {
    border-bottom: 0 !important;
  }

  /* UNREAD — suptilan primary tint */
  .notifications-dropdown .notification-list.unread,
  .request-list .notification-list.unread {
    background: var(--agro-primary-bg, #f0f7f0) !important;
  }
  .notifications-dropdown .notification-list.unread:hover,
  .request-list .notification-list.unread:hover {
    background: color-mix(in srgb, var(--agro-primary) 12%, var(--agro-primary-bg, #f0f7f0)) !important;
  }

  /* Notification link — flex row sa avatar + tekst */
  .notifications-dropdown .notification-list a,
  .request-list .notification-list a {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    color: var(--agro-text, #1f2937) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    min-height: auto !important;
  }
  .notifications-dropdown .notification-list a:hover,
  .request-list .notification-list a:hover {
    text-decoration: none !important;
    background: transparent !important;
  }

  /* AVATAR — 40×40 sa fallback gray bg, vidljiv i kad img padne */
  .notifications-dropdown .notification-list .notification-user-avatar,
  .request-list .notification-list .notification-user-avatar {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--agro-surface-alt, #e2e8f0) !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .notifications-dropdown .notification-list .notification-user-avatar img,
  .request-list .notification-list .notification-user-avatar img {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Text — name bold + opis + time */
  .notifications-dropdown .notification-list .notification-text,
  .request-list .notification-list .notification-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    line-height: 1.4 !important;
    font-size: 13px !important;
    color: var(--agro-text, #1f2937) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  .notifications-dropdown .notification-list .notification-text .main-color,
  .request-list .notification-list .notification-text .main-color {
    font-weight: 700 !important;
    color: var(--agro-text, #1f2937) !important;
    font-size: 13px !important;
  }

  /* TIME — small + muted + ikon ispred */
  .notifications-dropdown .notification-list .notification-time,
  .request-list .notification-list .notification-time {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 4px !important;
    font-size: 11px !important;
    color: var(--agro-text-muted, #64748b) !important;
  }
  .notifications-dropdown .notification-list .notification-time svg,
  .request-list .notification-list .notification-time svg {
    width: 12px !important;
    height: 12px !important;
    color: var(--agro-text-muted, #64748b) !important;
  }

  /* Skineti legacy .clear (br za float) */
  .notifications-dropdown .notification-list .clear,
  .request-list .notification-list .clear {
    display: none !important;
  }

  /* EMPTY STATE — clean centered text + manji SVG */
  .notifications-dropdown .empty_state,
  .request-list .empty_state {
    padding: 32px 20px !important;
    text-align: center !important;
    color: var(--agro-text-muted, #64748b) !important;
    font-size: 13px !important;
  }
  .notifications-dropdown .empty_state svg,
  .request-list .empty_state svg {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    margin: 0 auto 12px !important;
    display: block !important;
    opacity: 0.7 !important;
  }

  /* Loading jelly — manji + centered */
  .notifications-dropdown .wo_loading_jelly,
  .request-list .wo_loading_jelly {
    padding: 24px !important;
    text-align: center !important;
  }

  /* Specificni offenderi iz Day 1 verifikacije (2026-05-12) */
  .agro-bottom-nav__item {
    min-height: 48px !important;
  }

  .agro-feed-filter__tab,
  .agro-feed-filter button {
    min-height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex;
    align-items: center;
  }

  /* General dropdown-toggle ikone */
  .dropdown-toggle:not(.btn) {
    min-width: 44px;
    min-height: 44px;
  }

  /* Composer ikone sa starim klasama (sixteen-font-size) */
  .sixteen-font-size {
    min-width: 44px;
    min-height: 44px;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Chat toggle */
  .agro-chat-toggle,
  #agro-chat-toggle-btn {
    min-width: 48px !important;
    min-height: 48px !important;
  }

  /* Greet card close button */
  .agro-greet__close {
    min-width: 44px;
    min-height: 44px;
  }

  /* Emoji picker je IZUZETAK — namerno compact grid (a11y dovoljno: vise emoji u jednoj zoni) */
  /* .agro-emoji-picker__emoji — ne diramo */

  /* Cookie banner — Apple HIG 44 min */
  .cc-window .cc-btn {
    min-height: 44px !important;
    padding: 10px 14px !important;
    line-height: 1.2;
  }

  /* MOBILE P1 — I-001 Compact app-bar polish (existing header je 56px ali bez safe-area) */
  .navbar-default,
  .navbar.navbar-default,
  body .navbar-default {
    padding-top: var(--agro-safe-top) !important;
    height: calc(56px + var(--agro-safe-top)) !important;
    min-height: calc(56px + var(--agro-safe-top)) !important;
  }

  /* ========================================================================
     MOBILE P2 — K1 Bottom Sheet (reusable komponenta — agro-sheet)
     ----------------------------------------------------------------------
     Foundation za: action sheet, filter sheet, entity switcher, comment composer.
     API: AgroSheet.open(id), AgroSheet.close(id) iz JS-a.
     ========================================================================*/
  .agro-sheet {
    position: fixed;
    inset: 0;
    z-index: 9990;
    pointer-events: none;
  }
  .agro-sheet[hidden] {
    display: none !important;
  }
  .agro-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: var(--agro-sheet-backdrop);
    opacity: 0;
    transition: opacity var(--agro-duration-normal) var(--agro-ease-out);
    pointer-events: none;
  }
  .agro-sheet.is-open {
    pointer-events: auto;
  }
  .agro-sheet.is-open .agro-sheet__backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  .agro-sheet__panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--agro-elevated, #fff);
    color: var(--agro-text, #1f2937);
    border-radius: var(--agro-sheet-radius) var(--agro-sheet-radius) 0 0;
    padding-bottom: var(--agro-safe-bottom);
    transform: translateY(100%);
    transition: transform var(--agro-duration-normal) var(--agro-ease-out);
    max-height: 92vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.16);
  }
  .agro-sheet.is-open .agro-sheet__panel {
    transform: translateY(0);
  }
  .agro-sheet__handle {
    width: var(--agro-sheet-handle);
    height: 4px;
    background: var(--agro-border, #e5e7eb);
    border-radius: 999px;
    margin: 8px auto 4px;
    flex-shrink: 0;
  }
  .agro-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 12px;
    border-bottom: 1px solid var(--agro-border, #e5e7eb);
  }
  .agro-sheet__title {
    font-family: var(--agro-font-display, 'Roboto Slab', Georgia, serif);
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    flex: 1;
  }
  .agro-sheet__close {
    background: transparent;
    border: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--agro-text-muted, #64748b);
    font-size: 24px;
    line-height: 1;
  }
  .agro-sheet__close:hover,
  .agro-sheet__close:focus-visible {
    color: var(--agro-text, #1f2937);
    background: var(--agro-surface, #f1f5f9);
    border-radius: 50%;
  }
  .agro-sheet__body {
    padding: 16px;
  }
  .agro-sheet__footer {
    display: flex;
    gap: 12px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--agro-border, #e5e7eb);
  }
  .agro-sheet__footer .btn {
    flex: 1;
    min-height: 44px;
  }

  /* Action sheet list — modernizovan agro brand stil sa kompaktnim 2-line stavkama */
  .agro-sheet__action-list {
    list-style: none;
    margin: 0;
    padding: 4px 0 12px;
  }
  .agro-sheet__action-list > li + li {
    border-top: 1px solid var(--agro-border-soft, rgba(46, 125, 50, 0.08));
  }
  .agro-sheet__action-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    min-height: 56px;
    color: var(--agro-text, #1f2937);
    cursor: pointer;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
    transition: background var(--agro-duration-fast, 150ms) var(--agro-ease-out, ease-out);
  }
  .agro-sheet__action-item:hover,
  .agro-sheet__action-item:focus-visible {
    background: rgba(46, 125, 50, 0.06);
    outline: none;
  }
  .agro-sheet__action-item:active {
    background: rgba(46, 125, 50, 0.12);
  }
  /* Ikona u zelenom kruznom badge-u — asocira na agro brand bez vikanja */
  .agro-sheet__action-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(46, 125, 50, 0.10);
    color: var(--agro-primary, #2e7d32);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .agro-sheet__action-icon svg {
    width: 20px;
    height: 20px;
    /* NE forsiraj fill — outline SVG-ovi (fill="none" attribute) treba da ostanu
       outline. Color cascade pokriva i fill="currentColor" i stroke="currentColor". */
  }
  /* Text container — title bold + opis ispod, manjeg fonta */
  .agro-sheet__action-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
  }
  .agro-sheet__action-label {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.25;
    color: var(--agro-text, #1f2937);
  }
  .agro-sheet__action-desc {
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--agro-text-muted, #64748b);
    font-weight: 400;
  }
  /* Danger varijanta — crveni accent na ikoni + naslovu, opis ostaje muted */
  .agro-sheet__action-item--danger .agro-sheet__action-icon {
    background: rgba(220, 38, 38, 0.10);
    color: var(--agro-danger, #dc2626);
  }
  .agro-sheet__action-item--danger .agro-sheet__action-label {
    color: var(--agro-danger, #dc2626);
  }
  .agro-sheet__action-item--danger:hover,
  .agro-sheet__action-item--danger:focus-visible {
    background: rgba(220, 38, 38, 0.06);
  }
  .agro-sheet__action-item--danger:active {
    background: rgba(220, 38, 38, 0.12);
  }

  /* P2.5 — Identity sheet (Moj nalog) ikon i link normalizacija.
     Klonirani <ul.ani-acc-menu> u #agro-identity-sheet gubi
     `.navbar-default .dropdown-menu li a svg { width:18px; ... }` scope —
     SVG-ovi bez width/height eksplodiraju u 300×150 (CSS default), a oni
     sa width="512" atributom (Watch, Reels) renderuju se kao 512×512.
     JS u agro-header-identity-sheet.js već normalizuje atribute,
     ovo je CSS defense-in-depth + link spacing za touch target. */
  #agro-identity-sheet .ani-acc-menu li a svg {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin: -2px 12px 0 2px;
    flex-shrink: 0;
  }
  /* Entity-switcher add-card SVG stoji u 36×36 krug — reset margin */
  #agro-identity-sheet .agro-entity-switcher__add-card-icon svg {
    margin: 0;
  }
  /* Touch target + minimum visina za svaki menu link u sheet kontekstu */
  #agro-identity-sheet .ani-acc-menu > li:not(.agro-entity-switcher-section):not(.wo_user_name) > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 4px;
    color: var(--agro-text, #1f2937);
    font-size: 15px;
    text-decoration: none;
  }
  #agro-identity-sheet .ani-acc-menu > li > hr {
    margin: 8px 0;
    border: 0;
    border-top: 1px solid var(--agro-border, #e5e7eb);
  }
  /* Identity sheet sadržaj: identičan desktop dropdown-u.
     Desktop CSS:
       .dropdown-search-link { display:none }  → mobile-only items SAKRIVENI
       .dropdown-hidden-link { display:block } → Pretplata/General Settings VIDLJIVI
     Mobile default CSS (stylesheet/style.css:7305-7306) preokreće ovo —
     mi vraćamo desktop ponašanje INSIDE sheet-a tako da sadržaj bude identičan.
     Pages, Market, Vesti, Blog itd. dostupne su preko bottom-nav main-nav-sheet
     (Glavna navigacija) — ne ponavljaju se u Moj nalog sheet-u. */
  #agro-identity-sheet .ani-acc-menu li.dropdown-search-link {
    display: none !important;
  }
  #agro-identity-sheet .ani-acc-menu li.dropdown-hidden-link {
    display: block !important;
  }

  /* wo_user_name (avatar + ime) na vrhu sheet-a — kompaktan padding */
  #agro-identity-sheet .ani-acc-menu .wo_user_name {
    padding: 8px 4px 12px;
  }
  #agro-identity-sheet .ani-acc-menu .wo_user_name img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 50%;
    border: 0;
    margin-left: auto;
    flex-shrink: 0;
  }
  #agro-identity-sheet .ani-acc-menu .wo_user_name > a.wow_hdr_menu_usr_lnk {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--agro-text, #1f2937);
  }

  /* ========================================================================
     Main Navigation Sheet — bottom-nav hamburger otvara left-sidebar sadržaj.
     Sekcije: Pregled i sadržaj, Tržište i profili, Zajednica i informacije.
     Mobile-optimized: veći touch target nego desktop sidebar.
     ======================================================================== */
  #agro-main-nav-sheet .agro-sheet__panel {
    max-height: 85vh;
  }
  #agro-main-nav-sheet .agro-sheet__body {
    padding: 12px 16px 16px;
  }
  #agro-main-nav-sheet .agro-main-nav-sheet__nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  #agro-main-nav-sheet .agro-nav-section-block {
    margin: 0;
  }
  #agro-main-nav-sheet .agro-nav-section-title {
    font-family: var(--agro-font-body) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--agro-text-muted) !important;
    margin: 0 0 6px 4px;
    padding: 0;
    line-height: 1.2;
  }
  #agro-main-nav-sheet .agro-nav-section-block > ul {
    list-style: none;
    margin: 0;
    padding: 4px;
    background: var(--agro-surface-card, #fff);
    border: 1px solid var(--agro-border, #e5e7eb);
    border-radius: var(--agro-radius-lg, 12px);
    box-shadow: var(--agro-shadow-sm);
  }
  #agro-main-nav-sheet .agro-nav-section-block > ul > li {
    list-style: none;
    margin: 0;
  }
  #agro-main-nav-sheet .agro-nav-section-block > ul > li > a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 12px !important;
    margin: 1px 0;
    border-radius: var(--agro-radius, 8px);
    color: var(--agro-text, #1f2937) !important;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none !important;
    position: relative;
    transition: background var(--agro-duration-fast) var(--agro-ease-out);
  }
  #agro-main-nav-sheet .agro-nav-section-block > ul > li > a:active {
    background: var(--agro-surface, #f1f5f9) !important;
  }
  #agro-main-nav-sheet .agro-nav-section-block > ul > li.agro-nav-active > a,
  #agro-main-nav-sheet .agro-nav-section-block > ul > li > a.active {
    background: var(--agro-primary-bg, #f0f7f0) !important;
    color: var(--agro-primary-dark, #1b5e20) !important;
    font-weight: 600;
  }
  #agro-main-nav-sheet .agro-nav-section-block > ul > li > a > svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--agro-text-muted, #64748b);
    opacity: 0.9;
  }
  #agro-main-nav-sheet .agro-nav-section-block > ul > li.agro-nav-active > a > svg,
  #agro-main-nav-sheet .agro-nav-section-block > ul > li > a.active > svg {
    color: var(--agro-primary-dark, #1b5e20);
    opacity: 1;
  }
  #agro-main-nav-sheet .agro-nav-section-block > ul > li > a > span:not(.agro-nav-soon-badge) {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Live order dropdown (Sve/Umreženi) — sakriven u sheet kontekstu */
  #agro-main-nav-sheet .wow_side_post_fltr .order_by {
    display: none;
  }
}

  /* Sakrij desktop-only menu items na mobile (vec hidden ali defensive) */
  .navbar-default .nav.navbar-nav > li.desktop-only,
  .navbar-default .navbar-left {
    display: none !important;
  }

  /* Cookie banner z-index iznad header-a (vec resen u B-004 ali defensive) */
  .cc-window .cc-link {
    min-height: 44px !important;
    padding: 10px 4px !important;
    display: inline-flex !important;
    align-items: center;
  }

  /* Notification dropdown items — KOMPAKTAN MODERAN REDIZAJN.
     Excluded divider from min-height (bio je 44px high gray blok izmedju notifikacija). */
  .notifications-dropdown li:not(.divider):not(.agro-notif-filter),
  .notifications-dropdown a:not(.dropdown-toggle),
  .turn-off-sound {
    min-height: 44px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* ====================================================================
   Group-setting page — Agro braon nav (zamena za inline #03A9F4 plavu)
   Inline <style> u layout/group-setting/content.phtml je gitignored,
   pa nadjačavamo ovde sa višim specificity (.row.setting-panel chain).
   ==================================================================== */
.row.setting-panel .wo_setting_sidebar {
  background: var(--agro-brown, #5d4037) !important;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(62, 39, 35, 0.18) !important;
  overflow: hidden;
}
.row.setting-panel .wo_setting_sidebar ul {
  background: var(--agro-brown, #5d4037) !important;
  border-radius: 12px;
  overflow: hidden;
}
.row.setting-panel .wo_setting_sidebar ul .list-group-item {
  background: transparent !important;
  transition: background-color 0.15s ease;
}
.row.setting-panel .wo_setting_sidebar ul .list-group-item.hidden {
  display: none !important;
}
.row.setting-panel .wo_setting_sidebar ul .list-group-item a {
  color: #fff;
  display: block;
  transition: background-color 0.15s ease;
}
.row.setting-panel .wo_setting_sidebar ul .list-group-item a svg.feather {
  color: #fff;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.row.setting-panel .wo_setting_sidebar ul .list-group-item a:hover,
.row.setting-panel .wo_setting_sidebar ul .list-group-item a:focus {
  background-color: rgba(255, 255, 255, 0.12);
  text-decoration: none;
}
.row.setting-panel .wo_setting_sidebar ul .list-group-item a:hover svg.feather,
.row.setting-panel .wo_setting_sidebar ul .list-group-item a:focus svg.feather {
  opacity: 1;
}
.row.setting-panel .wo_setting_sidebar ul .list-group-item.avtive a {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
.row.setting-panel .wo_setting_sidebar ul .list-group-item.avtive a svg.feather {
  opacity: 1;
}

@media (max-width: 600px) {
  /* DOM reorder preko flexbox `order` — settings nav ide na vrh u prirodnom flow-u
     (umesto absolute pozicije). Sticky drži pill na vrhu viewport-a tokom skrola. */
  .setting-panel.row {
    display: flex !important;
    flex-direction: column;
  }
  .setting-panel.row > .leftcol { order: 0; }
  .setting-panel.row > .wo_setting_sidebar { order: 1; }
  .setting-panel.row > .singlecol { order: 2; }

  .row.setting-panel .wo_setting_showpage,
  .row.setting-panel .wow_grpage_setts {
    padding-right: 15px !important;
    padding-top: 0 !important;
  }
  .row.setting-panel .wo_setting_sidebar {
    position: sticky !important;
    top: 8px;
    z-index: 5;
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    max-width: calc(100% - 20px);
    margin: 10px auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    border-radius: 10px;
    text-align: center !important;
  }
  .row.setting-panel .wo_setting_sidebar ul {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    gap: 2px;
    white-space: normal !important;
    overflow: visible !important;
    padding: 3px 6px;
    width: auto;
  }
  .row.setting-panel .wo_setting_sidebar ul .list-group-item {
    display: inline-flex !important;
    margin-right: 0 !important;
    flex: 0 0 auto;
  }
  .row.setting-panel .wo_setting_sidebar ul .list-group-item a {
    padding: 8px 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }
  .row.setting-panel .wo_setting_sidebar ul .list-group-item a svg.feather {
    margin: 0;
    display: block;
  }
}