/**
 * VojvodinaMeteo - Konsolidovani stilovi
 * v5.0 - Performance Optimizacija
 * 
 * Ovaj fajl zamenjuje sav inline CSS koji je ranije bio u:
 * - styles-global.php (wp_head inline)
 * - styles-article.php (wp_head inline)
 * - dark-mode.php (wp_footer inline)
 * - performance.php (CSS deo za ad fix)
 */

/* ========================================================================
   ADSENSE CLS FIX
   v6.1 - Poboljšan CLS fix
   
   Problem: Auto Ads i fiksne reklame se učitavaju posle initial paint-a
   i pomeraju sadržaj (layout shift). Na mobilnom Lighthouse testu ovo
   izaziva CLS > 0.5 jer reklame rastu od 0 na 250-440px.
   
   Rešenje:
   1. min-height na svim ad kontejnerima da rezerviše prostor
   2. contain:layout na Auto Ads kontejnerima da ograniči reflow
   3. Veći min-height na mobilnom jer su reklame responzivne
   ======================================================================== */

/* Svi AdSense blokovi - responsive rezervacija prostora */
/* Desktop: veće reklame (728x90, 970x90, 336x280) */
@media (min-width: 769px) {
    ins.adsbygoogle { min-height: 90px; display: block; }
    ins.adsbygoogle:not([data-ad-status]):not([data-anchor-status]) { min-height: 280px; display: block; }
}
/* Mobile: manje reklame (320x100, 320x50) */
@media (max-width: 768px) {
    ins.adsbygoogle { min-height: 50px; display: block; }
    ins.adsbygoogle:not([data-ad-status]):not([data-anchor-status]) { min-height: 100px; display: block; }
}

/* Kad Google dodeli bilo koji status (filled, unfill-optimized, itd),
   ukloni nas forsirani min-height i pusti Google da kontrolise visinu */
ins.adsbygoogle[data-ad-status] {
    min-height: auto !important;
}

/* Ad placeholder - UKLONJENO (v6.2)
   Placeholder sa "Reklama" tekstom i sivom podlogom je bio iz LiteSpeed Cache-a.
   Reseno sa "Empty entire cache" umesto "Purge All".
   Zadrzavamo samo min-height i contain pravila iznad. */

/* Google Auto Ads kontejneri - sprečavamo layout shift
   Auto Ads ubacuje .google-auto-placed div sa reklamom unutra.
   contain:layout sprečava reflow od reklame da utiče na okolne elemente.
   VAZNO: Ne smemo overflow:hidden na anchor kontejnerima jer blokira dismiss! */
.google-auto-placed:not([id*="anchor"]) {
    contain: layout style;
    min-height: 0;
}

/* CLS FIX: Rezervacija prostora za Auto Ads izmedju header-a i main-a (v6.4)
   Google ubacuje .google-auto-placed kao direktnu decu body-a izmedju
   #header i main. Bez min-height ovi elementi rastu od 0 do pune velicine
   reklame i pomeraju sadrzaj (CLS). Rezervisemo prostor unapred. */
body > #header ~ .google-auto-placed:not([id*="anchor"]),
body > header#header ~ .google-auto-placed:not([id*="anchor"]) {
    min-height: 100px;
    contain: layout style;
    overflow: hidden;
}
@media (min-width: 769px) {
    body > #header ~ .google-auto-placed:not([id*="anchor"]),
    body > header#header ~ .google-auto-placed:not([id*="anchor"]) {
        min-height: 280px;
    }
}

/* Auto Ads koji su in-feed (između sadržaja) - samo za ne-anchor */
.google-auto-placed:not([id*="anchor"]) ins.adsbygoogle:not([data-anchor-status]) {
    min-height: 100px;
}

/* ANCHOR / OVERLAY REKLAME - oslobodi od svih ograničenja */
ins.adsbygoogle[data-anchor-status],
[data-anchor-status] ins.adsbygoogle,
#google-auto-placed-anchor-ad,
#google-auto-placed-anchor-ad ins.adsbygoogle,
.google-auto-placed:has(ins.adsbygoogle[data-anchor-status]) {
    min-height: auto !important;
    contain: none !important;
    overflow: visible !important;
}

/* ========================================================================
   NAVIGACIONI HEADER Z-INDEX FIX (v6.3)
   Problem: Blocksy postavlja #header na z-index:50, ali nas critical CSS
   je postavljao generic "header" tag na z-index:100 sto matchuje i
   header.entry-header (naslov clanka). Rezultat: dropdown meni ide iza
   sadrzaja stranice na clancima i ostalim stranicama.
   Resenje: Eksplicitno postaviti #header na visoki z-index.
   ======================================================================== */
#header,
header#header,
header.ct-header {
    position: relative;
    z-index: 10000 !important;
}

/* Entry-header (naslov clanka) ne treba da bude iznad navigacije */
header.entry-header,
.entry-header {
    z-index: auto !important;
}

/* ========================================================================
   CSS VARIJABLE
   ======================================================================== */
:root {
	--vm-bg-primary: #ffffff;
	--vm-bg-secondary: #f1f5f9;
	--vm-bg-tertiary: #e2e8f0;
	--vm-text-primary: #0f172a;
	--vm-text-secondary: #475569;
	--vm-text-muted: #64748b;
	--vm-border-color: #cbd5e1;
	--vm-card-bg: #ffffff;
	--vm-shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	--vm-shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	--vm-gradient-primary: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
	--vm-radius: 12px;
	--vm-radius-small: 8px;
	--vm-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode Variables */
[data-theme="dark"] {
	--vm-bg-primary: #0f172a;
	--vm-bg-secondary: #1e293b;
	--vm-bg-tertiary: #334155;
	--vm-text-primary: #f8fafc;
	--vm-text-secondary: #cbd5e1;
	--vm-text-muted: #94a3b8;
	--vm-border-color: #334155;
	--vm-card-bg: #1e293b;
}

/* prefers-color-scheme: dark - UKLONJENO
   Tamna tema se aktivira ISKLJUCIVO korisnickim izborom (data-theme="dark").
   Svetla tema je podrazumevana za sve posetioce. */

/* ========================================================================
   READING PROGRESS BAR
   ======================================================================== */
.vm-reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 0%;
	height: 4px;
	background: var(--vm-gradient-primary);
	z-index: 99999;
	transition: width 0.1s ease-out;
	box-shadow: 0 2px 10px rgba(59, 130, 246, 0.5);
}

/* ========================================================================
   TABLE OF CONTENTS (TOC)
   ======================================================================== */
.vm-toc {
	background: var(--vm-card-bg);
	border: 2px solid var(--vm-border-color);
	border-radius: var(--vm-radius);
	padding: 1.5rem;
	margin: 2rem 0;
	box-shadow: var(--vm-shadow-light);
}

.vm-toc-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--vm-text-primary);
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--vm-border-color);
	cursor: pointer;
	user-select: none;
}

.vm-toc-title::before {
	content: '\1F4D1';
	font-size: 1.2rem;
}

.vm-toc-title::after {
	content: '\25BC';
	margin-left: auto;
	font-size: 0.8rem;
	transition: transform 0.3s ease;
}

.vm-toc.collapsed .vm-toc-title::after {
	transform: rotate(-90deg);
}

.vm-toc-list {
	list-style: none;
	padding: 0;
	margin: 0;
	max-height: 400px;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.vm-toc.collapsed .vm-toc-list {
	max-height: 0;
}

.vm-toc-list li {
	margin-bottom: 0.5rem;
}

.vm-toc-list a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	color: var(--vm-text-secondary) !important;
	text-decoration: none !important;
	border-radius: var(--vm-radius-small);
	font-weight: 600;
	font-size: 0.95rem;
	transition: var(--vm-transition);
	border-left: 3px solid transparent;
}

.vm-toc-list a::before {
	content: '\2192';
	color: #3b82f6;
	font-weight: 700;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.vm-toc-list a:hover {
	background: var(--vm-bg-secondary);
	color: #3b82f6 !important;
	border-left-color: #3b82f6;
}

.vm-toc-list a:hover::before {
	opacity: 1;
}

.vm-toc-list a.active {
	background: rgba(59, 130, 246, 0.1);
	color: #3b82f6 !important;
	border-left-color: #3b82f6;
}

/* Desktop Sticky TOC */
@media (min-width: 1200px) {
	.vm-toc-sticky {
		position: sticky;
		top: 100px;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
	}
}

/* ========================================================================
   SKELETON LOADING ZA SLIKE - CLS FIX
   ======================================================================== */
.entry-content img,
.wp-post-image,
article img {
	background: linear-gradient(
		90deg,
		var(--vm-bg-tertiary) 25%,
		var(--vm-bg-secondary) 50%,
		var(--vm-bg-tertiary) 75%
	);
	background-size: 200% 100%;
	animation: vm-skeleton-loading 1.5s infinite ease-in-out;
	border-radius: var(--vm-radius);
}

.entry-content img[src]:not([src^="data:"]),
.wp-post-image[src]:not([src^="data:"]),
article img[src]:not([src^="data:"]) {
	animation: none;
	background: transparent;
}

@keyframes vm-skeleton-loading {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Image aspect ratio containers */
.entry-content figure,
.wp-block-image {
	position: relative;
	overflow: hidden;
}

.entry-content figure img,
.wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Figcaption styling */
.entry-content figcaption,
.wp-block-image figcaption {
	text-align: center;
	font-size: 0.9rem;
	color: var(--vm-text-secondary);
	font-style: italic;
	margin-top: 0.75rem;
	padding: 0.5rem 1rem;
	background: var(--vm-bg-secondary);
	border-radius: 0 0 var(--vm-radius-small) var(--vm-radius-small);
	border-left: 3px solid #3b82f6;
}

/* ========================================================================
   FLOATING ACTION BUTTON (FAB) ZA SHARE - MOBILE
   ======================================================================== */
.vm-fab-share {
	position: fixed;
	bottom: 80px;
	right: 20px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--vm-gradient-primary);
	color: white;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
	z-index: 9998;
	display: none;
	align-items: center;
	justify-content: center;
	transition: var(--vm-transition);
}

.vm-fab-share:hover {
	transform: scale(1.1);
	box-shadow: 0 6px 25px rgba(59, 130, 246, 0.5);
}

.vm-fab-share:active {
	transform: scale(0.95);
}

.vm-fab-share svg {
	width: 24px;
	height: 24px;
	fill: white;
}

/* FAB Menu */
.vm-fab-menu {
	position: fixed;
	bottom: 150px;
	right: 20px;
	display: none;
	flex-direction: column;
	gap: 12px;
	z-index: 9997;
	opacity: 0;
	transform: translateY(20px);
	transition: var(--vm-transition);
}

.vm-fab-menu.active {
	opacity: 1;
	transform: translateY(0);
}

.vm-fab-menu-item {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--vm-shadow-medium);
	transition: var(--vm-transition);
	text-decoration: none;
}

.vm-fab-menu-item:hover {
	transform: scale(1.1);
}

.vm-fab-menu-item svg {
	width: 20px;
	height: 20px;
	fill: white;
}

.vm-fab-menu-item.facebook { background: #1877f2; }
.vm-fab-menu-item.twitter { background: #000000; }
.vm-fab-menu-item.viber { background: #665CAC; }
.vm-fab-menu-item.whatsapp { background: #25D366; }
.vm-fab-menu-item.copy { background: #64748b; }

@media (max-width: 768px) {
	.vm-fab-share,
	.vm-fab-menu {
		display: flex;
	}
}

/* ========================================================================
   BOTTOM NAVIGATION - MOBILE
   ======================================================================== */
.vm-bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--vm-card-bg);
	border-top: 1px solid var(--vm-border-color);
	display: none;
	justify-content: space-around;
	align-items: center;
	padding: 8px 0;
	padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
	z-index: 9999;
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.vm-bottom-nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px 16px;
	color: var(--vm-text-secondary);
	text-decoration: none !important;
	font-size: 0.7rem;
	font-weight: 600;
	transition: var(--vm-transition);
	border-radius: var(--vm-radius-small);
	min-width: 64px;
}

.vm-bottom-nav-item:hover,
.vm-bottom-nav-item.active {
	color: #3b82f6;
	background: rgba(59, 130, 246, 0.1);
}

.vm-bottom-nav-item svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

@media (max-width: 768px) {
	.vm-bottom-nav {
		display: flex;
	}
	
	body {
		padding-bottom: 70px;
	}
	
	body.admin-bar {
		padding-bottom: 70px;
	}

}

/* ========================================================================
   INLINE TEMPERATURE HIGHLIGHTS
   ======================================================================== */
.temp-inline {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	margin: 0 2px;
}

.temp-inline.very-hot { background: rgba(127, 29, 29, 0.15); color: #7f1d1d; }
.temp-inline.hot { background: rgba(220, 38, 38, 0.15); color: #dc2626; }
.temp-inline.warm { background: rgba(234, 88, 12, 0.15); color: #c2410c; }
.temp-inline.mild { background: rgba(22, 163, 74, 0.15); color: #15803d; }
.temp-inline.cool { background: rgba(8, 145, 178, 0.15); color: #0e7490; }
.temp-inline.cold { background: rgba(37, 99, 235, 0.15); color: #1d4ed8; }
.temp-inline.very-cold { background: rgba(30, 64, 175, 0.15); color: #1e3a8a; }
.temp-inline.freezing { background: rgba(49, 46, 129, 0.15); color: #312e81; }

/* Dark mode inline temps */
[data-theme="dark"] .temp-inline.very-hot { background: rgba(254, 202, 202, 0.2); color: #fca5a5; }
[data-theme="dark"] .temp-inline.hot { background: rgba(252, 165, 165, 0.2); color: #fca5a5; }
[data-theme="dark"] .temp-inline.warm { background: rgba(253, 186, 116, 0.2); color: #fdba74; }
[data-theme="dark"] .temp-inline.mild { background: rgba(134, 239, 172, 0.2); color: #86efac; }
[data-theme="dark"] .temp-inline.cool { background: rgba(103, 232, 249, 0.2); color: #67e8f9; }
[data-theme="dark"] .temp-inline.cold { background: rgba(147, 197, 253, 0.2); color: #93c5fd; }
[data-theme="dark"] .temp-inline.very-cold { background: rgba(165, 180, 252, 0.2); color: #a5b4fc; }
[data-theme="dark"] .temp-inline.freezing { background: rgba(196, 181, 253, 0.2); color: #c4b5fd; }

/* ========================================================================
   INLINE PRECIPITATION HIGHLIGHTS
   ======================================================================== */
.precip-inline {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	margin: 0 2px;
}

.precip-inline.precip-light { background: rgba(56, 189, 248, 0.12); color: #0284c7; }
.precip-inline.precip-moderate { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; }
.precip-inline.precip-heavy { background: rgba(30, 64, 175, 0.15); color: #1e3a8a; }
.precip-inline.precip-extreme { background: rgba(109, 40, 217, 0.15); color: #6d28d9; }

/* Dark mode precipitation */
[data-theme="dark"] .precip-inline.precip-light { background: rgba(125, 211, 252, 0.2); color: #7dd3fc; }
[data-theme="dark"] .precip-inline.precip-moderate { background: rgba(147, 197, 253, 0.2); color: #93c5fd; }
[data-theme="dark"] .precip-inline.precip-heavy { background: rgba(165, 180, 252, 0.2); color: #a5b4fc; }
[data-theme="dark"] .precip-inline.precip-extreme { background: rgba(196, 181, 253, 0.2); color: #c4b5fd; }

/* ========================================================================
   POBOLJSANA AUTOR SEKCIJA
   ======================================================================== */
.vm-author-box {
	display: flex;
	gap: 1.5rem;
	padding: 2rem;
	background: linear-gradient(135deg, var(--vm-bg-secondary) 0%, var(--vm-bg-tertiary) 100%);
	border-radius: var(--vm-radius);
	margin: 3rem 0;
	border: 2px solid var(--vm-border-color);
	box-shadow: var(--vm-shadow-light);
	position: relative;
	overflow: hidden;
}

.vm-author-box::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--vm-gradient-primary);
}

.vm-author-avatar { flex-shrink: 0; }

.vm-author-avatar img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 4px solid white;
	box-shadow: var(--vm-shadow-medium);
	object-fit: cover;
}

.vm-author-info { flex: 1; }

.vm-author-name {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--vm-text-primary);
	margin-bottom: 0.5rem;
}

.vm-author-role {
	font-size: 0.9rem;
	color: #3b82f6;
	font-weight: 600;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 6px;
}

.vm-author-role::before { content: '\270F\FE0F'; }

.vm-author-bio {
	font-size: 0.95rem;
	color: var(--vm-text-secondary);
	line-height: 1.6;
	margin-bottom: 1rem;
}

.vm-author-stats {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.vm-author-stat {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	color: var(--vm-text-muted);
	font-weight: 600;
}

.vm-author-stat-value {
	color: var(--vm-text-primary);
	font-weight: 800;
}

@media (max-width: 600px) {
	.vm-author-box {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 1.5rem;
	}
	.vm-author-stats { justify-content: center; }
}

/* ========================================================================
   SKIP TO CONTENT
   ======================================================================== */
.skip-to-content {
	position: absolute;
	top: -40px;
	left: 0;
	background: var(--vm-gradient-primary);
	color: white !important;
	padding: 8px 16px;
	z-index: 100000;
	text-decoration: none !important;
	border-radius: 0 0 8px 0;
	font-weight: 600;
	transition: top 0.3s ease;
}

.skip-to-content:focus {
	top: 0;
	outline: 3px solid #fbbf24;
	outline-offset: 2px;
}

*:focus-visible {
	outline: 3px solid #3b82f6 !important;
	outline-offset: 2px !important;
	border-radius: 4px;
}

/* ========================================================================
   AD CONTAINER FIXES
   ======================================================================== */
.entry-content p:has(.adsbygoogle),
.entry-content p:has(script[src*="adsbygoogle"]),
p:has(.adsbygoogle) {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
}

.entry-content p:has(.adsbygoogle) br,
.entry-content p:has(script) br {
	display: none !important;
}

.vm-ad-container,
.entry-content .adsbygoogle,
ins.adsbygoogle {
	display: block !important;
	margin: 1.5rem auto !important;
	padding: 0 !important;
	text-align: center !important;
	min-height: 250px;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.entry-content center,
center:has(.adsbygoogle),
center:has(.vm-ad-container) {
	display: block !important;
	margin: 1.5rem 0 !important;
	padding: 0 !important;
}

/* ========================================================================
   ADSENSE MOBILE CONTAINMENT
   ======================================================================== */
@media screen and (max-width: 768px) {
	.is-layout-constrained > p:has(.adsbygoogle),
	.entry-content > p:has(.adsbygoogle),
	p:has(ins.adsbygoogle) {
		max-width: 100vw !important;
		width: 100% !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
		padding: 0 !important;
	}
	
	ins.adsbygoogle:not([data-anchor-status]) {
		max-width: 100vw !important;
		width: 100% !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}
	
	ins.adsbygoogle:not([data-anchor-status]) > div,
	ins.adsbygoogle:not([data-anchor-status]) > div[id*="_host"],
	ins.adsbygoogle:not([data-anchor-status]) > div[style*="width"] {
		max-width: 100% !important;
		overflow: hidden !important;
	}
	
	ins.adsbygoogle:not([data-anchor-status]) iframe,
	div[id*="_host"] iframe {
		max-width: 100% !important;
	}
	
	.google-auto-placed:not([style*="position: fixed"]):not([style*="position:fixed"]):not(:has(ins.adsbygoogle[data-anchor-status])),
	.google-auto-placed:not([style*="position: fixed"]):not([style*="position:fixed"]):not(:has(ins.adsbygoogle[data-anchor-status])) ins.adsbygoogle:not([data-anchor-status]) {
		max-width: 100vw !important;
		overflow: hidden !important;
	}
	
	.ct-content-block .entry-content,
	.ct-container-full,
	div[data-block^="hook:"] .entry-content {
		max-width: 100vw !important;
	}

	/* Ad containment - samo na ad kontejnerima, ne na celom entry-content */
	.ct-content-block .entry-content > ins.adsbygoogle,
	.ct-content-block .entry-content > p:has(ins.adsbygoogle),
	.ct-content-block .entry-content > .vm-ad-container,
	div[data-block^="hook:"] .entry-content > ins.adsbygoogle,
	div[data-block^="hook:"] .entry-content > p:has(ins.adsbygoogle),
	div[data-block^="hook:"] .entry-content > .vm-ad-container {
		overflow-x: hidden !important;
		max-width: 100% !important;
	}
	
	.vm-ad-container {
		max-width: 100% !important;
		overflow: hidden !important;
	}

	ins.adsbygoogle[data-anchor-status],
	[data-anchor-status] ins.adsbygoogle {
		overflow: visible !important;
		max-width: none !important;
		width: auto !important;
		min-height: auto !important;
	}
}

/* ========================================================================
   TEMPERATURE CLASSES (GLOBAL)
   ======================================================================== */
.temp-poz-35 { background: linear-gradient(135deg, #7f1d1d 0%, #581c87 100%) !important; color: #ffffff !important; padding: 6px 12px; border-radius: 8px; font-weight: 800; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); }
.temp-poz-30 { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important; color: #ffffff !important; padding: 6px 12px; border-radius: 8px; font-weight: 800; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); }
.temp-poz-15 { background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important; color: #ffffff !important; padding: 6px 12px; border-radius: 8px; font-weight: 800; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); }
.temp-poz-0 { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important; color: #ffffff !important; padding: 6px 12px; border-radius: 8px; font-weight: 800; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); }
.temp-poz-m0 { background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important; color: #ffffff !important; padding: 6px 12px; border-radius: 8px; font-weight: 800; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); }
.temp-poz-m5 { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important; color: #ffffff !important; padding: 6px 12px; border-radius: 8px; font-weight: 800; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); }
.temp-poz-m15 { background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important; color: #ffffff !important; padding: 6px 12px; border-radius: 8px; font-weight: 800; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); }
.temp-poz-m25 { background: linear-gradient(135deg, #312e81 0%, #1e1b4b 100%) !important; color: #ffffff !important; padding: 6px 12px; border-radius: 8px; font-weight: 800; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); }

/* ========================================================================
   RAIN CLASSES (GLOBAL)
   ======================================================================== */
.rain-0 { color: #64748b !important; font-weight: 600; }
.rain-1p { color: #0369a1 !important; font-weight: 700; }
.rain-5p { color: #0c4a6e !important; font-weight: 800; }
.rain-15p { color: #1e3a5f !important; font-weight: 800; }
.rain-25p { color: #0f172a !important; font-weight: 900; }
.rain-25pp { color: #581c87 !important; font-weight: 900; }

/* ========================================================================
   ARTICLE LINKS
   ======================================================================== */
body:not(.home) .entry-content a:not(.button):not(.btn):not(.vm-share-btn):not(.vm-fab-share):not(.vm-fab-menu-item):not(.vm-bottom-nav-item):not(.vm-toc-list a),
body.single .entry-content a:not(.button):not(.btn):not(.vm-share-btn):not(.vm-fab-share):not(.vm-fab-menu-item):not(.vm-bottom-nav-item):not(.vm-toc-list a) {
	color: #1d4ed8 !important;
	text-decoration: none !important;
	transition: var(--vm-transition) !important;
	font-weight: 600 !important;
}

body:not(.home) .entry-content a:not(.button):not(.btn):not(.vm-share-btn):not(.vm-fab-share):not(.vm-fab-menu-item):not(.vm-bottom-nav-item):not(.vm-toc-list a):hover,
body.single .entry-content a:not(.button):not(.btn):not(.vm-share-btn):not(.vm-fab-share):not(.vm-fab-menu-item):not(.vm-bottom-nav-item):not(.vm-toc-list a):hover {
	color: #1559ed !important;
	text-decoration: underline !important;
}

/* ========================================================================
   HIGHLIGHT BOXES
   ======================================================================== */
.vm-highlight { padding: 1.5rem; margin: 2rem 0; border-radius: 12px; position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.vm-highlight:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); }
.vm-highlight.warning { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-left: 5px solid #d97706; color: #92400e; }
.vm-highlight.danger { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); border-left: 5px solid #dc2626; color: #991b1b; }
.vm-highlight.info { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); border-left: 5px solid #2563eb; color: #1e40af; }
.vm-highlight.tip { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); border-left: 5px solid #16a34a; color: #166534; }
.vm-highlight.weather { background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); border-left: 5px solid #0284c7; color: #075985; }

@media (max-width: 768px) { .vm-highlight { padding: 1rem; margin: 1.5rem 0; } }

/* ========================================================================
   VIBER / TELEGRAM / PODRZI VM SEKCIJE
   Kutije koriste WordPress block editor klase vm-cta-viber, vm-cta-telegram
   ======================================================================== */

/* Glavni kontejneri - light mode */
.entry-content .vm-cta-viber,
.entry-content .vm-cta-telegram,
.entry-content .vm-social-box {
    border: 2px dashed #93c5fd !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    margin: 1.5rem 0 !important;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

.entry-content .vm-cta-yellow {
    border: 2px dashed #fbbf24 !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    margin: 1.5rem 0 !important;
    background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

/* Related posts / sidebar kartice - resetuj pozadinu koja curi
   Targetira SAMO vm-cta-yellow koji NIJE wp-block-group (spoljni wrapper) */
.vm-cta-yellow:not(.wp-block-group) {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Inner WordPress block wrappers - deca CTA blokova moraju biti transparent
   ALI ne i sami CTA blokovi (koji mogu matchovati kroz ancestor chain) */
.vm-cta-viber > *,
.vm-cta-telegram > *,
.vm-cta-yellow > *,
.vm-social-box > * {
    background: transparent !important;
    background-color: transparent !important;
}
.vm-cta-viber .wp-block-group:not(.vm-cta-viber):not(.vm-cta-telegram):not(.vm-cta-yellow),
.vm-cta-telegram .wp-block-group:not(.vm-cta-viber):not(.vm-cta-telegram):not(.vm-cta-yellow),
.vm-cta-yellow .wp-block-group:not(.vm-cta-viber):not(.vm-cta-telegram):not(.vm-cta-yellow),
.vm-social-box .wp-block-group:not(.vm-cta-viber):not(.vm-cta-telegram):not(.vm-cta-yellow):not(.vm-social-box) {
    background: transparent !important;
    background-color: transparent !important;
}

.vm-cta-viber:hover,
.vm-cta-telegram:hover,
.vm-social-box:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
}

.vm-cta-yellow:hover {
    border-color: #f59e0b !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2) !important;
}

/* Naslovi u kutijama */
.vm-cta-viber h3, .vm-cta-viber h5,
.vm-cta-telegram h3, .vm-cta-telegram h5 {
    color: #1e40af !important;
    -webkit-text-fill-color: #1e40af !important;
    text-align: center !important;
}

.vm-cta-yellow h3, .vm-cta-yellow h5,
.vm-cta-yellow h2 {
    color: #92400e !important;
    -webkit-text-fill-color: #92400e !important;
    text-align: center !important;
}

/* Dugmad - UVEK beo tekst u sva tri bloka */
.vm-cta-viber .wp-block-button__link,
.vm-cta-telegram .wp-block-button__link,
.vm-cta-yellow .wp-block-button__link,
.vm-social-box .wp-block-button__link,
.vm-cta-viber .wp-block-buttons a,
.vm-cta-telegram .wp-block-buttons a,
.vm-cta-yellow .wp-block-buttons a,
.vm-social-box .wp-block-buttons a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Dark mode - Viber/Telegram */
[data-theme="dark"] .entry-content .vm-cta-viber,
[data-theme="dark"] .entry-content .vm-cta-telegram,
[data-theme="dark"] .entry-content .vm-social-box,
html[data-theme="dark"] .entry-content .vm-cta-viber,
html[data-theme="dark"] .entry-content .vm-cta-telegram,
html[data-theme="dark"] .entry-content .vm-social-box {
    background: linear-gradient(135deg, #1e293b 0%, #1a2332 100%) !important;
    border-color: #3b82f6 !important;
}

/* Dark mode - Podrzi VM (žuta varijanta) */
[data-theme="dark"] .entry-content .vm-cta-yellow,
html[data-theme="dark"] .entry-content .vm-cta-yellow {
    background: linear-gradient(135deg, #422006 0%, #1c1917 100%) !important;
    border-color: #f59e0b !important;
}

/* Dark mode - related posts kartice - resetuj */
[data-theme="dark"] .vm-cta-yellow:not(.wp-block-group),
html[data-theme="dark"] .vm-cta-yellow:not(.wp-block-group) {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Dark mode - inner wrappers MORAJU biti transparent (ali ne sami CTA blokovi) */
[data-theme="dark"] .vm-cta-viber > *,
[data-theme="dark"] .vm-cta-telegram > *,
[data-theme="dark"] .vm-cta-yellow > *,
[data-theme="dark"] .vm-social-box > *,
html[data-theme="dark"] .vm-cta-viber > *,
html[data-theme="dark"] .vm-cta-telegram > *,
html[data-theme="dark"] .vm-cta-yellow > *,
html[data-theme="dark"] .vm-social-box > * {
    background: transparent !important;
    background-color: transparent !important;
}
[data-theme="dark"] .vm-cta-yellow .wp-block-group:not(.vm-cta-yellow):not(.vm-cta-viber):not(.vm-cta-telegram),
[data-theme="dark"] .vm-cta-viber .wp-block-group:not(.vm-cta-yellow):not(.vm-cta-viber):not(.vm-cta-telegram),
[data-theme="dark"] .vm-cta-telegram .wp-block-group:not(.vm-cta-yellow):not(.vm-cta-viber):not(.vm-cta-telegram),
[data-theme="dark"] .vm-social-box .wp-block-group:not(.vm-cta-yellow):not(.vm-cta-viber):not(.vm-cta-telegram):not(.vm-social-box),
html[data-theme="dark"] .vm-cta-yellow .wp-block-group:not(.vm-cta-yellow):not(.vm-cta-viber):not(.vm-cta-telegram),
html[data-theme="dark"] .vm-cta-viber .wp-block-group:not(.vm-cta-yellow):not(.vm-cta-viber):not(.vm-cta-telegram),
html[data-theme="dark"] .vm-cta-telegram .wp-block-group:not(.vm-cta-yellow):not(.vm-cta-viber):not(.vm-cta-telegram),
html[data-theme="dark"] .vm-social-box .wp-block-group:not(.vm-cta-yellow):not(.vm-cta-viber):not(.vm-cta-telegram):not(.vm-social-box) {
    background: transparent !important;
    background-color: transparent !important;
}

[data-theme="dark"] .vm-cta-viber h3,
[data-theme="dark"] .vm-cta-viber h5,
[data-theme="dark"] .vm-cta-telegram h3,
[data-theme="dark"] .vm-cta-telegram h5,
html[data-theme="dark"] .vm-cta-viber h3,
html[data-theme="dark"] .vm-cta-telegram h3 {
    color: #93c5fd !important;
    -webkit-text-fill-color: #93c5fd !important;
}

[data-theme="dark"] .vm-cta-yellow h3,
[data-theme="dark"] .vm-cta-yellow h5,
[data-theme="dark"] .vm-cta-yellow h2,
html[data-theme="dark"] .vm-cta-yellow h3,
html[data-theme="dark"] .vm-cta-yellow h2 {
    color: #fbbf24 !important;
    -webkit-text-fill-color: #fbbf24 !important;
}

[data-theme="dark"] .vm-cta-viber p,
[data-theme="dark"] .vm-cta-telegram p,
[data-theme="dark"] .vm-cta-yellow p,
html[data-theme="dark"] .vm-cta-viber p,
html[data-theme="dark"] .vm-cta-telegram p,
html[data-theme="dark"] .vm-cta-yellow p {
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
}

[data-theme="dark"] .vm-social-box h3,
[data-theme="dark"] .vm-social-box h4,
[data-theme="dark"] .vm-social-box h5,
html[data-theme="dark"] .vm-social-box h3,
html[data-theme="dark"] .vm-social-box h4,
html[data-theme="dark"] .vm-social-box h5 {
	color: #f1f5f9 !important;
	-webkit-text-fill-color: #f1f5f9 !important;
}

[data-theme="dark"] .vm-social-box p,
[data-theme="dark"] .vm-social-box span,
html[data-theme="dark"] .vm-social-box p,
html[data-theme="dark"] .vm-social-box span {
	color: #cbd5e1 !important;
	-webkit-text-fill-color: #cbd5e1 !important;
}

[data-theme="dark"] .vm-social-box a:not(.wp-block-button__link),
html[data-theme="dark"] .vm-social-box a:not(.wp-block-button__link) {
	color: #60a5fa !important;
	-webkit-text-fill-color: #60a5fa !important;
}

[data-theme="dark"] .vm-social-box .wp-block-button__link,
html[data-theme="dark"] .vm-social-box .wp-block-button__link {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

/* ========================================================================
   AUTOR SEKCIJA - STILIZACIJA POSTOJECE STRUKTURE
   Blocksy tema koristi .ct-author-box sa .ct-media-container za avatar
   ======================================================================== */

/* Blocksy author box - avatar fix */
.ct-author-box .ct-media-container {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.ct-author-box .ct-media-container img {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
}

/* Entry meta (mala slicica pored imena autora ispod naslova) */
.entry-meta .ct-media-container,
.post-meta .ct-media-container {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

.entry-meta .ct-media-container img,
.post-meta .ct-media-container img {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
}

/* ========================================================================
   AUTOR SEKCIJA - STILIZACIJA POSTOJECE STRUKTURE (VM custom)
   ======================================================================== */
.author-box,
.single-author-box,
.post-author-box,
.entry-author,
.about-author,
article .author,
.author-info {
	background: linear-gradient(135deg, var(--vm-bg-secondary) 0%, var(--vm-bg-tertiary) 100%) !important;
	border: 2px solid var(--vm-border-color) !important;
	border-radius: var(--vm-radius, 12px) !important;
	padding: 2rem !important;
	margin: 2.5rem 0 !important;
	position: relative !important;
	box-shadow: var(--vm-shadow-light, 0 4px 6px -1px rgba(0, 0, 0, 0.1)) !important;
}

.author-box::before,
.single-author-box::before,
.post-author-box::before,
.entry-author::before,
.about-author::before,
.author-info::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 4px !important;
	background: var(--vm-gradient-primary, linear-gradient(135deg, #3b82f6 0%, #6366f1 100%)) !important;
	border-radius: var(--vm-radius, 12px) var(--vm-radius, 12px) 0 0 !important;
}

.author-box img,
.single-author-box img,
.post-author-box img,
.entry-author img,
.about-author img,
.author-info img {
	border-radius: 50% !important;
	border: 4px solid var(--vm-card-bg, #ffffff) !important;
	box-shadow: var(--vm-shadow-medium, 0 10px 15px -3px rgba(0, 0, 0, 0.1)) !important;
}

.author-box h3, .author-box h4, .author-box h5,
.author-box .author-name,
.single-author-box h3, .single-author-box h4,
.post-author-box h3,
.entry-author h3,
.about-author h3,
.author-info h3, .author-info h4 {
	color: var(--vm-text-primary) !important;
	-webkit-text-fill-color: var(--vm-text-primary) !important;
	font-weight: 800 !important;
	font-size: 1.4rem !important;
	margin-bottom: 0.5rem !important;
}

.author-box p, .author-box .author-bio, .author-box .author-description,
.single-author-box p,
.post-author-box p,
.entry-author p,
.about-author p,
.author-info p {
	color: var(--vm-text-secondary) !important;
	-webkit-text-fill-color: var(--vm-text-secondary) !important;
	font-size: 0.95rem !important;
	line-height: 1.6 !important;
}

.author-box a, .single-author-box a, .post-author-box a,
.entry-author a, .about-author a, .author-info a {
	color: #3b82f6 !important;
	-webkit-text-fill-color: #3b82f6 !important;
	transition: var(--vm-transition, all 0.3s ease) !important;
}

.author-box a:hover, .single-author-box a:hover, .post-author-box a:hover,
.entry-author a:hover, .about-author a:hover, .author-info a:hover {
	color: #1d4ed8 !important;
	-webkit-text-fill-color: #1d4ed8 !important;
}

.author-box .author-posts,
.author-box [class*="posts"],
.author-info .author-posts {
	background: var(--vm-bg-tertiary) !important;
	color: var(--vm-text-primary) !important;
	-webkit-text-fill-color: var(--vm-text-primary) !important;
	padding: 0.5rem 1rem !important;
	border-radius: 20px !important;
	font-weight: 700 !important;
	font-size: 0.85rem !important;
	display: inline-block !important;
	margin-top: 1rem !important;
}

/* Dark mode autor sekcija */
[data-theme="dark"] .author-box,
[data-theme="dark"] .single-author-box,
[data-theme="dark"] .post-author-box,
[data-theme="dark"] .entry-author,
[data-theme="dark"] .about-author,
[data-theme="dark"] .author-info {
	background: linear-gradient(135deg, var(--vm-bg-secondary) 0%, var(--vm-bg-tertiary) 100%) !important;
	border-color: var(--vm-border-color) !important;
}

[data-theme="dark"] .author-box img,
[data-theme="dark"] .single-author-box img,
[data-theme="dark"] .post-author-box img,
[data-theme="dark"] .entry-author img,
[data-theme="dark"] .about-author img,
[data-theme="dark"] .author-info img {
	border-color: var(--vm-bg-tertiary) !important;
}

[data-theme="dark"] .author-box a,
[data-theme="dark"] .single-author-box a,
[data-theme="dark"] .post-author-box a,
[data-theme="dark"] .entry-author a,
[data-theme="dark"] .about-author a,
[data-theme="dark"] .author-info a {
	color: #60a5fa !important;
	-webkit-text-fill-color: #60a5fa !important;
}

[data-theme="dark"] .author-box a:hover,
[data-theme="dark"] .single-author-box a:hover {
	color: #93c5fd !important;
	-webkit-text-fill-color: #93c5fd !important;
}

/* ========================================================================
   DARK MODE TOGGLE - BOTTOM NAV INTEGRATION
   v6.0 - Toggle je sada deo bottom navigation bara
   ======================================================================== */

/* Bottom nav toggle - button reset */
.vm-theme-toggle-nav {
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* SVG ikone u toggle dugmetu */
.vm-theme-toggle-nav svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* Light mode: prikazi sunce, sakrij mesec */
.vm-theme-toggle-nav .vm-icon-sun { display: block; }
.vm-theme-toggle-nav .vm-icon-moon { display: none; }
.vm-theme-toggle-nav .vm-theme-label-light { display: block; }
.vm-theme-toggle-nav .vm-theme-label-dark { display: none; }

/* Dark mode: prikazi mesec, sakrij sunce */
[data-theme="dark"] .vm-theme-toggle-nav .vm-icon-sun,
html[data-theme="dark"] .vm-theme-toggle-nav .vm-icon-sun { display: none !important; }
[data-theme="dark"] .vm-theme-toggle-nav .vm-icon-moon,
html[data-theme="dark"] .vm-theme-toggle-nav .vm-icon-moon { display: block !important; }
[data-theme="dark"] .vm-theme-toggle-nav .vm-theme-label-light,
html[data-theme="dark"] .vm-theme-toggle-nav .vm-theme-label-light { display: none !important; }
[data-theme="dark"] .vm-theme-toggle-nav .vm-theme-label-dark,
html[data-theme="dark"] .vm-theme-toggle-nav .vm-theme-label-dark { display: block !important; }

/* Boja ikona u navigaciji */
.vm-theme-toggle-nav .vm-icon-sun { color: #f59e0b; }
.vm-theme-toggle-nav .vm-icon-moon { color: #818cf8; }

/* ========================================================================
   DARK MODE TOGGLE - DESKTOP HEADER MENU
   v6.0 - Za rucno dodavanje u Header Menu 2
   Klasa: vm-darkmode-link na custom link stavci u meniju
   ======================================================================== */
.vm-darkmode-link {
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
}

.vm-darkmode-link svg,
.vm-darkmode-link .vm-dm-sun,
.vm-darkmode-link .vm-dm-moon {
	display: inline-block;
	vertical-align: middle;
	width: 18px !important;
	height: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
	flex-shrink: 0;
}

/* Ogranici SVG velicinu u header meniju - catch-all */
.ct-header svg,
.ct-header .ct-menu svg {
	max-width: 24px;
	max-height: 24px;
}

/* Header meni hover - bela boja na plavoj pozadini */
.ct-header .ct-menu > li > a:hover,
.ct-header .ct-menu > li:hover > a {
    color: #ffffff !important;
    opacity: 1;
}

/* Specifično za dark mode menu item - ogranici SVG */
.ct-header .ct-menu > li > a svg,
.ct-header [data-id] svg {
	width: auto;
	height: auto;
}

.ct-header .ct-menu > li > a .vm-darkmode-link svg {
	width: 18px !important;
	height: 18px !important;
}

.vm-darkmode-link .vm-dm-sun { display: inline-block; }
.vm-darkmode-link .vm-dm-moon { display: none; }
.vm-darkmode-link .vm-dm-label-dark { display: none; }

[data-theme="dark"] .vm-darkmode-link .vm-dm-sun,
html[data-theme="dark"] .vm-darkmode-link .vm-dm-sun { display: none !important; }
[data-theme="dark"] .vm-darkmode-link .vm-dm-moon,
html[data-theme="dark"] .vm-darkmode-link .vm-dm-moon { display: inline-block !important; }
[data-theme="dark"] .vm-darkmode-link .vm-dm-label-light,
html[data-theme="dark"] .vm-darkmode-link .vm-dm-label-light { display: none !important; }
[data-theme="dark"] .vm-darkmode-link .vm-dm-label-dark,
html[data-theme="dark"] .vm-darkmode-link .vm-dm-label-dark { display: inline !important; }

/* Sakrij stari floating toggle ako je ostao u HTML-u */
button.vm-theme-toggle,
.vm-theme-toggle:not(.vm-theme-toggle-nav) {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	position: absolute !important;
	pointer-events: none !important;
}

/* Dodatna zastita - sakrij icon-sun/icon-moon koji nisu u bottom nav */
.icon-sun:not(.vm-icon-sun),
.icon-moon:not(.vm-icon-moon) {
	display: none !important;
}

/* ========================================================================
   VM HERO CARD - v9.0 (nova.rs style)
   PHP template: template-parts/single.php generiše HTML
   Struktura: .vm-hero-card > .vm-hero-image + .vm-hero-content
   ======================================================================== */

/* Sakrij Blocksy-jev default hero i featured image — SAMO za blog postove!
   body.single-post je WordPress klasa samo za post type 'post'.
   body.single bez -post matchuje i Pages (homepage, mapa, desetodnevna). */
body.single-post .hero-section,
body.single-post .ct-featured-image {
	display: none !important;
}

/* Hero kartica — jedan blok: slika + naslov + meta + share */
.vm-hero-card {
	background: var(--vm-card-bg);
	border-radius: 16px;
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.08),
		0 4px 16px rgba(0, 0, 0, 0.06);
	overflow: hidden;
	margin-bottom: 1.5rem;
}

/* Slika unutar kartice */
.vm-hero-image {
	position: relative;
	overflow: hidden;
	line-height: 0; /* uklanja razmak ispod img */
}

.vm-hero-image img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* Figcaption overlay na dnu slike */
.vm-hero-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 28px 20px 10px 20px;
	margin: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
	color: rgba(255, 255, 255, 0.9);
	font-size: 12.5px;
	font-weight: 400;
	font-style: normal;
	text-align: left;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	line-height: 1.4;
	z-index: 2;
}

/* Sadržaj kartice (naslov, meta, share) */
.vm-hero-content {
	padding: 1.5rem 1.75rem 1.25rem;
}

/* Naslov */
.vm-hero-title {
	font-size: clamp(1.8rem, 4.5vw, 2.6rem) !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	color: var(--vm-text-primary) !important;
	margin: 0 0 0.75rem 0 !important;
	padding: 0 !important;
	letter-spacing: -0.02em !important;
	text-align: left !important;
}

/* Meta red: levo (autor, kategorija, vreme) | desno (share ikone) */
.vm-hero-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--vm-border-color);
}

/* Meta leva strana */
.vm-hero-meta-left {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.3rem;
	font-size: 0.9rem;
	color: var(--vm-text-muted);
}

/* Separator tačka */
.vm-meta-dot {
	font-size: 1.3rem;
	line-height: 1;
	font-weight: 700;
	color: var(--vm-text-muted);
	margin: 0 0.1rem;
	user-select: none;
}

/* Autor */
.vm-meta-author {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.vm-meta-author img.vm-hero-avatar,
.vm-meta-author .avatar {
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 2px solid var(--vm-border-color);
	flex-shrink: 0;
}

.vm-meta-author a {
	font-weight: 600;
	color: var(--vm-text-primary);
	text-decoration: none;
}

.vm-meta-author a:hover {
	color: #3b82f6;
}

/* Datum */
.vm-meta-date {
	color: var(--vm-text-muted);
}

/* Kategorije - pill badge-ovi */
.vm-meta-categories a {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 20px;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: linear-gradient(135deg, #3b82f6, #6366f1);
	color: #ffffff !important;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vm-meta-categories a:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Vreme čitanja */
.vm-meta-reading {
	color: var(--vm-text-muted);
	white-space: nowrap;
}

/* ---- SHARE IKONE — moderni ghost/outline stil ---- */
/* Light mode: siva pozadina + tamna ikona → brand boja na hover
   Dark mode: providna pozadina + svetla ikona → brand boja na hover */

.vm-hero-meta-right {
	flex-shrink: 0;
}

.vm-hero-meta-right .ct-share-box {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	flex-direction: row !important;
}

/* Override Blocksy grid layout — horizontalni red */
.vm-hero-meta-right .ct-share-box > div[data-icons-type] {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
}

/* Sakri title tekst */
.vm-hero-meta-right .ct-share-box .ct-module-title {
	display: none !important;
}

/* Share linkovi — ghost stil (outline)
   VAZNO: Koristi se .vm-hero-card prefix + a[data-network] da bi se
   nadjačao Blocksy-jev [data-type="type-1"] a[data-network] selektor
   koji postavlja brand boje. Bez toga Blocksy "pobedjuje" specifičnošću. */
.vm-hero-card .vm-hero-meta-right .ct-share-box a[data-network],
.vm-hero-card .vm-hero-meta-right .ct-share-box[data-type] a[data-network] {
	display: inline-flex !important;
	width: 34px !important;
	height: 34px !important;
	border-radius: 8px !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--vm-text-muted, #64748b) !important;
	background: var(--vm-bg-secondary, #f1f5f9) !important;
	border: 1px solid var(--vm-border-color, #cbd5e1) !important;
	transition: all 0.2s ease !important;
	margin: 0 !important;
	padding: 0 !important;
}

.vm-hero-card .vm-hero-meta-right .ct-share-box a[data-network]:hover {
	transform: translateY(-1px) !important;
	color: #fff !important;
	border-color: transparent !important;
}

/* Brand boje — samo na hover */
.vm-hero-card .vm-hero-meta-right .ct-share-box a[data-network="facebook"]:hover  { background: #1877F2 !important; box-shadow: 0 3px 10px rgba(24,119,242,0.35) !important; }
.vm-hero-card .vm-hero-meta-right .ct-share-box a[data-network="twitter"]:hover   { background: #000000 !important; box-shadow: 0 3px 10px rgba(0,0,0,0.25) !important; }
.vm-hero-card .vm-hero-meta-right .ct-share-box a[data-network="linkedin"]:hover  { background: #0A66C2 !important; box-shadow: 0 3px 10px rgba(10,102,194,0.35) !important; }
.vm-hero-card .vm-hero-meta-right .ct-share-box a[data-network="reddit"]:hover    { background: #FF4500 !important; box-shadow: 0 3px 10px rgba(255,69,0,0.35) !important; }
.vm-hero-card .vm-hero-meta-right .ct-share-box a[data-network="telegram"]:hover  { background: #2AABEE !important; box-shadow: 0 3px 10px rgba(42,171,238,0.35) !important; }
.vm-hero-card .vm-hero-meta-right .ct-share-box a[data-network="viber"]:hover     { background: #7360f2 !important; box-shadow: 0 3px 10px rgba(115,96,242,0.35) !important; }
.vm-hero-card .vm-hero-meta-right .ct-share-box a[data-network="whatsapp"]:hover  { background: #25D366 !important; box-shadow: 0 3px 10px rgba(37,211,102,0.35) !important; }

/* SVG ikone */
.vm-hero-card .vm-hero-meta-right .ct-share-box a svg {
	width: 16px !important;
	height: 16px !important;
	fill: currentColor !important;
}

/* Blocksy icon container reset */
.vm-hero-card .vm-hero-meta-right .ct-share-box a .ct-icon-container {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Dark mode share ikone */
[data-theme="dark"] .vm-hero-card .vm-hero-meta-right .ct-share-box a[data-network],
[data-theme="dark"] .vm-hero-card .vm-hero-meta-right .ct-share-box[data-type] a[data-network] {
	background: var(--vm-bg-tertiary, #334155) !important;
	border-color: var(--vm-border-color, #334155) !important;
	color: var(--vm-text-secondary, #cbd5e1) !important;
}

/* Dark mode dopune za hero karticu */
[data-theme="dark"] .vm-hero-card {
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.3),
		0 4px 16px rgba(0, 0, 0, 0.25);
}

/* ---- NOWCASTING / UZIVO BADGE ---- */
.vm-nowcasting-wrapper {
	text-align: left;
	padding-top: 0.5rem;
}

.vm-nowcasting-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 6px 16px;
	border-radius: 24px;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: rgba(16, 185, 129, 0.1);
	color: #059669;
	border: 1.5px solid #10b981;
	margin-bottom: 0.75rem;
}

.vm-pulse-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #10b981;
	animation: vmPulse 1.5s ease-in-out infinite;
	flex-shrink: 0;
}

@keyframes vmPulse {
	0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
	50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

[data-theme="dark"] .vm-nowcasting-badge {
	background: rgba(52, 211, 153, 0.15);
	color: #34d399;
	border-color: #34d399;
}

[data-theme="dark"] .vm-pulse-dot {
	background: #34d399;
}

/* ---- MOBILE HERO RESPONSIVE ---- */
@media (max-width: 768px) {
	/* Hero kartica - full width na mobilnom */
	.vm-hero-card {
		border-radius: 12px;
		margin-bottom: 1rem;
	}

	/* Sadržaj kartice - manji padding */
	.vm-hero-content {
		padding: 1rem 1.15rem 1rem;
	}

	/* Naslov - manji na mobilnom */
	.vm-hero-title {
		font-size: clamp(1.4rem, 5vw, 1.9rem) !important;
		margin-bottom: 0.6rem !important;
	}

	/* Meta red - stack vertikalno na mobilnom */
	.vm-hero-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.6rem;
	}

	.vm-hero-meta-left {
		font-size: 0.84rem;
		gap: 0.2rem;
	}

	/* Avatar manji na mobilnom */
	.vm-meta-author img.vm-hero-avatar,
	.vm-meta-author .avatar {
		width: 24px !important;
		height: 24px !important;
	}

	/* Figcaption manji na mobilnom */
	.vm-hero-caption {
		font-size: 11px !important;
		padding: 18px 12px 8px 12px !important;
	}

	/* Share ikone — manji na mobilnom, zadržava ghost stil */
	.vm-hero-card .vm-hero-meta-right .ct-share-box a[data-network],
	.vm-hero-card .vm-hero-meta-right .ct-share-box[data-type] a[data-network] {
		width: 30px !important;
		height: 30px !important;
		border-radius: 6px !important;
	}

	.vm-hero-card .vm-hero-meta-right .ct-share-box a svg {
		width: 14px !important;
		height: 14px !important;
	}

	.vm-hero-meta-right .ct-share-box > div[data-icons-type] {
		gap: 5px !important;
	}

	/* Nowcasting badge na mobilnom */
	.vm-nowcasting-badge {
		font-size: 0.78rem;
		padding: 4px 12px;
	}

	/* Kategorija pill manji */
	.vm-meta-categories a {
		font-size: 0.72rem;
		padding: 2px 8px;
	}
}

/* ========================================================================
   ARTICLE STYLES (single posts) - v7.0
   Uokvireni editorijalni izgled sa naglasenom karticom clanka
   ======================================================================== */

/* Glavni kontejner clanka - uokvireni izgled */
body.single .entry-content {
	max-width: 100% !important;
	background: var(--vm-card-bg) !important;
	border-radius: 16px !important;
	margin: 2rem auto !important;
	padding: 2.5rem !important;
	/* Okvir: plavi gornji akcent + suptilna ivica sa strane */
	border: 1px solid var(--vm-border-color) !important;
	border-top: 4px solid #3b82f6 !important;
	/* Senka za dubinu - kartica se izdvaja od pozadine */
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.06),
		0 8px 24px rgba(0, 0, 0, 0.07),
		inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
	/* Suptilna unutrasnja senka za "papirni" efekat */
	position: relative !important;
}

/* Dekorativna donja linija - zatvara okvir */
body.single .entry-content::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60%;
	height: 3px;
	background: linear-gradient(90deg, transparent 0%, #3b82f6 30%, #6366f1 70%, transparent 100%);
	border-radius: 3px 3px 0 0;
	opacity: 0.6;
}

/* Naslov clanka - stilovi su u MODERN ARTICLE HERO sekciji iznad */

/* Uvodni paragraf - istaknut blok */
/* NAPOMENA: :not(:has(.adsbygoogle)) isključuje paragrafe koji sadrže reklamu
   iz ovog stila, jer Content Block 12335 ima <p> sa ins.adsbygoogle unutra
   i taj <p> bi inače dobio plavi border-left kao "intro paragraf" */
body.single .entry-content > p:first-of-type:not(:has(.adsbygoogle)):not(:has(script[src*="adsbygoogle"])) {
	color: var(--vm-text-primary) !important;
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.07), rgba(99, 102, 241, 0.05)) !important;
	padding: 1.5rem 1.75rem 1.5rem 2rem !important;
	border-radius: 12px !important;
	border-left: 4px solid #3b82f6 !important;
	margin-bottom: 2rem !important;
	font-size: 1.2rem !important;
	font-weight: 600 !important;
	line-height: 1.75 !important;
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08) !important;
}

/* Paragrafi teksta */
body.single .entry-content p:not(:first-child) {
	font-size: 1.1rem !important;
	line-height: 1.75 !important;
	color: var(--vm-text-primary) !important;
	margin-bottom: 1.5rem !important;
	text-align: justify !important;
}

/* H2 podnaslovi - dekorativni akcent */
body.single .entry-content h2 {
	font-size: clamp(1.4rem, 3vw, 2rem) !important;
	font-weight: 700 !important;
	color: var(--vm-text-primary) !important;
	margin: 2.5rem 0 1.5rem 0 !important;
	padding: 1rem 1rem 1rem 1.5rem !important;
	border-left: 5px solid #3b82f6 !important;
	background: linear-gradient(90deg, rgba(59, 130, 246, 0.08) 0%, transparent 100%) !important;
	border-radius: 0 12px 12px 0 !important;
	scroll-margin-top: 100px;
}

/* H3 podnaslovi */
body.single .entry-content h3 {
	font-size: clamp(1.2rem, 2.5vw, 1.6rem) !important;
	font-weight: 700 !important;
	color: var(--vm-text-primary) !important;
	margin: 2rem 0 1rem 0 !important;
	padding-bottom: 0.5rem !important;
	border-bottom: 2px solid rgba(59, 130, 246, 0.2) !important;
}

/* Slike u clanku */
body.single .entry-content img {
	border-radius: 12px !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

/* Blockquote u clanku */
body.single .entry-content blockquote {
	border-left: 4px solid #3b82f6 !important;
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), rgba(99, 102, 241, 0.03)) !important;
	padding: 1.25rem 1.5rem !important;
	margin: 1.5rem 0 !important;
	border-radius: 0 12px 12px 0 !important;
	font-style: italic !important;
	color: var(--vm-text-secondary) !important;
}

/* Horizontalni razdvajac */
body.single .entry-content hr {
	border: none !important;
	height: 2px !important;
	background: linear-gradient(90deg, transparent 0%, var(--vm-border-color) 20%, var(--vm-border-color) 80%, transparent 100%) !important;
	margin: 2rem 0 !important;
}

/* Otkrijte jos - tag cloud stilizacija */
body.single .entry-content .wp-block-tag-cloud,
body.single .entry-content .tagcloud {
	background: var(--vm-bg-secondary) !important;
	padding: 1.25rem !important;
	border-radius: 12px !important;
	border: 1px dashed var(--vm-border-color) !important;
}

/* Dark mode dopune za clanak */
[data-theme="dark"] body.single .entry-content,
html[data-theme="dark"] body.single .entry-content {
	border-color: var(--vm-border-color) !important;
	border-top-color: #3b82f6 !important;
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.2),
		0 8px 24px rgba(0, 0, 0, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

[data-theme="dark"] body.single .entry-content > p:first-of-type,
html[data-theme="dark"] body.single .entry-content > p:first-of-type {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(99, 102, 241, 0.08)) !important;
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1) !important;
}

[data-theme="dark"] body.single .entry-content blockquote,
html[data-theme="dark"] body.single .entry-content blockquote {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(99, 102, 241, 0.05)) !important;
	color: var(--vm-text-muted) !important;
}

/* ---- MOBILE: Optimizovan okvir ---- */
@media screen and (max-width: 768px) {
	body.single .entry-content {
		margin: 0.5rem 0 !important;
		padding: 1.25rem 1rem !important;
		border-radius: 0 !important;
		border-left: none !important;
		border-right: none !important;
		border-top: 3px solid #3b82f6 !important;
		border-bottom: 1px solid var(--vm-border-color) !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
	}

	body.single .entry-content::after {
		width: 40%;
		height: 2px;
		opacity: 0.5;
	}

	body.single .entry-content p,
	body.single .entry-content p:not(:first-child) {
		text-align: justify !important;
		font-size: 1rem !important;
		line-height: 1.7 !important;
		margin-bottom: 1.2rem !important;
		-webkit-hyphens: auto !important;
		hyphens: auto !important;
	}

	body.single .entry-content > p:first-of-type {
		padding: 1rem 1rem 1rem 1.25rem !important;
		font-size: 1.05rem !important;
		margin-bottom: 1.5rem !important;
	}

	body.single .entry-content h2 {
		padding: 0.8rem 0.8rem 0.8rem 1rem !important;
		font-size: 1.3rem !important;
		margin: 1.5rem 0 1rem 0 !important;
	}

	body.single .entry-content h3 {
		font-size: 1.15rem !important;
		margin: 1.5rem 0 0.75rem 0 !important;
	}

	body.single .site-content,
	body.single .content-area,
	body.single article,
	body.single .entry-content {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	body.single .container,
	body.single .site-main {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

@media screen and (max-width: 480px) {
	body.single .entry-content {
		padding: 1rem 0.75rem !important;
	}
	body.single .entry-content p {
		font-size: 0.95rem !important;
	}
}

/** about us page **/
.ct-custom.elementor-widget-image-box,
.ct-custom .elementor-widget-container {
	height: 100%;
}

.ct-custom .elementor-widget-container {
	overflow: hidden;
}

.ct-custom .elementor-image-box-content {
	padding: 0 30px;
}
.leaflet-top, .leaflet-bottom, .leaflet-map-pane {
    z-index: 0!important;
}
.gradovi-icon {
	width:60px!important;
	height:60px!important;
}
/* V1 */
.sidebar-column-primary {
    z-index: 1000;
}
.img-fluid {
    max-width: 100%;
    height: auto;
}
#ecmwfMeteogramMenu>.m-1 {
    margin-right: 5px;
}
#ecmwfMeteogramMenu button {
	padding: 4px 16px;
	cursor: pointer;
	background: #59A0FD;
	color: #fff;
	border-color: #1172c4;
	border-style: solid;
	border-width: 2px;
	border-radius: 22px;
}

#ecmwfMeteogramMenu button:focus {
	background-color: #1f56cc;
}

.desetodnevna_wrap table thead th{
	text-align: center;
}
.widget_livesearchmeteo {
	position: relative;
}
.livesearch-c,
.lvml {
    position: absolute
}
.sidebar-column-primary .livesearch-c {
    width: 339px
}

input[type=text].livesearch-input-style {
    height: 50px;
    font-size: 20px;
    border-color: #3c5dc9
}

.livesearch-c {
    display: none;
    width: 100%;
    background-color: #fff;
    -webkit-box-shadow: 0 6px 21px 0 rgba(0, 0, 0, .23);
    box-shadow: 0 6px 21px 0 rgba(0, 0, 0, .23);
    z-index: 99;
	max-height: 323px;
    overflow-y: auto;
}

.livesearch-c a {
    text-decoration: none;
    font-size: 18px;
    display: inline-block;
    width: 100%;
    padding: 10px 15px
}
.livesearch-c a:hover {
    background: var(--theme-link-hover-color);
    color: #fff;
}
.entry-content table>tbody>tr>td {
    border: none
}

.w-20 {
    width: 20% !important
}

.table .thead-light th {
    color: #495057;
    background-color: #e9ecef;
    border-color: #e9ecef
}

/* Temperature Background Colors */
.temp--20 { background-color: #6D4DAC }
.temp--19 { background-color: #644CAD }
.temp--18 { background-color: #5B4BAE }
.temp--17 { background-color: #524AAF }
.temp--16 { background-color: #494AB0 }
.temp--15 { background-color: #4953B1 }
.temp--14 { background-color: #485BB2 }
.temp--13 { background-color: #4764B3 }
.temp--12 { background-color: #466DB4 }
.temp--11 { background-color: #4577B5 }
.temp--10 { background-color: #4481B6 }
.temp--9 { background-color: #438BB8 }
.temp--8 { background-color: #4295B9 }
.temp--7 { background-color: #41A0BA }
.temp--6 { background-color: #40ACBB }
.temp--5 { background-color: #3FB7BC }
.temp--4 { background-color: #3EBDB7 }
.temp--3 { background-color: #3DBEAD }
.temp--2 { background-color: #3CBFA2 }
.temp--1 { background-color: #3BC097 }
.temp--0, .temp-0 { background-color: #3AC18C }
.temp-1 { background-color: #39C381 }
.temp-2 { background-color: #38C475 }
.temp-3 { background-color: #37C568 }
.temp-4 { background-color: #36C65B }
.temp-5 { background-color: #35C74E }
.temp-6 { background-color: #34C840 }
.temp-7 { background-color: #32C932 }
.temp-8 { background-color: #3ECA31 }
.temp-9 { background-color: #4BCB30 }
.temp-10 { background-color: #58CC2F }
.temp-11 { background-color: #65CE2E }
.temp-12 { background-color: #73CF2C }
.temp-13 { background-color: #81D02B }
.temp-14 { background-color: #8FD12A }
.temp-15 { background-color: #9ED229 }
.temp-16 { background-color: #ADD327 }
.temp-17 { background-color: #BDD426 }
.temp-18 { background-color: #CDD525 }
.temp-19 { background-color: #D6CF23 }
.temp-20 { background-color: #D7C122 }
.temp-21 { background-color: #D8B220 }
.temp-22 { background-color: #DAA21F }
.temp-23 { background-color: #DB921E }
.temp-24 { background-color: #DC811C }
.temp-25 { background-color: #DD711B }
.temp-26 { background-color: #DE5F19 }
.temp-27 { background-color: #DF4D18 }
.temp-28 { background-color: #E03B16 }
.temp-29 { background-color: #E12815 }
.temp-30 { background-color: #E21513 }
.temp-31 { background-color: #E31222 }
.temp-32 { background-color: #E51033 }
.temp-33 { background-color: #E60E44 }
.temp-34 { background-color: #E70D56 }
.temp-35 { background-color: #E80B69 }
.temp-36 { background-color: #E90A7B }
.temp-37 { background-color: #EA088F }
.temp-38 { background-color: #EB06A3 }
.temp-39 { background-color: #EC05B7 }
.temp-40 { background-color: #ED03CC }
.temp-41 { background-color: #EE01E1 }
.temp-42 { background-color: #E900EF }

/* Humidity Colors */
.rh-5 { background-color: #E1940D }
.rh-10 { background-color: #E0AF0D }
.rh-15 { background-color: #DFC90D }
.rh-20 { background-color: #D8DE0D }
.rh-25 { background-color: #BCDD0D }
.rh-30 { background-color: #A1DC0C }
.rh-35 { background-color: #85DB0C }
.rh-40 { background-color: #6ADB0C }
.rh-45 { background-color: #4FDA0C }
.rh-50 { background-color: #34D90C }
.rh-55 { background-color: #19D80B }
.rh-60 { background-color: #0BD718 }
.rh-65 { background-color: #0BD632 }
.rh-70 { background-color: #0BD64C }
.rh-75 { background-color: #0BD565 }
.rh-80 { background-color: #0AD47F }
.rh-85 { background-color: #0AD398 }
.rh-90 { background-color: #0AD2B2 }
.rh-95 { background-color: #0AD1CB }
.rh-100 { background-color: #0ABED1 }

/* Wind Colors */
.wind-0 { background-color: #0DBDE1 }
.wind-1 { background-color: #0DDFBC }
.wind-2 { background-color: #0DDE74 }
.wind-3 { background-color: #0CDC2C }
.wind-4 { background-color: #33DB0C }
.wind-5 { background-color: #78DA0C }
.wind-6 { background-color: #BDD90B }
.wind-7 { background-color: #D7AD0B }
.wind-8 { background-color: #D6670B }
.wind-9 { background-color: #D5220A }
.wind-10 { background-color: #D30A37 }
.wind-11 { background-color: #D20A7B }
.wind-12 { background-color: #D10ABE }

/* Rain Colors */
.rain-0 { background-color: #fff }
.rain-05 { background-color: #0DE1DA }
.rain-2 { background-color: #10CDE2 }
.rain-5 { background-color: #13B3E4 }
.rain-10 { background-color: #169AE6 }
.rain-20 { background-color: #1981E7 }
.rain-30 { background-color: #1C68E9 }
.rain-40 { background-color: #1F50EB }
.rain-50 { background-color: #2238ED }
.rain-60 { background-color: #2925EE }
.rain-70 { background-color: #4728F0 }
.rain-80 { background-color: #632BF2 }
.rain-90 { background-color: #802FF3 }
.rain-100 { background-color: #9C32F5 }
.rain-150 { background-color: #B835F7 }
.rain-200 { background-color: #D338F9 }

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    overflow-y: hidden
}

.rain-main-color,
.temp-main-color {
    font-size: 20px
}

.temp-poz-m25 { color: #90c }
.temp-poz-m15 { color: #009 }
.temp-poz-m5 { color: #00f }
.temp-poz-m0 { color: #0280d9 }
.temp-poz-0 { color: #3c3 }
.temp-poz-15 { color: #ff7600 }
.temp-poz-30 { color: red }
.temp-poz-35 { color: maroon }

.rain-1p { color: #39f }
.rain-5p { color: #06f }
.rain-15p { color: #00f }
.rain-25p { color: #009 }
.rain-25pp { color: #c09 }

.diwBig {
    font-size: 40px;
    margin-top: -15px;
    margin-bottom: -15px
}

.diwBigGraph {
    font-size: 35px
}

#meteogram {
    width: 100%;
    min-width: 880px
}

/* Weather Icons */
.icon-1, .icon-10, .icon-10n, .icon-12, .icon-12n, .icon-13, .icon-13n, .icon-14, .icon-14n, .icon-15, .icon-15n, .icon-16, .icon-16n, .icon-1n, .icon-2, .icon-21, .icon-21n, .icon-2n, .icon-3, .icon-3n, .icon-4, .icon-40, .icon-40n, .icon-41, .icon-41n, .icon-42, .icon-42n, .icon-44, .icon-44n, .icon-46, .icon-46n, .icon-47, .icon-47n, .icon-49, .icon-49n, .icon-4n, .icon-5, .icon-50, .icon-50n, .icon-5n, .icon-7, .icon-7n, .icon-8, .icon-8n, .icon-9, .icon-9n {
    width: 50px;
    height: 50px
}

.icon-vm {
    display: block;
    margin: -5px auto;
    background-image: url(https://vojvodinameteo.rs/meteogramifunc/vm-icon-100x100.png);
    background-repeat: no-repeat;
    background-size: 300px 300px
}

.icon-vm-svg .icon-vm { display: none; }
.icon-vm-svg img { width: 50px; }

.icon-1 { background-position: 0 0 }
.icon-10, .icon-10n { background-position: -50px 0 }
.icon-12, .icon-12n { background-position: -100px 0 }
.icon-13, .icon-13n { background-position: -150px 0 }
.icon-14, .icon-14n { background-position: -200px 0 }
.icon-15, .icon-15n { background-position: 0 -50px }
.icon-16, .icon-16n { background-position: -50px -50px }
.icon-1n { background-position: -100px -50px }
.icon-2 { background-position: -150px -50px }
.icon-21 { background-position: -200px -50px }
.icon-21n { background-position: 0 -100px }
.icon-2n { background-position: -50px -100px }
.icon-3 { background-position: -100px -100px }
.icon-3n { background-position: -150px -100px }
.icon-4, .icon-4n { background-position: -200px -100px }
.icon-40 { background-position: 0 -150px }
.icon-40n { background-position: -50px -150px }
.icon-41 { background-position: -100px -150px }
.icon-41n { background-position: -150px -150px }
.icon-42 { background-position: -200px -150px }
.icon-42n { background-position: 0 -200px }
.icon-44 { background-position: -50px -200px }
.icon-44n { background-position: -100px -200px }
.icon-46, .icon-46n { background-position: -150px -200px }
.icon-47, .icon-47n { background-position: -200px -200px }
.icon-49, .icon-49n { background-position: -250px 0 }
.icon-5 { background-position: -250px -50px }
.icon-50, .icon-50n { background-position: -250px -100px }
.icon-5n { background-position: -250px -150px }
.icon-7 { background-position: -250px -200px }
.icon-7n { background-position: 0 -250px }
.icon-8 { background-position: -50px -250px }
.icon-8n { background-position: -100px -250px }
.icon-9, .icon-9n { background-position: -150px -250px }

.wind-dir-st {
    font-size: 38px;
    color: #45a1ff
}

.lvml {
    behavior: url(#default#VML);
    display: inline-block
}

.small-font-res {
    font-size: inherit
}

/* Responsive Styles */
@media (min-width:1019px) and (max-width:1199px) {
    .dragscroll {
		cursor: grab;
		cursor: -o-grab;
		cursor: -webkit-grab;
	}
}

@media (min-width:768px) and (max-width:1018px) {
    .dragscroll {
		cursor: grab;
		cursor: -o-grab;
		cursor: -webkit-grab;
	}
	
	.entry-content table>tbody>tr>td { padding: 6px; }
	.table-responsive>.table>tbody>tr>td { white-space: normal; }
	.entry-content table>thead>tr>th { padding: 7px 3px; }
	.date-daily-style { font-size: 13px; }
	
	.bottom-info-float {
		width: 100%;
		display: none;
		height: 55px;
		position: fixed;
		bottom: 0;
		background-color: #ffffff;
		left: 0;
		right: 0;
		z-index: 999;
		padding: 15px;
		-webkit-box-shadow: 0px -4px 30px 0px rgba(0,0,0,0.3);
		box-shadow: 0px -4px 30px 0px rgba(0,0,0,0.12);
	}
	
	.page-id-1430 table>tbody>tr>th, table>tbody>tr>td { font-size: 13px; }
	.post-1430 .bs-tab-shortcode .tab-content .tab-pane, .entry-content table>tbody>tr>th { padding: 5px 0; }
	.post-1430 .bs-tab-shortcode .nav-tabs>li>a { padding: 7px 5px; }
	.post-template-14 .single-post-title { font-size: 28px; }
	.post-meta, .post-meta a { font-family: Tahoma,Verdana,Segoe,sans-serif; font-weight: 400; font-size: 12px; text-transform: none; color: #75797f; }
	.entry-content { font-size: 16px; }
	h2, .h2, .heading-2 { font-size: 24px; }
	.listing-item-blog-1>.item-inner>.title, .listing-item-blog-2>.item-inner>.title, .listing-item-blog-3>.item-inner>.title { font-size: 22px; }
}

@media all and (max-width: 970px) {
    #mozzartbet-ad { width: 387px; height: 100px; }
}

@media (min-width:431px) and (max-width:768px) {
    .container { min-width: 100% }
}

@media(max-width:430px) {
    .rain-main-color, .small-font-res, .temp-main-color { font-size: 15px }
}

.post.format-standard .single-featured .image-credit {
    color: #00001a;
    background: #ffffff;
    font-size: 12px;
}

.site-header.header-style-2 .row-height::before {
    background-color: rgba(0, 0, 0, 0.4) !important;
    display: block;
    content: " ";
    position: absolute;
    top: -4px;
    left: 0;
    width: 100%;
    height: calc(100% + 8px);
}

.post p { text-align: justify; }
.page p:not(.has-text-align-center) { text-align: justify; }

/* Featured image figcaption - stilovi za single su u MODERN ARTICLE HERO sekciji */
.ct-featured-image figcaption {
    --fontSize: 14px;
    font-weight: bold;
}

#mapid .leaflet-layer > .leaflet-tile-container > img.leaflet-tile-loaded[src*="tilecache"] {
    opacity: 0.8!important;
}

/* HIDMET Table */
.hidmet-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-family: Arial, sans-serif;
}

.hidmet-table th, .hidmet-table td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: center;
}

.hidmet-table th {
    background-color: #f2f2f2;
    font-weight: bold;
    color: #333;
}

.hidmet-table tr:nth-child(even) { background-color: #f9f9f9; }
.hidmet-table tr:hover { background-color: #f1f1f1; }
.hidmet-table td { font-size: 14px; }

/* ==========================================================================
   ALERT UPOZORENJA - v3.5 CLEAN
   ========================================================================== */

.alert.alert-warning,
p.alert.alert-warning,
.entry-content .alert.alert-warning,
body .alert.alert-warning {
	background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
	font-weight: 600 !important;
	padding: 1.25rem 1.5rem !important;
	border-radius: 12px !important;
	border: none !important;
	border-left: 5px solid #92400e !important;
	margin-bottom: 1rem !important;
}

.alert.alert-warning:last-of-type {
	background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
	border-left-color: #7f1d1d !important;
}

.alert.alert-warning strong {
	font-weight: 900 !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

.alert.alert-warning a {
	color: #fef3c7 !important;
	-webkit-text-fill-color: #fef3c7 !important;
	font-weight: 800 !important;
	text-decoration: underline !important;
}

.alert.alert-warning a:hover {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

.alert.alert-info,
p.alert.alert-info,
body .alert.alert-info {
	background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%) !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
	font-weight: 600 !important;
	padding: 1.25rem 1.5rem !important;
	border-radius: 12px !important;
	border: none !important;
	border-left: 5px solid #075985 !important;
	margin-bottom: 1rem !important;
}

.alert.alert-info strong {
	font-weight: 900 !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

/* SHARE SECTION - CENTRIRANJE (RADI!) */
.entry-content .vm-share-section {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 900px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ==========================================================================
   DOPUNA CUSTOM CSS - v3.9
   
   ZAMENI SVE prethodne dopune!
   Dodaj na kraj Custom CSS-a u WordPress Customizer-u.
   ========================================================================== */

/* CLS Fix */
.vm-ad-container{min-height:100px}
ins.adsbygoogle:not([data-ad-status]):not([data-anchor-status]){min-height:90px;display:block}

/* Plavi okvir fix */
div[data-block^="hook:"]{background:transparent!important;border:none!important;box-shadow:none!important;border-radius:0!important;outline:none!important;padding:0!important}
div[data-block^="hook:"] .entry-content,div[data-block^="hook:"] .ct-container,div[data-block^="hook:"] .ct-container-full{background:transparent!important;background-color:transparent!important;border:none!important;border-top:none!important;box-shadow:none!important;border-radius:0!important;outline:none!important;padding:0!important;margin:0 auto!important}
div[data-block^="hook:"] .entry-content>p{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;margin:0 auto!important}
.ct-content-block .entry-content{background:transparent!important;border:none!important;border-top:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important}
ins.adsbygoogle,ins.adsbygoogle iframe,ins.adsbygoogle>div{border:none!important;outline:none!important;box-shadow:none!important}
.vm-ad-clean,.vm-ad-clean-p{background:transparent!important;background-color:transparent!important;border:none!important;border-top:none!important;box-shadow:none!important;border-radius:0!important;outline:none!important;padding:0!important}

/* Meteogram breakout na mobilnom */
@media only screen and (max-width: 768px) {
	.ecmwfMeteogramWrap {
		width: 100vw !important;
		margin-left: calc(-50vw + 50%) !important;
		border-radius: 0 !important;
		border-left: none !important;
		border-right: none !important;
		padding: 1rem 0 !important;
		box-sizing: border-box !important;
	}
	.ecmwfMeteogramWrap > h2,
	.ecmwfMeteogramWrap > .modern-heading,
	.ecmwfMeteogramWrap > #ecmwfMeteogramMenu {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
	#ecmwfMeteogram {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}
}

/* ==========================================================================
   FIX: Featured Image siva zona na homepage karticama
   Problem: skeleton loading + aspect-ratio kontejner stvara prazan prostor
   ========================================================================== */

/* Homepage kartice - ukloni skeleton sa featured slika */
.home article img,
.home .wp-post-image,
.home .ct-media-container img {
    animation: none !important;
    background: transparent !important;
}

/* Blocksy media kontejner - spreči preveliki prazan prostor */
.home .ct-media-container {
    background: transparent !important;
    overflow: hidden !important;
}

/* Ako nema slike, sakrij kontejner */
.home .ct-media-container:empty {
    display: none !important;
}

/* ct-image-container wrap fix */
.home .ct-image-container {
    margin-bottom: 0 !important;
}

/* Kartica na homepage - tight layout */
.home article .ct-media-container ~ * {
    margin-top: 0 !important;
}

/* ==========================================================================
   FIX: Bottom nav z-index - osigurava da nav bude iznad sadrzaja
   Anchor reklame ostavljamo Google-u da pozicionira - ne menjamo im stilove
   jer to blokira dismiss/collapse funkcionalnost.
   ========================================================================== */
.vm-bottom-nav {
    z-index: 99999 !important;
}

/* ==========================================================================
   FIX: Stara scroll strelica u desetodnevnoj tabeli
   Sakriva Blocksy/nativnu kružnu strelicu, ostavlja samo "Više podataka"
   ========================================================================== */
.table-responsive > .flexy-arrow,
.table-responsive > [class*="arrow"],
.table-responsive > [class*="scroll-btn"],
.mobile-scroll > .flexy-arrow,
.mobile-scroll > [class*="arrow"],
.vm-scroll-wrapper > [class*="flexy"],
.table-responsive::after,
.mobile-scroll::after,
#ecmwfMeteogram::after,
#ecmwfHourly::after {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   FIX: Elementor Posts thumbnail - JS override protection
   Elementor frontend JS dinamički dodaje padding-bottom i position:absolute
   nakon page load-a. Ovo ih prebija.
   ========================================================================== */
.elementor-posts-container .elementor-post__thumbnail[style] {
    padding-bottom: 0 !important;
    height: auto !important;
    background: transparent !important;
}

.elementor-posts-container .elementor-post__thumbnail img[style],
.elementor-posts-container .elementor-post__thumbnail img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    object-fit: cover !important;
    object-position: center !important;
}

.elementor-posts-container .elementor-post__thumbnail__link {
    display: block !important;
    line-height: 0 !important;
}

/* ========================================================================
   MOBILE: LAZY LOAD IMAGE FALLBACK
   Sprečava "?" ikonu kad WebP/LQIP slika ne uspe da se učita na mobilnom.
   LiteSpeed lazy load može ostaviti placeholder ako JS ne zameni sliku.
   ======================================================================== */
@media (max-width: 768px) {
    /* Lazy loaded slike koje nisu loaded - sakrij placeholder ikonu
       Iskljucujemo avatare jer oni imaju fiksne dimenzije 60x60 / 26x26 */
    img[data-ll-status="loading"]:not([class*="avatar"]):not(.ct-media-container img),
    img[data-lazyloaded="1"][src*="data:image"]:not([class*="avatar"]) {
        background-color: var(--vm-bg-secondary, #f1f5f9);
        min-height: 200px;
        object-fit: cover;
    }
    
    /* Avatari sa lazy load - zadrzi okrugao oblik */
    .ct-media-container img[data-lazyloaded="1"],
    .author-box img[data-lazyloaded="1"],
    .entry-meta img[data-lazyloaded="1"],
    img.avatar[data-lazyloaded="1"] {
        min-height: 0 !important;
        max-height: 100% !important;
    }
    
    /* LQIP placeholder - oboji pozadinu umesto da prikaže broken ikonu */
    img.litespeed-loaded[src*=".webp"]:not([complete]),
    img[data-ll-status="error"] {
        background-color: var(--vm-bg-secondary, #f1f5f9);
        color: transparent; /* Sakrij alt text / broken ikonu */
    }
}
/* ==========================================================================
   FIX: Beli okvir oko tabela u desetodnevnoj prognozi
   modern-card wraps tables - ukloni sve okvire, padding, pozadinu
   NAPOMENA: overflow MORA biti auto/visible za scroll na mobilnom!
   ========================================================================== */
#ecmwfDaily.modern-card,
#ecmwfHourly.modern-card,
.modern-card {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 16px !important;
    overflow: visible !important;
}

/* Hourly tabela mora da se skroluje na mobilnom */
#ecmwfHourly.modern-card {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
}

/* table-responsive wrapper unutar modern-card */
#ecmwfDaily .table-responsive,
#ecmwfHourly .table-responsive,
.modern-card .table-responsive {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 16px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Sama tabela unutar modern-card - border-radius samo vizuelno */
#ecmwfDaily table,
#ecmwfHourly table,
.modern-card table {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="dark"] #ecmwfDaily table,
[data-theme="dark"] #ecmwfHourly table,
[data-theme="dark"] .modern-card table,
html[data-theme="dark"] #ecmwfDaily table,
html[data-theme="dark"] #ecmwfHourly table {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================================
   FIX: Datumski redovi u dark mode - ukloni jarko plavu boju
   Koristi isti tamni stil kao u light mode za konzistentnost
   ========================================================================== */
[data-theme="dark"] table tbody tr th,
[data-theme="dark"] table tbody th,
[data-theme="dark"] .table tbody tr th,
[data-theme="dark"] #ecmwfHourly table tbody tr th,
[data-theme="dark"] #ecmwfDaily table tbody tr th,
html[data-theme="dark"] table tbody tr th,
html[data-theme="dark"] table tbody th {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%) !important;
    border-top-color: #334155 !important;
    border-bottom-color: #334155 !important;
    box-shadow: none !important;
}

[data-theme="dark"] table tbody tr th::before,
[data-theme="dark"] .table tbody tr th::before,
html[data-theme="dark"] table tbody tr th::before {
    background: linear-gradient(90deg, transparent, #475569, #64748b, #475569, transparent) !important;
}

/* ==========================================================================
   FIX: Avatar jajast oblik na mobilnom
   Blocksy ct-media-container za avatar - fiksne dimenzije + aspect-ratio
   ========================================================================== */
.ct-author-box .ct-media-container,
.ct-author-box .ct-image-container {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
}

.ct-author-box .ct-media-container img,
.ct-author-box .ct-image-container img,
.ct-author-box img.avatar {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
}

/* Entry meta mala slicica */
.entry-meta .ct-media-container,
.entry-meta .ct-image-container {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: inline-flex !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
}

.entry-meta .ct-media-container img,
.entry-meta .ct-image-container img,
.entry-meta img.avatar {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
}

/* ==========================================================================
   FIX: Anchor Ad i Bottom Nav koegzistencija
   Umesto da menjamo Google-ov anchor ad, pomeramo bottom nav kada je
   anchor prisutan, i osiguravamo da dismiss dugme radi.
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Bottom nav uvek iznad svega */
    .vm-bottom-nav {
        z-index: 99999 !important;
    }
}

/* ==========================================================================
   FIX: Stara scroll strelica u tabelama
   ========================================================================== */
.table-responsive::after,
.mobile-scroll::after,
#ecmwfMeteogram::after,
#ecmwfHourly::after,
.table-responsive > [class*="arrow"],
.table-responsive > [class*="flexy"],
.mobile-scroll > [class*="arrow"],
.vm-scroll-wrapper > [class*="flexy"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   FIX: Dark Mode - Elementor Post kartice na početnoj
   Excerpt tekst i meta info nevidljivi u dark modu
   ========================================================================== */

/* ------ BODY & MAIN BACKGROUND ------ */
[data-theme="dark"] body,
html[data-theme="dark"] body {
    background-color: var(--vm-bg-primary) !important;
    color: var(--vm-text-primary) !important;
}

/* ------ HEADER (Blocksy) ------ */
[data-theme="dark"] header[data-id="type-1"],
[data-theme="dark"] .ct-header,
[data-theme="dark"] [data-row="middle"],
[data-theme="dark"] [data-row="bottom"],
[data-theme="dark"] [data-row="top"],
html[data-theme="dark"] header[data-id="type-1"],
html[data-theme="dark"] .ct-header {
    background-color: var(--vm-bg-secondary) !important;
    border-color: var(--vm-border-color) !important;
}

[data-theme="dark"] .ct-header a,
[data-theme="dark"] .ct-header .ct-menu > li > a,
html[data-theme="dark"] .ct-header a,
html[data-theme="dark"] .ct-header .ct-menu > li > a {
    color: var(--vm-text-primary) !important;
}

[data-theme="dark"] .ct-header a:hover,
[data-theme="dark"] .ct-header .ct-menu > li > a:hover,
html[data-theme="dark"] .ct-header a:hover {
    color: #ffffff !important;
    opacity: 0.9;
}

/* Header dropdown meniji */
[data-theme="dark"] .ct-header .sub-menu,
[data-theme="dark"] .ct-header .ct-menu .sub-menu,
html[data-theme="dark"] .ct-header .sub-menu {
    background-color: var(--vm-bg-secondary) !important;
    border-color: var(--vm-border-color) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .ct-header .sub-menu a,
html[data-theme="dark"] .ct-header .sub-menu a {
    color: var(--vm-text-secondary) !important;
}

[data-theme="dark"] .ct-header .sub-menu a:hover,
html[data-theme="dark"] .ct-header .sub-menu a:hover {
    color: #60a5fa !important;
    background-color: var(--vm-bg-tertiary) !important;
}

/* Mobile menu / Off canvas */
[data-theme="dark"] #offcanvas,
[data-theme="dark"] .ct-panel,
[data-theme="dark"] .ct-offcanvas-content,
html[data-theme="dark"] #offcanvas,
html[data-theme="dark"] .ct-panel {
    background-color: var(--vm-bg-secondary) !important;
    color: var(--vm-text-primary) !important;
}

/* ------ FOOTER ------ */
[data-theme="dark"] footer,
[data-theme="dark"] .ct-footer,
[data-theme="dark"] footer[data-id],
html[data-theme="dark"] footer,
html[data-theme="dark"] .ct-footer {
    background-color: #0c1222 !important;
    color: var(--vm-text-secondary) !important;
    border-top-color: var(--vm-border-color) !important;
}

[data-theme="dark"] .ct-footer a,
html[data-theme="dark"] .ct-footer a {
    color: var(--vm-text-secondary) !important;
}

[data-theme="dark"] .ct-footer a:hover,
html[data-theme="dark"] .ct-footer a:hover {
    color: #60a5fa !important;
}

[data-theme="dark"] .ct-footer [data-row="bottom"],
html[data-theme="dark"] .ct-footer [data-row="bottom"] {
    background-color: #080e1a !important;
    border-top-color: var(--vm-border-color) !important;
}

/* ------ SIDEBAR & WIDGETI ------ */
[data-theme="dark"] .ct-sidebar,
[data-theme="dark"] aside,
[data-theme="dark"] .widget-area,
html[data-theme="dark"] .ct-sidebar {
    color: var(--vm-text-primary) !important;
}

[data-theme="dark"] .ct-sidebar .ct-widget,
[data-theme="dark"] .widget,
html[data-theme="dark"] .ct-sidebar .ct-widget,
html[data-theme="dark"] .widget {
    background-color: var(--vm-card-bg) !important;
    border-color: var(--vm-border-color) !important;
    color: var(--vm-text-primary) !important;
}

[data-theme="dark"] .widget-title,
[data-theme="dark"] .ct-sidebar .widget-title,
html[data-theme="dark"] .widget-title {
    color: var(--vm-text-primary) !important;
}

[data-theme="dark"] .ct-sidebar a,
[data-theme="dark"] .widget a,
html[data-theme="dark"] .ct-sidebar a {
    color: #60a5fa !important;
}

/* ------ MAIN CONTENT AREA ------ */
[data-theme="dark"] .site-content,
[data-theme="dark"] .content-area,
[data-theme="dark"] main,
[data-theme="dark"] .ct-container,
html[data-theme="dark"] .site-content,
html[data-theme="dark"] main {
    background-color: transparent !important;
    color: var(--vm-text-primary) !important;
}

/* ------ HOMEPAGE KARTICE ------ */
[data-theme="dark"] .home article,
[data-theme="dark"] .ct-posts-container article,
html[data-theme="dark"] .home article {
    background-color: var(--vm-card-bg) !important;
    border-color: var(--vm-border-color) !important;
    color: var(--vm-text-primary) !important;
}

[data-theme="dark"] .entry-title a,
html[data-theme="dark"] .entry-title a {
    color: var(--vm-text-primary) !important;
}

[data-theme="dark"] .entry-title a:hover,
html[data-theme="dark"] .entry-title a:hover {
    color: #60a5fa !important;
}

[data-theme="dark"] .entry-meta,
[data-theme="dark"] .entry-meta a,
html[data-theme="dark"] .entry-meta {
    color: var(--vm-text-muted) !important;
}

/* ------ FORME / INPUT POLJA ------ */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: var(--vm-bg-tertiary) !important;
    color: var(--vm-text-primary) !important;
    border-color: var(--vm-border-color) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] input::placeholder {
    color: var(--vm-text-muted) !important;
}

/* ------ KOMENTARI ------ */
[data-theme="dark"] .comment,
[data-theme="dark"] .ct-comment,
[data-theme="dark"] .comment-body,
html[data-theme="dark"] .comment-body {
    background-color: var(--vm-card-bg) !important;
    border-color: var(--vm-border-color) !important;
    color: var(--vm-text-primary) !important;
}

/* ------ PAGINACIJA ------ */
[data-theme="dark"] .page-numbers,
html[data-theme="dark"] .page-numbers {
    color: var(--vm-text-secondary) !important;
    background-color: var(--vm-bg-secondary) !important;
    border-color: var(--vm-border-color) !important;
}

[data-theme="dark"] .page-numbers.current,
html[data-theme="dark"] .page-numbers.current {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

/* ------ BREADCRUMBS ------ */
[data-theme="dark"] .ct-breadcrumbs,
html[data-theme="dark"] .ct-breadcrumbs {
    color: var(--vm-text-muted) !important;
}

[data-theme="dark"] .ct-breadcrumbs a,
html[data-theme="dark"] .ct-breadcrumbs a {
    color: var(--vm-text-secondary) !important;
}

/* ------ BOTTOM NAV (dark mode) ------ */
[data-theme="dark"] .vm-bottom-nav,
html[data-theme="dark"] .vm-bottom-nav {
    background: var(--vm-card-bg) !important;
    border-top-color: var(--vm-border-color) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .vm-bottom-nav-item,
html[data-theme="dark"] .vm-bottom-nav-item {
    color: var(--vm-text-secondary) !important;
}

[data-theme="dark"] .vm-bottom-nav-item:hover,
[data-theme="dark"] .vm-bottom-nav-item.active,
html[data-theme="dark"] .vm-bottom-nav-item:hover {
    color: #60a5fa !important;
}

/* ------ ELEMENTOR SEKCIJE ------ */
[data-theme="dark"] .elementor-section:not([data-settings*="background"]),
html[data-theme="dark"] .elementor-section:not([data-settings*="background"]) {
    background-color: transparent !important;
}

[data-theme="dark"] .elementor-widget-text-editor p,
html[data-theme="dark"] .elementor-widget-text-editor p {
    color: var(--vm-text-primary) !important;
}

[data-theme="dark"] .elementor-heading-title,
html[data-theme="dark"] .elementor-heading-title {
    color: var(--vm-text-primary) !important;
}

/* ------ ARTICLE LINKS (dark mode) ------ */
[data-theme="dark"] body:not(.home) .entry-content a:not(.button):not(.btn):not(.vm-share-btn):not(.vm-fab-share):not(.vm-fab-menu-item):not(.vm-bottom-nav-item),
html[data-theme="dark"] body:not(.home) .entry-content a:not(.button):not(.btn):not(.vm-share-btn) {
    color: #60a5fa !important;
}

[data-theme="dark"] body:not(.home) .entry-content a:not(.button):not(.btn):not(.vm-share-btn):not(.vm-fab-share):not(.vm-fab-menu-item):not(.vm-bottom-nav-item):hover,
html[data-theme="dark"] body:not(.home) .entry-content a:not(.button):not(.btn):not(.vm-share-btn):hover {
    color: #93bbfd !important;
}

/* ------ AD PLACEHOLDER (dark mode) - UKLONJENO (v6.2) ------ */

/* ------ TAGOVI ------ */
[data-theme="dark"] .tagcloud a,
[data-theme="dark"] .ct-tags a,
html[data-theme="dark"] .tagcloud a {
    background-color: var(--vm-bg-tertiary) !important;
    color: var(--vm-text-primary) !important;
    border-color: var(--vm-border-color) !important;
}

/* ------ HIGHLIGHT BOXES ------ */
[data-theme="dark"] .vm-highlight.warning,
html[data-theme="dark"] .vm-highlight.warning {
    background: linear-gradient(135deg, #422006 0%, #1c1917 100%) !important;
    border-left-color: #f59e0b !important;
    color: #fef3c7 !important;
}

[data-theme="dark"] .vm-highlight.danger,
html[data-theme="dark"] .vm-highlight.danger {
    background: linear-gradient(135deg, #450a0a 0%, #1c1917 100%) !important;
    border-left-color: #ef4444 !important;
    color: #fecaca !important;
}

[data-theme="dark"] .vm-highlight.info,
html[data-theme="dark"] .vm-highlight.info {
    background: linear-gradient(135deg, #172554 0%, #0f172a 100%) !important;
    border-left-color: #3b82f6 !important;
    color: #bfdbfe !important;
}

[data-theme="dark"] .vm-highlight.tip,
html[data-theme="dark"] .vm-highlight.tip {
    background: linear-gradient(135deg, #052e16 0%, #0f172a 100%) !important;
    border-left-color: #22c55e !important;
    color: #bbf7d0 !important;
}

/* ------ FIGCAPTION ------ */
[data-theme="dark"] figcaption,
html[data-theme="dark"] figcaption {
    background: var(--vm-bg-tertiary) !important;
    color: var(--vm-text-muted) !important;
}

/* ------ TOC ------ */
[data-theme="dark"] .vm-toc,
html[data-theme="dark"] .vm-toc {
    background: var(--vm-card-bg) !important;
    border-color: var(--vm-border-color) !important;
}

/* ------ PREFERS-COLOR-SCHEME sistemska podrska ------ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body {
        background-color: var(--vm-bg-primary);
        color: var(--vm-text-primary);
    }
    :root:not([data-theme="light"]) header[data-id="type-1"],
    :root:not([data-theme="light"]) .ct-header {
        background-color: var(--vm-bg-secondary);
    }
    :root:not([data-theme="light"]) footer,
    :root:not([data-theme="light"]) .ct-footer {
        background-color: #0c1222;
    }
    :root:not([data-theme="light"]) .vm-bottom-nav {
        background: var(--vm-card-bg);
        border-top-color: var(--vm-border-color);
    }
    :root:not([data-theme="light"]) .vm-theme-toggle-nav .vm-icon-sun { display: none; }
    :root:not([data-theme="light"]) .vm-theme-toggle-nav .vm-icon-moon { display: block; }
    :root:not([data-theme="light"]) .vm-theme-toggle-nav .vm-theme-label-light { display: none; }
    :root:not([data-theme="light"]) .vm-theme-toggle-nav .vm-theme-label-dark { display: block; }
}

/* ==========================================================================
   FIX: Dark Mode - Elementor Post kartice na pocetnoj
   Excerpt tekst i meta info nevidljivi u dark modu
   ========================================================================== */
[data-theme="dark"] .elementor-post__excerpt,
[data-theme="dark"] .elementor-post__excerpt p,
html[data-theme="dark"] .elementor-post__excerpt,
html[data-theme="dark"] .elementor-post__excerpt p {
    color: var(--vm-text-secondary) !important;
}

[data-theme="dark"] .elementor-post__title,
[data-theme="dark"] .elementor-post__title a,
html[data-theme="dark"] .elementor-post__title,
html[data-theme="dark"] .elementor-post__title a {
    color: var(--vm-text-primary) !important;
}

[data-theme="dark"] .elementor-post__text,
html[data-theme="dark"] .elementor-post__text {
    color: var(--vm-text-secondary) !important;
}

[data-theme="dark"] .elementor-post__meta-data,
[data-theme="dark"] .elementor-post__meta-data span,
[data-theme="dark"] .elementor-post-date,
[data-theme="dark"] .elementor-post-author,
[data-theme="dark"] .elementor-post__read-more,
html[data-theme="dark"] .elementor-post__meta-data,
html[data-theme="dark"] .elementor-post__meta-data span {
    color: var(--vm-text-muted) !important;
}

[data-theme="dark"] .elementor-post__read-more,
html[data-theme="dark"] .elementor-post__read-more {
    color: #60a5fa !important;
}

[data-theme="dark"] .elementor-post__card,
[data-theme="dark"] .elementor-post,
html[data-theme="dark"] .elementor-post__card {
    background-color: var(--vm-card-bg) !important;
    border-color: var(--vm-border-color) !important;
}

[data-theme="dark"] .elementor-posts-container .elementor-post__badge,
html[data-theme="dark"] .elementor-posts-container .elementor-post__badge {
    color: #ffffff !important;
}

/* ==========================================================================
   FIX: Dark Mode - Padavine kolona u tabelama
   .rain-0 ima tamnosiv tekst i belu pozadinu - nevidljivo u dark modu
   Takođe: .rain-0 globalna klasa (tekstualna) za "0 mm"
   ========================================================================== */
[data-theme="dark"] .rain-0,
html[data-theme="dark"] .rain-0 {
    color: #94a3b8 !important;
    background-color: transparent !important;
}

[data-theme="dark"] td.rain-0,
[data-theme="dark"] .desetodnevna_wrap td.rain-0,
[data-theme="dark"] #ecmwfDaily td.rain-0,
[data-theme="dark"] #ecmwfHourly td.rain-0,
html[data-theme="dark"] td.rain-0,
html[data-theme="dark"] .desetodnevna_wrap td.rain-0 {
    background-color: transparent !important;
    color: #94a3b8 !important;
}

/* Rain text klase (0 mm vrednosti) - pojačan kontrast u dark modu */
[data-theme="dark"] .rain-1p,
html[data-theme="dark"] .rain-1p {
    color: #7dd3fc !important;
}

[data-theme="dark"] .rain-5p,
html[data-theme="dark"] .rain-5p {
    color: #38bdf8 !important;
}

[data-theme="dark"] .rain-15p,
html[data-theme="dark"] .rain-15p {
    color: #0ea5e9 !important;
}

[data-theme="dark"] .rain-25p,
html[data-theme="dark"] .rain-25p {
    color: #60a5fa !important;
}

[data-theme="dark"] .rain-25pp,
html[data-theme="dark"] .rain-25pp {
    color: #c084fc !important;
}

/* Rain pozadinske ćelije - bele pozadine u dark mode postaju transparentne */
[data-theme="dark"] td[class*="rain-"],
html[data-theme="dark"] td[class*="rain-"] {
    border-color: rgba(51, 65, 85, 0.5) !important;
}

/* ==========================================================================
   FIX: Dark Mode - Opisni tekst na desetodnevnoj prognozi
   Paragraf ispod naslova stranice - siv tekst na tamnoj pozadini
   ========================================================================== */
[data-theme="dark"] .entry-content > p,
[data-theme="dark"] .entry-content p,
[data-theme="dark"] body.page .entry-content p,
html[data-theme="dark"] .entry-content > p,
html[data-theme="dark"] body.page .entry-content p {
    color: var(--vm-text-secondary) !important;
}

[data-theme="dark"] body.page .entry-content,
html[data-theme="dark"] body.page .entry-content {
    color: var(--vm-text-primary) !important;
}

[data-theme="dark"] body.page .entry-content h1,
[data-theme="dark"] body.page .entry-content h2,
[data-theme="dark"] body.page .entry-content h3,
[data-theme="dark"] body.page .entry-content h4,
html[data-theme="dark"] body.page .entry-content h1,
html[data-theme="dark"] body.page .entry-content h2,
html[data-theme="dark"] body.page .entry-content h3,
html[data-theme="dark"] body.page .entry-content h4 {
    color: var(--vm-text-primary) !important;
}

[data-theme="dark"] body.page .entry-content a:not(.button):not(.btn),
html[data-theme="dark"] body.page .entry-content a:not(.button):not(.btn) {
    color: #60a5fa !important;
}

[data-theme="dark"] body.page .entry-content a:not(.button):not(.btn):hover,
html[data-theme="dark"] body.page .entry-content a:not(.button):not(.btn):hover {
    color: #93bbfd !important;
}

/* ==========================================================================
   FIX: Dark Mode - Generalni tekst tabela (svi td/th elementi)
   Vetar, vlaga, pritisak, pravac, sat - svi beli u dark modu
   ========================================================================== */
[data-theme="dark"] .desetodnevna_wrap table td,
[data-theme="dark"] .desetodnevna_wrap table th,
[data-theme="dark"] #ecmwfDaily table td,
[data-theme="dark"] #ecmwfHourly table td,
html[data-theme="dark"] .desetodnevna_wrap table td,
html[data-theme="dark"] #ecmwfDaily table td,
html[data-theme="dark"] #ecmwfHourly table td {
    color: var(--vm-text-primary) !important;
}

/* Tabele - redovi alternating boja u dark modu */
[data-theme="dark"] table tbody tr:nth-child(even),
html[data-theme="dark"] table tbody tr:nth-child(even) {
    background-color: rgba(30, 41, 59, 0.5) !important;
}

[data-theme="dark"] table tbody tr:nth-child(odd),
html[data-theme="dark"] table tbody tr:nth-child(odd) {
    background-color: rgba(15, 23, 42, 0.5) !important;
}

/* Tabele - generalna pozadina za body of table */
[data-theme="dark"] table,
[data-theme="dark"] .table,
html[data-theme="dark"] table {
    background-color: transparent !important;
    color: var(--vm-text-primary) !important;
}

/* Hidmet tabela dark mode */
[data-theme="dark"] .hidmet-table tr:nth-child(even),
html[data-theme="dark"] .hidmet-table tr:nth-child(even) {
    background-color: var(--vm-bg-secondary) !important;
}

[data-theme="dark"] .hidmet-table th,
html[data-theme="dark"] .hidmet-table th {
    background-color: var(--vm-bg-tertiary) !important;
    color: var(--vm-text-primary) !important;
    border-color: var(--vm-border-color) !important;
}

/* Ali sačuvaj boju za temperaturne i rain ćelije koje imaju svoje pozadine */
[data-theme="dark"] td[class*="temp-"],
html[data-theme="dark"] td[class*="temp-"] {
    color: #ffffff !important;
}

/* ==========================================================================
   FIX: Dark Mode - Livesearch dropdown
   ========================================================================== */
[data-theme="dark"] .livesearch-c,
html[data-theme="dark"] .livesearch-c {
    background-color: var(--vm-bg-secondary) !important;
    border: 1px solid var(--vm-border-color) !important;
}

[data-theme="dark"] .livesearch-c a,
html[data-theme="dark"] .livesearch-c a {
    color: var(--vm-text-primary) !important;
}

[data-theme="dark"] .livesearch-c a:hover,
html[data-theme="dark"] .livesearch-c a:hover {
    background: var(--vm-bg-tertiary) !important;
}

/* ==========================================================================
   FIX: Dark Mode - Search input polje
   ========================================================================== */
[data-theme="dark"] input[type=text].livesearch-input-style,
html[data-theme="dark"] input[type=text].livesearch-input-style {
    background-color: var(--vm-bg-secondary) !important;
    color: var(--vm-text-primary) !important;
    border-color: #475569 !important;
}

[data-theme="dark"] input[type=text].livesearch-input-style::placeholder,
html[data-theme="dark"] input[type=text].livesearch-input-style::placeholder {
    color: var(--vm-text-muted) !important;
}

/* ==========================================================================
   FIX: Dark Mode - Thead light klasa u tabelama
   ========================================================================== */
[data-theme="dark"] .table .thead-light th,
html[data-theme="dark"] .table .thead-light th {
    color: #e2e8f0 !important;
    background-color: #1e3a5f !important;
    border-color: #334155 !important;
}

/* ==========================================================================
   FIX 1: Dark Mode - Naslovi clanaka (h1) taman na tamnoj pozadini
   Problem: entry-title koristi var(--vm-text-primary) ali Blocksy 
   CSS specificnost je veca pa prebija nasu boju
   ========================================================================== */
[data-theme="dark"] h1.entry-title,
[data-theme="dark"] h1.page-title,
[data-theme="dark"] .single-post-title,
[data-theme="dark"] body.single h1.entry-title,
[data-theme="dark"] body.single .single-post-title,
[data-theme="dark"] body.page h1.entry-title,
[data-theme="dark"] body.page h1.page-title,
html[data-theme="dark"] h1.entry-title,
html[data-theme="dark"] h1.page-title,
html[data-theme="dark"] body.single h1.entry-title,
html[data-theme="dark"] body.page h1.entry-title {
    color: #f8fafc !important;
}

[data-theme="dark"] body.single .entry-content h2,
[data-theme="dark"] body.single .entry-content h3,
[data-theme="dark"] body.single .entry-content h4,
html[data-theme="dark"] body.single .entry-content h2,
html[data-theme="dark"] body.single .entry-content h3 {
    color: #f1f5f9 !important;
}

/* ==========================================================================
   FIX 2: Dark Mode - Tekst na stranicama (page) - pojacana vidljivost
   Problem: tekst na desetodnevna, radar, i drugim stranicama je 
   nedovoljno vidljiv. Treba biti beo/svetlo siv.
   ========================================================================== */
[data-theme="dark"] body.page .entry-content p,
[data-theme="dark"] body.page .entry-content,
[data-theme="dark"] body.page .entry-content li,
[data-theme="dark"] body.page .entry-content span,
html[data-theme="dark"] body.page .entry-content p,
html[data-theme="dark"] body.page .entry-content,
html[data-theme="dark"] body.page .entry-content li {
    color: #e2e8f0 !important;
}

/* Opisni text ispod naslova na desetodnevnoj i drugim stranicama */
[data-theme="dark"] .entry-content > p,
html[data-theme="dark"] .entry-content > p {
    color: #e2e8f0 !important;
}

/* Tekst u single clancima */
[data-theme="dark"] body.single .entry-content p,
[data-theme="dark"] body.single .entry-content p:not(:first-child),
html[data-theme="dark"] body.single .entry-content p,
html[data-theme="dark"] body.single .entry-content p:not(:first-child) {
    color: #e2e8f0 !important;
}

/* Uvodni paragraf u clanku */
[data-theme="dark"] body.single .entry-content > p:first-of-type,
html[data-theme="dark"] body.single .entry-content > p:first-of-type {
    color: #f1f5f9 !important;
}

/* Figcaption u dark modu - svetliji tekst */
[data-theme="dark"] body.single .entry-content figcaption,
html[data-theme="dark"] body.single .entry-content figcaption {
    color: #94a3b8 !important;
    background: rgba(30, 41, 59, 0.8) !important;
}

/* ==========================================================================
   FIX 3: Mobilni - Clanak full-width
   Prosiriti entry-content da koristi celu sirinu ekrana
   ========================================================================== */
@media screen and (max-width: 768px) {
    body.single .entry-content {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
        padding: 1.25rem 1.25rem !important;
        width: calc(100% + 1rem) !important;
        max-width: none !important;
    }

    body.single article,
    body.single .site-main,
    body.single .ct-container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Naslov centriran full width */
    body.single h1.entry-title,
    body.single .single-post-title {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Stranice (page) takodje full width */
    body.page .entry-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   FIX 4: Dark Mode - Kvalitet vazduha (AQI) sekcija
   Problem: dark mode override menja tekst, AQI detalji (PM2.5 itd) 
   nemaju svoju pozadinu pa nasledjuju tamnu od body-ja.
   Resenje: sacuvati crn tekst + dodati svetlu pozadinu karticama.
   ========================================================================== */
[data-theme="dark"] #kvalitet_vazduha,
html[data-theme="dark"] #kvalitet_vazduha {
    color: #000000 !important;
}

[data-theme="dark"] #kvalitet_vazduha .aqi_num,
[data-theme="dark"] #kvalitet_vazduha #aqi_score,
[data-theme="dark"] #kvalitet_vazduha #aqi_title,
[data-theme="dark"] #kvalitet_vazduha #aqi_title *,
[data-theme="dark"] #kvalitet_vazduha .aqi_naziv_main,
[data-theme="dark"] #kvalitet_vazduha .aqi_opisno,
html[data-theme="dark"] #kvalitet_vazduha .aqi_num,
html[data-theme="dark"] #kvalitet_vazduha #aqi_score,
html[data-theme="dark"] #kvalitet_vazduha #aqi_title * {
    color: #000000 !important;
}

[data-theme="dark"] #kvalitet_vazduha .aqi_naziv_sub,
html[data-theme="dark"] #kvalitet_vazduha .aqi_naziv_sub {
    color: #333333 !important;
}

/* AQI detalji kartice (PM2.5, PM10, O3 itd) - svetla pozadina u dark modu */
[data-theme="dark"] #kvalitet_vazduha #aqi_detalji ul li,
html[data-theme="dark"] #kvalitet_vazduha #aqi_detalji ul li {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #000000 !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
    border-radius: 6px !important;
    padding: 5px 8px !important;
}

/* ==========================================================================
   FIX 5: Google Interstitial/Overlay Ad - dismiss dugme nevidljivo
   v6.3 - Ispravljeni selektori da ne ometaju Google Vignette layout
   
   Problem v6.2: Presiroke CSS selektore (div[id*="dismiss"], div[id*="close"])
   koje su ciljale SVE elemente sa tim recima u ID-ju, ukljucujuci Google-ove
   interne elemente. min-width/min-height na tim elementima remetio
   Google-ov Vignette layout (reklama pomerena ulevo, nema close dugmeta).
   
   Resenje: Ne diramo Google-ove interne elemente unutar vignette/interstitial
   kontejnera. Google sam renderuje dismiss dugme - mi ga ne smemo ometati.
   Samo osiguravamo da nas CSS ne blokira Google-ov overlay.
   ========================================================================== */

/* Google vignette/interstitial - NE blokiraj overlay i NE menjaj layout */
/* Kljucno: ne postavljati min-width/min-height na Google-ove interne divove */
body > div[style*="position: fixed"][style*="z-index"][style*="inset: 0px"]:not(.vm-bottom-nav):not(#offcanvas):not(.ct-panel) {
    pointer-events: auto !important;
    /* Resetuj box-sizing za Google overlay kontejner */
    box-sizing: content-box !important;
}

/* Google overlay iframe i njegovi susedi - ne ometaj */
body > div[style*="position: fixed"][style*="inset: 0px"] iframe,
body > div[style*="position: fixed"][style*="inset: 0px"] > div {
    box-sizing: content-box !important;
}

/* Kada je overlay aktivan - bottom nav mora ostati iznad */
@media screen and (max-width: 768px) {
    .vm-bottom-nav {
        z-index: 2147483646 !important;
    }
}

/* ==========================================================================
   HOMEPAGE - MAP CONTROLS
   v1.0 - Migrirano sa Elementor page CSS na Gutenberg
   ========================================================================== */

/* Sakrivanje naslova stranice na pocetnoj */
.page-id-12108 .entry-title { display: none; }
.page-id-12108 .hero-section { display: none; }

/* Mapa padavina kontejner */
#mapid {
    position: relative;
    width: 100%;
    height: 650px;
    border-radius: var(--vm-radius);
    overflow: hidden;
}

/* Kontrole mape - flex container */
.vm-map-controls {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 0;
}

.vm-map-controls .kind_radio_container,
.vm-map-controls .anim_control,
.vm-map-controls .map_color_picker {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--vm-bg-secondary);
    padding: 8px;
    gap: 5px;
    border-radius: 9999px;
    box-shadow: inset 0.5px 0.5px 2px 0 rgba(0, 0, 0, 0.15);
}

.vm-map-controls * { margin: 0; }

/* Radio dugmad (Radar / Satelit) */
.kind_radio_container input[type="radio"] {
    appearance: none;
    display: none;
}

.kind_radio_container label {
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: inherit;
    padding: 8px 18px;
    text-align: center;
    border-radius: 9999px;
    overflow: hidden;
    transition: linear 0.3s;
    color: var(--vm-text-primary);
    cursor: pointer;
}

.kind_radio_container label:hover {
    background-color: var(--vm-bg-tertiary);
}

.kind_radio_container input[type="radio"]:checked + label {
    background-color: #1e90ff;
    color: #f1f3f5;
    transition: 0.3s;
}

/* Dugmad za animaciju */
.anim_control button {
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 18px;
    text-align: center;
    border-radius: 9999px;
    overflow: hidden;
    transition: linear 0.3s;
    cursor: pointer;
    border: none;
    background-color: #1e90ff;
    color: #f1f3f5;
    position: relative;
}

.anim_control .play_btn { padding-right: 35px; }
.play_btn #play_pasue_icon { position: absolute; right: 5px; }
.play_btn svg { width: 21px; }
.anim_control button.nav_btn { padding: 0; width: 30px; height: 30px; }

/* Izbor boja - koristi inherit pozadinu kao ostale kontrole */
.map_color_picker select {
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 1;
    height: auto;
    padding: 8px 32px 8px 14px;
    border-radius: 9999px;
    transition: linear 0.3s;
    cursor: pointer;
    border: none;
    background-color: inherit;
    color: var(--vm-text-primary);
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.map_color_picker select:hover {
    background-color: var(--vm-bg-tertiary);
}

.map_color_picker select option {
    background-color: #ffffff;
    color: #1a1a2e;
    padding: 8px;
}

/* Dark mode: dropdown chevron u boji */
[data-theme="dark"] .map_color_picker select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ccc' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

/* Timestamp */
#timestamp {
    text-align: center;
    padding: 8px 0;
    color: var(--vm-text-secondary);
    font-size: 0.9rem;
}

/* ==========================================================================
   HOMEPAGE - VWF FORECAST WIDGET (zamenjuje stari trodnevna + TWSW)
   v3.0 - Identican dizajn kao VWF na matičnoj stranici prognoze
   ========================================================================== */

/* Widget outer container - dark gradient background */
.vwfh-widget {
    --vwfh-primary: #1a5276;
    --vwfh-primary-light: #2980b9;
    --vwfh-accent: #e67e22;
    --vwfh-bg-dark: #0b1929;
    --vwfh-bg-card: #ffffff;
    --vwfh-text: #2c3e50;
    --vwfh-text-light: #7f8c8d;
    --vwfh-border: #dfe6e9;
    --vwfh-radius: 16px;
    --vwfh-shadow: 0 4px 24px rgba(0,0,0,0.08);
    --vwfh-wind-teal: #16a085;
    --vwfh-font: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

    font-family: var(--vwfh-font);
    background: linear-gradient(160deg, var(--vwfh-bg-dark) 0%, #1a3a5c 40%, var(--vwfh-primary) 100%);
    padding: 20px 16px;
    border-radius: var(--vwfh-radius);
    position: relative;
    overflow: hidden;
}

.vwfh-widget::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(41,128,185,0.15) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 20%, rgba(230,126,34,0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Day card */
.vwfh-day-card {
    position: relative;
    z-index: 1;
    background: var(--vwfh-bg-card);
    border-radius: var(--vwfh-radius);
    overflow: hidden;
    box-shadow: var(--vwfh-shadow);
    display: flex;
    flex-direction: column;
}

.vwfh-day-card::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--vwfh-primary-light), var(--vwfh-accent));
}

/* Header */
.vwfh-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 10px;
}

.vwfh-day-date-main {
    font-family: var(--vwfh-font);
    font-size: 1rem;
    font-weight: 700;
    color: var(--vwfh-text);
    line-height: 1.3;
}

.vwfh-day-sublabel {
    font-size: 0.72rem;
    color: var(--vwfh-text-light);
    font-weight: 500;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vwfh-day-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--vwfh-primary), var(--vwfh-primary-light));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vwfh-day-badge .wi {
    font-size: 18px;
}

/* Map */
.vwfh-weather-map {
    height: 260px;
    margin: 0 10px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}

/* Description */
.vwfh-weather-description {
    padding: 14px 16px;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--vwfh-text);
    border-bottom: 1px solid var(--vwfh-border);
}

/* Data section */
.vwfh-data-section {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Temperature grid */
.vwfh-temp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.vwfh-temp-card {
    padding: 12px 10px;
    border-radius: 10px;
    text-align: center;
}

.vwfh-temp-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin-bottom: 4px;
}

.vwfh-temp-value {
    font-family: var(--vwfh-font);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Wind card */
.vwfh-wind-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #eafaf1;
    border: 1px solid #a3e4bc;
}

.vwfh-wind-icon-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--vwfh-wind-teal);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
}

.vwfh-wind-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--vwfh-wind-teal);
    margin-bottom: 1px;
}

.vwfh-wind-text {
    font-size: 0.82rem;
    color: var(--vwfh-text);
    line-height: 1.4;
}

/* Map date label (Leaflet control) */
.vwfh-date-label {
    background: var(--vwfh-bg-card);
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.2);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--vwfh-text);
}

/* Weather icon markers on map */
.vwfh-custom-marker-wrapper {
    background: transparent !important;
    border: none !important;
}

.vwfh-custom-marker {
    background: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    border: 2.5px solid #2980b9;
    pointer-events: auto;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vwfh-custom-marker:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.vwfh-custom-marker .wi {
    font-size: 20px;
    color: #2980b9;
}

/* Weather icon color mapping (identical to VWF) */
.vwfh-custom-marker .wi-day-sunny,
.vwfh-custom-marker .wi-hot { color: #f39c12; }

.vwfh-custom-marker .wi-day-sunny-overcast,
.vwfh-custom-marker .wi-day-cloudy-high,
.vwfh-custom-marker .wi-day-cloudy,
.vwfh-custom-marker .wi-day-light-wind { color: #e6a117; }

.vwfh-custom-marker .wi-cloud,
.vwfh-custom-marker .wi-cloudy,
.vwfh-custom-marker .wi-cloudy-gusts { color: #7f8c8d; }

.vwfh-custom-marker .wi-rain,
.vwfh-custom-marker .wi-day-rain,
.vwfh-custom-marker .wi-day-showers,
.vwfh-custom-marker .wi-sprinkle,
.vwfh-custom-marker .wi-day-rain-wind,
.vwfh-custom-marker .wi-rain-mix { color: #3498db; }

.vwfh-custom-marker .wi-thunderstorm,
.vwfh-custom-marker .wi-day-thunderstorm,
.vwfh-custom-marker .wi-day-storm-showers,
.vwfh-custom-marker .wi-day-snow-thunderstorm { color: #8e44ad; }

.vwfh-custom-marker .wi-snow,
.vwfh-custom-marker .wi-day-snow,
.vwfh-custom-marker .wi-snowflake-cold,
.vwfh-custom-marker .wi-snow-wind { color: #5dade2; }

.vwfh-custom-marker .wi-sleet,
.vwfh-custom-marker .wi-day-sleet { color: #74b9ff; }

.vwfh-custom-marker .wi-fog,
.vwfh-custom-marker .wi-day-haze,
.vwfh-custom-marker .wi-smog { color: #95a5a6; }

.vwfh-custom-marker .wi-strong-wind,
.vwfh-custom-marker .wi-sandstorm { color: #16a085; }

/* Leaflet tooltip inside VWF widget */
.vwfh-widget .leaflet-tooltip {
    font-family: var(--vwfh-font);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 9px;
    border-radius: 6px;
    background: #1a5276;
    color: white;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.vwfh-widget .leaflet-tooltip-top::before {
    border-top-color: #1a5276;
}

/* Loading & error states */
.vwfh-loading-screen {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255,255,255,0.7);
}

.vwfh-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: #e67e22;
    border-radius: 50%;
    margin: 0 auto 14px;
    animation: vwfh-spin 0.8s linear infinite;
}

@keyframes vwfh-spin { to { transform: rotate(360deg); } }

.vwfh-error {
    background: rgba(231,76,60,0.15);
    border: 1px solid rgba(231,76,60,0.3);
    color: #fce4e4;
    padding: 24px;
    border-radius: 12px;
    text-align: center;
    font-size: 0.9rem;
}

/* ==========================================================================
   HOMEPAGE - CTA KARTICE (zamenjuju Elementor button widgete)
   v1.0 - Moderni card dizajn sa ikonom i opisom
   ========================================================================== */

.vm-cta-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    margin-top: 16px;
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius);
    text-decoration: none;
    color: var(--vm-text-primary);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.vm-cta-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: #3b82f6;
    color: var(--vm-text-primary);
    text-decoration: none;
}

.vm-cta-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--vm-gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vm-cta-card-icon svg {
    width: 24px;
    height: 24px;
    fill: #ffffff;
}

.vm-cta-card-content { flex: 1; }

.vm-cta-card-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 2px;
    line-height: 1.3;
}

.vm-cta-card-desc {
    font-size: 0.85rem;
    color: var(--vm-text-muted);
    margin: 0;
    line-height: 1.4;
}

.vm-cta-card-arrow {
    width: 20px;
    height: 20px;
    fill: var(--vm-text-muted);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.vm-cta-card:hover .vm-cta-card-arrow {
    transform: translateX(4px);
    fill: #3b82f6;
}

/* TWSW widget CSS removed in v3.0 - replaced by VWF Homepage Widget (.vwfh-*) above */

/* ==========================================================================
   HOMEPAGE - QUERY LOOP POSTOVI (zamenjuje Elementor Posts widget)
   v1.0 - Native WordPress Query Loop stilizacija
   ========================================================================== */

/* Sekcija divider - "Aktuelnosti" */
.vm-section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.vm-section-divider::after {
    content: '';
    flex: 1;
    height: 2px;
    background: var(--vm-gradient-primary);
    border-radius: 1px;
}

.vm-section-divider-text {
    font-size: 0.85rem;
    font-weight: 400;
    color: #2596BE;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Naslov sekcije */
.vm-section-title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    font-weight: 700;
    color: var(--vm-text-primary);
    margin: 0 0 24px;
    line-height: 1.2;
}

/* Post template lista */
.vm-posts-section .vm-query-loop .wp-block-post-template {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Pojedinacni post card */
.vm-posts-section .vm-query-loop .wp-block-post {
    background: var(--vm-card-bg);
    border-radius: var(--vm-radius);
    overflow: hidden;
    border-top: 3px solid #1559ed;
    border-bottom: 3px solid #1559ed;
    box-shadow: 3px 3px 20px 0 rgba(255, 185, 0, 0.5);
    margin-bottom: 40px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vm-posts-section .vm-query-loop .wp-block-post:hover {
    box-shadow: 3px 3px 30px 0 rgba(255, 185, 0, 0.7);
    transform: translateY(-2px);
}

/* Featured image — 16:9 aspect ratio box sa cover cropom.
   Gutenberg Query Loop vec postavlja aspectRatio:"16/9" na container,
   ali moramo obezbediti da img uvek popunjava ceo box bez beline.
   Container ima overflow:hidden za crop, img koristi object-fit:cover. */
.vm-posts-section .vm-query-loop .wp-block-post-featured-image {
    margin: 0;
    line-height: 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.vm-posts-section .vm-query-loop .wp-block-post-featured-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.vm-posts-section .vm-query-loop .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Naslov posta */
.vm-posts-section .vm-query-loop .wp-block-post-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    padding: 16px 20px 8px;
    margin: 0;
    line-height: 1.3;
}

.vm-posts-section .vm-query-loop .wp-block-post-title a {
    color: var(--vm-text-primary);
    text-decoration: none;
}

.vm-posts-section .vm-query-loop .wp-block-post-title a:hover {
    color: #3b82f6;
}

/* Datum */
.vm-posts-section .vm-query-loop .wp-block-post-date {
    font-size: 0.9rem;
    color: #2596BE;
    font-weight: 500;
    padding: 0 20px;
    margin: 0 0 8px;
}

/* Excerpt */
.vm-posts-section .vm-query-loop .wp-block-post-excerpt {
    font-size: 1rem;
    color: var(--vm-text-secondary);
    padding: 0 20px 20px;
    margin: 0;
    line-height: 1.65;
}

.vm-posts-section .vm-query-loop .wp-block-post-excerpt__more-link {
    display: inline-block;
    font-size: 0.9rem;
    color: #3b82f6;
    font-weight: 600;
    margin-top: 8px;
    text-decoration: none;
}

.vm-posts-section .vm-query-loop .wp-block-post-excerpt__more-link:hover {
    color: #1d4ed8;
}

/* Paginacija */
.vm-posts-section .vm-query-loop .wp-block-query-pagination {
    margin-top: 30px;
    gap: 8px;
    justify-content: center;
}

.vm-posts-section .vm-query-loop .wp-block-query-pagination-numbers .page-numbers {
    padding: 8px 14px;
    border-radius: var(--vm-radius-small);
    background: var(--vm-bg-secondary);
    color: var(--vm-text-secondary);
    border: 1px solid var(--vm-border-color);
    text-decoration: none;
}

.vm-posts-section .vm-query-loop .wp-block-query-pagination-numbers .page-numbers.current {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

.vm-posts-section .vm-query-loop .wp-block-query-pagination-numbers .page-numbers:hover:not(.current) {
    background: var(--vm-bg-tertiary);
}

/* ==========================================================================
   HOMEPAGE - DARK MODE
   v1.0 - Override-ovi za tamnu temu
   ========================================================================== */

/* Map controls */
[data-theme="dark"] .vm-map-controls .kind_radio_container,
[data-theme="dark"] .vm-map-controls .anim_control,
[data-theme="dark"] .vm-map-controls .map_color_picker {
    background-color: var(--vm-bg-tertiary);
    box-shadow: inset 0.5px 0.5px 2px 0 rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .kind_radio_container label {
    color: var(--vm-text-primary);
}

[data-theme="dark"] .kind_radio_container label:hover {
    background-color: var(--vm-bg-secondary);
}

[data-theme="dark"] #timestamp {
    color: var(--vm-text-muted);
}

/* VWF Homepage forecast widget - dark mode */
[data-theme="dark"] .vwfh-day-card {
    background: var(--vm-card-bg);
}

[data-theme="dark"] .vwfh-day-date-main {
    color: var(--vm-text-primary);
}

[data-theme="dark"] .vwfh-day-sublabel {
    color: var(--vm-text-muted);
}

[data-theme="dark"] .vwfh-weather-description {
    color: var(--vm-text-secondary);
    border-color: var(--vm-border-color);
}

[data-theme="dark"] .vwfh-date-label {
    background: var(--vm-card-bg);
    color: var(--vm-text-primary);
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .vwfh-wind-card {
    background: rgba(22, 160, 133, 0.15);
    border-color: rgba(22, 160, 133, 0.3);
}

[data-theme="dark"] .vwfh-wind-text {
    color: var(--vm-text-secondary);
}

[data-theme="dark"] .vwfh-custom-marker {
    background: var(--vm-card-bg);
    border-color: #60a5fa;
}

/* CTA kartice */
[data-theme="dark"] .vm-cta-card {
    background: var(--vm-card-bg);
    border-color: var(--vm-border-color);
    color: var(--vm-text-primary);
}

[data-theme="dark"] .vm-cta-card:hover {
    border-color: #60a5fa;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .vm-cta-card-desc {
    color: var(--vm-text-muted);
}

/* Query loop postovi */
[data-theme="dark"] .vm-posts-section .vm-query-loop .wp-block-post {
    background: var(--vm-card-bg);
    border-color: #3b82f6;
}

[data-theme="dark"] .vm-posts-section .vm-query-loop .wp-block-post-title a {
    color: var(--vm-text-primary);
}

[data-theme="dark"] .vm-posts-section .vm-query-loop .wp-block-post-title a:hover {
    color: #60a5fa;
}

[data-theme="dark"] .vm-posts-section .vm-query-loop .wp-block-post-date {
    color: #60a5fa;
}

[data-theme="dark"] .vm-posts-section .vm-query-loop .wp-block-post-excerpt {
    color: var(--vm-text-secondary);
}

[data-theme="dark"] .vm-posts-section .vm-query-loop .wp-block-post-excerpt__more-link {
    color: #60a5fa;
}

[data-theme="dark"] .vm-posts-section .vm-query-loop .wp-block-query-pagination-numbers .page-numbers {
    background: var(--vm-bg-tertiary);
    color: var(--vm-text-secondary);
    border-color: var(--vm-border-color);
}

[data-theme="dark"] .vm-section-title {
    color: var(--vm-text-primary);
}

[data-theme="dark"] .vm-section-divider-text {
    color: #60a5fa;
}

[data-theme="dark"] .vm-section-divider::after {
    background: linear-gradient(135deg, #3b82f6 0%, #818cf8 100%);
}

/* ==========================================================================
   HOMEPAGE - RESPONSIVE
   v1.0
   ========================================================================== */

@media (max-width: 768px) {
    #mapid { height: 450px; }

    .vm-cta-card { padding: 12px 16px; }
    .vm-cta-card-icon { width: 40px; height: 40px; border-radius: 10px; }
    .vm-cta-card-icon svg { width: 20px; height: 20px; }

    .vm-posts-section .vm-query-loop .wp-block-post { margin-bottom: 20px; }
    .vm-posts-section .vm-query-loop .wp-block-post-title { font-size: 1.2rem; padding: 12px 16px 6px; }
    .vm-posts-section .vm-query-loop .wp-block-post-date { padding: 0 16px; font-size: 0.8rem; }
    .vm-posts-section .vm-query-loop .wp-block-post-excerpt { padding: 0 16px 16px; font-size: 0.9rem; }
    .vm-section-title { margin-bottom: 16px; }

    /* VWF Homepage responsive */
    .vwfh-widget { padding: 14px 10px; }
    .vwfh-weather-map { height: 200px; }
    .vwfh-custom-marker { width: 34px; height: 34px; }
    .vwfh-custom-marker .wi { font-size: 16px; }
    .vwfh-weather-description { font-size: 0.82rem; padding: 10px 12px; }
    .vwfh-temp-value { font-size: 1rem; }
}

@media (max-width: 400px) {
    .vwfh-temp-value { font-size: 0.9rem; }
    .vwfh-weather-map { height: 180px; margin: 0 6px; }
}

/* ==========================================================================
   LOKACIJE GRID - v2.0
   Region nav + collapse/expand + moderniji search
   ========================================================================== */

.vm-lokacije-wrap {
    max-width: 1200px;
    margin: 0 auto;
}

/* Search - moderniji dizajn */
.vm-lokacije-search {
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.vm-lokacije-search-inner {
    position: relative;
    flex: 1;
    min-width: 280px;
    z-index: 1;
}

.vm-lokacije-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--vm-text-muted, #64748b);
    pointer-events: none;
    z-index: 2;
}

/* !important needed: Blocksy main.min.css input:is([type="text"]) has higher specificity */
.vm-lokacije-search-input {
    width: 100%;
    padding: 12px 44px 12px 46px !important;
    border: 1.5px solid var(--vm-border-color, #cbd5e1) !important;
    border-radius: 50px !important;
    background: var(--vm-bg-secondary, #f1f5f9) !important;
    color: var(--vm-text-primary, #0f172a) !important;
    font-size: 0.95rem !important;
    font-family: inherit;
    line-height: normal !important;
    height: auto !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box;
}

.vm-lokacije-search-input:focus {
    border-color: #3b82f6 !important;
    background: var(--vm-card-bg, #ffffff) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

.vm-lokacije-search-input::placeholder {
    color: var(--vm-text-muted, #64748b);
    opacity: 0.8;
}

.vm-lokacije-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--vm-bg-tertiary, #e2e8f0);
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-size: 16px;
    line-height: 1;
    color: var(--vm-text-muted, #64748b);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease;
    z-index: 2;
}

.vm-lokacije-search-clear:hover {
    background: var(--vm-text-muted, #64748b);
    color: #ffffff;
}

.vm-lokacije-count {
    font-size: 0.9rem;
    color: var(--vm-text-muted, #64748b);
    white-space: nowrap;
}

.vm-lokacije-count span {
    font-weight: 700;
    color: var(--vm-text-primary, #0f172a);
}

/* Region navigacija - pill/chip linkovi */
.vm-lokacije-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1.5px solid var(--vm-border-color, #cbd5e1);
}

.vm-lokacije-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--vm-bg-secondary, #f1f5f9);
    border: 1.5px solid var(--vm-border-color, #cbd5e1);
    border-radius: 50px;
    color: var(--vm-text-primary, #0f172a) !important;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
}

.vm-lokacije-nav-item:hover {
    background: var(--vm-gradient-primary, linear-gradient(135deg, #3b82f6 0%, #6366f1 100%));
    border-color: transparent;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.vm-lokacije-nav-item:hover .vm-lokacije-nav-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.vm-lokacije-nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: var(--vm-bg-tertiary, #e2e8f0);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--vm-text-muted, #64748b);
    transition: all 0.2s ease;
}

/* No results */
.vm-lokacije-no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--vm-text-muted, #64748b);
    font-size: 1.1rem;
}

/* Region sections */
.vm-lokacije-region {
    margin-bottom: 2rem;
    scroll-margin-top: 80px;
}

.vm-lokacije-region-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--vm-text-primary, #0f172a);
    margin: 0 0 1rem 0;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--vm-border-color, #cbd5e1);
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.vm-lokacije-region-count {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--vm-text-muted, #64748b);
}

/* Card grid */
.vm-lokacije-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.vm-lokacije-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: var(--vm-card-bg, #ffffff);
    border: 1.5px solid var(--vm-border-color, #cbd5e1);
    border-radius: var(--vm-radius-small, 8px);
    color: var(--vm-text-primary, #0f172a) !important;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none !important;
    text-align: center;
    transition: all 0.2s ease;
    min-height: 44px;
}

.vm-lokacije-card:hover {
    border-color: #3b82f6;
    color: #3b82f6 !important;
    background: var(--vm-bg-secondary, #f1f5f9);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Istaknuti gradovi */
.vm-lokacije-featured {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 1.5rem;
    padding: 20px;
    background: var(--vm-bg-secondary, #f1f5f9);
    border-radius: var(--vm-radius, 12px);
    border: 1.5px solid var(--vm-border-color, #cbd5e1);
}

.vm-featured-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.vm-featured-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 150px;
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--vm-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 6px;
}

.vm-featured-label-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.vm-featured-label-icon svg {
    width: 100%;
    height: 100%;
}

.vm-featured-cities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vm-featured-city {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--vm-card-bg, #ffffff);
    border: 1.5px solid var(--vm-border-color, #cbd5e1);
    border-radius: 50px;
    color: var(--vm-text-primary, #0f172a) !important;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.vm-featured-city:hover {
    background: var(--vm-gradient-primary, linear-gradient(135deg, #3b82f6 0%, #6366f1 100%));
    border-color: transparent;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

/* Responsive */
@media (max-width: 1024px) {
    .vm-lokacije-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .vm-lokacije-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .vm-lokacije-card {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
    .vm-lokacije-search-inner {
        min-width: 100%;
    }
    .vm-lokacije-region-title {
        font-size: 1.1rem;
    }
    .vm-lokacije-nav {
        gap: 6px;
    }
    .vm-lokacije-nav-item {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    .vm-lokacije-nav-count {
        min-width: 20px;
        height: 20px;
        font-size: 0.7rem;
    }
    .vm-lokacije-featured {
        padding: 14px;
        gap: 12px;
    }
    .vm-featured-group {
        flex-direction: column;
        gap: 8px;
    }
    .vm-featured-label {
        min-width: unset;
        padding-top: 0;
    }
    .vm-featured-cities {
        gap: 6px;
    }
    .vm-featured-city {
        padding: 5px 12px;
        font-size: 0.8rem;
    }
}

@media (max-width: 380px) {
    .vm-lokacije-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .vm-lokacije-card {
        padding: 10px 8px;
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   LOKACIJE GRID - DARK MODE
   ========================================================================== */

[data-theme="dark"] .vm-lokacije-search-input {
    background: var(--vm-bg-secondary) !important;
    border-color: var(--vm-border-color) !important;
    color: var(--vm-text-primary) !important;
}

[data-theme="dark"] .vm-lokacije-search-input:focus {
    background: var(--vm-card-bg) !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
}

[data-theme="dark"] .vm-lokacije-search-clear {
    background: var(--vm-bg-tertiary);
    color: var(--vm-text-muted);
}

[data-theme="dark"] .vm-lokacije-search-clear:hover {
    background: var(--vm-text-muted);
    color: #ffffff;
}

[data-theme="dark"] .vm-lokacije-count span {
    color: var(--vm-text-primary);
}

[data-theme="dark"] .vm-lokacije-nav {
    border-bottom-color: var(--vm-border-color);
}

[data-theme="dark"] .vm-lokacije-nav-item {
    background: var(--vm-bg-secondary);
    border-color: var(--vm-border-color);
    color: var(--vm-text-primary) !important;
}

[data-theme="dark"] .vm-lokacije-nav-item:hover {
    color: #ffffff !important;
    border-color: transparent;
}

[data-theme="dark"] .vm-lokacije-nav-count {
    background: var(--vm-bg-tertiary);
    color: var(--vm-text-muted);
}

[data-theme="dark"] .vm-lokacije-region-title {
    color: var(--vm-text-primary);
    border-bottom-color: var(--vm-border-color);
}

[data-theme="dark"] .vm-lokacije-card {
    background: var(--vm-card-bg);
    border-color: var(--vm-border-color);
    color: var(--vm-text-primary) !important;
}

[data-theme="dark"] .vm-lokacije-card:hover {
    border-color: #60a5fa;
    color: #60a5fa !important;
    background: var(--vm-bg-secondary);
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.15);
}

[data-theme="dark"] .vm-lokacije-featured {
    background: var(--vm-bg-secondary);
    border-color: var(--vm-border-color);
}

[data-theme="dark"] .vm-featured-city {
    background: var(--vm-bg-tertiary);
    border-color: var(--vm-border-color);
    color: var(--vm-text-primary) !important;
}

[data-theme="dark"] .vm-featured-city:hover {
    color: #ffffff !important;
    border-color: transparent;
}