/* ==================== GLOBAL STYLES ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Ukloni plavi/sivi bljesak (tap highlight) pri dodiru — da djeluje kao nativna app, ne browser */
    -webkit-tap-highlight-color: transparent;
}

/* Nativni osjećaj: bez long-press selekcije teksta / Google „pretraži" popup-a po UI-ju.
   Selekcija/kopiranje ostaje DOZVOLJENO u poljima za unos i tamo gdje korisnik želi da kopira
   (opis oglasa, opis firme, broj telefona). */
/* Bez uvećanja stranice dvostrukim dodirom — aplikacija, ne web stranica. */
html, body { touch-action: manipulation; }
/* Statusna linija telefona. Sa `viewport-fit=cover` stranica se crta i ispod
   nje, pa se cio sadrzaj spusta za tu visinu — tacno onoliko koliko se spusta
   i gornja traka, da razmak medju njima ostane isti. Na ekranima bez zareza
   je 0, pa se nista ne mijenja. */
/* padding-top za zarez telefona je presao na #main-site — vidi SKROL STRANICE na dnu fajla */

html, body {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

:root {
    --primary: #D4A017;
    --primary-dark: #B8860B;
    --primary-light: #F5D56E;
    --accent: #e74c3c;
    --bg-dark: #08080f;
    --bg-card: rgba(18, 18, 38, 0.65);
    --bg-card-solid: #12122a;
    --bg-card-hover: rgba(30, 30, 58, 0.7);
    --bg-section: #0b0b16;
    --text: #d0d0e8;
    --text-muted: #7878a0;
    --text-bright: #ffffff;
    --border: rgba(255,255,255,0.06);
    --border-solid: #252545;
    --success: #2ecc71;
    --warning: #f39c12;
    --danger: #e74c3c;
    --gradient-primary: linear-gradient(135deg, #D4A017, #F5D56E);
    --gradient-dark: linear-gradient(135deg, #08080f, #12122a);
    --shadow: 0 4px 24px rgba(0,0,0,0.35);
    --shadow-lg: 0 12px 48px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 20px rgba(212,160,23,0.12);
    --glass: linear-gradient(180deg, rgba(30, 30, 58, 0.65) 0%, rgba(18, 18, 38, 0.5) 100%);
    --glass-border: rgba(255,255,255,0.1);
    --glass-inset: inset 0 1px 0 rgba(255,255,255,0.08);
    --glass-blur: none;
    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 22px;
}

/* ==================== LIGHT THEME ==================== */
/* ---------- Tema: pregledac ne smije sam da prefarbava ----------
   Chrome i Samsung Internet imaju "tamni rezim za sajtove". Ako im sajt ne
   kaze da i sam vodi racuna o temi, oni mu sami prefarbaju boje: bijelo
   postane sivo, dio teksta se izvrne a dio ne, i sve izgleda kao blijeda
   siva kasa. Ovim im se javlja sta sajt vec radi, pa se ne mijesaju.
   `only light` je izricito: "svijetla tema je namjerna, ne zatamnjuj je". */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: only light; }
/* Samsung Internet (a i Chrome "Apply dark theme to sites") sam zatamni sajt
   za koji misli da nema tamnu temu — a to prepoznaje po tome da li u CSS-u
   postoji `prefers-color-scheme`. Nasa tema se bira preko `data-theme`, pa
   toga nije bilo i pregledac je prefarbavao sve (plave plocice, narandzasto,
   crveni brojevi — Samsung Flip, 02.10.2026). Ovi blokovi ne mijenjaju nista
   u izgledu; samo kazu pregledacu da izbor teme prepusti nama. */
@media (prefers-color-scheme: dark) {
    :root { color-scheme: dark; }
    :root[data-theme="light"] { color-scheme: only light; }
}
@media (prefers-color-scheme: light) {
    :root { color-scheme: dark; }
    :root[data-theme="light"] { color-scheme: only light; }
}

[data-theme="light"] {
    /* Gold accents — ista zlatna nijansa kao u dark modu (po zahtjevu) */
    --primary: #D4A017;
    --primary-dark: #B8860B;
    --primary-light: #F5D56E;
    --accent: #c0392b;
    /* Backgrounds — warm cream, premium luxury feel */
    --bg-dark: #FAF8F3;
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-card-solid: #FFFFFF;
    --bg-card-hover: rgba(248, 244, 235, 0.95);
    --bg-section: #F2EEE5;
    /* Text — deep warm gray */
    --text: #2A2418;
    --text-muted: #6F685C;
    --text-bright: #0F0C07;
    /* Borders — soft warm tone */
    --border: rgba(139, 105, 20, 0.12);
    --border-solid: #DFD9CB;
    /* States */
    --success: #27ae60;
    --warning: #d68910;
    --danger: #c0392b;
    /* Gradient — isti kao u dark modu */
    --gradient-primary: linear-gradient(135deg, #D4A017, #F5D56E);
    --gradient-dark: linear-gradient(135deg, #FAF8F3, #F2EEE5);
    /* Shadows — softer, more subtle */
    --shadow: 0 2px 12px rgba(90, 75, 40, 0.08);
    --shadow-lg: 0 10px 32px rgba(90, 75, 40, 0.14);
    --shadow-glow: 0 0 20px rgba(184, 134, 11, 0.18);
    /* Glass — bela sa cream gradientom, ista transparentnost kao u dark modu */
    --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(250, 247, 240, 0.45) 100%);
    --glass-border: rgba(184, 134, 11, 0.12);
    --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    background: var(--bg-dark);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ---- Fixed decorative background (parallax-style) ---- */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--bg-dark);
}

/* Decorative background lines — lightweight */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        /* ── Diagonal gold line ── */
        linear-gradient(135deg,
            transparent 18%,
            rgba(212,160,23,0.05) 19.5%,
            rgba(212,160,23,0.12) 20%,
            rgba(212,160,23,0.05) 20.5%,
            transparent 22%
        ),
        /* ── Circle accent — top-right ── */
        radial-gradient(circle 280px at 80% 15%,
            transparent 55%,
            rgba(212,160,23,0.05) 58%,
            rgba(212,160,23,0.09) 60%,
            rgba(212,160,23,0.05) 62%,
            transparent 65%
        ),
        /* ── Circle accent — bottom-left ── */
        radial-gradient(circle 380px at 15% 82%,
            transparent 52%,
            rgba(100,60,200,0.03) 55%,
            rgba(100,60,200,0.06) 57%,
            rgba(100,60,200,0.03) 59%,
            transparent 62%
        );
}

/* Light theme — adjust decorative background for contrast */
/* ==================== LIGHT THEME — hardcoded overrides ==================== */
[data-theme="light"] body::after {
    background:
        linear-gradient(135deg,
            transparent 18%,
            rgba(184,134,11,0.04) 19.5%,
            rgba(184,134,11,0.10) 20%,
            rgba(184,134,11,0.04) 20.5%,
            transparent 22%
        ),
        radial-gradient(circle 280px at 80% 15%,
            transparent 55%,
            rgba(184,134,11,0.04) 58%,
            rgba(184,134,11,0.08) 60%,
            rgba(184,134,11,0.04) 62%,
            transparent 65%
        ),
        radial-gradient(circle 380px at 15% 82%,
            transparent 52%,
            rgba(120,60,200,0.02) 55%,
            rgba(120,60,200,0.04) 57%,
            rgba(120,60,200,0.02) 59%,
            transparent 62%
        );
}

[data-theme="light"] .navbar {
    /* Liquid Glass — light verzija sa blagim bijelim okvirom */
    background: transparent;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 22px;
    box-shadow: 0 12px 38px rgba(90, 75, 40, 0.18);
}
[data-theme="light"] .navbar::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0) 100%);
}
[data-theme="light"] .navbar.scrolled {
    /* Bez promjene pri scrollu — navbar zadržava liquid glass izgled */
}

[data-theme="light"] .category-bar {
    background: rgba(255, 255, 255, 0.4);
    border-bottom-color: rgba(184,134,11,0.1);
}

[data-theme="light"] .hero,
[data-theme="light"] .pricing-hero {
    background: rgba(255, 255, 255, 0.3);
}

[data-theme="light"] .footer {
    background: rgba(242, 238, 229, 0.4);
    border-top-color: rgba(184,134,11,0.15);
}

[data-theme="light"] .hero-search {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(184, 134, 11, 0.15);
    box-shadow: 0 10px 40px rgba(90, 75, 40, 0.08);
}

/* Vehicle cards + premium cards — white with subtle shadow */
[data-theme="light"] .vehicle-card,
[data-theme="light"] .biz-info-card,
[data-theme="light"] .fav-folder-section,
[data-theme="light"] .alert-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .vd-specs,
[data-theme="light"] .vd-description,
[data-theme="light"] .vd-equipment,
[data-theme="light"] .vd-seller,
[data-theme="light"] .profile-header-card,
[data-theme="light"] .profile-working-hours,
[data-theme="light"] .alert-form,
[data-theme="light"] .biz-profile-edit,
[data-theme="light"] .notif-bell-dropdown,
[data-theme="light"] .dash-stat,
[data-theme="light"] .skeleton-card,
[data-theme="light"] .saved-filter-card,
[data-theme="light"] .saved-profile-card {
    box-shadow: 0 2px 14px rgba(90, 75, 40, 0.07), inset 0 1px 0 rgba(255,255,255,0.9);
}

/* Inputs on light */
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] textarea,
[data-theme="light"] select {
    background: #FFFFFF;
    color: var(--text);
    border-color: rgba(184, 134, 11, 0.18);
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: var(--text-muted);
}

/* Modals on light */
[data-theme="light"] .modal-overlay { background: rgba(40, 30, 15, 0.4); }
[data-theme="light"] .modal {
    /* Blaga providnost, isto kao u tamnom modu — kroz nju se nazire vec
       zamucen i zatamnjen sloj ispod. Providnost je samo mijesanje boja i
       ne kosta nista; skupo je zamucenje, a ono ostaje na sloju ispod.
       Ista vrijednost mora i u drugom pravilu za .modal nize u fajlu. */
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(184, 134, 11, 0.15);
    box-shadow: 0 32px 100px rgba(40, 30, 15, 0.25);
}

/* Mobile menu & dropdowns */
[data-theme="light"] .mobile-menu { background: #FAF8F3; }
[data-theme="light"] .notif-bell-dropdown { background: #FFFFFF; }

/* Card specs background */
[data-theme="light"] .card-spec {
    background: rgba(140, 130, 115, 0.1);
    border: 1px solid rgba(140, 130, 115, 0.2);
    color: var(--text);
}
[data-theme="light"] .card-spec i { color: var(--text-muted); }

/* Category items */
[data-theme="light"] .category-item {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(184, 134, 11, 0.12);
}

/* Skeleton shimmer on light */
[data-theme="light"] .skeleton-img,
[data-theme="light"] .skeleton-line,
[data-theme="light"] .skeleton-spec {
    background-color: rgba(184, 134, 11, 0.08);
}
[data-theme="light"] .skeleton-shimmer::after {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(184, 134, 11, 0.08) 50%,
        transparent 100%);
}

/* Links */
[data-theme="light"] a:not(.nav-logo):not(.btn-primary):not(.nav-post-btn):not(.btn-register):not(.btn-login):not(.nav-icon-link):not(.mobile-menu a):not(.category-item):not(.bn-item):not(.saved-filter-card):not(.saved-profile-card):not(.vehicle-card):not(.biz-contact-row):not(.biz-social-btn):not(.share-btn) {
    color: var(--primary);
}

/* Hamburger on light */
[data-theme="light"] .hamburger {
    border-color: rgba(184, 134, 11, 0.2);
    color: var(--text);
}

/* ::selection */
[data-theme="light"] ::selection {
    background: rgba(184, 134, 11, 0.25);
    color: var(--text-bright);
}

/* Nav search on light */
[data-theme="light"] .nav-search {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(184, 134, 11, 0.18);
}
[data-theme="light"] .nav-search input {
    background: transparent;
    color: var(--text);
    border: none;
}

/* Premium/Standard plan option on light */
[data-theme="light"] .plan-option {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(184, 134, 11, 0.15);
}
[data-theme="light"] .plan-option.active {
    background: rgba(212, 160, 23, 0.08);
    border-color: var(--primary);
}

/* Badges — adjust for light */
[data-theme="light"] .notif-badge {
    box-shadow: 0 2px 8px rgba(192, 57, 43, 0.3);
}
[data-theme="light"] .user-type-badge {
    background: rgba(184, 134, 11, 0.12);
    color: var(--primary-dark);
    border: 1px solid rgba(184, 134, 11, 0.25);
}
[data-theme="light"] .verified-badge-big {
    background: rgba(184, 134, 11, 0.12);
    color: var(--primary-dark);
    border-color: rgba(184, 134, 11, 0.35);
}

/* Category bar + filter dropdowns on light */
[data-theme="light"] .filters-bar select,
[data-theme="light"] .filters-bar input {
    background: #FFFFFF;
    color: var(--text);
}
[data-theme="light"] .custom-select-list {
    background: #FFFFFF;
    border-color: rgba(184, 134, 11, 0.15);
    box-shadow: 0 10px 30px rgba(90, 75, 40, 0.15);
}
[data-theme="light"] .custom-select-option:hover {
    background: rgba(184, 134, 11, 0.08);
}

/* Dashboard cards on light */
[data-theme="light"] .dash-ad-card {
    background: #FFFFFF;
    border-color: rgba(184, 134, 11, 0.12);
}

/* Price box on light */
[data-theme="light"] .vd-price-box {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(250, 245, 235, 0.7));
    border-color: rgba(184, 134, 11, 0.25);
}

/* Carriage windows on light — keep dark for contrast against gold body */
[data-theme="light"] .logo-carriage-svg,
[data-theme="light"] .nav-logo-icon {
    filter: drop-shadow(0 2px 6px rgba(90, 75, 40, 0.2));
}

/* Kola text on light — darker for contrast */
[data-theme="light"] .nav-logo span,
[data-theme="light"] .footer-logo span {
    color: var(--text-bright);
}
[data-theme="light"] .nav-logo strong,
[data-theme="light"] .footer-logo strong {
    color: var(--primary);
}

/* Skip/close buttons etc. */
[data-theme="light"] .btn-back,
[data-theme="light"] .btn-clear-filters {
    background: #FFFFFF;
    border-color: rgba(184, 134, 11, 0.15);
    color: var(--text);
}
[data-theme="light"] .btn-back:hover,
[data-theme="light"] .btn-clear-filters:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Card stikeri u light modu — neutralna topla siva (kao filter stikeri na pocetnoj) */
[data-theme="light"] .card-verified-inline {
    background: rgba(140, 130, 115, 0.1);
    color: var(--text);
    border-color: rgba(140, 130, 115, 0.2);
}
[data-theme="light"] .card-verified-inline i { color: var(--text-muted); }
[data-theme="light"] .card-price-tag {
    background: rgba(140, 130, 115, 0.1);
    color: var(--text);
    border: 1px solid rgba(140, 130, 115, 0.2);
}
[data-theme="light"] .card-price-tag i { color: var(--text-muted); }
[data-theme="light"] .card-price-tag-no-exchange {
    background: rgba(140, 130, 115, 0.1);
    color: var(--text);
    border-color: rgba(140, 130, 115, 0.2);
}
[data-theme="light"] .card-price-tag-no-exchange i { color: var(--text-muted); }

/* Ad card footer, meta — lokacija + "Prije X dana" stilizovani kao stikeri
   sa neutralnim sivim tonom (ista boja kao filter stikeri na pocetnoj). */
[data-theme="light"] .card-location,
[data-theme="light"] .card-meta .card-location,
[data-theme="light"] .card-meta .card-location i {
    color: var(--text);
}
[data-theme="light"] .card-meta .card-location i { color: var(--text-muted); }
[data-theme="light"] .card-meta .card-location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(140, 130, 115, 0.1);
    border: 1px solid rgba(140, 130, 115, 0.2);
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
}
[data-theme="light"] .card-meta {
    color: var(--text);
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
/* "Prije X dana" tekst — pill sticker stil */
[data-theme="light"] .card-meta > span:not(.card-location):not(.card-verified-inline) {
    background: rgba(140, 130, 115, 0.1);
    border: 1px solid rgba(140, 130, 115, 0.2);
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text);
}

/* Action buttons (Sačuvaj, Prijavi, itd.) */
[data-theme="light"] .action-btn {
    background: #FFFFFF;
    border-color: rgba(184, 134, 11, 0.15);
    color: var(--text);
}
[data-theme="light"] .action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}
[data-theme="light"] .action-btn.action-btn-active {
    background: rgba(192, 57, 43, 0.08);
    border-color: rgba(192, 57, 43, 0.3);
    color: var(--danger);
}

/* Toast notifications on light */
[data-theme="light"] .toast {
    background: #FFFFFF;
    color: var(--text);
    box-shadow: 0 10px 30px rgba(90, 75, 40, 0.2);
    border: 1px solid rgba(184, 134, 11, 0.15);
}

/* Contact rows in biz card */
[data-theme="light"] .biz-contact-row {
    background: rgba(250, 247, 240, 0.8);
    color: var(--text);
}
[data-theme="light"] .biz-contact-row:hover {
    background: rgba(184, 134, 11, 0.08);
    color: var(--primary-dark);
}

/* Saved filter/profile cards */
[data-theme="light"] .saved-filter-card:hover,
[data-theme="light"] .saved-profile-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(184, 134, 11, 0.15);
}

/* Alert card body divider */
[data-theme="light"] .alert-card-body {
    border-left-color: var(--primary);
}

/* Business profile edit section */
[data-theme="light"] .biz-form-group input,
[data-theme="light"] .biz-form-group textarea {
    background: #FFFFFF;
    border-color: rgba(184, 134, 11, 0.15);
    color: var(--text);
}

/* Compare page */
[data-theme="light"] .compare-slot {
    background: #FFFFFF;
    border-color: rgba(184, 134, 11, 0.2);
}
[data-theme="light"] .compare-table {
    background: #FFFFFF;
    border-color: rgba(184, 134, 11, 0.15);
}
[data-theme="light"] .compare-row {
    border-bottom-color: rgba(184, 134, 11, 0.08);
}
[data-theme="light"] .compare-better {
    background: rgba(39, 174, 96, 0.1);
    color: #1e8449;
}
[data-theme="light"] .compare-label {
    color: var(--text-muted);
    border-right-color: rgba(184, 134, 11, 0.08);
}
[data-theme="light"] .compare-val {
    border-right-color: rgba(184, 134, 11, 0.08);
}

/* Popularno paket na light — bijeli sa silver ivicom */
[data-theme="light"] .pricing-popular {
    background: #FFFFFF;
    border: 2px solid #C0C0C6;
    box-shadow: 0 10px 40px rgba(192, 192, 198, 0.2);
}
[data-theme="light"] .pricing-premium {
    background: #FFFFFF;
    border: 2px solid #D4A017;
    box-shadow: 0 10px 40px rgba(212, 160, 23, 0.18);
}

/* Footer on light — readable text */
[data-theme="light"] .footer-col p,
[data-theme="light"] .footer-col a {
    color: var(--text-muted);
}
[data-theme="light"] .footer-col h4 {
    color: var(--text-bright);
}
[data-theme="light"] .footer-bottom {
    color: var(--text-muted);
    border-top-color: rgba(184, 134, 11, 0.15);
}

/* PWA install banner u light modu — usklađen sa ostalim light tema elementima:
   bijela pozadina, suptilni zlatni border, tamniji tekst, soft shadow */
[data-theme="light"] .pwa-banner-content {
    background: #FFFFFF;
    border: 1px solid rgba(184, 134, 11, 0.18);
    box-shadow: 0 8px 28px rgba(90, 75, 40, 0.12), 0 2px 6px rgba(90, 75, 40, 0.06);
}
[data-theme="light"] .pwa-banner-text strong {
    color: #1a1a2e;
}
[data-theme="light"] .pwa-banner-text span {
    color: var(--text-muted);
}
[data-theme="light"] .pwa-install-btn {
    background: linear-gradient(135deg, #D4A017, #B8860B);
    color: #fff;
    box-shadow: 0 2px 8px rgba(212, 160, 23, 0.3);
}
[data-theme="light"] .pwa-install-btn:hover {
    background: linear-gradient(135deg, #F5D442, #D4A017);
    box-shadow: 0 4px 14px rgba(212, 160, 23, 0.4);
}
[data-theme="light"] .pwa-dismiss-btn {
    color: var(--text-muted);
}
[data-theme="light"] .pwa-dismiss-btn:hover {
    color: #1a1a2e;
}

/* Bedževi u light modu — iste shimmer boje kao dark (Novo=bronza, Istaknuto=silver, Premium=zlato) */
/* Naslijeđuju se iz .card-badge.badge-* pravila (sa shimmer animacijama). Ovdje nema overrides. */

/* ==================== LIGHT THEME — Auth (Prijava / Registracija) ==================== */
[data-theme="light"] .auth-card {
    background: #FFFFFF;
    border: 1px solid rgba(184, 134, 11, 0.18);
    box-shadow: 0 20px 60px rgba(130, 95, 20, 0.12), 0 4px 16px rgba(0,0,0,0.04);
}
[data-theme="light"] .auth-header h2 {
    color: var(--text-bright);
}
[data-theme="light"] .auth-header p {
    color: var(--text-muted);
    opacity: 1;
}
[data-theme="light"] .auth-card label {
    color: var(--text-bright);
    font-weight: 600;
}
[data-theme="light"] .auth-card input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] .auth-card select,
[data-theme="light"] .auth-card textarea {
    background: #FAF8F3;
    border: 1px solid rgba(184, 134, 11, 0.25);
    color: var(--text-bright);
}
[data-theme="light"] .auth-card input::placeholder,
[data-theme="light"] .auth-card textarea::placeholder {
    color: #999;
    opacity: 0.7;
}
[data-theme="light"] .auth-card input:focus,
[data-theme="light"] .auth-card select:focus,
[data-theme="light"] .auth-card textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.12);
    outline: none;
}
[data-theme="light"] .auth-switch {
    color: var(--text-muted);
}
[data-theme="light"] .auth-forgot a,
[data-theme="light"] .auth-switch a {
    color: var(--primary);
}
[data-theme="light"] .auth-card .form-group label i {
    color: var(--primary);
}

/* ==================== LIGHT THEME — Premium polish ==================== */
/* Profinjene sjenke i gold akcenti svuda gdje su kartice i kontrole */

/* Vehicle cards — solid boja (prozirnost alpha kompozicija je skupa pri scroll-u) */
[data-theme="light"] .vehicle-card {
    background: #FFFFFF;
    border: 1px solid rgba(184, 134, 11, 0.12);
    box-shadow: 0 2px 8px rgba(130, 95, 20, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    contain: layout style paint;
}
[data-theme="light"] .vehicle-card:hover {
    border-color: rgba(184, 134, 11, 0.25);
    box-shadow: 0 10px 28px rgba(130, 95, 20, 0.14), 0 3px 8px rgba(184, 134, 11, 0.08);
    transform: translateY(-3px);
}
/* Paketi u light modu — bez obojenog okvira (kao i u dark modu). */

/* Card title — bolji kontrast */
[data-theme="light"] .card-title {
    color: #1a1a2e;
    font-weight: 700;
}

/* Paneli u light modu su prozirni — isto ponašanje kao dark (sadržaj
   pluta nad warm cream pozadinom sajta). Samo kartice/blokovi unutra
   imaju svoje bijele pozadine. */

/* Inputs & selects — mekši focus */
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] .custom-select-btn:focus,
[data-theme="light"] .custom-select-btn.open {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.08);
    outline: none;
}

/* Primary + post dugme na light — zlatni gradient. Pricing-standard ima svoj
   silver stil (definisan u .btn-pricing-standard bazi), ne koristi ovaj override. */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-post {
    background: linear-gradient(135deg, #D4A017 0%, #B8860B 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(184, 134, 11, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-post:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(184, 134, 11, 0.4);
    filter: brightness(1.05);
}

/* Nav logo — topliji kontrast */
[data-theme="light"] .nav-logo span {
    color: #1a1a2e;
    /* u light modu "Kola" tekst koristi tamniji shimmer gradient (nasuprot
       svijetloj pozadini), a "Klik" ostaje ista zlatna kao u dark modu */
    background: linear-gradient(90deg, #1a1a2e 0%, #1a1a2e 30%, #4a4a5e 50%, #1a1a2e 70%, #1a1a2e 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="light"] .nav-logo strong {
    color: var(--primary);
    text-shadow: none; /* bijeli obris je pravio mutne ivice u light modu */
}

/* Kategorijska traka — solid */
[data-theme="light"] .category-bar {
    background: #FAF8F3;
    border-bottom: 1px solid rgba(184, 134, 11, 0.1);
}
[data-theme="light"] .category-item {
    background: #FFFFFF;
    border: 1px solid rgba(184, 134, 11, 0.12);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(130, 95, 20, 0.05);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Samo za misa. Na dodir `:hover` ostaje zalijepljen poslije tapa, pa bi
   kategorija izgledala kao da je i dalje izabrana i kad se iskljuci. */
@media (hover: hover) {
    [data-theme="light"] .category-item:hover {
        border-color: var(--primary);
        box-shadow: 0 4px 12px rgba(184, 134, 11, 0.15);
        transform: translateY(-1px);
    }
}
[data-theme="light"] .category-item.active {
    background: linear-gradient(135deg, #D4A017, #B8860B);
    color: #fff;
    border-color: transparent;
    /* Bez sjenke — izabrana kategorija se raspoznaje po zlatnoj ikonici,
       natpisu i okviru. `none` je ovdje nuzan (a ne izostavljanje pravila)
       jer bi inace proradila opsta sjenka svih kategorija u svijetlom modu. */
    box-shadow: none;
}
/* Izabrana kategorija u svijetlom modu: ikonica i natpis su zlatni — ista
   nijansa kao ikonica dugmeta "Adresar" (--primary). Ranije su bili bijeli,
   sto se gubilo na svijetloj podlozi. */
[data-theme="light"] .category-item.active i,
[data-theme="light"] .category-item.active span {
    color: var(--primary);
}

/* Dashboard stats — solid */
[data-theme="light"] .dash-stat {
    background: #FFFFFF;
    border: 1px solid rgba(184, 134, 11, 0.1);
    box-shadow: 0 2px 10px rgba(130, 95, 20, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
[data-theme="light"] .dash-stat:hover {
    border-color: rgba(184, 134, 11, 0.25);
    box-shadow: 0 6px 18px rgba(130, 95, 20, 0.1);
    transform: translateY(-2px);
}

/* Admin stats — solid */
[data-theme="light"] .admin-stat {
    background: #FFFFFF;
    border: 1px solid rgba(184, 134, 11, 0.1);
    box-shadow: 0 2px 8px rgba(130, 95, 20, 0.05);
}

/* Custom select dropdown — mekši, profinjeniji */
[data-theme="light"] .custom-select-btn {
    background: #FFFFFF;
    border: 1px solid rgba(184, 134, 11, 0.15);
    box-shadow: 0 1px 3px rgba(130, 95, 20, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
[data-theme="light"] .custom-select-btn:hover {
    border-color: rgba(184, 134, 11, 0.35);
    box-shadow: 0 2px 8px rgba(130, 95, 20, 0.08);
}

/* Modal — topliji bijeli sa gold ivicom, blago providan (vidi gore) */
[data-theme="light"] .modal {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(184, 134, 11, 0.15);
    box-shadow: 0 32px 100px rgba(90, 75, 40, 0.25), 0 10px 30px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .modal-overlay {
    background: rgba(40, 30, 15, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Saved filter / saved profile cards */
[data-theme="light"] .saved-filter-card,
[data-theme="light"] .saved-profile-card {
    background: #FFFFFF;
    border: 1px solid rgba(184, 134, 11, 0.12);
    box-shadow: 0 2px 8px rgba(130, 95, 20, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
[data-theme="light"] .saved-filter-card:hover,
[data-theme="light"] .saved-profile-card:hover {
    border-color: rgba(184, 134, 11, 0.3);
    box-shadow: 0 6px 18px rgba(130, 95, 20, 0.1);
    transform: translateY(-2px);
}

/* Notifikacija bell panel */
[data-theme="light"] .notif-bell-panel {
    background: #FFFFFF;
    border: 1px solid rgba(184, 134, 11, 0.15);
    box-shadow: 0 12px 40px rgba(130, 95, 20, 0.16);
}

/* Profile hero — suptilna warm pozadina */
[data-theme="light"] .profile-hero,
[data-theme="light"] .biz-hero {
    background: linear-gradient(135deg, #FFFFFF 0%, #FAF8F3 100%);
    border: 1px solid rgba(184, 134, 11, 0.1);
    box-shadow: 0 4px 20px rgba(130, 95, 20, 0.06);
}

/* Vehicle detail — bolji layout na svijetloj */
[data-theme="light"] .vd-photo-main,
[data-theme="light"] .vd-thumbs img {
    box-shadow: 0 4px 16px rgba(130, 95, 20, 0.1);
    border-radius: 12px;
}

/* Toast notifikacije */
[data-theme="light"] .toast {
    background: #FFFFFF;
    border: 1px solid rgba(184, 134, 11, 0.2);
    box-shadow: 0 10px 30px rgba(130, 95, 20, 0.18);
    color: var(--text);
}

/* Scrollbar — gold tone za light */
[data-theme="light"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
[data-theme="light"] ::-webkit-scrollbar-track {
    background: #F2EEE5;
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #D4A017, #B8860B);
    border-radius: 10px;
    border: 2px solid #F2EEE5;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #E5B020, #C49A1A);
}

/* Selection color */
[data-theme="light"] ::selection {
    background: rgba(212, 160, 23, 0.25);
    color: #1a1a2e;
}

/* Linkovi — zlatni umjesto blue */
[data-theme="light"] a {
    transition: color 0.15s ease;
}

/* Card badges — mekši shadow na light */
[data-theme="light"] .card-badge {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Pagination */
[data-theme="light"] .pagination button {
    background: #FFFFFF;
    border: 1px solid rgba(184, 134, 11, 0.15);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(130, 95, 20, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
[data-theme="light"] .pagination button:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}
[data-theme="light"] .pagination button.active {
    background: linear-gradient(135deg, #D4A017, #B8860B);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(184, 134, 11, 0.3);
}

/* Nav icon links — bolji hover */
[data-theme="light"] .nav-icon-link {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    border-radius: 10px;
}
[data-theme="light"] .nav-icon-link:hover {
    background: rgba(184, 134, 11, 0.08);
    color: var(--primary);
}

/* ==================== DELUXE — obje teme (strukturne animacije i detalji) ==================== */
/* Stvari koje ne mijenjaju boje, samo dodaju smooth hover/animacije — rade i u dark i u light */

/* Image zoom u kartici na hover */
.vehicle-card .card-image img {
    transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Slike stizu jedna po jedna, svaka u svom trenutku. Bez ovoga svaka upadne
   naglo, pa cijela mreza djeluje kao da treperi dok se puni — posebno na
   mobilnom internetu, gdje se to razvuce na nekoliko sekundi. Ovako se svaka
   meko pojavi na svom mjestu. Klasu dodaje `onload` u createVehicleCard, a
   _sinhronizujGrid je doda odmah slici koja je vec u kesu. */
.vehicle-card .card-image img,
[data-theme="light"] .card-image img {
    opacity: 0;
}
.vehicle-card .card-image img.slika-stigla,
[data-theme="light"] .card-image img.slika-stigla {
    opacity: 1;
}
.vehicle-card:hover .card-image img {
    transform: scale(1.06);
}

/* Gold hairline na vrhu kartice pri hover */
.vehicle-card {
    position: relative;
    overflow: hidden;
}
/* Hover gold line pri vrhu */
.vehicle-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 4;
    pointer-events: none;
}
.vehicle-card:hover::before {
    opacity: 1;
}

/* Heart dugme — na hover postaje crveno (i u dark i u light) */
.card-fav-btn {
    transition: color 0.2s ease, background 0.2s ease, transform 0.15s, box-shadow 0.2s ease;
}
.card-fav-btn:hover {
    color: var(--danger);
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(220, 53, 69, 0.35);
}

/* Premium badge shimmer — zlatni sjaj klizi preko badge-a */
@keyframes goldShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
/* shimmer uklonjen sa bedževa na karticama */

/* Page fade-in animacija */
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.page.active {
    animation: pageFadeIn 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* Card ulazna animacija */
@keyframes cardEntry {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.vehicle-card {
    animation: cardEntry 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

/* Custom select dropdown opcije — slide-in efekat */
.custom-select-option {
    transition: padding-left 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.custom-select-option:hover {
    padding-left: 18px;
}

/* Pricing card — elegantni lift */
.pricing-card {
    transition: transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 0.3s ease;
}
.pricing-card:hover {
    transform: translateY(-6px);
}

/* Category item — suptilni lift */
.category-item {
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
@media (hover: hover) {
    .category-item:hover:not(.active) {
        transform: translateY(-1px);
    }
}

/* Stat kartice (dashboard/admin) */
.dash-stat,
.admin-stat {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.dash-stat:hover,
.admin-stat:hover {
    transform: translateY(-2px);
}

/* Loading shimmer klasa — za buduce skeleton loading koristiti class="loading-skeleton" */
@keyframes loadingShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.loading-skeleton {
    background-size: 200% 100% !important;
    animation: loadingShimmer 1.6s ease-in-out infinite;
}

/* Loading skeleton — dark default */
.loading-skeleton {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.02) 0%,
        rgba(255,255,255,0.06) 40%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0.06) 60%,
        rgba(255,255,255,0.02) 100%
    );
}

/* ==================== LIGHT THEME — Deluxe touches ==================== */
/* Mikro-animacije, shimmer, premium detalji */

/* Typography polish */
[data-theme="light"] .panel-title,
[data-theme="light"] h1,
[data-theme="light"] h2 {
    letter-spacing: -0.3px;
    color: #0F0C07;
}
[data-theme="light"] .panel-title i {
    color: var(--primary);
    filter: drop-shadow(0 2px 4px rgba(184, 134, 11, 0.25));
}

/* Premium price — zlatni gradient tekst */
[data-theme="light"] .card-price {
    /* Neutralna topla siva sa gradijentom — od tamnije ka svjetlijoj sivoj */
    background: linear-gradient(135deg, #4a4540 0%, #6b6258 50%, #4a4540 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}
[data-theme="light"] .vd-price-amount {
    background: linear-gradient(135deg, #8B6914, #D4A017);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
}

/* Vehicle card — suptilni gold hairline na vrhu pri hoveru */
[data-theme="light"] .vehicle-card {
    position: relative;
    overflow: hidden;
}
[data-theme="light"] .vehicle-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #D4A017 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 4;
}
[data-theme="light"] .vehicle-card:hover::before {
    opacity: 1;
}

/* Slike u kartici — blagi zoom na hover */
[data-theme="light"] .card-image img {
    transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-theme="light"] .vehicle-card:hover .card-image img {
    transform: scale(1.06);
}

/* Premium badge — naslijeđuje bazu (zlatni shimmer) i u light modu */
@keyframes goldShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Verified badge — neutralna siva, ista kao ostali card stikeri */
[data-theme="light"] .verified-badge,
[data-theme="light"] .card-verified-inline {
    background: rgba(140, 130, 115, 0.1);
    color: var(--text);
    border: 1px solid rgba(140, 130, 115, 0.2);
    box-shadow: none;
}

/* Navbar light verzija — providan, isti staklasti dizajn kao dark
   (ne prepisuje background, koristi se primarna definicija iz [data-theme="light"] .navbar) */

/* Post button u navbaru */
[data-theme="light"] .nav-post-btn {
    background: linear-gradient(135deg, #D4A017 0%, #B8860B 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(184, 134, 11, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
[data-theme="light"] .nav-post-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(184, 134, 11, 0.4);
    filter: brightness(1.08);
}

/* Page fade-in animacija */
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
[data-theme="light"] .page.active {
    animation: pageFadeIn 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* Card stagger animation */
@keyframes cardEntry {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
[data-theme="light"] .vehicle-card {
    animation: cardEntry 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

/* Footer polish */
[data-theme="light"] .footer {
    background: linear-gradient(180deg, #FAF8F3 0%, #F2EEE5 100%);
    border-top: 1px solid rgba(184, 134, 11, 0.15);
    position: relative;
}
[data-theme="light"] .footer::before {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.5), transparent);
}

/* Section hairline divider — suptilna zlatna linija (u obje teme; do 04.10.2026 samo u svijetloj) */
.section:not(.section-hero):not(:first-of-type)::before {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    margin: 0 auto 20px;
    background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.5), transparent);
}

/* Photo count overlay na karticama */
[data-theme="light"] .photo-count {
    background: rgba(26, 26, 46, 0.9);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Heart button — isti izgled u oba moda.
   Dugme stoji PREKO fotografije oglasa, ne preko pozadine stranice, pa
   svijetli krug sa tamno sivim srcem nestaje na svijetlim fotografijama.
   Zato i u svijetlom modu koristimo tamni krug sa svijetlo sivim srcem,
   isto kao u tamnom — to se vidi na bilo kakvoj slici. */
/* U svijetloj temi srce dobija jos i blagu sjenku — bedz "NOVO" je prati,
   da ostanu isti. */
[data-theme="light"] .card-badge.badge-new {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .card-fav-btn {
    background: rgba(0, 0, 0, 0.45);
    border: none;
    color: rgba(255, 255, 255, 0.75);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
@media (hover: hover) {
    [data-theme="light"] .card-fav-btn:hover {
        background: rgba(0, 0, 0, 0.55);
        color: var(--danger);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.25);
    }
}
[data-theme="light"] .card-fav-btn.card-fav-active {
    background: rgba(0, 0, 0, 0.55);
    color: var(--danger);
    box-shadow: 0 2px 10px rgba(220, 53, 69, 0.35);
}

/* Empty state polish — topliji */
[data-theme="light"] .no-results {
    background: linear-gradient(135deg, #FFFFFF, #FAF8F3);
    border: 1px dashed rgba(184, 134, 11, 0.25);
    border-radius: 16px;
    padding: 40px;
}
[data-theme="light"] .no-results i {
    color: var(--primary);
    opacity: 0.5;
    filter: drop-shadow(0 4px 12px rgba(184, 134, 11, 0.2));
}

/* Skeleton loading — light varijanta (topli cream tonovi) */
[data-theme="light"] .loading-skeleton {
    background: linear-gradient(90deg,
        #F2EEE5 0%,
        #FAF8F3 40%,
        #FFFFFF 50%,
        #FAF8F3 60%,
        #F2EEE5 100%
    );
}

/* Mjesta za unos cijene/godine — specijalni outline zbog osjećaja vrijednosti */
[data-theme="light"] .filters-bar input[type="number"] {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F3 100%);
}

/* Pricing card na Paketi stranici — premium feel */
[data-theme="light"] .pricing-card {
    background: #FFFFFF;
    border: 1px solid rgba(184, 134, 11, 0.12);
    box-shadow: 0 4px 20px rgba(130, 95, 20, 0.08);
    transition: transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.2, 0.64, 1), background-color 0.3s cubic-bezier(0.34, 1.2, 0.64, 1), border-color 0.3s cubic-bezier(0.34, 1.2, 0.64, 1), color 0.3s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
}
[data-theme="light"] .pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(130, 95, 20, 0.16);
}
[data-theme="light"] .pricing-popular {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F3 100%);
    box-shadow: 0 12px 36px rgba(184, 134, 11, 0.2);
}

/* Custom select dropdown list — premium */
[data-theme="light"] .custom-select-list {
    background: #FFFFFF;
    border: 1px solid rgba(184, 134, 11, 0.15);
    box-shadow:
        0 16px 40px rgba(130, 95, 20, 0.18),
        0 4px 12px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .custom-select-option {
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}
[data-theme="light"] .custom-select-option:hover {
    background: linear-gradient(90deg, rgba(184, 134, 11, 0.08), rgba(184, 134, 11, 0.04));
    color: var(--primary);
    padding-left: 18px;
}

/* ==================== LIGHT THEME — Paketi (pricing) ==================== */
/* Popularno silver gradient treba tamnije tonove za vidljivost na bijeloj pozadini */
[data-theme="light"] .pricing-popular .price-amount {
    background: linear-gradient(90deg, #5A5A64 0%, #9A9AA0 25%, #707078 50%, #9A9AA0 75%, #5A5A64 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: silverBadgeShimmer 4s ease-in-out infinite;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .pricing-popular .pricing-badge {
    background: linear-gradient(90deg, #5A5A64, #9A9AA0, #5A5A64);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: silverBadgeShimmer 3.5s ease-in-out infinite;
}
[data-theme="light"] .color-standard {
    color: #707078;
}
/* Silver feature text u karticama na light — tamnija silver za kontrast */
[data-theme="light"] .pricing-popular .pricing-features strong.color-standard {
    background: linear-gradient(90deg, #5A5A64, #9A9AA0, #5A5A64);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: silverBadgeShimmer 4s ease-in-out infinite;
}

/* ==================== LIGHT THEME — hover overrides ====================
   Avoid gray/beige hover backgrounds. Use soft gold tint instead. */
[data-theme="light"] .equip-check:hover,
[data-theme="light"] .fav-folder-header:hover,
[data-theme="light"] .notif-bell-item:hover,
[data-theme="light"] .compare-picker-item:hover,
[data-theme="light"] .fav-folder-pick-btn:hover,
[data-theme="light"] .compare-picker-folder-header:hover,
[data-theme="light"] .message-item:hover,
[data-theme="light"] .history-item:hover {
    background: rgba(184, 134, 11, 0.08);
}

@media (hover: hover) {
    [data-theme="light"] .category-item:hover {
        background: rgba(184, 134, 11, 0.08);
        border-color: var(--primary);
        color: var(--primary-dark);
    }
    [data-theme="light"] .category-item:hover i { color: var(--primary); }
}
[data-theme="light"] .category-item.active {
    background: rgba(184, 134, 11, 0.12);
    border-color: var(--primary);
    color: var(--primary-dark);
}

[data-theme="light"] .nav-links > a:hover {
    background: rgba(184, 134, 11, 0.08);
    color: var(--primary-dark);
}

[data-theme="light"] .nav-icon-link:hover {
    background: rgba(184, 134, 11, 0.08);
    color: var(--primary-dark);
}

[data-theme="light"] .dash-ad-card:hover {
    border-color: rgba(184, 134, 11, 0.25);
    box-shadow: 0 4px 18px rgba(90, 75, 40, 0.1);
}

[data-theme="light"] .vehicle-card:hover,
[data-theme="light"] .pricing-card:hover,
[data-theme="light"] .stat-card:hover,
[data-theme="light"] .dash-stat:hover,
[data-theme="light"] .dash-ad-card:hover,
[data-theme="light"] .message-item:hover {
    border-color: rgba(184, 134, 11, 0.3);
    box-shadow: 0 10px 40px rgba(90, 75, 40, 0.15);
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250,245,235,0.92) 100%) !important;
}

[data-theme="light"] .plan-option:hover {
    border-color: var(--primary);
    background: rgba(184, 134, 11, 0.05);
}

[data-theme="light"] .upgrade-plan-option:hover {
    background: rgba(184, 134, 11, 0.05);
    border-color: var(--primary);
}

/* Any leftover hover with dark bg — force gold tint */
[data-theme="light"] button:hover,
[data-theme="light"] .btn-sm:hover {
    /* inherit specific button rules but prevent gray fallback */
}
[data-theme="light"] input:hover:not(:focus),
[data-theme="light"] select:hover:not(:focus),
[data-theme="light"] textarea:hover:not(:focus) {
    border-color: rgba(184, 134, 11, 0.35);
}

::selection {
    background: rgba(212,160,23,0.3);
    color: var(--text-bright);
}

.hidden { display: none !important; }

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 30px;
}

.section {
    padding: 60px 0;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.3s;
}

a:hover { color: var(--primary-light); }

/* ==================== NAVBAR — Liquid Glass (diskretan sivi okvir) ==================== */
.navbar {
    position: fixed;
    /* env(safe-area-inset-top) sklanja traku ispod statusne linije i "zareza"
       na telefonu. Radi tek otkad u index.html stoji `viewport-fit=cover`;
       gdje zareza nema, vrijednost je 0 pa ostaje obicnih 15px kao i do sada.
       Sadrzaj stranice se pomjera za isto toliko preko `body` ispod. */
    top: calc(15px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 60px);
    max-width: 1540px;
    z-index: 1000;
    background: rgba(8, 8, 15, 0.30);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.45);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Top highlight strip — diskretni sjaj na rubu (border-radius: inherit prati navbar) */
.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0) 100%);
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

/* Sadržaj navbara iznad pseudo-elementa */
.navbar > * { position: relative; z-index: 1; }

/* .navbar.scrolled — sve nasleđuje isti staklasti izgled (nema vizuelne razlike) */
.navbar.scrolled {
    /* background, shadow i border ostaju isti kao default — bez promjene pri scroll-u */
}

/* .navbar.menu-open — bez promjene background-a (zadržava staklasti izgled) */
.navbar.menu-open {
    /* radius i background ostaju isti kao default */
}

.nav-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    height: 70px;
    gap: 12px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0px;
    font-size: 1.4rem;
    color: var(--text-bright);
    font-weight: 900;
    text-decoration: none;
    flex-shrink: 0;
    position: relative;
}

.nav-logo strong { color: var(--primary); font-weight: 900; }
.footer-logo strong { color: var(--primary); font-weight: 900; }

.nav-logo {
    position: relative;
    overflow: visible;
}
.nav-logo-icon {
    width: 55px;
    height: auto;
    filter: drop-shadow(0 0 6px rgba(212, 160, 23, 0.3));
    overflow: visible;
    position: relative;
    z-index: 1;
}

/* Dijagonalni sheen samo preko same kočije (centrirano, precizno) */
.nav-logo::before {
    content: '';
    position: absolute;
    top: 50%; left: 0;
    width: 55px; height: 55px;
    transform: translateY(-50%);
    background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.55) 50%, transparent 58%);
    background-size: 220% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    animation: kocijaShimmer 3.8s ease-in-out infinite;
    mix-blend-mode: overlay;
    z-index: 2;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 55%);
            mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 55%);
}
@keyframes kocijaShimmer {
    0%   { background-position: 200% 0; }
    55%  { background-position: -100% 0; }
    100% { background-position: -100% 0; }
}

/* "Kola" tekst — srebrni shimmer */
.nav-logo > span,
.nav-logo:not(strong) > span:not(strong) {
    background: linear-gradient(90deg, var(--text-bright) 0%, var(--text-bright) 30%, #ffffff 50%, var(--text-bright) 70%, var(--text-bright) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShimmer 3.6s ease-in-out infinite;
}
/* "Klik" tekst — zlatni shimmer */
.nav-logo strong {
    background: linear-gradient(90deg, #B8860B 0%, #D4A017 30%, #F5D442 50%, #D4A017 70%, #B8860B 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShimmer 3.6s ease-in-out infinite;
}
@keyframes textShimmer {
    0%, 100% { background-position: 200% 0; }
    50%      { background-position: -100% 0; }
}


/* Spinning wheels */
.wheel {
    transform-box: fill-box;
    transform-origin: center;
    animation: wheelSpin 2.5s linear infinite;
}

@keyframes wheelSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.nav-search {
    flex: 1;
    max-width: 400px;
    display: flex;
    background: rgba(18, 18, 38, 0.4);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 30px;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
    position: relative; /* anchor for dropdown */
}

.nav-search:focus-within {
    border-color: var(--primary);
}

.nav-search input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 18px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    border-radius: 30px 0 0 30px;
}

.nav-search input::placeholder { color: var(--text-muted); }

.nav-search button {
    background: var(--primary);
    border: none;
    padding: 10px 16px;
    color: var(--bg-dark);
    cursor: pointer;
    transition: background 0.3s;
    border-radius: 0 30px 30px 0;
    position: relative;
    overflow: hidden;
}

.nav-search button:hover { background: var(--primary-light); }

/* Shimmer sheen preko lupe — dijagonalna traka svjetlosti prelazi preko dugmeta */
.nav-search button::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%);
    background-size: 250% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    animation: searchShimmer 3.4s ease-in-out infinite;
    mix-blend-mode: overlay;
}
@keyframes searchShimmer {
    0%   { background-position: 200% 0; }
    55%  { background-position: -100% 0; }
    100% { background-position: -100% 0; }
}

/* ---- Live search dropdown (profiles + vehicles) ---- */
.nav-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bg-card, #14141e);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    max-height: 380px;
    overflow-y: auto;
    z-index: 2000;
    padding: 6px 0;
}
.nav-search-dropdown.hidden { display: none; }

.nav-search-section {
    padding: 8px 14px 4px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.nav-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s;
}
.nav-search-item:hover {
    background: rgba(212, 160, 23, 0.08);
}
.nav-search-item .ns-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.2rem;
    flex-shrink: 0;
}
.nav-search-item .ns-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nav-search-item .ns-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.nav-search-item .ns-name {
    color: var(--text-bright, #fff);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-search-item .ns-city {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-top: 2px;
}
.nav-search-item.nav-search-vehicles .ns-avatar {
    background: rgba(212, 160, 23, 0.15);
}
.nav-search-item.nav-search-vehicles .ns-name {
    color: var(--primary);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.nav-profile-btn {
    flex-shrink: 0;
}

.nav-links > a {
    color: var(--text);
    padding: 8px 8px;
    border-radius: 8px;
    white-space: nowrap;
    font-size: 0.82rem;
    font-weight: 500;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
    white-space: nowrap;
}

.nav-links > a:hover {
    color: var(--primary);
    background: rgba(212, 160, 23, 0.1);
}

.nav-post-btn {
    background: var(--gradient-primary) !important;
    color: var(--bg-dark) !important;
    font-weight: 700 !important;
    border-radius: 30px !important;
    padding: 9px 22px !important;
    box-shadow: 0 2px 12px rgba(212,160,23,0.25);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-post-btn:hover {
    color: var(--bg-dark) !important;
    filter: brightness(1.15);
    box-shadow: 0 6px 24px rgba(212,160,23,0.45);
    transform: translateY(-2px);
}

.nav-auth-guest-wrap {
    margin-left: auto;
    flex-shrink: 0;
}

.nav-auth {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-login {
    color: var(--text) !important;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    white-space: nowrap;
}

.btn-register {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary) !important;
    padding: 7px 14px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.btn-register:hover {
    background: var(--primary);
    color: var(--bg-dark) !important;
}

.btn-dashboard {
    color: var(--primary) !important;
    font-weight: 600;
    font-size: 1.05rem;
    padding: 8px 6px;
}

.btn-dashboard i {
    font-size: 1.7rem;
}

.btn-logout {
    color: var(--text-muted) !important;
    padding: 8px 6px;
    font-size: 1.2rem;
}

.btn-logout:hover { color: var(--danger) !important; }

/* ==================== THEME SLIDE TOGGLE (navbar) ==================== */
.theme-slide {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 8px;
    -webkit-tap-highlight-color: transparent;
}
.theme-slide-track {
    width: 56px;
    height: 28px;
    background: #1a1a30;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 30px;
    position: relative;
    display: inline-block;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);
    overflow: hidden;
}
/* Dijagonalni shimmer sheen — prelazi preko cijelog track-a svakih par
   sekundi, vidljiv iznad scene ali ispod thumb-a (z-index logika). */
.theme-slide-track > span:not(.theme-slide-thumb)::before,
.theme-slide::after {
    /* nema */
}
.theme-slide {
    position: relative;
    overflow: visible;
}
.theme-slide::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 56px; height: 28px;
    border-radius: 30px;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.35) 50%, transparent 65%);
    background-size: 250% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 3;
    animation: trackShimmer 4s ease-in-out infinite;
    mix-blend-mode: overlay;
}
@keyframes trackShimmer {
    0%   { background-position: 200% 0; }
    55%  { background-position: -100% 0; }
    100% { background-position: -100% 0; }
}

/* DAY ambijent — plavo nebo sa sunčevim sjajem iz lijeve strane + pahuljasti
   oblaci koji prekrivaju donju polovinu cijele pile (i iza sunca i desno). */
.theme-slide-track::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' preserveAspectRatio='none'%3E%3Cdefs%3E%3CradialGradient id='dbg' cx='20%25' cy='50%25' r='110%25'%3E%3Cstop offset='0' stop-color='%23E8F4FC'/%3E%3Cstop offset='0.45' stop-color='%23A8D5F0'/%3E%3Cstop offset='1' stop-color='%235FA8D4'/%3E%3C/radialGradient%3E%3ClinearGradient id='cG' gradientUnits='userSpaceOnUse' x1='0' y1='15' x2='0' y2='28'%3E%3Cstop offset='0' stop-color='%23FFFFFF' stop-opacity='0.55'/%3E%3Cstop offset='0.5' stop-color='%23FFFFFF' stop-opacity='0.92'/%3E%3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='56' height='28' fill='url(%23dbg)'/%3E%3Cpath d='M56 6 L56 14 L34 28 L22 28 Z' fill='%23FFFFFF' opacity='0.08'/%3E%3Cpath d='M56 2 L56 8 L42 28 L34 28 Z' fill='%23FFFFFF' opacity='0.06'/%3E%3Cg fill='url(%23cG)'%3E%3Crect x='0' y='22' width='56' height='6'/%3E%3Ccircle cx='3' cy='22' r='3'/%3E%3Ccircle cx='8' cy='20' r='3.5'/%3E%3Ccircle cx='14' cy='21' r='3'/%3E%3Ccircle cx='20' cy='19' r='4'/%3E%3Ccircle cx='27' cy='20.5' r='3.2'/%3E%3Ccircle cx='33' cy='18' r='4.2'/%3E%3Ccircle cx='40' cy='19.5' r='3.8'/%3E%3Ccircle cx='46' cy='17.5' r='4'/%3E%3Ccircle cx='52' cy='19' r='3.5'/%3E%3Ccircle cx='6' cy='24' r='2.2'/%3E%3Ccircle cx='12' cy='23.5' r='2.5'/%3E%3Ccircle cx='18' cy='24' r='2'/%3E%3Ccircle cx='24' cy='23' r='2.3'/%3E%3Ccircle cx='30' cy='23.5' r='2'/%3E%3Ccircle cx='36' cy='22.5' r='2.5'/%3E%3Ccircle cx='42' cy='23' r='2.2'/%3E%3Ccircle cx='48' cy='22' r='2.3'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* NIGHT ambijent — dubok navy→ljubičasti gradient svjetliji prema desno (gdje
   mjesec svijetli), sparkle zvijezde i tačkice po lijevoj polovini. */
.theme-slide-track::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' preserveAspectRatio='none'%3E%3Cdefs%3E%3CradialGradient id='nbg' cx='85%25' cy='50%25' r='100%25'%3E%3Cstop offset='0' stop-color='%234A4570'/%3E%3Cstop offset='0.35' stop-color='%232A2850'/%3E%3Cstop offset='1' stop-color='%23080618'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='56' height='28' fill='url(%23nbg)'/%3E%3Cg fill='%23FFFFFF'%3E%3Cpath d='M10 8 L10.8 10.3 L13.1 11 L10.8 11.7 L10 14 L9.2 11.7 L6.9 11 L9.2 10.3 Z'/%3E%3Cpath d='M17 17.5 L17.6 19.2 L19.3 19.8 L17.6 20.4 L17 22.1 L16.4 20.4 L14.7 19.8 L16.4 19.2 Z' opacity='0.9'/%3E%3Cpath d='M24 5.5 L24.3 6.5 L25.3 6.8 L24.3 7.1 L24 8.1 L23.7 7.1 L22.7 6.8 L23.7 6.5 Z' opacity='0.85'/%3E%3Cpath d='M5 19.5 L5.3 20.5 L6.3 20.8 L5.3 21.1 L5 22.1 L4.7 21.1 L3.7 20.8 L4.7 20.5 Z' opacity='0.8'/%3E%3Ccircle cx='4' cy='11' r='0.55'/%3E%3Ccircle cx='14' cy='5' r='0.45'/%3E%3Ccircle cx='22' cy='13' r='0.5' opacity='0.9'/%3E%3Ccircle cx='27' cy='20' r='0.45' opacity='0.85'/%3E%3Ccircle cx='12' cy='22' r='0.55' opacity='0.95'/%3E%3Ccircle cx='20' cy='25' r='0.4' opacity='0.75'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 1;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.theme-slide-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #F5D442, #D4A017);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
    z-index: 2; /* iznad ::before (dan) i ::after (noć) pseudo-elemenata */
}
.theme-slide-thumb i {
    font-size: 0.65rem;
    color: #0a0a14;
    transition: transform 0.3s ease;
}
/* Dark theme active — mjesec sa kraterima, thumb desno, noćna scena vidljiva */
[data-theme="dark"] .theme-slide-track::before { opacity: 0; }  /* sakrij dan */
[data-theme="dark"] .theme-slide-track::after  { opacity: 1; }  /* pokaži noć */
[data-theme="dark"] .theme-slide-thumb {
    left: calc(100% - 24px);
    /* Mjesec: bijeli krug + 3 jasna kratera (mali gore-lijevo, veliki
       srednji desno, srednji dolje). Tačno kao na referentnoj slici. */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='11' fill='%23F5F5F8'/%3E%3Ccircle cx='7.5' cy='7' r='1.3' fill='%23BFBFCC'/%3E%3Ccircle cx='14.5' cy='12' r='2.3' fill='%23BFBFCC'/%3E%3Ccircle cx='13.5' cy='16' r='1.4' fill='%23BFBFCC'/%3E%3C/svg%3E") center/cover no-repeat;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 14px rgba(220,225,255,0.3);
    animation: moonBreathe 4s ease-in-out infinite;
}
@keyframes moonBreathe {
    0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 12px rgba(220,225,255,0.3); }
    50%      { box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 22px rgba(230,235,255,0.55); }
}
[data-theme="dark"] .theme-slide-track::after {
    animation: starTwinkle 3.5s ease-in-out infinite;
}
@keyframes starTwinkle {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.25); }
}
[data-theme="dark"] .theme-slide-thumb i {
    /* sakriven je — SVG mjesec zamjenjuje ikonu */
    opacity: 0;
    transform: rotate(-360deg);
}

/* Light theme — sunce sa sjajem, thumb lijevo, dnevna scena vidljiva */
[data-theme="light"] .theme-slide-track {
    border: none;
    background: #A8D5F0;  /* sky blue — ista boja kao gornji dio dnevne scene */
    box-shadow: none;
}
[data-theme="light"] .theme-slide-track::before { opacity: 1; }  /* pokaži dan */
[data-theme="light"] .theme-slide-track::after  { opacity: 0; }  /* sakrij noć */
[data-theme="light"] .theme-slide-thumb {
    /* Sunce: ravno žuto, bez gradijenta — tačno kao na referentnoj slici. */
    background: #F2D640;
    box-shadow: 0 0 8px rgba(255,215,50,0.5), 0 2px 5px rgba(184,120,0,0.3), inset 0 -1px 0 rgba(200,150,0,0.15);
    animation: sunRadiate 2.8s ease-in-out infinite;
}
@keyframes sunRadiate {
    0%, 100% { box-shadow: 0 0 8px rgba(255,215,50,0.5),  0 2px 5px rgba(184,120,0,0.3), inset 0 -1px 0 rgba(200,150,0,0.15); }
    50%      { box-shadow: 0 0 18px rgba(255,215,50,0.85), 0 2px 5px rgba(184,120,0,0.4), inset 0 -1px 0 rgba(200,150,0,0.2); }
}
[data-theme="light"] .theme-slide-thumb i {
    /* sakriven je — SVG sunce zamjenjuje ikonu */
    opacity: 0;
}

.hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 30px;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
    flex-shrink: 0;
}
.hamburger:hover {
    border-color: var(--primary);
    color: var(--primary);
}
/* Hide desktop nav items — all moved to hamburger menu */
.nav-links > a,
.nav-icons,
.nav-auth,
.nav-profile-btn {
    display: none !important;
}
/* Mobile menu as slide-in side panel on desktop */
@media (min-width: 769px) {
    .mobile-menu {
        position: fixed;
        top: 90px;
        right: 20px;
        width: 340px;
        max-height: calc(100vh - 110px);
        height: auto;
        border-radius: var(--radius);
        border: 1px solid var(--glass-border);
        box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        overflow-y: auto;
        z-index: 999;
    }
}

.hamburger .notif-badge {
    position: absolute;
    top: 2px;
    right: 0;
    font-size: 0.6rem;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: var(--danger);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* Mobile menu */
/* Backdrop iza mobile menu-a — sakriva sve oglase i sadrzaj koji vire iznad i kroz navbar.
   SAMO na telefonu (≤ 768px), jer je na desktopu meni side-panel pa sadrzaj
   pored njega ne smeta. Na desktopu se vidi normalno bez zamračenja. */
@media (max-width: 768px) {
    body.body-scroll-locked::before {
        content: '';
        position: fixed;
        inset: 0;
        background: var(--bg-dark);
        z-index: 999;            /* taman ispod navbar-a (1000) */
        pointer-events: none;
    }
}

.mobile-menu {
    padding: 10px 16px 160px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--bg-dark);
    /* Fallback for older browsers */
    height: calc(100vh - 60px);
    max-height: calc(100vh - 60px);
    /* Dynamic viewport height — accounts for mobile browser URL bar / bottom nav */
    height: calc(100dvh - 60px);
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}
.mobile-menu::-webkit-scrollbar {
    width: 5px;
}
.mobile-menu::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 3px;
}
.mobile-menu::-webkit-scrollbar-track {
    background: transparent;
}

.mobile-menu-section-title {
    color: #D4A017;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 8px 4px;
}

.btn-auth-prompt {
    margin-top: 18px;
    background: transparent;
    color: var(--primary);
    border: 1.5px solid var(--primary);
    padding: 9px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    font-family: inherit;
}
.btn-auth-prompt:hover {
    background: var(--primary);
    color: #0a0a14;
}
.btn-auth-prompt i {
    font-size: 0.8rem;
}
.mobile-menu-section-title:first-child {
    padding-top: 4px;
}

.mobile-menu-logout {
    margin-top: 10px;
    border-top: 1px solid var(--border);
    padding-top: 14px !important;
    color: var(--danger) !important;
}

/* Lock body scroll when mobile menu is open, but allow menu itself to scroll */
body.body-scroll-locked {
    overflow: hidden;
    touch-action: none;
}
body.body-scroll-locked .mobile-menu {
    touch-action: pan-y;
}

.mobile-menu a {
    color: var(--text);
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 0.92rem;
    /* Blago uokvirenje — suptilan border + lagana pozadina */
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: background 0.25s ease, border-color 0.25s ease,
                color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}
.mobile-menu a > i:first-child {
    color: var(--primary);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.mobile-menu a:hover,
.mobile-menu a:active {
    background: rgba(212, 160, 23, 0.08);
    border-color: rgba(212, 160, 23, 0.35);
    color: var(--primary);
    box-shadow: 0 4px 14px rgba(212, 160, 23, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: translateX(2px);
}
.mobile-menu a:hover > i:first-child {
    transform: scale(1.1);
}

/* Light tema — drugaciji kontrast i suptilnije sjenke */
[data-theme="light"] .mobile-menu a {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
[data-theme="light"] .mobile-menu a:hover,
[data-theme="light"] .mobile-menu a:active {
    background: rgba(212, 160, 23, 0.10);
    border-color: rgba(212, 160, 23, 0.45);
    box-shadow: 0 4px 14px rgba(212, 160, 23, 0.18);
}

/* Badge counter unutar stavke mobilnog menija.
   Prikazuje se kao mali crveni "pill" desno od teksta (ne apsolutno
   pozicioniran kao .notif-badge na desktop ikonama). */
.mobile-menu-badge {
    margin-left: auto;
    background: var(--danger);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ==================== HERO ==================== */
.hero {
    padding: 140px 20px 80px;
    background: rgba(15, 15, 26, 0.25);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -30%; right: -20%;
    width: 70%; height: 160%;
    background: radial-gradient(ellipse, rgba(212,160,23,0.07) 0%, transparent 55%);
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 200px;
    background: linear-gradient(to top, var(--bg-dark), transparent);
    pointer-events: none;
}

.hero-content {
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero h1 {
    font-size: 3.2rem;
    font-weight: 900;
    color: var(--text-bright);
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.hero h1 span {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero > .hero-content > p {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 40px;
}

/* Hero Search */
.hero-search {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
    background: rgba(14, 14, 28, 0.45);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 22px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 80px rgba(0,0,0,0.4);
}

.hero-search select,
.hero-search input {
    flex: 1;
    min-width: 140px;
    padding: 12px 16px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.3s;
}

.hero-search select:focus,
.hero-search input:focus {
    border-color: var(--primary);
}

.hero-search-btn {
    padding: 12px 30px;
    background: var(--gradient-primary);
    color: var(--bg-dark);
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 16px rgba(212,160,23,0.3);
}

.hero-search-btn:hover {
    filter: brightness(1.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(212,160,23,0.5);
}

/* ==================== SECTION HEADERS ==================== */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 10px;
}

.section-header h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-bright);
}

.section-header h2 i {
    color: var(--primary);
    margin-right: 10px;
}

.listings-count {
    font-size: 0.9rem;
    font-weight: 700;
    background: linear-gradient(135deg, #F5D442 0%, #D4A017 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.badge-promoted {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: var(--bg-dark);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Sort controls */
.sort-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.sort-controls select {
    padding: 8px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
    min-width: 180px;
}
#filter-seller-type {
    min-width: 200px;
}
/* Custom-select wrap-ovi za filtere sortiranja — dovoljno siroki za labele */
.sort-controls .custom-select-wrap { min-width: 180px; flex: 0 0 auto; }
.sort-controls .custom-select-wrap:has(#filter-seller-type) { min-width: 210px; }

/* Mobilni: oba filtera u istom redu, dijele dostupnu sirinu */
@media (max-width: 768px) {
    .sort-controls {
        flex-wrap: nowrap;
        width: 100%;
    }
    .sort-controls select,
    .sort-controls #filter-seller-type {
        min-width: 0;
        width: 100%;
    }
    .sort-controls .custom-select-wrap,
    .sort-controls .custom-select-wrap:has(#filter-seller-type) {
        min-width: 0;
        flex: 1 1 0;
        width: auto;
    }
    .sort-controls .custom-select-btn {
        font-size: 0.78rem;
        padding: 0 26px 0 10px;
    }
}

/* Filters bar */
.filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
    padding: 18px;
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius);
    border: 1px solid var(--glass-border);
    border-top: 2px solid rgba(212,160,23,0.3);
    transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.35s ease, margin 0.35s ease;
    overflow: visible;
}

.filters-bar.collapsed {
    max-height: 0;
    opacity: 0;
    padding: 0 18px;
    margin-bottom: 0;
    border-color: transparent;
    overflow: hidden;
}

.filters-bar select,
.filters-bar input {
    flex: 1 1 180px;
    min-width: 160px;
    height: 40px;
    padding: 0 14px;
    box-sizing: border-box;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1;
    outline: none;
    transition: border-color 0.3s;
}
.filters-bar .custom-select-wrap {
    flex: 1 1 180px;
    min-width: 160px;
}

.filters-bar select:focus,
.filters-bar input:focus {
    border-color: var(--primary);
}

/* Donji red sa dugmadima — Očisti lijevo, Pretraži+Sačuvaj desno */
.filter-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    flex-basis: 100%;
    gap: 10px;
    margin-top: 10px;
}

/* Stack za Pretraži + Sačuvaj filter — desno, kolona */
.filter-action-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    align-items: stretch;
}
.filter-action-stack .btn-search-filters,
.filter-action-stack .btn-save-filter {
    margin: 0;
}

/* Mobilni: bottom row stack-uje vertikalno, Sačuvaj iznad Očisti */
@media (max-width: 768px) {
    .filter-bottom-row {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-action-stack {
        width: 100%;
    }
    .filter-bottom-row .btn-save-filter { order: 1; }
    .filter-bottom-row .btn-clear-filters { order: 2; }
}

.btn-clear-filters {
    padding: 10px 18px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-save-filter {
    padding: 10px 18px;
    background: transparent;
    border: 1px solid rgba(212,160,23,0.4);
    border-radius: var(--radius-sm);
    color: var(--primary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-save-filter:hover {
    background: var(--primary);
    color: #0a0a14;
}
.btn-save-filter i { margin-right: 6px; }

/* "Pretraži" dugme — primarni call-to-action, ista sirina kao "Sačuvaj filter" */
.btn-search-filters {
    flex: 0 0 auto;
    width: 200px;
    height: 40px;
    padding: 0 18px;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    color: #0a0a14;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.3s, opacity 0.3s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-save-filter {
    width: 200px;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .btn-search-filters,
    .btn-save-filter {
        width: 100%;
    }
}
.btn-search-filters:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(212,160,23,0.4);
}
.btn-search-filters i { margin-right: 6px; }

/* "Otvori filtere" toggle dugme — pojavljuje se kad su filteri sakriveni */
.btn-show-filters {
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    color: var(--primary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    margin-top: 16px;
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Sirina TACNO kao jedna slikovna kartica (9 kategorija, 8 gap-ova od 8px) */
    width: calc((100% - 64px) / 9);
    max-width: 100%;
}
.btn-show-filters:hover {
    background: var(--primary);
    color: #0a0a14;
}
@media (max-width: 768px) {
    .btn-show-filters {
        width: 33%;             /* sirina jedne kartice u 3-kolonskom gridu */
        margin-top: 14px;
        font-size: 0.75rem;
        padding: 8px 6px;
    }
}

/* Save-star button on user profile */
.profile-save-star {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--glass-border);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
    z-index: 2;
}
.profile-save-star:hover {
    color: var(--primary);
    border-color: var(--primary);
    transform: scale(1.08);
}
.profile-save-star.active {
    color: var(--primary);
    background: rgba(212,160,23,0.15);
    border-color: var(--primary);
}
.profile-header-card { position: relative; }

/* Saved profiles grid + cards */
.saved-profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}
.saved-profile-card {
    position: relative;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s, border-color 0.25s, color 0.25s, opacity 0.25s;
    box-shadow: var(--glass-inset);
}
.saved-profile-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--glass-inset), 0 8px 24px rgba(212,160,23,0.15);
}
.saved-profile-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(231,76,60,0.15);
    border: none;
    color: var(--danger);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background 0.2s;
}
.saved-profile-remove:hover { background: rgba(231,76,60,0.35); }
.saved-profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-section);
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid var(--primary);
}
.saved-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.saved-profile-avatar i { font-size: 2.2rem; color: var(--primary); }
.saved-profile-name {
    color: var(--text-bright);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 4px;
    word-wrap: break-word;
}
.saved-profile-biz {
    color: var(--text-bright);
    font-size: 0.78rem;
    margin: 3px 0;
}
.saved-profile-biz i { color: var(--primary); margin-right: 4px; }
.saved-profile-type {
    color: var(--text-muted);
    font-size: 0.72rem;
    margin-bottom: 4px;
}
.saved-profile-city {
    color: var(--text-muted);
    font-size: 0.75rem;
}
.saved-profile-verified {
    margin-top: 8px;
    display: inline-block;
    background: rgba(212,160,23,0.12);
    border: 1px solid rgba(212,160,23,0.3);
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}
.saved-profile-verified i { margin-right: 3px; }

/* Saved filter cards */
.saved-filter-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin-bottom: 8px;
    transition: border-color 0.2s;
}
.saved-filter-card:hover { border-color: var(--primary); }
.saved-filter-info {
    flex: 1;
    cursor: pointer;
    min-width: 0;
}
.saved-filter-label {
    color: var(--text-bright);
    font-weight: 600;
    font-size: 0.9rem;
    word-wrap: break-word;
}
.saved-filter-date {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 4px;
}

.btn-clear-filters:hover {
    border-color: var(--danger);
    color: var(--danger);
}

/* ==================== MULTI-SELECT FILTER DROPDOWN ==================== */
.multi-select-wrap {
    position: relative;
    flex: 1;
    min-width: 110px;
}

.multi-select-btn {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    outline: none;
    transition: border-color 0.3s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.multi-select-btn:focus,
.multi-select-btn.open {
    border-color: var(--primary);
}

/* Aktivan multi-select filter (ima izabranih opcija) — zlatni akcenat */
.multi-select-btn.has-selection {
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

/* Adresar traka — pun red ispod grida kategorija (s kraja na kraj) */
.adresar-bar {
    /* Mreza kategorija (.category-items) ima padding 9px 5px, pa Adresar
       uvlacimo za istih 5px sa strane — da ide tacno od prve do trece kolone. */
    width: calc(100% - 10px);
    margin: 8px 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 16px;
    background: var(--glass, rgba(255,255,255,0.04));
    border: 1px solid var(--glass-border, rgba(212,160,23,0.35));
    border-radius: var(--radius, 12px);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .3s, color .3s, background-color .3s;
}
.adresar-bar i { color: var(--primary); font-size: 1.1rem; }
.adresar-bar:hover { border-color: var(--primary); color: var(--primary); background: rgba(212,160,23,0.08); }
/* U svijetloj temi isti izgled kao kartice kategorija iznad (bijela podloga,
   zlatni tanki okvir, ista sjenka, tamniji tekst) — ranije je bio providan i
   sivkast pa je djelovao "zakamuflirano". */
[data-theme="light"] .adresar-bar {
    background: #FFFFFF;
    border: 1px solid rgba(184, 134, 11, 0.12);
    color: var(--text);
    box-shadow: 0 2px 8px rgba(130,95,20,0.08), inset 0 1px 0 rgba(255,255,255,1);
}
[data-theme="light"] .adresar-bar:hover { box-shadow: 0 6px 16px rgba(184,134,11,0.2); }
@media (max-width: 560px){ .adresar-bar span { font-size: 0.78rem; } }

/* Rent-A-Car: grid gradova dostupnosti (checkbox mreža) u formi za objavu */
.cities-multi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 4px;
}
.rentacar-city-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: var(--bg-section, #14141c);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: border-color .2s, background-color .2s;
}
.rentacar-city-check:hover { border-color: var(--primary); }
.rentacar-city-check input { accent-color: var(--primary); width: 16px; height: 16px; }
.rentacar-city-check:has(input:checked) { border-color: var(--primary); background: rgba(212,160,23,0.1); }

/* Pretraga u custom dropdown-u (marke, modeli — velike liste) */
.cs-search-wrap {
    position: sticky;
    top: 0;
    background: var(--bg-dark);
    padding: 8px;
    border-bottom: 1px solid rgba(212,160,23,0.25);
    z-index: 2;
}
.cs-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    background: var(--bg-section, #14141c);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
}
.cs-search-input:focus { border-color: var(--primary); }

/* Ručni upis modela na vrhu model-dropdown-a (filter) */
.ms-manual-wrap {
    position: sticky;
    top: 0;
    background: var(--bg-dark);
    padding: 8px;
    border-bottom: 1px solid rgba(212,160,23,0.25);
    z-index: 1;
}
.ms-manual-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    background: var(--bg-section, #14141c);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
}
.ms-manual-input:focus { border-color: var(--primary); }

/* "USKORO" bedž na plaćenim planovima (plaćanje još nije aktivno) */
.plan-option { position: relative; }
.plan-option.plan-soon .plan-option-content { opacity: 0.55; }
.plan-soon-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gradient-primary, linear-gradient(135deg,#F5D442,#B8860B));
    color: #000;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 6px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.multi-select-btn .ms-arrow {
    font-size: 0.6em;
    opacity: 0.5;
    flex-shrink: 0;
}

.multi-select-dropdown {
    display: none;
    position: fixed;
    max-height: 320px;
    overflow-y: auto;
    background: var(--bg-dark);
    border: 1px solid rgba(212,160,23,0.4);
    border-radius: var(--radius-sm);
    z-index: 99999;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 12px rgba(212,160,23,0.08);
    scrollbar-width: thin;
    scrollbar-color: var(--primary-dark) transparent;
}

.multi-select-dropdown::-webkit-scrollbar { width: 6px; }
.multi-select-dropdown::-webkit-scrollbar-track { background: transparent; }
.multi-select-dropdown::-webkit-scrollbar-thumb { background: var(--primary-dark); border-radius: 3px; }

.multi-select-dropdown.open {
    display: block;
}

.multi-select-dropdown label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 28px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text);
    transition: background 0.15s;
    position: relative;
}

.multi-select-dropdown label:hover {
    background: rgba(212,160,23,0.06);
    color: var(--text-bright);
}

/* Custom checkbox */
.multi-select-dropdown input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 1.5px solid var(--text-muted);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
}

.multi-select-dropdown input[type="checkbox"]:checked {
    background: var(--primary);
    border-color: var(--primary);
}

.multi-select-dropdown input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: -1px;
    left: 2px;
    font-size: 12px;
    color: #000;
    font-weight: 700;
}

.multi-select-dropdown label:has(input:checked) {
    background: rgba(212,160,23,0.08);
    color: var(--text-bright);
}

/* Group header — clickable to select/deselect all */
.ms-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary);
    letter-spacing: 0.8px;
    background: rgba(212,160,23,0.05);
    border-top: 1px solid rgba(212,160,23,0.15);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.ms-group-header:first-child {
    border-top: none;
}

.ms-group-header:hover {
    background: rgba(212,160,23,0.12);
}

.ms-group-header .ms-group-toggle {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.ms-group-header.all-checked .ms-group-toggle {
    color: var(--primary);
}

/* ==================== VEHICLE CARDS ==================== */
.vehicles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

@media (min-width: 1200px) {
    .vehicles-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.vehicle-card {
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    position: relative;
}

.vehicle-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.45);
    border-color: rgba(212,160,23,0.3);
    background: rgba(18, 18, 38, 0.7);
}

/* Paketi na karticama — bez okvira u boji (bedž je dovoljan indikator) */
.vehicle-card.fresh,
.vehicle-card.promoted,
.vehicle-card.premium {
    /* koristi default border iste kao obične kartice */
}

.card-badge {
    position: absolute;
    top: 10px; left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
    text-shadow: none;
    z-index: 5;
    /* Ista podloga kao dugme sa srcem u gornjem desnom uglu kartice, da sve
       sto stoji preko slike izgleda kao jedna porodica. Vrijednosti su
       namjerno prepisane iz `.card-fav-btn` — ako se tamo mijenjaju, promijeniti
       i ovdje. Bedzevi se razlikuju samo ikonom i akcentom, ne podlogom. */
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.75);
}
.card-badge i { font-size: 0.58rem; line-height: 1; }

/* NOVO — zelena tackica umjesto ikone. */
.card-badge.badge-new::before {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3DDC84;
    box-shadow: 0 0 6px rgba(61, 220, 132, 0.75);
}

/* ISTAKNUTO — zvjezdica; podloga i slova su zajednicki, odozgo. */

/* PREMIUM — bez okvira; razlikuje ga samo zlatna kruna i slova. */
.card-badge.badge-premium {
    color: var(--primary-light);
}
.card-badge.badge-premium i { color: var(--primary); }

/* Card favorite heart */
.card-fav-btn {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 6;
    background: rgba(0,0,0,0.45);
    border: none;
    color: rgba(255,255,255,0.75);
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
    /* Performance: eliminiše "300ms tap delay" na mobile browser-ima i
       promovira transform na GPU sloj — animacija skaliranja više ne blokira
       opening modala. Vizuelno identično. */
    touch-action: manipulation;
    will-change: transform;
}
.card-fav-btn:active { transform: scale(0.85); }
/* Hover efekat samo na uredjajima sa pravim hover-om (mis), ne na touch */
@media (hover: hover) {
    .card-fav-btn:hover {
        color: var(--danger);
        background: rgba(0, 0, 0, 0.55);
        transform: scale(1.08);
        box-shadow: 0 4px 14px rgba(220, 53, 69, 0.35);
    }
}
.card-fav-btn.card-fav-active {
    color: var(--danger);
    background: rgba(0,0,0,0.55);
}

/* Touch uredjaji — boja heart-a je iskljucivo iz card-fav-active klase.
   Hover/focus/active states ne smiju da menjaju boju (sticky hover bug). */
@media (hover: none) {
    .card-fav-btn,
    .card-fav-btn:hover,
    .card-fav-btn:focus,
    .card-fav-btn:active,
    .card-fav-btn:focus-visible {
        color: rgba(255, 255, 255, 0.75) !important;
        background: rgba(0, 0, 0, 0.45) !important;
        box-shadow: none !important;
    }
    .card-fav-btn.card-fav-active,
    .card-fav-btn.card-fav-active:hover,
    .card-fav-btn.card-fav-active:focus,
    .card-fav-btn.card-fav-active:active,
    .card-fav-btn.card-fav-active:focus-visible {
        color: var(--danger) !important;
        background: rgba(0, 0, 0, 0.55) !important;
    }
    /* Isto kao u tamnom modu — vidi obrazlozenje uz .card-fav-btn gore. */
    [data-theme="light"] .card-fav-btn,
    [data-theme="light"] .card-fav-btn:hover,
    [data-theme="light"] .card-fav-btn:focus,
    [data-theme="light"] .card-fav-btn:active {
        color: rgba(255, 255, 255, 0.75) !important;
        background: rgba(0, 0, 0, 0.45) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    }
    [data-theme="light"] .card-fav-btn.card-fav-active,
    [data-theme="light"] .card-fav-btn.card-fav-active:hover,
    [data-theme="light"] .card-fav-btn.card-fav-active:focus,
    [data-theme="light"] .card-fav-btn.card-fav-active:active {
        color: var(--danger) !important;
        background: rgba(0, 0, 0, 0.55) !important;
    }
}

/* Vehicle card kao <a> link — uklanja defaultne podvlake */
.vehicle-card { text-decoration: none; color: inherit; }
.vehicle-card:visited { color: inherit; }

/* Verified inline badge */
.card-price-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.card-verified-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.card-verified-inline i { color: var(--text-muted); }

/* Verifikovan badge — uvijek paralelno sa cijenom (i mobilni i desktop) */
.card-meta-verified {
    display: none !important;
}

.card-image {
    width: 100%;
    height: 235px;
    background: var(--bg-section);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.card-image::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 50%;
    background: linear-gradient(to top, rgba(10,10,20,0.4), transparent);
    pointer-events: none;
    z-index: 1;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* BEZ image-rendering: -webkit-optimize-contrast — u Chrome-u to pri
       uvećanju slike ne zaglađuje, pa slike u karticama izgledaju pikselizovano. */
}

.vehicle-card:hover .card-image img {
    transform: scale(1.06);
}

.card-image .placeholder-img {
    font-size: 4rem;
    color: var(--border);
}

.card-image .photo-count {
    position: absolute;
    bottom: 8px; right: 8px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 3px 10px;
    border-radius: 15px;
    font-size: 0.75rem;
}

/* Verifikovan badge na slici (samo mobilni) — diskretan check icon */
.card-verified-img-badge {
    display: inline-flex;
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: var(--text-muted);
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.1);
}
.card-verified-img-badge i { font-size: 0.95rem; }
[data-theme="light"] .card-verified-img-badge {
    background: rgba(255, 255, 255, 0.35);
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
@media (max-width: 768px) {
    /* Sakrij tekstualni "Verifikovan" pill iz card-price-tags na mobilnom */
    .card-price-tags .card-verified-inline { display: none !important; }
}
/* Tekstualni "Verifikovan" pill se ne prikazuje vise na karticama —
   svuda koristimo ikonski badge na slici. */
.card-price-tags .card-verified-inline { display: none !important; }

.card-body {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 9px;
}

@media (min-width: 769px) {
    .card-specs {
        grid-template-columns: 1fr 1fr;
    }
    .card-spec {
        padding: 4px 6px;
    }
    .card-specs {
        column-gap: 0;
    }
    .card-specs::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        background: rgba(255,255,255,0.12);
    }
    .card-specs {
        position: relative;
    }
    .card-spec:nth-child(2n) {
        padding-left: 12px;
    }
}

.card-spec {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--text-muted);
    background: var(--bg-dark);
    padding: 3px 7px;
    border-radius: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.card-spec i {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.card-spec-empty {
    color: transparent;
    border: 1px dashed rgba(255,255,255,0.06);
    background: transparent;
}

.card-footer {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    margin-top: auto;
}

.card-price {
    font-size: 1.3rem;
    font-weight: 800;
    background: linear-gradient(
        90deg,
        #B8B8C0 0%,
        #FFFFFF 50%,
        #B8B8C0 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Tags + meta row — Fiksno/Po dogovoru lijevo, Lokacija + Prije X dana desno */
.card-tags-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 4px;
    gap: 8px;
}

.card-footer .card-meta {
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.7rem;
}

.card-meta-left {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.card-price-tags {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.card-price-tag {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 500;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
}

.card-price-tag-exchange {
    color: var(--text-muted);
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
}
.card-price-tag-exchange i { color: var(--text-muted); }

.card-price-tag-no-exchange {
    color: var(--text-muted);
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
}
.card-price-tag-no-exchange i { color: var(--text-muted); }

.card-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: left;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.card-meta .card-location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.card-meta .card-location i { color: var(--text-muted); }

/* "Prije X dana" pill — isti okvir kao Po dogovoru / Zamjena, pill oblik */
.card-meta > span:not(.card-location):not(.card-verified-inline) {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.city-short { display: none; }
.city-full { display: inline; }

@media (max-width: 768px) {
    .city-short { display: inline; }
    .city-full { display: none; }
}

/* ==================== STATS ==================== */
.stats-section {
    background: var(--bg-section);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.stat-card {
    text-align: center;
    padding: 30px 20px;
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius);
    border: 1px solid var(--glass-border);
    transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, opacity 0.4s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow);
    border-color: rgba(212,160,23,0.15);
    background: rgba(18, 18, 38, 0.7);
}

.stat-card i {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 10px;
}

.stat-number {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-bright);
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ==================== AUTH PAGES ==================== */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px 60px;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: rgba(18, 18, 38, 0.6);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: var(--radius-lg);
    padding: 40px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}

.auth-card-wide {
    max-width: 600px;
}

.auth-header {
    text-align: center;
    margin-bottom: 30px;
}

.auth-header h2 {
    font-size: 1.8rem;
    color: var(--text-bright);
    margin-bottom: 8px;
}

.auth-header h2 i { color: var(--primary); }

.auth-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.form-group {
    margin-bottom: 18px;
}

.power-dual-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.power-field {
    flex: 1;
    position: relative;
}

.power-field input[type="number"] {
    width: 100%;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 45px 10px 14px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.3s;
}

.power-field input:focus {
    border-color: var(--primary);
}

.power-unit-label {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    pointer-events: none;
}

.power-equals {
    color: var(--text-muted);
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.form-group label i {
    color: var(--primary);
    margin-right: 6px;
    width: 16px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.15);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

/* ---- Password field with show/hide eye toggle ---- */
.password-wrap {
    position: relative;
    width: 100%;
}
.password-wrap input {
    width: 100%;
    padding-right: 44px !important; /* leave room for the eye icon */
}
.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}
.password-toggle:hover {
    color: var(--primary);
    background: rgba(212, 160, 23, 0.08);
}
.password-toggle:focus {
    outline: none;
    color: var(--primary);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.form-row.form-row-single {
    grid-template-columns: 1fr;
}

.date-picker-row {
    display: flex;
    gap: 10px;
}
.date-picker-row select {
    flex: 1;
}
.ad-unreg-check,
.ad-exchange-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.92rem;
    color: var(--text-secondary, #555);
    cursor: pointer;
    user-select: none;
}
.ad-unreg-check input[type="checkbox"],
.ad-exchange-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--gold, #D4A017);
}

.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.85rem !important;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.btn-primary {
    padding: 12px 28px;
    background: var(--gradient-primary);
    color: var(--bg-dark);
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 16px rgba(212,160,23,0.25);
}

.btn-primary:hover {
    filter: brightness(1.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(212,160,23,0.45);
}

.btn-secondary {
    padding: 12px 28px;
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
}

.btn-secondary:hover {
    background: rgba(212,160,23,0.1);
}

.btn-full { width: 100%; }

/* Reset Password Email Preview */
.reset-email-preview {
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 5px;
}

.reset-email-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}

.reset-email-header i {
    font-size: 1.3rem;
    color: var(--primary);
}

.reset-email-header strong {
    display: block;
    color: var(--text-bright);
    font-size: 0.85rem;
}

.reset-email-header span {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.reset-email-body {
    padding: 15px;
}

.reset-email-body p {
    font-size: 0.85rem;
    color: var(--text);
    margin-bottom: 10px;
    line-height: 1.5;
}

.reset-code-display {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 10px;
    color: var(--primary);
    background: rgba(212, 160, 23, 0.08);
    border: 2px dashed var(--primary);
    border-radius: var(--radius-sm);
    padding: 15px;
    margin: 15px 0;
    font-family: 'Courier New', monospace;
}

/* Phone Verification */
.phone-verify-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.phone-verify-row input[type="tel"] {
    flex: 1;
    width: auto !important;
    min-width: 0;
}

.phone-verify-row .country-code-select {
    width: 90px !important;
    min-width: 90px;
    flex-shrink: 0;
}

.btn-verify-phone {
    background: var(--primary);
    color: #000;
    border: none;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-verify-phone:hover {
    filter: brightness(1.1);
}

.btn-verify-phone:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-verify-phone.verified {
    background: var(--success);
    pointer-events: none;
}

.phone-verify-status {
    font-size: 0.8rem;
    margin-top: 5px;
    min-height: 18px;
}

.phone-verify-status.success {
    color: var(--success);
}

.phone-verify-status.error {
    color: var(--danger);
}

.auth-forgot {
    text-align: center;
    margin-top: 15px;
    font-size: 0.82rem;
}

.auth-forgot a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.auth-forgot a:hover {
    color: var(--primary);
}

.auth-switch {
    text-align: center;
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.auth-switch a { font-weight: 600; }

/* ==================== PRICING ==================== */
.pricing-hero {
    padding: 130px 20px 60px;
    text-align: center;
    background: rgba(15, 15, 26, 0.25);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(212,160,23,0.1);
}

.pricing-hero h1 {
    font-size: 2.5rem;
    color: var(--text-bright);
    margin-bottom: 10px;
}

.pricing-hero p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto 60px;
}

.pricing-card {
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-lg);
    padding: 40px 30px;
    border: 1px solid var(--glass-border);
    text-align: center;
    position: relative;
    transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, opacity 0.4s ease;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 80px rgba(0,0,0,0.4);
    background: rgba(18, 18, 38, 0.7);
}

/* POPULARNO paket (Standard) — SILVER tema */
.pricing-popular {
    border-color: #C0C0C6;
    box-shadow: 0 0 30px rgba(232, 232, 236, 0.15);
    transform: scale(1.05);
}

.pricing-popular:hover {
    transform: scale(1.05) translateY(-5px);
}

/* PREMIUM paket — ZLATO tema */
.pricing-premium {
    border-color: #D4A017;
}

.pricing-badge {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* "Popularno" badge — silver gradient tekst */
.pricing-popular .pricing-badge {
    background: linear-gradient(90deg, #A0A0A8, #FFFFFF, #A0A0A8);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: silverBadgeShimmer 3.5s ease-in-out infinite;
}

/* "Premium" badge — gold gradient tekst */
.pricing-premium .pricing-badge {
    background: linear-gradient(90deg, #8B6914, #F5D56E, #8B6914);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: goldBadgeShimmer 3.5s ease-in-out infinite;
}

/* Ribbon "Preporučeno" na Popularno — silver sa presijavanjem */
.pricing-ribbon {
    position: absolute;
    top: -1px; right: 20px;
    background: linear-gradient(90deg, #A0A0A8 0%, #E8E8EC 25%, #FFFFFF 50%, #E8E8EC 75%, #A0A0A8 100%);
    background-size: 200% 100%;
    color: #2A2418;
    padding: 6px 16px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 0 0 8px 8px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    animation: silverBadgeShimmer 3.5s ease-in-out infinite;
}

.pricing-price {
    margin-bottom: 30px;
}

.price-amount {
    display: block;
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--text-bright);
}

/* Cijena Popularno — silver gradient sa presijavanjem */
.pricing-popular .price-amount {
    background: linear-gradient(90deg, #B8B8C0 0%, #FFFFFF 25%, #E8E8EC 50%, #FFFFFF 75%, #B8B8C0 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: silverBadgeShimmer 4s ease-in-out infinite;
}

/* Cijena Premium — gold gradient sa presijavanjem */
.pricing-premium .price-amount {
    background: linear-gradient(90deg, #8B6914 0%, #D4A017 25%, #F5D56E 50%, #D4A017 75%, #8B6914 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: goldBadgeShimmer 4s ease-in-out infinite;
}

.price-period {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.pricing-features {
    list-style: none;
    text-align: left;
    margin-bottom: 30px;
    flex: 1;
}

.pricing-features li {
    padding: 8px 0;
    font-size: 0.9rem;
    color: var(--text);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.pricing-features li i {
    margin-right: 10px;
    width: 16px;
    text-align: center;
}

.pricing-features li .fa-check { color: var(--success); }
.pricing-features li .fa-times { color: var(--text-muted); }
.pricing-features li.disabled { color: var(--text-muted); opacity: 0.5; }

.color-standard { color: #E8E8EC; }
.color-premium { color: #D4A017; }

.btn-pricing {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 30px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
}

.btn-pricing-free {
    background: transparent;
    border: 2px solid var(--border);
    color: var(--text);
}
.btn-pricing-free:hover {
    border-color: var(--text);
    background: rgba(255,255,255,0.05);
}

/* Standard / Popularno dugme — SILVER */
.btn-pricing-standard {
    background: linear-gradient(135deg, #A0A0A8 0%, #E8E8EC 50%, #A0A0A8 100%);
    color: #2A2418;
    box-shadow: 0 4px 16px rgba(192, 192, 198, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-pricing-standard:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(192, 192, 198, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Premium dugme — ZLATO */
.btn-pricing-premium {
    background: linear-gradient(135deg, #B8860B 0%, #D4A017 50%, #B8860B 100%);
    color: #2A1E00;
    box-shadow: 0 4px 16px rgba(212, 160, 23, 0.35), inset 0 1px 0 rgba(255, 240, 180, 0.4);
    text-shadow: 0 1px 0 rgba(255, 240, 180, 0.4);
}
.btn-pricing-premium:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212, 160, 23, 0.5), inset 0 1px 0 rgba(255, 240, 180, 0.5);
}

/* Pricing info */
.pricing-info {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 40px;
    border: 1px solid var(--border);
}

.pricing-info h3 {
    font-size: 1.3rem;
    color: var(--text-bright);
    margin-bottom: 25px;
}

.pricing-info h3 i { color: var(--primary); margin-right: 10px; }

.pricing-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.info-item {
    text-align: center;
}

.info-item i {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 12px;
}

.info-item h4 {
    color: var(--text-bright);
    margin-bottom: 8px;
}

.info-item p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ==================== POST AD ==================== */
.post-ad-container {
    max-width: 800px;
    margin: 0 auto;
    padding-top: 80px;
}

.post-ad-header {
    text-align: center;
    margin-bottom: 40px;
}

.post-ad-header h1 {
    font-size: 2rem;
    color: var(--text-bright);
    margin-bottom: 8px;
}

.post-ad-header h1 i { color: var(--primary); }

.post-ad-header p { color: var(--text-muted); }

.login-required-box {
    text-align: center;
    padding: 60px 30px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.login-required-box i {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 15px;
}

.login-required-box h3 {
    color: var(--text-bright);
    margin-bottom: 10px;
}

.login-required-box p {
    color: var(--text-muted);
    margin-bottom: 25px;
}

.login-required-btns {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.form-section {
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius);
    padding: 30px;
    margin-bottom: 20px;
    border: 1px solid var(--glass-border);
    border-top: 2px solid var(--primary);
}

.form-section h3 {
    font-size: 1.1rem;
    color: var(--text-bright);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.form-section h3 i { color: var(--primary); margin-right: 10px; }

/* Plan selector */
.plan-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.plan-option {
    display: block;
    cursor: pointer;
    background: var(--bg-dark);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
}

.plan-option:hover { border-color: var(--text-muted); }

.plan-option.active {
    border-color: var(--primary);
    background: rgba(212, 160, 23, 0.08);
}

.plan-option input { display: none; }

.plan-name {
    display: block;
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: 4px;
}

.plan-price {
    display: block;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--primary);
    margin-bottom: 4px;
}

.plan-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Equipment grid */
.equipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.equip-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-dark);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.3s;
}

.equip-check:hover { background: var(--bg-card-hover); }

.equip-check input { accent-color: var(--primary); }

/* Photo upload */
.photo-upload-area {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
    position: relative;
}

.photo-upload-area:hover {
    border-color: var(--primary);
    background: rgba(212, 160, 23, 0.04);
    box-shadow: 0 0 24px rgba(212,160,23,0.06) inset;
}

.photo-upload-area i {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 10px;
}

.photo-upload-area p {
    color: var(--text);
    font-weight: 600;
}

.photo-upload-area span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.photo-upload-area input[type="file"] {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
}

.photo-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.photo-preview-item {
    width: 100px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 2px solid var(--border);
}

.photo-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-preview-item .remove-photo {
    position: absolute;
    top: 2px; right: 2px;
    width: 22px; height: 22px;
    background: var(--danger);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Payment section */
.payment-form {
    max-width: 400px;
}

.payment-summary {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    background: var(--bg-dark);
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.payment-methods {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    font-size: 2rem;
    color: var(--text-muted);
}

.btn-post {
    margin-top: 10px;
    padding: 16px;
    font-size: 1.1rem;
}

/* ==================== VEHICLE DETAIL ==================== */
.vehicle-detail {
    padding-top: 80px;
}

.vd-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 12px;
    gap: 10px;
}
.vd-header .vd-header-left {
    text-align: center !important;
    width: 100%;
}
.vd-header .vd-header-left h1,
.vd-header-left .vd-title {
    text-align: center !important;
    width: 100%;
    display: block;
    margin: 0 auto;
}

.vd-price-wrap {
    margin-bottom: 20px;
}

/* Mobile: right column children (price + seller) flatten into vd-content flow,
   and price gets reordered BEFORE the left column (specs/desc/equip) */
@media (max-width: 768px) {
    .vd-content {
        display: flex;
        flex-direction: column;
    }
    .vd-content > div:nth-child(2) {
        display: contents;
    }
    .vd-content > div:nth-child(2) > .vd-price-wrap {
        order: 1;
    }
    .vd-content > div:nth-child(1) {
        order: 2;
    }
    .vd-content > div:nth-child(2) > .vd-seller {
        order: 3;
    }
    /* Full-width centered price box on mobile */
    .vd-content > div:nth-child(2) > .vd-price-wrap .vd-price-box {
        width: 100%;
        text-align: center;
        border-left: 1px solid rgba(212,160,23,0.2);
        border-top: 3px solid var(--primary);
    }
    .vd-content > div:nth-child(2) > .vd-price-wrap .vd-price-box .vd-negotiable {
        justify-content: center;
    }
}

.vd-title {
    font-size: 1.8rem;
    color: var(--text-bright);
    font-weight: 800;
    line-height: 1.2;
    text-align: center !important;
    width: 100%;
    display: block;
}

.vd-price-box {
    text-align: center;
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(212,160,23,0.2);
    border-top: 3px solid var(--primary);
    border-radius: 12px;
    padding: 16px 20px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    flex-shrink: 0;
}

.vd-price {
    font-size: 2.4rem;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}

.vd-negotiable {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Header spec badges – slightly larger in detail view */
.vd-header .card-specs {
    gap: 10px;
}
.vd-header .card-spec {
    font-size: 0.82rem;
    padding: 5px 12px;
    border: 1px solid var(--border);
}

/* ==================== GALLERY GRID + CAROUSEL ==================== */
.vd-gallery {
    margin-bottom: 30px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.vd-gallery-main {
    overflow: hidden;
    position: relative;
    border-radius: var(--radius-lg);
    height: 450px;
}

.vd-gallery-thumbs { display: none; }

.vd-carousel {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
    background: var(--bg-card);
    user-select: none;
    -webkit-user-select: none;
}

.carousel-track {
    display: flex;
    height: 450px;
    will-change: transform;
    cursor: grab;
    touch-action: pan-y;
}

.carousel-track:active {
    cursor: grabbing;
}

.carousel-slide {
    min-width: 100%;
    height: 450px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.carousel-slide img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
}

.carousel-slide .placeholder-img {
    font-size: 5rem;
    color: var(--border);
}

/* Arrows */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s, opacity 0.2s;
    opacity: 0;
    z-index: 2;
}

.vd-carousel:hover .carousel-arrow {
    opacity: 1;
}

.carousel-arrow:hover {
    background: rgba(0,0,0,0.8);
}

.carousel-prev { left: 12px; }
.carousel-next { right: 12px; }

/* Photo counter */
.vd-photo-count {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0,0,0,0.65);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #fff;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 2;
}
.vd-photo-count:hover { background: rgba(0,0,0,0.85); }

/* Dots indicator */
.carousel-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.carousel-dot.active {
    background: #fff;
    transform: scale(1.3);
}

.carousel-dot:hover {
    background: rgba(255,255,255,0.8);
}

.thumb-more {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
}

/* ==================== LIGHTBOX ==================== */
.lb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.lb-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    z-index: 10;
}
.lb-counter {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
}
.lb-controls {
    display: flex;
    gap: 6px;
}
.lb-controls button {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}
.lb-controls button:hover { background: rgba(255,255,255,0.25); }
.lb-close-btn { background: rgba(220,53,69,0.3) !important; }
.lb-close-btn:hover { background: rgba(220,53,69,0.6) !important; }

.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 10;
}
.lb-nav:hover { background: rgba(255,255,255,0.25); }
.lb-prev { left: 15px; }
.lb-next { right: 15px; }

.lb-img-wrap {
    flex: 1;
    overflow: hidden;
    width: 100%;
    padding: 50px 0 0;
    position: relative;
}

.lb-track {
    display: flex;
    height: 100%;
    will-change: transform;
    touch-action: none;
}

.lb-slide {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    background: #000;
}

.lb-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.lb-thumbs {
    display: flex;
    gap: 8px;
    padding: 10px 20px 15px;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
}
.lb-thumb {
    flex-shrink: 0;
    width: 60px;
    height: 45px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.5;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
}
.lb-thumb.active {
    border-color: var(--primary);
    opacity: 1;
}
.lb-thumb:hover { opacity: 0.8; }
.lb-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .lb-img-wrap { padding: 45px 0 0; }
    .lb-nav { width: 36px; height: 36px; font-size: 1rem; }
    .lb-prev { left: 5px; }
    .lb-next { right: 5px; }
    .lb-thumb { width: 48px; height: 36px; }
}

.vd-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 28px;
}

/* Suggested ads */
.vd-suggested {
    margin-top: 45px;
    padding-top: 30px;
    border-top: 2px solid var(--border);
}
.vd-suggested h3 {
    font-size: 1.2rem;
    color: var(--text-bright);
    margin-bottom: 20px;
}
.vd-suggested h3 i {
    color: var(--primary);
    margin-right: 8px;
}
/* Slični oglasi koriste isti raspored kao početna (.vehicles-grid) — na telefonu 2 u redu. */

.vd-specs {
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius);
    padding: 25px;
    border: 1px solid var(--glass-border);
    border-top: 2px solid var(--primary);
}

.vd-specs h3 {
    font-size: 1.1rem;
    color: var(--text-bright);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.vd-specs h3 i { color: var(--primary); margin-right: 8px; }

.specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.spec-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    background: var(--bg-dark);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary);
}

.spec-item .spec-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.spec-item .spec-value {
    font-weight: 600;
    color: var(--text-bright);
    font-size: 0.95rem;
}

.vd-description {
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius);
    padding: 25px;
    border: 1px solid var(--glass-border);
    border-top: 2px solid var(--primary);
    margin-top: 20px;
}

.vd-description h3 {
    font-size: 1.1rem;
    color: var(--text-bright);
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.vd-description h3 i { color: var(--primary); margin-right: 8px; }

.vd-description p {
    color: var(--text);
    line-height: 1.8;
    white-space: pre-wrap;
}

.vd-equipment {
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius);
    padding: 25px;
    border: 1px solid var(--glass-border);
    border-top: 2px solid var(--primary);
    margin-top: 20px;
}

/* Desktop: equipment box stretches to match seller column height */
@media (min-width: 769px) {
    .vd-content > div:first-child {
        display: flex;
        flex-direction: column;
    }
    .vd-content > div:first-child > .vd-equipment {
        flex: 1 1 auto;
    }
}

.vd-equipment h3 {
    font-size: 1.1rem;
    color: var(--text-bright);
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.vd-equipment h3 i { color: var(--primary); margin-right: 8px; }

.equip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.equip-tag {
    padding: 7px 14px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--text);
    transition: border-color 0.2s;
}

.equip-tag:hover { border-color: var(--success); }

.equip-tag i { color: var(--success); margin-right: 6px; }

/* Seller card */
.vd-seller {
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius);
    padding: 25px;
    border: 1px solid var(--glass-border);
    border-top: 2px solid var(--primary);
    position: sticky;
    top: 90px;
}

.vd-seller h3 {
    font-size: 1.1rem;
    color: var(--text-bright);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.vd-seller h3 i { color: var(--primary); margin-right: 8px; }

.seller-info {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.seller-avatar {
    width: 56px; height: 56px;
    background: var(--bg-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--primary);
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(212,160,23,0.3);
}
.seller-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.seller-name {
    font-weight: 700;
    color: var(--text-bright);
    font-size: 1.05rem;
}

.seller-city {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.seller-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
    width: 100%;
}

.contact-btn-phone {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: #fff;
    box-shadow: 0 4px 12px rgba(46,204,113,0.25);
}

.contact-btn-phone:hover { filter: brightness(1.1); box-shadow: 0 6px 20px rgba(46,204,113,0.4); transform: translateY(-1px); }

.contact-btn-msg {
    background: transparent;
    border: 1px solid var(--primary) !important;
    color: var(--primary);
}

.contact-btn-msg:hover {
    background: rgba(212,160,23,0.1);
    box-shadow: 0 4px 12px rgba(212,160,23,0.15);
}

.vd-ad-info {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.vd-ad-info p {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.vd-ad-info i {
    width: 16px;
    text-align: center;
    color: var(--primary);
    opacity: 0.6;
}

/* ==================== DASHBOARD ==================== */
.dashboard {
    padding-top: 80px;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
}

.dashboard-user-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg-input);
    border: 3px solid var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
}
.user-avatar i {
    font-size: 4rem;
    color: var(--primary);
}
.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    border-radius: 50%;
}
.avatar-overlay i {
    font-size: 1.3rem;
    color: #fff;
}
.user-avatar:hover .avatar-overlay {
    opacity: 1;
}

.dashboard-user-info h2 {
    color: var(--text-bright);
    margin-bottom: 2px;
}

.dashboard-user-info p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.member-since {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--bg-dark);
    padding: 3px 10px;
    border-radius: 10px;
    display: inline-block;
    margin-top: 5px;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 40px;
}

.dash-stat {
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 14px 8px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.dash-stat:hover {
    border-color: rgba(212,160,23,0.15);
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
    background: rgba(18, 18, 38, 0.7);
}

.dash-stat i {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 8px;
}

.dash-stat span {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    color: #FFFFFF;
    background: none;
    -webkit-text-fill-color: #FFFFFF;
}

.dash-stat label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.dash-section-title {
    font-size: 1.3rem;
    color: var(--text-bright);
    margin-bottom: 20px;
}

.dash-section-title i { color: var(--primary); margin-right: 8px; }

.dash-collapsible {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}
.dash-collapsible:hover { color: var(--primary); }
.dash-toggle-icon {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: transform 0.3s;
}
.dash-collapsible.open .dash-toggle-icon {
    transform: rotate(180deg);
}
.dash-collapsible-body {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.dashboard-ads {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.dash-ad-card {
    display: flex;
    gap: 20px;
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 20px;
    align-items: center;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
}

.dash-ad-card:hover {
    border-color: rgba(212,160,23,0.15);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    background: rgba(18, 18, 38, 0.7);
}

.dash-ad-img {
    width: 120px;
    height: 80px;
    background: var(--bg-dark);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.dash-ad-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dash-ad-img i {
    font-size: 2rem;
    color: var(--border);
}

.dash-ad-info {
    flex: 1;
}

.dash-ad-title {
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: 4px;
}

.dash-ad-details {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.dash-ad-price {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--primary);
    white-space: nowrap;
}

.dash-ad-status {
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-active {
    background: rgba(46,204,113,0.15);
    color: var(--success);
}

.status-expired {
    background: rgba(231,76,60,0.15);
    color: var(--danger);
}

.status-paused {
    background: rgba(255,193,7,0.15);
    color: var(--warning);
}

.status-sold {
    background: rgba(46,204,113,0.15);
    color: var(--success);
}

.dash-ad-paused {
    opacity: 0.6;
}

.dash-ad-sold {
    opacity: 0.7;
}

.dash-ad-actions .btn-renew {
    color: var(--success) !important;
    border-color: var(--success) !important;
}

.status-promoted {
    background: rgba(212,160,23,0.15);
    color: var(--primary);
}

.dash-ad-actions {
    display: flex;
    gap: 8px;
}

.dash-ad-actions button {
    padding: 8px 12px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8rem;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
}

.dash-ad-actions button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.dash-ad-actions button.btn-delete:hover {
    border-color: var(--danger);
    color: var(--danger);
}

/* Sold archive card */
.dash-sold-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 12px;
    opacity: 0.8;
}
.dash-sold-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}
.dash-sold-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(46,204,113,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--success);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.dash-sold-header .dash-ad-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-bright);
}
.dash-sold-price {
    margin-left: auto;
    font-size: 1.1rem;
    font-weight: 700;
}
.dash-sold-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 12px;
}
.dash-sold-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.dash-sold-item i {
    color: var(--primary);
    font-size: 0.7rem;
}
.dash-sold-item span {
    display: none;
}
.dash-sold-item strong {
    color: var(--text);
    font-weight: 600;
}
.dash-sold-equip {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 8px 0;
    border-top: 1px solid var(--border);
}
.dash-sold-equip i { color: var(--success); margin-right: 4px; }
.dash-sold-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    line-height: 1.4;
}
.dash-sold-footer {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.dash-sold-footer i { color: var(--primary); margin-right: 3px; }

/* ==================== FOOTER ==================== */
.footer {
    background: rgba(15, 15, 26, 0.25);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 1px solid rgba(212,160,23,0.1);
    padding: 60px 0 0;
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 2px;
    background: var(--gradient-primary);
    border-radius: 2px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0px;
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--text-bright);
    margin-bottom: 15px;
    position: relative;
}


.footer-logo strong { color: var(--primary); }

.footer-col p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 5px;
}

.footer-col p i {
    color: var(--primary);
    margin-right: 8px;
    width: 16px;
}

.footer-col h4 {
    color: var(--text-bright);
    font-size: 1rem;
    margin-bottom: 18px;
}

.footer-col a {
    display: block;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 4px 0;
    transition: color 0.3s;
}

.footer-col a:hover { color: var(--primary); }

.social-links {
    display: flex;
    gap: 12px;
    margin-top: 15px;
}

.social-links a {
    width: 40px; height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 1rem;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
    border: 1px solid var(--border);
}

.social-links a:hover {
    background: var(--gradient-primary);
    color: var(--bg-dark);
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(212,160,23,0.3);
}

.footer-bottom {
    padding: 20px 0;
    border-top: 1px solid var(--border);
    text-align: center;
    position: relative;
}

/* Pravni podaci o firmi (PIB, MB, PDV) — ispod glavnih kolona footera */
.footer-company-info {
    padding: 14px 0 6px;
    border-top: 1px solid var(--border);
    margin-top: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.6;
}
.footer-company-info .footer-company-line {
    margin-bottom: 4px;
}
.footer-company-info .footer-company-line strong {
    color: var(--text);
    margin-right: 8px;
}
.footer-company-info .footer-company-ids span {
    margin: 0 10px;
    white-space: nowrap;
}
.footer-company-info .footer-company-ids span:not(:empty)::before {
    color: var(--primary);
    margin-right: 3px;
}

.footer-bottom p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.bug-report-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(243, 156, 18, 0.1);
    border: 1px solid rgba(243, 156, 18, 0.3);
    color: var(--warning);
    padding: 8px 16px;
    border-radius: 20px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.bug-report-btn:hover {
    background: rgba(243, 156, 18, 0.2);
    border-color: var(--warning);
}

@media (max-width: 768px) {
    .bug-report-btn {
        position: static;
        transform: none;
        margin-top: 12px;
    }
}

/* ==================== TOAST ==================== */
.toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    padding: 14px 22px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    animation: toastIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 280px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.toast.fade-out {
    animation: toastOut 0.3s ease forwards;
}

.toast-success {
    background: rgba(39, 174, 96, 0.85);
    color: #fff;
}

.toast-error {
    background: rgba(231, 76, 60, 0.85);
    color: #fff;
}

.toast-info {
    background: rgba(41, 128, 185, 0.85);
    color: #fff;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(50px); }
}

/* ==================== MODAL ==================== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(5, 5, 12, 0.55);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    z-index: 9998;
    display: flex;
    align-items: safe center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal {
    background: rgba(18, 18, 38, 0.75);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: var(--radius-lg);
    padding: 32px;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border: 1px solid var(--glass-border);
    position: relative;
    animation: modalIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 32px 100px rgba(0,0,0,0.6);
}

/* Gold scrollbar inside the modal */
.modal::-webkit-scrollbar { width: 8px; }
.modal::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb {
    background: rgba(212, 160, 23, 0.35);
    border-radius: 4px;
}
.modal::-webkit-scrollbar-thumb:hover { background: rgba(212, 160, 23, 0.55); }

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.modal-close {
    position: absolute;
    top: 8px; right: 8px;
    /* Dugme je ranije bilo 14×27 px i ISPOD naslova prozora (naslov iz
       #modal-content se crta preko njega), pa je dodir na telefonu pogađao
       naslov, ne X — "moram 10 puta da stisnem" (05.10.2026). Sada: 40×40 px
       cilj, iznad sadržaja. */
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    transition: color 0.3s, background-color 0.3s;
}
[data-theme="light"] .modal-close { background: rgba(0, 0, 0, 0.06); }
.modal-close:hover { color: var(--text-bright); background: rgba(212, 160, 23, 0.18); }

/* Avatar crop modal */
.crop-container {
    width: 250px;
    height: 250px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    border: 3px solid var(--primary);
    background: #000;
    cursor: grab;
    touch-action: none;
}
.crop-container:active { cursor: grabbing; }
.crop-circle {
    width: 100%;
    height: 100%;
    position: relative;
}
.crop-circle img {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    user-select: none;
    -webkit-user-drag: none;
}
.crop-zoom {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    justify-content: center;
    color: var(--text-muted);
}
.crop-zoom input[type="range"] {
    flex: 1;
    max-width: 200px;
    accent-color: var(--primary);
}
.avatar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.btn-remove-avatar {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 0.78rem;
    cursor: pointer;
    padding: 2px 0;
    opacity: 0.4;
    transition: opacity 0.2s;
}
.btn-remove-avatar:hover { opacity: 1; }

/* ==================== PAGINATION ==================== */
/* Scroll-margin-top osigurava da scrollIntoView UVIJEK ostavi 100px iznad
   listings-section (za sticky navbar). Konzistentno bez obzira odakle se zove. */
.listings-section {
    scroll-margin-top: 100px;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
    flex-wrap: wrap;
}
.pagination-ellipsis {
    color: var(--text-muted);
    font-weight: 700;
    padding: 0 4px;
    align-self: center;
    user-select: none;
}
.pagination-arrow {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
}
.pagination-arrow:hover {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.pagination button {
    width: 42px; height: 42px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
}
@media (max-width: 768px) {
    .pagination { gap: 4px; }
    .pagination button {
        width: 34px; height: 34px;
        font-size: 0.85rem;
    }
    .pagination-ellipsis { padding: 0 1px; font-size: 0.85rem; }
}

.pagination button:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(212,160,23,0.06);
}

.pagination button.active {
    background: var(--gradient-primary);
    color: var(--bg-dark);
    border-color: var(--primary);
    box-shadow: 0 2px 12px rgba(212,160,23,0.3);
}

/* ==================== CATEGORY BAR ==================== */
.category-bar {
    background: rgba(15, 15, 26, 0.25);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(212,160,23,0.1);
    padding: 100px 0 15px;
    position: relative;
    z-index: 10;
}

.category-items {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 5px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.category-items::-webkit-scrollbar { display: none; }

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    padding: 14px 8px;
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
    white-space: nowrap;
    min-width: 0;
}

.category-item i {
    font-size: 1.3rem;
    color: var(--text-muted);
    transition: color 0.3s;
}

@media (hover: hover) {
    .category-item:hover {
        border-color: var(--primary);
        color: var(--primary);
        background: rgba(212, 160, 23, 0.08);
    }
    .category-item:hover i { color: var(--primary); }
}

.category-item.active {
    border-color: var(--primary);
    background: rgba(212, 160, 23, 0.12);
    color: var(--primary);
    box-shadow: 0 0 16px rgba(212,160,23,0.1);
}

.category-item.active i { color: var(--primary); }

/* ==================== BACK BUTTON ==================== */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 30px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
    margin-bottom: 25px;
}

.btn-back:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-back i { font-size: 0.85rem; }

/* ==================== VEHICLE DETAIL ACTIONS ==================== */
.vd-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
    width: 100%;
}

.action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.action-btn-active {
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(231, 76, 60, 0.08);
}

.action-btn-danger {
    border-color: var(--danger);
    color: var(--danger);
}

.action-btn-danger:hover {
    background: rgba(231, 76, 60, 0.1);
}
.action-btn-admin {
    border-color: var(--primary);
    color: var(--primary);
}
.action-btn-admin:hover {
    background: rgba(212, 160, 23, 0.1);
}

/* ==================== SHARE GRID ==================== */
.share-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 10px;
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.2s, transform 0.15s;
}

.share-btn:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
}

.share-btn i {
    font-size: 1.1rem;
}

.share-facebook { background: #1877F2; }
.share-messenger { background: #0084FF; }
.share-whatsapp { background: #25D366; }
.share-viber { background: #7360F2; }
.share-telegram { background: #0088CC; }
.share-x { background: #000; }
/* Instagram nema jednu boju — zvanicni prelaz iz narandzaste u ljubicastu. */
.share-instagram { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4); }
/* Gmail crvena — e-posta nema svoj brend, a ova boja se odmah prepozna
   i ne ponavlja se ni sa jednom drugom mrezom u mrezi dugmadi. */
.share-email { background: #EA4335; }
.share-copy { background: var(--primary-dark); color: #000; }

@media (max-width: 480px) {
    .share-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Favorites folders */
.fav-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}
.btn-create-folder {
    background: var(--primary);
    color: #000;
    border: none;
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: opacity 0.2s;
}
.btn-create-folder:hover { opacity: 0.85; }
.btn-create-folder i { margin-right: 6px; }

.fav-folder-section {
    margin-bottom: 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.fav-folder-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--bg-card);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}
.fav-folder-header:hover { background: var(--bg-section); }
.fav-folder-icon { color: var(--primary); font-size: 1.1rem; }
.fav-folder-name { font-weight: 600; color: var(--text-bright); font-size: 1rem; }
.fav-folder-count {
    background: var(--bg-dark);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}
.fav-folder-actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
}
.fav-folder-actions button {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
}
.fav-folder-actions button:hover { border-color: var(--primary); color: var(--primary); }
.fav-folder-toggle {
    color: var(--text-muted);
    font-size: 0.75rem;
    transition: transform 0.3s;
    margin-left: 8px;
}
.fav-folder-header.open .fav-folder-toggle { transform: rotate(180deg); }
.fav-folder-body {
    padding: 16px;
    border-top: 1px solid var(--border);
}

@media (max-width: 768px) {
    .fav-folder-section {
        border: none;
        border-radius: 0;
    }
    .fav-folder-body {
        padding: 0;
    }
    .fav-folder-body .vehicles-grid {
        gap: 10px;
    }
}

#page-favorites .page-panel,
#page-alerts .page-panel {
    max-width: 100%;
}

@media (min-width: 769px) {
    .fav-folder-body .vehicles-grid,
    .alert-card-body .vehicles-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

@media (max-width: 768px) {
    .alert-card-wrap {
        margin-bottom: 10px;
    }
    .alert-card-wrap .alert-card {
        border: none;
        border-radius: 0;
        background: var(--bg-card);
        padding: 14px 12px;
    }
}

/* Folder picker in modal */
.fav-folder-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.fav-folder-pick-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
    text-align: left;
}
.fav-folder-pick-btn:hover { border-color: var(--primary); color: var(--primary); }
.fav-folder-pick-btn i { color: var(--primary); width: 18px; text-align: center; }

/* ==================== SELLER TYPE LABEL ==================== */
.seller-type-label {
    font-size: 0.78rem;
    color: var(--primary);
    font-weight: 600;
}

/* ==================== NOTIFICATION BADGE ==================== */
.notif-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    background: var(--danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ==================== REPORT CARDS ==================== */
.report-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
}

.report-info {
    flex: 1;
}

.report-info strong {
    color: var(--text-bright);
    display: block;
    margin-bottom: 4px;
}

.report-info p {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.report-info small {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.report-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ==================== PROFILE PAGE ==================== */
.profile-header-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px;
    background: linear-gradient(160deg, rgba(34,34,60,0.6) 0%, rgba(16,16,32,0.66) 100%);
    border: 1px solid rgba(212,160,23,0.16);
    border-radius: 20px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.32);
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg-input);
    border: 3px solid var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.profile-avatar i {
    font-size: 4rem;
    color: var(--primary);
}
.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-header-info {
    flex: 1;
    min-width: 0;
}

.profile-msg-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 20px;
    background: var(--primary);
    color: var(--bg-dark);
    border: none;
    border-radius: var(--radius-sm, 8px);
    font-weight: 600;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.profile-msg-btn:hover {
    background: var(--primary-light, #e6b422);
    transform: translateY(-1px);
}
.profile-msg-btn i {
    font-size: 0.95rem;
}
.nav-avatar-img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}

/* ==================== USER TYPE BADGE ==================== */
.user-type-badge {
    display: inline-block;
    padding: 3px 12px;
    background: rgba(212, 160, 23, 0.12);
    color: var(--primary);
    border: 1px solid rgba(212, 160, 23, 0.3);
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 5px;
}

/* ==================== INFO MODAL BODY ==================== */
.info-modal-body {
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.7;
}

.info-modal-body ul {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.info-modal-body ul li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-left: 20px;
    position: relative;
}

.info-modal-body ul li::before {
    content: '•';
    color: var(--primary);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.info-modal-wrap {
    position: relative;
    padding: 4px;
}
.info-modal-wrap h3 {
    font-size: 1.2rem;
    margin-top: 0;
}

/* === Pravne stranice (uslovi, privatnost, refund, kolacici, sigurnost placanja) === */
.info-modal-body.legal-doc {
    font-size: 0.88rem;
    line-height: 1.6;
}
.info-modal-body.legal-doc h4 {
    color: var(--primary);
    font-size: 1rem;
    font-weight: 800;
    margin: 22px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(212,160,23,0.25);
}
.info-modal-body.legal-doc h4:first-of-type { margin-top: 14px; }
.info-modal-body.legal-doc p {
    margin: 8px 0;
    color: var(--text);
}
.info-modal-body.legal-doc strong { color: var(--text-bright); }
.info-modal-body.legal-doc .legal-meta {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-bottom: 4px;
}
.info-modal-body.legal-doc ul { margin: 8px 0 12px; }
.info-modal-body.legal-doc ul li {
    border-bottom: none;
    padding: 4px 0 4px 20px;
}
.info-modal-body.legal-doc ol {
    padding-left: 22px;
    margin: 8px 0 12px;
}
.info-modal-body.legal-doc ol li {
    padding: 4px 0;
}
.info-modal-body.legal-doc .legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 0.85rem;
}
.info-modal-body.legal-doc .legal-table th,
.info-modal-body.legal-doc .legal-table td {
    padding: 8px 10px;
    text-align: left;
    border: 1px solid rgba(255,255,255,0.08);
    vertical-align: top;
}
.info-modal-body.legal-doc .legal-table th {
    background: rgba(212,160,23,0.12);
    color: var(--primary);
    font-weight: 700;
}
[data-theme="light"] .info-modal-body.legal-doc h4 {
    border-bottom-color: rgba(212,160,23,0.4);
}
[data-theme="light"] .info-modal-body.legal-doc .legal-table th,
[data-theme="light"] .info-modal-body.legal-doc .legal-table td {
    border-color: rgba(0,0,0,0.1);
}

.faq-item {
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
}

.faq-item:last-child { border-bottom: none; }

.faq-item h4 {
    color: var(--text-bright);
    margin-bottom: 6px;
    font-size: 0.95rem;
}

.faq-item p {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ==================== MODERN ENHANCEMENTS ==================== */

/* Smooth cubic bezier for all interactive elements */
a, button, input, select, textarea,
.vehicle-card, .stat-card, .pricing-card, .category-item,
.dash-stat, .dash-ad-card, .social-links a, .pagination button {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* shine efekat na bedževima uklonjen — trošio je performanse na listama */

/* Section headers with subtle underline accent */
.section-header h2 {
    position: relative;
    display: inline-block;
}
.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -6px; left: 0;
    width: 40px; height: 3px;
    background: var(--gradient-primary);
    border-radius: 3px;
}

/* Enhanced card spec badges */
.card-spec {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255,255,255,0.04);
}

/* Photo count badge glass effect */
.card-image .photo-count {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Stat number gradient */
.stat-number {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Enhanced form focus glow */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.12), 0 4px 16px rgba(212, 160, 23, 0.08);
}

/* Search input enhanced focus */
.nav-search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.1);
}

/* Hero search inputs focus */
.hero-search select:focus,
.hero-search input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.1);
}

/* Filters bar inputs */
.filters-bar select:focus,
.filters-bar input:focus {
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.1);
}

/* Pricing card enhanced popular glow */
.pricing-popular {
    box-shadow: 0 0 40px rgba(212, 160, 23, 0.12), 0 12px 40px rgba(0,0,0,0.3);
}

/* Dashboard avatar golden ring pulse */
.user-avatar {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(212,160,23,0.1);
}

/* Enhanced login/register buttons */
.btn-register {
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.btn-register:hover {
    background: var(--gradient-primary);
    color: var(--bg-dark) !important;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(212,160,23,0.3);
    transform: translateY(-1px);
}

/* Enhanced secondary button hover */
.btn-secondary:hover {
    background: rgba(212,160,23,0.08);
    box-shadow: 0 4px 16px rgba(212,160,23,0.12);
    transform: translateY(-1px);
}

/* Gallery main area subtle inner shadow */
.vd-gallery-main::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 -60px 40px -20px rgba(10,10,20,0.3);
    pointer-events: none;
    z-index: 1;
}

/* Detail header specs shimmer */
.vd-header .card-spec {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.vd-header .card-spec:hover {
    border-color: rgba(212,160,23,0.3);
    color: var(--primary);
}

/* Enhanced equip tags */
.equip-tag {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.equip-tag:hover {
    border-color: var(--success);
    background: rgba(46,204,113,0.06);
    transform: translateY(-1px);
}

/* Action buttons smooth hover */
.action-btn {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212,160,23,0.1);
}

/* Dash ad actions smooth */
.dash-ad-actions button {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.dash-ad-actions button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(212,160,23,0.12);
}

/* Plan option enhanced active */
.plan-option {
    transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, opacity 0.35s ease;
}
.plan-option.active {
    box-shadow: 0 0 20px rgba(212,160,23,0.1);
}

/* Message item smooth hover */
.message-item {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.message-item:hover {
    transform: translateX(4px);
}

/* Link hover smooth underline effect */
.footer-col a {
    position: relative;
}
.footer-col a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 1px;
    background: var(--primary);
    transition: width 0.3s ease;
}
.footer-col a:hover::after {
    width: 100%;
}

/* Back button enhanced */
.btn-back {
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.btn-back:hover {
    transform: translateX(-4px);
    box-shadow: 0 2px 12px rgba(212,160,23,0.1);
}

/* Smooth focus visible for keyboard nav */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
    .nav-search { max-width: 250px; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
    .pricing-popular { transform: none; }
    .pricing-popular:hover { transform: translateY(-5px); }
    .pricing-info-grid { grid-template-columns: 1fr; }
    .vd-content { grid-template-columns: 1fr; }
    .vd-seller { position: static; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-stats { grid-template-columns: repeat(3, 1fr); }
    .dash-stat span { font-size: 1.4rem; }
    .dash-stat label { font-size: 0.65rem; }
    .dash-stat i { font-size: 1.1rem; margin-bottom: 4px; }
}

@media (max-width: 768px) {
    .hamburger {
        display: flex;
        margin-left: auto;
        flex-shrink: 0;
        border: none;
        padding: 8px;
        font-size: 1.3rem;
        border-radius: 8px;
    }
    .nav-links > a,
    .nav-auth,
    .nav-icons,
    .nav-profile-btn { display: none !important; }
    .nav-container > .nav-post-btn { display: none !important; }
    .nav-auth-guest-wrap { display: none !important; }
    .navbar {
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 24px);
        border-radius: 16px;
    }
    .navbar.menu-open {
        /* zadržava 22px radius (bez promjene pri otvaranju menija) */
    }
    .nav-container {
        padding: 10px 14px;
        gap: 0;
        height: auto;
        flex-wrap: wrap;
        transition: padding 0.3s ease;
    }
    .nav-logo {
        flex: 1;
        font-size: 1.4rem;
    }
    .hamburger {
        flex-shrink: 0;
    }
    .nav-search {
        order: 3;
        width: 100%;
        max-width: none;
        flex: none;
        margin-top: 8px;
        border-radius: 30px;
        /* NOTE: NEMA `overflow: hidden` ovdje — apsolutno pozicioniran
           .nav-search-dropdown bi bio odsjecen pa rezultati pretrage profila
           ne bi bili vidljivi na mobilnom. Border-radius input-a i dugmeta
           sami od sebe odrzavaju zaobljene uglove. Skupljanje pri scroll-u
           radimo iskljucivo kroz max-height + opacity + pointer-events.
           (04.10.2026: probana je i odvojena "pilula" sa transform/opacity,
           vraceno na ovo po zelji vlasnika.) */
        max-height: 48px;
        transition: max-height 0.26s cubic-bezier(0.2, 0, 0.2, 1), margin-top 0.26s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.2s ease 0.06s;
        opacity: 1;
    }
    .navbar.scrolled .nav-search {
        max-height: 0;
        margin-top: 0;
        opacity: 0;
        pointer-events: none;
        overflow: hidden; /* sakrivanje child sadrzaja samo kada je collapsed */
        transition: max-height 0.26s cubic-bezier(0.4, 0, 1, 1), margin-top 0.26s cubic-bezier(0.4, 0, 1, 1), opacity 0.15s ease;
    }
    .nav-search input {
        padding: 10px 16px;
        font-size: 0.88rem;
    }
    .nav-search button {
        padding: 10px 18px;
        font-size: 1rem;
        border-radius: 0 30px 30px 0;
    }

    .category-bar { padding-top: 125px; }
    .hero { padding: 165px 15px 60px; }
    .hero h1 { font-size: 2rem; }
    .hero-search { flex-direction: column; }
    .hero-search select,
    .hero-search input { min-width: auto; }

    .container { padding: 0 12px; }
    .vehicles-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .form-row { grid-template-columns: 1fr; }
    .plan-selector { grid-template-columns: 1fr; }
    .equipment-grid { grid-template-columns: repeat(2, 1fr); }

    /* Card kompaktnost za 2 kolone na mobilnom */
    .card-image { height: 195px; }
    .card-image .placeholder-img { font-size: 2.5rem; }
    .card-image .photo-count { font-size: 0.65rem; padding: 2px 6px; }
    .card-body { padding: 5px 7px; }
    .card-title { font-size: 0.78rem; margin-bottom: 3px; }
    .card-specs { gap: 2px; margin-bottom: 4px; grid-template-columns: repeat(2, 1fr); }
    .card-spec { font-size: 0.6rem; padding: 1px 5px; gap: 3px; }
    .card-footer { padding-top: 4px; }
    .card-price { font-size: 0.95rem; }
    .card-price-line .card-verified-inline { font-size: 0; padding: 3px; gap: 0; }
    .card-price-line .card-verified-inline i { font-size: 0.75rem; }
    .card-meta { font-size: 0.6rem; text-align: left; }
    .card-badge { font-size: 0.5rem; padding: 3px 8px; top: 6px; left: 6px; border-radius: 999px; letter-spacing: 0.4px; gap: 4px; }
    .card-badge i { font-size: 0.5rem; }
    .card-tags-meta { min-height: 32px; margin-top: 2px; }

    .vd-gallery-main { height: 280px; border-radius: var(--radius); }
    .vd-carousel, .carousel-track, .carousel-slide { height: 280px; }
    .carousel-arrow { opacity: 0.7; width: 34px; height: 34px; font-size: 0.8rem; }
    .carousel-dot { width: 7px; height: 7px; }
    .vd-header .card-spec { font-size: 0.75rem; padding: 4px 8px; }
    .spec-item { padding: 8px 10px; }
    .vd-header { flex-direction: column; align-items: flex-start; }

    .dashboard-header { flex-direction: column; align-items: center; text-align: center; }
    .dashboard-user-info { flex-direction: column; align-items: center; text-align: center; }
    .dash-ad-card { flex-direction: column; text-align: center; }
    .dash-ad-img { width: 100%; height: 150px; }

    .footer-grid { grid-template-columns: 1fr; gap: 25px; }
    .footer-col { text-align: center; }
    .footer-col p i { margin-right: 6px; }
    .footer-logo { justify-content: center; }
    .social-links { justify-content: center; }

    .filters-bar { flex-direction: column; }
    /* Mobilni: filter inputi puna sirina, prirodna visina */
    .filters-bar select,
    .filters-bar input,
    .filters-bar .custom-select-wrap,
    .filters-bar .multi-select-wrap {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
    }
    .filter-action-stack {
        width: 100%;
        margin-left: 0;
    }

    /* Kategorije: grid 3x3 umjesto horizontalnog skrolanja */
    .category-items {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        overflow-x: visible;
        gap: 6px;
        padding: 0;
    }
    .category-item {
        min-width: 0;
        flex: none;
        padding: 8px 4px;
        font-size: 0.65rem;
        white-space: normal;
        text-align: center;
    }
    .category-item i { font-size: 1rem; }

    .report-card { flex-direction: column; text-align: center; }

    .profile-header-card { flex-direction: column; text-align: center; align-items: center; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 1.6rem; }
    .auth-card { padding: 25px; }
    .stats-grid { grid-template-columns: 1fr; }
    .dashboard-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .dash-stat span { font-size: 1.2rem; }
    .dash-stat label { font-size: 0.6rem; }
    .dash-stat i { font-size: 1rem; }

    /* Još kompaktnije na malim telefonima */
    .vehicles-grid { gap: 8px; }
    .card-image { height: 170px; }
    .card-body { padding: 5px 6px; }
    .card-title { font-size: 0.74rem; margin-bottom: 2px; }
    .card-price { font-size: 0.88rem; }
    .card-spec { font-size: 0.56rem; padding: 1px 4px; }
    .card-specs { gap: 2px; margin-bottom: 3px; }
    .card-footer { padding-top: 3px; }
    .card-badge { font-size: 0.48rem; padding: 3px 7px; border-radius: 999px; gap: 4px; }
    .card-badge i { font-size: 0.48rem; }
}

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(212,160,23,0.2);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(212,160,23,0.4);
}

/* ==================== PAGE TRANSITIONS ==================== */
.page {
    display: none;
    animation: pageIn 0.3s ease;
}

.page.active {
    display: block;
    min-height: calc(100vh - 70px);
}

@keyframes pageIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Klizanje kroz donji meni (js/nav-klizanje.js) ----------
   Dok prst vuce, obje stranice se pomjeraju: trenutna izlazi, nova ulazi.
   Nova stoji kao sloj preko ekrana (gornju ivicu joj postavlja skripta, da
   sjedne tacno tamo gdje ce biti kad potez prodje). Ispod je donjeg menija i
   gornje trake, pa one mirno stoje kao na Instagramu.
   Pomjera se samo `transform` — jedino sto telefon radi bez ponovnog crtanja. */
.page.kk-klizi-nova {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    overflow: hidden;
    background: var(--bg-dark);
    animation: none;            /* `pageIn` ovdje nema sta da trazi */
    will-change: transform;
}

.page.kk-klizi-stara {
    will-change: transform;
}

/* Pomjerena stranica bi inace prosirila dokument i pregledac bi usred poteza
   ponudio vodoravno skrolanje. Vrijedi samo dok potez traje. */
html.kk-klizi-aktivno,
html.kk-klizi-aktivno > body {
    overflow-x: hidden;
    overflow-x: clip;
}

/* No results */
.no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.no-results i {
    font-size: 3rem;
    color: var(--border);
    margin-bottom: 15px;
}

.no-results h3 {
    color: var(--text);
    margin-bottom: 8px;
}

/* ==================== NAV ICON LINKS ==================== */
.nav-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.nav-icon-link {
    color: var(--text-muted) !important;
    font-size: 1.25rem;
    padding: 8px 6px;
    position: relative;
    transition: color 0.2s;
}
.nav-icon-link:hover {
    color: var(--primary) !important;
}
.nav-icon-link .notif-badge {
    position: absolute;
    top: 2px;
    right: -2px;
    font-size: 0.65rem;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* ==================== PAGE PANELS ==================== */
.page-panel {
    max-width: 900px;
    margin: 0 auto;
}
.panel-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: 25px;
}

/* ==================== BUSINESS / WORKING HOURS ==================== */
.working-hours-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.wh-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wh-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 130px;
    font-size: 0.85rem;
    color: var(--text);
    cursor: pointer;
}

.wh-row label input[type="checkbox"] {
    accent-color: var(--primary);
}

.wh-row input[type="text"] {
    flex: 1;
    padding: 6px 10px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 0.82rem;
}

.wh-row input[type="text"]:disabled {
    opacity: 0.3;
}

/* "Isto za sve dane" — prepisuje prvi upisani dan u sve ostale zakacene. */
.wh-fill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 12px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

@media (hover: hover) {
    .wh-fill-btn:hover {
        color: var(--primary);
        border-color: var(--primary);
    }
}

/* Na telefonu je 130px za naziv dana previse — polje za vrijeme ostane toliko
   usko da se "08:00 - 17:00" odsijece na pola. Naziv dana skratimo, jer se on
   i onako cita, a vrijeme mora da se vidi cijelo. */
@media (max-width: 560px) {
    .wh-row { gap: 8px; }
    .wh-row label { min-width: 98px; font-size: 0.8rem; }
    .wh-row input[type="text"] { padding: 6px 8px; }
}

/* Verified badge - small (cards, admin) */
.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}
.verified-badge i { color: var(--text-muted); }

.verified-badge i {
    font-size: 0.8rem;
}

/* Verified badge - big (profile page) — same size as user-type-badge */
.verified-badge-big {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 15px;
    margin-top: 5px;
    white-space: nowrap;
}

/* Profile top row — info left, working hours right */
.profile-top-row {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.profile-top-row .profile-header-card {
    flex: 0 0 auto;
    min-width: 280px;
    max-width: 360px;
}

.profile-biz-middle {
    flex: 1;
    min-width: 0;
}
.profile-biz-middle .biz-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "kontakt kontakt adresa  adresa"
        "kontakt kontakt ofirmi  ofirmi"
        "social  social  ofirmi  ofirmi"
        "brands  brands  brands  pib";
    gap: 10px;
    margin: 0;
}
.profile-biz-middle .biz-area-kontakt { grid-area: kontakt; }
.profile-biz-middle .biz-area-adresa { grid-area: adresa; }
.profile-biz-middle .biz-area-social { grid-area: social; }
.profile-biz-middle .biz-area-ofirmi { grid-area: ofirmi; }
.profile-biz-middle .biz-area-brands { grid-area: brands; }
.profile-biz-middle .biz-area-pib { grid-area: pib; }

.biz-empty-placeholder {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-style: italic;
    opacity: 0.6;
    padding: 8px 10px;
}
.profile-biz-middle .biz-info-card {
    padding: 12px 14px;
}
.profile-biz-middle .biz-info-card h4 {
    font-size: 0.8rem;
    margin-bottom: 8px;
}
.profile-biz-middle .biz-info-card-full {
    grid-column: 1 / -1;
}
.profile-biz-middle .biz-contact-row {
    padding: 6px 10px;
    font-size: 0.8rem;
    margin-bottom: 4px;
}
.profile-biz-middle .biz-contact-row i { font-size: 0.78rem; width: 14px; }
.profile-biz-middle .biz-social-btn {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
}
.profile-biz-middle .biz-social-row { gap: 6px; }
.profile-biz-middle .biz-about-section { margin-bottom: 10px; }
.profile-biz-middle .biz-about-section h4 { font-size: 0.78rem; margin-bottom: 5px; }
.profile-biz-middle .biz-about-section p { font-size: 0.82rem; line-height: 1.45; }
.profile-biz-middle .biz-brand-tag {
    padding: 3px 10px;
    font-size: 0.75rem;
}
.profile-biz-middle .biz-brands-list { gap: 5px; }
.profile-biz-middle .biz-desc-text {
    font-size: 0.82rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Brendovi + PIB chips in one row */
.biz-chip-card {
    padding: 10px 14px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}
.biz-chip-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.biz-chip-label {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.biz-chip-label i { color: var(--primary); }

/* Master "Više informacija" toggle — desktop hides button, mobile shows it */
.biz-info-toggle { display: none; }

@media (max-width: 768px) {
    .biz-info-toggle {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 8px;
        background: var(--glass);
        border: 1px solid var(--glass-border);
        color: var(--text-bright);
        padding: 14px 18px;
        border-radius: var(--radius);
        font-family: inherit;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: border-color 0.2s;
    }
    .biz-info-toggle:hover {
        border-color: var(--primary);
    }
    .biz-info-toggle > i:first-child {
        color: var(--primary);
    }
    .biz-info-toggle-chev {
        margin-left: auto;
        color: var(--text-muted);
        font-size: 0.9rem;
        transition: transform 0.3s ease;
    }
    .biz-info-wrapper.open .biz-info-toggle-chev {
        transform: rotate(180deg);
    }
    .biz-info-wrapper .biz-info-grid {
        display: none;
    }
    .biz-info-wrapper.open .biz-info-grid {
        display: grid;
        margin-top: 10px;
        /* Mobile layout: most cards full width, social+pib side-by-side at bottom */
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "kontakt kontakt"
            "adresa  adresa"
            "ofirmi  ofirmi"
            "brands  brands"
            "social  pib";
    }
}

.profile-working-hours {
    flex-shrink: 0;
    background: linear-gradient(160deg, rgba(34,34,60,0.6) 0%, rgba(16,16,32,0.66) 100%);
    border: 1px solid rgba(212,160,23,0.16);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    padding: 20px 22px;
    min-width: 240px;
    display: flex;
    flex-direction: column;
}

.profile-working-hours h4 {
    color: var(--text-bright);
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.profile-working-hours h4 i {
    background: rgba(212,160,23,0.14);
    border: 1px solid rgba(212,160,23,0.22);
    width: 30px; height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.wh-display-row {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.wh-display-row:last-child { border-bottom: none; }

.wh-on { color: var(--text-bright); font-weight: 600; }
.wh-off { color: var(--danger); font-weight: 500; }

@media (max-width: 768px) {
    .profile-top-row {
        flex-direction: column;
    }
    .profile-top-row .profile-header-card { max-width: none; }
    .profile-biz-middle .biz-info-card { padding: 16px; }
    .profile-working-hours {
        min-width: auto;
        width: 100%;
    }
}

.admin-users-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.admin-filter-input {
    flex: 1;
    min-width: 200px;
    padding: 10px 14px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.3s;
}

.admin-filter-input:focus {
    border-color: var(--primary);
}

.admin-filter-select {
    padding: 10px 14px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
    min-width: 160px;
}

.admin-user-card {
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 10px;
    transition: border-color 0.2s;
}

.admin-user-card:hover {
    border-left-color: var(--primary);
}

.admin-user-card.admin-row-banned {
    opacity: 0.5;
    border-left-color: var(--danger);
}

.admin-user-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

@media (max-width: 768px) {
    .admin-user-card-header {
        flex-direction: column;
    }
    .admin-users-filters {
        flex-direction: column;
    }
}

/* ==================== ALERT CARDS ==================== */
.alert-form {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 20px;
}

/* Notification bell dropdown */
.notif-bell-dropdown {
    position: fixed;
    top: 70px;
    right: 20px;
    width: 380px;
    max-width: calc(100vw - 40px);
    max-height: 70vh;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.notif-bell-dropdown.hidden { display: none; }
.notif-bell-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.notif-bell-header h4 { margin: 0; color: var(--text-bright); font-size: 1rem; }
.notif-bell-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
}
.notif-bell-filters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-section);
}
.notif-filter-tab {
    background: var(--bg-dark);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 7px 4px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-filter-tab.active {
    background: var(--primary);
    color: #000;
    border-color: var(--primary);
}
.notif-bell-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.notif-bell-item {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}
.notif-bell-item:hover { background: var(--bg-section); }
.notif-bell-item-clickable {
    flex: 1;
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    align-items: flex-start;
    min-width: 0;
}
.notif-bell-item-clickable > i { font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
.notif-bell-item-delete {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 14px;
    font-size: 0.9rem;
    transition: color 0.2s, background 0.2s;
    flex-shrink: 0;
}
.notif-bell-item-delete:hover {
    color: var(--danger);
    background: rgba(231, 76, 60, 0.1);
}

/* "Obrisi sve" red — tanki sticky header iznad liste notifikacija */
.notif-bell-clear-row {
    display: flex;
    justify-content: flex-end;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-section);
    position: sticky;
    top: 0;
    z-index: 2;
}
.notif-bell-clear-all {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.notif-bell-clear-all:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: rgba(231, 76, 60, 0.05);
}
.notif-bell-item-body { flex: 1; min-width: 0; }
.notif-bell-item-text {
    color: var(--text-bright);
    font-size: 0.85rem;
    line-height: 1.3;
    word-wrap: break-word;
}
.notif-bell-item-time {
    color: var(--text-muted);
    font-size: 0.7rem;
    margin-top: 3px;
}
.notif-bell-item.notif-bell-read { opacity: 0.6; }
.notif-bell-item.notif-bell-read .notif-bell-item-text { color: var(--text-muted); }
.notif-bell-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .notif-bell-dropdown {
        top: 60px;
        right: 10px;
        left: 10px;
        width: auto;
        max-width: none;
    }
}

.alert-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    gap: 10px;
}
.alert-card-wrap {
    margin-bottom: 8px;
}
.alert-card-body {
    padding: 0;
    margin: 0;
}
@media (min-width: 769px) {
    .alert-card-body {
        padding: 10px 14px 20px;
        border-left: 2px solid var(--primary);
        margin: 0 0 8px 14px;
    }
}
.alert-card-chevron {
    color: var(--text-muted);
    font-size: 0.85rem;
    transition: transform 0.3s;
}
.alert-match-count {
    font-weight: 700;
    margin-left: 4px;
    background: linear-gradient(135deg, #F5D442 0%, #D4A017 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.alert-card-label {
    color: var(--text-bright);
    font-weight: 600;
    font-size: 0.9rem;
}

.alert-card-date {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 4px;
}
.panel-title i {
    margin-right: 10px;
}
.panel-subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: 15px;
}
.panel-subtitle i { margin-right: 6px; }

/* ==================== MESSAGES ==================== */
.msg-warning {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid var(--warning);
    color: var(--warning);
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 20px;
}
.msg-warning i { margin-right: 8px; }

.messages-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.message-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid transparent;
}
.message-item:hover {
    background: rgba(18, 18, 38, 0.7);
    border-color: rgba(212,160,23,0.08);
}
.message-unread {
    border-left: 3px solid var(--primary);
}
.message-avatar {
    font-size: 2.2rem;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.message-avatar-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    transition: border-color 0.15s ease;
}
.message-avatar:hover .message-avatar-img {
    border-color: var(--primary);
}
.message-info {
    flex: 1;
    min-width: 0;
}
.message-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.message-header-row strong {
    color: var(--text-bright);
    font-size: 0.95rem;
}
.message-time {
    color: var(--text-muted);
    font-size: 0.8rem;
}
.message-preview {
    color: var(--text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.message-ad-ref {
    font-size: 0.75rem;
    color: var(--primary);
    margin-top: 4px;
    display: inline-block;
}
.msg-delete-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: color 0.2s;
}
.msg-delete-btn:hover { color: var(--danger); }

.btn-convo-delete {
    margin-left: auto;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
}
.btn-convo-delete:hover { color: var(--danger); border-color: var(--danger); }

.message-unread-count {
    background: var(--primary);
    color: #000;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Conversation view */
.convo-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
}
.btn-back {
    background: var(--bg-section);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
}
.btn-back:hover { border-color: var(--primary); color: var(--primary); }
.convo-partner {
    color: var(--text-bright);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    transition: color 0.15s ease;
}
.convo-partner:hover { color: var(--primary); }
/* Slušalica desno u zaglavlju razgovora — poziv jednim dodirom (06.10.2026). */
.convo-call {
    margin-left: auto;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    background: var(--gradient-primary);
    border: none;
    box-shadow: 0 4px 14px rgba(212,160,23,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
    text-decoration: none;
    font-size: 1.05rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.convo-call i { transform: rotate(0deg); }
.convo-call:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 6px 20px rgba(212,160,23,0.5), inset 0 1px 0 rgba(255,255,255,0.35); }
.convo-call:active { transform: scale(0.94); }
/* Svijetla tema: svijetlo-zlatni gradijent se gubi na bijeloj pozadini, pa
   ide tamnije zlato sa bijelom ikonicom i tankim svjetlijim obrubom. */
[data-theme="light"] .convo-call {
    background: #FFFFFF;
    color: #B8860B;
    border: 1.5px solid rgba(184,134,11,0.35);
    box-shadow: 0 2px 8px rgba(60,40,0,0.08);
}
[data-theme="light"] .convo-call:hover {
    background: var(--gradient-primary);
    color: #1a1a1a;
    border-color: transparent;
    box-shadow: 0 5px 16px rgba(212,160,23,0.4);
}
/* Brzi režim: bez sjenke i prelaza. */
html.kk-brzo .convo-call { box-shadow: none; transition: none; }
.convo-partner:hover .convo-partner-avatar i { color: var(--primary); }
.convo-partner:hover .convo-partner-img { border-color: var(--primary); }
.convo-partner strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.convo-partner-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 1.9rem;
    flex-shrink: 0;
}
.convo-partner-avatar i {
    color: var(--text-muted);
    transition: color 0.15s ease;
}
.convo-partner-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    transition: border-color 0.15s ease;
}
.convo-messages {
    max-height: 450px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0;
    margin-bottom: 15px;
}
.convo-bubble {
    max-width: 70%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 0.9rem;
    line-height: 1.4;
}
.convo-bubble p { margin: 0; }
.convo-mine {
    align-self: flex-end;
    background: var(--primary);
    color: #000;
    border-bottom-right-radius: 4px;
}
.convo-theirs {
    align-self: flex-start;
    background: var(--bg-section);
    color: var(--text);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}
.convo-time {
    display: block;
    font-size: 0.7rem;
    margin-top: 6px;
    opacity: 0.6;
}


/* ==================== RADNJE NAD PORUKOM U CHATU ====================
   Prevlacenje udesno = odgovor, dugi pritisak = meni (odgovori / izmijeni /
   ponisti slanje). Vidi js/chat-akcije.js. */
.convo-bubble[data-msg-id] {
    position: relative;
    touch-action: pan-y;            /* vodoravni potez ostaje nama */
    will-change: transform;
}
.convo-bubble.spreman-odgovor::before {
    content: "\f3e5";              /* fa-reply */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: -34px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    font-size: 0.95rem;
    opacity: 0.9;
}
.convo-bubble.istaknut {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.convo-ponistena p {
    font-style: italic;
    opacity: 0.75;
}
.convo-ponistena p i { margin-right: 6px; font-size: 0.85em; }

/* Citat poruke na koju se odgovara */
.convo-citat {
    display: block;
    border-left: 3px solid currentColor;
    padding: 4px 0 4px 8px;
    margin-bottom: 6px;
    opacity: 0.75;
    font-size: 0.8rem;
    line-height: 1.35;
    cursor: pointer;
}
.convo-citat-ko { display: block; font-weight: 700; }
.convo-citat-tekst {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Traka iznad polja za kucanje (odgovaram / mijenjam) */
.convo-kontekst {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 10px;
    padding: 8px 10px;
    margin: 0 0 8px;
}
body.chat-fullscreen .convo-kontekst {
    margin: 0 14px 8px;
    flex: 0 0 auto;
}
.convo-kontekst-tijelo { flex: 1 1 auto; min-width: 0; }
.convo-kontekst-naslov {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 2px;
}
.convo-kontekst-naslov i { margin-right: 5px; }
.convo-kontekst-tekst {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.convo-kontekst-x {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 6px;
}

/* Meni koji iskace na dugi pritisak */
.convo-meni-omot {
    position: fixed;
    inset: 0;
    z-index: 1000001;               /* iznad chat-fullscreen kontejnera */
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 14px;
    animation: kkMeniUlaz 0.15s ease;
}
@keyframes kkMeniUlaz { from { opacity: 0; } to { opacity: 1; } }
.convo-meni {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.convo-meni-stavka {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 0.95rem;
    text-align: left;
    padding: 15px 18px;
    cursor: pointer;
}
.convo-meni-stavka i { width: 18px; text-align: center; color: var(--primary); }
.convo-meni-stavka:hover { background: var(--bg-section); }
.convo-meni-stavka.opasno { color: #e35b5b; }
.convo-meni-stavka.opasno i { color: #e35b5b; }
.convo-meni-otkazi {
    justify-content: center;
    border-bottom: none;
    color: var(--text-muted);
    font-weight: 600;
}

/* Ad context card — shows which ad a conversation refers to */
.convo-ad-card {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(212, 160, 23, 0.12), rgba(212, 160, 23, 0.04));
    border: 1px solid rgba(212, 160, 23, 0.35);
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    margin: 6px 0 2px 0;
}
.convo-ad-card:hover {
    transform: translateY(-1px);
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(212, 160, 23, 0.18), rgba(212, 160, 23, 0.06));
}
.convo-ad-thumb {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-section);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.3rem;
    border: 1px solid var(--border);
}
.convo-ad-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.convo-ad-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.convo-ad-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary);
    font-weight: 700;
}
.convo-ad-label i { margin-right: 4px; }
.convo-ad-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.convo-ad-price {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary);
}
.convo-ad-open {
    flex-shrink: 0;
    color: var(--primary);
    font-size: 0.85rem;
    opacity: 0.7;
}
.convo-ad-card-missing {
    cursor: default;
    opacity: 0.75;
    background: var(--bg-section);
    border-color: var(--border);
}
.convo-ad-card-missing:hover {
    transform: none;
    border-color: var(--border);
    background: var(--bg-section);
}
.convo-ad-card-missing .convo-ad-label,
.convo-ad-card-missing .convo-ad-price { color: var(--text-muted); }

/* Profile-sourced contact marker */
.convo-profile-marker {
    align-self: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-section);
    border: 1px dashed var(--border);
    padding: 6px 14px;
    border-radius: 20px;
    margin: 6px 0 2px 0;
    letter-spacing: 0.3px;
}
.convo-profile-marker i {
    margin-right: 6px;
    color: var(--primary);
}
.convo-input {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
.convo-input textarea {
    flex: 1;
    background: var(--bg-section);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: none;
}
.convo-input textarea:focus {
    border-color: var(--primary);
    outline: none;
}
.btn-send {
    background: var(--primary);
    color: #000;
    border: none;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
    font-weight: 600;
}
.btn-send:hover { opacity: 0.9; }

/* ==================== FULLSCREEN CHAT (Instagram-like) ==================== */
/* Sakrij nav/footer/title kad si u fullscreen chatu */
body.chat-fullscreen #navbar,
body.chat-fullscreen .footer,
body.chat-fullscreen .pwa-banner,
body.chat-fullscreen #pwa-install-banner,
body.chat-fullscreen .bottom-nav,
body.chat-fullscreen #page-messages .panel-title {
    display: none !important;   /* i donji meni — inace viri ispod razgovora */
}

/* Skini sve paddinge sa parent containera u messages page */
body.chat-fullscreen #page-messages .section {
    padding: 0;
    margin: 0;
}
body.chat-fullscreen #page-messages .container {
    padding: 0;
    max-width: none;
}
body.chat-fullscreen #page-messages .page-panel {
    padding: 0 !important;
    margin: 0;
    background: var(--bg);
    border: none;
    box-shadow: none;
    border-radius: 0;
}

/* Body — sprijeci background scroll dok je chat otvoren */
html.chat-fullscreen,
body.chat-fullscreen {
    overflow: hidden !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Kontejner za chat — flex kolona pinovana na vrh. Visinu na mobilnom JS
   postavlja na visualViewport.height (da se skupi kad se otvori tastatura,
   pa input ostane tačno iznad nje). Na desktopu = puna visina prozora. */
#chat-fullscreen-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 100% !important;            /* JS može override-ovati (setProperty important) */
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    z-index: 999999 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* messages-content = flex kolona koja popunjava container */
#chat-fullscreen-container > #messages-content {
    position: relative !important;
    inset: auto !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;        /* prepisuje bazni max-height: 65vh */
    overflow: hidden !important;         /* skrol je na .convo-messages */
    width: 100% !important;
    padding: 0 !important;
}

/* Header — fiksna visina na vrhu */
body.chat-fullscreen .convo-header {
    flex: 0 0 auto !important;
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    z-index: 5;
}

/* Poruke — rastežu se i skroluju između header-a i input-a */
body.chat-fullscreen .convo-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    position: relative !important;
    top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
    max-height: none !important;
    height: auto !important;
    overflow-y: auto !important;
    padding: 14px !important;
    margin: 0 !important;
    -webkit-overflow-scrolling: touch;
}

/* Input — uvijek na DNU flex kolone (iznad tastature kad se container skupi) */
body.chat-fullscreen .convo-input {
    flex: 0 0 auto !important;
    position: relative !important;
    bottom: auto !important; left: auto !important; right: auto !important;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 10px 14px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    z-index: 5;
}

/* ==================== REPORT CARDS ==================== */
.report-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: var(--bg-card);
    border-radius: 10px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
}
.report-resolved { opacity: 0.5; }
.report-info strong {
    color: var(--text-bright);
    display: block;
    margin-bottom: 4px;
}
.report-info p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 4px;
}
.report-info small {
    color: var(--text-muted);
    font-size: 0.75rem;
}
.report-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.btn-sm {
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
}
.btn-sm.btn-danger { background: var(--danger); color: #fff; }
.btn-sm.btn-warning { background: var(--warning); color: #000; }
.btn-sm.btn-success { background: var(--success); color: #fff; }
.btn-sm.btn-muted { background: var(--bg-section); color: var(--text); border: 1px solid var(--border); }
.btn-sm.btn-view { background: var(--bg-section); color: var(--primary); border: 1px solid var(--border); }
.btn-sm.btn-primary { background: var(--primary); color: #fff; }
.btn-sm.btn-info { background: var(--bg-section); color: var(--primary); border: 1px solid var(--border); }
.btn-sm.btn-info:hover { background: rgba(212, 160, 23, 0.12); }

/* ==================== ADMIN PANEL ==================== */
.admin-stats-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
}
.admin-stats-row .admin-stat {
    flex: 1 1 180px;
    max-width: 240px;
    min-width: 160px;
}
.admin-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}
.admin-stat i {
    font-size: 1.5rem;
    color: var(--primary);
    display: block;
    margin-bottom: 8px;
}
.admin-stat span {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-bright);
    display: block;
}
.admin-stat label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 4px;
    display: block;
}
.admin-search-bar {
    margin-bottom: 20px;
}
.admin-search-bar input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-section);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.9rem;
    font-family: inherit;
}
.admin-search-bar input:focus {
    border-color: var(--primary);
    outline: none;
}
.admin-users-table {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.admin-table-header {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1fr 1fr 0.5fr 0.8fr 1fr;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-section);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}
.admin-table-row {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1fr 1fr 0.5fr 0.8fr 1fr;
    gap: 10px;
    padding: 12px 16px;
    align-items: center;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text);
}
.admin-table-row:hover {
    background: var(--bg-section);
}
.admin-row-banned {
    opacity: 0.6;
}
.admin-user-name {
    color: var(--text-bright);
    font-weight: 500;
}
.admin-user-name i {
    color: var(--text-muted);
    margin-right: 6px;
}
.admin-status {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    text-align: center;
}
.status-ok { color: var(--success); background: rgba(40,167,69,0.1); }
.status-banned { color: var(--danger); background: rgba(220,53,69,0.1); }
.admin-actions {
    display: flex;
    gap: 6px;
}

/* ---- Admin Tabs ---- */
.admin-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 25px;
}
/* Zaglavlje admina: Statistika preko cijele širine, ostalih šest u dvije
   kolone po tri — isto na računaru i telefonu (08.10.2026) */
#admin-tab-statistika { grid-column: 1 / -1; padding: 14px 20px; font-size: 1rem; font-weight: 600; }
.admin-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    gap: 8px;
    padding: 10px 20px;
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
}
.admin-tab:hover {
    color: var(--text);
    border-color: rgba(255,255,255,0.12);
}
.admin-tab.active {
    background: rgba(212,160,23,0.1);
    border-color: rgba(212,160,23,0.3);
    color: var(--primary);
}
.admin-tab-badge {
    background: var(--warning);
    color: #000;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    min-width: 20px;
    text-align: center;
}

/* ---- Admin Pending Ad Cards ---- */
.admin-pending-card {
    display: flex;
    gap: 20px;
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 14px;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
}
.admin-pending-card:hover {
    border-color: rgba(212,160,23,0.3);
    background: var(--bg-card-hover);
}
.admin-pending-img {
    flex-shrink: 0;
    width: 160px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-section);
}
.admin-pending-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.admin-pending-no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 2rem;
}
.admin-pending-body {
    flex: 1;
    min-width: 0;
}
.admin-pending-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}
.admin-pending-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-bright);
}
.admin-pending-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
}
.admin-pending-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.admin-pending-meta i {
    margin-right: 4px;
    color: var(--primary);
}
.admin-pending-details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.admin-pending-details span {
    background: rgba(255,255,255,0.05);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    color: var(--text);
    border: 1px solid var(--border);
}
.admin-pending-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 8px;
}
.admin-pending-owner {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.admin-pending-owner i {
    margin-right: 4px;
}
.admin-pending-actions {
    display: flex;
    gap: 6px;
}
.admin-pending-actions .btn-sm {
    font-size: 0.72rem;
    padding: 4px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-approve {
    background: rgba(46,204,113,0.15) !important;
    color: var(--success) !important;
    border: 1px solid rgba(46,204,113,0.3) !important;
}
.btn-approve:hover {
    background: rgba(46,204,113,0.25) !important;
}
.btn-reject {
    background: rgba(231,76,60,0.15) !important;
    color: var(--danger) !important;
    border: 1px solid rgba(231,76,60,0.3) !important;
}
.btn-reject:hover {
    background: rgba(231,76,60,0.25) !important;
}
.btn-upgrade-admin {
    background: rgba(212,160,23,0.15) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(212,160,23,0.3) !important;
}
.btn-upgrade-admin:hover {
    background: rgba(212,160,23,0.25) !important;
}

/* ---- Dashboard pending status ---- */
.status-pending {
    color: var(--warning);
    background: rgba(243,156,18,0.1);
}
.dash-ad-pending {
    border-left: 3px solid var(--warning);
    opacity: 0.85;
}

/* ==================== RESPONSIVE ADMIN ==================== */
@media (max-width: 768px) {
    .admin-stats-row {
        flex-direction: column;
    }
    .admin-stats-row .admin-stat,
    .admin-dashboard-row .admin-stat {
        flex: 0 0 auto !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
        padding: 12px 14px !important;
    }
    /* Uniformna kompaktna veličina za SVE dashboard kartice na telefonu */
    .admin-stat i {
        font-size: 1.15rem;
        margin-bottom: 4px;
    }
    .admin-stat span {
        font-size: 1.35rem;
    }
    .admin-stat label {
        font-size: 0.7rem;
    }
    .admin-dashboard-row {
        flex-direction: column;
    }
    .admin-tabs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .admin-tab {
        padding: 10px 12px;
        font-size: 0.82rem;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .admin-tab i {
        flex-shrink: 0;
    }
    /* Admin statistika je primarna — zauzima cijeli red */
    #admin-tab-stats {
        grid-column: 1 / -1;
    }
    .admin-pending-card {
        flex-direction: column;
    }
    .admin-pending-img {
        width: 100%;
        height: 180px;
    }
    .admin-pending-header {
        flex-direction: column;
    }
    .admin-pending-actions {
        flex-wrap: wrap;
    }
    .admin-table-header { display: none; }
    .admin-table-row {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 15px;
    }
    .admin-user-name { grid-column: 1 / -1; }
    .admin-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .report-card { flex-direction: column; align-items: flex-start; gap: 10px; }
    .convo-bubble { max-width: 85%; }
    .page-panel { max-width: 100%; }
}

/* ==================== ADRESAR (DIRECTORY) PAGE ==================== */
/* Adresar search */
.adresar-search-wrap {
    position: relative;
    margin-bottom: 12px;
}
.adresar-search-wrap i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.9rem;
    pointer-events: none;
}
.adresar-search-wrap input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    background: var(--bg-section);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.9rem;
    font-family: inherit;
    box-sizing: border-box;
}
.adresar-search-wrap input:focus {
    border-color: var(--primary);
    outline: none;
}

.adresar-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 25px;
}
.adresar-filters select {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-section);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
}
.adresar-filters select:focus {
    border-color: var(--primary);
    outline: none;
}
.adresar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.adresar-card {
    display: flex;
    gap: 16px;
    align-items: center;
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 18px;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.adresar-card:hover {
    transform: translateY(-3px);
    border-color: rgba(212,160,23,0.3);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    background: var(--bg-card-hover);
}
.adresar-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-section);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 700;
    color: var(--primary);
    font-size: 1.1rem;
}
.adresar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.adresar-info {
    min-width: 0;
}
.adresar-name {
    font-weight: 600;
    color: var(--text-bright);
    font-size: 1rem;
    margin-bottom: 4px;
}
.adresar-type {
    font-size: 0.82rem;
    color: var(--primary);
    margin-bottom: 2px;
}
.adresar-type i, .adresar-city i, .adresar-ads i {
    margin-right: 5px;
    width: 14px;
    text-align: center;
}
.adresar-city {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.adresar-ads {
    font-size: 0.8rem;
    color: var(--text-muted);
}

@media (max-width: 600px) {
    .adresar-filters {
        flex-direction: column;
    }
    .adresar-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== HISTORY PAGE ==================== */
.history-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.history-tab {
    flex: 1;
    padding: 12px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.history-tab:hover {
    border-color: var(--primary);
    color: var(--text-bright);
}

.history-tab.active {
    background: rgba(212, 160, 23, 0.1);
    border-color: var(--primary);
    color: var(--primary);
}

.history-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.btn-clear-history {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-clear-history:hover {
    border-color: var(--danger);
    color: var(--danger);
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 6px;
}

/* Scroll na list-stranicama da se ne sire u nedogled */
#messages-content,
#favorites-content,
#saved-profiles-content,
#saved-filters-content {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 6px;
}
@media (max-width: 768px) {
    .history-list,
    #messages-content,
    #favorites-content,
    #saved-profiles-content,
    #saved-filters-content {
        max-height: 65vh;
    }
}

/* Custom scrollbar za list-stranice — diskretan, prati zlatnu temu */
#messages-content::-webkit-scrollbar,
#favorites-content::-webkit-scrollbar,
#saved-profiles-content::-webkit-scrollbar,
#saved-filters-content::-webkit-scrollbar,
.history-list::-webkit-scrollbar {
    width: 6px;
}
#messages-content::-webkit-scrollbar-thumb,
#favorites-content::-webkit-scrollbar-thumb,
#saved-profiles-content::-webkit-scrollbar-thumb,
#saved-filters-content::-webkit-scrollbar-thumb,
.history-list::-webkit-scrollbar-thumb {
    background: rgba(212,160,23,0.25);
    border-radius: 3px;
}
#messages-content::-webkit-scrollbar-thumb:hover,
#favorites-content::-webkit-scrollbar-thumb:hover,
#saved-profiles-content::-webkit-scrollbar-thumb:hover,
#saved-filters-content::-webkit-scrollbar-thumb:hover,
.history-list::-webkit-scrollbar-thumb:hover {
    background: rgba(212,160,23,0.5);
}

.history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
}

.history-item:hover {
    border-color: var(--primary);
    background: var(--bg-card-hover);
}

.history-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(212, 160, 23, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
}

.history-item-info {
    flex: 1;
    min-width: 0;
}

.history-item-info strong {
    display: block;
    color: var(--text-bright);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-item-info span {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: block;
}

.history-time {
    font-size: 0.75rem !important;
    color: var(--text-muted);
    margin-top: 2px;
}

.history-item-arrow {
    color: var(--text-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.2s;
}

.history-item:hover .history-item-arrow {
    opacity: 1;
}

.history-visited-img {
    width: 60px;
    height: 42px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-section);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border);
}

.history-visited-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history-expired {
    opacity: 0.5;
    cursor: default;
}

.history-expired:hover {
    border-color: var(--border);
    background: var(--bg-card);
}

.history-badge-expired {
    font-size: 0.72rem;
    color: var(--danger);
    background: rgba(231, 76, 60, 0.1);
    padding: 3px 10px;
    border-radius: 12px;
    flex-shrink: 0;
}

.history-empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-muted);
}

.history-empty i {
    font-size: 3rem;
    color: var(--border);
    margin-bottom: 15px;
    display: block;
}

.history-empty p {
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .history-tabs {
        flex-direction: column;
    }
}

/* ==================== UPGRADE AD ==================== */
.btn-upgrade {
    background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
    color: #000 !important;
    border: none;
}

.btn-upgrade:hover {
    filter: brightness(1.15);
}

.upgrade-plan-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-section);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
}

.upgrade-plan-option:hover {
    border-color: rgba(212, 160, 23, 0.4);
    background: var(--bg-card-hover);
}

.upgrade-plan-option.active {
    border-color: var(--primary);
    background: rgba(212, 160, 23, 0.08);
}

.upgrade-plan-radio {
    font-size: 1.2rem;
    color: var(--border);
    flex-shrink: 0;
}

.upgrade-plan-option.active .upgrade-plan-radio {
    color: var(--primary);
}

.upgrade-plan-info {
    flex: 1;
}

.upgrade-plan-info strong {
    display: block;
    color: var(--text-bright);
    font-size: 0.95rem;
    margin-bottom: 3px;
}

.upgrade-plan-info span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ==================== COMPARE PAGE ==================== */
.compare-selectors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.compare-slot {
    min-height: 100px;
    background: var(--bg-card);
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s;
    overflow: hidden;
}

.compare-slot:hover {
    border-color: var(--primary);
}

.compare-pick-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    transition: color 0.3s;
}

.compare-pick-btn i {
    font-size: 2rem;
    color: var(--primary);
}

.compare-pick-btn:hover {
    color: var(--text-bright);
}

.compare-vs {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: var(--bg-card);
    border: 2px solid var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.1rem;
}

.compare-selected {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    width: 100%;
    min-width: 0;
}

.compare-selected-img {
    width: 70px;
    height: 50px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-section);
    display: flex;
    align-items: center;
    justify-content: center;
}

.compare-selected-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.compare-selected-info {
    flex: 1;
    min-width: 0;
}

.compare-selected-info strong {
    display: block;
    color: var(--text-bright);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compare-selected-info span {
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 600;
}

.compare-remove {
    background: rgba(231, 76, 60, 0.15);
    border: none;
    color: var(--danger);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.compare-remove:hover {
    background: rgba(231, 76, 60, 0.3);
}

/* Compare Table */
.compare-table {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.compare-row {
    display: grid;
    grid-template-columns: 140px repeat(var(--compare-cols, 2), 1fr);
    border-bottom: 1px solid var(--border);
}

.compare-row:last-child {
    border-bottom: none;
}

.compare-header-row {
    background: var(--bg-section);
}

.compare-label {
    padding: 12px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    border-right: 1px solid var(--border);
}

.compare-label i {
    color: var(--primary);
    width: 16px;
    text-align: center;
}

.compare-val {
    padding: 12px 16px;
    font-size: 0.9rem;
    color: var(--text);
    display: flex;
    align-items: center;
    border-right: 1px solid var(--border);
    transition: background 0.3s;
}

.compare-val:last-child {
    border-right: none;
}

.compare-header-row .compare-val {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    text-align: center;
}

.compare-header-row .compare-val strong {
    color: var(--text-bright);
    font-size: 0.85rem;
}

.compare-header-img {
    width: 120px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-dark);
}

.compare-header-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.compare-better {
    background: rgba(46, 204, 113, 0.1);
    color: var(--success);
    font-weight: 600;
}

/* Compare Picker Modal */
.compare-picker-list {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.compare-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
}

.compare-picker-item:hover {
    border-color: var(--primary);
    background: var(--bg-card-hover);
}

.compare-picker-img {
    width: 60px;
    height: 42px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border);
}

.compare-picker-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.compare-picker-info {
    flex: 1;
    min-width: 0;
}

.compare-picker-info strong {
    display: block;
    color: var(--text-bright);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compare-picker-info span {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Compare Picker Folders */
.compare-picker-folder {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.compare-picker-folder-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-card);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-bright);
    transition: background 0.2s;
}

.compare-picker-folder-header:hover {
    background: var(--bg-card-hover);
}

.compare-picker-chevron {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform 0.3s;
}

.compare-picker-folder.collapsed .compare-picker-chevron {
    transform: rotate(-90deg);
}

.compare-picker-folder-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    max-height: 45vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.compare-picker-folder.collapsed .compare-picker-folder-body {
    display: none;
}

/* Responsive Compare */
@media (max-width: 768px) {
    .compare-selectors {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        overflow: hidden;
    }
    .compare-slot:nth-child(3),
    .compare-slot:nth-child(4) {
        display: none;
    }
    .compare-slot {
        width: 100%;
        min-height: 80px;
        overflow: hidden;
    }
    .compare-selected {
        padding: 10px;
        gap: 8px;
    }
    .compare-selected-img {
        width: 45px;
        height: 40px;
    }
    .compare-selected-info strong {
        font-size: 0.75rem;
    }
    .compare-selected-info span {
        font-size: 0.7rem;
    }
    .compare-pick-btn {
        font-size: 0.8rem;
        padding: 12px;
        gap: 6px;
    }
    .compare-pick-btn i {
        font-size: 1.3rem;
    }
    .compare-selected-img {
        width: 40px;
        height: 40px;
    }
    .compare-selected-info strong {
        font-size: 0.75rem;
    }
    .compare-selected-info span {
        font-size: 0.7rem;
    }
    .compare-row {
        grid-template-columns: 110px 1fr 1fr;
    }
    .compare-label {
        font-size: 0.72rem;
        padding: 8px 8px;
    }
    .compare-val {
        font-size: 0.75rem;
        padding: 8px 8px;
    }
    .compare-header-img {
        width: 60px;
        height: 40px;
    }
    .compare-header-row .compare-val strong {
        font-size: 0.72rem;
    }
}

/* ==================== PWA INSTALL BANNER ==================== */
#pwa-install-banner {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: calc(100% - 30px);
    max-width: 500px;
    transition: bottom 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#pwa-install-banner.show {
    /* Iznad sistemske trake za geste — isto racunato kao donji meni. */
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
}

.pwa-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 18px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    backdrop-filter: blur(6px);
}

.pwa-banner-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    overflow: hidden;
}

.pwa-banner-icon img {
    width: 100%;
    height: 100%;
}

.pwa-banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pwa-banner-text strong {
    color: var(--text-bright);
    font-size: 0.9rem;
}

.pwa-banner-text span {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.pwa-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pwa-install-btn {
    background: var(--primary);
    color: var(--bg-dark);
    border: none;
    padding: 8px 18px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s;
}

.pwa-install-btn:hover {
    background: var(--primary-light);
}

.pwa-dismiss-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 6px;
    transition: color 0.2s;
}

.pwa-dismiss-btn:hover {
    color: var(--text-bright);
}

/* ==================== CUSTOM SELECT DROPDOWN ==================== */
.custom-select-wrap {
    position: relative;
    flex: 1;
    min-width: 110px;
}

.custom-select-btn {
    width: 100%;
    height: 40px;
    padding: 0 32px 0 14px;
    box-sizing: border-box;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 38px;
    text-align: left;
    cursor: pointer;
    outline: none;
    transition: border-color 0.3s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
}

.custom-select-btn::after {
    content: '\f078';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.55rem;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.custom-select-btn.open {
    border-color: var(--primary);
}

.custom-select-list {
    display: none;
    position: fixed;
    max-height: 300px;
    overflow-y: auto;
    background: var(--bg-dark);
    border: 1px solid rgba(212,160,23,0.4);
    border-radius: var(--radius-sm);
    z-index: 99999;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    scrollbar-width: thin;
    scrollbar-color: var(--primary-dark) transparent;
}

.custom-select-list::-webkit-scrollbar { width: 5px; }
.custom-select-list::-webkit-scrollbar-track { background: transparent; }
.custom-select-list::-webkit-scrollbar-thumb { background: var(--primary-dark); border-radius: 3px; }

.custom-select-list.open {
    display: block;
}

.custom-select-option {
    padding: 10px 14px;
    font-size: 0.85rem;
    color: var(--text);
    cursor: pointer;
    transition: background 0.12s;
}

.custom-select-option:hover,
.custom-select-option.active {
    background: rgba(212,160,23,0.1);
    color: var(--text-bright);
}

.custom-select-option.active {
    color: var(--primary);
    font-weight: 600;
}

/* ==================== LANDSCAPE BLOCKER ==================== */
@media screen and (orientation: landscape) and (max-height: 500px) {
    #landscape-blocker {
        display: flex !important;
    }
}

#landscape-blocker {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: var(--bg-dark);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: var(--text-bright);
    text-align: center;
    padding: 20px;
}

#landscape-blocker i {
    font-size: 3rem;
    color: var(--primary);
    animation: rotatePhone 2s ease-in-out infinite;
}

#landscape-blocker p {
    font-size: 1.1rem;
    color: var(--text-muted);
}

@keyframes rotatePhone {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-90deg); }
    75% { transform: rotate(-90deg); }
}

/* ==================== POLISH & AESTHETIC DETAILS ====================
   Svi efekti su statični ili jednokratni — bez performance hita
   čak i na slabijim telefonima. */

/* 1. Fade-in za kartice pri renderu (jednokratna animacija) */
@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.vehicles-grid .vehicle-card {
    animation: cardFadeIn 0.35s ease-out backwards;
}
.vehicles-grid .vehicle-card:nth-child(1)  { animation-delay: 0.00s; }
.vehicles-grid .vehicle-card:nth-child(2)  { animation-delay: 0.03s; }
.vehicles-grid .vehicle-card:nth-child(3)  { animation-delay: 0.06s; }
.vehicles-grid .vehicle-card:nth-child(4)  { animation-delay: 0.09s; }
.vehicles-grid .vehicle-card:nth-child(5)  { animation-delay: 0.12s; }
.vehicles-grid .vehicle-card:nth-child(6)  { animation-delay: 0.15s; }
.vehicles-grid .vehicle-card:nth-child(7)  { animation-delay: 0.18s; }
.vehicles-grid .vehicle-card:nth-child(8)  { animation-delay: 0.21s; }
.vehicles-grid .vehicle-card:nth-child(9)  { animation-delay: 0.24s; }
.vehicles-grid .vehicle-card:nth-child(10) { animation-delay: 0.27s; }
.vehicles-grid .vehicle-card:nth-child(n+11) { animation-delay: 0.3s; }

/* 2. Active state — scale feedback za sve dugmad */
button:active,
.btn-primary:active,
.nav-post-btn:active,
.btn-pricing:active,
.contact-btn:active,
.action-btn:active,
.biz-save-btn:active,
.btn-auth-prompt:active {
    transform: scale(0.97);
    transition: transform 0.08s ease;
}

/* 3. Focus ring sa brand glow-om za inputs */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(212,160,23,0.2);
    border-color: var(--primary) !important;
}
button:focus-visible,
a:focus-visible {
    outline: 2px solid rgba(212,160,23,0.4);
    outline-offset: 2px;
    border-radius: 4px;
}

/* 4. Sticky table headers u admin panelu */
.admin-users-table thead th,
.admin-users-list-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg-card-solid);
}

/* 5. Divider sa zlatnom tačkom u sredini */
hr, .divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--border) 40%,
        var(--primary) 50%,
        var(--border) 60%,
        transparent 100%);
    margin: 20px 0;
    position: relative;
}

/* 7. Letter-spacing na velikim naslovima (profesionalnije) */
h1, .panel-title, .hero h1, .vd-title, .dash-section-title {
    letter-spacing: -0.3px;
}

/* 8. Tabular nums — brojevi u istoj širini kolone (cijene, km, godište) */
.card-price,
.vd-price,
.dash-stat span,
.card-spec,
.compare-val,
.biz-brand-tag {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* 9. Accent linija pored section naslova */
.dash-section-title {
    padding-left: 14px;
    border-left: 3px solid var(--primary);
}
.vd-specs > h3,
.vd-description > h3,
.vd-equipment > h3,
.vd-seller > h3 {
    position: relative;
    padding-left: 14px;
}
.vd-specs > h3::before,
.vd-description > h3::before,
.vd-equipment > h3::before,
.vd-seller > h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: var(--primary);
    border-radius: 2px;
}

/* 10. Gradient placeholder za slike (umjesto ravnog) */
.placeholder-img {
    background: linear-gradient(135deg,
        rgba(212,160,23,0.08) 0%,
        rgba(18,18,38,0.6) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 11. Break-word za duge naslove */
.card-title,
.vd-title,
.dash-ad-title,
.alert-card-label,
.notif-bell-item-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* 6. Enhanced selection — jači zlatni highlight */
::selection {
    background: rgba(212,160,23,0.4);
    color: var(--text-bright);
    text-shadow: 0 0 3px rgba(212,160,23,0.3);
}
::-moz-selection {
    background: rgba(212,160,23,0.4);
    color: var(--text-bright);
}

/* ==================== SKELETON LOADERS ==================== */
.skeleton-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--glass-inset);
}
.skeleton-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: rgba(255,255,255,0.04);
}
.skeleton-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.skeleton-line {
    background-color: rgba(255,255,255,0.06);
    border-radius: 6px;
}
.skeleton-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 6px 0;
}
.skeleton-spec {
    height: 22px;
    background-color: rgba(255,255,255,0.04);
    border-radius: 15px;
}
.skeleton-shimmer {
    position: relative;
    overflow: hidden;
}
.skeleton-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 160, 23, 0.06) 50%,
        transparent 100%);
    animation: skeletonShimmer 1.6s infinite;
}
@keyframes skeletonShimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@media (max-width: 768px) {
    .skeleton-img { aspect-ratio: 1 / 1; }
    .skeleton-body { padding: 10px; gap: 8px; }
    .skeleton-spec { height: 16px; }
}

/* ==================== PREMIUM CARD TREATMENT ====================
   Suptilan unutrašnji highlight sa vrha — daje dubinu i premium utisak
   bez agresivnih linija. Primjenjuje se na glavne "glass" kartice. */
.vehicle-card,
.biz-info-card,
.fav-folder-section,
.alert-card,
.pricing-card,
.vd-specs,
.vd-description,
.vd-equipment,
.vd-seller,
.profile-header-card,
.profile-working-hours,
.alert-form,
.biz-profile-edit,
.notif-bell-dropdown,
.dash-stat {
    box-shadow: var(--glass-inset), 0 4px 20px rgba(0,0,0,0.2);
}

/* ==================== BUSINESS PROFILE EDIT (dashboard) ==================== */
.biz-profile-edit {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 20px;
}
.biz-profile-hint {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-bottom: 18px;
}
.biz-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}
.biz-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.biz-form-full { grid-column: 1 / -1; }
.biz-form-group label {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.biz-form-group label i { color: var(--primary); width: 14px; }
.biz-form-group input,
.biz-form-group textarea {
    background: var(--bg-section);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}
.biz-form-group input:focus,
.biz-form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
}
.biz-form-group textarea { resize: vertical; min-height: 90px; }
.biz-save-btn {
    background: var(--gradient-primary);
    color: #0a0a14;
    border: none;
    padding: 11px 28px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
    box-shadow: 0 4px 14px rgba(212,160,23,0.3);
}
.biz-save-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(212,160,23,0.45);
    filter: brightness(1.05);
}
.biz-save-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

@media (max-width: 768px) {
    .biz-form-grid { grid-template-columns: 1fr; }
    .biz-profile-edit { padding: 16px; }
}

/* ==================== BUSINESS PROFILE DISPLAY (public) ==================== */
.biz-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 25px 0;
}
.biz-info-card {
    background: linear-gradient(160deg, rgba(32,32,56,0.55) 0%, rgba(16,16,32,0.62) 100%);
    border: 1px solid rgba(212,160,23,0.14);
    border-radius: 16px;
    padding: 18px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(0,0,0,0.22);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
/* Zlatna akcent-linija na vrhu (pojača se na hover) */
.biz-info-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212,160,23,0.55), transparent);
    opacity: 0.5;
    transition: opacity 0.25s ease;
}
.biz-info-card:hover {
    transform: translateY(-3px);
    border-color: rgba(212,160,23,0.4);
    box-shadow: 0 14px 34px rgba(0,0,0,0.35);
}
.biz-info-card:hover::before { opacity: 1; }
.biz-info-card-full { grid-column: 1 / -1; }
.biz-info-card h4 {
    color: var(--text-bright);
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.2px;
}
/* Ikona naslova u zaobljenom zlatnom badge-u */
.biz-info-card h4 i {
    background: rgba(212,160,23,0.14);
    border: 1px solid rgba(212,160,23,0.22);
    width: 30px; height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.biz-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--text);
    background: var(--bg-section);
    border-radius: 8px;
    margin-bottom: 6px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
    font-size: 0.88rem;
}
.biz-contact-row:last-child { margin-bottom: 0; }
.biz-contact-row:hover {
    background: var(--bg-card-hover);
    color: var(--primary);
    transform: translateX(3px);
}
.biz-contact-row i {
    color: var(--primary);
    width: 16px;
    flex-shrink: 0;
}
.biz-contact-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.biz-social-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.biz-social-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
    transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s, border-color 0.25s, color 0.25s, opacity 0.25s;
}
.biz-social-btn:hover { transform: translateY(-3px) scale(1.08); color: #fff; }
.biz-social-fb { background: #1877f2; box-shadow: 0 3px 12px rgba(24,119,242,0.35); }
.biz-social-ig { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); box-shadow: 0 3px 12px rgba(220,39,67,0.35); }
.biz-social-tt { background: #000; border: 1px solid #333; box-shadow: 0 3px 12px rgba(0,0,0,0.5); position: relative; }

.biz-about-section { margin-bottom: 18px; }
.biz-about-section:last-child { margin-bottom: 0; }
.biz-about-section h4 {
    color: var(--text-bright);
    font-size: 0.95rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.biz-about-section p {
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre-wrap;
}
.biz-brands-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.biz-brand-tag {
    background: rgba(212,160,23,0.12);
    border: 1px solid rgba(212,160,23,0.3);
    color: var(--primary);
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 0.82rem;
    font-weight: 600;
}

@media (max-width: 768px) {
    .biz-info-grid { grid-template-columns: 1fr; gap: 12px; }
    .biz-info-card { padding: 16px; }
}

/* ==================== PAYMENT GATEWAY forma ==================== */
#admin-gateway-form .gw-help {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 4px 0 0;
}
#admin-gateway-form .gw-warn {
    background: rgba(184, 134, 11, 0.08);
    border: 1px solid rgba(184, 134, 11, 0.3);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    gap: 12px;
    align-items: start;
    font-size: 0.85rem;
    color: var(--text-muted);
}
#admin-gateway-form .gw-warn i { color: var(--primary); font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
#admin-gateway-form .gw-readonly { opacity: 0.7; font-family: 'Courier New', monospace; font-size: 0.82rem; }


/* ==================== ADMIN DASHBOARD (standardizovan stats row) ==================== */
.admin-dashboard-row {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: stretch;
}
.admin-dashboard-row .admin-stat {
    flex: 1 1 180px;
    min-width: 160px;
}
.admin-dashboard-btn {
    margin-left: auto;
    background: var(--gradient-primary);
    color: #000;
    border: none;
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    align-self: stretch;
    min-height: 60px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.admin-dashboard-btn i { font-size: 1.1rem; }
.admin-dashboard-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.admin-dashboard-btn--ghost {
    background: var(--bg-section);
    color: var(--text);
    border: 1px solid var(--border);
}
.admin-dashboard-btn--ghost:hover { background: var(--bg-dark); }

@media (max-width: 700px) {
    .admin-dashboard-btn { margin-left: 0; width: 100%; padding: 12px 22px; }
}

/* ==================== SUBSCRIPTION (Moja pretplata) ==================== */
.sub-card {
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 20px;
}
.sub-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 4px;
}
.sub-value { font-size: 1.3rem; font-weight: 700; color: var(--text-bright); }
.sub-value-small { font-size: 0.95rem; font-weight: 600; color: var(--text-bright); }
.sub-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    padding: 18px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
}
.sub-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sub-btn {
    border: none;
    padding: 11px 22px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.sub-btn-primary { background: var(--gradient-primary); color: #000; }
.sub-btn-primary:hover { filter: brightness(1.12); transform: translateY(-1px); }
.sub-btn-lg { padding: 14px 32px; font-size: 1rem; }
.sub-btn-ghost { background: var(--bg-dark); color: var(--text); border: 1px solid var(--border); }
.sub-btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.sub-btn-danger:hover { background: var(--danger); color: #fff; }

.sub-status-pending {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--warning);
    font-weight: 700;
    margin-bottom: 12px;
}
.sub-alert {
    display: flex;
    gap: 14px;
    background: rgba(231, 111, 81, 0.12);
    border: 1px solid rgba(231, 111, 81, 0.35);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
    color: var(--text);
    font-size: 0.88rem;
}
.sub-alert i { color: var(--danger); font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }

.sub-offer {
    background: linear-gradient(135deg, rgba(184,134,11,0.08), rgba(184,134,11,0.02));
    border: 2px solid var(--primary);
    border-radius: 18px;
    padding: 36px;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    position: relative;
}
.sub-offer-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-primary);
    color: #000;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.72rem;
    letter-spacing: 2px;
    font-weight: 800;
}
.sub-offer h3 { color: var(--text-bright); margin: 8px 0 12px; font-size: 1.4rem; }
.sub-offer-price {
    color: var(--primary);
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    margin: 8px 0;
}
.sub-offer-price span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 4px;
}
.sub-offer-subtitle { color: var(--text-muted); margin-bottom: 24px; font-size: 0.95rem; }
.sub-offer-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    text-align: left;
}
.sub-offer-features li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 0.9rem;
    display: flex;
    gap: 10px;
}
.sub-offer-features li:last-child { border-bottom: none; }
.sub-offer-features i { color: var(--success); flex-shrink: 0; margin-top: 3px; }
.sub-offer-note { color: var(--text-muted); font-size: 0.78rem; margin-top: 14px; line-height: 1.5; }

.sub-charge-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 16px;
    align-items: center;
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 6px;
    font-size: 0.88rem;
}
.sub-charge-date { color: var(--text); font-weight: 600; }
.sub-charge-amount { color: var(--primary); font-weight: 700; }
.sub-charge-inv { color: var(--text-muted); font-size: 0.82rem; }

@media (max-width: 600px) {
    .sub-offer { padding: 28px 18px; }
    .sub-offer-price { font-size: 2.3rem; }
    .sub-charge-row { grid-template-columns: 1fr auto; row-gap: 4px; }
}

/* ==================== GRATIS SLOTOVI ==================== */
.gratis-panel {
    background: linear-gradient(135deg, rgba(184,134,11,0.08), rgba(184,134,11,0.02));
    border: 1px solid var(--primary);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 24px;
}
.gratis-panel-header h3 {
    color: var(--primary);
    margin: 0 0 6px;
    font-size: 1.15rem;
}
.gratis-panel-header p {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0 0 16px;
}
.gratis-tier-label {
    color: var(--text-bright);
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.gratis-tier-label i { color: var(--primary); }

.gratis-slots-grid {
    display: grid;
    gap: 12px;
}
/* Koliko ima mjesta, toliko kolona — Biznis (1+2) i Biznis plus (2+3) oba
   popunjavaju cijelu širinu, bez praznih rupa (prijava 06.10.2026). */
.gratis-slots-grid--premium,
.gratis-slots-grid--standard { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.gratis-slot {
    position: relative;
    background: var(--bg-dark);
    border: 1.5px dashed var(--border);
    border-radius: 12px;
    min-height: 130px;
    padding: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}
.gratis-slot-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary);
    background: rgba(184,134,11,0.12);
    border: 1px solid rgba(184,134,11,0.25);
    padding: 4px 8px;
    border-radius: 6px;
    width: fit-content;
}
.gratis-slot--premium .gratis-slot-tag {
    background: linear-gradient(135deg, rgba(184,134,11,0.18), rgba(212,160,23,0.12));
}

.gratis-slot--empty {
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.gratis-slot--empty:hover {
    border-color: var(--primary);
    background: rgba(184,134,11,0.06);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(184,134,11,0.15);
}
.gratis-slot-empty-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 600;
}
.gratis-slot-empty-body i {
    font-size: 2rem;
    color: var(--primary);
    opacity: 0.7;
}

.gratis-slot--filled {
    border-style: solid;
    border-color: var(--primary);
    background: var(--bg-section);
    cursor: default;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr;
    gap: 10px;
    align-items: center;
}
.gratis-slot--filled .gratis-slot-tag {
    grid-column: 1 / -1;
}
.gratis-slot-photo {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.gratis-slot-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gratis-slot-photo i {
    font-size: 1.8rem;
    color: var(--text-muted);
}
.gratis-slot-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.gratis-slot-body strong {
    color: var(--text-bright);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gratis-slot-body span {
    color: var(--text-muted);
    font-size: 0.8rem;
}
.gratis-slot-price {
    color: var(--primary) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
}
.gratis-slot-remove {
    background: var(--danger);
    color: #fff;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.82rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gratis-slot-remove:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(220,53,69,0.35);
}

.gratis-picker-disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
}
.gratis-picker-disabled:hover { transform: none !important; }

@media (max-width: 768px) {
    .gratis-slots-grid--premium,
    .gratis-slots-grid--standard { grid-template-columns: 1fr; }
    .gratis-slot--filled { grid-template-columns: auto 1fr auto; }
}

/* ==================== CART ==================== */
@media (max-width: 640px) {
    .cart-item { grid-template-columns: 1fr !important; }
}

/* Invoice modal in print */
@media print {
    .navbar, .nav-icon-link, button { display: none !important; }
}

/* ==================== INVOICE MODAL (moderni dizajn) ==================== */
/* Kada modal sadrži pregled fakture — širimo modal na cijeli ekran */
.modal-overlay.overlay-invoice { padding: 10px; align-items: flex-start; }
.modal-overlay.overlay-invoice .modal {
    max-width: calc(210mm + 60px); /* A4 + mala padding rezerva */
    width: 100%;
    padding: 0;
    max-height: 95vh;
    background: rgba(18, 18, 38, 0.95);
}
.modal-overlay.overlay-invoice #modal-content { padding: 16px; }
@media (max-width: 900px) {
    .modal-overlay.overlay-invoice { padding: 0; }
    .modal-overlay.overlay-invoice .modal {
        max-height: 100vh;
        border-radius: 0;
        max-width: 100%;
    }
    .modal-overlay.overlay-invoice #modal-content { padding: 8px; }
    .invoice-a4 { width: 100% !important; min-height: auto !important; }
}

.invoice-modal-wrap { padding: 0; max-width: 100%; }
.invoice-modal-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(18, 18, 38, 0.95);
    padding: 10px 0;
    backdrop-filter: blur(6px);
}
.inv-btn {
    border: none;
    padding: 11px 22px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.inv-btn-primary { background: var(--gradient-primary); color: #000; }
.inv-btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.inv-btn-success { background: var(--success); color: #fff; }
.inv-btn-ghost { background: var(--bg-section); color: var(--text); border: 1px solid var(--border); }

/* Izgled same fakture dolazi iz js/faktura-sablon.js (isti kao PDF).
   Ovdje je samo smjestaj u prozoru. */
.invoice-modal .invoice-doc { margin: 0 auto; }

/* ==================== LIGHT THEME — tanki premium touch (GPU-friendly) ==================== */
/* Sve ispod koristi samo solid boje, static gradijente, box-shadow i transform —
   nista od backdrop-filter, filter:blur ili teskih alpha kompozicija. */

/* Vehicle card — izraženiji shadow sa gold tintom, jasno primjetno */
[data-theme="light"] .vehicle-card {
    box-shadow:
        0 4px 16px rgba(130, 95, 20, 0.1),
        0 2px 4px rgba(184, 134, 11, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}
[data-theme="light"] .vehicle-card:hover,
[data-theme="light"] .vehicle-card:active {
    box-shadow:
        0 18px 38px rgba(130, 95, 20, 0.22),
        0 6px 14px rgba(184, 134, 11, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    border-color: rgba(184, 134, 11, 0.4);
    transform: translateY(-4px);
}
[data-theme="light"] .vehicle-card.premium {
    box-shadow:
        0 6px 22px rgba(184, 134, 11, 0.22),
        0 2px 6px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Naslov u kartici — gradient tekst (kompozicija jednom, ne na scroll) */
[data-theme="light"] .card-title {
    background: linear-gradient(135deg, #1a1a2e 0%, #3a3a4e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Suptilni gradient na body pozadini — zamjena flat cream */
[data-theme="light"] body {
    background:
        radial-gradient(ellipse 1200px 600px at 50% 0%,
            rgba(255, 245, 220, 0.5) 0%,
            transparent 60%),
        #FAF8F3;
}

/* Page panel heading — gold akcent linija sa lijeve */
[data-theme="light"] .panel-title {
    position: relative;
    padding-left: 16px;
}
[data-theme="light"] .panel-title::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 70%;
    background: linear-gradient(180deg, #D4A017, #B8860B);
    border-radius: 2px;
}

/* Kategorije — jasno primjetno pri hover/tap */
[data-theme="light"] .category-item {
    box-shadow:
        0 2px 8px rgba(130, 95, 20, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}
/* Više prostora oko reda da se uvećana (hover) kartica ne isijeca okvirom.
   U obje teme (do 04.10.2026 samo u svijetloj, pa je razmak bio različit). */
.category-items {
    padding: 9px 5px;
}
/* `:active` traje samo dok prst drzi dugme, pa smije i na dodir.
   `:hover` je odvojen jer bi na telefonu ostao zalijepljen poslije tapa. */
[data-theme="light"] .category-item:active {
    box-shadow:
        0 8px 20px rgba(184, 134, 11, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    transform: translateY(-3px) scale(1.03);
    border-color: var(--primary);
    position: relative;
    z-index: 3; /* uvećana kartica ide IZNAD susjeda — ivice se ne sudaraju */
}
@media (hover: hover) {
    [data-theme="light"] .category-item:hover {
        box-shadow:
            0 8px 20px rgba(184, 134, 11, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 1);
        transform: translateY(-3px) scale(1.03);
        border-color: var(--primary);
        position: relative;
        z-index: 3;
    }
}
[data-theme="light"] .category-item.active {
    /* Bez sjenke — izabrana kategorija se raspoznaje po zlatnoj ikonici,
       natpisu i okviru. Ovo pravilo dolazi poslije onog gore sa istom
       specificnoscu, pa mora i ovdje pisati `none`. */
    box-shadow: none;
    /* bez scale — uveličavanje je izbacivalo ivicu preko kontejnera (preklapanje) */
}

/* Dashboard/admin stat — jasno primjetno */
[data-theme="light"] .dash-stat,
[data-theme="light"] .admin-stat {
    box-shadow:
        0 3px 12px rgba(130, 95, 20, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    border-top: 2px solid rgba(212, 160, 23, 0.3);
}
[data-theme="light"] .dash-stat:hover,
[data-theme="light"] .admin-stat:hover {
    box-shadow:
        0 12px 28px rgba(184, 134, 11, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    border-top-color: var(--primary);
    transform: translateY(-3px);
}
[data-theme="light"] .admin-stat span {
    background: linear-gradient(135deg, #B8860B 0%, #D4A017 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* Dashboard brojevi u light modu — crni (bolji kontrast na bijeloj kartici) */
[data-theme="light"] .dash-stat span {
    background: none;
    color: #1a1a2e;
    -webkit-text-fill-color: #1a1a2e;
}

/* Primary dugme — sjaj efekat na hover (shimmer) */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-post,
[data-theme="light"] .nav-post-btn {
    background: linear-gradient(135deg, #E5B020 0%, #B8860B 100%);
    box-shadow:
        0 6px 20px rgba(184, 134, 11, 0.4),
        0 2px 6px rgba(139, 105, 20, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -2px 0 rgba(139, 105, 20, 0.2);
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 0 rgba(139, 105, 20, 0.2);
}
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-post:hover,
[data-theme="light"] .nav-post-btn:hover {
    box-shadow:
        0 10px 28px rgba(184, 134, 11, 0.5),
        0 4px 10px rgba(139, 105, 20, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -2px 0 rgba(139, 105, 20, 0.25);
    transform: translateY(-2px);
}
[data-theme="light"] .btn-primary:active,
[data-theme="light"] .btn-post:active,
[data-theme="light"] .nav-post-btn:active {
    transform: translateY(0);
    box-shadow:
        0 3px 8px rgba(184, 134, 11, 0.35),
        inset 0 2px 4px rgba(139, 105, 20, 0.2);
}
[data-theme="light"] .btn-primary::after,
[data-theme="light"] .btn-post::after,
[data-theme="light"] .nav-post-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}
[data-theme="light"] .btn-primary:hover::after,
[data-theme="light"] .btn-post:hover::after,
[data-theme="light"] .nav-post-btn:hover::after {
    left: 150%;
}

/* Verified badge — subtle gold aura */
[data-theme="light"] .verified-badge {
    box-shadow:
        0 2px 6px rgba(184, 134, 11, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Card badge (Novo, Premium) — dodatni sloj sjenke za profinjenost */
[data-theme="light"] .card-badge {
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Inputi — mekana 3D dubina */
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .custom-select-btn {
    box-shadow:
        0 1px 3px rgba(130, 95, 20, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] .custom-select-btn:focus,
[data-theme="light"] .custom-select-btn.open {
    box-shadow:
        0 0 0 3px rgba(184, 134, 11, 0.12),
        0 2px 8px rgba(184, 134, 11, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Saved filter / saved profile / message / history — izraženije */
[data-theme="light"] .saved-filter-card,
[data-theme="light"] .saved-profile-card,
[data-theme="light"] .history-item,
[data-theme="light"] .message-item,
[data-theme="light"] .adresar-user-card,
[data-theme="light"] .admin-user-card,
[data-theme="light"] .admin-pending-card,
[data-theme="light"] .compare-picker-item,
[data-theme="light"] .notif-bell-item {
    box-shadow:
        0 3px 12px rgba(130, 95, 20, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    position: relative;
}
[data-theme="light"] .saved-filter-card::before,
[data-theme="light"] .saved-profile-card::before,
[data-theme="light"] .history-item::before,
[data-theme="light"] .adresar-user-card::before,
[data-theme="light"] .admin-user-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, transparent 0%, rgba(212, 160, 23, 0.5) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
}
[data-theme="light"] .saved-filter-card:hover,
[data-theme="light"] .saved-profile-card:hover,
[data-theme="light"] .history-item:hover,
[data-theme="light"] .adresar-user-card:hover,
[data-theme="light"] .admin-user-card:hover {
    box-shadow:
        0 10px 26px rgba(184, 134, 11, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    border-color: rgba(184, 134, 11, 0.3);
    transform: translateY(-2px);
}
[data-theme="light"] .saved-filter-card:hover::before,
[data-theme="light"] .saved-profile-card:hover::before,
[data-theme="light"] .history-item:hover::before,
[data-theme="light"] .adresar-user-card:hover::before,
[data-theme="light"] .admin-user-card:hover::before {
    opacity: 1;
}

/* Corner accents — mali zlatni deo uglova kartica na hover (izraženije) */
[data-theme="light"] .vehicle-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 50px; height: 50px;
    background:
        linear-gradient(225deg, rgba(212, 160, 23, 0.25) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}
[data-theme="light"] .vehicle-card:hover::after,
[data-theme="light"] .vehicle-card:active::after {
    opacity: 1;
}

/* Navbar ::before highlight gradient — koristi se definicija iz primarne sekcije */

/* Heart dugme — primjetnije na tap */
[data-theme="light"] .card-fav-btn:active {
    transform: scale(0.88);
    box-shadow: 0 0 0 6px rgba(220, 53, 69, 0.12);
}

/* Nav icon linkovi — izraženiji hover/tap */
[data-theme="light"] .nav-icon-link {
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
[data-theme="light"] .nav-icon-link:hover,
[data-theme="light"] .nav-icon-link:active {
    background: rgba(184, 134, 11, 0.12);
    box-shadow: 0 2px 8px rgba(184, 134, 11, 0.2);
}
[data-theme="light"] .nav-icon-link:active {
    transform: scale(0.9);
}

/* Badge-ovi (Novo, Premium) — izraženiji */
[data-theme="light"] .card-badge {
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* Novi bedzevi su ravni i izgledaju isto u obje teme — starija pravila iznad
   su im dodavala sjenke i udubljenja, sto se sa ravnom pilulom tuce.
   Mora stajati POSLIJE njih da bi se primijenilo. */
[data-theme="light"] .card-badge,
[data-theme="light"] .card-badge.badge-new,
[data-theme="light"] .card-badge.badge-standard,
[data-theme="light"] .card-badge.badge-premium {
    box-shadow: none;
    font-weight: 700;
    letter-spacing: 0.6px;
}

/* Profil/poslovni hero kartice — izraženiji */
[data-theme="light"] .profile-header-card,
[data-theme="light"] .biz-hero {
    box-shadow:
        0 6px 24px rgba(130, 95, 20, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    border-top: 3px solid rgba(212, 160, 23, 0.4);
}

/* Panel title — jača akcenat linija */
[data-theme="light"] .panel-title::before {
    width: 5px;
    box-shadow: 0 0 8px rgba(212, 160, 23, 0.4);
}

/* Tap feedback za sve klikabilne — kratak responsive feel */
[data-theme="light"] button:not(.custom-select-option):active,
[data-theme="light"] .category-item:active {
    transition: transform 0.05s ease, box-shadow 0.05s ease;
}

/* Hero hairline (finija linija ispod heading-a) */
[data-theme="light"] h2::after,
[data-theme="light"] .section-title::after {
    background: linear-gradient(90deg, #D4A017 0%, transparent 100%);
}

/* Pricing card — sjaj na top pri hover */
[data-theme="light"] .pricing-card {
    position: relative;
    box-shadow:
        0 4px 20px rgba(130, 95, 20, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .pricing-card::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.5), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
[data-theme="light"] .pricing-card:hover::before {
    opacity: 1;
}

/* ==================== LIGHT THEME — kartice (solid bg za perf) ==================== */
/* Pune bijele umjesto prozirnih kako bi se izbjegla skupa alpha kompozicija
   pri scroll-u na mobilu. Isti vizuelni rezultat, znatno brže. */
[data-theme="light"] .dash-ad-card,
[data-theme="light"] .dash-sold-card,
[data-theme="light"] .saved-filter-card,
[data-theme="light"] .saved-profile-card,
[data-theme="light"] .adresar-user-card,
[data-theme="light"] .admin-user-card,
[data-theme="light"] .admin-pending-card,
[data-theme="light"] .history-item,
[data-theme="light"] .message-item,
[data-theme="light"] .conversation-card,
[data-theme="light"] .convo-card,
[data-theme="light"] .notif-bell-item,
[data-theme="light"] .compare-picker-item,
[data-theme="light"] .report-item,
[data-theme="light"] .biz-info-card,
[data-theme="light"] .fav-folder-section,
[data-theme="light"] .alert-card,
[data-theme="light"] .notif-bell-dropdown,
[data-theme="light"] .compare-slot {
    background: #FFFFFF;
    border: 1px solid rgba(184, 134, 11, 0.12);
}

/* Admin/dashboard sekcije */
[data-theme="light"] .page-panel .section,
[data-theme="light"] .biz-profile-edit,
[data-theme="light"] .alert-form,
[data-theme="light"] .profile-header-card,
[data-theme="light"] .profile-working-hours,
[data-theme="light"] .vd-specs,
[data-theme="light"] .vd-description,
[data-theme="light"] .vd-equipment,
[data-theme="light"] .vd-seller {
    background: #FFFFFF;
    border: 1px solid rgba(184, 134, 11, 0.1);
}

/* Footer — solid warm */
[data-theme="light"] .footer {
    background: #F2EEE5;
    border-top: 1px solid rgba(184, 134, 11, 0.15);
}


/* ============================================================
   MOBILE LIGHT-MODE SHADOW OPTIMIZACIJA
   Na telefonu pojednostavljujemo light-mode shadow-ove na
   karticama i hover stanjima. Desktop ostaje bogat — ovo
   pogađa SAMO ekrane ≤ 768px i samo light temu.
   ============================================================ */
@media (max-width: 768px) {
    /* Cards / sekcije sa deljenim shared shadow-om */
    [data-theme="light"] .vehicle-card,
    [data-theme="light"] .biz-info-card,
    [data-theme="light"] .fav-folder-section,
    [data-theme="light"] .alert-card,
    [data-theme="light"] .pricing-card,
    [data-theme="light"] .vd-specs,
    [data-theme="light"] .vd-description,
    [data-theme="light"] .vd-equipment,
    [data-theme="light"] .vd-seller,
    [data-theme="light"] .profile-header-card,
    [data-theme="light"] .profile-working-hours,
    [data-theme="light"] .alert-form,
    [data-theme="light"] .biz-profile-edit,
    [data-theme="light"] .notif-bell-dropdown,
    [data-theme="light"] .dash-stat,
    [data-theme="light"] .skeleton-card,
    [data-theme="light"] .saved-filter-card,
    [data-theme="light"] .saved-profile-card {
        box-shadow: 0 1px 3px rgba(90, 75, 40, 0.08) !important;
    }

    /* Hover states (iako mobilni nema pravi hover, :active triggeruje) */
    [data-theme="light"] .vehicle-card:hover,
    [data-theme="light"] .vehicle-card:active,
    [data-theme="light"] .pricing-card:hover,
    [data-theme="light"] .biz-info-card:hover,
    [data-theme="light"] .alert-card:hover {
        box-shadow: 0 3px 8px rgba(90, 75, 40, 0.12) !important;
    }

    /* Premium / Istaknut / Fresh — nema više duplo-layer glow */
    [data-theme="light"] .vehicle-card.premium,
    [data-theme="light"] .vehicle-card.premium:hover,
    [data-theme="light"] .vehicle-card.promoted,
    [data-theme="light"] .vehicle-card.promoted:hover,
    [data-theme="light"] .vehicle-card.fresh,
    [data-theme="light"] .vehicle-card.fresh:hover {
        box-shadow: 0 1px 3px rgba(90, 75, 40, 0.1) !important;
    }

    /* Dugmad i input/search polja — skini duple sjenke */
    [data-theme="light"] button,
    [data-theme="light"] .btn,
    [data-theme="light"] input,
    [data-theme="light"] select,
    [data-theme="light"] textarea {
        box-shadow: none !important;
    }

    /* Pricing cards (Paketi stranica) — pojednostavi */
    [data-theme="light"] .pricing-standard,
    [data-theme="light"] .pricing-premium,
    [data-theme="light"] .pricing-premium:hover {
        box-shadow: 0 2px 6px rgba(90, 75, 40, 0.1) !important;
    }

    /* Hero search bar */
    [data-theme="light"] .hero-search {
        box-shadow: 0 2px 10px rgba(90, 75, 40, 0.06) !important;
    }

    /* Dropdown-i — bez bogate sjenke */
    [data-theme="light"] .custom-select-list,
    [data-theme="light"] .notif-bell-dropdown,
    [data-theme="light"] .user-dropdown,
    [data-theme="light"] .filter-dropdown {
        box-shadow: 0 2px 8px rgba(90, 75, 40, 0.12) !important;
    }
}


/* ============================================================
   DARK MODE — UKLONJENE SVE SJENKE
   Koristi se selektor :not([data-theme="light"]) da pokrije
   i dark i slučaj kad tema još nije postavljena (FOUC zaštita).
   Ako ne bude valjalo → vrati se.
   ============================================================ */
html:not([data-theme="light"]) *,
html:not([data-theme="light"]) *::before,
html:not([data-theme="light"]) *::after {
    box-shadow: none !important;
}


/* ============= ADMIN PAGINATION ============= */
.admin-pagination {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    text-align: center;
}
.admin-page-controls {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.admin-page-btn {
    background: var(--bg-section);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 12px;
    min-width: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
}
.admin-page-btn:hover:not(:disabled):not(.active) {
    border-color: var(--primary);
    color: var(--primary);
}
.admin-page-btn.active {
    background: var(--gradient-primary);
    color: #000;
    border-color: var(--primary);
}
.admin-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.admin-page-ellipsis {
    color: var(--text-muted);
    padding: 0 6px;
    align-self: center;
}


/* Grid 2×2 za 4 grafika u Admin statistici */
.admin-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
@media (max-width: 900px) {
    .admin-charts-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== PROGRES OBJAVE OGLASA ==================== */
/* Obrada slika se radi na uređaju i traje — namjerno je ne diramo da
   ne bi pao kvalitet. Umjesto toga pokazujemo dokle je stigao,
   procjenu preostalog vremena i upozorenje da ne napušta aplikaciju.
   Bez backdrop-filter-a — procesor je u tom trenutku ionako zauzet. */
.publish-progress {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(5, 5, 12, 0.8);
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
[data-theme="light"] .publish-progress { background: rgba(40, 30, 15, 0.55); }

.publish-progress-box {
    background: var(--bg-card-solid);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 28px 26px;
    width: 100%;
    max-width: 380px;
    text-align: center;
}
[data-theme="light"] .publish-progress-box {
    background: #ffffff;
    border-color: rgba(0,0,0,0.08);
}

.pp-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: 6px;
}
.pp-title i { color: var(--primary); margin-right: 8px; }

.pp-count {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.pp-bar {
    height: 8px;
    border-radius: 99px;
    background: var(--border-solid);
    overflow: hidden;
    margin-bottom: 14px;
}
.pp-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 99px;
    background: var(--gradient-primary);
    transition: width 0.35s ease;
}

.pp-eta {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.pp-eta-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.pp-warn {
    font-size: 0.82rem;
    color: var(--warning);
    background: rgba(243, 156, 18, 0.1);
    border: 1px solid rgba(243, 156, 18, 0.28);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    line-height: 1.45;
    text-align: left;
}
.pp-warn i { margin-right: 6px; }

/* Red ispod slikovnih filtera: "Otvori filtere" lijevo, "Očisti" desno.
   Očisti gasi kategoriju — isto što i ponovni klik na npr. Automobili. */
.filters-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 16px;
    margin-bottom: 16px;
}
.filters-toggle-row .btn-show-filters {
    margin-top: 0;
    margin-bottom: 0;
}
.btn-show-filters-clear {
    border-color: var(--border-solid);
    color: var(--text-muted);
}
.btn-show-filters-clear:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}
[data-theme="light"] .btn-show-filters-clear {
    border-color: rgba(0,0,0,0.14);
}

/* ==================== TRAKA SA PODACIMA ISPOD SLIKE (detalj oglasa) ==================== */
.vd-quick {
    display: flex;
    margin: 16px 0 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.vd-quick-item {
    flex: 1 1 0;
    min-width: 0;
    padding: 16px 8px;
    text-align: center;
    border-right: 1px solid var(--border);
}
.vd-quick-item:last-child { border-right: none; }
.vd-quick-item i {
    display: block;
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 8px;
}
.vd-quick-val {
    font-weight: 800;
    color: var(--text-bright);
    font-size: 1.02rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vd-quick-lbl {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 3px;
}
[data-theme="light"] .vd-quick {
    background: rgba(255,255,255,0.75);
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .vd-quick-item { border-right-color: rgba(0,0,0,0.08); }

@media (max-width: 768px) {
    .vd-quick-item { padding: 12px 5px; }
    .vd-quick-item i { font-size: 1.2rem; margin-bottom: 5px; }
    .vd-quick-val { font-size: 0.84rem; }
    .vd-quick-lbl { font-size: 0.68rem; }
}
/* Na uskim ekranima 5 kolona ne stane u jedan red — umjesto skrolanja
   (gdje se vidjelo samo 3) traka se prelama u mrezu 3 + 2, pa su svi
   podaci vidljivi odjednom. */
@media (max-width: 560px) {
    .vd-quick {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        row-gap: 1px;
        overflow: visible;
    }
    .vd-quick-item {
        border-right: 1px solid var(--border);
        border-bottom: none;
    }
    .vd-quick-item:nth-child(3n),
    .vd-quick-item:last-child { border-right: none; }
}
[data-theme="light"] .vd-quick-item { border-right-color: rgba(0,0,0,0.08); }

/* ==================== GALERIJA OGLASA: PODJELA 50/50 (SAMO DESKTOP) ====================
   Lijeva polovina = glavna slika (karusel), desna = mreza 2x2 sa sljedece
   4 slike. Cijeli blok je pod min-width:769px, pa mobilni prikaz ostaje
   netaknut — tamo se mreza uopste ne renderuje vidljivo. */
.vd-gallery-grid { display: none; }

@media (min-width: 769px) {
    .vd-gallery.vd-gallery-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        overflow: visible;          /* sjenke celija ne smiju biti odsjecene */
        background: transparent;
        box-shadow: none;
    }
    .vd-gallery.vd-gallery-split .vd-gallery-main {
        box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    }

    .vd-gallery.vd-gallery-split .vd-gallery-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 10px;
        height: 450px;              /* ista visina kao glavna slika */
    }

    .vd-grid-cell {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius);
        cursor: pointer;
        background: var(--bg-card);
        box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    }
    .vd-grid-cell img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.35s ease;
    }
    .vd-grid-cell:hover img { transform: scale(1.06); }
    .vd-grid-cell::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(8,8,15,0);
        transition: background 0.25s ease;
    }
    .vd-grid-cell:hover::after { background: rgba(8,8,15,0.18); }

    /* "+N" na zadnjoj celiji kad ima jos slika */
    .vd-grid-more {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(8,8,15,0.62);
        color: #fff;
        font-weight: 800;
        font-size: 1.7rem;
        letter-spacing: 0.5px;
        z-index: 2;
        pointer-events: none;
    }

    /* Kad oglas ima manje od 5 slika, mreza ima manje celija — rasporedi
       ih tako da ne ostaju prazne rupe. */
    /* 1 slika u mrezi -> zauzima cijelu desnu polovinu */
    .vd-gallery-grid:has(.vd-grid-cell:only-child) {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }
    /* 2 slike -> jedna ispod druge */
    .vd-gallery-grid:has(.vd-grid-cell:nth-child(2):last-child) {
        grid-template-columns: 1fr;
    }
    /* 3 slike -> prva preko cijelog gornjeg reda, dvije ispod */
    .vd-gallery-grid:has(.vd-grid-cell:nth-child(3):last-child) .vd-grid-cell:first-child {
        grid-column: span 2;
    }
}


/* ==================== DONJI MENI (telefon) ====================
   Namjerno preslikava gornju traku (.navbar): ista sirina, isti radijus,
   ista staklena pozadina, ivica i sjenka — samo prikovan za dno umjesto
   za vrh. Ako se mijenja izgled navbara, mijenjati i ovdje.
   Prikazuje se SAMO na telefonu; na kompjuteru se ne vidi.              */

.bottom-nav {
    display: none;                 /* ukljucuje se u media query nize */
    position: fixed;
    /* Telefoni bez sistemskih dugmadi (iPhone, Android na gestovima) prijave
       `env(safe-area-inset-bottom)` — visinu zone "home" crte. Traku treba
       SAMO skloniti sa te zone, a ne dizati jos 15px povrh nje: na iPhone-u
       je to ispadalo 15+34=49px i traka je vidno lebdjela nad sadrzajem.
       `max` uzima vece od to dvoje: telefoni koji nista ne prijave (Xiaomi sa
       dugmadima) ostaju na istih 15px, iPhone sjeda na 34px, tacno iznad crte.
       Prvi red je rezerva za pregledace bez `max()`. */
    bottom: calc(15px + env(safe-area-inset-bottom, 0px));
    bottom: max(15px, env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    /* Sklanjanje pri listanju nadolje (js/app.js, _kkPomjeriDonjiMeni).
       Mijenjaju se samo `transform` i `opacity` — to telefon radi na grafickoj
       kartici, bez ponovnog crtanja stranice. Izlazak je kratak i odsjecan,
       povratak malo duzi i mekan, da se vracanje osjeti kao doček. */
    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.26s ease;
    width: calc(100% - 24px);
    max-width: 1540px;
    z-index: 1000;
    background: rgba(8, 8, 15, 0.30);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Kupola: gornja ivica je luk koji je najvisi na sredini i spusta se ka
       ivicama. Tako dodatna visina koju trazi "Dodaj oglas" postoji samo
       tamo gdje je i potrebna — na sredini — a traka je uz ivice niza.
       Zapis je TL TR BR BL / TL TR BR BL: vodoravni poluprecnici gornjih
       uglova su po 50% sirine, pa se dvije cetvrtine elipse spajaju tacno
       na sredini i daju jedan neprekidan luk. */
    border-radius: 50% 50% 16px 16px / 28px 28px 16px 16px;
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.45);
    /* Sve stavke naslonjene na dno — sredisnja je visa i ona pravi kupolu. */
    align-items: flex-end;
    padding: 2px 12px 6px;
}

.bottom-nav .bn-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    padding: 2px 2px;
    position: relative;
    /* Svijetlo siva, ista u oba moda — na tamnoj staklenoj podlozi se
       najbolje cita, a izabrana zlatna se jasno izdvaja. Ista vrijednost
       koristi i srce za lajk na karticama. */
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-family: inherit;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    border-radius: 12px;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.bottom-nav .bn-item i { font-size: 1.05rem; }
.bottom-nav .bn-item span { white-space: nowrap; }
/* Tek na vrlo uskim ekranima (stari telefoni, 320–359px) "Dodaj oglas"
   ne stane u jedan red — tamo mu dozvoljavamo prelom, da tekst ne izadje
   preko susjednih stavki. Iznad toga ostaje u jednom redu. */
@media (max-width: 359px) {
    .bottom-nav .bn-item-add span { white-space: normal; }
}

/* Trenutna stranica */
.bottom-nav .bn-item.active,
.bottom-nav .bn-item.active i { color: var(--primary); }

/* Srednje dugme — plus u zlatnom krugu, natpis ispod kao i kod ostalih */
.bottom-nav .bn-add-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #0a0a14;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(212, 160, 23, 0.35);
}
.bottom-nav .bn-add-circle i { font-size: 1rem; }
.bottom-nav .bn-item-add { color: var(--primary); }
.bottom-nav .bn-item-add.active i { color: #0a0a14; }

/* Brojcic neprocitanih — u gornjem desnom uglu ikonice.
   Podrazumijevani polozaj (gornji desni cosak DUGMETA) ovdje ne valja jer je
   stavka mnogo sira od same ikonice, pa bi brojcic visio u praznom. Zato ga
   racunamo od sredine stavke i podizemo iznad ikonice. Malo je manji nego
   drugdje, da ne prekrije kovertu. */
.bottom-nav .notif-badge {
    top: -5px;
    right: auto;
    left: 50%;
    margin-left: 1px;
    width: 16px;
    height: 16px;
    font-size: 0.6rem;
}

/* ---------- Efekti pri dodiru ----------
   Iza ikonica nema niceg — ni sjaja, ni sjenke, ni bilo cega sto putuje.
   Oboji se samo ona koja je izabrana:
     1. boja se mekano prelije sa stare ikonice na novu;
     2. `bn-pop`  — ikonica poskoci pri dodiru;
     3. prsten    — iz plusa se siri zlatni kolut i nestane.            */

/* Boja odlazi i dolazi istom brzinom, bez zakasnjenja. */
.bottom-nav .bn-item i,
.bottom-nav .bn-item span { transition: color 0.22s ease; }

@keyframes bnPop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.28); }
    62%  { transform: scale(0.94); }
    100% { transform: scale(1); }
}
.bottom-nav .bn-item.bn-pop i,
.bottom-nav .bn-item.bn-pop .bn-add-circle {
    animation: bnPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Kolut koji se siri iz plusa */
@keyframes bnRing {
    0%   { box-shadow: 0 0 0 0 rgba(212, 160, 23, 0.55); }
    100% { box-shadow: 0 0 0 20px rgba(212, 160, 23, 0); }
}
.bottom-nav .bn-add-circle { position: relative; }
.bottom-nav .bn-item-add.bn-pop .bn-add-circle::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: bnRing 0.45s ease-out;
}

/* Postuj podesavanje "smanji animacije" na telefonu. */
@media (prefers-reduced-motion: reduce) {
    .bottom-nav .bn-item.bn-pop i,
    .bottom-nav .bn-item.bn-pop .bn-add-circle,
    .bottom-nav .bn-item-add.bn-pop .bn-add-circle::after { animation: none; }
}

/* Svijetli mod — ista logika kao kod dugmeta sa srcem na karticama:
   traka stoji PREKO oglasa, pa joj treba tamna staklena podloga da bi se
   svijetlo sive ikonice uopste vidjele. U svijetlom modu je sve ostalo vec
   zlatno, pa siva daje kontrast a izabrana zlatna se jasno izdvaja. */
[data-theme="light"] .bottom-nav {
    background: rgba(20, 18, 14, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 38px rgba(90, 75, 40, 0.28);
}
/* Boje ikonica su iste u oba moda (vidi .bn-item gore), pa ovdje ostaje
   samo podloga trake. */

/* Sakriven meni: sklizne nadolje, malo se smanji i izblijedi.
   `translateX(-50%)` mora ostati — njime je meni centriran. */
.bottom-nav.kk-meni-skriven {
    transform: translateX(-50%) translateY(150%) scale(0.9);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.26s cubic-bezier(0.4, 0, 1, 1),
                opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .bottom-nav { transition: opacity 0.15s ease; }
    .bottom-nav.kk-meni-skriven {
        transform: translateX(-50%);
        transition: opacity 0.15s ease;
    }
}

@media (max-width: 768px) {
    .bottom-nav { display: flex; }
    /* Da posljednji sadrzaj (footer) ne ostane skriven ispod trake. Ide na
       skroler (#main-site), ne na body — vidi SKROL STRANICE na dnu fajla. */
    #main-site { padding-bottom: 88px; }
    html.kk-skrol-dokument body { padding-bottom: 88px; }
    html.kk-skrol-dokument #main-site { padding-bottom: 0; }
    /* Dok je otvoren hamburger meni ili modal, traka smeta — sklonimo je. */
    body.body-scroll-locked .bottom-nav { display: none; }
}


/* ==================== RED SA TELEFONOM (registracija) ====================
   Polje za broj je bilo stisnuto na 55px pa se vidjelo samo "67". Krivac nije
   bio sam <select> (njemu je zadato 90px) nego omotac `.custom-select-wrap`
   oko njega, koji je bio 110px. Ovdje uzimamo malo prostora od pozivnog broja
   i od dugmeta, i dajemo ga polju za broj.                                  */
.phone-verify-row { gap: 6px; }
.phone-verify-row .custom-select-wrap {
    width: 76px;
    min-width: 76px;
    flex: 0 0 76px;
}
.phone-verify-row .custom-select-wrap .country-code-select {
    width: 100% !important;
    min-width: 0;
}
.phone-verify-row .btn-verify-phone {
    padding: 10px 10px;
    font-size: 0.78rem;
}
/* Pozivni broj: podrazumijevana margina je 14px lijevo i 32px desno (za
   strelicu), sto u uzem polju nije ostavljalo mjesta pa je "+382" izlazilo
   kao "+3...". Ovdje je stisnemo i strelicu pomjerimo blize ivici. */
.phone-verify-row .custom-select-btn {
    padding: 0 20px 0 10px;
}
.phone-verify-row .custom-select-btn::after {
    right: 8px;
}

/* Manja unutrasnja margina u samom polju — dobijamo jos par piksela za
   cifre, bez diranja velicine dugmeta koje se prstom pogadja. */
.phone-verify-row input[type="tel"] {
    padding-left: 10px;
    padding-right: 8px;
}

/* Na vrlo uskim ekranima dugme jos malo stisnemo — broj telefona je vazniji. */
@media (max-width: 360px) {
    .phone-verify-row .custom-select-wrap { width: 70px; min-width: 70px; flex: 0 0 70px; }
    .phone-verify-row .btn-verify-phone { padding: 10px 8px; font-size: 0.74rem; }
}

/* ==================== ADMIN: INSTAGRAM ALATI ==================== */
.ig-alati-uvod { color: var(--text-muted, #8888aa); font-size: 0.88rem; margin: 4px 0 16px; line-height: 1.5; }
.ig-alati { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.ig-alat {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    padding: 18px; border-radius: 14px; cursor: pointer; font-family: inherit;
    /* ista pozadina i ivica kao dugmad (tabovi) admin panela — ne odskače od stranice */
    background: var(--bg-section); border: 1px solid var(--border); color: var(--text-bright);
    transition: border-color .2s, background-color .2s;
}
.ig-alat:hover { border-color: rgba(212,160,23,0.3); background: rgba(212,160,23,0.04); }
.ig-alat:hover .ig-alat-strelica { color: var(--primary); }
.ig-alat-ikona {
    flex: none; width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
    background: rgba(212,160,23,0.1); color: var(--primary);
}
.ig-alat-tekst { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ig-alat-tekst strong { font-size: .95rem; font-weight: 600; }
.ig-alat-tekst small { font-size: 0.8rem; opacity: .7; line-height: 1.4; }
.ig-alat-strelica { color: var(--text-muted); font-size: .8rem; }

.ig-alat-prozor {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; flex-direction: column; background: var(--bg-dark);
}
.ig-alat-prozor.hidden { display: none; }
.ig-alat-traka {
    flex: none; display: flex; align-items: center; gap: 10px;
    min-height: 52px; padding: env(safe-area-inset-top) 10px 0;
    background: var(--bg-card-solid); border-bottom: 1px solid var(--border-solid); color: var(--text-bright);
    font-weight: 700; font-size: 0.95rem;
}
.ig-alat-zatvori {
    width: 40px; height: 40px; border-radius: 10px; border: none; cursor: pointer;
    background: transparent; color: #D4A017; font-size: 1.1rem;
}
.ig-alat-zatvori:hover { background: rgba(212,160,23,0.12); }
#ig-alat-okvir { flex: 1; width: 100%; border: 0; background: var(--bg-dark); }

/* potvrda zatvaranja alata — u dizajnu sajta, ne browserski prozor */
.ig-potvrda {
    position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(5,5,12,0.72); backdrop-filter: blur(3px);
    animation: igPotvrdaUlaz .15s ease-out;
}
.ig-potvrda.hidden { display: none; }
.ig-potvrda-kutija {
    width: 100%; max-width: 340px; text-align: center; padding: 24px 20px 18px;
    background: var(--bg-card-solid); border: 1px solid var(--border-solid); border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.35); color: var(--text-bright);
}
.ig-potvrda-ikona {
    width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
    background: rgba(212,160,23,0.14); color: #D4A017;
}
.ig-potvrda-kutija h3 { margin: 0 0 6px; font-size: 1.1rem; font-weight: 800; }
.ig-potvrda-kutija p { margin: 0 0 18px; font-size: 0.88rem; color: var(--text-muted); line-height: 1.45; }
.ig-potvrda-dugmad { display: flex; gap: 10px; }
.ig-potvrda-dugmad button {
    flex: 1; padding: 12px 10px; border-radius: 10px; cursor: pointer;
    font-family: inherit; font-weight: 700; font-size: 0.92rem;
}
.ig-potvrda-ostani { background: transparent; border: 1px solid var(--border-solid); color: var(--text-bright); }
.ig-potvrda-ostani:hover { border-color: #D4A017; }
.ig-potvrda-zatvori { background: linear-gradient(135deg, #D4A017, #F5D56E); border: none; color: #0f0f1a; }
@keyframes igPotvrdaUlaz { from { opacity: 0; } to { opacity: 1; } }

/* ==================== NAPLATA PAKETA (js/naplata.js) ====================
   Zajednicka dugmad, polja i tabela za ponudu paketa, korak kupovine i
   admin ekran "Naplata". Sve se oslanja na postojece promjenljive teme,
   pa radi i u svijetloj i u tamnoj. */

/* ---------- dugmad ---------- */
.kk-dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.12s ease, filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.kk-dugme:active { transform: translateY(1px); }
.kk-dugme i { font-size: 0.85em; }

.kk-dugme-glavno {
    background: var(--gradient-primary);
    color: #16120a;
    box-shadow: 0 2px 10px rgba(212, 160, 23, 0.25);
}
.kk-dugme-sporedno {
    background: transparent;
    color: var(--text);
    border-color: var(--border-solid);
}
.kk-dugme-opasno {
    background: transparent;
    color: var(--danger);
    border-color: rgba(231, 76, 60, 0.5);
}
@media (hover: hover) {
    .kk-dugme-glavno:hover { filter: brightness(1.06); }
    .kk-dugme-sporedno:hover { border-color: var(--primary); color: var(--primary); }
    .kk-dugme-opasno:hover { background: rgba(231, 76, 60, 0.1); }
}

/* ---------- polja ---------- */
.kk-polje { margin: 18px 0; }
/* Samo naslov polja ide u velika slova. `.kk-opcija` i `.kk-saglasnost` su
   takodje <label> i direktna djeca `.kk-polje`, pa ih moramo izuzeti —
   inace im i sitan opis ode u velika slova. */
.kk-polje > label:not(.kk-opcija):not(.kk-saglasnost),
.kk-polje-malo > label {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 7px;
}
.kk-neobavezno {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    opacity: 0.7;
    margin-left: 6px;
}

.kk-unos {
    width: 100%;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid var(--border-solid);
    background: var(--bg-card-solid);
    color: var(--text-bright);
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kk-unos::placeholder { color: var(--text-muted); opacity: 0.75; }
.kk-unos:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.14);
}

/* broj sa nastavkom (npr. 20 %) */
.kk-unos-sufiks { position: relative; display: flex; align-items: center; }
.kk-unos-sufiks .kk-unos { padding-right: 34px; }
.kk-unos-sufiks span {
    position: absolute; right: 13px;
    color: var(--text-muted); font-size: 0.85rem; pointer-events: none;
}

/* ---------- promo kod ---------- */
.kk-promo-red { display: flex; gap: 8px; align-items: stretch; }
.kk-promo-red .kk-unos {
    font-family: "Courier New", monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
}
.kk-promo-red .kk-dugme { flex: 0 0 auto; }

.kk-poruka { font-size: 0.78rem; margin-top: 7px; min-height: 17px; }
.kk-poruka-dobro { color: var(--success); }
.kk-poruka-lose { color: var(--danger); }

/* ---------- ponuda paketa ---------- */
.kk-ponuda-uvod { color: var(--text-muted); font-size: 0.86rem; margin-bottom: 18px; line-height: 1.5; }
.kk-ponuda-napomena { color: var(--text-muted); font-size: 0.78rem; margin-top: 14px; text-align: center; }

.kk-paketi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }

.kk-paket {
    position: relative;
    border: 1px solid var(--border-solid);
    border-radius: 16px;
    padding: 18px 16px 16px;
    /* Providna podloga, ne puna tamnoplava \u2014 kartice se stapaju sa prozorom. */
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.kk-paket--istaknut { border-color: rgba(212, 160, 23, 0.55); }
.kk-paket-traka {
    position: absolute; top: -10px; left: 16px;
    background: var(--gradient-primary);
    color: #16120a;
    font-size: 0.62rem; font-weight: 800;
    letter-spacing: 0.5px; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px;
}
.kk-paket-naziv { font-weight: 800; font-size: 1.02rem; letter-spacing: 0.3px; }
.kk-paket-cijena { font-size: 2rem; font-weight: 800; color: var(--primary); line-height: 1; }
.kk-paket-cijena .kk-eur { font-size: 1.1rem; margin-left: 1px; }
/* Rok je u svom redu — izbor mjesecno/jednokratno se pravi u drugom koraku,
   pa ga ovdje samo najavljujemo. */
.kk-paket-rok { font-size: 0.72rem; color: var(--text-muted); margin-top: -6px; }
.kk-paket-cijena .kk-mj { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); margin-left: 5px; }
.kk-paket-godisnje { font-size: 0.78rem; color: var(--text); margin-top: 4px; }
.kk-paket-godisnje strong { color: var(--primary); }
.kk-usteda { display: inline-block; background: rgba(46, 204, 113, 0.14); color: var(--success); border-radius: 999px; padding: 1px 8px; font-size: 0.7rem; font-weight: 700; margin-left: 4px; vertical-align: middle; }
.kk-paket-nap { font-size: 0.74rem; color: var(--text-muted); margin-top: 6px; line-height: 1.4; }
.kk-paket-nap i { color: var(--primary); margin-right: 4px; }
.kk-paket-nap strong { color: var(--text-bright); }
.kk-red-info { color: var(--text-muted); font-size: 0.8rem; }

.kk-paket-spisak { list-style: none; padding: 0; margin: 0; flex: 1; display: flex; flex-direction: column; gap: 7px; }
.kk-paket-spisak li { font-size: 0.83rem; line-height: 1.35; display: flex; gap: 9px; align-items: flex-start; }
.kk-paket-spisak i { color: var(--primary); width: 15px; flex: 0 0 15px; margin-top: 2px; text-align: center; }
.kk-paket-spisak .kk-mjesto strong { color: var(--text-bright); }
.kk-paket .kk-dugme { width: 100%; }

.kk-sta-je-mjesto {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 16px; padding: 12px 14px;
    border-radius: 12px;
    background: rgba(212, 160, 23, 0.07);
    border: 1px solid rgba(212, 160, 23, 0.2);
    font-size: 0.79rem; line-height: 1.5; color: var(--text);
}
.kk-sta-je-mjesto i { color: var(--primary); margin-top: 2px; }

/* ---------- korak kupovine ---------- */
.kk-kupovina-glava { margin-bottom: 16px; }
.kk-kupovina-glava h2 { font-size: 1.22rem; margin: 0 0 4px; }
.kk-kupovina-opis { color: var(--text-muted); font-size: 0.82rem; }

.kk-racun {
    border: 1px solid var(--border-solid);
    border-radius: 12px;
    padding: 12px 14px;
    background: var(--bg-card);
}
.kk-red { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 0.88rem; }
.kk-red-popust { color: var(--success); }
.kk-red-popust code {
    font-size: 0.78rem; letter-spacing: 1px;
    background: rgba(46, 204, 113, 0.12); padding: 1px 6px; border-radius: 5px;
}
.kk-red-ukupno {
    border-top: 1px solid var(--border-solid);
    margin-top: 6px; padding-top: 11px;
    font-weight: 800; font-size: 1.05rem;
}
.kk-red-ukupno span:last-child { color: var(--primary); }

.kk-opcija {
    display: flex; align-items: flex-start; gap: 11px;
    border: 1px solid var(--border-solid); border-radius: 12px;
    padding: 12px 13px; margin-bottom: 8px; cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.kk-opcija input { margin-top: 3px; accent-color: var(--primary); flex: 0 0 auto; }
.kk-opcija:has(input:checked) { border-color: var(--primary); background: rgba(212, 160, 23, 0.06); }
.kk-opcija-tekst strong { display: block; font-size: 0.87rem; }
.kk-opcija-tekst small { display: block; color: var(--text-muted); font-size: 0.75rem; margin-top: 2px; line-height: 1.4; }

.kk-saglasnost {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 0.8rem; color: var(--text-muted); line-height: 1.45;
}
.kk-saglasnost input { margin-top: 2px; accent-color: var(--primary); flex: 0 0 auto; }
.kk-saglasnost a { color: var(--primary); }

.kk-dugmad { display: flex; gap: 10px; margin-top: 18px; }
.kk-dugmad .kk-dugme { flex: 1; }

/* ---------- admin: naplata i kodovi ---------- */
.kk-kutija {
    border: 1px solid var(--border-solid);
    border-radius: 16px;
    padding: 18px;
    background: var(--bg-card);
    margin-bottom: 16px;
    max-width: 820px;
}
.kk-kutija-glava {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.kk-kutija-glava h3 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 9px; }
.kk-kutija-glava h3 i { color: var(--primary); }
.kk-opis { color: var(--text-muted); font-size: 0.83rem; line-height: 1.5; margin: 0 0 14px; }

.kk-stanje-znak {
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.6px;
    padding: 4px 10px; border-radius: 999px;
}
.kk-stanje-on { background: rgba(212, 160, 23, 0.16); color: var(--primary); border: 1px solid rgba(212, 160, 23, 0.45); }
.kk-stanje-off { background: rgba(255, 255, 255, 0.05); color: var(--text-muted); border: 1px solid var(--border-solid); }
.kk-brojac { font-size: 0.76rem; color: var(--text-muted); }

/* Mreza, ne flex: ranije su polja rasla da popune sirinu pa su se razvlacila
   po pola ekrana. Sad svako ima svoju kolonu najvise 150px, a dugme uzima
   ostatak reda. */
.kk-generator {
    display: grid;
    grid-template-columns: repeat(4, minmax(90px, 150px)) auto;
    gap: 10px 12px;
    align-items: end;
    padding: 14px; border-radius: 12px;
    background: var(--bg-card-solid);
    border: 1px solid var(--border-solid);
}
.kk-polje-malo { min-width: 0; }
.kk-generator .kk-dugme { height: 42px; justify-self: start; }

.kk-gen-lista { margin: 14px 0; }
.kk-gen-lista strong { display: flex; align-items: center; gap: 7px; font-size: 0.86rem; color: var(--success); }
.kk-gen-lista textarea {
    width: 100%; margin: 9px 0;
    font-family: "Courier New", monospace; font-size: 0.92rem; letter-spacing: 1px;
    padding: 11px 13px; border-radius: 10px;
    border: 1px solid var(--border-solid);
    background: var(--bg-card-solid); color: var(--text-bright);
    resize: vertical;
}

.kk-tabela-okvir { margin-top: 14px; border-radius: 12px; border: 1px solid var(--border-solid); overflow: hidden; }
/* `fixed` da kolone ne rastu po sadrzaju i ne izguraju tabelu u stranu. */
.kk-tabela { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.82rem; }
.kk-tabela th {
    text-align: left; padding: 9px 8px;
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-card-solid);
    border-bottom: 1px solid var(--border-solid);
    white-space: nowrap;
}
.kk-tabela td { padding: 9px 8px; border-bottom: 1px solid var(--border); }
/* Sirine kolona: kod uzima ostatak, ostale su taman koliko treba. */
.kk-tabela th:nth-child(1) { width: auto; }
.kk-tabela th:nth-child(2) { width: 66px; }
.kk-tabela th:nth-child(3) { width: 92px; }
.kk-tabela th:nth-child(4) { width: 104px; }
.kk-tabela .kk-kol-rok { white-space: nowrap; }   /* datum ne smije da se lomi */
.kk-tabela th:nth-child(5) { width: 74px; }
/* Datum ispod koda — vidi se tek kad se kolona "Rok" sakrije. */
.kk-rok-ispod { display: none; font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; }
.kk-tabela tr:last-child td { border-bottom: none; }
.kk-sredina { text-align: center; }
.kk-kod { font-family: "Courier New", monospace; font-size: 0.92rem; font-weight: 700; letter-spacing: 1.5px; color: var(--text-bright); }
.kk-kod-potrosen .kk-kod { color: var(--text-muted); text-decoration: line-through; }

.kk-znak { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.3px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.kk-znak-slobodan { background: rgba(46, 204, 113, 0.14); color: var(--success); }
.kk-znak-potrosen { background: rgba(255, 255, 255, 0.05); color: var(--text-muted); }

.kk-prazno { color: var(--text-muted); font-size: 0.85rem; }

/* ---------- prozor za potvrdu (zamjena za confirm pregledaca) ---------- */
.kk-potvrda { text-align: center; padding: 6px 4px 2px; }
.kk-potvrda-znak {
    width: 56px; height: 56px; margin: 0 auto 14px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(212, 160, 23, 0.12);
    border: 1px solid rgba(212, 160, 23, 0.35);
    color: var(--primary);
    font-size: 1.5rem;
}
.kk-potvrda-znak.kk-potvrda-opasno {
    background: rgba(231, 76, 60, 0.12);
    border-color: rgba(231, 76, 60, 0.4);
    color: var(--danger);
}
.kk-potvrda h3 { margin: 0 0 8px; font-size: 1.08rem; color: var(--text-bright); }
.kk-potvrda p { margin: 0; color: var(--text-muted); font-size: 0.86rem; line-height: 1.55; }
.kk-potvrda p strong { color: var(--text); }
/* Potvrda ukucavanjem riječi (nepovratne admin radnje) */
.kk-potvrda-ukucaj { margin: 14px 0 4px; text-align: left; }
.kk-potvrda-ukucaj label { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px; }
.kk-potvrda-ukucaj label strong { color: var(--danger); letter-spacing: 1px; }
.kk-potvrda-unos small { display: block; font-size: 0.74rem; color: var(--text-muted); margin-top: 6px; line-height: 1.4; }
.kk-virman-email { margin: 6px 0 2px; width: 100%; box-sizing: border-box; font-size: 0.9rem; }
.kk-potvrda-ukucaj .kk-unos { width: 100%; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
/* Polje za slobodan unos (mejl i sl.) — bez velikih slova. */
.kk-potvrda-unos .kk-unos { text-transform: none; letter-spacing: 0; font-weight: 500; }
.kk-potvrda .kk-dugme[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---------- radnje u redu tabele kodova ---------- */
.kk-red-radnje { display: inline-flex; gap: 6px; }
.kk-ikonica {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--border-solid);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.78rem;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
@media (hover: hover) {
    .kk-ikonica:hover { color: var(--primary); border-color: var(--primary); }
    .kk-ikonica-opasna:hover { color: var(--danger); border-color: rgba(231, 76, 60, 0.6); background: rgba(231, 76, 60, 0.08); }
}
.kk-ikonica:active { transform: translateY(1px); }
/* kratka potvrda da je kopirano */
.kk-ikonica-ok { color: var(--success) !important; border-color: rgba(46, 204, 113, 0.6) !important; }

/* Ispod ove sirine kolona "Rok" bi natjerala tabelu da izadje iz okvira,
   pa je sklanjamo a datum prikazujemo kao sitan red ispod samog koda. */
@media (max-width: 680px) {
    .kk-tabela .kk-kol-rok { display: none; }
    .kk-rok-ispod { display: block; }
    .kk-tabela th:nth-child(3) { width: 84px; }
    .kk-tabela th:nth-child(5) { width: 70px; }
    .kk-kod { font-size: 0.86rem; letter-spacing: 1px; }
    .kk-ikonica { width: 27px; height: 27px; font-size: 0.72rem; }
    .kk-red-radnje { gap: 4px; }
}

@media (max-width: 560px) {
    .kk-generator { grid-template-columns: 1fr 1fr; }
    .kk-generator .kk-dugme { grid-column: 1 / -1; width: 100%; justify-self: stretch; }
    .kk-dugmad { flex-direction: column-reverse; }
    .kk-promo-red { flex-direction: column; }
    .kk-promo-red .kk-dugme { width: 100%; }
}

/* Paket koji korisnik vec ima — oznacen i ugasenog dugmeta (js/app.js). */
.kk-paket--trenutni {
    border-color: rgba(46, 204, 113, 0.5);
    background: rgba(46, 204, 113, 0.04);
}
.kk-paket-traka.kk-traka-trenutni {
    background: var(--success);
    color: #06220f;
}
.kk-paket .kk-dugme[disabled] {
    opacity: 0.75;
    cursor: default;
    color: var(--success);
    border-color: rgba(46, 204, 113, 0.45);
}

/* ---------- prozor sa paketima: siri na racunaru, zbijeniji na telefonu ----------
   Tri kartice treba da stanu u jedan red, pa prozoru dajemo vise prostora nego
   obicnom modalu (560px). `:has` cilja samo prozor koji sadrzi pakete. */
/* Cetiri paketa (probni + tri placena) treba da stanu u jedan red bez
   lomljenja teksta, pa je prozor siri nego ostali. */
.modal:has(.kk-ponuda) {
    max-width: 1180px;
}

@media (max-width: 560px) {
    .modal:has(.kk-ponuda) { padding: 22px 16px; }
}

/* Naslov staje u jedan red i na telefonu. */
.kk-ponuda h2 {
    font-size: clamp(0.95rem, 3.4vw, 1.18rem);
    line-height: 1.3;
    margin-bottom: 6px;
}
.kk-ponuda h2 i { margin-right: 4px; }

/* Stavka: ikonica lijevo, cio tekst u jednom komadu desno. Bez `span`-a je
   svaki dio teksta bio zasebna flex stavka, pa je prelom razbacivao rijeci. */
.kk-paket-spisak li > span { flex: 1 1 auto; min-width: 0; }

/* ---------- prozor koji uslovljava korisnika (izbor paketa) ----------
   Nema krstica i ne gasi se klikom na pozadinu. Zatvara ga samo izbor
   paketa ili odjava (vidi closeModal u js/app.js). */
.modal-overlay.kk-prozor-obavezan .modal-close { display: none; }

/* Odjava u uglu prozora — na mjestu gdje inace stoji krstic, da je korisnik
   nadje tamo gdje je i trazi, ali tiha da ne otima paznju paketima. */
.kk-odjava-ugao {
    position: absolute;
    top: 12px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--border-solid);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    z-index: 3;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.kk-odjava-ugao i { font-size: 0.8em; }
@media (hover: hover) {
    .kk-odjava-ugao:hover {
        color: var(--text-bright);
        border-color: var(--text-muted);
        background: rgba(255, 255, 255, 0.08);
    }
}
.kk-odjava-ugao:active { transform: translateY(1px); }

/* Naslov ne smije da zalijece pod dugme. */
.kk-ponuda h2 { padding-right: 120px; }

@media (max-width: 430px) {
    .kk-odjava-ugao { padding: 6px 10px; font-size: 0.7rem; }
    .kk-odjava-ugao span { display: none; }      /* na uskom ekranu samo ikonica */
    /* Dugme uzima dio reda, pa naslov mora biti sitniji da i dalje stane u
       jedan red. 0.88rem je najveca vrijednost koja staje (izmjereno). */
    .kk-ponuda h2 { padding-right: 44px; font-size: 0.88rem; }
}


/* Napomena na profilu da paket nije kupljen nego dodijeljen. */
.kk-dodijelio-admin {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(46, 204, 113, 0.08);
    border: 1px solid rgba(46, 204, 113, 0.25);
    color: var(--text);
    font-size: 0.8rem;
}
.kk-dodijelio-admin i { color: var(--success); }

/* Kartica probnog perioda — zelena, da se odvoji od plaćenih paketa. */
.kk-paket--proba {
    border-color: rgba(46, 204, 113, 0.45);
    background: rgba(46, 204, 113, 0.05);
}
.kk-paket-traka.kk-traka-proba {
    background: var(--success);
    color: #06220f;
}
.kk-paket--proba .kk-paket-cijena { color: var(--success); }
.kk-paket--proba .kk-paket-spisak i { color: var(--success); }
.kk-paket--proba .kk-dugme-glavno {
    background: var(--success);
    color: #06220f;
    box-shadow: 0 2px 10px rgba(46, 204, 113, 0.25);
}

/* Vrsta promo koda i napomena uz njega. */
.kk-znak-vise { background: rgba(155, 89, 182, 0.18); color: #c48bdd; }
.kk-znak-jedan { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); }
.kk-znak-vezan { background: rgba(212, 160, 23, 0.16); color: var(--primary); }
.kk-napomena-ispod {
    display: block;
    font-size: 0.72rem;
    color: var(--text);
    margin-top: 3px;
}
.kk-polje-siroko { grid-column: 1 / -1; }

/* ---------- promo kodovi: spisak redova ----------
   Umjesto tabele u kojoj su se kolone stiskale pa se dugme za brisanje
   gubilo. Svaki kod je svoj red: lijevo kod i napomena, u sredini oznake,
   desno dugmad. Na telefonu se prelama u dva nivoa. */
.kk-kod-spisak {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.kk-kod-red {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-solid);
    background: var(--bg-card-solid);
}
.kk-kod-red--potrosen { opacity: 0.55; }

.kk-kod-glavno { flex: 1 1 190px; min-width: 0; }
.kk-kod-glavno .kk-kod {
    font-family: "Courier New", monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--text-bright);
}
.kk-kod-red--potrosen .kk-kod { text-decoration: line-through; color: var(--text-muted); }
.kk-kod-opis {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kk-kod-opis strong { color: var(--text); font-weight: 700; }

.kk-kod-znaci {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 0 1 auto;
}
.kk-znak-popust { background: rgba(212, 160, 23, 0.16); color: var(--primary); }

.kk-kod-radnje {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: auto;
}

@media (max-width: 560px) {
    .kk-kod-red { gap: 10px; }
    .kk-kod-glavno { flex: 1 1 100%; }
    .kk-kod-znaci { flex: 1 1 auto; }
    .kk-kod-radnje { margin-left: auto; }
}

/* ---------- redosljed slika u formi oglasa ---------- */
.photo-preview-item { position: relative; }

.photo-redni {
    position: absolute;
    top: 6px; left: 6px;
    background: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    padding: 3px 8px;
    border-radius: 999px;
    pointer-events: none;
}
.photo-naslovna .photo-redni {
    background: var(--gradient-primary);
    color: #16120a;
}

.photo-pomjeri {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: space-between;
    padding: 5px;
    background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
    border-radius: 0 0 8px 8px;
}
.photo-pomjeri button {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 0.72rem;
    cursor: pointer;
}
.photo-pomjeri button[disabled] { opacity: 0.25; cursor: default; }
@media (hover: hover) {
    .photo-pomjeri button:not([disabled]):hover { background: var(--primary); color: #16120a; }
}


/* ==================== SKROL STRANICE: #main-site, NE dokument ====================
   Objasnjenje u js/app.js (trazi "SKROL STRANICE"). Ukratko: Samsung Internet
   crta "idi na vrh" preko "Dodaj oglas" cim dokument skroluje; zato dokument
   stoji, a skroluje #main-site. Fiksni djelovi (trake, prozori) nisu unutra
   pa ostaju tacno gdje su bili. */
html, body { height: 100%; }
body { overflow: hidden; }

#main-site {
    position: relative;
    box-sizing: border-box;
    /* +1px NAMJERNO: Chromium element koji je TACNO velicine ekrana unaprijedi u
       "glavni skroler" (ImplicitRootScroller) i onda ga pregledac tretira kao
       dokument — pa bi se Samsungovo dugme vratilo. Jedan piksel razlike to
       sprjecava; taj piksel je ispod ivice ekrana i ne vidi se. */
    height: calc(100% + 1px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Pregledacevo "povuci za osvjezavanje" je ugaseno — imamo svoje
       (js/povuci-osvjezi.js), inace bi se okidala oba. */
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
    padding-top: env(safe-area-inset-top, 0px);
}

/* Zakljucavanje skrola (otvoren meni, pregled slike, chat) — ranije na body. */
body.body-scroll-locked #main-site,
body.intro-active #main-site,
body.kk-preview-lock #main-site,
body.chat-fullscreen #main-site { overflow: hidden; }

/* Rezim dokumenta (SVI pregledaci osim Samsung Interneta — odluka u <head>). */
html.kk-skrol-dokument, html.kk-skrol-dokument body { height: auto; overflow: visible; }
html.kk-skrol-dokument body { overflow-x: hidden; padding-top: env(safe-area-inset-top, 0px); }
/* I kad dokument skroluje, "povuci za osvjezavanje" je nase (js/povuci-osvjezi.js). */
html.kk-skrol-dokument { overscroll-behavior-y: contain; }
html.kk-skrol-dokument #main-site { height: auto; overflow: visible; padding-top: 0; }
html.kk-skrol-dokument body.intro-active,
html.kk-skrol-dokument body.body-scroll-locked,
html.kk-skrol-dokument body.kk-preview-lock,
html.kk-skrol-dokument body.chat-fullscreen { overflow: hidden; }

/* ==================== iPHONE: trake sa MINIMALNIM razmakom ====================
   Samo WebKit na iOS-u podrzava -webkit-touch-callout, pa ovo ne dira Android.
   Problem (02.10.2026): Safari gornju statusnu liniju rjesava sam i prijavi
   `safe-area-inset-top: 0`, pa je traka sa 15px sjedala tik ispod sata.
   Instaliran na pocetni ekran prijavi 47px i tad je 28px povrh toga bilo
   previse. Zato `max`: NAJMANJE 26px od vrha, a kad telefon prijavi liniju,
   10px ispod nje. Sadrzaj prati traku za istu razliku (traka − 15px).
   Donji meni: iPhone prijavi 34px za liniju za geste, ali je ona tanka i
   prozirna, pa meni smije 22px u tu zonu — ostaje 12px od ivice. */
:root { --kk-sat: env(safe-area-inset-top, 0px); --kk-sab: env(safe-area-inset-bottom, 0px); }
@supports (-webkit-touch-callout: none) {
    .navbar { top: max(26px, env(safe-area-inset-top, 0px) + 10px); }
    /* Zaglavlje razgovora preko cijelog ekrana: isti razmak od vrha kao
       gornja traka, da ne zavrsi ispod sata i "zareza" (prijava 04.10.2026). */
    body.chat-fullscreen .convo-header { padding-top: max(26px, env(safe-area-inset-top, 0px) + 10px) !important; }
    #main-site { padding-top: max(11px, env(safe-area-inset-top, 0px) - 5px); }
    html.kk-skrol-dokument body { padding-top: max(11px, env(safe-area-inset-top, 0px) - 5px); }
    .bottom-nav { bottom: max(12px, env(safe-area-inset-bottom, 0px) - 22px); }
    #pwa-install-banner.show { bottom: max(16px, env(safe-area-inset-bottom, 0px) - 18px); }
}

/* ?dijagnoza=1 — ispis mjera (js/app.js, kkDijagnoza) */
#kk-dijagnoza {
    position: fixed; left: 8px; right: 8px; top: 40%; z-index: 100000;
    background: rgba(0,0,0,0.85); color: #0f0; font: 11px/1.5 monospace;
    padding: 8px 10px; border-radius: 8px; pointer-events: none; white-space: pre-wrap; word-break: break-all;
}


/* ==================== POVUCI NADOLJE = OSVJEZI (js/povuci-osvjezi.js) ==================== */
.kk-ptr {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) - 8px);
    left: 50%;
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-card-solid, #16161f);
    border: 1px solid var(--border-solid, rgba(255,255,255,0.12));
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    color: var(--primary);
    font-size: 1.05rem;
    z-index: 1200;                 /* iznad gornje trake, ispod prozora */
    opacity: 0;
    transform: translate(-50%, 0) scale(0.6);
    pointer-events: none;
    will-change: transform, opacity;
}
.kk-ptr i { transition: transform 0.15s ease; }
.kk-ptr--spreman { color: var(--text-bright); background: var(--primary); }
.kk-ptr--spreman i { color: #000; }
.kk-ptr--vrti i { animation: kk-ptr-vrti 0.8s linear infinite; }
@keyframes kk-ptr-vrti { to { transform: rotate(360deg); } }


/* ==================== ADMIN -> KORISNICI: traka "Paket" ==================== */
.admin-paket-traka {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 10px; padding: 10px 12px;
    border-radius: 8px;
    background: var(--bg-section);
    border: 1px dashed var(--border);
    font-size: 0.8rem;
    color: var(--text-muted);
}
.admin-paket-red { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-paket-stanje { display: block; min-width: 0; line-height: 1.5; flex: 1 1 260px; }
.admin-paket-stanje i { margin-right: 4px; color: var(--primary); }
.admin-paket-stanje strong { color: var(--text-bright); }
.admin-paket-radnje { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.admin-paket-radnje .btn-sm { white-space: nowrap; }
/* Sačuvana kartica: svoj red, dugmad desno */
.admin-paket-kartica { padding-top: 8px; border-top: 1px dashed var(--border); }
/* „Dodijeli“: grupe Gratis | Plaćeni | Proba, jednake širine; dugmad u koloni, iste širine */
.admin-paket-dodjela-omot { padding-top: 8px; border-top: 1px dashed var(--border); }
.admin-paket-preklop { width: 100%; display: flex; align-items: center; gap: 8px; background: transparent; border: 1px dashed var(--border); border-radius: 8px; padding: 7px 10px; color: var(--text-muted); font-weight: 600; font-size: 0.8rem; cursor: pointer; font-family: inherit; }
.admin-paket-preklop:hover { color: var(--text); border-color: var(--primary); }
.admin-paket-preklop i:first-child { color: var(--primary); }
.admin-paket-strelica { margin-left: auto; transition: transform 0.2s; }
.admin-paket-dodjela-omot.otvoreno .admin-paket-strelica { transform: rotate(180deg); }
.admin-paket-dodjela { display: none; align-items: stretch; gap: 10px; margin-top: 8px; }
.admin-paket-dodjela-omot.otvoreno .admin-paket-dodjela { display: flex; }
.admin-paket-grupa { flex: 1 1 0; min-width: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.admin-paket-grupa-naziv { font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.admin-paket-grupa-naziv i { color: var(--primary); margin-right: 4px; }
.admin-paket-grupa-dugmad { display: flex; flex-direction: column; gap: 6px; }
.admin-paket-grupa-dugmad .btn-sm { width: 100%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* osnovne radnje korisnika: kvadratna dugmad iste veličine, u jednom redu */
.admin-user-radnje { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: nowrap; }
.admin-user-radnje .btn-sm { min-width: 36px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
@media (max-width: 560px) {
    .admin-paket-stanje { width: 100%; flex-basis: 100%; }
    .admin-paket-radnje { width: 100%; margin-left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: stretch; }
    /* sva dugmad u traci paketa iste visine i širine, tekst centriran */
    .admin-paket-radnje .btn-sm, .admin-paket-grupa-dugmad .btn-sm { min-height: 42px; display: flex; align-items: center; justify-content: center; white-space: normal; overflow: visible; text-overflow: clip; text-align: center; line-height: 1.2; padding: 8px; }
    .admin-paket-dodjela { flex-direction: column; gap: 6px; }
    /* telefon: zelena dugmad dodjele jedno ispod drugog, puna širina */
    .admin-paket-grupa-dugmad { display: flex; flex-direction: column; }
    .admin-paket-grupa-dugmad .btn-sm { min-height: 40px; }
    /* osnovne radnje (profil, verifikuj, blokiraj, obrisi) u punoj sirini, bez stiskanja */
    .admin-user-card .admin-user-radnje { width: 100%; }
    .admin-user-card .admin-user-radnje .btn-sm { flex: 1 1 auto; width: auto; }
}
/* Turnstile (zastita od botova) u prozoru na telefonu: ne smije da izadje van prozora */
#kk-turnstile, #kk-turnstile-reset { max-width: 100%; overflow: hidden; display: flex; justify-content: center; }
#kk-turnstile:empty, #kk-turnstile-reset:empty { display: none; }


/* ==================== IGRA: LETEĆI KOMBI ==================== */
.kk-igra-uvod { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; margin: 0 0 14px; }
.kk-igra-uvod strong { color: var(--primary); }
.kk-igra-start { text-align: center; margin: 6px auto 18px; max-width: 420px; }
.kk-igra-dugme--veliko { font-size: 1.15rem; padding: 16px; box-shadow: 0 10px 28px rgba(212,160,23,0.35); }
/* Ekran igre preko cijelog prozora (fullscreen gdje pregledač da). */
.kk-igra-ekran {
    position: fixed; inset: 0; z-index: 100000; display: none;
    align-items: center; justify-content: center; background: #0b0b1c;
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.kk-igra-ekran.vidljiv { display: flex; }
.kk-igra-hud {
    position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px));
    display: flex; gap: 8px; z-index: 3;
}
.kk-igra-hud-dugme {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18);
    background: rgba(18,18,34,0.75); color: #fff; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.kk-igra-omot { position: relative; margin: 0 auto; background: #0b0b1c; }
.kk-igra-omot canvas { display: block; }
body.kk-igra-ekran-otvoren { overflow: hidden; }
body.kk-igra-ekran-otvoren #main-site { overflow: hidden; }
body.kk-igra-ekran-otvoren .bottom-nav, body.kk-igra-ekran-otvoren #pwa-install-banner { display: none !important; }
.kk-igra-sloj {
    position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
    background: rgba(8, 8, 20, 0.55); padding: 20px; z-index: 2;
}
.kk-igra-kartica {
    width: 100%; max-width: 300px; text-align: center; padding: 22px 18px;
    background: rgba(18, 18, 34, 0.96); border: 1px solid rgba(245, 212, 66, 0.25); border-radius: 16px;
    color: var(--text); box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.kk-igra-kartica p { color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; margin: 6px 0 12px; }
.kk-igra-naslov { font-size: 1.25rem; font-weight: 800; color: #fff; }
.kk-igra-bodovi { font-size: 3.2rem; font-weight: 900; color: var(--primary); line-height: 1.1; margin: 6px 0; }
.kk-igra-rekord { font-size: 0.85rem; color: var(--text-muted); margin: 6px 0 10px; }
.kk-igra-rekord strong { color: #fff; }
.kk-igra-nap { font-size: 0.78rem; color: var(--text-muted); margin: 6px 0 10px; }
.kk-igra-dugme {
    display: block; width: 100%; margin-top: 8px; padding: 12px 16px; border: 0; border-radius: 12px;
    background: var(--gradient-primary); color: #000; font-weight: 800; font-size: 1rem; cursor: pointer; font-family: inherit;
}
.kk-igra-dugme--sporedno { background: rgba(255,255,255,0.08); color: var(--text); border: 1px solid var(--border); font-weight: 600; }
.kk-igra-tabela { max-width: 420px; margin: 18px auto 0; }
.kk-igra-tabela-naslov { font-weight: 800; color: var(--text-bright); margin-bottom: 8px; }
.kk-igra-tabela-naslov i { color: var(--primary); }
.kk-igra-prazno { color: var(--text-muted); font-size: 0.88rem; }
.kk-igra-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; }
.kk-igra-lista li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--bg-card-solid, rgba(255,255,255,0.03)); border: 1px solid var(--border); font-size: 0.9rem; }
.kk-igra-lista li.kk-igra-top { border-color: rgba(245, 212, 66, 0.35); }
.kk-igra-lista li.kk-igra-ja { border-color: var(--primary); background: rgba(212, 160, 23, 0.1); }
.kk-igra-rang { width: 34px; text-align: center; font-weight: 700; color: var(--text-muted); }
.kk-igra-ime { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-bright); font-weight: 600; }
.kk-igra-ime small { display: block; font-size: 0.7rem; color: var(--primary); font-weight: 600; }
.kk-igra-bod { font-weight: 800; color: var(--primary); }
.kk-igra-moj { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(212,160,23,0.08); border: 1px dashed rgba(212,160,23,0.4); font-size: 0.88rem; color: var(--text); }
.kk-igra-pravila { max-width: 420px; margin: 16px auto 0; color: var(--text-muted); font-size: 0.82rem; }
.kk-igra-pravila summary { cursor: pointer; color: var(--text); font-weight: 600; }
.kk-igra-pravila ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.5; }
.mobile-menu-znak { font-size: 0.62rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; background: var(--gradient-primary); color: #000; padding: 2px 7px; border-radius: 10px; margin-left: 6px; vertical-align: middle; }
/* Dok traje partija donji meni se sklanja da ne smeta palcu. */
body.kk-igra-u-toku .bottom-nav { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }

.kk-tokeni-blok { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: rgba(212,160,23,0.08); border: 1px solid rgba(212,160,23,0.35); }
.kk-tokeni-naslov { font-size: 0.9rem; color: var(--text); margin-bottom: 8px; }
.kk-tokeni-naslov i, .kk-tokeni-naslov strong { color: var(--primary); }
.kk-tokeni-dugmad { display: flex; flex-direction: column; gap: 6px; }
.kk-tokeni-dugme { padding: 10px 14px; border-radius: 10px; border: 0; background: var(--gradient-primary); color: #000; font-weight: 700; cursor: pointer; font-family: inherit; }
.kk-tokeni-ili { margin-top: 10px; font-size: 0.78rem; color: var(--text-muted); text-align: center; }

.kk-igra-tokeni { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(212,160,23,0.08); border: 1px solid rgba(212,160,23,0.35); font-size: 0.9rem; color: var(--text); text-align: center; }
.kk-igra-tokeni i, .kk-igra-tokeni strong { color: var(--primary); }
.kk-igra-tokeni small { display: block; color: var(--text-muted); font-size: 0.75rem; margin-top: 3px; }
.kk-igra-tokeni .kk-igra-dugme { margin-top: 10px; }
.kk-upgrade-tokeni-nap { font-size: 0.78rem; color: var(--text-muted); text-align: center; margin-top: 8px; }
.kk-upgrade-tokeni-nap strong { color: var(--primary); }

/* Dok se rezultat provjerava na serveru: X i zvuk ugašeni, ne može se izaći. */
.kk-igra-ekran.kk-igra-provjera .kk-igra-hud-dugme { opacity: 0.35; pointer-events: none; }

/* Kartica u igri je uvijek tamna — boje ne smiju zavisiti od svijetle/tamne
   teme sajta (u svijetloj temi je dugme "Tabela" bilo nevidljivo). */
.kk-igra-kartica { color: #e9e9f1; }
.kk-igra-kartica p, .kk-igra-kartica .kk-igra-rekord, .kk-igra-kartica .kk-igra-nap { color: #b4b4c4; }
.kk-igra-kartica .kk-igra-rekord strong { color: #fff; }
.kk-igra-kartica .kk-igra-dugme--sporedno { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.28); }
.kk-igra-kartica .kk-igra-nap a { color: #F5D442; }
.kk-igra-sloj { overflow-y: auto; }


/* Bez vodoravnog "rastezanja" strane (Chrome Android overscroll stretch) —
   vodoravni potez je nas (js/nav-klizanje.js). */
html, body, #main-site { overscroll-behavior-x: none; }

/* ==================== KOLAČIĆI — iskačući prozor sa zamućenom pozadinom ====================
   Isti osjećaj kao ostali prozori na sajtu (.modal-overlay), ali odvojena
   klasa: da ga ne zatvori „zatvori sve prozore" i da ne smeta provjerama
   `.modal-overlay:not(.hidden)` u drugim skriptama. Ispod pravih prozora
   (z-index 9000 < 9998) da link „Više" otvori info-prozor preko njega. */
.kk-kolacici-omot {
    position: fixed; inset: 0; z-index: 9000;
    display: none; align-items: center; justify-content: center;
    padding: 16px; box-sizing: border-box;
    background: rgba(5, 5, 12, 0.55);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
}
.kk-kolacici-omot.vidljiv { display: flex; animation: kk-kolacici-omot-ulaz 0.25s ease; }
[data-theme="light"] .kk-kolacici-omot {
    background: rgba(40, 30, 15, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
@keyframes kk-kolacici-omot-ulaz { from { opacity: 0; } to { opacity: 1; } }
.kk-kolacici {
    width: 100%; max-width: 480px;
    background: var(--bg-card-solid, #16161f); border: 1px solid var(--border-solid, rgba(255,255,255,0.12));
    border-radius: 18px; padding: 20px 18px; box-shadow: 0 18px 50px rgba(0,0,0,0.45);
    color: var(--text); font-size: 0.9rem; line-height: 1.55;
    animation: kk-kolacici-ulaz 0.3s ease;
}
@keyframes kk-kolacici-ulaz { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.kk-kolacici h3 { margin: 0 0 8px; font-size: 1.1rem; color: var(--text-bright); display: flex; align-items: center; gap: 9px; }
.kk-kolacici h3 i { color: var(--primary); }
.kk-kolacici strong { color: var(--text-bright); }
.kk-kolacici p { margin: 0 0 14px; }
.kk-kolacici a { color: var(--primary); }
.kk-kolacici-dugmad { display: flex; gap: 8px; flex-wrap: wrap; }
.kk-kolacici-dugmad button { flex: 1 1 140px; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-section); color: var(--text); font-weight: 600; cursor: pointer; font-family: inherit; }
.kk-kolacici-dugmad button.kk-kolacici-da { background: var(--gradient-primary); color: #000; border: 0; font-weight: 800; }

/* ==================== LOGO — točkovi su providni ====================
   Krugovi točkova nemaju ispunu (fill="none" u index.html, 04.10.2026):
   kroz žbice se vidi pozadina u obje teme. Osovina je skraćena na razmak
   između točkova da ne viri kroz njih. Bez posebnog CSS-a po temi. */

/* ==================== PERFORMANSE — brzi režim (html.kk-brzo) ====================
   js/performanse.js: admin za sve (config/performanse.brziRezim) ili korisnik
   za sebe (burger meni → Postavke). Gasi ono što stalno troši procesor:
   zamućenje pozadine i beskonačne ukrasne animacije. Ništa funkcionalno.
   !important jer pravila po temi ([data-theme="light"] .navbar) imaju veću
   specifičnost. Spinneri za učitavanje (fa-spin, .kk-ptr, skeleton) se NE
   gase — oni nešto znače. */
html.kk-brzo .navbar,
html.kk-brzo .bottom-nav,
html.kk-brzo .nav-search,
html.kk-brzo .modal-overlay,
html.kk-brzo .kk-kolacici-omot,
html.kk-brzo .pwa-banner-content,
html.kk-brzo .invoice-modal-actions,
html.kk-brzo .ig-potvrda {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.kk-brzo .wheel,
html.kk-brzo .nav-logo::before,
html.kk-brzo .nav-logo > span,
html.kk-brzo .nav-logo strong,
html.kk-brzo .nav-search button::after,
html.kk-brzo .theme-slide::before,
html.kk-brzo .theme-slide-thumb,
html.kk-brzo .theme-slide-track::after,
html.kk-brzo .pricing-badge,
html.kk-brzo .pricing-ribbon,
html.kk-brzo .price-amount,
html.kk-brzo .pricing-features strong {
    animation: none !important;
}

/* Prekidač u burger meniju (Postavke → Brzi režim) — isti red kao stavke menija */
.mobile-menu .kk-meni-red {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 12px;
    color: var(--text); font-size: 0.92rem; cursor: pointer; user-select: none;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.mobile-menu .kk-meni-red > i:first-child { color: var(--primary); width: 18px; text-align: center; }
.mobile-menu .kk-meni-red .kk-meni-tekst { display: flex; flex-direction: column; line-height: 1.2; }
.mobile-menu .kk-meni-red .kk-meni-tekst small { color: var(--text-muted); font-size: 0.72rem; font-weight: 500; }
.mobile-menu .kk-meni-red .kk-prekidac-klizac { margin-left: auto; }
[data-theme="light"] .mobile-menu .kk-meni-red {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.kk-lista { margin: 0 0 14px; padding-left: 18px; color: var(--text-muted); font-size: 0.83rem; line-height: 1.6; }

/* Prekidač (toggle) u admin panelu */
.kk-prekidac { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.kk-prekidac input { position: absolute; opacity: 0; width: 0; height: 0; }
.kk-prekidac-klizac { position: relative; width: 46px; height: 26px; flex: 0 0 46px; border-radius: 13px; background: rgba(255,255,255,0.14); border: 1px solid var(--border); transition: background 0.2s; }
.kk-prekidac-klizac::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.4); transition: transform 0.2s; }
.kk-prekidac input:checked + .kk-prekidac-klizac { background: var(--primary); border-color: var(--primary); }
.kk-prekidac input:checked + .kk-prekidac-klizac::after { transform: translateX(20px); }
.kk-prekidac-tekst { font-size: 0.9rem; font-weight: 600; color: var(--text); }
[data-theme="light"] .kk-prekidac-klizac { background: rgba(0,0,0,0.12); }


/* ==================== PROZORI NA TELEFONU: bez vodoravnog klizanja ==================== */
.modal { overflow-x: hidden; }
.modal img, .modal iframe, .modal video { max-width: 100%; }
@media (max-width: 480px) {
    .modal { padding: 20px 14px; }           /* 32px sa obje strane je gutalo trecinu ekrana */
}
/* "Zaboravljena lozinka" */
.kk-reset-prozor { padding: 6px 4px; }
.kk-reset-red { display: flex; gap: 8px; margin-bottom: 14px; }
.kk-reset-red select { flex: 0 0 92px; min-width: 0; }
.kk-reset-red input { flex: 1 1 auto; min-width: 0; width: 100%; }
.kk-reset-dugmad { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.kk-reset-dugmad button { flex: 1 1 130px; white-space: nowrap; }
/* reCAPTCHA (304px) i Turnstile se centriraju i, ako su siri od prozora, smanjuju umjesto da klize */
#recaptcha-container-forgot, #recaptcha-container-reg, #kk-turnstile, #kk-turnstile-reset {
    display: flex; justify-content: center; max-width: 100%; overflow: hidden; margin: 6px 0;
}
#recaptcha-container-forgot:empty, #recaptcha-container-reg:empty { display: none; margin: 0; }
@media (max-width: 400px) {
    #recaptcha-container-forgot > div, #recaptcha-container-reg > div { transform: scale(0.86); transform-origin: top center; }
}


/* ==================== VODORAVNI POTEZ JE NAS, NE PREGLEDACEV ====================
   Pregledac odlucuje o gestu na PRVOM pomjeranju prsta — prije nego sto nas
   kod zna da li je potez vodoravan. Zato je na Androidu pri povlacenju
   udesno (profil -> pocetna) Chrome hvatao vodoravni "overscroll" i rastezao
   cijelu stranu, a kasniji preventDefault vise nije vrijedio. `pan-y` kaze
   pregledacu: ti radis samo uspravno listanje (i zum), vodoravno ne diras —
   to radi js/nav-klizanje.js. Elementi koji se sami vodoravno listaju
   (sličice u pregledu slike, red kategorija, tabele) to zadrzavaju. */
#main-site { touch-action: pan-y pinch-zoom; }
.lb-thumbs, .category-items, .admin-table-wrap, [style*="overflow-x: auto"], [style*="overflow-x:auto"] { touch-action: pan-x pan-y; }


/* ==================== PRAVI UZROK RASTEZANJA PRI POTEZU UNAZAD (03.10.2026) ====================
   Pri potezu unazad aktivna stranica se pomjera UDESNO i viri van desne ivice.
   U rezimu dokumenta #main-site je imao `overflow: visible`, pa je taj visak
   sirio dokument; Chrome na telefonu tada prosiri "layout viewport", a fiksni
   elementi (gornja traka, meni) se sire s njim — otud rastegnuta traka. Potez
   unaprijed pomjera stranicu ulijevo, a lijevi visak ne siri dokument, zato
   tamo nije smetalo. `overflow-x: clip` sijece visak bez pravljenja skrolera
   (uspravno ostaje visible, dokument i dalje skroluje). */
html.kk-skrol-dokument #main-site { overflow-x: clip; overflow-y: visible; }
html.kk-skrol-dokument.kk-klizi-aktivno, html.kk-skrol-dokument.kk-klizi-aktivno body { overflow-x: clip; }


/* ==================== ADMIN — AKTIVNOST (posjećenost) ==================== */
.kk-grafik { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding: 6px 0 0; }
.kk-stub { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; cursor: default; }
.kk-stub-posjete { width: 100%; background: var(--primary); border-radius: 3px 3px 0 0; position: relative; opacity: 0.9; transition: opacity 0.15s; }
.kk-stub:hover .kk-stub-posjete { opacity: 1; }
.kk-stub-uredjaji { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.45); border-radius: 3px 3px 0 0; }
[data-theme="light"] .kk-stub-uredjaji { background: rgba(255,255,255,0.55); }
.kk-stub span { font-size: 0.55rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; max-width: 100%; }
.kk-stub:nth-child(2n) span { visibility: hidden; }
@media (max-width: 600px) { .kk-stub:not(:nth-child(5n+1)) span { visibility: hidden; } }
.kk-tabela-omot { overflow-x: auto; }
.kk-tabela { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.kk-tabela th, .kk-tabela td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--border); }
.kk-tabela th:first-child, .kk-tabela td:first-child { text-align: left; color: var(--text-muted); }
.kk-tabela th { color: var(--text-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; }
.kk-tabela td { font-weight: 600; color: var(--text); }
.kk-tabela tr:last-child td { border-bottom: 0; }
.kk-udio { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.kk-udio > div { background: var(--bg-section); border: 1px solid var(--border); border-radius: 12px; padding: 12px; text-align: center; }
.kk-udio strong { display: block; font-size: 1.3rem; color: var(--primary); }
.kk-udio span { font-size: 0.78rem; color: var(--text-muted); }
.kk-top { margin: 0; padding-left: 22px; }
.kk-top li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.kk-top li:last-child { border-bottom: 0; }
.kk-top a { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-top a:hover { color: var(--primary); }
.kk-top span { color: var(--text-muted); white-space: nowrap; }

/* ==================== ADMIN — AKTIVNOST v2: pločice, grafikoni, trake ====================
   Boje serija (validirane za obje teme, dataviz paleta): s1 zlatna, s2 plava, s3 zelena. */
:root { --kk-s1: #C98500; --kk-s2: #3987e5; --kk-s3: #199e70; --kk-graf-mreza: rgba(255,255,255,0.09); --kk-graf-tekst: #8a8aa8; }
[data-theme="light"] { --kk-s1: #B8860B; --kk-s2: #2a78d6; --kk-s3: #1baf7a; --kk-graf-mreza: rgba(0,0,0,0.08); --kk-graf-tekst: #6F685C; }
.kk-podkartice { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.kk-podkartica { background: var(--bg-section); border: 1px solid var(--border); color: var(--text-muted); padding: 9px 14px; border-radius: 999px; font-family: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.kk-podkartica.aktivna { background: var(--gradient-primary); color: #000; border-color: transparent; }
.kk-filteri { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.kk-filter { background: var(--bg-section); border: 1px solid var(--border); color: var(--text); padding: 6px 12px; border-radius: 8px; font-family: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.kk-filter.aktivan { border-color: var(--primary); color: var(--primary); background: rgba(212,160,23,0.1); }
/* Pločice u fiksnim kolonama (8 → 2×4, 6 → 2×3) umjesto auto-fit koji je
   ostavljao „krnji“ posljednji red (08.10.2026). */
.kk-plocice { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.kk-plocice.kk-plocice-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kk-plocice, .kk-plocice.kk-plocice-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .kk-plocice, .kk-plocice.kk-plocice-3 { grid-template-columns: 1fr; } }
.kk-pl-naziv { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-pl { background: var(--bg-card-solid); border: 1px solid var(--border-solid); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.kk-pl-naziv { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.kk-pl-red { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.kk-pl-broj { font-size: 1.55rem; font-weight: 700; color: var(--text-bright); line-height: 1.1; }
.kk-pl-broj small { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; margin-left: 2px; }
.kk-pl-niz { width: 92px; height: 26px; flex: 0 0 auto; }
.kk-pl-niz polyline { fill: none; stroke: var(--kk-s1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.kk-pl-delta { display: inline-block; margin-top: 6px; font-size: 0.72rem; font-weight: 700; }
.kk-pl-delta small { font-weight: 500; color: var(--text-muted); margin-left: 3px; }
.kk-pl-gore { color: var(--success); } .kk-pl-dolje { color: var(--danger); } .kk-pl-isto { color: var(--text-muted); }
.kk-dvije { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 860px) { .kk-dvije { grid-template-columns: 1fr; } }
.kk-graf-omot { position: relative; }
.kk-graf { width: 100%; height: auto; display: block; }
.kk-graf-mreza { stroke: var(--kk-graf-mreza); stroke-width: 1; }
.kk-graf-tik { fill: var(--kk-graf-tekst); font-size: 10px; font-family: inherit; font-variant-numeric: tabular-nums; }
.kk-graf-s1 { fill: var(--kk-s1); }
.kk-graf-pogodak { fill: transparent; }
.kk-graf-stub.aktivan .kk-graf-pogodak { fill: rgba(255,255,255,0.05); }
[data-theme="light"] .kk-graf-stub.aktivan .kk-graf-pogodak { fill: rgba(0,0,0,0.04); }
.kk-graf-s2-linija { fill: none; stroke: var(--kk-s2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.kk-graf-s2-tacka { fill: var(--kk-s2); stroke: var(--bg-card-solid); stroke-width: 2; }
.kk-graf-oblak { position: absolute; z-index: 3; pointer-events: none; background: var(--bg-card-solid); border: 1px solid var(--border-solid); border-radius: 10px; padding: 8px 10px; font-size: 0.78rem; color: var(--text); box-shadow: 0 8px 24px rgba(0,0,0,0.3); white-space: nowrap; }
.kk-graf-oblak strong { display: block; color: var(--text-bright); margin-bottom: 3px; }
.kk-graf-oblak b { color: var(--text-bright); font-variant-numeric: tabular-nums; }
.kk-legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.76rem; color: var(--text-muted); margin: 2px 0 6px; }
.kk-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.kk-legenda b { color: var(--text); }
.kk-leg-1, .kk-leg-2, .kk-leg-3 { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.kk-leg-1 { background: var(--kk-s1); } .kk-leg-2 { background: var(--kk-s2); } .kk-leg-3 { background: var(--kk-s3); }
.kk-trake { display: flex; flex-direction: column; gap: 7px; }
.kk-traka-red { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; align-items: center; gap: 10px; font-size: 0.82rem; }
.kk-traka-naziv { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-traka-naziv a { color: var(--text); font-weight: 600; } .kk-traka-naziv a:hover { color: var(--primary); }
.kk-traka-stub { height: 12px; background: var(--bg-section); border-radius: 0 4px 4px 0; overflow: hidden; }
.kk-traka-pun { height: 100%; background: var(--kk-s1); border-radius: 0 4px 4px 0; }
.kk-traka-broj { color: var(--text-bright); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kk-traka-broj small { color: var(--text-muted); font-weight: 500; margin-left: 5px; }
.kk-udio-naslov { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; margin: 10px 0 6px; }
.kk-udio-naslov:first-child { margin-top: 0; }
.kk-udjeli { display: flex; height: 14px; gap: 2px; border-radius: 4px; overflow: hidden; background: var(--bg-section); }
.kk-udio-seg { height: 100%; min-width: 2px; }
.kk-seg-1 { background: var(--kk-s1); } .kk-seg-2 { background: var(--kk-s2); } .kk-seg-3 { background: var(--kk-s3); }

/* ==================== PODNOŽJE — logotipi kartica i banke (NLB/Bankart) ====================
   Obavezno po ugovoru o e-commerce naplati. Svijetle verzije (fp-svijetlo)
   u svijetloj temi, „reverse“ verzije (fp-tamno) u tamnoj. */
.footer-placanje { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 0 14px; border-top: 1px solid var(--border); }
.footer-placanje-tekst { font-size: 0.78rem; color: var(--text-muted); }
.footer-placanje-tekst i { color: var(--primary); margin-right: 5px; }
.footer-placanje-logoi { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.footer-placanje-logoi img { height: 30px; width: auto; display: block; }
.footer-placanje-logoi .fp-nlb { height: 26px; background: #fff; padding: 3px 7px; border-radius: 5px; }
.footer-placanje-logoi .fp-visa { background: #fff; padding: 4px 6px; border-radius: 5px; height: 28px; }
.footer-placanje-logoi .fp-okvir { border-radius: 5px; }
.footer-placanje-logoi .fp-svijetlo { display: none; }
.footer-placanje-logoi .fp-tamno { display: block; }
[data-theme="light"] .footer-placanje-logoi .fp-svijetlo { display: block; }
[data-theme="light"] .footer-placanje-logoi .fp-tamno { display: none; }
[data-theme="light"] .footer-placanje-logoi .fp-nlb,
[data-theme="light"] .footer-placanje-logoi .fp-visa { background: transparent; padding: 0; }
@media (max-width: 600px) { .footer-placanje-logoi { gap: 12px; } .footer-placanje-logoi img { height: 24px; } .footer-placanje-logoi .fp-nlb, .footer-placanje-logoi .fp-visa { height: 22px; } }

/* ==================== UPLATNICA (primjer popunjenog naloga) ==================== */
/* Crta se uvijek na 760×360 i skalira (transform) u omot / preko ekrana. */
.kk-upl-omot {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0 0 6px;
    border-radius: 6px;
    cursor: zoom-in;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.kk-upl-omot .kk-upl { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.kk-upl-napomena {
    font-size: 0.76rem;
    color: var(--text-muted);
    text-align: left;
    line-height: 1.45;
    margin: 0 0 12px;
}
.kk-upl-napomena i { color: var(--primary); }
.kk-upl {
    width: 760px;
    height: 360px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 330px 1fr;
    background: #f6b3c0;
    color: #16214d;
    border: 2px solid #1a1a1a;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    user-select: none;
}
.kk-upl-l { padding: 8px 14px 6px; border-right: 2px solid #1a1a1a; display: flex; flex-direction: column; }
.kk-upl-d { padding: 6px 12px; display: flex; flex-direction: column; }
.kk-upl-naslov { font-weight: 700; letter-spacing: 1.5px; font-size: 11px; margin: 8px 0 10px; }
.kk-upl-polje {
    border: 1px solid #1a1a1a;
    min-height: 24px;
    padding: 2px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: #f8bfca;
}
.kk-upl-polje b { font-size: 13px; font-weight: 700; color: #16214d; }
.kk-upl-polje span { font-size: 11px; color: #3b3b3b; }
.kk-upl-visoko { min-height: 42px; }
.kk-upl-op { font-size: 8.5px; color: #333; margin: 2px 0 6px; }
.kk-upl-prazno { color: #8a8a8a; font-size: 11px; }
.kk-upl-potpis { margin-top: auto; border-bottom: 1px solid #1a1a1a; padding-bottom: 2px; font-size: 11px; }
.kk-upl-l .kk-upl-potpis + .kk-upl-op { margin-bottom: 0; }
.kk-upl-kvadrati { display: flex; justify-content: flex-end; gap: 14px; margin-bottom: 6px; }
.kk-upl-kvadrati > div { display: flex; align-items: center; gap: 4px; }
.kk-upl-kvadrati .kk-upl-op { margin: 0; }
.kk-upl-kv { border: 1px solid #1a1a1a; width: 18px; height: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: #f8bfca; }
.kk-upl-red { display: flex; gap: 6px; }
.kk-upl-red > * { flex: 1 1 auto; }
.kk-upl-red .kk-upl-model { flex: 0 0 96px; }
.kk-upl-ops .kk-upl-op { margin-top: 2px; }
.kk-upl-iznos-red { align-items: center; }
.kk-upl-eur { flex: 0 0 30px; font-weight: 700; font-size: 12px; text-align: left; }
.kk-upl-iznos b { font-size: 14px; }
.kk-upl-sifra { flex: 0 0 96px; }
.kk-upl-racun b { font-size: 15px; letter-spacing: 1.5px; }
.kk-upl-linije { margin-top: 6px; }
.kk-upl-linija { border-bottom: 1px solid #1a1a1a; height: 14px; font-size: 11px; }
.kk-upl-mjesto { margin-top: auto; }
.kk-upl-mjesto .kk-upl-op { margin-bottom: 0; }
.kk-upl-linije > div:first-child { flex: 0 0 42%; }

/* Prozor „Plaćanje virmanom“ — koraci umjesto pasusa (06.10.2026). */
.kk-virman-iznos { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 14px; }
.kk-virman-iznos strong { color: var(--primary); font-size: 1.05rem; }
.kk-koraci {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kk-koraci li { display: flex; align-items: flex-start; gap: 10px; }
.kk-koraci li > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kk-koraci strong { color: var(--text-bright); font-size: 0.9rem; }
.kk-koraci span:not(.kk-korak-br) { color: var(--text-muted); font-size: 0.82rem; line-height: 1.45; }
.kk-koraci b { color: var(--text-bright); font-weight: 600; word-break: break-all; }
.kk-korak-br {
    flex: 0 0 24px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #1a1a1a;
    font-weight: 700;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.kk-koraci li:last-child .kk-korak-br { background: rgba(46,204,113,0.18); color: #2ecc71; border: 1px solid rgba(46,204,113,0.45); }

/* Uvećan prikaz preko cijelog ekrana (na uspravnom telefonu zarotiran). */
#kk-upl-puna {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(5,5,12,0.94);
    opacity: 0; transition: opacity 0.2s ease;
}
#kk-upl-puna.kk-upl-vidljiva { opacity: 1; }
#kk-upl-puna .kk-upl { position: absolute; top: 50%; left: 50%; transform-origin: 50% 50%; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
.kk-upl-puna-op {
    position: absolute; left: 16px; right: 70px; top: calc(14px + env(safe-area-inset-top, 0px));
    color: #ddd; font-size: 0.85rem; text-align: left;
}
.kk-upl-zatvori {
    position: absolute; right: 14px; top: calc(10px + env(safe-area-inset-top, 0px));
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
    color: #fff; font-size: 1.1rem; cursor: pointer; z-index: 2;
}
body.kk-upl-puna-otvorena { overflow: hidden; }
html.kk-brzo #kk-upl-puna { transition: none; opacity: 1; }
[data-theme="light"] .kk-upl-omot { box-shadow: 0 4px 14px rgba(60,40,0,0.15); }

/* Podizbor sačuvana/nova kartica ispod opcije „Karticom“ (07.10.2026). */
.kk-kartica-pod { margin: -4px 0 8px 28px; display: flex; flex-direction: column; gap: 6px; }
.kk-opcija-mala { padding: 8px 10px; }
.kk-opcija-mala strong { font-size: 0.9rem; }

/* Onemogućen prilagođeni select (zrcali `disabled` nativnog). */
.custom-select-wrap.custom-select-disabled { opacity: 0.6; }

/* Linija napretka pri vrhu dok se oglas dovlači sa servera (app.js kkProgres) */
.kk-progres { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--primary); z-index: 100000; opacity: 0; pointer-events: none; border-radius: 0 2px 2px 0; }

/* Slot čija dodjela još traje na serveru (app.js assignGratisSlot) */
.gratis-slot--ceka { opacity: 0.72; pointer-events: none; }
.gratis-slot--ceka .gratis-slot-tag i { color: var(--primary); }

/* Aktivnost: svi okviri pune širine — ivice ravne sa pločicama (08.10.2026) */
#admin-aktivnost-content .kk-kutija { max-width: none; }
#admin-aktivnost-content .kk-kutija .kk-plocice { margin-bottom: 12px; }

@media (max-width: 640px) {
    .admin-tab { padding: 10px 10px; font-size: 0.82rem; gap: 6px; }
    #admin-tab-statistika { padding: 13px 10px; font-size: 0.95rem; }
}

/* Statistika: podkartice i spisak paketa/pretplata (08.10.2026) */
.admin-stat-podkartice { margin-bottom: 18px; }
.admin-pretplata-red { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.admin-pretplata-red:last-child { border-bottom: 0; }
.admin-pretplata-ko { min-width: 0; }
.admin-pretplata-ko a { color: var(--text-bright); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.admin-pretplata-ko a:hover { color: var(--primary); }
.admin-pretplata-ko small { display: block; color: var(--text-muted); }
.admin-pretplata-nacin { color: var(--text-muted); min-width: 0; }
.admin-pretplata-nacin i, .admin-pretplata-rok i { color: var(--primary); margin-right: 5px; }
.admin-pretplata-rok { white-space: nowrap; font-weight: 600; }
.admin-pretplata-rok small { font-weight: 500; opacity: 0.8; }
@media (max-width: 640px) {
    .admin-pretplata-red { grid-template-columns: 1fr; gap: 4px; }
}

/* Statistika: Pregled preko cijele širine, ostale četiri 2×2 — isto na računaru i telefonu (08.10.2026) */
#admin-stat-podkartice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#admin-stat-podkartice .kk-podkartica { margin: 0; min-width: 0; justify-content: center; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 10px 8px; }
#admin-stat-podkartice .kk-podkartica[data-pod="pregled"] { grid-column: 1 / -1; }

/* Statistika: izabrana podkartica nije žuto popunjena — ista pozadina kao ostale,
   samo zlatni okvir i tekst (zahtjev 08.10.2026) */
#admin-stat-podkartice .kk-podkartica.aktivna { background: var(--bg-section); color: var(--primary); border-color: var(--primary); }