/**
 * 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 - UKLONJEN (CWV sesija, 12.06.2026)
   In-page Auto Ads ugaseni u panelu, manuelne <ins> jedinice obrisane
   iz teme. Ostaju samo anchor + vignette (fixed overlay - ne prave CLS,
   ne trebaju im rezervacije). Google sam stilizuje anchor elemente.
   ======================================================================== */

/* ========================================================================
   CUSTOM HEADER v1.0 — Potpuno custom, zamenjuje Blocksy header
   Glassmorphism, kompaktan layout, nova.rs mobile panel.
   ======================================================================== */

/* --- Z-Index hierarchy --- */
#header, .vm-header {
    position: sticky;
    top: 0;
    z-index: 10000;
}
header.entry-header, .entry-header {
    z-index: auto !important;
}

/* --- Header Base (Glassmorphism) --- */
.vm-header { background: rgba(255,255,255,0.88); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-bottom: 2px solid rgba(203,213,225,0.5); box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04); }
.vm-header__container { max-width: 1290px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; }

/* --- Top Bar --- */
.vm-header__topbar { background: rgba(241,245,249,0.7); border-bottom: 2px solid rgba(203,213,225,0.5); }
.vm-header__topbar .vm-header__container { justify-content: space-between; min-height: 36px; font-size: 0.78rem; }
.vm-header__topnav-list { display: flex; list-style: none; margin: 0; padding: 0; gap: 0; align-items: center; }
.vm-header__topnav-list li { display: flex; align-items: center; }
.vm-header__topnav-list li + li::before { content: '·'; color: var(--vm-border-color, #cbd5e1); padding: 0 0.65rem; font-size: 1rem; font-weight: 700; }
.vm-header__topnav-list li a,
.vm-header__topnav-list li button { display: flex; align-items: center; gap: 0.3rem; color: var(--vm-text-secondary, #475569); text-decoration: none; transition: all 0.2s; padding: 0.2rem 0.35rem; border-radius: 4px; background: none; border: none; cursor: pointer; font-size: 0.78rem; font-family: inherit; }
.vm-header__topnav-list li a:hover,
.vm-header__topnav-list li button:hover { color: #2563eb; background: rgba(37,99,235,0.05); }
.vm-header__topnav-list .vm-header__icon { width: 13px; height: 13px; color: inherit; opacity: 0.7; }
.vm-header__topnav-list li a:hover .vm-header__icon,
.vm-header__topnav-list li button:hover .vm-header__icon { opacity: 1; }
.vm-header__darkmode { display: flex; align-items: center; gap: 0.35rem; background: none; border: none; cursor: pointer; color: var(--vm-text-secondary, #475569); font-size: 0.78rem; font-weight: 500; padding: 0.25rem 0.5rem; border-radius: 6px; transition: all 0.2s; }
.vm-header__darkmode:hover { background: rgba(37,99,235,0.06); color: #2563eb; }
.vm-header__darkmode-text { font-size: 0.75rem; letter-spacing: 0.02em; }
.vm-header__topbar-right { display: flex; align-items: center; gap: 1rem; }
.vm-header__donate-btn { display: inline-flex; align-items: center; gap: 0.35rem; background: linear-gradient(135deg, #2563eb, #4f46e5); color: #fff !important; padding: 0.3rem 0.9rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; transition: all 0.25s; box-shadow: 0 2px 8px rgba(37,99,235,0.25); }
.vm-header__donate-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37,99,235,0.35); }
.vm-header__socials { display: flex; align-items: center; gap: 0.5rem; }
.vm-header__socials a { color: var(--vm-text-muted, #64748b); transition: color 0.2s; display: flex; }
.vm-header__socials a:hover { color: #2563eb; }
.vm-header__search-trigger { background: none; border: 1px solid var(--vm-border-color, #e2e8f0); cursor: pointer; color: var(--vm-text-muted, #64748b); padding: 0.3rem 0.75rem; border-radius: 20px; display: flex; align-items: center; gap: 0.4rem; transition: all 0.2s; }
.vm-header__search-trigger:hover { color: #2563eb; background: rgba(37,99,235,0.06); border-color: #93c5fd; }
.vm-header__search-label { font-size: 0.72rem; font-weight: 500; white-space: nowrap; }
@media (max-width: 768px) { .vm-header__search-label { display: none; } }

/* --- Main Nav Row --- */
.vm-header__main .vm-header__container { min-height: 80px; gap: 1.5rem; }
.vm-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.vm-header__logo img { display: block; height: 120px; width: auto; max-height: 120px; object-fit: contain; }
.vm-header__nav { flex: 1; display: flex; justify-content: center; }
.vm-header__nav-list { display: flex; list-style: none; margin: 0; padding: 0; gap: 0; align-items: center; }
.vm-header__nav-list > li { position: relative; }
.vm-header__nav-list > li > a { display: flex; align-items: center; gap: 0.35rem; padding: 0.6rem 0.75rem; color: var(--vm-text-primary, #0f172a); font-size: 1.06rem; font-weight: 600; text-transform: uppercase; text-decoration: none; letter-spacing: 0.02em; position: relative; transition: color 0.2s; white-space: nowrap; }

/* --- Nav Icons --- */
.vm-header__icon { width: 18px; height: 18px; flex-shrink: 0; color: #2563eb; }

/* --- Chevron --- */
.vm-header__chevron { color: #64748b; transition: transform 0.2s, color 0.2s; flex-shrink: 0; }
.vm-dropdown-open > a .vm-header__chevron { transform: rotate(180deg); color: #2563eb; }

/* --- Nav Hover Underline --- */
.vm-header__nav-list > li > a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: #2563eb; border-radius: 1px; transition: width 0.3s ease, left 0.3s ease; }
.vm-header__nav-list > li > a:hover::after { width: 60%; left: 20%; }
.vm-header__nav-list > li.current-menu-item > a::after,
.vm-header__nav-list > li.current-menu-ancestor > a::after { width: 60%; left: 20%; }
.vm-header__nav-list > li > a:hover { color: #2563eb; }
.vm-header__nav-list > li > a:hover .vm-header__icon { color: #1d4ed8; }

/* --- NOVO! Badge --- */
.vm-header__badge { display: inline-flex; align-items: center; padding: 0.1rem 0.45rem; border-radius: 4px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; background: linear-gradient(135deg, #22c55e, #16a34a); animation: vm-novo-pulse 3s ease-in-out infinite; margin-left: 0.25rem; line-height: 1.4; }
@keyframes vm-novo-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); } 50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } }

/* --- Link text --- */
.vm-header__link-text { display: inline; }

/* --- Dropdown Menus --- */
.vm-header__dropdown { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 240px; list-style: none; margin: 0; padding: 0.5rem 0; background: rgba(255,255,255,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.1), 0 2px 10px rgba(0,0,0,0.05); border: 1px solid rgba(203,213,225,0.4); z-index: 9999; }
.vm-dropdown-open > .vm-header__dropdown { display: block; }
.vm-header__dropdown li { margin: 0; }
.vm-header__dropdown li a { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; color: var(--vm-text-primary, #0f172a); font-size: 0.935rem; font-weight: 400; text-decoration: none; transition: all 0.15s; text-transform: none; letter-spacing: 0; }
.vm-header__dropdown li a:hover { background: rgba(37,99,235,0.05); padding-left: 1.25rem; color: #2563eb; }
.vm-header__dropdown li a .vm-header__icon { width: 16px; height: 16px; color: #2563eb; }

/* --- Mega Menu (PROGNOZA) --- */
.vm-header__mega-parent > .vm-header__dropdown { min-width: 580px; display: none; padding: 1rem; left: 0; transform: none; }
.vm-dropdown-open.vm-header__mega-parent > .vm-header__dropdown { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.vm-header__mega-parent .vm-header__dropdown .vm-header__dropdown,
.vm-header__mega-parent .vm-header__dropdown .sub-menu { display: block !important; position: static; min-width: 0; background: transparent; backdrop-filter: none; box-shadow: none; border: none; border-radius: 0; padding: 0; transform: none; list-style: none; margin: 0; }
/* Mega-menu headings — non-clickable with dashed separator */
.vm-header__mega-heading > a,
.vm-header__mega-heading > span { display: block; font-weight: 700 !important; font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.05em; color: var(--vm-text-muted, #64748b) !important; padding: 0.5rem 1rem 0.4rem; pointer-events: none; cursor: default; border-bottom: 1px dashed var(--vm-border-color, #cbd5e1); margin-bottom: 0.25rem; }
.vm-header__mega-heading > a:hover { background: transparent !important; padding-left: 1rem !important; }
.vm-header__mega-parent .vm-header__dropdown .sub-menu { display: block !important; position: static; min-width: 0; background: transparent; backdrop-filter: none; box-shadow: none; border: none; border-radius: 0; padding: 0; transform: none; list-style: none; margin: 0; }
.vm-header__dropdown .vm-mega-heading > a { font-weight: 700 !important; font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.05em; color: var(--vm-text-muted, #64748b) !important; pointer-events: none; padding: 0.4rem 1rem 0.2rem; }
.vm-header__dropdown .vm-mega-heading > a:hover { background: transparent; padding-left: 1rem; }

/* --- Hamburger (mobile) --- */
.vm-header__hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.5rem; width: 40px; height: 40px; }
.vm-header__hamburger span { display: block; width: 22px; height: 2px; background: var(--vm-text-primary, #0f172a); border-radius: 2px; transition: all 0.3s; }
.vm-header__hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.vm-header__hamburger.active span:nth-child(2) { opacity: 0; }
.vm-header__hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* --- Mobile Panel (full-screen overlay) --- */
.vm-header__mobile-panel { position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; height: 100dvh; bottom: 0; background: var(--vm-bg-primary, #fff); z-index: 99999; transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; }
.vm-header__mobile-panel.active { right: 0; }
.vm-header__mobile-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--vm-border-color, #cbd5e1); flex-shrink: 0; }
.vm-header__mobile-logo img { height: 50px; width: auto; display: block; }
.vm-header__mobile-close { background: none; border: none; cursor: pointer; color: var(--vm-text-primary, #0f172a); padding: 0.5rem; border-radius: 8px; display: flex; }
.vm-header__mobile-close:hover { background: var(--vm-bg-secondary, #f1f5f9); }
.vm-header__mobile-nav { flex: 1; padding: 0.5rem 0; }
.vm-header__mobile-list { list-style: none; margin: 0; padding: 0; }
/* Sesija 62 — uklonjeni border-bottom + svi border-ovi sa li/a elemenata u mobilnom slide-in meniju.
   Sesija 63 — vraćamo dashed plavi separator na TOP-LEVEL stavke (direct children > li), debljina 1.25px,
   alpha 0.20. Nested LI (sub-stavke iz screen1) zadrzavaju svoj separator iz JS-a. */
.vm-header__mobile-list li { border: none; }
/* Sesija 63 v2 — 2px dashed (subpixel-safe, dashed pattern jasno vidljiv na Brave/Chrome/Safari).
   Alpha 0.30 umesto 0.20 → plava boja jasno vidljiva. 1.25px je round-uje na 1px solid u
   nekim engine-ima (Brave Android) gde dashed izgleda kao solid. */
.vm-header__mobile-list > li:not(:last-child) {
    border-bottom: 2px dashed rgba(59, 130, 246, 0.30);
}
.vm-header__mobile-list li a { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.25rem; color: var(--vm-text-primary, #0f172a); font-size: 0.95rem; font-weight: 500; text-decoration: none; border: none; }
.vm-header__mobile-list li a:hover { background: var(--vm-bg-secondary, #f1f5f9); }
[data-theme="dark"] .vm-header__mobile-list li a:hover { background: rgba(96,165,250,0.08); }
[data-theme="dark"] .vm-header__mobile-list > li:not(:last-child) {
    border-bottom-color: rgba(96, 165, 250, 0.35);
}

/* Sesija 62 — slide-in section headers ("PROGNOZA", "AKTUELNO VREME", "VESTI") */
.vm-slide-section-heading {
    padding: 0.95rem 1.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #2563eb;
    border-left: 3px solid #3b82f6;
    border-bottom: 1px solid rgba(59, 130, 246, 0.12);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.07) 0%, rgba(16, 185, 129, 0.05) 100%);
}
[data-theme="dark"] .vm-slide-section-heading {
    color: #93c5fd;
    border-left-color: #60a5fa;
    border-bottom-color: rgba(96, 165, 250, 0.18);
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.10) 0%, rgba(16, 185, 129, 0.06) 100%);
}

/* Sesija 62 — mega-headings unutar slide-a ("METEOGRAMI – PROGNOZA PO LOKACIJI")
   Sesija 63 v2 — 2px dashed (subpixel-safe), alpha 0.32 za jasno plavu boju. */
.vm-slide-mega-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #2563eb;
    background: rgba(59, 130, 246, 0.04);
    border-bottom: 2px dashed rgba(59, 130, 246, 0.32);
}
[data-theme="dark"] .vm-slide-mega-heading {
    color: #93c5fd;
    background: rgba(96, 165, 250, 0.06);
    border-bottom-color: rgba(96, 165, 250, 0.38);
}

/* Sesija 63 v2 — sub-stavke u screen1 (lista gradova, podsekcije) dobijaju suptilan plavi bg.
   Koristi .vm-slide-screen--sub klasu (definisana u vm-header.js:87) za pouzdan target.
   Razlikuje sub-meni od top-level menija + nije previse napadno (alpha 0.04 light, 0.06 dark). */
.vm-slide-screen--sub a {
    background: rgba(59, 130, 246, 0.04);
}
.vm-slide-screen--sub a:hover {
    background: rgba(59, 130, 246, 0.10) !important;
}
[data-theme="dark"] .vm-slide-screen--sub a {
    background: rgba(96, 165, 250, 0.06);
}
[data-theme="dark"] .vm-slide-screen--sub a:hover {
    background: rgba(96, 165, 250, 0.14) !important;
}

/* Sesija 62 — iOS PWA install instrukcija toast (longer, multiline) */
.vm-push-toast--ios {
    bottom: 80px !important;
    max-width: 92% !important;
    padding: 14px 18px !important;
    line-height: 1.5 !important;
    text-align: left !important;
    border-radius: 14px !important;
    align-items: flex-start !important;
}
.vm-push-toast--ios .vm-push-toast__icon { margin-top: 2px; }
.vm-push-toast--ios .vm-push-toast__msg { font-size: 0.86rem; }
.vm-push-toast--ios .vm-push-toast__msg strong { color: #2563eb; }
[data-theme="dark"] .vm-push-toast--ios .vm-push-toast__msg strong { color: #93c5fd; }
.vm-header__mobile-list li a .vm-header__icon { width: 20px; height: 20px; color: #2563eb; }
.vm-header__mobile-list li a .vm-header__chevron { display: none; }
/* Mobile accordion — pozicioniranje (JS kontroliše otvaranje/zatvaranje) */
.vm-header__mobile-list .menu-item-has-children { position: relative; }
.vm-header__mobile-list .menu-item-has-children > a { padding-right: 3rem; }
.vm-header__mobile-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; position: absolute; right: 0; top: 0; background: none; border: none; cursor: pointer; color: var(--vm-text-muted, #64748b); border-radius: 8px; transition: background 0.2s; z-index: 2; }
.vm-header__mobile-toggle:hover { background: var(--vm-bg-secondary, #f1f5f9); }
.vm-header__mobile-toggle svg { transition: transform 0.3s ease; }
.vm-header__mobile-list .sub-menu li a,
.vm-header__mobile-list .vm-header__dropdown li a { padding-left: 2.5rem; font-size: 0.88rem; font-weight: 400; }
.vm-header__mobile-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--vm-border-color, #cbd5e1); display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; margin-top: auto; }

/* Footer info linkovi (O nama, Kontakt) */
.vm-mobile-footer-links { display: flex; gap: 10px; }
.vm-mobile-footer-links a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
    background: var(--vm-bg-secondary, #f1f5f9); color: var(--vm-text-primary, #0f172a) !important;
    text-decoration: none !important; border-bottom: none !important; transition: background 0.2s;
}
.vm-mobile-footer-links a:hover { background: var(--vm-bg-tertiary, #e2e8f0); }
.vm-mobile-footer-links a svg { stroke: #3b82f6; flex-shrink: 0; }
[data-theme="dark"] .vm-mobile-footer-links a svg { stroke: #60a5fa; }

/* Dark mode toggle dugme */
.vm-header__mobile-darkmode {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: var(--vm-bg-secondary, #f1f5f9); border: none; cursor: pointer;
    padding: 10px 16px; border-radius: 8px;
    color: var(--vm-text-primary, #0f172a); font-size: 0.9rem; font-weight: 500;
}
.vm-header__mobile-darkmode:hover { background: var(--vm-bg-tertiary, #e2e8f0); }
.vm-mobile-dark-sun { display: block; color: #f59e0b; }
.vm-mobile-dark-moon { display: none; color: #818cf8; }
[data-theme="dark"] .vm-mobile-dark-sun { display: none !important; }
[data-theme="dark"] .vm-mobile-dark-moon { display: block !important; }

/* Social linkovi — kružni */
.vm-mobile-footer-socials { display: flex; justify-content: center; gap: 12px; padding-top: 4px; }
.vm-mobile-footer-socials a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--vm-bg-secondary, #f1f5f9);
    color: var(--vm-text-muted, #64748b) !important;
    text-decoration: none !important; border-bottom: none !important;
    transition: background 0.2s, transform 0.2s;
}
.vm-mobile-footer-socials a:hover { background: #3b82f6; color: #fff !important; transform: scale(1.1); }
.vm-mobile-footer-socials a svg { width: 18px; height: 18px; fill: currentColor; }
[data-theme="dark"] .vm-mobile-footer-socials a:hover { background: #60a5fa; }

/* --- Dark Mode Header --- */
[data-theme="dark"] .vm-header { background: rgba(15,23,42,0.95); border-bottom-color: rgba(51,65,85,0.6); box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.15); }
[data-theme="dark"] .vm-header__topbar { background: rgba(30,41,59,0.7); border-bottom-color: rgba(51,65,85,0.5); }
[data-theme="dark"] .vm-header__topnav-list li a,
[data-theme="dark"] .vm-header__topnav-list li button { color: #94a3b8; }
[data-theme="dark"] .vm-header__topnav-list li a:hover,
[data-theme="dark"] .vm-header__topnav-list li button:hover { color: #60a5fa; background: rgba(96,165,250,0.08); }
[data-theme="dark"] .vm-header__topnav-list li + li::before { color: #475569; }
[data-theme="dark"] .vm-header__darkmode { color: #94a3b8; }
[data-theme="dark"] .vm-header__darkmode:hover { color: #60a5fa; background: rgba(96,165,250,0.1); }
[data-theme="dark"] .vm-header__socials a { color: #64748b; }
[data-theme="dark"] .vm-header__socials a:hover { color: #60a5fa; }
[data-theme="dark"] .vm-header__search-trigger { color: #64748b; }
[data-theme="dark"] .vm-header__search-trigger:hover { color: #60a5fa; background: rgba(96,165,250,0.1); }
[data-theme="dark"] .vm-header__logo img { filter: brightness(1.6); }
[data-theme="dark"] .vm-header__nav-list > li > a { color: #e2e8f0; }
[data-theme="dark"] .vm-header__nav-list > li > a:hover { color: #60a5fa; }
[data-theme="dark"] .vm-header__nav-list > li > a::after { background: #60a5fa; }
[data-theme="dark"] .vm-header__nav-list > li > a:hover .vm-header__icon { color: #93c5fd; }
[data-theme="dark"] .vm-header__icon { color: #60a5fa; }
[data-theme="dark"] .vm-header__chevron { color: #94a3b8; }
[data-theme="dark"] .vm-dropdown-open > a .vm-header__chevron { color: #60a5fa; }
[data-theme="dark"] .vm-header__dropdown { background: rgba(30,41,59,0.96); border-color: rgba(51,65,85,0.5); box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
[data-theme="dark"] .vm-header__dropdown li a { color: #e2e8f0; }
[data-theme="dark"] .vm-header__dropdown li a:hover { background: rgba(96,165,250,0.1); color: #60a5fa; }
[data-theme="dark"] .vm-header__dropdown li a .vm-header__icon { color: #60a5fa; }
[data-theme="dark"] .vm-header__hamburger span { background: #e2e8f0; }
[data-theme="dark"] .vm-header__mobile-panel { background: var(--vm-bg-primary, #0f172a); }
[data-theme="dark"] .vm-header__mobile-close { color: #e2e8f0; }
[data-theme="dark"] .vm-header__mobile-list li a { color: #e2e8f0; }
[data-theme="dark"] .vm-header__mobile-toggle { color: #94a3b8; }
[data-theme="dark"] .vm-header__mobile-toggle:hover { background: rgba(51,65,85,0.5); }

/* --- Mobile quick links (visible only on mobile) --- */
.vm-header__mobile-quick { display: none; }
.vm-header__hamburger-wrap { display: none; flex-direction: column; align-items: center; gap: 2px; }
.vm-header__hamburger-label { font-size: 0.55rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--vm-text-muted, #64748b); }

/* --- Responsive (mobile) --- */
@media (max-width: 999px) {
    .vm-header { position: relative !important; }
    .vm-header__topbar { display: none; }
    .vm-header__nav { display: none; }
    .vm-header__hamburger-wrap { display: flex; }
    .vm-header__hamburger { display: flex; }
    .vm-header__main .vm-header__container { min-height: 56px; justify-content: space-between; }
    .vm-header__logo img { height: 67px; max-height: 67px; }
    .vm-header__mobile-quick { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; margin-right: 0.75rem; }
    .vm-header__mobile-quick a,
    .vm-header__mobile-quick button.vm-header__mobile-quick-btn { display: flex; align-items: center; gap: 0.25rem; padding: 0.3rem 0.6rem; font-size: 0.72rem; font-weight: 600; color: #2563eb; background: rgba(37,99,235,0.06); border-radius: 6px; text-decoration: none; white-space: nowrap; border: 1px solid rgba(37,99,235,0.15); cursor: pointer; font-family: inherit; line-height: 1; }
    .vm-header__mobile-quick a:hover,
    .vm-header__mobile-quick button.vm-header__mobile-quick-btn:hover { background: rgba(37,99,235,0.12); }
    .vm-header__mobile-quick svg { width: 14px; height: 14px; }
    [data-theme="dark"] .vm-header__mobile-quick a,
    [data-theme="dark"] .vm-header__mobile-quick button.vm-header__mobile-quick-btn { color: #60a5fa; background: rgba(96,165,250,0.1); border-color: rgba(96,165,250,0.2); }
    [data-theme="dark"] .vm-header__hamburger-label { color: #94a3b8; }

    /* Sesija 62 — VP cross-promo chip (gradient plava→plava→zelena, override za default blue outline) */
    .vm-header__mobile-quick a.vm-header__mobile-quick-link--vp { color: #ffffff !important; background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #10b981 100%); border: none; padding: 0.32rem 0.7rem; box-shadow: 0 1px 3px rgba(16,185,129,0.25); transition: transform 0.15s ease, box-shadow 0.15s ease; }
    .vm-header__mobile-quick a.vm-header__mobile-quick-link--vp:hover { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #10b981 100%); color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(16,185,129,0.35); }
    [data-theme="dark"] .vm-header__mobile-quick a.vm-header__mobile-quick-link--vp { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #059669 100%); box-shadow: 0 1px 3px rgba(5,150,105,0.4); color: #ffffff !important; }

    /* Sesija 62 — sakrij push FAB na mobilnom (header chip "Najave" ga zamenjuje) */
    .vm-push-fab { display: none !important; }
}

/* Sesija 62 — sakrij narandžasti VP FAB na mobilnom (header chip "vremeprognoza.rs" ga zamenjuje) */
@media (max-width: 768px) {
    .vm-vp-fab { display: none !important; }
}

/* Sesija 63 — VP chip text swap (full → "VP.rs") na malim Android ekranima.
   Razlog: Samsung A55 i sl. (~412 CSS px viewport) overflow-uje sa punim "vremeprognoza.rs" tekstom +
   hamburger sa "SADRŽAJ" label-om. Na ≤430px chip postaje samo SVG + "VP.rs" — ~50px wide umesto ~175px. */
.vm-vp-text-short { display: none; }
@media (max-width: 430px) {
    .vm-header__mobile-quick a.vm-header__mobile-quick-link--vp { padding: 0.32rem 0.55rem; }
    .vm-vp-text-full { display: none; }
    .vm-vp-text-short { display: inline; }
}
@media (min-width: 1000px) {
    .vm-header__mobile-panel { display: none !important; }
    .vm-header__hamburger { display: none !important; }
}

/* OLD BLOCKSY HEADER CSS REMOVED — see bckp/header-css-v2.0.bak */

/* --- Search Overlay (lokacije stil) --- */
/* --- Search Overlay (white card with dual inputs) --- */
.vm-header__search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); z-index: 999999; display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.vm-header__search-overlay.active { display: flex; }
.vm-header__search-card { background: var(--vm-card-bg, #fff); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); width: 92%; max-width: 560px; padding: 1.5rem; position: relative; animation: vmSearchSlideIn 0.2s ease-out; }
@keyframes vmSearchSlideIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
.vm-header__search-close { position: absolute; top: 0.6rem; right: 0.6rem; background: var(--vm-bg-secondary, #f1f5f9); border: 1px solid var(--vm-border-color, #cbd5e1); cursor: pointer; color: var(--vm-text-muted, #64748b); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; transition: all 0.15s; }
.vm-header__search-close:hover { background: var(--vm-bg-tertiary, #e2e8f0); color: var(--vm-text-primary); }
/* Shared input styles */
.vm-header__search-form, .vm-header__search-loc-wrap { position: relative; margin-bottom: 0.75rem; }
.vm-header__search-loc-wrap { margin-bottom: 0; }
.vm-header__search-form-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--vm-text-muted, #64748b); pointer-events: none; z-index: 1; }
.vm-header__search-site-input, .vm-header__search-loc-input { width: 100%; border: 1.5px solid var(--vm-border-color, #cbd5e1); border-radius: 10px; padding: 12px 16px 12px 44px !important; font-size: 0.9rem; background: var(--vm-bg-secondary, #f1f5f9); color: var(--vm-text-primary, #0f172a); outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; }
.vm-header__search-site-input:focus, .vm-header__search-loc-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.12); background: var(--vm-card-bg, #fff); }
.vm-header__search-site-input::placeholder, .vm-header__search-loc-input::placeholder { color: var(--vm-text-muted, #94a3b8); }
/* Location autocomplete results */
.vm-header__search-loc-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--vm-card-bg, #fff); border: 1px solid var(--vm-border-color, #cbd5e1); border-radius: 10px; margin-top: 4px; max-height: 240px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 10; }
.vm-header__search-loc-results:empty { display: none; }
.vm-header__search-loc-item { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--vm-text-primary, #0f172a); text-decoration: none; font-size: 0.88rem; transition: background 0.1s; }
.vm-header__search-loc-item:hover { background: var(--vm-bg-secondary, #f1f5f9); }
.vm-header__search-loc-item svg { flex-shrink: 0; color: #3b82f6; }
.vm-header__search-loc-empty { padding: 12px 14px; color: var(--vm-text-muted); font-size: 0.85rem; text-align: center; }
/* Dark mode */
[data-theme="dark"] .vm-header__search-card { background: var(--vm-bg-secondary, #1e293b); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
[data-theme="dark"] .vm-header__search-site-input, [data-theme="dark"] .vm-header__search-loc-input { background: var(--vm-bg-tertiary, #334155); border-color: var(--vm-border-color, #475569); color: #f8fafc; }
[data-theme="dark"] .vm-header__search-site-input:focus, [data-theme="dark"] .vm-header__search-loc-input:focus { border-color: #3b82f6; background: var(--vm-bg-primary, #0f172a); }
[data-theme="dark"] .vm-header__search-loc-results { background: var(--vm-bg-secondary, #1e293b); border-color: var(--vm-border-color); }
[data-theme="dark"] .vm-header__search-loc-item { color: #e2e8f0; }
[data-theme="dark"] .vm-header__search-loc-item:hover { background: var(--vm-bg-tertiary, #334155); }
[data-theme="dark"] .vm-header__search-close { color: #94a3b8; }
[data-theme="dark"] .vm-header__search-close:hover { background: var(--vm-bg-tertiary); color: #e2e8f0; }

/* --- Mega heading text (non-clickable) --- */
.vm-header__mega-heading-text { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--vm-text-muted, #64748b); padding: 0.5rem 1rem 0.4rem; cursor: default; border-bottom: 1px dashed var(--vm-border-color, #cbd5e1); margin-bottom: 0.25rem; }
.vm-header__mega-heading-text svg { flex-shrink: 0; width: 16px; height: 16px; }
[data-theme="dark"] .vm-header__mega-heading-text { color: #94a3b8; border-color: var(--vm-border-color, #334155); }

/* ═══ END OF CUSTOM HEADER CSS ═══ */

/* ========================================================================
   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: 1.5px solid var(--vm-border-color);
	border-radius: var(--vm-radius-small);
	padding: 1rem 1.15rem;
	margin: 1.5rem 0;
	box-shadow: var(--vm-shadow-light);
}

.vm-toc-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--vm-text-primary);
	margin-bottom: 0.6rem;
	padding-bottom: 0.5rem;
	border-bottom: 1.5px solid var(--vm-border-color);
	cursor: pointer;
	user-select: none;
}

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

.vm-toc-title::after {
	content: '\25BC';
	margin-left: auto;
	font-size: 0.65rem;
	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.25rem;
}

.vm-toc-list a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 10px;
	color: var(--vm-text-secondary) !important;
	text-decoration: none !important;
	border-radius: var(--vm-radius-small);
	font-weight: 500;
	font-size: 0.82rem;
	transition: var(--vm-transition);
	border-left: 2px 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: 3px;
	padding: 8px 10px;
	color: var(--vm-text-secondary);
	text-decoration: none !important;
	font-size: 0.68rem;
	font-weight: 600;
	transition: var(--vm-transition);
	border-radius: var(--vm-radius-small);
	min-width: 0;
	flex: 1;
	text-align: center;
	position: relative;
	/* Reset za button elemente (Prognoza, Theme Toggle) */
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
}
/* "Novo!" badge on nav items */
.vm-nav-badge {
	position: absolute;
	top: 1px;
	right: 2px;
	font-size: 0.5rem;
	font-weight: 700;
	color: #fff;
	background: #22c55e;
	padding: 1px 5px;
	border-radius: 8px;
	line-height: 1.4;
	letter-spacing: 0.2px;
	white-space: nowrap;
	pointer-events: none;
}

.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 / PRECIPITATION HIGHLIGHTS
   Samo bold tekst, bez pozadine i boje — temp-poz klase u tabelama
   i dalje imaju gradijente (zasebne klase, nisu pogođene).
   ======================================================================== */
.temp-inline,
.precip-inline,
.wind-inline {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ========================================================================
   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,
.skip-link.screen-reader-text {
	position: absolute;
	top: -100px;
	left: -100px;
	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;
	clip: rect(0,0,0,0);
	overflow: hidden;
	width: 1px;
	height: 1px;
}

.skip-to-content:focus,
.skip-link.screen-reader-text:focus {
	top: 0;
	left: 0;
	clip: auto;
	overflow: visible;
	width: auto;
	height: auto;
	outline: 3px solid #fbbf24;
	outline-offset: 2px;
}

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

/* ========================================================================
   AD CONTAINER FIXES - UKLONJENO (CWV sesija, 12.06.2026)
   Manuelne <ins> jedinice ne postoje vise u temi ni u sadrzaju.
   ======================================================================== */
@media screen and (max-width: 768px) {
	.ct-content-block .entry-content,
	.ct-container-full,
	div[data-block^="hook:"] .entry-content {
		max-width: 100vw !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; }

/* ========================================================================
   GLOBAL LINK FIX — prevent double underline (Blocksy border-bottom + text-decoration)
   ======================================================================== */
.entry-content a {
    border-bottom: none !important;
    text-decoration-line: none;
}
.entry-content a:hover {
    border-bottom: none !important;
}

/* ========================================================================
   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):not(.vm-station-card):not(.vm-about-cta),
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):not(.vm-station-card):not(.vm-about-cta) {
	color: #1d4ed8 !important;
	text-decoration: none !important;
	border-bottom: 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):not(.vm-station-card):not(.vm-about-cta):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):not(.vm-station-card):not(.vm-about-cta):hover {
	color: #1d4ed8 !important;
	text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 3px !important;
	border-bottom: none !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);
}

/* ---- ARTICLE FULL-WIDTH NA MOBILNOM ---- */
@media (max-width: 768px) {
    body.single-post .ct-container,
    body.single-post .site-main .ct-container,
    body.single .ct-container { padding-left: 0 !important; padding-right: 0 !important; }
    body.single-post .vm-hero-card { border-radius: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
    body.single-post .entry-content,
    body.single .entry-content { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* ---- 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.04), rgba(99, 102, 241, 0.03)) !important;
	padding: 1.25rem 1.5rem 1.25rem 1.75rem !important;
	border-radius: 10px !important;
	border-left: 2px solid #3b82f6 !important;
	margin-bottom: 1.75rem !important;
	font-size: 0.95rem !important;
	font-weight: 400 !important;
	font-style: italic !important;
	line-height: 1.8 !important;
	box-shadow: none !important;
}

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

/* Ukloni temperature bojenje iz teksta clanka — samo font-weight, bez boja i pozadine */
/* temp-inline / precip-inline override uklonjen — bazne klase su sada samo bold (v11.1) */

/* H2 podnaslovi - dekorativni akcent */
body.single .entry-content h2 {
	font-size: clamp(1.3rem, 2.8vw, 1.75rem) !important;
	font-weight: 700 !important;
	color: var(--vm-text-primary) !important;
	margin: 2.5rem 0 1.25rem 0 !important;
	padding: 0.75rem 1.25rem !important;
	border-left: 3px solid #3b82f6 !important;
	border-right: 3px solid #3b82f6 !important;
	background: none !important;
	border-radius: 0 !important;
	scroll-margin-top: 100px;
}

/* H3 podnaslovi */
body.single .entry-content h3 {
	font-size: clamp(1.1rem, 2.2vw, 1.4rem) !important;
	font-weight: 600 !important;
	color: var(--vm-text-primary) !important;
	margin: 2rem 0 1rem 0 !important;
	padding-bottom: 0.4rem !important;
	border-bottom: 1px solid rgba(59, 130, 246, 0.15) !important;
}

/* Intro pasus - istaknuti */
body.single .entry-content > p:first-of-type {
	font-size: 1.08rem !important;
	line-height: 1.85 !important;
	color: var(--vm-text-secondary) !important;
	border-left: 3px solid #3b82f6;
	padding-left: 1rem;
	background: rgba(59,130,246,0.02);
	border-radius: 0 8px 8px 0;
}

/* CTA dugmad u clancima - hover efekat */
body.single .entry-content a[style*="background"] {
	transition: transform 0.2s, box-shadow 0.2s !important;
}
body.single .entry-content a[style*="background"]:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Slike u clanku */
body.single .entry-content img {
	border-radius: 8px !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}

/* Blockquote u clanku */
body.single .entry-content blockquote {
	border-left: 3px solid transparent !important;
	border-image: linear-gradient(180deg, #3b82f6, #6366f1) 1 !important;
	background: rgba(59, 130, 246, 0.03) !important;
	padding: 1.25rem 1.5rem !important;
	margin: 1.75rem 0 !important;
	border-radius: 0 !important;
	font-style: italic !important;
	color: var(--vm-text-secondary) !important;
	font-size: 0.95rem !important;
	line-height: 1.8 !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: left !important;
		font-size: 0.92rem !important;
		line-height: 1.75 !important;
		margin-bottom: 1.4rem !important;
	}

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

	body.single .entry-content h2 {
		padding: 0.6rem 0 0.6rem 1rem !important;
		font-size: 1.2rem !important;
		margin: 1.75rem 0 1rem 0 !important;
	}

	body.single .entry-content h3 {
		font-size: 1.05rem !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.
   ========================================================================== */

/* 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}

/* 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):not(.vm-station-card):not(.vm-about-cta),
html[data-theme="dark"] body:not(.home) .entry-content a:not(.button):not(.btn):not(.vm-share-btn):not(.vm-station-card):not(.vm-about-cta) {
    color: #60a5fa !important;
    border-bottom: none !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):not(.vm-station-card):not(.vm-about-cta):hover,
html[data-theme="dark"] body:not(.home) .entry-content a:not(.button):not(.btn):not(.vm-share-btn):not(.vm-station-card):not(.vm-about-cta):hover {
    color: #93bbfd !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
    border-bottom: none !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):not(.vm-station-card),
html[data-theme="dark"] body.page .entry-content a:not(.button):not(.btn):not(.vm-station-card) {
    color: #60a5fa !important;
    border-bottom: none !important;
}

[data-theme="dark"] body.page .entry-content a:not(.button):not(.btn):not(.vm-station-card):hover,
html[data-theme="dark"] body.page .entry-content a:not(.button):not(.btn):not(.vm-station-card):hover {
    color: #93bbfd !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
    border-bottom: none !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;
}

/* ══════════════════════════════════════════════════════════════
   MAPA PADAVINA v6.0 — Floating glass player (vm-pm-*)
   HungaroMet self-hosted frejmovi, ImageOverlay animacija
   ══════════════════════════════════════════════════════════════ */

/* Stage — pozicioni kontekst za mapu + plutajuće kontrole */
.vm-pm-stage {
    position: relative;
    width: 100%;
}

.vm-pm-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--vm-text-muted, #64748b);
    font-size: 0.95rem;
}

/* Atribucija izvora — CC BY-SA obavezna */
.vm-pm-attrib {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    font-size: 0.68rem;
    color: #334155;
}
.vm-pm-attrib a { color: #2563eb; text-decoration: none; }
.vm-pm-attrib a:hover { text-decoration: underline; }

/* Stale baner — top-center preko mape */
.vm-pm-stale {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    max-width: calc(100% - 90px);
    padding: 8px 16px;
    background: rgba(239, 68, 68, 0.92);
    color: #fff;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.vm-pm-stale[hidden] { display: none; }

/* Plutajući glass bar — bottom center (desktop) */
.vm-pm-bar {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 1000;
    width: min(620px, calc(100% - 20px));
    padding: 10px 14px 8px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(203, 213, 225, 0.55);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}

.vm-pm-bar__row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vm-pm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.1s;
}
.vm-pm-btn:hover { background: rgba(15, 23, 42, 0.12); }
.vm-pm-btn:active { transform: scale(0.94); }

.vm-pm-btn--play {
    width: 40px;
    height: 40px;
    background: var(--vm-gradient-primary, linear-gradient(135deg, #3b82f6 0%, #6366f1 100%));
    color: #fff;
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.35);
}
.vm-pm-btn--play:hover {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
}

.vm-pm-btn--fs { margin-left: auto; }

/* Time chip + freshness tačkica */
.vm-pm-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vm-pm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
}
.vm-pm-dot--fresh { background: #10b981; }
.vm-pm-dot--recent { background: #f59e0b; }
.vm-pm-dot--stale { background: #ef4444; }

.vm-pm-counter {
    font-size: 0.72rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Speed pills — segmented (pattern forecast v3.x) */
.vm-pm-speed {
    display: inline-flex;
    gap: 2px;
    background: rgba(15, 23, 42, 0.06);
    padding: 3px;
    border-radius: 999px;
}
.vm-pm-speed-btn {
    border: none;
    background: transparent;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.vm-pm-speed-btn--active {
    background: #3b82f6;
    color: #fff !important;
}
/* Defanzivna pravila — stale keš first/last-child (lekcija forecast v3.2) */
.vm-pm-speed .vm-pm-speed-btn:first-child,
.vm-pm-speed .vm-pm-speed-btn:last-child {
    border-radius: 999px;
    border: none;
}

/* Timeline scrubber + satne oznake */
.vm-pm-timeline {
    position: relative;
    margin-top: 8px;
    padding-bottom: 16px;
}

.vm-pm-scrubber {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(15, 23, 42, 0.12);
    outline: none;
    cursor: pointer;
    margin: 0;
    display: block;
}
.vm-pm-scrubber::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3b82f6;
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.1s;
}
.vm-pm-scrubber::-webkit-slider-thumb:hover { transform: scale(1.15); }
.vm-pm-scrubber::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3b82f6;
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}
.vm-pm-scrubber::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(15, 23, 42, 0.12);
}

.vm-pm-ticks {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 14px;
    font-size: 0.62rem;
    color: #64748b;
    pointer-events: none;
    user-select: none;
}
.vm-pm-tick {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Fullscreen — mapa puni ekran */
.vm-pm-stage:fullscreen { background: #0f172a; }
.vm-pm-stage:fullscreen #mapid { height: 100vh; border-radius: 0; }
.vm-pm-stage:-webkit-full-screen { background: #0f172a; }
.vm-pm-stage:-webkit-full-screen #mapid { height: 100vh; border-radius: 0; }

/* Mobile ≤640px: bar izlazi iz mape u normalan tok (ne prekriva Vojvodinu) */
@media (max-width: 640px) {
    .vm-pm-bar {
        position: static;
        transform: none;
        width: 100%;
        margin-top: 8px;
        padding: 8px 10px 6px;
        border-radius: 14px;
    }
    .vm-pm-bar__row { gap: 6px; }
    .vm-pm-btn { width: 40px; height: 40px; }
    .vm-pm-btn--play { width: 44px; height: 44px; }
    .vm-pm-time { font-size: 0.8rem; padding: 4px 10px; }
    .vm-pm-counter { display: none; }
    .vm-pm-speed-btn { padding: 5px 8px; font-size: 0.7rem; }
    .vm-pm-attrib { font-size: 0.6rem; top: 6px; right: 6px; }
    .vm-pm-stale { font-size: 0.72rem; max-width: calc(100% - 24px); }
}

/* Dark mode — glass bar */
[data-theme="dark"] .vm-pm-bar {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(51, 65, 85, 0.7);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .vm-pm-btn {
    background: rgba(248, 250, 252, 0.08);
    color: #e2e8f0;
}
[data-theme="dark"] .vm-pm-btn:hover { background: rgba(248, 250, 252, 0.16); }
[data-theme="dark"] .vm-pm-btn--play {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    color: #fff;
}
[data-theme="dark"] .vm-pm-time {
    background: rgba(248, 250, 252, 0.08);
    color: #f1f5f9;
}
[data-theme="dark"] .vm-pm-counter { color: #94a3b8; }
[data-theme="dark"] .vm-pm-speed { background: rgba(248, 250, 252, 0.08); }
[data-theme="dark"] .vm-pm-speed-btn { color: #cbd5e1; }
[data-theme="dark"] .vm-pm-speed-btn--active { background: #2563eb; }
[data-theme="dark"] .vm-pm-scrubber { background: rgba(248, 250, 252, 0.15); }
[data-theme="dark"] .vm-pm-scrubber::-moz-range-track { background: rgba(248, 250, 252, 0.15); }
[data-theme="dark"] .vm-pm-ticks { color: #94a3b8; }
[data-theme="dark"] .vm-pm-attrib {
    background: rgba(15, 23, 42, 0.85);
    color: #cbd5e1;
}
[data-theme="dark"] .vm-pm-attrib a { color: #60a5fa; }

/* ─── Munje toggle (⚡) ─── */

.vm-pm-btn--zap-on {
    background: linear-gradient(135deg, #f59e0b 0%, #facc15 100%) !important;
    color: #422006 !important;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.45);
}

[data-theme="dark"] .vm-pm-btn--zap-on {
    background: linear-gradient(135deg, #d97706 0%, #eab308 100%) !important;
    color: #fff !important;
}

.vm-hm-zap--on {
    background: linear-gradient(135deg, #f59e0b 0%, #facc15 100%) !important;
    color: #422006 !important;
}

[data-theme="dark"] .vm-hm-zap--on {
    background: linear-gradient(135deg, #d97706 0%, #eab308 100%) !important;
    color: #fff !important;
}

/* ─── Homepage radar toggle (uključi/isključi padavine) ─── */
.vm-hm-radar-toggle--on {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
    color: #fff !important;
}

[data-theme="dark"] .vm-hm-radar-toggle--on {
    background: linear-gradient(135deg, #1d4ed8 0%, #4338ca 100%) !important;
    color: #fff !important;
}

/* ─── Homepage Preuzmi dugme + meni ─── */
.vm-hm-dl {
    position: relative;
    display: inline-flex;
}

.vm-hm-dl-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 156px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
}

.vm-hm-dl-menu[hidden] { display: none; }

.vm-hm-dl-menu button {
    border: none;
    background: transparent;
    text-align: left;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vm-text-primary, #0f172a);
    cursor: pointer;
    transition: background 0.15s ease;
}

.vm-hm-dl-menu button:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

[data-theme="dark"] .vm-hm-dl-menu {
    background: rgba(15, 23, 42, 0.97);
    border-color: rgba(51, 65, 85, 0.8);
}

[data-theme="dark"] .vm-hm-dl-menu button { color: #e2e8f0; }
[data-theme="dark"] .vm-hm-dl-menu button:hover {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
}

.vm-hm-dl-progress {
    font-size: 0.62rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.vm-hm-capturing .leaflet-control-zoom { display: none !important; }

/* ─── Preuzmi dugme + meni ─── */

.vm-pm-dl {
    position: relative;
    display: inline-flex;
}

.vm-pm-dl-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 160px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
}

.vm-pm-dl-menu[hidden] { display: none; }

.vm-pm-dl-menu button {
    border: none;
    background: transparent;
    text-align: left;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vm-text-primary, #0f172a);
    cursor: pointer;
    transition: background 0.15s ease;
}

.vm-pm-dl-menu button:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

[data-theme="dark"] .vm-pm-dl-menu {
    background: rgba(15, 23, 42, 0.96);
    border-color: rgba(51, 65, 85, 0.8);
}

[data-theme="dark"] .vm-pm-dl-menu button { color: #e2e8f0; }
[data-theme="dark"] .vm-pm-dl-menu button:hover {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
}

.vm-pm-dl-progress {
    font-size: 0.66rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Tokom snimanja mape sakrij zoom kontrole */
.vm-pm-capturing .leaflet-control-zoom { display: none !important; }

/* ─── Kako funkcioniše ova mapa (vm-pm-about) ─── */

.vm-pm-about {
    margin-top: 28px;
    padding: 1.5rem 1.5rem 1.25rem;
    background: var(--vm-card-bg, #fff);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: var(--vm-radius, 12px);
}

.vm-pm-about__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    margin: 0 0 1.1rem;
    text-align: center;
}

.vm-pm-about__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.vm-pm-about__step {
    background: var(--vm-bg-secondary, #f1f5f9);
    border-radius: var(--vm-radius-small, 8px);
    padding: 1rem 1.1rem;
}

.vm-pm-about__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--vm-gradient-primary, linear-gradient(135deg, #3b82f6 0%, #6366f1 100%));
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.vm-pm-about__head {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    margin: 0 0 6px;
    line-height: 1.3;
}

.vm-pm-about__text {
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--vm-text-secondary);
    margin: 0;
    text-align: left !important;
}

.vm-pm-about__text a {
    color: #2563eb;
    border-bottom: none !important;
}

.vm-pm-about__more {
    margin: 1.1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--vm-border-color, #cbd5e1);
    font-size: 0.85rem;
    color: var(--vm-text-secondary);
    text-align: center !important;
}

.vm-pm-about__more a {
    color: #2563eb;
    font-weight: 600;
}

@media (max-width: 768px) {
    .vm-pm-about__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .vm-pm-about {
        padding: 1.1rem 1rem 1rem;
    }
}

[data-theme="dark"] .vm-pm-about__text a,
[data-theme="dark"] .vm-pm-about__more a {
    color: #60a5fa;
}

/* Timestamp - minimalist pill badge */
/* Radar timestamp pill sa integrisanim freshness indikatorom */
.vm-radar-timestamp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 18px;
    margin: 10px auto 0;
    max-width: fit-content;
    color: var(--vm-text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    border-radius: 999px;
    letter-spacing: 0.01em;
    line-height: 1.4;
}
/* Fallback: standalone #timestamp (stranice bez .vm-radar-timestamp wrappera) */
#timestamp:not(.vm-radar-timestamp) {
    text-align: center;
    padding: 8px 18px;
    margin: 10px auto 0;
    width: fit-content;
    color: var(--vm-text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    border-radius: 999px;
    letter-spacing: 0.01em;
    line-height: 1.4;
}
#timestamp:empty {
    display: none;
}
/* Sakrij pill dok JS ne popuni sadržaj */
.vm-radar-timestamp:has(#timestamp-text:empty):has(.vm-radar-freshness:empty) {
    display: none;
}
.vm-radar-freshness {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1;
}
.vm-radar-freshness:empty {
    display: none;
}
.vm-radar-freshness::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.vm-radar-freshness--fresh::before {
    background: #22c55e;
    box-shadow: 0 0 4px #22c55e;
}
.vm-radar-freshness--recent::before {
    background: #eab308;
}
.vm-radar-freshness--stale::before {
    background: #ef4444;
}

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

/* Widget outer container - transparent (v3.0 uses vm-tro-day-card) */
.vwfh-widget {
    background: transparent;
    padding: 0;
    border-radius: 0;
    position: relative;
    overflow: visible;
}

.vwfh-widget::before {
    display: none;
}

/* 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 svg {
    width: 18px;
    height: 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;
}

.vwfh-wind-icon-circle svg {
    width: 14px;
    height: 14px;
}

.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 img {
    width: 28px;
    height: 28px;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

/* SVG icons have their own colors - no color mapping needed */

/* 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;
}

/* ==========================================================================
   HOMEPAGE ROW — MeteoAlarm (L) + Trodnevna (R) na desktop,
   forecast IZNAD warnings na mobile (order swap)
   ========================================================================== */
@media (max-width: 781px) {
    .wp-block-columns.vm-ma-row .vm-col-forecast,
    .wp-block-columns.vm-ma-row > .vm-col-forecast { order: -1; }
    .wp-block-columns.vm-ma-row .vm-col-meteoalarm,
    .wp-block-columns.vm-ma-row > .vm-col-meteoalarm { order: 1; }
}

/* ==========================================================================
   METEOALARM WIDGET v2.0 (2026-04-18, sesija 52)
   Mapa Vojvodine + Danas/Sutra/Prekosutra toggle + SR/EN + bolja legenda
   ========================================================================== */

.vm-ma-widget {
    background: var(--vm-card-bg, #fff);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: var(--vm-radius, 12px);
    padding: 20px 22px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    min-height: 520px;
    contain: layout style;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Language toggle */
.vm-ma-widget[data-lang="sr"] [data-lang-en] { display: none !important; }
.vm-ma-widget[data-lang="en"] [data-lang-sr] { display: none !important; }
.vm-ma-widget[data-lang="en"] [data-lang-en] { display: inline !important; }

/* Day toggle — only show active day inside cards */
.vm-ma-card__day { display: none; }
.vm-ma-widget[data-day="0"] .vm-ma-card__day[data-day-idx="0"],
.vm-ma-widget[data-day="1"] .vm-ma-card__day[data-day-idx="1"],
.vm-ma-widget[data-day="2"] .vm-ma-card__day[data-day-idx="2"] { display: block; }

/* Header */
.vm-ma-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--vm-border-color, #e2e8f0);
}
.vm-ma-header__left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vm-ma-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--vm-text-primary);
    line-height: 1.3;
}
.vm-ma-subtitle {
    font-size: 0.82rem;
    color: var(--vm-text-secondary);
    margin: 2px 0 0;
    line-height: 1.3;
    font-style: italic;
}
.vm-ma-updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--vm-text-muted);
}
.vm-ma-updated__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 4px rgba(34,197,94,0.5);
}

/* Language toggle pill */
.vm-ma-lang {
    display: inline-flex;
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: 999px;
    overflow: hidden;
    background: var(--vm-bg-secondary);
}
.vm-ma-lang-btn {
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: transparent;
    border: none;
    color: var(--vm-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.vm-ma-lang-btn:hover { color: var(--vm-text-primary); }
.vm-ma-lang-btn--active { background: #2563eb; color: #ffffff !important; }

/* Day toggle */
.vm-ma-day-toggle {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 5px;
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    border-radius: 12px;
}
.vm-ma-day-btn {
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: center;
    padding: 8px 6px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--vm-text-secondary);
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.vm-ma-day-btn:hover { background: rgba(59,130,246,0.08); color: var(--vm-text-primary); }
.vm-ma-day-btn--active {
    background: var(--vm-card-bg);
    color: var(--vm-text-primary);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    font-weight: 600;
}
.vm-ma-day-btn__label { font-size: 0.88rem; font-weight: 600; line-height: 1; }
.vm-ma-day-btn__date { font-size: 0.72rem; color: var(--vm-text-muted); font-weight: 500; }
.vm-ma-day-btn--active .vm-ma-day-btn__date { color: #2563eb; }

/* Body split: mapa + cards */
.vm-ma-body {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 18px;
    flex: 1;
    min-height: 0;
}
@media (max-width: 820px) {
    .vm-ma-body { grid-template-columns: 1fr; }
}

/* SVG mapa */
.vm-ma-map-wrap {
    background: linear-gradient(135deg, rgba(59,130,246,0.04) 0%, rgba(99,102,241,0.04) 100%);
    border: 1px solid var(--vm-border-color);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-ma-map {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}
.vm-ma-region {
    stroke: #fff;
    stroke-width: 2.5;
    stroke-linejoin: round;
    cursor: pointer;
    transition: fill 0.35s ease, filter 0.2s ease;
}
.vm-ma-region:hover {
    filter: brightness(1.08) drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}
.vm-ma-region[data-level="1"] { fill: #86efac; }  /* light green */
.vm-ma-region[data-level="2"] { fill: #fde047; }  /* light yellow */
.vm-ma-region[data-level="3"] { fill: #fb923c; }  /* light orange */
.vm-ma-region[data-level="4"] { fill: #f87171; }  /* light red */
.vm-ma-map-labels text {
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    fill: rgba(15,23,42,0.72);
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
    letter-spacing: 0.04em;
}

[data-theme="dark"] .vm-ma-map-wrap {
    background: linear-gradient(135deg, rgba(30,41,59,0.6) 0%, rgba(51,65,85,0.4) 100%);
}
[data-theme="dark"] .vm-ma-region { stroke: var(--vm-card-bg); }
[data-theme="dark"] .vm-ma-region[data-level="1"] { fill: #4ade80; }
[data-theme="dark"] .vm-ma-region[data-level="2"] { fill: #facc15; }
[data-theme="dark"] .vm-ma-region[data-level="3"] { fill: #f97316; }
[data-theme="dark"] .vm-ma-region[data-level="4"] { fill: #ef4444; }
[data-theme="dark"] .vm-ma-map-labels text { fill: rgba(15,23,42,0.85); text-shadow: none; }

/* Cards stack */
.vm-ma-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}
.vm-ma-card {
    display: flex;
    gap: 0;
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vm-ma-card:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.06); }
.vm-ma-card--flash { animation: vm-ma-flash 1.2s ease; }
@keyframes vm-ma-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
    20%      { box-shadow: 0 0 0 4px rgba(59,130,246,0.35); }
}
.vm-ma-card__accent { width: 5px; flex-shrink: 0; transition: background 0.3s; }
.vm-ma-widget[data-day="0"] .vm-ma-card[data-region="backa"] .vm-ma-card__accent,
.vm-ma-widget[data-day="1"] .vm-ma-card[data-region="backa"] .vm-ma-card__accent,
.vm-ma-widget[data-day="2"] .vm-ma-card[data-region="backa"] .vm-ma-card__accent { /* bg setuje niže kroz data-level na region markeru */ }
/* Pošto accent bar bira boju po AKTIVNOM danu, koristimo inline data-level na .vm-ma-region
   i prenosimo preko .vm-ma-region[data-level] — ali accent je na card-u, ne SVG-u.
   Rešenje: koristi .vm-ma-card__status--level-N unutar aktivnog day div-a */
.vm-ma-card__status { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; }
.vm-ma-card__status--level-1 { border-left: 5px solid #22c55e; }
.vm-ma-card__status--level-2 { border-left: 5px solid #eab308; }
.vm-ma-card__status--level-3 { border-left: 5px solid #f97316; }
.vm-ma-card__status--level-4 { border-left: 5px solid #ef4444; }

.vm-ma-card__body { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 0; }
.vm-ma-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 6px; }
.vm-ma-card__region { font-size: 0.96rem; font-weight: 700; margin: 0; color: var(--vm-text-primary); line-height: 1.2; }

.vm-ma-level-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--vm-text-muted); }
/* Aktivni dan dot boja iz .vm-ma-card__status--level-N */
.vm-ma-widget .vm-ma-card__day .vm-ma-card__status--level-1 ~ * { /* no-op placeholder */ }

/* Dot boja preko card__accent aktivnog dana */
.vm-ma-card__status + .vm-ma-level-dot { display: none; } /* neutralisati old dot */

/* Umesto toga, dot postavljamo preko pseudo-elementa aktivnog status-a */
.vm-ma-card__head .vm-ma-level-dot {
    background: var(--vm-border-color); /* default dok JS ne postavi data-level */
}
/* Za svaku kombinaciju day × region × level, dot boja se koristi preko CSS fallback-a (ostaje neutralan).
   Glavni vizuelni indikator je accent bar (border-left na card__status). */

.vm-ma-type-icon { width: 26px; height: 26px; color: var(--vm-text-secondary); flex-shrink: 0; margin-top: 1px; }
.vm-ma-card__status--level-2 .vm-ma-type-icon { color: #ca8a04; }
.vm-ma-card__status--level-3 .vm-ma-type-icon { color: #ea580c; }
.vm-ma-card__status--level-4 .vm-ma-type-icon { color: #dc2626; }

.vm-ma-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vm-ma-card__level {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--vm-text-secondary);
    line-height: 1.2;
    letter-spacing: 0.01em;
}
.vm-ma-card__lvl-sub { color: var(--vm-text-muted); font-weight: 500; }
.vm-ma-card__sep { color: var(--vm-text-muted); margin: 0 2px; }
.vm-ma-card__headline {
    font-size: 0.88rem;
    color: var(--vm-text-primary);
    line-height: 1.4;
    margin-top: 3px;
    display: block;
}

/* Legenda: 4 kartice sa swatch + strong + small */
.vm-ma-legend {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 10px;
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    border-radius: 10px;
}
@media (max-width: 560px) { .vm-ma-legend { grid-template-columns: repeat(2, 1fr); } }
.vm-ma-legend__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--vm-card-bg);
    border-radius: 8px;
    min-width: 0;
}
.vm-ma-legend__swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.vm-ma-legend__item--1 .vm-ma-legend__swatch { background: #22c55e; }
.vm-ma-legend__item--2 .vm-ma-legend__swatch { background: #eab308; }
.vm-ma-legend__item--3 .vm-ma-legend__swatch { background: #f97316; }
.vm-ma-legend__item--4 .vm-ma-legend__swatch { background: #ef4444; }
.vm-ma-legend__item--3 .vm-ma-legend__swatch,
.vm-ma-legend__item--4 .vm-ma-legend__swatch {
    animation: vm-ma-pulse-soft 2.5s ease-in-out infinite;
}
@keyframes vm-ma-pulse-soft {
    0%, 100% { box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
    50%      { box-shadow: 0 0 8px currentColor; }
}
.vm-ma-legend__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.vm-ma-legend__text strong {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--vm-text-primary);
}
.vm-ma-legend__text small {
    font-size: 0.7rem;
    color: var(--vm-text-muted);
}

/* Footer */
.vm-ma-footer {
    font-size: 0.78rem;
    color: var(--vm-text-muted);
    padding-top: 10px;
    border-top: 1px solid var(--vm-border-color, #e2e8f0);
    text-align: center;
}
.vm-ma-footer a { color: var(--vm-text-secondary); text-decoration: none; border-bottom: none !important; }
.vm-ma-footer a:hover { color: #3b82f6; }

/* Dark mode */
[data-theme="dark"] .vm-ma-card__status--level-2 .vm-ma-type-icon { color: #fbbf24; }
[data-theme="dark"] .vm-ma-card__status--level-3 .vm-ma-type-icon { color: #fb923c; }
[data-theme="dark"] .vm-ma-card__status--level-4 .vm-ma-type-icon { color: #f87171; }
[data-theme="dark"] .vm-ma-legend__text strong { color: var(--vm-text-primary); }


/* ==========================================================================
   HOMEPAGE REDIZAJN v1.0 (2026-04-17)
   Hero trak (desktop-only pretraga), CTA gradient tiles, utility footer grid
   ========================================================================== */

/* --- Hero pretraga: wrapper-border pill (isti pattern kao .vm-forecast-search) --- */
.vm-home-hero {
    max-width: 620px;
    margin: 8px auto 28px;
    text-align: center;
    position: relative;
    z-index: 9998;
}
.vm-home-hero__search { position: relative; }

/* Wrapper ima border/bg, input je TRANSPARENT unutar */
.vm-home-search-wrap {
    display: flex;
    align-items: center;
    background: var(--vm-bg-secondary, #f1f5f9);
    border: 2px solid var(--vm-border-color, #cbd5e1);
    border-radius: 50px;
    padding: 0 4px 0 16px;
    height: 50px;
    box-sizing: border-box;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    position: relative;
    z-index: 9998;
}
.vm-home-search-wrap:focus-within {
    border-color: #3b82f6;
    background: var(--vm-card-bg, #fff);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.vm-home-search-icon {
    width: 20px;
    height: 20px;
    fill: var(--vm-text-muted, #64748b);
    flex-shrink: 0;
    margin-right: 10px;
}

.vm-home-search-input {
    flex: 1;
    padding: 0 12px 0 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 0.95rem;
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
    color: var(--vm-text-primary, #0f172a);
    outline: none !important;
    box-shadow: none !important;
}
.vm-home-search-input:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
.vm-home-search-input::placeholder { color: var(--vm-text-muted, #64748b); }

.vm-home-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--vm-card-bg, #fff);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    max-height: 380px;
    overflow-y: auto;
    z-index: 9998;
    text-align: left;
}
.vm-home-search-results[hidden] { display: none; }
.vm-home-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    color: var(--vm-text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--vm-border-color);
    border-radius: 0;
    transition: background 0.15s, color 0.15s;
}
.vm-home-search-item:last-child { border-bottom: none; }
.vm-home-search-item:hover,
.vm-home-search-item--active {
    background: var(--vm-bg-secondary);
    color: #2563eb;
    text-decoration: none;
}
.vm-home-search-name { font-weight: 500; }
.vm-home-search-region {
    font-size: 0.78rem;
    color: var(--vm-text-muted);
    flex-shrink: 0;
}

.vm-home-hero small {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 0.82rem;
}
.vm-home-hero small a {
    color: var(--vm-text-muted, #64748b);
    text-decoration: none;
    border-bottom: none !important;
}
.vm-home-hero small a:hover { color: #3b82f6; }

[data-theme="dark"] .vm-home-search-icon { fill: var(--vm-text-muted); }

/* Mobilna pocetna: pretraga VIDLJIVA (ranije display:none) — kompaktna varijanta */
@media (max-width: 999px) {
    .vm-home-hero {
        max-width: 100%;
        margin: 4px auto 20px;
    }
    .vm-home-search-wrap { height: 46px; }
    /* 16px sprecava iOS auto-zoom pri fokusu na input */
    .vm-home-search-input { font-size: 16px; }
    .vm-home-search-results { max-height: 300px; }
    .vm-home-search-item { padding: 10px 12px; }
}

/* --- CTA gradient tiles: 4 kolone desktop, 2 tablet, 1 mobile --- */
.vm-cta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 32px 0;
    min-height: 160px;
}
@media (max-width: 1024px) { .vm-cta-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .vm-cta-grid { grid-template-columns: 1fr; min-height: 0; } }

.vm-cta-grid .vm-cta-card {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px;
    margin-top: 0;
    min-height: 160px;
    border: none;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.vm-cta-grid .vm-cta-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    z-index: -1;
    transition: transform 0.3s ease;
}
.vm-cta-grid .vm-cta-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
    color: #ffffff;
    border: none;
}
.vm-cta-grid .vm-cta-card:hover::before { transform: scale(1.03); }

.vm-cta-grid .vm-cta-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255,255,255,0.22);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.vm-cta-grid .vm-cta-card-icon svg { width: 22px; height: 22px; fill: #ffffff; }

.vm-cta-grid .vm-cta-card-content { width: 100%; }
.vm-cta-grid .vm-cta-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px;
}
.vm-cta-grid .vm-cta-card-desc {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.88);
    line-height: 1.4;
    margin: 0;
}
.vm-cta-grid .vm-cta-card-arrow {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 20px;
    height: 20px;
    fill: rgba(255,255,255,0.85);
    opacity: 0.75;
}
.vm-cta-grid .vm-cta-card:hover .vm-cta-card-arrow {
    transform: translateX(4px);
    fill: #ffffff;
    opacity: 1;
}

/* Gradient palette per destination */
.vm-cta-card--radar    { background: linear-gradient(135deg, #2563eb 0%, #3b82f6 60%, #60a5fa 100%); }
.vm-cta-card--forecast { background: linear-gradient(135deg, #0891b2 0%, #14b8a6 60%, #5eead4 100%); }
.vm-cta-card--stations { background: linear-gradient(135deg, #059669 0%, #10b981 60%, #6ee7b7 100%); }
.vm-cta-card--satellite{ background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 60%, #c4b5fd 100%); }

/* --- Donate sekcija na dnu (PayPal + Patreon) --- */
.vm-home-donate {
    margin: 56px 0 32px;
    padding: 40px 32px;
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
    border: 1px solid var(--vm-border-color);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.vm-home-donate::before {
    content: "";
    position: absolute;
    top: -60px; right: -60px;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.vm-home-donate__header { text-align: center; max-width: 680px; margin: 0 auto 28px; position: relative; }
.vm-home-donate__title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--vm-text-primary);
}
.vm-home-donate__lead {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--vm-text-secondary);
    margin: 0;
}
.vm-home-donate__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    position: relative;
}
.vm-donate-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: 16px;
    text-decoration: none;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    min-height: 220px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}
.vm-donate-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0,0,0,0.18);
    color: #ffffff;
    text-decoration: none;
}
.vm-donate-card--paypal  { background: linear-gradient(135deg, #003087 0%, #0070ba 50%, #009cde 100%); }
.vm-donate-card--patreon { background: linear-gradient(135deg, #052D49 0%, #FF424D 70%, #ff6b6b 100%); }
.vm-donate-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.vm-donate-card__icon svg { width: 28px; height: 28px; fill: #ffffff; }
.vm-donate-card__body { flex: 1; }
.vm-donate-card__eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    margin-bottom: 10px;
    color: #ffffff;
}
.vm-donate-card__title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: #ffffff;
    line-height: 1.3;
}
.vm-donate-card__desc {
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.92);
    margin: 0;
}
.vm-donate-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,0.2);
    font-weight: 700;
    font-size: 0.9rem;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.35);
    transition: background 0.2s ease, padding-right 0.2s ease;
}
.vm-donate-card__cta svg { width: 16px; height: 16px; fill: #ffffff; transition: transform 0.2s ease; }
.vm-donate-card:hover .vm-donate-card__cta { background: rgba(255,255,255,0.32); padding-right: 22px; }
.vm-donate-card:hover .vm-donate-card__cta svg { transform: translateX(3px); }

[data-theme="dark"] .vm-home-donate {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-color: rgba(96,165,250,0.2);
}
[data-theme="dark"] .vm-home-donate__title  { color: var(--vm-text-primary); }
[data-theme="dark"] .vm-home-donate__lead   { color: var(--vm-text-secondary); }

@media (max-width: 720px) {
    .vm-home-donate { padding: 28px 18px; margin: 40px 0 20px; }
    .vm-home-donate__title { font-size: 1.35rem; }
    .vm-home-donate__grid { grid-template-columns: 1fr; gap: 14px; }
    .vm-donate-card { min-height: 0; padding: 20px; }
}

/* --- Utility footer grid: sidebar widgets u 3 kolone na dnu (zadržano za backward compat) --- */
.vm-home-utility {
    margin: 48px 0 24px;
    padding: 32px 24px;
    background: var(--vm-bg-secondary);
    border-radius: var(--vm-radius, 12px);
    border: 1px solid var(--vm-border-color);
}
.vm-home-utility .vm-sidebar-widget-area {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.vm-home-utility .vm-sidebar-widget-area > section,
.vm-home-utility .vm-sidebar-widget-area > aside,
.vm-home-utility .vm-sidebar-widget-area .widget {
    background: var(--vm-card-bg);
    padding: 20px;
    border-radius: var(--vm-radius-small, 8px);
    border: 1px solid var(--vm-border-color);
}
.vm-home-utility .widget-title,
.vm-home-utility h2,
.vm-home-utility h3 {
    font-size: 1.05rem;
    margin: 0 0 12px;
}
@media (max-width: 900px) {
    .vm-home-utility .vm-sidebar-widget-area { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .vm-home-utility { padding: 20px 16px; }
    .vm-home-utility .vm-sidebar-widget-area { grid-template-columns: 1fr; gap: 16px; }
}


/* Homepage widget: trodnevna card in narrow column */
.vwfh-widget .vm-tro-day-card__map { height: 250px; }
.vwfh-widget .vm-tro-day-card { border-radius: var(--vm-radius, 12px); overflow: hidden; }
.vwfh-widget .vm-tro-toolbar { text-align: center; }
@media (max-width: 768px) {
    .vwfh-widget .vm-tro-day-card__map { height: 220px; }
}
@media (max-width: 480px) {
    .vwfh-widget .vm-tro-day-card__map { height: 200px; }
}

/* 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
   ========================================================================== */

[data-theme="dark"] #timestamp,
[data-theme="dark"] .vm-radar-timestamp {
    color: var(--vm-text-muted);
    background: var(--vm-bg-tertiary);
    border-color: var(--vm-border-color);
}

/* 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 14px; gap: 10px; }
    .vm-cta-card-icon { width: 36px; height: 36px; min-width: 36px; border-radius: 10px; }
    .vm-cta-card-icon svg { width: 18px; height: 18px; }
    .vm-cta-card-title { font-size: 0.92rem; }
    .vm-cta-card-desc { font-size: 0.8rem; }
    .vm-cta-card-arrow { width: 16px; height: 16px; min-width: 16px; }

    .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: 0; }
    .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);
}

/* Forecast search — wrapper-border approach (icon is flex sibling, not absolute overlay).
   Border/bg on wrapper, input is transparent. Blocksy can't override this. */
.vm-forecast-search {
    display: flex;
    align-items: center;
    background: var(--vm-bg-secondary, #f1f5f9);
    border: 2px solid var(--vm-border-color, #cbd5e1);
    border-radius: 50px;
    padding: 0 4px 0 16px;
    height: 49px;
    box-sizing: border-box;
    position: relative;
}
.vm-forecast-search:focus-within {
    border-color: #3b82f6;
    background: var(--vm-card-bg, #fff);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.vm-forecast-search__icon {
    width: 20px; height: 20px;
    flex-shrink: 0;
    margin-right: 10px;
}
.vm-forecast-search__input {
    flex: 1;
    padding: 0 12px 0 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    height: 100%;
    min-width: 0;
}
[data-theme="dark"] .vm-forecast-search {
    background: var(--vm-bg-secondary);
    border-color: var(--vm-border-color);
}
[data-theme="dark"] .vm-forecast-search:focus-within {
    background: var(--vm-card-bg);
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96,165,250,0.15);
}

[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;
}

/* ==========================================================================
   DESETODNEVNA - Ad Zones & Content Sections
   v1.0 - Razdvajanje sadrzaja na sekcije za Google Auto Ads
   ========================================================================== */

.vm-desetodnevna-page {
    width: 100%;
}

.vm-content-section {
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   METEOROLOSKE STANICE - /stanice/ i /stanice/{slug}/
   v1.0
   ========================================================================== */

/* --- Breadcrumbs --- */
.vm-breadcrumbs {
    padding: 0.75rem 0;
    font-size: 0.85rem;
    color: var(--vm-text-muted);
}
.vm-breadcrumbs a {
    color: var(--vm-text-secondary);
    text-decoration: none;
}
.vm-breadcrumbs a:hover {
    color: var(--vm-text-primary);
}
.vm-breadcrumbs-sep {
    margin: 0 0.5rem;
    color: var(--vm-border-color);
}
.vm-breadcrumbs-current {
    color: var(--vm-text-primary);
    font-weight: 600;
}

/* --- Station Page Layout --- */
.vm-station-page,
.vm-stations-overview {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
}

/* --- Sticky Section Navigation --- */
/* Back to all stations button */
.vm-station-back {
    padding: 12px 0;
    margin-top: 32px;
    text-align: center;
}
.vm-station-back__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--vm-text-secondary);
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    border-radius: 999px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    line-height: 1.3;
}
.vm-station-back__sub {
    font-weight: 400;
    opacity: 0.65;
    font-size: 0.88em;
}
.vm-station-back__link:hover {
    color: #2563eb;
    background: #eff6ff;
    border-color: #bfdbfe;
    text-decoration: none !important;
}
.vm-station-back__link svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.vm-station-back__link:hover svg {
    transform: scale(1.1);
}
[data-theme="dark"] .vm-station-back__link {
    color: var(--vm-text-secondary);
    background: var(--vm-bg-tertiary);
    border-color: var(--vm-border-color);
}
[data-theme="dark"] .vm-station-back__link:hover {
    color: #60a5fa;
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(96, 165, 250, 0.3);
}

.vm-station-nav {
    position: sticky;
    top: 110px;
    z-index: 100;
    display: flex;
    gap: 0;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 -1rem;
    padding: 0 0.75rem;
}
@media (max-width: 999px) {
    .vm-station-nav { top: 0; }
}
.vm-station-nav::-webkit-scrollbar { display: none; }
.vm-station-nav__link {
    flex-shrink: 0;
    padding: 8px 14px;
    text-decoration: none;
    color: var(--vm-text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.vm-station-nav__link:hover {
    color: var(--vm-text-primary);
    text-decoration: none;
}
.vm-station-nav__link--active {
    color: #2563eb !important;
    border-bottom-color: #2563eb;
    font-weight: 600;
}
[data-theme="dark"] .vm-station-nav {
    background: rgba(15, 23, 42, 0.97);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .vm-station-nav__link:hover {
    color: var(--vm-text-primary);
}
[data-theme="dark"] .vm-station-nav__link--active {
    color: #60a5fa !important;
    border-bottom-color: #60a5fa;
}
html {
    scroll-padding-top: 110px;
}
@media (min-width: 769px) {
    html {
        scroll-behavior: smooth;
    }
}
@media (max-width: 768px) {
    .vm-station-nav {
        overflow-x: visible;
        flex-wrap: wrap;
        padding: 0 0.5rem;
        gap: 0;
    }
    .vm-station-nav__link {
        font-size: 0.75rem;
        padding: 6px 8px;
    }
}

/* --- Hero Card --- */
.vm-station-hero {
    background: var(--vm-card-bg);
    border-radius: var(--vm-radius);
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
}
.vm-station-hero__main {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.vm-station-hero__temp-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.vm-station-hero__temp {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--vm-text-primary);
    line-height: 1;
}
.vm-station-hero__temp--na {
    color: var(--vm-text-muted);
}
.vm-station-hero__condition {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: var(--vm-text-secondary);
    margin-top: 0.25rem;
}
.vm-station-hero__weather-icon {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    object-fit: contain;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
}
.vm-station-hero__title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    margin: 0;
    flex: 1;
}
.vm-station-hero__badges {
    display: flex;
    gap: 0.5rem;
}

/* Badges */
.vm-station-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vm-station-badge--gms {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.vm-station-badge--ams_state {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.vm-station-badge--ams_supplementary {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.vm-station-badge--flumen {
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
    border: 1px solid rgba(139, 92, 246, 0.3);
}
.vm-station-badge--small {
    padding: 2px 6px;
    font-size: 0.65rem;
}

/* Hero Details Grid */
.vm-station-hero__details {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--vm-border-color);
}
.vm-station-detail-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}
.vm-station-detail-card__label {
    font-size: 0.75rem;
    color: var(--vm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vm-station-detail-card__value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vm-text-primary);
}
.vm-station-hero__update {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--vm-text-muted);
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.vm-station-hero__source {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--vm-text-muted);
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    border-radius: 999px;
    white-space: nowrap;
}

/* --- AMS Current Data Section --- */
.vm-ams-current {
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.vm-ams-current__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.vm-ams-current__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    margin: 0;
}
.vm-ams-current__freq {
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--vm-text-muted);
}
.vm-ams-current__time {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vm-text-secondary);
    background: var(--vm-bg-secondary);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}
.vm-ams-current__time:has(.vm-dot--fresh) {
    color: #059669;
    background: rgba(16, 185, 129, 0.08);
}
.vm-ams-current__time .vm-dot--fresh {
    animation: vm-pulse 2s ease-in-out infinite;
}
.vm-ams-current__time:has(.vm-dot--stale) {
    color: #d97706;
    background: rgba(245, 158, 11, 0.08);
}
@keyframes vm-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.vm-ams-current__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
.vm-ams-current__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.75rem 0.5rem;
    background: var(--vm-bg-secondary);
    border-radius: var(--vm-radius-small);
    gap: 0.25rem;
}
.vm-ams-current__icon {
    font-size: 1.3rem;
    line-height: 1;
}
.vm-ams-current__label {
    font-size: 0.72rem;
    color: var(--vm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vm-ams-current__value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--vm-text-primary);
}
.vm-ams-current__value--temp {
    font-size: 1.15rem;
}
.vm-ams-current__note {
    margin: 0.75rem 0 0;
    font-size: 0.78rem;
    color: var(--vm-text-muted);
    text-align: center;
}
@media (max-width: 600px) {
    .vm-ams-current__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Compact Hero (non-GMS stanice) --- */
.vm-station-hero--compact {
    padding: 2rem;
}
.vm-station-hero--compact__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.vm-station-hero--compact__header .vm-station-hero__title {
    margin: 0 0 0.15rem;
}
.vm-station-hero--compact__network {
    font-size: 0.82rem;
    color: var(--vm-text-muted);
    margin: 0;
}
.vm-station-hero--compact .vm-station-hero__update {
    margin-top: 0;
    margin-bottom: 1.25rem;
    justify-content: flex-start;
    text-align: left;
}
.vm-station-hero--compact__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--vm-border-color);
}
.vm-measurement-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0.5rem;
    background: var(--vm-bg-secondary);
    border-radius: var(--vm-radius-small);
    gap: 0.35rem;
    transition: transform 0.15s ease;
}
.vm-measurement-card:hover {
    transform: translateY(-2px);
}
.vm-measurement-card--primary {
    background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(99,102,241,0.08) 100%);
    border: 1px solid rgba(59,130,246,0.15);
}
.vm-measurement-card--solar {
    background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(251,191,36,0.08) 100%);
    border: 1px solid rgba(245,158,11,0.15);
}
.vm-measurement-card__label {
    font-size: 0.72rem;
    color: var(--vm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.vm-measurement-card__value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--vm-text-primary);
}
.vm-measurement-card__value--large {
    font-size: 1.75rem;
    font-weight: 800;
}
@media (max-width: 768px) {
    .vm-station-hero--compact {
        padding: 1.25rem;
    }
    .vm-station-hero--compact__header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .vm-station-hero--compact .vm-station-hero__update {
        justify-content: center;
        text-align: center;
    }
    .vm-station-hero--compact__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .vm-station-hero--compact__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vm-measurement-card__value--large {
        font-size: 1.4rem;
    }
}
[data-theme="dark"] .vm-measurement-card {
    background: var(--vm-bg-tertiary);
}
[data-theme="dark"] .vm-measurement-card--primary {
    background: linear-gradient(135deg, rgba(59,130,246,0.12) 0%, rgba(99,102,241,0.12) 100%);
    border-color: rgba(59,130,246,0.2);
}
[data-theme="dark"] .vm-measurement-card--solar {
    background: linear-gradient(135deg, rgba(245,158,11,0.12) 0%, rgba(251,191,36,0.12) 100%);
    border-color: rgba(245,158,11,0.2);
}

/* --- Map Controls Label --- */
.vm-map-controls-label {
    font-size: 0.82rem;
    color: var(--vm-text-secondary);
    margin: 0 0 0.75rem 0;
    font-weight: 600;
    background: var(--vm-bg-secondary);
    padding: 0.5rem 0.85rem;
    border-radius: var(--vm-radius-small);
    border-left: 3px solid #3b82f6;
    line-height: 1.4;
}
[data-theme="dark"] .vm-map-controls-label {
    background: var(--vm-bg-tertiary);
    border-left-color: #60a5fa;
}

/* --- Station Info Card --- */
.vm-station-info-card {
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius);
    padding: 24px;
    margin: 24px 0;
}
.vm-station-info-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.vm-station-info-card__title svg {
    color: var(--vm-text-muted);
    flex-shrink: 0;
}
.vm-station-info-card__desc {
    color: var(--vm-text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 20px;
}
.vm-station-info-card__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}
.vm-station-info-card__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vm-station-info-card__label {
    font-size: 0.78rem;
    color: var(--vm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}
.vm-station-info-card__value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--vm-text-primary);
}

@media (max-width: 480px) {
    .vm-station-info-card {
        padding: 16px;
    }
    .vm-station-info-card__grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .vm-station-info-card__title {
        font-size: 1.05rem;
    }
    .vm-station-info-card__desc {
        font-size: 0.85rem;
    }
}

/* --- Forecast/Trend/Station article spacing below header --- */
.vm-forecast-article,
.vm-trend-article {
    margin-top: 32px;
}

/* --- Forecast Title --- */
.vm-forecast-title {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    margin: 0 0 1.25rem;
    padding-top: 0;
    padding-bottom: 16px;
    border-bottom: 3px solid #3b82f6;
    line-height: 1.2;
}
[data-theme="dark"] .vm-forecast-title {
    border-bottom-color: #60a5fa;
}
@media (max-width: 640px) {
    .vm-forecast-title {
        font-size: 1.5rem;
    }
}

/* --- Forecast Note & Disclaimer --- */
.vm-forecast-note {
    padding: 0.875rem 1.25rem;
    background: var(--vm-bg-secondary);
    border-left: 3px solid #3b82f6;
    border-radius: var(--vm-radius-small);
    font-size: 0.88rem;
    color: var(--vm-text-secondary);
    margin: 1rem 0 0.75rem;
}
.vm-forecast-note strong {
    color: var(--vm-text-primary);
}
.vm-forecast-disclaimer {
    padding: 0.875rem 1.25rem;
    background: var(--vm-bg-secondary);
    border-left: 3px solid #d97706;
    border-radius: var(--vm-radius-small);
    font-size: 0.85rem;
    color: var(--vm-text-muted);
    margin: 0 0 1rem;
    line-height: 1.6;
}
.vm-forecast-disclaimer a {
    color: #3b82f6;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.vm-forecast-disclaimer a:hover {
    color: #1d4ed8;
}

/* --- Forecast Intro --- */
.vm-forecast-intro {
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    background: var(--vm-bg-secondary);
    border-radius: var(--vm-radius);
    border-left: 4px solid #3b82f6;
}
.vm-forecast-intro p {
    margin: 0 0 0.5rem;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--vm-text-secondary);
}
.vm-forecast-intro p:last-child {
    margin-bottom: 0;
    font-size: 0.85rem;
    color: var(--vm-text-muted);
}

/* --- Crosslink Box (prognoza ↔ stanice) --- */
.vm-crosslink-box {
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius);
}
.vm-crosslink-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--vm-text-primary);
    margin: 0 0 1rem;
}
.vm-crosslink-title svg {
    flex-shrink: 0;
    color: #3b82f6;
}
.vm-crosslink-cards {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}
.vm-crosslink-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
    padding: 0.875rem 1rem;
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius-small);
    text-decoration: none;
    color: var(--vm-text-primary);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    flex: 1 1 0;
}
.vm-crosslink-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #3b82f6;
    text-decoration: none;
    color: var(--vm-text-primary);
}
.vm-crosslink-card__name {
    font-weight: 600;
    font-size: 0.95rem;
}
.vm-crosslink-card__type {
    font-size: 0.78rem;
    color: var(--vm-text-muted);
    background: var(--vm-bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    width: fit-content;
}
.vm-crosslink-card__dist {
    font-size: 0.82rem;
    color: var(--vm-text-secondary);
}
.vm-crosslink-card__dist::before {
    content: '↗ ';
}

[data-theme="dark"] .vm-crosslink-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@media (max-width: 640px) {
    .vm-crosslink-cards {
        flex-direction: column;
    }
    .vm-crosslink-card {
        min-width: unset;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .vm-crosslink-card__name {
        flex: 1;
    }
}

/* --- Source Tabs --- */
.vm-source-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.vm-source-tab {
    padding: 8px 16px;
    border: 2px solid var(--vm-border-color);
    border-radius: var(--vm-radius-small);
    background: var(--vm-card-bg);
    color: var(--vm-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.vm-source-tab:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}
.vm-source-tab--active {
    background: var(--vm-gradient-primary) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* --- Period Tabs --- */
.vm-period-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.vm-period-tab {
    padding: 6px 14px;
    border: 1px solid var(--vm-border-color);
    border-radius: 20px;
    background: var(--vm-card-bg);
    color: var(--vm-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.vm-period-tab:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}
.vm-period-tab--active {
    background: #3b82f6 !important;
    color: #fff !important;
    border-color: #3b82f6 !important;
}

/* --- Charts Grid --- */
.vm-station-charts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
    position: relative;
    min-height: 200px;
}
.vm-chart-card {
    background: var(--vm-card-bg);
    border-radius: var(--vm-radius);
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    border: 1px solid var(--vm-border-color);
}
.vm-chart-card__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--vm-text-secondary);
    margin: 0 0 0.75rem;
}
.vm-chart-card__canvas-wrap {
    position: relative;
    height: 250px;
}
.vm-chart-card__canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Wind Rose (polar chart) — spans full width, centered */
.vm-chart-card--wind-rose {
    grid-column: 1 / -1;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.vm-chart-card__canvas-wrap--polar {
    height: 340px;
}

/* --- Stats Cards --- */
.vm-station-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
.vm-stat-card {
    background: var(--vm-card-bg);
    border-radius: var(--vm-radius-small);
    padding: 1rem;
    text-align: center;
    border: 1px solid var(--vm-border-color);
}
.vm-stat-card__label {
    display: block;
    font-size: 0.75rem;
    color: var(--vm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}
.vm-stat-card__value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--vm-text-primary);
}

/* --- Data Table --- */
.vm-station-table-wrap {
    margin-bottom: 2rem;
}
.vm-station-table-wrap h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    margin: 0 0 0.75rem;
}
.vm-station-table-wrap .vm-scroll-wrapper {
    overflow-x: auto;
    position: relative;
    touch-action: pan-x pan-y;
}
/* Scroll hint — visible only on mobile when table overflows */
.vm-table-scroll-hint {
    display: none;
}
@media (max-width: 768px) {
    .vm-table-scroll-hint {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.4rem;
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--vm-text-muted);
        padding: 0.5rem 0.75rem 0.25rem;
        animation: vm-hint-nudge 1.8s ease-in-out infinite;
    }
    .vm-table-scroll-hint svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
    @keyframes vm-hint-nudge {
        0%, 100% { transform: translateX(0); opacity: 0.7; }
        50% { transform: translateX(6px); opacity: 1; }
    }
}
.vm-station-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.vm-station-table th,
.vm-station-table td {
    padding: 0.6rem 0.75rem;
    text-align: center;
    border-bottom: 1px solid var(--vm-border-color);
}
.vm-station-table th {
    background: var(--vm-bg-secondary);
    font-weight: 600;
    color: var(--vm-text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    position: sticky;
    top: 0;
}
.vm-station-table td {
    color: var(--vm-text-primary);
}
.vm-station-table tbody tr:hover {
    background: var(--vm-bg-secondary);
}
.vm-station-table__loading {
    text-align: center;
    color: var(--vm-text-muted);
    padding: 2rem !important;
}
/* Table date (secondary info below time) */
.vm-table-date {
    display: block;
    font-size: 0.7rem;
    color: var(--vm-text-muted);
    font-weight: 400;
}
/* Table header abbreviation — show short labels on mobile */
.vm-th-short { display: none; }
.vm-th-full { display: inline; }
/* Mobile table: fit in viewport without horizontal scroll */
@media (max-width: 768px) {
    .vm-th-short { display: inline; }
    .vm-th-full { display: none; }
    .vm-station-table {
        font-size: 0.72rem;
        min-width: 0;
        width: 100%;
        table-layout: auto;
    }
    .vm-station-table th,
    .vm-station-table td {
        padding: 0.35rem 0.25rem;
        white-space: nowrap;
    }
    .vm-station-table th {
        font-size: 0.62rem;
        letter-spacing: 0;
    }
}
@media (max-width: 480px) {
    .vm-station-table {
        font-size: 0.65rem;
    }
    .vm-station-table th,
    .vm-station-table td {
        padding: 0.3rem 0.15rem;
    }
    .vm-station-table th {
        font-size: 0.58rem;
    }
}

/* --- Mini Map --- */
.vm-station-minimap-wrap {
    margin-bottom: 2rem;
}
.vm-station-minimap-wrap h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    margin: 0 0 0.75rem;
}
.vm-station-minimap {
    height: 300px;
    border-radius: var(--vm-radius);
    overflow: hidden;
    border: 1px solid var(--vm-border-color);
}

/* --- Minimap Dynamic Info Circle --- */
.vm-minimap-marker-wrapper {
    background: none !important;
    border: none !important;
}
.vm-minimap-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 0 0 3px rgba(255,255,255,0.7);
    transition: background 0.5s ease;
    cursor: pointer;
}
.vm-minimap-circle__value {
    transition: opacity 0.3s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    white-space: nowrap;
}
[data-theme="dark"] .vm-minimap-circle {
    box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 0 3px rgba(255,255,255,0.2);
}

/* --- Related Stations --- */
.vm-station-related h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    margin: 0 0 0.75rem;
}
.vm-station-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}
.vm-station-related__card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius-small);
    text-decoration: none !important;
    color: var(--vm-text-primary) !important;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s;
    --theme-link-initial-color: var(--vm-text-primary);
    --theme-link-hover-color: var(--vm-text-primary);
}
.vm-station-related__card:hover {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}
.vm-station-related__alt {
    font-size: 0.75rem;
    color: var(--vm-text-muted);
    font-weight: 400;
}

/* =========================================
   OVERVIEW PAGE - /stanice/
   ========================================= */

.vm-stations-overview__title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--vm-text-primary);
    margin: 1.5rem 0 0.5rem;
}
.vm-stations-overview__desc {
    color: var(--vm-text-secondary);
    margin-bottom: 1.5rem;
    font-size: 0.92rem;
    line-height: 1.6;
}
.vm-stations-overview__desc p {
    margin: 0 0 0.5rem;
}
.vm-stations-overview__desc p:last-child {
    margin-bottom: 0;
}

/* Freshness dot indicator */
.vm-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
}
.vm-dot--fresh {
    background: #10b981;
    box-shadow: 0 0 4px rgba(16, 185, 129, 0.5);
}
.vm-dot--stale {
    background: #f59e0b;
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.4);
}

/* Station card update time in footer */
.vm-station-card__update {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: var(--vm-text-muted);
    font-weight: 600;
}

/* Parameter Selector */
.vm-param-selector {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.vm-param-btn {
    padding: 6px 14px;
    border: 1px solid var(--vm-border-color);
    border-radius: 20px;
    background: var(--vm-card-bg);
    color: var(--vm-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.vm-param-btn:hover {
    border-color: #3b82f6;
}
.vm-param-btn--active {
    background: #3b82f6 !important;
    color: #fff !important;
    border-color: #3b82f6 !important;
}

/* Overview Map */
.vm-stations-map {
    height: 450px;
    border-radius: var(--vm-radius);
    overflow: hidden;
    border: 1px solid var(--vm-border-color);
    margin-bottom: 0.5rem;
}
/* Info bar ispod mape — stilizovana kartica sa freshness */
.vm-map-obs-time {
    text-align: center;
    font-size: 0.78rem;
    color: var(--vm-text-secondary);
    padding: 8px 16px;
    margin-bottom: 1rem;
    font-weight: 500;
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius-small);
}
.vm-map-obs-time:empty { display: none !important; }
.vm-obs-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.vm-obs-dot--fresh { background: #22c55e; box-shadow: 0 0 4px rgba(34,197,94,0.5); }
.vm-obs-dot--recent { background: #eab308; }
.vm-obs-dot--stale { background: #ef4444; }

/* Interpolacija pill dugmad */
.vm-interp-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
    justify-content: center;
}
.vm-interp-btn {
    padding: 6px 14px;
    border: 1px solid var(--vm-border-color);
    border-radius: 999px;
    background: var(--vm-bg-primary);
    color: var(--vm-text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.vm-interp-btn:hover {
    background: var(--vm-bg-secondary);
    border-color: #3b82f6;
    color: var(--vm-text-primary);
}
.vm-interp-btn--active {
    background: #3b82f6 !important;
    color: #fff !important;
    border-color: #3b82f6 !important;
}

/* Objašnjenje interpolacije */
.vm-interp-explainer {
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    border-left: 3px solid #3b82f6;
    border-radius: var(--vm-radius-small);
    padding: 10px 14px;
    margin-bottom: 1rem;
    font-size: 0.76rem;
    color: var(--vm-text-muted);
    line-height: 1.5;
}
.vm-interp-explainer p { margin: 0; }

/* ========================
   Heatmap Controls
   ======================== */
.vm-heatmap-controls {
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius-small);
    padding: 12px 16px;
    margin-bottom: 1rem;
}
.vm-heatmap-controls__row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.vm-heatmap-controls__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vm-text-secondary);
    white-space: nowrap;
}
.vm-heatmap-controls__slider {
    flex: 1;
    max-width: 200px;
    accent-color: #3b82f6;
}
.vm-heatmap-controls__val {
    font-size: 0.78rem;
    color: var(--vm-text-muted);
    min-width: 32px;
}

/* Heatmap Legend */
.vm-heatmap-legend__bar {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    height: 22px;
}
.vm-heatmap-legend__seg {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-heatmap-legend__seg span {
    font-size: 0.68rem;
    font-weight: 600;
    color: #1e293b;
    text-shadow: 0 0 3px rgba(255,255,255,0.8);
}
.vm-heatmap-legend__unit {
    text-align: right;
    font-size: 0.72rem;
    color: var(--vm-text-muted);
    margin-top: 3px;
}

/* Heatmap Info */
.vm-heatmap-info {
    font-size: 0.76rem;
    color: var(--vm-text-muted);
    margin-top: 8px;
    text-align: center;
}

/* Map Download Button (Leaflet control) */
.vm-map-download-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.92);
    border: 2px solid rgba(0,0,0,0.2);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    transition: background 0.2s, box-shadow 0.2s;
    line-height: 1;
}
.vm-map-download-btn:hover {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.vm-map-download-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}
.vm-map-download-btn svg {
    flex-shrink: 0;
}
[data-theme="dark"] .vm-map-download-btn {
    background: rgba(30,41,59,0.92);
    color: #e2e8f0;
    border-color: rgba(255,255,255,0.15);
}
[data-theme="dark"] .vm-map-download-btn:hover {
    background: rgba(51,65,85,0.95);
}

/* Heatmap IDW popup */
.vm-heatmap-popup .leaflet-popup-content-wrapper {
    background: rgba(15, 23, 42, 0.88);
    color: #f8fafc;
    border-radius: 6px;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.vm-heatmap-popup .leaflet-popup-content {
    margin: 6px 10px;
    line-height: 1.4;
}
.vm-heatmap-popup .leaflet-popup-tip {
    background: rgba(15, 23, 42, 0.88);
}
.vm-heatmap-popup small {
    font-weight: 400;
    opacity: 0.7;
}

/* Dark mode */
[data-theme="dark"] .vm-heatmap-legend__seg span {
    color: #f1f5f9;
    text-shadow: 0 0 3px rgba(0,0,0,0.8);
}

/* ========================
   Grouped Stations by Region
   ======================== */
.vm-stations-grouped {
    margin-top: 8px;
}
.vm-station-group {
    margin-bottom: 32px;
}
.vm-station-group__header {
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius);
    padding: 14px 20px;
    margin-bottom: 16px;
}
.vm-station-group__title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.vm-station-group__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    color: var(--vm-text-primary);
}
.vm-station-group__count {
    font-size: 0.75rem;
    color: var(--vm-text-muted);
    white-space: nowrap;
}
.vm-station-group__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--vm-border-color);
    font-size: 0.88rem;
    color: var(--vm-text-secondary);
}
.vm-station-group__stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.vm-station-group__stat-label {
    font-size: 0.82rem;
}
.vm-station-group__stat-min {
    color: #3b82f6;
    font-weight: 600;
}
.vm-station-group__stat-max {
    color: #ef4444;
    font-weight: 600;
}
.vm-station-group__stat-sep {
    color: var(--vm-text-muted);
    margin: 0 2px;
}
.vm-station-group__stat-avg {
    color: var(--vm-text-muted);
    font-size: 0.8rem;
    margin-left: 2px;
}
.vm-station-group__desc {
    font-size: 0.82rem;
    color: var(--vm-text-muted);
    margin: 6px 0 0;
    line-height: 1.45;
}

/* Station Cards Grid */
.vm-station-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.vm-station-card {
    display: flex;
    flex-direction: column;
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius);
    padding: 1.25rem;
    text-decoration: none !important;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    /* Override Blocksy link color variables within card context */
    --theme-link-initial-color: var(--vm-text-primary);
    --theme-link-hover-color: var(--vm-text-primary);
    color: var(--vm-text-primary) !important;
}
a.vm-station-card:hover,
a.vm-station-card:focus,
a.vm-station-card:visited,
a.vm-station-card:active {
    color: var(--vm-text-primary) !important;
    text-decoration: none !important;
}
.vm-station-card:hover {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}
.vm-station-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}
.vm-station-card__name {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--vm-text-primary);
}
.vm-station-card__badges {
    display: flex;
    gap: 0.25rem;
}
.vm-station-card__data {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.vm-station-card__temp {
    font-size: 2rem;
    font-weight: 800;
    color: var(--vm-text-primary);
    line-height: 1;
}
.vm-station-card__temp--na {
    color: var(--vm-text-muted);
}
.vm-station-card__details {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.82rem;
    color: var(--vm-text-secondary);
}
.vm-station-card__condition {
    font-size: 0.82rem;
    color: var(--vm-text-muted);
    margin-bottom: 0.5rem;
}
.vm-station-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--vm-border-color);
}
.vm-station-card__alt {
    font-size: 0.75rem;
    color: var(--vm-text-muted);
}
.vm-station-card__arrow {
    color: #3b82f6;
    font-size: 1.2rem;
}
.vm-station-card__source {
    font-size: 0.7rem;
    color: var(--vm-text-muted);
    background: var(--vm-bg-secondary);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
}

/* Map Source Selector — Segmented Control */
.vm-segmented-control {
    display: inline-flex;
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius-small);
    overflow: hidden;
    margin-bottom: 0.75rem;
}
.vm-segmented-control .vm-map-source-btn {
    border: none;
    border-radius: 0;
    border-right: 1px solid var(--vm-border-color);
    background: var(--vm-card-bg);
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--vm-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.vm-segmented-control .vm-map-source-btn:last-child {
    border-right: none;
}
.vm-segmented-control .vm-map-source-btn--active {
    background: #3b82f6 !important;
    color: #fff !important;
}
.vm-segmented-control .vm-map-source-btn:hover:not(.vm-map-source-btn--active) {
    background: var(--vm-bg-secondary);
}
[data-theme="dark"] .vm-segmented-control {
    border-color: var(--vm-border-color);
}
[data-theme="dark"] .vm-segmented-control .vm-map-source-btn {
    background: var(--vm-bg-secondary);
    border-color: var(--vm-border-color);
    color: var(--vm-text-secondary);
}

/* Parameter Bar — Wrapper with z-index above Leaflet map */
.vm-param-bar-wrapper {
    position: relative;
    z-index: 600;
}

/* Parameter Bar — Sections with Dropdowns */
.vm-param-bar {
    display: flex;
    align-items: center;
    gap: 0;
    overflow: visible;
    margin-bottom: 0.75rem;
    padding: 4px 0;
    position: relative;
}
.vm-param-bar__divider {
    width: 1px;
    height: 28px;
    background: var(--vm-border-color);
    flex-shrink: 0;
}
.vm-param-section {
    position: relative;
    flex-shrink: 0;
}
.vm-param-section__trigger {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--vm-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    border-radius: var(--vm-radius-small);
    transition: background 0.15s, color 0.15s;
}
.vm-param-section__trigger:hover {
    background: var(--vm-bg-secondary);
}
.vm-param-section__trigger--active {
    color: #2563eb;
}
.vm-param-section__trigger svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.vm-param-section__arrow {
    font-size: 0.85em;
    opacity: 0.6;
    margin-left: 2px;
    font-weight: 700;
}
.vm-param-section__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 150px;
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius-small);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 10000;
    padding: 5px;
}
.vm-param-section--open .vm-param-section__menu {
    display: block;
}
.vm-param-menu-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    padding: 9px 14px;
    font-size: 0.88rem;
    font-weight: 500;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--vm-text-primary);
    cursor: pointer;
    white-space: nowrap;
}
.vm-param-menu-item small {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--vm-text-muted);
    white-space: nowrap;
}
.vm-param-menu-item:hover {
    background: var(--vm-bg-secondary);
}
.vm-param-menu-item--active {
    color: #2563eb;
    background: rgba(37,99,235,0.08);
    font-weight: 600;
}
[data-theme="dark"] .vm-param-section__menu {
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

/* Mobile: param bar — all visible, flex-wrap compact chips */
@media (max-width: 768px) {
    .vm-param-bar {
        flex-wrap: wrap;
        gap: 6px;
        padding: 0;
    }
    .vm-param-bar__divider {
        display: none;
    }
    .vm-param-section {
        flex-shrink: 1;
    }
    .vm-param-section__trigger {
        padding: 6px 10px;
        font-size: 0.8rem;
        gap: 4px;
        background: var(--vm-bg-secondary);
        border-radius: 6px;
        border: 1px solid var(--vm-border-color);
    }
    .vm-param-section__trigger--active {
        background: rgba(37,99,235,0.1);
        border-color: #3b82f6;
    }
    .vm-param-section__trigger svg {
        width: 14px;
        height: 14px;
    }
    .vm-param-section__arrow {
        font-size: 0.7em;
        margin-left: 0;
    }
    /* Segmented control full width on mobile */
    .vm-segmented-control {
        display: flex;
        width: 100%;
    }
    .vm-segmented-control .vm-map-source-btn {
        flex: 1;
        text-align: center;
        padding: 0.5rem 0.5rem;
        font-size: 0.82rem;
    }
}
@media (max-width: 420px) {
    .vm-param-section__trigger {
        padding: 5px 8px;
        font-size: 0.75rem;
    }
    .vm-param-section__trigger svg {
        display: none;
    }
}

/* Mobile touch scrolling — prevent Chart.js / Leaflet from blocking page scroll */
.vm-station-charts,
.vm-chart-card,
.vm-chart-card__canvas-wrap,
.vm-chart-card__canvas-wrap canvas {
    touch-action: pan-y !important;
}
.vm-station-table-wrap,
.vm-station-table-wrap table {
    touch-action: pan-x pan-y !important;
}
/* Leaflet map on station pages — allow page scroll */
.vm-stations-map {
    touch-action: pan-y pinch-zoom;
}
.vm-station-minimap {
    touch-action: pan-y pinch-zoom;
}

/* Loading Indicator — overlay inside .vm-station-charts to prevent CLS */
.vm-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--vm-text-secondary);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--vm-radius);
    grid-column: 1 / -1;
}
[data-theme="dark"] .vm-loading {
    background: rgba(15, 23, 42, 0.85);
}
.vm-loading__spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--vm-border-color);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: vm-spin 0.8s linear infinite;
}
@keyframes vm-spin { to { transform: rotate(360deg); } }
.vm-no-data {
    text-align: center;
    padding: 2rem;
    color: var(--vm-text-secondary);
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius);
    margin-bottom: 1.5rem;
    grid-column: 1 / -1;
}

/* Map Markers — circular colored markers on Leaflet map */
.vm-map-marker-wrapper {
    background: transparent !important;
    border: none !important;
}
.vm-map-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(255, 255, 255, 0.8);
    transition: transform 0.15s;
    cursor: pointer;
}
/* Precip-only markers (padavinske/klimatološke) — dashed border to distinguish from GMS */
.vm-precip-only-icon .vm-map-marker {
    border-style: dashed;
}
/* Condition marker — weather icon + temp */
.vm-map-marker--condition {
    border-radius: var(--vm-radius-small);
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    flex-direction: column;
    gap: 1px;
    width: 48px !important;
    height: 48px !important;
    padding: 3px;
}
/* Wind direction marker — arrow + compass label */
.vm-map-marker--wind-dir {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid var(--vm-border-color);
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50%;
    gap: 0;
    padding: 2px;
}
.vm-map-marker__dir-label {
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1;
    margin-top: -2px;
    color: #1e293b;
}
.vm-map-marker__icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.vm-map-marker__temp {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    line-height: 1;
}
/* MarkerCluster — averaged station groups */
.vm-map-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font: 700 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    border: 2.5px solid rgba(255,255,255,0.7);
    position: relative;
    cursor: pointer;
    transition: transform 0.15s;
}
.vm-map-cluster:hover { transform: scale(1.1); }
.vm-map-cluster--avg { flex-direction: column; gap: 1px; width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
.vm-map-cluster__val { font-size: 11px; font-weight: 800; z-index: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.vm-map-cluster__count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #1e293b;
    color: #fff;
    font: 600 9px/1 -apple-system, BlinkMacSystemFont, sans-serif;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255,255,255,0.8);
    z-index: 2;
}
.vm-map-cluster--count {
    background: var(--vm-bg-tertiary, #e2e8f0);
    color: var(--vm-text-primary, #0f172a);
    width: 40px;
    height: 40px;
    font-size: 14px;
    font-weight: 700;
}
.vm-map-cluster--nodata {
    background: var(--vm-bg-secondary, #f1f5f9);
    color: var(--vm-text-muted, #64748b);
    width: 40px;
    height: 40px;
    font-size: 16px;
}
[data-theme="dark"] .vm-map-cluster__count { background: #475569; }
[data-theme="dark"] .vm-map-cluster--count { background: var(--vm-bg-tertiary); color: var(--vm-text-primary); }
[data-theme="dark"] .vm-map-cluster--nodata { background: var(--vm-bg-secondary); }
/* Override default MarkerCluster styles */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: transparent !important; }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background: transparent !important; }

.vm-map-popup__row--condition {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Tooltip wrapper — wraps the map container, allows tooltip overflow */
.vm-map-tooltip-wrapper {
    position: relative;
    overflow: visible;
}

/* Custom floating tooltip (replaces Leaflet popup — always stays within map bounds) */
.vm-map-tooltip {
    position: absolute;
    z-index: 1000;
    background: var(--vm-card-bg, #ffffff);
    border-radius: var(--vm-radius-small, 8px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
    max-width: 270px;
    min-width: 180px;
    pointer-events: auto;
    animation: vmTooltipIn 0.15s ease-out;
}
@keyframes vmTooltipIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
/* Arrow pseudo-element */
.vm-map-tooltip::after {
    content: '';
    position: absolute;
    left: var(--arrow-left, 50%);
    transform: translateX(-50%);
    border: 8px solid transparent;
}
/* Arrow pointing DOWN (tooltip is ABOVE marker) */
.vm-map-tooltip[data-arrow="down"]::after {
    bottom: -16px;
    border-top-color: var(--vm-card-bg, #ffffff);
}
/* Arrow pointing UP (tooltip is BELOW marker) */
.vm-map-tooltip[data-arrow="up"]::after {
    top: -16px;
    border-bottom-color: var(--vm-card-bg, #ffffff);
}
/* Close button */
.vm-map-tooltip__close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--vm-text-muted, #64748b);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s;
}
.vm-map-tooltip__close:hover {
    background: var(--vm-bg-secondary, #f1f5f9);
    color: var(--vm-text-primary, #0f172a);
}

/* Reuse existing popup inner styles */
.vm-map-popup {
    padding: 0.85rem 1rem;
    font-family: inherit;
}
.vm-map-popup__name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    margin-bottom: 0.15rem;
}
.vm-map-popup__alt {
    font-size: 0.75rem;
    color: var(--vm-text-muted);
    margin-bottom: 0.35rem;
}
.vm-map-popup__sources {
    font-size: 0.72rem;
    color: var(--vm-text-muted);
    margin-bottom: 0.5rem;
}
.vm-map-popup__data {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}
.vm-map-popup__row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    gap: 1rem;
}
.vm-map-popup__label {
    color: var(--vm-text-secondary);
}
.vm-map-popup__value {
    font-weight: 600;
    color: var(--vm-text-primary);
}
.vm-map-popup__link {
    display: block;
    text-align: center;
    padding: 0.4rem;
    margin-top: 0.25rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #3b82f6;
    text-decoration: none;
    border-top: 1px solid var(--vm-border-color);
}
.vm-map-popup__link:hover {
    color: #2563eb;
}

/* Dark mode tooltip + markers */
[data-theme="dark"] .vm-map-tooltip {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .vm-map-tooltip__close:hover {
    background: var(--vm-bg-tertiary);
}
[data-theme="dark"] .vm-map-marker {
    border-color: rgba(255, 255, 255, 0.4);
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 768px) {
    .vm-station-hero {
        padding: 1.25rem;
    }
    .vm-station-hero__main {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.75rem;
    }
    .vm-station-hero__temp {
        font-size: 2.5rem;
    }
    .vm-station-hero__title {
        font-size: 1.4rem;
        text-align: center;
    }
    .vm-station-hero__badges {
        justify-content: center;
    }
    .vm-station-hero__update {
        text-align: center;
        justify-content: center;
    }
    .vm-station-hero__details {
        grid-template-columns: repeat(2, 1fr);
    }
    .vm-station-charts {
        grid-template-columns: 1fr;
    }
    .vm-station-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .vm-stations-map {
        height: 400px;
    }
    .vm-station-minimap {
        height: 220px;
    }
    .vm-station-grid {
        grid-template-columns: 1fr;
    }
    .vm-station-group__header {
        padding: 12px 16px;
    }
    .vm-station-group__title {
        font-size: 1rem;
    }
    .vm-station-group__desc {
        display: none;
    }
    .vm-station-group__stats {
        gap: 12px;
        font-size: 0.82rem;
    }
}

@media (max-width: 480px) {
    .vm-station-group {
        margin-bottom: 24px;
    }
    .vm-station-group__header {
        padding: 10px 14px;
    }
    .vm-station-group__stats {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .vm-station-hero__details {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    .vm-source-tabs,
    .vm-period-tabs,
    .vm-param-selector {
        gap: 0.35rem;
    }
    .vm-source-tab,
    .vm-period-tab,
    .vm-map-source-btn {
        padding: 5px 10px;
        font-size: 0.78rem;
    }
    .vm-source-tab--active,
    .vm-period-tab--active,
    .vm-map-source-btn--active {
        color: #fff !important;
    }
    .vm-chart-card__canvas-wrap {
        height: 200px;
    }
    .vm-chart-card--wind-rose {
        max-width: 100%;
    }
    .vm-chart-card__canvas-wrap--polar {
        height: 260px;
    }
}

/* =========================================
   DARK MODE
   ========================================= */

[data-theme="dark"] .vm-station-hero,
[data-theme="dark"] .vm-chart-card,
[data-theme="dark"] .vm-stat-card,
[data-theme="dark"] .vm-station-card,
[data-theme="dark"] .vm-station-related__card,
[data-theme="dark"] .vm-ams-current {
    background: var(--vm-card-bg);
    border-color: var(--vm-border-color);
}
[data-theme="dark"] .vm-ams-current__card {
    background: var(--vm-bg-tertiary);
}

[data-theme="dark"] .vm-source-tab {
    background: var(--vm-bg-secondary);
    border-color: var(--vm-border-color);
    color: var(--vm-text-secondary);
}
[data-theme="dark"] .vm-source-tab--active {
    background: var(--vm-gradient-primary) !important;
    color: #fff !important;
    border-color: transparent !important;
}

[data-theme="dark"] .vm-period-tab {
    background: var(--vm-bg-secondary);
    border-color: var(--vm-border-color);
    color: var(--vm-text-secondary);
}
[data-theme="dark"] .vm-period-tab--active {
    background: #3b82f6 !important;
    color: #fff !important;
    border-color: #3b82f6 !important;
}
[data-theme="dark"] .vm-param-section__trigger {
    color: var(--vm-text-secondary);
}
[data-theme="dark"] .vm-param-section__trigger:hover {
    background: var(--vm-bg-tertiary);
}
[data-theme="dark"] .vm-param-section__trigger--active {
    color: #60a5fa;
}
[data-theme="dark"] .vm-param-menu-item {
    color: var(--vm-text-primary);
}
[data-theme="dark"] .vm-param-menu-item:hover {
    background: var(--vm-bg-tertiary);
}
[data-theme="dark"] .vm-param-menu-item--active {
    color: #60a5fa;
    background: rgba(96,165,250,0.12);
}

[data-theme="dark"] .vm-map-source-btn {
    background: var(--vm-bg-secondary);
    border-color: var(--vm-border-color);
    color: var(--vm-text-secondary);
}
[data-theme="dark"] .vm-map-source-btn--active {
    background: var(--vm-gradient-primary) !important;
    color: #fff !important;
    border-color: transparent !important;
}
[data-theme="dark"] .vm-map-marker--condition {
    background: var(--vm-card-bg);
    border-color: var(--vm-border-color);
}
[data-theme="dark"] .vm-map-marker--wind-dir {
    background: rgba(30, 41, 59, 0.92) !important;
    border-color: var(--vm-border-color);
}
[data-theme="dark"] .vm-map-marker__dir-label {
    color: #e2e8f0;
}
[data-theme="dark"] .vm-no-data {
    background: var(--vm-card-bg);
    border-color: var(--vm-border-color);
}

[data-theme="dark"] .vm-station-table th {
    background: var(--vm-bg-tertiary);
}

[data-theme="dark"] .vm-station-card:hover {
    border-color: rgba(96, 165, 250, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] a.vm-station-card,
[data-theme="dark"] a.vm-station-card:hover,
[data-theme="dark"] a.vm-station-card:visited,
[data-theme="dark"] a.vm-station-card:active {
    color: var(--vm-text-primary) !important;
}

/* ========================================================================
   GOLUBARSKA PROGNOZA (v1.0)
   ======================================================================== */

/* Page wrapper */
.vm-gol-page {
    max-width: 100%;
    margin: 0 auto;
}

/* ── Header ── */
/* ── Intro section — dark-mode aware ── */
.vm-gol-intro {
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius);
    padding: 20px 24px;
    margin-bottom: 1.5rem;
}
.vm-gol-intro__title {
    margin: 0 0 12px;
    font-size: 0.9rem;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.06em;
    color: var(--vm-text-primary);
}
.vm-gol-intro__lead {
    margin: 0 0 16px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--vm-text-secondary);
    text-align: center;
}
.vm-gol-intro__features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px;
}
.vm-gol-intro__feature {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius-small);
    border-left: 3px solid #3b82f6;
}
.vm-gol-intro__feature-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    line-height: 1;
}
.vm-gol-intro__feature strong {
    display: block;
    font-size: 0.82rem;
    color: var(--vm-text-primary);
    margin-bottom: 2px;
}
.vm-gol-intro__feature span {
    display: block;
    font-size: 0.75rem;
    color: var(--vm-text-muted);
    line-height: 1.4;
}
@media (max-width: 768px) {
    .vm-gol-intro {
        padding: 14px 16px;
    }
    .vm-gol-intro__features {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* ── v4.0 Bento Grid Header ── */
.vm-gol-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #1e3a5f 100%);
    border-radius: var(--vm-radius);
    padding: 16px;
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: stretch;
    color: #fff;
    box-shadow: 0 4px 20px rgba(15,23,42,0.25);
}

/* ── Title cell (spans most of the width) ── */
.vm-gol-header__title-zone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 8px 4px;
}
.vm-gol-header__region {
    margin: 0;
    font-size: clamp(1.44rem, 5vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}
.vm-gol-header__cities {
    margin: 0;
    font-size: 1.23rem;
    font-weight: 400;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.01em;
}
/* Ažurirano info — inline below cities */
.vm-gol-header__updated {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.vm-gol-header__updated-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.45);
    font-weight: 600;
}
.vm-gol-header__updated-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
}

/* ── Stat cells (countdown + freshness) ── */
.vm-gol-header__stat {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--vm-radius-small);
    padding: 12px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 110px;
}
.vm-gol-header__stat-label {
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.5);
}
.vm-gol-header__stat-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}
.vm-gol-header__stat-sep {
    color: rgba(255,255,255,0.3);
    margin: 0 3px;
}
.vm-gol-header__stat-countdown {
    color: #f87171;
    font-size: 0.72rem;
    font-weight: 600;
}

/* ── Dark mode ── */
[data-theme="dark"] .vm-gol-header {
    background: linear-gradient(135deg, #020617 0%, #0f172a 40%, #1e293b 100%);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* ── Freshness dots (kept from v2) ── */
.vm-gol-freshness-dots {
    display: flex;
    gap: 3px;
    justify-content: center;
    margin: 2px 0;
}
.vm-gol-freshness-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: background 0.3s, box-shadow 0.3s;
}
.vm-gol-freshness-dot--active { background: #22c55e; }
.vm-gol-freshness-dot--active.vm-gol-freshness-dot--fresh { background: #22c55e; box-shadow: 0 0 4px rgba(34, 197, 94, 0.5); animation: vm-gol-fresh-pulse 2s ease-in-out infinite; }
@keyframes vm-gol-fresh-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(34, 197, 94, 0.5); }
    50% { box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.6); }
}
.vm-gol-freshness-dot--active.vm-gol-freshness-dot--moderate { background: #f59e0b; box-shadow: 0 0 4px rgba(245, 158, 11, 0.5); }
.vm-gol-freshness-dot--active.vm-gol-freshness-dot--stale { background: #ef4444; box-shadow: 0 0 4px rgba(239, 68, 68, 0.5); }
.vm-gol-freshness-dot--inactive { background: var(--vm-border-color); }

/* Freshness card level coloring */
.vm-gol-freshness--fresh { border-color: rgba(34, 197, 94, 0.5) !important; }
.vm-gol-freshness--moderate { border-color: rgba(245, 158, 11, 0.5) !important; }
.vm-gol-freshness--stale { border-color: rgba(239, 68, 68, 0.5) !important; }

.vm-gol-age--fresh { color: #22c55e !important; }
.vm-gol-age--moderate { color: #f59e0b !important; }
.vm-gol-age--stale { color: #ef4444 !important; }

/* Legacy: countdown circle (hidden in v3, kept for JS compat) */
.vm-gol-countdown-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: conic-gradient(#3498db 0deg, rgba(255, 255, 255, 0.2) 0deg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 4px;
    position: relative;
}

.vm-gol-countdown-circle::before {
    content: '';
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
}

.vm-gol-countdown-circle__time {
    position: relative;
    z-index: 1;
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* Freshness dots */
.vm-gol-freshness-dots {
    display: flex;
    gap: 3px;
    justify-content: center;
    margin: 4px 0;
}

.vm-gol-freshness-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: background 0.3s, box-shadow 0.3s;
}

.vm-gol-freshness-dot--active { background: #22c55e; }
.vm-gol-freshness-dot--active.vm-gol-freshness-dot--fresh { background: #22c55e; box-shadow: 0 0 4px rgba(34, 197, 94, 0.5); animation: vm-gol-fresh-pulse 2s ease-in-out infinite; }
@keyframes vm-gol-fresh-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(34, 197, 94, 0.5); }
    50% { box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.6); }
}
.vm-gol-freshness-dot--active.vm-gol-freshness-dot--moderate { background: #f59e0b; box-shadow: 0 0 4px rgba(245, 158, 11, 0.5); }
.vm-gol-freshness-dot--active.vm-gol-freshness-dot--stale { background: #ef4444; box-shadow: 0 0 4px rgba(239, 68, 68, 0.5); }
.vm-gol-freshness-dot--inactive { background: rgba(255, 255, 255, 0.15); }

/* Freshness card level coloring */
.vm-gol-freshness--fresh { border-color: rgba(34, 197, 94, 0.5) !important; }
.vm-gol-freshness--moderate { border-color: rgba(245, 158, 11, 0.5) !important; }
.vm-gol-freshness--stale { border-color: rgba(239, 68, 68, 0.5) !important; }

.vm-gol-age--fresh { color: #22c55e !important; }
.vm-gol-age--moderate { color: #f59e0b !important; }
.vm-gol-age--stale { color: #ef4444 !important; }

/* ── Controls ── */
.vm-gol-controls {
    margin-bottom: 1.5rem;
    overflow: visible !important;
}

.vm-gol-controls__row {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
}

.vm-gol-region-wrap {
    width: 100%;
    overflow: visible !important;
}

.vm-gol-region-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--vm-text-secondary);
    margin-bottom: 6px;
}

/* Custom region dropdown */
.vm-gol-region-dropdown {
    position: relative;
    width: 100%;
}

.vm-gol-region-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 2px solid var(--vm-border-color);
    border-radius: var(--vm-radius-small);
    background: var(--vm-card-bg);
    color: var(--vm-text-primary);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
    text-align: left;
}

.vm-gol-region-trigger:hover {
    border-color: #3b82f6;
}

.vm-gol-region-dropdown--open .vm-gol-region-trigger {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.vm-gol-region-trigger__chevron {
    flex-shrink: 0;
    transition: transform 0.2s;
    color: var(--vm-text-muted);
}

.vm-gol-region-dropdown--open .vm-gol-region-trigger__chevron {
    transform: rotate(180deg);
}

.vm-gol-region-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--vm-card-bg);
    border: 2px solid var(--vm-border-color);
    border-radius: var(--vm-radius-small);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 100;
    max-height: 380px;
    overflow: hidden;
    display: none;
}

.vm-gol-region-search-wrap {
    position: relative;
    padding: 8px;
    border-bottom: 1px solid var(--vm-border-color);
}

.vm-gol-region-search__icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vm-text-muted);
    pointer-events: none;
    width: 16px;
    height: 16px;
    z-index: 1;
}

.vm-gol-region-search {
    width: 100%;
    padding: 10px 12px 10px 46px !important;
    font-size: 0.82rem;
    border: 1px solid var(--vm-border-color);
    border-radius: 6px;
    background: var(--vm-bg-secondary);
    color: var(--vm-text-primary);
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}

.vm-gol-region-search:focus {
    border-color: #3b82f6;
    background: var(--vm-card-bg);
}

.vm-gol-region-groups {
    max-height: 310px;
    overflow-y: auto;
    padding: 4px 0;
}

.vm-gol-region-group__label {
    padding: 10px 12px 5px;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--vm-text-secondary);
    user-select: none;
    border-bottom: 1px solid var(--vm-border-color);
    margin-bottom: 2px;
}

.vm-gol-region-group + .vm-gol-region-group {
    margin-top: 4px;
}

.vm-gol-region-option {
    display: block;
    width: 100%;
    padding: 8px 12px 8px 20px;
    font-size: 0.85rem;
    text-align: left;
    background: none;
    border: none;
    color: var(--vm-text-primary);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.vm-gol-region-option:hover,
.vm-gol-region-option:focus {
    background: var(--vm-bg-secondary);
    outline: none;
}

.vm-gol-region-option--active {
    color: #3b82f6;
    font-weight: 700;
    background: rgba(59, 130, 246, 0.08);
}

.vm-gol-region-option--active:hover {
    background: rgba(59, 130, 246, 0.12);
}

.vm-gol-region-option__num {
    display: inline-block;
    font-weight: 800;
    font-size: 0.78rem;
    color: #3b82f6;
    min-width: 28px;
}

.vm-gol-region-option__cities {
    display: block;
    font-size: 0.72rem;
    color: var(--vm-text-muted);
    font-weight: 400;
    margin-top: 1px;
    padding-left: 28px;
}

.vm-gol-region-no-results {
    padding: 16px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--vm-text-muted);
}

/* Model toggle */
.vm-gol-model-wrap {
    width: 100%;
}

/* v2.0 — Model toggle segmented control */
.vm-gol-model-toggle {
    display: flex;
    gap: 0;
    background: var(--vm-bg-secondary);
    border-radius: var(--vm-radius);
    padding: 4px;
    border: 1px solid var(--vm-border-color);
}

.vm-gol-model-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    border: none;
    border-radius: calc(var(--vm-radius) - 4px);
    background: transparent;
    color: var(--vm-text-secondary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    position: relative;
}

.vm-gol-model-btn:hover:not(:disabled) {
    color: var(--vm-text-primary);
    background: rgba(59, 130, 246, 0.06);
}

.vm-gol-model-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.vm-gol-model-btn--active {
    background: var(--vm-gradient-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.vm-gol-model-btn__icon {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.vm-gol-model-btn__text {
    font-size: 0.8rem;
    font-weight: 700;
}

.vm-gol-model-btn__desc {
    font-size: 0.65rem;
    opacity: 0.7;
    margin-top: 2px;
}

/* Competition badge */
.vm-gol-competition-badge {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e40af;
    padding: 10px 20px;
    border-radius: var(--vm-radius-small);
    margin: 12px auto 0;
    max-width: 90%;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
    text-transform: uppercase;
    letter-spacing: 1px;
}

[data-theme="dark"] .vm-gol-competition-badge {
    color: #93c5fd;
    background: linear-gradient(135deg, #1e293b 0%, #1e3a5f 100%);
    border-color: #2563eb;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}

/* ─────────────────────────────────────────────────────────────────
   Sesija 60: Ensemble golubarska 10 dana — vm-ens-* prefix
   ───────────────────────────────────────────────────────────────── */
/* Puna širina kontejnera — identično matičnoj golubarskoj (.vm-gol-page) */
.vm-ens-page { max-width: 100%; margin: 0 auto; padding: 16px 0; }

/* D2: redosled sekcija preko flex order — grafici PRE mape.
   Source HTML: day-cards → mapa → grafici → tabela.
   Željeno:     day-cards → grafici → mapa → tabela. */
.vm-ens-page { display: flex; flex-direction: column; }
.vm-ens-page > .vm-ens-beta-banner { order: 1; }
.vm-ens-page > .vm-gol-intro { order: 2; }
.vm-ens-page > .vm-ens-back-cta:not(.vm-ens-back-cta--bottom) { order: 3; }
.vm-ens-page > .vm-gol-header { order: 4; }
.vm-ens-page > .vm-gol-controls { order: 5; }
.vm-ens-page > .vm-ens-status { order: 6; }
.vm-ens-page > .vm-ens-day-cards-wrap { order: 8; }
.vm-ens-page > #vm-ens-charts { order: 9; }
.vm-ens-page > .vm-ens-map-section { order: 10; }
.vm-ens-page > .vm-ens-table-wrap { order: 12; }
.vm-ens-page > .vm-ens-notice { order: 13; }
.vm-ens-page > .vm-ens-back-cta--bottom { order: 14; }

/* BETA upozorenje — narandžasti banner na vrhu */
.vm-ens-beta-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #fff;
    border-radius: var(--vm-radius);
    padding: 16px 20px;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 16px rgba(234, 88, 12, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.vm-ens-beta-banner__icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.vm-ens-beta-banner__body { flex: 1; min-width: 0; }
.vm-ens-beta-banner__title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 5px;
    color: #fff;
}
.vm-ens-beta-banner__text {
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
    color: rgba(255, 255, 255, 0.95);
    text-align: left;
}
.vm-ens-beta-banner__text strong { color: #fff; font-weight: 700; }
[data-theme="dark"] .vm-ens-beta-banner {
    background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
    .vm-ens-beta-banner { padding: 14px 16px; gap: 10px; }
    .vm-ens-beta-banner__title { font-size: 0.92rem; }
    .vm-ens-beta-banner__text { font-size: 0.84rem; }
}
.vm-ens-controls {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    margin: 18px 0; padding: 14px 18px;
    background: var(--vm-bg-secondary, #f1f5f9);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: 12px;
}
.vm-ens-controls__label { font-weight: 600; color: var(--vm-text-secondary, #475569); }
.vm-ens-region-select {
    padding: 9px 14px; font-size: 0.95rem;
    border: 1px solid var(--vm-border-color, #cbd5e1); border-radius: 8px;
    background: var(--vm-card-bg, #fff); color: var(--vm-text-primary, #0f172a);
    min-width: 240px;
}
.vm-ens-btn {
    padding: 9px 18px; font-size: 0.95rem; font-weight: 600;
    border: 1px solid var(--vm-border-color, #cbd5e1); border-radius: 8px;
    background: var(--vm-card-bg, #fff); color: var(--vm-text-primary, #0f172a);
    cursor: pointer; transition: all 0.15s;
}
.vm-ens-btn--primary {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    color: #fff; border-color: transparent;
}
.vm-ens-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.3); }
.vm-ens-header { margin: 16px 0; }
.vm-ens-members {
    display: inline-block; margin-top: 4px;
    font-size: 0.82rem; color: var(--vm-text-muted, #64748b);
    padding: 3px 10px; border-radius: 999px;
    background: var(--vm-bg-secondary, #f1f5f9);
}
.vm-ens-status { min-height: 24px; margin: 8px 0; font-size: 0.9rem; color: var(--vm-text-secondary, #475569); }
.vm-ens-status--error { color: #dc2626; font-weight: 600; }
.vm-ens-charts { display: flex; flex-direction: column; gap: 22px; margin-top: 18px; }
.vm-ens-chart-card {
    padding: 18px; border-radius: 12px;
    background: var(--vm-card-bg, #fff);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.vm-ens-chart-title {
    margin: 0 0 6px; font-size: 1.05rem; font-weight: 700;
    color: var(--vm-text-primary, #0f172a);
}
.vm-ens-chart-desc {
    margin: 0 0 12px; font-size: 0.85rem; color: var(--vm-text-muted, #64748b);
}
.vm-ens-chart-wrap { position: relative; height: 320px; width: 100%; }
.vm-ens-height-selector { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 14px; }
.vm-ens-height-btn {
    padding: 6px 14px; font-size: 0.85rem; font-weight: 600;
    border: 1px solid var(--vm-border-color, #cbd5e1); border-radius: 999px;
    background: var(--vm-card-bg, #fff); color: var(--vm-text-secondary, #475569);
    cursor: pointer; transition: all 0.15s;
}
.vm-ens-height-btn:hover { border-color: #2563eb; color: #2563eb; }
.vm-ens-height-btn--active {
    background: #2563eb !important; color: #fff !important; border-color: #2563eb !important;
}
.vm-ens-notice {
    margin-top: 22px; padding: 16px 20px;
    background: var(--vm-bg-secondary, #f1f5f9);
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
}
.vm-ens-notice h4 { margin: 0 0 10px; font-size: 1rem; color: var(--vm-text-primary, #0f172a); }
.vm-ens-notice ul { margin: 0; padding-left: 20px; color: var(--vm-text-secondary, #475569); font-size: 0.9rem; line-height: 1.6; }

[data-theme="dark"] .vm-ens-controls,
[data-theme="dark"] .vm-ens-chart-card,
[data-theme="dark"] .vm-ens-notice { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .vm-ens-members { background: #334155; }

@media (max-width: 640px) {
    .vm-ens-controls { flex-direction: column; align-items: stretch; }
    .vm-ens-region-select, .vm-ens-btn { width: 100%; }
    .vm-ens-chart-wrap { height: 260px; }
}

/* Sesija 60e: ".vm-gol-final-badge" CSS uklonjen (oba runa pokrivaju D+1..D+3) */

/* ── Notice ── */
/* v2.0 — Notice compact toolbar */
.vm-gol-notice {
    background: var(--vm-bg-secondary);
    border-radius: var(--vm-radius);
    padding: 10px 20px;
    margin-bottom: 1rem;
    border: 1px solid var(--vm-border-color);
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px;
    flex-wrap: wrap;
}

.vm-gol-notice__version {
    font-size: 0.72rem;
    color: var(--vm-text-muted);
    margin: 0 !important;
    text-align: center !important;
}

.vm-gol-notice__bih {
    margin: 0 !important;
    text-align: center !important;
}

.vm-gol-notice__bih-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--vm-text-primary, #0f172a) !important;
    text-decoration: none !important;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid rgba(59,130,246,0.2);
    padding: 12px 24px;
    border-radius: 12px;
    transition: all 0.3s;
}
.vm-gol-notice__bih-link img { border-radius: 2px; flex-shrink: 0; }
.vm-gol-notice__bih-link:hover,
.vm-gol-notice__bih-link:focus,
.vm-gol-notice__bih-link:active {
    color: var(--vm-text-primary, #0f172a) !important;
    text-decoration: none !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(59,130,246,0.2);
    background: rgba(59,130,246,0.1);
    border-color: #3b82f6;
    border-bottom: none !important;
}
[data-theme="dark"] .vm-gol-notice__bih-link { background: rgba(30,41,59,0.7); border-color: rgba(96,165,250,0.3); color: #e2e8f0 !important; }
[data-theme="dark"] .vm-gol-notice__bih-link:hover { background: rgba(96,165,250,0.15); border-color: #60a5fa; color: #e2e8f0 !important; }

/* ── Info Cards (prebačeno iz Gutenberg blokova) ── */
.vm-gol-info-card { border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0; background: var(--vm-bg-secondary, #f1f5f9); border-left: 4px solid; }
.vm-gol-info-card--green { border-left-color: #22c55e; }
.vm-gol-info-card--blue { border-left-color: #3b82f6; }
.vm-gol-info-card--yellow { border-left-color: #f59e0b; }
.vm-gol-info-card h4 { text-align: center; font-size: 1rem; font-weight: 700; margin: 0 0 0.75rem; color: var(--vm-text-primary, #0f172a); }
.vm-gol-info-card p { font-size: 0.92rem; line-height: 1.7; color: var(--vm-text-secondary, #475569); margin: 0.5rem 0; }
.vm-gol-info-card a.vm-gol-app-btn, a.vm-gol-app-btn, .vm-gol-app-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 10px; font-weight: 600; font-size: 0.9rem; background: #166534; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-decoration: none !important; transition: all 0.2s; border: none; cursor: pointer; font-family: inherit; border-bottom: none !important; }
.vm-gol-info-card a.vm-gol-app-btn:hover, a.vm-gol-app-btn:hover, .vm-gol-app-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(22,101,52,0.3); background: #15803d; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-decoration: none !important; border-bottom: none !important; }
.vm-gol-app-btn svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }
.vm-gol-app-screenshot { display: block; margin: 1rem auto 0; max-width: 320px; width: 100%; border-radius: 12px; }
.vm-gol-sponsor { text-align: center; margin: 2rem 0; }
.vm-gol-sponsor h4 { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; color: var(--vm-text-muted, #64748b); margin: 0 0 1rem; text-transform: uppercase; }
.vm-gol-sponsor__logo-wrap { display: inline-block; padding: 1.25rem 2rem; border: 2px dashed var(--vm-border-color, #cbd5e1); border-radius: 16px; transition: all 0.2s; }
.vm-gol-sponsor__logo-wrap:hover { border-color: #3b82f6; background: rgba(59,130,246,0.03); }
.vm-gol-sponsor__logo-wrap img { display: block; border-radius: 8px; }
.vm-gol-sponsor__name { font-size: 0.82rem; color: var(--vm-text-muted, #64748b); margin-top: 0.75rem; max-width: 400px; margin-left: auto; margin-right: auto; line-height: 1.4; font-weight: 500; text-align: center !important; }
.vm-gol-refresh-note { text-align: center; font-size: 0.88rem; color: var(--vm-text-muted, #64748b); font-style: italic; margin: 1.5rem 0; }
[data-theme="dark"] .vm-gol-info-card { background: var(--vm-bg-secondary); }
[data-theme="dark"] .vm-gol-info-card h4 { color: var(--vm-text-primary); }
[data-theme="dark"] .vm-gol-info-card p { color: var(--vm-text-secondary); }
[data-theme="dark"] .vm-gol-app-btn { background: #22c55e; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; }
[data-theme="dark"] .vm-gol-app-btn:hover { background: #16a34a; box-shadow: 0 4px 12px rgba(34,197,94,0.3); color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; }

/* ── PDF Button ── */
/* v2.0 — PDF button modernized pill */
.vm-gol-pdf-wrap {
    text-align: center;
    margin-bottom: 1rem;
}

.vm-gol-pdf-btn {
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    color: #fff;
    border: none;
    padding: 10px 28px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.2);
}

.vm-gol-pdf-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 64, 175, 0.35);
}

.vm-gol-pdf-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

/* ── Loading ── */
.vm-gol-loading {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
}

.vm-gol-loading__spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--vm-border-color);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: vm-gol-spin 0.8s linear infinite;
}

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

.vm-gol-loading__text {
    font-size: 0.9rem;
    color: var(--vm-text-muted);
}

/* ── Error ── */
.vm-gol-error {
    text-align: center;
    padding: 60px 20px;
}

.vm-gol-error__icon { font-size: 2rem; margin-bottom: 8px; }
.vm-gol-error__text { font-size: 1.1rem; font-weight: 600; color: var(--vm-text-primary); }
.vm-gol-error__sub { font-size: 0.85rem; color: var(--vm-text-muted); margin-top: 4px; }

/* ── Mobile Table Scroll Hint ── */
.vm-gol-table-scroll-hint {
    display: none;
}
@media (max-width: 768px) {
    .vm-gol-table-scroll-hint {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.4rem;
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--vm-text-muted);
        padding: 0.5rem 0.75rem 0.25rem;
        animation: vm-gol-hint-nudge 1.8s ease-in-out infinite;
    }
    .vm-gol-table-scroll-hint svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
    @keyframes vm-gol-hint-nudge {
        0%, 100% { transform: translateX(0); opacity: 0.7; }
        50% { transform: translateX(6px); opacity: 1; }
    }
}

/* ── Forecast Table ── */
.vm-gol-forecast-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
    border-radius: var(--vm-radius);
    border: 1px solid var(--vm-border-color);
}

.vm-gol-forecast-table {
    width: 100%;
    min-width: 1100px;
    border-collapse: collapse;
    font-size: 1.0rem;
}

.vm-gol-forecast-table th,
.vm-gol-forecast-table td {
    padding: 6px 8px;
    text-align: center;
    border-bottom: 1px solid var(--vm-border-color);
    white-space: nowrap;
    color: var(--vm-text-primary);
}

.vm-gol-forecast-table th {
    background: var(--vm-bg-secondary);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Header group row */
.vm-gol-header-groups td {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 6px 8px 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: none !important;
}

.vm-gol-hg--info {
    background: rgba(100, 116, 139, 0.08) !important;
    color: var(--vm-text-secondary) !important;
    border-top: 4px solid #94a3b8 !important;
}

.vm-gol-hg--temp {
    background: rgba(59, 130, 246, 0.08) !important;
    color: #2563eb !important;
    border-top: 4px solid #3b82f6 !important;
    border-left: 2px solid rgba(59, 130, 246, 0.3) !important;
}

.vm-gol-hg--wind {
    background: rgba(34, 197, 94, 0.08) !important;
    color: #16a34a !important;
    border-top: 4px solid #22c55e !important;
    border-left: 2px solid rgba(34, 197, 94, 0.3) !important;
}

.vm-gol-hg--cloud {
    background: rgba(245, 158, 11, 0.08) !important;
    color: #d97706 !important;
    border-top: 4px solid #f59e0b !important;
    border-left: 2px solid rgba(245, 158, 11, 0.3) !important;
}

/* Group dividers on data rows and header cols */
.vm-gol-group--temp-start,
.vm-gol-header-cols .vm-gol-group--temp-start {
    border-left: 2px solid rgba(59, 130, 246, 0.25) !important;
}

.vm-gol-group--wind-start,
.vm-gol-header-cols .vm-gol-group--wind-start {
    border-left: 2px solid rgba(34, 197, 94, 0.25) !important;
}

.vm-gol-group--cloud-start,
.vm-gol-header-cols .vm-gol-group--cloud-start {
    border-left: 2px solid rgba(245, 158, 11, 0.25) !important;
}

.vm-gol-th--confidence {
    background: rgba(99, 102, 241, 0.12) !important;
    color: #6366f1 !important;
    font-weight: 800 !important;
}

.vm-gol-th--risk {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
    color: #fff !important;
    font-size: 0.7rem !important;
    line-height: 1.2;
}

.vm-gol-th--risk-sub {
    font-size: 0.55rem;
    font-weight: 400;
    margin-top: 2px;
}

/* Row styling */
.vm-gol-row--alt td {
    background: var(--vm-bg-secondary);
}

/* Day separator */
.vm-gol-day-separator td {
    font-size: 1.1rem;
    font-weight: 800;
    padding: 14px 20px;
    text-align: center !important;
    border-top: none;
    color: #fff !important;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%) !important;
    letter-spacing: 0.5px;
}

/* Region label in day separator (table view) */
.vm-gol-day-separator__region {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 500;
    opacity: 0.85;
    margin-left: 10px;
    letter-spacing: 0.3px;
    vertical-align: baseline;
}

/* Sunrise/sunset row */
.vm-gol-sun-row td {
    padding: 8px;
    background: rgba(59, 130, 246, 0.05);
    border-bottom: 2px solid #27AAFF;
}

.vm-gol-sun-info {
    display: flex;
    justify-content: center;
    gap: 30px;
    font-size: 0.9rem;
}

.vm-gol-sun-item {
    color: var(--vm-text-secondary);
}

/* Weather icon */
.vm-gol-weather-icon {
    display: block;
    margin: 0 auto;
}

.vm-gol-cell--weather {
    min-width: 55px;
}

/* Confidence badge */
.vm-gol-confidence-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid;
}

.vm-gol-confidence--very-high { background: #d1fae5; color: #059669; border-color: #059669; }
.vm-gol-confidence--high { background: #dcfce7; color: #22c55e; border-color: #22c55e; }
.vm-gol-confidence--medium { background: #fef3c7; color: #f59e0b; border-color: #f59e0b; }
.vm-gol-confidence--low { background: #fee2e2; color: #ef4444; border-color: #ef4444; }

.vm-gol-confidence-badge__icon { font-size: 0.65rem; }
.vm-gol-confidence-badge__pct { font-variant-numeric: tabular-nums; }

/* Risk badge */
.vm-gol-risk-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    border: 1px solid;
}

.vm-gol-risk-badge--yes { background: #fee2e2; color: #dc2626; border-color: #dc2626; }
.vm-gol-risk-badge--no { background: #dcfce7; color: #16a34a; border-color: #16a34a; }

/* Padavine (Task 4 — količina mm + verovatnoća %) */
.vm-gol-precip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.vm-gol-precip__mm { font-weight: 700; font-size: 0.72rem; color: #2563eb; }
.vm-gol-precip__prob { font-size: 0.62rem; opacity: 0.7; }
.vm-gol-precip--light .vm-gol-precip__mm { color: #3b82f6; }
.vm-gol-precip--mod .vm-gol-precip__mm { color: #2563eb; }
.vm-gol-precip--heavy .vm-gol-precip__mm { color: #1d4ed8; font-weight: 800; }
.vm-gol-precip--dry { color: var(--vm-text-muted, #94a3b8); font-weight: 400; }
.vm-gol-cell--precip { text-align: center; }
[data-theme="dark"] .vm-gol-precip__mm,
[data-theme="dark"] .vm-gol-precip--light .vm-gol-precip__mm,
[data-theme="dark"] .vm-gol-precip--mod .vm-gol-precip__mm { color: #93c5fd; }
[data-theme="dark"] .vm-gol-precip--heavy .vm-gol-precip__mm { color: #bfdbfe; }

/* Temperature colors */
.vm-gol-temp--very-cold { color: #7c3aed !important; font-weight: 700; }
.vm-gol-temp--freezing { color: #6366f1 !important; font-weight: 700; }
.vm-gol-temp--cold { color: #3b82f6 !important; font-weight: 700; }
.vm-gol-temp--cool { color: #007bff !important; font-weight: 700; }
.vm-gol-temp--optimal { color: #28a745 !important; font-weight: 700; }
.vm-gol-temp--warm { color: #e39313 !important; font-weight: 700; }
.vm-gol-temp--hot { color: #dc3545 !important; font-weight: 700; }

/* Wind colors */
.vm-gol-wind--moderate { color: #e39313 !important; font-weight: 700; }
.vm-gol-wind--strong { color: #dc3545 !important; font-weight: 700; }

/* Wind direction SVG arrows */
.vm-gol-wind-arrow {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    color: #3b82f6;
    transition: color 0.2s;
    flex-shrink: 0;
}
.vm-gol-wind-label {
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--vm-text-secondary);
    letter-spacing: 0.02em;
}
.vm-gol-cell--winddir {
    white-space: nowrap;
    text-align: center;
}
.vm-gol-cell--winddir .vm-gol-wind-arrow {
    width: 16px;
    height: 16px;
}
.vm-gol-wind--moderate .vm-gol-wind-arrow { color: #e39313; }
.vm-gol-wind--strong .vm-gol-wind-arrow { color: #dc3545; }

/* Card view wind arrows */
.vm-gol-card__wind-dir .vm-gol-wind-arrow {
    width: 16px;
    height: 16px;
    color: #3b82f6;
}
.vm-gol-card__metric-value .vm-gol-wind-arrow {
    width: 16px;
    height: 16px;
}

/* Dark mode wind arrows */
[data-theme="dark"] .vm-gol-wind-arrow {
    color: #60a5fa;
}
[data-theme="dark"] .vm-gol-wind--moderate .vm-gol-wind-arrow { color: #fbbf24; }
[data-theme="dark"] .vm-gol-wind--strong .vm-gol-wind-arrow { color: #f87171; }

/* Cloud colors */
.vm-gol-cloud--warning { color: #e39313 !important; font-weight: 700; }
.vm-gol-cloud--danger { color: #dc3545 !important; font-weight: 700; }

/* CARD-specific color overrides — .vm-gol-page prefix ensures higher specificity
   than body.page .entry-content span which sets generic text color */
.vm-gol-page .vm-gol-card__metric-value.vm-gol-temp--very-cold { color: #7c3aed !important; }
.vm-gol-page .vm-gol-card__metric-value.vm-gol-temp--freezing { color: #6366f1 !important; }
.vm-gol-page .vm-gol-card__metric-value.vm-gol-temp--cold { color: #3b82f6 !important; }
.vm-gol-page .vm-gol-card__metric-value.vm-gol-temp--cool { color: #007bff !important; }
.vm-gol-page .vm-gol-card__metric-value.vm-gol-temp--optimal { color: #28a745 !important; }
.vm-gol-page .vm-gol-card__metric-value.vm-gol-temp--warm { color: #e39313 !important; }
.vm-gol-page .vm-gol-card__metric-value.vm-gol-temp--hot { color: #dc3545 !important; }
.vm-gol-page .vm-gol-card__wind-val.vm-gol-wind--moderate { color: #e39313 !important; }
.vm-gol-page .vm-gol-card__wind-val.vm-gol-wind--strong { color: #dc3545 !important; }
.vm-gol-page .vm-gol-card__cloud-val.vm-gol-cloud--warning { color: #e39313 !important; }
.vm-gol-page .vm-gol-card__cloud-val.vm-gol-cloud--danger { color: #dc3545 !important; }

/* Time cell */
.vm-gol-cell--time {
    font-weight: 700;
    min-width: 50px;
}

/* Pressure cell */
.vm-gol-cell--pressure {
    min-width: 90px;
    white-space: nowrap;
}

.vm-gol-cell--pressure img,
.vm-gol-cell--vvel img {
    vertical-align: middle;
    margin-left: 2px;
}

/* ── Charts ── */
.vm-gol-chart-row td {
    padding: 0 !important;
}

.vm-gol-chart-container {
    background: var(--vm-bg-secondary);
    border-top: 1px solid var(--vm-border-color);
    padding: 16px;
}

.vm-gol-chart-container__title {
    text-align: center;
    font-weight: 700;
    color: var(--vm-text-secondary);
    font-size: 0.95rem;
    margin-bottom: 12px;
}

/* v2.1 — 2-row layout: Temp+Wind top, Wind Rose full-width bottom */
.vm-gol-chart-container__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.vm-gol-chart-container__item {
    height: 200px;
    position: relative;
    background: var(--vm-bg-secondary);
    border-radius: var(--vm-radius-small);
    padding: 10px;
    border: 1px solid var(--vm-border-color);
}

.vm-gol-chart-container__item--windrose {
    grid-column: 1 / -1;
    height: 380px;
    display: flex;
    flex-direction: column;
    overflow: visible;
    padding-bottom: 20px;
}

.vm-gol-chart-container__subtitle {
    text-align: center;
    margin: 0 0 8px;
    font-size: 0.82rem;
    color: var(--vm-text-secondary);
    font-weight: 600;
}

.vm-gol-chart-container__item canvas {
    width: 100% !important;
    max-height: 160px !important;
    display: block;
}
/* Wind rose needs more height */
.vm-gol-chart-container__item--windrose canvas {
    max-height: 300px !important;
}

/* ── Legend ── */
.vm-gol-legend {
    padding: 16px;
    background: var(--vm-bg-secondary);
    border-top: 2px solid var(--vm-border-color);
    text-align: center;
    font-size: 0.78rem;
    color: var(--vm-text-secondary);
}

.vm-gol-legend__title {
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--vm-text-primary);
}

.vm-gol-legend__grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.vm-gol-legend__heading {
    font-weight: 600;
    margin-bottom: 4px;
}

.vm-gol-legend__section:first-child .vm-gol-legend__heading { color: #6366f1; }
.vm-gol-legend__section:last-child .vm-gol-legend__heading { color: #dc2626; }

.vm-gol-legend__items {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.vm-gol-legend__note {
    font-size: 0.7rem;
    color: var(--vm-text-muted);
    margin-top: 8px;
    line-height: 1.5;
}

/* ── Text Forecast ── */
.vm-gol-text-forecast {
    margin-top: 1.5rem;
}

/* v5.0 — Naslov sekcije sa zastavom */
.vm-gol-text-forecast__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.vm-gol-text-forecast__flag {
    flex-shrink: 0;
    height: auto;
    width: 32px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    display: block;
    vertical-align: middle;
}

@media (max-width: 520px) {
    .vm-gol-text-forecast__title {
        font-size: 1.1rem;
        gap: 10px;
    }
    .vm-gol-text-forecast__flag {
        width: 26px;
    }
}

/* v2.0 — Text Forecast Responsive Grid */
.vm-gol-text-forecast__content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.vm-gol-text-forecast__content p {
    margin: 0 0 0.8rem;
    color: var(--vm-text-primary);
    line-height: 1.6;
}

/* ── Day card with weather-type gradient accent ── */
.vm-gol-text-day {
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius);
    overflow: hidden;
    border-left: 4px solid var(--vm-border-color);
    transition: box-shadow 0.3s, transform 0.3s;
    display: flex;
    flex-direction: column;
}
/* Napomena/Upozorenje uvek na dnu kartice + isprekidani separator iznad */
/* Sesija 58 — full-width: napomena ide do ivica kartice (bez 16px margina) */
.vm-gol-text-day .vm-gol-text-note {
    margin-top: auto;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    border-radius: 0;
    border-left-width: 0;
    border-top: 1px dashed var(--vm-border-color, #cbd5e1);
    padding: 14px 20px;
    position: relative;
}
/* ::before separator postaje suvišan — border-top na .vm-gol-text-note je preuzeo ulogu */
.vm-gol-text-day .vm-gol-text-note::before { display: none; }
/* Sesija 58 nastavak — napomena tekst justified + tighter horizontal padding */
.vm-gol-text-day .vm-gol-text-note__body {
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
}
.vm-gol-text-day:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
/* Weather-type accent colors on left border */
.vm-gol-text-day--sunny  { border-left-color: #f59e0b; }
.vm-gol-text-day--cloudy { border-left-color: #94a3b8; }
.vm-gol-text-day--rainy  { border-left-color: #3b82f6; }
.vm-gol-text-day--snowy  { border-left-color: #a5b4fc; }
.vm-gol-text-day--stormy { border-left-color: #7c3aed; }
.vm-gol-text-day--foggy  { border-left-color: #6b7280; }

/* Day header — flex with summary badges */
.vm-gol-text-day__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 14px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(99, 102, 241, 0.04) 100%);
    border-bottom: 1px solid var(--vm-border-color);
    flex-wrap: wrap;
    gap: 8px;
}
[data-theme="dark"] .vm-gol-text-day__header {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(99, 102, 241, 0.08) 100%);
}

.vm-gol-text-day__header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vm-gol-text-day__dayname {
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    font-weight: 800;
    color: var(--vm-text-primary);
    letter-spacing: 0.04em;
}

.vm-gol-text-day__date {
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--vm-text-muted);
}

/* v2.0 — Weather summary badges */
.vm-gol-text-day__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.vm-gol-text-day__icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.vm-gol-text-day__temp-badge {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    background: rgba(59,130,246,0.08);
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.vm-gol-text-day__wind-badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--vm-text-secondary);
    background: rgba(34,197,94,0.08);
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

/* v2.0 — Freshness below header (v5.0 — +10% font-size) */
.vm-gol-text-day__freshness {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--vm-text-muted);
    padding: 6px 20px;
    border-bottom: 1px solid var(--vm-border-color);
    background: rgba(0,0,0,0.01);
}

/* Legacy freshness (keep for backward compat) */
.vm-gol-text-day__updated {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: var(--vm-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.vm-gol-fresh-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.vm-gol-fresh--green { background: #22c55e; box-shadow: 0 0 4px rgba(34, 197, 94, 0.5); }
.vm-gol-fresh--orange { background: #f59e0b; box-shadow: 0 0 4px rgba(245, 158, 11, 0.5); }
.vm-gol-fresh--red { background: #ef4444; box-shadow: 0 0 4px rgba(239, 68, 68, 0.5); }

/* Keep old title for backward compat (v1 single-field format) */
.vm-gol-text-day__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    margin: 0 0 0.5rem;
    text-align: center;
}

/* ── VREME / VETAR sections ── */
.vm-gol-text-section {
    padding: 14px 20px;
}
.vm-gol-text-section + .vm-gol-text-section {
    border-top: 1px dashed var(--vm-border-color);
}

.vm-gol-text-section__label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    padding: 3px 10px;
    border-radius: 6px;
}

.vm-gol-text-section__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* v2.1 — Text labels for section (no pill background) */
.vm-gol-text-section__pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.vm-gol-text-section__pill--vreme {
    color: #3b82f6;
}
.vm-gol-text-section__pill--vetar {
    color: #0d9488;
}
[data-theme="dark"] .vm-gol-text-section__pill--vreme { color: #60a5fa; }
[data-theme="dark"] .vm-gol-text-section__pill--vetar { color: #2dd4bf; }

/* v4.0 — Napomena / Upozorenje (info + danger) */
.vm-gol-text-note {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    border-left: 4px solid;
    display: flex;
    flex-direction: column;
    gap: 8px;
    line-height: 1.5;
}
.vm-gol-text-note--info {
    background: rgba(59, 130, 246, 0.10);
    border-left-color: #2563eb;
    color: var(--vm-text-primary, #0f172a);
}
.vm-gol-text-note--danger {
    background: rgba(234, 88, 12, 0.12);
    border-left-color: #ea580c;
    color: var(--vm-text-primary, #0f172a);
}
.vm-gol-text-note__header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vm-gol-text-note--info .vm-gol-text-note__header { color: #1d4ed8; }
.vm-gol-text-note--danger .vm-gol-text-note__header { color: #c2410c; }
.vm-gol-text-note__icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    max-width: 18px;
    flex-shrink: 0;
    display: inline-block;
}
.vm-gol-text-note--danger .vm-gol-text-note__icon {
    animation: vm-gol-note-pulse 1.8s ease-in-out infinite;
}
@keyframes vm-gol-note-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.15); opacity: 0.85; }
}
.vm-gol-text-note__body {
    font-size: 0.95rem;
    line-height: 1.55;
}
.vm-gol-text-note__body p:last-child { margin-bottom: 0; }

/* Dark mode */
[data-theme="dark"] .vm-gol-text-note--info {
    background: rgba(59, 130, 246, 0.18);
    color: var(--vm-text-primary, #f8fafc);
}
[data-theme="dark"] .vm-gol-text-note--info .vm-gol-text-note__header { color: #93c5fd; }
[data-theme="dark"] .vm-gol-text-note--danger {
    background: rgba(234, 88, 12, 0.22);
    color: var(--vm-text-primary, #f8fafc);
}
[data-theme="dark"] .vm-gol-text-note--danger .vm-gol-text-note__header { color: #fdba74; }

/* Legacy label support */
.vm-gol-text-section--vreme .vm-gol-text-section__label {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}
[data-theme="dark"] .vm-gol-text-section--vreme .vm-gol-text-section__label {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.15);
}

.vm-gol-text-section--vetar .vm-gol-text-section__label {
    color: #0d9488;
    background: rgba(13, 148, 136, 0.1);
}
[data-theme="dark"] .vm-gol-text-section--vetar .vm-gol-text-section__label {
    color: #2dd4bf;
    background: rgba(45, 212, 191, 0.15);
}

.vm-gol-text-section__body {
    margin: 0;
    color: var(--vm-text-secondary);
    line-height: 1.7;
    font-size: 0.92rem;
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
}
/* Sesija 58 nastavak — žuti info banner (obaveštenja korisnicima) */
.vm-gol-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fbbf24;
    border-left: 5px solid #f59e0b;
    border-radius: 10px;
    padding: 14px 18px;
    margin: 16px 0;
    color: #78350f;
    font-size: 0.95rem;
    line-height: 1.55;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.10);
}
.vm-gol-info-banner[hidden] { display: none; }
.vm-gol-info-banner__icon {
    flex-shrink: 0;
    font-size: 1.3rem;
    line-height: 1;
    margin-top: 1px;
    color: #b45309;
}
.vm-gol-info-banner__content {
    flex: 1;
    min-width: 0;
}
.vm-gol-info-banner__title {
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #92400e;
    margin: 0 0 8px;
    line-height: 1.2;
}
[data-theme="dark"] .vm-gol-info-banner__title {
    color: #fbbf24;
}
.vm-gol-info-banner__body {
    flex: 1;
    min-width: 0;
}
.vm-gol-info-banner__body p {
    margin: 0 0 0.45em;
}
.vm-gol-info-banner__body p:last-child { margin-bottom: 0; }
/* Sesija 58 nastavak — "Izdato:" timestamp footer + freshness dot */
.vm-gol-info-banner__timestamp {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px dashed rgba(146, 64, 14, 0.30);
    font-size: 0.78rem;
    font-style: italic;
    font-weight: 500;
    color: #b45309;
    letter-spacing: 0.01em;
}
[data-theme="dark"] .vm-gol-info-banner__timestamp {
    border-top-color: rgba(251, 191, 36, 0.35);
    color: #fcd34d;
}
.vm-gol-info-banner__timestamp-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    background: #94a3b8;
}
/* Freshness pragovi (Jovanov zahtev): zeleno ≤72h, žuto ≤120h, crveno >120h */
.vm-gol-info-banner__timestamp--fresh .vm-gol-info-banner__timestamp-dot {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.20);
    animation: vm-gol-fresh-pulse 2.2s ease-in-out infinite;
}
.vm-gol-info-banner__timestamp--stale .vm-gol-info-banner__timestamp-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22);
}
.vm-gol-info-banner__timestamp--very-stale .vm-gol-info-banner__timestamp-dot {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}
@keyframes vm-gol-fresh-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.7; transform: scale(1.15); }
}
.vm-gol-info-banner__body a {
    color: #92400e;
    text-decoration: underline;
    font-weight: 600;
}
[data-theme="dark"] .vm-gol-info-banner {
    background: linear-gradient(135deg, rgba(120, 53, 15, 0.55) 0%, rgba(146, 64, 14, 0.45) 100%);
    border-color: rgba(251, 191, 36, 0.55);
    border-left-color: #fbbf24;
    color: #fde68a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .vm-gol-info-banner__icon { color: #fcd34d; }
[data-theme="dark"] .vm-gol-info-banner__body a { color: #fde68a; }

/* Sesija 58 nastavak — JS sada wrap-uje tekst u <p> tagove zbog justify (browser
   ne justify-uje redove ispred <br>-a; treba block element po paragrafu). */
.vm-gol-text-section__body p,
.vm-gol-text-day .vm-gol-text-note__body p {
    margin: 0 0 0.6em;
    text-align: inherit;
    text-align-last: inherit;
    hyphens: inherit;
}
.vm-gol-text-section__body p:last-child,
.vm-gol-text-day .vm-gol-text-note__body p:last-child {
    margin-bottom: 0;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .vm-gol-text-day__header {
        flex-direction: column;
        text-align: center;
        padding: 12px 14px 10px;
    }
    .vm-gol-text-day__updated {
        margin-top: 6px;
        font-size: 0.68rem;
    }
    .vm-gol-text-day__dayname {
        font-size: 1rem;
    }
    .vm-gol-text-day__date {
        font-size: 0.92rem;
    }
    .vm-gol-text-section {
        padding: 12px 14px;
    }
}

/* Dark mode override for wp:block ref content (hardcoded palette colors) */
[data-theme="dark"] .vm-gol-text-forecast__content [class*="has-palette-color"] {
    color: var(--vm-text-primary) !important;
}
[data-theme="dark"] .vm-gol-text-forecast__content [class*="has-palette-color"][class*="background-color"] {
    background-color: var(--vm-bg-secondary) !important;
}
[data-theme="dark"] .vm-gol-text-forecast__content h2,
[data-theme="dark"] .vm-gol-text-forecast__content h3,
[data-theme="dark"] .vm-gol-text-forecast__content h4 {
    color: var(--vm-text-primary) !important;
}

/* Button styling fix — Gutenberg outline buttons on golubarska page */
.entry-content .wp-block-group .wp-block-button.is-style-outline .wp-block-button__link {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 24px;
    font-weight: 600;
    border-radius: 8px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.entry-content .wp-block-group .wp-block-button.is-style-outline .wp-block-button__link:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
[data-theme="dark"] .entry-content .wp-block-group .wp-block-button.is-style-outline .wp-block-button__link {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
}

/* ── View Toggle ── */
/* v2.0 — View toggle segmented control */
.vm-gol-view-toggle {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 1rem;
    background: var(--vm-bg-secondary);
    border-radius: var(--vm-radius);
    padding: 4px;
    border: 1px solid var(--vm-border-color);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.vm-gol-view-btn {
    padding: 10px 24px;
    border: none;
    border-radius: calc(var(--vm-radius) - 4px);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: var(--vm-text-secondary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}

.vm-gol-view-btn:hover {
    color: var(--vm-text-primary);
    background: rgba(59, 130, 246, 0.05);
}

.vm-gol-view-btn--active {
    background: var(--vm-gradient-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

/* ── Card View ── */
.vm-gol-cards-wrap {
    margin-bottom: 1.5rem;
}

.vm-gol-cards-day {
    margin-bottom: 1.5rem;
}

.vm-gol-cards-day__header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: #fff;
    border-radius: var(--vm-radius-small);
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    flex-wrap: wrap;
    gap: 6px;
}

.vm-gol-cards-day__sun {
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.9;
}

/* Region label in cards day header */
.vm-gol-cards-day__region {
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.85;
    background: rgba(255, 255, 255, 0.18);
    padding: 2px 10px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* Individual card */
.vm-gol-card {
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius-small);
    padding: 12px;
    margin-bottom: 8px;
    transition: box-shadow 0.2s;
    color: var(--vm-text-primary);
}

.vm-gol-card:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Card top row */
.vm-gol-card__top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--vm-border-color);
}

.vm-gol-card__time {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--vm-text-primary);
    min-width: 50px;
    font-variant-numeric: tabular-nums;
}

.vm-gol-card__icon {
    flex-shrink: 0;
}

.vm-gol-card__desc {
    flex: 1;
    font-size: 0.85rem;
    color: var(--vm-text-secondary);
    line-height: 1.3;
}

.vm-gol-card__confidence {
    flex-shrink: 0;
}

/* Metrics grid */
.vm-gol-card__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 6px;
}

.vm-gol-card__metric {
    background: var(--vm-bg-secondary);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vm-gol-card__metric-icon {
    font-size: 0.8rem;
    line-height: 1;
}

.vm-gol-card__metric-label {
    font-size: 0.68rem;
    color: var(--vm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}

.vm-gol-card__metric-value {
    font-size: 1.0rem;
    font-weight: 700;
    /* color inherited from .vm-gol-card — allows conditional classes to override */
}

.vm-gol-card__metric-sub {
    font-size: 0.72rem;
    color: var(--vm-text-muted);
}

.vm-gol-card__metric-sub img {
    vertical-align: middle;
    height: 14px;
    width: 14px;
}

/* Expandable details */
.vm-gol-card__details {
    border-top: 1px solid var(--vm-border-color);
    margin-top: 4px;
}

.vm-gol-card__expand {
    font-size: 0.75rem;
    color: var(--vm-text-muted);
    cursor: pointer;
    padding: 6px 0;
    text-align: center;
    font-weight: 600;
    list-style: none;
    user-select: none;
}

.vm-gol-card__expand::-webkit-details-marker { display: none; }

.vm-gol-card__details[open] .vm-gol-card__expand {
    color: #3b82f6;
    margin-bottom: 8px;
}

.vm-gol-card__details-inner {
    padding-top: 4px;
}

.vm-gol-card__detail-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--vm-text-secondary);
    margin-bottom: 4px;
}

.vm-gol-card__wind-grid {
    margin-bottom: 8px;
}

/* Main wind grid (always visible in card) */
.vm-gol-card__wind-grid--main {
    background: var(--vm-bg-secondary);
    border-radius: var(--vm-radius-small);
    padding: 8px 10px;
    margin-top: 2px;
    margin-bottom: 0;
}
.vm-gol-card__wind-grid--main .vm-gol-card__detail-title {
    margin-bottom: 6px;
}
.vm-gol-card__wind-grid--main .vm-gol-card__wind-row {
    padding: 2px 0;
    font-size: 0.73rem;
}

.vm-gol-card__wind-row {
    display: flex;
    gap: 8px;
    padding: 3px 0;
    font-size: 0.82rem;
    border-bottom: 1px dotted var(--vm-border-color);
    align-items: center;
}

.vm-gol-card__wind-row:last-child {
    border-bottom: none;
}

.vm-gol-card__wind-height {
    width: 50px;
    font-weight: 600;
    color: var(--vm-text-muted);
}

.vm-gol-card__wind-val {
    flex: 1;
    font-weight: 600;
    /* color inherited from .vm-gol-card — allows conditional classes to override */
}

.vm-gol-card__wind-dir {
    font-size: 0.72rem;
    color: var(--vm-text-secondary);
    display: flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

.vm-gol-card__wind-dir-text {
    font-size: 0.72rem;
    font-weight: 600;
    color: #3b82f6;
    min-width: 30px;
    text-align: right;
}
[data-theme="dark"] .vm-gol-card__wind-dir-text {
    color: #60a5fa;
}

/* Cloud section in details */
.vm-gol-card__cloud-section {
    margin-bottom: 8px;
}
.vm-gol-card__cloud-row {
    display: flex;
    gap: 8px;
    padding: 3px 0;
    font-size: 0.85rem;
    border-bottom: 1px dotted var(--vm-border-color);
    align-items: center;
}
.vm-gol-card__cloud-row:last-child {
    border-bottom: none;
}
.vm-gol-card__cloud-name {
    width: 65px;
    font-weight: 600;
    color: var(--vm-text-muted);
}
.vm-gol-card__cloud-val {
    flex: 1;
    font-weight: 600;
    /* color inherited from .vm-gol-card — allows conditional classes to override */
}

.vm-gol-card__detail-row {
    font-size: 0.85rem;
    padding: 4px 0;
    /* color inherited from .vm-gol-card */
}

.vm-gol-card__detail-row img {
    vertical-align: middle;
    height: 16px;
    width: 16px;
}

/* ========================================================================
   GOLUBARSKA - DARK MODE
   ======================================================================== */
/* v4.0 — header dark mode is inline above (.vm-gol-header) */

[data-theme="dark"] .vm-gol-model-btn--active {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d1b69 100%) !important;
}

[data-theme="dark"] .vm-gol-region-panel {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .vm-gol-region-option:hover,
[data-theme="dark"] .vm-gol-region-option:focus {
    background: var(--vm-bg-tertiary);
}

[data-theme="dark"] .vm-gol-region-option--active {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.1);
}

[data-theme="dark"] .vm-gol-freshness-dot--inactive {
    background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .vm-gol-forecast-table th {
    background: var(--vm-bg-tertiary);
}

[data-theme="dark"] .vm-gol-hg--info { background: rgba(148, 163, 184, 0.1) !important; color: #94a3b8 !important; }
[data-theme="dark"] .vm-gol-hg--temp { background: rgba(59, 130, 246, 0.12) !important; color: #60a5fa !important; }
[data-theme="dark"] .vm-gol-hg--wind { background: rgba(34, 197, 94, 0.12) !important; color: #4ade80 !important; }
[data-theme="dark"] .vm-gol-hg--cloud { background: rgba(245, 158, 11, 0.12) !important; color: #fbbf24 !important; }
[data-theme="dark"] .vm-gol-th--confidence { background: rgba(99, 102, 241, 0.15) !important; color: #818cf8 !important; }

[data-theme="dark"] .vm-gol-row--alt td {
    background: var(--vm-bg-secondary);
}

[data-theme="dark"] .vm-gol-day-separator td {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d1b69 100%) !important;
}

[data-theme="dark"] .vm-gol-sun-row td {
    background: rgba(59, 130, 246, 0.08);
}

[data-theme="dark"] .vm-gol-chart-container {
    background: var(--vm-bg-secondary);
}

[data-theme="dark"] .vm-gol-countdown-circle::before {
    background: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .vm-gol-view-toggle {
    background: var(--vm-bg-tertiary);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .vm-gol-cards-day__header {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d1b69 100%);
}

[data-theme="dark"] .vm-gol-table-scroll-hint {
    color: var(--vm-text-muted);
}

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

[data-theme="dark"] .vm-gol-card__metric {
    background: var(--vm-bg-tertiary);
}

/* Dark mode: confidence badge — dark bg + light text for readability */
[data-theme="dark"] .vm-gol-confidence--very-high { background: #065f46 !important; color: #6ee7b7 !important; border-color: #059669 !important; }
[data-theme="dark"] .vm-gol-confidence--high { background: #14532d !important; color: #86efac !important; border-color: #22c55e !important; }
[data-theme="dark"] .vm-gol-confidence--medium { background: #78350f !important; color: #fde68a !important; border-color: #f59e0b !important; }
[data-theme="dark"] .vm-gol-confidence--low { background: #7f1d1d !important; color: #fca5a5 !important; border-color: #ef4444 !important; }

/* Dark mode: risk badge */
[data-theme="dark"] .vm-gol-risk-badge--yes { background: #7f1d1d !important; color: #fca5a5 !important; border-color: #dc2626 !important; }
[data-theme="dark"] .vm-gol-risk-badge--no { background: #14532d !important; color: #86efac !important; border-color: #16a34a !important; }

/* Dark mode: temperature colors — bright on dark, same warning logic */
[data-theme="dark"] .vm-gol-temp--very-cold,
[data-theme="dark"] td.vm-gol-temp--very-cold,
[data-theme="dark"] span.vm-gol-temp--very-cold { color: #a78bfa !important; }
[data-theme="dark"] .vm-gol-temp--freezing,
[data-theme="dark"] td.vm-gol-temp--freezing,
[data-theme="dark"] span.vm-gol-temp--freezing { color: #818cf8 !important; }
[data-theme="dark"] .vm-gol-temp--cold,
[data-theme="dark"] td.vm-gol-temp--cold,
[data-theme="dark"] span.vm-gol-temp--cold { color: #60a5fa !important; }
[data-theme="dark"] .vm-gol-temp--cool,
[data-theme="dark"] td.vm-gol-temp--cool,
[data-theme="dark"] span.vm-gol-temp--cool { color: #38bdf8 !important; }
[data-theme="dark"] .vm-gol-temp--optimal,
[data-theme="dark"] td.vm-gol-temp--optimal,
[data-theme="dark"] span.vm-gol-temp--optimal { color: #4ade80 !important; }
[data-theme="dark"] .vm-gol-temp--warm,
[data-theme="dark"] td.vm-gol-temp--warm,
[data-theme="dark"] span.vm-gol-temp--warm { color: #fbbf24 !important; }
[data-theme="dark"] .vm-gol-temp--hot,
[data-theme="dark"] td.vm-gol-temp--hot,
[data-theme="dark"] span.vm-gol-temp--hot { color: #f87171 !important; }

/* Dark mode: wind warning colors — table td + card span */
[data-theme="dark"] .vm-gol-wind--moderate,
[data-theme="dark"] td.vm-gol-wind--moderate,
[data-theme="dark"] span.vm-gol-wind--moderate { color: #fbbf24 !important; }
[data-theme="dark"] .vm-gol-wind--strong,
[data-theme="dark"] td.vm-gol-wind--strong,
[data-theme="dark"] span.vm-gol-wind--strong { color: #f87171 !important; }

/* Dark mode: cloud warning colors — table td + card span */
[data-theme="dark"] .vm-gol-cloud--warning,
[data-theme="dark"] td.vm-gol-cloud--warning,
[data-theme="dark"] span.vm-gol-cloud--warning { color: #fbbf24 !important; }
[data-theme="dark"] .vm-gol-cloud--danger,
[data-theme="dark"] td.vm-gol-cloud--danger,
[data-theme="dark"] span.vm-gol-cloud--danger { color: #f87171 !important; }

/* Dark mode: CARD-specific color overrides
   CRITICAL: Must use .vm-gol-page ancestor for specificity > body.page .entry-content span (0,3,2)
   With .vm-gol-page prefix, specificity becomes 0,4,0 which beats 0,3,2 */
/* Temperature on card metric values */
[data-theme="dark"] .vm-gol-page .vm-gol-card__metric-value.vm-gol-temp--very-cold { color: #a78bfa !important; }
[data-theme="dark"] .vm-gol-page .vm-gol-card__metric-value.vm-gol-temp--freezing { color: #818cf8 !important; }
[data-theme="dark"] .vm-gol-page .vm-gol-card__metric-value.vm-gol-temp--cold { color: #60a5fa !important; }
[data-theme="dark"] .vm-gol-page .vm-gol-card__metric-value.vm-gol-temp--cool { color: #38bdf8 !important; }
[data-theme="dark"] .vm-gol-page .vm-gol-card__metric-value.vm-gol-temp--optimal { color: #4ade80 !important; }
[data-theme="dark"] .vm-gol-page .vm-gol-card__metric-value.vm-gol-temp--warm { color: #fbbf24 !important; }
[data-theme="dark"] .vm-gol-page .vm-gol-card__metric-value.vm-gol-temp--hot { color: #f87171 !important; }

/* Wind speed on card wind values */
[data-theme="dark"] .vm-gol-page .vm-gol-card__wind-val.vm-gol-wind--moderate { color: #fbbf24 !important; }
[data-theme="dark"] .vm-gol-page .vm-gol-card__wind-val.vm-gol-wind--strong { color: #f87171 !important; }

/* Cloud coverage on card cloud values */
[data-theme="dark"] .vm-gol-page .vm-gol-card__cloud-val.vm-gol-cloud--warning { color: #fbbf24 !important; }
[data-theme="dark"] .vm-gol-page .vm-gol-card__cloud-val.vm-gol-cloud--danger { color: #f87171 !important; }

/* Confidence badges in cards */
[data-theme="dark"] .vm-gol-page .vm-gol-card__confidence .vm-gol-confidence--very-high { background: #065f46 !important; color: #6ee7b7 !important; border-color: #059669 !important; }
[data-theme="dark"] .vm-gol-page .vm-gol-card__confidence .vm-gol-confidence--high { background: #14532d !important; color: #86efac !important; border-color: #22c55e !important; }
[data-theme="dark"] .vm-gol-page .vm-gol-card__confidence .vm-gol-confidence--medium { background: #78350f !important; color: #fde68a !important; border-color: #f59e0b !important; }
[data-theme="dark"] .vm-gol-page .vm-gol-card__confidence .vm-gol-confidence--low { background: #7f1d1d !important; color: #fca5a5 !important; border-color: #ef4444 !important; }

/* Risk badges in cards */
[data-theme="dark"] .vm-gol-page .vm-gol-card__detail-row .vm-gol-risk-badge--yes { background: #7f1d1d !important; color: #fca5a5 !important; border-color: #dc2626 !important; }
[data-theme="dark"] .vm-gol-page .vm-gol-card__detail-row .vm-gol-risk-badge--no { background: #14532d !important; color: #86efac !important; border-color: #16a34a !important; }

/* Dark mode: main wind grid background */
[data-theme="dark"] .vm-gol-card__wind-grid--main {
    background: var(--vm-bg-tertiary);
}

/* ========================================================================
   GOLUBARSKA - RESPONSIVE
   ======================================================================== */
@media (max-width: 768px) {
    .vm-gol-header {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 8px;
    }
    .vm-gol-header__title-zone {
        text-align: center;
        align-items: center;
    }
    .vm-gol-header__cities {
        text-align: center;
    }
    .vm-gol-header__updated {
        justify-content: center;
    }
    /* Stats in a row below title on mobile */
    .vm-gol-header__stat {
        padding: 8px 10px;
        min-width: 0;
    }
    .vm-gol-header__stat-label {
        font-size: 0.5rem;
    }
    .vm-gol-header__stat-value {
        font-size: 0.72rem;
    }
    .vm-gol-header__stat-countdown {
        font-size: 0.6rem;
    }

    .vm-gol-status-card__value {
        font-size: 0.72rem;
    }

    .vm-gol-status-card__value--countdown {
        font-size: 0.65rem;
    }

    .vm-gol-status-card__label {
        font-size: 0.52rem;
    }

    .vm-gol-countdown-circle {
        width: 32px;
        height: 32px;
    }

    .vm-gol-countdown-circle::before {
        width: 24px;
        height: 24px;
    }

    .vm-gol-model-toggle {
        flex-direction: column;
    }

    .vm-gol-model-btn {
        flex-direction: row;
        gap: 8px;
        padding: 10px 14px;
    }

    .vm-gol-model-btn__icon { font-size: 1rem; margin-bottom: 0; }
    .vm-gol-model-btn__desc { display: none; }

    .vm-gol-region-trigger {
        font-size: 0.82rem;
        padding: 8px 10px;
    }

    .vm-gol-competition-badge {
        font-size: 0.82rem;
        padding: 8px 16px;
        letter-spacing: 1px;
    }

    .vm-gol-forecast-table {
        font-size: 0.78rem;
    }

    .vm-gol-forecast-table th,
    .vm-gol-forecast-table td {
        padding: 4px 5px;
    }

    .vm-gol-wind-arrow {
        width: 14px;
        height: 14px;
    }
    .vm-gol-wind-label {
        font-size: 0.65rem;
    }

    .vm-gol-weather-icon {
        width: 36px !important;
        height: 36px !important;
    }

    .vm-gol-confidence-badge {
        font-size: 0.6rem !important;
        padding: 2px 6px !important;
    }
    .vm-gol-confidence-badge__icon {
        font-size: 0.55rem !important;
    }

    .vm-gol-day-separator td {
        font-size: 0.9rem;
        padding: 10px 12px;
    }
    .vm-gol-day-separator__region {
        display: block;
        font-size: 0.68rem;
        margin-left: 0;
        margin-top: 2px;
    }

    .vm-gol-cards-day__region {
        font-size: 0.65rem;
        padding: 2px 8px;
    }

    .vm-gol-chart-container__grid {
        grid-template-columns: 1fr;
    }

    .vm-gol-chart-container__item {
        height: 180px;
    }

    .vm-gol-chart-container__item--windrose {
        height: 340px;
    }

    .vm-gol-sun-info {
        gap: 16px;
        font-size: 0.8rem;
    }

    .vm-gol-legend__grid {
        flex-direction: column;
        gap: 12px;
    }

    .vm-gol-legend__items {
        font-size: 0.7rem;
    }

    /* Card view: keep mobile fonts compact */
    .vm-gol-card__metric-value {
        font-size: 0.88rem;
    }
    .vm-gol-card__metric-label {
        font-size: 0.65rem;
    }
    .vm-gol-card__metric-sub {
        font-size: 0.68rem;
    }
    .vm-gol-card__desc {
        font-size: 0.78rem;
    }
    .vm-gol-card__wind-row {
        font-size: 0.75rem;
    }
    .vm-gol-card__cloud-row {
        font-size: 0.78rem;
    }
    .vm-gol-card__detail-row {
        font-size: 0.78rem;
    }
    .vm-gol-card__detail-title {
        font-size: 0.72rem;
    }
}

@media (max-width: 480px) {
    .vm-gol-header {
        padding: 10px;
        gap: 6px;
    }
    .vm-gol-header__stat {
        padding: 6px 8px;
    }
    .vm-gol-header__stat-label {
        font-size: 0.46rem;
    }
    .vm-gol-header__stat-value {
        font-size: 0.62rem;
    }
    .vm-gol-header__cities {
        font-size: 0.98rem;
    }
    .vm-gol-freshness-dot {
        width: 6px;
        height: 6px;
    }

    .vm-gol-forecast-table {
        font-size: 0.72rem;
    }

    .vm-gol-wind-arrow {
        width: 12px;
        height: 12px;
    }
    .vm-gol-wind-label {
        font-size: 0.6rem;
    }

    .vm-gol-weather-icon {
        width: 28px !important;
        height: 28px !important;
    }

    .vm-gol-confidence-badge {
        font-size: 0.55rem !important;
        padding: 1px 5px !important;
    }
    .vm-gol-confidence-badge__icon {
        font-size: 0.5rem !important;
    }

    .vm-gol-cards-day__header {
        flex-direction: column;
        text-align: center;
        font-size: 0.82rem;
    }

    .vm-gol-card__top {
        flex-wrap: wrap;
    }

    .vm-gol-card__desc {
        order: 4;
        width: 100%;
        font-size: 0.72rem;
    }
}

/* ============================================================
   GOLUBARSKA — SERBIA PARAMETER MAP
   ============================================================ */
.vm-gol-serbia-map {
    background: var(--vm-card-bg);
    border-radius: var(--vm-radius);
    border: 1px solid var(--vm-border-color);
    padding: 20px;
    margin: 12px 0;
}

.vm-gol-serbia-map__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.vm-gol-serbia-map__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.vm-gol-serbia-map__flag {
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    flex-shrink: 0;
}

.vm-gol-serbia-map__controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vm-gol-serbia-map__label {
    font-size: 0.85rem;
    color: var(--vm-text-secondary);
    font-weight: 500;
}

.vm-gol-serbia-map__select {
    padding: 8px 28px 8px 10px;
    border-radius: var(--vm-radius-small);
    border: 1px solid var(--vm-border-color);
    background: var(--vm-bg-secondary);
    color: var(--vm-text-primary);
    font-size: 0.82rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}

.vm-gol-serbia-map__load {
    padding: 8px 16px;
    border-radius: var(--vm-radius-small);
    border: 1px solid #3b82f6;
    background: #3b82f6;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.vm-gol-serbia-map__load:hover {
    background: #2563eb;
}

.vm-gol-serbia-map__load:active {
    transform: scale(0.97);
}

.vm-gol-serbia-map__load:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.vm-gol-serbia-map__container {
    border-radius: var(--vm-radius);
    overflow: hidden;
}

/* v2.1 — Map redesign: title, pills, flight toggle, legend */
.vm-gol-serbia-map__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.vm-gol-map-title-row {
    text-align: center;
}
.vm-gol-serbia-map__desc {
    font-size: 0.8rem;
    color: var(--vm-text-muted);
    margin: 4px 0 0;
}
.vm-gol-serbia-map__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}
.vm-gol-map-ctrl-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vm-gol-map-ctrl-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vm-text-muted);
}
/* Param pills */
.vm-gol-map-param-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.vm-gol-map-pill {
    padding: 5px 12px;
    border: 1px solid var(--vm-border-color);
    border-radius: 999px;
    background: var(--vm-bg-secondary);
    color: var(--vm-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    white-space: nowrap;
}
.vm-gol-map-pill:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}
.vm-gol-map-pill--active {
    background: var(--vm-gradient-primary) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 2px 6px rgba(59,130,246,0.25);
}
/* ── Vertical separator between control sections ── */
.vm-gol-map-ctrl-sep {
    width: 1px;
    align-self: stretch;
    background: var(--vm-border-color);
    margin: 4px 2px;
    opacity: 0.5;
    min-height: 40px;
}

/* ── Time slider + player controls ── */
.vm-gol-map-time-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
}
.vm-gol-map-slider-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.vm-gol-map-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--vm-border-color);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.vm-gol-map-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vm-gol-map-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vm-gol-map-step-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--vm-border-color);
    border-radius: 50%;
    background: var(--vm-bg-secondary);
    color: var(--vm-text-primary);
    font-size: 0.65rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    font-family: inherit;
    padding: 0;
    flex-shrink: 0;
}
.vm-gol-map-step-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}
.vm-gol-map-player-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.vm-gol-map-play-btn {
    padding: 4px 12px;
    border: 1px solid var(--vm-border-color);
    border-radius: 999px;
    background: var(--vm-bg-secondary);
    color: var(--vm-text-primary);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    white-space: nowrap;
}
.vm-gol-map-play-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}
.vm-gol-map-play-btn--active {
    background: #ef4444 !important;
    color: #fff !important;
    border-color: #ef4444 !important;
}
.vm-gol-map-speed-btns {
    display: flex;
    gap: 2px;
}
.vm-gol-map-speed-btn {
    padding: 3px 8px;
    border: 1px solid var(--vm-border-color);
    border-radius: 4px;
    background: var(--vm-bg-secondary);
    color: var(--vm-text-muted);
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.vm-gol-map-speed-btn:hover {
    border-color: #3b82f6;
}
.vm-gol-map-speed-btn--active {
    background: #3b82f6 !important;
    color: #fff !important;
    border-color: #3b82f6 !important;
}
.vm-gol-map-time-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--vm-text-secondary);
    margin-left: auto;
    white-space: nowrap;
}

/* Actions row */
.vm-gol-map-ctrl-row--actions {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
/* Flight toggle */
.vm-gol-map-flight-toggle {
    padding: 7px 14px;
    border: 1.5px solid #f59e0b;
    border-radius: 999px;
    background: transparent;
    color: #f59e0b;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.vm-gol-map-flight-toggle:hover,
.vm-gol-map-flight-toggle--active {
    background: #f59e0b;
    color: #fff;
}
/* Flight/drift legend */
.vm-gol-flight-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 16px;
    margin-top: 8px;
    background: var(--vm-bg-secondary);
    border-radius: var(--vm-radius-small);
    border: 1px solid var(--vm-border-color);
    font-size: 0.78rem;
}
.vm-gol-flight-legend__title {
    font-weight: 700;
    color: var(--vm-text-primary);
    margin-bottom: 2px;
}
.vm-gol-flight-legend__row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.vm-gol-flight-legend__item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--vm-text-secondary);
}
.vm-gol-flight-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.vm-gol-flight-line {
    width: 24px;
    height: 0;
    flex-shrink: 0;
}
.vm-gol-flight-line--solid {
    border-top: 3px solid var(--vm-text-secondary);
}
.vm-gol-flight-line--dashed {
    border-top: 2px dashed var(--vm-text-secondary);
}
.vm-gol-flight-note {
    margin: 4px 0 0;
    font-size: 0.72rem;
    font-style: italic;
    color: var(--vm-text-muted);
    line-height: 1.4;
}

.vm-gol-serbia-map__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--vm-text-secondary);
    font-size: 0.88rem;
}

/* ── Map markers ── */
.vm-gol-map-marker-wrapper {
    background: none !important;
    border: none !important;
}

.vm-gol-map-marker {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.72rem;
    line-height: 1;
    border: 2.5px solid rgba(255,255,255,0.7);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transition: transform 0.15s;
    text-align: center;
}

.vm-gol-map-marker:hover {
    transform: scale(1.15);
    z-index: 1000 !important;
}

.vm-gol-map-marker__val {
    white-space: nowrap;
}

.vm-gol-map-marker__label {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--vm-text-primary);
    text-shadow: 0 0 3px var(--vm-bg-primary), 0 0 3px var(--vm-bg-primary);
    pointer-events: none;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Weather icon marker — white circle background ── */
.vm-gol-map-marker--weather {
    background: rgba(255,255,255,0.88) !important;
    border: 1.5px solid rgba(0,0,0,0.1) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    padding: 3px !important;
    width: 40px !important;
    height: 40px !important;
}

.vm-gol-map-marker--weather img {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
[data-theme="dark"] .vm-gol-map-marker--weather {
    background: rgba(30,41,59,0.88) !important;
    border-color: rgba(255,255,255,0.15) !important;
}

/* ── Map wind dropdown ── */
.vm-gol-serbia-map__select--wind {
    min-width: 120px;
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
}

.vm-gol-serbia-map__select--wind:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 1px;
}

[data-theme="dark"] .vm-gol-serbia-map__select--wind {
    background: rgba(59, 130, 246, 0.15);
    border-color: #60a5fa;
}

/* ── Wind direction marker (arrow style) ── */
.vm-gol-map-marker--winddir {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    flex-direction: column;
    gap: 1px;
}

.vm-gol-map-marker__arrow {
    display: block;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}

.vm-gol-map-marker__dir-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    text-shadow: 0 0 3px var(--vm-bg-primary), 0 0 3px var(--vm-bg-primary);
    text-align: center;
    line-height: 1;
}

/* ── Wind rose height buttons ── */
.vm-gol-winddir-heights {
    display: flex;
    gap: 3px;
    justify-content: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.vm-gol-winddir-btn {
    padding: 2px 7px;
    font-size: 0.62rem;
    border-radius: 10px;
    border: 1px solid var(--vm-border-color);
    background: var(--vm-bg-secondary);
    color: var(--vm-text-secondary);
    cursor: pointer;
    font-weight: 600;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s;
}

.vm-gol-winddir-btn:hover {
    background: var(--vm-bg-tertiary);
}

.vm-gol-winddir-btn--active {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
}

[data-theme="dark"] .vm-gol-winddir-btn {
    background: var(--vm-bg-tertiary);
    color: var(--vm-text-secondary);
    border-color: var(--vm-border-color);
}

[data-theme="dark"] .vm-gol-winddir-btn:hover {
    background: #475569;
}

/* ── Map time selector ── */
.vm-gol-serbia-map__select--time {
    min-width: 140px;
}

/* ── Map popup wind section ── */
.vm-gol-map-popup__time {
    font-size: 0.72rem;
    color: var(--vm-text-muted);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--vm-border-color);
}

.vm-gol-map-popup__wind-section {
    margin: 6px 0;
    padding: 6px 0;
    border-top: 1px solid var(--vm-border-color);
    border-bottom: 1px solid var(--vm-border-color);
}

.vm-gol-map-popup__wind-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--vm-text-secondary);
    margin-bottom: 4px;
}

.vm-gol-map-popup__wind-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.72rem;
    padding: 1px 0;
}

.vm-gol-map-popup__wind-h {
    color: var(--vm-text-muted);
    min-width: 40px;
}

.vm-gol-map-popup__wind-v {
    font-weight: 600;
    color: var(--vm-text-primary);
    text-align: right;
}

/* ── Map popup ── */
.vm-gol-map-popup-wrap .leaflet-popup-content-wrapper {
    border-radius: var(--vm-radius-small) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}

.vm-gol-map-popup-wrap .leaflet-popup-content {
    margin: 0 !important;
    padding: 0 !important;
}

.vm-gol-map-popup {
    padding: 12px 14px;
    font-size: 0.82rem;
    min-width: 180px;
}

.vm-gol-map-popup__title {
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--vm-border-color);
    color: var(--vm-text-primary);
}

.vm-gol-map-popup__grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vm-gol-map-popup__row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.vm-gol-map-popup__label {
    color: var(--vm-text-secondary);
    font-size: 0.78rem;
    white-space: nowrap;
}

.vm-gol-map-popup__val {
    font-weight: 600;
    color: var(--vm-text-primary);
    font-size: 0.78rem;
    text-align: right;
}

/* ── Map legend ── */
.vm-gol-map-legend {
    margin-top: 12px;
    text-align: center;
}

.vm-gol-map-legend__title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vm-text-secondary);
    margin-bottom: 6px;
}

.vm-gol-map-legend__bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px;
    border-radius: 6px;
    overflow: hidden;
}

.vm-gol-map-legend__item {
    padding: 4px 8px;
    font-size: 0.68rem;
    font-weight: 600;
    min-width: 30px;
    text-align: center;
}

/* ── Dark mode — map section ── */
[data-theme="dark"] .vm-gol-serbia-map {
    background: var(--vm-card-bg);
    border-color: var(--vm-border-color);
}

[data-theme="dark"] .vm-gol-serbia-map__select {
    background: var(--vm-bg-tertiary);
    color: var(--vm-text-primary);
    border-color: var(--vm-border-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23cbd5e1' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}

[data-theme="dark"] .vm-gol-map-marker {
    border-color: rgba(255,255,255,0.5);
    box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

[data-theme="dark"] .vm-gol-map-marker__val {
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

[data-theme="dark"] .vm-gol-map-marker__label {
    color: #e2e8f0;
    text-shadow: 0 0 4px #0f172a, 0 0 4px #0f172a, 0 0 8px #0f172a;
}

[data-theme="dark"] .vm-gol-map-marker__dir-label {
    color: #e2e8f0;
    text-shadow: 0 0 4px #0f172a, 0 0 4px #0f172a;
}

[data-theme="dark"] .vm-gol-map-popup-wrap .leaflet-popup-content-wrapper {
    background: var(--vm-card-bg) !important;
    color: var(--vm-text-primary) !important;
}

[data-theme="dark"] .vm-gol-map-popup-wrap .leaflet-popup-tip {
    background: var(--vm-card-bg) !important;
}

[data-theme="dark"] .vm-gol-map-popup__title {
    color: var(--vm-text-primary);
    border-color: var(--vm-border-color);
}

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

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

/* ── PSI Popup Breakdown ── */
.vm-gol-psi-popup-wrap .leaflet-popup-content {
    margin: 0;
    padding: 0;
    min-width: 240px;
}
.vm-gol-psi-popup {
    font-size: 0.78rem;
    padding: 12px;
}
.vm-gol-psi-popup__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 8px 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--vm-border-color);
}
.vm-gol-psi-popup__score {
    font-weight: 700;
    font-size: 0.85rem;
}
.vm-gol-psi-popup__factors {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vm-gol-psi-popup__factor {
    display: grid;
    grid-template-columns: 110px 1fr 36px;
    align-items: center;
    gap: 6px;
}
.vm-gol-psi-popup__factor-label {
    font-size: 0.7rem;
    color: var(--vm-text-muted);
    white-space: nowrap;
}
.vm-gol-psi-popup__factor-bar {
    height: 6px;
    background: var(--vm-bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}
.vm-gol-psi-popup__factor-bar > div {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}
.vm-gol-psi-popup__factor-val {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--vm-text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.vm-gol-psi-popup__detail {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--vm-border-color);
    font-size: 0.68rem;
    color: var(--vm-text-muted);
}

/* ── Risk Info Box ── */
.vm-gol-risk-info {
    margin: 12px 0;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-left: 4px solid #ef4444;
    border-radius: var(--vm-radius-small);
}
.vm-gol-risk-info__text {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--vm-text-secondary);
}
[data-theme="dark"] .vm-gol-risk-info {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
}

/* ── PSI Daily Summary — matrix table (regions × days) ── */
.vm-gol-psi-daily {
    margin: 20px 0;
    padding: 14px;
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius);
}
.vm-gol-psi-daily__header {
    margin-bottom: 10px;
}
.vm-gol-psi-daily__title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--vm-text-primary);
}
.vm-gol-psi-daily__hint {
    font-size: 0.72rem;
    color: var(--vm-text-muted);
    margin: 0;
    line-height: 1.4;
}
.vm-gol-psi-daily__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--vm-radius-small);
    background: var(--vm-card-bg);
}
.vm-gol-psi-daily__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    min-width: 480px;
}
.vm-gol-psi-daily__table th,
.vm-gol-psi-daily__table td {
    padding: 6px 8px;
    text-align: center;
    border-bottom: 1px solid var(--vm-border-color);
}
.vm-gol-psi-daily__table thead th {
    background: var(--vm-bg-tertiary);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--vm-text-primary);
    position: sticky;
    top: 0;
    z-index: 1;
}
.vm-gol-psi-daily__th-region {
    text-align: left !important;
    padding-left: 12px !important;
    min-width: 110px;
}
.vm-gol-psi-daily__th-day {
    min-width: 68px;
}
.vm-gol-psi-daily__th-dayname {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--vm-text-primary);
}
.vm-gol-psi-daily__th-daydate {
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--vm-text-muted);
}
.vm-gol-psi-daily__th-avg {
    min-width: 68px;
    background: var(--vm-bg-secondary) !important;
    border-left: 2px solid var(--vm-border-color);
}

.vm-gol-psi-daily__td-region {
    text-align: left !important;
    padding-left: 12px !important;
    font-weight: 600;
    color: var(--vm-text-primary);
    background: var(--vm-bg-secondary);
    position: sticky;
    left: 0;
    z-index: 1;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vm-gol-psi-daily__td-psi,
.vm-gol-psi-daily__td-avg {
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.vm-gol-psi-daily__td-avg {
    border-left: 2px solid var(--vm-border-color);
}
.vm-gol-psi-daily__td-na {
    color: var(--vm-text-muted);
    font-size: 0.75rem;
}

.vm-gol-psi-daily__tr-total td {
    font-weight: 700;
    border-top: 2px solid var(--vm-border-color);
    font-size: 0.85rem;
}
.vm-gol-psi-daily__tr-total .vm-gol-psi-daily__td-region {
    background: var(--vm-bg-tertiary);
    color: var(--vm-text-primary);
}

/* Legend */
.vm-gol-psi-daily__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--vm-border-color);
    font-size: 0.72rem;
    color: var(--vm-text-secondary);
}
.vm-gol-psi-daily__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.vm-gol-psi-daily__legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
}

/* Mobile */
@media (max-width: 600px) {
    .vm-gol-psi-daily {
        padding: 10px;
    }
    .vm-gol-psi-daily__table {
        font-size: 0.72rem;
    }
    .vm-gol-psi-daily__table th,
    .vm-gol-psi-daily__table td {
        padding: 4px 6px;
    }
    .vm-gol-psi-daily__td-region {
        max-width: 100px;
        font-size: 0.72rem;
    }
}

/* ── Responsive — map section ── */
@media (max-width: 768px) {
    .vm-gol-serbia-map {
        padding: 14px;
        margin: 16px 0;
    }

    .vm-gol-serbia-map__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .vm-gol-serbia-map__title {
        font-size: 0.95rem;
    }

    .vm-gol-serbia-map__controls {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .vm-gol-map-ctrl-row {
        width: 100%;
    }
    .vm-gol-map-param-pills {
        flex-wrap: wrap;
        gap: 4px;
    }
    .vm-gol-map-pill {
        padding: 4px 10px;
        font-size: 0.7rem;
    }
    .vm-gol-map-ctrl-sep {
        width: 100%;
        height: 1px;
        min-height: 1px;
        margin: 2px 0;
    }
    .vm-gol-map-time-controls {
        min-width: 0;
    }
    /* Player moved below map on mobile via JS */
    .vm-gol-map-mobile-player {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 10px 12px;
        background: var(--vm-bg-secondary);
        border-radius: 0 0 var(--vm-radius-small) var(--vm-radius-small);
        border: 1px solid var(--vm-border-color);
        border-top: none;
    }
    .vm-gol-map-ctrl-row--actions {
        margin-left: 0;
        justify-content: center;
        width: 100%;
    }

    .vm-gol-serbia-map__select {
        flex: 1;
        font-size: 0.82rem;
    }

    .vm-gol-serbia-map__load {
        font-size: 0.82rem;
        padding: 8px 12px;
    }

    #vm-gol-map {
        height: 400px !important;
    }

    .vm-gol-map-marker {
        width: 36px;
        height: 36px;
        font-size: 0.62rem;
        border-width: 2px;
    }

    .vm-gol-map-marker__label {
        font-size: 0.5rem;
        max-width: 70px;
    }

    .vm-gol-map-popup {
        font-size: 0.78rem;
        min-width: 150px;
    }

    .vm-gol-map-legend__item {
        padding: 3px 5px;
        font-size: 0.6rem;
        min-width: 24px;
    }

    .vm-gol-serbia-map__controls {
        flex-wrap: wrap;
    }

    .vm-gol-serbia-map__select--time {
        min-width: 100px;
        font-size: 0.78rem;
    }

    .vm-gol-serbia-map__select--wind {
        min-width: 100px;
        font-size: 0.78rem;
    }

    .vm-gol-serbia-map__select--param {
        font-size: 0.78rem;
    }

    .vm-gol-serbia-map__flag {
        width: 20px;
        height: 13px;
    }

    #vm-gol-map {
        height: 500px !important;
    }

    .vm-gol-winddir-btn {
        font-size: 0.58rem;
        padding: 2px 5px;
    }

    .vm-gol-map-marker--weather {
        width: 34px !important;
        height: 34px !important;
    }

    .vm-gol-map-marker--weather img {
        width: 30px;
        height: 30px;
    }

    .vm-gol-map-marker__arrow {
        width: 26px;
        height: 26px;
    }

    .vm-gol-map-marker__dir-label {
        font-size: 0.72rem;
    }
}

@media (max-width: 480px) {
    .vm-gol-map-pill {
        padding: 3px 8px;
        font-size: 0.65rem;
    }
    .vm-gol-map-ctrl-label {
        font-size: 0.62rem;
    }
    .vm-gol-map-flight-toggle {
        font-size: 0.68rem;
        padding: 5px 10px;
    }
}

/* =====================================================================
   TRODNEVNA PROGNOZA (v1.0)
   ===================================================================== */

.vm-tro-page {
    max-width: 1200px;
    margin: 0 auto;
}

/* Intro text */
.vm-tro-intro {
    margin-bottom: 1.25rem;
}

.vm-tro-intro p {
    font-size: 0.92rem;
    color: var(--vm-text-secondary, #475569);
    line-height: 1.7;
    margin: 0;
}

/* Loading spinner */
.vm-tro-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    gap: 1rem;
}

.vm-tro-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--vm-border-color, #cbd5e1);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: vm-tro-spin 0.8s linear infinite;
}

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

.vm-tro-loading__text {
    color: var(--vm-text-muted, #64748b);
    font-size: 0.9rem;
}

/* Error state */
.vm-tro-error {
    display: none;
    text-align: center;
    padding: 2rem 1rem;
    color: var(--vm-text-secondary, #475569);
}

.vm-tro-error__text {
    margin-bottom: 1rem;
}

/* Toolbar */
.vm-tro-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
    font-size: 0.82rem;
    color: var(--vm-text-muted, #64748b);
}

.vm-tro-toolbar__label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--vm-text-secondary, #475569);
    background: var(--vm-bg-secondary, #f1f5f9);
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid var(--vm-border-color, #cbd5e1);
}

.vm-tro-toolbar__label strong {
    color: var(--vm-text-primary, #0f172a);
    font-weight: 600;
}

/* Freshness indicator dot */
.vm-tro-fresh-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

.vm-tro-fresh-dot--fresh {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.vm-tro-fresh-dot--aging {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.vm-tro-fresh-dot--stale {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.vm-tro-toolbar__label svg {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

/* Refresh button removed */
.vm-tro-toolbar__refresh {
    display: none;
    border-radius: var(--vm-radius-small, 8px);
    background: var(--vm-bg-primary, #fff);
    color: var(--vm-text-secondary, #475569);
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.2s, border-color 0.2s;
}

.vm-tro-toolbar__refresh:hover {
    background: var(--vm-bg-secondary, #f1f5f9);
    border-color: #3b82f6;
    color: #3b82f6;
}

.vm-tro-toolbar__refresh svg {
    width: 14px;
    height: 14px;
}

/* 3-column grid */
.vm-tro-days {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.vm-tro-days[style*="display"] {
    display: grid !important;
}

/* Day card */
.vm-tro-day-card {
    background: var(--vm-card-bg, #fff);
    border-radius: var(--vm-radius, 12px);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.vm-tro-day-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Card header */
.vm-tro-day-card__header {
    padding: 0.75rem 1rem;
    background: var(--vm-gradient-primary, linear-gradient(135deg, #3b82f6 0%, #6366f1 100%));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vm-tro-day-card__label {
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

/* Vremenska prognoza kicker iznad datuma (homepage widget) */
.vm-tro-day-card__title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.vm-tro-day-card__kicker {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.8;
    line-height: 1.1;
}

.vm-tro-day-card__date {
    font-size: 1.05rem;
    font-weight: 700;
    opacity: 1;
}

/* Map container */
.vm-tro-day-card__map {
    height: 280px;
    background: var(--vm-bg-tertiary, #e2e8f0);
    position: relative;
}

/* Marker styling */
.vm-tro-marker {
    background: rgba(255, 255, 255, 0.93) !important;
    border: 2px solid rgba(255, 255, 255, 0.98) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.08);
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
}

.vm-tro-marker img {
    display: block;
    width: 30px;
    height: 30px;
}

[data-theme="dark"] .vm-tro-marker {
    background: rgba(51, 65, 85, 0.95) !important;
    border-color: rgba(100, 116, 139, 0.9) !important;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5) !important;
}

.vm-tro-tooltip {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Card body */
.vm-tro-day-card__body {
    padding: 1rem;
}

.vm-tro-day-card__desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--vm-text-primary, #0f172a);
    margin-bottom: 1rem;
}

/* Temperature cards */
.vm-tro-temps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.vm-tro-temp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.6rem 0.5rem;
    border-radius: var(--vm-radius-small, 8px);
}

.vm-tro-temp__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.7;
}

.vm-tro-temp--min .vm-tro-temp__icon { color: #2563eb; }
.vm-tro-temp--max .vm-tro-temp__icon { color: #dc2626; }

.vm-tro-temp--min {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
}

.vm-tro-temp--max {
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
    border: 1px solid #fca5a5;
}

.vm-tro-temp__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.vm-tro-temp--min .vm-tro-temp__label { color: #1e40af; }
.vm-tro-temp--max .vm-tro-temp__label { color: #991b1b; }

.vm-tro-temp__value {
    font-size: 1.1rem;
    font-weight: 700;
}

.vm-tro-temp--min .vm-tro-temp__value { color: #1d4ed8; }
.vm-tro-temp--max .vm-tro-temp__value { color: #dc2626; }

/* Wind */
.vm-tro-day-card__wind {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--vm-bg-secondary, #f1f5f9);
    border-radius: var(--vm-radius-small, 8px);
    font-size: 0.85rem;
}

.vm-tro-day-card__wind svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #64748b;
}

.vm-tro-day-card__wind-label {
    font-weight: 600;
    color: var(--vm-text-secondary, #475569);
}

.vm-tro-day-card__wind-value {
    color: var(--vm-text-primary, #0f172a);
}

/* ===== Moon Phase Section ===== */
.vm-tro-astro {
    margin-top: 2rem;
    padding: 1.25rem;
    background: var(--vm-bg-secondary, #f1f5f9);
    border-radius: var(--vm-radius, 12px);
    border: 1px solid var(--vm-border-color, #cbd5e1);
}
.vm-tro-astro__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--vm-text-primary, #0f172a);
    margin: 0 0 1rem;
}
.vm-tro-astro__title svg {
    color: #6366f1;
    flex-shrink: 0;
}
.vm-tro-astro__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.vm-tro-moon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem;
    background: var(--vm-card-bg, #fff);
    border-radius: var(--vm-radius-small, 8px);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    text-align: center;
}
.vm-tro-moon__label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--vm-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.vm-tro-moon__visual {
    width: 50px;
    height: 50px;
    margin: 0.25rem 0;
}
.vm-tro-moon__svg {
    width: 50px;
    height: 50px;
    filter: drop-shadow(0 0 6px rgba(226, 232, 240, 0.6));
}
.vm-tro-moon__name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vm-text-primary, #0f172a);
}
.vm-tro-moon__illum {
    font-size: 0.72rem;
    color: var(--vm-text-muted, #64748b);
}
.vm-tro-moon__times {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--vm-text-secondary, #475569);
    margin-top: 0.25rem;
}
.vm-tro-moon__rise,
.vm-tro-moon__set {
    font-weight: 600;
}
.vm-tro-moon__rise { color: #6366f1; }
.vm-tro-moon__set { color: #94a3b8; }

/* ===== UV Index Section ===== */
.vm-tro-uv {
    margin-top: 1rem;
    padding: 1.25rem;
    background: var(--vm-bg-secondary, #f1f5f9);
    border-radius: var(--vm-radius, 12px);
    border: 1px solid var(--vm-border-color, #cbd5e1);
}
.vm-tro-uv__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--vm-text-primary, #0f172a);
    margin: 0 0 1rem;
}
.vm-tro-uv__title svg {
    color: #f59e0b;
    flex-shrink: 0;
}
.vm-tro-uv__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.vm-tro-uv__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem;
    background: var(--vm-card-bg, #fff);
    border-radius: var(--vm-radius-small, 8px);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    text-align: center;
}
.vm-tro-uv__label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--vm-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.vm-tro-uv__badge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.25rem 0;
}
.vm-tro-uv__value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.vm-tro-uv__cat {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vm-text-primary, #0f172a);
}
.vm-tro-uv__advice {
    font-size: 0.72rem;
    color: var(--vm-text-muted, #64748b);
    line-height: 1.3;
}

/* UV Scale (WHO) */
.vm-tro-uv__scale {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--vm-border-color, #cbd5e1);
}
.vm-tro-uv__scale-bar {
    display: flex;
    gap: 3px;
    border-radius: 6px;
    overflow: hidden;
}
.vm-tro-uv__scale-bar span {
    flex: 1;
    text-align: center;
    padding: 6px 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.vm-tro-uv__scale-bar span:first-child { border-radius: 6px 0 0 6px; }
.vm-tro-uv__scale-bar span:last-child { border-radius: 0 6px 6px 0; }
.vm-tro-uv__scale-labels {
    display: flex;
    gap: 3px;
    margin-top: 4px;
}
.vm-tro-uv__scale-labels span {
    flex: 1;
    text-align: center;
    font-size: 0.65rem;
    color: var(--vm-text-muted, #64748b);
    font-weight: 500;
}

/* Dark mode: Moon + UV */
[data-theme="dark"] .vm-tro-astro,
[data-theme="dark"] .vm-tro-uv {
    background: var(--vm-bg-secondary);
    border-color: var(--vm-border-color);
}
[data-theme="dark"] .vm-tro-moon,
[data-theme="dark"] .vm-tro-uv__day {
    background: var(--vm-bg-tertiary, #334155);
    border-color: var(--vm-border-color);
}
[data-theme="dark"] .vm-tro-astro__title svg { color: #818cf8; }
[data-theme="dark"] .vm-tro-moon__svg { filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.3)); }
[data-theme="dark"] .vm-tro-moon__rise { color: #818cf8; }
[data-theme="dark"] .vm-tro-moon__set { color: #64748b; }
[data-theme="dark"] .vm-tro-uv__title svg { color: #fbbf24; }

/* ============================================================
 * SLEDEĆE MESEČEVE MENE (upcoming moon phases)
 * ============================================================ */
.vm-tro-moon-upcoming {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: var(--vm-bg-secondary, #f8fafc);
    border: 1px solid var(--vm-border-color, #e2e8f0);
    border-radius: 12px;
}
.vm-tro-moon-upcoming:empty { display: none; }

.vm-tro-moon-upcoming__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vm-text-primary, #0f172a);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
}
.vm-tro-moon-upcoming__title svg {
    color: #6366f1;
}

.vm-tro-moon-upcoming__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.vm-tro-moon-upcoming__card {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: white;
    padding: 1rem 0.75rem;
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.vm-tro-moon-upcoming__emoji {
    font-size: 2rem;
    line-height: 1;
}
.vm-tro-moon-upcoming__name {
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: 0.3rem;
}
.vm-tro-moon-upcoming__date {
    font-size: 0.8rem;
    opacity: 0.85;
}
.vm-tro-moon-upcoming__time {
    font-size: 0.72rem;
    opacity: 0.7;
}

/* Dark mode */
[data-theme="dark"] .vm-tro-moon-upcoming {
    background: var(--vm-bg-secondary, #1e293b);
    border-color: var(--vm-border-color, #334155);
}
[data-theme="dark"] .vm-tro-moon-upcoming__card {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.15);
}

/* Mobile */
@media (max-width: 640px) {
    .vm-tro-moon-upcoming__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vm-tro-moon-upcoming__card {
        padding: 0.75rem 0.5rem;
    }
    .vm-tro-moon-upcoming__emoji {
        font-size: 1.6rem;
    }
    .vm-tro-moon-upcoming__name {
        font-size: 0.82rem;
    }
    .vm-tro-moon-upcoming__date {
        font-size: 0.72rem;
    }
    .vm-tro-moon-upcoming__time {
        font-size: 0.65rem;
    }
}

/* Sesija 63 — CTA dugme za homepage (ispod widget-a, vodi na detaljnu /vremenska-prognoza-za-vojvodinu/) */
.vm-tro-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.85rem 1.25rem;
    margin-top: 1rem;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #10b981 100%);
    color: #ffffff !important;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25), 0 1px 3px rgba(59, 130, 246, 0.15);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}
.vm-tro-cta:hover,
.vm-tro-cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(16, 185, 129, 0.35), 0 3px 8px rgba(59, 130, 246, 0.22);
    filter: brightness(1.05);
    color: #ffffff !important;
    outline: none;
}
.vm-tro-cta:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
}
.vm-tro-cta__icon,
.vm-tro-cta__arrow {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.vm-tro-cta__icon svg,
.vm-tro-cta__arrow svg { display: block; }
.vm-tro-cta__text { flex: 0 1 auto; line-height: 1.2; }
.vm-tro-cta__arrow {
    transition: transform 0.18s ease;
}
.vm-tro-cta:hover .vm-tro-cta__arrow { transform: translateX(3px); }

/* Mobile: blago kompaktniji */
@media (max-width: 600px) {
    .vm-tro-cta { padding: 0.78rem 1rem; font-size: 0.88rem; gap: 0.5rem; }
    .vm-tro-cta__icon svg { width: 18px; height: 18px; }
    .vm-tro-cta__arrow svg { width: 16px; height: 16px; }
}

/* Dark mode — isti gradient, blago zatamnjen za bolji kontrast sa text-om */
[data-theme="dark"] .vm-tro-cta {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #059669 100%);
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.35), 0 1px 3px rgba(59, 130, 246, 0.25);
}
[data-theme="dark"] .vm-tro-cta:hover {
    box-shadow: 0 6px 14px rgba(5, 150, 105, 0.45), 0 3px 8px rgba(59, 130, 246, 0.32);
}

/* Crosslinks */
.vm-tro-crosslinks {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--vm-border-color, #cbd5e1);
}

.vm-tro-crosslinks__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vm-text-primary, #0f172a);
    margin: 0 0 1rem;
}

.vm-tro-crosslinks__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.vm-tro-crosslink {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--vm-card-bg, #fff);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: var(--vm-radius-small, 8px);
    text-decoration: none !important;
    color: var(--vm-text-primary, #0f172a) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.vm-tro-crosslink:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.vm-tro-crosslink__name {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
}

.vm-tro-crosslink__sub {
    font-size: 0.75rem;
    color: var(--vm-text-muted, #64748b);
}

.vm-tro-crosslink__arrow {
    margin-left: auto;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: #3b82f6;
    opacity: 0.5;
    transition: opacity 0.2s, transform 0.2s;
}

.vm-tro-crosslink:hover .vm-tro-crosslink__arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* Copyright */
.vm-tro-copyright {
    margin-top: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--vm-bg-secondary, #f1f5f9);
    border-radius: var(--vm-radius-small, 8px);
    font-size: 0.78rem;
    color: var(--vm-text-muted, #64748b);
    line-height: 1.5;
}

/* ===== Dark mode ===== */
[data-theme="dark"] .vm-tro-day-card {
    border-color: var(--vm-border-color);
}

[data-theme="dark"] .vm-tro-day-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
/* Dark mode: trodnevna map tooltips */
[data-theme="dark"] .vm-tro-tooltip {
    background: var(--vm-bg-secondary);
    color: var(--vm-text-primary);
    border: 1px solid var(--vm-border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .vm-tro-tooltip::before,
[data-theme="dark"] .vm-tro-tooltip::after {
    border-bottom-color: var(--vm-bg-secondary) !important;
}
[data-theme="dark"] .vm-tro-day-card__map {
    background: var(--vm-bg-tertiary);
}

/* =============================================
   PHASE 2: Weather-Adaptive + Glassmorphism + Sunrise Strip
   ============================================= */

/* Glassmorphism: background gradient for card grid */
.vm-tro-days {
    background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 50%, #fff1f2 100%);
    padding: 1.5rem;
    border-radius: 20px;
}

/* Glassmorphism: frosted card */
.vm-tro-day-card {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.vm-tro-day-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Weather-Adaptive Header Gradients */
.vm-tro-day-card--sunny .vm-tro-day-card__header {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}
.vm-tro-day-card--cloudy .vm-tro-day-card__header {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}
.vm-tro-day-card--rainy .vm-tro-day-card__header {
    background: linear-gradient(135deg, #4b5563, #374151);
}
.vm-tro-day-card--snowy .vm-tro-day-card__header {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: #312e81;
}
.vm-tro-day-card--snowy .vm-tro-day-card__label,
.vm-tro-day-card--snowy .vm-tro-day-card__date {
    color: #312e81;
    opacity: 1;
}
.vm-tro-day-card--stormy .vm-tro-day-card__header {
    background: linear-gradient(135deg, #7c3aed, #4c1d95);
}
.vm-tro-day-card--foggy .vm-tro-day-card__header {
    background: linear-gradient(135deg, #94a3b8, #64748b);
}

/* Sunrise/Sunset Strip */
.vm-tro-sunrise-strip {
    padding: 0.5rem 1rem;
    background: var(--vm-bg-secondary, #f1f5f9);
    border-top: 1px solid var(--vm-border-color, #cbd5e1);
}
.vm-tro-sunrise-strip:empty {
    display: none;
}
.vm-tro-sunrise-strip__inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--vm-text-secondary, #475569);
}
.vm-tro-sunrise-strip__time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
    white-space: nowrap;
}
.vm-tro-sunrise-strip__time svg { flex-shrink: 0; }
.vm-tro-sunrise-strip__time--rise { color: #d97706; }
.vm-tro-sunrise-strip__time--set { color: #dc2626; }
.vm-tro-sunrise-strip__track {
    flex: 1;
    height: 4px;
    background: #1e293b;
    border-radius: 2px;
    position: relative;
    min-width: 40px;
}
.vm-tro-sunrise-strip__fill {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    border-radius: 2px;
}
.vm-tro-sunrise-strip__dot {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #f59e0b;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
    z-index: 1;
}
.vm-tro-sunrise-strip__dur {
    font-size: 0.72rem;
    color: var(--vm-text-muted, #64748b);
    white-space: nowrap;
    font-weight: 500;
}

/* Dark mode: glassmorphism */
[data-theme="dark"] .vm-tro-days {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.5) 0%, rgba(30, 27, 75, 0.3) 50%, rgba(28, 25, 23, 0.3) 100%);
}
[data-theme="dark"] .vm-tro-day-card {
    background: rgba(30, 41, 59, 0.72);
    border: 1px solid rgba(51, 65, 85, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .vm-tro-day-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* Dark mode: weather-adaptive headers */
[data-theme="dark"] .vm-tro-day-card--sunny .vm-tro-day-card__header {
    background: linear-gradient(135deg, #92400e, #7c2d12);
}
[data-theme="dark"] .vm-tro-day-card--cloudy .vm-tro-day-card__header {
    background: linear-gradient(135deg, #374151, #1f2937);
}
[data-theme="dark"] .vm-tro-day-card--rainy .vm-tro-day-card__header {
    background: linear-gradient(135deg, #1f2937, #111827);
}
[data-theme="dark"] .vm-tro-day-card--snowy .vm-tro-day-card__header {
    background: linear-gradient(135deg, #312e81, #1e1b4b);
    color: #c7d2fe;
}
[data-theme="dark"] .vm-tro-day-card--snowy .vm-tro-day-card__label,
[data-theme="dark"] .vm-tro-day-card--snowy .vm-tro-day-card__date {
    color: #c7d2fe;
}
[data-theme="dark"] .vm-tro-day-card--stormy .vm-tro-day-card__header {
    background: linear-gradient(135deg, #4c1d95, #1e1b4b);
}
[data-theme="dark"] .vm-tro-day-card--foggy .vm-tro-day-card__header {
    background: linear-gradient(135deg, #334155, #1e293b);
}

/* Dark mode: sunrise strip */
[data-theme="dark"] .vm-tro-sunrise-strip {
    background: rgba(15, 23, 42, 0.5);
    border-top-color: var(--vm-border-color);
}
[data-theme="dark"] .vm-tro-sunrise-strip__time--rise { color: #fbbf24; }
[data-theme="dark"] .vm-tro-sunrise-strip__time--set { color: #f87171; }
[data-theme="dark"] .vm-tro-sunrise-strip__track { background: #0f172a; }
[data-theme="dark"] .vm-tro-sunrise-strip__dot {
    background: #1e293b;
    border-color: #fbbf24;
}

/* Responsive: sunrise strip */
@media (max-width: 480px) {
    .vm-tro-sunrise-strip { padding: 0.4rem 0.75rem; }
    .vm-tro-sunrise-strip__inner { font-size: 0.72rem; gap: 0.35rem; }
    .vm-tro-sunrise-strip__dot { width: 8px; height: 8px; }
}

/* Responsive: Moon + UV */
@media (max-width: 480px) {
    .vm-tro-astro__grid,
    .vm-tro-uv__grid {
        gap: 0.5rem;
    }
    .vm-tro-moon,
    .vm-tro-uv__day {
        padding: 0.5rem;
    }
    .vm-tro-moon__visual { width: 40px; height: 40px; }
    .vm-tro-moon__svg { width: 40px; height: 40px; }
    .vm-tro-uv__badge { width: 40px; height: 40px; }
    .vm-tro-uv__value { font-size: 1rem; }
    .vm-tro-moon__name,
    .vm-tro-uv__cat { font-size: 0.75rem; }
    .vm-tro-moon__times { gap: 0.4rem; font-size: 0.68rem; }
    .vm-tro-moon__illum { font-size: 0.68rem; }
    .vm-tro-uv__advice { font-size: 0.68rem; }
    .vm-tro-uv__scale-bar span { font-size: 0.62rem; padding: 4px 0; }
    .vm-tro-uv__scale-labels span { font-size: 0.58rem; }
}

[data-theme="dark"] .vm-tro-temp--min {
    background: linear-gradient(135deg, #1e3a5f 0%, #1e293b 100%);
    border-color: #1e40af;
}

[data-theme="dark"] .vm-tro-temp--max {
    background: linear-gradient(135deg, #4c1d1d 0%, #1e293b 100%);
    border-color: #991b1b;
}

[data-theme="dark"] .vm-tro-temp--min .vm-tro-temp__label { color: #93c5fd; }
[data-theme="dark"] .vm-tro-temp--min .vm-tro-temp__value { color: #60a5fa; }
[data-theme="dark"] .vm-tro-temp--max .vm-tro-temp__label { color: #fca5a5; }
[data-theme="dark"] .vm-tro-temp--max .vm-tro-temp__value { color: #f87171; }

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

[data-theme="dark"] .vm-tro-crosslink:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .vm-tro-copyright {
    background: var(--vm-bg-tertiary);
}

[data-theme="dark"] .vm-tro-toolbar__label {
    background: var(--vm-bg-tertiary);
    border-color: var(--vm-border-color);
}

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

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .vm-tro-days {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .vm-tro-day-card__map {
        height: 240px;
    }

    .vm-tro-crosslinks__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .vm-tro-day-card__map {
        height: 200px;
    }

    .vm-tro-day-card__body {
        padding: 0.75rem;
    }

    .vm-tro-crosslinks__grid {
        grid-template-columns: 1fr;
    }

    .vm-tro-temps {
        gap: 0.5rem;
    }

    .vm-tro-temp__value {
        font-size: 1rem;
    }
}


/* ============================================================
   HOMEPAGE MULTIFUNKCIONALNA MAPA (v6.0 — full-width section + per-param ikone)
   ============================================================ */

/* Section probija parent kontejner (1290px) i ide do edge-a viewport-a (max 1600px).
   Trick `calc(50% - 50vw)` daje negativnu marginu jednaku razlici 50% parent-a i 50vw,
   što efektivno povlači section do edge-a, NEZAVISNO od parent-ove širine. */
.vm-hm-section {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
}

.vm-hm-section-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

@media (max-width: 999px) {
    .vm-hm-section {
        width: auto;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .vm-hm-section-inner {
        padding: 0;
    }
}

/* Heading — integrated into card top with gradient */
.vm-hm-heading {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    padding: 10px 14px;
    line-height: 1.3;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    border: 1px solid #2563eb;
    border-bottom: none;
    border-radius: var(--vm-radius, 12px) var(--vm-radius, 12px) 0 0;
    letter-spacing: 0.01em;
}

/* Map container — overflow:hidden only here (for border-radius on map tiles) */
.vm-hm-wrap {
    margin: 0 0 1.5rem;
    border-radius: 0 0 var(--vm-radius, 12px) var(--vm-radius, 12px);
    overflow: hidden;
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-top: none;
    background: var(--vm-card-bg, #fff);
}

/* Controls bar — below heading */
.vm-hm-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--vm-bg-secondary, #f1f5f9);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-top: none;
    border-bottom: none;
    flex-wrap: wrap;
}

.vm-hm-separator {
    width: 1px;
    height: 24px;
    background: var(--vm-border-color, #cbd5e1);
    flex-shrink: 0;
}

/* Radar nav */
.vm-hm-radar-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.vm-hm-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: 6px;
    background: var(--vm-card-bg, #fff);
    color: var(--vm-text-secondary, #475569);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}

.vm-hm-btn:hover {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.vm-hm-btn--play {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.vm-hm-btn--play:hover {
    background: #1d4ed8;
}

.vm-hm-play--active {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}

/* Frame counter (zamena za Play dugme) */
.vm-hm-frame-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--vm-text-muted, #64748b);
    letter-spacing: 0.02em;
    user-select: none;
}

/* Source buttons (segmented) */
.vm-hm-sources {
    display: flex;
    gap: 0;
}

.vm-hm-source-btn {
    padding: 4px 10px;
    border: 1px solid var(--vm-border-color, #cbd5e1);
    background: var(--vm-card-bg, #fff);
    color: var(--vm-text-secondary, #475569);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.4;
}

.vm-hm-source-btn:first-child {
    border-radius: 6px 0 0 6px;
}

.vm-hm-source-btn + .vm-hm-source-btn {
    border-left: none;
}

.vm-hm-source-btn:last-child {
    border-radius: 0 6px 6px 0;
}

.vm-hm-source-btn--active {
    background: #2563eb !important;
    color: #fff !important;
    border-color: #2563eb !important;
}

/* ---- Param bar (OUTSIDE .vm-hm-wrap — overflow:visible for dropdowns) ---- */
.vm-hm-param-bar-wrapper {
    position: relative;
    z-index: 600;
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-top: none;
    border-bottom: none;
    background: var(--vm-bg-secondary, #f1f5f9);
}

.vm-hm-param-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 5px 10px;
    overflow: visible;
    white-space: nowrap;
    position: relative;
}

.vm-hm-param-divider {
    width: 1px;
    height: 22px;
    background: var(--vm-border-color, #cbd5e1);
    margin: 0 6px;
    flex-shrink: 0;
}

/* Dropdown section wrapper */
.vm-hm-param-section {
    position: relative;
    flex-shrink: 0;
}

/* Dropdown trigger button */
.vm-hm-param-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: 6px;
    background: var(--vm-card-bg, #fff);
    color: var(--vm-text-secondary, #475569);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.4;
    white-space: nowrap;
}

.vm-hm-param-trigger:hover {
    border-color: #2563eb;
    color: #2563eb;
}

.vm-hm-param-trigger--active {
    background: #2563eb !important;
    color: #fff !important;
    border-color: #2563eb !important;
}

.vm-hm-param-trigger__text {
    pointer-events: none;
}

.vm-hm-param-trigger__arrow {
    font-size: 0.6rem;
    flex-shrink: 0;
    transition: transform 0.2s;
    pointer-events: none;
}

.vm-hm-param-section--open .vm-hm-param-trigger__arrow {
    transform: rotate(180deg);
}

/* Dropdown menu — position:absolute, works because param bar has overflow:visible */
.vm-hm-param-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 170px;
    background: var(--vm-card-bg, #fff);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 10000;
    padding: 4px 0;
    overflow: hidden;
}

.vm-hm-param-section--open .vm-hm-param-menu {
    display: block;
}

.vm-hm-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 12px;
    border: none;
    background: none;
    color: var(--vm-text-secondary, #475569);
    font-size: 0.78rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1.45;
}

.vm-hm-menu-item__icon {
    flex-shrink: 0;
    color: var(--vm-text-muted, #64748b);
    opacity: 0.85;
    transition: color 0.15s, opacity 0.15s;
}

.vm-hm-menu-item__label {
    flex: 1;
    min-width: 0;
}

.vm-hm-menu-item small {
    display: block;
    font-size: 0.68rem;
    color: var(--vm-text-muted, #64748b);
    font-weight: 400;
}

.vm-hm-menu-item:hover {
    background: var(--vm-bg-secondary, #f1f5f9);
    color: var(--vm-text-primary, #0f172a);
}

.vm-hm-menu-item:hover .vm-hm-menu-item__icon {
    color: #2563eb;
    opacity: 1;
}

.vm-hm-menu-item--active {
    color: #2563eb !important;
    font-weight: 600;
    background: rgba(37, 99, 235, 0.06);
}

.vm-hm-menu-item--active .vm-hm-menu-item__icon {
    color: #2563eb;
    opacity: 1;
}

/* ---- Condition (Vreme) markers ---- */
.vm-hm-marker--condition {
    background: none !important;
    border: none !important;
}

/* ---- Wind direction arrow markers ---- */
.vm-hm-marker--wind-dir {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .vm-hm-marker--wind-dir {
    background: rgba(30, 41, 59, 0.9);
}

.vm-hm-condition-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.vm-hm-condition-icon {
    width: 38px;
    height: 38px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .vm-hm-condition-icon {
    background: rgba(30, 41, 59, 0.88);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.vm-hm-condition-temp {
    font-weight: 700;
    font-size: 0.82rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6),
                 0 0 4px rgba(0, 0, 0, 0.3);
    line-height: 1;
}

/* Weather condition row in tooltip */
.vm-hm-tip__condition {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0 6px;
    margin-bottom: 4px;
    border-bottom: 1px dashed var(--vm-border-color, #cbd5e1);
    font-size: 0.78rem;
    color: var(--vm-text-secondary, #475569);
    font-weight: 500;
}

.vm-hm-tip__condition img {
    flex-shrink: 0;
}

/* Map container — large */
#vm-homepage-map {
    height: 520px;
    background: var(--vm-bg-tertiary, #e2e8f0);
    position: relative;
}

/* ---- Precipitation legend ---- */
.vm-hm-legend {
    padding: 6px 12px 4px;
    background: var(--vm-bg-secondary, #f1f5f9);
    border-top: 1px solid var(--vm-border-color, #cbd5e1);
}

.vm-hm-legend__bar {
    width: 100%;
    height: 10px;
    border-radius: 50px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    /* VM dBZ paleta — ista kao HU radar frejmovi i /radarska-slika/ */
    background: linear-gradient(90deg,
        #93c5fd 0%,
        #60a5fa 9%,
        #34d399 18%,
        #4ade80 27%,
        #facc15 36%,
        #fbbf24 45%,
        #fb923c 54%,
        #f97316 63%,
        #ef4444 72%,
        #dc2626 81%,
        #be185d 90%,
        #7c3aed 100%
    );
}

.vm-hm-legend__labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: var(--vm-text-muted, #64748b);
    padding-top: 2px;
}

/* Timestamp */
#vm-hm-timestamp {
    text-align: center;
    padding: 8px 12px;
    font-size: 0.82rem;
    color: var(--vm-text-muted, #64748b);
    background: var(--vm-bg-secondary, #f1f5f9);
    border-top: 1px solid var(--vm-border-color, #cbd5e1);
    min-height: 30px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
#vm-hm-timestamp strong {
    font-weight: 700;
    color: var(--vm-text-primary, #0f172a);
}
[data-theme="dark"] #vm-hm-timestamp strong {
    color: var(--vm-text-primary, #f8fafc);
}
/* Freshness dot */
.vm-hm-ts-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.vm-hm-ts-dot--green {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}
.vm-hm-ts-dot--orange {
    background: #f59e0b;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}
.vm-hm-ts-dot--red {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}

/* Station marker dot — enlarged */
.vm-hm-marker {
    background: none !important;
    border: none !important;
}

.vm-hm-dot {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 4px rgba(0, 0, 0, 0.3);
    line-height: 1;
    letter-spacing: -0.02em;
}

/* Tooltip (inside map container) — verbose layout */
.vm-hm-tooltip {
    position: absolute;
    z-index: 1000;
    pointer-events: auto;
    animation: vm-hm-fadeIn 0.15s ease;
}

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

.vm-hm-tip {
    background: var(--vm-card-bg, #fff);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    padding: 10px 14px;
    min-width: 190px;
    max-width: 260px;
    font-size: 0.8rem;
}

.vm-hm-tip__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--vm-border-color, #cbd5e1);
}

.vm-hm-tip__name {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--vm-text-primary, #0f172a);
    line-height: 1.3;
}

.vm-hm-tip__close {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--vm-text-muted, #64748b);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}

.vm-hm-tip__close:hover {
    color: var(--vm-text-primary, #0f172a);
}

/* Tooltip rows — vertical list instead of grid */
.vm-hm-tip__rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vm-hm-tip__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.vm-hm-tip__label {
    font-size: 0.75rem;
    color: var(--vm-text-muted, #64748b);
    font-weight: 500;
}

.vm-hm-tip__val {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--vm-text-primary, #0f172a);
    text-align: right;
}

.vm-hm-tip__link {
    display: block;
    text-align: center;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--vm-border-color, #cbd5e1);
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.78rem;
}

.vm-hm-tip__link:hover {
    text-decoration: underline;
}
.vm-hm-tip__update { font-size: 0.72rem; color: var(--vm-text-muted, #64748b); margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--vm-border-color, #e2e8f0); text-align: center; }

/* Arrow */
.vm-hm-tooltip[data-arrow="down"]::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid var(--vm-card-bg, #fff);
}

.vm-hm-tooltip[data-arrow="up"]::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid var(--vm-card-bg, #fff);
}

/* --- Dark mode --- */
[data-theme="dark"] .vm-hm-heading {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    border-color: #1d4ed8;
}

[data-theme="dark"] .vm-hm-wrap {
    border-color: var(--vm-border-color);
}

[data-theme="dark"] .vm-hm-controls {
    border-color: var(--vm-border-color);
}

[data-theme="dark"] .vm-hm-source-btn--active {
    background: #2563eb !important;
    color: #fff !important;
}

[data-theme="dark"] .vm-hm-param-trigger--active {
    background: #2563eb !important;
    color: #fff !important;
}

[data-theme="dark"] .vm-hm-param-bar-wrapper {
    background: var(--vm-bg-secondary);
    border-color: var(--vm-border-color);
}

[data-theme="dark"] .vm-hm-condition-temp {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

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

[data-theme="dark"] .vm-hm-param-menu {
    background: var(--vm-card-bg);
    border-color: var(--vm-border-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .vm-hm-menu-item:hover {
    background: var(--vm-bg-tertiary);
}


[data-theme="dark"] .vm-hm-legend__bar {
    border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .vm-hm-tip {
    background: var(--vm-card-bg);
    border-color: var(--vm-border-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .vm-hm-tooltip[data-arrow="down"]::after {
    border-top-color: var(--vm-card-bg);
}

[data-theme="dark"] .vm-hm-tooltip[data-arrow="up"]::before {
    border-bottom-color: var(--vm-card-bg);
}

[data-theme="dark"] .vm-hm-dot {
    border-color: rgba(255, 255, 255, 0.6);
}

/* --- Mobile responsive --- */
@media (max-width: 768px) {
    .vm-hm-heading {
        font-size: 0.88rem;
        padding: 8px 10px;
    }

    #vm-homepage-map {
        height: 420px;
    }

    .vm-hm-controls {
        gap: 6px;
        padding: 5px 8px;
    }

    .vm-hm-param-trigger {
        padding: 3px 7px;
        font-size: 0.7rem;
        gap: 4px;
    }

    .vm-hm-param-trigger svg {
        width: 12px;
        height: 12px;
    }

    .vm-hm-source-btn {
        padding: 3px 8px;
        font-size: 0.7rem;
    }

    .vm-hm-separator {
        height: 20px;
    }

    .vm-hm-legend__labels {
        font-size: 0.62rem;
    }

    .vm-hm-tip {
        min-width: 170px;
        max-width: 230px;
    }

    .vm-hm-param-bar {
        padding: 4px 8px;
        gap: 0;
    }

    .vm-hm-param-divider {
        margin: 0 4px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    #vm-homepage-map {
        height: 380px;
    }

    .vm-hm-controls {
        justify-content: center;
    }

    .vm-hm-separator {
        display: none;
    }

    .vm-hm-param-bar {
        flex-wrap: wrap;
        gap: 4px;
    }

    .vm-hm-param-divider {
        display: none;
    }
}

/* ==========================================================================
   RADARSKA SLIKA — /radarska-slika/ (v2.0)
   Prefix: .vm-rdr-*
   Gradište (primarni), Bilogora, RHMZ player, info kartice
   ========================================================================== */

.vm-rdr-page {
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto;
}

.vm-rdr-section {
    margin-bottom: 2rem;
}

/* Ukloni razmak između uzastopnih source kartica */
.vm-rdr-source + .vm-rdr-ad-zone + .vm-rdr-source,
.vm-rdr-source + .vm-rdr-source {
    margin-top: -1rem;
}

.vm-rdr-source--rhmz + .vm-rdr-ad-zone + .vm-rdr-dbz-section {
    margin-top: -1rem;
}

.vm-rdr-heading {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    margin: 0 0 1rem;
    line-height: 1.3;
    text-align: center;
}

.vm-rdr-intro-text {
    color: var(--vm-text-secondary);
    font-size: 0.95rem;
    line-height: 1.75;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
}

/* Hero varijanta uvoda (v3.1) — minimalistički centriran blok sa CTA */
.vm-rdr-intro--hero {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 2.75rem;
    padding: 1.25rem 1rem 0;
}

.vm-rdr-intro--hero .vm-rdr-heading {
    font-size: 1.55rem;
    margin-bottom: 0.85rem;
}

.vm-rdr-intro--hero .vm-rdr-intro-text {
    font-size: 0.93rem;
    color: var(--vm-text-muted);
    margin-bottom: 1.25rem;
}

.vm-rdr-intro-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Beli tekst na SVIH 5 stanja — Blocksy overriduje link boje (lekcija sesija 30/45) */
a.vm-rdr-intro-cta,
a.vm-rdr-intro-cta:link,
a.vm-rdr-intro-cta:visited,
a.vm-rdr-intro-cta:hover,
a.vm-rdr-intro-cta:focus,
a.vm-rdr-intro-cta:active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
}

.vm-rdr-intro-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
}

.vm-rdr-intro-cta svg {
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .vm-rdr-intro--hero .vm-rdr-heading {
        font-size: 1.25rem;
    }
}

/* ─── Source kartice ─── */

.vm-rdr-source {
    background: var(--vm-card-bg);
    border-radius: var(--vm-radius);
    border: 1px solid var(--vm-border-color);
    overflow: hidden;
}

.vm-rdr-source-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--vm-border-color);
}

.vm-rdr-source-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--vm-text-primary);
    margin: 0 0 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.vm-rdr-badge--primary {
    display: inline-flex;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .vm-rdr-badge--primary {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.25);
}

.vm-rdr-source-desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--vm-text-muted);
    line-height: 1.6;
}

/* ─── Image wrap + constraining ─── */

.vm-rdr-image-wrap {
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
}

.vm-rdr-image-wrap .vm-rdr-image {
    border-radius: var(--vm-radius-small);
}

.vm-rdr-image {
    max-width: 720px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Animacija label između statičke i animirane slike */
.vm-rdr-anim-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.6rem 1.5rem;
    background: var(--vm-bg-secondary);
    border-top: 1px solid var(--vm-border-color);
    margin: 0;
}

/* ─── Status indikator ─── */

.vm-rdr-status {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 999px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
}

/* Prikaži samo kad ima aktivno stanje */
.vm-rdr-status:has(.vm-rdr-status__dot--fresh),
.vm-rdr-status:has(.vm-rdr-status__dot--stale),
.vm-rdr-status:has(.vm-rdr-status__dot--loading) {
    display: flex;
}

/* ─── Freshness timestamp badge ─── */

.vm-rdr-freshness {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 5;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 999px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    font-variant-numeric: tabular-nums;
}

.vm-rdr-freshness:not(:empty) {
    display: flex;
}

.vm-rdr-freshness__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.vm-rdr-freshness__dot--fresh { background: #10b981; }
.vm-rdr-freshness__dot--recent { background: #f59e0b; }
.vm-rdr-freshness__dot--stale { background: #ef4444; }

/* Stale baner — RHMZ izvor ne osvežava (>45 min) */
.vm-rdr-stale-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-left: 3px solid #ef4444;
    border-radius: var(--vm-radius-small, 8px);
    color: #b91c1c;
    font-size: 0.85rem;
    font-weight: 600;
}

.vm-rdr-stale-banner[hidden] {
    display: none;
}

[data-theme="dark"] .vm-rdr-stale-banner {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.45);
    color: #fca5a5;
}

.vm-rdr-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.vm-rdr-status__dot--fresh { background: #10b981; }
.vm-rdr-status__dot--stale { background: #f59e0b; }
.vm-rdr-status__dot--loading {
    background: #60a5fa;
    animation: vmRdrPulse 1.2s ease-in-out infinite;
}

@keyframes vmRdrPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

/* ─── RHMZ Player (hero, v3.1) ─── */

.vm-rdr-hero .vm-rdr-source-header {
    margin-bottom: 0.9rem;
}

.vm-rdr-player {
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.vm-rdr-player__canvas {
    position: relative;
    display: grid;
    justify-items: center;
    align-items: center;
    width: 100%;
    max-width: 760px;          /* = nativna širina RHMZ kompozita */
    margin: 0 auto;
    aspect-ratio: 760 / 565;   /* CLS guard — box prati razmeru slike */
    min-height: 200px;
}

/* DOM stacking: CSS Grid slaže sve frejmove u istu ćeliju — čuva prirodne dimenzije slike */
/* opacity 0/1 bez transition — instant swap, show-first-hide-second pattern */
.vm-rdr-stacked-frame {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
    pointer-events: none;
}

.vm-rdr-player__bar {
    border-top: 1px solid var(--vm-border-color);
    background: var(--vm-bg-secondary);
    padding: 0.65rem 1rem 0.55rem;
}

.vm-rdr-player__controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vm-rdr-player__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.06);
    color: var(--vm-text-primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.1s ease;
}

.vm-rdr-player__btn:hover {
    background: rgba(15, 23, 42, 0.12);
}

.vm-rdr-player__btn:active {
    transform: scale(0.94);
}

.vm-rdr-player__btn--play {
    width: 42px;
    height: 42px;
    background: var(--vm-gradient-primary, linear-gradient(135deg, #3b82f6 0%, #6366f1 100%));
    color: #fff;
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.35);
}

.vm-rdr-player__btn--play:hover {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
}

[data-theme="dark"] .vm-rdr-player__btn {
    background: rgba(248, 250, 252, 0.08);
    color: #e2e8f0;
}

[data-theme="dark"] .vm-rdr-player__btn:hover {
    background: rgba(248, 250, 252, 0.16);
}

[data-theme="dark"] .vm-rdr-player__btn--play {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    color: #fff;
}

.vm-rdr-player__counter {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--vm-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vm-rdr-player__time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

[data-theme="dark"] .vm-rdr-player__time {
    background: rgba(248, 250, 252, 0.08);
}

/* Scrubber + vremenske oznake (v3.1 — zamenjuje klik-timeline) */
.vm-rdr-player__timeline-wrap {
    position: relative;
    margin-top: 10px;
    padding-bottom: 16px;
}

.vm-rdr-scrub {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(15, 23, 42, 0.12);
    outline: none;
    cursor: pointer;
    margin: 0;
    display: block;
}

.vm-rdr-scrub::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3b82f6;
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.1s;
}

.vm-rdr-scrub::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.vm-rdr-scrub::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3b82f6;
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.vm-rdr-scrub::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(15, 23, 42, 0.12);
}

[data-theme="dark"] .vm-rdr-scrub,
[data-theme="dark"] .vm-rdr-scrub::-moz-range-track {
    background: rgba(248, 250, 252, 0.15);
}

.vm-rdr-ticks {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 14px;
    font-size: 0.64rem;
    color: var(--vm-text-muted);
    pointer-events: none;
    user-select: none;
}

.vm-rdr-tick {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.vm-rdr-tick:first-child {
    transform: none;
}

.vm-rdr-tick:last-child {
    transform: translateX(-100%);
}

/* Speed kontrole — segmented pill grupa (pattern forecast v3.x / vm-pm) */
.vm-rdr-player__speed {
    display: inline-flex;
    gap: 2px;
    background: rgba(15, 23, 42, 0.06);
    padding: 3px;
    border-radius: 999px;
    margin-left: auto;
}

[data-theme="dark"] .vm-rdr-player__speed {
    background: rgba(248, 250, 252, 0.08);
}

.vm-rdr-speed-btn {
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--vm-text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.vm-rdr-speed-btn:hover {
    color: var(--vm-text-primary);
}

.vm-rdr-speed-btn--active {
    background: #3b82f6 !important;
    color: #fff !important;
}

/* Defanzivna pravila — stale keš first/last-child (lekcija forecast v3.2) */
.vm-rdr-player__speed .vm-rdr-speed-btn:first-child,
.vm-rdr-player__speed .vm-rdr-speed-btn:last-child {
    border-radius: 999px;
    border: none;
}

[data-theme="dark"] .vm-rdr-speed-btn--active {
    background: #2563eb !important;
}

/* ─── DHMZ kartice (v3.1) ─── */

/* DHMZ kartice — jedna ispod druge, velike (DHMZ radari su precizniji
   za Vojvodinu od RHMZ kompozita pa zaslužuju pun format) */
.vm-rdr-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 860px;
    margin: 0 auto 2.5rem;
}

.vm-rdr-card {
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
}

.vm-rdr-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0.9rem 1.1rem 0;
}

.vm-rdr-card__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    margin: 0;
    line-height: 1.3;
}

.vm-rdr-card__desc {
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--vm-text-muted);
    margin: 0.4rem 0 0.8rem;
    padding: 0 1.1rem;
}

.vm-rdr-card__toggle {
    display: inline-flex;
    gap: 2px;
    background: var(--vm-bg-secondary);
    padding: 3px;
    border-radius: 999px;
    flex-shrink: 0;
}

.vm-rdr-toggle-btn {
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--vm-text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.vm-rdr-toggle-btn:hover {
    color: var(--vm-text-primary);
}

.vm-rdr-toggle-btn--active {
    background: #3b82f6 !important;
    color: #fff !important;
}

.vm-rdr-card__toggle .vm-rdr-toggle-btn:first-child,
.vm-rdr-card__toggle .vm-rdr-toggle-btn:last-child {
    border-radius: 999px;
    border: none;
}

[data-theme="dark"] .vm-rdr-card__toggle {
    background: var(--vm-bg-tertiary);
}

[data-theme="dark"] .vm-rdr-toggle-btn--active {
    background: #2563eb !important;
}

.vm-rdr-card .vm-rdr-image-wrap {
    margin-top: auto;
    padding: 0 0 0;
}

/* ─── dBZ skala ─── */

.vm-rdr-dbz-card {
    background: var(--vm-card-bg);
    border-radius: var(--vm-radius);
    border: 1px solid var(--vm-border-color);
    padding: 1.5rem;
}

/* Kontinualni gradient (v3.1 — zamenjuje 12 diskretnih segmenata) */
.vm-rdr-dbz-gradient {
    height: 16px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: linear-gradient(90deg,
        #93c5fd 0%, #60a5fa 9%, #34d399 18%, #4ade80 27%,
        #facc15 36%, #fbbf24 45%, #fb923c 54%, #f97316 63%,
        #ef4444 72%, #dc2626 81%, #be185d 90%, #7c3aed 100%);
    margin-bottom: 4px;
}

[data-theme="dark"] .vm-rdr-dbz-gradient {
    border-color: rgba(255, 255, 255, 0.15);
}

.vm-rdr-dbz-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--vm-text-secondary);
    font-variant-numeric: tabular-nums;
    padding: 0 2px;
    margin-bottom: 0.5rem;
}

.vm-rdr-dbz-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--vm-text-muted);
    padding: 0 4px;
    margin-bottom: 1rem;
}

.vm-rdr-dbz-text {
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--vm-text-secondary);
    margin: 0;
}

/* ─── SEO info kartice ─── */

.vm-rdr-info-card {
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-left: 4px solid #3b82f6;
    border-radius: var(--vm-radius);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

[data-theme="dark"] .vm-rdr-info-card {
    border-left-color: #60a5fa;
}

.vm-rdr-info-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--vm-text-primary);
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    line-height: 1.3;
}

.vm-rdr-info-card__icon {
    flex-shrink: 0;
    color: #3b82f6;
}

[data-theme="dark"] .vm-rdr-info-card__icon {
    color: #60a5fa;
}

.vm-rdr-info-card p {
    font-size: 0.93rem;
    line-height: 1.8;
    color: var(--vm-text-secondary);
    margin: 0 0 0.75rem;
}

.vm-rdr-info-card p:last-child {
    margin-bottom: 0;
}

/* ─── Ad zone ─── */

.vm-rdr-ad-zone {
    contain: layout style;
}

/* ─── Izvori podataka ─── */

.vm-rdr-sources-card {
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius);
    padding: 1rem 1.25rem;
}

.vm-rdr-sources-text {
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--vm-text-muted);
    margin: 0;
}

.vm-rdr-sources-text a {
    color: var(--vm-text-secondary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.vm-rdr-sources-text a:hover {
    color: #2563eb;
}

[data-theme="dark"] .vm-rdr-sources-text a:hover {
    color: #60a5fa;
}

/* ─── Responsive ─── */

@media (max-width: 768px) {
    .vm-rdr-card-grid {
        gap: 16px;
    }
}

/* DHMZ slika u kartici — pun format */
.vm-rdr-card .vm-rdr-image {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 480px) {
    .vm-rdr-source-header {
        padding: 1rem;
    }

    .vm-rdr-source-title {
        font-size: 1rem;
    }

    .vm-rdr-anim-label {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }

    .vm-rdr-dbz-card {
        padding: 1rem;
    }

    .vm-rdr-dbz-ticks {
        font-size: 0.62rem;
    }

    .vm-rdr-dbz-labels {
        font-size: 0.7rem;
    }

    .vm-rdr-heading {
        font-size: 1.15rem;
    }

    .vm-rdr-image-wrap {
        min-height: 150px;
    }

    .vm-rdr-player__btn {
        width: 40px;
        height: 40px;
    }

    .vm-rdr-player__btn--play {
        width: 44px;
        height: 44px;
    }

    .vm-rdr-player__bar {
        padding: 0.55rem 0.75rem 0.5rem;
    }

    .vm-rdr-player__speed {
        margin-left: 0;
    }

    .vm-rdr-player__time {
        font-size: 0.8rem;
        padding: 4px 10px;
    }

    .vm-rdr-card__head {
        padding: 0.8rem 0.9rem 0;
    }

    .vm-rdr-card__desc {
        padding: 0 0.9rem;
    }

    .vm-rdr-info-card {
        padding: 1rem;
    }

    .vm-rdr-info-card__title {
        font-size: 1rem;
    }
}


/* ==========================================================================
   SATELITSKI SNIMCI — /satelitske-slike/ (v1.0)
   Prefix: .vm-sat-*
   EUMETSAT Meteosat (primarni) + RHMZ (sekundarni)
   ========================================================================== */

.vm-sat-page {
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto;
}

.vm-sat-section {
    margin-bottom: 2rem;
}

.vm-sat-heading {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    margin: 0 0 1rem;
    line-height: 1.3;
    text-align: center;
}

.vm-sat-heading--sub {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

.vm-sat-intro-text {
    color: var(--vm-text-secondary);
    font-size: 0.95rem;
    line-height: 1.75;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
}

/* ─── Kontrole: režim + region ─── */

.vm-sat-controls {
    margin-bottom: 1.5rem;
}

.vm-sat-controls-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.vm-sat-mode-tabs,
.vm-sat-region-tabs {
    display: inline-flex;
    border-radius: var(--vm-radius-small);
    overflow: hidden;
    border: 1px solid var(--vm-border-color);
    background: var(--vm-bg-secondary);
}

.vm-sat-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--vm-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.vm-sat-tab:hover {
    color: var(--vm-text-primary);
    background: var(--vm-bg-tertiary);
}

.vm-sat-tab--active {
    background: #2563eb !important;
    color: #ffffff !important;
    font-weight: 600;
}

[data-theme="dark"] .vm-sat-tab--active {
    background: #3b82f6 !important;
    color: #ffffff !important;
}

.vm-sat-tab svg {
    flex-shrink: 0;
}

.vm-sat-tab small {
    font-weight: 400;
    opacity: 0.7;
    font-size: 0.85em;
}

/* ─── Viewer: trenutni snimak ─── */

.vm-sat-viewer {
    background: var(--vm-card-bg);
    border-radius: var(--vm-radius);
    border: 1px solid var(--vm-border-color);
    overflow: hidden;
}

.vm-sat-image-wrap {
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.vm-sat-image {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--vm-radius-small);
}

.vm-sat-meta {
    padding: 0.5rem 1rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ─── Freshness badge ─── */

.vm-sat-freshness {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--vm-bg-secondary);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--vm-text-secondary);
    font-variant-numeric: tabular-nums;
}

.vm-sat-freshness:not(:empty) {
    display: inline-flex;
}

.vm-sat-freshness__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.vm-sat-freshness__dot--fresh { background: #10b981; }
.vm-sat-freshness__dot--recent { background: #f59e0b; }
.vm-sat-freshness__dot--stale { background: #ef4444; }

/* ─── Night notice ─── */

.vm-sat-night-notice {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--vm-radius-small);
    font-size: 0.82rem;
    color: #b45309;
}

[data-theme="dark"] .vm-sat-night-notice {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.25);
    color: #fbbf24;
}

/* ─── Player ─── */

.vm-sat-player-section {
    background: var(--vm-card-bg);
    border-radius: var(--vm-radius);
    border: 1px solid var(--vm-border-color);
    overflow: hidden;
}

.vm-sat-anim-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.6rem 1.25rem;
    background: var(--vm-bg-secondary);
    border-bottom: 1px solid var(--vm-border-color);
    margin: 0;
}

.vm-sat-player__canvas {
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    overflow: hidden;
}

.vm-sat-stacked-frame {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
}

.vm-sat-player__bar {
    border-top: 1px solid var(--vm-border-color);
}

.vm-sat-player__controls {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.6rem 1rem;
}

.vm-sat-player__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius-small);
    background: var(--vm-bg-secondary);
    color: var(--vm-text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.vm-sat-player__btn:hover {
    background: var(--vm-bg-tertiary);
}

.vm-sat-player__btn--play {
    width: 42px;
    height: 42px;
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    border-radius: 50%;
}

.vm-sat-player__btn--play:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

[data-theme="dark"] .vm-sat-player__btn--play {
    background: #3b82f6;
    border-color: #3b82f6;
}

.vm-sat-player__btn--download {
    margin-left: auto;
    width: auto;
    padding: 0 12px;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 600;
}
.vm-sat-player__btn--download:hover {
    color: #10b981;
    border-color: #10b981;
}

.vm-sat-player__counter {
    font-size: 0.82rem;
    color: var(--vm-text-muted);
    font-variant-numeric: tabular-nums;
    margin-left: 6px;
}

/* Speed kontrole (0.5x / 1x / 2x / 3x) — segmented control */
.vm-sat-speed {
    display: inline-flex;
    align-items: stretch;
    margin-left: 8px;
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius-small);
    overflow: hidden;
    background: var(--vm-bg-primary);
}
.vm-sat-speed__btn {
    appearance: none;
    background: transparent;
    border: none;
    border-left: 1px solid var(--vm-border-color);
    padding: 4px 9px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--vm-text-secondary);
    cursor: pointer;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    transition: background-color .15s, color .15s;
}
.vm-sat-speed__btn:first-child { border-left: none; }
.vm-sat-speed__btn:hover { background: var(--vm-bg-secondary); color: var(--vm-text-primary); }
.vm-sat-speed__btn--active {
    background: #2563eb;
    color: #fff !important;
}
.vm-sat-speed__btn--active:hover { background: #1d4ed8; }
[data-theme="dark"] .vm-sat-speed__btn--active { background: #3b82f6; }
[data-theme="dark"] .vm-sat-speed__btn--active:hover { background: #60a5fa; }

@media (max-width: 640px) {
    .vm-sat-speed { margin-left: 4px; }
    .vm-sat-speed__btn { padding: 3px 6px; font-size: 0.68rem; }
}

.vm-sat-player__info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 0;
    font-size: 0.8rem;
    color: var(--vm-text-secondary);
    margin-top: 10px;
    padding: 8px 14px;
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius-small);
    font-variant-numeric: tabular-nums;
    min-height: 32px;
}
.vm-sat-player__info:empty { display: none; }
.vm-sat-player__info-term {
    font-weight: 600;
    color: var(--vm-text-primary);
}
.vm-sat-player__info-sep {
    margin: 0 8px;
    color: var(--vm-text-muted);
}

.vm-sat-player__timeline {
    height: 4px;
    background: var(--vm-bg-tertiary);
    cursor: pointer;
    position: relative;
}

.vm-sat-player__progress {
    height: 100%;
    background: #2563eb;
    border-radius: 2px;
    width: 0;
    transition: width 0.15s ease;
}

[data-theme="dark"] .vm-sat-player__progress {
    background: #3b82f6;
}

/* ─── Atribucija ─── */

.vm-sat-attribution {
    text-align: center;
    font-size: 0.82rem;
    color: var(--vm-text-muted);
    padding: 0.75rem 0;
    margin-bottom: 1.5rem;
}

.vm-sat-attribution a {
    color: #2563eb;
    text-decoration: none;
}

.vm-sat-attribution a:hover {
    text-decoration: underline;
}

[data-theme="dark"] .vm-sat-attribution a {
    color: #93c5fd;
}

/* ─── EUMETSAT galerija (grid sa karticama) ─── */

.vm-sat-eumetsat-section {
    background: var(--vm-card-bg);
    border-radius: var(--vm-radius);
    border: 1px solid var(--vm-border-color);
    padding: 1.5rem;
}

.vm-sat-eumetsat-note {
    color: var(--vm-text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0 0 1rem;
    text-align: center !important;
}

.vm-sat-eumetsat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.vm-sat-eumetsat-card {
    border: 2px solid var(--vm-border-color);
    border-radius: var(--vm-radius-small);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vm-sat-eumetsat-card:hover {
    border-color: #93c5fd;
}

.vm-sat-eumetsat-card--active {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

[data-theme="dark"] .vm-sat-eumetsat-card--active {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.vm-sat-eumetsat-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vm-text-secondary);
    padding: 0.5rem 0.75rem;
    background: var(--vm-bg-secondary);
    border-bottom: 1px solid var(--vm-border-color);
}

.vm-sat-eumetsat-label svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.vm-sat-eumetsat-label small {
    font-weight: 400;
    opacity: 0.7;
    font-size: 0.85em;
}

.vm-sat-eumetsat-img-wrap {
    position: relative;
    min-height: 120px;
    padding: 0.25rem;
}

.vm-sat-eumetsat-img-wrap .vm-sat-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* Night overlay za vidljivi spektar karticu */
.vm-sat-night-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: #cbd5e1;
    font-size: 0.78rem;
    border-radius: 4px;
}

.vm-sat-night-overlay svg {
    opacity: 0.8;
}

/* ─── RHMZ sekcija ─── */

.vm-sat-rhmz {
    background: var(--vm-card-bg);
    border-radius: var(--vm-radius);
    border: 1px solid var(--vm-border-color);
    padding: 1.5rem;
}

.vm-sat-rhmz-note {
    color: var(--vm-text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0 0 1rem;
    text-align: center !important;
}

.vm-sat-rhmz-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.vm-sat-rhmz-card {
    border-radius: var(--vm-radius-small);
    border: 1px solid var(--vm-border-color);
    overflow: hidden;
}

.vm-sat-rhmz-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vm-text-secondary);
    padding: 0.5rem 0.75rem;
    margin: 0;
    background: var(--vm-bg-secondary);
    border-bottom: 1px solid var(--vm-border-color);
    text-align: center;
}

.vm-sat-rhmz-card .vm-sat-image-wrap {
    min-height: 120px;
    padding: 0.25rem;
}

.vm-sat-rhmz-source {
    text-align: center;
    font-size: 0.82rem;
    color: var(--vm-text-muted);
    margin: 1rem 0 0;
}

.vm-sat-rhmz-source a {
    color: #2563eb;
    text-decoration: none;
}

[data-theme="dark"] .vm-sat-rhmz-source a {
    color: #93c5fd;
}

/* ─── Content wrapper ─── */

.vm-sat-content-wrapper {
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius);
    padding: 1.5rem;
    background: var(--vm-card-bg);
}

.vm-sat-wrapper-title {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--vm-text-primary);
    margin: 0 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--vm-border-color);
}

.vm-sat-wrapper-title svg {
    flex-shrink: 0;
    color: #2563eb;
}

[data-theme="dark"] .vm-sat-wrapper-title svg {
    color: #93c5fd;
}

@media (max-width: 768px) {
    .vm-sat-content-wrapper {
        padding: 0.75rem;
    }
    .vm-sat-wrapper-title {
        font-size: 0.95rem;
    }
}

/* ─── Region tabs centar ─── */

.vm-sat-region-tabs-wrap {
    text-align: center;
    margin-bottom: 1rem;
}

/* ─── K-Index interpretacijska skala ─── */

.vm-sat-kindex-scale {
    max-width: 560px;
    margin: 0.75rem auto 0;
    text-align: center;
}

.vm-sat-kindex-scale__title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vm-text-secondary);
    margin: 0 0 0.5rem;
}

.vm-sat-kindex-scale__bar {
    display: flex;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--vm-border-color);
}

.vm-sat-kindex-scale__seg {
    flex: 1;
    padding: 0.4rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

.vm-sat-kindex-scale__labels {
    display: flex;
    margin-top: 0.25rem;
}

.vm-sat-kindex-scale__labels span {
    flex: 1;
    font-size: 0.7rem;
    color: var(--vm-text-muted);
    text-align: center;
}

.vm-sat-kindex-scale__hint {
    font-size: 0.78rem;
    color: var(--vm-text-muted);
    margin: 0.5rem 0 0;
    font-style: italic;
}

@media (max-width: 480px) {
    .vm-sat-kindex-scale__seg {
        font-size: 0.65rem;
        padding: 0.35rem 0.1rem;
    }
    .vm-sat-kindex-scale__labels span {
        font-size: 0.6rem;
    }
}

/* ─── SEO info kartice ─── */

.vm-sat-seo {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vm-sat-info-card {
    background: var(--vm-card-bg);
    border-radius: var(--vm-radius);
    border: 1px solid var(--vm-border-color);
    padding: 1.5rem;
}

.vm-sat-info-card__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--vm-text-primary);
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.3;
}

.vm-sat-info-card__icon {
    flex-shrink: 0;
    color: #2563eb;
}

[data-theme="dark"] .vm-sat-info-card__icon {
    color: #93c5fd;
}

.vm-sat-info-card p {
    font-size: 0.9rem;
    color: var(--vm-text-secondary);
    line-height: 1.7;
    margin: 0 0 0.5rem;
    text-align: left !important;
}

.vm-sat-info-card p:last-child {
    margin-bottom: 0;
}

.vm-sat-info-card code {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.8rem;
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    color: var(--vm-text-primary);
    word-break: break-all;
}

.vm-sat-seo-intro {
    font-size: 0.92rem;
    color: var(--vm-text-secondary);
    line-height: 1.6;
    margin: 0 0 0.5rem;
    text-align: center !important;
}

/* ─── Izvori kartica ─── */

.vm-sat-sources-card {
    background: var(--vm-bg-secondary);
    border-radius: var(--vm-radius);
    padding: 1rem 1.25rem;
    border: 1px solid var(--vm-border-color);
}

.vm-sat-sources-text {
    font-size: 0.85rem;
    color: var(--vm-text-secondary);
    margin: 0;
    line-height: 1.7;
    text-align: center !important;
}

.vm-sat-sources-text a {
    color: #2563eb;
    text-decoration: none;
}

.vm-sat-sources-text a:hover {
    text-decoration: underline;
}

[data-theme="dark"] .vm-sat-sources-text a {
    color: #93c5fd;
}

/* ─── Responsive ─── */

@media (max-width: 768px) {
    .vm-sat-controls-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .vm-sat-mode-tabs,
    .vm-sat-region-tabs {
        width: 100%;
    }

    .vm-sat-tab {
        flex: 1;
        justify-content: center;
        padding: 0.6rem 0.75rem;
        font-size: 0.82rem;
    }

    .vm-sat-rhmz-grid {
        grid-template-columns: 1fr;
    }

    .vm-sat-eumetsat-grid {
        grid-template-columns: 1fr;
    }

    .vm-sat-eumetsat-section {
        padding: 1rem;
    }

    .vm-sat-rhmz {
        padding: 1rem;
    }

    .vm-sat-heading {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .vm-sat-info-card {
        padding: 1rem;
    }

    .vm-sat-info-card__title {
        font-size: 1rem;
    }

    .vm-sat-player__btn {
        width: 40px;
        height: 40px;
    }

    .vm-sat-player__btn--play {
        width: 46px;
        height: 46px;
    }

    .vm-sat-player__controls {
        padding: 0.5rem 0.75rem;
    }

    .vm-sat-player__canvas {
        min-height: 150px;
    }

    .vm-sat-image-wrap {
        min-height: 150px;
    }
}


/* ─── Pre-rendered WMS slike (EUMETSAT — zamena Leaflet mape) ─── */

.vm-sat-map-section {
    background: var(--vm-card-bg);
    border-radius: var(--vm-radius);
    border: 1px solid var(--vm-border-color);
    padding: 1.5rem;
}

/* Layer tabovi — segmented control */
.vm-sat-map-layers {
    display: flex;
    gap: 0;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.vm-sat-map-layer {
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--vm-border-color);
    background: var(--vm-bg-primary);
    color: var(--vm-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.vm-sat-map-layer:first-child {
    border-radius: var(--vm-radius-small) 0 0 var(--vm-radius-small);
}

.vm-sat-map-layer:last-child {
    border-radius: 0 var(--vm-radius-small) var(--vm-radius-small) 0;
}

.vm-sat-map-layer:not(:first-child) {
    border-left: none;
}

.vm-sat-map-layer:hover {
    background: var(--vm-bg-tertiary);
    color: var(--vm-text-primary);
}

.vm-sat-map-layer--active {
    background: #2563eb !important;
    color: #fff !important;
    border-color: #2563eb !important;
    font-weight: 600;
}

[data-theme="dark"] .vm-sat-map-layer--active {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

/* Region toggle — segmented control */
.vm-sat-region-toggle {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 0.75rem;
}

.vm-sat-region-btn {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid var(--vm-border-color);
    background: var(--vm-bg-secondary);
    color: var(--vm-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.3;
}

.vm-sat-region-btn:first-child {
    border-radius: var(--vm-radius-small) 0 0 var(--vm-radius-small);
    border-right: none;
}

.vm-sat-region-btn:last-child {
    border-radius: 0 var(--vm-radius-small) var(--vm-radius-small) 0;
}

.vm-sat-region-btn:hover {
    background: var(--vm-bg-tertiary);
}

.vm-sat-region-btn--active {
    background: var(--vm-gradient-primary) !important;
    color: #fff !important;
    border-color: #2563eb !important;
    font-weight: 600;
}

[data-theme="dark"] .vm-sat-region-btn--active {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

/* WMS Image Viewer — zamena za Leaflet mapu */
.vm-sat-wms-viewer {
    width: 100%;
    border-radius: var(--vm-radius-small);
    overflow: hidden;
    border: 1px solid var(--vm-border-color);
    background: #0a0a1a;
}

.vm-sat-wms-canvas {
    position: relative;
    width: 100%;
    /* Aspect ratio 1000:750 = 4:3 */
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Placeholder — zadrzi dimenzije canvasa */
.vm-sat-wms-placeholder {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Stacked frejmovi — apsolutno pozicionirani, opacity swap */
.vm-sat-wms-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
}

/* Borders overlay — transparentni PNG sa granicama država */
.vm-sat-wms-borders {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 5;
    pointer-events: none;
    opacity: 0.8;
}

/* Srbija region — razlicit aspect ratio (4.7:4.4 ≈ 47:44) */
.vm-sat-wms-canvas[data-region="srbija"] {
    aspect-ratio: 47 / 44;
}

/* Evropa region — aspect ratio 2000:1200 = 5:3 */
.vm-sat-wms-canvas[data-region="evropa"] {
    aspect-ratio: 5 / 3;
}

/* Legende boja za CTH i K-Indeks — overlay u donjem desnom uglu */
.vm-sat-wms-legend {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 8;
    max-height: 65%;
    width: auto;
    background: rgba(255, 255, 255, 0.88);
    border-radius: 4px;
    padding: 3px;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

[data-theme="dark"] .vm-sat-wms-legend {
    background: rgba(15, 23, 42, 0.85);
}

@media (max-width: 640px) {
    .vm-sat-wms-legend {
        max-height: 50%;
        bottom: 4px;
        right: 4px;
    }
}

/* Tooltip za hover/touch vrednosti piksela */
.vm-sat-tooltip {
    position: fixed;
    z-index: 10000;
    background: rgba(15, 23, 42, 0.92);
    color: #f8fafc;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.vm-sat-tooltip__value {
    font-size: 0.95rem;
    font-weight: 700;
}

.vm-sat-tooltip__swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Notice poruka kad nema frejmova */
.vm-sat-wms-notice {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    color: var(--vm-text-secondary);
    padding: 1rem 1.5rem;
    border-radius: var(--vm-radius-small);
    font-size: 0.85rem;
    text-align: center;
    z-index: 10;
}

[data-theme="dark"] .vm-sat-wms-notice {
    background: rgba(30, 41, 59, 0.9);
    color: var(--vm-text-muted);
}

/* Loading overlay */
.vm-sat-map-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(10, 10, 26, 0.7);
    z-index: 500;
    font-size: 0.85rem;
    color: #cbd5e1;
}

[data-theme="dark"] .vm-sat-map-loading {
    background: rgba(10, 10, 26, 0.8);
}

.vm-sat-map-loading__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: vm-sat-spin 0.8s linear infinite;
}

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

/* Player kontrole ispod slike */
.vm-sat-map-player {
    margin-top: 0.5rem;
}

.vm-sat-map-player__controls {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.6rem 0;
}

/* Napomena ispod slike */
.vm-sat-map-note {
    text-align: center !important;
    font-size: 0.8rem;
    color: var(--vm-text-muted);
    margin: 0.75rem 0 0;
}

/* Responsive */
@media (max-width: 768px) {
    .vm-sat-map-section {
        padding: 1rem;
    }

    .vm-sat-map-layer {
        padding: 0.45rem 0.75rem;
        font-size: 0.82rem;
    }

    .vm-sat-region-btn {
        padding: 0.45rem 1rem;
        font-size: 0.82rem;
    }
}

@media (max-width: 480px) {
    .vm-sat-map-layers {
        flex-wrap: wrap;
        gap: 0;
    }

    .vm-sat-map-layer {
        flex: 1;
        text-align: center;
        padding: 0.5rem 0.5rem;
        font-size: 0.78rem;
    }

    .vm-sat-region-btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.78rem;
    }
}


/* ========================================================================
   LEGAL PAGES — Uslovi korišćenja + Politika privatnosti
   v1.0 — [vm_uslovi_koriscenja] + [vm_politika_privatnosti]
   ======================================================================== */

.vm-legal-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
    scroll-padding-top: 90px;
}

/* --- Last-updated badge --- */
.vm-legal-updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--vm-text-muted);
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    border-radius: 999px;
    padding: 4px 14px;
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

.vm-legal-updated strong {
    color: var(--vm-text-secondary);
}

/* --- Table of contents --- */
.vm-legal-toc {
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    border-left: 4px solid #3b82f6;
    border-radius: var(--vm-radius);
    padding: 1.25rem 1.5rem;
    margin: 0 0 2rem;
}

.vm-legal-toc__title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--vm-text-muted);
    margin: 0 0 0.75rem;
}

.vm-legal-toc__list {
    margin: 0;
    padding: 0 0 0 1.25rem;
    list-style: decimal;
}

.vm-legal-toc__list li {
    margin-bottom: 0.35rem;
    line-height: 1.55;
    font-size: 0.9rem;
}

.vm-legal-toc__list a {
    color: #3b82f6 !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
    border-bottom: none !important;
}

.vm-legal-toc__list a:hover {
    color: #1d4ed8 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

/* --- Sections --- */
.vm-legal-section {
    padding-top: 2.25rem;
    border-top: 1px solid var(--vm-border-color);
}

.vm-legal-section__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    margin: 0 0 1rem;
    line-height: 1.35;
}

.vm-legal-section p {
    font-size: 0.95rem;
    line-height: 1.72;
    color: var(--vm-text-secondary);
    margin: 0 0 0.9rem;
}

.vm-legal-section p:last-child {
    margin-bottom: 0;
}

.vm-legal-section ul,
.vm-legal-section ol {
    padding-left: 1.5rem;
    margin: 0 0 1rem;
}

.vm-legal-section li {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--vm-text-secondary);
    margin-bottom: 0.4rem;
}

.vm-legal-section code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.82em;
    background: var(--vm-bg-tertiary);
    color: var(--vm-text-primary);
    padding: 1px 5px;
    border-radius: 4px;
    word-break: break-all;
}

.vm-legal-section a {
    color: #3b82f6;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.vm-legal-section a:hover {
    color: #1d4ed8;
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .vm-legal-page {
        padding: 0 0.25rem;
    }

    .vm-legal-section__title {
        font-size: 1.1rem;
    }

    .vm-legal-toc {
        padding: 1rem 1.125rem;
    }
}
/* ==========================================================================
   VM Forecast Dashboard + Trend Pages CSS (v1.0)
   Ovaj fajl se append-uje na vm-styles.css tokom deploymenta.
   ========================================================================== */

/* --- Forecast Dashboard --- */
.vm-forecast-dashboard { margin: 1.5rem 0; }
.vm-forecast-daily-cards { display: flex; gap: 0.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0.5rem 0 1rem; scrollbar-width: thin; }
.vm-forecast-day-card { flex: 0 0 auto; min-width: 90px; background: var(--vm-card-bg, #fff); border: 1px solid var(--vm-border-color, #cbd5e1); border-radius: var(--vm-radius-small, 8px); padding: 0.75rem 0.5rem; text-align: center; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.vm-forecast-day-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: #3b82f6; }
.vm-forecast-day-card--today { border-color: #3b82f6; background: rgba(59,130,246,0.04); }
.vm-forecast-day-card--active { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.2); }
.vm-forecast-day-card__date { font-size: 0.75rem; font-weight: 600; color: var(--vm-text-secondary, #475569); margin-bottom: 0.25rem; }
.vm-forecast-day-card__icon { width: 60px; height: 60px; margin: 0.25rem auto; display: block; }
.vm-forecast-day-card__temps { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.25rem; }
.vm-forecast-day-card__tmax { color: #ef4444; font-weight: 700; font-size: 0.9rem; }
.vm-forecast-day-card__tmin { color: #3b82f6; font-weight: 600; font-size: 0.85rem; }
.vm-forecast-day-card__precip { font-size: 0.72rem; color: #3b82f6; margin-top: 0.15rem; min-height: 1em; }
.vm-forecast-day-card__label { font-size: 0.68rem; color: var(--vm-text-muted, #64748b); margin-top: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-forecast-chart-card { background: var(--vm-card-bg, #fff); border: 1px solid var(--vm-border-color, #cbd5e1); border-radius: var(--vm-radius, 12px); padding: 1.25rem; margin-bottom: 1rem; }
.vm-forecast-chart-card h3 { font-size: 1rem; font-weight: 700; color: var(--vm-text-primary, #0f172a); margin: 0 0 0.75rem; }
.vm-forecast-chart-wrap { position: relative; height: 280px; }
.vm-forecast-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.vm-forecast-chart-card--half .vm-forecast-chart-wrap { height: 240px; }
.vm-forecast-note { background: rgba(59,130,246,0.06); border-left: 3px solid #3b82f6; padding: 0.75rem 1rem; border-radius: 0 var(--vm-radius-small, 8px) var(--vm-radius-small, 8px) 0; font-size: 0.85rem; color: var(--vm-text-secondary, #475569); margin-bottom: 1.5rem; }
.vm-forecast-no-data { text-align: center; padding: 3rem 1rem; color: var(--vm-text-muted, #64748b); }
.vm-forecast-hourly { background: var(--vm-card-bg, #fff); border: 1px solid var(--vm-border-color, #cbd5e1); border-radius: var(--vm-radius, 12px); padding: 1.25rem; margin-top: 1rem; }
.vm-forecast-hourly__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; flex-wrap: wrap; gap: 0.5rem; }
.vm-forecast-hourly__header h4 { font-size: 0.95rem; font-weight: 700; margin: 0; color: var(--vm-text-primary, #0f172a); }
.vm-forecast-hourly__sun { font-size: 0.8rem; color: #f59e0b; }
.vm-forecast-hourly__table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.vm-forecast-hourly__table th { background: var(--vm-bg-secondary, #f1f5f9); padding: 0.5rem 0.4rem; text-align: left; font-weight: 600; font-size: 0.75rem; color: var(--vm-text-secondary, #475569); border-bottom: 2px solid var(--vm-border-color, #cbd5e1); }
.vm-forecast-hourly__table td { padding: 0.4rem; border-bottom: 1px solid var(--vm-border-color, #cbd5e1); color: var(--vm-text-primary, #0f172a); }
.vm-forecast-hourly__table tr:hover td { background: rgba(59,130,246,0.03); }

@media (max-width: 768px) {
    .vm-forecast-charts-row { grid-template-columns: 1fr; }
    .vm-forecast-chart-wrap { height: 220px; }
    .vm-forecast-chart-card--half .vm-forecast-chart-wrap { height: 200px; }
    .vm-forecast-day-card { min-width: 80px; padding: 0.5rem 0.4rem; }
    .vm-forecast-day-card__icon { width: 41px; height: 41px; }
}
@media (max-width: 480px) {
    .vm-forecast-day-card { min-width: 72px; }
    .vm-forecast-hourly__table { font-size: 0.75rem; }
}

/* --- Trend Pages --- */
.vm-trend-page { margin: 1.5rem 0; }
.vm-trend-summary { display: flex; gap: 0.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0.5rem 0 1rem; scrollbar-width: thin; }
/* CWV CLS rezerve (12.06.2026): summary kartice, tabela i freshness se pune
   JS-om posle fetch-a — bez rezerve fill pravi layout shift. Izmereno na live:
   summary 236px, tabela 1265px, freshness 57px — rezerve blago ispod (sigurno). */
.vm-trend-summary { min-height: 200px; contain: layout style; }
.vm-trend-table-wrap { min-height: 800px; contain: layout style; }
.vm-trend-freshness { min-height: 48px; }
.vm-trend-day-card { flex: 0 0 auto; min-width: 100px; background: var(--vm-card-bg, #fff); border: 1px solid var(--vm-border-color, #cbd5e1); border-radius: var(--vm-radius-small, 8px); padding: 0.75rem 0.6rem; text-align: center; }
.vm-trend-day-card__date { font-size: 0.75rem; font-weight: 600; color: var(--vm-text-secondary, #475569); margin-bottom: 0.5rem; }
.vm-trend-day-card__range { display: flex; justify-content: center; align-items: baseline; gap: 0.25rem; margin: 0.15rem 0; }
.vm-trend-day-card__tmax { font-size: 1rem; font-weight: 700; color: #ef4444; }
.vm-trend-day-card__tmin { font-size: 0.9rem; font-weight: 600; color: #3b82f6; }
.vm-trend-day-card__spread { font-size: 0.68rem; color: var(--vm-text-muted, #64748b); }
.vm-trend-day-card__prob { font-size: 0.78rem; font-weight: 600; color: #3b82f6; }
.vm-trend-day-card__prob--none { color: var(--vm-text-muted, #64748b); }
.vm-trend-day-card__conf { display: flex; align-items: center; justify-content: center; gap: 0.3rem; font-size: 0.7rem; font-weight: 600; margin-top: 0.25rem; }
.vm-trend-day-card__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.vm-trend-chart-card { background: var(--vm-card-bg, #fff); border: 1px solid var(--vm-border-color, #cbd5e1); border-radius: var(--vm-radius, 12px); padding: 1.25rem; margin-bottom: 1rem; }
.vm-trend-chart-card h3 { font-size: 1rem; font-weight: 700; color: var(--vm-text-primary, #0f172a); margin: 0 0 0.75rem; }
.vm-trend-chart-card canvas { width: 100% !important; height: 300px !important; }
.vm-trend-no-data { text-align: center; padding: 3rem 1rem; color: var(--vm-text-muted, #64748b); }
.vm-trend-confidence-grid { display: flex; flex-direction: column; gap: 0.5rem; }
.vm-trend-confidence-bar { display: grid; grid-template-columns: 60px 1fr 70px 60px; align-items: center; gap: 0.5rem; }
.vm-trend-confidence-bar__date { font-size: 0.78rem; font-weight: 600; color: var(--vm-text-secondary, #475569); }
.vm-trend-confidence-bar__track { height: 10px; background: var(--vm-bg-secondary, #f1f5f9); border-radius: 5px; overflow: hidden; }
.vm-trend-confidence-bar__fill { height: 100%; border-radius: 5px; transition: width 0.3s; }
.vm-trend-confidence-bar__label { font-size: 0.72rem; font-weight: 600; text-align: right; }
.vm-trend-confidence-bar__spread { font-size: 0.7rem; color: var(--vm-text-muted, #64748b); text-align: right; }

/* Trend v2.0 — SEO intro, info box, detail table, freshness */
.vm-trend-title { font-size: 2.1rem; font-weight: 800; color: var(--vm-text-primary, #0f172a); margin: 0 0 1.25rem; padding-bottom: 16px; border-bottom: 3px solid #3b82f6; line-height: 1.2; }
[data-theme="dark"] .vm-trend-title { border-bottom-color: #60a5fa; }
.vm-trend-seo-intro { font-size: 1rem; line-height: 1.7; color: var(--vm-text-secondary, #475569); margin: 0 0 1.25rem; }

/* Info box */
.vm-trend-info-box { background: linear-gradient(135deg, rgba(59,130,246,0.04), rgba(99,102,241,0.04)); border: 1px solid var(--vm-border-color, #cbd5e1); border-left: 4px solid #3b82f6; border-radius: var(--vm-radius, 12px); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.vm-trend-info-box__header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.vm-trend-info-box__header span { font-size: 1rem; font-weight: 700; color: var(--vm-text-primary, #0f172a); }
.vm-trend-info-box__text { font-size: 0.9rem; line-height: 1.6; color: var(--vm-text-secondary, #475569); margin: 0 0 1rem; }
.vm-trend-info-box__legend { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.75rem; }
.vm-trend-info-box__legend-item { display: flex; align-items: flex-start; gap: 0.75rem; }
.vm-trend-info-box__band { display: inline-block; width: 40px; min-width: 40px; height: 18px; border-radius: 4px; margin-top: 2px; }
.vm-trend-info-box__band--dark { background: rgba(239,68,68,0.2); border: 1px solid rgba(239,68,68,0.3); }
.vm-trend-info-box__band--light { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.15); }
.vm-trend-info-box__band--precip { background: rgba(59,130,246,0.3); border: 1px solid rgba(59,130,246,0.4); }
.vm-trend-info-box__band--wind { background: rgba(16,185,129,0.3); border: 1px solid rgba(16,185,129,0.4); }
.vm-trend-info-box__legend-item strong { font-size: 0.85rem; color: var(--vm-text-primary, #0f172a); display: block; }
.vm-trend-info-box__legend-item span { font-size: 0.8rem; color: var(--vm-text-muted, #64748b); }
.vm-trend-info-box__columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.vm-trend-info-box__col .vm-trend-info-box__legend { margin-bottom: 0; }
.vm-trend-info-box__note { font-size: 0.82rem; font-style: italic; color: var(--vm-text-muted, #64748b); margin: 0.75rem 0 0; }

/* Detail table */
.vm-trend-chart-card--table { overflow: visible; }
.vm-trend-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vm-trend-detail-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 650px; }
.vm-trend-detail-table thead th { background: var(--vm-bg-secondary, #f1f5f9); font-weight: 600; padding: 0.6rem 0.75rem; text-align: left; border-bottom: 2px solid var(--vm-border-color, #cbd5e1); color: var(--vm-text-primary, #0f172a); white-space: nowrap; }
.vm-trend-detail-table tbody td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--vm-border-color, #cbd5e1); color: var(--vm-text-primary, #0f172a); vertical-align: middle; }
.vm-trend-detail-table tbody tr:nth-child(even) { background: var(--vm-bg-secondary, #f1f5f9); }
.vm-trend-detail-table tbody tr:hover { background: rgba(59,130,246,0.04); }
.vm-trend-detail-table__day { white-space: nowrap; }
.vm-trend-tmax { color: #ef4444; font-weight: 600; }
.vm-trend-tmin { color: #3b82f6; font-weight: 600; }
.vm-trend-range { color: var(--vm-text-muted, #64748b); font-size: 0.78rem; }
.vm-trend-conf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.35rem; vertical-align: middle; }

/* Freshness indicator (bordered card, matching forecast page style) */
.vm-trend-freshness { text-align: center; padding: 1rem 1.25rem; font-size: 0.88rem; color: var(--vm-text-secondary, #475569); border: 1px solid var(--vm-border-color, #cbd5e1); border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 1.5rem 0; }
.vm-trend-freshness__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.vm-trend-freshness--fresh { border-color: #22c55e; background: rgba(34,197,94,0.04); }
.vm-trend-freshness--fresh .vm-trend-freshness__dot { background: #22c55e; }
.vm-trend-freshness--warning { border-color: #f59e0b; background: rgba(245,158,11,0.04); }
.vm-trend-freshness--warning .vm-trend-freshness__dot { background: #f59e0b; }
.vm-trend-freshness--stale { border-color: #ef4444; background: rgba(239,68,68,0.04); }
.vm-trend-freshness--stale .vm-trend-freshness__dot { background: #ef4444; }

/* Dark mode — trend v2.0 */
[data-theme="dark"] .vm-trend-info-box { background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(99,102,241,0.06)); border-color: var(--vm-border-color); }
[data-theme="dark"] .vm-trend-info-box__band--dark { background: rgba(239,68,68,0.3); border-color: rgba(239,68,68,0.4); }
[data-theme="dark"] .vm-trend-info-box__band--light { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.2); }
[data-theme="dark"] .vm-trend-info-box__band--precip { background: rgba(59,130,246,0.4); border-color: rgba(59,130,246,0.5); }
[data-theme="dark"] .vm-trend-info-box__band--wind { background: rgba(16,185,129,0.4); border-color: rgba(16,185,129,0.5); }
[data-theme="dark"] .vm-trend-freshness { color: #94a3b8; }
[data-theme="dark"] .vm-trend-detail-table thead th { background: var(--vm-bg-tertiary, #334155); }
[data-theme="dark"] .vm-trend-detail-table tbody tr:nth-child(even) { background: rgba(30,41,59,0.5); }
[data-theme="dark"] .vm-trend-detail-table tbody tr:hover { background: rgba(59,130,246,0.08); }

/* Dark mode — trend overview v2.0 */
[data-theme="dark"] .vm-trend-overview__intro-box { background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(99,102,241,0.06)); border-color: rgba(59,130,246,0.2); }
[data-theme="dark"] .vm-trend-overview__featured-group { background: var(--vm-card-bg); border-color: var(--vm-border-color); }
[data-theme="dark"] .vm-trend-overview__featured-links a { color: #60a5fa; background: rgba(96,165,250,0.1); border-color: rgba(96,165,250,0.2); }
[data-theme="dark"] .vm-trend-overview__nav-pill { background: var(--vm-bg-tertiary); color: #94a3b8; }
[data-theme="dark"] .vm-trend-overview__nav-pill:hover { color: #60a5fa; background: rgba(96,165,250,0.1); }
[data-theme="dark"] .vm-trend-overview__search-wrap { background: var(--vm-bg-secondary); border-color: var(--vm-border-color); }

/* Trend scroll hints (mobile only) */
.vm-trend-scroll-hint { display: none; }
@media (max-width: 768px) {
    .vm-trend-scroll-hint { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; font-size: 0.78rem; font-weight: 500; color: var(--vm-text-muted, #64748b); padding: 0.5rem 0.75rem 0.25rem; animation: vm-trend-hint-nudge 1.8s ease-in-out infinite; }
    .vm-trend-scroll-hint svg { width: 16px; height: 16px; flex-shrink: 0; }
    @keyframes vm-trend-hint-nudge { 0%, 100% { transform: translateX(0); opacity: 0.7; } 50% { transform: translateX(6px); opacity: 1; } }
}

/* Trend overview */
/* Trend overview v2.0 */
.vm-trend-overview { margin: 1rem 0; }
/* Intro box */
.vm-trend-overview__intro-box { background: linear-gradient(135deg, rgba(59,130,246,0.04), rgba(99,102,241,0.03)); border: 1px solid rgba(59,130,246,0.15); border-left: 4px solid #3b82f6; border-radius: var(--vm-radius, 12px); padding: 1.5rem 1.75rem; margin-bottom: 2rem; }
.vm-trend-overview__title { font-size: 1.25rem; font-weight: 700; color: var(--vm-text-primary, #0f172a); margin: 0 0 0.75rem; }
.vm-trend-overview__intro-box p { font-size: 0.9rem; color: var(--vm-text-secondary, #475569); line-height: 1.6; margin: 0.5rem 0; }
.vm-trend-overview__note { font-size: 0.82rem; color: var(--vm-text-muted, #64748b); margin-top: 1rem !important; }
.vm-trend-overview__note a { color: #3b82f6; }
.vm-trend-overview__explain { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0; }
.vm-trend-overview__explain-item { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.85rem; color: var(--vm-text-secondary, #475569); }
.vm-trend-overview__explain-item strong { color: var(--vm-text-primary, #0f172a); }
.vm-trend-overview__band { width: 40px; min-width: 40px; height: 18px; border-radius: 3px; flex-shrink: 0; margin-top: 2px; }
.vm-trend-overview__band--dark { background: rgba(239,68,68,0.25); border: 1px solid rgba(239,68,68,0.4); }
.vm-trend-overview__band--light { background: rgba(239,68,68,0.1); border: 1px dashed rgba(239,68,68,0.3); }
.vm-trend-overview__band--precip { background: rgba(59,130,246,0.25); border: 1px solid rgba(59,130,246,0.4); }
/* Search */
.vm-trend-overview__search { margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.vm-trend-overview__search-wrap { display: flex; align-items: center; flex: 1; max-width: 480px; background: var(--vm-card-bg, #fff); border: 1px solid var(--vm-border-color, #cbd5e1); border-radius: 10px; padding: 0 0.75rem; transition: border-color 0.2s; }
.vm-trend-overview__search-wrap:focus-within { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.vm-trend-overview__search-icon { color: var(--vm-text-muted, #64748b); flex-shrink: 0; }
.vm-trend-overview__input { flex: 1; border: none; outline: none; padding: 0.7rem 0.5rem; font-size: 0.9rem; background: transparent; color: var(--vm-text-primary, #0f172a); }
.vm-trend-overview__clear { background: none; border: none; cursor: pointer; font-size: 1.25rem; color: var(--vm-text-muted, #64748b); padding: 0.25rem; display: flex; align-items: center; border-radius: 4px; }
.vm-trend-overview__clear:hover { color: var(--vm-text-primary); background: var(--vm-bg-secondary); }
.vm-trend-overview__count { font-size: 0.8rem; color: var(--vm-text-muted, #64748b); white-space: nowrap; }
/* Featured */
.vm-trend-overview__featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
.vm-trend-overview__featured-group { background: var(--vm-card-bg, #fff); border: 1px solid var(--vm-border-color, #cbd5e1); border-radius: var(--vm-radius, 12px); padding: 1rem 1.25rem; }
.vm-trend-overview__featured-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; color: #3b82f6; }
.vm-trend-overview__featured-header svg { flex-shrink: 0; }
.vm-trend-overview__featured-header h3 { font-size: 0.9rem; font-weight: 700; color: var(--vm-text-primary, #0f172a); margin: 0; }
.vm-trend-overview__featured-links { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.vm-trend-overview__featured-links a { display: inline-block; padding: 0.25rem 0.6rem; font-size: 0.8rem; color: #3b82f6; background: rgba(59,130,246,0.06); border-radius: 6px; text-decoration: none; transition: all 0.15s; border: 1px solid rgba(59,130,246,0.12); }
.vm-trend-overview__featured-links a:hover { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.25); }
/* Region nav */
.vm-trend-overview__nav { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--vm-border-color, #cbd5e1); }
.vm-trend-overview__nav-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.75rem; font-size: 0.8rem; font-weight: 500; color: var(--vm-text-secondary, #475569); background: var(--vm-bg-secondary, #f1f5f9); border-radius: 999px; text-decoration: none; transition: all 0.15s; border: 1px solid transparent; }
.vm-trend-overview__nav-pill:hover { color: #2563eb; background: rgba(37,99,235,0.06); border-color: rgba(37,99,235,0.15); }
.vm-trend-overview__nav-count { font-size: 0.7rem; color: var(--vm-text-muted, #94a3b8); }
.vm-trend-overview__region { margin-bottom: 2rem; }
.vm-trend-overview__region-title { font-size: 1.15rem; font-weight: 700; color: var(--vm-text-primary, #0f172a); margin: 0; }
.vm-trend-overview__region-count { font-weight: 400; color: var(--vm-text-muted, #64748b); font-size: 0.85rem; }
.vm-trend-overview__region-desc { font-size: 0.82rem; color: var(--vm-text-muted, #64748b); margin: 0.25rem 0 0; }
.vm-trend-overview__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem; }
.vm-trend-overview__card { display: flex; align-items: center; gap: 0.25rem; background: var(--vm-card-bg, #fff); border: 1px solid var(--vm-border-color, #cbd5e1); border-radius: var(--vm-radius-small, 8px); overflow: hidden; transition: border-color 0.15s; }
.vm-trend-overview__card:hover { border-color: #3b82f6; }
.vm-trend-overview__link { flex: 1; display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; text-decoration: none; color: var(--vm-text-primary, #0f172a); }
.vm-trend-overview__card-name { font-size: 0.85rem; font-weight: 500; }
.vm-trend-overview__card-alt { font-size: 0.72rem; color: var(--vm-text-muted, #64748b); }
.vm-trend-overview__card-forecast { padding: 0.5rem; color: var(--vm-text-muted, #64748b); border-left: 1px solid var(--vm-border-color, #cbd5e1); display: flex; align-items: center; }
.vm-trend-overview__card-forecast:hover { color: #3b82f6; background: rgba(59,130,246,0.04); }
.vm-crosslink-card--wide { flex: 1; min-width: 100%; }

@media (max-width: 768px) {
    .vm-trend-title { font-size: 1.5rem; }
    .vm-trend-chart-card canvas { height: 240px !important; }
    .vm-trend-confidence-bar { grid-template-columns: 50px 1fr 60px 50px; }
    .vm-trend-overview__grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .vm-trend-overview__featured { grid-template-columns: 1fr; }
    .vm-trend-overview__intro-box { padding: 1rem 1.25rem; }
    .vm-trend-overview__title { font-size: 1.1rem; }
    .vm-trend-overview__nav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .vm-trend-day-card { min-width: 85px; }
    .vm-trend-info-box { padding: 1rem 1.25rem; }
    .vm-trend-info-box__columns { grid-template-columns: 1fr; gap: 0.75rem; }
    .vm-trend-info-box__legend { gap: 0.5rem; }
    .vm-trend-info-box__band { width: 30px; min-width: 30px; height: 14px; }
    .vm-trend-detail-table { font-size: 0.8rem; }
}
@media (max-width: 480px) {
    .vm-trend-chart-card canvas { height: 200px !important; }
    .vm-trend-confidence-bar { grid-template-columns: 45px 1fr 55px; }
    .vm-trend-confidence-bar__spread { display: none; }
    .vm-trend-info-box__legend-item { gap: 0.5rem; }
}
/* VM Forecast v2.0 — Full table + Update time CSS */

.vm-forecast-full-table { margin-top: 2rem; }
.vm-forecast-full-table__title { font-size: 1.1rem; font-weight: 700; color: var(--vm-text-primary, #0f172a); margin: 0 0 1rem; }

.vm-forecast-day-group { margin-bottom: 1.5rem; }
.vm-forecast-day-group--today { border-left: 3px solid #3b82f6; padding-left: 0.75rem; }
.vm-forecast-day-group__header { padding: 0.6rem 0.75rem; background: var(--vm-bg-secondary, #f1f5f9); border-radius: var(--vm-radius-small, 8px) var(--vm-radius-small, 8px) 0 0; font-size: 0.88rem; color: var(--vm-text-primary, #0f172a); display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.vm-forecast-day-group__res { font-size: 0.7rem; background: var(--vm-bg-tertiary, #e2e8f0); padding: 0.1rem 0.4rem; border-radius: 4px; color: var(--vm-text-muted, #64748b); font-weight: 500; }

.vm-forecast-updated { text-align: center; padding: 1.25rem 1rem; font-size: 0.85rem; color: var(--vm-text-muted, #64748b); border-top: 1px solid var(--vm-border-color, #cbd5e1); margin-top: 1.5rem; }
/* VM Forecast v2.1 — Period toggle, sticky headers, centered cells, freshness, wind arrows */

/* Period toggle — pill stil (sync sa vm-forecast.css v3.1, 3 dugmeta: 48h/5d/10d) */
.vm-forecast-period-toggle { display: inline-flex; gap: 4px; margin-bottom: 1rem; padding: 4px; background: var(--vm-bg-secondary, #f1f5f9); border: 1px solid var(--vm-border-color, #e2e8f0); border-radius: 999px; }
.vm-forecast-period-btn { padding: 0.45rem 1.2rem; font-size: 0.85rem; font-weight: 600; border: none; background: transparent; color: var(--vm-text-secondary, #475569); border-radius: 999px; cursor: pointer; transition: all 0.15s; }
.vm-forecast-period-btn--active { background: var(--vm-card-bg, #fff) !important; color: #2563eb !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

/* Chart icons strip — chip model (sync sa vm-forecast.css v3.1; chip stilovi su tamo) */
.vm-forecast-chart-icons { position: relative; height: 56px; margin-bottom: 2px; overflow: hidden; }
.vm-forecast-chart-icons__row { position: relative; height: 100%; }
.vm-forecast-chart-wrap--main { height: 320px; }

/* Full table — centered cells + sticky headers */
.vm-forecast-tbl { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.vm-forecast-tbl th { background: var(--vm-bg-secondary, #f1f5f9); padding: 0.5rem 0.4rem; text-align: center; font-weight: 600; font-size: 0.75rem; color: var(--vm-text-secondary, #475569); border-bottom: 2px solid var(--vm-border-color, #cbd5e1); white-space: nowrap; }
.vm-forecast-tbl td { padding: 0.4rem; border-bottom: 1px solid var(--vm-border-color, #cbd5e1); color: var(--vm-text-primary, #0f172a); text-align: center; vertical-align: middle; }
.vm-forecast-tbl td img { display: block; margin: 0 auto; }
.vm-forecast-tbl tr:hover td { background: rgba(59,130,246,0.03); }

/* Day group */
.vm-forecast-day-group { margin-bottom: 1.5rem; }
.vm-forecast-day-group--today { border-left: 3px solid #3b82f6; padding-left: 0.75rem; }
.vm-forecast-day-group--highlight { animation: vm-day-flash 0.6s ease-out 2; }
@keyframes vm-day-flash { 0%,100% { background: transparent; } 50% { background: rgba(59,130,246,0.08); } }

.vm-forecast-day-group__header { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--vm-bg-secondary, #f1f5f9); border-radius: var(--vm-radius-small, 8px) var(--vm-radius-small, 8px) 0 0; }
.vm-forecast-day-group__date { font-size: 0.95rem; font-weight: 700; color: var(--vm-text-primary, #0f172a); }
.vm-forecast-day-group__sun { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 600; }
.vm-forecast-day-group__sun span { vertical-align: middle; }

/* Freshness updated */
.vm-forecast-updated { text-align: center; padding: 1rem 1.25rem; font-size: 0.88rem; color: var(--vm-text-secondary, #475569); border: 1px solid var(--vm-border-color, #cbd5e1); border-radius: var(--vm-radius-small, 8px); margin-top: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.vm-forecast-updated__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.vm-forecast-updated--fresh .vm-forecast-updated__dot { background: #22c55e; }
.vm-forecast-updated--stale .vm-forecast-updated__dot { background: #f59e0b; }
.vm-forecast-updated--old .vm-forecast-updated__dot { background: #ef4444; }
.vm-forecast-updated--fresh { border-color: #22c55e; background: rgba(34,197,94,0.04); }
.vm-forecast-updated--stale { border-color: #f59e0b; background: rgba(245,158,11,0.04); }
.vm-forecast-updated--old { border-color: #ef4444; background: rgba(239,68,68,0.04); }

/* Mobile sticky day header */
@media (max-width: 768px) {
    .vm-forecast-day-group__header { position: sticky; top: 0; z-index: 5; }
    .vm-forecast-chart-wrap--main { height: 260px; }
    .vm-forecast-tbl { font-size: 0.75rem; }
    .vm-forecast-tbl td img { width: 41px; height: 41px; }
}
@media (max-width: 480px) {
    .vm-forecast-tbl td img { width: 36px; height: 36px; }
    .vm-forecast-day-group__sun { font-size: 0.78rem; }
}

/* ========================================================================
   VM PUSH NOTIFIKACIJE (v1.0, sesija 61)
   - Floating zvono (FAB) u donjem desnom uglu
   - Preview modal (z-index 100003, iznad bottom-nav modala 100002)
   - Inline CTA kartica preko shortcode-a [vm_push_cta]
   - Toast notifications za success/error/info
   - Dark mode preko CSS varijabli
   z-index hijerarhija: header 10000 > menu 9999 > FAB 9500 > bottom-nav 9000
   ======================================================================== */

/* ── FAB (floating zvono) ── */
.vm-push-fab {
    position: fixed;
    bottom: 90px;
    right: 16px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4), 0 2px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px) scale(0.85);
    transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.2s ease;
    pointer-events: none;
}
.vm-push-fab--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.vm-push-fab:hover {
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.55), 0 3px 8px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px) scale(1.05);
}
.vm-push-fab:active { transform: translateY(0) scale(0.95); }
.vm-push-fab__dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid #ffffff;
    animation: vm-push-pulse 2s ease-in-out infinite;
}
@keyframes vm-push-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.75; }
}

@media (max-width: 999px) {
    .vm-push-fab { bottom: 108px; right: 12px; width: 48px; height: 48px; }
}

/* ── Modal ── */
.vm-push-modal {
    position: fixed;
    inset: 0;
    z-index: 100003;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.vm-push-modal--visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
}
.vm-push-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
}
.vm-push-modal__content {
    position: relative;
    max-width: 420px;
    margin: 8vh auto 0;
    background: var(--vm-card-bg, #ffffff);
    border-radius: var(--vm-radius, 12px);
    padding: 28px 24px 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    text-align: center;
    color: var(--vm-text-primary, #0f172a);
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vm-push-modal--visible .vm-push-modal__content { transform: translateY(0); }
.vm-push-modal__close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--vm-text-muted, #64748b);
    padding: 4px 10px;
    border-radius: 6px;
}
.vm-push-modal__close:hover { background: var(--vm-bg-secondary, #f1f5f9); }
.vm-push-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
    border-radius: 50%;
    margin-bottom: 16px;
}
.vm-push-modal__title {
    margin: 0 0 10px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--vm-text-primary, #0f172a);
}
.vm-push-modal__text {
    margin: 0 0 18px;
    font-size: 0.93rem;
    line-height: 1.5;
    color: var(--vm-text-secondary, #475569);
}
.vm-push-modal__preview {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--vm-bg-secondary, #f1f5f9);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: 10px;
    padding: 12px;
    margin: 0 0 22px;
    text-align: left;
}
.vm-push-modal__preview-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
}
.vm-push-modal__preview-icon svg { display: block; }
.vm-push-modal__preview-text { flex: 1; min-width: 0; font-size: 0.85rem; }
.vm-push-modal__preview-text strong {
    display: block;
    color: var(--vm-text-primary, #0f172a);
    font-size: 0.88rem;
    margin-bottom: 2px;
}
.vm-push-modal__preview-text span { color: var(--vm-text-secondary, #475569); }
.vm-push-modal__buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
.vm-push-modal__btn {
    flex: 1;
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}
.vm-push-modal__btn--primary {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}
.vm-push-modal__btn--primary:hover { box-shadow: 0 4px 12px rgba(59, 130, 246, 0.45); transform: translateY(-1px); }
.vm-push-modal__btn--primary:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}
.vm-push-modal__btn--secondary {
    background: var(--vm-bg-secondary, #f1f5f9);
    color: var(--vm-text-primary, #0f172a);
    border: 1px solid var(--vm-border-color, #cbd5e1);
}
.vm-push-modal__btn--secondary:hover { background: var(--vm-bg-tertiary, #e2e8f0); }
.vm-push-modal__privacy {
    margin: 0;
    font-size: 0.78rem;
    color: var(--vm-text-muted, #64748b);
}
.vm-push-modal__privacy a {
    color: inherit;
    text-decoration: underline;
}
body.vm-push-modal-open { overflow: hidden; }

/* ── Inline CTA kartica (shortcode [vm_push_cta]) ── */
.vm-push-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
    border: 1px solid #bfdbfe;
    border-left: 4px solid #3b82f6;
    border-radius: var(--vm-radius, 12px);
    margin: 24px 0;
    color: var(--vm-text-primary, #0f172a);
}
.vm-push-cta__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}
.vm-push-cta__text { flex: 1; min-width: 0; }
.vm-push-cta__title {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vm-text-primary, #0f172a);
}
.vm-push-cta__desc {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--vm-text-secondary, #475569);
}
.vm-push-cta__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 18px;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: #ffffff !important;
    border: none;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3);
    transition: all 0.18s ease;
    text-decoration: none;
}
.vm-push-cta__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(59, 130, 246, 0.45);
    color: #ffffff !important;
}
.vm-push-cta__btn svg { transition: transform 0.18s ease; }
.vm-push-cta__btn:hover svg { transform: translateX(3px); }

@media (max-width: 600px) {
    .vm-push-cta { flex-direction: column; text-align: center; padding: 18px; }
    .vm-push-cta__btn { width: 100%; justify-content: center; }
}

/* Compact variant — manja kartica za uže sekcije */
.vm-push-cta--compact { padding: 14px 16px; gap: 12px; }
.vm-push-cta--compact .vm-push-cta__icon { width: 44px; height: 44px; }
.vm-push-cta--compact .vm-push-cta__title { font-size: 0.95rem; }
.vm-push-cta--compact .vm-push-cta__desc { font-size: 0.82rem; }

/* ── Toast notifikacije ── */
.vm-push-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 12px 20px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--vm-text-primary, #0f172a);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 100004;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: 92%;
}
.vm-push-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.vm-push-toast--success { border-left: 4px solid #10b981; }
.vm-push-toast--error { border-left: 4px solid #ef4444; }
.vm-push-toast--info { border-left: 4px solid #3b82f6; }
.vm-push-toast__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    color: #ffffff;
}
.vm-push-toast--success .vm-push-toast__icon { background: #10b981; }
.vm-push-toast--error .vm-push-toast__icon { background: #ef4444; }
.vm-push-toast--info .vm-push-toast__icon { background: #3b82f6; }
.vm-push-toast__msg { line-height: 1.4; }

@media (max-width: 600px) {
    .vm-push-toast { bottom: 84px; font-size: 0.85rem; padding: 10px 16px; }
}

/* ── Dark mode varijante ── */
[data-theme="dark"] .vm-push-fab {
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .vm-push-modal__backdrop {
    background: rgba(0, 0, 0, 0.7);
}
[data-theme="dark"] .vm-push-modal__icon {
    background: linear-gradient(135deg, #1e3a8a 0%, #312e81 100%);
}
[data-theme="dark"] .vm-push-modal__preview-icon {
    background: linear-gradient(135deg, #1e293b, #1e3a5f);
    border-color: #334155;
    color: #60a5fa;
}
[data-theme="dark"] .vm-push-cta {
    background: linear-gradient(135deg, #1e293b 0%, #1e3a5f 100%);
    border-color: #334155;
    border-left-color: #3b82f6;
}
[data-theme="dark"] .vm-push-toast {
    background: #1e293b;
    color: #f8fafc;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}


/* ========================================================================
   O NAMA STRANICA — Statistike, Features, Two-cols, Team, CTA
   ======================================================================== */

/* --- Statistike (200K, 70+, 450+) --- */
.vm-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 2rem 0;
}
.vm-stats > div {
    text-align: center;
    padding: 28px 16px;
    background: var(--vm-bg-secondary, #f1f5f9);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: var(--vm-radius, 12px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vm-stats > div:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.vm-stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #3b82f6;
    line-height: 1.1;
    margin-bottom: 4px;
}
.vm-stat-label {
    font-size: 0.88rem;
    color: var(--vm-text-muted, #64748b);
    font-weight: 500;
}
[data-theme="dark"] .vm-stat-number { color: #60a5fa; }

/* --- Features kartice (2x2 grid) --- */
.vm-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 2.5rem 0;
}
.vm-feature-item {
    background: var(--vm-card-bg, #ffffff);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: var(--vm-radius, 12px);
    padding: 28px 24px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vm-feature-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.vm-feature-item img {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    display: block;
    object-fit: contain;
}
.vm-feature-item h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vm-text-primary, #0f172a);
    margin: 0 0 10px;
}
.vm-feature-item p {
    font-size: 0.9rem;
    color: var(--vm-text-secondary, #475569);
    line-height: 1.65;
    margin: 0;
}

/* --- Dva kolone (slika + tekst) --- */
.vm-two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
    margin: 2.5rem 0;
}
.vm-two-cols figure {
    margin: 0;
}
.vm-two-cols figure img {
    width: 100%;
    height: auto;
    border-radius: var(--vm-radius, 12px);
    display: block;
}
.vm-two-cols figcaption {
    text-align: center;
    font-style: italic;
    font-size: 0.85rem;
    color: var(--vm-text-muted, #64748b);
    margin-top: 8px;
}
.vm-two-cols p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--vm-text-secondary, #475569);
}

/* --- Tim (3 člana) --- */
.vm-team {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 2.5rem 0;
}
.vm-team-member {
    text-align: center;
    background: var(--vm-card-bg, #ffffff);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: var(--vm-radius, 12px);
    padding: 32px 20px 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vm-team-member:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.vm-team-member img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 16px;
    display: block;
    border: 3px solid var(--vm-bg-tertiary, #e2e8f0);
}
.vm-team-member h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vm-text-primary, #0f172a);
    margin: 0 0 4px;
}
.vm-team-role {
    font-size: 0.85rem;
    color: var(--vm-text-muted, #64748b);
    font-style: italic;
    margin-bottom: 12px;
}
.vm-team-socials {
    display: flex;
    justify-content: center;
    gap: 12px;
}
.vm-team-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--vm-bg-secondary, #f1f5f9);
    transition: background 0.2s ease, transform 0.2s ease;
}
.vm-team-socials a:hover {
    background: #3b82f6;
    transform: scale(1.1);
}
.vm-team-socials a svg {
    width: 16px;
    height: 16px;
    fill: var(--vm-text-muted, #64748b);
    transition: fill 0.2s ease;
}
.vm-team-socials a:hover svg {
    fill: #ffffff;
}

/* --- CTA dugme (Kontaktirajte nas) --- */
a.vm-about-cta,
a.vm-about-cta:link,
a.vm-about-cta:visited,
a.vm-about-cta:hover,
a.vm-about-cta:active,
a.vm-about-cta:focus,
.entry-content a.vm-about-cta,
.page a.vm-about-cta {
    display: inline-block;
    padding: 14px 36px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #ffffff !important;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 999px;
    text-decoration: none !important;
    border-bottom: none !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.vm-about-cta:hover,
.entry-content a.vm-about-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
    color: #ffffff !important;
}

/* --- Highlight box (prognoza) --- */
.vm-highlight-box {
    text-align: center;
    padding: 36px 28px;
    margin: 2.5rem 0;
    background: linear-gradient(135deg, rgba(59,130,246,0.06) 0%, rgba(99,102,241,0.06) 100%);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-left: 4px solid #3b82f6;
    border-radius: var(--vm-radius, 12px);
}
.vm-highlight-box__icon { margin-bottom: 12px; }
.vm-highlight-box h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--vm-text-primary, #0f172a);
    margin: 0 0 10px;
}
.vm-highlight-box p {
    font-size: 0.95rem;
    color: var(--vm-text-secondary, #475569);
    line-height: 1.65;
    margin: 0 0 16px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
}
.vm-highlight-box__links {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
.vm-highlight-box__links a {
    color: #3b82f6;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    border-bottom: none !important;
}
.vm-highlight-box__links a:hover { text-decoration: underline; }
[data-theme="dark"] .vm-highlight-box {
    background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(99,102,241,0.08) 100%);
}
[data-theme="dark"] .vm-highlight-box__links a { color: #60a5fa; }

/* --- Mobile responsive --- */
@media (max-width: 768px) {
    .vm-stats { grid-template-columns: 1fr; gap: 12px; }
    .vm-features { grid-template-columns: 1fr; }
    .vm-two-cols { grid-template-columns: 1fr; }
    .vm-team { grid-template-columns: 1fr; gap: 16px; }
    .vm-stat-number { font-size: 2rem; }
}

/* ========================================================================
   KONTAKT STRANICA
   ======================================================================== */

/* --- Hero --- */
.vm-contact-hero {
    text-align: center;
    padding: 48px 24px 32px;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, rgba(59,130,246,0.06) 0%, rgba(99,102,241,0.06) 100%);
    border-radius: var(--vm-radius, 12px);
}
.vm-contact-hero h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--vm-text-primary, #0f172a);
    margin: 0 0 8px;
}
.vm-contact-hero > p {
    font-size: 1.05rem;
    color: var(--vm-text-muted, #64748b);
    margin: 0;
}
[data-theme="dark"] .vm-contact-hero {
    background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(99,102,241,0.08) 100%);
}

/* --- 3 kartice (Adresa, Email, Telefon) --- */
.vm-contact-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 0 2.5rem;
}
.vm-contact-card {
    text-align: center;
    padding: 28px 20px;
    background: var(--vm-card-bg, #ffffff);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: var(--vm-radius, 12px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vm-contact-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.vm-contact-card svg {
    width: 44px;
    height: 44px;
    stroke: #3b82f6;
    fill: none;
    stroke-width: 1.5;
    margin-bottom: 14px;
}
[data-theme="dark"] .vm-contact-card svg { stroke: #60a5fa; }
.vm-contact-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vm-text-primary, #0f172a);
    margin: 0 0 6px;
}
.vm-contact-card p {
    font-size: 0.9rem;
    color: var(--vm-text-secondary, #475569);
    margin: 0;
    line-height: 1.5;
    text-align: center !important;
}
.vm-contact-hero > p {
    text-align: center !important;
}
.vm-contact-card a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 600;
}
.vm-contact-card a:hover { text-decoration: underline; }
[data-theme="dark"] .vm-contact-card a { color: #60a5fa; }

/* --- Forma sekcija (slika + forma) --- */
.vm-contact-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
    margin: 0 0 2.5rem;
}
.vm-contact-image img {
    width: 100%;
    height: auto;
    border-radius: var(--vm-radius, 12px);
    display: block;
    object-fit: cover;
}
.vm-contact-form h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--vm-text-primary, #0f172a);
    margin: 0 0 8px;
}
.vm-contact-form > p {
    font-size: 0.92rem;
    color: var(--vm-text-secondary, #475569);
    line-height: 1.6;
    margin: 0 0 20px;
}

/* --- WPForms minimal override --- */
.vm-contact-form .wpforms-container input[type="text"],
.vm-contact-form .wpforms-container input[type="email"],
.vm-contact-form .wpforms-container textarea {
    border: 1px solid var(--vm-border-color, #cbd5e1) !important;
    border-radius: var(--vm-radius-small, 8px) !important;
    background: var(--vm-card-bg, #ffffff) !important;
    color: var(--vm-text-primary, #0f172a) !important;
    padding: 10px 14px !important;
    font-size: 0.92rem !important;
}
.vm-contact-form .wpforms-container .wpforms-submit-container button {
    background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 32px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vm-contact-form .wpforms-container .wpforms-submit-container button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59,130,246,0.3);
}

/* --- Mobile responsive --- */
@media (max-width: 768px) {
    .vm-contact-cards { grid-template-columns: 1fr; gap: 12px; }
    .vm-contact-section { grid-template-columns: 1fr; }
    .vm-contact-image { display: none; }
    .vm-contact-hero h1 { font-size: 1.6rem; }
    .vm-contact-hero { padding: 32px 16px 24px; }
}

/* ========================================================================
   SKALA PADAVINA — ispod mape (color=1 Original paleta)
   ======================================================================== */
.vm-rain-scale {
    margin: 12px 0 0;
    padding: 10px 16px 8px;
    background: var(--vm-card-bg, #ffffff);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: var(--vm-radius-small, 8px);
}
.vm-rain-scale__title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--vm-text-muted, #64748b);
    margin-bottom: 6px;
    text-align: center;
}
.vm-rain-scale__bar {
    height: 14px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.12);
    /* VM dBZ paleta (5–60+) — ista kao /radarska-slika/ i HU radar frejmovi */
    background: linear-gradient(90deg,
        #93c5fd 0%, #60a5fa 9%, #34d399 18%, #4ade80 27%,
        #facc15 36%, #fbbf24 45%, #fb923c 54%, #f97316 63%,
        #ef4444 72%, #dc2626 81%, #be185d 90%, #7c3aed 100%);
}
.vm-rain-scale__labels {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
}
.vm-rain-scale__labels span {
    font-size: 0.75rem;
    color: var(--vm-text-muted, #64748b);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
/* Opisne kategorije ispod dBZ brojeva — centrirane u svojoj zoni, u boji gradijenta */
.vm-rain-scale__cats {
    display: flex;
    margin-top: 2px;
}
.vm-rain-scale__cat {
    flex: 1;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
}
.vm-rain-scale__cat--slabe   { color: #2563eb; }
.vm-rain-scale__cat--umerene { color: #ca8a04; }
.vm-rain-scale__cat--jake    { color: #ea580c; }
.vm-rain-scale__cat--olujne  { color: #be185d; }
[data-theme="dark"] .vm-rain-scale__cat--slabe   { color: #60a5fa; }
[data-theme="dark"] .vm-rain-scale__cat--umerene { color: #facc15; }
[data-theme="dark"] .vm-rain-scale__cat--jake    { color: #fb923c; }
[data-theme="dark"] .vm-rain-scale__cat--olujne  { color: #f472b6; }
[data-theme="dark"] .vm-rain-scale {
    border-color: var(--vm-border-color, #334155);
}
[data-theme="dark"] .vm-rain-scale__bar {
    border-color: rgba(255,255,255,0.15);
}

/* ══════════════════════════════════════════════════════════════════════════════
   RADIOSONDAŽNA MERENJA (v1.0)
   Prefix: .vm-snd-*
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Page Layout ───────────────────────────────────────────────────────────── */
.vm-snd-page { padding-top: 28px; max-width: 1020px; margin: 0 auto; }

.vm-snd-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    margin: 0 0 8px;
    border-left: 3px solid #3b82f6;
    padding-left: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
@media (min-width: 768px) { .vm-snd-title { font-size: 2rem; } }

/* Balloon icon link */
.vm-snd-balloon {
    display: inline-flex;
    color: #3b82f6;
    transition: transform 0.2s, color 0.2s;
    flex-shrink: 0;
}
.vm-snd-balloon:hover { color: #2563eb; transform: translateY(-2px); }
.vm-snd-balloon svg { width: 28px; height: 28px; }
@media (max-width: 768px) { .vm-snd-balloon svg { width: 22px; height: 22px; } }

/* Back button to overview */
.vm-snd-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    margin-bottom: 20px;
    width: 100%;
    font-size: 0.82rem;
    font-weight: 600;
    color: #3b82f6;
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius-small);
    text-decoration: none;
    text-align: center;
    transition: all 0.15s;
}
.vm-snd-back-btn:hover {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}
.vm-snd-back-btn svg { flex-shrink: 0; }
[data-theme="dark"] .vm-snd-back-btn { color: #60a5fa; }
[data-theme="dark"] .vm-snd-back-btn:hover { background: #2563eb; color: #fff; border-color: #2563eb; }

.vm-snd-subtitle {
    color: var(--vm-text-muted);
    font-size: 0.85rem;
    margin-bottom: 24px;
    padding-left: 17px;
}
.vm-snd-subtitle__sep { margin: 0 6px; }

/* ── Controls ──────────────────────────────────────────────────────────────── */
.vm-snd-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--vm-bg-secondary);
    border-radius: var(--vm-radius);
    border: 1px solid var(--vm-border-color);
}

.vm-snd-controls__date {
    display: flex;
    align-items: center;
    gap: 8px;
}
.vm-snd-controls__date label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--vm-text-secondary);
}
.vm-snd-date-input {
    padding: 8px 12px;
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius-small);
    background: var(--vm-bg-primary);
    color: var(--vm-text-primary);
    font-size: 0.85rem;
}

.vm-snd-load-btn {
    padding: 8px 20px;
    background: var(--vm-gradient-primary);
    color: #fff;
    border: none;
    border-radius: var(--vm-radius-small);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}
.vm-snd-load-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* Run selector segmented control */
.vm-snd-controls__runs {
    display: inline-flex;
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius-small);
    overflow: hidden;
}
.vm-snd-controls__runs .vm-segmented-control__btn {
    padding: 8px 16px;
    border: none;
    border-right: 1px solid var(--vm-border-color);
    background: var(--vm-bg-primary);
    color: var(--vm-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    border-radius: 0;
}
.vm-snd-controls__runs .vm-segmented-control__btn:last-child { border-right: none; }
.vm-snd-controls__runs .vm-segmented-control__btn:hover {
    background: var(--vm-bg-secondary);
}
.vm-snd-controls__runs .vm-segmented-control__btn--active {
    background: #3b82f6 !important;
    color: #fff !important;
}
[data-theme="dark"] .vm-snd-controls__runs .vm-segmented-control__btn--active {
    background: #2563eb !important;
    color: #fff !important;
}

.vm-snd-controls-note {
    font-size: 0.78rem;
    color: var(--vm-text-muted);
    margin: -16px 0 24px;
    font-style: italic;
}

/* ── Vertical Profile Table (Sondažni nivoi) ─────────────────────────────── */
.vm-snd-profile-intro {
    font-size: 0.85rem;
    color: var(--vm-text-secondary);
    margin: 0 0 12px;
    line-height: 1.5;
}
.vm-snd-profile-table-wrap {
    overflow-x: auto;
    margin-bottom: 24px;
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius-small);
    background: var(--vm-card-bg);
}
.vm-snd-profile-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    min-width: 560px;
}
.vm-snd-profile-table th,
.vm-snd-profile-table td {
    padding: 6px 10px;
    text-align: right;
    border-bottom: 1px solid var(--vm-border-color);
}
.vm-snd-profile-table th {
    background: var(--vm-bg-secondary);
    text-align: center;
    font-weight: 700;
    color: var(--vm-text-primary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.vm-snd-profile-table tbody tr:last-child td {
    border-bottom: none;
}
.vm-snd-profile-row--mandatory {
    background: rgba(59, 130, 246, 0.05);
    font-weight: 600;
}
.vm-snd-profile-row--mandatory td {
    color: var(--vm-text-primary);
}
.vm-snd-profile-table tbody tr:not(.vm-snd-profile-row--mandatory) td {
    color: var(--vm-text-secondary);
}
html[data-theme="dark"] .vm-snd-profile-row--mandatory {
    background: rgba(96, 165, 250, 0.08);
}
@media (max-width: 640px) {
    .vm-snd-profile-table {
        font-size: 0.78rem;
        min-width: 480px;
    }
    .vm-snd-profile-table th,
    .vm-snd-profile-table td {
        padding: 4px 6px;
    }
}

/* ── Loading / Status ──────────────────────────────────────────────────────── */
.vm-snd-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 20px;
    color: var(--vm-text-muted);
    font-size: 0.9rem;
}
.vm-snd-spinner {
    width: 24px; height: 24px;
    border: 3px solid var(--vm-border-color);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: vm-snd-spin 0.8s linear infinite;
}
@keyframes vm-snd-spin { to { transform: rotate(360deg); } }

.vm-snd-status {
    padding: 14px 18px;
    border-radius: var(--vm-radius-small);
    font-size: 0.88rem;
    margin-bottom: 20px;
}
.vm-snd-status--error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
[data-theme="dark"] .vm-snd-status--error {
    background: #450a0a;
    color: #fca5a5;
    border-color: #7f1d1d;
}

/* ── Chart Cards ───────────────────────────────────────────────────────────── */
.vm-snd-chart-card {
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius);
    padding: 20px;
    margin-bottom: 24px;
}
.vm-snd-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.vm-snd-chart-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--vm-text-primary);
    margin: 0;
}
.vm-snd-chart-header .vm-snd-chart-title { margin-bottom: 0; }
.vm-snd-chart-card > .vm-snd-chart-title { margin-bottom: 16px; }

.vm-snd-chart-actions {
    display: flex;
    gap: 8px;
}
.vm-snd-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius-small);
    background: var(--vm-bg-secondary);
    color: var(--vm-text-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
}
.vm-snd-action-btn:hover {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}
.vm-snd-chart-wrap {
    text-align: center;
}
.vm-snd-chart-wrap--hodo {
    max-width: 500px;
    margin: 0 auto;
}
.vm-snd-chart-img {
    width: 100%;
    max-width: 850px;
    height: auto;
    border-radius: 8px;
    cursor: pointer;
}
.vm-snd-chart-card--hodo .vm-snd-chart-img {
    max-width: 100%;
}
.vm-snd-chart-card--profile .vm-snd-chart-img {
    max-width: 100%;
}

/* Fullscreen mode — any chart wrap */
.vm-snd-chart-wrap:fullscreen,
.vm-snd-chart-wrap--hodo:fullscreen {
    background: var(--vm-bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.vm-snd-chart-wrap:fullscreen .vm-snd-chart-img,
.vm-snd-chart-wrap--hodo:fullscreen .vm-snd-chart-img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    cursor: default;
}

/* Dual row: hodograph + profile side by side */
.vm-snd-dual-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 20px;
    margin-bottom: 24px;
}
@media (max-width: 900px) {
    .vm-snd-dual-row { grid-template-columns: 1fr; }
}
.vm-snd-dual-row .vm-snd-chart-card { margin-bottom: 0; }

/* ── Assessment Badge ──────────────────────────────────────────────────────── */
.vm-snd-assessment {
    margin-bottom: 24px;
}
.vm-snd-assessment__badge {
    padding: 18px 24px;
    border-radius: var(--vm-radius);
    text-align: center;
}
.vm-snd-assessment__level {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.vm-snd-assessment__subtitle {
    font-size: 0.82rem;
    margin-top: 4px;
    opacity: 0.8;
}
.vm-snd-assessment__details {
    margin-top: 12px;
    padding: 14px 18px;
    background: var(--vm-bg-secondary);
    border-radius: var(--vm-radius-small);
    border: 1px solid var(--vm-border-color);
}
.vm-snd-assessment__details ul {
    margin: 0;
    padding-left: 20px;
}
.vm-snd-assessment__details li {
    font-size: 0.88rem;
    color: var(--vm-text-secondary);
    margin-bottom: 6px;
    line-height: 1.5;
}

/* ── Indices Panel ─────────────────────────────────────────────────────────── */
.vm-snd-section { margin-bottom: 24px; }
.vm-snd-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--vm-text-primary);
    margin: 0 0 14px;
    border-left: 3px solid #3b82f6;
    padding-left: 12px;
}

.vm-snd-indices {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.vm-snd-index-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vm-snd-index-group__title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--vm-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--vm-border-color);
}
.vm-snd-index-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media (max-width: 1024px) { .vm-snd-index-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .vm-snd-index-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .vm-snd-index-grid { grid-template-columns: 1fr 1fr; gap: 8px; } }

.vm-snd-index-card {
    padding: 12px 14px;
    border-radius: var(--vm-radius-small);
    text-align: center;
    border: 1px solid var(--vm-border-color);
    background: var(--vm-card-bg);
    transition: transform 0.15s;
}
.vm-snd-index-card:hover { transform: translateY(-1px); }
.vm-snd-index-card__value {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.vm-snd-index-card__label {
    font-size: 0.75rem;
    color: var(--vm-text-muted);
    margin-top: 4px;
    font-weight: 500;
}

/* Index card severity colors */
.vm-snd-index-card--green  { background: #dcfce7; border-color: #86efac; }
.vm-snd-index-card--green .vm-snd-index-card__value { color: #166534; }
.vm-snd-index-card--yellow { background: #fef9c3; border-color: #fde047; }
.vm-snd-index-card--yellow .vm-snd-index-card__value { color: #854d0e; }
.vm-snd-index-card--orange { background: #fed7aa; border-color: #fdba74; }
.vm-snd-index-card--orange .vm-snd-index-card__value { color: #9a3412; }
.vm-snd-index-card--red    { background: #fecaca; border-color: #fca5a5; }
.vm-snd-index-card--red .vm-snd-index-card__value { color: #991b1b; }
.vm-snd-index-card--neutral { background: var(--vm-bg-secondary); }

[data-theme="dark"] .vm-snd-index-card--green  { background: #14532d; border-color: #166534; }
[data-theme="dark"] .vm-snd-index-card--green .vm-snd-index-card__value { color: #86efac; }
[data-theme="dark"] .vm-snd-index-card--yellow { background: #713f12; border-color: #854d0e; }
[data-theme="dark"] .vm-snd-index-card--yellow .vm-snd-index-card__value { color: #fde047; }
[data-theme="dark"] .vm-snd-index-card--orange { background: #7c2d12; border-color: #9a3412; }
[data-theme="dark"] .vm-snd-index-card--orange .vm-snd-index-card__value { color: #fdba74; }
[data-theme="dark"] .vm-snd-index-card--red    { background: #7f1d1d; border-color: #991b1b; }
[data-theme="dark"] .vm-snd-index-card--red .vm-snd-index-card__value { color: #fca5a5; }

/* ── Inversions Table ──────────────────────────────────────────────────────── */
.vm-snd-inv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.vm-snd-inv-table th {
    text-align: left;
    padding: 10px 12px;
    background: var(--vm-bg-secondary);
    color: var(--vm-text-secondary);
    font-weight: 600;
    border-bottom: 2px solid var(--vm-border-color);
}
.vm-snd-inv-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--vm-border-color);
    color: var(--vm-text-primary);
}
.vm-snd-inv-type {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.vm-snd-inv-type--surface     { background: #dbeafe; color: #1e40af; }
.vm-snd-inv-type--elevated    { background: #fef9c3; color: #854d0e; }
.vm-snd-inv-type--subsidence  { background: #fed7aa; color: #9a3412; }

[data-theme="dark"] .vm-snd-inv-type--surface    { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .vm-snd-inv-type--elevated   { background: #713f12; color: #fde047; }
[data-theme="dark"] .vm-snd-inv-type--subsidence { background: #7c2d12; color: #fdba74; }

/* ── Run Info ──────────────────────────────────────────────────────────────── */
.vm-snd-run-info {
    margin-top: 20px;
    margin-bottom: 32px;
    padding: 14px 20px;
    background: var(--vm-bg-secondary);
    border-radius: var(--vm-radius);
    border: 1px solid var(--vm-border-color);
    border-left: 3px solid #6366f1;
}
.vm-snd-run-info__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.82rem;
    color: var(--vm-text-muted);
}
.vm-snd-run-info__inner span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.vm-snd-run-info__inner span::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #6366f1;
    opacity: 0.5;
}
.vm-snd-run-info__inner span:first-child::before { display: none; }

/* ── Overview Page ─────────────────────────────────────────────────────────── */
.vm-snd-overview { max-width: 960px; margin: 0 auto; }

.vm-snd-intro {
    margin-bottom: 24px;
    font-size: 0.92rem;
    color: var(--vm-text-secondary);
    line-height: 1.7;
}

.vm-snd-map {
    height: 450px;
    border-radius: var(--vm-radius);
    border: 1px solid var(--vm-border-color);
    margin-bottom: 32px;
}
@media (max-width: 768px) { .vm-snd-map { height: 350px; } }

.vm-snd-country-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vm-text-primary);
    text-transform: none;
    letter-spacing: 0;
    margin: 28px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--vm-border-color);
}
.vm-snd-country-flag {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
}
.vm-snd-country-name { flex: 1; }
.vm-snd-country-count {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--vm-text-muted);
    text-transform: none;
    letter-spacing: 0;
}
.vm-snd-country-title--serbia {
    color: #dc2626;
    border-bottom-color: #dc2626;
}
html[data-theme="dark"] .vm-snd-country-title--serbia {
    color: #f87171;
    border-bottom-color: #ef4444;
}

/* ── Station Cards ─────────────────────────────────────────────────────────── */
.vm-snd-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.vm-snd-card {
    display: block;
    padding: 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.15s, box-shadow 0.15s, border-color 0.15s;
    position: relative;
}
.vm-snd-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: #3b82f6;
}
.vm-snd-card__top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-right: 24px;   /* prostor za arrow u uglu */
}
.vm-snd-card__flag {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}
.vm-snd-card__name {
    font-size: 1.05rem;
    font-weight: 700;
    flex: 1;
    line-height: 1.25;
}
.vm-snd-card__badge {
    display: inline-block;
    padding: 2px 8px;
    background: #dc2626;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 4px;
    flex-shrink: 0;
}
.vm-snd-card--main {
    border-width: 2px;
    border-color: #fecaca;
}
.vm-snd-card__meta {
    display: flex;
    gap: 12px;
    font-size: 0.78rem;
    color: var(--vm-text-muted);
    margin-bottom: 8px;
}
.vm-snd-card__desc {
    font-size: 0.82rem;
    color: var(--vm-text-secondary);
    line-height: 1.5;
}
.vm-snd-card__arrow {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 1.1rem;
    color: #3b82f6;
    opacity: 0;
    transition: opacity 0.15s;
}
.vm-snd-card:hover .vm-snd-card__arrow { opacity: 1; }

/* ── Serbia section emphasis ─────────────────────────────────────────────── */
.vm-snd-cards--serbia .vm-snd-card {
    border-color: #fecaca;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.05);
}
.vm-snd-cards--serbia .vm-snd-card:hover {
    border-color: #dc2626;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.15);
}
.vm-snd-cards--serbia .vm-snd-card__arrow { color: #dc2626; }
html[data-theme="dark"] .vm-snd-cards--serbia .vm-snd-card {
    border-color: rgba(220, 38, 38, 0.35);
}
html[data-theme="dark"] .vm-snd-cards--serbia .vm-snd-card:hover {
    border-color: #ef4444;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
}
html[data-theme="dark"] .vm-snd-card--main { border-color: rgba(220, 38, 38, 0.5); }

/* ── Crosslinks (small cards) — kompaktnije ─────────────────────────────── */
.vm-snd-card--small .vm-snd-card__desc { display: none; }
.vm-snd-card--small { padding: 12px 14px; }
.vm-snd-card--small .vm-snd-card__top { margin-bottom: 4px; padding-right: 16px; }
.vm-snd-card--small .vm-snd-card__name { font-size: 0.95rem; font-weight: 600; }
.vm-snd-card--small .vm-snd-card__badge { display: none; }
.vm-snd-card--small .vm-snd-card__flag { font-size: 1rem; }

/* ── Info Box ──────────────────────────────────────────────────────────────── */
.vm-snd-info {
    margin-top: 24px;
    padding: 16px 20px;
    background: var(--vm-bg-secondary);
    border-radius: var(--vm-radius);
    border: 1px solid var(--vm-border-color);
    border-left: 3px solid #3b82f6;
}
.vm-snd-info h3 {
    font-size: 1rem;
    margin: 0 0 10px;
    color: var(--vm-text-primary);
}
.vm-snd-info p {
    font-size: 0.88rem;
    color: var(--vm-text-secondary);
    line-height: 1.6;
    margin: 0;
}
.vm-snd-info p + p {
    margin-top: 8px;
}

/* ── About — "O radiosondaži" informativne kartice (overview stranica) ───── */
.vm-snd-about-intro {
    font-size: 0.9rem;
    color: var(--vm-text-secondary);
    margin: 0 0 16px;
    line-height: 1.55;
}
.vm-snd-about-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 8px;
}
@media (max-width: 768px) {
    .vm-snd-about-grid { grid-template-columns: 1fr; gap: 12px; }
}
.vm-snd-about-card {
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius);
    padding: 18px 20px;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    position: relative;
}
.vm-snd-about-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    border-color: rgba(59, 130, 246, 0.35);
}
.vm-snd-about-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: rgba(59, 130, 246, 0.10);
    color: #2563eb;
}
.vm-snd-about-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--vm-text-primary);
}
.vm-snd-about-card__text {
    font-size: 0.88rem;
    color: var(--vm-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Boje ikona po kategoriji */
.vm-snd-about-card--what .vm-snd-about-card__icon     { background: rgba(59, 130, 246, 0.10);  color: #2563eb; }
.vm-snd-about-card--skewt .vm-snd-about-card__icon    { background: rgba(239, 68, 68, 0.10);   color: #dc2626; }
.vm-snd-about-card--times .vm-snd-about-card__icon    { background: rgba(245, 158, 11, 0.10);  color: #d97706; }
.vm-snd-about-card--indices .vm-snd-about-card__icon  { background: rgba(168, 85, 247, 0.10);  color: #9333ea; }

/* Dark mode varijante */
[data-theme="dark"] .vm-snd-about-card__icon {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
}
[data-theme="dark"] .vm-snd-about-card--what .vm-snd-about-card__icon    { background: rgba(96, 165, 250, 0.15);  color: #60a5fa; }
[data-theme="dark"] .vm-snd-about-card--skewt .vm-snd-about-card__icon   { background: rgba(248, 113, 113, 0.15); color: #f87171; }
[data-theme="dark"] .vm-snd-about-card--times .vm-snd-about-card__icon   { background: rgba(251, 191, 36, 0.15);  color: #fbbf24; }
[data-theme="dark"] .vm-snd-about-card--indices .vm-snd-about-card__icon { background: rgba(192, 132, 252, 0.15); color: #c084fc; }

[data-theme="dark"] .vm-snd-about-card:hover {
    border-color: rgba(96, 165, 250, 0.45);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* ── Intro Text ────────────────────────────────────────────────────────────── */
.vm-snd-page .vm-snd-intro {
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--vm-bg-secondary);
    border-radius: var(--vm-radius);
    border-left: 4px solid #3b82f6;
}
.vm-snd-page .vm-snd-intro p {
    font-size: 0.88rem;
    color: var(--vm-text-secondary);
    line-height: 1.65;
    margin: 0 0 8px;
}
.vm-snd-page .vm-snd-intro p:last-child { margin-bottom: 0; }

/* ── Accordion (details/summary) ───────────────────────────────────────────── */
.vm-snd-explanations { margin-top: 40px; margin-bottom: 32px; }
.vm-snd-explanations__intro {
    font-size: 0.85rem;
    color: var(--vm-text-muted);
    margin-bottom: 20px;
}

/* Grupisanje po kategorijama (Termodinamički / Kinematički / Kompozitni) */
.vm-snd-explanations__group {
    margin-bottom: 28px;
    padding-left: 12px;
    border-left: 3px solid var(--vm-border-color);
}
.vm-snd-explanations__group--termo     { border-left-color: #ef4444; }
.vm-snd-explanations__group--kin       { border-left-color: #3b82f6; }
.vm-snd-explanations__group--composite { border-left-color: #a855f7; }
.vm-snd-explanations__group-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--vm-text-primary);
}
.vm-snd-explanations__group--termo     .vm-snd-explanations__group-title { color: #dc2626; }
.vm-snd-explanations__group--kin       .vm-snd-explanations__group-title { color: #2563eb; }
.vm-snd-explanations__group--composite .vm-snd-explanations__group-title { color: #9333ea; }
[data-theme="dark"] .vm-snd-explanations__group--termo     .vm-snd-explanations__group-title { color: #f87171; }
[data-theme="dark"] .vm-snd-explanations__group--kin       .vm-snd-explanations__group-title { color: #60a5fa; }
[data-theme="dark"] .vm-snd-explanations__group--composite .vm-snd-explanations__group-title { color: #c084fc; }
.vm-snd-explanations__group-desc {
    font-size: 0.82rem;
    color: var(--vm-text-secondary);
    margin: 0 0 12px;
    line-height: 1.55;
}
.vm-snd-accordion__item {
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius-small);
    margin-bottom: 6px;
    overflow: hidden;
}
.vm-snd-accordion__item[open] {
    border-color: #3b82f6;
}
.vm-snd-accordion__header {
    padding: 12px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--vm-text-primary);
    cursor: pointer;
    background: var(--vm-bg-secondary);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.15s;
}
.vm-snd-accordion__header:hover {
    background: var(--vm-bg-tertiary);
}
.vm-snd-accordion__header::-webkit-details-marker { display: none; }
.vm-snd-accordion__header::after {
    content: '+';
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--vm-text-muted);
    transition: transform 0.2s;
}
.vm-snd-accordion__item[open] .vm-snd-accordion__header::after {
    content: '−';
    color: #3b82f6;
}
.vm-snd-accordion__body {
    padding: 12px 16px;
    font-size: 0.84rem;
    color: var(--vm-text-secondary);
    line-height: 1.6;
    border-top: 1px solid var(--vm-border-color);
}
.vm-snd-accordion__body strong {
    color: var(--vm-text-primary);
    font-weight: 600;
}

/* ── Forecast Detail Cards ──────────────────────────────────────────────────── */
.vm-snd-forecast-detail { margin-bottom: 24px; }
.vm-snd-forecast-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vm-snd-forecast-card {
    padding: 14px 18px;
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius-small);
    border-left: 4px solid #3b82f6;
}
.vm-snd-forecast-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.vm-snd-forecast-card__icon { font-size: 1.2rem; }
.vm-snd-forecast-card__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--vm-text-primary);
}
.vm-snd-forecast-card__conf {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}
.vm-snd-forecast-card__conf--high   { background: #dcfce7; color: #166534; }
.vm-snd-forecast-card__conf--moderate { background: #fef9c3; color: #854d0e; }
.vm-snd-forecast-card__conf--low    { background: #f1f5f9; color: #64748b; }
[data-theme="dark"] .vm-snd-forecast-card__conf--high   { background: #14532d; color: #86efac; }
[data-theme="dark"] .vm-snd-forecast-card__conf--moderate { background: #713f12; color: #fde047; }
[data-theme="dark"] .vm-snd-forecast-card__conf--low    { background: #1e293b; color: #94a3b8; }

.vm-snd-forecast-card__text {
    font-size: 0.85rem;
    color: var(--vm-text-secondary);
    line-height: 1.55;
}

/* ── Crosslinks ────────────────────────────────────────────────────────────── */
.vm-snd-crosslinks { margin-top: 32px; }

/* ── SEO Text ──────────────────────────────────────────────────────────────── */
.vm-snd-seo-text {
    margin-top: 24px;
    font-size: 0.85rem;
    color: var(--vm-text-muted);
    line-height: 1.6;
}

/* ═════════════════════════════════════════════════════════════════════════════
   MUNJE I GRMLJAVINA (v1.0) — Lightning page sa custom JS player-om
   Prefix: .vm-mng-*
   ═════════════════════════════════════════════════════════════════════════════ */

.vm-mng-page {
    max-width: 1020px;
    margin: 0 auto;
}

.vm-mng-section {
    margin-bottom: 28px;
}

/* ── Hero / Intro ── */
.vm-mng-h1 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--vm-text-primary);
    line-height: 1.2;
}

.vm-mng-intro-text {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--vm-text-secondary);
    text-align: center !important;
    max-width: 860px;
    margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════
   MUNJE UŽIVO v2.0 — LINET interaktivna mapa (vm-mng-map/stage/bar)
   ══════════════════════════════════════════════════════════════ */
.vm-mng-stage { position: relative; width: 100%; }

#vm-mng-map {
    position: relative;
    width: 100%;
    height: 600px;
    border-radius: var(--vm-radius, 12px);
    overflow: hidden;
    background: var(--vm-bg-secondary, #f1f5f9);
}

.vm-mng-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--vm-text-muted, #64748b);
    font-size: 0.95rem;
}

.vm-mng-attrib {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    font-size: 0.68rem;
    color: #334155;
}
.vm-mng-attrib a { color: #2563eb; text-decoration: none; }
[data-theme="dark"] .vm-mng-attrib { background: rgba(15,23,42,0.85); color: #cbd5e1; }
[data-theme="dark"] .vm-mng-attrib a { color: #60a5fa; }

/* Plutajući glass control bar */
.vm-mng-bar {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 1000;
    width: min(560px, calc(100% - 20px));
    padding: 10px 14px 8px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(203, 213, 225, 0.55);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}
.vm-mng-bar__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* CWV CLS fix (12.06.2026): bar je absolute (ne gura sadržaj), ali rast SOPSTVENE
   geometrije (font swap + JS popunjavanje ticks/time) se računa u CLS (0.406!).
   Reveal preko opacity = nula CLS-a; JS dodaje --ready kad je bar popunjen,
   keyframes fallback ga prikazuje posle 4s i bez JS-a. */
.vm-mng-bar { opacity: 0; transition: opacity 0.25s; animation: vmMngBarIn 0.3s ease 4s forwards; }
.vm-mng-bar--ready { opacity: 1; animation: none; }
@keyframes vmMngBarIn { to { opacity: 1; } }

.vm-mng-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.1s;
}
.vm-mng-btn:hover { background: rgba(15, 23, 42, 0.12); }
.vm-mng-btn:active { transform: scale(0.94); }
.vm-mng-btn--play {
    width: 40px; height: 40px;
    background: var(--vm-gradient-primary, linear-gradient(135deg, #3b82f6 0%, #6366f1 100%));
    color: #fff;
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.35);
}
.vm-mng-btn--play:hover { background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%); }
.vm-mng-btn--fs { margin-left: auto; }

.vm-mng-time {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    font-size: 0.85rem; font-weight: 700; color: #0f172a;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vm-mng-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; flex-shrink: 0; }
.vm-mng-dot--fresh { background: #10b981; }
.vm-mng-dot--recent { background: #f59e0b; }
.vm-mng-dot--stale { background: #ef4444; }
.vm-mng-counter { font-size: 0.72rem; color: #64748b; font-variant-numeric: tabular-nums; white-space: nowrap; }

.vm-mng-speed { display: inline-flex; gap: 2px; background: rgba(15, 23, 42, 0.06); padding: 3px; border-radius: 999px; }
.vm-mng-speed-btn {
    border: none; background: transparent; padding: 4px 9px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; color: #475569; cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.vm-mng-speed-btn--active { background: #3b82f6; color: #fff !important; }
.vm-mng-speed .vm-mng-speed-btn:first-child,
.vm-mng-speed .vm-mng-speed-btn:last-child { border-radius: 999px; border: none; }

.vm-mng-timeline { position: relative; margin-top: 8px; padding-bottom: 16px; }
.vm-mng-scrub {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px; border-radius: 3px;
    background: rgba(15, 23, 42, 0.12);
    outline: none; cursor: pointer; margin: 0; display: block;
}
.vm-mng-scrub::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: #3b82f6; border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); cursor: pointer; transition: transform 0.1s;
}
.vm-mng-scrub::-webkit-slider-thumb:hover { transform: scale(1.15); }
.vm-mng-scrub::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: #3b82f6; border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); cursor: pointer;
}
.vm-mng-scrub::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(15, 23, 42, 0.12); }
.vm-mng-ticks {
    position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
    font-size: 0.62rem; color: #64748b; pointer-events: none; user-select: none;
}
.vm-mng-tick { position: absolute; transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vm-mng-tick:first-child { transform: none; }
.vm-mng-tick:last-child { transform: translateX(-100%); }

/* Fullscreen */
.vm-mng-stage:fullscreen { background: #0f172a; }
.vm-mng-stage:fullscreen #vm-mng-map { height: 100vh; border-radius: 0; }
.vm-mng-stage:-webkit-full-screen #vm-mng-map { height: 100vh; border-radius: 0; }

/* Dark mode glass bar */
[data-theme="dark"] .vm-mng-bar {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(51, 65, 85, 0.7);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .vm-mng-btn { background: rgba(248, 250, 252, 0.08); color: #e2e8f0; }
[data-theme="dark"] .vm-mng-btn:hover { background: rgba(248, 250, 252, 0.16); }
[data-theme="dark"] .vm-mng-btn--play { background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%); color: #fff; }
[data-theme="dark"] .vm-mng-time { background: rgba(248, 250, 252, 0.08); color: #f1f5f9; }
[data-theme="dark"] .vm-mng-counter { color: #94a3b8; }
[data-theme="dark"] .vm-mng-speed { background: rgba(248, 250, 252, 0.08); }
[data-theme="dark"] .vm-mng-speed-btn { color: #cbd5e1; }
[data-theme="dark"] .vm-mng-speed-btn--active { background: #2563eb; }
[data-theme="dark"] .vm-mng-scrub,
[data-theme="dark"] .vm-mng-scrub::-moz-range-track { background: rgba(248, 250, 252, 0.15); }
[data-theme="dark"] .vm-mng-ticks { color: #94a3b8; }

/* Statistika */
.vm-mng-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 14px;
}
.vm-mng-stat {
    display: flex; flex-direction: column; align-items: center;
    padding: 12px 8px;
    background: var(--vm-card-bg, #fff);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: var(--vm-radius-small, 8px);
}
.vm-mng-stat__num { font-size: 1.3rem; font-weight: 800; color: var(--vm-text-primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
.vm-mng-stat__num--cg { color: #d97706; }
.vm-mng-stat__num--ic { color: #ea580c; }
.vm-mng-stat__lbl { font-size: 0.7rem; color: var(--vm-text-muted); margin-top: 4px; text-align: center; }

/* Legenda */
.vm-mng-legend {
    display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
    margin-top: 12px;
    font-size: 0.8rem; color: var(--vm-text-secondary);
}
.vm-mng-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.vm-mng-legend__dot { border-radius: 50%; flex-shrink: 0; }
.vm-mng-legend__dot--cg { width: 15px; height: 15px; background: #fde047; border: 1.4px solid #92400e; }
.vm-mng-legend__dot--ic { width: 9px; height: 9px; background: #f97316; opacity: 0.6; border: 1px solid #9a3412; }

/* Hero sekcija (centriran naslov + uvod) */
.vm-mng-hero {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 1.75rem;
    padding: 1.5rem 1rem 0;
}
.vm-mng-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    margin-bottom: 0.9rem;
    background: linear-gradient(135deg, rgba(245,158,11,0.14), rgba(250,204,21,0.14));
    color: #b45309;
    border: 1px solid rgba(245,158,11,0.35);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vm-mng-hero .vm-mng-h1 {
    text-align: center;
    margin: 0 0 0.75rem;
}
.vm-mng-hero .vm-mng-intro-text {
    margin: 0 auto;
}
[data-theme="dark"] .vm-mng-hero__eyebrow {
    background: linear-gradient(135deg, rgba(217,119,6,0.22), rgba(234,179,8,0.18));
    color: #fcd34d;
    border-color: rgba(217,119,6,0.45);
}

/* Skloni duplirani Blocksy naslov stranice (hero u shortcode-u je glavni) */
.page-id-94 .page-title,
.page-id-94 .entry-title,
.page-id-94 .ct-page-title {
    display: none !important;
}

/* Speed pile — forsiraj pill oblik (Blocksy gazi border-radius → pravougaonik) */
.vm-mng-speed .vm-mng-speed-btn,
.vm-pm-speed .vm-pm-speed-btn,
.vm-rdr-player__speed .vm-rdr-speed-btn {
    border-radius: 999px !important;
    border: none !important;
}

.vm-mng-note {
    margin: 14px auto 0;
    max-width: 600px;
    padding: 12px 16px;
    background: var(--vm-bg-secondary, #f1f5f9);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: var(--vm-radius-small, 8px);
    text-align: center; font-size: 0.9rem; color: var(--vm-text-secondary);
}
.vm-mng-note[hidden] { display: none; }

@media (max-width: 768px) {
    #vm-mng-map { height: 440px; }
    .vm-mng-bar {
        position: static; transform: none; width: 100%;
        margin-top: 8px; padding: 8px 10px 6px; border-radius: 14px;
    }
    .vm-mng-btn { width: 40px; height: 40px; }
    .vm-mng-btn--play { width: 44px; height: 44px; }
    .vm-mng-counter { display: none; }
    .vm-mng-stats { grid-template-columns: repeat(3, 1fr); }
    .vm-mng-attrib { font-size: 0.6rem; top: 6px; right: 6px; }
}
@media (max-width: 420px) {
    .vm-mng-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tabovi (legacy Blitzortung — više se ne koristi) ── */
.vm-mng-tabs {
    display: inline-flex;
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
    padding: 4px;
    gap: 4px;
}

.vm-mng-tab {
    background: transparent;
    border: none;
    padding: 10px 18px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--vm-text-secondary);
    cursor: pointer;
    border-radius: 7px;
    transition: background 0.18s ease, color 0.18s ease;
    line-height: 1.2;
}

.vm-mng-tab:hover {
    color: var(--vm-text-primary);
    background: rgba(59, 130, 246, 0.08);
}

.vm-mng-tab--active {
    background: #2563eb !important;
    color: #fff !important;
}

[data-theme="dark"] .vm-mng-tab--active {
    background: #3b82f6 !important;
}

/* ── Player container ── */
.vm-mng-player {
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.vm-mng-player[hidden] {
    display: none;
}

.vm-mng-player__canvas {
    position: relative;
    width: 100%;
    background: #0a0a1a;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    min-height: 280px;
}

.vm-mng-stacked-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    /* NEMA transition: ghost-overlap izaziva trepćenje kod visokokontrastnih
       lightning markera. Hard swap je čistiji. */
    pointer-events: none;
}

.vm-mng-player__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    text-align: center;
    padding: 20px;
}

/* ── Player kontrole ── */
.vm-mng-player__bar {
    background: var(--vm-bg-secondary);
    border-top: 1px solid var(--vm-border-color);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vm-mng-player__controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vm-mng-player__btn {
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: 6px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--vm-text-primary);
    transition: background 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

.vm-mng-player__btn:hover {
    background: var(--vm-bg-tertiary);
    border-color: #3b82f6;
}

.vm-mng-player__btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 1px;
}

.vm-mng-player__btn--play {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.vm-mng-player__btn--play:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.vm-mng-player__btn--download {
    margin-left: auto;
}

.vm-mng-player__counter {
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    color: var(--vm-text-muted);
    padding: 0 6px;
    min-width: 64px;
    text-align: center;
}

.vm-mng-player__time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: var(--vm-text-secondary);
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    padding: 4px 10px;
    border-radius: 999px;
}

/* Freshness dot */
.vm-mng-freshness__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
    display: inline-block;
}

.vm-mng-freshness__dot--fresh {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
    animation: vm-mng-pulse 2.4s ease-in-out infinite;
}

.vm-mng-freshness__dot--recent {
    background: #f59e0b;
}

.vm-mng-freshness__dot--stale {
    background: #ef4444;
}

@keyframes vm-mng-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* Legend dots in help text */
.vm-mng-dot-legend {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 0 2px 0 6px;
    vertical-align: middle;
}
.vm-mng-dot-legend--fresh  { background: #22c55e; }
.vm-mng-dot-legend--recent { background: #f59e0b; }
.vm-mng-dot-legend--stale  { background: #ef4444; }

/* Timeline */
.vm-mng-player__timeline {
    position: relative;
    height: 6px;
    background: var(--vm-bg-tertiary);
    border-radius: 3px;
    cursor: pointer;
    overflow: hidden;
}

.vm-mng-player__progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #3b82f6, #6366f1);
    border-radius: 3px;
    transition: width 0.18s ease;
}

.vm-mng-player-help {
    margin-top: 12px;
    font-size: 0.82rem;
    color: var(--vm-text-muted);
    text-align: center !important;
    line-height: 1.5;
}

/* Speed kontrole */
.vm-mng-player__speed {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.vm-mng-player__speed-label {
    font-size: 0.78rem;
    color: var(--vm-text-muted);
    margin-right: 4px;
    font-weight: 500;
}

.vm-mng-speed-btn {
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--vm-text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.vm-mng-speed-btn:hover {
    color: var(--vm-text-primary);
    border-color: #3b82f6;
}

.vm-mng-speed-btn--active {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}

[data-theme="dark"] .vm-mng-speed-btn--active {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

/* ── Statične slike (poslednji frejm) ── */
.vm-mng-latest-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 18px;
}

.vm-mng-latest-card {
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius);
    padding: 12px;
    margin: 0;
    overflow: hidden;
}

.vm-mng-latest-card__title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--vm-text-primary);
    margin: 0 0 8px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.vm-mng-latest-card__time {
    font-size: 0.78rem;
    color: var(--vm-text-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.vm-mng-latest-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    background: #0a0a1a;
}

@media (max-width: 768px) {
    .vm-mng-latest-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Ad zone (CLS-safe) ── */
.vm-mng-ad-zone {
    min-height: 100px;
    contain: layout style;
    text-align: center;
}

@media (min-width: 768px) {
    .vm-mng-ad-zone { min-height: 280px; }
}

/* ── SEO info kartice ── */
.vm-mng-seo {
    display: grid;
    gap: 18px;
}

.vm-mng-info-card {
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-left: 3px solid #3b82f6;
    border-radius: var(--vm-radius);
    padding: 22px 24px;
}

.vm-mng-info-card--safety {
    border-left-color: #ef4444;
    background: linear-gradient(180deg, rgba(254, 226, 226, 0.35) 0%, var(--vm-card-bg) 60%);
}

[data-theme="dark"] .vm-mng-info-card--safety {
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.18) 0%, var(--vm-card-bg) 60%);
}

.vm-mng-info-card__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.18rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--vm-text-primary);
    line-height: 1.3;
}

.vm-mng-info-card__icon {
    flex-shrink: 0;
    color: #3b82f6;
}

.vm-mng-info-card--safety .vm-mng-info-card__icon {
    color: #ef4444;
}

.vm-mng-info-card p {
    margin: 0 0 12px;
    line-height: 1.65;
    color: var(--vm-text-secondary);
}

.vm-mng-info-card p:last-child { margin-bottom: 0; }

.vm-mng-info-card ul {
    margin: 8px 0 12px;
    padding-left: 22px;
    color: var(--vm-text-secondary);
    line-height: 1.65;
}

.vm-mng-info-card li { margin-bottom: 4px; }

.vm-mng-info-card a {
    color: #2563eb;
    text-decoration: none;
    border-bottom: none !important;
}

.vm-mng-info-card a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

[data-theme="dark"] .vm-mng-info-card a { color: #60a5fa; }

/* ── FAQ accordion ── */
.vm-mng-faq {
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius);
    padding: 22px 24px;
}

.vm-mng-faq__title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--vm-text-primary);
}

.vm-mng-faq__item {
    border-bottom: 1px solid var(--vm-border-color);
    padding: 10px 0;
}

.vm-mng-faq__item:last-child {
    border-bottom: none;
}

.vm-mng-faq__question {
    font-weight: 600;
    color: var(--vm-text-primary);
    cursor: pointer;
    padding: 8px 0;
    list-style: none;
    position: relative;
    padding-right: 28px;
    line-height: 1.4;
    font-size: 0.98rem;
}

.vm-mng-faq__question::-webkit-details-marker { display: none; }

.vm-mng-faq__question::after {
    content: '+';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    font-weight: 400;
    color: #3b82f6;
    transition: transform 0.2s ease;
    line-height: 1;
}

details[open] .vm-mng-faq__question::after {
    content: '−';
}

.vm-mng-faq__answer {
    padding: 4px 0 12px;
    color: var(--vm-text-secondary);
    line-height: 1.65;
}

.vm-mng-faq__answer p { margin: 0 0 8px; }
.vm-mng-faq__answer p:last-child { margin-bottom: 0; }

/* ── Sources card ── */
.vm-mng-sources-card {
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    border-radius: var(--vm-radius);
    padding: 16px 20px;
}

.vm-mng-sources-text,
.vm-mng-sources-disclaimer {
    margin: 0 0 8px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--vm-text-secondary);
}

.vm-mng-sources-disclaimer {
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--vm-text-muted);
    margin-bottom: 0;
}

.vm-mng-sources-card a {
    color: #2563eb;
    text-decoration: none;
    border-bottom: none !important;
}

.vm-mng-sources-card a:hover {
    text-decoration: underline;
}

[data-theme="dark"] .vm-mng-sources-card a { color: #60a5fa; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .vm-mng-h1 { font-size: 1.55rem; }
    .vm-mng-intro-text { font-size: 0.96rem; }
    .vm-mng-tabs {
        display: flex;
        width: 100%;
    }
    .vm-mng-tab {
        flex: 1;
        padding: 10px 12px;
        font-size: 0.85rem;
        text-align: center;
    }
    .vm-mng-info-card {
        padding: 18px 16px;
    }
    .vm-mng-info-card__title {
        font-size: 1.05rem;
    }
    .vm-mng-faq {
        padding: 18px 16px;
    }
    .vm-mng-player__controls {
        gap: 6px;
    }
    .vm-mng-player__counter {
        min-width: 52px;
        font-size: 0.78rem;
    }
    .vm-mng-player__time {
        font-size: 0.8rem;
        padding: 3px 8px;
    }
}

@media (max-width: 480px) {
    .vm-mng-h1 { font-size: 1.35rem; }
    .vm-mng-player__btn { width: 32px; height: 32px; }
}

/* ====================================================================
   GOLUBARSKA ENSEMBLE PROGNOZA — 10 dana
   Prefiks: .vm-ens-* (paralelno sa .vm-gol-*, koristi iste primitive)
   Sesija 62, maj 2026
   ==================================================================== */

/* Intro features (kao kod .vm-gol-intro__features ali sa 4 stavke) */
.vm-ens-page .vm-gol-intro__features { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .vm-ens-page .vm-gol-intro__features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vm-ens-page .vm-gol-intro__features { grid-template-columns: 1fr; } }

/* Back CTA */
.vm-ens-back-cta {
    margin: 14px 0 22px;
    text-align: center;
}
.vm-ens-back-cta--bottom { margin-top: 28px; margin-bottom: 0; }
.vm-ens-back-cta__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #1e40af !important;
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid rgba(59,130,246,0.25);
    font-weight: 500;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.vm-ens-back-cta__link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(59,130,246,0.18);
    color: #1d4ed8 !important;
    text-decoration: none;
}
[data-theme="dark"] .vm-ens-back-cta__link {
    background: linear-gradient(135deg, #1e293b 0%, #1e3a5f 100%);
    color: #93c5fd !important;
    border-color: rgba(96,165,250,0.3);
}

/* Status / loading / error */
.vm-ens-status { margin: 16px 0; min-height: 120px; }
.vm-ens-error {
    padding: 16px 20px;
    background: rgba(239,68,68,0.08);
    border-left: 4px solid #ef4444;
    border-radius: 8px;
    color: var(--vm-text-primary);
    font-size: 0.95rem;
}

/* Section titles */
.vm-ens-section-title {
    font-size: 1.25rem;
    margin: 24px 0 4px;
    color: var(--vm-text-primary);
}
.vm-ens-section-desc {
    color: var(--vm-text-muted);
    font-size: 0.9rem;
    margin: 0 0 14px;
}

/* R6: Horizon toggle (10 dana / 6h  vs  5 dana / 3h) */
.vm-ens-horizon { margin: 14px 0 4px; text-align: center; }
.vm-ens-horizon-toggle {
    display: inline-flex;
    border: 1px solid var(--vm-border-color);
    border-radius: 999px;
    overflow: hidden;
    background: var(--vm-bg-secondary);
}
.vm-ens-horizon-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--vm-text-secondary);
    font-size: 0.86rem;
    font-weight: 600;
    padding: 9px 18px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.vm-ens-horizon-btn + .vm-ens-horizon-btn { border-left: 1px solid var(--vm-border-color); }
.vm-ens-horizon-btn:hover { color: var(--vm-text-primary); }
.vm-ens-horizon-btn--active {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
}
.vm-ens-horizon-btn--active:hover { color: #fff; }
.vm-ens-horizon-hint {
    color: var(--vm-text-muted);
    font-size: 0.82rem;
    margin: 8px 0 0;
}
[data-theme="dark"] .vm-ens-horizon-toggle { background: var(--vm-bg-tertiary); }
@media (max-width: 480px) {
    .vm-ens-horizon-btn { padding: 8px 12px; font-size: 0.8rem; }
}

/* R6: flash istaknutog reda u tabeli (klik na summary karticu) */
@keyframes vm-ens-row-flash-kf {
    0%   { background: rgba(37,99,235,0.28); }
    100% { background: transparent; }
}
.vm-ens-detail-table tr.vm-ens-row-flash > td {
    animation: vm-ens-row-flash-kf 1.6s ease-out;
}
.vm-ens-cloud6 { color: var(--vm-text-primary); }

/* Day cards (10 dana, horizontal scroll) */
.vm-ens-day-cards-wrap { margin: 18px 0; }
.vm-ens-day-cards {
    display: grid;
    grid-template-columns: repeat(10, minmax(120px, 1fr));
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
}
.vm-ens-day-card {
    padding: 12px 10px;
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
    scroll-snap-align: start;
    min-width: 120px;
    font-size: 0.85rem;
}
.vm-ens-day-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    border-color: rgba(59,130,246,0.4);
}
.vm-ens-day-card--active {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.18);
    background: linear-gradient(180deg, rgba(59,130,246,0.04) 0%, var(--vm-card-bg) 100%);
}
.vm-ens-day-card__date { font-weight: 700; color: var(--vm-text-primary); font-size: 0.95rem; }
.vm-ens-day-card__date-full { font-size: 0.72rem; color: var(--vm-text-muted); margin-bottom: 8px; }
.vm-ens-day-card__icon { text-align: center; margin: 2px 0 6px; }
.vm-ens-day-card__icon img { width: 56px; height: 56px; display: inline-block; }
.vm-ens-day-card__temps { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; align-items: center; text-align: center; }
.vm-ens-day-card__lab { font-size: 0.7rem; color: var(--vm-text-muted); text-transform: uppercase; }
.vm-ens-day-card__tmax { color: #ef4444; font-weight: 700; font-size: 1.05rem; }
.vm-ens-day-card__tmin { color: #3b82f6; font-weight: 700; font-size: 1.05rem; }
.vm-ens-day-card__trange { font-size: 0.72rem; color: var(--vm-text-muted); margin-left: 0; text-align: center; }
.vm-ens-day-card__row { display: flex; justify-content: space-between; gap: 6px; margin-top: 6px; font-size: 0.78rem; }
.vm-ens-day-card__precip,
.vm-ens-day-card__wind {
    padding: 3px 6px;
    border-radius: 6px;
    font-weight: 600;
}
.vm-ens-day-card__precip--low { background: rgba(34,197,94,0.12); color: #15803d; }
.vm-ens-day-card__precip--med { background: rgba(245,158,11,0.15); color: #b45309; }
.vm-ens-day-card__precip--high { background: rgba(59,130,246,0.18); color: #1e40af; }
.vm-ens-day-card__wind--calm { background: rgba(34,197,94,0.10); color: #15803d; }
.vm-ens-day-card__wind--moderate { background: rgba(245,158,11,0.15); color: #b45309; }
.vm-ens-day-card__wind--strong { background: rgba(239,68,68,0.15); color: #b91c1c; }
.vm-ens-day-card__cloud { margin-top: 6px; font-size: 0.78rem; color: var(--vm-text-muted); }

[data-theme="dark"] .vm-ens-day-card__precip--low { background: rgba(34,197,94,0.18); color: #86efac; }
[data-theme="dark"] .vm-ens-day-card__precip--med { background: rgba(245,158,11,0.2); color: #fcd34d; }
[data-theme="dark"] .vm-ens-day-card__precip--high { background: rgba(96,165,250,0.22); color: #93c5fd; }
[data-theme="dark"] .vm-ens-day-card__wind--calm { background: rgba(34,197,94,0.15); color: #86efac; }
[data-theme="dark"] .vm-ens-day-card__wind--moderate { background: rgba(245,158,11,0.2); color: #fcd34d; }
[data-theme="dark"] .vm-ens-day-card__wind--strong { background: rgba(239,68,68,0.2); color: #fca5a5; }

/* Map markers (preuzeti pattern iz vm-station-map.js) */
.vm-ens-map-marker-wrap { background: none !important; border: none !important; }
/* Okrugli marker — kompaktan, vrednost u centru, naziv u tooltipu/popup-u */
.vm-ens-map-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    border: 2px solid rgba(255,255,255,0.85);
    line-height: 1;
    text-align: center;
    transition: transform 0.12s ease;
}
.vm-ens-map-marker:hover { transform: scale(1.12); z-index: 1000; }
.vm-ens-map-marker__val { font-size: 0.8rem; font-weight: 800; padding: 0 2px; }
/* Smer vetra marker -- strelica + kompas (Fix3) */
.vm-ens-map-marker--dir { background: rgba(59,130,246,0.92) !important; flex-direction: column; gap: 0; }
.vm-ens-map-marker__arrow { font-size: 1.05rem; line-height: 1; display: block; }
.vm-ens-map-marker__compass { font-size: 0.58rem; font-weight: 700; line-height: 1; margin-top: 1px; }
.vm-ens-dir-heights { display: flex; gap: 6px; margin: 4px 0; }
.vm-ens-dir-h { padding: 3px 10px; border: 1px solid var(--vm-border-color); background: var(--vm-card-bg); color: var(--vm-text-secondary); border-radius: 999px; cursor: pointer; font-size: 0.78rem; }
.vm-ens-dir-h--active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.vm-ens-legend-note { font-size: 0.74rem; color: var(--vm-text-muted); margin-top: 4px; }
/* Bojenje vetra u tabeli: 5-6 m/s narandžasto, 7+ crveno (golubarski pragovi) */
.vm-ens-w--orange { color: #e39313; font-weight: 700; }
.vm-ens-w--red { color: #dc3545; font-weight: 700; }
[data-theme="dark"] .vm-ens-w--orange { color: #fbbf24; }
[data-theme="dark"] .vm-ens-w--red { color: #f87171; }

/* Map legend */
.vm-ens-legend-title { font-weight: 600; margin-bottom: 6px; font-size: 0.85rem; color: var(--vm-text-primary); }
.vm-ens-legend-row { display: flex; flex-wrap: wrap; gap: 10px; }
.vm-ens-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--vm-text-secondary); }
.vm-ens-legend-swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }

/* Map controls — wide breakpoint */
.vm-ens-param-pills { flex-wrap: wrap; }

/* Charts container */
.vm-ens-charts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 24px 0;
}
.vm-ens-chart-card {
    padding: 16px 18px;
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border-color);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.vm-ens-chart-title {
    margin: 0 0 4px;
    font-size: 1.05rem;
    color: var(--vm-text-primary);
}
.vm-ens-chart-desc {
    margin: 0 0 12px;
    font-size: 0.85rem;
    color: var(--vm-text-muted);
}
.vm-ens-chart-wrap {
    position: relative;
    height: 320px;
    width: 100%;
}
.vm-ens-chart-wrap canvas { max-width: 100% !important; height: 100% !important; }
@media (max-width: 560px) {
    .vm-ens-chart-wrap { height: 280px; }
}

/* Height selector buttons */
.vm-ens-height-selector {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.vm-ens-height-btn {
    padding: 8px 14px;
    background: var(--vm-bg-secondary);
    border: 1px solid var(--vm-border-color);
    border-radius: 8px;
    color: var(--vm-text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.18s ease;
}
.vm-ens-height-btn:hover {
    border-color: rgba(59,130,246,0.45);
    color: var(--vm-text-primary);
}
.vm-ens-height-btn--active {
    background: #3b82f6;
    color: #fff !important;
    border-color: #3b82f6;
}
.vm-ens-wind-dir-info {
    margin-top: 8px;
    color: var(--vm-text-muted);
    font-size: 0.8rem;
}

/* Detail table */
.vm-ens-table-wrap { margin: 28px 0 16px; }
.vm-ens-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--vm-border-color);
    border-radius: 10px;
    background: var(--vm-card-bg);
}
.vm-ens-detail-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
    font-size: 0.88rem;
}
.vm-ens-detail-table thead th {
    background: var(--vm-bg-secondary);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--vm-text-primary);
    border-bottom: 2px solid var(--vm-border-color);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.vm-ens-detail-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--vm-border-color);
    color: var(--vm-text-primary);
}
.vm-ens-detail-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.02); }
.vm-ens-detail-table tbody tr:hover { background: rgba(59,130,246,0.04); }
[data-theme="dark"] .vm-ens-detail-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
[data-theme="dark"] .vm-ens-detail-table tbody tr:hover { background: rgba(96,165,250,0.06); }
.vm-ens-table-day { white-space: nowrap; }
.vm-ens-table-day small { display: block; color: var(--vm-text-muted); font-size: 0.7rem; }
.vm-ens-tmin { color: #3b82f6; }
.vm-ens-tmax { color: #ef4444; }
.vm-ens-prob { padding: 3px 8px; border-radius: 6px; font-weight: 600; font-size: 0.82rem; }
.vm-ens-prob--low { background: rgba(34,197,94,0.12); color: #15803d; }
.vm-ens-prob--med { background: rgba(245,158,11,0.15); color: #b45309; }
.vm-ens-prob--high { background: rgba(59,130,246,0.18); color: #1e40af; }
[data-theme="dark"] .vm-ens-prob--low { background: rgba(34,197,94,0.18); color: #86efac; }
[data-theme="dark"] .vm-ens-prob--med { background: rgba(245,158,11,0.2); color: #fcd34d; }
[data-theme="dark"] .vm-ens-prob--high { background: rgba(96,165,250,0.22); color: #93c5fd; }

/* Notice block */
.vm-ens-notice h4 { margin-top: 0; }
.vm-ens-notice ul { padding-left: 22px; margin: 8px 0; }
.vm-ens-notice li { margin-bottom: 6px; line-height: 1.5; }
.vm-ens-notice__cron { font-size: 0.85rem; color: var(--vm-text-muted); margin-top: 10px; }

/* Mobile adjustments */
@media (max-width: 768px) {
    .vm-ens-day-cards {
        grid-template-columns: repeat(10, 130px);
    }
    .vm-ens-chart-card { padding: 12px 14px; }
    .vm-ens-chart-title { font-size: 0.98rem; }
}

/* ====================================================================
   CTA blok na matičnoj golubarskoj — vodi na ensemble stranicu
   .vm-gol-ensemble-cta
   ==================================================================== */
.vm-gol-ensemble-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin: 16px 0 22px;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
    border-radius: 12px;
    color: #fff;
    box-shadow: 0 4px 16px rgba(99,102,241,0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.vm-gol-ensemble-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99,102,241,0.28);
}
.vm-gol-ensemble-cta__icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}
.vm-gol-ensemble-cta__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #fff;
}
.vm-gol-ensemble-cta__body strong {
    font-size: 1.05rem;
    color: #fff;
    line-height: 1.3;
}
.vm-gol-ensemble-cta__body span {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.92);
    line-height: 1.4;
}
.vm-gol-ensemble-cta__btn {
    padding: 10px 18px;
    background: rgba(255,255,255,0.18);
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.3);
    flex-shrink: 0;
    transition: background 0.18s ease;
}
.vm-gol-ensemble-cta__btn:hover {
    background: rgba(255,255,255,0.28);
    color: #fff !important;
    text-decoration: none;
}
[data-theme="dark"] .vm-gol-ensemble-cta {
    background: linear-gradient(135deg, #1e3a8a 0%, #312e81 50%, #5b21b6 100%);
    box-shadow: 0 4px 18px rgba(0,0,0,0.4);
}
@media (max-width: 560px) {
    .vm-gol-ensemble-cta { flex-direction: column; text-align: center; gap: 10px; }
    .vm-gol-ensemble-cta__body { align-items: center; }
}

/* ═══════════════════════════════════════════════════════════════
   R3 (sesija 63c) — ensemble dorade: confidence bar, CTA polish,
   golubarska dropdown strelica garant (override kasnih pravila)
   ═══════════════════════════════════════════════════════════════ */

/* Dropdown strelica — garant da se prikaže (visok specificitet, !important) */
select.vm-gol-serbia-map__select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 9px center !important;
    background-size: 11px !important;
    padding-right: 28px !important;
}
[data-theme="dark"] select.vm-gol-serbia-map__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23cbd5e1' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") !important;
}

/* Pouzdanost dana + temp-range bar (summary kartice) */
.vm-ens-day-card__rangebar {
    height: 5px; border-radius: 3px;
    background: var(--vm-bg-tertiary, #e2e8f0);
    margin: 6px 0 4px; overflow: hidden;
}
.vm-ens-day-card__rangebar-fill { display: block; height: 100%; border-radius: 3px; }
.vm-ens-day-card__conf {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.72rem; font-weight: 600;
}
.vm-ens-conf-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.vm-ens-conf--high { color: #15803d; }
.vm-ens-conf--high .vm-ens-conf-dot, .vm-ens-day-card__rangebar-fill.vm-ens-conf--high { background: #22c55e; }
.vm-ens-conf--med { color: #b45309; }
.vm-ens-conf--med .vm-ens-conf-dot, .vm-ens-day-card__rangebar-fill.vm-ens-conf--med { background: #f59e0b; }
.vm-ens-conf--low { color: #b91c1c; }
.vm-ens-conf--low .vm-ens-conf-dot, .vm-ens-day-card__rangebar-fill.vm-ens-conf--low { background: #ef4444; }
[data-theme="dark"] .vm-ens-conf--high { color: #86efac; }
[data-theme="dark"] .vm-ens-conf--med { color: #fcd34d; }
[data-theme="dark"] .vm-ens-conf--low { color: #fca5a5; }
[data-theme="dark"] .vm-ens-day-card__rangebar { background: rgba(255,255,255,0.12); }

/* Ensemble "Nazad" CTA — moderniji dvoredni izgled, ceo <a> klikabilan */
.vm-ens-back-cta__link {
    display: flex !important; align-items: center; gap: 14px;
    max-width: 640px; margin: 0 auto;
    padding: 14px 20px !important; text-align: left;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
    color: #fff !important; border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    box-shadow: 0 6px 20px rgba(37,99,235,0.38), 0 2px 6px rgba(0,0,0,0.08);
}
.vm-ens-back-cta__link:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(37,99,235,0.45); color: #fff !important; }
.vm-ens-back-cta__icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.vm-ens-back-cta__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Beli tekst — nadjačava Blocksy .entry-content strong/span tamnu boju */
.vm-ens-back-cta__link .vm-ens-back-cta__body strong { font-size: 0.98rem; font-weight: 700; color: #fff !important; }
.vm-ens-back-cta__link .vm-ens-back-cta__body span { font-size: 0.82rem; color: #fff !important; opacity: 0.92; }
.vm-ens-back-cta__arrow { font-size: 1.3rem; flex-shrink: 0; color: #fff !important; transition: transform 0.18s ease; }
.vm-ens-back-cta__link:hover .vm-ens-back-cta__arrow { transform: translateX(4px); }
[data-theme="dark"] .vm-ens-back-cta__link {
    background: linear-gradient(135deg, #1e3a8a 0%, #312e81 100%) !important;
    border-color: rgba(147,197,253,0.25) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

/* Matična golubarska — CTA ceo <a> klikabilan + druga (alt) varijanta */
.vm-gol-ensemble-cta--link {
    text-decoration: none !important; color: #fff !important; cursor: pointer;
    box-shadow: 0 4px 16px rgba(99,102,241,0.22);
    border: 1px solid rgba(255,255,255,0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.vm-gol-ensemble-cta--link:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(99,102,241,0.34); color: #fff !important; }
.vm-gol-ensemble-cta--alt { background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%); }
.vm-gol-ensemble-cta--link:hover .vm-gol-ensemble-cta__btn { background: rgba(255,255,255,0.32); }
.vm-gol-ensemble-cta__body span { display: block; line-height: 1.4; }

/* ==========================================================================
   BIOMETEO + POLEN + UV  ( [vm_biometeo] )
   ========================================================================== */
.vm-bio-intro { font-size: 0.95rem; line-height: 1.65; color: var(--vm-text-secondary,#475569); margin-bottom: 1rem; }
.vm-bio-intro strong { color: var(--vm-text-primary,#0f172a); }
.vm-bio-updated { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--vm-text-muted,#64748b); background: var(--vm-bg-secondary,#f1f5f9); border: 1px solid var(--vm-border-color,#e2e8f0); border-radius: 999px; padding: 0.3rem 0.8rem; margin-bottom: 1.5rem; }
.vm-bio-updated__dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; }
.vm-bio-loading { padding: 2rem; text-align: center; color: var(--vm-text-muted,#64748b); }
.vm-bio-section { margin-top: 0.95rem; background: var(--vm-bg-secondary,#f1f5f9); border-radius: 20px; padding: 0.9rem 1.5rem 1.05rem; position: relative; }
/* Horizontalni razdelnik između sekcija (Biometeo / UV / polen…) — centriran u razmaku */
.vm-bio-section::before { content: ''; position: absolute; left: 1.25rem; right: 1.25rem; top: -0.5rem; height: 2px; border-radius: 2px; background: #94a3b8; }
.vm-bio-section:first-of-type::before { display: none; }
[data-theme="dark"] .vm-bio-section { background: rgba(30,41,59,0.4); }
[data-theme="dark"] .vm-bio-section::before { background: rgba(148,163,184,0.5); }
.vm-bio-section__title { display: flex; align-items: center; gap: 0.7rem; font-size: 1.45rem; font-weight: 800; color: var(--vm-text-primary,#0f172a); margin: 0 0 1.3rem; letter-spacing: -0.015em; }
.vm-bio-section__title::after { display: none; }
.vm-bio-section__icon { flex-shrink: 0; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; line-height: 1; border-radius: 12px; background: rgba(59,130,246,0.1); }
.vm-bio-section__icon--bio { background: rgba(34,197,94,0.12); }
.vm-bio-section__icon--uv { background: rgba(245,158,11,0.15); }
.vm-bio-section__icon--polen { background: rgba(16,185,129,0.12); }
[data-theme="dark"] .vm-bio-section__icon { background: rgba(96,165,250,0.16); }
[data-theme="dark"] .vm-bio-section__icon--bio { background: rgba(34,197,94,0.2); }
[data-theme="dark"] .vm-bio-section__icon--uv { background: rgba(245,158,11,0.22); }
[data-theme="dark"] .vm-bio-section__icon--polen { background: rgba(16,185,129,0.2); }
[data-theme="dark"] .vm-bio-section__title { color: #f1f5f9; }

/* Biometeo kartice */
.vm-bio-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.1rem; }
.vm-bio-day-card { background: var(--vm-card-bg,#fff); border: 1px solid var(--vm-border-color,#e2e8f0); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06); display: flex; flex-direction: column; }
.vm-bio-day-card__header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; color: #fff; }
.vm-bio-day-card--lvl1 .vm-bio-day-card__header { background: linear-gradient(135deg, #16a34a, #22c55e); }
.vm-bio-day-card--lvl2 .vm-bio-day-card__header { background: linear-gradient(135deg, #d97706, #f59e0b); }
.vm-bio-day-card--lvl3 .vm-bio-day-card__header { background: linear-gradient(135deg, #dc2626, #ef4444); }
.vm-bio-day-card__hleft { display: flex; align-items: center; gap: 0.6rem; }
.vm-bio-day-card__emoji { font-size: 1.9rem; line-height: 1; }
.vm-bio-day-card__label { font-size: 1.15rem; font-weight: 800; display: block; }
.vm-bio-day-card__date { font-size: 0.8rem; opacity: 0.9; }
.vm-bio-day-card__badge { font-size: 0.82rem; font-weight: 700; background: rgba(255,255,255,0.22); padding: 0.35rem 0.7rem; border-radius: 999px; white-space: nowrap; text-align: center; }
.vm-bio-day-card__drivers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; padding: 1rem 1.25rem 0.5rem; }
.vm-bio-driver { display: flex; flex-direction: column; gap: 1px; padding: 0.45rem 0.6rem; background: var(--vm-bg-secondary,#f1f5f9); border-radius: 10px; }
.vm-bio-driver__label { font-size: 0.66rem; font-weight: 700; color: var(--vm-text-muted,#64748b); text-transform: uppercase; letter-spacing: 0.3px; }
.vm-bio-driver__val { font-size: 0.98rem; font-weight: 700; color: var(--vm-text-primary,#0f172a); }
.vm-bio-driver--down .vm-bio-driver__val { color: #dc2626; }
.vm-bio-driver--up .vm-bio-driver__val { color: #2563eb; }
.vm-bio-day-card__groups { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.75rem 1.25rem 0.25rem; }
.vm-bio-groups-label { font-size: 0.72rem; font-weight: 700; color: var(--vm-text-muted,#64748b); }
.vm-bio-group-chip { font-size: 0.74rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 999px; background: rgba(59,130,246,0.1); color: #2563eb; }
.vm-bio-day-card__advice { padding: 0.75rem 1.25rem 1.1rem; font-size: 0.85rem; line-height: 1.5; color: var(--vm-text-secondary,#475569); }
[data-theme="dark"] .vm-bio-day-card { background: rgba(30,41,59,0.8); border-color: rgba(148,163,184,0.15); }
[data-theme="dark"] .vm-bio-driver { background: rgba(51,65,85,0.6); }
[data-theme="dark"] .vm-bio-driver__val { color: #f1f5f9; }
[data-theme="dark"] .vm-bio-group-chip { background: rgba(59,130,246,0.2); color: #93c5fd; }
[data-theme="dark"] .vm-bio-day-card__advice { color: #cbd5e1; }

/* Kontrole + mapa */
.vm-bio-controls { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin-bottom: 0.9rem; }
.vm-bio-day-toggle, .vm-bio-param-toggle { display: inline-flex; gap: 4px; padding: 4px; background: var(--vm-bg-secondary,#f1f5f9); border: 1px solid var(--vm-border-color,#e2e8f0); border-radius: 999px; flex-wrap: wrap; }
.vm-bio-day-btn, .vm-bio-param-btn { border: none; background: transparent; color: var(--vm-text-secondary,#475569); font-weight: 600; font-size: 0.85rem; padding: 0.4rem 1rem; border-radius: 999px; cursor: pointer; transition: background 0.18s, color 0.18s; }
.vm-bio-day-btn--active, .vm-bio-param-btn--active { background: var(--vm-card-bg,#fff); color: #2563eb; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
[data-theme="dark"] .vm-bio-day-btn, [data-theme="dark"] .vm-bio-param-btn { color: #cbd5e1; }
[data-theme="dark"] .vm-bio-day-btn--active, [data-theme="dark"] .vm-bio-param-btn--active { background: rgba(51,65,85,0.9); color: #93c5fd; }
.vm-bio-map { height: 460px; border-radius: 16px; overflow: hidden; border: 1px solid var(--vm-border-color,#e2e8f0); }
.vm-bio-marker-wrap { background: transparent; border: none; }
.vm-bio-marker { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.82rem; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,0.35); }
.vm-bio-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.75rem; font-size: 0.78rem; color: var(--vm-text-secondary,#475569); }
.vm-bio-legend__item { display: inline-flex; align-items: center; gap: 0.35rem; }
.vm-bio-legend__sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.vm-bio-legend__note { color: var(--vm-text-muted,#94a3b8); }
.vm-bio-map-note { font-size: 0.78rem; color: var(--vm-text-muted,#64748b); margin-top: 0.5rem; text-align: center; }
.vm-bio-popup { font-size: 0.85rem; line-height: 1.5; }

/* Po lokacijama */
.vm-bio-loc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.85rem; }
.vm-bio-loc-card { background: var(--vm-card-bg,#fff); border: 1px solid var(--vm-border-color,#e2e8f0); border-radius: 12px; padding: 0.9rem 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.vm-bio-loc-card__name { font-weight: 700; color: var(--vm-text-primary,#0f172a); display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.6rem; }
.vm-bio-loc-card__region { font-size: 0.74rem; font-weight: 500; color: var(--vm-text-muted,#94a3b8); }
.vm-bio-loc-card__pollen { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.vm-bio-pollen-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 600; padding: 0.28rem 0.6rem; background: var(--vm-bg-secondary,#f1f5f9); border: 1px solid var(--vm-border-color,#e2e8f0); border-radius: 999px; color: var(--vm-text-primary,#0f172a); }
.vm-bio-pollen-chip img { flex-shrink: 0; }
.vm-bio-pollen-none { font-size: 0.8rem; color: var(--vm-text-muted,#94a3b8); }
.vm-bio-lvl { font-weight: 800; }
.vm-bio-lvl--1 { color: #16a34a; } .vm-bio-lvl--2 { color: #d97706; } .vm-bio-lvl--3 { color: #dc2626; }
.vm-bio-loc-card__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.8rem; color: var(--vm-text-secondary,#475569); border-top: 1px solid var(--vm-border-color,#e2e8f0); padding-top: 0.55rem; }
.vm-bio-loc-meta b { color: var(--vm-text-muted,#64748b); font-weight: 700; }
[data-theme="dark"] .vm-bio-loc-card { background: rgba(30,41,59,0.8); border-color: rgba(148,163,184,0.15); }
[data-theme="dark"] .vm-bio-pollen-chip { background: rgba(51,65,85,0.8); border-color: rgba(148,163,184,0.2); color: #e2e8f0; }
[data-theme="dark"] .vm-bio-lvl--1 { color: #4ade80; } [data-theme="dark"] .vm-bio-lvl--2 { color: #fbbf24; } [data-theme="dark"] .vm-bio-lvl--3 { color: #f87171; }
[data-theme="dark"] .vm-bio-loc-card__meta { border-color: rgba(148,163,184,0.15); }

/* UV detalji */
.vm-bio-uv-card { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; background: var(--vm-card-bg,#fff); border: 1px solid var(--vm-border-color,#e2e8f0); border-radius: 16px; padding: 1.25rem 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.vm-bio-uv-hero { flex: 0 0 auto; text-align: center; border: 3px solid; border-radius: 16px; padding: 0.8rem 1.4rem; }
.vm-bio-uv-num { font-size: 2.8rem; font-weight: 900; line-height: 1; }
.vm-bio-uv-cat { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--vm-text-muted,#64748b); margin-top: 0.2rem; }
.vm-bio-uv-body { flex: 1; min-width: 240px; }
.vm-bio-uv-info { font-size: 0.88rem; line-height: 1.55; color: var(--vm-text-secondary,#475569); margin-bottom: 0.75rem; }
.vm-bio-uv-curve { display: flex; align-items: flex-end; gap: 3px; height: 72px; }
.vm-bio-uv-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 100%; }
.vm-bio-uv-bar span { width: 100%; max-width: 16px; border-radius: 3px 3px 0 0; display: block; }
.vm-bio-uv-bar em { font-size: 0.6rem; color: var(--vm-text-muted,#94a3b8); font-style: normal; }
[data-theme="dark"] .vm-bio-uv-card { background: rgba(30,41,59,0.8); border-color: rgba(148,163,184,0.15); }
[data-theme="dark"] .vm-bio-uv-info { color: #cbd5e1; }
[data-theme="dark"] .vm-bio-updated { background: rgba(30,41,59,0.7); border-color: rgba(148,163,184,0.2); }
[data-theme="dark"] .vm-bio-intro strong { color: #f1f5f9; }

@media (max-width: 768px) {
    .vm-bio-section__title { font-size: 1.2rem; }
    .vm-bio-map { height: 380px; }
    .vm-bio-uv-card { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ==========================================================================
   SEZONSKA PROGNOZA  ( [vm_sezonska] )
   ========================================================================== */
.vm-sez-intro { font-size: 0.95rem; line-height: 1.65; color: var(--vm-text-secondary,#475569); margin-bottom: 1rem; }
.vm-sez-intro strong { color: var(--vm-text-primary,#0f172a); }
.vm-sez-updated { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--vm-text-muted,#64748b); background: var(--vm-bg-secondary,#f1f5f9); border: 1px solid var(--vm-border-color,#e2e8f0); border-radius: 999px; padding: 0.3rem 0.8rem; margin-bottom: 1.5rem; }
.vm-sez-updated__dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; }
.vm-sez-loading { padding: 2rem; text-align: center; color: var(--vm-text-muted,#64748b); }
.vm-sez-section { margin-top: 2.5rem; }
.vm-sez-section__title { font-size: 1.45rem; font-weight: 800; color: var(--vm-text-primary,#0f172a); margin: 0 0 1.3rem; padding-bottom: 0.6rem; position: relative; letter-spacing: -0.015em; }
.vm-sez-section__title::after { content:''; position:absolute; left:0; bottom:0; width:60px; height:4px; border-radius:2px; background: linear-gradient(135deg,#3b82f6,#6366f1); }
[data-theme="dark"] .vm-sez-section__title { color: #f1f5f9; }

/* Mesečne kartice */
.vm-sez-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.vm-sez-month { background: var(--vm-card-bg,#fff); border: 1px solid var(--vm-border-color,#e2e8f0); border-radius: 16px; padding: 1.1rem 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border-top: 4px solid #94a3b8; }
.vm-sez-month--warm { border-top-color: #ef4444; }
.vm-sez-month--cold { border-top-color: #3b82f6; }
.vm-sez-month--neutral { border-top-color: #94a3b8; }
.vm-sez-month__name { font-size: 1.05rem; font-weight: 800; color: var(--vm-text-primary,#0f172a); }
.vm-sez-month__name span { font-weight: 500; color: var(--vm-text-muted,#94a3b8); font-size: 0.85rem; }
.vm-sez-month__temp { font-size: 2.2rem; font-weight: 900; line-height: 1.1; margin-top: 0.3rem; }
.vm-sez-month--warm .vm-sez-month__temp { color: #dc2626; }
.vm-sez-month--cold .vm-sez-month__temp { color: #2563eb; }
.vm-sez-month--neutral .vm-sez-month__temp { color: var(--vm-text-secondary,#475569); }
.vm-sez-month__templabel { font-size: 0.82rem; font-weight: 600; color: var(--vm-text-secondary,#475569); margin-bottom: 0.6rem; }
.vm-sez-month__metrics { display: flex; flex-direction: column; gap: 0.32rem; padding: 0.6rem 0; border-top: 1px solid var(--vm-border-color,#e2e8f0); }
.vm-sez-metric { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; font-size: 0.8rem; }
.vm-sez-metric__k { color: var(--vm-text-muted,#64748b); white-space: nowrap; }
.vm-sez-metric__v { color: var(--vm-text-primary,#0f172a); font-weight: 600; text-align: right; }
.vm-sez-chart-wrap--bars { height: 240px; }
[data-theme="dark"] .vm-sez-month__metrics { border-color: rgba(148,163,184,0.15); }
[data-theme="dark"] .vm-sez-metric__v { color: #e2e8f0; }
.vm-sez-month__precip { font-size: 0.84rem; color: var(--vm-text-secondary,#475569); padding-top: 0.5rem; border-top: 1px solid var(--vm-border-color,#e2e8f0); }
.vm-sez-month__plabel { font-weight: 700; color: var(--vm-text-muted,#64748b); }
.vm-sez-month__conf { font-size: 0.78rem; color: var(--vm-text-muted,#64748b); margin-top: 0.4rem; }
.vm-sez-month__conf b { color: var(--vm-text-secondary,#475569); }
[data-theme="dark"] .vm-sez-month { background: rgba(30,41,59,0.8); border-color: rgba(148,163,184,0.15); }
[data-theme="dark"] .vm-sez-month__name { color: #f1f5f9; }
[data-theme="dark"] .vm-sez-month--warm .vm-sez-month__temp { color: #f87171; }
[data-theme="dark"] .vm-sez-month--cold .vm-sez-month__temp { color: #93c5fd; }
[data-theme="dark"] .vm-sez-month__precip { border-color: rgba(148,163,184,0.15); color: #cbd5e1; }

/* Grafikon */
.vm-sez-chart-card { background: var(--vm-card-bg,#fff); border: 1px solid var(--vm-border-color,#e2e8f0); border-radius: 16px; padding: 1.25rem 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.vm-sez-chart-wrap { position: relative; height: 320px; }
.vm-sez-chart-note { font-size: 0.78rem; color: var(--vm-text-muted,#64748b); margin: 0.6rem 0 0; text-align: center; }
[data-theme="dark"] .vm-sez-chart-card { background: rgba(30,41,59,0.8); border-color: rgba(148,163,184,0.15); }

/* Verovatnoće */
.vm-sez-probs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.vm-sez-prob-row { background: var(--vm-card-bg,#fff); border: 1px solid var(--vm-border-color,#e2e8f0); border-radius: 12px; padding: 0.9rem 1.1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.vm-sez-prob-month { font-weight: 800; color: var(--vm-text-primary,#0f172a); margin-bottom: 0.6rem; }
.vm-sez-prob { margin-bottom: 0.6rem; }
.vm-sez-prob:last-child { margin-bottom: 0; }
.vm-sez-prob__label { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--vm-text-secondary,#475569); margin-bottom: 0.25rem; }
.vm-sez-prob__label b { font-weight: 800; color: var(--vm-text-primary,#0f172a); }
.vm-sez-prob__track { height: 9px; background: var(--vm-bg-tertiary,#e2e8f0); border-radius: 999px; overflow: hidden; }
.vm-sez-prob__fill { height: 100%; border-radius: 999px; transition: width 0.6s ease; }
[data-theme="dark"] .vm-sez-prob-row { background: rgba(30,41,59,0.8); border-color: rgba(148,163,184,0.15); }
[data-theme="dark"] .vm-sez-prob-month { color: #f1f5f9; }
[data-theme="dark"] .vm-sez-prob__label b { color: #f1f5f9; }
[data-theme="dark"] .vm-sez-prob__track { background: rgba(148,163,184,0.2); }

.vm-sez-note { font-size: 0.8rem; line-height: 1.55; color: var(--vm-text-muted,#64748b); background: var(--vm-bg-secondary,#f1f5f9); border-left: 3px solid #6366f1; border-radius: 8px; padding: 0.8rem 1rem; margin-top: 2rem; }
.vm-sez-note .vm-sez-models { font-style: italic; }
[data-theme="dark"] .vm-sez-note { background: rgba(30,41,59,0.7); color: #94a3b8; }
[data-theme="dark"] .vm-sez-updated { background: rgba(30,41,59,0.7); border-color: rgba(148,163,184,0.2); }
[data-theme="dark"] .vm-sez-intro strong { color: #f1f5f9; }

@media (max-width: 768px) {
    .vm-sez-section__title { font-size: 1.2rem; }
    .vm-sez-chart-wrap { height: 260px; }
}

/* ==========================================================================
   VODOSTAJI I HIDROLOŠKA PROGNOZA  ( [vm_vodostaji] )
   ========================================================================== */
.vm-vod-intro { font-size: 0.95rem; line-height: 1.65; color: var(--vm-text-secondary,#475569); margin-bottom: 1rem; }
.vm-vod-intro strong { color: var(--vm-text-primary,#0f172a); }
.vm-vod-updated { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--vm-text-muted,#64748b); background: var(--vm-bg-secondary,#f1f5f9); border: 1px solid var(--vm-border-color,#e2e8f0); border-radius: 999px; padding: 0.3rem 0.8rem; margin-bottom: 1rem; }
.vm-vod-updated__dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; }
.vm-vod-loading { padding: 2rem; text-align: center; color: var(--vm-text-muted,#64748b); }
.vm-vod-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin-bottom: 1.5rem; font-size: 0.8rem; color: var(--vm-text-secondary,#475569); }
.vm-vod-legend__item { display: inline-flex; align-items: center; gap: 0.4rem; }
.vm-vod-legend__sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.vm-vod-section { margin-top: 2.5rem; }
.vm-vod-section__title { font-size: 1.45rem; font-weight: 800; color: var(--vm-text-primary,#0f172a); margin: 0 0 1.3rem; padding-bottom: 0.6rem; position: relative; letter-spacing: -0.015em; }
.vm-vod-section__title::after { content:''; position:absolute; left:0; bottom:0; width:60px; height:4px; border-radius:2px; background: linear-gradient(135deg,#2563eb,#0891b2); }
[data-theme="dark"] .vm-vod-section__title { color: #f1f5f9; }

/* Mapa */
.vm-vod-map { height: 460px; border-radius: 16px; overflow: hidden; border: 1px solid var(--vm-border-color,#e2e8f0); }
.vm-vod-marker-wrap { background: transparent; border: none; }
.vm-vod-marker { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.58rem; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.35); }
.vm-vod-map-note { font-size: 0.78rem; color: var(--vm-text-muted,#64748b); margin-top: 0.6rem; text-align: center; }
.vm-vod-popup { font-size: 0.85rem; line-height: 1.55; }

/* Kartice po reci */
.vm-vod-river-group { margin-bottom: 1.6rem; }
.vm-vod-river-title { font-size: 1.1rem; font-weight: 800; margin: 0 0 0.8rem; padding-left: 0.7rem; border-left: 4px solid; }
.vm-vod-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.85rem; }
.vm-vod-card { background: var(--vm-card-bg,#fff); border: 1px solid var(--vm-border-color,#e2e8f0); border-radius: 14px; padding: 0.9rem 1.05rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border-left: 4px solid #0ea5e9; }
.vm-vod-card--elevated { border-left-color: #eab308; }
.vm-vod-card--warn { border-left-color: #f97316; }
.vm-vod-card--danger { border-left-color: #ef4444; }
.vm-vod-card--unknown { border-left-color: #94a3b8; }
.vm-vod-card--low { border-left-color: #b45309; }
.vm-vod-card__name { font-weight: 700; color: var(--vm-text-primary,#0f172a); margin-bottom: 0.35rem; }
.vm-vod-card__range { font-size: 0.74rem; color: var(--vm-text-muted,#64748b); margin-top: 0.25rem; }
/* Hidrološko upozorenje baner */
.vm-vod-warning { display: flex; align-items: flex-start; gap: 0.6rem; border-radius: 12px; padding: 0.75rem 1rem; margin-bottom: 1.2rem; font-size: 0.86rem; line-height: 1.5; }
.vm-vod-warning:empty { display: none; }
.vm-vod-warning__icon { flex-shrink: 0; font-size: 1.1rem; }
.vm-vod-warning--none { background: var(--vm-bg-secondary,#f1f5f9); color: var(--vm-text-secondary,#475569); border: 1px solid var(--vm-border-color,#e2e8f0); }
.vm-vod-warning--active { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-left: 4px solid #ef4444; font-weight: 500; }
[data-theme="dark"] .vm-vod-warning--none { background: rgba(30,41,59,0.7); color: #cbd5e1; border-color: rgba(148,163,184,0.2); }
[data-theme="dark"] .vm-vod-warning--active { background: rgba(127,29,29,0.35); color: #fecaca; border-color: rgba(239,68,68,0.5); }
.vm-vod-card__level { font-size: 1rem; color: var(--vm-text-secondary,#475569); }
.vm-vod-card__cm { font-size: 1.8rem; font-weight: 900; color: var(--vm-text-primary,#0f172a); }
.vm-vod-card__trend { font-size: 1.1rem; font-weight: 800; margin-left: 0.2rem; }
.vm-vod-card__status { font-size: 0.82rem; font-weight: 700; margin: 0.15rem 0 0.55rem; }
.vm-vod-card__nolevel { font-size: 0.84rem; color: var(--vm-text-muted,#94a3b8); margin: 0.3rem 0; }
.vm-vod-forecast { display: flex; gap: 0.3rem; padding: 0.5rem 0; border-top: 1px solid var(--vm-border-color,#e2e8f0); }
.vm-vod-fc { flex: 1; text-align: center; }
.vm-vod-fc__d { display: block; font-size: 0.62rem; color: var(--vm-text-muted,#94a3b8); }
.vm-vod-fc__v { display: block; font-size: 0.86rem; font-weight: 700; color: var(--vm-text-primary,#0f172a); }
.vm-vod-card__thr { font-size: 0.74rem; color: var(--vm-text-muted,#64748b); margin-top: 0.4rem; }
.vm-vod-card__q { font-size: 0.8rem; color: var(--vm-text-secondary,#475569); margin-top: 0.5rem; padding-top: 0.45rem; border-top: 1px solid var(--vm-border-color,#e2e8f0); }
.vm-vod-orient { font-size: 0.66rem; background: #fef3c7; color: #92400e; padding: 1px 6px; border-radius: 999px; font-weight: 700; }
[data-theme="dark"] .vm-vod-card { background: rgba(30,41,59,0.8); border-color: rgba(148,163,184,0.15); }
[data-theme="dark"] .vm-vod-card__name, [data-theme="dark"] .vm-vod-card__cm, [data-theme="dark"] .vm-vod-fc__v { color: #f1f5f9; }
[data-theme="dark"] .vm-vod-forecast, [data-theme="dark"] .vm-vod-card__q { border-color: rgba(148,163,184,0.15); }
[data-theme="dark"] .vm-vod-orient { background: rgba(146,64,14,0.4); color: #fcd34d; }
[data-theme="dark"] .vm-vod-updated { background: rgba(30,41,59,0.7); border-color: rgba(148,163,184,0.2); }
[data-theme="dark"] .vm-vod-intro strong { color: #f1f5f9; }

/* Grafik protoka */
.vm-vod-discharge-controls { margin-bottom: 0.9rem; }
.vm-vod-sel-label { font-size: 0.88rem; font-weight: 600; color: var(--vm-text-secondary,#475569); }
.vm-vod-select { font-size: 0.88rem; padding: 0.4rem 0.7rem; border-radius: 8px; border: 1px solid var(--vm-border-color,#e2e8f0); background: var(--vm-card-bg,#fff); color: var(--vm-text-primary,#0f172a); margin-left: 0.4rem; }
.vm-vod-chart-card { background: var(--vm-card-bg,#fff); border: 1px solid var(--vm-border-color,#e2e8f0); border-radius: 16px; padding: 1.25rem 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.vm-vod-chart-wrap { position: relative; height: 320px; }
.vm-vod-chart-note { font-size: 0.78rem; color: var(--vm-text-muted,#64748b); margin: 0.6rem 0 0; text-align: center; }
.vm-vod-source { font-size: 0.8rem; line-height: 1.55; color: var(--vm-text-muted,#64748b); background: var(--vm-bg-secondary,#f1f5f9); border-left: 3px solid #0891b2; border-radius: 8px; padding: 0.8rem 1rem; margin-top: 2rem; }
[data-theme="dark"] .vm-vod-select { background: rgba(51,65,85,0.8); color: #e2e8f0; border-color: rgba(148,163,184,0.2); }
[data-theme="dark"] .vm-vod-chart-card { background: rgba(30,41,59,0.8); border-color: rgba(148,163,184,0.15); }
[data-theme="dark"] .vm-vod-source { background: rgba(30,41,59,0.7); color: #94a3b8; }

@media (max-width: 768px) {
    .vm-vod-section__title { font-size: 1.2rem; }
    .vm-vod-map { height: 380px; }
    .vm-vod-chart-wrap { height: 260px; }
}

/* ==========================================================================
   REDIZAJN 2026 — biometeo / sezonska / vodostaji (iOS glass + Samsung numerali)
   Sloj posle osnovnih blokova: kaskada gazi starije vrednosti istih selektora.
   ========================================================================== */

@keyframes vm-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* ── HERO kartice ── */
.vm-bio-hero, .vm-sez-hero, .vm-vod-hero {
    position: relative; overflow: hidden;
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
    border-radius: 22px; padding: 1.5rem 1.75rem; margin-bottom: 2.2rem;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 10px 30px rgba(0,0,0,0.16);
    animation: vm-fade-up 0.55s ease both;
}
.vm-bio-hero:empty, .vm-sez-hero:empty, .vm-vod-hero:empty { display: none; }
.vm-bio-hero::after, .vm-sez-hero::after, .vm-vod-hero::after {
    content: ''; position: absolute; top: -55%; right: -12%; width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 65%);
    pointer-events: none;
}
/* hero varijante po stanju */
.vm-bio-hero--lvl1 { background: linear-gradient(135deg, #15803d, #22c55e); }
.vm-bio-hero--lvl2 { background: linear-gradient(135deg, #c2680a, #f59e0b); }
.vm-bio-hero--lvl3 { background: linear-gradient(135deg, #b91c1c, #ef4444); }
.vm-sez-hero--warm    { background: linear-gradient(135deg, #c2410c, #f97316 55%, #fbbf24); }
.vm-sez-hero--cold    { background: linear-gradient(135deg, #1d4ed8, #3b82f6 55%, #38bdf8); }
.vm-sez-hero--neutral { background: linear-gradient(135deg, #334155, #64748b); }
.vm-vod-hero--normal   { background: linear-gradient(135deg, #0c4a6e, #0284c7 60%, #06b6d4); }
.vm-vod-hero--low      { background: linear-gradient(135deg, #92400e, #b45309 60%, #d97706); }
.vm-vod-hero--elevated { background: linear-gradient(135deg, #a16207, #eab308); }
.vm-vod-hero--warn     { background: linear-gradient(135deg, #c2410c, #f97316); }
.vm-vod-hero--danger   { background: linear-gradient(135deg, #991b1b, #ef4444); }

.vm-bio-hero__main, .vm-sez-hero__main, .vm-vod-hero__main { display: flex; align-items: center; gap: 1.1rem; position: relative; z-index: 1; min-width: 0; }
.vm-bio-hero__emoji, .vm-sez-hero__emoji, .vm-vod-hero__emoji { font-size: 3.1rem; line-height: 1; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25)); }
.vm-bio-hero__txt, .vm-sez-hero__txt, .vm-vod-hero__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vm-bio-hero__kicker, .vm-sez-hero__kicker, .vm-vod-hero__kicker { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; opacity: 0.85; }
.vm-bio-hero__big, .vm-sez-hero__big, .vm-vod-hero__big { font-size: 1.9rem; font-weight: 900; line-height: 1.15; letter-spacing: -0.02em; }
.vm-bio-hero__sub, .vm-sez-hero__sub, .vm-vod-hero__sub { font-size: 0.9rem; opacity: 0.92; }
.vm-bio-hero__stats, .vm-sez-hero__stats, .vm-vod-hero__stats { display: flex; flex-wrap: wrap; gap: 0.6rem; position: relative; z-index: 1; margin-left: auto; }
.vm-bio-hero__stat, .vm-sez-hero__stat, .vm-vod-hero__stat {
    background: rgba(255,255,255,0.16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.22); border-radius: 14px; padding: 0.5rem 0.9rem; text-align: center; min-width: 86px;
}
.vm-bio-hero__stat b, .vm-sez-hero__stat b, .vm-vod-hero__stat b { display: block; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.vm-bio-hero__stat span, .vm-sez-hero__stat span, .vm-vod-hero__stat span { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.85; }
.vm-bio-hero__updated, .vm-sez-hero__updated, .vm-vod-hero__updated { flex-basis: 100%; font-size: 0.74rem; opacity: 0.82; position: relative; z-index: 1; }

/* ── Glass kartice (override osnovnih) ── */
.vm-bio-day-card, .vm-bio-loc-card, .vm-bio-uv-card, .vm-bio-pollen-card,
.vm-sez-month, .vm-sez-prob-row, .vm-sez-chart-card,
.vm-vod-card, .vm-vod-chart-card {
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226,232,240,0.9);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.05), 0 8px 24px rgba(15,23,42,0.07);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
[data-theme="dark"] .vm-bio-day-card, [data-theme="dark"] .vm-bio-loc-card, [data-theme="dark"] .vm-bio-uv-card, [data-theme="dark"] .vm-bio-pollen-card,
[data-theme="dark"] .vm-sez-month, [data-theme="dark"] .vm-sez-prob-row, [data-theme="dark"] .vm-sez-chart-card,
[data-theme="dark"] .vm-vod-card, [data-theme="dark"] .vm-vod-chart-card {
    background: rgba(30,41,59,0.65);
    border-color: rgba(148,163,184,0.18);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.3);
}
.vm-bio-loc-card:hover, .vm-sez-month:hover, .vm-vod-card:hover, .vm-sez-prob-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(15,23,42,0.06), 0 14px 34px rgba(15,23,42,0.12);
}

/* ── Entrance animacije (stagger) ── */
.vm-bio-day-card, .vm-bio-loc-card, .vm-sez-month, .vm-sez-prob-row, .vm-vod-card { animation: vm-fade-up 0.5s ease both; }
.vm-bio-day-card:nth-child(2), .vm-bio-loc-card:nth-child(2), .vm-sez-month:nth-child(2), .vm-sez-prob-row:nth-child(2), .vm-vod-card:nth-child(2) { animation-delay: 0.07s; }
.vm-bio-day-card:nth-child(3), .vm-bio-loc-card:nth-child(3), .vm-sez-month:nth-child(3), .vm-sez-prob-row:nth-child(3), .vm-vod-card:nth-child(3) { animation-delay: 0.14s; }
.vm-bio-loc-card:nth-child(4), .vm-sez-month:nth-child(4), .vm-sez-prob-row:nth-child(4), .vm-vod-card:nth-child(4) { animation-delay: 0.21s; }
.vm-bio-loc-card:nth-child(n+5), .vm-vod-card:nth-child(n+5) { animation-delay: 0.28s; }
@media (prefers-reduced-motion: reduce) {
    .vm-bio-hero, .vm-sez-hero, .vm-vod-hero,
    .vm-bio-day-card, .vm-bio-loc-card, .vm-sez-month, .vm-sez-prob-row, .vm-vod-card { animation: none; }
}

/* ── Krupniji numerali (Samsung stil) ── */
.vm-sez-month__temp { font-size: 2.6rem; font-variant-numeric: tabular-nums; }
.vm-vod-card__cm { font-size: 2.1rem; font-variant-numeric: tabular-nums; }
.vm-bio-uv-num { font-variant-numeric: tabular-nums; }

/* ── Biometeo: polen kriva ── */
.vm-bio-day-card { overflow: hidden; }
.vm-bio-pollen-card { padding: 1.25rem 1.5rem; }
.vm-bio-pollen-card__head { font-size: 0.92rem; color: var(--vm-text-primary,#0f172a); margin-bottom: 0.8rem; }
.vm-bio-pollen-card__head small { color: var(--vm-text-muted,#94a3b8); font-size: 0.74rem; }
.vm-bio-pollen-curve { height: 76px; }
.vm-bio-pollen-card__note { font-size: 0.82rem; color: var(--vm-text-secondary,#475569); margin-top: 0.7rem; }
[data-theme="dark"] .vm-bio-pollen-card__head { color: #f1f5f9; }
[data-theme="dark"] .vm-bio-pollen-card__note { color: #cbd5e1; }

/* ── Vodostaji: status pill + gauge ── */
.vm-vod-status-pill { display: inline-block; color: #fff; font-size: 0.7rem; font-weight: 800; padding: 3px 11px; border-radius: 999px; letter-spacing: 0.2px; box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
.vm-vod-card__status { margin: 0.3rem 0 0.6rem; }
.vm-vod-gauge { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.35rem; }
.vm-vod-gauge__track { flex: 1; height: 6px; border-radius: 999px; background: var(--vm-bg-tertiary,#e2e8f0); position: relative; }
.vm-vod-gauge__dot { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.3); transform: translate(-50%, -50%); }
.vm-vod-gauge__min, .vm-vod-gauge__max { font-size: 0.64rem; color: var(--vm-text-muted,#94a3b8); font-variant-numeric: tabular-nums; }
.vm-vod-gauge__label { font-size: 0.62rem; color: var(--vm-text-muted,#94a3b8); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 0.2rem; text-align: center; }
[data-theme="dark"] .vm-vod-gauge__track { background: rgba(148,163,184,0.25); }
[data-theme="dark"] .vm-vod-gauge__dot { border-color: #1e293b; }

/* ── Kako čitati ── */
.vm-bio-howto, .vm-sez-howto, .vm-vod-howto { font-size: 0.92rem; line-height: 1.7; color: var(--vm-text-secondary,#475569); }
.vm-bio-howto p, .vm-sez-howto p, .vm-vod-howto p { margin: 0 0 0.8rem; }
.vm-bio-howto strong, .vm-sez-howto strong, .vm-vod-howto strong { color: var(--vm-text-primary,#0f172a); }
[data-theme="dark"] .vm-bio-howto, [data-theme="dark"] .vm-sez-howto, [data-theme="dark"] .vm-vod-howto { color: #cbd5e1; }
[data-theme="dark"] .vm-bio-howto strong, [data-theme="dark"] .vm-sez-howto strong, [data-theme="dark"] .vm-vod-howto strong { color: #f1f5f9; }

/* ── FAQ ── */
.vm-bio-faq, .vm-sez-faq, .vm-vod-faq { display: flex; flex-direction: column; gap: 0.6rem; }
.vm-bio-faq__item, .vm-sez-faq__item, .vm-vod-faq__item {
    background: var(--vm-card-bg,#fff); border: 1px solid var(--vm-border-color,#e2e8f0);
    border-radius: 14px; padding: 0; overflow: hidden;
}
.vm-bio-faq__q, .vm-sez-faq__q, .vm-vod-faq__q {
    display: block; cursor: pointer; padding: 0.9rem 2.6rem 0.9rem 1.15rem; position: relative;
    font-weight: 700; font-size: 0.94rem; color: var(--vm-text-primary,#0f172a); list-style: none;
}
.vm-bio-faq__q::-webkit-details-marker, .vm-sez-faq__q::-webkit-details-marker, .vm-vod-faq__q::-webkit-details-marker { display: none; }
.vm-bio-faq__q::after, .vm-sez-faq__q::after, .vm-vod-faq__q::after {
    content: '+'; position: absolute; right: 1.05rem; top: 50%; transform: translateY(-50%);
    font-size: 1.3rem; font-weight: 600; color: #3b82f6; transition: transform 0.2s ease;
}
.vm-bio-faq__item[open] .vm-bio-faq__q::after, .vm-sez-faq__item[open] .vm-sez-faq__q::after, .vm-vod-faq__item[open] .vm-vod-faq__q::after { transform: translateY(-50%) rotate(45deg); }
.vm-bio-faq__a, .vm-sez-faq__a, .vm-vod-faq__a { padding: 0 1.15rem 1rem; font-size: 0.88rem; line-height: 1.65; color: var(--vm-text-secondary,#475569); }
.vm-bio-faq__a p, .vm-sez-faq__a p, .vm-vod-faq__a p { margin: 0; }
[data-theme="dark"] .vm-bio-faq__item, [data-theme="dark"] .vm-sez-faq__item, [data-theme="dark"] .vm-vod-faq__item { background: rgba(30,41,59,0.65); border-color: rgba(148,163,184,0.18); }
[data-theme="dark"] .vm-bio-faq__q, [data-theme="dark"] .vm-sez-faq__q, [data-theme="dark"] .vm-vod-faq__q { color: #f1f5f9; }
[data-theme="dark"] .vm-bio-faq__a, [data-theme="dark"] .vm-sez-faq__a, [data-theme="dark"] .vm-vod-faq__a { color: #cbd5e1; }

/* ── Povezane prognoze ── */
.vm-bio-related, .vm-sez-related, .vm-vod-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem; }
.vm-bio-related__card, .vm-sez-related__card, .vm-vod-related__card {
    display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1.05rem;
    background: var(--vm-card-bg,#fff); border: 1px solid var(--vm-border-color,#e2e8f0); border-radius: 16px;
    text-decoration: none !important; border-bottom: 1px solid var(--vm-border-color,#e2e8f0) !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.vm-bio-related__card:hover, .vm-sez-related__card:hover, .vm-vod-related__card:hover {
    transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15,23,42,0.12); border-color: #3b82f6 !important;
}
.vm-bio-related__icon, .vm-sez-related__icon, .vm-vod-related__icon {
    flex-shrink: 0; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; border-radius: 12px; background: rgba(59,130,246,0.1);
}
.vm-bio-related__card strong, .vm-sez-related__card strong, .vm-vod-related__card strong { display: block; font-size: 0.9rem; color: var(--vm-text-primary,#0f172a); line-height: 1.3; }
.vm-bio-related__card small, .vm-sez-related__card small, .vm-vod-related__card small { display: block; font-size: 0.74rem; color: var(--vm-text-muted,#64748b); line-height: 1.4; }
[data-theme="dark"] .vm-bio-related__card, [data-theme="dark"] .vm-sez-related__card, [data-theme="dark"] .vm-vod-related__card { background: rgba(30,41,59,0.65); border-color: rgba(148,163,184,0.18) !important; }
[data-theme="dark"] .vm-bio-related__card strong, [data-theme="dark"] .vm-sez-related__card strong, [data-theme="dark"] .vm-vod-related__card strong { color: #f1f5f9; }
[data-theme="dark"] .vm-bio-related__icon, [data-theme="dark"] .vm-sez-related__icon, [data-theme="dark"] .vm-vod-related__icon { background: rgba(59,130,246,0.22); }

/* ── Dropdown stanica (prognoza protoka) — vidljiv padajući meni ── */
.vm-vod-discharge-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin-bottom: 1rem; }
.vm-vod-sel-label { font-size: 0.9rem; font-weight: 700; color: var(--vm-text-primary,#0f172a); }
.vm-vod-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    font-size: 0.92rem; font-weight: 600; cursor: pointer;
    height: auto; line-height: 1.45;
    padding: 0.6rem 2.6rem 0.6rem 1rem; margin-left: 0;
    border: 2px solid #3b82f6; border-radius: 12px;
    background-color: var(--vm-card-bg,#fff);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%233b82f6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.95rem center;
    color: var(--vm-text-primary,#0f172a);
    box-shadow: 0 1px 3px rgba(15,23,42,0.08);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    min-width: 240px;
}
.vm-vod-select:hover { border-color: #2563eb; box-shadow: 0 4px 12px rgba(37,99,235,0.18); transform: translateY(-1px); }
.vm-vod-select:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(59,130,246,0.25); }
[data-theme="dark"] .vm-vod-sel-label { color: #f1f5f9; }
[data-theme="dark"] .vm-vod-select {
    background-color: rgba(30,41,59,0.9); color: #e2e8f0; border-color: #60a5fa;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2360a5fa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Responsive hero ── */
@media (max-width: 768px) {
    .vm-bio-hero, .vm-sez-hero, .vm-vod-hero { padding: 1.2rem 1.25rem; gap: 0.9rem 1rem; border-radius: 18px; }
    .vm-bio-hero__emoji, .vm-sez-hero__emoji, .vm-vod-hero__emoji { font-size: 2.4rem; }
    .vm-bio-hero__big, .vm-sez-hero__big, .vm-vod-hero__big { font-size: 1.42rem; }
    .vm-bio-hero__stats, .vm-sez-hero__stats, .vm-vod-hero__stats { margin-left: 0; width: 100%; }
    .vm-bio-hero__stat, .vm-sez-hero__stat, .vm-vod-hero__stat { flex: 1; min-width: 78px; padding: 0.45rem 0.5rem; }
    .vm-sez-month__temp { font-size: 2.2rem; }
    .vm-vod-select { width: 100%; min-width: 0; }
}

/* ==========================================================================
   BIOMETEO 2.0 — hero čipovi, polen load trake, UV gauge, polenska sekcija
   ========================================================================== */

/* ── Hero: at-a-glance čipovi (UV + vrste polena) ── */
.vm-bio-hero__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; position: relative; z-index: 1; flex-basis: 100%; }
.vm-bio-hero__chip {
    display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 700;
    background: rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.30); border-radius: 999px; padding: 0.28rem 0.7rem; color: #fff;
}
.vm-bio-hero__chip--pollen { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--chip,#fff) 55%, transparent); }
.vm-bio-hero__chip img { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }

/* ── Polen load trake (MeteoBlue stil) ── */
.vm-bio-pollen-load { margin-bottom: 1rem; }
.vm-bio-load-list { display: flex; flex-direction: column; gap: 0.55rem; }
.vm-bio-load-row { display: grid; grid-template-columns: minmax(92px,150px) 1fr auto; align-items: center; gap: 0.6rem; }
.vm-bio-load-row__name { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; color: var(--vm-text-primary,#0f172a); min-width: 0; }
.vm-bio-load-row__name img { flex-shrink: 0; }
.vm-bio-load-row__track { height: 10px; border-radius: 999px; background: var(--vm-bg-tertiary,#e2e8f0); overflow: hidden; container-type: inline-size; }
.vm-bio-load-row__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,#22c55e,#f59e0b,#ef4444); background-size: 100cqw 100%; background-position: left center; background-repeat: no-repeat; transition: width 0.6s ease; }
.vm-bio-load-row__lvl { font-size: 0.74rem; font-weight: 800; text-transform: capitalize; min-width: 54px; text-align: right; }
.vm-bio-load-scale { margin-top: 0.75rem; }
.vm-bio-load-scale__bar { display: block; height: 6px; border-radius: 999px; background: linear-gradient(90deg,#22c55e,#f59e0b,#ef4444); }
.vm-bio-load-scale__labels { display: flex; justify-content: space-between; margin-top: 0.2rem; }
.vm-bio-load-scale__labels em { font-style: normal; font-size: 0.66rem; color: var(--vm-text-muted,#94a3b8); }
[data-theme="dark"] .vm-bio-load-row__name { color: #f1f5f9; }
[data-theme="dark"] .vm-bio-load-row__track { background: rgba(148,163,184,0.2); }

/* ── UV gauge (radijalni polukrug) ── */
.vm-bio-uv-card .vm-bio-uv-hero {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    border: none !important; padding: 0.3rem 0.6rem; background: transparent; min-width: 200px;
}
.vm-bio-uv-hero__kicker { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--vm-text-muted,#94a3b8); white-space: nowrap; margin-bottom: 2px; }
.vm-bio-uv-gauge { display: block; width: 200px; max-width: 100%; height: auto; overflow: visible; }
.vm-bio-uv-gauge__read { display: flex; flex-direction: column; align-items: center; margin-top: -16px; }
.vm-bio-uv-card .vm-bio-uv-num { font-size: 2.1rem; }

/* ── Polenska prognoza i mere zaštite (izdvojena, istaknuta) ── */
.vm-bio-advice-card {
    position: relative; overflow: hidden;
    background: rgba(255,255,255,0.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(226,232,240,0.9); border-left: 5px solid var(--vm-sev,#22c55e); border-radius: 20px;
    padding: 1.25rem 1.5rem; box-shadow: 0 1px 2px rgba(15,23,42,0.05), 0 8px 24px rgba(15,23,42,0.08);
    animation: vm-fade-up 0.5s ease both;
}
.vm-bio-advice-card--sev0 { --vm-sev: #94a3b8; }
.vm-bio-advice-card--sev1 { --vm-sev: #22c55e; }
.vm-bio-advice-card--sev2 { --vm-sev: #f59e0b; }
.vm-bio-advice-card--sev3 { --vm-sev: #ef4444; }
.vm-bio-advice-card__head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.7rem; }
.vm-bio-advice-card__icon { font-size: 1.9rem; line-height: 1; flex-shrink: 0; }
.vm-bio-advice-card__headline { font-size: 1.15rem; font-weight: 800; color: var(--vm-text-primary,#0f172a); line-height: 1.2; }
.vm-bio-advice-card__sev { font-size: 0.78rem; font-weight: 800; }
.vm-bio-advice-card__summary { font-size: 0.9rem; line-height: 1.55; color: var(--vm-text-secondary,#475569); margin: 0 0 0.85rem; }
.vm-bio-advice-card__measures { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.vm-bio-advice-card__measure { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.88rem; line-height: 1.45; color: var(--vm-text-secondary,#475569); }
.vm-bio-advice-card__check {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--vm-bg-secondary,#f1f5f9); background: color-mix(in srgb, var(--vm-sev) 18%, transparent);
    color: var(--vm-sev); font-size: 0.72rem; font-weight: 900; margin-top: 1px;
}
[data-theme="dark"] .vm-bio-advice-card { background: rgba(30,41,59,0.65); border-color: rgba(148,163,184,0.18); border-left-color: var(--vm-sev,#22c55e); box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.3); }
[data-theme="dark"] .vm-bio-advice-card__headline { color: #f1f5f9; }
[data-theme="dark"] .vm-bio-advice-card__summary, [data-theme="dark"] .vm-bio-advice-card__measure { color: #cbd5e1; }

@media (max-width: 768px) {
    .vm-bio-section { padding: 0.85rem 1.1rem 0.95rem; border-radius: 18px; }
    .vm-bio-section::before { left: 1.1rem; right: 1.1rem; }
    .vm-bio-section__title { gap: 0.55rem; }
    .vm-bio-section__icon { width: 36px; height: 36px; font-size: 1.15rem; border-radius: 10px; }
    .vm-bio-load-row { grid-template-columns: minmax(78px,1fr) 1.6fr auto; gap: 0.45rem; }
    .vm-bio-load-row__name { font-size: 0.78rem; }
    .vm-bio-load-row__lvl { min-width: 46px; font-size: 0.7rem; }
    .vm-bio-advice-card { padding: 1.1rem 1.15rem; }
    .vm-bio-advice-card__headline { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
    .vm-bio-advice-card { animation: none; }
    .vm-bio-load-row__fill { transition: none; }
}